From bbd43b594831e4a0f606da276599e834287bf692 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 3 Jun 2026 19:40:54 +0200
Subject: [PATCH] feat: render theme cards as a mini mailbox mockup from theme
 colors

---
 components/settings/themes-settings.tsx | 171 +++++++++++++++++++++++-
 1 file changed, 165 insertions(+), 6 deletions(-)

diff --git a/components/settings/themes-settings.tsx b/components/settings/themes-settings.tsx
index ffd6a04f..c38cea84 100644
--- a/components/settings/themes-settings.tsx
+++ b/components/settings/themes-settings.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useThemeStore } from '@/stores/theme-store';
 import { SettingsSection } from './settings-section';
 import { cn } from '@/lib/utils';
-import { Check, Palette, Lock } from 'lucide-react';
+import { Check, Lock } from 'lucide-react';
 import { toast } from '@/stores/toast-store';
 import { usePolicyStore } from '@/stores/policy-store';
 
@@ -14,6 +14,18 @@ export function ThemesSettings() {
   const themePolicy = getThemePolicy();
   const forcedThemeId = getForcedThemeId(installedThemes.map((theme) => theme.id));
 
+  // Render each preview in the variant matching the app's current mode, and
+  // keep it in sync when the user toggles light/dark elsewhere.
+  const [isDark, setIsDark] = useState(false);
+  useEffect(() => {
+    const root = document.documentElement;
+    const update = () => setIsDark(root.classList.contains('dark'));
+    update();
+    const obs = new MutationObserver(update);
+    obs.observe(root, { attributes: true, attributeFilter: ['class'] });
+    return () => obs.disconnect();
+  }, []);
+
   // Filter out themes disabled by admin policy
   const visibleThemes = installedThemes.filter(
     theme => !isThemeDisabled(theme.id, !!theme.builtIn)
@@ -61,6 +73,8 @@ export function ThemesSettings() {
         <ThemeCard
           name="Default"
           author="Bulwark"
+          isDefaultTheme
+          isDark={isDark}
           isActive={activeThemeId === null}
           isBuiltIn
           isDefault={!themePolicy.defaultThemeId}
@@ -77,6 +91,8 @@ export function ThemesSettings() {
               name={theme.name}
               author={theme.author}
               preview={theme.preview}
+              css={theme.css}
+              isDark={isDark}
               isActive={activeThemeId === theme.id}
               isBuiltIn={theme.builtIn}
               isDefault={themePolicy.defaultThemeId === theme.id}
@@ -98,6 +114,9 @@ interface ThemeCardProps {
   name: string;
   author: string;
   preview?: string;
+  css?: string;
+  isDark?: boolean;
+  isDefaultTheme?: boolean;
   isActive: boolean;
   isBuiltIn: boolean;
   isDefault?: boolean;
@@ -107,7 +126,8 @@ interface ThemeCardProps {
   onActivate: () => void;
 }
 
-function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled, disabled, variants, onActivate }: ThemeCardProps) {
+function ThemeCard({ name, author, preview, css, isDark, isDefaultTheme, isActive, isDefault, isForceEnabled, disabled, variants, onActivate }: ThemeCardProps) {
+  const colors = resolveThemeColors({ css, variants, isDark: !!isDark, isDefaultTheme: !!isDefaultTheme });
   return (
     <div data-search-label={name} className="relative">
       <button
@@ -122,12 +142,13 @@ function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled,
           disabled && !isActive && 'hover:border-border'
         )}
       >
-        {/* Preview / Placeholder */}
-        <div className="w-full aspect-[16/10] rounded-lg mb-2 overflow-hidden bg-muted flex items-center justify-center">
+        {/* Preview: marketplace image when shipped, otherwise a mini app
+            mockup painted from the theme's own colour tokens. */}
+        <div className="w-full aspect-[16/10] rounded-lg mb-2 overflow-hidden bg-muted">
           {preview ? (
             <img src={preview} alt={name} className="w-full h-full object-cover" />
           ) : (
-            <Palette className="w-8 h-8 text-muted-foreground/40" />
+            <ThemePreview colors={colors} />
           )}
         </div>
 
@@ -162,3 +183,141 @@ function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled,
     </div>
   );
 }
+
+// ─── Theme Preview ───────────────────────────────────────────
+
+interface ThemeColors {
+  background: string;
+  sidebar: string;
+  card: string;
+  primary: string;
+  primaryForeground: string;
+  foreground: string;
+  mutedForeground: string;
+  border: string;
+}
+
+// The built-in "Default" theme has no `css` of its own (it's the app's base
+// tokens); these mirror app/globals.css so its card previews accurately.
+const DEFAULT_LIGHT: ThemeColors = {
+  background: '#ffffff', sidebar: '#f8fafc', card: '#ffffff', primary: '#3b82f6',
+  primaryForeground: '#ffffff', foreground: '#0f172a', mutedForeground: '#64748b', border: '#e2e8f0',
+};
+const DEFAULT_DARK: ThemeColors = {
+  background: '#0a0a0a', sidebar: '#0a0a0a', card: '#141414', primary: '#fafafa',
+  primaryForeground: '#171717', foreground: '#fafafa', mutedForeground: '#a3a3a3', border: '#262626',
+};
+
+// Pull a handful of structural colour tokens out of a theme's compiled CSS.
+// Themes declare light tokens under `:root { … }` and dark under `.dark { … }`;
+// neither block nests braces, so a non-greedy capture is enough.
+function extractThemeColors(css: string, dark: boolean): ThemeColors | null {
+  const block = css.match(dark ? /\.dark\s*\{([\s\S]*?)\}/ : /:root\s*\{([\s\S]*?)\}/);
+  if (!block) return null;
+  const body = block[1];
+  const get = (name: string): string | undefined => {
+    const m = body.match(new RegExp(`--color-${name}\\s*:\\s*([^;]+);`));
+    return m ? m[1].trim() : undefined;
+  };
+  const background = get('background');
+  if (!background) return null;
+  return {
+    background,
+    sidebar: get('sidebar') ?? background,
+    card: get('card') ?? background,
+    primary: get('primary') ?? '#888888',
+    primaryForeground: get('primary-foreground') ?? '#ffffff',
+    foreground: get('foreground') ?? '#000000',
+    mutedForeground: get('muted-foreground') ?? '#888888',
+    border: get('border') ?? 'rgba(128,128,128,0.3)',
+  };
+}
+
+function resolveThemeColors({ css, variants, isDark, isDefaultTheme }: {
+  css?: string;
+  variants?: ('light' | 'dark')[];
+  isDark: boolean;
+  isDefaultTheme: boolean;
+}): ThemeColors {
+  // Prefer the variant matching the app's current mode; fall back to the one
+  // the theme actually ships if it's single-variant.
+  const hasLight = !variants || variants.includes('light');
+  const hasDark = !variants || variants.includes('dark');
+  const wantDark = (isDark && hasDark) || !hasLight;
+
+  if (isDefaultTheme || !css) return wantDark ? DEFAULT_DARK : DEFAULT_LIGHT;
+  return (
+    extractThemeColors(css, wantDark) ??
+    extractThemeColors(css, !wantDark) ??
+    (wantDark ? DEFAULT_DARK : DEFAULT_LIGHT)
+  );
+}
+
+// A miniature of the real three-pane mailbox - icon nav rail, folder sidebar,
+// message list (first row selected) and reading pane - painted with the
+// theme's own colours, standing in for a screenshot.
+function ThemePreview({ colors }: { colors: ThemeColors }) {
+  const rail = `1px solid ${colors.border}`;
+  return (
+    <div className="w-full h-full flex overflow-hidden" style={{ backgroundColor: colors.background }}>
+      {/* Icon nav rail */}
+      <div
+        className="flex flex-col items-center gap-1 py-1.5 shrink-0"
+        style={{ width: '9%', backgroundColor: colors.sidebar, borderRight: rail }}
+      >
+        <div className="w-1.5 h-1.5 rounded-sm" style={{ backgroundColor: colors.primary }} />
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="w-1.5 h-1.5 rounded-sm" style={{ backgroundColor: colors.mutedForeground, opacity: 0.4 }} />
+        ))}
+      </div>
+
+      {/* Folder sidebar */}
+      <div
+        className="flex flex-col gap-1 p-1.5 shrink-0"
+        style={{ width: '25%', backgroundColor: colors.sidebar, borderRight: rail }}
+      >
+        <div className="flex items-center gap-1 mb-0.5">
+          <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: colors.mutedForeground, opacity: 0.5 }} />
+          <div className="h-1 rounded-full flex-1" style={{ backgroundColor: colors.foreground, opacity: 0.55 }} />
+        </div>
+        {[0.8, 0.65, 0.72, 0.5].map((w, i) => (
+          <div key={i} className="flex items-center gap-1">
+            <div className="w-1 h-1 rounded-sm shrink-0" style={{ backgroundColor: colors.mutedForeground, opacity: 0.45 }} />
+            <div className="h-1 rounded-full" style={{ width: `${w * 100}%`, backgroundColor: colors.mutedForeground, opacity: 0.4 }} />
+          </div>
+        ))}
+      </div>
+
+      {/* Message list */}
+      <div className="flex flex-col shrink-0" style={{ width: '36%', backgroundColor: colors.background, borderRight: rail }}>
+        {/* Selected row */}
+        <div className="flex items-start gap-1 p-1" style={{ backgroundColor: colors.primary }}>
+          <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: colors.primaryForeground, opacity: 0.85 }} />
+          <div className="flex-1 flex flex-col gap-0.5">
+            <div className="h-1 rounded-full" style={{ width: '70%', backgroundColor: colors.primaryForeground, opacity: 0.9 }} />
+            <div className="h-1 rounded-full" style={{ width: '90%', backgroundColor: colors.primaryForeground, opacity: 0.55 }} />
+          </div>
+        </div>
+        {/* Unread + read rows */}
+        {[0.6, 0.7, 0.55].map((w, i) => (
+          <div key={i} className="flex items-start gap-1 p-1" style={{ borderTop: rail }}>
+            <div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: colors.mutedForeground, opacity: 0.4 }} />
+            <div className="flex-1 flex flex-col gap-0.5">
+              <div className="h-1 rounded-full" style={{ width: `${w * 100}%`, backgroundColor: colors.foreground, opacity: i === 0 ? 0.7 : 0.5 }} />
+              <div className="h-1 rounded-full" style={{ width: '85%', backgroundColor: colors.mutedForeground, opacity: 0.35 }} />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Reading pane */}
+      <div className="flex-1 flex flex-col gap-1 p-1.5 min-w-0">
+        <div className="h-1.5 rounded-full" style={{ width: '70%', backgroundColor: colors.foreground, opacity: 0.85 }} />
+        <div className="h-1 rounded-full mb-1" style={{ width: '40%', backgroundColor: colors.mutedForeground, opacity: 0.5 }} />
+        {[0.95, 0.85, 0.9, 0.6].map((w, i) => (
+          <div key={i} className="h-1 rounded-full" style={{ width: `${w * 100}%`, backgroundColor: colors.mutedForeground, opacity: 0.3 }} />
+        ))}
+      </div>
+    </div>
+  );
+}