collabmd 0.1.30 → 0.1.32

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

@@ -75,6 +75,8 @@ export class ExcalidrawEmbedController {
     this.maximizedEmbed = null;
     this.overlayRoot = null;
     this.maximizedRoot = null;
+    this.warmCacheRoot = null;
+    this.warmEntry = null;
     this.placeholderObserver = null;
     this.followedPeerIdsByFilePath = new Map();
     this.pendingDisconnectRequests = new Map();
@@ -106,6 +108,11 @@ export class ExcalidrawEmbedController {
       entry.placeholder = null;
     });
     this.embedEntries.clear();
+    if (this.warmEntry) {
+      this._clearEntryBootTimeout(this.warmEntry);
+      this.warmEntry.wrapper?.remove();
+      this.warmEntry = null;
+    }
     this.pendingDisconnectRequests.forEach((request) => {
       request.resolve(false);
     });
@@ -115,6 +122,8 @@ export class ExcalidrawEmbedController {
     this.overlayRoot = null;
     this.maximizedRoot?.remove();
     this.maximizedRoot = null;
+    this.warmCacheRoot?.remove();
+    this.warmCacheRoot = null;
   }
 
   async setFollowedUser(filePath, peerId = null) {
@@ -186,6 +195,7 @@ export class ExcalidrawEmbedController {
     }));
 
     const { nextEntries, removedEntries } = reconcileEmbedEntries(this.embedEntries, descriptors);
+    this._captureWarmEntry(removedEntries);
     this._adoptReusableEntries(nextEntries, removedEntries);
     removedEntries.forEach((entry) => this._destroyEntry(entry));
     this.embedEntries = nextEntries;
