diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 23a57f5..9fb0a86 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -13,13 +13,6 @@ async function handleLogout() { router.push('/login') } -const stampLabel = computed(() => { - if (!authStore.isAuthenticated) return 'offline' - if (listsStore.isSyncing) return 'syncing' - if (listsStore.pendingCount > 0) return `${listsStore.pendingCount} pending` - return 'synced' -}) - const stampClass = computed(() => { if (!authStore.isAuthenticated) return '' if (listsStore.pendingCount > 0 || listsStore.isSyncing) return 'stamp-pending' @@ -46,15 +39,17 @@ const stampTitle = computed(() => { v-if="listsStore.error" class="stamp stamp-danger" :title="listsStore.error" - >sync error + :aria-label="listsStore.error" + role="img" + > {{ stampLabel }} + :aria-label="stampTitle" + role="img" + > @@ -121,6 +116,14 @@ const stampTitle = computed(() => { flex-shrink: 0; } +.stamp-pending { + color: var(--c-warning); +} + +.stamp-synced { + color: var(--c-success); +} + .stamp-danger { color: var(--c-danger); cursor: help;