collabmd 0.1.44 → 0.1.45

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

@@ -1,4 +1,8 @@
-import { createRenderedCommentBody, formatAnchorLabel, getLatestGroupMessage } from './comment-ui-shared.js';
+import {
+  createCommentOverviewThread,
+  formatAnchorLabel,
+  getLatestGroupMessage,
+} from './comment-ui-shared.js';
 
 /**
  * @typedef {object} CommentUiRenderContext
@@ -61,18 +65,38 @@ function renderDrawer() {
   }
 
   this.commentsDrawer.classList.toggle('hidden', !this.supported || !this.drawerOpen);
+  if (!this.supported || !this.drawerOpen) {
+    return;
+  }
+
   this.commentsDrawerList.replaceChildren();
   const groups = this.getThreadGroups();
   this.commentsDrawerEmpty?.classList.toggle('hidden', groups.length > 0);
-  if (!this.supported || groups.length === 0) {
+  if (groups.length === 0) {
     return;
   }
 
   const fragment = document.createDocumentFragment();
   groups.forEach((group) => {
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = 'ui-record-surface comments-drawer-item';
+    const latestMessage = getLatestGroupMessage(group);
+    const messageCount = group.threads.reduce(
+      (count, thread) => count + (Array.isArray(thread.messages) ? thread.messages.length : 0),
+      0,
+    );
+    const button = createCommentOverviewThread({
+      authorName: latestMessage?.userName || group.threads[0]?.createdByName || 'Anonymous',
+      buttonClassName: 'comment-overview-thread comments-drawer-item',
+      footerClassName: 'comment-overview-thread-footer comments-drawer-item-footer',
+      headerClassName: 'comment-overview-thread-header comments-drawer-item-header',
+      lineClassName: 'comment-overview-thread-line comments-drawer-item-title',
+      lineLabel: formatAnchorLabel(group.anchor),
+      messageCount,
+      previewBody: latestMessage?.body || '',
+      previewClassName: 'comment-markdown comment-overview-thread-preview comments-drawer-item-preview',
+      quote: group.anchor?.quote || group.anchor?.excerpt || 'Source anchored comment',
+      quoteClassName: 'comment-overview-thread-quote comments-drawer-item-quote',
+      timestamp: latestMessage ? this.formatTimestamp(latestMessage.createdAt) : '',
+    });
     button.classList.toggle('is-active', this.activeCard?.groupKey === group.key);
     button.addEventListener('pointerdown', (event) => {
       event.preventDefault();
@@ -81,48 +105,11 @@ function renderDrawer() {
       this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
       this.openThreadGroup(group, {
         anchor: group.anchor,
-        origin: 'drawer',
-        sourceRect: button.getBoundingClientRect(),
+        origin: 'editor',
+        sourceRect: this.session?.getCommentAnchorClientRect?.(group.anchor)
+          ?? button.getBoundingClientRect(),
       });
     });
-
-    const header = document.createElement('div');
-    header.className = 'ui-record-header comments-drawer-item-header';
-
-    const title = document.createElement('span');
-    title.className = 'comments-drawer-item-title';
-    title.textContent = formatAnchorLabel(group.anchor);
-
-    const count = document.createElement('span');
-    count.className = 'ui-pill-badge ui-pill-badge--count ui-pill-badge--accent comments-drawer-item-count';
-    count.textContent = String(group.threads.length);
-
-    header.append(title, count);
-
-    const quote = document.createElement('p');
-    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 = 'ui-record-meta comments-drawer-item-footer';
-    const countLabel = document.createElement('span');
-    countLabel.textContent = `${group.threads.length} thread${group.threads.length === 1 ? '' : 's'}`;
-
-    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);
   });
 

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

@@ -13,10 +13,6 @@ export const COMMENT_CARD_WIDTH = 520;
 export const COMMENT_SELECTION_REVEAL_DELAY_MS = 150;
 export const COMMENT_SELECTION_CHIP_GAP = 12;
 export const COMMENT_CONTROL_SLOT_HEIGHT = 36;
-export const COMMENT_PREVIEW_BADGE_MIN_WIDTH = 28;
-export const COMMENT_PREVIEW_RAIL_SLOT_HEIGHT = 30;
-export const COMMENT_PREVIEW_RAIL_MIN_WIDTH = 400;
-export const COMMENT_PREVIEW_RAIL_BREAKPOINT = 769;
 export const COMMENT_REACTION_PRESET_EMOJIS = Object.freeze(['👍', '❤️', '🎉', '👀', '🚀']);
 export const COMMENT_REACTION_MORE_EMOJIS = Object.freeze(['😂', '🔥', '✅', '🙏', '💡', '🤔', '👏', '😄', '🎯', '🙌']);
 
@@ -55,19 +51,15 @@ export function areAnchorsEqual(left, right) {
 }
 
 export function formatAnchorLabel(anchor) {
-  if (!anchor) {
+  const startLine = Number(anchor?.startLine || 0);
+  const endLine = Number(anchor?.endLine || startLine);
+  if (!Number.isFinite(startLine) || startLine <= 0) {
     return 'No source anchor';
   }
 
-  if ((anchor.kind || anchor.anchorKind) === 'text' && anchor.quote) {
-    return anchor.startLine === anchor.endLine
-      ? `Line ${anchor.startLine}`
-      : `Lines ${anchor.startLine}-${anchor.endLine}`;
-  }
-
-  return anchor.startLine === anchor.endLine
-    ? `Line ${anchor.startLine}`
-    : `Lines ${anchor.startLine}-${anchor.endLine}`;
+  return startLine === endLine
+    ? `Line ${startLine}`
+    : `Lines ${startLine}-${endLine}`;
 }
 
 export function getAnchorGroupKey(anchor = {}) {
@@ -120,6 +112,65 @@ export function createRenderedCommentBody(body, className = 'comment-markdown')
   return container;
 }
 
+export function createCommentOverviewThread({
+  authorName = 'Anonymous',
+  buttonClassName = 'comment-overview-thread',
+  footerClassName = 'comment-overview-thread-footer',
+  headerClassName = 'comment-overview-thread-header',
+  lineClassName = 'comment-overview-thread-line',
+  lineLabel = '',
+  messageCount = 0,
+  previewBody = '',
+  previewClassName = 'comment-markdown comment-overview-thread-preview',
+  quote = 'Source anchored comment',
+  quoteClassName = 'comment-overview-thread-quote',
+  timestamp = '',
+} = {}) {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = buttonClassName;
+
+  const header = document.createElement('div');
+  header.className = headerClassName;
+
+  const line = document.createElement('span');
+  line.className = lineClassName;
+  line.textContent = lineLabel;
+
+  const meta = document.createElement('span');
+  meta.className = 'comment-overview-thread-meta';
+  meta.textContent = timestamp;
+  header.append(line, meta);
+
+  const body = document.createElement('div');
+  body.className = 'comment-overview-thread-body';
+  const preview = createRenderedCommentBody(previewBody, previewClassName);
+
+  const quoteSection = document.createElement('div');
+  quoteSection.className = 'comment-overview-thread-section comment-overview-thread-reference';
+  const quoteLabel = document.createElement('span');
+  quoteLabel.className = 'comment-overview-thread-section-label';
+  quoteLabel.textContent = 'Reference';
+  const quoteNode = document.createElement('span');
+  quoteNode.className = quoteClassName;
+  quoteNode.textContent = quote;
+  quoteSection.append(quoteLabel, quoteNode);
+  body.append(preview, quoteSection);
+
+  const footer = document.createElement('div');
+  footer.className = footerClassName;
+  const author = document.createElement('span');
+  author.className = 'comment-overview-thread-author';
+  author.textContent = authorName;
+  const messages = document.createElement('span');
+  messages.className = 'comment-overview-thread-message-count';
+  messages.textContent = `${messageCount} message${messageCount === 1 ? '' : 's'}`;
+  footer.append(author, messages);
+
+  button.append(header, body, footer);
+  return button;
+}
+
 export function hasLocalReaction(reaction, localUserId) {
   return Boolean(localUserId && reaction?.users?.some((user) => user?.userId === localUserId));
 }

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

@@ -89,9 +89,13 @@ export class CommentUiController {
       if (this.activeCard?.mode === 'create' && this.activeCard.origin === 'preview') {
         return;
       }
-      this.previewSelection = this.supported && this.fileKind === 'markdown'
+      const previewSelection = this.supported && this.fileKind === 'markdown'
         ? createPreviewSelection(window.getSelection(), this.previewElement, this.session?.getText?.() ?? '')
         : null;
+      if (!previewSelection && !this.previewSelection) {
+        return;
+      }
+      this.previewSelection = previewSelection;
       this.scheduleLayoutRefresh();
     };
     this.handleCommentSelectionButtonPointerDown = (event) => {

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

@@ -57,7 +57,9 @@ export class FileActionController {
       : { matches: false },
     onFileDelete,
     onFileSelect,
+    onShowFileExtensionsChange,
     pendingWorkspaceRequestIds = null,
+    showFileExtensions = false,
     state,
     toastController,
     vaultClient,
@@ -66,13 +68,16 @@ export class FileActionController {
   }) {
     this.onFileDelete = onFileDelete;
     this.onFileSelect = onFileSelect;
+    this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.pendingWorkspaceRequestIds = pendingWorkspaceRequestIds;
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.state = state;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.view = view;
     this.refresh = refresh;
     this.createButton = document.getElementById('sidebarCreateBtn');
+    this.fileExplorerOptionsButton = document.getElementById('fileExplorerOptionsBtn');
     this.actionDialog = document.getElementById('fileActionDialog');
     this.actionForm = document.getElementById('fileActionForm');
     this.actionTitle = document.getElementById('fileActionTitle');
@@ -87,6 +92,9 @@ export class FileActionController {
     this.createMenu = new CreateMenuPresenter({
       mobileBreakpointQuery,
     });
+    this.fileExplorerOptionsMenu = new CreateMenuPresenter({
+      mobileBreakpointQuery,
+    });
     this.pendingAction = null;
     this.actionBusy = false;
   }
@@ -95,6 +103,9 @@ export class FileActionController {
     this.createButton?.addEventListener('click', () => {
       this.openRootCreateMenu({ anchor: this.createButton });
     });
+    this.fileExplorerOptionsButton?.addEventListener('click', () => {
+      this.openFileExplorerOptionsMenu({ anchor: this.fileExplorerOptionsButton });
+    });
     this.actionCancelButton?.addEventListener('click', () => this.closeActionDialog());
     this.actionForm?.addEventListener('submit', (event) => {
       event.preventDefault();
@@ -313,6 +324,7 @@ export class FileActionController {
 
     this.pendingAction = { requiresInput, emptyMessage, onSubmit };
     this.createMenu.close({ restoreFocus: false });
+    this.fileExplorerOptionsMenu.close({ restoreFocus: false });
     this.view?.removeContextMenu?.();
 
     this.actionTitle.textContent = title;
@@ -716,6 +728,7 @@ export class FileActionController {
 
   openCreateMenu({ anchor = this.createButton, parentDir = '' } = {}) {
     this.view?.removeContextMenu?.();
+    this.fileExplorerOptionsMenu.close({ restoreFocus: false });
     this.createMenu.toggle({
       anchor,
       items: this.getCreateActions({ parentDir }),
@@ -723,6 +736,25 @@ export class FileActionController {
     });
   }
 
+  openFileExplorerOptionsMenu({ anchor = this.fileExplorerOptionsButton } = {}) {
+    this.view?.removeContextMenu?.();
+    this.createMenu.close({ restoreFocus: false });
+    this.fileExplorerOptionsMenu.toggle({
+      anchor,
+      items: [{
+        icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z"></path><circle cx="12" cy="12" r="2.5"></circle></svg>',
+        id: 'show-file-extensions',
+        label: 'Show file extensions',
+        meta: this.showFileExtensions ? 'On' : 'Off',
+        onSelect: () => {
+          this.showFileExtensions = !this.showFileExtensions;
+          this.onShowFileExtensionsChange?.(this.showFileExtensions);
+        },
+      }],
+      title: 'File explorer options',
+    });
+  }
+
   handleNewFile({ parentDir = '' } = {}) {
     const context = this.getCreateContext(parentDir);
 

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

@@ -9,14 +9,18 @@ export class FileExplorerController {
     onFileSelect,
     onFileDelete,
     pendingWorkspaceRequestIds = null,
+    onShowFileExtensionsChange,
+    showFileExtensions = false,
     toastController,
     vaultClient,
   }) {
     this.onFileSelect = onFileSelect;
     this.onFileDelete = onFileDelete;
+    this.onShowFileExtensionsChange = onShowFileExtensionsChange;
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.state = new FileTreeState();
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.threadCounts = new Map();
     this.view = new FileExplorerView({
       mobileBreakpointQuery,
@@ -27,7 +31,12 @@ export class FileExplorerController {
       },
       onDirectoryToggle: (pathValue) => {
         this.state.toggleDirectory(pathValue);
-        this.renderTree();
+        if (!this.view.rerenderDirectoryBranch(pathValue, this.state.tree, {
+          activeFilePath: this.state.activeFilePath,
+          expandedDirs: this.state.expandedDirs,
+        })) {
+          this.renderTree();
+        }
       },
       onEntryDrop: (payload) => this.actionController.moveEntryByDrop(payload),
       onFileContextMenu: (event, payload) => {
@@ -54,7 +63,13 @@ export class FileExplorerController {
       mobileBreakpointQuery,
       onFileDelete: this.onFileDelete,
       onFileSelect: this.onFileSelect,
+      onShowFileExtensionsChange: (enabled) => {
+        this.showFileExtensions = Boolean(enabled);
+        this.onShowFileExtensionsChange?.(this.showFileExtensions);
+        this.renderTree();
+      },
       pendingWorkspaceRequestIds,
+      showFileExtensions: this.showFileExtensions,
       refresh: () => this.refresh(),
       state: this.state,
       toastController: this.toastController,
@@ -86,15 +101,25 @@ export class FileExplorerController {
   }
 
   setActiveFile(filePath) {
+    const expandedDirectoryCount = this.state.expandedDirs.size;
     this.state.setActiveFile(filePath);
-    this.renderTree();
+    if (this.state.searchQuery) {
+      this.view.setActiveFile(filePath);
+      return;
+    }
+    if (
+      this.state.expandedDirs.size !== expandedDirectoryCount
+      || !this.view.setActiveFile(filePath)
+    ) {
+      this.renderTree();
+    }
   }
 
   setThreadCounts(threadCounts = new Map()) {
     this.threadCounts = threadCounts instanceof Map
       ? new Map(threadCounts)
       : new Map(Object.entries(threadCounts ?? {}));
-    this.renderTree();
+    this.view.setThreadCounts(this.threadCounts);
   }
 
   revealFile(filePath, { clearSearch = false } = {}) {
@@ -111,6 +136,10 @@ export class FileExplorerController {
     return this.state.flatFiles;
   }
 
+  get fileEntries() {
+    return this.state.flatFileEntries;
+  }
+
   get flatDocumentFiles() {
     return this.state.flatFiles.filter((path) => !isImageAttachmentFilePath(path));
   }
@@ -126,6 +155,7 @@ export class FileExplorerController {
       reset,
       searchMatches: this.state.getSearchMatches(),
       searchQuery: this.state.searchQuery,
+      showFileExtensions: this.showFileExtensions,
       threadCounts: this.threadCounts,
       tree: this.state.tree,
     });

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

@@ -52,6 +52,7 @@ export class FileExplorerView {
     this.searchInput = document.getElementById('fileSearchInput');
     this.renderedDirectoryWrappers = new Map();
     this.renderedChildContainers = new Map();
+    this.renderedFileItems = new Map();
     this.lastRenderMode = 'tree';
     this.longPressTimer = 0;
     this.longPressContext = null;
@@ -66,6 +67,7 @@ export class FileExplorerView {
     this.autoExpandTargetPath = '';
     this.rootDropZone = null;
     this.threadCounts = new Map();
+    this.showFileExtensions = false;
   }
 
   initialize() {
@@ -120,17 +122,51 @@ export class FileExplorerView {
   }
 
   revealFile(filePath) {
-    const fileItem = Array.from(this.treeContainer?.querySelectorAll('.file-tree-file') ?? [])
-      .find((element) => element.dataset.path === filePath);
-    fileItem?.scrollIntoView({ block: 'nearest' });
+    this.renderedFileItems.get(filePath)?.scrollIntoView({ block: 'nearest' });
   }
 
-  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, threadCounts = new Map(), tree }) {
+  setActiveFile(filePath) {
+    this.treeContainer?.querySelector('.file-tree-file.active')?.classList.remove('active');
+    if (!filePath) {
+      return true;
+    }
+
+    const fileItem = this.renderedFileItems.get(filePath);
+    fileItem?.classList.add('active');
+    return Boolean(fileItem);
+  }
+
+  setThreadCounts(threadCounts) {
+    this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
+    this.renderedFileItems.forEach((button, filePath) => {
+      const threadCount = Number(this.threadCounts.get(filePath) ?? 0) || 0;
+      let badge = button.querySelector('.file-tree-comment-count');
+      button.classList.toggle('has-comments', threadCount > 0);
+
+      if (threadCount <= 0) {
+        delete button.dataset.threadCount;
+        badge?.remove();
+        return;
+      }
+
+      button.dataset.threadCount = String(threadCount);
+      if (!badge) {
+        badge = document.createElement('span');
+        badge.className = 'file-tree-comment-count';
+        button.appendChild(badge);
+      }
+      badge.textContent = String(threadCount);
+      badge.setAttribute('aria-label', `${threadCount} open comment thread${threadCount === 1 ? '' : 's'}`);
+    });
+  }
+
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, showFileExtensions = false, threadCounts = new Map(), tree }) {
     if (!this.treeContainer) {
       return;
     }
 
     this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
+    this.showFileExtensions = Boolean(showFileExtensions);
     this.currentSearchQuery = String(searchQuery ?? '');
     if (this.currentSearchQuery) {
       this.clearDragFeedback();
@@ -248,6 +284,7 @@ export class FileExplorerView {
   resetTreeIndexes() {
     this.renderedDirectoryWrappers.clear();
     this.renderedChildContainers.clear();
+    this.renderedFileItems.clear();
   }
 
   renderNodes(nodes, container, { activeFilePath, depth, expandedDirs }) {
@@ -408,6 +445,11 @@ export class FileExplorerView {
         this.renderedChildContainers.delete(pathValue);
       }
     });
+    Array.from(this.renderedFileItems.keys()).forEach((pathValue) => {
+      if (pathValue.startsWith(prefix)) {
+        this.renderedFileItems.delete(pathValue);
+      }
+    });
   }
 
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
@@ -453,9 +495,10 @@ export class FileExplorerView {
     if (threadCount > 0) {
       button.dataset.threadCount = String(threadCount);
     }
+    const displayName = this.showFileExtensions ? String(name ?? '') : stripVaultFileExtension(name);
     button.innerHTML = `
       ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
-      <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
+      <span class="file-tree-name">${escapeHtml(displayName)}</span>
       ${threadCount > 0 ? `<span class="file-tree-comment-count" aria-label="${threadCount} open comment thread${threadCount === 1 ? '' : 's'}">${threadCount}</span>` : ''}
     `;
     this.configureDragSource(button, { path: filePath, type: 'file' });
@@ -474,6 +517,7 @@ export class FileExplorerView {
       this.onFileContextMenu?.(this.createLongPressEvent(button), { filePath, type: 'file' });
     });
 
+    this.renderedFileItems.set(filePath, button);
     return button;
   }
 

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

@@ -1,6 +1,6 @@
 import { normalizeVaultPathInput } from '../domain/vault-paths.js';
 
-function flattenTree(nodes, files = [], searchEntries = []) {
+function flattenTree(nodes, files = [], searchEntries = [], fileEntries = []) {
   for (const node of nodes) {
     if (!node?.path || !node?.type) {
       continue;
@@ -23,15 +23,19 @@ function flattenTree(nodes, files = [], searchEntries = []) {
       || node.type === 'image'
     ) {
       files.push(node.path);
+      fileEntries.push({
+        mtimeMs: node.mtimeMs,
+        path: node.path,
+      });
       continue;
     }
 
     if (node.type === 'directory' && Array.isArray(node.children)) {
-      flattenTree(node.children, files, searchEntries);
+      flattenTree(node.children, files, searchEntries, fileEntries);
     }
   }
 
-  return { files, searchEntries };
+  return { fileEntries, files, searchEntries };
 }
 
 function findNodeByPath(nodes, pathValue) {
@@ -82,6 +86,7 @@ export class FileTreeState {
   constructor() {
     this.tree = [];
     this.flatFiles = [];
+    this.flatFileEntries = [];
     this.flatSearchEntries = [];
     this.activeFilePath = null;
     this.expandedDirs = new Set();
@@ -90,8 +95,9 @@ export class FileTreeState {
 
   setTree(tree) {
     this.tree = Array.isArray(tree) ? tree : [];
-    const flattened = flattenTree(this.tree, [], []);
+    const flattened = flattenTree(this.tree, [], [], []);
     this.flatFiles = flattened.files;
+    this.flatFileEntries = flattened.fileEntries;
     this.flatSearchEntries = flattened.searchEntries;
   }