@escalated-dev/escalated 0.5.0 → 0.7.0

package/src/components/SatisfactionRating.vue

@@ -7,7 +7,10 @@ const props = defineProps({
     existingRating: { type: Object, default: null },
 });
 
-const escDark = inject('esc-dark', computed(() => false));
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
 const hoveredStar = ref(0);
 const selectedRating = ref(props.existingRating?.rating || 0);
 const comment = ref(props.existingRating?.comment || '');
@@ -41,86 +44,135 @@ function leaveStars() {
 function submit() {
     if (!selectedRating.value || processing.value || isReadOnly.value) return;
     processing.value = true;
-    router.post(props.action, {
-        rating: selectedRating.value,
-        comment: comment.value || null,
-    }, {
-        preserveScroll: true,
-        onSuccess: () => {
-            submitted.value = true;
+    router.post(
+        props.action,
+        {
+            rating: selectedRating.value,
+            comment: comment.value || null,
         },
-        onFinish: () => {
-            processing.value = false;
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                submitted.value = true;
+            },
+            onFinish: () => {
+                processing.value = false;
+            },
         },
-    });
+    );
 }
 </script>
 
 <template>
-    <div :class="['rounded-xl border p-5',
-                  escDark ? 'border-white/[0.06] bg-neutral-900/60' : 'border-gray-200 bg-white']">
-        <h3 :class="['text-sm font-semibold',
-                      escDark ? 'text-neutral-200' : 'text-gray-900']">
+    <div
+        :class="[
+            'rounded-xl border p-5',
+            escDark ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]' : 'border-gray-200 bg-white',
+        ]"
+    >
+        <h3 :class="['text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-900']">
             {{ isReadOnly ? 'Customer Rating' : 'How was your experience?' }}
         </h3>
 
         <!-- Stars -->
         <div class="mt-3 flex items-center gap-1" @mouseleave="leaveStars">
-            <button v-for="star in 5" :key="star"
-                    @click="selectStar(star)"
-                    @mouseenter="hoverStar(star)"
-                    :disabled="isReadOnly"
-                    :class="['transition-transform', !isReadOnly && 'hover:scale-110', isReadOnly && 'cursor-default']">
+            <button
+                v-for="star in 5"
+                :key="star"
+                :disabled="isReadOnly"
+                :aria-label="'Rate ' + star + ' star' + (star !== 1 ? 's' : '')"
+                :class="['transition-transform', !isReadOnly && 'hover:scale-110', isReadOnly && 'cursor-default']"
+                @click="selectStar(star)"
+                @mouseenter="hoverStar(star)"
+            >
                 <!-- Filled star -->
-                <svg v-if="star <= displayRating" class="h-7 w-7" viewBox="0 0 24 24" fill="currentColor"
-                     :class="escDark ? 'text-amber-400' : 'text-yellow-400'">
-                    <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" />
+                <svg
+                    v-if="star <= displayRating"
+                    class="h-7 w-7"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    :class="escDark ? 'text-amber-400' : 'text-yellow-400'"
+                >
+                    <path
+                        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
+                    />
                 </svg>
                 <!-- Empty star -->
-                <svg v-else class="h-7 w-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
-                     :class="escDark ? 'text-neutral-600' : 'text-gray-300'">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
+                <svg
+                    v-else
+                    class="h-7 w-7"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    viewBox="0 0 24 24"
+                    :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-300'"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+                    />
                 </svg>
             </button>
-            <span v-if="displayRating > 0"
-                  :class="['ml-2 text-sm font-medium',
-                           escDark ? 'text-neutral-400' : 'text-gray-500']">
+            <span
+                v-if="displayRating > 0"
+                :class="[
+                    'ml-2 text-sm font-medium',
+                    escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-500',
+                ]"
+            >
                 {{ ratingLabels[displayRating] }}
             </span>
         </div>
 
         <!-- Comment -->
         <div v-if="!isReadOnly" class="mt-4">
-            <textarea v-model="comment" rows="3"
-                      placeholder="Any additional feedback? (optional)"
-                      :class="['w-full rounded-lg border px-3 py-2 text-sm focus:outline-none',
-                               escDark
-                                   ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:ring-1 focus:ring-white/10'
-                                   : 'border-gray-300 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500']">
+            <textarea
+                v-model="comment"
+                rows="3"
+                placeholder="Any additional feedback? (optional)"
+                :class="[
+                    'w-full rounded-lg border px-3 py-2 text-sm focus:outline-none',
+                    escDark
+                        ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
+                        : 'border-gray-300 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500',
+                ]"
+            >
             </textarea>
         </div>
 
         <!-- Read-only comment display -->
         <div v-if="isReadOnly && existingRating.comment" class="mt-3">
