From 742c166738171f472d6764f864dc2978ee451282 Mon Sep 17 00:00:00 2001 From: Michael Chihlas Date: Mon, 9 Mar 2026 15:59:51 -0400 Subject: [PATCH] feat: add PageMeta, animation classes, and layout fixes to remaining pages Co-Authored-By: Claude Opus 4.6 --- CLAUDE.md | 5 +++++ frontend/src/components/account/AccountLayout.tsx | 2 +- frontend/src/components/layout/ViewTransitionOutlet.tsx | 2 +- frontend/src/index.css | 3 ++- frontend/src/pages/BatchStatusPage.tsx | 2 +- frontend/src/pages/FeedbackPage.tsx | 4 ++-- frontend/src/pages/GuideDetailPage.tsx | 4 ++-- frontend/src/pages/GuidesHubPage.tsx | 4 ++-- frontend/src/pages/MaintenanceFlowDetailPage.tsx | 2 +- frontend/src/pages/MySharesPage.tsx | 4 ++-- frontend/src/pages/MyTreesPage.tsx | 4 ++-- frontend/src/pages/QuickStartPage.tsx | 4 ++-- frontend/src/pages/SessionDetailPage.tsx | 2 +- frontend/src/pages/SessionHistoryPage.tsx | 4 ++-- frontend/src/pages/TreeLibraryPage.tsx | 4 ++-- 15 files changed, 28 insertions(+), 22 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 341b070f..409db054 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -42,6 +42,11 @@ When adding new pages/components: use "ResolutionFlow" branding, ice-cyan gradient accent theme, `.glass-card` / `.glass-card-static` containers, `text-foreground`/`text-muted-foreground` hierarchy. Primary actions use `bg-gradient-brand`. Pages render inside the app shell (CSS Grid: topbar + sidebar + main). Use "Flows" not "Trees" in all user-facing text; use "Projects" not "Procedures" for procedural flows. Reference [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md) for layout patterns, navigation, and component specs. +## Implementation Principles + +- Prefer correct architecture over minimal diff +- If two approaches exist, implement the one that scales, not the one that's faster to write +- Flag any "simpler approach" tradeoffs for product owner review before proceeding --- ## Current State diff --git a/frontend/src/components/account/AccountLayout.tsx b/frontend/src/components/account/AccountLayout.tsx index ec3c18f9..1659e3be 100644 --- a/frontend/src/components/account/AccountLayout.tsx +++ b/frontend/src/components/account/AccountLayout.tsx @@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom' export function AccountLayout() { return ( -
+
) diff --git a/frontend/src/components/layout/ViewTransitionOutlet.tsx b/frontend/src/components/layout/ViewTransitionOutlet.tsx index f6d8f233..5312a23a 100644 --- a/frontend/src/components/layout/ViewTransitionOutlet.tsx +++ b/frontend/src/components/layout/ViewTransitionOutlet.tsx @@ -19,7 +19,7 @@ export function ViewTransitionOutlet() { const routeKey = segments.slice(0, 2).join('/') || '/' return ( -
+
) diff --git a/frontend/src/index.css b/frontend/src/index.css index 360dcb53..e4136119 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -306,7 +306,8 @@ .main-content { min-height: 0; min-width: 0; - overflow-y: auto; + /* Each page handles its own scrolling — full-height pages use + overflow-hidden, scrollable pages use overflow-y-auto */ } @media (max-width: 767px) { diff --git a/frontend/src/pages/BatchStatusPage.tsx b/frontend/src/pages/BatchStatusPage.tsx index 0bf98bc1..7d23a6b2 100644 --- a/frontend/src/pages/BatchStatusPage.tsx +++ b/frontend/src/pages/BatchStatusPage.tsx @@ -99,7 +99,7 @@ export default function BatchStatusPage() { const progressPercent = total > 0 ? Math.round((completed / total) * 100) : 0 return ( -
+
{/* Breadcrumb */}
) } diff --git a/frontend/src/pages/GuideDetailPage.tsx b/frontend/src/pages/GuideDetailPage.tsx index 95e7c84d..a096852a 100644 --- a/frontend/src/pages/GuideDetailPage.tsx +++ b/frontend/src/pages/GuideDetailPage.tsx @@ -9,7 +9,7 @@ export default function GuideDetailPage() { if (!guide) { return ( -
+

Guide Not Found

The guide you're looking for doesn't exist.

+
{/* Breadcrumb */}
) } diff --git a/frontend/src/pages/MaintenanceFlowDetailPage.tsx b/frontend/src/pages/MaintenanceFlowDetailPage.tsx index caec519c..12d388d0 100644 --- a/frontend/src/pages/MaintenanceFlowDetailPage.tsx +++ b/frontend/src/pages/MaintenanceFlowDetailPage.tsx @@ -124,7 +124,7 @@ export default function MaintenanceFlowDetailPage() { const hasActiveBatch = recentSessions.some(s => s.started_at && !s.completed_at && s.batch_id) return ( -
+
{/* Active batch banner */} {hasActiveBatch && !bannerDismissed && ( +
{/* Back link */} @@ -244,6 +244,6 @@ export default function MySharesPage() { confirmLabel="Revoke" />
- +
) } diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx index d65b2094..1be76b7d 100644 --- a/frontend/src/pages/MyTreesPage.tsx +++ b/frontend/src/pages/MyTreesPage.tsx @@ -118,7 +118,7 @@ export function MyTreesPage() { } return ( - <> +
@@ -393,7 +393,7 @@ export function MyTreesPage() { )}
- +
) } diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx index 09d18670..b3149bea 100644 --- a/frontend/src/pages/QuickStartPage.tsx +++ b/frontend/src/pages/QuickStartPage.tsx @@ -278,7 +278,7 @@ export function QuickStartPage() { ] return ( - <> +
{/* Greeting */} @@ -649,7 +649,7 @@ export function QuickStartPage() { )}
- +
) } diff --git a/frontend/src/pages/SessionDetailPage.tsx b/frontend/src/pages/SessionDetailPage.tsx index 71710514..41e431fd 100644 --- a/frontend/src/pages/SessionDetailPage.tsx +++ b/frontend/src/pages/SessionDetailPage.tsx @@ -340,7 +340,7 @@ export function SessionDetailPage() { const outcomeConfig = session.outcome ? OUTCOME_CONFIG[session.outcome] : null return ( -
+
{/* Back nav */}