From 9c7e0bd3b3557fd9b620b034d40b48046074569f Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 17:31:38 +0100
Subject: [PATCH] Refactor and optimize admin page components

- Remove unused imports and auto-refresh functionality
- Reduce padding and spacing for more compact admin layout
- Simplify stats generation and remove unused variables
- Adjust font sizes and icon sizes for better consistency
- Improve line-height on admin page title
- Minor performance optimizations
---
 src/components/admin/AdminStats.vue           |  91 ++++++---------
 src/components/admin/RecentActivityFeed.vue   |  81 +++++--------
 src/components/admin/SystemStatusPanel.vue    | 107 +++++++-----------
 .../admin/TorrentManagementGrid.vue           |  18 ++-
 src/pages/AdminPage.vue                       |   1 +
 5 files changed, 117 insertions(+), 181 deletions(-)

diff --git a/src/components/admin/AdminStats.vue b/src/components/admin/AdminStats.vue
index 59e33f2..c74038a 100644
--- a/src/components/admin/AdminStats.vue
+++ b/src/components/admin/AdminStats.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from "vue";
+  import { ref, computed, onMounted } from "vue";
   import IconProfile from "@/icons/IconProfile.vue";
   import IconPlay from "@/icons/IconPlay.vue";
   import IconRequest from "@/icons/IconRequest.vue";
@@ -95,7 +95,6 @@
 
   const loading = ref(false);
   const timeRange = ref("week");
-  let refreshInterval: number | null = null;
 
   const statCards = computed<Stat[]>(() => [
     {
@@ -155,7 +154,7 @@
     baseValue: number,
     points: number = 7
   ): number[] => {
-    return Array.from({ length: points }, (_, i) => {
+    return Array.from({ length: points }, () => {
       const variance = Math.random() * 0.3 - 0.15;
       return Math.max(0, Math.floor(baseValue * (1 + variance)));
     });
@@ -197,29 +196,7 @@
     console.log(`Stat card clicked: ${key}`);
   }
 
-  function startAutoRefresh() {
-    refreshInterval = window.setInterval(() => {
-      if (!loading.value) {
-        fetchStats();
-      }
-    }, 60000);
-  }
-
-  function stopAutoRefresh() {
-    if (refreshInterval) {
-      clearInterval(refreshInterval);
-      refreshInterval = null;
-    }
-  }
-
-  onMounted(() => {
-    fetchStats();
-    startAutoRefresh();
-  });
-
-  onUnmounted(() => {
-    stopAutoRefresh();
-  });
+  onMounted(() => fetchStats());
 </script>
 
 <style lang="scss" scoped>
@@ -229,7 +206,7 @@
   .admin-stats {
     background-color: var(--background-color-secondary);
     border-radius: 0.5rem;
-    padding: 1.5rem;
+    padding: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     max-width: 100%;
     overflow: hidden;
@@ -246,26 +223,26 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 1rem;
+      margin-bottom: 0.75rem;
       flex-wrap: wrap;
-      gap: 0.75rem;
+      gap: 0.5rem;
 
       @include mobile-only {
-        margin-bottom: 0.75rem;
+        margin-bottom: 0.6rem;
         width: 100%;
       }
     }
 
     &__title {
       margin: 0;
-      font-size: 1.25rem;
+      font-size: 1.1rem;
       font-weight: 400;
       color: $text-color;
       text-transform: uppercase;
       letter-spacing: 0.8px;
 
       @include mobile-only {
-        font-size: 1rem;
+        font-size: 0.95rem;
       }
     }
 
@@ -294,11 +271,11 @@
     &__grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 1rem;
+      gap: 0.75rem;
 
       @include mobile-only {
         grid-template-columns: repeat(2, 1fr);
-        gap: 0.75rem;
+        gap: 0.6rem;
         width: 100%;
       }
     }
@@ -373,7 +350,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 1rem;
+    padding: 0.75rem;
     background-color: var(--background-ui);
     border-radius: 0.5rem;
     text-align: center;
@@ -382,7 +359,7 @@
     min-width: 0;
 
     @include mobile-only {
-      padding: 0.65rem 0.4rem;
+      padding: 0.6rem 0.4rem;
       width: 100%;
       box-sizing: border-box;
     }
@@ -412,22 +389,22 @@
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.4rem;
 
       @include mobile-only {
-        margin-bottom: 0.35rem;
+        margin-bottom: 0.3rem;
       }
     }
 
     &__icon {
-      width: 24px;
-      height: 24px;
+      width: 20px;
+      height: 20px;
       fill: var(--highlight-color);
       opacity: 0.8;
 
       @include mobile-only {
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
       }
     }
 
@@ -454,31 +431,33 @@
     }
 
     &__value {
-      font-size: 1.75rem;
+      font-size: 2.2rem;
       font-weight: 600;
       color: var(--highlight-color);
-      margin-bottom: 0.25rem;
+      margin-bottom: 0.15rem;
+      line-height: 1.1;
+      padding: 1rem 0;
 
       @include mobile-only {
-        font-size: 1.4rem;
-        margin-bottom: 0.15rem;
+        font-size: 1.25rem;
+        margin-bottom: 0.1rem;
       }
     }
 
     &__label {
-      font-size: 0.85rem;
+      font-size: 0.75rem;
       color: $text-color-70;
       text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 0.5rem;
+      letter-spacing: 0.4px;
+      margin-bottom: 0.4rem;
       word-break: break-word;
       max-width: 100%;
+      line-height: 1.2;
 
       @include mobile-only {
-        font-size: 0.68rem;
-        margin-bottom: 0.35rem;
+        font-size: 0.65rem;
+        margin-bottom: 0.3rem;
         letter-spacing: 0.2px;
-        line-height: 1.2;
       }
     }
 
@@ -487,13 +466,13 @@
       align-items: flex-end;
       justify-content: space-between;
       width: 100%;
-      height: 30px;
-      margin-top: 0.5rem;
+      height: 24px;
+      margin-top: 0.4rem;
       gap: 2px;
 
       @include mobile-only {
-        height: 20px;
-        margin-top: 0.35rem;
+        height: 18px;
+        margin-top: 0.3rem;
         gap: 1px;
       }
     }
