Add user deletion, ProseA hover cards, Canvas

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.

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'">

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>

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">