collabmd 0.1.48 → 0.1.51

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,26 @@ 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;
+
+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 +59,9 @@ export class FileExplorerView {
     onSearchChange,
     onTreeContextMenu,
     onValidateDrop,
+    onVaultSelect,
   }) {
+    this.onVaultSelect = onVaultSelect;
     this.onEntryDrop = onEntryDrop;
     this.onDirectoryToggle = onDirectoryToggle;
     this.onFileContextMenu = onFileContextMenu;
@@ -58,7 +81,10 @@ export class FileExplorerView {
     this.longPressContext = null;
     this.suppressedActivationTarget = null;
     this.contextMenuCloseHandler = null;
+    this.contextMenuCloseTimer = null;
+    this.contextMenuAnchor = null;
     this.actionSheetCloseHandler = null;
+    this.blockingModalHandler = () => this.removeContextMenu();
     this.dragSource = null;
     this.currentSearchQuery = '';
     this.activeDropTarget = null;
@@ -70,33 +96,59 @@ export class FileExplorerView {
     this.showFileExtensions = false;
   }
 
+  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.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);
@@ -110,6 +162,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);
     });
@@ -121,6 +182,123 @@ export class FileExplorerView {
     });
   }
 
+  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;
@@ -261,7 +439,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,
@@ -271,6 +450,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);
   }
 
@@ -336,27 +521,15 @@ export class FileExplorerView {
     button.setAttribute('aria-expanded', String(isExpanded));
     button.dataset.path = node.path;
     button.dataset.entryType = 'directory';
+    // 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);
@@ -448,39 +621,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');
     }
@@ -492,6 +632,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);
     }
@@ -502,26 +643,15 @@ export class FileExplorerView {
           ${parentPath ? `<span class="file-tree-search-path">${escapeHtml(parentPath)}</span>` : ''}
         </span>`
       : `<span class="file-tree-name">${escapeHtml(displayName)}</span>`;
+    // 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;
@@ -535,68 +665,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');
@@ -760,7 +836,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;
     }
 
@@ -778,7 +871,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;
     }
 
@@ -792,6 +898,7 @@ export class FileExplorerView {
     void this.onEntryDrop?.(payload);
   }
 
+
   handleTreeDragLeave(event) {
     if (!this.dragSource || !this.treeContainer) {
       return;
@@ -861,27 +968,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()) {
@@ -958,25 +1044,34 @@ 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) {
       return;
     }
 
+    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;
     }
 
-    const contextAnchor = event.currentTarget instanceof Element ? event.currentTarget : event.target;
     const menu = document.createElement('div');
     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');
+      button.type = 'button';
       button.className = `file-context-item${item.danger ? ' file-context-danger' : ''}`;
+      button.setAttribute('role', 'menuitem');
       button.textContent = item.label;
       button.addEventListener('click', () => {
         this.removeContextMenu();
@@ -990,8 +1085,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)) {
@@ -999,18 +1104,53 @@ export class FileExplorerView {
       }
     };
     this.contextMenuCloseHandler = close;
-    setTimeout(() => document.addEventListener('click', close), 0);
+    const handleKeydown = (keyEvent) => {
+      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();
+        return;
+      }
+      if (keyEvent.key === 'Tab') {
+        this.removeContextMenu({ restoreFocus: false });
+        return;
+      }
+      const nextIndex = keyEvent.key === 'Home'
+        ? 0
+        : keyEvent.key === 'End'
+          ? buttons.length - 1
+          : keyEvent.key === 'ArrowDown'
+            ? (index + 1) % buttons.length
+            : keyEvent.key === 'ArrowUp'
+              ? (index - 1 + buttons.length) % buttons.length
+              : -1;
+      if (nextIndex >= 0) {
+        keyEvent.preventDefault();
+        buttons[nextIndex]?.focus();
+      }
+    };
+    menu.addEventListener('keydown', handleKeydown);
+    document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
+    this.contextMenuCloseTimer = setTimeout(() => {
+      this.contextMenuCloseTimer = null;
+      if (menu.isConnected && this.contextMenuCloseHandler === close) {
+        document.addEventListener('click', close);
+      }
+    }, 0);
+    (searchInput ?? menu.querySelector('[role="menuitem"]'))?.focus();
   }
 
-  showActionSheet(items) {
-    const backdrop = document.createElement('button');
-    backdrop.type = 'button';
-    backdrop.className = 'file-action-sheet-backdrop';
-    backdrop.setAttribute('aria-label', 'Close file actions');
-
-    const sheet = document.createElement('div');
+  showActionSheet(items, options) {
+    const { searchPlaceholder = '' } = options ?? {};
+    const sheet = document.createElement('dialog');
     sheet.className = 'file-action-sheet';
+    sheet.setAttribute('aria-label', 'File actions');
 
+    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';
@@ -1038,26 +1178,42 @@ export class FileExplorerView {
     });
     sheet.appendChild(cancelButton);
 
-    backdrop.addEventListener('click', () => {
+    sheet.addEventListener('cancel', (event) => {
+      event.preventDefault();
       this.removeContextMenu();
     });
+    sheet.addEventListener('click', (event) => {
+      const bounds = sheet.getBoundingClientRect();
+      if (event.clientX < bounds.left || event.clientX > bounds.right
+        || event.clientY < bounds.top || event.clientY > bounds.bottom) this.removeContextMenu();
+    });
 
-    document.body.append(backdrop, sheet);
+    document.body.append(sheet);
+    document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.actionSheetCloseHandler = () => {
-      backdrop.remove();
+      if (sheet.open) sheet.close();
       sheet.remove();
       this.actionSheetCloseHandler = null;
     };
+    sheet.showModal();
+    (sheet.querySelector('.file-context-search') ?? sheet.querySelector('button:not(:disabled)'))?.focus();
   }
 
-  removeContextMenu() {
+  removeContextMenu({ restoreFocus = true } = {}) {
     this.cancelLongPress();
     this.clearDragFeedback();
     document.querySelectorAll('.file-context-menu').forEach((menu) => menu.remove());
+    if (this.contextMenuCloseTimer !== null) {
+      clearTimeout(this.contextMenuCloseTimer);
+      this.contextMenuCloseTimer = null;
+    }
     if (this.contextMenuCloseHandler) {
       document.removeEventListener('click', this.contextMenuCloseHandler);
       this.contextMenuCloseHandler = null;
     }
+    document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.actionSheetCloseHandler?.();
+    if (restoreFocus) this.contextMenuAnchor?.focus?.();
+    this.contextMenuAnchor = null;
   }
 }