diff --git a/src/components/admin/RecentActivityFeed.vue b/src/components/admin/RecentActivityFeed.vue
index 96a3aef..68fd638 100644
--- a/src/components/admin/RecentActivityFeed.vue
+++ b/src/components/admin/RecentActivityFeed.vue
@@ -121,7 +121,6 @@
   const timeFilter = ref("24h");
   const hasMore = ref(true);
   const page = ref(1);
-  let refreshInterval: number | null = null;
 
   const filteredActivities = computed(() => {
     let result = [...activities.value];
@@ -265,29 +264,7 @@
     console.log("Activity clicked:", activity);
   }
 
-  function startAutoRefresh() {
-    refreshInterval = window.setInterval(() => {
-      if (!loading.value && !loadingMore.value) {
-        fetchActivities();
-      }
-    }, 30000);
-  }
-
-  function stopAutoRefresh() {
-    if (refreshInterval) {
-      clearInterval(refreshInterval);
-      refreshInterval = null;
-    }
-  }
-
-  onMounted(() => {
-    fetchActivities();
-    startAutoRefresh();
-  });
-
-  onUnmounted(() => {
-    stopAutoRefresh();
-  });
+  onMounted(fetchActivities);
 </script>
 
 <style lang="scss" scoped>
@@ -297,7 +274,7 @@
   .activity-feed {
     background-color: var(--background-color-secondary);
     border-radius: 0.5rem;
-    padding: 1.5rem;
+    padding: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     max-width: 100%;
     overflow: hidden;
@@ -314,26 +291,26 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 1rem;
+      margin-bottom: 0.75rem;
       flex-wrap: wrap;
-      gap: 1rem;
+      gap: 0.75rem;
 
       @include mobile-only {
-        gap: 0.75rem;
-        margin-bottom: 0.75rem;
+        gap: 0.6rem;
+        margin-bottom: 0.6rem;
       }
     }
 
     &__title {
       margin: 0;
-      font-size: 1.25rem;
+      font-size: 1.1rem;
       font-weight: 400;
       color: $text-color;
       text-transform: uppercase;
       letter-spacing: 0.8px;
 
       @include mobile-only {
-        font-size: 1rem;
+        font-size: 0.95rem;
         width: 100%;
       }
     }
@@ -391,14 +368,14 @@
     &__list {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
-      max-height: 500px;
+      gap: 0.4rem;
+      max-height: 450px;
       overflow-y: auto;
       padding-right: 0.25rem;
 
       @include mobile-only {
-        max-height: 400px;
-        gap: 0.4rem;
+        max-height: 350px;
+        gap: 0.35rem;
       }
 
       &::-webkit-scrollbar {
@@ -453,8 +430,8 @@
   .activity-item {
     display: flex;
     align-items: flex-start;
-    gap: 1rem;
-    padding: 0.75rem;
+    gap: 0.75rem;
+    padding: 0.65rem;
     background-color: var(--background-ui);
     border-radius: 0.5rem;
     transition: background-color 0.2s;
@@ -462,8 +439,8 @@
     min-width: 0;
 
     @include mobile-only {
-      gap: 0.65rem;
-      padding: 0.65rem;
+      gap: 0.6rem;
+      padding: 0.6rem;
       width: 100%;
       box-sizing: border-box;
     }
@@ -484,16 +461,16 @@
 
     &__icon {
       flex-shrink: 0;
-      width: 32px;
-      height: 32px;
+      width: 28px;
+      height: 28px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
 
       @include mobile-only {
-        width: 28px;
-        height: 28px;
+        width: 26px;
+        height: 26px;
       }
 
       &--request {
@@ -513,13 +490,13 @@
       }
 
       svg {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
         fill: $white;
 
         @include mobile-only {
-          width: 14px;
-          height: 14px;
+          width: 13px;
+          height: 13px;
         }
       }
     }
@@ -528,11 +505,11 @@
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 0.35rem;
+      gap: 0.25rem;
       min-width: 0;
 
       @include mobile-only {
-        gap: 0.25rem;
+        gap: 0.2rem;
       }
     }
 
@@ -540,11 +517,11 @@
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
-      gap: 0.5rem;
+      gap: 0.4rem;
     }
 
     &__message {
-      font-size: 0.9rem;
+      font-size: 0.85rem;
       color: $text-color;
       line-height: 1.3;
       flex: 1;
@@ -552,7 +529,7 @@
       overflow-wrap: break-word;
 
       @include mobile-only {
-        font-size: 0.8rem;
+        font-size: 0.78rem;
         line-height: 1.25;
       }
     }
diff --git a/src/components/admin/SystemStatusPanel.vue b/src/components/admin/SystemStatusPanel.vue
index 70eb729..e1c1395 100644
--- a/src/components/admin/SystemStatusPanel.vue
+++ b/src/components/admin/SystemStatusPanel.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted } from "vue";
+  import { ref, onMounted } from "vue";
   import IconActivity from "@/icons/IconActivity.vue";
   import IconClose from "@/icons/IconClose.vue";
 
@@ -152,7 +152,6 @@
   const systemItems = ref<SystemItem[]>([]);
   const loading = ref(false);
   const selectedItem = ref<SystemItem | null>(null);
-  let refreshInterval: number | null = null;
 
   const getMetricClass = (value: number) => {
     if (value >= 90) return "metric__fill--critical";
@@ -238,29 +237,7 @@
     alert(`Full logs for ${item.name} would open here`);
   }
 
-  function startAutoRefresh() {
-    refreshInterval = window.setInterval(() => {
-      if (!loading.value && !selectedItem.value) {
-        fetchSystemStatus();
-      }
-    }, 30000);
-  }
-
-  function stopAutoRefresh() {
-    if (refreshInterval) {
-      clearInterval(refreshInterval);
-      refreshInterval = null;
-    }
-  }
-
-  onMounted(() => {
-    fetchSystemStatus();
-    startAutoRefresh();
-  });
-
-  onUnmounted(() => {
-    stopAutoRefresh();
-  });
+  onMounted(fetchSystemStatus);
 </script>
 
 <style lang="scss" scoped>
@@ -270,7 +247,7 @@
   .system-status {
     background-color: var(--background-color-secondary);
     border-radius: 0.5rem;
-    padding: 1.5rem;
+    padding: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     max-width: 100%;
     overflow: hidden;
@@ -287,41 +264,41 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 1rem;
+      margin-bottom: 0.75rem;
 
       @include mobile-only {
-        margin-bottom: 0.75rem;
+        margin-bottom: 0.6rem;
       }
     }
 
     &__title {
       margin: 0;
-      font-size: 1.25rem;
+      font-size: 1.1rem;
       font-weight: 400;
       color: $text-color;
       text-transform: uppercase;
       letter-spacing: 0.8px;
 
       @include mobile-only {
-        font-size: 1rem;
+        font-size: 0.95rem;
       }
     }
 
     &__loading {
-      padding: 2rem;
+      padding: 1.5rem;
       text-align: center;
       color: $text-color-70;
 
       @include mobile-only {
-        padding: 1.5rem;
-        font-size: 0.9rem;
+        padding: 1rem;
+        font-size: 0.85rem;
       }
     }
 
     &__items {
       display: flex;
       flex-direction: column;
-      gap: 0.75rem;
+      gap: 0.6rem;
 
       @include mobile-only {
         gap: 0.5rem;
@@ -373,7 +350,7 @@
   }
 
   .status-item {
-    padding: 0.75rem;
+    padding: 0.65rem;
     background-color: var(--background-ui);
     border-radius: 0.5rem;
     cursor: pointer;
@@ -381,7 +358,7 @@
     min-width: 0;
 
     @include mobile-only {
-      padding: 0.65rem;
+      padding: 0.6rem;
       width: 100%;
       box-sizing: border-box;
     }
@@ -406,16 +383,17 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 0.25rem;
+      margin-bottom: 0.2rem;
     }
 
     &__name {
       font-weight: 500;
       color: $text-color;
-      font-size: 0.95rem;
+      font-size: 0.9rem;
+      line-height: 1.2;
 
       @include mobile-only {
-        font-size: 0.85rem;
+        font-size: 0.82rem;
       }
     }
 
@@ -469,43 +447,45 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.4rem;
 
       @include mobile-only {
         flex-direction: column;
         align-items: flex-start;
-        gap: 0.25rem;
-        margin-bottom: 0.35rem;
+        gap: 0.15rem;
+        margin-bottom: 0.3rem;
       }
     }
 
     &__value {
-      font-size: 0.85rem;
-      color: $text-color-70;
-
-      @include mobile-only {
-        font-size: 0.8rem;
-      }
-    }
-
-    &__description {
       font-size: 0.8rem;
-      color: $text-color-50;
+      color: $text-color-70;
+      line-height: 1.2;
 
       @include mobile-only {
         font-size: 0.75rem;
       }
     }
 
-    &__metrics {
-      margin-top: 0.5rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
+    &__description {
+      font-size: 0.75rem;
+      color: $text-color-50;
+      line-height: 1.2;
 
       @include mobile-only {
-        margin-top: 0.35rem;
-        gap: 0.35rem;
+        font-size: 0.7rem;
+      }
+    }
+
+    &__metrics {
+      margin-top: 0.4rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+
+      @include mobile-only {
+        margin-top: 0.3rem;
+        gap: 0.3rem;
       }
     }
   }
@@ -513,17 +493,18 @@
   .metric {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    font-size: 0.75rem;
+    gap: 0.4rem;
+    font-size: 0.7rem;
 
     &__label {
-      min-width: 70px;
+      min-width: 65px;
       color: $text-color-70;
+      line-height: 1;
     }
 
     &__bar {
       flex: 1;
-      height: 6px;
+      height: 5px;
       background-color: var(--background-40);
       border-radius: 3px;
       overflow: hidden;
diff --git a/src/components/admin/TorrentManagementGrid.vue b/src/components/admin/TorrentManagementGrid.vue
index a541bf4..21a54aa 100644
--- a/src/components/admin/TorrentManagementGrid.vue
+++ b/src/components/admin/TorrentManagementGrid.vue
@@ -306,9 +306,7 @@
     );
   }
 
-  onMounted(() => {
-    fetchTorrents();
-  });
+  onMounted(fetchTorrents);
 </script>
 
 <style lang="scss" scoped>
@@ -318,7 +316,7 @@
   .torrent-management {
     background-color: var(--background-color-secondary);
     border-radius: 0.5rem;
-    padding: 1.5rem;
+    padding: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     max-width: 100%;
 
@@ -335,26 +333,26 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 1rem;
+      margin-bottom: 0.75rem;
       flex-wrap: wrap;
-      gap: 1rem;
+      gap: 0.75rem;
 
       @include mobile-only {
-        gap: 0.75rem;
-        margin-bottom: 0.75rem;
+        gap: 0.6rem;
+        margin-bottom: 0.6rem;
       }
     }
 
     &__title {
       margin: 0;
-      font-size: 1.25rem;
+      font-size: 1.1rem;
       font-weight: 400;
       color: $text-color;
       text-transform: uppercase;
       letter-spacing: 0.8px;
 
       @include mobile-only {
-        font-size: 1rem;
+        font-size: 0.95rem;
         width: 100%;
       }
     }
diff --git a/src/pages/AdminPage.vue b/src/pages/AdminPage.vue
index db24230..36fa2f1 100644
--- a/src/pages/AdminPage.vue
+++ b/src/pages/AdminPage.vue
@@ -44,6 +44,7 @@
       font-size: 2rem;
       font-weight: 300;
       color: $text-color;
+      line-height: 1;
 
       @include mobile-only {
         font-size: 1.5rem;