refactor: add typed frontend exhibit registry

src/exhibitRegistry.tsx

@@ -0,0 +1,90 @@
+import type { ComponentType } from 'react'
+import { BookOpen, FileText, Folder, FolderOpen, Image as ImageIcon, Pencil } from 'lucide-react'
+import type { CaseDocument, Evidence, EvidenceType, SourceFileType } from './types'
+import { folderIsOpen } from './boardDomain'
+
+export type ExhibitWidgetProps = {
+  exhibit: Evidence
+  documents: CaseDocument[]
+  onOpenSource: (id: string) => void
+  onToggleFolder: (id: string) => void
+  onEditFolder: (id: string) => void
+}
+
+export type ExhibitWidgetDefinition = {
+  visualType: Exclude<EvidenceType, 'evidence'>
+  heading: (exhibit: Evidence, documents: CaseDocument[]) => string
+  connectionPoint: (exhibit: Evidence) => { x: number; y: number }
+  Component: ComponentType<ExhibitWidgetProps>
+}
+
+function FolderWidget({ exhibit, documents, onOpenSource, onToggleFolder, onEditFolder }: ExhibitWidgetProps) {
+  return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
+    {!folderIsOpen(exhibit) && <div className="folder-documents">{documents.slice(0, 3).map(document => <button key={document.id} onClick={() => onOpenSource(document.id)} title={document.title}><FileText size={12}/><span>{document.title}</span>{(document.publishedAt || document.date) && <time>{(document.publishedAt || document.date).slice(0, 10)}</time>}</button>)}{documents.length > 3 && <small>+ {documents.length - 3} MORE FILES</small>}</div>}
+    <div className="folder-actions"><button onClick={() => onToggleFolder(exhibit.id)}>{folderIsOpen(exhibit) ? <Folder size={12}/> : <FolderOpen size={12}/>} {folderIsOpen(exhibit) ? 'CLOSE' : 'OPEN'}</button><button onClick={() => onEditFolder(exhibit.id)}><Pencil size={12}/> EDIT</button></div>
+  </div>
+}
+
+function StandardWidget({ exhibit, onOpenSource }: ExhibitWidgetProps) {
+  return <div className="card-content"><h3>{exhibit.title}</h3><p>{exhibit.content}</p>
+    {exhibit.eventDate && <time>{exhibit.eventDate.replaceAll('-', ' / ')}</time>}
+    {exhibit.sourceDocumentId && <button onClick={() => onOpenSource(exhibit.sourceDocumentId!)}><BookOpen size={13}/> VIEW SOURCE</button>}
+  </div>
+}
+
+const standardPoint = (exhibit: Evidence) => ({ x: exhibit.x + exhibit.width / 2, y: exhibit.y + 68 })
+const folderDefinition: ExhibitWidgetDefinition = {
+  visualType: 'folder', heading: (_exhibit, documents) => `EVIDENCE FOLDER / ${documents.length}`,
+  connectionPoint: standardPoint, Component: FolderWidget,
+}
+
+export const exhibitWidgetRegistry: Record<EvidenceType, ExhibitWidgetDefinition> = {
+  folder: folderDefinition,
+  evidence: folderDefinition,
+  note: { visualType: 'note', heading: () => 'INVESTIGATOR / NOTE', connectionPoint: exhibit => ({ x: exhibit.x + 54, y: exhibit.y + 12 }), Component: StandardWidget },
+  event: { visualType: 'event', heading: () => 'EVENT / THIS HAPPENED', connectionPoint: standardPoint, Component: StandardWidget },
+}
+
+export function exhibitWidget(type: EvidenceType) {
+  return exhibitWidgetRegistry[type] || exhibitWidgetRegistry.note
+}
+
+type DocumentWidgetProps = { document: CaseDocument; source: string }
+export type DocumentWidgetDefinition = {
+  label: string
+  Preview: ComponentType<DocumentWidgetProps>
+  Asset: ComponentType<DocumentWidgetProps>
+}
+
+function ImagePreview({ document, source }: DocumentWidgetProps) {
+  return document.assetId ? <img draggable={false} src={source} alt=""/> : <GenericPreview document={document} source={source}/>
+}
+function GenericPreview({ document }: DocumentWidgetProps) {
+  return <div><ImageIcon size={35}/><small>{document.kind}</small></div>
+}
+function ImageAsset({ document, source }: DocumentWidgetProps) {
+  return <img className="document-image" src={source} alt={document.fileName || document.title}/>
+}
+function FrameAsset({ document, source }: DocumentWidgetProps) {
+  return <iframe className="document-frame" src={source} title={document.fileName || document.title} sandbox="allow-same-origin"/>
+}
+function GenericAsset({ document, source }: DocumentWidgetProps) {
+  return <div className="unsupported-file"><FileText size={42}/><b>{document.fileName || document.title}</b><span>{document.mimeType || 'Unknown file type'} · {document.fileSize ? `${Math.ceil(document.fileSize / 1024)} KB` : ''}</span><a href={source} download={document.fileName}>DOWNLOAD ORIGINAL</a></div>
+}
+
+const genericDocument = (label: string): DocumentWidgetDefinition => ({ label, Preview: GenericPreview, Asset: GenericAsset })
+export const documentWidgetRegistry: Record<SourceFileType, DocumentWidgetDefinition> = {
+  image: { label: 'Image', Preview: ImagePreview, Asset: ImageAsset },
+  pdf: { label: 'PDF', Preview: GenericPreview, Asset: FrameAsset },
+  text: { label: 'Text document', Preview: GenericPreview, Asset: FrameAsset },
+  web_capture: genericDocument('Web capture'),
+  email: genericDocument('Email'),
+  article: genericDocument('Article'),
+  filing: genericDocument('Company filing'),
+  price_list: genericDocument('Price list'),
+  file: genericDocument('Generic file'),
+}
+
+export function documentWidget(type: SourceFileType) {
+  return documentWidgetRegistry[type] || documentWidgetRegistry.file
+}