feat: add refresh button to modal for dynamic data loading

This commit is contained in:
2025-12-04 22:57:11 -05:00
parent 82fa0828c5
commit 4ae992a26a

View File

@@ -1123,10 +1123,18 @@
style="display: none;">
<div @click.stop
class="relative w-full max-w-5xl bg-gradient-to-br from-background via-background-secondary to-background rounded-2xl border border-primary/20 shadow-2xl max-h-[90vh] overflow-hidden">
<button @click="open = false"
class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors z-10 bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background">
<x-ri-close-line class="size-5" />
</button>
<div class="absolute top-4 right-4 flex items-center gap-2 z-10">
<button @click="loadConnectionData()"
:disabled="loading"
class="text-base/50 hover:text-primary transition-colors bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background disabled:opacity-50 disabled:cursor-not-allowed"
title="Refresh data">
<x-ri-refresh-line class="size-5" :class="{ 'animate-spin': loading }" x-bind:class="loading ? 'animate-spin' : ''" />
</button>
<button @click="open = false"
class="text-base/50 hover:text-base transition-colors bg-background/80 backdrop-blur-sm rounded-full p-2 hover:bg-background">
<x-ri-close-line class="size-5" />
</button>
</div>
{{-- Modal Header --}}
<div class="bg-gradient-to-r from-primary/10 to-secondary/10 border-b border-primary/20 p-6">