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

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