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,128 @@
+"use client";
+
+/**
+ * PushToggle — the settings control for browser push notifications. Reads the
+ * current state on mount (supported? permission? server-configured?
+ * subscribed?) and lets the user enable/disable. Renders as a settings row
+ * matching the rest of /settings.
+ */
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+  disablePush,
+  enablePush,
+  isPushEnabled,
+  pushConfigured,
+  pushPermission,
+  pushSupported,
+} from "@/lib/push";
+
+type State =
+  | "loading"
+  | "unsupported"
+  | "unavailable" // server has no VAPID keys
+  | "denied" // browser permission blocked
+  | "on"
+  | "off";
+
+export function PushToggle() {
+  const [state, setState] = useState<State>("loading");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      if (!pushSupported()) return finish("unsupported");
+      if (pushPermission() === "denied") return finish("denied");
+      if (!(await pushConfigured())) return finish("unavailable");
+      finish((await isPushEnabled()) ? "on" : "off");
+      function finish(s: State) {
+        if (!cancelled) setState(s);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function toggle() {
+    setBusy(true);
+    try {
+      if (state === "on") {
+        await disablePush();
+        setState("off");
+        toast.success("Push notifications turned off");
+      } else {
+        await enablePush();
+        setState("on");
+        toast.success("Push notifications turned on");
+      }
+    } catch (err) {
+      const msg =
+        err instanceof Error ? err.message : "Something went wrong.";
+      // A fresh block surfaces as a permission error — reflect it.
+      if (pushPermission() === "denied") setState("denied");
+      toast.error(msg);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const description = describe(state);
+
+  return (
+    <ul className="divide-y divide-border">
+      <li className="flex items-center justify-between gap-4 py-3">
+        <div className="min-w-0">
+          <span className="text-sm text-foreground">
+            Push notifications
+          </span>
+          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+        </div>
+        <div className="shrink-0">
+          {state === "on" || state === "off" ? (
+            <button
+              type="button"
+              onClick={toggle}
+              disabled={busy}
+              aria-pressed={state === "on"}
+              className={[
+                "relative inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:opacity-60",
+                state === "on" ? "bg-primary" : "bg-muted-foreground/30",
+              ].join(" ")}
+            >
+              <span
+                className={[
+                  "inline-block size-5 transform rounded-full bg-white shadow transition-transform",
+                  state === "on" ? "translate-x-5" : "translate-x-0.5",
+                ].join(" ")}
+              />
+            </button>
+          ) : (
+            <span className="text-xs text-muted-foreground">
+              {state === "loading" ? "…" : "Unavailable"}
+            </span>
+          )}
+        </div>
+      </li>
+    </ul>
+  );
+}
+
+function describe(state: State): string {
+  switch (state) {
+    case "on":
+      return "On — you'll be notified about follow requests and more, even when the app is closed.";
+    case "off":
+      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 "unsupported":
+      return "This browser doesn't support push notifications.";
+    case "unavailable":
+      return "Push notifications aren't available right now.";
+    default:
+      return "Checking…";
+  }
+}