feat: mention

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.`}
+    />
   );
 }