From 9eb75a201754dfe462b891507e144f839f9d63d9 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 9 Sep 2026 12:47:38 +0200
Subject: [PATCH] feat(events): surface the buy-ticket CTA above the
 description + sticky bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ticket block (owned banner, Buy ticket + availability, past/sold-out
notices, and the host's Scan CTA) moved from below the description to
directly under the date and location. A long description was pushing
the primary action below the fold — on the Château du Faune event the
button sat under ~1.7k characters of text.

A sticky bar (title, price, tickets left, the same CTA) pins above the
bottom nav whenever the inline block is scrolled out of view
(useElementVisibility), and hides again when it is back, or while the
purchase / return dialogs are open. Container gets extra bottom padding
while the bar is up so the organizer card is never covered.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ByAwHU4pRnyE58YocQvAas
---
 src/modules/events/views/EventDetailPage.vue | 117 ++++++++++++++++---
 1 file changed, 99 insertions(+), 18 deletions(-)

diff --git a/src/modules/events/views/EventDetailPage.vue b/src/modules/events/views/EventDetailPage.vue
index ee08ae8..d4d98dd 100644
--- a/src/modules/events/views/EventDetailPage.vue
+++ b/src/modules/events/views/EventDetailPage.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
+import { useElementVisibility } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
@@ -197,6 +198,38 @@ function handleCheckoutReturn() {
 
 onMounted(handleCheckoutReturn)
 
+// --- Sticky buy bar --------------------------------------------------
+// The ticket block sits right under the date/location so it is above the
+// fold on most screens, but long descriptions still scroll it away. When
+// it leaves the viewport a compact bar with the price + the same CTA
+// pins above the bottom nav so the primary action is never more than a
+// tap away. Hidden while a dialog is open (the dialog is the action).
+const ticketBlockRef = ref<HTMLElement | null>(null)
+const ticketBlockVisible = useElementVisibility(ticketBlockRef)
+
+const priceLabel = computed(() => {
+  const info = event.value?.ticketInfo
+  if (!info) return ''
+  return info.price === 0 ? t('events.detail.free') : `${info.price} ${info.currency}`
+})
+
+const buyLabel = computed(() =>
+  ownedPaidCount.value > 0
+    ? t('events.detail.buyAnotherTicket', 'Buy another ticket')
+    : t('events.detail.buyTicket', 'Buy ticket'),
+)
+
+const showStickyCta = computed(
+  () =>
+    !!event.value?.ticketInfo &&
+    !ownedLnbitsEvent.value &&
+    !isPast.value &&
+    (canBuyTicket.value || ownedPaidCount.value > 0) &&
+    !ticketBlockVisible.value &&
+    !showPurchaseDialog.value &&
+    !showReturnDialog.value,
+)
+
 // 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.
@@ -210,7 +243,7 @@ function goToMyTickets() {
 </script>
 
 <template>
-  <div class="container mx-auto py-6 px-4 max-w-3xl">
+  <div class="container mx-auto py-6 px-4 max-w-3xl" :class="{ 'pb-24': showStickyCta }">
     <!-- Top bar — back-link only. Edit moves into the title row as a
          prominent icon button; Scan moves into the tickets section
          where it replaces the Buy-ticket CTA for the host. -->
@@ -319,13 +352,6 @@ function goToMyTickets() {
         </div>
       </div>
 
-      <Separator />
-
-      <!-- Description -->
-      <div class="prose prose-sm max-w-none text-foreground">
-        <p class="whitespace-pre-wrap">{{ event.description }}</p>
-      </div>
-
       <!-- Host's primary CTA is to scan tickets at the door. Lives
            OUTSIDE the ticketInfo gate so it appears even when the
            event was published without AIO ticket tags — a host always
@@ -345,8 +371,15 @@ function goToMyTickets() {
            by the calendar→Event converter from the AIO custom
            tickets_* tags on the published event). Skipped for the
            host entirely — they have the Scan CTA above and don't
-           need a Buy CTA for their own event. -->
-      <div v-if="event.ticketInfo && !ownedLnbitsEvent" class="space-y-3">
+           need a Buy CTA for their own event. Placed ABOVE the
+           description on purpose: the buy action is the reason most
+           visitors open the page, and a long description must not
+           push it below the fold (a sticky bar covers the rest). -->
+      <div
+        v-if="event.ticketInfo && !ownedLnbitsEvent"
+        ref="ticketBlockRef"
+        class="space-y-3"
+      >
         <div
           v-if="ownedPaidCount > 0"
           class="bg-primary/15 border border-primary/40 rounded-lg p-4 flex items-center justify-between gap-3"
@@ -376,14 +409,8 @@ function goToMyTickets() {
             @click="openPurchaseDialog"
           >
             <Ticket class="w-4 h-4" />
-            {{ ownedPaidCount > 0
-                ? t('events.detail.buyAnotherTicket', 'Buy another ticket')
-                : t('events.detail.buyTicket', 'Buy ticket') }}
-            <span class="ml-2 opacity-80 font-normal">
-              {{ event.ticketInfo.price === 0
-                  ? t('events.detail.free')
-                  : `${event.ticketInfo.price} ${event.ticketInfo.currency}` }}
-            </span>
+            {{ buyLabel }}
+            <span class="ml-2 opacity-80 font-normal">{{ priceLabel }}</span>
           </Button>
           <p class="text-xs text-muted-foreground text-center">
             <span v-if="event.ticketInfo.available === undefined">
@@ -402,6 +429,13 @@ function goToMyTickets() {
         </p>
       </div>
 
+      <Separator />
+
+      <!-- Description -->
+      <div class="prose prose-sm max-w-none text-foreground">
+        <p class="whitespace-pre-wrap">{{ event.description }}</p>
+      </div>
+
       <PurchaseTicketDialog
         v-if="purchaseEvent"
         :is-open="showPurchaseDialog"
@@ -417,6 +451,53 @@ function goToMyTickets() {
         @update:is-open="showReturnDialog = $event"
       />
 
+      <!-- Sticky buy bar — see showStickyCta. Sits above the bottom nav
+           (h-14 + safe-area inset) and mirrors the inline CTA. -->
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="translate-y-4 opacity-0"
+        leave-active-class="transition duration-150 ease-in"
+        leave-to-class="translate-y-4 opacity-0"
+      >
+        <div
+          v-if="showStickyCta"
+          class="fixed left-0 right-0 z-40 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80"
+          style="bottom: calc(3.5rem + env(safe-area-inset-bottom))"
+          role="region"
+          :aria-label="t('events.detail.tickets')"
+        >
+          <div class="container mx-auto max-w-3xl px-4 py-2.5 flex items-center gap-3">
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-foreground truncate">{{ event.title }}</p>
+              <p class="text-xs text-muted-foreground truncate">
+                <span v-if="ownedPaidCount > 0">
+                  {{ t('events.detail.ticketsOwned', { count: ownedPaidCount }, ownedPaidCount) }}
+                </span>
+                <span v-else-if="event.ticketInfo?.available === undefined">
+                  {{ priceLabel }} · {{ t('events.detail.unlimitedTickets', 'Unlimited tickets') }}
+                </span>
+                <span v-else>
+                  {{ priceLabel }} · {{ t('events.detail.ticketsRemainingOfTotal', { count: event.ticketInfo.available, total: event.ticketInfo.total }) }}
+                </span>
+              </p>
+            </div>
+            <Button
+              v-if="canBuyTicket"
+              class="gap-1.5 shrink-0"
+              :variant="ownedPaidCount > 0 ? 'outline' : 'default'"
+              @click="openPurchaseDialog"
+            >
+              <Ticket class="w-4 h-4" />
+              {{ buyLabel }}
+            </Button>
+            <Button v-else class="gap-1.5 shrink-0" @click="goToMyTickets">
+              <Ticket class="w-4 h-4" />
+              {{ t('events.detail.viewMyTickets', 'View in My Tickets') }}
+            </Button>
+          </div>
+        </div>
+      </Transition>
+
       <!-- External references -->
       <div v-if="event.tags.length > 0" class="space-y-2">
         <!-- References would go here in future phases -->
-- 
2.55.0