diff --git a/.planning/phases/18-app-shell-navigation/18-02-SUMMARY.md b/.planning/phases/18-app-shell-navigation/18-02-SUMMARY.md new file mode 100644 index 0000000..d82cec1 --- /dev/null +++ b/.planning/phases/18-app-shell-navigation/18-02-SUMMARY.md @@ -0,0 +1,79 @@ +--- +phase: 18-app-shell-navigation +plan: "02" +subsystem: templates/css +tags: [go, templ, sidebar, nav, css, collapse] +dependency_graph: + requires: [18-01] + provides: [rebuilt DashboardSidebar with GENERAL/PROJECTS sections, sidebar collapse toggle, is-collapsed CSS rules] + affects: [backend/templates/app_layout.templ, backend/templates/app_layout_helpers.go, backend/internal/web/ui/app.css, backend/static/tailwind.css] +tech_stack: + added: [] + patterns: [inline JS onclick toggle, CSS class-driven collapse state, sidebar section labels] +key_files: + created: [] + modified: + - backend/templates/app_layout.templ + - backend/templates/app_layout_helpers.go + - backend/internal/web/ui/app.css + - backend/static/tailwind.css +decisions: + - Inline JS onclick on collapse button (no Alpine.js, no server round-trip — state resets on reload per D-09) + - sidebar-is-collapsed toggled on .dashboard-shell wrapper (not on .dashboard-sidebar child) — correct for CSS grid column targeting per Research Pitfall 3 + - PROJECTS section inlined directly in DashboardSidebar (SidebarProjectsSection component kept in file but no longer called) + - SidebarOrganizationFooter removed from DashboardSidebar call (moves to avatar dropdown in Plan 03) +metrics: + duration: ~10min + completed: "2026-05-17" + tasks: 3 + files: 4 +--- + +# Phase 18 Plan 02: Sidebar Rebuild Summary + +**One-liner:** Full HTML/CSS rebuild of DashboardSidebar to Figma spec — two-section structure (GENERAL + PROJECTS), 5-item nav replacing old 5-item set, collapse toggle via inline JS, collapsed-state CSS rules in app.css + regenerated tailwind.css. + +## Tasks Completed + +| # | Task | Commit | Files | +|---|------|--------|-------| +| 1 | Update sidebarPrimaryNavItems and add team icon | 2763fc1 | app_layout_helpers.go, app_layout.templ | +| 2 | Rebuild DashboardSidebar HTML with sections and collapse button | b592a02 | app_layout.templ | +| 3 | Add sidebar collapsed-state CSS and regenerate tailwind.css | 8a91183 | app.css, tailwind.css | + +## Decisions Made + +- **Inline JS onclick** on the collapse button — toggles `sidebar-is-collapsed` on `.dashboard-shell`; no Alpine.js dependency, no server round-trip, state resets on page reload per D-09 +- **Target `.dashboard-shell` for collapse CSS** — grid column must be controlled on the shell wrapper, not the sidebar child (per Research Pitfall 3) +- **PROJECTS section inlined** into DashboardSidebar body rather than delegating to `SidebarProjectsSection` — keeps the new structure flat and avoids the HR separator; the standalone component remains in the file for Plan 03 cleanup +- **SidebarOrganizationFooter no longer called** from DashboardSidebar — it moves to the avatar dropdown in Plan 03; component kept in file to avoid breaking Plan 03 which references it + +## Verification + +- `templ generate ./...` — zero errors +- `go build ./...` — zero errors +- `go test ./...` — all tests pass (backend/internal/web: 0.310s, backend/templates: 0.529s) +- `grep -c "sidebar-is-collapsed" backend/static/tailwind.css` — returns 1 +- `grep "My Tasks\|Team Members" backend/templates/app_layout_helpers.go` — shows updated nav items + +## Deviations from Plan + +None — plan executed exactly as written. + +## Known Stubs + +- `SidebarOrganizationFooter` component exists in `app_layout.templ` but is no longer called from `DashboardSidebar`. Plan 03 will repurpose or remove it when building the avatar dropdown. +- `SidebarProjectsSection` component exists but is no longer called; Plan 03 will clean up. +- The `DividerAfter` field on `sidebarNavItem` struct is unused (kept for zero-diff struct compatibility); can be removed in a later cleanup. + +## Threat Flags + +None — tablo.Color.String is user's own data interpolated into a `style` attribute, which is acceptable per T-18-02-01 disposition. CSS artifact edit-path enforced (app.css → tailwind.css pipeline, never direct edit of tailwind.css). + +## Self-Check: PASSED + +- `backend/templates/app_layout.templ` — exists, DashboardSidebar has GENERAL/PROJECTS sections and collapse button +- `backend/templates/app_layout_helpers.go` — exists, sidebarPrimaryNavItems returns 5 items with Home/My Tasks/Projects/Events/Team Members +- `backend/internal/web/ui/app.css` — exists, contains sidebar-is-collapsed block +- `backend/static/tailwind.css` — exists, grep returns 1 for sidebar-is-collapsed +- Commits 2763fc1, b592a02, 8a91183 — all present in git log