collabmd 0.1.34 → 0.1.36

package/src/client/application/plantuml-preview-hydrator.js

@@ -1,5 +1,12 @@
 import { clamp } from '../domain/vault-utils.js';
 import { setDiagramActionButtonIcon } from '../domain/diagram-action-icons.js';
+import {
+  createDiagramExportFileNames,
+  downloadBlob,
+  exportSvgMarkupFromElement,
+  rasterizeSvgMarkupToPngBlob,
+  writeBlobToClipboard,
+} from './diagram-preview-export.js';
 import { DiagramPreviewHydrator } from './diagram-preview-hydrator.js';
 import {
   createPlantUmlPlaceholderCard,
@@ -36,6 +43,8 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     this.svgCache = new Map();
     this.svgInflightRequests = new Map();
     this.shellRefits = new WeakMap();
+    this.shellResizeObservers = new WeakMap();
+    this.resizeObservers = new Set();
     this.activeMaximizedShell = null;
     this.maximizedRoot = null;
     this.resizeFrameId = null;
@@ -49,10 +58,41 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       cancelAnimationFrame(this.resizeFrameId);
       this.resizeFrameId = null;
     }
+    this.disconnectResizeObservers();
     this.maximizedRoot?.remove();
     this.maximizedRoot = null;
   }
 
