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

thoughts-frontend/app/remote-actor/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { cookies } from "next/headers";
 import { getMe, lookupRemoteActor, getRemoteActorPosts, Me } from "@/lib/api";
@@ -7,6 +8,43 @@ interface RemoteActorPageProps {
   searchParams: Promise<{ handle?: string }>;
 }
 
+function stripHtml(html: string) {
+  return html.replace(/<[^>]*>/g, "").trim();
+}
+
+export async function generateMetadata({
+  searchParams,
+}: RemoteActorPageProps): Promise<Metadata> {
+  const { handle } = await searchParams;
+  if (!handle) return { title: "Profile" };
+
+  const token = (await cookies()).get("auth_token")?.value ?? null;
+  const actor = await lookupRemoteActor(handle, token).catch(() => null);
+  if (!actor) return { title: handle };
+
+  const name = actor.displayName || actor.handle;
+  const description = actor.bio
+    ? stripHtml(actor.bio).slice(0, 160)
+    : `${name} on the Fediverse. Follow from Thoughts.`;
+
+  return {
+    title: `${name} (${actor.handle})`,
+    description,
+    openGraph: {
+      type: "profile",
+      title: `${name} (${actor.handle})`,
+      description,
+      images: actor.avatarUrl ? [{ url: actor.avatarUrl }] : [],
+    },
+    twitter: {
+      card: "summary",
+      title: `${name} · Thoughts`,
+      description,
+      images: actor.avatarUrl ? [actor.avatarUrl] : [],
+    },
+  };
+}
+
 export default async function RemoteActorPage({
   searchParams,
 }: RemoteActorPageProps) {