From 51a4b7e37164d0a3bf96ea7f61bf5396c77897c7 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 4 Aug 2026 14:14:16 +0300
Subject: [PATCH] web/components: add animations to Pagination

Signed-off-by: eti <eti@eti.tf>
---
 .../components/ui/Pagination.stories.svelte   |   8 +
 web/src/lib/components/ui/Pagination.svelte   | 196 +++++++++++-------
 2 files changed, 132 insertions(+), 72 deletions(-)

diff --git a/web/src/lib/components/ui/Pagination.stories.svelte b/web/src/lib/components/ui/Pagination.stories.svelte
index 82310faf6..c22f0d283 100644
--- a/web/src/lib/components/ui/Pagination.stories.svelte
+++ b/web/src/lib/components/ui/Pagination.stories.svelte
@@ -9,6 +9,8 @@
 		argTypes: {
 			page: { control: { type: "number" } },
 			total: { control: { type: "number" } },
+			siblings: { control: { type: "number" } },
+			boundaries: { control: { type: "number" } },
 			labels: { control: { type: "boolean" } },
 			disabled: { control: { type: "boolean" } }
 		},
@@ -27,3 +29,9 @@
 <Story name="ManyPages" args={{ page: 12, total: 40 }} />
 <Story name="WithLabels" args={{ page: 5, total: 10, labels: true }} />
 <Story name="Disabled" args={{ page: 5, total: 10, disabled: true }} />
+
+<!-- slots are sized from `total`, so a four-digit range keeps one width across the
+     whole row instead of widening as the current page gains a digit -->
+<Story name="FourDigitRange" args={{ page: 1234, total: 5000 }} />
+<Story name="WideWindow" args={{ page: 20, total: 40, siblings: 2, boundaries: 2 }} />
+<Story name="NarrowWindow" args={{ page: 20, total: 40, siblings: 0 }} />
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
index a9771befb..fc35a3770 100644
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -1,61 +1,45 @@
 <script module lang="ts">
-	import { tv } from "tailwind-variants";
+	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const pagination = tv({
-		base: "flex items-center gap-1"
+		slots: {
+			nav: "inline-flex items-center gap-1",
+			track: "relative typography-paragraph-regular tabular-nums [--gap:0.25rem]",
+			plate:
+				"pointer-events-none absolute inset-y-0 left-0 w-(--slot) rounded-sm border border-border-default bg-background-default",
+			list: "relative flex gap-(--gap)",
+			slot: "w-(--slot)",
+			page: "w-full px-0",
+			ellipsis: "flex h-9 items-center justify-center text-foreground-subtle select-none",
+			label: "hidden sm:inline"
+		},
+		variants: {
+			selected: {
+				true: { page: "font-medium text-foreground-default hover:bg-transparent" },
+				false: { page: "text-foreground-muted hover:text-foreground-default" }
+			}
+		},
+		defaultVariants: {
+			selected: false
+		}
 	});
 
-	type Item = number | "start-ellipsis" | "end-ellipsis";
-
-	function range(start: number, end: number): number[] {
-		return Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
-	}
-
-	// Windowing per MUI's usePagination: always show the boundary pages
-	// (first/last) plus a sibling window around the current page, collapsing
-	// any gap into a single ellipsis.
-	function getPageItems(current: number, count: number): Item[] {
-		const siblingCount = 1;
-		const boundaryCount = 1;
-
-		const startPages = range(1, Math.min(boundaryCount, count));
-		const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
-
-		const siblingsStart = Math.max(
-			Math.min(current - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
-			boundaryCount + 2
-		);
-		const siblingsEnd = Math.min(
-			Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),
-			endPages.length > 0 ? endPages[0] - 2 : count - 1
-		);
-
-		return [
-			...startPages,
-			...(siblingsStart > boundaryCount + 2
-				? (["start-ellipsis"] as const)
-				: boundaryCount + 1 < count - boundaryCount
-					? [boundaryCount + 1]
-					: []),
-			...range(siblingsStart, siblingsEnd),
-			...(siblingsEnd < count - boundaryCount - 1
-				? (["end-ellipsis"] as const)
-				: count - boundaryCount > boundaryCount
-					? [count - boundaryCount]
-					: []),
-			...endPages
-		];
-	}
+	export type PaginationVariants = VariantProps<typeof pagination>;
 </script>
 
 <script lang="ts">
 	import ChevronLeft from "$icon/chevron-left";
 	import ChevronRight from "$icon/chevron-right";
+	import { untrack } from "svelte";
+	import { Spring, prefersReducedMotion } from "svelte/motion";
 	import Button from "./Button.svelte";
