Skip to content

refactor: Toast をグローバル1本化(ToastProvider + 単一Portalホスト) (#1400)#1402

Merged
Kewton merged 1 commit into
developfrom
feature/1400-worktree
Jul 18, 2026
Merged

refactor: Toast をグローバル1本化(ToastProvider + 単一Portalホスト) (#1400)#1402
Kewton merged 1 commit into
developfrom
feature/1400-worktree

Conversation

@Kewton

@Kewton Kewton commented Jul 18, 2026

Copy link
Copy Markdown
Owner

概要

アプリ内に散在していた ToastContainer / useToast を、単一のグローバル ToastProvider + 単一の Portal ホストに統合するリファクタ。Closes #1400

依存 #1399ToastContainerdocument.body への createPortal 化)は既に develop にマージ済みで、その portal 描画を単一ホストで踏襲している。

変更内容

  • src/components/common/Toast.tsx: ToastContext / ToastProvider を新設。useToast()useContext(ToastContext) を返す共有フックに変更(Provider外でもクラッシュしないよう ctx ?? local フォールバック)。<ToastContainer> の実描画は Provider 内の1箇所のみに集約(fix(ui): サイドバー同期トーストが見切れる(fixed要素がtransform祖先に閉じ込められる) #1399 の portal 描画を維持)。
  • src/components/providers/AppProviders.tsx: ToastProvider をアプリ全体にマウント。
  • 各 consumer からローカルの useToast() + <ToastContainer> を撤去し、共有 Context 経由に置き換え:
    • layout/Sidebar.tsx(SyncButton), common/CommandPalette.tsx, notifications/NotificationsSettings.tsx
    • worktree/LogViewer.tsx, worktree/MarkdownEditor.tsx, worktree/WorktreeDetailDesktop.tsx, worktree/WorktreeDetailRefactored.tsx, hooks/useWorktreeDetailController.ts
  • 既存のトースト表示挙動(種類・自動消滅・スタッキング・アニメーション)は維持。
  • テスト追随: Toast.test.tsx, CommandPalette.test.tsx, Sidebar.test.tsx, MarkdownEditor.test.tsx

完遂確認

  • grep -rn '<ToastContainer' src/ → 実描画は Toast.tsx の Provider 内 1 箇所のみ(他はコメント)。
  • 全 consumer が共有 useToast()(Context)を使用。孤立したローカルキューなし。

テスト

  • npm run lint : PASS
  • npx tsc --noEmit : PASS
  • npm run test:unit(CI=true): PASS(596 files / 10169 tests)

効果

  • fixed トーストホストが1つに集約され、位置の一貫性・スタッキング制御・重複排除。
  • 描画位置がツリー構造に依存しなくなり、transform 祖先による見切れ等の再発を構造的に防止。

各コンポーネントがローカルに useToast() + <ToastContainer> を生成していたのを、
アプリ全体で共有する ToastProvider (React Context) へ集約。

- Toast.tsx: 状態機械を useToastState() に抽出し、ToastProvider が
  showToast/removeToast/clearToasts を Context 提供、単一の
  <ToastContainer>(#1399 の document.body への createPortal を踏襲)を1箇所だけ描画。
  useToast() は Provider 配下で共有インスタンス、非配下ではローカルへフォールバック。
- AppProviders: NextIntlClientProvider 直下に ToastProvider を配置(AppShell の transform 外)。
- Sidebar / CommandPalette / MarkdownEditor / LogViewer / NotificationsSettings /
  WorktreeDetailRefactored / WorktreeDetailDesktop / useWorktreeDetailController:
  ローカルの <ToastContainer> と toasts/removeToast の受け渡しを撤去し showToast のみ共有 Context 経由に。
- 種類・自動消滅・スタッキング・アニメーション等の既存挙動は不変。

grep -rn "ToastContainer" src/ の描画箇所は Provider 内の単一ホストのみ。
lint / tsc / test:unit (10169) すべてグリーン。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GtG2MtTqXXgKz28HAVx9K7
@Kewton Kewton added the refactor Code refactoring / technical debt label Jul 18, 2026
@Kewton
Kewton merged commit b8daaee into develop Jul 18, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Code refactoring / technical debt

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant