feat: bookmark and share favorite sessions (#160, #95)

[pan93412]

在議程頁（/session、/en/session）加入收藏（#160）與分享收藏連結（#95）。本 PR 依 #172（議程搜尋／篩選）的設計實踐重寫，把收藏／分享疊在 #172 的架構之上。

Stacked on #172：本分支 rebase 在 #172（add-session-search-filters）之上。在 #172 併入 main 前，下方 diff 會包含 #172 的內容；#172 併入後即只剩收藏／分享的增量。

---

變更內容

收藏（#160）

• 每張議程卡右上角加書籤鈕：收藏後卡片由紫翻橘、書籤由外框變實心。
• 議程頁加 議程 / 收藏 切換，於兩種視圖間切換。
• 收藏以 local storage 持久化（VueUse useStorage，原生序列化 Set），重整後保留。
• 沿用 2025 站的書籤／卡片樣式，以 UnoCSS 重寫；新增 cp-orange 主題色盤。

分享收藏（#95）

• 收藏 視圖且有收藏時出現 分享收藏 鈕，複製帶 ?filter=<codes> 的連結（逗號分隔、排序的 Pretalx 投稿碼，與 2025 站一致）。
• 開啟 ?filter= 連結會唯讀預覽分享的議程（橘色實心書籤、不可切換），並自動跳到第一個含分享議程的日期。
• 頂部匯入橫幅：匯入 會取代目前收藏、清掉 ?filter= 並切到 收藏 視圖；忽略 僅清掉參數。
• 無效連結（碼格式合法但對不到任何議程）顯示錯誤橫幅、只有 忽略、沒有 匯入，既有收藏不會被清空。

---

對齊 #172 的設計實踐

• 狀態集中在 session.vue、全 computed：在 feat: add session search filters (#94) #172 的 useSessionFilter → filteredSessions 之上，再以 displayedSessions 疊一層（all／favorite／shared 視圖），往下傳給 CpSessionTable / CpSessionList，元件只負責渲染。
• CpSessionItem 維持純展示元件：扁平 props，書籤 aria-label 由父層解析後以 favoriteLabel 傳入（避免每張卡片各建一個 i18n scope）。
• 複用 shared CpButton：CpSessionViewToggle（basic + active）、CpSessionShareButton（secondary + icon slot）皆組合 CpButton。
• CpSessionEmptyBanner 加 variant（filter / favorite / shared），統一空狀態。
• 視圖切換與分享鈕透過 CpSessionFilterBar 的 #controls slot 置於搜尋框旁：桌機在搜尋框左側、手機置中於搜尋框下方（分享鈕在手機僅顯示圖示、置於切換器右側）。

⚠️ 修掉一個會擋 build 的 OOM

pnpm build 預渲染 session 詳情頁時，會透過 <NuxtPage> 重繪整張議程表。最初給 CpSessionItem 加了 useI18n() + <i18n> 區塊，導致每張卡片各建一個 vue-i18n scope，數百卡片 × 683 頁累積至 heap OOM（#172 能正常產生 1970 條路由，此版本在 ~200 頁即爆）。改由父層解析 label 後解決；另把 useFavorites 的 useStorage 加上 client-only 守衛，避免 SSR 每頁累積 storage 副作用。

---

測試計畫（Test Plan）

以 Claude-in-Chrome 對 dev server 實測，桌機（1280px）與手機（414px）、中文與英文各跑過；下列已勾選項目皆通過。

1. 收藏切換（#160）

• 1.1 卡片書籤鈕存在；未收藏為紫色／外框書籤。
• 1.2 點書籤 → 卡片翻橘、書籤變實心；aria-label 在「加入收藏」↔「取消收藏」（en：Add to favorites ↔ Remove from favorites）。
• 1.3 再點還原；書籤不會誤觸進入詳情頁。
• 1.4 桌機表格與手機清單兩種版面皆正確。

2. 收藏視圖

• 2.1 議程 / 收藏 切換存在，視覺與篩選鈕一致。
• 2.2 切到 收藏 只顯示已收藏議程；無收藏顯示空狀態（favorite 變體）。
• 2.3 切回 議程 顯示全部，收藏狀態保留。

3. 與篩選列整合（#172 共存）

• 3.1 收藏 視圖中搜尋／教室／標籤仍可作用，且只在收藏範圍內過濾（搜尋「Welcome」→ 只剩對應收藏）。

4. 持久化

• 4.1 收藏後重整（F5）→ localStorage 保留，橘色／實心書籤還原。
• 4.2 載入無 console error，無 hydration mismatch。

5. 分享連結（#95）

• 5.1 收藏 視圖且有收藏時才顯示 分享收藏。
• 5.2 點擊複製 …/session?filter=<codes>（碼排序、逗號分隔，與收藏一致）。

6. 開啟分享連結（預覽 + 匯入）

• 6.1 顯示匯入橫幅「有人分享了 N 個收藏議程……」。
• 6.2 自動跳到第一個含分享議程的日期；預覽為唯讀橘色收藏。
• 6.3 預覽模式下篩選列隱藏。
• 6.4 預覽張數 = 分享連結內議程數。
• 6.5 匯入 → 取代本機收藏、清掉 ?filter=、切到 收藏 視圖。
• 6.6 匯入後重整 → 收藏保留。
• 6.7 忽略 → 僅清掉 ?filter=，原有收藏不變。

7. 無效分享連結（防呆）

• 7.1 ?filter=ZZZZZZ（格式合法、無對應議程）顯示錯誤橫幅「連結無效……」。
• 7.2 只有 忽略、沒有 匯入。
• 7.3 既有收藏完全不被覆蓋；忽略 後清掉參數、回到一般議程。

8. i18n / 版面

• 8.1 中英文各跑一輪，切換鈕、分享鈕、匯入／錯誤橫幅、空狀態、書籤 aria-label 皆正確翻譯。
• 8.2 桌機：分享收藏（含文字）在切換器左側、切換器在搜尋框左側，三者等高對齊。
• 8.3 手機：議程/收藏 置中於搜尋框下方；分享鈕僅圖示、置於切換器右側。

9. 自動化

• pnpm lint、pnpm typecheck 通過。
• pnpm build 通過（1970 routes，OOM 已修）。

Closes #160
Closes #95

[rileychh-dokploy-coscup]

Dokploy Preview Deployment

Name	Status	Preview	Updated (UTC)
Nuxt	❌ Failed	Preview URL	2026-06-01T15:35:28.617Z

[Copilot]

Pull request overview

Adds session bookmarking persisted to local storage, a 議程 / 收藏 view toggle on the schedule, and the ability to share a favorites list via a ?filter= query that previews and can be imported by another user.

Changes:

• New useFavorites composable (provide/inject + useStorage) plus encodeFavorites / decodeFavorites helpers for the share link.
• New CpSessionViewToggle, CpSessionShareButton, and CpFavoriteImportBanner; CpSessionItem / CpSessionTable extended with favorite / readonly / preview props.
• pages/session/index.vue wires up filtering, shared-list preview, auto day selection, and import/dismiss; app.vue provides the store; uno.config.ts adds a cp-orange palette.

Reviewed changes

Copilot reviewed 9 out of 27 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
app/composables/useFavorites.ts	New favorites store + share encode/decode helpers.
app/app.vue	Provides favorites store at root.
app/pages/session/index.vue	View toggle, shared preview, import/dismiss, empty states.
app/components/feature/CpSessionTable.vue	Reads favorites and forwards preview/readonly to cards.
app/components/feature/CpSessionItem.vue	Bookmark button, orange favorited state, readonly indicator.
app/components/feature/CpSessionViewToggle.vue	Segmented 議程 / 收藏 control.
app/components/feature/CpSessionShareButton.vue	Copies share link via clipboard.
app/components/feature/CpFavoriteImportBanner.vue	Import / dismiss banner for shared favorites.
uno.config.ts	Adds cp-orange-* palette.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.