@escalated-dev/escalated 0.7.1 → 0.9.0

package/src/components/PeriodSelector.vue

@@ -1,98 +1,98 @@
-<script setup>
-import { ref, computed } from 'vue';
-
-const props = defineProps({
-    modelValue: { type: Number, default: 30 },
-    options: { type: Array, default: () => [7, 30, 90, 365] },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const showCustom = ref(false);
-const customStart = ref('');
-const customEnd = ref('');
-
-const isCustom = computed(() => !props.options.includes(props.modelValue));
-
-function selectPeriod(days) {
-    showCustom.value = false;
-    emit('update:modelValue', days);
-}
-
-function applyCustom() {
-    if (customStart.value && customEnd.value) {
-        const start = new Date(customStart.value);
-        const end = new Date(customEnd.value);
-        const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
-        if (days > 0) {
-            emit('update:modelValue', days);
-            showCustom.value = false;
-        }
-    }
-}
-
-function formatLabel(days) {
-    if (days === 365) return '1y';
-    return `${days}d`;
-}
-</script>
-
-<template>
-    <div class="flex items-center gap-2">
-        <button
-            v-for="d in options"
-            :key="d"
-            :class="[
-                'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
-                modelValue === d
-                    ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white shadow-lg shadow-[var(--esc-panel-bg)]/20'
-                    : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
-            ]"
-            @click="selectPeriod(d)"
-        >
-            {{ formatLabel(d) }}
-        </button>
-        <div class="relative">
-            <button
-                :class="[
-                    'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
-                    isCustom
-                        ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white shadow-lg shadow-[var(--esc-panel-bg)]/20'
-                        : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
-                ]"
-                @click="showCustom = !showCustom"
-            >
-                Custom
-            </button>
-            <div
-                v-if="showCustom"
-                class="absolute right-0 top-full z-10 mt-2 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4 shadow-xl"
-            >
-                <div class="flex flex-col gap-3">
-                    <label class="text-xs font-medium text-[var(--esc-panel-text-muted)]">
-                        Start
-                        <input
-                            v-model="customStart"
-                            type="date"
-                            class="mt-1 block w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm text-[var(--esc-panel-text)]"
-                        />
-                    </label>
-                    <label class="text-xs font-medium text-[var(--esc-panel-text-muted)]">
-                        End
-                        <input
-                            v-model="customEnd"
-                            type="date"
-                            class="mt-1 block w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm text-[var(--esc-panel-text)]"
-                        />
-                    </label>
-                    <button
-                        class="rounded-lg bg-[var(--esc-panel-accent)] px-4 py-1.5 text-sm font-medium text-white transition-all hover:opacity-90"
-                        @click="applyCustom"
-                    >
-                        Apply
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+    modelValue: { type: Number, default: 30 },
+    options: { type: Array, default: () => [7, 30, 90, 365] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const showCustom = ref(false);
+const customStart = ref('');
+const customEnd = ref('');
+
+const isCustom = computed(() => !props.options.includes(props.modelValue));
+
+function selectPeriod(days) {
+    showCustom.value = false;
+    emit('update:modelValue', days);
+}
+
+function applyCustom() {
+    if (customStart.value && customEnd.value) {
+        const start = new Date(customStart.value);
+        const end = new Date(customEnd.value);
+        const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+        if (days > 0) {
+            emit('update:modelValue', days);
+            showCustom.value = false;
+        }
+    }
+}
+
+function formatLabel(days) {
+    if (days === 365) return '1y';
+    return `${days}d`;
+}
+</script>
+
+<template>
+    <div class="flex items-center gap-2">
+        <button
+            v-for="d in options"
+            :key="d"
+            :class="[
+                'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
+                modelValue === d
+                    ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white shadow-lg shadow-[var(--esc-panel-bg)]/20'
+                    : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
+            ]"
+            @click="selectPeriod(d)"
+        >
+            {{ formatLabel(d) }}
+        </button>
+        <div class="relative">
+            <button
+                :class="[
+                    'rounded-lg px-3.5 py-1.5 text-sm font-medium transition-all',
+                    isCustom
+                        ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] text-white shadow-lg shadow-[var(--esc-panel-bg)]/20'
+                        : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]',
+                ]"
+                @click="showCustom = !showCustom"
+            >
+                Custom
+            </button>
+            <div
+                v-if="showCustom"
+                class="absolute right-0 top-full z-10 mt-2 rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4 shadow-xl"
+            >
+                <div class="flex flex-col gap-3">
+                    <label class="text-xs font-medium text-[var(--esc-panel-text-muted)]">
+                        Start
+                        <input
+                            v-model="customStart"
+                            type="date"
+                            class="mt-1 block w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm text-[var(--esc-panel-text)]"
+                        />
+                    </label>
+                    <label class="text-xs font-medium text-[var(--esc-panel-text-muted)]">
+                        End
+                        <input
+                            v-model="customEnd"
+                            type="date"
+                            class="mt-1 block w-full rounded-lg border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] px-3 py-1.5 text-sm text-[var(--esc-panel-text)]"
+                        />
+                    </label>
+                    <button
+                        class="rounded-lg bg-[var(--esc-panel-accent)] px-4 py-1.5 text-sm font-medium text-white transition-all hover:opacity-90"
+                        @click="applyCustom"
+                    >
+                        Apply
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/PresenceIndicator.vue

