switch to use:enchance for all forms, split overview into its own file

src/lib/components/app-sidebar.svelte

@@ -14,18 +14,25 @@
   import Button, { buttonVariants } from './ui/button/button.svelte';
   import User from './extra/User.svelte';
   import type { SessionValidationResult } from '$lib/server/auth';
-  import { Status, statuses, type OverviewData, type OverviewUser } from '$lib';
+  import { Status, type OverviewData, type OverviewUser } from '$lib';
   import Label from './ui/label/label.svelte';
+  import { toast } from 'svelte-sonner';
+  import { enhance } from '$app/forms';
+  import { invalidateAll } from '$app/navigation';
+  import { fill_overview_data } from '$lib/state.svelte';
+  import type { PageServerLoad } from '../../routes/app/$types';
 
   let {
     currentPage = $bindable<string | null>(),
     subPage = $bindable<string | null>(),
     data,
+    psd,
     user,
     ...restProps
   }: {
     currentPage: string | null;
     subPage: string | null;
+    psd: PageServerLoad;
     data: OverviewData;
     user: SessionValidationResult['user'];
   } = $props();
@@ -65,7 +72,27 @@
               </Dialog.Header>
 
               <!-- input to add a new friend -->
-              <form method="POST" action="?/addFriend" class="mb-4">
+              <form
+                method="POST"
+                action="?/addFriend"
+                class="mb-4"
+                use:enhance={() => {
+                  return async ({ result }) => {
+                    if (result.type == 'success') {
+                      toast.success('Friend request sent successfully');
+                    }
+
+                    if (result.type == 'error' || result.type == 'failure') {
+                      toast.error(
+                        'Could not send friend request: ' + (result.error || result.data?.error)
+                      );
+                    }
+
+                    await invalidateAll();
+                    await fill_overview_data(psd);
+                  };
+                }}
+              >
                 <Input name="username" placeholder="username" required class="mb-2" />
                 <Dialog.Footer>
                   <Dialog.Close class={buttonVariants({ variant: 'outline' })}>Cancel</Dialog.Close>
@@ -93,7 +120,27 @@
                           <Card.Description>Request sent</Card.Description>
                         </Card.Header>
                         <Card.Footer>
-                          <form method="POST" action="?/cancelFriendRequest">
+                          <form
+                            method="POST"
+                            action="?/cancelFriendRequest"
+                            use:enhance={() => {
+                              return async ({ result }) => {
+                                if (result.type == 'success') {
+                                  toast.success('Cancelled friend request successfully');
+                                }
+
+                                if (result.type == 'error' || result.type == 'failure') {
+                                  toast.error(
+                                    'Could not cancel friend request: ' +
+                                      (result.error || result.data?.error)
+                                  );
+                                }
+
+                                await invalidateAll();
+                                await fill_overview_data(psd);
+                              };
+                            }}
+                          >
                             <input type="hidden" name="requestId" value={request.id} />
                             <Button type="submit" variant="outline" size="sm">Cancel</Button>
                           </form>
@@ -116,12 +163,52 @@
                         </Card.Header>
                         <Card.Footer class="flex gap-2">
                           <!-- accept friend -->
-                          <form method="POST" action="?/addFriend">
+                          <form
+                            method="POST"
+                            action="?/addFriend"
+                            use:enhance={() => {
+                              return async ({ result }) => {
+                                if (result.type == 'success') {
+                                  toast.success('Accepted friend request successfully');
+                                }
+
+                                if (result.type == 'error' || result.type == 'failure') {
+                                  toast.error(
+                                    'Could not accept friend request: ' +
+                                      (result.error || result.data?.error)
+                                  );
+                                }
+
+                                await invalidateAll();
+                                await fill_overview_data(psd);
+                              };
+                            }}
+                          >
                             <input type="hidden" name="userId" value={request.fromUser} />
                             <Button type="submit" size="sm">Accept</Button>
                           </form>
                           <!-- decline friend -->
-                          <form method="POST" action="?/cancelFriendRequest">
+                          <form
+                            method="POST"
+                            action="?/cancelFriendRequest"
+                            use:enhance={() => {
+                              return async ({ result }) => {
+                                if (result.type == 'success') {
+                                  toast.success('Cancelled friend request successfully');
+                                }
+
+                                if (result.type == 'error' || result.type == 'failure') {
+                                  toast.error(
+                                    'Could not cancel friend request: ' +
+                                      (result.error || result.data?.error)
+                                  );
+                                }
+
+                                await invalidateAll();
+                                await fill_overview_data(psd);
+                              };
+                            }}
+                          >
                             <input type="hidden" name="requestId" value={request.id} />
                             <Button type="submit" variant="outline" size="sm">Decline</Button>
                           </form>
