Let users browse followers and following lists

Following lists are public; followers are visible to the user and to mutual followers. Adds GET /users/{id}/followers and /following, exposes isFollowing and canViewFollowers on the profile, and returns isFollowedByViewer from user search so the web player no longer calls /is-following per user.
2026-09-23 22:55:14 +02:00
parent b9a40186b1
commit cb046bba9e
26 changed files with 768 additions and 64 deletions
@@ -0,0 +1,32 @@
+import type { PageServerLoad, Actions } from './$types';
+import { createApiClient, optionalUser, unwrapOrError } from '$lib/server/api';
+import { fetchFollowList } from '$lib/server/follows';
+import { followUserAction, unfollowUserAction } from '$lib/server/followActions';
+import { FOLLOW_LIST_PAGE_SIZE } from '$lib/config';
+
+export const load: PageServerLoad = async ({ params, locals, url, fetch, parent }) => {
+	const { allowAnonymousListening } = await parent();
+	const viewer = optionalUser(locals, url, allowAnonymousListening);
+	const api = createApiClient({ fetch, accessToken: locals.accessToken ?? undefined });
+
+	const [profileRes, listRes] = await Promise.all([
+		api.GET('/users/{id}/profile', { params: { path: { id: params.id } } }),
+		fetchFollowList(api, params.list, params.id, 1, FOLLOW_LIST_PAGE_SIZE)
+	]);
+
+	const profile = unwrapOrError(profileRes, 'Usuario no encontrado.', 404);
+	const forbidden = listRes.response?.status === 403;
+
+	return {
+		list: params.list,
+		profile,
+		users: forbidden ? null : unwrapOrError(listRes, 'No se pudo cargar la lista.'),
+		forbidden,
+		viewerId: viewer?.sub ?? null
+	};
+};
+
+export const actions: Actions = {
+	follow: followUserAction,
+	unfollow: unfollowUserAction
+};
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import Users from '@lucide/svelte/icons/users';
+	import Lock from '@lucide/svelte/icons/lock';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import UserRow from '$lib/components/ui/media/UserRow.svelte';
+	import { appendUnique } from '$lib/data/collections';
+	import { plural } from '$lib/utils/format';
+
+	let { data, form } = $props();
+
+	type ListUser = NonNullable<typeof data.users>['items'][number];
+
+	let items = $state<ListUser[]>([]);
+	let page = $state(1);
+	let hasMore = $state(false);
+	let loadingMore = $state(false);
+
+	$effect(() => {
+		items = data.users?.items ?? [];
+		page = Number(data.users?.pageNumber ?? 1);
+		hasMore = data.users?.hasNextPage ?? false;
+	});
+
+	const isFollowers = $derived(data.list === 'followers');
+	const title = $derived(isFollowers ? 'Seguidores' : 'Siguiendo');
+	const total = $derived(Number(data.users?.totalItemCount ?? 0));
+
+	async function loadMore() {
+		if (loadingMore) return;
+		loadingMore = true;
+		try {
+			const res = await fetch(`/api/users/${data.profile.id}/${data.list}?pageNumber=${page + 1}`);
+			if (!res.ok) throw new Error(String(res.status));
+			const next = (await res.json()) as NonNullable<typeof data.users>;
+			items = appendUnique(items, next.items, (u) => u.id);
+			page = Number(next.pageNumber);
+			hasMore = next.hasNextPage;
+		} catch {
+			hasMore = false;
+		} finally {
+			loadingMore = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>{title} · {data.profile.name}</title>
+</svelte:head>
+
+<Page>
+	<PageHeader
+		eyebrow={data.profile.name}
+		{title}
+		meta={data.forbidden
+			? undefined
+			: isFollowers
+				? plural(total, 'seguidor', 'seguidores')
+				: plural(total, 'usuario', 'usuarios')}
+	/>
+
+	{#if form?.message}
+		<Alert class="mb-4">{form.message}</Alert>
+	{/if}
+
+	{#if data.forbidden}
+		<EmptyState
+			icon={Lock}
+			title="Seguidores privados"
+			description="Solo puedes ver los seguidores de {data.profile.name} si os seguís mutuamente."
+		/>
+	{:else if items.length === 0}
+		<EmptyState
+			icon={Users}
+			title={isFollowers ? 'Sin seguidores' : 'No sigue a nadie'}
+			description={isFollowers
+				? `Todavía nadie sigue a ${data.profile.name}.`
+				: `${data.profile.name} todavía no sigue a nadie.`}
+		/>
+	{:else}
+		<ul class="flex flex-col gap-1">
+			{#each items as user (user.id)}
+				<li>
+					<UserRow {user} canFollow={data.viewerId !== null && data.viewerId !== user.id} />
+				</li>
+			{/each}
+		</ul>
+		<InfiniteScroll onLoadMore={loadMore} {hasMore} loading={loadingMore} />
+	{/if}
+</Page>