fix: remove diff component mounting error - fixes modal animation for diffs

frontend/src/components/settings/git/ChangeRow.jsx

@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import {
     Eye,
-    Loader,
     Plus,
     MinusCircle,
     Edit,
@@ -13,14 +12,17 @@ import {
     File
 } from 'lucide-react';
 import Tooltip from '../../ui/Tooltip';
-import {getDiff} from '../../../api/api';
-import Alert from '../../ui/Alert';
-import Diff from './modal/ViewDiff';
+import ViewDiff from './modal/ViewDiff';
 
-const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => {
-    const [loadingDiff, setLoadingDiff] = useState(false);
+const ChangeRow = ({
+    change,
+    isSelected,
+    onSelect,
+    isIncoming,
+    isDevMode,
+    diffContent
+}) => {
     const [showDiff, setShowDiff] = useState(false);
-    const [diffContent, setDiffContent] = useState('');
 
     const getStatusIcon = status => {
         switch (status) {
@@ -55,24 +57,9 @@ const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => {
         }
     };
 
-    const handleViewDiff = async () => {
-        setLoadingDiff(true);
-        try {
-            const response = await getDiff(change.file_path);
-            if (response.success) {
-                setDiffContent(response.diff);
-                setShowDiff(true);
-            } else {
-                Alert.error(response.error);
-            }
-        } catch (error) {
-            Alert.error(
-                'An unexpected error occurred while fetching the diff.'
-            );
-            console.error('Error fetching diff:', error);
-        } finally {
-            setLoadingDiff(false);
-        }
+    const handleViewDiff = e => {
+        e.stopPropagation();
+        setShowDiff(true);
     };
 
     return (
@@ -104,20 +91,11 @@ const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => {
                 <td className='px-4 py-2 text-left align-middle'>
                     <Tooltip content='View differences'>
                         <button
-                            onClick={e => {
-                                e.stopPropagation();
-                                handleViewDiff();
-                            }}
+                            onClick={handleViewDiff}
                             className='flex items-center justify-center px-2 py-1 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors text-xs'
                             style={{width: '100%'}}>
-                            {loadingDiff ? (
-                                <Loader size={12} className='animate-spin' />
-                            ) : (
-                                <>
-                                    <Eye size={12} className='mr-1' />
-                                    View Diff
-                                </>
-                            )}
+                            <Eye size={12} className='mr-1' />
+                            View Diff
                         </button>
                     </Tooltip>
                 </td>
@@ -130,17 +108,16 @@ const ChangeRow = ({change, isSelected, onSelect, isIncoming, isDevMode}) => {
                     />
                 </td>
             </tr>
-            {showDiff && (
-                <Diff
-                    isOpen={showDiff}
-                    onClose={() => setShowDiff(false)}
-                    diffContent={diffContent}
-                    type={change.type}
-                    name={change.name}
-                    commitMessage={change.commit_message}
-                    isDevMode={isDevMode}
-                />
-            )}
+            <ViewDiff
+                key={`${change.file_path}-diff`}
+                isOpen={showDiff}
+                onClose={() => setShowDiff(false)}
+                diffContent={diffContent}
+                type={change.type}
+                name={change.name}
+                commitMessage={change.commit_message}
+                isDevMode={isDevMode}
+            />
         </>
     );
 };

frontend/src/components/settings/git/ChangeTable.jsx

@@ -11,7 +11,8 @@ const ChangeTable = ({
     onSelectChange,
     sortConfig,
     onRequestSort,
-    isDevMode
+    isDevMode,
+    diffContents
 }) => {
     const sortedChanges = changesArray => {
         if (!sortConfig.key) return changesArray;
@@ -94,6 +95,7 @@ const ChangeTable = ({
                                 }
                                 isIncoming={isIncoming}
                                 isDevMode={isDevMode}
+                                diffContent={diffContents[change.file_path]}
                             />
                         ))}
                     </tbody>

frontend/src/components/settings/git/StatusContainer.jsx

@@ -4,6 +4,7 @@ import ChangeTable from './ChangeTable';
 import CommitSection from './CommitMessage';
 import {getRandomMessage, noChangesMessages} from '../../../utils/messages';
 import ActionButtons from './ActionButtons';
+import {getDiff} from '../../../api/api';
 
 const StatusContainer = ({
     status,
@@ -23,6 +24,7 @@ const StatusContainer = ({
     const [commitMessage, setCommitMessage] = useState('');
     const [selectionType, setSelectionType] = useState(null);
     const [noChangesMessage, setNoChangesMessage] = useState('');
+    const [diffContents, setDiffContents] = useState({});
 
     const requestSort = key => {
         let direction = 'ascending';
@@ -107,6 +109,28 @@ const StatusContainer = ({
     };
 
     useEffect(() => {
+        const fetchDiffs = async () => {
+            const allChanges = [
+                ...status.incoming_changes,
+                ...status.outgoing_changes
+            ];
+            const diffPromises = allChanges.map(change =>
+                getDiff(change.file_path)
+            );
+            const diffs = await Promise.all(diffPromises);
+
+            const newDiffContents = {};
+            allChanges.forEach((change, index) => {
+                if (diffs[index].success) {
+                    newDiffContents[change.file_path] = diffs[index].diff;
+                }
+            });
+
+            setDiffContents(newDiffContents);
+        };
+
+        fetchDiffs();
+
         if (
             status.incoming_changes.length === 0 &&
             status.outgoing_changes.length === 0
@@ -174,6 +198,7 @@ const StatusContainer = ({
                     sortConfig={sortConfig}
                     onRequestSort={requestSort}
                     isDevMode={isDevMode}
+                    diffContents={diffContents}
                 />
             )}
 
@@ -193,6 +218,7 @@ const StatusContainer = ({
                     sortConfig={sortConfig}
                     onRequestSort={requestSort}
                     isDevMode={isDevMode}
+                    diffContents={diffContents}
                 />
             )}
 

frontend/src/components/settings/git/modal/ViewDiff.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../../ui/Modal';
 
-const Diff = ({
+const ViewDiff = ({
     isOpen,
     onClose,
     diffContent,
@@ -57,16 +57,6 @@ const Diff = ({
                             {name === 'Deleted File' ? 'Deleted File' : name}
                         </span>
                     </div>
-                    {commitMessage && (
-                        <div className='flex flex-col'>
-                            <span className='font-medium text-gray-600 dark:text-gray-300 mb-1'>
-                                Commit Message:
-                            </span>
-                            <p className='bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 p-2 rounded'>
-                                {commitMessage}
-                            </p>
-                        </div>
-                    )}
                 </div>
                 <div className='border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden'>
                     <div className='bg-gray-50 dark:bg-gray-800 p-2 text-sm font-medium text-gray-600 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600'>
@@ -87,7 +77,7 @@ const Diff = ({
     );
 };
 
-Diff.propTypes = {
+ViewDiff.propTypes = {
     isOpen: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     diffContent: PropTypes.string,
@@ -97,4 +87,4 @@ Diff.propTypes = {
     title: PropTypes.string
 };
 
-export default Diff;
+export default ViewDiff;