From 9d3b2a90316a1a5f735845f61abbd8a875529060 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Sat, 14 Feb 2026 10:12:22 -0800
Subject: feat: add font theme support (fixing NK-rn4nzp)

---
 frontend/src/components/Settings.tsx | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

(limited to 'frontend/src/components/Settings.tsx')

diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
index 16cf6a3..80e3068 100644
--- a/frontend/src/components/Settings.tsx
+++ b/frontend/src/components/Settings.tsx
@@ -3,14 +3,21 @@ import type { Feed } from '../types';
 import './Settings.css';
 import { apiFetch } from '../utils';
 
-export default function Settings() {
+interface SettingsProps {
+  fontTheme?: string;
+  setFontTheme?: (t: string) => void;
+}
+
+export default function Settings({ fontTheme, setFontTheme }: SettingsProps) {
   const [feeds, setFeeds] = useState<Feed[]>([]);
+  /* ... existing state ... */
   const [newFeedUrl, setNewFeedUrl] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const [importFile, setImportFile] = useState<File | null>(null);
 
+  /* ... existing fetchFeeds ... */
   const fetchFeeds = () => {
     setLoading(true);
     apiFetch('/api/feed/')
@@ -32,6 +39,7 @@ export default function Settings() {
     fetchFeeds();
   }, []);
 
+  /* ... existing handlers ... */
   const handleAddFeed = (e: React.FormEvent) => {
     e.preventDefault();
     if (!newFeedUrl) return;
@@ -106,6 +114,25 @@ export default function Settings() {
     <div className="settings-page">
       <h2>Settings</h2>
 
+      {setFontTheme && (
+        <div className="appearance-section">
+          <h3>Appearance</h3>
+          <div className="font-selector">
+            <label>Font Theme:</label>
+            <select
+              value={fontTheme || 'default'}
+              onChange={(e) => setFontTheme(e.target.value)}
+              className="font-select"
+            >
+              <option value="default">Default</option>
+              <option value="serif">Serif</option>
+              <option value="sans">Sans-Serif</option>
+              <option value="mono">Monospace</option>
+            </select>
+          </div>
+        </div>
+      )}
+
       <div className="add-feed-section">
         <h3>Add New Feed</h3>
         <form onSubmit={handleAddFeed} className="add-feed-form">
-- 
cgit v1.2.3