collabmd 0.1.19 → 0.1.20

package/public/index.html

@@ -364,16 +364,26 @@
             <div class="preview-body">
               <div id="previewContainer" class="preview-container">
                 <div id="previewContent" class="preview-content"></div>
-
-                <!-- Backlinks (Linked Mentions) -->
-                <div id="backlinksPanel" class="backlinks-panel hidden">
+                <div id="backlinksInlinePanel" class="backlinks-panel backlinks-panel-inline hidden">
+                  <div class="backlinks-header" role="button" tabindex="0" aria-expanded="false">
+                    <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+                    <span class="backlinks-toggle">0 Linked Mentions</span>
+                    <span class="backlinks-count"></span>
+                  </div>
+                  <div class="backlinks-body" aria-hidden="true" inert>
+                    <div class="backlinks-list"></div>
+                  </div>
+                </div>
+              </div>
+              <div id="backlinksPanel" class="backlinks-panel-layer hidden">
+                <div class="backlinks-panel backlinks-panel-dock" data-backlinks-variant="dock">
                   <div class="backlinks-header" role="button" tabindex="0" aria-expanded="false">
                     <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                     <span class="backlinks-toggle">0 Linked Mentions</span>
                     <span class="backlinks-count"></span>
                   </div>
                   <div class="backlinks-body" aria-hidden="true" inert>
-                    <div class="backlinks-list" id="backlinksList"></div>
+                    <div class="backlinks-list"></div>
                   </div>
                 </div>
               </div>

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

@@ -12,6 +12,17 @@ function normalizeWorkspaceChange(workspaceChange = {}) {
 }
 
 export const gitFeature = {
+  formatPullBackupToast(pullBackup = null) {
+    const fileCount = Number(pullBackup?.fileCount || 0);
+    if (fileCount === 1) {
+      return 'Pulled latest changes. 1 overlapping local file was backed up.';
+    }
+    if (fileCount > 1) {
+      return `Pulled latest changes. ${fileCount} overlapping local files were backed up.`;
+    }
+    return 'Pulled latest changes. Overlapping local changes were recorded in a pull backup.';
+  },
+
   setGitOperationStatus(message = '') {
     const badge = this.elements.gitOperationStatus;
     if (!badge) {
@@ -92,7 +103,11 @@ export const gitFeature = {
     });
     const data = await response.json();
     if (!response.ok) {
-      throw new Error(data.error || 'Git action failed');
+      const error = new Error(data.error || 'Git action failed');
+      if (typeof data?.code === 'string') {
+        error.code = data.code;
+      }
+      throw error;
     }
     return data;
   },
@@ -242,7 +257,20 @@ export const gitFeature = {
           result,
           showLocalFileToast: true,
         });
+        if (result.pullBackup) {
+          this.toastController.show(this.formatPullBackupToast(result.pullBackup), 5000);
+        }
       } catch (error) {
+        if (error?.code === 'pull_diverged_ff_only') {
+          this.toastController.show('Cannot pull because local and remote commits have diverged. Fast-forward only pull is not possible.', 5000);
+          return;
+        }
+
+        if (error?.code === 'pull_conflicted_after_autostash') {
+          this.toastController.show('Pull updated the branch, but reapplying local changes caused conflicts. Review the conflicted files and the pull backup summary.', 6000);
+          return;
+        }
+
         this.toastController.show(error.message || 'Failed to pull branch');
       }
     });

package/src/client/application/app-shell-elements.js

