trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

sync: apply add-dark-light-mode delta specs to main specs

Browse source
This commit is contained in:
Marko Djordjevic 2026-02-13 09:37:06 +01:00
parent 3da4987f89
commit a8f9327d19
3 changed files with 172 additions and 292 deletions
Download patch file Download diff file Expand all files Collapse all files

67
openspec/specs/ui-shell/spec.md
View file

@ -1,59 +1,20 @@
## ADDED Requirements
### Requirement: Dark mode layout
The application SHALL use a dark theme based on Tailwind's Slate-900 color palette. The root layout MUST set a dark background. All UI components (sidebar, buttons, text) SHALL use colors consistent with the dark theme.
### 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: Dark theme renders
#### Scenario: Toggle button renders
- **WHEN** the application loads
- **THEN** the page background is Slate-900 (dark), text is light, and all UI elements follow the dark color scheme
- **THEN** a theme toggle button is visible at the bottom of the sidebar
### Requirement: Sidebar toolbox
The application SHALL display a fixed sidebar on the left side of the viewport. The sidebar SHALL contain tool buttons: "Label: Break Up", "Label: Break Down", "Draw Line", "Delete". Each button SHALL use a lucide-react icon and a text label. The currently active tool button SHALL be visually highlighted.
#### 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: Sidebar renders with tools
- **WHEN** the application loads
- **THEN** the sidebar displays all four tool buttons with icons and labels
#### Scenario: Active tool highlight
- **WHEN** user selects a tool
- **THEN** that tool's button is visually highlighted (distinct background/border color) and other buttons return to default state
### Requirement: Main chart area
The main content area SHALL occupy the full viewport width minus the sidebar width. The chart component MUST fill this area. The layout SHALL use CSS flexbox or grid to ensure the sidebar and chart area are side by side.
#### Scenario: Layout structure
- **WHEN** the application loads with candle data
- **THEN** the sidebar appears on the left and the chart fills the remaining space
### Requirement: File upload interface
The application SHALL provide a CSV file upload interface accessible from the sidebar. The upload component SHALL trigger the POST /api/upload endpoint. On success, the component SHALL add the newly created chart to the chart selector and set it as the active chart, triggering the chart and annotation data to refresh for the new chart.
#### Scenario: Upload via UI
- **WHEN** user selects a CSV file through the upload interface
- **THEN** the file is sent to the upload API, a new chart is created, the chart selector updates to include the new chart, and the new chart becomes active with its candles displayed
#### Scenario: Upload error display
- **WHEN** the upload API returns an error
- **THEN** the UI displays the error message to the user and no chart is created
### Requirement: Export button
The application SHALL provide an "Export" button that triggers a download of the annotations CSV. Clicking the button SHALL navigate to or fetch from the `GET /api/export` endpoint, resulting in a CSV file download.
#### Scenario: Export annotations
- **WHEN** user clicks the "Export" button
- **THEN** a CSV file named "annotations.csv" downloads containing all annotation data
### Requirement: Theme-aware Manage Annotation Types link
The "Manage Annotation Types" link in the sidebar header SHALL use theme-aware styling consistent with the rest of the application. The link SHALL NOT use hardcoded color values. It SHALL use `text-muted-foreground` and `hover:text-foreground` Tailwind classes to respect both light and dark themes.
#### Scenario: Link styling in dark mode
- **WHEN** the application is in dark mode
- **THEN** the "Manage Annotation Types" link uses muted foreground color and brightens on hover, consistent with the dark theme
#### Scenario: Link styling in light mode
- **WHEN** the application is in light mode
- **THEN** the "Manage Annotation Types" link uses muted foreground color and darkens on hover, consistent with the light theme
#### Scenario: Link visual consistency
- **WHEN** the sidebar renders
- **THEN** the "Manage Annotation Types" link does not use underline styling and visually matches other sidebar text elements
#### 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")