collabmd 0.1.18 → 0.1.19

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

@@ -2,12 +2,15 @@ import {
   COMMENT_BODY_MAX_LENGTH,
   normalizeCommentQuoteForComparison,
 } from '../../domain/comment-threads.js';
+import { renderCommentMarkdownToHtml } from './comment-markdown-renderer.js';
 
 const COMMENT_CARD_OFFSET = 14;
-const COMMENT_CARD_WIDTH = 360;
+const COMMENT_CARD_WIDTH = 520;
 const COMMENT_SELECTION_REVEAL_DELAY_MS = 150;
 const COMMENT_SELECTION_CHIP_GAP = 12;
 const COMMENT_CONTROL_SLOT_HEIGHT = 36;
+const COMMENT_REACTION_PRESET_EMOJIS = Object.freeze(['👍', '❤️', '🎉', '👀', '🚀']);
+const COMMENT_REACTION_MORE_EMOJIS = Object.freeze(['😂', '🔥', '✅', '🙏', '💡', '🤔', '👏', '😄', '🎯', '🙌']);
 
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
@@ -81,6 +84,61 @@ function parseLineNumber(value) {
   return Number.isFinite(parsed) ? parsed : null;
 }
 
+function getLatestMessage(messages = []) {
+  return messages.reduce((latest, message) => {
+    if (!latest) {
+      return message;
+    }
+
+    return (message?.createdAt ?? 0) >= (latest?.createdAt ?? 0)
+      ? message
+      : latest;
+  }, null);
+}
+
+function getLatestGroupMessage(group) {
+  return group?.threads?.reduce((latest, thread) => {
+    const next = getLatestMessage(thread?.messages ?? []);
+    if (!next) {
+      return latest;
+    }
+
+    return (next.createdAt ?? 0) >= (latest?.createdAt ?? 0)
+      ? next
+      : latest;
+  }, null);
+}
+
+function createRenderedCommentBody(body, className = 'comment-markdown') {
+  const container = document.createElement('div');
+  container.className = className;
+  container.innerHTML = renderCommentMarkdownToHtml(body);
+  return container;
+}
+
+function hasLocalReaction(reaction, localUserId) {
+  return Boolean(localUserId && reaction?.users?.some((user) => user?.userId === localUserId));
+}
+
+function formatReactionCount(reaction) {
+  return String(Array.isArray(reaction?.users) ? reaction.users.length : 0);
+}
+
+function isReactionPickerOpen(reactionPicker, threadId, messageId) {
+  return reactionPicker?.threadId === threadId && reactionPicker?.messageId === messageId;
+}
+
+function getReactionPickerBounds(card) {
+  const picker = card?.querySelector?.('.comment-reaction-picker');
+  const wrap = picker?.closest?.('.comment-reaction-picker-wrap');
+  const scroll = card?.querySelector?.('.comment-card-scroll');
+  if (!(picker instanceof HTMLElement) || !(wrap instanceof HTMLElement) || !(scroll instanceof HTMLElement)) {
+    return null;
+  }
+
+  return { picker, scroll, wrap };
+}
+
 function overlapsAnchorRange(element, anchor) {
   const startLine = parseLineNumber(element?.getAttribute?.('data-source-line'));
   const endLine = parseLineNumber(element?.getAttribute?.('data-source-line-end')) ?? startLine;
@@ -224,6 +282,7 @@ export class CommentUiController {
     onCreateThread,
     onNavigateToLine,
     onReplyToThread,
+    onToggleReaction,
     onResolveThread,
     previewContainer,
     previewElement,
@@ -237,6 +296,7 @@ export class CommentUiController {
     this.onCreateThread = onCreateThread;
     this.onNavigateToLine = onNavigateToLine;
     this.onReplyToThread = onReplyToThread;
+    this.onToggleReaction = onToggleReaction;
     this.onResolveThread = onResolveThread;
     this.previewContainer = previewContainer;
     this.previewElement = previewElement;
@@ -258,6 +318,7 @@ export class CommentUiController {
     this.previewHighlightLayer = null;
     this.cardRoot = null;
     this.pendingCardFocusElement = null;
+    this.reactionPicker = null;
     this.layoutFrame = 0;
     this.timeFormatter = new Intl.DateTimeFormat(undefined, {
       day: 'numeric',
@@ -268,6 +329,9 @@ export class CommentUiController {
     this.handleEditorScroll = () => this.scheduleLayoutRefresh();
     this.handlePreviewScroll = () => this.scheduleLayoutRefresh();
     this.handleWindowResize = () => this.scheduleLayoutRefresh();
+    this.handleCommentSelectionButtonPointerDown = (event) => {
+      event.preventDefault();
+    };
     this.handleEditorPointerDown = (event) => {
       if (event.button !== 0 || !this.supported || !this.session) {
         return;
@@ -329,6 +393,11 @@ export class CommentUiController {
       this.closeCard();
     };
     this.handleDocumentKeyDown = (event) => {
+      if (event.key === 'Escape' && this.reactionPicker) {
+        this.reactionPicker = null;
+        this.renderCard();
+        return;
+      }
       if (event.key === 'Escape' && this.activeCard) {
         this.closeCard();
       }
@@ -340,6 +409,7 @@ export class CommentUiController {
       }
     };
 
+    this.commentSelectionButton?.addEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
     this.commentSelectionButton?.addEventListener('click', () => {
       this.openComposerForSelection('toolbar');
     });
@@ -364,6 +434,7 @@ export class CommentUiController {
     }
     this.attachSession(null);
     this.previewContainer?.removeEventListener('scroll', this.handlePreviewScroll);
+    this.commentSelectionButton?.removeEventListener('pointerdown', this.handleCommentSelectionButtonPointerDown);
     this.editorContainer?.removeEventListener('pointerdown', this.handleEditorPointerDown);
     this.editorContainer?.removeEventListener('focusout', this.handleEditorFocusOut);
     window.removeEventListener('resize', this.handleWindowResize);
@@ -383,6 +454,7 @@ export class CommentUiController {
     this.selectionAnchor = session?.getCurrentSelectionCommentAnchor?.() ?? null;
     this.pendingSelectionAnchor = null;
     this.committedSelectionAnchor = null;
+    this.reactionPicker = null;
     this.clearSelectionRevealTimer();
     this.pointerSelecting = false;
     session?.getScrollContainer?.()?.addEventListener('scroll', this.handleEditorScroll, { passive: true });
@@ -403,6 +475,7 @@ export class CommentUiController {
       this.clearSelectionRevealTimer();
       this.pointerSelecting = false;
       this.activeCard = null;
+      this.reactionPicker = null;
     }
     if (!this.supported) {
       this.drawerOpen = false;
@@ -413,6 +486,7 @@ export class CommentUiController {
       this.committedSelectionAnchor = null;
       this.clearSelectionRevealTimer();
       this.pointerSelecting = false;
+      this.reactionPicker = null;
     }
     this.render();
   }
@@ -483,6 +557,15 @@ export class CommentUiController {
     ) {
       this.activeCard = null;
     }
+    if (
+      this.reactionPicker
+      && !this.threads.some((thread) => (
+        thread.id === this.reactionPicker.threadId
+        && thread.messages?.some((message) => message.id === this.reactionPicker.messageId)
+      ))
+    ) {
+      this.reactionPicker = null;
+    }
     this.render();
   }
 
@@ -578,11 +661,26 @@ export class CommentUiController {
       quote.className = 'comments-drawer-item-quote';
       quote.textContent = group.anchor.quote || group.anchor.excerpt || 'Source anchored comment';
 
+      const latestMessage = getLatestGroupMessage(group);
+      const preview = createRenderedCommentBody(
+        latestMessage?.body || '',
+        'comment-markdown comments-drawer-item-preview',
+      );
+
       const footer = document.createElement('div');
       footer.className = 'comments-drawer-item-footer';
-      footer.textContent = `${group.threads.length} thread${group.threads.length === 1 ? '' : 's'}`;
+      const countLabel = document.createElement('span');
+      countLabel.textContent = `${group.threads.length} thread${group.threads.length === 1 ? '' : 's'}`;
 
-      button.append(header, quote, footer);
+      const updatedLabel = document.createElement('span');
+      updatedLabel.className = 'comments-drawer-item-updated';
+      updatedLabel.textContent = latestMessage
+        ? `${latestMessage.userName} • ${this.formatTimestamp(latestMessage.createdAt)}`
+        : '';
+
+      footer.append(countLabel, updatedLabel);
+
+      button.append(header, quote, preview, footer);
       fragment.appendChild(button);
     });
 
@@ -811,6 +909,7 @@ export class CommentUiController {
     }
 
     this.selectionAnchor = anchor;
+    this.reactionPicker = null;
     const nextOrigin = origin === 'editor' && sourceRect ? 'editor-chip' : origin;
     const nextSourceRect = sourceRect ?? (origin === 'toolbar'
       ? this.commentSelectionButton?.getBoundingClientRect?.()
@@ -826,6 +925,7 @@ export class CommentUiController {
   }
 
   openThreadGroup(group, { anchor, origin, sourceRect }) {
+    this.reactionPicker = null;
     this.activeCard = {
       anchor,
       groupKey: group.key,
@@ -841,6 +941,7 @@ export class CommentUiController {
   closeCard() {
     this.activeCard = null;
     this.pendingCardFocusElement = null;
+    this.reactionPicker = null;
     this.renderCard();
     this.scheduleLayoutRefresh();
   }
@@ -902,6 +1003,21 @@ export class CommentUiController {
 
     const card = document.createElement('section');
     card.className = 'comment-card';
+    card.addEventListener('click', (event) => {
+      if (
+        !this.reactionPicker
+        || event.target?.closest?.('.comment-reaction-picker-wrap')
+      ) {
+        return;
+      }
+
+      this.reactionPicker = null;
+      requestAnimationFrame(() => {
+        if (this.activeCard) {
+          this.renderCard();
+        }
+      });
+    });
 
     const header = document.createElement('div');
     header.className = 'comment-card-header';
@@ -929,15 +1045,18 @@ export class CommentUiController {
     header.append(titleWrap, closeButton);
     card.appendChild(header);
 
+    const content = document.createElement('div');
+    content.className = 'comment-card-scroll';
+
     if (this.activeCard.anchor?.quote) {
       const quote = document.createElement('p');
       quote.className = 'comment-card-quote';
       quote.textContent = this.activeCard.anchor.quote;
-      card.appendChild(quote);
+      content.appendChild(quote);
     }
 
     if (this.activeCard.mode === 'create') {
-      card.appendChild(this.createComposer());
+      content.appendChild(this.createComposer());
     } else {
       const group = this.getThreadGroups().find((entry) => entry.key === this.activeCard.groupKey);
       if (!group) {
@@ -946,16 +1065,46 @@ export class CommentUiController {
       }
 
       group.threads.forEach((thread) => {
-        card.appendChild(this.createThreadElement(thread));
+        content.appendChild(this.createThreadElement(thread));
       });
     }
 
+    root.style.visibility = 'hidden';
+    card.appendChild(content);
     root.appendChild(card);
+    this.updateReactionPickerPosition(card);
+    this.positionCard(card);
+    root.style.visibility = '';
     this.flushPendingCardFocus();
-    root.style.visibility = 'hidden';
     this.scheduleLayoutRefresh();
   }
 
+  updateReactionPickerPosition(card) {
+    const bounds = getReactionPickerBounds(card);
+    if (!bounds) {
+      return;
+    }
+
+    const { picker, scroll, wrap } = bounds;
+    picker.classList.remove('is-upward');
+    picker.style.maxHeight = '';
+
+    const wrapRect = wrap.getBoundingClientRect();
+    const scrollRect = scroll.getBoundingClientRect();
+    const pickerRect = picker.getBoundingClientRect();
+    const safeViewportTop = 12;
+    const safeViewportBottom = window.innerHeight - 12;
+    const lowerBoundary = Math.min(scrollRect.bottom, safeViewportBottom);
+    const upperBoundary = Math.max(scrollRect.top, safeViewportTop);
+    const availableBelow = Math.max(lowerBoundary - wrapRect.bottom - 8, 0);
+    const availableAbove = Math.max(wrapRect.top - upperBoundary - 8, 0);
+    const shouldOpenUpward = pickerRect.height > availableBelow && availableAbove > availableBelow;
+    const maxHeight = Math.max((shouldOpenUpward ? availableAbove : availableBelow), 120);
+
+    picker.classList.toggle('is-upward', shouldOpenUpward);
+    picker.style.maxHeight = `${maxHeight}px`;
+  }
+
   repositionActiveCard() {
     const card = this.cardRoot?.firstElementChild;
     if (!card || !this.activeCard) {
@@ -1022,6 +1171,9 @@ export class CommentUiController {
     const header = document.createElement('div');
     header.className = 'comment-thread-card-header';
 
+    const heading = document.createElement('div');
+    heading.className = 'comment-thread-card-heading';
+
     const author = document.createElement('span');
     author.className = 'comment-thread-card-author';
     author.textContent = thread.createdByName;
@@ -1065,12 +1217,13 @@ export class CommentUiController {
     });
 
     actions.append(jump, reply, resolve);
-    header.append(author, time, actions);
+    heading.append(author, time);
+    header.append(heading, actions);
 
     article.append(header);
 
     thread.messages.forEach((message) => {
-      article.appendChild(this.createMessageElement(message));
+      article.appendChild(this.createMessageElement(thread, message));
     });
 
     if (this.activeCard?.replyThreadId === thread.id) {
@@ -1080,7 +1233,7 @@ export class CommentUiController {
     return article;
   }
 
-  createMessageElement(message) {
+  createMessageElement(thread, message) {
     const container = document.createElement('div');
     container.className = 'comment-message-card';
 
@@ -1095,15 +1248,133 @@ export class CommentUiController {
     time.className = 'comment-message-card-time';
     time.textContent = this.formatTimestamp(message.createdAt);
 
-    const body = document.createElement('p');
-    body.className = 'comment-message-card-body';
-    body.textContent = message.body;
+    const renderedBody = createRenderedCommentBody(
+      message.body,
+      'comment-message-card-body comment-markdown',
+    );
 
     meta.append(author, time);
-    container.append(meta, body);
+    container.append(meta, renderedBody);
+    container.appendChild(this.createReactionBar(thread, message));
     return container;
   }
 
+  createReactionBar(thread, message) {
+    const localUserId = this.session?.getLocalUser?.()?.userId ?? '';
+    const wrap = document.createElement('div');
+    wrap.className = 'comment-reaction-bar';
+
+    const existingReactionEmojis = new Set((message.reactions ?? []).map((reaction) => reaction.emoji));
+
+    const chips = document.createElement('div');
+    chips.className = 'comment-reaction-chips';
+
+    (message.reactions ?? []).forEach((reaction) => {
+      const chip = document.createElement('button');
+      chip.type = 'button';
+      chip.className = 'comment-reaction-chip';
+      chip.classList.toggle('is-active', hasLocalReaction(reaction, localUserId));
+      chip.setAttribute('aria-pressed', String(hasLocalReaction(reaction, localUserId)));
+      chip.title = reaction.users?.map((user) => user.userName).join(', ') || reaction.emoji;
+
+      const emoji = document.createElement('span');
+      emoji.className = 'comment-reaction-chip-emoji';
+      emoji.textContent = reaction.emoji;
+
+      const count = document.createElement('span');
+      count.className = 'comment-reaction-chip-count';
+      count.textContent = formatReactionCount(reaction);
+
+      chip.append(emoji, count);
+      chip.addEventListener('click', async () => {
+        await this.onToggleReaction?.(thread.id, message.id, reaction.emoji);
+      });
+      chips.appendChild(chip);
+    });
+
+    const actions = document.createElement('div');
+    actions.className = 'comment-reaction-actions';
+
+    COMMENT_REACTION_PRESET_EMOJIS
+      .filter((emoji) => !existingReactionEmojis.has(emoji))
+      .forEach((emoji) => {
+        actions.appendChild(this.createQuickReactionButton(thread, message, emoji));
+      });
+
+    const pickerWrap = document.createElement('div');
+    pickerWrap.className = 'comment-reaction-picker-wrap';
+
+    const moreButton = document.createElement('button');
+    moreButton.type = 'button';
+    moreButton.className = 'comment-reaction-more-trigger';
+    moreButton.dataset.reactionPickerToggle = 'true';
+    moreButton.setAttribute('aria-expanded', String(
+      isReactionPickerOpen(this.reactionPicker, thread.id, message.id),
+    ));
+    moreButton.textContent = 'More';
+    moreButton.addEventListener('click', () => {
+      const isOpen = isReactionPickerOpen(this.reactionPicker, thread.id, message.id);
+      this.reactionPicker = isOpen
+        ? null
+        : {
+          messageId: message.id,
+          threadId: thread.id,
+        };
+      this.renderCard();
+    });
+
+    pickerWrap.appendChild(moreButton);
+
+    if (isReactionPickerOpen(this.reactionPicker, thread.id, message.id)) {
+      pickerWrap.appendChild(this.createReactionPicker(thread, message));
+    }
+
+    actions.appendChild(pickerWrap);
+    wrap.append(chips, actions);
+    return wrap;
+  }
+
+  createQuickReactionButton(thread, message, emoji) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'comment-reaction-quick-add';
+    button.textContent = emoji;
+    button.title = `React with ${emoji}`;
+    button.addEventListener('click', async () => {
+      await this.onToggleReaction?.(thread.id, message.id, emoji);
+    });
+    return button;
+  }
+
+  createReactionPicker(thread, message) {
+    const picker = document.createElement('div');
+    picker.className = 'comment-reaction-picker';
+    const moreGrid = document.createElement('div');
+    moreGrid.className = 'comment-reaction-picker-grid';
+    COMMENT_REACTION_MORE_EMOJIS.forEach((emoji) => {
+      moreGrid.appendChild(this.createReactionPickerButton(thread, message, emoji));
+    });
+    picker.appendChild(moreGrid);
+
+    return picker;
+  }
+
+  createReactionPickerButton(thread, message, emoji) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'comment-reaction-picker-btn';
+    button.textContent = emoji;
+    button.title = `React with ${emoji}`;
+    button.addEventListener('click', async () => {
+      const didToggle = await this.onToggleReaction?.(thread.id, message.id, emoji);
+      if (didToggle) {
+        this.reactionPicker = null;
+        this.renderCard();
+      }
+    });
+    return button;
+  }
+
   createReplyComposer(thread) {
     const form = document.createElement('form');
     form.className = 'comment-reply-form';
@@ -1204,7 +1475,32 @@ export class CommentUiController {
     }
 
     this.pendingCardFocusElement = null;
-    element.focus({ preventScroll: true });
+    const focusElement = () => {
+      if (!element.isConnected) {
+        return;
+      }
+
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && this.editorContainer?.contains(activeElement)) {
+        activeElement.blur();
+      }
+
+      element.focus({ preventScroll: true });
+    };
+
+    focusElement();
+    if (document.activeElement === element) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      focusElement();
+      if (document.activeElement !== element) {
+        setTimeout(() => {
+          focusElement();
+        }, 50);
+      }
+    });
   }
 
   clearSelectionRevealTimer() {

package/src/client/presentation/file-explorer-controller.js

@@ -1,3 +1,4 @@
+import { isImageAttachmentFilePath } from '../../domain/file-kind.js';
 import { vaultApiClient } from '../domain/vault-api-client.js';
 import { FileActionController } from './file-action-controller.js';
 import { FileTreeState } from './file-tree-state.js';
@@ -69,6 +70,10 @@ export class FileExplorerController {
     return this.state.flatFiles;
   }
 
+  get flatDocumentFiles() {
+    return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
+  }
+
   renderTree() {
     this.view.render({
       activeFilePath: this.state.activeFilePath,

package/src/client/presentation/file-explorer-view.js

@@ -161,12 +161,16 @@ export class FileExplorerView {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';
     const isExcalidraw = fileType === 'excalidraw';
+    const isImage = fileType === 'image';
     const isMermaid = fileType === 'mermaid';
     const isPlantUml = fileType === 'plantuml';
 
     if (isExcalidraw) {
       button.classList.add('is-excalidraw');
     }
+    if (isImage) {
+      button.classList.add('is-image');
+    }
     if (isMermaid) {
       button.classList.add('is-mermaid');
     }
@@ -181,7 +185,7 @@ export class FileExplorerView {
     button.dataset.depth = depth;
     button.dataset.path = filePath;
     button.innerHTML = `
-      ${this.getFileIconSvg({ isExcalidraw, isMermaid, isPlantUml })}
+      ${this.getFileIconSvg({ isExcalidraw, isImage, isMermaid, isPlantUml })}
       <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
     `;
 
@@ -196,11 +200,15 @@ export class FileExplorerView {
     return button;
   }
 
-  getFileIconSvg({ isExcalidraw, isMermaid, isPlantUml }) {
+  getFileIconSvg({ isExcalidraw, isImage, isMermaid, isPlantUml }) {
     if (isExcalidraw) {
       return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>';
     }
 
+    if (isImage) {
+      return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m21 16-5-5L7 20"/><path d="m14 14 2 2"/></svg>';
+    }
+
     if (isMermaid) {
       return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7.5c0-1.38 1.12-2.5 2.5-2.5 1.04 0 1.93.64 2.3 1.56A2.5 2.5 0 0 1 14 8.5v1"/><path d="M19 16.5c0 1.38-1.12 2.5-2.5 2.5-1.04 0-1.93-.64-2.3-1.56A2.5 2.5 0 0 1 10 15.5v-1"/><path d="M8 10.5h8"/><path d="M8 13.5h8"/><path d="M10 8.5v7"/><path d="M14 8.5v7"/></svg>';
     }

package/src/client/presentation/file-tree-state.js

@@ -2,7 +2,13 @@ import { normalizeVaultPathInput } from '../domain/vault-paths.js';
 
 function flattenTree(nodes, files = []) {
   for (const node of nodes) {
-    if (node.type === 'file' || node.type === 'excalidraw' || node.type === 'mermaid' || node.type === 'plantuml') {
+    if (
+      node.type === 'file'
+      || node.type === 'excalidraw'
+      || node.type === 'mermaid'
+      || node.type === 'plantuml'
+      || node.type === 'image'
+    ) {
       files.push(node.path);
       continue;
     }