feat: sync active mailbox pulse indicator with WebSocket connection status
This commit is contained in:
@@ -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));
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 }}
|
||||||
|
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user