From efbe4f8d904421fdd671589dc45928d2c80347c4 Mon Sep 17 00:00:00 2001
From: therainisme <therainisme@qq.com>
Date: Tue, 27 Jan 2026 17:27:31 +0800
Subject: [PATCH] feat(web): add font size setting

- Add Settings > Display > Font Size selector (80/90/100/110/120%)
- Persist preference (hapi-font-scale) and apply globally via --app-font-scale
- Normalize main UI typography to match Settings
---
 web/index.html                                |  13 ++
 .../AssistantChat/AttachmentItem.tsx          |   2 +-
 .../AssistantChat/HappyComposer.tsx           |   2 +-
 .../messages/MessageAttachments.tsx           |   2 +-
 web/src/components/MarkdownRenderer.tsx       |   2 +-
 web/src/components/SessionActionMenu.tsx      |   2 +-
 web/src/components/SessionList.tsx            |   4 +-
 .../components/assistant-ui/markdown-text.tsx |  14 +--
 .../assistant-ui/shiki-highlighter.tsx        |   2 +-
 web/src/hooks/useFontScale.ts                 | 114 ++++++++++++++++++
 web/src/index.css                             |   8 +-
 web/src/lib/locales/en.ts                     |   2 +
 web/src/lib/locales/zh-CN.ts                  |   2 +
 web/src/main.tsx                              |   3 +
 web/src/routes/settings/index.tsx             |  82 ++++++++++++-
 15 files changed, 232 insertions(+), 22 deletions(-)
 create mode 100644 web/src/hooks/useFontScale.ts

diff --git a/web/index.html b/web/index.html
index 4c1cabdd..b764f311 100644
--- a/web/index.html
+++ b/web/index.html
@@ -32,6 +32,19 @@
                 html { background: #1c1c1e; color-scheme: dark }
             }
         </style>
+        <script>
+            (function () {
+                try {
+                    var raw = localStorage.getItem('hapi-font-scale')
+                    var scale = Number(raw)
+                    if (scale === 0.8 || scale === 0.9 || scale === 1 || scale === 1.1 || scale === 1.2) {
+                        document.documentElement.style.setProperty('--app-font-scale', String(scale))
+                    }
+                } catch (error) {
+                    // Ignore storage errors.
+                }
+            })()
+        </script>
         <script>
             if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                 document.documentElement.setAttribute('data-theme', 'dark')
