From 4da16acc2788d421fbf30f19812a91197ac2a918 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 8 Jun 2026 02:13:07 +0300
Subject: [PATCH] some initial cleanup

---
 .../selectable_list/selectable_list.vue       |   7 +
 .../settings_modal/admin_tabs/users_tab.scss  |  38 +-
 .../settings_modal/admin_tabs/users_tab.vue   | 491 +++++++++---------
 .../settings_modal/settings_modal.scss        |  32 ++
 .../settings_modal_admin_content.vue          |   2 +
 src/i18n/en.json                              |   2 +-
 6 files changed, 324 insertions(+), 248 deletions(-)

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index c3f97782c..80e35efb5 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -83,6 +83,13 @@
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  display: flex;
+  flex-direction: column;
+
+  .list {
+    flex: 1 1 0;
+  }
+
   &-item-inner {
     display: flex;
     align-items: center;
diff --git a/src/components/settings_modal/admin_tabs/users_tab.scss b/src/components/settings_modal/admin_tabs/users_tab.scss
index 2d5a34c6b..892abb02c 100644
--- a/src/components/settings_modal/admin_tabs/users_tab.scss
+++ b/src/components/settings_modal/admin_tabs/users_tab.scss
@@ -1,16 +1,30 @@
-.user-tab {
-  height: 100%;
-}
+.UsersTab {
+  max-height: 100%;
+  display: grid;
+  flex-direction: column;
+  overflow-y: hidden;
 
-.query-label {
-  padding-right: 10px;
-  padding-left: 10px;
-}
+  .filters-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 0.5em 1em;
 
-.filter-input {
-  width: 200px;
-}
+    > div {
+      flex: 0 1 auto;
+    }
 
-.filter-btn-box {
-  text-align: right;
+    .filter {
+      display: block;
+      margin-bottom: 0.5em;
+      min-width: 14em;
+
+      .query-label {
+        margin-bottom: 0.5em;
+      }
+
+      > input {
+        width: 100%;
+      }
+    }
+  }
 }
diff --git a/src/components/settings_modal/admin_tabs/users_tab.vue b/src/components/settings_modal/admin_tabs/users_tab.vue
index 19f31757f..970bf5609 100644
--- a/src/components/settings_modal/admin_tabs/users_tab.vue
+++ b/src/components/settings_modal/admin_tabs/users_tab.vue
@@ -1,249 +1,270 @@
 <template>
-  <div :label="$t('admin_dash.users.management')">
-    <div
-      class="setting-item"
-    >
-      <h2> {{ $t('admin_dash.users.title') }} </h2>
-      <ul class="setting-list">
-        <li>
-          <label class="query-label"> {{ $t('admin_dash.users.labels.query') }} </label>
-          <input
-            v-model="filtersQuery"
-            class="input string-input filter-input"
-            @input="reset()"
+  <div
+    class="UsersTab"
+    :label="$t('admin_dash.users.management')"
+  >
+    <h3>
+      {{ $t('admin_dash.users.title') }}
+    </h3>
+    <div class="filters-section">
+      <label class="filter">
+        <div class="query-label">
+          {{ $t('admin_dash.users.labels.query') }}
+        </div>
+        <input
+          v-model="filtersQuery"
+          class="input string-input filter-input"
+          @input="reset()"
+        >
+      </label>
+      <label class="filter">
+        <div class="query-label">
+          {{ $t('admin_dash.users.labels.name') }}
+        </div>
+        <input
+          v-model="filtersName"
+          class="input string-input filter-input"
+          @input="reset()"
+        >
+      </label>
+      <label class="filter">
+        <div class="query-label">
+          {{ $t('admin_dash.users.labels.email') }}
+        </div>
+        <input
+          v-model="filtersEmail"
+          class="input string-input filter-input"
+          @input="reset()"
+        >
+      </label>
+      <div class="filter">
+        <div class="query-label">
+          {{ $t('admin_dash.users.labels.origin') }}
+        </div>
+        <Select
+          v-model="filtersOrigin"
+          @update:model-value="reset"
+        >
+          <option
+            value="all"
           >
-          <label class="query-label"> {{ $t('admin_dash.users.labels.name') }} </label>
-          <input
-            v-model="filtersName"
-            class="input string-input filter-input"
-            @input="reset()"
+            {{ $t('admin_dash.users.options.all') }}
+          </option>
+          <option
+            value="local"
           >
-          <label class="query-label"> {{ $t('admin_dash.users.labels.email') }} </label>
-          <input
-            v-model="filtersEmail"
-            class="input string-input filter-input"
-            @input="reset()"
+            {{ $t('admin_dash.users.options.only_local') }}
+          </option>
+          <option
+            value="external"
           >
-        </li>
-        <li>
-          <label class="query-label"> {{ $t('admin_dash.users.labels.origin') }} </label>
-          <Select
-            v-model="filtersOrigin"
-            @update:model-value="reset"
+            {{ $t('admin_dash.users.options.only_external') }}
+          </option>
+        </Select>
+      </div>
+      <div class="filter">
+        <div class="query-label">
+          {{ $t('admin_dash.users.labels.activity') }}
+        </div>
+        <Select
+          v-model="filtersActivity"
+          @update:model-value="reset"
+        >
+          <option
+            value="all"
           >
-            <option
-              value="all"
-            >
-              {{ $t('admin_dash.users.options.all') }}
-            </option>
-            <option
-              value="local"
-            >
-              {{ $t('admin_dash.users.options.only_local') }}
-            </option>
-            <option
-              value="external"
-            >
-              {{ $t('admin_dash.users.options.only_external') }}
-            </option>
-          </Select>
-          <label class="query-label"> {{ $t('admin_dash.users.labels.activity') }} </label>
-          <Select
-            v-model="filtersActivity"
-            @update:model-value="reset"
+            {{ $t('admin_dash.users.options.all') }}
+          </option>
+          <option
+            value="active"
           >
-            <option
-              value="all"
-            >
-              {{ $t('admin_dash.users.options.all') }}
-            </option>
-            <option
-              value="active"
-            >
-              {{ $t('admin_dash.users.options.only_active') }}
-            </option>
-            <option
-              value="deactivated"
-            >
-              {{ $t('admin_dash.users.options.only_deactivated') }}
-            </option>
-          </Select>
-          <label class="query-label"> {{ $t('admin_dash.users.labels.privileges') }} </label>
-          <Select
-            v-model="filtersPrivileges"
-            @update:model-value="reset"
+            {{ $t('admin_dash.users.options.only_active') }}
+          </option>
+          <option
+            value="deactivated"
           >
-            <option
-              value="all"
-            >
-              {{ $t('admin_dash.users.options.all') }}
-            </option>
-            <option
-              value="admin"
-            >
-              {{ $t('admin_dash.users.options.only_admins') }}
-            </option>
-            <option
-              value="modsnadmins"
-            >
-              {{ $t('admin_dash.users.options.only_privileged') }}
-            </option>
-            <option
-              value="moderator"
-            >
-              {{ $t('admin_dash.users.options.only_moderators') }}
-            </option>
-          </Select>
-        </li>
-        <li>
-          <Checkbox
-            class="query-label"
-            @update:model-value="v => {filtersNeedApproval = v; reset();}"
+            {{ $t('admin_dash.users.options.only_deactivated') }}
+          </option>
+        </Select>
+      </div>
+      <div class="filter">
+        <div class="query-label">
+          {{ $t('admin_dash.users.labels.privileges') }}
+        </div>
+        <Select
+          v-model="filtersPrivileges"
+          @update:model-value="reset"
+        >
+          <option
+            value="all"
           >
-            {{ $t('admin_dash.users.options.only_unapproved') }}
-          </Checkbox>
-          <Checkbox
-            class="query-label"
-            @update:model-value="v => {filtersUncomfirmed = v; reset();}"
+            {{ $t('admin_dash.users.options.all') }}
+          </option>
+          <option
+            value="admin"
           >
-            {{ $t('admin_dash.users.options.only_unconfirmed') }}
-          </Checkbox>
-        </li>
-      </ul>
-      <PageList
-        ref="userList"
-        :refresh="true"
-        :get-key="i => i"
-        :box-only="true"
-        :page-size="20"
-        :fetch-page="(store, opts) => fetchPage(store, opts)"
-      >
-        <template #header>
-          <Popover
-            ref="dropdown"
-            trigger="click"
-            placement="bottom"
+            {{ $t('admin_dash.users.options.only_admins') }}
+          </option>
+          <option
+            value="modsnadmins"
           >
-            <template #trigger>
-              <button
-                class="button button-default btn"
-              >
-                {{ $t('admin_dash.users.actions.title') }}
-              </button>
-            </template>
-            <template #content>
-              <div class="dropdown-menu">
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmActivate')"
-                  >
-                    {{ $t('admin_dash.users.actions.activate') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmDeactivate')"
-                  >
-                    {{ $t('admin_dash.users.actions.deactivate') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmDelete')"
-                  >
-                    {{ $t('admin_dash.users.actions.delete_user') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmGrantAdmin')"
-                  >
-                    {{ $t('admin_dash.users.actions.grant_admin') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmRevokeAdmin')"
-                  >
-                    {{ $t('admin_dash.users.actions.revoke_admin') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmGrantModerator')"
-                  >
-                    {{ $t('admin_dash.users.actions.grant_moderator') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmRevokeModerator')"
-                  >
-                    {{ $t('admin_dash.users.actions.revoke_moderator') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmApprove')"
-                  >
-                    {{ $t('admin_dash.users.actions.approve') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmConfirm')"
-                  >
-                    {{ $t('admin_dash.users.actions.confirm') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmResendEmail')"
-                  >
-                    {{ $t('admin_dash.users.actions.resend_confirmation_email') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmRequirePasswordChange')"
-                  >
-                    {{ $t('admin_dash.users.actions.require_password_change') }}
-                  </button>
-                </div>
-                <div class="menu-item dropdown-item">
-                  <button
-                    class="main-button"
-                    @click="confirmSelection('confirmDisableMFA')"
-                  >
-                    {{ $t('admin_dash.users.actions.disable_mfa') }}
-                  </button>
-                </div>
-              </div>
-            </template>
-          </Popover>
-        </template>
-        <template #item="{item}">
-          <AdminCard :user-details="item" />
-        </template>
-        <template #load>
-          <span> loading </span>
-        </template>
-        <template #empty>
-          <span> no users </span>
-        </template>
-      </PageList>
+            {{ $t('admin_dash.users.options.only_privileged') }}
+          </option>
+          <option
+            value="moderator"
+          >
+            {{ $t('admin_dash.users.options.only_moderators') }}
+          </option>
+        </Select>
+      </div>
+      <div class="filter">
+        <Checkbox
+          @update:model-value="v => {filtersNeedApproval = v; reset();}"
+        >
+          {{ $t('admin_dash.users.options.only_unapproved') }}
+        </Checkbox>
+      </div>
+      <div class="filter">
+        <Checkbox
+          @update:model-value="v => {filtersUncomfirmed = v; reset();}"
+        >
+          {{ $t('admin_dash.users.options.only_unconfirmed') }}
+        </Checkbox>
+      </div>
     </div>
+    <PageList
+      ref="userList"
+      :refresh="true"
+      :get-key="i => i"
+      :box-only="true"
+      :page-size="20"
+      :fetch-page="(store, opts) => fetchPage(store, opts)"
+    >
+      <template #header>
+        <Popover
+          ref="dropdown"
+          trigger="click"
+          placement="bottom"
+        >
+          <template #trigger>
+            <button
+              class="button button-default btn"
+            >
+              {{ $t('admin_dash.users.actions.title') }}
+            </button>
+          </template>
+          <template #content>
+            <div class="dropdown-menu">
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmActivate')"
+                >
+                  {{ $t('admin_dash.users.actions.activate') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmDeactivate')"
+                >
+                  {{ $t('admin_dash.users.actions.deactivate') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmDelete')"
+                >
+                  {{ $t('admin_dash.users.actions.delete_user') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmGrantAdmin')"
+                >
+                  {{ $t('admin_dash.users.actions.grant_admin') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmRevokeAdmin')"
+                >
+                  {{ $t('admin_dash.users.actions.revoke_admin') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmGrantModerator')"
+                >
+                  {{ $t('admin_dash.users.actions.grant_moderator') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmRevokeModerator')"
+                >
+                  {{ $t('admin_dash.users.actions.revoke_moderator') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmApprove')"
+                >
+                  {{ $t('admin_dash.users.actions.approve') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmConfirm')"
+                >
+                  {{ $t('admin_dash.users.actions.confirm') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmResendEmail')"
+                >
+                  {{ $t('admin_dash.users.actions.resend_confirmation_email') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmRequirePasswordChange')"
+                >
+                  {{ $t('admin_dash.users.actions.require_password_change') }}
+                </button>
+              </div>
+              <div class="menu-item dropdown-item">
+                <button
+                  class="main-button"
+                  @click="confirmSelection('confirmDisableMFA')"
+                >
+                  {{ $t('admin_dash.users.actions.disable_mfa') }}
+                </button>
+              </div>
+            </div>
+          </template>
+        </Popover>
+      </template>
+      <template #item="{item}">
+        <AdminCard :user-details="item" />
+      </template>
+      <template #load>
+        <span> loading </span>
+      </template>
+      <template #empty>
+        <span> no users </span>
+      </template>
+    </PageList>
     <GenericConfirm
       ref="confirmActivate"
       :title="$t('admin_dash.users.actions.confirm_multi.title')"
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 7d6e17244..e1405a42f 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -36,6 +36,38 @@
     margin-top: 0.75em;
   }
 
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    align-items: end;
+
+    .header-buttons {
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: end;
+      align-items: end;
+
+      &:not(.btn-group) {
+        gap: 0.5em;
+      }
+
+      .header-text {
+        flex: 1 0 auto;
+      }
+    }
+
+    .button-default {
+      flex: 0 0 auto;
+      padding: 0.5em;
+      font-size: 1rem;
+    }
+
+    .popover-wrapper {
+      display: flex;
+    }
+  }
+
   p {
     line-height: 1.5;
     margin-left: 2em;
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index 1daa2810f..32f22c4b5 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -88,6 +88,8 @@
       :label="$t('admin_dash.tabs.users')"
       icon="user"
       data-tab-name="users"
+      full-width
+      full-height
     >
       <UsersTab />
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 04ee45028..0e646e7de 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1291,7 +1291,7 @@
     "users": {
       "title": "Users",
       "labels": {
-        "query": "Query",
+        "query": "Search",
         "name": "Name",
         "email": "Email",
         "origin": "Origin",