collabmd 0.1.49 → 0.1.52

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

@@ -1,11 +1,12 @@
 import {
+  getVaultFileKind,
   getVaultTreeNodeType,
   stripVaultFileExtension,
 } from '../../domain/file-kind.js';
 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) {
@@ -27,6 +28,27 @@ function findNodeByPath(nodes = [], pathValue = '') {
 const MOBILE_LONG_PRESS_DELAY_MS = 420;
 const MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX = 10;
 const DRAG_AUTO_EXPAND_DELAY_MS = 700;
+const SEARCH_RESULT_LIMIT = 80;
+export const FILE_TREE_SEARCH_DEBOUNCE_MS = 150;
+
+function createMenuFilterInput({ container, itemSelector, placeholder, skipLabels = [] }) {
+  const searchInput = document.createElement('input');
+  searchInput.type = 'search';
+  searchInput.className = 'file-context-search';
+  searchInput.setAttribute('aria-label', placeholder);
+  searchInput.placeholder = placeholder;
+  searchInput.addEventListener('input', () => {
+    const query = searchInput.value.trim().toLowerCase();
+    container.querySelectorAll(itemSelector).forEach((button) => {
+      if (skipLabels.includes(button.textContent)) {
+        return;
+      }
+      button.hidden = query.length > 0 && !(button.textContent ?? '').toLowerCase().includes(query);
+    });
+  });
+  container.appendChild(searchInput);
+  return searchInput;
+}
 
 export class FileExplorerView {
   constructor({
@@ -38,7 +60,9 @@ export class FileExplorerView {
     onSearchChange,
     onTreeContextMenu,
     onValidateDrop,
+    onVaultSelect,
   }) {
+    this.onVaultSelect = onVaultSelect;
     this.onEntryDrop = onEntryDrop;
     this.onDirectoryToggle = onDirectoryToggle;
     this.onFileContextMenu = onFileContextMenu;
@@ -71,35 +95,63 @@ export class FileExplorerView {
     this.rootDropZone = null;
     this.threadCounts = new Map();
     this.showFileExtensions = false;
+    this.searchDebounceTimer = null;
+    this.pendingSearchValue = null;
+  }
+
+  renderVaultSwitcher(options) {
+    const { activeVaultId, onVaultSelect, vaults } = options ?? {};
+    if (!Array.isArray(vaults) || vaults.length < 2 || document.getElementById('vaultSwitcher')) {
+      return;
+    }
+    const wrapper = document.createElement('div');
+    wrapper.className = 'sidebar-search vault-switcher';
+    wrapper.id = 'vaultSwitcherWrap';
+    const entries = vaults.filter((vault) => vault?.id);
+    if (entries.length === 0) {
+      return;
+    }
+    const active = entries.find((vault) => vault.id === activeVaultId) ?? entries[0];
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'vault-switcher-button';
+    button.id = 'vaultSwitcher';
+    button.setAttribute('aria-haspopup', 'menu');
+    button.setAttribute('aria-label', `Switch vault (current: ${active.id})`);
+    button.title = 'Switch vault';
+    button.innerHTML = `<span class="vault-switcher-icon" aria-hidden="true"><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="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"></path></svg></span><span class="vault-switcher-name">${escapeHtml(active.id)}</span><span class="vault-switcher-chevron" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg></span>`;
+    button.addEventListener('click', (event) => {
+      this.showContextMenu(event, entries.map((vault) => ({
+        label: vault.id,
+        onSelect: () => (onVaultSelect ?? this.onVaultSelect)?.(vault.id),
+      })), {
+        alignToAnchor: true,
+        // ponytail: filter only pays off for long vault lists
+        searchPlaceholder: entries.length > 8 ? 'Filter vaults…' : '',
+      });
+    });
+    wrapper.appendChild(button);
+    const search = document.getElementById('fileSearch');
+    if (search?.parentNode) {
+      search.parentNode.insertBefore(wrapper, search);
+    } else {
+      this.treeContainer?.parentNode?.prepend(wrapper);
+    }
   }
 
   initialize() {
     this.searchInput?.addEventListener('input', (event) => {
-      this.onSearchChange?.(event.target.value);
+      this.handleSearchInput(event.target.value);
     });
 
+    this.treeContainer?.addEventListener('click', (event) => {
+      this.handleTreeClick(event);
+    });
     this.treeContainer?.addEventListener('contextmenu', (event) => {
-      if (event.target.closest('.file-tree-item')) {
-        return;
-      }
-
-      event.preventDefault();
-      this.onTreeContextMenu?.(event);
+      this.handleTreeContextMenu(event);
     });
-
     this.treeContainer?.addEventListener('pointerdown', (event) => {
-      if (event.target.closest('.file-tree-item')) {
-        return;
-      }
-
-      this.startLongPress(event, () => {
-        this.onTreeContextMenu?.({
-          clientX: Number(event.clientX || 0),
-          clientY: Number(event.clientY || 0),
-          preventDefault() {},
-          target: this.treeContainer,
-        });
-      }, this.treeContainer);
+      this.handleTreePointerDown(event);
     });
     this.treeContainer?.addEventListener('pointermove', (event) => {
       this.handleLongPressPointerMove(event);
@@ -113,6 +165,15 @@ export class FileExplorerView {
     this.treeContainer?.addEventListener('scroll', () => {
       this.cancelLongPress();
     }, { passive: true });
+    this.treeContainer?.addEventListener('dragstart', (event) => {
+      this.handleTreeDragStart(event);
+    });
+    this.treeContainer?.addEventListener('dragend', (event) => {
+      this.handleTreeDragEnd(event);
+    });
+    this.treeContainer?.addEventListener('dragenter', (event) => {
+      this.handleTreeDragEnter(event);
+    });
     this.treeContainer?.addEventListener('dragover', (event) => {
       this.handleTreeDragOver(event);
     });
@@ -124,6 +185,139 @@ export class FileExplorerView {
     });
   }
 
+  handleSearchInput(value) {
+    this.pendingSearchValue = String(value ?? '');
+    clearTimeout(this.searchDebounceTimer);
+    this.searchDebounceTimer = setTimeout(() => {
+      this.searchDebounceTimer = null;
+      this.pendingSearchValue = null;
+      this.onSearchChange?.(value);
+    }, FILE_TREE_SEARCH_DEBOUNCE_MS);
+  }
+
+  cancelPendingSearch() {
+    clearTimeout(this.searchDebounceTimer);
+    this.searchDebounceTimer = null;
+    this.pendingSearchValue = null;
+  }
+
+  getTreeItem(event) {
+    const item = event.target instanceof Element
+      ? event.target.closest('.file-tree-item')
+      : null;
+    if (!item || !this.treeContainer?.contains(item)) {
+      return null;
+    }
+    return item;
+  }
+
+  handleTreeClick(event) {
+    const item = this.getTreeItem(event);
+    if (!item) {
+      return;
+    }
+    if (this.consumeSuppressedActivation(item, event)) {
+      return;
+    }
+    if (item.classList.contains('file-tree-dir')) {
+      this.onDirectoryToggle?.(item.dataset.path);
+      return;
+    }
+    this.onFileSelect?.(item.dataset.path);
+  }
+
+  handleTreeContextMenu(event) {
+    const item = this.getTreeItem(event);
+    if (item) {
+      event.preventDefault();
+      if (item.classList.contains('file-tree-dir')) {
+        this.onFileContextMenu?.(event, { directoryPath: item.dataset.path, type: 'directory' });
+        return;
+      }
+      this.onFileContextMenu?.(event, { filePath: item.dataset.path, type: 'file' });
+      return;
+    }
+
+    event.preventDefault();
+    this.onTreeContextMenu?.(event);
+  }
+
+  handleTreePointerDown(event) {
+    const item = this.getTreeItem(event);
+    if (item) {
+      this.startLongPress(event, () => {
+        if (item.classList.contains('file-tree-dir')) {
+          this.onFileContextMenu?.(this.createLongPressEvent(item), {
+            directoryPath: item.dataset.path,
+            type: 'directory',
+          });
+          return;
+        }
+        this.onFileContextMenu?.(this.createLongPressEvent(item), {
+          filePath: item.dataset.path,
+          type: 'file',
+        });
+      }, item);
+      return;
+    }
+
+    this.startLongPress(event, () => {
+      this.onTreeContextMenu?.({
+        clientX: Number(event.clientX || 0),
+        clientY: Number(event.clientY || 0),
+        preventDefault() {},
+        target: this.treeContainer,
+      });
+    }, this.treeContainer);
+  }
+
+  handleTreeDragStart(event) {
+    const item = this.getTreeItem(event);
+    if (!item || !this.isDragAndDropEnabled()) {
+      return;
+    }
+
+    this.dragSource = {
+      path: item.dataset.path,
+      type: item.dataset.entryType,
+    };
+    document.body?.classList.add('is-file-tree-dragging');
+    if (this.treeContainer) {
+      this.treeContainer.dataset.dragActive = 'true';
+    }
+    item.classList.add('is-dragging');
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', item.dataset.path);
+    }
+  }
+
+  handleTreeDragEnd(event) {
+    const item = this.getTreeItem(event) ?? this.treeContainer?.querySelector('.file-tree-item.is-dragging');
+    item?.classList.remove('is-dragging');
+    const dragSource = this.dragSource;
+    if (this.invalidDropAttempt && dragSource) {
+      void this.onEntryDrop?.(this.invalidDropAttempt);
+    }
+    this.dragSource = null;
+    this.invalidDropAttempt = null;
+    this.clearDragFeedback();
+  }
+
+  handleTreeDragEnter(event) {
+    const directory = event.target instanceof Element
+      ? event.target.closest('.file-tree-dir')
+      : null;
+    if (directory && this.treeContainer?.contains(directory)) {
+      this.handleDirectoryDragEnter(event, directory, directory.dataset.path);
+      return;
+    }
+    if (event.target instanceof Element && event.target.closest('.file-tree-root-drop-zone')) {
+      this.handleRootZoneDragEnter(event);
+    }
+  }
+
+
   updateSearchStatus(query, matchCount = null) {
     if (!this.searchStatus) {
       return;
@@ -191,7 +385,8 @@ export class FileExplorerView {
       this.clearDragFeedback();
     }
 
-    if (this.searchInput && this.searchInput.value !== searchQuery) {
+    // Never clobber keystrokes that are still waiting out the input debounce.
+    if (this.searchInput && this.pendingSearchValue === null && this.searchInput.value !== searchQuery) {
       this.searchInput.value = searchQuery;
     }
     this.updateSearchStatus(searchQuery, this.currentSearchQuery ? searchMatches.length : null);
@@ -264,7 +459,8 @@ export class FileExplorerView {
     }
 
     const fragment = document.createDocumentFragment();
-    for (const match of matches) {
+    const visibleMatches = matches.slice(0, SEARCH_RESULT_LIMIT);
+    for (const match of visibleMatches) {
       fragment.appendChild(this.createFileItem({
         activeFilePath,
         depth: 0,
@@ -274,6 +470,12 @@ export class FileExplorerView {
         searchResult: true,
       }));
     }
+    if (matches.length > SEARCH_RESULT_LIMIT) {
+      const more = document.createElement('div');
+      more.className = 'file-tree-empty';
+      more.textContent = `${matches.length - SEARCH_RESULT_LIMIT} more matches. Refine the search.`;
+      fragment.appendChild(more);
+    }
     this.treeContainer.appendChild(fragment);
   }
 
@@ -342,26 +544,12 @@ export class FileExplorerView {
     // Dynamic labels are escaped and icons are application-owned markup.
     // pi-lens-ignore: no-inner-html-js
     button.innerHTML = `
-      <svg class="file-tree-chevron${isExpanded ? ' expanded' : ''}" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
-      <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-chevron${isExpanded ? ' expanded' : ''}" aria-hidden="true"></span>
+      <span class="file-tree-icon" aria-hidden="true"></span>
       <span class="file-tree-name">${escapeHtml(node.name)}</span>
     `;
-    this.configureDragSource(button, { path: node.path, type: 'directory' });
-    this.bindDirectoryDropTarget(button, node.path);
+    this.configureDragSource(button);
 
-    button.addEventListener('click', (event) => {
-      if (this.consumeSuppressedActivation(button, event)) {
-        return;
-      }
-      this.onDirectoryToggle?.(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' });
-    });
 
     wrapper.appendChild(button);
     this.renderedDirectoryWrappers.set(node.path, wrapper);
@@ -453,39 +641,6 @@ export class FileExplorerView {
       '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');
-    }
-    if (isDrawio) {
-      button.classList.add('is-drawio');
-    }
-    if (isExcalidraw) {
-      button.classList.add('is-excalidraw');
-    }
-    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,6 +652,7 @@ export class FileExplorerView {
     button.dataset.depth = depth;
     button.dataset.path = filePath;
     button.dataset.entryType = 'file';
+    button.dataset.kind = getVaultFileKind(filePath) ?? fileType ?? 'file';
     if (threadCount > 0) {
       button.dataset.threadCount = String(threadCount);
     }
@@ -510,25 +666,12 @@ export class FileExplorerView {
     // Dynamic labels are escaped and icons are application-owned markup.
     // pi-lens-ignore: no-inner-html-js
     button.innerHTML = `
-      ${getVaultFileIconSvg(filePath)}
+      <span class="file-tree-icon" aria-hidden="true"></span>
       ${nameMarkup}
       ${threadCount > 0 ? `<span class="file-tree-comment-count" aria-hidden="true">${threadCount}</span>` : ''}
     `;
-    this.configureDragSource(button, { path: filePath, type: 'file' });
+    this.configureDragSource(button);
 
-    button.addEventListener('click', (event) => {
-      if (this.consumeSuppressedActivation(button, event)) {
-        return;
-      }
-      this.onFileSelect?.(filePath);
-    });
-    button.addEventListener('contextmenu', (event) => {
-      event.preventDefault();
-      this.onFileContextMenu?.(event, { filePath, type: 'file' });
-    });
-    this.bindLongPress(button, () => {
-      this.onFileContextMenu?.(this.createLongPressEvent(button), { filePath, type: 'file' });
-    });
 
     this.renderedFileItems.set(filePath, button);
     return button;
@@ -542,68 +685,14 @@ export class FileExplorerView {
     return !this.isMobileViewport() && !this.currentSearchQuery;
   }
 
-  configureDragSource(element, payload) {
+  configureDragSource(element) {
     if (!(element instanceof HTMLElement)) {
       return;
     }
 
-    const isEnabled = this.isDragAndDropEnabled();
-    element.draggable = isEnabled;
-    if (!isEnabled) {
-      return;
-    }
-
-    element.addEventListener('dragstart', (event) => {
-      this.dragSource = {
-        path: payload.path,
-        type: payload.type,
-      };
-      document.body?.classList.add('is-file-tree-dragging');
-      if (this.treeContainer) {
-        this.treeContainer.dataset.dragActive = 'true';
-      }
-      element.classList.add('is-dragging');
-      if (event.dataTransfer) {
-        event.dataTransfer.effectAllowed = 'move';
-        event.dataTransfer.setData('text/plain', payload.path);
-      }
-    });
-    element.addEventListener('dragend', () => {
-      element.classList.remove('is-dragging');
-      const dragSource = this.dragSource;
-      if (this.invalidDropAttempt && dragSource) {
-        void this.onEntryDrop?.(this.invalidDropAttempt);
-      }
-      this.dragSource = null;
-      this.invalidDropAttempt = null;
-      this.clearDragFeedback();
-    });
-
-    if (payload.type === 'file') {
-      element.addEventListener('dragenter', (event) => {
-        this.handleNonDropTargetDragOver(event);
-      });
-      element.addEventListener('dragover', (event) => {
-        this.handleNonDropTargetDragOver(event);
-      });
-    }
+    element.draggable = this.isDragAndDropEnabled();
   }
 
-  bindDirectoryDropTarget(element, directoryPath) {
-    if (!(element instanceof HTMLElement) || this.isMobileViewport()) {
-      return;
-    }
-
-    element.addEventListener('dragenter', (event) => {
-      this.handleDirectoryDragEnter(event, element, directoryPath);
-    });
-    element.addEventListener('dragover', (event) => {
-      this.handleDirectoryDragOver(event, element, directoryPath);
-    });
-    element.addEventListener('drop', (event) => {
-      this.handleDirectoryDrop(event, directoryPath);
-    });
-  }
 
   createRootDropZone() {
     const zone = document.createElement('div');
@@ -767,7 +856,24 @@ export class FileExplorerView {
       return;
     }
 
-    if (event.target.closest('.file-tree-dir') || event.target.closest('.file-tree-item')) {
+    const directory = event.target instanceof Element
+      ? event.target.closest('.file-tree-dir')
+      : null;
+    if (directory && this.treeContainer.contains(directory)) {
+      this.handleDirectoryDragOver(event, directory, directory.dataset.path);
+      return;
+    }
+
+    const file = event.target instanceof Element
+      ? event.target.closest('.file-tree-file')
+      : null;
+    if (file && this.treeContainer.contains(file)) {
+      this.handleNonDropTargetDragOver(event);
+      return;
+    }
+
+    if (event.target instanceof Element && event.target.closest('.file-tree-root-drop-zone')) {
+      this.handleRootZoneDragOver(event);
       return;
     }
 
@@ -785,7 +891,20 @@ export class FileExplorerView {
       return;
     }
 
-    if (event.target.closest('.file-tree-dir') || event.target.closest('.file-tree-item')) {
+    const directory = event.target instanceof Element
+      ? event.target.closest('.file-tree-dir')
+      : null;
+    if (directory && this.treeContainer.contains(directory)) {
+      this.handleDirectoryDrop(event, directory.dataset.path);
+      return;
+    }
+
+    if (event.target instanceof Element && event.target.closest('.file-tree-root-drop-zone')) {
+      this.handleRootZoneDrop(event);
+      return;
+    }
+
+    if (event.target instanceof Element && event.target.closest('.file-tree-file')) {
       return;
     }
 
@@ -799,6 +918,7 @@ export class FileExplorerView {
     void this.onEntryDrop?.(payload);
   }
 
+
   handleTreeDragLeave(event) {
     if (!this.dragSource || !this.treeContainer) {
       return;
@@ -868,27 +988,6 @@ export class FileExplorerView {
     this.clearDragFeedback();
   }
 
-  bindLongPress(element, callback) {
-    if (!(element instanceof HTMLElement) || typeof callback !== 'function') {
-      return;
-    }
-
-    element.addEventListener('pointerdown', (event) => {
-      this.startLongPress(event, callback, element);
-    });
-    element.addEventListener('pointermove', (event) => {
-      this.handleLongPressPointerMove(event);
-    }, { passive: true });
-    element.addEventListener('pointerup', () => {
-      this.cancelLongPress();
-    });
-    element.addEventListener('pointercancel', () => {
-      this.cancelLongPress();
-    });
-    element.addEventListener('pointerleave', () => {
-      this.cancelLongPress();
-    });
-  }
 
   startLongPress(event, callback, target = null) {
     if (!this.isMobileViewport()) {
@@ -965,7 +1064,8 @@ export class FileExplorerView {
     return true;
   }
 
-  showContextMenu(event, items) {
+  showContextMenu(event, items, options) {
+    const { alignToAnchor = false, searchPlaceholder = '' } = options ?? {};
     this.removeContextMenu();
 
     if (!Array.isArray(items) || items.length === 0) {
@@ -975,7 +1075,7 @@ export class FileExplorerView {
     const contextAnchor = event.currentTarget instanceof Element ? event.currentTarget : event.target;
     this.contextMenuAnchor = contextAnchor instanceof HTMLElement ? contextAnchor : null;
     if (this.isMobileViewport()) {
-      this.showActionSheet(items);
+      this.showActionSheet(items, { searchPlaceholder });
       return;
     }
 
@@ -983,6 +1083,9 @@ export class FileExplorerView {
     menu.className = 'file-context-menu';
     menu.setAttribute('role', 'menu');
     menu.setAttribute('aria-label', 'File actions');
+    const searchInput = searchPlaceholder
+      ? createMenuFilterInput({ container: menu, itemSelector: '[role="menuitem"]', placeholder: searchPlaceholder })
+      : null;
 
     for (const item of items) {
       const button = document.createElement('button');
@@ -1002,8 +1105,18 @@ export class FileExplorerView {
     const menuRect = menu.getBoundingClientRect();
     const maxLeft = Math.max(8, window.innerWidth - menuRect.width - 8);
     const maxTop = Math.max(8, window.innerHeight - menuRect.height - 8);
-    menu.style.left = `${Math.max(8, Math.min(event.clientX, maxLeft))}px`;
-    menu.style.top = `${Math.max(8, Math.min(event.clientY, maxTop))}px`;
+    const anchorRect = alignToAnchor ? this.contextMenuAnchor?.getBoundingClientRect?.() : null;
+    if (anchorRect) {
+      menu.style.minWidth = `${anchorRect.width}px`;
+      menu.style.left = `${Math.max(8, Math.min(anchorRect.left, maxLeft))}px`;
+      const belowTop = anchorRect.bottom + 4;
+      menu.style.top = belowTop + menuRect.height > window.innerHeight - 8
+        ? `${Math.max(8, anchorRect.top - menuRect.height - 4)}px`
+        : `${belowTop}px`;
+    } else {
+      menu.style.left = `${Math.max(8, Math.min(event.clientX, maxLeft))}px`;
+      menu.style.top = `${Math.max(8, Math.min(event.clientY, maxTop))}px`;
+    }
 
     const close = (closeEvent) => {
       if (!menu.contains(closeEvent.target)) {
@@ -1012,8 +1125,9 @@ export class FileExplorerView {
     };
     this.contextMenuCloseHandler = close;
     const handleKeydown = (keyEvent) => {
-      const buttons = Array.from(menu.querySelectorAll('[role="menuitem"]'));
-      const index = Math.max(0, buttons.indexOf(document.activeElement));
+      const buttons = Array.from(menu.querySelectorAll('[role="menuitem"]')).filter((button) => !button.hidden);
+      const fromInput = document.activeElement === searchInput;
+      const index = fromInput ? -1 : Math.max(0, buttons.indexOf(document.activeElement));
       if (keyEvent.key === 'Escape') {
         keyEvent.preventDefault();
         this.removeContextMenu();
@@ -1039,20 +1153,29 @@ export class FileExplorerView {
     };
     menu.addEventListener('keydown', handleKeydown);
     document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
+    // Defer outside-click tracking: the opening gesture's own events must not dismiss the menu.
+    // (An auto popover cannot be used here: Chromium light-dismisses it on that same gesture's trailing pointerup.)
     this.contextMenuCloseTimer = setTimeout(() => {
       this.contextMenuCloseTimer = null;
       if (menu.isConnected && this.contextMenuCloseHandler === close) {
         document.addEventListener('click', close);
       }
     }, 0);
-    menu.querySelector('[role="menuitem"]')?.focus();
+    (searchInput ?? menu.querySelector('[role="menuitem"]'))?.focus();
   }
 
-  showActionSheet(items) {
+  showActionSheet(items, options) {
+    const { searchPlaceholder = '' } = options ?? {};
     const sheet = document.createElement('dialog');
     sheet.className = 'file-action-sheet';
     sheet.setAttribute('aria-label', 'File actions');
+    // Native light-dismiss where supported; the cancel/click handlers below
+    // cover older browsers and the close listener funnels both paths here.
+    sheet.setAttribute('closedby', 'any');
 
+    if (searchPlaceholder) {
+      createMenuFilterInput({ container: sheet, itemSelector: '.file-action-sheet-item', placeholder: searchPlaceholder, skipLabels: ['Cancel'] });
+    }
     items.forEach((item) => {
       const button = document.createElement('button');
       button.type = 'button';
@@ -1084,6 +1207,11 @@ export class FileExplorerView {
       event.preventDefault();
       this.removeContextMenu();
     });
+    sheet.addEventListener('close', () => {
+      if (sheet.isConnected) {
+        this.removeContextMenu();
+      }
+    });
     sheet.addEventListener('click', (event) => {
       const bounds = sheet.getBoundingClientRect();
       if (event.clientX < bounds.left || event.clientX > bounds.right
@@ -1098,7 +1226,7 @@ export class FileExplorerView {
       this.actionSheetCloseHandler = null;
     };
     sheet.showModal();
-    sheet.querySelector('button:not(:disabled)')?.focus();
+    (sheet.querySelector('.file-context-search') ?? sheet.querySelector('button:not(:disabled)'))?.focus();
   }
 
   removeContextMenu({ restoreFocus = true } = {}) {