@escalated-dev/escalated 0.8.0 → 0.9.0

package/src/components/TicketSidebar.vue

@@ -7,6 +7,7 @@ import AssigneeSelect from './AssigneeSelect.vue';
 import TagSelect from './TagSelect.vue';
 import TicketTypeSelector from './TicketTypeSelector.vue';
 import ActivityTimeline from './ActivityTimeline.vue';
+import TicketSubjects from './TicketSubjects.vue';
 
 defineProps({
     ticket: { type: Object, required: true },
@@ -85,6 +86,9 @@ function renderStars(rating) {
             </dl>
         </div>
 
+        <!-- Related host-app entities this ticket is about (Project, Customer, …) -->
+        <TicketSubjects :subjects="ticket.subjects || []" />
+
         <!-- Satisfaction Rating (read-only) -->
         <div v-if="ticket.satisfaction_rating" :class="cardClass">
             <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']">

package/src/components/TicketSplitDialog.vue

@@ -1,98 +1,98 @@
-<script setup>
-import { ref } from 'vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    ticketReference: { type: String, required: true },
-    replyId: { type: [Number, String], required: true },
-    replyAuthor: { type: String, default: '' },
-    replyExcerpt: { type: String, default: '' },
-});
-
-const emit = defineEmits(['close']);
-
-const subject = ref('');
-const splitting = ref(false);
-
-function confirmSplit() {
-    if (splitting.value) return;
-    splitting.value = true;
-
-    const payload = { reply_id: props.replyId };
-    if (subject.value.trim()) {
-        payload.subject = subject.value.trim();
-    }
-
-    router.post(route('escalated.admin.tickets.split', props.ticketReference), payload, {
-        onFinish: () => {
-            splitting.value = false;
-        },
-        onError: () => {
-            splitting.value = false;
-        },
-    });
-}
-</script>
-
-<template>
-    <Teleport to="body">
-        <div
-            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-            @click.self="emit('close')"
-        >
-            <div class="w-full max-w-lg rounded-xl border border-white/[0.06] bg-neutral-900 p-6 shadow-2xl">
-                <div class="mb-4 flex items-center justify-between">
-                    <h3 class="text-lg font-semibold text-neutral-200">Split to New Ticket</h3>
-                    <button class="text-neutral-500 hover:text-neutral-300" @click="emit('close')">
-                        <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>
-
-                <p class="mb-4 text-sm text-neutral-400">
-                    This will create a new ticket from the selected reply
-                    <span v-if="replyAuthor" class="text-neutral-300">by {{ replyAuthor }}</span
-                    >. The new ticket will be linked to
-                    <span class="font-mono text-neutral-300">{{ ticketReference }}</span
-                    >.
-                </p>
-
-                <!-- Reply excerpt preview -->
-                <div v-if="replyExcerpt" class="mb-4 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
-                    <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">Reply content</p>
-                    <p class="mt-1 line-clamp-3 text-sm text-neutral-300">{{ replyExcerpt }}</p>
-                </div>
-
-                <label class="mb-1 block text-sm font-medium text-neutral-400">
-                    Subject <span class="text-neutral-600">(optional override)</span>
-                </label>
-                <input
-                    v-model="subject"
-                    type="text"
-                    placeholder="Leave empty to auto-generate from source ticket"
-                    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"
-                />
-
-                <div class="mt-5 flex justify-end gap-3">
-                    <button
-                        class="rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]"
-                        @click="emit('close')"
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        :disabled="splitting"
-                        :class="[
-                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400',
-                            splitting && 'cursor-not-allowed opacity-40',
-                        ]"
-                        @click="confirmSplit"
-                    >
-                        {{ splitting ? 'Splitting...' : 'Split to New Ticket' }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Teleport>
-</template>
+<script setup>
+import { ref } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    ticketReference: { type: String, required: true },
+    replyId: { type: [Number, String], required: true },
+    replyAuthor: { type: String, default: '' },
+    replyExcerpt: { type: String, default: '' },
+});
+
+const emit = defineEmits(['close']);
+
+const subject = ref('');
+const splitting = ref(false);
+
+function confirmSplit() {
+    if (splitting.value) return;
+    splitting.value = true;
+
+    const payload = { reply_id: props.replyId };
+    if (subject.value.trim()) {
+        payload.subject = subject.value.trim();
+    }
+
+    router.post(route('escalated.admin.tickets.split', props.ticketReference), payload, {
+        onFinish: () => {
+            splitting.value = false;
+        },
+        onError: () => {
+            splitting.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <div
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+            @click.self="emit('close')"
+        >
+            <div class="w-full max-w-lg rounded-xl border border-white/[0.06] bg-neutral-900 p-6 shadow-2xl">
+                <div class="mb-4 flex items-center justify-between">
+                    <h3 class="text-lg font-semibold text-neutral-200">Split to New Ticket</h3>
+                    <button class="text-neutral-500 hover:text-neutral-300" @click="emit('close')">
+                        <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>
+
+                <p class="mb-4 text-sm text-neutral-400">
+                    This will create a new ticket from the selected reply
+                    <span v-if="replyAuthor" class="text-neutral-300">by {{ replyAuthor }}</span
+                    >. The new ticket will be linked to
+                    <span class="font-mono text-neutral-300">{{ ticketReference }}</span
+                    >.
+                </p>
+
+                <!-- Reply excerpt preview -->
+                <div v-if="replyExcerpt" class="mb-4 rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+                    <p class="text-xs font-semibold uppercase tracking-wider text-neutral-500">Reply content</p>
+                    <p class="mt-1 line-clamp-3 text-sm text-neutral-300">{{ replyExcerpt }}</p>
+                </div>
+
+                <label class="mb-1 block text-sm font-medium text-neutral-400">
+                    Subject <span class="text-neutral-600">(optional override)</span>
+                </label>
+                <input
+                    v-model="subject"
+                    type="text"
+                    placeholder="Leave empty to auto-generate from source ticket"
+                    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"
+                />
+
+                <div class="mt-5 flex justify-end gap-3">
+                    <button
+                        class="rounded-lg border border-white/10 bg-white/[0.03] px-4 py-2 text-sm font-medium text-neutral-300 transition-colors hover:bg-white/[0.06]"
+                        @click="emit('close')"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        :disabled="splitting"
+                        :class="[
+                            'rounded-lg bg-gradient-to-r from-cyan-500 to-violet-500 px-4 py-2 text-sm font-medium text-white shadow-lg shadow-black/20 transition-all hover:from-cyan-400 hover:to-violet-400',
+                            splitting && 'cursor-not-allowed opacity-40',
+                        ]"
+                        @click="confirmSplit"
+                    >
+                        {{ splitting ? 'Splitting...' : 'Split to New Ticket' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>

package/src/components/TicketSubjects.stories.js

@@ -0,0 +1,63 @@
+import TicketSubjects from './TicketSubjects.vue';
+
+export default {
+    title: 'Components/TicketSubjects',
+    component: TicketSubjects,
+};
+
+export const Single = {
+    args: {
+        subjects: [
+            {
+                type: 'App\\Models\\Project',
+                id: '42',
+                role: 'project',
+                title: 'Acme Website Redesign',
+                subtitle: 'Project · Acme Corp',
+                url: 'https://app.example.com/projects/42',
+                color: '#2563eb',
+                icon: 'folder',
+            },
+        ],
+    },
+};
+
+export const Multiple = {
+    args: {
+        subjects: [
+            {
+                type: 'App\\Models\\Project',
+                id: '42',
+                role: 'project',
+                title: 'Acme Website Redesign',
+                subtitle: 'Project · Acme Corp',
+                url: 'https://app.example.com/projects/42',
+                color: '#2563eb',
+                icon: 'folder',
+            },
+            {
+                type: 'App\\Models\\Customer',
+                id: '7',
+                role: 'account',
+                title: 'Acme Corp',
+                subtitle: 'Enterprise · 320 seats',
+                url: 'https://app.example.com/customers/7',
+                color: '#059669',
+                icon: 'building',
+            },
+            {
+                type: 'App\\Models\\Asset',
+                id: 'srv-19',
+                title: 'web-prod-19',
+                subtitle: 'Server · us-east-1',
+                url: null,
+                color: null,
+                icon: null,
+            },
+        ],
+    },
+};
+
+export const Empty = {
+    args: { subjects: [] },
+};

package/src/components/TicketSubjects.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    subjects: { type: Array, default: () => [] },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const cardClass = computed(() =>
+    escDark.value
+        ? 'rounded-xl border border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)] p-4'
+        : 'rounded-lg border border-gray-200 bg-white p-4',
+);
+
+const hasSubjects = computed(() => Array.isArray(props.subjects) && props.subjects.length > 0);
+
+function initials(subject) {
+    const text = (subject.title || '').trim();
+    if (!text) return '?';
+    return text
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((w) => w.charAt(0).toUpperCase())
+        .join('');
+}
+</script>
+
+<template>
+    <div v-if="hasSubjects" :class="cardClass">
+        <h3 :class="['mb-3 text-sm font-semibold', escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900']">
+            Related
+        </h3>
+        <ul class="space-y-2">
+            <li v-for="(subject, i) in subjects" :key="`${subject.type}:${subject.id}:${i}`">
+                <component
+                    :is="subject.url ? 'a' : 'div'"
+                    :href="subject.url || undefined"
+                    :target="subject.url ? '_blank' : undefined"
+                    :rel="subject.url ? 'noopener noreferrer' : undefined"
+                    :class="[
+                        'flex items-center gap-3 rounded-md px-2 py-1.5 text-sm transition',
+                        subject.url ? 'cursor-pointer' : '',
+                        subject.url
+                            ? escDark
+                                ? 'hover:bg-[var(--esc-panel-hover,rgba(255,255,255,0.05))]'
+                                : 'hover:bg-gray-50'
+                            : '',
+                    ]"
+                >
+                    <span
+                        class="flex h-8 w-8 flex-none items-center justify-center rounded-md text-xs font-semibold text-white"
+                        :style="{ backgroundColor: subject.color || '#6b7280' }"
+                        :title="subject.icon || undefined"
+                        aria-hidden="true"
+                    >
+                        {{ initials(subject) }}
+                    </span>
+                    <span class="min-w-0 flex-1">
+                        <span
+                            :class="[
+                                'block truncate font-medium',
+                                escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900',
+                            ]"
+                        >
+                            {{ subject.title }}
+                        </span>
+                        <span
+                            v-if="subject.subtitle"
+                            :class="[
+                                'block truncate text-xs',
+                                escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                            ]"
+                        >
+                            {{ subject.subtitle }}
+                        </span>
+                    </span>
+                    <span
+                        v-if="subject.role"
+                        :class="['flex-none text-xs', escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400']"
+                    >
+                        {{ subject.role }}
+                    </span>
+                    <svg
+                        v-if="subject.url"
+                        class="h-3.5 w-3.5 flex-none"
+                        :class="escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-400'"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        aria-hidden="true"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M14 5h5v5m0-5L10 14m-1 5H6a2 2 0 01-2-2V8"
+                        />
+                    </svg>
+                </component>
+            </li>
+        </ul>
+    </div>
+</template>

package/src/components/TwoFactorSetup.vue

@@ -2,9 +2,8 @@
 import { ref } from 'vue';
 import TotpInput from './TotpInput.vue';
 
-const props = defineProps({
+defineProps({
     qrUri: { type: String, default: '' },
-    recoveryCodes: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits(['confirm', 'cancel']);
@@ -24,12 +23,6 @@ function confirmCode() {
     }
     error.value = '';
     emit('confirm', code.value);
-    step.value = 3;
-}
-
-function copyRecoveryCodes() {
-    const text = props.recoveryCodes.join('\n');
-    navigator.clipboard?.writeText(text);
 }
 </script>
 
@@ -80,34 +73,5 @@ function copyRecoveryCodes() {
                 </button>
             </div>
         </div>
-
-        <!-- Step 3: Recovery Codes -->
-        <div v-if="step === 3">
-            <h3 class="mb-4 text-sm font-semibold text-white">Step 3: Save Recovery Codes</h3>
-            <p class="mb-4 text-sm text-neutral-400">
-                Save these recovery codes in a safe place. Each code can only be used once to access your account if you
-                lose your authenticator device.
-            </p>
-            <div class="rounded-lg border border-white/[0.06] bg-neutral-950 p-4">
-                <div class="grid grid-cols-2 gap-2">
-                    <code
-                        v-for="(rc, idx) in recoveryCodes"
-                        :key="idx"
-                        class="rounded bg-neutral-900 px-3 py-1.5 text-center text-sm font-mono text-neutral-200"
-                    >
-                        {{ rc }}
-                    </code>
-                </div>
-            </div>
-            <div class="mt-4 flex gap-3">
-                <button
-                    type="button"
-                    class="rounded-lg border border-white/10 px-4 py-2 text-sm text-neutral-400 hover:text-neutral-200"
-                    @click="copyRecoveryCodes"
-                >
-                    Copy Codes
-                </button>
-            </div>
-        </div>
     </div>
 </template>