chore(settings): add descriptions to appearance settings and adjust layout

- Introduced descriptions for various appearance settings to enhance user understanding.
- Adjusted layout widths for better alignment in the General settings.
- Updated localization files to include new descriptions and modified existing ones for clarity.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/modules/settings/helper/setting-builder.tsx

@@ -119,6 +119,7 @@ export const createSettingBuilder =
       } else if ("action" in assertSetting) {
         ControlElement = <SettingActionItem {...assertSetting} key={index} />
       }
+
       return (
         <SettingItemGroup key={index}>
           {ControlElement}

apps/desktop/layer/renderer/src/modules/settings/tabs/apperance.tsx

@@ -59,6 +59,7 @@ export const SettingAppearance = () => {
 
           defineItem("opaqueSidebar", {
             label: t("appearance.opaque_sidebars.label"),
+            description: t("appearance.opaque_sidebars.description"),
             hide: !window.api?.canWindowBlur || isMobile,
           }),
 
@@ -69,11 +70,13 @@ export const SettingAppearance = () => {
 
           defineItem("showDockBadge", {
             label: t("appearance.unread_count.badge.label"),
+            description: t("appearance.unread_count.badge.description"),
             hide: !IN_ELECTRON || !["macOS", "Linux"].includes(getOS()) || isMobile,
           }),
 
           defineItem("sidebarShowUnreadCount", {
             label: t("appearance.unread_count.view_and_subscription.label"),
+            description: t("appearance.unread_count.view_and_subscription.description"),
           }),
 
           {

apps/mobile/src/modules/settings/SettingsList.tsx

@@ -230,8 +230,8 @@ const NavigationLinkGroup: FC<{
 }
 
 const navigationGroups = [
-  DataGroupNavigationLinks,
   SettingGroupNavigationLinks,
+  DataGroupNavigationLinks,
   BetaGroupNavigationLinks,
   PrivacyGroupNavigationLinks,
   ActionGroupNavigationLinks,

apps/mobile/src/modules/settings/routes/Appearance.tsx

@@ -43,7 +43,10 @@ export const AppearanceScreen = () => {
         marginSize="small"
       />
       <GroupedInsetListCard>
-        <GroupedInsetListCell label={t("appearance.unread_count.badge.label")}>
+        <GroupedInsetListCell
+          label={t("appearance.unread_count.badge.label")}
+          description={t("appearance.unread_count.badge.description")}
+        >
           <Switch
             size="sm"
             value={showUnreadCountBadgeMobile}
@@ -53,7 +56,10 @@ export const AppearanceScreen = () => {
             }}
           />
         </GroupedInsetListCell>
-        <GroupedInsetListCell label={t("appearance.unread_count.view_and_subscription.label")}>
+        <GroupedInsetListCell
+          label={t("appearance.unread_count.view_and_subscription.label")}
+          description={t("appearance.unread_count.view_and_subscription.description")}
+        >
           <Switch
             size="sm"
             value={showUnreadCountViewAndSubscriptionMobile}

apps/mobile/src/modules/settings/routes/General.tsx

@@ -79,7 +79,7 @@ function LanguageSetting({ settingKey }: { settingKey: "language" | "actionLangu
           : t("general.action_language.description")
       }
     >
-      <View className="w-[150px]">
+      <View className="w-[100px]">
         <LanguageSelect settingKey={settingKey} />
       </View>
     </GroupedInsetListCell>
@@ -95,7 +95,7 @@ function TranslationModeSetting() {
       label={t("general.translation_mode.label")}
       description={t("general.translation_mode.description")}
     >
-      <View className="w-[130px]">
+      <View className="w-[120px]">
         <Select
           value={translationMode}
           onValueChange={(value) => {
@@ -219,7 +219,10 @@ export const GeneralScreen: NavigationControllerView = () => {
 
       <GroupedInsetListSectionHeader label={t("general.timeline")} />
       <GroupedInsetListCard>
-        <GroupedInsetListCell label={t("general.show_unread_on_launch.label")}>
+        <GroupedInsetListCell
+          label={t("general.show_unread_on_launch.label")}
+          description={t("general.show_unread_on_launch.description")}
+        >
           <Switch
             size="sm"
             value={showUnreadOnLaunch}

locales/settings/en.json

@@ -93,6 +93,7 @@
   "appearance.misc": "Misc",
   "appearance.modal_overlay.description": "Show Modal Overlay",
   "appearance.modal_overlay.label": "Show Modal Overlay",
+  "appearance.opaque_sidebars.description": "Make the sidebar background transparent.",
   "appearance.opaque_sidebars.label": "Opaque Sidebars",
   "appearance.reader_render_inline_style.description": "Allows Rendering of the Inline Style of the Original HTML.",
   "appearance.reader_render_inline_style.label": "Render Inline Style",
@@ -117,8 +118,10 @@
   "appearance.thumbnail_ratio.title": "Thumbnail Ratio",
   "appearance.title": "Appearance",
   "appearance.ui_font": "Global Font",
+  "appearance.unread_count.badge.description": "Show the unread count as a badge in the dock icon.",
   "appearance.unread_count.badge.label": "Show as Badge",
   "appearance.unread_count.label": "Unread Count",
+  "appearance.unread_count.view_and_subscription.description": "Show the unread count in the view and subscription list.",
   "appearance.unread_count.view_and_subscription.label": "Show in View and Subscription",
   "appearance.use_pointer_cursor.description": "When the mouse hovers over any interactive element, the cursor appears as a hand.",
   "appearance.use_pointer_cursor.label": "Use Hand Cursor",
@@ -225,8 +228,8 @@
   "general.send_anonymous_data.label": "Send anonymous data",
   "general.show_quick_timeline.description": "Show the quick timeline at the top of the feed list.",
   "general.show_quick_timeline.label": "Show feed list timeline",
-  "general.show_unread_on_launch.description": "Show unread content on launch",
-  "general.show_unread_on_launch.label": "Show unread content on launch",
+  "general.show_unread_on_launch.description": "Only show unread entries when you open the app.",
+  "general.show_unread_on_launch.label": "Unread only on launch",
   "general.sidebar_title": "General",
   "general.startup_screen.subscription": "Subscription",
   "general.startup_screen.timeline": "Timeline",

locales/settings/ja.json

@@ -225,8 +225,6 @@
   "general.send_anonymous_data.label": "匿名データを送信",
   "general.show_quick_timeline.description": "フィードリストの最上部にクイックタイムラインを表示する",
   "general.show_quick_timeline.label": "フィードリストにタイムラインを表示する",
-  "general.show_unread_on_launch.description": "起動時に未読数を表示する",
-  "general.show_unread_on_launch.label": "起動時に未読コンテンツを表示",
   "general.sidebar_title": "一般",
   "general.startup_screen.subscription": "購読",
   "general.startup_screen.timeline": "タイムライン",

locales/settings/zh-CN.json

@@ -225,8 +225,6 @@
   "general.send_anonymous_data.label": "发送匿名数据",
   "general.show_quick_timeline.description": "在时间线顶部显示列表和分类的时间线快递导航。",
   "general.show_quick_timeline.label": "显示时间线快速导航",
-  "general.show_unread_on_launch.description": "启动时显示未读内容。",
-  "general.show_unread_on_launch.label": "启动时显示未读内容",
   "general.sidebar_title": "通用",
   "general.startup_screen.subscription": "订阅",
   "general.startup_screen.timeline": "时间线",

locales/settings/zh-TW.json

@@ -225,8 +225,6 @@
   "general.send_anonymous_data.label": "傳送匿名資料",
   "general.show_quick_timeline.description": "在 RSS 摘要列表頂部顯示快速時間軸。",
   "general.show_quick_timeline.label": "顯示 RSS 摘要列表時間軸",
-  "general.show_unread_on_launch.description": "啟動時顯示未讀內容",
-  "general.show_unread_on_launch.label": "啟動時顯示未讀內容",
   "general.sidebar_title": "一般",
   "general.startup_screen.subscription": "訂閱",
   "general.startup_screen.timeline": "時間軸",