@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/settings/SettingsContent.tsx

@@ -0,0 +1,437 @@
+'use client';
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Settings, Loader2, AlertCircle, CheckCircle2, RotateCcw, Sparkles, Palette, Database, RefreshCw, Plug, Download, X, Trash2, HelpCircle } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useLocale } from '@/lib/stores/locale-store';
+import { apiFetch } from '@/lib/api';
+import type { AiSettings, AgentSettings, SettingsData, Tab } from './types';
+import { AiTab } from './AiTab';
+import { AppearanceTab } from './AppearanceTab';
+import { KnowledgeTab } from './KnowledgeTab';
+import { SyncTab } from './SyncTab';
+import { McpTab } from './McpTab';
+import { UpdateTab } from './UpdateTab';
+import { UninstallTab } from './UninstallTab';
+
+interface SettingsContentProps {
+  visible: boolean;
+  initialTab?: Tab;
+  variant: 'modal' | 'panel';
+  onClose?: () => void;
+}
+
+export default function SettingsContent({ visible, initialTab, variant, onClose }: SettingsContentProps) {
+  const [tab, setTab] = useState<Tab>('ai');
+  const [data, setData] = useState<SettingsData | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState<'idle' | 'saved' | 'error' | 'load-error'>('idle');
+  const { t, locale, setLocale } = useLocale();
+  const router = useRouter();
+  const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const dataLoaded = useRef(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const [font, setFont] = useState('lora');
+  const [fontSize, setFontSize] = useState('15px');
+  const [contentWidth, setContentWidth] = useState('780px');
+  const [dark, setDark] = useState(true);
+
+  // Update available badge on Update tab
+  const [hasUpdate, setHasUpdate] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    const dismissed = localStorage.getItem('mindos_update_dismissed');
+    const latest = localStorage.getItem('mindos_update_latest');
+    return !!latest && latest !== dismissed;
+  });
+  useEffect(() => {
+    const onAvail = () => setHasUpdate(true);
+    const onDismiss = () => setHasUpdate(false);
+    window.addEventListener('mindos:update-available', onAvail);
+    window.addEventListener('mindos:update-dismissed', onDismiss);
+    return () => {
+      window.removeEventListener('mindos:update-available', onAvail);
+      window.removeEventListener('mindos:update-dismissed', onDismiss);
+    };
+  }, []);
+
+  const isPanel = variant === 'panel';
+
+  // Init data when becoming visible
+  const prevVisibleRef = useRef(false);
+  useEffect(() => {
+    const justOpened = isPanel
+      ? (visible && !prevVisibleRef.current)
+      : visible;
+
+    if (justOpened) {
+      apiFetch<SettingsData>('/api/settings').then(d => { setData(d); dataLoaded.current = true; }).catch(() => setStatus('load-error'));
+      setFont(localStorage.getItem('prose-font') === 'geist' ? 'inter' : localStorage.getItem('prose-font') ?? 'ibm-plex-sans');
+      setFontSize(localStorage.getItem('prose-font-size') ?? '15px');
+      setContentWidth(localStorage.getItem('content-width') ?? '780px');
+      const stored = localStorage.getItem('theme');
+      setDark(stored ? stored === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches);
+      setStatus('idle');
+    }
+    if (!visible) { dataLoaded.current = false; }
+    prevVisibleRef.current = visible;
+  }, [visible, isPanel]);
+
+  useEffect(() => {
+    if (visible && initialTab) switchTab(initialTab);
+  }, [visible, initialTab]);
+
+  const switchTab = useCallback((id: Tab) => {
+    setTab(id);
+    contentRef.current?.scrollTo?.(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const fontMap: Record<string, string> = {
+      'lora': "'Lora', Georgia, serif",
+      'ibm-plex-sans': "'IBM Plex Sans', sans-serif",
+      'inter': 'var(--font-inter), sans-serif',
+      'ibm-plex-mono': "'IBM Plex Mono', monospace",
+    };
+    document.documentElement.style.setProperty('--prose-font-override', fontMap[font] ?? '');
+    localStorage.setItem('prose-font', font);
+  }, [font]);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--prose-font-size-override', fontSize);
+    localStorage.setItem('prose-font-size', fontSize);
+  }, [fontSize]);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('--content-width-override', contentWidth);
+    localStorage.setItem('content-width', contentWidth);
+  }, [contentWidth]);
+
+  // Esc to close — modal only
+  useEffect(() => {
+    if (variant !== 'modal' || !visible || !onClose) return;
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [variant, visible, onClose]);
+
+  const doSave = useCallback(async (d: SettingsData) => {
+    setSaving(true);
+    try {
+      await apiFetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
+      });
+      setStatus('saved');
+      window.dispatchEvent(new Event('mindos:settings-changed'));
+      setTimeout(() => setStatus('idle'), 2500);
+    } catch {
+      setStatus('error');
+      setTimeout(() => setStatus('idle'), 2500);
+    } finally {
+      setSaving(false);
+    }
+  }, []);
+
+  // Track unsaved data so we can flush on close/unmount
+  const pendingData = useRef<SettingsData | null>(null);
+
+  useEffect(() => {
+    if (!data || !dataLoaded.current) return;
+    pendingData.current = data;
+    clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => {
+      pendingData.current = null;
+      doSave(data);
+    }, 800);
+    return () => clearTimeout(saveTimer.current);
+  }, [data, doSave]);
+
+  // Flush unsaved changes when panel hides (panel variant)
+  useEffect(() => {
+    if (!visible && pendingData.current) {
+      const d = pendingData.current;
+      pendingData.current = null;
+      clearTimeout(saveTimer.current);
+      doSave(d);
+    }
+  }, [visible, doSave]);
+
+  // Flush unsaved changes on unmount (modal variant: SettingsModal returns null when !open)
+  useEffect(() => {
+    return () => {
+      if (pendingData.current) {
+        clearTimeout(saveTimer.current);
+        const d = pendingData.current;
+        pendingData.current = null;
+        apiFetch('/api/settings', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ ai: d.ai, agent: d.agent, mindRoot: d.mindRoot, webPassword: d.webPassword, authToken: d.authToken }),
+        }).catch(() => {});
+      }
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const updateAi = useCallback((patch: Partial<AiSettings>) => {
+    setData(d => d ? { ...d, ai: { ...d.ai, ...patch } } : d);
+  }, []);
+
+  const updateAgent = useCallback((patch: Partial<AgentSettings>) => {
+    setData(d => d ? { ...d, agent: { ...(d.agent ?? {}), ...patch } } : d);
+  }, []);
+
+  const restoreFromEnv = useCallback(async () => {
+    if (!data) return;
+    const defaults: AiSettings = {
+      activeProvider: '',
+      providers: [],
+    };
+    setData(d => d ? { ...d, ai: defaults } : d);
+    const DEBOUNCE_DELAY = 800;
+    const SAVE_OPERATION_TIME = 500;
+    setTimeout(() => {
+      apiFetch<SettingsData>('/api/settings').then(d => { setData(d); }).catch(() => setStatus('error'));
+    }, DEBOUNCE_DELAY + SAVE_OPERATION_TIME);
+  }, [data]);
+
+  const env = data?.envOverrides ?? {};
+  const iconSize = isPanel ? 12 : 13;
+
+  const TABS: { id: Tab; label: string; icon: React.ReactNode; badge?: boolean }[] = [
+    { id: 'ai', label: t.settings.tabs.ai, icon: <Sparkles size={iconSize} /> },
+    { id: 'mcp', label: t.settings.tabs.mcp ?? 'Connections', icon: <Plug size={iconSize} /> },
+    { id: 'knowledge', label: t.settings.tabs.knowledge, icon: <Settings size={iconSize} /> },
+    { id: 'appearance', label: t.settings.tabs.appearance, icon: <Palette size={iconSize} /> },
+    { id: 'sync', label: t.settings.tabs.sync ?? 'Sync', icon: <RefreshCw size={iconSize} /> },
+    { id: 'update', label: t.settings.tabs.update ?? 'Update', icon: <Download size={iconSize} />, badge: hasUpdate },
+    { id: 'uninstall', label: t.settings.tabs.uninstall ?? 'Uninstall', icon: <Trash2 size={iconSize} /> },
+  ];
+
+  const activeTabLabel = TABS.find(t2 => t2.id === tab)?.label ?? '';
+
+  /* ── Shared content & footer ── */
+  const renderContent = () => (
+    <div ref={contentRef} className={`flex-1 overflow-y-auto min-h-0 ${isPanel ? 'px-4 py-4 space-y-4' : 'px-5 py-5 space-y-5'}`}>
+      {status === 'load-error' && (tab === 'ai' || tab === 'knowledge') ? (
+        <div className="flex flex-col items-center gap-2 py-8 text-center">
+          <AlertCircle size={isPanel ? 18 : 20} className="text-destructive" />
+          <p className={`${isPanel ? 'text-xs' : 'text-sm'} text-destructive font-medium`}>Failed to load settings</p>
+          {!isPanel && <p className="text-xs text-muted-foreground">Check that the server is running and AUTH_TOKEN is configured correctly.</p>}
+        </div>
+      ) : !data && tab !== 'appearance' && tab !== 'mcp' && tab !== 'sync' && tab !== 'update' && tab !== 'uninstall' ? (
+        <div className="flex justify-center py-8">
+          <Loader2 size={isPanel ? 16 : 18} className="animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <>
+          {tab === 'ai' && data?.ai && <AiTab data={data} updateAi={updateAi} updateAgent={updateAgent} t={t} />}
+          {tab === 'appearance' && <AppearanceTab font={font} setFont={setFont} fontSize={fontSize} setFontSize={setFontSize} contentWidth={contentWidth} setContentWidth={setContentWidth} dark={dark} setDark={setDark} locale={locale} setLocale={setLocale} t={t} />}
+          {tab === 'knowledge' && data && <KnowledgeTab data={data} setData={setData} t={t} />}
+          {tab === 'sync' && <SyncTab t={t} visible={visible} />}
+          {tab === 'mcp' && <McpTab t={t} />}
+          {tab === 'update' && <UpdateTab />}
+          {tab === 'uninstall' && <UninstallTab />}
+        </>
+      )}
+    </div>
+  );
+
+  const renderFooter = () => (
+    (tab === 'ai' || tab === 'knowledge') ? (
+      <div className={`${isPanel ? 'px-4 py-2' : 'px-5 py-2.5'} border-t border-border shrink-0 flex items-center justify-between`}>
+        <div className="flex items-center gap-3">
+          {tab === 'ai' && Object.values(env).some(Boolean) && (
+            <button
+              onClick={restoreFromEnv}
+              disabled={saving || !data}
+              className={`flex items-center gap-1.5 ${isPanel ? 'px-2.5 py-1 text-xs rounded-md' : 'px-3 py-1.5 text-sm rounded-lg'} border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors`}
+            >
+              <RotateCcw size={isPanel ? 12 : 13} />
+              {t.settings.ai.restoreFromEnv}
+            </button>
+          )}
+          {tab === 'knowledge' && (
+            <a
+              href="/setup?force=1"
+              className={`flex items-center gap-1.5 ${isPanel ? 'px-2.5 py-1 text-xs rounded-md' : 'px-3 py-1.5 text-sm rounded-lg'} border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors`}
+            >
+              <RotateCcw size={isPanel ? 12 : 13} />
+              {t.settings.reconfigure}
+            </a>
+          )}
+        </div>
+        {!isPanel && (
+          <div className="flex items-center gap-1.5 text-xs" role="status" aria-live="polite">
+            {saving && <><Loader2 size={12} className="animate-spin text-muted-foreground" /><span className="text-muted-foreground">{t.settings.save}...</span></>}
+            {status === 'saved' && <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>}
+            {status === 'error' && <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>}
+          </div>
+        )}
+      </div>
+    ) : null
+  );
+
+  /* ── Panel variant: unchanged (horizontal tabs) ── */
+  if (isPanel) {
+    return (
+      <>
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <Settings size={14} className="text-muted-foreground" />
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Settings</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="flex items-center gap-1.5 text-[10px]" role="status" aria-live="polite">
+              {saving && <Loader2 size={10} className="animate-spin text-muted-foreground" />}
+              {status === 'saved' && <CheckCircle2 size={10} className="text-success" />}
+              {status === 'error' && <AlertCircle size={10} className="text-destructive" />}
+            </div>
+          </div>
+        </div>
+        <div className="flex border-b border-border px-3 shrink-0 overflow-x-auto scrollbar-none gap-0">
+          {TABS.map(tabItem => (
+            <button
+              key={tabItem.id}
+              onClick={() => switchTab(tabItem.id)}
+              className={`flex items-center gap-1 px-2 py-2 text-xs font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
+                tab === tabItem.id
+                  ? 'border-[var(--amber)] text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {tabItem.icon}
+              {tabItem.label}
+              {tabItem.badge && <span className="w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
+            </button>
+          ))}
+        </div>
+        {renderContent()}
+        {renderFooter()}
+      </>
+    );
+  }
+
+  /* ── Modal variant ── */
+  return (
+    <>
+      {/* Mobile: original vertical layout */}
+      <div className="flex flex-col h-full md:hidden">
+        {/* Mobile header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+          <div className="flex justify-center pt-2 pb-0 absolute top-0 left-1/2 -translate-x-1/2">
+            <div className="w-8 h-1 rounded-full bg-muted-foreground/20" />
+          </div>
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <Settings size={15} className="text-muted-foreground" />
+            <span>{t.settings.title}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <div className="flex items-center gap-1.5 text-[10px]" role="status" aria-live="polite">
+              {saving && <Loader2 size={12} className="animate-spin text-muted-foreground" />}
+              {status === 'saved' && <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>}
+              {status === 'error' && <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>}
+            </div>
+            {onClose && (
+              <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
+                <X size={15} />
+              </button>
+            )}
+          </div>
+        </div>
+        {/* Mobile horizontal tabs */}
+        <div className="flex border-b border-border px-4 shrink-0 overflow-x-auto scrollbar-none gap-0">
+          {TABS.map(tabItem => (
+            <button
+              key={tabItem.id}
+              onClick={() => switchTab(tabItem.id)}
+              className={`flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap ${
+                tab === tabItem.id
+                  ? 'border-[var(--amber)] text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {tabItem.icon}
+              {tabItem.label}
+              {tabItem.badge && <span className="w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
+            </button>
+          ))}
+          <button
+            onClick={() => { onClose?.(); router.push('/help'); }}
+            className="flex items-center gap-1.5 px-3 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap border-transparent text-muted-foreground hover:text-foreground"
+          >
+            <HelpCircle size={iconSize} />
+            {t.sidebar.help}
+          </button>
+        </div>
+        {renderContent()}
+        {renderFooter()}
+      </div>
+
+      {/* Desktop: left-right layout */}
+      <div className="hidden md:flex flex-row h-full min-h-0">
+        {/* Left sidebar — vertical tabs */}
+        <div className="w-[180px] shrink-0 border-r border-border flex flex-col">
+          <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
+            <Settings size={15} className="text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">{t.settings.title}</span>
+          </div>
+          <nav className="flex-1 overflow-y-auto py-1.5">
+            {TABS.map(tabItem => (
+              <button
+                key={tabItem.id}
+                onClick={() => switchTab(tabItem.id)}
+                className={`flex items-center gap-2 w-full px-4 py-2 text-sm font-medium transition-colors relative ${
+                  tab === tabItem.id
+                    ? 'text-foreground bg-muted'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+                }`}
+              >
+                {tab === tabItem.id && (
+                  <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-r-full bg-[var(--amber)]" />
+                )}
+                {tabItem.icon}
+                {tabItem.label}
+                {tabItem.badge && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-error shrink-0" />}
+              </button>
+            ))}
+          </nav>
+          {/* Help link at bottom of sidebar */}
+          <div className="shrink-0 border-t border-border px-4 py-2">
+            <button
+              onClick={() => { onClose?.(); router.push('/help'); }}
+              className="flex items-center gap-2 w-full px-0 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <HelpCircle size={13} />
+              {t.sidebar.help}
+            </button>
+          </div>
+        </div>
+
+        {/* Right content area */}
+        <div className="flex-1 flex flex-col min-w-0 min-h-0">
+          {/* Right header: tab title + status + close */}
+          <div className="flex items-center justify-between px-5 py-3 border-b border-border shrink-0">
+            <span className="text-sm font-medium text-foreground">{activeTabLabel}</span>
+            <div className="flex items-center gap-1.5">
+              <div className="flex items-center gap-1.5 text-[10px]" role="status" aria-live="polite">
+                {saving && <Loader2 size={12} className="animate-spin text-muted-foreground" />}
+                {status === 'saved' && <><CheckCircle2 size={12} className="text-success" /><span className="text-success">{t.settings.saved}</span></>}
+                {status === 'error' && <><AlertCircle size={12} className="text-destructive" /><span className="text-destructive">{t.settings.saveFailed}</span></>}
+              </div>
+              {onClose && (
+                <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
+                  <X size={15} />
+                </button>
+              )}
+            </div>
+          </div>
+          {renderContent()}
+          {renderFooter()}
+        </div>
+      </div>
+    </>
+  );
+}

package/_standalone/components/settings/ShortcutsTab.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import type { ShortcutsTabProps } from './types';
+
+export function ShortcutsTab({ t }: ShortcutsTabProps) {
+  return (
+    <div className="space-y-1">
+      {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
+        <div key={i} className="flex items-center justify-between py-2.5 border-b border-border last:border-0">
+          <span className="text-sm text-foreground">{s.description}</span>
+          <div className="flex items-center gap-1">
+            {s.keys.map((k: string, j: number) => (
+              <kbd key={j} className="px-2 py-0.5 text-xs font-mono bg-muted border border-border rounded text-foreground">{k}</kbd>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}