From 0b23139e068cd0720ad53116e113ad0e886d242c Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 7 Mar 2026 18:41:38 +0800
Subject: [PATCH 01/24] feat(ui): add `CpSessionItem` and `CpBadge` Component

---
 app/components/feature/CpSessionItem.vue | 33 ++++++++++++++++++++++++
 app/components/shared/CpBadge.vue        | 12 +++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 app/components/feature/CpSessionItem.vue
 create mode 100644 app/components/shared/CpBadge.vue

diff --git a/app/components/feature/CpSessionItem.vue b/app/components/feature/CpSessionItem.vue
new file mode 100644
index 0000000..9263554
--- /dev/null
+++ b/app/components/feature/CpSessionItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import CpBadge from '~/components/shared/CpBadge.vue'
+
+defineProps<{
+  title: string
+  start: string
+  end: string
+  speaker: string
+  tags: string[]
+}>()
+</script>
+
+<template>
+  <div class="text-primary-600 p-2 border border-primary-100 border-rounded bg-primary-50 relative">
+    <div class="flex flex-col">
+      <h1 class="text-base text-inherit font-normal my-1 text-justify">
+        {{ title }}
+      </h1>
+      <time class="text-md opacity-50">{{ start }} ~ {{ end }}</time>
+      <p class="text-sm my-1">
+        {{ speaker }}
+      </p>
+      <p class="flex gap-1">
+        <CpBadge
+          v-for="tag in tags"
+          :key="tag"
+        >
+          {{ tag }}
+        </CpBadge>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/components/shared/CpBadge.vue b/app/components/shared/CpBadge.vue
new file mode 100644
index 0000000..9abebbf
--- /dev/null
+++ b/app/components/shared/CpBadge.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ text?: string }>()
+</script>
+
+<template>
+  <span class="text-xs text-primary-600 font-semibold px-2 py-0.5 text-center rounded-full bg-primary-100 inline-block">
+    <slot v-if="$slots.default" />
+    <template v-else>
+      {{ text }}
+    </template>
+  </span>
+</template>

From 4246e38ae7394bb49b8056d27c6db8bba6b01283 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Fri, 1 May 2026 15:12:48 +0800
Subject: [PATCH 02/24] feat(ui): refactor toggle functionality in CpPopup
 component

---
 app/components/shared/CpPopup.vue | 11 +++++++----
 app/composables/useToggle.ts      | 19 -------------------
 2 files changed, 7 insertions(+), 23 deletions(-)
 delete mode 100644 app/composables/useToggle.ts

diff --git a/app/components/shared/CpPopup.vue b/app/components/shared/CpPopup.vue
index 53ff643..838b430 100644
--- a/app/components/shared/CpPopup.vue
+++ b/app/components/shared/CpPopup.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useToggle } from '@vueuse/core'
 import { ref } from 'vue'
-import useToggle from '~/composables/useToggle'
 
-const { isOpen, close, toggle } = useToggle()
+const [isOpen, toggle] = useToggle()
 const target = ref(null)
+const close = () => toggle(false)
+function onTriggerClick() {
+  toggle()
+}
 
 onClickOutside(target, close)
 </script>
@@ -18,7 +21,7 @@ onClickOutside(target, close)
       class="cursor-pointer"
       :is-open="isOpen"
       name="trigger"
-      @click="toggle"
+      @click="onTriggerClick"
     />
 
     <Teleport to="body">
diff --git a/app/composables/useToggle.ts b/app/composables/useToggle.ts
deleted file mode 100644
index 0b5c57b..0000000
--- a/app/composables/useToggle.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ref } from 'vue'
-
-export default function useToggle(defaultStatus: boolean = false) {
-  const isOpen = ref(defaultStatus)
-
-  function open() {
-    isOpen.value = true
-  }
-
-  function close() {
-    isOpen.value = false
-  }
-
-  function toggle() {
-    isOpen.value = !isOpen.value
-  }
-
-  return { isOpen, open, close, toggle }
-}

From b996ce854f548fc756759e147e787054d954893d Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 4 Apr 2026 15:35:49 +0800
Subject: [PATCH 03/24] feat(ui): implement logic of CpSessionTable component
 for session grid display

