feat: per-category email prefs, admin ops webhooks, per-user feature toggles (v0.61.0)
- Notification email preferences: every push category (follow, comment, reply, reaction, rating, mention, leftoverExpiring, shoppingList) now has an independent email toggle, plus a Weekly Digest toggle. Previously email sent unconditionally whenever the recipient had one; now gated the same way push already was. The weekly-digest cron route excludes opted-out users. - Admin-only site-wide webhooks (Admin → Webhooks): new signups, support tickets, and reports filed can now fire an HMAC-signed HTTP webhook (Slack/Discord/ops alerting), independent of the existing per-user webhooks (which stay scoped to a user's own recipe/meal-plan/shopping-list events). Signing/delivery logic factored into lib/webhook-delivery.ts and shared by both dispatchers instead of duplicated. - Settings → Features: users can hide Nutrition, Pantry, Meal Plan, Shopping Lists, Collections, or Messages from their own nav. Purely cosmetic — hidden pages stay reachable by direct link, nothing is access-restricted. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { FeatureKey, FeaturePrefs } from "@/lib/feature-prefs";
|
||||
|
||||
const FEATURES: FeatureKey[] = ["nutrition", "pantry", "mealPlan", "shoppingLists", "collections", "messages"];
|
||||
|
||||
export function FeatureTogglesForm() {
|
||||
const t = useTranslations("settingsForm.featureToggles");
|
||||
const t_common = useTranslations("common");
|
||||
const [prefs, setPrefs] = useState<FeaturePrefs | null>(null);
|
||||
const [saving, setSaving] = useState<FeatureKey | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/v1/users/me/feature-prefs")
|
||||
.then((res) => (res.ok ? res.json() : null))
|
||||
.then((json) => setPrefs(json?.data ?? null))
|
||||
.catch(() => setPrefs(null));
|
||||
}, []);
|
||||
|
||||
async function toggle(feature: FeatureKey, checked: boolean) {
|
||||
if (!prefs) return;
|
||||
const previous = prefs;
|
||||
setPrefs({ ...prefs, [feature]: checked });
|
||||
setSaving(feature);
|
||||
try {
|
||||
const res = await fetch("/api/v1/users/me/feature-prefs", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ [feature]: checked }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
setPrefs(previous);
|
||||
toast.error(t_common("saveFailed"));
|
||||
} else {
|
||||
// Nav reads this same endpoint on its own mount — no shared client
|
||||
// cache to invalidate, so a hard reason to re-fetch is a full nav
|
||||
// refresh. Cheapest correct fix: reload so the nav picks it up now
|
||||
// instead of on the next navigation.
|
||||
window.dispatchEvent(new Event("epicure:feature-prefs-changed"));
|
||||
}
|
||||
} catch {
|
||||
setPrefs(previous);
|
||||
toast.error(t_common("saveFailed"));
|
||||
} finally {
|
||||
setSaving(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (!prefs) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{FEATURES.map((feature) => (
|
||||
<div key={feature} className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<Label htmlFor={`feature-${feature}`} className="cursor-pointer">
|
||||
{t(feature)}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{t(`${feature}Description`)}</p>
|
||||
</div>
|
||||
<Switch
|
||||
id={`feature-${feature}`}
|
||||
checked={prefs[feature]}
|
||||
disabled={saving === feature}
|
||||
onCheckedChange={(checked) => { void toggle(feature, checked); }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,11 +11,13 @@ const CATEGORIES: NotificationCategory[] = [
|
||||
"follow", "comment", "reply", "reaction", "rating", "mention", "leftoverExpiring", "shoppingList",
|
||||
];
|
||||
|
||||
type Field = keyof NotificationPrefs;
|
||||
|
||||
export function NotificationCategoriesForm() {
|
||||
const t = useTranslations("settingsForm.notificationCategories");
|
||||
const t_common = useTranslations("common");
|
||||
const [prefs, setPrefs] = useState<NotificationPrefs | null>(null);
|
||||
const [saving, setSaving] = useState<NotificationCategory | null>(null);
|
||||
const [saving, setSaving] = useState<Field | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/v1/users/me/notification-prefs")
|
||||
@@ -24,16 +26,16 @@ export function NotificationCategoriesForm() {
|
||||
.catch(() => setPrefs(null));
|
||||
}, []);
|
||||
|
||||
async function toggle(category: NotificationCategory, checked: boolean) {
|
||||
async function toggle(field: Field, checked: boolean) {
|
||||
if (!prefs) return;
|
||||
const previous = prefs;
|
||||
setPrefs({ ...prefs, [category]: checked });
|
||||
setSaving(category);
|
||||
setPrefs({ ...prefs, [field]: checked });
|
||||
setSaving(field);
|
||||
try {
|
||||
const res = await fetch("/api/v1/users/me/notification-prefs", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ [category]: checked }),
|
||||
body: JSON.stringify({ [field]: checked }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
setPrefs(previous);
|
||||
@@ -50,20 +52,57 @@ export function NotificationCategoriesForm() {
|
||||
if (!prefs) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{CATEGORIES.map((category) => (
|
||||
<div key={category} className="flex items-center justify-between gap-3">
|
||||
<Label htmlFor={`notif-${category}`} className="cursor-pointer">
|
||||
{t(category)}
|
||||
<div className="space-y-1">
|
||||
<div className="grid grid-cols-[1fr_auto_auto] items-center gap-3 pb-2">
|
||||
<span />
|
||||
<span className="text-xs font-medium text-muted-foreground w-12 text-center">{t("push")}</span>
|
||||
<span className="text-xs font-medium text-muted-foreground w-12 text-center">{t("email")}</span>
|
||||
</div>
|
||||
|
||||
{CATEGORIES.map((category) => {
|
||||
const emailField = `${category}Email` as const;
|
||||
return (
|
||||
<div key={category} className="grid grid-cols-[1fr_auto_auto] items-center gap-3 py-2 border-t first:border-t-0">
|
||||
<Label htmlFor={`notif-${category}`} className="cursor-pointer">
|
||||
{t(category)}
|
||||
</Label>
|
||||
<div className="w-12 flex justify-center">
|
||||
<Switch
|
||||
id={`notif-${category}`}
|
||||
checked={prefs[category]}
|
||||
disabled={saving === category}
|
||||
onCheckedChange={(checked) => { void toggle(category, checked); }}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-12 flex justify-center">
|
||||
<Switch
|
||||
id={`notif-${emailField}`}
|
||||
checked={prefs[emailField]}
|
||||
disabled={saving === emailField}
|
||||
onCheckedChange={(checked) => { void toggle(emailField, checked); }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="grid grid-cols-[1fr_auto_auto] items-center gap-3 py-2 border-t">
|
||||
<div>
|
||||
<Label htmlFor="notif-weeklyDigestEmail" className="cursor-pointer">
|
||||
{t("weeklyDigest")}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{t("weeklyDigestDescription")}</p>
|
||||
</div>
|
||||
<span className="w-12" />
|
||||
<div className="w-12 flex justify-center">
|
||||
<Switch
|
||||
id={`notif-${category}`}
|
||||
checked={prefs[category]}
|
||||
disabled={saving === category}
|
||||
onCheckedChange={(checked) => { void toggle(category, checked); }}
|
||||
id="notif-weeklyDigestEmail"
|
||||
checked={prefs.weeklyDigestEmail}
|
||||
disabled={saving === "weeklyDigestEmail"}
|
||||
onCheckedChange={(checked) => { void toggle("weeklyDigestEmail", checked); }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { User, Shield, Bot, Bell, Apple, Key, Webhook } from "lucide-react";
|
||||
import { User, Shield, Bot, Bell, Apple, Key, Webhook, SlidersHorizontal } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
@@ -11,6 +11,7 @@ const NAV_ITEMS = [
|
||||
{ href: "/settings/security", key: "security", icon: Shield, exact: false },
|
||||
{ href: "/settings/ai", key: "aiModels", icon: Bot, exact: false },
|
||||
{ href: "/settings/notifications", key: "notifications", icon: Bell, exact: false },
|
||||
{ href: "/settings/features", key: "features", icon: SlidersHorizontal, exact: false },
|
||||
{ href: "/settings/nutrition", key: "nutrition", icon: Apple, exact: false },
|
||||
{ href: "/settings/api-keys", key: "apiKeys", icon: Key, exact: false },
|
||||
{ href: "/settings/webhooks", key: "webhooks", icon: Webhook, exact: false },
|
||||
|
||||
Reference in New Issue
Block a user