Move update logic into CardInfo.svelte

ftl/core/card-stats.ftl

@@ -22,6 +22,7 @@ card-stats-review-log-type-review = Review
 card-stats-review-log-type-relearn = Relearn
 card-stats-review-log-type-filtered = Filtered
 card-stats-review-log-type-manual = Manual
+card-stats-no-card = (No card to display.)
 
 ## Window Titles
 

qt/aqt/browser/card_info.py

@@ -64,11 +64,13 @@ class CardInfoDialog(QDialog):
         self.setLayout(layout)
 
         self.web.eval(
-            f"let cardInfo = anki.cardInfo(document.getElementById('main'), {card_id}, true);"
+            "let cardInfo = anki.cardInfo(document.getElementById('main'));\n" \
+            "cardInfo.then((c) => c.$set({ includeRevlog: true }));"
         )
+        self.update_card(card_id)
 
     def update_card(self, card_id: CardId) -> None:
-        self.web.eval(f"anki.updateCardInfo(cardInfo, {card_id}, true);")
+        self.web.eval(f"cardInfo.then((c) => c.$set({{ cardId: {card_id} }}));")
 
     def reject(self) -> None:
         if self._on_close:

ts/card-info/CardInfo.svelte

@@ -3,17 +3,39 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import * as tr from "../lib/ftl";
     import type { Stats } from "../lib/proto";
+    import { getCardStats } from "./lib";
     import CardStats from "./CardStats.svelte";
     import Revlog from "./Revlog.svelte";
 
-    export let stats: Stats.CardStatsResponse;
+    export let cardId: number | undefined = undefined;
+    export let includeRevlog: boolean | undefined = undefined;
+
+    let stats: Stats.CardStatsResponse | undefined = undefined;
+    let _updatingQueue: Promise<void> = Promise.resolve();
+
+    $: _updatingQueue = _updatingQueue.then(() => {
+        if (cardId === undefined) {
+            stats = undefined;
+        } else {
+            getCardStats(cardId).then((s) => {
+                stats = s;
+            });
+        }
+    });
 </script>
 
 <div class="container">
     <div>
+        {#if stats}
             <CardStats {stats} />
+            {#if includeRevlog}
                 <Revlog {stats} />
+            {/if}
+        {:else}
+            <span class="placeholder">{tr.cardStatsNoCard()}</span>
+        {/if}
     </div>
 </div>
 
@@ -21,4 +43,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .container {
         max-width: 40em;
     }
+
+    .placeholder {
+        text-align: center;
+    }
 </style>

ts/card-info/index.ts

@@ -1,51 +1,15 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { getCardStats } from "./lib";
 import { setupI18n, ModuleName } from "../lib/i18n";
 import { checkNightMode } from "../lib/nightmode";
 
 import CardInfo from "./CardInfo.svelte";
 
-const _updatingQueue: Promise<void> = Promise.resolve();
+export async function cardInfo(target: HTMLDivElement): Promise<CardInfo> {
-
-export async function cardInfo(
-    target: HTMLDivElement,
-    cardId: number,
-    includeRevlog: boolean
-): Promise<CardInfo> {
     checkNightMode();
-    const [stats] = await Promise.all([
+    await setupI18n({
-        getCardStats(cardId),
+        modules: [ModuleName.CARD_STATS, ModuleName.SCHEDULING, ModuleName.STATISTICS],
-        setupI18n({
-            modules: [
-                ModuleName.CARD_STATS,
-                ModuleName.SCHEDULING,
-                ModuleName.STATISTICS,
-            ],
-        }),
-    ]);
-    if (!includeRevlog) {
-        stats.revlog = [];
-    }
-    return new CardInfo({
-        target,
-        props: { stats },
-    });
-}
-
-export async function updateCardInfo(
-    cardInfo: Promise<CardInfo>,
-    cardId: number,
-    includeRevlog: boolean
-): Promise<void> {
-    _updatingQueue.then(async () => {
-        cardInfo.then(async (cardInfo) => {
-            const stats = await getCardStats(cardId);
-            if (!includeRevlog) {
-                stats.revlog = [];
-            }
-            cardInfo.$set({ stats });
-        });
     });
+    return new CardInfo({ target });
 }