Add deletion of files, add slots to tree and a global icon by type. Project update needs rework.

components/base/Tree.vue

@@ -1,56 +1,20 @@
 <template>
-    <TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm" :items="model" :get-key="(item) => item.link ?? item.label" :defaultExpanded="flatten(model)">
+    <TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm" :items="model" :get-key="getKey" :defaultExpanded="flatten(model)">
         <TreeItem v-for="item in flattenItems" v-slot="{ isExpanded }" :key="item._id" :style="{ 'padding-left': `${item.level - 0.5}em` }" v-bind="item.bind" class="flex items-center px-2 outline-none relative cursor-pointer">
-            <NuxtLink :href="item.value.link && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.link } } : undefined" no-prefetch class="flex flex-1 items-center border-light-35 dark:border-dark-35 hover:border-accent-blue" :class="{ 'border-s': !item.hasChildren, 'font-medium': item.hasChildren }" active-class="text-accent-blue border-s-2 !border-accent-blue">
-                <Icon v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level - 1}em` }" />
-                <div class="pl-3 py-1 flex-1 truncate" :data-tag="item.value.tag">
-                    {{ item.value.label }}
-                </div>
-            </NuxtLink>
+            <slot :isExpanded="isExpanded" :item="item" />
         </TreeItem>
     </TreeRoot>
 </template>
 
-<script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
+<script setup lang="ts" generic="T extends Record<string, any>">
+const { getKey } = defineProps<{
+    getKey: (val: T) => string
+}>();
 
-interface TreeItem
-{
-    label: string
-    link?: string
-    tag?: string
-    open?: boolean
-    children?: TreeItem[]
-}
-const model = defineModel<TreeItem[]>();
+const model = defineModel<T[]>();
 
-function flatten(arr: TreeItem[]): string[]
+function flatten(arr: T[]): string[]
 {
-    return arr.filter(e => e.open).flatMap(e => [e?.link ?? e.label, ...flatten(e.children ?? [])]);
+    return arr.filter(e => e.open).flatMap(e => [getKey(e), ...flatten(e.children ?? [])]);
 }
-</script>
-
-<style>
-[data-tag="canvas"]:after,
-[data-tag="private"]:after
-{
-    @apply text-sm;
-    @apply font-normal;
-    @apply float-end;
-    @apply border ;
-    @apply border-light-35 ;
-    @apply dark:border-dark-35;
-    @apply px-1;
-    @apply bg-light-20;
-    @apply dark:bg-dark-20;
-    font-variant: small-caps;
-}
-[data-tag="canvas"]:after
-{
-    content: 'Canvas'
-}
-[data-tag="private"]:after
-{
-    content: 'Privé'
-}
-</style>
+</script>

components/prose/ProseA.vue

@@ -31,12 +31,8 @@
 <script setup lang="ts">
 import { parseURL } from 'ufo';
 import { Icon } from '@iconify/vue/dist/iconify.js';
+import { iconByType } from '#shared/general.utils';
 
-const iconByType: Record<string, string> = {
-    'folder': 'lucide:folder',
-    'canvas': 'ph:graph-light',
-    'file': 'radix-icons:file',
-}
 const { href } = defineProps<{
     href: string
     class?: string