collabmd 0.1.45 → 0.1.47

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) {
@@ -31,7 +32,6 @@ export class FileExplorerView {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onEntryDrop,
-    onDirectorySelect,
     onDirectoryToggle,
     onFileContextMenu,
     onFileSelect,
@@ -40,7 +40,6 @@ export class FileExplorerView {
     onValidateDrop,
   }) {
     this.onEntryDrop = onEntryDrop;
-    this.onDirectorySelect = onDirectorySelect;
     this.onDirectoryToggle = onDirectoryToggle;
     this.onFileContextMenu = onFileContextMenu;
     this.onFileSelect = onFileSelect;
@@ -50,6 +49,7 @@ export class FileExplorerView {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.treeContainer = document.getElementById('fileTree');
     this.searchInput = document.getElementById('fileSearchInput');
+    this.searchStatus = document.getElementById('fileSearchStatus');
     this.renderedDirectoryWrappers = new Map();
     this.renderedChildContainers = new Map();
     this.renderedFileItems = new Map();
@@ -121,6 +121,18 @@ export class FileExplorerView {
     });
   }
 
+  updateSearchStatus(query, matchCount = null) {
+    if (!this.searchStatus) {
+      return;
+    }
+
+    const status = String(query ?? '').trim() && Number.isInteger(matchCount)
+      ? `${matchCount} match${matchCount === 1 ? '' : 'es'}`
+      : '';
+    this.searchStatus.textContent = status;
+    this.searchStatus.classList.toggle('hidden', !status);
+  }
+
   revealFile(filePath) {
     this.renderedFileItems.get(filePath)?.scrollIntoView({ block: 'nearest' });
   }
@@ -142,6 +154,10 @@ export class FileExplorerView {
       const threadCount = Number(this.threadCounts.get(filePath) ?? 0) || 0;
       let badge = button.querySelector('.file-tree-comment-count');
       button.classList.toggle('has-comments', threadCount > 0);
+      button.setAttribute(
+        'aria-label',
+        `${filePath}${threadCount > 0 ? `, ${threadCount} open comment thread${threadCount === 1 ? '' : 's'}` : ''}`,
+      );
 
       if (threadCount <= 0) {
         delete button.dataset.threadCount;
@@ -156,7 +172,7 @@ export class FileExplorerView {
         button.appendChild(badge);
       }
       badge.textContent = String(threadCount);
-      badge.setAttribute('aria-label', `${threadCount} open comment thread${threadCount === 1 ? '' : 's'}`);
+      badge.setAttribute('aria-hidden', 'true');
     });
   }
 
