From 654701da4d860301923f788ad5c525e783aac080 Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Sun, 28 Sep 2025 01:47:30 +0100
Subject: [PATCH] reviewer-inner poc

---
 qt/aqt/mediasrv.py                            |  1 +
 ts/routes/reviewer-inner/+page.svelte         | 30 +++++++++++++++++
 ts/routes/reviewer/Reviewer.svelte            |  7 +++-
 .../reviewer-bottom/reviewer-bottom.ts        |  5 ---
 ts/routes/reviewer/reviewer.ts                | 33 ++++++++++---------
 5 files changed, 54 insertions(+), 22 deletions(-)
 create mode 100644 ts/routes/reviewer-inner/+page.svelte

diff --git a/qt/aqt/mediasrv.py b/qt/aqt/mediasrv.py
index 83f45c933..eda971121 100644
--- a/qt/aqt/mediasrv.py
+++ b/qt/aqt/mediasrv.py
@@ -335,6 +335,7 @@ def is_sveltekit_page(path: str) -> bool:
         "import-page",
         "image-occlusion",
         "reviewer",
+        "reviewer-inner",
     ]
 
 
diff --git a/ts/routes/reviewer-inner/+page.svelte b/ts/routes/reviewer-inner/+page.svelte
new file mode 100644
index 000000000..060424096
--- /dev/null
+++ b/ts/routes/reviewer-inner/+page.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import "../../reviewer/reviewer.scss";
+
+    addEventListener("message", (e) => {
+        switch (e.data.type) {
+            case "html":
+                document.body.innerHTML = e.data.value;
+                break;
+            case "nightMode":
+                // This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
+                // I will probably use #night-mode in the url.
+                const root = document.querySelector("html")!;
+                const nightMode = e.data.value;
+                if (e.data.value) {
+                    root.classList.add("night-mode");
+                } else {
+                    root.classList.remove("night-mode");
+                }
+                document.body.className = nightMode ? "nightMode card" : "card";
+                root.className = nightMode ? "night-mode" : "";
+                root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
+                break;
+            default:
+                console.warn(`Unknown message type: ${e.data.type}`);
+                break;
+        }
+    });
+
+    window.parent.postMessage({ type: "ready" });
+</script>
diff --git a/ts/routes/reviewer/Reviewer.svelte b/ts/routes/reviewer/Reviewer.svelte
index 921fd2248..4383a2227 100644
--- a/ts/routes/reviewer/Reviewer.svelte
+++ b/ts/routes/reviewer/Reviewer.svelte
@@ -7,7 +7,12 @@
 </script>
 
 <div id="qa" class={$cardClass}>
-    <iframe bind:this={iframe} title="card" frameborder="0"></iframe>
+    <iframe
+        src="/reviewer-inner"
+        bind:this={iframe}
+        title="card"
+        frameborder="0"
+    ></iframe>
 </div>
 
 <style lang="scss">
diff --git a/ts/routes/reviewer/reviewer-bottom/reviewer-bottom.ts b/ts/routes/reviewer/reviewer-bottom/reviewer-bottom.ts
index deedbd4bd..a8200b687 100644
--- a/ts/routes/reviewer/reviewer-bottom/reviewer-bottom.ts
+++ b/ts/routes/reviewer/reviewer-bottom/reviewer-bottom.ts
@@ -77,11 +77,6 @@ export function setupBottomBar() {
     }
     */
 
-    // TODO This should probably be a "ready" command now that it is part of the actual reviewer,
-    // Currently this depends on this component mounting after the reviewer which it should but seems hacky.
-    // Maybe use a counter with a counter.subscribe($counter == 2 then call("ready"))
-    bridgeCommand("bottomReady");
-
     return {
         answerButtons,
         remaining,
diff --git a/ts/routes/reviewer/reviewer.ts b/ts/routes/reviewer/reviewer.ts
index 34288b1e3..00e555ace 100644
--- a/ts/routes/reviewer/reviewer.ts
+++ b/ts/routes/reviewer/reviewer.ts
@@ -1,26 +1,12 @@
+import { bridgeCommand } from "@tslib/bridgecommand";
 import { writable } from "svelte/store";
-import { isNightMode } from "../../html-filter/helpers";
 import { preloadAnswerImages } from "../../reviewer/images";
 
 export function setupReviewer(iframe: HTMLIFrameElement) {
     const cardClass = writable("");
 
     function updateHtml(htmlString) {
-        if (iframe?.contentDocument) {
-            const nightMode = isNightMode();
-            iframe.contentDocument.body.innerHTML = htmlString;
-            iframe.contentDocument.head.innerHTML = document.head.innerHTML;
-            iframe.contentDocument.body.className = nightMode
-                ? "nightMode card"
-                : "card";
-            const root = iframe.contentDocument.querySelector("html")!;
-            root.className = nightMode
-                ? "night-mode"
-                : "";
-            root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
-            // @ts-ignore
-            iframe.contentDocument.pycmd = bridgeCommand;
-        }
+        iframe.contentWindow?.postMessage({ type: "html", value: htmlString });
     }
 
     function showQuestion(q, a, cc) {
@@ -30,6 +16,21 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
         preloadAnswerImages(a);
     }
 
+    addEventListener("message", (e) => {
+        switch (e.data.type) {
+            case "ready":
+                // TODO This should probably be a "ready" command now that it is part of the actual reviewer,
+                // Currently this depends on the reviewer component mounting after the bottom-reviewer which it should but seems hacky.
+                // Maybe use a counter with a counter.subscribe($counter == 2 then call("ready"))
+                bridgeCommand("bottomReady");
+                iframe.contentWindow?.postMessage({ type: "nightMode", value: true });
+                break;
+            default:
+                console.warn(`Unknown message type: ${e.data.type}`);
+                break;
+        }
+    });
+
     globalThis._showAnswer = updateHtml;
     globalThis._showQuestion = showQuestion;