Enhancing the forms on the friend management screen

src/components/Button.svelte

@@ -29,7 +29,7 @@
 <button {type} class={buttonClass} {onclick} aria-label={label} disabled={loading}>
 	{#if loading}
 		<svg
-			class="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+			class="-ml-1 mr-3 h-5 w-5 animate-spin dark:text-white"
 			xmlns="http://www.w3.org/2000/svg"
 			fill="none"
 			viewBox="0 0 24 24"

src/components/Toaster.svelte

@@ -31,18 +31,14 @@
 			<div
 				in:slide={{ duration: 200 }}
 				out:slide={{ duration: 200 }}
-				class="relative mb-2 flex flex-col items-start justify-between rounded-lg border border-gray-200 bg-white px-8 py-4 text-sm shadow-lg"
+				class="mb-2 flex items-center justify-between rounded-lg p-4 text-sm shadow-lg"
 				class:bg-red-300={data.type === 'error'}
 				class:bg-green-300={data.type === 'success'}
 			>
 				<div use:melt={$description(id)}>
 					{data.message}
 				</div>
-				<button
-					use:melt={$close(id)}
-					aria-label="close notification"
-					class="absolute right-0 top-0 p-2"
-				>
+				<button use:melt={$close(id)} aria-label="close notification">
 					<Icon icon="x-mark" />
 				</button>
 			</div>

src/routes/my/friends/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { crossfade } from 'svelte/transition';
 	import { cubicInOut } from 'svelte/easing';
+	import { enhance } from '$app/forms';
 	import type { ActionData, PageData } from './$types';
 
 	import { createTabs, melt } from '@melt-ui/svelte';
@@ -9,6 +10,7 @@
 	import Icon from '$components/Icon.svelte';
 	import LinkButton from '$components/LinkButton.svelte';
 	import Skeleton from '$components/Skeleton.svelte';
+	import { getToastMessages } from '$lib/state/toastMessages.svelte';
 
 	import { type IconName } from '$lib/icons';
 
@@ -18,6 +20,8 @@
 	};
 
 	let { data }: Props = $props();
+	let itemsInProgress = $state<string[]>([]);
+	const toastMessages = getToastMessages();
 
 	const {
 		elements: { root: tabRoot, list, content, trigger },
@@ -39,9 +43,9 @@
 		picture?: string | null;
 		isPending: boolean;
 		actions?: Array<{
+			id: string;
 			label: string;
 			actionName: string;
-			data: Record<string, unknown>;
 			icon: IconName;
 		}>;
 	};
@@ -63,11 +67,25 @@
 		<div class="flex gap-1">
 			{#if props.actions}
 				{#each props.actions as action}
-					<form method="POST" action={action.actionName}>
-						{#each Object.entries(action.data) as [key, value]}
-							<input type="hidden" name={key} {value} />
-						{/each}
-						<Button variant="ghost" type="submit">
+					<form
+						method="POST"
+						action={action.actionName}
+						use:enhance={() => {
+							itemsInProgress.push(action.id);
+							return async ({ result, update }) => {
+								await update();
+								itemsInProgress = itemsInProgress.filter((id) => id !== action.id);
+								if (result.type === 'failure') {
+									toastMessages.addMessage({
+										type: 'error',
+										message: result.data?.message as string
+									});
+								}
+							};
+						}}
+					>
+						<input type="hidden" name="id" value={action.id} />
+						<Button variant="ghost" type="submit" loading={itemsInProgress.includes(action.id)}>
 							<Icon icon={action.icon} />
 						</Button>
 					</form>
@@ -82,8 +100,8 @@
 
 <div class="mt-4">
 	{#await data.friendsPageModel}
-		<div class="grid gap-4">
-			<div class="h-friend w-full">
+		<div class="grid gap-4 xl:w-1/2">
+			<div class="h-friend">
 				<Skeleton />
 			</div>
 			<div class="h-friend w-full">
@@ -146,7 +164,7 @@
 							actions: [
 								{
 									actionName: '?/cancel-invite',
-									data: { id: invite.id },
+									id: invite.id,
 									icon: 'x-mark',
 									label: 'Cancel'
 								}
@@ -162,7 +180,7 @@
 							actions: [
 								{
 									actionName: '?/remove-friend',
-									data: { id: friend.id },
+									id: friend.id,
 									icon: 'x-mark',
 									label: 'Remove'
 								}
@@ -184,13 +202,13 @@
 								actions: [
 									{
 										actionName: '?/accept-invite',
-										data: { id: invite.id },
+										id: invite.id,
 										icon: 'check',
 										label: 'Accept'
 									},
 									{
 										actionName: '?/reject-invite',
-										data: { id: invite.id },
+										id: invite.id,
 										icon: 'x-mark',
 										label: 'Reject'
 									}

src/routes/my/friends/add/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
 	import { createLabel, melt } from '@melt-ui/svelte';
 
 	import Input from '$components/Input.svelte';
@@ -26,11 +27,15 @@
 	method="POST"
 	use:enhance={() => {
 		loading = true;
-		return async ({ result }) => {
+		return async ({ result, update }) => {
+			await update();
 			loading = false;
 			if (result.type === 'failure') {
 				error = result.data?.message as string;
 			}
+			if (result.type === 'redirect') {
+				goto(result.location);
+			}
 		};
 	}}
 >