feat(settings): enhance UI labels and descriptions for clarity

Innei · Innei · commit 2ed9f70e201c · 2025-06-06T23:36:17.000+08:00
- Updated various settings components to use title-cased labels for better readability.
- Added descriptions for action-related settings to improve user understanding.
- Adjusted localization strings to reflect new label structures and descriptions.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/modules/settings/control.tsx b/apps/desktop/layer/renderer/src/modules/settings/control.tsx
@@ -7,6 +7,7 @@ import { Switch } from "@follow/components/ui/switch/index.jsx"
 import { cn } from "@follow/utils/utils"
 import type { ChangeEventHandler, ReactNode } from "react"
 import { useId, useState } from "react"
+import { titleCase } from "title-case"
 
 export const SettingCheckbox: Component<{
   label: string
@@ -22,7 +23,7 @@ export const SettingCheckbox: Component<{
         onCheckedChange={onCheckedChange}
         className="cursor-auto"
       />
-      <Label htmlFor={id}>{label}</Label>
+      <Label htmlFor={id}>{titleCase(label)}</Label>
     </div>
   )
 }
@@ -35,7 +36,7 @@ export const SettingSwitch: Component<{
   const id = useId()
   return (
     <div className={cn("mb-3 flex items-center justify-between gap-4", className)}>
-      <Label htmlFor={id}>{label}</Label>
+      <Label htmlFor={id}>{titleCase(label)}</Label>
       <Switch id={id} checked={checked} onCheckedChange={onCheckedChange} />
     </div>
   )
@@ -60,7 +61,7 @@ export const SettingInput: Component<{
       )}
     >
       <Label className={cn("shrink-0", labelClassName)} htmlFor={id}>
-        {label}
+        {titleCase(label)}
       </Label>
       <Input type={type} id={id} value={value} onChange={onChange} className="text-xs" />
     </div>
