Revert Zustand persist middleware approach and restore AuthInitializer

- Remove persist middleware from authStore (causing hooks timing issues) - Restore original AuthInitializer component pattern - Keep good Phase 3 optimizations: - Theme FOUC fix (inline script) - React Query refetchOnWindowFocus disabled - Code splitting for dev/auth components - Shared form components (FormField, useFormError) - Store location in lib/stores
2025-11-02 14:52:12 +01:00
parent 6d1b730ae7
commit 68e28e4c76
22 changed files with 2822 additions and 398 deletions
--- a/ANALYSIS_SUMMARY.md
+++ b/ANALYSIS_SUMMARY.md
@@ -0,0 +1,346 @@
+# /dev/ Pages Structure Analysis - Summary
+
+## Files Generated
+
+This analysis has produced **3 comprehensive documents**:
+
+1. **DEV_PAGES_STRUCTURE_ANALYSIS.md** (758 lines)
+   - Complete technical analysis of all 7 pages
+   - Detailed structure for each page
+   - 8 identified inconsistencies
+   - 8 specific recommendations
+   - Code duplication analysis
+   - Complete refactor proposal
+
+2. **DEV_PAGES_QUICK_REFERENCE.md** (400+ lines)
+   - Visual ASCII diagrams of page structures
+   - Quick-find tables and matrices
+   - Implementation roadmap
+   - Before/after code examples
+   - Testing checklist
+   - File modification guide
+
+3. **COMPONENT_IMPLEMENTATION_GUIDE.md** (600+ lines)
+   - Complete code for 5 new components
+   - Detailed usage examples
+   - Step-by-step implementation checklist
+   - Migration instructions for each page
+   - Testing commands
+
+---
+
+## Key Findings at a Glance
+
+### Problem Statement
+The `/dev/` pages exhibit **significant structural inconsistencies** that result in:
+- 144 lines of duplicated code
+- Inconsistent header implementations (3 pages)
+- Inconsistent footer implementations (3 pages)
+- No breadcrumb navigation
+- Inconsistent page title display
+
+### Scope
+- **Pages Analyzed:** 7
+- **Components Analyzed:** 6
+- **Lines of Code Reviewed:** 2,500+
+- **Inconsistencies Found:** 8
+- **Code Duplication:** 144 lines
+- **Duplicated Components:** Headers (3) + Footers (3)
+
+---
+
+## What's Wrong (The 8 Inconsistencies)
+
+1. **Header Implementation (CRITICAL)**
+   - Forms, Layouts, Spacing: Custom sticky headers
+   - Hub, Components, Docs: Inherited from DevLayout
+   - Problem: 40 lines × 3 pages = 120 lines duplicated
+
+2. **Page Title/Breadcrumbs (CRITICAL)**
+   - No breadcrumb navigation anywhere
+   - Page titles shown in: Hero sections, Headers, Frontmatter
+   - Missing: Consistent breadcrumb pattern
+
+3. **Footer Implementation (INCONSISTENT)**
+   - 3 pages have footers (Forms, Layouts, Spacing)
+   - 4 pages have no footers (Hub, Components, Docs, Dynamic)
+   - Problem: 8 lines × 3 pages = 24 lines duplicated
+
+4. **Page Layout Wrapper (INCONSISTENT)**
+   - Forms/Layouts/Spacing: min-h-screen wrapper
+   - Hub/Docs: No wrapper or different structure
+   - Components: No wrapper at all
+
+5. **Content Container Padding (MINOR)**
+   - py-12 on some pages
+   - py-8 on other pages
+   - Should be standardized
+
+6. **'use client' Directive (INCONSISTENT)**
+   - Forms: Uses 'use client'
+   - Others: Server components (inconsistent pattern)
+
+7. **Component Loading/Code Splitting (INCONSISTENT)**
+   - Components: Dynamic with loading state
+   - Spacing: Dynamic with skeleton loading
+   - Forms/Layouts: No dynamic imports
+   - Should use consistent pattern
+
+8. **ExampleSection Organization (INCONSISTENT)**
+   - Forms/Layouts/Spacing: Use ExampleSection
+   - Hub/Components/Docs: Don't use ExampleSection
+
+---
+
+## Proposed Solution
+
+Create **5 new reusable components** to replace the duplicated code:
+
+```
+NEW COMPONENTS:
+├── DevPageHeader.tsx      - Shared header (replaces 120 lines)
+├── DevPageFooter.tsx      - Shared footer (replaces 24 lines)
+├── DevBreadcrumbs.tsx     - Navigation breadcrumbs (new feature)
+├── DevPageLayout.tsx      - Complete wrapper (combines above)
+└── ExampleLoadingSkeleton.tsx - Consistent loading states (new feature)
+```
+
+**Impact:**
+- Eliminates 144 lines of code duplication
+- Adds breadcrumb navigation to all pages
+- Standardizes page structure
+- Improves maintainability
+- Better UX consistency
+
+---
+
+## Implementation Plan
+
+### Phase 1: Extract Components (1-2 hours)
+Create the 5 new components with full TypeScript types and documentation.
+
+### Phase 2: Refactor Pages (2-3 hours)
+Update the 7 pages to use new components:
+- Forms page: Remove 40 lines of header/footer code
+- Layouts page: Remove 40 lines of header/footer code
+- Spacing page: Remove 40 lines of header/footer code
+- Components page: Add breadcrumbs & footer
+- Hub page: Add footer
+- Docs page: Add footer
+- Docs Dynamic: Add breadcrumbs & footer
+
+### Phase 3: Enhance (1-2 hours)
+- Add breadcrumbs to all detail pages
+- Standardize dynamic imports
+- Update loading states
+
+### Phase 4: Polish (30-60 min)
+- Test all navigation flows
+- Verify mobile responsiveness
+- Check accessibility
+
+**Total Time Estimate: 4-8 hours**
+
+---
+
+## Page Comparison Matrix
+
+### Current State
+```
+Feature              Hub  Comp  Forms  Layout Spacing Docs  DocsDyn
+Custom Header        ·    ·      ✓      ✓      ✓      ·     ·
+Back Button          ·    ·      ✓      ✓      ✓      ·     ·
+Page Title           H    ·      H      H      H      H     FM
+Breadcrumbs          ·    ·      ·      ·      ·      ·     ·
+Footer               ·    ·      ✓      ✓      ✓      ·     ·
+Hero Section         ✓    ·      ·      ·      ·      ✓     ·
+Code Duplication     Low  Low    HIGH   HIGH   HIGH   Low   Low
+```
+
+### Target State
+```
+Feature              Hub  Comp  Forms  Layout Spacing Docs  DocsDyn
+Custom Header        ·    ·      ✗      ✗      ✗      ·     ·
+Back Button          ·    ✓      ✓      ✓      ✓      ·     ✓
+Page Title           H    ✓      ✓      ✓      ✓      H     FM
+Breadcrumbs          ·    ✓      ✓      ✓      ✓      ·     ✓
+Footer               FTR  FTR    ✓      ✓      ✓      FTR   FTR
+Hero Section         ✓    ·      ·      ·      ·      ✓     ·
+Code Duplication     -    -      -      -      -      -     -
+```
+
+---
+
+## Code Metrics
+
+### Before Implementation
+- Total components: 6
+- Duplicated lines: 144
+- Inconsistent patterns: 8
+- Pages without footers: 4
+- Pages without breadcrumbs: 7
+
+### After Implementation
+- Total components: 10 (adding 4 reusable components)
+- Duplicated lines: 0
+- Inconsistent patterns: 0
+- Pages without footers: 0
+- Pages without breadcrumbs: 0
+
+### Bundle Impact
+- New code: ~2-3 KB
+- Removed code: ~6 KB
+- Net savings: ~3-4 KB
+
+---
+
+## File Changes Summary
+
+### Files to Create
+1. `src/components/dev/DevPageHeader.tsx`
+2. `src/components/dev/DevBreadcrumbs.tsx`
+3. `src/components/dev/DevPageFooter.tsx`
+4. `src/components/dev/DevPageLayout.tsx`
+5. `src/components/dev/ExampleLoadingSkeleton.tsx`
+
+### Files to Modify
+1. `src/app/dev/page.tsx` - Add footer
+2. `src/app/dev/components/page.tsx` - Add breadcrumbs/footer
+3. `src/app/dev/forms/page.tsx` - Refactor with DevPageLayout
+4. `src/app/dev/layouts/page.tsx` - Refactor with DevPageLayout
+5. `src/app/dev/spacing/page.tsx` - Refactor with DevPageLayout
+6. `src/app/dev/docs/page.tsx` - Add footer
+7. `src/app/dev/docs/design-system/[...slug]/page.tsx` - Add breadcrumbs/footer
+
+### Files to Keep As-Is
+1. `src/app/dev/layout.tsx`
+2. `src/components/dev/DevLayout.tsx`
+3. `src/components/dev/Example.tsx`
+4. `src/components/dev/BeforeAfter.tsx`
+5. `src/components/dev/CodeSnippet.tsx`
+6. `src/components/dev/ComponentShowcase.tsx`
+
+---
+
+## How to Use These Documents
+
+### For Quick Overview
+→ Read **DEV_PAGES_QUICK_REFERENCE.md**
+- Visual diagrams
+- Quick matrices
+- Implementation roadmap
+
+### For Complete Details
+→ Read **DEV_PAGES_STRUCTURE_ANALYSIS.md**
+- Deep technical analysis
+- Detailed comparison tables
+- Complete recommendations
+
+### For Implementation
+→ Read **COMPONENT_IMPLEMENTATION_GUIDE.md**
+- Copy-paste ready code
+- Step-by-step checklist
+- Usage examples
+
+---
+
+## Pages Analyzed
+
+1. `/dev/page.tsx` (Design System Hub)
+   - Server component
+   - Hero section with 3 content areas
+   - No header, footer, or breadcrumbs
+   - Status: Add footer
+
+2. `/dev/components/page.tsx` (Component Showcase)
+   - Server component
+   - Minimal structure (just ComponentShowcase wrapper)
+   - No header, footer, breadcrumbs, or title
+   - Status: Add all
+
+3. `/dev/forms/page.tsx` (Form Patterns)
+   - Client component
+   - Custom sticky header + footer
+   - 6 ExampleSections
+   - Status: Refactor to use DevPageLayout
+
+4. `/dev/layouts/page.tsx` (Layout Patterns)
+   - Server component
+   - Custom sticky header + footer
+   - 7 ExampleSections
+   - Status: Refactor to use DevPageLayout
+
+5. `/dev/spacing/page.tsx` (Spacing Patterns)
+   - Server component
+   - Custom sticky header + footer
+   - 7 ExampleSections
+   - Dynamic imports with skeleton loading
+   - Status: Refactor to use DevPageLayout
+
+6. `/dev/docs/page.tsx` (Documentation Hub)
+   - Server component
+   - Hero section with 3 doc sections
+   - No header, footer, or breadcrumbs
+   - Status: Add footer
+
+7. `/dev/docs/design-system/[...slug]/page.tsx` (Dynamic Docs)
+   - Server component
+   - Reads markdown files
+   - Minimal structure
+   - No breadcrumbs or footer
+   - Status: Add both
+
+---
+
+## Success Criteria
+
+After implementation, all pages should:
+- [ ] Have consistent header styling
+- [ ] Show breadcrumb navigation (except Hub)
+- [ ] Have page titles visible
+- [ ] Have footers with documentation links
+- [ ] Back buttons work on detail pages
+- [ ] Global navigation is accessible
+- [ ] Mobile layout is responsive
+- [ ] No console errors
+- [ ] Build passes without warnings
+- [ ] E2E tests pass
+
+---
+
+## Next Steps
+
+1. Review these documents with your team
+2. Prioritize implementation phases
+3. Create the 5 new components
+4. Refactor the 7 pages
+5. Test thoroughly
+6. Commit changes with detailed commit message
+
+---
+
+## Related Resources
+
+- **CLAUDE.md** - Project guidelines and conventions
+- **frontend/docs/design-system/** - Design system documentation
+- **frontend/src/components/dev/** - Current dev components
+- **frontend/src/app/dev/** - All dev pages
+
+---
+
+## Questions?
+
+Key questions answered in the detailed documents:
+
+- **Why create new components?** DRY principle - eliminate 144 lines of duplication
+- **Why breadcrumbs?** Better navigation for nested routes
+- **Why standardize footers?** Consistent UX across all pages
+- **How long will this take?** 4-8 hours total (4 phases)
+- **Will this break anything?** No - only adding/refactoring, not removing features
+- **Should I do all pages at once?** Recommended: Phase 1 (components) + Phase 2 (pages) = 3-5 hours
+
+---
+
+Generated: November 2, 2025
+Analysis Type: Very Thorough (Complete structure analysis)
+Scope: All 7 pages under /dev/ route