Skip to content

feat: add track-mode (議程軌) schedule view#238

Open
rileychh wants to merge 3 commits into
mainfrom
session-track-mode
Open

feat: add track-mode (議程軌) schedule view#238
rileychh wants to merge 3 commits into
mainfrom
session-track-mode

Conversation

@rileychh

@rileychh rileychh commented Jul 1, 2026

Copy link
Copy Markdown
Member

依 Figma 新設計實作桌面版「議程軌(社群)模式」議程表,取代原本以教室為欄的表格。

變更內容

  • 新增 CpSessionTrackTable:以議程軌為列、時間為橫軸的桌面版議程表,依 SessionSummary.track 分組,取代原 CpSessionTable
  • 每個議程軌一種顏色的議程卡片(白字、固定高度、標題/講者/時間),無講者時保留空白列以維持對齊;卡片連結至既有 /session/{id} 詳細頁。
  • 保留拖曳捲動、目前時間紅線與時間徽章、locale 切換。
  • 時間軸表頭與議程軌欄置頂(sticky)並分層 z-index,捲動時不互相覆蓋。
  • 議程軌欄預設為黑字、灰色教室代碼、無底色的釘選圖示。
  • CpSessionDaySelector 改為設計稿的 Aug.8/Aug.9 分頁樣式(省略標題)。
  • 加寬時間欄以減少卡片壅擠。

略過項目(尚無功能 / 待後續)

  • 工具列的「只顯示收藏」「只顯示釘選」「分享收藏」、議程軌/教室時間軸切換、難度/語言篩選彈窗。
  • 議程軌釘選(pin)狀態與其藍色高亮/強調樣式(目前所有列皆為預設樣式)。
  • 卡片上的收藏星號、釘選圖示為靜態視覺元素,尚未串接功能。
  • 未替換為 Figma 字型(Archivo/DM Sans),沿用專案字型 + font-mono;未套用次像素基線微調。
  • 手機版 CpSessionList 維持原樣。

Summary by CodeRabbit

  • New Features
    • Added a tracks-and-time session schedule grid with improved time-axis labeling and a live “current time” marker when within the selected time window.
    • Sessions are now displayed as timeline cards on a structured track layout, with visual differentiation for past vs ongoing/upcoming items.
  • UI Updates / Style
    • Updated the day selector’s spacing, button sizing, and active/inactive styling for a more consistent look.
  • Layout
    • Replaced the desktop session table with the new track-based schedule view and adjusted its row/column sizing.

@coderabbitai

coderabbitai Bot commented Jul 1, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: bd709594-6633-4b2f-b4cc-ff383a1a5509

📥 Commits

Reviewing files that changed from the base of the PR and between 23b12d1 and 70fe7d6.

📒 Files selected for processing (3)
  • app/components/feature/CpSessionDaySelector.vue
  • app/components/feature/CpSessionTrackTable.vue
  • app/pages/session.vue
✅ Files skipped from review due to trivial changes (1)
  • app/components/feature/CpSessionDaySelector.vue
🚧 Files skipped from review as they are similar to previous changes (2)
  • app/pages/session.vue
  • app/components/feature/CpSessionTrackTable.vue

📝 Walkthrough

Walkthrough

Adds a track-based session table for the session page desktop view and updates the day selector button styling.

Changes

Session Track Table Feature

Layer / File(s) Summary
Track table core logic and computed state
app/components/feature/CpSessionTrackTable.vue
Defines props, helpers, track grouping, grid calculations, localized labels, time gating, and session placement/state.
Track table rendering
app/components/feature/CpSessionTrackTable.vue
Renders the sticky header, gridlines, track labels, session cards, realtime marker, and i18n strings.
Session page integration
app/pages/session.vue
Replaces CpSessionTable with CpSessionTrackTable in the desktop layout and updates sizing props.

Day Selector Styling

Layer / File(s) Summary
Day selector button style refactor
app/components/feature/CpSessionDaySelector.vue
Changes wrapper spacing classes and refactors active and inactive day button styling.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant SessionPage as session.vue
  participant TrackTable as CpSessionTrackTable
  participant Clock as Asia/Taipei time

  SessionPage->>TrackTable: Pass sessions, day, interval, sizing props
  TrackTable->>TrackTable: Compute tracks, grid positions, labels, and styling
  TrackTable->>Clock: Read current localized time
  Clock-->>TrackTable: Current time
  TrackTable-->>SessionPage: Render track grid, session cards, and now marker
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: adding the track-mode schedule view.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch session-track-mode

Comment @coderabbitai help to get the list of available commands.

@rileychh rileychh changed the title feat: 議程軌(社群)模式議程表 feat: add track-mode (議程軌) schedule view Jul 1, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
app/components/feature/CpSessionTrackTable.vue (2)

53-64: 🩺 Stability & Availability | 🔵 Trivial | 💤 Low value

parseMinutes throws on malformed input with no guard in computed chain.

