Web frontend: hide app title and row titles, regroup help sheet, drop Ctrl+d/u

- New SHOW_APP_TITLE switch (off): the mascot + title header goes, the status pill
  stays on a slim row of its own.
- SHOW_ROW_TITLES off; with only icons, the shelf icon moves into a column left of
  the tiles so an icon-only shelf is no taller than one without.
- Help sheet regrouped into sections in a compact two-column grid, and reachable
  from a small keyboard button (not on phones or the typing page).
- Ctrl+d/Ctrl+u half-page jumps removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-02 21:53:06 +02:00
parent 5af5c54c62
commit 6981890be0
7 changed files with 180 additions and 106 deletions

View File

@@ -1,5 +1,7 @@
import type { ReactNode } from "react";
import { SHOW_APP_TITLE } from "../lib/theme";
interface Props {
title?: string;
mascot?: string;
@@ -15,6 +17,25 @@ export function AppHeader({
status,
compact = false,
}: Props) {
if (!SHOW_APP_TITLE) {
// Still clear the translucent standalone-mode status bar, and keep the status
// pill - it is the only place an offline connection shows on these screens.
return (
<div
style={{
display: "flex",
justifyContent: "center",
padding: status
? `calc(${compact ? 8 : 10}px + env(safe-area-inset-top)) 16px 0`
: "env(safe-area-inset-top) 0 0",
flex: "none",
}}
>
{status}
</div>
);
}
const mascotSize = compact ? 44 : 64;
return (
<div