feat: mention

app/(app)/notifications/page.tsx

@@ -137,14 +137,16 @@ function NotificationRow({
     </div>
   );
 
-  // A like links to your own post; everything else links to the actor's
-  // profile (when we know their handle).
+  // A like links to your own post; a mention links to the actor's post you
+  // were tagged in; everything else links to the actor's profile.
   const href =
     n.kind === "post_like" && n.post_id
       ? `/u/${selfHandle}/posts#post-${n.post_id}`
-      : n.actor_handle
-        ? `/u/${n.actor_handle}`
-        : null;
+      : n.kind === "post_mention" && n.post_id && n.actor_handle
+        ? `/u/${n.actor_handle}/posts#post-${n.post_id}`
+        : n.actor_handle
+          ? `/u/${n.actor_handle}`
+          : null;
 
   return href ? (
     <li>
@@ -177,6 +179,8 @@ function messageFor(n: AppNotification): string {
       if (others <= 0) return "liked your post.";
       return `and ${others} ${others === 1 ? "other" : "others"} liked your post.`;
     }
+    case "post_mention":
+      return "mentioned you in a post.";
     default:
       return "sent you a notification.";
   }

app/(app)/u/[handle]/mentions/page.tsx

@@ -3,23 +3,46 @@
 /**
  * /u/[handle]/mentions — posts that tag this user.
  *
- * Mirror of /u/me/mentions: the tab is wired into the public profile
- * shell so visitors see an empty state instead of a 404. Will swap to
- * a real feed once the Mentions feature ships.
+ * Grid of tagged posts (same renderer as the Posts tab). Because a tagged
+ * post can be authored by anyone, each thumbnail links to its own author's
+ * scroll feed, anchored to the post.
  */
 
-import { AtSign } from "lucide-react";
+import { useEffect, useState } from "react";
+import { profile, type Post } from "@/lib/social";
+import { PostViews } from "@/components/social/post-views";
 import { usePublicProfile } from "../profile-context";
 
 export default function PublicProfileMentionsPage() {
   const data = usePublicProfile();
+  const [feed, setFeed] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    profile
+      .mentionsFeed(data.handle, 30)
+      .then((rows) => {
+        if (!cancelled) setFeed(rows ?? []);
+      })
+      .catch(() => {
+        /* show empty rather than block the tab */
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [data.handle]);
+
+  if (loading) {
+    return <p className="text-sm text-muted-foreground">Loading…</p>;
+  }
+
   return (
-    <div className="flex flex-col items-center text-center gap-3 py-12 text-muted-foreground">
-      <AtSign className="size-8" />
-      <p className="text-sm">
-        Posts that tag <span className="text-foreground">@{data.handle}</span>{" "}
-        will appear here. Coming soon.
-      </p>
-    </div>
+    <PostViews
+      posts={feed}
+      hrefFor={(p) => `/u/${p.author_handle ?? data.handle}/posts#post-${p.id}`}
+      emptyMessage={`Posts that tag @${data.handle} will appear here.`}
+    />
   );
 }

app/(app)/u/me/mentions/page.tsx

@@ -1,21 +1,49 @@
 "use client";
 
 /**
- * /u/me/mentions — placeholder until the Mentions feature ships.
+ * /u/me/mentions — posts that tag the signed-in user.
  *
- * The tab itself is wired into the profile shell already so users see
- * an empty state instead of a 404 when they tap it.
+ * Grid of tagged posts (same renderer as the Posts tab). Tagged posts can be
+ * by anyone, so each thumbnail links to its author's scroll feed.
  */
 
-import { AtSign } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { profile, type Post } from "@/lib/social";
+import { PostViews } from "@/components/social/post-views";
 
 export default function MentionsPage() {
+  const { user } = useAuth();
+  const handle = user?.handle ?? null;
+  const [feed, setFeed] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!handle) return;
+    let cancelled = false;
+    profile
+      .mentionsFeed(handle, 30)
+      .then((rows) => {
+        if (!cancelled) setFeed(rows ?? []);
+      })
+      .catch(() => {
+        /* show empty rather than block the tab */
+      })
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [handle]);
+
+  if (loading) {
+    return <p className="text-sm text-muted-foreground">Loading…</p>;
+  }
+
   return (
-    <div className="flex flex-col items-center text-center gap-3 py-12 text-muted-foreground">
-      <AtSign className="size-8" />
-      <p className="text-sm">
-        Mentions of you across posts will appear here. Coming soon.
-      </p>
-    </div>
+    <PostViews
+      posts={feed}
+      hrefFor={(p) => `/u/${p.author_handle ?? handle}/posts#post-${p.id}`}
+      emptyMessage="Posts that tag you will appear here."
+    />
   );
 }