todo.md: folders in the sidebar; drop the system-theme item
The disclosure triangle, looked at closely: the feed list cannot be reached from the keyboard (span and div, no tabindex), every feed is pushed 28 px right for a slot only folders use, the target is 18 px, shows barely nest under their folder, a folder looks like a feed, and a selected feed's placeholder tile vanishes in Dark and Light. Following the system light or dark setting is off the list, by choice. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Wi22VSVrkAvqNj61eqHsm9
This commit is contained in:
29
todo.md
29
todo.md
@@ -45,8 +45,6 @@ are the ones that would make Dark look like iPodderX; the rest are tidying.
|
||||
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
|
||||
@@ -56,5 +54,32 @@ are the ones that would make Dark look like iPodderX; the rest are tidying.
|
||||
- [ ] **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.
|
||||
|
||||
Reference in New Issue
Block a user