collabmd 0.1.49 → 0.1.52

package/src/client/presentation/file-history-view-controller.js

@@ -230,7 +230,13 @@ export class FileHistoryViewController {
     };
   }
 
+  ensureDeferredGitStyles() {
+    this._deferredGitStylesPromise ??= import('../styles/deferred-git.css').catch(() => {});
+    return this._deferredGitStylesPromise;
+  }
+
   async openFileHistory({ filePath }) {
+    void this.ensureDeferredGitStyles();
     this.isActive = true;
     this.currentFilePath = String(filePath ?? '').trim() || null;
     this.localChanges = null;

package/src/client/presentation/git-diff-view-controller.js

@@ -22,8 +22,9 @@ function getDiffFileKind(file = null) {
 
 function getImageFormat(filePath = '') {
   const normalizedPath = String(filePath ?? '').toLowerCase();
-  const extension = Object.keys(IMAGE_MIME_LABELS).find((candidate) => normalizedPath.endsWith(candidate));
-  return extension ? IMAGE_MIME_LABELS[extension] : 'Image';
+  const dotIndex = normalizedPath.lastIndexOf('.');
+  const extension = dotIndex >= 0 ? normalizedPath.slice(dotIndex) : '';
+  return IMAGE_MIME_LABELS[extension] ?? 'Image';
 }
 
 function parseExcalidrawScene(rawSource = '') {

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

@@ -229,12 +229,12 @@ export class GitPanelController {
     if (this._handleFileSelectionClick(event)) return;
 
     const pullBackupButton = event.target instanceof Element
-      ? event.target.closest('[data-git-pull-backup-path]')
+      ? event.target.closest('[data-git-pull-backup-id]')
       : null;
     if (pullBackupButton) {
-      const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
-      if (summaryPath) {
-        this.onOpenPullBackup(summaryPath);
+      const backupId = pullBackupButton.getAttribute('data-git-pull-backup-id');
+      if (backupId) {
+        this.onOpenPullBackup(backupId);
       }
       return;
     }
@@ -296,8 +296,8 @@ export class GitPanelController {
       this.stopStatusPolling();
       return;
     }
-
     this.syncSearchUi();
+    void import('../styles/deferred-git.css');
     void this.refresh({ force: false, includeHistory: this.panelMode === 'history' });
     if (this.panelMode === 'changes') {
       this.ensureStatusPolling();
@@ -722,7 +722,8 @@ export class GitPanelController {
         <button
           class="ui-item-main git-file-item"
           type="button"
-          data-git-pull-backup-path="${escapeHtml(backup.summaryPath || '')}"
+          title="Open read-only pull backup summary in a new tab"
+          data-git-pull-backup-id="${escapeHtml(backup.id || '')}"
         >
           ${fileIconSvg()}
           <span class="ui-item-copy git-file-copy">

package/src/client/presentation/hosted-workspace-gate-controller.js

@@ -0,0 +1,180 @@
+import { createFragment, escapeHtml } from '../domain/vault-utils.js';
+
+export class HostedWorkspaceGateController {
+  constructor({ apiClient, appRoot = null, gate, runtimeConfig, teamSettingsController }) {
+    this.apiClient = apiClient;
+    this.appRoot = appRoot;
+    this.gate = gate;
+    this.content = gate?.querySelector('[data-hosted-gate-content]') ?? null;
+    this.teamSettingsController = teamSettingsController;
+    this.enabled = runtimeConfig.hosted?.enabled === true;
+    this.accessGrantedPromise = new Promise((resolve) => {
+      this.resolveAccessGranted = resolve;
+    });
+    this.gate?.addEventListener('click', (event) => void this.handleClick(event));
+    this.gate?.addEventListener('submit', (event) => void this.handleSubmit(event));
+  }
+
+  async initialize() {
+    if (!this.enabled) {
+      this.hide();
+      return;
+    }
+    await this.refresh();
+    await this.accessGrantedPromise;
+  }
+
+  async refresh() {
+    this.show('Loading workspace…');
+    let status;
+    try {
+      status = await this.apiClient.getStatus();
+    } catch (error) {
+      if (error.status === 401 || error.code === 'HOSTED_AUTH_REQUIRED') {
+        this.show('Sign in to access this workspace.', { title: 'Sign-in required' });
+      } else {
+        this.show(error.message || 'Failed to load workspace status.', { error: true, title: 'Workspace unavailable' });
+      }
+      this.teamSettingsController?.setTriggerVisible(false);
+      return;
+    }
+    this.applyStatus(status);
+  }
+
+  applyStatus(status) {
+    const membership = status.membership ?? null;
+    const isAdmin = membership?.role === 'admin';
+    this.teamSettingsController?.setTriggerVisible(Boolean(isAdmin && status.setupComplete));
+    if (!status.claimed) {
+      this.renderClaim();
+      return;
+    }
+    if (!status.setupComplete) {
+      if (isAdmin) {
+        this.renderSetup(status);
+      } else {
+        this.show('Workspace setup is incomplete. Ask a Team Admin to finish setup.', { title: status.team?.name || 'Workspace setup' });
+      }
+      return;
+    }
+    if (!membership) {
+      this.renderAccept(status);
+      return;
+    }
+    this.hide();
+    this.resolveAccessGranted();
+  }
+
+  hide() {
+    this.gate?.classList.add('hidden');
+    this.content?.replaceChildren();
+    if (this.appRoot) this.appRoot.inert = false;
+  }
+
+  reveal() {
+    if (!this.gate) return;
+    this.gate.classList.remove('hidden');
+    if (this.appRoot) this.appRoot.inert = true;
+    this.content?.querySelector('button, input, select')?.focus?.();
+  }
+
+  render(markup) {
+    if (!this.gate || !this.content) return;
+    this.content.replaceChildren(createFragment(markup));
+    this.reveal();
+  }
+
+  show(message, { error = false, title = 'Workspace' } = {}) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(title)}</h2>
+      <p class="hosted-gate-status${error ? ' is-error' : ''}" role="status">${escapeHtml(message)}</p>
+    `);
+  }
+
+  renderClaim() {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">Claim this workspace</h2>
+      <p class="hosted-gate-copy">Enter the team name and the one-time claim token from provisioning to become the first Team Admin.</p>
+      <form class="hosted-gate-form" data-claim-form>
+        <label class="app-dialog-field">
+          <span class="app-dialog-label">Team name</span>
+          <input class="ui-input" name="teamName" maxlength="80" autocomplete="off" spellcheck="false" required>
+        </label>
+        <label class="app-dialog-field">
+          <span class="app-dialog-label">Claim token</span>
+          <input class="ui-input" name="token" type="password" autocomplete="off" spellcheck="false" required>
+        </label>
+        <button class="ui-button ui-button--primary" type="submit">Claim workspace</button>
+      </form>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  renderSetup(status) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(status.team?.name || 'Workspace setup')}</h2>
+      <p class="hosted-gate-copy">Workspace setup is not complete. The editor and invitations stay unavailable until setup is done. Connecting a GitHub vault source comes later; for now, completing setup unlocks team management.</p>
+      <button class="ui-button ui-button--primary" type="button" data-complete-setup>Complete setup</button>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  renderAccept(status) {
+    this.render(`
+      <h2 class="hosted-gate-title" id="hostedGateTitle">${escapeHtml(status.team?.name || 'Workspace')}</h2>
+      <p class="hosted-gate-copy">You are signed in but not a team member yet. If a Team Admin invited your Google email, accept below to join.</p>
+      <button class="ui-button ui-button--primary" type="button" data-accept-invitation>Accept invitation</button>
+      <p class="hosted-gate-live" role="status" aria-live="polite"></p>
+    `);
+  }
+
+  setLiveMessage(message) {
+    const live = this.content?.querySelector('.hosted-gate-live');
+    if (live) live.textContent = message;
+  }
+
+  async handleClick(event) {
+    const target = event.target.closest('button');
+    if (!target) return;
+    if (target.dataset.completeSetup != null) {
+      target.disabled = true;
+      try {
+        await this.apiClient.completeSetup();
+        await this.refresh();
+      } catch (error) {
+        this.setLiveMessage(error.message || 'Failed to complete setup');
+        target.disabled = false;
+      }
+      return;
+    }
+    if (target.dataset.acceptInvitation != null) {
+      target.disabled = true;
+      try {
+        await this.apiClient.acceptInvitation();
+        await this.refresh();
+      } catch (error) {
+        this.setLiveMessage(error.message || 'No pending invitation was found for your account.');
+        target.disabled = false;
+      }
+    }
+  }
+
+  async handleSubmit(event) {
+    const form = event.target.closest('[data-claim-form]');
+    if (!form) return;
+    event.preventDefault();
+    const data = new FormData(form);
+    const submit = form.querySelector('[type="submit"]');
+    submit.disabled = true;
+    try {
+      await this.apiClient.claimWorkspace({
+        teamName: String(data.get('teamName') ?? '').trim(),
+        token: String(data.get('token') ?? ''),
+      });
+      await this.refresh();
+    } catch (error) {
+      this.setLiveMessage(error.message || 'Failed to claim workspace');
+      submit.disabled = false;
+    }
+  }
+}

package/src/client/presentation/image-lightbox-controller.js

@@ -78,6 +78,8 @@ export class ImageLightboxController {
     this.resetButton = null;
     this.previouslyFocusedElement = null;
     this.blockingModalHandler = () => this.close();
+    this.listenerController = new AbortController();
+    const { signal } = this.listenerController;
 
     this.handlePreviewClick = (event) => {
       const target = event.target;
@@ -131,15 +133,14 @@ export class ImageLightboxController {
       this.syncTransform();
     };
 
-    this.previewElement?.addEventListener('click', this.handlePreviewClick);
-    this.document.addEventListener('keydown', this.handleKeyDown);
-    this.window.addEventListener('resize', this.handleWindowResize);
+    this.previewElement?.addEventListener('click', this.handlePreviewClick, { signal });
+    this.document.addEventListener('keydown', this.handleKeyDown, { signal });
+    this.window.addEventListener('resize', this.handleWindowResize, { signal });
   }
 
   destroy() {
-    this.previewElement?.removeEventListener('click', this.handlePreviewClick);
-    this.document.removeEventListener('keydown', this.handleKeyDown);
-    this.window.removeEventListener('resize', this.handleWindowResize);
+    this.listenerController?.abort();
+    this.listenerController = null;
     this.close();
     this.overlayRoot?.remove();
     this.overlayRoot = null;

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

@@ -2,12 +2,19 @@ export class LayoutController {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onMeasureEditor,
+    onPreferredViewChange = null,
+    onViewChange = null,
     onViewRequest = null,
+    preferredView = 'split',
   }) {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.onMeasureEditor = onMeasureEditor;
+    this.onPreferredViewChange = onPreferredViewChange;
+    this.onViewChange = onViewChange;
     this.onViewRequest = onViewRequest;
-    this.preferredView = 'split';
+    this.preferredView = preferredView === 'editor' || preferredView === 'preview' || preferredView === 'split'
+      ? preferredView
+      : 'split';
     this.mobileShowsEditor = !this.isMobileViewport();
     this.currentView = this.mobileShowsEditor ? this.preferredView : 'preview';
     this.editorLayout = document.getElementById('editorLayout');
@@ -78,6 +85,7 @@ export class LayoutController {
     this.currentView = view;
     this.editorLayout?.setAttribute('data-view', view);
     this.syncViewButtons();
+    this.onViewChange?.(view);
   }
 
   setView(view, { persist = true } = {}) {
@@ -87,6 +95,7 @@ export class LayoutController {
 
     if (persist) {
       this.preferredView = view;
+      this.onPreferredViewChange?.(view);
     }
 
     this.applyView(view);

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

@@ -9,8 +9,6 @@ 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');
@@ -83,11 +81,6 @@ 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') ?? [];
 
@@ -131,85 +124,6 @@ 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

@@ -11,6 +11,7 @@ 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-';
+export const FILE_FILTER_DEBOUNCE_MS = 150;
 
 function getRawFileName(filePath) {
   return String(filePath ?? '').split('/').pop() || String(filePath ?? '');
@@ -94,7 +95,13 @@ export class QuickSwitcherController {
     this.fileMatchCount = 0;
     this.fileResultsTruncated = false;
     this.fileCorpus = [];
+    this.fileCorpusByPath = new Map();
     this.lastFileListRef = null;
+    this.lastFileMetadataRef = null;
+    this.cachedModifiedTimes = new Map();
+    this.lastRecentFilesRef = null;
+    this.cachedRecentRanks = new Map();
+    this.fileFilterTimer = null;
     this.selectedIndex = 0;
     this.selectedTextIndex = 0;
     this.isOpen = false;
@@ -136,7 +143,13 @@ export class QuickSwitcherController {
     });
 
     this.input?.addEventListener('input', () => {
-      this.handleInput();
+      if (this.mode === 'text') {
+        this.handleInput();
+        return;
+      }
+
+      this.abortTextSearch();
+      this.scheduleFileFilter();
     });
 
     this.input?.addEventListener('keydown', (e) => {
@@ -166,6 +179,8 @@ export class QuickSwitcherController {
   }
 
   handleClose() {
+    clearTimeout(this.fileFilterTimer);
+    this.fileFilterTimer = null;
     this.abortTextSearch();
     this.isOpen = false;
     this.input?.setAttribute('aria-expanded', 'false');
@@ -245,27 +260,48 @@ export class QuickSwitcherController {
     this.filterFiles();
   }
 
+  scheduleFileFilter() {
+    clearTimeout(this.fileFilterTimer);
+    this.fileFilterTimer = setTimeout(() => {
+      this.fileFilterTimer = null;
+      if (this.isOpen && this.mode === 'files') {
+        this.filterFiles();
+      }
+    }, FILE_FILTER_DEBOUNCE_MS);
+  }
+
   filterFiles() {
+    clearTimeout(this.fileFilterTimer);
+    this.fileFilterTimer = null;
     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) => createFileSearchEntry(filePath));
+      this.fileCorpusByPath = new Map(this.fileCorpus.map((entry) => [entry.filePath, entry]));
     }
 
     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,
-      ]),
-    );
+    if (fileMetadata !== this.lastFileMetadataRef) {
+      this.lastFileMetadataRef = fileMetadata;
+      this.cachedModifiedTimes = new Map(
+        (Array.isArray(fileMetadata) ? fileMetadata : []).map((entry) => [
+          entry?.path,
+          Number.isFinite(Number(entry?.mtimeMs)) ? Number(entry.mtimeMs) : 0,
+        ]),
+      );
+    }
+    const modifiedTimes = this.cachedModifiedTimes;
     const recentFiles = this.getRecentFiles?.() ?? [];
-    const recentRanks = new Map(
-      (Array.isArray(recentFiles) ? recentFiles : []).map((filePath, index) => [filePath, index]),
-    );
+    if (recentFiles !== this.lastRecentFilesRef) {
+      this.lastRecentFilesRef = recentFiles;
+      this.cachedRecentRanks = new Map(
+        (Array.isArray(recentFiles) ? recentFiles : []).map((filePath, index) => [filePath, index]),
+      );
+    }
+    const recentRanks = this.cachedRecentRanks;
     if (!query) {
       this.filteredFiles = [...this.fileCorpus]
         .sort((left, right) => {
@@ -293,6 +329,7 @@ export class QuickSwitcherController {
         this.fileMatches.set(entry.filePath, match);
         const rankedEntry = {
           filePath: entry.filePath,
+          lowerPath: entry.lowerPath,
           recentRank: recentRanks.get(entry.filePath) ?? NO_RECENT_FILE_RANK,
           score: match.score,
         };
@@ -306,7 +343,7 @@ export class QuickSwitcherController {
                 rankedEntry.recentRank < current.recentRank
                 || (
                   rankedEntry.recentRank === current.recentRank
-                  && entry.lowerPath < String(current.filePath).toLowerCase()
+                  && rankedEntry.lowerPath < current.lowerPath
                 )
               )
             );
@@ -372,10 +409,10 @@ export class QuickSwitcherController {
       item.setAttribute('aria-selected', index === this.selectedIndex ? 'true' : 'false');
       item.dataset.index = String(index);
 
+      const corpusEntry = this.fileCorpusByPath.get(filePath);
       const fileName = getRawFileName(filePath);
-      const dirPath = getDirPath(filePath);
+      const dirPath = corpusEntry ? corpusEntry.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 svg = getVaultFileIconSvg(filePath, { className: 'qs-result-icon' });