From 8a21ffddb569b8a44bfc5680d7ccb8016af8ba6e Mon Sep 17 00:00:00 2001
From: Ricky Stretch <rick@stretchy.ca>
Date: Fri, 27 Mar 2026 16:34:09 -0400
Subject: [PATCH] iOS bug fixes

---
 frontend/index.html         |  3 +++
 frontend/src/App.jsx        | 46 +++++++++++++++++++++++++++++++++++++
 frontend/src/pages/Chat.jsx | 45 ++++--------------------------------
 3 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 4da8faf..04cc53b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="theme-color" content="#1a73e8" />
     <meta name="description" content="RosterChirp - team messaging" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="RosterChirp" />
     <link rel="manifest" href="/manifest.json" />
     <link rel="apple-touch-icon" href="/icons/icon-192.png" />
     <title>RosterChirp</title>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 19a6276..2ffd661 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext.jsx';
 import { SocketProvider } from './contexts/SocketContext.jsx';
@@ -6,6 +7,50 @@ import Login from './pages/Login.jsx';
 import Chat from './pages/Chat.jsx';
 import ChangePassword from './pages/ChangePassword.jsx';
 
+// ── iOS "Add to Home Screen" banner ───────────────────────────────────────────
+// iOS Safari does not fire beforeinstallprompt. Push notifications require the
+// app to be installed as a PWA. This banner is shown to any iOS Safari user who
+// has not yet added the app to their Home Screen.
+const IOS_BANNER_KEY = 'rc_ios_install_dismissed';
+
+function IOSInstallBanner() {
+  const isIOS       = /iphone|ipad|ipod/i.test(navigator.userAgent);
+  const isStandalone = window.navigator.standalone === true;
+  const [dismissed, setDismissed] = useState(() => localStorage.getItem(IOS_BANNER_KEY) === '1');
+
+  if (!isIOS || isStandalone || dismissed) return null;
+
+  const dismiss = () => {
+    localStorage.setItem(IOS_BANNER_KEY, '1');
+    setDismissed(true);
+  };
+
+  return (
+    <div style={{
+      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 9999,
+      background: 'var(--primary, #1a73e8)', color: '#fff',
+      padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12,
+      boxShadow: '0 -2px 12px rgba(0,0,0,0.25)',
+    }}>
+      <div style={{ flex: 1 }}>
+        <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 2 }}>Add to Home Screen</div>
+        <div style={{ fontSize: 12, lineHeight: 1.4, opacity: 0.9 }}>
+          To receive push notifications, tap the{' '}
+          <svg style={{ display: 'inline', verticalAlign: 'middle', margin: '0 2px' }} width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
+            <polyline points="16 6 12 2 8 6"/>
+            <line x1="12" y1="2" x2="12" y2="15"/>
+          </svg>
+          {' '}Share button, then select <strong>"Add to Home Screen"</strong>.
+        </div>
+      </div>
+      <button onClick={dismiss} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#fff', padding: 4, flexShrink: 0, opacity: 0.9 }}>
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+  );
+}
+
 function ProtectedRoute({ children }) {
   const { user, loading, mustChangePassword } = useAuth();
   if (loading) return (
@@ -36,6 +81,7 @@ export default function App() {
   return (
     <BrowserRouter>
       <ToastProvider>
+        <IOSInstallBanner />
         <Routes>
           {/* All routes go through jama auth */}
           <Route path="/*" element={
diff --git a/frontend/src/pages/Chat.jsx b/frontend/src/pages/Chat.jsx
index 50a0473..0e54cd3 100644
--- a/frontend/src/pages/Chat.jsx
+++ b/frontend/src/pages/Chat.jsx
@@ -29,38 +29,6 @@ function urlBase64ToUint8Array(base64String) {
   return outputArray;
 }
 
-// ── iOS "Add to Home Screen" install banner ───────────────────────────────────
-// iOS Safari does not fire beforeinstallprompt. Push notifications on iOS require
-// the app to be installed as a PWA (added to Home Screen). This banner guides users.
-const IOS_BANNER_KEY = 'rc_ios_install_dismissed';
-function IOSInstallBanner({ onDismiss }) {
-  return (
-    <div style={{
-      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 9999,
-      background: 'var(--primary)', color: '#fff',
-      padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12,
-      boxShadow: '0 -2px 12px rgba(0,0,0,0.25)',
-    }}>
-      <div style={{ flex: 1 }}>
-        <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 2 }}>Add to Home Screen</div>
-        <div style={{ fontSize: 12, lineHeight: 1.4, opacity: 0.9 }}>
-          To receive push notifications, tap the{' '}
-          {/* iOS share icon */}
-          <svg style={{ display: 'inline', verticalAlign: 'middle', margin: '0 2px' }} width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
-            <polyline points="16 6 12 2 8 6"/>
-            <line x1="12" y1="2" x2="12" y2="15"/>
-          </svg>
-          {' '}Share button, then select <strong>"Add to Home Screen"</strong>.
-        </div>
-      </div>
-      <button onClick={onDismiss} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#fff', padding: 4, flexShrink: 0, opacity: 0.9 }}>
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-      </button>
-    </div>
-  );
-}
-
 export default function Chat() {
   const { socket } = useSocket();
   const { user } = useAuth();
@@ -79,9 +47,6 @@ export default function Chat() {
   const [helpDismissed, setHelpDismissed] = useState(true); // true until status loaded
   const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
   const [showSidebar, setShowSidebar] = useState(true);
-  const isIOSSafari = /iphone|ipad/i.test(navigator.userAgent) && !window.navigator.standalone;
-  const [iosBannerDismissed, setIosBannerDismissed] = useState(() => localStorage.getItem(IOS_BANNER_KEY) === '1');
-  const showIOSBanner = isIOSSafari && !iosBannerDismissed;
 
   // Check if help should be shown on login
   useEffect(() => {
@@ -585,7 +550,7 @@ export default function Chat() {
         {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
         {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
         {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
-        {showIOSBanner && <IOSInstallBanner onDismiss={() => { localStorage.setItem(IOS_BANNER_KEY, '1'); setIosBannerDismissed(true); }} />}
+
       </div>
     );
   }
@@ -614,7 +579,7 @@ export default function Chat() {
         {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
         {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
         {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
-        {showIOSBanner && <IOSInstallBanner onDismiss={() => { localStorage.setItem(IOS_BANNER_KEY, '1'); setIosBannerDismissed(true); }} />}
+
       </div>
     );
   }
@@ -674,7 +639,7 @@ export default function Chat() {
         {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
         {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
         {modal === 'newchat'  && <NewChatModal onClose={() => setModal(null)} onCreated={(g) => { loadGroups(); setModal(null); setActiveGroupId(g.id); setPage('chat'); }} />}
-        {showIOSBanner && <IOSInstallBanner onDismiss={() => { localStorage.setItem(IOS_BANNER_KEY, '1'); setIosBannerDismissed(true); }} />}
+
       </div>
     );
   }
@@ -707,7 +672,7 @@ export default function Chat() {
         {modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
         {modal === 'help'     && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
         {modal === 'about'    && <AboutModal onClose={() => setModal(null)} />}
-        {showIOSBanner && <IOSInstallBanner onDismiss={() => { localStorage.setItem(IOS_BANNER_KEY, '1'); setIosBannerDismissed(true); }} />}
+
       </div>
     );
   }
@@ -752,7 +717,7 @@ export default function Chat() {
         )}
         {modal === 'about'        && <AboutModal onClose={() => setModal(null)} />}
         {modal === 'help'         && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
-        {showIOSBanner && <IOSInstallBanner onDismiss={() => { localStorage.setItem(IOS_BANNER_KEY, '1'); setIosBannerDismissed(true); }} />}
+
       </div>
     );
   }