collabmd 0.1.20 → 0.1.23

package/src/client/presentation/excalidraw-embed-controller.js

@@ -77,6 +77,8 @@ export class ExcalidrawEmbedController {
     this.maximizedRoot = null;
     this.placeholderObserver = null;
     this.followedPeerIdsByFilePath = new Map();
+    this.pendingDisconnectRequests = new Map();
+    this.disconnectRequestCounter = 0;
 
     this._onMessage = this._onMessage.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
@@ -104,6 +106,10 @@ export class ExcalidrawEmbedController {
       entry.placeholder = null;
     });
     this.embedEntries.clear();
+    this.pendingDisconnectRequests.forEach((request) => {
+      request.resolve(false);
+    });
+    this.pendingDisconnectRequests.clear();
     this.followedPeerIdsByFilePath.clear();
     this.overlayRoot?.remove();
     this.overlayRoot = null;
@@ -242,6 +248,43 @@ export class ExcalidrawEmbedController {
     });
   }
 
+  prepareFileDisconnect(filePath, { timeoutMs = 250 } = {}) {
+    const entry = this._findEntryByFilePath(filePath);
+    if (!entry?.iframe?.contentWindow) {
+      return Promise.resolve(false);
+    }
+
+    const requestId = `disconnect-${++this.disconnectRequestCounter}`;
+    return new Promise((resolve) => {
+      const finish = (value) => {
+        if (!this.pendingDisconnectRequests.has(requestId)) {
+          return;
+        }
+
+        const request = this.pendingDisconnectRequests.get(requestId);
+        window.clearTimeout(request.timeoutId);
+        this.pendingDisconnectRequests.delete(requestId);
+        resolve(value);
+      };
+
+      const timeoutId = window.setTimeout(() => {
+        finish(false);
+      }, timeoutMs);
+
+      this.pendingDisconnectRequests.set(requestId, {
+        entry,
+        resolve: finish,
+        timeoutId,
+      });
+
+      this._postMessageToEntry(entry, {
+        source: 'collabmd-host',
+        type: 'prepare-disconnect',
+        requestId,
+      });
+    });
+  }
+
   _ensurePlaceholderObserver() {
     if (!this.previewContainer) {
       return;
@@ -422,6 +465,13 @@ export class ExcalidrawEmbedController {
   }
 
   _destroyEntry(entry) {
+    this.pendingDisconnectRequests.forEach((request, requestId) => {
+      if (request.entry === entry) {
+        request.resolve(false);
+        this.pendingDisconnectRequests.delete(requestId);
+      }
+    });
+
     if (this.maximizedEmbed?.wrapper === entry.wrapper) {
       this._exitMaximizedEmbed();
     }
@@ -588,14 +638,14 @@ export class ExcalidrawEmbedController {
 
     const openBtn = document.createElement('button');
     openBtn.type = 'button';
-    openBtn.className = 'excalidraw-embed-btn diagram-preview-action-btn';
+    openBtn.className = 'excalidraw-embed-btn ui-preview-action ui-preview-action--icon-only';
     openBtn.title = 'Edit in Excalidraw';
     openBtn.setAttribute('aria-label', 'Edit in Excalidraw');
     setDiagramActionButtonIcon(openBtn, 'edit');
 
     const maxBtn = document.createElement('button');
     maxBtn.type = 'button';
-    maxBtn.className = 'excalidraw-embed-btn diagram-preview-action-btn';
+    maxBtn.className = 'excalidraw-embed-btn ui-preview-action ui-preview-action--icon-only';
     maxBtn.title = 'Maximize diagram';
     maxBtn.setAttribute('aria-label', 'Maximize diagram');
     setDiagramActionButtonIcon(maxBtn, 'maximize');
@@ -915,6 +965,14 @@ export class ExcalidrawEmbedController {
     if (msg.type === 'error') {
       entry.isReady = false;
       void this._handleEntryBootTimeout(entry);
+      return;
+    }
+
+    if (msg.type === 'disconnect-ready') {
+      const request = this.pendingDisconnectRequests.get(msg.requestId);
+      if (request?.entry === entry) {
+        request.resolve(true);
+      }
     }
   }
 

package/src/client/presentation/file-explorer-controller.js

@@ -54,13 +54,20 @@ export class FileExplorerController {
   async refresh() {
     try {
       const data = await this.vaultClient.readTree();
-      this.state.setTree(data.tree || []);
-      this.renderTree();
+      this.setTree(data.tree || []);
     } catch (error) {
       console.error('[explorer] Failed to load file tree:', error.message);
     }
   }
 
+  setTree(tree, {
+    changedPaths = null,
+    reset = false,
+  } = {}) {
+    this.state.setTree(tree);
+    this.renderTree({ changedPaths, reset });
+  }
+
   setActiveFile(filePath) {
     this.state.setActiveFile(filePath);
     this.renderTree();
@@ -74,10 +81,15 @@ export class FileExplorerController {
     return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
   }
 
-  renderTree() {
+  renderTree({
+    changedPaths = null,
+    reset = false,
+  } = {}) {
     this.view.render({
       activeFilePath: this.state.activeFilePath,
+      changedPaths,
       expandedDirs: this.state.expandedDirs,
+      reset,
       searchMatches: this.state.getSearchMatches(),
       searchQuery: this.state.searchQuery,
       tree: this.state.tree,

package/src/client/presentation/file-explorer-view.js

@@ -12,6 +12,29 @@ function getPathLeaf(path) {
     .pop() || '';
 }
 
+function getParentPath(pathValue) {
+  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
+  const separatorIndex = normalized.lastIndexOf('/');
+  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
+}
+
+function findNodeByPath(nodes = [], pathValue = '') {
+  for (const node of nodes) {
+    if (node.path === pathValue) {
+      return node;
+    }
+
+    if (node.type === 'directory' && Array.isArray(node.children)) {
+      const nested = findNodeByPath(node.children, pathValue);
+      if (nested) {
+        return nested;
+      }
+    }
+  }
+
+  return null;
+}
+
 export class FileExplorerView {
   constructor({
     onDirectoryToggle,
@@ -27,6 +50,9 @@ export class FileExplorerView {
     this.onTreeContextMenu = onTreeContextMenu;
     this.treeContainer = document.getElementById('fileTree');
     this.searchInput = document.getElementById('fileSearchInput');
+    this.renderedDirectoryWrappers = new Map();
+    this.renderedChildContainers = new Map();
+    this.lastRenderMode = 'tree';
   }
 
   initialize() {
@@ -44,30 +70,62 @@ export class FileExplorerView {
     });
   }
 
-  render({ activeFilePath, expandedDirs, searchMatches, searchQuery, tree }) {
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
     if (!this.treeContainer) {
       return;
     }
 
     if (searchQuery) {
+      this.lastRenderMode = 'search';
       this.renderSearchResults(searchMatches, activeFilePath);
       return;
     }
 
-    this.treeContainer.innerHTML = '';
+    if (
+      reset
+      || this.lastRenderMode !== 'tree'
+      || !Array.isArray(changedPaths)
+      || changedPaths.length === 0
+    ) {
+      this.renderFullTree(tree, {
+        activeFilePath,
+        expandedDirs,
+      });
+      this.lastRenderMode = 'tree';
+      return;
+    }
 
-    if (tree.length === 0) {
-      this.treeContainer.innerHTML = '<div class="file-tree-empty">No vault files found</div>';
+    const affectedParentPaths = Array.from(new Set(
+      changedPaths.map((pathValue) => getParentPath(pathValue)),
+    ))
+      .sort((left, right) => left.split('/').length - right.split('/').length)
+      .filter((pathValue, index, values) => (
+        !values.slice(0, index).some((ancestorPath) => ancestorPath && pathValue.startsWith(`${ancestorPath}/`))
+      ));
+    if (affectedParentPaths.includes('')) {
+      this.renderFullTree(tree, {
+        activeFilePath,
+        expandedDirs,
+      });
+      this.lastRenderMode = 'tree';
       return;
     }
 
-    const fragment = document.createDocumentFragment();
-    this.renderNodes(tree, fragment, {
-      activeFilePath,
-      depth: 0,
-      expandedDirs,
-    });
-    this.treeContainer.appendChild(fragment);
+    for (const parentPath of affectedParentPaths) {
+      if (!this.rerenderDirectoryBranch(parentPath, tree, {
+        activeFilePath,
+        expandedDirs,
+      })) {
+        this.renderFullTree(tree, {
+          activeFilePath,
+          expandedDirs,
+        });
+        this.lastRenderMode = 'tree';
+        return;
+      }
+    }
+
+    this.lastRenderMode = 'tree';
   }
 
   renderSearchResults(matches, activeFilePath) {
@@ -75,6 +133,7 @@ export class FileExplorerView {
       return;
     }
 
+    this.resetTreeIndexes();
     this.treeContainer.innerHTML = '';
 
     if (matches.length === 0) {
@@ -95,6 +154,29 @@ export class FileExplorerView {
     this.treeContainer.appendChild(fragment);
   }
 
+  renderFullTree(tree, { activeFilePath, expandedDirs }) {
+    this.resetTreeIndexes();
+    this.treeContainer.innerHTML = '';
+
+    if (tree.length === 0) {
+      this.treeContainer.innerHTML = '<div class="file-tree-empty">No vault files found</div>';
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+    this.renderNodes(tree, fragment, {
+      activeFilePath,
+      depth: 0,
+      expandedDirs,
+    });
+    this.treeContainer.appendChild(fragment);
+  }
+
+  resetTreeIndexes() {
+    this.renderedDirectoryWrappers.clear();
+    this.renderedChildContainers.clear();
+  }
+
   renderNodes(nodes, container, { activeFilePath, depth, expandedDirs }) {
     for (const node of nodes) {
       if (node.type === 'directory') {
@@ -142,21 +224,80 @@ export class FileExplorerView {
     });
 
     wrapper.appendChild(button);
+    this.renderedDirectoryWrappers.set(node.path, wrapper);
 
     if (isExpanded && Array.isArray(node.children)) {
       const childContainer = document.createElement('div');
       childContainer.className = 'file-tree-children';
+      this.renderedChildContainers.set(node.path, childContainer);
       this.renderNodes(node.children, childContainer, {
         activeFilePath,
         depth: depth + 1,
         expandedDirs,
       });
       wrapper.appendChild(childContainer);
+    } else {
+      this.renderedChildContainers.delete(node.path);
     }
 
     return wrapper;
   }
 
+  rerenderDirectoryBranch(parentPath, tree, { activeFilePath, expandedDirs }) {
+    const wrapper = this.renderedDirectoryWrappers.get(parentPath);
+    const parentNode = findNodeByPath(tree, parentPath);
+    if (!wrapper || parentNode?.type !== 'directory') {
+      return false;
+    }
+
+    const button = wrapper.querySelector('.file-tree-dir');
+    const isExpanded = expandedDirs.has(parentPath);
+    button?.setAttribute('aria-expanded', String(isExpanded));
+    button?.querySelector('.file-tree-chevron')?.classList.toggle('expanded', isExpanded);
+
+    const depth = Number(button?.dataset.depth ?? 0);
+    let childContainer = this.renderedChildContainers.get(parentPath) ?? wrapper.querySelector('.file-tree-children');
+
+    this.clearRenderedDescendants(parentPath);
+
+    if (!isExpanded) {
+      childContainer?.remove();
+      this.renderedChildContainers.delete(parentPath);
+      return true;
+    }
+
+    if (!childContainer) {
+      childContainer = document.createElement('div');
+      childContainer.className = 'file-tree-children';
+      wrapper.appendChild(childContainer);
+    } else {
+      childContainer.innerHTML = '';
+    }
+    this.renderedChildContainers.set(parentPath, childContainer);
+
+    this.renderNodes(parentNode.children ?? [], childContainer, {
+      activeFilePath,
+      depth: depth + 1,
+      expandedDirs,
+    });
+
+    return true;
+  }
+
+  clearRenderedDescendants(parentPath) {
+    const prefix = `${parentPath}/`;
+    Array.from(this.renderedDirectoryWrappers.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedDirectoryWrappers.delete(pathValue);
+      }
+    });
+    Array.from(this.renderedChildContainers.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedChildContainers.delete(pathValue);
+      }
+    });
+  }
+
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';