From 6e961d3e0e9da9930907ff48cd54dbf926521fa9 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Sun, 1 Nov 2026 19:07:16 +0100
Subject: [PATCH] Fix small front-end faults found in the audit

- A failed likes request shows the error in the panel instead of an empty list.
- A failed sign-out says why instead of doing nothing.
- Long toasts, like a copied link, wrap instead of running off narrow screens.
- Keys no longer act on the feed behind the help; ? still toggles it, and focus
  goes into the help and back to where it was.
- Phones reach the help from the account panel; the bar has no room for ?.
- Cards next to the current one are inert, so Tab no longer walks into buttons
  that are off screen.
- Keyboard focus is visible everywhere, and panels use the shared colour and
  radius tokens.
---
 web/index.html    |  1 +
 web/src/main.ts   | 47 ++++++++++++++++++++++++++++++++---------------
 web/src/pager.ts  |  2 ++
 web/src/style.css | 33 ++++++++++++++++++++-------------
 4 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/web/index.html b/web/index.html
index 017aef1..db91e99 100644
--- a/web/index.html
+++ b/web/index.html
@@ -124,6 +124,7 @@
     </section>
     <button type="button" id="logout-btn">sign out</button>
     <button type="button" id="logout-all-btn" class="link">sign out on all devices</button>
+    <button type="button" id="help-open" class="link">gestures and shortcuts</button>
     <a href="/account/export" download>download my data</a>
     <button type="button" id="delete-open" class="link danger">delete account…</button>
     <form id="delete-form" hidden>
diff --git a/web/src/main.ts b/web/src/main.ts
index 4fc6848..991e0e3 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -439,9 +439,20 @@ volumeSlider.addEventListener("wheel", (e) => {
   setVolume(player.volume - Math.sign(e.deltaY) * 0.05);
 }, { passive: false });
 
-const showHelp = () => { helpEl.hidden = false; };
-const hideHelp = () => { helpEl.hidden = true; };
+let helpOpener: HTMLElement | null = null;
+const showHelp = () => {
+  helpOpener = document.activeElement as HTMLElement | null;
+  helpEl.hidden = false;
+  $("help-close").focus();
+};
+const hideHelp = () => {
+  if (helpEl.hidden) return;
+  helpEl.hidden = true;
+  helpOpener?.focus();
+};
 $("help-btn").addEventListener("click", showHelp);
+// The bar has no room for "?" on phones; the account panel has a way in.
+$("help-open").addEventListener("click", () => { closePanels(); showHelp(); });
 $("help-close").addEventListener("click", hideHelp);
 helpEl.addEventListener("click", (e) => { if (e.target === helpEl) hideHelp(); });
 
