yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

Desktop: unify the icon language for add / download / want across the app #34

New Issue
Closed
opened 2026-08-18 05:56:10 +00:00 by logan · 1 comment
logan commented 2026-08-18 05:56:10 +00:00
Collaborator
Copy Link
Copy Source

Report

The icons around "adding", "downloading" and "wanting" are a confusing mix across contexts. I want one consistent set where each icon means one specific thing.

Findings

  • The set is Font Awesome Free, vendored and bundled (frontend/src/icons/), with a committed name list (src/icons/names.txt) — a name not in the list is drawn as a fallback and reported to window.__yjIconMisses. So adding names is a deliberate, checked step.
  • Current overloads: plus means both "add to queue" (context menus) and "not in your library" (library-status-indicator); bookmark is the Downloads nav item; the request flow says "Want this"/"Wanted" in words in one place and shows a plus badge in another; queued is an hourglass.

Direction

Define the vocabulary once — a short table in the repo (candidate: alongside utils/library-status.ts, which is already the single definition of what "wanting" means):

  • add to queue / play next
  • add to playlist
  • want (request) / wanted (cancel)
  • downloading in progress
  • in your library
  • partially in your library

...then sweep the call sites. Pairs with the "make unowned obvious" issue — the icons are half of that signal.

**Report** The icons around "adding", "downloading" and "wanting" are a confusing mix across contexts. I want one consistent set where each icon means one specific thing. **Findings** - The set is Font Awesome Free, vendored and bundled (`frontend/src/icons/`), with a committed name list (`src/icons/names.txt`) — a name not in the list is drawn as a fallback and reported to `window.__yjIconMisses`. So adding names is a deliberate, checked step. - Current overloads: `plus` means both "add to queue" (context menus) and "not in your library" (`library-status-indicator`); `bookmark` is the Downloads nav item; the request flow says "Want this"/"Wanted" in words in one place and shows a plus badge in another; `queued` is an hourglass. **Direction** Define the vocabulary once — a short table in the repo (candidate: alongside `utils/library-status.ts`, which is already the single definition of what "wanting" means): - add to queue / play next - add to playlist - want (request) / wanted (cancel) - downloading in progress - in your library - partially in your library ...then sweep the call sites. Pairs with the "make unowned obvious" issue — the icons are half of that signal.
logan self-assigned this 2026-08-19 01:12:16 +00:00
logan added the
Status
In Progress
 label 2026-08-19 01:12:16 +00:00
logan commented 2026-08-19 01:12:17 +00:00
Author
Collaborator
Copy Link
Copy Source

Claiming this. Branch: feat/34-icon-language.

Surveyed first. Every <wa-icon> with a label beside it, across frontend/src:

