collabmd 0.1.18 → 0.1.20

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

@@ -87,6 +87,7 @@ export class GitPanelController {
   constructor({
     enabled = true,
     onCommitStaged = () => {},
+    onOpenPullBackup = () => {},
     onPullBranch = () => {},
     onPushBranch = () => {},
     onRepoChange = () => {},
@@ -100,6 +101,7 @@ export class GitPanelController {
   } = {}) {
     this.enabled = enabled;
     this.onCommitStaged = onCommitStaged;
+    this.onOpenPullBackup = onOpenPullBackup;
     this.onPullBranch = onPullBranch;
     this.onPushBranch = onPushBranch;
     this.onRepoChange = onRepoChange;
@@ -111,6 +113,7 @@ export class GitPanelController {
     this.searchInput = searchInput;
     this.toastController = toastController;
     this.panel = document.getElementById('gitPanel');
+    this.pullBackups = [];
     this.status = null;
     this.active = false;
     this.refreshTimer = null;
@@ -147,6 +150,18 @@ export class GitPanelController {
         return;
       }
 
+      const pullBackupButton = event.target instanceof Element
+        ? event.target.closest('[data-git-pull-backup-path]')
+        : null;
+      if (pullBackupButton) {
+        const summaryPath = pullBackupButton.getAttribute('data-git-pull-backup-path');
+        if (!summaryPath) {
+          return;
+        }
+        this.onOpenPullBackup(summaryPath);
+        return;
+      }
+
       const actionButton = event.target instanceof Element
         ? event.target.closest('[data-git-file-action]')
         : null;
@@ -243,6 +258,7 @@ export class GitPanelController {
         sections: [],
         summary: { changedFiles: 0 },
       };
+      this.pullBackups = [];
       this.onRepoChange(false, this.status);
       this.render();
       return this.status;
@@ -256,6 +272,19 @@ export class GitPanelController {
       }
 
       this.status = data;
+      this.pullBackups = [];
+      if (data.isGitRepo) {
+        try {
+          const backupResponse = await fetch(resolveApiUrl('/git/pull-backups'));
+          const backupData = await backupResponse.json();
+          if (!backupResponse.ok) {
+            throw new Error(backupData.error || 'Failed to load pull backups');
+          }
+          this.pullBackups = Array.isArray(backupData.backups) ? backupData.backups : [];
+        } catch (backupError) {
+          console.error('[git-panel] Failed to load pull backups:', backupError);
+        }
+      }
       this.onRepoChange(Boolean(data.isGitRepo), data);
       this.render();
       return data;
@@ -267,6 +296,7 @@ export class GitPanelController {
         sections: [],
         summary: { changedFiles: 0 },
       };
+      this.pullBackups = [];
       this.onRepoChange(false, this.status);
       this.render();
       return this.status;
@@ -367,6 +397,47 @@ export class GitPanelController {
     `;
   }
 
+  renderPullBackupsSection() {
+    if (!Array.isArray(this.pullBackups) || this.pullBackups.length === 0) {
+      return '';
+    }
+
+    return `
+      <section class="git-section">
+        <button class="git-section-header" type="button" data-git-section-toggle="pull-backups">
+          ${chevronSvg(this.collapsedSections.has('pull-backups'))}
+          Pull Backups
+          <span class="git-section-count">${this.pullBackups.length}</span>
+        </button>
+        <div class="git-file-list${this.collapsedSections.has('pull-backups') ? ' hidden' : ''}">
+          ${this.pullBackups.map((backup) => this.renderPullBackup(backup)).join('')}
+        </div>
+      </section>
+    `;
+  }
+
+  renderPullBackup(backup) {
+    const createdAt = String(backup?.createdAt || '').replace('T', ' ').replace(/\.\d+Z?$/u, 'Z');
+    const fileCount = Number(backup?.fileCount || 0);
+
+    return `
+      <div class="git-file-row">
+        <button
+          class="git-file-item"
+          type="button"
+          data-git-pull-backup-path="${escapeHtml(backup.summaryPath || '')}"
+        >
+          ${fileIconSvg()}
+          <span class="git-file-copy">
+            <span class="git-file-name">Pull backup ${escapeHtml(backup.id || '')}</span>
+            <span class="git-file-path">${escapeHtml(`${createdAt} · ${backup.branch || 'HEAD'} · ${fileCount} file${fileCount === 1 ? '' : 's'}`)}</span>
+          </span>
+          <span class="git-status-badge modified">BK</span>
+        </button>
+      </div>
+    `;
+  }
+
   renderFile(file) {
     const isActive = this.selection.path === file.path && this.selection.scope === file.scope;
     const dirPath = getPathDir(file.path);
@@ -449,6 +520,7 @@ export class GitPanelController {
     }
 
     const branch = this.status.branch ?? {};
+    const pullBackupsMarkup = this.renderPullBackupsSection();
     const sectionMarkup = (this.status.sections ?? [])
       .map((section) => this.renderSection(section))
       .filter(Boolean)
@@ -492,6 +564,7 @@ export class GitPanelController {
           </button>
         </div>
       </div>
+      ${pullBackupsMarkup}
       ${sectionMarkup || '<div class="git-panel-empty">No local changes</div>'}
       ${hasChanges ? `
         <div class="git-panel-footer">

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

@@ -0,0 +1,394 @@
+const MIN_SCALE = 1;
+const MAX_SCALE = 6;
+const ZOOM_STEP = 0.25;
+const CLICK_ZOOM_SCALE = 2;
+const DRAG_THRESHOLD_PX = 6;
+
+export function clampImageLightboxScale(value) {
+  const numericValue = Number(value);
+  if (!Number.isFinite(numericValue)) {
+    return MIN_SCALE;
+  }
+
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, Math.round(numericValue * 100) / 100));
+}
+
+export function clampImageLightboxOffset(offset, {
+  contentSize = 0,
+  scale = 1,
+  viewportSize = 0,
+} = {}) {
+  const numericOffset = Number(offset);
+  const numericContentSize = Number(contentSize);
+  const numericScale = Number(scale);
+  const numericViewportSize = Number(viewportSize);
+
+  if (
+    !Number.isFinite(numericOffset)
+    || !Number.isFinite(numericContentSize)
+    || !Number.isFinite(numericScale)
+    || !Number.isFinite(numericViewportSize)
+  ) {
+    return 0;
+  }
+
+  const overflow = ((numericContentSize * numericScale) - numericViewportSize) / 2;
+  if (overflow <= 0) {
+    return 0;
+  }
+
+  return Math.min(Math.max(numericOffset, -overflow), overflow);
+}
+
+export class ImageLightboxController {
+  constructor({
+    previewElement,
+    documentRef = document,
+    windowRef = window,
+  }) {
+    this.previewElement = previewElement;
+    this.document = documentRef;
+    this.window = windowRef;
+    this.overlayRoot = null;
+    this.viewport = null;
+    this.imageElement = null;
+    this.zoomLabel = null;
+    this.titleElement = null;
+    this.isOpen = false;
+    this.scale = MIN_SCALE;
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.activePointerId = null;
+    this.dragStartX = 0;
+    this.dragStartY = 0;
+    this.dragOriginX = 0;
+    this.dragOriginY = 0;
+    this.didDrag = false;
+    this.resetButton = null;
+
+    this.handlePreviewClick = (event) => {
+      const target = event.target;
+      if (!(target instanceof this.window.Element)) {
+        return;
+      }
+
+      const image = target.closest('img');
+      if (!image || !this.previewElement?.contains(image)) {
+        return;
+      }
+
+      if (image.closest('[data-video-overlay-root="true"], [data-excalidraw-overlay-root="true"]')) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopImmediatePropagation?.();
+      this.openFromImage(image);
+    };
+
+    this.handleKeyDown = (event) => {
+      if (!this.isOpen) {
+        return;
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        this.close();
+        return;
+      }
+
+      if (event.key === '+' || event.key === '=') {
+        event.preventDefault();
+        this.zoomBy(ZOOM_STEP);
+        return;
+      }
+
+      if (event.key === '-') {
+        event.preventDefault();
+        this.zoomBy(-ZOOM_STEP);
+        return;
+      }
+
+      if (event.key === '0') {
+        event.preventDefault();
+        this.resetView();
+      }
+    };
+
+    this.handleWindowResize = () => {
+      if (!this.isOpen) {
+        return;
+      }
+
+      this.clampOffsets();
+      this.syncTransform();
+    };
+
+    this.previewElement?.addEventListener('click', this.handlePreviewClick);
+    this.document.addEventListener('keydown', this.handleKeyDown);
+    this.window.addEventListener('resize', this.handleWindowResize);
+  }
+
+  destroy() {
+    this.previewElement?.removeEventListener('click', this.handlePreviewClick);
+    this.document.removeEventListener('keydown', this.handleKeyDown);
+    this.window.removeEventListener('resize', this.handleWindowResize);
+    this.close();
+    this.overlayRoot?.remove();
+    this.overlayRoot = null;
+    this.viewport = null;
+    this.imageElement = null;
+    this.zoomLabel = null;
+    this.titleElement = null;
+    this.resetButton = null;
+  }
+
+  openFromImage(image) {
+    const src = image?.currentSrc || image?.getAttribute?.('src') || '';
+    if (!src) {
+      return false;
+    }
+
+    this.ensureOverlayRoot();
+    this.resetView();
+    this.titleElement.textContent = image.getAttribute('alt') || 'Image preview';
+    this.imageElement.src = src;
+    this.imageElement.alt = image.getAttribute('alt') || '';
+    this.overlayRoot.hidden = false;
+    this.isOpen = true;
+    this.document.body.classList.add('image-lightbox-open');
+    this.syncTransform();
+    this.overlayRoot.focus?.();
+    return true;
+  }
+
+  close() {
+    if (!this.isOpen && !this.overlayRoot) {
+      return;
+    }
+
+    this.activePointerId = null;
+    this.didDrag = false;
+    this.viewport?.classList?.remove('is-dragging');
+    if (this.overlayRoot) {
+      this.overlayRoot.hidden = true;
+    }
+    this.isOpen = false;
+    this.document.body.classList.remove('image-lightbox-open');
+  }
+
+  resetView() {
+    this.scale = MIN_SCALE;
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.syncTransform();
+  }
+
+  zoomBy(delta) {
+    this.setScale(this.scale + delta);
+  }
+
+  setScale(nextScale) {
+    this.scale = clampImageLightboxScale(nextScale);
+    this.clampOffsets();
+    this.syncTransform();
+  }
+
+  clampOffsets() {
+    if (!this.viewport || !this.imageElement) {
+      this.offsetX = 0;
+      this.offsetY = 0;
+      return;
+    }
+
+    this.offsetX = clampImageLightboxOffset(this.offsetX, {
+      contentSize: this.imageElement.offsetWidth || 0,
+      scale: this.scale,
+      viewportSize: this.viewport.clientWidth || 0,
+    });
+    this.offsetY = clampImageLightboxOffset(this.offsetY, {
+      contentSize: this.imageElement.offsetHeight || 0,
+      scale: this.scale,
+      viewportSize: this.viewport.clientHeight || 0,
+    });
+  }
+
+  syncTransform() {
+    if (!this.imageElement) {
+      return;
+    }
+
+    this.imageElement.style.transform = `translate3d(${this.offsetX}px, ${this.offsetY}px, 0) scale(${this.scale})`;
+    this.imageElement.style.cursor = this.scale > MIN_SCALE ? 'grab' : 'zoom-in';
+    if (this.zoomLabel) {
+      this.zoomLabel.textContent = `${Math.round(this.scale * 100)}%`;
+    }
+    if (this.resetButton) {
+      this.resetButton.disabled = this.scale <= MIN_SCALE && this.offsetX === 0 && this.offsetY === 0;
+    }
+  }
+
+  ensureOverlayRoot() {
+    if (this.overlayRoot?.isConnected && this.overlayRoot.parentElement === this.document.body) {
+      return this.overlayRoot;
+    }
+
+    const overlayRoot = this.document.createElement('div');
+    overlayRoot.className = 'image-lightbox-root';
+    overlayRoot.dataset.imageLightboxRoot = 'true';
+    overlayRoot.hidden = true;
+    overlayRoot.tabIndex = -1;
+
+    const backdrop = this.document.createElement('button');
+    backdrop.className = 'image-lightbox-backdrop';
+    backdrop.type = 'button';
+    backdrop.setAttribute('aria-label', 'Close image preview');
+    backdrop.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.close();
+    });
+
+    const shell = this.document.createElement('div');
+    shell.className = 'image-lightbox-shell';
+    shell.setAttribute('role', 'dialog');
+    shell.setAttribute('aria-modal', 'true');
+    shell.setAttribute('aria-label', 'Image preview');
+    shell.addEventListener('click', (event) => event.stopPropagation());
+    shell.addEventListener('pointerdown', (event) => event.stopPropagation());
+
+    const toolbar = this.document.createElement('div');
+    toolbar.className = 'image-lightbox-toolbar';
+
+    const title = this.document.createElement('div');
+    title.className = 'image-lightbox-title';
+    title.textContent = 'Image preview';
+
+    const controls = this.document.createElement('div');
+    controls.className = 'image-lightbox-controls';
+
+    const zoomLabel = this.document.createElement('span');
+    zoomLabel.className = 'image-lightbox-zoom-label';
+    zoomLabel.textContent = '100%';
+    const resetButton = this.createControlButton('Reset', 'Reset zoom and position', () => this.resetView());
+    const closeButton = this.createControlButton('Close', 'Close image preview', () => this.close());
+
+    controls.append(zoomLabel, resetButton, closeButton);
+    toolbar.append(title, controls);
+
+    const viewport = this.document.createElement('div');
+    viewport.className = 'image-lightbox-viewport';
+
+    const image = this.document.createElement('img');
+    image.className = 'image-lightbox-image';
+    image.alt = '';
+    image.addEventListener('load', () => {
+      this.clampOffsets();
+      this.syncTransform();
+    });
+
+    viewport.addEventListener('wheel', (event) => {
+      if (!this.isOpen) {
+        return;
+      }
+
+      event.preventDefault();
+      this.zoomBy(event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
+    }, { passive: false });
+
+    viewport.addEventListener('pointerdown', (event) => {
+      if (!this.isOpen || this.scale <= MIN_SCALE || event.button !== 0) {
+        return;
+      }
+
+      this.activePointerId = event.pointerId;
+      this.dragStartX = event.clientX;
+      this.dragStartY = event.clientY;
+      this.dragOriginX = this.offsetX;
+      this.dragOriginY = this.offsetY;
+      this.didDrag = false;
+      viewport.classList.add('is-dragging');
+      viewport.setPointerCapture?.(event.pointerId);
+      event.preventDefault();
+    });
+
+    viewport.addEventListener('pointermove', (event) => {
+      if (!this.isOpen || this.activePointerId !== event.pointerId) {
+        return;
+      }
+
+      if (
+        !this.didDrag
+        && (Math.abs(event.clientX - this.dragStartX) >= DRAG_THRESHOLD_PX
+          || Math.abs(event.clientY - this.dragStartY) >= DRAG_THRESHOLD_PX)
+      ) {
+        this.didDrag = true;
+      }
+
+      this.offsetX = this.dragOriginX + (event.clientX - this.dragStartX);
+      this.offsetY = this.dragOriginY + (event.clientY - this.dragStartY);
+      this.clampOffsets();
+      this.syncTransform();
+    });
+
+    const finishDrag = (event) => {
+      if (this.activePointerId !== event.pointerId) {
+        return;
+      }
+
+      this.activePointerId = null;
+      viewport.classList.remove('is-dragging');
+      viewport.releasePointerCapture?.(event.pointerId);
+      this.imageElement.style.cursor = this.scale > MIN_SCALE ? 'grab' : 'zoom-in';
+    };
+
+    viewport.addEventListener('pointerup', finishDrag);
+    viewport.addEventListener('pointercancel', finishDrag);
+    image.addEventListener('click', (event) => {
+      if (!this.isOpen) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.didDrag) {
+        this.didDrag = false;
+        return;
+      }
+
+      if (this.scale <= MIN_SCALE) {
+        this.setScale(CLICK_ZOOM_SCALE);
+      }
+    });
+
+    viewport.appendChild(image);
+    shell.append(toolbar, viewport);
+    overlayRoot.append(backdrop, shell);
+    this.document.body.appendChild(overlayRoot);
+
+    this.overlayRoot = overlayRoot;
+    this.viewport = viewport;
+    this.imageElement = image;
+    this.zoomLabel = zoomLabel;
+    this.titleElement = title;
+    this.resetButton = resetButton;
+    this.syncTransform();
+    return overlayRoot;
+  }
+
+  createControlButton(label, ariaLabel, onClick, {
+    className = '',
+  } = {}) {
+    const button = this.document.createElement('button');
+    button.className = `image-lightbox-btn ${className}`.trim();
+    button.type = 'button';
+    button.setAttribute('aria-label', ariaLabel);
+    button.textContent = label;
+    button.addEventListener('click', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick(event);
+    });
+    return button;
+  }
+}

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

