add ability to remove friends

src/lib/components/app-sidebar.svelte

@@ -75,6 +75,7 @@
                 <Tabs.List>
                   <Tabs.Trigger value="outgoing">Outgoing</Tabs.Trigger>
                   <Tabs.Trigger value="incoming">Incoming</Tabs.Trigger>
+                  <Tabs.Trigger value="manage">Manage Friends</Tabs.Trigger>
                 </Tabs.List>
 
                 <!-- Outgoing Requests -->
@@ -126,6 +127,28 @@
                     {/each}
                   {/if}
                 </Tabs.Content>
+                <Tabs.Content value="manage">
+                  {#if data.friends.length === 0}
+                    <p class="text-sm text-muted-foreground">You have no friends added.</p>
+                  {:else}
+                    {#each data.friends as friend (friend.id)}
+                      <Card.Root class="mb-2">
+                        <Card.Header>
+                          <Card.Title>{friend.username}</Card.Title>
+                          <Card.Description>Currently your friend</Card.Description>
+                        </Card.Header>
+                        <Card.Footer>
+                          <form method="POST" action="?/removeFriend">
+                            <input type="hidden" name="userId" value={friend.id} />
+                            <Button type="submit" variant="destructive" size="sm">
+                              Remove Friend
+                            </Button>
+                          </form>
+                        </Card.Footer>
+                      </Card.Root>
+                    {/each}
+                  {/if}
+                </Tabs.Content>
               </Tabs.Root>
             </Dialog.Content>
           </Dialog.Root>
@@ -145,10 +168,45 @@
                 </Dialog.Header>
 
                 {#each data.friends as friend (friend.id)}
-                  <label class="flex items-center gap-2">
+                  <Sidebar.MenuSubItem class="flex items-center gap-2">
-                    <input type="checkbox" name="member" value={friend.id} />
+                    <Sidebar.MenuSubButton>
-                    <User user={friend} />
+                      <User
-                  </label>
+                        onclick={(e) => {
+                          e.preventDefault();
+                          currentPage = friend.id;
+                        }}
+                        user={friend}
+                      ></User>
+                    </Sidebar.MenuSubButton>
+
+                    <Dialog.Root>
+                      <Dialog.Trigger>
+                        <Button variant="destructive" size="icon">
+                          <MinusIcon />
+                        </Button>
+                      </Dialog.Trigger>
+
+                      <Dialog.Content class="sm:max-w-106.25">
+                        <Dialog.Header>
+                          <Dialog.Title>Remove Friend</Dialog.Title>
+                          <Dialog.Description>
+                            Are you sure you want to remove {friend.username} from your friends?
+                          </Dialog.Description>
+                        </Dialog.Header>
+
+                        <Dialog.Footer class="flex gap-2">
+                          <Dialog.Close class={buttonVariants({ variant: 'outline' })}>
+                            Cancel
+                          </Dialog.Close>
+
+                          <form method="POST" action="?/removeFriend">
+                            <input type="hidden" name="userId" value={friend.id} />
+                            <Button type="submit" variant="destructive">Remove</Button>
+                          </form>
+                        </Dialog.Footer>
+                      </Dialog.Content>
+                    </Dialog.Root>
+                  </Sidebar.MenuSubItem>
                 {/each}
 
                 <Dialog.Footer>

src/routes/app/+page.server.ts

@@ -113,6 +113,49 @@ export const actions = {
 
     return { success: true };
   },
+  removeFriend: async ({ request, locals }) => {
+    const data = await request.formData();
+    const userId = data.get('userId');
+
+    if (typeof userId !== 'string') {
+      return fail(400, { error: 'Invalid user ID' });
+    }
+
+    // verify we are actually friends
+    if (!locals.user?.friends.find((z) => z.id === userId)) {
+      return fail(400, { error: 'Not in friends list' });
+    }
+
+    // fetch the target user
+    const user = await db.select().from(table.user).where(eq(table.user.id, userId)).limit(1);
+
+    if (!user?.length) {
+      return fail(404, { error: 'User not found' });
+    }
+
+    const target = user[0];
+
+    // remove each other from friends lists
+    await db.transaction(async (tx) => {
+      // update current user – filter out removed friend
+      await tx
+        .update(table.user)
+        .set({
+          friends: locals.user!.friends.map((z) => z.id).filter((id) => id !== userId)
+        })
+        .where(eq(table.user.id, locals.user!.id));
+
+      // update target user – filter out us
+      await tx
+        .update(table.user)
+        .set({
+          friends: (target.friends as string[]).filter((id) => id !== locals.user!.id)
+        })
+        .where(eq(table.user.id, target.id));
+    });
+
+    return { success: true };
+  },
   cancelFriendRequest: async ({ request, locals }) => {
     const data = await request.formData();
     const requestId = data.get('requestId');