feat: sync active mailbox pulse indicator with WebSocket connection status

This commit is contained in:
idevakk
2026-03-06 02:50:07 +05:30
parent e6fd4e6f4c
commit c35206664d
3 changed files with 17 additions and 2 deletions

View File

@@ -13,4 +13,16 @@ if (document.querySelector('[data-requires-reverb]')) {
forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https', forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'], enabledTransports: ['ws', 'wss'],
}); });
// Handle WebSocket connection status events
const dispatchStatus = (connected) => {
window.dispatchEvent(new CustomEvent('ws-status', {
detail: { connected }
}));
};
window.Echo.connector.pusher.connection.bind('connected', () => dispatchStatus(true));
window.Echo.connector.pusher.connection.bind('unavailable', () => dispatchStatus(false));
window.Echo.connector.pusher.connection.bind('disconnected', () => dispatchStatus(false));
window.Echo.connector.pusher.connection.bind('failed', () => dispatchStatus(false));
} }

View File

@@ -25,6 +25,7 @@
<body class="bg-app-bg text-[#FAFAFA] antialiased selection:bg-[#EC4899]/30 h-full overflow-hidden" <body class="bg-app-bg text-[#FAFAFA] antialiased selection:bg-[#EC4899]/30 h-full overflow-hidden"
x-data="{ x-data="{
toasts: [], toasts: [],
wsConnected: true,
addToast(msg, type = 'success') { addToast(msg, type = 'success') {
const id = Date.now(); const id = Date.now();
this.toasts.push({ id, msg, type }); this.toasts.push({ id, msg, type });
@@ -33,7 +34,8 @@
}, 4000); }, 4000);
} }
}" }"
@notify.window="addToast($event.detail.message, $event.detail.type)"> @notify.window="addToast($event.detail.message, $event.detail.type)"
@ws-status.window="wsConnected = $event.detail.connected">
{{ $slot }} {{ $slot }}

View File

@@ -124,7 +124,8 @@
<div class="absolute top-0 right-0 w-24 h-24 bg-pink-500/5 rounded-full blur-2xl -z-10"></div> <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500/5 rounded-full blur-2xl -z-10"></div>
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div> <div class="w-1.5 h-1.5 rounded-full animate-pulse transition-colors duration-500"
:class="wsConnected ? 'bg-emerald-500' : 'bg-rose-500'"></div>
<span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Active Mailbox</span> <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Active Mailbox</span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">