ヘルプサイドバー改善: 頂点削除の説明追加 + 使い方タブの視認性向上#54
Merged
sugama-satsuki merged 3 commits intomainfrom Mar 17, 2026
Merged
Conversation
- 「選択・編集」セクションに「頂点の削除」「描画中ポイントの削除」の説明を追加 - 使い方タブのサイズ拡大（アイコン20px、フォント14px、パディング増） - タブの文字色をブルーに変更し視認性向上 - 初回表示時のパルスアニメーションを追加 - ユニットテストに新規項目の検証を追加
Collaborator
Author
テスト結果ユニットテストE2E テストビルド |
📝 WalkthroughWalkthroughヘルプサイドバーにパルス表示を導入・スタイル調整し、ヘルプの「選択・編集」セクションへ「頂点の削除」と「描画中ポイントの削除」を追加、対応するテストを実装。UI状態はlocalStorageで一度だけ記録される仕組みを追加。 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/lib/__tests__/help-content.test.ts (1)
25-31: ラベルに加えて説明文の要点も検証すると、回帰に強くなります。現状はラベル一致のみのため、説明文が意図せず変わってもテストが通ってしまいます。
💡 提案差分
it('「選択・編集」セクションに頂点削除の説明が含まれる', () => { const section = HELP_SECTIONS.find((s) => s.title === '選択・編集') expect(section).toBeDefined() - const labels = section!.items.map((i) => i.label) - expect(labels).toContain('頂点の削除') - expect(labels).toContain('描画中ポイントの削除') + expect(section!.items).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + label: '頂点の削除', + description: expect.stringContaining('Delete キー'), + }), + expect.objectContaining({ + label: '描画中ポイントの削除', + description: expect.stringContaining('右クリック'), + }), + ]), + ) })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/lib/__tests__/help-content.test.ts` around lines 25 - 31, The test currently only asserts labels in HELP_SECTIONS; update it to also verify the corresponding item descriptions so changes to text will fail tests. Locate HELP_SECTIONS and the found section ('選択・編集'), then for each target label ('頂点の削除', '描画中ポイントの削除') find the item by label in section.items and assert the item's description (e.g., item.description or item.text) matches the expected summary strings; keep the label assertions and add these description assertions using the same section variable to make the test regression-resistant.src/components/HelpSidebar.css (1)
57-68: モーション低減設定への対応を追加してください。
prefers-reduced-motionでパルスを無効化すると、アクセシビリティが改善します。💡 提案差分
.help-tab { position: fixed; @@ animation: help-tab-pulse 2s ease-in-out 1; cursor: pointer; @@ } +@media (prefers-reduced-motion: reduce) { + .help-tab { + animation: none; + } +} + `@keyframes` help-tab-pulse {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HelpSidebar.css` around lines 57 - 68, このアニメーションはアクセシビリティ設定で無効化すべきなので、@keyframes help-tab-pulse を使っている要素に対して prefers-reduced-motion: reduce のメディアクエリを追加してアニメーションと関連するトランジション／ボックスシャドウ効果を無効化してください（例: `@media` (prefers-reduced-motion: reduce) { .help-tab, .help-tab--pulse { animation: none !important; transition: none !important; box-shadow: none !important; } }）。対象セレクタは実際に help-tab-pulse を割り当てているクラス（例: .help-tab や .help-tab--pulse）を使って置き換えてください。
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/HelpSidebar.css`:
- Around line 28-29: The pulse animation in HelpSidebar.css on the .help-tab is
replaying every time the sidebar closes because the DOM node is recreated;
update the HelpSidebar React component (the isOpen-controlled rendering of the
help-tab button) to track a "hasSeenHelpTab" flag (stored in localStorage or in
persistent React state) and conditionally add an animation class (e.g.,
help-tab--pulse) only when the flag is false, set the flag true immediately
after the first render/animation start, and remove the unconditional animation
declaration from .help-tab in HelpSidebar.css so the animation only runs when
the conditional help-tab--pulse class is present.
---
Nitpick comments:
In `@src/components/HelpSidebar.css`:
- Around line 57-68: このアニメーションはアクセシビリティ設定で無効化すべきなので、@keyframes help-tab-pulse
を使っている要素に対して prefers-reduced-motion: reduce
のメディアクエリを追加してアニメーションと関連するトランジション／ボックスシャドウ効果を無効化してください（例: `@media`
(prefers-reduced-motion: reduce) { .help-tab, .help-tab--pulse { animation: none
!important; transition: none !important; box-shadow: none !important; }
}）。対象セレクタは実際に help-tab-pulse を割り当てているクラス（例: .help-tab や
.help-tab--pulse）を使って置き換えてください。
In `@src/lib/__tests__/help-content.test.ts`:
- Around line 25-31: The test currently only asserts labels in HELP_SECTIONS;
update it to also verify the corresponding item descriptions so changes to text
will fail tests. Locate HELP_SECTIONS and the found section ('選択・編集'), then for
each target label ('頂点の削除', '描画中ポイントの削除') find the item by label in
section.items and assert the item's description (e.g., item.description or
item.text) matches the expected summary strings; keep the label assertions and
add these description assertions using the same section variable to make the
test regression-resistant.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/HelpSidebar.csssrc/lib/__tests__/help-content.test.tssrc/lib/help-content.ts
- パルスアニメーションをlocalStorageフラグで初回表示のみに制限（useRefで不要な再レンダリングを回避） - prefers-reduced-motionメディアクエリでアニメーション無効化に対応 - テストにdescription検証を追加し回帰耐性を向上
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/HelpSidebar.tsx (1)
17-23:⚠️ Potential issue | 🟠 Majorパルスが「初回のみ」にならず再表示時に再生されます。
Line 17 の
useRef(...).currentが固定値のため、Line 56 のhelp-tab--pulseが同一マウント中ずっと有効です。!isOpenでボタンが再 mount されるたびにアニメーションが再実行されます。🔧 修正案（初回消費後に確実に無効化）
-import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' @@ - const showPulse = useRef(!localStorage.getItem(HELP_TAB_SEEN_KEY)).current + const [showPulse, setShowPulse] = useState(() => !localStorage.getItem(HELP_TAB_SEEN_KEY)) @@ - useEffect(() => { - if (showPulse) { - localStorage.setItem(HELP_TAB_SEEN_KEY, '1') - } - }, [showPulse]) + const consumePulse = () => { + if (!showPulse) return + localStorage.setItem(HELP_TAB_SEEN_KEY, '1') + setShowPulse(false) + } @@ - onClick={onOpen} + onAnimationEnd={consumePulse} + onClick={() => { + consumePulse() + onOpen() + }}#!/bin/bash # showPulse が固定値かつ setter 不在であることを静的確認 rg -n -C3 'HELP_TAB_SEEN_KEY|showPulse|help-tab--pulse|useRef\(|useState\(' src/components/HelpSidebar.tsxAlso applies to: 56-57
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HelpSidebar.tsx` around lines 17 - 23, showPulse is created from useRef(...).current so it never updates, causing help-tab--pulse to re-run whenever the button remounts; replace the ref with a stateful flag initialized from localStorage (e.g., useState(() => !localStorage.getItem(HELP_TAB_SEEN_KEY))) and update localStorage and clear the state (setShowPulse(false)) inside the useEffect (or on animation end) so the pulse is consumed once; update references to showPulse, HELP_TAB_SEEN_KEY, and the useEffect that currently writes localStorage so the class help-tab--pulse only applies on the true state once.
🧹 Nitpick comments (1)
src/lib/__tests__/help-content.test.ts (1)
25-40: 「頂点の削除」の説明検証をもう1点追加してください。Line 32 は
Delete キーのみを検証しており、右クリックが欠けても通過します。ここは両方を検証すると回帰に強くなります。✅ 追加例
expect.objectContaining({ label: '頂点の削除', - description: expect.stringContaining('Delete キー'), + description: expect.stringMatching(/(Delete キー.*右クリック|右クリック.*Delete キー)/), }),🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/lib/__tests__/help-content.test.ts` around lines 25 - 40, Update the test that inspects HELP_SECTIONS for the '選択・編集' section so the assertion for the item with label '頂点の削除' checks that its description contains both 'Delete キー' and '右クリック' (not just one). Locate the test in help-content.test.ts that finds HELP_SECTIONS and the expect.objectContaining for label '頂点の削除', and change the description expectation to require both substrings (e.g., assert description contains 'Delete キー' AND contains '右クリック') to make the test stricter and prevent regressions.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/components/HelpSidebar.tsx`:
- Around line 17-23: showPulse is created from useRef(...).current so it never
updates, causing help-tab--pulse to re-run whenever the button remounts; replace
the ref with a stateful flag initialized from localStorage (e.g., useState(() =>
!localStorage.getItem(HELP_TAB_SEEN_KEY))) and update localStorage and clear the
state (setShowPulse(false)) inside the useEffect (or on animation end) so the
pulse is consumed once; update references to showPulse, HELP_TAB_SEEN_KEY, and
the useEffect that currently writes localStorage so the class help-tab--pulse
only applies on the true state once.
---
Nitpick comments:
In `@src/lib/__tests__/help-content.test.ts`:
- Around line 25-40: Update the test that inspects HELP_SECTIONS for the '選択・編集'
section so the assertion for the item with label '頂点の削除' checks that its
description contains both 'Delete キー' and '右クリック' (not just one). Locate the
test in help-content.test.ts that finds HELP_SECTIONS and the
expect.objectContaining for label '頂点の削除', and change the description
expectation to require both substrings (e.g., assert description contains
'Delete キー' AND contains '右クリック') to make the test stricter and prevent
regressions.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d76d48a0-87c7-476f-9742-26b85e1f1059
📒 Files selected for processing (3)
src/components/HelpSidebar.csssrc/components/HelpSidebar.tsxsrc/lib/__tests__/help-content.test.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
レビュー対応（CodeRabbit指摘）
useRef+help-tab--pulse条件クラス）prefers-reduced-motionメディアクエリでアニメーション無効化に対応（アクセシビリティ）descriptionの内容検証を追加し回帰耐性を向上変更ファイル
src/lib/help-content.ts— 頂点削除・描画中ポイント削除の説明を追加src/lib/__tests__/help-content.test.ts— テスト追加（description検証強化）src/components/HelpSidebar.css— タブの視認性改善（サイズ・色・アニメーション・prefers-reduced-motion対応）src/components/HelpSidebar.tsx— localStorage による初回パルスアニメーション制御Test plan
Summary by CodeRabbit
リリースノート
新機能
スタイル
テスト