settings refactor

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/ChangePassword.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type PasswordFormState = {
+  password?: string;
+  newPassword?: string;
+  confirmPassword?: string;
+};
+
+const validate = (state: Partial<PasswordFormState>) => {
+  const { password, newPassword, confirmPassword } = state;
+  return !!(password && newPassword && confirmPassword && newPassword === confirmPassword);
+};
+
+export const ChangePassword = () => {
+  const { changePassword } = useAuth();
+  const [isChanging, setIsChanging] = useState(false);
+  const form = useForm<PasswordFormState>({}, validate);
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (!form.isValid || isChanging) return;
+
+    setIsChanging(true);
+    try {
+      await changePassword({
+        password: form.state.password!,
+        newPassword: form.state.newPassword!,
+        confirmPassword: form.state.confirmPassword!,
+      });
+      toast.success('Password changed');
+      form.update({ password: '', newPassword: '', confirmPassword: '' });
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Failed to change password');
+      form.update({ password: '', newPassword: '', confirmPassword: '' });
+    } finally {
+      setIsChanging(false);
+    }
+  };
+
+  return (
+    <div>
+      <form ref={form.formRef} onSubmit={handleSubmit} className="grid gap-4">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Current Password</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            name="password"
+            placeholder="Current password"
+            autoComplete="current-password"
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">New Password</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            name="newPassword"
+            placeholder="New password"
+            autoComplete="new-password"
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Confirm New Password</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="password"
+            name="confirmPassword"
+            placeholder="Confirm new password"
+            autoComplete="new-password"
+          />
+        </Label>
+
+        <Button
+          type="submit"
+          disabled={!form.isValid || isChanging}
+          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isChanging ? 'Changing...' : 'Change Password'}
+        </Button>
+      </form>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/Languages.tsx

