feat(frontend): rich OG metadata + dynamic page titles across all routes

thoughts-frontend/app/users/[username]/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import {
   getFollowersList,
   getFollowingList,
@@ -7,6 +8,40 @@ import {
   getUserThoughts,
   Me,
 } from "@/lib/api";
+
+interface ProfilePageProps {
+  params: Promise<{ username: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: ProfilePageProps): Promise<Metadata> {
+  const { username } = await params;
+  const user = await getUserProfile(username, null).catch(() => null);
+  if (!user) return { title: username };
+
+  const name = user.displayName || user.username;
+  const description =
+    user.bio ||
+    `Follow ${name} on Thoughts and across the Fediverse.`;
+
+  return {
+    title: `${name} (@${user.username})`,
+    description,
+    openGraph: {
+      type: "profile",
+      title: `${name} (@${user.username})`,
+      description,
+      images: user.avatarUrl ? [{ url: user.avatarUrl }] : [],
+    },
+    twitter: {
+      card: "summary",
+      title: `${name} (@${user.username})`,
+      description,
+      images: user.avatarUrl ? [user.avatarUrl] : [],
+    },
+  };
+}
 import { UserAvatar } from "@/components/user-avatar";
 import { Calendar, Settings } from "lucide-react";
 import { Card } from "@/components/ui/card";