From 32a7389d0b7cf651fccf41cb74e7340b38da0bb4 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 00:26:26 +0200
Subject: [PATCH 01/14] feat(events): default calendar selection to today

The month-grid calendar opened with no day selected, so the events panel
below was empty until the user clicked a day. Initialise the selection to
today (currentMonth already starts on the current month) so it opens
showing today's events.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/components/EventCalendarView.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/events/components/EventCalendarView.vue b/src/modules/events/components/EventCalendarView.vue
index 77e0778..c77b908 100644
--- a/src/modules/events/components/EventCalendarView.vue
+++ b/src/modules/events/components/EventCalendarView.vue
@@ -68,7 +68,9 @@ function getDotCount(date: Date): number {
   return Math.min(getEventsForDay(date).length, 3)
 }
 
-const selectedDay = ref<Date | null>(null)
+// Default the selection to today so the calendar opens on today's events
+// rather than an empty panel (currentMonth already starts on this month).
+const selectedDay = ref<Date | null>(new Date())
 const selectedDayEvents = computed(() => {
   if (!selectedDay.value) return []
   return getEventsForDay(selectedDay.value)

From 52e9d11ea9edd2a717cc097ead0b4c5a72cdf717 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 00:38:23 +0200
Subject: [PATCH 02/14] feat(events): add Back button to the calendar page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The calendar page had no way back to the feed except the browser/back
gesture. Add a top-bar ghost Back link (ArrowLeft + "Back" → events feed)
mirroring EventDetailPage's pattern for navigation consistency.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/EventsCalendarPage.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/modules/events/views/EventsCalendarPage.vue b/src/modules/events/views/EventsCalendarPage.vue
index 3198976..6826125 100644
--- a/src/modules/events/views/EventsCalendarPage.vue
+++ b/src/modules/events/views/EventsCalendarPage.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Ticket } from 'lucide-vue-next'
+import { ArrowLeft, Ticket } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { useEvents } from '../composables/useEvents'
 import { useOwnedTickets } from '../composables/useOwnedTickets'
@@ -34,10 +34,23 @@ onMounted(() => {
 function handleSelectEvent(event: Event) {
   router.push({ name: 'event-detail', params: { id: event.id } })
 }
+
+function goBack() {
+  router.push({ name: 'events' })
+}
 </script>
 
 <template>
   <div class="container mx-auto px-4 py-6 max-w-lg">
+    <!-- Back to the events feed — mirrors EventDetailPage's top-bar
+         back link for navigation consistency. -->
+    <div class="flex items-center mb-4">
+      <Button variant="ghost" size="sm" class="gap-1.5" @click="goBack">
+        <ArrowLeft class="w-4 h-4" />
+        {{ t('common.nav.back', 'Back') }}
+      </Button>
+    </div>
+
     <!-- Filter chip: narrows the calendar to events the user has
          paid tickets for. Hidden when logged out — nothing to own.
          Left-aligned so it doesn't collide with the fixed top-right

From cdc8158e1b53d0473ca51f074905fc03b4b5d384 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 01:03:54 +0200
Subject: [PATCH 03/14] feat(events): drop the week-day strip, move calendar
 next to filters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The feed had two redundant day controls — the DatePickerStrip week strip
and the temporal preset pills — on top of the calendar page. Remove the
week strip (the calendar already covers picking a specific date) and move
the calendar shortcut to the end of the temporal-filter row, next to the
pills. Frees a row and keeps coarse windows (Today/This Week/…) inline
with one-tap access to the full calendar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/EventsPage.vue | 37 ++++++++-----------------
 1 file changed, 12 insertions(+), 25 deletions(-)

diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index 10447b5..8d9c20b 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -26,7 +26,6 @@ import { useEventsStore } from '../stores/events'
 import EventSearchOverlay from '../components/EventSearchOverlay.vue'
 import TemporalFilterBar from '../components/TemporalFilterBar.vue'
 import CategoryFilterBar from '../components/CategoryFilterBar.vue'
-import DatePickerStrip from '../components/DatePickerStrip.vue'
 import EventList from '../components/EventList.vue'
 import type { Event } from '../types/event'
 
@@ -41,10 +40,8 @@ const {
   temporal,
   selectedCategories,
   hasActiveFilters,
-  selectedDate,
   showPast,
   onlyHosting,
-  selectDate,
   setTemporal,
   toggleCategory,
   clearCategories,
@@ -118,28 +115,6 @@ function openCalendar() {
       />
     </div>
 
-    <!-- Date picker strip + calendar shortcut. The calendar icon used
-         to be a bottom-nav tab; it now lives on the right of the week
-         strip so the tabs row stays focused on the primary views.
-         Hidden in the Hosting view — operators don't need calendar
-         navigation when they're managing their own roster. -->
-    <div v-if="!onlyHosting" class="mb-3 flex items-center gap-2">
-      <DatePickerStrip
-        class="flex-1 min-w-0"
-        :selected-date="selectedDate"
-        @select="selectDate"
-      />
-      <Button
-        variant="ghost"
-        size="icon"
-        class="h-8 w-8 shrink-0"
-        :aria-label="t('events.nav.calendar')"
-        @click="openCalendar"
-      >
-        <CalendarDays class="h-4 w-4" />
-      </Button>
-    </div>
-
     <!-- Filters trigger + Clear-all stay stationary in a left-aligned
          column; only the temporal pills scroll horizontally. The
          Filters icon (with a count badge when categories are active)
@@ -186,6 +161,18 @@ function openCalendar() {
             @toggle-past="togglePast"
           />
         </div>
+        <!-- Calendar shortcut — sits at the end of the filter row next to
+             the temporal pills (the week-day strip was removed in favour
+             of the calendar for picking specific dates). -->
+        <Button
+          variant="ghost"
+          size="icon"
+          class="h-8 w-8 shrink-0"
+          :aria-label="t('events.nav.calendar')"
+          @click="openCalendar"
+        >
+          <CalendarDays class="h-4 w-4" />
+        </Button>
       </div>
       <CollapsibleContent class="mt-3">
         <CategoryFilterBar

From 084bfc52ebc672aed6a382595c77571c7414af68 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 01:06:47 +0200
Subject: [PATCH 04/14] refactor(events): remove dead specific-date filter
 logic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With the DatePickerStrip gone, selectedDate/selectDate in useEventFilters
were unreachable — nothing set a specific date anymore (the calendar page
only navigates to event detail). Delete the orphaned DatePickerStrip
component and strip the now-dead date-filter branch, state, and actions.
The feed filters purely by temporal pills + past/upcoming + categories.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../events/components/DatePickerStrip.vue     | 73 -------------------
 .../events/composables/useEventFilters.ts     | 55 ++++----------
 2 files changed, 15 insertions(+), 113 deletions(-)
 delete mode 100644 src/modules/events/components/DatePickerStrip.vue

diff --git a/src/modules/events/components/DatePickerStrip.vue b/src/modules/events/components/DatePickerStrip.vue
deleted file mode 100644
index f605373..0000000
--- a/src/modules/events/components/DatePickerStrip.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { addDays, format, isSameDay, startOfWeek } from 'date-fns'
-import { Button } from '@/components/ui/button'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import { useDateLocale } from '../composables/useDateLocale'
-
-const props = defineProps<{
-  /** Currently selected date (if any) */
-  selectedDate?: Date
-}>()
-
-const emit = defineEmits<{
-  select: [date: Date]
-}>()
-
-const { dateLocale } = useDateLocale()
-
-/** Start of the visible week */
-const weekStart = ref(startOfWeek(new Date(), { weekStartsOn: 1 }))
-
-const days = computed(() => {
-  return Array.from({ length: 7 }, (_, i) => addDays(weekStart.value, i))
-})
-
-const isToday = (date: Date) => isSameDay(date, new Date())
-const isSelected = (date: Date) => props.selectedDate ? isSameDay(date, props.selectedDate) : false
-
-function prevWeek() {
-  weekStart.value = addDays(weekStart.value, -7)
-}
-
-function nextWeek() {
-  weekStart.value = addDays(weekStart.value, 7)
-}
-
-
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-    <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" @click="prevWeek">
-      <ChevronLeft class="h-4 w-4" />
-    </Button>
-
-    <div class="grid grid-cols-7 flex-1 gap-0.5">
-      <button
-        v-for="day in days"
-        :key="day.toISOString()"
-        class="flex flex-col items-center py-1.5 rounded-lg transition-colors"
-        :class="{
-          'bg-primary text-primary-foreground': isSelected(day),
-          'bg-muted/50': isToday(day) && !isSelected(day),
-          'hover:bg-muted': !isSelected(day),
-        }"
-        @click="emit('select', day)"
-      >
-        <span class="text-[10px] font-medium uppercase leading-none"
-          :class="isSelected(day) ? 'text-primary-foreground/70' : 'text-muted-foreground'"
-        >
-          {{ format(day, 'EEEEE', { locale: dateLocale }) }}
-        </span>
-        <span class="text-sm font-semibold leading-tight mt-0.5">
-          {{ format(day, 'd') }}
-        </span>
-      </button>
-    </div>
-
-    <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" @click="nextWeek">
-      <ChevronRight class="h-4 w-4" />
-    </Button>
-  </div>
-</template>
diff --git a/src/modules/events/composables/useEventFilters.ts b/src/modules/events/composables/useEventFilters.ts
index 71ce1ff..8742cd1 100644
--- a/src/modules/events/composables/useEventFilters.ts
+++ b/src/modules/events/composables/useEventFilters.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import {
   startOfDay, endOfDay, startOfWeek, endOfWeek,
-  startOfMonth, endOfMonth, addDays, isSameDay,
+  startOfMonth, endOfMonth, addDays,
 } from 'date-fns'
 import type { Event } from '../types/event'
 import type { EventCategory } from '../types/category'
@@ -15,7 +15,6 @@ import { DEFAULT_FILTERS } from '../types/filters'
 // tapping Hosting toggled a private ref the page never saw.
 const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
 const selectedCategories = ref<EventCategory[]>([])
-const selectedDate = ref<Date | undefined>(undefined)
 const onlyOwnedTickets = ref(false)
 const onlyHosting = ref(false)
 const showPast = ref(false)
@@ -36,30 +35,20 @@ export function useEventFilters() {
   function applyFilters(events: Event[]): Event[] {
     let result = events
 
-    // Specific date filter (from DatePickerStrip) takes priority over
-    // temporal. Picking a date also bypasses the past/upcoming split
-    // so the user can browse events for any day they choose.
-    if (selectedDate.value) {
-      const dayStart = startOfDay(selectedDate.value)
-      const dayEnd = endOfDay(selectedDate.value)
-      result = result.filter(a => {
-        const eventEnd = a.endDate ?? a.startDate
-        return a.startDate <= dayEnd && eventEnd >= dayStart
-      })
-    } else {
-      // Temporal filter
-      result = applyTemporalFilter(result, temporal.value)
-      // Past/upcoming split — the chip narrows to one side of "now",
-      // mirroring the "My tickets" / "Hosting" mental model. Default
-      // (showPast=false) is upcoming-only; toggling on flips to
-      // past-only. Composes with temporal pills: "This Week" +
-      // showPast=true shows only the days already passed this week.
-      const now = new Date()
-      result = result.filter(a => {
-        const eventEnd = a.endDate ?? a.startDate
-        return showPast.value ? eventEnd < now : eventEnd >= now
-      })
-    }
+    // Temporal filter (preset pills). Specific-date browsing now lives on
+    // the calendar page, so the feed only narrows by these windows.
+    result = applyTemporalFilter(result, temporal.value)
+
+    // Past/upcoming split — the chip narrows to one side of "now",
+    // mirroring the "My tickets" / "Hosting" mental model. Default
+    // (showPast=false) is upcoming-only; toggling on flips to past-only.
+    // Composes with temporal pills: "This Week" + showPast=true shows
+    // only the days already passed this week.
+    const now = new Date()
+    result = result.filter(a => {
+      const eventEnd = a.endDate ?? a.startDate
+      return showPast.value ? eventEnd < now : eventEnd >= now
+    })
 
     // Category filter
     if (selectedCategories.value.length > 0) {
@@ -80,16 +69,6 @@ export function useEventFilters() {
 
   function setTemporal(value: TemporalFilter) {
     temporal.value = value
-    selectedDate.value = undefined // clear date pick when using temporal pills
-  }
-
-  function selectDate(date: Date) {
-    if (selectedDate.value && isSameDay(selectedDate.value, date)) {
-      selectedDate.value = undefined // toggle off
-    } else {
-      selectedDate.value = date
-      temporal.value = 'all' // clear temporal pill when picking a specific date
-    }
   }
 
   function toggleCategory(category: EventCategory) {
@@ -108,7 +87,6 @@ export function useEventFilters() {
   function resetFilters() {
     temporal.value = DEFAULT_FILTERS.temporal
     selectedCategories.value = []
-    selectedDate.value = undefined
     onlyOwnedTickets.value = false
     onlyHosting.value = false
     showPast.value = false
@@ -129,7 +107,6 @@ export function useEventFilters() {
   const hasActiveFilters = computed(() =>
     temporal.value !== 'all' ||
     selectedCategories.value.length > 0 ||
-    selectedDate.value !== undefined ||
     onlyOwnedTickets.value ||
     onlyHosting.value ||
     showPast.value
@@ -139,7 +116,6 @@ export function useEventFilters() {
     // State
     temporal,
     selectedCategories,
-    selectedDate,
     onlyOwnedTickets,
     onlyHosting,
     showPast,
@@ -149,7 +125,6 @@ export function useEventFilters() {
     // Actions
     applyFilters,
     setTemporal,
-    selectDate,
     toggleCategory,
     clearCategories,
     toggleOwnedTickets,

From 1433a2039b2e3217474b3154662ba245a70d7ba5 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 01:11:00 +0200
Subject: [PATCH 05/14] feat(events): add upcoming/past toggle to My Tickets

My Tickets listed every ticket with no way to separate events that
already happened. Add an Upcoming/Past segmented toggle (defaults to
upcoming) that filters the grouped tickets by their event's date, with
the tab counts (All/Paid/Pending/Registered) derived from the visible
set so badges match what's shown. Events not yet resolved from relays
stay visible under Upcoming until their date is known.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/MyTicketsPage.vue | 85 +++++++++++++++++-----
 1 file changed, 68 insertions(+), 17 deletions(-)

diff --git a/src/modules/events/views/MyTicketsPage.vue b/src/modules/events/views/MyTicketsPage.vue
index 5ddaea9..d394a2e 100644
--- a/src/modules/events/views/MyTicketsPage.vue
+++ b/src/modules/events/views/MyTicketsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 import { useUserTickets } from '../composables/useUserTickets'
 import { useEvents } from '../composables/useEvents'
@@ -16,9 +16,6 @@ import { Ticket, User, CreditCard, CheckCircle, Clock, AlertCircle, ChevronLeft,
 const { isAuthenticated, userDisplay } = useAuth()
 const {
   tickets,
-  paidTickets,
-  pendingTickets,
-  registeredTickets,
   groupedTickets,
   isLoading,
   error,
@@ -40,6 +37,36 @@ function eventShortLabel(eventId: string): string {
   return `Event: ${eventId.slice(0, 8)}…`
 }
 
+// Past/upcoming toggle. Defaults to upcoming. An event whose end (or
+// start, if no end) is before now counts as past; events not yet
+// resolved from relays are treated as upcoming so their tickets stay
+// visible until we know otherwise.
+const showPast = ref(false)
+
+function isGroupPast(eventId: string): boolean {
+  const ev = eventsStore.getEventById(eventId)
+  if (!ev) return false
+  const end = ev.endDate ?? ev.startDate
+  return end < new Date()
+}
+
+const visibleGroups = computed(() =>
+  groupedTickets.value.filter(g => isGroupPast(g.eventId) === showPast.value),
+)
+
+// Tab counts derived from the visible (past/upcoming-filtered) groups so
+// the badges match what's actually shown.
+const visibleCounts = computed(() => {
+  let all = 0, paid = 0, pending = 0, registered = 0
+  for (const g of visibleGroups.value) {
+    all += g.tickets.length
+    paid += g.paidCount
+    pending += g.pendingCount
+    registered += g.registeredCount
+  }
+  return { all, paid, pending, registered }
+})
+
 const qrCodes = ref<Record<string, string>>({})
 const currentTicketIndex = ref<Record<string, number>>({})
 
@@ -140,7 +167,7 @@ onMounted(async () => {
 
 <template>
   <div class="container mx-auto py-8 px-4">
-    <div class="flex justify-between items-center mb-6">
+    <div class="flex justify-between items-start gap-3 mb-6">
       <div class="space-y-1">
         <h1 class="text-3xl font-bold text-foreground">My Tickets</h1>
         <div v-if="isAuthenticated && userDisplay" class="flex items-center gap-2 text-sm text-muted-foreground">
@@ -153,6 +180,27 @@ onMounted(async () => {
           <span>Please log in to view your tickets</span>
         </div>
       </div>
+
+      <!-- Upcoming/Past toggle — defaults to upcoming so the list isn't
+           cluttered with events that already happened. -->
+      <div v-if="isAuthenticated && tickets.length > 0" class="inline-flex shrink-0 rounded-md border p-0.5">
+        <Button
+          :variant="!showPast ? 'default' : 'ghost'"
+          size="sm"
+          class="h-7"
+          @click="showPast = false"
+        >
+          Upcoming
+        </Button>
+        <Button
+          :variant="showPast ? 'default' : 'ghost'"
+          size="sm"
+          class="h-7"
+          @click="showPast = true"
+        >
+          Past
+        </Button>
+      </div>
     </div>
 
     <div v-if="!isAuthenticated" class="text-center py-12">
@@ -180,17 +228,20 @@ 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 ({{ visibleCounts.all }})</TabsTrigger>
+          <TabsTrigger value="paid">Paid ({{ visibleCounts.paid }})</TabsTrigger>
+          <TabsTrigger value="pending">Pending ({{ visibleCounts.pending }})</TabsTrigger>
+          <TabsTrigger value="registered">Registered ({{ visibleCounts.registered }})</TabsTrigger>
         </TabsList>
 
         <!-- All Tickets Tab -->
         <TabsContent value="all">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in groupedTickets" :key="group.eventId" class="flex flex-col">
+            <div v-if="visibleGroups.length === 0" class="text-center py-8 text-muted-foreground">
+              {{ showPast ? 'No past tickets' : 'No upcoming tickets' }}
+            </div>
+            <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              <Card v-for="group in visibleGroups" :key="group.eventId" class="flex flex-col">
                 <CardHeader>
                   <div class="flex items-center justify-between gap-2">
                     <CardTitle class="text-foreground min-w-0 flex-1">
@@ -288,9 +339,9 @@ onMounted(async () => {
         <!-- Paid, Pending, Registered tabs follow the same pattern but filter -->
         <TabsContent value="paid">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div v-if="paidTickets.length === 0" class="text-center py-8 text-muted-foreground">No paid tickets</div>
+            <div v-if="visibleCounts.paid === 0" class="text-center py-8 text-muted-foreground">No paid tickets</div>
             <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in groupedTickets.filter(g => g.paidCount > 0)" :key="group.eventId" class="flex flex-col">
+              <Card v-for="group in visibleGroups.filter(g => g.paidCount > 0)" :key="group.eventId" class="flex flex-col">
                 <CardHeader>
                   <CardTitle class="text-foreground min-w-0">
                     <RouterLink
@@ -313,9 +364,9 @@ onMounted(async () => {
 
         <TabsContent value="pending">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div v-if="pendingTickets.length === 0" class="text-center py-8 text-muted-foreground">No pending tickets</div>
+            <div v-if="visibleCounts.pending === 0" class="text-center py-8 text-muted-foreground">No pending tickets</div>
             <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in groupedTickets.filter(g => g.pendingCount > 0)" :key="group.eventId" class="flex flex-col opacity-75">
+              <Card v-for="group in visibleGroups.filter(g => g.pendingCount > 0)" :key="group.eventId" class="flex flex-col opacity-75">
                 <CardHeader>
                   <CardTitle class="text-foreground min-w-0">
                     <RouterLink
@@ -338,9 +389,9 @@ onMounted(async () => {
 
         <TabsContent value="registered">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div v-if="registeredTickets.length === 0" class="text-center py-8 text-muted-foreground">No registered tickets</div>
+            <div v-if="visibleCounts.registered === 0" class="text-center py-8 text-muted-foreground">No registered tickets</div>
             <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in groupedTickets.filter(g => g.registeredCount > 0)" :key="group.eventId" class="flex flex-col">
+              <Card v-for="group in visibleGroups.filter(g => g.registeredCount > 0)" :key="group.eventId" class="flex flex-col">
                 <CardHeader>
                   <CardTitle class="text-foreground min-w-0">
                     <RouterLink

From c53bc525ef16d4dcd95127ba2429fc6e07487dcb Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 01:12:58 +0200
Subject: [PATCH 06/14] fix(events): move My Tickets upcoming/past toggle off
 the hamburger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The toggle sat in the header's top-right corner, where it collided with
the fixed top-right hamburger menu (the Past button rendered behind it).
Move it to its own left-aligned row above the tabs — same approach the
calendar page uses to clear the hamburger.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/MyTicketsPage.vue | 45 +++++++++++-----------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/modules/events/views/MyTicketsPage.vue b/src/modules/events/views/MyTicketsPage.vue
index d394a2e..94e851f 100644
--- a/src/modules/events/views/MyTicketsPage.vue
+++ b/src/modules/events/views/MyTicketsPage.vue
@@ -167,7 +167,7 @@ onMounted(async () => {
 
 <template>
   <div class="container mx-auto py-8 px-4">
-    <div class="flex justify-between items-start gap-3 mb-6">
+    <div class="flex justify-between items-center mb-6">
       <div class="space-y-1">
         <h1 class="text-3xl font-bold text-foreground">My Tickets</h1>
         <div v-if="isAuthenticated && userDisplay" class="flex items-center gap-2 text-sm text-muted-foreground">
@@ -180,27 +180,6 @@ onMounted(async () => {
           <span>Please log in to view your tickets</span>
         </div>
       </div>
-
-      <!-- Upcoming/Past toggle — defaults to upcoming so the list isn't
-           cluttered with events that already happened. -->
-      <div v-if="isAuthenticated && tickets.length > 0" class="inline-flex shrink-0 rounded-md border p-0.5">
-        <Button
-          :variant="!showPast ? 'default' : 'ghost'"
-          size="sm"
-          class="h-7"
-          @click="showPast = false"
-        >
-          Upcoming
-        </Button>
-        <Button
-          :variant="showPast ? 'default' : 'ghost'"
-          size="sm"
-          class="h-7"
-          @click="showPast = true"
-        >
-          Past
-        </Button>
-      </div>
     </div>
 
     <div v-if="!isAuthenticated" class="text-center py-12">
@@ -226,6 +205,28 @@ onMounted(async () => {
     </div>
 
     <div v-else-if="tickets.length > 0">
+      <!-- Upcoming/Past toggle — own row, left-aligned so it clears the
+           fixed top-right hamburger menu. Defaults to upcoming so the
+           list isn't cluttered with events that already happened. -->
+      <div class="mb-4 inline-flex rounded-md border p-0.5">
+        <Button
+          :variant="!showPast ? 'default' : 'ghost'"
+          size="sm"
+          class="h-7"
+          @click="showPast = false"
+        >
+          Upcoming
+        </Button>
+        <Button
+          :variant="showPast ? 'default' : 'ghost'"
+          size="sm"
+          class="h-7"
+          @click="showPast = true"
+        >
+          Past
+        </Button>
+      </div>
+
       <Tabs default-value="all" class="w-full">
         <TabsList class="grid w-full grid-cols-4">
           <TabsTrigger value="all">All ({{ visibleCounts.all }})</TabsTrigger>

From 3d1b888307fbd024d88fc8cf41e0ab3b4ec7dd4e Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 11:42:12 +0200
Subject: [PATCH 07/14] feat(events): compact the calendar month grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The aspect-square day cells made the month grid ~350px tall on mobile,
pushing the selected-day event list well below the fold. Switch cells to
a fixed h-12 (still a comfortable 48px tap target) and tighten the
section spacing (space-y-4 → space-y-2), so the grid + day's events fit
with less scrolling.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/components/EventCalendarView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/events/components/EventCalendarView.vue b/src/modules/events/components/EventCalendarView.vue
index c77b908..1cbef3a 100644
--- a/src/modules/events/components/EventCalendarView.vue
+++ b/src/modules/events/components/EventCalendarView.vue
@@ -97,7 +97,7 @@ function nextMonth() {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <div class="space-y-2">
     <!-- Month navigation -->
     <div class="flex items-center justify-between">
       <Button variant="ghost" size="icon" class="h-8 w-8" @click="prevMonth">
@@ -125,7 +125,7 @@ function nextMonth() {
       <button
         v-for="date in calendarDays"
         :key="date.toISOString()"
-        class="aspect-square flex flex-col items-center justify-center relative p-1 rounded-lg transition-colors"
+        class="h-12 flex flex-col items-center justify-center relative p-0.5 rounded-lg transition-colors"
         :class="{
           'text-muted-foreground/40': !isSameMonth(date, currentMonth),
           'bg-primary text-primary-foreground': selectedDay && isSameDay(date, selectedDay),

From 8c9a8ab94554c0a0f5ac2e8aba7736b26d146f37 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 11:44:18 +0200
Subject: [PATCH 08/14] feat(events): put calendar My-tickets filter next to
 the Back button

The My-tickets filter chip sat on its own row below the Back link,
wasting vertical space. Move it onto the Back-button row (still
left-aligned to clear the fixed top-right hamburger), reclaiming a row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/EventsCalendarPage.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/modules/events/views/EventsCalendarPage.vue b/src/modules/events/views/EventsCalendarPage.vue
index 6826125..9040fcd 100644
--- a/src/modules/events/views/EventsCalendarPage.vue
+++ b/src/modules/events/views/EventsCalendarPage.vue
@@ -42,21 +42,17 @@ function goBack() {
 
 <template>
   <div class="container mx-auto px-4 py-6 max-w-lg">
-    <!-- Back to the events feed — mirrors EventDetailPage's top-bar
-         back link for navigation consistency. -->
-    <div class="flex items-center mb-4">
+    <!-- Back to the events feed (mirrors EventDetailPage) + the
+         My-tickets filter on one row. Both left-aligned so they clear
+         the fixed top-right hamburger menu, and the filter no longer
+         takes a row to itself. -->
+    <div class="flex items-center gap-2 mb-4">
       <Button variant="ghost" size="sm" class="gap-1.5" @click="goBack">
         <ArrowLeft class="w-4 h-4" />
         {{ t('common.nav.back', 'Back') }}
       </Button>
-    </div>
-
-    <!-- Filter chip: narrows the calendar to events the user has
-         paid tickets for. Hidden when logged out — nothing to own.
-         Left-aligned so it doesn't collide with the fixed top-right
-         hamburger menu. -->
-    <div v-if="isAuthenticated" class="mb-3 flex">
       <Button
+        v-if="isAuthenticated"
         :variant="onlyMine ? 'default' : 'outline'"
         size="sm"
         class="gap-1.5"

From f7642db61162db03c6ed82b8761424aa74c310ec Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 12:12:01 +0200
Subject: [PATCH 09/14] feat(events): add reusable calendar date-picker popup

Add a pickerMode to EventCalendarView (month grid only, emits selectDate
on every day tap, no selected-day events panel) and a new
EventCalendarPopup dialog wrapping it. Picking a day emits the date and
closes. Groundwork for replacing the standalone calendar page with an
on-feed date-picker popup and a My-Tickets event-date visual.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../events/components/EventCalendarPopup.vue  | 49 +++++++++++++++++++
 .../events/components/EventCalendarView.vue   | 15 +++++-
 2 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/events/components/EventCalendarPopup.vue

diff --git a/src/modules/events/components/EventCalendarPopup.vue b/src/modules/events/components/EventCalendarPopup.vue
new file mode 100644
index 0000000..9a16173
--- /dev/null
+++ b/src/modules/events/components/EventCalendarPopup.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog'
+import EventCalendarView from './EventCalendarView.vue'
+import type { Event } from '../types/event'
+
+// A date-picker popup: the month grid (with per-day event dots) in a
+// dialog. Picking a day emits selectDate and closes. Reused by the feed
+// (filter to a day) and My Tickets (visualise the user's event dates).
+const props = defineProps<{
+  open: boolean
+  events: Event[]
+  title: string
+  description: string
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  selectDate: [date: Date]
+}>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (v) => emit('update:open', v),
+})
+
+function onSelectDate(date: Date) {
+  emit('selectDate', date)
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="max-w-sm">
+      <DialogHeader>
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/src/modules/events/components/EventCalendarView.vue b/src/modules/events/components/EventCalendarView.vue
index 1cbef3a..f0a70c8 100644
--- a/src/modules/events/components/EventCalendarView.vue
+++ b/src/modules/events/components/EventCalendarView.vue
@@ -12,6 +12,10 @@ import type { Event } from '../types/event'
 
 const props = defineProps<{
   events: Event[]
+  /** When true, render only the month grid for date-picking — no
+   *  selected-day events panel — and emit selectDate on every day tap
+   *  (used inside the calendar popup). */
+  pickerMode?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -77,6 +81,12 @@ const selectedDayEvents = computed(() => {
 })
 
 function selectDay(date: Date) {
+  // Picker mode: every tap selects + emits (parent closes the popup).
+  if (props.pickerMode) {
+    selectedDay.value = date
+    emit('selectDate', date)
+    return
+  }
   if (selectedDay.value && isSameDay(selectedDay.value, date)) {
     selectedDay.value = null
   } else {
@@ -147,8 +157,9 @@ function nextMonth() {
       </button>
     </div>
 
-    <!-- Selected day events -->
-    <div v-if="selectedDay" class="border-t pt-4 space-y-2">
+    <!-- Selected day events (hidden in picker mode — the popup just
+         picks a day and closes). -->
+    <div v-if="selectedDay && !pickerMode" class="border-t pt-4 space-y-2">
       <h3 class="text-sm font-medium text-muted-foreground">
         {{ format(selectedDay, 'EEEE, MMMM d', { locale: dateLocale }) }}
         <span v-if="selectedDayEvents.length > 0" class="ml-1">

From b665e3de0733ba7388e30d23b78cc5f1ebef3baf Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 12:14:16 +0200
Subject: [PATCH 10/14] feat(events): re-add specific-day filter (calendar
 popup picks it)

Bring back selectedDate filtering, now driven by the calendar popup
instead of the removed week-strip: when a day is picked it takes
priority over the temporal pills and bypasses the past/upcoming split.
Add a dedicated clearSelectedDate() so the date selection can be cleared
independently of categories (a preset pill also clears it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../events/composables/useEventFilters.ts     | 56 ++++++++++++++-----
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/modules/events/composables/useEventFilters.ts b/src/modules/events/composables/useEventFilters.ts
index 8742cd1..38eb9ce 100644
--- a/src/modules/events/composables/useEventFilters.ts
+++ b/src/modules/events/composables/useEventFilters.ts
@@ -15,6 +15,10 @@ import { DEFAULT_FILTERS } from '../types/filters'
 // tapping Hosting toggled a private ref the page never saw.
 const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
 const selectedCategories = ref<EventCategory[]>([])
+// A specific day picked from the calendar popup. When set it takes
+// priority over the temporal pills + past/upcoming split (browse any
+// single day). Cleared independently of categories.
+const selectedDate = ref<Date | undefined>(undefined)
 const onlyOwnedTickets = ref(false)
 const onlyHosting = ref(false)
 const showPast = ref(false)
@@ -35,20 +39,31 @@ export function useEventFilters() {
   function applyFilters(events: Event[]): Event[] {
     let result = events
 
-    // Temporal filter (preset pills). Specific-date browsing now lives on
-    // the calendar page, so the feed only narrows by these windows.
-    result = applyTemporalFilter(result, temporal.value)
+    if (selectedDate.value) {
+      // Specific day picked from the calendar popup — takes priority over
+      // the temporal pills and bypasses the past/upcoming split so any
+      // day (past or future) can be browsed.
+      const dayStart = startOfDay(selectedDate.value)
+      const dayEnd = endOfDay(selectedDate.value)
+      result = result.filter(a => {
+        const eventEnd = a.endDate ?? a.startDate
+        return a.startDate <= dayEnd && eventEnd >= dayStart
+      })
+    } else {
+      // Temporal filter (preset pills).
+      result = applyTemporalFilter(result, temporal.value)
 
-    // Past/upcoming split — the chip narrows to one side of "now",
-    // mirroring the "My tickets" / "Hosting" mental model. Default
-    // (showPast=false) is upcoming-only; toggling on flips to past-only.
-    // Composes with temporal pills: "This Week" + showPast=true shows
-    // only the days already passed this week.
-    const now = new Date()
-    result = result.filter(a => {
-      const eventEnd = a.endDate ?? a.startDate
-      return showPast.value ? eventEnd < now : eventEnd >= now
-    })
+      // Past/upcoming split — the chip narrows to one side of "now",
+      // mirroring the "My tickets" / "Hosting" mental model. Default
+      // (showPast=false) is upcoming-only; toggling on flips to
+      // past-only. Composes with temporal pills: "This Week" +
+      // showPast=true shows only the days already passed this week.
+      const now = new Date()
+      result = result.filter(a => {
+        const eventEnd = a.endDate ?? a.startDate
+        return showPast.value ? eventEnd < now : eventEnd >= now
+      })
+    }
 
     // Category filter
     if (selectedCategories.value.length > 0) {
@@ -69,6 +84,16 @@ export function useEventFilters() {
 
   function setTemporal(value: TemporalFilter) {
     temporal.value = value
+    selectedDate.value = undefined // a preset pill clears the day pick
+  }
+
+  function selectDate(date: Date) {
+    selectedDate.value = date
+    temporal.value = 'all' // a specific day overrides the temporal pill
+  }
+
+  function clearSelectedDate() {
+    selectedDate.value = undefined
   }
 
   function toggleCategory(category: EventCategory) {
@@ -87,6 +112,7 @@ export function useEventFilters() {
   function resetFilters() {
     temporal.value = DEFAULT_FILTERS.temporal
     selectedCategories.value = []
+    selectedDate.value = undefined
     onlyOwnedTickets.value = false
     onlyHosting.value = false
     showPast.value = false
@@ -107,6 +133,7 @@ export function useEventFilters() {
   const hasActiveFilters = computed(() =>
     temporal.value !== 'all' ||
     selectedCategories.value.length > 0 ||
+    selectedDate.value !== undefined ||
     onlyOwnedTickets.value ||
     onlyHosting.value ||
     showPast.value
@@ -116,6 +143,7 @@ export function useEventFilters() {
     // State
     temporal,
     selectedCategories,
+    selectedDate,
     onlyOwnedTickets,
     onlyHosting,
     showPast,
@@ -125,6 +153,8 @@ export function useEventFilters() {
     // Actions
     applyFilters,
     setTemporal,
+    selectDate,
+    clearSelectedDate,
     toggleCategory,
     clearCategories,
     toggleOwnedTickets,

From 5753e34499bdd306606ce25ab015715609a82cf8 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 12:28:13 +0200
Subject: [PATCH 11/14] feat(events): filter the feed by day via the calendar
 popup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The calendar button now opens the date-picker popup instead of
navigating to a separate page. Picking a day filters the feed to that
day (button highlights while active) and shows a removable date chip
whose ✕ clears ONLY the date selection — distinct from category
clearing, which keeps its own clear in the filter dropdown. Dots in the
popup come from the full (unfiltered) event set.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/EventsPage.vue | 59 ++++++++++++++++++++++---
 1 file changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index 8d9c20b..eabda4f 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -8,7 +8,8 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { SlidersHorizontal, CalendarDays, Plus } from 'lucide-vue-next'
+import { SlidersHorizontal, CalendarDays, Plus, X } from 'lucide-vue-next'
+import { format } from 'date-fns'
 import brandAppLogoUrl from '@brand-app-logo?url'
 import brandAppBannerUrl from '@brand-app-banner?url'
 // Brand name flows through VITE_APP_NAME (set in vite.events.config.ts
@@ -26,23 +27,30 @@ import { useEventsStore } from '../stores/events'
 import EventSearchOverlay from '../components/EventSearchOverlay.vue'
 import TemporalFilterBar from '../components/TemporalFilterBar.vue'
 import CategoryFilterBar from '../components/CategoryFilterBar.vue'
+import EventCalendarPopup from '../components/EventCalendarPopup.vue'
 import EventList from '../components/EventList.vue'
+import { useDateLocale } from '../composables/useDateLocale'
 import type { Event } from '../types/event'
 
 const router = useRouter()
 const { t } = useI18n()
+const { dateLocale } = useDateLocale()
 const eventsStore = useEventsStore()
 
 const {
   events,
+  allEvents,
   isLoading,
   error,
   temporal,
   selectedCategories,
+  selectedDate,
   hasActiveFilters,
   showPast,
   onlyHosting,
   setTemporal,
+  selectDate,
+  clearSelectedDate,
   toggleCategory,
   clearCategories,
   togglePast,
@@ -51,6 +59,14 @@ const {
 } = useEvents()
 
 const filtersOpen = ref(false)
+const calendarOpen = ref(false)
+
+// Human label for the active day filter, shown as a removable chip.
+const selectedDateLabel = computed(() =>
+  selectedDate.value
+    ? format(selectedDate.value, 'EEE, MMM d', { locale: dateLocale.value })
+    : '',
+)
 
 // Badge count on the Filters trigger so the user can see at a glance
 // that hidden toggles (categories) are currently active even when the
@@ -77,8 +93,9 @@ function openCreate() {
   eventsStore.showCreateDialog = true
 }
 
-function openCalendar() {
-  router.push('/events/calendar')
+function onSelectDate(date: Date) {
+  // The popup closes itself; just apply the day filter.
+  selectDate(date)
 }
 </script>
 
@@ -161,15 +178,16 @@ function openCalendar() {
             @toggle-past="togglePast"
           />
         </div>
-        <!-- Calendar shortcut — sits at the end of the filter row next to
-             the temporal pills (the week-day strip was removed in favour
-             of the calendar for picking specific dates). -->
+        <!-- Calendar shortcut — opens the date-picker popup to filter the
+             feed to a single day. Highlighted while a day filter is
+             active. -->
         <Button
           variant="ghost"
           size="icon"
           class="h-8 w-8 shrink-0"
+          :class="{ 'bg-accent text-accent-foreground': selectedDate }"
           :aria-label="t('events.nav.calendar')"
-          @click="openCalendar"
+          @click="calendarOpen = true"
         >
           <CalendarDays class="h-4 w-4" />
         </Button>
@@ -183,6 +201,23 @@ function openCalendar() {
       </CollapsibleContent>
     </Collapsible>
 
+    <!-- Active day-filter chip — removing it clears ONLY the date
+         selection (categories have their own clear in the filter
+         dropdown). Shown when a day is picked from the calendar popup. -->
+    <div v-if="selectedDate" class="mb-3 flex">
+      <Button
+        variant="secondary"
+        size="sm"
+        class="h-7 gap-1.5"
+        :aria-label="t('events.filters.clearDate', 'Clear date filter')"
+        @click="clearSelectedDate"
+      >
+        <CalendarDays class="w-3.5 h-3.5" />
+        {{ selectedDateLabel }}
+        <X class="w-3.5 h-3.5" />
+      </Button>
+    </div>
+
     <!-- Create-activity CTA — shown when the Hosting bottom-nav tab is
          active. Replaces the dedicated Create entry that used to live
          in the bottom nav; lives here so it shows up exactly when the
@@ -210,5 +245,15 @@ function openCalendar() {
       :compact="onlyHosting"
       @select="handleSelectEvent"
     />
+
+    <!-- Date-picker popup: month grid with per-day event dots. Picking a
+         day filters the feed to it and closes. -->
+    <EventCalendarPopup
+      v-model:open="calendarOpen"
+      :events="allEvents"
+      :title="t('events.nav.calendar', 'Calendar')"
+      :description="t('events.calendar.pickDay', 'Pick a day to see its events')"
+      @select-date="onSelectDate"
+    />
   </div>
 </template>

From e54938ef064aa6d0526a83d4bf7af9d638e7225d Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 12:29:24 +0200
Subject: [PATCH 12/14] refactor(events): remove the standalone calendar page

The calendar is now a date-picker popup on the feed (and, next, a visual
on My Tickets), so the dedicated /events/calendar page and route are no
longer needed. Delete EventsCalendarPage.vue, drop its route, and update
the stale openCreate comment.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/index.ts                   |  9 ---
 .../events/views/EventsCalendarPage.vue       | 70 -------------------
 src/modules/events/views/EventsPage.vue       |  6 +-
 3 files changed, 2 insertions(+), 83 deletions(-)
 delete mode 100644 src/modules/events/views/EventsCalendarPage.vue

diff --git a/src/modules/events/index.ts b/src/modules/events/index.ts
index df67f58..e592b7e 100644
--- a/src/modules/events/index.ts
+++ b/src/modules/events/index.ts
@@ -33,15 +33,6 @@ export const eventsModule = createModulePlugin({
         requiresAuth: false,
       },
     },
-    {
-      path: '/events/calendar',
-      name: 'events-calendar',
-      component: () => import('./views/EventsCalendarPage.vue'),
-      meta: {
-        title: 'Calendar',
-        requiresAuth: false,
-      },
-    },
     {
       path: '/events/map',
       name: 'events-map',
diff --git a/src/modules/events/views/EventsCalendarPage.vue b/src/modules/events/views/EventsCalendarPage.vue
deleted file mode 100644
index 9040fcd..0000000
--- a/src/modules/events/views/EventsCalendarPage.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { ArrowLeft, Ticket } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { useEvents } from '../composables/useEvents'
-import { useOwnedTickets } from '../composables/useOwnedTickets'
-import { useAuth } from '@/composables/useAuthService'
-import EventCalendarView from '../components/EventCalendarView.vue'
-import type { Event } from '../types/event'
-
-const router = useRouter()
-const { t } = useI18n()
-const { allEvents, subscribe } = useEvents()
-const { ownedEventIds } = useOwnedTickets()
-const { isAuthenticated } = useAuth()
-
-// Per-page toggle, intentionally not wired to the feed's
-// onlyOwnedTickets filter — narrowing the calendar shouldn't also
-// narrow the feed the user navigates back to.
-const onlyMine = ref(false)
-
-const visibleEvents = computed<Event[]>(() => {
-  if (!onlyMine.value) return allEvents.value
-  const owned = ownedEventIds.value
-  return allEvents.value.filter(a => owned.has(a.id))
-})
-
-onMounted(() => {
-  subscribe()
-})
-
-function handleSelectEvent(event: Event) {
-  router.push({ name: 'event-detail', params: { id: event.id } })
-}
-
-function goBack() {
-  router.push({ name: 'events' })
-}
-</script>
-
-<template>
-  <div class="container mx-auto px-4 py-6 max-w-lg">
-    <!-- Back to the events feed (mirrors EventDetailPage) + the
-         My-tickets filter on one row. Both left-aligned so they clear
-         the fixed top-right hamburger menu, and the filter no longer
-         takes a row to itself. -->
-    <div class="flex items-center gap-2 mb-4">
-      <Button variant="ghost" size="sm" class="gap-1.5" @click="goBack">
-        <ArrowLeft class="w-4 h-4" />
-        {{ t('common.nav.back', 'Back') }}
-      </Button>
-      <Button
-        v-if="isAuthenticated"
-        :variant="onlyMine ? 'default' : 'outline'"
-        size="sm"
-        class="gap-1.5"
-        @click="onlyMine = !onlyMine"
-      >
-        <Ticket class="w-3.5 h-3.5" />
-        {{ t('events.filters.myTickets', 'My tickets') }}
-      </Button>
-    </div>
-    <EventCalendarView
-      :events="visibleEvents"
-      @select-event="handleSelectEvent"
-    />
-  </div>
-</template>
diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index eabda4f..9cb625c 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -84,10 +84,8 @@ function handleSelectEvent(event: Event) {
   router.push({ name: 'event-detail', params: { id: event.id } })
 }
 
-// Create-activity CTA in the Hosting view. Calendar-tab → page lives
-// on /events/calendar; the icon button at the end of the date
-// strip is the only entry point now that the bottom-nav Calendar
-// tab is gone.
+// Create-activity CTA in the Hosting view. Replaces the old bottom-nav
+// Create entry; shown only while the Hosting filter is active.
 function openCreate() {
   eventsStore.editingEvent = null
   eventsStore.showCreateDialog = true

From 76af245192b4ea1a630efbac2814050d9e9fcc78 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 12:32:11 +0200
Subject: [PATCH 13/14] feat(events): add calendar date visual to My Tickets

Replaces the My-tickets filter that lived on the removed calendar page.
A calendar button opens the date-picker popup with per-day dots over the
user's own events; picking a day filters the ticket list to it (a
removable date chip overrides the upcoming/past toggle while active).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/MyTicketsPage.vue | 114 +++++++++++++++++----
 1 file changed, 96 insertions(+), 18 deletions(-)

diff --git a/src/modules/events/views/MyTicketsPage.vue b/src/modules/events/views/MyTicketsPage.vue
index 94e851f..de9ae09 100644
--- a/src/modules/events/views/MyTicketsPage.vue
+++ b/src/modules/events/views/MyTicketsPage.vue
@@ -10,10 +10,14 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { format } from 'date-fns'
-import { Ticket, User, CreditCard, CheckCircle, Clock, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { format, startOfDay, endOfDay } from 'date-fns'
+import { Ticket, User, CreditCard, CheckCircle, Clock, AlertCircle, ChevronLeft, ChevronRight, CalendarDays, X } from 'lucide-vue-next'
+import EventCalendarPopup from '../components/EventCalendarPopup.vue'
+import { useDateLocale } from '../composables/useDateLocale'
+import type { Event } from '../types/event'
 
 const { isAuthenticated, userDisplay } = useAuth()
+const { dateLocale } = useDateLocale()
 const {
   tickets,
   groupedTickets,
@@ -50,10 +54,47 @@ function isGroupPast(eventId: string): boolean {
   return end < new Date()
 }
 
-const visibleGroups = computed(() =>
-  groupedTickets.value.filter(g => isGroupPast(g.eventId) === showPast.value),
+// Calendar popup: visualise the days the user has events. Picking a day
+// filters the ticket list to it (overriding the upcoming/past toggle);
+// clearing it returns to the toggle.
+const calendarOpen = ref(false)
+const selectedDay = ref<Date | null>(null)
+
+// The user's events (resolved from their ticket groups) — feeds the
+// calendar popup's per-day dots.
+const myEvents = computed<Event[]>(() => {
+  const out: Event[] = []
+  for (const g of groupedTickets.value) {
+    const ev = eventsStore.getEventById(g.eventId)
+    if (ev) out.push(ev)
+  }
+  return out
+})
+
+const selectedDayLabel = computed(() =>
+  selectedDay.value
+    ? format(selectedDay.value, 'EEE, MMM d', { locale: dateLocale.value })
+    : '',
 )
 
+function isGroupOnDay(eventId: string, day: Date): boolean {
+  const ev = eventsStore.getEventById(eventId)
+  if (!ev) return false
+  const end = ev.endDate ?? ev.startDate
+  return ev.startDate <= endOfDay(day) && end >= startOfDay(day)
+}
+
+function onSelectDay(date: Date) {
+  selectedDay.value = date
+}
+
+const visibleGroups = computed(() => {
+  if (selectedDay.value) {
+    return groupedTickets.value.filter(g => isGroupOnDay(g.eventId, selectedDay.value!))
+  }
+  return groupedTickets.value.filter(g => isGroupPast(g.eventId) === showPast.value)
+})
+
 // Tab counts derived from the visible (past/upcoming-filtered) groups so
 // the badges match what's actually shown.
 const visibleCounts = computed(() => {
@@ -205,25 +246,52 @@ onMounted(async () => {
     </div>
 
     <div v-else-if="tickets.length > 0">
-      <!-- Upcoming/Past toggle — own row, left-aligned so it clears the
-           fixed top-right hamburger menu. Defaults to upcoming so the
-           list isn't cluttered with events that already happened. -->
-      <div class="mb-4 inline-flex rounded-md border p-0.5">
+      <!-- Filter row — own row, left-aligned so it clears the fixed
+           top-right hamburger menu. Upcoming/Past toggle by default;
+           when a day is picked from the calendar it's replaced by a
+           removable date chip (the day overrides the toggle). The
+           calendar button opens a popup visualising the user's event
+           dates. -->
+      <div class="mb-4 flex items-center gap-2">
+        <div v-if="!selectedDay" class="inline-flex rounded-md border p-0.5">
+          <Button
+            :variant="!showPast ? 'default' : 'ghost'"
+            size="sm"
+            class="h-7"
+            @click="showPast = false"
+          >
+            Upcoming
+          </Button>
+          <Button
+            :variant="showPast ? 'default' : 'ghost'"
+            size="sm"
+            class="h-7"
+            @click="showPast = true"
+          >
+            Past
+          </Button>
+        </div>
         <Button
-          :variant="!showPast ? 'default' : 'ghost'"
+          v-else
+          variant="secondary"
           size="sm"
-          class="h-7"
-          @click="showPast = false"
+          class="h-7 gap-1.5"
+          aria-label="Clear day filter"
+          @click="selectedDay = null"
         >
-          Upcoming
+          <CalendarDays class="w-3.5 h-3.5" />
+          {{ selectedDayLabel }}
+          <X class="w-3.5 h-3.5" />
         </Button>
         <Button
-          :variant="showPast ? 'default' : 'ghost'"
-          size="sm"
-          class="h-7"
-          @click="showPast = true"
+          variant="ghost"
+          size="icon"
+          class="h-8 w-8 shrink-0"
+          :class="{ 'bg-accent text-accent-foreground': selectedDay }"
+          aria-label="Open calendar"
+          @click="calendarOpen = true"
         >
-          Past
+          <CalendarDays class="h-4 w-4" />
         </Button>
       </div>
 
@@ -239,7 +307,7 @@ onMounted(async () => {
         <TabsContent value="all">
           <ScrollArea class="h-[600px] w-full pr-4">
             <div v-if="visibleGroups.length === 0" class="text-center py-8 text-muted-foreground">
-              {{ showPast ? 'No past tickets' : 'No upcoming tickets' }}
+              {{ selectedDay ? 'No tickets on this day' : (showPast ? 'No past tickets' : 'No upcoming tickets') }}
             </div>
             <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
               <Card v-for="group in visibleGroups" :key="group.eventId" class="flex flex-col">
@@ -414,5 +482,15 @@ onMounted(async () => {
         </TabsContent>
       </Tabs>
     </div>
+
+    <!-- Calendar popup: dots show the days the user has events; picking
+         one filters the ticket list to that day. -->
+    <EventCalendarPopup
+      v-model:open="calendarOpen"
+      :events="myEvents"
+      title="Your event dates"
+      description="Pick a day to see your tickets for it"
+      @select-date="onSelectDay"
+    />
   </div>
 </template>

From 9d98f3fdf24591e6db23b55ad5081f3623c5ed22 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 12:55:33 +0200
Subject: [PATCH 14/14] fix(events): close calendar popup on route leave

Defensive guard so the date-picker popup can never linger across
navigation (reported: it appeared open on the feed after returning from
an event detail page). Force calendarOpen=false in onBeforeRouteLeave on
both the feed and My Tickets, the two popup hosts. Modals shouldn't
survive a route change regardless of how the close/navigation interleave.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/EventsPage.vue    | 9 ++++++++-
 src/modules/events/views/MyTicketsPage.vue | 7 ++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index 9cb625c..121941e 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, onBeforeRouteLeave } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import {
@@ -95,6 +95,13 @@ function onSelectDate(date: Date) {
   // The popup closes itself; just apply the day filter.
   selectDate(date)
 }
+
+// Safety: never let the date-picker popup persist across navigation —
+// e.g. it should not reappear when returning to the feed from an event
+// detail page.
+onBeforeRouteLeave(() => {
+  calendarOpen.value = false
+})
 </script>
 
 <template>
diff --git a/src/modules/events/views/MyTicketsPage.vue b/src/modules/events/views/MyTicketsPage.vue
index de9ae09..b21312c 100644
--- a/src/modules/events/views/MyTicketsPage.vue
+++ b/src/modules/events/views/MyTicketsPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, onBeforeRouteLeave } from 'vue-router'
 import { useUserTickets } from '../composables/useUserTickets'
 import { useEvents } from '../composables/useEvents'
 import { useEventsStore } from '../stores/events'
@@ -88,6 +88,11 @@ function onSelectDay(date: Date) {
   selectedDay.value = date
 }
 
+// Don't let the calendar popup persist across navigation.
+onBeforeRouteLeave(() => {
+  calendarOpen.value = false
+})
+
 const visibleGroups = computed(() => {
   if (selectedDay.value) {
     return groupedTickets.value.filter(g => isGroupOnDay(g.eventId, selectedDay.value!))