feat: implement section 9 - span annotation sidebar list

src/components/SpanAnnotationList.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import { Trash2, ChevronDown, ChevronUp } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface SpanAnnotation {
+  id: number;
+  chart_id: number;
+  start_time: number;
+  end_time: number;
+  label: string;
+  confidence: number | null;
+  outcome: string | null;
+  notes: string | null;
+  sub_spans: any;
+  color: string;
+  created_at: number;
+}
+
+interface SpanLabelType {
+  id: number;
+  name: string;
+  display_name: string;
+  color: string;
+  hotkey: string | null;
+  is_active: number;
+  sort_order: number;
+  created_at: number;
+}
+
+interface SpanAnnotationListProps {
+  spanAnnotations: SpanAnnotation[];
+  spanLabelTypes: SpanLabelType[];
+  selectedSpanId: number | null;
+  onSelectSpan: (spanId: number) => void;
+  onDeleteSpan: (spanId: number) => void;
+}
+
+export default function SpanAnnotationList({
+  spanAnnotations,
+  spanLabelTypes,
+  selectedSpanId,
+  onSelectSpan,
+  onDeleteSpan,
+}: SpanAnnotationListProps) {
+  const [expanded, setExpanded] = useState(true);
+
+  // Format timestamp to readable date/time
+  const formatTime = (timestamp: number) => {
+    return new Date(timestamp * 1000).toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  // Get display name and color for label
+  const getLabelInfo = (labelName: string) => {
+    const labelType = spanLabelTypes.find((t) => t.name === labelName);
+    return {
+      displayName: labelType?.display_name || labelName.replace(/_/g, ' ').toUpperCase(),
+      color: labelType?.color || '#2196F3',
+    };
+  };
+
+  // Calculate count per label type
+  const labelCounts = spanAnnotations.reduce((acc, span) => {
+    acc[span.label] = (acc[span.label] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  // Sort by start_time descending (most recent first)
+  const sortedSpans = [...spanAnnotations].sort((a, b) => b.start_time - a.start_time);
+
+  return (
+    <div className="flex flex-col">
+      {/* Header with collapse toggle */}
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between px-2 py-2 hover:bg-secondary/50 rounded"
+      >
+        <span className="text-sm font-semibold text-foreground">
+          Span Annotations ({spanAnnotations.length})
+        </span>
+        {expanded ? (
+          <ChevronUp className="w-4 h-4" />
+        ) : (
+          <ChevronDown className="w-4 h-4" />
+        )}
+      </button>
+
+      {expanded && (
+        <>
+          {/* Count summary */}
+          {spanAnnotations.length > 0 && (
+            <div className="text-xs text-muted-foreground px-2 mb-2">
+              {Object.entries(labelCounts).map(([labelName, count], idx) => {
+                const { displayName } = getLabelInfo(labelName);
+                return (
+                  <span key={labelName}>
+                    {idx > 0 && ' | '}
+                    {displayName}: {count}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Empty state */}
+          {spanAnnotations.length === 0 ? (
+            <div className="text-xs text-muted-foreground px-2 py-4 text-center">
+              No span annotations yet. Use the Span tool to select candle ranges.
+            </div>
+          ) : (
+            /* Span list */
+            <div className="flex flex-col gap-1 max-h-64 overflow-y-auto">
+              {sortedSpans.map((span) => {
+                const { displayName, color } = getLabelInfo(span.label);
+                const isSelected = span.id === selectedSpanId;
+
+                return (
+                  <div
+                    key={span.id}
+                    className={`
+                      flex items-start gap-2 p-2 rounded cursor-pointer
+                      transition-colors
+                      ${
+                        isSelected
+                          ? 'bg-primary/10 border border-primary'
+                          : 'hover:bg-secondary/50 border border-transparent'
+                      }
+                    `}
+                    onClick={() => onSelectSpan(span.id)}
+                  >
+                    <div className="flex-1 min-w-0">
+                      {/* Time range */}
+                      <div className="text-xs text-muted-foreground">
+                        {formatTime(span.start_time)} → {formatTime(span.end_time)}
+                      </div>
+
+                      {/* Label badge */}
+                      <div className="mt-1">
+                        <span
+                          className="px-2 py-0.5 rounded text-xs font-medium text-white"
+                          style={{ backgroundColor: color }}
+                        >
+                          {displayName}
+                        </span>
+                      </div>
+
+                      {/* Additional info */}
+                      {(span.confidence || span.outcome) && (
+                        <div className="mt-1 text-xs text-muted-foreground flex gap-2">
+                          {span.confidence && <span>Confidence: {span.confidence}</span>}
+                          {span.outcome && <span>Outcome: {span.outcome}</span>}
+                        </div>
+                      )}
+
+                      {/* Notes preview */}
+                      {span.notes && (
+                        <div className="mt-1 text-xs text-muted-foreground truncate">
+                          {span.notes}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Delete button */}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 w-6 p-0 hover:bg-destructive/20 hover:text-destructive"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteSpan(span.id);
+                      }}
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}