From fe5c96a473d9a1cc17fc7d7e72da5af8253de474 Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Fri, 10 Jul 2026 18:27:21 -0500
Subject: [PATCH 1/2] VideoPress: Move caption manager outcome messages to
 snackbars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The caption manager funneled every message — successes, async/API
failures, and form validation — through a single inline notice. Split
that into two channels: transient outcomes and async errors now surface
as snackbars rendered by SnackbarList at the bottom of the modal, while
sticky form-validation errors stay inline where the user is acting.

Adds a use-caption-snackbars hook to own the snackbar list, routes the
mutation hook and modal flows to notify()/setValidationNotice()
accordingly, removes the now-unused NoticeState type, and updates the
tests to assert moved messages on the snackbar list.

Claude-Session: https://claude.ai/code/session_017px3yqTVgtB3RJXZwB5yFk
---
 .../update-caption-manager-snackbar-notices   |   4 +
 .../caption-manager-modal/index.tsx           | 111 ++++++++----------
 .../caption-manager-modal/style.scss          |  17 +++
 .../caption-manager-modal/test/index.test.tsx |  70 ++++++-----
 .../caption-manager-modal/track-helpers.ts    |   1 -
 .../use-caption-snackbars.ts                  |  35 ++++++
 .../use-track-mutations.ts                    | 100 ++++++----------
 7 files changed, 185 insertions(+), 153 deletions(-)
 create mode 100644 projects/packages/videopress/changelog/update-caption-manager-snackbar-notices
 create mode 100644 projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts

diff --git a/projects/packages/videopress/changelog/update-caption-manager-snackbar-notices b/projects/packages/videopress/changelog/update-caption-manager-snackbar-notices
new file mode 100644
index 000000000000..fbd4ec3ad9a2
--- /dev/null
+++ b/projects/packages/videopress/changelog/update-caption-manager-snackbar-notices
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Captions: Surface outcome and async error messages as snackbars, keeping only form-validation errors as an inline notice.
diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx b/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx
index 449b435c2cb9..7d3a91cf1bc5 100644
--- a/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { QueryClientProvider } from '@tanstack/react-query';
-import { Button, DropZone, Modal, Notice } from '@wordpress/components';
+import { Button, DropZone, Modal, Notice, SnackbarList } from '@wordpress/components';
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from '@wordpress/element';
 import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
 import { chevronLeft, chevronRight, close, plus, upload } from '@wordpress/icons';
@@ -56,6 +56,7 @@ import {
 } from './track-helpers';
 import TrackList from './track-list';
 import UploadWorkspace from './upload-workspace';
+import { useCaptionSnackbars } from './use-caption-snackbars';
 import { useCaptionTracks } from './use-caption-tracks';
 import { useTrackMutations } from './use-track-mutations';
 import { useVideoTracks } from './use-video-tracks';
@@ -69,7 +70,7 @@ import './style.scss';
  * Types
  */
 import type { CaptionPreviewPlayerHandle, CaptionPreviewProps } from './caption-preview-player';
-import type { CaptionCueBlock, ManualTrack, NoticeState } from './track-helpers';
+import type { CaptionCueBlock, ManualTrack } from './track-helpers';
 import type { TrackListBusy } from './track-list';
 import type { CaptionManagerModalProps } from './types';
 import type { WorkspaceAction } from './workspace-reducer';
@@ -151,7 +152,10 @@ function CaptionManagerModalInner( {
 	}, [] );
 
 	const [ workspace, dispatch ] = useReducer( workspaceReducer, initialWorkspaceState );
-	const [ notice, setNotice ] = useState< NoticeState >( null );
+	// Sticky, inline error for form-validation the current action can't proceed past.
+	const [ validationNotice, setValidationNotice ] = useState< string | null >( null );
+	// Transient snackbars for outcomes and async failures; see use-caption-snackbars.ts.
+	const { snackbars, notify, removeSnackbar } = useCaptionSnackbars();
 	const [ confirmation, setConfirmation ] = useState< ConfirmationState | null >( null );
 	// Whether the manual editor holds unsaved track edits; reported by the
 	// editor on transitions and reset with each new workspace instance.
