trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions
candle-annotator/openspec/changes/archive/2026-02-20-user-accounts/specs/ui-shell/spec.md
Marko Djordjevic 5fb9733bd6 Archive user-accounts change to openspec/changes/archive/ 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-20 18:50:36 +01:00

3.2 KiB
Raw Blame History

MODIFIED Requirements

Requirement: Theme toggle in sidebar

The UI shell SHALL include a theme toggle button in the sidebar. The button SHALL be positioned at the bottom of the sidebar, visually separated from the tool buttons.

Scenario: Toggle button renders

  • WHEN the application loads at /app
  • THEN a theme toggle button is visible at the bottom of the sidebar

Scenario: Toggle button displays correct icon

  • WHEN the current theme mode is "system"
  • THEN the button shows a monitor icon (lucide-react Monitor)
  • WHEN the current theme mode is "light"
  • THEN the button shows a sun icon (lucide-react Sun)
  • WHEN the current theme mode is "dark"
  • THEN the button shows a moon icon (lucide-react Moon)

Scenario: Toggle button has tooltip

  • WHEN user hovers over the theme toggle button
  • THEN a tooltip displays the current mode name (e.g., "Theme: System", "Theme: Light", "Theme: Dark")

ADDED Requirements

Requirement: App workspace route at /app

The main workspace page SHALL be served at /app (route src/app/app/page.tsx). The existing src/app/page.tsx content (chart, annotations, toolbox, panels) SHALL move to this new route. The /app route SHALL be protected by the auth proxy.

Scenario: Workspace at /app

  • WHEN an authenticated user navigates to /app
  • THEN the full workspace renders (chart, toolbox, panels — same as current /)

Scenario: Unauthenticated redirect

  • WHEN an unauthenticated user navigates to /app
  • THEN they are redirected to /login

Requirement: App layout with user menu

The /app layout SHALL include a top navigation bar with the CandleAnnotator logo (linking to /app), and a user menu on the right side. The user menu SHALL show the user's name/email and provide links to Settings and Sign Out.

Scenario: User menu displays identity

  • WHEN an authenticated user views the app
  • THEN the top nav shows the user's name or email with an avatar/initial

Scenario: User menu dropdown

  • WHEN a user clicks the user menu
  • THEN a dropdown shows: "Settings" (links to /app/settings) and "Sign Out" (calls signOut())

Scenario: Sign out

  • WHEN a user clicks "Sign Out" in the user menu
  • THEN the session is destroyed and the user is redirected to /login

Requirement: Settings link in sidebar

The sidebar SHALL include a settings gear icon button that navigates to /app/settings.

Scenario: Settings button renders

  • WHEN the app workspace loads
  • THEN a settings icon button is visible in the sidebar (near the theme toggle)

Scenario: Navigate to settings

  • WHEN a user clicks the settings icon
  • THEN they are navigated to /app/settings

Requirement: Public page layout

Public pages (/, /login, /register) SHALL use a separate layout (src/app/(public)/layout.tsx) without the workspace sidebar, toolbox, or user menu. They SHALL share the same root layout (fonts, ThemeProvider).

Scenario: Public layout structure

  • WHEN a user views a public page
  • THEN the page renders without sidebar, toolbox, or user menu
  • AND the root layout fonts and theme provider are still active