collabmd 0.1.44 → 0.1.46

package/src/client/application/app-shell/comments-feature.js

@@ -1,4 +1,7 @@
-import { getVaultFileKind, supportsCommentsForFilePath } from '../../../domain/file-kind.js';
+import {
+  getVaultFileKind,
+  supportsCommentsForFilePath,
+} from '../../../domain/file-kind.js';
 
 export const commentsFeature = {
   createCommentThread(payload) {
@@ -82,26 +85,32 @@ export const commentsFeature = {
       return;
     }
 
+    const isDiagram = getVaultFileKind(filePath) === 'excalidraw';
     const line = Number.isFinite(anchor?.startLine) ? anchor.startLine : null;
-    this._pendingCommentOverviewFocus = {
-      attempts: 0,
-      filePath,
-      line,
-      threadId,
-    };
+    if (!isDiagram) {
+      this._pendingCommentOverviewFocus = {
+        attempts: 0,
+        filePath,
+        line,
+        threadId,
+      };
+    }
     this.setSidebarTab('comments');
     this.setSidebarVisibility(true);
     this.workspaceRouteController?.preserveSidebarTabForNextFileRoute?.(filePath);
-    this.navigation.navigateToFile(filePath, {
-      line,
-    });
+    this.navigation.navigateToFile(filePath, isDiagram ? undefined : { line });
 
     if (this.currentFilePath !== filePath || !this.session) {
-      await this.openFile(filePath);
+      await this.workspaceRouteController.openFile(filePath);
     }
 
     this.setSidebarTab('comments');
     this.setSidebarVisibility(true);
+    if (isDiagram) {
+      this.excalidrawEmbed?.openCommentThread?.(filePath, threadId);
+      return;
+    }
+
     this.focusPendingCommentOverviewThread();
   },
 

package/src/client/application/app-shell/git-feature.js

@@ -148,7 +148,7 @@ export const gitFeature = {
 
   syncMainChrome({ badgeLabel = '', mode, title = null } = {}) {
     const isSpecialMode = mode === 'diff' || mode === 'history' || mode === 'history-preview';
-    this.elements.toolbarCenter?.classList.toggle('hidden', isSpecialMode);
+    this.elements.toolbarViewToggle?.classList.toggle('hidden', isSpecialMode);
     this.elements.mobileViewToggle?.classList.toggle('hidden', isSpecialMode);
     this.elements.userCount?.classList.toggle('hidden', isSpecialMode);
     this.elements.toolbarDiffBadge?.classList.toggle('hidden', !badgeLabel);
@@ -164,7 +164,6 @@ export const gitFeature = {
   },
 
   async showGitDiff({ filePath = null, scope = 'all' } = {}) {
-    await this.ensureGitControllers?.();
     this.clearStaticPreviewDocument?.();
     this.gitPanel.setSelection(filePath ? { path: filePath, scope, source: 'workspace' } : {});
     this.gitPanel.setMode('changes');
@@ -179,7 +178,6 @@ export const gitFeature = {
   },
 
   async showGitCommit({ hash, path = null, historyFilePath = null } = {}) {
-    await this.ensureGitControllers?.();
     this.clearStaticPreviewDocument?.();
     this.gitPanel.setMode('history');
     this.gitPanel.setSelection(hash ? { commitHash: hash, path, source: 'commit' } : { source: 'commit' });
@@ -194,7 +192,6 @@ export const gitFeature = {
   },
 
   async showGitHistory() {
-    await this.ensureGitControllers?.();
     this.clearStaticPreviewDocument?.();
     this.gitPanel.setMode('history');
     this.gitPanel.setSelection({ source: 'commit' });
@@ -207,7 +204,6 @@ export const gitFeature = {
   },
 
   async showGitFileHistory({ filePath = null } = {}) {
-    await this.ensureGitControllers?.();
     if (!filePath) {
       this.workspaceRouteController?.showEmptyState?.();
       return;
@@ -240,7 +236,7 @@ export const gitFeature = {
       ...data,
       currentFilePath: resolvedCurrentFilePath,
     });
-    this.resetPreviewMode();
+    this.workspacePreviewController.resetPreviewMode();
     this.elements.markdownToolbar?.classList.add('hidden');
     this.elements.outlineToggle?.classList.toggle('hidden', data.fileKind !== 'markdown');
 
@@ -256,7 +252,7 @@ export const gitFeature = {
     }
 
     this.elements.outlineToggle?.classList.add('hidden');
-    this.renderTextFilePreview?.({
+    this.workspacePreviewController.renderTextFilePreview({
       content: data.content,
       filePath: resolvedCurrentFilePath,
     });
@@ -266,7 +262,7 @@ export const gitFeature = {
     console.error('[git-preview] Failed to load file snapshot:', error);
     this.clearStaticPreviewDocument?.();
     this.toastController.show('Failed to load historical file preview');
-    this.renderTextFilePreview?.({
+    this.workspacePreviewController.renderTextFilePreview({
       content: 'Failed to load historical file preview.',
       filePath: resolvedCurrentFilePath,
     });
@@ -335,7 +331,6 @@ export const gitFeature = {
   },
 
   async refreshGitAfterAction({ filePath = null, preferredScope = null } = {}) {
-    await this.ensureGitControllers?.();
     await this.gitPanel.refresh({ force: true });
 
     const route = this.navigation.getHashRoute();
@@ -451,6 +446,18 @@ export const gitFeature = {
       showToast: true,
     });
 
+    const structurizrDependencyChanged = [
+      ...workspaceChange.changedPaths,
+      ...workspaceChange.deletedPaths,
+      ...workspaceChange.renamedPaths.flatMap((entry) => [entry.oldPath, entry.newPath]),
+    ].some((pathValue) => /(?:\.dsl$|(?:^|\/)workspace\.json$)/iu.test(pathValue));
+    if (this.currentFilePath && this.isStructurizrWorkspaceFile?.(this.currentFilePath) && structurizrDependencyChanged) {
+      this.structurizrPreview?.queueSync({
+        filePath: this.currentFilePath,
+        source: this.session?.getText?.() ?? '',
+      });
+    }
+
     if (
       event.origin === 'filesystem'
       && this.currentFilePath

package/src/client/application/app-shell/presence-feature.js

@@ -1,3 +1,5 @@
+import { getUserAvatarTextColor } from '../../domain/room.js';
+
 const MAX_INLINE_AVATARS = 5;
 
 function compareUserNames(left, right) {
@@ -11,8 +13,9 @@ function getConnectedPresenceState(context) {
   const isDrawioRoute = Boolean(context.currentFilePath && context.isDrawioFile?.(context.currentFilePath));
   const isExcalidrawRoute = Boolean(context.currentFilePath && context.isExcalidrawFile?.(context.currentFilePath));
   const isImageRoute = Boolean(context.currentFilePath && context.isImageFile?.(context.currentFilePath));
+  const isPdfRoute = Boolean(context.currentFilePath && context.isPdfFile?.(context.currentFilePath));
   const shouldUseLobbyState = !hasEditorSession
-    && (!context.currentFilePath || isDrawioRoute || isExcalidrawRoute || isImageRoute);
+    && (!context.currentFilePath || isDrawioRoute || isExcalidrawRoute || isImageRoute || isPdfRoute);
   return shouldUseLobbyState
     ? context.lobby?.getConnectionState?.() ?? context.connectionState
     : context.connectionState;
@@ -65,7 +68,7 @@ export const presenceFeature = {
     this.globalUsers = users;
     this.syncFollowedUser();
     this.renderAvatars();
-    this.renderChat();
+    this.renderChat({ messagesChanged: false });
     this.renderPresence();
     this.syncCurrentUserName();
   },
@@ -126,6 +129,7 @@ export const presenceFeature = {
       avatar.className = 'user-avatar';
       avatar.classList.toggle('is-local', user.isLocal);
       avatar.style.backgroundColor = user.color;
+      avatar.style.color = getUserAvatarTextColor(user.color);
       avatar.classList.toggle('is-following', user.clientId === this.followedUserClientId);
 
       const initial = document.createElement('span');
@@ -181,8 +185,6 @@ export const presenceFeature = {
       overflow.appendChild(overflowLabel);
       avatars.appendChild(overflow);
     }
-
-    this.renderPresencePanel();
   },
 
   openPresencePanel() {
@@ -196,7 +198,6 @@ export const presenceFeature = {
     this.closeToolbarOverflowMenu?.();
     this.renderAvatars();
     this.renderPresence();
-    this.renderPresencePanel();
   },
 
   closePresencePanel() {
@@ -207,7 +208,6 @@ export const presenceFeature = {
     this.presencePanelOpen = false;
     this.renderAvatars();
     this.renderPresence();
-    this.renderPresencePanel();
   },
 
   togglePresencePanel() {
@@ -227,6 +227,9 @@ export const presenceFeature = {
 
     panel.classList.toggle('hidden', !this.presencePanelOpen);
     panel.setAttribute('aria-hidden', String(!this.presencePanelOpen));
+    if (!this.presencePanelOpen) {
+      return;
+    }
 
     const orderedUsers = getPanelUsers(this.globalUsers, this.followedUserClientId);
     const effectiveConnectionState = getConnectedPresenceState(this);
@@ -268,6 +271,7 @@ export const presenceFeature = {
       const avatar = document.createElement('span');
       avatar.className = 'presence-panel-user-avatar';
       avatar.style.backgroundColor = user.color;
+      avatar.style.color = getUserAvatarTextColor(user.color);
       avatar.textContent = user.name.charAt(0).toUpperCase();
       avatar.setAttribute('aria-hidden', 'true');
 
@@ -346,10 +350,11 @@ export const presenceFeature = {
 
     this.followedUserClientId = clientId;
     this.followedCursorSignature = '';
-    this.renderAvatars();
-
-    if (closePanel) {
+    if (closePanel && this.presencePanelOpen) {
       this.closePresencePanel();
+    } else {
+      this.renderAvatars();
+      this.renderPresencePanel();
     }
 
     if (user.currentFile && user.currentFile !== this.currentFilePath) {
@@ -382,9 +387,11 @@ export const presenceFeature = {
     }
     this.followedUserClientId = null;
     this.followedCursorSignature = '';
-    this.renderAvatars();
-    if (closePanel) {
+    if (closePanel && this.presencePanelOpen) {
       this.closePresencePanel();
+    } else {
+      this.renderAvatars();
+      this.renderPresencePanel();
     }
   },
 

package/src/client/application/app-shell/ui-feature-shell.js

@@ -36,6 +36,7 @@ const PREVIEW_HEADING_LINK_ICON = `
  * @property {any} themeController
  * @property {any} previewRenderer
  * @property {any} tabActivityLock
+ * @property {any} notifications
  * @property {any} toastController
  * @property {any} versionMonitor
  */
@@ -53,23 +54,27 @@ function initialize() {
   this.layoutController.initialize();
   this.scrollSyncController.initialize();
   this.fileExplorer.initialize();
+  this.gitPanel.initialize();
+  this.gitDiffView.initialize();
+  this.fileHistoryView.initialize();
   this.commentsOverview?.initialize?.();
   this.initializePreviewLayoutObserver();
   this.syncIdentityManagementUi();
   this.syncCurrentUserName();
   this.syncWrapToggle();
+  this.syncVimModeToggle();
   this.syncToolbarOverflowVisibility?.();
-  this.syncChatNotificationButton();
   this.syncFileHistoryButton({ mode: 'empty' });
   this.renderChat();
   this.elements.chatInput?.setAttribute('maxlength', String(this.lobbyChatMessageMaxLength));
   this.bindEvents();
+  this.initializeSidebarResizer?.();
   this.restoreSidebarState();
   this.initializeVersionMonitoring();
   this.tabActivityLock.initialize();
   this.tabActivityLock.tryActivate();
 
-  window.addEventListener('hashchange', () => this.handleHashChange());
+  window.addEventListener('hashchange', () => this.workspaceRouteController.handleHashChange());
   const handleResize = this.createResizeHandler();
   window.addEventListener('resize', () => {
     handleResize();
@@ -79,9 +84,11 @@ function initialize() {
   this.fileExplorerReadyPromise = this.fileExplorer.refresh().then(() => {
     this.fileExplorerReady = true;
     void this.commentsOverview?.refresh?.();
-    this.scheduleGitControllerPrewarm?.();
+    if (this.runtimeConfig?.gitEnabled !== false) {
+      void this.gitPanel.refresh({ force: true });
+    }
     if (this.isTabActive) {
-      return this.handleHashChange();
+      return this.workspaceRouteController.handleHashChange();
     }
     return undefined;
   });
@@ -148,15 +155,18 @@ function promptForVersionReload(payload = null) {
 
 /** @this {UiShellContext} */
 function bindToolbarEvents() {
+  const openQuickSwitcher = () => {
+    void this.toggleQuickSwitcher();
+    this.closeToolbarOverflowMenu?.();
+  };
+
   this.elements.shareButton?.addEventListener('click', () => {
     void this.copyCurrentLink();
     this.closeToolbarOverflowMenu?.();
   });
 
-  this.elements.searchFilesButton?.addEventListener('click', () => {
-    void this.toggleQuickSwitcher();
-    this.closeToolbarOverflowMenu?.();
-  });
+  this.elements.toolbarSearchButton?.addEventListener('click', openQuickSwitcher);
+  this.elements.searchFilesButton?.addEventListener('click', openQuickSwitcher);
 
   this.elements.exportDocxButton?.addEventListener('click', () => {
     void this.handleExportRequest?.('docx');
@@ -252,15 +262,23 @@ function bindEvents() {
     this.closeToolbarOverflowMenu?.();
   });
 
+  this.elements.chatNotificationButton?.addEventListener('click', () => {
+    void this.handleChatNotificationToggle();
+  });
+
+  this.elements.chatNotificationMuteButton?.addEventListener('click', () => {
+    this.toggleChatNotificationMute();
+  });
+
+  this.elements.chatCloseButton?.addEventListener('click', () => {
+    this.closeChatPanel({ restoreFocus: true });
+  });
+
   this.elements.chatForm?.addEventListener('submit', (event) => {
     event.preventDefault();
     this.handleChatSubmit();
   });
 
-  this.elements.chatNotificationButton?.addEventListener('click', () => {
-    void this.handleChatNotificationToggle();
-  });
-
   bindToolbarEvents.call(this);
   bindDialogEvents.call(this);
 
@@ -280,6 +298,10 @@ function bindEvents() {
     this.toggleLineWrapping();
   });
 
+  this.elements.toggleVimModeButton?.addEventListener('click', () => {
+    this.toggleVimMode();
+  });
+
   this.elements.userCount?.addEventListener('click', (event) => {
     event.preventDefault();
     this.togglePresencePanel?.();
@@ -296,7 +318,8 @@ function bindEvents() {
   });
 
   this.elements.toolbarOverflowMenu?.addEventListener('click', (event) => {
-    if (event.target instanceof Element && event.target.closest('button')) {
+    const button = event.target instanceof Element ? event.target.closest('button') : null;
+    if (button && button !== this.elements.toggleVimModeButton) {
       this.closeToolbarOverflowMenu();
     }
   });
@@ -372,7 +395,7 @@ function handleDocumentPointerDown(event) {
     return;
   }
 
-  this.closeChatPanel();
+  this.closeChatPanel({ restoreFocus: false });
 }
 
 /** @this {UiShellContext} */
@@ -388,7 +411,7 @@ function handleDocumentKeydown(event) {
   }
 
   if (event.key === 'Escape' && this.chatIsOpen) {
-    this.closeChatPanel();
+    this.closeChatPanel({ restoreFocus: true });
     return;
   }
 
@@ -626,7 +649,7 @@ function handlePreviewContentClick(event) {
   const wikiLink = event.target.closest('a.wiki-link[data-wiki-target]');
   if (wikiLink) {
     event.preventDefault();
-    this.handleWikiLinkClick(wikiLink.dataset.wikiTarget);
+    this.wikiLinkFileController.handleWikiLinkClick(wikiLink.dataset.wikiTarget);
     return;
   }
 
@@ -714,7 +737,12 @@ function toggleToolbarOverflowMenu() {
 /** @this {UiShellContext} */
 function handleThemeChange(theme) {
   this.previewRenderer.applyTheme(theme);
-  if (!this.isExcalidrawFile(this.currentFilePath) && !this.isImageFile?.(this.currentFilePath)) {
+  if (
+    !this.isExcalidrawFile(this.currentFilePath)
+    && !this.isImageFile?.(this.currentFilePath)
+    && !this.isPdfFile?.(this.currentFilePath)
+    && !this.isStructurizrWorkspaceFile?.(this.currentFilePath)
+  ) {
     this.previewRenderer.queueRender();
   }
   this.session?.applyTheme(theme);
@@ -731,6 +759,7 @@ function handleConnectionChange(state) {
     });
   }
   this.renderPresence();
+  this.renderChat({ messagesChanged: false });
 
   if (state.unreachable && !this.connectionHelpShown) {
     this.connectionHelpShown = true;
@@ -755,6 +784,35 @@ function getStoredLineWrapping() {
   return this.preferences.getLineWrappingEnabled();
 }
 
+/** @this {UiShellContext} */
+function toggleVimMode() {
+  const currentState = this.session?.isVimModeEnabled?.() ?? this.getStoredVimMode();
+  const nextState = !currentState;
+
+  this.session?.setVimMode?.(nextState);
+  this.preferences.setVimModeEnabled(nextState);
+  this.syncVimModeToggle(nextState);
+}
+
+/** @this {UiShellContext} */
+function getStoredVimMode() {
+  return this.preferences.getVimModeEnabled();
+}
+
+/** @this {UiShellContext} */
+function syncVimModeToggle(state) {
+  const enabled = state ?? this.session?.isVimModeEnabled?.() ?? this.getStoredVimMode();
+  const label = this.elements.vimModeToggleLabel;
+  const button = this.elements.toggleVimModeButton;
+  const nextLabel = enabled ? 'On' : 'Off';
+  if (label) label.textContent = nextLabel;
+  if (button) {
+    button.setAttribute('aria-label', `${enabled ? 'Disable' : 'Enable'} Vim keybindings`);
+    button.setAttribute('title', `${enabled ? 'Disable' : 'Enable'} Vim keybindings`);
+    button.setAttribute('aria-pressed', String(enabled));
+  }
+}
+
 /** @this {UiShellContext} */
 function syncWrapToggle(state) {
   const enabled = state ?? this.session?.isLineWrappingEnabled() ?? this.getStoredLineWrapping();
@@ -818,6 +876,7 @@ export const uiFeatureShellMethods = {
   copyPreviewHeadingLink,
   createPreviewHeadingLinkUrl,
   getStoredLineWrapping,
+  getStoredVimMode,
   handleConnectionChange,
   handleDocumentKeydown,
   handleDocumentPointerDown,
@@ -838,7 +897,9 @@ export const uiFeatureShellMethods = {
   syncPreviewHeadingLinkButtons,
   syncVisualViewportBounds,
   syncToolbarOverflowVisibility,
+  syncVimModeToggle,
   syncWrapToggle,
   toggleToolbarOverflowMenu,
   toggleLineWrapping,
+  toggleVimMode,
 };

package/src/client/application/app-shell/ui-feature-sidebar.js

@@ -1,7 +1,7 @@
 /**
  * @typedef {object} UiSidebarContext
  * @property {string} activeSidebarTab
- * @property {{ sidebar?: HTMLElement | null, sidebarBackdrop?: HTMLElement | null, filesSidebarTab?: HTMLElement | null, commentsSidebarTab?: HTMLElement | null, gitSidebarTab?: HTMLElement | null, fileSearch?: HTMLElement | null, gitSearch?: HTMLElement | null, commentOverviewPanel?: HTMLElement | null }} elements
+ * @property {{ sidebar?: HTMLElement | null, sidebarBackdrop?: HTMLElement | null, sidebarResizer?: HTMLElement | null, filesSidebarTab?: HTMLElement | null, commentsSidebarTab?: HTMLElement | null, gitSidebarTab?: HTMLElement | null, fileSearch?: HTMLElement | null, gitSearch?: HTMLElement | null, commentOverviewPanel?: HTMLElement | null }} elements
  * @property {{ setSidebarVisible(showSidebar: boolean): void, getSidebarVisible(): string | null | undefined }} preferences
  * @property {{ setActive(active: boolean): void }} gitPanel
  * @property {boolean} gitRepoAvailable
@@ -11,6 +11,78 @@
  * @property {(showSidebar: boolean) => void} setSidebarVisibility
  */
 
+const SIDEBAR_DEFAULT_WIDTH = 260;
+const SIDEBAR_MIN_WIDTH = 220;
+const SIDEBAR_MAX_WIDTH = 420;
+const SIDEBAR_KEYBOARD_STEP = 16;
+
+/** @this {UiSidebarContext} */
+function initializeSidebarResizer() {
+  const sidebar = this.elements.sidebar;
+  const resizer = this.elements.sidebarResizer;
+  if (!sidebar || !resizer) return;
+
+  let sidebarWidth = SIDEBAR_DEFAULT_WIDTH;
+  let pointerId = null;
+  let startX = 0;
+  let startWidth = SIDEBAR_DEFAULT_WIDTH;
+
+  const clampWidth = (width) => Math.round(Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, width)));
+  const applyWidth = (width) => {
+    sidebarWidth = clampWidth(width);
+    sidebar.style.setProperty('--sidebar-width', `${sidebarWidth}px`);
+    resizer.setAttribute('aria-valuenow', String(sidebarWidth));
+  };
+  const finishResize = (event) => {
+    if (event?.pointerId != null && event.pointerId !== pointerId) return;
+    if (pointerId === null) return;
+
+    pointerId = null;
+    sidebar.classList.remove('is-resizing');
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  };
+
+  applyWidth(SIDEBAR_DEFAULT_WIDTH);
+
+  resizer.addEventListener('pointerdown', (event) => {
+    if (this.isMobileViewport() || sidebar.classList.contains('collapsed')) return;
+
+    pointerId = event.pointerId;
+    startX = event.clientX;
+    startWidth = sidebar.getBoundingClientRect().width || sidebarWidth;
+    sidebar.classList.add('is-resizing');
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    resizer.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+  });
+
+  resizer.addEventListener('pointermove', (event) => {
+    if (event.pointerId !== pointerId) return;
+    applyWidth(startWidth + event.clientX - startX);
+  });
+
+  resizer.addEventListener('pointerup', finishResize);
+  resizer.addEventListener('pointercancel', finishResize);
+  resizer.addEventListener('lostpointercapture', finishResize);
+
+  resizer.addEventListener('keydown', (event) => {
+    if (this.isMobileViewport() || sidebar.classList.contains('collapsed')) return;
+
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      applyWidth(sidebarWidth + (event.key === 'ArrowRight' ? SIDEBAR_KEYBOARD_STEP : -SIDEBAR_KEYBOARD_STEP));
+      return;
+    }
+
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      applyWidth(event.key === 'Home' ? SIDEBAR_MIN_WIDTH : SIDEBAR_MAX_WIDTH);
+    }
+  });
+}
+
 /** @this {UiSidebarContext} */
 function isMobileViewport() {
   return this.mobileBreakpointQuery.matches;
@@ -108,6 +180,7 @@ function setSidebarTab(tab) {
 export const uiFeatureSidebarMethods = {
   applySidebarVisibility,
   closeSidebarOnMobile,
+  initializeSidebarResizer,
   isMobileViewport,
   restoreSidebarState,
   setSidebarTab,

package/src/client/application/app-shell/ui-feature-tab-activity.js

@@ -16,7 +16,7 @@
  * @property {{ show(message: string): void }} toastController
  * @property {{ tryActivate(options?: { takeover?: boolean }): void }} tabActivityLock
  * @property {{ prepareFileDisconnect(filePath: string): Promise<void> }} excalidrawEmbed
- * @property {() => void} handleHashChange
+ * @property {{ handleHashChange(): Promise<void> }} workspaceRouteController
  * @property {() => boolean} isExcalidrawFile
  * @property {() => void} promptForDisplayNameIfNeeded
  * @property {() => void} renderChat
@@ -45,7 +45,7 @@ function handleTabActivated({ takeover = false } = {}) {
 
   if (wasInactive) {
     if (this.fileExplorerReady) {
-      void this.handleHashChange();
+      void this.workspaceRouteController.handleHashChange();
     }
     this.promptForDisplayNameIfNeeded();
   }

package/src/client/application/app-shell/ui-feature-toolbar.js

@@ -1,4 +1,5 @@
 import { isMarkdownFilePath } from '../../../domain/file-kind.js';
+import { pickFiles } from '../../browser-utils.js';
 import {
   getMarkdownBlockActionLabel,
   getMarkdownBlockMenuActions,
@@ -91,7 +92,6 @@ function renderMarkdownToolbarMarkup(activeAction) {
  * @property {{ show(message: string): void }} toastController
  * @property {{ uploadImageAttachment(payload: { file: File, fileName: string, sourcePath: string }): Promise<{ markdown?: string, path?: string }>} } vaultApiClient
  * @property {{ applyMarkdownToolbarAction(action: string): boolean, insertText(text: string): void, runEditorCommand?(commandId: string): boolean } | null} session
- * @property {() => Promise<File | null>} pickImageFile
  * @property {(file: File) => Promise<boolean>} handleEditorImageInsert
  * @property {() => Promise<void>} handleToolbarImageInsert
  */
@@ -395,7 +395,7 @@ function runEditorCommand(commandId) {
 
 /** @this {UiToolbarContext} */
 async function handleToolbarImageInsert() {
-  const file = await this.pickImageFile();
+  const [file] = await pickFiles({ accept: IMAGE_FILE_PICKER_ACCEPT });
   if (!file) {
     return;
   }
@@ -403,55 +403,6 @@ async function handleToolbarImageInsert() {
   await this.handleEditorImageInsert(file);
 }
 
-/** @this {UiToolbarContext} */
-function pickImageFile() {
-  return new Promise((resolve) => {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = IMAGE_FILE_PICKER_ACCEPT;
-    input.style.position = 'fixed';
-    input.style.left = '-9999px';
-    document.body.appendChild(input);
-    let settled = false;
-    let focusTimer = null;
-
-    const cleanup = (value) => {
-      if (settled) {
-        return;
-      }
-
-      settled = true;
-      if (focusTimer) {
-        window.clearTimeout(focusTimer);
-      }
-      window.removeEventListener('focus', handleWindowFocus);
-      input.remove();
-      resolve(value);
-    };
-
-    const handleWindowFocus = () => {
-      focusTimer = window.setTimeout(() => {
-        if (settled || input.files?.length) {
-          return;
-        }
-
-        cleanup(null);
-      }, 250);
-    };
-
-    input.addEventListener('change', () => {
-      cleanup(input.files?.[0] ?? null);
-    }, { once: true });
-
-    input.addEventListener('cancel', () => {
-      cleanup(null);
-    }, { once: true });
-
-    window.addEventListener('focus', handleWindowFocus, { once: true });
-    input.click();
-  });
-}
-
 /** @this {UiToolbarContext} */
 async function handleEditorImageInsert(file) {
   if (!this.session || !isMarkdownFilePath(this.currentFilePath)) {
@@ -526,7 +477,6 @@ export const uiFeatureToolbarMethods = {
   openMarkdownBlockMenu,
   positionMarkdownBlockMenu,
   renderMarkdownBlockMenuPopover,
-  pickImageFile,
   renderMarkdownToolbar,
   runEditorCommand,
   setActiveMarkdownBlockAction,