From 5a22db43f6972f753b73a1835d4a80178361dd44 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Fri, 16 Oct 2026 18:16:06 +0000
Subject: [PATCH] feat(keys): H and L go back and forward from any page,
 currency selector in the header

Linking a suggested subscription on the transaction page moves from L
to y so L stays forward everywhere.
---
 src/lib/components/shell/Shell.svelte         | 67 +++++++++++++++++++
 .../transactions/show/[id=id]/+page.svelte    |  4 +-
 2 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/shell/Shell.svelte b/src/lib/components/shell/Shell.svelte
index 55abe80..ebb3e2c 100644
--- a/src/lib/components/shell/Shell.svelte
+++ b/src/lib/components/shell/Shell.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Check from "@lucide/svelte/icons/check";
+  import Coins from "@lucide/svelte/icons/coins";
   import Eye from "@lucide/svelte/icons/eye";
   import EyeOff from "@lucide/svelte/icons/eye-off";
   import History from "@lucide/svelte/icons/history";
@@ -13,6 +15,7 @@
   import DropdownMenuContent from "#lib/components/ui/dropdown-menu/dropdown-menu-content.svelte";
   import DropdownMenuItem from "#lib/components/ui/dropdown-menu/dropdown-menu-item.svelte";
   import { isEditable, keys, useKeys } from "#lib/keys.svelte.js";
+  import { display } from "#lib/money/display.svelte.js";
   import { allLinks, CREATE_LINKS } from "#lib/nav.js";
   import { period } from "#lib/period.svelte.js";
   import { session, TESTED_VERSION } from "#lib/session.svelte.js";
@@ -27,6 +30,12 @@
 
   let { children, quick }: { children: Snippet; quick?: Snippet } = $props();
 
+  $effect(() => {
+    if (display.on) {
+      display.load().catch(() => undefined);
+    }
+  });
+
   function openOld(sticky = false) {
     location.assign(oldUiUrl(page.url.href, sticky));
   }
@@ -71,6 +80,26 @@
       run: () => (keys.sheetOpen = !keys.sheetOpen),
     },
     { group: "Global", keys: "/", label: "Search", run: focusSearch },
+    {
+      group: "Global",
+      keys: "$",
+      label: display.on
+        ? "Show amounts in their own currencies"
+        : `Show every amount in ${display.code}`,
+      run: () => display.toggle(),
+    },
+    {
+      group: "Global",
+      keys: "H",
+      label: "Back",
+      run: () => history.back(),
+    },
+    {
+      group: "Global",
+      keys: "L",
+      label: "Forward",
+      run: () => history.forward(),
+    },
     {
       group: "Global",
       keys: "n",
@@ -219,6 +248,44 @@
       >
     </button>
     <div class="ml-auto flex items-center gap-1 pr-2">
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger
+          aria-label="Currency to show amounts in"
+          class="flex h-8 items-center gap-1 rounded-cladd-md px-2 text-[12px] font-semibold hover:bg-black/10 {display.on
+            ? "bg-black/15"
+            : "text-on-brand/80"}"
+          title="Show every amount in one currency  $"
+        >
+          <Coins class="size-4" />
+          <span class="hidden sm:inline"
+            >{display.on ? `≈ ${display.code}` : "All currencies"}</span
+          >
+        </DropdownMenu.Trigger>
+        <DropdownMenuContent align="end" class="w-60">
+          <DropdownMenuItem onSelect={() => display.show(null)}>
+            <span class="flex-1">Each in its own currency</span>
+            {#if !display.on}
+              <Check class="size-3.5" />
+            {/if}
+          </DropdownMenuItem>
+          {#each display.options as currency (currency.code)}
+            <DropdownMenuItem onSelect={() => display.show(currency.code)}>
+              <span class="flex-1"
+                >Everything in {currency.code} ({currency.symbol})</span
+              >
+              {#if display.on && display.code === currency.code}
+                <Check class="size-3.5" />
+              {/if}
+            </DropdownMenuItem>
+          {/each}
+          <div
+            class="flex items-center gap-2 px-2 py-1.5 text-[11px] text-cladd-fg-soft"
+          >
+            <span class="kbd">$</span>
+            switches between {display.code} and own currencies
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu.Root>
       <button
         aria-label={session.anonymous ? "Show amounts" : "Hide amounts"}
         aria-pressed={session.anonymous}
diff --git a/src/routes/transactions/show/[id=id]/+page.svelte b/src/routes/transactions/show/[id=id]/+page.svelte
index 368bb53..fdefc59 100644
--- a/src/routes/transactions/show/[id=id]/+page.svelte
+++ b/src/routes/transactions/show/[id=id]/+page.svelte
@@ -330,7 +330,7 @@
         ? [
             {
               group: "Transaction",
-              keys: "L",
+              keys: "y",
               label: `Link to the subscription ${suggestions[0].bill.attributes.name}`,
               run: link,
             },
@@ -523,7 +523,7 @@
           type="button"
         >
           {linking === "Linking" ? "Linking" : "Link it"}
-          <span class="kbd hidden lg:inline-flex">L</span>
+          <span class="kbd hidden lg:inline-flex">y</span>
         </button>
       {/if}
     </div>