feat(quick-12): add favorite icon to album dropdown track rows

- Add FavoritesController and classMap imports
- Add .fav-icon CSS with compact sizing (18px/11px) for dropdown context
- Insert heart/star icon between track number and title
- Click toggles favorite with stopPropagation to avoid track selection
This commit is contained in:
2026-03-05 11:43:31 -05:00
parent a28b4d1e06
commit 12a0bbc89c
@@ -1,7 +1,9 @@
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import type { library } from '@go/models';
import { PlayerController } from '@store/controllers/player-controller';
import { FavoritesController } from '@store/controllers/favorites-controller';
import { formatMilliseconds } from '@utils/time';
/** Detail payload for the track-click custom event. */
@@ -42,6 +44,7 @@ export interface TrackDragStartDetail {
@customElement('album-dropdown')
export class AlbumDropdown extends LitElement {
private player = new PlayerController(this);
private favCtrl = new FavoritesController(this);
@property({ attribute: false })
tracks: library.Track[] = [];
@@ -157,6 +160,28 @@ export class AlbumDropdown extends LitElement {
flex-shrink: 0;
margin-left: auto;
}
.fav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
flex-shrink: 0;
cursor: pointer;
color: var(--yj-text-tertiary, #666);
font-size: 11px;
transition: color 0.1s ease;
}
.fav-icon:hover {
color: var(--yj-text-primary, #fff);
}
.fav-icon.favorited {
color: var(--yj-accent, #ffd43b);
}
.fav-icon.favorited:hover {
color: var(--yj-accent, #ffd43b);
opacity: 0.8;
}
`;
/* ================================================================
@@ -325,6 +350,8 @@ export class AlbumDropdown extends LitElement {
const selected = this.selectedTracks.has(
track.FilePath,
);
const isFav = this.favCtrl.isFavorited(track.FilePath);
const favVariant = isFav ? 'solid' : 'regular';
const classes = [
'track-row',
@@ -364,6 +391,18 @@ export class AlbumDropdown extends LitElement {
<span class="track-number">
${displayNumber}
</span>
<div
class=${classMap({ 'fav-icon': true, favorited: isFav })}
@click=${(e: MouseEvent) => {
e.stopPropagation();
void this.favCtrl.toggleFavorite(track.FilePath);
}}
>
<wa-icon
name=${this.favCtrl.iconName}
variant=${favVariant}
></wa-icon>
</div>
<span
class="track-title"
title="${track.TrackName}"