+  disconnectResizeObservers() {
+    this.resizeObservers.forEach((observer) => observer.disconnect());
+    this.resizeObservers.clear();
+    this.shellResizeObservers = new WeakMap();
+  }
+
+  disconnectShellResizeObserver(shell) {
+    const observer = this.shellResizeObservers.get(shell);
+    if (!observer) {
+      return;
+    }
+
+    observer.disconnect();
+    this.resizeObservers.delete(observer);
+    this.shellResizeObservers.delete(shell);
+  }
+
+  attachShellResizeObserver(shell, frame, onResize) {
+    this.disconnectShellResizeObserver(shell);
+    if (typeof ResizeObserver !== 'function' || !shell?.isConnected || !(frame instanceof HTMLElement)) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => onResize());
+    observer.observe(frame);
+    observer.observe(shell);
+    this.shellResizeObservers.set(shell, observer);
+    this.resizeObservers.add(observer);
+  }
+
   clearActiveShell() {
     this.activeMaximizedShell = null;
     if (this.maximizedRoot && this.maximizedRoot.childElementCount === 0) {
@@ -228,6 +268,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       this.svgInflightRequests.delete(source);
     }
 
+    this.disconnectShellResizeObserver(shell);
     this.shellRefits.delete(shell);
     if (this.activeMaximizedShell === shell) {
       this.restoreShellMount(shell);
@@ -261,27 +302,38 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
 
     const toolbar = document.createElement('div');
     toolbar.className = 'plantuml-toolbar diagram-preview-toolbar';
+    const leftGroup = document.createElement('div');
+    leftGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--zoom';
+    const rightGroup = document.createElement('div');
+    rightGroup.className = 'diagram-preview-toolbar-group diagram-preview-toolbar-group--actions';
 
     const frame = document.createElement('div');
     frame.className = 'plantuml-frame diagram-preview-frame';
     const decreaseButton = this.createToolButton('−', 'Zoom out');
     const increaseButton = this.createToolButton('+', 'Zoom in');
-    const resetButton = this.createToolButton('Reset', 'Reset zoom');
-    const reloadButton = this.createToolButton('Reload', 'Reload diagram');
-    const maximizeButton = this.createToolButton('Max', 'Maximize diagram');
+    const resetButton = this.createToolButton('', 'Reset zoom', { icon: 'fit' });
+    const copyButton = this.createToolButton('', 'Copy image', { icon: 'copy' });
+    const downloadButton = this.createToolButton('', 'Download SVG', { icon: 'download' });
+    const reloadButton = this.createToolButton('', 'Reload diagram', { icon: 'refresh' });
+    const maximizeButton = this.createToolButton('', 'Maximize diagram', { icon: 'maximize' });
     maximizeButton.classList.add('plantuml-maximize-btn');
-    setDiagramActionButtonIcon(reloadButton, 'refresh');
-    setDiagramActionButtonIcon(maximizeButton, 'maximize');
     const zoomLabel = document.createElement('span');
     zoomLabel.className = 'plantuml-zoom-label diagram-preview-zoom-label';
     zoomLabel.setAttribute('aria-live', 'polite');
 
-    toolbar.append(decreaseButton, zoomLabel, resetButton, increaseButton, reloadButton, maximizeButton);
+    leftGroup.append(decreaseButton, zoomLabel, resetButton, increaseButton);
+    rightGroup.append(copyButton, downloadButton, reloadButton, maximizeButton);
+    toolbar.append(leftGroup, rightGroup);
 
     const { width: baseWidth, height: baseHeight } = getSvgSize(svg);
     let currentZoom = PLANTUML_ZOOM.default;
     let defaultZoom = 1;
     let zoomAnimationFrameId = null;
+    let resetZoomFrameId = null;
+    let layoutFrameId = null;
+    let hasManualZoom = false;
+    let lastAutoFitViewportWidth = 0;
+    let shouldForceScheduledReset = false;
     let isPanning = false;
     let activePointerId = null;
     let panStartX = 0;
@@ -293,6 +345,15 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     svg.style.margin = '0 auto';
     svg.style.maxWidth = 'none';
 
+    const exportSvgMarkup = () => exportSvgMarkupFromElement(svg);
+
+    const exportFileNames = () => createDiagramExportFileNames({
+      currentFilePath: this.renderer.getSourceFilePath?.() ?? '',
+      diagramKind: 'plantuml',
+      sourceLine: shell.getAttribute('data-source-line') || '',
+      targetPath: shell.dataset.plantumlTarget || '',
+    });
+
     const calculateDefaultZoom = () => {
       const viewport = getFrameViewportSize(frame);
       if (!Number.isFinite(baseWidth) || baseWidth <= 0 || viewport.width <= 0) {
@@ -369,11 +430,14 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     };
 
     const zoomBy = (delta) => {
+      hasManualZoom = true;
       animateZoomTo(currentZoom + delta);
     };
 
     const resetZoomToFit = ({ animate = false } = {}) => {
       defaultZoom = calculateDefaultZoom();
+      hasManualZoom = false;
+      lastAutoFitViewportWidth = getFrameViewportSize(frame).width;
 
       if (animate && Math.abs(defaultZoom - currentZoom) > 0.001) {
         animateZoomTo(defaultZoom);
@@ -390,28 +454,73 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       frame.scrollTop = 0;
     };
 
-    let resetZoomFrameId = null;
-    const scheduleResetZoomToFit = () => {
+    const scheduleResetZoomToFit = ({ force = false } = {}) => {
+      shouldForceScheduledReset = shouldForceScheduledReset || force;
       if (resetZoomFrameId) {
         cancelAnimationFrame(resetZoomFrameId);
       }
+      if (layoutFrameId) {
+        cancelAnimationFrame(layoutFrameId);
+      }
 
       resetZoomFrameId = requestAnimationFrame(() => {
-        resetZoomFrameId = null;
-        if (!shell.isConnected) {
-          return;
-        }
-
-        resetZoomToFit();
+        layoutFrameId = requestAnimationFrame(() => {
+          layoutFrameId = requestAnimationFrame(() => {
+            layoutFrameId = null;
+            resetZoomFrameId = null;
+            if (!shell.isConnected) {
+              return;
+            }
+
+            const shouldForce = shouldForceScheduledReset;
+            shouldForceScheduledReset = false;
+            const viewportWidth = getFrameViewportSize(frame).width;
+            const viewportChanged = Math.abs(viewportWidth - lastAutoFitViewportWidth) > 1;
+            if (!shouldForce && hasManualZoom) {
+              return;
+            }
+            if (!shouldForce && viewportWidth > 0 && lastAutoFitViewportWidth > 0 && !viewportChanged) {
+              return;
+            }
+
+            resetZoomToFit();
+          });
+        });
       });
     };
 
     this.shellRefits.set(shell, scheduleResetZoomToFit);
+    this.attachShellResizeObserver(shell, frame, () => scheduleResetZoomToFit());
 
     decreaseButton.addEventListener('click', () => zoomBy(-PLANTUML_ZOOM.step));
     increaseButton.addEventListener('click', () => zoomBy(PLANTUML_ZOOM.step));
     resetButton.addEventListener('click', () => {
-      resetZoomToFit({ animate: true });
+      scheduleResetZoomToFit({ force: true });
+    });
+    copyButton.addEventListener('click', async () => {
+      try {
+        const { pngFileName } = exportFileNames();
+        const pngBlob = await rasterizeSvgMarkupToPngBlob(exportSvgMarkup());
+        try {
+          await writeBlobToClipboard(pngBlob);
+          this.renderer.toastController?.show?.('Diagram copied');
+        } catch {
+          downloadBlob(pngBlob, pngFileName);
+          this.renderer.toastController?.show?.('Clipboard image copy is unavailable here. Downloaded PNG instead.');
+        }
+      } catch {
+        this.renderer.toastController?.show?.('Failed to copy diagram');
+      }
+    });
+    downloadButton.addEventListener('click', () => {
+      try {
+        const { svgFileName } = exportFileNames();
+        const svgBlob = new Blob([exportSvgMarkup()], { type: 'image/svg+xml;charset=utf-8' });
+        downloadBlob(svgBlob, svgFileName);
+        this.renderer.toastController?.show?.('Diagram download started');
+      } catch {
+        this.renderer.toastController?.show?.('Failed to download diagram');
+      }
     });
 
     const syncMaximizeButtonState = () => {
@@ -445,7 +554,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
         this.activeMaximizedShell = shell;
         document.body.classList.add('plantuml-maximized-open');
         syncMaximizeButtonState();
-        scheduleResetZoomToFit();
+        scheduleResetZoomToFit({ force: true });
         return;
       }
 
@@ -458,7 +567,7 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
         document.body.classList.remove('plantuml-maximized-open');
       }
       syncMaximizeButtonState();
-      scheduleResetZoomToFit();
+      scheduleResetZoomToFit({ force: true });
     };
 
     reloadButton.addEventListener('click', () => {
@@ -481,6 +590,12 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
 
       isPanning = false;
       frame.classList.remove('is-dragging');
+      window.removeEventListener('pointerup', stopPanning, true);
+      window.removeEventListener('pointercancel', stopPanning, true);
+      window.removeEventListener('mouseup', stopPanning, true);
+      window.removeEventListener('touchend', stopPanning, true);
+      window.removeEventListener('touchcancel', stopPanning, true);
+      window.removeEventListener('blur', stopPanning, true);
 
       if (activePointerId !== null && typeof frame.releasePointerCapture === 'function') {
         try {
@@ -511,7 +626,19 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
       panStartScrollTop = frame.scrollTop;
 
       frame.classList.add('is-dragging');
-      frame.setPointerCapture?.(event.pointerId);
+      window.addEventListener('pointerup', stopPanning, true);
+      window.addEventListener('pointercancel', stopPanning, true);
+      window.addEventListener('mouseup', stopPanning, true);
+      window.addEventListener('touchend', stopPanning, true);
+      window.addEventListener('touchcancel', stopPanning, true);
+      window.addEventListener('blur', stopPanning, true);
+      if (typeof frame.setPointerCapture === 'function') {
+        try {
+          frame.setPointerCapture(event.pointerId);
+        } catch {
+          // Safari can reject pointer capture during rapid layout transitions.
+        }
+      }
       event.preventDefault();
     });
 
@@ -527,6 +654,10 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     frame.addEventListener('pointerup', stopPanning);
     frame.addEventListener('pointercancel', stopPanning);
     frame.addEventListener('lostpointercapture', stopPanning);
+    frame.addEventListener('mouseleave', stopPanning);
+    frame.addEventListener('mouseup', stopPanning);
+    frame.addEventListener('touchend', stopPanning);
+    frame.addEventListener('touchcancel', stopPanning);
 
     frame.appendChild(svg);
     const sourceNode = shell.querySelector('.plantuml-source');
@@ -541,13 +672,17 @@ export class PlantUmlPreviewHydrator extends DiagramPreviewHydrator {
     applyZoom(defaultZoom);
   }
 
-  createToolButton(label, ariaLabel) {
+  createToolButton(label, ariaLabel, { icon = '' } = {}) {
     const button = document.createElement('button');
     button.type = 'button';
     button.className = 'plantuml-tool-btn ui-preview-action';
     button.setAttribute('aria-label', ariaLabel);
     button.title = ariaLabel;
-    button.textContent = label;
+    if (icon) {
+      setDiagramActionButtonIcon(button, icon);
+    } else {
+      button.textContent = label;
+    }
     return button;
   }
 }

package/src/client/application/preview-diagram-utils.js

@@ -165,20 +165,30 @@ export function createPlantUmlPlaceholderCard(key, message = 'Renders server-sid
   return card;
 }
 
-export function sanitizeSvgMarkup(svgMarkup) {
-  const parser = new DOMParser();
-  const documentNode = parser.parseFromString(svgMarkup, 'image/svg+xml');
-  const svg = documentNode.documentElement;
+const SHOW_COMMENT_NODE = 128;
+
+function removeSvgComments(rootElement) {
+  const walker = rootElement.ownerDocument.createTreeWalker(rootElement, SHOW_COMMENT_NODE);
+  const comments = [];
+
+  while (walker.nextNode()) {
+    comments.push(walker.currentNode);
+  }
 
-  if (!svg || svg.nodeName.toLowerCase() !== 'svg') {
+  comments.forEach((comment) => comment.remove());
+}
+
+export function sanitizeSvgElement(svgElement) {
+  if (!(svgElement instanceof SVGSVGElement)) {
     throw new Error('Renderer returned invalid SVG');
   }
 
-  documentNode.querySelectorAll('script, foreignObject').forEach((node) => {
+  removeSvgComments(svgElement);
+  svgElement.querySelectorAll('script, foreignObject').forEach((node) => {
     node.remove();
   });
 
-  Array.from(documentNode.querySelectorAll('*')).forEach((element) => {
+  [svgElement, ...Array.from(svgElement.querySelectorAll('*'))].forEach((element) => {
     Array.from(element.attributes).forEach((attribute) => {
       const name = attribute.name.toLowerCase();
       const value = attribute.value || '';
@@ -193,7 +203,37 @@ export function sanitizeSvgMarkup(svgMarkup) {
     });
   });
 
-  return svg.outerHTML;
+  return svgElement;
+}
+
+export function serializeSvgElement(svgElement) {
+  const sanitizedSvg = sanitizeSvgElement(svgElement);
+  return new XMLSerializer().serializeToString(sanitizedSvg);
+}
+
+function parseSvgMarkup(svgMarkup) {
+  const normalizedMarkup = String(svgMarkup ?? '')
+    .replace(/<!--[\s\S]*?-->/gu, '')
+    .replace(/&nbsp;/giu, '&#160;');
+
+  const parser = new DOMParser();
+  const documentNode = parser.parseFromString(normalizedMarkup, 'image/svg+xml');
+  const svg = documentNode.documentElement;
+  if (svg?.nodeName.toLowerCase() === 'svg' && !documentNode.querySelector('parsererror')) {
+    return svg;
+  }
+
+  const fallbackDocument = parser.parseFromString(normalizedMarkup, 'text/html');
+  return fallbackDocument.querySelector('svg');
+}
+
+export function sanitizeSvgMarkup(svgMarkup) {
+  const svg = parseSvgMarkup(svgMarkup);
+  if (!(svg instanceof SVGSVGElement)) {
+    throw new Error('Renderer returned invalid SVG');
+  }
+
+  return serializeSvgElement(svg);
 }
 
 export function shouldPreserveHydratedDiagram({ nextSource = '', nextTarget = '', preservedSource = '', preservedTarget = '' } = {}) {

package/src/client/application/preview-renderer.js

@@ -20,6 +20,7 @@ export class PreviewRenderer {
     plantUmlRenderClient = null,
     previewContainer,
     previewElement,
+    toastController = null,
   }) {
     this.getContent = getContent;
     this.getFileList = getFileList;
@@ -33,6 +34,7 @@ export class PreviewRenderer {
     this.plantUmlRenderClient = plantUmlRenderClient;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
+    this.toastController = toastController;
     this.renderHost = null;
 
     this.pendingRenderVersion = 0;

package/src/client/application/quick-switcher-loader.js

@@ -0,0 +1,42 @@
+export async function ensureQuickSwitcherInstance(host) {
+  if (host.quickSwitcher) {
+    return host.quickSwitcher;
+  }
+
+  if (!host.quickSwitcherModulePromise) {
+    host.quickSwitcherModulePromise = host.loadQuickSwitcherController();
+  }
+
+  let QuickSwitcherController;
+  try {
+    QuickSwitcherController = await host.quickSwitcherModulePromise;
+  } catch (error) {
+    host.quickSwitcherModulePromise = null;
+    console.error('[quick-switcher] Failed to load file search.', error);
+    host.toastController?.show?.('Failed to load file search. Try again.', {
+      dismissible: true,
+    });
+    throw error;
+  }
+
+  if (!host.quickSwitcher) {
+    host.quickSwitcher = new QuickSwitcherController({
+      getFileList: () => host.fileExplorer.flatFiles,
+      onFileSelect: (filePath) => host.handleFileSelection(filePath, {
+        closeSidebarOnMobile: true,
+        revealInTree: true,
+      }),
+    });
+  }
+
+  return host.quickSwitcher;
+}
+
+export async function toggleQuickSwitcherInstance(host) {
+  try {
+    const quickSwitcher = await ensureQuickSwitcherInstance(host);
+    quickSwitcher.toggle();
+  } catch {
+    // ensureQuickSwitcherInstance reports the load failure and resets the cached import.
+  }
+}

package/src/client/application/workspace-route-controller.js

@@ -24,6 +24,7 @@ export class WorkspaceRouteController {
     setSession,
     setSessionLoadToken,
     setSidebarTab,
+    setSidebarVisibility,
     setCurrentFilePath,
     showGitCommit,
     showGitDiff,
@@ -59,6 +60,7 @@ export class WorkspaceRouteController {
     this.setSession = setSession;
     this.setSessionLoadToken = setSessionLoadToken;
     this.setSidebarTab = setSidebarTab;
+    this.setSidebarVisibility = setSidebarVisibility ?? (() => {});
     this.setCurrentFilePath = setCurrentFilePath;
     this.showGitCommit = showGitCommit;
     this.showGitDiff = showGitDiff;
@@ -69,6 +71,7 @@ export class WorkspaceRouteController {
     this.videoEmbed = videoEmbed;
     this.workspaceCoordinator = workspaceCoordinator;
     this.layoutController = layoutController;
+    this.pendingTreeRevealPath = null;
   }
 
   async handleHashChange() {
@@ -246,6 +249,11 @@ export class WorkspaceRouteController {
   }
 
   async openFile(filePath, options = {}) {
+    const shouldRevealInTree = this.pendingTreeRevealPath === filePath;
+    if (shouldRevealInTree) {
+      this.pendingTreeRevealPath = null;
+    }
+
     this.imageLightbox?.close?.();
     this.gitPanel.setSelection();
     this.gitDiffView.hide();
@@ -254,6 +262,10 @@ export class WorkspaceRouteController {
     this.syncMainChrome({ mode: 'editor' });
     await this.workspaceCoordinator.openFile(filePath, options);
     this.setSession(this.workspaceCoordinator.getSession());
+
+    if (shouldRevealInTree) {
+      this.revealFileInTree(filePath, { clearSearch: true });
+    }
   }
 
   cleanupSession() {
@@ -261,14 +273,35 @@ export class WorkspaceRouteController {
     this.setSession(this.workspaceCoordinator.getSession());
   }
 
-  handleFileSelection(filePath, { closeSidebarOnMobile = false } = {}) {
-    if (closeSidebarOnMobile) {
+  handleFileSelection(filePath, { closeSidebarOnMobile = false, revealInTree = false } = {}) {
+    const currentRoute = this.navigation.getHashRoute?.() ?? null;
+    const isCanonicalCurrentFileRoute = (
+      currentRoute?.type === 'file'
+      && currentRoute.filePath === filePath
+      && !currentRoute.drawioMode
+    );
+    if (revealInTree) {
+      this.pendingTreeRevealPath = filePath;
+      if (isCanonicalCurrentFileRoute) {
+        this.pendingTreeRevealPath = null;
+        this.revealFileInTree(filePath, { clearSearch: true });
+        return;
+      }
+    }
+
+    if (closeSidebarOnMobile && !revealInTree) {
       this.closeSidebarOnMobile();
     }
 
     this.navigation.navigateToFile(filePath);
   }
 
+  revealFileInTree(filePath, { clearSearch = false } = {}) {
+    this.setSidebarTab('files');
+    this.setSidebarVisibility(true);
+    this.fileExplorer.revealFile?.(filePath, { clearSearch });
+  }
+
   resetPreviewSurface() {
     this.imageLightbox?.close?.();
     this.previewRenderer.setHydrationPaused(false);

package/src/client/application/workspace-state-store.js

@@ -17,6 +17,7 @@ export class WorkspaceStateStore {
       gitRepoAvailable: false,
       globalUsers: [],
       isTabActive: false,
+      presencePanelOpen: false,
       sessionLoadToken: 0,
       ...initialState,
     };

package/src/client/bootstrap/collabmd-app-shell.js

@@ -1,4 +1,5 @@
 import { PreviewRenderer } from '../application/preview-renderer.js';
+import { ensureQuickSwitcherInstance, toggleQuickSwitcherInstance } from '../application/quick-switcher-loader.js';
 import { WorkspaceRouteController } from '../application/workspace-route-controller.js';
 import { WikiLinkFileController } from '../application/wiki-link-file-controller.js';
 import { WorkspacePreviewController } from '../application/workspace-preview-controller.js';
@@ -99,9 +100,14 @@ export class CollabMdAppShell {
   handleGitCommitSubmit(...args) { return gitFeature.handleGitCommitSubmit.apply(this, args); }
   updateGlobalUsers(...args) { return presenceFeature.updateGlobalUsers.apply(this, args); }
   updateFileAwareness(...args) { return presenceFeature.updateFileAwareness.apply(this, args); }
+  closePresencePanel(...args) { return presenceFeature.closePresencePanel.apply(this, args); }
+  openPresencePanel(...args) { return presenceFeature.openPresencePanel.apply(this, args); }
   renderPresence(...args) { return presenceFeature.renderPresence.apply(this, args); }
   renderAvatars(...args) { return presenceFeature.renderAvatars.apply(this, args); }
+  renderPresencePanel(...args) { return presenceFeature.renderPresencePanel.apply(this, args); }
+  startFollowingUser(...args) { return presenceFeature.startFollowingUser.apply(this, args); }
   toggleFollowUser(...args) { return presenceFeature.toggleFollowUser.apply(this, args); }
+  togglePresencePanel(...args) { return presenceFeature.togglePresencePanel.apply(this, args); }
   stopFollowingUser(...args) { return presenceFeature.stopFollowingUser.apply(this, args); }
   syncFollowedUser(...args) { return presenceFeature.syncFollowedUser.apply(this, args); }
   followUserCursor(...args) { return presenceFeature.followUserCursor.apply(this, args); }
@@ -112,6 +118,8 @@ export class CollabMdAppShell {
   closeToolbarOverflowMenu(...args) { return uiFeature.closeToolbarOverflowMenu.apply(this, args); }
   getStoredLineWrapping(...args) { return uiFeature.getStoredLineWrapping.apply(this, args); }
   handleConnectionChange(...args) { return uiFeature.handleConnectionChange.apply(this, args); }
+  handleDocumentKeydown(...args) { return uiFeature.handleDocumentKeydown.apply(this, args); }
+  handleDocumentPointerDown(...args) { return uiFeature.handleDocumentPointerDown.apply(this, args); }
   handlePreviewContentClick(...args) { return uiFeature.handlePreviewContentClick.apply(this, args); }
   handleThemeChange(...args) { return uiFeature.handleThemeChange.apply(this, args); }
   hideEditorLoading(...args) { return uiFeature.hideEditorLoading.apply(this, args); }
@@ -365,6 +373,7 @@ export class CollabMdAppShell {
       plantUmlRenderClient: this.plantUmlApiClient,
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
+      toastController: this.toastController,
     });
     this.themeController = new ThemeController({ onChange: (theme) => this.handleThemeChange(theme) });
     this.layoutController = new LayoutController({
@@ -390,6 +399,9 @@ export class CollabMdAppShell {
       getLocalUser: () => this.lobby.getLocalUser(),
       getTheme: () => this.themeController.getTheme(),
       onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
+      onToggleQuickSwitcher: () => {
+        void this.toggleQuickSwitcher();
+      },
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
       toastController: this.toastController,
@@ -399,6 +411,9 @@ export class CollabMdAppShell {
       getTheme: () => this.themeController.getTheme(),
       onOpenFile: (filePath) => filePath && this.navigation.navigateToFile(filePath),
       onOpenTextFile: (filePath) => filePath && this.navigation.navigateToFile(filePath, { drawioMode: 'text' }),
+      onToggleQuickSwitcher: () => {
+        void this.toggleQuickSwitcher();
+      },
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
       toastController: this.toastController,
@@ -640,6 +655,7 @@ export class CollabMdAppShell {
         this.sessionLoadToken = value;
       },
       setSidebarTab: (value) => this.setSidebarTab(value),
+      setSidebarVisibility: (showSidebar) => this.setSidebarVisibility(showSidebar),
       showGitCommit: (route) => this.showGitCommit(route),
       showGitDiff: (route) => this.showGitDiff(route),
       showGitFileHistory: (route) => this.showGitFileHistory(route),
@@ -687,6 +703,8 @@ export class CollabMdAppShell {
   set gitRepoAvailable(value) { this.stateStore.set('gitRepoAvailable', value); }
   get activeSidebarTab() { return this.stateStore.get('activeSidebarTab'); }
   set activeSidebarTab(value) { this.stateStore.set('activeSidebarTab', value); }
+  get presencePanelOpen() { return this.stateStore.get('presencePanelOpen'); }
+  set presencePanelOpen(value) { this.stateStore.set('presencePanelOpen', value); }
   get followedUserClientId() { return this.stateStore.get('followedUserClientId'); }
   set followedUserClientId(value) { this.stateStore.set('followedUserClientId', value); }
   get followedCursorSignature() { return this.stateStore.get('followedCursorSignature'); }
@@ -771,29 +789,16 @@ export class CollabMdAppShell {
     this._editorSessionPrewarmHandle = window.setTimeout(runPrewarm, 0);
   }
 
-  async ensureQuickSwitcher() {
-    if (this.quickSwitcher) {
-      return this.quickSwitcher;
-    }
-
-    if (!this.quickSwitcherModulePromise) {
-      this.quickSwitcherModulePromise = import('../presentation/quick-switcher-controller.js')
-        .then((module) => module.QuickSwitcherController);
-    }
-
-    const QuickSwitcherController = await this.quickSwitcherModulePromise;
-    if (!this.quickSwitcher) {
-      this.quickSwitcher = new QuickSwitcherController({
-        getFileList: () => this.fileExplorer.flatFiles,
-        onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
-      });
-    }
+  loadQuickSwitcherController() {
+    return import('../presentation/quick-switcher-controller.js')
+      .then((module) => module.QuickSwitcherController);
+  }
 
-    return this.quickSwitcher;
+  async ensureQuickSwitcher() {
+    return ensureQuickSwitcherInstance(this);
   }
 
   async toggleQuickSwitcher() {
-    const quickSwitcher = await this.ensureQuickSwitcher();
-    quickSwitcher.toggle();
+    return toggleQuickSwitcherInstance(this);
   }
 }