collabmd 0.1.40 → 0.1.42

package/src/client/presentation/bases-preview-controller.js

@@ -785,7 +785,7 @@ function syncFilterValueCombobox(entry, result, path, { fallbackToFullRender = t
 
   if (!input || !combobox || !rule || rule.type !== 'rule' || typeof input.insertAdjacentHTML !== 'function') {
     if (fallbackToFullRender) {
-      updateShellContent(entry, result);
+      updateShellPanel(entry, result);
     }
     return false;
   }
@@ -1080,7 +1080,14 @@ function markPlaceholderHydrated(placeholder) {
   placeholder.classList.remove('diagram-preview-shell');
 }
 
-function updateShellContent(entry, result) {
+function updateShellContent(entry, result, {
+  actions = true,
+  body = true,
+  meta = true,
+  panel = true,
+  summary = true,
+  tabs = true,
+} = {}) {
   const shell = findShellElement(entry);
   if (!shell?.querySelector) {
     entry.placeholder.innerHTML = renderShellHtml(result, entry);
@@ -1088,35 +1095,35 @@ function updateShellContent(entry, result) {
     return;
   }
 
-  const tabs = shell.querySelector('[data-base-tabs]');
-  if (tabs) {
-    tabs.innerHTML = renderViewTabs(result);
+  const tabsSlot = shell.querySelector('[data-base-tabs]');
+  if (tabs && tabsSlot) {
+    tabsSlot.innerHTML = renderViewTabs(result);
   }
 
-  const meta = shell.querySelector('[data-base-meta]');
-  if (meta) {
-    meta.textContent = `${String(result.totalRows ?? 0)} results`;
+  const metaSlot = shell.querySelector('[data-base-meta]');
+  if (meta && metaSlot) {
+    metaSlot.textContent = `${String(result.totalRows ?? 0)} results`;
   }
 
   const actionSlot = shell.querySelector('[data-base-action-slot]');
-  if (actionSlot) {
+  if (actions && actionSlot) {
     actionSlot.innerHTML = renderActionButtons(result, entry);
   }
 
   const panelSlot = shell.querySelector('[data-base-panel-slot]');
-  if (panelSlot) {
+  if (panel && panelSlot) {
     const panelState = capturePanelState(panelSlot);
     panelSlot.innerHTML = renderPanel(result, entry);
     restorePanelState(panelSlot, panelState);
   }
 
   const summarySlot = shell.querySelector('[data-base-summary-slot]');
-  if (summarySlot) {
+  if (summary && summarySlot) {
     summarySlot.innerHTML = renderSummaryBar(result.summaries);
   }
 
   const content = shell.querySelector('[data-base-content]');
-  if (content) {
+  if (body && content) {
     content.innerHTML = renderViewBody(result);
   }
 
@@ -1126,6 +1133,16 @@ function updateShellContent(entry, result) {
   }
 }
 
+function updateShellPanel(entry, result) {
+  updateShellContent(entry, result, {
+    actions: false,
+    body: false,
+    meta: false,
+    summary: false,
+    tabs: false,
+  });
+}
+
 function downloadBlob(blob, fileName = 'base.csv') {
   const url = URL.createObjectURL(blob);
   const anchor = document.createElement('a');
@@ -1227,7 +1244,7 @@ export class BasesPreviewController {
         const panel = panelButton.dataset.basePanel || '';
         entry.ui.openPanel = entry.ui.openPanel === panel ? '' : panel;
         entry.ui.rawFilterText = serializeRawFilterText(getEditableViewConfig(entry.result).filters);
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1289,7 +1306,7 @@ export class BasesPreviewController {
           entry.ui.rawFilterText = serializeRawFilterText(getEditableViewConfig(entry.result).filters);
           entry.ui.builderFilter = null;
         }
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1363,7 +1380,7 @@ export class BasesPreviewController {
         }
 
         entry.ui.propertySearch = propertiesSearch.value || '';
-        updateShellContent(entry, entry.result);
+        updateShellPanel(entry, entry.result);
         return;
       }
 
@@ -1740,7 +1757,7 @@ export class BasesPreviewController {
           }
         });
         if (!synced) {
-          updateShellContent(entry, entry.result);
+          updateShellPanel(entry, entry.result);
         }
       }
     } catch {

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

@@ -0,0 +1,263 @@
+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}`;
+}
+
+function createOverviewState({ copy, title, tone = '' }) {
+  const state = document.createElement('div');
+  state.className = 'comment-overview-empty ui-empty-state ui-empty-state--compact';
+  if (tone) {
+    state.dataset.tone = tone;
+  }
+
+  const heading = document.createElement('p');
+  heading.className = 'ui-empty-state-title';
+  heading.textContent = title;
+
+  const description = document.createElement('p');
+  description.className = 'ui-empty-state-copy';
+  description.textContent = copy;
+
+  state.append(heading, description);
+  return state;
+}
+
+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 = createOverviewState({
+        copy: this.errorMessage,
+        title: 'Comments unavailable',
+        tone: 'error',
+      });
+      error.setAttribute('role', 'alert');
+      this.panel.appendChild(error);
+      return;
+    }
+
+    if (this.loading && asArray(this.overview.files).length === 0) {
+      const loading = createOverviewState({
+        copy: 'Checking the vault for active threads…',
+        title: 'Loading comments',
+      });
+      loading.setAttribute('role', 'status');
+      this.panel.appendChild(loading);
+      return;
+    }
+
+    const files = asArray(this.overview.files);
+    if (files.length === 0) {
+      const empty = createOverviewState({
+        copy: 'Open comments from any document will appear here.',
+        title: 'You’re all caught up',
+      });
+      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/presentation/git-panel-controller.js

@@ -915,7 +915,11 @@ export class GitPanelController {
       return;
     }
 
-    this.panel.innerHTML = `<div class="git-panel-empty">${escapeHtml(message)}</div>`;
+    this.panel.innerHTML = `
+      <div class="git-panel-empty ui-empty-state ui-empty-state--compact">
+        <p class="ui-empty-state-copy">${escapeHtml(message)}</p>
+      </div>
+    `;
   }
 
   render() {

package/src/client/presentation/outline-controller.js

@@ -12,6 +12,7 @@ export class OutlineController {
     this.onNavigateToHeading = onNavigateToHeading;
     this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
+    this.closeButton = document.getElementById('outlineClose');
     this.navigation = document.getElementById('outlineNav');
     this.previewContainer = document.getElementById('previewContainer');
     this.toggleButton = document.getElementById('outlineToggle');
@@ -39,6 +40,7 @@ export class OutlineController {
 
   initialize() {
     this.toggleButton?.addEventListener('click', () => this.toggle());
+    this.closeButton?.addEventListener('click', () => this.close());
     document.addEventListener('pointerdown', this.handleDocumentPointerDown);
   }
 
@@ -58,6 +60,8 @@ export class OutlineController {
     this.outlineOpen = nextState;
     this.panel?.classList.toggle('hidden', !this.outlineOpen);
     this.toggleButton?.classList.toggle('active', this.outlineOpen);
+    this.panel?.setAttribute('aria-hidden', String(!this.outlineOpen));
+    this.toggleButton?.setAttribute('aria-expanded', String(this.outlineOpen));
 
     if (this.outlineOpen) {
       this.refresh();

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

@@ -14,12 +14,12 @@
 .toast {
   max-width: 320px;
   padding: var(--space-2) var(--space-4);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-2);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
   color: var(--color-text);
   box-shadow: var(--shadow-md);
-  font-size: var(--text-xs);
+  font-size: var(--text-ui-sm);
   pointer-events: auto;
   opacity: 1;
   display: flex;

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

@@ -51,30 +51,67 @@
 
 .ui-nav-tabs {
   display: flex;
-  padding: 0 var(--space-2);
+  justify-content: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-2) 0;
   border-bottom: 1px solid var(--color-divider);
 }
 
 .ui-nav-tab {
   position: relative;
-  flex: 1;
+  flex: 0 1 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  padding: var(--space-2) var(--space-3);
+  min-width: 0;
+  height: 34px;
+  gap: 5px;
+  padding: 0 var(--space-2);
+  border: none;
   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-tabs:has(.ui-nav-tab.hidden) .ui-nav-tab:not(.hidden) {
+  flex: 1;
+}
+
+.ui-nav-tab-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-icon-sm);
+  height: var(--control-icon-sm);
+  flex-shrink: 0;
+}
+
+.ui-nav-tab-icon svg {
+  display: block;
+  width: var(--control-icon-sm);
+  height: var(--control-icon-sm);
+}
+
+.ui-nav-tab-label {
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-label);
+  font-weight: 600;
+  line-height: 1;
 }
 
-.ui-nav-tab.has-changes::after {
+.ui-nav-tab.has-changes .ui-nav-tab-icon::after {
   content: '';
   position: absolute;
-  top: 8px;
-  right: 12px;
+  top: -2px;
+  right: -3px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
@@ -87,7 +124,9 @@
   color: var(--color-text);
 }
 
-.ui-nav-tab.active {
+.ui-nav-tab.active,
+.ui-nav-tab.active:hover {
   border-bottom-color: var(--color-primary);
+  background: transparent;
   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,