From acabc9fcca9d12983c4fae3299048ace96b9f796 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 07:53:15 +0000
Subject: [PATCH] fix: improve Support tab UI and zap amount pre-selection

UI improvements:
- Move Contribute section before Monthly Goal section
- Increase font size for contribution amounts (text-sm -> text-base)
- Make contribution tier icons muted (text-muted-foreground)
- Increase gap between icon and amount (gap-1 -> gap-1.5)

Bug fix:
- Add useEffect to update selectedAmount when defaultAmount prop changes
- Fixes issue where zap amount wasn't being pre-selected from buttons
---
 src/components/SettingsViewer.tsx | 42 +++++++++++++++----------------
 src/components/ZapWindow.tsx      |  7 ++++++
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/SettingsViewer.tsx b/src/components/SettingsViewer.tsx
index 9c95f10..0277c1d 100644
--- a/src/components/SettingsViewer.tsx
+++ b/src/components/SettingsViewer.tsx
@@ -216,6 +216,27 @@ export function SettingsViewer() {
               </p>
             </div>
 
+            {/* Contribution Tiers */}
+            <div className="space-y-3">
+              <h4 className="text-sm font-medium">Contribute</h4>
+              <div className="grid grid-cols-3 gap-2">
+                {contributionTiers.map(({ amount, icon: Icon }) => (
+                  <Button
+                    key={amount}
+                    variant="outline"
+                    size="default"
+                    onClick={() => openSupportWindow(amount)}
+                    className="flex-col h-auto py-3 gap-1.5"
+                  >
+                    <Icon className="h-5 w-5 text-muted-foreground" />
+                    <span className="text-base font-semibold">
+                      {formatAmount(amount)}
+                    </span>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
             {/* Show Monthly Goal Toggle */}
             <div className="flex items-center justify-between gap-4">
               <div className="space-y-0.5">
@@ -262,27 +283,6 @@ export function SettingsViewer() {
               </div>
             </div>
 
-            {/* Contribution Tiers */}
-            <div className="space-y-3">
-              <h4 className="text-sm font-medium">Contribute</h4>
-              <div className="grid grid-cols-3 gap-2">
-                {contributionTiers.map(({ amount, icon: Icon }) => (
-                  <Button
-                    key={amount}
-                    variant="outline"
-                    size="default"
-                    onClick={() => openSupportWindow(amount)}
-                    className="flex-col h-auto py-3 gap-1"
-                  >
-                    <Icon className="h-5 w-5" />
-                    <span className="text-sm font-semibold">
-                      {formatAmount(amount)}
-                    </span>
-                  </Button>
-                ))}
-              </div>
-            </div>
-
             {/* Top Contributors This Month */}
             {topDonors && topDonors.length > 0 && (
               <div className="space-y-3">
diff --git a/src/components/ZapWindow.tsx b/src/components/ZapWindow.tsx
index d803f26..dde64ef 100644
--- a/src/components/ZapWindow.tsx
+++ b/src/components/ZapWindow.tsx
@@ -150,6 +150,13 @@ export function ZapWindow({
   const [paymentTimedOut, setPaymentTimedOut] = useState(false);
   const [zapAnonymously, setZapAnonymously] = useState(false);
 
+  // Update selected amount when defaultAmount prop changes
+  useEffect(() => {
+    if (defaultAmount) {
+      setSelectedAmount(defaultAmount);
+    }
+  }, [defaultAmount]);
+
   // Editor ref and search functions
   const editorRef = useRef<MentionEditorHandle>(null);
   const { searchProfiles } = useProfileSearch();