refactor: extract pagination into reusable SearchPagination component and improve results display

Author: chrisjm

src/lib/components/SearchPagination.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  let {
+    currentPage,
+    totalPages,
+    hasPrevious,
+    hasNext,
+    onPageChange,
+    maxPagesToShow = 10,
+  } = $props<{
+    currentPage: number;
+    totalPages: number;
+    hasPrevious: boolean;
+    hasNext: boolean;
+    onPageChange: (page: number) => void;
+    maxPagesToShow?: number;
+  }>();
+
+  function handlePageChange(targetPage: number) {
+    if (
+      targetPage !== currentPage &&
+      targetPage >= 1 &&
+      targetPage <= totalPages
+    ) {
+      onPageChange?.(targetPage);
+    }
+  }
+</script>
+
+{#if totalPages > 1}
+  <div class="flex justify-center mt-8 space-x-2">
+    <button
+      class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+      disabled={!hasPrevious}
+      onclick={() => handlePageChange(currentPage - 1)}
+    >
+      Previous
+    </button>
+
+    <div class="flex space-x-1">
+      {#each Array(Math.min(totalPages, maxPagesToShow)) as _, i}
+        {@const pageNum = i + 1}
+        <button
+          class="px-4 py-2 border rounded-md shadow-sm text-sm font-medium {pageNum ===
+          currentPage
+            ? 'bg-amber-600 text-white border-amber-600'
+            : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50'}"
+          onclick={() => handlePageChange(pageNum)}
+        >
+          {pageNum}
+        </button>
+      {/each}
+    </div>
+
+    <button
+      class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+      disabled={!hasNext}
+      onclick={() => handlePageChange(currentPage + 1)}
+    >
+      Next
+    </button>
+  </div>
+{/if}

src/routes/breweries/+page.svelte

@@ -2,17 +2,19 @@
   import BreweriesTable from '$lib/components/BreweriesTable.svelte';
   import BreweryCard from '$lib/components/BreweryCard.svelte';
   import BrewerySearchForm from '$lib/components/BrewerySearchForm.svelte';
+  import SearchPagination from '$lib/components/SearchPagination.svelte';
   import { goto } from '$app/navigation';
   import {
     getBreweries,
     getLoading,
     getError,
     resetSearch,
     initializeStore,
-    getHasBreweries,
     getHasNextPage,
     getHasPreviousPage,
     getCurrentPage,
+    getItemsPerPage,
+    getTotalBreweries,
     getTotalPages,
     getSearchQuery,
   } from '$lib/stores/breweries.svelte';
@@ -76,11 +78,24 @@
     {#if getSearchQuery()}
       <div class="mb-6">
         <p class="text-gray-600">
-          Found {getBreweries().length} breweries matching "{getSearchQuery()}"
+          {(getCurrentPage() - 1) * getItemsPerPage() + 1}
+          - {Math.min(
+            getCurrentPage() * getItemsPerPage(),
+            getTotalBreweries()
+          )}
+          of {getTotalBreweries()} breweries (page {getCurrentPage()} of {getTotalPages()})
         </p>
       </div>
     {/if}
 
+    <SearchPagination
+      currentPage={getCurrentPage()}
+      totalPages={getTotalPages()}
+      hasPrevious={getHasPreviousPage()}
+      hasNext={getHasNextPage()}
+      onPageChange={handlePageChange}
+    />
+
     <!-- Mobile view: Card layout -->
     <div class="grid grid-cols-1 gap-6 mt-6 md:hidden">
       {#each getBreweries() as brewery}
@@ -103,41 +118,13 @@
       </div>
     </div>
 
-    <!-- Pagination Controls -->
-    {#if getTotalPages() > 1}
-      <div class="flex justify-center mt-8 space-x-2">
-        <button
-          class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-          disabled={!getHasPreviousPage()}
-          onclick={() => handlePageChange(getCurrentPage() - 1)}
-        >
-          Previous
-        </button>
-
-        <div class="flex space-x-1">
-          {#each Array(Math.min(getTotalPages(), 10)) as _, i}
-            {@const pageNum = i + 1}
-            <button
-              class="px-4 py-2 border rounded-md shadow-sm text-sm font-medium {pageNum ===
-              getCurrentPage()
-                ? 'bg-amber-600 text-white border-amber-600'
-                : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50'}"
-              onclick={() => handlePageChange(pageNum)}
-            >
-              {pageNum}
-            </button>
-          {/each}
-        </div>
-
-        <button
-          class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-          disabled={!getHasNextPage()}
-          onclick={() => handlePageChange(getCurrentPage() + 1)}
-        >
-          Next
-        </button>
-      </div>
-    {/if}
+    <SearchPagination
+      currentPage={getCurrentPage()}
+      totalPages={getTotalPages()}
+      hasPrevious={getHasPreviousPage()}
+      hasNext={getHasNextPage()}
+      onPageChange={handlePageChange}
+    />
   {:else if getSearchQuery()}
     <div class="text-center py-12">
       <p class="text-gray-500">