Sources・Search・Source Media画面をモバイル対応する

[hmjn023]

対応内容

• Sourcesのページヘッダーと操作ボタンを狭い幅で再配置する
• Source Cardの操作をタッチで利用可能にする
• SearchとSource Mediaのフィルター導線を統一する
• モバイルフィルターの開閉、適用、クリア、現在条件の確認を可能にする
• メディアグリッドの列数、gap、カード情報量をcontainer幅に適応させる
• bulk actionとfloating actionがナビゲーション・safe areaと重ならないようにする
• infinite scrollのloading sentinelをモバイルでも認識可能にする

完了条件

• 320px幅でSourcesの追加・同期・編集・削除を実行できる
• Search/Source Mediaでフィルターと検索結果を往復できる
• メディアカードが操作不能な幅にならない
• 横スクロールが発生しない
• タッチ操作だけで主要機能を利用できる

主な対象

• packages/ui/src/screens/sources-screen.tsx
• packages/ui/src/screens/search-screen.tsx
• packages/ui/src/screens/source-media-screen.tsx
• packages/ui/src/source-card.tsx
• packages/ui/src/source-media-grid.tsx
• packages/ui/src/media-list-actions.tsx

[hmjn023]

共通実装方針

親Issueで以下を決定済み。対象Issueの実装ではこの方針を前提とする。

1. オフライン対応範囲: App Shellと接続失敗表示は必須。Tauriは保存済みデータの表示まで対応する。WebのQuery永続化は今回のスコープ外とする。
2. 対応環境: Webは現行Chrome、Firefox、Safari、Tauriは同梱WebViewを対象とする。最小幅は320px。新しいCSS機能はgraceful degradationを前提とする。
3. 状態表示の優先順位: キャッシュ済みデータ、Skeleton、Errorの順で表示を優先する。background fetchでは既存画面を消さず、グローバルSpinnerは補助表示に限定する。
4. ライブラリの責務: Routerは遷移とroute境界、Queryはremote server state、DBはTauriの永続・リアクティブデータ、Formは入力・validation・submit状態、Solid signal/storeは純粋なローカルUI状態を担当する。新しい状態管理ライブラリは追加しない。
5. 並列開発: leaf Sub-issue単位で1 PRとする。管理Issue 主要画面とDialog/Formをレスポンシブ対応する #582/#583では直接大規模実装を行わない。依存Issueが未mergeの場合は変更ファイルを限定し、各セッション開始時に親Issueと対象Issueの本文・コメントを読む。

Issue固有の要件と競合・マージ順は親Issue #576の「並列実装計画」を参照する。

[hmjn023]

Investigation / Plan

• App Shellとグローバルナビゲーションをモバイル対応する #581 と Dialog・Popover・Form共通部品をモバイル対応する #587 が develop に取り込み済みで、App Shell と Dialog の前提は満たされています。
• Sources のヘッダー・操作列は packages/ui/src/screens/sources-screen.tsx:46、カード操作は packages/ui/src/source-card.tsx:122、Search / Source Media のデスクトップ用フィルター列はそれぞれ packages/ui/src/screens/search-screen.tsx:93 と packages/ui/src/screens/source-media-screen.tsx:134 にあります。
• メディアグリッドは packages/ui/src/source-media-grid.tsx:220、浮動操作は packages/ui/src/screens/source-media-screen.tsx:218 が主な狭幅時の調整箇所です。
• Media Detail・Manager・Config画面をモバイル対応する #586 とは worktree と変更対象ファイルを分離しています。

実装方針

1. 320px幅でヘッダー・操作を縦積み／全幅化し、Source Card の操作を十分なタップ領域にする。
2. Search と Source Media のモバイルフィルターを同じ操作契約（現在条件、適用、クリア、適用後の閉じる動作）で扱う。
3. グリッド、読み込み sentinel、浮動操作をコンテナ幅・safe area に追従させ、横スクロールを防ぐ。
4. 320 / 375 / 768px の responsive E2E を追加し、主要操作・フィルター・横溢れを確認する。

[hmjn023]

Implementation / Review

実装と最終レビューを完了しました。

• Sources / Source Media / Search を 320px 幅から操作できるレイアウトへ調整
• モバイル検索フィルターを Apply 時だけ global state に反映する draft 方式に変更
• Escape・閉じる操作で未適用の条件を破棄し、SSE更新中も入力値・フォーカスを保持
• Source Media のモバイル操作を集約し、44px操作領域、safe area対応、0件選択からの解除導線を追加
• Source Media Grid をコンテナ幅ベースで表示し、横溢れを防止
• Sources/Search/Source Media/SSE の responsive E2E を追加・拡張

検証:

• packages/ui typecheck / lint / test
• apps/server lint
• focused Biome / git diff --check
• responsive E2E（dev / production）: 各 16 passed, 4 mobile-only skipped

備考: apps/server 単独 typecheck は生成済み #route-tree が存在しない既知の環境要因で失敗しますが、production E2Eビルド・実行は成功しています。最終レビューに blocking はありません。

[hmjn023]

PR を作成しました: #607

• ブランチ: fix/issue-585-mobile-sources-search
• commit: dc4baf5
• target: develop

PR本文に実装内容・レビュー結果・検証結果を記録しています。