Adding source viewer to individual registers

src/app/registers/RegisterDetail.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Col, Card, Tabs, Tab } from 'react-bootstrap';
+import { useState } from 'react';
+import { Col, Card, Tabs, Tab, Button, Modal } from 'react-bootstrap';
 import { Register } from '@/utils/parser';
 import { renderAccess } from './RegisterBrowser';
 import Link from "next/link";
@@ -19,6 +20,8 @@ export default function RegisterDetail({
   register: Register;
   defaultActiveKey?: string;
 }) {
+  const [showSource, setShowSource] = useState(false);
+
   return (
       <Col key={register.hex_address} xs={12} className="mb-4">
         <Card>
@@ -28,13 +31,17 @@ export default function RegisterDetail({
               <strong>{register.name}</strong> {register.issue_4_only && <span className="badge bg-danger">Issue 4 Only</span>}
             {/*</Link>*/}
             <div className="float-end small text-muted">
-              <Link href={`https://wiki.specnext.dev/${encodeURIComponent((register.name).replace(' ','_'))}_Register`} className="text-decoration-none btn btn-sm btn-primary">
+              <Link href={`https://wiki.specnext.dev/${encodeURIComponent((register.name).replace(' ','_'))}_Register`} className="text-decoration-none btn btn-sm btn-primary" title="Open wiki">
                 <Icon.Wikipedia />
               </Link>
               &nbsp;
-              <Link href={`/registers/${register.hex_address}`} className="text-decoration-none btn btn-sm btn-primary">
+              <Link href={`/registers/${register.hex_address}`} className="text-decoration-none btn btn-sm btn-primary" title="Permalink">
                 <Icon.Link45deg />
               </Link>
+              &nbsp;
+              <Button variant="primary" size="sm" className="text-decoration-none" onClick={() => setShowSource(true)} title="View source">
+                <Icon.CodeSlash />
+              </Button>
             </div>
           </Card.Header>
           <Card.Body>
@@ -54,11 +61,26 @@ export default function RegisterDetail({
             )}
           </Card.Body>
         </Card>
-        <code>
+
-          {register.source.map((line, index) => (
+        <Modal show={showSource} onHide={() => setShowSource(false)} size="xl" centered scrollable>
-              <span key={index}>{line}<br /></span>
+          <Modal.Header closeButton>
-          ))}
+            <Modal.Title>Source: {register.name} [{register.hex_address}]</Modal.Title>
-        </code>
+          </Modal.Header>
+          <Modal.Body>
+            <pre className="mb-0">
+              {register.source && register.source.length > 0 ? (
+                register.source.map((line, index) => (
+                  <span key={index}>{line}<br/></span>
+                ))
+              ) : (
+                <em>No source available.</em>
+              )}
+            </pre>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={() => setShowSource(false)}>Close</Button>
+          </Modal.Footer>
+        </Modal>
       </Col>
   );
 }

src/utils/parser.ts

@@ -86,7 +86,7 @@ export function processRegisterBlock(paragraph: string, registers: Register[]) {
       if(line.includes('Issue 4 Only')) reg.issue_4_only = true;
 
       const trimmedLine = line.trim();
-      reg.source.push(trimmedLine);
+      reg.source.push(line);
 
       if (trimmedLine.startsWith('//')) continue;