martin/musicmouse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
- 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:
Martin Bauer
2026-10-02 21:53:06 +02:00
parent 5af5c54c62
commit 6981890be0
7 changed files with 180 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/components/BrowseView.tsx
View File

@@ -225,15 +225,20 @@ function BrowseViewImpl({
? "4px solid var(--paper)"
: undefined,
outlineOffset: 2,
// Without a title the icon has no header to sit in, so it takes a column
// of its own beside the tiles rather than a row above them.
...(SHOW_ROW_ICONS && !SHOW_ROW_TITLES
? { display: "flex", alignItems: "center", gap: 12 }
: {}),
...glassTint(GROUP_HUE[shelfGroup]),
}}
>
{(SHOW_ROW_TITLES || SHOW_ROW_ICONS) && (
{SHOW_ROW_TITLES && (
<div
style={{
display: "flex",
alignItems: "center",
gap: SHOW_ROW_TITLES && SHOW_ROW_ICONS ? 10 : 6,
gap: 10,
marginBottom: 12,
fontSize: 20,
fontWeight: 900,
@@ -241,39 +246,44 @@ function BrowseViewImpl({
}}
>
{SHOW_ROW_ICONS && <span className="group-icon">{GROUP_ICON[shelfGroup]}</span>}
{SHOW_ROW_TITLES && GROUP_LABEL[shelfGroup]}
{SHOW_ROW_TITLES && <span style={{ opacity: 0.6, fontSize: 17 }}>›</span>}
{GROUP_LABEL[shelfGroup]}
<span style={{ opacity: 0.6, fontSize: 17 }}>›</span>
</div>
)}
{shelfCategories.length === 0 ? (
<div
style={{
textAlign: "center",
fontSize: 14,
fontWeight: 700,
color: "oklch(88% 0.02 210 / .6)",
}}
>
Noch nichts hier
</div>
) : (
<ShelfRow focusedIndex={focusedRow === index ? focusedCol : null}>
{shelfCategories.map((entry, tileIndex) => (
<CategoryTile
key={entry.key}
entry={entry}
navIndex={tileIndex}
selected={focusedRow === index && focusedCol === tileIndex}
onClick={(event) => {
// Otherwise this bubbles to the panel's own onClick, which would
// open the group root instead of the category just clicked.
event.stopPropagation();
onEnterGroup(shelfGroup, entry.key);
}}
/>
))}
</ShelfRow>
{SHOW_ROW_ICONS && !SHOW_ROW_TITLES && (
<span className="group-icon">{GROUP_ICON[shelfGroup]}</span>
)}
<div style={{ flex: 1, minWidth: 0 }}>
{shelfCategories.length === 0 ? (
<div
style={{
textAlign: "center",
fontSize: 14,
fontWeight: 700,
color: "oklch(88% 0.02 210 / .6)",
}}
>
Noch nichts hier
</div>
) : (
<ShelfRow focusedIndex={focusedRow === index ? focusedCol : null}>
{shelfCategories.map((entry, tileIndex) => (
<CategoryTile
key={entry.key}
entry={entry}
navIndex={tileIndex}
selected={focusedRow === index && focusedCol === tileIndex}
onClick={(event) => {
// Otherwise this bubbles to the panel's own onClick, which would
// open the group root instead of the category just clicked.
event.stopPropagation();
onEnterGroup(shelfGroup, entry.key);
}}
/>
))}
</ShelfRow>
)}
</div>
</div>
))}
</div>