Fix: Flag and marked reset timer

ts/routes/reviewer/+page.svelte

@@ -22,9 +22,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         _blockDefaultDragDropBehavior();
         state.undoStatus = data.initialUndoStatus;
     });
-    $: cardData = state.cardData;
-    $: flag = $cardData?.queue?.cards[0].card?.flags;
-    $: marked = $cardData?.marked;
 </script>
 
 <div>
@@ -32,14 +29,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ReviewerBottom {state}></ReviewerBottom>
 </div>
 
-{#if flag}
-    <div id="_flag" style:color={`var(--flag-${flag})`}>⚑</div>
-{/if}
-
-{#if marked}
-    <div id="_mark">★</div>
-{/if}
-
 <style>
     div {
         height: 100vh;

ts/routes/reviewer/Reviewer.svelte

@@ -14,6 +14,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
     $: tooltipMessage = state.tooltipMessage;
     $: tooltipShown = state.tooltipShown;
+    $: flag = state.flag;
+    $: marked = state.marked;
 </script>
 
 <div class="iframe-container">
@@ -30,6 +32,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </div>
 </div>
 
+{#if $flag}
+    <div id="_flag" style:color={`var(--flag-${$flag})`}>⚑</div>
+{/if}
+
+{#if $marked}
+    <div id="_mark">★</div>
+{/if}
+
 <style lang="scss">
     div.iframe-container {
         position: relative;

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

@@ -6,7 +6,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "@generated/ftl";
     import MoreSubmenu from "./MoreSubmenu.svelte";
     import MoreItem from "./MoreItem.svelte";
-    import { setFlag } from "@generated/backend";
     import type { ReviewerState } from "../reviewer";
     import type { MoreMenuItemInfo } from "./types";
     import Shortcut from "$lib/components/Shortcut.svelte";
@@ -133,16 +132,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         },
     ];
 
-    const cardData = state.cardData;
-    $: card = $cardData?.queue?.cards[0].card;
-
-    function changeFlag(index: number) {
-        if (card?.flags === index) {
-            index = 0;
-        }
-        setFlag({ cardIds: [card!.id], flag: index });
-        $cardData!.queue!.cards[0].card!.flags = index;
-    }
+    $: current_flag = state.flag;
 
     function prepKeycodeForShortcut(keycode: string) {
         return keycode.replace("Ctrl", "Control");
@@ -169,7 +159,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <Shortcut
         keyCombination={prepKeycodeForShortcut(flag.shortcut)}
         event="keydown"
-        on:action={() => changeFlag(i + 1)}
+        on:action={() => {
+            state.changeFlag(i + 1);
+        }}
     />
 {/each}
 
@@ -199,13 +191,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     {#each flags as flag, i}
                         {@const flag_id = i + 1}
                         <div
-                            style:background-color={card?.flags == flag_id
+                            style:background-color={$current_flag == flag_id
                                 ? `color-mix(in srgb, var(--flag-${flag_id}) 50%, transparent)`
                                 : ""}
                         >
                             <MoreItem
                                 shortcut={flag.shortcut}
-                                on:click={() => changeFlag(flag_id)}
+                                on:click={() => {
+                                    state.changeFlag(flag_id);
+                                }}
                             >
                                 {flag.colour}
                             </MoreItem>

ts/routes/reviewer/reviewer.ts

@@ -19,6 +19,7 @@ import {
     removeNoteTags,
     reviewerAction,
     setConfigJson,
+    setFlag,
     undo,
 } from "@generated/backend";
 import * as tr from "@generated/ftl";
@@ -61,6 +62,8 @@ export class ReviewerState {
     tooltipMessageTimeout: ReturnType<typeof setTimeout> | undefined;
     readonly tooltipMessage = writable("");
     readonly tooltipShown = writable(false);
+    readonly flag = writable(0);
+    readonly marked = writable(false);
     undoStatus: UndoStatus | undefined = undefined;
 
     iframe: HTMLIFrameElement | undefined = undefined;
@@ -178,15 +181,20 @@ export class ReviewerState {
             } else {
                 addNoteTags({ noteIds, tags: "marked" });
             }
-            this.cardData.update($cardData => {
-                if ($cardData) {
-                    $cardData.marked = !$cardData.marked;
-                }
-                return $cardData;
-            });
+            this.marked.update($marked => !$marked);
         }
     }
 
+    public changeFlag(index: number) {
+        this.flag.update($flag => {
+            if ($flag === index) {
+                index = 0;
+            }
+            setFlag({ cardIds: [this.currentCard!.card!.id], flag: index });
+            return index;
+        });
+    }
+
     public showTooltip(message: string) {
         clearTimeout(this.tooltipMessageTimeout);
         this.tooltipMessage.set(message);
@@ -331,6 +339,8 @@ export class ReviewerState {
 
         this._cardData = resp.nextCard;
         this.cardData.set(this._cardData);
+        this.flag.set(this.currentCard?.card?.flags ?? 0);
+        this.marked.set(this._cardData.marked);
         this.answerShown.set(false);
 
         const question = resp.nextCard?.front || "";