小畫面的議程表 - #294
Conversation
Dokploy Preview Deployment
|
|
Warning Review limit reached
Next review available in: 27 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 (5)
📝 WalkthroughWalkthroughAdds a localized all/favorite session toggle, replaces responsive session filter controls, passes track colors into session lists, and updates grouped session and card rendering for track, favorite, and tag presentation. ChangesSession UI
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant CpFavoriteViewToggle
participant session.vue
participant CpSessionList
participant CpSessionItem
User->>CpFavoriteViewToggle: select all or favorite
CpFavoriteViewToggle->>session.vue: update view model
session.vue->>CpSessionList: pass sessions and track colors
CpSessionList->>CpSessionItem: render normalized track and favorite data
CpSessionItem->>session.vue: emit toggle-favorite
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 |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: baadc49aa8
ℹ️ 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".
There was a problem hiding this comment.
Pull request overview
This PR updates the sessions page UI with a focus on improving the small-screen (mobile) schedule experience, including a new favorites view toggle and richer session cards (track + tags).
Changes:
- Replaces the sessions “all/favorite” toggle with a new
CpFavoriteViewToggleand moves its i18n strings into the component. - Enhances the mobile session list to display track info (with colors) and tags, and adds collapsible time sections.
- Refactors the filter bar layout and view-mode toggle to use
CpGroupButton, and adjusts some responsive breakpoints/positioning.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| app/pages/session.vue | Swaps in CpFavoriteViewToggle and passes trackColors into the mobile list. |
| app/components/shared/CpGroupButton.vue | Renames exported item type to a generic Item<T>. |
| app/components/feature/CpSessionShareButton.vue | Adjusts label visibility breakpoint (sm → md). |
| app/components/feature/CpSessionList.vue | Adds track/tags to mobile list items and introduces collapsible sections. |
| app/components/feature/CpSessionItem.vue | Redesigns session card to show track pill, star favorite, and tag chips. |
| app/components/feature/CpSessionFilterDropdown.vue | Adjusts dropdown positioning/alignment classes. |
| app/components/feature/CpSessionFilterBar.vue | Refactors view-mode toggles to use CpGroupButton and reorders controls. |
| app/components/feature/CpFavoriteViewToggle.vue | Adds new favorites toggle component with embedded i18n strings. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/components/feature/CpSessionItem.vue (1)
41-47: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winFix the read-only favorite icon name.
CpSessionItem.vueusestabler:start-filled, but the Tabler icon package in this project usestabler:star-filled/tabler:star, and this is the read-only favorite indicator on shared-list cards. This will render as a missing/blank icon instead of the filled favorite bookmark.🐛 Proposed fix
- <Icon name="tabler:start-filled" /> + <Icon name="tabler:star-filled" />🤖 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/CpSessionItem.vue` around lines 41 - 47, Update the Icon in CpSessionItem’s readonly favorite indicator to use the valid Tabler star icon name, preserving the filled favorite appearance and all existing visibility and styling.
🧹 Nitpick comments (1)
app/components/feature/CpSessionList.vue (1)
20-24: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse a local utility for
en/zh-hantfallback.
useLocaleContentfetches Nuxt Content pages, so it is not an appropriate replacement here. If this fallback pattern is intentional, extractlocaleNameto a shared helper to avoid repeating it alongside the identicalroomfallback in this file.🤖 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/CpSessionList.vue` around lines 20 - 24, Extract the duplicated en/zh-hant fallback logic from localeName and the identical room fallback into a shared local utility, then reuse that utility for both values. Keep the existing locale.value selection and fallback order unchanged.Source: Coding guidelines
🤖 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.
Inline comments:
In `@app/components/feature/CpFavoriteViewToggle.vue`:
- Around line 50-60: Update the mobile CpButton in CpFavoriteViewToggle to
expose the current toggle state with :aria-pressed and provide an accessible
:aria-label describing the action or selected view. Derive both values from the
existing model === 'favorite' condition, matching the desktop toggle’s
accessibility behavior.
- Around line 29-49: Replace the duplicated desktop button markup in
CpFavoriteViewToggle with the reusable CpGroupButton component, passing
viewItems, the current model value, and the corresponding update handler so
active state, aria-pressed state, icons, labels, and styling remain unchanged.
Reuse CpGroupButton’s generalized Item interface rather than maintaining a
second implementation.
In `@app/components/feature/CpSessionItem.vue`:
- Around line 62-67: Update the track pill in CpSessionItem.vue to render only
when track.name is non-empty after trimming whitespace, matching the existing
room guard behavior. Keep the pill’s styling and displayed track.name unchanged
when a valid name is present.
In `@app/components/feature/CpSessionList.vue`:
- Around line 79-81: Replace the hardcoded concurrent-session text in the
CpSessionList template with the existing useI18n translation function, using a
concurrentCount message key and passing the session count as a parameter. Add
the corresponding en and zh messages in an i18n block, preserving the current
plural/count display behavior.
---
Outside diff comments:
In `@app/components/feature/CpSessionItem.vue`:
- Around line 41-47: Update the Icon in CpSessionItem’s readonly favorite
indicator to use the valid Tabler star icon name, preserving the filled favorite
appearance and all existing visibility and styling.
---
Nitpick comments:
In `@app/components/feature/CpSessionList.vue`:
- Around line 20-24: Extract the duplicated en/zh-hant fallback logic from
localeName and the identical room fallback into a shared local utility, then
reuse that utility for both values. Keep the existing locale.value selection and
fallback order unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f46a4cf7-f7f4-43c6-b163-859402418a39
📒 Files selected for processing (8)
app/components/feature/CpFavoriteViewToggle.vueapp/components/feature/CpSessionFilterBar.vueapp/components/feature/CpSessionFilterDropdown.vueapp/components/feature/CpSessionItem.vueapp/components/feature/CpSessionList.vueapp/components/feature/CpSessionShareButton.vueapp/components/shared/CpGroupButton.vueapp/pages/session.vue
| <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> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Guard the track pill against an empty track.name.
Unlike room (guarded with v-if="room && room.trim() !== ''" a few lines below), this pill renders unconditionally. For track-less sessions, track.name resolves to '' (per CpSessionList.vue's localeName fallback), leaving a colored, empty, rounded pill floating in the card.
🛡️ Proposed fix
<span
+ v-if="track.name"
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>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <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> | |
| <span | |
| v-if="track.name" | |
| 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> |
🤖 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/CpSessionItem.vue` around lines 62 - 67, Update the
track pill in CpSessionItem.vue to render only when track.name is non-empty
after trimming whitespace, matching the existing room guard behavior. Keep the
pill’s styling and displayed track.name unchanged when a valid name is present.
…ass in CpSessionList
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f5e3c54255
ℹ️ 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".
| { key: 'track', label: '', icon: 'tabler:clock' }, | ||
| { key: 'table', label: '', icon: 'tabler:list-details' }, |
There was a problem hiding this comment.
Give the compact view buttons accessible labels
At sm widths below the md breakpoint, these are the only controls for switching between the track and room tables, but both labels are deliberately empty and CpGroupButton does not supply an aria-label. Screen-reader users therefore encounter two unnamed buttons; retain the translated labels as accessible names while hiding only their visible text.
Useful? React with 👍 / 👎.
| ? (session.room?.['zh-hant'] || session.room?.en || '') | ||
| : (session.room?.en || session.room?.['zh-hant'] || ''), | ||
| tags: [], | ||
| tags: session.tags, |
There was a problem hiding this comment.
Localize difficulty tags in the mobile list
For sessions with a normalized difficulty, passing session.tags through unchanged makes the Chinese mobile schedule display API enums such as Elementary and Professional. The filter and desktop schedule already translate these values (useSessionFilter.ts and CpSessionTable.vue), so apply the same locale mapping before rendering the newly populated mobile badges.
AGENTS.md reference: AGENTS.md:L5-L5
Useful? React with 👍 / 👎.
| tags: session.tags, | ||
| track: { | ||
| id: session.track?.id, | ||
| name: localeName(session.track?.name), |
There was a problem hiding this comment.
Label or hide the badge for sessions without a track
When Pretalx supplies a null or unknown track—which parseTrack and SessionSummarySchema explicitly allow—localeName(undefined) produces an empty string, but CpSessionItem still renders the colored track pill. Such sessions therefore show an unexplained blank badge on mobile; use a localized “Other” fallback as the desktop track view does, or omit the badge.
AGENTS.md reference: AGENTS.md:L5-L5
Useful? React with 👍 / 👎.
Summary by CodeRabbit
New Features
Bug Fixes