From f676fb2ff5051b2bc9c91a2c2e302cc76f530d69 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 14 Feb 2026 18:58:02 +0000 Subject: [PATCH] [security] replace innerHTML in RevertModal.js Migrated `js/ui/components/RevertModal.js` to safe DOM APIs (`createElement`, `textContent`, `DOMParser`). Extracted rendering logic to `js/ui/components/revertModalRenderers.js`. Updated baseline in `scripts/check-innerhtml.mjs` (0 remaining usages). Updated tests to mock DOMParser. Co-authored-by: PR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> --- context/CONTEXT_2026-02-14_17-35-00.md | 6 + decisions/DECISIONS_2026-02-14_17-35-00.md | 30 + ...-00_innerhtml-migration-agent_completed.md | 30 + js/ui/components/RevertModal.js | 1086 +++++++---------- js/ui/components/revertModalRenderers.js | 439 +++++++ scripts/check-innerhtml.mjs | 1 - test_logs/TEST_LOG_2026-02-14_17-35-00.md | 16 + tests/modal-accessibility.test.mjs | 2 + todo/TODO_2026-02-14_17-35-00.md | 12 + 9 files changed, 1001 insertions(+), 621 deletions(-) create mode 100644 context/CONTEXT_2026-02-14_17-35-00.md create mode 100644 decisions/DECISIONS_2026-02-14_17-35-00.md create mode 100644 docs/agents/task-logs/daily/2026-02-14_17-35-00_innerhtml-migration-agent_completed.md create mode 100644 js/ui/components/revertModalRenderers.js create mode 100644 test_logs/TEST_LOG_2026-02-14_17-35-00.md create mode 100644 todo/TODO_2026-02-14_17-35-00.md diff --git a/context/CONTEXT_2026-02-14_17-35-00.md b/context/CONTEXT_2026-02-14_17-35-00.md new file mode 100644 index 00000000..b848580a --- /dev/null +++ b/context/CONTEXT_2026-02-14_17-35-00.md @@ -0,0 +1,6 @@ +# Context + +* **File:** `js/ui/components/RevertModal.js` +* **Reason:** Highest innerHTML usage count (10) in the daily report. +* **Date:** 2026-02-14 +* **Plan:** Migrate `innerHTML` assignments to `document.createElement`, `textContent`, and safe DOM manipulation. diff --git a/decisions/DECISIONS_2026-02-14_17-35-00.md b/decisions/DECISIONS_2026-02-14_17-35-00.md new file mode 100644 index 00000000..c45bae63 --- /dev/null +++ b/decisions/DECISIONS_2026-02-14_17-35-00.md @@ -0,0 +1,30 @@ +# Decisions - RevertModal innerHTML Migration + +## Context +`js/ui/components/RevertModal.js` had 10 assignments to `innerHTML`, making it a high-priority target for migration to safe DOM APIs. The file builds complex UI structures for revision history, including metadata, tags, and media variants. + +## Strategies + +### 1. DOM Construction +Replaced template strings with `document.createElement`. +- Created helper methods (`createPlaceholder`, `createListEmpty`, `createLinkMarkup`) to standardize element creation. +- Used `DocumentFragment` where appropriate to minimize reflows, though direct appending to parent was used for simplicity in linear structures. + +### 2. Complex Renderers Extraction +The file size of `RevertModal.js` grew significantly (from ~1660 lines to ~1900 lines) due to the verbosity of DOM API vs template strings. +- **Decision:** Extracted complex rendering logic (IMeta variants, tracks, segments, participants, etc.) into a new module: `js/ui/components/revertModalRenderers.js`. +- This reduced the main file size and kept it compliant with linting rules. +- Dependencies (`createPlaceholder`, etc.) are passed to these renderers via a `utils` object to avoid tight coupling or circular dependencies. + +### 3. Initialization +- Replaced `wrapper.innerHTML = html` in `load()` with `DOMParser`. +- Replaced `this.details.innerHTML = this.detailsDefaultHTML` in `reset()` with `DOMParser`. +- While `detailsDefaultHTML` is trusted (sourced from static template), using `DOMParser` ensures 0 usages of `innerHTML` in the file. + +### 4. Tests +- Updated `tests/modal-accessibility.test.mjs` to mock `DOMParser` in the Node.js test environment (JSDOM). + +## Results +- `innerHTML` count for `RevertModal.js`: 0 (removed from baseline). +- File size violation resolved by extraction. +- Functionality preserved (verified via unit tests). diff --git a/docs/agents/task-logs/daily/2026-02-14_17-35-00_innerhtml-migration-agent_completed.md b/docs/agents/task-logs/daily/2026-02-14_17-35-00_innerhtml-migration-agent_completed.md new file mode 100644 index 00000000..0539c61b --- /dev/null +++ b/docs/agents/task-logs/daily/2026-02-14_17-35-00_innerhtml-migration-agent_completed.md @@ -0,0 +1,30 @@ +# Agent Completion Log + +**Agent:** `innerhtml-migration-agent` +**Date:** 2026-02-14 +**Cadence:** Daily + +## Task Summary +Migrated `js/ui/components/RevertModal.js` from `innerHTML` to safe DOM APIs. This file had the highest usage (10 assignments). + +## Actions Taken +1. **Refactoring:** + * Replaced all `innerHTML` assignments with `document.createElement`, `textContent`, and `replaceChildren`. + * Switched `load()` and `reset()` logic to use `DOMParser` for safe parsing of trusted templates. + * Extracted complex rendering logic (NIP-71 media metadata, variants, tracks) to a new module `js/ui/components/revertModalRenderers.js` to manage file size complexity. + +2. **Verification:** + * Updated `tests/modal-accessibility.test.mjs` to mock `DOMParser` in the test environment. + * Ran `npm run lint` and `npm run test:unit` successfully. + * Verified `innerHTML` usage for the file dropped to 0. + +3. **Baseline Update:** + * Updated `scripts/check-innerhtml.mjs` to remove `RevertModal.js` from the tracking list. + +## Artifacts +* `js/ui/components/RevertModal.js` +* `js/ui/components/revertModalRenderers.js` +* `scripts/check-innerhtml.mjs` +* `tests/modal-accessibility.test.mjs` +* `decisions/DECISIONS_2026-02-14_17-35-00.md` +* `test_logs/TEST_LOG_2026-02-14_17-35-00.md` diff --git a/js/ui/components/RevertModal.js b/js/ui/components/RevertModal.js index 3223b999..3e2d4ab0 100644 --- a/js/ui/components/RevertModal.js +++ b/js/ui/components/RevertModal.js @@ -1,5 +1,13 @@ import { Nip71FormManager } from "./nip71FormManager.js"; import { createModalAccessibility } from "./modalAccessibility.js"; +import { + createImetaVariants, + createTextTracks, + createSegments, + createHashtags, + createParticipants, + createReferences, +} from "./revertModalRenderers.js"; // NOTE: Any metadata field added to the Upload or Edit modals must also be // rendered inside the Revert modal to keep the experiences aligned. @@ -99,7 +107,12 @@ export class RevertModal { } const wrapper = document.createElement("div"); - wrapper.innerHTML = html; + const parser = new DOMParser(); + const doc = parser.parseFromString(html, "text/html"); + while (doc.body.firstChild) { + wrapper.appendChild(doc.body.firstChild); + } + if (typeof this.removeTrackingScripts === "function") { this.removeTrackingScripts(wrapper); } @@ -195,15 +208,18 @@ export class RevertModal { } if (this.list) { - this.list.innerHTML = ""; + this.list.replaceChildren(); } if (this.details) { + this.details.replaceChildren(); if (this.detailsDefaultHTML) { - this.details.innerHTML = this.detailsDefaultHTML; + const parser = new DOMParser(); + const doc = parser.parseFromString(this.detailsDefaultHTML, "text/html"); + while (doc.body.firstChild) { + this.details.appendChild(doc.body.firstChild); + } this.placeholder = this.details.querySelector("#revertVersionPlaceholder"); - } else { - this.details.innerHTML = ""; } } @@ -381,11 +397,13 @@ export class RevertModal { const selectedId = this.selectedRevision?.id || ""; const currentId = this.activeVideo?.id || ""; - this.list.innerHTML = ""; + this.list.replaceChildren(); if (!this.revisions.length) { - this.list.innerHTML = - '

