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/composables/useNostr.ts

@@ -4,27 +4,33 @@ import { NostrClient, type NostrClientConfig } from '@/lib/nostr/client'
 export function useNostr(config: NostrClientConfig) {
   const client = new NostrClient(config)
   const isConnected = ref(false)
+  const isConnecting = ref(false)
   const error = ref<Error | null>(null)
 
   async function connect() {
     try {
       error.value = null
+      isConnecting.value = true
       await client.connect()
       isConnected.value = client.isConnected
     } catch (err) {
       error.value = err instanceof Error ? err : new Error('Failed to connect')
       isConnected.value = false
+    } finally {
+      isConnecting.value = false
     }
   }
 
   function disconnect() {
     client.disconnect()
     isConnected.value = false
+    isConnecting.value = false
     error.value = null
   }
 
   return {
     isConnected,
+    isConnecting,
     error,
     connect,
     disconnect