UI fixes (#445)

* fix: improve timeline input , ui improvement and fixes for participation tab

* fix: implement 2fa for email and password login

* fix: fix conflict

Author: Benjtalkshow

components/profile/update/Settings.tsx

@@ -18,6 +18,7 @@ import {
   updateUserSettings,
   UserAppearance,
   UserNotifications,
+  UserPreferences,
   UserPrivacy,
   UserSettings,
 } from '@/lib/api/auth';
@@ -75,6 +76,15 @@ interface SettingsProps {
 const Settings = ({ visibleSections }: SettingsProps) => {
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
+
+  const sections = visibleSections || [
+    'notifications',
+    'privacy',
+    'appearance',
+    'preferences',
+  ];
+  const showAllSections = !visibleSections || visibleSections.length === 0;
+
   const [settings, setSettings] = useState<UserSettings>({
     notifications: {
       emailNotifications: true,
@@ -221,6 +231,21 @@ const Settings = ({ visibleSections }: SettingsProps) => {
     }
   };
 
+  const onSubmitPreferences = async (data: UserPreferences) => {
+    setIsSaving(true);
+    try {
+      await updateUserSettings({
+        preferences: data,
+      });
+      toast.success('Preferences updated successfully');
+    } catch {
+      toast.error('Failed to update preferences');
+    } finally {
+      loadSettings();
+      setIsSaving(false);
+    }
+  };
+
   if (isLoading) {
     return (
       <div className='flex min-h-96 items-center justify-center'>
@@ -243,7 +268,7 @@ const Settings = ({ visibleSections }: SettingsProps) => {
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
           {/* Notifications */}
-          {(!visibleSections || visibleSections.includes('notifications')) && (
+          {sections.includes('notifications') && (
             <Card className='rounded-xl border border-zinc-800 bg-zinc-900/30 p-4'>
               <div className='mb-4 flex items-center gap-3'>
                 <Bell className='h-5 w-5 text-zinc-400' />
@@ -319,7 +344,7 @@ const Settings = ({ visibleSections }: SettingsProps) => {
           )}
 
           {/* Privacy */}
-          {(!visibleSections || visibleSections.includes('privacy')) && (
+          {sections.includes('privacy') && (
             <Card className='rounded-xl border border-zinc-800 bg-zinc-900/30 p-4'>
               <div className='mb-4 flex items-center gap-3'>
                 <Shield className='h-5 w-5 text-zinc-400' />
@@ -670,7 +695,13 @@ const Settings = ({ visibleSections }: SettingsProps) => {
                     <FormItem>
                       <FormLabel className='text-zinc-300'>Language</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
+                        onValueChange={async (value: string) => {
+                          field.onChange(value);
+                          await onSubmitPreferences({
+                            ...form.getValues('preferences'),
+                            language: value,
+                          });
+                        }}
                         value={field.value || undefined}
                       >
                         <FormControl>
@@ -724,7 +755,13 @@ const Settings = ({ visibleSections }: SettingsProps) => {
                     <FormItem>
                       <FormLabel className='text-zinc-300'>Timezone</FormLabel>
                       <Select
-                        onValueChange={field.onChange}
+                        onValueChange={async (value: string) => {
+                          field.onChange(value);
+                          await onSubmitPreferences({
+                            ...form.getValues('preferences'),
+                            timezone: value,
+                          });
+                        }}
                         defaultValue={field.value}
                       >
                         <FormControl>