feat: improve stats dashboard and annotation settings

stats/src/components/sessions/SessionRow.tsx

@@ -1,10 +1,6 @@
 import { useState } from 'react';
 import { BASE_URL } from '../../lib/api-client';
-import {
-  formatDuration,
-  formatRelativeDate,
-  formatNumber,
-} from '../../lib/formatters';
+import { formatDuration, formatRelativeDate, formatNumber } from '../../lib/formatters';
 import type { SessionSummary } from '../../types/stats';
 
 interface SessionRowProps {
@@ -12,6 +8,8 @@ interface SessionRowProps {
   isExpanded: boolean;
   detailsId: string;
   onToggle: () => void;
+  onDelete: () => void;
+  deleteDisabled?: boolean;
 }
 
 function CoverThumbnail({ videoId, title }: { videoId: number | null; title: string }) {
@@ -37,40 +35,63 @@ function CoverThumbnail({ videoId, title }: { videoId: number | null; title: str
   );
 }
 
-export function SessionRow({ session, isExpanded, detailsId, onToggle }: SessionRowProps) {
+export function SessionRow({
+  session,
+  isExpanded,
+  detailsId,
+  onToggle,
+  onDelete,
+  deleteDisabled = false,
+}: SessionRowProps) {
   return (
-    <button
-      type="button"
-      onClick={onToggle}
-      aria-expanded={isExpanded}
-      aria-controls={detailsId}
-      className="w-full bg-ctp-surface0 border border-ctp-surface1 rounded-lg p-3 flex items-center gap-3 hover:border-ctp-surface2 transition-colors text-left"
-    >
-      <CoverThumbnail videoId={session.videoId} title={session.canonicalTitle ?? 'Unknown'} />
-      <div className="min-w-0 flex-1">
-        <div className="text-sm font-medium text-ctp-text truncate">
-          {session.canonicalTitle ?? 'Unknown Media'}
-        </div>
-        <div className="text-xs text-ctp-overlay2">
-          {formatRelativeDate(session.startedAtMs)} · {formatDuration(session.activeWatchedMs)}{' '}
-          active
-        </div>
-      </div>
-      <div className="flex gap-4 text-xs text-center shrink-0">
-        <div>
-          <div className="text-ctp-green font-medium">{formatNumber(session.cardsMined)}</div>
-          <div className="text-ctp-overlay2">cards</div>
-        </div>
-        <div>
-          <div className="text-ctp-mauve font-medium">{formatNumber(session.wordsSeen)}</div>
-          <div className="text-ctp-overlay2">words</div>
-        </div>
-      </div>
-      <div
-        className={`text-ctp-blue text-xs transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+    <div className="relative group">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={isExpanded}
+        aria-controls={detailsId}
+        className="w-full bg-ctp-surface0 border border-ctp-surface1 rounded-lg p-3 pr-12 flex items-center gap-3 hover:border-ctp-surface2 transition-colors text-left"
       >
-        {'\u25B8'}
-      </div>
-    </button>
+        <CoverThumbnail videoId={session.videoId} title={session.canonicalTitle ?? 'Unknown'} />
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium text-ctp-text truncate">
+            {session.canonicalTitle ?? 'Unknown Media'}
+          </div>
+          <div className="text-xs text-ctp-overlay2">
+            {formatRelativeDate(session.startedAtMs)} · {formatDuration(session.activeWatchedMs)}{' '}
+            active
+          </div>
+        </div>
+        <div className="flex gap-4 text-xs text-center shrink-0">
+          <div>
+            <div className="text-ctp-green font-medium font-mono tabular-nums">
+              {formatNumber(session.cardsMined)}
+            </div>
+            <div className="text-ctp-overlay2">cards</div>
+          </div>
+          <div>
+            <div className="text-ctp-mauve font-medium font-mono tabular-nums">
+              {formatNumber(session.wordsSeen)}
+            </div>
+            <div className="text-ctp-overlay2">words</div>
+          </div>
+        </div>
+        <div
+          className={`text-ctp-blue text-xs transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+        >
+          {'\u25B8'}
+        </div>
+      </button>
+      <button
+        type="button"
+        onClick={onDelete}
+        disabled={deleteDisabled}
+        aria-label={`Delete session ${session.canonicalTitle ?? 'Unknown Media'}`}
+        className="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 rounded border border-ctp-surface2 text-transparent hover:border-ctp-red/50 hover:text-ctp-red hover:bg-ctp-red/10 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100 flex items-center justify-center disabled:opacity-40 disabled:cursor-not-allowed"
+        title="Delete session"
+      >
+        {'\u2715'}
+      </button>
+    </div>
   );
 }

stats/src/components/sessions/SessionsTab.tsx

@@ -1,7 +1,9 @@
-import { useState, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useSessions } from '../../hooks/useSessions';
 import { SessionRow } from './SessionRow';
 import { SessionDetail } from './SessionDetail';
+import { apiClient } from '../../lib/api-client';
+import { confirmSessionDelete } from '../../lib/delete-confirm';
 import { todayLocalDay, localDayFromMs } from '../../lib/formatters';
 import type { SessionSummary } from '../../types/stats';
 
@@ -37,17 +39,38 @@ export function SessionsTab() {
   const { sessions, loading, error } = useSessions();
   const [expandedId, setExpandedId] = useState<number | null>(null);
   const [search, setSearch] = useState('');
+  const [visibleSessions, setVisibleSessions] = useState<SessionSummary[]>([]);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [deletingSessionId, setDeletingSessionId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setVisibleSessions(sessions);
+  }, [sessions]);
 
   const filtered = useMemo(() => {
     const q = search.trim().toLowerCase();
-    if (!q) return sessions;
-    return sessions.filter(
-      (s) => s.canonicalTitle?.toLowerCase().includes(q),
-    );
-  }, [sessions, search]);
+    if (!q) return visibleSessions;
+    return visibleSessions.filter((s) => s.canonicalTitle?.toLowerCase().includes(q));
+  }, [visibleSessions, search]);
 
   const groups = useMemo(() => groupSessionsByDay(filtered), [filtered]);
 
+  const handleDeleteSession = async (session: SessionSummary) => {
+    if (!confirmSessionDelete()) return;
+
+    setDeleteError(null);
+    setDeletingSessionId(session.sessionId);
+    try {
+      await apiClient.deleteSession(session.sessionId);
+      setVisibleSessions((prev) => prev.filter((item) => item.sessionId !== session.sessionId));
+      setExpandedId((prev) => (prev === session.sessionId ? null : prev));
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : 'Failed to delete session.');
+    } finally {
+      setDeletingSessionId(null);
+    }
+  };
+
   if (loading) return <div className="text-ctp-overlay2 p-4">Loading...</div>;
   if (error) return <div className="text-ctp-red p-4">Error: {error}</div>;
 
@@ -61,11 +84,16 @@ export function SessionsTab() {
         className="w-full bg-ctp-surface0 border border-ctp-surface1 rounded-lg px-3 py-2 text-sm text-ctp-text placeholder:text-ctp-overlay2 focus:outline-none focus:border-ctp-blue"
       />
 
+      {deleteError ? <div className="text-sm text-ctp-red">{deleteError}</div> : null}
+
       {Array.from(groups.entries()).map(([dayLabel, daySessions]) => (
         <div key={dayLabel}>
-          <h3 className="text-xs font-semibold text-ctp-overlay2 uppercase tracking-wider mb-2">
-            {dayLabel}
-          </h3>
+          <div className="flex items-center gap-3 mb-2">
+            <h3 className="text-xs font-semibold text-ctp-overlay2 uppercase tracking-widest shrink-0">
+              {dayLabel}
+            </h3>
+            <div className="flex-1 h-px bg-gradient-to-r from-ctp-surface1 to-transparent" />
+          </div>
           <div className="space-y-2">
             {daySessions.map((s) => {
               const detailsId = `session-details-${s.sessionId}`;
@@ -76,6 +104,8 @@ export function SessionsTab() {
                     isExpanded={expandedId === s.sessionId}
                     detailsId={detailsId}
                     onToggle={() => setExpandedId(expandedId === s.sessionId ? null : s.sessionId)}
+                    onDelete={() => void handleDeleteSession(s)}
+                    deleteDisabled={deletingSessionId === s.sessionId}
                   />
                   {expandedId === s.sessionId && (
                     <div id={detailsId}>