NOCHANGELOG Refactor of moderation detail pages

front/src/components/common/AjaxButton.vue

@@ -5,6 +5,8 @@ import { ref } from 'vue'
 
 import axios from 'axios'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'action-done', data: any): void
   (e: 'action-error', error: BackendError): void
@@ -34,10 +36,13 @@ const ajaxCall = async () => {
 </script>
 
 <template>
-  <button
+  <Button
-    :class="['ui', {loading: isLoading}, 'button']"
+    secondary
+    low-height
+    :class="{loading: isLoading}"
+    icon="bi-arrow-clockwise"
     @click="ajaxCall"
   >
     <slot />
-  </button>
+  </Button>
 </template>

front/src/components/common/CollapseLink.vue

@@ -2,6 +2,8 @@
 import { useVModel } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'update:modelValue', value: boolean): void
 }
@@ -18,8 +20,11 @@ const value = useVModel(props, 'modelValue', emit)
 </script>
 
 <template>
-  <a
+  <Button
-    role="button"
+    secondary
+    low-height
+    tiny
+    :icon="value ? 'bi-chevron-expand' : 'bi-chevron-contract'"
     class="collapse link"
     @click.prevent="value = !value"
   >
@@ -30,5 +35,5 @@ const value = useVModel(props, 'modelValue', emit)
       {{ t('components.common.CollapseLink.button.collapse') }}
     </span>
     <i :class="[{ down: !value, right: value }, 'angle', 'icon']" />
-  </a>
+  </Button>
 </template>

front/src/components/manage/moderation/InstancePolicyCard.vue

@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n'
 
 import useMarkdown from '~/composables/useMarkdown'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'update'): void
 }
@@ -24,21 +26,21 @@ const summary = useMarkdown(() => props.object.summary)
   <div>
     <slot />
     <p>
-      <i class="clock outline icon" /><human-date :date="object.creation_date" /> &nbsp;
+      <i class="bi bi-clock" /><human-date :date="object.creation_date" /> &nbsp;
-      <i class="user icon" />{{ object.actor }}  &nbsp;
+      <i class="bi bi-person" />{{ object.actor }}  &nbsp;
       <template v-if="object.is_active">
-        <i class="play icon" />
+        <i class="bi bi-play" />
         {{ t('components.manage.moderation.InstancePolicyCard.status.enabled') }}
       </template>
       <template v-if="!object.is_active">
-        <i class="pause icon" />
+        <i class="bi bi-pause" />
         {{ t('components.manage.moderation.InstancePolicyCard.status.paused') }}
       </template>
     </p>
     <div>
       <p><strong>{{ t('components.manage.moderation.InstancePolicyCard.header.rule') }}</strong></p>
       <p v-if="object.block_all">
-        <i class="ban icon" />
+        <i class="bi bi-ban" />
         {{ t('components.manage.moderation.InstancePolicyCard.label.blockAll') }}
       </p>
       <div
@@ -49,7 +51,7 @@ const summary = useMarkdown(() => props.object.summary)
           v-if="object.silence_activity"
           class="ui item"
         >
-          <i class="feed icon" />
+          <i class="bi bi-rss-fill" />
           <div class="content">
             {{ t('components.manage.moderation.InstancePolicyCard.label.muteActivity') }}
           </div>
@@ -58,7 +60,7 @@ const summary = useMarkdown(() => props.object.summary)
           v-if="object.silence_notifications"
           class="ui item"
         >
-          <i class="bell icon" />
+          <i class="bi bi-bell-fill" />
           <div class="content">
             {{ t('components.manage.moderation.InstancePolicyCard.label.muteNotifications') }}
           </div>
@@ -67,7 +69,7 @@ const summary = useMarkdown(() => props.object.summary)
           v-if="object.reject_media"
           class="ui item"
         >
-          <i class="file icon" />
+          <i class="bi bi-file-earmark-fill" />
           <div class="content">
             {{ t('components.manage.moderation.InstancePolicyCard.label.rejectMedia') }}
           </div>
@@ -80,12 +82,12 @@ const summary = useMarkdown(() => props.object.summary)
       <sanitized-html :html="summary" />
     </div>
     <div class="ui hidden divider" />
-    <button
+    <Button
-      class="ui right floated labeled icon button"
+      destructive
+      icon="bi-pencil"
       @click="emit('update')"
     >
-      <i class="edit icon" />
       {{ t('components.manage.moderation.InstancePolicyCard.button.edit') }}
-    </button>
+    </Button>
   </div>
 </template>

front/src/components/manage/moderation/InstancePolicyForm.vue

@@ -9,6 +9,9 @@ import axios from 'axios'
 
 import DangerousButton from '~/components/common/DangerousButton.vue'
 
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'save', data: InstancePolicy): void
   (e: 'delete'): void
