From b726e28229bbf6a770174afc50dae44e64d98cd4 Mon Sep 17 00:00:00 2001
From: llama <100429699+iamllama@users.noreply.github.com>
Date: Sat, 14 Dec 2024 19:45:54 +0800
Subject: [PATCH] Remove use of window.location.href in CardInfoDialog (#3621)

* Replace window.location in CardInfoDialog with load_sveltekit_page

* Fix format

* Fix ForgettingCurve's reactivity

* Props' default args aren't reactive

* Add global _updateCardId fn to card-info

* Use _updateCardId to reactively update card-info

* Fix format

* Fix type

* Use dummy form instead of window global for client-side nav

* Fallback to window.location in case form hasn't been rendered

* Use window.postMessage instead of dummy <form>
---
 qt/aqt/browser/card_info.py                |  8 +-------
 ts/routes/card-info/CardInfo.svelte        |  5 +++--
 ts/routes/card-info/ForgettingCurve.svelte | 17 ++++++++++++-----
 ts/routes/card-info/[cardId]/+page.svelte  |  8 ++++++++
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/qt/aqt/browser/card_info.py b/qt/aqt/browser/card_info.py
index 6042ea1db..26da4a3b2 100644
--- a/qt/aqt/browser/card_info.py
+++ b/qt/aqt/browser/card_info.py
@@ -67,19 +67,13 @@ class CardInfoDialog(QDialog):
         self.setLayout(layout)
 
     def update_card(self, card_id: CardId | None) -> None:
-        from aqt.theme import theme_manager
-
         try:
             self.mw.col.get_card(card_id)
         except NotFoundError:
             card_id = None
 
-        if theme_manager.night_mode:
-            extra = "#night"
-        else:
-            extra = ""
         assert self.web is not None
-        self.web.eval(f"window.location.href = '/card-info/{card_id}{extra}';")
+        self.web.eval(f"window.postMessage('{card_id}');")
 
     def reject(self) -> None:
         if self._on_close:
diff --git a/ts/routes/card-info/CardInfo.svelte b/ts/routes/card-info/CardInfo.svelte
index ebafacc36..b332f131e 100644
--- a/ts/routes/card-info/CardInfo.svelte
+++ b/ts/routes/card-info/CardInfo.svelte
@@ -15,8 +15,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let stats: CardStatsResponse | null = null;
     export let showRevlog: boolean = true;
-    export let fsrsEnabled: boolean = stats?.memoryState != null;
-    export let desiredRetention: number = stats?.desiredRetention ?? 0.9;
+
+    $: fsrsEnabled = stats?.memoryState != null;
+    $: desiredRetention = stats?.desiredRetention ?? 0.9;
 </script>
 
 <Container breakpoint="md" --gutter-inline="1rem" --gutter-block="0.5rem">
diff --git a/ts/routes/card-info/ForgettingCurve.svelte b/ts/routes/card-info/ForgettingCurve.svelte
index b3fffc16a..ad8b989f1 100644
--- a/ts/routes/card-info/ForgettingCurve.svelte
+++ b/ts/routes/card-info/ForgettingCurve.svelte
@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Graph from "../graphs/Graph.svelte";
     import NoDataOverlay from "../graphs/NoDataOverlay.svelte";
     import AxisTicks from "../graphs/AxisTicks.svelte";
-    import { writable } from "svelte/store";
+    import { writable, type Writable } from "svelte/store";
     import InputBox from "../graphs/InputBox.svelte";
     import {
         renderForgettingCurve,
@@ -24,17 +24,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let svg = null as HTMLElement | SVGElement | null;
     const bounds = defaultGraphBounds();
     const title = tr.cardStatsFsrsForgettingCurveTitle();
-    const filteredRevlog = filterRevlog(revlog);
-    const maxDays = calculateMaxDays(filteredRevlog, TimeRange.AllTime);
+
+    $: filteredRevlog = filterRevlog(revlog);
+    $: maxDays = calculateMaxDays(filteredRevlog, TimeRange.AllTime);
+
     let defaultTimeRange = TimeRange.Week;
-    if (maxDays > 365) {
+    const timeRange: Writable<TimeRange> = writable(defaultTimeRange);
+
+    // https://github.com/sveltejs/svelte/issues/13811
+    // svelte-ignore reactive_declaration_non_reactive_property
+    $: if (maxDays > 365) {
         defaultTimeRange = TimeRange.AllTime;
     } else if (maxDays > 30) {
         defaultTimeRange = TimeRange.Year;
     } else if (maxDays > 7) {
         defaultTimeRange = TimeRange.Month;
     }
-    const timeRange = writable(defaultTimeRange);
+
+    $: $timeRange = defaultTimeRange;
 
     $: renderForgettingCurve(
         filteredRevlog,
diff --git a/ts/routes/card-info/[cardId]/+page.svelte b/ts/routes/card-info/[cardId]/+page.svelte
index 0f950e00a..8900cf08f 100644
--- a/ts/routes/card-info/[cardId]/+page.svelte
+++ b/ts/routes/card-info/[cardId]/+page.svelte
@@ -7,10 +7,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import CardInfo from "../CardInfo.svelte";
     import type { PageData } from "./$types";
+    import { goto } from "$app/navigation";
 
     export let data: PageData;
 
     const showRevlog = $page.url.searchParams.get("revlog") !== "0";
+
+    function updateCardId(evt: MessageEvent) {
+        goto(`/card-info/${evt.data}`);
+    }
 </script>
 
+<!-- used by CardInfoDialog.update_card -->
+<svelte:window on:message={updateCardId} />
+
 <CardInfo stats={data.info} {showRevlog} />