webui/components/sync/sync-status.html

<html>

<head>
    <title>Sync Status</title>
    <script type="module">
        import { store } from "/components/sync/sync-store.js";
    </script>

    <style>
        .status-icon {
            display: inline-flex;
            align-items: center;
            gap: 0.1rem;
        }

        .status-icon svg {
            pointer-events: none;
        }

        .status-icon > x-extension {
            display: contents;
        }

        .pending-ring {
            animation: pendingPulse 1.2s infinite ease-in-out;
        }

        @keyframes pendingPulse {
            0% {
                stroke-opacity: 1;
                stroke-width: 3;
            }

            50% {
                stroke-opacity: 0.25;
                stroke-width: 5;
            }

            100% {
                stroke-opacity: 1;
                stroke-width: 3;
            }
        }
    </style>
</head>

<body>
    <div x-data>
        <template x-if="$store.sync">
            <div
                class="status-icon"
                x-create="$store.sync.init()"
            >
                <svg viewBox="0 0 30 30" width="20" height="20" aria-label="sync status">
                    <circle
                        cx="15" cy="15" r="12" fill="none" stroke="#e40138" stroke-width="3"
                        :class="{ 'pending-ring': $store.sync.mode === 'HANDSHAKE_PENDING' }"
                        :r="['HEALTHY', 'DEGRADED'].includes($store.sync.mode) ? 8 : 12"
                        :fill="$store.sync.mode === 'HEALTHY' ? '#00c340' : $store.sync.mode === 'DEGRADED' ? '#ff6b00' : 'none'"
                        :stroke="$store.sync.mode === 'HANDSHAKE_PENDING' ? '#f0a000' : $store.sync.mode === 'DISCONNECTED' ? '#e40138' : 'none'"
                    />
                </svg>
                <x-extension id="sync-status-end"></x-extension>
            </div>
        </template>
    </div>
</body>

</html>