44 lines
2.5 KiB
Markdown
44 lines
2.5 KiB
Markdown
## 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.
|
|
|
|
#### Scenario: Dark theme 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
|
|
|
|
### 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: 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 UI. This MAY be a button in the sidebar or a dropzone overlay. The upload component SHALL trigger the POST /api/upload endpoint and refresh the chart data on success.
|
|
|
|
#### Scenario: Upload via UI
|
|
- **WHEN** user selects a CSV file through the upload interface
|
|
- **THEN** the file is sent to the upload API and the chart refreshes with the new data on success
|
|
|
|
#### Scenario: Upload error display
|
|
- **WHEN** the upload API returns an error
|
|
- **THEN** the UI displays the error message to the user
|
|
|
|
### 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
|