@escalated-dev/escalated 0.2.1 → 0.4.0

package/src/components/KeyboardShortcutHelp.vue

@@ -0,0 +1,123 @@
+<script setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    context: { type: String, default: 'list' },
+});
+
+const emit = defineEmits(['update:show']);
+const escDark = inject('esc-dark', computed(() => false));
+
+const shortcutGroups = [
+    {
+        title: 'List View',
+        contexts: ['list'],
+        shortcuts: [
+            { keys: ['j'], description: 'Move down' },
+            { keys: ['k'], description: 'Move up' },
+            { keys: ['x'], description: 'Toggle select' },
+            { keys: ['Enter'], description: 'Open ticket' },
+        ],
+    },
+    {
+        title: 'Detail View',
+        contexts: ['detail'],
+        shortcuts: [
+            { keys: ['r'], description: 'Reply' },
+            { keys: ['n'], description: 'Internal note' },
+            { keys: ['s'], description: 'Change status' },
+            { keys: ['p'], description: 'Change priority' },
+            { keys: ['f'], description: 'Follow/unfollow' },
+        ],
+    },
+    {
+        title: 'Global',
+        contexts: ['list', 'detail'],
+        shortcuts: [
+            { keys: ['?'], description: 'Show this help' },
+        ],
+    },
+];
+
+const filteredGroups = computed(() =>
+    shortcutGroups.filter(g => g.contexts.includes(props.context))
+);
+
+function closeModal() {
+    emit('update:show', false);
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
+                    leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
+            <div v-if="show" class="fixed inset-0 z-[100] flex items-center justify-center" @keydown.escape="closeModal">
+                <!-- Backdrop -->
+                <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeModal"></div>
+
+                <!-- Modal -->
+                <div :class="['relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border shadow-2xl',
+                              escDark ? 'border-white/[0.06] bg-neutral-900' : 'border-gray-200 bg-white']">
+                    <!-- Header -->
+                    <div :class="['flex items-center justify-between border-b px-6 py-4',
+                                  escDark ? 'border-white/[0.06]' : 'border-gray-200']">
+                        <div class="flex items-center gap-3">
+                            <svg :class="['h-5 w-5', escDark ? 'text-neutral-400' : 'text-gray-500']"
+                                 fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
+                            </svg>
+                            <h2 :class="['text-base font-semibold', escDark ? 'text-white' : 'text-gray-900']">
+                                Keyboard Shortcuts
+                            </h2>
+                        </div>
+                        <button @click="closeModal"
+                                :class="['rounded-lg p-1.5 transition-colors',
+                                         escDark ? 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600']">
+                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <!-- Body -->
+                    <div class="max-h-[60vh] overflow-y-auto px-6 py-4">
+                        <div v-for="(group, gi) in filteredGroups" :key="gi"
+                             :class="['pb-4', gi < filteredGroups.length - 1 && 'mb-4 border-b',
+                                      escDark ? 'border-white/[0.06]' : 'border-gray-100']">
+                            <h3 :class="['mb-3 text-xs font-semibold uppercase tracking-wider',
+                                         escDark ? 'text-neutral-500' : 'text-gray-500']">
+                                {{ group.title }}
+                            </h3>
+                            <div class="space-y-2">
+                                <div v-for="(shortcut, si) in group.shortcuts" :key="si"
+                                     class="flex items-center justify-between">
+                                    <span :class="['text-sm', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                                        {{ shortcut.description }}
+                                    </span>
+                                    <div class="flex items-center gap-1">
+                                        <kbd v-for="(key, ki) in shortcut.keys" :key="ki"
+                                             :class="['inline-flex min-w-[24px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold',
+                                                      escDark
+                                                          ? 'border-white/10 bg-white/[0.06] text-neutral-300'
+                                                          : 'border-gray-300 bg-gray-100 text-gray-700']">
+                                            {{ key }}
+                                        </kbd>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Footer -->
+                    <div :class="['border-t px-6 py-3 text-center text-xs',
+                                  escDark ? 'border-white/[0.06] text-neutral-600' : 'border-gray-100 text-gray-400']">
+                        Press <kbd :class="['mx-1 inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold',
+                                           escDark ? 'border-white/10 bg-white/[0.06] text-neutral-400' : 'border-gray-300 bg-gray-100 text-gray-600']">Esc</kbd> to close
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>