@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import { X } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { useSettings } from '@/state/useSettings';
+
+const LANGUAGES = [
+  { code: 'en', label: 'English' },
+  { code: 'pt', label: 'Portuguese' },
+  { code: 'es', label: 'Spanish' },
+  { code: 'fr', label: 'French' },
+  { code: 'de', label: 'German' },
+  { code: 'it', label: 'Italian' },
+  { code: 'nl', label: 'Dutch' },
+  { code: 'ru', label: 'Russian' },
+  { code: 'zh', label: 'Chinese' },
+  { code: 'ja', label: 'Japanese' },
+  { code: 'ko', label: 'Korean' },
+  { code: 'ar', label: 'Arabic' },
+  { code: 'hi', label: 'Hindi' },
+  { code: 'tr', label: 'Turkish' },
+  { code: 'pl', label: 'Polish' },
+  { code: 'sv', label: 'Swedish' },
+  { code: 'da', label: 'Danish' },
+  { code: 'no', label: 'Norwegian' },
+  { code: 'fi', label: 'Finnish' },
+  { code: 'uk', label: 'Ukrainian' },
+  { code: 'cs', label: 'Czech' },
+  { code: 'ro', label: 'Romanian' },
+  { code: 'el', label: 'Greek' },
+  { code: 'he', label: 'Hebrew' },
+  { code: 'th', label: 'Thai' },
+  { code: 'vi', label: 'Vietnamese' },
+  { code: 'id', label: 'Indonesian' },
+  { code: 'ms', label: 'Malay' },
+];
+
+const getLabel = (code: string) => LANGUAGES.find((l) => l.code === code)?.label ?? code;
+
+export const Languages = () => {
+  const { settings, saveSettings } = useSettings();
+  const { spoken, default: defaultLang, translateTo } = settings.languages;
+  const [addingLang, setAddingLang] = useState('');
+
+  const save = (languages: typeof settings.languages) => {
+    saveSettings({ ...settings, languages });
+  };
+
+  const addSpoken = (code: string) => {
+    if (!code || spoken.includes(code)) return;
+    save({ ...settings.languages, spoken: [...spoken, code] });
+    setAddingLang('');
+  };
+
+  const removeSpoken = (code: string) => {
+    const next = spoken.filter((s) => s !== code);
+    const updates = { ...settings.languages, spoken: next };
+    if (defaultLang === code) updates.default = next[0] ?? 'en';
+    if (translateTo === code) updates.translateTo = next[0] ?? 'en';
+    save(updates);
+  };
+
+  const availableToAdd = LANGUAGES.filter((l) => !spoken.includes(l.code));
+
+  return (
+    <div className="grid gap-5">
+      {/* Spoken languages */}
+      <div className="grid gap-2">
+        <span className="text-sm font-medium text-duck-dark/70">Languages you speak</span>
+        <div className="flex flex-wrap gap-2">
+          {spoken.map((code) => (
+            <span
+              key={code}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-duck-teal/10 text-duck-teal text-sm font-medium"
+            >
+              {getLabel(code)}
+              {spoken.length > 1 && (
+                <button
+                  onClick={() => removeSpoken(code)}
+                  className="hover:text-red-500 cursor-pointer transition-colors"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+        {availableToAdd.length > 0 && (
+          <div className="flex items-center gap-2 mt-1">
+            <select
+              value={addingLang}
+              onChange={(ev) => addSpoken(ev.target.value)}
+              className="text-sm border border-duck-dark/20 rounded-md px-3 py-1.5 bg-white/60 text-duck-dark cursor-pointer"
+            >
+              <option value="">Add a language...</option>
+              {availableToAdd.map((l) => (
+                <option key={l.code} value={l.code}>
+                  {l.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+
+      {/* Default language */}
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Default language</span>
+        <select
+          value={defaultLang}
+          onChange={(ev) => save({ ...settings.languages, default: ev.target.value })}
+          className="text-sm border border-duck-dark/20 rounded-md px-3 py-2 bg-white/60 text-duck-dark cursor-pointer"
+        >
+          {spoken.map((code) => (
+            <option key={code} value={code}>
+              {getLabel(code)}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-duck-dark/40">Used for future UI localization.</span>
+      </Label>
+
+      {/* Translate from */}
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Translate to</span>
+        <select
+          value={translateTo}
+          onChange={(ev) => save({ ...settings.languages, translateTo: ev.target.value })}
+          className="text-sm border border-duck-dark/20 rounded-md px-3 py-2 bg-white/60 text-duck-dark cursor-pointer"
+        >
+          {LANGUAGES.map((l) => (
+            <option key={l.code} value={l.code}>
+              {l.label}
+            </option>
+          ))}
+        </select>
+        <span className="text-xs text-duck-dark/40">Target language when translating content you don't speak.</span>
+      </Label>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/TaskDefaults.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect, useMemo } from 'react';
+import { toast } from 'sonner';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useSettings } from '@/state/useSettings';
+import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';
+
+export const TaskDefaults = () => {
+  const { settings, saveSettings } = useSettings();
+  const claudeModels = useVisibleClaudeModels();
+  const openCodeModels = useVisibleOpenCodeModels();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const [model, setModel] = useState<string | null>(settings.tasks.defaultModel);
+
+  useEffect(() => {
+    setModel(settings.tasks.defaultModel);
+  }, [settings]);
+
+  const openCodeGroups = useMemo(() => {
+    const groups: Record<string, { id: string; name: string }[]> = {};
+    for (const m of openCodeModels) {
+      const provider = m.provider ?? 'OpenCode';
+      if (!groups[provider]) groups[provider] = [];
+      groups[provider].push({ id: m.id, name: m.name });
+    }
+    return Object.entries(groups)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([provider, models]) => ({ provider, models: models.sort((a, b) => a.name.localeCompare(b.name)) }));
+  }, [openCodeModels]);
+
+  const handleSave = async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+    try {
+      const isOpenCode = openCodeModels.some((m) => m.id === model);
+      const defaultProvider = isOpenCode ? ('opencode' as const) : ('claude' as const);
+      await saveSettings({ ...settings, tasks: { defaultProvider, defaultModel: model } });
+      toast.success('Task defaults saved');
+    } catch {
+      toast.error('Failed to save settings');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="grid gap-4">
+      <Label className="grid gap-2">
+        <span className="text-duck-dark/70">Default Model</span>
+        <Select value={model ?? ''} onValueChange={(v) => setModel(v || null)}>
+          <SelectTrigger className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark">
+            <SelectValue placeholder="Same as chat default" />
+          </SelectTrigger>
+          <SelectContent className="z-[600] max-h-[300px]">
+            {claudeModels.length > 0 && (
+              <SelectGroup>
+                <SelectLabel>Claude</SelectLabel>
+                {claudeModels.map((m) => (
+                  <SelectItem key={m.id} value={m.id}>
+                    {m.name}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            )}
+            {openCodeGroups.map(({ provider, models }) => (
+              <SelectGroup key={provider}>
+                <SelectLabel>{provider} (OpenCode)</SelectLabel>
+                {models.map((m) => (
+                  <SelectItem key={`${provider}:${m.id}`} value={m.id}>
+                    {m.name}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))}
+          </SelectContent>
+        </Select>
+      </Label>
+
+      <Button
+        type="button"
+        onClick={handleSave}
+        disabled={isSaving}
+        className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+      >
+        {isSaving ? 'Saving...' : 'Save'}
+      </Button>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/UserData.tsx

@@ -0,0 +1,126 @@
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { Camera } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { useForm } from 'hooks/useForm';
+import { useAuth } from 'hooks/useAuth';
+
+type ProfileFormState = {
+  name?: string;
+};
+
+const MAX_AVATAR_SIZE = 384_000; // ~384KB to stay under 512KB varchar after base64 overhead
+
+const readFileAsBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+};
+
+export const UserData = () => {
+  const { user, updateUser } = useAuth();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const profileForm = useForm<ProfileFormState>({ name: user?.name ?? '' });
+
+  const handleAvatarChange = async (ev: React.ChangeEvent<HTMLInputElement>) => {
+    const file = ev.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      toast.error('Please select an image file');
+      return;
+    }
+
+    if (file.size > MAX_AVATAR_SIZE) {
+      toast.error('Image must be smaller than 384KB');
+      return;
+    }
+
+    const base64 = await readFileAsBase64(file);
+    setAvatarPreview(base64);
+  };
+
+  const handleSubmit = async (ev: React.FormEvent) => {
+    ev.preventDefault();
+    if (isUpdating) return;
+
+    setIsUpdating(true);
+    try {
+      await updateUser({
+        name: profileForm.state.name ?? '',
+        avatar: avatarPreview ?? user?.avatar ?? '',
+      });
+      toast.success('Profile updated');
+      setAvatarPreview(null);
+    } catch (ex) {
+      const error = ex as { message?: string };
+      toast.error(error.message || 'Failed to update profile');
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const displayAvatar = avatarPreview ?? user?.avatar ?? undefined;
+
+  return (
+    <div>
+      <div className="flex justify-center mb-6">
+        <button
+          type="button"
+          className="relative group cursor-pointer rounded-full"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Avatar className="h-20 w-20 rounded-full">
+            <AvatarImage src={displayAvatar} />
+            <AvatarFallback className="bg-duck-teal text-duck-yellow text-2xl font-bold rounded-full">
+              {user?.name?.charAt(0).toUpperCase() ?? '?'}
+            </AvatarFallback>
+          </Avatar>
+          <div className="absolute inset-0 rounded-full bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <Camera className="h-6 w-6 text-white" />
+          </div>
+        </button>
+        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={handleAvatarChange} />
+      </div>
+
+      <form ref={profileForm.formRef} onSubmit={handleSubmit} className="grid gap-4">
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Email</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="email"
+            value={user?.email ?? ''}
+            disabled
+          />
+        </Label>
+
+        <Label className="grid gap-2">
+          <span className="text-duck-dark/70">Name</span>
+          <Input
+            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            type="text"
+            name="name"
+            placeholder="Your name"
+            autoComplete="name"
+          />
+        </Label>
+
+        <Button
+          type="submit"
+          disabled={isUpdating}
+          className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {isUpdating ? 'Saving...' : 'Save'}
+        </Button>
+      </form>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/index.tsx

@@ -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>
+  );
+};