Merge pull request #4 from semanticdata/feat/font-family-setting

Author: semanticdata

packages/newtab/newtab.html

@@ -61,6 +61,14 @@
                     <span id="font-display">18px</span>
                 </div>
                 <input type="range" id="font-slider" min="12" max="32" value="18" step="1">
+                
+                <div class="setting-row">
+                    <label for="font-family">Font Family</label>
+                </div>
+                <select id="font-family">
+                    <option value="serif">Serif</option>
+                    <option value="sans-serif">Sans-serif</option>
+                </select>
             </div>
 
             <!-- Settings Trigger -->

packages/sidebar/panel.html

@@ -61,6 +61,14 @@
                     <span id="font-display">18px</span>
                 </div>
                 <input type="range" id="font-slider" min="12" max="32" value="18" step="1">
+                
+                <div class="setting-row">
+                    <label for="font-family">Font Family</label>
+                </div>
+                <select id="font-family">
+                    <option value="serif">Serif</option>
+                    <option value="sans-serif">Sans-serif</option>
+                </select>
             </div>
 
             <!-- Settings Trigger -->

shared/script.js

@@ -6,6 +6,7 @@ const els = {
   menu: document.getElementById("settings-menu"),
   slider: document.getElementById("font-slider"),
   fontDisplay: document.getElementById("font-display"),
+  fontFamily: document.getElementById("font-family"),
   words: document.getElementById("word-count"),
   status: document.getElementById("save-status"),
 };
@@ -110,13 +111,22 @@ const updateFontSize = (val) => {
   localStore.set("fontsize", size);
 };
 
+const updateFontFamily = (val) => {
+  els.html.style.setProperty("--font-body", val);
+  localStore.set("fontfamily", val);
+};
+
 // Menu Listeners
 els.toggleSettings.addEventListener("click", toggleMenu);
 
 els.slider.addEventListener("input", (e) => {
   updateFontSize(e.target.value);
 });
 
+els.fontFamily.addEventListener("change", (e) => {
+  updateFontFamily(e.target.value);
+});
+
 // Close menu when clicking outside
 document.addEventListener("click", (e) => {
   if (
@@ -235,6 +245,13 @@ if (storedFontSize) {
   updateFontSize(val);
 }
 
+// Init Font Family
+const storedFontFamily = localStore.get("fontfamily");
+if (storedFontFamily) {
+  els.fontFamily.value = storedFontFamily;
+  updateFontFamily(storedFontFamily);
+}
+
 els.note.addEventListener("input", (e) => {
   updateStats(e.target.value);
   save(e.target.value);

shared/styles.css

@@ -190,3 +190,20 @@ textarea:focus {
   cursor: pointer;
   accent-color: var(--fg);
 }
+
+#font-family {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: var(--font-ui);
+  font-size: 0.85rem;
+}
+
+#font-family:focus {
+  outline: none;
+  border-color: var(--subtle);
+}