collabmd 0.1.40 → 0.1.41

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

@@ -0,0 +1,238 @@
+import { stripVaultFileExtension } from '../../domain/file-kind.js';
+
+function asArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+
+function getPathLeaf(pathValue = '') {
+  return String(pathValue)
+    .split('/')
+    .filter(Boolean)
+    .pop() || '';
+}
+
+function getParentPath(pathValue = '') {
+  const normalized = String(pathValue ?? '').replace(/\/+$/u, '');
+  const separatorIndex = normalized.lastIndexOf('/');
+  return separatorIndex >= 0 ? normalized.slice(0, separatorIndex) : '';
+}
+
+function formatLineLabel(anchor = {}) {
+  const startLine = Number(anchor.startLine || 0);
+  const endLine = Number(anchor.endLine || startLine);
+  if (!Number.isFinite(startLine) || startLine <= 0) {
+    return 'No source anchor';
+  }
+
+  return startLine === endLine ? `Line ${startLine}` : `Lines ${startLine}-${endLine}`;
+}
+
+export class CommentOverviewController {
+  constructor({
+    panelElement,
+    toastController = null,
+    vaultApiClient,
+    onOverviewChange = null,
+    onThreadSelect = null,
+  }) {
+    this.panel = panelElement;
+    this.toastController = toastController;
+    this.vaultApiClient = vaultApiClient;
+    this.onOverviewChange = onOverviewChange;
+    this.onThreadSelect = onThreadSelect;
+    this.overview = { files: [], generatedAt: 0, totalThreadCount: 0 };
+    this.loading = false;
+    this.errorMessage = '';
+    this.refreshPromise = null;
+    this.timeFormatter = new Intl.DateTimeFormat(undefined, {
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+      month: 'short',
+    });
+  }
+
+  initialize() {
+    this.render();
+  }
+
+  getThreadCounts() {
+    return new Map(
+      asArray(this.overview.files).map((file) => [file.filePath, Number(file.threadCount || 0)]),
+    );
+  }
+
+  async refresh() {
+    if (this.refreshPromise) {
+      return this.refreshPromise;
+    }
+
+    this.loading = true;
+    this.render();
+    this.refreshPromise = (async () => {
+      try {
+        const payload = await this.vaultApiClient.readCommentOverview();
+        this.errorMessage = '';
+        this.setOverview(payload?.overview ?? payload ?? {});
+      } catch (error) {
+        console.error('[comments] Failed to load comment overview:', error.message);
+        this.errorMessage = 'Unable to load open comments.';
+        this.toastController?.show?.('Failed to load comments');
+      } finally {
+        this.loading = false;
+        this.refreshPromise = null;
+        this.render();
+      }
+    })();
+
+    return this.refreshPromise;
+  }
+
+  setOverview(overview = {}) {
+    this.errorMessage = '';
+    this.overview = {
+      files: asArray(overview.files),
+      generatedAt: Number(overview.generatedAt || 0),
+      totalThreadCount: Number(overview.totalThreadCount || 0),
+    };
+    this.onOverviewChange?.(this.overview, {
+      threadCounts: this.getThreadCounts(),
+    });
+    this.render();
+  }
+
+  render() {
+    if (!this.panel) {
+      return;
+    }
+
+    this.panel.replaceChildren();
+
+    if (this.errorMessage) {
+      const error = document.createElement('div');
+      error.className = 'comment-overview-empty';
+      error.textContent = this.errorMessage;
+      this.panel.appendChild(error);
+      return;
+    }
+
+    if (this.loading && asArray(this.overview.files).length === 0) {
+      const loading = document.createElement('div');
+      loading.className = 'comment-overview-empty';
+      loading.textContent = 'Loading open comments...';
+      this.panel.appendChild(loading);
+      return;
+    }
+
+    const files = asArray(this.overview.files);
+    if (files.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'comment-overview-empty';
+      empty.textContent = 'No open comments';
+      this.panel.appendChild(empty);
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+    files.forEach((file) => {
+      fragment.appendChild(this.createFileGroup(file));
+    });
+    this.panel.appendChild(fragment);
+  }
+
+  createFileGroup(file) {
+    const section = document.createElement('section');
+    section.className = 'comment-overview-file';
+
+    const header = document.createElement('div');
+    header.className = 'comment-overview-file-header';
+
+    const titleWrap = document.createElement('div');
+    titleWrap.className = 'comment-overview-file-title-wrap';
+
+    const title = document.createElement('h3');
+    title.className = 'comment-overview-file-title';
+    title.textContent = stripVaultFileExtension(getPathLeaf(file.filePath));
+
+    const parent = document.createElement('span');
+    parent.className = 'comment-overview-file-path';
+    parent.textContent = getParentPath(file.filePath) || file.filePath;
+
+    const count = document.createElement('span');
+    count.className = 'comment-overview-file-count';
+    count.textContent = String(file.threadCount || asArray(file.threads).length);
+
+    titleWrap.append(title, parent);
+    header.append(titleWrap, count);
+    section.appendChild(header);
+
+    asArray(file.threads).forEach((thread) => {
+      section.appendChild(this.createThreadButton(file.filePath, thread));
+    });
+
+    return section;
+  }
+
+  createThreadButton(filePath, thread) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'comment-overview-thread';
+    button.addEventListener('click', () => {
+      this.onThreadSelect?.({
+        anchor: thread.anchor,
+        filePath,
+        threadId: thread.id,
+      });
+    });
+
+    const header = document.createElement('div');
+    header.className = 'comment-overview-thread-header';
+
+    const line = document.createElement('span');
+    line.className = 'comment-overview-thread-line';
+    line.textContent = formatLineLabel(thread.anchor);
+
+    const meta = document.createElement('span');
+    meta.className = 'comment-overview-thread-meta';
+    meta.textContent = this.formatTimestamp(thread.latestActivityAt);
+    header.append(line, meta);
+
+    const body = document.createElement('div');
+    body.className = 'comment-overview-thread-body';
+
+    const quote = document.createElement('span');
+    quote.className = 'comment-overview-thread-quote';
+    quote.textContent = thread.anchor?.quote || 'Source anchored comment';
+
+    const preview = document.createElement('p');
+    preview.className = 'comment-overview-thread-preview';
+    preview.textContent = thread.latestMessage?.bodyPreview || '';
+    body.append(preview, quote);
+
+    const footer = document.createElement('div');
+    footer.className = 'comment-overview-thread-footer';
+    const author = document.createElement('span');
+    author.className = 'comment-overview-thread-author';
+    author.textContent = thread.latestMessage?.userName || thread.createdByName || 'Anonymous';
+    const replies = document.createElement('span');
+    replies.className = 'comment-overview-thread-message-count';
+    const messageCount = Number(thread.messageCount || 0);
+    replies.textContent = `${messageCount} message${messageCount === 1 ? '' : 's'}`;
+    footer.append(author, replies);
+
+    button.append(header, body, footer);
+    return button;
+  }
+
+  formatTimestamp(value) {
+    if (!Number.isFinite(value)) {
+      return '';
+    }
+
+    try {
+      return this.timeFormatter.format(new Date(value));
+    } catch {
+      return '';
+    }
+  }
+}

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

