fix: ui fixes
This commit is contained in:
gosangam
@@ -1,83 +0,0 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* LikeEmailToggle — settings control for aggregated "someone liked your post"
|
||||
* emails. Reads the current preference and lets the user opt out (push +
|
||||
* in-app like notifications are unaffected). Matches the other settings rows.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { notifications } from "@/lib/social";
|
||||
|
||||
export function LikeEmailToggle() {
|
||||
const [enabled, setEnabled] = useState<boolean | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
notifications
|
||||
.emailPrefs()
|
||||
.then((r) => {
|
||||
if (!cancelled) setEnabled(r.like_emails);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setEnabled(true); // default-on; toggle still works
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function toggle() {
|
||||
if (enabled === null) return;
|
||||
const next = !enabled;
|
||||
setBusy(true);
|
||||
try {
|
||||
await notifications.setEmailPrefs(next);
|
||||
setEnabled(next);
|
||||
toast.success(next ? "Like emails turned on" : "Like emails turned off");
|
||||
} catch {
|
||||
toast.error("Could not update preference");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
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">Like emails</span>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Get an email when someone likes your post (bundled — one email per
|
||||
post). Push and in-app notifications stay on either way.
|
||||
</p>
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
{enabled === null ? (
|
||||
<span className="text-xs text-muted-foreground">…</span>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
disabled={busy}
|
||||
aria-pressed={enabled}
|
||||
className={[
|
||||
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:opacity-60",
|
||||
enabled ? "bg-primary" : "bg-muted-foreground/30",
|
||||
].join(" ")}
|
||||
>
|
||||
<span
|
||||
className={[
|
||||
"inline-block size-5 transform rounded-full bg-white shadow transition-transform",
|
||||
enabled ? "translate-x-5" : "translate-x-0.5",
|
||||
].join(" ")}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* NotificationMatrix — the Settings grid controlling which events reach the
|
||||
* user over which channels (in-app, email, push). Account-wide preferences;
|
||||
* the device-level PushToggle above it governs whether *this* device can
|
||||
* receive push at all (two layers, like an OS permission vs. app settings).
|
||||
*
|
||||
* Cells write through to PUT /notifications/prefs one at a time and re-render
|
||||
* from the matrix the server returns, so the UI always shows resolved state.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
notifications,
|
||||
type NotificationPrefs,
|
||||
type PrefChannel,
|
||||
type PrefEvent,
|
||||
} from "@/lib/social";
|
||||
import { ToggleSwitch } from "@/components/settings/setting-row";
|
||||
import {
|
||||
enablePush,
|
||||
isPushEnabled,
|
||||
pushPermission,
|
||||
pushSupported,
|
||||
} from "@/lib/push";
|
||||
|
||||
const EVENTS: { key: PrefEvent; label: string; description: string }[] = [
|
||||
{
|
||||
key: "follows",
|
||||
label: "Follows",
|
||||
description: "Follow requests and accepted requests.",
|
||||
},
|
||||
{
|
||||
key: "post_interactions",
|
||||
label: "Post interactions",
|
||||
description: "Likes and mentions on your posts.",
|
||||
},
|
||||
{
|
||||
key: "sadhna_reminders",
|
||||
label: "Sādhana reminders",
|
||||
description: "Daily nudges to chant your rounds and share a verse.",
|
||||
},
|
||||
];
|
||||
|
||||
const CHANNELS: { key: PrefChannel; label: string }[] = [
|
||||
{ key: "in_app", label: "In-app" },
|
||||
{ key: "email", label: "Email" },
|
||||
{ key: "push", label: "Push" },
|
||||
];
|
||||
|
||||
export function NotificationMatrix() {
|
||||
const [prefs, setPrefs] = useState<NotificationPrefs | null>(null);
|
||||
const [failed, setFailed] = useState(false);
|
||||
// The "event/channel" cell currently being written, so only it disables.
|
||||
const [busyCell, setBusyCell] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
notifications
|
||||
.prefs()
|
||||
.then(({ prefs }) => {
|
||||
if (!cancelled) setPrefs(prefs);
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setFailed(true);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function toggle(event: PrefEvent, channel: PrefChannel) {
|
||||
if (!prefs) return;
|
||||
const next = !prefs[event][channel];
|
||||
setBusyCell(`${event}/${channel}`);
|
||||
try {
|
||||
// Turning a push cell ON only helps if this device can receive push —
|
||||
// offer the permission/subscription right at the gesture, best-effort
|
||||
// (the account-wide pref still saves if the user declines).
|
||||
if (
|
||||
channel === "push" &&
|
||||
next &&
|
||||
pushSupported() &&
|
||||
pushPermission() !== "denied" &&
|
||||
!(await isPushEnabled())
|
||||
) {
|
||||
await enablePush().catch(() => {
|
||||
/* declined / unavailable — other subscribed devices still get it */
|
||||
});
|
||||
}
|
||||
const { prefs: updated } = await notifications.setPref(
|
||||
event,
|
||||
channel,
|
||||
next,
|
||||
);
|
||||
setPrefs(updated);
|
||||
} catch {
|
||||
toast.error("Could not update preference");
|
||||
} finally {
|
||||
setBusyCell(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (failed) {
|
||||
return (
|
||||
<p className="py-3 text-xs text-muted-foreground">
|
||||
Couldn't load your notification preferences. Reload to try again.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-[1fr_auto_auto_auto] items-center gap-x-4 gap-y-0 sm:gap-x-6">
|
||||
{/* Header row */}
|
||||
<span aria-hidden />
|
||||
{CHANNELS.map((c) => (
|
||||
<span
|
||||
key={c.key}
|
||||
className="pb-2 text-center text-xs font-medium text-muted-foreground"
|
||||
>
|
||||
{c.label}
|
||||
</span>
|
||||
))}
|
||||
|
||||
{EVENTS.map((event) => (
|
||||
<div key={event.key} className="contents">
|
||||
<div className="min-w-0 border-t border-border py-3">
|
||||
<span className="text-sm text-foreground">{event.label}</span>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{event.description}
|
||||
</p>
|
||||
</div>
|
||||
{CHANNELS.map((channel) => (
|
||||
<div
|
||||
key={channel.key}
|
||||
className="flex justify-center border-t border-border py-3"
|
||||
>
|
||||
{prefs ? (
|
||||
<ToggleSwitch
|
||||
checked={prefs[event.key][channel.key]}
|
||||
disabled={busyCell === `${event.key}/${channel.key}`}
|
||||
onToggle={() => toggle(event.key, channel.key)}
|
||||
label={`${event.label} — ${channel.label}`}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">…</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user