@@ -475,7 +486,13 @@ function activateAgain(card: Card): void {
 likesBtn.addEventListener("click", async () => {
   if (!togglePanel(likesPanel)) return;
   const list = $("likes-list");
-  const { tracks } = await api.likes();
+  let tracks: Track[];
+  try {
+    ({ tracks } = await api.likes());
+  } catch (err) {
+    list.textContent = `couldn't load your likes: ${(err as Error).message}`;
+    return;
+  }
   list.replaceChildren(...tracks.map((t) => {
     const li = document.createElement("li");
     const btn = document.createElement("button");
@@ -646,8 +663,8 @@ document.addEventListener("keydown", (e) => {
     station.close();
     return;
   }
-  if (station.isOpen) return;
-  if (!loginEl.hidden) return;
+  if (k === "?") { helpEl.hidden ? showHelp() : hideHelp(); return; }
+  if (station.isOpen || !helpEl.hidden || !loginEl.hidden) return;
   if (!started) {
     if (k !== "Tab" && k !== "Shift") { e.preventDefault(); start(); }
     return;
@@ -669,7 +686,6 @@ document.addEventListener("keydown", (e) => {
   else if (k === "+" || k === "=") { setVolume(player.volume + 0.1); toast(`volume ${Math.round(player.volume * 100)}%`); }
   else if (k === "-") { setVolume(player.volume - 0.1); toast(`volume ${Math.round(player.volume * 100)}%`); }
   else if (k === "z") setZen(!document.body.classList.contains("zen"));
-  else if (k === "?") { helpEl.hidden ? showHelp() : hideHelp(); }
 });
 
 /// Zen: nothing but the drop and the music.
@@ -811,15 +827,16 @@ disconnectBtn.addEventListener("click", async () => {
   }
 });
 
-$("logout-btn").addEventListener("click", async () => {
-  await api.postJSON("/auth/logout");
-  location.reload();
-});
-
-$("logout-all-btn").addEventListener("click", async () => {
-  await api.postJSON("/account/logout-all");
-  location.reload();
-});
+for (const [id, url] of [["logout-btn", "/auth/logout"], ["logout-all-btn", "/account/logout-all"]]) {
+  $(id).addEventListener("click", async () => {
+    try {
+      await api.postJSON(url);
+      location.reload();
+    } catch (err) {
+      toast((err as Error).message, 4000);
+    }
+  });
+}
 
 $("delete-open").addEventListener("click", () => {
   deleteForm.hidden = false;
diff --git a/web/src/pager.ts b/web/src/pager.ts
index 4312d2a..e3cf206 100644
--- a/web/src/pager.ts
+++ b/web/src/pager.ts
@@ -105,6 +105,8 @@ export class Pager {
       el.style.transform = `translate3d(0, ${(p * h).toFixed(2)}px, 0)`;
       // 0 when resting in place, 1 one full page away; cards use it for depth effects.
       el.style.setProperty("--away", Math.min(1, Math.abs(p)).toFixed(3));
+      // Only the current card's buttons are reachable with the keyboard.
+      el.inert = i !== this.index;
     }
   }
 
diff --git a/web/src/style.css b/web/src/style.css
index f072f36..b990182 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -9,6 +9,8 @@
   --accent: #ff4d6d;
   --panel: rgba(18, 18, 20, 0.94);
   --line: #ffffff1f;
+  --line-strong: #333;
+  --scrim: #000b;
   --glass: rgba(255, 255, 255, 0.1);
   --glass-strong: rgba(255, 255, 255, 0.2);
   --radius-s: 8px;
@@ -50,6 +52,9 @@ button {
 
 [hidden] { display: none !important; }
 
+:focus { outline: none; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
 .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
 
 /* Header and panels ------------------------------------------------------ */
@@ -114,10 +119,10 @@ button {
   top: calc(3rem + env(safe-area-inset-top));
   right: 1rem;
   background: var(--panel);
-  border: 1px solid #333;
-  border-radius: 12px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-m);
   padding: 0.8rem 1rem;
-  box-shadow: 0 16px 40px #000a;
+  box-shadow: var(--shadow);
 }
 
 #filters { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; max-width: 24rem; }
@@ -301,7 +306,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   bottom: 0.7rem;
   z-index: 30;
   border-radius: var(--radius-s);
-  background: #000b;
+  background: var(--scrim);
   pointer-events: none;
 }
 
@@ -492,7 +497,9 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s, transform 0.2s;
-  white-space: nowrap;
+  max-width: calc(100vw - 2rem);
+  overflow-wrap: anywhere;
+  text-align: center;
 }
 #toast.show { opacity: 1; transform: translate(-50%, 0); }
 
@@ -519,7 +526,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   align-items: center;
   justify-content: center;
   gap: 1rem;
-  background: #000b;
+  background: var(--scrim);
   cursor: pointer;
 }
 #start button { font-size: 1.3rem; padding: 0.7em 1.6em; background: var(--accent); border: none; color: #fff; }
@@ -532,7 +539,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   display: grid;
   place-items: center;
   padding: 1rem;
-  background: #000b;
+  background: var(--scrim);
   animation: fade 0.2s ease;
 }
 .station-box {
@@ -541,7 +548,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
   max-height: calc(100dvh - 2rem);
   overflow-y: auto;
   background: var(--panel);
-  border: 1px solid #333;
+  border: 1px solid var(--line-strong);
   border-radius: var(--radius-l);
   padding: 1.4rem;
   display: flex;
@@ -626,7 +633,7 @@ button.primary svg { width: 1em; height: 1em; }
   padding: 1rem;
   border-radius: var(--radius-m);
   background: var(--panel);
-  border: 1px solid #333;
+  border: 1px solid var(--line-strong);
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -643,15 +650,15 @@ button.primary svg { width: 1em; height: 1em; }
   display: grid;
   place-items: center;
   padding: 1rem;
-  background: #000b;
+  background: var(--scrim);
   animation: fade 0.2s ease;
 }
 @keyframes fade { from { opacity: 0; } }
 .help-box {
   width: min(22rem, 100%);
   background: var(--panel);
-  border: 1px solid #333;
-  border-radius: 16px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-l);
   padding: 1.2rem 1.4rem;
 }
 .help-box h2 { margin: 0 0 0.8rem; font-size: 1.1rem; }
@@ -695,7 +702,7 @@ button.primary svg { width: 1em; height: 1em; }
 .login-box input {
   padding: 0.7em 0.9em;
   border-radius: 10px;
-  border: 1px solid #333;
+  border: 1px solid var(--line-strong);
   background: #111;
 }
 #code { font-family: ui-monospace, monospace; font-size: 1.4rem; letter-spacing: 0.5em; text-align: center; }