padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Simplify subscription details display in RelayHubDemo component

Browse source 
- 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.
This commit is contained in:
padreug 2025-08-10 18:54:50 +02:00
parent 13f6f44a89
commit 260806e690
2 changed files with 48 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/pages/RelayHubDemo.vue
View file

@ -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 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="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"
>
<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(', ') }}
<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-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 {