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
|
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
|
reads as a window's minimise control. Give it the same round frame and put it with the others
|
||||||
(`.acts .btn.last`, :224).
|
(`.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
|
- [ ] **Respect reduced motion.** The drawer slide, the folder chevron and the toast animation should stop
|
||||||
under `prefers-reduced-motion`.
|
under `prefers-reduced-motion`.
|
||||||
- [ ] **Art.** The player shows the episode title's initials ("SE") even when the feed has art: use the
|
- [ ] **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
|
- [ ] **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.
|
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
|
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.
|
themes and a phone width before calling it done.
|
||||||
|
|||||||
Reference in New Issue
Block a user