fix mess in pagelist, add more options to customize page lists, fix layout in files

src/components/settings_modal/admin_tabs/admin_card.vue

@@ -17,67 +17,88 @@
         </div>
         <div
           v-else
-          class="setting-item"
         >
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="top_level_expanded = false"
-          >
-            {{ $t('admin_dash.users.collapse_user') }}
-          </button><br>
-          <div v-if="is_local">
-            <Checkbox
-              :model-value="is_admin"
-              @update:model-value="v => toggle_admin(v)"
+          <ul class="setting-list">
+            <li>
+              <button
+                class="button button-default btn"
+                type="button"
+                @click="top_level_expanded = false"
+              >
+                {{ $t('admin_dash.users.collapse_user') }}
+              </button>
+            </li>
+            <li
+              v-if="is_local"
             >
-              {{ $t('admin_dash.users.is_admin') }}
-            </Checkbox><br>
-            <Checkbox
-              :model-value="is_moderator"
-              @update:model-value="v => toggle_moderator(v)"
+              <Checkbox
+                :model-value="is_admin"
+                @update:model-value="v => toggle_admin(v)"
+              >
+                {{ $t('admin_dash.users.is_admin') }}
+              </Checkbox>
+            </li>
+            <li
+              v-if="is_local"
+            >
+              <Checkbox
+                :model-value="is_moderator"
+                @update:model-value="v => toggle_moderator(v)"
+              >
+                {{ $t('admin_dash.users.is_moderator') }}
+              </Checkbox>
+            </li>
+            <li
+              v-if="is_local && !just_confirmed && !is_confirmed"
             >
-              {{ $t('admin_dash.users.is_moderator') }}
-            </Checkbox><br>
-            <div v-if="!just_confirmed && !is_confirmed">
               <button
                 class="button button-default btn"
                 type="button"
                 @click="confirm_user()"
               >
                 {{ $t('admin_dash.users.is_confirmed') }}
-              </button><br>
+              </button>
+            </li>
+            <li
+              v-if="is_local && !just_confirmed && !is_confirmed"
+            >
               <button
                 class="button button-default btn"
                 type="button"
                 @click="resend_confirmation_email()"
               >
                 {{ $t('admin_dash.users.resend_confirmation_email') }}
-              </button><br>
-            </div>
-            <div v-if="!is_approved">
+              </button>
+            </li>
+            <li
+              v-if="is_local && !is_approved"
+            >
               <button
                 class="button button-default btn"
                 type="button"
                 @click="toggle_approval(true)"
               >
                 {{ $t('admin_dash.users.approve') }}
-              </button><br>
-            </div>
-          </div>
-          <Checkbox
-            :model-value="is_activated"
-            @update:model-value="v => toggle_activation(v)"
-          >
-            {{ $t('admin_dash.users.is_active') }}
-          </Checkbox><br>
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="delete_user()"
-          >
-            {{ $t('admin_dash.users.delete_user') }}
-          </button>
+              </button>
+            </li>
+            <li>
+              <Checkbox
+                :model-value="is_activated"
+                @update:model-value="v => toggle_activation(v)"
+              >
+                {{ $t('admin_dash.users.is_active') }}
+              </Checkbox>
+            </li>
+            <li>
+              <button
+                class="button button-default btn"
+                type="button"
+                @click="delete_user()"
+              >
+                {{ $t('admin_dash.users.delete_user') }}
+              </button>
+            </li>
+          </ul>
         </div>
         <div v-if="!timeline_expanded">
           <button
@@ -111,6 +132,12 @@
             <template #item="{item}">
               <AdminStatusCard :status_details="item" />
             </template>
+            <template #empty>
+              <p> {{ $t('admin_dash.users.user_has_no_posts') }} </p>
+            </template>
+            <template #load>
+              <p> {{ $t('admin_dash.users.loading') }} </p>
+            </template>
           </PageList>
         </div>
         <div v-if="!json_expanded">

src/components/settings_modal/admin_tabs/admin_status_card.js

