refactor: move notification list style setting to appearance page

src/pages/secondary/AppearanceSettingsPage/index.tsx

@@ -4,7 +4,7 @@ import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { cn } from '@/lib/utils'
 import { useTheme } from '@/providers/ThemeProvider'
 import { useUserPreferences } from '@/providers/UserPreferencesProvider'
-import { Monitor, Moon, Sun, Columns2, PanelLeft } from 'lucide-react'
+import { Columns2, LayoutList, List, Monitor, Moon, PanelLeft, Sun } from 'lucide-react'
 import { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -20,14 +20,38 @@ const LAYOUTS = [
   { key: true, label: 'Single column', icon: <PanelLeft className="size-5" /> }
 ] as const
 
+const NOTIFICATION_STYLES = [
+  { key: 'detailed', label: 'Detailed', icon: <LayoutList className="size-5" /> },
+  { key: 'compact', label: 'Compact', icon: <List className="size-5" /> }
+] as const
+
 const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
   const { t } = useTranslation()
   const { themeSetting, setThemeSetting, primaryColor, setPrimaryColor } = useTheme()
-  const { enableSingleColumnLayout, updateEnableSingleColumnLayout } = useUserPreferences()
+  const {
+    enableSingleColumnLayout,
+    updateEnableSingleColumnLayout,
+    notificationListStyle,
+    updateNotificationListStyle
+  } = useUserPreferences()
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Appearance')}>
       <div className="space-y-4 my-3">
+        <div className="flex flex-col gap-2 px-4">
+          <Label className="text-base">{t('Theme')}</Label>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
+            {THEMES.map(({ key, label, icon }) => (
+              <OptionButton
+                key={key}
+                isSelected={themeSetting === key}
+                icon={icon}
+                label={t(label)}
+                onClick={() => setThemeSetting(key)}
+              />
+            ))}
+          </div>
+        </div>
         <div className="flex flex-col gap-2 px-4">
           <Label className="text-base">{t('Layout')}</Label>
           <div className="grid grid-cols-2 gap-4 w-full">
@@ -43,15 +67,15 @@ const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) =
           </div>
         </div>
         <div className="flex flex-col gap-2 px-4">
-          <Label className="text-base">{t('Theme')}</Label>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
-            {THEMES.map(({ key, label, icon }) => (
+          <Label className="text-base">{t('Notification list style')}</Label>
+          <div className="grid grid-cols-2 gap-4 w-full">
+            {NOTIFICATION_STYLES.map(({ key, label, icon }) => (
               <OptionButton
                 key={key}
-                isSelected={themeSetting === key}
+                isSelected={notificationListStyle === key}
                 icon={icon}
                 label={t(label)}
-                onClick={() => setThemeSetting(key)}
+                onClick={() => updateNotificationListStyle(key)}
               />
             ))}
           </div>

src/pages/secondary/GeneralSettingsPage/index.tsx

@@ -1,12 +1,11 @@
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
 import { Switch } from '@/components/ui/switch'
-import { MEDIA_AUTO_LOAD_POLICY, NOTIFICATION_LIST_STYLE } from '@/constants'
+import { MEDIA_AUTO_LOAD_POLICY } from '@/constants'
 import { LocalizedLanguageNames, TLanguage } from '@/i18n'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { cn, isSupportCheckConnectionType } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
-import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import { TMediaAutoLoadPolicy } from '@/types'
 import { SelectValue } from '@radix-ui/react-select'
@@ -28,7 +27,6 @@ const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
     setMediaAutoLoadPolicy
   } = useContentPolicy()
   const { hideUntrustedNotes, updateHideUntrustedNotes } = useUserTrust()
-  const { notificationListStyle, updateNotificationListStyle } = useUserPreferences()
 
   const handleLanguageChange = (value: TLanguage) => {
     i18n.changeLanguage(value)
@@ -55,29 +53,6 @@ const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
             </SelectContent>
           </Select>
         </SettingItem>
-        <SettingItem>
-          <Label htmlFor="notification-list-style" className="text-base font-normal">
-            <div>{t('Notification list style')}</div>
-            <div className="text-muted-foreground">
-              {notificationListStyle === NOTIFICATION_LIST_STYLE.DETAILED
-                ? t('See extra info for each notification')
-                : t('See more notifications at a glance')}
-            </div>
-          </Label>
-          <Select
-            defaultValue={NOTIFICATION_LIST_STYLE.DETAILED}
-            value={notificationListStyle}
-            onValueChange={updateNotificationListStyle}
-          >
-            <SelectTrigger id="notification-list-style" className="w-48">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={NOTIFICATION_LIST_STYLE.DETAILED}>{t('Detailed')}</SelectItem>
-              <SelectItem value={NOTIFICATION_LIST_STYLE.COMPACT}>{t('Compact')}</SelectItem>
-            </SelectContent>
-          </Select>
-        </SettingItem>
         <SettingItem>
           <Label htmlFor="media-auto-load-policy" className="text-base font-normal">
             {t('Auto-load media')}