feat(nostr): Add connecting state to Nostr connection management

- Introduce `isConnecting` state in useNostr composable
- Update ConnectionStatus component to handle connecting state
- Add warning variant to Badge for connecting status
- Implement dynamic status text, color, and animation for connection states
- Modify App.vue to pass new isConnecting prop to ConnectionStatus

src/components/nostr/ConnectionStatus.vue

@@ -2,22 +2,51 @@
 <script setup lang="ts">
 import { Badge } from '@/components/ui/badge'
 
-defineProps<{
+const props = defineProps<{
   isConnected: boolean
+  isConnecting: boolean
   error?: Error | null
 }>()
+
+function getStatusVariant() {
+  if (props.isConnecting) return 'warning'
+  return props.isConnected ? 'success' : 'destructive'
+}
+
+function getStatusText() {
+  if (props.isConnecting) return 'Connecting'
+  return props.isConnected ? 'Online' : 'Offline'
+}
+
+function getStatusColor() {
+  if (props.isConnecting) return 'bg-yellow-400'
+  return props.isConnected ? 'bg-green-400' : 'bg-red-400'
+}
+
+function getStatusColorSolid() {
+  if (props.isConnecting) return 'bg-yellow-500'
+  return props.isConnected ? 'bg-green-500' : 'bg-red-500'
+}
 </script>
 
 <template>
   <div class="flex items-center gap-2">
-    <Badge :variant="isConnected ? 'success' : 'destructive'" class="flex items-center gap-1">
+    <Badge :variant="getStatusVariant()" 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 
+          class="absolute inline-flex h-full w-full rounded-full opacity-75"
+          :class="[
+            getStatusColor(),
+            { 'animate-ping': !props.isConnecting },
+            { 'animate-pulse': props.isConnecting }
+          ]"
+        />
+        <span 
+          class="relative inline-flex h-2 w-2 rounded-full"
+          :class="getStatusColorSolid()"
+        />
       </span>
-      <span class="text-[10px]">{{ isConnected ? 'Online' : 'Offline' }}</span>
+      <span class="text-[10px]">{{ getStatusText() }}</span>
     </Badge>
     <p v-if="error" class="text-xs text-destructive">
       {{ error.message }}

src/components/ui/badge/index.ts

@@ -15,6 +15,8 @@ export const badgeVariants = cva(
           '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',
+        warning:
+          'border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
         outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground',
       },
     },