# 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.