Add new files in project config

pages/explore/edit/index.vue

@@ -3,15 +3,15 @@
 		<Title>d[any] - Configuration du projet</Title>
 	</Head>
 	<div class="flex flex-1 flex-row gap-4 p-6 items-start" v-if="navigation">
-		<div class="flex flex-1 flex-col w-[450px] max-h-full">
+		<div class="flex flex-1 flex-col w-[450px] max-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 }">
+			:items="navigation ?? undefined" :get-key="(item: Partial<ProjectItem>) => item.path ? getPath(item as ProjectItem) : ''" @updateTree="drop" @update:model-value="console.log">
+				<template #default="{ handleToggle, handleSelect, isExpanded, isDragging, 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; }">
+						<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">
 							{{ item.value.title }}
 						</div>
 					</div>
@@ -29,7 +29,31 @@
 		</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>
+				<DropdownMenu align="center" side="bottom" :options="[{
+					type: 'item',
+					label: 'Markdown',
+					kbd: 'Ctrl+N',
+					icon: 'radix-icons:file',
+					select: () => add('markdown'),
+				}, {
+					type: 'item',
+					label: 'Dossier',
+					kbd: 'Ctrl+Shift+N',
+					icon: 'lucide:folder',
+					select: () => add('folder'),
+				}, {
+					type: 'item',
+					label: 'Canvas',
+					icon: 'ph:graph-light',
+					select: () => add('canvas'),
+				}, {
+					type: 'item',
+					label: 'Fichier',
+					icon: 'radix-icons:file-text',
+					select: () => add('file'),
+				}]">
+					<Button>Nouveau</Button>
+				</DropdownMenu>
 				<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>
@@ -37,7 +61,7 @@
             <div v-if="selected" class="flex-1 flex justify-start items-start">
                 <div class="flex flex-col flex-1 justify-start items-start">
                     <input type="text" v-model="selected.title" placeholder="Titre" class="flex-1 mx-4 h-16 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
-                    <span><pre class="ps-2 inline">{{ selected.parent }}/</pre><input v-model="selected.name" placeholder="Titre" class="font-mono border-b border-light-35 dark:border-dark-35 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none bg-transparent" /></span>
+                    <span><pre class="ps-2 inline">/{{ selected.parent ? selected.parent + '/' : '' }}</pre><input v-model="selected.name" placeholder="Titre" class="font-mono border-b border-light-35 dark:border-dark-35 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none bg-transparent" /></span>
                     <div class="flex ms-6 flex-col justify-start items-start">
                         <Tooltip message="Consultable uniquement par le propriétaire" side="right"><Switch label="Privé" v-model="selected.private" /></Tooltip>
                         <Tooltip message="Afficher dans le menu de navigation" side="right"><Switch label="Navigable" v-model="selected.navigable" /></Tooltip>
@@ -163,6 +187,21 @@ const tree = {
 	  }
 	}
   },
+  search(data: ProjectItem[], prop: keyof ProjectItem, value: string): ProjectItem[] {
+	const arr = [];
+
+	for (const item of data)
+	{
+	  if (item[prop]?.toString()?.includes(value))
+		arr.push(item);
+
+	  if (tree.hasChildren(item)) {
+		arr.push(...tree.search(item.children ?? [], prop, value));
+	  }
+	}
+
+	return arr;
+  },
   getPathToItem({
 	current,
 	targetId,
@@ -197,14 +236,26 @@ function add(type: FileType): void
 		return;
 	}
 
+	const news = [...tree.search(navigation.value, 'name', 'nouveau'), ...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
+	console.log(news);
+
+	const item: ProjectItem = { navigable: true, private: false, parent: '', path: '', title: `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`, type: type, order: 0, name: `nouveau${news.length > 0 ? '-' + news.length : ''}`, children: type === 'folder' ? [] : undefined };
+
 	if(!selected.value)
 	{
-		navigation.value = [...navigation.value, {  }]
+		navigation.value = [...navigation.value, item];
 	}
-	if(selected.value?.children)
+	else if(selected.value?.children)
 	{
-		tree.insertChild(selected.value)
+		item.parent = getPath(selected.value);
+		navigation.value = tree.insertChild(navigation.value, item.parent, item);
 	}
+	else
+	{
+		navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
+	}
+
+	selected.value = item;
 }
 function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectItem[] | undefined {
 	if(!navigation.value)