feat(options/appearance): improve font buttons

apps/client/src/widgets/type_widgets/options/appearance.tsx

@@ -1,6 +1,6 @@
 import "./appearance.css";
 
-import { FontFamily, OptionNames } from "@triliumnext/commons";
+import { FontFamily, OptionNames, SYSTEM_MONOSPACE_FONT_STACK, SYSTEM_SANS_SERIF_FONT_STACK } from "@triliumnext/commons";
 import { Fragment } from "preact";
 import { createPortal } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
@@ -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} />
+            <Font label={t("fonts.monospace_font")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" disabled={!isEnabled} isMonospace />
 
             <OptionsRowWithButton
                 label={t("fonts.apply_changes")}
@@ -347,9 +347,10 @@ interface FontProps {
     fontFamilyOption: OptionNames;
     fontSizeOption: OptionNames;
     disabled?: boolean;
+    isMonospace?: boolean;
 }
 
-function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabled }: FontProps) {
+function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabled, isMonospace }: FontProps) {
     const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);
     const [ fontSize, setFontSize ] = useTriliumOption(fontSizeOption);
     const [ showModal, setShowModal ] = useState(false);
@@ -362,8 +363,13 @@ function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabl
 
     // Get the CSS font-family value for preview
     const getFontFamily = (value: string) => {
-        if (["theme", "system"].includes(value)) {
-            return undefined;
+        if (value === "theme") {
+            // Use inherited font from the current theme
+            return "inherit";
+        }
+        if (value === "system") {
+            // Use the appropriate system font stack
+            return isMonospace ? SYSTEM_MONOSPACE_FONT_STACK : SYSTEM_SANS_SERIF_FONT_STACK;
         }
         return value;
     };

apps/server/src/routes/api/fonts.ts

@@ -1,23 +1,6 @@
 import type { Request, Response } from "express";
 import optionService from "../../services/options.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const SYSTEM_SANS_SERIF = [
-    "system-ui",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Cantarell",
-    "Ubuntu",
-    "Noto Sans",
-    "Helvetica",
-    "Arial",
-    "sans-serif",
-    "Apple Color Emoji",
-    "Segoe UI Emoji"
-].join(",");
-
-const SYSTEM_MONOSPACE = ["ui-monospace", "SFMono-Regular", "SF Mono", "Consolas", "Source Code Pro", "Ubuntu Mono", "Menlo", "Liberation Mono", "monospace"].join(",");
+import { SYSTEM_MONOSPACE_FONT_STACK, SYSTEM_SANS_SERIF_FONT_STACK, type OptionMap } from "@triliumnext/commons";
 
 function getFontCss(req: Request, res: Response) {
     res.setHeader("Content-Type", "text/css");
@@ -44,19 +27,19 @@ function getFontFamily({ mainFontFamily, treeFontFamily, detailFontFamily, monos
 
     // System override
     if (mainFontFamily === "system") {
-        mainFontFamily = SYSTEM_SANS_SERIF;
+        mainFontFamily = SYSTEM_SANS_SERIF_FONT_STACK;
     }
 
     if (treeFontFamily === "system") {
-        treeFontFamily = SYSTEM_SANS_SERIF;
+        treeFontFamily = SYSTEM_SANS_SERIF_FONT_STACK;
     }
 
     if (detailFontFamily === "system") {
-        detailFontFamily = SYSTEM_SANS_SERIF;
+        detailFontFamily = SYSTEM_SANS_SERIF_FONT_STACK;
     }
 
     if (monospaceFontFamily === "system") {
-        monospaceFontFamily = SYSTEM_MONOSPACE;
+        monospaceFontFamily = SYSTEM_MONOSPACE_FONT_STACK;
     }
 
     // Apply the font override if not using theme fonts.

packages/commons/src/lib/options_interface.ts

@@ -14,6 +14,41 @@ type KeyboardShortcutsOptions<T extends KeyboardActionNames> = {
 
 export type FontFamily = "theme" | "serif" | "sans-serif" | "monospace" | string;
 
+/**
+ * System sans-serif font stack for cross-platform compatibility.
+ * Used when the user selects "System default" for non-monospace fonts.
+ */
+export const SYSTEM_SANS_SERIF_FONT_STACK = [
+    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Cantarell",
+    "Ubuntu",
+    "Noto Sans",
+    "Helvetica",
+    "Arial",
+    "sans-serif",
+    "Apple Color Emoji",
+    "Segoe UI Emoji"
+].join(",");
+
+/**
+ * System monospace font stack for cross-platform compatibility.
+ * Used when the user selects "System default" for monospace fonts.
+ */
+export const SYSTEM_MONOSPACE_FONT_STACK = [
+    "ui-monospace",
+    "SFMono-Regular",
+    "SF Mono",
+    "Consolas",
+    "Source Code Pro",
+    "Ubuntu Mono",
+    "Menlo",
+    "Liberation Mono",
+    "monospace"
+].join(",");
+
 export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActionNames> {
     openNoteContexts: string;
     lastDailyBackupDate: string;