From 4415e0108339585a8e3b46b30b7dfdf7e55dc4c4 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 23:08:33 +0200
Subject: [PATCH] ui(activities): surface tickets-remaining on the event detail
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The card had it; the detail page didn't. Reuses the same three-
state language as the card ("Unlimited" / "{count} tickets
available" / "Sold out") so the buyer sees the same signal on
both surfaces.

Placed at the top of the tickets section, above the owned-tickets
chip + buy CTA, so it reads top-down: how many are left → how
many you have → buy more.

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

diff --git a/src/modules/activities/views/ActivityDetailPage.vue b/src/modules/activities/views/ActivityDetailPage.vue
index 4853c8e..7020237 100644
--- a/src/modules/activities/views/ActivityDetailPage.vue
+++ b/src/modules/activities/views/ActivityDetailPage.vue
@@ -274,9 +274,23 @@ function goToMyTickets() {
       <!-- Tickets — gated on the activity carrying ticketInfo (set
            by the calendar→Activity converter from the AIO custom
            tickets_* tags on the published event). Sections render
-           bottom-up: existing owned tickets (when count > 0) above
-           a Purchase CTA (when capacity remains). -->
+           bottom-up: availability count, then existing owned
+           tickets (when count > 0) above a Purchase CTA (when
+           capacity remains). -->
       <div v-if="activity.ticketInfo" class="space-y-3">
+        <div class="flex items-center gap-1.5 text-sm text-muted-foreground">
+          <Ticket class="w-4 h-4 shrink-0" />
+          <span v-if="activity.ticketInfo.available === undefined">
+            {{ t('activities.detail.unlimitedTickets', 'Unlimited tickets') }}
+          </span>
+          <span v-else-if="activity.ticketInfo.available > 0">
+            {{ t('activities.detail.ticketsAvailable', { count: activity.ticketInfo.available }) }}
+          </span>
+          <span v-else class="text-destructive font-medium">
+            {{ t('activities.detail.soldOut') }}
+          </span>
+        </div>
+
         <div
           v-if="ownedPaidCount > 0"
           class="bg-primary/10 border border-primary/30 rounded-lg p-4 flex items-center justify-between gap-3"