From 173623a432ccef3714533aa247c5ec31bbf1e9c4 Mon Sep 17 00:00:00 2001
From: Marko Djordjevic <marko.homoludens@gmail.com>
Date: Fri, 20 Feb 2026 22:26:39 +0100
Subject: [PATCH] Move span-label-types and annotation-types links from sidebar
 settings menu to settings page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/app/page.tsx          | 38 ++-------------------------------
 src/app/app/settings/page.tsx | 40 ++++++++++++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
index c206ca9..51882b9 100644
--- a/src/app/app/page.tsx
+++ b/src/app/app/page.tsx
@@ -22,7 +22,7 @@ import {
   DialogClose,
 } from '@/components/ui/dialog';
 import { useTheme } from 'next-themes';
-import { Settings, Tag, Layers } from 'lucide-react';
+import { Settings } from 'lucide-react';
 import type { PredictionState, PredictionSpan, PerCandlePrediction, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions';
 import type { Candle, SpanAnnotation, SpanLabelType } from '@/types';
 import type { Geometry } from '@/types/annotations';
@@ -147,8 +147,7 @@ interface Annotation {
 
 export default function Home() {
   const { theme, setTheme } = useTheme();
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+const [shortcutsOpen, setShortcutsOpen] = useState(false);
   const [activeTool, setActiveTool] = useState<Tool | 'span'>(null);
   const [selectedColor, setSelectedColor] = useState('#3b82f6');
   const [selectedLabelId, setSelectedLabelId] = useState<number | null>(null);
@@ -978,39 +977,6 @@ export default function Home() {
           </button>
         </div>
 
-        {/* Settings */}
-        <div className="relative px-3 py-2 border-t border-sidebar-border flex-shrink-0">
-          <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="/app/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="/app/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 */}
diff --git a/src/app/app/settings/page.tsx b/src/app/app/settings/page.tsx
index 1b36220..16cd72b 100644
--- a/src/app/app/settings/page.tsx
+++ b/src/app/app/settings/page.tsx
@@ -14,7 +14,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { CheckCircle, AlertCircle, Trash2, ChevronLeft } from "lucide-react";
+import { CheckCircle, AlertCircle, Trash2, ChevronLeft, Tag, Layers, ChevronRight } from "lucide-react";
 import Link from "next/link";
 
 export default function SettingsPage() {
@@ -359,6 +359,44 @@ export default function SettingsPage() {
           </CardContent>
         </Card>
       )}
+      {/* Configuration section */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-mono">Configuration</CardTitle>
+          <CardDescription className="text-xs">
+            Manage annotation and span label types used across charts.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="p-0">
+          <Link
+            href="/app/annotation-types"
+            className="flex items-center justify-between px-6 py-3 hover:bg-secondary/50 transition-colors border-b border-border"
+          >
+            <div className="flex items-center gap-3">
+              <Tag className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-mono font-medium">Annotation Types</p>
+                <p className="text-xs text-muted-foreground font-mono">Manage marker and line annotation types</p>
+              </div>
+            </div>
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          </Link>
+          <Link
+            href="/app/span-label-types"
+            className="flex items-center justify-between px-6 py-3 hover:bg-secondary/50 transition-colors"
+          >
+            <div className="flex items-center gap-3">
+              <Layers className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-mono font-medium">Span Label Types</p>
+                <p className="text-xs text-muted-foreground font-mono">Manage pattern labels for span annotations</p>
+              </div>
+            </div>
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+          </Link>
+        </CardContent>
+      </Card>
+
       {/* Danger Zone section */}
       <Card className="border-destructive/40">
         <CardHeader>