feat(keys): vim keys in any layout, z motions, no Option chords

Keys on a non-Latin layout map to their physical US position, so j, k,
gg and / work on the Russian layout. Lists get z z, z t, z b, and the
first row scrolls the page to the top. The editor drops Alt chords for
Esc then a letter, reorder in groups, piggy banks and subscriptions
moves to J and K.

src/lib/components/editor/Editor.svelte

@@ -52,15 +52,15 @@
     withdrawal: "withdrawal",
   };
   const FIELDS: [string, string, string][] = [
-    ["alt+d", "description", "description"],
-    ["alt+f", "source", "source account"],
-    ["alt+t", "destination", "destination account"],
-    ["alt+w", "date", "date"],
-    ["alt+m", "amount", "amount"],
-    ["alt+k", "category", "category"],
-    ["alt+b", "budget", "budget"],
-    ["alt+g", "tags", "tags"],
-    ["alt+r", "notes", "notes"],
+    ["d", "description", "description"],
+    ["f", "source", "source account"],
+    ["t", "destination", "destination account"],
+    ["w", "date", "date"],
+    ["m", "amount", "amount"],
+    ["c", "category", "category"],
+    ["b", "budget", "budget"],
+    ["#", "tags", "tags"],
+    ["r", "notes", "notes"],
   ];
   const INLINE = new Set([
     "description",
@@ -104,6 +104,7 @@
   const originalType = start.type;
 
   let form = $state<Form>(start);
+  let lastSplit = start.splits[0].key;
   let saved = $state(untrack(() => group));
   let snapshot = JSON.stringify(start);
   let errors = $state<Errors>({});
@@ -204,9 +205,17 @@
     tick().then(() => focusField("description", false));
   });
 
+  function splitOf(target: EventTarget | null): number | null {
+    const holder =
+      target instanceof Element ? target.closest("[data-split]") : null;
+    return holder ? Number(holder.getAttribute("data-split")) : null;
+  }
+
   function currentKey(): number {
-    const holder = document.activeElement?.closest("[data-split]");
-    return Number(holder?.getAttribute("data-split") ?? form.splits[0].key);
+    const key = splitOf(document.activeElement) ?? lastSplit;
+    return form.splits.some((split) => split.key === key)
+      ? key
+      : form.splits[0].key;
   }
 
   function focusField(field: string, select = true) {
@@ -452,29 +461,25 @@
     },
     {
       group: "Editor",
-      input: true,
-      keys: "mod+alt+Backspace",
+      keys: "X",
       label: "Remove the current split",
       run: () => removeSplit(),
     },
     ...TX_TYPES.map((type, index) => ({
       group: "Editor",
-      input: true,
-      keys: `alt+${index + 1}`,
+      keys: `${index + 1}`,
       label: `Make it a ${type}`,
       run: () => setType(type),
     })),
     ...FIELDS.map(([keys, field, label]) => ({
       group: "Editor",
-      input: true,
       keys,
       label: `Go to ${label}`,
       run: () => focusField(field),
     })),
     {
       group: "Editor",
-      input: true,
-      keys: "alt+i",
+      keys: "T",
       label: "Go to the split transaction title",
       run: () => document.getElementById("group-title")?.focus(),
     },
@@ -520,7 +525,11 @@
   {/snippet}
 </PageHeader>
 
-<div class="flex flex-col gap-4" bind:this={root}>
+<div
+  class="flex flex-col gap-4"
+  onfocusin={(event) => (lastSplit = splitOf(event.target) ?? lastSplit)}
+  bind:this={root}
+>
   <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
     <div
       aria-label="Transaction type"
@@ -540,9 +549,7 @@
           type="button"
         >
           {TYPE_LABEL[type]}
-          <span class="kbd hidden lg:inline-flex"
-            >{prettyKeys(`alt+${index + 1}`)[0]}</span
-          >
+          <span class="kbd hidden lg:inline-flex">{index + 1}</span>
         </button>
       {/each}
     </div>
