\n \n \n \n

\n        \n          {entries.map((entry) => {\n            if (entry.kind === \"line\") {\n              return (\n                \n                  {entry.line.length > 0 ? entry.line : \"\\u00a0\"}\n                \n              );\n            }\n\n            const hiddenCount = entry.hiddenLines.length;\n            const expanded = Boolean(expandedFolds[entry.id]);\n            return (\n              \n                 onToggleFold(entry.id)}\n                  aria-expanded={expanded}\n                >\n                  {expanded\n                    ? `Hide ${hiddenCount} unchanged lines`\n                    : `Show ${hiddenCount} unchanged lines`}\n                \n                {expanded\n                  ? entry.hiddenLines.map((line, lineIndex) => (\n                    \n                      {line.length > 0 ? line : \"\\u00a0\"}\n                    \n                  ))\n                  : null}\n              \n            );\n          })}\n        \n

\n );\n}\n\nasync function copyTextToClipboard(text: string): Promise {\n if (navigator.clipboard?.writeText) {\n await navigator.clipboard.writeText(text);\n return;\n }\n\n const temp = document.createElement(\"textarea\");\n temp.value = text;\n temp.setAttribute(\"readonly\", \"true\");\n temp.style.position = \"fixed\";\n temp.style.left = \"-9999px\";\n temp.style.top = \"0\";\n document.body.appendChild(temp);\n temp.select();\n const ok = document.execCommand(\"copy\");\n document.body.removeChild(temp);\n if (!ok) {\n throw new Error(\"Clipboard copy failed\");\n }\n}\n\nfunction ClipboardIcon() {\n return (\n \n \n \n \n );\n}\n\ninterface SnapshotMetadataRow {\n id: string;\n label: string;\n displayValue: string;\n copyEnabled: boolean;\n copyValue: string | null;\n}\n\nfunction SnapshotMetadataCard(\n { label, snapshot }: { label: string; snapshot: UrlSnapshotMetadata | null },\n) {\n if (!snapshot) {\n return (\n

{label}

No snapshot available.

\n );\n }\n\n const rows: SnapshotMetadataRow[] = [\n {\n id: \"captured\",\n label: \"Captured\",\n displayValue: formatTimestamp(snapshot.capturedAt),\n copyEnabled: true,\n copyValue: snapshot.capturedAt,\n },\n {\n id: \"sitemap-lastmod\",\n label: \"Sitemap lastmod\",\n displayValue: formatTimestamp(snapshot.sitemapLastmod),\n copyEnabled: true,\n copyValue: snapshot.sitemapLastmod,\n },\n {\n id: \"prior-submitted-lastmod\",\n label: \"Prior submitted lastmod\",\n displayValue: formatTimestamp(snapshot.previousSubmittedLastmod),\n copyEnabled: true,\n copyValue: snapshot.previousSubmittedLastmod,\n },\n {\n id: \"etag\",\n label: \"ETag\",\n displayValue: truncateEtagForDisplay(snapshot.etag),\n copyEnabled: true,\n copyValue: snapshot.etag,\n },\n {\n id: \"sha\",\n label: \"SHA-256\",\n displayValue: truncateShaForDisplay(snapshot.htmlSha256),\n copyEnabled: true,\n copyValue: snapshot.htmlSha256,\n },\n {\n id: \"content-type\",\n label: \"Content-Type\",\n displayValue: snapshotValue(snapshot.contentType),\n copyEnabled: false,\n copyValue: snapshot.contentType,\n },\n {\n id: \"size\",\n label: \"Size\",\n displayValue: formatBytes(snapshot.htmlSizeBytes),\n copyEnabled: false,\n copyValue: snapshot.htmlSizeBytes === null ? null : String(snapshot.htmlSizeBytes),\n },\n ];\n\n const onCopyRow = (value: string | null) => {\n if (!value) {\n return;\n }\n void copyTextToClipboard(value);\n };\n\n return (\n

{label}

{row.label}: {row.displayValue}

\n );\n}\n\nexport function DiffDrawer(props: DiffDrawerProps) {\n const {\n isOpen,\n selectedSiteHost,\n selectedRunId,\n selectedDiffUrl,\n selectedRunDiff,\n tables,\n onClose,\n } = props;\n\n const [mounted, setMounted] = useState(isOpen);\n const [phase, setPhase] = useState<\"open\" | \"closing\">(isOpen ? \"open\" : \"closing\");\n const [copyState, setCopyState] = useState<\"idle\" | \"copied\" | \"error\">(\"idle\");\n const [expandedFolds, setExpandedFolds] = useState>({});\n const [viewState, setViewState] = useState<{\n selectedSiteHost: string | null;\n selectedRunId: number | null;\n selectedDiffUrl: string | null;\n selectedRunDiff: SelectedRunDiff | null;\n tables: MonitorTables;\n }>(() => ({\n selectedSiteHost,\n selectedRunId,\n selectedDiffUrl,\n selectedRunDiff,\n tables,\n }));\n\n useEffect(() => {\n if (isOpen) {\n setViewState({\n selectedSiteHost,\n selectedRunId,\n selectedDiffUrl,\n selectedRunDiff,\n tables,\n });\n setMounted(true);\n setPhase(\"open\");\n return;\n }\n if (mounted) {\n setPhase(\"closing\");\n }\n }, [isOpen, mounted, selectedSiteHost, selectedRunId, selectedDiffUrl, selectedRunDiff, tables]);\n\n useEffect(() => {\n if (phase !== \"closing\") {\n return;\n }\n const timeoutId = window.setTimeout(() => {\n setMounted(false);\n }, 340);\n return () => {\n window.clearTimeout(timeoutId);\n };\n }, [phase]);\n\n useEffect(() => {\n if (copyState === \"idle\") {\n return;\n }\n const timeoutId = window.setTimeout(() => {\n setCopyState(\"idle\");\n }, 1400);\n return () => {\n window.clearTimeout(timeoutId);\n };\n }, [copyState]);\n\n const activeTables = phase === \"open\" ? tables : viewState.tables;\n const activeSelectedRunDiff = phase === \"open\" ? selectedRunDiff : viewState.selectedRunDiff;\n const activeSelectedRunId = phase === \"open\" ? selectedRunId : viewState.selectedRunId;\n const activeSelectedDiffUrl = phase === \"open\" ? selectedDiffUrl : viewState.selectedDiffUrl;\n const copyableDiff = activeSelectedRunDiff?.unifiedDiff ?? null;\n const canCopyDiff = Boolean(copyableDiff);\n const copyTitle = !canCopyDiff\n ? \"No diff available to copy\"\n : copyState === \"copied\"\n ? \"Copied\"\n : copyState === \"error\"\n ? \"Copy failed\"\n : \"Copy diff\";\n const diffEntries = useMemo(() => (copyableDiff ? toDiffEntries(copyableDiff) : []), [copyableDiff]);\n\n const onCopyDiff = useCallback(async () => {\n if (!copyableDiff) {\n return;\n }\n try {\n await copyTextToClipboard(copyableDiff);\n setCopyState(\"copied\");\n } catch {\n setCopyState(\"error\");\n }\n }, [copyableDiff]);\n\n const onToggleFold = useCallback((foldId: string) => {\n setExpandedFolds((previous) => ({\n ...previous,\n [foldId]: !previous[foldId],\n }));\n }, []);\n\n useEffect(() => {\n setExpandedFolds({});\n setCopyState(\"idle\");\n }, [activeSelectedRunId, activeSelectedDiffUrl, copyableDiff]);\n\n const drawerDiffUrl = activeSelectedRunDiff?.url ?? activeSelectedDiffUrl ?? \"—\";\n const drawerRunId = activeSelectedRunId ?? \"—\";\n\n if (!mounted) {\n return null;\n }\n\n let body: JSX.Element;\n\n if (!activeTables.urlSnapshots) {\n body = (\n

\n Snapshot table is not available yet. Run /run once to initialize it.\n

\n );\n } else if (!activeSelectedRunDiff) {\n body = (\n

No diff data found for this URL in the selected run.

\n );\n } else {\n body = (\n <>\n

\n \n \n

\n {activeSelectedRunDiff.unifiedDiff\n ? renderHighlightedDiff(\n diffEntries,\n expandedFolds,\n onToggleFold,\n {\n copyState,\n canCopyDiff,\n copyTitle,\n onCopyDiff: () => void onCopyDiff(),\n },\n )\n : (\n

Diff will show here when there are two snapshots to compare.

\n )}\n \n );\n }\n\n const onDrawerAnimationEnd = (event: AnimationEvent) => {\n if (event.target !== event.currentTarget) {\n return;\n }\n if (phase === \"closing\") {\n setMounted(false);\n }\n };\n\n return (\n

\n \n \n

Raw HTML Diff

\n {drawerDiffUrl} (run ID: {drawerRunId})\n

\n \n

{body}

\n \n

\n );\n}\n","deleted","label",[177,178,158],"frontend","components","permalink","https://www.val.town/x/ashryanio/index-now/code/frontend/components/DiffDrawer.tsx","extension","actionData","errors"]