collabmd 0.1.44 → 0.1.45

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

@@ -7,7 +7,14 @@ import {
   formatMatchCount,
 } from './quick-switcher-text-search.js';
 
-const MAX_VISIBLE_RESULTS = 12;
+const MAX_VISIBLE_RESULTS = 30;
+const NO_RECENT_FILE_RANK = Number.MAX_SAFE_INTEGER;
+const FILE_RESULT_ID_PREFIX = 'quick-switcher-file-';
+const TEXT_RESULT_ID_PREFIX = 'quick-switcher-text-';
+
+function getRawFileName(filePath) {
+  return String(filePath ?? '').split('/').pop() || String(filePath ?? '');
+}
 
 function createCorpusEntry(filePath) {
   const displayName = stripVaultFileExtension(filePath);
@@ -33,9 +40,116 @@ function getDirPath(filePath) {
   return displayName.includes('/') ? displayName.substring(0, displayName.lastIndexOf('/')) : '';
 }
 
+function createRangeIndices(start, length) {
+  return Array.from({ length }, (_, index) => start + index);
+}
+
+function findFuzzyMatch(text, query) {
+  const indices = [];
+  let queryIndex = 0;
+  let score = 0;
+  let consecutiveBonus = 0;
+
+  for (let index = 0; index < text.length && queryIndex < query.length; index += 1) {
+    if (text[index] !== query[queryIndex]) {
+      consecutiveBonus = 0;
+      continue;
+    }
+
+    queryIndex += 1;
+    indices.push(index);
+    consecutiveBonus += 1;
+    score += consecutiveBonus;
+
+    if (
+      index === 0
+      || text[index - 1] === '/'
+      || text[index - 1] === '-'
+      || text[index - 1] === '_'
+      || text[index - 1] === ' '
+    ) {
+      score += 5;
+    }
+  }
+
+  return queryIndex === query.length && score > 0
+    ? { indices, score }
+    : null;
+}
+
+function findCorpusMatch(entry, query) {
+  const fileIndex = entry.lowerFileName.indexOf(query);
+  if (fileIndex >= 0) {
+    return {
+      indices: createRangeIndices(fileIndex + (entry.displayName.length - entry.fileName.length), query.length),
+      score: 100 + (1 / entry.fileName.length),
+    };
+  }
+
+  const pathIndex = entry.lowerDisplayName.indexOf(query);
+  if (pathIndex >= 0) {
+    return {
+      indices: createRangeIndices(pathIndex, query.length),
+      score: 50 + (1 / entry.displayName.length),
+    };
+  }
+
+  return findFuzzyMatch(entry.lowerDisplayName, query);
+}
+
+function splitMatchIndices(entry, indices = []) {
+  const fileNameStart = entry.displayName.length - entry.fileName.length;
+  return {
+    dirPath: indices.filter((index) => index < fileNameStart),
+    fileName: indices
+      .filter((index) => index >= fileNameStart)
+      .map((index) => index - fileNameStart),
+  };
+}
+
+function highlightText(text, indices = []) {
+  if (indices.length === 0) {
+    return escapeHtml(text);
+  }
+
+  const matchedIndices = new Set(indices);
+  let result = '';
+  let runStart = null;
+  let cursor = 0;
+
+  const appendRun = (runEnd) => {
+    result += escapeHtml(text.slice(cursor, runStart));
+    result += `<mark>${escapeHtml(text.slice(runStart, runEnd + 1))}</mark>`;
+    cursor = runEnd + 1;
+    runStart = null;
+  };
+
+  for (let index = 0; index < text.length; index += 1) {
+    if (!matchedIndices.has(index)) {
+      if (runStart !== null) {
+        appendRun(index - 1);
+      }
+      continue;
+    }
+
+    if (runStart === null) {
+      runStart = index;
+    }
+  }
+
+  if (runStart !== null) {
+    appendRun(text.length - 1);
+  }
+
+  result += escapeHtml(text.slice(cursor));
+  return result;
+}
+
 export class QuickSwitcherController {
   constructor({
     getFileList,
+    getFileMetadata = () => [],
+    getRecentFiles = () => [],
     getSearchConfig = () => ({}),
     onFileSelect,
     onTextMatchSelect = null,
@@ -43,6 +157,8 @@ export class QuickSwitcherController {
     searchText = null,
   }) {
     this.getFileList = getFileList;
+    this.getFileMetadata = getFileMetadata;
+    this.getRecentFiles = getRecentFiles;
     this.getSearchConfig = getSearchConfig;
     this.onFileSelect = onFileSelect;
     this.onTextMatchSelect = onTextMatchSelect;
@@ -53,14 +169,20 @@ export class QuickSwitcherController {
     this.input = document.getElementById('quickSwitcherInput');
     this.resultsList = document.getElementById('quickSwitcherResults');
     this.hint = document.getElementById('quickSwitcherHint');
+    this.scope = document.getElementById('quickSwitcherScope');
     this.modeTabs = Array.from(document.querySelectorAll?.('[data-qs-mode]') ?? []);
 
     this.filteredFiles = [];
+    this.fileMatches = new Map();
+    this.fileNameCounts = new Map();
+    this.fileMatchCount = 0;
+    this.fileResultsTruncated = false;
     this.fileCorpus = [];
     this.lastFileListRef = null;
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
     this.isOpen = false;
+    this.previousActiveElement = null;
     this.mode = 'files';
     this.textResults = null;
     this.textResultItems = [];
@@ -119,11 +241,13 @@ export class QuickSwitcherController {
   open() {
     if (!this.overlay) return;
 
+    this.previousActiveElement = document.activeElement;
     this.isOpen = true;
     this.input.value = '';
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
     this.overlay.classList.add('visible');
+    this.overlay.setAttribute('aria-hidden', 'false');
     this.setMode('files', { preserveInput: true });
 
     // The overlay transitions visibility hidden→visible over 120ms.
@@ -171,15 +295,23 @@ export class QuickSwitcherController {
     }
   }
 
-  close() {
+  close({ restoreFocus = true } = {}) {
     if (!this.overlay) return;
 
+    const previousActiveElement = this.previousActiveElement;
     this._cancelPendingFocus();
     this.abortTextSearch();
     this.isOpen = false;
     this.overlay.classList.remove('visible');
+    this.overlay.setAttribute('aria-hidden', 'true');
     this.input.value = '';
     this.resultsList.innerHTML = '';
+    this.setActiveDescendant('');
+    this.previousActiveElement = null;
+
+    if (restoreFocus) {
+      previousActiveElement?.focus?.();
+    }
   }
 
   toggle() {
@@ -206,10 +338,17 @@ export class QuickSwitcherController {
       tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
     });
 
+    this.scope?.classList.toggle('hidden', normalizedMode !== 'text');
+    this.scope?.setAttribute('aria-hidden', normalizedMode === 'text' ? 'false' : 'true');
+
     if (this.input) {
       this.input.placeholder = normalizedMode === 'text'
         ? 'Search text in files...'
         : 'Search files...';
+      this.input.setAttribute(
+        'aria-label',
+        normalizedMode === 'text' ? 'Search text in files' : 'Search files',
+      );
     }
 
     this.handleInput();
@@ -231,25 +370,70 @@ export class QuickSwitcherController {
     if (allFiles !== this.lastFileListRef) {
       this.lastFileListRef = allFiles;
       this.fileCorpus = allFiles.map((filePath) => createCorpusEntry(filePath));
+      this.fileNameCounts = new Map();
+      this.fileCorpus.forEach((entry) => {
+        const count = this.fileNameCounts.get(entry.lowerFileName) ?? 0;
+        this.fileNameCounts.set(entry.lowerFileName, count + 1);
+      });
     }
 
+    this.fileMatches.clear();
+    const fileMetadata = this.getFileMetadata?.() ?? [];
+    const modifiedTimes = new Map(
+      (Array.isArray(fileMetadata) ? fileMetadata : []).map((entry) => [
+        entry?.path,
+        Number.isFinite(Number(entry?.mtimeMs)) ? Number(entry.mtimeMs) : 0,
+      ]),
+    );
+    const recentFiles = this.getRecentFiles?.() ?? [];
+    const recentRanks = new Map(
+      (Array.isArray(recentFiles) ? recentFiles : []).map((filePath, index) => [filePath, index]),
+    );
     if (!query) {
-      this.filteredFiles = this.fileCorpus
+      this.filteredFiles = [...this.fileCorpus]
+        .sort((left, right) => {
+          const modifiedDelta = (modifiedTimes.get(right.filePath) ?? 0) - (modifiedTimes.get(left.filePath) ?? 0);
+          if (modifiedDelta !== 0) {
+            return modifiedDelta;
+          }
+
+          return (recentRanks.get(left.filePath) ?? NO_RECENT_FILE_RANK)
+            - (recentRanks.get(right.filePath) ?? NO_RECENT_FILE_RANK);
+        })
         .slice(0, MAX_VISIBLE_RESULTS)
         .map((entry) => entry.filePath);
+      this.fileMatchCount = this.fileCorpus.length;
     } else {
       const ranked = [];
+      let fileMatchCount = 0;
       this.fileCorpus.forEach((entry) => {
-        const score = this.fuzzyScore(entry, query);
-        if (score <= 0) {
+        const match = findCorpusMatch(entry, query);
+        if (!match) {
           return;
         }
 
-        const rankedEntry = { filePath: entry.filePath, score };
+        fileMatchCount += 1;
+        this.fileMatches.set(entry.filePath, match);
+        const rankedEntry = {
+          filePath: entry.filePath,
+          recentRank: recentRanks.get(entry.filePath) ?? NO_RECENT_FILE_RANK,
+          score: match.score,
+        };
         let inserted = false;
         for (let index = 0; index < ranked.length; index += 1) {
           const current = ranked[index];
-          if (score > current.score || (score === current.score && entry.lowerPath < String(current.filePath).toLowerCase())) {
+          const isBetter = rankedEntry.score > current.score
+            || (
+              rankedEntry.score === current.score
+              && (
+                rankedEntry.recentRank < current.recentRank
+                || (
+                  rankedEntry.recentRank === current.recentRank
+                  && entry.lowerPath < String(current.filePath).toLowerCase()
+                )
+              )
+            );
+          if (isBetter) {
             ranked.splice(index, 0, rankedEntry);
             inserted = true;
             break;
@@ -266,45 +450,20 @@ export class QuickSwitcherController {
       });
 
       this.filteredFiles = ranked.map((entry) => entry.filePath);
+      this.fileMatchCount = fileMatchCount;
     }
 
+    this.fileResultsTruncated = this.fileMatchCount > MAX_VISIBLE_RESULTS;
     this.selectedIndex = 0;
     this.renderResults(query);
   }
 
-  fuzzyScore(entry, query) {
-    const name = entry.lowerDisplayName;
-    const nameOnly = entry.lowerFileName;
-
-    if (nameOnly.includes(query)) return 100 + (1 / nameOnly.length);
-    if (name.includes(query)) return 50 + (1 / name.length);
-
-    let queryIndex = 0;
-    let score = 0;
-    let consecutiveBonus = 0;
-
-    for (let i = 0; i < name.length && queryIndex < query.length; i++) {
-      if (name[i] === query[queryIndex]) {
-        queryIndex++;
-        consecutiveBonus += 1;
-        score += consecutiveBonus;
-
-        if (i === 0 || name[i - 1] === '/' || name[i - 1] === '-' || name[i - 1] === '_' || name[i - 1] === ' ') {
-          score += 5;
-        }
-      } else {
-        consecutiveBonus = 0;
-      }
-    }
-
-    return queryIndex === query.length ? score : 0;
-  }
-
   renderResults(query) {
     if (!this.resultsList) return;
     this.resultsList.innerHTML = '';
 
     if (this.filteredFiles.length === 0) {
+      this.setActiveDescendant('');
       if (this.hint) {
         this.hint.textContent = query ? 'No files found' : 'No files in vault';
         this.hint.classList.remove('hidden');
@@ -313,7 +472,13 @@ export class QuickSwitcherController {
     }
 
     if (this.hint) {
-      this.hint.classList.add('hidden');
+      const hint = this.fileResultsTruncated
+        ? query
+          ? `Showing the top ${MAX_VISIBLE_RESULTS} of ${this.fileMatchCount} matches. Refine the query to narrow results.`
+          : `Showing the first ${MAX_VISIBLE_RESULTS} of ${this.fileMatchCount} files.`
+        : '';
+      this.hint.textContent = hint;
+      this.hint.classList.toggle('hidden', !hint);
     }
 
     const fragment = document.createDocumentFragment();
@@ -325,15 +490,25 @@ export class QuickSwitcherController {
       if (index === this.selectedIndex) {
         item.classList.add('selected');
       }
+      item.id = `${FILE_RESULT_ID_PREFIX}${index}`;
+      item.setAttribute('role', 'option');
+      item.setAttribute('aria-selected', index === this.selectedIndex ? 'true' : 'false');
       item.dataset.index = String(index);
 
       const fileName = getFileName(filePath);
+      const rawFileName = getRawFileName(filePath);
       const dirPath = getDirPath(filePath);
+      const match = this.fileMatches.get(filePath);
+      const corpusEntry = this.fileCorpus.find((entry) => entry.filePath === filePath);
+      const matchIndices = corpusEntry ? splitMatchIndices(corpusEntry, match?.indices) : { dirPath: [], fileName: [] };
+      const displayFileName = (this.fileNameCounts.get(fileName.toLowerCase()) ?? 0) > 1
+        ? rawFileName
+        : fileName;
 
       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>
-        <span class="qs-result-name">${this.highlightMatch(fileName, query)}</span>
-        ${dirPath ? `<span class="qs-result-path">${escapeHtml(dirPath)}</span>` : ''}
+        <span class="qs-result-name">${highlightText(displayFileName, matchIndices.fileName)}</span>
+        ${dirPath ? `<span class="qs-result-path">${highlightText(dirPath, matchIndices.dirPath)}</span>` : ''}
       `;
 
       item.addEventListener('click', () => {
@@ -350,32 +525,7 @@ export class QuickSwitcherController {
     });
 
     this.resultsList.appendChild(fragment);
-  }
-
-  highlightMatch(text, query) {
-    if (!query) return escapeHtml(text);
-
-    const lower = text.toLowerCase();
-    const idx = lower.indexOf(query);
-
-    if (idx >= 0) {
-      const before = text.slice(0, idx);
-      const match = text.slice(idx, idx + query.length);
-      const after = text.slice(idx + query.length);
-      return `${escapeHtml(before)}<mark>${escapeHtml(match)}</mark>${escapeHtml(after)}`;
-    }
-
-    let result = '';
-    let queryIdx = 0;
-    for (let i = 0; i < text.length; i++) {
-      if (queryIdx < query.length && text[i].toLowerCase() === query[queryIdx]) {
-        result += `<mark>${escapeHtml(text[i])}</mark>`;
-        queryIdx++;
-      } else {
-        result += escapeHtml(text[i]);
-      }
-    }
-    return result;
+    this.updateSelection();
   }
 
   abortTextSearch({ invalidate = true } = {}) {
@@ -406,6 +556,8 @@ export class QuickSwitcherController {
   renderTextState(message) {
     if (!this.resultsList) return;
     this.resultsList.innerHTML = '';
+    this.resultsList.setAttribute('aria-busy', message === 'Searching...' ? 'true' : 'false');
+    this.setActiveDescendant('');
     if (this.hint) {
       this.hint.textContent = message;
       this.hint.classList.remove('hidden');
@@ -415,17 +567,20 @@ export class QuickSwitcherController {
   renderTextResults(query = '') {
     if (!this.resultsList) return;
     this.resultsList.innerHTML = '';
+    this.resultsList.setAttribute('aria-busy', 'false');
 
     if (!this.textResults?.files?.length || this.textResultItems.length === 0) {
+      this.setActiveDescendant('');
       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 hint = this.textResults.truncated
+        ? `Showing partial results: ${this.textResults.files.length} files and ${formatMatchCount(this.textResults.matchCount, { truncated: true })}. Refine the query to narrow results.`
         : '';
+      this.hint.textContent = hint;
+      this.hint.classList.toggle('hidden', !hint);
     }
 
     const fragment = document.createDocumentFragment();
@@ -434,13 +589,15 @@ export class QuickSwitcherController {
     this.textResults.files.forEach((fileGroup) => {
       const group = document.createElement('section');
       group.className = 'qs-text-group';
+      group.setAttribute('role', 'group');
+      group.setAttribute('aria-label', fileGroup.file);
 
       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>
+        <span class="qs-text-count">${escapeHtml(formatMatchCount(fileGroup.matchCount, { truncated: fileGroup.truncated }))}</span>
       `;
       group.appendChild(header);
 
@@ -452,6 +609,9 @@ export class QuickSwitcherController {
         if (itemIndex === this.selectedTextIndex) {
           item.classList.add('selected');
         }
+        item.id = `${TEXT_RESULT_ID_PREFIX}${itemIndex}`;
+        item.setAttribute('role', 'option');
+        item.setAttribute('aria-selected', itemIndex === this.selectedTextIndex ? 'true' : 'false');
         item.dataset.textIndex = String(itemIndex);
         item.innerHTML = `
           <span class="qs-text-line">L${escapeHtml(String(snippet.line ?? 1))}</span>
@@ -473,6 +633,7 @@ export class QuickSwitcherController {
     });
 
     this.resultsList.appendChild(fragment);
+    this.updateSelection();
   }
 
   highlightSnippet(snippet = {}) {
@@ -501,25 +662,35 @@ export class QuickSwitcherController {
     if (this.mode === 'text') {
       const items = this.resultsList.querySelectorAll('.qs-text-item');
       items.forEach((item, i) => {
-        item.classList.toggle('selected', i === this.selectedTextIndex);
+        const isSelected = i === this.selectedTextIndex;
+        item.classList.toggle('selected', isSelected);
+        item.setAttribute('aria-selected', isSelected ? 'true' : 'false');
       });
       items[this.selectedTextIndex]?.scrollIntoView({ block: 'nearest' });
+      this.setActiveDescendant(items[this.selectedTextIndex]?.id ?? '');
       return;
     }
 
     const items = this.resultsList.querySelectorAll('.qs-result-item');
     items.forEach((item, i) => {
-      item.classList.toggle('selected', i === this.selectedIndex);
+      const isSelected = i === this.selectedIndex;
+      item.classList.toggle('selected', isSelected);
+      item.setAttribute('aria-selected', isSelected ? 'true' : 'false');
     });
 
     items[this.selectedIndex]?.scrollIntoView({ block: 'nearest' });
+    this.setActiveDescendant(items[this.selectedIndex]?.id ?? '');
+  }
+
+  setActiveDescendant(id = '') {
+    this.input?.setAttribute('aria-activedescendant', id);
   }
 
   confirmSelection() {
     if (this.mode === 'text') {
       const match = this.textResultItems[this.selectedTextIndex];
       if (match) {
-        this.close();
+        this.close({ restoreFocus: false });
         this.onTextMatchSelect?.(match);
       }
       return;
@@ -527,7 +698,7 @@ export class QuickSwitcherController {
 
     const filePath = this.filteredFiles[this.selectedIndex];
     if (filePath) {
-      this.close();
+      this.close({ restoreFocus: false });
       this.onFileSelect?.(filePath);
     }
   }

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

@@ -1,9 +1,9 @@
 export const DEFAULT_SEARCH_DEBOUNCE_MS = 220;
 const TEXT_RESULT_LIMIT = 50;
 
-export function formatMatchCount(count = 0) {
+export function formatMatchCount(count = 0, { truncated = false } = {}) {
   const normalized = Number(count) || 0;
-  return `${normalized} ${normalized === 1 ? 'match' : 'matches'}`;
+  return `${normalized}${truncated ? '+' : ''} ${normalized === 1 ? 'match' : 'matches'}`;
 }
 
 export function flattenTextResults(payload = {}) {

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

@@ -16,6 +16,9 @@ export class ToastController {
       : 0;
     const toast = document.createElement('div');
     toast.className = 'toast';
+    if (typeof normalizedOptions.tone === 'string' && normalizedOptions.tone) {
+      toast.dataset.tone = normalizedOptions.tone;
+    }
     const content = document.createElement('span');
     content.className = 'toast__message';
     content.textContent = message;

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

@@ -32,6 +32,12 @@
     display 300ms cubic-bezier(0.16, 1, 0.3, 1) allow-discrete;
 }
 
+.toast[data-tone='warning'] {
+  border-color: var(--border-warning-toast);
+  background: var(--surface-warning-toast);
+  color: var(--text-warning-toast);
+}
+
 .toast__message {
   flex: 1 1 auto;
   min-width: 0;