From 7cf009cff6ebd0645e72ff005e8267a364665976 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 20:39:53 +0200
Subject: [PATCH 01/13] feat(activities): parse ticket inventory tags from
 NIP-52 events
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The aiolabs/events extension publishes six AIO custom tags on every
kind 31922/31923 calendar event (tickets_available, _sold, _price,
_currency, _allow_fiat, _fiat_currency — see aiolabs/events#15) and
republishes the event on every ticket sale. Connected clients pick
up the new state via their existing relay subscription, no REST
polling.

- New TicketTags shape on CalendarTimeEvent + CalendarDateEvent.
  parseTicketTags reads the six tags off the raw event; tickets_
  currency is the discriminator so non-AIO calendar events (which
  don't have these tags) cleanly produce undefined.
- ActivityTicketInfo grows `sold` + `allowFiat` + `fiatCurrency`
  for the buyer surfaces, drops the never-populated `total` field,
  makes `available` optional (undefined = unlimited capacity).
- Both calendar→Activity converters now populate ticketInfo via
  ticketTagsToInfo so Nostr-sourced activities carry the inventory
  info that was previously only on LNbits drafts.
- ActivityCard handles the three-state available display
  (unlimited / count / sold-out) instead of just truthy/sold-out.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../activities/components/ActivityCard.vue    |  9 +++-
 src/modules/activities/types/activity.ts      | 26 +++++++--
 src/modules/activities/types/nip52.ts         | 54 +++++++++++++++++++
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/src/modules/activities/components/ActivityCard.vue b/src/modules/activities/components/ActivityCard.vue
index d021b10..b93d20a 100644
--- a/src/modules/activities/components/ActivityCard.vue
+++ b/src/modules/activities/components/ActivityCard.vue
@@ -155,13 +155,18 @@ const placeholderBg = computed(() => {
           <span class="truncate">{{ activity.location }}</span>
         </div>
 
-        <!-- Tickets available -->
+        <!-- Tickets available. `available === undefined` means
+             unlimited capacity (no `tickets_available` tag was
+             published); show the price-only line in that case. -->
         <div
           v-if="activity.ticketInfo"
           class="flex items-center gap-1.5 text-sm text-muted-foreground"
         >
           <Ticket class="w-3.5 h-3.5 shrink-0" />
-          <span v-if="activity.ticketInfo.available > 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">
diff --git a/src/modules/activities/types/activity.ts b/src/modules/activities/types/activity.ts
index a377e8b..993afa7 100644
--- a/src/modules/activities/types/activity.ts
+++ b/src/modules/activities/types/activity.ts
@@ -1,6 +1,6 @@
 import ngeohash from 'ngeohash'
 import type { ActivityCategory } from './category'
-import type { CalendarTimeEvent, CalendarDateEvent } from './nip52'
+import type { CalendarTimeEvent, CalendarDateEvent, TicketTags } from './nip52'
 import type { TicketedEvent } from './ticket'
 
 /**
@@ -74,8 +74,26 @@ export interface OrganizerInfo {
 export interface ActivityTicketInfo {
   price: number
   currency: string
-  available: number
-  total: number
+  /** Remaining capacity. Undefined means unlimited. */
+  available?: number
+  /** Running paid count. */
+  sold: number
+  /** Whether the organizer enabled fiat checkout. */
+  allowFiat: boolean
+  /** Fiat settle currency when allowFiat is true. */
+  fiatCurrency?: string
+}
+
+function ticketTagsToInfo(ticket: TicketTags | undefined): ActivityTicketInfo | undefined {
+  if (!ticket) return undefined
+  return {
+    price: ticket.price,
+    currency: ticket.currency,
+    available: ticket.available,
+    sold: ticket.sold,
+    allowFiat: ticket.allowFiat,
+    fiatCurrency: ticket.fiatCurrency,
+  }
 }
 
 /**
@@ -104,6 +122,7 @@ export function calendarTimeEventToActivity(event: CalendarTimeEvent, organizer?
     geohash: event.geohash,
     category,
     tags: event.hashtags,
+    ticketInfo: ticketTagsToInfo(event.ticket),
     isPrivate: false,
     createdAt: new Date(event.createdAt * 1000),
   }
@@ -140,6 +159,7 @@ export function calendarDateEventToActivity(event: CalendarDateEvent, organizer?
     geohash: event.geohash,
     category,
     tags: event.hashtags,
+    ticketInfo: ticketTagsToInfo(event.ticket),
     isPrivate: false,
     createdAt: new Date(event.createdAt * 1000),
   }
diff --git a/src/modules/activities/types/nip52.ts b/src/modules/activities/types/nip52.ts
index 332d054..b87db35 100644
--- a/src/modules/activities/types/nip52.ts
+++ b/src/modules/activities/types/nip52.ts
@@ -17,6 +17,27 @@ export const NIP52_KINDS = {
 
 export type Nip52Kind = typeof NIP52_KINDS[keyof typeof NIP52_KINDS]
 
+/**
+ * AIO custom tags carried on ticketed calendar events. The aiolabs/events
+ * extension adds these so connected clients can render the buy CTA + the
+ * "X tickets remaining" badge without an extra REST hop. Absent when the
+ * event was published by a non-AIO client.
+ */
+export interface TicketTags {
+  /** Remaining capacity. Undefined means unlimited. */
+  available?: number
+  /** Running paid-count. */
+  sold: number
+  /** Price per ticket in the event's `currency`. */
+  price: number
+  /** Currency string (e.g. 'sat', 'sats', 'USD'). */
+  currency: string
+  /** Whether the organizer enabled fiat checkout. */
+  allowFiat: boolean
+  /** Fiat settle currency when allowFiat is true. */
+  fiatCurrency?: string
+}
+
 /**
  * Parsed NIP-52 date-based calendar event (kind 31922)
  */
@@ -36,6 +57,7 @@ export interface CalendarDateEvent {
   references: string[]
   id: string
   createdAt: number
+  ticket?: TicketTags
 }
 
 /**
@@ -59,6 +81,7 @@ export interface CalendarTimeEvent {
   references: string[]
   id: string
   createdAt: number
+  ticket?: TicketTags
 }
 
 export interface Participant {
@@ -96,6 +119,35 @@ function getTagValues(tags: string[][], tagName: string): string[] {
   return tags.filter(t => t[0] === tagName).map(t => t[1])
 }
 
+/**
+ * Parse the AIO ticket_* tags off a NIP-52 calendar event. Returns
+ * undefined when the event carries no ticket info (e.g. an event
+ * published by a non-AIO client or a non-ticketed AIO event — though
+ * the latter doesn't currently exist since every aiolabs/events row
+ * has a price + currency).
+ *
+ * `tickets_currency` is the discriminator: when absent, the event has
+ * no inventory metadata and the buy UI stays hidden.
+ */
+function parseTicketTags(tags: string[][]): TicketTags | undefined {
+  const currency = getTagValue(tags, 'tickets_currency')
+  if (!currency) return undefined
+
+  const availableStr = getTagValue(tags, 'tickets_available')
+  const soldStr = getTagValue(tags, 'tickets_sold')
+  const priceStr = getTagValue(tags, 'tickets_price')
+  const allowFiatStr = getTagValue(tags, 'tickets_allow_fiat')
+
+  return {
+    available: availableStr != null ? Number(availableStr) : undefined,
+    sold: soldStr != null ? Number(soldStr) : 0,
+    price: priceStr != null ? Number(priceStr) : 0,
+    currency,
+    allowFiat: allowFiatStr === 'true',
+    fiatCurrency: getTagValue(tags, 'tickets_fiat_currency'),
+  }
+}
+
 /**
  * Parse a NIP-52 start/end tag value to a unix timestamp in seconds.
  * Handles: unix seconds, unix milliseconds, and ISO date strings.
@@ -166,6 +218,7 @@ export function parseCalendarTimeEvent(event: NostrEvent): CalendarTimeEvent | n
     references: getTagValues(event.tags, 'r'),
     id: event.id,
     createdAt: event.created_at,
+    ticket: parseTicketTags(event.tags),
   }
 }
 
@@ -213,6 +266,7 @@ export function parseCalendarDateEvent(event: NostrEvent): CalendarDateEvent | n
     references: getTagValues(event.tags, 'r'),
     id: event.id,
     createdAt: event.created_at,
+    ticket: parseTicketTags(event.tags),
   }
 }
 
-- 
2.53.0


From fd78a915a665e703575bef648cec52077a01c133 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 20:42:23 +0200
Subject: [PATCH 02/13] feat(activities): useOwnedTickets composable +
 ActivityCard ticket badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Module-level singleton so the badge on every ActivityCard, the
owned-tickets section on ActivityDetailPage, and the (forthcoming)
"My tickets" filter chip on the activity feed all share one fetch
of the user's tickets rather than each instance hitting the
backend.

useOwnedTickets exposes:
- ticketsByActivity: Map<activityId, ActivityTicket[]> for O(1)
  lookup from the card/detail surfaces
- ownedActivityIds: Set used by the feed filter
- paidCount(id) / getTickets(id) for ergonomic per-activity reads
- refresh() for consumers that just mutated the user's ticket set
  (a successful purchase) to update every surface atomically

Auto-loads on first use after auth is ready, re-fetches when the
current user id changes (login/logout/switch).

ActivityCard grows a primary-colored "You have N tickets" row that
sits next to the existing "X tickets remaining" line — buyer can
see at a glance whether they've already bought in for any activity
in the feed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../activities/components/ActivityCard.vue    |  20 +++-
 .../activities/composables/useOwnedTickets.ts | 113 ++++++++++++++++++
 2 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/activities/composables/useOwnedTickets.ts

diff --git a/src/modules/activities/components/ActivityCard.vue b/src/modules/activities/components/ActivityCard.vue
index b93d20a..d16c376 100644
--- a/src/modules/activities/components/ActivityCard.vue
+++ b/src/modules/activities/components/ActivityCard.vue
@@ -4,9 +4,10 @@ import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
 import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { MapPin, Calendar, Ticket, User } from 'lucide-vue-next'
+import { MapPin, Calendar, Ticket, User, CheckCircle2 } from 'lucide-vue-next'
 import BookmarkButton from './BookmarkButton.vue'
 import { useDateLocale } from '../composables/useDateLocale'
+import { useOwnedTickets } from '../composables/useOwnedTickets'
 import type { Activity } from '../types/activity'
 
 const props = defineProps<{
@@ -19,6 +20,9 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const { dateLocale } = useDateLocale()
+const { paidCount } = useOwnedTickets()
+
+const ownedCount = computed(() => paidCount(props.activity.id))
 
 const dateDisplay = computed(() => {
   const a = props.activity
@@ -173,6 +177,20 @@ const placeholderBg = computed(() => {
             {{ t('activities.detail.soldOut') }}
           </span>
         </div>
+
+        <!-- Owned tickets — shown when the current user holds at
+             least one paid ticket for this activity. Sits next to
+             the availability line so the buyer can see at a glance
+             whether they've already bought in. -->
+        <div
+          v-if="ownedCount > 0"
+          class="flex items-center gap-1.5 text-sm text-primary"
+        >
+          <CheckCircle2 class="w-3.5 h-3.5 shrink-0" />
+          <span>
+            {{ t('activities.detail.ticketsOwned', { count: ownedCount }, ownedCount) }}
+          </span>
+        </div>
       </div>
     </CardContent>
   </Card>
diff --git a/src/modules/activities/composables/useOwnedTickets.ts b/src/modules/activities/composables/useOwnedTickets.ts
new file mode 100644
index 0000000..5ea5d44
--- /dev/null
+++ b/src/modules/activities/composables/useOwnedTickets.ts
@@ -0,0 +1,113 @@
+import { computed, ref, watch } from 'vue'
+import { useAuth } from '@/composables/useAuthService'
+import { injectService, SERVICE_TOKENS } from '@/core/di-container'
+import type { TicketApiService } from '../services/TicketApiService'
+import type { ActivityTicket } from '../types/ticket'
+
+/**
+ * Module-level singleton: owned-ticket lookup keyed by activity id
+ * (== LNbits event id == NIP-52 d-tag, all the same string by
+ * extension contract). Lives at module scope so every <ActivityCard>
+ * + the detail page + the feed filter share ONE underlying fetch
+ * instead of each instance hitting the API.
+ *
+ * Auto-loads on first use after auth is ready, and re-loads when
+ * the current user changes (login/logout). Consumers that mutate the
+ * user's ticket set (e.g. a successful purchase) call `refresh()`
+ * directly so every surface reading this composable updates
+ * atomically.
+ */
+
+const tickets = ref<ActivityTicket[]>([])
+const isLoading = ref(false)
+const error = ref<Error | null>(null)
+let hasAutoLoaded = false
+let lastLoadedUserId: string | null = null
+
+async function fetchTickets(): Promise<void> {
+  const { isAuthenticated, currentUser } = useAuth()
+  if (!isAuthenticated.value || !currentUser.value) {
+    tickets.value = []
+    lastLoadedUserId = null
+    return
+  }
+
+  const ticketApi = injectService(SERVICE_TOKENS.TICKET_API) as TicketApiService
+  const lnbitsAPI = injectService(SERVICE_TOKENS.LNBITS_API) as any
+  const accessToken = lnbitsAPI?.getAccessToken?.() || ''
+
+  isLoading.value = true
+  error.value = null
+  try {
+    tickets.value = await ticketApi.fetchUserTickets(currentUser.value.id, accessToken)
+    lastLoadedUserId = currentUser.value.id
+  } catch (e) {
+    error.value = e instanceof Error ? e : new Error(String(e))
+    tickets.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const ticketsByActivity = computed<Map<string, ActivityTicket[]>>(() => {
+  const m = new Map<string, ActivityTicket[]>()
+  for (const ticket of tickets.value) {
+    const existing = m.get(ticket.activityId)
+    if (existing) {
+      existing.push(ticket)
+    } else {
+      m.set(ticket.activityId, [ticket])
+    }
+  }
+  return m
+})
+
+const ownedActivityIds = computed<Set<string>>(() => {
+  const s = new Set<string>()
+  for (const ticket of tickets.value) {
+    if (ticket.paid) s.add(ticket.activityId)
+  }
+  return s
+})
+
+function getTickets(activityId: string): ActivityTicket[] {
+  return ticketsByActivity.value.get(activityId) ?? []
+}
+
+function paidCount(activityId: string): number {
+  return getTickets(activityId).filter(t => t.paid).length
+}
+
+export function useOwnedTickets() {
+  const { isAuthenticated, currentUser } = useAuth()
+
+  // First call kicks off the initial load. Subsequent calls just
+  // attach to the shared state.
+  if (!hasAutoLoaded) {
+    hasAutoLoaded = true
+    fetchTickets()
+
+    // Re-fetch when the current user changes (login / logout /
+    // account switch). Compares against the last-fetched user id
+    // so we don't re-fetch when other auth fields update (e.g.
+    // metadata refresh) without the user id changing.
+    watch(
+      () => currentUser.value?.id ?? null,
+      (id) => {
+        if (id !== lastLoadedUserId) fetchTickets()
+      },
+    )
+  }
+
+  return {
+    tickets,
+    ticketsByActivity,
+    ownedActivityIds,
+    getTickets,
+    paidCount,
+    refresh: fetchTickets,
+    isLoading,
+    error,
+    isAuthenticated,
+  }
+}
-- 
2.53.0


From 5589bb3e67c76a0e0113a203e6d93a7dd601c6c1 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 20:44:15 +0200
Subject: [PATCH 03/13] feat(activities): purchase + owned-tickets section on
 ActivityDetailPage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Until now the Purchase button only existed on EventsPage (the
LNbits-sourced listing). Activities sourced from Nostr relays had
no buy path at all. Now that calendar events carry the AIO
tickets_* tags (aiolabs/events#15), the detail page can wire the
existing PurchaseTicketDialog from any activity that has ticketInfo.

Two new blocks appear above the Organizer card when the activity
is ticketed (ticketInfo set):

- Owned-tickets section (primary-tinted card): shown when the
  buyer holds at least one paid ticket. Lists ticket IDs + a
  "View in My Tickets" link.
- Buy ticket CTA: shown when remaining capacity allows. Label
  switches to "Buy another ticket" when the user already owns at
  least one. Price/currency rendered inline so the user knows the
  charge before opening the dialog. A Sold-out message replaces
  the button when available === 0 and the user has no owned
  tickets.

Activity → PurchaseTicketDialog event-shape mapping lives in a
computed so the dialog never receives a partial event. The dialog
itself was untouched (it's the same one EventsPage uses); the
detail page just refreshes useOwnedTickets when the dialog closes
so the badge / section updates immediately after a Lightning
purchase resolves. The inventory side (tickets_available /
tickets_sold counters) updates automatically via the relay
republish from the events extension — no manual refresh needed.

Unauth users get a toast pointing them at login instead of opening
the dialog into a "Login required" state.

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

diff --git a/src/modules/activities/views/ActivityDetailPage.vue b/src/modules/activities/views/ActivityDetailPage.vue
index 1929ca2..c347363 100644
--- a/src/modules/activities/views/ActivityDetailPage.vue
+++ b/src/modules/activities/views/ActivityDetailPage.vue
@@ -8,15 +8,18 @@ import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import {
-  Calendar, MapPin, ArrowLeft, Pencil,
+  Calendar, MapPin, ArrowLeft, Pencil, Ticket, CheckCircle2,
 } from 'lucide-vue-next'
 import { useActivityDetail } from '../composables/useActivityDetail'
 import BookmarkButton from '../components/BookmarkButton.vue'
 import RSVPButton from '../components/RSVPButton.vue'
 import OrganizerCard from '../components/OrganizerCard.vue'
+import PurchaseTicketDialog from '../components/PurchaseTicketDialog.vue'
 import { NIP52_KINDS } from '../types/nip52'
 import { useAuth } from '@/composables/useAuthService'
 import { useActivitiesStore } from '../stores/activities'
+import { useOwnedTickets } from '../composables/useOwnedTickets'
+import { toastService } from '@/core/services/ToastService'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import type { TicketApiService } from '../services/TicketApiService'
 import type { TicketedEvent } from '../types/ticket'
@@ -94,6 +97,56 @@ const categoryLabel = computed(() => {
 function goBack() {
   router.push({ name: 'activities' })
 }
+
+// --- Ticket purchase + owned-tickets surface ----------------------
+
+const { getTickets, paidCount, refresh: refreshOwnedTickets } = useOwnedTickets()
+
+const ownedTicketsForActivity = computed(() => getTickets(activityId))
+const ownedPaidCount = computed(() => paidCount(activityId))
+
+const purchaseEvent = computed(() => {
+  const a = activity.value
+  if (!a || !a.ticketInfo) return null
+  return {
+    id: a.id,
+    name: a.title,
+    price_per_ticket: a.ticketInfo.price,
+    currency: a.ticketInfo.currency,
+    allow_fiat: a.ticketInfo.allowFiat,
+    fiat_currency: a.ticketInfo.fiatCurrency,
+  }
+})
+
+// available === undefined → unlimited capacity, button always shown
+// available === 0          → sold out, button hidden
+// available > 0            → button shown
+const canBuyTicket = computed(() => {
+  const info = activity.value?.ticketInfo
+  if (!info) return false
+  return info.available === undefined || info.available > 0
+})
+
+const showPurchaseDialog = ref(false)
+
+function openPurchaseDialog() {
+  if (!isAuthenticated.value) {
+    toastService.info('Log in to buy tickets')
+    return
+  }
+  showPurchaseDialog.value = true
+}
+
+// Re-fetch the user's tickets when the purchase dialog closes (the
+// buyer may have just paid). The inventory side updates automatically
+// via the relay republish from the events extension.
+watch(showPurchaseDialog, (open) => {
+  if (!open) refreshOwnedTickets()
+})
+
+function goToMyTickets() {
+  router.push('/my-tickets')
+}
 </script>
 
 <template>
@@ -219,6 +272,67 @@ function goBack() {
         :kind="activity.type === 'date' ? NIP52_KINDS.CALENDAR_DATE_EVENT : NIP52_KINDS.CALENDAR_TIME_EVENT"
       />
 
+      <!-- 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). -->
+      <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"
+        >
+          <div class="flex items-center gap-2 text-sm font-medium text-foreground">
+            <CheckCircle2 class="w-4 h-4 text-primary" />
+            {{ 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">
+            <Ticket class="w-4 h-4" />
+            {{ t('activities.detail.viewMyTickets', 'View in My Tickets') }}
+          </Button>
+        </div>
+
+        <div v-if="canBuyTicket">
+          <Button
+            class="w-full gap-1.5"
+            size="lg"
+            @click="openPurchaseDialog"
+          >
+            <Ticket class="w-4 h-4" />
+            {{ ownedPaidCount > 0
+                ? t('activities.detail.buyAnotherTicket', 'Buy another ticket')
+                : t('activities.detail.buyTicket', 'Buy ticket') }}
+            <span class="ml-2 opacity-80 font-normal">
+              {{ activity.ticketInfo.price === 0
+                  ? t('activities.detail.free')
+                  : `${activity.ticketInfo.price} ${activity.ticketInfo.currency}` }}
+            </span>
+          </Button>
+        </div>
+        <p
+          v-else-if="ownedPaidCount === 0"
+          class="text-sm text-destructive text-center"
+        >
+          {{ t('activities.detail.soldOut') }}
+        </p>
+      </div>
+
+      <PurchaseTicketDialog
+        v-if="purchaseEvent"
+        :is-open="showPurchaseDialog"
+        :event="purchaseEvent"
+        @update:is-open="showPurchaseDialog = $event"
+      />
+
       <!-- Organizer -->
       <div class="bg-muted/50 rounded-lg p-4">
         <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
-- 
2.53.0


From ea4e1960f50eef7c639c4d7ddd25ed44b27da5ca Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 20:46:42 +0200
Subject: [PATCH 04/13] feat(activities): "My tickets" filter chip on
 ActivitiesPage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A new filter chip sits below the temporal pills, hidden when the
user is logged out. Clicking it narrows the feed to activities the
user holds at least one paid ticket for — intersecting the
existing filter pipeline (temporal / categories / date) with the
ownedActivityIds set from useOwnedTickets.

The coupling lives in useActivities (it already orchestrates the
data + filter pipeline). useActivityFilters stays free of ticket
fetching; it just carries the boolean state. resetFilters clears
the chip alongside the other filters, and hasActiveFilters lights
up when it's on so the "Clear all" affordance is visible.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../activities/composables/useActivities.ts   |  7 +++++-
 .../composables/useActivityFilters.ts         | 17 +++++++++++++-
 .../activities/views/ActivitiesPage.vue       | 22 ++++++++++++++++++-
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/modules/activities/composables/useActivities.ts b/src/modules/activities/composables/useActivities.ts
index 78b1bb5..67b49b5 100644
--- a/src/modules/activities/composables/useActivities.ts
+++ b/src/modules/activities/composables/useActivities.ts
@@ -8,6 +8,7 @@ import type { TicketedEvent } from '../types/ticket'
 import { ticketedEventToActivity } from '../types/activity'
 import { useActivitiesStore } from '../stores/activities'
 import { useActivityFilters } from './useActivityFilters'
+import { useOwnedTickets } from './useOwnedTickets'
 
 /**
  * Main composable for activities discovery.
@@ -17,6 +18,7 @@ export function useActivities() {
   const store = useActivitiesStore()
   const filters = useActivityFilters()
   const { isAuthenticated, currentUser } = useAuth()
+  const { ownedActivityIds } = useOwnedTickets()
 
   const isSubscribed = ref(false)
   const subscriptionError = ref<string | null>(null)
@@ -70,7 +72,10 @@ export function useActivities() {
     const all = store.activities.sort(
       (a, b) => a.startDate.getTime() - b.startDate.getTime()
     )
-    return filters.applyFilters(all)
+    const filtered = filters.applyFilters(all)
+    if (!filters.onlyOwnedTickets.value) return filtered
+    const owned = ownedActivityIds.value
+    return filtered.filter(a => owned.has(a.id))
   })
 
   /**
diff --git a/src/modules/activities/composables/useActivityFilters.ts b/src/modules/activities/composables/useActivityFilters.ts
index ab3624b..60bcb5e 100644
--- a/src/modules/activities/composables/useActivityFilters.ts
+++ b/src/modules/activities/composables/useActivityFilters.ts
@@ -15,6 +15,13 @@ export function useActivityFilters() {
   const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
   const selectedCategories = ref<ActivityCategory[]>([])
   const selectedDate = ref<Date | undefined>(undefined)
+  /**
+   * When true, the feed is narrowed to activities the current user
+   * holds at least one paid ticket for. Crossed with the
+   * `ownedActivityIds` set from useOwnedTickets in useActivities
+   * (this composable stays free of ticket fetching).
+   */
+  const onlyOwnedTickets = ref(false)
 
   const filters = computed<ActivityFilters>(() => ({
     temporal: temporal.value,
@@ -81,12 +88,18 @@ export function useActivityFilters() {
     temporal.value = DEFAULT_FILTERS.temporal
     selectedCategories.value = []
     selectedDate.value = undefined
+    onlyOwnedTickets.value = false
+  }
+
+  function toggleOwnedTickets() {
+    onlyOwnedTickets.value = !onlyOwnedTickets.value
   }
 
   const hasActiveFilters = computed(() =>
     temporal.value !== 'all' ||
     selectedCategories.value.length > 0 ||
-    selectedDate.value !== undefined
+    selectedDate.value !== undefined ||
+    onlyOwnedTickets.value
   )
 
   return {
@@ -94,6 +107,7 @@ export function useActivityFilters() {
     temporal,
     selectedCategories,
     selectedDate,
+    onlyOwnedTickets,
     filters,
     hasActiveFilters,
 
@@ -103,6 +117,7 @@ export function useActivityFilters() {
     selectDate,
     toggleCategory,
     clearCategories,
+    toggleOwnedTickets,
     resetFilters,
   }
 }
diff --git a/src/modules/activities/views/ActivitiesPage.vue b/src/modules/activities/views/ActivitiesPage.vue
index 684aa97..d685a11 100644
--- a/src/modules/activities/views/ActivitiesPage.vue
+++ b/src/modules/activities/views/ActivitiesPage.vue
@@ -8,8 +8,9 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { SlidersHorizontal, ChevronDown } from 'lucide-vue-next'
+import { SlidersHorizontal, ChevronDown, Ticket } from 'lucide-vue-next'
 import { useActivities } from '../composables/useActivities'
+import { useAuth } from '@/composables/useAuthService'
 import ActivitySearchOverlay from '../components/ActivitySearchOverlay.vue'
 import TemporalFilterBar from '../components/TemporalFilterBar.vue'
 import CategoryFilterBar from '../components/CategoryFilterBar.vue'
@@ -28,14 +29,18 @@ const {
   selectedCategories,
   hasActiveFilters,
   selectedDate,
+  onlyOwnedTickets,
   selectDate,
   setTemporal,
   toggleCategory,
   clearCategories,
+  toggleOwnedTickets,
   resetFilters,
   subscribe,
 } = useActivities()
 
+const { isAuthenticated } = useAuth()
+
 const filtersOpen = ref(false)
 
 onMounted(() => {
@@ -74,6 +79,21 @@ function handleSelectActivity(activity: Activity) {
       <TemporalFilterBar :model-value="temporal" @update:model-value="setTemporal" />
     </div>
 
+    <!-- "My tickets" filter chip — narrows the feed to activities
+         the user holds at least one paid ticket for. Hidden when
+         logged out (no tickets to filter on). -->
+    <div v-if="isAuthenticated" class="mb-4">
+      <Button
+        :variant="onlyOwnedTickets ? 'default' : 'outline'"
+        size="sm"
+        class="gap-1.5"
+        @click="toggleOwnedTickets"
+      >
+        <Ticket class="w-3.5 h-3.5" />
+        {{ t('activities.filters.myTickets', 'My tickets') }}
+      </Button>
+    </div>
+
     <!-- Category filters (collapsible) -->
     <Collapsible v-model:open="filtersOpen" class="mb-6">
       <CollapsibleTrigger as-child>
-- 
2.53.0


From 4dcee143fdb2ece0e0f409fc9b27ae8121ddbeed Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 21:11:05 +0200
Subject: [PATCH 05/13] fix(activities): i18n keys + retry useOwnedTickets
 after transient failure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

i18n: add the missing keys the ticket purchase + owned-tickets
surfaces use across en/es/fr — activities.detail.{buyTicket,
buyAnotherTicket, viewMyTickets, ticketsOwned, unlimitedTickets}
and activities.filters.myTickets. Without these the runtime fell
back to the literal key strings + spammed [intlify] warnings; the
filter chip rendered the bare key text on logged-in sessions.

ticketsOwned uses i18n pluralization so "You have 1 ticket" vs
"You have 5 tickets" both come out correct.

useOwnedTickets: the hasAutoLoaded guard prevented retries after
a transient backend failure (e.g. an LNbits restart mid-fetch).
The composable would stay stuck with tickets = [] forever, so the
buyer landing on a fresh detail page right after a transient error
saw no badges anywhere. Detect the "previous load didn't actually
hydrate" state (lastLoadedUserId still null while authenticated)
and retry on the next useOwnedTickets() call.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/i18n/locales/en.ts                            |  6 ++++++
 src/i18n/locales/es.ts                            |  6 ++++++
 src/i18n/locales/fr.ts                            |  6 ++++++
 src/i18n/types.ts                                 |  6 ++++++
 .../activities/composables/useOwnedTickets.ts     | 15 +++++++++++++--
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index daeb845..38bb64a 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -57,6 +57,7 @@ const messages: LocaleMessages = {
       tomorrow: 'Tomorrow',
       thisWeek: 'This Week',
       thisMonth: 'This Month',
+      myTickets: 'My tickets',
     },
     categories: {
       concert: 'Concert',
@@ -96,6 +97,11 @@ const messages: LocaleMessages = {
       when: 'When',
       tickets: 'Tickets',
       ticketsAvailable: '{count} tickets available',
+      ticketsOwned: 'You have {count} ticket | You have {count} tickets',
+      unlimitedTickets: 'Unlimited tickets',
+      buyTicket: 'Buy ticket',
+      buyAnotherTicket: 'Buy another ticket',
+      viewMyTickets: 'View in My Tickets',
       soldOut: 'Sold Out',
       free: 'Free',
     },
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index 76a5f56..b2603e9 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -57,6 +57,7 @@ const messages: LocaleMessages = {
       tomorrow: 'Mañana',
       thisWeek: 'Esta semana',
       thisMonth: 'Este mes',
+      myTickets: 'Mis boletos',
     },
     categories: {
       concert: 'Concierto',
@@ -96,6 +97,11 @@ const messages: LocaleMessages = {
       when: 'Cuándo',
       tickets: 'Boletos',
       ticketsAvailable: '{count} boletos disponibles',
+      ticketsOwned: 'Tienes {count} boleto | Tienes {count} boletos',
+      unlimitedTickets: 'Boletos ilimitados',
+      buyTicket: 'Comprar boleto',
+      buyAnotherTicket: 'Comprar otro boleto',
+      viewMyTickets: 'Ver en Mis boletos',
       soldOut: 'Agotado',
       free: 'Gratis',
     },
diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts
index 19b8ece..388f602 100644
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -57,6 +57,7 @@ const messages: LocaleMessages = {
       tomorrow: 'Demain',
       thisWeek: 'Cette semaine',
       thisMonth: 'Ce mois-ci',
+      myTickets: 'Mes billets',
     },
     categories: {
       concert: 'Concert',
@@ -96,6 +97,11 @@ const messages: LocaleMessages = {
       when: 'Quand',
       tickets: 'Billets',
       ticketsAvailable: '{count} billets disponibles',
+      ticketsOwned: 'Vous avez {count} billet | Vous avez {count} billets',
+      unlimitedTickets: 'Billets illimités',
+      buyTicket: 'Acheter un billet',
+      buyAnotherTicket: 'Acheter un autre billet',
+      viewMyTickets: 'Voir dans Mes billets',
       soldOut: 'Épuisé',
       free: 'Gratuit',
     },
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index 0ca44dd..d44f236 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -58,6 +58,7 @@ export interface LocaleMessages {
       tomorrow: string
       thisWeek: string
       thisMonth: string
+      myTickets: string
     }
     categories: Record<string, string>
     detail: {
@@ -71,6 +72,11 @@ export interface LocaleMessages {
       when: string
       tickets: string
       ticketsAvailable: string
+      ticketsOwned: string
+      unlimitedTickets: string
+      buyTicket: string
+      buyAnotherTicket: string
+      viewMyTickets: string
       soldOut: string
       free: string
     }
diff --git a/src/modules/activities/composables/useOwnedTickets.ts b/src/modules/activities/composables/useOwnedTickets.ts
index 5ea5d44..e540fb3 100644
--- a/src/modules/activities/composables/useOwnedTickets.ts
+++ b/src/modules/activities/composables/useOwnedTickets.ts
@@ -81,8 +81,8 @@ function paidCount(activityId: string): number {
 export function useOwnedTickets() {
   const { isAuthenticated, currentUser } = useAuth()
 
-  // First call kicks off the initial load. Subsequent calls just
-  // attach to the shared state.
+  // First call kicks off the initial load + sets up the auth-change
+  // watcher. Subsequent calls attach to the shared state.
   if (!hasAutoLoaded) {
     hasAutoLoaded = true
     fetchTickets()
@@ -97,6 +97,17 @@ export function useOwnedTickets() {
         if (id !== lastLoadedUserId) fetchTickets()
       },
     )
+  } else if (
+    !isLoading.value &&
+    isAuthenticated.value &&
+    currentUser.value &&
+    lastLoadedUserId !== currentUser.value.id
+  ) {
+    // A previous load failed (lastLoadedUserId stayed null) or the
+    // user changed identity while the singleton was idle. Retry —
+    // the buyer landing on a fresh detail page after a transient
+    // backend hiccup shouldn't be stuck with empty tickets.
+    fetchTickets()
   }
 
   return {
-- 
2.53.0


From a116357c57d529dba781a17d9a7984fd568076d3 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 22:09:44 +0200
Subject: [PATCH 06/13] feat(activities): multi-ticket purchase +
 restaurant-style invoice screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two related UX changes for the buy flow:

1. Quantity selector in PurchaseTicketDialog (1-10). The total
   line updates as the buyer steps the count up/down; the fiat
   conversion preview reflects the totalled amount. Backend caps
   the upper bound (HTTP 400 if anyone tries to bypass via curl).

2. Restaurant-style invoice screen: when the invoice is generated,
   we drop the "single Pay-with-Wallet button" auto-pay path and
   show the QR + amount + Copy + "Open in wallet" together,
   restaurant OrderInvoiceCard-style. Below that, a "Pay from my
   LNbits wallet" button appears when the buyer is signed in with
   a funded wallet — same screen, two paths, buyer picks at the
   moment they see the invoice. The poll already started fires on
   either path.

useTicketPurchase exposes `payCurrentInvoiceWithWallet()` so the
dialog can trigger the wallet-pay path explicitly without going
through purchaseTicketForEvent again. purchaseTicketForEvent no
longer auto-pays — it just creates the invoice + starts polling.

CreateTicketRequest grows `quantity?` (1..10) and requestTicket
forwards it. Quantity is only sent when > 1 so existing flows
stay byte-identical on the wire.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/PurchaseTicketDialog.vue       | 215 ++++++++++++++----
 .../composables/useTicketPurchase.ts          |  46 ++--
 .../activities/services/TicketApiService.ts   |   3 +
 src/modules/activities/types/ticket.ts        |   2 +
 4 files changed, 207 insertions(+), 59 deletions(-)

diff --git a/src/modules/activities/components/PurchaseTicketDialog.vue b/src/modules/activities/components/PurchaseTicketDialog.vue
index 22eb1b8..b162a45 100644
--- a/src/modules/activities/components/PurchaseTicketDialog.vue
+++ b/src/modules/activities/components/PurchaseTicketDialog.vue
@@ -7,7 +7,7 @@ import { useTicketPurchase } from '../composables/useTicketPurchase'
 import { useAuth } from '@/composables/useAuthService'
 import { injectService, SERVICE_TOKENS } from '@/core/di-container'
 import type { TicketApiService } from '../services/TicketApiService'
-import { User, Wallet, CreditCard, Zap, Ticket, ExternalLink, Landmark } from 'lucide-vue-next'
+import { User, Wallet, CreditCard, Zap, Ticket, ExternalLink, Landmark, Minus, Plus, Copy, Check, Loader2 } from 'lucide-vue-next'
 import { formatEventPrice, formatWalletBalance } from '@/lib/utils/formatting'
 import PaymentMethodSelector, {
   type PaymentMethod as PaymentMethodEntry,
@@ -41,6 +41,7 @@ const {
   isLoading,
   error,
   paymentHash,
+  paymentRequest,
   qrCode,
   isPaymentPending,
   isPayingWithWallet,
@@ -48,6 +49,7 @@ const {
   userWallets,
   hasWalletWithBalance,
   purchaseTicketForEvent,
+  payCurrentInvoiceWithWallet,
   handleOpenLightningWallet,
   resetPaymentState,
   cleanup,
@@ -56,6 +58,31 @@ const {
   showTicketQR
 } = useTicketPurchase()
 
+const MAX_QUANTITY = 10
+const quantity = ref(1)
+const copiedInvoice = ref(false)
+
+function decreaseQuantity() {
+  if (quantity.value > 1) quantity.value -= 1
+}
+function increaseQuantity() {
+  if (quantity.value < MAX_QUANTITY) quantity.value += 1
+}
+
+const totalPrice = computed(() => props.event.price_per_ticket * quantity.value)
+
+async function copyInvoice() {
+  if (!paymentRequest.value) return
+  try {
+    await navigator.clipboard.writeText(paymentRequest.value)
+    copiedInvoice.value = true
+    setTimeout(() => (copiedInvoice.value = false), 1500)
+  } catch {
+    // Older browsers / insecure contexts; the Open-in-wallet button
+    // still works as a fallback.
+  }
+}
+
 const { providers, providerMeta } = useFiatProviders()
 const { convert } = usePriceConversion()
 
@@ -147,10 +174,13 @@ async function handlePurchase() {
   const method = selectedMethod.value
   if (!method) return
 
-  // Lightning path: existing composable handles QR + wallet auto-pay.
+  // Lightning path: the composable just creates the invoice + starts
+  // polling. The buyer picks "Pay with my LNbits wallet" or "Open in
+  // external wallet" on the invoice screen (restaurant pattern), so
+  // no auto-pay here.
   if (method.rail === 'lightning') {
     try {
-      await purchaseTicketForEvent(props.event.id)
+      await purchaseTicketForEvent(props.event.id, { quantity: quantity.value })
     } catch (err) {
       console.error('Error purchasing ticket:', err)
     }
@@ -177,7 +207,11 @@ async function handlePurchase() {
       props.event.id,
       userId,
       accessToken,
-      { paymentMethod: 'fiat', fiatProvider: method.provider },
+      {
+        paymentMethod: 'fiat',
+        fiatProvider: method.provider,
+        quantity: quantity.value,
+      },
     )
     if (!invoice.isFiat || !invoice.fiatPaymentRequest) {
       fiatError.value = 'Fiat provider did not return a checkout URL.'
@@ -206,6 +240,8 @@ function handleClose() {
   fiatRedirectUrl.value = null
   fiatProviderLabel.value = null
   fiatError.value = null
+  quantity.value = 1
+  copiedInvoice.value = false
 }
 
 onUnmounted(() => {
@@ -297,18 +333,50 @@ onUnmounted(() => {
             <CreditCard class="w-4 h-4 text-muted-foreground" />
             <span class="text-sm font-medium">Payment Details:</span>
           </div>
+
+          <!-- Quantity selector — backend caps at 10. One invoice for
+               the whole purchase, one ticket row representing N seats. -->
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-muted-foreground">Tickets:</span>
+            <div class="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                class="h-7 w-7"
+                :disabled="quantity <= 1"
+                @click="decreaseQuantity"
+              >
+                <Minus class="h-3.5 w-3.5" />
+              </Button>
+              <span class="w-6 text-center text-sm font-medium">{{ quantity }}</span>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                class="h-7 w-7"
+                :disabled="quantity >= MAX_QUANTITY"
+                @click="increaseQuantity"
+              >
+                <Plus class="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+
           <div class="space-y-1">
             <div class="flex justify-between">
               <span class="text-sm text-muted-foreground">Event:</span>
               <span class="text-sm font-medium">{{ event.name }}</span>
             </div>
             <div class="flex justify-between">
-              <span class="text-sm text-muted-foreground">Price:</span>
-              <span class="text-sm font-medium">{{ formatEventPrice(event.price_per_ticket, event.currency) }}</span>
+              <span class="text-sm text-muted-foreground">
+                {{ quantity > 1 ? `${quantity} × ${formatEventPrice(event.price_per_ticket, event.currency)}` : 'Price' }}
+              </span>
+              <span class="text-sm font-medium">{{ formatEventPrice(totalPrice, event.currency) }}</span>
             </div>
             <PriceConversionPreview
               v-if="canChooseFiat && isPriceInSats && event.fiat_currency"
-              :amount="event.price_per_ticket"
+              :amount="totalPrice"
               from="sat"
               :to="event.fiat_currency"
               prefix="Equivalent ~"
@@ -363,52 +431,109 @@ onUnmounted(() => {
           :disabled="isLoading || isFiatPending || (selectedMethod?.rail === 'lightning' && !canPurchase)"
           class="w-full"
         >
-          <span v-if="isLoading || isFiatPending" class="animate-spin mr-2">⚡</span>
-          <span v-else-if="selectedMethod?.rail === 'fiat'" class="flex items-center gap-2">
-            <CreditCard class="w-4 h-4" />
+          <Loader2 v-if="isLoading || isFiatPending" class="w-4 h-4 mr-2 animate-spin" />
+          <template v-else-if="selectedMethod?.rail === 'fiat'">
+            <CreditCard class="w-4 h-4 mr-2" />
             Continue to {{ selectedMethod.label }} checkout
-          </span>
-          <span v-else-if="hasWalletWithBalance" class="flex items-center gap-2">
-            <Zap class="w-4 h-4" />
-            Pay with Wallet
-          </span>
-          <span v-else>Generate Payment Request</span>
+          </template>
+          <template v-else>
+            <Zap class="w-4 h-4 mr-2" />
+            {{ quantity > 1 ? `Get invoice for ${quantity} tickets` : 'Get invoice' }}
+          </template>
         </Button>
       </div>
 
-      <!-- Payment QR Code and Status -->
-      <div v-else-if="paymentHash && !showTicketQR" class="py-4 flex flex-col items-center gap-4">
-        <div class="text-center space-y-2">
-          <h3 class="text-lg font-semibold">Payment Required</h3>
-          <p v-if="isPayingWithWallet" class="text-sm text-muted-foreground">
-            Processing payment with your wallet...
-          </p>
-          <p v-else class="text-sm text-muted-foreground">
-            Scan the QR code with your Lightning wallet to complete the payment
+      <!-- Lightning invoice — restaurant-style. Shows QR + amount,
+           with both pay paths visible at once: tap-to-pay from the
+           LNbits wallet, scan with an external wallet, or hand off
+           via lightning: URI on mobile. Polling fires whichever
+           path the buyer takes. -->
+      <div v-else-if="paymentHash && !showTicketQR" class="py-4 space-y-4">
+        <div class="text-center space-y-1">
+          <h3 class="text-lg font-semibold">Pay the invoice</h3>
+          <p class="text-sm text-muted-foreground">
+            Scan with any Lightning wallet, or tap the button below to
+            pay from your LNbits wallet.
           </p>
         </div>
 
-        <div v-if="!isPayingWithWallet && qrCode" class="bg-muted/50 rounded-lg p-4">
-          <img :src="qrCode" alt="Lightning payment QR code" class="w-64 h-64 mx-auto" />
-        </div>
-
-        <div class="space-y-3 w-full">
-          <Button v-if="!isPayingWithWallet" variant="outline" @click="handleOpenLightningWallet" class="w-full">
-            <Wallet class="w-4 h-4 mr-2" />
-            Open in Lightning Wallet
-          </Button>
-
-          <div v-if="isPaymentPending" class="text-center space-y-2">
-            <div class="flex items-center justify-center gap-2">
-              <div class="animate-spin w-4 h-4 border-2 border-primary border-t-transparent rounded-full"></div>
-              <span class="text-sm text-muted-foreground">
-                {{ isPayingWithWallet ? 'Processing payment...' : 'Waiting for payment...' }}
-              </span>
-            </div>
-            <p class="text-xs text-muted-foreground">
-              Payment will be confirmed automatically once received
-            </p>
+        <!-- QR + amount + copy/open buttons (restaurant
+             OrderInvoiceCard pattern). The QR keeps a white background
+             regardless of theme so phone cameras parse it reliably. -->
+        <div class="bg-muted/50 rounded-lg p-4 space-y-3">
+          <div class="mx-auto w-fit overflow-hidden rounded-lg border border-border bg-white p-2">
+            <img
+              v-if="qrCode"
+              :src="qrCode"
+              alt="Lightning payment QR code"
+              class="block h-56 w-56 sm:h-64 sm:w-64"
+            />
           </div>
+          <div class="flex items-baseline justify-between">
+            <span class="text-xs text-muted-foreground">Amount</span>
+            <span class="font-mono text-sm font-semibold text-primary">
+              {{ formatEventPrice(totalPrice, event.currency) }}
+              <span v-if="quantity > 1" class="text-muted-foreground font-normal">
+                ({{ quantity }} tickets)
+              </span>
+            </span>
+          </div>
+          <div class="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              class="flex-1 font-mono text-xs"
+              @click="copyInvoice"
+            >
+              <Check v-if="copiedInvoice" class="mr-2 h-3.5 w-3.5" />
+              <Copy v-else class="mr-2 h-3.5 w-3.5" />
+              {{ copiedInvoice ? 'Copied' : 'Copy' }}
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              class="flex-1 text-xs"
+              @click="handleOpenLightningWallet"
+            >
+              <Zap class="mr-2 h-3.5 w-3.5" />
+              Open in wallet
+            </Button>
+          </div>
+        </div>
+
+        <!-- LNbits-wallet pay button — only shown when the buyer is
+             logged in with a funded wallet. Same screen as the QR so
+             the user can pick either path without having to back out
+             of the dialog. -->
+        <Button
+          v-if="hasWalletWithBalance"
+          size="lg"
+          class="w-full"
+          :disabled="isPayingWithWallet"
+          @click="payCurrentInvoiceWithWallet"
+        >
+          <Loader2 v-if="isPayingWithWallet" class="mr-2 h-4 w-4 animate-spin" />
+          <Wallet v-else class="mr-2 h-4 w-4" />
+          {{ isPayingWithWallet ? 'Paying…' : 'Pay from my LNbits wallet' }}
+        </Button>
+        <p
+          v-else-if="userWallets.length > 0"
+          class="text-center text-xs text-muted-foreground"
+        >
+          Your LNbits wallet is empty — pay with an external wallet
+          using the QR or "Open in wallet" above.
+        </p>
+
+        <div v-if="isPaymentPending" class="text-center space-y-1">
+          <div class="flex items-center justify-center gap-2">
+            <div class="animate-spin w-4 h-4 border-2 border-primary border-t-transparent rounded-full"></div>
+            <span class="text-sm text-muted-foreground">
+              Waiting for payment…
+            </span>
+          </div>
+          <p class="text-xs text-muted-foreground">
+            Confirmation lands automatically — no need to refresh.
+          </p>
         </div>
       </div>
 
diff --git a/src/modules/activities/composables/useTicketPurchase.ts b/src/modules/activities/composables/useTicketPurchase.ts
index 0145fd9..edeb6da 100644
--- a/src/modules/activities/composables/useTicketPurchase.ts
+++ b/src/modules/activities/composables/useTicketPurchase.ts
@@ -75,7 +75,15 @@ export function useTicketPurchase() {
     }
   }
 
-  async function purchaseTicketForEvent(eventId: string) {
+  /** The event id this composable is currently driving — kept so
+   *  `payCurrentInvoiceWithWallet` and `startPaymentStatusCheck` don't
+   *  have to take it as an argument from the UI. */
+  const currentEventId = ref<string | null>(null)
+
+  async function purchaseTicketForEvent(
+    eventId: string,
+    options: { quantity?: number } = {},
+  ) {
     if (!canPurchase.value || !currentUser.value) {
       throw new Error('User must be authenticated to purchase tickets')
     }
@@ -88,6 +96,7 @@ export function useTicketPurchase() {
       ticketQRCode.value = null
       purchasedTicketId.value = null
       showTicketQR.value = false
+      currentEventId.value = eventId
 
       // Get the invoice via TicketApiService
       const lnbitsAPI = injectService(SERVICE_TOKENS.LNBITS_API) as any
@@ -96,7 +105,8 @@ export function useTicketPurchase() {
       const invoice = await ticketApi.requestTicket(
         eventId,
         currentUser.value!.id,
-        accessToken
+        accessToken,
+        { quantity: options.quantity },
       )
 
       // Backend now returns either a Lightning invoice or a fiat
@@ -119,18 +129,12 @@ export function useTicketPurchase() {
       // Generate QR code for payment
       await generateQRCode(bolt11)
 
-      // Try to pay with wallet if available
-      if (hasWalletWithBalance.value) {
-        try {
-          await payWithWallet(bolt11)
-          await startPaymentStatusCheck(eventId, invoice.paymentHash)
-        } catch (walletError) {
-          console.log('Wallet payment failed, falling back to manual payment:', walletError)
-          await startPaymentStatusCheck(eventId, invoice.paymentHash)
-        }
-      } else {
-        await startPaymentStatusCheck(eventId, invoice.paymentHash)
-      }
+      // Restaurant-style: don't auto-pay. Surface the QR + amount and
+      // let the buyer pick "Pay with my LNbits wallet" vs "Open in
+      // external wallet" on the same screen. The composable just
+      // starts polling so when payment lands (from any path) the UI
+      // advances to the ticket-QR success state.
+      await startPaymentStatusCheck(eventId, invoice.paymentHash)
 
       return invoice
     }, {
@@ -138,6 +142,19 @@ export function useTicketPurchase() {
     })
   }
 
+  /**
+   * Trigger LNbits-wallet payment of the invoice this composable is
+   * currently displaying. Called when the buyer clicks the "Pay from
+   * my LNbits wallet" button on the invoice screen.
+   */
+  async function payCurrentInvoiceWithWallet(): Promise<void> {
+    if (!paymentRequest.value) return
+    await payWithWallet(paymentRequest.value)
+    // Polling is already running from purchaseTicketForEvent — when
+    // the payment lands, it advances to showTicketQR. No need to
+    // restart it here.
+  }
+
   async function startPaymentStatusCheck(eventId: string, hash: string) {
     isPaymentPending.value = true
     let checkInterval: number | null = null
@@ -219,6 +236,7 @@ export function useTicketPurchase() {
 
     // Actions
     purchaseTicketForEvent,
+    payCurrentInvoiceWithWallet,
     handleOpenLightningWallet,
     resetPaymentState,
     cleanup,
diff --git a/src/modules/activities/services/TicketApiService.ts b/src/modules/activities/services/TicketApiService.ts
index b3174a1..6086d51 100644
--- a/src/modules/activities/services/TicketApiService.ts
+++ b/src/modules/activities/services/TicketApiService.ts
@@ -75,6 +75,8 @@ export class TicketApiService {
       promoCode?: string
       refundAddress?: string
       nostrIdentifier?: string
+      /** Number of tickets to buy on this invoice. Backend caps at 10. */
+      quantity?: number
     } = {},
   ): Promise<TicketPurchaseInvoice> {
     const body: CreateTicketRequest = { user_id: userId }
@@ -83,6 +85,7 @@ export class TicketApiService {
     if (options.promoCode) body.promo_code = options.promoCode
     if (options.refundAddress) body.refund_address = options.refundAddress
     if (options.nostrIdentifier) body.nostr_identifier = options.nostrIdentifier
+    if (options.quantity && options.quantity > 1) body.quantity = options.quantity
 
     const data = await this.request(
       `/events/api/v1/tickets/${eventId}`,
diff --git a/src/modules/activities/types/ticket.ts b/src/modules/activities/types/ticket.ts
index bd1985c..85ead95 100644
--- a/src/modules/activities/types/ticket.ts
+++ b/src/modules/activities/types/ticket.ts
@@ -169,4 +169,6 @@ export interface CreateTicketRequest {
   nostr_identifier?: string
   payment_method?: PaymentMethod
   fiat_provider?: string
+  /** Number of tickets on this invoice (backend bounds 1..10). */
+  quantity?: number
 }
-- 
2.53.0


From be7bcd393e4d94ea0eeefbbbf977bad142bcc9ef Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 22:20:51 +0200
Subject: [PATCH 07/13] fix(activities): count seats by extra.quantity across
 all UI surfaces
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Earlier commit landed the backend storing N seats on one row via
extra.quantity (one invoice, one payment, one ticket row), but the
UI kept counting rows instead of seats. A 5-ticket purchase
showed:

  Dialog header: "Purchase a ticket for X for 100 sats"  ← lied
  Success modal: "Ticket purchased!" / one ticket ID    ← lied
  My Tickets / badges: "1 paid ticket"                  ← lied

even though the buyer correctly paid 500 sats and 5 seats were
sold (DB verified: extra.quantity=5, sats_paid=500, event.sold
incremented by 5). The bolt11 invoice amount is cryptographic so
the wallet charge was always right — only the labels were wrong.

Fixes:

- ActivityTicketExtra grows `quantity?: number` (the field already
  on the wire from the backend; just adding it to the type).
- useOwnedTickets exposes `seatsOnRow(ticket)` and `paidCount`
  sums seats (extra.quantity) across rows instead of counting
  rows. ActivityCard's "You have N tickets" badge now reflects
  actual seat ownership.
- useUserTickets.groupedTickets sums seats into paidCount /
  pendingCount / registeredCount so MyTicketsPage groups read
  correctly.
- ActivityDetailPage owned-tickets section adds a `×N` chip on
  rows that represent multiple seats so the buyer can see which
  row covers how many.
- PurchaseTicketDialog header + DialogDescription reflect the
  selected quantity ("Purchase 5 tickets" / "5 tickets for X · 500
  sats"). The success modal switches to "5 tickets purchased!" and
  re-labels the ticket id "Purchase ID (covers all tickets)" so
  the buyer doesn't expect 5 separate ids.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/PurchaseTicketDialog.vue       | 27 +++++++++++++++----
 .../activities/composables/useOwnedTickets.ts | 12 ++++++++-
 .../activities/composables/useUserTickets.ts  | 10 ++++---
 src/modules/activities/types/ticket.ts        |  4 +++
 .../activities/views/ActivityDetailPage.vue   | 13 ++++++---
 5 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/modules/activities/components/PurchaseTicketDialog.vue b/src/modules/activities/components/PurchaseTicketDialog.vue
index b162a45..c746d13 100644
--- a/src/modules/activities/components/PurchaseTicketDialog.vue
+++ b/src/modules/activities/components/PurchaseTicketDialog.vue
@@ -255,10 +255,16 @@ onUnmounted(() => {
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <CreditCard class="w-5 h-5" />
-          Purchase Ticket
+          {{ quantity > 1 ? `Purchase ${quantity} tickets` : 'Purchase ticket' }}
         </DialogTitle>
         <DialogDescription>
-          Purchase a ticket for <strong>{{ event.name }}</strong> for {{ formatEventPrice(event.price_per_ticket, event.currency) }}
+          <span v-if="quantity > 1">
+            {{ quantity }} tickets for <strong>{{ event.name }}</strong> ·
+            {{ formatEventPrice(totalPrice, event.currency) }}
+          </span>
+          <span v-else>
+            Purchase a ticket for <strong>{{ event.name }}</strong> for {{ formatEventPrice(event.price_per_ticket, event.currency) }}
+          </span>
         </DialogDescription>
       </DialogHeader>
 
@@ -540,9 +546,18 @@ onUnmounted(() => {
       <!-- Ticket QR Code (After Successful Purchase) -->
       <div v-else-if="showTicketQR && ticketQRCode" class="py-4 flex flex-col items-center gap-4">
         <div class="text-center space-y-2">
-          <h3 class="text-lg font-semibold text-green-600">Ticket Purchased Successfully!</h3>
+          <h3 class="text-lg font-semibold text-green-600">
+            {{ quantity > 1 ? `${quantity} tickets purchased!` : 'Ticket purchased!' }}
+          </h3>
           <p class="text-sm text-muted-foreground">
-            Your ticket has been purchased and is now available in your tickets area.
+            <span v-if="quantity > 1">
+              {{ quantity }} tickets are now in your tickets area on a
+              single purchase row.
+            </span>
+            <span v-else>
+              Your ticket has been purchased and is now available in
+              your tickets area.
+            </span>
           </p>
         </div>
 
@@ -552,7 +567,9 @@ onUnmounted(() => {
               <Ticket class="w-12 h-12 text-green-600" />
             </div>
             <div>
-              <p class="text-sm font-medium">Ticket ID</p>
+              <p class="text-sm font-medium">
+                {{ quantity > 1 ? 'Purchase ID (covers all tickets)' : 'Ticket ID' }}
+              </p>
               <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
                 <p class="text-xs font-mono break-all">{{ purchasedTicketId }}</p>
               </div>
diff --git a/src/modules/activities/composables/useOwnedTickets.ts b/src/modules/activities/composables/useOwnedTickets.ts
index e540fb3..82b4246 100644
--- a/src/modules/activities/composables/useOwnedTickets.ts
+++ b/src/modules/activities/composables/useOwnedTickets.ts
@@ -74,8 +74,17 @@ function getTickets(activityId: string): ActivityTicket[] {
   return ticketsByActivity.value.get(activityId) ?? []
 }
 
+/** Seats represented by a single ticket row. One row carries N
+ *  seats via extra.quantity; default 1 for legacy single-purchase rows. */
+function seatsOnRow(ticket: ActivityTicket): number {
+  return Math.max(1, ticket.extra?.quantity ?? 1)
+}
+
+/** Total paid seats across all rows for one activity (sums extra.quantity). */
 function paidCount(activityId: string): number {
-  return getTickets(activityId).filter(t => t.paid).length
+  return getTickets(activityId)
+    .filter(t => t.paid)
+    .reduce((sum, t) => sum + seatsOnRow(t), 0)
 }
 
 export function useOwnedTickets() {
@@ -116,6 +125,7 @@ export function useOwnedTickets() {
     ownedActivityIds,
     getTickets,
     paidCount,
+    seatsOnRow,
     refresh: fetchTickets,
     isLoading,
     error,
diff --git a/src/modules/activities/composables/useUserTickets.ts b/src/modules/activities/composables/useUserTickets.ts
index 2803100..d562086 100644
--- a/src/modules/activities/composables/useUserTickets.ts
+++ b/src/modules/activities/composables/useUserTickets.ts
@@ -84,14 +84,18 @@ export function useUserTickets() {
       const group = groups.get(eventKey)!
       group.tickets.push(ticket)
 
+      // A ticket row represents N seats via extra.quantity (default 1
+      // for legacy single-purchase rows). Counters sum seats, not
+      // rows, so the user sees the actual ticket count they bought.
+      const seats = Math.max(1, ticket.extra?.quantity ?? 1)
       if (ticket.paid) {
-        group.paidCount++
+        group.paidCount += seats
       } else {
-        group.pendingCount++
+        group.pendingCount += seats
       }
 
       if (ticket.registered) {
-        group.registeredCount++
+        group.registeredCount += seats
       }
     })
 
diff --git a/src/modules/activities/types/ticket.ts b/src/modules/activities/types/ticket.ts
index 85ead95..164e370 100644
--- a/src/modules/activities/types/ticket.ts
+++ b/src/modules/activities/types/ticket.ts
@@ -37,6 +37,10 @@ export interface ActivityTicketExtra {
   email_notification_sent: boolean
   nostr_notification_sent: boolean
   refunded: boolean
+  /** Number of seats represented by this ticket row (1..10). One
+   *  row per purchase keeps the schema unchanged; callers must
+   *  multiply by this when surfacing seat counts. */
+  quantity?: number
 }
 
 export interface ActivityTicket {
diff --git a/src/modules/activities/views/ActivityDetailPage.vue b/src/modules/activities/views/ActivityDetailPage.vue
index c347363..e026e2f 100644
--- a/src/modules/activities/views/ActivityDetailPage.vue
+++ b/src/modules/activities/views/ActivityDetailPage.vue
@@ -100,7 +100,7 @@ function goBack() {
 
 // --- Ticket purchase + owned-tickets surface ----------------------
 
-const { getTickets, paidCount, refresh: refreshOwnedTickets } = useOwnedTickets()
+const { getTickets, paidCount, seatsOnRow, refresh: refreshOwnedTickets } = useOwnedTickets()
 
 const ownedTicketsForActivity = computed(() => getTickets(activityId))
 const ownedPaidCount = computed(() => paidCount(activityId))
@@ -290,9 +290,16 @@ function goToMyTickets() {
             <div
               v-for="ticket in ownedTicketsForActivity.filter(t => t.paid)"
               :key="ticket.id"
-              class="text-xs font-mono text-muted-foreground break-all"
+              class="flex items-center gap-2 text-xs text-muted-foreground"
             >
-              {{ ticket.id }}
+              <Badge
+                v-if="seatsOnRow(ticket) > 1"
+                variant="secondary"
+                class="shrink-0 text-[10px] font-mono px-1.5"
+              >
+                ×{{ seatsOnRow(ticket) }}
+              </Badge>
+              <span class="font-mono break-all">{{ ticket.id }}</span>
             </div>
           </div>
           <Button variant="outline" size="sm" class="gap-1.5" @click="goToMyTickets">
-- 
2.53.0


From ab171b490304256f34d32ce9930d183db5ced658 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 22:25:33 +0200
Subject: [PATCH 08/13] fix(activities): MyTickets tab pills + group header
 count seats not rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Last commit fixed the dialog + ActivityDetailPage to read extra.quantity,
but missed three more row-count → seat-count surfaces in
MyTicketsPage:

- Tab pills (All / Paid / Pending / Registered) used
  `paidTickets.length` etc. on the filtered row arrays — so a user
  who bought 1+5+5+6+3+1+1+1 = 23 seats across 8 rows saw "All
  (8)". Now reads from useUserTickets.{total,paid,pending,
  registered}Seats which sum extra.quantity.
- Group header badge "{{ group.tickets.length }} tickets" → uses
  group.paidCount + pendingCount (already seat-summed by the
  previous fix to groupedTickets).
- Group description gains a "({N} purchases)" sub-line when seats
  ≠ rows so the buyer can see at a glance "you have 23 tickets
  across 8 purchases".
- Per-row carousel card grows a `×N` chip next to the truncated
  Ticket #ID when that row represents multi-seat — same chip
  language as the ActivityDetailPage owned-tickets section.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../activities/composables/useUserTickets.ts  | 20 +++++++++++
 .../activities/views/MyTicketsPage.vue        | 33 ++++++++++++++-----
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/modules/activities/composables/useUserTickets.ts b/src/modules/activities/composables/useUserTickets.ts
index d562086..c8571c4 100644
--- a/src/modules/activities/composables/useUserTickets.ts
+++ b/src/modules/activities/composables/useUserTickets.ts
@@ -66,6 +66,21 @@ export function useUserTickets() {
     return sortedTickets.value.filter(ticket => ticket.paid && !ticket.registered)
   })
 
+  // Seat counts (sum extra.quantity across rows) so the tab pills
+  // surface "what the buyer bought" rather than "how many purchase
+  // rows are in the database". A multi-ticket purchase is one row
+  // with extra.quantity = N seats.
+  function seatsOnRow(t: ActivityTicket): number {
+    return Math.max(1, t.extra?.quantity ?? 1)
+  }
+  function sumSeats(arr: ActivityTicket[]): number {
+    return arr.reduce((total, t) => total + seatsOnRow(t), 0)
+  }
+  const totalSeats = computed(() => sumSeats(sortedTickets.value))
+  const paidSeats = computed(() => sumSeats(paidTickets.value))
+  const pendingSeats = computed(() => sumSeats(pendingTickets.value))
+  const registeredSeats = computed(() => sumSeats(registeredTickets.value))
+
   const groupedTickets = computed(() => {
     const groups = new Map<string, GroupedTickets>()
 
@@ -119,6 +134,11 @@ export function useUserTickets() {
     registeredTickets,
     unregisteredTickets,
     groupedTickets,
+    totalSeats,
+    paidSeats,
+    pendingSeats,
+    registeredSeats,
+    seatsOnRow,
     isLoading,
     error,
     refresh: loadTickets,
diff --git a/src/modules/activities/views/MyTicketsPage.vue b/src/modules/activities/views/MyTicketsPage.vue
index cbf43ea..1d1347a 100644
--- a/src/modules/activities/views/MyTicketsPage.vue
+++ b/src/modules/activities/views/MyTicketsPage.vue
@@ -17,6 +17,11 @@ const {
   pendingTickets,
   registeredTickets,
   groupedTickets,
+  totalSeats,
+  paidSeats,
+  pendingSeats,
+  registeredSeats,
+  seatsOnRow,
   isLoading,
   error,
   refresh
@@ -158,10 +163,10 @@ onMounted(async () => {
     <div v-else-if="tickets.length > 0">
       <Tabs default-value="all" class="w-full">
         <TabsList class="grid w-full grid-cols-4">
-          <TabsTrigger value="all">All ({{ tickets.length }})</TabsTrigger>
-          <TabsTrigger value="paid">Paid ({{ paidTickets.length }})</TabsTrigger>
-          <TabsTrigger value="pending">Pending ({{ pendingTickets.length }})</TabsTrigger>
-          <TabsTrigger value="registered">Registered ({{ registeredTickets.length }})</TabsTrigger>
+          <TabsTrigger value="all">All ({{ totalSeats }})</TabsTrigger>
+          <TabsTrigger value="paid">Paid ({{ paidSeats }})</TabsTrigger>
+          <TabsTrigger value="pending">Pending ({{ pendingSeats }})</TabsTrigger>
+          <TabsTrigger value="registered">Registered ({{ registeredSeats }})</TabsTrigger>
         </TabsList>
 
         <!-- All Tickets Tab -->
@@ -173,11 +178,14 @@ onMounted(async () => {
                   <div class="flex items-center justify-between">
                     <CardTitle class="text-foreground">Event: {{ group.eventId.slice(0, 8) }}...</CardTitle>
                     <Badge variant="outline">
-                      {{ group.tickets.length }} ticket{{ group.tickets.length !== 1 ? 's' : '' }}
+                      {{ group.paidCount + group.pendingCount }} ticket{{ (group.paidCount + group.pendingCount) !== 1 ? 's' : '' }}
                     </Badge>
                   </div>
                   <CardDescription>
                     {{ group.paidCount }} paid · {{ group.pendingCount }} pending · {{ group.registeredCount }} registered
+                    <span v-if="group.tickets.length !== (group.paidCount + group.pendingCount)" class="block text-xs">
+                      ({{ group.tickets.length }} purchase{{ group.tickets.length !== 1 ? 's' : '' }})
+                    </span>
                   </CardDescription>
                 </CardHeader>
                 <CardContent class="flex-grow">
@@ -217,9 +225,18 @@ onMounted(async () => {
 
                       <div class="space-y-2">
                         <div class="flex items-center justify-between">
-                          <span class="text-sm font-medium">
-                            Ticket #{{ getCurrentTicket(group.tickets, group.eventId).id.slice(0, 8) }}
-                          </span>
+                          <div class="flex items-center gap-1.5">
+                            <span class="text-sm font-medium">
+                              Ticket #{{ getCurrentTicket(group.tickets, group.eventId).id.slice(0, 8) }}
+                            </span>
+                            <Badge
+                              v-if="seatsOnRow(getCurrentTicket(group.tickets, group.eventId)) > 1"
+                              variant="secondary"
+                              class="text-[10px] font-mono px-1.5"
+                            >
+                              ×{{ seatsOnRow(getCurrentTicket(group.tickets, group.eventId)) }}
+                            </Badge>
+                          </div>
                           <Badge :variant="getTicketStatus(getCurrentTicket(group.tickets, group.eventId)).status === 'pending' ? 'secondary' : 'default'">
                             {{ getTicketStatus(getCurrentTicket(group.tickets, group.eventId)).label }}
                           </Badge>
-- 
2.53.0


From c29f7e4d6b3c8657728ba0cf7ff534a38d8a62b7 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 22:36:21 +0200
Subject: [PATCH 09/13] feat(activities): one row per attendee + render N QRs
 on multi-buy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Companion to aiolabs/events PR #15's d087bf3 (N rows sharing one
payment_hash). Now that the backend persists each attendee as a
distinct scannable row, the webapp surfaces them properly:

- TicketPaymentStatus carries `ticketIds: string[]` (every row),
  with `ticketId` kept for back-compat. checkPaymentStatus reads
  both fields off the polling response.
- useTicketPurchase tracks `purchasedTicketIds` + `ticketQRCodes`
  (parallel map id → data url). After payment lands the composable
  generates one QR per row so each attendee has their own.
- PurchaseTicketDialog success screen renders every QR + ticket id
  in a stack with "Ticket N of M" labels. Each can be shared with
  a different attendee for an independent door scan.

Reverts the "seats via extra.quantity" workarounds that landed in
the previous two commits — now that rows == tickets the counters
go back to row-count semantics across MyTickets, ActivityCard
badges, ActivityDetailPage owned-tickets, useUserTickets group
tallies, and the dialog's success header.

Door-scan compatibility: the existing LNbits register-page
scanner (events ext static/js/register.js) already reads
`ticket://<id>` QRs and PUTs /tickets/register/<id>. With N rows
each having a unique uuid id, each attendee's QR maps to a
distinct PUT — independent registration, all 3 friends can enter
separately.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/PurchaseTicketDialog.vue       | 55 ++++++++++++-------
 .../activities/composables/useOwnedTickets.ts | 15 ++---
 .../composables/useTicketPurchase.ts          | 44 +++++++++++++--
 .../activities/composables/useUserTickets.ts  | 29 +---------
 .../activities/services/TicketApiService.ts   |  1 +
 src/modules/activities/types/ticket.ts        | 10 ++--
 .../activities/views/ActivityDetailPage.vue   | 13 +----
 .../activities/views/MyTicketsPage.vue        | 33 +++--------
 8 files changed, 98 insertions(+), 102 deletions(-)

diff --git a/src/modules/activities/components/PurchaseTicketDialog.vue b/src/modules/activities/components/PurchaseTicketDialog.vue
index c746d13..ec72c1f 100644
--- a/src/modules/activities/components/PurchaseTicketDialog.vue
+++ b/src/modules/activities/components/PurchaseTicketDialog.vue
@@ -53,8 +53,8 @@ const {
   handleOpenLightningWallet,
   resetPaymentState,
   cleanup,
-  ticketQRCode,
-  purchasedTicketId,
+  ticketQRCodes,
+  purchasedTicketIds,
   showTicketQR
 } = useTicketPurchase()
 
@@ -543,35 +543,48 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <!-- Ticket QR Code (After Successful Purchase) -->
-      <div v-else-if="showTicketQR && ticketQRCode" class="py-4 flex flex-col items-center gap-4">
+      <!-- Ticket QR Codes (After Successful Purchase) — one QR per
+           row so each attendee can be scanned independently at the
+           door. Single-ticket purchases just render one. -->
+      <div v-else-if="showTicketQR && purchasedTicketIds.length > 0" class="py-4 flex flex-col items-center gap-4">
         <div class="text-center space-y-2">
           <h3 class="text-lg font-semibold text-green-600">
-            {{ quantity > 1 ? `${quantity} tickets purchased!` : 'Ticket purchased!' }}
+            {{ purchasedTicketIds.length > 1
+                ? `${purchasedTicketIds.length} tickets purchased!`
+                : 'Ticket purchased!' }}
           </h3>
           <p class="text-sm text-muted-foreground">
-            <span v-if="quantity > 1">
-              {{ quantity }} tickets are now in your tickets area on a
-              single purchase row.
+            <span v-if="purchasedTicketIds.length > 1">
+              Each attendee scans their own QR at the door —
+              independent of the others.
             </span>
             <span v-else>
-              Your ticket has been purchased and is now available in
-              your tickets area.
+              Your ticket is now in your tickets area.
             </span>
           </p>
         </div>
 
-        <div class="bg-muted/50 rounded-lg p-4 w-full">
-          <div class="text-center space-y-3">
-            <div class="flex justify-center">
-              <Ticket class="w-12 h-12 text-green-600" />
-            </div>
-            <div>
-              <p class="text-sm font-medium">
-                {{ quantity > 1 ? 'Purchase ID (covers all tickets)' : 'Ticket ID' }}
-              </p>
-              <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
-                <p class="text-xs font-mono break-all">{{ purchasedTicketId }}</p>
+        <div class="w-full space-y-3">
+          <div
+            v-for="(ticketId, index) in purchasedTicketIds"
+            :key="ticketId"
+            class="bg-muted/50 rounded-lg p-4"
+          >
+            <div class="text-center space-y-2">
+              <div v-if="purchasedTicketIds.length > 1" class="text-xs font-medium text-muted-foreground">
+                Ticket {{ index + 1 }} of {{ purchasedTicketIds.length }}
+              </div>
+              <div class="flex justify-center">
+                <img
+                  v-if="ticketQRCodes[ticketId]"
+                  :src="ticketQRCodes[ticketId]"
+                  :alt="`Ticket QR ${index + 1}`"
+                  class="w-32 h-32 border rounded-lg bg-white p-1"
+                />
+                <Ticket v-else class="w-12 h-12 text-green-600" />
+              </div>
+              <div class="bg-background border rounded px-2 py-1 max-w-full">
+                <p class="text-[10px] font-mono break-all">{{ ticketId }}</p>
               </div>
             </div>
           </div>
diff --git a/src/modules/activities/composables/useOwnedTickets.ts b/src/modules/activities/composables/useOwnedTickets.ts
index 82b4246..5fea1f1 100644
--- a/src/modules/activities/composables/useOwnedTickets.ts
+++ b/src/modules/activities/composables/useOwnedTickets.ts
@@ -74,17 +74,11 @@ function getTickets(activityId: string): ActivityTicket[] {
   return ticketsByActivity.value.get(activityId) ?? []
 }
 
-/** Seats represented by a single ticket row. One row carries N
- *  seats via extra.quantity; default 1 for legacy single-purchase rows. */
-function seatsOnRow(ticket: ActivityTicket): number {
-  return Math.max(1, ticket.extra?.quantity ?? 1)
-}
-
-/** Total paid seats across all rows for one activity (sums extra.quantity). */
+/** Number of paid ticket rows for an activity. With the
+ *  multi-ticket-as-N-rows backend (events ext >= v1.6.1-aio.2),
+ *  this matches the number of attendees / scannable QRs. */
 function paidCount(activityId: string): number {
-  return getTickets(activityId)
-    .filter(t => t.paid)
-    .reduce((sum, t) => sum + seatsOnRow(t), 0)
+  return getTickets(activityId).filter(t => t.paid).length
 }
 
 export function useOwnedTickets() {
@@ -125,7 +119,6 @@ export function useOwnedTickets() {
     ownedActivityIds,
     getTickets,
     paidCount,
-    seatsOnRow,
     refresh: fetchTickets,
     isLoading,
     error,
diff --git a/src/modules/activities/composables/useTicketPurchase.ts b/src/modules/activities/composables/useTicketPurchase.ts
index edeb6da..4d4dc45 100644
--- a/src/modules/activities/composables/useTicketPurchase.ts
+++ b/src/modules/activities/composables/useTicketPurchase.ts
@@ -20,9 +20,16 @@ export function useTicketPurchase() {
   const qrCode = ref<string | null>(null)
   const isPaymentPending = ref(false)
 
-  // Ticket QR code state
+  // Ticket QR code state. After payment lands, `purchasedTicketIds`
+  // is populated with every row id created on the invoice (one for
+  // a single-ticket purchase, N for multi). `ticketQRCodes` is a
+  // parallel map id → QR data URL so the UI can render one QR per
+  // attendee. `purchasedTicketId` stays for back-compat with the
+  // single-id success path.
   const ticketQRCode = ref<string | null>(null)
+  const ticketQRCodes = ref<Record<string, string>>({})
   const purchasedTicketId = ref<string | null>(null)
+  const purchasedTicketIds = ref<string[]>([])
   const showTicketQR = ref(false)
 
   // Computed properties
@@ -94,7 +101,9 @@ export function useTicketPurchase() {
       paymentRequest.value = null
       qrCode.value = null
       ticketQRCode.value = null
+      ticketQRCodes.value = {}
       purchasedTicketId.value = null
+      purchasedTicketIds.value = []
       showTicketQR.value = false
       currentEventId.value = eventId
 
@@ -169,13 +178,34 @@ export function useTicketPurchase() {
             clearInterval(checkInterval)
           }
 
-          if (result.ticketId) {
-            purchasedTicketId.value = result.ticketId
-            await generateTicketQRCode(result.ticketId)
+          // Multi-ticket purchases come back with `ticketIds` (N rows
+          // sharing one invoice). Single-ticket purchases include
+          // `ticketId` only. Render one QR per row so each attendee
+          // has their own scannable code at the door.
+          const ids = result.ticketIds && result.ticketIds.length > 0
+            ? result.ticketIds
+            : result.ticketId
+              ? [result.ticketId]
+              : []
+
+          if (ids.length > 0) {
+            purchasedTicketIds.value = ids
+            purchasedTicketId.value = ids[0]
+            const qrMap: Record<string, string> = {}
+            for (const id of ids) {
+              const dataUrl = await generateTicketQRCode(id)
+              if (dataUrl) qrMap[id] = dataUrl
+            }
+            ticketQRCodes.value = qrMap
+            ticketQRCode.value = qrMap[ids[0]] ?? null
             showTicketQR.value = true
           }
 
-          toast.success('Ticket purchased successfully!')
+          toast.success(
+            ids.length > 1
+              ? `${ids.length} tickets purchased!`
+              : 'Ticket purchased successfully!',
+          )
         }
       } catch (err) {
         console.error('Error checking payment status:', err)
@@ -197,7 +227,9 @@ export function useTicketPurchase() {
     qrCode.value = null
     isPaymentPending.value = false
     ticketQRCode.value = null
+    ticketQRCodes.value = {}
     purchasedTicketId.value = null
+    purchasedTicketIds.value = []
     showTicketQR.value = false
   }
 
@@ -225,7 +257,9 @@ export function useTicketPurchase() {
     isPaymentPending,
     isPayingWithWallet,
     ticketQRCode,
+    ticketQRCodes,
     purchasedTicketId,
+    purchasedTicketIds,
     showTicketQR,
 
     // Computed
diff --git a/src/modules/activities/composables/useUserTickets.ts b/src/modules/activities/composables/useUserTickets.ts
index c8571c4..ecdfb06 100644
--- a/src/modules/activities/composables/useUserTickets.ts
+++ b/src/modules/activities/composables/useUserTickets.ts
@@ -66,20 +66,6 @@ export function useUserTickets() {
     return sortedTickets.value.filter(ticket => ticket.paid && !ticket.registered)
   })
 
-  // Seat counts (sum extra.quantity across rows) so the tab pills
-  // surface "what the buyer bought" rather than "how many purchase
-  // rows are in the database". A multi-ticket purchase is one row
-  // with extra.quantity = N seats.
-  function seatsOnRow(t: ActivityTicket): number {
-    return Math.max(1, t.extra?.quantity ?? 1)
-  }
-  function sumSeats(arr: ActivityTicket[]): number {
-    return arr.reduce((total, t) => total + seatsOnRow(t), 0)
-  }
-  const totalSeats = computed(() => sumSeats(sortedTickets.value))
-  const paidSeats = computed(() => sumSeats(paidTickets.value))
-  const pendingSeats = computed(() => sumSeats(pendingTickets.value))
-  const registeredSeats = computed(() => sumSeats(registeredTickets.value))
 
   const groupedTickets = computed(() => {
     const groups = new Map<string, GroupedTickets>()
@@ -99,18 +85,14 @@ export function useUserTickets() {
       const group = groups.get(eventKey)!
       group.tickets.push(ticket)
 
-      // A ticket row represents N seats via extra.quantity (default 1
-      // for legacy single-purchase rows). Counters sum seats, not
-      // rows, so the user sees the actual ticket count they bought.
-      const seats = Math.max(1, ticket.extra?.quantity ?? 1)
       if (ticket.paid) {
-        group.paidCount += seats
+        group.paidCount++
       } else {
-        group.pendingCount += seats
+        group.pendingCount++
       }
 
       if (ticket.registered) {
-        group.registeredCount += seats
+        group.registeredCount++
       }
     })
 
@@ -134,11 +116,6 @@ export function useUserTickets() {
     registeredTickets,
     unregisteredTickets,
     groupedTickets,
-    totalSeats,
-    paidSeats,
-    pendingSeats,
-    registeredSeats,
-    seatsOnRow,
     isLoading,
     error,
     refresh: loadTickets,
diff --git a/src/modules/activities/services/TicketApiService.ts b/src/modules/activities/services/TicketApiService.ts
index 6086d51..f127d5e 100644
--- a/src/modules/activities/services/TicketApiService.ts
+++ b/src/modules/activities/services/TicketApiService.ts
@@ -123,6 +123,7 @@ export class TicketApiService {
     return {
       paid: data.paid === true,
       ticketId: data.ticket_id,
+      ticketIds: Array.isArray(data.ticket_ids) ? data.ticket_ids : undefined,
     }
   }
 
diff --git a/src/modules/activities/types/ticket.ts b/src/modules/activities/types/ticket.ts
index 164e370..a80783c 100644
--- a/src/modules/activities/types/ticket.ts
+++ b/src/modules/activities/types/ticket.ts
@@ -37,10 +37,6 @@ export interface ActivityTicketExtra {
   email_notification_sent: boolean
   nostr_notification_sent: boolean
   refunded: boolean
-  /** Number of seats represented by this ticket row (1..10). One
-   *  row per purchase keeps the schema unchanged; callers must
-   *  multiply by this when surfacing seat counts. */
-  quantity?: number
 }
 
 export interface ActivityTicket {
@@ -100,7 +96,13 @@ export interface TicketPurchaseInvoice {
 
 export interface TicketPaymentStatus {
   paid: boolean
+  /** First ticket id created on this invoice. Back-compat with
+   *  single-ticket purchases — equals the payment_hash. */
   ticketId?: string
+  /** Every row created on this invoice — one for single-ticket
+   *  purchases, N for multi-ticket. Each row is independently
+   *  scannable at the door. */
+  ticketIds?: string[]
 }
 
 /**
diff --git a/src/modules/activities/views/ActivityDetailPage.vue b/src/modules/activities/views/ActivityDetailPage.vue
index e026e2f..c347363 100644
--- a/src/modules/activities/views/ActivityDetailPage.vue
+++ b/src/modules/activities/views/ActivityDetailPage.vue
@@ -100,7 +100,7 @@ function goBack() {
 
 // --- Ticket purchase + owned-tickets surface ----------------------
 
-const { getTickets, paidCount, seatsOnRow, refresh: refreshOwnedTickets } = useOwnedTickets()
+const { getTickets, paidCount, refresh: refreshOwnedTickets } = useOwnedTickets()
 
 const ownedTicketsForActivity = computed(() => getTickets(activityId))
 const ownedPaidCount = computed(() => paidCount(activityId))
@@ -290,16 +290,9 @@ function goToMyTickets() {
             <div
               v-for="ticket in ownedTicketsForActivity.filter(t => t.paid)"
               :key="ticket.id"
-              class="flex items-center gap-2 text-xs text-muted-foreground"
+              class="text-xs font-mono text-muted-foreground break-all"
             >
-              <Badge
-                v-if="seatsOnRow(ticket) > 1"
-                variant="secondary"
-                class="shrink-0 text-[10px] font-mono px-1.5"
-              >
-                ×{{ seatsOnRow(ticket) }}
-              </Badge>
-              <span class="font-mono break-all">{{ ticket.id }}</span>
+              {{ ticket.id }}
             </div>
           </div>
           <Button variant="outline" size="sm" class="gap-1.5" @click="goToMyTickets">
diff --git a/src/modules/activities/views/MyTicketsPage.vue b/src/modules/activities/views/MyTicketsPage.vue
index 1d1347a..cbf43ea 100644
--- a/src/modules/activities/views/MyTicketsPage.vue
+++ b/src/modules/activities/views/MyTicketsPage.vue
@@ -17,11 +17,6 @@ const {
   pendingTickets,
   registeredTickets,
   groupedTickets,
-  totalSeats,
-  paidSeats,
-  pendingSeats,
-  registeredSeats,
-  seatsOnRow,
   isLoading,
   error,
   refresh
@@ -163,10 +158,10 @@ onMounted(async () => {
     <div v-else-if="tickets.length > 0">
       <Tabs default-value="all" class="w-full">
         <TabsList class="grid w-full grid-cols-4">
-          <TabsTrigger value="all">All ({{ totalSeats }})</TabsTrigger>
-          <TabsTrigger value="paid">Paid ({{ paidSeats }})</TabsTrigger>
-          <TabsTrigger value="pending">Pending ({{ pendingSeats }})</TabsTrigger>
-          <TabsTrigger value="registered">Registered ({{ registeredSeats }})</TabsTrigger>
+          <TabsTrigger value="all">All ({{ tickets.length }})</TabsTrigger>
+          <TabsTrigger value="paid">Paid ({{ paidTickets.length }})</TabsTrigger>
+          <TabsTrigger value="pending">Pending ({{ pendingTickets.length }})</TabsTrigger>
+          <TabsTrigger value="registered">Registered ({{ registeredTickets.length }})</TabsTrigger>
         </TabsList>
 
         <!-- All Tickets Tab -->
@@ -178,14 +173,11 @@ onMounted(async () => {
                   <div class="flex items-center justify-between">
                     <CardTitle class="text-foreground">Event: {{ group.eventId.slice(0, 8) }}...</CardTitle>
                     <Badge variant="outline">
-                      {{ group.paidCount + group.pendingCount }} ticket{{ (group.paidCount + group.pendingCount) !== 1 ? 's' : '' }}
+                      {{ group.tickets.length }} ticket{{ group.tickets.length !== 1 ? 's' : '' }}
                     </Badge>
                   </div>
                   <CardDescription>
                     {{ group.paidCount }} paid · {{ group.pendingCount }} pending · {{ group.registeredCount }} registered
-                    <span v-if="group.tickets.length !== (group.paidCount + group.pendingCount)" class="block text-xs">
-                      ({{ group.tickets.length }} purchase{{ group.tickets.length !== 1 ? 's' : '' }})
-                    </span>
                   </CardDescription>
                 </CardHeader>
                 <CardContent class="flex-grow">
@@ -225,18 +217,9 @@ onMounted(async () => {
 
                       <div class="space-y-2">
                         <div class="flex items-center justify-between">
-                          <div class="flex items-center gap-1.5">
-                            <span class="text-sm font-medium">
-                              Ticket #{{ getCurrentTicket(group.tickets, group.eventId).id.slice(0, 8) }}
-                            </span>
-                            <Badge
-                              v-if="seatsOnRow(getCurrentTicket(group.tickets, group.eventId)) > 1"
-                              variant="secondary"
-                              class="text-[10px] font-mono px-1.5"
-                            >
-                              ×{{ seatsOnRow(getCurrentTicket(group.tickets, group.eventId)) }}
-                            </Badge>
-                          </div>
+                          <span class="text-sm font-medium">
+                            Ticket #{{ getCurrentTicket(group.tickets, group.eventId).id.slice(0, 8) }}
+                          </span>
                           <Badge :variant="getTicketStatus(getCurrentTicket(group.tickets, group.eventId)).status === 'pending' ? 'secondary' : 'default'">
                             {{ getTicketStatus(getCurrentTicket(group.tickets, group.eventId)).label }}
                           </Badge>
-- 
2.53.0


From 70c798072e6912a3cc5d1da059930d92d0764efc Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 22:46:17 +0200
Subject: [PATCH 10/13] fix(activities): simplify purchase success modal +
 dialog overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three small fixes the buyer flagged on the multi-ticket purchase
flow:

1. Drop the inline QR grid from the success modal. The buyer's
   real ticket interaction lives in My Tickets — the modal's job
   is just to confirm the purchase landed and point them there.
   N stacked QRs made the dialog overflow on small viewports
   (point 2) and duplicated UI that already exists on the
   destination page.
2. DialogContent gets `max-h-[90dvh] overflow-y-auto` so even
   long content (long invoice expiry text, multiple methods, etc.)
   scrolls inside the dialog instead of bleeding off the viewport.
3. Companion to events ext c8602e0 which switched every row to a
   fresh short-hash id (was: first row reused the 64-hex
   payment_hash, rest got short hashes — inconsistent). No webapp
   code change for that — we just consume what the backend
   returns — but worth noting the ids you'll see now are all
   uniform short hashes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/PurchaseTicketDialog.vue       | 47 +++++--------------
 1 file changed, 12 insertions(+), 35 deletions(-)

diff --git a/src/modules/activities/components/PurchaseTicketDialog.vue b/src/modules/activities/components/PurchaseTicketDialog.vue
index ec72c1f..b5b5d3f 100644
--- a/src/modules/activities/components/PurchaseTicketDialog.vue
+++ b/src/modules/activities/components/PurchaseTicketDialog.vue
@@ -53,7 +53,6 @@ const {
   handleOpenLightningWallet,
   resetPaymentState,
   cleanup,
-  ticketQRCodes,
   purchasedTicketIds,
   showTicketQR
 } = useTicketPurchase()
@@ -251,7 +250,7 @@ onUnmounted(() => {
 
 <template>
   <Dialog :open="isOpen" @update:open="handleClose">
-    <DialogContent class="sm:max-w-[425px]">
+    <DialogContent class="sm:max-w-[425px] max-h-[90dvh] overflow-y-auto">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <CreditCard class="w-5 h-5" />
@@ -543,10 +542,14 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <!-- Ticket QR Codes (After Successful Purchase) — one QR per
-           row so each attendee can be scanned independently at the
-           door. Single-ticket purchases just render one. -->
-      <div v-else-if="showTicketQR && purchasedTicketIds.length > 0" class="py-4 flex flex-col items-center gap-4">
+      <!-- Success state. QRs live in My Tickets — no need to
+           pre-render them here; this view's job is to confirm the
+           purchase landed and route the buyer to where they actually
+           interact with their tickets. -->
+      <div v-else-if="showTicketQR && purchasedTicketIds.length > 0" class="py-6 flex flex-col items-center gap-4">
+        <div class="flex justify-center">
+          <Ticket class="w-12 h-12 text-green-600" />
+        </div>
         <div class="text-center space-y-2">
           <h3 class="text-lg font-semibold text-green-600">
             {{ purchasedTicketIds.length > 1
@@ -555,41 +558,15 @@ onUnmounted(() => {
           </h3>
           <p class="text-sm text-muted-foreground">
             <span v-if="purchasedTicketIds.length > 1">
-              Each attendee scans their own QR at the door —
-              independent of the others.
+              Each attendee gets their own scannable QR in My Tickets —
+              hand them out independently for the door scan.
             </span>
             <span v-else>
-              Your ticket is now in your tickets area.
+              Your ticket is now in My Tickets.
             </span>
           </p>
         </div>
 
-        <div class="w-full space-y-3">
-          <div
-            v-for="(ticketId, index) in purchasedTicketIds"
-            :key="ticketId"
-            class="bg-muted/50 rounded-lg p-4"
-          >
-            <div class="text-center space-y-2">
-              <div v-if="purchasedTicketIds.length > 1" class="text-xs font-medium text-muted-foreground">
-                Ticket {{ index + 1 }} of {{ purchasedTicketIds.length }}
-              </div>
-              <div class="flex justify-center">
-                <img
-                  v-if="ticketQRCodes[ticketId]"
-                  :src="ticketQRCodes[ticketId]"
-                  :alt="`Ticket QR ${index + 1}`"
-                  class="w-32 h-32 border rounded-lg bg-white p-1"
-                />
-                <Ticket v-else class="w-12 h-12 text-green-600" />
-              </div>
-              <div class="bg-background border rounded px-2 py-1 max-w-full">
-                <p class="text-[10px] font-mono break-all">{{ ticketId }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-
         <div class="space-y-3 w-full">
           <Button @click="() => $router.push('/my-tickets')" class="w-full">
             View My Tickets
-- 
2.53.0


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 11/13] 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>
-- 
2.53.0


From 391acb92f2ec4d37882f7b235138735be8d35f66 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sat, 23 May 2026 23:08:33 +0200
Subject: [PATCH 12/13] 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"
-- 
2.53.0


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

Was left-aligned alone on its row above the owned + buy blocks,
which read as visually orphaned. Adding `justify-center` aligns
it with how the line reads as a status pill — same alignment the
buy CTA below uses.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/modules/activities/views/ActivityDetailPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/activities/views/ActivityDetailPage.vue b/src/modules/activities/views/ActivityDetailPage.vue
index 7020237..84a0c64 100644
--- a/src/modules/activities/views/ActivityDetailPage.vue
+++ b/src/modules/activities/views/ActivityDetailPage.vue
@@ -278,7 +278,7 @@ function goToMyTickets() {
            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">
+        <div class="flex items-center justify-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') }}
-- 
2.53.0