在 Mobile 當中，議程表將呈現列表形式

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>

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())
@@ -24,22 +29,41 @@ 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>
+
+    <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') }}
+    </p>
+  </main>
+  <main v-else>
+    <p>
       {{ t('noSession') }}
     </p>
   </main>