From a75c9307d43ad0fcb61350628061621401762e75 Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Tue, 17 Feb 2026 19:51:42 +0100
Subject: [PATCH] feat: add Settings button in sidebar with links to
 annotation-types and span-label-types

---
 src/app/page.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b39a055..7186458 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,7 @@ import SpanAnnotationList from '@/components/SpanAnnotationList';
 import TalibPatternPanel from '@/components/TalibPatternPanel';
 import TrainingPanel from '@/components/TrainingPanel';
 import { ThemeToggle } from '@/components/ThemeToggle';
+import { Settings, Tag, Layers } from 'lucide-react';
 import type { PredictionState, PredictionSpan, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions';
 
 /**
@@ -158,6 +159,7 @@ interface SpanLabelType {
 }
 
 export default function Home() {
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const [activeTool, setActiveTool] = useState<Tool | 'span'>(null);
   const [selectedColor, setSelectedColor] = useState('#3b82f6');
   const [selectedLabelId, setSelectedLabelId] = useState<number | null>(null);
@@ -808,6 +810,40 @@ export default function Home() {
             Export JSON
           </button>
         </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>
 
       {/* Main chart area */}