Add remaining queue counts

ts/routes/reviewer/reviewer-bottom/Remaining.svelte

@@ -0,0 +1,38 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { QueuedCards_Queue } from "@generated/anki/scheduler_pb";
+    import type { ReviewerState } from "../reviewer";
+    import RemainingNumber from "./RemainingNumber.svelte";
+
+    export let state: ReviewerState;
+    const cardData = state.cardData;
+    $: queue = $cardData?.queue;
+    $: underlined = queue?.cards[0].queue;
+</script>
+
+<span>
+    <RemainingNumber cls="new-count" underlined={underlined === QueuedCards_Queue.NEW}>
+        {queue?.newCount}
+    </RemainingNumber> +
+    <RemainingNumber
+        cls="learn-count"
+        underlined={underlined === QueuedCards_Queue.LEARNING}
+    >
+        {queue?.learningCount}
+    </RemainingNumber> +
+    <RemainingNumber
+        cls="review-count"
+        underlined={underlined === QueuedCards_Queue.REVIEW}
+    >
+        {queue?.reviewCount}
+    </RemainingNumber>
+</span>
+
+<style>
+    span {
+        text-align: center;
+    }
+</style>

ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte

@@ -8,17 +8,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import AnswerButton from "./AnswerButton.svelte";
     import { bridgeCommand } from "@tslib/bridgecommand";
     import * as tr from "@generated/ftl";
-    import RemainingNumber from "./RemainingNumber.svelte";
     import type { ReviewerState } from "../reviewer";
-    import { writable } from "svelte/store";
+    import Remaining from "./Remaining.svelte";
 
     export let state: ReviewerState;
 
     const answerButtons = state.answerButtons;
     const answerShown = state.answerShown;
-    // Placeholders
-    const remaining = writable([0, 0, 0]);
-    const remainingIndex = writable(0);
 
     $: button_count = $answerShown ? $answerButtons.length : 1;
 </script>
@@ -39,17 +35,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <AnswerButton {state} info={answerButton}></AnswerButton>
             {/each}
         {:else}
-            <span class="remaining-count">
+            <Remaining {state}></Remaining>
-                <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>
             <button on:click={() => state.showAnswer()}>
                 {tr.studyingShowAnswer()}
             </button>
@@ -78,10 +64,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         grid-auto-flow: column;
     }
 
-    .remaining-count {
-        text-align: center;
-    }
-
     .more,
     .edit {
         width: 100%;

ts/routes/reviewer/reviewer.ts

@@ -1,20 +1,17 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import {
+import { CardAnswer, type NextCardDataResponse_NextCardData } from "@generated/anki/scheduler_pb";
-    CardAnswer,
-    type NextCardDataResponse_AnswerButton,
-    type NextCardDataResponse_NextCardData,
-} from "@generated/anki/scheduler_pb";
 import { nextCardData } from "@generated/backend";
-import { writable } from "svelte/store";
+import { derived, writable } from "svelte/store";
 
 export class ReviewerState {
     answerHtml = "";
-    cardData: NextCardDataResponse_NextCardData | undefined = undefined;
+    _cardData: NextCardDataResponse_NextCardData | undefined = undefined;
     beginAnsweringMs = Date.now();
     readonly cardClass = writable("");
-    readonly answerButtons = writable<NextCardDataResponse_AnswerButton[]>([]);
     readonly answerShown = writable(false);
+    readonly cardData = writable<NextCardDataResponse_NextCardData | undefined>(undefined);
+    readonly answerButtons = derived(this.cardData, ($cardData) => $cardData?.answerButtons ?? []);
 
     iframe: HTMLIFrameElement | undefined = undefined;
 
@@ -36,22 +33,25 @@ export class ReviewerState {
         const resp = await nextCardData({
             answer: answer || undefined,
         });
+
         // TODO: "Congratulation screen" logic
-        this.cardData = resp.nextCard;
+        this._cardData = resp.nextCard;
-        this.answerButtons.set(this.cardData?.answerButtons ?? []);
+        this.cardData.set(this._cardData);
-        const question = resp.nextCard?.front || "";
         this.answerShown.set(false);
+
+        const question = resp.nextCard?.front || "";
         this.updateHtml(question);
+
         this.beginAnsweringMs = Date.now();
     }
 
     get currentCard() {
-        return this.cardData?.queue?.cards[0];
+        return this._cardData?.queue?.cards[0];
     }
 
     public showAnswer() {
         this.answerShown.set(true);
-        this.updateHtml(this.cardData?.back || "");
+        this.updateHtml(this._cardData?.back || "");
     }
 
     public easeButtonPressed(rating: number) {