feat(settings): separate personalization & preferences

src/components/Settings/Sections/Personalization.tsx

@@ -0,0 +1,29 @@
+import { UIConfigField } from '@/lib/config/types';
+import SettingsField from '../SettingsField';
+
+const Personalization = ({
+  fields,
+  values,
+}: {
+  fields: UIConfigField[];
+  values: Record<string, any>;
+}) => {
+  return (
+    <div className="flex-1 space-y-6 overflow-y-auto px-6 py-6">
+      {fields.map((field) => (
+        <SettingsField
+          key={field.key}
+          field={field}
+          value={
+            (field.scope === 'client'
+              ? localStorage.getItem(field.key)
+              : values[field.key]) ?? field.default
+          }
+          dataAdd="personalization"
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Personalization;

src/components/Settings/Sections/Preferences.tsx

@@ -1,7 +1,7 @@
 import { UIConfigField } from '@/lib/config/types';
 import SettingsField from '../SettingsField';
 
-const General = ({
+const Preferences = ({
   fields,
   values,
 }: {
@@ -19,11 +19,11 @@ const General = ({
               ? localStorage.getItem(field.key)
               : values[field.key]) ?? field.default
           }
-          dataAdd="general"
+          dataAdd="preferences"
         />
       ))}
     </div>
   );
 };
 
-export default General;
+export default Preferences;

src/components/Settings/SettingsDialogue.tsx

@@ -4,9 +4,10 @@ import {
   BrainCog,
   ChevronLeft,
   Search,
-  Settings,
+  Sliders,
+  ToggleRight,
 } from 'lucide-react';
-import General from './Sections/General';
+import Preferences from './Sections/Preferences';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
@@ -15,15 +16,24 @@ import { cn } from '@/lib/utils';
 import Models from './Sections/Models/Section';
 import SearchSection from './Sections/Search';
 import Select from '@/components/ui/Select';
+import Personalization from './Sections/Personalization';
 
 const sections = [
   {
-    key: 'general',
-    name: 'General',
-    description: 'Adjust common settings.',
-    icon: Settings,
-    component: General,
-    dataAdd: 'general',
+    key: 'preferences',
+    name: 'Preferences',
+    description: 'Customize your application preferences.',
+    icon: Sliders,
+    component: Preferences,
+    dataAdd: 'preferences',
+  },
+  {
+    key: 'personalization',
+    name: 'Personalization',
+    description: 'Customize the behavior and tone of the model.',
+    icon: ToggleRight,
+    component: Personalization,
+    dataAdd: 'personalization',
   },
   {
     key: 'models',