From f6c15beb81da59f1e090103947dd42bb4e0e09ea Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 25 May 2026 11:37:46 +0200
Subject: [PATCH 1/2] feat(activities): hide past events by default + "Past
 events" filter chip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes aiolabs/webapp#72.

useActivityFilters gains `showPast` (default false) and `togglePast`.
applyFilters drops activities whose end-or-start date is before now
unless the chip is toggled on. Sits next to the existing temporal
filter inside the no-selectedDate branch, so picking a specific past
date in the DatePickerStrip still surfaces that day's activities —
mirroring how date-pick already bypasses the temporal pills. Counts
as an active filter and resets cleanly.

ActivitiesPage adds the chip in the role-filter row, outside the
auth gate so logged-out users can still browse past events. Uses the
lucide `History` icon.

ActivityCard gains an `isPast` computed and renders a small Past
badge bottom-left when applicable, suppressed when a Pending /
Rejected status badge is already taking that slot (creator's own
past draft — vanishingly rare, status hint is more actionable).

ActivityDetailPage replaces the Buy ticket CTA with a muted "This
event has already happened" notice when the event is past, so the
buy flow stays unambiguous even when the user lands on a past
event by direct link. The owned-tickets pill above still renders so
past attendees can still see their tickets.

i18n: pastEvents (chip) + past (badge) + pastEvent (detail notice)
added to en/es/fr.
---
 src/i18n/locales/en.ts                        |  3 ++
 src/i18n/locales/es.ts                        |  3 ++
 src/i18n/locales/fr.ts                        |  3 ++
 src/i18n/types.ts                             |  3 ++
 .../activities/components/ActivityCard.vue    | 25 ++++++++-
 .../composables/useActivityFilters.ts         | 31 ++++++++++-
 .../activities/views/ActivitiesPage.vue       | 51 ++++++++++++-------
 .../activities/views/ActivityDetailPage.vue   | 22 +++++++-
 8 files changed, 118 insertions(+), 23 deletions(-)

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 0c529a2..b72b5fc 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -59,6 +59,8 @@ const messages: LocaleMessages = {
       thisMonth: 'This Month',
       myTickets: 'My tickets',
       hosting: 'Hosting',
+      pastEvents: 'Past events',
+      past: 'Past',
     },
     categories: {
       concert: 'Concert',
@@ -104,6 +106,7 @@ const messages: LocaleMessages = {
       buyAnotherTicket: 'Buy another ticket',
       viewMyTickets: 'View in My Tickets',
       soldOut: 'Sold Out',
+      pastEvent: 'This event has already happened',
       free: 'Free',
     },
     tickets: {
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index e72be71..4d57c91 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -59,6 +59,8 @@ const messages: LocaleMessages = {
       thisMonth: 'Este mes',
       myTickets: 'Mis boletos',
       hosting: 'Organizo',
+      pastEvents: 'Eventos pasados',
+      past: 'Pasado',
     },
     categories: {
       concert: 'Concierto',
@@ -104,6 +106,7 @@ const messages: LocaleMessages = {
       buyAnotherTicket: 'Comprar otro boleto',
       viewMyTickets: 'Ver en Mis boletos',
       soldOut: 'Agotado',
+      pastEvent: 'Este evento ya pasó',
       free: 'Gratis',
     },
     tickets: {
diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts
index 3b6ed76..3c429ad 100644
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -59,6 +59,8 @@ const messages: LocaleMessages = {
       thisMonth: 'Ce mois-ci',
       myTickets: 'Mes billets',
       hosting: 'J\'organise',
+      pastEvents: 'Événements passés',
+      past: 'Passé',
     },
     categories: {
       concert: 'Concert',
@@ -104,6 +106,7 @@ const messages: LocaleMessages = {
       buyAnotherTicket: 'Acheter un autre billet',
       viewMyTickets: 'Voir dans Mes billets',
       soldOut: 'Épuisé',
+      pastEvent: 'Cet événement est déjà passé',
       free: 'Gratuit',
     },
     tickets: {
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index 4e5584d..05c7282 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -60,6 +60,8 @@ export interface LocaleMessages {
       thisMonth: string
       myTickets: string
       hosting: string
+      pastEvents: string
+      past: string
     }
     categories: Record<string, string>
     detail: {
@@ -79,6 +81,7 @@ export interface LocaleMessages {
       buyAnotherTicket: string
       viewMyTickets: string
       soldOut: string
+      pastEvent: string
       free: string
     }
     tickets: {
diff --git a/src/modules/activities/components/ActivityCard.vue b/src/modules/activities/components/ActivityCard.vue
index d16c376..442f423 100644
--- a/src/modules/activities/components/ActivityCard.vue
+++ b/src/modules/activities/components/ActivityCard.vue
@@ -4,7 +4,7 @@ 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, CheckCircle2 } from 'lucide-vue-next'
+import { MapPin, Calendar, Ticket, User, CheckCircle2, History } from 'lucide-vue-next'
 import BookmarkButton from './BookmarkButton.vue'
 import { useDateLocale } from '../composables/useDateLocale'
 import { useOwnedTickets } from '../composables/useOwnedTickets'
@@ -58,6 +58,13 @@ const placeholderBg = computed(() => {
   const hue = hash % 360
   return `hsl(${hue}, 40%, 85%)`
 })
+
+const isPast = computed(() => {
+  const a = props.activity
+  const end = a.endDate ?? a.startDate
+  if (!end || isNaN(end.getTime())) return false
+  return end.getTime() < Date.now()
+})
 </script>
 
 <template>
@@ -121,6 +128,22 @@ const placeholderBg = computed(() => {
       >
         {{ activity.lnbitsStatus === 'rejected' ? 'Rejected' : 'Pending review' }}
       </Badge>
+
+      <!-- Past badge — shown when the activity has already ended.
+           Only relevant on the feed when the "Past events" filter
+           chip is toggled on (otherwise these cards aren't rendered);
+           on the detail page the card view isn't used. Suppressed
+           when a pending/rejected status badge is taking the same
+           slot — that case is the creator's own past draft, which is
+           vanishingly rare and the status hint is more actionable. -->
+      <Badge
+        v-if="isPast && !(activity.lnbitsStatus && activity.lnbitsStatus !== 'approved')"
+        variant="outline"
+        class="absolute bottom-2 left-2 text-xs gap-1 bg-background/80 backdrop-blur"
+      >
+        <History class="w-3 h-3" />
+        {{ t('activities.filters.past', 'Past') }}
+      </Badge>
     </div>
 
     <CardContent class="p-4 flex-1 flex flex-col gap-2">
diff --git a/src/modules/activities/composables/useActivityFilters.ts b/src/modules/activities/composables/useActivityFilters.ts
index 4aba255..6585faa 100644
--- a/src/modules/activities/composables/useActivityFilters.ts
+++ b/src/modules/activities/composables/useActivityFilters.ts
@@ -29,6 +29,14 @@ export function useActivityFilters() {
    * which `useActivities.tagOwnership()` populates.
    */
   const onlyHosting = ref(false)
+  /**
+   * When false (default), activities that have already ended are
+   * hidden from the feed. Toggling on includes them so the user can
+   * browse past events. The date-picker overrides this — picking a
+   * specific past date shows that day's activities regardless,
+   * mirroring how it overrides the temporal pills.
+   */
+  const showPast = ref(false)
 
   const filters = computed<ActivityFilters>(() => ({
     temporal: temporal.value,
@@ -41,7 +49,9 @@ export function useActivityFilters() {
   function applyFilters(activities: Activity[]): Activity[] {
     let result = activities
 
-    // Specific date filter (from DatePickerStrip) takes priority over temporal
+    // Specific date filter (from DatePickerStrip) takes priority over
+    // temporal. Picking a date also bypasses the past-events hide so
+    // the user can browse activities for any day they choose.
     if (selectedDate.value) {
       const dayStart = startOfDay(selectedDate.value)
       const dayEnd = endOfDay(selectedDate.value)
@@ -52,6 +62,15 @@ export function useActivityFilters() {
     } else {
       // Temporal filter
       result = applyTemporalFilter(result, temporal.value)
+      // Past-events hide (default ON). Composes with temporal pills:
+      // e.g. "This Week" + showPast=false drops days already passed.
+      if (!showPast.value) {
+        const now = new Date()
+        result = result.filter(a => {
+          const activityEnd = a.endDate ?? a.startDate
+          return activityEnd >= now
+        })
+      }
     }
 
     // Category filter
@@ -104,6 +123,7 @@ export function useActivityFilters() {
     selectedDate.value = undefined
     onlyOwnedTickets.value = false
     onlyHosting.value = false
+    showPast.value = false
   }
 
   function toggleOwnedTickets() {
@@ -114,12 +134,17 @@ export function useActivityFilters() {
     onlyHosting.value = !onlyHosting.value
   }
 
+  function togglePast() {
+    showPast.value = !showPast.value
+  }
+
   const hasActiveFilters = computed(() =>
     temporal.value !== 'all' ||
     selectedCategories.value.length > 0 ||
     selectedDate.value !== undefined ||
     onlyOwnedTickets.value ||
-    onlyHosting.value
+    onlyHosting.value ||
+    showPast.value
   )
 
   return {
@@ -129,6 +154,7 @@ export function useActivityFilters() {
     selectedDate,
     onlyOwnedTickets,
     onlyHosting,
+    showPast,
     filters,
     hasActiveFilters,
 
@@ -140,6 +166,7 @@ export function useActivityFilters() {
     clearCategories,
     toggleOwnedTickets,
     toggleHosting,
+    togglePast,
     resetFilters,
   }
 }
diff --git a/src/modules/activities/views/ActivitiesPage.vue b/src/modules/activities/views/ActivitiesPage.vue
index ccfc08e..c1fd712 100644
--- a/src/modules/activities/views/ActivitiesPage.vue
+++ b/src/modules/activities/views/ActivitiesPage.vue
@@ -8,7 +8,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { SlidersHorizontal, ChevronDown, Ticket, Megaphone } from 'lucide-vue-next'
+import { SlidersHorizontal, ChevronDown, Ticket, Megaphone, History } from 'lucide-vue-next'
 import { useActivities } from '../composables/useActivities'
 import { useAuth } from '@/composables/useAuthService'
 import ActivitySearchOverlay from '../components/ActivitySearchOverlay.vue'
@@ -31,12 +31,14 @@ const {
   selectedDate,
   onlyOwnedTickets,
   onlyHosting,
+  showPast,
   selectDate,
   setTemporal,
   toggleCategory,
   clearCategories,
   toggleOwnedTickets,
   toggleHosting,
+  togglePast,
   resetFilters,
   subscribe,
 } = useActivities()
@@ -81,27 +83,40 @@ function handleSelectActivity(activity: Activity) {
       <TemporalFilterBar :model-value="temporal" @update:model-value="setTemporal" />
     </div>
 
-    <!-- Role filter chips — narrow the feed to activities the user
-         has skin in. Hidden when logged out (nothing to filter on).
-         "My tickets" = attending; "Hosting" = organizing. -->
-    <div v-if="isAuthenticated" class="mb-4 flex flex-wrap gap-2">
+    <!-- Role + past-events filter chips. The role chips ("My tickets",
+         "Hosting") narrow the feed to activities the signed-in user
+         has skin in and are hidden when logged out. The "Past events"
+         chip is always visible since past-browsing doesn't require an
+         account. -->
+    <div class="mb-4 flex flex-wrap gap-2">
+      <template v-if="isAuthenticated">
+        <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>
+        <Button
+          :variant="onlyHosting ? 'default' : 'outline'"
+          size="sm"
+          class="gap-1.5"
+          @click="toggleHosting"
+        >
+          <Megaphone class="w-3.5 h-3.5" />
+          {{ t('activities.filters.hosting', 'Hosting') }}
+        </Button>
+      </template>
       <Button
-        :variant="onlyOwnedTickets ? 'default' : 'outline'"
+        :variant="showPast ? 'default' : 'outline'"
         size="sm"
         class="gap-1.5"
-        @click="toggleOwnedTickets"
+        @click="togglePast"
       >
-        <Ticket class="w-3.5 h-3.5" />
-        {{ t('activities.filters.myTickets', 'My tickets') }}
-      </Button>
-      <Button
-        :variant="onlyHosting ? 'default' : 'outline'"
-        size="sm"
-        class="gap-1.5"
-        @click="toggleHosting"
-      >
-        <Megaphone class="w-3.5 h-3.5" />
-        {{ t('activities.filters.hosting', 'Hosting') }}
+        <History class="w-3.5 h-3.5" />
+        {{ t('activities.filters.pastEvents', 'Past events') }}
       </Button>
     </div>
 
diff --git a/src/modules/activities/views/ActivityDetailPage.vue b/src/modules/activities/views/ActivityDetailPage.vue
index fe9d322..5c89564 100644
--- a/src/modules/activities/views/ActivityDetailPage.vue
+++ b/src/modules/activities/views/ActivityDetailPage.vue
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import {
-  Calendar, MapPin, ArrowLeft, Pencil, Ticket, CheckCircle2, ScanLine,
+  Calendar, MapPin, ArrowLeft, Pencil, Ticket, CheckCircle2, ScanLine, History,
 } from 'lucide-vue-next'
 import { useActivityDetail } from '../composables/useActivityDetail'
 import BookmarkButton from '../components/BookmarkButton.vue'
@@ -130,6 +130,17 @@ const canBuyTicket = computed(() => {
   return info.available === undefined || info.available > 0
 })
 
+// Past events can't be bought into. The notice below replaces the
+// buy CTA so the flow is unambiguous — date alone is easy to miss
+// on a long detail page.
+const isPast = computed(() => {
+  const a = activity.value
+  if (!a) return false
+  const end = a.endDate ?? a.startDate
+  if (!end || isNaN(end.getTime())) return false
+  return end.getTime() < Date.now()
+})
+
 const showPurchaseDialog = ref(false)
 
 function openPurchaseDialog() {
@@ -320,7 +331,14 @@ function goToMyTickets() {
           </Button>
         </div>
 
-        <div v-if="canBuyTicket">
+        <div
+          v-if="isPast"
+          class="flex items-center justify-center gap-1.5 text-sm text-muted-foreground bg-muted/40 rounded-lg p-3"
+        >
+          <History class="w-4 h-4 shrink-0" />
+          {{ t('activities.detail.pastEvent', 'This event has already happened') }}
+        </div>
+        <div v-else-if="canBuyTicket">
           <Button
             class="w-full gap-1.5"
             size="lg"
-- 
2.53.0


From aa2e573f0e69fd8ade986c342bb068a923520aee Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 25 May 2026 11:46:19 +0200
Subject: [PATCH 2/2] fix(activities): "Past events" chip narrows to past-only,
 not include-past
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The chip should mirror the "My tickets" / "Hosting" mental model
(narrow to *only* X), not "additionally include X". Toggling ON with
"This Week" / "This Month" / "Tomorrow" was leaking upcoming events
through — confusing because the other role chips don't behave that
way.

Flip the past-events filter from a hide-when-off guard to a
side-of-now split: showPast=false → upcoming-only (default),
showPast=true → past-only. The DatePickerStrip override stays outside
this branch so date-pick still bypasses the split.
---
 .../composables/useActivityFilters.ts         | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/modules/activities/composables/useActivityFilters.ts b/src/modules/activities/composables/useActivityFilters.ts
index 6585faa..8f9914b 100644
--- a/src/modules/activities/composables/useActivityFilters.ts
+++ b/src/modules/activities/composables/useActivityFilters.ts
@@ -50,8 +50,8 @@ export function useActivityFilters() {
     let result = activities
 
     // Specific date filter (from DatePickerStrip) takes priority over
-    // temporal. Picking a date also bypasses the past-events hide so
-    // the user can browse activities for any day they choose.
+    // temporal. Picking a date also bypasses the past/upcoming split
+    // so the user can browse activities for any day they choose.
     if (selectedDate.value) {
       const dayStart = startOfDay(selectedDate.value)
       const dayEnd = endOfDay(selectedDate.value)
@@ -62,15 +62,16 @@ export function useActivityFilters() {
     } else {
       // Temporal filter
       result = applyTemporalFilter(result, temporal.value)
-      // Past-events hide (default ON). Composes with temporal pills:
-      // e.g. "This Week" + showPast=false drops days already passed.
-      if (!showPast.value) {
-        const now = new Date()
-        result = result.filter(a => {
-          const activityEnd = a.endDate ?? a.startDate
-          return activityEnd >= 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 activityEnd = a.endDate ?? a.startDate
+        return showPast.value ? activityEnd < now : activityEnd >= now
+      })
     }
 
     // Category filter
-- 
2.53.0