Small progress on new (file/folder) and remove in project settings

pages/explore/edit/index.vue

@@ -3,30 +3,34 @@
 		<Title>d[any] - Configuration du projet</Title>
 	</Head>
 	<div class="flex flex-1 flex-row gap-4 p-6 items-start" v-if="navigation">
-		<DraggableTree class="list-none select-none border border-light-35 dark:border-dark-35 text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto w-[450px] max-h-full" 
-		:items="navigation ?? undefined" :get-key="(item: Partial<ProjectItem>) => item.path ? getPath(item as ProjectItem) : ''" @updateTree="drop">
-			<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver, item }">
-				<div class="flex flex-1 px-2" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
-					<span class="py-2 px-2" @click="handleToggle" v-if="item.hasChildren" >
-						<Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
-					</span>
-					<div class="ps-2 py-1 flex-1 truncate" :class="{'!ps-4 border-s border-light-35 dark:border-dark-35': !item.hasChildren}" :title="item.value.title" @click="() => { handleSelect();  selected = isSelected ? undefined : item.value; }">
-						{{ item.value.title }}
+		<div class="flex flex-1 flex-col w-[450px] max-h-full">
+			<DraggableTree class="list-none select-none border border-light-35 dark:border-dark-35 text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto" 
+			:items="navigation ?? undefined" :get-key="(item: Partial<ProjectItem>) => item.path ? getPath(item as ProjectItem) : ''" @updateTree="drop">
+				<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver, item }">
+					<div class="flex flex-1 px-2" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
+						<span class="py-2 px-2" @click="handleToggle" v-if="item.hasChildren" >
+							<Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
+						</span>
+						<div class="ps-2 py-1 flex-1 truncate" :class="{'!ps-4 border-s border-light-35 dark:border-dark-35': !item.hasChildren}" :title="item.value.title" @click="() => { handleSelect();  selected = isSelected ? undefined : item.value; }">
+							{{ item.value.title }}
+						</div>
 					</div>
-				</div>
-			</template>
-			<template #hint="{ instruction }">
-				<div v-if="instruction" class="absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50" :style="{
-                    width: `calc(100% - ${instruction.currentLevel - 1}em)`
-                }" :class="{
-					'!border-b-4': instruction?.type === 'reorder-below',
-					'!border-t-4': instruction?.type === 'reorder-above',
-					'!border-4': instruction?.type === 'make-child',
-					}"></div>
-			</template>
-		</DraggableTree>
+				</template>
+				<template #hint="{ instruction }">
+					<div v-if="instruction" class="absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50" :style="{
+							width: `calc(100% - ${instruction.currentLevel - 1}em)`
+						}" :class="{
+							'!border-b-4': instruction?.type === 'reorder-below',
+							'!border-t-4': instruction?.type === 'reorder-above',
+							'!border-4': instruction?.type === 'make-child',
+						}"></div>
+				</template>
+			</DraggableTree>
+		</div>
         <div class="flex flex-col flex-1">
             <div class="flex self-end gap-4 px-4">
+				<Tooltip message="Ctrl+N" side="bottom"><Button @click="() => add()">Nouveau</Button></Tooltip>
+				<Button @click="" v-if="selected" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer</Button>
                 <Tooltip message="Ctrl+S" side="bottom"><Button @click="() => save(true)" :loading="saveStatus === 'pending'" class="border-light-blue dark:border-dark-blue hover:border-light-blue dark:hover:border-dark-blue focus:shadow-light-blue dark:focus:shadow-dark-blue">Enregistrer</Button></Tooltip>
                 <Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink :href="{ name: 'explore' }"><Button>Annuler</Button></NuxtLink></Tooltip>
             </div>
@@ -50,6 +54,7 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
 import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
 import { parsePath } from '#shared/general.utils';
 import type { ProjectItem } from '~/schemas/project';
+import type { FileType } from '~/schemas/file';
 
 definePageMeta({
 	rights: ['admin', 'editor'],
@@ -63,7 +68,7 @@ const toaster = useToast();
 const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
 
 const { data: project } = await useFetch(`/api/project`);
-const navigation = computed({ 
+const navigation = computed<ProjectItem[] | undefined>({ 
     get: () => project.value?.items,
     set: (value) => {
         const proj = project.value;
@@ -78,6 +83,7 @@ const selected = ref<ProjectItem>();
 
 useShortcuts({
     meta_s: { usingInput: true, handler: () => save(false) },
+    meta_n: { usingInput: true, handler: () => add('markdown') },
     meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: path.value }}) }
 })
 
@@ -184,6 +190,22 @@ const tree = {
   },
 }
 
+function add(type: FileType): void
+{
+	if(!navigation.value)
+	{
+		return;
+	}
+
+	if(!selected.value)
+	{
+		navigation.value = [...navigation.value, {  }]
+	}
+	if(selected.value?.children)
+	{
+		tree.insertChild(selected.value)
+	}
+}
 function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectItem[] | undefined {
 	if(!navigation.value)
 		return;

schemas/file.ts

@@ -1,14 +1,16 @@
 import { z } from "zod";
 
+export const fileType = z.enum(['folder', 'file', 'markdown', 'canvas']);
 export const schema = z.object({
     path: z.string(),
     owner: z.number().finite(),
     title: z.string(),
-    type: z.enum(['folder', 'file', 'markdown', 'canvas']),
+    type: fileType,
     content: z.string(),
     navigable: z.boolean(),
     private: z.boolean(),
     order: z.number().finite(),
 });
 
+export type FileType = z.infer<typeof fileType>;
 export type File = z.infer<typeof schema>; 

schemas/navigation.ts

@@ -1,10 +1,11 @@
 import { z } from "zod";
+import { fileType } from "./file";
 
 export const single = z.object({
     path: z.string(),
     owner: z.number().finite(),
     title: z.string(),
-    type: z.enum(['folder', 'file', 'markdown', 'canvas']),
+    type: fileType,
     navigable: z.boolean(),
     private: z.boolean(),
     order: z.number().finite(),

schemas/project.ts

@@ -1,11 +1,12 @@
 import { z } from "zod";
+import { fileType } from "./file";
 
 const baseItem = z.object({
     path: z.string(),
     parent: z.string(),
     name: z.string().optional(),
     title: z.string(),
-    type: z.enum(['folder', 'file', 'markdown', 'canvas']),
+    type: fileType,
     navigable: z.boolean(),
     private: z.boolean(),
     order: z.number().finite(),