ui: scroll vote dropdown to center current grade on open (#3796)#3801
Conversation
…3796) When a graded task's vote dropdown opens, auto-scroll the grade list so the item matching the task's official grade ("ふつう") is centered in the visible area, reducing the need to scroll manually. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EGhZMRXzv7YDEgpo9GVxAn
`indexOf` on `nonPendingGrades` (which excludes PENDING) required a narrower argument type. Replaced with `findIndex` to avoid the cast. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EGhZMRXzv7YDEgpo9GVxAn
Extracts the itemHeight/scrollTop calculation from the $effect into a pure function `calcCenteredScrollTop` in `grade_scroll.ts` with tests. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EGhZMRXzv7YDEgpo9GVxAn
|
Warning Review limit reached
Next review available in: 35 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: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughVotableGrade.svelte のドロップダウン表示時に、現在のタスクグレード位置を中央寄せする自動スクロール機能を追加。中央寄せの scrollTop を計算する calcCenteredScrollTop 関数を新規実装し、対応するユニットテストを追加した。 Changesグレード自動センタリングスクロール
Estimated code review effort: 2 (Simple) | ~15 minutes 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 |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01D25pgX4cUCZDJoyqDCyGC5
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/features/votes/components/VotableGrade.svelte`:
- Around line 99-121: The grade scroll logic in VotableGrade.svelte still mixes
business rules into the $effect by computing targetIndex with
nonPendingGrades.findIndex and handling the PENDING/element guards inline. Move
this logic into a util alongside calcCenteredScrollTop, such as a grade_scroll
helper, and have the component call that helper to get the target index and
guard result. Keep the $effect focused on wiring gradeListContainer and
scrollTop, and make the extracted util easy to unit test.
In `@src/features/votes/utils/grade_scroll.ts`:
- Around line 11-16: The grade_scroll utility currently clamps only the lower
bound, so it can return a scrollTop beyond the maximum scrollable range. Update
the getScrollTop logic in grade_scroll.ts to also clamp against scrollHeight -
clientHeight, keeping the returned value within the actual scrollable interval.
Use the existing itemCount, scrollHeight, clientHeight, and targetIndex
calculation in the function as the reference point.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 37112687-caef-4c92-9405-3d33fea72b91
📒 Files selected for processing (3)
src/features/votes/components/VotableGrade.sveltesrc/features/votes/utils/grade_scroll.test.tssrc/features/votes/utils/grade_scroll.ts
Adds upper-bound clamp against scrollHeight - clientHeight so the function always returns a value within [0, maxScrollTop]. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01D25pgX4cUCZDJoyqDCyGC5
Flowbite's Popper uses popover="manual" and calls showPopover() inside onintrostart, which fires via requestAnimationFrame. The previous $effect ran synchronously before that RAF, reading scrollHeight=0 from the hidden popover and producing no scroll. Fix: remove isDropdownOpen/$bindable (gradeListContainer going from undefined to the element is sufficient as the open signal), and defer scrollTop assignment to a RAF scheduled after the Popper's own RAF. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01D25pgX4cUCZDJoyqDCyGC5
|
@KATO-Hiro |
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…nt order Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2 participants
Summary
grade_scroll.tsの純粋関数calcCenteredScrollTopに抽出（テスト付き）実装の詳細
bind:isOpen={isDropdownOpen}で Flowbite Dropdown の開閉状態を追跡<div bind:this={gradeListContainer} class="h-44 overflow-y-auto">でラップ$effectがisDropdownOpenの変化を検知し、taskResult.grade !== PENDINGのときにスクロール位置を計算・適用calcCenteredScrollTop(targetIndex, scrollHeight, itemCount, clientHeight)で centering 計算を純粋関数化Test plan
Closes #3796
🤖 Generated with Claude Code
https://claude.ai/code/session_01EGhZMRXzv7YDEgpo9GVxAn
Summary by CodeRabbit
New Features
Bug Fixes