collabmd 0.1.33 → 0.1.35

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

@@ -43,6 +43,7 @@ function openComposerForSelection(origin = 'editor', sourceRect = null) {
     : this.session?.getCommentAnchorClientRect?.(anchor));
   this.activeCard = {
     anchor,
+    composerDraft: null,
     mode: 'create',
     origin: nextOrigin,
     replyThreadId: null,
@@ -57,8 +58,10 @@ function openThreadGroup(group, { anchor, origin, sourceRect }) {
   this.activeCard = {
     anchor,
     groupKey: group.key,
+    groupThreadIds: group.threads.map((thread) => thread.id),
     mode: 'group',
     origin,
+    replyDrafts: {},
     replyThreadId: null,
     sourceRect,
   };
@@ -97,9 +100,59 @@ function updateCardSourceRect() {
   return this.activeCard.sourceRect;
 }
 
+/** @this {any} */
+function createTextareaDraft(textarea) {
+  if (!(textarea instanceof HTMLTextAreaElement)) {
+    return null;
+  }
+
+  return {
+    selectionDirection: textarea.selectionDirection ?? 'none',
+    selectionEnd: textarea.selectionEnd,
+    selectionStart: textarea.selectionStart,
+    value: textarea.value,
+  };
+}
+
+/** @this {any} */
+function captureActiveCardDraft() {
+  if (!this.activeCard) {
+    return;
+  }
+
+  const textarea = this.cardRoot?.querySelector('.comment-card-input');
+  const draft = createTextareaDraft(textarea);
+  if (!draft) {
+    return;
+  }
+
+  if (this.activeCard.mode === 'create') {
+    this.activeCard.composerDraft = draft;
+    return;
+  }
+
+  if (this.activeCard.mode === 'group' && this.activeCard.replyThreadId) {
+    this.activeCard.replyDrafts = {
+      ...(this.activeCard.replyDrafts ?? {}),
+      [this.activeCard.replyThreadId]: draft,
+    };
+  }
+}
+
+/** @this {any} */
+function createPendingFocusTarget(element, draft = null) {
+  return {
+    element,
+    selectionDirection: draft?.selectionDirection ?? 'none',
+    selectionEnd: Number.isInteger(draft?.selectionEnd) ? draft.selectionEnd : null,
+    selectionStart: Number.isInteger(draft?.selectionStart) ? draft.selectionStart : null,
+  };
+}
+
 /** @this {any} */
 function renderCard() {
   const root = this.ensureCardRoot();
+  this.captureActiveCardDraft();
   root.replaceChildren();
   root.classList.toggle('hidden', !this.activeCard);
   if (!this.activeCard) {
@@ -245,6 +298,7 @@ function createComposer() {
   textarea.rows = 4;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
   textarea.placeholder = 'Add context, feedback, or a question...';
+  textarea.value = this.activeCard?.composerDraft?.value ?? '';
 
   const actions = document.createElement('div');
   actions.className = 'ui-record-actions comment-card-actions';
@@ -277,7 +331,7 @@ function createComposer() {
     this.closeCard();
   });
 
-  this.pendingCardFocusElement = textarea;
+  this.pendingCardFocusElement = createPendingFocusTarget(textarea, this.activeCard?.composerDraft);
   return form;
 }
 
@@ -329,6 +383,9 @@ function createThreadElement(thread) {
   reply.setAttribute('aria-label', isReplying ? 'Cancel reply' : 'Reply to thread');
   reply.title = isReplying ? 'Cancel reply' : 'Reply to thread';
   reply.addEventListener('click', () => {
+    if (isReplying && this.activeCard?.replyDrafts?.[thread.id]) {
+      delete this.activeCard.replyDrafts[thread.id];
+    }
     this.activeCard = {
       ...this.activeCard,
       replyThreadId: isReplying ? null : thread.id,
@@ -517,12 +574,14 @@ function createReactionPickerButton(thread, message, emoji) {
 function createReplyComposer(thread) {
   const form = document.createElement('form');
   form.className = 'comment-reply-form';
+  const draft = this.activeCard?.replyDrafts?.[thread.id] ?? null;
 
   const textarea = document.createElement('textarea');
   textarea.className = inputClassNames({ extra: 'comment-card-input' });
   textarea.rows = 3;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
   textarea.placeholder = 'Reply to thread...';
+  textarea.value = draft?.value ?? '';
 
   const actions = document.createElement('div');
   actions.className = 'ui-record-actions comment-card-actions';
@@ -532,6 +591,9 @@ function createReplyComposer(thread) {
   cancel.className = buttonClassNames({ variant: 'secondary' });
   cancel.textContent = 'Cancel';
   cancel.addEventListener('click', () => {
+    if (this.activeCard?.replyDrafts?.[thread.id]) {
+      delete this.activeCard.replyDrafts[thread.id];
+    }
     this.activeCard = {
       ...this.activeCard,
       replyThreadId: null,
@@ -546,7 +608,7 @@ function createReplyComposer(thread) {
 
   actions.append(cancel, submit);
   form.append(textarea, actions);
-  this.pendingCardFocusElement = textarea;
+  this.pendingCardFocusElement = createPendingFocusTarget(textarea, draft);
 
   form.addEventListener('submit', async (event) => {
     event.preventDefault();
@@ -556,6 +618,9 @@ function createReplyComposer(thread) {
       return;
     }
 
+    if (this.activeCard?.replyDrafts?.[thread.id]) {
+      delete this.activeCard.replyDrafts[thread.id];
+    }
     this.activeCard = {
       ...this.activeCard,
       replyThreadId: null,
@@ -597,7 +662,8 @@ function positionCard(card) {
 
 /** @this {any} */
 function flushPendingCardFocus() {
-  const element = this.pendingCardFocusElement;
+  const pendingTarget = this.pendingCardFocusElement;
+  const element = pendingTarget instanceof HTMLElement ? pendingTarget : pendingTarget?.element;
   if (!(element instanceof HTMLElement) || !element.isConnected) {
     this.pendingCardFocusElement = null;
     return;
@@ -615,6 +681,17 @@ function flushPendingCardFocus() {
     }
 
     element.focus({ preventScroll: true });
+    if (
+      element instanceof HTMLTextAreaElement
+      && Number.isInteger(pendingTarget?.selectionStart)
+      && Number.isInteger(pendingTarget?.selectionEnd)
+    ) {
+      element.setSelectionRange(
+        pendingTarget.selectionStart,
+        pendingTarget.selectionEnd,
+        pendingTarget.selectionDirection ?? 'none',
+      );
+    }
   };
 
   focusElement();
@@ -633,14 +710,17 @@ function flushPendingCardFocus() {
 }
 
 export const commentUiCardMethods = {
+  captureActiveCardDraft,
   closeCard,
   createComposer,
+  createPendingFocusTarget,
   createMessageElement,
   createQuickReactionButton,
   createReactionBar,
   createReactionPicker,
   createReactionPickerButton,
   createReplyComposer,
+  createTextareaDraft,
   createThreadElement,
   ensureCardRoot,
   flushPendingCardFocus,

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

@@ -165,11 +165,34 @@ function handleEditorContentChange() {
 /** @this {CommentUiStateContext} */
 function setThreads(threads = []) {
   this.threads = sortThreads(threads);
+  const groups = this.getThreadGroups();
   if (
     this.activeCard?.mode === 'group'
-    && !this.getThreadGroups().some((group) => group.key === this.activeCard.groupKey)
   ) {
-    this.activeCard = null;
+    const activeThreadIds = Array.isArray(this.activeCard.groupThreadIds)
+      ? this.activeCard.groupThreadIds
+      : [];
+    const matchingGroup = groups.find((group) => group.key === this.activeCard.groupKey)
+      ?? groups.find((group) => (
+        group.threads.length === activeThreadIds.length
+        && group.threads.every((thread) => activeThreadIds.includes(thread.id))
+      ));
+    if (!matchingGroup) {
+      this.activeCard = null;
+    } else {
+      this.activeCard = {
+        ...this.activeCard,
+        anchor: matchingGroup.anchor,
+        groupKey: matchingGroup.key,
+        groupThreadIds: matchingGroup.threads.map((thread) => thread.id),
+      };
+      if (
+        this.activeCard.replyThreadId
+        && !matchingGroup.threads.some((thread) => thread.id === this.activeCard.replyThreadId)
+      ) {
+        this.activeCard.replyThreadId = null;
+      }
+    }
   }
   if (
     this.reactionPicker

package/src/client/presentation/drawio-embed-controller.js

@@ -98,6 +98,7 @@ export class DrawioEmbedController {
     getTheme,
     onOpenFile = null,
     onOpenTextFile = null,
+    onToggleQuickSwitcher = null,
     previewContainer,
     previewElement,
     toastController,
@@ -106,6 +107,7 @@ export class DrawioEmbedController {
     this.getTheme = getTheme;
     this.onOpenFile = onOpenFile;
     this.onOpenTextFile = onOpenTextFile;
+    this.onToggleQuickSwitcher = onToggleQuickSwitcher;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
     this.toastController = toastController;
@@ -585,7 +587,15 @@ export class DrawioEmbedController {
     return null;
   }
 
+  _isMessageFromEntry(event, entry) {
+    return Boolean(entry?.iframe?.contentWindow && event.source === entry.iframe.contentWindow);
+  }
+
   _onMessage(event) {
+    if (event.origin !== window.location.origin) {
+      return;
+    }
+
     const payload = event.data;
     if (!payload || payload.source !== 'drawio-editor') {
       return;
@@ -595,6 +605,9 @@ export class DrawioEmbedController {
     if (!entry) {
       return;
     }
+    if (!this._isMessageFromEntry(event, entry)) {
+      return;
+    }
 
     if (payload.type === 'fallback-text') {
       if (entry.mode === 'view') {
@@ -616,6 +629,11 @@ export class DrawioEmbedController {
 
     if (payload.type === 'request-open-file') {
       this.onOpenFile?.(entry.filePath);
+      return;
+    }
+
+    if (payload.type === 'request-toggle-quick-switcher') {
+      this.onToggleQuickSwitcher?.();
     }
   }
 

package/src/client/presentation/excalidraw-embed-controller.js

@@ -55,6 +55,7 @@ export class ExcalidrawEmbedController {
     getTheme,
     getLocalUser,
     onOpenFile = null,
+    onToggleQuickSwitcher = null,
     previewContainer,
     previewElement,
     toastController,
@@ -62,6 +63,7 @@ export class ExcalidrawEmbedController {
     this.getTheme = getTheme;
     this.getLocalUser = getLocalUser;
     this.onOpenFile = onOpenFile;
+    this.onToggleQuickSwitcher = onToggleQuickSwitcher;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
     this.toastController = toastController;
@@ -153,6 +155,7 @@ export class ExcalidrawEmbedController {
     this.hydrationIdleId = null;
     this.hydrationQueue = [];
     this.hydrationInProgress = false;
+    this._exitMaximizedEmbed();
     if (this.overlayRoot) {
       this.overlayRoot.hidden = true;
     }
@@ -762,7 +765,9 @@ export class ExcalidrawEmbedController {
         enterMaximize();
       }
     });
-    openBtn.addEventListener('click', () => {
+    openBtn.addEventListener('click', (event) => {
+      event.preventDefault();
+      this._exitMaximizedEmbed();
       this.onOpenFile?.(entry.filePath);
     });
 
@@ -1194,6 +1199,11 @@ export class ExcalidrawEmbedController {
       return;
     }
 
+    if (msg.type === 'request-toggle-quick-switcher') {
+      this.onToggleQuickSwitcher?.();
+      return;
+    }
+
     if (msg.type === 'error') {
       if (entry.isParked) {
         return;

package/src/client/presentation/file-history-view-controller.js

@@ -516,9 +516,15 @@ export class FileHistoryViewController {
         additions: Number(selectedEntry.additions || 0),
         deletions: Number(selectedEntry.deletions || 0),
       } : null);
+    const hasSelection = Boolean(selectedEntry);
+
+    this.syncToolbarIndicators(selectedEntry, selectedSummary, hasSelection);
+    this.syncToolbarButtonStates(hasSelection);
+  }
+
+  syncToolbarIndicators(selectedEntry, selectedSummary, hasSelection) {
     const additions = Number(selectedSummary?.additions || 0);
     const deletions = Number(selectedSummary?.deletions || 0);
-    const hasSelection = Boolean(selectedEntry);
 
     if (this.fileIndicator) {
       this.fileIndicator.textContent = selectedEntry?.type === 'commit'
@@ -535,7 +541,9 @@ export class FileHistoryViewController {
       `;
       this.stats.classList.toggle('hidden', !hasSelection);
     }
+  }
 
+  syncToolbarButtonStates(hasSelection) {
     this.backToHistoryButton?.classList.add('hidden');
     this.gitActionsGroup?.classList.add('hidden');
     this.layoutToggle?.classList.add('hidden');

package/src/client/presentation/git-panel-controller.js

@@ -149,115 +149,125 @@ export class GitPanelController {
     };
   }
 
-  initialize() {
-    this.panel?.addEventListener('click', (event) => {
-      const modeButton = event.target instanceof Element
-        ? event.target.closest('[data-git-panel-mode]')
-        : null;
-      if (modeButton) {
-        const nextMode = modeButton.getAttribute('data-git-panel-mode');
-        if (nextMode === 'changes' || nextMode === 'history') {
-          void this.setMode(nextMode);
-        }
-        return;
+  _handlePanelModeClick(event) {
+    const modeButton = event.target instanceof Element
+      ? event.target.closest('[data-git-panel-mode]')
+      : null;
+    if (modeButton) {
+      const nextMode = modeButton.getAttribute('data-git-panel-mode');
+      if (nextMode === 'changes' || nextMode === 'history') {
+        void this.setMode(nextMode);
       }
+      return true;
+    }
+    return false;
+  }
 
-      const toggleButton = event.target instanceof Element
-        ? event.target.closest('[data-git-section-toggle]')
-        : null;
-      if (toggleButton) {
-        const sectionKey = toggleButton.getAttribute('data-git-section-toggle');
-        this.toggleSection(sectionKey);
-        return;
-      }
+  _handleSectionToggleClick(event) {
+    const toggleButton = event.target instanceof Element
+      ? event.target.closest('[data-git-section-toggle]')
+      : null;
+    if (toggleButton) {
+      this.toggleSection(toggleButton.getAttribute('data-git-section-toggle'));
+      return true;
+    }
+    return false;
+  }
 
-      const historyButton = event.target instanceof Element
-        ? event.target.closest('[data-git-commit-hash]')
-        : null;
-      if (historyButton && !event.target.closest('[data-git-history-load-more]')) {
-        const hash = historyButton.getAttribute('data-git-commit-hash');
-        if (!hash) {
-          return;
-        }
+  _handleCommitHistoryClick(event) {
+    const historyButton = event.target instanceof Element
+      ? event.target.closest('[data-git-commit-hash]')
+      : null;
+    if (historyButton && !event.target.closest('[data-git-history-load-more]')) {
+      const hash = historyButton.getAttribute('data-git-commit-hash');
+      if (hash) {
         this.onSelectCommit(hash, { path: this.selection.commitHash === hash ? this.selection.path : null });
-        return;
       }
+      return true;
+    }
+    return false;
+  }
 
-      const loadMoreButton = event.target instanceof Element
-        ? event.target.closest('[data-git-history-load-more]')
-        : null;
-      if (loadMoreButton) {
-        void this.loadMoreHistory();
-        return;
+  _handleFileSelectionClick(event) {
+    const fileButton = event.target instanceof Element
+      ? event.target.closest('[data-git-path]')
+      : null;
+    if (fileButton && !event.target.closest('[data-git-file-action]')) {
+      const filePath = fileButton.getAttribute('data-git-path');
+      if (filePath) {
+        this.onSelectDiff(filePath, { scope: fileButton.getAttribute('data-git-scope') || 'working-tree' });
       }
+      return true;
+    }
+    return false;
+  }
 
-      const fileButton = event.target instanceof Element
-        ? event.target.closest('[data-git-path]')
-        : null;
-      if (fileButton && !event.target.closest('[data-git-file-action]')) {
-        const filePath = fileButton.getAttribute('data-git-path');
-        const scope = fileButton.getAttribute('data-git-scope') || 'working-tree';
-        if (!filePath) {
-          return;
-        }
-        this.onSelectDiff(filePath, { scope });
-        return;
+  _handleFileActionClick(event) {
+    const actionButton = event.target instanceof Element
+      ? event.target.closest('[data-git-file-action]')
+      : null;
+    if (actionButton) {
+      const action = actionButton.getAttribute('data-git-file-action');
+      const filePath = actionButton.getAttribute('data-git-path');
+      if (action && filePath) {
+        event.preventDefault();
+        event.stopPropagation();
+        void this.handleFileAction(action, filePath, actionButton.getAttribute('data-git-scope') || 'working-tree');
       }
+      return true;
+    }
+    return false;
+  }
 
-      const pullBackupButton = event.target instanceof Element
-        ? event.target.closest('[data-git-pull-backup-path]')
-        : null;
-      if (pullBackupButton) {
-        const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
-        if (!summaryPath) {
-          return;
-        }
+  _handlePanelClick(event) {
+    if (this._handlePanelModeClick(event)) return;
+    if (this._handleSectionToggleClick(event)) return;
+    if (this._handleCommitHistoryClick(event)) return;
+
+    if (event.target instanceof Element && event.target.closest('[data-git-history-load-more]')) {
+      void this.loadMoreHistory();
+      return;
+    }
+
+    if (this._handleFileSelectionClick(event)) return;
+
+    const pullBackupButton = event.target instanceof Element
+      ? event.target.closest('[data-git-pull-backup-path]')
+      : null;
+    if (pullBackupButton) {
+      const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
+      if (summaryPath) {
         this.onOpenPullBackup(summaryPath);
-        return;
       }
+      return;
+    }
 
-      const actionButton = event.target instanceof Element
-        ? event.target.closest('[data-git-file-action]')
-        : null;
-      if (actionButton) {
-        const action = actionButton.getAttribute('data-git-file-action');
-        const filePath = actionButton.getAttribute('data-git-path');
-        const scope = actionButton.getAttribute('data-git-scope') || 'working-tree';
-        if (!action || !filePath) {
-          return;
-        }
+    if (this._handleFileActionClick(event)) return;
 
-        event.preventDefault();
-        event.stopPropagation();
-        void this.handleFileAction(action, filePath, scope);
-        return;
-      }
+    if (event.target instanceof Element && event.target.closest('[data-git-view-all]')) {
+      this.onViewAllDiff();
+      return;
+    }
 
-      const viewAllButton = event.target instanceof Element
-        ? event.target.closest('[data-git-view-all]')
-        : null;
-      if (viewAllButton) {
-        this.onViewAllDiff();
-        return;
-      }
+    if (event.target instanceof Element && event.target.closest('[data-git-commit-staged]')) {
+      void this.handleCommitStaged();
+      return;
+    }
 
-      const commitStagedButton = event.target instanceof Element
-        ? event.target.closest('[data-git-commit-staged]')
-        : null;
-      if (commitStagedButton) {
-        void this.handleCommitStaged();
-        return;
+    const syncButton = event.target instanceof Element
+      ? event.target.closest('[data-git-sync-action]')
+      : null;
+    if (syncButton) {
+      const action = syncButton.getAttribute('data-git-sync-action');
+      if (action === 'pull' || action === 'push') {
+        void this.handleSyncAction(action);
       }
+    }
+  }
 
-      const syncButton = event.target instanceof Element
-        ? event.target.closest('[data-git-sync-action]')
-        : null;
-      if (syncButton) {
-        const action = syncButton.getAttribute('data-git-sync-action');
-        if (action === 'pull' || action === 'push') {
-          void this.handleSyncAction(action);
-        }
-      }
+  initialize() {
+    this.panel?.addEventListener('click', (event) => {
+      this._handlePanelClick(event);
     });
 
     this.searchInput?.addEventListener('input', (event) => {
@@ -720,6 +730,7 @@ export class GitPanelController {
       && this.selection.scope === file.scope;
     const dirPath = getPathDir(file.path);
     const displayName = getPathLeaf(file.path);
+    const fullPath = String(file.path || '');
     const statusClass = badgeClass(file.status);
     const stageAction = file.scope === 'staged'
       ? { label: 'Unstage', value: 'unstage' }
@@ -736,6 +747,7 @@ export class GitPanelController {
           type="button"
           data-git-path="${escapeHtml(file.path)}"
           data-git-scope="${escapeHtml(file.scope)}"
+          title="${escapeHtml(fullPath)}"
         >
           ${fileIconSvg()}
           <span class="ui-item-copy git-file-copy">