Fix dupes, but also make sticky, and centered to draw more attention

qt/aqt/data/web/css/editor.scss

@@ -1,6 +1,10 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
+html {
+    background: var(--bg-color);
+}
+
 #fields {
     display: flex;
     flex-direction: column;
@@ -22,6 +26,10 @@
 .field {
     border: 1px solid var(--border);
     background: var(--frame-bg);
+
+    &.dupe {
+        background: var(--flag1-bg);
+    }
 }
 
 .fname {
@@ -46,6 +54,8 @@ body {
     top: 0;
     left: 0;
     padding: 2px;
+
+    background: var(--bg-color);
 }
 
 .topbuts > * {
@@ -113,12 +123,20 @@ button.highlighted {
     }
 }
 
-.dupe {
-    background: var(--flag1-bg);
-}
+#dupes {
+    position: sticky;
+    bottom: 0;
 
-#dupes a {
-    color: var(--link);
+    text-align: center;
+    background-color: var(--bg-color);
+
+    &.is-inactive {
+        display: none;
+    }
+
+    a {
+        color: var(--link);
+    }
 }
 
 .drawing {

qt/aqt/data/web/js/editor.ts

@@ -559,12 +559,15 @@ function adjustFieldAmount(amount: number): void {
     }
 }
 
-function forField<T>(values: T[], func: (value: T, field: EditorField, index: number) => void): void {
+function forField<T>(
+    values: T[],
+    func: (value: T, field: EditorField, index: number) => void
+): void {
     const fieldContainer = document.getElementById("fields");
     const fields = [...fieldContainer.children] as EditorField[];
 
     for (const [index, field] of fields.entries()) {
-        func(values[index], field, index)
+        func(values[index], field, index);
     }
 }
 
@@ -576,13 +579,20 @@ function setFields(fields: [string, string][]): void {
         .getPropertyValue("--text-fg");
 
     adjustFieldAmount(fields.length);
-    forField(fields, ([name, fieldContent], field, index) => field.initialize(index, name, color, fieldContent));
+    forField(fields, ([name, fieldContent], field, index) =>
+        field.initialize(index, name, color, fieldContent)
+    );
 
     maybeDisableButtons();
 }
 
-function setBackgrounds(cols: "dupe"[]) {
-    forField(cols, (value, field) => field.classList.toggle("dupe", value === "dupe"));
+function setBackgrounds(cols: ("dupe" | "")[]) {
+    forField(cols, (value, field) =>
+        field.editingContainer.classList.toggle("dupe", value === "dupe")
+    );
+    document
+        .querySelector("#dupes")
+        .classList.toggle("is-inactive", !cols.includes("dupe"));
 }
 
 function setFonts(fonts: [string, number, boolean][]): void {
@@ -595,14 +605,6 @@ function setNoteId(id: number): void {
     currentNoteId = id;
 }
 
-function showDupes(): void {
-    $("#dupes").show();
-}
-
-function hideDupes(): void {
-    $("#dupes").hide();
-}
-
 let pasteHTML = function (
     html: string,
     internal: boolean,

qt/aqt/editor.py

@@ -73,8 +73,9 @@ audio = (
 
 _html = """
 <style>
-html { background: %s; }
-#topbutsOuter { background: %s; }
+:root {
+    --bg-color: %s;
+}
 </style>
 <div>
     <div id="topbutsOuter">
@@ -82,11 +83,9 @@ html { background: %s; }
     </div>
     <div id="fields">
     </div>
-</div>
-<div id="dupes" style="display:none;">
-    <a href="#" onclick="pycmd('dupes');return false;">
-%s
-    </a>
+    <div id="dupes" class="is-inactive">
+        <a href="#" onclick="pycmd('dupes');return false;">%s</a>
+    </div>
 </div>
 """
 
@@ -219,7 +218,7 @@ class Editor:
         bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
-            _html % (bgcol, bgcol, topbuts, tr(TR.EDITING_SHOW_DUPLICATES)),
+            _html % (bgcol, topbuts, tr(TR.EDITING_SHOW_DUPLICATES)),
             css=["css/editor.css"],
             js=["js/vendor/jquery.min.js", "js/editor.js"],
             context=self,
@@ -534,9 +533,7 @@ class Editor:
         err = self.note.dupeOrEmpty()
         if err == 2:
             cols[0] = "dupe"
-            self.web.eval("showDupes();")
-        else:
-            self.web.eval("hideDupes();")
+
         self.web.eval("setBackgrounds(%s);" % json.dumps(cols))
 
     def showDupes(self):