@@ -2,6 +2,7 @@ export class OutlineController {
   constructor({
     mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
     onNavigateToHeading,
+    onWillOpen,
   } = {}) {
     this.outlineOpen = false;
     this.activeHeadingFrame = null;
@@ -9,16 +10,36 @@ export class OutlineController {
     this.headings = [];
     this.pinnedHeadingId = null;
     this.onNavigateToHeading = onNavigateToHeading;
+    this.onWillOpen = onWillOpen;
     this.panel = document.getElementById('outlinePanel');
     this.navigation = document.getElementById('outlineNav');
     this.previewContainer = document.getElementById('previewContainer');
     this.toggleButton = document.getElementById('outlineToggle');
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.handlePreviewScroll = () => this.scheduleActiveHeadingUpdate();
+    this.handleDocumentPointerDown = (event) => {
+      if (!this.outlineOpen) {
+        return;
+      }
+
+      const target = event.target;
+      if (
+        target instanceof Node
+        && (
+          this.panel?.contains(target)
+          || this.toggleButton?.contains(target)
+        )
+      ) {
+        return;
+      }
+
+      this.close();
+    };
   }
 
   initialize() {
     this.toggleButton?.addEventListener('click', () => this.toggle());
+    document.addEventListener('pointerdown', this.handleDocumentPointerDown);
   }
 
   toggle() {
@@ -30,6 +51,10 @@ export class OutlineController {
   }
 
   setOpenState(nextState) {
+    if (nextState && !this.outlineOpen) {
+      this.onWillOpen?.();
+    }
+
     this.outlineOpen = nextState;
     this.panel?.classList.toggle('hidden', !this.outlineOpen);
     this.toggleButton?.classList.toggle('active', this.outlineOpen);