style: Improve RelayHubStatus and RelayHubDemo components for better dark mode support and UI consistency
- Update styles in RelayHubStatus.vue to enhance dark mode appearance, including adjustments to colors, borders, and font weights. - Refactor RelayHubDemo.vue to improve layout and responsiveness, ensuring better visibility and usability in both light and dark themes. - Add dark mode styles for various elements, including headers, buttons, and informational texts, to provide a cohesive user experience across the application.
This commit is contained in:
parent
48761e8035
commit
13f6f44a89
2 changed files with 202 additions and 91 deletions
|
|
@ -1,33 +1,32 @@
|
|||
<template>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<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 mb-4">Nostr Relay Hub Demo</h1>
|
||||
<p class="text-gray-600">
|
||||
This page demonstrates the centralized relay hub that manages all Nostr WebSocket connections.
|
||||
The hub ensures connections stay active, especially important for mobile devices.
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Relay Hub Demo</h1>
|
||||
<p class="text-gray-600 dark:text-gray-300">
|
||||
Test and monitor the centralized Nostr relay hub functionality
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Relay Hub Status -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Relay Hub Status</h2>
|
||||
<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 rounded-lg shadow p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Subscription Details</h2>
|
||||
<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 Details</h2>
|
||||
<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 rounded-lg"
|
||||
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 mb-2">
|
||||
<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">
|
||||
<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(', ') }}
|
||||
|
|
@ -35,67 +34,65 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-gray-500 text-center py-4">
|
||||
<div v-else class="text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
No active subscriptions
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connection Test -->
|
||||
<div class="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Connection Test</h2>
|
||||
<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">
|
||||
<div class="flex items-center space-x-4">
|
||||
<button
|
||||
@click="testConnection"
|
||||
:disabled="isTesting"
|
||||
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{{ isTesting ? 'Testing...' : 'Test Connection' }}
|
||||
</button>
|
||||
<span v-if="testResult" class="text-sm" :class="testResult.success ? 'text-green-600' : 'text-red-600'">
|
||||
{{ testResult.message }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="testResult && testResult.success" class="text-sm text-gray-600">
|
||||
<p>Successfully connected to {{ testResult.connectedCount }} relays</p>
|
||||
<p>Connection health: {{ testResult.health }}%</p>
|
||||
<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 rounded-lg shadow p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Subscription Test</h2>
|
||||
<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">
|
||||
<div class="flex items-center space-x-4">
|
||||
<button
|
||||
@click="testSubscription"
|
||||
:disabled="!isConnected || isSubscribing"
|
||||
class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
{{ isSubscribing ? 'Subscribing...' : 'Test Subscription' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="activeTestSubscription"
|
||||
@click="unsubscribeTest"
|
||||
class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
|
||||
>
|
||||
Unsubscribe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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 mb-2">Received Events ({{ subscriptionEvents.length }}):</p>
|
||||
<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 rounded text-xs"
|
||||
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"
|
||||
>
|
||||
<div class="font-mono text-gray-700">{{ event.id.substring(0, 8) }}...</div>
|
||||
<div class="text-gray-600">Kind: {{ event.kind }}</div>
|
||||
<div class="text-gray-600">Author: {{ event.pubkey.substring(0, 8) }}...</div>
|
||||
{{ event.id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,47 +100,50 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Visibility Test -->
|
||||
<div class="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">Mobile Visibility Test</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Test how the relay hub handles mobile app lifecycle events (visibility changes, network changes).
|
||||
</p>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="w-4 h-4 rounded-full" :class="pageVisible ? 'bg-green-500' : 'bg-red-500'"></span>
|
||||
<span>Page Visible: {{ pageVisible ? 'Yes' : 'No' }}</span>
|
||||
<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="flex items-center space-x-2">
|
||||
<span class="w-4 h-4 rounded-full" :class="networkOnline ? 'bg-green-500' : 'bg-red-500'"></span>
|
||||
<span>Network Online: {{ networkOnline ? 'Yes' : 'No' }}</span>
|
||||
|
||||
<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 class="mt-4 text-xs text-gray-500">
|
||||
<p>• Try switching tabs or minimizing the browser window</p>
|
||||
<p>• Disconnect your network to test offline handling</p>
|
||||
<p>• The relay hub will maintain connections and reconnect automatically</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Info -->
|
||||
<div class="bg-white rounded-lg shadow p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Configuration</h2>
|
||||
<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">Configured Relays:</span>
|
||||
<span>{{ config.nostr.relays.length }}</span>
|
||||
<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">Market Relays:</span>
|
||||
<span>{{ config.market.supportedRelays.length }}</span>
|
||||
<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 mb-2">Relay URLs:</p>
|
||||
<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 p-2 rounded"
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue