docs(02-02): complete layout shell plan (header + footer + default layout)

2026-04-08 16:27:02 +02:00
parent c320085435
commit d424084b46
4 changed files with 80 additions and 16 deletions
@@ -0,0 +1,62 @@
+---
+phase: 02-ssr-shell
+plan: 02
+subsystem: layout-header-footer
+tags: [header, footer, layout, i18n-toggle, color-mode, mobile-drawer, a11y]
+dependency_graph:
+  requires: [02-01]
+  provides: [app-header, app-footer, default-layout, locale-head]
+  affects: [app/app.vue, app/locales/fr.json, app/locales/en.json]
+tech_stack:
+  added: []
+  patterns: [useSetLocale, useColorMode, useLocaleHead, UDrawer]
+key_files:
+  created:
+    - app/components/layout/AppHeader.vue
+    - app/components/layout/AppFooter.vue
+    - app/layouts/default.vue
+  modified:
+    - app/app.vue
+    - app/locales/fr.json
+    - app/locales/en.json
+decisions:
+  - "Language toggle shows opposite locale text (FR when en, EN when fr) per D-04"
+  - "Renamed a11y.github key to a11y.gitea in both locale files to match actual Gitea link"
+  - "Social icons: Gitea + LinkedIn + Fiverr per user correction over D-05"
+metrics:
+  duration: 112s
+  completed: 2026-04-08
+---
+
+# Phase 02 Plan 02: Layout Shell (Header + Footer + Default Layout) Summary
+
+Sticky AppHeader with desktop nav, FR/EN text toggle (useSetLocale), dark/light icon toggle (useColorMode), mobile UDrawer; AppFooter with copyright + Gitea/LinkedIn/Fiverr social icons; default.vue layout wrapping header+slot+footer; app.vue updated with useLocaleHead for global hreflang/canonical.
+
+## Tasks Completed
+
+| Task | Name | Commit | Files |
+|------|------|--------|-------|
+| 1 | AppHeader with nav, language toggle, theme toggle, mobile drawer | 23fa399 | app/components/layout/AppHeader.vue |
+| 2 | AppFooter + default layout + app.vue update | cfe0180 | app/components/layout/AppFooter.vue, app/layouts/default.vue, app/app.vue, app/locales/fr.json, app/locales/en.json |
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 2 - Correctness] Renamed a11y.github to a11y.gitea in locale files**
+- **Found during:** Task 2
+- **Issue:** a11y.github key text referenced "GitHub" but the actual link points to Gitea (gitea.kamisama.ovh)
+- **Fix:** Renamed key from `a11y.github` to `a11y.gitea` and updated text to say "Gitea" in both fr.json and en.json
+- **Files modified:** app/locales/fr.json, app/locales/en.json
+- **Commit:** cfe0180
+
+## Verification Results
+
+- AppHeader contains sticky, z-[1020], useColorMode, useSetLocale, UDrawer, heroicons icons: PASS
+- AppHeader has min-w-11 min-h-11 touch targets, focus-visible:ring-2, aria-current: PASS
+- AppFooter contains simple-icons:gitea, simple-icons:linkedin, simple-icons:fiverr: PASS
+- AppFooter has target="_blank" rel="noopener noreferrer": PASS
+- default.vue contains AppHeader, AppFooter, slot: PASS
+- app.vue contains useLocaleHead, NuxtLayout, no NuxtRouteAnnouncer: PASS
+
+## Self-Check: PASSED