@@ -1,6 +1,6 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
-import StatusBody from 'src/components/status_body/status_body.vue'
+import Status from 'src/components/status/status.vue'
 import { parseStatus } from 'src/services/entity_normalizer/entity_normalizer.service.js'
 
 const AdminStatusCard = {
@@ -30,7 +30,7 @@ const AdminStatusCard = {
    components: {
       Checkbox,
       Select,
-      StatusBody,
+      Status,
    },
    mounted () {
       this.$store.dispatch('adminChangeStatusScope', { opts: { id: this.status_details.id }}).then(res => parseStatus(res)).then(s => this.status_cache = s)

src/components/settings_modal/admin_tabs/admin_status_card.vue

@@ -1,55 +1,80 @@
 <template>
   <div class="setting-item">
     <h2> {{ $t('admin_dash.users.title_info') }}: </h2>
-    <span> {{ $t('admin_dash.users.status_id') }}: {{ status_details.id }} </span>
-    <span> {{ $t('admin_dash.users.created_at') }}: {{ status_details.created_at }} </span>
-    <span v-if="typeof(status_details.edited_at) !== 'undefined'"> {{ $t('admin_dash.users.edited_at') }}: {{ status_details.edited_at }} </span>
+    <ul
+      class="setting-list"
+    >
+      <li>
+        <span> {{ $t('admin_dash.users.status_id') }}: {{ status_details.id }} </span>
+      </li>
+      <li>
+        <span> {{ $t('admin_dash.users.created_at') }}: {{ new Date(status_details.created_at).toLocaleString() }} </span>
+      </li>
+      <li>
+        <span v-if="status_details.edited_at !== null"> {{ $t('admin_dash.users.edited_at') }}: {{ new Date(status_details.edited_at).toLocaleString() }} </span>
+      </li>
+    </ul>
     <h2> {{ $t('admin_dash.users.title_content') }}: </h2>
-    <div>
-      <StatusBody
-        v-if="typeof(status_cache) !== 'undefined'"
-        :status="status_cache"
-      />
-    </div>
-    <button
-      class="button button-default btn"
-      type="button"
-      @click="delete_status(status.id)"
+    <ul
+      class="setting-list"
     >
-      {{ $t('admin_dash.users.delete_status') }}
-    </button><br>
-    <Checkbox
-      :model-value="is_sensitive"
-      @update:model-value="v => change_sensitivity(v)"
-    >
-      {{ $t('admin_dash.users.content_nsfw') }}
-    </Checkbox>
-    <Select
-      :model-value="visibility"
-      @update:model-value="v => change_visibility(v)"
-    >
-      <option
-        value="public"
-      >
-        {{ $t('admin_dash.users.scope_public') }}
-      </option>
-      <option
-        value="unlisted"
-      >
-        {{ $t('admin_dash.users.scope_unlisted') }}
-      </option>
-      <option
-        value="private"
-      >
-        {{ $t('admin_dash.users.scope_private') }}
-      </option>
-      <option
-        value="direct"
-      >
-        {{ $t('admin_dash.users.scope_direct') }}
-      </option>
-    </Select><br>
-    <a :href="status_details.url"> {{ $t('admin_dash.users.link_source') }} </a>
+      <li>
+        <Status
+          v-if="typeof(status_cache) !== 'undefined'"
+          class="Notification"
+          :compact="true"
+          :statusoid="status_cache"
+          @interacted="false"
+        />
+      </li>
+      <li>
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="delete_status(status.id)"
+        >
+          {{ $t('admin_dash.users.delete_status') }}
+        </button>
+      </li>
+      <li>
+        <Checkbox
+          :model-value="is_sensitive"
+          @update:model-value="v => change_sensitivity(v)"
+        >
+          {{ $t('admin_dash.users.content_nsfw') }}
+        </Checkbox>
+      </li>
+      <li>
+        <Select
+          :model-value="visibility"
+          @update:model-value="v => change_visibility(v)"
+        >
+          <option
+            value="public"
+          >
+            {{ $t('admin_dash.users.scope_public') }}
+          </option>
+          <option
+            value="unlisted"
+          >
+            {{ $t('admin_dash.users.scope_unlisted') }}
+          </option>
+          <option
+            value="private"
+          >
+            {{ $t('admin_dash.users.scope_private') }}
+          </option>
+          <option
+            value="direct"
+          >
+            {{ $t('admin_dash.users.scope_direct') }}
+          </option>
+        </Select>
+      </li>
+      <li>
+        <a :href="status_details.url"> {{ $t('admin_dash.users.link_source') }} </a>
+      </li>
+    </ul>
     <div v-if="!json_expanded">
       <button
         class="button button-default btn"

src/components/settings_modal/admin_tabs/users_tab.js

@@ -15,9 +15,8 @@ const UsersTab = {
   },
   data() {
     return {
-      /* filters must match the filter options below initially, or the ui is gonna have a computer moment
-       * no, i won't fix this
-       * */
+      init: false, /* avoid fetching before our filters got initialized */
+      /* adjust filters_... options here, mounted() will adjust the other flags accordingly */
       filters_origin: 'local',
       filters_activity: 'all',
       filters_permission: 'all',
@@ -104,6 +103,7 @@ const UsersTab = {
       this.reset()
     },
     fetch_page (store, opts) {
+      if(!this.init) return new Promise(() => [])
       const users = store.dispatch('fetchAdminUsers', { ...opts, ...{
         query: this.filters_query,
         filters: this.filters,
@@ -134,6 +134,8 @@ const UsersTab = {
     this.update_origin(this.filters_origin)
     this.update_activity(this.filters_activity)
     this.update_permission(this.filters_permission)
+    this.init = true
+    this.reset()
   }
 }