From 1577303582c5cf130b8799fa0061841f28bb9c95 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sat, 6 Jun 2026 13:11:14 +0530
Subject: [PATCH] feat(billing): header upgrade affordance on home page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Small, non-intrusive upgrade entry point before SOS + dark-mode toggle:
- Free tier: muted gray 👑 crown with a pulsing rose dot (discoverable hint,
  not a nag) — links to /settings#upgrade
- Premium tier: amber ✨ sparkle (status reward, no upsell) — links to the
  same Plan section showing their grants + cancel

Reads tier from useFamily(). Both states link to the working Plan section
built in Task 8, so it's wired into the real upgrade/cancel flow.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/(app)/home/page.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/app/(app)/home/page.tsx b/src/app/(app)/home/page.tsx
index 0bfd17a..1b50f05 100644
--- a/src/app/(app)/home/page.tsx
+++ b/src/app/(app)/home/page.tsx
@@ -106,7 +106,7 @@ export default function HomePage() {
   const [showPhotoMenu, setShowPhotoMenu]   = useState(false);
   const photoInputRef = useRef<HTMLInputElement>(null);
   const { theme, toggle: toggleTheme } = useTheme();
-  const { childId, child, familyId, loading, updateChildImage } = useFamily();
+  const { childId, child, familyId, loading, tier, updateChildImage } = useFamily();
   const stage = useStageCheck(child?.birthDate ?? null);
 
   useEffect(() => {
@@ -330,6 +330,25 @@ export default function HomePage() {
 <div className="p-4 flex justify-between items-center">
         <button className="p-2"><Link href="/menu"><svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg></Link></button>
         <div className="flex items-center gap-1">
+          {tier === "pro" ? (
+            <Link
+              href="/settings#upgrade"
+              title="Tia Premium"
+              className="p-2 text-amber-500 hover:text-amber-600"
+            >
+              ✨
+            </Link>
+          ) : (
+            <Link
+              href="/settings#upgrade"
+              title="Upgrade to Premium"
+              className="relative p-2 text-gray-400 hover:text-rose-500 transition-colors"
+            >
+              👑
+              {/* Pulsing dot hints there's something to explore — non-intrusive */}
+              <span className="absolute top-1 right-1 w-2 h-2 bg-rose-500 rounded-full animate-pulse" />
+            </Link>
+          )}
           <Link href="/medical/emergency" className="p-2 text-red-500 hover:text-red-600" title="Emergency Guide">🆘</Link>
           <button onClick={toggleDarkMode} className="p-2">{theme === "dark" ? "☀️" : "🌙"}</button>
         </div>