feat: add color support for line annotations

- Add color field to annotations schema with default blue (#3b82f6)
- Add color picker UI with 5 preset colors (red, green, blue, yellow, white)
- Pass selected color through component hierarchy (Page -> Toolbox, CandleChart -> SvgOverlay)
- Store color when creating line annotations
- Render lines with their stored color
- Update database with color column
- Preview lines show selected color during drawing

Phase 1 of LINE_DRAWING_IMPROVEMENTS.md complete

src/app/api/annotations/route.ts

@@ -26,7 +26,7 @@ export async function GET() {
 export async function POST(request: NextRequest) {
   try {
     const body = await request.json();
-    const { timestamp, label_type, geometry } = body;
+    const { timestamp, label_type, geometry, color } = body;
 
     // Validate required fields
     if (!timestamp || !label_type) {
@@ -45,6 +45,7 @@ export async function POST(request: NextRequest) {
         timestamp,
         label_type,
         geometry: geometryString,
+        color: color || '#3b82f6',
         created_at: Math.floor(Date.now() / 1000),
       })
       .returning();

src/app/page.tsx

@@ -7,6 +7,7 @@ import CandleChart, { CandleChartHandle } from '@/components/CandleChart';
 
 export default function Home() {
   const [activeTool, setActiveTool] = useState<Tool>(null);
+  const [selectedColor, setSelectedColor] = useState('#3b82f6');
   const chartRef = useRef<CandleChartHandle>(null);
 
   const handleExport = () => {
@@ -37,6 +38,8 @@ export default function Home() {
           activeTool={activeTool}
           onToolChange={setActiveTool}
           onExport={handleExport}
+          selectedColor={selectedColor}
+          onColorChange={setSelectedColor}
         />
       </aside>
 
@@ -46,6 +49,7 @@ export default function Home() {
           ref={chartRef}
           activeTool={activeTool}
           onAnnotationChange={handleAnnotationChange}
+          selectedColor={selectedColor}
         />
       </main>
     </div>