From 0f76ce3cd7e5883322e51b8efbd1c2115afe11b8 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 31 Mar 2026 12:20:02 -0700
Subject: [PATCH] feat: make update banner more prominent with header and
 one-click button

Redesigned the PWA update notification from a thin bar to a bold,
animated banner with gradient background, pulsing download icon,
"Update Available" header, and a large "Update Now" pill button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/update-banner.tsx | 41 +++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/components/update-banner.tsx b/components/update-banner.tsx
index d9ac9a5..10a45da 100644
--- a/components/update-banner.tsx
+++ b/components/update-banner.tsx
@@ -1,13 +1,14 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
-import { RefreshCw } from 'lucide-react'
+import { RefreshCw, Download } from 'lucide-react'
 
 const CHECK_INTERVAL = 60_000 // check every 60s
 
 export function UpdateBanner() {
   const [updateAvailable, setUpdateAvailable] = useState(false)
   const [initialVersion, setInitialVersion] = useState<string | null>(null)
+  const [updating, setUpdating] = useState(false)
 
   const checkVersion = useCallback(async () => {
     try {
@@ -42,13 +43,37 @@ export function UpdateBanner() {
 
   if (!updateAvailable) return null
 
+  const handleUpdate = () => {
+    setUpdating(true)
+    window.location.reload()
+  }
+
   return (
-    <button
-      onClick={() => window.location.reload()}
-      className="fixed top-0 left-0 right-0 z-[100] bg-purple-600 text-white text-sm font-medium py-2.5 px-4 flex items-center justify-center gap-2 shadow-lg hover:bg-purple-700 transition-colors cursor-pointer"
-    >
-      <RefreshCw className="h-4 w-4" />
-      A new version is available — tap to update
-    </button>
+    <div className="fixed inset-x-0 top-0 z-[100] bg-gradient-to-r from-purple-700 via-purple-600 to-indigo-600 text-white shadow-2xl animate-in slide-in-from-top duration-300">
+      <div className="mx-auto max-w-2xl px-4 py-4 flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
+        <div className="flex items-center gap-3 text-center sm:text-left">
+          <div className="rounded-full bg-white/20 p-2 animate-pulse">
+            <Download className="h-5 w-5" />
+          </div>
+          <div>
+            <h2 className="text-base font-bold tracking-tight sm:text-lg">
+              Update Available
+            </h2>
+            <p className="text-xs text-purple-100 sm:text-sm">
+              A new version of Jefflix has been deployed
+            </p>
+          </div>
+        </div>
+
+        <button
+          onClick={handleUpdate}
+          disabled={updating}
+          className="flex items-center gap-2 rounded-full bg-white text-purple-700 font-bold px-6 py-2.5 text-sm shadow-lg hover:bg-purple-50 active:scale-95 transition-all cursor-pointer disabled:opacity-70 whitespace-nowrap"
+        >
+          <RefreshCw className={`h-4 w-4 ${updating ? 'animate-spin' : ''}`} />
+          {updating ? 'Updating…' : 'Update Now'}
+        </button>
+      </div>
+    </div>
   )
 }