+	import { paginate } from "./paginate";
 
 	interface Props {
 		page: number;
 		total: number;
+		siblings?: number;
+		boundaries?: number;
 		onchange?: (page: number) => void;
 		class?: string;
 		labels?: boolean;
@@ -65,6 +49,8 @@
 	let {
 		page = $bindable(1),
 		total,
+		siblings = 1,
+		boundaries = 1,
 		onchange,
 		class: className,
 		labels,
@@ -72,61 +58,127 @@
 	}: Props = $props();
 
 	const count = $derived(Math.max(total, 1));
-	const items = $derived(getPageItems(Math.min(Math.max(page, 1), count), count));
+	const current = $derived(Math.min(Math.max(page, 1), count));
+	const items = $derived(paginate(current, count, siblings, boundaries));
+	const index = $derived(items.indexOf(current));
+
+	const digits = $derived(String(count).length);
+
+	const plate = new Spring(index, { stiffness: 0.139, damping: 0.61 });
+
+	let direction = $state(1);
+	let rolled = $state(false);
+	let previous = current;
+	$effect.pre(() => {
+		if (current !== previous) {
+			direction = current > previous ? 1 : -1;
+			previous = current;
+			rolled = true;
+		}
+		plate.set(index, { instant: prefersReducedMotion.current });
+	});
+
+	let spoken = $state("");
+	$effect(() => {
+		const message = `Page ${current} of ${count}`;
+		const timer = setTimeout(() => (spoken = message), 500);
+		return () => clearTimeout(timer);
+	});
 
 	function goTo(target: number) {
 		if (disabled) return;
 		const next = Math.min(Math.max(target, 1), count);
-		if (next === page) return;
+		if (next === current) return;
 		page = next;
 		onchange?.(next);
 	}
+
+	const spent = (can: boolean) => (disabled || !can ? "true" : undefined);
+
+	const style = $derived(pagination());
 </script>
 
 <nav
 	aria-label="Pagination"
 	aria-busy={disabled || undefined}
-	class={pagination({ class: className })}
+	class={style.nav({ class: className })}
 >
 	<Button
 		variant="ghost"
 		icon={ChevronLeft}
-		disabled={disabled || page <= 1}
+		aria-disabled={spent(current > 1)}
 		aria-label="Previous page"
-		onclick={() => goTo(page - 1)}
+		onclick={() => goTo(current - 1)}
 	>
-		<span class="hidden sm:inline">{labels ? "Previous" : ""}</span>
+		{#if labels}
+			<span class={style.label()}>Previous</span>
+		{/if}
 	</Button>
 
-	{#each items as item, i (typeof item === "number" ? item : `${item}-${i}`)}
-		{#if typeof item === "number"}
-			<Button
-				variant={item === page ? "default" : "ghost"}
-				{disabled}
-				aria-current={item === page ? "page" : undefined}
-				aria-label={`Page ${item}`}
-				onclick={() => goTo(item)}
-			>
-				{item}
-			</Button>
-		{:else}
-			<span
-				class="pointer-events-none flex size-8 items-center justify-center text-foreground-subtle select-none"
-				aria-hidden="true"
-			>
-				&hellip;
-			</span>
-		{/if}
-	{/each}
+	<div class={style.track()} style="--slot: max(2.25rem, calc({digits} * 1ch + 0.75rem))">
+		<span
+			aria-hidden="true"
+			class={style.plate()}
+			style="translate: calc({plate.current} * (var(--slot) + var(--gap)))"
+		></span>
+		<ol class={style.list()}>
+			{#each items as item, slot (slot)}
+				<li class={style.slot()}>
+					{#if typeof item === "number"}
+						{@const isSelected = item === current}
+						<Button
+							variant="ghost"
+							class={style.page({ selected: isSelected })}
+							aria-current={isSelected ? "page" : undefined}
+							aria-disabled={disabled || undefined}
+							aria-label="Page {item}"
+							onclick={() => goTo(item)}
+						>
+							{#key item}
+								<span class:roll={untrack(() => rolled)} style="--roll: {untrack(() => direction)}"
+									>{item}</span
+								>
+							{/key}
+						</Button>
+					{:else}
+						<span aria-hidden="true" class={style.ellipsis()}>&hellip;</span>
+					{/if}
+				</li>
+			{/each}
+		</ol>
+	</div>
 
 	<Button
 		variant="ghost"
 		icon={ChevronRight}
 		iconSide="right"
-		disabled={disabled || page >= count}
+		aria-disabled={spent(current < count)}
 		aria-label="Next page"
-		onclick={() => goTo(page + 1)}
+		onclick={() => goTo(current + 1)}
 	>
-		<span class="hidden sm:inline">{labels ? "Next" : ""}</span>
+		{#if labels}
+			<span class={style.label()}>Next</span>
+		{/if}
 	</Button>
+
+	<span role="status" class="sr-only">{spoken}</span>
 </nav>
+
+<style>
+	@keyframes roll {
+		from {
+			opacity: 0;
+			translate: calc(var(--roll) * 0.5rem);
+		}
+	}
+
+	.roll {
+		animation: roll 180ms cubic-bezier(0.23, 1, 0.32, 1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roll {
+			animation: none;
+		}
+	}
+</style>
-- 
2.51.2