Added: Tooltip

ts/routes/reviewer/Reviewer.svelte

@@ -12,9 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         state.registerIFrame(iframe);
         state.registerShortcuts();
     }
+    $: tooltipMessage = state.tooltipMessage;
 </script>
 
-<div id="qa">
+<div class="iframe-container">
     <iframe
         src={"/_anki/pages/reviewer-inner.html" + (isNightMode() ? "?nightMode" : "")}
         bind:this={iframe}
@@ -22,13 +23,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         frameborder="0"
         sandbox="allow-scripts"
     ></iframe>
+
+    <div class="tooltip" style:opacity={$tooltipMessage ? 1 : 0}>
+        {$tooltipMessage}
+    </div>
 </div>
 
 <style lang="scss">
-    #qa {
+    div.iframe-container {
+        position: relative;
         flex: 1;
     }
 
+    div.tooltip {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        padding: 0.8em;
+        background-color: var(--bs-tooltip-color);
+        z-index: var(--bs-tooltip-z-index);
+        border: 2px solid white;
+        opacity: 1;
+    }
+
     iframe {
         width: 100%;
         height: 100%;

ts/routes/reviewer/reviewer.ts

@@ -16,6 +16,7 @@ import {
     setConfigJson,
     undo,
 } from "@generated/backend";
+import * as tr from "@generated/ftl";
 import { derived, get, writable } from "svelte/store";
 import type { InnerReviewerRequest } from "../reviewer-inner/innerReviewerRequest";
 import type { ReviewerRequest } from "./reviewerRequest";
@@ -40,6 +41,7 @@ export function updateNightMode() {
 }
 
 const typedAnswerRegex = /\[\[type:(.+?:)?(.+?)\]\]/m;
+const TOOLTIP_TIMEOUT_MS = 2000;
 
 export class ReviewerState {
     answerHtml = "";
@@ -51,6 +53,8 @@ export class ReviewerState {
     readonly answerShown = writable(false);
     readonly cardData = writable<NextCardDataResponse_NextCardData | undefined>(undefined);
     readonly answerButtons = derived(this.cardData, ($cardData) => $cardData?.answerButtons ?? []);
+    tooltipMessageTimeout: ReturnType<typeof setTimeout> | undefined;
+    readonly tooltipMessage = writable("");
 
     iframe: HTMLIFrameElement | undefined = undefined;
 
@@ -112,26 +116,36 @@ export class ReviewerState {
         this.displayMenu("CardInfo");
     }
 
-    public buryOrSuspendCurrentCard(suspend: boolean) {
+    public showTooltip(message: string) {
+        clearTimeout(this.tooltipMessageTimeout);
+        this.tooltipMessage.set(message);
+        this.tooltipMessageTimeout = setTimeout(() => {
+            this.tooltipMessage.set("");
+        }, TOOLTIP_TIMEOUT_MS);
+    }
+
+    public async buryOrSuspendCurrentCard(suspend: boolean) {
         const mode = suspend ? BuryOrSuspendCardsRequest_Mode.SUSPEND : BuryOrSuspendCardsRequest_Mode.BURY_USER;
         if (this.currentCard?.card?.id) {
-            buryOrSuspendCards({
+            await buryOrSuspendCards({
                 cardIds: [this.currentCard.card.id],
                 noteIds: [],
                 mode,
             });
+            this.showTooltip(suspend ? tr.studyingCardSuspended() : tr.studyingCardsBuried({ count: 1 }));
             this.refresh();
         }
     }
 
-    public buryOrSuspendCurrentNote(suspend: boolean) {
+    public async buryOrSuspendCurrentNote(suspend: boolean) {
         const mode = suspend ? BuryOrSuspendCardsRequest_Mode.SUSPEND : BuryOrSuspendCardsRequest_Mode.BURY_USER;
         if (this.currentCard?.card?.noteId) {
-            buryOrSuspendCards({
+            const op = await buryOrSuspendCards({
                 cardIds: [],
                 noteIds: [this.currentCard.card.noteId],
                 mode,
             });
+            this.showTooltip(suspend ? tr.studyingNoteSuspended() : tr.studyingCardsBuried({ count: op.count }));
             this.refresh();
         }
     }