feat: add Settings button in sidebar with links to annotation-types and span-label-types

This commit is contained in:
Marko Djordjevic 2026-02-17 19:51:42 +01:00
parent 3a114cccd0
commit a75c9307d4

View file

@ -10,6 +10,7 @@ import SpanAnnotationList from '@/components/SpanAnnotationList';
import TalibPatternPanel from '@/components/TalibPatternPanel'; import TalibPatternPanel from '@/components/TalibPatternPanel';
import TrainingPanel from '@/components/TrainingPanel'; import TrainingPanel from '@/components/TrainingPanel';
import { ThemeToggle } from '@/components/ThemeToggle'; import { ThemeToggle } from '@/components/ThemeToggle';
import { Settings, Tag, Layers } from 'lucide-react';
import type { PredictionState, PredictionSpan, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions'; import type { PredictionState, PredictionSpan, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions';
/** /**
@ -158,6 +159,7 @@ interface SpanLabelType {
} }
export default function Home() { export default function Home() {
const [settingsOpen, setSettingsOpen] = useState(false);
const [activeTool, setActiveTool] = useState<Tool | 'span'>(null); const [activeTool, setActiveTool] = useState<Tool | 'span'>(null);
const [selectedColor, setSelectedColor] = useState('#3b82f6'); const [selectedColor, setSelectedColor] = useState('#3b82f6');
const [selectedLabelId, setSelectedLabelId] = useState<number | null>(null); const [selectedLabelId, setSelectedLabelId] = useState<number | null>(null);
@ -808,6 +810,40 @@ export default function Home() {
Export JSON Export JSON
</button> </button>
</div> </div>
{/* Settings */}
<div className="relative px-3 py-2 border-t border-sidebar-border">
<button
onClick={() => setSettingsOpen((o) => !o)}
className="flex items-center gap-1.5 px-2 py-1.5 text-xs rounded text-muted-foreground hover:text-foreground hover:bg-secondary/50 transition-colors"
>
<Settings className="w-3.5 h-3.5" />
Settings
</button>
{settingsOpen && (
<>
{/* backdrop */}
<div className="fixed inset-0 z-10" onClick={() => setSettingsOpen(false)} />
{/* menu */}
<div className="absolute bottom-full left-3 mb-1 z-20 w-48 rounded-md border border-border bg-popover shadow-md py-1">
<a
href="/annotation-types"
className="flex items-center gap-2 px-3 py-2 text-xs text-foreground hover:bg-secondary/50 transition-colors"
>
<Tag className="w-3.5 h-3.5 text-muted-foreground" />
Annotation Types
</a>
<a
href="/span-label-types"
className="flex items-center gap-2 px-3 py-2 text-xs text-foreground hover:bg-secondary/50 transition-colors"
>
<Layers className="w-3.5 h-3.5 text-muted-foreground" />
Span Label Types
</a>
</div>
</>
)}
</div>
</div> </div>
{/* Main chart area */} {/* Main chart area */}