@@ -141,7 +228,27 @@
                           <Card.Description>Currently your friend</Card.Description>
                         </Card.Header>
                         <Card.Footer>
-                          <form method="POST" action="?/removeFriend">
+                          <form
+                            method="POST"
+                            action="?/removeFriend"
+                            use:enhance={() => {
+                              return async ({ result }) => {
+                                if (result.type == 'success') {
+                                  toast.success('Removed friend successfully');
+                                }
+
+                                if (result.type == 'error' || result.type == 'failure') {
+                                  toast.error(
+                                    'Could not remove friend: ' +
+                                      (result.error || result.data?.error)
+                                  );
+                                }
+
+                                await invalidateAll();
+                                await fill_overview_data(psd);
+                              };
+                            }}
+                          >
                             <input type="hidden" name="userId" value={friend.id} />
                             <Button type="submit" variant="destructive" size="sm">
                               Remove Friend
@@ -164,7 +271,26 @@
             </Dialog.Trigger>
 
             <Dialog.Content class="sm:max-w-106.25">
-              <form method="POST" action="?/createGroup">
+              <form
+                method="POST"
+                action="?/createGroup"
+                use:enhance={() => {
+                  return async ({ result }) => {
+                    if (result.type == 'success') {
+                      toast.success('Created group successfully');
+                    }
+
+                    if (result.type == 'error' || result.type == 'failure') {
+                      toast.error(
+                        'Could not create group: ' + (result.error || result.data?.error)
+                      );
+                    }
+
+                    await invalidateAll();
+                    await fill_overview_data(psd);
+                  };
+                }}
+              >
                 <Dialog.Header>
                   <Dialog.Title>Create a group</Dialog.Title>
                   <Dialog.Description>Add friends into your group!</Dialog.Description>
@@ -193,7 +319,25 @@
             </Dialog.Trigger>
 
             <Dialog.Content class="sm:max-w-106.25">
-              <form method="POST" action="?/joinServer">
+              <form
+                method="POST"
+                action="?/joinServer"
+                use:enhance={() => {
+                  return async ({ result }) => {
+                    console.log(result);
+                    if (result.type == 'success') {
+                      toast.success('Joined server successfully');
+                    }
+
+                    if (result.type == 'error' || result.type == 'failure') {
+                      toast.error('Could not join server: ' + (result.error || result.data?.error));
+                    }
+
+                    await invalidateAll();
+                    await fill_overview_data(psd);
+                  };
+                }}
+              >
                 <Dialog.Header>
                   <Dialog.Title>Join a server</Dialog.Title>
                   <Dialog.Description>Enter an invite link.</Dialog.Description>
@@ -217,7 +361,26 @@
             </Dialog.Trigger>
 
             <Dialog.Content class="sm:max-w-106.25">
-              <form method="POST" action="?/createServer">
+              <form
+                method="POST"
+                action="?/createServer"
+                use:enhance={() => {
+                  return async ({ result }) => {
+                    if (result.type == 'success') {
+                      toast.success('Created server successfully');
+                    }
+
+                    if (result.type == 'error' || result.type == 'failure') {
+                      toast.error(
+                        'Could not create server: ' + (result.error || result.data?.error)
+                      );
+                    }
+
+                    await invalidateAll();
+                    await fill_overview_data(psd);
+                  };
+                }}
+              >
                 <Dialog.Header>
                   <Dialog.Title>Create a server</Dialog.Title>
                   <Dialog.Description>Name your new server.</Dialog.Description>
@@ -358,7 +521,24 @@
       </Dialog.Trigger>
 
       <Dialog.Content>
-        <form method="POST" action="?/updateProfile">
+        <form
+          method="POST"
+          action="?/updateProfile"
+          use:enhance={() => {
+            return async ({ result }) => {
+              if (result.type == 'success') {
+                toast.success('Edited profile successfully');
+              }
+
+              if (result.type == 'error' || result.type == 'failure') {
+                toast.error('Could not edit profile: ' + (result.error || result.data?.error));
+              }
+
+              await invalidateAll();
+              await fill_overview_data(psd);
+            };
+          }}
+        >
           <Dialog.Header>
             <Dialog.Title>Edit profile</Dialog.Title>
             <Dialog.Description>Update how others see you.</Dialog.Description>

