todo.md: the design review's list, to do later
A review of the web UI against screenshots of every view in all three themes. The palette and Classic carry the iPodderX identity; Dark and Light do not. First three: amber for new (unread badges, dots, download progress), EQ bars as the playing marker, and toolbar focus rings that overflow:hidden currently clips. The rest is weights, sentence-case labels, pane sizes, header lines, wording, system theme, reduced motion, art, sign-in and the Settings export/import icons. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Wi22VSVrkAvqNj61eqHsm9
This commit is contained in:
60
todo.md
Normal file
60
todo.md
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
# To do
|
||||||
|
|
||||||
|
## Design pass on the web UI
|
||||||
|
|
||||||
|
From a review on 2026-09-11, against screenshots of every view in all three themes (desktop, phone,
|
||||||
|
dialogs, sign-in) on the browser suite's fixture daemon. Line numbers are `web/index.html` as of
|
||||||
|
`2e416f9` and will drift; search for the selector instead.
|
||||||
|
|
||||||
|
The palette already comes from the 2004 icon and Classic is the strongest identity in the product, but
|
||||||
|
Dark and Light, the themes people actually use, read as a generic dark dashboard: one system font, bold
|
||||||
|
everywhere, one pale blue doing every job, the same radius on everything. The first three items below
|
||||||
|
are the ones that would make Dark look like iPodderX; the rest are tidying.
|
||||||
|
|
||||||
|
- [ ] **Amber means new.** The blue accent is on unread badges, unread dots, the primary Scan button,
|
||||||
|
selection, the playing outline, the slider thumb and links, so a count looks like a button and nothing
|
||||||
|
stands out. Give the icon's EQ-bar amber (`--accent2`) to unread badges, unread dots and download
|
||||||
|
progress; keep blue for selection and the one primary action. `.badge` (:169), `.ep .st` (:280),
|
||||||
|
`.dlbar i` (:308).
|
||||||
|
- [ ] **EQ bars as the playing marker.** The strongest image in the brand. Small amber bars on the
|
||||||
|
playing row and in the player bar, standing still under `prefers-reduced-motion`. This is the one
|
||||||
|
memorable detail; keep everything around it quiet.
|
||||||
|
- [ ] **Focus you can see.** No `:focus-visible` styles anywhere, and `overflow:hidden` on `.tgroup` (:105)
|
||||||
|
and `#topbar` (:100) clips the focus ring of every toolbar button, so keyboard users cannot see where
|
||||||
|
they are. Add a `:focus-visible` ring and inset it, or drop the overflow clipping.
|
||||||
|
- [ ] **Fewer bold weights.** Directory, Popular and All Subscriptions, every feed name and every unread
|
||||||
|
title are 600–700, so nothing leads. Keep bold for headings and unread titles, 500 elsewhere.
|
||||||
|
`font-variant-numeric: tabular-nums` on counts, sizes and durations. Keep `system-ui`: the page fetches
|
||||||
|
nothing from anyone else, on purpose.
|
||||||
|
- [ ] **Sentence-case labels.** Drop `text-transform:uppercase` from `.ephead` (:262), `.fhd` (:195),
|
||||||
|
`.chip` (:296) and `.tag` (:157). Classic already writes "Title, File, Size", and it reads better.
|
||||||
|
- [ ] **The list gets the room.** With nothing selected, the reading pane takes about 60% of the height to
|
||||||
|
say "Pick an item to read it", and the Files pane keeps 270 px to say "No files". Raise the default
|
||||||
|
`--listh` from 40% to about 60% (:187), and hide `#files` (:192) when nothing is selected or the item
|
||||||
|
has no files.
|
||||||
|
- [ ] **Shorter header lines.** "2 items · 1 downloaded · checked 1m ago · every 1 hour · next in 60m"
|
||||||
|
cuts off at "ev…" on a phone, and "every 1 hour · next in 60m" says nothing right after a check. Show
|
||||||
|
"2 items, 1 downloaded · checked 1m ago"; move the schedule into the tooltip (:829, :914).
|
||||||
|
- [ ] **One word per thing.**
|
||||||
|
- "1 items" in the sidebar and folder rows (:794, :829, :943).
|
||||||
|
- "saved" in the sidebar (:793–794), "downloaded" in headers and on the Downloaded tab. Use
|
||||||
|
"downloaded".
|
||||||
|
- One feature, three names: the Flagged tab, the "Keep the selected item" tooltip (:537), "Starred
|
||||||
|
items are never touched" in Settings (:1629). Use "Keep", and call the tab "Kept".
|
||||||
|
- [ ] **Unsubscribe with the other actions.** "Minus unsubscribes" is the rule from the icon pass and it
|
||||||
|
holds, but in the feed header the minus sits bare at the far right, apart from the round buttons, and
|
||||||
|
reads as a window's minimise control. Give it the same round frame and put it with the others
|
||||||
|
(`.acts .btn.last`, :224).
|
||||||
|
- [ ] **Follow the system theme.** A first visit is always Dark: `THEMES` has no "system" (:1846,
|
||||||
|
:1856). When nothing is stored, pick Dark or Light from `prefers-color-scheme`.
|
||||||
|
- [ ] **Respect reduced motion.** The drawer slide, the folder chevron and the toast animation should stop
|
||||||
|
under `prefers-reduced-motion`.
|
||||||
|
- [ ] **Art.** The player shows the episode title's initials ("SE") even when the feed has art: use the
|
||||||
|
feed's. Initials tiles for feeds without art are all the same grey, and two "TS" sit in a row in the
|
||||||
|
fixtures: tint each from the palette by a hash of the title.
|
||||||
|
- [ ] **Sign-in.** A plain centred card. It is the one place the original icon could be shown large.
|
||||||
|
- [ ] **Settings export and import.** A floppy disk and a plus, which only make sense with the hint text
|
||||||
|
under them. The one spot where the icon-only rule does not hold up; consider words there.
|
||||||
|
|
||||||
|
After any of these: rebuild, `node tests/page-smoke.js`, `npx playwright test`, and look at all three
|
||||||
|
themes and a phone width before calling it done.
|
||||||
Reference in New Issue
Block a user