From 2b103cfaeafc92deab1477b4e2d8ecc921a1c5c3 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 4 Jun 2026 22:00:02 +0200
Subject: [PATCH] feat(activities): reclaim vertical space above the feed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Past events no longer gets its own row — it folds into the existing
collapsible (renamed "Filters") alongside Categories, so the feed
gains that row by default. The Filters trigger badge counts past-
events being on plus any selected categories, so users still see at
a glance when hidden toggles are active.

The standalone "Filters active / Clear all" notice is gone too;
Clear all sits inline beside the trigger only when something's
active. Header is tightened (text-xl) and inter-row margins drop
from mb-4 to mb-3 across the date strip + temporal pills.
---
 src/i18n/locales/en.ts                  |   2 +
 src/i18n/locales/es.ts                  |   2 +
 src/i18n/locales/fr.ts                  |   2 +
 src/i18n/types.ts                       |   2 +
 src/modules/events/views/EventsPage.vue | 105 +++++++++++++-----------
 5 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 7adc7fe..bea78ff 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -69,6 +69,8 @@ const messages: LocaleMessages = {
       hosting: 'Hosting',
       pastEvents: 'Past events',
       past: 'Past',
+      filters: 'Filters',
+      clearAll: 'Clear all',
     },
     categories: {
       concert: 'Concert',
diff --git a/src/i18n/locales/es.ts b/src/i18n/locales/es.ts
index 555ecc3..edc5d82 100644
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -69,6 +69,8 @@ const messages: LocaleMessages = {
       hosting: 'Organizo',
       pastEvents: 'Eventos pasados',
       past: 'Pasado',
+      filters: 'Filtros',
+      clearAll: 'Limpiar todo',
     },
     categories: {
       concert: 'Concierto',
diff --git a/src/i18n/locales/fr.ts b/src/i18n/locales/fr.ts
index fad6af0..543f715 100644
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -69,6 +69,8 @@ const messages: LocaleMessages = {
       hosting: 'J\'organise',
       pastEvents: 'Événements passés',
       past: 'Passé',
+      filters: 'Filtres',
+      clearAll: 'Tout effacer',
     },
     categories: {
       concert: 'Concert',
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
index 895f971..3aebdf0 100644
--- a/src/i18n/types.ts
+++ b/src/i18n/types.ts
@@ -70,6 +70,8 @@ export interface LocaleMessages {
       hosting: string
       pastEvents: string
       past: string
+      filters: string
+      clearAll: string
     }
     categories: Record<string, string>
     detail: {
diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index edd50bb..b343ed5 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
@@ -8,6 +8,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
+import { Separator } from '@/components/ui/separator'
 import { SlidersHorizontal, ChevronDown, History } from 'lucide-vue-next'
 import { useEvents } from '../composables/useEvents'
 import EventSearchOverlay from '../components/EventSearchOverlay.vue'
@@ -40,6 +41,13 @@ const {
 
 const filtersOpen = ref(false)
 
+// Badge count on the Filters trigger so the user can see at a glance
+// that hidden toggles (past-events, categories) are currently active
+// even when the collapsible is closed.
+const filterCount = computed(
+  () => selectedCategories.value.length + (showPast.value ? 1 : 0),
+)
+
 onMounted(() => {
   subscribe()
 })
@@ -50,16 +58,14 @@ function handleSelectEvent(event: Event) {
 </script>
 
 <template>
-  <div class="container mx-auto py-6 px-4">
+  <div class="container mx-auto py-4 px-4">
     <!-- Page header -->
-    <div class="mb-4">
-      <h1 class="text-2xl sm:text-3xl font-bold text-foreground">
-        {{ t('events.title') }}
-      </h1>
-    </div>
+    <h1 class="mb-3 text-xl sm:text-2xl font-bold text-foreground">
+      {{ t('events.title') }}
+    </h1>
 
     <!-- Search with dropdown overlay -->
-    <div class="mb-4">
+    <div class="mb-3">
       <EventSearchOverlay
         :events="events"
         @select="handleSelectEvent"
@@ -67,44 +73,59 @@ function handleSelectEvent(event: Event) {
     </div>
 
     <!-- Date picker strip (p'a semana style) -->
-    <div class="mb-4">
+    <div class="mb-3">
       <DatePickerStrip :selected-date="selectedDate" @select="selectDate" />
     </div>
 
     <!-- Temporal filter pills -->
-    <div class="mb-4">
+    <div class="mb-3">
       <TemporalFilterBar :model-value="temporal" @update:model-value="setTemporal" />
     </div>
 
-    <!-- Past-events filter chip. The role chips ("My tickets", "Hosting")
-         used to live here; they now sit in the standalone sidebar menu.
-         "Past events" stays inline since past-browsing doesn't require
-         an account and pairs visually with the temporal filters above. -->
-    <div class="mb-4 flex flex-wrap gap-2">
-      <Button
-        :variant="showPast ? 'default' : 'outline'"
-        size="sm"
-        class="gap-1.5"
-        @click="togglePast"
-      >
-        <History class="w-3.5 h-3.5" />
-        {{ t('events.filters.pastEvents', 'Past events') }}
-      </Button>
-    </div>
-
-    <!-- Category filters (collapsible) -->
-    <Collapsible v-model:open="filtersOpen" class="mb-6">
-      <CollapsibleTrigger as-child>
-        <Button variant="ghost" size="sm" class="gap-1.5 text-muted-foreground">
-          <SlidersHorizontal class="w-4 h-4" />
-          Categories
-          <span v-if="selectedCategories.length > 0" class="text-xs bg-primary text-primary-foreground rounded-full px-1.5">
-            {{ selectedCategories.length }}
-          </span>
-          <ChevronDown class="w-3.5 h-3.5 transition-transform" :class="{ 'rotate-180': filtersOpen }" />
+    <!-- Filters collapsible (categories + past-events). Past events used
+         to live on its own row above the trigger; folded in here so the
+         feed gets that vertical real estate by default. The Clear-all
+         affordance shares the trigger row when any filter is active so
+         the old "Filters active" notice doesn't claim another row. -->
+    <Collapsible v-model:open="filtersOpen" class="mb-4">
+      <div class="flex items-center gap-1">
+        <CollapsibleTrigger as-child>
+          <Button variant="ghost" size="sm" class="gap-1.5 px-2 text-muted-foreground">
+            <SlidersHorizontal class="w-4 h-4" />
+            {{ t('events.filters.filters', 'Filters') }}
+            <span
+              v-if="filterCount > 0"
+              class="text-xs bg-primary text-primary-foreground rounded-full px-1.5"
+            >
+              {{ filterCount }}
+            </span>
+            <ChevronDown
+              class="w-3.5 h-3.5 transition-transform"
+              :class="{ 'rotate-180': filtersOpen }"
+            />
+          </Button>
+        </CollapsibleTrigger>
+        <Button
+          v-if="hasActiveFilters"
+          variant="ghost"
+          size="sm"
+          class="h-7 px-2 text-xs text-muted-foreground"
+          @click="resetFilters"
+        >
+          {{ t('events.filters.clearAll', 'Clear all') }}
         </Button>
-      </CollapsibleTrigger>
-      <CollapsibleContent class="mt-2">
+      </div>
+      <CollapsibleContent class="mt-2 space-y-3">
+        <Button
+          :variant="showPast ? 'default' : 'outline'"
+          size="sm"
+          class="gap-1.5"
+          @click="togglePast"
+        >
+          <History class="w-3.5 h-3.5" />
+          {{ t('events.filters.pastEvents', 'Past events') }}
+        </Button>
+        <Separator />
         <CategoryFilterBar
           :selected="selectedCategories"
           @toggle="toggleCategory"
@@ -113,14 +134,6 @@ function handleSelectEvent(event: Event) {
       </CollapsibleContent>
     </Collapsible>
 
-    <!-- Active filters indicator -->
-    <div v-if="hasActiveFilters" class="flex items-center gap-2 mb-4">
-      <span class="text-xs text-muted-foreground">Filters active</span>
-      <Button variant="ghost" size="sm" class="h-6 px-2 text-xs" @click="resetFilters">
-        Clear all
-      </Button>
-    </div>
-
     <!-- Error state -->
     <div v-if="error" class="mb-4 p-4 bg-destructive/10 text-destructive rounded-lg text-sm">
       {{ error }}