From 4dff86367beebc03c5a5e9469a11051b085d27b8 Mon Sep 17 00:00:00 2001
From: juhanikat <juhani.kataja@gmail.com>
Date: Sun, 12 Jul 2026 13:44:50 +0300
Subject: [PATCH] =?UTF-8?q?Fix=20navigation=20inside=20tabs=20with=20a=20t?=
 =?UTF-8?q?ableview=20replacing=20all=20query=20param=E2=80=A6=20(#1218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix navigation inside tabs with a tableview replacing all query params in url

* fix copilot suggested issues relating to encoding urls
---
 frontend/src/components/TableView/TableView.tsx | 6 +++++-
 frontend/src/hooks/useSyncTabSearch.ts          | 8 +++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TableView/TableView.tsx b/frontend/src/components/TableView/TableView.tsx
index 50df4288..f724d5ba 100755
--- a/frontend/src/components/TableView/TableView.tsx
+++ b/frontend/src/components/TableView/TableView.tsx
@@ -419,7 +419,11 @@ export const TableView = <T extends MRT_RowData>({
     )
   }
 
-  const buildTableStateUrl = () => `${location.pathname}?${TABLE_STATE_URL_PARAM}=${encodeURIComponent(tableStateId)}`
+  const buildTableStateUrl = () => {
+    const params = new URLSearchParams(location.search)
+    params.set(TABLE_STATE_URL_PARAM, tableStateId)
+    return `${location.pathname}?${params.toString()}`
+  }
 
   const loadStateFromUrl = <TState extends MRT_ColumnFiltersState | MRT_SortingState | MRT_PaginationState>(
     state: TableStateInUrl,
diff --git a/frontend/src/hooks/useSyncTabSearch.ts b/frontend/src/hooks/useSyncTabSearch.ts
index 7c3d863e..d2e35097 100644
--- a/frontend/src/hooks/useSyncTabSearch.ts
+++ b/frontend/src/hooks/useSyncTabSearch.ts
@@ -18,15 +18,13 @@ export const useSyncTabSearch = (tab: number) => {
   }, [location.key, location.state])
 
   useEffect(() => {
-    const nextSearch = `?tab=${tab}`
-    if (location.search === nextSearch) {
-      return
-    }
+    const params = new URLSearchParams(location.search)
+    if (params.get('tab') === String(tab)) return
 
     navigate(
       {
         pathname: location.pathname,
-        search: nextSearch,
+        search: `?tab=${tab}`,
       },
       {
         replace: true,