-            <p :class="['text-sm italic', escDark ? 'text-neutral-400' : 'text-gray-600']">
+            <p :class="['text-sm italic', escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-600']">
                 "{{ existingRating.comment }}"
             </p>
         </div>
 
         <!-- Submit -->
         <div v-if="!isReadOnly" class="mt-3">
-            <div v-if="submitted"
-                 :class="['rounded-lg px-3 py-2 text-sm font-medium',
-                          escDark ? 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20' : 'bg-green-50 text-green-700']">
+            <div
+                v-if="submitted"
+                :class="[
+                    'rounded-lg px-3 py-2 text-sm font-medium',
+                    escDark
+                        ? 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20'
+                        : 'bg-green-50 text-green-700',
+                ]"
+            >
                 Thank you for your feedback!
             </div>
-            <button v-else @click="submit"
-                    :disabled="!selectedRating || processing"
-                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
-                             escDark
-                                 ? 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400'
-                                 : 'bg-blue-600 hover:bg-blue-700',
-                             (!selectedRating || processing) && 'cursor-not-allowed opacity-40']">
+            <button
+                v-else
+                :disabled="!selectedRating || processing"
+                :class="[
+                    'rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
+                    escDark
+                        ? 'bg-gradient-to-r from-[var(--esc-panel-accent)] to-[var(--esc-panel-accent-secondary)] hover:from-[var(--esc-panel-accent-hover)] hover:to-[var(--esc-panel-accent-secondary-hover)]'
+                        : 'bg-blue-600 hover:bg-blue-700',
+                    (!selectedRating || processing) && 'cursor-not-allowed opacity-40',
+                ]"
+                @click="submit"
+            >
                 Submit Rating
             </button>
         </div>

package/src/components/ScheduleEditor.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: () => ({
+            monday: { start: '09:00', end: '17:00' },
+            tuesday: { start: '09:00', end: '17:00' },
+            wednesday: { start: '09:00', end: '17:00' },
+            thursday: { start: '09:00', end: '17:00' },
+            friday: { start: '09:00', end: '17:00' },
+            saturday: { start: '', end: '' },
+            sunday: { start: '', end: '' },
+        }),
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const days = [
+    { key: 'monday', label: 'Monday' },
+    { key: 'tuesday', label: 'Tuesday' },
+    { key: 'wednesday', label: 'Wednesday' },
+    { key: 'thursday', label: 'Thursday' },
+    { key: 'friday', label: 'Friday' },
+    { key: 'saturday', label: 'Saturday' },
+    { key: 'sunday', label: 'Sunday' },
+];
+
+const timeOptions = computed(() => {
+    const options = [];
+    for (let h = 0; h < 24; h++) {
+        for (let m = 0; m < 60; m += 30) {
+            const hh = String(h).padStart(2, '0');
+            const mm = String(m).padStart(2, '0');
+            options.push(`${hh}:${mm}`);
+        }
+    }
+    options.push('24:00');
+    return options;
+});
+
+function updateDay(dayKey, field, value) {
+    const updated = { ...props.modelValue };
+    updated[dayKey] = { ...(updated[dayKey] || { start: '', end: '' }), [field]: value };
+    emit('update:modelValue', updated);
+}
+
+function toggleDay(dayKey) {
+    const updated = { ...props.modelValue };
+    const current = updated[dayKey];
+    if (current && current.start) {
+        updated[dayKey] = { start: '', end: '' };
+    } else {
+        updated[dayKey] = { start: '09:00', end: '17:00' };
+    }
+    emit('update:modelValue', updated);
+}
+
+function isDayEnabled(dayKey) {
+    const day = props.modelValue[dayKey];
+    return day && day.start;
+}
+</script>
+
+<template>
+    <div class="space-y-2">
+        <div
+            v-for="day in days"
+            :key="day.key"
+            class="flex items-center gap-3 rounded-lg border border-white/[0.06] bg-neutral-950/50 px-3 py-2"
+        >
+            <label class="flex w-28 items-center gap-2">
+                <input
+                    type="checkbox"
+                    :checked="isDayEnabled(day.key)"
+                    class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                    @change="toggleDay(day.key)"
+                />
+                <span class="text-sm font-medium text-neutral-300">{{ day.label }}</span>
+            </label>
+
+            <template v-if="isDayEnabled(day.key)">
+                <select
+                    :value="modelValue[day.key]?.start || '09:00'"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateDay(day.key, 'start', $event.target.value)"
+                >
+                    <option v-for="t in timeOptions" :key="'s-' + t" :value="t">{{ t }}</option>
+                </select>
+                <span class="text-xs text-neutral-500">to</span>
+                <select
+                    :value="modelValue[day.key]?.end || '17:00'"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-2 py-1 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateDay(day.key, 'end', $event.target.value)"
+                >
+                    <option v-for="t in timeOptions" :key="'e-' + t" :value="t">{{ t }}</option>
+                </select>
+            </template>
+            <span v-else class="text-xs text-neutral-500">Closed</span>
+        </div>
+    </div>
+</template>

