From 19e07bc6fdeabdcd3704225b623e449ecd1035ed Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 17:21:57 +0300
Subject: [PATCH] chore(options/appearance): improve font description slightly

---
 apps/client/src/translations/en/translation.json         | 9 +++++----
 .../src/widgets/type_widgets/options/appearance.tsx      | 6 ++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 952736d26f..d24a6c6c83 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1192,13 +1192,14 @@
     "theme_defined": "Theme defined",
     "fonts": "Fonts",
     "custom_fonts": "Use custom fonts",
-    "main_font": "General",
+    "main_font": "Interface text",
     "font_family": "Font family",
     "size": "Size",
     "preview": "Preview",
-    "note_tree_font": "Note tree",
-    "note_detail_font": "Note content",
-    "monospace_font": "Code notes & blocks",
+    "note_tree_font": "Note tree text",
+    "note_detail_font": "Document text",
+    "monospace_font": "Monospace text",
+    "monospace_font_description": "Used for code notes and code blocks",
     "size_relative_to_general": "Size is relative to the general font size",
     "not_all_fonts_available": "Not all listed fonts may be available on your system",
     "apply_changes": "Reload to apply changes",
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 04f5477837..ccf8b142af 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -330,7 +330,7 @@ function Fonts() {
             <Font label={t("fonts.main_font")} fontFamilyOption="mainFontFamily" fontSizeOption="mainFontSize" disabled={!isEnabled} />
             <Font label={t("fonts.note_tree_font")} sizeDescription={t("fonts.size_relative_to_general")} fontFamilyOption="treeFontFamily" fontSizeOption="treeFontSize" disabled={!isEnabled} />
             <Font label={t("fonts.note_detail_font")} sizeDescription={t("fonts.size_relative_to_general")} fontFamilyOption="detailFontFamily" fontSizeOption="detailFontSize" disabled={!isEnabled} />
-            <Font label={t("fonts.monospace_font")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" disabled={!isEnabled} isMonospace />
+            <Font label={t("fonts.monospace_font")} description={t("fonts.monospace_font_description")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" disabled={!isEnabled} isMonospace />
 
             <OptionsRowWithButton
                 label={t("fonts.apply_changes")}
@@ -343,6 +343,7 @@ function Fonts() {
 
 interface FontProps {
     label: string;
+    description?: string;
     sizeDescription?: string;
     fontFamilyOption: OptionNames;
     fontSizeOption: OptionNames;
@@ -350,7 +351,7 @@ interface FontProps {
     isMonospace?: boolean;
 }
 
-function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabled, isMonospace }: FontProps) {
+function Font({ label, description, sizeDescription, fontFamilyOption, fontSizeOption, disabled, isMonospace }: FontProps) {
     const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);
     const [ fontSize, setFontSize ] = useTriliumOption(fontSizeOption);
     const [ showModal, setShowModal ] = useState(false);
@@ -392,6 +393,7 @@ function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabl
             >
                 <div className="option-row-label">
                     <label style={{ cursor: "pointer" }}>{label}</label>
+                    {description && <small>{description}</small>}
                 </div>
                 <div className="option-row-input font-option-preview">
                     <span style={{ fontFamily: getFontFamily(fontFamily ?? ""), fontSize: `${fontSize}%` }}>{displayLabel}</span>