From c3886f092509fc4333ab7c96e4dda963993c5ad5 Mon Sep 17 00:00:00 2001
From: Henry Winkel <Henry-Winkel@web.de>
Date: Sat, 16 May 2026 20:45:56 +0200
Subject: [PATCH] feat: add SettingsSidebar component with section navigation

---
 app/components/SettingsSidebar.tsx | 41 ++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 app/components/SettingsSidebar.tsx

diff --git a/app/components/SettingsSidebar.tsx b/app/components/SettingsSidebar.tsx
new file mode 100644
index 0000000..80497c5
--- /dev/null
+++ b/app/components/SettingsSidebar.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+export type SettingsSection = "llm" | "trading" | "stocks" | "system";
+
+interface SettingsSidebarProps {
+  activeSection: SettingsSection;
+  onSectionChange: (section: SettingsSection) => void;
+}
+
+const sections: { id: SettingsSection; label: string; icon: string }[] = [
+  { id: "llm", label: "LLM & Agents", icon: "🧠" },
+  { id: "trading", label: "Trading Defaults", icon: "📊" },
+  { id: "stocks", label: "Stock Database", icon: "📋" },
+  { id: "system", label: "System", icon: "⚙️" },
+];
+
+export default function SettingsSidebar({ activeSection, onSectionChange }: SettingsSidebarProps) {
+  return (
+    <aside className="w-60 border-r border-gray-200 bg-white h-full sticky top-0 overflow-y-auto">
+      <div className="p-6">
+        <h2 className="text-lg font-bold text-gray-900 mb-6">Settings</h2>
+        <nav className="space-y-1">
+          {sections.map((section) => (
+            <button
+              key={section.id}
+              onClick={() => onSectionChange(section.id)}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                activeSection === section.id
+                  ? "bg-blue-50 text-blue-700 border-l-4 border-blue-600"
+                  : "text-gray-700 hover:bg-gray-50"
+              }`}
+            >
+              <span>{section.icon}</span>
+              <span>{section.label}</span>
+            </button>
+          ))}
+        </nav>
+      </div>
+    </aside>
+  );
+}