アプリ一覧画面の修正

[pirosiki197]

なぜやるか

アプリ一覧で、アプリが重なってしまっていた

やったこと

DOMがレンダリングされてからvirtualizer().measureElementを呼び出すように修正

やらなかったこと

資料

Summary by CodeRabbit

• 改善
  • ダッシュボードのリスト描画とスクロール時の仮想化処理を見直し、行の計測とレンダリングをより安定化させてスクロールパフォーマンスを向上しました。非表示や未接続のリストに対する扱いをより安全にしています。

注： ユーザー向けの機能変更はありません。

[github-actions]

Preview (prod backend + PR dashboard) → https://1199.ns-preview.trapti.tech/

[coderabbitai]

📝 Walkthrough

Walkthrough

dashboard/src/pages/apps.tsxでAppsListのparentRef型がHTMLDivElement | undefinedに変更され、createMemo→直接createVirtualizer(...)へ切替。countとgetScrollElementはゲッター化され、getScrollElementは未接続時にnullを返す。行要素はref={virtualizer.measureElement}で計測し、行のインラインheightとコンテナのtransform: translateY(...)を削除。createEffectがimportに追加（差分内で未使用）。

Changes

Cohort / File(s)	Summary
Virtualization / Apps list dashboard/src/pages/apps.tsx	AppsListのparentRef型を`HTMLDivElement

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	このタイトルはアプリ一覧画面の修正について述べており、実際の変更内容（仮想化ロジックの改善とDOM要素の測定方法の修正）と関連している。
Description check	✅ Passed	PRの説明は必須セクション（なぜやるか、やったこと、やらなかったこと、資料）をすべて含んでおり、テンプレートに従っている。
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/app-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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pirosiki197]

アプリが多いと、重なる -> 待ち -> 普通に表示される、って感じになってる

[cp-20]

これどうやって表示してるんだろう (なんで高さの計算が必要なんだ？)

[coderabbitai]

🧹 Nitpick comments (1)

dashboard/src/pages/apps.tsx (1)

6-6: createEffect がインポートされていますが、このファイル内で使用されていないようです。

デバッグ時の残りか、将来の使用のために追加されたものでしょうか？不要であれば削除することを検討してください。

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@dashboard/src/pages/apps.tsx` at line 6, The import createEffect is unused in
apps.tsx; remove createEffect from the import list (where createEffect is
currently imported) to clean up the module imports and avoid linter warnings, or
if it was intended to be used, add the intended reactive effect using
createEffect within the component (reference the createEffect symbol) and
implement the effect logic—choose one: delete the unused createEffect import or
implement its intended usage.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@dashboard/src/pages/apps.tsx`:
- Line 6: The import createEffect is unused in apps.tsx; remove createEffect
from the import list (where createEffect is currently imported) to clean up the
module imports and avoid linter warnings, or if it was intended to be used, add
the intended reactive effect using createEffect within the component (reference
the createEffect symbol) and implement the effect logic—choose one: delete the
unused createEffect import or implement its intended usage.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9d4ee0ec-d4fe-42b9-beec-9811d006c8a9

📥 Commits

Reviewing files that changed from the base of the PR and between 399a3ba and 7e793ce.

📒 Files selected for processing (1)

• dashboard/src/pages/apps.tsx