src/lib/components/member-sidebar.svelte

@@ -8,7 +8,6 @@
   import type { SessionValidationResult } from '$lib/server/auth';
   import {
     GroupID,
-    ServerID,
     type OverviewData,
     type OverviewGroup,
     type OverviewServer,
@@ -16,6 +15,11 @@
   } from '$lib';
   import Button from './ui/button/button.svelte';
   import Input from './ui/input/input.svelte';
+  import { enhance } from '$app/forms';
+  import { invalidateAll } from '$app/navigation';
+  import { fill_overview_data } from '$lib/state.svelte';
+  import { toast } from 'svelte-sonner';
+  import type { PageServerLoad } from '../../routes/app/$types';
 
   // Props for the member sidebar.
   let {
@@ -23,12 +27,14 @@
     members = $bindable<OverviewUser[]>([]),
     user,
     data,
+    psd,
     currentEntity,
     currentEntityId = $bindable<string | null>(null)
   }: {
     open: boolean;
     members: OverviewUser[];
     data: OverviewData;
+    psd: PageServerLoad;
     user: SessionValidationResult['user'];
     currentEntity: OverviewGroup | OverviewServer;
     currentEntityId: string | null;
@@ -62,12 +68,31 @@
                   <Tabs.Trigger value="admins">Admin Settings</Tabs.Trigger>
                 {/if}
               </Tabs.List>
-              {#if ServerID.is(currentEntityId)}
+              {#if GroupID.is(currentEntityId)}
-                <h1>not done yet for later</h1>
-              {:else if GroupID.is(currentEntityId)}
                 {#if user.id == currentEntity.ownerId}
                   <Tabs.Content value="admins">
-                    <form method="POST" action="?/configureGroup" class="space-y-4 p-2">
+                    <form
+                      method="POST"
+                      action="?/configureGroup"
+                      class="space-y-4 p-2"
+                      use:enhance={() => {
+                        return async ({ result }) => {
+                          if (result.type == 'success') {
+                            toast.success('Configured group succesfully');
+                          }
+
+                          if (result.type == 'error' || result.type == 'failure') {
+                            toast.error(
+                              'Could not configure group successfully: ' +
+                                (result.error || result.data?.error)
+                            );
+                          }
+
+                          await invalidateAll();
+                          await fill_overview_data(psd);
+                        };
+                      }}
+                    >
                       <input type="hidden" name="groupId" value={currentEntityId} />
 
                       <div class="flex items-center justify-between">
@@ -111,6 +136,23 @@
                         method="POST"
                         action="?/deleteGroup"
                         class="border-t border-red-500/30 pt-4"
+                        use:enhance={() => {
+                          return async ({ result }) => {
+                            if (result.type == 'success') {
+                              toast.success('Group deleted successfully');
+                            }
+
+                            if (result.type == 'error' || result.type == 'failure') {
+                              toast.error(
+                                'Could not delete group successfully: ' +
+                                  (result.error || result.data?.error)
+                              );
+                            }
+
+                            await invalidateAll();
+                            await fill_overview_data(psd);
+                          };
+                        }}
                       >
                         <input type="hidden" name="groupId" value={currentEntityId} />
 
@@ -129,7 +171,28 @@
                       )}
 
                       {#if addableMembers.length !== 0}
-                        <form method="POST" action="?/addMembers" class="space-y-4">
+                        <form
+                          method="POST"
+                          action="?/addMembers"
+                          class="space-y-4"
+                          use:enhance={() => {
+                            return async ({ result }) => {
+                              if (result.type == 'success') {
+                                toast.success('Users added successfully');
+                              }
+
+                              if (result.type == 'error' || result.type == 'failure') {
+                                toast.error(
+                                  'Could not add users successfully: ' +
+                                    (result.error || result.data?.error)
+                                );
+                              }
+
+                              await invalidateAll();
+                              await fill_overview_data(psd);
+                            };
+                          }}
+                        >
                           <input type="hidden" name="groupId" value={currentEntityId} />
 
                           <h1>Add members</h1>
@@ -148,7 +211,28 @@
                     {/if}
 
                     {#if (currentEntity as OverviewGroup).permissions.changeTitle || user.id == currentEntity.ownerId}
-                      <form method="POST" action="?/changeTitle" class="space-y-4">
+                      <form
+                        method="POST"
+                        action="?/changeTitle"
+                        class="space-y-4"
+                        use:enhance={() => {
+                          return async ({ result }) => {
+                            if (result.type == 'success') {
+                              toast.success('Title changed successfully');
+                            }
+
+                            if (result.type == 'error' || result.type == 'failure') {
+                              toast.error(
+                                'Could not change title successfully: ' +
+                                  (result.error || result.data?.error)
+                              );
+                            }
+
+                            await invalidateAll();
+                            await fill_overview_data(psd);
+                          };
+                        }}
+                      >
                         <input type="hidden" name="groupId" value={currentEntityId} />
 
                         <h1>Change title</h1>
@@ -161,7 +245,28 @@
                     {/if}
 
                     {#if (currentEntity as OverviewGroup).permissions.removeMembers || user.id == currentEntity.ownerId}
-                      <form method="POST" action="?/removeMembers" class="space-y-4">
+                      <form
+                        method="POST"
+                        action="?/removeMembers"
+                        class="space-y-4"
+                        use:enhance={() => {
+                          return async ({ result }) => {
+                            if (result.type == 'success') {
+                              toast.success('Users removed successfully');
+                            }
+
+                            if (result.type == 'error' || result.type == 'failure') {
+                              toast.error(
+                                'Could not remove users successfully: ' +
+                                  (result.error || result.data?.error)
+                              );
+                            }
+
+                            await invalidateAll();
+                            await fill_overview_data(psd);
+                          };
+                        }}
+                      >
                         <input type="hidden" name="groupId" value={currentEntityId} />
 
                         <h1>Remove members</h1>

src/lib/state.svelte.ts

@@ -0,0 +1,53 @@
+import { GroupID, ServerID, statuses, UserID, type Channel, type OverviewData } from '$lib';
+import type { PageServerData } from '../routes/app/$types';
+
+export const overview_data: OverviewData = $state({
+  friends: [],
+  groups: [],
+  servers: []
+});
+
+export async function fill_overview_data(data: PageServerData) {
+  overview_data.servers = data.user.servers.map((z) => {
+    return {
+      id: ServerID.parse(z.id),
+      name: z.name,
+      ownerId: z.ownerId,
+      channels: z.channels as Channel[],
+      image: 'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + z.name
+    };
+  });
+  overview_data.groups = data.user.groups.map((z) => {
+    return {
+      id: GroupID.parse(z.id),
+      name: z.name,
+      ownerId: z.ownerId,
+      members: z.members,
+      permissions: z.permissions,
+      image: 'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + z.name
+    };
+  });
+  overview_data.friends = await Promise.all(
+    data.user.friends.map(async (friend) => {
+      const res = await fetch(`/api/status/${friend.id}`);
+
+      if (!res.ok) {
+        throw new Error(`Failed to fetch status for ${friend.id}`);
+      }
+
+      const status = await res.json();
+
+      statuses.set(friend.id, {
+        status: status.status,
+        statusMessage: status.statusMessage
+      });
+
+      return {
+        id: UserID.parse(friend.id),
+        username: friend.username,
+        dmId: friend.dmId,
+        image: 'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + friend.username
+      };
+    })
+  );
+}

src/routes/app/+page.svelte

@@ -35,6 +35,7 @@
   import MemberSidebar from '$lib/components/member-sidebar.svelte';
   import { invalidateAll } from '$app/navigation';
   import { toast } from 'svelte-sonner';
+  import { fill_overview_data, overview_data } from '$lib/state.svelte';
 
   let { form, data }: { form: ActionData; data: PageServerData } = $props();
   let currentPageID: (UserId | GroupId | ServerId) | null = $state(null);
@@ -55,59 +56,7 @@
   let sessionId: string | undefined = $state();
   let previousSubscription: UserId | GroupId | ServerId | null = $state(null);
 
-  const overview_data: OverviewData = $state({
-    friends: [],
-    groups: [],
-    servers: []
-  });
-
-  async function fill_overview_data() {
-    overview_data.servers = data.user.servers.map((z) => {
-      console.log(z);
-      return {
-        id: ServerID.parse(z.id),
-        name: z.name,
-        ownerId: z.ownerId,
-        channels: z.channels as Channel[],
-        image: 'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + z.name
-      };
-    });
-    overview_data.groups = data.user.groups.map((z) => {
-      return {
-        id: GroupID.parse(z.id),
-        name: z.name,
-        ownerId: z.ownerId,
-        members: z.members,
-        permissions: z.permissions,
-        image: 'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + z.name
-      };
-    });
-    overview_data.friends = await Promise.all(
-      data.user.friends.map(async (friend) => {
-        const res = await fetch(`/api/status/${friend.id}`);
-
-        if (!res.ok) {
-          throw new Error(`Failed to fetch status for ${friend.id}`);
-        }
-
-        const status = await res.json();
-
-        statuses.set(friend.id, {
-          status: status.status,
-          statusMessage: status.statusMessage
-        });
-
-        return {
-          id: UserID.parse(friend.id),
-          username: friend.username,
-          dmId: friend.dmId,
-          image: 'https://api.dicebear.com/7.x/pixel-art/svg?seed=' + friend.username
-        };
-      })
-    );
-  }
   $effect(() => {
-    console.log(currentPageID, currentSubPageID);
     if (currentPageID) {
       if (UserID.is(currentPageID)) {
         currentPage = overview_data.friends.find((friend) => friend.id === currentPageID);
@@ -118,7 +67,6 @@
       }
 
       if (currentSubPageID) {
-        console.log((currentPage as OverviewServer).channels.find((z) => z.id == currentSubPageID));
         currentSubPage = (currentPage as OverviewServer).channels.find(
           (z) => z.id == currentSubPageID
         ) as Channel | null;
@@ -199,9 +147,8 @@
 
         await invalidateAll();
       }
-      await fill_overview_data();
+      await fill_overview_data(data);
     }
-
     run();
   });
 
@@ -222,12 +169,12 @@
       if (json.type == 'friends') {
         toast('Invalidation from friends updates, recieved ' + json.status);
         await invalidateAll();
-        await fill_overview_data();
+        await fill_overview_data(data);
       }
       if (json.type == 'server') {
         toast('Invalidation from servers updates, recieved ' + json.status);
         await invalidateAll();
-        await fill_overview_data();
+        await fill_overview_data(data);
       }
       if (json.type == 'group') {
         toast('Invalidation from group updates, recieved ' + json.status);
@@ -237,14 +184,12 @@
         }
 
         await invalidateAll();
-
+        await fill_overview_data(data);
-        await fill_overview_data();
       }
       if (json.type == 'username') {
         toast('Invalidation from username updates, recieved ' + json.status);
         await invalidateAll();
-
+        await fill_overview_data(data);
-        await fill_overview_data();
       }
       if (json.type == 'connected') {
         console.log('SSE connected. We are sessionID ' + json.sessionId);
@@ -352,6 +297,7 @@
 
 <Sidebar.Provider>
   <AppSidebar
+    psd={data}
     bind:subPage={currentSubPageID}
     bind:currentPage={currentPageID}
     user={data.user}
@@ -544,7 +490,7 @@
                     toast.success('Invite created successfully');
                     inviteCode = location.origin + '/invite/' + result.data!.code;
                     await invalidateAll();
-                    await fill_overview_data();
+                    await fill_overview_data(data);
                   } else if (result.type === 'failure') {
                     toast.error('Failed to create invite: ' + result.data?.error);
                   }
@@ -586,7 +532,7 @@
                         if (response.ok) {
                           toast.success('Invite deleted successfully');
                           await invalidateAll();
-                          await fill_overview_data();
+                          await fill_overview_data(data);
                         } else {
                           toast.error('Failed to delete invite');
                         }
@@ -691,6 +637,7 @@
       {#if currentPage && currentPageID && overview_data && members && !UserID.is(currentPageID)}
         <MemberSidebar
           bind:open={isMembersTabOpen}
+          psd={data}
           user={data.user}
           data={overview_data}
           {members}

src/routes/app/actions/group.ts

@@ -94,6 +94,7 @@ export default {
       await tx.update(table.group).set({ members: remaining }).where(eq(table.group.id, groupId));
 
       for (const id of remaining) {
+        if (id == locals.user!.id) continue;
         _sendToUser(id, { type: 'group', status: 'someone-was-removed' });
       }