chrisf/everclone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pwa): correctly render install guide modal and mobile floating banner in JSX

Browse Source
This commit is contained in:
chrisf committed 2026-10-22 20:12:39 -06:00
1 parent 704d3b9eca
commit 4e625acb1b
1 file changed
+70
Download Patch File Download Diff File Expand all files Collapse all files
src/components/EvercloneWorkspace.tsx
+70
View File
@@ -3199,6 +3199,76 @@ export default function EvercloneWorkspace() {
/>
</>
)}
{/* Floating PWA Install Banner on Mobile */}
{canInstallPwa && (
<div className="fixed bottom-4 left-4 right-4 md:hidden z-50 bg-neutral-900/95 border border-neutral-700 text-white p-3.5 rounded-2xl shadow-2xl backdrop-blur-md flex items-center justify-between gap-3 animate-in fade-in slide-in-from-bottom duration-300">
<div className="flex items-center gap-2.5 min-w-0">
<img src="/icon-192.png" alt="Everclone" className="w-10 h-10 rounded-xl shrink-0 border border-neutral-700" />
<div className="min-w-0">
<div className="text-xs font-bold truncate">Install Everclone App</div>
<div className="text-[11px] text-gray-400 truncate">Adds Everclone to Android Share Sheet</div>
</div>
</div>
<div className="flex items-center gap-2 shrink-0">
<button
type="button"
onClick={handleInstallPwa}
className="px-3.5 py-1.5 bg-evernote-green hover:bg-evernote-greenHover text-white text-xs font-semibold rounded-xl shadow transition"
>
Install
</button>
<button
type="button"
onClick={() => {
setCanInstallPwa(false);
try { localStorage.setItem('evc_dismiss_install', '1'); } catch {}
}}
className="p-1 text-gray-400 hover:text-white"
title="Dismiss"
>
✕
</button>
</div>
</div>
)}
{/* Guide modal if browser didn't supply beforeinstallprompt */}
{installHelpModalOpen && (
<div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
<div className="bg-neutral-900 border border-neutral-700 text-white rounded-2xl max-w-sm w-full p-5 shadow-2xl animate-in fade-in zoom-in-95 duration-200">
<div className="flex items-center gap-3 mb-4">
<img src="/icon-192.png" alt="Everclone" className="w-11 h-11 rounded-xl border border-neutral-700" />
<div>
<h3 className="font-bold text-sm">Install Everclone App</h3>
<p className="text-xs text-gray-400">Add to Home Screen & Share Sheet</p>
</div>
</div>
<div className="space-y-2.5 text-xs text-gray-300 bg-neutral-800/80 p-3.5 rounded-xl border border-neutral-700/60 mb-4">
<p className="font-medium text-emerald-400">To install on your phone:</p>
<div className="flex items-start gap-2.5">
<span className="bg-neutral-700 text-white w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0">1</span>
<span>Tap your browser's menu (three dots <strong>⋮</strong> in the top or bottom corner).</span>
</div>
<div className="flex items-start gap-2.5">
<span className="bg-neutral-700 text-white w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0">2</span>
<span>Tap <strong>Install app</strong> (or <strong>Add to Home screen</strong>).</span>
</div>
<div className="flex items-start gap-2.5">
<span className="bg-neutral-700 text-white w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0">3</span>
<span>Tap <strong>Install</strong>. Everclone will register in your Android Share Sheet!</span>
</div>
</div>
<button
type="button"
onClick={() => setInstallHelpModalOpen(false)}
className="w-full py-2.5 bg-evernote-green hover:bg-evernote-greenHover text-white text-xs font-semibold rounded-xl transition shadow"
>
Got It
</button>
</div>
</div>
)}
</div>
);
}