collabmd 0.1.23 → 0.1.26

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

@@ -1,15 +1,17 @@
 import {
   getVaultFileExtension,
-  stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 import {
   composeVaultChildPath,
+  createDrawioStarter,
   createMarkdownStarter,
   createMermaidStarter,
   createPlantUmlStarter,
   ensureVaultExtension,
   normalizeVaultPathInput,
 } from '../domain/vault-paths.js';
+import { createWorkspaceRequestId } from '../domain/workspace-request-id.js';
+import { CreateMenuPresenter } from './create-menu-presenter.js';
 
 function getPathLeaf(path) {
   return String(path ?? '')
@@ -19,6 +21,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 +44,25 @@ function createEmptyExcalidrawScene() {
   });
 }
 
+function withRequestId(payload, requestId) {
+  if (!requestId) {
+    return payload;
+  }
+
+  return {
+    ...payload,
+    requestId,
+  };
+}
+
 export class FileActionController {
   constructor({
+    mobileBreakpointQuery = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
+      ? window.matchMedia('(max-width: 768px)')
+      : { matches: false },
     onFileDelete,
     onFileSelect,
+    pendingWorkspaceRequestIds = null,
     state,
     toastController,
     vaultClient,
@@ -42,16 +71,13 @@ export class FileActionController {
   }) {
     this.onFileDelete = onFileDelete;
     this.onFileSelect = onFileSelect;
+    this.pendingWorkspaceRequestIds = pendingWorkspaceRequestIds;
     this.state = state;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.view = view;
     this.refresh = refresh;
-    this.newFileButton = document.getElementById('newFileBtn');
-    this.newDrawingButton = document.getElementById('newDrawingBtn');
-    this.newMermaidButton = document.getElementById('newMermaidBtn');
-    this.newPlantumlButton = document.getElementById('newPlantumlBtn');
-    this.newFolderButton = document.getElementById('newFolderBtn');
+    this.createButton = document.getElementById('sidebarCreateBtn');
     this.refreshButton = document.getElementById('refreshFilesBtn');
     this.actionDialog = document.getElementById('fileActionDialog');
     this.actionForm = document.getElementById('fileActionForm');
@@ -64,16 +90,17 @@ export class FileActionController {
     this.actionNote = document.getElementById('fileActionNote');
     this.actionCancelButton = document.getElementById('fileActionCancel');
     this.actionSubmitButton = document.getElementById('fileActionSubmit');
+    this.createMenu = new CreateMenuPresenter({
+      mobileBreakpointQuery,
+    });
     this.pendingAction = null;
     this.actionBusy = false;
   }
 
   initialize() {
-    this.newFileButton?.addEventListener('click', () => this.handleNewFile());
-    this.newDrawingButton?.addEventListener('click', () => this.handleNewDrawing());
-    this.newMermaidButton?.addEventListener('click', () => this.handleNewMermaid());
-    this.newPlantumlButton?.addEventListener('click', () => this.handleNewPlantUml());
-    this.newFolderButton?.addEventListener('click', () => this.handleNewFolder());
+    this.createButton?.addEventListener('click', () => {
+      this.openRootCreateMenu({ anchor: this.createButton });
+    });
     this.refreshButton?.addEventListener('click', () => this.refresh());
     this.actionCancelButton?.addEventListener('click', () => this.closeActionDialog());
     this.actionForm?.addEventListener('submit', (event) => {
@@ -83,36 +110,98 @@ export class FileActionController {
     this.actionDialog?.addEventListener('close', () => this.resetActionDialog());
   }
 
-  createContextMenuItems(parentDir = '') {
+  getCreateActions({ parentDir = '' } = {}) {
     return [
       {
-        label: 'New markdown file',
+        contextLabel: 'New markdown file',
+        group: 'Note',
+        hint: 'Markdown',
+        icon: this.getCreateActionIcon('markdown'),
+        id: 'markdown',
+        label: 'Markdown note',
+        meta: '.md',
         onSelect: () => this.handleNewFile({ parentDir }),
       },
       {
-        label: 'New Excalidraw drawing',
+        contextLabel: 'New Excalidraw drawing',
+        group: 'Diagram',
+        hint: 'Excalidraw',
+        icon: this.getCreateActionIcon('excalidraw'),
+        id: 'excalidraw',
+        label: 'Excalidraw drawing',
+        meta: '.excalidraw',
         onSelect: () => this.handleNewDrawing({ parentDir }),
       },
       {
-        label: 'New Mermaid diagram',
+        contextLabel: 'New draw.io diagram',
+        group: 'Diagram',
+        hint: 'draw.io',
+        icon: this.getCreateActionIcon('drawio'),
+        id: 'drawio',
+        label: 'draw.io diagram',
+        meta: '.drawio',
+        onSelect: () => this.handleNewDrawio({ parentDir }),
+      },
+      {
+        contextLabel: 'New Mermaid diagram',
+        group: 'Diagram',
+        hint: 'Mermaid',
+        icon: this.getCreateActionIcon('mermaid'),
+        id: 'mermaid',
+        label: 'Mermaid diagram',
+        meta: '.mmd',
         onSelect: () => this.handleNewMermaid({ parentDir }),
       },
       {
-        label: 'New PlantUML diagram',
+        contextLabel: 'New PlantUML diagram',
+        group: 'Diagram',
+        hint: 'PlantUML',
+        icon: this.getCreateActionIcon('plantuml'),
+        id: 'plantuml',
+        label: 'PlantUML diagram',
+        meta: '.puml',
         onSelect: () => this.handleNewPlantUml({ parentDir }),
       },
       {
-        label: 'New folder',
+        contextLabel: 'New folder',
+        group: 'Structure',
+        hint: 'Folder',
+        icon: this.getCreateActionIcon('folder'),
+        id: 'folder',
+        label: 'Folder',
+        meta: 'folder',
         onSelect: () => this.handleNewFolder({ parentDir }),
       },
     ];
   }
 
+  createContextMenuItems(parentDir = '') {
+    return this.getCreateActions({ parentDir }).map((item) => ({
+      label: item.contextLabel,
+      onSelect: item.onSelect,
+    }));
+  }
+
+  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',
@@ -128,6 +217,23 @@ export class FileActionController {
     }
   }
 
+  getCreateActionIcon(kind) {
+    switch (kind) {
+      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>';
+      case 'excalidraw':
+        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="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>';
+      case 'folder':
+        return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';
+      case 'mermaid':
+        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="M5 7.5c0-1.38 1.12-2.5 2.5-2.5 1.04 0 1.93.64 2.3 1.56A2.5 2.5 0 0 1 14 8.5v1"/><path d="M19 16.5c0 1.38-1.12 2.5-2.5 2.5-1.04 0-1.93-.64-2.3-1.56A2.5 2.5 0 0 1 10 15.5v-1"/><path d="M8 10.5h8"/><path d="M8 13.5h8"/><path d="M10 8.5v7"/><path d="M14 8.5v7"/></svg>';
+      case 'markdown':
+      default:
+        return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>';
+    }
+  }
+
   showError(message, error) {
     this.showToast(error?.message ? `${message}: ${error.message}` : message);
   }
@@ -136,6 +242,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,
@@ -168,6 +303,7 @@ export class FileActionController {
     }
 
     this.pendingAction = { requiresInput, emptyMessage, onSubmit };
+    this.createMenu.close({ restoreFocus: false });
     this.view?.removeContextMenu?.();
 
     this.actionTitle.textContent = title;
@@ -323,7 +459,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 +485,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 +499,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 +543,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 +593,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);
 
@@ -428,6 +628,19 @@ export class FileActionController {
     };
   }
 
+  openRootCreateMenu({ anchor = this.createButton } = {}) {
+    this.openCreateMenu({ anchor, parentDir: '' });
+  }
+
+  openCreateMenu({ anchor = this.createButton, parentDir = '' } = {}) {
+    this.view?.removeContextMenu?.();
+    this.createMenu.toggle({
+      anchor,
+      items: this.getCreateActions({ parentDir }),
+      title: 'Create',
+    });
+  }
+
   handleNewFile({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 
@@ -536,6 +749,36 @@ export class FileActionController {
     });
   }
 
+  handleNewDrawio({ parentDir = '' } = {}) {
+    const context = this.getCreateContext(parentDir);
+
+    this.openActionDialog({
+      title: 'Create draw.io diagram',
+      copy: context.normalizedParentDir
+        ? 'Create a new `.drawio` diagram inside the selected folder.'
+        : 'Create a new `.drawio` diagram with a native starter document.',
+      label: `Diagram ${context.inputLabelSuffix}`,
+      hint: `${context.hintPrefix} ".drawio" is added automatically.`,
+      note: context.note,
+      placeholder: context.normalizedParentDir ? 'architecture' : 'diagrams/architecture',
+      submitLabel: 'Create diagram',
+      emptyMessage: 'Diagram path is required',
+      onSubmit: (value) => {
+        const normalizedPath = normalizeVaultPathInput(value);
+        if (!normalizedPath) {
+          this.showToast('Diagram path is required');
+          return false;
+        }
+
+        const starter = createDrawioStarter(composeVaultChildPath(context.normalizedParentDir, normalizedPath));
+        return this.createVaultFile(starter.path, starter.content, {
+          errorMessage: 'Failed to create draw.io diagram',
+          openAfterCreate: true,
+        });
+      },
+    });
+  }
+
   handleNewPlantUml({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 
@@ -566,22 +809,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 +848,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;
         }
 
@@ -36,8 +49,10 @@ export class FileExplorerController {
       },
     });
     this.actionController = new FileActionController({
+      mobileBreakpointQuery,
       onFileDelete: this.onFileDelete,
       onFileSelect: this.onFileSelect,
+      pendingWorkspaceRequestIds,
       refresh: () => this.refresh(),
       state: this.state,
       toastController: this.toastController,