---
 app/components/feature/CpSessionTable.vue | 166 ++++++++++++++++++++++
 app/pages/session/index.vue               |  29 ++++
 2 files changed, 195 insertions(+)
 create mode 100644 app/components/feature/CpSessionTable.vue
 create mode 100644 app/pages/session/index.vue

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
new file mode 100644
index 0000000..2506412
--- /dev/null
+++ b/app/components/feature/CpSessionTable.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import type { SessionSummary } from '#shared/types/session'
+import { useI18n } from '#imports'
+import CpSessionItem from './CpSessionItem.vue'
+
+const { sessions: _sessions, day, timeRange, interval, rowHeight } = defineProps<{
+  day: string
+  timeRange: [string, string]
+  sessions: SessionSummary[]
+  interval: number
+  rowHeight: number
+}>()
+
+const { locale } = useI18n()
+
+function parseMinutes(isoStr: string) {
+  const d = new Date(isoStr)
+  return d.getHours() * 60 + d.getMinutes()
+}
+
+const timeStart = computed(() => parseMinutes(`${day}T${timeRange[0]}+08:00`))
+const timeEnd = computed(() => parseMinutes(`${day}T${timeRange[1]}+08:00`))
+const totalGridRows = computed(() => Math.round((timeEnd.value - timeStart.value) / interval))
+
+function formatTime(minutes: number) {
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+}
+
+function toRow(minutes: number) {
+  return Math.round((minutes - timeStart.value) / interval) + 2
+}
+
+const rooms = computed(() => {
+  if (!_sessions) {
+    return []
+  }
+
+  const rooms = _sessions
+    .map((session) => session.room?.en)
+    .filter((value) => value !== undefined)
+
+  return [...new Set(rooms)].sort() satisfies string[]
+})
+
+const timeLabels = computed(() => {
+  const labels: { label: string, row: number }[] = []
+  let m = Math.ceil(timeStart.value / 30) * 30
+  while (m <= timeEnd.value) {
+    labels.push({ label: formatTime(m), row: toRow(m) })
+    m += 30
+  }
+  return labels
+})
+
+const sessions = computed(() => {
+  if (!_sessions) {
+    return []
+  }
+
+  return _sessions
+    .filter((session) => {
+      session.start?.startsWith(day)
+
+      return [
+        session.start?.startsWith(day),
+        session.end,
+        session.room,
+      ].every(Boolean)
+    })
+    .map((session) => {
+      const startMins = parseMinutes(session.start!)
+      const endMins = parseMinutes(session.end!)
+
+      const { title } = session[locale.value]
+      const speaker = session.speakers?.map((s) => s[locale.value].name).join(', ')
+
+      return {
+        id: session.id,
+        title,
+        speaker,
+        start: session.start!.slice(11, 16),
+        end: session.end!.slice(11, 16),
+        row: [toRow(startMins), toRow(endMins)],
+        col: rooms.value.findIndex((r) => session.room!.en === r) + 2,
+        tags: [],
+      }
+    })
+})
+</script>
+
+<template>
+  <div
+    class="grid overflow-x-auto rounded-xl border border-gray-200"
+    :style="{
+      gridTemplateColumns: `4.5rem repeat(${rooms.length}, minmax(11rem, 1fr))`,
+      gridTemplateRows: `3rem repeat(${totalGridRows}, ${rowHeight}px)`,
+    }"
+  >
+
+  <div
+      class="left-0 top-0 sticky z-20 bg-gray-50 border-b border-gray-200" 
+      :style="{
+        'grid-row': 1,
+        'grid-column': 1,
+      }"
+    />
+
+    <div
+      v-for="(room, i) in rooms"
+      :key="room"
+      :style="{
+        'grid-row': 1,
+        'grid-column': i + 2,
+      }"
+      class="bg-gray-50 flex justify-center items-center text-primary-400 border-b border-gray-200 font-medium text-sm"
+    >
+      {{ room }}
+    </div>
+
+    <template
+      v-for="label in timeLabels"
+      :key="label.label"
+    >
+      <div
+        class="text-xs bg-gray-50 text-gray-400 pr-2 pt-0.5 text-right border-t border-gray-100 flex justify-center items-start"
+        :style="{
+          'grid-row': `${label.row} / ${label.row + 6}`,
+          'grid-column': 1,
+        }"
+      >
+        {{ label.label }}
+      </div>
+      <div
+        v-for="(_, i) in rooms"
+        :key="i"
+        class="border-t border-gray-100"
+        :style="{
+          'grid-row': label.row,
+          'grid-column': i + 2,
+        }"
+      />
+    </template>
+
+    <NuxtLink
+      v-for="session in sessions"
+      :key="session.id"
+      :to="`/sessions/${session.id}`"
+      class="overflow-hidden"
+      :style="{
+        'grid-row': `${session.row[0]} / ${session.row[1]}`,
+        'grid-column': session.col,
+      }"
+    >
+      <CpSessionItem
+        class="h-full"
+        :end="session.end"
+        :speaker="session.speaker"
+        :start="session.start"
+        :tags="session.tags"
+        :title="session.title"
+      />
+    </NuxtLink>
+  </div>
+</template>
diff --git a/app/pages/session/index.vue b/app/pages/session/index.vue
new file mode 100644
index 0000000..1232ee1
--- /dev/null
+++ b/app/pages/session/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SessionSummary } from '#shared/types/session'
+import CpSessionTable from '~/components/feature/CpSessionTable.vue'
+
+const { data } = await useFetch<Record<string, SessionSummary[]>>('/api/session')
+
+const days = computed(() => Object.keys(data?.value ?? {}).sort())
+</script>
+
+<template>
+  <main>
+    <div class="px-6 pb-4 border-b border-primary-100 flex gap-2">
+      <button
+        v-for="day in days"
+        :key="day"
+        class="text-sm font-semibold px-4 py-2 rounded-full transition-colors"
+      >
+        {{ day }}
+      </button>
+    </div>
+    <CpSessionTable
+      :day="days[0]!"
+      :interval="5"
+      :row-height="50"
+      :sessions="data?.[days[0]!] ?? []"
+      :time-range="['09:00', '17:30']"
+    />
+  </main>
+</template>

