settings refactor

2026-02-16 23:39:06 +00:00
parent 9f720e1804
commit c21353dbba
13 changed files with 322 additions and 14 deletions
@@ -0,0 +1,104 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Search, User, Lock, Globe, ListChecks } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
+import { Card } from '@/components/Card';
+import { DashboardLayout } from '../../Layout';
+import { UserData } from './UserData';
+import { ChangePassword } from './ChangePassword';
+import { Languages } from './Languages';
+import { TaskDefaults } from './TaskDefaults';
+
+const sections = [
+  {
+    key: 'profile',
+    icon: User,
+    title: 'Profile',
+    description: 'Update your name and avatar.',
+    content: <UserData />,
+  },
+  {
+    key: 'tasks',
+    icon: ListChecks,
+    title: 'Tasks',
+    description: 'Default model for file browser tasks.',
+    content: <TaskDefaults />,
+  },
+  {
+    key: 'languages',
+    icon: Globe,
+    title: 'Languages',
+    description: 'Set your spoken languages and translation preferences.',
+    content: <Languages />,
+  },
+  {
+    key: 'change-password',
+    icon: Lock,
+    title: 'Change Password',
+    description: 'Update your account password.',
+    content: <ChangePassword />,
+  },
+];
+
+const allKeys = sections.map((s) => s.key);
+
+export const ProfileSettings = () => {
+  const [search, setSearch] = useState('');
+  const [expanded, setExpanded] = useState<string[]>([]);
+  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const matchingKeys = useMemo(() => {
+    if (!search) return allKeys;
+    const query = search.toLowerCase();
+    return sections
+      .filter((s) => {
+        const el = sectionRefs.current[s.key];
+        return (el?.textContent?.toLowerCase() ?? '').includes(query);
+      })
+      .map((s) => s.key);
+  }, [search]);
+
+  useEffect(() => {
+    if (search) setExpanded(matchingKeys);
+  }, [search, matchingKeys]);
+
+  return (
+    <DashboardLayout>
+      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+        <Card className="w-full max-w-2xl h-fit p-6">
+          <div className="relative mb-6">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
+            <Input
+              placeholder="Search settings..."
+              value={search}
+              onChange={(ev) => setSearch(ev.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
+            {sections.map((section) => (
+              <div
+                key={section.key}
+                ref={(el) => {
+                  sectionRefs.current[section.key] = el;
+                }}
+                className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
+              >
+                <AccordionItem value={section.key}>
+                  <AccordionTrigger className="hover:no-underline">
+                    <div className="flex items-center gap-3">
+                      <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
+                      <div className="text-base font-bold text-duck-dark">{section.title}</div>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent>{section.content}</AccordionContent>
+                </AccordionItem>
+              </div>
+            ))}
+          </Accordion>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+};