peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(design): the channel menu's Tags and Priority, MenuCheck, and the log row (E28 S3e3b)

Browse Source
This commit is contained in:
peter
2026-09-26 17:34:47 +02:00
parent 5e5c8a42a9
commit 7c2b22bafa
1 changed files with 60 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/DESIGN.md
+13 -5
View File
@@ -151,7 +151,10 @@ The chosen rendering of each rule is in the lab under "Decided". The primitives
tints only checkboxes, radios, ranges and progress bars). The whole labelled row is the 44px target. Keyboard, screen reader and
forced-colours support come from the browser. The switch stays `form`'s `Switch`: no browser has a native
one yet. A raw `<input>` or `<textarea>` outside those primitives is a lint error (a hidden file picker
passes).
passes). A checkable row that cannot hold an `<input>` — a menu row, a whole-row button whose role says
checkbox — draws the ONE `ui/MenuCheck` in its leading icon slot: a box filled with the accent for a set
(tags, playlists, a filter's values; a minus for a group only partly in), a bare tick for one choice (a
language, a sort, a priority step), an unticked choice keeping the slot empty so the labels line up.
- **In-place editing:** a field that replaces its trigger (a title rename, the priority number) hands the
focus back to that trigger when Enter or Escape closes it (`useReturnFocus`), never to `<body>`.
[WCAG 2.4.3]
@@ -283,9 +286,13 @@ Which actions are visible and which live in a menu.
Delete key too (the `listDelete` key scope, registered only by a list that can remove) and answer it
with an undo toast whose Undo puts the row back at its index in one request; a playlist itself has
one list (`usePlaylistActions.items`) that its rail row and its page header's "…" both open. A
subscribed channel's row ends in its "…" (`useChannelActions`: open, pin, YouTube, copy, full
history, hide with an undo toast, unsubscribe behind its confirm), docked beside the name in the
card layout. A Plex playlist's title, show group and season each open the page's one row menu
subscribed channel's row ends in its "…" (`useChannelActions`: open, pin, Tags, Priority, YouTube,
copy, full history, hide with an undo toast, unsubscribe behind its confirm), docked beside the name
in the card layout. Its Tags submenu lists the reader's tags A–Z, each a check that toggles in place
(the menu stays open for the next); its Priority submenu offers the fixed steps 10 · 5 · 3 · 2 · 1 · 0
(an off-scale current value shows ticked in its place), and a pick re-sorts the list at once — only
that row moves — with the pager and the focus (its "…") following it. The row's stepper still sets any
value and leaves the order until the next load. A Plex playlist's title, show group and season each open the page's one row menu
(a title's is its `usePlexCardActions` list plus the removal); removals take the same undo toast,
`j`/`k` walk the visible rows and Delete removes the walked one; its rename and delete sit in the
header's "…". A toast that carries an action lives at least 8 s, whatever the toast setting. A
@@ -392,7 +399,7 @@ Wherever there is text, the user can select it and copy it, and no click action
## Decision log
| Date | Decision | Chosen | Over | Why |
| ---------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ---------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2026-09-24 | Floating button | Back to top: a round 48 glass FAB; "round" = floats over something (media or the page) | A Material 3 rounded square; a labelled pill; the old 64 circle | The common web convention for back to top; round tells it apart from every toolbar button; 64 was oversized |
| 2026-09-24 | Device contract | Tablet portrait + landscape and up; phones out | A 1024px floor with a "too small" message | Portrait tablet use is real, and the app already renders at 820 portrait |
| 2026-09-24 | Card actions on touch | Fewer visible, the rest in a "…" menu | 44px buttons that no longer fit the card | Six 44px targets need more width than a card has |
@@ -438,5 +445,6 @@ Wherever there is text, the user can select it and copy it, and no click action
| 2026-09-26 | Playlist actions built (C1) | A playlist row's "…" (play, pin, copy title / link, move, order, remove), Delete + an undo toast; one list per playlist (rename, pin, YouTube open / push / revert, delete) from its rail row and its header's "…" | The row's X column and its confirm; the header's pencil, YouTube link, push, revert and trash buttons | Remove is reversible, so it needs no confirm; the header keeps Play all; on a phone the table drops "#" and Channel so the title keeps a width |
| 2026-09-26 | Channel + Plex list actions (C1) | A channel row's "…" (open, pin, YouTube, copy, full history, hide + undo, unsubscribe); a Plex playlist's title / show / season "…", Delete + undo; its header's "…" (rename, delete); an action toast lasts ≥ 8 s | The channel row's full-history, hide and unsubscribe buttons; the Plex list's red X on every row, show and season; the header's pencil and trash | Hiding and removing are reversible, so they need no confirm and the undo needs time; unsubscribe and deleting a playlist keep theirs |
| 2026-09-26 | Download / notification / Scheduler actions (C1) | A download row's "…" (play, share, save, edit, details, re-download, manage sharing, copies, cancel / delete / remove); a library row's Share stays in sight, ahead of save; a notification row's "…" and hover dismiss; the inbox band's and the Scheduler strip's "…" | The download row's five rare buttons and its cancel / delete / remove; the source link's copy button; an activity notice's Find / Undo links; the band's Clear everything; the strip's Purge discovery | The destructive rows keep their confirm, and Clear everything gains one; a row link keeps the browser's own menu; Find in feed drops the tag / search / age filters that could hide its video |
| 2026-09-26 | Channel menu: Tags + Priority (C1) | Tags A–Z as in-place checks; Priority as fixed steps 10 · 5 · 3 · 2 · 1 · 0, the current one ticked; a pick re-sorts at once and the page + focus follow the row; one drawn `MenuCheck` for every checkable row that cannot be an `<input>` | Relative steps (+1 / +5); straight to the top; the stepper only; seven hand-drawn check marks (three box sizes, a tinted box, a × for "on", a trailing tick) | Bubbling a channel up is one pick; fixed levels keep the scale the reader already uses; the list moving where the reader can see it is the feedback |
| 2026-09-24 | Chip family | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `<button>` outside ui/" | Five chip geometries in five files | The applied-filter row, the tag cells, the year picker and the saved-view editor each drew their own chip; a one-letter tag was 21px wide |
| 2026-09-24 | Button families | `Button` / `IconButton` / `Pressable` / chips / `DragHandle`; `lg` 40 for a hero CTA; pills and a 48 Play on media (from C5) | Every button hand-painted | 268 hand-rolled buttons in 79 files drifted into as many looks; the ladder only holds if every button stands on it |