benstull/vscode-cowriting-plugin
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

F10 SLICE-3: webview on/off switch + ✓/✗ click→postMessage + proposal CSS (#29)

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ben Stull
2026-06-12 00:20:00 -07:00
parent f8b36c3452
commit 28c5e9d334
2 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
media/preview.ts
+30 -23
View File
@@ -14,11 +14,10 @@ declare function acquireVsCodeApi(): { postMessage(m: unknown): void };
interface RenderMessage {
type: "render";
mode: "changes" | "authorship";
mode: "on" | "off";
html: string;
epoch?: string;
summary?: { added: number; removed: number; changed: number };
legend?: { claude: boolean; human: boolean };
summary?: { added: number; removed: number; proposals: number };
}
const vscodeApi = acquireVsCodeApi();
@@ -26,13 +25,24 @@ const body = document.getElementById("cw-body")!;
const header = document.getElementById("cw-epoch")!;
const summary = document.getElementById("cw-summary")!;
const legend = document.getElementById("cw-legend")!;
const segs = Array.from(document.querySelectorAll<HTMLButtonElement>(".cw-seg"));
const annotationsEl = document.getElementById("cw-annotations") as HTMLInputElement | null;
for (const seg of segs) {
seg.addEventListener("click", () => {
vscodeApi.postMessage({ type: "setMode", mode: seg.dataset.mode });
});
}
// F10: the annotations on/off toggle.
annotationsEl?.addEventListener("change", () => {
vscodeApi.postMessage({ type: "setMode", mode: annotationsEl.checked ? "on" : "off" });
});
// F10: delegated ✓/✗ accept/reject of pending proposals (routed back to the F4 seam).
body.addEventListener("click", (e) => {
const btn = (e.target as HTMLElement)?.closest<HTMLElement>(".cw-actions button");
if (!btn) return;
const block = btn.closest<HTMLElement>(".cw-proposal");
const id = block?.dataset.proposalId;
const action = btn.dataset.action;
if (id && (action === "accept" || action === "reject")) {
vscodeApi.postMessage({ type: action, proposalId: id });
}
});
function themeFor(): "dark" | "default" {
return document.body.classList.contains("vscode-dark") ||
@@ -59,21 +69,18 @@ window.addEventListener("message", (event: MessageEvent<RenderMessage>) => {
const msg = event.data;
if (msg?.type !== "render") return;
body.innerHTML = msg.html;
for (const seg of segs) seg.classList.toggle("cw-seg-on", seg.dataset.mode === msg.mode);
const authorship = msg.mode === "authorship";
header.hidden = authorship;
summary.hidden = authorship;
legend.hidden = !authorship;
if (authorship) {
const parts: string[] = [];
if (msg.legend?.claude) parts.push('<span class="cw-by-claude cw-swatch">Claude</span>');
if (msg.legend?.human) parts.push('<span class="cw-by-human cw-swatch">You</span>');
legend.innerHTML = parts.join(" ") || "no attribution yet";
} else {
header.textContent = `Track changes since ${msg.epoch ?? ""}`;
const on = msg.mode === "on";
if (annotationsEl) annotationsEl.checked = on;
// Off-state is a clean preview: hide the review chrome.
header.hidden = !on;
summary.hidden = !on;
legend.hidden = true;
if (on) {
header.textContent = `Review since ${msg.epoch ?? ""}`;
summary.innerHTML =
`<span class="cw-add">+${(msg.summary?.added ?? 0) + (msg.summary?.changed ?? 0)}</span> ` +
`<span class="cw-del">−${(msg.summary?.removed ?? 0) + (msg.summary?.changed ?? 0)}</span>`;
`<span class="cw-add">+${msg.summary?.added ?? 0}</span> ` +
`<span class="cw-del">−${msg.summary?.removed ?? 0}</span> ` +
`<span class="cw-prop">${msg.summary?.proposals ?? 0} proposal${(msg.summary?.proposals ?? 0) === 1 ? "" : "s"}</span>`;
}
void renderMermaid();
});