refactor: Simplify subscription details display in RelayHubDemo component

- Remove the subscription details section from RelayHubStatus.vue to streamline the component.
- Implement a toggle button in RelayHubDemo.vue to show/hide subscription details, enhancing user interaction.
- Update the layout and messaging for better clarity when no active subscriptions are present, improving overall user experience.

src/components/RelayHubStatus.vue

@@ -60,41 +60,6 @@
         <div>Local: {{ activeSubscriptions.size }}</div>
         <div>Global: {{ totalSubscriptionCount }}</div>
       </div>
-      
-      <!-- Subscription Details -->
-      <div v-if="subscriptionDetails.length > 0" class="subscription-details">
-        <h5>Subscription Details:</h5>
-        <div class="subscription-list">
-          <div 
-            v-for="sub in subscriptionDetails" 
-            :key="sub.id" 
-            class="subscription-item"
-          >
-            <div class="subscription-id">
-              <strong>ID:</strong> {{ sub.id }}
-            </div>
-            <div class="subscription-filters">
-              <strong>Filters:</strong> {{ sub.filters.length }} filter(s)
-              <div v-if="sub.filters.length > 0" class="filter-details">
-                <div 
-                  v-for="(filter, index) in sub.filters" 
-                  :key="index" 
-                  class="filter-item"
-                >
-                  <code>{{ JSON.stringify(filter) }}</code>
-                </div>
-              </div>
-            </div>
-            <div v-if="sub.relays && sub.relays.length > 0" class="subscription-relays">
-              <strong>Relays:</strong> {{ sub.relays.join(', ') }}
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div v-else class="no-subscriptions">
-        No active subscriptions found
-      </div>
     </div>
   </div>
 </template>
@@ -111,7 +76,6 @@ const {
   connectedRelayCount,
   totalRelayCount,
   totalSubscriptionCount,
-  subscriptionDetails,
   connectionHealth,
   connect,
   disconnect,
@@ -369,109 +333,4 @@ const {
 .dark .subscription-count {
   color: #60a5fa;
 }
-
-.subscription-details {
-  margin-top: 1rem;
-  padding: 1rem;
-  background-color: #f1f5f9;
-  border-radius: 0.375rem;
-}
-
-.dark .subscription-details {
-  background-color: #334155;
-}
-
-.subscription-details h5 {
-  margin: 0 0 0.75rem 0;
-  color: #475569;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.dark .subscription-details h5 {
-  color: #94a3b8;
-}
-
-.subscription-list {
-  /* Individual subscription items handle their own spacing */
-}
-
-.subscription-item {
-  padding: 0.75rem;
-  background-color: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.375rem;
-  margin-bottom: 0.75rem;
-}
-
-.dark .subscription-item {
-  background-color: #1e293b;
-  border-color: #475569;
-}
-
-.subscription-item:last-child {
-  margin-bottom: 0;
-}
-
-.subscription-id {
-  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 {
-  margin-top: 0.25rem;
-  margin-left: 1rem;
-}
-
-.filter-item {
-  margin-bottom: 0.25rem;
-}
-
-.filter-item code {
-  background-color: #f8fafc;
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  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>

src/pages/RelayHubDemo.vue

@@ -16,26 +16,52 @@
 
       <!-- 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">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Subscription Details</h2>
+        <div class="flex items-center justify-between mb-4">
-        <div v-if="subscriptionDetails.length > 0" class="space-y-4">
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Subscription Details</h2>
-          <div 
+          <button
-            v-for="sub in subscriptionDetails" 
+            @click="toggleSubscriptionDetails"
-            :key="sub.id" 
+            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"
-            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">
+            <span>{{ showSubscriptionDetails ? 'Hide' : 'Show' }} Details</span>
-              {{ sub.id }}
+            <svg 
-            </div>
+              class="w-4 h-4 transition-transform duration-200" 
-            <div class="text-sm text-gray-600 dark:text-gray-300">
+              :class="{ 'rotate-180': showSubscriptionDetails }"
-              <div><strong>Filters:</strong> {{ sub.filters.length }} filter(s)</div>
+              fill="none" 
-              <div v-if="sub.relays && sub.relays.length > 0">
+              stroke="currentColor" 
-                <strong>Relays:</strong> {{ sub.relays.join(', ') }}
+              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-gray-500 dark:text-gray-400 text-center py-4">
+        
-          No active subscriptions
+        <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>
 
@@ -189,6 +215,13 @@ const subscriptionEvents = ref<any[]>([])
 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 {