diff --git a/frontend/src/components/cover-grid/album-dropdown.ts b/frontend/src/components/cover-grid/album-dropdown.ts index df56233..2402458 100644 --- a/frontend/src/components/cover-grid/album-dropdown.ts +++ b/frontend/src/components/cover-grid/album-dropdown.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit'; +import { LitElement, html, svg, css } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import type { library } from '@go/models'; @@ -35,6 +35,21 @@ export interface TrackDragStartDetail { dataTransfer: DataTransfer | null; } +// Inline SVG paths for favorite icons — eliminates wa-icon shadow DOM +// overhead per visible track row. Font Awesome 6 paths. +const FAV_ICONS = { + heart: { + viewBox: '0 0 512 512', + regular: 'M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.3 17.3 13.5 25 21.5c7.7-8 16-15.2 25-21.5c32.1-22.6 72.4-31.7 111.8-24.2C461.5 59.6 512 124.2 512 192.8v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9z', + solid: 'M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z', + }, + star: { + viewBox: '0 0 576 512', + regular: 'M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L434.8 326.7l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7L288 439.6 149.7 507.5c-8 4.3-17.8 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0z', + solid: 'M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 108.4 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3L288.1 439.8 420.9 508.3c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L437.7 329 542 225.9c8.6-8.4 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L380.7 150.3 316.9 18z', + }, +} as const; + /** * Self-contained dropdown that renders an album's track list. * @@ -351,8 +366,6 @@ export class AlbumDropdown extends LitElement { track.FilePath, ); const isFav = this.favCtrl.isFavorited(track.FilePath); - const favVariant = isFav ? 'solid' : 'regular'; - const classes = [ 'track-row', active ? 'active' : '', @@ -398,10 +411,9 @@ export class AlbumDropdown extends LitElement { void this.favCtrl.toggleFavorite(track.FilePath); }} > - + + ${svg``} + - + + ${svg``} + `; diff --git a/frontend/src/store/favorites-store.ts b/frontend/src/store/favorites-store.ts index 8b3f136..08d96b4 100644 --- a/frontend/src/store/favorites-store.ts +++ b/frontend/src/store/favorites-store.ts @@ -34,6 +34,7 @@ class FavoritesStore { private pinDefault = true; private favoritedPaths = new Set(); private subscribers = new Set(); + private notifyScheduled = false; private loading = false; constructor() { @@ -232,7 +233,14 @@ class FavoritesStore { } private notify(): void { - this.subscribers.forEach((cb) => cb()); + if (this.notifyScheduled) return; + this.notifyScheduled = true; + queueMicrotask(() => { + this.notifyScheduled = false; + for (const cb of this.subscribers) { + cb(); + } + }); } // =============================================================== diff --git a/frontend/src/store/player-store.ts b/frontend/src/store/player-store.ts index 2441a80..0de3392 100644 --- a/frontend/src/store/player-store.ts +++ b/frontend/src/store/player-store.ts @@ -41,6 +41,7 @@ class PlayerStore { }; private subscribers = new Set(); + private notifyScheduled = false; constructor() { this.initializeEventListeners(); @@ -115,7 +116,14 @@ class PlayerStore { } private notify(): void { - this.subscribers.forEach((callback) => callback()); + if (this.notifyScheduled) return; + this.notifyScheduled = true; + queueMicrotask(() => { + this.notifyScheduled = false; + for (const sub of this.subscribers) { + sub(); + } + }); } }