290 lines
16 KiB
Markdown
290 lines
16 KiB
Markdown
---
|
||
phase: quick-17
|
||
plan: 1
|
||
type: execute
|
||
wave: 1
|
||
depends_on: []
|
||
files_modified:
|
||
- frontend/src/components/playlist-details/playlist-details.ts
|
||
- frontend/src/components/playlist-view/playlist-view.ts
|
||
- frontend/index.ts
|
||
autonomous: true
|
||
requirements: [QUICK-17]
|
||
|
||
must_haves:
|
||
truths:
|
||
- "Clicking a playlist in playlist-view navigates to a dedicated playlist-details subpage"
|
||
- "Playlist-details shows a header with back button, playlist icon, playlist name, and track count"
|
||
- "Playlist-details shows the full track list for that playlist with all existing interactions (click, dblclick, context menu, drag, phantom handling)"
|
||
- "Back button in playlist-details navigates back to the playlist list"
|
||
- "Playlist-view no longer expands/collapses playlists inline"
|
||
artifacts:
|
||
- path: "frontend/src/components/playlist-details/playlist-details.ts"
|
||
provides: "Playlist detail subpage component"
|
||
- path: "frontend/src/components/playlist-view/playlist-view.ts"
|
||
provides: "Playlist list view (no more inline track expansion)"
|
||
- path: "frontend/index.ts"
|
||
provides: "Navigation routing for playlist-details"
|
||
key_links:
|
||
- from: "frontend/src/components/playlist-view/playlist-view.ts"
|
||
to: "frontend/index.ts"
|
||
via: "CustomEvent('navigate', { view: 'playlist-details', playlistId, playlistName })"
|
||
pattern: "navigate.*playlist-details"
|
||
- from: "frontend/src/components/playlist-details/playlist-details.ts"
|
||
to: "frontend/index.ts"
|
||
via: "CustomEvent('navigate', { view: 'playlists' })"
|
||
pattern: "navigate.*playlists"
|
||
---
|
||
|
||
<objective>
|
||
Refactor the playlist view from an expand/collapse dropdown pattern to a subpage navigation pattern, matching how genre-details and artist-details work. Clicking a playlist navigates to a dedicated playlist-details page with a header (back button + playlist icon + title + track count) and the full track list below.
|
||
|
||
Purpose: Consistent navigation UX across playlists, genres, and artists — all use the subpage pattern.
|
||
Output: New `playlist-details` component, simplified `playlist-view`, updated navigation routing.
|
||
</objective>
|
||
|
||
<execution_context>
|
||
@/home/caleb/.config/Claude/get-shit-done/workflows/execute-plan.md
|
||
@/home/caleb/.config/Claude/get-shit-done/templates/summary.md
|
||
</execution_context>
|
||
|
||
<context>
|
||
@frontend/src/components/genre-details/genre-details.ts (reference pattern — header + back button + content)
|
||
@frontend/src/components/genres-view/genres-view.ts (reference pattern — click navigates to details)
|
||
@frontend/src/components/playlist-view/playlist-view.ts (source — refactor this)
|
||
@frontend/index.ts (navigation routing — add playlist-details case)
|
||
@frontend/wailsjs/go/playlist/Service.d.ts (available backend APIs)
|
||
@frontend/src/store/playlist-store.ts (playlist data store)
|
||
@frontend/src/store/search-store.ts (search store — update SEARCHABLE_VIEWS if needed)
|
||
|
||
<interfaces>
|
||
<!-- Navigation pattern from genre-details (the pattern to follow): -->
|
||
|
||
From frontend/src/components/genre-details/genre-details.ts:
|
||
```typescript
|
||
// Header: back-button → avatar → genre-info (title + track count)
|
||
// Content: <track-list .externalTracks=${this.tracks}>
|
||
// Back navigation: dispatches CustomEvent('navigate', { view: 'genres' })
|
||
```
|
||
|
||
From frontend/index.ts — navigation handler:
|
||
```typescript
|
||
// Genre details routing (line 73-82):
|
||
case 'genre-details': {
|
||
const { genreName } = (e as CustomEvent).detail;
|
||
const genreEl = document.createElement('genre-details');
|
||
genreEl.setAttribute('genre-name', genreName);
|
||
mainContent.innerHTML = '';
|
||
mainContent.appendChild(genreEl);
|
||
break;
|
||
}
|
||
```
|
||
|
||
From frontend/wailsjs/go/playlist/Service.d.ts:
|
||
```typescript
|
||
export function GetPlaylistTracks(arg1:number):Promise<Array<playlist.Track>>;
|
||
export function GetAllPlaylistsWithTracks():Promise<Array<playlist.WithTracks>>;
|
||
export function AddTracksToPlaylist(arg1:number,arg2:Array<string>):Promise<void>;
|
||
export function RemoveTracksFromPlaylist(arg1:number,arg2:Array<number>):Promise<void>;
|
||
export function RenamePlaylist(arg1:number,arg2:string):Promise<void>;
|
||
export function DeletePlaylist(arg1:number):Promise<void>;
|
||
export function RemovePhantomTracks(arg1:number,arg2:Array<string>):Promise<void>;
|
||
export function FindDuplicateTracksInPlaylist(arg1:number,arg2:Array<string>):Promise<playlist.DuplicateCheckResult>;
|
||
```
|
||
|
||
From frontend/src/components/playlist-view/playlist-view.ts:
|
||
```typescript
|
||
// PlaylistEntry = { summary: playlist.Summary, expanded: boolean, tracks: playlist.Track[] }
|
||
// SelectionHost + ContextMenuHost interfaces
|
||
// Uses: PlayerController, PlaylistController, SearchController, SelectionController, ContextMenuController, FavoritesController
|
||
// Track interactions: click (select), dblclick (play), contextmenu, drag source, phantom handling
|
||
// Playlist-level: context menu (rename, delete, set-default), drag target, multi-select, sort
|
||
```
|
||
|
||
From frontend/wailsjs/go/models.ts:
|
||
```typescript
|
||
// playlist.Summary: { ID: number, Name: string, CreatedAt: string, UpdatedAt: string }
|
||
// playlist.Track: { ID, Position, FilePath, Title, Artist, Album, CoverArtPath, CoverArtSmall, CoverArtMedium, CoverArtLarge, Duration, Phantom }
|
||
// playlist.WithTracks: { Summary: Summary, Tracks: Track[] }
|
||
```
|
||
</interfaces>
|
||
</context>
|
||
|
||
<tasks>
|
||
|
||
<task type="auto">
|
||
<name>Task 1: Create playlist-details component</name>
|
||
<files>frontend/src/components/playlist-details/playlist-details.ts, frontend/index.ts</files>
|
||
<action>
|
||
Create `frontend/src/components/playlist-details/playlist-details.ts` — a new LitElement component modeled closely on `genre-details.ts` but with all the track interaction capabilities currently in `playlist-view`'s `renderPlaylistBody`.
|
||
|
||
**Component structure:**
|
||
|
||
1. **Properties:** `playlistId` (Number attribute), `playlistName` (String attribute).
|
||
|
||
2. **Header** (same layout as genre-details):
|
||
- Back button (dispatches `navigate` with `{ view: 'playlists' }`)
|
||
- Playlist avatar: 80×80 rounded square with `list` icon (wa-icon name="list") centered inside, using the same gradient background as genre-details' `.genre-avatar`
|
||
- Playlist info: h1 title + track count subtitle
|
||
|
||
3. **Content area:** Render playlist tracks using the same track-item rendering pattern currently in `playlist-view`'s `renderPlaylistBody` method. This includes:
|
||
- "Play All" button at the top
|
||
- Track list with `<track-info>` for normal tracks and phantom row rendering for phantom tracks
|
||
- All track interactions: click (selection), dblclick (play from playlist), right-click context menu, drag source
|
||
- Phantom track interactions: click (select), right-click context menu, locate button, remove button
|
||
- Active track highlighting (uses PlayerController)
|
||
- Track selection (uses SelectionController — this component is the SelectionHost)
|
||
|
||
4. **Context menus:** Move the track-level context menu (play, add to queue, play next, remove from playlist, add to playlist submenu, favorites toggle, track details) and the playlist submenu from `playlist-view` into this component. Include `<track-details>`, `<phantom-resolver>`, and `<duplicate-tracks-dialog>` elements.
|
||
|
||
5. **Data loading:**
|
||
- On connectedCallback, call `GetPlaylistTracks(this.playlistId)` to load tracks
|
||
- Listen for `Events.PlaylistTracksChanged` and `Events.PlaylistDeleted` to refresh/navigate back
|
||
- Implement a `refreshTracks()` method that re-fetches tracks after mutations
|
||
|
||
6. **Drag target:** Support dropping tracks onto this playlist (from queue, track-list, or other playlists). Use the same `AddTracksToPlaylist` + `FindDuplicateTracksInPlaylist` flow currently in `playlist-view`'s `onPlaylistDrop`.
|
||
|
||
7. **Drag source:** Support dragging tracks from this playlist to queue or other destinations. Same pattern as `playlist-view`'s `onTrackDragStart`/`onTrackDragEnd`.
|
||
|
||
8. **Search integration:** Wire up SearchController. When search term is active, filter visible tracks (same logic as `playlist-view`'s `getVisibleTracks`). Add `playlist-details` to `SEARCHABLE_VIEWS` in `search-store.ts`.
|
||
|
||
9. **Styles:** Use `designTokens` mixin. Copy the relevant styles from `genre-details` for the header section (`.back-button`, avatar, title, track-count). Copy track-item styles (`.track-item`, `.track-item.active`, `.track-item.selected`, `.phantom-row`, etc.) and context menu styles from `playlist-view`. Include `.play-all-button` styles.
|
||
|
||
10. **Select-all support:** Listen for `shortcut:select-all` event (same as playlist-view does).
|
||
|
||
**In `frontend/index.ts`:**
|
||
- Add `import '@components/playlist-details/playlist-details.ts';` at the top with the other imports
|
||
- Add a `case 'playlist-details':` block in the navigation switch, following the same pattern as `genre-details`:
|
||
```
|
||
case 'playlist-details': {
|
||
const { playlistId, playlistName } = (e as CustomEvent).detail;
|
||
const el = document.createElement('playlist-details');
|
||
el.setAttribute('playlist-id', String(playlistId));
|
||
el.setAttribute('playlist-name', playlistName);
|
||
mainContent.innerHTML = '';
|
||
mainContent.appendChild(el);
|
||
break;
|
||
}
|
||
```
|
||
</action>
|
||
<verify>
|
||
`npx tsc --noEmit` passes. The new component file exists with @customElement('playlist-details'), has back button, header, track rendering, context menus, drag support, and the index.ts routing case exists.
|
||
</verify>
|
||
<done>playlist-details component renders a header with back button + playlist icon + title + track count, displays playlist tracks with all interactions (select, play, context menu, drag, phantom handling), and navigating to `playlist-details` view works via index.ts routing.</done>
|
||
</task>
|
||
|
||
<task type="auto">
|
||
<name>Task 2: Simplify playlist-view to navigate instead of expand</name>
|
||
<files>frontend/src/components/playlist-view/playlist-view.ts</files>
|
||
<action>
|
||
Refactor `playlist-view.ts` to remove all inline track expansion and instead navigate to `playlist-details` on click. This is a significant simplification:
|
||
|
||
**Remove from playlist-view:**
|
||
1. The `expanded` field from `PlaylistEntry` interface (no longer needed — set type to just `{ summary: playlist.Summary; tracks: playlist.Track[] }`, keep tracks for count display and drag-drop track resolution)
|
||
2. The `renderPlaylistBody` method entirely
|
||
3. The chevron icon in `renderPlaylistItem` (no more expand/collapse)
|
||
4. All track-level interaction handlers: `handleTrackClick`, `handleTrackDblClick`, `handleTrackContextMenu`, `onTrackDragStart`, `onTrackDragEnd`, `ensureSelectionScope`, `getSelectedTrackIDs`, `getSelectedFilePaths`, `removeSelectedTracks`, `removeSelectedPhantoms`, `handlePhantomClick`, `handlePhantomContextMenu`, `openPhantomResolver`, `removePhantomTrack`
|
||
5. The `SelectionController` (no more track selection in the list view) and `SelectionHost` implementation (`getItemKey`, `getItemCount`, `onSelectionChanged`)
|
||
6. The `ContextMenuController` and `ContextMenuHost` implementation, and all track-level context menu rendering (the `#context-menu` popup, `#playlist-submenu` popup)
|
||
7. Remove `activePlaylistIndex` state
|
||
8. The `<track-details>`, `<phantom-resolver>`, and `<duplicate-tracks-dialog>` elements from the render method (they move to playlist-details)
|
||
9. The `isActiveTrack`, `isPhantomSelection`, `resolvePlaylistCoverArt`, `openTrackDetails` methods
|
||
10. The `getVisibleTracks` and `filteredEntries` search-related track filtering (search on the list page can just filter playlist names)
|
||
11. Remove `SelectionHost` and `ContextMenuHost` from the class declaration
|
||
12. Remove imports that are no longer needed: `SelectionController`, track-info, track-details, phantom-resolver, duplicate-tracks-dialog, etc.
|
||
13. Remove the `clearSelectionHandler` and `handleSelectAll` handlers since track selection is gone
|
||
14. Remove the search-triggered auto-expand logic in `updated()` (the part that sets `expanded: true` based on track matches)
|
||
|
||
**Keep in playlist-view:**
|
||
1. Playlist list rendering (the grid of playlist items with name + track count)
|
||
2. Playlist-level context menu (rename, delete, set-default) — the `#playlist-context-menu` popup
|
||
3. Playlist-level selection (Ctrl/Shift+Click for multi-select of playlists for bulk delete)
|
||
4. Create playlist functionality (new playlist button, create form)
|
||
5. Import playlist button
|
||
6. Sort toolbar (sort by name, created, modified, tracks)
|
||
7. Drag-and-drop TARGET: dropping tracks onto a playlist item to add them (keep `onPlaylistDragOver`, `onPlaylistDragLeave`, `onPlaylistDrop`). Also keep empty zone drop and new-button drop.
|
||
8. Search filtering (but simplified to just filter by playlist name, not tracks)
|
||
9. Scroll position persistence
|
||
10. PlaylistController for data loading
|
||
|
||
**Modify `handlePlaylistHeaderClick`:**
|
||
- Remove the expand/collapse toggle behavior for plain clicks
|
||
- Instead, plain click dispatches navigation:
|
||
```typescript
|
||
this.dispatchEvent(
|
||
new CustomEvent('navigate', {
|
||
bubbles: true,
|
||
composed: true,
|
||
detail: {
|
||
view: 'playlist-details',
|
||
playlistId: entry.summary.ID,
|
||
playlistName: entry.summary.Name,
|
||
},
|
||
}),
|
||
);
|
||
```
|
||
- Keep Ctrl+Click and Shift+Click for playlist multi-selection (same as before)
|
||
|
||
**Modify `renderPlaylistItem`:**
|
||
- Remove the chevron icon
|
||
- Remove the `${entry.expanded ? this.renderPlaylistBody(...) : nothing}` conditional
|
||
- The playlist-header row now just shows: playlist-icon (if favorites) + playlist-name + track-count
|
||
- Keep the right-click context menu handler on the header
|
||
- Keep the drag-over styling for drop targets
|
||
|
||
**Simplify `filteredEntries`:**
|
||
- Only filter by playlist name (remove the track title/artist matching since tracks aren't shown inline)
|
||
|
||
**Remove styles that are no longer needed:**
|
||
- `.chevron`, `.chevron.expanded`
|
||
- `.playlist-body`
|
||
- `.playlist-actions`, `.play-all-button`
|
||
- `.track-item` and all its variants (`.active`, `.selected`, `.phantom`)
|
||
- `.phantom-row`, `.phantom-caution`, `.phantom-path`, `.phantom-actions`, `.phantom-icon-btn`
|
||
- `.tracks-empty`
|
||
- Context menu styles for track-level menus
|
||
|
||
**Update `loadPlaylists`/`refreshPlaylists`:**
|
||
- Remove `expanded` from the mapped entries
|
||
|
||
**Remove the `contextMenuStyles` import** if no longer needed (check if playlist-level context menu uses it — it does, so keep it).
|
||
|
||
**Note:** The `PlaylistController`, `PlayerController`, `SearchController`, `FavoritesController` may still be needed. Keep `FavoritesController` for the favorites icon display. Remove `PlayerController` since active track highlighting is gone from the list. Keep `SearchController` for name-based search. Keep `PlaylistController` for data.
|
||
</action>
|
||
<verify>
|
||
`npx tsc --noEmit` passes. Verify playlist-view no longer has any `expanded`, `renderPlaylistBody`, `handleTrackClick`, `SelectionController`, or chevron references.
|
||
</verify>
|
||
<done>Playlist-view shows a clean list of playlists without inline track expansion. Plain-clicking a playlist navigates to playlist-details. Ctrl/Shift+Click still multi-selects. Right-click context menu still works for rename/delete/set-default. Drag-drop onto playlists still works. Create/import still works. Sort still works. Search filters by playlist name only.</done>
|
||
</task>
|
||
|
||
</tasks>
|
||
|
||
<verification>
|
||
1. `npx tsc --noEmit` — TypeScript compilation passes with no errors
|
||
2. Navigate to Playlists view — shows list of playlists without chevrons or expandable sections
|
||
3. Click a playlist — navigates to playlist-details with header (back button, icon, title, track count) and track list
|
||
4. Click back button — returns to playlist list
|
||
5. Double-click a track in playlist-details — plays the track
|
||
6. Right-click track in playlist-details — context menu works (play, queue, remove, etc.)
|
||
7. Right-click playlist in list — context menu works (rename, delete, set-default)
|
||
8. Ctrl+Click playlists in list — multi-select works for bulk delete
|
||
9. Drag tracks from another view onto a playlist in the list — adds tracks
|
||
10. Drag tracks from playlist-details to queue — works
|
||
11. Create new playlist — form still works
|
||
12. Import playlist — button still works
|
||
13. Sort playlists — toolbar still works
|
||
14. Search — filters playlist names in list view, filters tracks in detail view
|
||
</verification>
|
||
|
||
<success_criteria>
|
||
- Playlist navigation matches genre/artist pattern: list view → click → detail subpage → back button
|
||
- No inline track expansion/collapse in playlist-view
|
||
- All existing track interactions work in playlist-details (play, select, context menu, drag, phantom handling)
|
||
- All existing playlist management works in playlist-view (create, import, rename, delete, sort, drag-drop target)
|
||
- TypeScript compiles without errors
|
||
</success_criteria>
|
||
|
||
<output>
|
||
After completion, create `.planning/quick/17-refactor-playlist-view-to-use-subpages-l/17-SUMMARY.md`
|
||
</output>
|