@@ -1,213 +1,228 @@
-<script setup>
-import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
-
-const props = defineProps({
-    ticketReference: { type: String, required: true },
-    ticketId: { type: [Number, String], default: null },
-    routePrefix: { type: String, required: true },
-    pollInterval: { type: Number, default: 30000 },
-    showLabel: { type: Boolean, default: false },
-});
-
-const effectiveInterval = computed(() => Math.max(props.pollInterval, 5000));
-const echoAvailable = typeof window !== 'undefined' && !!window.Echo;
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-const viewers = ref([]);
-const hovering = ref(false);
-let intervalId = null;
-let presenceChannel = null;
-
-async function fetchPresence() {
-    try {
-        const response = await fetch(route(`${props.routePrefix}.tickets.presence`, props.ticketReference), {
-            method: 'POST',
-            headers: {
-                Accept: 'application/json',
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest',
-                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
-            },
-        });
-        if (response.ok) {
-            const data = await response.json();
-            viewers.value = data.viewers || data || [];
-        }
-    } catch {
-        // silently ignore network errors
-    }
-}
-
-/**
- * Use Echo presence channel for real-time viewer tracking when available.
- * Falls back to polling when Echo is not configured.
- */
-function initPresenceChannel() {
-    if (!echoAvailable || !props.ticketId) return false;
-
-    try {
-        presenceChannel = window.Echo.join(`escalated.tickets.${props.ticketId}`);
-
-        presenceChannel
-            .here((users) => {
-                viewers.value = users;
-            })
-            .joining((user) => {
-                if (!viewers.value.find((v) => v.id === user.id)) {
-                    viewers.value = [...viewers.value, user];
-                }
-            })
-            .leaving((user) => {
-                viewers.value = viewers.value.filter((v) => v.id !== user.id);
-            });
-
-        return true;
-    } catch {
-        return false;
-    }
-}
-
-const tooltipText = computed(() => {
-    if (!viewers.value.length) return '';
-    const names = viewers.value.map((v) => v.name);
-    return 'Also viewing: ' + names.join(', ');
-});
-
-const maxVisible = 4;
-const visibleViewers = computed(() => viewers.value.slice(0, maxVisible));
-const overflowCount = computed(() => Math.max(0, viewers.value.length - maxVisible));
-
-function getInitial(viewer) {
-    return (viewer.name || '?').charAt(0).toUpperCase();
-}
-
-const colors = [
-    'bg-cyan-500',
-    'bg-violet-500',
-    'bg-amber-500',
-    'bg-emerald-500',
-    'bg-rose-500',
-    'bg-blue-500',
-    'bg-pink-500',
-    'bg-teal-500',
-];
-
-function getColor(index) {
-    return colors[index % colors.length];
-}
-
-onMounted(() => {
-    // Prefer presence channels via Echo; fall back to polling
-    const usingEcho = initPresenceChannel();
-    if (!usingEcho) {
-        fetchPresence();
-        intervalId = setInterval(fetchPresence, effectiveInterval.value);
-    }
-});
-
-onUnmounted(() => {
-    if (intervalId) {
-        clearInterval(intervalId);
-        intervalId = null;
-    }
-    if (presenceChannel && props.ticketId) {
-        try {
-            window.Echo.leave(`escalated.tickets.${props.ticketId}`);
-        } catch {
-            // ignore
-        }
-        presenceChannel = null;
-    }
-});
-</script>
-
-<template>
-    <div
-        v-if="viewers.length > 0"
-        class="relative flex items-center"
-        @mouseenter="hovering = true"
-        @mouseleave="hovering = false"
-    >
-        <!-- Avatar stack -->
-        <TransitionGroup
-            tag="div"
-            class="flex -space-x-2"
-            enter-active-class="transition-all duration-300 ease-out"
-            enter-from-class="opacity-0 scale-75 -ml-7"
-            enter-to-class="opacity-100 scale-100 ml-0"
-            leave-active-class="transition-all duration-200 ease-in"
-            leave-from-class="opacity-100 scale-100"
-            leave-to-class="opacity-0 scale-75 -ml-7"
-        >
-            <div
-                v-for="(viewer, index) in visibleViewers"
-                :key="viewer.id || viewer.name"
-                :aria-label="viewer.name"
-                :class="[
-                    'relative flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold text-white ring-2',
-                    getColor(index),
-                    escDark ? 'ring-neutral-900' : 'ring-white',
-                ]"
-            >
-                {{ getInitial(viewer) }}
-                <!-- Pulsing live indicator on first avatar -->
-                <span v-if="index === 0" class="absolute -right-0.5 -top-0.5 flex h-2.5 w-2.5">
-                    <span
-                        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"
-                    ></span>
-                    <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
-                </span>
-            </div>
-            <div
-                v-if="overflowCount > 0"
-                :key="'overflow'"
-                :class="[
-                    'flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold ring-2',
-                    escDark
-                        ? 'bg-white/[0.08] text-neutral-300 ring-neutral-900'
-                        : 'bg-gray-200 text-gray-600 ring-white',
-                ]"
-            >
-                +{{ overflowCount }}
-            </div>
-        </TransitionGroup>
-
-        <!-- Viewer count label -->
-        <span
-            v-if="showLabel"
-            aria-live="polite"
-            :class="['ml-2 text-xs font-medium', escDark ? 'text-neutral-400' : 'text-gray-500']"
-        >
-            {{ viewers.length }} viewing
-        </span>
-
-        <!-- Tooltip -->
-        <Transition
-            enter-active-class="transition duration-100 ease-out"
-            enter-from-class="opacity-0 translate-y-1"
-            enter-to-class="opacity-100 translate-y-0"
-            leave-active-class="transition duration-75 ease-in"
-            leave-from-class="opacity-100 translate-y-0"
-            leave-to-class="opacity-0 translate-y-1"
-        >
-            <div
-                v-if="hovering"
-                :class="[
-                    'absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium shadow-lg',
-                    escDark ? 'border border-white/[0.06] bg-neutral-800 text-neutral-200' : 'bg-gray-900 text-white',
-                ]"
-            >
-                {{ tooltipText }}
-                <div
-                    :class="[
-                        'absolute -top-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45',
-                        escDark ? 'bg-neutral-800' : 'bg-gray-900',
-                    ]"
-                ></div>
-            </div>
-        </Transition>
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject, onUnmounted, watch } from 'vue';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+    ticketId: { type: [Number, String], default: null },
+    routePrefix: { type: String, required: true },
+    pollInterval: { type: Number, default: 30000 },
+    showLabel: { type: Boolean, default: false },
+});
+
+const effectiveInterval = computed(() => Math.max(props.pollInterval, 5000));
+const echoAvailable = typeof window !== 'undefined' && !!window.Echo;
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const viewers = ref([]);
+const hovering = ref(false);
+let intervalId = null;
+let presenceChannel = null;
+// Track the exact channel name we joined so we leave the RIGHT channel when the
+// ticket changes — props.ticketId would already hold the new id by then.
+let joinedChannelName = null;
+
+async function fetchPresence() {
+    try {
+        const response = await fetch(route(`${props.routePrefix}.tickets.presence`, props.ticketReference), {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+        if (response.ok) {
+            const data = await response.json();
+            viewers.value = data.viewers || data || [];
+        }
+    } catch {
+        // silently ignore network errors
+    }
+}
+
+/**
+ * Use Echo presence channel for real-time viewer tracking when available.
+ * Falls back to polling when Echo is not configured.
+ */
+function initPresenceChannel() {
+    if (!echoAvailable || !props.ticketId) return false;
+
+    try {
+        joinedChannelName = `escalated.tickets.${props.ticketId}`;
+        presenceChannel = window.Echo.join(joinedChannelName);
+
+        presenceChannel
+            .here((users) => {
+                viewers.value = users;
+            })
+            .joining((user) => {
+                if (!viewers.value.find((v) => v.id === user.id)) {
+                    viewers.value = [...viewers.value, user];
+                }
+            })
+            .leaving((user) => {
+                viewers.value = viewers.value.filter((v) => v.id !== user.id);
+            });
+
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+const tooltipText = computed(() => {
+    if (!viewers.value.length) return '';
+    const names = viewers.value.map((v) => v.name);
+    return 'Also viewing: ' + names.join(', ');
+});
+
+const maxVisible = 4;
+const visibleViewers = computed(() => viewers.value.slice(0, maxVisible));
+const overflowCount = computed(() => Math.max(0, viewers.value.length - maxVisible));
+
+function getInitial(viewer) {
+    return (viewer.name || '?').charAt(0).toUpperCase();
+}
+
+const colors = [
+    'bg-cyan-500',
+    'bg-violet-500',
+    'bg-amber-500',
+    'bg-emerald-500',
+    'bg-rose-500',
+    'bg-blue-500',
+    'bg-pink-500',
+    'bg-teal-500',
+];
+
+function getColor(index) {
+    return colors[index % colors.length];
+}
+
+function teardown() {
+    if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+    }
+    if (presenceChannel) {
+        try {
+            window.Echo.leave(joinedChannelName);
+        } catch {
+            // ignore
+        }
+        presenceChannel = null;
+        joinedChannelName = null;
+    }
+}
+
+function start() {
+    // Tear down any subscription for the previously viewed ticket first. Inertia
+    // reuses this component across ticket navigation, so without re-initialising
+    // we would keep showing the old ticket's viewers and leak its channel.
+    teardown();
+    viewers.value = [];
+    // Prefer presence channels via Echo; fall back to polling
+    const usingEcho = initPresenceChannel();
+    if (!usingEcho) {
+        fetchPresence();
+        intervalId = setInterval(fetchPresence, effectiveInterval.value);
+    }
+}
+
+// (Re)initialise whenever the ticket identity changes; `immediate` covers mount.
+watch(() => [props.ticketId, props.ticketReference], start, { immediate: true });
+
+onUnmounted(teardown);
+</script>
+
+<template>
+    <div
+        v-if="viewers.length > 0"
+        class="relative flex items-center"
+        @mouseenter="hovering = true"
+        @mouseleave="hovering = false"
+    >
+        <!-- Avatar stack -->
+        <TransitionGroup
+            tag="div"
+            class="flex -space-x-2"
+            enter-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 scale-75 -ml-7"
+            enter-to-class="opacity-100 scale-100 ml-0"
+            leave-active-class="transition-all duration-200 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-75 -ml-7"
+        >
+            <div
+                v-for="(viewer, index) in visibleViewers"
+                :key="viewer.id || viewer.name"
+                :aria-label="viewer.name"
+                :class="[
+                    'relative flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold text-white ring-2',
+                    getColor(index),
+                    escDark ? 'ring-neutral-900' : 'ring-white',
+                ]"
+            >
+                {{ getInitial(viewer) }}
+                <!-- Pulsing live indicator on first avatar -->
+                <span v-if="index === 0" class="absolute -right-0.5 -top-0.5 flex h-2.5 w-2.5">
+                    <span
+                        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75"
+                    ></span>
+                    <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
+                </span>
+            </div>
+            <div
+                v-if="overflowCount > 0"
+                :key="'overflow'"
+                :class="[
+                    'flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold ring-2',
+                    escDark
+                        ? 'bg-white/[0.08] text-neutral-300 ring-neutral-900'
+                        : 'bg-gray-200 text-gray-600 ring-white',
+                ]"
+            >
+                +{{ overflowCount }}
+            </div>
+        </TransitionGroup>
+
+        <!-- Viewer count label -->
+        <span
+            v-if="showLabel"
+            aria-live="polite"
+            :class="['ml-2 text-xs font-medium', escDark ? 'text-neutral-400' : 'text-gray-500']"
+        >
+            {{ viewers.length }} viewing
+        </span>
+
+        <!-- Tooltip -->
+        <Transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="opacity-0 translate-y-1"
+            enter-to-class="opacity-100 translate-y-0"
+            leave-active-class="transition duration-75 ease-in"
+            leave-from-class="opacity-100 translate-y-0"
+            leave-to-class="opacity-0 translate-y-1"
+        >
+            <div
+                v-if="hovering"
+                :class="[
+                    'absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium shadow-lg',
+                    escDark ? 'border border-white/[0.06] bg-neutral-800 text-neutral-200' : 'bg-gray-900 text-white',
+                ]"
+            >
+                {{ tooltipText }}
+                <div
+                    :class="[
+                        'absolute -top-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45',
+                        escDark ? 'bg-neutral-800' : 'bg-gray-900',
+                    ]"
+                ></div>
+            </div>
+        </Transition>
+    </div>
+</template>