@raingor/pi-web-switch 0.3.2 → 0.4.0

package/src/components/settings/SettingsPage.tsx

@@ -2,7 +2,13 @@ import { useState, useRef, useEffect } from "react";
 import { useConfigStore } from "@/store/config-store";
 import { useTranslation } from "@/lib/i18n";
 import { Modal } from "@/components/ui/Modal";
-import { exportConfig, parseImportFile, saveLocalBackup } from "@/lib/config";
+import {
+  exportConfig,
+  exportConfigToDirectory,
+  importConfigFromFile,
+  parseImportFile,
+  saveLocalBackup,
+} from "@/lib/config";
 import type { PiConfig, UpdateCheckResult } from "@/types";
 import { cn } from "@/lib/utils";
 import {
@@ -18,9 +24,9 @@ import {
   LayoutGrid,
   Wrench,
   Settings as SettingsIcon,
-  Zap,
   CloudDownload,
   RefreshCw,
+  ZoomIn,
 } from "lucide-react";
 
 type SettingsTab = "appearance" | "models" | "advanced";
@@ -38,6 +44,7 @@ const THEME_SWATCHES: {
 ];
 
 const FONT_SIZE_KEY = "pi-font-size";
+const UI_ZOOM_KEY = "pi-ui-zoom";
 
 function Card({
   icon: Icon,
@@ -85,8 +92,6 @@ export function SettingsPage() {
     allModels,
     updateSettings,
     setTheme,
-    addEnabledModel,
-    removeEnabledModel,
     addPackage,
     removePackage,
     importConfig: importConfigAction,
@@ -101,6 +106,10 @@ export function SettingsPage() {
     const saved = Number(localStorage.getItem(FONT_SIZE_KEY));
     return saved >= 12 && saved <= 24 ? saved : 16;
   });
+  const [uiZoom, setUiZoom] = useState(() => {
+    const saved = Number(localStorage.getItem(UI_ZOOM_KEY));
+    return saved >= 50 && saved <= 200 ? saved : 100;
+  });
   // pi core / extensions update check (Advanced tab).
   const [updateResult, setUpdateResult] = useState<UpdateCheckResult | null>(null);
   const [checkingUpdates, setCheckingUpdates] = useState(false);
@@ -157,30 +166,52 @@ export function SettingsPage() {
     localStorage.setItem(FONT_SIZE_KEY, String(fontSize));
   }, [fontSize]);
 
-  const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+  // Apply + persist UI zoom (whole-interface percentage scaling).
+  useEffect(() => {
+    document.documentElement.style.zoom = `${uiZoom}%`;
+    localStorage.setItem(UI_ZOOM_KEY, String(uiZoom));
+  }, [uiZoom]);
+
+  const handleImportFromInput = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
-    const reader = new FileReader();
-    reader.onload = async (ev) => {
-      const result = parseImportFile(ev.target?.result as string);
-      if (result) {
-        await importConfigAction(result);
-        setImportError("");
-      } else {
-        setImportError(t("settings.import_error"));
-      }
-    };
-    reader.readAsText(file);
+    const text = await file.text();
+    const result = parseImportFile(text);
+    if (result) {
+      await importConfigAction(result);
+      setImportError("");
+    } else {
+      setImportError(t("settings.import_error"));
+    }
+    // Reset input so the same file can be selected again
+    e.target.value = "";
   };
 
-  const handleExport = () => {
+  const handleImportClick = async () => {
+    const { config, cancelled } = await importConfigFromFile();
+    if (config) {
+      await importConfigAction(config);
+      setImportError("");
+      return;
+    }
+    if (!cancelled) {
+      // API unavailable or parse failed → fallback to hidden file input
+      fileInputRef.current?.click();
+    }
+  };
+
+  const handleExport = async () => {
     const cfg: PiConfig = {
       settings: settings ?? { theme: "dark", packages: [], enabledModels: [] },
       auth: auth ?? {},
       modelsJson: modelsJson ?? { providers: {} },
     };
     saveLocalBackup(cfg);
-    exportConfig(cfg);
+    const { ok, cancelled } = await exportConfigToDirectory(cfg);
+    if (!ok && !cancelled) {
+      // API unavailable or write failed → fallback to download
+      exportConfig(cfg);
+    }
   };
 
   // ── Default model select: composite `providerId/modelId` values, but the
@@ -227,18 +258,6 @@ export function SettingsPage() {
     updateSettings(clearModel ? { defaultProvider: v, defaultModel: undefined } : { defaultProvider: v || undefined });
   };
 
-  // Display names that appear under several providers need the provider name
-  // appended to stay distinguishable.
-  const modelNameCounts = allModels.reduce<Record<string, number>>((acc, m) => {
-    const name = m.name || m.id;
-    acc[name] = (acc[name] ?? 0) + 1;
-    return acc;
-  }, {});
-  const modelTagLabel = (m: (typeof allModels)[number]) => {
-    const name = m.name || m.id;
-    return (modelNameCounts[name] ?? 0) > 1 ? `${name} · ${m.providerName}` : name;
-  };
-
   const enabledModels = settings?.enabledModels ?? [];
   const themeLabelKey: Record<string, string> = {
     light: "settings.light",
@@ -367,6 +386,29 @@ export function SettingsPage() {
               </span>
             </div>
           </Card>
+
+          <Card icon={ZoomIn} title={t("settings.ui_zoom")} desc={t("settings.ui_zoom_desc")}>
+            <div className="flex max-w-xl items-center gap-4">
+              <input
+                type="range"
+                min={50}
+                max={200}
+                step={5}
+                value={uiZoom}
+                onChange={(e) => setUiZoom(Number(e.target.value))}
+                className="flex-1 accent-blue-500"
+              />
+              <span className="w-14 rounded-lg border border-gray-700 bg-gray-800 px-2 py-1 text-center text-xs text-gray-300">
+                {uiZoom}%
+              </span>
+              <button
+                onClick={() => setUiZoom(100)}
+                className="rounded-lg border border-gray-700 px-3 py-1 text-xs text-gray-300 transition-colors hover:bg-gray-800"
+              >
+                {t("settings.ui_zoom_reset")}
+              </button>
+            </div>
+          </Card>
         </div>
       )}
 
@@ -427,29 +469,6 @@ export function SettingsPage() {
               </select>
             </SettingRow>
           </Card>
-
-          <Card icon={Zap} title={t("settings.enabled_models")} desc={t("settings.enabled_models_desc")}>
-            <div className="flex flex-wrap gap-1.5">
-              {allModels.map((m) => {
-                const ref = `${m.providerId}/${m.id}`;
-                const on = enabledModels.includes(ref);
-                return (
-                  <button
-                    key={ref}
-                    onClick={() => (on ? removeEnabledModel(ref) : addEnabledModel(ref))}
-                    className={cn(
-                      "rounded-md border px-2.5 py-1 text-xs transition-colors",
-                      on
-                        ? "border-blue-500/50 bg-blue-500/10 text-blue-400"
-                        : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
-                    )}
-                  >
-                    {modelTagLabel(m)}
-                  </button>
-                );
-              })}
-            </div>
-          </Card>
         </div>
       )}
 
@@ -605,7 +624,7 @@ export function SettingsPage() {
                 {t("settings.export")}
               </button>
               <button
-                onClick={() => fileInputRef.current?.click()}
+                onClick={handleImportClick}
                 className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
               >
                 <Upload className="h-4 w-4" />
@@ -623,7 +642,7 @@ export function SettingsPage() {
                 type="file"
                 accept=".json"
                 className="hidden"
-                onChange={handleImport}
+                onChange={handleImportFromInput}
               />
             </div>
             {importError && <p className="mt-3 text-sm text-red-400">{importError}</p>}