(feat:sync) confirmation check

frontend/src/components/ConnectorTreeComponent.tsx

@@ -3,8 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { formatBytes } from '../utils/stringUtils';
 import { selectToken } from '../preferences/preferenceSlice';
+import { ActiveState } from '../models/misc';
 import Chunks from './Chunks';
 import ContextMenu, { MenuOption } from './ContextMenu';
+import ConfirmationModal from '../modals/ConfirmationModal';
 import userService from '../api/services/userService';
 import FileIcon from '../assets/file.svg';
 import FolderIcon from '../assets/folder.svg';
@@ -12,6 +14,7 @@ import ArrowLeft from '../assets/arrow-left.svg';
 import ThreeDots from '../assets/three-dots.svg';
 import EyeView from '../assets/eye-view.svg';
 import SyncIcon from '../assets/sync.svg';
+import CheckmarkIcon from '../assets/checkMark2.svg';
 import { useOutsideAlerter } from '../hooks';
 
 interface FileNode {
@@ -64,6 +67,7 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
   const [syncProgress, setSyncProgress] = useState<number>(0);
   const [sourceProvider, setSourceProvider] = useState<string>('');
   const [syncDone, setSyncDone] = useState<boolean>(false);
+  const [syncConfirmationModal, setSyncConfirmationModal] = useState<ActiveState>('INACTIVE');
 
   useOutsideAlerter(
     searchDropdownRef,
@@ -345,7 +349,7 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
 
           {/* Sync button */}
           <button
-            onClick={handleSync}
+            onClick={() => setSyncConfirmationModal('ACTIVE')}
             disabled={isSyncing}
             className={`flex h-[38px] min-w-[108px] items-center justify-center rounded-full px-4 text-[14px] font-medium whitespace-nowrap transition-colors ${
               isSyncing
@@ -361,7 +365,7 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
             }
           >
             <img
-              src={SyncIcon}
+              src={syncDone ? CheckmarkIcon : SyncIcon}
               alt={t('settings.sources.sync')}
               className={`mr-2 h-4 w-4 brightness-0 invert filter ${isSyncing ? 'animate-spin' : ''}`}
             />
@@ -726,6 +730,17 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
           </div>
         </div>
       )}
+
+      <ConfirmationModal
+        message={t('settings.sources.syncConfirmation', {
+          sourceName,
+        })}
+        modalState={syncConfirmationModal}
+        setModalState={setSyncConfirmationModal}
+        handleSubmit={handleSync}
+        submitLabel={t('settings.sources.sync')}
+        cancelLabel={t('cancel')}
+      />
     </div>
   );
 };

frontend/src/locale/en.json

@@ -68,6 +68,7 @@
       "private": "Private",
       "sync": "Sync",
       "syncing": "Syncing...",
+      "syncConfirmation": "Are you sure you want to sync \"{{sourceName}}\"? This will update the content with your cloud storage and may override any edits you made to individual chunks.",
       "syncFrequency": {
         "never": "Never",
         "daily": "Daily",

frontend/src/locale/es.json

@@ -68,6 +68,7 @@
       "private": "Privado",
       "sync": "Sincronizar",
       "syncing": "Sincronizando...",
+      "syncConfirmation": "¿Estás seguro de que deseas sincronizar \"{{sourceName}}\"? Esto actualizará el contenido con tu almacenamiento en la nube y puede anular cualquier edición que hayas realizado en fragmentos individuales.",
       "syncFrequency": {
         "never": "Nunca",
         "daily": "Diario",

frontend/src/locale/jp.json

@@ -68,6 +68,7 @@
       "private": "プライベート",
       "sync": "同期",
       "syncing": "同期中...",
+      "syncConfirmation": "\"{{sourceName}}\"を同期してもよろしいですか？これにより、コンテンツがクラウドストレージで更新され、個々のチャンクに加えた編集が上書きされる可能性があります。",
       "syncFrequency": {
         "never": "なし",
         "daily": "毎日",

frontend/src/locale/ru.json

@@ -68,6 +68,7 @@
       "private": "Частный",
       "sync": "Синхронизация",
       "syncing": "Синхронизация...",
+      "syncConfirmation": "Вы уверены, что хотите синхронизировать \"{{sourceName}}\"? Это обновит содержимое с вашим облачным хранилищем и может перезаписать любые изменения, внесенные вами в отдельные фрагменты.",
       "syncFrequency": {
         "never": "Никогда",
         "daily": "Ежедневно",

frontend/src/locale/zh-TW.json

@@ -68,6 +68,7 @@
       "private": "私人",
       "sync": "同步",
       "syncing": "同步中...",
+      "syncConfirmation": "您確定要同步 \"{{sourceName}}\" 嗎？這將使用您的雲端儲存更新內容，並可能覆蓋您對個別文本塊所做的任何編輯。",
       "syncFrequency": {
         "never": "從不",
         "daily": "每天",

frontend/src/locale/zh.json

@@ -68,6 +68,7 @@
       "private": "私有",
       "sync": "同步",
       "syncing": "同步中...",
+      "syncConfirmation": "您确定要同步 \"{{sourceName}}\" 吗？这将使用您的云存储更新内容，并可能覆盖您对单个文本块所做的任何编辑。",
       "syncFrequency": {
         "never": "从不",
         "daily": "每天",