timeStart/timeEnd/sessions all depend on parseMinutes, which throws on any non-matching ISO string (line 56). A single malformed timeRange or session start/end value would break the entire component's render rather than degrading gracefully.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/feature/CpSessionTrackTable.vue` around lines 53 - 64,
`parseMinutes` in `CpSessionTrackTable.vue` currently throws on any malformed
time string, which can break rendering for `timeStart`, `timeEnd`, and
`sessions`. Update `parseMinutes` and its callers to handle invalid `timeRange`
or session `start`/`end` values gracefully, using a safe fallback or validation
path instead of throwing, so the computed chain and component can still render.

140-155: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Redundant nowMinutes() calls instead of reusing the nowMins computed.

nowLineLeft, nowLabel, and showRealtimeLine each independently call nowMinutes() (creating a fresh Intl.DateTimeFormat and parsing on every evaluation), while nowMins (line 140) already caches this value. Consolidate onto nowMins.value to avoid duplicate work and guarantee all consumers agree on the same instant.

♻️ Proposed consolidation
-const nowLineLeft = computed(() => LABEL_WIDTH + ((nowMinutes() - timeStart.value) / interval) * columnWidth)
+const nowLineLeft = computed(() => LABEL_WIDTH + ((nowMins.value - timeStart.value) / interval) * columnWidth)

 const nowLabel = computed(() => {
-  const mins = Math.floor(nowMinutes())
+  const mins = Math.floor(nowMins.value)
   return `${String(Math.floor(mins / 60)).padStart(2, '0')}:${String(mins % 60).padStart(2, '0')}`
 })

 const showRealtimeLine = computed(() => {
   const today = new Intl.DateTimeFormat('en-CA', { timeZone: 'Asia/Taipei' }).format(time.value)
-  const mins = nowMinutes()
+  const mins = nowMins.value
   return day === today && timeStart.value <= mins && mins <= timeEnd.value
 })
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/feature/CpSessionTrackTable.vue` around lines 140 - 155, The
realtime time computations in CpSessionTrackTable.vue are duplicating work by
calling nowMinutes() separately in nowLineLeft, nowLabel, and showRealtimeLine
even though nowMins already caches the current minutes value. Update those
computed properties to read from nowMins.value instead of invoking nowMinutes()
again, so the component reuses one snapshot and avoids repeated
Intl.DateTimeFormat parsing. Keep the change localized to the nowMins,
nowLineLeft, nowLabel, and showRealtimeLine computed blocks.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@app/components/feature/CpSessionTrackTable.vue`:
- Around line 53-64: `parseMinutes` in `CpSessionTrackTable.vue` currently
throws on any malformed time string, which can break rendering for `timeStart`,
`timeEnd`, and `sessions`. Update `parseMinutes` and its callers to handle
invalid `timeRange` or session `start`/`end` values gracefully, using a safe
fallback or validation path instead of throwing, so the computed chain and
component can still render.
- Around line 140-155: The realtime time computations in CpSessionTrackTable.vue
are duplicating work by calling nowMinutes() separately in nowLineLeft,
nowLabel, and showRealtimeLine even though nowMins already caches the current
minutes value. Update those computed properties to read from nowMins.value
instead of invoking nowMinutes() again, so the component reuses one snapshot and
avoids repeated Intl.DateTimeFormat parsing. Keep the change localized to the
nowMins, nowLineLeft, nowLabel, and showRealtimeLine computed blocks.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0fa3f09e-88a0-4aaf-87b5-11fdcc28cfba

📥 Commits

Reviewing files that changed from the base of the PR and between 20ac317 and a09f4fc.

📒 Files selected for processing (3)
  • app/components/feature/CpSessionDaySelector.vue
  • app/components/feature/CpSessionTrackTable.vue
  • app/pages/session.vue

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a09f4fc8af

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread app/components/feature/CpSessionTrackTable.vue Outdated
@rileychh rileychh linked an issue Jul 1, 2026 that may be closed by this pull request
@rileychh-dokploy-coscup

rileychh-dokploy-coscup Bot commented Jul 1, 2026

Copy link
Copy Markdown

Dokploy Preview Deployment

Name Status Preview Updated (UTC)
Nuxt ✅ Done Preview URL 2026-07-03T03:57:21.216Z

@rileychh rileychh requested a review from a team July 1, 2026 05:01
rileychh added 3 commits July 3, 2026 11:51
Replace the room-grouped desktop table with a track-grouped grid
(tracks as rows, time horizontal) matching the new Figma design, and
switch the day selector to the design's day tabs.
@rileychh rileychh force-pushed the session-track-mode branch from 23b12d1 to 70fe7d6 Compare July 3, 2026 03:52

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 70fe7d687b

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment on lines +325 to +327
<span
class="p-1 rounded-[4px] bg-black/10 flex items-center left-1 top-1 absolute"
>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Restore the desktop favorite toggle

When this component is used on sm and wider screens, each card is just a NuxtLink with this static star; there is no button wired to toggleFavorite like the mobile list/old table. The page still shows the Favorites view and share button, so desktop users with no favorites cannot add anything to that view, and imported favorites cannot be removed without switching to the mobile layout or clearing storage.

Useful? React with 👍 / 👎.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

新 no 議程表

1 participant