collabmd 0.1.45 → 0.1.46

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,6 +15,13 @@ 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,
@@ -70,12 +77,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 +230,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 +424,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 +445,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 +507,8 @@ export class ExcalidrawEmbedController {
     }
 
     this._clearEntryBootTimeout(entry);
+    entry.resizerCleanup?.();
+    entry.resizerCleanup = null;
     if (this.warmEntry === entry) {
       this.warmEntry = null;
     }
@@ -634,7 +667,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 +735,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 +802,7 @@ export class ExcalidrawEmbedController {
       labelElement: label,
       maxButton: maxBtn,
       openButton: openBtn,
+      resizerCleanup,
       wrapper,
     };
   }
@@ -793,6 +827,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 +836,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 +1116,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 +1215,7 @@ export class ExcalidrawEmbedController {
         theme: this.getTheme?.() || 'dark',
       });
       this._syncEntryFollowState(entry);
+      this._postPendingCommentThread?.(entry);
       if (this._entryNeedsHardReload(entry)) {
         void this._hydrateEntry(entry);
       }
@@ -1227,6 +1280,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-view.js

@@ -5,6 +5,7 @@ import {
 import { escapeHtml } from '../domain/vault-utils.js';
 import { getVaultPathLeaf, getVaultPathParent } from '../domain/vault-paths.js';
 import { buttonClassNames } from './components/ui/button.js';
+import { getVaultFileIconSvg } from './file-icon-svg.js';
 
 function findNodeByPath(nodes = [], pathValue = '') {
   for (const node of nodes) {
@@ -460,8 +461,10 @@ export class FileExplorerView {
     const isExcalidraw = fileType === 'excalidraw';
     const isBase = fileType === 'base';
     const isImage = fileType === 'image';
+    const isPdf = fileType === 'pdf';
     const isMermaid = fileType === 'mermaid';
     const isPlantUml = fileType === 'plantuml';
+    const isStructurizr = fileType === 'structurizr';
 
     if (isBase) {
       button.classList.add('is-base');
@@ -475,12 +478,18 @@ export class FileExplorerView {
     if (isImage) {
       button.classList.add('is-image');
     }
+    if (isPdf) {
+      button.classList.add('is-pdf');
+    }
     if (isMermaid) {
       button.classList.add('is-mermaid');
     }
     if (isPlantUml) {
       button.classList.add('is-plantuml');
     }
+    if (isStructurizr) {
+      button.classList.add('is-structurizr');
+    }
     if (filePath === activeFilePath) {
       button.classList.add('active');
     }
@@ -497,7 +506,7 @@ export class FileExplorerView {
     }
     const displayName = this.showFileExtensions ? String(name ?? '') : stripVaultFileExtension(name);
     button.innerHTML = `
-      ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
+      ${getVaultFileIconSvg(filePath)}
       <span class="file-tree-name">${escapeHtml(displayName)}</span>
       ${threadCount > 0 ? `<span class="file-tree-comment-count" aria-label="${threadCount} open comment thread${threadCount === 1 ? '' : 's'}">${threadCount}</span>` : ''}
     `;
@@ -952,34 +961,6 @@ export class FileExplorerView {
     return true;
   }
 
-  getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml }) {
-    if (isBase) {
-      return '<svg class="file-tree-icon" 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>';
-    }
-
-    if (isDrawio) {
-      return '<svg class="file-tree-icon" 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>';
-    }
-
-    if (isExcalidraw) {
-      return '<svg class="file-tree-icon" 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>';
-    }
-
-    if (isImage) {
-      return '<svg class="file-tree-icon" 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="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m21 16-5-5L7 20"/><path d="m14 14 2 2"/></svg>';
-    }
-
-    if (isMermaid) {
-      return '<svg class="file-tree-icon" 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>';
-    }
-
-    if (isPlantUml) {
-      return '<svg class="file-tree-icon" 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>';
-    }
-
-    return '<svg class="file-tree-icon" 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>';
-  }
-
   showContextMenu(event, items) {
     this.removeContextMenu();
 

package/src/client/presentation/file-icon-svg.js

@@ -0,0 +1,40 @@
+import { getVaultFileKind } from '../../domain/file-kind.js';
+
+const SVG_ATTRIBUTES = 'width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+
+function createIcon(className, content) {
+  return `<svg class="${className}" ${SVG_ATTRIBUTES}>${content}</svg>`;
+}
+
+export function getVaultFileIconSvg(filePath, {
+  className = 'file-tree-icon',
+} = {}) {
+  const kind = getVaultFileKind(filePath) ?? 'file';
+  const iconClass = className;
+
+  if (kind === 'base') {
+    return createIcon(iconClass, '<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"/>');
+  }
+
+  if (kind === 'drawio' || kind === 'plantuml' || kind === 'structurizr') {
+    return createIcon(iconClass, '<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"/>');
+  }
+
+  if (kind === 'excalidraw') {
+    return createIcon(iconClass, '<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"/>');
+  }
+
+  if (kind === 'image') {
+    return createIcon(iconClass, '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m21 16-5-5L7 20"/><path d="m14 14 2 2"/>');
+  }
+
+  if (kind === 'pdf') {
+    return createIcon(iconClass, '<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"/><path d="M8 15h8"/><path d="M8 18h5"/>');
+  }
+
+  if (kind === 'mermaid') {
+    return createIcon(iconClass, '<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"/>');
+  }
+
+  return createIcon(iconClass, '<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"/>');
+}

package/src/client/presentation/file-tree-state.js

@@ -20,6 +20,8 @@ function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
       || node.type === 'drawio'
       || node.type === 'mermaid'
       || node.type === 'plantuml'
+      || node.type === 'structurizr'
+      || node.type === 'pdf'
       || node.type === 'image'
     ) {
       files.push(node.path);