feat: add fontOverride toggle for Reddit Sans fonts

Co-authored-by: Cursor <cursoragent@cursor.com>

content/main.js

@@ -58,7 +58,9 @@
   }
 
   async function init() {
-    const settings = await window.RedditTweaks.loadSettings();
+    try {
+      var settings = await window.RedditTweaks.loadSettings();
+      console.log("RedditTweaks init:", { enabled: settings.enabled, badgeLayout: settings.badgeLayout, cardLayout: settings.cardLayout });
       if (!settings.enabled) return;
 
       if (settings.badgeLayout) {
@@ -66,6 +68,10 @@
         window.RedditTweaks.badgeTweak.apply(settings);
       }
 
+      if (settings.fontOverride) {
+        document.documentElement.classList.add("rt-fonts-enabled");
+      }
+
       if (settings.cardLayout) {
         window.RedditTweaks.cardTweak.apply(settings);
       }
@@ -79,6 +85,7 @@
         if (
           (changes.enabled && changes.enabled.newValue !== changes.enabled.oldValue) ||
           (changes.badgeLayout && changes.badgeLayout.newValue !== changes.badgeLayout.oldValue) ||
+          (changes.fontOverride && changes.fontOverride.newValue !== changes.fontOverride.oldValue) ||
           (changes.cardLayout && changes.cardLayout.newValue !== changes.cardLayout.oldValue)
         ) {
           location.reload();
@@ -94,6 +101,9 @@
           }
         });
       });
+    } catch (err) {
+      console.error("RedditTweaks init failed:", err);
+    }
   }
 
   init();

lib/settings.js

@@ -19,8 +19,10 @@
     subredditColors: {},
     colorPresets: [],
     badgeLayout: true,
+    fontOverride: true,
     cardLayout: true,
     cardBackground: "reddit",
+    cardDensity: "modern",
     cardGap: 16,
   };
 

popup/popup.html

@@ -17,6 +17,10 @@
         <span>Badge layout</span>
         <input type="checkbox" id="badgeLayout">
       </label>
+      <label class="toggle-row">
+        <span>Reddit fonts</span>
+        <input type="checkbox" id="fontOverride">
+      </label>
     </div>
 
     <div class="section">
@@ -34,6 +38,12 @@
         <span>Enable card layout</span>
         <input type="checkbox" id="cardLayout">
       </label>
+      <label for="cardDensity">Card Density</label>
+      <select id="cardDensity">
+        <option value="cozy">Cozy</option>
+        <option value="modern">Modern</option>
+        <option value="extra">Extra</option>
+      </select>
       <label for="cardBackground">Background Style</label>
       <select id="cardBackground">
         <option value="reddit">Reddit Default</option>
@@ -41,6 +51,10 @@
       </select>
       <label for="cardGap">Card Spacing</label>
       <select id="cardGap">
+        <option value="1">1px</option>
+        <option value="2">2px</option>
+        <option value="4">4px</option>
+        <option value="6">6px</option>
         <option value="8">8px</option>
         <option value="12">12px</option>
         <option value="16">16px</option>

popup/popup.js

@@ -69,8 +69,10 @@
   function populateControls(settings) {
     document.getElementById("enabled").checked = settings.enabled;
     document.getElementById("badgeLayout").checked = settings.badgeLayout;
+    document.getElementById("fontOverride").checked = settings.fontOverride;
     document.getElementById("darkMode").value = settings.darkMode;
     document.getElementById("cardLayout").checked = settings.cardLayout;
+    document.getElementById("cardDensity").value = settings.cardDensity;
     document.getElementById("cardBackground").value = settings.cardBackground;
     document.getElementById("cardGap").value = String(settings.cardGap);
 
@@ -285,8 +287,10 @@
     var settings = {
       enabled: document.getElementById("enabled").checked,
       badgeLayout: document.getElementById("badgeLayout").checked,
+      fontOverride: document.getElementById("fontOverride").checked,
       darkMode: document.getElementById("darkMode").value,
       cardLayout: document.getElementById("cardLayout").checked,
+      cardDensity: document.getElementById("cardDensity").value,
       cardBackground: document.getElementById("cardBackground").value,
       cardGap: parseInt(document.getElementById("cardGap").value, 10),
       subredditColors: collectSubredditOverrides(),
@@ -310,8 +314,10 @@
 
     document.getElementById("enabled").addEventListener("change", saveFromControls);
     document.getElementById("badgeLayout").addEventListener("change", saveFromControls);
+    document.getElementById("fontOverride").addEventListener("change", saveFromControls);
     document.getElementById("darkMode").addEventListener("change", saveFromControls);
     document.getElementById("cardLayout").addEventListener("change", saveFromControls);
+    document.getElementById("cardDensity").addEventListener("change", saveFromControls);
     document.getElementById("cardBackground").addEventListener("change", saveFromControls);
     document.getElementById("cardGap").addEventListener("change", saveFromControls);