collabmd 0.1.21 → 0.1.25

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

@@ -0,0 +1,419 @@
+import { supportsBacklinksForFilePath } from '../../../domain/file-kind.js';
+
+const VERSION_RELOAD_TOAST_DURATION_MS = 0;
+
+/**
+ * @typedef {object} UiShellContext
+ * @property {boolean} chatIsOpen
+ * @property {boolean} gitRepoAvailable
+ * @property {boolean} isTabActive
+ * @property {string | null} currentFilePath
+ * @property {number} lobbyChatMessageMaxLength
+ * @property {any} runtimeConfig
+ * @property {any} navigation
+ * @property {any} session
+ * @property {any} commentUi
+ * @property {any} elements
+ * @property {any} fileExplorer
+ * @property {any} gitPanel
+ * @property {any} gitDiffView
+ * @property {any} fileHistoryView
+ * @property {any} outlineController
+ * @property {any} layoutController
+ * @property {any} scrollSyncController
+ * @property {any} themeController
+ * @property {any} previewRenderer
+ * @property {any} tabActivityLock
+ * @property {any} toastController
+ * @property {any} versionMonitor
+ */
+
+/** @this {UiShellContext} */
+function initialize() {
+  this.renderMarkdownToolbar?.();
+  this.themeController.initialize();
+  this.previewRenderer.applyTheme(this.themeController.getTheme());
+  this.previewRenderer.scheduleWorkerPrewarm();
+  this.scheduleEditorSessionPrewarm?.();
+  this.outlineController.initialize();
+  this.layoutController.initialize();
+  this.scrollSyncController.initialize();
+  this.fileExplorer.initialize();
+  this.gitPanel.initialize();
+  this.gitDiffView.initialize();
+  this.fileHistoryView.initialize();
+  this.initializePreviewLayoutObserver();
+  this.syncIdentityManagementUi();
+  this.syncCurrentUserName();
+  this.syncWrapToggle();
+  this.syncChatNotificationButton();
+  this.syncFileHistoryButton({ mode: 'empty' });
+  this.renderChat();
+  void this.gitPanel.refresh({ force: true });
+  this.elements.chatInput?.setAttribute('maxlength', String(this.lobbyChatMessageMaxLength));
+  this.bindEvents();
+  this.restoreSidebarState();
+  this.initializeVersionMonitoring();
+  this.tabActivityLock.initialize();
+  this.tabActivityLock.tryActivate();
+
+  window.addEventListener('hashchange', () => this.handleHashChange());
+  window.addEventListener('resize', this.createResizeHandler());
+
+  this.fileExplorerReadyPromise = this.fileExplorer.refresh().then(() => {
+    this.fileExplorerReady = true;
+    if (this.isTabActive) {
+      return this.handleHashChange();
+    }
+    return undefined;
+  });
+}
+
+/** @this {UiShellContext} */
+function initializeVersionMonitoring() {
+  this.versionMonitor?.start();
+}
+
+/** @this {UiShellContext} */
+function promptForVersionReload(payload = null) {
+  if (this._reloadPromptShown) {
+    return;
+  }
+
+  this._reloadPromptShown = true;
+  const packageVersion = String(payload?.build?.packageVersion ?? this.runtimeConfig?.build?.packageVersion ?? '').trim();
+  const message = packageVersion
+    ? `Version ${packageVersion} is available. Reload to update.`
+    : 'A new version is available. Reload to update.';
+
+  this.toastController.show(message, {
+    actionLabel: 'Reload',
+    dismissible: true,
+    duration: VERSION_RELOAD_TOAST_DURATION_MS,
+    onAction: () => window.location.reload(),
+  });
+}
+
+/** @this {UiShellContext} */
+function bindEvents() {
+  this.elements.emptyStateNewFileBtn?.addEventListener('click', () => {
+    this.fileExplorer.actionController.handleNewFile();
+  });
+
+  this.elements.emptyStateSearchBtn?.addEventListener('click', () => {
+    void this.toggleQuickSwitcher();
+  });
+
+  this.elements.chatToggleButton?.addEventListener('click', () => {
+    this.toggleChatPanel();
+    this.closeToolbarOverflowMenu?.();
+  });
+
+  this.elements.chatForm?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    this.handleChatSubmit();
+  });
+
+  this.elements.chatNotificationButton?.addEventListener('click', () => {
+    void this.handleChatNotificationToggle();
+  });
+
+  this.elements.shareButton?.addEventListener('click', () => {
+    void this.copyCurrentLink();
+    this.closeToolbarOverflowMenu?.();
+  });
+
+  this.elements.fileHistoryButton?.addEventListener('click', () => {
+    const route = this.navigation.getHashRoute();
+    if (route.type === 'git-file-preview') {
+      this.handleGitFileHistorySelection(route.currentFilePath ?? route.filePath, { closeSidebarOnMobile: true });
+      this.closeToolbarOverflowMenu?.();
+      return;
+    }
+
+    this.handleGitFileHistorySelection(this.currentFilePath, { closeSidebarOnMobile: true });
+    this.closeToolbarOverflowMenu?.();
+  });
+
+  this.elements.editNameButton?.addEventListener('click', () => {
+    this.openDisplayNameDialog();
+    this.closeToolbarOverflowMenu?.();
+  });
+
+  this.elements.displayNameCancel?.addEventListener('click', () => {
+    this.elements.displayNameDialog?.close();
+  });
+
+  this.elements.gitCommitCancel?.addEventListener('click', () => {
+    this.elements.gitCommitDialog?.close();
+  });
+
+  this.elements.gitResetCancel?.addEventListener('click', () => {
+    this.elements.gitResetDialog?.close();
+  });
+
+  this.elements.gitResetSubmit?.addEventListener('click', () => {
+    void this.handleGitResetSubmit();
+  });
+
+  this.elements.gitCommitDialog?.addEventListener('close', () => {
+    if (this.elements.gitCommitInput) {
+      this.elements.gitCommitInput.value = '';
+    }
+    if (this.elements.gitCommitSubmit) {
+      this.elements.gitCommitSubmit.textContent = 'Commit staged changes';
+    }
+  });
+
+  this.elements.gitResetDialog?.addEventListener('close', () => {
+    this.pendingGitResetPath = null;
+    if (this.elements.gitResetFileName) {
+      this.elements.gitResetFileName.value = '';
+    }
+    if (this.elements.gitResetSubmit) {
+      this.elements.gitResetSubmit.textContent = 'Reset File';
+    }
+  });
+
+  this.elements.markdownToolbar?.addEventListener('click', (event) => {
+    this.handleMarkdownToolbarClick?.(event);
+  });
+
+  this.elements.markdownToolbar?.addEventListener('keydown', (event) => {
+    this.handleMarkdownToolbarKeydown?.(event);
+  });
+
+  this.elements.displayNameForm?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    this.handleDisplayNameSubmit();
+  });
+
+  this.elements.gitCommitForm?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    void this.handleGitCommitSubmit();
+  });
+
+  this.elements.tabLockTakeoverButton?.addEventListener('click', () => {
+    this.handleTabTakeover();
+  });
+
+  this.elements.toggleWrapButton?.addEventListener('click', () => {
+    this.toggleLineWrapping();
+  });
+
+  this.elements.toolbarOverflowToggle?.addEventListener('click', (event) => {
+    event.preventDefault();
+    this.toggleToolbarOverflowMenu();
+  });
+
+  this.elements.toolbarOverflowMenu?.addEventListener('click', (event) => {
+    if (event.target instanceof Element && event.target.closest('button')) {
+      this.closeToolbarOverflowMenu();
+    }
+  });
+
+  this.elements.previewContent?.addEventListener('click', (event) => {
+    const wikiLink = event.target.closest('a.wiki-link[data-wiki-target]');
+    if (!wikiLink) {
+      return;
+    }
+
+    event.preventDefault();
+    this.handleWikiLinkClick(wikiLink.dataset.wikiTarget);
+  });
+
+  this.elements.sidebarToggle?.addEventListener('click', () => {
+    this.closeToolbarOverflowMenu();
+    this.toggleSidebar();
+  });
+
+  this.elements.sidebarClose?.addEventListener('click', () => {
+    this.closeSidebarOnMobile();
+  });
+
+  this.elements.filesSidebarTab?.addEventListener('click', () => {
+    this.setSidebarTab('files');
+  });
+
+  this.elements.gitSidebarTab?.addEventListener('click', () => {
+    if (!this.gitRepoAvailable) {
+      return;
+    }
+    this.setSidebarTab('git');
+  });
+
+  document.addEventListener('pointerdown', (event) => {
+    this.handleMarkdownToolbarDocumentPointerDown?.(event);
+
+    if (
+      this.toolbarOverflowOpen
+      && !this.elements.toolbarOverflowMenu?.contains(event.target)
+      && !this.elements.toolbarOverflowToggle?.contains(event.target)
+    ) {
+      this.closeToolbarOverflowMenu();
+    }
+
+    if (!this.chatIsOpen) {
+      return;
+    }
+
+    if (this.elements.chatContainer?.contains(event.target)) {
+      return;
+    }
+
+    this.closeChatPanel();
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && this.toolbarOverflowOpen) {
+      this.closeToolbarOverflowMenu();
+      return;
+    }
+
+    if (event.key === 'Escape' && this.chatIsOpen) {
+      this.closeChatPanel();
+      return;
+    }
+
+    if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+      event.preventDefault();
+      void this.toggleQuickSwitcher();
+    }
+  });
+}
+
+/** @this {UiShellContext} */
+function setToolbarOverflowOpen(nextState) {
+  this.toolbarOverflowOpen = Boolean(nextState) && this.isMobileViewport?.();
+  this.elements.toolbarOverflowToggle?.setAttribute('aria-expanded', String(this.toolbarOverflowOpen));
+  this.elements.toolbarOverflowToggle?.classList.toggle('active', this.toolbarOverflowOpen);
+  this.elements.toolbarOverflowToggle?.closest('.toolbar-right')?.classList.toggle('is-overflow-open', this.toolbarOverflowOpen);
+}
+
+/** @this {UiShellContext} */
+function closeToolbarOverflowMenu() {
+  this.setToolbarOverflowOpen(false);
+}
+
+/** @this {UiShellContext} */
+function toggleToolbarOverflowMenu() {
+  this.setToolbarOverflowOpen(!this.toolbarOverflowOpen);
+}
+
+/** @this {UiShellContext} */
+function handleThemeChange(theme) {
+  this.previewRenderer.applyTheme(theme);
+  if (!this.isExcalidrawFile(this.currentFilePath) && !this.isImageFile?.(this.currentFilePath)) {
+    this.previewRenderer.queueRender();
+  }
+  this.session?.applyTheme(theme);
+  this.excalidrawEmbed.updateTheme(theme);
+}
+
+/** @this {UiShellContext} */
+function handleConnectionChange(state) {
+  this.connectionState = state;
+  if (state?.firstConnection) {
+    this.recordFileOpenMetric?.('ws_connected', {
+      status: state.status,
+    });
+  }
+  this.renderPresence();
+
+  if (state.unreachable && !this.connectionHelpShown) {
+    this.connectionHelpShown = true;
+    this.toastController.show(`Cannot reach server at ${state.wsBaseUrl}`, 6000);
+  }
+}
+
+/** @this {UiShellContext} */
+function toggleLineWrapping() {
+  const currentState = this.session?.isLineWrappingEnabled() ?? this.getStoredLineWrapping();
+  const nextState = !currentState;
+
+  this.session?.setLineWrapping(nextState);
+  this.preferences.setLineWrappingEnabled(nextState);
+  this.syncWrapToggle(nextState);
+  this.session?.requestMeasure();
+  this.scrollSyncController.syncPreviewToEditor();
+}
+
+/** @this {UiShellContext} */
+function getStoredLineWrapping() {
+  return this.preferences.getLineWrappingEnabled();
+}
+
+/** @this {UiShellContext} */
+function syncWrapToggle(state) {
+  const enabled = state ?? this.session?.isLineWrappingEnabled() ?? this.getStoredLineWrapping();
+  const label = this.elements.wrapToggleLabel;
+  const button = this.elements.toggleWrapButton;
+  const nextLabel = enabled ? 'Wrap on' : 'Wrap off';
+  if (label) label.textContent = nextLabel;
+  if (button) {
+    button.setAttribute('aria-label', `${nextLabel}. ${enabled ? 'Disable line wrap' : 'Enable line wrap'}`);
+  }
+}
+
+/** @this {UiShellContext} */
+function scheduleBacklinkRefresh() {
+  clearTimeout(this._backlinkRefreshTimer);
+  this._backlinkRefreshTimer = setTimeout(() => {
+    if (supportsBacklinksForFilePath(this.currentFilePath)) {
+      this.backlinksPanel.load(this.currentFilePath);
+    }
+  }, 2000);
+}
+
+/** @this {UiShellContext} */
+function showEditorLoading() {
+  if (!this.elements.editorContainer) return;
+  this.elements.editorContainer.classList.add('is-loading-editor');
+  this.elements.editorContainer.innerHTML = `
+      <div class="editor-loading" id="editorLoading">
+        <div class="loading-spinner"></div>
+        <span class="loading-text">Loading file...</span>
+      </div>`;
+}
+
+/** @this {UiShellContext} */
+function hideEditorLoading() {
+  if (!this.elements.editorContainer) return;
+  this.elements.editorContainer.classList.remove('is-loading-editor');
+  this.elements.editorContainer.querySelector('#editorLoading')?.remove();
+}
+
+/** @this {UiShellContext} */
+function showEditorLoadError() {
+  if (!this.elements.editorContainer) return;
+  this.elements.editorContainer.classList.remove('is-loading-editor');
+  this.elements.editorContainer.innerHTML = `
+      <div class="editor-loading" id="editorLoading">
+        <span class="loading-text">Failed to load file</span>
+      </div>`;
+}
+
+/** @this {UiShellContext} */
+function clearInitialFileBootstrap() {
+  document.documentElement.removeAttribute('data-initial-file-requested');
+}
+
+export const uiFeatureShellMethods = {
+  bindEvents,
+  clearInitialFileBootstrap,
+  closeToolbarOverflowMenu,
+  getStoredLineWrapping,
+  handleConnectionChange,
+  handleThemeChange,
+  hideEditorLoading,
+  initialize,
+  initializeVersionMonitoring,
+  setToolbarOverflowOpen,
+  promptForVersionReload,
+  scheduleBacklinkRefresh,
+  showEditorLoadError,
+  showEditorLoading,
+  syncWrapToggle,
+  toggleToolbarOverflowMenu,
+  toggleLineWrapping,
+};

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

