jeffemmett
/
jefflix-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-03-31 12:20:02 -07:00
parent b86e7e7a1a
commit 0f76ce3cd7
1 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/update-banner.tsx
View File

@ -1,13 +1,14 @@
'use client' 'use client'
import { useState, useEffect, useCallback } from 'react' 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 const CHECK_INTERVAL = 60_000 // check every 60s
export function UpdateBanner() { export function UpdateBanner() {
const [updateAvailable, setUpdateAvailable] = useState(false) const [updateAvailable, setUpdateAvailable] = useState(false)
const [initialVersion, setInitialVersion] = useState<string | null>(null) const [initialVersion, setInitialVersion] = useState<string | null>(null)
const [updating, setUpdating] = useState(false)
const checkVersion = useCallback(async () => { const checkVersion = useCallback(async () => {
try { try {
@ -42,13 +43,37 @@ export function UpdateBanner() {
if (!updateAvailable) return null if (!updateAvailable) return null
const handleUpdate = () => {
setUpdating(true)
window.location.reload()
}
return ( return (
<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">
onClick={() => window.location.reload()} <div className="mx-auto max-w-2xl px-4 py-4 flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
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" <div className="flex items-center gap-3 text-center sm:text-left">
> <div className="rounded-full bg-white/20 p-2 animate-pulse">
<RefreshCw className="h-4 w-4" /> <Download className="h-5 w-5" />
A new version is available — tap to update </div>
</button> <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>
) )
} }