diff --git a/src/app/registers/RegisterBrowser.tsx b/src/app/registers/RegisterBrowser.tsx index c68cb87..567119a 100644 --- a/src/app/registers/RegisterBrowser.tsx +++ b/src/app/registers/RegisterBrowser.tsx @@ -1,6 +1,7 @@ 'use client'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; +import { usePathname, useRouter, useSearchParams } from 'next/navigation'; import { Register, RegisterAccess, Note } from '@/utils/register_parser'; import { Form, Container, Row, Table, OverlayTrigger, Tooltip } from 'react-bootstrap'; import RegisterDetail from "@/app/registers/RegisterDetail"; @@ -73,6 +74,33 @@ export function renderAccess(access: RegisterAccess, extraNotes: Note[] = []) { */ export default function RegisterBrowser({ registers }: RegisterBrowserProps) { const [searchTerm, setSearchTerm] = useState(''); + const searchParams = useSearchParams(); + const router = useRouter(); + const pathname = usePathname(); + + // Initialize from query string and keep in sync when the URL changes + useEffect(() => { + const qp = (searchParams?.get('q') || '').trim(); + // Only update state if different to avoid loops + if (qp !== searchTerm) { + setSearchTerm(qp); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchParams]); + + // Update the URL query string whenever the user types + const updateQueryString = (value: string) => { + const params = new URLSearchParams(searchParams?.toString()); + const v = value.trim(); + if (v) { + params.set('q', v); + } else { + params.delete('q'); + } + const query = params.toString(); + const url = query ? `${pathname}?${query}` : pathname; + router.replace(url, { scroll: false }); + }; const filteredRegisters = registers.filter(register => register.search.includes(searchTerm.toLowerCase()) @@ -86,7 +114,11 @@ export default function RegisterBrowser({ registers }: RegisterBrowserProps) { type="text" placeholder="Search registers..." value={searchTerm} - onChange={e => setSearchTerm(e.target.value)} + onChange={e => { + const v = e.target.value; + setSearchTerm(v); + updateQueryString(v); + }} />