From 346670015e2a727cb8372f415231fb851518c5d3 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 18 Jul 2026 20:41:45 +0800
Subject: [PATCH 01/13] fix: enhance session list layout and accessibility
 features

---
 app/components/feature/CpSessionList.vue | 67 +++++++++++++++++-------
 1 file changed, 48 insertions(+), 19 deletions(-)

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index e93bef8..e1c9839 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -41,30 +41,59 @@ const times = computed(() => Object.keys(sessions.value).sort())
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 w-[var(--viewport-width,100vw)] isolate">
+  <div class="pa-3 flex flex-col gap-6 w-[var(--viewport-width,100vw)] isolate">
     <section
       v-for="time in times"
       :key="time"
+      class="group/section"
     >
-      <h3 class="text-lg text-primary-400 font-medium mb-2 py-1 bg-white top-0 sticky z-content">
-        {{ time }}
+      <input
+        :id="`session-time-${time}`"
+        checked
+        class="sr-only"
+        type="checkbox"
+      >
+      <h3 class="text-sm font-medium mb-2 bg-white top-0 sticky z-content">
+        <label
+          class="text-primary-400 py-1 flex gap-1 w-full cursor-pointer select-none items-center justify-between"
+          :for="`session-time-${time}`"
+        >
+          <div class="flex gap-x-2 items-center">
+            <span class="w-[5ch] block">{{ time }}</span>
+            <Icon
+              class="text-md text-primary-400"
+              name="tabler:circle"
+            />
+            <span v-if="sessions?.[time] && sessions[time].length > 1">
+              {{ sessions[time].length }} 場同時開始
+            </span>
+          </div>
+          <Icon
+            class="text-sm transition-transform duration-300 group-has-[input:not(:checked)]/section:-rotate-180"
+            name="tabler:chevron-up"
+          />
+        </label>
       </h3>
-      <div class="flex flex-col gap-2">
-        <CpSessionItem
-          v-for="session in sessions[time]"
-          :key="session.id"
-          :end="session.end"
-          :favorite="preview || isFavorite(session.id)"
-          :favorite-label="favoriteLabel(session.id, preview)"
-          :readonly="preview"
-          :room="session.room"
-          :speaker="session.speakers"
-          :start="session.start"
-          :tags="session.tags"
-          :title="session.title"
-          :to="localePath(`/session/${session.id}`)"
-          @toggle-favorite="toggleFavorite(session.id)"
-        />
+      <div class="grid grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out group-has-[input:not(:checked)]/section:grid-rows-[0fr]">
+        <div class="overflow-hidden">
+          <div class="pb-2 flex flex-col gap-2">
+            <CpSessionItem
+              v-for="session in sessions[time]"
+              :key="session.id"
+              :end="session.end"
+              :favorite="preview || isFavorite(session.id)"
+              :favorite-label="favoriteLabel(session.id, preview)"
+              :readonly="preview"
+              :room="session.room"
+              :speaker="session.speakers"
+              :start="session.start"
+              :tags="session.tags"
+              :title="session.title"
+              :to="localePath(`/session/${session.id}`)"
+              @toggle-favorite="toggleFavorite(session.id)"
+            />
+          </div>
+        </div>
       </div>
     </section>
   </div>

From 3ec901de2f0973cf833212be1e08c251c050824f Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Tue, 21 Jul 2026 18:39:48 +0800
Subject: [PATCH 02/13] feat: add collapsible time sections to session list

---
 app/components/feature/CpSessionList.vue | 18 +++++++++++++++---
 app/pages/session.vue                    |  1 +
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index e1c9839..232a760 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import type { SessionSummary } from '#shared/types/session'
+import type { SessionSummary, SessionTrack } from '#shared/types/session'
 import { useI18n } from '#imports'
 import { useFavoriteLabel, useFavorites } from '~/composables/useFavorites'
+import { DEFAULT_TRACK_COLOR, trackKey } from '~/utils/tracks'
 import CpSessionItem from './CpSessionItem.vue'
 
