Refactor registers sidebar

Use shared explorer layout and sidebar for the registers browser.

Signed-off-by: codex@lucy.xalior.com

src/app/registers/RegisterBrowser.tsx

@@ -1,10 +1,12 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from "react";
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { Register, RegisterAccess, Note } from '@/utils/register_parser';
+import { Register, RegisterAccess, Note } from "@/utils/register_parser";
-import { Form, Container, Row, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { Form, Row, Table, OverlayTrigger, Tooltip } from "react-bootstrap";
 import RegisterDetail from "@/app/registers/RegisterDetail";
+import ExplorerLayout from "@/components/explorer/ExplorerLayout";
+import FilterSidebar from "@/components/explorer/FilterSidebar";
 
 interface RegisterBrowserProps {
   registers: Register[];
@@ -73,7 +75,7 @@ export function renderAccess(access: RegisterAccess, extraNotes: Note[] = []) {
  * @returns A React component that allows users to browse and search registers.
  */
 export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
@@ -102,30 +104,42 @@ export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
     router.replace(url, { scroll: false });
   };
 
-  const filteredRegisters = registers.filter(register =>
+  const filteredRegisters = useMemo(() => (
-    register.search.includes(searchTerm.toLowerCase())
+    registers.filter((register) => register.search.includes(searchTerm.toLowerCase()))
-  );
+  ), [registers, searchTerm]);
-
 
   return (
-    <Container fluid>
+    <ExplorerLayout
-      <Form.Group className="mb-3">
+      title="NextReg Explorer"
+      subtitle={`${filteredRegisters.length.toLocaleString()} results`}
+      chips={searchTerm ? [`q: ${searchTerm}`] : []}
+      onClearChips={() => {
+        setSearchTerm("");
+        updateQueryString("");
+      }}
+      sidebar={(
+        <FilterSidebar>
+          <Form.Group>
+            <Form.Label className="form-label small text-secondary">Search</Form.Label>
             <Form.Control
               type="text"
               placeholder="Search registers..."
               value={searchTerm}
-          onChange={e => {
+              onChange={(e) => {
                 const v = e.target.value;
                 setSearchTerm(v);
                 updateQueryString(v);
               }}
             />
           </Form.Group>
+        </FilterSidebar>
+      )}
+    >
       <Row>
-        {filteredRegisters.map(register => (
+        {filteredRegisters.map((register) => (
           <RegisterDetail key={register.hex_address} register={register} />
         ))}
       </Row>
-    </Container>
+    </ExplorerLayout>
   );
 }

src/app/registers/page.tsx

@@ -6,7 +6,6 @@ export default async function RegistersPage() {
 
   return (
     <div className="container-fluid py-4">
-      <h1 className="mb-4">NextReg Explorer</h1>
       <RegisterBrowser registers={registers} />
     </div>
   );