Skip to content

小畫面的議程表 - #294

Merged
mirumodapon merged 13 commits into
mainfrom
feat/session-list
Jul 25, 2026
Merged

小畫面的議程表#294
mirumodapon merged 13 commits into
mainfrom
feat/session-list

Conversation

@mirumodapon

@mirumodapon mirumodapon commented Jul 25, 2026

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • New Features

    • Added a favorites view toggle for switching between all sessions and favorite sessions.
    • Added track color indicators and localized track names to session cards.
    • Added collapsible time sections for easier session browsing.
    • Improved responsive session controls for desktop and mobile layouts.
  • Bug Fixes

    • Repositioned the filter dropdown for more reliable alignment.
    • Updated favorite icons, tags, and sharing text visibility for improved clarity.

Copilot AI review requested due to automatic review settings July 25, 2026 07:55
@rileychh-dokploy-coscup

rileychh-dokploy-coscup Bot commented Jul 25, 2026

Copy link
Copy Markdown

Dokploy Preview Deployment

Name Status Preview Updated (UTC)
Nuxt ✅ Done Preview URL 2026-07-25T08:31:50.889Z

@coderabbitai

coderabbitai Bot commented Jul 25, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@mirumodapon, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 27 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e4c42c56-0ed8-41cb-a006-3a7cea6ee098

📥 Commits

Reviewing files that changed from the base of the PR and between baadc49 and d05cfb0.

📒 Files selected for processing (5)
  • app/components/feature/CpFavoriteViewToggle.vue
  • app/components/feature/CpSessionFilterBar.vue
  • app/components/feature/CpSessionItem.vue
  • app/components/feature/CpSessionList.vue
  • app/components/shared/CpGroupButton.vue
📝 Walkthrough

Walkthrough

Adds 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.

Changes

Session UI

Layer / File(s) Summary
Favorite view toggle integration
app/components/feature/CpFavoriteViewToggle.vue, app/pages/session.vue
Adds desktop and mobile all/favorite controls with localized labels and wires them to the session page model.
Responsive session filters
app/components/feature/CpSessionFilterBar.vue, app/components/feature/CpSessionFilterDropdown.vue, app/components/feature/CpSessionShareButton.vue, app/components/shared/CpGroupButton.vue
Uses breakpoint-specific group buttons, updates filter layout and dropdown anchoring, changes share-label visibility, and renames the group-button item interface.
Track-aware session rendering
app/components/feature/CpSessionList.vue, app/components/feature/CpSessionItem.vue, app/pages/session.vue
Resolves localized track names and colors, preserves session tags, adds collapsible time-group markup, and updates card borders, favorite icons, and tag chips.

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
Loading

Possibly related PRs

  • COSCUP/2026#176: Modifies the session all/favorite flow and favorite control implementation.
  • COSCUP/2026#238: Updates session page track-mode wiring and related session display components.
  • COSCUP/2026#262: Adds related track color plumbing through the session page and list.

Suggested reviewers: copilot, pan93412

🚥 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 is related to the responsive schedule UI changes, especially the mobile-oriented view updates.
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 feat/session-list

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.

❤️ Share

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

@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: 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".

Comment thread app/components/feature/CpSessionItem.vue Outdated
Comment thread app/components/feature/CpSessionList.vue
Comment thread app/components/feature/CpFavoriteViewToggle.vue

Copilot AI 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.

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 CpFavoriteViewToggle and 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 (smmd).
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.

Comment thread app/components/feature/CpSessionItem.vue Outdated
Comment thread app/components/feature/CpSessionItem.vue Outdated
Comment thread app/components/feature/CpSessionList.vue Outdated
Comment thread app/components/feature/CpSessionList.vue
Comment thread app/components/feature/CpSessionFilterBar.vue Outdated

@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.

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 win

Fix the read-only favorite icon name.

CpSessionItem.vue uses tabler:start-filled, but the Tabler icon package in this project uses tabler: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 value

Use a local utility for en/zh-hant fallback.

useLocaleContent fetches Nuxt Content pages, so it is not an appropriate replacement here. If this fallback pattern is intentional, extract localeName to a shared helper to avoid repeating it alongside the identical room fallback 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

📥 Commits

Reviewing files that changed from the base of the PR and between e4b0a7f and baadc49.

📒 Files selected for processing (8)
  • app/components/feature/CpFavoriteViewToggle.vue
  • app/components/feature/CpSessionFilterBar.vue
  • app/components/feature/CpSessionFilterDropdown.vue
  • app/components/feature/CpSessionItem.vue
  • app/components/feature/CpSessionList.vue
  • app/components/feature/CpSessionShareButton.vue
  • app/components/shared/CpGroupButton.vue
  • app/pages/session.vue

Comment thread app/components/feature/CpFavoriteViewToggle.vue Outdated
Comment thread app/components/feature/CpFavoriteViewToggle.vue
Comment on lines +62 to +67
<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>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 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.

Suggested change
<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.

Comment thread app/components/feature/CpSessionList.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: 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".

Comment on lines +26 to +27
{ key: 'track', label: '', icon: 'tabler:clock' },
{ key: 'table', label: '', icon: 'tabler:list-details' },

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 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,

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 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),

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 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 👍 / 👎.

@mirumodapon
mirumodapon merged commit 54221a3 into main Jul 25, 2026
2 checks passed
@mirumodapon
mirumodapon deleted the feat/session-list branch July 25, 2026 14:56
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.

2 participants