feat(transactions): notes folded under rows, i shows them all

src/lib/components/transactions/TransactionTable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Check from "@lucide/svelte/icons/check";
   import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import NotebookText from "@lucide/svelte/icons/notebook-text";
   import Paperclip from "@lucide/svelte/icons/paperclip";
   import type { Split } from "#lib/api/types.js";
   import Amount from "#lib/components/Amount.svelte";
@@ -31,6 +32,7 @@
     signedForeign,
     sumByCurrency,
   } from "#lib/transactions/split.js";
+  import { ui } from "#lib/ui.svelte.js";
   import { goto } from "$app/navigation";
   import ActionBar, { type Mode } from "./ActionBar.svelte";
   import TypeIcon from "./TypeIcon.svelte";
@@ -58,6 +60,7 @@
   let menuArmed = $state(false);
   let barHeight = $state(0);
 
+  const HEAD_HEIGHT = 32;
   const CHECKBOX = "size-3.5 cursor-pointer align-middle accent-(--ff-brand)";
 
   const accountId = $derived(context.accountId);
@@ -137,6 +140,12 @@
         label: "Collapse row",
         run: () => collapse(nav.current),
       },
+      {
+        group: "List",
+        keys: "i",
+        label: ui.notes ? "Hide notes under rows" : "Show notes under rows",
+        run: () => ui.toggleNotes(),
+      },
       {
         group: "List",
         keys: "c",
@@ -295,6 +304,20 @@
         title={split.description}
         >{split.description}</a
       >
+      {#if split.notes && !(wide || ui.notes)}
+        <button
+          aria-label="Show notes"
+          class="grid size-4 shrink-0 place-items-center rounded text-cladd-fg-softer hover:bg-cladd-surface-next hover:text-cladd-fg"
+          onclick={(event) => {
+            event.stopPropagation();
+            opened = toggled(opened, row.key, true);
+          }}
+          title={split.notes}
+          type="button"
+        >
+          <NotebookText class="size-3" />
+        </button>
+      {/if}
       {#if split.tags?.length}
         <span
           class="ml-auto max-w-[45%] shrink-0 truncate text-[12px] 2xl:hidden"
@@ -302,7 +325,7 @@
         >
       {/if}
     </div>
-    {#if split.notes}
+    {#if split.notes && (wide || ui.notes)}
       <div
         class="flex min-w-0 items-start gap-0.5 text-[12px] text-cladd-fg-soft"
       >
@@ -482,7 +505,20 @@
               </th>
             {/if}
             <th class="w-6 max-sm:hidden"><span class="sr-only">Type</span></th>
-            <th>Description</th>
+            <th>
+              Description
+              <button
+                aria-pressed={ui.notes}
+                class="ml-1 inline-grid size-5 place-items-center rounded align-middle hover:bg-cladd-surface-next hover:text-cladd-fg {ui.notes
+                  ? "text-cladd-fg"
+                  : "text-cladd-fg-softer"}"
+                onclick={() => ui.toggleNotes()}
+                title={ui.notes ? "Hide notes (i)" : "Show notes (i)"}
+                type="button"
+              >
+                <NotebookText class="size-3.5" />
+              </button>
+            </th>
             <th class="w-28 text-right md:w-32">Amount</th>
             <th class="w-24 text-right max-lg:hidden">Foreign</th>
             {#if accountId}
@@ -504,6 +540,7 @@
               id={nav.rowId(index)}
               onclick={(event) => nav.click(index, event)}
               ondblclick={() => open(row)}
+              style:scroll-margin-top={`${barHeight + HEAD_HEIGHT}px`}
             >
               {#if selectable}
                 <td class="max-sm:hidden">

src/lib/ui.svelte.ts

@@ -1,14 +1,24 @@
 const SIDEBAR_KEY = "ffui.sidebar.collapsed";
+const NOTES_KEY = "ffui.notes.shown";
+
+function stored(key: string): boolean {
+  return (
+    typeof localStorage !== "undefined" && localStorage.getItem(key) === "1"
+  );
+}
 
 class Ui {
   palette = $state(false);
   paletteQuery = $state("");
   quickEntry = $state(false);
   mobileNav = $state(false);
-  collapsed = $state(
-    typeof localStorage !== "undefined" &&
-      localStorage.getItem(SIDEBAR_KEY) === "1"
-  );
+  collapsed = $state(stored(SIDEBAR_KEY));
+  notes = $state(stored(NOTES_KEY));
+
+  toggleNotes() {
+    this.notes = !this.notes;
+    localStorage.setItem(NOTES_KEY, this.notes ? "1" : "0");
+  }
 
   openPalette(query = "") {
     this.paletteQuery = query;