From f16f9ada6403fade057e8ee10b2650ebe4610ef2 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Fri, 3 Apr 2026 09:24:29 +0100
Subject: [PATCH] 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'.
---
 app/components/AppNavigation.vue   | 180 +++++++++++++++++------------
 app/components/ColorModeToggle.vue |  63 ++++++++++
 app/pages/admin/events/index.vue   |  18 +--
 3 files changed, 181 insertions(+), 80 deletions(-)
 create mode 100644 app/components/ColorModeToggle.vue

diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 070611b..6a82cd0 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -7,85 +7,123 @@
 
     <!-- Navigation sections -->
     <div class="sidebar-body">
-      <template v-if="isAuthenticated">
-        <!-- Logged-in nav -->
-        <div class="sidebar-section">You</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in youItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
+      <ClientOnly>
+        <template v-if="isAuthenticated">
+          <!-- Logged-in nav -->
+          <div class="sidebar-section">You</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in youItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
 
-        <div class="sidebar-section">Explore</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in exploreItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
+          <div class="sidebar-section">Explore</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in exploreItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
 
-        <div class="sidebar-section">Community</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in communityItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
-      </template>
+          <div class="sidebar-section">Community</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in communityItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+        </template>
 
-      <template v-else>
-        <!-- Public nav -->
-        <div class="sidebar-section">Navigate</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in publicItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
+        <template v-else>
+          <!-- Public nav -->
+          <div class="sidebar-section">Navigate</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in publicItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
 
-        <div class="sidebar-section">Join</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in joinItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
-      </template>
+          <div class="sidebar-section">Join</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in joinItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+        </template>
+
+        <template #fallback>
+          <!-- Public nav (SSR fallback) -->
+          <div class="sidebar-section">Navigate</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in publicItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+
+          <div class="sidebar-section">Join</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in joinItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+        </template>
+      </ClientOnly>
     </div>
 
     <!-- Meta at bottom -->
     <div class="sidebar-meta">
-      <template v-if="isAuthenticated">
-        <span class="member-name">{{ memberData?.name || 'Member' }}</span><br>
-        <span
-          v-if="memberData?.circle"
-          class="member-circle"
-          :style="{ color: `var(--c-${memberData.circle})` }"
-        >{{ memberData.circle }}</span>
-        <br v-if="memberData?.circle">
-        <a href="#" @click.prevent="handleLogout">Sign out</a>
-      </template>
-      <template v-else>
-        Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
-        A Canadian nonprofit<br>
-        <a href="#" @click.prevent="openLogin">Sign in</a>
-      </template>
+      <ClientOnly>
+        <template v-if="isAuthenticated">
+          <span class="member-name">{{ memberData?.name || 'Member' }}</span><br>
+          <span
+            v-if="memberData?.circle"
+            class="member-circle"
+            :style="{ color: `var(--c-${memberData.circle})` }"
+          >{{ memberData.circle }}</span>
+          <br v-if="memberData?.circle">
+          <a href="#" @click.prevent="handleLogout">Sign out</a>
+        </template>
+        <template v-else>
+          Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
+          A Canadian nonprofit<br>
+          <a href="#" @click.prevent="openLogin">Sign in</a>
+        </template>
+
+        <template #fallback>
+          Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
+          A Canadian nonprofit<br>
+          <a href="#" @click.prevent="openLogin">Sign in</a>
+        </template>
+      </ClientOnly>
+      <ClientOnly>
+        <ColorModeToggle />
+      </ClientOnly>
     </div>
   </aside>
 </template>
diff --git a/app/components/ColorModeToggle.vue b/app/components/ColorModeToggle.vue
new file mode 100644
index 0000000..fc7b28d
--- /dev/null
+++ b/app/components/ColorModeToggle.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="color-mode-toggle">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      :class="{ active: colorMode.preference === option.value }"
+      @click="colorMode.preference = option.value"
+    >{{ option.label }}</button>
+  </div>
+</template>
+
+<script setup>
+const colorMode = useColorMode()
+
+const options = [
+  { label: 'Light', value: 'light' },
+  { label: 'System', value: 'system' },
+  { label: 'Dark', value: 'dark' },
+]
+</script>
+
+<style scoped>
+.color-mode-toggle {
+  display: flex;
+  margin-top: 10px;
+}
+
+.color-mode-toggle button {
+  flex: 1;
+  padding: 4px 0;
+  font-family: 'Commit Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  background: transparent;
+  color: var(--text-faint);
+  border: 1px dashed var(--border);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.color-mode-toggle button + button {
+  border-left: none;
+}
+
+.color-mode-toggle button:hover {
+  color: var(--text-dim);
+}
+
+.color-mode-toggle button.active {
+  color: var(--candle);
+  border-color: var(--candle);
+  border-style: solid;
+  background: var(--surface);
+}
+
+/* When active button is adjacent to dashed, restore left border */
+.color-mode-toggle button.active + button {
+  border-left: 1px dashed var(--border);
+}
+.color-mode-toggle button:has(+ button.active) {
+  border-right: none;
+}
+</style>
diff --git a/app/pages/admin/events/index.vue b/app/pages/admin/events/index.vue
index 2c23bde..e598956 100644
--- a/app/pages/admin/events/index.vue
+++ b/app/pages/admin/events/index.vue
@@ -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);