iPad利用時横置きでターミナルを全画面表示したい

[Kewton]

概要

iPad横置き（ランドスケープ）利用時に、ターミナル表示エリアをフルスクリーンに拡大できる機能を追加する。現在、iPad横置き時はデスクトップレイアウト（2ペイン分割）が適用されるが、ターミナル出力を確認する際にフルスクリーンで表示したいニーズがある。

背景・課題

• iPadランドスケープ時（画面幅 ~1024px）はuseIsMobile()がfalseを返し、デスクトップ2ペインレイアウトが適用される
• ターミナルは右ペイン（約60%幅）に表示されるが、長い出力を確認する際に狭い
• MarkdownEditorにはすでにuseFullscreenフックによるフルスクリーン機能があるが、ターミナルにはない
• useFullscreenはiOSデバイスでのCSSフォールバック（fixed inset-0）を既にサポートしている（Issue #104対応済み）
• iPadでは仮想キーボード表示時にFullscreen APIが終了するため、CSS fallbackモードが必須

提案する解決策

既存のuseFullscreenフックをTerminalDisplayに適用し、フルスクリーン切替ボタンを追加する。

主要な変更点

1. TerminalDisplayにフルスクリームボタン追加: 右上にMaximize/Minimizeアイコンボタンを配置
2. useFullscreenフックの接続: WorktreeDetailRefactoredでターミナルコンテナにuseFullscreenを適用
3. z-indexの追加: FULLSCREEN_TERMINAL値をz-index.tsに追加
4. iPad横置き検出（オプション）: screen.orientation APIまたはmatchMedia('(orientation: landscape)')で自動検出

既存資産の活用

• useFullscreenフック: iOS CSSフォールバック済み、iPad Pro検出済み（navigator.platform === 'MacIntel' && maxTouchPoints > 1）
• MarkdownEditorの実装パターン: createPortalによるDOM外レンダリング、useSwipeGestureによるスワイプ解除
• Z_INDEX.MAXIMIZED_EDITOR = 55: 既存のz-index設計

実装タスク

• src/config/z-index.tsにFULLSCREEN_TERMINAL定数を追加（値: 55 or 56）
• src/components/worktree/TerminalDisplay.tsxにフルスクリーンボタンを追加
• src/components/worktree/WorktreeDetailRefactored.tsxでuseFullscreenをターミナルコンテナに接続
• フルスクリーン時のレイアウト調整（fixed inset-0でターミナルのみ表示）
• スワイプダウンでフルスクリーン解除（useSwipeGesture活用）
• i18n対応（ボタンツールチップ等）
• iPadでの動作確認

受入条件

• iPad横置き時にターミナルのフルスクリーンボタンが表示される
• フルスクリームボタン押下でターミナルが全画面表示になる
• フルスクリーン中もターミナル出力がリアルタイム更新される
• フルスクリーン解除ボタンまたはスワイプダウンで元のレイアウトに戻れる
• 既存のデスクトップ/モバイルレイアウトに影響しない
• MarkdownEditorのフルスクリーンと競合しない
• 既存テストがすべてパスする

影響範囲

変更対象ファイル

ファイル	変更内容
src/components/worktree/TerminalDisplay.tsx	フルスクリーンボタン追加
src/components/worktree/WorktreeDetailRefactored.tsx	useFullscreen接続
src/config/z-index.ts	FULLSCREEN_TERMINAL定数追加

関連コンポーネント

• src/hooks/useFullscreen.ts - フルスクリーンフック（変更不要、既にiOS対応済み）
• src/hooks/useSwipeGesture.ts - スワイプ解除（既存パターン流用）
• src/components/worktree/MarkdownEditor.tsx - フルスクリーン実装の参考
• src/hooks/useIsMobile.ts - モバイル判定（MOBILE_BREAKPOINT=768）