Add overwrite mechanism for conflicting writes of files

1 files changed, 7 insertions, 3 deletions

diff --git a/makima/frontend/src/routes/files.tsx b/makima/frontend/src/routes/files.tsx
index 423baa1..037df7e 100644
--- a/makima/frontend/src/routes/files.tsx
+++ b/makima/frontend/src/routes/files.tsx
@@ -22,6 +22,7 @@ export default function FilesPage() {
   const [creating, setCreating] = useState(false);
   const [remoteUpdate, setRemoteUpdate] = useState<FileUpdateEvent | null>(null);
   const [hasLocalChanges, setHasLocalChanges] = useState(false);
+  const [isActivelyEditing, setIsActivelyEditing] = useState(false);
   const pendingUpdateRef = useRef(false);
 
   // Load file detail when URL has an id
@@ -48,8 +49,8 @@ export default function FilesPage() {
         return;
       }
 
-      // If no local changes, auto-refresh
-      if (!hasLocalChanges) {
+      // If no local changes and not actively editing, auto-refresh
+      if (!hasLocalChanges && !isActivelyEditing) {
         const detail = await fetchFile(event.fileId);
         setFileDetail(detail);
       } else {
@@ -57,7 +58,7 @@ export default function FilesPage() {
         setRemoteUpdate(event);
       }
     },
-    [hasLocalChanges, fetchFile]
+    [hasLocalChanges, isActivelyEditing, fetchFile]
   );
 
   // Subscribe to file updates
@@ -247,6 +248,9 @@ export default function FilesPage() {
                 onDelete={handleDelete}
                 onBodyElementUpdate={handleBodyElementUpdate}
                 onBodyReorder={handleBodyReorder}
+                onEditingChange={setIsActivelyEditing}
+                hasPendingRemoteUpdate={!!remoteUpdate}
+                onOverwrite={handleRemoteUpdateDismiss}
               />
             </div>
             <div className="shrink-0">