RSSNext
diff --git a/‎apps/desktop/layer/renderer/src/modules/settings/control.tsx
Copy file name to clipboard
+31-27Lines changed: 31 additions & 27 deletions b/‎apps/desktop/layer/renderer/src/modules/settings/control.tsx
Copy file name to clipboard
+31-27Lines changed: 31 additions & 27 deletions
diff --git a/‎apps/desktop/layer/renderer/src/modules/settings/helper/builder.ts
Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions b/‎apps/desktop/layer/renderer/src/modules/settings/helper/builder.ts
Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
diff --git a/‎apps/desktop/layer/renderer/src/modules/settings/sections/fonts.tsx
Copy file name to clipboard
+52-43Lines changed: 52 additions & 43 deletions b/‎apps/desktop/layer/renderer/src/modules/settings/sections/fonts.tsx
Copy file name to clipboard
+52-43Lines changed: 52 additions & 43 deletions
@@ -76,37 +76,41 @@ export const SettingTabbedSegment: Component<{
   value: string
   onValueChanged?: (value: string) => void
   values: { value: string; label: string; icon?: ReactNode }[]
-}> = ({ label, className, value, values, onValueChanged }) => {
+  description?: string
+}> = ({ label, className, value, values, onValueChanged, description }) => {
   const [currentValue, setCurrentValue] = useState(value)
 
   return (
-    <div className={cn("mb-3 flex items-center justify-between gap-4", className)}>
-      <label className="text-sm font-medium leading-none">
-        {typeof label === "string" ? titleCase(label) : label}
-      </label>
+    <>
+      <div className={cn("mb-3 flex items-center justify-between gap-4", className)}>
+        <label className="text-sm font-medium leading-none">
+          {typeof label === "string" ? titleCase(label) : label}
+        </label>
 
-      <SegmentGroup
-        className="h-8"
-        value={currentValue}
-        onValueChanged={(v) => {
-          setCurrentValue(v)
-          onValueChanged?.(v)
-        }}
-      >
-        {values.map((v) => (
-          <SegmentItem
-            key={v.value}
-            value={v.value}
-            label={
-              <div className="flex items-center gap-1">
-                {v.icon}
-                <span>{v.label}</span>
-              </div>
-            }
-          />
-        ))}
-      </SegmentGroup>
-    </div>
+        <SegmentGroup
+          className="h-8"
+          value={currentValue}
+          onValueChanged={(v) => {
+            setCurrentValue(v)
+            onValueChanged?.(v)
+          }}
+        >
+          {values.map((v) => (
+            <SegmentItem
+              key={v.value}
+              value={v.value}
+              label={
+                <div className="flex items-center gap-1">
+                  {v.icon}
+                  <span>{v.label}</span>
+                </div>
+              }
+            />
+          ))}
+        </SegmentGroup>
+      </div>
+      {description && <SettingDescription className="-mt-3">{description}</SettingDescription>}
+    </>
   )
 }
 
 
@@ -16,6 +16,7 @@ export const createDefineSettingItem =
   ): any => {
     const { label, description, onChange, hide, ...rest } = options
 
+    if (hide) return null
     return {
       key,
       label,
 
@@ -13,6 +13,9 @@ import { setUISetting, useUISettingSelector } from "~/atoms/settings/ui"
 import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { ipcServices } from "~/lib/client"
 
+import { SettingDescription } from "../control"
+import { SettingItemGroup } from "../section"
+
 const FALLBACK_FONT = "Default (UI Font)"
 const DEFAULT_FONT = "SN Pro"
 const CUSTOM_FONT = "Custom"
@@ -84,27 +87,30 @@ export const ContentFontSelector = () => {
   )
 
   return (
-    <div className="mb-3 flex items-center justify-between">
-      <span className="shrink-0 text-sm font-medium">{t("appearance.content_font.label")}</span>
-      <ResponsiveSelect
-        defaultValue={FALLBACK_FONT}
-        value={readerFontFamily}
-        onValueChange={(value) => {
-          if (value === CUSTOM_FONT) {
-            setCustom()
-            return
-          }
-
-          setUISetting("readerFontFamily", value)
-        }}
-        size="sm"
-        triggerClassName="w-48"
-        items={[
-          isCustomFont && { label: readerFontFamily, value: readerFontFamily },
-          ...data,
-        ].filter((i) => typeof i === "object")}
-      />
-    </div>
+    <SettingItemGroup>
+      <div className="mt-4 flex items-center justify-between">
+        <span className="shrink-0 text-sm font-medium">{t("appearance.content_font.label")}</span>
+        <ResponsiveSelect
+          defaultValue={FALLBACK_FONT}
+          value={readerFontFamily}
+          onValueChange={(value) => {
+            if (value === CUSTOM_FONT) {
+              setCustom()
+              return
+            }
+
+            setUISetting("readerFontFamily", value)
+          }}
+          size="sm"
+          triggerClassName="w-48"
+          items={[
+            isCustomFont && { label: readerFontFamily, value: readerFontFamily },
+            ...data,
+          ].filter((i) => typeof i === "object")}
+        />
+      </div>
+      <SettingDescription>Adjust the font used for the reading content.</SettingDescription>
+    </SettingItemGroup>
   )
 }
 
@@ -122,28 +128,31 @@ export const UIFontSelector = () => {
   )
 
   return (
-    <div className="-mt-1 mb-3 flex items-center justify-between">
-      <span className="shrink-0 text-sm font-medium">{t("appearance.ui_font")}</span>
-      <ResponsiveSelect
-        defaultValue={FALLBACK_FONT}
-        value={uiFont}
-        onValueChange={(value) => {
-          if (value === CUSTOM_FONT) {
-            setCustom()
-            return
-          }
-
-          setUISetting("uiFontFamily", value)
-        }}
-        size="sm"
-        triggerClassName="w-48"
-        items={[
-          isCustomFont && { label: uiFont, value: uiFont },
-          { label: DEFAULT_FONT, value: DEFAULT_FONT },
-          ...data,
-        ].filter((i) => typeof i === "object")}
-      />
-    </div>
+    <SettingItemGroup>
+      <div className="mt-4 flex items-center justify-between">
+        <span className="shrink-0 text-sm font-medium">{t("appearance.ui_font")}</span>
+        <ResponsiveSelect
+          defaultValue={FALLBACK_FONT}
+          value={uiFont}
+          onValueChange={(value) => {
+            if (value === CUSTOM_FONT) {
+              setCustom()
+              return
+            }
+
+            setUISetting("uiFontFamily", value)
+          }}
+          size="sm"
+          triggerClassName="w-48"
+          items={[
+            isCustomFont && { label: uiFont, value: uiFont },
+            { label: DEFAULT_FONT, value: DEFAULT_FONT },
+            ...data,
+          ].filter((i) => typeof i === "object")}
+        />
+      </div>
+      <SettingDescription>Adjust the font used for the UI elements.</SettingDescription>
+    </SettingItemGroup>
   )
 }