jawhng/404-Layers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Phase 2: the panel

Browse Source 
Panel.tsx is presentational - told what is lit, reports presses, holds no
state. The arrangement lives in panelLayout.ts as data, so the component
stays readable and the layout can be tested.

panelLayout.test.ts asserts allPanelControls covers all 54 labelled
controls exactly once; a typo'd id would otherwise quietly vanish from
the panel. It also pins the bank row at six keys ending in SHIFT, because
Panel.module.css widens that key with :last-child:nth-child(6), a
coupling that stops matching silently if the row changes length.

Geometry is the measured one: 8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8
= 525. The screen is the hardware's arrangement - a 124px circle behind a
168x84 LCD, showing only as caps above and below, with no ring around the
display. Key labels are 7px with no tracking, which is what stops
RESAMPLE overflowing its 35.9px button.

cx() absorbs CSS-module lookups typing as string | undefined under
noUncheckedIndexedAccess, rather than turning that flag off - it has
already caught real bugs.

Two fixed on the way through: panelLabel used PL without importing it,
which broke typecheck and the layout test at runtime; and ten className
type errors from the same CSS-module typing, in the places that needed a
definite string rather than React's optional one.

112 tests, build clean, www/ untouched so the Phase 1 APK still installs.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Georgi Durankiev
2026-09-17 01:12:09 +03:00
parent 956dc57763
commit 563caf0658
8 changed files with 590 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
CLAUDE.md
View File

@@ -179,8 +179,25 @@ src/domain/
format.ts ids to printed words, and the "SHIFT + PAD 1" lines
search.ts the Find tab's matcher
storage.ts the persisted blob, backup parsing, defaults
src/ui/
panelLayout.ts where every control sits; captions as silkscreened
Panel.tsx the panel, presentational: told what is lit, reports presses
cx.ts joins class names, dropping blanks
src/styles/base.css tokens: palette, fonts, the vertical budget
```
**CSS modules type as `string | undefined`** under `noUncheckedIndexedAccess`, so
`cx()` absorbs that rather than the flag being turned off — it has caught real
bugs. The cost is that a mistyped class renders with no class at all rather than
failing, which is why the layout is pinned by tests instead.
**`panelLayout.ts` is data, and tested.** `allPanelControls()` must cover all 54
labelled controls exactly once — a typo'd id would otherwise just quietly go
missing from the panel. The bank row is pinned at six keys ending in SHIFT
because `Panel.module.css` widens it with `:last-child:nth-child(6)`, which stops
matching silently if that row ever changes length.
**Two strings are load-bearing for migration** and must not be changed casually:
`Entry.id` (below) and `STORAGE_KEY`, still `sp404mk2-layers-v1`. Together they
mean the boxes already on the phone are picked up by the React app rather than