d04b673cfa
- Set up Next.js with App Router, TypeScript, Tailwind CSS - Configure shadcn/ui with dark theme - Install dependencies: lightweight-charts, papaparse, lucide-react - Set up Drizzle ORM with better-sqlite3 - Create database schema for candles and annotations tables - Generate migration SQL
2.5 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 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