feat: disciple highlight

components/notifications/notification-matrix.tsx

@@ -26,7 +26,15 @@ import {
   pushSupported,
 } from "@/lib/push";
 
-const EVENTS: { key: PrefEvent; label: string; description: string }[] = [
+const EVENTS: {
+  key: PrefEvent;
+  label: string;
+  description: string;
+  /** Channels this event can actually be delivered on. Omit for all three.
+   *  A cell outside this set renders as "—" rather than a live toggle, so we
+   *  never show a switch that silently does nothing. */
+  channels?: PrefChannel[];
+}[] = [
   {
     key: "follows",
     label: "Follows",
@@ -42,6 +50,14 @@ const EVENTS: { key: PrefEvent; label: string; description: string }[] = [
     label: "Sādhana reminders",
     description: "Daily nudges to chant your rounds and share a verse.",
   },
+  {
+    key: "community",
+    label: "Community",
+    description:
+      "Rare announcements — such as a direct disciple of Śrīla Prabhupāda joining.",
+    // Announcements are in-app/push only; we deliberately don't email them.
+    channels: ["in_app", "push"],
+  },
 ];
 
 const CHANNELS: { key: PrefChannel; label: string }[] = [
@@ -73,7 +89,9 @@ export function NotificationMatrix() {
 
   async function toggle(event: PrefEvent, channel: PrefChannel) {
     if (!prefs) return;
-    const next = !prefs[event][channel];
+    // Default-on when the key is absent: prefs are stored as opt-outs, and a
+    // BFF that predates this category simply omits it.
+    const next = !(prefs[event]?.[channel] ?? true);
     setBusyCell(`${event}/${channel}`);
     try {
       // Turning a push cell ON only helps if this device can receive push —
@@ -132,23 +150,34 @@ export function NotificationMatrix() {
               {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>
-          ))}
+          {CHANNELS.map((channel) => {
+            const deliverable =
+              !event.channels || event.channels.includes(channel.key);
+            return (
+              <div
+                key={channel.key}
+                className="flex justify-center border-t border-border py-3"
+              >
+                {!deliverable ? (
+                  <span
+                    className="text-xs text-muted-foreground"
+                    title={`${event.label} isn't delivered by ${channel.label.toLowerCase()}`}
+                  >
+                    &mdash;
+                  </span>
+                ) : prefs ? (
+                  <ToggleSwitch
+                    checked={prefs[event.key]?.[channel.key] ?? true}
+                    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>

components/notifications/notifications-provider.tsx

@@ -70,6 +70,8 @@ function messageFor(e: IncomingEvent): string {
       return `${who} replied to your comment`;
     case "comment_mention":
       return `${who} mentioned you in a comment`;
+    case "disciple_joined":
+      return `${who}, a direct disciple of Śrīla Prabhupāda, has joined`;
     case "admin_message":
       return e.body || "A message from Prabhupāda Says";
     default:

components/profile/disciple-badge.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+/**
+ * DiscipleBadge — the small circular Śrīla Prabhupāda portrait that marks a
+ * profile as belonging to one of his own initiated disciples.
+ *
+ * Positioned by the caller (the profile header overlaps it on the avatar's
+ * lower-right, like a verification tick). Tapping it toggles a tooltip reading
+ * "Śrīla Prabhupāda's Direct Disciple" — click rather than hover, so it works
+ * identically on touch, where there is no hover state.
+ *
+ * The tooltip closes on a second tap, on Escape, or on any outside click.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+const LABEL = "Śrīla Prabhupāda's Direct Disciple";
+
+export function DiscipleBadge({ className }: { className?: string }) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef<HTMLSpanElement>(null);
+
+  // Dismiss on outside click / Escape. Bound only while open so we don't keep
+  // document-level listeners around for every profile view.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: PointerEvent) {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <span ref={wrapRef} className={cn("relative inline-flex", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-label={LABEL}
+        aria-expanded={open}
+        // Native tooltip as a desktop-hover bonus; the popover below is the
+        // real (touch-friendly) affordance.
+        title={LABEL}
+        className={cn(
+          "size-8 sm:size-9 overflow-hidden rounded-full",
+          "bg-card ring-2 ring-card shadow-md",
+          "transition-transform hover:scale-105 active:scale-95",
+          "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        )}
+      >
+        <Image
+          src="/images/prabhupada-disciple-badge.png"
+          alt=""
+          width={72}
+          height={72}
+          className="size-full object-cover"
+        />
+      </button>
+
+      {open ? (
+        <span
+          role="tooltip"
+          className={cn(
+            "absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2",
+            "w-max max-w-[70vw] rounded-lg px-2.5 py-1.5",
+            "bg-foreground text-background text-xs font-medium text-center",
+            "shadow-lg animate-in fade-in-0 zoom-in-95",
+          )}
+        >
+          {/* Caret pointing back at the badge. */}
+          <span
+            aria-hidden
+            className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-foreground"
+          />
+          {LABEL}
+        </span>
+      ) : null}
+    </span>
+  );
+}

components/profile/profile-header.tsx

@@ -34,6 +34,7 @@ import { Settings, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { RelationshipResult, RelationshipState } from "@/lib/social";
 import { ProfileActions } from "@/components/profile/profile-actions";
+import { DiscipleBadge } from "@/components/profile/disciple-badge";
 import { UserAvatar } from "@/components/ui/user-avatar";
 import {
   FollowListDrawer,
@@ -53,6 +54,7 @@ export function ProfileHeader({
   enableActions = false,
   country,
   interactiveCounts = true,
+  isDirectDisciple = false,
 }: {
   avatarURL: string | null;
   name: string;
@@ -81,6 +83,10 @@ export function ProfileHeader({
    *  click target) and the follow-list drawer isn't mounted — used on a
    *  blocked profile, where the lists endpoint is gated server-side. */
   interactiveCounts?: boolean;
+  /** Set when an admin has linked this account to the disciples directory —
+   *  one of Śrīla Prabhupāda's own initiated disciples. Overlays his portrait
+   *  on the avatar; tapping it explains the mark. */
+  isDirectDisciple?: boolean;
 }) {
   // Owner affordances ride on `editHref`; the follow-action row rides on
   // `enableActions`. Mutually exclusive by construction.
@@ -111,15 +117,22 @@ export function ProfileHeader({
   return (
     <>
       <header className="flex flex-col items-center text-center gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
-        <UserAvatar
-          src={avatarURL}
-          name={name}
-          className="size-24 sm:size-28"
-          textClassName="text-3xl"
-          interactive
-          onClick={avatarURL ? () => setZoomOpen(true) : undefined}
-          ariaLabel={`View ${name}'s profile picture`}
-        />
+        {/* Avatar, with Śrīla Prabhupāda's portrait tucked into the lower-right
+            for his direct disciples (verification-tick placement). */}
+        <div className="relative">
+          <UserAvatar
+            src={avatarURL}
+            name={name}
+            className="size-24 sm:size-28"
+            textClassName="text-3xl"
+            interactive
+            onClick={avatarURL ? () => setZoomOpen(true) : undefined}
+            ariaLabel={`View ${name}'s profile picture`}
+          />
+          {isDirectDisciple ? (
+            <DiscipleBadge className="absolute -bottom-0.5 -right-0.5" />
+          ) : null}
+        </div>
         <div className="space-y-2">
           <div className="space-y-1">
             <h1 className="font-(family-name:--font-title) font-semibold text-xl sm:text-2xl text-foreground leading-tight">