52 lines
2.0 KiB
Markdown
52 lines
2.0 KiB
Markdown
---
|
|
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 `<track-info>` 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 `<track-info>` 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 `<track-info>` element with inline `<span>` 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
|