@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/settings/AppearanceTab.tsx

@@ -1,268 +0,0 @@
-'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

@@ -1,121 +0,0 @@
-'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' ? '输入名称' : 'Enter 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

@@ -1,154 +0,0 @@
-'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}
-        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>
-      )}
-    </>
-  );
-}