From 934a00feb36cf9a397811d5e0cf14c529a824200 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 26 Apr 2026 21:36:44 +0200
Subject: [PATCH] fix(pagination): use stable key in {#each} and fix duplicate
 page number bug

Replaces position-based key `i` with `entry === null ? 'ellipsis-' + i : entry`
so DOM reconciliation is stable when the window shifts (Decision Queue #2).

The index-based key was masking a duplicate-push bug in pageWindow: when
windowStart === first+1 or windowEnd === last-1, the loop already included that
number, causing Svelte to throw `each_key_duplicate` once stable keys are used.
Fixed the bridge-page conditions to use first+2 / last-2 thresholds so the loop
and the bridge branches never push the same page number.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/Pagination.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/Pagination.svelte b/frontend/src/lib/components/Pagination.svelte
index 10f2d77d..45ba1ae5 100644
--- a/frontend/src/lib/components/Pagination.svelte
+++ b/frontend/src/lib/components/Pagination.svelte
@@ -40,20 +40,20 @@ const pageWindow = $derived.by(() => {
 
 	result.push(first);
 
-	if (windowStart > first + 1) {
+	if (windowStart > first + 2) {
 		result.push(null); // left ellipsis
-	} else if (windowStart === first + 1) {
-		result.push(windowStart);
+	} else if (windowStart === first + 2) {
+		result.push(first + 1); // bridge: one page gap, show directly instead of ellipsis
 	}
 
 	for (let p = Math.max(windowStart, first + 1); p <= Math.min(windowEnd, last - 1); p++) {
 		result.push(p);
 	}
 
-	if (windowEnd < last - 1) {
+	if (windowEnd < last - 2) {
 		result.push(null); // right ellipsis
-	} else if (windowEnd === last - 1) {
-		result.push(windowEnd);
+	} else if (windowEnd === last - 2) {
+		result.push(last - 1); // bridge: one page gap, show directly instead of ellipsis
 	}
 
 	if (last > first) {
@@ -105,7 +105,7 @@ const pageWindow = $derived.by(() => {
 
 		<!-- Desktop: numbered page buttons (hidden below sm:) -->
 		<div data-testid="pagination-pages" class="hidden items-center gap-1 sm:flex">
-			{#each pageWindow as entry, i (i)}
+			{#each pageWindow as entry, i (entry === null ? 'ellipsis-' + i : entry)}
 				{#if entry === null}
 					{#if i === 1}
 						<span