No revisions found.

'; + const p = document.createElement("p"); + p.className = "text-xs text-subtle"; + p.textContent = "No revisions found."; + this.list.appendChild(p); return; } @@ -481,22 +499,37 @@ export class RevertModal { ? "text-status-danger-on" : "text-muted"; - const escape = (value) => - this.escapeHTML ? this.escapeHTML(String(value ?? "")) : String(value ?? ""); + const container = document.createElement("div"); + container.className = "flex items-start justify-between gap-3"; - button.innerHTML = ` -
-
-

${escape(entry.title || "Untitled")}

-

${escape(relative)} • ${escape(absolute)}

- ${meta ? `

${escape(meta)}

` : ""} -
-
- ${escape(versionLabel)} -
-
- `; + const leftCol = document.createElement("div"); + leftCol.className = "space-y-1"; + const titleP = document.createElement("p"); + titleP.className = "font-semibold"; + titleP.textContent = entry.title || "Untitled"; + leftCol.appendChild(titleP); + + const timeP = document.createElement("p"); + timeP.className = "text-xs text-subtle"; + timeP.textContent = `${relative} • ${absolute}`; + leftCol.appendChild(timeP); + + if (meta) { + const metaP = document.createElement("p"); + metaP.className = `text-xs ${metaClass}`; + metaP.textContent = meta; + leftCol.appendChild(metaP); + } + + container.appendChild(leftCol); + + const rightCol = document.createElement("div"); + rightCol.className = "text-xs uppercase tracking-wide text-muted"; + rightCol.textContent = versionLabel; + container.appendChild(rightCol); + + button.appendChild(container); fragment.appendChild(button); }); @@ -541,12 +574,16 @@ export class RevertModal { return; } + this.details.replaceChildren(); + if (!version) { if (this.detailsDefaultHTML) { - this.details.innerHTML = this.detailsDefaultHTML; + const parser = new DOMParser(); + const doc = parser.parseFromString(this.detailsDefaultHTML, "text/html"); + while (doc.body.firstChild) { + this.details.appendChild(doc.body.firstChild); + } this.placeholder = this.details.querySelector("#revertVersionPlaceholder"); - } else { - this.details.innerHTML = ""; } return; } @@ -569,364 +606,457 @@ export class RevertModal { const isPrivate = version.isPrivate === true; const dTagValue = this.extractDTagValue(version.tags); - const escape = this.getEscapeFn(); const nip71Metadata = this.buildNip71DisplayMetadata(version); - const fallbackThumbnail = escape(this.fallbackThumbnailSrc); - const thumbnailSrc = thumbnail ? escape(thumbnail) : fallbackThumbnail; + const fallbackThumbnail = this.fallbackThumbnailSrc; + const thumbnailSrc = thumbnail || fallbackThumbnail; const thumbnailAlt = thumbnail ? "Revision thumbnail" : "Fallback thumbnail"; - let urlHtml = this.renderPlaceholder("None"); - if (url) { - urlHtml = this.buildLinkMarkup(url); - } + const urlNode = url ? this.createLinkMarkup(url) : this.createPlaceholder("None"); - let magnetHtml = this.renderPlaceholder("None"); - if (displayMagnet) { - const labelRaw = this.truncateMiddle - ? this.truncateMiddle(displayMagnet, 72) - : displayMagnet; - const label = escape(labelRaw); - const caption = isPrivate - ? 'Magnet stays visible only to you — private notes keep the raw string local.' - : ""; - magnetHtml = `
${label}${caption}
`; - } + const magnetNode = displayMagnet + ? (() => { + const div = document.createElement("div"); + div.className = "break-all"; + const label = this.truncateMiddle + ? this.truncateMiddle(displayMagnet, 72) + : displayMagnet; + div.textContent = label; + if (isPrivate) { + const span = document.createElement("span"); + span.className = "block mt-1 text-xs text-status-private-on"; + span.textContent = "Magnet stays visible only to you — private notes keep the raw string local."; + div.appendChild(span); + } + return div; + })() + : this.createPlaceholder("None"); + + const chipsDiv = document.createElement("div"); + chipsDiv.className = "flex flex-wrap gap-2"; - const chips = []; const nsfwFlag = version.isNsfw === true; const forKidsFlag = version.isForKids === true; const conflictingAudienceFlags = nsfwFlag && forKidsFlag; + if (version.deleted) { - chips.push( - 'Marked deleted' - ); + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "critical"; + s.textContent = "Marked deleted"; + chipsDiv.appendChild(s); } if (isPrivate) { - chips.push( - 'Private' - ); + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "private"; + s.textContent = "Private"; + chipsDiv.appendChild(s); } if (conflictingAudienceFlags) { - chips.push( - 'NSFW + For kids conflict' - ); + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "warning"; + s.textContent = "NSFW + For kids conflict"; + chipsDiv.appendChild(s); } else { if (nsfwFlag) { - chips.push( - 'Marked NSFW' - ); + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "critical"; + s.textContent = "Marked NSFW"; + chipsDiv.appendChild(s); } if (forKidsFlag) { - chips.push( - 'For kids' - ); + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "success"; + s.textContent = "For kids"; + chipsDiv.appendChild(s); } } if (version.version !== undefined) { - chips.push( - `Schema v${escape( - String(version.version) - )}` - ); + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "neutral"; + s.textContent = `Schema v${version.version}`; + chipsDiv.appendChild(s); } - const renderFlagStatus = (value, { - yesLabel = "Yes", - noLabel = "No", - unspecifiedLabel = "Not specified", - } = {}) => { + const createFlagStatus = (value, {yes, no, unspecified}) => { if (value === true) { - return `${escape(yesLabel)}`; + const s = document.createElement("span"); + s.className = "text-primary"; + s.textContent = yes; + return s; } if (value === false) { - return `${escape(noLabel)}`; + const s = document.createElement("span"); + s.className = "text-primary"; + s.textContent = no; + return s; } - return this.renderPlaceholder(unspecifiedLabel); + return this.createPlaceholder(unspecified); }; - const nsfwStatusHtml = renderFlagStatus(version.isNsfw, { - yesLabel: "Yes — marked NSFW", - noLabel: "No — not flagged as NSFW", - unspecifiedLabel: "Not specified", + const nsfwStatusNode = createFlagStatus(version.isNsfw, { + yes: "Yes — marked NSFW", + no: "No — not flagged as NSFW", + unspecified: "Not specified", }); - const kidsStatusHtml = renderFlagStatus(version.isForKids, { - yesLabel: "Yes — marked for kids", - noLabel: "No — not marked for kids", - unspecifiedLabel: "Not specified", + const kidsStatusNode = createFlagStatus(version.isForKids, { + yes: "Yes — marked for kids", + no: "No — not marked for kids", + unspecified: "Not specified", }); const audienceConflictNotice = conflictingAudienceFlags - ? '

Conflicting flags detected — this revision is marked both NSFW and for kids. Review before reverting.

' - : ""; + ? (() => { + const p = document.createElement("p"); + p.className = "text-xs text-status-warning-on"; + p.textContent = "Conflicting flags detected — this revision is marked both NSFW and for kids. Review before reverting."; + return p; + })() + : null; - const descriptionHtml = description - ? `

