Flyby manual code cleanup, remove almost identical components and replace with one good humanly migrated one

src/app/registers/RegisterBrowser.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { Register, RegisterAccess, Note } from './types';
 import { Form, Card, Container, Row, Col, Tabs, Tab, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import RegisterDetail from "@/app/registers/RegisterDetail";
 
 interface RegisterBrowserProps {
   registers: Register[];
@@ -95,31 +96,7 @@ export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
         {filteredRegisters.map(register => {
           const defaultActiveKey = getDefaultActiveKey(register);
           return (
-            <Col key={register.hex_address} xs={12} className="mb-4">
+              <RegisterDetail key={register.hex_address} register={register} defaultActiveKey={defaultActiveKey} />
-              <Card>
-                <Card.Header>
-                  <code>{register.hex_address}</code> ( {register.dec_address} ) <Link href={`https://wiki.specnext.dev/${encodeURIComponent((register.name).replace(' ','_'))}_Register`} className="text-decoration-none">
-                    <strong>{register.name}</strong> {register.issue_4_only && <span className="badge bg-danger">Issue 4 Only</span>}
-                  </Link>
-                </Card.Header>
-                <Card.Body>
-                  <Tabs defaultActiveKey={defaultActiveKey} id={`register-tabs-${register.hex_address}`}>
-                    {register.common && <Tab eventKey="common" title="Read/Write">{renderAccess(register.common)}</Tab>}
-                    {register.read && <Tab eventKey="read" title="Read">{renderAccess(register.read)}</Tab>}
-                    {register.write && <Tab eventKey="write" title="Write">{renderAccess(register.write)}</Tab>}
-                  </Tabs>
-                  {register.notes.map((note, index) => (
-                    <p key={index} className="small text-muted">{note.ref} {note.text}</p>
-                  ))}
-                  {register.text && register.text.length > 0 && (
-                    <div className="mt-3">
-                      <h5>Notes:</h5>
-                      <pre>{register.text}</pre>
-                    </div>
-                  )}
-                </Card.Body>
-              </Card>
-            </Col>
           );
         })}
       </Row>

src/app/registers/RegisterDetail.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Col, Card, Tabs, Tab } from 'react-bootstrap';
+import { Register } from './types';
+import { renderAccess } from './RegisterBrowser';
+import Link from "next/link";
+
+/**
+ * A client-side component that displays the details of a single register.
+ * @param register The register object to display.
+ * @param defaultActiveKey The default active tab to display.
+ * @returns A React component that displays the register details.
+ */
+export default function RegisterDetail({
+  register,
+  defaultActiveKey,
+}: {
+  register: Register;
+  defaultActiveKey?: string;
+}) {
+  return (
+      <Col key={register.hex_address} xs={12} className="mb-4">
+        <Card>
+          <Card.Header>
+            <code>{register.hex_address}</code> ( {register.dec_address} ) <Link href={`https://wiki.specnext.dev/${encodeURIComponent((register.name).replace(' ','_'))}_Register`} className="text-decoration-none">
+            <strong>{register.name}</strong> {register.issue_4_only && <span className="badge bg-danger">Issue 4 Only</span>}
+          </Link>
+          </Card.Header>
+          <Card.Body>
+            <Tabs defaultActiveKey={defaultActiveKey} id={`register-tabs-${register.hex_address}`}>
+              {register.common && <Tab eventKey="common" title="Read/Write">{renderAccess(register.common)}</Tab>}
+              {register.read && <Tab eventKey="read" title="Read">{renderAccess(register.read)}</Tab>}
+              {register.write && <Tab eventKey="write" title="Write">{renderAccess(register.write)}</Tab>}
+            </Tabs>
+            {register.notes.map((note, index) => (
+                <p key={index} className="small text-muted">{note.ref} {note.text}</p>
+            ))}
+            {register.text && register.text.length > 0 && (
+                <div className="mt-3">
+                  <h5>Notes:</h5>
+                  <pre>{register.text}</pre>
+                </div>
+            )}
+          </Card.Body>
+        </Card>
+      </Col>
+  );
+}

src/app/registers/RegisterDetailClient.tsx

@@ -1,66 +0,0 @@
-"use client";
-
-import { Container, Row, Col, Card, Tabs, Tab } from 'react-bootstrap';
-import { Register } from './types';
-import { renderAccess } from './RegisterBrowser';
-
-/**
- * A client-side component that displays the details of a single register.
- * @param register The register object to display.
- * @param defaultActiveKey The default active tab to display.
- * @returns A React component that displays the register details.
- */
-export default function RegisterDetailClient({
-  register,
-  defaultActiveKey,
-}: {
-  register: Register;
-  defaultActiveKey?: string;
-}) {
-  return (
-    <Container fluid className="py-4">
-      <Row>
-        <Col xs={12}>
-          <Card>
-            <Card.Header>
-              <strong>{register.name}</strong> ({register.hex_address} / {register.dec_address}){' '}
-              {register.issue_4_only && <span className="badge bg-danger">Issue 4 Only</span>}
-            </Card.Header>
-            <Card.Body>
-              {defaultActiveKey ? (
-                <Tabs defaultActiveKey={defaultActiveKey} id={`register-tabs-${register.hex_address}`}>
-                  {register.common && (
-                    <Tab eventKey="common" title="Read/Write">
-                      {renderAccess(register.common)}
-                    </Tab>
-                  )}
-                  {register.read && (
-                    <Tab eventKey="read" title="Read">
-                      {renderAccess(register.read)}
-                    </Tab>
-                  )}
-                  {register.write && (
-                    <Tab eventKey="write" title="Write">
-                      {renderAccess(register.write)}
-                    </Tab>
-                  )}
-                </Tabs>
-              ) : null}
-              {register.notes.map((note, index) => (
-                <p key={index} className="small text-muted">
-                  {note.ref} {note.text}
-                </p>
-              ))}
-              {register.text && register.text.length > 0 && (
-                <div className="mt-3">
-                  <h5>Notes:</h5>
-                  <pre>{register.text}</pre>
-                </div>
-              )}
-            </Card.Body>
-          </Card>
-        </Col>
-      </Row>
-    </Container>
-  );
-}

src/app/registers/[hex]/page.tsx

@@ -3,7 +3,8 @@ import path from 'path';
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
 import { Register, RegisterAccess } from '../../registers/types';
-import RegisterDetailClient from '../../registers/RegisterDetailClient';
+import RegisterDetail from '../RegisterDetail';
+import {Container, Row} from "react-bootstrap";
 
 async function parseNextReg(fileContent: string): Promise<Register[]> {
     const registers: Register[] = [];
@@ -173,11 +174,13 @@ export default async function RegisterDetailPage({ params }: { params: { hex: st
     const defaultActiveKey = register.common ? 'common' : (register.read ? 'read' : (register.write ? 'write' : undefined));
 
     return (
-        <div className="py-4">
+        <Container fluid className="py-4">
             <div className="mb-3">
                 <Link href="/registers" className="btn btn-secondary">← Back to Registers</Link>
             </div>
-            <RegisterDetailClient register={register} defaultActiveKey={defaultActiveKey} />
+            <Row>
-        </div>
+                <RegisterDetail register={register} defaultActiveKey={defaultActiveKey} />
+            </Row>
+        </Container>
     );
 }