fix(a11y): draw an unfavourited track as an outline, not a dimmer fill

`favCtrl.iconName` returned the solid glyph in both states, so "not a
favourite" was a filled heart in a duller colour and the only thing
separating the two states was hue. That fails outright for anyone who
cannot tell the two colours apart (WCAG 1.4.1), and reads as
"everything is a favourite" to everyone else.

`iconFor(favorited)` returns the outline or the fill, and the nine
`<wa-icon>` call sites split into the two cases they always were. The
three that show a *state* -- the mini player, the phone's now-playing
view, and the sidebar's marker for the favourites playlist itself --
pass it. The rest are context-menu items, which are actions rather than
states and take the outline `iconName` still returns.

`track-list` and `album-dropdown` already had this right, from inline
SVG paths of their own; this is the same rule for the call sites that
go through the icon library. `regular/star` is vendored to go with
`regular/heart`, which was already there.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MeQt5hgXg5YGoNZQ9ozG7L

frontend/src/assets/icons/fa/regular/star.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M288.1-32c9 0 17.3 5.1 21.4 13.1L383 125.3 542.9 150.7c8.9 1.4 16.3 7.7 19.1 16.3s.5 18-5.8 24.4L441.7 305.9 467 465.8c1.4 8.9-2.3 17.9-9.6 23.2s-17 6.1-25 2L288.1 417.6 143.8 491c-8 4.1-17.7 3.3-25-2s-11-14.2-9.6-23.2L134.4 305.9 20 191.4c-6.4-6.4-8.6-15.8-5.8-24.4s10.1-14.9 19.1-16.3l159.9-25.4 73.6-144.2c4.1-8 12.4-13.1 21.4-13.1zm0 76.8L230.3 158c-3.5 6.8-10 11.6-17.6 12.8l-125.5 20 89.8 89.9c5.4 5.4 7.9 13.1 6.7 20.7l-19.8 125.5 113.3-57.6c6.8-3.5 14.9-3.5 21.8 0l113.3 57.6-19.8-125.5c-1.2-7.6 1.3-15.3 6.7-20.7l89.8-89.9-125.5-20c-7.6-1.2-14.1-6-17.6-12.8L288.1 44.8z"/></svg>

frontend/src/components/now-playing-view/now-playing-view.ts

@@ -307,7 +307,7 @@ export class NowPlayingView extends LitElement {
                         : `Add ${track.title} to ${this.favCtrl.playlistName}`}
                     @click=${this.toggleFavorite}
                 >
-                    <wa-icon name=${this.favCtrl.iconName}></wa-icon>
+                    <wa-icon name=${this.favCtrl.iconFor(favorited)}></wa-icon>
                 </button>
             </div>
 

frontend/src/components/now-playing/now-playing.ts

@@ -527,7 +527,7 @@ export class NowPlaying extends LitElement {
                       )}
                 >
                   <wa-icon
-                    name=${this.favCtrl.iconName}
+                    name=${this.favCtrl.iconFor(isFav)}
                     variant=${favVariant}
                   ></wa-icon>
                 </button>

frontend/src/components/playlist-view/playlist-view.ts

@@ -1756,7 +1756,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                     ${entry.summary.ID === this.favCtrl.playlistId
                         ? html`<wa-icon
                               class="playlist-icon"
-                              name=${this.favCtrl.iconName}
+                              name=${this.favCtrl.iconFor(true)}
                           ></wa-icon>`
                         : entry.summary.IsSmart
                           ? html`<wa-icon

frontend/src/icons/names.txt

@@ -16,6 +16,7 @@
 # fetch-icons.mjs for why that is not negotiable.  Re-vendor with:
 #   node frontend/scripts/fetch-icons.mjs
 regular/heart
+regular/star
 solid/arrow-down-wide-short
 solid/arrow-left
 solid/arrow-rotate-right

frontend/src/store/controllers/favorites-controller.ts

@@ -74,12 +74,36 @@ export class FavoritesController
     }
 
     /**
-     * Returns the icon name for the current icon style.
+     * The icon name for the current icon style, unfilled.
+     *
+     * Prefer `iconFor(isFav)` — this getter is the name of the *empty*
+     * glyph, which is what every caller that does not know the state
+     * should draw.
      */
     get iconName(): string {
-        return this.iconStyle === 'star'
-            ? 'star'
-            : 'heart';
+        return this.iconFor(false);
+    }
+
+    /**
+     * The glyph for one track's favourite state.
+     *
+     * **A filled shape means favourited and an outline means not**, in
+     * every list in the app. Nine components rendered `iconName`, which
+     * was the *solid* glyph in both states — so "not a favourite" was a
+     * filled heart in a duller colour, and the only thing separating
+     * the two states was hue. That fails for anyone who cannot see the
+     * difference between them, and reads as "everything is a favourite"
+     * to everyone else. `track-list` and `album-dropdown` already drew
+     * it correctly, from inline SVG paths of their own; this is the
+     * same rule for the `<wa-icon>` call sites.
+     *
+     * The Font Awesome family is part of the name — `regular/heart` is
+     * the outline, a bare `heart` is the solid one (`src/icons`).
+     */
+    iconFor(favorited: boolean): string {
+        const shape = this.iconStyle === 'star' ? 'star' : 'heart';
+
+        return favorited ? shape : `regular/${shape}`;
     }
 
     // ===============================================================