accounts: add header to "actions" and "search options"

html/admin.html

@@ -593,6 +593,7 @@
                         <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
                         <span class="button ~neutral @low center -ml-8" id="accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
                     </div>
+                    <div class="supra py-1 sm">{{ .strings.actions }}</div>
                     <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">
@@ -617,11 +618,12 @@
                         <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="supra py-1 sm hidden" id="accounts-search-options-header">{{ .strings.searchOptions }}</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>
-                    <div class="card @low accounts-header table-responsive mt-8">
+                    <div class="card @low accounts-header table-responsive mt-2">
                         <table class="table text-base leading-4">
                             <thead>
                                 <tr>

lang/admin/en-us.json

@@ -120,7 +120,9 @@
         "sortingBy": "Sorting By",
         "filters": "Filters",
         "clickToRemoveFilter": "Click to remove this filter.",
-        "clearSearch": "Clear search"
+        "clearSearch": "Clear search",
+        "actions": "Actions",
+        "searchOptions": "Search Options"
     },
     "notifications": {
         "changedEmailAddress": "Changed email address of {n}.",

ts/modules/accounts.ts

@@ -768,6 +768,8 @@ export class accountsList {
     private _activeSortColumn: string;
 
     private _sortingByButton = document.getElementById("accounts-sort-by-field") as HTMLButtonElement;
+    private _filterArea = document.getElementById("accounts-filter-area");
+    private _searchOptionsHeader = document.getElementById("accounts-search-options-header");
 
     // Whether the "Extend expiry" is extending or setting an expiry.
     private _settingExpiry = false;
@@ -790,6 +792,17 @@ export class accountsList {
         }
     }
 
+    showHideSearchOptionsHeader = () => {
+        const sortingBy = !(this._sortingByButton.parentElement.classList.contains("hidden"));
+        const hasFilters = this._filterArea.textContent != "";
+        console.log("sortingBy", sortingBy, "hasFilters", hasFilters);
+        if (sortingBy || hasFilters) {
+            this._searchOptionsHeader.classList.remove("hidden");
+        } else {
+            this._searchOptionsHeader.classList.add("hidden");
+        }
+    }
+
     private _queries: { [field: string]: { name: string, getter: string, bool: boolean, string: boolean, date: boolean, dependsOnTableHeader?: string, show?: boolean }} = {
         "id": {
             name: "Jellyfin ID",
@@ -892,8 +905,7 @@ export class accountsList {
     }
 
     search = (query: String): string[] => {
-        const filterArea = document.getElementById("accounts-filter-area");
-        filterArea.textContent = "";
+        this._filterArea.textContent = "";
 
         query = query.toLowerCase();
         let result: string[] = [...this._ordering];
@@ -970,7 +982,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", "mt-2");
+                    filterCard.classList.add("button", "~" + (boolState ? "positive" : "critical"), "@high", "center", "m-2");
                     filterCard.innerHTML = `
                     <span class="font-bold mr-2">${queryFormat.name}</span>
                     <i class="text-2xl ri-${boolState? "checkbox" : "close"}-circle-fill"></i>
@@ -983,7 +995,7 @@ export class accountsList {
                         this._search.oninput((null as Event));
                     })
 
-                    filterArea.appendChild(filterCard);
+                    this._filterArea.appendChild(filterCard);
 
                     // console.log("is bool, state", boolState);
                     // So removing elements doesn't affect us
@@ -1004,7 +1016,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", "mt-2", "h-full");
+                filterCard.classList.add("button", "~neutral", "@low", "center", "m-2", "h-full");
                 filterCard.innerHTML = `
                 <span class="font-bold mr-2">${queryFormat.name}:</span> "${split[1]}"
                 `;
@@ -1017,7 +1029,7 @@ export class accountsList {
                     this._search.oninput((null as Event));
                 })
 
-                filterArea.appendChild(filterCard);
+                this._filterArea.appendChild(filterCard);
 
                 let cachedResult = [...result];
                 for (let id of cachedResult) {
@@ -1048,7 +1060,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", "mt-2", "h-full");
+                filterCard.classList.add("button", "~neutral", "@low", "center", "m-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]}
                 `;
@@ -1062,7 +1074,7 @@ export class accountsList {
                     this._search.oninput((null as Event));
                 })
                 
-                filterArea.appendChild(filterCard);
+                this._filterArea.appendChild(filterCard);
 
                 let cachedResult = [...result];
                 for (let id of cachedResult) {
@@ -1807,6 +1819,7 @@ export class accountsList {
             }
             this.setVisibility(this.search(query), true);
             this._checkCheckCount();
+            this.showHideSearchOptionsHeader();
         };
         this._search.oninput = onchange;
 
@@ -1869,9 +1882,11 @@ export class accountsList {
             } else {
                 this.setVisibility(this.search(this._search.value), true);
             }
+            this.showHideSearchOptionsHeader();
         });
 
         defaultSort();
+        this.showHideSearchOptionsHeader();
 
         const filterList = document.getElementById("accounts-filter-list");