Keep tab when browsing detail entries

frontend/src/components/DetailView/DetailBrowser.tsx

@@ -2,12 +2,13 @@ import { Box, Button } from '@mui/material'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
 import { useDetailContext } from './Context/DetailContext'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { usePageContext } from '../Page'
 
 export const DetailBrowser = <T extends object>() => {
   const { data, mode } = useDetailContext<T>()
   const navigate = useNavigate()
+  const location = useLocation()
   const { idList, idFieldName, viewName, createTitle } = usePageContext<T>()
   const idListExists = idList?.length > 0
   const currentIndex = idList.indexOf((data as { [key: string]: string })[idFieldName])
@@ -38,6 +39,7 @@ export const DetailBrowser = <T extends object>() => {
     }
     return `${createTitle(data)}`
   }
+  const search = location.search
 
   return (
     <Box
@@ -54,13 +56,13 @@ export const DetailBrowser = <T extends object>() => {
       {idListExists && mode.read && (
         <div>
           {previousIndex >= 0 && (
-            <Button onClick={() => navigate(`/${viewName}/${encodeURIComponent(idList[previousIndex])}`)}>
+            <Button onClick={() => navigate(`/${viewName}/${encodeURIComponent(idList[previousIndex])}${search}`)}>
               <ArrowBackIcon />
             </Button>
           )}
           {`${currentIndex + 1} of ${idList.length}`}
           {nextIndex < idList.length && (
-            <Button onClick={() => navigate(`/${viewName}/${encodeURIComponent(idList[nextIndex])}`)}>
+            <Button onClick={() => navigate(`/${viewName}/${encodeURIComponent(idList[nextIndex])}${search}`)}>
               <ArrowForwardIcon />
             </Button>
           )}