fix(ui): improve responsive media navigation and layouts

[hmjn023]

概要

検索・メディア一覧・詳細表示で発生していたレスポンシブ表示とSPA遷移の不整合を修正します。

変更内容

• 詳細検索入力のフォーカス維持とフィルターパネルのスクロールを修正
• メディア一覧のグリッド、ローディング枠、ソース名・件数表示を統一
• 詳細画面のSPA遷移で古いメディアが残る問題を修正
• 縦積み詳細画面で元画像の比率を保ちつつ横幅を有効活用
• モバイルナビゲーションの文字コントラストを改善

検証

• bun run --cwd apps/server check
• bun run --cwd apps/server typecheck
• 関連Playwright E2E（詳細遷移、940px縦積み、ローディング）

Summary by CodeRabbit

• 新機能

  • メディアソース画面にソース名と検索結果件数を表示するようになりました。
  • メディアグリッドが画面幅に応じて最適な列数で表示されます。
  • 検索フィルターのスクロール操作と入力フォーカスが改善されました。

• 改善

  • メディアビューアーの表示比率とレスポンシブレイアウトを調整しました。
  • ページ切り替え時のデータ表示がより安定しました。
  • ナビゲーションのフォーカス表示とモバイルメニューのコントラストを改善しました。

• 品質向上

  • 各種画面サイズ、読み込み復旧、ルート移動に関する検証を強化しました。

[coderabbitai]

📝 Walkthrough

Walkthrough

ソースメディアのルート再マウントと名称表示、メディアグリッド・ビューアー・検索レイアウト、ナビゲーションと検索UIを更新し、レスポンシブE2E検証を追加した。

Changes

ソースメディア表示とレスポンシブUI

Layer / File(s)	Summary
ソースメディアのルートと名称表示 apps/server/src/routes/sources/..., packages/ui/src/source-media-page.tsx, packages/ui/src/screens/source-media-screen.tsx	ルートパラメータ変更時の再マウント、メディアソース一覧のプリフェッチ、ソース名と結果件数の表示を追加した。
メディアグリッドとスケルトンの共通化 packages/ui/src/skeleton.tsx, packages/ui/src/source-media-grid.tsx, packages/ui/src/styles/theme.css, apps/server/src/tests/e2e/loading-recovery.spec.ts	グリッド列数、コンテナクエリ、スケルトン表示件数、仮想化・非仮想化グリッドの共通スタイルを更新した。
メディア詳細と検索レイアウト packages/ui/src/media-viewer.tsx, packages/ui/src/screens/media-detail-screen.tsx, packages/ui/src/screens/search-screen.tsx, packages/ui/src/async-state.tsx	ビューアーのアスペクト比とサイズ制御、詳細画面と検索フィルターの高さ・スクロール、アイドル時の状態表示を変更した。
ナビゲーションと検索条件UI packages/ui/src/layouts/app-nav.tsx, packages/ui/src/pro-search-builder.tsx	デスクトップ・モバイルのリンクスタイルを分離し、検索条件の再帰描画をIndexと型検証ヘルパーへ変更した。
レスポンシブE2E検証 apps/server/src/tests/e2e/*.spec.ts	コントラスト、ルート表示名、ビューアー寸法、検索フィルター、検索ダイアログ、ソースメディア表示を検証するケースを追加・更新した。

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

• hmjn023/solid-imager#609: 同じメディア詳細ルートのパラメータ処理とルーター状態を変更している。
• hmjn023/solid-imager#599: ソースメディア画面、非同期状態、スケルトン、保留UIを変更している。
• hmjn023/solid-imager#604: AppNavとレスポンシブなナビゲーションE2Eテストを変更している。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	タイトルはレスポンシブなメディアナビゲーションとレイアウト改善という変更内容を適切に要約しています。
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/responsive-media-navigation

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@apps/server/src/tests/e2e/app-nav.responsive.spec.ts`:
- Around line 29-55: Update parseRgb and the contrast calculation around
relativeLuminance to detect oklch(...) computed colors and convert their OKLCH
components to sRGB before calculating luminance. Preserve RGB parsing for
rgb(...) values, and ensure the converted channels are represented on the 0–255
scale expected by relativeLuminance.

🪄 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: CHILL

Plan: Pro Plus

Run ID: 6419ec1f-0e49-4b24-adaa-e19df821a415

📥 Commits

Reviewing files that changed from the base of the PR and between cd56d1a and d178076.

📒 Files selected for processing (21)

• apps/server/src/routes/sources/$mediaSourceId/$mediaId/index.tsx
• apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
• apps/server/src/routes/sources/$mediaSourceId/index.tsx
• apps/server/src/tests/e2e/app-nav.responsive.spec.ts
• apps/server/src/tests/e2e/loading-recovery.spec.ts
• apps/server/src/tests/e2e/media-detail-manager-config.responsive.spec.ts
• apps/server/src/tests/e2e/route-reload.spec.ts
• apps/server/src/tests/e2e/search-pro-dialog.responsive.spec.ts
• apps/server/src/tests/e2e/search.responsive.spec.ts
• apps/server/src/tests/e2e/sources-source-media.responsive.spec.ts
• packages/ui/src/async-state.tsx
• packages/ui/src/layouts/app-nav.tsx
• packages/ui/src/media-viewer.tsx
• packages/ui/src/pro-search-builder.tsx
• packages/ui/src/screens/media-detail-screen.tsx
• packages/ui/src/screens/search-screen.tsx
• packages/ui/src/screens/source-media-screen.tsx
• packages/ui/src/skeleton.tsx
• packages/ui/src/source-media-grid.tsx
• packages/ui/src/source-media-page.tsx
• packages/ui/src/styles/theme.css