Rework navigation for a consistent music/room toggle and back button

- Replace the "Mein Zimmer"/"Musik" text pills and the help button with
  two fixed circular corner buttons: a music/room toggle (top-right)
  and a single "back one level" button (top-left) used everywhere -
  search, categories, and the play view.
- Split `view` (browse/play) from a new `page` (music/room) in UiState
  so toggling to the room and back leaves the music side - search,
  selection, even the full-screen play view - exactly as it was.
- Back peels one step at a time (search, then track-search mode, then
  group+category together, since a root shelf tile sets both at once
  and undoing that jump should be one step too).
- Album cards: click the cover to open the track list, click the title
  to start playing immediately (matching what Enter already did from
  the keyboard). Audiobook cards drop the artist line and clamp the
  title to a fixed height so covers stay aligned across a row.
- Root shelf group headings ("Musik", "Hörbücher", "Podcasts") are now
  the link into that group's full category grid, replacing the
  separate search-icon button.
- "Taste zuweisen" is now an icon-only round button, moved to the
  bottom-right so it doesn't sit under the new toggle.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-11 11:12:39 +02:00
parent 69119bb72a
commit ba7f082f48
7 changed files with 237 additions and 205 deletions

View File

@@ -19,7 +19,6 @@ interface Props {
onSeek: (position: number) => void;
onVolume: (percent: number) => void;
onMute: () => void;
onBrowse: () => void;
onOpenAlbum: () => void;
/** Assigning the current album/show to a remote key. `assignPending` is true right
* after "A" is pressed, waiting for the digit that completes the shortcut. */
@@ -36,7 +35,6 @@ export function PlayView({
onSeek,
onVolume,
onMute,
onBrowse,
onOpenAlbum,
onOpenAssign,
assignPending,
@@ -218,63 +216,30 @@ export function PlayView({
/>
</div>
<button
onClick={onBrowse}
style={{
position: "absolute",
top: 28,
left: 32,
border: "none",
cursor: "pointer",
background: "oklch(97% 0.01 210 / .95)",
borderRadius: 999,
padding: "11px 20px",
fontSize: 14,
fontWeight: 800,
color: "var(--ink)",
display: "flex",
alignItems: "center",
gap: 8,
boxShadow: "0 8px 24px oklch(15% 0.05 210 / .4)",
}}
>
<span
style={{
font: "800 13px ui-monospace, monospace",
background: "var(--ink)",
color: "#fff",
padding: "2px 8px",
borderRadius: 6,
}}
>
/
</span>
Zurück zur Suche
</button>
{album && (
<button
onClick={onOpenAssign}
aria-label={assignPending ? "Zahl drücken …" : "Taste zuweisen"}
title="Einer Fernbedienungs-Taste zuweisen (oder: A und dann eine Zahl)"
style={{
position: "absolute",
top: 28,
right: 84,
bottom: 28,
right: 32,
border: "none",
cursor: "pointer",
background: assignPending ? "var(--accent)" : "oklch(97% 0.01 210 / .95)",
width: 52,
height: 52,
borderRadius: 999,
padding: "11px 20px",
fontSize: 14,
fontWeight: 800,
background: assignPending ? "var(--accent)" : "oklch(97% 0.01 210 / .95)",
color: assignPending ? "#fff" : "var(--ink)",
fontSize: 22,
display: "flex",
alignItems: "center",
gap: 8,
justifyContent: "center",
boxShadow: "0 8px 24px oklch(15% 0.05 210 / .4)",
}}
>
🎛 {assignPending ? "Zahl drücken …" : "Taste zuweisen"}
🎛
</button>
)}
</div>