From 06116a4ec074e23b22104ccd41a3a2281f10a45a Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 15:25:08 +0800
Subject: [PATCH 1/8] refactor(session): update session display logic

---
 app/pages/session.vue | 35 ++++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/pages/session.vue b/app/pages/session.vue
index f5bb60e..99ba5b2 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -24,22 +24,27 @@ prerenderRoutes(
 </script>
 
 <template>
-  <main>
+  <main v-if="selectedDay">
     <NuxtPage />
-    <template v-if="selectedDay">
-      <CpSessionDaySelector
-        v-model="selectedDay"
-        :days="days"
-      />
-      <CpSessionTable
-        :day="selectedDay"
-        :interval="5"
-        :row-height="50"
-        :sessions="data?.[selectedDay] ?? []"
-        :time-range="['09:00', '17:30']"
-      />
-    </template>
-    <p v-else>
+
+    <CpSessionDaySelector
+      v-model="selectedDay"
+      :days="days"
+    />
+    <CpSessionTable
+      :day="selectedDay"
+      :interval="5"
+      :row-height="50"
+      :sessions="data?.[selectedDay] ?? []"
+      :time-range="['09:00', '17:30']"
+    />
+
+    <p v-if="!data?.[selectedDay]">
+      {{ t('noSession') }}
+    </p>
+  </main>
+  <main v-else>
+    <p>
       {{ t('noSession') }}
     </p>
   </main>

From a0e8a2b376395541b972e60fcf303f2307ce17e5 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 16:29:56 +0800
Subject: [PATCH 2/8] feat(session): add session list component and integrate
 with session page

---
 app/components/feature/CpSessionList.vue | 56 ++++++++++++++++++++++++
 app/pages/session.vue                    | 41 ++++++++++++-----
 2 files changed, 86 insertions(+), 11 deletions(-)
 create mode 100644 app/components/feature/CpSessionList.vue

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
new file mode 100644
index 0000000..badddb5
--- /dev/null
+++ b/app/components/feature/CpSessionList.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { SessionSummary } from '#shared/types/session'
+import { useI18n } from '#imports'
+import CpSessionItem from './CpSessionItem.vue'
+
+const { sessions: _sessions } = defineProps<{ sessions: SessionSummary[] }>()
+
+const { locale } = useI18n()
+
+const times = computed(() => {
+  if (!_sessions) {
+    return []
+  }
+
+  return Object.groupBy(
+    _sessions
+      .filter((session) => session.start && session.room).map((session) => ({
+        id: session.id,
+        title: session[locale.value].title,
+        speakers: session.speakers?.map((s) => s[locale.value].name).join(', '),
+        start: session.start!.slice(11, 16),
+        end: session.end!.slice(11, 16),
+        tags: [],
+      })),
+    (session) => session.start,
+  )
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <section
+      v-for="(sess, time) in times"
+      :key="time"
+    >
+      <h3 class="text-lg text-primary-400 font-medium mb-2">
+        {{ time }}
+      </h3>
+      <div class="flex flex-col gap-2">
+        <NuxtLink
+          v-for="session in sess"
+          :key="session.id"
+          :to="`/session/${session.id}`"
+        >
+          <CpSessionItem
+            :end="session.end"
+            :speaker="session.speakers"
+            :start="session.start"
+            :tags="session.tags"
+            :title="session.title"
+          />
+        </NuxtLink>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/app/pages/session.vue b/app/pages/session.vue
index 99ba5b2..3f09c70 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { prerenderRoutes } from 'nuxt/app'
 import { useI18n } from 'vue-i18n'
 import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
+import CpSessionList from '~/components/feature/CpSessionList.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 
 const { t } = useI18n()
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
 const { data } = await useFetch('/api/session')
+const isMobile = breakpoints.smaller('sm')
 
 const manualSelectedDay = ref<string | null>(null)
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
@@ -27,17 +32,31 @@ prerenderRoutes(
   <main v-if="selectedDay">
     <NuxtPage />
 
-    <CpSessionDaySelector
-      v-model="selectedDay"
-      :days="days"
-    />
-    <CpSessionTable
-      :day="selectedDay"
-      :interval="5"
-      :row-height="50"
-      :sessions="data?.[selectedDay] ?? []"
-      :time-range="['09:00', '17:30']"
-    />
+    <ClientOnly>
+      <div
+        class="flex"
+        :class="isMobile ? 'flex-col-reverse' : 'flex-col'"
+      >
+        <CpSessionDaySelector
+          v-model="selectedDay"
+          class="bottom-0 sticky z-10"
+          :days="days"
+        />
+
+        <CpSessionList
+          v-if="isMobile"
+          :sessions="data?.[selectedDay] ?? []"
+        />
+        <CpSessionTable
+          v-else
+          :day="selectedDay"
+          :interval="5"
+          :row-height="50"
+          :sessions="data?.[selectedDay] ?? []"
+          :time-range="['09:00', '17:30']"
+        />
+      </div>
+    </ClientOnly>
 
     <p v-if="!data?.[selectedDay]">
       {{ t('noSession') }}

From 0e2de4a7d4b690ab12dd93c3bc7ff3ccc1f9002d Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 21:38:38 +0800
Subject: [PATCH 3/8] refactor(session): simplify session layout and remove
 unused breakpoints

---
 app/pages/session.vue | 47 +++++++++++++++++--------------------------
 1 file changed, 19 insertions(+), 28 deletions(-)

diff --git a/app/pages/session.vue b/app/pages/session.vue
index 3f09c70..0bc7935 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { prerenderRoutes } from 'nuxt/app'
 import { useI18n } from 'vue-i18n'
 import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
@@ -8,10 +7,7 @@ import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 
 const { t } = useI18n()
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
 const { data } = await useFetch('/api/session')
-const isMobile = breakpoints.smaller('sm')
 
 const manualSelectedDay = ref<string | null>(null)
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
@@ -32,31 +28,26 @@ prerenderRoutes(
   <main v-if="selectedDay">
     <NuxtPage />
 
-    <ClientOnly>
-      <div
-        class="flex"
-        :class="isMobile ? 'flex-col-reverse' : 'flex-col'"
-      >
-        <CpSessionDaySelector
-          v-model="selectedDay"
-          class="bottom-0 sticky z-10"
-          :days="days"
-        />
+    <div class="flex flex-col-reverse sm:flex-col">
+      <CpSessionDaySelector
+        v-model="selectedDay"
+        class="bottom-0 sticky z-10 sm:bottom-auto"
+        :days="days"
+      />
 
-        <CpSessionList
-          v-if="isMobile"
-          :sessions="data?.[selectedDay] ?? []"
-        />
-        <CpSessionTable
-          v-else
-          :day="selectedDay"
-          :interval="5"
-          :row-height="50"
-          :sessions="data?.[selectedDay] ?? []"
-          :time-range="['09:00', '17:30']"
-        />
-      </div>
-    </ClientOnly>
+      <CpSessionList
+        class="sm:hidden"
+        :sessions="data?.[selectedDay] ?? []"
+      />
+      <CpSessionTable
+        class="hidden sm:grid"
+        :day="selectedDay"
+        :interval="5"
+        :row-height="50"
+        :sessions="data?.[selectedDay] ?? []"
+        :time-range="['09:00', '17:30']"
+      />
+    </div>
 
     <p v-if="!data?.[selectedDay]">
       {{ t('noSession') }}

From 03e23e82d0a2689101fc6aff0b207e0b01518379 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 21:43:17 +0800
Subject: [PATCH 4/8] fix(session): update no session message condition to
 check for length

---
 app/pages/session.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/session.vue b/app/pages/session.vue
index 0bc7935..11ed5af 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -49,7 +49,7 @@ prerenderRoutes(
       />
     </div>
 
-    <p v-if="!data?.[selectedDay]">
+    <p v-if="!data?.[selectedDay]?.length">
       {{ t('noSession') }}
     </p>
   </main>

From 240b430256f172478a44e80e4debe610126448af Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 21:45:49 +0800
Subject: [PATCH 5/8] fix(session): ensure session filtering checks for both
 start and end times

---
 app/components/feature/CpSessionList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index badddb5..887f2a7 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -14,7 +14,7 @@ const times = computed(() => {
 
   return Object.groupBy(
     _sessions
-      .filter((session) => session.start && session.room).map((session) => ({
+      .filter((session) => session.start && session.end && session.room).map((session) => ({
         id: session.id,
         title: session[locale.value].title,
         speakers: session.speakers?.map((s) => s[locale.value].name).join(', '),

From 18e83802f97eb7b520ca1919fc8dfaa961b7ea24 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 21:46:07 +0800
Subject: [PATCH 6/8] fix(session): return an empty object instead of an array
 when no sessions are available

---
 app/components/feature/CpSessionList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index 887f2a7..ac96d84 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -9,7 +9,7 @@ const { locale } = useI18n()
 
 const times = computed(() => {
   if (!_sessions) {
-    return []
+    return {}
   }
 
   return Object.groupBy(

From aa378c2b5a9b49636d8db69de83c792491f01907 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 22:21:37 +0800
Subject: [PATCH 7/8] fix(session): sort time in SessionList

---
 app/components/feature/CpSessionList.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index ac96d84..24894e4 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -7,7 +7,7 @@ const { sessions: _sessions } = defineProps<{ sessions: SessionSummary[] }>()
 
 const { locale } = useI18n()
 
-const times = computed(() => {
+const sessions = computed(() => {
   if (!_sessions) {
     return {}
   }
@@ -25,12 +25,14 @@ const times = computed(() => {
     (session) => session.start,
   )
 })
+
+const times = Object.keys(sessions.value).sort()
 </script>
 
 <template>
   <div class="flex flex-col gap-6">
     <section
-      v-for="(sess, time) in times"
+      v-for="time in times"
       :key="time"
     >
       <h3 class="text-lg text-primary-400 font-medium mb-2">
@@ -38,7 +40,7 @@ const times = computed(() => {
       </h3>
       <div class="flex flex-col gap-2">
         <NuxtLink
-          v-for="session in sess"
+          v-for="session in sessions[time]"
           :key="session.id"
           :to="`/session/${session.id}`"
         >

From d4cbc09b88926caac8ba9b21484c40e0fade19e5 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 10 May 2026 22:22:55 +0800
Subject: [PATCH 8/8] fix(session): make session time headers sticky for better
 visibility

---
 app/components/feature/CpSessionList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index 24894e4..ff289b4 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -35,7 +35,7 @@ const times = Object.keys(sessions.value).sort()
       v-for="time in times"
       :key="time"
     >
-      <h3 class="text-lg text-primary-400 font-medium mb-2">
+      <h3 class="text-lg text-primary-400 font-medium mb-2 py-1 bg-white top-0 sticky z-1">
         {{ time }}
       </h3>
       <div class="flex flex-col gap-2">