yellowjacket/.planning/quick/6-remove-list-icon-from-playlist-names-and/6-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
quick-006	1	execute	1		frontend/src/components/playlist-view/playlist-view.ts	true	QUICK-006	truths artifacts key_links 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 path provides frontend/src/components/playlist-view/playlist-view.ts Updated playlist item rendering without list icon, with favorites icon for default playlist from to via pattern renderPlaylistItem favCtrl.playlistId / favCtrl.iconName Conditional icon rendering based on default playlist ID match favCtrl.playlistId|favCtrl.iconName

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.

<execution_context> @.planning/quick/6-remove-list-icon-from-playlist-names-and/6-PLAN.md </execution_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) 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:

// 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

Task 1: Remove list icon from all playlists and add favorites icon to default playlist frontend/src/components/playlist-view/playlist-view.ts In the `renderPlaylistItem` method (~line 2883), replace the static `` 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. npm run --prefix frontend check (TypeScript compiles without errors) - 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

- `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.

<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>

After completion, create `.planning/quick/6-remove-list-icon-from-playlist-names-and/6-SUMMARY.md`