From 992c8ad73101b4e18534759329203242fda3b941 Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Tue, 26 Aug 2025 00:45:58 +0100
Subject: [PATCH] Added: Remaining

---
 qt/aqt/reviewer.py                            |  16 +--
 ts/routes/reviewer-bottom/+page.svelte        | 126 ++++++++++--------
 .../reviewer-bottom/RemainingNumber.svelte    |  12 ++
 .../reviewer-bottom/ReviewerBottom.svelte     |  35 +++--
 4 files changed, 114 insertions(+), 75 deletions(-)
 create mode 100644 ts/routes/reviewer-bottom/RemainingNumber.svelte

diff --git a/qt/aqt/reviewer.py b/qt/aqt/reviewer.py
index c6779063f..5ba90995f 100644
--- a/qt/aqt/reviewer.py
+++ b/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
diff --git a/ts/routes/reviewer-bottom/+page.svelte b/ts/routes/reviewer-bottom/+page.svelte
index fa264b129..a5ea9fe09 100644
--- a/ts/routes/reviewer-bottom/+page.svelte
+++ b/ts/routes/reviewer-bottom/+page.svelte
@@ -1,69 +1,85 @@
 <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"
 
-    let timerStopped = false;
+    globalThis.answerButtons = writable<AnswerButtonInfo[]>([])
+    globalThis.remaining = writable<[number, number, number]>([0, 0, 0])
+    globalThis.remainingIndex = writable<number>(-1)
 
-    let maxTime = 0;
+    onMount(() => {
+        let timerStopped = false;
 
-    function updateTime(): void {
-        const timeNode = document.getElementById("time");
-        if (maxTime === 0) {
-            timeNode.textContent = "";
-            return;
-        }
-        globalThis.time = Math.min(maxTime, globalThis.time);
-        const m = Math.floor(globalThis.time / 60);
-        const s = globalThis.time % 60;
-        const sStr = String(s).padStart(2, "0");
-        const timeString = `${m}:${sStr}`;
+        let maxTime = 0;
 
-        if (maxTime === time) {
-            timeNode.innerHTML = `<font color=red>${timeString}</font>`;
-        } else {
-            timeNode.textContent = timeString;
-        }
-    }
-
-    let intervalId: number | undefined;
-    let answerButtons = writable<AnswerButtonInfo[]>([])
-
-    function _showQuestion(txt: string, maxTime_: number): void {
-        _showAnswer([]);
-        globalThis.time = 0;
-        maxTime = maxTime_;
-        // updateTime();
-
-        if (intervalId !== undefined) {
-            clearInterval(intervalId);
-        }
-
-        intervalId = setInterval(function() {
-            if (!timerStopped) {
-                globalThis.time += 1;
-                //updateTime();
+        function updateTime(): void {
+            const timeNode = document.getElementById("time");
+            if (maxTime === 0) {
+                timeNode.textContent = "";
+                return;
             }
-        }, 1000);
-    }
+            globalThis.time = Math.min(maxTime, globalThis.time);
+            const m = Math.floor(globalThis.time / 60);
+            const s = globalThis.time % 60;
+            const sStr = String(s).padStart(2, "0");
+            const timeString = `${m}:${sStr}`;
 
-    function _showAnswer(info: AnswerButtonInfo[], stopTimer = false): void {
-        console.log(info)
-        answerButtons.set(info);
-        timerStopped = stopTimer;
-    }
-
-    globalThis._showQuestion = _showQuestion;
-    globalThis._showAnswer = _showAnswer;
-
-    function selectedAnswerButton(): string | undefined {
-        const node = document.activeElement as HTMLElement;
-        if (!node) {
-            return;
+            if (maxTime === time) {
+                timeNode.innerHTML = `<font color=red>${timeString}</font>`;
+            } else {
+                timeNode.textContent = timeString;
+            }
         }
-        return node.dataset.ease;
-    }
 
+        let intervalId: number | undefined;
+
+
+        function _showQuestion(txt: string, maxTime_: number): void {
+            _showAnswer([]);
+            globalThis.time = 0;
+            maxTime = maxTime_;
+            // updateTime();
+
+            if (intervalId !== undefined) {
+                clearInterval(intervalId);
+            }
+
+            intervalId = setInterval(function() {
+                if (!timerStopped) {
+                    globalThis.time += 1;
+                    //updateTime();
+                }
+            }, 1000);
+        }
+
+        function _showAnswer(info: AnswerButtonInfo[], stopTimer = false): void {
+            console.log(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;
+            if (!node) {
+                return;
+            }
+            return node.dataset.ease;
+        }
+
+        bridgeCommand("bottomReady");
+    });
 </script>
 
-<ReviewerBottom {answerButtons}></ReviewerBottom>
\ No newline at end of file
+
+<ReviewerBottom answerButtons={globalThis.answerButtons} remaining={globalThis.remaining} remainingIndex={globalThis.remainingIndex}></ReviewerBottom>
\ No newline at end of file
diff --git a/ts/routes/reviewer-bottom/RemainingNumber.svelte b/ts/routes/reviewer-bottom/RemainingNumber.svelte
new file mode 100644
index 000000000..6192df946
--- /dev/null
+++ b/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>
diff --git a/ts/routes/reviewer-bottom/ReviewerBottom.svelte b/ts/routes/reviewer-bottom/ReviewerBottom.svelte
index 0345097ae..dedf7f011 100644
--- a/ts/routes/reviewer-bottom/ReviewerBottom.svelte
+++ b/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,14 +17,21 @@
         <div>
             <button title={tr.actionsShortcutKey({val: "E"})} on:click={()=>bridgeCommand("edit")}>{tr.studyingEdit()}</button>
         </div>
-        <div>
-            {#if $answerButtons.length}
-                {#each $answerButtons as answerButton}
-                    <AnswerButton info={answerButton}></AnswerButton>
-                {/each}
-            {:else}
-                <button on:click={()=>bridgeCommand("ans")}>{tr.studyingShowAnswer()}</button>
-            {/if}
+        <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}
+                        <AnswerButton info={answerButton}></AnswerButton>
+                    {/each}
+                {:else}
+                    <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>
@@ -35,4 +46,10 @@
         grid-template-columns: auto 1fr auto;
         justify-items: center;
     }
+
+    .review-buttons {
+        display: flex;
+        flex-direction: column;
+        align-items: center
+    }
 </style>