${escape(description)}

` - : '

No description provided.

'; + const descriptionNode = description + ? (() => { + const p = document.createElement("p"); + p.className = "whitespace-pre-wrap text-primary"; + p.textContent = description; + return p; + })() + : (() => { + const p = document.createElement("p"); + p.className = "text-subtle"; + p.textContent = "No description provided."; + return p; + })(); - const rootId = - typeof version.videoRootId === "string" ? version.videoRootId : ""; + const rootId = typeof version.videoRootId === "string" ? version.videoRootId : ""; const rootDisplay = rootId ? this.truncateMiddle - ? escape(this.truncateMiddle(rootId, 64)) - : escape(rootId) + ? this.truncateMiddle(rootId, 64) + : rootId : ""; const eventDisplay = version.id ? this.truncateMiddle - ? escape(this.truncateMiddle(version.id, 64)) - : escape(version.id) + ? this.truncateMiddle(version.id, 64) + : version.id : ""; - const timestampParts = []; - if (absolute) { - timestampParts.push(escape(absolute)); - } - if (relative) { - timestampParts.push(`(${escape(relative)})`); - } - const timestampHtml = timestampParts.length - ? timestampParts.join(" ") - : escape(absolute || relative || ""); + const timestampText = [absolute, relative ? `(${relative})` : ""] + .filter(Boolean) + .join(" "); - const formatTimestamp = (seconds, raw) => { + const createTimestampNode = (seconds, raw) => { if (Number.isFinite(seconds)) { - const absoluteLabel = this.formatAbsoluteTimestamp - ? this.formatAbsoluteTimestamp(seconds) - : `${seconds}`; - const relativeLabel = this.formatTimeAgo - ? this.formatTimeAgo(seconds) - : ""; - const parts = []; - if (absoluteLabel) { - parts.push(`${escape(absoluteLabel)}`); + const abs = this.formatAbsoluteTimestamp ? this.formatAbsoluteTimestamp(seconds) : `${seconds}`; + const rel = this.formatTimeAgo ? this.formatTimeAgo(seconds) : ""; + const frag = document.createDocumentFragment(); + if (abs) { + const s = document.createElement("span"); + s.className = "text-primary"; + s.textContent = abs; + frag.appendChild(s); + frag.appendChild(document.createTextNode(" ")); } - if (relativeLabel) { - parts.push(`(${escape(relativeLabel)})`); - } - if (parts.length) { - return parts.join(" "); + if (rel) { + const s = document.createElement("span"); + s.className = "text-muted"; + s.textContent = `(${rel})`; + frag.appendChild(s); } + return frag; } if (raw) { - return `${escape(raw)}`; + const s = document.createElement("span"); + s.className = "text-primary"; + s.textContent = raw; + return s; } - return this.renderPlaceholder(); + return this.createPlaceholder(); }; - const formatDuration = (seconds, raw) => { - if (Number.isFinite(seconds)) { - const display = this.formatDurationSeconds(seconds); - const suffix = seconds === 1 ? "second" : "seconds"; - return `${escape(display)} (${escape( - `${seconds} ${suffix}` - )})`; - } - if (raw) { - return `${escape(raw)}`; - } - return this.renderPlaceholder(); + const createDurationNode = (seconds, raw) => { + if (Number.isFinite(seconds)) { + const display = this.formatDurationSeconds(seconds); + const suffix = seconds === 1 ? "second" : "seconds"; + const frag = document.createDocumentFragment(); + const s1 = document.createElement("span"); + s1.className = "text-primary"; + s1.textContent = display; + frag.appendChild(s1); + frag.appendChild(document.createTextNode(" ")); + const s2 = document.createElement("span"); + s2.className = "text-subtle"; + s2.textContent = `(${seconds} ${suffix})`; + frag.appendChild(s2); + return frag; + } + if (raw) { + const s = document.createElement("span"); + s.className = "text-primary"; + s.textContent = raw; + return s; + } + return this.createPlaceholder(); }; const kindValue = nip71Metadata.kind; - let kindHtml = this.renderPlaceholder(); - if (kindValue !== "" && kindValue !== null && kindValue !== undefined) { - const label = typeof kindValue === "number" ? kindValue : `${kindValue}`; - const numeric = Number(label); - let suffix = ""; - if (Number.isFinite(numeric)) { - if (numeric === 22) { - suffix = "short"; - } else if (numeric === 21) { - suffix = "video"; + const kindNode = (() => { + if (kindValue !== "" && kindValue !== null && kindValue !== undefined) { + const label = typeof kindValue === "number" ? kindValue : `${kindValue}`; + const numeric = Number(label); + let suffix = ""; + if (Number.isFinite(numeric)) { + if (numeric === 22) suffix = "short"; + else if (numeric === 21) suffix = "video"; } - } - const badge = `kind ${escape( - label - )}`; - kindHtml = suffix - ? `${badge} (${escape(suffix)})` - : badge; - } - const summaryHtml = nip71Metadata.summary - ? `

${escape( - nip71Metadata.summary - )}