@@ -77,7 +78,9 @@ export const SettingTabbedSegment: Component<{
 
   return (
     <div className={cn("mb-3 flex items-center justify-between gap-4", className)}>
-      <label className="text-sm font-medium leading-none">{label}</label>
+      <label className="text-sm font-medium leading-none">
+        {typeof label === "string" ? titleCase(label) : label}
+      </label>
 
       <SegmentGroup
         className="h-8"
@@ -120,7 +123,9 @@ export const SettingActionItem = ({
   buttonText: string
 }) => (
   <div className={cn("relative mb-3 mt-4 flex items-center justify-between gap-4")}>
-    <div className="text-sm font-medium">{label}</div>
+    <div className="text-sm font-medium">
+      {typeof label === "string" ? titleCase(label) : label}
+    </div>
     <Button variant="outline" size="sm" onClick={action}>
       {buttonText}
     </Button>
diff --git a/apps/desktop/layer/renderer/src/modules/settings/section.tsx b/apps/desktop/layer/renderer/src/modules/settings/section.tsx
@@ -5,6 +5,7 @@ import { cn } from "@follow/utils/utils"
 import type { FC, PropsWithChildren, ReactNode } from "react"
 import { cloneElement } from "react"
 import * as React from "react"
+import { titleCase } from "title-case"
 
 import { SettingActionItem, SettingDescription, SettingSwitch } from "./control"
 
@@ -15,11 +16,11 @@ export const SettingSectionTitle: FC<{
 }> = ({ title, margin }) => (
   <div
     className={cn(
-      "text-text text-headline shrink-0 font-bold capitalize opacity-50 first:mt-0",
+      "text-text text-headline shrink-0 font-bold opacity-50 first:mt-0",
       margin === "compact" ? "mb-2 mt-8" : "mb-4 mt-10",
     )}
   >
-    {title}
+    {typeof title === "string" ? titleCase(title) : title}
   </div>
 )
 
diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx
@@ -93,10 +93,12 @@ export const SettingGeneral = () => {
             value: t("general.action.title"),
           },
           defineSettingItem("summary", {
-            label: t("general.action.summary"),
+            label: t("general.action.summary.label"),
+            description: t("general.action.summary.description"),
           }),
           defineSettingItem("translation", {
-            label: t("general.action.translation"),
+            label: t("general.action.translation.label"),
+            description: t("general.action.translation.description"),
           }),
           TranslationModeSelector,
           ActionLanguageSelector,
@@ -141,7 +143,7 @@ export const SettingGeneral = () => {
               description: t("general.show_quick_timeline.description"),
             }),
 
-          { type: "title", value: t("general.unread") },
+          { type: "title", value: t("general.mark_as_read.title") },
 
           defineSettingItem("scrollMarkUnread", {
             label: t("general.mark_as_read.scroll.label"),
@@ -229,8 +231,11 @@ export const LanguageSelector = ({
   const isMobile = useMobile()
 
   return (
-    <div className={cn("mb-3 mt-4 flex items-center justify-between", containerClassName)}>
-      <span className="shrink-0 text-sm font-medium">{t("general.language")}</span>
+    <div className={cn("mb-3 mt-4 flex w-full items-center", containerClassName)}>
+      <div className="flex grow flex-col gap-1">
+        <span className="shrink-0 text-sm font-medium">{t("general.language.title")}</span>
+        <SettingDescription>{t("general.language.description")}</SettingDescription>
+      </div>
 
       <ResponsiveSelect
         size="sm"
@@ -274,8 +279,8 @@ const TranslationModeSelector = () => {
   const translationMode = useGeneralSettingKey("translationMode")
 
   return (
-    <SettingItemGroup>
-      <div className="flex items-center justify-between">
+    <>
+      <div className="mt-4 flex items-center justify-between">
         <span className="shrink-0 text-sm font-medium">{t("general.translation_mode.label")}</span>
         <ResponsiveSelect
           size="sm"
@@ -292,7 +297,7 @@ const TranslationModeSelector = () => {
         />
       </div>
       <SettingDescription>{t("general.translation_mode.description")}</SettingDescription>
-    </SettingItemGroup>
+    </>
   )
 }
 
@@ -301,8 +306,12 @@ const ActionLanguageSelector = () => {
   const actionLanguage = useGeneralSettingKey("actionLanguage")
 
   return (
-    <div className="mb-3 mt-4 flex items-center justify-between">
-      <span className="shrink-0 text-sm font-medium">{t("general.action_language.label")}</span>
+    <div className="mb-3 mt-4 flex w-full gap-1">
+      <div className="flex grow flex-col gap-1">
+        <span className="shrink-0 text-sm font-medium">{t("general.action_language.label")}</span>
+        <SettingDescription>{t("general.action_language.description")}</SettingDescription>
+      </div>
+
       <ResponsiveSelect
         size="sm"
         triggerClassName="w-48"
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/about.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/about.tsx
@@ -2,10 +2,11 @@ import { SettingAbout } from "~/modules/settings/tabs/about"
 import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
+const priority = Number.MAX_SAFE_INTEGER
 export const loader = defineSettingPageData({
   icon: "i-mgc-information-cute-re",
   name: "titles.about",
-  priority: 9999,
+  priority,
 })
 export const Component = () => (
   <>
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/appearance.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/appearance.tsx
@@ -3,7 +3,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-palette-cute-re"
-const priority = 1010
+const priority = (1000 << 1) + 10
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/data-control.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/data-control.tsx
@@ -4,7 +4,7 @@ import { SettingDataControl } from "~/modules/settings/tabs/data-control"
 import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
-const priority = 1025
+const priority = (1000 << 1) + 30
 
 export const loader = defineSettingPageData({
   icon: <MaterialSymbolsDatabaseOutline />,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/feeds.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/feeds.tsx
@@ -3,7 +3,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-certificate-cute-re"
-const priority = 1060
+const priority = (1000 << 2) + 20
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/general.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/general.tsx
@@ -3,7 +3,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-settings-7-cute-re"
-const priority = 1000
+const priority = 1000 << 1
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/integration.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/integration.tsx
@@ -3,7 +3,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-department-cute-re"
-const priority = 1030
+const priority = (1000 << 1) + 20
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/invitations.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/invitations.tsx
@@ -5,7 +5,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData, DisableWhy } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-love-cute-re"
-const priority = 1070
+const priority = (1000 << 3) + 20
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/list.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/list.tsx
@@ -5,7 +5,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData, DisableWhy } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-rada-cute-re"
-const priority = 1050
+const priority = (1000 << 2) + 10
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/notifications.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/notifications.tsx
@@ -5,7 +5,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData, DisableWhy } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-notification-cute-re"
-const priority = 1040
+const priority = (1000 << 1) + 50
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/profile.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/profile.tsx
@@ -14,10 +14,10 @@ import { defineSettingPageData } from "~/modules/settings/utils"
 import { signOut } from "~/queries/auth"
 
 const iconName = "i-mgc-user-setting-cute-re"
-const priority = 1090
+const priority = (1000 << 3) + 10
 export const loader = defineSettingPageData({
   icon: iconName,
-  name: "titles.profile",
+  name: "titles.account",
   priority,
 })
 
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/shortcuts.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/shortcuts.tsx
@@ -5,7 +5,7 @@ import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
 const iconName = "i-mgc-hotkey-cute-re"
-const priority = 1080
+const priority = (1000 << 1) + 40
 
 export const loader = defineSettingPageData({
   icon: iconName,
diff --git a/apps/mobile/src/modules/settings/routes/General.tsx b/apps/mobile/src/modules/settings/routes/General.tsx
@@ -70,7 +70,14 @@ function LanguageSetting({ settingKey }: { settingKey: "language" | "actionLangu
 
   return (
     <GroupedInsetListCell
-      label={settingKey === "language" ? t("general.language") : t("general.action_language.label")}
+      label={
+        settingKey === "language" ? t("general.language.title") : t("general.action_language.label")
+      }
+      description={
+        settingKey === "language"
+          ? t("general.language.description")
+          : t("general.action_language.description")
+      }
     >
       <View className="w-[150px]">
         <LanguageSelect settingKey={settingKey} />
@@ -128,15 +135,18 @@ export const GeneralScreen: NavigationControllerView = () => {
     >
       {/* Language */}
 
-      <GroupedInsetListSectionHeader label={t("general.language")} marginSize="small" />
+      <GroupedInsetListSectionHeader label={t("general.language.title")} marginSize="small" />
       <GroupedInsetListCard>
         <LanguageSetting settingKey="language" />
       </GroupedInsetListCard>
 
       {/* Content Behavior */}
       <GroupedInsetListSectionHeader label={t("general.action.title")} />
       <GroupedInsetListCard>
-        <GroupedInsetListCell label={t("general.action.summary")}>
+        <GroupedInsetListCell
+          label={t("general.action.summary.label")}
+          description={t("general.action.summary.description")}
+        >
           <Switch
             size="sm"
             value={summary}
@@ -145,7 +155,10 @@ export const GeneralScreen: NavigationControllerView = () => {
             }}
           />
         </GroupedInsetListCell>
-        <GroupedInsetListCell label={t("general.action.translation")}>
+        <GroupedInsetListCell
+          label={t("general.action.translation.label")}
+          description={t("general.action.translation.description")}
+        >
           <Switch
             size="sm"
             value={translation}
@@ -242,7 +255,7 @@ export const GeneralScreen: NavigationControllerView = () => {
 
       {/* Unread */}
 
-      <GroupedInsetListSectionHeader label={t("general.unread")} />
+      <GroupedInsetListSectionHeader label={t("general.mark_as_read.title")} />
       <GroupedInsetListCard>
         <GroupedInsetListCell
           label={t("general.mark_as_read.scroll.label")}
diff --git a/locales/settings/en.json b/locales/settings/en.json
@@ -152,11 +152,14 @@
   "feeds.tableHeaders.name": "Name",
   "feeds.tableHeaders.subscriptionCount": "Subs",
   "feeds.tableHeaders.tipAmount": "Tips",
-  "general.action.summary": "AI Summary",
-  "general.action.title": "Action",
-  "general.action.translation": "AI Translation",
+  "general.action.summary.description": "Generate a summary of the entry using AI.",
+  "general.action.summary.label": "AI Summary",
+  "general.action.title": "AI Actions",
+  "general.action.translation.description": "Translate the entry into the selected language.",
+  "general.action.translation.label": "AI Translation",
   "general.action_language.default": "Default (UI Language)",
-  "general.action_language.label": "Action Language",
+  "general.action_language.description": "Choose the language for the AI actions, e.g. AI Summary, AI Translation.",
+  "general.action_language.label": "AI Target Language",
   "general.advanced": "Advanced",
   "general.app": "App",
   "general.auto_expand_long_social_media.description": "Automatically expand social media entries containing long text.",
@@ -191,7 +194,8 @@
   "general.hide_all_read_subscriptions.label": "Hide read",
   "general.hide_private_subscriptions_in_timeline.description": "Hide private subscriptions from your subscriptions list and hide their entries from your timeline (they are always invisible to the public regardless of this setting).",
   "general.hide_private_subscriptions_in_timeline.label": "Hide private",
-  "general.language": "Language",
+  "general.language.description": "Choose the display language for the app.",
+  "general.language.title": "Language",
   "general.launch_at_login": "Launch at login",
   "general.log_file.button": "Reveal",
   "general.log_file.description": "Reveal the log file in the system.",
@@ -202,6 +206,7 @@
   "general.mark_as_read.render.label": "Mark as read when in the view",
   "general.mark_as_read.scroll.description": "Automatically mark entries as read when scrolled out of the view.",
   "general.mark_as_read.scroll.label": "Mark as read when scrolling",
+  "general.mark_as_read.title": "Mark as read",
   "general.minimize_to_tray.description": "Minimize to system tray when closing window",
   "general.minimize_to_tray.label": "Minimize to tray",
   "general.network": "Network",
@@ -231,9 +236,8 @@
   "general.timeline": "Timeline",
   "general.translation_mode.bilingual": "Bilingual Comparison",
   "general.translation_mode.description": "Choose how the translated text is displayed in the entry list.",
-  "general.translation_mode.label": "Translation Mode",
+  "general.translation_mode.label": "AI Translation Mode",
   "general.translation_mode.translation-only": "Only the translation",
-  "general.unread": "Unread",
   "general.voices": "Voices",
   "integration.cubox.autoMemo.description": "Automatically use Memo mode when text is selected to save to Cubox.",
   "integration.cubox.autoMemo.label": "Auto Memo Mode",
@@ -447,7 +451,6 @@
   "titles.notifications": "Notifications",
   "titles.power": "Power",
   "titles.privacy": "Privacy",
-  "titles.profile": "Profile",
   "titles.shortcuts": "Shortcuts",
   "titles.sign_out": "Sign Out",
   "wallet.balance.activePoints": "Active Points",
diff --git a/locales/settings/ja.json b/locales/settings/ja.json
diff --git a/locales/settings/zh-CN.json b/locales/settings/zh-CN.json
diff --git a/locales/settings/zh-TW.json b/locales/settings/zh-TW.json
