@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/settings/AppearanceTab.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Sun, Moon, Monitor, Type, ALargeSmall, Columns3, Globe, BookOpen, Palette } from 'lucide-react';
+import { Locale } from '@/lib/i18n';
+import { CONTENT_WIDTHS, FONTS, FONT_SIZES, AppearanceTabProps } from './types';
+import { SettingCard } from './Primitives';
+
+/* ── Setting Group ── */
+function SettingGroup({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <span className="text-muted-foreground">{icon}</span>
+        <span className="text-sm font-medium text-foreground">{label}</span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/* ── Pill Selector — compact horizontal pills ── */
+function PillSelector<T extends string>({ options, value, onChange }: {
+  options: { value: T; label: string; icon?: React.ReactNode }[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex gap-2">
+      {options.map(opt => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          className={`flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium rounded-xl transition-all ${
+            value === opt.value
+              ? 'bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm'
+              : 'bg-muted/50 text-muted-foreground hover:text-foreground hover:bg-muted'
+          }`}
+        >
+          {opt.icon}
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function AppearanceTab({ font, setFont, fontSize, setFontSize, contentWidth, setContentWidth, dark, setDark, locale, setLocale, t }: AppearanceTabProps) {
+  const [showShortcuts, setShowShortcuts] = useState(false);
+  const [themePref, setThemePref] = useState<string>(() =>
+    typeof window !== 'undefined' ? (localStorage.getItem('theme') ?? 'system') : 'system'
+  );
+  const [localePref, setLocalePref] = useState<string>(() =>
+    typeof window !== 'undefined' ? (localStorage.getItem('locale') ?? 'system') : 'system'
+  );
+  const a = t.settings.appearance;
+
+  return (
+    <div className="space-y-4">
+
+      {/* ── Card 1: Preferences — theme, language ── */}
+      <SettingCard icon={<Palette size={15} />} title={a.preferencesTitle ?? 'Preferences'}>
+
+      {/* ── Theme — amber pills ── */}
+      <SettingGroup icon={<Sun size={14} />} label={a.colorTheme}>
+        <PillSelector
+          options={[
+            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
+            { value: 'dark', label: a.dark, icon: <Moon size={14} /> },
+            { value: 'light', label: a.light, icon: <Sun size={14} /> },
+          ]}
+          value={themePref}
+          onChange={v => {
+            setThemePref(v);
+            localStorage.setItem('theme', v);
+            const isDark = v === 'system'
+              ? window.matchMedia('(prefers-color-scheme: dark)').matches
+              : v === 'dark';
+            setDark(isDark);
+            document.documentElement.classList.toggle('dark', isDark);
+          }}
+        />
+      </SettingGroup>
+
+      {/* ── Language — amber pills ── */}
+      <SettingGroup icon={<Globe size={14} />} label={a.language}>
+        <PillSelector
+          options={[
+            { value: 'system', label: a.system, icon: <Monitor size={14} /> },
+            { value: 'en', label: 'EN' },
+            { value: 'zh', label: '中文' },
+          ]}
+          value={localePref}
+          onChange={v => {
+            setLocalePref(v);
+            localStorage.setItem('locale', v);
+            const resolved: Locale = v === 'system'
+              ? (navigator.language.startsWith('zh') ? 'zh' : 'en')
+              : v as Locale;
+            setLocale(resolved);
+            document.cookie = `locale=${resolved};path=/;max-age=31536000;SameSite=Lax`;
+          }}
+        />
+      </SettingGroup>
+
+      </SettingCard>
+
+      {/* ── Card 2: Reading — font, size, width ── */}
+      <SettingCard icon={<BookOpen size={15} />} title={a.readingTitle ?? 'Reading'} description={a.readingDesc ?? 'Customize how your notes look'}>
+      <SettingGroup icon={<Type size={14} />} label={a.readingFont}>
+        <div className="space-y-0.5">
+          {FONTS.map(f => {
+            const selected = font === f.value;
+            return (
+              <button
+                key={f.value}
+                type="button"
+                onClick={() => setFont(f.value)}
+                className={`flex items-center gap-4 w-full px-3 py-2.5 rounded-lg transition-all text-left relative ${
+                  selected
+                    ? 'bg-[var(--amber-subtle)]'
+                    : 'hover:bg-muted/50'
+                }`}
+              >
+                {/* Active indicator — left bar */}
+                {selected && (
+                  <div className="absolute left-0 top-2 bottom-2 w-[3px] rounded-r-full bg-[var(--amber)]" />
+                )}
+                {/* Large Aa preview */}
+                <span
+                  className={`text-xl font-medium w-10 text-center shrink-0 ${selected ? 'text-foreground' : 'text-muted-foreground/60'}`}
+                  style={{ fontFamily: f.style.fontFamily }}
+                >
+                  Aa
+                </span>
+                {/* Font name + sample */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-baseline gap-2">
+                    <span
+                      className={`text-sm font-medium ${selected ? 'text-foreground' : 'text-muted-foreground'}`}
+                      style={{ fontFamily: f.style.fontFamily }}
+                    >
+                      {f.label}
+                    </span>
+                    <span className="text-xs text-muted-foreground/50">{f.category}</span>
+                  </div>
+                  <p
+                    className={`text-sm truncate mt-0.5 ${selected ? 'text-muted-foreground' : 'text-muted-foreground/40'}`}
+                    style={{ fontFamily: f.style.fontFamily }}
+                  >
+                    {a.fontPreview}
+                  </p>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </SettingGroup>
+
+      {/* ── Font Size — elegant range slider ── */}
+      <SettingGroup icon={<ALargeSmall size={14} />} label={a.fontSize}>
+        <div className="px-1">
+          {/* Slider */}
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-muted-foreground/60 shrink-0" style={{ fontSize: '11px' }}>A</span>
+            <input
+              type="range"
+              min={14}
+              max={17}
+              step={1}
+              value={parseInt(fontSize)}
+              onChange={e => setFontSize(`${e.target.value}px`)}
+              className="flex-1 h-1.5 rounded-full appearance-none bg-muted cursor-pointer accent-[var(--amber)]
+                [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
+                [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[var(--amber)]
+                [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:cursor-pointer
+                [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110
+                [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full
+                [&::-moz-range-thumb]:bg-[var(--amber)] [&::-moz-range-thumb]:border-0
+                [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:cursor-pointer"
+            />
+            <span className="text-base text-muted-foreground/60 shrink-0">A</span>
+          </div>
+          {/* Current value */}
+          <div className="text-center mt-1.5">
+            <span className="text-xs tabular-nums text-muted-foreground">{parseInt(fontSize)}px</span>
+          </div>
+          {/* Live preview */}
+          <p
+            className="text-muted-foreground leading-relaxed mt-2 px-1"
+            style={{
+              fontSize,
+              fontFamily: FONTS.find(f => f.value === font)?.style.fontFamily,
+            }}
+          >
+            {a.fontSizePreview}
+          </p>
+        </div>
+      </SettingGroup>
+
+      {/* ── Content Width — visual width bars ── */}
+      <SettingGroup icon={<Columns3 size={14} />} label={a.contentWidth}>
+        <div className="space-y-1">
+          {CONTENT_WIDTHS.map(w => {
+            const selected = contentWidth === w.value;
+            return (
+              <button
+                key={w.value}
+                type="button"
+                onClick={() => setContentWidth(w.value)}
+                className={`flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-all ${
+                  selected ? 'bg-[var(--amber-subtle)]' : 'hover:bg-muted/50'
+                }`}
+              >
+                {/* Width indicator bar */}
+                <div className="flex-1 h-2 rounded-full bg-muted/40 overflow-hidden">
+                  <div
+                    className={`h-full rounded-full transition-all ${
+                      selected ? 'bg-[var(--amber)]' : 'bg-muted-foreground/20'
+                    }`}
+                    style={{ width: `${w.width}%` }}
+                  />
+                </div>
+                {/* Label */}
+                <span className={`text-sm shrink-0 w-14 text-right ${
+                  selected ? 'text-foreground font-medium' : 'text-muted-foreground'
+                }`}>
+                  {w.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </SettingGroup>
+
+      </SettingCard>
+
+      <p className="text-xs text-muted-foreground/40 px-0.5">{a.browserNote}</p>
+
+      {/* ── Keyboard Shortcuts ── */}
+      <div className="border-t border-border pt-4">
+        <button
+          type="button"
+          onClick={() => setShowShortcuts(!showShortcuts)}
+          className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {showShortcuts ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          {t.settings.tabs.shortcuts}
+        </button>
+        {showShortcuts && (
+          <div className="mt-3 space-y-0.5">
+            {t.shortcuts.map((s: { readonly description: string; readonly keys: readonly string[] }, i: number) => (
+              <div key={i} className="flex items-center justify-between py-1.5 px-1">
+                <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-1.5 py-0.5 text-2xs font-mono bg-muted border border-border rounded text-muted-foreground">{k}</kbd>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/_standalone/components/settings/CustomProviderFields.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { Field, Select, Input, PasswordInput } from './Primitives';
+import { PROVIDER_PRESETS, ALL_PROVIDER_IDS, type ProviderId } from '@/lib/agent/providers';
+import ModelInput from '@/components/shared/ModelInput';
+import type { CustomProviderFormState } from './useCustomProviderForm';
+import type { AiTabProps } from './types';
+
+interface CustomProviderFieldsProps {
+  form: CustomProviderFormState;
+  t: AiTabProps['t'];
+  locale: string;
+  /** "compact" = inline in AiTab (name+protocol side by side), "full" = modal layout */
+  layout?: 'compact' | 'full';
+}
+
+/**
+ * Shared form fields for provider editing.
+ * Renders: Name, Protocol, Base URL, API Key, Model.
+ */
+export default function CustomProviderFields({
+  form, t, locale, layout = 'full',
+}: CustomProviderFieldsProps) {
+  const basePreset = PROVIDER_PRESETS[form.protocol];
+
+  const nameLabel = locale === 'zh' ? '名称' : 'Name';
+  const protocolLabel = locale === 'zh' ? '协议' : 'Protocol';
+  const namePlaceholder = locale === 'zh' ? '可选，默认使用协议名称' : 'Optional, defaults to protocol name';
+
+  const nameHint = form.isDuplicateName
+    ? (locale === 'zh' ? '名称已存在' : 'Name already exists')
+    : undefined;
+
+  return (
+    <div className="space-y-3">
+      {/* Name + Protocol */}
+      {layout === 'compact' ? (
+        <div className="grid grid-cols-2 gap-3">
+          <Field label={nameLabel} hint={nameHint} hintError={form.isDuplicateName}>
+            <Input
+              value={form.name}
+              onChange={e => form.setName(e.target.value)}
+              placeholder={namePlaceholder}
+              autoFocus
+            />
+          </Field>
+          <Field label={protocolLabel}>
+            <Select
+              value={form.protocol}
+              onChange={e => form.setProtocol(e.target.value as ProviderId)}
+            >
+              {ALL_PROVIDER_IDS.map(id => (
+                <option key={id} value={id}>
+                  {locale === 'zh' ? PROVIDER_PRESETS[id].nameZh : PROVIDER_PRESETS[id].name}
+                </option>
+              ))}
+            </Select>
+          </Field>
+        </div>
+      ) : (
+        <>
+          <Field label={nameLabel} hint={nameHint} hintError={form.isDuplicateName}>
+            <Input
+              value={form.name}
+              onChange={e => form.setName(e.target.value)}
+              placeholder={namePlaceholder}
+            />
+          </Field>
+          <Field label={protocolLabel}>
+            <Select
+              value={form.protocol}
+              onChange={e => form.setProtocol(e.target.value as ProviderId)}
+            >
+              {ALL_PROVIDER_IDS.map(id => (
+                <option key={id} value={id}>
+                  {locale === 'zh' ? PROVIDER_PRESETS[id].nameZh : PROVIDER_PRESETS[id].name}
+                </option>
+              ))}
+            </Select>
+          </Field>
+        </>
+      )}
+
+      {/* Base URL */}
+      <Field label="Base URL">
+        <Input
+          value={form.baseUrl}
+          onChange={e => form.setBaseUrl(e.target.value)}
+          placeholder={basePreset.fixedBaseUrl || 'https://api.example.com/v1'}
+        />
+      </Field>
+
+      {/* API Key */}
+      <Field
+        label={<>API Key <span className="text-muted-foreground/50 font-normal">{locale === 'zh' ? '(可选)' : '(optional)'}</span></>}
+      >
+        <PasswordInput
+          value={form.apiKey}
+          onChange={form.setApiKey}
+          placeholder="sk-..."
+        />
+      </Field>
+
+      {/* Model */}
+      <Field label={locale === 'zh' ? '模型' : 'Model'}>
+        <ModelInput
+          value={form.model}
+          onChange={form.setModel}
+          placeholder={basePreset.defaultModel}
+          provider={form.protocol}
+          apiKey={form.apiKey}
+          baseUrl={form.baseUrl}
+          supportsListModels={!!form.baseUrl.trim()}
+          allowNoKey
+          browseLabel={t.settings.ai.listModels}
+          noModelsLabel={t.settings.ai.noModelsFound}
+        />
+      </Field>
+    </div>
+  );
+}

package/_standalone/components/settings/CustomProvidersCard.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useState, useCallback, useMemo, useRef } from 'react';
+import { Trash2, Edit2, Layers } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { type CustomProvider, generateCustomProviderId, isValidProvider } from '@/lib/custom-endpoints';
+import { SettingCard } from './Primitives';
+import ProviderModal from './ProviderModal';
+
+interface CustomProvidersCardProps {
+  providers: CustomProvider[];
+  onProvidersChange: (providers: CustomProvider[]) => void;
+}
+
+export default function CustomProvidersCard({
+  providers,
+  onProvidersChange,
+}: CustomProvidersCardProps) {
+  const { t } = useLocale();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+  const editingProvider = useMemo(
+    () => editingId ? providers.find(p => p.id === editingId) : null,
+    [editingId, providers],
+  );
+
+  const handleAddClick = useCallback(() => {
+    setEditingId(null);
+    setIsModalOpen(true);
+  }, []);
+
+  const handleEditClick = useCallback((id: string) => {
+    setEditingId(id);
+    setIsModalOpen(true);
+  }, []);
+
+  const handleSaveProvider = useCallback((provider: CustomProvider) => {
+    const updated = editingId
+      ? providers.map(p => (p.id === editingId ? provider : p))
+      : [...providers, provider];
+    onProvidersChange(updated);
+    setIsModalOpen(false);
+  }, [editingId, providers, onProvidersChange]);
+
+  const handleDeleteClick = useCallback((id: string) => {
+    setDeleteConfirmId(id);
+  }, []);
+
+  const handleConfirmDelete = useCallback(() => {
+    if (deleteConfirmId) {
+      const updated = providers.filter(p => p.id !== deleteConfirmId);
+      onProvidersChange(updated);
+      setDeleteConfirmId(null);
+    }
+  }, [deleteConfirmId, providers, onProvidersChange]);
+
+  const label = t.settings?.customProviders?.title ?? 'Model Providers';
+  const subtitle = t.settings?.customProviders?.subtitle ?? 'Add custom API endpoints with your own names';
+
+  return (
+    <>
+      <SettingCard icon={<Layers size={15} />} title={label} description={subtitle}>
+        <div className="space-y-2">
+          {providers.length === 0 ? (
+            <div className="text-xs text-muted-foreground py-4 px-3 rounded-lg bg-muted/30 text-center">
+              {t.settings?.customProviders?.emptyState ?? 'No custom providers yet.'}
+            </div>
+          ) : (
+            providers.map(provider => (
+              <div
+                key={provider.id}
+                className="flex items-start gap-3 p-3 rounded-lg border border-border/50 hover:border-border transition-colors"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="font-medium text-sm">{provider.name}</div>
+                  <div className="text-xs text-muted-foreground mt-1">
+                    {provider.protocol} · {provider.model}
+                  </div>
+                  <div className="text-2xs text-muted-foreground/60 mt-1 truncate font-mono">
+                    {provider.baseUrl}
+                  </div>
+                </div>
+                <div className="flex gap-1 shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => handleEditClick(provider.id)}
+                    className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded border border-border/50 text-muted-foreground hover:text-foreground hover:border-border transition-colors"
+                    title={t.settings?.customProviders?.editButton}
+                  >
+                    <Edit2 size={12} />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteClick(provider.id)}
+                    className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded border border-border/50 text-muted-foreground hover:text-destructive hover:border-destructive/20 transition-colors"
+                    title={t.settings?.customProviders?.deleteButton}
+                  >
+                    <Trash2 size={12} />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+
+        <button
+          type="button"
+          onClick={handleAddClick}
+          className="mt-3 text-xs font-medium text-[var(--amber)] hover:text-[var(--amber)]/80 transition-colors"
+        >
+          {t.settings?.customProviders?.addButton ?? '+ Add Provider'}
+        </button>
+      </SettingCard>
+
+      <ProviderModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSave={handleSaveProvider}
+        initialProvider={editingProvider ?? undefined}
+        existingNames={providers
+          .filter((p) => p.id !== editingId)
+          .map((p) => p.name)}
+        t={t}
+      />
+
+      {deleteConfirmId && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center overlay-backdrop">
+          <div className="bg-card border border-border rounded-lg shadow-lg p-4 max-w-sm mx-4">
+            <p className="text-sm font-medium">
+              {t.settings?.customProviders?.deleteConfirm?.(
+                providers.find(p => p.id === deleteConfirmId)?.name ?? '',
+              ) ?? 'Delete this provider?'}
+            </p>
+            <div className="flex gap-2 mt-4">
+              <button
+                type="button"
+                onClick={() => setDeleteConfirmId(null)}
+                className="flex-1 px-3 py-1.5 text-sm rounded border border-border text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleConfirmDelete}
+                className="flex-1 px-3 py-1.5 text-sm rounded bg-destructive/10 border border-destructive/20 text-destructive hover:bg-destructive/20 transition-colors"
+              >
+                {t.settings?.customProviders?.deleteConfirmButton ?? 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}