Get Junie to propogate the search query to the URL, so we can deeplink searches

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);
+          }}
         />
       </Form.Group>
       <Row>