aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

feat(activities): stationary Filters column next to scrolling pills

Browse source 
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.
This commit is contained in:
Padreug 2026-06-04 22:06:02 +02:00
commit cd34555bcb
1 changed files with 39 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/modules/events/views/EventsPage.vue
View file

@ -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 { useEvents } from '../composables/useEvents'
import EventSearchOverlay from '../components/EventSearchOverlay.vue'
import TemporalFilterBar from '../components/TemporalFilterBar.vue'
@ -77,45 +77,47 @@ function handleSelectEvent(event: Event) {
<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('events.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('events.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('events.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('events.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"