collabmd 0.1.45 → 0.1.47

package/src/client/presentation/comment-ui/comment-ui-shared.js

@@ -51,6 +51,10 @@ export function areAnchorsEqual(left, right) {
 }
 
 export function formatAnchorLabel(anchor) {
+  if (getAnchorKind(anchor) === 'diagram-element') {
+    return 'Diagram element';
+  }
+
   const startLine = Number(anchor?.startLine || 0);
   const endLine = Number(anchor?.endLine || startLine);
   if (!Number.isFinite(startLine) || startLine <= 0) {

package/src/client/presentation/comment-ui-controller.js

@@ -12,6 +12,7 @@ export class CommentUiController {
     commentsDrawerList,
     commentsToggleButton,
     editorContainer,
+    mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onWillOpenDrawer,
     onCreateThread,
     onNavigateToLine,
@@ -27,6 +28,7 @@ export class CommentUiController {
     this.commentsDrawerList = commentsDrawerList;
     this.commentsToggleButton = commentsToggleButton;
     this.editorContainer = editorContainer;
+    this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.onWillOpenDrawer = onWillOpenDrawer;
     this.onCreateThread = onCreateThread;
     this.onNavigateToLine = onNavigateToLine;

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

@@ -1,6 +1,7 @@
 import { createDrawioLeaseRoomName } from '../../domain/drawio-room.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { resolveAppUrl } from '../domain/runtime-paths.js';
+import { renderDrawioViewer } from './drawio-viewer.js';
 import {
   cancelIdleRender,
   isNearViewport,
@@ -8,62 +9,6 @@ import {
 } from '../browser-utils.js';
 
 const HYDRATE_VIEWPORT_MARGIN_PX = 360;
-const DRAWIO_VIEWER_SCRIPT_URL = 'https://viewer.diagrams.net/js/viewer-static.min.js';
-
-let drawioViewerLoadPromise = null;
-
-function ensureDrawioViewerLoaded() {
-  if (window.GraphViewer?.processElements) {
-    return Promise.resolve(window.GraphViewer);
-  }
-
-  if (drawioViewerLoadPromise) {
-    return drawioViewerLoadPromise;
-  }
-
-  drawioViewerLoadPromise = new Promise((resolve, reject) => {
-    const existingScript = document.querySelector('script[data-collabmd-drawio-viewer]');
-    const script = existingScript instanceof HTMLScriptElement
-      ? existingScript
-      : document.createElement('script');
-
-    const cleanup = () => {
-      script.removeEventListener('error', handleError);
-      script.removeEventListener('load', handleLoad);
-    };
-
-    const handleError = () => {
-      cleanup();
-      drawioViewerLoadPromise = null;
-      reject(new Error('Failed to load draw.io viewer'));
-    };
-
-    const handleLoad = () => {
-      cleanup();
-      if (!window.GraphViewer?.processElements) {
-        drawioViewerLoadPromise = null;
-        reject(new Error('draw.io viewer did not initialize'));
-        return;
-      }
-
-      resolve(window.GraphViewer);
-    };
-
-    script.addEventListener('error', handleError, { once: true });
-    script.addEventListener('load', handleLoad, { once: true });
-
-    if (!existingScript) {
-      script.src = DRAWIO_VIEWER_SCRIPT_URL;
-      script.async = true;
-      script.dataset.collabmdDrawioViewer = 'true';
-      document.head.append(script);
-    } else if (window.GraphViewer?.processElements) {
-      handleLoad();
-    }
-  });
-
-  return drawioViewerLoadPromise;
-}
 
 export class DrawioEmbedController {
   constructor({
@@ -350,59 +295,21 @@ export class DrawioEmbedController {
   }
 
   async renderViewerEntry(entry) {
-    const [{ content }, viewer] = await Promise.all([
-      this.vaultApiClient.readFile(entry.filePath),
-      ensureDrawioViewerLoaded(),
-    ]);
+    const { content } = await this.vaultApiClient.readFile(entry.filePath);
 
     if (!entry.wrapper?.isConnected || !entry.viewerElement?.isConnected) {
       return;
     }
 
     const theme = this.getTheme?.() === 'light' ? 'light' : 'dark';
-    const graphElement = document.createElement('div');
-    graphElement.className = 'mxgraph drawio-viewer-frame';
-    graphElement.dataset.action = 'open-file';
-    graphElement.dataset.filePath = entry.filePath;
-    graphElement.setAttribute('role', 'button');
-    graphElement.setAttribute('tabindex', '0');
-    graphElement.setAttribute('aria-label', `Open ${entry.label.replace(/\.drawio$/i, '')}`);
-    graphElement.addEventListener('click', (event) => {
-      event.preventDefault();
-      this.onOpenFile?.(entry.filePath);
-    });
-    graphElement.addEventListener('keydown', (event) => {
-      if (event.key !== 'Enter' && event.key !== ' ') {
-        return;
-      }
-
-      event.preventDefault();
-      this.onOpenFile?.(entry.filePath);
-    });
-    graphElement.dataset.mxgraph = JSON.stringify({
-      'check-visible-state': false,
-      center: true,
-      border: 0,
-      'dark-mode': theme,
-      editable: false,
-      fit: 1,
-      lightbox: false,
-      nav: false,
-      resize: false,
-      tooltips: false,
-      xml: String(content ?? ''),
-    });
-
     const viewerHost = entry.wrapper.querySelector('.drawio-viewer-shell') ?? entry.viewerElement;
-    viewerHost.replaceChildren(graphElement);
-    entry.viewerElement = graphElement;
-
-    if (typeof viewer.createViewerForElement === 'function') {
-      viewer.createViewerForElement(graphElement);
-      return;
-    }
-
-    viewer.processElements();
+    entry.viewerElement = await renderDrawioViewer(viewerHost, {
+      ariaLabel: `Open ${entry.label.replace(/\.drawio$/i, '')}`,
+      className: 'mxgraph drawio-viewer-frame',
+      onActivate: () => this.onOpenFile?.(entry.filePath),
+      source: String(content ?? ''),
+      theme,
+    });
   }
 
   buildIframeUrl(entry) {

package/src/client/presentation/drawio-viewer.js

@@ -0,0 +1,118 @@
+const DRAWIO_VIEWER_SCRIPT_URL = 'https://viewer.diagrams.net/js/viewer-static.min.js';
+
+let drawioViewerLoadPromise = null;
+
+export function ensureDrawioViewerLoaded() {
+  if (window.GraphViewer?.processElements) {
+    return Promise.resolve(window.GraphViewer);
+  }
+
+  if (drawioViewerLoadPromise) {
+    return drawioViewerLoadPromise;
+  }
+
+  drawioViewerLoadPromise = new Promise((resolve, reject) => {
+    const existingScript = document.querySelector('script[data-collabmd-drawio-viewer]');
+    const script = existingScript instanceof HTMLScriptElement
+      ? existingScript
+      : document.createElement('script');
+
+    const cleanup = () => {
+      script.removeEventListener('error', handleError);
+      script.removeEventListener('load', handleLoad);
+    };
+
+    const handleError = () => {
+      cleanup();
+      drawioViewerLoadPromise = null;
+      reject(new Error('Failed to load draw.io viewer'));
+    };
+
+    const handleLoad = () => {
+      cleanup();
+      if (!window.GraphViewer?.processElements) {
+        drawioViewerLoadPromise = null;
+        reject(new Error('draw.io viewer did not initialize'));
+        return;
+      }
+
+      resolve(window.GraphViewer);
+    };
+
+    script.addEventListener('error', handleError, { once: true });
+    script.addEventListener('load', handleLoad, { once: true });
+
+    if (!existingScript) {
+      script.src = DRAWIO_VIEWER_SCRIPT_URL;
+      script.async = true;
+      script.dataset.collabmdDrawioViewer = 'true';
+      document.head.append(script);
+    } else if (window.GraphViewer?.processElements) {
+      handleLoad();
+    }
+  });
+
+  return drawioViewerLoadPromise;
+}
+
+export function createDrawioViewerElement({
+  ariaLabel = '',
+  className = 'drawio-viewer-frame',
+  onActivate = null,
+  source = '',
+  theme = 'dark',
+} = {}) {
+  const graphElement = document.createElement('div');
+  graphElement.className = className;
+  if (ariaLabel) {
+    graphElement.setAttribute('aria-label', ariaLabel);
+  }
+
+  if (typeof onActivate === 'function') {
+    graphElement.dataset.action = 'open-file';
+    graphElement.setAttribute('role', 'button');
+    graphElement.setAttribute('tabindex', '0');
+    graphElement.addEventListener('click', (event) => {
+      event.preventDefault();
+      onActivate();
+    });
+    graphElement.addEventListener('keydown', (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      onActivate();
+    });
+  }
+
+  graphElement.dataset.mxgraph = JSON.stringify({
+    'check-visible-state': false,
+    center: true,
+    border: 0,
+    'dark-mode': theme === 'light' ? 'light' : 'dark',
+    editable: false,
+    fit: 1,
+    lightbox: false,
+    nav: false,
+    resize: false,
+    tooltips: false,
+    xml: String(source ?? ''),
+  });
+
+  return graphElement;
+}
+
+export async function renderDrawioViewer(host, options = {}) {
+  const viewer = await ensureDrawioViewerLoaded();
+  const graphElement = createDrawioViewerElement(options);
+  host.replaceChildren(graphElement);
+
+  if (typeof viewer.createViewerForElement === 'function') {
+    viewer.createViewerForElement(graphElement);
+  } else {
+    viewer.processElements();
+  }
+
+  return graphElement;
+}

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

@@ -1,6 +1,6 @@
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
 import { reconcileEmbedEntries } from './excalidraw-embed-reconciler.js';
-import { resolveAppUrl } from '../domain/runtime-paths.js';
+import { resolveAppUrl, resolveWsServerOverride } from '../domain/runtime-paths.js';
 import {
   cancelIdleRender,
   isNearViewport,
@@ -15,11 +15,19 @@ const MAX_IFRAME_BOOT_ATTEMPTS = 3;
 const MIN_HEIGHT = 200;
 const EDITOR_IFRAME_PATH = '/excalidraw-editor.html';
 
+function findEmbedPlaceholder(previewElement, key) {
+  const placeholders = previewElement?.querySelectorAll?.(
+    '.excalidraw-embed-placeholder[data-embed-key]',
+  );
+  return Array.from(placeholders || []).find((placeholder) => placeholder.dataset?.embedKey === key) || null;
+}
+
 export class ExcalidrawEmbedController {
   constructor({
     getTheme,
     getLocalUser,
     onOpenFile = null,
+    onStopFollowing = null,
     onToggleQuickSwitcher = null,
     previewContainer,
     previewElement,
@@ -28,6 +36,7 @@ export class ExcalidrawEmbedController {
     this.getTheme = getTheme;
     this.getLocalUser = getLocalUser;
     this.onOpenFile = onOpenFile;
+    this.onStopFollowing = onStopFollowing;
     this.onToggleQuickSwitcher = onToggleQuickSwitcher;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
@@ -70,12 +79,16 @@ export class ExcalidrawEmbedController {
 
     this.embedEntries.forEach((entry) => {
       this._clearEntryBootTimeout(entry);
+      entry.resizerCleanup?.();
+      entry.resizerCleanup = null;
       entry.wrapper?.remove();
       entry.placeholder = null;
     });
     this.embedEntries.clear();
     if (this.warmEntry) {
       this._clearEntryBootTimeout(this.warmEntry);
+      this.warmEntry.resizerCleanup?.();
+      this.warmEntry.resizerCleanup = null;
       this.warmEntry.wrapper?.remove();
       this.warmEntry = null;
     }
@@ -219,6 +232,25 @@ export class ExcalidrawEmbedController {
     });
   }
 
+  openCommentThread(filePath, threadId) {
+    if (!filePath || !threadId) {
+      return false;
+    }
+
+    const entry = this._findEntryByFilePath(filePath);
+    if (!entry) {
+      return false;
+    }
+
+    entry.pendingCommentThreadId = threadId;
+    if (entry.isReady) {
+      this._postPendingCommentThread(entry);
+    } else if (!entry.wrapper) {
+      this._enqueueHydration(entry, { prioritize: true });
+    }
+    return true;
+  }
+
   prepareFileDisconnect(filePath, { timeoutMs = 10000 } = {}) {
     const entry = this._findEntryByFilePath(filePath);
     if (!entry?.iframe?.contentWindow) {
@@ -394,6 +426,7 @@ export class ExcalidrawEmbedController {
       entry.maxButton = mount.maxButton;
       entry.openButton = mount.openButton;
       entry.instanceId = mount.instanceId;
+      entry.resizerCleanup = mount.resizerCleanup;
       entry.isReady = false;
       entry.bootFilePath = entry.filePath;
       entry.bootMode = this._getEntryMode(entry);
@@ -414,7 +447,7 @@ export class ExcalidrawEmbedController {
   _attachWrapper(entry) {
     const placeholder = entry.placeholder?.isConnected
       ? entry.placeholder
-      : this.previewElement?.querySelector(`.excalidraw-embed-placeholder[data-embed-key="${entry.key}"]`);
+      : findEmbedPlaceholder(this.previewElement, entry.key);
 
     if (!placeholder) {
       return;
@@ -476,6 +509,8 @@ export class ExcalidrawEmbedController {
     }
 
     this._clearEntryBootTimeout(entry);
+    entry.resizerCleanup?.();
+    entry.resizerCleanup = null;
     if (this.warmEntry === entry) {
       this.warmEntry = null;
     }
@@ -634,7 +669,7 @@ export class ExcalidrawEmbedController {
     }
 
     const hostSearchParams = new URLSearchParams(window.location.search);
-    const serverOverride = hostSearchParams.get('server');
+    const serverOverride = resolveWsServerOverride();
     if (serverOverride) {
       iframeUrl.searchParams.set('server', serverOverride);
     }
@@ -702,7 +737,7 @@ export class ExcalidrawEmbedController {
     const resizer = document.createElement('div');
     resizer.className = 'excalidraw-embed-resizer';
     resizer.title = 'Drag to resize';
-    this._setupResizer(resizer, iframe, () => {
+    const resizerCleanup = this._setupResizer(resizer, iframe, () => {
       this._syncEntryLayout(entry);
       this._requestPreviewViewportFit(entry);
     });
@@ -769,6 +804,7 @@ export class ExcalidrawEmbedController {
       labelElement: label,
       maxButton: maxBtn,
       openButton: openBtn,
+      resizerCleanup,
       wrapper,
     };
   }
@@ -793,6 +829,7 @@ export class ExcalidrawEmbedController {
   _setupResizer(resizer, iframe, onResizeEnd = null) {
     let startY = 0;
     let startHeight = 0;
+    let isDragging = false;
 
     const onPointerMove = (event) => {
       const delta = event.clientY - startY;
@@ -801,20 +838,37 @@ export class ExcalidrawEmbedController {
       iframe.style.pointerEvents = 'none';
     };
 
-    const onPointerUp = () => {
+    const stopDragging = () => {
+      if (!isDragging) {
+        return;
+      }
+
+      isDragging = false;
       iframe.style.pointerEvents = '';
       document.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
+    };
+
+    const onPointerUp = () => {
+      stopDragging();
       onResizeEnd?.();
     };
 
-    resizer.addEventListener('pointerdown', (event) => {
+    const onPointerDown = (event) => {
       event.preventDefault();
+      isDragging = true;
       startY = event.clientY;
       startHeight = iframe.offsetHeight;
       document.addEventListener('pointermove', onPointerMove);
       document.addEventListener('pointerup', onPointerUp);
-    });
+    };
+
+    resizer.addEventListener('pointerdown', onPointerDown);
+
+    return () => {
+      resizer.removeEventListener?.('pointerdown', onPointerDown);
+      stopDragging();
+    };
   }
 
   _ensureOverlayRoot() {
@@ -1064,7 +1118,7 @@ export class ExcalidrawEmbedController {
 
     const placeholder = entry.placeholder?.isConnected
       ? entry.placeholder
-      : this.previewElement?.querySelector(`.excalidraw-embed-placeholder[data-embed-key="${entry.key}"]`);
+      : findEmbedPlaceholder(this.previewElement, entry.key);
 
     if (!placeholder) {
       return;
@@ -1163,6 +1217,7 @@ export class ExcalidrawEmbedController {
         theme: this.getTheme?.() || 'dark',
       });
       this._syncEntryFollowState(entry);
+      this._postPendingCommentThread?.(entry);
       if (this._entryNeedsHardReload(entry)) {
         void this._hydrateEntry(entry);
       }
@@ -1174,6 +1229,11 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    if (msg.type === 'stop-following') {
+      this.onStopFollowing?.();
+      return;
+    }
+
     if (msg.type === 'error') {
       if (entry.isParked) {
         return;
@@ -1227,6 +1287,19 @@ export class ExcalidrawEmbedController {
     entry?.iframe?.contentWindow?.postMessage(payload, window.location.origin);
   }
 
+  _postPendingCommentThread(entry) {
+    if (!entry?.isReady || !entry.pendingCommentThreadId) {
+      return;
+    }
+
+    this._postMessageToEntry(entry, {
+      source: 'collabmd-host',
+      threadId: entry.pendingCommentThreadId,
+      type: 'open-comment-thread',
+    });
+    entry.pendingCommentThreadId = null;
+  }
+
   _requestPreviewViewportFit(entry) {
     if (this._isFilePreviewEntry(entry)) {
       return;

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

@@ -1,6 +1,9 @@
 import {
   getVaultFileExtension,
+  isVaultFilePath,
+  VAULT_FILE_EXTENSIONS,
 } from '../../domain/file-kind.js';
+import { pickFiles } from '../browser-utils.js';
 import {
   createBaseStarter,
   composeVaultChildPath,
@@ -8,6 +11,7 @@ import {
   createMarkdownStarter,
   createMermaidStarter,
   createPlantUmlStarter,
+  createStructurizrStarter,
   ensureVaultExtension,
   getVaultPathLeaf,
   getVaultPathParent,
@@ -28,6 +32,8 @@ function formatCount(value, singularLabel, pluralLabel) {
   return `${value} ${value === 1 ? singularLabel : pluralLabel}`;
 }
 
+const VAULT_FILE_PICKER_ACCEPT = VAULT_FILE_EXTENSIONS.join(',');
+
 function createEmptyExcalidrawScene() {
   return JSON.stringify({
     type: 'excalidraw',
@@ -116,6 +122,18 @@ export class FileActionController {
 
   getCreateActions({ parentDir = '' } = {}) {
     return [
+      {
+        contextLabel: 'Upload files',
+        group: 'File',
+        hint: 'Supported vault files',
+        icon: this.getCreateActionIcon('upload'),
+        id: 'upload',
+        label: 'Upload files',
+        meta: 'Multiple',
+        onSelect: () => {
+          void this.handleUploadFiles({ parentDir });
+        },
+      },
       {
         contextLabel: 'New markdown file',
         group: 'Note',
@@ -176,6 +194,16 @@ export class FileActionController {
         meta: '.puml',
         onSelect: () => this.handleNewPlantUml({ parentDir }),
       },
+      {
+        contextLabel: 'New Structurizr workspace',
+        group: 'Diagram',
+        hint: 'Structurizr DSL',
+        icon: this.getCreateActionIcon('structurizr'),
+        id: 'structurizr',
+        label: 'Structurizr workspace',
+        meta: '.dsl',
+        onSelect: () => this.handleNewStructurizr({ parentDir }),
+      },
       {
         contextLabel: 'New folder',
         group: 'Structure',
@@ -241,10 +269,13 @@ export class FileActionController {
 
   getCreateActionIcon(kind) {
     switch (kind) {
+      case 'upload':
+        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 16V4"/><path d="m7 9 5-5 5 5"/><path d="M5 20h14"/></svg>';
       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':
+      case 'structurizr':
         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>';
@@ -476,6 +507,47 @@ export class FileActionController {
     }
   }
 
+  async uploadVaultFiles(files = [], { parentDir = '' } = {}) {
+    const normalizedParentDir = normalizeVaultPathInput(parentDir);
+    let uploaded = false;
+
+    for (const file of Array.from(files ?? [])) {
+      const fileName = getVaultPathLeaf(file?.name);
+      const filePath = composeVaultChildPath(normalizedParentDir, fileName);
+      if (!fileName || !isVaultFilePath(filePath)) {
+        this.showToast(`Unsupported file type: ${fileName || 'unnamed file'}`);
+        continue;
+      }
+
+      try {
+        await this.runWorkspaceMutation((requestId) => this.vaultClient.uploadFile({
+          file,
+          path: filePath,
+          requestId,
+        }));
+        uploaded = true;
+        this.state.expandDirectoryPath(filePath, { includeLeaf: false });
+      } catch (error) {
+        this.showToast(`${fileName}: ${error?.message || 'Failed to upload file'}`);
+      }
+    }
+
+    if (uploaded) {
+      await this.refresh();
+    }
+
+    return uploaded;
+  }
+
+  async handleUploadFiles({ parentDir = '' } = {}) {
+    const files = await pickFiles({ accept: VAULT_FILE_PICKER_ACCEPT, multiple: true });
+    if (files.length === 0) {
+      return false;
+    }
+
+    return this.uploadVaultFiles(files, { parentDir });
+  }
+
   async createVaultFile(filePath, content, { openAfterCreate = false, errorMessage = 'Failed to create file' } = {}) {
     try {
       await this.runWorkspaceMutation((requestId) => this.vaultClient.createFile(withRequestId({
@@ -953,6 +1025,36 @@ export class FileActionController {
     });
   }
 
+  handleNewStructurizr({ parentDir = '' } = {}) {
+    const context = this.getCreateContext(parentDir);
+
+    this.openActionDialog({
+      title: 'Create Structurizr workspace',
+      copy: context.normalizedParentDir
+        ? 'Create a collaborative C4 workspace inside the selected folder.'
+        : 'Create a collaborative C4 workspace in the vault.',
+      label: `Workspace ${context.inputLabelSuffix}`,
+      hint: `${context.hintPrefix} ".dsl" is added automatically. workspace.dsl is conventional; any workspace .dsl file can render.`,
+      note: context.note,
+      placeholder: 'workspace',
+      submitLabel: 'Create workspace',
+      emptyMessage: 'Workspace path is required',
+      onSubmit: (value) => {
+        const normalizedPath = normalizeVaultPathInput(value);
+        if (!normalizedPath) {
+          this.showToast('Workspace path is required');
+          return false;
+        }
+
+        const starter = createStructurizrStarter(composeVaultChildPath(context.normalizedParentDir, normalizedPath));
+        return this.createVaultFile(starter.path, starter.content, {
+          errorMessage: 'Failed to create Structurizr workspace',
+          openAfterCreate: true,
+        });
+      },
+    });
+  }
+
   handleRenameFile(filePath) {
     const extension = getVaultFileExtension(filePath) || '.md';
 

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

@@ -24,11 +24,6 @@ export class FileExplorerController {
     this.threadCounts = new Map();
     this.view = new FileExplorerView({
       mobileBreakpointQuery,
-      onDirectorySelect: (pathValue) => {
-        this.state.expandDirectoryPath(pathValue);
-        this.state.setSearchQuery('');
-        this.renderTree({ reset: true });
-      },
       onDirectoryToggle: (pathValue) => {
         this.state.toggleDirectory(pathValue);
         if (!this.view.rerenderDirectoryBranch(pathValue, this.state.tree, {