From ce7f0627600995e503a8d8c9a50b3b9159f6b0ed Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 4 Jun 2026 22:06:02 +0200
Subject: [PATCH] feat(activities): stationary Filters column next to scrolling
 pills

Filters icon + Clear-all sit in a stationary left-aligned column;
only the All/Today/Tomorrow/etc temporal pills scroll horizontally.
Clear-all is tucked tightly under the Filters icon (h-5, 10px text,
gap-0.5) and shows only when a filter is active. The badge no
longer lives inside the overflow-x scroll container, so the count
chip isn't clipped at the corner anymore.
---
 .../activities/views/ActivitiesPage.vue       | 76 ++++++++++---------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/modules/activities/views/ActivitiesPage.vue b/src/modules/activities/views/ActivitiesPage.vue
index fdc5af8..91b0ff9 100644
--- a/src/modules/activities/views/ActivitiesPage.vue
+++ b/src/modules/activities/views/ActivitiesPage.vue
@@ -9,7 +9,7 @@ import {
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
 import { Separator } from '@/components/ui/separator'
-import { SlidersHorizontal, ChevronDown, History } from 'lucide-vue-next'
+import { SlidersHorizontal, History } from 'lucide-vue-next'
 import { useActivities } from '../composables/useActivities'
 import ActivitySearchOverlay from '../components/ActivitySearchOverlay.vue'
 import TemporalFilterBar from '../components/TemporalFilterBar.vue'
@@ -77,45 +77,47 @@ function handleSelectActivity(activity: Activity) {
       <DatePickerStrip :selected-date="selectedDate" @select="selectDate" />
     </div>
 
-    <!-- Temporal filter pills -->
-    <div class="mb-3">
-      <TemporalFilterBar :model-value="temporal" @update:model-value="setTemporal" />
-    </div>
-
-    <!-- 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('activities.filters.filters', 'Filters') }}
-            <span
-              v-if="filterCount > 0"
-              class="text-xs bg-primary text-primary-foreground rounded-full px-1.5"
+    <!-- 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 past-events or any
+         categories are active) opens a collapsible that hosts the
+         past-events toggle + category chips below. -->
+    <Collapsible v-model:open="filtersOpen" class="mb-3">
+      <div class="flex items-start gap-3">
+        <div class="shrink-0 flex flex-col items-center gap-0.5">
+          <CollapsibleTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="rounded-full h-8 w-8 relative"
+              :class="{ 'bg-accent text-accent-foreground': filtersOpen || filterCount > 0 }"
+              :aria-label="t('activities.filters.filters', 'Filters')"
+              :aria-expanded="filtersOpen"
             >
-              {{ filterCount }}
-            </span>
-            <ChevronDown
-              class="w-3.5 h-3.5 transition-transform"
-              :class="{ 'rotate-180': filtersOpen }"
-            />
+              <SlidersHorizontal class="w-4 h-4" />
+              <span
+                v-if="filterCount > 0"
+                class="absolute -top-1 -right-1 min-w-[16px] h-[16px] px-1 rounded-full bg-primary text-primary-foreground text-[10px] font-semibold flex items-center justify-center"
+              >
+                {{ filterCount }}
+              </span>
+            </Button>
+          </CollapsibleTrigger>
+          <Button
+            v-if="hasActiveFilters"
+            variant="ghost"
+            size="sm"
+            class="h-5 px-1 text-[10px] text-muted-foreground"
+            @click="resetFilters"
+          >
+            {{ t('activities.filters.clearAll', 'Clear all') }}
           </Button>
-        </CollapsibleTrigger>
-        <Button
-          v-if="hasActiveFilters"
-          variant="ghost"
-          size="sm"
-          class="h-7 px-2 text-xs text-muted-foreground"
-          @click="resetFilters"
-        >
-          {{ t('activities.filters.clearAll', 'Clear all') }}
-        </Button>
+        </div>
+        <div class="flex-1 min-w-0 pt-0.5">
+          <TemporalFilterBar :model-value="temporal" @update:model-value="setTemporal" />
+        </div>
       </div>
-      <CollapsibleContent class="mt-2 space-y-3">
+      <CollapsibleContent class="mt-3 space-y-3">
         <Button
           :variant="showPast ? 'default' : 'outline'"
           size="sm"