add legal modal and link to personal web

Author: pythonicode

src/App.css

@@ -231,6 +231,12 @@
   color: var(--accent);
 }
 
+.topbar-menu-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
 .topbar-menu-section h3 {
   font-size: 11px;
   text-transform: uppercase;
@@ -2125,6 +2131,74 @@
   text-transform: capitalize;
 }
 
+.statusbar-legal {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.statusbar-legal-link {
+  padding: 0;
+  font: inherit;
+  font-size: 11px;
+  color: var(--text);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+a.statusbar-legal-link {
+  text-decoration: underline;
+}
+
+.statusbar-legal-link:hover {
+  color: var(--text-h);
+}
+
+.statusbar-legal-sep {
+  color: var(--border);
+  font-size: 11px;
+  user-select: none;
+}
+
+.modal-legal {
+  max-width: 560px;
+  max-height: min(80vh, 720px);
+}
+
+.legal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  font: 13px/1.5 var(--sans);
+  color: var(--text);
+}
+
+.legal-updated {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text);
+  opacity: 0.8;
+}
+
+.legal-section h3 {
+  margin: 0 0 6px;
+  font-size: 14px;
+  color: var(--text-h);
+}
+
+.legal-section p {
+  margin: 0 0 8px;
+}
+
+.legal-section p:last-child {
+  margin-bottom: 0;
+}
+
 .statusbar-zoom-controls {
   display: inline-flex;
   gap: 4px;

src/components/LegalModal.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from 'react'
+import { X } from 'lucide-react'
+import { LEGAL_DOCUMENTS, type LegalDocumentId } from '../content/legal'
+import Portal from './Portal'
+
+export default function LegalModal({
+  documentId,
+  onClose,
+}: {
+  documentId: LegalDocumentId
+  onClose: () => void
+}) {
+  const doc = LEGAL_DOCUMENTS[documentId]
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [onClose])
+
+  return (
+    <Portal>
+      <div className="modal-backdrop" onClick={onClose}>
+        <div
+          className="modal modal-legal"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="legal-modal-title"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="modal-header">
+            <h2 id="legal-modal-title">{doc.title}</h2>
+            <button
+              type="button"
+              className="modal-close"
+              aria-label="Close"
+              onClick={onClose}
+            >
+              <X size={16} aria-hidden />
+            </button>
+          </div>
+          <div className="modal-body legal-body">
+            <p className="legal-updated">Last updated: {doc.updated}</p>
+            {doc.sections.map((section) => (
+              <section key={section.heading} className="legal-section">
+                <h3>{section.heading}</h3>
+                {section.paragraphs.map((paragraph, index) => (
+                  <p key={index}>{paragraph}</p>
+                ))}
+              </section>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Portal>
+  )
+}

src/components/StatusBar.tsx

@@ -1,8 +1,11 @@
+import { useState } from 'react'
 import { Minus, Plus } from 'lucide-react'
 import { getToolLabel } from '../config/tools'
+import type { LegalDocumentId } from '../content/legal'
 import type { LayoutMode } from '../hooks/useLayoutMode'
 import { useAppStore } from '../store'
 import CanvasRotationControl from './CanvasRotationControl'
+import LegalModal from './LegalModal'
 
 const MIN_SCALE = 0.05
 const MAX_SCALE = 8
@@ -17,10 +20,13 @@ export default function StatusBar({
   const viewport = useAppStore((s) => s.viewport)
   const setViewport = useAppStore((s) => s.setViewport)
   const pointer = useAppStore((s) => s.pointer)
+  const [legalDoc, setLegalDoc] = useState<LegalDocumentId | null>(null)
 
   const showCoords = layoutMode === 'desktop'
   const showZoomButtons = layoutMode === 'touch'
   const showRotation = layoutMode !== 'touch'
+  const showLegalLinks = layoutMode !== 'touch'
+  const showCredit = layoutMode === 'desktop'
 
   const zoomBy = (direction: 1 | -1) => {
     const oldScale = viewport.scale
@@ -68,6 +74,45 @@ export default function StatusBar({
         </span>
       )}
       <span className="statusbar-tool">Tool: {getToolLabel(activeTool)}</span>
+      {showLegalLinks && (
+        <nav className="statusbar-legal" aria-label="Legal">
+          <button
+            type="button"
+            className="statusbar-legal-link"
+            onClick={() => setLegalDoc('privacy')}
+          >
+            Privacy
+          </button>
+          <span className="statusbar-legal-sep" aria-hidden>
+            ·
+          </span>
+          <button
+            type="button"
+            className="statusbar-legal-link"
+            onClick={() => setLegalDoc('terms')}
+          >
+            Terms
+          </button>
+           {showCredit && (
+            <>
+            <span className="statusbar-legal-sep" aria-hidden>
+                ·
+              </span>
+              <a
+                className="statusbar-legal-link statusbar-credit"
+                href="https://anthonyriley.org"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                by Anthony Riley ❤️
+              </a>
+            </>
+          )}
+        </nav>
+      )}
+      {legalDoc && (
+        <LegalModal documentId={legalDoc} onClose={() => setLegalDoc(null)} />
+      )}
     </footer>
   )
 }

src/components/TopBarMenu.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import {
   Download,
   FilePlus,
+  FileText,
   FolderOpen,
   HardDriveDownload,
   Image,
@@ -10,9 +11,12 @@ import {
   RefreshCw,
   Route,
   Save,
+  Shield,
 } from 'lucide-react'
+import type { LegalDocumentId } from '../content/legal'
 import type { LayoutMode } from '../hooks/useLayoutMode'
 import BottomSheet from './BottomSheet'
+import LegalModal from './LegalModal'
 
 export interface TopBarMenuAction {
   id: string
@@ -32,10 +36,41 @@ export default function TopBarMenu({
   actions: TopBarMenuAction[]
 }) {
   const [open, setOpen] = useState(false)
+  const [legalDoc, setLegalDoc] = useState<LegalDocumentId | null>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
   const visibleActions = actions.filter((a) => !a.hidden)
 
+  const openLegal = (id: LegalDocumentId) => {
+    setOpen(false)
+    setLegalDoc(id)
+  }
+
+  const legalMenuItems = (
+    <ul className="topbar-menu-list">
+      <li>
+        <button
+          type="button"
+          className="topbar-menu-item"
+          onClick={() => openLegal('privacy')}
+        >
+          <Shield size={16} aria-hidden />
+          <span>Privacy Policy</span>
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          className="topbar-menu-item"
+          onClick={() => openLegal('terms')}
+        >
+          <FileText size={16} aria-hidden />
+          <span>Terms of Service</span>
+        </button>
+      </li>
+    </ul>
+  )
+
   useEffect(() => {
     if (!open || layoutMode !== 'compact') return
     const onPointerDown = (e: PointerEvent) => {
@@ -90,9 +125,16 @@ export default function TopBarMenu({
                 <h3>File</h3>
                 {menuItems}
               </div>
+              <div className="topbar-menu-section">
+                <h3>Legal</h3>
+                {legalMenuItems}
+              </div>
             </div>
           </BottomSheet>
         )}
+        {legalDoc && (
+          <LegalModal documentId={legalDoc} onClose={() => setLegalDoc(null)} />
+        )}
       </>
     )
   }