` - : this.renderPlaceholder("Not provided"); - const contentWarningHtml = nip71Metadata.contentWarning - ? `${escape( - nip71Metadata.contentWarning - )}` - : this.renderPlaceholder("Not provided"); - const publishedAtHtml = formatTimestamp( + const frag = document.createDocumentFragment(); + const code = document.createElement("code"); + code.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + code.textContent = `kind ${label}`; + frag.appendChild(code); + + if (suffix) { + frag.appendChild(document.createTextNode(" ")); + const s = document.createElement("span"); + s.className = "text-muted"; + s.textContent = `(${suffix})`; + frag.appendChild(s); + } + return frag; + } + return this.createPlaceholder(); + })(); + + const summaryNode = nip71Metadata.summary + ? (() => { + const p = document.createElement("p"); + p.className = "whitespace-pre-wrap text-primary"; + p.textContent = nip71Metadata.summary; + return p; + })() + : this.createPlaceholder("Not provided"); + + const contentWarningNode = nip71Metadata.contentWarning + ? (() => { + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "warning"; + s.textContent = nip71Metadata.contentWarning; + return s; + })() + : this.createPlaceholder("Not provided"); + + const publishedAtNode = createTimestampNode( nip71Metadata.publishedAtSeconds, nip71Metadata.publishedAtRaw ); - const durationHtml = formatDuration( + const durationNode = createDurationNode( nip71Metadata.durationSeconds, nip71Metadata.durationRaw ); - const altHtml = nip71Metadata.alt - ? `

${escape(nip71Metadata.alt)}

` - : this.renderPlaceholder("Not provided"); + const altNode = nip71Metadata.alt + ? (() => { + const p = document.createElement("p"); + p.className = "whitespace-pre-wrap text-primary"; + p.textContent = nip71Metadata.alt; + return p; + })() + : this.createPlaceholder("Not provided"); - const definition = (label, valueHtml, { span = 1 } = {}) => { - const colSpan = span > 1 ? "sm:col-span-2" : ""; - return ` -
-
${escape(label)}
-
${valueHtml}
-
- `; + const createSection = (title) => { + const s = document.createElement("section"); + s.className = "space-y-2"; + const h = document.createElement("h4"); + h.className = "text-sm font-semibold text-primary"; + h.textContent = title; + s.appendChild(h); + return s; }; - const eventMetadataRows = [ - definition("NIP-71 kind", kindHtml), - definition("Summary", summaryHtml, { span: 2 }), - definition("Content warning", contentWarningHtml, { span: 2 }), - definition("Published timestamp", publishedAtHtml), - definition("Duration", durationHtml), - definition("Alt text", altHtml, { span: 2 }), - ].join(""); + const createDl = () => { + const dl = document.createElement("dl"); + dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle"; + return dl; + }; - const audienceRows = [ - definition("NSFW flag", nsfwStatusHtml), - definition("For kids flag", kidsStatusHtml), - ].join(""); + const createDtDd = (label, contentNode, colSpan = 1) => { + const div = document.createElement("div"); + if (colSpan > 1) div.className = "sm:col-span-2"; - this.details.innerHTML = ` -
-
-
- ${escape(thumbnailAlt)} -
-
-
-

${escape( - version.title || "Untitled" - )}

-

${timestampHtml}

-
- ${ - chips.length - ? `
${chips.join("")}
` - : "" - } -
-
-
Hosted URL
-
${urlHtml}
-
-
-
Magnet
-
${magnetHtml}
-
-
-
-
+ const dt = document.createElement("dt"); + dt.className = "font-semibold text-primary"; + dt.textContent = label; + div.appendChild(dt); -
-

Description

- ${descriptionHtml} -
+ const dd = document.createElement("dd"); + dd.className = "mt-1"; + dd.appendChild(contentNode); + div.appendChild(dd); + return div; + }; -
-

Audience flags

-
- ${audienceRows} -
- ${audienceConflictNotice} -
+ const wrapper = document.createElement("div"); + wrapper.className = "space-y-6"; -
-

NIP-71 event metadata

-
- ${eventMetadataRows} -
-
+ // Header Area + const headerRow = document.createElement("div"); + headerRow.className = "flex flex-col gap-4 lg:flex-row lg:items-start"; -
-

Note pointers

-
-
-
Mode
-
${escape(version.mode || "live")}
-
-
-
d tag
-
- ${ - dTagValue - ? `${escape( - dTagValue - )}` - : 'Not provided' - } -
-
-
-
videoRootId
-
- ${ - rootDisplay - ? `${rootDisplay}` - : 'Not provided' - } -
-
-
-
Event ID
-
- ${ - eventDisplay - ? `${eventDisplay}` - : 'Unknown' - } -
-
-
-
+ const imgDiv = document.createElement("div"); + imgDiv.className = "overflow-hidden rounded-md border border-overlay bg-overlay-strong w-full max-w-sm"; + const img = document.createElement("img"); + img.src = thumbnailSrc; + img.alt = thumbnailAlt; + img.className = "w-full h-auto object-cover"; + img.loading = "lazy"; + imgDiv.appendChild(img); + headerRow.appendChild(imgDiv); -
-

NIP-71 media metadata