package/src/components/MacroDropdown.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    macros: { type: Array, default: () => [] },
+    action: { type: String, required: true },
+});
+
+const escDark = inject('esc-dark', computed(() => false));
+const open = ref(false);
+const processing = ref(false);
+
+function applyMacro(macroId) {
+    if (processing.value) return;
+    processing.value = true;
+    router.post(props.action, { macro_id: macroId }, {
+        preserveScroll: true,
+        onFinish: () => {
+            processing.value = false;
+            open.value = false;
+        },
+    });
+}
+
+function toggle() {
+    open.value = !open.value;
+}
+
+function close() {
+    open.value = false;
+}
+</script>
+
+<template>
+    <div class="relative">
+        <!-- Trigger button -->
+        <button @click="toggle"
+                :class="['inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                         escDark
+                             ? 'border border-white/10 bg-white/[0.03] text-neutral-300 hover:bg-white/[0.06]'
+                             : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50']"
+                :disabled="processing">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
+            </svg>
+            Apply Macro
+            <svg :class="['h-4 w-4 transition-transform', open && 'rotate-180']" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+
+        <!-- Backdrop -->
+        <div v-if="open" class="fixed inset-0 z-30" @click="close"></div>
+
+        <!-- Dropdown -->
+        <Transition enter-active-class="transition duration-100 ease-out" enter-from-class="scale-95 opacity-0" enter-to-class="scale-100 opacity-100"
+                    leave-active-class="transition duration-75 ease-in" leave-from-class="scale-100 opacity-100" leave-to-class="scale-95 opacity-0">
+            <div v-if="open"
+                 :class="['absolute right-0 z-40 mt-1 w-64 overflow-hidden rounded-xl border shadow-xl',
+                          escDark ? 'border-white/[0.06] bg-neutral-900' : 'border-gray-200 bg-white']">
+                <div :class="['px-3 py-2 text-xs font-semibold uppercase tracking-wider',
+                              escDark ? 'text-neutral-500' : 'text-gray-500']">
+                    Macros
+                </div>
+                <div class="max-h-64 overflow-y-auto">
+                    <div v-if="!macros.length"
+                         :class="['px-3 py-4 text-center text-sm', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                        No macros available
+                    </div>
+                    <button v-for="macro in macros" :key="macro.id"
+                            @click="applyMacro(macro.id)"
+                            :disabled="processing"
+                            :class="['flex w-full flex-col px-3 py-2.5 text-left transition-colors',
+                                     escDark
+                                         ? 'hover:bg-white/[0.04] disabled:opacity-50'
+                                         : 'hover:bg-gray-50 disabled:opacity-50']">
+                        <span :class="['text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                            {{ macro.name }}
+                        </span>
+                        <span v-if="macro.description"
+                              :class="['mt-0.5 text-xs', escDark ? 'text-neutral-500' : 'text-gray-500']">
+                            {{ macro.description }}
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>

