From ca845467e198249e4de5eef772d7fc859c52474c Mon Sep 17 00:00:00 2001
From: Paco <ribemont.francois@gmail.com>
Date: Mon, 9 Feb 2026 07:40:45 +0000
Subject: [PATCH] Refactoring and UI improvements on the admin home page (#348)

---
 components/MiniTile.vue          | 28 ++++++++++
 components/PieChart/PieChart.vue | 56 ++++++++++----------
 pages/admin/index.vue            | 87 +++++++++-----------------------
 3 files changed, 80 insertions(+), 91 deletions(-)
 create mode 100644 components/MiniTile.vue

diff --git a/components/MiniTile.vue b/components/MiniTile.vue
new file mode 100644
index 00000000..a3c1649a
--- /dev/null
+++ b/components/MiniTile.vue
@@ -0,0 +1,28 @@
+<template>
+  <TileWithLink>
+    <div class="h-full flex gap-4">
+      <div class="flex-1 my-auto">
+        <slot name="icon" />
+      </div>
+      <div
+        class="md:flex-8 flex-6 lg:flex-2 my-auto text-center flex md:flex-row-reverse lg:inline"
+      >
+        <div class="md:text-2xl text-3xl flex-1 font-bold self-center">
+          {{ value }}
+        </div>
+        <div
+          class="text-2xl xl:text-xs flex-1 md:flex-auto text-left md:text-center lg:text-center self-center"
+        >
+          {{ label }}
+        </div>
+      </div>
+    </div>
+  </TileWithLink>
+</template>
+
+<script setup lang="ts">
+const { label, value } = defineProps<{
+  label: string;
+  value: string | number;
+}>();
+</script>
diff --git a/components/PieChart/PieChart.vue b/components/PieChart/PieChart.vue
index 374e8d4e..64a603a7 100644
--- a/components/PieChart/PieChart.vue
+++ b/components/PieChart/PieChart.vue
@@ -1,34 +1,36 @@
 <template>
   <h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
-  <div class="flex flex-col xl:flex-row gap-4">
-    <div class="relative flex grow max-w-[12rem]">
-      <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
-        <PieChartPieSlice
+  <div class="flex">
+    <div class="flex flex-col md:flex-row xl:gap-4 mx-auto">
+      <div class="relative flex max-w-[12rem] my-auto min-w-50">
+        <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
+          <PieChartPieSlice
+            v-for="slice in slices"
+            :key="`${slice.percentage}-${slice.totalPercentage}`"
+            :slice="slice"
+          />
+        </svg>
+        <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+      </div>
+      <ul class="flex flex-col gap-y-1 m-auto text-left">
+        <li
           v-for="slice in slices"
-          :key="`${slice.percentage}-${slice.totalPercentage}`"
-          :slice="slice"
-        />
-      </svg>
-      <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+          :key="slice.value"
+          class="text-sm inline-flex items-center gap-x-1"
+        >
+          <span
+            class="size-3 inline-block rounded-sm"
+            :class="CHART_COLOURS[slice.color].bg"
+          />
+          {{
+            $t("common.labelValueColon", {
+              label: slice.label,
+              value: slice.value,
+            })
+          }}
+        </li>
+      </ul>
     </div>
-    <ul class="flex flex-col gap-y-1 my-auto text-left">
-      <li
-        v-for="slice in slices"
-        :key="slice.value"
-        class="text-sm inline-flex items-center gap-x-1"
-      >
-        <span
-          class="size-3 inline-block rounded-sm"
-          :class="CHART_COLOURS[slice.color].bg"
-        />
-        {{
-          $t("common.labelValueColon", {
-            label: slice.label,
-            value: slice.value,
-          })
-        }}
-      </li>
-    </ul>
   </div>
 </template>
 
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index f84243b8..3ef385be 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -15,83 +15,42 @@
     >
       <div class="grid grid-cols-6 gap-4">
         <div class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1">
-          <TileWithLink>
-            <div class="h-full flex">
-              <div class="flex-1 my-auto">
-                <ApplicationLogo />
-              </div>
-              <div
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
-              >
-                <div class="text-2xl flex-1 font-bold">{{ version }}</div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.version") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
+          <MiniTile :value="version" :label="t('home.admin.version')">
+            <template #icon>
+              <ApplicationLogo />
+            </template>
+          </MiniTile>
         </div>
 
         <div class="col-span-6 lg:col-span-1 md:col-span-3">
-          <TileWithLink>
-            <div class="h-full flex">
-              <div class="flex-1 my-auto">
-                <GamepadIcon />
-              </div>
-              <div
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
-              >
-                <div class="text-3xl flex-1 font-bold">{{ gameCount }}</div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.games") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
+          <MiniTile :label="t('home.admin.games')" :value="gameCount">
+            <template #icon>
+              <GamepadIcon />
+            </template>
+          </MiniTile>
         </div>
 
         <div
           class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-1 lg:row-start-2"
         >
-          <TileWithLink>
-            <div class="h-full flex">
-              <div class="flex-1 my-auto">
-                <ServerStackIcon />
-              </div>
-              <div
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
-              >
-                <div class="text-3xl flex-1 font-bold">
-                  {{ sources.length }}
-                </div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.librarySources") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
+          <MiniTile
+            :value="sources.length"
+            :label="t('home.admin.librarySources')"
+          >
+            <template #icon>
+              <ServerStackIcon />
+            </template>
+          </MiniTile>
         </div>
 
         <div
           class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-2 lg:row-start-2"
         >
-          <TileWithLink>
-            <div class="h-full flex">
-              <div class="flex-1 my-auto">
-                <UserGroupIcon />
-              </div>
-              <div
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
-              >
-                <div class="text-3xl flex-1 font-bold">
-                  {{ userStats.userCount }}
-                </div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.users") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
+          <MiniTile :value="userStats.userCount" :label="t('home.admin.users')">
+            <template #icon>
+              <UserGroupIcon />
+            </template>
+          </MiniTile>
         </div>
 
         <div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">