@@ -167,7 +183,7 @@ export class FileExplorerView {
 
     this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
     this.showFileExtensions = Boolean(showFileExtensions);
-    this.currentSearchQuery = String(searchQuery ?? '');
+    this.currentSearchQuery = String(searchQuery ?? '').trim();
     if (this.currentSearchQuery) {
       this.clearDragFeedback();
     }
@@ -175,8 +191,9 @@ export class FileExplorerView {
     if (this.searchInput && this.searchInput.value !== searchQuery) {
       this.searchInput.value = searchQuery;
     }
+    this.updateSearchStatus(searchQuery, this.currentSearchQuery ? searchMatches.length : null);
 
-    if (searchQuery) {
+    if (this.currentSearchQuery) {
       this.lastRenderMode = 'search';
       this.renderSearchResults(searchMatches, activeFilePath);
       return;
@@ -245,17 +262,13 @@ export class FileExplorerView {
 
     const fragment = document.createDocumentFragment();
     for (const match of matches) {
-      if (match.type === 'directory') {
-        fragment.appendChild(this.createSearchDirectoryItem(match));
-        continue;
-      }
-
       fragment.appendChild(this.createFileItem({
         activeFilePath,
         depth: 0,
         filePath: match.path,
         fileType: match.type || (getVaultTreeNodeType(match.path) ?? 'file'),
         name: match.name || getVaultPathLeaf(match.path),
+        searchResult: true,
       }));
     }
     this.treeContainer.appendChild(fragment);
@@ -314,6 +327,8 @@ export class FileExplorerView {
 
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-dir';
+    button.title = node.path;
+    button.setAttribute('aria-label', node.path);
     button.style.setProperty('--depth', depth);
     button.dataset.depth = depth;
 
@@ -363,35 +378,6 @@ export class FileExplorerView {
     return wrapper;
   }
 
-  createSearchDirectoryItem(node) {
-    const button = document.createElement('button');
-    button.className = 'file-tree-item file-tree-dir';
-    button.style.setProperty('--depth', 0);
-    button.dataset.depth = 0;
-    button.dataset.path = node.path;
-    button.dataset.entryType = 'directory';
-    button.innerHTML = `
-      <svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
-      <span class="file-tree-name">${escapeHtml(node.name || getVaultPathLeaf(node.path))}</span>
-    `;
-
-    button.addEventListener('click', (event) => {
-      if (this.consumeSuppressedActivation(button, event)) {
-        return;
-      }
-      this.onDirectorySelect?.(node.path);
-    });
-    button.addEventListener('contextmenu', (event) => {
-      event.preventDefault();
-      this.onFileContextMenu?.(event, { directoryPath: node.path, type: 'directory' });
-    });
-    this.bindLongPress(button, () => {
-      this.onFileContextMenu?.(this.createLongPressEvent(button), { directoryPath: node.path, type: 'directory' });
-    });
-
-    return button;
-  }
-
   rerenderDirectoryBranch(parentPath, tree, { activeFilePath, expandedDirs }) {
     const wrapper = this.renderedDirectoryWrappers.get(parentPath);
     const parentNode = findNodeByPath(tree, parentPath);
@@ -452,16 +438,24 @@ export class FileExplorerView {
     });
   }
 
-  createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
+  createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name, searchResult = false }) {
     const button = document.createElement('button');
-    button.className = 'file-tree-item file-tree-file';
+    const parentPath = getVaultPathParent(filePath);
+    button.className = `file-tree-item file-tree-file${searchResult ? ' file-tree-search-result' : ''}`;
+    button.title = filePath;
     const threadCount = Number(this.threadCounts.get(filePath) ?? 0);
+    button.setAttribute(
+      'aria-label',
+      `${filePath}${threadCount > 0 ? `, ${threadCount} open comment thread${threadCount === 1 ? '' : 's'}` : ''}`,
+    );
     const isDrawio = fileType === 'drawio';
     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 +469,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');
     }
@@ -495,11 +495,17 @@ export class FileExplorerView {
     if (threadCount > 0) {
       button.dataset.threadCount = String(threadCount);
     }
-    const displayName = this.showFileExtensions ? String(name ?? '') : stripVaultFileExtension(name);
+    const displayName = this.showFileExtensions || searchResult ? String(name ?? '') : stripVaultFileExtension(name);
+    const nameMarkup = searchResult
+      ? `<span class="file-tree-search-copy">
+          <span class="file-tree-name">${escapeHtml(displayName)}</span>
+          ${parentPath ? `<span class="file-tree-search-path">${escapeHtml(parentPath)}</span>` : ''}
+        </span>`
+      : `<span class="file-tree-name">${escapeHtml(displayName)}</span>`;
     button.innerHTML = `
-      ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
-      <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>` : ''}
+      ${getVaultFileIconSvg(filePath)}
+      ${nameMarkup}
+      ${threadCount > 0 ? `<span class="file-tree-comment-count" aria-hidden="true">${threadCount}</span>` : ''}
     `;
     this.configureDragSource(button, { path: filePath, type: 'file' });
 
@@ -952,34 +958,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);
@@ -102,16 +104,17 @@ export class FileTreeState {
   }
 
   setSearchQuery(value) {
-    this.searchQuery = String(value ?? '').trim().toLowerCase();
+    this.searchQuery = String(value ?? '');
   }
 
   getSearchMatches() {
-    if (!this.searchQuery) {
+    const normalizedQuery = this.searchQuery.trim().toLowerCase();
+    if (!normalizedQuery) {
       return [];
     }
 
     return this.flatSearchEntries
-      .filter((entry) => entry.lowerPath.includes(this.searchQuery))
+      .filter((entry) => entry.type !== 'directory' && entry.lowerPath.includes(normalizedQuery))
       .map((entry) => ({
         name: entry.name,
         path: entry.path,