Web frontend

2026-08-27 12:32:20 +02:00
parent d44c24ec97
commit edb6e5e027
97 changed files with 9535 additions and 195 deletions
--- a/web/src/components/HelpOverlay.tsx
+++ b/web/src/components/HelpOverlay.tsx
@@ -0,0 +1,63 @@
+/** The Zaubertasten sheet (F1). Mirrors lib/keyboard.ts - if a binding changes there,
+ * it changes here. */
+
+const KEYS: Array<[caps: string[], label: string]> = [
+  [["LEER"], "Play / Pause"],
+  [["CTRL+H", "CTRL+L"], "Song zurück / vor"],
+  [["CTRL+J", "CTRL+K"], "Leiser / lauter"],
+  [["⇧←", "⇧→"], "15 Sekunden zurück / vor"],
+  [["A-Z"], "Album oder Hörbuch suchen"],
+  [["?"], "Einzelne Titel suchen"],
+  [["F1"], "Diese Hilfe"],
+  [["TAB"], "Musik / Hörbücher / alles"],
+  [["← ↑ ↓ →"], "Auswahl bewegen"],
+  [["ENTER"], "Auswahl abspielen"],
+  [["ESC"], "Schließen / Suche löschen"],
+];
+
+export function HelpOverlay({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="overlay" style={{ zIndex: 5 }} onClick={onClose}>
+      <div className="sheet" style={{ padding: "26px 30px", width: 330 }}>
+        <div
+          style={{
+            fontSize: 17,
+            fontWeight: 800,
+            color: "var(--ink)",
+            marginBottom: 14,
+            letterSpacing: 0.3,
+          }}
+        >
+          ⌨️ Zaubertasten
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+          {KEYS.map(([caps, label]) => (
+            <div key={label} style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <div style={{ display: "flex", gap: 4 }}>
+                {caps.map((cap) => (
+                  <div key={cap} className="key-cap" style={{ minWidth: caps.length > 1 ? 0 : 56 }}>
+                    {cap}
+                  </div>
+                ))}
+              </div>
+              <div style={{ fontSize: 14, fontWeight: 700, color: "oklch(35% 0.03 210)" }}>
+                {label}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div
+          style={{
+            marginTop: 16,
+            fontSize: 12,
+            fontWeight: 600,
+            color: "oklch(50% 0.03 210 / .8)",
+            textAlign: "center",
+          }}
+        >
+          Tippe irgendwohin, um zu schließen
+        </div>
+      </div>
+    </div>
+  );
+}