From eccaae3c40f1c801bc6ce66892b32b6185fecaac Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Fri, 14 Nov 2025 17:21:53 +0000
Subject: [PATCH] Added: Timer

---
 .../reviewer-bottom/ReviewerBottom.svelte     |  8 +++-
 .../reviewer/reviewer-bottom/Timer.svelte     | 44 +++++++++++++++++++
 2 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 ts/routes/reviewer/reviewer-bottom/Timer.svelte

diff --git a/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte b/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
index 0ac36c2f7..50c54fe75 100644
--- a/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
+++ b/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte
@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { ReviewerState } from "../reviewer";
     import Remaining from "./Remaining.svelte";
     import More from "./More.svelte";
+    import Timer from "./Timer.svelte";
 
     export let state: ReviewerState;
 
@@ -50,7 +51,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 {tr.studyingShowAnswer()}
             </button>
         {/if}
-        <span class="disappearing"></span>
+        <div class="disappearing more">
+            <Timer {state}></Timer>
+        </div>
         <div class="disappearing more">
             <More {state}></More>
         </div>
@@ -79,7 +82,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .more {
-        text-align: right;
+        // text-align: right;
+        direction: rtl;
     }
 
     @media (max-width: 583px) {
diff --git a/ts/routes/reviewer/reviewer-bottom/Timer.svelte b/ts/routes/reviewer/reviewer-bottom/Timer.svelte
new file mode 100644
index 000000000..92bd7c67c
--- /dev/null
+++ b/ts/routes/reviewer/reviewer-bottom/Timer.svelte
@@ -0,0 +1,44 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import type { ReviewerState } from "../reviewer";
+    import { onMount } from "svelte";
+
+    export let state: ReviewerState;
+
+    let text = "";
+
+    function step() {
+        text = formatTime(Date.now() - state.beginAnsweringMs);
+    }
+
+    onMount(() => {
+        const interval = setInterval(step, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    });
+    step();
+
+    function formatTime(time: number) {
+        const seconds = time / 1000;
+        return `${Math.floor(seconds / 60)
+            .toFixed(0)
+            .padStart(2, "0")}:${(seconds % 60).toFixed(0).padStart(2, "0")}`;
+    }
+</script>
+
+<span>
+    <div>
+        {text}
+    </div>
+</span>
+
+<style>
+    div {
+        width: 88px;
+        text-align: center;
+    }
+</style>