meaning icon today
Play / Play Next play / forward-step already consistent
Add to Queue plus in five components, list in queue-panel two glyphs
Add to Playlist plus same glyph as Add to Queue, adjacent in the same menu
New Playlist plus third meaning
the queue itself list (#queue-button) and list is also the Playlists nav item
can be requested plus on the badge fourth meaning
requested bookmark on the badge
in your library check
partially the ring

So plus carries four meanings and two of them sit next to each other in one menu; list carries three.

The fix is mostly already in the repo, unused. explore-album-details's "Want this" button is regular/bookmark → solid/bookmark — an outline/solid pair, the same shape favorites-controller uses for regular/heart → heart. The badge forty pixels away shows a plus. That is the same fault utils/library-status.ts was written for, one layer down: it made the two agree on the state and left them disagreeing on the glyph.

Proposed vocabulary, written down beside library-status.ts as the issue suggests:

meaning icon change
play play —
play next forward-step —
the queue, and adding to it bars-staggered from list / plus
a playlist, and adding to it list from plus; matches the Playlists destination
create something new plus — (only "New Playlist" keeps it)
can be requested regular/bookmark from plus
requested solid/bookmark —
in your library check —
partially the ring —

bars-staggered is the one new glyph; confirmed present in Font Awesome Free 7.3.1 and vendored through names.txt + fetch-icons.mjs, so nothing reaches for Pro.

One reuse I am keeping and want on the record rather than "fixed": the Downloads nav item stays bookmark, which is now also the badge's "requested". That is one word, not two — the badge says "this is on your list" and the nav item is that list. Changing it to download was the alternative and is churn on a nav icon to remove a coherence.

Claiming this. Branch: `feat/34-icon-language`. **Surveyed first.** Every `<wa-icon>` with a label beside it, across `frontend/src`: | meaning | icon today | | | --- | --- | --- | | Play / Play Next | `play` / `forward-step` | already consistent | | **Add to Queue** | **`plus`** in five components, **`list`** in `queue-panel` | two glyphs | | **Add to Playlist** | **`plus`** | same glyph as Add to Queue, *adjacent in the same menu* | | New Playlist | `plus` | third meaning | | **the queue itself** | **`list`** (`#queue-button`) | and `list` is also the **Playlists** nav item | | can be requested | `plus` on the badge | fourth meaning | | requested | `bookmark` on the badge | | | in your library | `check` | | | partially | the ring | | So `plus` carries four meanings and two of them sit next to each other in one menu; `list` carries three. **The fix is mostly already in the repo, unused.** `explore-album-details`'s "Want this" button is `regular/bookmark` → `solid/bookmark` — an outline/solid pair, the same shape `favorites-controller` uses for `regular/heart` → `heart`. The badge forty pixels away shows a **plus**. That is the same fault `utils/library-status.ts` was written for, one layer down: it made the two agree on the *state* and left them disagreeing on the *glyph*. **Proposed vocabulary**, written down beside `library-status.ts` as the issue suggests: | meaning | icon | change | | --- | --- | --- | | play | `play` | — | | play next | `forward-step` | — | | the queue, and adding to it | `bars-staggered` | from `list` / `plus` | | a playlist, and adding to it | `list` | from `plus`; matches the Playlists destination | | create something new | `plus` | — (only "New Playlist" keeps it) | | can be requested | `regular/bookmark` | from `plus` | | requested | `solid/bookmark` | — | | in your library | `check` | — | | partially | the ring | — | `bars-staggered` is the one new glyph; confirmed present in Font Awesome **Free** 7.3.1 and vendored through `names.txt` + `fetch-icons.mjs`, so nothing reaches for Pro. **One reuse I am keeping and want on the record rather than "fixed":** the Downloads nav item stays `bookmark`, which is now also the badge's "requested". That is one word, not two — the badge says "this is on your list" and the nav item is that list. Changing it to `download` was the alternative and is churn on a nav icon to remove a coherence.
logan closed this issue 2026-08-19 01:37:34 +00:00
gitea-actions bot removed the
Status
In Progress
 label 2026-08-19 01:37:42 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Area/Design
Area/Downloads
Area/Explore
Area/Library-UI
Area/Metadata
Area/Packaging
Area/Player
Area/Queue
Area/Settings
Area/Shell-Nav
Compat/Breaking
Breaking change that won't be backward compatible
 Kind/Bug
Something is not working
 Kind/Documentation
Documentation changes
 Kind/Enhancement
Improve existing functionality
 Kind/Feature
New functionality
 Kind/Security
This is security issue
 Kind/Testing
Issue or pull request related to testing
 Platform/Android
Platform/Desktop
Priority
Critical
1
The priority is critical
Priority
High
2
The priority is high
Priority
Medium
3
The priority is medium
Priority
Low
4
The priority is low
Reviewed
Confirmed
1
Issue has been confirmed
Reviewed
Duplicate
2
This issue or pull request already exists
Reviewed
Invalid
3
Invalid issue
Reviewed
Won't Fix
3
This issue won't be fixed
Status
Blocked
1
Something is blocking this issue or pull request
Status
Need More Info
2
Feedback is required to reproduce issue or to continue work
Status
Abandoned
3
Somebody has started to work on this but abandoned work
Status
In Progress
Somebody is actively working on this right now
No labels Area/Design Kind/Enhancement Platform/Android Platform/Desktop
Priority
Medium
3
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
logan yonlu
No Assignees logan
1 Participants
Notifications
Due Date
No due date set.
Blocks
#38 Desktop: make it obvious everywhere when I am looking at things I do not own
yonlu/yellowjacket
Reference: yonlu/yellowjacket#34