diff --git a/web/src/components/AssistantChat/AttachmentItem.tsx b/web/src/components/AssistantChat/AttachmentItem.tsx
index a4209fe3..4f7e2668 100644
--- a/web/src/components/AssistantChat/AttachmentItem.tsx
+++ b/web/src/components/AssistantChat/AttachmentItem.tsx
@@ -36,7 +36,7 @@ export function AttachmentItem() {
     const isError = status.type === 'incomplete'
 
     return (
-        <AttachmentPrimitive.Root className="flex items-center gap-2 rounded-lg bg-[var(--app-subtle-bg)] px-3 py-2 text-sm text-[var(--app-fg)]">
+        <AttachmentPrimitive.Root className="flex items-center gap-2 rounded-lg bg-[var(--app-subtle-bg)] px-3 py-2 text-base text-[var(--app-fg)]">
             {isUploading ? <Spinner size="sm" label={null} className="text-[var(--app-hint)]" /> : null}
             {isError ? (
                 <span className="text-red-500">
diff --git a/web/src/components/AssistantChat/HappyComposer.tsx b/web/src/components/AssistantChat/HappyComposer.tsx
index 9f5b0761..fdb4707f 100644
--- a/web/src/components/AssistantChat/HappyComposer.tsx
+++ b/web/src/components/AssistantChat/HappyComposer.tsx
@@ -550,7 +550,7 @@ export function HappyComposer(props: {
                                 onSelect={handleSelect}
                                 onKeyDown={handleKeyDown}
                                 onPaste={handlePaste}
-                                className="flex-1 resize-none bg-transparent text-sm leading-snug text-[var(--app-fg)] placeholder-[var(--app-hint)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                                className="flex-1 resize-none bg-transparent text-base leading-snug text-[var(--app-fg)] placeholder-[var(--app-hint)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                             />
                         </div>
 
diff --git a/web/src/components/AssistantChat/messages/MessageAttachments.tsx b/web/src/components/AssistantChat/messages/MessageAttachments.tsx
index 26da8ccd..11eb6b36 100644
--- a/web/src/components/AssistantChat/messages/MessageAttachments.tsx
+++ b/web/src/components/AssistantChat/messages/MessageAttachments.tsx
@@ -32,7 +32,7 @@ function FileAttachment(props: { attachment: AttachmentMetadata }) {
         <div className="flex items-center gap-2 rounded-lg bg-[var(--app-bg)] px-3 py-2">
             <FileIcon fileName={attachment.filename} size={24} />
             <div className="min-w-0 flex-1">
-                <div className="truncate text-sm font-medium text-[var(--app-fg)]">
+                <div className="truncate text-base font-medium text-[var(--app-fg)]">
                     {attachment.filename}
                 </div>
                 <div className="text-xs text-[var(--app-hint)]">
diff --git a/web/src/components/MarkdownRenderer.tsx b/web/src/components/MarkdownRenderer.tsx
index dede0697..685aeb42 100644
--- a/web/src/components/MarkdownRenderer.tsx
+++ b/web/src/components/MarkdownRenderer.tsx
@@ -19,7 +19,7 @@ function MarkdownContent(props: MarkdownRendererProps) {
             <MarkdownTextPrimitive
                 remarkPlugins={MARKDOWN_PLUGINS}
                 components={mergedComponents}
-                className={cn('aui-md min-w-0 max-w-full break-words text-sm')}
+                className={cn('aui-md min-w-0 max-w-full break-words text-base')}
             />
         </TextMessagePartProvider>
     )
diff --git a/web/src/components/SessionActionMenu.tsx b/web/src/components/SessionActionMenu.tsx
index 9f86e5b1..88d6ab97 100644
--- a/web/src/components/SessionActionMenu.tsx
+++ b/web/src/components/SessionActionMenu.tsx
@@ -209,7 +209,7 @@ export function SessionActionMenu(props: SessionActionMenuProps) {
         : undefined
 
     const baseItemClassName =
-        'flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--app-link)]'
+        'flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--app-link)]'
 
     return (
         <div
diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index 032cc6a9..28d2882a 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -215,7 +215,7 @@ function SessionItem(props: {
                                 className={`h-2 w-2 rounded-full ${statusDotClass}`}
                             />
                         </span>
-                        <div className="truncate text-sm font-medium">
+                        <div className="truncate text-base font-medium">
                             {sessionName}
                         </div>
                     </div>
@@ -390,7 +390,7 @@ export function SessionList(props: {
                                     collapsed={isCollapsed}
                                 />
                                 <div className="flex items-center gap-2 min-w-0 flex-1">
-                                    <span className="font-medium text-sm break-words" title={group.directory}>
+                                    <span className="font-medium text-base break-words" title={group.directory}>
                                         {group.displayName}
                                     </span>
                                     <span className="shrink-0 text-xs text-[var(--app-hint)]">
diff --git a/web/src/components/assistant-ui/markdown-text.tsx b/web/src/components/assistant-ui/markdown-text.tsx
index 326c5fb9..19906789 100644
--- a/web/src/components/assistant-ui/markdown-text.tsx
+++ b/web/src/components/assistant-ui/markdown-text.tsx
@@ -42,7 +42,7 @@ function Pre(props: ComponentPropsWithoutRef<'pre'>) {
             <pre
                 {...rest}
                 className={cn(
-                    'aui-md-pre m-0 w-max min-w-full rounded-b-md rounded-t-none bg-[var(--app-code-bg)] p-2 text-xs',
+                    'aui-md-pre m-0 w-max min-w-full rounded-b-md rounded-t-none bg-[var(--app-code-bg)] p-2 text-sm',
                     className
                 )}
             />
@@ -160,23 +160,23 @@ function H1(props: ComponentPropsWithoutRef<'h1'>) {
 }
 
 function H2(props: ComponentPropsWithoutRef<'h2'>) {
-    return <h2 {...props} className={cn('aui-md-h2 mt-3 text-sm font-semibold', props.className)} />
+    return <h2 {...props} className={cn('aui-md-h2 mt-3 text-base font-semibold', props.className)} />
 }
 
 function H3(props: ComponentPropsWithoutRef<'h3'>) {
-    return <h3 {...props} className={cn('aui-md-h3 mt-2 text-sm font-semibold', props.className)} />
+    return <h3 {...props} className={cn('aui-md-h3 mt-2 text-base font-semibold', props.className)} />
 }
 
 function H4(props: ComponentPropsWithoutRef<'h4'>) {
-    return <h4 {...props} className={cn('aui-md-h4 mt-2 text-sm font-semibold', props.className)} />
+    return <h4 {...props} className={cn('aui-md-h4 mt-2 text-base font-semibold', props.className)} />
 }
 
 function H5(props: ComponentPropsWithoutRef<'h5'>) {
-    return <h5 {...props} className={cn('aui-md-h5 mt-2 text-sm font-semibold', props.className)} />
+    return <h5 {...props} className={cn('aui-md-h5 mt-2 text-base font-semibold', props.className)} />
 }
 
 function H6(props: ComponentPropsWithoutRef<'h6'>) {
-    return <h6 {...props} className={cn('aui-md-h6 mt-2 text-sm font-semibold', props.className)} />
+    return <h6 {...props} className={cn('aui-md-h6 mt-2 text-base font-semibold', props.className)} />
 }
 
 function Strong(props: ComponentPropsWithoutRef<'strong'>) {
@@ -225,7 +225,7 @@ export function MarkdownText() {
         <MarkdownTextPrimitive
             remarkPlugins={MARKDOWN_PLUGINS}
             components={defaultComponents}
-            className={cn('aui-md min-w-0 max-w-full break-words text-sm')}
+            className={cn('aui-md min-w-0 max-w-full break-words text-base')}
         />
     )
 }
diff --git a/web/src/components/assistant-ui/shiki-highlighter.tsx b/web/src/components/assistant-ui/shiki-highlighter.tsx
index 383d545e..acbd7d74 100644
--- a/web/src/components/assistant-ui/shiki-highlighter.tsx
+++ b/web/src/components/assistant-ui/shiki-highlighter.tsx
@@ -6,7 +6,7 @@ export function SyntaxHighlighter(props: SyntaxHighlighterProps) {
 
     return (
         <div className="aui-md-codeblock min-w-0 w-full max-w-full overflow-x-auto overflow-y-hidden rounded-b-md bg-[var(--app-code-bg)]">
-            <pre className="shiki m-0 w-max min-w-full p-2 text-xs font-mono">
+            <pre className="shiki m-0 w-max min-w-full p-2 text-sm font-mono">
                 <code className="block">{highlighted ?? props.code}</code>
             </pre>
         </div>
diff --git a/web/src/hooks/useFontScale.ts b/web/src/hooks/useFontScale.ts
new file mode 100644
index 00000000..fc0b426a
--- /dev/null
+++ b/web/src/hooks/useFontScale.ts
@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react'
+
+export type FontScale = 0.8 | 0.9 | 1 | 1.1 | 1.2
+
+export function getFontScaleOptions(): ReadonlyArray<{ value: FontScale; label: string }> {
+    return [
+        { value: 0.8, label: '80%' },
+        { value: 0.9, label: '90%' },
+        { value: 1, label: '100%' },
+        { value: 1.1, label: '110%' },
+        { value: 1.2, label: '120%' },
+    ]
+}
+
+function getFontScaleStorageKey(): string {
+    return 'hapi-font-scale'
+}
+
+function isBrowser(): boolean {
+    return typeof window !== 'undefined' && typeof document !== 'undefined'
+}
+
+function safeGetItem(key: string): string | null {
+    if (!isBrowser()) {
+        return null
+    }
+    try {
+        return localStorage.getItem(key)
+    } catch {
+        return null
+    }
+}
+
+function safeSetItem(key: string, value: string): void {
+    if (!isBrowser()) {
+        return
+    }
+    try {
+        localStorage.setItem(key, value)
+    } catch {
+        // Ignore storage errors
+    }
+}
+
+function safeRemoveItem(key: string): void {
+    if (!isBrowser()) {
+        return
+    }
+    try {
+        localStorage.removeItem(key)
+    } catch {
+        // Ignore storage errors
+    }
+}
+
+function parseFontScale(raw: string | null): FontScale {
+    const value = Number(raw)
+    if (value === 0.8 || value === 0.9 || value === 1 || value === 1.1 || value === 1.2) {
+        return value
+    }
+    return 1
+}
+
+function applyFontScale(scale: FontScale): void {
+    if (!isBrowser()) {
+        return
+    }
+    document.documentElement.style.setProperty('--app-font-scale', String(scale))
+}
+
+function getInitialFontScale(): FontScale {
+    return parseFontScale(safeGetItem(getFontScaleStorageKey()))
+}
+
+export function initializeFontScale(): void {
+    applyFontScale(getInitialFontScale())
+}
+
+export function useFontScale(): { fontScale: FontScale; setFontScale: (scale: FontScale) => void } {
+    const [fontScale, setFontScaleState] = useState<FontScale>(getInitialFontScale)
+
+    useLayoutEffect(() => {
+        applyFontScale(fontScale)
+    }, [fontScale])
+
+    useEffect(() => {
+        if (!isBrowser()) {
+            return
+        }
+
+        const onStorage = (event: StorageEvent) => {
+            if (event.key !== getFontScaleStorageKey()) {
+                return
+            }
+            const nextScale = parseFontScale(event.newValue)
+            setFontScaleState(nextScale)
+        }
+
+        window.addEventListener('storage', onStorage)
+        return () => window.removeEventListener('storage', onStorage)
+    }, [])
+
+    const setFontScale = useCallback((scale: FontScale) => {
+        setFontScaleState(scale)
+
+        if (scale === 1) {
+            safeRemoveItem(getFontScaleStorageKey())
+        } else {
+            safeSetItem(getFontScaleStorageKey(), String(scale))
+        }
+    }, [])
+
+    return { fontScale, setFontScale }
+}
diff --git a/web/src/index.css b/web/src/index.css
index 7ec58126..c0c952c2 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -42,6 +42,8 @@
     --app-badge-error-bg: rgba(239, 68, 68, 0.18);
     --app-badge-error-text: #b91c1c;
     --app-badge-error-border: rgba(239, 68, 68, 0.3);
+
+    --app-font-scale: 1;
 }
 
 [data-theme="dark"] {
@@ -87,6 +89,10 @@
     --app-badge-error-border: rgba(248, 113, 113, 0.35);
 }
 
+html {
+    font-size: calc(100% * var(--app-font-scale));
+}
+
 html,
 body {
     height: 100vh;
@@ -126,7 +132,7 @@ body {
     margin: 0;
     padding: 0.5rem;
     background-color: transparent !important;
-    font-size: 0.75rem;
+    font-size: 0.875rem;
 }
 
 .aui-md-codeblock pre.shiki code {
diff --git a/web/src/lib/locales/en.ts b/web/src/lib/locales/en.ts
index 98bc0bf9..6d5fa78f 100644
--- a/web/src/lib/locales/en.ts
+++ b/web/src/lib/locales/en.ts
@@ -234,6 +234,8 @@ export default {
   'settings.title': 'Settings',
   'settings.language.title': 'Language',
   'settings.language.label': 'Language',
+  'settings.display.title': 'Display',
+  'settings.display.fontSize': 'Font Size',
   'settings.voice.title': 'Voice Assistant',
   'settings.voice.language': 'Voice Language',
   'settings.voice.autoDetect': 'Auto-detect',
diff --git a/web/src/lib/locales/zh-CN.ts b/web/src/lib/locales/zh-CN.ts
index 16c9fa83..e3db3ef7 100644
--- a/web/src/lib/locales/zh-CN.ts
+++ b/web/src/lib/locales/zh-CN.ts
@@ -236,6 +236,8 @@ export default {
   'settings.title': '设置',
   'settings.language.title': '语言',
   'settings.language.label': '语言',
+  'settings.display.title': '显示',
+  'settings.display.fontSize': '字体大小',
   'settings.voice.title': '语音助手',
   'settings.voice.language': '语音语言',
   'settings.voice.autoDetect': '自动检测',
diff --git a/web/src/main.tsx b/web/src/main.tsx
index c8138d08..b88697c0 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -5,6 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RouterProvider, createMemoryHistory } from '@tanstack/react-router'
 import './index.css'
 import { registerSW } from 'virtual:pwa-register'
+import { initializeFontScale } from '@/hooks/useFontScale'
 import { getTelegramWebApp, isTelegramEnvironment, loadTelegramSdk } from './hooks/useTelegram'
 import { queryClient } from './lib/query-client'
 import { createAppRouter } from './router'
@@ -32,6 +33,8 @@ function getInitialPath(): string {
 }
 
 async function bootstrap() {
+    initializeFontScale()
+
     // Only load Telegram SDK in Telegram environment (with 3s timeout)
     const isTelegram = isTelegramEnvironment()
     if (isTelegram) {
diff --git a/web/src/routes/settings/index.tsx b/web/src/routes/settings/index.tsx
index 4730d022..98ee26c9 100644
--- a/web/src/routes/settings/index.tsx
+++ b/web/src/routes/settings/index.tsx
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react'
 import { useTranslation, type Locale } from '@/lib/use-translation'
 import { useAppGoBack } from '@/hooks/useAppGoBack'
 import { getElevenLabsSupportedLanguages, getLanguageDisplayName, type Language } from '@/lib/languages'
+import { getFontScaleOptions, useFontScale, type FontScale } from '@/hooks/useFontScale'
 
 const locales: { value: Locale; nativeLabel: string }[] = [
     { value: 'en', nativeLabel: 'English' },
@@ -71,16 +72,21 @@ export default function SettingsPage() {
     const { t, locale, setLocale } = useTranslation()
     const goBack = useAppGoBack()
     const [isOpen, setIsOpen] = useState(false)
+    const [isFontOpen, setIsFontOpen] = useState(false)
     const [isVoiceOpen, setIsVoiceOpen] = useState(false)
     const containerRef = useRef<HTMLDivElement>(null)
+    const fontContainerRef = useRef<HTMLDivElement>(null)
     const voiceContainerRef = useRef<HTMLDivElement>(null)
+    const { fontScale, setFontScale } = useFontScale()
 
     // Voice language state - read from localStorage
     const [voiceLanguage, setVoiceLanguage] = useState<string | null>(() => {
         return localStorage.getItem('hapi-voice-lang')
     })
 
+    const fontScaleOptions = getFontScaleOptions()
     const currentLocale = locales.find((loc) => loc.value === locale)
+    const currentFontScaleLabel = fontScaleOptions.find((opt) => opt.value === fontScale)?.label ?? '100%'
     const currentVoiceLanguage = voiceLanguages.find((lang) => lang.code === voiceLanguage)
 
     const handleLocaleChange = (newLocale: Locale) => {
@@ -88,6 +94,11 @@ export default function SettingsPage() {
         setIsOpen(false)
     }
 
+    const handleFontScaleChange = (newScale: FontScale) => {
+        setFontScale(newScale)
+        setIsFontOpen(false)
+    }
+
     const handleVoiceLanguageChange = (language: Language) => {
         setVoiceLanguage(language.code)
         if (language.code === null) {
@@ -100,12 +111,15 @@ export default function SettingsPage() {
 
     // Close dropdown when clicking outside
     useEffect(() => {
-        if (!isOpen && !isVoiceOpen) return
+        if (!isOpen && !isFontOpen && !isVoiceOpen) return
 
         const handleClickOutside = (event: MouseEvent) => {
             if (isOpen && containerRef.current && !containerRef.current.contains(event.target as Node)) {
                 setIsOpen(false)
             }
+            if (isFontOpen && fontContainerRef.current && !fontContainerRef.current.contains(event.target as Node)) {
+                setIsFontOpen(false)
+            }
             if (isVoiceOpen && voiceContainerRef.current && !voiceContainerRef.current.contains(event.target as Node)) {
                 setIsVoiceOpen(false)
             }
@@ -113,22 +127,23 @@ export default function SettingsPage() {
 
         document.addEventListener('mousedown', handleClickOutside)
         return () => document.removeEventListener('mousedown', handleClickOutside)
-    }, [isOpen, isVoiceOpen])
+    }, [isOpen, isFontOpen, isVoiceOpen])
 
     // Close on escape key
     useEffect(() => {
-        if (!isOpen && !isVoiceOpen) return
+        if (!isOpen && !isFontOpen && !isVoiceOpen) return
 
         const handleEscape = (event: KeyboardEvent) => {
             if (event.key === 'Escape') {
                 setIsOpen(false)
+                setIsFontOpen(false)
                 setIsVoiceOpen(false)
             }
         }
 
         document.addEventListener('keydown', handleEscape)
         return () => document.removeEventListener('keydown', handleEscape)
-    }, [isOpen, isVoiceOpen])
+    }, [isOpen, isFontOpen, isVoiceOpen])
 
     return (
         <div className="flex h-full flex-col">
@@ -182,7 +197,7 @@ export default function SettingsPage() {
                                                 role="option"
                                                 aria-selected={isSelected}
                                                 onClick={() => handleLocaleChange(loc.value)}
-                                                className={`flex items-center justify-between w-full px-3 py-2 text-sm text-left transition-colors ${
+                                                className={`flex items-center justify-between w-full px-3 py-2 text-base text-left transition-colors ${
                                                     isSelected
                                                         ? 'text-[var(--app-link)] bg-[var(--app-subtle-bg)]'
                                                         : 'text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]'
@@ -202,6 +217,61 @@ export default function SettingsPage() {
                         </div>
                     </div>
 
+                    {/* Display section */}
+                    <div className="border-b border-[var(--app-divider)]">
+                        <div className="px-3 py-2 text-xs font-semibold text-[var(--app-hint)] uppercase tracking-wide">
+                            {t('settings.display.title')}
+                        </div>
+                        <div ref={fontContainerRef} className="relative">
+                            <button
+                                type="button"
+                                onClick={() => setIsFontOpen(!isFontOpen)}
+                                className="flex w-full items-center justify-between px-3 py-3 text-left transition-colors hover:bg-[var(--app-subtle-bg)]"
+                                aria-expanded={isFontOpen}
+                                aria-haspopup="listbox"
+                            >
+                                <span className="text-[var(--app-fg)]">{t('settings.display.fontSize')}</span>
+                                <span className="flex items-center gap-1 text-[var(--app-hint)]">
+                                    <span>{currentFontScaleLabel}</span>
+                                    <ChevronDownIcon className={`transition-transform ${isFontOpen ? 'rotate-180' : ''}`} />
+                                </span>
+                            </button>
+
+                            {isFontOpen && (
+                                <div
+                                    className="absolute right-3 top-full mt-1 min-w-[140px] rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] shadow-lg overflow-hidden z-50"
+                                    role="listbox"
+                                    aria-label={t('settings.display.fontSize')}
+                                >
+                                    {fontScaleOptions.map((opt) => {
+                                        const isSelected = fontScale === opt.value
+                                        return (
+                                            <button
+                                                key={opt.value}
+                                                type="button"
+                                                role="option"
+                                                aria-selected={isSelected}
+                                                onClick={() => handleFontScaleChange(opt.value)}
+                                                className={`flex items-center justify-between w-full px-3 py-2 text-base text-left transition-colors ${
+                                                    isSelected
+                                                        ? 'text-[var(--app-link)] bg-[var(--app-subtle-bg)]'
+                                                        : 'text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]'
+                                                }`}
+                                            >
+                                                <span>{opt.label}</span>
+                                                {isSelected && (
+                                                    <span className="ml-2 text-[var(--app-link)]">
+                                                        <CheckIcon />
+                                                    </span>
+                                                )}
+                                            </button>
+                                        )
+                                    })}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
                     {/* Voice Assistant section */}
                     <div className="border-b border-[var(--app-divider)]">
                         <div className="px-3 py-2 text-xs font-semibold text-[var(--app-hint)] uppercase tracking-wide">
@@ -246,7 +316,7 @@ export default function SettingsPage() {
                                                 role="option"
                                                 aria-selected={isSelected}
                                                 onClick={() => handleVoiceLanguageChange(lang)}
-                                                className={`flex items-center justify-between w-full px-3 py-2 text-sm text-left transition-colors ${
+                                                className={`flex items-center justify-between w-full px-3 py-2 text-base text-left transition-colors ${
                                                     isSelected
                                                         ? 'text-[var(--app-link)] bg-[var(--app-subtle-bg)]'
                                                         : 'text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]'