package/src/components/SideConversation.vue

@@ -0,0 +1,165 @@
+<script setup>
+import { ref, inject, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const props = defineProps({
+    conversation: { type: Object, required: true },
+    ticketReference: { type: String, required: true },
+});
+
+const emit = defineEmits(['updated']);
+const replyBody = ref('');
+const submitting = ref(false);
+const expanded = ref(false);
+
+function submitReply() {
+    if (!replyBody.value.trim() || submitting.value) return;
+    submitting.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.side-conversations.reply', [props.ticketReference, props.conversation.id]),
+        { body: replyBody.value },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                replyBody.value = '';
+                emit('updated');
+            },
+            onFinish: () => {
+                submitting.value = false;
+            },
+        },
+    );
+}
+
+function closeConversation() {
+    router.post(
+        route('escalated.admin.tickets.side-conversations.close', [props.ticketReference, props.conversation.id]),
+        {},
+        {
+            preserveScroll: true,
+            onSuccess: () => emit('updated'),
+        },
+    );
+}
+</script>
+
+<template>
+    <div
+        :class="[
+            'rounded-lg border p-3',
+            escDark ? 'border-white/[0.06] bg-white/[0.02]' : 'border-gray-200 bg-gray-50',
+        ]"
+    >
+        <button
+            class="flex w-full items-center justify-between"
+            :aria-expanded="expanded"
+            @click="expanded = !expanded"
+        >
+            <div class="flex items-center gap-2">
+                <span
+                    :class="[
+                        'inline-flex h-5 items-center rounded px-1.5 text-[10px] font-semibold uppercase',
+                        conversation.status === 'open'
+                            ? escDark
+                                ? 'bg-emerald-500/15 text-emerald-400'
+                                : 'bg-emerald-100 text-emerald-700'
+                            : escDark
+                              ? 'bg-neutral-500/15 text-neutral-400'
+                              : 'bg-gray-100 text-gray-500',
+                    ]"
+                >
+                    {{ conversation.status }}
+                </span>
+                <span :class="['text-sm font-medium', escDark ? 'text-neutral-200' : 'text-gray-900']">
+                    {{ conversation.subject }}
+                </span>
+                <span :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                    {{ conversation.channel }}
+                </span>
+            </div>
+            <svg
+                :class="[
+                    'h-4 w-4 transition-transform',
+                    escDark ? 'text-neutral-500' : 'text-gray-400',
+                    expanded && '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>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <!-- Replies -->
+            <div
+                v-for="reply in conversation.replies"
+                :key="reply.id"
+                :class="['border-l-2 pl-3', escDark ? 'border-white/[0.06]' : 'border-gray-200']"
+            >
+                <div class="flex items-center gap-2">
+                    <span :class="['text-xs font-medium', escDark ? 'text-neutral-300' : 'text-gray-700']">
+                        {{ reply.author?.name || 'System' }}
+                    </span>
+                    <span :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']">
+                        {{ reply.created_at }}
+                    </span>
+                </div>
+                <p :class="['mt-1 whitespace-pre-wrap text-sm', escDark ? 'text-neutral-400' : 'text-gray-600']">
+                    {{ reply.body }}
+                </p>
+            </div>
+
+            <div
+                v-if="!conversation.replies?.length"
+                :class="['text-xs', escDark ? 'text-neutral-500' : 'text-gray-400']"
+            >
+                No replies yet.
+            </div>
+
+            <!-- Reply form -->
+            <div v-if="conversation.status === 'open'" class="pt-2">
+                <textarea
+                    v-model="replyBody"
+                    rows="2"
+                    placeholder="Write a reply..."
+                    :class="[
+                        'w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1',
+                        escDark
+                            ? 'border-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:ring-white/10'
+                            : 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-blue-400 focus:ring-blue-200',
+                    ]"
+                ></textarea>
+                <div class="mt-2 flex items-center gap-2">
+                    <button
+                        :disabled="!replyBody.trim() || submitting"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-xs font-medium text-white transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!replyBody.trim() || submitting) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="submitReply"
+                    >
+                        Reply
+                    </button>
+                    <button
+                        :class="[
+                            'rounded-lg px-3 py-1.5 text-xs',
+                            escDark ? 'text-neutral-400 hover:text-neutral-300' : 'text-gray-500 hover:text-gray-700',
+                        ]"
+                        @click="closeConversation"
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/SideConversationList.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { router } from '@inertiajs/vue3';
+import SideConversation from './SideConversation.vue';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+});
+
+const conversations = ref([]);
+const expanded = ref(true);
+const showNew = ref(false);
+const newSubject = ref('');
+const newChannel = ref('internal');
+const newBody = ref('');
+const creating = ref(false);
+
+onMounted(() => {
+    fetchConversations();
+});
+
+async function fetchConversations() {
+    try {
+        const response = await fetch(route('escalated.admin.tickets.side-conversations.index', props.ticketReference), {
+            headers: {
+                Accept: 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+            },
+        });
+        if (response.ok) {
+            const data = await response.json();
+            conversations.value = data.conversations || [];
+        }
+    } catch {
+        // silently ignore
+    }
+}
+
+function createConversation() {
+    if (!newSubject.value.trim() || !newBody.value.trim() || creating.value) return;
+    creating.value = true;
+
+    router.post(
+        route('escalated.admin.tickets.side-conversations.store', props.ticketReference),
+        {
+            subject: newSubject.value,
+            channel: newChannel.value,
+            body: newBody.value,
+        },
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                newSubject.value = '';
+                newBody.value = '';
+                newChannel.value = 'internal';
+                showNew.value = false;
+                fetchConversations();
+            },
+            onFinish: () => {
+                creating.value = false;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <button
+            class="flex w-full items-center justify-between text-sm font-semibold text-neutral-200"
+            @click="expanded = !expanded"
+        >
+            <span>Side Conversations ({{ conversations.length }})</span>
+            <svg
+                :class="['h-4 w-4 text-neutral-500 transition-transform', expanded && '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>
+
+        <div v-if="expanded" class="mt-3 space-y-3">
+            <SideConversation
+                v-for="conv in conversations"
+                :key="conv.id"
+                :conversation="conv"
+                :ticket-reference="ticketReference"
+                @updated="fetchConversations"
+            />
+
+            <div v-if="!conversations.length && !showNew" class="text-xs text-neutral-500">No side conversations.</div>
+
+            <!-- New conversation form -->
+            <div v-if="showNew" class="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3 space-y-2">
+                <input
+                    v-model="newSubject"
+                    type="text"
+                    placeholder="Subject..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                />
+                <select
+                    v-model="newChannel"
+                    class="rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none"
+                >
+                    <option value="internal">Internal</option>
+                    <option value="email">Email</option>
+                </select>
+                <textarea
+                    v-model="newBody"
+                    rows="3"
+                    placeholder="Write the first message..."
+                    class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                ></textarea>
+                <div class="flex gap-2">
+                    <button
+                        :disabled="!newSubject.trim() || !newBody.trim() || creating"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-3 py-1.5 text-xs font-medium text-white transition-all hover:from-cyan-400 hover:to-violet-400',
+                            (!newSubject.trim() || !newBody.trim() || creating) && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="createConversation"
+                    >
+                        Create
+                    </button>
+                    <button
+                        class="rounded-lg px-3 py-1.5 text-xs text-neutral-400 hover:text-neutral-300"
+                        @click="showNew = false"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+
+            <button
+                v-if="!showNew"
+                class="w-full rounded-lg border border-dashed border-white/[0.08] py-2 text-xs text-neutral-400 transition-colors hover:border-white/[0.15] hover:text-neutral-300"
+                @click="showNew = true"
+            >
+                + New Side Conversation
+            </button>
+        </div>
+    </div>
+</template>