feat(sender): 透かしプレビュー改善 (サイズ反比例ズーム / 画像選択 / レイアウト修正)

[kuu13580]

概要

送信アップロード画面の透かし設定ダイアログのプレビューを改善する。

ズーム

• 固定 2.5 倍を廃止し動的算出に変更。cover（16:9 枠の余白を解消する下限）と、透かしサイズ比に反比例した倍率の大きい方を採り上限 6 倍でクランプ。小さい透かしほど大きく拡大して見やすくする
• object-contain のレターボックスを考慮した transform-origin 補正を追加し、縦長画像で透かし位置がずれる不具合を解消
• 初期はズーム OFF（全体表示）。ズームボタンに最初の 3 秒だけ「ズームできます」を表示

プレビュー画像の選択

• 複数候補からプレビュー対象を選べるセレクタを追加。初期は decode 可能な先頭候補を自動表示
• HEIC も候補に含める（heic-to フォールバックで decode、サムネ無しはプレースホルダ表示）
• 候補の実体 File は選択時に IndexedDB から都度取り出し、メモリ常駐を回避

レイアウト修正

• Dialog のスクロール領域に min-h-0 を追加。コンテンツが多いとき内部スクロールが効くようになり、ヘッダーが枠外に突き出る不具合を解消（共有コンポーネントのため他ダイアログにも波及改善）
• フォントセグメントの行高を固定（h-9 / leading-none）し、フォント解決時の高さ変動を防止

Test plan

• 複数画像（縦長・横長を含む）選択時、セレクタで対象を切り替えるとプレビューが即差し替わる
• HEIC 候補を選ぶとフォールバック変換後にプレビュー表示される
• ズーム ON で透かし箇所が枠をはみ出さずに拡大し、サイズを小さくするほど拡大率が上がる
• フォントタブ切替・サイズ変更でダイアログのヘッダーが突き出したり高さが暴れたりしない
• ズームボタンに開いて最初の 3 秒だけツールチップが出て、その後消える

🤖 Generated with Claude Code

Summary by CodeRabbit

リリースノート

• New Features

  • ウォーターマーク設定のオプション追加（埋め込みモード選択対応）
  • ウォーターマークダイアログにズーム機能を追加
  • 複数画像プレビュー時に画像切り替え機能を実装
  • ズーム利用可能時にヒント表示を追加

• Bug Fixes

  • ウォーターマークダイアログ再表示時の状態混線を解決

• Tests

  • ウォーターマーク送信フローの包括的なE2Eテストを追加

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

PreviewCandidate 型を新設し、WatermarkDialog のプレビュー入力を previewFiles: File[] から candidates: PreviewCandidate[] + getFile コールバックに置き換えた。UploadPage では候補構築ロジックを buildPreviewCandidates に統一し、WatermarkDialog 内にズームヒント表示・AR補正ズーム計算・ダイアログリセット処理を追加。Dialog.tsx に min-h-0 を追加し、E2E テストと auth ヘルパーも対応拡張した。

Changes

WatermarkDialog 候補ベースプレビューへの刷新

Layer / File(s)	Summary
PreviewCandidate 型と EmbedMode 型の定義 frontend/src/stores/sender.ts, e2e/helpers/auth.ts	sender.ts に PreviewCandidate 型（id/name/type/thumbUrl/isHeic）を追加。auth.ts に EmbedMode 型と registerReceiver の options 引数を追加し /auth/register ボディへ反映。
UploadPage での候補構築と getFile コールバック追加 frontend/src/pages/send/UploadPage.tsx	pickPreviewCandidates を廃止し buildPreviewCandidates で PreviewCandidate[] を構築。previewFiles state/effect を削除し getPreviewFile コールバックを追加。WatermarkDialog への props を candidates/getFile に切り替え。
WatermarkDialog の Props・定数・非同期デコード・ズーム計算 frontend/src/components/send/WatermarkDialog.tsx	Props から previewFiles を削除し candidates/getFile を追加。ズーム用定数を新設。selectedId に応じた非同期デコード、open 変化時のステートリセット、AR補正による zoomScale/transformOrigin 計算をキャンバス style に適用。
WatermarkDialog の UI 追加（ズームボタン・ヒント・候補リスト） frontend/src/components/send/WatermarkDialog.tsx	ズーム切替ボタンと「ズームできます」ヒントを追加。candidates から候補サムネ一覧を生成し aria-pressed で選択状態を制御。
Dialog コンテナへの min-h-0 追加 frontend/src/components/ui/Dialog.tsx	children ラッパーに min-h-0 を追加し縦方向オーバーフロー計算を修正。
WatermarkDialog E2E テスト追加 e2e/tests/send-flow-watermark.spec.ts	openWatermarkDialog ヘルパーを軸に optional/required モード・複数画像候補切替・ズームヒント ON/OFF の 4 シナリオを Playwright テストで追加。

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• kuu13580/furdrop#73: WatermarkDialog.tsx で previewFiles を順次デコードして tryLoadBitmap でプレビュー可能画像を選ぶ処理を追加しており、本 PR の候補ベース非同期 bitmap 生成フローと同一コンポーネント上で強く重なっている。
• kuu13580/furdrop#75: WatermarkDialog.tsx と UploadPage.tsx の透かしプレビューに渡すデータ形を大きく作り替えており、本 PR と同一箇所の実装変更が競合し得る。

Poem

🐇 ぴょんと跳ねて候補を並べ、
サムネイルそっと thumbUrl に詰め込んで、
ズームヒントはタイマーでフワリ消え、
AR 補正でぴったりキャンバスに収まった！
にんじん色の透かし、今日も元気に輝くよ ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.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	PR タイトルは透かしプレビューの3つの主要な改善（ズーム、画像選択、レイアウト修正）を明確かつ簡潔に説明しており、変更内容をよく要約しています。
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.

_{✏️ 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 feature/preview-zoom

---

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