fix: ui fixes

2026-06-11 00:32:04 +05:30
parent 4b159cb4d9
commit ead8ad02e8
16 changed files with 769 additions and 266 deletions
@@ -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&apos;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>
+  );
+}