From 29d497501b355baefb2afc61fb651971bc377eca Mon Sep 17 00:00:00 2001
From: Mary Kate Fain <mk@marykatefain.com>
Date: Wed, 4 Mar 2026 21:18:07 -0600
Subject: [PATCH] Always show My Themes section with empty state CTA when no
 custom themes exist

Shows a dashed border card with a plus icon and 'Create and share your
first custom theme' prompt. Clicking it opens the builder dialog.
---
 src/components/ThemeSelector.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 22c474e5..9bea9df3 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-import { Check, Palette, Trash2, ChevronDown, ChevronLeft, ChevronRight as ChevronRightIcon } from 'lucide-react';
+import { Check, Palette, Plus, Trash2, ChevronDown, ChevronLeft, ChevronRight as ChevronRightIcon } from 'lucide-react';
 import { type Theme } from '@/contexts/AppContext';
 import { useTheme } from '@/hooks/useTheme';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -695,11 +695,11 @@ export function ThemeSelector({ builderOpen, onBuilderOpenChange, builderMode }:
   return (
     <div className="space-y-6">
       {/* ── My Themes ── */}
-      {userThemeItems.length > 0 && (
-        <div className="space-y-2">
-          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
-            My Themes
-          </h3>
+      <div className="space-y-2">
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+          My Themes
+        </h3>
+        {userThemeItems.length > 0 ? (
           <div className={gridClass}>
             {userThemeItems.map((item) => (
               <ThemeButton
@@ -713,8 +713,20 @@ export function ThemeSelector({ builderOpen, onBuilderOpenChange, builderMode }:
               </ThemeButton>
             ))}
           </div>
-        </div>
-      )}
+        ) : (
+          <button
+            onClick={() => onBuilderOpenChange?.(true)}
+            className="w-full rounded-xl border-2 border-dashed border-border hover:border-primary/40 p-6 flex flex-col items-center gap-3 text-center transition-colors group"
+          >
+            <div className="size-10 rounded-full bg-muted flex items-center justify-center group-hover:bg-primary/10 transition-colors">
+              <Plus className="size-5 text-muted-foreground group-hover:text-primary transition-colors" />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Create and share your first custom theme
+            </p>
+          </button>
+        )}
+      </div>
 
       {/* ── Presets ── */}
       <div className="space-y-2">