feat(events): re-add specific-day filter (calendar popup picks it)

Bring back selectedDate filtering, now driven by the calendar popup
instead of the removed week-strip: when a day is picked it takes
priority over the temporal pills and bypasses the past/upcoming split.
Add a dedicated clearSelectedDate() so the date selection can be cleared
independently of categories (a preset pill also clears it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Padreug 2026-06-16 12:14:16 +02:00
commit d7b6740946

View file

@ -15,6 +15,10 @@ import { DEFAULT_FILTERS } from '../types/filters'
// tapping Hosting toggled a private ref the page never saw. // tapping Hosting toggled a private ref the page never saw.
const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal) const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
const selectedCategories = ref<EventCategory[]>([]) const selectedCategories = ref<EventCategory[]>([])
// A specific day picked from the calendar popup. When set it takes
// priority over the temporal pills + past/upcoming split (browse any
// single day). Cleared independently of categories.
const selectedDate = ref<Date | undefined>(undefined)
const onlyOwnedTickets = ref(false) const onlyOwnedTickets = ref(false)
const onlyHosting = ref(false) const onlyHosting = ref(false)
const showPast = ref(false) const showPast = ref(false)
@ -35,20 +39,31 @@ export function useEventFilters() {
function applyFilters(events: Event[]): Event[] { function applyFilters(events: Event[]): Event[] {
let result = events let result = events
// Temporal filter (preset pills). Specific-date browsing now lives on if (selectedDate.value) {
// the calendar page, so the feed only narrows by these windows. // Specific day picked from the calendar popup — takes priority over
// the temporal pills and bypasses the past/upcoming split so any
// day (past or future) can be browsed.
const dayStart = startOfDay(selectedDate.value)
const dayEnd = endOfDay(selectedDate.value)
result = result.filter(a => {
const eventEnd = a.endDate ?? a.startDate
return a.startDate <= dayEnd && eventEnd >= dayStart
})
} else {
// Temporal filter (preset pills).
result = applyTemporalFilter(result, temporal.value) result = applyTemporalFilter(result, temporal.value)
// Past/upcoming split — the chip narrows to one side of "now", // Past/upcoming split — the chip narrows to one side of "now",
// mirroring the "My tickets" / "Hosting" mental model. Default // mirroring the "My tickets" / "Hosting" mental model. Default
// (showPast=false) is upcoming-only; toggling on flips to past-only. // (showPast=false) is upcoming-only; toggling on flips to
// Composes with temporal pills: "This Week" + showPast=true shows // past-only. Composes with temporal pills: "This Week" +
// only the days already passed this week. // showPast=true shows only the days already passed this week.
const now = new Date() const now = new Date()
result = result.filter(a => { result = result.filter(a => {
const eventEnd = a.endDate ?? a.startDate const eventEnd = a.endDate ?? a.startDate
return showPast.value ? eventEnd < now : eventEnd >= now return showPast.value ? eventEnd < now : eventEnd >= now
}) })
}
// Category filter // Category filter
if (selectedCategories.value.length > 0) { if (selectedCategories.value.length > 0) {
@ -69,6 +84,16 @@ export function useEventFilters() {
function setTemporal(value: TemporalFilter) { function setTemporal(value: TemporalFilter) {
temporal.value = value temporal.value = value
selectedDate.value = undefined // a preset pill clears the day pick
}
function selectDate(date: Date) {
selectedDate.value = date
temporal.value = 'all' // a specific day overrides the temporal pill
}
function clearSelectedDate() {
selectedDate.value = undefined
} }
function toggleCategory(category: EventCategory) { function toggleCategory(category: EventCategory) {
@ -87,6 +112,7 @@ export function useEventFilters() {
function resetFilters() { function resetFilters() {
temporal.value = DEFAULT_FILTERS.temporal temporal.value = DEFAULT_FILTERS.temporal
selectedCategories.value = [] selectedCategories.value = []
selectedDate.value = undefined
onlyOwnedTickets.value = false onlyOwnedTickets.value = false
onlyHosting.value = false onlyHosting.value = false
showPast.value = false showPast.value = false
@ -107,6 +133,7 @@ export function useEventFilters() {
const hasActiveFilters = computed(() => const hasActiveFilters = computed(() =>
temporal.value !== 'all' || temporal.value !== 'all' ||
selectedCategories.value.length > 0 || selectedCategories.value.length > 0 ||
selectedDate.value !== undefined ||
onlyOwnedTickets.value || onlyOwnedTickets.value ||
onlyHosting.value || onlyHosting.value ||
showPast.value showPast.value
@ -116,6 +143,7 @@ export function useEventFilters() {
// State // State
temporal, temporal,
selectedCategories, selectedCategories,
selectedDate,
onlyOwnedTickets, onlyOwnedTickets,
onlyHosting, onlyHosting,
showPast, showPast,
@ -125,6 +153,8 @@ export function useEventFilters() {
// Actions // Actions
applyFilters, applyFilters,
setTemporal, setTemporal,
selectDate,
clearSelectedDate,
toggleCategory, toggleCategory,
clearCategories, clearCategories,
toggleOwnedTickets, toggleOwnedTickets,