@@ -61,6 +61,7 @@ export function bindAppShellElements(doc = document) {
     emptyStateNewFileBtn: doc.getElementById('emptyStateNewFileBtn'),
     emptyStateSearchBtn: doc.getElementById('emptyStateSearchBtn'),
     backlinksPanel: doc.getElementById('backlinksPanel'),
+    backlinksInlinePanel: doc.getElementById('backlinksInlinePanel'),
     commentSelectionButton: doc.getElementById('commentSelectionBtn'),
     commentsDrawer: doc.getElementById('commentsDrawer'),
     commentsDrawerEmpty: doc.getElementById('commentsDrawerEmpty'),

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

@@ -131,6 +131,7 @@ export class CollabMdAppShell {
     this.gitPanel = new GitPanelController({
       enabled: this.runtimeConfig.gitEnabled !== false,
       onCommitStaged: () => this.openGitCommitDialog(),
+      onOpenPullBackup: (filePath) => filePath && this.navigation.navigateToFile(filePath),
       onPullBranch: () => this.pullGitBranch(),
       onPushBranch: () => this.pushGitBranch(),
       onRepoChange: (isGitRepo, status) => this.handleGitRepoChange(isGitRepo, status),
@@ -149,6 +150,7 @@ export class CollabMdAppShell {
         this.scrollSyncController.suspendSync(250);
         this.session?.scrollToLine(sourceLine, 0);
       },
+      onWillOpen: () => this.commentUi?.closeDrawer(),
     });
     this.videoEmbed = new VideoEmbedController({
       previewElement: this.elements.previewContent,
@@ -196,6 +198,7 @@ export class CollabMdAppShell {
       scrollEditorToLine: (lineNumber, viewportRatio) => this.session?.scrollToLine(lineNumber, viewportRatio),
     });
     this.backlinksPanel = new BacklinksPanel({
+      inlinePanelElement: this.elements.backlinksInlinePanel,
       onFileSelect: (filePath) => this.handleFileSelection(filePath, { closeSidebarOnMobile: true }),
       panelElement: this.elements.backlinksPanel,
     });
@@ -214,6 +217,7 @@ export class CollabMdAppShell {
       commentsDrawerList: this.elements.commentsDrawerList,
       commentsToggleButton: this.elements.commentsToggleButton,
       editorContainer: this.elements.editorContainer,
+      onWillOpenDrawer: () => this.outlineController.close(),
       previewContainer: this.elements.previewContainer,
       previewElement: this.elements.previewContent,
       onCreateThread: ({ anchor, body }) => this.session?.createCommentThread({ anchor, body }),

package/src/client/infrastructure/editor-view-adapter.js

@@ -14,6 +14,7 @@ import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import { Compartment, EditorSelection, EditorState, Prec } from '@codemirror/state';
 import { oneDark } from '@codemirror/theme-one-dark';
 import {
+  Decoration,
   EditorView,
   crosshairCursor,
   drawSelection,
@@ -33,6 +34,38 @@ import { plantUmlLanguage, plantUmlLanguageDescription } from '../domain/plantum
 import { handleImagePasteEvent } from './editor-paste-utils.js';
 
 const markdownCodeLanguages = [...languages, plantUmlLanguageDescription];
+const pairedMatchingBracketMark = Decoration.mark({ class: 'cm-matchingBracket cm-matchingBracket-paired' });
+const nonmatchingBracketMark = Decoration.mark({ class: 'cm-nonmatchingBracket' });
+
+function isBracketBeforeCaret(range, state) {
+  return state.selection.ranges.some((selectionRange) =>
+    selectionRange.empty && range.to === selectionRange.head
+  );
+}
+
+function renderBracketMatch(match, state) {
+  const decorations = [];
+
+  if (!match.matched) {
+    decorations.push(nonmatchingBracketMark.range(match.start.from, match.start.to));
+    if (match.end) {
+      decorations.push(nonmatchingBracketMark.range(match.end.from, match.end.to));
+    }
+    return decorations;
+  }
+
+  const shouldHideStartBracket = isBracketBeforeCaret(match.start, state);
+  const shouldHideEndBracket = match.end ? isBracketBeforeCaret(match.end, state) : false;
+
+  if (!shouldHideStartBracket) {
+    decorations.push(pairedMatchingBracketMark.range(match.start.from, match.start.to));
+  }
+  if (match.end && !shouldHideEndBracket) {
+    decorations.push(pairedMatchingBracketMark.range(match.end.from, match.end.to));
+  }
+
+  return decorations;
+}
 
 function createEditorTheme(theme) {
   const activeLineBackground = theme === 'dark'
@@ -47,6 +80,21 @@ function createEditorTheme(theme) {
   const selectionBorder = theme === 'dark'
     ? 'oklch(from var(--color-primary) l c h / 0.65)'
     : 'oklch(from var(--color-primary) l c h / 0.5)';
+  const caretColor = theme === 'dark'
+    ? 'color-mix(in oklab, var(--color-primary) 78%, white)'
+    : 'color-mix(in oklab, var(--color-primary) 84%, black)';
+  const bracketPairBackground = theme === 'dark'
+    ? 'oklch(from var(--color-primary) l c h / 0.2)'
+    : 'oklch(from var(--color-primary) l c h / 0.12)';
+  const bracketPairOutline = theme === 'dark'
+    ? 'oklch(from var(--color-primary) calc(l + 0.08) c h / 0.85)'
+    : 'oklch(from var(--color-primary) calc(l - 0.04) c h / 0.7)';
+  const nonmatchingBracketBackground = theme === 'dark'
+    ? 'oklch(from var(--color-error) l c h / 0.12)'
+    : 'oklch(from var(--color-error) l c h / 0.1)';
+  const nonmatchingBracketOutline = theme === 'dark'
+    ? 'oklch(from var(--color-error) calc(l + 0.08) c h / 0.8)'
+    : 'oklch(from var(--color-error) calc(l - 0.04) c h / 0.7)';
 
   return EditorView.theme({
     '&': {
@@ -54,13 +102,14 @@ function createEditorTheme(theme) {
       color: 'var(--color-text)',
     },
     '.cm-content': {
-      caretColor: 'var(--color-primary)',
+      caretColor,
       fontFamily: 'var(--font-mono)',
       padding: '16px 0',
     },
     '.cm-cursor, .cm-dropCursor': {
-      borderLeftColor: 'var(--color-primary)',
-      borderLeftWidth: '2px',
+      borderLeftColor: caretColor,
+      borderLeftWidth: '3px',
+      marginLeft: '-1px',
     },
     '.cm-foldPlaceholder': {
       backgroundColor: 'var(--color-surface-dynamic)',
@@ -86,8 +135,17 @@ function createEditorTheme(theme) {
       color: 'var(--color-text-muted)',
     },
     '.cm-matchingBracket': {
-      backgroundColor: 'var(--color-primary-highlight)',
-      outline: '1px solid var(--color-primary)',
+      borderRadius: '2px',
+      color: 'inherit',
+    },
+    '.cm-matchingBracket.cm-matchingBracket-paired': {
+      backgroundColor: bracketPairBackground,
+      outline: `1px solid ${bracketPairOutline}`,
+    },
+    '.cm-nonmatchingBracket': {
+      backgroundColor: nonmatchingBracketBackground,
+      outline: `1px solid ${nonmatchingBracketOutline}`,
+      borderRadius: '2px',
     },
     '.cm-selectionMatch': {
       backgroundColor: 'var(--color-primary-highlight)',
@@ -191,7 +249,7 @@ export class EditorViewAdapter {
           EditorState.allowMultipleSelections.of(true),
           indentOnInput(),
           syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-          bracketMatching(),
+          bracketMatching({ renderMatch: renderBracketMatch }),
           closeBrackets(),
           autocompletion({
             override: [wikiLinkCompletions(this.getFileList)],

package/src/client/presentation/backlinks-panel.js

@@ -2,62 +2,95 @@ import { escapeHtml } from '../domain/vault-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 /**
- * BacklinksPanel — a collapsible panel below the preview showing
- * which files link to the currently open file ("Linked Mentions").
+ * BacklinksPanel — renders "Linked Mentions" for the current file.
  *
- * Each mention shows the source file name and the context line
- * containing the [[wiki link]]. Clicking a mention navigates to that file.
+ * Desktop uses a docked bottom-left panel outside the preview scroll flow.
+ * Mobile keeps an inline collapsible panel at the end of the preview content.
  */
 export class BacklinksPanel {
-  constructor({ panelElement, onFileSelect }) {
-    this.panel = panelElement;
+  constructor({
+    documentRef = document,
+    inlinePanelElement = null,
+    onFileSelect,
+    panelElement,
+  }) {
+    this.documentRef = documentRef;
+    this.panelRoot = panelElement;
+    this.inlinePanel = inlinePanelElement;
     this.onFileSelect = onFileSelect;
 
-    this.header = this.panel?.querySelector('.backlinks-header');
-    this.toggle = this.panel?.querySelector('.backlinks-toggle');
-    this.countBadge = this.panel?.querySelector('.backlinks-count');
-    this.body = this.panel?.querySelector('.backlinks-body');
-    this.list = this.panel?.querySelector('.backlinks-list');
-
     this._expanded = false;
     this._currentFile = null;
     this._fetchController = null;
     this._backlinks = [];
 
+    const desktopPanel = this.panelRoot?.querySelector('[data-backlinks-variant="dock"]') ?? this.panelRoot;
+    this.panels = [
+      this._createPanelRef(desktopPanel),
+      this._createPanelRef(this.inlinePanel),
+    ].filter(Boolean);
+
+    this.handleDocumentPointerDown = (event) => {
+      if (!this._expanded) {
+        return;
+      }
+
+      const target = event?.target;
+      if (target && this.panels.some(({ panel }) => panel?.contains?.(target))) {
+        return;
+      }
+
+      this.close();
+    };
+
+    this.handleDocumentKeyDown = (event) => {
+      if (!this._expanded || event?.key !== 'Escape') {
+        return;
+      }
+
+      event.preventDefault?.();
+      this.close();
+    };
+
     this.bindEvents();
   }
 
   bindEvents() {
-    this.header?.addEventListener('click', () => {
-      if (this._backlinks.length === 0) return;
-      this._expanded = !this._expanded;
-      this._applyExpandState();
-    });
+    this.panels.forEach((refs) => {
+      refs.header?.addEventListener('click', () => {
+        if (this._backlinks.length === 0) return;
+        this._expanded = !this._expanded;
+        this._applyExpandState();
+      });
 
-    this.header?.addEventListener('keydown', (event) => {
-      if (event.key !== 'Enter' && event.key !== ' ') {
-        return;
-      }
+      refs.header?.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') {
+          return;
+        }
 
-      event.preventDefault();
-      this.header.click();
+        event.preventDefault();
+        refs.header.click();
+      });
     });
+
+    this.documentRef?.addEventListener?.('pointerdown', this.handleDocumentPointerDown);
+    this.documentRef?.addEventListener?.('keydown', this.handleDocumentKeyDown);
   }
 
-  /**
-   * Load backlinks for a file. Call on every file open and after
-   * content changes (debounced).
-   */
   async load(filePath) {
+    const fileChanged = filePath !== this._currentFile;
     this._currentFile = filePath;
 
+    if (fileChanged) {
+      this._expanded = false;
+    }
+
     if (!filePath) {
       this._backlinks = [];
       this._render();
       return;
     }
 
-    // Abort any in-flight fetch
     this._fetchController?.abort();
     this._fetchController = new AbortController();
 
@@ -68,7 +101,6 @@ export class BacklinksPanel {
       );
       const data = await response.json();
 
-      // Guard against stale responses (user switched files)
       if (this._currentFile !== filePath) return;
 
       this._backlinks = data.backlinks ?? [];
@@ -81,7 +113,6 @@ export class BacklinksPanel {
     this._render();
   }
 
-  /** Clear the panel (e.g. when navigating to empty state). */
   clear() {
     this._currentFile = null;
     this._backlinks = [];
@@ -89,100 +120,125 @@ export class BacklinksPanel {
     this._render();
   }
 
-  // --- Private ---
-
-  _render() {
-    if (!this.panel) return;
+  close() {
+    if (!this._expanded) {
+      return;
+    }
 
-    const count = this._backlinks.length;
-    const label = count === 1 ? '1 Linked Mention' : `${count} Linked Mentions`;
+    this._expanded = false;
+    this._applyExpandState();
+  }
 
-    if (this.countBadge) {
-      this.countBadge.textContent = count > 0 ? String(count) : '';
+  _createPanelRef(panel) {
+    if (!panel) {
+      return null;
     }
 
-    if (this.toggle) {
-      this.toggle.textContent = label;
-    }
+    return {
+      panel,
+      header: panel.querySelector('.backlinks-header'),
+      toggle: panel.querySelector('.backlinks-toggle'),
+      countBadge: panel.querySelector('.backlinks-count'),
+      body: panel.querySelector('.backlinks-body'),
+      list: panel.querySelector('.backlinks-list'),
+    };
+  }
 
-    // Hide entire panel when no current file
-    this.panel.classList.toggle('hidden', !this._currentFile);
+  _render() {
+    const count = this._backlinks.length;
+    const label = count === 1 ? 'Linked Mention' : 'Linked Mentions';
+    const shouldShow = Boolean(this._currentFile) && count > 0;
 
-    // Disable header click when 0 backlinks
-    this.header?.classList.toggle('backlinks-header-empty', count === 0);
+    this.panelRoot?.classList?.toggle('hidden', !shouldShow);
+    this.inlinePanel?.classList?.toggle('hidden', !shouldShow);
 
-    if (count === 0) {
+    if (!shouldShow) {
       this._expanded = false;
-      this._applyExpandState();
-      if (this.list) this.list.innerHTML = '';
-      return;
     }
 
-    this._renderList();
+    this.panels.forEach((refs) => {
+      refs.countBadge.textContent = shouldShow ? String(count) : '';
+      refs.toggle.textContent = label;
+      refs.header?.classList.toggle('backlinks-header-empty', !shouldShow);
+
+      if (!shouldShow) {
+        refs.list.innerHTML = '';
+      } else {
+        this._renderList(refs.list);
+      }
+    });
+
     this._applyExpandState();
   }
 
-  _renderList() {
-    if (!this.list) return;
-    this.list.innerHTML = '';
+  _renderList(listElement) {
+    if (!listElement) return;
+    listElement.innerHTML = '';
 
-    const fragment = document.createDocumentFragment();
+    const fragment = this.documentRef?.createDocumentFragment?.();
+    const target = fragment ?? listElement;
 
-    for (const backlink of this._backlinks) {
-      const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
-      const dirPath = backlink.file.includes('/')
-        ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
-        : '';
+    this._backlinks.forEach((backlink) => {
+      target.appendChild(this._createBacklinkItem(backlink));
+    });
 
-      const item = document.createElement('button');
-      item.type = 'button';
-      item.className = 'backlink-item';
-      item.addEventListener('click', () => {
-        this.onFileSelect?.(backlink.file);
-      });
+    if (fragment) {
+      listElement.appendChild(fragment);
+    }
+  }
 
-      // File name row
-      const nameRow = document.createElement('div');
-      nameRow.className = 'backlink-file-name';
-      nameRow.innerHTML = `
-        <svg class="backlink-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14 2 14 8 20 8"/>
-        </svg>
-        <span>${escapeHtml(fileName)}</span>
-        ${dirPath ? `<span class="backlink-dir">${escapeHtml(dirPath)}</span>` : ''}
-      `;
-      item.appendChild(nameRow);
-
-      // Context snippets
-      for (const ctx of backlink.contexts.slice(0, 3)) {
-        const contextEl = document.createElement('div');
-        contextEl.className = 'backlink-context';
-        contextEl.textContent = ctx;
-        item.appendChild(contextEl);
-      }
+  _createBacklinkItem(backlink) {
+    const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
+    const dirPath = backlink.file.includes('/')
+      ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
+      : '';
+
+    const item = this.documentRef.createElement('button');
+    item.type = 'button';
+    item.className = 'backlink-item';
+    item.addEventListener('click', () => {
+      this.close();
+      this.onFileSelect?.(backlink.file);
+    });
 
-      if (backlink.contexts.length > 3) {
-        const more = document.createElement('div');
-        more.className = 'backlink-context backlink-more';
-        more.textContent = `+${backlink.contexts.length - 3} more`;
-        item.appendChild(more);
-      }
+    const nameRow = this.documentRef.createElement('div');
+    nameRow.className = 'backlink-file-name';
+    nameRow.innerHTML = `
+      <svg class="backlink-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14 2 14 8 20 8"/>
+      </svg>
+      <span>${escapeHtml(fileName)}</span>
+      ${dirPath ? `<span class="backlink-dir">${escapeHtml(dirPath)}</span>` : ''}
+    `;
+    item.appendChild(nameRow);
+
+    backlink.contexts.slice(0, 3).forEach((ctx) => {
+      const contextElement = this.documentRef.createElement('div');
+      contextElement.className = 'backlink-context';
+      contextElement.textContent = ctx;
+      item.appendChild(contextElement);
+    });
 
-      fragment.appendChild(item);
+    if (backlink.contexts.length > 3) {
+      const moreElement = this.documentRef.createElement('div');
+      moreElement.className = 'backlink-context backlink-more';
+      moreElement.textContent = `+${backlink.contexts.length - 3} more`;
+      item.appendChild(moreElement);
     }
 
-    this.list.appendChild(fragment);
+    return item;
   }
 
   _applyExpandState() {
-    this.panel?.classList.toggle('expanded', this._expanded);
-    this.header?.setAttribute('aria-expanded', String(this._expanded));
-    this.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));
-    this.body?.setAttribute('aria-hidden', String(!this._expanded));
-
-    if (this.body) {
-      this.body.toggleAttribute('inert', !this._expanded);
-    }
+    const expanded = this._expanded && this._backlinks.length > 0;
+
+    this.panels.forEach((refs) => {
+      refs.panel.classList.toggle('expanded', expanded);
+      refs.header?.setAttribute('aria-expanded', String(expanded));
+      refs.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));
+      refs.body?.setAttribute('aria-hidden', String(!expanded));
+      refs.body?.toggleAttribute('inert', !expanded);
+    });
   }
 }

package/src/client/presentation/comment-ui-controller.js

@@ -279,6 +279,7 @@ export class CommentUiController {
     commentsDrawerList,
     commentsToggleButton,
     editorContainer,
+    onWillOpenDrawer,
     onCreateThread,
     onNavigateToLine,
     onReplyToThread,
@@ -293,6 +294,7 @@ export class CommentUiController {
     this.commentsDrawerList = commentsDrawerList;
     this.commentsToggleButton = commentsToggleButton;
     this.editorContainer = editorContainer;
+    this.onWillOpenDrawer = onWillOpenDrawer;
     this.onCreateThread = onCreateThread;
     this.onNavigateToLine = onNavigateToLine;
     this.onReplyToThread = onReplyToThread;
@@ -384,13 +386,30 @@ export class CommentUiController {
       this.scheduleLayoutRefresh();
     };
     this.handleDocumentPointerDown = (event) => {
-      if (!this.activeCard || !this.cardRoot) {
+      const target = event.target;
+
+      if (this.activeCard && this.cardRoot) {
+        if (this.cardRoot.contains(target)) {
+          return;
+        }
+        this.closeCard();
+      }
+
+      if (!this.drawerOpen) {
         return;
       }
-      if (this.cardRoot.contains(event.target)) {
+
+      if (
+        target instanceof Node
+        && (
+          this.commentsDrawer?.contains(target)
+          || this.commentsToggleButton?.contains(target)
+        )
+      ) {
         return;
       }
-      this.closeCard();
+
+      this.closeDrawer();
     };
     this.handleDocumentKeyDown = (event) => {
       if (event.key === 'Escape' && this.reactionPicker) {
@@ -414,8 +433,7 @@ export class CommentUiController {
       this.openComposerForSelection('toolbar');
     });
     this.commentsToggleButton?.addEventListener('click', () => {
-      this.drawerOpen = !this.drawerOpen;
-      this.render();
+      this.setDrawerOpen(!this.drawerOpen);
     });
     this.previewContainer?.addEventListener('scroll', this.handlePreviewScroll, { passive: true });
     this.editorContainer?.addEventListener('pointerdown', this.handleEditorPointerDown);
@@ -569,6 +587,24 @@ export class CommentUiController {
     this.render();
   }
 
+  setDrawerOpen(nextState) {
+    const normalizedState = Boolean(nextState);
+    if (normalizedState === this.drawerOpen) {
+      return;
+    }
+
+    if (normalizedState) {
+      this.onWillOpenDrawer?.();
+    }
+
+    this.drawerOpen = normalizedState;
+    this.render();
+  }
+
+  closeDrawer() {
+    this.setDrawerOpen(false);
+  }
+
   refreshLayout() {
     this.renderEditorLayer();
     this.renderPreviewLayer();