From 8570f76400d3824ca9141dc7ef5cf2fda5180210 Mon Sep 17 00:00:00 2001 From: Caleb Allen Date: Sat, 7 Mar 2026 22:11:28 -0500 Subject: [PATCH] docs(quick-17): complete playlist subpage refactoring - Summary documenting playlist-details creation and playlist-view simplification - Updated STATE.md with quick task 17 completion --- .planning/STATE.md | 5 +- .../17-SUMMARY.md | 81 +++++++++++++++++++ 2 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 .planning/quick/17-refactor-playlist-view-to-use-subpages-l/17-SUMMARY.md diff --git a/.planning/STATE.md b/.planning/STATE.md index 0b31d27..179d681 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -110,6 +110,7 @@ Decisions from v1.0 are archived in PROJECT.md Key Decisions table. Key patterns | # | Description | Date | Commit | Directory | |---|-------------|------|--------|-----------| | 16 | add ctrl+a hotkey to multi-select views to select all items | 2026-03-07 | 043c74c | [16-add-ctrl-a-hotkey-to-multi-select-views-](./quick/16-add-ctrl-a-hotkey-to-multi-select-views-/) | +| 17 | refactor playlist view to use subpages | 2026-03-08 | 955cd68 | [17-refactor-playlist-view-to-use-subpages-l](./quick/17-refactor-playlist-view-to-use-subpages-l/) | -Last activity: 2026-03-07 - Completed quick task 16: add ctrl+a hotkey to multi-select views to select all items -*Last updated: 2026-03-07* +Last activity: 2026-03-08 - Completed quick task 17: refactor playlist view to use subpages +*Last updated: 2026-03-08* diff --git a/.planning/quick/17-refactor-playlist-view-to-use-subpages-l/17-SUMMARY.md b/.planning/quick/17-refactor-playlist-view-to-use-subpages-l/17-SUMMARY.md new file mode 100644 index 0000000..ba53b98 --- /dev/null +++ b/.planning/quick/17-refactor-playlist-view-to-use-subpages-l/17-SUMMARY.md @@ -0,0 +1,81 @@ +--- +phase: quick-17 +plan: 1 +subsystem: frontend/playlist +tags: [refactor, navigation, ux-consistency] +dependency-graph: + requires: [] + provides: [playlist-details-component, playlist-subpage-navigation] + affects: [playlist-view, index-routing, search-store] +tech-stack: + added: [] + patterns: [subpage-navigation, detail-view-with-back-button] +key-files: + created: + - frontend/src/components/playlist-details/playlist-details.ts + modified: + - frontend/src/components/playlist-view/playlist-view.ts + - frontend/index.ts + - frontend/src/store/search-store.ts +decisions: + - Playlist-details is a standalone component (not reusing track-list) to preserve playlist-specific interactions (phantom handling, playlist-scoped drag, remove from playlist) + - Search filtering in playlist-details filters by track title/artist; playlist-view now only filters by playlist name +metrics: + duration: 6 min + completed: "2026-03-08T03:10:34Z" +--- + +# Quick Task 17: Refactor Playlist View to Use Subpages Summary + +Refactored playlist navigation from expand/collapse inline pattern to dedicated subpage navigation, matching genre-details and artist-details UX patterns. + +## Completed Tasks + +| # | Task | Commit | Key Changes | +|---|------|--------|-------------| +| 1 | Create playlist-details component | dc5c7d6 | New `playlist-details` component with header (back button, list icon, title, track count), full track list with all interactions, context menus, drag support, search filtering, routing in index.ts | +| 2 | Simplify playlist-view to navigate | 955cd68 | Removed inline track expansion, chevrons, track-level interactions. Plain click navigates to playlist-details. Kept playlist management (create, import, rename, delete, sort, drag-drop target) | + +## What Changed + +### New: `playlist-details` component +- Header with back button, 80x80 playlist avatar (list icon), playlist name, track count +- Full track list with all interactions from the old inline expansion: + - Click to select, double-click to play, right-click context menu + - Drag tracks to queue or other playlists + - Phantom track handling (locate, remove, phantom-resolver dialog) + - Track details dialog, duplicate tracks dialog +- Drop target for adding tracks from other views +- Search filtering (tracks by title/artist) +- Select-all (Ctrl+A) support +- Listens for `PlaylistTracksChanged` and `PlaylistDeleted` events + +### Simplified: `playlist-view` component +- Removed ~1300 lines of inline track expansion code +- Plain click dispatches `navigate` event with `playlist-details` view +- Ctrl/Shift+Click still multi-selects playlists for bulk operations +- Right-click context menu still works (rename, delete, set-default) +- Drag-drop onto playlist items still adds tracks +- Create/import playlist still works +- Sort toolbar still works +- Search now filters by playlist name only (no inline track search) +- Removed: `SelectionController`, `ContextMenuController`, `PlayerController`, track-info, track-details, phantom-resolver imports + +### Updated: `index.ts` routing +- Added `playlist-details` case to navigation switch +- Passes `playlistId` and `playlistName` as element attributes + +### Updated: `search-store.ts` +- Added `playlist-details` to `SEARCHABLE_VIEWS` + +## Deviations from Plan + +None - plan executed exactly as written. + +## Verification + +- `npx tsc --noEmit` passes with no errors +- Pre-commit hook (frontend-typecheck) passed on both commits +- No references to `expanded`, `renderPlaylistBody`, `handleTrackClick`, `SelectionController`, or expand/collapse chevron in playlist-view +- Navigation routing case exists in index.ts +- playlist-details component has @customElement decorator, back button, header, track rendering, context menus, drag support