collabmd 0.1.45 → 0.1.47

package/src/client/presentation/git-panel-controller.js

@@ -879,7 +879,7 @@ export class GitPanelController {
 
     return `
       ${pullBackupsMarkup}
-      ${sectionMarkup || '<div class="git-panel-empty">No local changes</div>'}
+      ${sectionMarkup || `<div class="git-panel-empty">${this.searchQuery && hasChanges ? 'No changes match your filter.' : 'No local changes'}</div>`}
       ${hasChanges ? `
         <div class="git-panel-footer">
           <div class="git-panel-footer-actions">
@@ -947,7 +947,7 @@ export class GitPanelController {
             class="${buttonClassNames({ variant: 'secondary', size: 'compact', pill: true, surface: true, extra: 'ui-action-pill' })}"
             type="button"
             data-git-sync-action="pull"
-            title="${hasUpstream ? 'Pull remote changes (fast-forward only)' : 'No upstream branch configured'}"
+            title="${hasUpstream ? 'Pull remote changes' : 'No upstream branch configured'}"
             aria-label="Pull branch"
             ${!hasUpstream || isPullPending ? 'disabled' : ''}
           >

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

@@ -9,6 +9,8 @@ export class OutlineController {
     this.activeHeadingId = null;
     this.headings = [];
     this.pinnedHeadingId = null;
+    this.pdfOutline = null;
+    this.onNavigateToPdfOutline = null;
     this.onNavigateToHeading = onNavigateToHeading;
     this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
@@ -81,6 +83,11 @@ export class OutlineController {
       return;
     }
 
+    if (this.pdfOutline) {
+      this.renderPdfOutline();
+      return;
+    }
+
     const previewContent = document.getElementById('previewContent');
     const headings = previewContent?.querySelectorAll('h1, h2, h3, h4, h5, h6') ?? [];
 
@@ -124,6 +131,85 @@ export class OutlineController {
     this.observeHeadings(Array.from(headings));
   }
 
+  setPdfOutline(outline, onNavigate) {
+    this.cleanup();
+    this.pdfOutline = Array.isArray(outline) && outline.length > 0 ? outline : null;
+    this.onNavigateToPdfOutline = this.pdfOutline ? onNavigate : null;
+    this.activeHeadingId = null;
+    this.toggleButton?.classList.toggle('hidden', !this.pdfOutline);
+
+    if (!this.pdfOutline) {
+      this.navigation?.replaceChildren();
+      this.close();
+      return;
+    }
+
+    if (this.outlineOpen) {
+      this.renderPdfOutline();
+    }
+  }
+
+  clearPdfOutline() {
+    this.pdfOutline = null;
+    this.onNavigateToPdfOutline = null;
+    this.activeHeadingId = null;
+    this.pinnedHeadingId = null;
+    this.navigation?.replaceChildren();
+    this.toggleButton?.classList.add('hidden');
+    this.close();
+  }
+
+  renderPdfOutline() {
+    if (!this.navigation || !this.pdfOutline) {
+      return;
+    }
+
+    this.cleanup();
+    this.navigation.replaceChildren();
+    const fragment = document.createDocumentFragment();
+    let itemIndex = 0;
+    const appendItems = (items, level = 1) => {
+      items.forEach((item) => {
+        if (!item || typeof item !== 'object') {
+          return;
+        }
+
+        const title = String(item.title ?? '').trim();
+        if (title) {
+          const id = `pdf-outline-${itemIndex}`;
+          const button = document.createElement('button');
+          button.type = 'button';
+          button.className = 'outline-item';
+          button.dataset.level = String(Math.min(level, 6));
+          button.dataset.target = id;
+          button.title = title;
+          button.textContent = title;
+          button.addEventListener('click', () => {
+            this.setActiveItem(id, { behavior: 'auto' });
+            this.onNavigateToPdfOutline?.(item);
+            if (this.mobileBreakpointQuery.matches) {
+              this.close();
+            }
+          });
+          fragment.appendChild(button);
+          itemIndex += 1;
+        }
+
+        if (Array.isArray(item.items)) {
+          appendItems(item.items, Math.min(level + 1, 6));
+        }
+      });
+    };
+
+    appendItems(this.pdfOutline);
+    if (fragment.childNodes.length === 0) {
+      this.navigation.innerHTML = '<div class="outline-empty">No outline found</div>';
+      return;
+    }
+
+    this.navigation.appendChild(fragment);
+  }
+
   cleanup({ preservePinnedHeading = false } = {}) {
     if (this.activeHeadingFrame) {
       cancelAnimationFrame(this.activeHeadingFrame);

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

@@ -1,5 +1,6 @@
 import { stripVaultFileExtension } from '../../domain/file-kind.js';
 import { escapeHtml } from '../domain/vault-utils.js';
+import { getVaultFileIconSvg } from './file-icon-svg.js';
 import {
   DEFAULT_SEARCH_DEBOUNCE_MS,
   QuickSwitcherTextSearchRunner,
@@ -19,6 +20,7 @@ function getRawFileName(filePath) {
 function createCorpusEntry(filePath) {
   const displayName = stripVaultFileExtension(filePath);
   const fileName = displayName.split('/').pop() || displayName;
+  const rawFileName = getRawFileName(filePath);
 
   return {
     displayName,
@@ -27,6 +29,7 @@ function createCorpusEntry(filePath) {
     lowerDisplayName: displayName.toLowerCase(),
     lowerFileName: fileName.toLowerCase(),
     lowerPath: String(filePath).toLowerCase(),
+    lowerRawFileName: rawFileName.toLowerCase(),
   };
 }
 
@@ -51,7 +54,16 @@ function findFuzzyMatch(text, query) {
   let consecutiveBonus = 0;
 
   for (let index = 0; index < text.length && queryIndex < query.length; index += 1) {
+    if (/\s/u.test(query[queryIndex]) && /[\s/\\_-]/u.test(text[index])) {
+      queryIndex += 1;
+      consecutiveBonus = 0;
+      continue;
+    }
+
     if (text[index] !== query[queryIndex]) {
+      if (queryIndex > 0) {
+        score -= 0.25;
+      }
       consecutiveBonus = 0;
       continue;
     }
@@ -94,6 +106,25 @@ function findCorpusMatch(entry, query) {
     };
   }
 
+  const rawFileIndex = entry.lowerRawFileName.indexOf(query);
+  if (rawFileIndex >= 0) {
+    return {
+      indices: createRangeIndices(
+        rawFileIndex + (entry.displayName.length - entry.fileName.length),
+        query.length,
+      ),
+      score: 40 + (1 / entry.lowerRawFileName.length),
+    };
+  }
+
+  const rawPathIndex = entry.lowerPath.indexOf(query);
+  if (rawPathIndex >= 0) {
+    return {
+      indices: createRangeIndices(rawPathIndex, query.length),
+      score: 25 + (1 / entry.lowerPath.length),
+    };
+  }
+
   return findFuzzyMatch(entry.lowerDisplayName, query);
 }
 
@@ -171,10 +202,15 @@ export class QuickSwitcherController {
     this.hint = document.getElementById('quickSwitcherHint');
     this.scope = document.getElementById('quickSwitcherScope');
     this.modeTabs = Array.from(document.querySelectorAll?.('[data-qs-mode]') ?? []);
+    const searchConfig = this.getSearchConfig?.() ?? {};
+    const textTab = this.modeTabs.find((tab) => tab.dataset.qsMode === 'text');
+    if (textTab && searchConfig.available === false) {
+      textTab.disabled = true;
+      textTab.setAttribute('title', searchConfig.unavailableReason || 'Text search is unavailable');
+    }
 
     this.filteredFiles = [];
     this.fileMatches = new Map();
-    this.fileNameCounts = new Map();
     this.fileMatchCount = 0;
     this.fileResultsTruncated = false;
     this.fileCorpus = [];
@@ -198,9 +234,32 @@ export class QuickSwitcherController {
       if (e.target === this.overlay) this.close();
     });
 
-    this.modeTabs.forEach((tab) => {
+    this.overlay?.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.close();
+      }
+    });
+
+    this.modeTabs.forEach((tab, index) => {
       tab.addEventListener('click', () => {
         this.setMode(tab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+        this.input?.focus?.();
+      });
+      tab.addEventListener('keydown', (event) => {
+        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+          return;
+        }
+
+        event.preventDefault();
+        const nextIndex = (index + (event.key === 'ArrowRight' ? 1 : -1) + this.modeTabs.length)
+          % this.modeTabs.length;
+        const nextTab = this.modeTabs[nextIndex];
+        if (nextTab.disabled) {
+          return;
+        }
+        this.setMode(nextTab.dataset.qsMode === 'text' ? 'text' : 'files', { preserveInput: true });
+        nextTab.focus();
       });
     });
 
@@ -222,13 +281,9 @@ export class QuickSwitcherController {
           e.preventDefault();
           this.confirmSelection();
           break;
-        case 'Escape':
-          e.preventDefault();
-          this.close();
-          break;
         case 'Tab':
           e.preventDefault();
-          if (this.modeTabs.length > 1 && !e.shiftKey) {
+          if (this.modeTabs.filter((tab) => !tab.disabled).length > 1 && !e.shiftKey) {
             this.setMode(this.mode === 'files' ? 'text' : 'files', { preserveInput: true });
           } else {
             this.moveSelection(e.shiftKey ? -1 : 1);
@@ -248,6 +303,7 @@ export class QuickSwitcherController {
     this.selectedTextIndex = 0;
     this.overlay.classList.add('visible');
     this.overlay.setAttribute('aria-hidden', 'false');
+    this.input?.setAttribute('aria-expanded', 'true');
     this.setMode('files', { preserveInput: true });
 
     // The overlay transitions visibility hidden→visible over 120ms.
@@ -304,6 +360,7 @@ export class QuickSwitcherController {
     this.isOpen = false;
     this.overlay.classList.remove('visible');
     this.overlay.setAttribute('aria-hidden', 'true');
+    this.input?.setAttribute('aria-expanded', 'false');
     this.input.value = '';
     this.resultsList.innerHTML = '';
     this.setActiveDescendant('');
@@ -323,7 +380,8 @@ export class QuickSwitcherController {
   }
 
   setMode(mode = 'files', { preserveInput = false } = {}) {
-    const normalizedMode = mode === 'text' ? 'text' : 'files';
+    const textTab = this.modeTabs.find((tab) => tab.dataset.qsMode === 'text');
+    const normalizedMode = mode === 'text' && !textTab?.disabled ? 'text' : 'files';
     this.mode = normalizedMode;
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
@@ -336,6 +394,7 @@ export class QuickSwitcherController {
       const isActive = tab.dataset.qsMode === normalizedMode;
       tab.classList.toggle('active', isActive);
       tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      tab.setAttribute('tabindex', isActive ? '0' : '-1');
     });
 
     this.scope?.classList.toggle('hidden', normalizedMode !== 'text');
@@ -365,16 +424,12 @@ export class QuickSwitcherController {
   }
 
   filterFiles() {
-    const query = this.input?.value.trim().toLowerCase() ?? '';
+    this.resultsList?.setAttribute('aria-busy', 'false');
+    const query = this.input?.value.trim().toLowerCase().replace(/\s+/gu, ' ') ?? '';
     const allFiles = this.getFileList?.() ?? [];
     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();
@@ -495,20 +550,16 @@ export class QuickSwitcherController {
       item.setAttribute('aria-selected', index === this.selectedIndex ? 'true' : 'false');
       item.dataset.index = String(index);
 
-      const fileName = getFileName(filePath);
-      const rawFileName = getRawFileName(filePath);
+      const fileName = 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">${highlightText(displayFileName, matchIndices.fileName)}</span>
-        ${dirPath ? `<span class="qs-result-path">${highlightText(dirPath, matchIndices.dirPath)}</span>` : ''}
+        ${getVaultFileIconSvg(filePath, { className: 'qs-result-icon' })}
+        <span class="qs-result-name">${highlightText(fileName, matchIndices.fileName)}</span>
+        ${dirPath ? `<span class="qs-result-path" title="${escapeHtml(dirPath)}">${highlightText(dirPath, matchIndices.dirPath)}</span>` : ''}
       `;
 
       item.addEventListener('click', () => {

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

@@ -1,4 +1,4 @@
-export const DEFAULT_SEARCH_DEBOUNCE_MS = 220;
+export const DEFAULT_SEARCH_DEBOUNCE_MS = 300;
 const TEXT_RESULT_LIMIT = 50;
 
 export function formatMatchCount(count = 0, { truncated = false } = {}) {

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

@@ -25,13 +25,23 @@
   white-space: nowrap;
 }
 
-.toolbar-theme-icon {
+.toolbar-theme-icon,
+.toolbar-vim-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
+.toolbar-vim-button .toolbar-vim-state {
+  margin-left: auto;
+}
+
+.toolbar-vim-button[aria-pressed='true'] .toolbar-vim-state {
+  background: var(--color-primary-highlight);
+  color: var(--color-primary);
+}
+
 .toolbar-theme-button {
   width: 32px;
   min-width: 32px;

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

@@ -524,6 +524,82 @@ body.excalidraw-maximized-open .resizer {
   color: var(--color-primary);
 }
 
+.file-tree-file.is-pdf .file-tree-icon {
+  color: var(--color-danger);
+}
+
 .file-tree-file.is-mermaid .file-tree-icon {
   color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
 }
+
+.file-tree-file.is-structurizr .file-tree-icon {
+  color: var(--color-primary);
+}
+
+.structurizr-preview-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.structurizr-preview-header {
+  flex-shrink: 0;
+}
+
+.structurizr-preview-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.structurizr-preview-status {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--color-divider);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.structurizr-preview-status.is-error {
+  background: var(--color-error-highlight);
+  color: var(--color-error);
+}
+
+.structurizr-preview-stage {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.structurizr-preview-iframe {
+  display: block;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  background: var(--color-surface);
+}
+
+.structurizr-preview-shell.is-maximized {
+  position: fixed;
+  inset: var(--space-4);
+  z-index: 172;
+  width: auto !important;
+  height: auto !important;
+  max-width: none;
+  box-shadow: 0 0 0 9999px var(--surface-scrim), var(--shadow-media-modal);
+}
+
+body.structurizr-maximized-open {
+  overflow: hidden;
+}