diff --git a/.planning/STATE.md b/.planning/STATE.md index 179d681..7d42af7 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -111,6 +111,7 @@ Decisions from v1.0 are archived in PROJECT.md Key Decisions table. Key patterns |---|-------------|------|--------|-----------| | 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/) | +| 18 | add multi-column metadata display to playlist-details | 2026-03-08 | ce23177 | [18-add-multi-column-metadata-display-to-pla](./quick/18-add-multi-column-metadata-display-to-pla/) | -Last activity: 2026-03-08 - Completed quick task 17: refactor playlist view to use subpages +Last activity: 2026-03-08 - Completed quick task 18: add multi-column metadata display to playlist-details *Last updated: 2026-03-08* diff --git a/.planning/quick/18-add-multi-column-metadata-display-to-pla/18-SUMMARY.md b/.planning/quick/18-add-multi-column-metadata-display-to-pla/18-SUMMARY.md new file mode 100644 index 0000000..a844bca --- /dev/null +++ b/.planning/quick/18-add-multi-column-metadata-display-to-pla/18-SUMMARY.md @@ -0,0 +1,51 @@ +--- +phase: quick-18 +plan: 1 +subsystem: frontend/playlist-details +tags: [ui, grid-layout, playlist] +dependency_graph: + requires: [playlist.Track, formatMilliseconds] + provides: [multi-column-playlist-track-display] + affects: [playlist-details] +tech_stack: + added: [] + patterns: [css-grid-template-columns, tabular-nums, text-overflow-ellipsis] +key_files: + modified: + - frontend/src/components/playlist-details/playlist-details.ts +decisions: [] +metrics: + duration: 2 min + completed: "2026-03-08T13:36:12Z" +--- + +# Quick Task 18: Multi-Column Metadata Display in Playlist Details — Summary + +Replaced single-row `` component rendering with a 5-column CSS grid layout (#, Title, Artist, Album, Duration) including a column header row, matching track-list's visual style. + +## Changes Made + +### Task 1: Replace track-info rendering with multi-column grid layout +**Commit:** `ce23177` + +- Removed `` component import (no longer used) +- Added `formatMilliseconds` import from `@utils/time` for duration formatting +- Added `.track-header` row with column labels: #, Title, Artist, Album, Duration +- Replaced `` element with inline `` grid cells showing track metadata +- Added 1-indexed playlist order number in `#` column (`trackIndex + 1`) +- Phantom tracks span the full grid width via `grid-column: 1 / -1` +- Added CSS grid styles: `grid-template-columns: 40px 1fr 1fr 1fr 80px` +- Column-specific styles: center-aligned `#`, right-aligned duration, tabular-nums, text truncation with ellipsis +- Removed stale `.track-item:last-child { border-bottom: none }` rule +- Updated `.track-item` padding from `6px 0` to `6px 8px` for grid alignment + +## Deviations from Plan + +None — plan executed exactly as written. + +## Verification + +- `cd frontend && npx tsc --noEmit` — passed (0 errors) +- Pre-commit hook `frontend-typecheck` — passed +- All existing interactions preserved (click, dblclick, contextmenu, drag events unchanged) +- Phantom track rendering still uses warning icon / path / action button layout, spanning full grid width