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

Author: ShotaroKataoka

packages/web/public/locales/translation/en.yaml

@@ -433,6 +433,11 @@ diagram:
       desc: XY charts show relationships between two variables
       exampleTitle: Sleep vs Work Hours Example
       title: XY Chart
+dialog:
+  unsavedChanges:
+    leave: Leave
+    message: If you leave this page, your input will be lost. Are you sure you want to leave?
+    title: Unsaved Changes
 drawer:
   ai_services: AI Services
   builder_mode: Builder Mode

packages/web/public/locales/translation/ja.yaml

@@ -371,6 +371,11 @@ diagram:
       desc: XYチャートは2つの変数間の関係を表現します
       exampleTitle: 睡眠・労働時間例
       title: XYチャート
+dialog:
+  unsavedChanges:
+    leave: 移動する
+    message: このページから移動すると、入力内容が失われます。本当に移動しますか？
+    title: 入力内容が保存されていません
 drawer:
   ai_services: AI サービス
   builder_mode: ビルダーモード

packages/web/public/locales/translation/ko.yaml

@@ -293,6 +293,11 @@ diagram:
       desc: XY 차트는 두 변수 간의 관계를 보여줍니다
       exampleTitle: 수면 vs 근무 시간 예시
       title: XY 차트
+dialog:
+  unsavedChanges:
+    leave: 이동
+    message: 이 페이지를 떠나면 입력한 내용이 손실됩니다. 정말 이동하시겠습니까?
+    title: 저장되지 않은 변경사항
 drawer:
   ai_services: AI 서비스
   builder_mode: 빌더 모드

packages/web/public/locales/translation/th.yaml

@@ -306,6 +306,11 @@ diagram:
       desc: XY chart แสดงความสัมพันธ์ระหว่างตัวแปรสองตัว
       exampleTitle: ตัวอย่างชั่วโมงนอนเทียบกับชั่วโมงทำงาน
       title: XY Chart
+dialog:
+  unsavedChanges:
+    leave: ออก
+    message: หากคุณออกจากหน้านี้ ข้อมูลที่ป้อนจะสูญหาย คุณแน่ใจหรือไม่ว่าต้องการออก?
+    title: การเปลี่ยนแปลงที่ยังไม่ได้บันทึก
 drawer:
   ai_services: บริการ AI
   builder_mode: Builder Mode

packages/web/public/locales/translation/vi.yaml

@@ -304,6 +304,11 @@ diagram:
       desc: XY chart thể hiện mối quan hệ giữa hai biến
       exampleTitle: Ví dụ thời gian ngủ・làm việc
       title: XY Chart
+dialog:
+  unsavedChanges:
+    leave: Rời khỏi
+    message: Nếu bạn rời khỏi trang này, nội dung đã nhập sẽ bị mất. Bạn có chắc chắn muốn rời khỏi?
+    title: Thay đổi chưa được lưu
 drawer:
   ai_services: Dịch vụ AI
   builder_mode: Chế độ builder

packages/web/public/locales/translation/zh.yaml

@@ -230,6 +230,11 @@ diagram:
       desc: XY图表表示两个变量之间的关系
       exampleTitle: 睡眠-工作时间示例
       title: XY图表
+dialog:
+  unsavedChanges:
+    leave: 离开
+    message: 如果离开此页面，您输入的内容将丢失。确定要离开吗？
+    title: 未保存的更改
 drawer:
   ai_services: AI 服务
   builder_mode: 构建者模式

packages/web/src/components/MeetingMinutes/MeetingMinutesRealtimeTranslation.tsx

