diff --git a/apps/desktop/layer/renderer/src/modules/settings/control.tsx b/apps/desktop/layer/renderer/src/modules/settings/control.tsx
index dc866ee86..5f369dc19 100644
--- a/apps/desktop/layer/renderer/src/modules/settings/control.tsx
+++ b/apps/desktop/layer/renderer/src/modules/settings/control.tsx
@@ -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 (
-
-
+ <>
+
+
-
{
- setCurrentValue(v)
- onValueChanged?.(v)
- }}
- >
- {values.map((v) => (
-
- {v.icon}
- {v.label}
-
- }
- />
- ))}
-
-
-
{t("appearance.content_font.label")}
-
{
- if (value === CUSTOM_FONT) {
- setCustom()
- return
- }
+
+
+ {t("appearance.content_font.label")}
+ {
+ 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")}
- />
-
+ setUISetting("readerFontFamily", value)
+ }}
+ size="sm"
+ triggerClassName="w-48"
+ items={[
+ isCustomFont && { label: readerFontFamily, value: readerFontFamily },
+ ...data,
+ ].filter((i) => typeof i === "object")}
+ />
+
-
{t("appearance.ui_font")}
-
{
- if (value === CUSTOM_FONT) {
- setCustom()
- return
- }
+
+
+ {t("appearance.ui_font")}
+ {
+ 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")}
- />
-
+ 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")}
+ />
+
-
{t("appearance.code_highlight_theme")}
+
+
+
+ {t("appearance.code_highlight_theme.label")}
+
- theme.type === (isDark ? "dark" : "light"))
- .map((theme) => ({ value: theme.id, label: theme.displayName }))}
- value={isDark ? codeHighlightThemeDark : codeHighlightThemeLight}
- onValueChange={(value) => {
- if (isDark) {
- setUISetting("codeHighlightThemeDark", value)
- } else {
- setUISetting("codeHighlightThemeLight", value)
+ theme.type === (isDark ? "dark" : "light"))
+ .map((theme) => ({ value: theme.id, label: theme.displayName }))}
+ value={isDark ? codeHighlightThemeDark : codeHighlightThemeLight}
+ onValueChange={(value) => {
+ if (isDark) {
+ setUISetting("codeHighlightThemeDark", value)
+ } else {
+ setUISetting("codeHighlightThemeLight", value)
+ }
+ }}
+ triggerClassName="w-48"
+ renderItem={(item) =>
+ isMobile ? (
+ capitalizeFirstLetter(item.label)
+ ) : (
+ {item.label}
+ )
}
- }}
- triggerClassName="w-48"
- renderItem={(item) =>
- isMobile ? (
- capitalizeFirstLetter(item.label)
- ) : (
- {item.label}
- )
- }
- size="sm"
- />
-
+ size="sm"
+ />
+
+
+ {t("appearance.global_font_size.label")}
+
+
+ {
+ const size = Number.parseInt(value) || textSizeMap.default
+ setUISetting("uiTextSize", size)
+ // Also update content font size to keep them in sync
+ setUISetting("contentFontSize", size)
+ }}
+ size="sm"
+ triggerClassName="w-48 capitalize"
+ items={Object.entries(textSizeMap).map(([size, value]) => ({
+ label: t(`appearance.text_size.${size as keyof typeof textSizeMap}`),
+ value: value.toString(),
+ }))}
+ />
+
+ {t("appearance.global_font_size.description")}
+
+ )
+}
+
export const AppThemeSegment = () => {
const { t } = useTranslation("settings")
const theme = useThemeAtomValue()
@@ -228,6 +291,7 @@ export const AppThemeSegment = () => {
{
onCheckedChange={toggleZenMode}
label={t("appearance.zen_mode.label")}
/>
- {t("appearance.zen_mode.description")}
+ {t("appearance.zen_mode.description_simple")}
)
}
@@ -305,7 +369,7 @@ const CustomCSS = () => {
const { t } = useTranslation("settings")
const { present } = useModalStack()
return (
-
+ <>
{
@@ -323,8 +387,10 @@ const CustomCSS = () => {
}}
buttonText={t("appearance.custom_css.button")}
/>
- {t("appearance.custom_css.description")}
-
+
+ {t("appearance.custom_css.description")}
+
+
)
}
const LazyCSSEditor = lazy(() =>
@@ -401,57 +467,34 @@ const CustomCSSModal = () => {
)
}
-const ContentFontSize = () => {
- const { t } = useTranslation("settings")
- const contentFontSize = useUISettingKey("contentFontSize")
- return (
-
- {t("appearance.content_font_size")}
-
- {
- setUISetting("contentFontSize", Number.parseInt(value))
- }}
- triggerClassName="w-48"
- size="sm"
- />
-
- )
-}
-
const ContentLineHeight = () => {
const { t } = useTranslation("settings")
const contentLineHeight = useUISettingKey("contentLineHeight")
return (
-
-
- {t("appearance.content_line_height.label")}
-
+
+
+
+ {t("appearance.content_line_height.label")}
+
- {
- setUISetting("contentLineHeight", Number.parseFloat(value))
- }}
- triggerClassName="w-48"
- size="sm"
- />
-
+ {
+ setUISetting("contentLineHeight", Number.parseFloat(value))
+ }}
+ triggerClassName="w-48"
+ size="sm"
+ />
+
-
{t("appearance.date_format")}
+
+
+ {t("appearance.date_format")}
- {
- setUISetting("dateFormat", value)
- }}
- triggerClassName="w-48"
- size="sm"
- />
-
+ generateItem("L"),
+ generateItem("LTS"),
+ generateItem("LT"),
+ generateItem("LLLL"),
+ generateItem("LL"),
+ generateItem("LLL"),
+ ]}
+ value={dateFormat}
+ onValueChange={(value) => {
+ setUISetting("dateFormat", value)
+ }}
+ triggerClassName="w-48"
+ size="sm"
+ />
+