Added: Remaining

qt/aqt/reviewer.py

@@ -259,8 +259,6 @@ class Reviewer:
         if self._reps is None:
             self._initWeb()
 
-        self._showQuestion()
-
     def _get_next_v3_card(self) -> None:
         assert isinstance(self.mw.col.sched, V3Scheduler)
         output = self.mw.col.sched.get_queued_cards()
@@ -676,6 +674,9 @@ class Reviewer:
             self.mw.onEditCurrent()
         elif url == "more":
             self.showContextMenu()
+        elif url == "bottomReady":
+            self._showQuestion()
+            self._remaining()
         elif url.startswith("play:"):
             play_clicked_audio(url, self.card)
         elif url.startswith("updateToolbar"):
@@ -866,15 +867,8 @@ timerStopped = false;
             return ""
 
         counts: list[int | str]
-        idx, counts_ = self._v3.counts()
-        counts = cast(list[Union[int, str]], counts_)
-        counts[idx] = f"<u>{counts[idx]}</u>"
-
-        return f"""
-<span class=new-count>{counts[0]}</span> +
-<span class=learn-count>{counts[1]}</span> +
-<span class=review-count>{counts[2]}</span>
-"""
+        idx, counts = self._v3.counts()
+        self.bottom.web.eval(f"_updateRemaining({json.dumps(counts)},{idx})")
 
     def _defaultEase(self) -> Literal[2, 3]:
         return 3

ts/routes/reviewer-bottom/+page.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import { writable } from "svelte/store";
+    import { bridgeCommand } from "@tslib/bridgecommand";
     import ReviewerBottom from "./ReviewerBottom.svelte";
     import "./index.scss"
 
+    globalThis.answerButtons = writable<AnswerButtonInfo[]>([])
+    globalThis.remaining = writable<[number, number, number]>([0, 0, 0])
+    globalThis.remainingIndex = writable<number>(-1)
+
+    onMount(() => {
         let timerStopped = false;
 
         let maxTime = 0;
@@ -27,7 +34,7 @@
         }
 
         let intervalId: number | undefined;
-    let answerButtons = writable<AnswerButtonInfo[]>([])
+
 
         function _showQuestion(txt: string, maxTime_: number): void {
             _showAnswer([]);
@@ -49,12 +56,18 @@
 
         function _showAnswer(info: AnswerButtonInfo[], stopTimer = false): void {
             console.log(info)
-        answerButtons.set(info);
+            globalThis.answerButtons.set(info);
             timerStopped = stopTimer;
         }
 
+        function _updateRemaining(counts: [number, number, number], idx: number) {
+            globalThis.remaining.set(counts)
+            globalThis.remainingIndex.set(idx)
+        }
+
         globalThis._showQuestion = _showQuestion;
         globalThis._showAnswer = _showAnswer;
+        globalThis._updateRemaining = _updateRemaining;
 
         function selectedAnswerButton(): string | undefined {
             const node = document.activeElement as HTMLElement;
@@ -64,6 +77,9 @@
             return node.dataset.ease;
         }
 
+        bridgeCommand("bottomReady");
+    });
 </script>
 
-<ReviewerBottom {answerButtons}></ReviewerBottom>
+
+<ReviewerBottom answerButtons={globalThis.answerButtons} remaining={globalThis.remaining} remainingIndex={globalThis.remainingIndex}></ReviewerBottom>

ts/routes/reviewer-bottom/RemainingNumber.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let underlined: boolean
+    export let cls: string
+</script>
+
+<span class={cls}>
+    {#if underlined}
+        <u><slot/></u>
+    {:else}
+        <slot/>
+    {/if}
+</span>

ts/routes/reviewer-bottom/ReviewerBottom.svelte

@@ -3,9 +3,13 @@
     import AnswerButton from "./AnswerButton.svelte";
     import { bridgeCommand } from "@tslib/bridgecommand";
     import * as tr from "@generated/ftl";
+    import RemainingNumber from "./RemainingNumber.svelte";
 
     export let answerButtons: Writable<AnswerButtonInfo[]>
-    $: console.log($answerButtons)
+    export let remaining: Writable<number[]>
+    export let remainingIndex: Writable<number>
+
+    $: console.log($remaining)
 </script>
 
 <div id="outer fancy">
@@ -13,6 +17,12 @@
         <div>
             <button title={tr.actionsShortcutKey({val: "E"})} on:click={()=>bridgeCommand("edit")}>{tr.studyingEdit()}</button>
         </div>
+        <div class="review-buttons">
+            <span>
+                <RemainingNumber cls="new-count" underlined={$remainingIndex === 0}>{$remaining[0]}</RemainingNumber> +
+                <RemainingNumber cls="learn-count" underlined={$remainingIndex === 1}>{$remaining[1]}</RemainingNumber> +
+                <RemainingNumber cls="review-count" underlined={$remainingIndex === 2}>{$remaining[2]}</RemainingNumber>
+            </span>
             <div>
                 {#if $answerButtons.length}
                     {#each $answerButtons as answerButton}
@@ -22,6 +32,7 @@
                     <button on:click={()=>bridgeCommand("ans")}>{tr.studyingShowAnswer()}</button>
                 {/if}
             </div>
+        </div>
         <div>
             <button on:click={()=>bridgeCommand("more")} title={tr.actionsShortcutKey({val: "M"})}>{tr.studyingMore()}&#8615</button>
         </div>
@@ -35,4 +46,10 @@
         grid-template-columns: auto 1fr auto;
         justify-items: center;
     }
+
+    .review-buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center
+    }
 </style>