feat: mention

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