docs(14-02): complete view caching navigation plan

- Created 14-02-SUMMARY.md with execution results
- Updated STATE.md with Phase 14 position and decisions
- Updated ROADMAP.md progress for Phase 14 (1/4 plans)
This commit is contained in:
2026-03-14 13:46:41 -04:00
parent ac8a52e110
commit f9cb346751
3 changed files with 122 additions and 13 deletions
+2 -2
View File
@@ -120,7 +120,7 @@ Plans:
3. Render hot paths (renderTrackRow, renderTrackItem) create zero new closures per frame — all event handling uses delegation
4. Store notifications are batched (queueMicrotask) and components only re-render when their relevant data changes
5. A profiling guide documents how to diagnose performance issues using pprof (backend) and DevTools (frontend)
**Plans:** 4 plans
**Plans:** 1/4 plans executed
Plans:
- [ ] 14-01-PLAN.md — CSS containment + GPU layer promotion on all scroll containers
- [ ] 14-02-PLAN.md — View caching navigation system (replace innerHTML destruction)
@@ -144,7 +144,7 @@ Plans:
| 11. Per-Library Scan Pipeline | 3/3 | Complete | 2026-03-09 | - |
| 12. Library CRUD & Data Integrity | v1.1 | 1/2 | In Progress | - |
| 13. Library Views & Phantom Tracks | v1.1 | 0/? | Not started | - |
| 14. Performance Optimization | v1.1 | 0/4 | Not started | - |
| 14. Performance Optimization | 1/4 | In Progress| | - |
---
*Roadmap created: 2026-02-27*
+21 -11
View File
@@ -18,15 +18,15 @@ progress:
See: .planning/PROJECT.md (updated 2026-03-08)
**Core value:** The music player works reliably and feels solid — every interaction is correct, responsive, and trustworthy.
**Current focus:** v1.1 Multi-Library Support Phase 11 (Per-Library Scan Pipeline)
**Current focus:** v1.1 Multi-Library Support + Performance Optimization
## Current Position
Phase: 12Library CRUD & Data Integrity
Plan: 1 of 2 in Phase (Plan 01 complete)
Status: Plan 12-01 complete — backend CRUD API implemented
Progress: ████████████████░░░░ 3/5 phases complete (Phase 12 in progress)
Last activity: 2026-03-12 — Completed 12-01 library CRUD backend API
Phase: 14Performance Optimization
Plan: 1 of 4 in Phase (Plan 02 complete)
Status: Plan 14-02 complete — view caching navigation system
Progress: ████████████████░░░░ Phase 14 in progress (1/4 plans)
Last activity: 2026-03-14 — Completed 14-02 view caching navigation
### Phase Overview
@@ -37,6 +37,7 @@ Last activity: 2026-03-12 — Completed 12-01 library CRUD backend API
| 11. Per-Library Scan Pipeline | Complete (3/3 plans) ✅ |
| 12. Library CRUD & Data Integrity | In progress (1/2 plans) |
| 13. Library Views & Phantom Tracks | Not started |
| 14. Performance Optimization | In progress (1/4 plans) |
## Performance Metrics
@@ -56,6 +57,7 @@ Last activity: 2026-03-12 — Completed 12-01 library CRUD backend API
| Phase 11-03 P03 | 10 min | 1 task | 3 files |
| Phase 11-02 P02 | 4 min | 2 tasks | 2 files |
| Phase 12-01 P01 | 6 min | 2 tasks | 6 files |
| Phase 14-02 P02 | 1 min | 1 task | 1 file |
## Accumulated Context
@@ -119,6 +121,14 @@ Decisions from v1.0 are archived in PROJECT.md Key Decisions table. Key patterns
| Sentinel errors for all validation per err113 | errLibraryNameEmpty, errLibraryNameTooLong, errLibraryNameDuplicate, errLibraryPathNotExist |
| Pre-populate phantom metadata BEFORE cascade delete | Avoids lost join data — playlist_tracks need track metadata after audio_files rows are gone |
### Phase 14 Decisions
| Decision | Rationale |
|----------|-----------|
| Primary views cached, detail views ephemeral | Detail views depend on entity IDs that change; caching would show stale content |
| Inline style.display toggle over CSS class | Simpler, no specificity issues, empty string restores natural display value |
| viewCache bounded at 6 entries | One per primary view — negligible memory since data is already in store caches |
### Warnings (carry forward)
- Player lock ordering (`p.mu` before `speaker.Lock()`, goroutine dispatch in beep callback) — carry forward
@@ -144,10 +154,10 @@ Decisions from v1.0 are archived in PROJECT.md Key Decisions table. Key patterns
### Last Session
**Date:** 2026-03-12
**What happened:** Executed Phase 12, Plan 01implemented backend Library CRUD API (AddLibrary, RenameLibrary, RemoveLibrary, GetRemovalImpact) with full orphan cleanup pipeline, phantom track preservation, FTS5 rebuild, queue compaction via CompactAfterLibraryRemoval, and RemovalHooks wiring in app.go.
**Where we stopped:** Completed 12-01-PLAN.md — Plan 01 of Phase 12 complete
**Next action:** Execute Phase 12 Plan 02 (Frontend library management UI)
**Date:** 2026-03-14
**What happened:** Executed Phase 14, Plan 02replaced innerHTML navigation with view caching system. Primary views (tracks, albums, artists, genres, playlists, settings) are now created once and kept in DOM with display toggle instead of destruction/recreation.
**Where we stopped:** Completed 14-02-PLAN.md — Plan 02 of Phase 14 complete
**Next action:** Execute remaining Phase 14 plans (14-01 CSS containment, 14-03 store optimizations, 14-04 rendering optimizations)
---
*State initialized: 2026-02-27*
@@ -160,4 +170,4 @@ Decisions from v1.0 are archived in PROJECT.md Key Decisions table. Key patterns
| 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 18: add multi-column metadata display to playlist-details
*Last updated: 2026-03-12 — Completed 12-01-PLAN.md (Phase 12 Plan 01 complete)*
*Last updated: 2026-03-14 — Completed 14-02-PLAN.md (Phase 14 Plan 02 complete)*
@@ -0,0 +1,99 @@
---
phase: 14-performance-optimization
plan: 02
subsystem: ui
tags: [navigation, view-caching, dom, performance, display-toggle]
# Dependency graph
requires: []
provides:
- View caching navigation system — primary views created once and visibility-toggled
- viewCache Map with bounded 6-entry cache for primary views
- Ephemeral detail view lifecycle (artist-details, playlist-details, genre-details)
affects: [14-performance-optimization]
# Tech tracking
tech-stack:
added: []
patterns:
- "View cache Map<string, HTMLElement> for DOM-persistent primary views"
- "display:none/display:'' toggle instead of innerHTML destruction"
- "Ephemeral detail views (remove + create) vs cached primary views"
key-files:
created: []
modified:
- frontend/index.ts
key-decisions:
- "Primary views cached, detail views ephemeral — detail views depend on entity IDs that change per navigation"
- "Inline style.display toggle over CSS class — simpler, no specificity issues, direct JS control"
- "viewCache bounded at 6 entries (one per primary view) — negligible memory overhead"
patterns-established:
- "View caching: create once, toggle visibility, never destroy primary views"
- "Detail view lifecycle: hide primary view, remove old detail, create new detail"
requirements-completed: [PERF-NAV-01, PERF-NAV-02]
# Metrics
duration: 1min
completed: 2026-03-14
---
# Phase 14 Plan 02: View Caching Navigation Summary
**DOM-persistent view cache replacing innerHTML destruction — primary views created once and visibility-toggled for instant navigation**
## Performance
- **Duration:** 1 min
- **Started:** 2026-03-14T17:43:20Z
- **Completed:** 2026-03-14T17:44:52Z
- **Tasks:** 1
- **Files modified:** 1
## Accomplishments
- Replaced innerHTML-based navigation with a view caching system using a `Map<string, HTMLElement>`
- Primary views (tracks, albums, artists, genres, playlists, settings) created once and kept in DOM
- Navigation toggles `display:none` / `display:''` instead of destroying and recreating components
- Detail views (artist-details, playlist-details, genre-details) remain ephemeral with proper lifecycle (remove old, create new)
- Scroll positions naturally preserved since DOM is never destroyed
- No virtualizer reinit, no data refetch, no cover art image reload on navigation
## Task Commits
Each task was committed atomically:
1. **Task 1: Implement view caching navigation system** - `ad91043` (perf)
## Files Created/Modified
- `frontend/index.ts` - Replaced switch/innerHTML navigation with VIEW_TAGS map, viewCache Map, display toggle, and ephemeral detail view lifecycle
## Decisions Made
- **Primary views cached, detail views ephemeral** — Detail views (artist-details, playlist-details, genre-details) depend on entity IDs/names that change per navigation, so caching them would show stale content. Primary views are stateless navigation targets that benefit from persistence.
- **Inline style.display toggle** — Using `element.style.display = 'none'` / `element.style.display = ''` rather than CSS classes avoids specificity issues and gives direct control. The empty string restores the element's natural display value from CSS (`.main-panel > * { height: 100% }`).
- **viewCache bounded at 6 entries** — One entry per primary view tag in VIEW_TAGS. Memory overhead is negligible since the data each view holds is already in store caches regardless.
## Deviations from Plan
None - plan executed exactly as written.
## Issues Encountered
None
## User Setup Required
None - no external service configuration required.
## Next Phase Readiness
- View caching complete — ready for remaining Phase 14 plans (14-01 CSS containment, 14-03 store optimizations, 14-04 rendering optimizations)
- Existing scroll save/restore logic in components preserved as fallback for data invalidation scenarios
---
## Self-Check: PASSED
- ✅ frontend/index.ts exists
- ✅ Commit ad91043 exists
*Phase: 14-performance-optimization*
*Completed: 2026-03-14*