From 4f3f32e9153d51f43b738b48f3662831d40659ac Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Tue, 9 Dec 2025 11:27:06 -0500
Subject: [PATCH] Add install prompt button for PWA

---
 assets/app.js    | 37 +++++++++++++++++++++++++++++++++++++
 assets/style.css |  1 +
 index.html       |  1 +
 3 files changed, 39 insertions(+)

diff --git a/assets/app.js b/assets/app.js
index c4b7d3e..fc8a332 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -19,6 +19,7 @@ const modal = document.getElementById('modalOverlay');
 const modalInput = document.getElementById('modalInput');
 const modalTitle = document.getElementById('modalTitle');
 const hapticTick = () => { if ('vibrate' in navigator) navigator.vibrate(12); };
+const installBtn = document.getElementById('installBtn');
 
 // --- Service Worker ---
 if ('serviceWorker' in navigator) {
@@ -29,6 +30,42 @@ if ('serviceWorker' in navigator) {
     });
 }
 
+// --- Install Prompt ---
+let deferredInstallPrompt = null;
+const isStandalone = () =>
+    window.matchMedia('(display-mode: standalone)').matches ||
+    window.navigator.standalone === true;
+
+function hideInstall() {
+    if (installBtn) installBtn.classList.add('hidden');
+}
+function showInstall() {
+    if (installBtn) installBtn.classList.remove('hidden');
+}
+
+window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredInstallPrompt = e;
+    if (!isStandalone()) showInstall();
+});
+
+window.addEventListener('appinstalled', () => {
+    deferredInstallPrompt = null;
+    hideInstall();
+});
+
+if (installBtn) {
+    installBtn.addEventListener('click', async () => {
+        if (!deferredInstallPrompt) return;
+        deferredInstallPrompt.prompt();
+        const choice = await deferredInstallPrompt.userChoice;
+        if (choice.outcome === 'accepted') hideInstall();
+        deferredInstallPrompt = null;
+    });
+}
+
+if (isStandalone()) hideInstall();
+
 // --- Sweet-ish Alerts ---
 function removeSwal() {
     const existing = document.querySelector('.swal-overlay');
diff --git a/assets/style.css b/assets/style.css
index 909e061..937ee28 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -116,6 +116,7 @@ h1 {
 }
 
 .header-btn.is-active { background: var(--header-text); color: var(--header-bg); }
+.hidden { display: none !important; }
 
 .container {
     max-width: 650px;
diff --git a/index.html b/index.html
index 0a22de6..6ab7901 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@
         <h1>Toadstool Tally</h1>
     </div>
     <div class="header-controls">
+        <button class="header-btn hidden" id="installBtn" title="Install app">⬇️</button>
         <button class="header-btn" id="themeBtn" onclick="toggleTheme()" title="Toggle Dark Mode">🌓</button>
         <button class="header-btn" id="focusBtn" onclick="toggleFocusMode()" title="Focus Mode (Keeps Screen On)">👁️</button>
     </div>