collabmd 0.1.39 → 0.1.40

package/src/client/presentation/quick-switcher-controller.js

@@ -1,5 +1,11 @@
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import {
+  DEFAULT_SEARCH_DEBOUNCE_MS,
+  QuickSwitcherTextSearchRunner,
+  flattenTextResults,
+  formatMatchCount,
+} from './quick-switcher-text-search.js';
 
 const MAX_VISIBLE_RESULTS = 12;
 
@@ -21,21 +27,49 @@ function createCorpusEntry(filePath) {
   };
 }
 
+function getFileName(filePath) {
+  return stripDisplayExtension(filePath).split('/').pop() || stripDisplayExtension(filePath);
+}
+
+function getDirPath(filePath) {
+  const displayName = stripDisplayExtension(filePath);
+  return displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
+}
+
 export class QuickSwitcherController {
-  constructor({ getFileList, onFileSelect }) {
+  constructor({
+    getFileList,
+    getSearchConfig = () => ({}),
+    onFileSelect,
+    onTextMatchSelect = null,
+    searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS,
+    searchText = null,
+  }) {
     this.getFileList = getFileList;
+    this.getSearchConfig = getSearchConfig;
     this.onFileSelect = onFileSelect;
+    this.onTextMatchSelect = onTextMatchSelect;
+    this.searchDebounceMs = searchDebounceMs;
+    this.searchText = searchText;
 
     this.overlay = document.getElementById('quickSwitcher');
     this.input = document.getElementById('quickSwitcherInput');
     this.resultsList = document.getElementById('quickSwitcherResults');
     this.hint = document.getElementById('quickSwitcherHint');
+    this.modeTabs = Array.from(document.querySelectorAll?.('[data-qs-mode]') ?? []);
 
     this.filteredFiles = [];
     this.fileCorpus = [];
     this.lastFileListRef = null;
     this.selectedIndex = 0;
+    this.selectedTextIndex = 0;
     this.isOpen = false;
+    this.mode = 'files';
+    this.textResults = null;
+    this.textResultItems = [];
+    this.textSearchRunner = new QuickSwitcherTextSearchRunner({
+      debounceMs: this.searchDebounceMs,
+    });
 
     this.bindEvents();
   }
@@ -45,8 +79,14 @@ export class QuickSwitcherController {
       if (e.target === this.overlay) this.close();
     });
 
+    this.modeTabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        this.setMode(tab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+      });
+    });
+
     this.input?.addEventListener('input', () => {
-      this.filterFiles();
+      this.handleInput();
     });
 
     this.input?.addEventListener('keydown', (e) => {
@@ -69,7 +109,11 @@ export class QuickSwitcherController {
           break;
         case 'Tab':
           e.preventDefault();
-          this.moveSelection(e.shiftKey ? -1 : 1);
+          if (this.modeTabs.length > 1 && !e.shiftKey) {
+            this.setMode(this.mode === 'files' ? 'text' : 'files', { preserveInput: true });
+          } else {
+            this.moveSelection(e.shiftKey ? -1 : 1);
+          }
           break;
       }
     });
