From b061da73d334e3c6ab21d280df467575a5f04383 Mon Sep 17 00:00:00 2001
From: llama <100429699+iamllama@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:32:07 +0800
Subject: [PATCH] Replace use of window.postMessage in card info (#3646)

* Use anki.updateCard instead of window.onmessage in card-info

* Make card-info placeholder text grey

---------

Co-authored-by: Abdo <abdo@abdnh.net>
---
 qt/aqt/browser/card_info.py                    |  2 +-
 ts/routes/card-info/CardInfoPlaceholder.svelte |  1 +
 ts/routes/card-info/[cardId]/+page.svelte      | 13 +++++++------
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/qt/aqt/browser/card_info.py b/qt/aqt/browser/card_info.py
index 26da4a3b2..afcdaf022 100644
--- a/qt/aqt/browser/card_info.py
+++ b/qt/aqt/browser/card_info.py
@@ -73,7 +73,7 @@ class CardInfoDialog(QDialog):
             card_id = None
 
         assert self.web is not None
-        self.web.eval(f"window.postMessage('{card_id}');")
+        self.web.eval(f"anki.updateCard('{card_id}');")
 
     def reject(self) -> None:
         if self._on_close:
diff --git a/ts/routes/card-info/CardInfoPlaceholder.svelte b/ts/routes/card-info/CardInfoPlaceholder.svelte
index 7ca42d12b..f81e777e2 100644
--- a/ts/routes/card-info/CardInfoPlaceholder.svelte
+++ b/ts/routes/card-info/CardInfoPlaceholder.svelte
@@ -15,5 +15,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
+        color: grey;
     }
 </style>
diff --git a/ts/routes/card-info/[cardId]/+page.svelte b/ts/routes/card-info/[cardId]/+page.svelte
index 8900cf08f..a1e137e10 100644
--- a/ts/routes/card-info/[cardId]/+page.svelte
+++ b/ts/routes/card-info/[cardId]/+page.svelte
@@ -13,12 +13,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const showRevlog = $page.url.searchParams.get("revlog") !== "0";
 
-    function updateCardId(evt: MessageEvent) {
-        goto(`/card-info/${evt.data}`);
-    }
+    globalThis.anki ||= {};
+    globalThis.anki.updateCard = async (card_id: string): Promise<void> => {
+        const path = `/card-info/${card_id}`;
+        return goto(path).catch(() => {
+            window.location.href = path;
+        });
+    };
 </script>
 
-<!-- used by CardInfoDialog.update_card -->
-<svelte:window on:message={updateCardId} />
-
 <CardInfo stats={data.info} {showRevlog} />