feat: add webpush and sadhna tracker

2026-06-08 15:48:12 +05:30
parent ecb32d2e85
commit 0334e03c3c
52 changed files with 2118 additions and 545 deletions
@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * PushPrompt — a gentle on-load invitation to enable browser notifications,
+ * shown to signed-in users who haven't decided yet.
+ *
+ * Browsers require a user gesture to request notification permission, so this
+ * is a *soft* ask: the real `Notification.requestPermission()` only fires
+ * when the user taps "Enable". We show it when push is supported, the server
+ * has push configured, permission is still "default", the user isn't already
+ * subscribed, and they haven't recently dismissed it (7-day cooldown).
+ */
+
+import { useEffect, useState } from "react";
+import { Bell, X } from "lucide-react";
+import { toast } from "sonner";
+import { useAuth } from "@/components/auth/auth-provider";
+import {
+  enablePush,
+  isPushEnabled,
+  pushConfigured,
+  pushPermission,
+  pushSupported,
+} from "@/lib/push";
+
+const DISMISS_KEY = "push.prompt.dismissedAt";
+const COOLDOWN_MS = 7 * 24 * 60 * 60 * 1000;
+
+export function PushPrompt() {
+  const { user, loading } = useAuth();
+  const [show, setShow] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const userId = user?.id;
+  useEffect(() => {
+    if (loading || !userId) return;
+    let cancelled = false;
+
+    // Async eligibility check — never setState synchronously in the effect.
+    (async () => {
+      if (!pushSupported() || pushPermission() !== "default") return;
+      const dismissed = Number(window.localStorage.getItem(DISMISS_KEY) || 0);
+      if (dismissed && Date.now() - dismissed < COOLDOWN_MS) return;
+      if (!(await pushConfigured())) return;
+      if (await isPushEnabled()) return;
+      if (!cancelled) setShow(true);
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [userId, loading]);
+
+  function dismiss() {
+    window.localStorage.setItem(DISMISS_KEY, String(Date.now()));
+    setShow(false);
+  }
+
+  async function enable() {
+    setBusy(true);
+    try {
+      await enablePush();
+      toast.success("Notifications enabled 🙏");
+      setShow(false);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Couldn't enable notifications.");
+      // A denial / dismissal shouldn't keep re-prompting.
+      dismiss();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (!show) return null;
+
+  return (
+    <div className="fixed inset-x-0 bottom-20 z-40 flex justify-center px-4 md:bottom-4">
+      <div className="flex w-full max-w-md items-start gap-3 rounded-2xl border border-border bg-card p-4 shadow-lg">
+        <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+          <Bell className="size-4.5" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-semibold text-foreground">
+            Stay with your sādhana
+          </p>
+          <p className="mt-0.5 text-sm text-muted-foreground leading-snug">
+            Turn on notifications for daily reminders, follow requests, and
+            more — even when the app is closed.
+          </p>
+          <div className="mt-3 flex items-center gap-2">
+            <button
+              type="button"
+              onClick={enable}
+              disabled={busy}
+              className="inline-flex h-9 items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
+            >
+              {busy ? "Enabling…" : "Enable"}
+            </button>
+            <button
+              type="button"
+              onClick={dismiss}
+              className="inline-flex h-9 items-center justify-center rounded-lg px-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Not now
+            </button>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={dismiss}
+          aria-label="Dismiss"
+          className="-mr-1 -mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+        >
+          <X className="size-4" />
+        </button>
+      </div>
+    </div>
+  );
+}