@@ -196,8 +206,7 @@ export class ExcalidrawEmbedController {
       entry.queued = false;
       entry.followedPeerId = this.followedPeerIdsByFilePath.get(entry.filePath);
       if (entry.wrapper) {
-        this._updateEmbedLabel(entry);
-        this._attachWrapper(entry);
+        void this._hydrateEntry(entry);
         return;
       }
 
@@ -233,7 +242,7 @@ export class ExcalidrawEmbedController {
   }
 
   updateTheme(theme) {
-    this.embedEntries.forEach((entry) => {
+    this._forEachManagedEntry((entry) => {
       this._postMessageToEntry(entry, {
         source: 'collabmd-host',
         type: 'set-theme',
@@ -243,7 +252,7 @@ export class ExcalidrawEmbedController {
   }
 
   updateLocalUser(user) {
-    this.embedEntries.forEach((entry) => {
+    this._forEachManagedEntry((entry) => {
       this._syncEntryUser(entry, user);
     });
   }
@@ -390,19 +399,31 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    entry.isParked = false;
+
     if (!entry.wrapper) {
       const mount = this._createEmbedContainer(entry);
+      entry.header = mount.header;
       entry.wrapper = mount.wrapper;
       entry.iframe = mount.iframe;
       entry.labelElement = mount.labelElement;
+      entry.maxButton = mount.maxButton;
+      entry.openButton = mount.openButton;
       entry.instanceId = mount.instanceId;
       entry.isReady = false;
+      entry.bootFilePath = entry.filePath;
+      entry.bootMode = this._getEntryMode(entry);
+      entry.loadedFilePath = entry.bootFilePath;
+      entry.loadedMode = entry.bootMode;
       entry.bootAttempts = (entry.bootAttempts ?? 0) + 1;
       this._armEntryBootTimeout(entry);
     }
 
     entry.followedPeerId = this.followedPeerIdsByFilePath.get(entry.filePath);
     this._updateEmbedLabel(entry);
+    if (this._entryNeedsHardReload(entry)) {
+      this._reloadEntry(entry);
+    }
     this._attachWrapper(entry);
   }
 
@@ -444,22 +465,16 @@ export class ExcalidrawEmbedController {
         return;
       }
 
-      const removedIndex = removedEntries.findIndex((entry) => (
-        entry.filePath === nextEntry.filePath
-        && this._getEntryMode(entry) === this._getEntryMode(nextEntry)
-        && (entry.wrapper || entry.iframe)
-      ));
-      if (removedIndex < 0) {
+      const reusedEntry = this._claimReusableEntry(nextEntry, removedEntries);
+      if (!reusedEntry) {
         return;
       }
 
-      const [reusedEntry] = removedEntries.splice(removedIndex, 1);
       reusedEntry.filePath = nextEntry.filePath;
       reusedEntry.key = nextEntry.key;
       reusedEntry.label = nextEntry.label;
       reusedEntry.placeholder = nextEntry.placeholder;
       reusedEntry.queued = false;
-      reusedEntry.reusedFromEmbed = this._isFilePreviewEntry(nextEntry);
       nextEntries.set(key, reusedEntry);
     });
   }
@@ -477,16 +492,20 @@ export class ExcalidrawEmbedController {
     }
 
     this._clearEntryBootTimeout(entry);
+    if (this.warmEntry === entry) {
+      this.warmEntry = null;
+    }
     this._resetPlaceholderLayout(entry);
+    this._setEntryLoadingState(entry, false);
     entry.wrapper?.remove();
     entry.placeholder = null;
   }
 
-  _armEntryBootTimeout(entry) {
+  _armEntryBootTimeout(entry, delayMs = IFRAME_BOOT_TIMEOUT_MS) {
     this._clearEntryBootTimeout(entry);
     entry.bootTimerId = window.setTimeout(() => {
       void this._handleEntryBootTimeout(entry);
-    }, IFRAME_BOOT_TIMEOUT_MS);
+    }, delayMs);
   }
 
   _clearEntryBootTimeout(entry) {
@@ -519,6 +538,7 @@ export class ExcalidrawEmbedController {
 
     this._clearEntryBootTimeout(entry);
     this._resetPlaceholderLayout(entry);
+    this._setEntryLoadingState(entry, false);
 
     if (this.maximizedEmbed?.wrapper === entry.wrapper) {
       this._exitMaximizedEmbed();
@@ -527,9 +547,17 @@ export class ExcalidrawEmbedController {
     entry.wrapper?.remove();
     entry.wrapper = null;
     entry.iframe = null;
+    entry.header = null;
     entry.labelElement = null;
+    entry.maxButton = null;
+    entry.openButton = null;
     entry.instanceId = null;
     entry.isReady = false;
+    entry.isParked = false;
+    entry.bootFilePath = null;
+    entry.bootMode = null;
+    entry.loadedFilePath = null;
+    entry.loadedMode = null;
 
     await this._hydrateEntry(entry);
   }
@@ -545,6 +573,10 @@ export class ExcalidrawEmbedController {
       }
     }
 
+    if (this.warmEntry?.iframe?.contentWindow === contentWindow) {
+      return this.warmEntry;
+    }
+
     return null;
   }
 
@@ -559,6 +591,10 @@ export class ExcalidrawEmbedController {
       }
     }
 
+    if (this.warmEntry?.filePath === filePath) {
+      return this.warmEntry;
+    }
+
     return null;
   }
 
@@ -572,11 +608,20 @@ export class ExcalidrawEmbedController {
     if (entry.wrapper) {
       entry.wrapper.dataset.embedKey = entry.key;
       entry.wrapper.dataset.file = entry.filePath;
+      entry.wrapper.classList.toggle('is-direct-file', this._isFilePreviewEntry(entry));
     }
 
     if (entry.iframe) {
       entry.iframe.title = `Excalidraw: ${entry.filePath}`;
     }
+
+    if (entry.openButton) {
+      if (this._isFilePreviewEntry(entry)) {
+        entry.openButton.remove();
+      } else if (!entry.openButton.isConnected && entry.header) {
+        entry.header.insertBefore(entry.openButton, entry.maxButton || null);
+      }
+    }
   }
 
   _buildIframeUrl(entry) {
@@ -724,13 +769,33 @@ export class ExcalidrawEmbedController {
     syncMaximizeButtonState();
 
     return {
+      header,
       iframe,
       instanceId: iframe.dataset.instanceId,
       labelElement: label,
+      maxButton: maxBtn,
+      openButton: openBtn,
       wrapper,
     };
   }
 
+  _ensureWarmCacheRoot() {
+    if (this.warmCacheRoot?.isConnected && this.warmCacheRoot.parentElement === document.body) {
+      return this.warmCacheRoot;
+    }
+
+    let warmCacheRoot = document.body.querySelector('[data-excalidraw-warm-cache-root="true"]');
+    if (!warmCacheRoot) {
+      warmCacheRoot = document.createElement('div');
+      warmCacheRoot.dataset.excalidrawWarmCacheRoot = 'true';
+      warmCacheRoot.className = 'excalidraw-warm-cache-root';
+      document.body.appendChild(warmCacheRoot);
+    }
+
+    this.warmCacheRoot = warmCacheRoot;
+    return warmCacheRoot;
+  }
+
   _setupResizer(resizer, iframe, onResizeEnd = null) {
     let startY = 0;
     let startHeight = 0;
@@ -801,7 +866,164 @@ export class ExcalidrawEmbedController {
   }
 
   _shouldInlineFilePreview(entry) {
-    return this._isFilePreviewEntry(entry) && !entry?.reusedFromEmbed;
+    return this._isFilePreviewEntry(entry);
+  }
+
+  _entryNeedsHardReload(entry) {
+    const desiredMode = this._getEntryMode(entry);
+    return Boolean(
+      entry?.wrapper
+      && entry.iframe
+      && (
+        entry.isReady
+          ? (
+            entry.loadedFilePath !== entry.filePath
+            || entry.loadedMode !== desiredMode
+          )
+          : (
+            entry.bootFilePath !== entry.filePath
+            || entry.bootMode !== desiredMode
+          )
+      )
+    );
+  }
+
+  _setEntryLoadingState(entry, isLoading) {
+    if (!entry?.wrapper) {
+      return;
+    }
+
+    entry.wrapper.classList.toggle('is-loading', Boolean(isLoading));
+    entry.wrapper.setAttribute('aria-busy', isLoading ? 'true' : 'false');
+  }
+
+  _forEachManagedEntry(callback) {
+    const seen = new Set();
+    this.embedEntries.forEach((entry) => {
+      if (!entry || seen.has(entry)) {
+        return;
+      }
+
+      seen.add(entry);
+      callback(entry);
+    });
+
+    if (this.warmEntry && !seen.has(this.warmEntry)) {
+      callback(this.warmEntry);
+    }
+  }
+
+  _claimEntryFromRemovedEntries(removedEntries, predicate) {
+    const removedIndex = removedEntries.findIndex((entry) => (
+      (entry.wrapper || entry.iframe) && predicate(entry)
+    ));
+    if (removedIndex < 0) {
+      return null;
+    }
+
+    const [reusedEntry] = removedEntries.splice(removedIndex, 1);
+    return reusedEntry;
+  }
+
+  _claimReusableEntry(nextEntry, removedEntries) {
+    const desiredMode = this._getEntryMode(nextEntry);
+    const exactMatch = this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+      entry.filePath === nextEntry.filePath
+      && this._getEntryMode(entry) === desiredMode
+    ));
+    if (exactMatch) {
+      return exactMatch;
+    }
+
+    if (this._isFilePreviewEntry(nextEntry)) {
+      const promotedEntry = this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+        entry.filePath === nextEntry.filePath
+      ));
+      if (promotedEntry) {
+        return promotedEntry;
+      }
+
+      const warmEntry = this._claimWarmEntry();
+      if (warmEntry) {
+        return warmEntry;
+      }
+
+      return this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+        this._isFilePreviewEntry(entry)
+      ));
+    }
+
+    return null;
+  }
+
+  _claimWarmEntry() {
+    const warmEntry = this.warmEntry;
+    if (!warmEntry) {
+      return null;
+    }
+
+    this.warmEntry = null;
+    return warmEntry;
+  }
+
+  _captureWarmEntry(removedEntries) {
+    const warmCandidate = this._claimEntryFromRemovedEntries(removedEntries, (entry) => (
+      this._isFilePreviewEntry(entry)
+    ));
+    if (!warmCandidate) {
+      return;
+    }
+
+    if (this.warmEntry && this.warmEntry !== warmCandidate) {
+      this._destroyEntry(this.warmEntry);
+    }
+
+    this.warmEntry = warmCandidate;
+    this._parkWarmEntry(warmCandidate);
+  }
+
+  _parkWarmEntry(entry) {
+    if (!entry?.wrapper) {
+      return;
+    }
+
+    if (this.maximizedEmbed?.wrapper === entry.wrapper) {
+      this._exitMaximizedEmbed();
+    }
+
+    const warmCacheRoot = this._ensureWarmCacheRoot();
+    this._setEntryLoadingState(entry, false);
+    entry.isParked = true;
+    entry.isReady = false;
+    entry.bootFilePath = null;
+    entry.bootMode = null;
+    entry.loadedFilePath = null;
+    entry.loadedMode = null;
+    entry.placeholder = null;
+    if (entry.wrapper.parentElement !== warmCacheRoot) {
+      warmCacheRoot.appendChild(entry.wrapper);
+    }
+    this._postMessageToEntry(entry, {
+      source: 'collabmd-host',
+      type: 'park-room',
+    });
+  }
+
+  _reloadEntry(entry) {
+    if (!entry?.iframe) {
+      return;
+    }
+
+    this._clearEntryBootTimeout(entry);
+    this._setEntryLoadingState(entry, true);
+    entry.isReady = false;
+    entry.bootAttempts = (entry.bootAttempts ?? 0) + 1;
+    entry.bootFilePath = entry.filePath;
+    entry.bootMode = this._getEntryMode(entry);
+    entry.loadedFilePath = null;
+    entry.loadedMode = null;
+    entry.iframe.src = this._buildIframeUrl(entry).toString();
+    this._armEntryBootTimeout(entry);
   }
 
   _resetPlaceholderLayout(entry) {
@@ -950,8 +1172,15 @@ export class ExcalidrawEmbedController {
     }
 
     if (msg.type === 'ready') {
+      if (entry.isParked) {
+        return;
+      }
+
       entry.isReady = true;
       this._clearEntryBootTimeout(entry);
+      entry.loadedFilePath = entry.bootFilePath || entry.filePath;
+      entry.loadedMode = entry.bootMode || this._getEntryMode(entry);
+      this._setEntryLoadingState(entry, false);
       this._syncEntryUser(entry);
       this._postMessageToEntry(entry, {
         source: 'collabmd-host',
@@ -959,10 +1188,17 @@ export class ExcalidrawEmbedController {
         theme: this.getTheme?.() || 'dark',
       });
       this._syncEntryFollowState(entry);
+      if (this._entryNeedsHardReload(entry)) {
+        void this._hydrateEntry(entry);
+      }
       return;
     }
 
     if (msg.type === 'error') {
+      if (entry.isParked) {
+        return;
+      }
+
       entry.isReady = false;
       void this._handleEntryBootTimeout(entry);
       return;

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

@@ -11,7 +11,6 @@ export function reconcileEmbedEntries(currentEntries, placeholderDescriptors) {
       label: descriptor.label,
       placeholder: descriptor.placeholder,
       queued: false,
-      reusedFromEmbed: false,
       wrapper: null,
     };
 

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

@@ -2,6 +2,7 @@ import {
   getVaultFileExtension,
 } from '../../domain/file-kind.js';
 import {
+  createBaseStarter,
   composeVaultChildPath,
   createDrawioStarter,
   createMarkdownStarter,
@@ -22,6 +23,12 @@ 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 replacePathPrefix(pathValue, oldPrefix, newPrefix) {
   if (pathValue === oldPrefix) {
     return newPrefix;
@@ -123,6 +130,16 @@ export class FileActionController {
         meta: '.md',
         onSelect: () => this.handleNewFile({ parentDir }),
       },
+      {
+        contextLabel: 'New base file',
+        group: 'Note',
+        hint: 'Base',
+        icon: this.getCreateActionIcon('base'),
+        id: 'base',
+        label: 'Base file',
+        meta: '.base',
+        onSelect: () => this.handleNewBase({ parentDir }),
+      },
       {
         contextLabel: 'New Excalidraw drawing',
         group: 'Diagram',
@@ -190,6 +207,10 @@ export class FileActionController {
         label: 'Rename / move',
         onSelect: () => this.handleRenameDirectory(directoryPath),
       },
+      {
+        label: 'Download',
+        onSelect: () => this.handleDownloadDirectory(directoryPath),
+      },
       {
         label: 'Delete',
         danger: true,
@@ -204,6 +225,10 @@ export class FileActionController {
         label: 'Rename / move',
         onSelect: () => this.handleRenameFile(filePath),
       },
+      {
+        label: 'Download',
+        onSelect: () => this.handleDownloadFile(filePath),
+      },
       {
         label: 'Delete',
         danger: true,
@@ -220,6 +245,8 @@ export class FileActionController {
 
   getCreateActionIcon(kind) {
     switch (kind) {
+      case 'base':
+        return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><path d="M14 4v5h5"/><path d="M8 13h8"/><path d="M8 17h6"/><path d="M8 9h3"/></svg>';
       case 'drawio':
       case 'plantuml':
         return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/></svg>';
@@ -614,6 +641,81 @@ export class FileActionController {
     }
   }
 
+  planMoveEntryByDrop({ destinationDirectory = '', sourcePath = '', sourceType = 'file' } = {}) {
+    const normalizedSourcePath = normalizeVaultPathInput(sourcePath);
+    const normalizedDestinationDirectory = normalizeVaultPathInput(destinationDirectory);
+    const currentParentPath = getParentPath(normalizedSourcePath);
+    const entryName = getPathLeaf(normalizedSourcePath);
+
+    if (!normalizedSourcePath || !entryName) {
+      return { ok: false, reason: 'Invalid item to move' };
+    }
+
+    if (currentParentPath === normalizedDestinationDirectory) {
+      return { ok: false, reason: 'Item is already in that folder' };
+    }
+
+    if (sourceType === 'directory') {
+      if (normalizedDestinationDirectory === normalizedSourcePath) {
+        return { ok: false, reason: 'A folder cannot be moved into itself' };
+      }
+
+      if (normalizedDestinationDirectory.startsWith(`${normalizedSourcePath}/`)) {
+        return { ok: false, reason: 'A folder cannot be moved into one of its descendants' };
+      }
+
+      return {
+        nextPath: composeVaultChildPath(normalizedDestinationDirectory, entryName),
+        ok: true,
+      };
+    }
+
+    const extension = getVaultFileExtension(normalizedSourcePath) || '.md';
+    return {
+      extension,
+      nextPath: composeVaultChildPath(normalizedDestinationDirectory, entryName),
+      ok: true,
+    };
+  }
+
+  canMoveEntryByDrop(payload = {}) {
+    return this.planMoveEntryByDrop(payload).ok;
+  }
+
+  async moveEntryByDrop(payload = {}) {
+    const plan = this.planMoveEntryByDrop(payload);
+    if (!plan.ok) {
+      this.showToast(plan.reason);
+      return false;
+    }
+
+    if (payload.sourceType === 'directory') {
+      return this.renameDirectory(payload.sourcePath, plan.nextPath);
+    }
+
+    return this.renameVaultFile(payload.sourcePath, plan.nextPath, plan.extension);
+  }
+
+  async downloadFileEntry(filePath) {
+    try {
+      await this.vaultClient.downloadFile(filePath);
+      return true;
+    } catch (error) {
+      this.showToast(error?.message || 'Failed to download file');
+      return false;
+    }
+  }
+
+  async downloadDirectoryEntry(directoryPath) {
+    try {
+      await this.vaultClient.downloadDirectory(directoryPath);
+      return true;
+    } catch (error) {
+      this.showToast(error?.message || 'Failed to download folder');
+      return false;
+    }
+  }
+
   getCreateContext(parentDir = '') {
     const normalizedParentDir = normalizeVaultPathInput(parentDir);
 
@@ -670,6 +772,36 @@ export class FileActionController {
     });
   }
 
+  handleNewBase({ parentDir = '' } = {}) {
+    const context = this.getCreateContext(parentDir);
+
+    this.openActionDialog({
+      title: 'Create base file',
+      copy: context.normalizedParentDir
+        ? 'Add a new `.base` file inside the selected folder. It opens immediately after creation.'
+        : 'Add a new `.base` file to the vault. It opens immediately after creation.',
+      label: `Base ${context.inputLabelSuffix}`,
+      hint: `${context.hintPrefix} ".base" is added automatically.`,
+      note: context.note,
+      placeholder: context.normalizedParentDir ? 'table-view' : 'views/table-view',
+      submitLabel: 'Create base',
+      emptyMessage: 'Base path is required',
+      onSubmit: (value) => {
+        const normalizedPath = normalizeVaultPathInput(value);
+        if (!normalizedPath) {
+          this.showToast('Base path is required');
+          return false;
+        }
+
+        const starter = createBaseStarter(composeVaultChildPath(context.normalizedParentDir, normalizedPath));
+        return this.createVaultFile(starter.path, starter.content, {
+          errorMessage: 'Failed to create base file',
+          openAfterCreate: true,
+        });
+      },
+    });
+  }
+
   handleNewFolder({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 
@@ -865,4 +997,12 @@ export class FileActionController {
       onSubmit: () => this.deleteDirectory(directoryPath, { recursive: hasDescendants }),
     });
   }
+
+  handleDownloadFile(filePath) {
+    void this.downloadFileEntry(filePath);
+  }
+
+  handleDownloadDirectory(directoryPath) {
+    void this.downloadDirectoryEntry(directoryPath);
+  }
 }

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

@@ -29,6 +29,7 @@ export class FileExplorerController {
         this.state.toggleDirectory(pathValue);
         this.renderTree();
       },
+      onEntryDrop: (payload) => this.actionController.moveEntryByDrop(payload),
       onFileContextMenu: (event, payload) => {
         if (payload.type === 'directory') {
           this.view.showContextMenu(event, this.actionController.getDirectoryContextMenuItems(payload.directoryPath));
@@ -40,6 +41,7 @@ export class FileExplorerController {
       onFileSelect: (filePath) => {
         this.onFileSelect?.(filePath);
       },
+      onValidateDrop: (payload) => this.actionController.canMoveEntryByDrop(payload),
       onSearchChange: (value) => {
         this.state.setSearchQuery(value);
         this.renderTree();