@@ -119,8 +122,8 @@ const remove = async () => {
 </script>
 
 <template>
-  <form
+  <Layout
-    class="ui form"
+    form
     @submit.prevent="createOrUpdate"
   >
     <h3 class="ui header">
@@ -135,10 +138,9 @@ const remove = async () => {
         {{ t('components.manage.moderation.InstancePolicyForm.header.addRule') }}
       </span>
     </h3>
-    <div
+    <Alert
       v-if="errors && errors.length > 0"
-      role="alert"
+      red
-      class="ui negative message"
     >
       <h4 class="header">
         {{ t('components.manage.moderation.InstancePolicyForm.header.failure') }}
@@ -151,7 +153,7 @@ const remove = async () => {
           {{ error }}
         </li>
       </ul>
-    </div>
+    </Alert>
 
     <div
       v-if="object"
@@ -220,15 +222,16 @@ const remove = async () => {
         </label>
       </div>
     </div>
-    <div class="ui hidden divider" />
+    <Layout flex>
-    <button
+      <Button
-      class="ui basic left floated button"
+        primary
         @click.prevent="emit('cancel')"
       >
         {{ t('components.manage.moderation.InstancePolicyForm.button.cancel') }}
-    </button>
+      </Button>
-    <button
+      <Button
-      :class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
+        primary
+        :class="{'disabled loading': isLoading}"
         :disabled="isLoading"
       >
         <span v-if="object">
@@ -237,7 +240,7 @@ const remove = async () => {
         <span v-else>
           {{ t('components.manage.moderation.InstancePolicyForm.button.create') }}
         </span>
-    </button>
+      </Button>
       <dangerous-button
         v-if="object"
         style="float: right;"
@@ -252,5 +255,6 @@ const remove = async () => {
           {{ t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
         </template>
       </dangerous-button>
-  </form>
+    </Layout>
+  </Layout>
 </template>

front/src/components/manage/moderation/NoteForm.vue

@@ -5,6 +5,8 @@ import axios from 'axios'
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Events {
   (e: 'created', note: Note): void
 }
@@ -76,12 +78,13 @@ const submit = async () => {
         :placeholder="labels.summaryPlaceholder"
       />
     </div>
-    <button
+    <Button
-      :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
+      primary
+      :class="[{'loading': isLoading}, 'right', 'floated']"
       type="submit"
       :disabled="isLoading"
     >
       {{ t('components.manage.moderation.NoteForm.button.add') }}
-    </button>
+    </Button>
   </form>
 </template>

front/src/components/manage/moderation/NotesThread.vue

@@ -11,6 +11,10 @@ import useErrorHandler from '~/composables/useErrorHandler'
 
 import DangerousButton from '~/components/common/DangerousButton.vue'
 
+import Alert from '~/components/ui/Alert.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+
 interface Events {
   (e: 'deleted', uuid: string): void
 }
@@ -40,16 +44,24 @@ const remove = async (note: Note) => {
 
 <template>
   <div class="ui feed">
-    <div
+    <Alert
       v-for="note in notes"
       :key="note.uuid"
+      blue
       class="event"
     >
       <div class="label">
-        <i class="comment outline icon" />
+        <i
+          class="bi bi-chat-dots-fill"
+          style="font-size: 22px;"
+        />
       </div>
-      <div class="content">
+      <Spacer :size="16" />
-        <div class="summary">
+      <Layout
+        flex
+        gap-16
+        class="summary"
+      >
         <actor-link
           :admin="true"
           :actor="note.author"
@@ -57,13 +69,11 @@ const remove = async (note: Note) => {
         <div class="date">
           <human-date :date="note.creation_date" />
         </div>
-        </div>
+      </Layout>
-        <div class="extra text">
       <expandable-div :content="note.summary">
         <sanitized-html :html="useMarkdownRaw(note.summary ?? '')" />
       </expandable-div>
-        </div>
+      <template #actions>
-        <div class="meta">
         <dangerous-button
           :is-loading="isLoading"
           low-height
@@ -80,8 +90,7 @@ const remove = async (note: Note) => {
             {{ t('components.manage.moderation.NotesThread.button.delete') }}
           </template>
         </dangerous-button>
-        </div>
+      </template>
-      </div>
+    </Alert>
-    </div>
   </div>
 </template>

front/src/components/manage/moderation/ReportCard.vue

@@ -18,6 +18,11 @@ import useErrorHandler from '~/composables/useErrorHandler'
 import useMarkdown from '~/composables/useMarkdown'
 import useLogger from '~/composables/useLogger'
 
+import Card from '~/components/ui/Card.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
+
 interface Events {
   (e: 'updated', updating: { type: string }): void
   (e: 'handled', isHandled: boolean): void
@@ -110,7 +115,7 @@ const update = async (type: string) => {
 }
 
 const store = useStore()
-const isCollapsed = ref(false)
+const isCollapsed = ref(true)
 const resolveReport = async (isHandled: boolean) => {
   isLoading.value = true
 
@@ -140,21 +145,20 @@ const handleRemovedNote = (uuid: string) => {
 </script>
 
 <template>
-  <div class="ui fluid report card">
+  <Card
-    <div class="content">
+    :title="t('components.manage.moderation.ReportCard.link.report', {id: obj.uuid.substring(0, 8)})"
-      <h4 class="header">
+    :width="isCollapsed ? '350px' : ''"
-        <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
+    :full="!isCollapsed"
-          {{ t('components.manage.moderation.ReportCard.link.report', {id: obj.uuid.substring(0, 8)}) }}
+    solid
-        </router-link>
+    :red="!obj.is_handled && isCollapsed"
+    :green="obj.is_handled && isCollapsed"
+  >
+    <template #topright>
       <collapse-link
         v-model="isCollapsed"
         class="right floated"
       />
-      </h4>
+    </template>
-      <div class="content">
-        <div class="ui hidden divider" />
-        <div class="ui stackable two column grid">
-          <div class="column">
     <table class="ui very basic unstackable table">
       <tbody>
         <tr>
@@ -198,12 +202,6 @@ const handleRemovedNote = (uuid: string) => {
             />
           </td>
         </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="column">
-            <table class="ui very basic unstackable table">
-              <tbody>
         <tr>
           <td>
             {{ t('components.manage.moderation.ReportCard.table.status.status') }}
@@ -261,15 +259,10 @@ const handleRemovedNote = (uuid: string) => {
         </tr>
       </tbody>
     </table>
-          </div>
+    <template
-        </div>
-      </div>
-    </div>
-    <div
       v-if="!isCollapsed"
-      class="main content"
     >
-      <div class="ui stackable two column grid">
+      <Layout flex>
         <div class="column">
           <h3>
             {{ t('components.manage.moderation.ReportCard.header.message') }}
@@ -286,29 +279,34 @@ const handleRemovedNote = (uuid: string) => {
           <h3>
             {{ t('components.manage.moderation.ReportCard.header.reportedObject') }}
           </h3>
-          <div
+          <Alert
             v-if="!obj.target"
-            role="alert"
+            red
-            class="ui warning message"
           >
             {{ t('components.manage.moderation.ReportCard.warning.objectDeleted') }}
-          </div>
+          </Alert>
-          <router-link
+          <Layout flex>
+            <Link
               v-if="target && configs[target.type].urls.getDetail"
-            class="ui basic button"
+              solid
+              secondary
+              icon="bi-eye"
+              low-height
               :to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
             >
-            <i class="eye icon" />
               {{ t('components.manage.moderation.ReportCard.link.publicPage') }}
-          </router-link>
+            </Link>
-          <router-link
+            <Link
               v-if="target && configs[target.type].urls.getAdminDetail"
-            class="ui basic button"
+              solid
+              secondary
+              icon="bi-wrench"
+              low-height
               :to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
             >
-            <i class="wrench icon" />
               {{ t('components.manage.moderation.ReportCard.link.moderation') }}
-          </router-link>
+            </Link>
+          </Layout>
           <table class="ui very basic unstackable table">
             <tbody>
               <tr v-if="target">
@@ -369,9 +367,9 @@ const handleRemovedNote = (uuid: string) => {
               </tr>
               <tr v-else-if="obj.target_state.domain">
                 <td>
-                  <router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
+                  <Link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
                     {{ t('components.manage.moderation.ReportCard.table.object.domain') }}
-                  </router-link>
+                  </Link>
                 </td>
                 <td>
                   {{ obj.target_state.domain }}
@@ -405,9 +403,7 @@ const handleRemovedNote = (uuid: string) => {
             </tbody>
           </table>
         </aside>
-      </div>
+      </Layout>
-      <div class="ui stackable two column grid">
-        <div class="column">
       <h3>
         {{ t('components.manage.moderation.ReportCard.header.notes') }}
       </h3>
@@ -419,28 +415,28 @@ const handleRemovedNote = (uuid: string) => {
         :target="{type: 'report', uuid: obj.uuid}"
         @created="obj.notes.push($event)"
       />
-        </div>
-        <div class="column">
       <h3>
         {{ t('components.manage.moderation.ReportCard.header.actions') }}
       </h3>
-          <div class="ui labelled icon basic buttons">
+      <Layout flex>
-            <button
+        <Button
           v-if="obj.is_handled === false"
-              :class="['ui', {loading: isLoading}, 'button']"
+          :class="{loading: isLoading}"
+          primary
+          icon="bi-check"
           @click="resolveReport(true)"
         >
-              <i class="success check icon" />&nbsp;
           {{ t('components.manage.moderation.ReportCard.button.resolve') }}
-            </button>
+        </Button>
-            <button
+        <Button
           v-if="obj.is_handled === true"
-              :class="['ui', {loading: isLoading}, 'button']"
+          :class="{loading: isLoading}"
+          secondary
+          icon="bi-arrow-counterclockwise"
           @click="resolveReport(false)"
         >
-              <i class="warning redo icon" />&nbsp;
           {{ t('components.manage.moderation.ReportCard.button.unresolve') }}
-            </button>
+        </Button>
         <template
           v-for="action in actions"
           :key="action.label"
@@ -461,9 +457,7 @@ const handleRemovedNote = (uuid: string) => {
             </template>
           </dangerous-button>
         </template>
-          </div>
+      </Layout>
-        </div>
+    </template>
-      </div>
+  </Card>
-    </div>
-  </div>
 </template>

front/src/components/moderation/FilterModal.vue

@@ -11,6 +11,7 @@ import useLogger from '~/composables/useLogger'
 
 import Modal from '~/components/ui/Modal.vue'
 import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
 
 const logger = useLogger()
 const { t } = useI18n()
@@ -62,6 +63,7 @@ const hide = async () => {
 <template>
   <Modal
     v-model="show"
+    destructive
     :title="type==='artist' ? t('components.moderation.FilterModal.header.modal', {name: target?.name}) : errors.length > 0 ? t('components.moderation.FilterModal.header.failure') : ''"
     :cancel="t('components.moderation.FilterModal.button.cancel')"
   >
@@ -104,13 +106,14 @@ const hide = async () => {
         </template>
       </div>
     </div>
-    <div class="actions">
+    <template #actions>
-      <button
+      <Button
-        :class="['ui', 'success', {loading: isLoading}, 'button']"
+        destructive
+        :class="[{loading: isLoading}]"
         @click="hide"
       >
         {{ t('components.moderation.FilterModal.button.hide') }}
-      </button>
+      </Button>
-    </div>
+    </template>
   </Modal>
 </template>

front/src/components/moderation/ReportCategoryDropdown.vue

@@ -58,11 +58,11 @@ const allCategories = computed(() => {
 </script>
 
 <template>
-  <div>
+  <div class="ui form">
     <label v-if="label">{{ t('components.moderation.ReportCategoryDropdown.label.category') }}</label>
     <select
       v-model="value"
-      class="ui dropdown"
+      class="dropdown"
       :required="required || undefined"
     >
       <option

front/src/ui/components/Sidebar.vue

@@ -133,10 +133,17 @@ const moderationNotifications = computed(() =>
               icon="bi-megaphone-fill"
             >
               {{ t('components.Sidebar.link.moderation') }}
+              <Spacer grow />
               <div
                 v-if="store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests > 0"
                 :title="t('components.Sidebar.label.reports')"
-                :class="['ui', 'circular', 'mini', 'right floated', 'accent', 'label']"
+                style="
+                  background: var(--fw-gray-400);
+                  color: var(--fw-gray-800);
+                  padding: 2px 7px;
+                  border-radius: 10px;
+                  font-size: 12px;
+                "
               >
                 {{ store.state.ui.notifications.pendingReviewReports + store.state.ui.notifications.pendingReviewRequests }}
               </div>

front/src/ui/components/UserMenu.vue

@@ -97,6 +97,7 @@ const labels = computed(() => ({
             color: var(--fw-gray-800);
             padding: 2px 7px;
             border-radius: 10px;
+            font-size: 12px;
           "
         >
           {{ store.state.ui.notifications.inbox }}

front/src/views/admin/library/LibraryDetail.vue

@@ -36,31 +36,29 @@ const labels = computed(() => ({
 
 const isLoading = ref(false)
 const object = ref()
+
 const fetchData = async () => {
   isLoading.value = true
-
   try {
     const response = await axios.get(`manage/library/libraries/${props.id}/`)
     object.value = response.data
   } catch (error) {
     useErrorHandler(error as Error)
   }
-
   isLoading.value = false
 }
 
 const isLoadingStats = ref(false)
 const stats = ref()
+
 const fetchStats = async () => {
   isLoadingStats.value = true
-
   try {
     const response = await axios.get(`manage/library/libraries/${props.id}/stats/`)
     stats.value = response.data
   } catch (error) {
     useErrorHandler(error as Error)
   }
-
   isLoadingStats.value = false
 }
 
@@ -69,14 +67,12 @@ fetchData()
 
 const remove = async () => {
   isLoading.value = true
-
   try {
     await axios.delete(`manage/library/libraries/${props.id}/`)
     router.push({ name: 'manage.library.libraries' })
   } catch (error) {
     useErrorHandler(error as Error)
   }
-
   isLoading.value = false
 }
 
@@ -86,7 +82,6 @@ const updateObj = async (attr: string) => {
   const params = {
     [attr]: object.value[attr]
   }
-
   try {
     await axios.patch(`manage/library/libraries/${props.id}/`, params)
     logger.info(`${attr} was updated successfully to ${params[attr]}`)

front/src/views/admin/library/TrackDetail.vue

@@ -337,7 +337,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
         </router-link>
       </Layout>
       <Layout
-        v-if="!track.is_local"
+        v-if="!track?.is_local"
         flex
         class="details"
       >
@@ -345,7 +345,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
           class="label"
           :to="{
             name: 'manage.moderation.domains.detail',
-            params: { id: track.domain }
+            params: { id: track?.domain }
           }"
         >
           {{ t('views.admin.library.TrackDetail.link.domain') }}
@@ -354,7 +354,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
           h
           grow
         />
-        <span class="value">{{ track.domain }}</span>
+        <span class="value">{{ track?.domain }}</span>
       </Layout>
       <Layout
         v-if="track?.description"
@@ -428,7 +428,10 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
         <span class="value">{{ stats?.track_favorites }}</span>
       </Layout>
     </Layout>
-    <Layout stack>
+    <Layout
+      stack
+      style="flex: 1; gap: 0;"
+    >
       <Heading
         :h3="t('views.admin.library.TrackDetail.header.trackData')"
         class="category"
@@ -444,7 +447,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
           h
           grow
         />
-        <span class="value">{{ humanSize(stats.media_downloaded_size) }}</span>
+        <span class="value">{{ humanSize(stats?.media_downloaded_size) }}</span>
       </Layout>
       <Layout
         flex
@@ -457,7 +460,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
           h
           grow
         />
-        <span class="value">{{ humanSize(stats.media_total_size) }}</span>
+        <span class="value">{{ humanSize(stats?.media_total_size) }}</span>
       </Layout>
       <Layout
         flex
@@ -465,7 +468,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
       >
         <Link
           class="label"
-          :to="{ name: 'manage.library.libraries', query: { q: getQuery('track_id', track.id) } }"
+          :to="{ name: 'manage.library.libraries', query: { q: getQuery('track_id', track?.id) } }"
         >
           {{ t('views.admin.library.TrackDetail.link.libraries') }}
         </Link>
@@ -473,7 +476,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
           h
           grow
         />
-        <span class="value">{{ stats.libraries }}</span>
+        <span class="value">{{ stats?.libraries }}</span>
       </Layout>
       <Layout
         flex
@@ -481,7 +484,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
       >
         <Link
           class="label"
-          :to="{ name: 'manage.library.uploads', query: { q: getQuery('track_id', track.id) } }"
+          :to="{ name: 'manage.library.uploads', query: { q: getQuery('track_id', track?.id) } }"
         >
           {{ t('views.admin.library.TrackDetail.link.uploads') }}
         </Link>
@@ -489,7 +492,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
           h
           grow
         />
-        <span class="value">{{ stats.uploads }}</span>
+        <span class="value">{{ stats?.uploads }}</span>
       </Layout>
     </Layout>
   </Layout>

front/src/views/admin/moderation/AccountsDetail.vue

@@ -2,17 +2,21 @@
 import type { InstancePolicy } from '~/types'
 
 import { computed, ref, reactive } from 'vue'
-// import { useCurrentElement } from '@vueuse/core'
 import { humanSize } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
 
+import Header from '~/components/ui/Header.vue'
 import Layout from '~/components/ui/Layout.vue'
-import Loader from '~/components/ui/Loader.vue'
-import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/Spacer.vue'
+import HumanDate from '~/components/common/HumanDate.vue'
+import Link from '~/components/ui/Link.vue'
+import Button from '~/components/ui/Button.vue'
+import Heading from '~/components/ui/Heading.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 
 import InstancePolicyForm from '~/components/manage/moderation/InstancePolicyForm.vue'
@@ -104,13 +108,6 @@ const fetchStats = async () => {
 fetchStats()
 fetchData()
 
-// TODO: Find out if the following removal causes any regression #2440
-// const el = useCurrentElement()
-// watch(object, async () => {
-//   await nextTick()
-//   $(el.value).find('select.dropdown').dropdown()
-// })
-
 const getQuery = (field: string, value: string) => `${field}:"${value}"`
 
 const updating = reactive(new Set<string>())
@@ -152,74 +149,60 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
 </script>
 
 <template>
-  <Layout
+  <Loader v-if="isLoading" />
-    main
+  <Header
-    stack
+    v-if="object"
-    class="page-admin-account-detail"
+    v-title="object?.full_username"
+    :h1="object?.full_username"
+    page-heading
   >
-    <Loader
+    <template #image>
-      v-if="isLoading"
+      <i class="channel-image bi-person-circle" />
-    />
-    <template v-if="object">
-      <section
-        v-title="object.full_username"
-      >
-        <Layout flex>
-          <h2 class="ui header">
-            <i class="bi-person-circle" />
-            {{ object.full_username }}
-            <div class="sub header">
-              <template v-if="object.user">
-                <span class="ui tiny accent label">
-                  <i class="bi-house-fill" />
-                  {{ t('views.admin.moderation.AccountsDetail.header.localAccount') }}
-                </span>
-                &nbsp;
     </template>
-              <a
+    <Spacer />
-                :href="object.url || object.fid"
+    <Layout
-                target="_blank"
+      flex
-                rel="noopener noreferrer"
+      class="header-buttons"
     >
-                {{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}&nbsp;
+      <Link
-                <i class="bi bi-box-arrow-up-right" />
+        solid
-              </a>
+        primary
-            </div>
+        low-height
-          </h2>
+        icon="bi-box-arrow-up-right"
-          <Spacer grow />
+        :to="object?.url || object?.fid"
-          <Layout stack>
-            <a
-              v-if="object.user && store.state.auth.profile && store.state.auth.profile.is_superuser"
-              class="ui labeled icon button"
-              :href="store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object.user.id}`)"
         target="_blank"
-              rel="noopener noreferrer"
       >
-              <i class="bi bi-wrench" />
+        {{ t('views.admin.moderation.AccountsDetail.link.openProfile') }}
-              {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
+      </Link>
-            </a>
+      <Link
-            <a
+        v-if="object?.user && store.state.auth.profile?.is_superuser"
-              v-else-if="store.state.auth.profile && store.state.auth.profile.is_superuser"
+        solid
-              :href="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object.id}`)"
+        primary
+        low-height
+        icon="bi-wrench"
+        :to="store.getters['instance/absoluteUrl'](`/api/admin/users/user/${object?.user?.id}`)"
         target="_blank"
-              rel="noopener noreferrer"
       >
-              <i class="bi bi-wrench" />
+        {{ t('views.admin.moderation.AccountsDetail.link.django') }}
-              {{ t('views.admin.moderation.AccountsDetail.link.django') }}&nbsp;
+      </Link>
-            </a>
+      <Link
-            <a
+        v-if="!object?.user"
-              :href="object.url || object.fid"
+        solid
+        primary
+        low-height
+        :to="store.getters['instance/absoluteUrl'](`/api/admin/federation/actor/${object?.id}`)"
+        icon="bi-wrench"
         target="_blank"
-              rel="noopener noreferrer"
       >
-              <i class="bi bi-box-arrow-up-right" />
+        {{ t('views.admin.moderation.AccountsDetail.link.django') }}
-              {{ t('views.admin.moderation.AccountsDetail.link.remoteProfile') }}&nbsp;
+      </Link>
-            </a>
     </Layout>
-          <div class="ui column">
+  </Header>
-            <div
+
-              v-if="!object.user"
+  <Alert
-              class="ui compact clearing placeholder segment component-placeholder"
+    v-if="!object?.user"
+    :blue="!policy"
+    red="policy"
   >
     <template v-if="isLoadingPolicy">
       <div class="paragraph">
@@ -231,12 +214,10 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
       </div>
     </template>
     <template v-else-if="!policy && !showPolicyForm">
-                <header class="ui header">
+      <Heading
-                  <h3>
+        :h3="t('views.admin.moderation.AccountsDetail.header.noPolicy')"
-                    <i class="bi bi-shield-fill" />
+        icon="bi-shield-fill"
-                    {{ t('views.admin.moderation.AccountsDetail.header.noPolicy') }}
+      />
-                  </h3>
-                </header>
       <p>
         {{ t('views.admin.moderation.AccountsDetail.description.policy') }}
       </p>
@@ -262,356 +243,333 @@ const updatePolicy = (newPolicy: InstancePolicy) => {
       v-else-if="showPolicyForm"
       :object="policy"
       type="actor"
-                :target="object.full_username"
+      :target="object?.full_username"
       @cancel="showPolicyForm = false"
       @save="updatePolicy"
       @delete="policy = null; showPolicyForm = false"
     />
-            </div>
+  </Alert>
-          </div>
+
-        </Layout>
+  <Spacer />
-      </section>
+  <Layout
-      <Layout flex>
+    flex
-        <div class="column">
+    gap-64
-          <section>
+  >
-            <h3 class="ui header">
+    <Layout
-              <i class="bi bi-info-circle-fill" />
+      stack
-              {{ t('views.admin.moderation.AccountsDetail.header.accountData') }}
+      style="flex: 1; gap: 0;"
-            </h3>
+    >
-            <table class="ui very basic table">
+      <Heading
-              <tbody>
+        :h3="t('views.admin.moderation.AccountsDetail.header.accountData')"
-                <tr>
+        class="category"
-                  <td>
+      />
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.accountData.username') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    {{ object.preferred_username }}
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr v-if="!object.user">
+        <span class="value">{{ object?.preferred_username }}</span>
-                  <td>
+      </Layout>
-                    <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
+      <Layout
+        v-if="!object?.user"
+        flex
+        class="details"
+      >
+        <router-link
+          class="label"
+          :to="{ name: 'manage.moderation.domains.detail', params: { id: object?.domain } }"
+        >
           {{ t('views.admin.moderation.AccountsDetail.link.domain') }}
         </router-link>
-                  </td>
+        <Spacer
-                  <td>
+          h
-                    {{ object.domain }}
+          grow
-                  </td>
+        />
-                </tr>
+        <span class="value">{{ object?.domain }}</span>
-                <tr>
+      </Layout>
-                  <td>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.accountData.displayName') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    {{ object.name }}
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr v-if="object.user">
+        <span class="value">{{ object?.name }}</span>
-                  <td>
+      </Layout>
+      <Layout
+        v-if="object?.user"
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.accountData.email') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    {{ object.user.email }}
+          h
-                  </td>
+          grow
-                </tr>
-                <tr v-if="object.user">
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.label') }}
-                  </td>
-                  <td>
-                    <div
-                      v-if="object.user.username != store.state.auth.profile?.username"
-                      class="ui toggle checkbox"
-                    >
-                      <Input
-                        id="is-active"
-                        v-model="object.user.is_active"
-                        type="checkbox"
-                        @change="updateUser('is_active')"
         />
-                      <label for="is-active">
+        <span class="value">{{ object?.user?.email }}</span>
-                        <span
+      </Layout>
-                          v-if="object.user.is_active"
+      <Layout
-                        >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}</span>
+        v-if="object?.user"
-                        <span
+        flex
-                          v-else
+        class="details"
-                        >{{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}</span>
-                      </label>
-                    </div>
-                    <span
-                      v-else-if="object.user.is_active"
       >
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.enabled') }}
+        <span class="label">
-                    </span>
-                    <span
-                      v-else
-                    >
-                      {{ t('views.admin.moderation.AccountsDetail.table.accountData.loginStatus.disabled') }}
-                    </span>
-                  </td>
-                </tr>
-                <tr v-if="object.user">
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.permissions') }}
-                  </td>
-                  <td>
-                    <select
-                      v-model="permissions"
-                      multiple
-                      class="ui search selection dropdown"
-                      @change="updateUser('permissions')"
-                    >
-                      <option
-                        v-for="(p, key) in allPermissions"
-                        :key="key"
-                        :value="p.code"
-                      >
-                        {{ p.label }}
-                      </option>
-                    </select>
-                    <action-feedback :is-loading="updating.has('permissions')" />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.userType') }}
-                  </td>
-                  <td>
-                    {{ object.type }}
-                  </td>
-                </tr>
-                <tr v-if="!object.user">
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastChecked') }}
-                  </td>
-                  <td>
-                    <human-date
-                      v-if="object.last_fetch_date"
-                      :date="object.last_fetch_date"
-                    />
-                    <span
-                      v-else
-                    >
-                      {{ t('views.admin.moderation.AccountsDetail.notApplicable') }}
-                    </span>
-                  </td>
-                </tr>
-                <tr v-if="object.user">
-                  <td>
           {{ t('views.admin.moderation.AccountsDetail.table.accountData.signupDate') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    <human-date :date="object.user.date_joined" />
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr v-if="object.user">
+        <HumanDate :date="object?.user?.date_joined" />
-                  <td>
+      </Layout>
-                    {{ t('views.admin.moderation.AccountsDetail.table.accountData.lastActivity') }}
+    </Layout>
-                  </td>
+
-                  <td>
+    <Layout
-                    <human-date :date="object.user.last_activity" />
+      stack
-                  </td>
+      style="flex: 1; gap: 0;"
-                </tr>
-              </tbody>
-            </table>
-          </section>
-        </div>
-        <div class="column">
-          <section>
-            <h3 class="ui header">
-              <i class="bi bi-rss-fill" />
-              {{ t('views.admin.moderation.AccountsDetail.header.activity') }}&nbsp;
-              <span :data-tooltip="labels.statsWarning"><i class=" bi bi-question-circle-fill" /></span>
-            </h3>
-            <div
-              v-if="isLoadingStats"
-              class="ui placeholder"
     >
-              <div class="full line" />
+      <Heading
-              <div class="short line" />
+        :h3="t('views.admin.moderation.AccountsDetail.header.activity')"
-              <div class="medium line" />
+        class="category"
-              <div class="long line" />
-            </div>
-            <table
-              v-else
-              class="ui very basic table"
       >
-              <tbody>
+        <span
-                <tr v-if="!object.user">
+          :data-tooltip="labels.statsWarning"
-                  <td>
+          style="margin-left: 8px"
+        >
+          <i class=" bi bi-question-circle-fill" /></span>
+      </Heading>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.activity.firstSeen') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    <human-date :date="object.creation_date" />
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr>
+        <HumanDate :date="object?.creation_date" />
-                  <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedMessages') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    {{ stats.outbox_activities }}
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr>
+        <span class="value">{{ stats?.outbox_activities }}</span>
-                  <td>
+      </Layout>
+      <Layout
+        v-if="object?.user"
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.activity.receivedFollows') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    {{ stats.received_library_follows }}
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr>
+        <span class="value">{{ stats?.received_library_follows }}</span>
-                  <td>
+      </Layout>
+      <Layout
+        v-if="object?.user"
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.activity.emittedFollows') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    {{ stats.emitted_library_follows }}
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr>
+        <span class="value">{{ stats?.emitted_library_follows }}</span>
-                  <td>
+      </Layout>
-                    <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object.full_username}`) }}">
+      <Layout
+        v-if="object?.user"
+        flex
+        class="details"
+      >
+        <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `account:${object?.full_username}`) }}">
           {{ t('views.admin.moderation.AccountsDetail.link.linkedReports') }}
         </router-link>
-                  </td>
+        <Spacer
-                  <td>
+          h
-                    {{ stats.reports }}
+          grow
-                  </td>
+        />
-                </tr>
+        <span class="value">{{ stats?.reports }}</span>
-                <tr>
+      </Layout>
-                  <td>
+      <Layout
-                    <router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object.full_username}`) }}">
+        v-if="object?.user"
+        flex
+        class="details"
+      >
+        <router-link :to="{name: 'manage.moderation.requests.list', query: {q: getQuery('submitter', `${object?.full_username}`) }}">
           {{ t('views.admin.moderation.AccountsDetail.link.requests') }}
         </router-link>
-                  </td>
+        <Spacer
-                  <td>
+          h
-                    {{ stats.requests }}
+          grow
-                  </td>
+        />
-                </tr>
+        <span class="value">{{ stats?.requests }}</span>
-              </tbody>
+      </Layout>
-            </table>
+    </Layout>
-          </section>
+
-        </div>
+    <Layout
-        <div class="column">
+      stack
-          <section>
+      style="flex: 1; gap: 0;"
-            <h3 class="ui header">
-              <i class="bi bi-music-note-beamed" />
-              {{ t('views.admin.moderation.AccountsDetail.header.audioContent') }}&nbsp;
-              <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
-            </h3>
-            <div
-              v-if="isLoadingStats"
-              class="ui placeholder"
     >
-              <div class="full line" />
+      <Heading
-              <div class="short line" />
+        :h3="t('views.admin.moderation.AccountsDetail.header.audioContent')"
-              <div class="medium line" />
+        class="category"
-              <div class="long line" />
-            </div>
-            <table
-              v-else
-              class="ui very basic table"
       >
-              <tbody>
+        <span
-                <tr v-if="!object.user">
+          :data-tooltip="labels.statsWarning"
-                  <td>
+          style="margin-left: 8px"
+        >
+          <i class=" bi bi-question-circle-fill" /></span>
+      </Heading>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.audioContent.cachedSize') }}
-                  </td>
+        </span>
-                  <td>
+        <Spacer
-                    {{ humanSize(stats.media_downloaded_size) }}
+          h
-                  </td>
+          grow
-                </tr>
+        />
-                <tr v-if="object.user">
+        <span class="value">{{ humanSize(stats?.media_downloaded_size) }}</span>
-                  <td>
+      </Layout>
+      <Layout
+        v-if="object?.user"
+        flex
+        no-gap
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.AccountsDetail.table.audioContent.uploadQuota') }}
-                    <span :data-tooltip="labels.uploadQuota"><i class="question circle icon" /></span>
+        </span>
-                  </td>
+        <span
-                  <td>
+          :data-tooltip="labels.uploadQuota"
+          style="margin-left: 8px"
+        >
+          <i class="bi bi-question-circle" />
+        </span>
+        <Spacer
+          h
+          grow
+        />
         <Input
           v-model.number="object.user.upload_quota"
           step="100"
           name="quota"
           type="number"
+          style="width: 100px"
           @change="updateUser('upload_quota', true)"
         />
-                    <div class="ui basic label">
+        <span class="ui basic label">
           {{ t('views.admin.moderation.AccountsDetail.table.audioContent.megabyte') }}
-                    </div>
+        </span>
         <action-feedback
           class="ui basic label"
           size="tiny"
           :is-loading="updating.has('upload_quota')"
         />
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
-                  </td>
-                  <td>
-                    {{ humanSize(stats.media_total_size) }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <router-link :to="{name: 'manage.channels', query: {q: getQuery('account', object.full_username) }}">
-                      {{ t('views.admin.moderation.AccountsDetail.link.channels') }}
-                    </router-link>
-                  </td>
-                  <td>
-                    {{ stats.channels }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('account', object.full_username) }}">
-                      {{ t('views.admin.moderation.AccountsDetail.link.libraries') }}
-                    </router-link>
-                  </td>
-                  <td>
-                    {{ stats.libraries }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('account', object.full_username) }}">
-                      {{ t('views.admin.moderation.AccountsDetail.link.uploads') }}
-                    </router-link>
-                  </td>
-                  <td>
-                    {{ stats.uploads }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.link.artists') }}
-                  </td>
-                  <td>
-                    {{ stats.artists }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.link.albums') }}
-                  </td>
-                  <td>
-                    {{ stats.albums }}
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    {{ t('views.admin.moderation.AccountsDetail.link.tracks') }}
-                  </td>
-                  <td>
-                    {{ stats.tracks }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </section>
-        </div>
       </Layout>
-    </template>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
+          {{ t('views.admin.moderation.AccountsDetail.table.audioContent.totalSize') }}
+        </span>
+        <Spacer
+          h
+          grow
+        />
+        <span class="value">{{ humanSize(stats?.media_total_size) }}</span>
+      </Layout>
+    </Layout>
   </Layout>
 </template>
+
+<style scoped lang="scss">
+
+.channel-image {
+  width: 200px;
+  height: 200px;
+  font-size: 160px;
+  border: none;
+  display: block;
+  text-align: center;
+  align-content: center;
+  border-radius: 50%;
+  @include light-theme {
+    background-color: var(--fw-gray-200);
+  }
+  @include dark-theme {
+    background-color: var(--fw-gray-800);
+  }
+}
+
+h3.category {
+  margin-bottom: 16px;
+}
+
+.details {
+  padding: 0 16px;
+  height: 72px;
+  align-items: center;
+  border-top: 1px solid;
+  min-width: 280px;
+
+  @include light-theme {
+    border-color: var(--fw-gray-300);
+  }
+  @include dark-theme {
+    border-color: var(--fw-gray-800);
+  }
+
+  .label {
+    font-weight: 800;
+
+    @include light-theme {
+      color: var(--fw-gray-600);
+    }
+
+    @include dark-theme {
+      color: var(--fw-gray-500);
+    }
+  }
+
+  a.label,
+  a.value {
+    text-decoration: underline;
+  }
+
+  &:last-child {
+    border-bottom: 1px solid;
+  }
+}
+</style>

front/src/views/admin/moderation/DomainsDetail.vue

@@ -14,6 +14,19 @@ import InstancePolicyCard from '~/components/manage/moderation/InstancePolicyCar
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
+import Header from '~/components/ui/Header.vue'
+import Layout from '~/components/ui/Layout.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+import HumanDate from '~/components/common/HumanDate.vue'
+import Link from '~/components/ui/Link.vue'
+import Button from '~/components/ui/Button.vue'
+import Heading from '~/components/ui/Heading.vue'
+import Loader from '~/components/ui/Loader.vue'
+import Alert from '~/components/ui/Alert.vue'
+import OptionsButton from '~/components/ui/button/Options.vue'
+import Popover from '~/components/ui/Popover.vue'
+import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
+
 interface Props {
   id: number
   allowListEnabled: boolean
@@ -109,77 +122,70 @@ const setAllowList = async (value: boolean) => {
 </script>
 
 <template>
-  <main class="page-admin-domain-detail">
+  <Loader v-if="isLoading" />
-    <div
+  <Header
-      v-if="isLoading"
+    v-if="object"
-      class="ui vertical segment"
+    v-title="object?.name"
+    :h1="object?.name"
+    page-heading
   >
-      <div :class="['ui', 'centered', 'active', 'inline', 'loader']" />
+    <template #image>
-    </div>
+      <i class="channel-image bi bi-cloud-fill" />
-    <template v-if="object">
+    </template>
-      <section
+    <Spacer />
-        v-title="object.name"
+    <Layout
-        :class="['ui', 'head', 'vertical', 'stripe', 'segment']"
+      flex
+      class="header-buttons"
     >
-        <div class="ui stackable two column grid">
+      <Link
-          <div class="ui column">
+        solid
-            <div class="segment-content">
+        primary
-              <h2 class="ui header">
+        low-height
-                <i class="circular inverted cloud icon" />
+        icon="bi-box-arrow-up-right"
-                <div class="content">
+        :to="externalUrl"
-                  {{ object.name }}
-                  <div class="sub header">
-                    <a
-                      :href="externalUrl"
         target="_blank"
-                      rel="noopener noreferrer"
-                      class="logo-wrapper"
       >
-                      {{ t('views.admin.moderation.DomainsDetail.link.website') }}&nbsp;
+        {{ t('views.admin.moderation.DomainsDetail.link.website') }}
-                      <i class="external icon" />
+      </Link>
-                    </a>
+      <Link
-                  </div>
-                </div>
-              </h2>
-              <div class="header-buttons">
-                <div class="ui icon buttons">
-                  <a
         v-if="store.state.auth.profile?.is_superuser"
-                    class="ui labeled icon button"
+        solid
-                    :href="store.getters['instance/absoluteUrl'](`/api/admin/federation/domain/${object.name}`)"
+        primary
+        low-height
+        icon="bi-wrench"
+        :to="store.getters['instance/absoluteUrl'](`/api/admin/federation/domain/${object.name}`)"
         target="_blank"
-                    rel="noopener noreferrer"
       >
-                    <i class="wrench icon" />
+        {{ t('views.admin.moderation.DomainsDetail.link.django') }}
-                    {{ t('views.admin.moderation.DomainsDetail.link.django') }}&nbsp;
+      </Link>
-                  </a>
+      <Spacer grow />
-                </div>
+      <Popover v-if="allowListEnabled">
-                <div
+        <template #default="{ toggleOpen }">
-                  v-if="allowListEnabled"
+          <OptionsButton
-                  class="ui icon buttons"
+            is-square-small
+            @click="toggleOpen()"
+          />
+        </template>
+        <template #items>
+          <PopoverItem
+            icon="bi-list-check"
+            @click="setAllowList(!object.allowed)"
           >
-                  <button
+            <span v-if="object.allowed">
-                    v-if="object.allowed"
-                    :class="['ui', 'labeled', {loading: isLoadingAllowList}, 'icon', 'button']"
-                    @click.prevent="setAllowList(false)"
-                  >
-                    <i class="x icon" />
               {{ t('views.admin.moderation.DomainsDetail.button.removeFromAllowList') }}
-                  </button>
+            </span>
-                  <button
+            <span v-else>
-                    v-else
-                    :class="['ui', 'labeled', {loading: isLoadingAllowList}, 'icon', 'button']"
-                    @click.prevent="setAllowList(true)"
-                  >
-                    <i class="check icon" />
               {{ t('views.admin.moderation.DomainsDetail.button.addToAllowList') }}
-                  </button>
+            </span>
-                </div>
+          </PopoverItem>
-              </div>
+        </template>
-            </div>
+      </Popover>
-          </div>
+    </Layout>
-          <div class="ui column">
+  </Header>
-            <div class="ui compact clearing placeholder segment component-placeholder">
+
+  <Alert
+    blue
+  >
     <template v-if="isLoadingPolicy">
       <div class="paragraph">
         <div class="line" />
@@ -190,21 +196,19 @@ const setAllowList = async (value: boolean) => {
       </div>
     </template>
     <template v-else-if="!policy && !showPolicyForm">
-                <header class="ui header">
+      <Heading
-                  <h3>
+        :h3="t('views.admin.moderation.DomainsDetail.header.noPolicy')"
-                    <i class="shield icon" />
+        icon="bi-shield-lock"
-                    {{ t('views.admin.moderation.DomainsDetail.header.noPolicy') }}
+      />
-                  </h3>
-                </header>
       <p>
         {{ t('views.admin.moderation.DomainsDetail.description.policy') }}
       </p>
-                <button
+      <Button
-                  class="ui primary button"
+        primary
         @click="showPolicyForm = true"
       >
         {{ t('views.admin.moderation.DomainsDetail.button.addPolicy') }}
-                </button>
+      </Button>
     </template>
     <instance-policy-card
       v-else-if="policy && !showPolicyForm"
@@ -226,281 +230,334 @@ const setAllowList = async (value: boolean) => {
       @save="updatePolicy"
       @delete="policy = null; showPolicyForm = false"
     />
-            </div>
+  </Alert>
-          </div>
+  <Spacer />
-        </div>
+  <Layout
-      </section>
+    flex
-      <div class="ui vertical stripe segment">
+    gap-64
-        <div class="ui stackable three column grid">
-          <div class="column">
-            <section>
-              <h3 class="ui header">
-                <i class="info icon" />
-                <div class="content">
-                  {{ t('views.admin.moderation.DomainsDetail.header.instanceData') }}
-                </div>
-              </h3>
-              <table class="ui very basic table">
-                <tbody>
-                  <tr v-if="allowListEnabled">
-                    <td>
-                      {{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.label') }}
-                    </td>
-                    <td>
-                      <span
-                        v-if="object.allowed"
   >
+    <Layout
+      stack
+      style="flex: 1; gap: 0;"
+    >
+      <Heading
+        :h3="t('views.admin.moderation.DomainsDetail.header.instanceData')"
+        class="category"
+      />
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
+          {{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.label') }}
+        </span>
+        <Spacer
+          h
+          grow
+        />
+        <span class="value">
+          <span v-if="object?.allowed">
             {{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.true') }}
           </span>
-                      <span
+          <span v-else>
-                        v-else
-                      >
             {{ t('views.admin.moderation.DomainsDetail.table.instanceData.inAllowList.false') }}
           </span>
-                    </td>
+        </span>
-                  </tr>
+      </Layout>
-                  <tr>
+      <Layout
-                    <td>
+        flex
-                      {{ t('views.admin.moderation.DomainsDetail.table.instanceData.lastChecked') }}
+        class="details"
-                    </td>
-                    <td>
-                      <human-date
-                        v-if="object.nodeinfo_fetch_date"
-                        :date="object.nodeinfo_fetch_date"
-                      />
-                      <span
-                        v-else
       >
+        <span class="label">
+          {{ t('views.admin.moderation.DomainsDetail.table.instanceData.lastChecked') }}
+        </span>
+        <Spacer
+          h
+          grow
+        />
+        <HumanDate
+          v-if="object?.nodeinfo_fetch_date"
+          :date="object?.nodeinfo_fetch_date"
+        />
+        <span v-else>
           {{ t('views.admin.moderation.DomainsDetail.notApplicable') }}
         </span>
-                    </td>
+      </Layout>
-                  </tr>
+      <Layout
-
+        v-if="object?.nodeinfo && object?.nodeinfo.status === 'ok'"
-                  <template v-if="object.nodeinfo && object.nodeinfo.status === 'ok'">
+        flex
-                    <tr>
+        class="details"
-                      <td>
+      >
+        <span class="label">
           {{ t('views.admin.moderation.DomainsDetail.table.instanceData.software.label') }}
-                      </td>
+        </span>
-                      <td>
+        <Spacer
+          h
+          grow
+        />
+        <span class="value">
           {{ t('views.admin.moderation.DomainsDetail.table.instanceData.software.value', {name: get(object, 'nodeinfo.payload.software.name', t('views.admin.moderation.DomainsDetail.notApplicable')), version: get(object, 'nodeinfo.payload.software.version', t('views.admin.moderation.DomainsDetail.notApplicable'))}) }}
-                      </td>
+        </span>
-                    </tr>
+      </Layout>
-                    <tr>
+      <Layout
-                      <td>
+        v-if="object?.nodeinfo && object?.nodeinfo.status === 'error'"
-                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.domainName') }}
+        flex
-                      </td>
+        class="details"
-                      <td>
+      >
-                        {{ get(object, 'nodeinfo.payload.metadata.nodeName', t('views.admin.moderation.DomainsDetail.notApplicable')) }}
+        <span class="label">
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.totalUsers') }}
-                      </td>
-                      <td>
-                        {{ get(object, 'nodeinfo.payload.usage.users.total', t('views.admin.moderation.DomainsDetail.notApplicable')) }}
-                      </td>
-                    </tr>
-                  </template>
-                  <template v-if="object.nodeinfo && object.nodeinfo.status === 'error'">
-                    <tr>
-                      <td>
           {{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.label') }}
-                      </td>
+        </span>
-                      <td>
+        <Spacer
-                        {{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.value') }}&nbsp;
+          h
-
+          grow
-                        <span :data-tooltip="object.nodeinfo.error"><i class="question circle icon" /></span>
+        />
-                      </td>
+        <span class="value">
-                    </tr>
+          {{ t('views.admin.moderation.DomainsDetail.table.instanceData.nodeInfoStatus.value', {name: get(object, 'nodeinfo.payload.software.name', t('views.admin.moderation.DomainsDetail.notApplicable')), version: get(object, 'nodeinfo.payload.software.version', t('views.admin.moderation.DomainsDetail.notApplicable'))}) }}
-                  </template>
+        </span>
-                </tbody>
+        <span :data-tooltip="object.nodeinfo.error"><i class="bi bi-question-circle" /></span>
-              </table>
+      </Layout>
       <ajax-button
         method="get"
-                :url="'manage/federation/domains/' + object.name + '/nodeinfo/'"
+        :url="'manage/federation/domains/' + object?.name + '/nodeinfo/'"
         @action-done="refreshNodeInfo"
       >
         {{ t('views.admin.moderation.DomainsDetail.button.refreshNodeInfo') }}
       </ajax-button>
-            </section>
+    </Layout>
-          </div>
+
-          <div class="column">
+    <Layout
-            <section>
+      stack
-              <h3 class="ui header">
+      style="flex: 1; gap: 0;"
-                <i class="feed icon" />
-                <div class="content">
-                  {{ t('views.admin.moderation.DomainsDetail.header.activity') }}&nbsp;
-                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
-                </div>
-              </h3>
-              <div
-                v-if="isLoadingStats"
-                class="ui placeholder"
     >
-                <div class="full line" />
+      <Heading
-                <div class="short line" />
+        :h3="t('views.admin.moderation.DomainsDetail.header.activity')"
-                <div class="medium line" />
+        class="category"
-                <div class="long line" />
-              </div>
-              <table
-                v-else
-                class="ui very basic table"
       >
-                <tbody>
+        <span
-                  <tr>
+          :data-tooltip="labels.statsWarning"
-                    <td>
+          style="margin-left: 8px;"
+        >
+          <i class="bi bi-question-circle" /></span>
+      </Heading>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.DomainsDetail.table.activity.firstSeen') }}
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      <human-date :date="object.creation_date" />
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <HumanDate :date="object?.creation_date" />
-                    <td>
+      </Layout>
-                      <router-link
+      <Layout
-                        :to="{name: 'manage.moderation.accounts.list', query: {q: 'domain:' + object.name }}"
+        flex
+        class="details"
+      >
+        <Link
+          class="label"
+          :to="{name: 'manage.moderation.accounts.list', query: {q: 'domain:' + object?.name }}"
         >
           {{ t('views.admin.moderation.DomainsDetail.link.knownAccounts') }}
-                      </router-link>
+        </Link>
-                    </td>
+        <Spacer
-                    <td>
+          h
-                      {{ stats.actors }}
+          grow
-                    </td>
+        />
-                  </tr>
+        <span class="value">{{ stats?.actors }}</span>
-                  <tr>
+      </Layout>
-                    <td>
+    </Layout>
-                      {{ t('views.admin.moderation.DomainsDetail.table.activity.emittedMessages') }}
+
-                    </td>
+    <Layout
-                    <td>
+      stack
-                      {{ stats.outbox_activities }}
+      style="flex: 1; gap: 0;"
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.DomainsDetail.table.activity.receivedFollows') }}
-                    </td>
-                    <td>
-                      {{ stats.received_library_follows }}
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>
-                      {{ t('views.admin.moderation.DomainsDetail.table.activity.emittedFollows') }}
-                    </td>
-                    <td>
-                      {{ stats.emitted_library_follows }}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </section>
-          </div>
-          <div class="column">
-            <section>
-              <h3 class="ui header">
-                <i class="music icon" />
-                <div class="content">
-                  {{ t('views.admin.moderation.DomainsDetail.header.audioContent') }}&nbsp;
-                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon" /></span>
-                </div>
-              </h3>
-              <div
-                v-if="isLoadingStats"
-                class="ui placeholder"
     >
-                <div class="full line" />
+      <Heading
-                <div class="short line" />
+        :h3="t('views.admin.moderation.DomainsDetail.header.audioContent')"
-                <div class="medium line" />
+        class="category"
-                <div class="long line" />
-              </div>
-              <table
-                v-else
-                class="ui very basic table"
       >
-                <tbody>
+        <span
-                  <tr>
+          :data-tooltip="labels.statsWarning"
-                    <td>
+          style="margin-left: 8px;"
+        >
+          <i class="bi bi-question-circle" /></span>
+      </Heading>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.DomainsDetail.table.audioContent.cachedSize') }}
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ humanSize(stats.media_downloaded_size) }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <span class="value">{{ humanSize(stats?.media_downloaded_size) }}</span>
-                    <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           {{ t('views.admin.moderation.DomainsDetail.table.audioContent.totalSize') }}
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ humanSize(stats.media_total_size) }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <span class="value">{{ humanSize(stats?.media_total_size) }}</span>
-                    <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           <router-link :to="{name: 'manage.channels', query: {q: getQuery('domain', object.name) }}">
             {{ t('views.admin.moderation.DomainsDetail.link.channels') }}
           </router-link>
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ stats.channels }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <span class="value">{{ stats?.channels }}</span>
-                    <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('domain', object.name) }}">
             {{ t('views.admin.moderation.DomainsDetail.link.libraries') }}
           </router-link>
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ stats.libraries }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <span class="value">{{ stats?.libraries }}</span>
-                    <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('domain', object.name) }}">
             {{ t('views.admin.moderation.DomainsDetail.link.uploads') }}
           </router-link>
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ stats.uploads }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <span class="value">{{ stats?.uploads }}</span>
-                    <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('domain', object.name) }}">
             {{ t('views.admin.moderation.DomainsDetail.link.artists') }}
           </router-link>
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ stats.artists }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <span class="value">{{ stats?.artists }}</span>
-                    <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('domain', object.name) }}">
             {{ t('views.admin.moderation.DomainsDetail.link.albums') }}
           </router-link>
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ stats.albums }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                  <tr>
+        <span class="value">{{ stats?.albums }}</span>
-                    <td>
+      </Layout>
+      <Layout
+        flex
+        class="details"
+      >
+        <span class="label">
           <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('domain', object.name) }}">
             {{ t('views.admin.moderation.DomainsDetail.link.tracks') }}
           </router-link>
-                    </td>
+        </span>
-                    <td>
+        <Spacer
-                      {{ stats.tracks }}
+          h
-                    </td>
+          grow
-                  </tr>
+        />
-                </tbody>
+        <span class="value">{{ stats?.tracks }}</span>
-              </table>
+      </Layout>
-            </section>
+    </Layout>
-          </div>
+  </Layout>
-        </div>
-      </div>
-    </template>
-  </main>
 </template>
+
+<style scoped lang="scss">
+.channel-image {
+  width: 200px;
+  height: 200px;
+  font-size: 160px;
+  border: none;
+  display: block;
+  text-align: center;
+  align-content: center;
+  @include light-theme {
+    background-color: var(--fw-gray-200);
+  }
+  @include dark-theme {
+    background-color: var(--fw-gray-800);
+  }
+}
+
+h3.category {
+  margin-bottom: 16px;
+}
+
+.details {
+  padding: 0 16px;
+  height: 72px;
+  align-items: center;
+  border-top: 1px solid;
+  min-width: 280px;
+
+  @include light-theme {
+    border-color: var(--fw-gray-300);
+  }
+  @include dark-theme {
+    border-color: var(--fw-gray-800);
+  }
+
+  .label {
+    font-weight: 800;
+
+    @include light-theme {
+      color: var(--fw-gray-600);
+    }
+
+    @include dark-theme {
+      color: var(--fw-gray-500);
+    }
+  }
+
+  a.label,
+  a.value {
+    text-decoration: underline;
+  }
+
+  &:last-child {
+    border-bottom: 1px solid;
+  }
+}
+</style>

front/src/views/admin/moderation/ReportsList.vue

@@ -26,6 +26,7 @@ import useOrdering from '~/composables/navigation/useOrdering'
 import useErrorHandler from '~/composables/useErrorHandler'
 import usePage from '~/composables/navigation/usePage'
 import useLogger from '~/composables/useLogger'
+import Loader from '~/components/ui/Loader.vue'
 
 interface Props extends SmartSearchProps, OrderingProps {
   mode?: 'card'
@@ -194,12 +195,9 @@ const labels = computed(() => ({
         </Layout>
       </div>
     </div>
-    <div
+    <Loader
       v-if="isLoading"
-      class="ui active inverted dimmer"
+    />
-    >
-      <div class="ui loader" />
-    </div>
     <div v-else-if="!result || result.count === 0">
       <empty-state
         :refresh="true"