✨ feat(meeting-minutes-recording-protection): prevent navigation duri…

[ShotaroKataoka]

Description of Changes

This PR adds navigation protection to prevent accidental data loss during audio recording in the Meeting Minutes page.

Key Features

1. Generic Navigation Prevention Hook (usePreventNavigation)

• Blocks app-internal navigation (sidebar links, back button) using React Router's useBlocker
• Blocks browser operations (reload, close tab) using beforeunload event
• Customizable options:
  • blockInternalNavigation: Enable/disable internal navigation blocking (default: true)
  • blockBrowserNavigation: Enable/disable browser operation blocking (default: true)

2. Custom Confirmation Dialog (NavigationBlockDialog)

• User-friendly dialog with Cancel/Leave buttons
• Fully internationalized (en, ja, ko, th, vi, zh)
• Consistent UI with existing modal components

3. Meeting Minutes Page Integration

• Tracks recording state from both Transcription and Realtime Translation components
• Shows confirmation dialog when user attempts to navigate away during recording
• Prevents accidental loss of recording data

Implementation Details

• Recording state is managed in the parent component (MeetingMinutesPage)
• Child components notify parent of recording state changes via callback
• Navigation blocking is activated only when recording is in progress

Known Limitations

Browser reload cancellation cannot restore media streams

• When the browser's beforeunload dialog is shown and the user clicks "Cancel", the recording stops anyway
• This is a browser limitation: media streams are cleaned up when beforeunload fires, before the user makes a choice
• App-internal navigation (sidebar, back button) works correctly and preserves recording state

Impact on Existing Users

No breaking changes or compatibility issues

• New components and hooks are opt-in
• Existing functionality remains unchanged
• No impact on users not using the Meeting Minutes recording feature

Future Extensibility

This implementation is designed to be reusable for other pages:

// Example: Chat page - block only reload
const blocker = usePreventNavigation(hasUnsavedInput, {
 blockInternalNavigation: false,
 blockBrowserNavigation: true,
});

// Example: Form page - block only internal navigation
const blocker = usePreventNavigation(isDirty, {
 blockInternalNavigation: true,
 blockBrowserNavigation: false,
});

Checklist

• Modified relevant documentation (added i18n translations)
• Verified operation in local environment (tested on Chrome and Edge)
• Executed npm run cdk:test (no CDK changes in this PR)