Skip to content

feat(web): AppShell layout with topbar - #34

Closed
mariuspruvot wants to merge 3 commits into
stagingfrom
feat/layout-shell
Closed

feat(web): AppShell layout with topbar#34
mariuspruvot wants to merge 3 commits into
stagingfrom
feat/layout-shell

Conversation

@mariuspruvot

Copy link
Copy Markdown
Owner

Summary

  • Add AppShell component: grain overlay + sticky topbar + max-width content area
  • Add Topbar: logo, live status dot, user avatar, sign out button
  • Wrap all protected routes in AppShell (landing/auth remain full-bleed)

Test plan

  • All 78 tests pass
  • ESLint clean
  • Build succeeds
  • Visual review: topbar visible on all authenticated pages

Depends on: #33

Replace the existing color palette with the warm dark Direction E theme
(#14110e bg, #e2a039 amber accent, #f2ede4 bone text). Swap primary mono
font to JetBrains Mono, add grain overlay utility, and overline class.
Old token names kept as deprecated aliases for backward compat.
Reusable UI primitives matching Direction E design spec:
Button (primary/secondary/ghost/danger), Card, Chip (status variants),
StatCard, TerminalBlock (macOS chrome), GrainOverlay, Overline, Dot.
All components use the new design tokens and Tailwind classes.
Shared layout wrapping all protected routes: 56px sticky topbar
(logo, live dot, user avatar, sign out) + max-width centered content
+ warm grain overlay. Landing and auth callback remain full-bleed.
@helprs-prod

helprs-prod Bot commented Apr 20, 2026

Copy link
Copy Markdown

helPRs session created for this PR.

Skill: challenge-me | Open session

@mariuspruvot
mariuspruvot deleted the feat/layout-shell branch July 30, 2026 16:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant