feat: add follow/unfollow functionality with FollowButton component and update user profile to display follow status

thoughts-frontend/components/follow-button.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/use-auth";
+import { followUser, unfollowUser } from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { UserPlus, UserMinus } from "lucide-react";
+
+interface FollowButtonProps {
+  username: string;
+  isInitiallyFollowing: boolean;
+}
+
+export function FollowButton({
+  username,
+  isInitiallyFollowing,
+}: FollowButtonProps) {
+  const [isFollowing, setIsFollowing] = useState(isInitiallyFollowing);
+  const [isLoading, setIsLoading] = useState(false);
+  const { token } = useAuth();
+  const router = useRouter();
+
+  const handleClick = async () => {
+    if (!token) {
+      toast.error("You must be logged in to follow users.");
+      return;
+    }
+
+    setIsLoading(true);
+    const action = isFollowing ? unfollowUser : followUser;
+
+    try {
+      // Optimistic update
+      setIsFollowing(!isFollowing);
+      await action(username, token);
+      router.refresh(); // Re-fetch server component data to get the latest follower count etc.
+    } catch (err) {
+      // Revert on error
+      setIsFollowing(isFollowing);
+      toast.error(`Failed to ${isFollowing ? "unfollow" : "follow"} user.`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      disabled={isLoading}
+      variant={isFollowing ? "secondary" : "default"}
+    >
+      {isFollowing ? (
+        <>
+          <UserMinus className="mr-2 h-4 w-4" /> Unfollow
+        </>
+      ) : (
+        <>
+          <UserPlus className="mr-2 h-4 w-4" /> Follow
+        </>
+      )}
+    </Button>
+  );
+}