collabmd 0.1.44 → 0.1.46

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',
@@ -57,7 +63,9 @@ export class FileActionController {
       : { matches: false },
     onFileDelete,
     onFileSelect,
+    onShowFileExtensionsChange,
     pendingWorkspaceRequestIds = null,
+    showFileExtensions = false,
     state,
     toastController,
     vaultClient,
@@ -66,13 +74,16 @@ export class FileActionController {
   }) {
     this.onFileDelete = onFileDelete;
     this.onFileSelect = onFileSelect;
+    this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.pendingWorkspaceRequestIds = pendingWorkspaceRequestIds;
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.state = state;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.view = view;
     this.refresh = refresh;
     this.createButton = document.getElementById('sidebarCreateBtn');
+    this.fileExplorerOptionsButton = document.getElementById('fileExplorerOptionsBtn');
     this.actionDialog = document.getElementById('fileActionDialog');
     this.actionForm = document.getElementById('fileActionForm');
     this.actionTitle = document.getElementById('fileActionTitle');
@@ -87,6 +98,9 @@ export class FileActionController {
     this.createMenu = new CreateMenuPresenter({
       mobileBreakpointQuery,
     });
+    this.fileExplorerOptionsMenu = new CreateMenuPresenter({
+      mobileBreakpointQuery,
+    });
     this.pendingAction = null;
     this.actionBusy = false;
   }
@@ -95,6 +109,9 @@ export class FileActionController {
     this.createButton?.addEventListener('click', () => {
       this.openRootCreateMenu({ anchor: this.createButton });
     });
+    this.fileExplorerOptionsButton?.addEventListener('click', () => {
+      this.openFileExplorerOptionsMenu({ anchor: this.fileExplorerOptionsButton });
+    });
     this.actionCancelButton?.addEventListener('click', () => this.closeActionDialog());
     this.actionForm?.addEventListener('submit', (event) => {
       event.preventDefault();
@@ -105,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',
@@ -165,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',
@@ -230,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>';
@@ -313,6 +355,7 @@ export class FileActionController {
 
     this.pendingAction = { requiresInput, emptyMessage, onSubmit };
     this.createMenu.close({ restoreFocus: false });
+    this.fileExplorerOptionsMenu.close({ restoreFocus: false });
     this.view?.removeContextMenu?.();
 
     this.actionTitle.textContent = title;
@@ -464,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({
@@ -716,6 +800,7 @@ export class FileActionController {
 
   openCreateMenu({ anchor = this.createButton, parentDir = '' } = {}) {
     this.view?.removeContextMenu?.();
+    this.fileExplorerOptionsMenu.close({ restoreFocus: false });
     this.createMenu.toggle({
       anchor,
       items: this.getCreateActions({ parentDir }),
@@ -723,6 +808,25 @@ export class FileActionController {
     });
   }
 
+  openFileExplorerOptionsMenu({ anchor = this.fileExplorerOptionsButton } = {}) {
+    this.view?.removeContextMenu?.();
+    this.createMenu.close({ restoreFocus: false });
+    this.fileExplorerOptionsMenu.toggle({
+      anchor,
+      items: [{
+        icon: '<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="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z"></path><circle cx="12" cy="12" r="2.5"></circle></svg>',
+        id: 'show-file-extensions',
+        label: 'Show file extensions',
+        meta: this.showFileExtensions ? 'On' : 'Off',
+        onSelect: () => {
+          this.showFileExtensions = !this.showFileExtensions;
+          this.onShowFileExtensionsChange?.(this.showFileExtensions);
+        },
+      }],
+      title: 'File explorer options',
+    });
+  }
+
   handleNewFile({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 
@@ -921,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

@@ -9,14 +9,18 @@ export class FileExplorerController {
     onFileSelect,
     onFileDelete,
     pendingWorkspaceRequestIds = null,
+    onShowFileExtensionsChange,
+    showFileExtensions = false,
     toastController,
     vaultClient,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
+    this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.state = new FileTreeState();
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.threadCounts = new Map();
     this.view = new FileExplorerView({
       mobileBreakpointQuery,
@@ -27,7 +31,12 @@ export class FileExplorerController {
       },
       onDirectoryToggle: (pathValue) => {
         this.state.toggleDirectory(pathValue);
-        this.renderTree();
+        if (!this.view.rerenderDirectoryBranch(pathValue, this.state.tree, {
+          activeFilePath: this.state.activeFilePath,
+          expandedDirs: this.state.expandedDirs,
+        })) {
+          this.renderTree();
+        }
       },
       onEntryDrop: (payload) => this.actionController.moveEntryByDrop(payload),
       onFileContextMenu: (event, payload) => {
@@ -54,7 +63,13 @@ export class FileExplorerController {
       mobileBreakpointQuery,
       onFileDelete: this.onFileDelete,
       onFileSelect: this.onFileSelect,
+      onShowFileExtensionsChange: (enabled) => {
+        this.showFileExtensions = Boolean(enabled);
+        this.onShowFileExtensionsChange?.(this.showFileExtensions);
+        this.renderTree();
+      },
       pendingWorkspaceRequestIds,
+      showFileExtensions: this.showFileExtensions,
       refresh: () => this.refresh(),
       state: this.state,
       toastController: this.toastController,
@@ -86,15 +101,25 @@ export class FileExplorerController {
   }
 
   setActiveFile(filePath) {
+    const expandedDirectoryCount = this.state.expandedDirs.size;
     this.state.setActiveFile(filePath);
-    this.renderTree();
+    if (this.state.searchQuery) {
+      this.view.setActiveFile(filePath);
+      return;
+    }
+    if (
+      this.state.expandedDirs.size !== expandedDirectoryCount
+      || !this.view.setActiveFile(filePath)
+    ) {
+      this.renderTree();
+    }
   }
 
   setThreadCounts(threadCounts = new Map()) {
     this.threadCounts = threadCounts instanceof Map
       ? new Map(threadCounts)
       : new Map(Object.entries(threadCounts ?? {}));
-    this.renderTree();
+    this.view.setThreadCounts(this.threadCounts);
   }
 
   revealFile(filePath, { clearSearch = false } = {}) {
@@ -111,6 +136,10 @@ export class FileExplorerController {
     return this.state.flatFiles;
   }
 
+  get fileEntries() {
+    return this.state.flatFileEntries;
+  }
+
   get flatDocumentFiles() {
     return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
   }
@@ -126,6 +155,7 @@ export class FileExplorerController {
       reset,
       searchMatches: this.state.getSearchMatches(),
       searchQuery: this.state.searchQuery,
+      showFileExtensions: this.showFileExtensions,
       threadCounts: this.threadCounts,
       tree: this.state.tree,
     });

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) {
@@ -52,6 +53,7 @@ export class FileExplorerView {
     this.searchInput = document.getElementById('fileSearchInput');
     this.renderedDirectoryWrappers = new Map();
     this.renderedChildContainers = new Map();
+    this.renderedFileItems = new Map();
     this.lastRenderMode = 'tree';
     this.longPressTimer = 0;
     this.longPressContext = null;
@@ -66,6 +68,7 @@ export class FileExplorerView {
     this.autoExpandTargetPath = '';
     this.rootDropZone = null;
     this.threadCounts = new Map();
+    this.showFileExtensions = false;
   }
 
   initialize() {
@@ -120,17 +123,51 @@ export class FileExplorerView {
   }
 
   revealFile(filePath) {
-    const fileItem = Array.from(this.treeContainer?.querySelectorAll('.file-tree-file') ?? [])
-      .find((element) => element.dataset.path === filePath);
-    fileItem?.scrollIntoView({ block: 'nearest' });
+    this.renderedFileItems.get(filePath)?.scrollIntoView({ block: 'nearest' });
   }
 
-  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, threadCounts = new Map(), tree }) {
+  setActiveFile(filePath) {
+    this.treeContainer?.querySelector('.file-tree-file.active')?.classList.remove('active');
+    if (!filePath) {
+      return true;
+    }
+
+    const fileItem = this.renderedFileItems.get(filePath);
+    fileItem?.classList.add('active');
+    return Boolean(fileItem);
+  }
+
+  setThreadCounts(threadCounts) {
+    this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
+    this.renderedFileItems.forEach((button, filePath) => {
+      const threadCount = Number(this.threadCounts.get(filePath) ?? 0) || 0;
+      let badge = button.querySelector('.file-tree-comment-count');
+      button.classList.toggle('has-comments', threadCount > 0);
+
+      if (threadCount <= 0) {
+        delete button.dataset.threadCount;
+        badge?.remove();
+        return;
+      }
+
+      button.dataset.threadCount = String(threadCount);
+      if (!badge) {
+        badge = document.createElement('span');
+        badge.className = 'file-tree-comment-count';
+        button.appendChild(badge);
+      }
+      badge.textContent = String(threadCount);
+      badge.setAttribute('aria-label', `${threadCount} open comment thread${threadCount === 1 ? '' : 's'}`);
+    });
+  }
+
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, showFileExtensions = false, threadCounts = new Map(), tree }) {
     if (!this.treeContainer) {
       return;
     }
 
     this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.currentSearchQuery = String(searchQuery ?? '');
     if (this.currentSearchQuery) {
       this.clearDragFeedback();
@@ -248,6 +285,7 @@ export class FileExplorerView {
   resetTreeIndexes() {
     this.renderedDirectoryWrappers.clear();
     this.renderedChildContainers.clear();
+    this.renderedFileItems.clear();
   }
 
   renderNodes(nodes, container, { activeFilePath, depth, expandedDirs }) {
@@ -408,6 +446,11 @@ export class FileExplorerView {
         this.renderedChildContainers.delete(pathValue);
       }
     });
+    Array.from(this.renderedFileItems.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedFileItems.delete(pathValue);
+      }
+    });
   }
 
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
@@ -418,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');
@@ -433,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');
     }
@@ -453,9 +504,10 @@ export class FileExplorerView {
     if (threadCount > 0) {
       button.dataset.threadCount = String(threadCount);
     }
+    const displayName = this.showFileExtensions ? String(name ?? '') : stripVaultFileExtension(name);
     button.innerHTML = `
-      ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
-      <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
+      ${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>` : ''}
     `;
     this.configureDragSource(button, { path: filePath, type: 'file' });
@@ -474,6 +526,7 @@ export class FileExplorerView {
       this.onFileContextMenu?.(this.createLongPressEvent(button), { filePath, type: 'file' });
     });
 
+    this.renderedFileItems.set(filePath, button);
     return button;
   }
 
@@ -908,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

@@ -1,6 +1,6 @@
 import { normalizeVaultPathInput } from '../domain/vault-paths.js';
 
-function flattenTree(nodes, files = [], searchEntries = []) {
+function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
   for (const node of nodes) {
     if (!node?.path || !node?.type) {
       continue;
@@ -20,18 +20,24 @@ function flattenTree(nodes, files = [], searchEntries = []) {
       || node.type === 'drawio'
       || node.type === 'mermaid'
       || node.type === 'plantuml'
+      || node.type === 'structurizr'
+      || node.type === 'pdf'
       || node.type === 'image'
     ) {
       files.push(node.path);
+      fileEntries.push({
+        mtimeMs: node.mtimeMs,
+        path: node.path,
+      });
       continue;
     }
 
     if (node.type === 'directory' && Array.isArray(node.children)) {
-      flattenTree(node.children, files, searchEntries);
+      flattenTree(node.children, files, searchEntries, fileEntries);
     }
   }
 
-  return { files, searchEntries };
+  return { fileEntries, files, searchEntries };
 }
 
 function findNodeByPath(nodes, pathValue) {
@@ -82,6 +88,7 @@ export class FileTreeState {
   constructor() {
     this.tree = [];
     this.flatFiles = [];
+    this.flatFileEntries = [];
     this.flatSearchEntries = [];
     this.activeFilePath = null;
     this.expandedDirs = new Set();
@@ -90,8 +97,9 @@ export class FileTreeState {
 
   setTree(tree) {
     this.tree = Array.isArray(tree) ? tree : [];
-    const flattened = flattenTree(this.tree, [], []);
+    const flattened = flattenTree(this.tree, [], [], []);
     this.flatFiles = flattened.files;
+    this.flatFileEntries = flattened.fileEntries;
     this.flatSearchEntries = flattened.searchEntries;
   }