feat: add card layout tweak with unified post observer

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

content/tweaks/cards.js

@@ -0,0 +1,59 @@
+(function () {
+  "use strict";
+
+  function processPost(post) {
+    if (post.classList.contains("rt-card")) return;
+    post.classList.add("rt-card");
+  }
+
+  function processPosts() {
+    var posts = document.querySelectorAll("div.thing.link:not(.rt-card)");
+    for (var i = 0; i < posts.length; i++) {
+      processPost(posts[i]);
+    }
+  }
+
+  function applyDarkMode(settings) {
+    if (window.RedditTweaks.isDarkMode(settings)) {
+      document.documentElement.classList.add("rt-dark");
+    } else {
+      document.documentElement.classList.remove("rt-dark");
+    }
+  }
+
+  function applyBackground(settings) {
+    if (settings.cardBackground === "shadcn") {
+      document.documentElement.classList.add("rt-card-bg-shadcn");
+    } else {
+      document.documentElement.classList.remove("rt-card-bg-shadcn");
+    }
+  }
+
+  function applyGap(settings) {
+    var siteTable = document.getElementById("siteTable");
+    if (siteTable) {
+      siteTable.style.setProperty("--rt-card-gap", settings.cardGap + "px");
+    }
+  }
+
+  function apply(settings) {
+    document.documentElement.classList.add("rt-card-enabled");
+    applyDarkMode(settings);
+    applyBackground(settings);
+    applyGap(settings);
+    processPosts();
+  }
+
+  function updateSettings(settings) {
+    applyDarkMode(settings);
+    applyBackground(settings);
+    applyGap(settings);
+  }
+
+  window.RedditTweaks = window.RedditTweaks || {};
+  window.RedditTweaks.cardTweak = {
+    apply: apply,
+    updateSettings: updateSettings,
+    processNewPosts: processPosts,
+  };
+})();