From aa0efe7c6fdea212af068ee90f1e6560507add2b Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Mon, 4 May 2026 09:29:21 -0400
Subject: [PATCH] Add PWA install banner to dashboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows a dismissible banner on mobile only, tailored to three cases:
- iOS + Safari: instructions to tap Share → Add to Home Screen
- iOS + other browser: tells user to open in Safari first (required for standalone)
- Android: instructions to tap menu → Install App / Add to Home Screen

Hidden when already running as standalone PWA, or after user dismisses it
(stored in localStorage so it stays gone). Explains camera permission benefit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Views/Dashboard/Index.cshtml              | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/src/PowderCoating.Web/Views/Dashboard/Index.cshtml b/src/PowderCoating.Web/Views/Dashboard/Index.cshtml
index 705f615..46cdb0e 100644
--- a/src/PowderCoating.Web/Views/Dashboard/Index.cshtml
+++ b/src/PowderCoating.Web/Views/Dashboard/Index.cshtml
@@ -59,6 +59,23 @@
     </div>
 </div>
 
+@* PWA install banner — rendered by JS only on mobile, hidden once dismissed or already installed *@
+<div id="pwa-install-banner" class="row mb-4" style="display:none!important;">
+    <div class="col-12">
+        <div class="alert alert-permanent mb-0 d-flex align-items-start gap-3 py-3"
+             style="background:var(--pcl-paper-2);border:1px solid var(--pcl-rule);border-left:4px solid var(--pcl-ember);">
+            <div class="flex-shrink-0 mt-1">
+                <img src="/images/pwa-icon-192.png" alt="" width="36" height="36" style="border-radius:8px;">
+            </div>
+            <div class="flex-grow-1">
+                <div class="fw-semibold mb-1" id="pwa-banner-title">Add to Home Screen</div>
+                <div class="text-muted small" id="pwa-banner-msg"></div>
+            </div>
+            <button type="button" class="btn-close flex-shrink-0" id="pwa-banner-dismiss" aria-label="Dismiss"></button>
+        </div>
+    </div>
+</div>
+
 @if (guidedActivationBanner?.Show == true)
 {
     <div class="row mb-4">
@@ -1253,6 +1270,61 @@
 </script>
 }
 
+<script>
+(function () {
+    var DISMISSED_KEY = 'pcl_pwa_banner_dismissed';
+
+    // Already installed as standalone — never show
+    var isStandalone = window.navigator.standalone === true ||
+                       window.matchMedia('(display-mode: standalone)').matches;
+    if (isStandalone) return;
+
+    // Already dismissed
+    if (localStorage.getItem(DISMISSED_KEY)) return;
+
+    var ua = navigator.userAgent || '';
+    var isIOS = /iphone|ipad|ipod/i.test(ua);
+    var isAndroid = /android/i.test(ua);
+
+    // Only show on mobile
+    if (!isIOS && !isAndroid) return;
+
+    var banner = document.getElementById('pwa-install-banner');
+    var msgEl  = document.getElementById('pwa-banner-msg');
+    var titleEl = document.getElementById('pwa-banner-title');
+
+    if (isIOS) {
+        // Detect Safari: has WebKit in UA but NOT Chrome/CriOS/FxiOS
+        var isSafari = /webkit/i.test(ua) && !/crios|chrome|fxios|opios/i.test(ua);
+        if (isSafari) {
+            titleEl.textContent = 'Add to Home Screen';
+            msgEl.innerHTML = 'For the best experience — and so the camera only asks once — open the ' +
+                '<strong>Share menu</strong> <span style="font-size:1.1em">&#9650;</span> at the bottom of Safari ' +
+                'and tap <strong>Add to Home Screen</strong>.';
+        } else {
+            titleEl.textContent = 'Open in Safari to Install';
+            msgEl.innerHTML = 'To add Powder Coating Logix to your home screen, <strong>open this page in Safari</strong> ' +
+                '(not Chrome or another browser), then tap the <strong>Share menu</strong> ' +
+                '<span style="font-size:1.1em">&#9650;</span> and choose <strong>Add to Home Screen</strong>. ' +
+                'This also means the camera only asks for permission once.';
+        }
+    } else {
+        // Android
+        titleEl.textContent = 'Add to Home Screen';
+        msgEl.innerHTML = 'Tap the browser <strong>menu&nbsp;(&#8942;)</strong> and choose ' +
+            '<strong>Add to Home Screen</strong> or <strong>Install App</strong> for the best experience ' +
+            'and persistent camera access.';
+    }
+
+    banner.style.removeProperty('display');
+
+    document.getElementById('pwa-banner-dismiss').addEventListener('click', function () {
+        localStorage.setItem(DISMISSED_KEY, '1');
+        banner.style.display = 'none';
+    });
+}());
+</script>
+
 @functions {
     IHtmlContent PriorityBadge(string priorityCode, string displayName, string colorClass)
     {