improvements

Author: lishaduck

src/lib/components/TreeItem.svelte

@@ -209,8 +209,9 @@
     <div class="group relative">
       <button
         tabindex="0"
+        style:view-transition-name={`folder-${item.id}`}
         class={[
-          "flex w-full cursor-pointer items-center gap-2 rounded-md px-2  py-1.5 text-left text-sm font-medium text-base-content transition-all duration-500 select-none [view-transition-name:match-element] hover:bg-primary-content hover:text-primary hover:shadow-sm",
+          "flex w-full cursor-pointer items-center gap-2 rounded-md px-2  py-1.5 text-left text-sm font-medium text-base-content transition-all duration-500 select-none hover:bg-primary-content hover:text-primary hover:shadow-sm",
           "hover:bg-secondary-content hover:text-secondary hover:shadow-sm",
           "aria-[current=page]:bg-primary aria-[current=page]:text-primary-content aria-[current=page]:shadow-sm",
         ]}
@@ -277,9 +278,10 @@
     <!-- Note Item -->
     <a
       aria-current={page.params.id === item.id ? "page" : undefined}
-      href={`${base}/notes/${item.id}`}
+      href={resolve("/notes/[id]", { id: item.id })}
+      style:view-transition-name={`note-${item.id}`}
       class={[
-        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-all duration-500 [view-transition-name:match-element]",
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-all duration-500",
         "hover:bg-secondary-content hover:text-secondary hover:shadow-sm",
         "aria-[current=page]:bg-primary aria-[current=page]:text-primary-content aria-[current=page]:shadow-sm",
       ]}

src/lib/components/codemirror/Codemirror.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { browser } from "$app/environment";
-  import type { Extension } from "@codemirror/state";
+  import { Compartment, type Extension } from "@codemirror/state";
   import { EditorView } from "@codemirror/view";
   import { onMount, onDestroy } from "svelte";
   import type { ClassValue } from "svelte/elements";
@@ -19,21 +19,20 @@
 
   let editorElement: HTMLElement;
   let extensionCompartment = new Compartment();
+  let extensionCompartment = new Compartment();
 
   onMount(() => {
     // Initialize CodeMirror
     editorView = new EditorView({
       parent: editorElement,
-      extensions: [extensionCompartment.of(extensions)],
+      extensions: extensionCompartment.of(extensions),
     });
   });
 
   $effect(() => {
-    if (editorView) {
-      editorView.dispatch({
-        effects: extensionCompartment.reconfigure(extensions),
-      });
-    }
+    editorView.dispatch({
+      effects: extensionCompartment.reconfigure(extensions),
+    });
   });
 
   onDestroy(() => {

src/routes/notes/[id]/+page.svelte

@@ -157,7 +157,8 @@
 
   // Initialize Loro manager for the current note
   $effect(() => {
-    if (!id || !note || !data.user) return;
+    const currentNote = note;
+    if (!id || !currentNote || !data.user) return;
 
     if (!loroManagers.has(id)) {
       console.log(`Initializing Loro manager for ${id}`);
@@ -166,8 +167,8 @@
           try {
             // Decrypt the note key if it's an envelope (long)
             // If it's short (raw key), use it directly.
-            let noteKey = note.encryptedKey;
-            if (note.encryptedKey.length > 60) {
+            let noteKey = currentNote.encryptedKey;
+            if (currentNote.encryptedKey.length > 60) {
               const rawPrivKey = sessionStorage.getItem(
                 "notes_raw_private_key",
               );
@@ -177,7 +178,7 @@
                 );
                 return;
               }
-              noteKey = decryptKey(note.encryptedKey, rawPrivKey);
+              noteKey = decryptKey(currentNote.encryptedKey, rawPrivKey);
             }
 
             // Create manager
@@ -189,7 +190,7 @@
                 // But we do update 'updatedAt' and maybe 'loroSnapshot' column?
                 // The updateNote command handles updating the snapshot column.
                 // Re-check data.user here as it might have changed or TS doesn't know
-                if (data.user && note.ownerId === data.user.id) {
+                if (data.user && currentNote.ownerId === data.user.id) {
                   await updateNote({ noteId: id, loroSnapshot: snapshot });
                 } else {
                   // Federated/Shared notes: We don't save snapshots to 'notes' table (as we don't own it).
@@ -198,7 +199,7 @@
                   // console.debug("[Loro] Skipping snapshot save for non-owned note");
                 }
               },
-              note.loroSnapshot,
+              currentNote.loroSnapshot,
             );
 
             // Start sync