feat: implement section 9 - span annotation sidebar list

src/app/page.tsx

@@ -169,6 +169,22 @@ export default function Home() {
     setSelectedSpanId(spanId);
   };
 
+  const handleDeleteSpan = async (spanId: number) => {
+    try {
+      const response = await fetch(`/api/span-annotations/${spanId}`, {
+        method: 'DELETE',
+      });
+      if (response.ok) {
+        await fetchSpanAnnotations(activeChartId);
+        if (selectedSpanId === spanId) {
+          setSelectedSpanId(null);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to delete span annotation:', error);
+    }
+  };
+
   const handleLabelDelete = async (id: number) => {
     setAnnotations(annotations.filter((a) => a.id !== id));
     if (selectedLabelId === id) {
@@ -258,6 +274,11 @@ export default function Home() {
             onLabelSelect={handleLabelSelect}
             onLabelDelete={handleLabelDelete}
             activeChartId={activeChartId}
+            spanAnnotations={spanAnnotations}
+            spanLabelTypes={spanLabelTypes}
+            selectedSpanId={selectedSpanId}
+            onSelectSpan={handleSelectedSpanChange}
+            onDeleteSpan={handleDeleteSpan}
           />
         </div>
       </aside>