From 6f452c62de3f93b38ae0bdbac8a14d1352dd4f4d Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Wed, 14 Jun 2023 17:15:24 +0100
Subject: [PATCH] accounts: fix search bugs, adjust top bar layout

search bar is now massive with a small filter button next to it.
Action buttons are on their own row.
Also fixed dealing with going from a search with filters in to an empty
one, search() is now called for any change at all to the input.
---
 css/base.css           |  9 ++++--
 html/admin.html        | 68 ++++++++++++++++++++----------------------
 ts/modules/accounts.ts | 28 +++++++++--------
 3 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/css/base.css b/css/base.css
index fbb1e60..f912d3e 100644
--- a/css/base.css
+++ b/css/base.css
@@ -490,10 +490,10 @@ a:hover:not(.lang-link):not(.\~urge), a:active:not(.lang-link):not(.\~urge) {
     text-align: center;
 }
 
-.search {
+/* .search {
     max-width: 15rem;
     min-width: 10rem;
-}
+} */
 
 td.img-circle {
     width: 32px;
@@ -548,6 +548,11 @@ div.card:contains(section.banner.footer) {
     padding-bottom: 0px !important
 }
 
+.mx-0i {
+    margin-left: 0px !important;
+    margin-right: 0px !important
+}
+
 .text-center-i {
     text-align: center !important;
 }
diff --git a/html/admin.html b/html/admin.html
index 4c297c0..6efbe1f 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -580,45 +580,43 @@
             </div>
             <div id="tab-accounts" class="unfocused">
                 <div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
-                    <div class="flex-expand row">
-                        <div class="row w-6/12">
-                            <span class="text-3xl font-bold mr-2 col">{{ .strings.accounts }}</span>
-                            <input type="search" class="col sm field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
-                            <div id="accounts-filter-dropdown" class="col sm dropdown pb-0i" tabindex="0">
-                                <span class="h-100 sm button ~neutral @low center mb-2" id="accounts-filter-button">{{ .strings.filters }}</span>
-                                <div class="dropdown-display">
-                                    <div class="card ~neutral @low mt-2" id="accounts-filter-list">
-                                        <p class="supra pb-2">{{ .strings.filters }}</p>
-                                    </div>
+                    <div class="flex-expand align-middle">
+                        <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
+                        <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
+                        <div id="accounts-filter-dropdown" class="dropdown" tabindex="0">
+                            <span class="h-100 button ~neutral @low center ml-4" id="accounts-filter-button">{{ .strings.filters }}</span>
+                            <div class="dropdown-display">
+                                <div class="card ~neutral @low mt-2" id="accounts-filter-list">
+                                    <p class="supra pb-2">{{ .strings.filters }}</p>
                                 </div>
                             </div>
                         </div>
-                        <div class="row">
-                            <span class="col sm button ~neutral @low center mb-2" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                            <div id="accounts-announce-dropdown" class="col sm dropdown pb-0i" tabindex="0">
-                                <span class="h-100 sm button ~info @low center mb-2" id="accounts-announce">{{ .strings.announce }}</span>
-                                <div class="dropdown-display">
-                                    <div class="card ~neutral @low">
-                                        <span class="supra sm">{{ .strings.templates }}</span>
-                                        <div id="accounts-announce-templates"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="col sm button ~urge @low center mb-2" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
-                            <span class="col sm button ~warning @low center mb-2" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
-                            <div id="accounts-disable-enable-dropdown" class="col sm dropdown manual pb-0i" tabindex="0">
-                                <span class="h-100 sm button ~positive @low center mb-2" id="accounts-disable-enable">{{ .strings.disable }}</span>
-                                <div class="dropdown-display">
-                                    <div class="card ~neutral @low">
-                                        <span class="button ~urge sm full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <span class="col sm button ~info @low center mb-2 unfocused" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
-                            <span class="col sm button ~critical @low center mb-2" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
-                        </div>
                     </div>
-                    <div class="row">
+                    <div class="row -mx-2">
+                        <span class="col button ~neutral @low center max-w-[20%]" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
+                        <div id="accounts-announce-dropdown" class="col dropdown pb-0i max-w-[20%]" tabindex="0">
+                            <span class="w-100 button ~info @low center" id="accounts-announce">{{ .strings.announce }}</span>
+                            <div class="dropdown-display">
+                                <div class="card ~neutral @low">
+                                    <span class="supra sm">{{ .strings.templates }}</span>
+                                    <div id="accounts-announce-templates"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <span class="col button ~urge @low center max-w-[20%]" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
+                        <span class="col button ~warning @low center max-w-[20%]" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
+                        <div id="accounts-disable-enable-dropdown" class="col dropdown manual pb-0i max-w-[20%]" tabindex="0">
+                            <span class="w-100 button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span>
+                            <div class="dropdown-display">
+                                <div class="card ~neutral @low">
+                                    <span class="button ~urge full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <span class="col button ~info @low center unfocused max-w-[20%]" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
+                        <span class="col button ~critical @low center max-w-[20%]" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
+                    </div>
+                    <div class="row -mx-2">
                         <button type="button" class="button ~neutral @low center ml-2 mr-2 hidden"><span id="accounts-sort-by-field"></span> <span class="ml-2">&times;</span></button>
                         <span id="accounts-filter-area"></span>
                     </div>
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 74f27e9..ff5b853 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -970,7 +970,7 @@ export class accountsList {
                     // FIXME: Generate filter card for each filter class
                     const filterCard = document.createElement("span");
                     filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
-                    filterCard.classList.add("button", "~" + (boolState ? "positive" : "critical"), "@high", "center", "ml-2", "mr-2");
+                    filterCard.classList.add("button", "~" + (boolState ? "positive" : "critical"), "@high", "center", "ml-2", "mr-2", "mt-2");
                     filterCard.innerHTML = `
                     <span class="font-bold mr-2">${queryFormat.name}</span>
                     <i class="text-2xl ri-${boolState? "checkbox" : "close"}-circle-fill"></i>
@@ -1004,7 +1004,7 @@ export class accountsList {
             if (queryFormat.string) {
                 const filterCard = document.createElement("span");
                 filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
-                filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "h-full");
+                filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "mt-2", "h-full");
                 filterCard.innerHTML = `
                 <span class="font-bold mr-2">${queryFormat.name}:</span> "${split[1]}"
                 `;
@@ -1048,7 +1048,7 @@ export class accountsList {
 
                 const filterCard = document.createElement("span");
                 filterCard.ariaLabel = window.lang.strings("clickToRemoveFilter");
-                filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "h-full");
+                filterCard.classList.add("button", "~neutral", "@low", "center", "ml-2", "mr-2", "mt-2", "h-full");
                 filterCard.innerHTML = `
                 <span class="font-bold mr-2">${queryFormat.name}:</span> ${(compareType == 1) ? window.lang.strings("after")+" " : ((compareType == -1) ? window.lang.strings("before")+" " : "")}${split[1]}
                 `;
@@ -1138,10 +1138,10 @@ export class accountsList {
             this._modifySettings.classList.add("unfocused");
             this._deleteUser.classList.add("unfocused");
             if (window.emailEnabled || window.telegramEnabled) {
-                this._announceButton.classList.add("unfocused");
+                this._announceButton.parentElement.classList.add("unfocused");
             }
             this._extendExpiry.classList.add("unfocused");
-            this._disableEnable.classList.add("unfocused");
+            this._disableEnable.parentElement.classList.add("unfocused");
             this._sendPWR.classList.add("unfocused");
         } else {
             let visibleCount = 0;
@@ -1161,7 +1161,7 @@ export class accountsList {
             this._deleteUser.classList.remove("unfocused");
             this._deleteUser.textContent = window.lang.quantity("deleteUser", list.length);
             if (window.emailEnabled || window.telegramEnabled) {
-                this._announceButton.classList.remove("unfocused");
+                this._announceButton.parentElement.classList.remove("unfocused");
             }
             let anyNonExpiries = list.length == 0 ? true : false;
             let allNonExpiries = true;
@@ -1179,7 +1179,7 @@ export class accountsList {
                 }
                 if (showDisableEnable && this._users[id].disabled != this._shouldEnable) {
                     showDisableEnable = false;
-                    this._disableEnable.classList.add("unfocused");
+                    this._disableEnable.parentElement.classList.add("unfocused");
                 }
                 if (!showDisableEnable && anyNonExpiries) { break; }
                 if (!this._users[id].lastNotifyMethod()) {
@@ -1215,7 +1215,7 @@ export class accountsList {
                     this._disableEnable.classList.add("~warning");
                     this._disableEnable.classList.remove("~positive");
                 }
-                this._disableEnable.classList.remove("unfocused");
+                this._disableEnable.parentElement.classList.remove("unfocused");
                 this._disableEnable.textContent = message;
             }
         }
@@ -1764,13 +1764,13 @@ export class accountsList {
         this._deleteUser.classList.add("unfocused");
 
         this._announceButton.onclick = this.announce;
-        this._announceButton.classList.add("unfocused");
+        this._announceButton.parentElement.classList.add("unfocused");
 
         this._extendExpiry.onclick = () => { this.extendExpiry(); };
         this._extendExpiry.classList.add("unfocused");
 
         this._disableEnable.onclick = this.enableDisableUsers;
-        this._disableEnable.classList.add("unfocused");
+        this._disableEnable.parentElement.classList.add("unfocused");
 
         this._enableExpiry.onclick = () => { this.extendExpiry(true); };
         this._enableExpiryNotify.onchange = () => {
@@ -1796,17 +1796,19 @@ export class accountsList {
             this._deleteNotify.checked = false;
         }*/
 
-        this._search.oninput = () => {
+        const onchange = () => {
             const query = this._search.value;
             if (!query) {
-                this.setVisibility(this._ordering, true);
+                // this.setVisibility(this._ordering, true);
                 this._inSearch = false;
             } else {
                 this._inSearch = true;
-                this.setVisibility(this.search(query), true);
+                // this.setVisibility(this.search(query), true);
             }
+            this.setVisibility(this.search(query), true);
             this._checkCheckCount();
         };
+        this._search.oninput = onchange;
 
         this._announceTextarea.onkeyup = this.loadPreview;
         addDiscord = newDiscordSearch(window.lang.strings("linkDiscord"), window.lang.strings("searchDiscordUser"), window.lang.strings("add"), (user: DiscordUser, id: string) => {