admin/imail
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: sync active mailbox pulse indicator with WebSocket connection status

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/app.js
View File

@@ -13,4 +13,16 @@ if (document.querySelector('[data-requires-reverb]')) {
forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
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));
}

4
resources/views/components/layouts/app.blade.php
View File

@@ -25,6 +25,7 @@
<body class="bg-app-bg text-[#FAFAFA] antialiased selection:bg-[#EC4899]/30 h-full overflow-hidden"
x-data="{
toasts: [],
wsConnected: true,
addToast(msg, type = 'success') {
const id = Date.now();
this.toasts.push({ id, msg, type });
@@ -33,7 +34,8 @@
}, 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 }}

3
resources/views/livewire/mailbox.blade.php
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="flex items-center justify-between mb-3">
<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>
</div>
<div class="flex items-center gap-2">