@@ -166,10 +170,10 @@ function CaptionManagerModalInner( {
 		[]
 	);
 
-	// Workspace transitions and form edits clear any lingering notice.
+	// Workspace transitions and form edits clear any lingering validation notice.
 	const dispatchAndClearNotice = useCallback( ( action: WorkspaceAction ) => {
 		dispatch( action );
-		setNotice( null );
+		setValidationNotice( null );
 	}, [] );
 
 	// Editor-wide bits the cue blocks can't receive as props; see caption-editor-context.ts.
@@ -181,25 +185,23 @@ function CaptionManagerModalInner( {
 		isPrivate,
 		tracks,
 		onError: () =>
-			setNotice( {
-				status: 'error',
-				message: __(
+			notify(
+				__(
 					'Couldn’t load the latest track list for this video. It may be incomplete.',
 					'jetpack-videopress-pkg'
-				),
-			} ),
+				)
+			),
 	} );
 	const { captionTracks, setCaptionTracks, isLoadingCaptionTracks } = useCaptionTracks( {
 		guid,
 		isOpen,
 		onError: () =>
-			setNotice( {
-				status: 'error',
-				message: __(
+			notify(
+				__(
 					'Couldn’t load saved subtitle drafts. Any existing drafts may not appear.',
 					'jetpack-videopress-pkg'
-				),
-			} ),
+				)
+			),
 	} );
 
 	const {
@@ -221,7 +223,7 @@ function CaptionManagerModalInner( {
 		setManagedTracks,
 		setCaptionTracks,
 		onTracksChange,
-		setNotice,
+		notify,
 	} );
 
 	const resetToTrackList = useCallback( () => {
@@ -357,13 +359,9 @@ function CaptionManagerModalInner( {
 	const concludeTrackFlow = useCallback(
 		( cleanupFailed: boolean, successMessage: string, cleanupFailedMessage: string ) => {
 			resetToTrackList();
-			setNotice(
-				cleanupFailed
-					? { status: 'error', message: cleanupFailedMessage }
-					: { status: 'success', message: successMessage }
-			);
+			notify( cleanupFailed ? cleanupFailedMessage : successMessage );
 		},
-		[ resetToTrackList ]
+		[ notify, resetToTrackList ]
 	);
 
 	/*
@@ -464,13 +462,12 @@ function CaptionManagerModalInner( {
 				dispatch( { type: 'CONTENT_LOAD_FAILED', requestId } );
 				// Only surface the failure if this workspace is still the current one.
 				if ( isCurrentWorkspace( requestId ) ) {
-					setNotice( {
-						status: 'error',
-						message: __(
+					notify(
+						__(
 							'Unable to load subtitle content. You can try again from the track list or start from an empty subtitle track.',
 							'jetpack-videopress-pkg'
-						),
-					} );
+						)
+					);
 				}
 			}
 		},
@@ -481,6 +478,7 @@ function CaptionManagerModalInner( {
 			isCurrentWorkspace,
 			loadTrackText,
 			nextRequestId,
+			notify,
 		]
 	);
 
@@ -540,14 +538,13 @@ function CaptionManagerModalInner( {
 			}
 
 			if ( ! isAcceptedTrackFile( file ) ) {
-				setNotice( {
-					status: 'error',
-					message: sprintf(
+				setValidationNotice(
+					sprintf(
 						/* translators: %s: comma-separated list of accepted subtitle file extensions. */
 						__( 'Accepted formats: %s.', 'jetpack-videopress-pkg' ),
 						SUPPORTED_CAPTION_FORMATS_LABEL
-					),
-				} );
+					)
+				);
 				return;
 			}
 
@@ -575,7 +572,7 @@ function CaptionManagerModalInner( {
 			managedTracks,
 		} );
 		if ( 'error' in result ) {
-			setNotice( { status: 'error', message: result.error } );
+			setValidationNotice( result.error );
 			return;
 		}
 
@@ -620,10 +617,7 @@ function CaptionManagerModalInner( {
 			captionTracks,
 		} );
 		if ( ! payload ) {
-			setNotice( {
-				status: 'error',
-				message: __( 'Choose a subtitle language.', 'jetpack-videopress-pkg' ),
-			} );
+			setValidationNotice( __( 'Choose a subtitle language.', 'jetpack-videopress-pkg' ) );
 			return;
 		}
 
@@ -655,28 +649,21 @@ function CaptionManagerModalInner( {
 			captionTracks,
 		} );
 		if ( ! payload ) {
-			setNotice( {
-				status: 'error',
-				message: __( 'Choose a subtitle language.', 'jetpack-videopress-pkg' ),
-			} );
+			setValidationNotice( __( 'Choose a subtitle language.', 'jetpack-videopress-pkg' ) );
 			return;
 		}
 
 		const cueValidationErrors = getCaptionCueValidationErrors( cueBlocks );
 		if ( cueValidationErrors.length ) {
-			setNotice( {
-				status: 'error',
-				message: getCueValidationNoticeMessage( cueValidationErrors[ 0 ] ),
-			} );
+			setValidationNotice( getCueValidationNoticeMessage( cueValidationErrors[ 0 ] ) );
 			return;
 		}
 
 		const cues = captionBlocksToCues( cueBlocks );
 		if ( ! cues.length ) {
-			setNotice( {
-				status: 'error',
-				message: __( 'Add at least one subtitle cue before publishing.', 'jetpack-videopress-pkg' ),
-			} );
+			setValidationNotice(
+				__( 'Add at least one subtitle cue before publishing.', 'jetpack-videopress-pkg' )
+			);
 			return;
 		}
 
