feat: add webpush and sadhna tracker
This commit is contained in:
gosangam
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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…";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user