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"],
+    ["d", "description", "description"],
-    ["alt+f", "source", "source account"],
+    ["f", "source", "source account"],
-    ["alt+t", "destination", "destination account"],
+    ["t", "destination", "destination account"],
-    ["alt+w", "date", "date"],
+    ["w", "date", "date"],
-    ["alt+m", "amount", "amount"],
+    ["m", "amount", "amount"],
-    ["alt+k", "category", "category"],
+    ["c", "category", "category"],
-    ["alt+b", "budget", "budget"],
+    ["b", "budget", "budget"],
-    ["alt+g", "tags", "tags"],
+    ["#", "tags", "tags"],
-    ["alt+r", "notes", "notes"],
+    ["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]");
+    const key = splitOf(document.activeElement) ?? lastSplit;
-    return Number(holder?.getAttribute("data-split") ?? form.splits[0].key);
+    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: "X",
-      keys: "mod+alt+Backspace",
       label: "Remove the current split",
       run: () => removeSplit(),
     },
     ...TX_TYPES.map((type, index) => ({
       group: "Editor",
-      input: true,
+      keys: `${index + 1}`,
-      keys: `alt+${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: "T",
-      keys: "alt+i",
       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"
+          <span class="kbd hidden lg:inline-flex">{index + 1}</span>
-            >{prettyKeys(`alt+${index + 1}`)[0]}</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"
+        <span class="kbd hidden lg:inline-flex">X</span>
-          >{prettyKeys("mod+alt+Backspace")[0]}</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("source", "Source account", "f")}
-      {@render account("destination", "Destination account", "alt+t")}
+      {@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} />

src/lib/keys.svelte.ts

@@ -13,14 +13,57 @@ const SEQUENCE_MS = 1200;
 const EDITABLE =
   "input, textarea, select, [contenteditable=''], [contenteditable='true']";
 
+const LATIN_LETTER = /^[a-z]$/i;
+const ANY_LETTER = /^\p{L}$/u;
+const US_KEYS: Record<string, [string, string]> = {
+  Backquote: ["`", "~"],
+  Backslash: ["\\", "|"],
+  BracketLeft: ["[", "{"],
+  BracketRight: ["]", "}"],
+  Comma: [",", "<"],
+  Digit0: ["0", ")"],
+  Digit1: ["1", "!"],
+  Digit2: ["2", "@"],
+  Digit3: ["3", "#"],
+  Digit4: ["4", "$"],
+  Digit5: ["5", "%"],
+  Digit6: ["6", "^"],
+  Digit7: ["7", "&"],
+  Digit8: ["8", "*"],
+  Digit9: ["9", "("],
+  Equal: ["=", "+"],
+  Minus: ["-", "_"],
+  Period: [".", ">"],
+  Quote: ["'", '"'],
+  Semicolon: [";", ":"],
+  Slash: ["/", "?"],
+};
+
+let foreignLayout = false;
+
+function physicalKey({ code, shiftKey }: KeyboardEvent): string | undefined {
+  if (code.startsWith("Key")) {
+    const letter = code.slice(3);
+    return shiftKey ? letter : letter.toLowerCase();
+  }
+  return US_KEYS[code]?.[shiftKey ? 1 : 0];
+}
+
 function baseKey(event: KeyboardEvent): string {
-  if (event.altKey && event.code.startsWith("Key")) {
+  const { key } = event;
-    return event.code.slice(3).toLowerCase();
+  if (key === " ") {
+    return "Space";
   }
-  if (event.altKey && event.code.startsWith("Digit")) {
+  if (key.length !== 1) {
-    return event.code.slice(5);
+    return key;
   }
-  return event.key === " " ? "Space" : event.key;
+  const foreign = !LATIN_LETTER.test(key) && ANY_LETTER.test(key);
+  const plain = !(event.altKey || event.ctrlKey || event.metaKey);
+  if (plain && (foreign || LATIN_LETTER.test(key))) {
+    foreignLayout = foreign;
+  }
+  const positional = event.altKey || foreign || (plain && foreignLayout);
+  return (positional && physicalKey(event)) || key;
 }
 
 function token(event: KeyboardEvent): string {

src/lib/list-nav.svelte.ts

@@ -1,5 +1,7 @@
 import { type Binding, useKeys } from "#lib/keys.svelte.js";
 
+const TOP_REACH = 0.6;
+
 interface Options<T> {
   edit?: (item: T) => void;
   extra?: () => Binding[];
@@ -56,9 +58,22 @@ export class ListNav<T> {
       return;
     }
     this.cursor = Math.max(0, Math.min(count - 1, to));
-    document
+    this.reveal("nearest");
-      .getElementById(this.rowId(this.cursor))
+  }
-      ?.scrollIntoView({ block: "nearest" });
+
+  reveal(block: ScrollLogicalPosition) {
+    const row = document.getElementById(this.rowId(this.cursor));
+    if (!row) {
+      return;
+    }
+    const nearTop =
+      row.getBoundingClientRect().top + window.scrollY <
+      window.innerHeight * TOP_REACH;
+    if (this.cursor === 0 && block === "nearest" && nearTop) {
+      window.scrollTo({ top: 0 });
+      return;
+    }
+    row.scrollIntoView({ block });
   }
 
   toggle(item: T | undefined = this.current) {
@@ -164,6 +179,24 @@ export class ListNav<T> {
         label: "Last row",
         run: () => this.move(this.items.length - 1),
       },
+      {
+        group: "List",
+        keys: "z z",
+        label: "Scroll row to the middle",
+        run: () => this.reveal("center"),
+      },
+      {
+        group: "List",
+        keys: "z t",
+        label: "Scroll row to the top",
+        run: () => this.reveal("start"),
+      },
+      {
+        group: "List",
+        keys: "z b",
+        label: "Scroll row to the bottom",
+        run: () => this.reveal("end"),
+      },
       {
         group: "List",
         hidden: true,

src/routes/groups/+page.svelte

@@ -139,27 +139,13 @@
       },
       {
         group: "Groups",
-        keys: "alt+j",
+        keys: "J",
         label: "Move group down",
         run: () => move(1),
       },
       {
         group: "Groups",
-        keys: "alt+k",
+        keys: "K",
-        label: "Move group up",
-        run: () => move(-1),
-      },
-      {
-        group: "Groups",
-        hidden: true,
-        keys: "alt+∆",
-        label: "Move group down",
-        run: () => move(1),
-      },
-      {
-        group: "Groups",
-        hidden: true,
-        keys: "alt+˚",
         label: "Move group up",
         run: () => move(-1),
       },

src/routes/piggy-banks/+page.svelte

@@ -132,27 +132,13 @@
       },
       {
         group: "Piggy banks",
-        keys: "alt+j",
+        keys: "J",
         label: "Move down in group",
         run: () => move(1),
       },
       {
         group: "Piggy banks",
-        keys: "alt+k",
+        keys: "K",
-        label: "Move up in group",
-        run: () => move(-1),
-      },
-      {
-        group: "Piggy banks",
-        hidden: true,
-        keys: "alt+∆",
-        label: "Move down in group",
-        run: () => move(1),
-      },
-      {
-        group: "Piggy banks",
-        hidden: true,
-        keys: "alt+˚",
         label: "Move up in group",
         run: () => move(-1),
       },

src/routes/subscriptions/+page.svelte

@@ -181,27 +181,13 @@
     extra: () => [
       {
         group: "Subscriptions",
-        keys: "alt+j",
+        keys: "J",
         label: "Move down in group",
         run: () => move(1),
       },
       {
         group: "Subscriptions",
-        keys: "alt+k",
+        keys: "K",
-        label: "Move up in group",
-        run: () => move(-1),
-      },
-      {
-        group: "Subscriptions",
-        hidden: true,
-        keys: "alt+∆",
-        label: "Move down in group",
-        run: () => move(1),
-      },
-      {
-        group: "Subscriptions",
-        hidden: true,
-        keys: "alt+˚",
         label: "Move up in group",
         run: () => move(-1),
       },