@@ -739,10 +726,9 @@ function CaptionManagerModalInner( {
 
 			const cues = parseCaptionTextInput( workspace.textImportValue );
 			if ( ! cues.length ) {
-				setNotice( {
-					status: 'error',
-					message: __( 'Paste subtitle text before importing.', 'jetpack-videopress-pkg' ),
-				} );
+				setValidationNotice(
+					__( 'Paste subtitle text before importing.', 'jetpack-videopress-pkg' )
+				);
 				return false;
 			}
 
@@ -752,13 +738,10 @@ function CaptionManagerModalInner( {
 				cueBlocks: cues.map( createCueBlock ),
 				currentCueBlocks: cueBlocksRef.current,
 			} );
-			setNotice( {
-				status: 'success',
-				message: __( 'Subtitle text imported.', 'jetpack-videopress-pkg' ),
-			} );
+			notify( __( 'Subtitle text imported.', 'jetpack-videopress-pkg' ) );
 			return true;
 		},
-		[ workspace ]
+		[ notify, workspace ]
 	);
 
 	const requestDeleteTrack = useCallback(
@@ -1009,9 +992,9 @@ function CaptionManagerModalInner( {
 						</div>
 					</div>
 
-					{ notice && (
-						<Notice status={ notice.status } isDismissible={ false }>
-							{ notice.message }
+					{ validationNotice && (
+						<Notice status="error" isDismissible={ false }>
+							{ validationNotice }
 						</Notice>
 					) }
 
@@ -1104,6 +1087,12 @@ function CaptionManagerModalInner( {
 							onCancel={ () => setConfirmation( null ) }
 						/>
 					) }
+
+					<SnackbarList
+						notices={ snackbars }
+						className="videopress-caption-manager__snackbars"
+						onRemove={ removeSnackbar }
+					/>
 				</div>
 			</Modal>
 		</CaptionEditorContext.Provider>
diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/style.scss b/projects/packages/videopress/src/client/components/caption-manager-modal/style.scss
index 294da31ed755..034a428e3346 100644
--- a/projects/packages/videopress/src/client/components/caption-manager-modal/style.scss
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/style.scss
@@ -606,3 +606,20 @@
 	justify-content: flex-end;
 	gap: 8px;
 }
+
+/*
+ * Transient outcome and error snackbars float over the bottom of the modal.
+ * The list spans the modal so it can't push layout, but only the bubbles
+ * themselves capture clicks, leaving the content behind interactive.
+ */
+.videopress-caption-manager__snackbars {
+	position: absolute;
+	inset-block-end: 16px;
+	inset-inline: 16px;
+	z-index: 11;
+	pointer-events: none;
+
+	.components-snackbar {
+		pointer-events: auto;
+	}
+}
diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/test/index.test.tsx b/projects/packages/videopress/src/client/components/caption-manager-modal/test/index.test.tsx
index 959570358959..c92e84d630d4 100644
--- a/projects/packages/videopress/src/client/components/caption-manager-modal/test/index.test.tsx
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/test/index.test.tsx
@@ -182,6 +182,18 @@ jest.mock( '@wordpress/components', () => ( {
 			</div>
 		) : null,
 	Notice: ( { children } ) => <div role="alert">{ children }</div>,
+	SnackbarList: ( { notices, onRemove } ) => (
+		<div data-testid="snackbar-list">
+			{ notices.map( ( notice: { id: string; content: string } ) => (
+				<div key={ notice.id } data-testid="snackbar">
+					{ notice.content }
+					<button aria-label="Dismiss notice" onClick={ () => onRemove( notice.id ) }>
+						Dismiss
+					</button>
+				</div>
+			) ) }
+		</div>
+	),
 	TextareaControl: ( { label, onChange, value } ) => (
 		<label htmlFor={ label }>
 			{ label }
@@ -737,9 +749,11 @@ describe( 'CaptionManagerModal', () => {
 
 		await user.click( screen.getAllByText( 'Edit' )[ 0 ] );
 
-		await expect( screen.findByRole( 'alert' ) ).resolves.toHaveTextContent(
-			'Unable to load subtitle content. You can try again from the track list or start from an empty subtitle track.'
-		);
+		await expect(
+			screen.findByText(
+				'Unable to load subtitle content. You can try again from the track list or start from an empty subtitle track.'
+			)
+		).resolves.toBeInTheDocument();
 	} );
 
 	it( 'pauses the preview only while the user is actively typing', async () => {
@@ -875,7 +889,7 @@ describe( 'CaptionManagerModal', () => {
 		await user.type( screen.getByLabelText( 'Subtitle text' ), 'Trail closed.\nTrail open.' );
 		await user.click( screen.getByText( 'Create cues' ) );
 
-		expect( screen.getByRole( 'alert' ) ).toHaveTextContent( 'Subtitle text imported.' );
+		expect( screen.getByText( 'Subtitle text imported.' ) ).toBeInTheDocument();
 		expect( screen.getAllByLabelText( 'Cue text' ) ).toHaveLength( 2 );
 		expect( screen.getAllByLabelText( 'Cue text' )[ 0 ] ).toHaveValue( 'Trail closed.' );
 		expect( screen.getAllByLabelText( 'Cue start' )[ 0 ] ).toHaveValue( '00:00:00.000' );
@@ -899,7 +913,7 @@ describe( 'CaptionManagerModal', () => {
 		await user.type( screen.getByLabelText( 'Subtitle text' ), 'Trail closed.\nTrail open.' );
 		await user.click( screen.getByText( 'Create cues' ) );
 
-		expect( screen.getByRole( 'alert' ) ).toHaveTextContent( 'Subtitle text imported.' );
+		expect( screen.getByText( 'Subtitle text imported.' ) ).toBeInTheDocument();
 		expect( screen.getAllByLabelText( 'Cue text' ) ).toHaveLength( 2 );
 		expect( screen.getAllByLabelText( 'Cue text' )[ 0 ] ).toHaveValue( 'Trail closed.' );
 		expect( screen.getAllByLabelText( 'Cue text' )[ 1 ] ).toHaveValue( 'Trail open.' );
@@ -1060,9 +1074,9 @@ describe( 'CaptionManagerModal', () => {
 		);
 		await user.click( screen.getByText( 'Upload track' ) );
 
-		await expect( screen.findByRole( 'alert' ) ).resolves.toHaveTextContent(
-			'Track error: Unsupported caption format.'
-		);
+		await expect(
+			screen.findByText( 'Track error: Unsupported caption format.' )
+		).resolves.toBeInTheDocument();
 	} );
 
 	it( 'rejects generated language keys for the upload language', async () => {
@@ -1263,9 +1277,7 @@ describe( 'CaptionManagerModal', () => {
 		await user.click( screen.getByText( 'Publish' ) );
 
 		await waitFor( () => expect( saveCaptionTrack ).toHaveBeenCalled() );
-		await expect( screen.findByRole( 'alert' ) ).resolves.toHaveTextContent(
-			'Subtitles published.'
-		);
+		await expect( screen.findByText( 'Subtitles published.' ) ).resolves.toBeInTheDocument();
 		expect( screen.queryByText( 'Subtitle track published.' ) ).not.toBeInTheDocument();
 	} );
 
@@ -1283,9 +1295,11 @@ describe( 'CaptionManagerModal', () => {
 		await user.click( screen.getByText( 'Publish' ) );
 
 		await waitFor( () => expect( saveCaptionTrack ).toHaveBeenCalled() );
-		await expect( screen.findByRole( 'alert' ) ).resolves.toHaveTextContent(
-			'Subtitles were published to the video, but saving the editable copy failed. Reopen the track to keep editing.'
-		);
+		await expect(
+			screen.findByText(
+				'Subtitles were published to the video, but saving the editable copy failed. Reopen the track to keep editing.'
+			)
+		).resolves.toBeInTheDocument();
 		expect( screen.queryByText( 'Unable to save subtitle track.' ) ).not.toBeInTheDocument();
 		// The VTT is live despite the failed save, so the track list must reflect it.
 		expect( onTracksChange ).toHaveBeenCalledWith( [
@@ -1380,9 +1394,9 @@ describe( 'CaptionManagerModal', () => {
 
 		await waitFor( () => expect( uploadTrackForGuid ).toHaveBeenCalled() );
 		expect( saveCaptionTrack ).not.toHaveBeenCalled();
-		expect( screen.getByRole( 'alert' ) ).toHaveTextContent(
-			'Track error: VideoPress rejected the subtitle file.'
-		);
+		await expect(
+			screen.findByText( 'Track error: VideoPress rejected the subtitle file.' )
+		).resolves.toBeInTheDocument();
 	} );
 
 	it( 'duplicates generated captions into a manual subtitle track instead of overwriting auto tracks', async () => {
@@ -1715,9 +1729,9 @@ describe( 'CaptionManagerModal', () => {
 		await user.type( screen.getByLabelText( 'Cue text' ), 'Trail closed.' );
 		await user.click( screen.getByText( 'Save draft' ) );
 
-		await expect( screen.findByRole( 'alert' ) ).resolves.toHaveTextContent(
-			'Unable to save subtitle track.'
-		);
+		await expect(
+			screen.findByText( 'Unable to save subtitle track.' )
+		).resolves.toBeInTheDocument();
 
 		// The save failed, so leaving the editor must still prompt about unsaved edits.
 		await user.click( screen.getByText( 'Back to tracks' ) );
@@ -1748,9 +1762,9 @@ describe( 'CaptionManagerModal', () => {
 		await user.click( within( getConfirmDialog() ).getByText( 'Delete' ) );
 
 		await waitFor( () => expect( deleteCaptionTrack ).toHaveBeenCalledWith( 202 ) );
-		await expect( screen.findByRole( 'alert' ) ).resolves.toHaveTextContent(
-			'Unable to delete the subtitle draft.'
-		);
+		await expect(
+			screen.findByText( 'Unable to delete the subtitle draft.' )
+		).resolves.toBeInTheDocument();
 		expect( screen.getByText( 'Portuguese' ) ).toBeInTheDocument();
 	} );
 
@@ -1768,9 +1782,11 @@ describe( 'CaptionManagerModal', () => {
 		await user.click( screen.getByText( 'Publish' ) );
 
 		await waitFor( () => expect( saveCaptionTrack ).toHaveBeenCalled() );
-		await expect( screen.findByRole( 'alert' ) ).resolves.toHaveTextContent(
-			'Subtitles published, but the previous language’s track couldn’t be removed and may still appear.'
-		);
+		await expect(
+			screen.findByText(
+				'Subtitles published, but the previous language’s track couldn’t be removed and may still appear.'
+			)
+		).resolves.toBeInTheDocument();
 	} );
 
 	it( 'ignores a stale track-content fetch after switching to another track', async () => {
@@ -1809,7 +1825,7 @@ describe( 'CaptionManagerModal', () => {
 		} );
 
 		expect( screen.getByLabelText( 'Cue text' ) ).toHaveValue( 'Second track text' );
-		expect( screen.queryByRole( 'alert' ) ).not.toBeInTheDocument();
+		expect( screen.queryByTestId( 'snackbar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'treats a language-only change as an unsaved edit', async () => {
diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/track-helpers.ts b/projects/packages/videopress/src/client/components/caption-manager-modal/track-helpers.ts
index 0749be4d7b0a..067003a9b751 100644
--- a/projects/packages/videopress/src/client/components/caption-manager-modal/track-helpers.ts
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/track-helpers.ts
@@ -53,7 +53,6 @@ export type ManualTrack = {
 };
 
 export type UploadFormMode = 'add' | 'replace';
-export type NoticeState = { status: 'success' | 'error'; message: string } | null;
 export type CaptionCueBlock = ReturnType< typeof createBlock >;
 
 type TrackApiError = {
diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts b/projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts
new file mode 100644
index 000000000000..ec857f05cda6
--- /dev/null
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useRef, useState } from '@wordpress/element';
+
+export type CaptionSnackbar = {
+	id: string;
+	content: string;
+};
+
+/**
+ * Owns the caption manager's transient snackbar notices: the list rendered by
+ * SnackbarList at the bottom of the modal, each bubble auto-dismissed by the
+ * Snackbar component after its timeout. Success confirmations and async/API
+ * failures announce here; form-validation errors stay inline instead.
+ *
+ * @return The snackbar list plus its add and remove callbacks.
+ */
+export function useCaptionSnackbars() {
+	const [ snackbars, setSnackbars ] = useState< CaptionSnackbar[] >( [] );
+	// Monotonic id source so each notice animates and dismisses independently.
+	const nextIdRef = useRef( 0 );
+
+	const notify = useCallback( ( content: string ) => {
+		nextIdRef.current += 1;
+		const id = `caption-snackbar-${ nextIdRef.current }`;
+		setSnackbars( current => [ ...current, { id, content } ] );
+	}, [] );
+
+	const removeSnackbar = useCallback( ( id: string ) => {
+		setSnackbars( current => current.filter( snackbar => snackbar.id !== id ) );
+	}, [] );
+
+	return { snackbars, notify, removeSnackbar };
+}
diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/use-track-mutations.ts b/projects/packages/videopress/src/client/components/caption-manager-modal/use-track-mutations.ts
index 085ac5e5a68d..10f94c19c346 100644
--- a/projects/packages/videopress/src/client/components/caption-manager-modal/use-track-mutations.ts
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/use-track-mutations.ts
@@ -24,7 +24,6 @@ import {
 /**
  * Types
  */
-import type { NoticeState } from './track-helpers';
 import type { CaptionTrack, SavedCaptionTrack } from '../../lib/video-tracks/caption-tracks';
 import type { UploadTrackDataProps, VideoTextTrack } from '../../lib/video-tracks/types';
 import type { Dispatch, SetStateAction } from 'react';
@@ -38,7 +37,7 @@ type UseTrackMutationsArgs = {
 	setManagedTracks: Dispatch< SetStateAction< VideoTextTrack[] > >;
 	setCaptionTracks: Dispatch< SetStateAction< SavedCaptionTrack[] > >;
 	onTracksChange: ( tracks: VideoTextTrack[] ) => void;
-	setNotice: ( notice: NoticeState ) => void;
+	notify: ( content: string ) => void;
 };
 
 type UploadAndReconcileArgs = {
@@ -68,7 +67,7 @@ export type UploadOutcome = 'uploaded' | 'cleanup-failed' | 'failed';
  * @param args.setManagedTracks - Managed track list setter.
  * @param args.setCaptionTracks - Caption track (draft) list setter.
  * @param args.onTracksChange   - Host callback for managed track changes.
- * @param args.setNotice        - Modal notice setter.
+ * @param args.notify           - Adds a snackbar notice.
  * @return Mutation callbacks and busy state.
  */
 export function useTrackMutations( {
@@ -78,7 +77,7 @@ export function useTrackMutations( {
 	setManagedTracks,
 	setCaptionTracks,
 	onTracksChange,
-	setNotice,
+	notify,
 }: UseTrackMutationsArgs ) {
 	const [ isSavingUpload, setIsSavingUpload ] = useState( false );
 	const [ isSavingCaptionTrack, setIsSavingCaptionTrack ] = useState( false );
@@ -118,14 +117,13 @@ export function useTrackMutations( {
 			const response = await uploadTrackForGuid( trackToUpload, guid );
 
 			if ( hasTrackApiError( response ) ) {
-				setNotice( {
-					status: 'error',
-					message: sprintf(
+				notify(
+					sprintf(
 						/* translators: %s: VideoPress API error. */
 						__( 'Track error: %s', 'jetpack-videopress-pkg' ),
 						getTrackApiErrorMessage( response, apiErrorFallback )
-					),
-				} );
+					)
+				);
 				return null;
 			}
 
@@ -170,7 +168,7 @@ export function useTrackMutations( {
 			applyTracksChange( updatedTracks );
 			return { track: uploadedTrack, cleanupFailed };
 		},
-		[ applyTracksChange, guid, managedTracks, setNotice ]
+		[ applyTracksChange, guid, managedTracks, notify ]
 	);
 
 	/**
@@ -187,7 +185,6 @@ export function useTrackMutations( {
 			{ announce = true }: { announce?: boolean } = {}
 		): Promise< SavedCaptionTrack | null > => {
 			setIsSavingCaptionTrack( true );
-			setNotice( null );
 
 			try {
 				const savedCaptionTrack = await saveCaptionTrack( payload );
@@ -203,29 +200,24 @@ export function useTrackMutations( {
 					return next;
 				} );
 				if ( announce ) {
-					setNotice( {
-						status: 'success',
-						message:
-							payload.status === 'publish'
-								? __( 'Subtitle track published.', 'jetpack-videopress-pkg' )
-								: __( 'Subtitle track draft saved.', 'jetpack-videopress-pkg' ),
-					} );
+					notify(
+						payload.status === 'publish'
+							? __( 'Subtitle track published.', 'jetpack-videopress-pkg' )
+							: __( 'Subtitle track draft saved.', 'jetpack-videopress-pkg' )
+					);
 				}
 				return savedCaptionTrack;
 			} catch ( error ) {
 				debug( 'save caption track error', error );
 				if ( announce ) {
-					setNotice( {
-						status: 'error',
-						message: __( 'Unable to save subtitle track.', 'jetpack-videopress-pkg' ),
-					} );
+					notify( __( 'Unable to save subtitle track.', 'jetpack-videopress-pkg' ) );
 				}
 				return null;
 			} finally {
 				setIsSavingCaptionTrack( false );
 			}
 		},
-		[ setCaptionTracks, setNotice ]
+		[ notify, setCaptionTracks ]
 	);
 
 	/**
@@ -239,7 +231,6 @@ export function useTrackMutations( {
 			args: Omit< UploadAndReconcileArgs, 'apiErrorFallback' >
 		): Promise< UploadOutcome > => {
 			setIsSavingUpload( true );
-			setNotice( null );
 
 			try {
 				const result = await uploadAndReconcileTrack( {
@@ -252,23 +243,22 @@ export function useTrackMutations( {
 				return result.cleanupFailed ? 'cleanup-failed' : 'uploaded';
 			} catch ( uploadError ) {
 				debug( 'upload track error', uploadError );
-				setNotice( {
-					status: 'error',
-					message: sprintf(
+				notify(
+					sprintf(
 						/* translators: %s: VideoPress API error. */
 						__( 'Track error: %s', 'jetpack-videopress-pkg' ),
 						getTrackApiErrorMessage(
 							uploadError,
 							__( 'Unable to upload track.', 'jetpack-videopress-pkg' )
 						)
-					),
-				} );
+					)
+				);
 				return 'failed';
 			} finally {
 				setIsSavingUpload( false );
 			}
 		},
-		[ setNotice, uploadAndReconcileTrack ]
+		[ notify, uploadAndReconcileTrack ]
 	);
 
 	/**
@@ -290,7 +280,6 @@ export function useTrackMutations( {
 			captionTrackPayload: CaptionTrack;
 		} ): Promise< PublishOutcome > => {
 			setIsPublishing( true );
-			setNotice( null );
 
 			try {
 				const result = await uploadAndReconcileTrack( {
@@ -311,29 +300,25 @@ export function useTrackMutations( {
 					 * The VTT is already live on the video; only the local editable copy
 					 * failed to save. Say so instead of implying nothing was published.
 					 */
-					setNotice( {
-						status: 'error',
-						message: __(
+					notify(
+						__(
 							'Subtitles were published to the video, but saving the editable copy failed. Reopen the track to keep editing.',
 							'jetpack-videopress-pkg'
-						),
-					} );
+						)
+					);
 					return 'save-failed';
 				}
 
 				return result.cleanupFailed ? 'cleanup-failed' : 'published';
 			} catch ( error ) {
 				debug( 'publish manual caption track error', error );
-				setNotice( {
-					status: 'error',
-					message: __( 'Unable to publish subtitles.', 'jetpack-videopress-pkg' ),
-				} );
+				notify( __( 'Unable to publish subtitles.', 'jetpack-videopress-pkg' ) );
 				return 'failed';
 			} finally {
 				setIsPublishing( false );
 			}
 		},
-		[ saveCaptionTrackRecord, setNotice, uploadAndReconcileTrack ]
+		[ notify, saveCaptionTrackRecord, uploadAndReconcileTrack ]
 	);
 
 	/**
@@ -345,21 +330,19 @@ export function useTrackMutations( {
 		async ( track: VideoTextTrack ) => {
 			const key = getTrackKey( track );
 			setDeletingTrackKey( key );
-			setNotice( null );
 
 			// API error envelopes and thrown transport errors get the same notice.
 			const notifyDeleteError = ( source: unknown ) =>
-				setNotice( {
-					status: 'error',
-					message: sprintf(
+				notify(
+					sprintf(
 						/* translators: %s: VideoPress API error. */
 						__( 'Track error: %s', 'jetpack-videopress-pkg' ),
 						getTrackApiErrorMessage(
 							source,
 							__( 'Unable to delete track.', 'jetpack-videopress-pkg' )
 						)
-					),
-				} );
+					)
+				);
 
 			try {
 				const response = await deleteTrackForGuid( track, guid );
@@ -376,7 +359,7 @@ export function useTrackMutations( {
 				setDeletingTrackKey( null );
 			}
 		},
-		[ applyTracksChange, guid, managedTracks, setNotice ]
+		[ applyTracksChange, guid, managedTracks, notify ]
 	);
 
 	/**
@@ -387,22 +370,18 @@ export function useTrackMutations( {
 	const deleteDraftTrack = useCallback(
 		async ( captionTrack: SavedCaptionTrack ) => {
 			setDeletingTrackKey( getStoredCaptionTrackKey( captionTrack ) );
-			setNotice( null );
 
 			try {
 				await deleteCaptionTrack( captionTrack.id );
 				setCaptionTracks( current => current.filter( item => item.id !== captionTrack.id ) );
 			} catch ( deleteError ) {
 				debug( 'delete caption draft error', deleteError );
-				setNotice( {
-					status: 'error',
-					message: __( 'Unable to delete the subtitle draft.', 'jetpack-videopress-pkg' ),
-				} );
+				notify( __( 'Unable to delete the subtitle draft.', 'jetpack-videopress-pkg' ) );
 			} finally {
 				setDeletingTrackKey( null );
 			}
 		},
-		[ setCaptionTracks, setNotice ]
+		[ notify, setCaptionTracks ]
 	);
 
 	/**
@@ -414,15 +393,11 @@ export function useTrackMutations( {
 		async ( track: VideoTextTrack ) => {
 			const key = getTrackKey( track );
 			setDownloadingTrackKey( key );
-			setNotice( null );
 
 			try {
 				const content = await fetchTrackContentForGuid( track, guid, isPrivate );
 				if ( ! content ) {
-					setNotice( {
-						status: 'error',
-						message: __( 'Unable to download track content.', 'jetpack-videopress-pkg' ),
-					} );
+					notify( __( 'Unable to download track content.', 'jetpack-videopress-pkg' ) );
 					return;
 				}
 
@@ -440,15 +415,12 @@ export function useTrackMutations( {
 				setTimeout( () => window.URL.revokeObjectURL( url ), 0 );
 			} catch ( downloadError ) {
 				debug( 'download track error', downloadError );
-				setNotice( {
-					status: 'error',
-					message: __( 'Unable to download track content.', 'jetpack-videopress-pkg' ),
-				} );
+				notify( __( 'Unable to download track content.', 'jetpack-videopress-pkg' ) );
 			} finally {
 				setDownloadingTrackKey( null );
 			}
 		},
-		[ guid, isPrivate, setNotice ]
+		[ guid, isPrivate, notify ]
 	);
 
 	return {

From 2c83f1aebf77a5b505c1c18db0349e6e969a7000 Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@gmx.de>
Date: Fri, 10 Jul 2026 19:00:21 -0500
Subject: [PATCH 2/2] VideoPress: Clear caption snackbars on modal open
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The caption manager modal returns null while closed but stays mounted, so
its snackbar state survives close→reopen. An undismissed outcome or error
snackbar would reappear on the next open. Clear the list in the open-reset
effect, alongside the existing validation-notice reset.

Claude-Session: https://claude.ai/code/session_01R3bxjgvnb5f8KG4PuRksGg
---
 .../src/client/components/caption-manager-modal/index.tsx | 5 +++--
 .../caption-manager-modal/use-caption-snackbars.ts        | 8 ++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx b/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx
index 7d3a91cf1bc5..bed9bca5f843 100644
--- a/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/index.tsx
@@ -155,7 +155,7 @@ function CaptionManagerModalInner( {
 	// Sticky, inline error for form-validation the current action can't proceed past.
 	const [ validationNotice, setValidationNotice ] = useState< string | null >( null );
 	// Transient snackbars for outcomes and async failures; see use-caption-snackbars.ts.
-	const { snackbars, notify, removeSnackbar } = useCaptionSnackbars();
+	const { snackbars, notify, removeSnackbar, clearSnackbars } = useCaptionSnackbars();
 	const [ confirmation, setConfirmation ] = useState< ConfirmationState | null >( null );
 	// Whether the manual editor holds unsaved track edits; reported by the
 	// editor on transitions and reset with each new workspace instance.
@@ -235,8 +235,9 @@ function CaptionManagerModalInner( {
 		if ( isOpen ) {
 			resetToTrackList();
 			setConfirmation( null );
+			clearSnackbars();
 		}
-	}, [ isOpen, resetToTrackList ] );
+	}, [ isOpen, resetToTrackList, clearSnackbars ] );
 
 	/*
 	 * The discard confirmation only guards in-modal navigation; this guards the
diff --git a/projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts b/projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts
index ec857f05cda6..0de2a9e1aa7e 100644
--- a/projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts
+++ b/projects/packages/videopress/src/client/components/caption-manager-modal/use-caption-snackbars.ts
@@ -14,7 +14,7 @@ export type CaptionSnackbar = {
  * Snackbar component after its timeout. Success confirmations and async/API
  * failures announce here; form-validation errors stay inline instead.
  *
- * @return The snackbar list plus its add and remove callbacks.
+ * @return The snackbar list plus its add, remove, and clear callbacks.
  */
 export function useCaptionSnackbars() {
 	const [ snackbars, setSnackbars ] = useState< CaptionSnackbar[] >( [] );
@@ -31,5 +31,9 @@ export function useCaptionSnackbars() {
 		setSnackbars( current => current.filter( snackbar => snackbar.id !== id ) );
 	}, [] );
 
-	return { snackbars, notify, removeSnackbar };
+	// Drop every bubble at once. The modal stays mounted while closed, so
+	// undismissed snackbars would otherwise reappear on the next open.
+	const clearSnackbars = useCallback( () => setSnackbars( [] ), [] );
+
+	return { snackbars, notify, removeSnackbar, clearSnackbars };
 }