fix: persist selected session day in URL

app/components/feature/CpSessionList.vue

@@ -6,8 +6,13 @@ import CpSessionItem from './CpSessionItem.vue'
 const { sessions: _sessions } = defineProps<{ sessions: SessionSummary[] }>()
 
 const { locale } = useI18n()
+const route = useRoute()
 const localePath = useLocalePath()
 
+function sessionPath(id: string) {
+  return localePath({ path: `/session/${id}`, query: route.query })
+}
+
 const sessions = computed(() => {
   if (!_sessions) {
     return {}
@@ -46,7 +51,7 @@ const times = Object.keys(sessions.value).sort()
         <NuxtLink
           v-for="session in sessions[time]"
           :key="session.id"
-          :to="localePath(`/session/${session.id}`)"
+          :to="sessionPath(session.id)"
         >
           <CpSessionItem
             :end="session.end"

app/components/feature/CpSessionTable.vue

@@ -16,10 +16,15 @@ const { sessions: _sessions, day, timeRange, interval, rowHeight, columnWidth }
 
 const { locale } = useI18n()
 const { time } = useRealtime()
+const route = useRoute()
 const localePath = useLocalePath()
 
 const { containerRef, isDragging } = useDragScroll({ scrollTarget: 'window' })
 
+function sessionPath(id: string) {
+  return localePath({ path: `/session/${id}`, query: route.query })
+}
+
 function parseMinutes(isoStr: string) {
   const match = isoStr.match(/T(\d{2}):(\d{2})/)
   if (!match) {
@@ -182,7 +187,7 @@ const showRealtimeLine = computed(() => {
         'grid-row': `${session.row[0]} / ${session.row[1]}`,
         'grid-column': session.col,
       }"
-      :to="localePath(`/session/${session.id}`)"
+      :to="sessionPath(session.id)"
       @dragstart.prevent
     >
       <CpSessionItem

app/pages/session.vue

@@ -9,15 +9,42 @@ import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 import { useSessionFilter } from '~/composables/useSessionFilter'
 
 const { locale, t } = useI18n()
+const route = useRoute()
+const router = useRouter()
 
 const { data } = await useFetch('/api/session')
 
-const manualSelectedDay = ref<string | null>(null)
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
+const queryDay = computed(() => {
+  const day = route.query.day
+  return typeof day === 'string' && days.value.includes(day) ? day : null
+})
 
 const selectedDay = computed({
-  get: () => manualSelectedDay.value ?? days.value[0] ?? null,
-  set: (value) => void (manualSelectedDay.value = value),
+  get: () => queryDay.value ?? days.value[0] ?? null,
+  set: (value) => {
+    const nextQuery = { ...route.query }
+
+    if (value && days.value.includes(value)) {
+      nextQuery.day = value
+    } else {
+      delete nextQuery.day
+    }
+
+    if (nextQuery.day === route.query.day) {
+      return
+    }
+
+    void router.replace({ query: nextQuery })
+  },
+})
+
+watchEffect(() => {
+  if (route.query.day && !queryDay.value) {
+    const nextQuery = { ...route.query }
+    delete nextQuery.day
+    void router.replace({ query: nextQuery })
+  }
 })
 
 const {

app/pages/session/[id].vue

@@ -53,7 +53,7 @@ useSeoMeta({
 })
 
 function close() {
-  router.push(localePath('/session'))
+  router.push(localePath({ path: '/session', query: route.query }))
 }
 
 function onKeydown(e: KeyboardEvent) {