From 2ec94851c47a980cb8c072e80cdb262acb5481ef Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sat, 20 Dec 2025 21:50:45 +0100
Subject: [PATCH] fix(ui): Remove non-functional bell button and add refresh
 feedback

Remove unused notifications button from navbar header. Add spinning
animation and visual feedback to refresh button when data is loading.

Signed-off-by: nfebe <fenn25.fn@gmail.com>
---
 src/layouts/DashboardLayout.vue | 36 +++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 8fb6a24..1adf1f7 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -237,12 +237,9 @@
               <span>{{ stats.stoppedContainers }} Stopped</span>
             </div>
           </div>
-          <button class="header-btn" @click="refreshAll">
+          <button class="header-btn" :class="{ refreshing: isRefreshing }" @click="refreshAll">
             <i class="pi pi-refresh" />
           </button>
-          <button class="header-btn">
-            <i class="pi pi-bell" />
-          </button>
         </div>
       </header>
 
@@ -263,6 +260,7 @@ const route = useRoute();
 const router = useRouter();
 const statsStore = useStatsStore();
 const sidebarCollapsed = ref(false);
+const isRefreshing = ref(false);
 
 const expandedGroups = reactive({
   stacks: true,
@@ -364,8 +362,16 @@ const breadcrumbs = computed(() => {
   return crumbs;
 });
 
-const refreshAll = () => {
-  statsStore.fetchAll();
+const refreshAll = async () => {
+  if (isRefreshing.value) return;
+  isRefreshing.value = true;
+  try {
+    await statsStore.fetchAll();
+  } finally {
+    setTimeout(() => {
+      isRefreshing.value = false;
+    }, 500);
+  }
 };
 
 const handleLogout = () => {
@@ -760,6 +766,24 @@ onMounted(() => {
   color: #334155;
 }
 
+.header-btn.refreshing {
+  pointer-events: none;
+  color: #3b82f6;
+}
+
+.header-btn.refreshing i {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .content-area {
   flex: 1;
   padding: 1.5rem;