@@ -81,8 +125,9 @@ export class QuickSwitcherController {
     this.isOpen = true;
     this.input.value = '';
     this.selectedIndex = 0;
+    this.selectedTextIndex = 0;
     this.overlay.classList.add('visible');
-    this.filterFiles();
+    this.setMode('files', { preserveInput: true });
 
     // The overlay transitions visibility hidden→visible over 120ms.
     // Browsers ignore .focus() while the element is still visibility:hidden,
@@ -92,19 +137,16 @@ export class QuickSwitcherController {
 
   /** Focus the input once the overlay visibility transition finishes. */
   _focusAfterTransition() {
-    // Clean up any previous pending focus attempt
     this._cancelPendingFocus();
 
     const tryFocus = () => {
       this._focusCleanup = null;
       this.input?.focus();
-      // Verify focus actually landed — if not, try once more
       if (this.isOpen && this.input && document.activeElement !== this.input) {
         setTimeout(() => this.input?.focus(), 50);
       }
     };
 
-    // Primary: listen for transitionend on the overlay
     const onEnd = (e) => {
       if (e.propertyName === 'visibility' || e.propertyName === 'opacity') {
         this.overlay.removeEventListener('transitionend', onEnd);
@@ -114,8 +156,6 @@ export class QuickSwitcherController {
     };
     this.overlay.addEventListener('transitionend', onEnd);
 
-    // Fallback: if transitionend never fires (e.g. transition skipped),
-    // focus after a delay that exceeds the 120ms CSS transition.
     const fallbackTimer = setTimeout(() => {
       this.overlay.removeEventListener('transitionend', onEnd);
       tryFocus();
@@ -138,6 +178,7 @@ export class QuickSwitcherController {
     if (!this.overlay) return;
 
     this._cancelPendingFocus();
+    this.abortTextSearch();
     this.isOpen = false;
     this.overlay.classList.remove('visible');
     this.input.value = '';
@@ -152,6 +193,41 @@ export class QuickSwitcherController {
     }
   }
 
+  setMode(mode = 'files', { preserveInput = false } = {}) {
+    const normalizedMode = mode === 'text' ? 'text' : 'files';
+    this.mode = normalizedMode;
+    this.selectedIndex = 0;
+    this.selectedTextIndex = 0;
+
+    if (!preserveInput && this.input) {
+      this.input.value = '';
+    }
+
+    this.modeTabs.forEach((tab) => {
+      const isActive = tab.dataset.qsMode === normalizedMode;
+      tab.classList.toggle('active', isActive);
+      tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+    });
+
+    if (this.input) {
+      this.input.placeholder = normalizedMode === 'text'
+        ? 'Search text in files...'
+        : 'Search files...';
+    }
+
+    this.handleInput();
+  }
+
+  handleInput() {
+    if (this.mode === 'text') {
+      this.scheduleTextSearch();
+      return;
+    }
+
+    this.abortTextSearch();
+    this.filterFiles();
+  }
+
   filterFiles() {
     const query = this.input?.value.trim().toLowerCase() ?? '';
     const allFiles = this.getFileList?.() ?? [];
@@ -203,13 +279,9 @@ export class QuickSwitcherController {
     const name = entry.lowerDisplayName;
     const nameOnly = entry.lowerFileName;
 
-    // Exact substring match in filename gets highest score
     if (nameOnly.includes(query)) return 100 + (1 / nameOnly.length);
-
-    // Exact substring in full path
     if (name.includes(query)) return 50 + (1 / name.length);
 
-    // Fuzzy character-by-character match
     let queryIndex = 0;
     let score = 0;
     let consecutiveBonus = 0;
@@ -220,7 +292,6 @@ export class QuickSwitcherController {
         consecutiveBonus += 1;
         score += consecutiveBonus;
 
-        // Bonus for matching at word boundaries
         if (i === 0 || name[i - 1] === '/' || name[i - 1] === '-' || name[i - 1] === '_' || name[i - 1] === ' ') {
           score += 5;
         }
@@ -259,9 +330,8 @@ export class QuickSwitcherController {
       }
       item.dataset.index = String(index);
 
-      const displayName = stripDisplayExtension(filePath);
-      const fileName = displayName.split('/').pop();
-      const dirPath = displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
+      const fileName = getFileName(filePath);
+      const dirPath = getDirPath(filePath);
 
       item.innerHTML = `
         <svg class="qs-result-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>
@@ -298,7 +368,6 @@ export class QuickSwitcherController {
       return `${escapeHtml(before)}<mark>${escapeHtml(match)}</mark>${escapeHtml(after)}`;
     }
 
-    // Fuzzy highlight
     let result = '';
     let queryIdx = 0;
     for (let i = 0; i < text.length; i++) {
@@ -312,7 +381,118 @@ export class QuickSwitcherController {
     return result;
   }
 
+  abortTextSearch({ invalidate = true } = {}) {
+    this.textSearchRunner.abort({ invalidate });
+  }
+
+  scheduleTextSearch() {
+    const query = this.input?.value.trim() ?? '';
+    const searchConfig = this.getSearchConfig?.() ?? {};
+
+    this.textResults = null;
+    this.textResultItems = [];
+    this.textSearchRunner.schedule({
+      isActive: () => this.isOpen && this.mode === 'text',
+      onResults: (result, searchedQuery) => {
+        this.textResults = result;
+        this.textResultItems = flattenTextResults(result);
+        this.selectedTextIndex = 0;
+        this.renderTextResults(searchedQuery);
+      },
+      onState: (message) => this.renderTextState(message),
+      query,
+      searchConfig,
+      searchText: this.searchText,
+    });
+  }
+
+  renderTextState(message) {
+    if (!this.resultsList) return;
+    this.resultsList.innerHTML = '';
+    if (this.hint) {
+      this.hint.textContent = message;
+      this.hint.classList.remove('hidden');
+    }
+  }
+
+  renderTextResults(query = '') {
+    if (!this.resultsList) return;
+    this.resultsList.innerHTML = '';
+
+    if (!this.textResults?.files?.length || this.textResultItems.length === 0) {
+      this.renderTextState(query ? 'No text matches found' : 'Type to search file text');
+      return;
+    }
+
+    if (this.hint) {
+      this.hint.classList.toggle('hidden', !this.textResults.truncated);
+      this.hint.textContent = this.textResults.truncated
+        ? 'Showing the first matches. Refine the query to narrow results.'
+        : '';
+    }
+
+    const fragment = document.createDocumentFragment();
+    let flatIndex = 0;
+
+    this.textResults.files.forEach((fileGroup) => {
+      const group = document.createElement('section');
+      group.className = 'qs-text-group';
+
+      const header = document.createElement('div');
+      header.className = 'qs-text-group-header';
+      header.innerHTML = `
+        <span class="qs-text-file-name">${escapeHtml(getFileName(fileGroup.file))}</span>
+        <span class="qs-text-file-meta">${escapeHtml(getDirPath(fileGroup.file))}</span>
+        <span class="qs-text-count">${escapeHtml(formatMatchCount(fileGroup.matchCount))}</span>
+      `;
+      group.appendChild(header);
+
+      (fileGroup.snippets ?? []).forEach((snippet) => {
+        const itemIndex = flatIndex;
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.className = 'qs-text-item';
+        if (itemIndex === this.selectedTextIndex) {
+          item.classList.add('selected');
+        }
+        item.dataset.textIndex = String(itemIndex);
+        item.innerHTML = `
+          <span class="qs-text-line">L${escapeHtml(String(snippet.line ?? 1))}</span>
+          <span class="qs-text-snippet">${this.highlightSnippet(snippet)}</span>
+        `;
+        item.addEventListener('click', () => {
+          this.selectedTextIndex = itemIndex;
+          this.confirmSelection();
+        });
+        item.addEventListener('mouseenter', () => {
+          this.selectedTextIndex = itemIndex;
+          this.updateSelection();
+        });
+        group.appendChild(item);
+        flatIndex += 1;
+      });
+
+      fragment.appendChild(group);
+    });
+
+    this.resultsList.appendChild(fragment);
+  }
+
+  highlightSnippet(snippet = {}) {
+    const text = String(snippet.text ?? '');
+    const start = Math.min(Math.max(Number(snippet.matchStart) || 0, 0), text.length);
+    const end = Math.min(Math.max(Number(snippet.matchEnd) || start, start), text.length);
+    return `${escapeHtml(text.slice(0, start))}<mark>${escapeHtml(text.slice(start, end))}</mark>${escapeHtml(text.slice(end))}`;
+  }
+
   moveSelection(delta) {
+    if (this.mode === 'text') {
+      if (this.textResultItems.length === 0) return;
+      this.selectedTextIndex = (this.selectedTextIndex + delta + this.textResultItems.length) % this.textResultItems.length;
+      this.updateSelection();
+      return;
+    }
+
     if (this.filteredFiles.length === 0) return;
     this.selectedIndex = (this.selectedIndex + delta + this.filteredFiles.length) % this.filteredFiles.length;
     this.updateSelection();
@@ -321,17 +501,33 @@ export class QuickSwitcherController {
   updateSelection() {
     if (!this.resultsList) return;
 
+    if (this.mode === 'text') {
+      const items = this.resultsList.querySelectorAll('.qs-text-item');
+      items.forEach((item, i) => {
+        item.classList.toggle('selected', i === this.selectedTextIndex);
+      });
+      items[this.selectedTextIndex]?.scrollIntoView({ block: 'nearest' });
+      return;
+    }
+
     const items = this.resultsList.querySelectorAll('.qs-result-item');
     items.forEach((item, i) => {
       item.classList.toggle('selected', i === this.selectedIndex);
     });
 
-    // Scroll selected item into view
-    const selectedItem = items[this.selectedIndex];
-    selectedItem?.scrollIntoView({ block: 'nearest' });
+    items[this.selectedIndex]?.scrollIntoView({ block: 'nearest' });
   }
 
   confirmSelection() {
+    if (this.mode === 'text') {
+      const match = this.textResultItems[this.selectedTextIndex];
+      if (match) {
+        this.close();
+        this.onTextMatchSelect?.(match);
+      }
+      return;
+    }
+
     const filePath = this.filteredFiles[this.selectedIndex];
     if (filePath) {
       this.close();

package/src/client/presentation/quick-switcher-text-search.js

@@ -0,0 +1,125 @@
+export const DEFAULT_SEARCH_DEBOUNCE_MS = 220;
+const TEXT_RESULT_LIMIT = 50;
+
+export function formatMatchCount(count = 0) {
+  const normalized = Number(count) || 0;
+  return `${normalized} ${normalized === 1 ? 'match' : 'matches'}`;
+}
+
+export function flattenTextResults(payload = {}) {
+  const flattened = [];
+  (payload.files ?? []).forEach((fileGroup) => {
+    (fileGroup.snippets ?? []).forEach((snippet) => {
+      flattened.push({
+        column: snippet.column,
+        file: fileGroup.file,
+        kind: fileGroup.kind,
+        line: snippet.line,
+        matchLength: Math.max((snippet.matchEnd ?? 0) - (snippet.matchStart ?? 0), 0),
+        snippet,
+      });
+    });
+  });
+  return flattened;
+}
+
+export class QuickSwitcherTextSearchRunner {
+  constructor({
+    debounceMs = DEFAULT_SEARCH_DEBOUNCE_MS,
+    resultLimit = TEXT_RESULT_LIMIT,
+  } = {}) {
+    this.debounceMs = debounceMs;
+    this.resultLimit = resultLimit;
+    this.controller = null;
+    this.timer = null;
+    this.token = 0;
+  }
+
+  abort({ invalidate = true } = {}) {
+    clearTimeout(this.timer);
+    this.timer = null;
+    if (invalidate) {
+      this.token += 1;
+    }
+    this.controller?.abort();
+    this.controller = null;
+  }
+
+  schedule({
+    isActive = () => true,
+    onResults,
+    onState,
+    query = '',
+    searchConfig = {},
+    searchText = null,
+  } = {}) {
+    const minQueryLength = Math.max(Number(searchConfig.minQueryLength) || 2, 1);
+
+    this.abort();
+
+    if (!searchConfig.available) {
+      onState?.('Global text search requires ripgrep on the server.');
+      return;
+    }
+
+    if (!searchText) {
+      onState?.('Global text search is unavailable.');
+      return;
+    }
+
+    if (query.length < minQueryLength) {
+      onState?.(`Type at least ${minQueryLength} characters to search file text.`);
+      return;
+    }
+
+    onState?.('Searching...');
+    this.timer = setTimeout(() => {
+      void this.run({
+        isActive,
+        onResults,
+        onState,
+        query,
+        searchText,
+      });
+    }, this.debounceMs);
+  }
+
+  async run({
+    isActive = () => true,
+    onResults,
+    onState,
+    query = '',
+    searchText,
+  } = {}) {
+    const token = this.token + 1;
+    this.token = token;
+    const controller = new AbortController();
+    this.controller = controller;
+    const isCurrent = () => (
+      isActive()
+      && token === this.token
+      && this.controller === controller
+    );
+
+    try {
+      const result = await searchText({
+        limit: this.resultLimit,
+        query,
+        signal: controller.signal,
+      });
+      if (isCurrent()) {
+        onResults?.(result, query);
+      }
+    } catch (error) {
+      if (error?.name === 'AbortError' || !isCurrent()) {
+        return;
+      }
+
+      onState?.(error?.body?.error || error?.message || 'Failed to search file text.');
+    } finally {
+      if (this.controller === controller) {
+        this.controller = null;
+      }
+    }
+  }
+}

package/src/client/styles/features/diagram-preview.css

@@ -276,11 +276,21 @@
   margin-right: auto;
 }
 
-.drawio-maximized-root {
+.drawio-embed-overlay-root {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.drawio-embed-placeholder.is-hydrated {
+  visibility: hidden;
+}
+
+.drawio-embed-overlay-root.has-maximized-entry {
   position: fixed;
   inset: 0;
   z-index: 171;
-  pointer-events: none;
 }
 
 body.drawio-maximized-open {
@@ -288,15 +298,10 @@ body.drawio-maximized-open {
 }
 
 body.drawio-maximized-open::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: 170;
-  background: var(--surface-scrim);
-  backdrop-filter: blur(2px);
+  content: none;
 }
 
-.drawio-maximized-root .drawio-embed.is-maximized {
+body.drawio-maximized-open .drawio-embed.is-maximized {
   pointer-events: auto;
 }
 
@@ -311,7 +316,13 @@ body.drawio-maximized-open::before {
   margin: 0;
   box-sizing: border-box;
   border-radius: var(--radius-lg-plus);
-  box-shadow: var(--shadow-media-modal);
+  box-shadow: 0 0 0 9999px var(--surface-scrim), var(--shadow-media-modal);
+}
+
+.preview-content.is-drawio-file-preview .drawio-embed.is-maximized {
+  width: auto !important;
+  height: auto !important;
+  min-height: 0;
 }
 
 .drawio-embed.is-maximized .drawio-embed-header {
@@ -330,6 +341,20 @@ body.drawio-maximized-open::before {
   align-items: stretch;
 }
 
+.drawio-embed.is-maximized.is-static-preview .drawio-viewer-shell {
+  align-items: center;
+  justify-content: center;
+}
+
+.drawio-embed.is-maximized.is-static-preview .drawio-viewer-frame {
+  flex: 0 0 auto !important;
+  width: auto;
+  height: auto;
+  margin: auto !important;
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .excalidraw-embed-overlay-root {
   position: absolute;
   inset: 0;
@@ -337,11 +362,10 @@ body.drawio-maximized-open::before {
   pointer-events: none;
 }
 
-.excalidraw-maximized-root {
+.excalidraw-embed-overlay-root.has-maximized-entry {
   position: fixed;
   inset: 0;
   z-index: 171;
-  pointer-events: none;
 }
 
 .excalidraw-warm-cache-root {
@@ -359,16 +383,7 @@ body.excalidraw-maximized-open {
 }
 
 body.excalidraw-maximized-open::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  z-index: 170;
-  background: var(--surface-scrim);
-  backdrop-filter: blur(2px);
-}
-
-body.excalidraw-maximized-open .excalidraw-maximized-root {
-  z-index: 171;
+  content: none;
 }
 
 body.excalidraw-maximized-open .resizer {
@@ -446,7 +461,12 @@ body.excalidraw-maximized-open .resizer {
   margin: 0;
   box-sizing: border-box;
   border-radius: var(--radius-lg-plus);
-  box-shadow: var(--shadow-media-modal);
+  box-shadow: 0 0 0 9999px var(--surface-scrim), var(--shadow-media-modal);
+}
+
+.excalidraw-maximize-spacer {
+  pointer-events: none;
+  visibility: hidden;
 }
 
 .excalidraw-embed.is-maximized .excalidraw-embed-header {