collabmd 0.1.44 → 0.1.45

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,26 @@ 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.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 +83,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 +154,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 +261,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);
 
@@ -372,7 +389,7 @@ function handleDocumentPointerDown(event) {
     return;
   }
 
-  this.closeChatPanel();
+  this.closeChatPanel({ restoreFocus: false });
 }
 
 /** @this {UiShellContext} */
@@ -388,7 +405,7 @@ function handleDocumentKeydown(event) {
   }
 
   if (event.key === 'Escape' && this.chatIsOpen) {
-    this.closeChatPanel();
+    this.closeChatPanel({ restoreFocus: true });
     return;
   }
 
@@ -626,7 +643,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;
   }
 
@@ -731,6 +748,7 @@ function handleConnectionChange(state) {
     });
   }
   this.renderPresence();
+  this.renderChat({ messagesChanged: false });
 
   if (state.unreachable && !this.connectionHelpShown) {
     this.connectionHelpShown = true;

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/workspace-feature.js

@@ -10,44 +10,23 @@ import {
 } from '../../../domain/file-kind.js';
 
 export const workspaceFeature = {
-  isExcalidrawFile(filePath) {
-    return isExcalidrawFilePath(filePath);
-  },
-
-  isBaseFile(filePath) {
-    return isBaseFilePath(filePath);
-  },
-
-  isDrawioFile(filePath) {
-    return isDrawioFilePath(filePath);
-  },
-
-  isImageFile(filePath) {
-    return isImageAttachmentFilePath(filePath);
-  },
-
-  isMermaidFile(filePath) {
-    return isMermaidFilePath(filePath);
-  },
-
-  isPlantUmlFile(filePath) {
-    return isPlantUmlFilePath(filePath);
-  },
-
-  createDiagramPreviewDocument(language, source = '') {
-    return this.workspacePreviewController.createDiagramPreviewDocument(language, source);
-  },
+  isBaseFile: isBaseFilePath,
+  isDrawioFile: isDrawioFilePath,
+  isExcalidrawFile: isExcalidrawFilePath,
+  isImageFile: isImageAttachmentFilePath,
+  isMermaidFile: isMermaidFilePath,
+  isPlantUmlFile: isPlantUmlFilePath,
 
   getPreviewSource() {
     const previewDocument = this.getStaticPreviewDocument?.();
     const previewFilePath = previewDocument?.currentFilePath ?? previewDocument?.filePath ?? null;
     if (previewDocument && previewFilePath && previewFilePath === this.currentFilePath) {
       if (this.isMermaidFile(this.currentFilePath)) {
-        return this.createDiagramPreviewDocument('mermaid', previewDocument.content);
+        return this.workspacePreviewController.createDiagramPreviewDocument('mermaid', previewDocument.content);
       }
 
       if (this.isPlantUmlFile(this.currentFilePath)) {
-        return this.createDiagramPreviewDocument('plantuml', previewDocument.content);
+        return this.workspacePreviewController.createDiagramPreviewDocument('plantuml', previewDocument.content);
       }
 
       return String(previewDocument.content ?? '');
@@ -91,14 +70,6 @@ export const workspaceFeature = {
       .pop());
   },
 
-  resetPreviewMode() {
-    this.workspacePreviewController.resetPreviewMode();
-  },
-
-  syncFileChrome(filePath, options = {}) {
-    this.workspacePreviewController.syncFileChrome(filePath, options);
-  },
-
   handleLayoutViewRequest(view) {
     if (!this.currentFilePath || !this.isDrawioFile(this.currentFilePath)) {
       return true;
@@ -125,24 +96,22 @@ export const workspaceFeature = {
     return false;
   },
 
-  renderExcalidrawFilePreview(filePath) {
-    this.workspacePreviewController.renderExcalidrawFilePreview(filePath);
-  },
-
-  renderDrawioFilePreview(filePath) {
-    this.workspacePreviewController.renderDrawioFilePreview(filePath);
+  renderBaseFilePreview(filePath, options) {
+    clearTimeout(this._basePreviewRenderTimer);
+    this._basePreviewRenderTimer = null;
+    return this.workspacePreviewController.renderBaseFilePreview(filePath, options);
   },
 
-  renderImageFilePreview(filePath) {
-    this.workspacePreviewController.renderImageFilePreview(filePath);
-  },
-
-  renderBaseFilePreview(filePath) {
-    return this.workspacePreviewController.renderBaseFilePreview(filePath);
-  },
-
-  renderTextFilePreview(payload) {
-    this.workspacePreviewController.renderTextFilePreview(payload);
+  scheduleBaseFilePreview(filePath, options) {
+    const loadToken = this.sessionLoadToken;
+    clearTimeout(this._basePreviewRenderTimer);
+    this._basePreviewRenderTimer = setTimeout(() => {
+      this._basePreviewRenderTimer = null;
+      if (filePath !== this.currentFilePath || loadToken !== this.sessionLoadToken) {
+        return;
+      }
+      void this.renderBaseFilePreview(filePath, options);
+    }, 180);
   },
 
   createResizeHandler() {
@@ -187,10 +156,6 @@ export const workspaceFeature = {
     });
   },
 
-  async handleHashChange() {
-    await this.workspaceRouteController.handleHashChange();
-  },
-
   showEmptyState() {
     clearTimeout(this._previewLayoutSyncTimer);
     this._previewLayoutSyncTimer = null;
@@ -207,30 +172,4 @@ export const workspaceFeature = {
     this.workspaceRouteController.showDiffState();
   },
 
-  async openFile(filePath) {
-    await this.workspaceRouteController.openFile(filePath);
-  },
-
-  cleanupSession() {
-    this.workspaceRouteController.cleanupSession();
-  },
-
-  handleWikiLinkClick(target) {
-    this.wikiLinkFileController.handleWikiLinkClick(target);
-  },
-
-  normalizeNewWikiFilePath(target) {
-    return this.wikiLinkFileController.normalizeNewWikiFilePath(target);
-  },
-
-  async createAndOpenFile(filePath, displayName) {
-    await this.wikiLinkFileController.createAndOpenFile(filePath, displayName);
-  },
-
-  handleFileSelection(filePath, { closeSidebarOnMobile = false, revealInTree = false } = {}) {
-    this.workspaceRouteController.handleFileSelection(filePath, {
-      closeSidebarOnMobile,
-      revealInTree,
-    });
-  },
 };

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

@@ -6,10 +6,13 @@ export function bindAppShellElements(doc = document) {
     chatForm: doc.getElementById('chatForm'),
     chatInput: doc.getElementById('chatInput'),
     chatMessages: doc.getElementById('chatMessages'),
-    chatNotificationButton: doc.getElementById('chatNotificationBtn'),
     chatPanel: doc.getElementById('chatPanel'),
+    chatCloseButton: doc.getElementById('chatCloseBtn'),
     chatStatus: doc.getElementById('chatStatus'),
     chatToastContainer: doc.getElementById('chatToastContainer'),
+    chatNotificationButton: doc.getElementById('chatNotificationBtn'),
+    chatNotificationMuteButton: doc.getElementById('chatNotificationMuteBtn'),
+    chatNotificationStatus: doc.getElementById('chatNotificationStatus'),
     chatToggleBadge: doc.getElementById('chatToggleBadge'),
     chatToggleButton: doc.getElementById('chatToggleBtn'),
     gitCommitCancel: doc.getElementById('gitCommitCancel'),
@@ -57,6 +60,7 @@ export function bindAppShellElements(doc = document) {
     presencePanelList: doc.getElementById('presencePanelList'),
     presencePanelStatus: doc.getElementById('presencePanelStatus'),
     searchFilesButton: doc.getElementById('searchFilesBtn'),
+    toolbarSearchButton: doc.getElementById('toolbarSearchBtn'),
     shareButton: doc.getElementById('shareBtn'),
     toastContainer: doc.getElementById('toastContainer'),
     toggleWrapButton: doc.getElementById('toggleWrapBtn'),
@@ -68,6 +72,7 @@ export function bindAppShellElements(doc = document) {
     sidebarClose: doc.getElementById('sidebarClose'),
     sidebarBackdrop: doc.getElementById('sidebarBackdrop'),
     sidebar: doc.getElementById('sidebar'),
+    sidebarResizer: doc.getElementById('sidebarResizer'),
     emptyState: doc.getElementById('emptyState'),
     emptyStateNewFileBtn: doc.getElementById('emptyStateNewFileBtn'),
     emptyStateSearchBtn: doc.getElementById('emptyStateSearchBtn'),
@@ -90,6 +95,7 @@ export function bindAppShellElements(doc = document) {
     toolbarDiffBadge: doc.getElementById('toolbarDiffBadge'),
     toolbarOverflowMenu: doc.getElementById('toolbarOverflowMenu'),
     toolbarOverflowToggle: doc.getElementById('toolbarOverflowToggle'),
+    toolbarViewToggle: doc.getElementById('toolbarViewToggle'),
     sidebarTabs: doc.getElementById('sidebarTabs'),
   };
 }