From ffb1677fa2962b4d126e5c8f859cd1b02f95ea3c Mon Sep 17 00:00:00 2001
From: lemon <lemonknowsall@gmail.com>
Date: Wed, 27 May 2026 23:50:50 -0700
Subject: [PATCH] Move campaign goal note into tooltip

---
 src/components/FormSection.tsx   |  2 +-
 src/pages/CreateCampaignPage.tsx | 28 ++++++++++++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/FormSection.tsx b/src/components/FormSection.tsx
index bf738ed7..6563d3cb 100644
--- a/src/components/FormSection.tsx
+++ b/src/components/FormSection.tsx
@@ -11,7 +11,7 @@ export function FormSection({
   requirement,
   children,
 }: {
-  title: string;
+  title: React.ReactNode;
   requirement: 'Required' | 'Recommended' | 'Optional';
   children: React.ReactNode;
 }) {
diff --git a/src/pages/CreateCampaignPage.tsx b/src/pages/CreateCampaignPage.tsx
index a567d9a5..624ca7d4 100644
--- a/src/pages/CreateCampaignPage.tsx
+++ b/src/pages/CreateCampaignPage.tsx
@@ -10,6 +10,7 @@ import {
   AlertTriangle,
   ArrowLeft,
   HandHeart,
+  HelpCircle,
   Loader2,
   MapPin,
   Wallet,
@@ -34,6 +35,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAppContext } from '@/hooks/useAppContext';
 import { useAuthor } from '@/hooks/useAuthor';
 import { useCampaign } from '@/hooks/useCampaign';
@@ -762,7 +764,28 @@ export function CreateCampaignPage() {
 
           <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
             {/* Goal — integer USD */}
-            <FormSection title={t('campaignsCreate.goal')} requirement="Optional">
+            <FormSection
+              title={(
+                <span className="inline-flex items-center gap-1.5">
+                  {t('campaignsCreate.goal')}
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                        aria-label={t('campaignsCreate.goalNote')}
+                      >
+                        <HelpCircle className="size-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" className="max-w-64 text-xs leading-relaxed">
+                      {t('campaignsCreate.goalNote')}
+                    </TooltipContent>
+                  </Tooltip>
+                </span>
+              )}
+              requirement="Optional"
+            >
               <div className="relative">
                 <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
                   $
@@ -780,9 +803,6 @@ export function CreateCampaignPage() {
                   USD
                 </span>
               </div>
-              <p className="text-xs text-muted-foreground">
-                {t('campaignsCreate.goalNote')}
-              </p>
             </FormSection>
 
             {/* Deadline */}