fix: resolve sidebar nav hydration mismatch and admin events 500 error

Wrap auth-dependent sidebar navigation and meta in ClientOnly with
SSR fallback slots to prevent hydration mismatch that caused all
authenticated nav links to point to wrong pages. Fix admin events
page crash by replacing empty string USelect values with 'all'.
This commit is contained in:
Jennie Robinson Faber 2026-04-03 09:24:29 +01:00
parent 27d8f678ad
commit f16f9ada64
3 changed files with 181 additions and 80 deletions

View file

@ -23,7 +23,7 @@
<USelect
v-model="typeFilter"
:items="[
{ label: 'All Types', value: '' },
{ label: 'All Types', value: 'all' },
{ label: 'Community', value: 'community' },
{ label: 'Workshop', value: 'workshop' },
{ label: 'Social', value: 'social' },
@ -34,7 +34,7 @@
<USelect
v-model="statusFilter"
:items="[
{ label: 'All Status', value: '' },
{ label: 'All Status', value: 'all' },
{ label: 'Upcoming', value: 'upcoming' },
{ label: 'Ongoing', value: 'ongoing' },
{ label: 'Past', value: 'past' },
@ -44,7 +44,7 @@
<USelect
v-model="seriesFilter"
:items="[
{ label: 'All Events', value: '' },
{ label: 'All Events', value: 'all' },
{ label: 'Series Events Only', value: 'series-only' },
{ label: 'Standalone Only', value: 'standalone-only' },
]"
@ -370,9 +370,9 @@ const {
} = await useFetch("/api/admin/events");
const searchQuery = ref("");
const typeFilter = ref("");
const statusFilter = ref("");
const seriesFilter = ref("");
const typeFilter = ref("all");
const statusFilter = ref("all");
const seriesFilter = ref("all");
const filteredEvents = computed(() => {
if (!events.value) return [];
@ -384,14 +384,14 @@ const filteredEvents = computed(() => {
event.description.toLowerCase().includes(searchQuery.value.toLowerCase());
const matchesType =
!typeFilter.value || event.eventType === typeFilter.value;
typeFilter.value === "all" || event.eventType === typeFilter.value;
const eventStatus = getEventStatus(event);
const matchesStatus =
!statusFilter.value || eventStatus.toLowerCase() === statusFilter.value;
statusFilter.value === "all" || eventStatus.toLowerCase() === statusFilter.value;
const matchesSeries =
!seriesFilter.value ||
seriesFilter.value === "all" ||
(seriesFilter.value === "series-only" && event.series?.isSeriesEvent) ||
(seriesFilter.value === "standalone-only" &&
!event.series?.isSeriesEvent);