bvandeusen/GallerySubscriber
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat(ui): consistent empty states and running pulse on Dashboard

Browse Source 
- 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>
This commit is contained in:
Bryan Van Deusen
2026-03-19 18:31:03 -04:00
parent b419ee8b32
commit 294ccdc748
1 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Dashboard.vue
+29 -9
View File
@@ -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>