@@ -0,0 +1,98 @@
+/**
+ * @typedef {object} UiSidebarContext
+ * @property {string} activeSidebarTab
+ * @property {{ sidebar?: HTMLElement | null, filesSidebarTab?: HTMLElement | null, gitSidebarTab?: HTMLElement | null, fileSearch?: HTMLElement | null, gitSearch?: HTMLElement | null }} elements
+ * @property {{ setSidebarVisible(showSidebar: boolean): void, getSidebarVisible(): string | null | undefined }} preferences
+ * @property {{ setActive(active: boolean): void }} gitPanel
+ * @property {boolean} gitRepoAvailable
+ * @property {() => boolean} isMobileViewport
+ * @property {() => void} toggleSidebar
+ * @property {(showSidebar: boolean) => void} applySidebarVisibility
+ * @property {(showSidebar: boolean) => void} setSidebarVisibility
+ */
+
+/** @this {UiSidebarContext} */
+function isMobileViewport() {
+  return this.mobileBreakpointQuery.matches;
+}
+
+/** @this {UiSidebarContext} */
+function closeSidebarOnMobile() {
+  const sidebar = this.elements.sidebar;
+  if (!sidebar || !this.isMobileViewport()) return;
+  if (sidebar.classList.contains('collapsed')) return;
+
+  this.setSidebarVisibility(false);
+}
+
+/** @this {UiSidebarContext} */
+function toggleSidebar() {
+  const sidebar = this.elements.sidebar;
+  if (!sidebar) return;
+  const isHidden = sidebar.classList.contains('collapsed');
+  this.setSidebarVisibility(isHidden);
+}
+
+/** @this {UiSidebarContext} */
+function restoreSidebarState() {
+  const sidebar = this.elements.sidebar;
+  if (!sidebar) return;
+
+  const isMobile = this.isMobileViewport();
+  const stored = this.preferences.getSidebarVisible();
+  let showSidebar = true;
+  if (stored === 'true') {
+    showSidebar = true;
+  } else if (stored === 'false') {
+    showSidebar = false;
+  } else if (isMobile) {
+    showSidebar = false;
+  }
+
+  this.applySidebarVisibility(showSidebar);
+}
+
+/** @this {UiSidebarContext} */
+function setSidebarVisibility(showSidebar) {
+  this.applySidebarVisibility(showSidebar);
+  this.preferences.setSidebarVisible(showSidebar);
+}
+
+/** @this {UiSidebarContext} */
+function applySidebarVisibility(showSidebar) {
+  const sidebar = this.elements.sidebar;
+  if (!sidebar) return;
+
+  const isCollapsed = !showSidebar;
+  const hideForMobile = isCollapsed && this.isMobileViewport();
+
+  sidebar.classList.toggle('collapsed', isCollapsed);
+  sidebar.toggleAttribute('hidden', hideForMobile);
+  sidebar.setAttribute('aria-hidden', hideForMobile ? 'true' : 'false');
+  sidebar.inert = isCollapsed;
+}
+
+/** @this {UiSidebarContext} */
+function setSidebarTab(tab) {
+  const nextTab = tab === 'git' && this.gitRepoAvailable ? 'git' : 'files';
+  this.activeSidebarTab = nextTab;
+
+  this.elements.filesSidebarTab?.classList.toggle('active', nextTab === 'files');
+  this.elements.gitSidebarTab?.classList.toggle('active', nextTab === 'git');
+  document.getElementById('fileTree')?.classList.toggle('hidden', nextTab !== 'files');
+  this.elements.fileSearch?.classList.toggle('hidden', nextTab !== 'files');
+  this.elements.gitSearch?.classList.toggle('hidden', nextTab !== 'git');
+  document.getElementById('gitPanel')?.classList.toggle('active', nextTab === 'git');
+  document.getElementById('gitPanel')?.classList.toggle('hidden', nextTab !== 'git');
+  this.gitPanel.setActive(nextTab === 'git');
+}
+
+export const uiFeatureSidebarMethods = {
+  applySidebarVisibility,
+  closeSidebarOnMobile,
+  isMobileViewport,
+  restoreSidebarState,
+  setSidebarTab,
+  setSidebarVisibility,
+  toggleSidebar,
+};

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