-const { sessions: _sessions, preview = false } = defineProps<{
+const { sessions: _sessions, trackColors, preview = false } = defineProps<{
   sessions: SessionSummary[]
+  trackColors: Map<string, string>
   // Shared-list preview: render every session as a read-only favorite.
   preview?: boolean
 }>()
@@ -15,6 +17,11 @@ const localePath = useLocalePath()
 const { isFavorite, toggleFavorite } = useFavorites()
 const favoriteLabel = useFavoriteLabel(t)
 
+function localeName(name?: SessionTrack['name']) {
+  const { en = '', 'zh-hant': zh = '' } = name ?? {}
+  return locale.value === 'zh' ? zh || en : en || zh
+}
+
 const sessions = computed(() => {
   if (!_sessions) {
     return {}
@@ -31,7 +38,12 @@ const sessions = computed(() => {
         room: locale.value === 'zh'
           ? (session.room?.['zh-hant'] || session.room?.en || '')
           : (session.room?.en || session.room?.['zh-hant'] || ''),
-        tags: [],
+        tags: session.tags,
+        track: {
+          id: session.track?.id,
+          name: localeName(session.track?.name),
+          color: trackColors.get(trackKey(session)) ?? DEFAULT_TRACK_COLOR,
+        },
       })),
     (session) => session.start,
   )
diff --git a/app/pages/session.vue b/app/pages/session.vue
index 2298bae..4786c77 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -260,6 +260,7 @@ definePageMeta({
             class="sm:hidden"
             :preview="isSharing"
             :sessions="displayedSessions"
+            :track-colors="trackColors"
           />
           <CpSessionTrackTable
             v-if="displayedSessions.length > 0 && viewMode !== 'table'"

From c1a6067392e29f4d834bef879e48f2c23abcd131 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 14:20:50 +0800
Subject: [PATCH 03/13] feat: redesign item in session list with track color
 and star bookmark

---
 app/components/feature/CpSessionItem.vue | 41 +++++++++++++++---------
 app/components/feature/CpSessionList.vue |  1 +
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/components/feature/CpSessionItem.vue b/app/components/feature/CpSessionItem.vue
index 5708cd5..1ac36ec 100644
--- a/app/components/feature/CpSessionItem.vue
+++ b/app/components/feature/CpSessionItem.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import CpBadge from '~/components/shared/CpBadge.vue'
-
 defineProps<{
   // Session link target, rendered as an overlay so the bookmark isn't nested in the anchor.
   to: string
@@ -11,6 +9,11 @@ defineProps<{
   room?: string
   tags: string[]
   favorite?: boolean
+  track: {
+    id?: number
+    name: string
+    color: string
+  }
   // Resolved by the parent to avoid a per-card i18n scope (see CpSessionTable).
   favoriteLabel?: string
   // Shared-list preview: show the filled bookmark as a static, non-toggleable indicator.
@@ -24,10 +27,8 @@ defineEmits<{
 
 <template>
   <div
-    class="p-2 border rounded transition-colors relative"
-    :class="favorite
-      ? 'text-cp-orange-700 border-cp-orange-300 bg-cp-orange-50'
-      : 'text-primary-600 border-primary-100 bg-primary-50'"
+    class="p-2 border border-l-5 border-gray-300 rounded transition-colors relative"
+    :style="{ 'border-left-color': track.color }"
   >
     <!-- Overlay link, so the bookmark is a sibling rather than nested in the anchor.
          Both are absolute; the bookmark follows in DOM order, so it paints on top. -->
@@ -42,7 +43,7 @@ defineEmits<{
       aria-hidden="true"
       class="text-xl text-cp-orange-600 leading-none p-1 pointer-events-none right-1 top-1 absolute"
     >
-      <Icon name="tabler:bookmark-filled" />
+      <Icon name="tabler:start-filled" />
     </span>
     <button
       v-else
@@ -50,17 +51,26 @@ defineEmits<{
       :aria-pressed="favorite"
       class="text-xl leading-none p-1 rounded cursor-pointer transition-colors right-1 top-1 absolute"
       :class="favorite
-        ? 'text-cp-orange-600 hover:text-cp-orange-700'
-        : 'text-primary-300 hover:text-primary-500'"
+        ? 'text-yellow-400'
+        : 'text-gray-600'"
       type="button"
       @click.prevent.stop="$emit('toggleFavorite')"
     >
-      <Icon :name="favorite ? 'tabler:bookmark-filled' : 'tabler:bookmark'" />
+      <Icon :name="favorite ? 'tabler:star-filled' : 'tabler:star'" />
     </button>
     <div class="pr-6 flex flex-col">
-      <h3 class="text-base text-inherit font-normal my-1">
+      <span
+        class="text-xs text-white font-medium px-3 py-1 rounded-full flex gap-0.5 w-max items-center"
+        :style="{ backgroundColor: track.color }"
+      >
+        {{ track.name }}
+      </span>
+      <h3 class="text-base text-inherit font-bold my-1">
         {{ title }}
       </h3>
+      <p class="text-sm my-1">
+        {{ speaker }}
+      </p>
       <div class="my-1 flex gap-2 items-center">
         <template v-if="room && room.trim() !== ''">
           <span>{{ room }}</span>
@@ -68,16 +78,15 @@ defineEmits<{
         </template>
         <time class="text-base opacity-50">{{ start }} ~ {{ end }}</time>
       </div>
-      <p class="text-sm my-1">
-        {{ speaker }}
-      </p>
+
       <p class="flex gap-1">
-        <CpBadge
+        <span
           v-for="tag in tags"
           :key="tag"
+          class="text-xs text-gray-600 font-medium px-3 py-1 rounded-full bg-stone-100"
         >
           {{ tag }}
-        </CpBadge>
+        </span>
       </p>
     </div>
   </div>
diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index 232a760..11b7d76 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -102,6 +102,7 @@ const times = computed(() => Object.keys(sessions.value).sort())
               :tags="session.tags"
               :title="session.title"
               :to="localePath(`/session/${session.id}`)"
+              :track="session.track"
               @toggle-favorite="toggleFavorite(session.id)"
             />
           </div>

From 67348a766d350367ca2404faca1b9ae4bc8ffd15 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 14:37:32 +0800
Subject: [PATCH 04/13] feat: replace CpSessionViewToggle with CpGroupButton in
 session filter

---
 app/components/feature/CpSessionFilterBar.vue                 | 4 ++--
 .../CpSessionViewToggle.vue => shared/CpGroupButton.vue}      | 4 ++--
 app/pages/session.vue                                         | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename app/components/{feature/CpSessionViewToggle.vue => shared/CpGroupButton.vue} (91%)

diff --git a/app/components/feature/CpSessionFilterBar.vue b/app/components/feature/CpSessionFilterBar.vue
index 4bce00b..aa5a71f 100644
--- a/app/components/feature/CpSessionFilterBar.vue
+++ b/app/components/feature/CpSessionFilterBar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { FilterOption } from '~/composables/useSessionFilter'
+import CpGroupButton from '~/components/shared/CpGroupButton.vue'
 import CpTextField from '~/components/shared/CpTextField.vue'
 import CpSessionFilterDropdown from './CpSessionFilterDropdown.vue'
-import CpSessionViewToggle from './CpSessionViewToggle.vue'
 
 export type TableViewMode = 'track' | 'table'
 
@@ -26,7 +26,7 @@ const viewModeItems = computed<{ key: TableViewMode, label: string, icon: string
 <template>
   <div class="flex flex-col gap-3 w-[var(--viewport-width,100vw)] items-stretch sm:flex-row sm:items-center sm:justify-between">
     <div class="flex shrink-0 gap-3 items-center justify-center sm:justify-start">
-      <CpSessionViewToggle
+      <CpGroupButton
         v-model="viewMode"
         class="hidden sm:inline-flex"
         :items="viewModeItems"
diff --git a/app/components/feature/CpSessionViewToggle.vue b/app/components/shared/CpGroupButton.vue
similarity index 91%
rename from app/components/feature/CpSessionViewToggle.vue
rename to app/components/shared/CpGroupButton.vue
index d4a4cb2..eca9706 100644
--- a/app/components/feature/CpSessionViewToggle.vue
+++ b/app/components/shared/CpGroupButton.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts" generic="T extends string">
 import CpButton from '~/components/shared/CpButton.vue'
 
-export interface SessionViewItem<T extends string> {
+export interface Item<T extends string> {
   key: T
   label: string
   icon?: string
 }
 
 defineProps<{
-  items: SessionViewItem<T>[]
+  items: Item<T>[]
 }>()
 
 const model = defineModel<T>({ required: true })
diff --git a/app/pages/session.vue b/app/pages/session.vue
index 4786c77..50480cc 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -16,7 +16,7 @@ import CpSessionLoadingSkeleton from '~/components/feature/CpSessionLoadingSkele
 import CpSessionShareButton from '~/components/feature/CpSessionShareButton.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 import CpSessionTrackTable from '~/components/feature/CpSessionTrackTable.vue'
-import CpSessionViewToggle from '~/components/feature/CpSessionViewToggle.vue'
+import CpGroupButton from '~/components/shared/CpGroupButton.vue'
 import { decodeFavorites, provideFavorites } from '~/composables/useFavorites'
 import { useSessionFilter } from '~/composables/useSessionFilter'
 import { buildTrackColorMap } from '~/utils/tracks'
@@ -246,7 +246,7 @@ definePageMeta({
             <template #controls>
               <!-- Mobile: toggle, then share. Desktop: share, then toggle. -->
               <div class="flex gap-3 items-center sm:flex-row-reverse">
-                <CpSessionViewToggle
+                <CpGroupButton
                   v-model="view"
                   :items="viewItems"
                 />

From b8c3e115ecfcaf59096f4f70058247f2bb9db74b Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 14:53:54 +0800
Subject: [PATCH 05/13] refactor: extract view toggle into CpFavoriteViewToggle
 component

---
 .../feature/CpFavoriteViewToggle.vue          | 58 +++++++++++++++++++
 app/pages/session.vue                         | 15 +----
 2 files changed, 60 insertions(+), 13 deletions(-)
 create mode 100644 app/components/feature/CpFavoriteViewToggle.vue

diff --git a/app/components/feature/CpFavoriteViewToggle.vue b/app/components/feature/CpFavoriteViewToggle.vue
new file mode 100644
index 0000000..fac482c
--- /dev/null
+++ b/app/components/feature/CpFavoriteViewToggle.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import CpButton from '~/components/shared/CpButton.vue'
+
+type SessionViewItemKey = 'all' | 'favorite'
+
+interface SessionViewItem {
+  key: SessionViewItemKey
+  label: string
+  icon?: string
+}
+
+const model = defineModel<SessionViewItemKey>({ required: true })
+
+const { t } = useI18n()
+
+const viewItems = computed<SessionViewItem[]>(() => [
+  { key: 'all', label: t('view.all') },
+  { key: 'favorite', label: t('view.favorite'), icon: 'tabler:bookmark' },
+])
+</script>
+
+<template>
+  <!-- Flush segments so the toggle's height matches the adjacent search field. -->
+  <div class="border border-gray-200 rounded-md bg-white inline-flex overflow-hidden">
+    <CpButton
+      v-for="item in viewItems"
+      :key="item.key"
+      :active="model === item.key"
+      :aria-pressed="model === item.key"
+      class="!rounded-none"
+      variant="basic"
+      @click="model = item.key"
+    >
+      <template
+        v-if="item.icon"
+        #icon
+      >
+        <Icon
+          :name="item.icon"
+          size="18"
+        />
+      </template>
+      {{ item.label }}
+    </CpButton>
+  </div>
+</template>
+
+<i18n lang="yaml">
+  en:
+    view:
+      all: 'Sessions'
+      favorite: 'Favorites'
+  zh:
+    view:
+      all: '議程'
+      favorite: '收藏'
+</i18n>
diff --git a/app/pages/session.vue b/app/pages/session.vue
index 50480cc..8a4cfa9 100644
--- a/app/pages/session.vue
+++ b/app/pages/session.vue
@@ -8,6 +8,7 @@ import { z } from 'zod'
 import { useRoute, useRouter } from '#imports'
 import { SessionSummarySchema } from '#shared/types/session'
 import CpFavoriteImportBanner from '~/components/feature/CpFavoriteImportBanner.vue'
+import CpFavoriteViewToggle from '~/components/feature/CpFavoriteViewToggle.vue'
 import CpSessionDaySelector from '~/components/feature/CpSessionDaySelector.vue'
 import CpSessionEmptyBanner from '~/components/feature/CpSessionEmptyBanner.vue'
 import CpSessionFilterBar from '~/components/feature/CpSessionFilterBar.vue'
@@ -16,7 +17,6 @@ import CpSessionLoadingSkeleton from '~/components/feature/CpSessionLoadingSkele
 import CpSessionShareButton from '~/components/feature/CpSessionShareButton.vue'
 import CpSessionTable from '~/components/feature/CpSessionTable.vue'
 import CpSessionTrackTable from '~/components/feature/CpSessionTrackTable.vue'
-import CpGroupButton from '~/components/shared/CpGroupButton.vue'
 import { decodeFavorites, provideFavorites } from '~/composables/useFavorites'
 import { useSessionFilter } from '~/composables/useSessionFilter'
 import { buildTrackColorMap } from '~/utils/tracks'
@@ -133,10 +133,6 @@ const viewMode = useStorage<TableViewMode>('coscup-session-view-mode', 'track')
 
 type SessionView = 'all' | 'favorite'
 const view = ref<SessionView>('all')
-const viewItems = computed<{ key: SessionView, label: string, icon?: string }[]>(() => [
-  { key: 'all', label: t('view.all') },
-  { key: 'favorite', label: t('view.favorite'), icon: 'tabler:bookmark' },
-])
 
 // The favorites / shared view on top of the room/tag/search filters.
 const displayedSessions = computed(() => {
@@ -246,9 +242,8 @@ definePageMeta({
             <template #controls>
               <!-- Mobile: toggle, then share. Desktop: share, then toggle. -->
               <div class="flex gap-3 items-center sm:flex-row-reverse">
-                <CpGroupButton
+                <CpFavoriteViewToggle
                   v-model="view"
-                  :items="viewItems"
                 />
                 <CpSessionShareButton v-if="view === 'favorite' && favorites.size > 0" />
               </div>
@@ -308,15 +303,9 @@ definePageMeta({
     meta:
       title: 'Sessions'
       description: 'Browse the full session schedule for COSCUP x UbuCon Asia 2026.'
-    view:
-      all: 'Sessions'
-      favorite: 'Favorites'
   zh:
     noSession: '尚未公布，敬請期待。'
     meta:
       title: '議程'
       description: '瀏覽 COSCUP x UbuCon Asia 2026 的完整議程時間表。'
-    view:
-      all: '議程'
-      favorite: '收藏'
 </i18n>

From cd49185bc9222068a478b1642db6b50e8572f369 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 15:49:17 +0800
Subject: [PATCH 06/13] feat: enhance session view toggle and layout for
 improved mobile experience

---
 .../feature/CpFavoriteViewToggle.vue          | 17 ++++-
 app/components/feature/CpSessionFilterBar.vue | 66 +++++++++++--------
 .../feature/CpSessionShareButton.vue          |  2 +-
 3 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/app/components/feature/CpFavoriteViewToggle.vue b/app/components/feature/CpFavoriteViewToggle.vue
index fac482c..166eb52 100644
--- a/app/components/feature/CpFavoriteViewToggle.vue
+++ b/app/components/feature/CpFavoriteViewToggle.vue
@@ -18,6 +18,10 @@ const viewItems = computed<SessionViewItem[]>(() => [
   { key: 'all', label: t('view.all') },
   { key: 'favorite', label: t('view.favorite'), icon: 'tabler:bookmark' },
 ])
+
+function switchView() {
+  model.value = model.value === 'all' ? 'favorite' : 'all'
+}
 </script>
 
 <template>
@@ -28,7 +32,7 @@ const viewItems = computed<SessionViewItem[]>(() => [
       :key="item.key"
       :active="model === item.key"
       :aria-pressed="model === item.key"
-      class="!rounded-none"
+      class="hidden !rounded-none md:inline-flex"
       variant="basic"
       @click="model = item.key"
     >
@@ -43,6 +47,17 @@ const viewItems = computed<SessionViewItem[]>(() => [
       </template>
       {{ item.label }}
     </CpButton>
+    <CpButton
+      class="inline-flex md:hidden"
+      :class="model === 'favorite' ? '!bg-yellow-400 !text-white' : '!bg-white !text-black'"
+      variant="basic"
+      @click="switchView"
+    >
+      <Icon
+        :name="model === 'favorite' ? 'tabler:star-filled' : 'tabler:star'"
+        size="18"
+      />
+    </CpButton>
   </div>
 </template>
 
diff --git a/app/components/feature/CpSessionFilterBar.vue b/app/components/feature/CpSessionFilterBar.vue
index aa5a71f..5608977 100644
--- a/app/components/feature/CpSessionFilterBar.vue
+++ b/app/components/feature/CpSessionFilterBar.vue
@@ -17,43 +17,53 @@ const searchQuery = defineModel<string>('searchQuery', { default: '' })
 
 const { t } = useI18n()
 
-const viewModeItems = computed<{ key: TableViewMode, label: string, icon: string }[]>(() => [
+const desktopModeItems = computed<{ key: TableViewMode, label: string, icon: string }[]>(() => [
   { key: 'track', label: t('viewMode.track'), icon: 'tabler:layout-rows' },
   { key: 'table', label: t('viewMode.table'), icon: 'tabler:layout-columns' },
 ])
+
+const mobileModeItems = computed<{ key: TableViewMode, label: string, icon: string }[]>(() => [
+  { key: 'track', label: '', icon: 'tabler:clock' },
+  { key: 'table', label: '', icon: 'tabler:list-details' },
+])
 </script>
 
 <template>
-  <div class="flex flex-col gap-3 w-[var(--viewport-width,100vw)] items-stretch sm:flex-row sm:items-center sm:justify-between">
-    <div class="flex shrink-0 gap-3 items-center justify-center sm:justify-start">
-      <CpGroupButton
-        v-model="viewMode"
-        class="hidden sm:inline-flex"
-        :items="viewModeItems"
-      />
-      <CpSessionFilterDropdown
-        v-if="!preview"
-        v-model="selectedTagIds"
-        icon="tabler:tag"
-        :options="tagOptions"
-        type="tags"
-      />
-    </div>
+  <div class="flex flex-wrap gap-3 w-[var(--viewport-width,100vw)] items-stretch sm:flex-nowrap">
+    <CpGroupButton
+      v-model="viewMode"
+      class="hidden md:inline-flex"
+      :items="desktopModeItems"
+    />
 
-    <!-- Controls below the search field on mobile, to its left on desktop. -->
-    <div
+    <CpGroupButton
+      v-model="viewMode"
+      class="hidden sm:inline-flex md:hidden"
+      :items="mobileModeItems"
+    />
+
+    <CpSessionFilterDropdown
       v-if="!preview"
-      class="flex flex-col-reverse gap-3 items-center sm:flex-row sm:items-center"
-    >
-      <slot name="controls" />
+      v-model="selectedTagIds"
+      icon="tabler:tag"
+      :options="tagOptions"
+      type="tags"
+    />
+
+    <span class="flex-1" />
 
-      <CpTextField
-        v-model="searchQuery"
-        class="min-w-0 w-full sm:flex-none sm:h-9 sm:w-80"
-        :clear-label="t('clear')"
-        :placeholder="t('placeholder')"
-      />
-    </div>
+    <slot
+      v-if="!preview"
+      name="controls"
+    />
+
+    <CpTextField
+      v-if="!preview"
+      v-model="searchQuery"
+      class="min-w-0 w-full order-first sm:flex-none sm:h-9 sm:w-60 sm:order-none"
+      :clear-label="t('clear')"
+      :placeholder="t('placeholder')"
+    />
   </div>
 </template>
 
diff --git a/app/components/feature/CpSessionShareButton.vue b/app/components/feature/CpSessionShareButton.vue
index cc38a0d..4c0994d 100644
--- a/app/components/feature/CpSessionShareButton.vue
+++ b/app/components/feature/CpSessionShareButton.vue
@@ -30,7 +30,7 @@ function share() {
         size="18"
       />
     </template>
-    <span class="hidden sm:inline">{{ copied ? t('copied') : t('share') }}</span>
+    <span class="hidden md:inline">{{ copied ? t('copied') : t('share') }}</span>
   </CpButton>
 </template>
 

From baadc49aa81c44e1f6be0c8d11539c1a531aa3cd Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 15:54:40 +0800
Subject: [PATCH 07/13] fix: align filter dropdown to left edge on all screen
 sizes

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

diff --git a/app/components/feature/CpSessionFilterDropdown.vue b/app/components/feature/CpSessionFilterDropdown.vue
index a5b1372..6c3cf0d 100644
--- a/app/components/feature/CpSessionFilterDropdown.vue
+++ b/app/components/feature/CpSessionFilterDropdown.vue
@@ -106,7 +106,7 @@ function clearSelection() {
 
     <div
       v-if="open"
-      class="mt-1 p-3 border border-gray-300 rounded-md bg-gray-50 flex flex-col gap-2 max-w-[calc(100vw-32px)] w-72 shadow-md left-1/2 absolute z-dropdown sm:p-2 sm:gap-1 sm:max-w-[calc(100vw-64px)] -translate-x-1/2 sm:translate-x-0 sm:left-0"
+      class="mt-1 p-3 border border-gray-300 rounded-md bg-gray-50 flex flex-col gap-2 max-w-[calc(100vw-32px)] w-72 shadow-md left-0 absolute z-dropdown sm:p-2 sm:gap-1 sm:max-w-[calc(100vw-64px)]"
     >
       <CpTextField
         v-model="searchQuery"

From 72a8007433598b25fa76724efa5cc7343d0f5dfa Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 16:03:18 +0800
Subject: [PATCH 08/13] chore: i18n concurrent session count lable in
 CpSessionList

---
 app/components/feature/CpSessionList.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index 11b7d76..e545f76 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -77,7 +77,7 @@ const times = computed(() => Object.keys(sessions.value).sort())
               name="tabler:circle"
             />
             <span v-if="sessions?.[time] && sessions[time].length > 1">
-              {{ sessions[time].length }} 場同時開始
+              {{ t('concurrent', { count: sessions[time].length }) }}
             </span>
           </div>
           <Icon
@@ -116,7 +116,9 @@ const times = computed(() => Object.keys(sessions.value).sort())
   en:
     add: 'Add to favorites'
     remove: 'Remove from favorites'
+    concurrent: '{count} sessions starting at the same time'
   zh:
     add: '加入收藏'
     remove: '取消收藏'
+    concurrent: '{count} 場同時開始'
 </i18n>

From 0b3eb253a28c7e0f45b65b4c0665738233d97a11 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 16:04:48 +0800
Subject: [PATCH 09/13] fix: correct typo in in readonly favorite icon name

---
 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 1ac36ec..d2cd0d9 100644
--- a/app/components/feature/CpSessionItem.vue
+++ b/app/components/feature/CpSessionItem.vue
@@ -43,7 +43,7 @@ defineEmits<{
       aria-hidden="true"
       class="text-xl text-cp-orange-600 leading-none p-1 pointer-events-none right-1 top-1 absolute"
     >
-      <Icon name="tabler:start-filled" />
+      <Icon name="tabler:star-filled" />
     </span>
     <button
       v-else

From 59a7d01d1a2c78d96925f9ca4966f092a5205bfc Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 16:09:59 +0800
Subject: [PATCH 10/13] refactor: replace duplicated desktop toggle markup with
 CpGroupButton

---
 .../feature/CpFavoriteViewToggle.vue          | 38 +++++--------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/app/components/feature/CpFavoriteViewToggle.vue b/app/components/feature/CpFavoriteViewToggle.vue
index 166eb52..5e57975 100644
--- a/app/components/feature/CpFavoriteViewToggle.vue
+++ b/app/components/feature/CpFavoriteViewToggle.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
+import type { Item } from '~/components/shared/CpGroupButton.vue'
 import { useI18n } from 'vue-i18n'
 import CpButton from '~/components/shared/CpButton.vue'
+import CpGroupButton from '~/components/shared/CpGroupButton.vue'
 
 type SessionViewItemKey = 'all' | 'favorite'
 
-interface SessionViewItem {
-  key: SessionViewItemKey
-  label: string
-  icon?: string
-}
-
 const model = defineModel<SessionViewItemKey>({ required: true })
 
 const { t } = useI18n()
 
-const viewItems = computed<SessionViewItem[]>(() => [
+const viewItems = computed<Item<SessionViewItemKey>[]>(() => [
   { key: 'all', label: t('view.all') },
   { key: 'favorite', label: t('view.favorite'), icon: 'tabler:bookmark' },
 ])
@@ -26,29 +22,13 @@ function switchView() {
 
 <template>
   <!-- Flush segments so the toggle's height matches the adjacent search field. -->
-  <div class="border border-gray-200 rounded-md bg-white inline-flex overflow-hidden">
-    <CpButton
-      v-for="item in viewItems"
-      :key="item.key"
-      :active="model === item.key"
-      :aria-pressed="model === item.key"
-      class="hidden !rounded-none md:inline-flex"
-      variant="basic"
-      @click="model = item.key"
-    >
-      <template
-        v-if="item.icon"
-        #icon
-      >
-        <Icon
-          :name="item.icon"
-          size="18"
-        />
-      </template>
-      {{ item.label }}
-    </CpButton>
+  <CpGroupButton
+    v-model="model"
+    class="hidden md:inline-flex"
+    :items="viewItems"
+  />
+  <div class="border border-gray-200 rounded-md bg-white inline-flex overflow-hidden md:hidden">
     <CpButton
-      class="inline-flex md:hidden"
       :class="model === 'favorite' ? '!bg-yellow-400 !text-white' : '!bg-white !text-black'"
       variant="basic"
       @click="switchView"

From 6e24d1fd7503ab19fc2945cc765cc8f4c3d19ba4 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 16:16:45 +0800
Subject: [PATCH 11/13] fix: adjust border-left width in CpSessionItem and
 correct padding class in CpSessionList

---
 app/components/feature/CpSessionItem.vue | 2 +-
 app/components/feature/CpSessionList.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/feature/CpSessionItem.vue b/app/components/feature/CpSessionItem.vue
index d2cd0d9..7872de3 100644
--- a/app/components/feature/CpSessionItem.vue
+++ b/app/components/feature/CpSessionItem.vue
@@ -27,7 +27,7 @@ defineEmits<{
 
 <template>
   <div
-    class="p-2 border border-l-5 border-gray-300 rounded transition-colors relative"
+    class="p-2 border border-l-4 border-gray-300 rounded transition-colors relative"
     :style="{ 'border-left-color': track.color }"
   >
     <!-- Overlay link, so the bookmark is a sibling rather than nested in the anchor.
diff --git a/app/components/feature/CpSessionList.vue b/app/components/feature/CpSessionList.vue
index e545f76..c96d2fa 100644
--- a/app/components/feature/CpSessionList.vue
+++ b/app/components/feature/CpSessionList.vue
@@ -53,7 +53,7 @@ const times = computed(() => Object.keys(sessions.value).sort())
 </script>
 
 <template>
-  <div class="pa-3 flex flex-col gap-6 w-[var(--viewport-width,100vw)] isolate">
+  <div class="p-3 flex flex-col gap-6 w-[var(--viewport-width,100vw)] isolate">
     <section
       v-for="time in times"
       :key="time"

From f5e3c5425584a8677bcb500bab4cd551878254b8 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 16:21:02 +0800
Subject: [PATCH 12/13] fix: add aria-label and aria-pressed attributes to
 CpButton for accessibility

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

diff --git a/app/components/feature/CpFavoriteViewToggle.vue b/app/components/feature/CpFavoriteViewToggle.vue
index 5e57975..4965622 100644
--- a/app/components/feature/CpFavoriteViewToggle.vue
+++ b/app/components/feature/CpFavoriteViewToggle.vue
@@ -29,6 +29,8 @@ function switchView() {
   />
   <div class="border border-gray-200 rounded-md bg-white inline-flex overflow-hidden md:hidden">
     <CpButton
+      :aria-label="model === 'favorite' ? t('view.favorite') : t('view.all')"
+      :aria-pressed="model === 'favorite'"
       :class="model === 'favorite' ? '!bg-yellow-400 !text-white' : '!bg-white !text-black'"
       variant="basic"
       @click="switchView"

From d05cfb04a05cc17c2e0d49e534e4844cfc748ef0 Mon Sep 17 00:00:00 2001
From: Mirumo <mysteryperson520@gmail.com>
Date: Sat, 25 Jul 2026 16:28:25 +0800
Subject: [PATCH 13/13] fix: add sr-only labels to icon-only mobile view mdoe
 buttons

---
 app/components/feature/CpSessionFilterBar.vue | 6 +++---
 app/components/shared/CpGroupButton.vue       | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/feature/CpSessionFilterBar.vue b/app/components/feature/CpSessionFilterBar.vue
index 5608977..2581b40 100644
--- a/app/components/feature/CpSessionFilterBar.vue
+++ b/app/components/feature/CpSessionFilterBar.vue
@@ -22,9 +22,9 @@ const desktopModeItems = computed<{ key: TableViewMode, label: string, icon: str
   { key: 'table', label: t('viewMode.table'), icon: 'tabler:layout-columns' },
 ])
 
-const mobileModeItems = computed<{ key: TableViewMode, label: string, icon: string }[]>(() => [
-  { key: 'track', label: '', icon: 'tabler:clock' },
-  { key: 'table', label: '', icon: 'tabler:list-details' },
+const mobileModeItems = computed<{ key: TableViewMode, label: string, icon: string, srOnlyLabel: boolean }[]>(() => [
+  { key: 'track', label: t('viewMode.track'), icon: 'tabler:clock', srOnlyLabel: true },
+  { key: 'table', label: t('viewMode.table'), icon: 'tabler:list-details', srOnlyLabel: true },
 ])
 </script>
 
diff --git a/app/components/shared/CpGroupButton.vue b/app/components/shared/CpGroupButton.vue
index eca9706..80e91df 100644
--- a/app/components/shared/CpGroupButton.vue
+++ b/app/components/shared/CpGroupButton.vue
@@ -5,6 +5,7 @@ export interface Item<T extends string> {
   key: T
   label: string
   icon?: string
+  srOnlyLabel?: boolean
 }
 
 defineProps<{
@@ -35,7 +36,7 @@ const model = defineModel<T>({ required: true })
           size="18"
         />
       </template>
-      {{ item.label }}
+      <span :class="{ 'sr-only': item.srOnlyLabel }">{{ item.label }}</span>
     </CpButton>
   </div>
 </template>