From 3178ca7572264a934341520b5cbe7ba0bd1015fa Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Tue, 25 Nov 2025 17:13:43 +0000
Subject: [PATCH] settings: remove badge note, add tooltips to them

change required and restart required badges to icons with tooltips, and
removed the note at the top of settings. As a result, the sidebar is
much thinner.
---
 css/tooltip.css        | 10 ++++++----
 html/admin.html        |  1 -
 lang/admin/en-us.json  |  4 +++-
 ts/modules/settings.ts | 45 +++++++++++++++++++++++++++---------------
 4 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/css/tooltip.css b/css/tooltip.css
index fc92a1d..c6a193c 100644
--- a/css/tooltip.css
+++ b/css/tooltip.css
@@ -22,15 +22,17 @@
 }
 
 .tooltip.below .content {
-    top: 2.5rem;
-    left: 0;
+    top: calc(100% + 0.125rem);
+    left: 50%;
     right: 0;
+    transform: translateX(-50%);
 }
 
 .tooltip.above .content {
-    bottom: 2.5rem;
-    left: 0;
+    bottom: calc(100% + 0.125rem);
+    left: 50%;
     right: 0;
+    transform: translateX(-50%);
 }
 
 .tooltip.darker .content {
diff --git a/html/admin.html b/html/admin.html
index fddb5c8..c8869a6 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -921,7 +921,6 @@
                                 <input type="search" class="field ~neutral @low input settings-section-button justify-between" id="settings-search" placeholder="{{ .strings.search }}">
                                 <button class="button ~neutral @low center -ml-10 rounded-s-none settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></button>
                             </div>
-                            <aside class="aside sm ~urge dark:~d_info @low" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info dark:~d_warning">R</span> indicates changes require a restart.</aside>
                             <div id="settings-loader" class="flex flex-row flex-wrap gap-2">
                                 <span class="button ~neutral @low justify-center grow" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
                                 <a class="button ~urge dark:~d_info @low justify-center grow" target="_blank" href="https://wiki.jfa-go.com"><span class="flex">{{ .strings.wiki }} <i class="ri-book-shelf-line ml-2"></i></a>
diff --git a/lang/admin/en-us.json b/lang/admin/en-us.json
index 65e0244..30fc673 100644
--- a/lang/admin/en-us.json
+++ b/lang/admin/en-us.json
@@ -209,7 +209,9 @@
         "backupCanBeFound": "The backup can be found on the server at {filepath}.",
         "backupCanDownload": "Alternatively, click below to download the backup.",
         "wikiPage": "Wiki Page",
-        "wiki": "Wiki"
+        "wiki": "Wiki",
+        "restartRequired": "Restart required",
+        "required": "Required"
     },
     "notifications": {
         "pathCopied": "Full path copied to clipboard.",
diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts
index 2370a68..ea53477 100644
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@@ -74,6 +74,9 @@ const splitDependant = (section: string, dep: string): string[] => {
     return parts
 };
 
+let RestartRequiredBadge: HTMLElement;
+let RequiredBadge: HTMLElement;
+
 class DOMSetting {
     protected _hideEl: HTMLElement;
     protected _input: HTMLInputElement;
@@ -133,12 +136,10 @@ class DOMSetting {
     set required(state: boolean) {
         if (state) {
             this._required.classList.remove("unfocused");
-            this._required.classList.add("badge", "~critical");
-            this._required.textContent = "*";
+            this._required.innerHTML = RequiredBadge.outerHTML;
         } else {
             this._required.classList.add("unfocused");
-            this._required.classList.remove("badge", "~critical");
-            this._required.textContent = "";
+            this._required.textContent = ``;
         }
     }
     
@@ -146,12 +147,10 @@ class DOMSetting {
     set requires_restart(state: boolean) {
         if (state) {
             this._restart.classList.remove("unfocused");
-            this._restart.classList.add("badge", "~info", "dark:~d_warning");
-            this._restart.textContent = "R";
+            this._restart.innerHTML = RestartRequiredBadge.outerHTML;
         } else {
             this._restart.classList.add("unfocused");
-            this._restart.classList.remove("badge", "~info", "dark:~d_warning");
-            this._restart.textContent = "";
+            this._restart.textContent = ``;
         }
     }
 
@@ -619,7 +618,7 @@ class groupButton {
         this._button.innerHTML = `
         <span class="group-button-name"></span>
         <label>
-            <i class="icon ri-arrow-down-s-line"></i>
+            <i class="icon ri-arrow-down-s-line text-xl"></i>
             <input class="unfocused" type="checkbox">
         </label>
         `;
@@ -1072,14 +1071,28 @@ export class settingsList {
                 this._searchbox.oninput(null);
             };
         };
+        
+        // Create (restart)required badges (can't do on load as window.lang is unset)
+        RestartRequiredBadge = (() => {
+            const rr = document.createElement("span");
+            rr.classList.add("tooltip", "below");
+            rr.innerHTML = `
+                <span class="badge ~info dark:~d_warning"><i class="icon ri-refresh-line align-baseline h-full"></i></span>
+                <span class="content sm">${window.lang.strings("restartRequired")}</span>
+            `;
 
-        // What possessed me to put this in the DOMSelect constructor originally? like what????????
-        const message = document.getElementById("settings-message") as HTMLElement;
-        message.innerHTML = window.lang.var("strings",
-                                            "settingsRequiredOrRestartMessage",
-                                            `<span class="badge ~critical">*</span>`,
-                                            `<span class="badge ~info dark:~d_warning">R</span>`
-        );
+            return rr;
+        })();
+        RequiredBadge = (() => {
+            const r = document.createElement("span");
+            r.classList.add("tooltip", "below");
+            r.innerHTML = `
+                <span class="badge ~critical"><i class="icon ri-asterisk align-baseline h-full"></i></span>
+                <span class="content sm">${window.lang.strings("required")}</span>
+            `;
+
+            return r;
+        })();
     }
 
     private _addMatrix = () => {