From 294ccdc74819dee3ba6427795556ba85cc3630af Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 19 Mar 2026 18:31:03 -0400
Subject: [PATCH] feat(ui): consistent empty states and running pulse on
 Dashboard

- Updated empty state messages to include descriptive icons, main text (body-1), and helper text (caption)
- Active Downloads: shows idle status with check-circle icon
- Recent Activity: shows history icon with context about failures/new downloads
- Sources Needing Attention: shows check-all icon confirming 7-day health check
- Added pulse animation to running downloads with left border animation
- Consistent styling across all empty states with py-8 padding and secondary color icons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/Dashboard.vue | 38 ++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 57b2dd9..668865f 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -150,7 +150,11 @@
           </v-card-title>
           <v-card-text>
             <v-list v-if="activeDownloads.length" density="compact">
-              <v-list-item v-for="dl in activeDownloads" :key="dl.id">
+              <v-list-item
+                v-for="dl in activeDownloads"
+                :key="dl.id"
+                :class="{ 'download-running': dl.status === 'running' }"
+              >
                 <template v-slot:prepend>
                   <v-icon :color="dl.status === 'running' ? 'info' : 'warning'" size="small">
                     {{ dl.status === 'running' ? 'mdi-loading mdi-spin' : 'mdi-clock-outline' }}
@@ -166,9 +170,10 @@
                 </v-list-item-subtitle>
               </v-list-item>
             </v-list>
-            <div v-else class="text-center text-grey py-4">
-              <v-icon size="32" class="mb-2">mdi-check-circle-outline</v-icon>
-              <div>No active downloads</div>
+            <div v-else class="text-center py-8">
+              <v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-check-circle-outline</v-icon>
+              <div class="text-body-1 mt-2">No active downloads</div>
+              <div class="text-caption text-medium-emphasis mt-1">All sources are idle</div>
             </div>
           </v-card-text>
         </v-card>
@@ -214,8 +219,10 @@
                 </template>
               </v-list-item>
             </v-list>
-            <div v-else class="text-center text-grey py-4">
-              No recent activity (failures or new downloads)
+            <div v-else class="text-center py-8">
+              <v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-history</v-icon>
+              <div class="text-body-1 mt-2">No recent activity</div>
+              <div class="text-caption text-medium-emphasis mt-1">Failures and new downloads appear here</div>
             </div>
           </v-card-text>
           <v-card-actions>
@@ -275,9 +282,10 @@
                 </tr>
               </tbody>
             </v-table>
-            <div v-else class="text-center text-grey py-4">
-              <v-icon size="48" class="mb-2">mdi-check-circle-outline</v-icon>
-              <div>All sources are healthy!</div>
+            <div v-else class="text-center py-8">
+              <v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-check-all</v-icon>
+              <div class="text-body-1 mt-2">All sources healthy</div>
+              <div class="text-caption text-medium-emphasis mt-1">No failures in the last 7 days</div>
             </div>
           </v-card-text>
         </v-card>
@@ -589,3 +597,15 @@ async function retrySource(source) {
   }
 }
 </script>
+
+<style scoped>
+.download-running {
+  border-left: 3px solid rgb(var(--v-theme-primary));
+  animation: pulse-border 2s ease-in-out infinite;
+}
+
+@keyframes pulse-border {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+</style>