From d3c479868af288df0f706c0df033fd21a2e7ae20 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 23:07:36 +0200
Subject: [PATCH] ui(activities): drop the ticket-id list from the
 owned-tickets section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The detail page's owned-tickets card was rendering one font-mono
row per ticket id — useful for verifying state during development
but pure noise for the buyer. The "View in My Tickets" button
already links to the place where the buyer interacts with the
individual rows. Collapse to a single line: "You have N tickets"
+ the link button, on one row.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../activities/views/ActivityDetailPage.vue    | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/modules/activities/views/ActivityDetailPage.vue b/src/modules/activities/views/ActivityDetailPage.vue
index c347363..4853c8e 100644
--- a/src/modules/activities/views/ActivityDetailPage.vue
+++ b/src/modules/activities/views/ActivityDetailPage.vue
@@ -100,9 +100,8 @@ function goBack() {
 
 // --- Ticket purchase + owned-tickets surface ----------------------
 
-const { getTickets, paidCount, refresh: refreshOwnedTickets } = useOwnedTickets()
+const { paidCount, refresh: refreshOwnedTickets } = useOwnedTickets()
 
-const ownedTicketsForActivity = computed(() => getTickets(activityId))
 const ownedPaidCount = computed(() => paidCount(activityId))
 
 const purchaseEvent = computed(() => {
@@ -280,22 +279,13 @@ function goToMyTickets() {
       <div v-if="activity.ticketInfo" class="space-y-3">
         <div
           v-if="ownedPaidCount > 0"
-          class="bg-primary/10 border border-primary/30 rounded-lg p-4 space-y-3"
+          class="bg-primary/10 border border-primary/30 rounded-lg p-4 flex items-center justify-between gap-3"
         >
           <div class="flex items-center gap-2 text-sm font-medium text-foreground">
-            <CheckCircle2 class="w-4 h-4 text-primary" />
+            <CheckCircle2 class="w-4 h-4 text-primary shrink-0" />
             {{ t('activities.detail.ticketsOwned', { count: ownedPaidCount }, ownedPaidCount) }}
           </div>
-          <div class="space-y-1">
-            <div
-              v-for="ticket in ownedTicketsForActivity.filter(t => t.paid)"
-              :key="ticket.id"
-              class="text-xs font-mono text-muted-foreground break-all"
-            >
-              {{ ticket.id }}
-            </div>
-          </div>
-          <Button variant="outline" size="sm" class="gap-1.5" @click="goToMyTickets">
+          <Button variant="outline" size="sm" class="gap-1.5 shrink-0" @click="goToMyTickets">
             <Ticket class="w-4 h-4" />
             {{ t('activities.detail.viewMyTickets', 'View in My Tickets') }}
           </Button>