feat(frontend): add fediverse handle widget to feed sidebar

thoughts-frontend/app/page.tsx

@@ -11,6 +11,7 @@ import { buildThoughtThreads } from "@/lib/utils";
 import { TopFriends } from "@/components/top-friends";
 import { UsersCount } from "@/components/users-count";
 import { PaginationNav } from "@/components/pagination-nav";
+import { FediverseHandleWidget } from "@/components/fediverse-handle-widget";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import {
@@ -84,6 +85,7 @@ async function FeedPage({
 
   const sidebar = (
     <>
+      <FediverseHandleWidget username={me.username} />
       <Suspense fallback={<ProfileSkeleton />}>
         <TopFriends username={me.username} />
       </Suspense>

thoughts-frontend/components/fediverse-handle-widget.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { CopyButton } from "./copy-button";
+
+interface FediverseHandleWidgetProps {
+  username: string;
+}
+
+export function FediverseHandleWidget({ username }: FediverseHandleWidgetProps) {
+  const domain = process.env.NEXT_PUBLIC_FEDIVERSE_DOMAIN;
+  if (!domain) return null;
+
+  const handle = `@${username}@${domain}`;
+
+  return (
+    <div className="glass-effect rounded-md shadow-fa-lg p-4">
+      <h2 className="text-sm font-semibold mb-2">Your fediverse handle</h2>
+      <div className="flex items-center gap-1 mb-2">
+        <p className="text-xs font-mono text-muted-foreground break-all">{handle}</p>
+        <CopyButton text={handle} />
+      </div>
+      <p className="text-xs text-muted-foreground mb-2">
+        Anyone on Mastodon or Pixelfed can follow you with this.
+      </p>
+      <Link
+        href="/about/fediverse"
+        className="text-xs text-primary hover:underline"
+      >
+        Learn more →
+      </Link>
+    </div>
+  );
+}