From 0923731ee959e707a64950baa884f6c855970ee2 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 9 Mar 2025 15:08:24 +0100
Subject: [PATCH] feat(ui): Enhance ConnectionStatus and Badge components with
 dynamic status indicators

- Add animated ping effect to ConnectionStatus badge
- Update Badge variants with more subtle color schemes
- Implement success variant for online/offline states
- Reduce text size and improve visual hierarchy
- Use rounded-full badge design for better aesthetics
---
 src/components/nostr/ConnectionStatus.vue | 12 +++++++++---
 src/components/ui/badge/index.ts          | 10 ++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/nostr/ConnectionStatus.vue b/src/components/nostr/ConnectionStatus.vue
index e653b20..b40cc69 100644
--- a/src/components/nostr/ConnectionStatus.vue
+++ b/src/components/nostr/ConnectionStatus.vue
@@ -10,10 +10,16 @@ defineProps<{
 
 <template>
   <div class="flex items-center gap-2">
-    <Badge :variant="isConnected ? 'default' : 'destructive'" class="h-5">
-      NOSTR: {{ isConnected ? 'Connected' : 'Disconnected' }}
+    <Badge :variant="isConnected ? 'success' : 'destructive'" class="flex items-center gap-1">
+      <span class="relative flex h-2 w-2">
+        <span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+          :class="isConnected ? 'bg-green-400' : 'bg-red-400'" />
+        <span class="relative inline-flex h-2 w-2 rounded-full"
+          :class="isConnected ? 'bg-green-500' : 'bg-red-500'" />
+      </span>
+      <span class="text-[10px]">{{ isConnected ? 'Online' : 'Offline' }}</span>
     </Badge>
-    <p v-if="error" class="text-sm text-destructive">
+    <p v-if="error" class="text-xs text-destructive">
       {{ error.message }}
     </p>
   </div>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
index 9ad9d56..3b9d8d3 100644
--- a/src/components/ui/badge/index.ts
+++ b/src/components/ui/badge/index.ts
@@ -3,16 +3,18 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Badge } from './Badge.vue'
 
 export const badgeVariants = cva(
-  'inline-flex items-center whitespace-nowrap rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center whitespace-nowrap rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+          'border-transparent bg-primary/10 text-primary hover:bg-primary/20',
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'border-transparent bg-secondary/10 text-secondary-foreground hover:bg-secondary/20',
         destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+          'border-transparent bg-destructive/10 text-destructive hover:bg-destructive/20',
+        success:
+          'border-transparent bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
         outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground',
       },
     },