From 9d8a5d0c8715ad8f198a22b50c4d5fc1f82602ac Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 24 Aug 2026 15:51:49 +0000
Subject: [PATCH] Add compact single-line layout for Events panel, fix ticket
 button label

Events was the only workflow panel without a compact variant, so it
rendered the full card inline on the thread list instead of a
streamlined row like the other workflows. Also "View tickets" should
be singular since it links to one ticket.
---
 src/components/WorkflowPanel.vue      |  6 +++---
 src/components/panels/EventsPanel.vue | 25 ++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/WorkflowPanel.vue b/src/components/WorkflowPanel.vue
index ac51c1e..d493f12 100644
--- a/src/components/WorkflowPanel.vue
+++ b/src/components/WorkflowPanel.vue
@@ -88,7 +88,7 @@ const showUnsubscribeFooter = computed(() =>
         <HealthcarePanel v-else-if="resolvedGroup!.workflow === 'healthcare'" :data="narrowWorkflowData('healthcare', entry)" :compact="compact" />
         <JobPanel v-else-if="resolvedGroup!.workflow === 'job'" :data="narrowWorkflowData('job', entry)" :actions="actionsForEntry(idx)" :compact="compact" />
         <SupportPanel v-else-if="resolvedGroup!.workflow === 'support'" :data="narrowWorkflowData('support', entry)" :compact="compact" />
-        <EventsPanel v-else-if="resolvedGroup!.workflow === 'events'" :data="narrowWorkflowData('events', entry)" />
+        <EventsPanel v-else-if="resolvedGroup!.workflow === 'events'" :data="narrowWorkflowData('events', entry)" :compact="compact" />
         <TestPanel v-else-if="resolvedGroup!.workflow === 'test'" :data="narrowWorkflowData('test', entry)" :compact="compact" />
       </template>
       <div v-if="showUnsubscribeFooter" class="flex items-center justify-between gap-3">
@@ -119,7 +119,7 @@ const showUnsubscribeFooter = computed(() =>
         <HealthcarePanel v-else-if="resolvedGroup!.workflow === 'healthcare'" :data="narrowWorkflowData('healthcare', visibleEntries[0].entry)" :compact="compact" />
         <JobPanel v-else-if="resolvedGroup!.workflow === 'job'" :data="narrowWorkflowData('job', visibleEntries[0].entry)" :actions="entryActions" :compact="compact" />
         <SupportPanel v-else-if="resolvedGroup!.workflow === 'support'" :data="narrowWorkflowData('support', visibleEntries[0].entry)" :compact="compact" />
-        <EventsPanel v-else-if="resolvedGroup!.workflow === 'events'" :data="narrowWorkflowData('events', visibleEntries[0].entry)" />
+        <EventsPanel v-else-if="resolvedGroup!.workflow === 'events'" :data="narrowWorkflowData('events', visibleEntries[0].entry)" :compact="compact" />
         <TestPanel v-else-if="resolvedGroup!.workflow === 'test'" :data="narrowWorkflowData('test', visibleEntries[0].entry)" :compact="compact" />
         <div class="flex items-center justify-between gap-3">
           <span class="text-xs text-ctp-subtext0">Don't want emails like this?</span>
@@ -148,7 +148,7 @@ const showUnsubscribeFooter = computed(() =>
         <HealthcarePanel v-else-if="resolvedGroup!.workflow === 'healthcare'" :data="narrowWorkflowData('healthcare', visibleEntries[0].entry)" :compact="compact" />
         <JobPanel v-else-if="resolvedGroup!.workflow === 'job'" :data="narrowWorkflowData('job', visibleEntries[0].entry)" :actions="entryActions" :compact="compact" />
         <SupportPanel v-else-if="resolvedGroup!.workflow === 'support'" :data="narrowWorkflowData('support', visibleEntries[0].entry)" :compact="compact" />
-        <EventsPanel v-else-if="resolvedGroup!.workflow === 'events'" :data="narrowWorkflowData('events', visibleEntries[0].entry)" />
+        <EventsPanel v-else-if="resolvedGroup!.workflow === 'events'" :data="narrowWorkflowData('events', visibleEntries[0].entry)" :compact="compact" />
         <TestPanel v-else-if="resolvedGroup!.workflow === 'test'" :data="narrowWorkflowData('test', visibleEntries[0].entry)" :compact="compact" />
       </template>
     </template>
diff --git a/src/components/panels/EventsPanel.vue b/src/components/panels/EventsPanel.vue
index ac061d6..f196785 100644
--- a/src/components/panels/EventsPanel.vue
+++ b/src/components/panels/EventsPanel.vue
@@ -4,7 +4,7 @@ import type { EventsData } from '@/types/server'
 import { useClipboard } from '@/composables/useClipboard'
 import { formatResourceDate, dayKey } from '@/lib/resourceDate'
 
-const props = defineProps<{ data: EventsData }>()
+const props = defineProps<{ data: EventsData; compact?: boolean }>()
 const { copied, copy } = useClipboard()
 
 const typeLabel: Record<EventsData['eventType'], string> = {
@@ -40,7 +40,26 @@ const eventDateLabel = computed(() => {
 </script>
 
 <template>
-  <div class="rounded-lg border border-ctp-surface1 bg-ctp-mantle p-4">
+  <!-- Compact: single row for inbox thread list -->
+  <div v-if="compact" class="flex items-center gap-2 text-xs">
+    <span class="shrink-0 text-ctp-subtext0">🎟️</span>
+    <span class="shrink-0 font-medium text-ctp-text">{{ data.eventName }}</span>
+    <span v-if="eventDateLabel" class="shrink-0" :class="eventDateLabel.urgent ? 'font-medium text-ctp-peach' : 'text-ctp-subtext0'">{{ eventDateLabel.text }}</span>
+    <span v-if="data.ticketReference" class="shrink-0 font-mono text-ctp-subtext0">{{ data.ticketReference }}</span>
+    <a
+      v-if="data.ticketUrl"
+      :href="data.ticketUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="ml-auto shrink-0 text-ctp-blue hover:underline"
+      @click.stop
+    >
+      View ticket →
+    </a>
+  </div>
+
+  <!-- Full: detail view card -->
+  <div v-else class="rounded-lg border border-ctp-surface1 bg-ctp-mantle p-4">
     <div class="mb-2 flex flex-wrap items-start justify-between gap-2">
       <div>
         <span class="text-sm font-medium text-ctp-text">{{ data.eventName }}</span>
@@ -94,7 +113,7 @@ const eventDateLabel = computed(() => {
       rel="noopener noreferrer"
       class="mt-2 inline-block rounded border border-ctp-surface1 px-3 py-1.5 text-xs text-ctp-text hover:bg-ctp-surface1"
     >
-      View tickets →
+      View ticket →
     </a>
   </div>
 </template>