@@ -78,11 +78,16 @@ interface RealtimeSegment {
 interface MeetingMinutesRealtimeTranslationProps {
   /** Callback when transcript text changes */
   onTranscriptChange?: (text: string) => void;
+  /** Callback when recording state changes */
+  onRecordingStateChange?: (state: {
+    micRecording: boolean;
+    screenRecording: boolean;
+  }) => void;
 }
 
 const MeetingMinutesRealtimeTranslation: React.FC<
   MeetingMinutesRealtimeTranslationProps
-> = ({ onTranscriptChange }) => {
+> = ({ onTranscriptChange, onRecordingStateChange }) => {
   const { t } = useTranslation();
   const transcriptContainerRef = useRef<HTMLDivElement>(null);
   const isAtBottomRef = useRef<boolean>(true);
@@ -109,6 +114,14 @@ const MeetingMinutesRealtimeTranslation: React.FC<
     rawTranscripts: screenRawTranscripts,
   } = useScreenAudio();
 
+  // Notify parent component of recording state changes
+  useEffect(() => {
+    onRecordingStateChange?.({
+      micRecording,
+      screenRecording,
+    });
+  }, [micRecording, screenRecording, onRecordingStateChange]);
+
   // Internal state management
   const [primaryLanguage, setPrimaryLanguage] = useState('en-US');
   const [speakerLabel, setSpeakerLabel] = useState(false);

packages/web/src/components/MeetingMinutes/MeetingMinutesTranscription.tsx

@@ -36,11 +36,16 @@ interface TranscriptionSegment {
 interface MeetingMinutesTranscriptionProps {
   /** Callback when transcript text changes */
   onTranscriptChange?: (text: string) => void;
+  /** Callback when recording state changes */
+  onRecordingStateChange?: (state: {
+    micRecording: boolean;
+    screenRecording: boolean;
+  }) => void;
 }
 
 const MeetingMinutesTranscription: React.FC<
   MeetingMinutesTranscriptionProps
-> = ({ onTranscriptChange }) => {
+> = ({ onTranscriptChange, onRecordingStateChange }) => {
   const { t, i18n } = useTranslation();
   const transcriptContainerRef = useRef<HTMLDivElement>(null);
   const isAtBottomRef = useRef<boolean>(true);
@@ -65,6 +70,14 @@ const MeetingMinutesTranscription: React.FC<
     rawTranscripts: screenRawTranscripts,
   } = useScreenAudio();
 
+  // Notify parent component of recording state changes
+  useEffect(() => {
+    onRecordingStateChange?.({
+      micRecording,
+      screenRecording,
+    });
+  }, [micRecording, screenRecording, onRecordingStateChange]);
+
   // Internal state management
   const [languageCode, setLanguageCode] = useState('auto');
   const [speakerLabel, setSpeakerLabel] = useState(false);

packages/web/src/components/NavigationBlockDialog.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import ModalDialog from './ModalDialog';
+import Button from './Button';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  isOpen: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+};
+
+const NavigationBlockDialog: React.FC<Props> = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <ModalDialog
+      isOpen={isOpen}
+      title={t('dialog.unsavedChanges.title')}
+      onClose={onCancel}>
+      <div className="flex flex-col gap-4">
+        <div>{t('dialog.unsavedChanges.message')}</div>
+        <div className="flex justify-end gap-2">
+          <Button onClick={onCancel} className="p-2">
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={onConfirm} className="bg-red-500 p-2">
+            {t('dialog.unsavedChanges.leave')}
+          </Button>
+        </div>
+      </div>
+    </ModalDialog>
+  );
+};
+
+export default NavigationBlockDialog;

packages/web/src/hooks/usePreventNavigation.ts

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { useBlocker } from 'react-router-dom';
+
+interface UsePreventNavigationOptions {
+  /** Block app-internal navigation (sidebar links, back button). Default: true */
+  blockInternalNavigation?: boolean;
+  /** Block browser operations (reload, close tab). Default: true */
+  blockBrowserNavigation?: boolean;
+}
+
+/**
+ * Prevents page navigation when there are unsaved changes
+ * @param hasUnsavedChanges - Boolean indicating if there are unsaved changes
+ * @param options - Customization options for blocking behavior
+ * @returns Blocker object from useBlocker
+ */
+const usePreventNavigation = (
+  hasUnsavedChanges: boolean,
+  options: UsePreventNavigationOptions = {}
+) => {
+  const { blockInternalNavigation = true, blockBrowserNavigation = true } =
+    options;
+
+  // Block app-internal navigation (sidebar links, back button)
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      blockInternalNavigation &&
+      hasUnsavedChanges &&
+      currentLocation.pathname !== nextLocation.pathname
+  );
+
+  // Block browser operations (reload, close tab, navigate to external URL)
+  useEffect(() => {
+    if (!blockBrowserNavigation || !hasUnsavedChanges) return;
+
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = '';
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [hasUnsavedChanges, blockBrowserNavigation]);
+
+  return blocker;
+};
+
+export default usePreventNavigation;