feat: add setting for notification list style

src/pages/secondary/GeneralSettingsPage/index.tsx

@@ -1,11 +1,13 @@
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
 import { Switch } from '@/components/ui/switch'
+import { NOTIFICATION_LIST_STYLE } from '@/constants'
 import { LocalizedLanguageNames, TLanguage } from '@/i18n'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
 import { cn } from '@/lib/utils'
 import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useTheme } from '@/providers/ThemeProvider'
+import { useUserPreferences } from '@/providers/UserPreferencesProvider'
 import { useUserTrust } from '@/providers/UserTrustProvider'
 import { SelectValue } from '@radix-ui/react-select'
 import { ExternalLink } from 'lucide-react'
@@ -25,6 +27,7 @@ const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
     setHideContentMentioningMutedUsers
   } = useContentPolicy()
   const { hideUntrustedNotes, updateHideUntrustedNotes } = useUserTrust()
+  const { notificationListStyle, updateNotificationListStyle } = useUserPreferences()
 
   const handleLanguageChange = (value: TLanguage) => {
     i18n.changeLanguage(value)
@@ -66,6 +69,29 @@ 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="autoplay" className="text-base font-normal">
             <div>{t('Autoplay')}</div>