From 42658558c52a4d3ccba4b847d6ac38de5c8f230d Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Sun, 10 Nov 2024 22:29:59 +0100
Subject: [PATCH] Add user deletion, ProseA hover cards, Canvas

---
 app.vue                              |   2 +-
 components/Markdown.vue              |   2 +-
 components/base/Button.vue           |   8 +-
 components/base/HoverCard.vue        |   2 +-
 components/base/Tree.vue             |  33 +++-
 components/canvas/Canvas.vue         | 228 +++++++++++++++++++++++++++
 components/canvas/CanvasEdge.vue     |  33 ++++
 components/canvas/CanvasNode.vue     |  52 ++++++
 components/prose/ProseA.vue          |  90 ++++++-----
 components/prose/ProseBlockquote.vue |  11 +-
 components/prose/ProseH2.vue         |   2 +-
 composables/useDatabase.ts           |   1 +
 db.sqlite                            | Bin 450560 -> 450560 bytes
 db.sqlite-shm                        | Bin 32768 -> 32768 bytes
 db.sqlite-wal                        | Bin 74192 -> 387312 bytes
 layouts/default.vue                  |   8 +-
 pages/editor.vue                     |   2 +-
 pages/explore/[...path].vue          |   5 +-
 pages/explore/edit/[...path].vue     |   2 +-
 pages/user/profile.vue               |  21 ++-
 server/api/file.get.ts               |  36 ++---
 server/api/users/[id].delete.ts      |  30 ++++
 server/plugins/session.ts            |   8 +-
 23 files changed, 476 insertions(+), 100 deletions(-)
 create mode 100644 components/canvas/Canvas.vue
 create mode 100644 components/canvas/CanvasEdge.vue
 create mode 100644 components/canvas/CanvasNode.vue
 create mode 100644 server/api/users/[id].delete.ts

diff --git a/app.vue b/app.vue
index 2604735..b682788 100644
--- a/app.vue
+++ b/app.vue
@@ -3,7 +3,7 @@
 		<NuxtRouteAnnouncer/>
 		<TooltipProvider>
 			<NuxtLayout>
-				<div class="xl:ps-12 xl:pe-12 ps-6 pe-4 flex flex-1 justify-center overflow-auto max-h-full">
+				<div class="xl:ps-12 xl:pe-12 ps-6 pe-4 flex flex-1 justify-center overflow-auto max-h-full relative">
 					<NuxtPage></NuxtPage>
 				</div>
 			</NuxtLayout>
diff --git a/components/Markdown.vue b/components/Markdown.vue
index 59bea96..b7e0481 100644
--- a/components/Markdown.vue
+++ b/components/Markdown.vue
@@ -1,7 +1,7 @@
 <template>
     <template v-if="content && content.length > 0">
       <Suspense :timeout="0">
-        <MarkdownRenderer class="px-8" #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
+        <MarkdownRenderer #default :key="key" v-if="node" :node="node"></MarkdownRenderer>
         <template #fallback><Loading /></template>
       </Suspense>
     </template>
diff --git a/components/base/Button.vue b/components/base/Button.vue
index 5f25d9c..0b4e6eb 100644
--- a/components/base/Button.vue
+++ b/components/base/Button.vue
@@ -1,6 +1,7 @@
 <template>
-    <button class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex items-center justify-center bg-light-25 dark:bg-dark-25 leading-none outline-none
-    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40"
+    <button :disabled="disabled" class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex items-center justify-center bg-light-25 dark:bg-dark-25 leading-none outline-none
+    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+    disabled:bg-light-10 dark:disabled:bg-dark-10 disabled:border-none disabled:text-light-50 dark:disabled:text-dark-50"
     :class="{'p-1': loading || icon, 'h-[35px] px-[15px]': !loading && !icon}" @click="!loading && emit('click')">
         <Loading v-if="loading" />
         <slot v-else />
@@ -8,9 +9,10 @@
 </template>
 
 <script setup lang="ts">
-const { icon = false, loading = false } = defineProps<{
+const { icon = false, loading = false, disabled = false } = defineProps<{
     icon?: boolean
     loading?: boolean
+    disabled?: boolean
 }>();
 const emit = defineEmits(['click']);
 </script>
\ No newline at end of file
diff --git a/components/base/HoverCard.vue b/components/base/HoverCard.vue
index 30f5ce3..8372455 100644
--- a/components/base/HoverCard.vue
+++ b/components/base/HoverCard.vue
@@ -4,7 +4,7 @@
             <slot></slot>
         </HoverCardTrigger>
         <HoverCardPortal v-if="!disabled">
-            <HoverCardContent :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
+            <HoverCardContent :class="$attrs.class" :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
                 <slot name="content"></slot>
                 <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
             </HoverCardContent>
diff --git a/components/base/Tree.vue b/components/base/Tree.vue
index ffc8c6d..df75f43 100644
--- a/components/base/Tree.vue
+++ b/components/base/Tree.vue
@@ -1,9 +1,9 @@
 <template>
-    <TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 p-2 font-medium xl:text-base text-sm" :items="model" :get-key="(item) => item.link ?? item.label">
+    <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">
         <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" active-class="text-accent-blue">
+            <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 border-light-35 dark:border-dark-35 hover:border-accent-blue" :class="{ 'border-s': !item.hasChildren }" :data-tag="item.value.tag">
+                <div class="pl-3 py-1 flex-1 truncate" :data-tag="item.value.tag">
                     {{ item.value.label }}
                 </div>
             </NuxtLink>
@@ -22,4 +22,29 @@ interface TreeItem
     children?: TreeItem[]
 }
 const model = defineModel<TreeItem[]>();
