updates

2026-09-21 14:38:00 +02:00
parent 5f5f72268a
commit c18397880a
11 changed files with 268 additions and 124 deletions
@@ -9,7 +9,7 @@ import { ConvEditDialog, FilePreviewModal, SettingsModal, ShareModal } from "./c
 import { AdminCenter } from "./components/AdminCenter.tsx";
 import { SharePage } from "./components/SharePage.tsx";
 import { ResetPage } from "./components/ResetPage.tsx";
-import { ConfirmDialog } from "./components/ui.tsx";
+import { ConfirmDialog, LoadingScreen } from "./components/ui.tsx";

 function shareIdFromPath(): string | null {
  const m = window.location.pathname.match(/^\/share\/([A-Za-z0-9_-]{6,64})\/?$/);
@@ -256,7 +256,7 @@ export function App() {
  }

  if (checking) {
-    return <div className="grid min-h-full place-items-center text-sm opacity-60">Loading…</div>;
+    return <LoadingScreen />;
  }

  if (!user) {
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { ArrowLeft, LayoutDashboard, Mail, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { AdminPanel } from "./AdminPanel.tsx";
-import { Logo, Spinner, Switch } from "./ui.tsx";
+import { LoadingScreen, Logo, Spinner, Switch } from "./ui.tsx";
 import { cn } from "../lib/cn.ts";

 type Tab = "accounts" | "features" | "mail";
@@ -57,7 +57,7 @@ export function AdminCenter() {
  }

  if (allowed === null) {
-    return <div className="grid min-h-full place-items-center text-sm opacity-60"><Spinner /> Checking admin access…</div>;
+    return <LoadingScreen />;
  }

  if (!allowed) {
@@ -11,7 +11,6 @@ import {
  Share2,
  Tag,
  Trash2,
-  Users,
  X,
 } from "lucide-react";
 import type { Conversation, User } from "../lib/types.ts";
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Globe, FileText, ImagePlus, Link2, Mail, Palette, Pencil, ScanText, Settings2, Sparkles, Tag, Unplug, UserPlus } from "lucide-react";
+import { Globe, FileText, ImagePlus, Link2, Mail, Palette, Pencil, ScanText, Search, Settings2, Sparkles, Tag, Unplug, User as UserIcon, UserPlus, X } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { cn } from "../lib/cn.ts";
 import { ACCENT_PRESETS, applyAccent, currentAccent, previewAccent, type AccentState } from "../lib/accent.ts";
@@ -354,8 +354,17 @@ export function SettingsModal({
  const [uploading, setUploading] = useState(false);
  const [uploadError, setUploadError] = useState("");
  const [dragOver, setDragOver] = useState(false);
+  const [search, setSearch] = useState("");
  const fileRef = useRef<HTMLInputElement>(null);

+  // Section search: each section lists keywords; a section shows when the
+  // query is empty or matches its title/keywords.
+  function show(...keywords: string[]): boolean {
+    const q = search.trim().toLowerCase();
+    if (!q) return true;
+    return keywords.some((k) => k.toLowerCase().includes(q));
+  }
+
  useEffect(() => {
    if (user) {
      setDisplayName(user.displayName);
@@ -364,6 +373,7 @@ export function SettingsModal({
      setTheme(user.theme);
      setError("");
      setUploadError("");
+      setSearch("");
    }
  }, [user]);

@@ -409,83 +419,122 @@ export function SettingsModal({
  }

  return (
-    <Modal open={user !== null} onClose={onClose} title="Profile & appearance" icon={Settings2}>
+    <Modal open={user !== null} onClose={onClose} title="Settings" icon={Settings2} wide>
      <form onSubmit={save} className="space-y-4">
-        <div className="flex items-center gap-3">
-          <Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-sm font-medium">{displayName || "…"}</p>
-            <p className="truncate text-xs opacity-60">@{user?.username}</p>
-          </div>
-        </div>
-        <div>
-          <span className="mb-1.5 block text-sm font-medium opacity-80">Avatar upload</span>
-          <div
-            role="button"
-            tabIndex={0}
-            aria-label="Upload avatar"
-            onClick={() => fileRef.current?.click()}
-            onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
-            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
-            onDragLeave={() => setDragOver(false)}
-            onDrop={(e) => {
-              e.preventDefault();
-              setDragOver(false);
-              const f = e.dataTransfer.files?.[0];
-              if (f) uploadFile(f);
-            }}
-            className={cn(
-              "flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
-              dragOver
-                ? "border-accent-500 bg-accent-500/10"
-                : "border-stone-200 hover:border-accent-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
-            )}
-          >
-            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
-              {uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
-            </span>
-            <span className="min-w-0 flex-1 text-sm">
-              <span className="block font-medium">{uploading ? "Uploading…" : dragOver ? "Drop it!" : "Drop an image or click to upload"}</span>
-              <span className="block text-xs opacity-60">jpg · png · webp — max 5MB — 5 changes per 2h</span>
-            </span>
-          </div>
+        <div className="relative">
+          <Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-50" />
          <input
-            ref={fileRef}
-            type="file"
-            accept="image/jpeg,image/png,image/webp"
-            className="hidden"
-            onChange={(e) => {
-              const f = e.target.files?.[0];
-              if (f) uploadFile(f);
-              e.target.value = "";
-            }}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search settings…"
+            aria-label="Search settings"
+            className="w-full rounded-2xl border border-stone-200/70 bg-stone-100 py-2 pl-9 pr-8 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 focus:bg-white dark:border-zinc-800 dark:bg-zinc-800/60 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-900"
          />
-          {uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
+          {search && (
+            <button
+              type="button"
+              aria-label="Clear settings search"
+              onClick={() => setSearch("")}
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-full p-0.5 opacity-60 transition hover:opacity-100"
+            >
+              <X size={14} />
+            </button>
+          )}
        </div>
-        <Field label="Display name">
-          <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />
-        </Field>
-        <Field label="Avatar URL" hint="Host an image on catbox.moe (or anywhere) and paste the direct link here. Empty = initials.">
-          <Input value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" inputMode="url" />
-        </Field>
-        <Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
-          <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
-        </Field>
-        <Field label="Theme">
-          <Picker
-            ariaLabel="Theme"
-            value={theme}
-            onChange={setTheme}
-            align="left"
-            options={[
-              { value: "auto", label: "Auto (follows system)" },
-              { value: "light", label: "Light" },
-              { value: "dark", label: "Dark" },
-            ]}
-          />
-        </Field>
-        <AccentSection />
-        <FeaturesSection />
+
+        {show("profile", "avatar", "picture", "photo", "name", "display", "email", "account") && (
+          <SettingSection icon={UserIcon} title="Profile">
+            <div className="flex items-center gap-3">
+              <Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium">{displayName || "…"}</p>
+                <p className="truncate text-xs opacity-60">@{user?.username}</p>
+              </div>
+            </div>
+            <div>
+              <span className="mb-1.5 block text-sm font-medium opacity-80">Avatar upload</span>
+              <div
+                role="button"
+                tabIndex={0}
+                aria-label="Upload avatar"
+                onClick={() => fileRef.current?.click()}
+                onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
+                onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+                onDragLeave={() => setDragOver(false)}
+                onDrop={(e) => {
+                  e.preventDefault();
+                  setDragOver(false);
+                  const f = e.dataTransfer.files?.[0];
+                  if (f) uploadFile(f);
+                }}
+                className={cn(
+                  "flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
+                  dragOver
+                    ? "border-accent-500 bg-accent-500/10"
+                    : "border-stone-200 hover:border-accent-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
+                )}
+              >
+                <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
+                  {uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
+                </span>
+                <span className="min-w-0 flex-1 text-sm">
+                  <span className="block font-medium">{uploading ? "Uploading…" : dragOver ? "Drop it!" : "Drop an image or click to upload"}</span>
+                  <span className="block text-xs opacity-60">jpg · png · webp — max 5MB — 5 changes per 2h</span>
+                </span>
+              </div>
+              <input
+                ref={fileRef}
+                type="file"
+                accept="image/jpeg,image/png,image/webp"
+                className="hidden"
+                onChange={(e) => {
+                  const f = e.target.files?.[0];
+                  if (f) uploadFile(f);
+                  e.target.value = "";
+                }}
+              />
+              {uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
+            </div>
+            <Field label="Display name">
+              <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />
+            </Field>
+            <Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
+              <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
+            </Field>
+          </SettingSection>
+        )}
+
+        {show("appearance", "theme", "dark", "light", "color", "colour", "accent", "palette") && (
+          <SettingSection icon={Palette} title="Appearance">
+            <Field label="Theme">
+              <Picker
+                ariaLabel="Theme"
+                value={theme}
+                onChange={setTheme}
+                align="left"
+                options={[
+                  { value: "auto", label: "Auto (follows system)" },
+                  { value: "light", label: "Light" },
+                  { value: "dark", label: "Dark" },
+                ]}
+              />
+            </Field>
+            <AccentSection />
+          </SettingSection>
+        )}
+
+        {show("features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable") && (
+          <SettingSection icon={Sparkles} title="Features" hint="Turn composer capabilities on or off. Applied instantly, saved on this device.">
+            <FeaturesSection />
+          </SettingSection>
+        )}
+
+        {search.trim() && !show("profile", "avatar", "picture", "photo", "name", "display", "email", "account")
+          && !show("appearance", "theme", "dark", "light", "color", "colour", "accent", "palette")
+          && !show("features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable") && (
+          <p className="px-2 py-4 text-center text-sm opacity-50">No settings match “{search.trim()}”.</p>
+        )}
+
        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
        <div className="flex justify-end gap-2">
          <Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button>
@@ -496,6 +545,31 @@ export function SettingsModal({
  );
 }

+/* ---------- Settings sections ---------- */
+
+function SettingSection({
+  icon: Icon,
+  title,
+  hint,
+  children,
+}: {
+  icon: typeof Settings2;
+  title: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="rounded-3xl border border-stone-200/70 p-4 dark:border-zinc-800">
+      <h3 className="mb-1 flex items-center gap-2 text-sm font-semibold">
+        <Icon size={15} className="opacity-60" />
+        {title}
+      </h3>
+      {hint && <p className="mb-3 text-xs opacity-60">{hint}</p>}
+      <div className="mt-3 space-y-4">{children}</div>
+    </section>
+  );
+}
+
 /* ---------- Accent color (settings) ---------- */

 function AccentSection() {
@@ -515,10 +589,6 @@ function AccentSection() {

  return (
    <div>
-      <span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
-        <Palette size={14} />
-        Accent color
-      </span>
      <div className="flex flex-wrap items-center gap-2">
        {ACCENT_PRESETS.map((p) => (
          <button
@@ -557,7 +627,6 @@ function AccentSection() {
          />
        </label>
      </div>
-      <p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
    </div>
  );
 }
@@ -568,10 +637,6 @@ function FeaturesSection() {
  const flags = useFeatures();
  return (
    <div>
-      <span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
-        <Sparkles size={14} />
-        Features
-      </span>
      <div className="space-y-1">
        {FEATURES.map((f) => (
          <label
@@ -597,7 +662,6 @@ function FeaturesSection() {
          </label>
        ))}
      </div>
-      <p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
    </div>
  );
 }
@@ -475,26 +475,7 @@ export function Logo({ size = 36, className }: { size?: number; className?: stri
 /* ---------- Switch (feature toggle) ---------- */

 export function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      aria-label={label}
-      onClick={() => onChange(!checked)}
-      className={cn(
-        "relative h-6 w-11 shrink-0 rounded-full transition",
-        checked ? "bg-emerald-600 dark:bg-emerald-500" : "bg-stone-300 dark:bg-zinc-700",
-      )}
-    >
-      <span
-        className={cn(
-          "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all",
-          checked ? "left-[1.375rem]" : "left-0.5",
-        )}
-      />
-    </button>
-  );
+  return <Toggle checked={checked} onChange={onChange} label={label} />;
 }

 /* ---------- Misc ---------- */
@@ -503,7 +484,8 @@ export function Spinner({ size = 18 }: { size?: number }) {
  return <Loader2 size={size} className="animate-spin" />;
 }

-/** Accessible on/off switch (emerald→accent colored when on). */
+/** Accessible on/off switch (accent colored when on). Flex-based so the knob
+ *  is always perfectly centered — no border/padding math to break. */
 export function Toggle({
  checked,
  onChange,
@@ -524,16 +506,14 @@ export function Toggle({
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={cn(
-        "relative h-6 w-11 shrink-0 rounded-full border transition disabled:opacity-40",
-        checked
-          ? "border-transparent bg-accent-600 dark:bg-accent-500"
-          : "border-stone-300 bg-stone-200 dark:border-zinc-600 dark:bg-zinc-700",
+        "flex h-6 w-11 shrink-0 items-center rounded-full px-0.5 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/50 disabled:cursor-not-allowed disabled:opacity-40",
+        checked ? "bg-accent-600 dark:bg-accent-500" : "bg-stone-300 dark:bg-zinc-700",
      )}
    >
      <span
        className={cn(
-          "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all dark:bg-zinc-100",
-          checked ? "left-[1.4rem]" : "left-0.5",
+          "h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 dark:bg-zinc-100",
+          checked ? "translate-x-5" : "translate-x-0",
        )}
      />
    </button>
@@ -557,3 +537,26 @@ export function CopyButton({ text, label = "Copy" }: { text: string; label?: str
    </button>
  );
 }
+
+/* ---------- Loading screen ---------- */
+
+/** Animated blooming flower shown while the app boots (themed, mobile-safe). */
+export function LoadingScreen() {
+  const petals = [0, 60, 120, 180, 240, 300];
+  return (
+    <div className="grid min-h-full place-items-center" role="status" aria-label="Loading KisAssistant">
+      <div className="flex flex-col items-center gap-4 px-6 text-center">
+        <svg width="72" height="72" viewBox="0 0 100 100" className="h-16 w-16 sm:h-20 sm:w-20" aria-hidden="true">
+          {petals.map((r, i) => (
+            <g key={r} transform={`rotate(${r} 50 50)`}>
+              <ellipse cx="50" cy="25" rx="13" ry="21" className="flower-petal fill-accent-500" style={{ animationDelay: `${i * 0.22}s` }} />
+            </g>
+          ))}
+          <circle cx="50" cy="50" r="10" className="flower-core fill-accent-700 dark:fill-accent-400" />
+        </svg>
+        <p className="font-serif text-2xl font-bold tracking-tight">KisAssistant</p>
+        <p className="loading-dots text-sm opacity-60">Preparing your chats</p>
+      </div>
+    </div>
+  );
+}
@@ -90,6 +90,36 @@ body {
  50% { opacity: 0; }
 }

+/* Loading flower: petals bloom one after another, core breathes. */
+.flower-petal {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bloom 1.8s ease-in-out infinite;
+}
+@keyframes bloom {
+  0%, 100% { transform: scale(0.55); opacity: 0.3; }
+  50% { transform: scale(1); opacity: 1; }
+}
+.flower-core {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: core-breathe 1.8s ease-in-out infinite;
+}
+@keyframes core-breathe {
+  0%, 100% { transform: scale(0.85); }
+  50% { transform: scale(1.15); }
+}
+.loading-dots::after {
+  content: "";
+  animation: dots 1.4s steps(4) infinite;
+}
+@keyframes dots {
+  0% { content: ""; }
+  25% { content: "."; }
+  50% { content: ".."; }
+  75% { content: "..."; }
+}
+
 /* Kill Chrome's yellow autofill background (login / password fields) */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,