Add follow button next to each user in search results

Extract FollowButton and shared follow/unfollow actions, reused by the user profile page.

web-player/src/lib/components/ui/media/FollowButton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { enhance } from '$app/forms';
+	import Button from '../primitives/Button.svelte';
+
+	interface Props {
+		following: boolean;
+		userId?: string;
+		invalidateAll?: boolean;
+		class?: string;
+	}
+
+	let { following: initial, userId, invalidateAll = false, class: klass = '' }: Props = $props();
+
+	let following = $state(untrack(() => initial));
+	let submitting = $state(false);
+</script>
+
+<form
+	method="POST"
+	action={following ? '?/unfollow' : '?/follow'}
+	class={klass}
+	use:enhance={() => {
+		submitting = true;
+		return async ({ result, update }) => {
+			if (result.type === 'success' && typeof result.data?.following === 'boolean')
+				following = result.data.following;
+			await update({ reset: false, invalidateAll });
+			submitting = false;
+		};
+	}}
+>
+	{#if userId}
+		<input type="hidden" name="userId" value={userId} />
+	{/if}
+	<Button
+		type="submit"
+		size="sm"
+		variant={following ? 'secondary' : 'primary'}
+		disabled={submitting}
+	>
+		{following ? 'Dejar de seguir' : 'Seguir'}
+	</Button>
+</form>

web-player/src/lib/server/followActions.ts

@@ -0,0 +1,28 @@
+import { fail, type RequestEvent } from '@sveltejs/kit';
+import { createApiClient, requireAccessTokenAction } from '$lib/server/api';
+
+async function setFollowing({ request, params, locals, fetch }: RequestEvent, follow: boolean) {
+	const accessToken = requireAccessTokenAction(locals);
+	if (typeof accessToken !== 'string') return accessToken;
+
+	const form = await request.formData();
+	const id = String(form.get('userId') ?? '') || String(params.id ?? '');
+	if (!id) return fail(400, { message: 'Falta el usuario.' });
+
+	const api = createApiClient({ fetch, accessToken });
+	const options = { params: { path: { id } } };
+	const { error } = follow
+		? await api.POST('/users/{id}/follow', options)
+		: await api.DELETE('/users/{id}/follow', options);
+
+	if (error) {
+		return fail(502, {
+			message: follow ? 'No se pudo seguir al usuario.' : 'No se pudo dejar de seguir al usuario.'
+		});
+	}
+
+	return { following: follow, userId: id };
+}
+
+export const followUserAction = (event: RequestEvent) => setFollowing(event, true);
+export const unfollowUserAction = (event: RequestEvent) => setFollowing(event, false);