feat: rewrite settings page with sidebar navigation and structured sections

app/routes/settings.tsx

@@ -1,46 +1,129 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
+import Navbar from "../components/Navbar";
+import SettingsSidebar, { type SettingsSection } from "../components/SettingsSidebar";
+import LlmSettings from "../components/LlmSettings";
+import TradingSettings from "../components/TradingSettings";
+import StockTable from "../components/StockTable";
+import SystemSettings from "../components/SystemSettings";
+
+interface Stock {
+  id: string;
+  ticker: string;
+  notes: string | null;
+  lastDecision: string | null;
+  lastJobId: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
 
 export default function SettingsPage() {
-  const [items, setItems] = useState<Array<{ key: string; value: any }>>([]);
+  const [activeSection, setActiveSection] = useState<SettingsSection>("llm");
+  const [settings, setSettings] = useState<Record<string, any>>({});
+  const [stocks, setStocks] = useState<Stock[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [alpacaMode, setAlpacaMode] = useState<string | null>(null);
+
   useEffect(() => {
-    fetch('/api/admin/settings')
+    Promise.all([
-      .then(r => r.json())
+      fetch("/api/admin/settings").then((r) => r.json()),
-      .then(j => setItems(j));
+      fetch("/api/stocks").then((r) => r.json()),
+      fetch("/api/alpaca/account").then((r) => r.ok ? r.json() : null),
+    ]).then(([settingsData, stocksData, accountData]) => {
+      const settingsMap: Record<string, any> = {};
+      if (Array.isArray(settingsData)) {
+        settingsData.forEach((s: { key: string; value: any }) => {
+          settingsMap[s.key] = s.value;
+        });
+      }
+      setSettings(settingsMap);
+      if (Array.isArray(stocksData)) setStocks(stocksData);
+      if (accountData?.trading?.paper !== undefined) {
+        setAlpacaMode(accountData.trading.paper ? "paper" : "live");
+      }
+      setLoading(false);
+    }).catch((err) => {
+      console.error("Failed to load settings:", err);
+      setLoading(false);
+    });
   }, []);
 
-  async function save(key: string, value: any) {
+  const saveSetting = async (key: string, value: any) => {
-    await fetch(`/api/admin/settings/${encodeURIComponent(key)}`, {
+    setSaveError(null);
-      method: 'PUT',
+    const prevValue = settings[key];
-      headers: { 'content-type': 'application/json' },
+    setSettings((s) => ({ ...s, [key]: value }));
+    try {
+      const res = await fetch(`/api/admin/settings/${encodeURIComponent(key)}`, {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
         body: JSON.stringify({ value }),
       });
-    setItems(s => s.map(i => (i.key === key ? { ...i, value } : i)));
+      if (!res.ok) {
+        throw new Error(`Failed to save ${key}`);
+      }
+    } catch (err) {
+      setSettings((s) => ({ ...s, [key]: prevValue }));
+      setSaveError(err instanceof Error ? err.message : "Save failed");
+    }
+  };
+
+  const saveStockNotes = async (ticker: string, notes: string) => {
+    setSaveError(null);
+    const prevStocks = [...stocks];
+    setStocks((s) => s.map((st) => (st.ticker === ticker ? { ...st, notes } : st)));
+    try {
+      const fd = new FormData();
+      fd.append("ticker", ticker);
+      fd.append("notes", notes);
+      const res = await fetch("/api/stocks", { method: "POST", body: fd });
+      if (!res.ok) {
+        throw new Error("Failed to save notes");
+      }
+    } catch (err) {
+      setStocks(prevStocks);
+      setSaveError(err instanceof Error ? err.message : "Save failed");
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+        <Navbar />
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading settings...</div>
+        </div>
+      </div>
+    );
   }
 
-  return (
+  const renderSection = () => {
-    <div className="p-6">
+    switch (activeSection) {
-      <h1 className="text-2xl font-bold mb-4">Settings</h1>
+      case "llm":
-      <ul>
+        return <LlmSettings settings={settings} onSave={saveSetting} saveError={saveError} />;
-        {items.map(it => (
+      case "trading":
-          <li key={it.key} className="mb-3">
+        return <TradingSettings settings={settings} onSave={saveSetting} saveError={saveError} />;
-            <div className="flex items-center gap-4">
+      case "stocks":
-              <div className="font-medium">{it.key}</div>
+        return <StockTable stocks={stocks} onNotesSave={saveStockNotes} saveError={saveError} />;
-              <textarea
+      case "system":
-                className="border p-2 w-2/3"
+        return <SystemSettings settings={settings} alpacaMode={alpacaMode} onSave={saveSetting} saveError={saveError} />;
-                defaultValue={JSON.stringify(it.value, null, 2)}
+      default:
-                onBlur={e => {
+        return null;
-                  try {
-                    const v = JSON.parse(e.currentTarget.value);
-                    save(it.key, v);
-                  } catch (err) {
-                    alert('Invalid JSON');
     }
-                }}
+  };
-              />
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+      <Navbar />
+      <div className="mx-auto max-w-7xl px-6 sm:px-8 lg:px-8 py-8">
+        <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
+          <div className="flex min-h-[600px]">
+            <SettingsSidebar activeSection={activeSection} onSectionChange={setActiveSection} />
+            <main className="flex-1 p-6 overflow-y-auto">
+              {renderSection()}
+            </main>
+          </div>
+        </div>
       </div>
-          </li>
-        ))}
-      </ul>
     </div>
   );
 }