yolo/arr
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Row affordances become buttons; drop dead and duplicated rows #253

New Issue
Closed
opened 2026-08-25 18:04:26 +01:00 by naps62-yolo · 0 comments
naps62-yolo commented 2026-08-25 18:04:26 +01:00
Owner
Copy Link
Copy Source

Six fixes to how rows read in the library deck and the search results
(DESIGN.md §9.2, §9.6). They land together because they all edit the row
helpers in web/src/main.ts and the row block in web/src/style.css.

The affordance does not read as a button. .row-add renders add on TMDB
hits, episodes on series rows and open on movie rows as bare accent text.
Give it the .control look — border, radius, the --control-h rail the chips
already sit on. It stays a <span>: the row itself is a <button>, so a
nested button is invalid markup and would steal the row's click. Nothing about
the interaction changes; the whole row is still what is clicked.

add is in the wrong place. tmdbRow (web/src/main.ts:1013-1029) appends
it between the language chip and the rating and trailer chips, so the line reads
en · ADD · 7.7 · trailer. It belongs last, where open and episodes
already are.

A TMDB hit already in the library renders twice — once under "in library",
once under "on tmdb" where it is aria-disabled and does nothing. Drop it from
the TMDB group entirely. The inLibrary set is built from the same response's
library hits, so anything filtered out is guaranteed to be visible in the group
above. Hide the TMDB group and correct its count when filtering empties it. The
inLibrary branch of tmdbRow and its aria-disabled return path become dead
code and go with it.

Series have no poster in list mode. seriesRow (web/src/main.ts:2711)
builds its row by hand and never calls rowPoster, while libraryRow uses
richRow() and does. Series rows in the library list are the only rows in the
app with a hole where the poster goes. Use richRow().

The hero has a border. .movie-hero on both title pages also carries
.module, whose border and inset highlight fight the backdrop that bleeds to
the rail. Drop the border on the hero specifically.

available becomes a green check. The word is the longest chip on a dense
episode list and says the least — a file is either there or it is not. Replace
it with a check glyph tinted --signal-ok, keeping the word in the chip's
aria-label.

This contradicts DESIGN.md §4.2 — "The word stays present in every chip, so
state survives with colour removed" — so amend §4.2 in this issue. The
amendment: a check glyph is a shape, not only a hue, so the greyscale read
survives; the rule stands for chips whose state is a word with no unambiguous
glyph, which is every status chip §4.2 lists. Scope the change to
mediaStateChip, not to the derived-status chips.

Depends on: #252

Six fixes to how rows read in the library deck and the search results (DESIGN.md §9.2, §9.6). They land together because they all edit the row helpers in `web/src/main.ts` and the row block in `web/src/style.css`. **The affordance does not read as a button.** `.row-add` renders `add` on TMDB hits, `episodes` on series rows and `open` on movie rows as bare accent text. Give it the `.control` look — border, radius, the `--control-h` rail the chips already sit on. It stays a `<span>`: the row itself is a `<button>`, so a nested button is invalid markup and would steal the row's click. Nothing about the interaction changes; the whole row is still what is clicked. **`add` is in the wrong place.** `tmdbRow` (`web/src/main.ts:1013-1029`) appends it between the language chip and the rating and trailer chips, so the line reads `en · ADD · 7.7 · trailer`. It belongs last, where `open` and `episodes` already are. **A TMDB hit already in the library renders twice** — once under "in library", once under "on tmdb" where it is `aria-disabled` and does nothing. Drop it from the TMDB group entirely. The `inLibrary` set is built from the same response's library hits, so anything filtered out is guaranteed to be visible in the group above. Hide the TMDB group and correct its count when filtering empties it. The `inLibrary` branch of `tmdbRow` and its `aria-disabled` return path become dead code and go with it. **Series have no poster in list mode.** `seriesRow` (`web/src/main.ts:2711`) builds its row by hand and never calls `rowPoster`, while `libraryRow` uses `richRow()` and does. Series rows in the library list are the only rows in the app with a hole where the poster goes. Use `richRow()`. **The hero has a border.** `.movie-hero` on both title pages also carries `.module`, whose border and inset highlight fight the backdrop that bleeds to the rail. Drop the border on the hero specifically. **`available` becomes a green check.** The word is the longest chip on a dense episode list and says the least — a file is either there or it is not. Replace it with a check glyph tinted `--signal-ok`, keeping the word in the chip's `aria-label`. This contradicts DESIGN.md §4.2 — "The word stays present in every chip, so state survives with colour removed" — so **amend §4.2 in this issue**. The amendment: a check glyph is a shape, not only a hue, so the greyscale read survives; the rule stands for chips whose state is a word with no unambiguous glyph, which is every status chip §4.2 lists. Scope the change to `mediaStateChip`, not to the derived-status chips. Depends on: #252
naps62-yolo added this to the Feedback pass 3 milestone 2026-08-25 18:04:26 +01:00
naps62-yolo added the area/webdifficulty/moderatetype/bug labels 2026-08-25 18:04:26 +01:00
naps62-yolo added a new dependency 2026-08-25 18:04:36 +01:00
#252 Strip the rail to wordmark, warning, search and cog
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
arr-api
 area/ci
CI and test harness
 area/compat
arr-compat
 area/core
arr-core
 area/daemon
arr-daemon
 area/db
arr-db
 area/dl
arr-dl
 area/indexer
arr-indexer
 area/infra
workspace and tooling
 area/meta
arr-meta
 area/parse
arr-parse
 area/probe
arr-probe
 area/subs
arr-subs crate: providers, extraction, translation, sync
 area/web
web/
 difficulty/easy
bounded, obvious approach, few files
 difficulty/hard
subtle correctness or cross-cutting
 difficulty/moderate
multiple files, judgement, an interface to design
 difficulty/trivial
one file, mechanical, no design decisions
 phase/1-skeleton
workspace, CI, config, database, empty API and SPA
 phase/2-logic
parsing and policy engine, pure, no network
 phase/3-sourcing
TMDB and Prowlarr, read-only
 phase/4-movies
movies end to end
 phase/5-ui
search, buckets, library views, queues
 phase/6-tv
seasons, episodes, tracking, derived status
 phase/7-people
owner tags and notifications
 phase/8-compat
Jellyseerr shim
 phase/9-subtitles
build order: subtitles, DESIGN.md §15
 type/bug
type/chore
type/feature
type/test
No Label area/web difficulty/moderate type/bug
Milestone
No items
No Milestone Feedback pass 3
Projects
Clear projects
No project
Assignees
Clear assignees
hermes (Hermes (agent)) naps62 (Miguel Palhas) naps62-yolo (naps62-yolo (agent))
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Blocks
#254 Season and episode rows: steady action slot, red delete, clickable line
yolo/arr
Depends on
#252 Strip the rail to wordmark, warning, search and cog
yolo/arr
Reference: yolo/arr#253
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?