fix(problems): place TabItem children directly inside Tabs to fix HMR context error

[KATO-Hiro]

close #3696

Summary by CodeRabbit

リリースノート

• Documentation

  • スニペットのコンテキスト関連注意事項を追加しました。

• Refactor

  • 問題ページのタブ切り替えUI構造を最適化し、安定性を向上させました。

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 504e6a62-43a6-4dcc-b190-0ff90b50a981

📥 Commits

Reviewing files that changed from the base of the PR and between ee004dc and 6deacec.

📒 Files selected for processing (2)

• .claude/rules/svelte-components.md
• src/routes/problems/+page.svelte

---

📝 Walkthrough

Walkthrough

src/routes/problems/+page.svelte で、Tabs 外に定義したスニペット（problemListTab 等）経由でタブ内容を {@render} していた構成を廃止し、ProblemListTabItem を Tabs 内に直接配置する形へ変更。.claude/rules/svelte-components.md に Context trap 警告を追記。

Changes

Tabs コンテキストトラップ修正

Layer / File(s)	Summary
スニペット削除・ProblemListTabItemをTabs内に直接配置 src/routes/problems/+page.svelte	Snippet import を削除。problemListTab / contestTable / listByGrade / gradeGuidelineTable の各スニペット定義と {@render} 呼び出しを除去し、ProblemListTabItem を Tabs 内に直接記述する形へ置換。
AIルール: Context trap 注意書き追加 .claude/rules/svelte-components.md	Snippets vs Components セクションに「スニペットはコンテキストプロバイダ外で定義して {@render} してはいけない」旨の Context trap 警告を追記。

🎯 Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• AtCoder-NoviSteps/AtCoderNoviSteps#1823: src/routes/problems/+page.svelte の <Tabs> 構造を変更している点で共通。
• AtCoder-NoviSteps/AtCoderNoviSteps#1855: 本PRで削除した problemListTab 等のスニペット構成を導入したPR。
• AtCoder-NoviSteps/AtCoderNoviSteps#3689: /problems ページの TaskGradeList 関連props変更を行っており、タブ描画ロジックと連動。

Poem

スニペット、コンテキストを外で捕まえた 🪤
getContext 叫ぶ、"Tabs はどこ？"と
インラインに直して、祖先の懐へ 🤝
エラーは消えて、タブが輝く ✨
Context trap、もう二度と踏まぬよう 📜

🚥 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	PRタイトルは主な変更内容（TabItemをTabs内に直接配置してHMRコンテキストエラーを修正）を正確に説明しており、変更セットの焦点と一致しています。
Linked Issues check	✅ Passed	PR変更は#3696で報告されたエラー「TabItem must be used within a Tabs component」を解決し、コンポーネント階層の再構成によるコンテキスト伝播の修正を実現しています。
Out of Scope Changes check	✅ Passed	全変更は#3696のHMRコンテキストエラー修正と関連ドキュメント更新に限定されており、スコープ外の変更は見当たりません。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch #3696

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[KATO-Hiro]

LGTM