fix: webpush for iOS

components/push/push-toggle.tsx

@@ -13,6 +13,7 @@ import {
   disablePush,
   enablePush,
   isPushEnabled,
+  needsIOSInstall,
   pushConfigured,
   pushPermission,
   pushSupported,
@@ -21,6 +22,7 @@ import {
 type State =
   | "loading"
   | "unsupported"
+  | "ios-install" // iOS: must add to Home Screen first
   | "unavailable" // server has no VAPID keys
   | "denied" // browser permission blocked
   | "on"
@@ -33,7 +35,9 @@ export function PushToggle() {
   useEffect(() => {
     let cancelled = false;
     (async () => {
-      if (!pushSupported()) return finish("unsupported");
+      if (!pushSupported()) {
+        return finish(needsIOSInstall() ? "ios-install" : "unsupported");
+      }
       if (pushPermission() === "denied") return finish("denied");
       if (!(await pushConfigured())) return finish("unavailable");
       finish((await isPushEnabled()) ? "on" : "off");
@@ -101,7 +105,11 @@ export function PushToggle() {
             </button>
           ) : (
             <span className="text-xs text-muted-foreground">
-              {state === "loading" ? "…" : "Unavailable"}
+              {state === "loading"
+                ? "…"
+                : state === "ios-install"
+                  ? null
+                  : "Unavailable"}
             </span>
           )}
         </div>
@@ -118,6 +126,8 @@ function describe(state: State): string {
       return "Get notified about follow requests and more, even when the app is closed.";
     case "denied":
       return "Blocked in your browser. Enable notifications for this site in your browser settings, then reload.";
+    case "ios-install":
+      return "On iPhone & iPad, notifications work only from the Home Screen app. Tap the Share icon in Safari, choose “Add to Home Screen”, then open Prabhupāda Says from the new icon and turn this on.";
     case "unsupported":
       return "This browser doesn't support push notifications.";
     case "unavailable":