From 3514d934511c3de05ed7333434a2f56524869221 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 18 Jun 2026 14:31:39 +0200
Subject: [PATCH] feat(events): show selected categories as deselectable chips
 in calendar popup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The calendar popup already narrows its day-dots to the active category
filter; surface those categories inside the popup so the user can see —
and loosen — what's narrowing it without closing. Renders only the
selected categories as removable chips; clicking one emits toggle-category
to the parent, which reactively re-widens the dots in place.

- EventCalendarPopup: optional selectedCategories prop (defaults to none
  for callers like My Tickets) + toggle-category emit; chip row between
  the header and the month grid.
- EventsPage: wire selectedCategories + toggleCategory through.
- i18n: events.filters.filteringBy + removeCategory (en/fr/es + schema).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/i18n/locales/en.ts                        |  2 +
 src/i18n/locales/es.ts                        |  2 +
 src/i18n/locales/fr.ts                        |  2 +
 src/i18n/types.ts                             |  2 +
 .../events/components/EventCalendarPopup.vue  | 55 +++++++++++++++++--
 src/modules/events/views/EventsPage.vue       |  2 +
 6 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 34f4bc6..cacfb8c 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -71,6 +71,8 @@ const messages: LocaleMessages = {
       past: 'Past',
       filters: 'Filters',
       clearAll: 'Clear all',
+      filteringBy: 'Filtering by:',
+      removeCategory: 'Remove {category} filter',
     },
     categories: {
       concert: 'Concert',
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index 048c71a..898352b 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -71,6 +71,8 @@ const messages: LocaleMessages = {
       past: 'Pasado',
       filters: 'Filtros',
       clearAll: 'Limpiar todo',
+      filteringBy: 'Filtrando por:',
+      removeCategory: 'Quitar el filtro {category}',
     },
     categories: {
       concert: 'Concierto',
diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts
index 57b3797..9638e69 100644
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -71,6 +71,8 @@ const messages: LocaleMessages = {
       past: 'Passé',
       filters: 'Filtres',
       clearAll: 'Tout effacer',
+      filteringBy: 'Filtré par :',
+      removeCategory: 'Retirer le filtre {category}',
     },
     categories: {
       concert: 'Concert',
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index f4177ba..ecdf42f 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -72,6 +72,8 @@ export interface LocaleMessages {
       past: string
       filters: string
       clearAll: string
+      filteringBy: string
+      removeCategory: string
     }
     categories: Record<string, string>
     detail: {
diff --git a/src/modules/events/components/EventCalendarPopup.vue b/src/modules/events/components/EventCalendarPopup.vue
index 955d805..546c16f 100644
--- a/src/modules/events/components/EventCalendarPopup.vue
+++ b/src/modules/events/components/EventCalendarPopup.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import {
   DialogRoot,
   DialogPortal,
@@ -10,8 +11,10 @@ import {
   DialogClose,
 } from 'reka-ui'
 import { X } from 'lucide-vue-next'
+import { Badge } from '@/components/ui/badge'
 import EventCalendarView from './EventCalendarView.vue'
 import type { Event } from '../types/event'
+import type { EventCategory } from '../types/category'
 
 // 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
@@ -21,23 +24,40 @@ import type { Event } from '../types/event'
 // DialogContent) so it can use a light, blurred overlay instead of the
 // usual opaque dark dim — the feed stays visible, softly blurred, behind
 // the frosted-glass panel.
-const props = defineProps<{
-  open: boolean
-  events: Event[]
-  title: string
-  description: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+    events: Event[]
+    title: string
+    description: string
+    // Active category filter mirrored from the feed. Rendered as
+    // deselectable chips so the user can see — and loosen — what's
+    // narrowing the calendar without closing it. Defaults to none for
+    // callers that don't filter by category (e.g. My Tickets).
+    selectedCategories?: EventCategory[]
+  }>(),
+  {
+    selectedCategories: () => [],
+  },
+)
 
 const emit = defineEmits<{
   'update:open': [value: boolean]
   selectDate: [date: Date]
+  'toggle-category': [category: EventCategory]
 }>()
 
+const { t } = useI18n()
+
 const isOpen = computed({
   get: () => props.open,
   set: (v) => emit('update:open', v),
 })
 
+function categoryLabel(cat: EventCategory): string {
+  return t(`events.categories.${cat}`, cat)
+}
+
 function onSelectDate(date: Date) {
   emit('selectDate', date)
   isOpen.value = false
@@ -62,6 +82,29 @@ function onSelectDate(date: Date) {
             {{ description }}
           </DialogDescription>
         </div>
+        <!-- Active category filter — only the selected categories, each
+             removable. Clicking deselects via the parent's toggle, which
+             reactively re-narrows the calendar dots without closing. -->
+        <div
+          v-if="selectedCategories.length"
+          class="flex flex-wrap items-center gap-1.5"
+        >
+          <span class="text-xs text-muted-foreground">
+            {{ t('events.filters.filteringBy') }}
+          </span>
+          <Badge
+            v-for="cat in selectedCategories"
+            :key="cat"
+            variant="secondary"
+            class="cursor-pointer gap-1 text-xs select-none hover:opacity-80 transition-opacity"
+            :aria-label="t('events.filters.removeCategory', { category: categoryLabel(cat) })"
+            @click="emit('toggle-category', cat)"
+          >
+            {{ categoryLabel(cat) }}
+            <X class="w-3 h-3" />
+          </Badge>
+        </div>
+
         <EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
         <DialogClose
           class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index 7ffc44d..a02857b 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -268,9 +268,11 @@ onBeforeRouteLeave(() => {
     <EventCalendarPopup
       v-model:open="calendarOpen"
       :events="calendarEvents"
+      :selected-categories="selectedCategories"
       :title="t('events.nav.calendar', 'Calendar')"
       :description="t('events.calendar.pickDay', 'Pick a day to see its events')"
       @select-date="onSelectDate"
+      @toggle-category="toggleCategory"
     />
   </div>
 </template>