From 76901ddb2c7d049672bd4ce128e4a4a0bdf30ae3 Mon Sep 17 00:00:00 2001
From: Mary Kate Fain <mk@marykatefain.com>
Date: Wed, 4 Mar 2026 21:11:27 -0600
Subject: [PATCH] Redesign builder dialog footer: split buttons, collapsible
 Advanced section

- Update button now says 'Update "Theme Name"' (left side)
- Publish button now says 'Publish New Theme' (right side)
- Delete moved into a collapsed 'Advanced' section below the buttons
- Uses Collapsible component with ChevronDown indicator
---
 src/components/ThemeSelector.tsx | 51 +++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 2f00bad9..d3b75fbe 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, ChevronLeft, ChevronRight as ChevronRightIcon } from 'lucide-react';
+import { Check, Palette, 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';
@@ -18,6 +18,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import { cn } from '@/lib/utils';
 
 /** Extracts HSL color string from a theme token value like "258 70% 55%" */
@@ -817,9 +818,9 @@ export function ThemeSelector({ builderOpen, onBuilderOpenChange, builderMode }:
 
           {/* Action buttons */}
           {user && (
-            <DialogFooter className="flex-row flex-wrap gap-2 sm:justify-between">
-              <div className="flex gap-2">
-                {editingTheme && (
+            <div className="space-y-3 pt-2">
+              <DialogFooter className="flex-row justify-between gap-2">
+                {editingTheme ? (
                   <Button
                     variant="secondary"
                     size="sm"
@@ -827,8 +828,10 @@ export function ThemeSelector({ builderOpen, onBuilderOpenChange, builderMode }:
                     disabled={isPublishing}
                   >
                     <Palette className="size-3.5 mr-1.5" />
-                    {isPublishing ? 'Updating...' : 'Update'}
+                    {isPublishing ? 'Updating...' : `Update "${editingTheme.title}"`}
                   </Button>
+                ) : (
+                  <div />
                 )}
                 <Button
                   variant="outline"
@@ -836,22 +839,34 @@ export function ThemeSelector({ builderOpen, onBuilderOpenChange, builderMode }:
                   onClick={handlePublishNew}
                 >
                   <Palette className="size-3.5 mr-1.5" />
-                  Publish
+                  Publish New Theme
                 </Button>
-              </div>
+              </DialogFooter>
+
+              {/* Advanced section with delete */}
               {editingTheme && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleDeleteTheme}
-                  disabled={isPublishing}
-                  className="text-destructive hover:text-destructive hover:bg-destructive/10"
-                >
-                  <Trash2 className="size-3.5 mr-1.5" />
-                  Delete
-                </Button>
+                <Collapsible>
+                  <CollapsibleTrigger className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors group">
+                    <ChevronDown className="size-3.5 transition-transform group-data-[state=open]:rotate-180" />
+                    Advanced
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    <div className="pt-3">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={handleDeleteTheme}
+                        disabled={isPublishing}
+                        className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                      >
+                        <Trash2 className="size-3.5 mr-1.5" />
+                        Delete Theme
+                      </Button>
+                    </div>
+                  </CollapsibleContent>
+                </Collapsible>
               )}
-            </DialogFooter>
+            </div>
           )}
         </DialogContent>
       </Dialog>