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/App.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import Navbar from '@/components/layout/Navbar.vue'
 import Footer from '@/components/layout/Footer.vue'
 import ConnectionStatus from '@/components/nostr/ConnectionStatus.vue'
 import { useNostr } from '@/composables/useNostr'
 
 const relays = JSON.parse(import.meta.env.VITE_NOSTR_RELAYS as string)
-const { isConnected, error, connect, disconnect } = useNostr({ relays })
+const { isConnected, isConnecting, error, connect, disconnect } = useNostr({ relays })
 
 onMounted(async () => {
   await connect()
@@ -25,7 +25,11 @@ onUnmounted(() => {
         class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <nav class="container flex h-14 items-center justify-between">
           <Navbar />
-          <ConnectionStatus :is-connected="isConnected" :error="error" />
+          <ConnectionStatus 
+            :is-connected="isConnected" 
+            :is-connecting="isConnecting" 
+            :error="error" 
+          />
         </nav>
       </header>