feat: add autoplay switch

src/pages/secondary/GeneralSettingsPage/index.tsx

@@ -0,0 +1,89 @@
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { LocalizedLanguageNames, TLanguage } from '@/i18n'
+import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
+import { cn } from '@/lib/utils'
+import { useAutoplay } from '@/providers/AutoplayProvider'
+import { useTheme } from '@/providers/ThemeProvider'
+import { SelectValue } from '@radix-ui/react-select'
+import { forwardRef, HTMLProps, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
+  const { t, i18n } = useTranslation()
+  const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
+  const { themeSetting, setThemeSetting } = useTheme()
+  const { autoplay, setAutoplay } = useAutoplay()
+
+  const handleLanguageChange = (value: TLanguage) => {
+    i18n.changeLanguage(value)
+    setLanguage(value)
+  }
+
+  return (
+    <SecondaryPageLayout ref={ref} index={index} title={t('General')}>
+      <div className="space-y-4 mt-2">
+        <SettingItem>
+          <Label htmlFor="languages" className="text-base font-normal">
+            {t('Languages')}
+          </Label>
+          <Select defaultValue="en" value={language} onValueChange={handleLanguageChange}>
+            <SelectTrigger id="languages" className="w-48">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(LocalizedLanguageNames).map(([key, value]) => (
+                <SelectItem key={key} value={key}>
+                  {value}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </SettingItem>
+        <SettingItem>
+          <Label htmlFor="theme" className="text-base font-normal">
+            {t('Theme')}
+          </Label>
+          <Select defaultValue="system" value={themeSetting} onValueChange={setThemeSetting}>
+            <SelectTrigger id="theme" className="w-48">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">{t('System')}</SelectItem>
+              <SelectItem value="light">{t('Light')}</SelectItem>
+              <SelectItem value="dark">{t('Dark')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItem>
+        <SettingItem>
+          <Label htmlFor="autoplay" className="text-base font-normal">
+            <div>{t('Autoplay')}</div>
+            <div className="text-muted-foreground">{t('Enable video autoplay on this device')}</div>
+          </Label>
+          <Switch id="autoplay" checked={autoplay} onCheckedChange={setAutoplay} />
+        </SettingItem>
+      </div>
+    </SecondaryPageLayout>
+  )
+})
+GeneralSettingsPage.displayName = 'GeneralSettingsPage'
+export default GeneralSettingsPage
+
+const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          'flex justify-between select-none items-center px-4 min-h-9 [&_svg]:size-4 [&_svg]:shrink-0',
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+SettingItem.displayName = 'SettingItem'

src/pages/secondary/SettingsPage/index.tsx

@@ -1,78 +1,39 @@
 import AboutInfoDialog from '@/components/AboutInfoDialog'
 import Donation from '@/components/Donation'
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
-import { LocalizedLanguageNames, TLanguage } from '@/i18n'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { toPostSettings, toRelaySettings, toWallet } from '@/lib/link'
+import { toGeneralSettings, toPostSettings, toRelaySettings, toWallet } from '@/lib/link'
 import { cn } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
-import { useTheme } from '@/providers/ThemeProvider'
-import { SelectValue } from '@radix-ui/react-select'
 import {
   Check,
   ChevronRight,
   Copy,
   Info,
   KeyRound,
-  Languages,
   PencilLine,
   Server,
-  SunMoon,
+  Settings2,
   Wallet
 } from 'lucide-react'
 import { forwardRef, HTMLProps, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
   const { nsec, ncryptsec } = useNostr()
   const { push } = useSecondaryPage()
-  const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
-  const { themeSetting, setThemeSetting } = useTheme()
   const [copiedNsec, setCopiedNsec] = useState(false)
   const [copiedNcryptsec, setCopiedNcryptsec] = useState(false)
 
-  const handleLanguageChange = (value: TLanguage) => {
-    i18n.changeLanguage(value)
-    setLanguage(value)
-  }
-
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Settings')}>
-      <SettingItem>
+      <SettingItem className="clickable" onClick={() => push(toGeneralSettings())}>
         <div className="flex items-center gap-4">
-          <Languages />
-          <div>{t('Languages')}</div>
+          <Settings2 />
+          <div>{t('General')}</div>
         </div>
-        <Select defaultValue="en" value={language} onValueChange={handleLanguageChange}>
-          <SelectTrigger className="w-48">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {Object.entries(LocalizedLanguageNames).map(([key, value]) => (
-              <SelectItem key={key} value={key}>
-                {value}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </SettingItem>
-      <SettingItem>
-        <div className="flex items-center gap-4">
-          <SunMoon />
-          <div>{t('Theme')}</div>
-        </div>
-        <Select defaultValue="system" value={themeSetting} onValueChange={setThemeSetting}>
-          <SelectTrigger className="w-48">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="system">{t('System')}</SelectItem>
-            <SelectItem value="light">{t('Light')}</SelectItem>
-            <SelectItem value="dark">{t('Dark')}</SelectItem>
-          </SelectContent>
-        </Select>
+        <ChevronRight />
       </SettingItem>
       <SettingItem className="clickable" onClick={() => push(toRelaySettings())}>
         <div className="flex items-center gap-4">