4121a87875
- Created new chart-management capability spec - Updated data-ingestion: chart-scoped candles, duplicate filename handling - Updated backend-api: all endpoints gain chartId parameter, chart CRUD - Updated chart-canvas: chart switching, scoped data fetching - Updated label-management: annotations scoped to active chart - Updated ui-shell: upload creates/selects chart, theme-aware link styling
3.7 KiB
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 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