Merge branch 'dev' into HEAD

layouts/default.vue

@@ -75,11 +75,11 @@ const tree = new TreeDOM((item, depth) => {
 		item.private ? tooltip(icon('radix-icons:lock-closed', { class: 'mx-1' }), 'Privé', 'right') : undefined,
 	])]);
 }, (item, depth) => {
-	return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-inline-start': `${depth / 1.5}em` } }, [link({ class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full'], attributes: { 'data-private': item.private }, active: 'text-accent-blue' }, item.path ? { name: 'explore-path', params: { path: item.path } } : undefined, [
+	return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-inline-start': `${depth / 1.5}em` } }, [link([
 		icon(iconByType[item.type], { class: 'w-5 h-5', width: 20, height: 20 }),
 		dom('div', { class: 'pl-1.5 py-1.5 flex-1 truncate', text: item.title, attributes: { title: item.title } }),
 		item.private ? tooltip(icon('radix-icons:lock-closed', { class: 'mx-1' }), 'Privé', 'right') : undefined,
-	])]);
+	], { class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full'], attributes: { 'data-private': item.private }, active: 'text-accent-blue' }, item.path ? { name: 'explore-path', params: { path: item.path } } : undefined )]);
 }, (item) => item.navigable);
 (path.value?.split('/').map((e, i, a) => a.slice(0, i).join('/')) ?? []).forEach(e => tree.toggle(tree.tree.search('path', e)[0], true));
 const treeParent = useTemplateRef('treeParent');

pages/character/[id]/index.client.vue

@@ -26,7 +26,7 @@ onMounted(() => {
         if(container.value && id)
         {
             const character = new CharacterSheet(id, user);
-            container.value.appendChild(character.container);
+            container.value.replaceWith(character.container);
         }
     });
 });

shared/character.util.ts

@@ -374,7 +374,7 @@ export class CharacterCompiler
     }
     saveNotes()
     {
-        useRequestFetch()(`/api/character/${this.character.id}/notes`, {
+        return useRequestFetch()(`/api/character/${this.character.id}/notes`, {
             method: 'POST',
             body: this._character.notes,
         }).then(() => {}).catch(() => {
@@ -1274,6 +1274,10 @@ export class CharacterSheet
         const publicNotes = new MarkdownEditor();
         const privateNotes = new MarkdownEditor();
 
+        const loadableIcon = icon('radix-icons:paper-plane', { width: 16, height: 16 });
+        const saveLoading = loading('small');
+        const saveNotes = () => { loadableIcon.replaceWith(saveLoading); this.character?.saveNotes().finally(() => { saveLoading.replaceWith(loadableIcon) }); }
+
         publicNotes.onChange = (v) => this.character!.character.notes!.public = v;
         privateNotes.onChange = (v) => this.character!.character.notes!.private = v;
         publicNotes.content = this.character!.character.notes!.public!;
@@ -1292,8 +1296,8 @@ export class CharacterSheet
 
             { id: 'notes', title: [ text('Notes') ], content: () => [
                 div('flex flex-col gap-2', [
-                    div('flex flex-col gap-2 border-b border-light-35 dark:border-dark-35 pb-4', [ div('flex flex-row w-full items-center justify-between', [ span('text-lg font-bold', 'Notes publics'), tooltip(button(icon('radix-icons:paper-plane', { width: 16, height: 16 }), () => this.character!.saveNotes(), 'p-1'), 'Enregistrer', 'right') ]), div('border border-light-35 dark:border-dark-35 p-1', [ publicNotes.dom ]) ]),
+                    div('flex flex-col gap-2 border-b border-light-35 dark:border-dark-35 pb-4', [ div('flex flex-row w-full items-center justify-between', [ span('text-lg font-bold', 'Notes publics'), tooltip(button(loadableIcon, saveNotes, 'p-1 items-center justify-center'), 'Enregistrer', 'right') ]), div('border border-light-35 dark:border-dark-35 bg-light20 dark:bg-dark-20 p-1 h-64', [ publicNotes.dom ]) ]),
-                    div('flex flex-col gap-2', [ span('text-lg font-bold', 'Notes privés'), div('border border-light-35 dark:border-dark-35 p-1', [ privateNotes.dom ]) ]),
+                    div('flex flex-col gap-2', [ span('text-lg font-bold', 'Notes privés'), div('border border-light-35 dark:border-dark-35 bg-light20 dark:bg-dark-20 p-1 h-64', [ privateNotes.dom ]) ]),
                 ])
             ] },
         ], { focused: 'abilities', class: { container: 'flex-1 gap-4 px-4 w-[960px] h-full', content: 'overflow-auto' } });

shared/components.util.ts

@@ -5,7 +5,7 @@ import { clamp } from "./general.util";
 import { Tree } from "./tree";
 import type { Placement } from "@floating-ui/dom";
 
-export function link(properties?: NodeProperties & { active?: Class }, link?: RouteLocationAsRelativeTyped<RouteMapGeneric, string>, children?: NodeChildren)
+export function link(children: NodeChildren, properties?: NodeProperties & { active?: Class }, link?: RouteLocationAsRelativeTyped<RouteMapGeneric, string>)
 {
     const router = useRouter();
     const nav = link ? router.resolve(link) : undefined;