-
-
-
Media variants (imeta)
- ${this.renderImetaVariants(nip71Metadata.imeta)} -
-
-
Caption tracks
- ${this.renderTextTracks(nip71Metadata.textTracks)} -
-
-
Chapters
- ${this.renderSegments(nip71Metadata.segments)} -
-
-
Hashtags
- ${this.renderHashtags(nip71Metadata.hashtags)} -
-
-
Participants
- ${this.renderParticipants(nip71Metadata.participants)} -
-
-
References
- ${this.renderReferences(nip71Metadata.references)} -
-
-
-
- `; + const headerContent = document.createElement("div"); + headerContent.className = "flex-1 space-y-3"; + + const titleTimeDiv = document.createElement("div"); + titleTimeDiv.className = "space-y-1"; + const titleH3 = document.createElement("h3"); + titleH3.className = "text-lg font-semibold text-primary"; + titleH3.textContent = version.title || "Untitled"; + titleTimeDiv.appendChild(titleH3); + const timeP = document.createElement("p"); + timeP.className = "text-xs text-muted"; + timeP.textContent = timestampText; + titleTimeDiv.appendChild(timeP); + headerContent.appendChild(titleTimeDiv); + + if (chipsDiv.hasChildNodes()) { + headerContent.appendChild(chipsDiv); + } + + const headerDl = createDl(); + headerDl.appendChild(createDtDd("Hosted URL", urlNode)); + headerDl.appendChild(createDtDd("Magnet", magnetNode)); + headerContent.appendChild(headerDl); + + headerRow.appendChild(headerContent); + wrapper.appendChild(headerRow); + + // Description + const descSection = createSection("Description"); + descSection.appendChild(descriptionNode); + wrapper.appendChild(descSection); + + // Audience Flags + const audSection = createSection("Audience flags"); + const audDl = createDl(); + audDl.appendChild(createDtDd("NSFW flag", nsfwStatusNode)); + audDl.appendChild(createDtDd("For kids flag", kidsStatusNode)); + audSection.appendChild(audDl); + if (audienceConflictNotice) audSection.appendChild(audienceConflictNotice); + wrapper.appendChild(audSection); + + // NIP-71 event metadata + const eventSection = createSection("NIP-71 event metadata"); + const eventDl = createDl(); + eventDl.appendChild(createDtDd("NIP-71 kind", kindNode)); + eventDl.appendChild(createDtDd("Summary", summaryNode, 2)); + eventDl.appendChild(createDtDd("Content warning", contentWarningNode, 2)); + eventDl.appendChild(createDtDd("Published timestamp", publishedAtNode)); + eventDl.appendChild(createDtDd("Duration", durationNode)); + eventDl.appendChild(createDtDd("Alt text", altNode, 2)); + eventSection.appendChild(eventDl); + wrapper.appendChild(eventSection); + + // Note pointers + const ptrSection = createSection("Note pointers"); + const ptrDl = createDl(); + ptrDl.appendChild(createDtDd("Mode", document.createTextNode(version.mode || "live"))); + + const dTagNode = dTagValue + ? (() => { + const c = document.createElement("code"); + c.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.textContent = dTagValue; + return c; + })() + : this.createPlaceholder("Not provided"); + ptrDl.appendChild(createDtDd("d tag", dTagNode)); + + const rootIdNode = rootDisplay + ? (() => { + const c = document.createElement("code"); + c.className = "break-all rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.title = rootId; + c.textContent = rootDisplay; + return c; + })() + : this.createPlaceholder("Not provided"); + ptrDl.appendChild(createDtDd("videoRootId", rootIdNode)); + + const eventIdNode = eventDisplay + ? (() => { + const c = document.createElement("code"); + c.className = "break-all rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.title = version.id || ""; + c.textContent = eventDisplay; + return c; + })() + : (() => { + const s = document.createElement("span"); + s.className = "text-subtle"; + s.textContent = "Unknown"; + return s; + })(); + ptrDl.appendChild(createDtDd("Event ID", eventIdNode)); + + ptrSection.appendChild(ptrDl); + wrapper.appendChild(ptrSection); + + // NIP-71 media metadata + const mediaSection = createSection("NIP-71 media metadata"); + const mediaDiv = document.createElement("div"); + mediaDiv.className = "space-y-4"; + + const createMediaSub = (label, contentNode) => { + const d = document.createElement("div"); + d.className = "space-y-2"; + const h = document.createElement("h5"); + h.className = "text-xs font-semibold uppercase tracking-wide text-muted"; + h.textContent = label; + d.appendChild(h); + d.appendChild(contentNode); + return d; + }; + + const renderUtils = { + createListEmpty: (t) => this.createListEmpty(t), + createPlaceholder: (t) => this.createPlaceholder(t), + createLinkMarkup: (v, o) => this.createLinkMarkup(v, o), + formatDurationSeconds: (s) => this.formatDurationSeconds(s), + truncateMiddle: this.truncateMiddle, + }; + + mediaDiv.appendChild(createMediaSub("Media variants (imeta)", createImetaVariants(nip71Metadata.imeta, renderUtils))); + mediaDiv.appendChild(createMediaSub("Caption tracks", createTextTracks(nip71Metadata.textTracks, renderUtils))); + mediaDiv.appendChild(createMediaSub("Chapters", createSegments(nip71Metadata.segments, renderUtils))); + mediaDiv.appendChild(createMediaSub("Hashtags", createHashtags(nip71Metadata.hashtags, renderUtils))); + mediaDiv.appendChild(createMediaSub("Participants", createParticipants(nip71Metadata.participants, renderUtils))); + mediaDiv.appendChild(createMediaSub("References", createReferences(nip71Metadata.references, renderUtils))); + + mediaSection.appendChild(mediaDiv); + wrapper.appendChild(mediaSection); + + this.details.appendChild(wrapper); } updateConfirmationState() { @@ -1121,39 +1251,49 @@ export class RevertModal { this.escapeHTML ? this.escapeHTML(String(value ?? "")) : String(value ?? ""); } - renderPlaceholder(text = "Not provided") { - const escape = this.getEscapeFn(); - return `${escape(text)}`; + createPlaceholder(text = "Not provided") { + const span = document.createElement("span"); + span.className = "text-subtle"; + span.textContent = text; + return span; } - renderListEmpty(text) { - const escape = this.getEscapeFn(); - return `

${escape(text)}

`; + createListEmpty(text) { + const p = document.createElement("p"); + p.className = "text-xs text-subtle"; + p.textContent = text; + return p; } - buildLinkMarkup(value, { breakAll = true } = {}) { + createLinkMarkup(value, { breakAll = true } = {}) { if (value == null) { - return ""; + return document.createTextNode(""); } - const escape = this.getEscapeFn(); const raw = typeof value === "string" ? value.trim() : String(value ?? "").trim(); if (!raw) { - return ""; + return document.createTextNode(""); } const displayRaw = this.truncateMiddle ? this.truncateMiddle(raw, 96) : raw; - const safeDisplay = escape(displayRaw); - const safeValue = escape(raw); - const breakClass = breakAll ? " break-all" : " break-words"; + const breakClass = breakAll ? "break-all" : "break-words"; if (/^https?:/i.test(raw)) { - return `${safeDisplay}`; + const a = document.createElement("a"); + a.href = raw; + a.target = "_blank"; + a.rel = "noopener noreferrer"; + a.className = `text-info hover:text-info-strong ${breakClass}`; + a.textContent = displayRaw; + return a; } - return `${safeDisplay}`; + const code = document.createElement("code"); + code.className = `rounded bg-overlay-panel-soft px-1.5 py-0.5 text-[0.75rem] text-primary ${breakClass}`; + code.textContent = displayRaw; + return code; } formatDurationSeconds(seconds) { @@ -1349,300 +1489,6 @@ export class RevertModal { }; } - renderImetaVariants(variants) { - if (!Array.isArray(variants) || variants.length === 0) { - return this.renderListEmpty("No media variants provided."); - } - - const escape = this.getEscapeFn(); - - return `
    ${variants - .map((variant, index) => { - if (!variant) { - return ""; - } - - const badges = []; - if (variant.autoGenerated) { - badges.push( - 'Auto-generated' - ); - } - - const variantNumber = `Variant ${index + 1}`; - - const mimeHtml = variant.m - ? `${escape( - variant.m - )}` - : this.renderPlaceholder(); - const dimHtml = variant.dim - ? `${escape( - variant.dim - )}` - : this.renderPlaceholder(); - const urlHtml = variant.url - ? this.buildLinkMarkup(variant.url) - : this.renderPlaceholder("No URL"); - const hashHtml = variant.x - ? `${escape( - variant.x - )}` - : this.renderPlaceholder("Not provided"); - - const renderNestedList = (label, values, emptyLabel) => { - if (!Array.isArray(values) || values.length === 0) { - return `

    ${escape( - label - )}

    ${this.renderListEmpty(emptyLabel)}
    `; - } - - const items = values - .map((entry) => this.buildLinkMarkup(entry)) - .filter(Boolean) - .map((markup) => `
  1. ${markup}
    2. `); - - if (!items.length) { - return `

    ${escape( - label - )}

    ${this.renderListEmpty(emptyLabel)}
    `; - } - - return ` -
    -

    ${escape( - label - )}

    - -
    - `; - }; - - const nestedSections = [ - renderNestedList("Images", variant.image, "No image URLs."), - renderNestedList("Fallbacks", variant.fallback, "No fallback URLs."), - renderNestedList("Services", variant.service, "No service hints."), - ].join(""); - - return ` -
  2. -
    - ${escape(variantNumber)} - ${badges.length ? `
    ${badges.join("")}
    ` : ""} -
    -
    -
    -
    MIME type
    -
    ${mimeHtml}
    -
    -
    -
    Dimensions
    -
    ${dimHtml}
    -
    -
    -
    URL
    -
    ${urlHtml}
    -
    -
    -
    Content hash
    -
    ${hashHtml}
    -
    -
    -
    - ${nestedSections} -
    -
    3. - `; - }) - .join("")}