-</script>
\ No newline at end of file
+</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>
\ No newline at end of file
diff --git a/components/canvas/Canvas.vue b/components/canvas/Canvas.vue
new file mode 100644
index 0000000..fbb3caf
--- /dev/null
+++ b/components/canvas/Canvas.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { useDrag, usePinch, useWheel } from '@vueuse/gesture';
+import type { CanvasContent, CanvasNode } from '~/types/canvas';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { clamp } from '#imports';
+
+interface Props
+{
+    canvas: CanvasContent;
+}
+const props = defineProps<Props>();
+
+const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
+const canvas = useTemplateRef('canvas');
+
+const reset = (_: MouseEvent) => {
+    zoom.value = minZoom.value; 
+
+    dispX.value = 0; 
+    dispY.value = 0;
+}
+function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y: number }, offset: number): { x: number, y: number } {
+    switch (side) {
+        case "left":
+            return {
+                x: pos.x - offset,
+                y: pos.y
+            };
+        case "right":
+            return {
+                x: pos.x + offset,
+                y: pos.y
+            };
+        case "top":
+            return {
+                x: pos.x,
+                y: pos.y - offset
+            };
+        case "bottom":
+            return {
+                x: pos.x,
+                y: pos.y + offset
+            }
+    }
+}
+function getNode(id: string): CanvasNode | undefined
+{
+    return props.canvas.nodes.find(e => e.id === id);
+}
+function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: 'bottom' | 'top' | 'left' | 'right'): { x: number, y: number } {
+    switch (t) {
+        case "top":
+            return { x: (e.minX + e.maxX) / 2, y: e.minY };
+        case "right":
+            return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
+        case "bottom":
+            return { x: (e.minX + e.maxX) / 2, y: e.maxY };
+        case "left":
+            return { x: e.minX, y: (e.minY + e.maxY) / 2 };
+    }
+}
+function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
+    return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
+}
+function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
+    if(from === undefined || to === undefined)
+    {
+        return {
+            path: '',
+            from: {},
+            to: {},
+            toSide: '',
+        }
+    }
+    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
+    return bezier(start, fromSide, end, toSide);
+}
+function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'left' | 'right', to: { x: number, y: number }, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
+    const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
+    return {
+        path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
+        from: from,
+        to: to,
+        side: toSide,
+    };
+}
+function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
+    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
+    const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
+    const center = getCenter(start, end, b, s, 0.5);
+    return `translate(${center.x}px, ${center.y}px)`;
+}
+function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
+    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
+    return {
+        x: s * n.x + l * r.x + c * o.x + u * i.x,
+        y: s * n.y + l * r.y + c * o.y + u * i.y
+    };
+}
+/*
+
+stroke-light-red
+stroke-light-orange
+stroke-light-yellow
+stroke-light-green
+stroke-light-cyan
+stroke-light-purple
+dark:stroke-dark-red
+dark:stroke-dark-orange
+dark:stroke-dark-yellow
+dark:stroke-dark-green
+dark:stroke-dark-cyan
+dark:stroke-dark-purple
+fill-light-red
+fill-light-orange
+fill-light-yellow
+fill-light-green
+fill-light-cyan
+fill-light-purple
+dark:fill-dark-red
+dark:fill-dark-orange
+dark:fill-dark-yellow
+dark:fill-dark-green
+dark:fill-dark-cyan
+dark:fill-dark-purple
+bg-light-red
+bg-light-orange
+bg-light-yellow
+bg-light-green
+bg-light-cyan
+bg-light-purple
+dark:bg-dark-red
+dark:bg-dark-orange
+dark:bg-dark-yellow
+dark:bg-dark-green
+dark:bg-dark-cyan
+dark:bg-dark-purple
+border-light-red
+border-light-orange
+border-light-yellow
+border-light-green
+border-light-cyan
+border-light-purple
+dark:border-dark-red
+dark:border-dark-orange
+dark:border-dark-yellow
+dark:border-dark-green
+dark:border-dark-cyan
+dark:border-dark-purple
+
+*/
+
+const dragHandler = useDrag(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
+    event?.preventDefault();
+    dispX.value += x / zoom.value;
+    dispY.value += y / zoom.value;
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
+const pinchHandler = usePinch(({ event: Event, offset: [z] }: { event: Event, offset: number[] }) => { 
+    event?.preventDefault();
+    console.log(z);
+    zoom.value = clamp(z / 2048, minZoom.value, 3);
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
+const wheelHandler = useWheel(({ event: Event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
+    event?.preventDefault();
+    zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
+}, {
+    domTarget: canvas,
+    eventOptions: { passive: false, }
+})
+</script>
+
+<template>
+    <Suspense>
+        <template #default>
+            <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
+                :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
+                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
+                    <Tooltip message="Zoom avant" side="right">
+                        <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                            <Icon icon="radix-icons:plus" />
+                        </div>
+                    </Tooltip>
+                    <Tooltip message="Reset" side="right">
+                        <div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                            <Icon icon="radix-icons:reload" />
+                        </div>
+                    </Tooltip>
+                    <Tooltip message="Tout contenir" side="right">
+                        <div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                            <Icon icon="radix-icons:corners" />
+                        </div>
+                    </Tooltip>
+                    <Tooltip message="Zoom arrière" side="right">
+                        <div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                            <Icon icon="radix-icons:minus" />
+                        </div>
+                    </Tooltip>
+                </div>
+                <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
+                    :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
+                    <div>
+                        <CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
+                    </div>
+                    <template v-for="edge of props.canvas.edges">
+                        <div :key="edge.id" v-if="edge.label" class="absolute z-10"
+                            :style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
+                            <div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
+                        </div>
+                    </template>
+                    <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
+                        <CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
+                            :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
+                            :color="edge.color" :label="edge.label" />
+                    </svg>
+                </div>
+            </div>
+        </template>
+        <template #fallback>
+            <div class="loading"></div>
+        </template>
+    </Suspense>
+</template>
\ No newline at end of file
diff --git a/components/canvas/CanvasEdge.vue b/components/canvas/CanvasEdge.vue
new file mode 100644
index 0000000..32ec580
--- /dev/null
+++ b/components/canvas/CanvasEdge.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { CanvasColor } from "~/types/canvas";
+
+type Direction = 'bottom' | 'top' | 'left' | 'right';
+interface Props
+{
+    path: {
+        path: string;
+        from: { x: number; y: number };
+        to: { x: number; y: number };
+        side: Direction;
+    };
+    color?: CanvasColor;
+    label?: string;
+}
+const props = defineProps<Props>();
+
+const rotation: Record<Direction, string> = {
+    top: "180",
+    bottom: "0",
+    left: "90",
+    right: "270"
+};
+</script>
+
+<template>
+    <g :style="{'--canvas-color': color?.hex}" class="z-0">
+        <path :style="`stroke-linecap: butt; stroke-width: calc(3px * var(--zoom-multiplier));`" :class="color?.class ? `stroke-light-${color.class} dark:stroke-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'stroke-[color:var(--canvas-color)]' : 'stroke-light-40 dark:stroke-dark-40')" class="fill-none stroke-[4px]" :d="path.path"></path>
+        <g :style="`transform: translate(${path.to.x}px, ${path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path.side]}deg);`">
+            <polygon :class="color?.class ? `fill-light-${color.class} dark:fill-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'fill-[color:var(--canvas-color)]' : 'fill-light-40 dark:fill-dark-40')" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+        </g>
+    </g>
+</template>
\ No newline at end of file
diff --git a/components/canvas/CanvasNode.vue b/components/canvas/CanvasNode.vue
new file mode 100644
index 0000000..6dfcf63
--- /dev/null
+++ b/components/canvas/CanvasNode.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import type { CanvasNode } from '~/types/canvas';
+
+interface Props {
+    node: CanvasNode;
+    zoom: number;
+}
+
+const props = defineProps<Props>();
+
+const size = Math.max(props.node.width, props.node.height);
+const colors = computed(() => {
+    if(props.node.color)
+    {
+        const color = props.node.color;
+        return color?.class ? { bg: `bg-light-${color?.class} dark:bg-dark-${color?.class}`, border: `border-light-${color?.class} dark:border-dark-${color?.class}`} : { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` };
+    }
+    else
+    {
+        return { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` };
+    }
+})
+</script>
+
+<style>
+.bg-colored
+{
+    --tw-bg-opacity: 1;
+    background-color: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
+}
+</style>
+
+<template>
+    <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
+        <div :class="[colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex">
+            <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="colors.bg">
+                <template v-if="node.type === 'group' || zoom > Math.min(0.4, 1000 / size)">
+                    <div v-if="node.text?.length > 0" class="flex items-center">
+                        <Markdown :content="node.text" />
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="flex flex-1 justify-center items-center bg-light-30 dark:bg-dark-30">
+                        <Icon icon="radix-icons:text-align-left" class="w-8 h-8"/>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div v-if="node.type === 'group' && node.label !== undefined" :class="[colors.border]" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
index be11614..65cadf7 100644
--- a/components/prose/ProseA.vue
+++ b/components/prose/ProseA.vue
@@ -1,50 +1,60 @@
 <template>
-    <span class="text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85"><slot v-bind="$attrs"></slot></span>
-    <!-- <Suspense suspensible>
-        <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
-        :to="{ path: `/explorer/${project}/${data[0].path}`, hash: hash }" :class="class">
-            <PreviewContent :project="project" :path="data[0].path" :anchor="hash">
-                <template #default>
-                    <slot v-bind="$attrs"></slot>
-                    <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
-                        :icon="`icons/link-${data[0].type.toLowerCase()}`" />
+    <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
+    :to="{ name: 'explore-path', params: { path: data[0].path }, hash: hash }" :class="class">
+        <HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': data[0].type === 'canvas'}">
+            <template #content>
+                <template v-if="data[0].type === 'markdown'">
+                    <div class="px-10">
+                        <Markdown :content="data[0].content" />
+                    </div>
                 </template>
-            </PreviewContent>
-        </NuxtLink>
-        <NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
-            <slot v-bind="$attrs"></slot>
-            <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'Markdown'" :height="20" :width="20"
-                :icon="`icons/link-${data[0].type.toLowerCase()}`" />
-        </NuxtLink>
-        <slot :class="class" v-else v-bind="$attrs"></slot>
-    </Suspense> -->
+                <template v-else-if="data[0].type === 'canvas'">
+                    <div class="w-[600px] h-[600px] relative">
+                        <Canvas :canvas="JSON.parse(data[0].content)" />
+                    </div>
+                </template>
+            </template>
+            <template #default>
+                <slot v-bind="$attrs"></slot>
+                <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'markdown'" :icon="iconByType[data[0].type]" />
+            </template>
+        </HoverCard>
+    </NuxtLink>
+    <NuxtLink no-prefetch v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
+        <slot v-bind="$attrs"></slot>
+        <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'markdown'" :height="20" :width="20"
+            :icon="`icons/link-${data[0].type.toLowerCase()}`" />
+    </NuxtLink>
+    <slot :class="class" v-else v-bind="$attrs"></slot>
 </template>
-<!--<script setup lang="ts">
+
+<script setup lang="ts">
 import { parseURL } from 'ufo';
+import { Icon } from '@iconify/vue/dist/iconify.js';
 
-const props = defineProps({
-    href: {
-        type: String,
-        required: false,
-    },
-    class: {
-        type: String,
-        required: false,
-    }
-});
+const iconByType: Record<string, string> = {
+    'folder': 'circum:folder-on',
+    'canvas': 'ph:graph-light',
+    'file': 'radix-icons:file',
+}
+const { href } = defineProps<{
+    href: string
+    class?: string
+}>();
 
-const route = useRoute();
-const { hash, pathname, protocol } = parseURL(props.href);
-const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
-const data = ref();
+const { hash, pathname, protocol } = parseURL(href);
+const data = ref(), loading = ref(false);
 
 if(!!pathname && !protocol)
 {
-    data.value = await $fetch(`/api/project/${project.value}/file`, {
-        query: {
-            search: `%${pathname}`
-        },
-        ignoreResponseError: true,
-    });
+    loading.value = true;
+    try {
+        data.value = await $fetch(`/api/file`, {
+            query: {
+                search: `%${pathname}`
+            },
+        });
+    } catch(e) { }
+    loading.value = false;
 }
-</script>-->
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/components/prose/ProseBlockquote.vue b/components/prose/ProseBlockquote.vue
index 7cfa02d..7087710 100644
--- a/components/prose/ProseBlockquote.vue
+++ b/components/prose/ProseBlockquote.vue
@@ -162,17 +162,14 @@ blockquote:empty
   @apply w-6;
   @apply h-6;
   @apply stroke-2;
-}
-.callout-title
-{
-  @apply flex;
-  @apply items-center;
-  @apply gap-2;
+  @apply float-start;
+  @apply me-2;
 }
 .callout-title-inner
 {
-  @apply inline-block;
+  @apply block;
   @apply font-bold;
+  @apply ps-8;
 }
 .callout > p
 {
diff --git a/components/prose/ProseH2.vue b/components/prose/ProseH2.vue
index 2e5b56c..453d194 100644
--- a/components/prose/ProseH2.vue
+++ b/components/prose/ProseH2.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2 relative sm:right-8 right-4">
+  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2 relative sm:right-4 right-2">
     <slot />
   </h2>
 </template>
diff --git a/composables/useDatabase.ts b/composables/useDatabase.ts
index 124b78c..74d33c9 100644
--- a/composables/useDatabase.ts
+++ b/composables/useDatabase.ts
@@ -12,6 +12,7 @@ export default function useDatabase()
         instance = drizzle({ client: sqlite, schema });
 
         instance.run("PRAGMA journal_mode = WAL;");
+        instance.run("PRAGMA foreign_keys = true;");
     }
 
     return instance;
diff --git a/db.sqlite b/db.sqlite
index 839c948aa69016e324e710cefc90ebe8f60e33e3..ff532c58e74d2b887a8fc9f40bbcffb9983c61b6 100644
GIT binary patch
delta 1085
zcmcIgOH30%7~YxPK31RuidF@oD2TKyY|CyR@d301Xov_ZQ4*E(-3ooA<*g<V5)nKA
zZe%@rFo6piLc%5_hF-ZT9`K}*gNY&%OaMI)ol;H8jf<H~=9};TX1?$L2jV#c@tpA-
zpqj|F$y7vHe`MDE{7O1N%LH0R^@%l?m1#zXQi^J!DYM05<|{lr<K<Zg!|^Q3Sj-h1
z!+AJ^!Q?QrMvL3Wu0{xg7!~^4v=j!ngz2`DN~RPfKHx0|3u`gB8P>@13}@228MD!;
zXIySWg@gAv9eRu2r_ZZ9gdYO5LZB7Yie}IZ4q->-CHM<)kPHdm2SB*rRwyGeye7<s
zi;N}b@N@bg2{QKFcL=nDzRzW8R#BcpP7;)l{jsh938206EU9r4$f;Vu>0YYJ28-kh
zqS!Xrr>u4d1ED~yGwSFJM<X7G%hT1-83=l+Qn2uF?97drO&8X=tDF3MwXMCCtFOP?
z*jrua_3L`MV58ITjoO>7wN@_B-qKuH<6>_%82J{RF51JoIb%n!{<1e_<$FvvtGA-2
zuj8t})?O3p?hUbmbL<7RMW8Jl{xh0rlBsDxszF!G6OGA}qunIXCfdaHcj#~ySq%0?
zmJ6G&PC&GT%de3ppR|FL;HgcNxxzuY@MW<8A{q~2S0%eg4fX+HbS(e&f9g%%j~!_2
zFaXgS4)_rj(2xXb=tvA*2}oMKhmvh>6KETK#j+15J&gitkd(op?G0&r1I$dO^+o7G
zK=Y@nXr(x7gvZ7BD7<viuJLxc+5;h<#_#C#Xtdf;z~{r$(`v=MVOS3Kv>GWi49^36
z`7{E{#P^Tjg(NN&8%*$sczpyG{UgRrFk4(0foGFMck<AQL!<CCnV#ZZk1KmQs?1O&
zmOqA-sf6_OG1M#eG3!s@7@5k5YZqazv^WXBWv0*>;@c^hhY6fDS4y9TQ>wog@y$Fu
qnpCRA-FbKn<7^3PfpWM~f>NbKF8!305%>!YgE)n^OagKF@BBZdmq394

delta 712
zcma)%F=!J}9LC@K-=*o<Ca<NjsU*}WR&2a$ddVfZpc28Q;-H`fCqu5u1qUk_4A?qU
z0!`BnZ9MFA>`-hSf`md3Tym>Z)kU}BB8W=Ol6Db%$)ymtPVal)_kX|t_ZBSQg5_KD
z;l7IhhNBNn6qah4jobYkDIoHhY?1<*+8G>BNm%6hX@QSsvWgy;6-f^35lPV_Gm<J#
zMkPg!MO0l5&%`p>+~j^<<oIc0E*0cOU}8Hpp1dpK7C??FYFgJ6DJ*L;dzQ&cS|kyZ
z!i=Ekik{FC*_>EcP9cOiQbeRkzK|-ZvJy8*Xq+MNNjmWDN#l9yf`e;GqxN`AflEvY
zCu!hf+c7yr<Zx#&@SRldIES2=Lwqjy;I*A;h-fUkPYi8!lW!u@>`eA}dNJn}p60Vp
z@~ux`(m<rq4lyzs@6Ir}PmCY+b4<(=#~lCSnP9m0&Khs`(#MQp#t^*e%%g|1Hlwuw
zxjQjmY#x}+16*CNY|PWq5`?foYcU9zvn9BK+2vaqCg|5CxN2*W-ipHzy;p{@V`D82
z9{Rov7j2_pAD3xy8P0Pqq0Jki)-p`7gt15Hbrsw+v;xU)!+f;@vhzRZ_e)six*huS
z8u-onI{X^wvR(Ak7K}23b@iM5+py*CT<FJLIBidQ>EB%#X4+#y5DTTG31-sdJ{+07
Rf4C#EXz`1d<Bio5_y>x5&RGBe

diff --git a/db.sqlite-shm b/db.sqlite-shm
index e468fd1f3ab3049dd285ae60b5877d9a6e74e738..9428d59b9240159a33ebf768dbe8957f0f9c217a 100644
GIT binary patch
literal 32768
zcmeI)H%=Wu5P;#IY%-Yi$kAYfF*)a)Ofn`q9Dst$K;^<Mv`C1CmLqTi4nRo@`_L;8
zp#V{#f27f@W>zchcYujpHWQ7cka3XnH`Kk5O^2tuSNs3E2F?!7ua7ShB1b3d<F)@6
zBQLxkp1O<ZyEpeD)@D0)NDkF}Y)}wf>K@oU)qAa7jNhVw0tzUgfC36Apnw7jD4>7>
z3Mim}0tzUgfC36Apnw7jD4>7>3Mim}0tzUgfC36Apnw7jD4>7>3Mim}0tzUgfC36A
zpnw7jD4>7>3Mim}0tzUgfC36Apnw7jD4>7>Z!8c;JP9O*osY?+@PSm)NGF3#vdAWf
zTt1RVJ_Qs~M1*2WD5Z>YDyXE2YHFwrTM0i=PXnL%LL*IlrI~NE&`KNabkIo`-Sp5)
zAN>q4$PmMfFv=L?Ofbn5)66l?0!u8j!YV&l<0tEEu*p`~4Y|WFe)EUu_DDkk1r$&~
z0R<FLKmi35P(T3%6i`3`1r$&~0R<Fz-vYBNzV8qEI|UR_Kmi35P(T3%6i`3`1r$&~
R0R^5FnBn`gGY9ttZUG^hJqrK;

