Workspaces in Workspaces all around

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

@@ -52,7 +52,7 @@ export const ChangePassword = () => {
         <Label className="grid gap-2">
           <span className="text-duck-dark/70">{t('settings.profile.changePassword.currentPasswordLabel')}</span>
           <Input
-            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
             type="password"
             name="password"
             placeholder={t('settings.profile.changePassword.currentPasswordPlaceholder')}
@@ -63,7 +63,7 @@ export const ChangePassword = () => {
         <Label className="grid gap-2">
           <span className="text-duck-dark/70">{t('settings.profile.changePassword.newPasswordLabel')}</span>
           <Input
-            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
             type="password"
             name="newPassword"
             placeholder={t('settings.profile.changePassword.newPasswordPlaceholder')}
@@ -74,7 +74,7 @@ export const ChangePassword = () => {
         <Label className="grid gap-2">
           <span className="text-duck-dark/70">{t('settings.profile.changePassword.confirmPasswordLabel')}</span>
           <Input
-            className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
             type="password"
             name="confirmPassword"
             placeholder={t('settings.profile.changePassword.confirmPasswordPlaceholder')}

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

@@ -91,7 +91,7 @@ export const Languages = () => {
             <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"
+              className="text-sm border border-duck-dark/20 rounded-md px-3 py-1.5 bg-background/60 text-duck-dark cursor-pointer"
             >
               <option value="">{t('settings.profile.languages.addLanguage')}</option>
               {availableToAdd.map((l) => (
@@ -110,7 +110,7 @@ export const Languages = () => {
         <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"
+          className="text-sm border border-duck-dark/20 rounded-md px-3 py-2 bg-background/60 text-duck-dark cursor-pointer"
         >
           {spoken.map((code) => (
             <option key={code} value={code}>
@@ -127,7 +127,7 @@ export const Languages = () => {
         <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"
+          className="text-sm border border-duck-dark/20 rounded-md px-3 py-2 bg-background/60 text-duck-dark cursor-pointer"
         >
           {LANGUAGES.map((l) => (
             <option key={l.code} value={l.code}>

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

@@ -58,7 +58,7 @@ export const TaskDefaults = () => {
       <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">
+          <SelectTrigger className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark">
             <SelectValue placeholder="Same as chat default" />
           </SelectTrigger>
           <SelectContent className="z-[600] max-h-[300px]">

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

@@ -95,7 +95,7 @@ export const UserData = () => {
         <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"
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
             type="email"
             value={user?.email ?? ''}
             disabled
@@ -105,7 +105,7 @@ export const UserData = () => {
         <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"
+            className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
             type="text"
             name="name"
             placeholder="Your name"

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

@@ -1,106 +1,52 @@
-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 { useTranslation } from '@/lib/i18n';
+import { useMemo } from 'react';
+import { User, Lock, Globe, ListChecks } from 'lucide-react';
+import type { LayoutNode, PanelComponents } from '@/components/Workspace';
+import { WorkspaceLayout } from '@/components/Workspace';
+import { appRegistry } from '../../Workspaces/app-registry';
+import { createSettingsPanelComponents, type SettingsSection } from '../SettingsPanel';
 import { UserData } from './UserData';
 import { ChangePassword } from './ChangePassword';
 import { Languages } from './Languages';
 import { TaskDefaults } from './TaskDefaults';
 
-export const ProfileSettings = () => {
-  const { t } = useTranslation();
-  const [search, setSearch] = useState('');
-  const [expanded, setExpanded] = useState<string[]>([]);
-  const sectionRefs = useRef<Record<string, HTMLDivElement | null>>({});
+const GLOBAL_KEY = 'PROFILE_SETTINGS_SELECTED';
 
-  const sections = useMemo(
-    () => [
-      {
-        key: 'profile',
-        icon: User,
-        title: t('settings.profile.sections.profileTitle'),
-        description: t('settings.profile.sections.profileDescription'),
-        content: <UserData />,
-      },
-      {
-        key: 'change-password',
-        icon: Lock,
-        title: t('settings.profile.sections.changePasswordTitle'),
-        description: t('settings.profile.sections.changePasswordDescription'),
-        content: <ChangePassword />,
-      },
-      {
-        key: 'tasks',
-        icon: ListChecks,
-        title: t('settings.profile.sections.tasksTitle'),
-        description: t('settings.profile.sections.tasksDescription'),
-        content: <TaskDefaults />,
-      },
-      {
-        key: 'languages',
-        icon: Globe,
-        title: t('settings.profile.sections.languagesTitle'),
-        description: t('settings.profile.sections.languagesDescription'),
-        content: <Languages />,
-      },
-    ],
-    [t],
+const sections: SettingsSection[] = [
+  { key: 'profile', icon: User, title: 'Profile', description: 'Avatar, name, and email', content: <UserData /> },
+  { key: 'change-password', icon: Lock, title: 'Change Password', description: 'Update your password', content: <ChangePassword /> },
+  { key: 'tasks', icon: ListChecks, title: 'Task Defaults', description: 'Default model for tasks', content: <TaskDefaults /> },
+  { key: 'languages', icon: Globe, title: 'Languages', description: 'Spoken, default, and translation', content: <Languages /> },
+];
+
+const { Sidebar, Content } = createSettingsPanelComponents({
+  globalKey: GLOBAL_KEY,
+  sidebarIcon: User,
+  sidebarLabel: 'Profile',
+  sections,
+});
+
+const layout: LayoutNode = {
+  type: 'group',
+  id: 'profile-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'profile-left', appType: null }, size: 20 },
+    { node: { type: 'panel', id: 'profile-right', appType: null }, size: 80 },
+  ],
+};
+
+export const ProfileSettings = () => {
+  const panelComponents: PanelComponents = useMemo(
+    () => ({
+      'profile-left': Sidebar,
+      'profile-right': Content,
+    }),
+    [],
   );
 
-  const allKeys = useMemo(() => sections.map((s) => s.key), [sections]);
-
-  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, allKeys, sections]);
-
-  useEffect(() => {
-    if (search) setExpanded(matchingKeys);
-  }, [search, matchingKeys]);
-
   return (
-    <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={t('settings.profile.searchPlaceholder')}
-            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 className="px-1">{section.content}</AccordionContent>
-              </AccordionItem>
-            </div>
-          ))}
-        </Accordion>
-      </Card>
+    <div className="h-full w-full pt-2">
+      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} registry={appRegistry} components={panelComponents} />
     </div>
   );
 };