@@ -226,6 +226,28 @@ function closeDrawer() {
   this.setDrawerOpen(false);
 }
 
+/** @this {CommentUiStateContext} */
+function openThreadFromOverview(threadId) {
+  if (!threadId || !this.supported) {
+    return false;
+  }
+
+  const group = this.getThreadGroups().find((candidate) => (
+    candidate.threads.some((thread) => thread.id === threadId)
+  ));
+  if (!group) {
+    return false;
+  }
+
+  this.onNavigateToLine?.(group.anchor?.startLine ?? 1);
+  this.openThreadGroup(group, {
+    anchor: group.anchor,
+    origin: 'editor',
+    sourceRect: this.session?.getCommentAnchorClientRect?.(group.anchor) ?? null,
+  });
+  return true;
+}
+
 /** @this {CommentUiStateContext} */
 function getThreadGroups() {
   const groups = new Map();
@@ -283,6 +305,7 @@ export const commentUiStateMethods = {
   closeDrawer,
   getThreadGroups,
   handleEditorContentChange,
+  openThreadFromOverview,
   scheduleSelectionReveal,
   setCurrentFile,
   setDrawerOpen,

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

@@ -18,6 +18,7 @@ export class FileExplorerController {
     this.toastController = toastController;
     this.vaultClient = vaultClient;
     this.state = new FileTreeState();
+    this.threadCounts = new Map();
     this.view = new FileExplorerView({
       mobileBreakpointQuery,
       onDirectorySelect: (pathValue) => {
@@ -90,6 +91,13 @@ export class FileExplorerController {
     this.renderTree();
   }
 
+  setThreadCounts(threadCounts = new Map()) {
+    this.threadCounts = threadCounts instanceof Map
+      ? new Map(threadCounts)
+      : new Map(Object.entries(threadCounts ?? {}));
+    this.renderTree();
+  }
+
   revealFile(filePath, { clearSearch = false } = {}) {
     if (clearSearch) {
       this.state.setSearchQuery('');
@@ -119,6 +127,7 @@ export class FileExplorerController {
       reset,
       searchMatches: this.state.getSearchMatches(),
       searchQuery: this.state.searchQuery,
+      threadCounts: this.threadCounts,
       tree: this.state.tree,
     });
   }

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

@@ -78,6 +78,7 @@ export class FileExplorerView {
     this.autoExpandTimer = 0;
     this.autoExpandTargetPath = '';
     this.rootDropZone = null;
+    this.threadCounts = new Map();
   }
 
   initialize() {
@@ -137,11 +138,12 @@ export class FileExplorerView {
     fileItem?.scrollIntoView({ block: 'nearest' });
   }
 
-  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
+  render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, threadCounts = new Map(), tree }) {
     if (!this.treeContainer) {
       return;
     }
 
+    this.threadCounts = threadCounts instanceof Map ? threadCounts : new Map();
     this.currentSearchQuery = String(searchQuery ?? '');
     if (this.currentSearchQuery) {
       this.clearDragFeedback();
@@ -424,6 +426,7 @@ export class FileExplorerView {
   createFileItem({ activeFilePath, depth, filePath, fileType = 'file', name }) {
     const button = document.createElement('button');
     button.className = 'file-tree-item file-tree-file';
+    const threadCount = Number(this.threadCounts.get(filePath) ?? 0);
     const isDrawio = fileType === 'drawio';
     const isExcalidraw = fileType === 'excalidraw';
     const isBase = fileType === 'base';
@@ -452,14 +455,21 @@ export class FileExplorerView {
     if (filePath === activeFilePath) {
       button.classList.add('active');
     }
+    if (threadCount > 0) {
+      button.classList.add('has-comments');
+    }
 
     button.style.setProperty('--depth', depth);
     button.dataset.depth = depth;
     button.dataset.path = filePath;
     button.dataset.entryType = 'file';
+    if (threadCount > 0) {
+      button.dataset.threadCount = String(threadCount);
+    }
     button.innerHTML = `
       ${this.getFileIconSvg({ isBase, isDrawio, isExcalidraw, isImage, isMermaid, isPlantUml })}
       <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</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' });
 

package/src/client/styles/components/navigation.css

@@ -51,7 +51,8 @@
 
 .ui-nav-tabs {
   display: flex;
-  padding: 0 var(--space-2);
+  gap: 4px;
+  padding: 4px var(--space-2) 0;
   border-bottom: 1px solid var(--color-divider);
 }
 
@@ -59,22 +60,53 @@
   position: relative;
   flex: 1;
   display: inline-flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: var(--space-2) var(--space-3);
+  min-width: 0;
+  height: 42px;
+  gap: 3px;
+  padding: 4px var(--space-1) 5px;
+  border: 1px solid transparent;
   border-bottom: 2px solid transparent;
+  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
   color: var(--color-text-muted);
-  transition: all var(--transition-interactive);
-  font-size: var(--text-xs);
-  font-weight: 500;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    color var(--transition-interactive);
+}
+
+.ui-nav-tab-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-icon-md);
+  height: var(--control-icon-md);
+  flex-shrink: 0;
+}
+
+.ui-nav-tab-icon svg {
+  display: block;
+  width: var(--control-icon-md);
+  height: var(--control-icon-md);
+}
+
+.ui-nav-tab-label {
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .ui-nav-tab.has-changes::after {
   content: '';
   position: absolute;
-  top: 8px;
-  right: 12px;
+  top: 5px;
+  right: 7px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -83,11 +115,14 @@
 }
 
 .ui-nav-tab:hover {
+  border-color: color-mix(in oklab, var(--color-border) 72%, transparent);
   background: var(--color-surface-offset);
   color: var(--color-text);
 }
 
 .ui-nav-tab.active {
+  border-color: color-mix(in oklab, var(--color-primary) 32%, transparent);
   border-bottom-color: var(--color-primary);
+  background: var(--color-primary-highlight);
   color: var(--color-primary);
 }

package/src/client/styles/components/scrollbars.css

@@ -6,6 +6,7 @@
 .git-panel,
 .diff-scroll,
 .backlinks-body,
+.comment-overview-panel,
 .comments-drawer-list,
 .comments-drawer-item-quote,
 .comment-card-quote,
@@ -28,6 +29,7 @@
 .git-panel::-webkit-scrollbar,
 .diff-scroll::-webkit-scrollbar,
 .backlinks-body::-webkit-scrollbar,
+.comment-overview-panel::-webkit-scrollbar,
 .comments-drawer-list::-webkit-scrollbar,
 .comments-drawer-item-quote::-webkit-scrollbar,
 .comment-card-quote::-webkit-scrollbar,
@@ -50,6 +52,7 @@
 .git-panel::-webkit-scrollbar-track,
 .diff-scroll::-webkit-scrollbar-track,
 .backlinks-body::-webkit-scrollbar-track,
+.comment-overview-panel::-webkit-scrollbar-track,
 .comments-drawer-list::-webkit-scrollbar-track,
 .comments-drawer-item-quote::-webkit-scrollbar-track,
 .comment-card-quote::-webkit-scrollbar-track,
@@ -71,6 +74,7 @@
 .git-panel::-webkit-scrollbar-thumb,
 .diff-scroll::-webkit-scrollbar-thumb,
 .backlinks-body::-webkit-scrollbar-thumb,
+.comment-overview-panel::-webkit-scrollbar-thumb,
 .comments-drawer-list::-webkit-scrollbar-thumb,
 .comments-drawer-item-quote::-webkit-scrollbar-thumb,
 .comment-card-quote::-webkit-scrollbar-thumb,
@@ -93,6 +97,7 @@
 .git-panel::-webkit-scrollbar-thumb:hover,
 .diff-scroll::-webkit-scrollbar-thumb:hover,
 .backlinks-body::-webkit-scrollbar-thumb:hover,
+.comment-overview-panel::-webkit-scrollbar-thumb:hover,
 .comments-drawer-list::-webkit-scrollbar-thumb:hover,
 .comments-drawer-item-quote::-webkit-scrollbar-thumb:hover,
 .comment-card-quote::-webkit-scrollbar-thumb:hover,

package/src/client/styles/features/comment-overview.css

@@ -0,0 +1,196 @@
+.comment-overview-panel {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 6px;
+  background: var(--color-surface);
+}
+
+.comment-overview-empty {
+  padding: var(--space-5) var(--space-3);
+  color: var(--color-text-faint);
+  text-align: center;
+  font-size: var(--text-xs);
+}
+
+.comment-overview-file {
+  padding: 9px 0 10px;
+  border-bottom: 1px solid color-mix(in oklab, var(--color-divider) 80%, transparent);
+}
+
+.comment-overview-file:last-child {
+  border-bottom: none;
+}
+
+.comment-overview-file-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: 2px 4px 7px;
+}
+
+.comment-overview-file-title-wrap {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.comment-overview-file-title {
+  overflow: hidden;
+  margin: 0;
+  color: var(--color-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.comment-overview-file-path {
+  overflow: hidden;
+  color: var(--color-text-faint);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-meta);
+  line-height: 1.1;
+}
+
+.comment-overview-file-count,
+.file-tree-comment-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border: 1px solid oklch(from var(--color-comment) l c h / 0.2);
+  border-radius: var(--radius-full);
+  background: var(--color-comment-soft);
+  color: var(--color-comment);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.comment-overview-thread {
+  display: grid;
+  width: 100%;
+  gap: 6px;
+  margin: 0 0 4px;
+  padding: 8px;
+  border: 1px solid color-mix(in oklab, var(--color-border) 58%, transparent);
+  border-radius: var(--radius-sm);
+  background: color-mix(in oklab, var(--color-surface-2) 88%, var(--color-surface) 12%);
+  color: var(--color-text);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background var(--transition-interactive),
+    border-color var(--transition-interactive),
+    box-shadow var(--transition-interactive);
+}
+
+.comment-overview-thread:hover,
+.comment-overview-thread:focus-visible {
+  border-color: color-mix(in oklab, var(--color-comment) 36%, var(--color-border));
+  background: var(--color-surface-offset);
+  box-shadow: inset 2px 0 0 color-mix(in oklab, var(--color-comment) 88%, transparent);
+  outline: none;
+}
+
+.comment-overview-thread-header,
+.comment-overview-thread-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.comment-overview-thread-line {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 58%;
+  padding: 2px 6px;
+  border-radius: var(--radius-full);
+  background: var(--color-comment-soft);
+  color: var(--color-comment);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.comment-overview-thread-meta {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.comment-overview-thread-meta,
+.comment-overview-thread-footer {
+  color: var(--color-text-faint);
+  font-size: var(--text-meta);
+  line-height: 1.2;
+}
+
+.comment-overview-thread-body {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.comment-overview-thread-quote,
+.comment-overview-thread-preview,
+.comment-overview-thread-author,
+.comment-overview-thread-message-count {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  line-height: 1.25;
+}
+
+.comment-overview-thread-quote {
+  -webkit-line-clamp: 1;
+  padding-left: 7px;
+  border-left: 2px solid color-mix(in oklab, var(--color-comment) 34%, var(--color-border));
+  color: var(--color-text-faint);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+}
+
+.comment-overview-thread-preview {
+  -webkit-line-clamp: 1;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: 520;
+  line-height: 1.3;
+}
+
+.comment-overview-thread-author,
+.comment-overview-thread-message-count {
+  -webkit-line-clamp: 1;
+}
+
+.comment-overview-thread-author {
+  min-width: 0;
+}
+
+.comment-overview-thread-message-count {
+  flex-shrink: 0;
+}
+
+.file-tree-comment-count {
+  min-width: 16px;
+  height: 16px;
+  margin-left: auto;
+  font-size: 10px;
+}
+
+.file-tree-file.has-comments .file-tree-name {
+  padding-right: 4px;
+}

package/src/client/styles/features/comments.css

@@ -1,4 +1,5 @@
 @import './comments-drawer.css';
+@import './comment-overview.css';
 @import './comment-overlays.css';
 @import './comment-card.css';
 @import './comment-markdown.css';

package/src/client/styles/layout/responsive.css

@@ -185,11 +185,12 @@
   }
 
   .ui-nav-tabs {
-    padding: 0 var(--space-1);
+    padding: 4px var(--space-1) 0;
   }
 
   .ui-nav-tab {
-    padding: var(--space-2);
+    height: 42px;
+    padding: 4px var(--space-1) 5px;
   }
 
   .editor-layout {