From 54bba9c82728516f1df2a8904ac4984ec54e4034 Mon Sep 17 00:00:00 2001
From: Aditya Gupta <mail@adityagupta.dev>
Date: Sat, 6 Jun 2026 11:01:34 +0530
Subject: [PATCH] feat: Added ios/ipadOS prompt

---
 src/App.jsx                       |  4 ++
 src/components/IosPromptModal.jsx | 76 +++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 src/components/IosPromptModal.jsx

diff --git a/src/App.jsx b/src/App.jsx
index d48c629..f393a86 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,7 @@ import BrewForm from "./components/BrewForm";
 import BeanDetail from "./components/BeanDetail";
 import BrewCard from "./components/BrewCard";
 import BottomNav from "./components/BottomNav";
+import IosPromptModal from "./components/IosPromptModal";
 
 
 // Import constants
@@ -334,6 +335,9 @@ export default function CoffeeLogbook() {
       {modal === "addBean" && <BeanForm onSave={addBean} onClose={() => setModal(null)} />}
       {modal === "editBean" && editingBean && <BeanForm initial={editingBean} onSave={updateBean} onClose={() => { setModal(null); setEditingBean(null); }} />}
       {modal === "addBrew" && <BrewForm beans={beans} onSave={addBrew} onClose={() => setModal(null)} />}
+      
+      {/* iOS/iPadOS PWA Install Prompt */}
+      <IosPromptModal />
     </div>
   );
 }
diff --git a/src/components/IosPromptModal.jsx b/src/components/IosPromptModal.jsx
new file mode 100644
index 0000000..0e7d714
--- /dev/null
+++ b/src/components/IosPromptModal.jsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from "react";
+
+export default function IosPromptModal() {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    // Detect if user is on iOS or iPadOS
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || 
+                  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+    
+    // Check if app is in standalone mode (already installed)
+    const isStandalone = window.matchMedia('(display-mode: standalone)').matches || 
+                          window.navigator.standalone;
+
+    // Check if user has already dismissed it this session
+    const isDismissed = sessionStorage.getItem("ios-prompt-dismissed");
+
+    if (isIOS && !isStandalone && !isDismissed) {
+      setShow(true);
+    }
+  }, []);
+
+  if (!show) return null;
+
+  const handleClose = () => {
+    sessionStorage.setItem("ios-prompt-dismissed", "true");
+    setShow(false);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-[rgba(44,24,16,0.5)] z-[200] flex items-end justify-center animate-fade-in" onClick={handleClose}>
+      <div className="bg-[#FAF6F1] rounded-t-[28px] w-full max-w-[480px] px-6 pb-8 pt-4 animate-slide-up relative shadow-[0_-8px_30px_rgba(44,24,16,0.15)]" onClick={e => e.stopPropagation()}>
+        {/* Handle bar */}
+        <div className="w-9 h-1 bg-[#E8DFD3] rounded mx-auto mb-6" />
+        
+        {/* Close Button */}
+        <button 
+          onClick={handleClose} 
+          className="absolute right-5 top-5 w-8 h-8 flex items-center justify-center rounded-full bg-white border border-[#E8DFD3] text-[#9C8B7A] hover:text-[#2C1810] transition-colors cursor-pointer text-lg font-semibold"
+          aria-label="Close"
+        >
+          &times;
+        </button>
+
+        {/* Content */}
+        <div className="flex flex-col items-center text-center">
+          {/* Brew Logo */}
+          <div className="w-16 h-16 bg-white border border-[#E8DFD3] rounded-2xl flex items-center justify-center p-3 shadow-sm mb-3">
+            <img src="/favicon.svg" alt="Brew Logo" className="w-full h-full object-contain" />
+          </div>
+
+          {/* Brew Text */}
+          <div className="font-serif text-2xl font-bold text-[#2C1810] mb-3">Brew</div>
+
+          {/* Description */}
+          <p className="text-sm text-[#6B5744] leading-relaxed mb-6 px-4">
+            Open this page on safari and then install this app to your homescreen for a better experience.
+          </p>
+
+          {/* Instruction */}
+          <div className="w-full bg-white border border-[#E8DFD3] rounded-2xl p-4 flex items-center justify-center gap-3">
+            <span className="text-sm text-[#2C1810] font-medium flex items-center justify-center flex-wrap">
+              Tap 
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8B6914" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="inline-block mx-1.5 align-middle">
+                <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>
+              then <span className="font-bold text-[#8B6914] ml-1">"Add to Home Screen"</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}