collabmd 0.1.21 → 0.1.25

package/src/client/presentation/comments-panel.js

@@ -463,7 +463,7 @@ export class CommentsPanel {
 
     const cancelButton = document.createElement('button');
     cancelButton.type = 'button';
-    cancelButton.className = 'btn btn-secondary';
+    cancelButton.className = 'ui-button btn btn-secondary';
     cancelButton.textContent = 'Cancel';
     cancelButton.addEventListener('click', () => {
       this.replyDraftThreadId = null;
@@ -472,7 +472,7 @@ export class CommentsPanel {
 
     const submitButton = document.createElement('button');
     submitButton.type = 'submit';
-    submitButton.className = 'btn btn-primary';
+    submitButton.className = 'ui-button btn btn-primary';
     submitButton.textContent = 'Reply';
 
     actions.append(cancelButton, submitButton);

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-action-controller.js

@@ -1,6 +1,5 @@
 import {
   getVaultFileExtension,
-  stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import {
   composeVaultChildPath,
@@ -10,6 +9,7 @@ import {
   ensureVaultExtension,
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
+import { createWorkspaceRequestId } from '../domain/workspace-request-id.js';
 
 function getPathLeaf(path) {
   return String(path ?? '')
@@ -19,6 +19,18 @@ function getPathLeaf(path) {
     .pop() || '';
 }
 
+function replacePathPrefix(pathValue, oldPrefix, newPrefix) {
+  if (pathValue === oldPrefix) {
+    return newPrefix;
+  }
+
+  return `${newPrefix}${pathValue.slice(oldPrefix.length)}`;
+}
+
+function formatCount(value, singularLabel, pluralLabel) {
+  return `${value} ${value === 1 ? singularLabel : pluralLabel}`;
+}
+
 function createEmptyExcalidrawScene() {
   return JSON.stringify({
     type: 'excalidraw',
@@ -30,10 +42,22 @@ function createEmptyExcalidrawScene() {
   });
 }
 
+function withRequestId(payload, requestId) {
+  if (!requestId) {
+    return payload;
+  }
+
+  return {
+    ...payload,
+    requestId,
+  };
+}
+
 export class FileActionController {
   constructor({
     onFileDelete,
     onFileSelect,
+    pendingWorkspaceRequestIds = null,
     state,
     toastController,
     vaultClient,
@@ -42,6 +66,7 @@ export class FileActionController {
   }) {
     this.onFileDelete = onFileDelete;
     this.onFileSelect = onFileSelect;
+    this.pendingWorkspaceRequestIds = pendingWorkspaceRequestIds;
     this.state = state;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
@@ -108,11 +133,26 @@ export class FileActionController {
     ];
   }
 
+  getDirectoryContextMenuItems(directoryPath) {
+    return [
+      ...this.createContextMenuItems(directoryPath),
+      {
+        label: 'Rename / move',
+        onSelect: () => this.handleRenameDirectory(directoryPath),
+      },
+      {
+        label: 'Delete',
+        danger: true,
+        onSelect: () => this.handleDeleteDirectory(directoryPath),
+      },
+    ];
+  }
+
   getFileContextMenuItems(filePath) {
     return [
       {
-        label: 'Rename',
-        onSelect: () => this.handleRename(filePath),
+        label: 'Rename / move',
+        onSelect: () => this.handleRenameFile(filePath),
       },
       {
         label: 'Delete',
@@ -136,6 +176,35 @@ export class FileActionController {
     return ensureVaultExtension(pathValue, extension);
   }
 
+  createPendingWorkspaceRequestId() {
+    if (!this.pendingWorkspaceRequestIds) {
+      return null;
+    }
+
+    const requestId = createWorkspaceRequestId();
+    this.pendingWorkspaceRequestIds.add(requestId);
+    return requestId;
+  }
+
+  clearPendingWorkspaceRequestId(requestId) {
+    if (!requestId) {
+      return;
+    }
+
+    this.pendingWorkspaceRequestIds?.delete(requestId);
+  }
+
+  async runWorkspaceMutation(callback) {
+    const requestId = this.createPendingWorkspaceRequestId();
+
+    try {
+      return await callback(requestId);
+    } catch (error) {
+      this.clearPendingWorkspaceRequestId(requestId);
+      throw error;
+    }
+  }
+
   openActionDialog({
     title,
     copy,
@@ -323,7 +392,10 @@ export class FileActionController {
 
   async createVaultFile(filePath, content, { openAfterCreate = false, errorMessage = 'Failed to create file' } = {}) {
     try {
-      await this.vaultClient.createFile({ content, path: filePath });
+      await this.runWorkspaceMutation((requestId) => this.vaultClient.createFile(withRequestId({
+        content,
+        path: filePath,
+      }, requestId)));
       this.state.expandDirectoryPath(filePath, { includeLeaf: false });
       await this.refresh();
 
@@ -346,7 +418,10 @@ export class FileActionController {
     }
 
     try {
-      await this.vaultClient.createDirectory(directoryPath);
+      await this.runWorkspaceMutation((requestId) => this.vaultClient.createDirectory(
+        directoryPath,
+        withRequestId({}, requestId),
+      ));
       this.state.expandDirectoryPath(directoryPath);
       await this.refresh();
       return true;
@@ -357,38 +432,41 @@ export class FileActionController {
   }
 
   async renameVaultFile(filePath, nextName, extension) {
-    const normalizedName = String(nextName ?? '').trim();
-    if (!normalizedName) {
-      this.showToast('File name is required');
+    const normalizedPath = normalizeVaultPathInput(nextName);
+    if (!normalizedPath) {
+      this.showToast('File path is required');
       return false;
     }
 
-    if (/[\\/]/u.test(normalizedName)) {
-      this.showToast('Rename only supports the file name right now');
+    const requestedExtension = getVaultFileExtension(normalizedPath);
+    if (requestedExtension && requestedExtension.toLowerCase() !== String(extension ?? '').toLowerCase()) {
+      this.showToast(`File type changes are not supported during rename. Keep the ${extension} extension.`);
       return false;
     }
 
-    const baseName = stripVaultFileExtension(normalizedName).trim();
-    if (!baseName) {
-      this.showToast('File name is required');
+    const finalPath = requestedExtension
+      ? normalizedPath
+      : `${normalizedPath}${extension}`;
+    if (!getPathLeaf(finalPath)) {
+      this.showToast('File path is required');
       return false;
     }
 
-    const dir = filePath.includes('/') ? filePath.substring(0, filePath.lastIndexOf('/') + 1) : '';
-    const newPath = `${dir}${baseName}${extension}`;
-
-    if (newPath === filePath) {
+    if (finalPath === filePath) {
       return true;
     }
 
     try {
-      await this.vaultClient.renameFile({ newPath, oldPath: filePath });
-      this.state.expandDirectoryPath(newPath, { includeLeaf: false });
+      await this.runWorkspaceMutation((requestId) => this.vaultClient.renameFile(withRequestId({
+        newPath: finalPath,
+        oldPath: filePath,
+      }, requestId)));
+      this.state.expandDirectoryPath(finalPath, { includeLeaf: false });
       await this.refresh();
 
       if (this.state.activeFilePath === filePath) {
-        this.state.activeFilePath = newPath;
-        this.onFileSelect?.(newPath);
+        this.state.activeFilePath = finalPath;
+        this.onFileSelect?.(finalPath);
       }
 
       return true;
@@ -398,9 +476,42 @@ export class FileActionController {
     }
   }
 
+  async renameDirectory(oldPath, nextPath) {
+    const normalizedPath = normalizeVaultPathInput(nextPath);
+    if (!normalizedPath) {
+      this.showToast('Folder path is required');
+      return false;
+    }
+
+    if (normalizedPath === oldPath) {
+      return true;
+    }
+
+    try {
+      await this.runWorkspaceMutation((requestId) => this.vaultClient.renameDirectory(withRequestId({
+        newPath: normalizedPath,
+        oldPath,
+      }, requestId)));
+      this.state.replaceExpandedDirectoryPrefix(oldPath, normalizedPath);
+      this.state.expandDirectoryPath(normalizedPath);
+      await this.refresh();
+
+      if (this.state.activeFilePath && this.state.activeFilePath.startsWith(`${oldPath}/`)) {
+        const nextActivePath = replacePathPrefix(this.state.activeFilePath, oldPath, normalizedPath);
+        this.state.activeFilePath = nextActivePath;
+        this.onFileSelect?.(nextActivePath);
+      }
+
+      return true;
+    } catch (error) {
+      this.showToast(error?.message || 'Failed to rename folder');
+      return false;
+    }
+  }
+
   async deleteVaultFile(filePath) {
     try {
-      await this.vaultClient.deleteFile(filePath);
+      await this.runWorkspaceMutation((requestId) => this.vaultClient.deleteFile(filePath, withRequestId({}, requestId)));
       await this.refresh();
 
       if (this.state.activeFilePath === filePath) {
@@ -415,6 +526,28 @@ export class FileActionController {
     }
   }
 
+  async deleteDirectory(pathValue, { recursive = false } = {}) {
+    try {
+      await this.runWorkspaceMutation((requestId) => this.vaultClient.deleteDirectory(
+        pathValue,
+        withRequestId({ recursive }, requestId),
+      ));
+      const activeFilePath = this.state.activeFilePath;
+      await this.refresh();
+      this.state.removeExpandedDirectoryPrefix(pathValue);
+
+      if (activeFilePath && activeFilePath.startsWith(`${pathValue}/`)) {
+        this.state.activeFilePath = null;
+        this.onFileDelete?.(activeFilePath);
+      }
+
+      return true;
+    } catch (error) {
+      this.showToast(error?.message || 'Failed to delete folder');
+      return false;
+    }
+  }
+
   getCreateContext(parentDir = '') {
     const normalizedParentDir = normalizeVaultPathInput(parentDir);
 
@@ -566,22 +699,34 @@ export class FileActionController {
     });
   }
 
-  handleRename(filePath) {
-    const currentName = getPathLeaf(filePath);
-    const extension = getVaultFileExtension(currentName) ?? '.md';
+  handleRenameFile(filePath) {
+    const extension = getVaultFileExtension(filePath) || '.md';
 
     this.openActionDialog({
-      title: 'Rename file',
-      copy: 'Update the file name without changing its current type.',
-      label: 'Name',
-      hint: `${extension} is kept automatically.`,
-      value: stripVaultFileExtension(currentName),
-      submitLabel: 'Rename file',
-      emptyMessage: 'File name is required',
+      title: 'Rename or move file',
+      copy: 'Update the relative path without changing the file type.',
+      label: 'Path',
+      hint: `Use "/" to move the file into another folder. ${extension} is kept automatically.`,
+      value: filePath,
+      submitLabel: 'Save file path',
+      emptyMessage: 'File path is required',
       onSubmit: (value) => this.renameVaultFile(filePath, value, extension),
     });
   }
 
+  handleRenameDirectory(directoryPath) {
+    this.openActionDialog({
+      title: 'Rename or move folder',
+      copy: 'Update the relative path for this folder and everything inside it.',
+      label: 'Path',
+      hint: 'Use "/" to move the folder into another location in the vault.',
+      value: directoryPath,
+      submitLabel: 'Save folder path',
+      emptyMessage: 'Folder path is required',
+      onSubmit: (value) => this.renameDirectory(directoryPath, value),
+    });
+  }
+
   handleDelete(filePath) {
     this.openActionDialog({
       title: 'Delete file',
@@ -593,4 +738,22 @@ export class FileActionController {
       onSubmit: () => this.deleteVaultFile(filePath),
     });
   }
+
+  handleDeleteDirectory(directoryPath) {
+    const { directoryCount, fileCount } = this.state.getDirectoryDescendantSummary(directoryPath);
+    const hasDescendants = directoryCount > 0 || fileCount > 0;
+    const summary = hasDescendants
+      ? `This will permanently remove ${formatCount(fileCount, 'file', 'files')} and ${formatCount(directoryCount, 'nested folder', 'nested folders')} inside this folder.`
+      : 'This permanently removes the empty folder from the vault.';
+
+    this.openActionDialog({
+      title: hasDescendants ? 'Delete folder and contents' : 'Delete folder',
+      copy: summary,
+      note: directoryPath,
+      submitLabel: hasDescendants ? 'Delete folder and contents' : 'Delete folder',
+      destructive: true,
+      requiresInput: false,
+      onSubmit: () => this.deleteDirectory(directoryPath, { recursive: hasDescendants }),
+    });
+  }
 }

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

@@ -5,20 +5,33 @@ import { FileTreeState } from './file-tree-state.js';
 import { FileExplorerView } from './file-explorer-view.js';
 
 export class FileExplorerController {
-  constructor({ onFileSelect, onFileDelete, toastController, vaultClient = vaultApiClient }) {
+  constructor({
+    mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
+    onFileSelect,
+    onFileDelete,
+    pendingWorkspaceRequestIds = null,
+    toastController,
+    vaultClient = vaultApiClient,
+  }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.state = new FileTreeState();
     this.view = new FileExplorerView({
+      mobileBreakpointQuery,
+      onDirectorySelect: (pathValue) => {
+        this.state.expandDirectoryPath(pathValue);
+        this.state.setSearchQuery('');
+        this.renderTree({ reset: true });
+      },
       onDirectoryToggle: (pathValue) => {
         this.state.toggleDirectory(pathValue);
         this.renderTree();
       },
       onFileContextMenu: (event, payload) => {
         if (payload.type === 'directory') {
-          this.view.showContextMenu(event, this.actionController.createContextMenuItems(payload.directoryPath));
+          this.view.showContextMenu(event, this.actionController.getDirectoryContextMenuItems(payload.directoryPath));
           return;
         }
 
@@ -38,6 +51,7 @@ export class FileExplorerController {
     this.actionController = new FileActionController({
       onFileDelete: this.onFileDelete,
       onFileSelect: this.onFileSelect,
+      pendingWorkspaceRequestIds,
       refresh: () => this.refresh(),
       state: this.state,
       toastController: this.toastController,