package/src/components/PinnedNotes.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    notes: { type: Array, default: () => [] },
+    ticketReference: { type: String, required: true },
+    routePrefix: { type: String, required: true },
+});
+
+const escDark = inject('esc-dark', computed(() => false));
+const processingId = ref(null);
+
+function unpinNote(note) {
+    if (processingId.value) return;
+    processingId.value = note.id;
+    router.post(route(`${props.routePrefix}.tickets.pin`, [props.ticketReference, note.id]), {}, {
+        preserveScroll: true,
+        onFinish: () => {
+            processingId.value = null;
+        },
+    });
+}
+
+function formatDate(dateStr) {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    return date.toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+</script>
+
+<template>
+    <div v-if="notes.length > 0"
+         :class="['rounded-xl border p-4',
+                  escDark
+                      ? 'border-amber-500/20 bg-amber-500/[0.06]'
+                      : 'border-amber-300 bg-amber-50']">
+        <!-- Header -->
+        <div class="mb-3 flex items-center gap-2">
+            <svg :class="['h-4 w-4', escDark ? 'text-amber-400' : 'text-amber-600']"
+                 fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" />
+            </svg>
+            <span :class="['text-xs font-semibold uppercase tracking-wider',
+                           escDark ? 'text-amber-400' : 'text-amber-700']">
+                Pinned Notes
+            </span>
+        </div>
+
+        <!-- Notes list -->
+        <div class="space-y-3">
+            <div v-for="note in notes" :key="note.id"
+                 :class="['rounded-lg border p-3',
+                          escDark
+                              ? 'border-amber-500/10 bg-amber-500/[0.04]'
+                              : 'border-amber-200 bg-white']">
+                <!-- Note body -->
+                <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-neutral-200' : 'text-gray-800']" v-html="note.body"></div>
+
+                <!-- Meta row -->
+                <div class="mt-2 flex items-center justify-between">
+                    <div :class="['flex items-center gap-2 text-xs',
+                                  escDark ? 'text-neutral-500' : 'text-gray-500']">
+                        <span class="font-medium">{{ note.author?.name || 'Unknown' }}</span>
+                        <span>&middot;</span>
+                        <span>{{ formatDate(note.created_at) }}</span>
+                    </div>
+                    <button @click="unpinNote(note)"
+                            :disabled="processingId === note.id"
+                            :class="['rounded-md px-2 py-1 text-xs font-medium transition-colors',
+                                     escDark
+                                         ? 'text-amber-400 hover:bg-amber-500/10 hover:text-amber-300'
+                                         : 'text-amber-600 hover:bg-amber-100 hover:text-amber-700',
+                                     processingId === note.id && 'opacity-50 cursor-not-allowed']">
+                        Unpin
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/PresenceIndicator.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref, computed, inject, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+    routePrefix: { type: String, required: true },
+});
+
+const escDark = inject('esc-dark', computed(() => false));
+const viewers = ref([]);
+const hovering = ref(false);
+let intervalId = 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
+    }
+}
+
+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(() => {
+    fetchPresence();
+    intervalId = setInterval(fetchPresence, 30000);
+});
+
+onUnmounted(() => {
+    if (intervalId) {
+        clearInterval(intervalId);
+        intervalId = null;
+    }
+});
+</script>
+
+<template>
+    <div v-if="viewers.length > 0" class="relative" @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']">
+                {{ getInitial(viewer) }}
+            </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']">
+                +{{ overflowCount }}
+            </div>
+        </div>
+
+        <!-- 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>

package/src/components/PriorityBadge.vue

@@ -1,9 +1,21 @@
 <script setup>
+import { inject, computed } from 'vue';
+
 const props = defineProps({
     priority: { type: String, required: true },
 });
 
-const priorityConfig = {
+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' },
@@ -11,7 +23,13 @@ const priorityConfig = {
     critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
 };
 
-const config = priorityConfig[props.priority] || { label: props.priority, color: 'bg-gray-100 text-gray-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>

package/src/components/QuickFilters.vue

@@ -0,0 +1,49 @@
+<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>

package/src/components/ReplyComposer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, inject } from 'vue';
 import { router } from '@inertiajs/vue3';
 import FileDropzone from './FileDropzone.vue';
 
@@ -12,6 +12,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['submit']);
+const escDark = inject('esc-dark', computed(() => false));
 
 const body = ref('');
 const isNote = ref(false);
@@ -62,7 +63,55 @@ const buttonLabel = computed(() => {
 </script>
 
 <template>
-    <div class="rounded-lg border border-gray-200 bg-white p-4">
+    <!-- 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]']">
+                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]']">
+                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">
+            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>
+
+        <FileDropzone @files="handleFiles" class="mt-2" />
+
+        <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>
+            </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">
+                    <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']">
+                {{ buttonLabel }}
+            </button>
+        </div>
+    </div>
+
+    <!-- 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']">
@@ -91,7 +140,7 @@ const buttonLabel = computed(() => {
         </div>
 
         <div class="mt-3 flex items-center justify-between">
-            <div v-if="cannedResponses.length" class="relative">
+            <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">
                     <option value="">Canned responses...</option>