From c6455b323566dde48f760e7b4a962e1050b5da9c Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 10 Jun 2026 17:42:11 +0200
Subject: [PATCH] feat(activities): move Past pill to end of the temporal strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Past used to live in the Filters collapsible — a dropdown row of its
own for a single boolean toggle. Hoist it onto the temporal strip
right after This month so it's discoverable alongside the time-window
pills without claiming any extra vertical space. Composes orthogonally
with the temporal pills the same way as before.

Drop the now-redundant past-count contribution to the Filters badge —
the pill carries its own pressed state on the strip.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../events/components/TemporalFilterBar.vue   | 17 +++++++++
 src/modules/events/views/EventsPage.vue       | 38 +++++++++----------
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/modules/events/components/TemporalFilterBar.vue b/src/modules/events/components/TemporalFilterBar.vue
index 1b84ff9..f66ce10 100644
--- a/src/modules/events/components/TemporalFilterBar.vue
+++ b/src/modules/events/components/TemporalFilterBar.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { History } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import type { TemporalFilter } from '../types/filters'
 
 const props = defineProps<{
   modelValue: TemporalFilter
+  showPast: boolean
 }>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: TemporalFilter]
+  'toggle-past': []
 }>()
 
 const { t } = useI18n()
@@ -34,5 +37,19 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
     >
       {{ t(option.labelKey) }}
     </Button>
+    <!-- Past pill sits at the end of the same scrollable strip so it's
+         discoverable alongside the time-window pills, without claiming
+         a dropdown row of its own. Composes orthogonally with the
+         temporal pills: e.g. "This Week" + Past narrows to days
+         already past this week. -->
+    <Button
+      :variant="props.showPast ? 'default' : 'outline'"
+      size="sm"
+      class="rounded-full text-xs shrink-0 gap-1.5"
+      @click="emit('toggle-past')"
+    >
+      <History class="w-3 h-3" />
+      {{ t('events.filters.past', 'Past') }}
+    </Button>
   </div>
 </template>
diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index 55b7112..baa9b92 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -8,8 +8,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { Separator } from '@/components/ui/separator'
-import { SlidersHorizontal, History, CalendarDays, Plus } from 'lucide-vue-next'
+import { SlidersHorizontal, CalendarDays, Plus } from 'lucide-vue-next'
 import { useEvents } from '../composables/useEvents'
 import { useEventsStore } from '../stores/events'
 import EventSearchOverlay from '../components/EventSearchOverlay.vue'
@@ -45,10 +44,11 @@ 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.
+// that hidden toggles (categories) are currently active even when the
+// collapsible is closed. Past lives on the temporal strip now and
+// has its own visible pressed state, so it doesn't need to count here.
 const filterCount = computed(
-  () => selectedCategories.value.length + (showPast.value ? 1 : 0),
+  () => selectedCategories.value.length,
 )
 
 onMounted(() => {
@@ -112,10 +112,11 @@ function openCalendar() {
 
     <!-- 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. Hidden in the
-         Hosting view — the operator's roster doesn't need them. -->
+         Filters icon (with a count badge when categories are active)
+         opens a collapsible that hosts category chips below. Past is
+         a pill at the end of the temporal strip and doesn't live in
+         the dropdown anymore. Hidden in the Hosting view — the
+         operator's roster doesn't need them. -->
     <Collapsible v-if="!onlyHosting" 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">
@@ -148,20 +149,15 @@ function openCalendar() {
           </Button>
         </div>
         <div class="flex-1 min-w-0 pt-0.5">
-          <TemporalFilterBar :model-value="temporal" @update:model-value="setTemporal" />
+          <TemporalFilterBar
+            :model-value="temporal"
+            :show-past="showPast"
+            @update:model-value="setTemporal"
+            @toggle-past="togglePast"
+          />
         </div>
       </div>
-      <CollapsibleContent class="mt-3 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 />
+      <CollapsibleContent class="mt-3">
         <CategoryFilterBar
           :selected="selectedCategories"
           @toggle="toggleCategory"