Oliver/cc-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(live): Skeleton loading, EmptyState, spacing

Browse source 
Show 3 skeleton rows while SSE is not yet connected, replace emoji empty state with EmptyState component (Radio+Zap icons), add focus-visible ring to Clear button, slightly increase event row padding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-13 11:18:51 +01:00
parent ec6fb8c37b
commit 86607fbf06
1 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/views/LiveView.vue
View file

@ -5,7 +5,10 @@ import { useAuthStore } from '@/stores/auth'
import Card from '@/components/ui/Card.vue'
import CardContent from '@/components/ui/CardContent.vue'
import Button from '@/components/ui/Button.vue'
import Skeleton from '@/components/ui/Skeleton.vue'
import EmptyState from '@/components/ui/EmptyState.vue'
import { formatDateTime } from '@/lib/utils'
import { Radio, Zap } from 'lucide-vue-next'
const authStore = useAuthStore()
const token = authStore.getToken()
@ -74,7 +77,7 @@ function getProjectName(data: unknown): string {
<Button v-if="!connected" variant="outline" size="sm" @click="connect">
Reconnect
</Button>
<Button variant="ghost" size="sm" @click="clearEvents">
<Button variant="ghost" size="sm" class="focus-visible:ring-2 focus-visible:ring-ring" @click="clearEvents">
Clear
</Button>
</div>
@ -87,18 +90,25 @@ function getProjectName(data: unknown): string {
<!-- Event feed -->
<Card class="flex-1 overflow-hidden">
<CardContent class="p-0 h-full">
<div v-if="recentEvents.length === 0" class="flex items-center justify-center h-full text-sm text-muted-foreground">
<div class="text-center">
<div class="text-2xl mb-2">📡</div>
<p>Waiting for events...</p>
<p class="text-xs mt-1">Activity will appear here in real-time</p>
</div>
<!-- Loading skeletons while not yet connected -->
<div v-if="!connected && recentEvents.length === 0" class="p-4 space-y-4">
<Skeleton class="h-24 w-full rounded-xl" />
<Skeleton class="h-24 w-full rounded-xl" />
<Skeleton class="h-24 w-full rounded-xl" />
</div>
<div v-else class="overflow-y-auto h-full font-mono text-xs">
<!-- Empty state once connected but no events -->
<EmptyState
v-else-if="recentEvents.length === 0"
title="No live sessions"
description="Start a Claude Code session to see activity here."
:icons="[Radio, Zap]"
/>
<div v-else class="overflow-y-auto h-full font-mono text-xs space-y-0">
<div
v-for="(event, idx) in recentEvents"
:key="idx"
class="flex items-start gap-2 px-4 py-1.5 hover:bg-muted/50 border-b border-border/30"
class="flex items-start gap-2 px-4 py-2 hover:bg-muted/50 border-b border-border/30"
>
<span :class="getEventColor(event.type)" class="shrink-0 mt-0.5">
{{ getEventIcon(event.type) }}