From 4894702306dc4d5f986886fc99f8f5a60dee75c6 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 5 Apr 2026 22:52:55 +0800
Subject: [PATCH 04/24] feat(ui): remove text-justify class from title in
 CpSessionItem component

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

diff --git a/app/components/feature/CpSessionItem.vue b/app/components/feature/CpSessionItem.vue
index 9263554..9334fb1 100644
--- a/app/components/feature/CpSessionItem.vue
+++ b/app/components/feature/CpSessionItem.vue
@@ -13,7 +13,7 @@ defineProps<{
 <template>
   <div class="text-primary-600 p-2 border border-primary-100 border-rounded bg-primary-50 relative">
     <div class="flex flex-col">
-      <h1 class="text-base text-inherit font-normal my-1 text-justify">
+      <h1 class="text-base text-inherit font-normal my-1">
         {{ title }}
       </h1>
       <time class="text-md opacity-50">{{ start }} ~ {{ end }}</time>

From e69137884cd3057b02bd1e940993f293dc1f59e2 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 5 Apr 2026 22:57:41 +0800
Subject: [PATCH 05/24] style: fix with eslint

---
 app/components/feature/CpSessionTable.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index 2506412..238a9af 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -92,15 +92,14 @@ const sessions = computed(() => {
 
 <template>
   <div
-    class="grid overflow-x-auto rounded-xl border border-gray-200"
+    class="border border-gray-200 rounded-xl grid overflow-x-auto"
     :style="{
       gridTemplateColumns: `4.5rem repeat(${rooms.length}, minmax(11rem, 1fr))`,
       gridTemplateRows: `3rem repeat(${totalGridRows}, ${rowHeight}px)`,
     }"
   >
-
-  <div
-      class="left-0 top-0 sticky z-20 bg-gray-50 border-b border-gray-200" 
+    <div
+      class="border-b border-gray-200 bg-gray-50 left-0 top-0 sticky z-20"
       :style="{
         'grid-row': 1,
         'grid-column': 1,
@@ -110,11 +109,11 @@ const sessions = computed(() => {
     <div
       v-for="(room, i) in rooms"
       :key="room"
+      class="text-sm text-primary-400 font-medium border-b border-gray-200 bg-gray-50 flex items-center justify-center"
       :style="{
         'grid-row': 1,
         'grid-column': i + 2,
       }"
-      class="bg-gray-50 flex justify-center items-center text-primary-400 border-b border-gray-200 font-medium text-sm"
     >
       {{ room }}
     </div>
@@ -124,7 +123,7 @@ const sessions = computed(() => {
       :key="label.label"
     >
       <div
-        class="text-xs bg-gray-50 text-gray-400 pr-2 pt-0.5 text-right border-t border-gray-100 flex justify-center items-start"
+        class="text-xs text-gray-400 pr-2 pt-0.5 text-right border-t border-gray-100 bg-gray-50 flex items-start justify-center"
         :style="{
           'grid-row': `${label.row} / ${label.row + 6}`,
           'grid-column': 1,
@@ -146,12 +145,12 @@ const sessions = computed(() => {
     <NuxtLink
       v-for="session in sessions"
       :key="session.id"
-      :to="`/sessions/${session.id}`"
       class="overflow-hidden"
       :style="{
         'grid-row': `${session.row[0]} / ${session.row[1]}`,
         'grid-column': session.col,
       }"
+      :to="`/sessions/${session.id}`"
     >
       <CpSessionItem
         class="h-full"

From dd573909091c02052e23c8b4ce481ac5e43c37fb Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Mon, 6 Apr 2026 00:21:50 +0800
Subject: [PATCH 06/24] feat(ui): integrate drag scroll functionality in
 CpSessionTable component

---
 app/components/feature/CpSessionTable.vue |   7 ++
 app/composables/useDragScroll.ts          | 116 ++++++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 app/composables/useDragScroll.ts

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index 238a9af..d2bd1ee 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { SessionSummary } from '#shared/types/session'
 import { useI18n } from '#imports'
+import { useDragScroll } from '~/composables/useDragScroll'
 import CpSessionItem from './CpSessionItem.vue'
 
 const { sessions: _sessions, day, timeRange, interval, rowHeight } = defineProps<{
@@ -13,6 +14,8 @@ const { sessions: _sessions, day, timeRange, interval, rowHeight } = defineProps
 
 const { locale } = useI18n()
 
+const { containerRef, isDragging } = useDragScroll({ vertical: false })
+
 function parseMinutes(isoStr: string) {
   const d = new Date(isoStr)
   return d.getHours() * 60 + d.getMinutes()
@@ -92,7 +95,9 @@ const sessions = computed(() => {
 
 <template>
   <div
+    ref="containerRef"
     class="border border-gray-200 rounded-xl grid overflow-x-auto"
+    :class="isDragging ? 'cursor-grabbing select-none' : 'cursor-grab'"
     :style="{
       gridTemplateColumns: `4.5rem repeat(${rooms.length}, minmax(11rem, 1fr))`,
       gridTemplateRows: `3rem repeat(${totalGridRows}, ${rowHeight}px)`,
@@ -146,11 +151,13 @@ const sessions = computed(() => {
       v-for="session in sessions"
       :key="session.id"
       class="overflow-hidden"
+      :draggable="false"
       :style="{
         'grid-row': `${session.row[0]} / ${session.row[1]}`,
         'grid-column': session.col,
       }"
       :to="`/sessions/${session.id}`"
+      @dragstart.prevent
     >
       <CpSessionItem
         class="h-full"
diff --git a/app/composables/useDragScroll.ts b/app/composables/useDragScroll.ts
new file mode 100644
index 0000000..7b86625
--- /dev/null
+++ b/app/composables/useDragScroll.ts
@@ -0,0 +1,116 @@
+interface UseDragScrollOptions {
+  horizontal?: boolean
+  vertical?: boolean
+}
+
+export function useDragScroll({ horizontal = true, vertical = true }: UseDragScrollOptions = {}) {
+  const containerRef = ref<HTMLElement>()
+  const isDragging = ref(false)
+  const suppressClick = ref(false)
+
+  const dragState = reactive({
+    pointerId: -1,
+    startX: 0,
+    startY: 0,
+    scrollLeft: 0,
+    scrollTop: 0,
+  })
+
+  function handlePointerDown(event: PointerEvent) {
+    if (event.button !== 0 || !containerRef.value) {
+      return
+    }
+
+    dragState.pointerId = event.pointerId
+    dragState.startX = event.clientX
+    dragState.startY = event.clientY
+    dragState.scrollLeft = containerRef.value.scrollLeft
+    dragState.scrollTop = containerRef.value.scrollTop
+    isDragging.value = true
+    suppressClick.value = false
+
+    containerRef.value.setPointerCapture(event.pointerId)
+  }
+
+  function handlePointerMove(event: PointerEvent) {
+    if (!isDragging.value || !containerRef.value) {
+      return
+    }
+
+    event.preventDefault()
+
+    const deltaX = event.clientX - dragState.startX
+    const deltaY = event.clientY - dragState.startY
+
+    const moved = (horizontal && Math.abs(deltaX) > 4) || (vertical && Math.abs(deltaY) > 4)
+    if (moved) {
+      suppressClick.value = true
+    }
+
+    if (horizontal) {
+      containerRef.value.scrollLeft = dragState.scrollLeft - deltaX
+    }
+    if (vertical) {
+      containerRef.value.scrollTop = dragState.scrollTop - deltaY
+    }
+  }
+
+  function stopDragging(event?: PointerEvent) {
+    if (!containerRef.value) {
+      return
+    }
+
+    if (event && event.pointerId !== dragState.pointerId) {
+      return
+    }
+
+    if (dragState.pointerId >= 0 && containerRef.value.hasPointerCapture(dragState.pointerId)) {
+      containerRef.value.releasePointerCapture(dragState.pointerId)
+    }
+
+    dragState.pointerId = -1
+    isDragging.value = false
+  }
+
+  function handleClickCapture(event: MouseEvent) {
+    if (!suppressClick.value) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    suppressClick.value = false
+  }
+
+  function handleDragStart(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  watchEffect((onCleanup) => {
+    const el = containerRef.value
+    if (!el) {
+      return
+    }
+
+    el.addEventListener('pointerdown', handlePointerDown)
+    el.addEventListener('pointermove', handlePointerMove)
+    el.addEventListener('pointerup', stopDragging)
+    el.addEventListener('pointercancel', stopDragging)
+    el.addEventListener('click', handleClickCapture, { capture: true })
+    el.addEventListener('dragstart', handleDragStart)
+
+    onCleanup(() => {
+      el.removeEventListener('pointerdown', handlePointerDown)
+      el.removeEventListener('pointermove', handlePointerMove)
+      el.removeEventListener('pointerup', stopDragging)
+      el.removeEventListener('pointercancel', stopDragging)
+      el.removeEventListener('click', handleClickCapture, { capture: true })
+      el.removeEventListener('dragstart', handleDragStart)
+    })
+  })
+
+  return {
+    containerRef,
+    isDragging,
+  }
+}

From 9d6fccc2a9be256fad58450ccc375129908d9b98 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Thu, 9 Apr 2026 12:38:01 +0800
Subject: [PATCH 07/24] feat: remove useless statement

---
 app/components/feature/CpSessionTable.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index d2bd1ee..360bd97 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -63,15 +63,11 @@ const sessions = computed(() => {
   }
 
   return _sessions
-    .filter((session) => {
-      session.start?.startsWith(day)
-
-      return [
-        session.start?.startsWith(day),
-        session.end,
-        session.room,
-      ].every(Boolean)
-    })
+    .filter((session) => [
+      session.start?.startsWith(day),
+      session.end,
+      session.room,
+    ].every(Boolean))
     .map((session) => {
       const startMins = parseMinutes(session.start!)
       const endMins = parseMinutes(session.end!)

From cfe19ce654e39b02b12c25048a4e8a4b7e2e9dcb Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 12 Apr 2026 17:32:18 +0800
Subject: [PATCH 08/24] feat(ui): implement CpSessionDaySelector for day
 selection in session view

---
 .../feature/CpSessionDaySelector.vue          | 39 +++++++++++++++++++
 app/pages/session/index.vue                   | 20 +++++-----
 2 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 app/components/feature/CpSessionDaySelector.vue

diff --git a/app/components/feature/CpSessionDaySelector.vue b/app/components/feature/CpSessionDaySelector.vue
new file mode 100644
index 0000000..67a6972
--- /dev/null
+++ b/app/components/feature/CpSessionDaySelector.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = defineProps<{
+  days: string[]
+  selectedDay?: string
+}>()
+
+const selectedDay = defineModel<string>()
+
+function formatDayLabel(day: string) {
+  return new Intl.DateTimeFormat('en-US', {
+    day: 'numeric',
+    month: 'short',
+    timeZone: 'Asia/Taipei',
+  })
+    .format(new Date(`${day}T00:00:00+08:00`))
+    .replace(' ', '.')
+}
+
+const activeDay = computed(() => selectedDay.value ?? props.days[0] ?? '')
+</script>
+
+<template>
+  <div class="px-6 pb-4 pt-3 border-b border-primary-100 flex justify-center">
+    <div class="flex flex-wrap gap-3 items-center justify-center">
+      <button
+        v-for="day in days"
+        :key="day"
+        class="text-2xl text-white font-bold px-8 py-2 border-3 rounded-full min-w-34 cursor-pointer italic shadow-[0_4px_0_0_var(--un-shadow-color)] transition-colors"
+        :class="day === activeDay
+          ? 'border-primary-700 bg-primary-400 shadow-primary-700'
+          : 'border-primary-700 bg-gray-200 shadow-primary-700'"
+        type="button"
+        @click="selectedDay = day"
+      >
+        {{ formatDayLabel(day) }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/session/index.vue b/app/pages/session/index.vue
index 1232ee1..63fd21f 100644
--- a/app/pages/session/index.vue
+++ b/app/pages/session/index.vue
@@ -1,28 +1,26 @@
 <script setup lang="ts">
 import type { SessionSummary } from '#shared/types/session'
+import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 
 const { data } = await useFetch<Record<string, SessionSummary[]>>('/api/session')
 
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
+
+const selectedDay = ref(days.value[0]!)
 </script>
 
 <template>
   <main>
-    <div class="px-6 pb-4 border-b border-primary-100 flex gap-2">
-      <button
-        v-for="day in days"
-        :key="day"
-        class="text-sm font-semibold px-4 py-2 rounded-full transition-colors"
-      >
-        {{ day }}
-      </button>
-    </div>
+    <CpSessionDaySelector
+      v-model="selectedDay"
+      :days="days"
+    />
     <CpSessionTable
-      :day="days[0]!"
+      :day="selectedDay"
       :interval="5"
       :row-height="50"
-      :sessions="data?.[days[0]!] ?? []"
+      :sessions="data?.[selectedDay] ?? []"
       :time-range="['09:00', '17:30']"
     />
   </main>

From 06a17a20b5eb0cdbe2d08435ed9753033521d072 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 12 Apr 2026 18:01:57 +0800
Subject: [PATCH 09/24] fix(ui): session item should can be clicked

---
 app/composables/useDragScroll.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/composables/useDragScroll.ts b/app/composables/useDragScroll.ts
index 7b86625..ffe141b 100644
--- a/app/composables/useDragScroll.ts
+++ b/app/composables/useDragScroll.ts
@@ -28,8 +28,6 @@ export function useDragScroll({ horizontal = true, vertical = true }: UseDragScr
     dragState.scrollTop = containerRef.value.scrollTop
     isDragging.value = true
     suppressClick.value = false
-
-    containerRef.value.setPointerCapture(event.pointerId)
   }
 
   function handlePointerMove(event: PointerEvent) {

From 8c25dc975d176fa4a6350468ab7a14ab4ea191ec Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 12 Apr 2026 18:03:11 +0800
Subject: [PATCH 10/24] fix: current session item url

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

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index 360bd97..0916d5b 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -152,7 +152,7 @@ const sessions = computed(() => {
         'grid-row': `${session.row[0]} / ${session.row[1]}`,
         'grid-column': session.col,
       }"
-      :to="`/sessions/${session.id}`"
+      :to="`/session/${session.id}`"
       @dragstart.prevent
     >
       <CpSessionItem

From 60e596543004622916e28d90a88279dbaeb838cc Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Fri, 1 May 2026 15:19:10 +0800
Subject: [PATCH 11/24] fix(ui): correct styling issues in CpSessionItem
 components

---
 app/components/feature/CpSessionItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/feature/CpSessionItem.vue b/app/components/feature/CpSessionItem.vue
index 9334fb1..53e0204 100644
--- a/app/components/feature/CpSessionItem.vue
+++ b/app/components/feature/CpSessionItem.vue
@@ -11,12 +11,12 @@ defineProps<{
 </script>
 
 <template>
-  <div class="text-primary-600 p-2 border border-primary-100 border-rounded bg-primary-50 relative">
+  <div class="text-primary-600 p-2 border border-primary-100 rounded bg-primary-50 relative">
     <div class="flex flex-col">
       <h1 class="text-base text-inherit font-normal my-1">
         {{ title }}
       </h1>
-      <time class="text-md opacity-50">{{ start }} ~ {{ end }}</time>
+      <time class="text-base opacity-50">{{ start }} ~ {{ end }}</time>
       <p class="text-sm my-1">
         {{ speaker }}
       </p>

From 75286407975308997a5e828a40eadcc8604c02b8 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 12 Apr 2026 18:18:11 +0800
Subject: [PATCH 12/24] fix(types): update PretalxData interface to allow
 numeric keys in map property

---
 shared/types/pretalx.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/types/pretalx.ts b/shared/types/pretalx.ts
index 602d4be..5375db3 100644
--- a/shared/types/pretalx.ts
+++ b/shared/types/pretalx.ts
@@ -98,7 +98,7 @@ export interface PretalxResponse<T extends PretalxTable> {
 
 export interface PretalxData<T extends PretalxTable> {
   arr: TableTypeMap[T][]
-  map: Record<string, TableTypeMap[T]>
+  map: Record<string | number, TableTypeMap[T]>
 }
 
 export type PretalxResult = {

From e6f13ef28e4a7ae7bcc691af540b41a76ef9e707 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 26 Apr 2026 15:49:31 +0800
Subject: [PATCH 13/24] perf(ui): improve drag scroll event handling and
 cleanup

---
 app/composables/useDragScroll.ts | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/composables/useDragScroll.ts b/app/composables/useDragScroll.ts
index ffe141b..3ee3ea8 100644
--- a/app/composables/useDragScroll.ts
+++ b/app/composables/useDragScroll.ts
@@ -28,6 +28,10 @@ export function useDragScroll({ horizontal = true, vertical = true }: UseDragScr
     dragState.scrollTop = containerRef.value.scrollTop
     isDragging.value = true
     suppressClick.value = false
+
+    window.addEventListener('pointermove', handlePointerMove)
+    window.addEventListener('pointerup', stopDragging)
+    window.addEventListener('pointercancel', stopDragging)
   }
 
   function handlePointerMove(event: PointerEvent) {
@@ -54,20 +58,16 @@ export function useDragScroll({ horizontal = true, vertical = true }: UseDragScr
   }
 
   function stopDragging(event?: PointerEvent) {
-    if (!containerRef.value) {
-      return
-    }
-
     if (event && event.pointerId !== dragState.pointerId) {
       return
     }
 
-    if (dragState.pointerId >= 0 && containerRef.value.hasPointerCapture(dragState.pointerId)) {
-      containerRef.value.releasePointerCapture(dragState.pointerId)
-    }
-
     dragState.pointerId = -1
     isDragging.value = false
+
+    window.removeEventListener('pointermove', handlePointerMove)
+    window.removeEventListener('pointerup', stopDragging)
+    window.removeEventListener('pointercancel', stopDragging)
   }
 
   function handleClickCapture(event: MouseEvent) {
@@ -91,19 +91,17 @@ export function useDragScroll({ horizontal = true, vertical = true }: UseDragScr
     }
 
     el.addEventListener('pointerdown', handlePointerDown)
-    el.addEventListener('pointermove', handlePointerMove)
-    el.addEventListener('pointerup', stopDragging)
-    el.addEventListener('pointercancel', stopDragging)
     el.addEventListener('click', handleClickCapture, { capture: true })
     el.addEventListener('dragstart', handleDragStart)
 
     onCleanup(() => {
       el.removeEventListener('pointerdown', handlePointerDown)
-      el.removeEventListener('pointermove', handlePointerMove)
-      el.removeEventListener('pointerup', stopDragging)
-      el.removeEventListener('pointercancel', stopDragging)
       el.removeEventListener('click', handleClickCapture, { capture: true })
       el.removeEventListener('dragstart', handleDragStart)
+      // Clean up window listeners in case drag was in progress
+      window.removeEventListener('pointermove', handlePointerMove)
+      window.removeEventListener('pointerup', stopDragging)
+      window.removeEventListener('pointercancel', stopDragging)
     })
   })
 

From 01a1ee68cd0be94db6b0fdc52fe4da549746c7e3 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 26 Apr 2026 16:03:28 +0800
Subject: [PATCH 14/24] fix: improve parseMinutes function to handle ISO time
 strings correctly

---
 app/components/feature/CpSessionTable.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index 0916d5b..40f877a 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -17,8 +17,12 @@ const { locale } = useI18n()
 const { containerRef, isDragging } = useDragScroll({ vertical: false })
 
 function parseMinutes(isoStr: string) {
-  const d = new Date(isoStr)
-  return d.getHours() * 60 + d.getMinutes()
+  const match = isoStr.match(/T(\d{2}):(\d{2})/)
+  if (!match) {
+    throw new Error(`Invalid ISO time string: ${isoStr}`)
+  }
+  const [, hours, minutes] = match
+  return Number(hours) * 60 + Number(minutes)
 }
 
 const timeStart = computed(() => parseMinutes(`${day}T${timeRange[0]}+08:00`))

From acd5d07b46a8d10920ac328bc87727446df8ad8c Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sun, 26 Apr 2026 16:12:42 +0800
Subject: [PATCH 15/24] fix(ui): update session selection logic and add i18n
 support for no session message

---
 app/pages/session/index.vue | 45 +++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/pages/session/index.vue b/app/pages/session/index.vue
index 63fd21f..21bacff 100644
--- a/app/pages/session/index.vue
+++ b/app/pages/session/index.vue
@@ -1,27 +1,48 @@
 <script setup lang="ts">
 import type { SessionSummary } from '#shared/types/session'
+import { useI18n } from 'vue-i18n'
 import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 
+const { t } = useI18n()
+
 const { data } = await useFetch<Record<string, SessionSummary[]>>('/api/session')
 
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
 
-const selectedDay = ref(days.value[0]!)
+const selectedDay = ref<string | null>(null)
+
+watch(days, (newDays) => {
+  if (selectedDay.value === null && newDays.length > 0) {
+    selectedDay.value = newDays[0]!
+  }
+}, { immediate: true })
 </script>
 
 <template>
   <main>
-    <CpSessionDaySelector
-      v-model="selectedDay"
-      :days="days"
-    />
-    <CpSessionTable
-      :day="selectedDay"
-      :interval="5"
-      :row-height="50"
-      :sessions="data?.[selectedDay] ?? []"
-      :time-range="['09:00', '17:30']"
-    />
+    <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>
+      {{ t('noSession') }}
+    </p>
   </main>
 </template>
+
+<i18n lang="yaml">
+  en:
+    noSession: 'Not announced yet, stay tuned.'
+  zh:
+    noSession: '尚未公布，敬請期待。'
+</i18n>

From c58e4ac472780e3134400bec04d1a7160faeea1d Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Wed, 29 Apr 2026 14:55:36 +0800
Subject: [PATCH 16/24] fix(ui): adjust time label generation to exclude end
 time

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

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index 40f877a..2f206a7 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -54,7 +54,7 @@ const rooms = computed(() => {
 const timeLabels = computed(() => {
   const labels: { label: string, row: number }[] = []
   let m = Math.ceil(timeStart.value / 30) * 30
-  while (m <= timeEnd.value) {
+  while (m < timeEnd.value) {
     labels.push({ label: formatTime(m), row: toRow(m) })
     m += 30
   }

From 224c10ce4dde11bccda56091bffe5bb7c5ff8c1e Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Wed, 29 Apr 2026 14:57:07 +0800
Subject: [PATCH 17/24] feat(ui): enhance button styling for day selection in
 CpSessionDaySelector

---
 app/components/feature/CpSessionDaySelector.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/components/feature/CpSessionDaySelector.vue b/app/components/feature/CpSessionDaySelector.vue
index 67a6972..1f527b7 100644
--- a/app/components/feature/CpSessionDaySelector.vue
+++ b/app/components/feature/CpSessionDaySelector.vue
@@ -25,10 +25,8 @@ const activeDay = computed(() => selectedDay.value ?? props.days[0] ?? '')
       <button
         v-for="day in days"
         :key="day"
-        class="text-2xl text-white font-bold px-8 py-2 border-3 rounded-full min-w-34 cursor-pointer italic shadow-[0_4px_0_0_var(--un-shadow-color)] transition-colors"
-        :class="day === activeDay
-          ? 'border-primary-700 bg-primary-400 shadow-primary-700'
-          : 'border-primary-700 bg-gray-200 shadow-primary-700'"
+        class="text-2xl text-white font-bold px-8 py-2 border-3 border-primary-700 rounded-full min-w-34 cursor-pointer italic shadow-[0_4px_0_0_var(--un-shadow-color)] shadow-primary-700 transition-colors"
+        :class="day === activeDay ? 'bg-primary-400' : 'bg-gray-200'"
         type="button"
         @click="selectedDay = day"
       >

From 240353404ef82ab43bb75b2ec658060ad48a4f15 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Wed, 29 Apr 2026 15:02:24 +0800
Subject: [PATCH 18/24] feat(ui): correct heading level for session title in
 CpSessionItem

---
 app/components/feature/CpSessionItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/feature/CpSessionItem.vue b/app/components/feature/CpSessionItem.vue
index 53e0204..5525986 100644
--- a/app/components/feature/CpSessionItem.vue
+++ b/app/components/feature/CpSessionItem.vue
@@ -13,9 +13,9 @@ defineProps<{
 <template>
   <div class="text-primary-600 p-2 border border-primary-100 rounded bg-primary-50 relative">
     <div class="flex flex-col">
-      <h1 class="text-base text-inherit font-normal my-1">
+      <h3 class="text-base text-inherit font-normal my-1">
         {{ title }}
-      </h1>
+      </h3>
       <time class="text-base opacity-50">{{ start }} ~ {{ end }}</time>
       <p class="text-sm my-1">
         {{ speaker }}

From 70f24da045dbc62ffd511e2c1afac9d96dedc0fc Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Wed, 29 Apr 2026 15:03:55 +0800
Subject: [PATCH 19/24] fix(ui): remove unused selectedDay prop from
 CpSessionDaySelector

---
 app/components/feature/CpSessionDaySelector.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/feature/CpSessionDaySelector.vue b/app/components/feature/CpSessionDaySelector.vue
index 1f527b7..4c1ce2e 100644
--- a/app/components/feature/CpSessionDaySelector.vue
+++ b/app/components/feature/CpSessionDaySelector.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
-  days: string[]
-  selectedDay?: string
-}>()
+const props = defineProps<{ days: string[] }>()
 
 const selectedDay = defineModel<string>()
 

From 385b7260b57cce47eac73968f007f0e4b51aa698 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Wed, 29 Apr 2026 15:06:20 +0800
Subject: [PATCH 20/24] perf(ui): simplify time parsing logic in CpSessionTable

---
 app/components/feature/CpSessionTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index 2f206a7..b65b046 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -25,8 +25,8 @@ function parseMinutes(isoStr: string) {
   return Number(hours) * 60 + Number(minutes)
 }
 
-const timeStart = computed(() => parseMinutes(`${day}T${timeRange[0]}+08:00`))
-const timeEnd = computed(() => parseMinutes(`${day}T${timeRange[1]}+08:00`))
+const timeStart = computed(() => parseMinutes(`T${timeRange[0]}`))
+const timeEnd = computed(() => parseMinutes(`T${timeRange[1]}`))
 const totalGridRows = computed(() => Math.round((timeEnd.value - timeStart.value) / interval))
 
 function formatTime(minutes: number) {

From f2bbadea807fe5acc57bb8bd4384b08bc7f32527 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Wed, 29 Apr 2026 15:08:43 +0800
Subject: [PATCH 21/24] perf(ui): remove unused type import for session data in
 index.vue

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

diff --git a/app/pages/session/index.vue b/app/pages/session/index.vue
index 21bacff..f0ab11b 100644
--- a/app/pages/session/index.vue
+++ b/app/pages/session/index.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { SessionSummary } from '#shared/types/session'
 import { useI18n } from 'vue-i18n'
 import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 
 const { t } = useI18n()
 
-const { data } = await useFetch<Record<string, SessionSummary[]>>('/api/session')
+const { data } = await useFetch('/api/session')
 
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
 

From 3a352e337e35ff05d9d0ad7105ab42822aa33bf4 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Wed, 29 Apr 2026 15:33:45 +0800
Subject: [PATCH 22/24] fix(types): update PretalxData map type to use string
 keys only

---
 shared/types/pretalx.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/shared/types/pretalx.ts b/shared/types/pretalx.ts
index 5375db3..602d4be 100644
--- a/shared/types/pretalx.ts
+++ b/shared/types/pretalx.ts
@@ -98,7 +98,7 @@ export interface PretalxResponse<T extends PretalxTable> {
 
 export interface PretalxData<T extends PretalxTable> {
   arr: TableTypeMap[T][]
-  map: Record<string | number, TableTypeMap[T]>
+  map: Record<string, TableTypeMap[T]>
 }
 
 export type PretalxResult = {

From 49629650f9e3fa67e4e4ecb465b7f27b05baf781 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 9 May 2026 23:15:52 +0800
Subject: [PATCH 23/24] fix(ui): adjust grid-row calculation for time labels in
 CpSessionTable

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

diff --git a/app/components/feature/CpSessionTable.vue b/app/components/feature/CpSessionTable.vue
index b65b046..cc1a7ee 100644
--- a/app/components/feature/CpSessionTable.vue
+++ b/app/components/feature/CpSessionTable.vue
@@ -130,7 +130,7 @@ const sessions = computed(() => {
       <div
         class="text-xs text-gray-400 pr-2 pt-0.5 text-right border-t border-gray-100 bg-gray-50 flex items-start justify-center"
         :style="{
-          'grid-row': `${label.row} / ${label.row + 6}`,
+          'grid-row': `${label.row} / ${label.row + 30 / interval}`,
           'grid-column': 1,
         }"
       >

From e0141e580e45f126eee144cf7353ec675b2f04cf Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 9 May 2026 23:18:38 +0800
Subject: [PATCH 24/24] fix(ui): refactor selectedDay handling to use computed
 property with manual selection

---
 app/pages/session/index.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/pages/session/index.vue b/app/pages/session/index.vue
index f0ab11b..07a14d5 100644
--- a/app/pages/session/index.vue
+++ b/app/pages/session/index.vue
@@ -7,15 +7,13 @@ const { t } = useI18n()
 
 const { data } = await useFetch('/api/session')
 
+const manualSelectedDay = ref<string | null>(null)
 const days = computed(() => Object.keys(data?.value ?? {}).sort())
 
-const selectedDay = ref<string | null>(null)
-
-watch(days, (newDays) => {
-  if (selectedDay.value === null && newDays.length > 0) {
-    selectedDay.value = newDays[0]!
-  }
-}, { immediate: true })
+const selectedDay = computed({
+  get: () => manualSelectedDay.value ?? days.value[0] ?? null,
+  set: (value) => void (manualSelectedDay.value = value),
+})
 </script>
 
 <template>