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

@@ -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>