delta 261
zcmZo@U}|V!s+V}A%K!pAK+MR%ARq*!^MLr&H{smNvh49sE=b$HyC|J-_-WFgy^*ms
zq^buR1qL8<|04mYFdvj=U|<8X*e6buR@DSDw18L}h;@J%EP+O|ZDwS;YtP6Hr2aB7
z@&GAsK2b&nW(F1pR-guU1`Y;Z27U%X1|gu-OD0w(20jJ>AalDaBPT=;7mx~O0sujM
BIa2@t

diff --git a/db.sqlite-wal b/db.sqlite-wal
index a8f0627023af75deb10539bcec4d1ecfbfb0fc37..293de720deaf990b9f7e19b6ff3a95c6b301c34f 100644
GIT binary patch
literal 387312
zcmeI*4R{?@oyYOk8`36iZz(TAi@<F|4VB*JrA?d23Qu_}ttC*P^r=u~a_=O)^uBfG
z-jIR<Rd4|{sIUT}U|CsP@U5s|7hNd9m$DiKQLNxwSHS|Js0$0Su)i}mN$->ykjL=2
zljmCno0G}RIiLTTGw1&LbX;_C?fb_icO5)#+`i+?ucPm}=DugQJ`}tD!vE-8*}i1A
znrih=ez?7P+l<b6Pp;ZDMUCU9J~(dbgHum7|IwHHLI42-5I_I{1Q0*~0R#|00D%yJ
zxivK_>uTCNI@;Uj+il72wq`52psl$%+0j0KL2`k;ptW_8)!w|YBi+-ytEiJ)Sy$6+
zrQ1^rt%b??-R(N2qopm`Zd+~1^up%$h4bgzixza-J#+6&>F9InYSN2R9Sho1?a7wZ
z!nWjsbX!NVy{n};X}7gCFPPul*3r_P($UGe<4sT6I$ArLJ6hAp=7r5VdQnR{*}kx=
zC7DXM&bQj^E~}-ZrKjbv_vzfeTwva^mHo>;aMCt%fsjJei~s@%Ab<b@2q1s}0tg_0
zK!89*bAgLA6kjf|@SvLbJ>OWim0Td8$TT5<00IagfB*srAb<b@2p|w55Yb%Vb`8gu
z3tYF)_XihDy0ea4Af(VVBY*$`2q1s}0tg_000Iag5FilIT;MAjiZ2(q`QE1ovj>zH
zlM4hCnI;4fKmY**5I_I{1Q0*~0R%z>BAN@_rQ!H;fgj|ai|_d6qdUn3LJCbY0tg_0
z00IagfB*srAb<b@0Rj=t1-_}F_;P{6ZoR+%_G8wqAQuQIGEE2|fB*srAb<b@2q1s}
z0tkc%L^K!pmWJcY1%7|auRHI0{?R$)0wIN_836<kKmY**5I_I{1Q0*~fdGMs<^tc=
zP<*+-ufFu1&I5m%_%*peK#^%e009ILKmY**5I_I{1Q0+VL?EKMz>hQ>UoNn3&!hdB
zgTMYfxj;yvX+{761Q0*~0R#|0009ILKp;RMqPf6s4aJuWY&mXa{Mie4KSM4MP-L1A
zKmY**5I_I{1Q0*~0R#{T5r}9m@Pvlr%LV4`=o>t3>8hpV0wIN_836<kKmY**5I_I{
z1Q0*~fdGMs<^oS@D85|a$^M4Hx6Zs^Be_68k!eBz0R#|0009ILKmY**5I`VAAfmaz
zQyPvh7l>W;!T6W=xo|qUKuDo!MgRc>5I_I{1Q0*~0R#|0AV46Zxxnu=6kjgz;=+dh
zqk13v7`Z?|k!eBz0R#|0009ILKmY**5I`VAAfmaz3mT3u7x?ym2Xq$S^W6-&KuDo!
zMgRc>5I_I{1Q0*~0R#|0AV46RxxnEK8j3F$xb1%~?fl;3H_s#&2q-d52q1s}0tg_0
z00IagfB*srga|}57g(a<_;P`FwY&X?e0-pTTp*;-G$Vij0tg_000IagfB*srAP^uB
z(Oh7ehT_WwwsqYR|Jc<VTgU|hicAv%2q1s}0tg_000IagfB*s^0ujvxuF!CNxxjb6
zHGlBqJAQBlxj;yvX+{761Q0*~0R#|0009ILKp;RMqPf5)G!$Ph(0AF|!NQ6=x04G5
z6qzOj5I_I{1Q0*~0R#|0009I-1R|OXd`rXe<pNjTJ3DTj)3TaeAf(VVBY*$`2q1s}
z0tg_000Iag5FilIT;RJJiZ2&f-1p)B;|F#=KrRqaWSS5_009ILKmY**5I_I{1P}-j
zh-fabL&Ndq0uQ~os&n1XCvPDa2q`qp2q1s}0tg_000IagfB*sr1PDYl7r0+T@#O;V
zd3;6Zijy9($OQt5OcMeKAb<b@2q1s}0tg_000JQb5zPgDr{VZ=f!}?7Mt}Xe_6Bl+
zkV4ap00IagfB*srAb<b@2q1t!fIviZf#)<7UoP;$xs7rAoPF1m3j`FICIk>b009IL
zKmY**5I_I{1VRKNnhQLy;rMcaMSpo|@Xmt|-$5=AQfQhHKmY**5I_I{1Q0*~0R#{T
z5Qu0l@PdZo%LQs*{N|v0e{wvzKtPdcLI42-5I_I{1Q0*~0R#|0AVeUdxxoKwIKEt9
zaPdR&=PrNwdUAn~Leq=@0tg_000IagfB*srAb>!CKtywamoyY#F7S<i+o%7AJ5QWO
zE)Y;;nh-z$0R#|0009ILKmY**5C{>7W-gGJr{VZ=f#dpa?L2$R=H281A%&(H0R#|0
z009ILKmY**5I_Kd0D*|+0!<o<FBeFkJFoLE4d2^DE)Y;;nh-z$0R#|0009ILKmY**
z5C{>7XfDvA;rMcaw_f=`|0BC^+D0xAQfQhHKmY**5I_I{1Q0*~0R#{T5Qu0l(5j*M
za)CepX><I0cVD}eTp*yxG$DWh0tg_000IagfB*srAP^!D(Oh7@hU3cxZd$%`@R5lp
z*O3c^6q;rP5I_I{1Q0*~0R#|0009I71R|OXEYeVXxxlykW(~gSw4W^|7YHaaO$Z=>
z00IagfB*srAb<b@2!sekG#A*Z;rMca8}_?8zIokmcajT)6q;rP5I_I{1Q0*~0R#|0
z009I71R|OXJfflaa)A%D_V*vK?~yCW1p<mp69NbzfB*srAb<b@2q1s}0wDqs%>{n0
z;rMcahtHVOdGCx*&mk8GDKyOpAb<b@2q1s}0tg_000IaE2t+g&_@##8%LOjG_K?n5
ztINM87YHaaO$Z=>00IagfB*srAb<b@2!sekG#A*V;rMca+@sg^-_WrBd2)e}Leq=@
z0tg_000IagfB*srAb>!CKtywa-)JblT;P%?I^vB#e)BWr0s%#)2>}EUKmY**5I_I{
z1Q0*~fe?X+<^qptIKEuKx$eHfJ6=3_DY-yMp=m|{0R#|0009ILKmY**5I`V6Aey<r
z%;z-}UoKD{xOQ;Y;N2U^1p<mp69NbzfB*srAb<b@2q1s}0wDqs%>`c2aD2JI+tzl)
z*KhjGbaH`^Leq=@0tg_000IagfB*srAb>!CKs0lKS#vZLUoP;67aIE?aX#=da)E#%
z(}Vy52q1s}0tg_000IagfIx^qM00`TG#p<p5P$fR&h4Mvogo(pDKyOpAb<b@2q1s}
z0tg_000IaE2t+g&Sf-))a)HhJ9^84)l!s@M3j`FICIk>b009ILKmY**5I_I{1VRKN
znhTt!;rMcaYql2p|1|h$2f08<p=m|{0R#|0009ILKmY**5I`V6Afmaz3Jt}V3%vM?
zpT%b^=x-qx2q-d52q1s}0tg_000IagfB*srga|}57dTzR@#O-`7u-GgwGSt*AQuQJ
zG|dPgfB*srAb<b@2q1s}0tf^ML^KyTQ$z9P0@r`&ErYYqesnvzKtPdcLI42-5I_I{
z1Q0*~0R#|0AVeUdxxh*d$CnEn`|{%WMaRCdnp_~H&@>}}00IagfB*srAb<b@2p|w3
z5Yb#<wT9x$1=e5k!~T=^KkET<fq){@ga85vAb<b@2q1s}0tg_0K!`v@bAfkhIKEuq
zw$@nZuNpqGg<K${&@>}}00IagfB*srAb<b@2p|w35Yb%V1`WlR3lv|T-D#EoXpsv9
z6qzOj5I_I{1Q0*~0R#|0009I-1R|OX+^FIBa)GO6pVdEo+%Gne3xpJ!W&{vG009IL
zKmY**5I_I{1OfyinhR{wP<*+-h6NvrzqH@~t|u1=C^Ah5Ab<b@2q1s}0tg_000Ibv
z2t+g&__BuM%LO)l{{F%EsXyF7E)Y^^nh`(%0R#|0009ILKmY**5C{;6XfE&-4aJuW
zv_7$Q@T!ltjwcrgC^Ah5Ab<b@2q1s}0tg_000Ibv2t+d%Xt+?r@#O-Ok8h4QSVvw@
zE)Y^^nh`(%0R#|0009ILKmY**5C{;6XfE(x4aJuWT)FIu{xh>TPa_uyC^Ah5Ab<b@
z2q1s}0tg_000Ibv2t+g&c%O#j%LSe}=@Xrg?Yv?)xj;yvX+{761Q0*~0R#|0009IL
zKp;RMqPf5&8j3F$IP{Olb>9B-?VHF20*Xu%0tg_000IagfB*srAb<b@Ap#N21uoTa
ze7Qhk!72UQuIt-IE)Y^^nh`(%0R#|0009ILKmY**5C{;6XfAM>hT_WwW*xpf{@It(
zTge3iicAv%2q1s}0tg_000IagfB*s^0ujvxKB(dNa)H~v`rE-TPF-C`E)Y^^nh`(%
z0R#|0009ILKmY**5C{;6XfE*28j3F$_+{-`gFm?a?#1K+0Y#<>0R#|0009ILKmY**
z5I_Kd5P^v10#|4_zFffma#Q?_pX7Iv3xpJ!W&{vG009ILKmY**5I_I{1OfyinhRX1
zp&V$2bM#%;-1qF(hho=WzTk#sw?Eiwa)H?R$H$F-eCqdWPc%pHYitQzer|2uv6r8%
zf7Kmw=ts}3o9Ng*S=(*O<V#K=T~3uUg}lB<+kI!+ZYh)R$yv_2bm9DbGMTI|Z7AAr
zPZYD(2HUAO4ab~4vy>^WNi5A33r@+(m+FsMZo3I*V6!=CB9%!Noq;W`oiFLDyq$0h
z`BI{2xe2SwEo94fB4=fESRt=VmC8CSQO+mqyldyWvbNgS4s3BuYteRccF9~Ik!~z>
zcRLv;G4Pp0sZe(H6L!MxE9%IMoln_`w4FH5E+?!WUD?uU<|U5T#nZNv&kSsK^xL9c
z?lmVJxV7ZiL#HVva)q2}w6Z00O-H?S66%9GXpTyky_33jwvbP_mg%z2Vd;8v)!&4b
zN)?=R!s@kC`XM)QUZHH49d}-R{c;U@gIgNdoEz!cVz+3gN(nOzJCU^##e(Z*x-!{}
zuAH#SeZxO(MxuesEN^8quKJ`a6`ewNLFFl%-sxY%2lNObKhiXUCB(Ibj4Lj$Z>Ab4
zeW^ice7TIde5p{<>CLs%>Up7PW`ObX2AsC^d(|XmrH$2=^=0+5OJ|v9M%Gm>B{KO;
zDPv_5nk~A9sgSCoGHJN#xH_%h=_<XJ>8=W|@wp|dlu^akmvup%u`(@Eg<P(jAK2oR
zp<L2+T=mJc+NK9?CRa4|D5Nvp88dRPYX;jYt3vJw^Kjqi3byQZNdM~^J~KW|yt0!v
z!*vrSJ8Q1rsI%v+o=i&f$4rN8qizN}n>9t!TrsC{O;^0RYQAqJa%DGF&RV6iP;AX4
zuhA`()k9q=VJ<PSrB{=ssCj8l;3Rr1M>r~kW{<w#o6*EP^7xbHnbQs50EXV2FWac@
z4A&%aLgxu{=G8Awq-^7;PUg)-bsH_sveMA7a;mG9uZU)Zs1a(gI#s^VYn7Z#$_#yj
zsgBnfQ#jS7q%OJL1>IY(m|Iq&+Zy<sx}(E-Grg5@>i1@5JKjB~36=K%OskmmKhD5c
zb-!J`&&0Y_b;(0-nKZJxWE*v?V`cKTscw^$k}7P`E}1*lU9QfVF9)_%zJApuN7F86
z^<{G9oR$J}?^pe#Hwg!}^k_O-<?5+oCtCfp&Pq#2+M=>$TTXPVM3qYBY?a5mSyd_B
zZatb@-W{XaarW6Q^G>fUZcVN8mitHLt(pzXRnD@LDY#~iy?4)V*Q}Xq)|1N0kSKJO
zRLHbrd6TkO(2VouZS`QxouT<>)}(^&oQzf+-891!-y6G`(N#a9Q)Jv?A)hhJUVTGD
zLt=4hZC0!qH)q!$lQ4a=idM?I+cjzJ?ru%;N<p=Tm9*Zh-Qb#8q^qeGn#u*uf2W{T
zuSfTM;xum^Hl-fAr{<cu>s40k!`wvP>aiWuCILsQ-$?~WEAml^<A+vwLq628lvC)^
zGN5Y(bW9h{>E<mAuUl2OmRa&Ew~Tk$l5V5nUNzco%F0?=>gQ^1*!lCUT$lHI-H}=(
z?CKt!VE3s$j*+NzXsK?_Tqdn974iW+l85=WxlzoT=N2>OAz?aVrnP!eHQ2S5W56rt
zJ)w~4(M1AI*=^|@Uj0R{tLn*AS)R?kYMvynexpSv@9r6*ZpK1Z7p|;0nhio%HH4X3
ztGmgJuxezIulj1JKN&Zr%Y+P5^G6G9*<8Y#{ocbnRb?znUCz?g46^staHU-Htmtye
znbK?b;tX#E3_$UgMzh>_%X?*h=PUQBncdypTBfypREre#EE(!es^Bf#>b<(A;^Z|E
zRb$=HUS}O!n;bp-H8`zo8bdCl=~!PqJ4JSyyCJ2GM}_Oe{Q9ys3PF=JZRadKiS=kL
zCr(-BU9r*96fuuh&3bbe^_tmQEZY~D&S;fQn|Y#{rl(7$$J?#w-WXXeDpx#N!_mYK
zx}xs2d}TkPl|<Vp^HkE#Bxg1RuYKavZCx~Ac54n-o!895%6;iQKV)rg=TceAV#4vx
zV3##9U;A>49X*k3H=xF5#nQIU>?m|IX$O<Cy<6QF>A~llZB@sbO@MZpW}jmg7}qPQ
zp0g#bVIvi<oZuD6zM39yu0OD4troZd4&7SbNwqyP+ZO|1ZgAcIm3>j=OD9`MX-P4g
zypi=slU9#m+uS^6;_6YSY1U&`I%;+m-P-c%ffr!sTQansrEG5>7Jygi(pJVyVQ({}
z!h1VdM+=6Y5#}+k-F8)<8i$XUmU&!x>_d01*^a0$dnTY+srQ<Vr`y9j_^_4Htkv3^
zn_{X!se#RAKkn^`Dx0_=L(3^ub<0~g^k7Ms%^GNa(Cmq=RJL-XR(2WY`EJ(QlB3y|
zFL}LAt<@%G=x#Slgtz4F>9iSv&+-(r7fPv;0hCtJd}<l0maAv5zk?;qY|72XQQa7N
zZfmVG+qep#R(5ZL>ou8!99w(&y+wUfPo;Is*3h&Q{ZL=`UUg0|dk#HI)#>nqP8phC
zVF$HLn7F8J&h&91yD<OmrMr;TQl`(kN9dpYa4ztNrv_enYH<6*^=dq}cFnk{znyyX
z)MfF%)ZSRTv9>$@MEs%nJ@L=RFNhyIu^~Qj$~{vqn(*fd@0oB*?Sm6$OgU%D+}bZp
znKfnV<o}-hpObH$eEH<_CNG+N@Z@omelh7AlWv@J{-iaN-Z5$a`p4=Ytp9rbHTCD$
zudHvapHlaD-S)aq*V%Qa)wR{tPkeIXy%TSn*gr9)%kv8X1Q0-AED21E9XP&Z^|%+#
zh;@uN;bM<A>G^b1QO`F!*`<#)?uNI--ckK6?Xndi*!g6yW2O4yv6)rhJpYK;DdUSy
zrq^zAQ_ASfXYnRi5m(+)i{d2nv8#7U&Bke=M`^$3WO|fNC9P!EQdCiPyv#y-1wELP
z>2lI3WRf{;9?B=wY@GDE&QnOG%0+K4m2}OPN1Z91ShI1;>pF?0EL5K_lKQliT&q|}
zp9);}l$wo)zOJ)mZ4FJvnQYQ7nSpBmqHUTNj5tlP)ayCf`eSQ0jt~8TE`3%prF0A0
zF*TWxLS-=<YGbJ_e#tJrEw+06P!_E%chd4Ugl>~IVOiTMC$*s-ZhMQF3;~CF`OBei
zj<p1Q^N=HBEB7>;ODcS*)Kr<aN^0xBJyyw$9~N62e4v8Vlsm=O&Fb?EeTFxavU2vx
zW;%~_bNEoNlT#0fC13HaNsD6cNTZcB<5#YlalN_HRI(L+S|!uXy}mWQA@<JjpHm#9
zjrYN`W2e5_G3HX`zJp%<D3g!s1IC-p{WUzUSM*aK1v1*>9ylwuH2feBVaCkZlJG;!
z$Atr`3%&Q1_V*9l``p(gE|17fnoo-EwCS-$RhOt7<6V5e{bNV%{hfX1#@39q`J=t6
z7;v6G)%IF$-JIB}kb}+i)f5;`Hzyt*J3iz{uPgP{o%CIH!dqi2hJVs5Nh5zgqg2o&
z%|l(;=g`=(frojgudQPCountLKX)+8PfgenCg5-!eGG{m6q_G(g*R2*ES6&FKK((G
z8GS*2!lH%ph}KwU_{XZhtxx+|eKyq6V`g*ZPX>m@GP`Olz8_IiS#leydb;PkI*D$L
zlou_}O2kfl#U-s|ul~%#`x6#>W>wurPGKdxb(d+u_trt%tb+wNQB{}WBhz}SIPT&5
z#pdjFk;Cd@)9Z$Aiq}{;3r&gwwDhJM^*ONYo@d4s_PFv2mRVf0ai7pb{7b8e&$OQF
ziIB3Bs-F3{oVE+E`n2<(A+OK!g$*jYsg0fqT?&&kh0<DE&ztPR*!sV*BX+)9pOcdc
zchcqj+hZI4#ve2J+0a9Gt$AkTOu52zd>vnRNbKmaBiEX{eXq0h92jdFYRf3D9h!gL
zb+Lmgt@g^Ajmhy!-nD5^KCe(myNKc6D2;GDogSqD>T#E2D^2ufPh(j%&;wr4knV+K
zT7OoR+|!g^RkN|>?>(#KZ9TmDC|^?NwUIckX5)mv@4Q{+c@;cfOWRG~-y?XY!;L?)
z<j}|Ydjw-?BhFY5KmY**5I_I{1Q0*~0R-M?fr$P+f{)6@mkWGh#TVXv&$huk$pzl%
z8N>MzKmY**5I_I{1Q0*~0R+a9KtywaYg7YYF3>jZ)TfVHv2zKzz*w4{j0FJ%5I_I{
z1Q0*~0R#|0;EfiDXfAM_Tzu~xy!phoOP;&n`t6nX4(=K^ei!c@e52>iKj!@2dk5=g
zzxpc&msb5Hw^w}$81Eg_ds6h)6y7_?dk6JWB;Gs7dk2^E-a+0w$a@E?-gl^%YE^wz
zdAZ&hymyfI4)Wf?kvZUdS03*j<h_IcKi)fd^i5k2>i*YLpWwZN|CmqfTonNX5E#<}
zymyfI4)Wf?67L<Xe$OKB9n6<_@8HOr49)*T3hx~ZdXuj2<$F!McQEL6!@PI!Z+J`M
z>v`|sk^ge>y6c|3bRK_?U`+4K85{x#Ab<b@2q1s}0tg_0z$gnu^zRXTN({dD3w-35
zvrc_-+Gl2w3yksv;dBTffB*srAb<b@2q1s}0%KYrqPf70DvB=`*me68vE56?*OCj2
z>FLVg5I_I{1Q0*~0R#|0009I>Ss<dhz)fQC<pLLM`O0@b^X|XSAQu?r3Bu_RKmY**
z5I_I{1Q0*~0R+ahKtywaO)82n7r1nl{m2(jf8UMd0%Ll*GB^YfKmY**5I_I{1Q0*~
zfl(HSXfE(sG5B(UJMJr7{D&tWdyrgUlqU$MLjVB;5I_I{1Q0*~0R#{j(*hCA1vaZF
zzFgp^xBT$W(|0U+mRw*=Pge$q00IagfB*srAb<b@2p}-Z0ujvxZWDtq7dYsv7oUIT
zzpq|KE-=aygwr8_00IagfB*srAb<b@2#jfgh~@&HS5bVqK<&%dzjMlS?~aoTjOpph
z;1ECn0R#|0009ILKmY**Mp+=DxxiL2_;P_6@7nUEPd?WEesY0Po*<kK0R#|0009IL
zKmY**5I|r|3q&&)IO16q#g_~G_=SJ^ujAJJ{xNcaF+E)w90CX+fB*srAb<b@2q1vK
zC<{b17kFL_zFc719W{-s_WRid<N~8SK{y=(2q1s}0tg_000IagfWVj*h-fbGR~5yV
z3p{@Ej=P@v+K(?H7Z}simBAr^00IagfB*srAb<b@2#m5oG;@L3?+}A87x+{|>6f>h
zb6G37z$i};PKN*j2q1s}0tg_000IagFs20}nhTtyqWE%ww?DJyM@LSd^%HV|F+E)w
z90CX+fB*srAb<b@2q1vKC<{b17g!<&UoP;g2U;Fp+4%IW<N~8SK{y=(2q1s}0tg_0
z00IagfWVj*h-fZwnTq1e1<t$Ub4Rs(^6IC_1;+GrWpD@}fB*srAb<b@2q1s}0;4Pt
J(Olp|{|5&Ynp*$>

literal 74192
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

diff --git a/layouts/default.vue b/layouts/default.vue
index 336e5f1..8d28442 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-    <CollapsibleRoot class="flex flex-1 flex-col" :v-model="open">
+    <CollapsibleRoot class="flex flex-1 flex-col" v-model:open="open">
         <div class="z-50 md:hidden flex w-full items-center justify-between h-12 border-b border-light-35 dark:border-dark-35">
 			<div class="flex items-center px-2">
 				<CollapsibleTrigger asChild>
@@ -23,7 +23,7 @@
         </div>
         <div class="flex flex-1 flex-row relative h-screen overflow-hidden">
 			<CollapsibleContent asChild forceMount>
-				<div class="bg-light-0 md:my-8 md:py-3 dark:bg-dark-0 z-40 xl:w-96 md:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-md:absolute max-md:-top-0 max-md:-bottom-0 md:left-0 max-md:data-[state=closed]:-left-full max-md:transition-[left] py-8 max-md:z-40 max-md:data-[state=open]:left-0">
+				<div class="bg-light-0 md:py-11 dark:bg-dark-0 z-40 xl:w-96 md:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-md:absolute max-md:-top-0 max-md:-bottom-0 md:left-0 max-md:data-[state=closed]:-left-full max-md:transition-[left] py-8 max-md:z-40 max-md:data-[state=open]:left-0">
 					<div class="relative bottom-6 flex flex-col gap-4 xl:px-6 px-3">
 						<div class="flex justify-between items-center max-md:hidden">
 							<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">
@@ -65,13 +65,11 @@ const { data: pages } = await useLazyFetch('/api/navigation', {
 });
 
 watch(useRouter().currentRoute, () => {
-	console.log(open.value);
-	console.log('Changing');
 	open.value = false;
 });
 
 function transform(list: any[]): any[]
 {
-	return list?.map(e => ({ label: e.title, children: transform(e.children), link: e.path, tag: e.private ? 'Privé' : e.type }))
+	return list?.map(e => ({ label: e.title, children: transform(e.children), link: e.path, tag: e.private ? 'private' : e.type }))
 }
 </script>
\ No newline at end of file
diff --git a/pages/editor.vue b/pages/editor.vue
index 66cc43d..de6cade 100644
--- a/pages/editor.vue
+++ b/pages/editor.vue
@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 definePageMeta({
-    rights: ['admin']
+    rights: ['admin', 'editor'],
 })
 const model = defineModel<string>({
     default: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis orci et est malesuada vulputate. Aenean sagittis congue eros, non feugiat metus bibendum consectetur. Duis volutpat leo nisi, in maximus nulla rhoncus ac. Sed scelerisque ipsum et volutpat dignissim. Integer massa nibh, imperdiet quis condimentum vitae, imperdiet quis quam. Cras pretium ex eget hendrerit porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum scelerisque quam, sit amet malesuada mi convallis aliquam. Curabitur eget dolor in diam scelerisque tincidunt at et sapien. Nulla vel nisl finibus odio porttitor sagittis ac ut sem. Aenean orci enim, fringilla eu porta eget, egestas vel libero. Aenean ac efficitur nunc, id finibus nibh. Suspendisse potenti. Quisque vel vestibulum ante. Morbi mi nulla, gravida ac malesuada at, hendrerit nec nibh.
diff --git a/pages/explore/[...path].vue b/pages/explore/[...path].vue
index d717bd1..370f091 100644
--- a/pages/explore/[...path].vue
+++ b/pages/explore/[...path].vue
@@ -18,8 +18,11 @@
                 <Markdown :content="page.content" />
             </div>
         </template>
+        <template v-else-if="page.type === 'canvas'">
+            <Canvas :canvas="JSON.parse(page.content)" />
+        </template>
         <template v-else>
-            <span>En cours de développement</span>
+            <ProseH2 class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
         </template>
     </div>
     <div v-else-if="status === 'error'">
diff --git a/pages/explore/edit/[...path].vue b/pages/explore/edit/[...path].vue
index 65808e1..5823777 100644
--- a/pages/explore/edit/[...path].vue
+++ b/pages/explore/edit/[...path].vue
@@ -19,7 +19,7 @@
                     </SplitterPanel>
                     <SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
                     <SplitterPanel asChild>
-                        <div class="flex-1 max-h-full !overflow-y-auto"><Markdown :content="page.content" /></div>
+                        <div class="flex-1 max-h-full !overflow-y-auto px-8"><Markdown :content="page.content" /></div>
                     </SplitterPanel>
                 </SplitterGroup>
             </template>
diff --git a/pages/user/profile.vue b/pages/user/profile.vue
index 004de5b..d5deda3 100644
--- a/pages/user/profile.vue
+++ b/pages/user/profile.vue
@@ -4,7 +4,13 @@ definePageMeta({
 })
 let { user, clear } = useUserSession();
 
-const deleting = ref(false);
+async function deleteUser()
+{
+    await $fetch(`/api/users/${user.value?.id}`, {
+        method: 'delete'
+    });
+    clear();
+}
 </script>
 
 <template>
@@ -28,13 +34,13 @@ const deleting = ref(false);
                     <template v-slot:content><span>Tant que votre adresse mail n'as pas été validée, vous n'avez que
                             des droits de lecture.</span></template>
                 </HoverCard>
-                <Button class="ms-4">Renvoyez un mail</Button>
+                <Tooltip message="En cours de développement"><Button class="ms-4" disabled>Renvoyez un mail</Button></Tooltip>
             </div>
         </div>
         <div class="flex flex-col self-center flex-1 gap-4">
             <Button @click="async () => await clear()">Se deconnecter</Button>
-            <Button>Modifier mon profil</Button>
-            <AlertDialogRoot v-model="deleting">
+            <Button disabled><Tooltip message="En cours de développement">Modifier mon profil</Tooltip></Button>
+            <AlertDialogRoot>
                 <AlertDialogTrigger asChild><Button
                         class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer
                         mon compte</Button></AlertDialogTrigger>
@@ -50,14 +56,13 @@ const deleting = ref(false);
                             Êtes vous sûr de vouloir supprimer votre compte ?
                         </AlertDialogDescription>
                         <div class="flex flex-1 justify-end gap-4">
-                            <Button @click="() => { deleting = false; }" class="">Annuler</Button>
-                            <Button @click="() => { deleting = false; }"
-                                class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer</Button>
+                            <AlertDialogCancel asChild><Button>Annuler</Button></AlertDialogCancel>
+                            <AlertDialogAction asChild><Button @click="() => deleteUser()" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer</Button></AlertDialogAction>
                         </div>
                     </AlertDialogContent>
                 </AlertDialogPortal>
             </AlertDialogRoot>
-            <NuxtLink v-if="hasPermissions(user.permissions, ['admin'])" :href="{ name: 'admin' }"><Button>Administration</Button></NuxtLink>
+            <NuxtLink v-if="hasPermissions(user.permissions, ['admin'])" :href="{ name: 'admin' }" class="flex" no-prefetch><Button class="flex-1">Administration</Button></NuxtLink>
         </div>
         <div class="flex" v-if="user.permissions">
             <ProseTable class="!m-0">
diff --git a/server/api/file.get.ts b/server/api/file.get.ts
index b586e2a..5bce310 100644
--- a/server/api/file.get.ts
+++ b/server/api/file.get.ts
@@ -1,45 +1,41 @@
+import { and, eq, like, sql } from 'drizzle-orm';
 import useDatabase from '~/composables/useDatabase';
-import type { File } from '~/types/api';
+import { explorerContentTable } from '~/db/schema';
 
 export default defineEventHandler(async (e) => {
-    const project = getRouterParam(e, "projectId");
     const query = getQuery(e);
-
-    if(!project)
-    {
-        setResponseStatus(e, 404);
-        return;
-    }
-
     const where = [];
-    const criteria: Record<string, any> = {  };
 
     if(query && query.path !== undefined)
     {
-        where.push("path = $path");
-        criteria["$path"] = query.path;
+        where.push(eq(explorerContentTable.path, sql.placeholder('path')));
     }
     if(query && query.title !== undefined)
     {
-        where.push("title = $title");
-        criteria["$title"] = query.title;
+        where.push(eq(explorerContentTable.title, sql.placeholder('title')));
     }
     if(query && query.type !== undefined)
     {
-        where.push("type = $type");
-        criteria["$type"] = query.type;
+        where.push(eq(explorerContentTable.type, sql.placeholder('type')));
     }
     if (query && query.search !== undefined)
     {
-        where.push("path LIKE $search");
-        criteria["$search"] = query.search;
+        where.push(like(explorerContentTable.path, sql.placeholder('search')));
     }
 
-    if(where.length > 1)
+    if(where.length > 0)
     {
         const db = useDatabase();
 
-        const content = db.query(`SELECT * FROM explorer_files WHERE ${where.join(" and ")}`).all(criteria) as File[];
+        const content = db.select({ 
+            'path': explorerContentTable.path,
+            'owner': explorerContentTable.owner,
+            'title': explorerContentTable.title,
+            'type': explorerContentTable.type,
+            'content': sql<string>`cast(${explorerContentTable.content} as TEXT)`.as('content'),
+            'navigable': explorerContentTable.navigable,
+            'private': explorerContentTable.private,
+        }).from(explorerContentTable).where(and(...where)).prepare().all(query);
 
         if(content.length > 0)
         {
diff --git a/server/api/users/[id].delete.ts b/server/api/users/[id].delete.ts
new file mode 100644
index 0000000..14fd3d3
--- /dev/null
+++ b/server/api/users/[id].delete.ts
@@ -0,0 +1,30 @@
+import { eq } from "drizzle-orm";
+import useDatabase from "~/composables/useDatabase";
+import { usersTable } from "~/db/schema";
+
+export default defineEventHandler(async (e) => {
+    const session = await getUserSession(e);
+
+    if(!session.user)
+    {
+        setResponseStatus(e, 404);
+        return;
+    }
+    const id = getRouterParam(e, 'id');
+
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+    if(session.user.id.toString() !== id)
+    {
+        setResponseStatus(e, 403);
+        return;
+    }
+
+    const db = useDatabase();
+    
+    clearUserSession(e);
+    db.delete(usersTable).where(eq(usersTable.id, session.user.id)).run();
+});
\ No newline at end of file
diff --git a/server/plugins/session.ts b/server/plugins/session.ts
index 4fc12a8..c7f0e8c 100644
--- a/server/plugins/session.ts
+++ b/server/plugins/session.ts
@@ -1,6 +1,6 @@
 import useDatabase from "~/composables/useDatabase";
 import { userSessionsTable } from "~/db/schema";
-import { eq, and, sql } from "drizzle-orm";
+import { eq, and, sql, lte } from "drizzle-orm";
 import { refreshSessionFromDB } from "../utils/user";
 
 const monthAsMs = 60 * 60 * 24 * 30 * 1000;
@@ -9,6 +9,7 @@ export default defineNitroPlugin(() => {
     const db = useDatabase();
     
     sessionHooks.hook('fetch', async (session, event) => {
+        db.delete(userSessionsTable).where(and(eq(userSessionsTable.user_id, sql.placeholder('id')), lte(userSessionsTable.timestamp, sql.placeholder('timestamp')))).prepare().run({ id: session.user.id, timestamp: Math.round((Date.now() - monthAsMs) / 1000) });
         const result = db.select({ timestamp: userSessionsTable.timestamp }).from(userSessionsTable).where(and(eq(userSessionsTable.id, sql.placeholder('id')), eq(userSessionsTable.user_id, sql.placeholder('user_id')))).prepare().get({ id: session.id, user_id: session.user.id });
 
         if(!result)
@@ -16,11 +17,6 @@ export default defineNitroPlugin(() => {
             await clearUserSession(event);
             throw createError({ statusCode: 401, message: 'Unauthorized' });
         }
-        else if(result && result.timestamp && result.timestamp.getTime() < Date.now() - monthAsMs)
-        {
-            await clearUserSession(event);
-            throw createError({ statusCode: 401, message: 'Session has expired' });
-        }
         else
         {
             await db.update(userSessionsTable).set({