From 7b0c80c0a4622e53bf46384d0735ee9a87d76e6a Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Wed, 26 Aug 2026 21:15:40 -0400
Subject: [PATCH] feat: add card layout controls to extension popup

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 popup/popup.html | 21 +++++++++++++++++++++
 popup/popup.js   |  9 +++++++++
 2 files changed, 30 insertions(+)

diff --git a/popup/popup.html b/popup/popup.html
index 72aa011..133cd8e 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -28,6 +28,27 @@
       </select>
     </div>
 
+    <div class="section">
+      <h2>Card Layout</h2>
+      <label class="toggle-row">
+        <span>Enable card layout</span>
+        <input type="checkbox" id="cardLayout">
+      </label>
+      <label for="cardBackground">Background Style</label>
+      <select id="cardBackground">
+        <option value="reddit">Reddit Default</option>
+        <option value="shadcn">shadcn Style</option>
+      </select>
+      <label for="cardGap">Card Spacing</label>
+      <select id="cardGap">
+        <option value="8">8px</option>
+        <option value="12">12px</option>
+        <option value="16">16px</option>
+        <option value="24">24px</option>
+        <option value="32">32px</option>
+      </select>
+    </div>
+
     <div class="section">
       <h2>Light Mode Colors</h2>
       <fieldset>
diff --git a/popup/popup.js b/popup/popup.js
index 9e469ff..cb5c1c3 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -70,6 +70,9 @@
     document.getElementById("enabled").checked = settings.enabled;
     document.getElementById("badgeLayout").checked = settings.badgeLayout;
     document.getElementById("darkMode").value = settings.darkMode;
+    document.getElementById("cardLayout").checked = settings.cardLayout;
+    document.getElementById("cardBackground").value = settings.cardBackground;
+    document.getElementById("cardGap").value = String(settings.cardGap);
 
     COLOR_KEYS.forEach(function (key) {
       var el = document.getElementById(key);
@@ -283,6 +286,9 @@
       enabled: document.getElementById("enabled").checked,
       badgeLayout: document.getElementById("badgeLayout").checked,
       darkMode: document.getElementById("darkMode").value,
+      cardLayout: document.getElementById("cardLayout").checked,
+      cardBackground: document.getElementById("cardBackground").value,
+      cardGap: parseInt(document.getElementById("cardGap").value, 10),
       subredditColors: collectSubredditOverrides(),
     };
 
@@ -305,6 +311,9 @@
     document.getElementById("enabled").addEventListener("change", saveFromControls);
     document.getElementById("badgeLayout").addEventListener("change", saveFromControls);
     document.getElementById("darkMode").addEventListener("change", saveFromControls);
+    document.getElementById("cardLayout").addEventListener("change", saveFromControls);
+    document.getElementById("cardBackground").addEventListener("change", saveFromControls);
+    document.getElementById("cardGap").addEventListener("change", saveFromControls);
 
     COLOR_KEYS.forEach(function (key) {
       var el = document.getElementById(key);