From 0823b0f0761e9d525f73686263d9e5f6b5b40a79 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 4 Jun 2026 22:44:39 +0200
Subject: [PATCH] feat(activities): My tickets toggle on the calendar view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a small filter chip above the month grid that, when on, limits
the calendar to events the signed-in user holds at least one paid
ticket for (intersecting ownedActivityIds from useOwnedTickets).
Hidden when logged out — nothing to own. Left-aligned so it
doesn't collide with the fixed top-right hamburger menu.

State is local to the page on purpose: narrowing the calendar
shouldn't also narrow the feed when the user navigates back.
---
 .../views/ActivitiesCalendarPage.vue          | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/modules/activities/views/ActivitiesCalendarPage.vue b/src/modules/activities/views/ActivitiesCalendarPage.vue
index c56b12a..3c4eccf 100644
--- a/src/modules/activities/views/ActivitiesCalendarPage.vue
+++ b/src/modules/activities/views/ActivitiesCalendarPage.vue
@@ -1,12 +1,31 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { Ticket } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
 import { useActivities } from '../composables/useActivities'
+import { useOwnedTickets } from '../composables/useOwnedTickets'
+import { useAuth } from '@/composables/useAuthService'
 import ActivityCalendarView from '../components/ActivityCalendarView.vue'
 import type { Activity } from '../types/activity'
 
 const router = useRouter()
+const { t } = useI18n()
 const { allActivities, subscribe } = useActivities()
+const { ownedActivityIds } = 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 visibleActivities = computed<Activity[]>(() => {
+  if (!onlyMine.value) return allActivities.value
+  const owned = ownedActivityIds.value
+  return allActivities.value.filter(a => owned.has(a.id))
+})
 
 onMounted(() => {
   subscribe()
@@ -19,8 +38,23 @@ function handleSelectActivity(activity: Activity) {
 
 <template>
   <div class="container mx-auto px-4 py-6 max-w-lg">
+    <!-- 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
+        :variant="onlyMine ? 'default' : 'outline'"
+        size="sm"
+        class="gap-1.5"
+        @click="onlyMine = !onlyMine"
+      >
+        <Ticket class="w-3.5 h-3.5" />
+        {{ t('activities.filters.myTickets', 'My tickets') }}
+      </Button>
+    </div>
     <ActivityCalendarView
-      :activities="allActivities"
+      :activities="visibleActivities"
       @select-activity="handleSelectActivity"
     />
   </div>