@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/PluginSlot.vue

@@ -1,62 +1,68 @@
-<script setup>
-import { defineAsyncComponent, h } from 'vue';
-
-const props = defineProps({
-    slot: {
-        type: String,
-        required: true,
-    },
-    components: {
-        type: Array,
-        default: () => [],
-    },
-});
-
-// Error fallback component rendered when a plugin component fails to load
-const ErrorFallback = {
-    props: ['error', 'plugin', 'component'],
-    render() {
-        return h('div', {
-            class: 'rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-xs text-rose-400',
-        }, `Plugin "${this.plugin}" failed to load component "${this.component}"`);
-    },
-};
-
-// Loading placeholder component
-const LoadingFallback = {
-    render() {
-        return h('div', {
-            class: 'animate-pulse rounded-lg bg-white/[0.03] px-3 py-2',
-        }, [
-            h('div', { class: 'h-4 w-24 rounded bg-white/[0.06]' }),
-        ]);
-    },
-};
-
-// Load plugin components dynamically from host app's plugins directory
-const loadPluginComponent = (plugin, component) => {
-    return defineAsyncComponent({
-        loader: () => import(`../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`),
-        loadingComponent: LoadingFallback,
-        errorComponent: {
-            props: ['error'],
-            render() {
-                return h(ErrorFallback, { error: this.error, plugin, component });
-            },
-        },
-        delay: 100,
-        timeout: 10000,
-    });
-};
-</script>
-
-<template>
-    <template v-if="components?.length > 0">
-        <component
-            v-for="(pluginComp, index) in components"
-            :key="`${slot}-${pluginComp.plugin}-${pluginComp.component}-${index}`"
-            :is="loadPluginComponent(pluginComp.plugin, pluginComp.component)"
-            v-bind="pluginComp.data || {}"
-        />
-    </template>
-</template>
+<script setup>
+import { defineAsyncComponent, h } from 'vue';
+
+defineProps({
+    slot: {
+        type: String,
+        required: true,
+    },
+    components: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+// Error fallback component rendered when a plugin component fails to load
+const ErrorFallback = {
+    props: ['error', 'plugin', 'component'],
+    render() {
+        return h(
+            'div',
+            {
+                class: 'rounded-lg border border-rose-500/20 bg-rose-500/5 px-3 py-2 text-xs text-rose-400',
+            },
+            `Plugin "${this.plugin}" failed to load component "${this.component}"`,
+        );
+    },
+};
+
+// Loading placeholder component
+const LoadingFallback = {
+    render() {
+        return h(
+            'div',
+            {
+                class: 'animate-pulse rounded-lg bg-white/[0.03] px-3 py-2',
+            },
+            [h('div', { class: 'h-4 w-24 rounded bg-white/[0.06]' })],
+        );
+    },
+};
+
+// Load plugin components dynamically from host app's plugins directory
+const loadPluginComponent = (plugin, component) => {
+    return defineAsyncComponent({
+        loader: () => import(`../../../../plugins/escalated/${plugin}/resources/js/Components/${component}.vue`),
+        loadingComponent: LoadingFallback,
+        errorComponent: {
+            props: ['error'],
+            render() {
+                return h(ErrorFallback, { error: this.error, plugin, component });
+            },
+        },
+        delay: 100,
+        timeout: 10000,
+    });
+};
+</script>
+
+<template>
+    <template v-if="components?.length > 0">
+        <component
+            :is="loadPluginComponent(pluginComp.plugin, pluginComp.component)"
+            v-for="(pluginComp, index) in components"
+            :key="`${slot}-${pluginComp.plugin}-${pluginComp.component}-${index}`"
+            v-bind="pluginComp.data || {}"
+        />
+    </template>
+</template>

package/src/components/PresenceIndicator.vue

@@ -3,20 +3,30 @@ 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 escDark = inject('esc-dark', computed(() => 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',
+                Accept: 'application/json',
                 'Content-Type': 'application/json',
                 'X-Requested-With': 'XMLHttpRequest',
                 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
@@ -31,9 +41,38 @@ async function fetchPresence() {
     }
 }
 
+/**
+ * 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);
+    const names = viewers.value.map((v) => v.name);
     return 'Also viewing: ' + names.join(', ');
 });
 
@@ -46,8 +85,14 @@ function getInitial(viewer) {
 }
 
 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',
+    '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) {
@@ -55,8 +100,12 @@ function getColor(index) {
 }
 
 onMounted(() => {
-    fetchPresence();
-    intervalId = setInterval(fetchPresence, 30000);
+    // Prefer presence channels via Echo; fall back to polling
+    const usingEcho = initPresenceChannel();
+    if (!usingEcho) {
+        fetchPresence();
+        intervalId = setInterval(fetchPresence, effectiveInterval.value);
+    }
 });
 
 onUnmounted(() => {
@@ -64,39 +113,100 @@ onUnmounted(() => {
         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" @mouseenter="hovering = true" @mouseleave="hovering = false">
+    <div
+        v-if="viewers.length > 0"
+        class="relative flex items-center"
+        @mouseenter="hovering = true"
+        @mouseleave="hovering = false"
+    >
         <!-- Avatar stack -->
-        <div class="flex -space-x-2">
-            <div v-for="(viewer, index) in visibleViewers" :key="viewer.id || index"
-                 :class="['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']">
+        <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"
-                 :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']">
+            <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>
-        </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']">
+        <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
+                    :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>

package/src/components/PriorityBadge.stories.js

@@ -0,0 +1,33 @@
+import PriorityBadge from './PriorityBadge.vue';
+
+export default {
+    title: 'Components/PriorityBadge',
+    component: PriorityBadge,
+    argTypes: {
+        priority: {
+            control: 'select',
+            options: ['low', 'medium', 'high', 'urgent', 'critical'],
+        },
+    },
+};
+
+export const Low = { args: { priority: 'low' } };
+export const Medium = { args: { priority: 'medium' } };
+export const High = { args: { priority: 'high' } };
+export const Urgent = { args: { priority: 'urgent' } };
+export const Critical = { args: { priority: 'critical' } };
+
+export const AllPriorities = {
+    render: () => ({
+        components: { PriorityBadge },
+        template: `
+            <div class="flex flex-wrap items-center gap-2">
+                <PriorityBadge priority="low" />
+                <PriorityBadge priority="medium" />
+                <PriorityBadge priority="high" />
+                <PriorityBadge priority="urgent" />
+                <PriorityBadge priority="critical" />
+            </div>
+        `,
+    }),
+};

package/src/components/PriorityBadge.vue

@@ -1,39 +1,46 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    priority: { type: String, required: true },
-});
-
-const escDark = inject('esc-dark', computed(() => false));
-
-const darkConfig = {
-    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
-    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
-    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
-    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
-    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
-};
-
-const lightConfig = {
-    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
-    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
-    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
-    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
-    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
-};
-
-const config = computed(() => {
-    const map = escDark.value ? darkConfig : lightConfig;
-    const fallback = escDark.value
-        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
-        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
-    return map[props.priority] || fallback;
-});
-</script>
-
-<template>
-    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
-        {{ config.label }}
-    </span>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    priority: { type: String, required: true },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const darkConfig = {
+    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
+    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
+    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
+    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
+};
+
+const lightConfig = {
+    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
+    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
+    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
+    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
+    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
+};
+
+const config = computed(() => {
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fallback = escDark.value
+        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
+        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
+    return map[props.priority] || fallback;
+});
+</script>
+
+<template>
+    <span
+        role="status"
+        :aria-label="'Priority: ' + config.label"
+        :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]"
+    >
+        {{ config.label }}
+    </span>
+</template>

package/src/components/QuickFilters.vue

@@ -1,49 +1,65 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const props = defineProps({
-    currentUserId: { type: [Number, String], default: null },
-});
-
-const emit = defineEmits(['filter']);
-const escDark = inject('esc-dark', computed(() => false));
-const activeChip = ref(null);
-
-const chips = computed(() => {
-    const list = [
-        { key: 'my_tickets', label: 'My Tickets', filter: { assigned_to: props.currentUserId } },
-        { key: 'unassigned', label: 'Unassigned', filter: { unassigned: true } },
-        { key: 'urgent', label: 'Urgent+', filter: { priority: 'urgent' } },
-        { key: 'sla_breaching', label: 'SLA Breaching', filter: { sla_breached: true } },
-        { key: 'following', label: 'Following', filter: { following: true } },
-    ];
-    if (props.currentUserId) return list;
-    return list.filter(c => c.key !== 'my_tickets');
-});
-
-function toggle(chip) {
-    if (activeChip.value === chip.key) {
-        activeChip.value = null;
-        emit('filter', {});
-    } else {
-        activeChip.value = chip.key;
-        emit('filter', chip.filter);
-    }
-}
-</script>
-
-<template>
-    <div class="flex flex-wrap items-center gap-2">
-        <button v-for="chip in chips" :key="chip.key" @click="toggle(chip)"
-                :class="['rounded-full px-3 py-1.5 text-xs font-medium transition-all',
-                         activeChip === chip.key
-                             ? (escDark
-                                 ? 'bg-gradient-to-r from-cyan-500/20 to-violet-500/20 text-white ring-1 ring-cyan-500/30'
-                                 : 'bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 ring-1 ring-blue-200')
-                             : (escDark
-                                 ? 'bg-white/[0.04] text-neutral-400 ring-1 ring-white/[0.06] hover:bg-white/[0.06] hover:text-neutral-300'
-                                 : 'bg-gray-50 text-gray-600 ring-1 ring-gray-200 hover:bg-gray-100')]">
-            {{ chip.label }}
-        </button>
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const props = defineProps({
+    currentUserId: { type: [Number, String], default: null },
+});
+
+const emit = defineEmits(['filter']);
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const activeTab = ref(null);
+
+const tabs = computed(() => {
+    const list = [
+        { key: null, label: 'All Tickets', filter: {} },
+        { key: 'assigned_to_me', label: 'Assigned to Me', filter: { assigned_to: props.currentUserId } },
+        { key: 'unassigned', label: 'Unassigned', filter: { unassigned: true } },
+        { key: 'urgent', label: 'Urgent', filter: { priority: 'urgent' } },
+        { key: 'sla_breaching', label: 'SLA Breaching', filter: { sla_breached: true } },
+        { key: 'following', label: 'Following', filter: { following: true } },
+    ];
+    if (props.currentUserId) return list;
+    return list.filter((t) => t.key !== 'assigned_to_me');
+});
+
+function selectTab(tab) {
+    activeTab.value = tab.key;
+    emit('filter', tab.filter);
+}
+</script>
+
+<template>
+    <div
+        :class="['flex items-center gap-0 border-b', escDark ? 'border-white/[0.08]' : 'border-gray-200']"
+        role="tablist"
+        aria-label="Ticket view tabs"
+    >
+        <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            role="tab"
+            :aria-selected="activeTab === tab.key"
+            :class="[
+                'relative px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap',
+                'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0',
+                activeTab === tab.key
+                    ? escDark
+                        ? 'text-cyan-400 focus-visible:ring-cyan-500/40'
+                        : 'text-blue-600 focus-visible:ring-blue-500/40'
+                    : escDark
+                      ? 'text-neutral-500 hover:text-neutral-300 focus-visible:ring-cyan-500/40'
+                      : 'text-gray-500 hover:text-gray-700 focus-visible:ring-blue-500/40',
+            ]"
+            @click="selectTab(tab)"
+        >
+            {{ tab.label }}
+            <span
+                v-if="activeTab === tab.key"
+                :class="['absolute bottom-0 left-0 right-0 h-0.5 rounded-t', escDark ? 'bg-cyan-400' : 'bg-blue-600']"
+            ></span>
+        </button>
+    </div>
+</template>