RackPeek/RackPeek.Web/Components/Layout/ReconnectModal.razor

<dialog id="components-reconnect-modal" class="w-full max-w-md p-6 bg-zinc-900 text-zinc-200 font-mono rounded-lg border border-zinc-800 shadow-lg" data-nosnippet>
    <div class="flex flex-col items-center space-y-4">

        <!-- Animated rejoin indicator -->
        <div class="flex space-x-2 h-6 items-end">
            <div class="w-1 h-3 bg-emerald-400 animate-bounce"></div>
            <div class="w-1 h-3 bg-emerald-400 animate-bounce delay-200"></div>
        </div>

        <!-- Status messages -->
        <p class="components-reconnect-first-attempt-visible text-sm text-zinc-300">
            Rejoining the server...
        </p>
        <p class="components-reconnect-repeated-attempt-visible text-sm text-amber-400">
            Rejoin failed... trying again in <span id="components-seconds-to-next-attempt" class="font-bold"></span> seconds.
        </p>
        <p class="components-reconnect-failed-visible text-sm text-red-500 text-center">
            Failed to rejoin.<br/>Please retry or reload the page.
        </p>

        <!-- Buttons -->
        <div class="flex space-x-3">
            <button id="components-reconnect-button" class="components-reconnect-failed-visible px-4 py-1 bg-emerald-400 text-zinc-900 rounded hover:bg-emerald-500 transition">
                Retry
            </button>
            <button id="components-resume-button" class="components-pause-visible px-4 py-1 bg-emerald-400 text-zinc-900 rounded hover:bg-emerald-500 transition">
                Resume
            </button>
        </div>

        <p class="components-pause-visible text-sm text-zinc-400 text-center">
            The session has been paused by the server.
        </p>
        <p class="components-resume-failed-visible text-sm text-red-500 text-center">
            Failed to resume the session.<br/>Please reload the page.
        </p>
    </div>
</dialog>

<script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>