Buttons template

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:

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)};

ts/routes/reviewer-bottom/index.svelte

@@ -1,3 +1,22 @@
-<div>
-    Hello from svelte
-</div>
+<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>

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 },
+);