feat: add PopularTags and TopFriends components, update profile and feed layouts to include them

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

@@ -6,6 +6,7 @@ import { Card } from "@/components/ui/card";
 import { notFound } from "next/navigation";
 import { cookies } from "next/headers";
 import { FollowButton } from "@/components/follow-button";
+import { TopFriends } from "@/components/top-friends";
 
 interface ProfilePageProps {
   params: { username: string };
@@ -59,53 +60,58 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
         }}
       />
 
-      <main className="container mx-auto max-w-3xl p-4 -mt-16">
-        <Card className="p-6 bg-card/80 backdrop-blur-lg">
-          <div className="flex justify-between items-start">
-            <div className="flex items-end gap-4">
-              <div className="w-24 h-24 rounded-full border-4 border-background shrink-0">
-                <UserAvatar src={user.avatarUrl} alt={user.displayName} />
-              </div>
-              <div>
-                <h1 className="text-2xl font-bold">
-                  {user.displayName || user.username}
-                </h1>
-                <p className="text-sm text-muted-foreground">
-                  @{user.username}
-                </p>
+      <main className="container mx-auto max-w-3xl p-4 -mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
+        <aside className="md:col-span-1 space-y-6 pt-24">
+          <TopFriends usernames={user.topFriends} />
+        </aside>
+        <div className="md:col-span-2 mt-8 md:mt-0 space-y-4">
+          <Card className="p-6 bg-card/80 backdrop-blur-lg">
+            <div className="flex justify-between items-start">
+              <div className="flex items-end gap-4">
+                <div className="w-24 h-24 rounded-full border-4 border-background shrink-0">
+                  <UserAvatar src={user.avatarUrl} alt={user.displayName} />
+                </div>
+                <div>
+                  <h1 className="text-2xl font-bold">
+                    {user.displayName || user.username}
+                  </h1>
+                  <p className="text-sm text-muted-foreground">
+                    @{user.username}
+                  </p>
+                </div>
               </div>
+
+              {/* Render the FollowButton if it's not the user's own profile */}
+              {!isOwnProfile && token && (
+                <FollowButton
+                  username={user.username}
+                  isInitiallyFollowing={isFollowing}
+                />
+              )}
             </div>
 
-            {/* Render the FollowButton if it's not the user's own profile */}
-            {!isOwnProfile && token && (
-              <FollowButton
-                username={user.username}
-                isInitiallyFollowing={isFollowing}
+            <p className="mt-4 whitespace-pre-wrap">{user.bio}</p>
+            <div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
+              <Calendar className="h-4 w-4" />
+              <span>Joined {new Date(user.joinedAt).toLocaleDateString()}</span>
+            </div>
+          </Card>
+
+          {/* Thoughts Feed */}
+          <div className="mt-8 space-y-4">
+            {thoughts.map((thought) => (
+              <ThoughtCard
+                key={thought.id}
+                thought={thought}
+                author={{ username: user.username, avatarUrl: user.avatarUrl }}
               />
+            ))}
+            {thoughts.length === 0 && (
+              <p className="text-center text-muted-foreground">
+                This user hasn&apos;t posted any thoughts yet.
+              </p>
             )}
           </div>
-
-          <p className="mt-4 whitespace-pre-wrap">{user.bio}</p>
-          <div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
-            <Calendar className="h-4 w-4" />
-            <span>Joined {new Date(user.joinedAt).toLocaleDateString()}</span>
-          </div>
-        </Card>
-
-        {/* Thoughts Feed */}
-        <div className="mt-8 space-y-4">
-          {thoughts.map((thought) => (
-            <ThoughtCard
-              key={thought.id}
-              thought={thought}
-              author={{ username: user.username, avatarUrl: user.avatarUrl }}
-            />
-          ))}
-          {thoughts.length === 0 && (
-            <p className="text-center text-muted-foreground">
-              This user hasn&apos;t posted any thoughts yet.
-            </p>
-          )}
         </div>
       </main>
     </div>