Fix pagination on all pages (#227)

Author: oskarszoon

ui/dashboard/src/internal/components/page/network/connected-nodes-card/index.svelte

@@ -48,12 +48,7 @@
 
   $: hasSorting = sortColumn && sortOrder
 
-  let totalPages = 0
-
-  const onTotal = (e) => {
-    totalPages = e.detail.total
-  }
-
+  $: totalPages = Math.max(1, Math.ceil((allData?.length || 0) / pageSize))
   $: showPagerNav = totalPages > 1
   $: showPagerSize = showPagerNav || (totalPages === 1 && allData.length > 5)
   $: showTableFooter = showPagerSize
@@ -83,7 +78,6 @@
       }}
       hasBoundaryRight={true}
       on:change={onPage}
-      on:total={onTotal}
     />
     <TableToggle value={variant} on:change={onToggle} />
     {#if hasSorting}

ui/dashboard/src/internal/components/page/viewer/block/block-subtrees-card/index.svelte

@@ -33,12 +33,7 @@
     pageSize = data.value.pageSize
   }
 
-  let totalPages = 0
-
-  const onTotal = (e) => {
-    totalPages = e.detail.total
-  }
-
+  $: totalPages = Math.max(1, Math.ceil(totalItems / pageSize))
   $: showPagerNav = totalPages > 1
   $: showPagerSize = showPagerNav || (totalPages === 1 && data.length > 5)
   $: showTableFooter = showPagerSize
@@ -100,7 +95,6 @@
       }}
       hasBoundaryRight={true}
       on:change={onPage}
-      on:total={onTotal}
     />
     <TableToggle value={variant} on:change={onToggle} />
   </svelte:fragment>

ui/dashboard/src/internal/components/page/viewer/blocks/blocks-table-card/index.svelte

@@ -5,6 +5,8 @@
   import Card from '$internal/components/card/index.svelte'
   import TableToggle from '$internal/components/table-toggle/index.svelte'
   import i18n from '$internal/i18n'
+  import { page as pageStore } from '$app/stores'
+  import { goto } from '$app/navigation'
 
   import { assetHTTPAddress } from '$internal/stores/nodeStore'
   import { failure } from '$lib/utils/notifications'
@@ -32,18 +34,44 @@
   let pageSize = 20
   let totalItems = 0
 
+  // Get pagination from URL (read-only, no writing in reactive block)
+  $: {
+    const urlPageSize = $pageStore.url.searchParams.get('pageSize')
+    if (urlPageSize) {
+      const parsed = parseInt(urlPageSize, 10)
+      if (!isNaN(parsed) && parsed > 0 && pageSize !== parsed) {
+        pageSize = parsed
+      }
+    } else if (pageSize !== 20) {
+      pageSize = 20 // Default
+    }
+
+    const urlPage = $pageStore.url.searchParams.get('page')
+    if (urlPage) {
+      const parsed = parseInt(urlPage, 10)
+      if (!isNaN(parsed) && parsed > 0 && page !== parsed) {
+        page = parsed
+      }
+    } else if (page !== 1) {
+      page = 1 // Always reset to page 1 if not in URL
+    }
+  }
+
+  function updateURL(page: number, pageSize: number) {
+    const url = new URL($pageStore.url)
+    url.searchParams.set('page', page.toString())
+    url.searchParams.set('pageSize', pageSize.toString())
+    goto(url.toString(), { replaceState: true, noScroll: true, keepFocus: true })
+  }
+
   function onPage(e) {
     const data = e.detail
     page = data.value.page
     pageSize = data.value.pageSize
+    updateURL(page, pageSize)
   }
 
-  let totalPages = 0
-
-  const onTotal = (e) => {
-    totalPages = e.detail.total
-  }
-
+  $: totalPages = Math.max(1, Math.ceil(totalItems / pageSize))
   $: showPagerNav = totalPages > 1
   $: showPagerSize = showPagerNav || (totalPages === 1 && data.length > 5)
   $: showTableFooter = showPagerSize
@@ -103,8 +131,10 @@
     }
   }
 
-  // Fetch data when the selected node changes
-  $: $assetHTTPAddress && fetchData(page, pageSize)
+  // Fetch data when the selected node changes or pagination params change
+  $: if ($assetHTTPAddress) {
+    fetchData(page, pageSize)
+  }
 
   function onKeyDown(e) {
     if (!e) e = window.event
@@ -137,7 +167,6 @@
       }}
       hasBoundaryRight={true}
       on:change={onPage}
-      on:total={onTotal}
     />
     <div style="height: 24px; width: 12px;" />
     <TableToggle value={variant} on:change={onToggle} />

ui/dashboard/src/internal/components/page/viewer/subtree/subtree-txs-card/index.svelte

@@ -37,12 +37,7 @@
     pageSize = data.value.pageSize
   }
 
-  let totalPages = 0
-
-  const onTotal = (e) => {
-    totalPages = e.detail.total
-  }
-
+  $: totalPages = Math.max(1, Math.ceil(totalItems / pageSize))
   $: showPagerNav = totalPages > 1
   $: showPagerSize = showPagerNav || (totalPages === 1 && data.length > 5)
   $: showTableFooter = showPagerSize
@@ -131,7 +126,6 @@
       }}
       hasBoundaryRight={true}
       on:change={onPage}
-      on:total={onTotal}
     />
     <TableToggle value={variant} on:change={onToggle} />
   </svelte:fragment>

ui/dashboard/src/internal/components/pager/index.svelte

@@ -53,8 +53,6 @@
       boundaryCount,
       siblingCount,
     )
-
-    dispatch('total', { total: totalPages })
   }
 
   function isSelected(btn) {