From 13f6f44a89354cbd39bed2405d12d60f095a623b Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 10 Aug 2025 18:48:55 +0200
Subject: [PATCH] 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.
---
 src/components/RelayHubStatus.vue | 131 ++++++++++++++++++++++--
 src/pages/RelayHubDemo.vue        | 162 +++++++++++++++---------------
 2 files changed, 202 insertions(+), 91 deletions(-)

diff --git a/src/components/RelayHubStatus.vue b/src/components/RelayHubStatus.vue
index 1225231..c4e52db 100644
--- a/src/components/RelayHubStatus.vue
+++ b/src/components/RelayHubStatus.vue
@@ -121,29 +121,37 @@ const {
 
 <style scoped>
 .relay-hub-status {
-  padding: 1rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  background-color: #f8fafc;
-  max-width: 600px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
 .status-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
+  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.875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   text-transform: capitalize;
 }
@@ -165,7 +173,7 @@ const {
 
 .connection-indicator.error {
   background-color: #fecaca;
-  color: #7f1d1d;
+  color: #dc2626;
 }
 
 .connection-info {
@@ -175,8 +183,13 @@ const {
 .info-row {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding: 0.5rem 0;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.dark .info-row {
+  border-bottom-color: #334155;
 }
 
 .info-row:last-child {
@@ -185,17 +198,30 @@ const {
 
 .label {
   font-weight: 500;
-  color: #475569;
+  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;
 }
@@ -205,6 +231,10 @@ const {
   color: #1e293b;
 }
 
+.dark .relay-list h4 {
+  color: #f1f5f9;
+}
+
 .relay-item {
   display: grid;
   grid-template-columns: 1fr auto auto auto;
@@ -217,6 +247,11 @@ const {
   margin-bottom: 0.5rem;
 }
 
+.dark .relay-item {
+  background-color: #1e293b;
+  border-color: #475569;
+}
+
 .relay-url {
   font-family: monospace;
   font-size: 0.875rem;
@@ -224,6 +259,10 @@ const {
   word-break: break-all;
 }
 
+.dark .relay-url {
+  color: #94a3b8;
+}
+
 .relay-status {
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
@@ -245,12 +284,20 @@ const {
   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;
@@ -268,26 +315,50 @@ const {
   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;
@@ -295,6 +366,10 @@ const {
   margin-bottom: 1rem;
 }
 
+.dark .subscription-count {
+  color: #60a5fa;
+}
+
 .subscription-details {
   margin-top: 1rem;
   padding: 1rem;
@@ -302,6 +377,10 @@ const {
   border-radius: 0.375rem;
 }
 
+.dark .subscription-details {
+  background-color: #334155;
+}
+
 .subscription-details h5 {
   margin: 0 0 0.75rem 0;
   color: #475569;
@@ -309,6 +388,10 @@ const {
   font-weight: 600;
 }
 
+.dark .subscription-details h5 {
+  color: #94a3b8;
+}
+
 .subscription-list {
   /* Individual subscription items handle their own spacing */
 }
@@ -321,6 +404,11 @@ const {
   margin-bottom: 0.75rem;
 }
 
+.dark .subscription-item {
+  background-color: #1e293b;
+  border-color: #475569;
+}
+
 .subscription-item:last-child {
   margin-bottom: 0;
 }
@@ -329,10 +417,20 @@ const {
   margin-bottom: 0.5rem;
   font-family: monospace;
   font-size: 0.875rem;
+  color: #1e293b;
+}
+
+.dark .subscription-id {
+  color: #f1f5f9;
 }
 
 .subscription-filters {
   margin-bottom: 0.5rem;
+  color: #64748b;
+}
+
+.dark .subscription-filters {
+  color: #94a3b8;
 }
 
 .filter-details {
@@ -352,15 +450,28 @@ const {
   color: #475569;
 }
 
+.dark .filter-item code {
+  background-color: #475569;
+  color: #e2e8f0;
+}
+
 .subscription-relays {
   font-size: 0.875rem;
   color: #64748b;
 }
 
+.dark .subscription-relays {
+  color: #94a3b8;
+}
+
 .no-subscriptions {
   text-align: center;
   color: #94a3b8;
   font-style: italic;
   padding: 1rem;
 }
+
+.dark .no-subscriptions {
+  color: #64748b;
+}
 </style>
diff --git a/src/pages/RelayHubDemo.vue b/src/pages/RelayHubDemo.vue
index e95b888..6ffdd5f 100644
--- a/src/pages/RelayHubDemo.vue
+++ b/src/pages/RelayHubDemo.vue
@@ -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>