feat(nostr): Add Nostr relay connection and status management

- Integrate nostr-tools for Nostr relay connectivity
- Create NostrClient for managing relay connections
- Implement useNostr composable for reactive connection handling
- Add ConnectionStatus component to display relay connection state
- Configure environment variable for Nostr relay endpoints
- Update App.vue to manage Nostr connection lifecycle

src/App.vue

@@ -1,7 +1,20 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted } 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 })
+
+onMounted(async () => {
+  await connect()
+})
+
+onUnmounted(() => {
+  disconnect()
+})
 </script>
 
 <template>
@@ -10,8 +23,9 @@ import Footer from '@/components/layout/Footer.vue'
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
       <header
         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">
+        <nav class="container flex h-14 items-center justify-between">
           <Navbar />
+          <ConnectionStatus :is-connected="isConnected" :error="error" />
         </nav>
       </header>
 

src/components/nostr/ConnectionStatus.vue

@@ -0,0 +1,20 @@
+<!-- A component that shows NOSTR connection status -->
+<script setup lang="ts">
+import { Badge } from '@/components/ui/badge'
+
+defineProps<{
+  isConnected: boolean
+  error?: Error | null
+}>()
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Badge :variant="isConnected ? 'default' : 'destructive'" class="h-5">
+      NOSTR: {{ isConnected ? 'Connected' : 'Disconnected' }}
+    </Badge>
+    <p v-if="error" class="text-sm text-destructive">
+      {{ error.message }}
+    </p>
+  </div>
+</template> 

src/composables/useNostr.ts

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

src/lib/nostr/client.ts

@@ -0,0 +1,44 @@
+import { SimplePool, getPublicKey, nip19 } from 'nostr-tools'
+
+export interface NostrClientConfig {
+  relays: string[]
+}
+
+export class NostrClient {
+  private pool: SimplePool
+  private relays: string[]
+  private _isConnected: boolean = false
+
+  constructor(config: NostrClientConfig) {
+    this.pool = new SimplePool()
+    this.relays = config.relays
+  }
+
+  get isConnected(): boolean {
+    return this._isConnected
+  }
+
+  async connect(): Promise<void> {
+    try {
+      // Try to connect to at least one relay
+      const connections = await Promise.allSettled(
+        this.relays.map(relay => this.pool.ensureRelay(relay))
+      )
+
+      // Check if at least one connection was successful
+      this._isConnected = connections.some(result => result.status === 'fulfilled')
+
+      if (!this._isConnected) {
+        throw new Error('Failed to connect to any relay')
+      }
+    } catch (error) {
+      this._isConnected = false
+      throw error
+    }
+  }
+
+  disconnect(): void {
+    this.pool.close(this.relays)
+    this._isConnected = false
+  }
+}