@@ -0,0 +1,128 @@
+/**
+ * @typedef {object} UiTabActivityContext
+ * @property {boolean} isTabActive
+ * @property {string | null} currentFilePath
+ * @property {Set<string>} chatMessageIds
+ * @property {boolean} chatInitialSyncComplete
+ * @property {number} chatUnreadCount
+ * @property {Array<unknown>} chatMessages
+ * @property {Array<unknown>} globalUsers
+ * @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 {{ 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 {{ prepareFileDisconnect(filePath: string): Promise<void> }} excalidrawEmbed
+ * @property {() => void} handleHashChange
+ * @property {() => boolean} isExcalidrawFile
+ * @property {() => void} promptForDisplayNameIfNeeded
+ * @property {() => void} renderChat
+ * @property {() => void} showEmptyState
+ * @property {({ reason }: { reason?: string }) => void} showTabLockOverlay
+ * @property {() => void} hideTabLockOverlay
+ */
+
+/** @this {UiTabActivityContext} */
+function handleTabTakeover() {
+  this.tabActivityLock.tryActivate({ takeover: true });
+}
+
+/** @this {UiTabActivityContext} */
+function handleTabActivated({ takeover = false } = {}) {
+  const wasInactive = !this.isTabActive;
+  this.isTabActive = true;
+  this.hideTabLockOverlay();
+
+  if (!this.lobby.provider) {
+    this.lobby.connect();
+  }
+  if (!this.workspaceSync.provider) {
+    this.workspaceSync.connect();
+  }
+
+  if (wasInactive) {
+    if (this.fileExplorerReady) {
+      void this.handleHashChange();
+    }
+    this.promptForDisplayNameIfNeeded();
+  }
+
+  if (takeover) {
+    this.toastController.show('This tab is now active');
+  }
+}
+
+/** @this {UiTabActivityContext} */
+async function handleTabBlocked({ reason } = {}) {
+  const wasActive = this.isTabActive;
+  const blockedFilePath = this.currentFilePath;
+  const shouldPrepareExcalidrawDisconnect = Boolean(
+    blockedFilePath
+    && this.isExcalidrawFile?.(blockedFilePath),
+  );
+
+  this.isTabActive = false;
+  if (this.elements.displayNameDialog?.open) {
+    this.elements.displayNameDialog.close();
+  }
+  this.lobby.disconnect();
+  this.workspaceSync.disconnect();
+  this.globalUsers = [];
+  this.chatMessages = [];
+  this.chatMessageIds.clear();
+  this.chatUnreadCount = 0;
+  this.chatInitialSyncComplete = false;
+  this.followedUserClientId = null;
+  this.followedCursorSignature = '';
+  this.connectionState = { status: 'disconnected', unreachable: false };
+  this.showTabLockOverlay({ reason });
+
+  if (shouldPrepareExcalidrawDisconnect) {
+    await this.excalidrawEmbed.prepareFileDisconnect(blockedFilePath);
+  }
+
+  this.showEmptyState();
+  this.renderChat();
+
+  if (wasActive && reason === 'taken-over') {
+    this.toastController.show('Another tab took over this session');
+  }
+}
+
+/** @this {UiTabActivityContext} */
+function showTabLockOverlay({ reason } = {}) {
+  const overlay = this.elements.tabLockOverlay;
+  const title = this.elements.tabLockTitle;
+  const copy = this.elements.tabLockCopy;
+  if (!overlay) return;
+
+  if (title) {
+    title.textContent = reason === 'taken-over'
+      ? 'This tab is no longer active'
+      : 'This vault is active in another tab';
+  }
+
+  if (copy) {
+    copy.textContent = reason === 'taken-over'
+      ? 'Another tab took over the live session. This tab is now disconnected until you explicitly take over here again.'
+      : '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');
+}
+
+/** @this {UiTabActivityContext} */
+function hideTabLockOverlay() {
+  this.elements.tabLockOverlay?.classList.add('hidden');
+}
+
+export const uiFeatureTabActivityMethods = {
+  handleTabActivated,
+  handleTabBlocked,
+  handleTabTakeover,
+  hideTabLockOverlay,
+  showTabLockOverlay,
+};