From 18f48581cd71d0d5267500bb567c9321aa27b299 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 5 Sep 2025 05:29:58 +0200
Subject: [PATCH] Remove RelayHubStatus, NostrFeed, and related composables for
 codebase cleanup

- Delete RelayHubStatus.vue and its associated components to streamline the application structure.
- Remove NostrFeed.vue to eliminate unused functionality and improve maintainability.
- Eliminate the legacy useRelayHub composable, reflecting a shift towards modular service architecture.
- Clean up router configuration by removing references to deleted components, enhancing clarity and organization.
---
 src/components/RelayHubStatus.vue  | 332 ----------------------------
 src/components/nostr/NostrFeed.vue | 336 -----------------------------
 src/composables/useRelayHub.ts     |   7 -
 src/pages/RelayHubStatus.vue       | 331 ----------------------------
 src/router/index.ts                |  71 ------
 5 files changed, 1077 deletions(-)
 delete mode 100644 src/components/RelayHubStatus.vue
 delete mode 100644 src/components/nostr/NostrFeed.vue
 delete mode 100644 src/composables/useRelayHub.ts
 delete mode 100644 src/pages/RelayHubStatus.vue
 delete mode 100644 src/router/index.ts

diff --git a/src/components/RelayHubStatus.vue b/src/components/RelayHubStatus.vue
deleted file mode 100644
index 8222440..0000000
--- a/src/components/RelayHubStatus.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<template>
-  <div class="relay-hub-status">
-    <div class="status-header">
-      <h3>Nostr Relay Hub Status</h3>
-      <div class="connection-indicator" :class="connectionStatus">
-        {{ connectionStatus }}
-      </div>
-    </div>
-
-    <div class="connection-info">
-      <div class="info-row">
-        <span class="label">Status:</span>
-        <span class="value">{{ connectionStatus }}</span>
-      </div>
-      <div class="info-row">
-        <span class="label">Connected Relays:</span>
-        <span class="value">{{ connectedRelayCount }}/{{ totalRelayCount }}</span>
-      </div>
-      <div class="info-row">
-        <span class="label">Health:</span>
-        <span class="value">{{ connectionHealth.toFixed(1) }}%</span>
-      </div>
-      <div class="info-row" v-if="error">
-        <span class="label">Error:</span>
-        <span class="value error">{{ error.message }}</span>
-      </div>
-    </div>
-
-    <div class="relay-list" v-if="relayStatuses.length > 0">
-      <h4>Relay Status</h4>
-      <div class="relay-item" v-for="relay in relayStatuses" :key="relay.url">
-        <div class="relay-url">{{ relay.url }}</div>
-        <div class="relay-status" :class="{ connected: relay.connected }">
-          {{ relay.connected ? 'Connected' : 'Disconnected' }}
-        </div>
-        <div class="relay-latency" v-if="relay.latency !== undefined">
-          {{ relay.latency }}ms
-        </div>
-        <div class="relay-error" v-if="relay.error">
-          {{ relay.error }}
-        </div>
-      </div>
-    </div>
-
-    <div class="actions">
-      <button @click="connect" :disabled="connectionStatus === 'connecting'">
-        Connect
-      </button>
-      <button @click="disconnect" :disabled="!isConnected">
-        Disconnect
-      </button>
-    </div>
-
-    <div class="subscription-info">
-      <h4>Active Subscriptions</h4>
-      <div class="subscription-count">
-        <div>Local: {{ activeSubscriptions.size }}</div>
-        <div>Global: {{ totalSubscriptionCount }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { relayHubComposable } from '@/composables/useRelayHub'
-
-const {
-  isConnected,
-  connectionStatus,
-  relayStatuses,
-  error,
-  activeSubscriptions,
-  connectedRelayCount,
-  totalRelayCount,
-  totalSubscriptionCount,
-  connectionHealth,
-  connect,
-  disconnect
-} = relayHubComposable
-</script>
-
-<style scoped>
-.relay-hub-status {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.status-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.status-header h3 {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.dark .status-header h3 {
-  color: #f1f5f9;
-}
-
-.dark .status-header {
-  border-bottom-color: #475569;
-}
-
-.connection-indicator {
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-
-.connection-indicator.connected {
-  background-color: #dcfce7;
-  color: #166534;
-}
-
-.connection-indicator.connecting {
-  background-color: #fef3c7;
-  color: #92400e;
-}
-
-.connection-indicator.disconnected {
-  background-color: #fee2e2;
-  color: #991b1b;
-}
-
-.connection-indicator.error {
-  background-color: #fecaca;
-  color: #dc2626;
-}
-
-.connection-info {
-  margin-bottom: 1.5rem;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #f1f5f9;
-}
-
-.dark .info-row {
-  border-bottom-color: #334155;
-}
-
-.info-row:last-child {
-  border-bottom: none;
-}
-
-.label {
-  font-weight: 500;
-  color: #64748b;
-}
-
-.dark .label {
-  color: #94a3b8;
-}
-
-.value {
-  font-weight: 600;
-  color: #1e293b;
-}
-
-.dark .value {
-  color: #f1f5f9;
-}
-
-.value.error {
-  color: #dc2626;
-}
-
-.dark .value.error {
-  color: #fca5a5;
-}
-
-.relay-list {
-  margin-bottom: 1.5rem;
-}
-
-.relay-list h4 {
-  margin: 0 0 0.75rem 0;
-  color: #1e293b;
-}
-
-.dark .relay-list h4 {
-  color: #f1f5f9;
-}
-
-.relay-item {
-  display: grid;
-  grid-template-columns: 1fr auto auto auto;
-  gap: 0.75rem;
-  align-items: center;
-  padding: 0.75rem;
-  background-color: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.375rem;
-  margin-bottom: 0.5rem;
-}
-
-.dark .relay-item {
-  background-color: #1e293b;
-  border-color: #475569;
-}
-
-.relay-url {
-  font-family: monospace;
-  font-size: 0.875rem;
-  color: #475569;
-  word-break: break-all;
-}
-
-.dark .relay-url {
-  color: #94a3b8;
-}
-
-.relay-status {
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: center;
-  background-color: #fee2e2;
-  color: #991b1b;
-}
-
-.relay-status.connected {
-  background-color: #dcfce7;
-  color: #166534;
-}
-
-.relay-latency {
-  font-size: 0.75rem;
-  color: #64748b;
-  text-align: center;
-}
-
-.dark .relay-latency {
-  color: #94a3b8;
-}
-
-.relay-error {
-  font-size: 0.75rem;
-  color: #dc2626;
-  text-align: center;
-}
-
-.dark .relay-error {
-  color: #fca5a5;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.actions button {
-  padding: 0.5rem 1rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  background-color: white;
-  color: #374151;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.dark .actions button {
-  background-color: #374151;
-  color: #f9fafb;
-  border-color: #6b7280;
-}
-
-.actions button:hover:not(:disabled) {
-  background-color: #f9fafb;
-  border-color: #9ca3af;
-}
-
-.dark .actions button:hover:not(:disabled) {
-  background-color: #4b5563;
-  border-color: #9ca3af;
-}
-
-.actions button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.dark .actions button:disabled {
-  background-color: #6b7280;
-  color: #9ca3af;
-}
-
-.subscription-info {
-  border-top: 1px solid #e2e8f0;
-  padding-top: 1rem;
-}
-
-.dark .subscription-info {
-  border-top-color: #475569;
-}
-
-.subscription-info h4 {
-  margin: 0 0 0.5rem 0;
-  color: #1e293b;
-}
-
-.dark .subscription-info h4 {
-  color: #f1f5f9;
-}
-
-.subscription-count {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #3b82f6;
-  margin-bottom: 1rem;
-}
-
-.dark .subscription-count {
-  color: #60a5fa;
-}
-</style>
diff --git a/src/components/nostr/NostrFeed.vue b/src/components/nostr/NostrFeed.vue
deleted file mode 100644
index 1723445..0000000
--- a/src/components/nostr/NostrFeed.vue
+++ /dev/null
@@ -1,336 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { formatDistanceToNow } from 'date-fns'
-import { Megaphone, RefreshCw, AlertCircle } from 'lucide-vue-next'
-import { config, configUtils } from '@/lib/config'
-import { relayHubComposable } from '@/composables/useRelayHub'
-
-const props = defineProps<{
-  relays?: string[]
-  feedType?: 'all' | 'announcements' | 'events' | 'general'
-}>()
-
-const relayHub = relayHubComposable
-
-// Reactive state
-const notes = ref<any[]>([])
-const isLoading = ref(false)
-const error = ref<Error | null>(null)
-const isConnected = ref(false)
-
-// Get admin/moderator pubkeys from centralized config
-const adminPubkeys = config.nostr.adminPubkeys
-
-// Check if we have admin pubkeys configured
-const hasAdminPubkeys = computed(() => adminPubkeys.length > 0)
-
-// Get feed title and description based on type
-const feedTitle = computed(() => {
-  switch (props.feedType) {
-    case 'announcements':
-      return 'Community Announcements'
-    case 'events':
-      return 'Events & Calendar'
-    case 'general':
-      return 'General Discussion'
-    default:
-      return 'Community Feed'
-  }
-})
-
-const feedDescription = computed(() => {
-  switch (props.feedType) {
-    case 'announcements':
-      return 'Important announcements from community administrators'
-    case 'events':
-      return 'Upcoming events and calendar updates'
-    case 'general':
-      return 'Community discussions and general posts'
-    default:
-      return 'Latest posts from the community'
-  }
-})
-
-// Check if a post is from an admin
-function isAdminPost(pubkey: string): boolean {
-  return configUtils.isAdminPubkey(pubkey)
-}
-
-// Load notes from relays
-async function loadNotes() {
-  if (!hasAdminPubkeys.value && props.feedType === 'announcements') {
-    notes.value = []
-    return
-  }
-
-  try {
-    isLoading.value = true
-    error.value = null
-
-    // Connect to relay hub if not already connected
-    if (!relayHub.isConnected.value) {
-      await relayHub.connect()
-    }
-
-    isConnected.value = relayHub.isConnected.value
-
-    if (!isConnected.value) {
-      throw new Error('Failed to connect to Nostr relays')
-    }
-
-    // Configure filters based on feed type
-    const filters: any[] = [{
-      kinds: [1], // TEXT_NOTE
-      limit: 50
-    }]
-
-    // Filter by authors for announcements
-    if (props.feedType === 'announcements' && hasAdminPubkeys.value) {
-      filters[0].authors = adminPubkeys
-    }
-
-    // Query events from relays
-    const events = await relayHub.queryEvents(filters)
-    
-    // Process and filter events
-    let processedNotes = events.map(event => ({
-      id: event.id,
-      pubkey: event.pubkey,
-      content: event.content,
-      created_at: event.created_at,
-      tags: event.tags || [],
-      // Extract mentions from tags
-      mentions: event.tags?.filter((tag: any[]) => tag[0] === 'p').map((tag: any[]) => tag[1]) || [],
-      // Check if it's a reply
-      isReply: event.tags?.some((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply'),
-      replyTo: event.tags?.find((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply')?.[1]
-    }))
-
-    // Sort by creation time (newest first)
-    processedNotes.sort((a, b) => b.created_at - a.created_at)
-
-    // For general feed, exclude admin posts
-    if (props.feedType === 'general' && hasAdminPubkeys.value) {
-      processedNotes = processedNotes.filter(note => !isAdminPost(note.pubkey))
-    }
-
-    notes.value = processedNotes
-
-  } catch (err) {
-    const errorObj = err instanceof Error ? err : new Error('Failed to load notes')
-    error.value = errorObj
-    console.error('Failed to load notes:', errorObj)
-  } finally {
-    isLoading.value = false
-  }
-}
-
-// Refresh the feed
-async function refreshFeed() {
-  await loadNotes()
-}
-
-// Subscribe to real-time updates
-let unsubscribe: (() => void) | null = null
-
-async function startRealtimeSubscription() {
-  if (!relayHub.isConnected.value) return
-
-  try {
-    const filters: any[] = [{
-      kinds: [1], // TEXT_NOTE
-      limit: 10
-    }]
-
-    if (props.feedType === 'announcements' && hasAdminPubkeys.value) {
-      filters[0].authors = adminPubkeys
-    }
-
-    unsubscribe = relayHub.subscribe({
-      id: `feed-${props.feedType || 'all'}`,
-      filters,
-      onEvent: (event) => {
-        // Add new note to the beginning of the list
-        const newNote = {
-          id: event.id,
-          pubkey: event.pubkey,
-          content: event.content,
-          created_at: event.created_at,
-          tags: event.tags || [],
-          mentions: event.tags?.filter((tag: any[]) => tag[0] === 'p').map((tag: any[]) => tag[1]) || [],
-          isReply: event.tags?.some((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply'),
-          replyTo: event.tags?.find((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply')?.[1]
-        }
-
-        // Check if note should be included
-        let shouldInclude = true
-        if (props.feedType === 'announcements' && !isAdminPost(event.pubkey)) {
-          shouldInclude = false
-        }
-        if (props.feedType === 'general' && isAdminPost(event.pubkey)) {
-          shouldInclude = false
-        }
-
-        if (shouldInclude) {
-          notes.value.unshift(newNote)
-          // Limit array size
-          if (notes.value.length > 100) {
-            notes.value = notes.value.slice(0, 100)
-          }
-        }
-      }
-    })
-  } catch (error) {
-    console.error('Failed to start real-time subscription:', error)
-  }
-}
-
-// Cleanup subscription
-function cleanup() {
-  if (unsubscribe) {
-    unsubscribe()
-    unsubscribe = null
-  }
-}
-
-onMounted(async () => {
-  await loadNotes()
-  await startRealtimeSubscription()
-})
-
-onUnmounted(() => {
-  cleanup()
-})
-</script>
-
-<template>
-  <Card class="w-full">
-    <CardHeader>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <Megaphone class="h-5 w-5 text-primary" />
-          <div>
-            <CardTitle>{{ feedTitle }}</CardTitle>
-            <CardDescription>{{ feedDescription }}</CardDescription>
-          </div>
-        </div>
-        <Button 
-          variant="outline" 
-          size="sm" 
-          @click="refreshFeed"
-          :disabled="isLoading"
-          class="gap-2"
-        >
-          <RefreshCw :class="{ 'animate-spin': isLoading }" class="h-4 w-4" />
-          Refresh
-        </Button>
-      </div>
-    </CardHeader>
-
-    <CardContent>
-      <!-- Connection Status -->
-      <div v-if="!isConnected && !isLoading" class="mb-4 p-3 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-        <div class="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
-          <AlertCircle class="h-4 w-4" />
-          <span class="text-sm">Not connected to relays</span>
-        </div>
-      </div>
-
-      <!-- Loading State -->
-      <div v-if="isLoading" class="flex items-center justify-center py-8">
-        <div class="flex items-center gap-2">
-          <RefreshCw class="h-4 w-4 animate-spin" />
-          <span class="text-muted-foreground">Loading announcements...</span>
-        </div>
-      </div>
-
-      <!-- Error State -->
-      <div v-else-if="error" class="text-center py-8">
-        <div class="flex items-center justify-center gap-2 text-destructive mb-4">
-          <AlertCircle class="h-5 w-5" />
-          <span>Failed to load announcements</span>
-        </div>
-        <p class="text-sm text-muted-foreground mb-4">{{ error.message }}</p>
-        <Button @click="refreshFeed" variant="outline">Try Again</Button>
-      </div>
-
-      <!-- No Admin Pubkeys Warning -->
-      <div v-else-if="!hasAdminPubkeys && props.feedType === 'announcements'" class="text-center py-8">
-        <div class="flex items-center justify-center gap-2 text-muted-foreground mb-4">
-          <Megaphone class="h-5 w-5" />
-          <span>No admin pubkeys configured</span>
-        </div>
-        <p class="text-sm text-muted-foreground">
-          Community announcements will appear here once admin pubkeys are configured.
-        </p>
-      </div>
-
-      <!-- No Notes -->
-      <div v-else-if="notes.length === 0" class="text-center py-8">
-        <div class="flex items-center justify-center gap-2 text-muted-foreground mb-4">
-          <Megaphone class="h-5 w-5" />
-          <span>No announcements yet</span>
-        </div>
-        <p class="text-sm text-muted-foreground">
-          Check back later for community updates and announcements.
-        </p>
-      </div>
-
-      <!-- Notes List -->
-      <ScrollArea v-else class="h-[400px] pr-4">
-        <div class="space-y-4">
-          <div 
-            v-for="note in notes" 
-            :key="note.id"
-            class="p-4 border rounded-lg hover:bg-accent/50 transition-colors"
-          >
-            <!-- Note Header -->
-            <div class="flex items-start justify-between mb-2">
-              <div class="flex items-center gap-2">
-                <Badge 
-                  v-if="isAdminPost(note.pubkey)" 
-                  variant="default" 
-                  class="text-xs"
-                >
-                  Admin
-                </Badge>
-                <Badge 
-                  v-if="note.isReply" 
-                  variant="secondary" 
-                  class="text-xs"
-                >
-                  Reply
-                </Badge>
-                <span class="text-xs text-muted-foreground">
-                  {{ formatDistanceToNow(note.created_at * 1000, { addSuffix: true }) }}
-                </span>
-              </div>
-            </div>
-
-            <!-- Note Content -->
-            <div class="text-sm leading-relaxed whitespace-pre-wrap">
-              {{ note.content }}
-            </div>
-
-            <!-- Note Footer -->
-            <div v-if="note.mentions.length > 0" class="mt-2 pt-2 border-t">
-              <div class="flex items-center gap-1 text-xs text-muted-foreground">
-                <span>Mentions:</span>
-                <span v-for="mention in note.mentions.slice(0, 3)" :key="mention" class="font-mono">
-                  {{ mention.slice(0, 8) }}...
-                </span>
-                <span v-if="note.mentions.length > 3" class="text-muted-foreground">
-                  +{{ note.mentions.length - 3 }} more
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </ScrollArea>
-    </CardContent>
-  </Card>
-</template>
diff --git a/src/composables/useRelayHub.ts b/src/composables/useRelayHub.ts
deleted file mode 100644
index d20eb01..0000000
--- a/src/composables/useRelayHub.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Legacy composable stub - replaced by modular base module services
-export function useRelayHub() {
-  return {
-    connectedRelays: [],
-    status: 'disconnected'
-  }
-}
\ No newline at end of file
diff --git a/src/pages/RelayHubStatus.vue b/src/pages/RelayHubStatus.vue
deleted file mode 100644
index c7c213a..0000000
--- a/src/pages/RelayHubStatus.vue
+++ /dev/null
@@ -1,331 +0,0 @@
-<template>
-  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
-    <div class="max-w-6xl mx-auto px-4">
-      <div class="mb-8">
-        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Relay Hub Status</h1>
-        <p class="text-gray-600 dark:text-gray-300">
-          Monitor and test the centralized Nostr relay hub functionality
-        </p>
-      </div>
-
-      <!-- Relay Hub Status -->
-      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Relay Hub Status</h2>
-        <RelayHubStatus />
-      </div>
-
-      <!-- Subscription Details -->
-      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Subscription Details</h2>
-          <button
-            @click="toggleSubscriptionDetails"
-            class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
-          >
-            <span>{{ showSubscriptionDetails ? 'Hide' : 'Show' }} Details</span>
-            <svg 
-              class="w-4 h-4 transition-transform duration-200" 
-              :class="{ 'rotate-180': showSubscriptionDetails }"
-              fill="none" 
-              stroke="currentColor" 
-              viewBox="0 0 24 24"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-        </div>
-        
-        <div v-if="showSubscriptionDetails">
-          <div v-if="subscriptionDetails.length > 0" class="space-y-4">
-            <div 
-              v-for="sub in subscriptionDetails" 
-              :key="sub.id" 
-              class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700"
-            >
-              <div class="font-mono text-sm font-semibold text-blue-600 dark:text-blue-400 mb-2">
-                {{ sub.id }}
-              </div>
-              <div class="text-sm text-gray-600 dark:text-gray-300">
-                <div><strong>Filters:</strong> {{ sub.filters.length }} filter(s)</div>
-                <div v-if="sub.relays && sub.relays.length > 0">
-                  <strong>Relays:</strong> {{ sub.relays.join(', ') }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div v-else class="text-gray-500 dark:text-gray-400 text-center py-4">
-            No active subscriptions
-          </div>
-        </div>
-        
-        <div v-else class="text-center py-8">
-          <div class="text-gray-400 dark:text-gray-500 text-sm">
-            Click "Show Details" to view subscription information
-          </div>
-        </div>
-      </div>
-
-      <!-- Connection Test -->
-      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Connection Test</h2>
-        <div class="space-y-4">
-          <button
-            @click="testConnection"
-            :disabled="isTesting || isConnected"
-            class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
-          >
-            {{ isTesting ? 'Testing...' : 'Test Connection' }}
-          </button>
-
-          <div v-if="testResult" class="p-4 rounded-lg" :class="{
-            'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200': testResult.success,
-            'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200': !testResult.success
-          }">
-            <p class="font-medium">{{ testResult.message }}</p>
-            <div v-if="testResult.success" class="mt-2 text-sm">
-              <p>Connected Relays: {{ testResult.connectedCount }}</p>
-              <p>Connection Health: {{ testResult.health?.toFixed(1) }}%</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Subscription Test -->
-      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Subscription Test</h2>
-        <div class="space-y-4">
-          <button
-            @click="testSubscription"
-            :disabled="isSubscribing"
-            class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
-          >
-            {{ isSubscribing ? 'Subscribing...' : 'Test Subscription' }}
-          </button>
-
-          <button
-            v-if="activeTestSubscription"
-            @click="unsubscribeTest"
-            class="px-4 py-2 bg-red-600 dark:bg-red-500 text-white rounded-lg hover:bg-red-700 dark:hover:bg-red-600 transition-colors"
-          >
-            Unsubscribe
-          </button>
-
-          <div v-if="subscriptionEvents.length > 0" class="text-sm">
-            <p class="font-medium text-gray-900 dark:text-white mb-2">Received Events ({{ subscriptionEvents.length }}):</p>
-            <div class="space-y-2 max-h-40 overflow-y-auto">
-              <div
-                v-for="event in subscriptionEvents.slice(-5)"
-                :key="event.id"
-                class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded text-xs font-mono text-gray-700 dark:text-gray-300"
-              >
-                {{ event.id }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Mobile Visibility Test -->
-      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Mobile Visibility Test</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
-            <div class="flex items-center space-x-2 mb-2">
-              <div class="w-3 h-3 rounded-full" :class="pageVisible ? 'bg-green-500' : 'bg-red-500'"></div>
-              <span class="font-medium text-gray-900 dark:text-white">Page Visibility</span>
-            </div>
-            <p class="text-sm text-gray-600 dark:text-gray-300">
-              {{ pageVisible ? 'Page is visible' : 'Page is hidden (backgrounded)' }}
-            </p>
-          </div>
-
-          <div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
-            <div class="flex items-center space-x-2 mb-2">
-              <div class="w-3 h-3 rounded-full" :class="networkOnline ? 'bg-green-500' : 'bg-red-500'"></div>
-              <span class="font-medium text-gray-900 dark:text-white">Network Status</span>
-            </div>
-            <p class="text-sm text-gray-600 dark:text-gray-300">
-              {{ networkOnline ? 'Network is online' : 'Network is offline' }}
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <!-- Configuration Info -->
-      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Configuration</h2>
-        <div class="space-y-2 text-sm">
-          <div class="flex justify-between">
-            <span class="font-medium text-gray-700 dark:text-gray-300">Configured Relays:</span>
-            <span class="text-gray-900 dark:text-white">{{ config.nostr.relays.length }}</span>
-          </div>
-          <div class="flex justify-between">
-            <span class="font-medium text-gray-700 dark:text-gray-300">Market Relays:</span>
-            <span class="text-gray-900 dark:text-white">{{ config.market.supportedRelays.length }}</span>
-          </div>
-          <div class="mt-4">
-            <p class="font-medium text-gray-700 dark:text-gray-300 mb-2">Relay URLs:</p>
-            <div class="space-y-1">
-              <div
-                v-for="relay in config.nostr.relays"
-                :key="relay"
-                class="font-mono text-xs bg-gray-50 dark:bg-gray-700 p-2 rounded border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300"
-              >
-                {{ relay }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import RelayHubStatus from '@/components/RelayHubStatus.vue'
-import { config } from '@/lib/config'
-import { relayHubComposable } from '@/composables/useRelayHub'
-
-const {
-  isConnected,
-  connectionStatus,
-  connectionHealth,
-  connectedRelayCount,
-  subscriptionDetails,
-  initialize,
-  connect,
-  subscribe
-} = relayHubComposable
-
-// Test state
-const isTesting = ref(false)
-const testResult = ref<{
-  success: boolean
-  message: string
-  connectedCount?: number
-  health?: number
-} | null>(null)
-
-const isSubscribing = ref(false)
-const activeTestSubscription = ref<(() => void) | null>(null)
-const subscriptionEvents = ref<any[]>([])
-
-// Mobile visibility state
-const pageVisible = ref(!document.hidden)
-const networkOnline = ref(navigator.onLine)
-
-// Subscription details visibility state
-const showSubscriptionDetails = ref(false)
-
-const toggleSubscriptionDetails = () => {
-  showSubscriptionDetails.value = !showSubscriptionDetails.value
-}
-
-// Test connection
-const testConnection = async () => {
-  try {
-    isTesting.value = true
-    testResult.value = null
-    
-    if (!isConnected.value) {
-      await connect()
-    }
-    
-    testResult.value = {
-      success: true,
-      message: 'Connection test successful!',
-      connectedCount: connectedRelayCount.value,
-      health: connectionHealth.value
-    }
-  } catch (error) {
-    testResult.value = {
-      success: false,
-      message: `Connection test failed: ${error instanceof Error ? error.message : 'Unknown error'}`
-    }
-  } finally {
-    isTesting.value = false
-  }
-}
-
-// Test subscription
-const testSubscription = async () => {
-  try {
-    isSubscribing.value = true
-    subscriptionEvents.value = []
-    
-    // Subscribe to some test events (kind 1 text notes)
-    const unsubscribe = subscribe({
-      id: 'test-subscription',
-      filters: [{ kinds: [1], limit: 10 }],
-      onEvent: (event: any) => {
-        subscriptionEvents.value.push(event)
-        console.log('Received test event:', event)
-      },
-      onEose: () => {
-        console.log('Test subscription EOSE')
-      }
-    })
-    
-    activeTestSubscription.value = unsubscribe
-    
-  } catch (error) {
-    console.error('Subscription test failed:', error)
-  } finally {
-    isSubscribing.value = false
-  }
-}
-
-// Unsubscribe from test
-const unsubscribeTest = () => {
-  if (activeTestSubscription.value) {
-    activeTestSubscription.value()
-    activeTestSubscription.value = null
-    subscriptionEvents.value = []
-  }
-}
-
-// Setup mobile visibility handlers
-const handleVisibilityChange = () => {
-  pageVisible.value = !document.hidden
-}
-
-const handleOnline = () => {
-  networkOnline.value = true
-}
-
-const handleOffline = () => {
-  networkOnline.value = false
-}
-
-onMounted(() => {
-  // Initialize relay hub if not already done
-  if (!isConnected.value && connectionStatus.value === 'disconnected') {
-    initialize().catch(console.error)
-  }
-  
-  // Setup visibility and network listeners
-  document.addEventListener('visibilitychange', handleVisibilityChange)
-  window.addEventListener('online', handleOnline)
-  window.addEventListener('offline', handleOffline)
-})
-
-onUnmounted(() => {
-  // Cleanup listeners
-  document.removeEventListener('visibilitychange', handleVisibilityChange)
-  window.removeEventListener('online', handleOnline)
-  window.removeEventListener('offline', handleOffline)
-  
-  // Cleanup test subscription
-  if (activeTestSubscription.value) {
-    activeTestSubscription.value()
-  }
-})
-</script>
-
-<style scoped>
-.container {
-  min-height: 100vh;
-  background-color: #f8fafc;
-}
-</style>
diff --git a/src/router/index.ts b/src/router/index.ts
deleted file mode 100644
index c06616d..0000000
--- a/src/router/index.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { auth } from '@/composables/useAuth'
-import Home from '@/pages/Home.vue'
-import LoginDemo from '@/pages/LoginDemo.vue'
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Home,
-      meta: {
-        requiresAuth: true
-      }
-    },
-    {
-      path: '/login',
-      name: 'login',
-      component: LoginDemo,
-      meta: {
-        requiresAuth: false
-      }
-    },
-    {
-      path: '/cart',
-      name: 'cart',
-      component: () => import('@/pages/Cart.vue'),
-      meta: {
-        title: 'Shopping Cart',
-        requiresAuth: true
-      }
-    },
-    {
-      path: '/order-history',
-      name: 'OrderHistory',
-      component: () => import('@/pages/OrderHistory.vue'),
-      meta: { requiresAuth: true }
-    },
-    {
-      path: '/relay-hub-status',
-      name: 'relay-hub-status',
-      component: () => import('@/pages/RelayHubStatus.vue'),
-      meta: {
-        title: 'Relay Hub Status',
-        requiresAuth: true
-      }
-    },
-
-  ]
-})
-
-// Navigation guard to check authentication
-router.beforeEach(async (to, _from, next) => {
-  // Initialize auth if not already done
-  if (!auth.isAuthenticated.value && auth.checkAuth()) {
-    await auth.initialize()
-  }
-
-  if (to.meta.requiresAuth && !auth.isAuthenticated.value) {
-    // Redirect to login if authentication is required but user is not authenticated
-    next('/login')
-  } else if (to.path === '/login' && auth.isAuthenticated.value) {
-    // Redirect to home if user is already authenticated and trying to access login
-    next('/')
-  } else {
-    next()
-  }
-})
-
-export default router