collabmd 0.1.48 → 0.1.51

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

@@ -153,6 +153,26 @@ function applySidebarVisibility(showSidebar) {
   }
 }
 
+/** @this {UiSidebarContext} */
+function handleSidebarTabsKeydown(event) {
+  if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+
+  const tabs = [
+    this.elements.filesSidebarTab,
+    this.elements.commentsSidebarTab,
+    this.elements.gitSidebarTab,
+  ].filter((tab) => tab && !tab.classList.contains('hidden'));
+  const currentIndex = Math.max(0, tabs.indexOf(event.target));
+  const nextIndex = event.key === 'Home'
+    ? 0
+    : event.key === 'End'
+      ? tabs.length - 1
+      : (currentIndex + (event.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length;
+  event.preventDefault();
+  tabs[nextIndex]?.click();
+  tabs[nextIndex]?.focus();
+}
+
 /** @this {UiSidebarContext} */
 function setSidebarTab(tab) {
   const nextTab = tab === 'git' && this.gitRepoAvailable
@@ -162,15 +182,30 @@ function setSidebarTab(tab) {
       : 'files';
   this.activeSidebarTab = nextTab;
 
-  this.elements.filesSidebarTab?.classList.toggle('active', nextTab === 'files');
-  this.elements.commentsSidebarTab?.classList.toggle('active', nextTab === 'comments');
-  this.elements.gitSidebarTab?.classList.toggle('active', nextTab === 'git');
-  document.getElementById('fileTree')?.classList.toggle('hidden', nextTab !== 'files');
+  [
+    [this.elements.filesSidebarTab, 'files'],
+    [this.elements.commentsSidebarTab, 'comments'],
+    [this.elements.gitSidebarTab, 'git'],
+  ].forEach(([button, buttonTab]) => {
+    const selected = nextTab === buttonTab;
+    button?.classList.toggle('active', selected);
+    button?.setAttribute('aria-selected', String(selected));
+    button?.setAttribute('tabindex', selected ? '0' : '-1');
+  });
+  const filePanel = document.getElementById('fileTree');
+  const commentPanel = this.elements.commentOverviewPanel;
+  const gitPanelElement = document.getElementById('gitPanel');
+  [
+    [filePanel, nextTab === 'files'],
+    [commentPanel, nextTab === 'comments'],
+    [gitPanelElement, nextTab === 'git'],
+  ].forEach(([panel, selected]) => {
+    panel?.classList.toggle('hidden', !selected);
+    panel?.setAttribute('aria-hidden', String(!selected));
+  });
   this.elements.fileSearch?.classList.toggle('hidden', nextTab !== 'files');
-  this.elements.commentOverviewPanel?.classList.toggle('hidden', nextTab !== 'comments');
   this.elements.gitSearch?.classList.toggle('hidden', nextTab !== 'git');
-  document.getElementById('gitPanel')?.classList.toggle('active', nextTab === 'git');
-  document.getElementById('gitPanel')?.classList.toggle('hidden', nextTab !== 'git');
+  gitPanelElement?.classList.toggle('active', nextTab === 'git');
   this.gitPanel.setActive(nextTab === 'git');
   if (nextTab === 'comments') {
     this.refreshCommentOverviewForSidebarOpen?.();
@@ -180,6 +215,7 @@ function setSidebarTab(tab) {
 export const uiFeatureSidebarMethods = {
   applySidebarVisibility,
   closeSidebarOnMobile,
+  handleSidebarTabsKeydown,
   initializeSidebarResizer,
   isMobileViewport,
   restoreSidebarState,

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

@@ -10,11 +10,12 @@
  * @property {string | null} followedUserClientId
  * @property {string} followedCursorSignature
  * @property {{ status: string, unreachable: boolean }} connectionState
- * @property {{ displayNameDialog?: HTMLDialogElement | HTMLElement | null, tabLockOverlay?: HTMLElement | null, tabLockTitle?: HTMLElement | null, tabLockCopy?: HTMLElement | null }} elements
+ * @property {{ tabLockOverlay?: HTMLDialogElement | null, tabLockTitle?: HTMLElement | null, tabLockCopy?: HTMLElement | null }} elements
  * @property {{ connect(): void, disconnect(): void, provider?: unknown }} lobby
  * @property {{ connect(): void, disconnect(): void, provider?: unknown }} workspaceSync
  * @property {{ show(message: string): void }} toastController
  * @property {{ tryActivate(options?: { takeover?: boolean }): void }} tabActivityLock
+ * @property {{ refresh(): Promise<boolean> }} webMcpTools
  * @property {{ prepareFileDisconnect(filePath: string): Promise<void> }} excalidrawEmbed
  * @property {{ handleHashChange(): Promise<void> }} workspaceRouteController
  * @property {() => boolean} isExcalidrawFile
@@ -35,13 +36,12 @@ function handleTabActivated({ takeover = false } = {}) {
   const wasInactive = !this.isTabActive;
   this.isTabActive = true;
   this.hideTabLockOverlay();
+  void this.webMcpTools?.refresh();
 
   if (!this.lobby.provider) {
     this.lobby.connect();
   }
-  if (!this.workspaceSync.provider) {
-    this.workspaceSync.connect();
-  }
+  this.connectWorkspaceSync();
 
   if (wasInactive) {
     if (this.fileExplorerReady) {
@@ -55,6 +55,12 @@ function handleTabActivated({ takeover = false } = {}) {
   }
 }
 
+function connectWorkspaceSync() {
+  if (!this.workspaceSync.provider) {
+    this.workspaceSync.connect();
+  }
+}
+
 /** @this {UiTabActivityContext} */
 async function handleTabBlocked({ reason } = {}) {
   const wasActive = this.isTabActive;
@@ -65,9 +71,7 @@ async function handleTabBlocked({ reason } = {}) {
   );
 
   this.isTabActive = false;
-  if (this.elements.displayNameDialog?.open) {
-    this.elements.displayNameDialog.close();
-  }
+  void this.webMcpTools?.refresh();
   this.lobby.disconnect();
   this.workspaceSync.disconnect();
   this.globalUsers = [];
@@ -100,6 +104,11 @@ function showTabLockOverlay({ reason } = {}) {
   const copy = this.elements.tabLockCopy;
   if (!overlay) return;
 
+  document.dispatchEvent(new Event('collabmd:close-custom-modals'));
+  document.querySelectorAll('dialog[open]').forEach((dialog) => {
+    if (dialog !== overlay) dialog.close();
+  });
+
   if (title) {
     title.textContent = reason === 'taken-over'
       ? 'This tab is no longer active'
@@ -112,15 +121,24 @@ function showTabLockOverlay({ reason } = {}) {
       : 'To avoid duplicate presence and chat, only one tab can stay connected at a time. Use the other tab, or take over the session here.';
   }
 
-  overlay.classList.remove('hidden');
+  if (!overlay.open) {
+    this.tabLockPreviouslyFocusedElement = document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+    overlay.showModal();
+  }
+  this.elements.tabLockTakeoverButton?.focus();
 }
 
 /** @this {UiTabActivityContext} */
 function hideTabLockOverlay() {
-  this.elements.tabLockOverlay?.classList.add('hidden');
+  if (this.elements.tabLockOverlay?.open) this.elements.tabLockOverlay.close();
+  this.tabLockPreviouslyFocusedElement?.focus?.();
+  this.tabLockPreviouslyFocusedElement = null;
 }
 
 export const uiFeatureTabActivityMethods = {
+  connectWorkspaceSync,
   handleTabActivated,
   handleTabBlocked,
   handleTabTakeover,

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

@@ -39,13 +39,17 @@ function renderBlockMenuMarkup(activeAction) {
         type="button"
         class="ui-button ui-button--ghost markdown-toolbar-block-trigger"
         data-markdown-block-menu-toggle
-        aria-haspopup="menu"
-        aria-expanded="false"
+        popovertarget="markdownBlockMenuPopover"
         title="Block formatting"
       >
         <span class="markdown-toolbar-block-trigger-label" data-markdown-block-trigger-label>${triggerLabel}</span>
         <span class="markdown-toolbar-block-trigger-icon" aria-hidden="true">${icons.chevronDown}</span>
       </button>
+      <div id="markdownBlockMenuPopover" class="markdown-toolbar-popover" popover="auto">
+        <div class="markdown-toolbar-menu" data-markdown-block-menu role="menu" aria-label="Block formatting">
+          ${renderBlockMenuItemsMarkup(activeAction)}
+        </div>
+      </div>
     </div>
   `;
 }
@@ -111,39 +115,12 @@ function renderMarkdownToolbar() {
 
   const activeAction = this.getActiveMarkdownBlockAction();
   root.innerHTML = renderMarkdownToolbarMarkup(activeAction);
-  this.renderMarkdownBlockMenuPopover();
   this.syncMarkdownToolbarBlockUi();
 }
 
 /** @this {UiToolbarContext} */
 function getMarkdownBlockMenuPopover() {
-  return this._markdownBlockMenuPopover ?? null;
-}
-
-/** @this {UiToolbarContext} */
-function renderMarkdownBlockMenuPopover() {
-  const mountTarget = this.elements?.editorContainer ?? document.body;
-  let popover = this.getMarkdownBlockMenuPopover();
-  if (!popover) {
-    popover = document.createElement('div');
-    popover.className = 'markdown-toolbar-popover hidden';
-    popover.innerHTML = '<div class="markdown-toolbar-menu" data-markdown-block-menu role="menu" aria-label="Block formatting"></div>';
-    popover.addEventListener('click', (event) => {
-      this.handleMarkdownToolbarClick?.(event);
-    });
-    popover.addEventListener('keydown', (event) => {
-      this.handleMarkdownToolbarKeydown?.(event);
-    });
-    mountTarget?.appendChild(popover);
-    this._markdownBlockMenuPopover = popover;
-  } else if (popover.parentElement !== mountTarget) {
-    mountTarget?.appendChild(popover);
-  }
-
-  const menu = popover.querySelector('[data-markdown-block-menu]');
-  if (menu) {
-    menu.innerHTML = renderBlockMenuItemsMarkup(this.getActiveMarkdownBlockAction());
-  }
+  return document.getElementById('markdownBlockMenuPopover');
 }
 
 /** @this {UiToolbarContext} */
@@ -166,13 +143,7 @@ function syncMarkdownToolbarBlockUi() {
     toggle.setAttribute('title', `${actionMeta.label}. Block formatting`);
   }
 
-  const popoverItems = Array.from(
-    this.getMarkdownBlockMenuPopover()?.querySelectorAll('[data-markdown-block-action]') ?? [],
-  );
-  const blockActionItems = [
-    ...root.querySelectorAll('[data-markdown-block-action]'),
-    ...popoverItems,
-  ];
+  const blockActionItems = root.querySelectorAll('[data-markdown-block-action]');
   blockActionItems.forEach((item) => {
     const itemAction = item.getAttribute('data-markdown-block-action');
     const isActive = itemAction === activeAction;
@@ -194,71 +165,23 @@ function setActiveMarkdownBlockAction(action) {
 
 /** @this {UiToolbarContext} */
 function isMarkdownBlockMenuOpen() {
-  return Boolean(this.elements?.markdownToolbar?.classList.contains('is-menu-open'));
-}
-
-/** @this {UiToolbarContext} */
-function positionMarkdownBlockMenu() {
-  const popover = this.getMarkdownBlockMenuPopover();
-  const toggle = this.elements?.markdownToolbar?.querySelector('[data-markdown-block-menu-toggle]');
-  const mountTarget = popover?.parentElement;
-  if (!popover || !toggle || !(mountTarget instanceof HTMLElement)) {
-    return;
-  }
-
-  const toggleRect = toggle.getBoundingClientRect();
-  const mountRect = mountTarget.getBoundingClientRect();
-  const menuRect = popover.getBoundingClientRect();
-  const menuWidth = menuRect.width || 176;
-  const menuHeight = menuRect.height || 240;
-  const horizontalPadding = 8;
-  const verticalGap = 6;
-  const preferredLeft = toggleRect.left - mountRect.left;
-  const maxLeft = Math.max(horizontalPadding, mountRect.width - menuWidth - horizontalPadding);
-  const preferredTop = (toggleRect.bottom - mountRect.top) + verticalGap;
-  const fitsBelow = preferredTop + menuHeight <= mountRect.height - horizontalPadding;
-
-  popover.style.left = `${Math.max(horizontalPadding, Math.min(preferredLeft, maxLeft))}px`;
-  popover.style.top = `${fitsBelow
-    ? preferredTop
-    : Math.max(horizontalPadding, (toggleRect.top - mountRect.top) - menuHeight - verticalGap)}px`;
+  return Boolean(this.getMarkdownBlockMenuPopover()?.matches(':popover-open'));
 }
 
 /** @this {UiToolbarContext} */
 function openMarkdownBlockMenu() {
-  const root = this.elements?.markdownToolbar;
-  if (!root) {
-    return;
-  }
-
-  this.renderMarkdownBlockMenuPopover();
-  root.classList.add('is-menu-open');
   const popover = this.getMarkdownBlockMenuPopover();
-  popover?.classList.remove('hidden');
-  root.querySelector('[data-markdown-block-menu-toggle]')?.setAttribute('aria-expanded', 'true');
-  this.positionMarkdownBlockMenu();
-}
-
-/** @this {UiToolbarContext} */
-function closeMarkdownBlockMenu() {
-  const root = this.elements?.markdownToolbar;
-  if (!root) {
-    return;
+  if (popover && !popover.matches(':popover-open')) {
+    popover.showPopover();
   }
-
-  root.classList.remove('is-menu-open');
-  this.getMarkdownBlockMenuPopover()?.classList.add('hidden');
-  root.querySelector('[data-markdown-block-menu-toggle]')?.setAttribute('aria-expanded', 'false');
 }
 
 /** @this {UiToolbarContext} */
-function toggleMarkdownBlockMenu() {
-  if (this.isMarkdownBlockMenuOpen()) {
-    this.closeMarkdownBlockMenu();
-    return;
+function closeMarkdownBlockMenu() {
+  const popover = this.getMarkdownBlockMenuPopover();
+  if (popover?.matches(':popover-open')) {
+    popover.hidePopover();
   }
-
-  this.openMarkdownBlockMenu();
 }
 
 /** @this {UiToolbarContext} */
@@ -276,12 +199,6 @@ function handleMarkdownToolbarClick(event) {
     return;
   }
 
-  const blockMenuToggle = target.closest('[data-markdown-block-menu-toggle]');
-  if (blockMenuToggle) {
-    event.preventDefault();
-    this.toggleMarkdownBlockMenu();
-    return;
-  }
 
   const blockActionButton = target.closest('[data-markdown-block-action]');
   if (blockActionButton) {
@@ -309,7 +226,7 @@ function handleMarkdownToolbarKeydown(event) {
     const toggle = event.target instanceof Element
       ? event.target.closest('[data-markdown-block-menu-toggle]')
       : null;
-    if (toggle && ['ArrowDown', 'Enter', ' '].includes(event.key)) {
+    if (toggle && event.key === 'ArrowDown') {
       event.preventDefault();
       this.openMarkdownBlockMenu();
       this.getMarkdownBlockMenuPopover()?.querySelector('[data-markdown-block-action]')?.focus();
@@ -317,18 +234,7 @@ function handleMarkdownToolbarKeydown(event) {
     return;
   }
 
-  if (event.key === 'Escape') {
-    event.preventDefault();
-    this.closeMarkdownBlockMenu();
-    this.elements?.markdownToolbar?.querySelector('[data-markdown-block-menu-toggle]')?.focus();
-    return;
-  }
-
   const menuItems = Array.from(this.getMarkdownBlockMenuPopover()?.querySelectorAll('[data-markdown-block-action]') ?? []);
-  if (menuItems.length === 0) {
-    return;
-  }
-
   const currentIndex = menuItems.findIndex((item) => item === event.target);
   if (currentIndex < 0) {
     return;
@@ -343,21 +249,6 @@ function handleMarkdownToolbarKeydown(event) {
   }
 }
 
-/** @this {UiToolbarContext} */
-function handleMarkdownToolbarDocumentPointerDown(event) {
-  if (!this.isMarkdownBlockMenuOpen()) {
-    return;
-  }
-
-  if (
-    this.elements?.markdownToolbar?.contains(event.target)
-    || this.getMarkdownBlockMenuPopover()?.contains(event.target)
-  ) {
-    return;
-  }
-
-  this.closeMarkdownBlockMenu();
-}
 
 /** @this {UiToolbarContext} */
 function applyMarkdownToolbarAction(action) {
@@ -470,16 +361,12 @@ export const uiFeatureToolbarMethods = {
   getMarkdownBlockMenuPopover,
   handleEditorImageInsert,
   handleMarkdownToolbarClick,
-  handleMarkdownToolbarDocumentPointerDown,
   handleMarkdownToolbarKeydown,
   handleToolbarImageInsert,
   isMarkdownBlockMenuOpen,
   openMarkdownBlockMenu,
-  positionMarkdownBlockMenu,
-  renderMarkdownBlockMenuPopover,
   renderMarkdownToolbar,
   runEditorCommand,
   setActiveMarkdownBlockAction,
   syncMarkdownToolbarBlockUi,
-  toggleMarkdownBlockMenu,
 };

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

@@ -1,5 +1,13 @@
 export function bindAppShellElements(doc = document) {
   return {
+    agentConnectionContent: doc.getElementById('agentConnectionContent'),
+    agentConnectionDialog: doc.getElementById('agentConnectionDialog'),
+    connectAgentButton: doc.getElementById('connectAgentBtn'),
+    appShell: doc.getElementById('appShell'),
+    hostedGate: doc.getElementById('hostedGate'),
+    teamSettingsButton: doc.getElementById('teamSettingsBtn'),
+    teamSettingsContent: doc.getElementById('teamSettingsContent'),
+    teamSettingsDialog: doc.getElementById('teamSettingsDialog'),
     currentUserName: doc.getElementById('currentUserName'),
     chatContainer: doc.getElementById('chatContainer'),
     chatEmptyState: doc.getElementById('chatEmptyState'),
@@ -35,6 +43,7 @@ export function bindAppShellElements(doc = document) {
     displayNameInput: doc.getElementById('displayNameInput'),
     displayNameSubmit: doc.getElementById('displayNameSubmit'),
     displayNameTitle: doc.getElementById('displayNameTitle'),
+    fileActionDialog: doc.getElementById('fileActionDialog'),
     editNameButton: doc.getElementById('editNameBtn'),
     editorFindButton: doc.getElementById('editorFindBtn'),
     editorFormatButton: doc.getElementById('editorFormatBtn'),

package/src/client/application/highlight-theme.js

@@ -0,0 +1,16 @@
+import darkHighlightThemeUrl from '../assets/vendor/highlight/github-dark.min.css?url';
+import lightHighlightThemeUrl from '../assets/vendor/highlight/github.min.css?url';
+
+export function ensureHighlightThemeStylesheet() {
+  let themeStylesheet = document.getElementById('hljs-theme');
+  if (!(themeStylesheet instanceof HTMLLinkElement)) {
+    themeStylesheet = document.createElement('link');
+    themeStylesheet.id = 'hljs-theme';
+    themeStylesheet.rel = 'stylesheet';
+    document.head.append(themeStylesheet);
+  }
+
+  themeStylesheet.href = darkHighlightThemeUrl;
+  themeStylesheet.dataset.darkHref = darkHighlightThemeUrl;
+  themeStylesheet.dataset.lightHref = lightHighlightThemeUrl;
+}