@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/components/PresenceIndicator.vue

@@ -4,9 +4,16 @@ import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
 const props = defineProps({
     ticketReference: { type: String, required: true },
     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 escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const viewers = ref([]);
 const hovering = ref(false);
 let intervalId = null;
@@ -16,7 +23,7 @@ async function fetchPresence() {
         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 || '',
@@ -33,7 +40,7 @@ async function fetchPresence() {
 
 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 +53,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) {
@@ -56,7 +69,7 @@ function getColor(index) {
 
 onMounted(() => {
     fetchPresence();
-    intervalId = setInterval(fetchPresence, 30000);
+    intervalId = setInterval(fetchPresence, effectiveInterval.value);
 });
 
 onUnmounted(() => {
@@ -68,35 +81,88 @@ onUnmounted(() => {
 </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

@@ -5,7 +5,10 @@ const props = defineProps({
     priority: { type: String, required: true },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+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' },
@@ -33,7 +36,11 @@ const config = computed(() => {
 </script>
 
 <template>
-    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
+    <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>

package/src/components/ReplyComposer.vue

@@ -9,16 +9,59 @@ const props = defineProps({
     allowNotes: { type: Boolean, default: false },
     placeholder: { type: String, default: 'Type your reply...' },
     submitLabel: { type: String, default: null },
+    typingEndpoint: { type: String, default: '' },
 });
 
 const emit = defineEmits(['submit']);
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 
 const body = ref('');
 const isNote = ref(false);
 const files = ref([]);
 const submitting = ref(false);
 
+// Typing indicator: debounced POST every 5 seconds while typing
+let lastTypingSent = 0;
+let typingTimer = null;
+
+function onTyping() {
+    if (!props.typingEndpoint) return;
+    const now = Date.now();
+    if (now - lastTypingSent < 5000) return;
+    lastTypingSent = now;
+    sendTypingIndicator();
+
+    // Clear typing after 6 seconds of inactivity
+    window.clearTimeout(typingTimer);
+    typingTimer = window.setTimeout(() => {
+        lastTypingSent = 0;
+    }, 6000);
+}
+
+async function sendTypingIndicator() {
+    try {
+        await fetch(props.typingEndpoint, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+    } catch {
+        // silently ignore
+    }
+}
+
+function onBlur() {
+    window.clearTimeout(typingTimer);
+    lastTypingSent = 0;
+}
+
 function insertCanned(response) {
     body.value += response.body;
 }
@@ -34,6 +77,8 @@ function removeFile(index) {
 function submit() {
     if (!body.value.trim() || submitting.value) return;
     submitting.value = true;
+    window.clearTimeout(typingTimer);
+    lastTypingSent = 0;
 
     const payload = {
         body: body.value,
@@ -66,45 +111,84 @@ const buttonLabel = computed(() => {
     <!-- Dark mode -->
     <div v-if="escDark" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
         <div v-if="allowNotes" class="mb-3 flex gap-2">
-            <button @click="isNote = false"
-                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', !isNote ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+            <button
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                    !isNote
+                        ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20'
+                        : 'text-gray-400 hover:bg-white/[0.04]',
+                ]"
+                @click="isNote = false"
+            >
                 Reply
             </button>
-            <button @click="isNote = true"
-                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', isNote ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+            <button
+                :class="[
+                    'rounded-lg px-3 py-1.5 text-sm font-medium transition-colors',
+                    isNote
+                        ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20'
+                        : 'text-gray-400 hover:bg-white/[0.04]',
+                ]"
+                aria-label="Internal note"
+                @click="isNote = true"
+            >
                 Internal Note
             </button>
         </div>
 
-        <div v-if="isNote" class="mb-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-xs text-amber-400 ring-1 ring-amber-500/20">
+        <div
+            v-if="isNote"
+            class="mb-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-xs text-amber-400 ring-1 ring-amber-500/20"
+        >
             This note is only visible to agents.
         </div>
 
-        <textarea v-model="body" rows="4" :placeholder="placeholder"
-                  class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"></textarea>
+        <textarea
+            v-model="body"
+            rows="4"
+            :placeholder="placeholder"
+            aria-label="Reply message"
+            class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+            @keydown="onTyping"
+            @blur="onBlur"
+        ></textarea>
 
-        <FileDropzone @files="handleFiles" class="mt-2" />
+        <FileDropzone class="mt-2" @files="handleFiles" />
 
         <div v-if="files.length" class="mt-2 space-y-1">
             <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-400">
                 <span>{{ file.name }}</span>
-                <button @click="removeFile(i)" class="text-rose-400 hover:text-rose-300">&times;</button>
+                <button aria-label="Remove attachment" class="text-rose-400 hover:text-rose-300" @click="removeFile(i)">
+                    &times;
+                </button>
             </div>
         </div>
 
         <div class="mt-3 flex items-center justify-between">
             <div v-if="cannedResponses.length">
-                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-gray-900 px-2 py-1 text-xs text-gray-400">
+                <select
+                    class="rounded-lg border border-white/10 bg-gray-900 px-2 py-1 text-xs text-gray-400"
+                    @change="
+                        insertCanned(cannedResponses[$event.target.value]);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Canned responses...</option>
                     <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
                 </select>
             </div>
             <div v-else></div>
-            <button @click="submit" :disabled="!body.trim() || submitting"
-                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
-                             isNote ? 'bg-amber-500 hover:bg-amber-400' : 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400',
-                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-40']">
+            <button
+                :disabled="!body.trim() || submitting"
+                :class="[
+                    'rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
+                    isNote
+                        ? 'bg-amber-500 hover:bg-amber-400'
+                        : 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400',
+                    (!body.trim() || submitting) && 'cursor-not-allowed opacity-40',
+                ]"
+                @click="submit"
+            >
                 {{ buttonLabel }}
             </button>
         </div>
@@ -113,12 +197,23 @@ const buttonLabel = computed(() => {
     <!-- Light mode -->
     <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
         <div v-if="allowNotes" class="mb-3 flex gap-2">
-            <button @click="isNote = false"
-                    :class="['rounded-md px-3 py-1 text-sm font-medium', !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100']">
+            <button
+                :class="[
+                    'rounded-md px-3 py-1 text-sm font-medium',
+                    !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100',
+                ]"
+                @click="isNote = false"
+            >
                 Reply
             </button>
-            <button @click="isNote = true"
-                    :class="['rounded-md px-3 py-1 text-sm font-medium', isNote ? 'bg-yellow-100 text-yellow-700' : 'text-gray-500 hover:bg-gray-100']">
+            <button
+                :class="[
+                    'rounded-md px-3 py-1 text-sm font-medium',
+                    isNote ? 'bg-yellow-100 text-yellow-700' : 'text-gray-500 hover:bg-gray-100',
+                ]"
+                aria-label="Internal note"
+                @click="isNote = true"
+            >
                 Internal Note
             </button>
         </div>
@@ -127,31 +222,50 @@ const buttonLabel = computed(() => {
             This note is only visible to agents.
         </div>
 
-        <textarea v-model="body" rows="4" :placeholder="placeholder"
-                  class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
+        <textarea
+            v-model="body"
+            rows="4"
+            :placeholder="placeholder"
+            aria-label="Reply message"
+            class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            @keydown="onTyping"
+            @blur="onBlur"
+        ></textarea>
 
-        <FileDropzone @files="handleFiles" class="mt-2" />
+        <FileDropzone class="mt-2" @files="handleFiles" />
 
         <div v-if="files.length" class="mt-2 space-y-1">
             <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-600">
                 <span>{{ file.name }}</span>
-                <button @click="removeFile(i)" class="text-red-500 hover:text-red-700">&times;</button>
+                <button aria-label="Remove attachment" class="text-red-500 hover:text-red-700" @click="removeFile(i)">
+                    &times;
+                </button>
             </div>
         </div>
 
         <div class="mt-3 flex items-center justify-between">
             <div v-if="cannedResponses.length">
-                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
-                        class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600">
+                <select
+                    class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600"
+                    @change="
+                        insertCanned(cannedResponses[$event.target.value]);
+                        $event.target.value = '';
+                    "
+                >
                     <option value="">Canned responses...</option>
                     <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
                 </select>
             </div>
             <div v-else></div>
-            <button @click="submit" :disabled="!body.trim() || submitting"
-                    :class="['rounded-md px-4 py-2 text-sm font-medium text-white',
-                             isNote ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700',
-                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-50']">
+            <button
+                :disabled="!body.trim() || submitting"
+                :class="[
+                    'rounded-md px-4 py-2 text-sm font-medium text-white',
+                    isNote ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700',
+                    (!body.trim() || submitting) && 'cursor-not-allowed opacity-50',
+                ]"
+                @click="submit"
+            >
                 {{ buttonLabel }}
             </button>
         </div>