From ee5db42fc9089723fb5117b276f3887e51b2d5c3 Mon Sep 17 00:00:00 2001
From: bendsp <benjy.desprets@gmail.com>
Date: Sat, 9 May 2026 16:22:17 +0200
Subject: [PATCH 1/3] add: editor font preview

---
 src/renderer/components/SettingsModal.tsx | 32 ++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx
index 9c8c875..87c0d6e 100644
--- a/src/renderer/components/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal.tsx
@@ -64,10 +64,19 @@ const ABOUT_LINKS = {
 const editorFontOptions: Array<{
   value: EditorFontFamily;
   label: string;
+  css: string;
 }> = [
-  { value: "sans", label: "Sans" },
-  { value: "serif", label: "Serif" },
-  { value: "mono", label: "Mono" },
+  {
+    value: "sans",
+    label: "Sans",
+    css: '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  },
+  { value: "serif", label: "Serif", css: 'Georgia, "Times New Roman", serif' },
+  {
+    value: "mono",
+    label: "Mono",
+    css: '"Fira Code", "Source Code Pro", Monaco, Consolas, monospace',
+  },
 ];
 
 type SettingsModalProps = {
@@ -287,6 +296,9 @@ const SettingsModal = ({
 
   const activeCategoryLabel =
     categories.find((c) => c.id === activeCategory)?.label ?? "Settings";
+  const activeEditorFont =
+    editorFontOptions.find((option) => option.value === settings.editorFontFamily) ??
+    editorFontOptions[0];
 
   return (
     <div
@@ -394,6 +406,20 @@ const SettingsModal = ({
                       </ItemActions>
                     </Item>
                     <ItemSeparator />
+                    <div className="border-b border-border px-4 py-3">
+                      <div className="text-xs font-medium text-muted-foreground">
+                        Font preview
+                      </div>
+                      <div
+                        className="mt-2 rounded-md border border-border bg-card px-3 py-2 text-sm leading-6 text-card-foreground"
+                        style={{ fontFamily: activeEditorFont.css }}
+                      >
+                        # Heading
+                        <br />
+                        Plain text, `inline code`, and a [link](https://example.com)
+                      </div>
+                    </div>
+                    <ItemSeparator />
                     <Item
                       size="sm"
                       className="rounded-none first:rounded-t-md last:rounded-b-md"

From d2b6ad3aa4d599a6007c17f557784bc5492d396c Mon Sep 17 00:00:00 2001
From: bendsp <benjy.desprets@gmail.com>
Date: Sat, 9 May 2026 16:34:58 +0200
Subject: [PATCH 2/3] fix: reuse editor font variable

---
 src/renderer/components/SettingsModal.tsx | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx
index 87c0d6e..d7dde14 100644
--- a/src/renderer/components/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal.tsx
@@ -64,19 +64,10 @@ const ABOUT_LINKS = {
 const editorFontOptions: Array<{
   value: EditorFontFamily;
   label: string;
-  css: string;
 }> = [
-  {
-    value: "sans",
-    label: "Sans",
-    css: '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-  },
-  { value: "serif", label: "Serif", css: 'Georgia, "Times New Roman", serif' },
-  {
-    value: "mono",
-    label: "Mono",
-    css: '"Fira Code", "Source Code Pro", Monaco, Consolas, monospace',
-  },
+  { value: "sans", label: "Sans" },
+  { value: "serif", label: "Serif" },
+  { value: "mono", label: "Mono" },
 ];
 
 type SettingsModalProps = {
@@ -296,10 +287,6 @@ const SettingsModal = ({
 
   const activeCategoryLabel =
     categories.find((c) => c.id === activeCategory)?.label ?? "Settings";
-  const activeEditorFont =
-    editorFontOptions.find((option) => option.value === settings.editorFontFamily) ??
-    editorFontOptions[0];
-
   return (
     <div
       className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60"
@@ -412,7 +399,7 @@ const SettingsModal = ({
                       </div>
                       <div
                         className="mt-2 rounded-md border border-border bg-card px-3 py-2 text-sm leading-6 text-card-foreground"
-                        style={{ fontFamily: activeEditorFont.css }}
+                        style={{ fontFamily: "var(--editor-font-family)" }}
                       >
                         # Heading
                         <br />

From be4c9f2a7d13a17a12a0506252f6d9d3e39e4de0 Mon Sep 17 00:00:00 2001
From: bendsp <benjy.desprets@gmail.com>
Date: Sun, 10 May 2026 20:09:23 +0200
Subject: [PATCH 3/3] fix: render font preview markdown

---
 src/renderer/components/SettingsModal.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx
index d7dde14..10ba057 100644
--- a/src/renderer/components/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal.tsx
@@ -398,12 +398,22 @@ const SettingsModal = ({
                         Font preview
                       </div>
                       <div
-                        className="mt-2 rounded-md border border-border bg-card px-3 py-2 text-sm leading-6 text-card-foreground"
+                        className="mt-2 space-y-2 rounded-md border border-border bg-card px-3 py-2 text-card-foreground"
                         style={{ fontFamily: "var(--editor-font-family)" }}
                       >
-                        # Heading
-                        <br />
-                        Plain text, `inline code`, and a [link](https://example.com)
+                        <div className="text-lg font-semibold leading-snug">
+                          Heading
+                        </div>
+                        <p className="text-sm leading-6">
+                          Plain text,{" "}
+                          <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.9em]">
+                            inline code
+                          </code>
+                          , and a{" "}
+                          <span className="text-primary underline underline-offset-4">
+                            link
+                          </span>
+                        </p>
                       </div>
                     </div>
                     <ItemSeparator />