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

@@ -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:

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">

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,

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} />