feat: add TopFriendsCombobox component for selecting top friends, update edit profile form to use it, and implement getFriends API

thoughts-frontend/app/thoughts/[thoughtId]/page.tsx

@@ -70,7 +70,7 @@ export default async function ThoughtPage({ params }: ThoughtPageProps) {
   return (
     <div className="container mx-auto max-w-2xl p-4 sm:p-6">
       <header className="my-6">
-        <h1 className="text-3xl font-bold">Conversation</h1>
+        <h1 className="text-3xl font-bold">Thoughts</h1>
       </header>
       <main>
         <ThoughtThread

thoughts-frontend/components/edit-profile-form.tsx

@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { TopFriendsCombobox } from "@/components/top-friends-combobox";
 
 interface EditProfileFormProps {
   currentUser: Me;
@@ -47,9 +48,8 @@ export function EditProfileForm({ currentUser }: EditProfileFormProps) {
     try {
       await updateProfile(values, token);
       toast.success("Profile updated successfully!");
-      // Redirect to the profile page to see the changes
       router.push(`/users/${currentUser.username}`);
-      router.refresh(); // Ensure fresh data is loaded
+      router.refresh();
     } catch (err) {
       toast.error(`Failed to update profile. ${err}`);
     }
@@ -139,21 +139,16 @@ export function EditProfileForm({ currentUser }: EditProfileFormProps) {
               name="topFriends"
               control={form.control}
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="flex flex-col">
                   <FormLabel>Top Friends</FormLabel>
                   <FormControl>
-                    <Input
+                    <TopFriendsCombobox
-                      placeholder="username1, username2, ..."
+                      value={field.value || []}
-                      {...field}
+                      onChange={field.onChange}
-                      onChange={(e) =>
-                        field.onChange(
-                          e.target.value.split(",").map((s) => s.trim())
-                        )
-                      }
                     />
                   </FormControl>
                   <FormDescription>
-                    A comma-separated list of usernames.
+                    Select up to 8 of your friends to display on your profile.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>

thoughts-frontend/components/thought-card.tsx

@@ -112,14 +112,14 @@ export function ThoughtCard({
               <span className="text-sm text-muted-foreground">{timeAgo}</span>
             </div>
           </Link>
-          {isAuthor && (
+          <DropdownMenu>
-            <DropdownMenu>
+            <DropdownMenuTrigger asChild>
-              <DropdownMenuTrigger asChild>
+              <button className="p-2 rounded-full hover:bg-accent">
-                <button className="p-2 rounded-full hover:bg-accent">
+                <MoreHorizontal className="h-4 w-4" />
-                  <MoreHorizontal className="h-4 w-4" />
+              </button>
-                </button>
+            </DropdownMenuTrigger>
-              </DropdownMenuTrigger>
+            <DropdownMenuContent>
-              <DropdownMenuContent>
+              {isAuthor && (
                 <DropdownMenuItem
                   className="text-destructive"
                   onSelect={() => setIsAlertOpen(true)}
@@ -127,9 +127,15 @@ export function ThoughtCard({
                   <Trash2 className="mr-2 h-4 w-4" />
                   Delete
                 </DropdownMenuItem>
-              </DropdownMenuContent>
+              )}
-            </DropdownMenu>
+              <DropdownMenuItem>
-          )}
+                <Link href={`/thoughts/${thought.id}`} className="flex gap-2">
+                  <MessageSquare className="mr-2 h-4 w-4" />
+                  View
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </CardHeader>
         <CardContent>
           <p className="whitespace-pre-wrap break-words">{thought.content}</p>

thoughts-frontend/components/top-friends-combobox.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { getFriends, User } from "@/lib/api";
+import { useAuth } from "@/hooks/use-auth";
+import { Skeleton } from "./ui/skeleton";
+
+interface TopFriendsComboboxProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+}
+
+export function TopFriendsCombobox({
+  value,
+  onChange,
+}: TopFriendsComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [friends, setFriends] = React.useState<User[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const { token } = useAuth();
+
+  React.useEffect(() => {
+    if (token) {
+      getFriends(token)
+        .then((data) => setFriends(data.users))
+        .catch(() => console.error("Failed to fetch friends"))
+        .finally(() => setIsLoading(false));
+    } else {
+      setIsLoading(false);
+    }
+  }, [token]);
+
+  if (isLoading) {
+    return <Skeleton className="h-10 w-full" />;
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {value.length > 0
+            ? `${value.length} friend(s) selected`
+            : "Select up to 8 friends..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0">
+        <Command>
+          <CommandInput placeholder="Search friends..." />
+          <CommandList>
+            <CommandEmpty>No friends found.</CommandEmpty>
+            <CommandGroup>
+              {friends.map((friend) => (
+                <CommandItem
+                  key={friend.id}
+                  value={friend.username}
+                  onSelect={(currentValue) => {
+                    const newValue = value.includes(currentValue)
+                      ? value.filter((v) => v !== currentValue)
+                      : [...value, currentValue];
+
+                    if (newValue.length <= 8) {
+                      onChange(newValue);
+                    }
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value.includes(friend.username)
+                        ? "opacity-100"
+                        : "opacity-0"
+                    )}
+                  />
+                  {friend.username}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

thoughts-frontend/lib/api.ts

@@ -225,3 +225,11 @@ export const getFollowersList = (username: string, token: string | null) =>
     z.object({ users: z.array(UserSchema) }),
     token
   );
+
+  export const getFriends = (token: string) =>
+  apiFetch(
+    "/friends",
+    {},
+    z.object({ users: z.array(UserSchema) }),
+    token
+  );