feat: Implement save conflict detection and resolution with a diff viewer for document edits.

Author: ChingEnLin

frontend/components/DocumentDetailView.tsx

@@ -3,6 +3,8 @@ import { useTheme } from '../contexts/ThemeContext';
 import { Button, CircularProgress } from '@mui/material';
 import MonacoEditor from '@monaco-editor/react';
 import { updateDocument, getSingleDocument } from '../services/dbService';
+import { isEqual, omit } from 'lodash';
+import SaveConflictDialog from './SaveConflictDialog';
 
 
 interface DocumentEditViewProps {
@@ -26,17 +28,47 @@ const DocumentEditView = forwardRef<DocumentEditViewRef, DocumentEditViewProps>(
   const [feedback, setFeedback] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
   const { theme } = useTheme();
   const [isSaving, setIsSaving] = useState(false);
+  const [isConflictDialogOpen, setIsConflictDialogOpen] = useState(false);
+  const [conflictServerDocStr, setConflictServerDocStr] = useState<string>('');
 
   useImperativeHandle(ref, () => ({
     getCurrentValue: () => jsonValue,
     setCurrentValue: (val: string) => setJsonValue(val)
   }));
 
-  const handleSave = async () => {
+  const handleSave = async (forceSave = false) => {
     setIsSaving(true);
     try {
       const parsed = JSON.parse(jsonValue);
       if (!accountId || !databaseName || !collection || !docId) throw new Error('Missing DB info');
+
+      if (!forceSave) {
+        // Fetch the latest document from DB
+        const refreshed = await getSingleDocument(accountId, databaseName, collection, docId);
+        
+        // Compare with the original document prop
+        const ignoredKeys = ['_id', 'datetime_creation', 'datetime_last_modified'];
+        const oldWithoutIgnored = omit(document, ignoredKeys);
+        const newWithoutIgnored = omit(refreshed, ignoredKeys);
+        
+        if (!isEqual(oldWithoutIgnored, newWithoutIgnored)) {
+          // Sync ignored fields to match user's expected view without highlighting them
+          const displayServerDoc = { ...refreshed };
+          ignoredKeys.forEach(key => {
+            if (key in parsed) {
+              displayServerDoc[key] = parsed[key];
+            } else {
+              delete displayServerDoc[key];
+            }
+          });
+          
+          setConflictServerDocStr(JSON.stringify(displayServerDoc, null, 2));
+          setIsConflictDialogOpen(true);
+          setIsSaving(false);
+          return;
+        }
+      }
+
       await updateDocument(accountId, databaseName, collection, docId, parsed);
       // Fetch the latest document after update
       const refreshed = await getSingleDocument(accountId, databaseName, collection, docId);
@@ -56,7 +88,7 @@ const DocumentEditView = forwardRef<DocumentEditViewRef, DocumentEditViewProps>(
       <div className="flex items-center justify-between mb-2">
         <h3 className="text-lg font-bold text-slate-800 dark:text-slate-100">Edit Document</h3>
         <div className="flex gap-2">
-          <Button variant="contained" color="success" size="small" onClick={handleSave} disabled={loading || isSaving} startIcon={isSaving ? <CircularProgress size={18} color="inherit" /> : undefined}>
+          <Button variant="contained" color="success" size="small" onClick={() => handleSave(false)} disabled={loading || isSaving} startIcon={isSaving ? <CircularProgress size={18} color="inherit" /> : undefined}>
             {isSaving ? 'Saving...' : 'Save'}
           </Button>
         </div>
@@ -96,6 +128,16 @@ const DocumentEditView = forwardRef<DocumentEditViewRef, DocumentEditViewProps>(
           {feedback.message}
         </div>
       )}
+      <SaveConflictDialog
+        open={isConflictDialogOpen}
+        serverValue={conflictServerDocStr}
+        localValue={jsonValue}
+        onClose={() => setIsConflictDialogOpen(false)}
+        onOverwrite={() => {
+          setIsConflictDialogOpen(false);
+          handleSave(true);
+        }}
+      />
     </div>
   );
 });

frontend/components/SaveConflictDialog.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import ReactDiffViewer from 'react-diff-viewer-continued';
+import { useTheme } from '../contexts/ThemeContext';
+import { WarningIcon } from './icons/material-icons-imports';
+
+interface SaveConflictDialogProps {
+  open: boolean;
+  serverValue: string; // The newly fetched data from server
+  localValue: string; // The user's current edited value
+  onClose: () => void;
+  onOverwrite: () => void;
+}
+
+const SaveConflictDialog: React.FC<SaveConflictDialogProps> = ({ open, serverValue, localValue, onClose, onOverwrite }) => {
+  const { theme } = useTheme();
+  
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 dark:bg-black/70 backdrop-blur-sm animate-fade-in-fast">
+      <div className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl max-w-5xl w-[90vw] flex flex-col overflow-hidden border border-slate-200 dark:border-slate-700 max-h-[90vh]">
+        <header className="px-6 py-4 border-b border-slate-200 dark:border-slate-700 bg-red-50 dark:bg-red-900/20 flex flex-col gap-1 flex-shrink-0">
+          <h2 className="text-xl font-bold text-red-600 dark:text-red-500 flex items-center gap-2">
+            <WarningIcon className="w-6 h-6" /> Save Conflict Detected
+          </h2>
+          <p className="text-sm text-slate-700 dark:text-slate-300 ml-8">
+            The document on the server has been modified since you started editing. 
+            If you save now, you will overwrite the server's changes with your own.
+          </p>
+        </header>
+
+        <div className="flex-1 overflow-auto p-4 bg-slate-50 dark:bg-slate-900">
+          <ReactDiffViewer
+             oldValue={serverValue}
+             newValue={localValue}
+             splitView={true}
+             useDarkTheme={theme === 'dark'}
+             leftTitle="Server Document"
+             rightTitle="Your Edits"
+             extraLinesSurroundingDiff={3}
+             styles={{
+               variables: {
+                 light: { diffViewerBackground: '#fff', addedBackground: '#e6ffed', removedBackground: '#ffeef0' },
+                 dark: { diffViewerBackground: '#1e293b', addedBackground: '#044B53', removedBackground: '#632F34', wordAddedBackground: '#055d67', wordRemovedBackground: '#7d3840' }
+               },
+               line: {
+                 fontSize: '13px',
+                 fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+               }
+             }}
+          />
+        </div>
+
+        <footer className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 flex justify-end gap-3 flex-shrink-0 bg-white dark:bg-slate-800">
+          <button
+            onClick={onClose}
+            className="px-5 py-2.5 rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors font-medium"
+          >
+            Cancel Save
+          </button>
+          <button
+            onClick={onOverwrite}
+            className="px-5 py-2.5 rounded-md border border-red-500 bg-red-500 text-white font-semibold hover:bg-red-600 transition-colors flex items-center gap-2"
+          >
+            <WarningIcon className="w-5 h-5 text-red-100" /> Force Overwrite Server
+          </button>
+        </footer>
+      </div>
+    </div>
+  );
+};
+
+export default SaveConflictDialog;