feat: replace font size slider with button group for better UX (#788)

Author: yyhhyyyyyy

src/renderer/src/components/settings/DisplaySettings.vue

@@ -57,19 +57,17 @@
           <Icon icon="lucide:a-large-small" class="w-4 h-4 text-muted-foreground" />
           <span class="text-sm font-medium">{{ t('settings.display.fontSize') }}</span>
         </span>
-        <div class="flex flex-row items-center gap-2 pl-6">
-          <Slider
-            :default-value="[fontSizeLevel]"
-            :model-value="[fontSizeLevel]"
-            :min="0"
-            :max="4"
-            :step="1"
-            class="w-full max-w-sm"
-            @update:model-value="(val) => (fontSizeLevel = val?.[0] ?? 1)"
-          />
-          <span class="text-xs w-16 text-center">{{
-            t('settings.display.' + fontSizeClass.toLowerCase())
-          }}</span>
+        <div class="flex flex-wrap items-center gap-1.5 pl-6">
+          <Button
+            v-for="(sizeOption, index) in fontSizeOptions"
+            :key="index"
+            :variant="fontSizeLevel === index ? 'default' : 'outline'"
+            size="sm"
+            class="px-2 py-1.5 text-xs flex-shrink-0"
+            @click="fontSizeLevel = index"
+          >
+            {{ t('settings.display.' + sizeOption) }}
+          </Button>
         </div>
       </div>
 
@@ -172,7 +170,6 @@ import {
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Switch } from '@/components/ui/switch'
-import { Slider } from '@/components/ui/slider'
 
 const languageStore = useLanguageStore()
 const settingsStore = useSettingsStore()
@@ -200,11 +197,12 @@ watch(selectedLanguage, async (newValue) => {
 })
 
 // --- Font Size Settings ---
+const fontSizeOptions = ['text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
+
 const fontSizeLevel = computed({
   get: () => settingsStore.fontSizeLevel,
   set: (value) => settingsStore.updateFontSizeLevel(value)
 })
-const fontSizeClass = computed(() => settingsStore.fontSizeClass)
 
 // --- Content Protection Settings ---
 const contentProtectionEnabled = computed({

src/renderer/src/i18n/en-US/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "Text size",
-    "text-2xl": "Extremely large",
-    "text-base": "Default",
-    "text-lg": "Big",
     "text-sm": "Small",
-    "text-xl": "Large",
+    "text-base": "Medium",
+    "text-lg": "Large",
+    "text-xl": "X-Large",
+    "text-2xl": "XX-Large",
     "floatingButton": "Floating Button",
     "floatingButtonDesc": "Display a floating button on the desktop to quickly activate the application window"
   },

src/renderer/src/i18n/fa-IR/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "اندازه قلم",
-    "text-2xl": "بسیار  بسیار بزرگ",
-    "text-base": "پیش‌فرض",
-    "text-lg": "بزرگ",
     "text-sm": "کوچک",
-    "text-xl": "بسیار بزرگ",
+    "text-base": "متوسط",
+    "text-lg": "بزرگ",
+    "text-xl": "XL",
+    "text-2xl": "XXL",
     "floatingButton": "دکمه شناور",
     "floatingButtonDesc": "نمایش یک دکمه شناور بر روی دسکتاپ برای فعال‌سازی سریع پنجره برنامه"
   },

src/renderer/src/i18n/fr-FR/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "Taille de texte",
-    "text-2xl": "Extrêmement grand",
-    "text-base": "défaut",
-    "text-lg": "grand",
     "text-sm": "Petit",
-    "text-xl": "Extrêmement grand",
+    "text-base": "Moyen",
+    "text-lg": "Grand",
+    "text-xl": "XL",
+    "text-2xl": "XXL",
     "floatingButton": "Bouton flottant",
     "floatingButtonDesc": "Afficher un bouton flottant sur le bureau pour activer rapidement la fenêtre de l'application"
   },

src/renderer/src/i18n/ja-JP/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "テキストサイズ",
-    "text-2xl": "非常に大きい",
-    "text-base": "デフォルト",
-    "text-lg": "大きい",
-    "text-sm": "小さい",
-    "text-xl": "非常に大きい",
+    "text-sm": "小",
+    "text-base": "中",
+    "text-lg": "大",
+    "text-xl": "XL",
+    "text-2xl": "XXL",
     "floatingButton": "フローティングボタン",
     "floatingButtonDesc": "デスクトップにフローティングボタンを表示し、アプリケーションウィンドウを素早く起動できます"
   },

src/renderer/src/i18n/ko-KR/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "텍스트 크기",
-    "text-2xl": "매우 큽니다",
-    "text-base": "기본",
-    "text-lg": "큰",
-    "text-sm": "작은",
-    "text-xl": "매우 큽니다",
+    "text-sm": "작음",
+    "text-base": "보통",
+    "text-lg": "큼",
+    "text-xl": "XL",
+    "text-2xl": "XXL",
     "floatingButton": "플로팅 버튼",
     "floatingButtonDesc": "데스크톱에 플로팅 버튼을 표시하여 애플리케이션 창을 빠르게 활성화할 수 있습니다"
   },

src/renderer/src/i18n/ru-RU/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "Размер текста",
-    "text-2xl": "Чрезвычайно большой",
-    "text-base": "Маленький",
-    "text-lg": "по умолчанию",
-    "text-sm": "Чрезвычайно маленький",
-    "text-xl": "большой",
+    "text-sm": "Малый",
+    "text-base": "Средний",
+    "text-lg": "Большой",
+    "text-xl": "XL",
+    "text-2xl": "XXL",
     "floatingButton": "Плавающая кнопка",
     "floatingButtonDesc": "Отображать плавающую кнопку на рабочем столе для быстрого активации окна приложения"
   },

src/renderer/src/i18n/zh-CN/settings.json

@@ -738,7 +738,7 @@
   "display": {
     "fontSize": "文字大小",
     "text-sm": "小",
-    "text-base": "默认",
+    "text-base": "标准",
     "text-lg": "大",
     "text-xl": "特大",
     "text-2xl": "超大",

src/renderer/src/i18n/zh-HK/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "文字大小",
-    "text-2xl": "超大",
-    "text-base": "預設",
-    "text-lg": "大",
     "text-sm": "小",
+    "text-base": "標準",
+    "text-lg": "大",
     "text-xl": "特大",
+    "text-2xl": "超大",
     "floatingButton": "懸浮按鈕",
     "floatingButtonDesc": "在桌面顯示一個懸浮按鈕，可以快速喚起應用程式視窗"
   },

src/renderer/src/i18n/zh-TW/settings.json

@@ -737,11 +737,11 @@
   },
   "display": {
     "fontSize": "文字大小",
-    "text-2xl": "超大",
-    "text-base": "預設",
-    "text-lg": "大",
     "text-sm": "小",
+    "text-base": "標準",
+    "text-lg": "大",
     "text-xl": "特大",
+    "text-2xl": "超大",
     "floatingButton": "懸浮按鈕",
     "floatingButtonDesc": "在桌面顯示一個懸浮按鈕，可以快速喚起應用程式視窗"
   },