collabmd 0.1.21 → 0.1.25

package/src/client/application/app-shell/git-feature.js

@@ -1,18 +1,11 @@
 import { createWorkspaceChange } from '../../../domain/workspace-change.js';
 import { resolveApiUrl } from '../../domain/runtime-paths.js';
+import { createWorkspaceRequestId } from '../../domain/workspace-request-id.js';
 
 function normalizeWorkspaceChange(workspaceChange = {}) {
   return createWorkspaceChange(workspaceChange);
 }
 
-function createWorkspaceRequestId() {
-  if (globalThis.crypto?.randomUUID) {
-    return globalThis.crypto.randomUUID();
-  }
-
-  return `workspace-${Date.now()}-${Math.random().toString(16).slice(2, 10)}`;
-}
-
 export const gitFeature = {
   formatPullBackupToast(pullBackup = null) {
     const fileCount = Number(pullBackup?.fileCount || 0);
@@ -53,6 +46,46 @@ export const gitFeature = {
     this.navigation.navigateToGitDiff({ filePath, scope });
   },
 
+  handleGitCommitSelection(hash, { closeSidebarOnMobile = false, historyFilePath = null, path = null } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    this.navigation.navigateToGitCommit({ hash, historyFilePath, path });
+  },
+
+  handleGitHistorySelection({ closeSidebarOnMobile = false } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    this.navigation.navigateToGitHistory();
+  },
+
+  handleGitFileHistorySelection(filePath = this.currentFilePath, { closeSidebarOnMobile = false } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    if (!filePath) {
+      return;
+    }
+
+    this.navigation.navigateToGitFileHistory({ filePath });
+  },
+
+  handleGitFilePreviewSelection({ hash, path, currentFilePath = null, closeSidebarOnMobile = false } = {}) {
+    if (closeSidebarOnMobile) {
+      this.closeSidebarOnMobile();
+    }
+
+    if (!hash || !path) {
+      return;
+    }
+
+    this.navigation.navigateToGitFilePreview({ hash, path, currentFilePath });
+  },
+
   handleGitRepoChange(isGitRepo, status = null) {
     this.gitRepoAvailable = Boolean(isGitRepo);
     this.elements.sidebarTabs?.classList.toggle('hidden', !this.gitRepoAvailable);
@@ -64,58 +97,237 @@ export const gitFeature = {
     this.gitDiffView.setRepoStatus(this.gitRepoAvailable ? status : null);
 
     if (!this.gitRepoAvailable && this.activeSidebarTab === 'git') {
+      this.syncFileHistoryButton({ mode: this.navigation.getHashRoute().type === 'git-file-preview' ? 'history-preview' : 'editor' });
       this.setSidebarTab('files');
       return;
     }
 
-    if (this.gitRepoAvailable && this.navigation.getHashRoute().type === 'git-diff' && this.activeSidebarTab !== 'git') {
+    const routeType = this.navigation.getHashRoute().type;
+    if (
+      this.gitRepoAvailable
+      && (routeType === 'git-diff' || routeType === 'git-commit' || routeType === 'git-history')
+      && this.activeSidebarTab !== 'git'
+    ) {
       this.setSidebarTab('git');
     }
+
+    this.syncFileHistoryButton({
+      filePath: this.currentFilePath,
+      mode: routeType === 'git-file-preview'
+        ? 'history-preview'
+        : routeType === 'file'
+          ? 'editor'
+          : 'empty',
+    });
+  },
+
+  syncFileHistoryButton({ filePath = this.currentFilePath, mode = 'editor' } = {}) {
+    const button = this.elements.fileHistoryButton;
+    const label = this.elements.fileHistoryButtonLabel;
+    if (!button || !label) {
+      return;
+    }
+
+    const supported = this.gitRepoAvailable && this.supportsFileHistory?.(filePath);
+    if (!supported) {
+      button.classList.add('hidden');
+      return;
+    }
+
+    button.classList.remove('hidden');
+    if (mode === 'history-preview') {
+      label.textContent = 'Back to History';
+      button.setAttribute('aria-label', 'Back to file history');
+      button.title = 'Back to file history';
+      return;
+    }
+
+    if (mode !== 'editor') {
+      button.classList.add('hidden');
+      return;
+    }
+
+    label.textContent = 'History';
+    button.setAttribute('aria-label', 'Open file history');
+    button.title = 'View file history';
   },
 
-  syncMainChrome({ mode, title = null } = {}) {
-    const isDiffMode = mode === 'diff';
-    this.elements.toolbarCenter?.classList.toggle('hidden', isDiffMode);
-    this.elements.mobileViewToggle?.classList.toggle('hidden', isDiffMode);
-    this.elements.userCount?.classList.toggle('hidden', isDiffMode);
-    this.elements.toolbarDiffBadge?.classList.toggle('hidden', !isDiffMode);
+  syncMainChrome({ badgeLabel = '', mode, title = null } = {}) {
+    const isSpecialMode = mode === 'diff' || mode === 'history' || mode === 'history-preview';
+    this.elements.toolbarCenter?.classList.toggle('hidden', isSpecialMode);
+    this.elements.mobileViewToggle?.classList.toggle('hidden', isSpecialMode);
+    this.elements.userCount?.classList.toggle('hidden', isSpecialMode);
+    this.elements.toolbarDiffBadge?.classList.toggle('hidden', !badgeLabel);
+    if (this.elements.toolbarDiffBadge) {
+      this.elements.toolbarDiffBadge.textContent = badgeLabel;
+    }
 
     if (title && this.elements.activeFileName) {
       this.elements.activeFileName.textContent = title;
     }
+
+    this.syncFileHistoryButton({ filePath: this.currentFilePath, mode });
   },
 
   async showGitDiff({ filePath = null, scope = 'all' } = {}) {
-    this.gitPanel.setSelection(filePath ? { path: filePath, scope } : {});
+    this.clearStaticPreviewDocument?.();
+    this.gitPanel.setSelection(filePath ? { path: filePath, scope, source: 'workspace' } : {});
+    this.gitPanel.setMode('changes');
     this.showDiffState();
     this.syncMainChrome({
+      badgeLabel: 'Diff',
       mode: 'diff',
       title: this.gitDiffView.getToolbarTitle({ filePath, scope }),
     });
-    await this.gitDiffView.open({ filePath, scope });
+    this.syncFileHistoryButton({ filePath, mode: 'diff' });
+    await this.gitDiffView.openWorkspaceDiff({ filePath, scope });
+  },
+
+  async showGitCommit({ hash, path = null, historyFilePath = null } = {}) {
+    this.clearStaticPreviewDocument?.();
+    this.gitPanel.setMode('history');
+    this.gitPanel.setSelection(hash ? { commitHash: hash, path, source: 'commit' } : { source: 'commit' });
+    this.showDiffState();
+    this.syncMainChrome({
+      badgeLabel: 'Diff',
+      mode: 'diff',
+      title: this.gitDiffView.getToolbarTitle({ commitHash: hash, path, source: 'commit' }),
+    });
+    this.syncFileHistoryButton({ filePath: path, mode: 'diff' });
+    await this.gitDiffView.openCommitDiff({ hash, historyFilePath, path });
+  },
+
+  async showGitHistory() {
+    this.clearStaticPreviewDocument?.();
+    this.gitPanel.setMode('history');
+    this.gitPanel.setSelection({ source: 'commit' });
+    this.workspaceRouteController?.showEmptyState?.();
+    this.syncMainChrome({
+      mode: 'empty',
+      title: 'Git History',
+    });
+    this.syncFileHistoryButton({ mode: 'empty' });
+  },
+
+  async showGitFileHistory({ filePath = null } = {}) {
+    if (!filePath) {
+      this.workspaceRouteController?.showEmptyState?.();
+      return;
+    }
+
+    this.clearStaticPreviewDocument?.();
+    this.commentUi?.attachSession?.(null);
+    this.commentUi?.setCurrentFile?.(filePath, {
+      fileKind: this.getCommentFileKind(filePath),
+      supported: false,
+    });
+    this.handleCommentThreadsChange?.([]);
+    this.handleCommentSelectionChange?.(null);
+    this.workspaceRouteController?.showFileHistoryState?.(filePath);
+    this.syncMainChrome({
+      badgeLabel: 'History',
+      mode: 'history',
+      title: this.getDisplayName(filePath),
+    });
+    this.syncFileHistoryButton({ filePath, mode: 'history' });
+    await this.fileHistoryView.openFileHistory({ filePath });
+  },
+
+  async showGitFilePreview({ hash, filePath = null, currentFilePath = null } = {}) {
+    const resolvedCurrentFilePath = String(currentFilePath ?? '').trim() || filePath;
+    if (!hash || !filePath || !resolvedCurrentFilePath) {
+      this.workspaceRouteController?.showEmptyState?.();
+      return;
+    }
+
+    this.commentUi?.attachSession?.(null);
+    this.commentUi?.setCurrentFile?.(resolvedCurrentFilePath, {
+      fileKind: this.getCommentFileKind(resolvedCurrentFilePath),
+      supported: false,
+    });
+    this.handleCommentThreadsChange?.([]);
+    this.handleCommentSelectionChange?.(null);
+    this.workspaceRouteController?.showPreviewOnlyState?.(resolvedCurrentFilePath);
+    this.layoutController.setView('preview', { persist: false });
+    this.syncMainChrome({
+      badgeLabel: 'History Preview',
+      mode: 'history-preview',
+      title: this.getDisplayName(resolvedCurrentFilePath),
+    });
+    this.syncFileHistoryButton({ filePath: resolvedCurrentFilePath, mode: 'history-preview' });
+
+    try {
+      const query = new URLSearchParams();
+      query.set('hash', hash);
+      query.set('path', filePath);
+      const response = await fetch(resolveApiUrl(`/git/file-snapshot?${query.toString()}`));
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to load historical file preview');
+      }
+
+      this.setStaticPreviewDocument?.({
+        ...data,
+        currentFilePath: resolvedCurrentFilePath,
+      });
+      this.resetPreviewMode();
+      this.elements.markdownToolbar?.classList.add('hidden');
+      this.elements.outlineToggle?.classList.toggle('hidden', data.fileKind !== 'markdown');
+
+      if (data.fileKind === 'markdown' || data.fileKind === 'mermaid' || data.fileKind === 'plantuml') {
+        if (data.fileKind === 'mermaid') {
+          this.elements.previewContent?.classList.add('is-mermaid-file-preview');
+        } else if (data.fileKind === 'plantuml') {
+          this.elements.previewContent?.classList.add('is-plantuml-file-preview');
+        }
+        this.previewRenderer.beginDocumentLoad();
+        this.previewRenderer.queueRender();
+        return;
+      }
+
+      this.elements.outlineToggle?.classList.add('hidden');
+      this.renderTextFilePreview({
+        content: data.content,
+        filePath: resolvedCurrentFilePath,
+      });
+    } catch (error) {
+      console.error('[git-preview] Failed to load file snapshot:', error);
+      this.clearStaticPreviewDocument?.();
+      this.toastController.show('Failed to load historical file preview');
+      this.renderTextFilePreview({
+        content: 'Failed to load historical file preview.',
+        filePath: resolvedCurrentFilePath,
+      });
+      this.elements.outlineToggle?.classList.add('hidden');
+    }
   },
 
   async postGitAction(endpoint, payload) {
     const requestId = createWorkspaceRequestId();
     this.pendingWorkspaceRequestIds?.add(requestId);
-    const response = await fetch(endpoint, {
-      body: JSON.stringify(payload),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CollabMD-Request-Id': requestId,
-      },
-      method: 'POST',
-    });
-    const data = await response.json();
-    if (!response.ok) {
-      this.pendingWorkspaceRequestIds?.delete(requestId);
-      const error = new Error(data.error || 'Git action failed');
-      if (typeof data?.code === 'string') {
-        error.code = data.code;
+    try {
+      const response = await fetch(endpoint, {
+        body: JSON.stringify(payload),
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CollabMD-Request-Id': requestId,
+        },
+        method: 'POST',
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        this.pendingWorkspaceRequestIds?.delete(requestId);
+        const error = new Error(data.error || 'Git action failed');
+        if (typeof data?.code === 'string') {
+          error.code = data.code;
+        }
+        throw error;
       }
+      return data;
+    } catch (error) {
+      this.pendingWorkspaceRequestIds?.delete(requestId);
       throw error;
     }
-    return data;
   },
 
   async refreshWorkspaceAfterGitAction({ filePath = null, preferredScope = null } = {}) {
@@ -127,6 +339,30 @@ export const gitFeature = {
     await this.gitPanel.refresh({ force: true });
 
     const route = this.navigation.getHashRoute();
+    if (route.type === 'git-history') {
+      await this.showGitHistory();
+      return;
+    }
+
+    if (route.type === 'git-file-history') {
+      await this.showGitFileHistory({ filePath: route.filePath });
+      return;
+    }
+
+    if (route.type === 'git-file-preview') {
+      await this.showGitFilePreview({
+        hash: route.hash,
+        filePath: route.filePath,
+        currentFilePath: route.currentFilePath,
+      });
+      return;
+    }
+
+    if (route.type === 'git-commit') {
+      await this.showGitCommit({ hash: route.hash, path: route.path, historyFilePath: route.historyFilePath });
+      return;
+    }
+
     if (route.type !== 'git-diff') {
       return;
     }

package/src/client/application/app-shell/ui-feature-identity.js

@@ -0,0 +1,170 @@
+import { USER_NAME_MAX_LENGTH, normalizeUserName } from '../../domain/room.js';
+
+/**
+ * @typedef {object} UiIdentityContext
+ * @property {boolean} isTabActive
+ * @property {boolean} _hasPromptedForDisplayName
+ * @property {{ currentUserName?: HTMLElement | null, displayNameDialog?: HTMLDialogElement | HTMLElement | null, displayNameInput?: HTMLInputElement | null, displayNameTitle?: HTMLElement | null, displayNameCopy?: HTMLElement | null, displayNameCancel?: HTMLElement | null, displayNameSubmit?: HTMLElement | null, editNameButton?: HTMLElement | null }} elements
+ * @property {{ getUserName(): string, setUserName(name: string): void }} preferences
+ * @property {{ getLocalUser(): { name?: string } | null, setUserName(name: string): void }} lobby
+ * @property {{ getLocalUser(): { name?: string } | null, setUserName(name: string): string } | null} session
+ * @property {{ updateLocalUser(user: unknown): void }} excalidrawEmbed
+ * @property {{ show(message: string): void }} toastController
+ * @property {() => boolean} isIdentityManagedByAuth
+ * @property {() => { name?: string } | null} getCurrentUser
+ * @property {() => string} getCurrentUserName
+ * @property {() => string} getStoredUserName
+ * @property {() => void} renderChat
+ * @property {() => void} syncCurrentUserName
+ */
+
+/** @this {UiIdentityContext} */
+function isIdentityManagedByAuth() {
+  return this.runtimeConfig?.auth?.strategy === 'oidc'
+    && this.runtimeConfig?.auth?.provider === 'google';
+}
+
+/** @this {UiIdentityContext} */
+function openDisplayNameDialog({ mode = 'edit' } = {}) {
+  if (this.isIdentityManagedByAuth()) {
+    return;
+  }
+
+  if (!this.isTabActive) {
+    return;
+  }
+
+  const dialog = this.elements.displayNameDialog;
+  const input = this.elements.displayNameInput;
+  const title = this.elements.displayNameTitle;
+  const copy = this.elements.displayNameCopy;
+  const cancel = this.elements.displayNameCancel;
+  const submit = this.elements.displayNameSubmit;
+  if (!dialog || !input) return;
+
+  const isOnboarding = mode === 'onboarding';
+  if (title) {
+    title.textContent = isOnboarding ? 'Choose your display name' : 'Update display name';
+  }
+  if (copy) {
+    copy.textContent = isOnboarding
+      ? 'Pick a name collaborators will see. You can skip for now and continue as a guest.'
+      : 'Your name will be visible to everyone editing this vault.';
+  }
+  if (cancel) {
+    cancel.textContent = isOnboarding ? 'Skip for now' : 'Cancel';
+  }
+  if (submit) {
+    submit.textContent = isOnboarding ? 'Continue' : 'Save name';
+  }
+
+  input.value = isOnboarding ? '' : this.getCurrentUserName();
+  if (dialog.open) {
+    return;
+  }
+  if (typeof dialog.showModal === 'function') {
+    dialog.showModal();
+  } else {
+    dialog.setAttribute('open', 'true');
+  }
+  requestAnimationFrame(() => { input.focus(); input.select(); });
+}
+
+/** @this {UiIdentityContext} */
+function promptForDisplayNameIfNeeded() {
+  if (
+    !this.isTabActive
+    || this._hasPromptedForDisplayName
+    || this.getStoredUserName()
+    || this.isIdentityManagedByAuth()
+  ) {
+    return;
+  }
+
+  this._hasPromptedForDisplayName = true;
+  requestAnimationFrame(() => {
+    this.openDisplayNameDialog({ mode: 'onboarding' });
+  });
+}
+
+/** @this {UiIdentityContext} */
+function handleDisplayNameSubmit() {
+  if (this.isIdentityManagedByAuth()) {
+    return;
+  }
+
+  const input = this.elements.displayNameInput;
+  const dialog = this.elements.displayNameDialog;
+  if (!input || !dialog) return;
+
+  const normalizedName = this.session
+    ? this.session.setUserName(input.value)
+    : normalizeUserName(input.value);
+  if (!normalizedName) {
+    input.focus();
+    this.toastController.show(`Name must be 1-${USER_NAME_MAX_LENGTH} characters`);
+    return;
+  }
+
+  this.preferences.setUserName(normalizedName);
+  this.lobby.setUserName(normalizedName);
+  this.excalidrawEmbed.updateLocalUser(this.lobby.getLocalUser());
+  this.syncCurrentUserName();
+  this.renderChat();
+  dialog.close();
+}
+
+/** @this {UiIdentityContext} */
+function getCurrentUser() {
+  return this.globalUsers.find((u) => u.isLocal)
+    ?? this.session?.getLocalUser()
+    ?? this.lobby?.getLocalUser()
+    ?? null;
+}
+
+/** @this {UiIdentityContext} */
+function getCurrentUserName() {
+  return this.getCurrentUser()?.name ?? this.getStoredUserName() ?? '';
+}
+
+/** @this {UiIdentityContext} */
+function getStoredUserName() {
+  return this.preferences.getUserName();
+}
+
+/** @this {UiIdentityContext} */
+function syncCurrentUserName() {
+  const el = this.elements.currentUserName;
+  if (!el) return;
+  const name = this.getCurrentUserName();
+  el.textContent = name || 'Set name';
+  el.classList.toggle('has-name', Boolean(name));
+  if (!this.isIdentityManagedByAuth()) {
+    this.elements.editNameButton?.setAttribute(
+      'aria-label',
+      `${name || 'Set name'}. Change display name`,
+    );
+  }
+}
+
+/** @this {UiIdentityContext} */
+function syncIdentityManagementUi() {
+  const isManaged = this.isIdentityManagedByAuth();
+  this.elements.editNameButton?.classList.toggle('hidden', isManaged);
+  this.elements.editNameButton?.toggleAttribute('disabled', isManaged);
+  if (isManaged && this.elements.displayNameDialog?.open) {
+    this.elements.displayNameDialog.close();
+  }
+}
+
+export const uiFeatureIdentityMethods = {
+  getCurrentUser,
+  getCurrentUserName,
+  getStoredUserName,
+  handleDisplayNameSubmit,
+  isIdentityManagedByAuth,
+  openDisplayNameDialog,
+  promptForDisplayNameIfNeeded,
+  syncCurrentUserName,
+  syncIdentityManagementUi,
+};