Ein Kontextmenü auf jeder Kachel — mitsamt Bildauswahl

Gesehen, Favorit und Weglegen gab es ausschliesslich auf der Detailseite.
In einer Übersicht mit zwanzig Titeln hiess "die hab ich alle gesehen"
vierzig Seitenwechsel. Im ganzen Quelltext stand kein einziger
contextmenu-Zuhörer.

Drei Wege hinein, weil es drei Arten gibt zu bedienen: Rechtsklick für die
Maus, Shift+F10 und die Kontextmenü-Taste für die Tastatur, langer Druck
für den Finger. Nur den Rechtsklick anzubieten hiesse, das Menü auf dem
Telefon zu verstecken. Der lange Druck bricht bei jeder Bewegung ab, sonst
löst Scrollen ihn aus.

Die Aktionen wirken auf der Kachel selbst. Die Liste neu zu laden verlöre
Bildlauf und Filter — für einen Haken.

Dazu die Bildauswahl. Es gab genau einen Bild-Endpunkt, und der lieferte
nur aus: wählte TMDB ein schlechtes Plakat, blieb es. Jetzt stehen Plakat,
Hintergrund und Schriftzug zur Wahl, dazu eigene Bilder bis 10 MB. Die
Kandidaten kosten nichts — TMDB liefert sie beim Einzelabruf ohnehin mit,
und bisher wurde alles ausser dem Schriftzug weggeworfen.

Drei Merker je Titel, nicht einer: man kann ein eigenes Plakat wollen und
trotzdem automatische Hintergründe. Ohne sie überschriebe das nächste
Auffrischen jede Handauswahl, und wer einmal ein besseres Plakat gesucht
hat, suchte es jedes Mal neu.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/menue.ts

@@ -0,0 +1,113 @@
+import { icons } from './icons';
+
+export type Menuepunkt = {
+  text: string;
+  icon?: keyof typeof icons;
+  /** Rot und unten abgesetzt — für alles, was etwas wegnimmt. */
+  gefaehrlich?: boolean;
+  tun: () => void | Promise<void>;
+};
+
+/** Ein Kontextmenü auf einer Kachel.
+ *
+ * **Warum es das braucht.** Gesehen, Favorit und Weglegen gab es
+ * ausschliesslich auf der Detailseite. In einer Übersicht mit zwanzig Titeln
+ * hiess „die hab ich alle gesehen" vierzig Seitenwechsel.
+ *
+ * **Drei Wege hinein, weil es drei Arten gibt zu bedienen.** Rechtsklick für
+ * die Maus, `Shift+F10` und die Kontextmenü-Taste für die Tastatur, langer
+ * Druck für den Finger. Nur den Rechtsklick anzubieten hiesse, das Menü auf
+ * dem Telefon zu verstecken.
+ */
+export function kontextmenue(ziel: HTMLElement, punkte: () => Menuepunkt[]): void {
+  ziel.addEventListener('contextmenu', e => {
+    e.preventDefault();
+    oeffnen(e.clientX, e.clientY, punkte());
+  });
+
+  // Die Kontextmenü-Taste und Shift+F10 — dieselbe Geste ohne Maus.
+  ziel.addEventListener('keydown', e => {
+    if (e.key !== 'ContextMenu' && !(e.key === 'F10' && e.shiftKey)) return;
+    e.preventDefault();
+    const kasten = ziel.getBoundingClientRect();
+    oeffnen(kasten.left + kasten.width / 2, kasten.top + kasten.height / 2, punkte());
+  });
+
+  // Langer Druck. 500 ms, und jede Bewegung bricht ab — sonst löst Scrollen
+  // das Menü aus, und das Scrollen hört dabei auf.
+  let druck: number | undefined;
+  let start = { x: 0, y: 0 };
+
+  ziel.addEventListener('touchstart', e => {
+    const f = e.touches[0];
+    if (!f) return;
+    start = { x: f.clientX, y: f.clientY };
+    druck = window.setTimeout(() => oeffnen(start.x, start.y, punkte()), 500);
+  }, { passive: true });
+
+  const abbrechen = () => { if (druck !== undefined) { clearTimeout(druck); druck = undefined; } };
+  ziel.addEventListener('touchend', abbrechen);
+  ziel.addEventListener('touchcancel', abbrechen);
+  ziel.addEventListener('touchmove', e => {
+    const f = e.touches[0];
+    if (!f) return;
+    if (Math.abs(f.clientX - start.x) > 8 || Math.abs(f.clientY - start.y) > 8) abbrechen();
+  }, { passive: true });
+}
+
+/** Das offene Menü — immer höchstens eines. */
+let offen: HTMLElement | null = null;
+
+export function menueSchliessen(): void {
+  offen?.remove();
+  offen = null;
+}
+
+function oeffnen(x: number, y: number, punkte: Menuepunkt[]): void {
+  menueSchliessen();
+  if (punkte.length === 0) return;
+
+  const menue = document.createElement('div');
+  menue.className = 'kontextmenue';
+  menue.setAttribute('role', 'menu');
+
+  punkte.forEach(p => {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'kontextpunkt' + (p.gefaehrlich ? ' gefahr' : '');
+    b.setAttribute('role', 'menuitem');
+    if (p.icon) {
+      const i = document.createElement('span');
+      i.className = 'icon';
+      i.innerHTML = icons[p.icon];
+      b.appendChild(i);
+    }
+    const t = document.createElement('span');
+    t.textContent = p.text;
+    b.appendChild(t);
+    b.onclick = async () => { menueSchliessen(); await p.tun(); };
+    menue.appendChild(b);
+  });
+
+  document.body.appendChild(menue);
+  offen = menue;
+
+  // **Erst anhängen, dann messen.** Vorher hat das Menü keine Grösse, und
+  // die Prüfung auf den Bildschirmrand liefe gegen null.
+  const kasten = menue.getBoundingClientRect();
+  const links = Math.min(x, window.innerWidth - kasten.width - 8);
+  const oben = Math.min(y, window.innerHeight - kasten.height - 8);
+  menue.style.left = `${Math.max(8, links)}px`;
+  menue.style.top = `${Math.max(8, oben)}px`;
+
+  menue.querySelector<HTMLElement>('button')?.focus();
+}
+
+// Ein Klick daneben, Escape oder ein Bildlauf schliessen. Einmal global
+// registriert und nicht je Kachel — sonst hingen an vierhundert Kacheln
+// zwölfhundert Zuhörer am Dokument.
+document.addEventListener('click', e => {
+  if (offen && !offen.contains(e.target as Node)) menueSchliessen();
+});
+document.addEventListener('keydown', e => { if (e.key === 'Escape') menueSchliessen(); });
+window.addEventListener('scroll', menueSchliessen, { passive: true });