`; - } - - renderTextTracks(tracks) { - if (!Array.isArray(tracks) || tracks.length === 0) { - return this.renderListEmpty("No caption tracks."); - } - - const escape = this.getEscapeFn(); - - return `
    ${tracks - .map((track, index) => { - const headerLabel = `Track ${index + 1}`; - const urlHtml = track.url - ? this.buildLinkMarkup(track.url) - : this.renderPlaceholder("No URL"); - const typeHtml = track.type - ? `${escape( - track.type - )}` - : this.renderPlaceholder(); - const languageHtml = track.language - ? `${escape( - track.language - )}` - : this.renderPlaceholder(); - - return ` -
  1. -
    - ${escape(headerLabel)} - ${track.language ? languageHtml : ""} -
    -
    -
    -
    URL
    -
    ${urlHtml}
    -
    -
    -
    Type
    -
    ${typeHtml}
    -
    -
    -
    Language
    -
    ${track.language ? languageHtml : this.renderPlaceholder()}
    -
    -
    -
    2. - `; - }) - .join("")}
`; - } - - renderSegments(segments) { - if (!Array.isArray(segments) || segments.length === 0) { - return this.renderListEmpty("No chapter segments."); - } - - const escape = this.getEscapeFn(); - - const formatTime = (seconds, raw) => { - if (Number.isFinite(seconds)) { - const display = this.formatDurationSeconds(seconds); - const suffix = seconds === 1 ? "second" : "seconds"; - return `${escape(display)} (${escape( - `${seconds} ${suffix}` - )})`; - } - if (raw) { - return `${escape(raw)}`; - } - return this.renderPlaceholder(); - }; - - return `
    ${segments - .map((segment, index) => { - const headerLabel = `Chapter ${index + 1}`; - const startHtml = formatTime(segment.startSeconds, segment.startRaw); - const endHtml = formatTime(segment.endSeconds, segment.endRaw); - const titleHtml = segment.title - ? `

    ${escape(segment.title)}

    ` - : this.renderPlaceholder("No title"); - const thumbnailHtml = segment.thumbnail - ? this.buildLinkMarkup(segment.thumbnail) - : this.renderPlaceholder("No thumbnail"); - - return ` -
  1. -
    ${escape(headerLabel)}
    -
    -
    -
    Start
    -
    ${startHtml}
    -
    -
    -
    End
    -
    ${endHtml}
    -
    -
    -
    Title
    -
    ${titleHtml}
    -
    -
    -
    Thumbnail
    -
    ${thumbnailHtml}
    -
    -
    -
    2. - `; - }) - .join("")}
`; - } - - renderHashtags(hashtags) { - if (!Array.isArray(hashtags) || hashtags.length === 0) { - return this.renderListEmpty("No hashtags provided."); - } - - const escape = this.getEscapeFn(); - - const chips = hashtags.map((tag) => { - const label = tag.startsWith("#") ? tag : `#${tag}`; - return `${escape( - label - )}`; - }); - - return `
${chips.join("")}
`; - } - - renderParticipants(participants) { - if (!Array.isArray(participants) || participants.length === 0) { - return this.renderListEmpty("No participants listed."); - } - - const escape = this.getEscapeFn(); - - return `
    ${participants - .map((participant, index) => { - const label = `Participant ${index + 1}`; - const displayPubkey = participant.pubkey - ? this.truncateMiddle - ? this.truncateMiddle(participant.pubkey, 48) - : participant.pubkey - : ""; - const pubkeyHtml = participant.pubkey - ? `${escape(displayPubkey)}` - : this.renderPlaceholder("No pubkey"); - const relayHtml = participant.relay - ? this.buildLinkMarkup(participant.relay, { breakAll: false }) - : this.renderPlaceholder("No relay specified"); - - return ` -
  1. -
    ${escape(label)}
    -
    -
    -
    Pubkey
    -
    ${pubkeyHtml}
    -
    -
    -
    Relay
    -
    ${relayHtml}
    -
    -
    -
    2. - `; - }) - .join("")}
