feat: align track page schedule with the new session table design#281
Conversation
Dokploy Preview Deployment
|
|
Warning Review limit reached
Next review available in: 28 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a reusable session-detail modal, refactors track schedules into a unified room-by-time grid, and updates track APIs and pages to provide confirmed sessions, daily colors, favorites, ads, and modal-ready session data. ChangesSession and track experience
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant TrackPage
participant TrackAPI
participant CpTrackSchedule
participant CpSessionDetailModal
TrackPage->>TrackAPI: request track sessions and daily colors
TrackAPI-->>TrackPage: return confirmed sessions and colors
TrackPage->>CpTrackSchedule: pass sessions, day, and color
CpTrackSchedule-->>TrackPage: render session links
TrackPage->>CpSessionDetailModal: pass selected session and ads
CpSessionDetailModal-->>TrackPage: emit close
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
pan93412
force-pushed
the
track-page-redesign
branch
from
b7adce2 to
e95f30e
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
app/components/feature/CpSessionDetailModal.vue (1)
155-161: 🩺 Stability & Availability | 🔵 Trivial | ⚖️ Poor tradeoffModal lacks focus management (trap + initial focus + restore).
The dialog sets
role="dialog"/aria-modal="true"but never moves focus into the sheet on open, traps focus within it, or restores focus to the trigger on close. Keyboard/screen-reader users can tab into the dimmed background behind the overlay. Consider focusing the close button on mount and constraining Tab order (or use a headless dialog primitive).🤖 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/CpSessionDetailModal.vue` around lines 155 - 161, Update the modal component’s dialog behavior to manage focus: move focus to the close button when the modal opens, trap Tab and Shift+Tab navigation within the dialog, and restore focus to the triggering element when it closes. Anchor the implementation to the visible dialog container and its close-button element, preserving the existing close emissions and overlay behavior.
🤖 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/CpSessionDetailModal.vue`:
- Around line 155-161: Update the modal component’s dialog behavior to manage
focus: move focus to the close button when the modal opens, trap Tab and
Shift+Tab navigation within the dialog, and restore focus to the triggering
element when it closes. Anchor the implementation to the visible dialog
container and its close-button element, preserving the existing close emissions
and overlay behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: fed7f859-ecb7-4253-b5b4-1b1f53e1cc1e
📒 Files selected for processing (9)
app/components/feature/CpSessionDetailModal.vueapp/components/feature/CpSessionInfoCard.vueapp/components/feature/CpTrackSchedule.vueapp/components/feature/CpTrackSessionBlock.vueapp/components/feature/CpTrackSessionPanel.vueapp/pages/session/[id].vueapp/pages/track/[id].vueserver/api/track/[id]/index.get.tsshared/types/session.ts
💤 Files with no reviewable changes (2)
- app/components/feature/CpTrackSessionBlock.vue
- app/components/feature/CpTrackSessionPanel.vue
除了這個因為改寫而改變實踐的部分之外，比如 |
那我認爲這應該要拆成兩個問題來處理：
期待這應該要是不同 commit，這邊 @Link1515 參與討論。 |
咦，但不正是因為 (1) 沿用了新議程表的程式碼（也就是對齊 Codebase），所以就做到了 (2) 讓「議程軌」頁面的設計跟桌面端新的議程表設計對齊？其實不太清楚對齊 Codebase 但沒讓設計對齊會是什麼樣的概念。 cc @rileychh |
我覺得應該是我誤會了 |
如果拆成兩個 commit，無論採用哪種順序，似乎都會需要先加入額外的過渡程式碼，之後再修改或移除 所以我自己比較傾向一個 commit (目前作法)就好 |
我覺得可以討論看看要不要統一用中文寫註解，然後把他寫進去 CLAUDE.md，來保證整個 codebase 的統一性 |
Redesign the track detail schedule to match the session table's vertical room-timeline grid (rooms as columns, hour-band time axis, track-coloured cards, now line), and open session details in place using the shared session-detail modal instead of a side drawer. - Extract CpSessionDetailModal, reused by /session/[id] and the track page - Return per-day track colours from the track API for card parity - Drop card content in tiers so short slots don't overflow - Remove CpTrackSessionBlock and CpTrackSessionPanel
pan93412
force-pushed
the
track-page-redesign
branch
from
e95f30e to
8b24dc1
Compare
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8b24dc1ba6
ℹ️ About Codex in GitHub
Your team has set up Codex to 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 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
咦？這是已經有 rebase main 了嗎 |
對哇，有補分享按鈕上去了～ |
4 participants
Closes #280
What
Redesign the track detail page (
/track/[id]) so its schedule matches the desktop session table, and show session details using the existing session-detail modal in place (keeping the user on the track page).Changes
CpTrackSchedule): rewritten to the same vertical room-timeline grid asCpSessionTable— rooms as columns, downward time axis with hour bands, solid/dashed grid lines, track-coloured cards (title + speaker + time + difficulty pill + bookmark, past-session dimming), and a now line.CpSessionDetailModal): extracted from/session/[id]and reused on the track page via?session=<id>, so both surfaces share one design. Favorites are shared (localStorage). Removed the old right-drawerCpTrackSessionPanel./api/track/[id]returns per-daycolorsfrom the same palette the session table builds, so a session keeps the same colour in either view.CpTrackSessionBlockandCpTrackSessionPanel.Verification
pnpm lintandpnpm typecheckpass;pnpm buildprerenders 2236 routes with no i18n warnings.Net −115 lines despite adding the shared modal.
Summary by CodeRabbit