collabmd 0.1.19 → 0.1.21

package/src/client/presentation/backlinks-panel.js

@@ -2,62 +2,95 @@ import { escapeHtml } from '../domain/vault-utils.js';
 import { resolveApiUrl } from '../domain/runtime-paths.js';
 
 /**
- * BacklinksPanel — a collapsible panel below the preview showing
- * which files link to the currently open file ("Linked Mentions").
+ * BacklinksPanel — renders "Linked Mentions" for the current file.
  *
- * Each mention shows the source file name and the context line
- * containing the [[wiki link]]. Clicking a mention navigates to that file.
+ * Desktop uses a docked bottom-left panel outside the preview scroll flow.
+ * Mobile keeps an inline collapsible panel at the end of the preview content.
  */
 export class BacklinksPanel {
-  constructor({ panelElement, onFileSelect }) {
-    this.panel = panelElement;
+  constructor({
+    documentRef = document,
+    inlinePanelElement = null,
+    onFileSelect,
+    panelElement,
+  }) {
+    this.documentRef = documentRef;
+    this.panelRoot = panelElement;
+    this.inlinePanel = inlinePanelElement;
     this.onFileSelect = onFileSelect;
 
-    this.header = this.panel?.querySelector('.backlinks-header');
-    this.toggle = this.panel?.querySelector('.backlinks-toggle');
-    this.countBadge = this.panel?.querySelector('.backlinks-count');
-    this.body = this.panel?.querySelector('.backlinks-body');
-    this.list = this.panel?.querySelector('.backlinks-list');
-
     this._expanded = false;
     this._currentFile = null;
     this._fetchController = null;
     this._backlinks = [];
 
+    const desktopPanel = this.panelRoot?.querySelector('[data-backlinks-variant="dock"]') ?? this.panelRoot;
+    this.panels = [
+      this._createPanelRef(desktopPanel),
+      this._createPanelRef(this.inlinePanel),
+    ].filter(Boolean);
+
+    this.handleDocumentPointerDown = (event) => {
+      if (!this._expanded) {
+        return;
+      }
+
+      const target = event?.target;
+      if (target && this.panels.some(({ panel }) => panel?.contains?.(target))) {
+        return;
+      }
+
+      this.close();
+    };
+
+    this.handleDocumentKeyDown = (event) => {
+      if (!this._expanded || event?.key !== 'Escape') {
+        return;
+      }
+
+      event.preventDefault?.();
+      this.close();
+    };
+
     this.bindEvents();
   }
 
   bindEvents() {
-    this.header?.addEventListener('click', () => {
-      if (this._backlinks.length === 0) return;
-      this._expanded = !this._expanded;
-      this._applyExpandState();
-    });
+    this.panels.forEach((refs) => {
+      refs.header?.addEventListener('click', () => {
+        if (this._backlinks.length === 0) return;
+        this._expanded = !this._expanded;
+        this._applyExpandState();
+      });
 
-    this.header?.addEventListener('keydown', (event) => {
-      if (event.key !== 'Enter' && event.key !== ' ') {
-        return;
-      }
+      refs.header?.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') {
+          return;
+        }
 
-      event.preventDefault();
-      this.header.click();
+        event.preventDefault();
+        refs.header.click();
+      });
     });
+
+    this.documentRef?.addEventListener?.('pointerdown', this.handleDocumentPointerDown);
+    this.documentRef?.addEventListener?.('keydown', this.handleDocumentKeyDown);
   }
 
-  /**
-   * Load backlinks for a file. Call on every file open and after
-   * content changes (debounced).
-   */
   async load(filePath) {
+    const fileChanged = filePath !== this._currentFile;
     this._currentFile = filePath;
 
+    if (fileChanged) {
+      this._expanded = false;
+    }
+
     if (!filePath) {
       this._backlinks = [];
       this._render();
       return;
     }
 
-    // Abort any in-flight fetch
     this._fetchController?.abort();
     this._fetchController = new AbortController();
 
@@ -68,7 +101,6 @@ export class BacklinksPanel {
       );
       const data = await response.json();
 
-      // Guard against stale responses (user switched files)
       if (this._currentFile !== filePath) return;
 
       this._backlinks = data.backlinks ?? [];
@@ -81,7 +113,6 @@ export class BacklinksPanel {
     this._render();
   }
 
-  /** Clear the panel (e.g. when navigating to empty state). */
   clear() {
     this._currentFile = null;
     this._backlinks = [];
@@ -89,100 +120,125 @@ export class BacklinksPanel {
     this._render();
   }
 
-  // --- Private ---
-
-  _render() {
-    if (!this.panel) return;
+  close() {
+    if (!this._expanded) {
+      return;
+    }
 
-    const count = this._backlinks.length;
-    const label = count === 1 ? '1 Linked Mention' : `${count} Linked Mentions`;
+    this._expanded = false;
+    this._applyExpandState();
+  }
 
-    if (this.countBadge) {
-      this.countBadge.textContent = count > 0 ? String(count) : '';
+  _createPanelRef(panel) {
+    if (!panel) {
+      return null;
     }
 
-    if (this.toggle) {
-      this.toggle.textContent = label;
-    }
+    return {
+      panel,
+      header: panel.querySelector('.backlinks-header'),
+      toggle: panel.querySelector('.backlinks-toggle'),
+      countBadge: panel.querySelector('.backlinks-count'),
+      body: panel.querySelector('.backlinks-body'),
+      list: panel.querySelector('.backlinks-list'),
+    };
+  }
 
-    // Hide entire panel when no current file
-    this.panel.classList.toggle('hidden', !this._currentFile);
+  _render() {
+    const count = this._backlinks.length;
+    const label = count === 1 ? 'Linked Mention' : 'Linked Mentions';
+    const shouldShow = Boolean(this._currentFile) && count > 0;
 
-    // Disable header click when 0 backlinks
-    this.header?.classList.toggle('backlinks-header-empty', count === 0);
+    this.panelRoot?.classList?.toggle('hidden', !shouldShow);
+    this.inlinePanel?.classList?.toggle('hidden', !shouldShow);
 
-    if (count === 0) {
+    if (!shouldShow) {
       this._expanded = false;
-      this._applyExpandState();
-      if (this.list) this.list.innerHTML = '';
-      return;
     }
 
-    this._renderList();
+    this.panels.forEach((refs) => {
+      refs.countBadge.textContent = shouldShow ? String(count) : '';
+      refs.toggle.textContent = label;
+      refs.header?.classList.toggle('backlinks-header-empty', !shouldShow);
+
+      if (!shouldShow) {
+        refs.list.innerHTML = '';
+      } else {
+        this._renderList(refs.list);
+      }
+    });
+
     this._applyExpandState();
   }
 
-  _renderList() {
-    if (!this.list) return;
-    this.list.innerHTML = '';
+  _renderList(listElement) {
+    if (!listElement) return;
+    listElement.innerHTML = '';
 
-    const fragment = document.createDocumentFragment();
+    const fragment = this.documentRef?.createDocumentFragment?.();
+    const target = fragment ?? listElement;
 
-    for (const backlink of this._backlinks) {
-      const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
-      const dirPath = backlink.file.includes('/')
-        ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
-        : '';
+    this._backlinks.forEach((backlink) => {
+      target.appendChild(this._createBacklinkItem(backlink));
+    });
 
-      const item = document.createElement('button');
-      item.type = 'button';
-      item.className = 'backlink-item';
-      item.addEventListener('click', () => {
-        this.onFileSelect?.(backlink.file);
-      });
+    if (fragment) {
+      listElement.appendChild(fragment);
+    }
+  }
 
-      // File name row
-      const nameRow = document.createElement('div');
-      nameRow.className = 'backlink-file-name';
-      nameRow.innerHTML = `
-        <svg class="backlink-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14 2 14 8 20 8"/>
-        </svg>
-        <span>${escapeHtml(fileName)}</span>
-        ${dirPath ? `<span class="backlink-dir">${escapeHtml(dirPath)}</span>` : ''}
-      `;
-      item.appendChild(nameRow);
-
-      // Context snippets
-      for (const ctx of backlink.contexts.slice(0, 3)) {
-        const contextEl = document.createElement('div');
-        contextEl.className = 'backlink-context';
-        contextEl.textContent = ctx;
-        item.appendChild(contextEl);
-      }
+  _createBacklinkItem(backlink) {
+    const fileName = backlink.file.replace(/\.md$/i, '').split('/').pop();
+    const dirPath = backlink.file.includes('/')
+      ? backlink.file.substring(0, backlink.file.lastIndexOf('/'))
+      : '';
+
+    const item = this.documentRef.createElement('button');
+    item.type = 'button';
+    item.className = 'backlink-item';
+    item.addEventListener('click', () => {
+      this.close();
+      this.onFileSelect?.(backlink.file);
+    });
 
-      if (backlink.contexts.length > 3) {
-        const more = document.createElement('div');
-        more.className = 'backlink-context backlink-more';
-        more.textContent = `+${backlink.contexts.length - 3} more`;
-        item.appendChild(more);
-      }
+    const nameRow = this.documentRef.createElement('div');
+    nameRow.className = 'backlink-file-name';
+    nameRow.innerHTML = `
+      <svg class="backlink-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+        <polyline points="14 2 14 8 20 8"/>
+      </svg>
+      <span>${escapeHtml(fileName)}</span>
+      ${dirPath ? `<span class="backlink-dir">${escapeHtml(dirPath)}</span>` : ''}
+    `;
+    item.appendChild(nameRow);
+
+    backlink.contexts.slice(0, 3).forEach((ctx) => {
+      const contextElement = this.documentRef.createElement('div');
+      contextElement.className = 'backlink-context';
+      contextElement.textContent = ctx;
+      item.appendChild(contextElement);
+    });
 
-      fragment.appendChild(item);
+    if (backlink.contexts.length > 3) {
+      const moreElement = this.documentRef.createElement('div');
+      moreElement.className = 'backlink-context backlink-more';
+      moreElement.textContent = `+${backlink.contexts.length - 3} more`;
+      item.appendChild(moreElement);
     }
 
-    this.list.appendChild(fragment);
+    return item;
   }
 
   _applyExpandState() {
-    this.panel?.classList.toggle('expanded', this._expanded);
-    this.header?.setAttribute('aria-expanded', String(this._expanded));
-    this.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));
-    this.body?.setAttribute('aria-hidden', String(!this._expanded));
-
-    if (this.body) {
-      this.body.toggleAttribute('inert', !this._expanded);
-    }
+    const expanded = this._expanded && this._backlinks.length > 0;
+
+    this.panels.forEach((refs) => {
+      refs.panel.classList.toggle('expanded', expanded);
+      refs.header?.setAttribute('aria-expanded', String(expanded));
+      refs.header?.setAttribute('aria-disabled', String(this._backlinks.length === 0));
+      refs.body?.setAttribute('aria-hidden', String(!expanded));
+      refs.body?.toggleAttribute('inert', !expanded);
+    });
   }
 }