@escalated-dev/escalated 0.11.9 → 0.12.0

package/src/composables/useRealtime.js

@@ -1,179 +1,135 @@
-import { ref, onUnmounted, readonly } from 'vue';
+import { ref, onUnmounted, readonly, toValue, watch } from 'vue';
+
+// Multiple components can listen to the same channel. A component leaving must
+// not disconnect the ticket updates or presence owned by another component.
+const leases = new WeakMap();
+function retainChannel(echo, name, presence) {
+    const key = `${presence ? 'presence' : 'private'}-${name}`;
+    let counts = leases.get(echo);
+    if (!counts) leases.set(echo, (counts = new Map()));
+    counts.set(key, (counts.get(key) || 0) + 1);
+    return () => {
+        const count = counts.get(key) - 1;
+        if (count > 0) counts.set(key, count);
+        else {
+            counts.delete(key);
+            if (echo.leaveChannel) echo.leaveChannel(key);
+            else echo.leave(presence ? `presence-${name}` : name);
+        }
+    };
+}
 
-/**
- * Composable for real-time WebSocket event listening via Laravel Echo.
- *
- * If `window.Echo` is available (provided by the host app), this composable
- * subscribes to private channels and listens for broadcast events. When Echo
- * is not present, it silently falls back - the caller can check `echoAvailable`
- * and implement polling as needed.
- *
- * Usage:
- *   const { echoAvailable, subscribeToTicket, subscribeToTickets, subscribeToAgent } = useRealtime();
- *
- * All subscriptions are automatically cleaned up on component unmount.
- */
-export function useRealtime() {
+/** Optional channelPrefix accepts a value, ref or getter. Older backends use escalated. */
+export function useRealtime(options = {}) {
     const echoAvailable = ref(typeof window !== 'undefined' && !!window.Echo);
-    const subscriptions = [];
+    const subscriptions = new Set();
+
+    function track(cleanup) {
+        let active = true;
+        const stop = () => {
+            if (!active) return;
+            active = false;
+            subscriptions.delete(stop);
+            cleanup();
+        };
+        subscriptions.add(stop);
+        return stop;
+    }
 
-    /**
-     * Subscribe to a private channel and listen for an event.
-     * Returns an unsubscribe function.
-     */
+    // Raw channel names remain literal for existing integrations.
     function listen(channelName, eventName, callback) {
         if (!echoAvailable.value) return () => {};
-
-        const channel = window.Echo.private(channelName);
+        const echo = window.Echo;
+        const channel = echo.private(channelName);
+        const release = retainChannel(echo, channelName, false);
         channel.listen(eventName, callback);
-
-        const unsub = () => {
+        return track(() => {
             channel.stopListening(eventName, callback);
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
+            release();
+        });
     }
 
-    /**
-     * Subscribe to a specific ticket's channel for real-time updates.
-     *
-     * @param {number|string} ticketId - The ticket ID
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onReplyCreated] - Called when a new reply is added
-     * @param {Function} [handlers.onTicketUpdated] - Called when ticket fields are updated
-     * @param {Function} [handlers.onStatusChanged] - Called when ticket status changes
-     * @param {Function} [handlers.onTicketAssigned] - Called when ticket is assigned
-     * @param {Function} [handlers.onTicketEscalated] - Called when ticket is escalated
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToTicket(ticketId, handlers = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = `escalated.tickets.${ticketId}`;
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
-
-        if (handlers.onReplyCreated) {
-            channel.listen('.reply.created', handlers.onReplyCreated);
-            listeners.push(['.reply.created', handlers.onReplyCreated]);
-        }
-        if (handlers.onTicketUpdated) {
-            channel.listen('.ticket.updated', handlers.onTicketUpdated);
-            listeners.push(['.ticket.updated', handlers.onTicketUpdated]);
-        }
-        if (handlers.onStatusChanged) {
-            channel.listen('.ticket.status_changed', handlers.onStatusChanged);
-            listeners.push(['.ticket.status_changed', handlers.onStatusChanged]);
-        }
-        if (handlers.onTicketAssigned) {
-            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
-            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
-        }
-        if (handlers.onTicketEscalated) {
-            channel.listen('.ticket.escalated', handlers.onTicketEscalated);
-            listeners.push(['.ticket.escalated', handlers.onTicketEscalated]);
-        }
-
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
+    function scopedSubscription(suffix, handlers, presence = false) {
+        let currentChannel = null;
+        const stopWatch = watch(
+            () => {
+                const tail = toValue(suffix);
+                return tail == null ? null : `${toValue(options.channelPrefix) ?? 'escalated'}.${tail}`;
+            },
+            (name, previous, onCleanup) => {
+                if (!name || !echoAvailable.value) return;
+                const echo = window.Echo;
+                const channel = presence ? echo.join(name) : echo.private(name);
+                currentChannel = channel;
+                const release = retainChannel(echo, name, presence);
+                let active = true;
+                const listeners = Object.entries(handlers)
+                    .filter(([, callback]) => typeof callback === 'function')
+                    .map(([event, callback]) => {
+                        // Ignore an old socket callback already queued during account navigation.
+                        const guarded = (...args) => {
+                            if (active) callback(...args);
+                        };
+                        if (presence) channel[event](guarded);
+                        else channel.listen(event, guarded);
+                        return [event, guarded];
+                    });
+                onCleanup(() => {
+                    active = false;
+                    currentChannel = null;
+                    if (!presence) listeners.forEach(([event, callback]) => channel.stopListening(event, callback));
+                    release();
+                });
+            },
+            { immediate: true, flush: 'sync' },
+        );
+        return {
+            get channel() {
+                return currentChannel;
+            },
+            unsubscribe: track(stopWatch),
         };
-        subscriptions.push(unsub);
-        return unsub;
     }
 
-    /**
-     * Subscribe to the global tickets channel for new ticket notifications.
-     *
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onTicketCreated] - Called when a new ticket is created
-     * @returns {Function} Unsubscribe function
-     */
-    function subscribeToTickets(handlers = {}) {
-        if (!echoAvailable.value) return () => {};
+    function listenScoped(suffix, handlers) {
+        return scopedSubscription(suffix, handlers).unsubscribe;
+    }
 
-        const channelName = 'escalated.tickets';
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
+    function identitySuffix(kind, id) {
+        return () => (toValue(id) == null ? null : `${kind}.${toValue(id)}`);
+    }
 
-        if (handlers.onTicketCreated) {
-            channel.listen('.ticket.created', handlers.onTicketCreated);
-            listeners.push(['.ticket.created', handlers.onTicketCreated]);
-        }
+    function subscribeToTicket(ticketId, handlers = {}) {
+        return listenScoped(identitySuffix('tickets', ticketId), {
+            '.reply.created': handlers.onReplyCreated,
+            '.ticket.updated': handlers.onTicketUpdated,
+            '.ticket.status_changed': handlers.onStatusChanged,
+            '.ticket.assigned': handlers.onTicketAssigned,
+            '.ticket.escalated': handlers.onTicketEscalated,
+        });
+    }
 
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
+    function subscribeToTickets(handlers = {}) {
+        return listenScoped('tickets', { '.ticket.created': handlers.onTicketCreated });
     }
 
-    /**
-     * Subscribe to an agent's personal channel for assignment notifications.
-     *
-     * @param {number|string} agentId - The agent's user ID
-     * @param {Object} handlers - Event handler callbacks
-     * @param {Function} [handlers.onTicketAssigned] - Called when a ticket is assigned to this agent
-     * @returns {Function} Unsubscribe function
-     */
     function subscribeToAgent(agentId, handlers = {}) {
-        if (!echoAvailable.value) return () => {};
-
-        const channelName = `escalated.agents.${agentId}`;
-        const channel = window.Echo.private(channelName);
-        const listeners = [];
-
-        if (handlers.onTicketAssigned) {
-            channel.listen('.ticket.assigned', handlers.onTicketAssigned);
-            listeners.push(['.ticket.assigned', handlers.onTicketAssigned]);
-        }
-
-        const unsub = () => {
-            listeners.forEach(([event, cb]) => channel.stopListening(event, cb));
-            window.Echo.leave(channelName);
-        };
-        subscriptions.push(unsub);
-        return unsub;
+        return listenScoped(identitySuffix('agents', agentId), { '.ticket.assigned': handlers.onTicketAssigned });
     }
 
-    /**
-     * Get a presence channel for a ticket (if Echo supports it).
-     * Returns the channel instance or null.
-     */
     function joinTicketPresence(ticketId, callbacks = {}) {
         if (!echoAvailable.value) return null;
-
-        const channelName = `escalated.tickets.${ticketId}`;
-        const channel = window.Echo.join(channelName);
-
-        if (callbacks.here) channel.here(callbacks.here);
-        if (callbacks.joining) channel.joining(callbacks.joining);
-        if (callbacks.leaving) channel.leaving(callbacks.leaving);
-
-        const unsub = () => {
-            window.Echo.leave(`presence-${channelName}`);
-        };
-        subscriptions.push(unsub);
-        return { channel, unsubscribe: unsub };
+        return scopedSubscription(identitySuffix('tickets', ticketId), callbacks, true);
     }
 
-    // Cleanup all subscriptions on component unmount
     onUnmounted(() => {
-        subscriptions.forEach((unsub) => {
-            try {
-                unsub();
-            } catch {
-                /* ignore */
-            }
-        });
-        subscriptions.length = 0;
+        [...subscriptions].forEach((unsubscribe) => unsubscribe());
     });
 
     return {
         echoAvailable: readonly(echoAvailable),
         listen,
+        listenScoped,
         subscribeToTicket,
         subscribeToTickets,
         subscribeToAgent,

package/src/pages/Admin/Settings/DatabaseConnection.vue

@@ -88,7 +88,7 @@ function formatCount(value) {
                     table is not affected — it stays wherever your application keeps it.
                 </p>
 
-                <dl v-if="active" class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+                <dl v-if="active" class="grid grid-cols-[auto_minmax(0,1fr)] gap-x-6 gap-y-3 text-sm">
                     <dt class="text-[var(--esc-panel-text-muted)]">Connection</dt>
                     <dd class="font-medium text-[var(--esc-panel-text)]">
                         {{ active.name }}
@@ -160,7 +160,7 @@ function formatCount(value) {
                                         {{ statusLabel(connection) }}
                                     </span>
                                 </span>
-                                <span class="mt-0.5 block text-xs text-[var(--esc-panel-text-muted)]">
+                                <span class="mt-0.5 block break-all text-xs text-[var(--esc-panel-text-muted)]">
                                     {{ connection.driver ?? 'unknown driver' }} ·
                                     {{ connection.database ?? 'no database configured' }}
                                     <template v-if="connection.ticket_count !== null">
@@ -217,7 +217,7 @@ function formatCount(value) {
                     <button
                         type="submit"
                         :disabled="form.processing || !isChanging"
-                        class="rounded-lg bg-[var(--esc-accent)] px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
+                        class="rounded-lg bg-[var(--esc-panel-accent)] px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
                     >
                         {{ form.processing ? 'Saving…' : 'Use this connection' }}
                     </button>