79 lines
3.3 KiB
Markdown
79 lines
3.3 KiB
Markdown
# TASK METADATA
|
|
|
|
- **Target Files:** `ui/components/Layout.tsx`,
|
|
`ui/components/AuthenticatedLayout.tsx`, `ui/components/AdminLayout.tsx`
|
|
- **Core Objective:** Implement a unified CSS custom property design token
|
|
layer, dark/light theme adaptation, and dual-mode responsive layout shell
|
|
(fixed mobile bottom navigation + desktop sticky header).
|
|
- **Dependencies:**
|
|
`docs/superpowers/specs/2026-08-24-mobile-first-ui-revamp-design.md`
|
|
- **Additional Important Notes:** Must remain 100% pure Hono SSR JSX (zero React
|
|
runtime dependencies) and support mobile safe-area insets
|
|
(`env(safe-area-inset-bottom)`).
|
|
|
|
---
|
|
|
|
## 1. TASK METADATA
|
|
|
|
The header block specifies the target layout templates, core objective,
|
|
dependencies, and constraints.
|
|
|
|
## 2. Architectural Considerations & Risks
|
|
|
|
### Risks
|
|
|
|
- **Content Clipping Behind Fixed Bottom Navigation:** If the bottom navigation
|
|
bar is fixed to the bottom of the viewport on mobile without sufficient
|
|
padding on the `<main>` container, page content (such as action buttons or
|
|
footer links) could be obscured.
|
|
- _Mitigation:_ Explicitly set
|
|
`padding-bottom: calc(4.5rem + env(safe-area-inset-bottom))` on the main
|
|
layout container.
|
|
- **Flash of Unstyled Content / Layout Shift:** Inlining the design system
|
|
tokens into SSR JSX `<style>` tags ensures zero-latency stylesheet loading and
|
|
eliminates FOUC on mobile connections.
|
|
- **Theme Inconsistency:** Hardcoded colors across sub-components can cause
|
|
visual defects when switching between light and dark modes.
|
|
- _Mitigation:_ Standardize all colors to CSS custom properties
|
|
(`var(--surface-canvas)`, `var(--text-primary)`, `var(--border-subtle)`,
|
|
etc.).
|
|
|
|
### Alternatives
|
|
|
|
- **External CSS Bundle vs Inline SSR Style Block:** Using an external
|
|
stylesheet requires extra HTTP roundtrips and cache-busting logic. Embedding
|
|
the design tokens directly in the root layout preserves the zero-dependency,
|
|
ultra-low-latency SSR architecture of Auth-Yes.
|
|
|
|
## 3. Proposed Implementation
|
|
|
|
### Phase 1: Global CSS Design Tokens & Base Theme
|
|
|
|
1. Define `:root` and `@media (prefers-color-scheme: dark)` CSS custom
|
|
properties in `ui/components/Layout.tsx` and
|
|
`ui/components/AuthenticatedLayout.tsx`.
|
|
2. Include color tokens (`--primary`, `--surface-canvas`, `--surface-card`,
|
|
`--border-subtle`, `--text-primary`), elevation shadows (`--shadow-sm`,
|
|
`--shadow-md`), and touch geometries (`--touch-target-min: 48px`,
|
|
`--radius-md: 10px`).
|
|
|
|
### Phase 2: Dual-Mode Navigation Shell
|
|
|
|
1. In `ui/components/AuthenticatedLayout.tsx`:
|
|
- On screens `< 768px`: Render fixed bottom navigation bar containing 4
|
|
primary destinations (Launchpad, Sessions, Passkeys, and conditionally
|
|
Admin Console).
|
|
- Render compact top app bar with Auth-Yes glyph, current screen title, and
|
|
quick logout button.
|
|
- On screens `≥ 768px`: Hide bottom navigation and render full desktop sticky
|
|
header with active pill tabs.
|
|
2. In `ui/components/AdminLayout.tsx`:
|
|
- Implement horizontal scrolling segmented pill sub-navigation for mobile
|
|
admin tools (_Users_, _Invites_, _Apps_, _Roles_, _Audit Logs_).
|
|
|
|
### Phase 3: Verification & Quality Gates
|
|
|
|
1. Run `deno fmt ui/**/*.tsx`.
|
|
2. Run `deno task lint` and `deno task check`.
|
|
3. Run `deno task test` to ensure zero SSR regressions.
|