From 758cfa269360d8d75716c46265894af26d674d94 Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Mon, 25 Aug 2025 21:03:40 +0100
Subject: [PATCH] Buttons template

---
 qt/aqt/reviewer.py                     |  4 +++-
 ts/routes/reviewer-bottom/index.scss   |  1 +
 ts/routes/reviewer-bottom/index.svelte | 25 ++++++++++++++++++++++---
 ts/routes/reviewer-bottom/index.ts     |  8 ++++----
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/qt/aqt/reviewer.py b/qt/aqt/reviewer.py
index 2ae054184..b75f64fb3 100644
--- a/qt/aqt/reviewer.py
+++ b/qt/aqt/reviewer.py
@@ -847,7 +847,9 @@ timerStopped = false;
             maxTime = self.card.time_limit() / 1000
         else:
             maxTime = 0
-        self.bottom.web.eval("anki.showQuestion(%s,%d);" % (json.dumps(middle), maxTime))
+        self.bottom.web.eval(
+            "anki.showQuestion(%s,%d);" % (json.dumps(middle), maxTime)
+        )
 
     def _showEaseButtons(self) -> None:
         if not self._states_mutated:
diff --git a/ts/routes/reviewer-bottom/index.scss b/ts/routes/reviewer-bottom/index.scss
index fbe069779..7c9985ba6 100644
--- a/ts/routes/reviewer-bottom/index.scss
+++ b/ts/routes/reviewer-bottom/index.scss
@@ -4,6 +4,7 @@
 @use "../../lib/sass/root-vars";
 @use "../../lib/sass/vars" as *;
 @use "../../lib/sass/card-counts";
+@use "../../lib/sass/buttons";
 
 :root {
     --focus-color: #{palette-of(border-focus)};
diff --git a/ts/routes/reviewer-bottom/index.svelte b/ts/routes/reviewer-bottom/index.svelte
index 049eff39e..b4a9ba53b 100644
--- a/ts/routes/reviewer-bottom/index.svelte
+++ b/ts/routes/reviewer-bottom/index.svelte
@@ -1,3 +1,22 @@
-<div>
-    Hello from svelte
-</div>
\ No newline at end of file
+<div id="outer fancy">
+    <div id="tableinner">
+        <div>
+            <button>Edit</button>
+        </div>
+        <div>
+            <button>Review Buttons</button>
+        </div>
+        <div>
+            <button>More</button>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    #tableinner {
+        width: 100%;
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        justify-items: center;
+    }
+</style>
diff --git a/ts/routes/reviewer-bottom/index.ts b/ts/routes/reviewer-bottom/index.ts
index e4bec417a..d8b7a4c55 100644
--- a/ts/routes/reviewer-bottom/index.ts
+++ b/ts/routes/reviewer-bottom/index.ts
@@ -6,8 +6,8 @@
 */
 
 import { mount } from "svelte";
-import "./index.scss"
-import ReviewerBottom from "./index.svelte"
+import "./index.scss";
+import ReviewerBottom from "./index.svelte";
 
 let time: number; // set in python code
 let timerStopped = false;
@@ -68,5 +68,5 @@ function selectedAnswerButton(): string {
 
 mount(
     ReviewerBottom,
-    {target: document.body},
-)
+    { target: document.body },
+);