Files
yellowjacket/.planning/quick/6-remove-list-icon-from-playlist-names-and/6-PLAN.md
T
yonlu 0119cb469a docs(quick-006): complete remove list icon from playlist names plan
- Add 6-SUMMARY.md with execution results
- Update STATE.md with quick task 006 completion
2026-03-01 09:45:12 -05:00

104 lines
4.3 KiB
Markdown

---
phase: quick-006
plan: 1
type: execute
wave: 1
depends_on: []
files_modified:
- frontend/src/components/playlist-view/playlist-view.ts
autonomous: true
requirements: [QUICK-006]
must_haves:
truths:
- "Playlist entries in the playlist list do NOT show a 'list' icon before the name"
- "The default (favorites) playlist entry shows a heart or star icon (matching favoritesStore iconStyle) instead of no icon"
- "Non-default playlists show no icon between the chevron and the name"
artifacts:
- path: "frontend/src/components/playlist-view/playlist-view.ts"
provides: "Updated playlist item rendering without list icon, with favorites icon for default playlist"
key_links:
- from: "renderPlaylistItem"
to: "favCtrl.playlistId / favCtrl.iconName"
via: "Conditional icon rendering based on default playlist ID match"
pattern: "favCtrl\\.playlistId|favCtrl\\.iconName"
---
<objective>
Remove the "list" icon that appears before every playlist name in the playlist view, and add the user-configured favorites icon (heart or star) to the default playlist entry only.
Purpose: Cleaner playlist list — the list icon adds visual noise; the favorites icon on the default playlist gives quick visual identification.
Output: Updated playlist-view.ts with conditional icon rendering.
</objective>
<execution_context>
@.planning/quick/6-remove-list-icon-from-playlist-names-and/6-PLAN.md
</execution_context>
<context>
@frontend/src/components/playlist-view/playlist-view.ts (main file to modify)
@frontend/src/store/controllers/favorites-controller.ts (provides favCtrl.playlistId, favCtrl.iconName)
<interfaces>
From frontend/wailsjs/go/models.ts (playlist namespace):
```typescript
export class Summary {
ID: number;
Name: string;
CreatedAt: string;
UpdatedAt: string;
}
```
From frontend/src/store/controllers/favorites-controller.ts:
```typescript
// Already instantiated on the component as: private favCtrl = new FavoritesController(this);
get playlistId(): number; // Returns the default playlist's DB ID
get iconName(): string; // Returns 'star' or 'heart' based on user config
```
</interfaces>
</context>
<tasks>
<task type="auto">
<name>Task 1: Remove list icon from all playlists and add favorites icon to default playlist</name>
<files>frontend/src/components/playlist-view/playlist-view.ts</files>
<action>
In the `renderPlaylistItem` method (~line 2883), replace the static `<wa-icon class="playlist-icon" name="list"></wa-icon>` block (lines 2923-2926) with a conditional:
- If `entry.summary.ID === this.favCtrl.playlistId`, render `<wa-icon class="playlist-icon" name=${this.favCtrl.iconName}></wa-icon>` (shows heart or star per user config)
- Otherwise, render nothing (no icon at all between chevron and name)
The existing `.playlist-icon` CSS class (lines 568-572) should remain — it styles the icon for the default playlist entry. No CSS changes needed.
Also update the `.playlist-body` left padding from `42px` to `32px` (line 590) to tighten the track list indentation now that most rows no longer have the icon taking up ~28px (18px icon + 10px gap). This keeps the tracks visually aligned under the playlist name rather than indented too far.
Do NOT touch the empty-state `<wa-icon name="list">` on line 2818 — that's the "no playlists" illustration, not a per-playlist icon.
</action>
<verify>
npm run --prefix frontend check (TypeScript compiles without errors)
</verify>
<done>
- No playlist entry shows the "list" icon
- The default/favorites playlist entry shows the heart or star icon (matching user config)
- Non-default playlists show only the chevron then the name (no icon between)
- TypeScript compiles cleanly
</done>
</task>
</tasks>
<verification>
- `npm run --prefix frontend check` passes
- Visual: In the playlist view, non-default playlists show chevron → name (no icon). The default playlist shows chevron → heart/star → name.
</verification>
<success_criteria>
The list icon is removed from all playlist entries. The default playlist entry displays the user-configured favorites icon (heart or star). All other playlists show no icon. TypeScript compiles without errors.
</success_criteria>
<output>
After completion, create `.planning/quick/6-remove-list-icon-from-playlist-names-and/6-SUMMARY.md`
</output>