ipodderx-rs/TODO.md

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).
• 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.

Folders in the sidebar

From a closer look the same day: 2× crops of the sidebar in all three themes, with positions measured in the browser. Closed by default, remembered across reloads (ipx.expanded) and opened by a search is right, and so is the quarter turn when you click. How it is drawn is not.

• Keyboard. The triangle is a <span> and a feed row a <div>, with no tabindex or aria-expanded anywhere: Tab goes from the feed filter straight to Sign out, so the feed list cannot be used from the keyboard at all. Make the triangle a <button aria-expanded> and each row focusable with a visible ring; Left and Right to close and open are a cheap extra. This one is a bug, the rest is polish. (renderFeeds, :786–800)
• Triangle in the margin, on folders only. Every row keeps the 18 px .chev slot and a gap, so every feed's art starts at x=44 while the Directory, Popular and All Subscriptions icons start at x=16: about 100 feeds pushed 28 px right for two triangles, in a 290 px sidebar. Hang the triangle in the left padding of folder rows only, so ordinary feeds line up with the places above them. (.chev, :141)
• A target you can hit. 18 × 18 px, under the 24 px minimum, with an 11 px glyph in --faint, in a 48 px row where a near miss opens the folder's page instead. Keep the glyph small but give its button the full height of the row.
• Shows nest under the folder's title. .feed.child steps in 16 px (:140), so a show's art lands at x=60, between the folder's art (x=44) and its title (x=88). Indent to the title, with slightly smaller art (about 28 px), so an open folder reads as a folder rather than a crooked list.
• A folder that looks like one. "TS" in a grey tile cannot be told from a feed. Draw a 2×2 mosaic of the first four feeds' art, the way iTunes built playlist artwork from album covers; Glass Cannon's shows all have art. The one bold touch the sidebar gets.
• The selected tile disappears. In Dark and Light a selected feed without art loses its initials tile, because .feed.sel and .art are both --raise.

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.