`; - } - - renderReferences(references) { - if (!Array.isArray(references) || references.length === 0) { - return this.renderListEmpty("No external references."); - } - - const items = references - .map((entry) => this.buildLinkMarkup(entry)) - .filter(Boolean) - .map((markup) => `
  • ${markup}
    • `); - - if (!items.length) { - return this.renderListEmpty("No external references."); - } - - return ``; - } extractDTagValue(tags) { if (!Array.isArray(tags)) { diff --git a/js/ui/components/revertModalRenderers.js b/js/ui/components/revertModalRenderers.js new file mode 100644 index 00000000..1f8bd553 --- /dev/null +++ b/js/ui/components/revertModalRenderers.js @@ -0,0 +1,439 @@ +export function createImetaVariants(variants, utils) { + const { createListEmpty, createPlaceholder, createLinkMarkup } = utils; + + if (!Array.isArray(variants) || variants.length === 0) { + return createListEmpty("No media variants provided."); + } + + const ol = document.createElement("ol"); + ol.className = "space-y-3"; + + variants.forEach((variant, index) => { + if (!variant) return; + + const li = document.createElement("li"); + li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-3"; + + // Header + const headerDiv = document.createElement("div"); + headerDiv.className = "flex flex-wrap items-center justify-between gap-2 text-xs text-muted"; + + const variantLabel = document.createElement("span"); + variantLabel.className = "font-semibold text-primary"; + variantLabel.textContent = `Variant ${index + 1}`; + headerDiv.appendChild(variantLabel); + + if (variant.autoGenerated) { + const badgesDiv = document.createElement("div"); + badgesDiv.className = "flex flex-wrap gap-2"; + const badge = document.createElement("span"); + badge.className = "badge"; + badge.dataset.variant = "warning"; + badge.textContent = "Auto-generated"; + badgesDiv.appendChild(badge); + headerDiv.appendChild(badgesDiv); + } + li.appendChild(headerDiv); + + // DL Grid + const dl = document.createElement("dl"); + dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle"; + + const createDtDd = (label, contentNode, colSpan = false) => { + const div = document.createElement("div"); + if (colSpan) div.className = "sm:col-span-2"; + + const dt = document.createElement("dt"); + dt.className = "font-semibold text-primary"; + dt.textContent = label; + div.appendChild(dt); + + const dd = document.createElement("dd"); + dd.className = "mt-1"; + dd.appendChild(contentNode); + div.appendChild(dd); + + return div; + }; + + // Mime + const mimeNode = variant.m + ? (() => { + const c = document.createElement("code"); + c.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.textContent = variant.m; + return c; + })() + : createPlaceholder(); + dl.appendChild(createDtDd("MIME type", mimeNode)); + + // Dim + const dimNode = variant.dim + ? (() => { + const c = document.createElement("code"); + c.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.textContent = variant.dim; + return c; + })() + : createPlaceholder(); + dl.appendChild(createDtDd("Dimensions", dimNode)); + + // URL + const urlNode = variant.url + ? createLinkMarkup(variant.url) + : createPlaceholder("No URL"); + dl.appendChild(createDtDd("URL", urlNode, true)); + + // Hash + const hashNode = variant.x + ? (() => { + const c = document.createElement("code"); + c.className = "break-all rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.textContent = variant.x; + return c; + })() + : createPlaceholder("Not provided"); + dl.appendChild(createDtDd("Content hash", hashNode, true)); + + li.appendChild(dl); + + // Nested lists + const nestedGrid = document.createElement("div"); + nestedGrid.className = "grid gap-3 sm:grid-cols-3 text-xs text-subtle"; + + const createNestedList = (label, values, emptyLabel) => { + const container = document.createElement("div"); + + const p = document.createElement("p"); + p.className = "text-2xs uppercase tracking-wide text-subtle"; + p.textContent = label; + container.appendChild(p); + + if (!Array.isArray(values) || values.length === 0) { + container.appendChild(createListEmpty(emptyLabel)); + return container; + } + + const validItems = values + .map(v => createLinkMarkup(v)) + .filter(node => node.textContent !== ""); + + if (validItems.length === 0) { + container.appendChild(createListEmpty(emptyLabel)); + return container; + } + + const ul = document.createElement("ul"); + ul.className = "mt-1 space-y-1 text-xs text-primary"; + validItems.forEach(itemNode => { + const itemLi = document.createElement("li"); + itemLi.appendChild(itemNode); + ul.appendChild(itemLi); + }); + container.appendChild(ul); + return container; + }; + + nestedGrid.appendChild(createNestedList("Images", variant.image, "No image URLs.")); + nestedGrid.appendChild(createNestedList("Fallbacks", variant.fallback, "No fallback URLs.")); + nestedGrid.appendChild(createNestedList("Services", variant.service, "No service hints.")); + + li.appendChild(nestedGrid); + ol.appendChild(li); + }); + + return ol; +} + +export function createTextTracks(tracks, utils) { + const { createListEmpty, createPlaceholder, createLinkMarkup } = utils; + + if (!Array.isArray(tracks) || tracks.length === 0) { + return createListEmpty("No caption tracks."); + } + + const ol = document.createElement("ol"); + ol.className = "space-y-3"; + + tracks.forEach((track, index) => { + const li = document.createElement("li"); + li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-3"; + + const headerDiv = document.createElement("div"); + headerDiv.className = "flex items-center justify-between text-xs text-muted"; + + const label = document.createElement("span"); + label.className = "font-semibold text-primary"; + label.textContent = `Track ${index + 1}`; + headerDiv.appendChild(label); + + if (track.language) { + const langSpan = document.createElement("span"); + langSpan.className = "pill"; + langSpan.dataset.size = "compact"; + langSpan.dataset.variant = "neutral"; + langSpan.textContent = track.language; + headerDiv.appendChild(langSpan); + } + li.appendChild(headerDiv); + + const dl = document.createElement("dl"); + dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle"; + + const createDtDd = (label, contentNode, colSpan = false) => { + const div = document.createElement("div"); + if (colSpan) div.className = "sm:col-span-2"; + + const dt = document.createElement("dt"); + dt.className = "font-semibold text-primary"; + dt.textContent = label; + div.appendChild(dt); + + const dd = document.createElement("dd"); + dd.className = "mt-1"; + dd.appendChild(contentNode); + div.appendChild(dd); + return div; + }; + + const urlNode = track.url + ? createLinkMarkup(track.url) + : createPlaceholder("No URL"); + dl.appendChild(createDtDd("URL", urlNode, true)); + + const typeNode = track.type + ? (() => { + const c = document.createElement("code"); + c.className = "rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.textContent = track.type; + return c; + })() + : createPlaceholder(); + dl.appendChild(createDtDd("Type", typeNode)); + + const langNode = track.language + ? (() => { + const s = document.createElement("span"); + s.className = "pill"; + s.dataset.size = "compact"; + s.dataset.variant = "neutral"; + s.textContent = track.language; + return s; + })() + : createPlaceholder(); + dl.appendChild(createDtDd("Language", langNode)); + + li.appendChild(dl); + ol.appendChild(li); + }); + + return ol; +} + +export function createSegments(segments, utils) { + const { createListEmpty, createPlaceholder, createLinkMarkup, formatDurationSeconds } = utils; + + if (!Array.isArray(segments) || segments.length === 0) { + return createListEmpty("No chapter segments."); + } + + const ol = document.createElement("ol"); + ol.className = "space-y-3"; + + const createTimeNode = (seconds, raw) => { + if (Number.isFinite(seconds)) { + const display = formatDurationSeconds(seconds); + const suffix = seconds === 1 ? "second" : "seconds"; + const frag = document.createDocumentFragment(); + const span1 = document.createElement("span"); + span1.className = "text-primary"; + span1.textContent = display; + frag.appendChild(span1); + + const space = document.createTextNode(" "); + frag.appendChild(space); + + const span2 = document.createElement("span"); + span2.className = "text-subtle"; + span2.textContent = `(${seconds} ${suffix})`; + frag.appendChild(span2); + return frag; + } + if (raw) { + const span = document.createElement("span"); + span.className = "text-primary"; + span.textContent = raw; + return span; + } + return createPlaceholder(); + }; + + segments.forEach((segment, index) => { + const li = document.createElement("li"); + li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-3"; + + const headerDiv = document.createElement("div"); + headerDiv.className = "text-xs font-semibold text-primary"; + headerDiv.textContent = `Chapter ${index + 1}`; + li.appendChild(headerDiv); + + const dl = document.createElement("dl"); + dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle"; + + const createDtDd = (label, contentNode, colSpan = false) => { + const div = document.createElement("div"); + if (colSpan) div.className = "sm:col-span-2"; + + const dt = document.createElement("dt"); + dt.className = "font-semibold text-primary"; + dt.textContent = label; + div.appendChild(dt); + + const dd = document.createElement("dd"); + dd.className = "mt-1"; + dd.appendChild(contentNode); + div.appendChild(dd); + return div; + }; + + dl.appendChild(createDtDd("Start", createTimeNode(segment.startSeconds, segment.startRaw))); + dl.appendChild(createDtDd("End", createTimeNode(segment.endSeconds, segment.endRaw))); + + const titleNode = segment.title + ? (() => { + const p = document.createElement("p"); + p.className = "whitespace-pre-wrap text-primary"; + p.textContent = segment.title; + return p; + })() + : createPlaceholder("No title"); + dl.appendChild(createDtDd("Title", titleNode, true)); + + const thumbNode = segment.thumbnail + ? createLinkMarkup(segment.thumbnail) + : createPlaceholder("No thumbnail"); + dl.appendChild(createDtDd("Thumbnail", thumbNode, true)); + + li.appendChild(dl); + ol.appendChild(li); + }); + + return ol; +} + +export function createHashtags(hashtags, utils) { + const { createListEmpty } = utils; + + if (!Array.isArray(hashtags) || hashtags.length === 0) { + return createListEmpty("No hashtags provided."); + } + + const div = document.createElement("div"); + div.className = "flex flex-wrap gap-2"; + + hashtags.forEach(tag => { + const label = tag.startsWith("#") ? tag : `#${tag}`; + const span = document.createElement("span"); + span.className = "pill"; + span.dataset.size = "compact"; + span.dataset.variant = "neutral"; + span.textContent = label; + div.appendChild(span); + }); + + return div; +} + +export function createParticipants(participants, utils) { + const { createListEmpty, createPlaceholder, createLinkMarkup, truncateMiddle } = utils; + + if (!Array.isArray(participants) || participants.length === 0) { + return createListEmpty("No participants listed."); + } + + const ol = document.createElement("ol"); + ol.className = "space-y-3"; + + participants.forEach((participant, index) => { + const li = document.createElement("li"); + li.className = "rounded-md border border-overlay bg-overlay-muted p-3 space-y-2"; + + const headerDiv = document.createElement("div"); + headerDiv.className = "text-xs font-semibold text-primary"; + headerDiv.textContent = `Participant ${index + 1}`; + li.appendChild(headerDiv); + + const dl = document.createElement("dl"); + dl.className = "grid gap-3 sm:grid-cols-2 text-xs text-subtle"; + + const createDtDd = (label, contentNode, colSpan = false) => { + const div = document.createElement("div"); + if (colSpan) div.className = "sm:col-span-2"; + + const dt = document.createElement("dt"); + dt.className = "font-semibold text-primary"; + dt.textContent = label; + div.appendChild(dt); + + const dd = document.createElement("dd"); + dd.className = "mt-1"; + dd.appendChild(contentNode); + div.appendChild(dd); + return div; + }; + + const displayPubkey = participant.pubkey + ? truncateMiddle + ? truncateMiddle(participant.pubkey, 48) + : participant.pubkey + : ""; + + const pubkeyNode = participant.pubkey + ? (() => { + const c = document.createElement("code"); + c.className = "break-all rounded bg-overlay-panel-soft px-1.5 py-0.5 text-primary"; + c.title = participant.pubkey; + c.textContent = displayPubkey; + return c; + })() + : createPlaceholder("No pubkey"); + dl.appendChild(createDtDd("Pubkey", pubkeyNode, true)); + + const relayNode = participant.relay + ? createLinkMarkup(participant.relay, { breakAll: false }) + : createPlaceholder("No relay specified"); + dl.appendChild(createDtDd("Relay", relayNode, true)); + + li.appendChild(dl); + ol.appendChild(li); + }); + + return ol; +} + +export function createReferences(references, utils) { + const { createListEmpty, createLinkMarkup } = utils; + + if (!Array.isArray(references) || references.length === 0) { + return createListEmpty("No external references."); + } + + const items = references + .map((entry) => createLinkMarkup(entry)) + .filter(node => node.textContent !== ""); + + if (items.length === 0) { + return createListEmpty("No external references."); + } + + const ul = document.createElement("ul"); + ul.className = "space-y-1 text-xs text-primary"; + + items.forEach(node => { + const li = document.createElement("li"); + li.appendChild(node); + ul.appendChild(li); + }); + + return ul; +} diff --git a/scripts/check-innerhtml.mjs b/scripts/check-innerhtml.mjs index 97bdf9a4..50fbd749 100644 --- a/scripts/check-innerhtml.mjs +++ b/scripts/check-innerhtml.mjs @@ -35,7 +35,6 @@ const BASELINE = { "js/ui/components/EmbedVideoModal.js": 1, "js/ui/components/EventDetailsModal.js": 1, "js/ui/components/nip71FormManager.js": 1, - "js/ui/components/RevertModal.js": 10, "js/ui/components/ShareNostrModal.js": 3, "js/ui/components/UploadModal.js": 1, "js/ui/components/VideoModal.js": 1, diff --git a/test_logs/TEST_LOG_2026-02-14_17-35-00.md b/test_logs/TEST_LOG_2026-02-14_17-35-00.md new file mode 100644 index 00000000..243d1e29 --- /dev/null +++ b/test_logs/TEST_LOG_2026-02-14_17-35-00.md @@ -0,0 +1,16 @@ +# Test Log + +* **Initial State:** + * File selected: `js/ui/components/RevertModal.js` + * `innerHTML` count: 10 + +* **Verification:** + * `npm run lint`: Passed (file size check passed after extraction). + * `npm run test:unit`: Passed (fixed `DOMParser` reference error). + * `node scripts/check-innerhtml.mjs --report`: `RevertModal.js` absent (count 0). + +* **Artifacts:** + * `js/ui/components/RevertModal.js` (Modified) + * `js/ui/components/revertModalRenderers.js` (Created) + * `scripts/check-innerhtml.mjs` (Updated baseline) + * `tests/modal-accessibility.test.mjs` (Updated test harness) diff --git a/tests/modal-accessibility.test.mjs b/tests/modal-accessibility.test.mjs index d48e1ade..0bda2179 100644 --- a/tests/modal-accessibility.test.mjs +++ b/tests/modal-accessibility.test.mjs @@ -38,6 +38,7 @@ function installDom(html) { globalThis.CustomEvent = window.CustomEvent; globalThis.Event = window.Event; globalThis.Node = window.Node; + globalThis.DOMParser = window.DOMParser; Object.defineProperty(globalThis, "navigator", { value: window.navigator, writable: true, @@ -64,6 +65,7 @@ function installDom(html) { delete globalThis.CustomEvent; delete globalThis.Event; delete globalThis.Node; + delete globalThis.DOMParser; delete globalThis.navigator; delete globalThis.location; delete globalThis.KeyboardEvent; diff --git a/todo/TODO_2026-02-14_17-35-00.md b/todo/TODO_2026-02-14_17-35-00.md new file mode 100644 index 00000000..7516a3bf --- /dev/null +++ b/todo/TODO_2026-02-14_17-35-00.md @@ -0,0 +1,12 @@ +# Todo + +* [ ] `wrapper.innerHTML = html;` (load method) +* [ ] `this.list.innerHTML = "";` (reset method) +* [ ] `this.details.innerHTML = this.detailsDefaultHTML;` (reset method) +* [ ] `this.details.innerHTML = "";` (reset method) +* [ ] `this.list.innerHTML = "";` (renderRevertVersionsList method) +* [ ] `this.list.innerHTML = ...;` (renderRevertVersionsList method - "No revisions found") +* [ ] `button.innerHTML = ...;` (renderRevertVersionsList method - main loop) +* [ ] `this.details.innerHTML = this.detailsDefaultHTML;` (renderRevertVersionDetails method) +* [ ] `this.details.innerHTML = "";` (renderRevertVersionDetails method) +* [ ] `this.details.innerHTML = ...;` (renderRevertVersionDetails method - main template)