@@ -614,7 +621,7 @@
       <Field
         error={errors.group_title?.[0]}
         for="group-title"
-        keys="alt+i"
+        keys="T"
         label="Description of the split transaction"
       >
         <input

src/lib/components/editor/SplitBox.svelte

@@ -8,7 +8,6 @@
   import Field from "#lib/components/inputs/Field.svelte";
   import { INPUT } from "#lib/components/inputs/styles.js";
   import TagsInput from "#lib/components/inputs/TagsInput.svelte";
-  import { prettyKeys } from "#lib/keys.svelte.js";
   import { session } from "#lib/session.svelte.js";
   import AccountField from "./AccountField.svelte";
   import type { Catalog } from "./catalog.svelte.js";
@@ -205,9 +204,7 @@
       >
         <Trash class="size-3.5" />
         Remove split
-        <span class="kbd hidden lg:inline-flex"
-          >{prettyKeys("mod+alt+Backspace")[0]}</span
-        >
+        <span class="kbd hidden lg:inline-flex">X</span>
       </button>
     {/if}
   {/snippet}
@@ -216,7 +213,7 @@
       <Field
         error={err("description")}
         for={id("description")}
-        keys={keyHint("alt+d")}
+        keys={keyHint("d")}
         label="Description"
       >
         <AutocompleteInput
@@ -229,10 +226,10 @@
           bind:value={split.description}
         />
       </Field>
-      {@render account("source", "Source account", "alt+f")}
-      {@render account("destination", "Destination account", "alt+t")}
+      {@render account("source", "Source account", "f")}
+      {@render account("destination", "Destination account", "t")}
       {#if first}
-        <Field error={err("date")} for={id("date")} keys="alt+w" label="Date">
+        <Field error={err("date")} for={id("date")} keys="w" label="Date">
           <DateInput
             id={id("date")}
             invalid={Boolean(err("date"))}
@@ -245,7 +242,7 @@
         <Field
           error={err("amount")}
           for={id("amount")}
-          keys={keyHint("alt+m")}
+          keys={keyHint("m")}
           label="Amount"
         >
           <AmountInput
@@ -328,7 +325,7 @@
         <Field
           error={err("budget_id")}
           for={id("budget")}
-          keys={keyHint("alt+b")}
+          keys={keyHint("b")}
           label="Budget"
         >
           <RefField
@@ -343,7 +340,7 @@
       <Field
         error={err("category_name")}
         for={id("category")}
-        keys={keyHint("alt+k")}
+        keys={keyHint("c")}
         label="Category"
       >
         <AutocompleteInput
@@ -385,7 +382,7 @@
       <Field
         error={err("tags")}
         for={id("tags")}
-        keys={keyHint("alt+g")}
+        keys={keyHint("#")}
         label="Tags"
       >
         <TagsInput
@@ -409,7 +406,7 @@
       <Field
         error={err("notes")}
         for={id("notes")}
-        keys={keyHint("alt+r")}
+        keys={keyHint("r")}
         label="Notes"
       >
         <textarea

src/lib/components/reports/ReportBox.svelte

@@ -39,7 +39,7 @@
 </script>
 
 <Box {body} class={className} {footer} {title} {tools}>
-  <div class="scroll-mt-24" {id}>
+  <div class="scroll-mt-12" {id}>
     {#if loading}
       <p class="px-3 py-3 text-cladd-fg-soft">Loading</p>
     {:else if empty}

src/lib/components/reports/ReportRow.svelte

@@ -27,7 +27,7 @@
 </div>
 {#if drill}
   <div
-    class="cladd-surface cladd-outline scroll-mt-24 overflow-hidden rounded-cladd-lg"
+    class="cladd-surface cladd-outline scroll-mt-12 overflow-hidden rounded-cladd-lg"
     id="drill-{drill.box}"
   >
     <DrillPanel {drill} />