@bendyline/docblocks-react 1.1.2 → 2.0.0

package/src/Git/GitBranchesDialog.tsx

@@ -0,0 +1,144 @@
+/**
+ * GitBranchesDialog — switch between local branches or create a new one.
+ *
+ * Loads the branch list once from the host git API on mount. Remote
+ * branches are display-only in v1 (a collapsed disclosure); switching and
+ * creating go through the GitValue actions so errors (e.g. uncommitted
+ * changes blocking a checkout) surface inline via lastResult.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type { GitBranchInfo } from '@bendyline/docblocks/host';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+
+export function GitBranchesDialog({
+  createFocus,
+  onClose,
+}: {
+  createFocus?: boolean;
+  onClose: () => void;
+}) {
+  const git = useGitContext();
+  const gitApi = git?.gitApi ?? null;
+  const repositoryId = git?.repositoryId ?? null;
+
+  const [branches, setBranches] = useState<GitBranchInfo[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [newName, setNewName] = useState('');
+  const createInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!gitApi || !repositoryId) return;
+    let cancelled = false;
+    void gitApi.listBranches(repositoryId).then((result) => {
+      if (cancelled) return;
+      if (result.ok) setBranches(result.value);
+      else setLoadError(result.error.message || 'Could not list branches');
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [gitApi, repositoryId]);
+
+  if (!git) return null;
+
+  const locals = branches?.filter((b) => b.kind === 'local') ?? [];
+  const remotes = branches?.filter((b) => b.kind === 'remote') ?? [];
+  const canCreate = newName.trim().length > 0 && git.busy === null;
+
+  const handleSwitch = async (name: string) => {
+    const ok = await git.switchBranch(name);
+    if (ok) onClose();
+  };
+
+  const handleCreate = async () => {
+    if (!canCreate) return;
+    const ok = await git.createBranch(newName.trim());
+    if (ok) onClose();
+  };
+
+  return (
+    <Dialog
+      title="Branches"
+      onClose={onClose}
+      initialFocusRef={createFocus ? createInputRef : undefined}
+    >
+      {branches === null && loadError === null && <p className="db-git-hint">Loading branches…</p>}
+      {loadError !== null && (
+        <p className="db-git-form-error" role="alert">
+          {loadError}
+        </p>
+      )}
+      {branches !== null && (
+        <div className="db-git-branch-list">
+          {locals.map((branch) =>
+            branch.current ? (
+              <span
+                key={branch.name}
+                className="db-git-branch-row db-git-branch-row--current"
+                aria-current="true"
+              >
+                {branch.name}
+              </span>
+            ) : (
+              <button
+                key={branch.name}
+                type="button"
+                className="db-git-branch-row"
+                disabled={git.busy !== null}
+                onClick={() => void handleSwitch(branch.name)}
+              >
+                {branch.name}
+              </button>
+            ),
+          )}
+        </div>
+      )}
+      {git.lastResult?.tone === 'error' && (
+        <p className="db-git-form-error" role="alert">
+          {git.lastResult.message}
+        </p>
+      )}
+      <hr />
+      <div className="db-git-form-row">
+        <label className="db-git-form-label" htmlFor="db-git-new-branch-name">
+          New branch
+        </label>
+        <input
+          id="db-git-new-branch-name"
+          ref={createInputRef}
+          className="db-git-form-input"
+          type="text"
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') void handleCreate();
+          }}
+          placeholder="feature/my-branch"
+          spellCheck={false}
+        />
+        <button
+          type="button"
+          className="db-git-primary-btn"
+          disabled={!canCreate}
+          onClick={() => void handleCreate()}
+        >
+          Create
+        </button>
+      </div>
+      {remotes.length > 0 && (
+        <details>
+          <summary>Remote branches ({remotes.length})</summary>
+          <div className="db-git-branch-list">
+            {remotes.map((branch) => (
+              <span key={branch.name} className="db-git-branch-row">
+                {branch.name}
+              </span>
+            ))}
+          </div>
+        </details>
+      )}
+    </Dialog>
+  );
+}

package/src/Git/GitCloneDialog.tsx

@@ -0,0 +1,200 @@
+/**
+ * GitCloneDialog — clone a remote repository into a new local workspace.
+ *
+ * The renderer only collects the URL; the main process shows the native
+ * destination picker, streams progress back, and registers the clone as a
+ * workspace. An auth failure swaps the body to the shared credential
+ * guidance copy (no credentials are ever collected here).
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type {
+  ElectronWorkspaceInfo,
+  GitCloneHandle,
+  GitCloneProgress,
+} from '@bendyline/docblocks/host';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+import { deriveCloneFolderName, isLikelyGitUrl } from './git-clone-utils.js';
+import { GitCredentialGuidance } from './GitAuthGuidanceDialog.js';
+
+export function GitCloneDialog({
+  onClose,
+  onCloned,
+}: {
+  onClose: () => void;
+  onCloned: (info: ElectronWorkspaceInfo) => void;
+}) {
+  const git = useGitContext();
+  const gitApi = git?.gitApi ?? null;
+
+  const [url, setUrl] = useState('');
+  const [cloning, setCloning] = useState(false);
+  const [progress, setProgress] = useState<GitCloneProgress | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  /** Non-null → show embedded credential guidance instead of the form. */
+  const [authDetail, setAuthDetail] = useState<{ detail?: string } | null>(null);
+  const handleRef = useRef<GitCloneHandle | null>(null);
+  const urlInputRef = useRef<HTMLInputElement>(null);
+
+  // Closing the dialog mid-clone abandons it — kill git and clean up.
+  useEffect(
+    () => () => {
+      handleRef.current?.cancel();
+    },
+    [],
+  );
+
+  if (!gitApi || typeof gitApi.clone !== 'function') return null;
+
+  const canClone = isLikelyGitUrl(url) && !cloning;
+
+  const handleClone = async () => {
+    if (!canClone) return;
+    setCloning(true);
+    setError(null);
+    setProgress(null);
+    const handle = gitApi.clone(url.trim(), (p) => setProgress(p));
+    handleRef.current = handle;
+    const result = await handle.result;
+    handleRef.current = null;
+    setCloning(false);
+    setProgress(null);
+    if (!result.ok) {
+      switch (result.error.code) {
+        case 'invalid-url':
+          setError('That doesn’t look like a valid repository URL.');
+          break;
+        case 'destination-exists':
+          setError('A folder with that name already exists there. Pick a different location.');
+          break;
+        case 'auth-failed':
+          setAuthDetail({ detail: result.error.message });
+          break;
+        case 'cancelled':
+          break; // user cancelled — just return to the form
+        default:
+          setError(result.error.message);
+      }
+      return;
+    }
+    if (result.value === null) return; // user cancelled the destination picker
+    onCloned(result.value);
+  };
+
+  const progressPercent = progress?.percent ?? null;
+  const progressText =
+    progress !== null
+      ? `${progress.phase}…${progressPercent !== null ? ` ${Math.round(progressPercent)}%` : ''}`
+      : 'Starting clone…';
+
+  if (authDetail !== null) {
+    return (
+      <Dialog
+        title="Clone repository"
+        onClose={onClose}
+        footer={
+          <>
+            <button
+              type="button"
+              className="db-git-secondary-btn"
+              onClick={() => setAuthDetail(null)}
+            >
+              Back
+            </button>
+            <button type="button" className="db-git-primary-btn" onClick={onClose}>
+              Close
+            </button>
+          </>
+        }
+      >
+        <p className="db-settings-hint">Git could not authenticate with that remote.</p>
+        <GitCredentialGuidance detail={authDetail.detail} />
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog
+      title="Clone repository"
+      onClose={onClose}
+      closeOnBackdrop={!cloning}
+      initialFocusRef={urlInputRef}
+      footer={
+        <>
+          <button
+            type="button"
+            className="db-git-secondary-btn"
+            onClick={onClose}
+            disabled={cloning}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="db-git-primary-btn"
+            disabled={!canClone}
+            onClick={() => void handleClone()}
+          >
+            Clone
+          </button>
+        </>
+      }
+    >
+      <div className="db-git-form-row">
+        <label className="db-git-form-label" htmlFor="db-git-clone-url">
+          Repository URL
+        </label>
+        <input
+          id="db-git-clone-url"
+          ref={urlInputRef}
+          className="db-git-form-input"
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') void handleClone();
+          }}
+          placeholder="https://github.com/owner/repo.git"
+          disabled={cloning}
+          spellCheck={false}
+        />
+      </div>
+      {isLikelyGitUrl(url) && (
+        <p className="db-git-hint">
+          Will clone into: <b>{deriveCloneFolderName(url)}</b> — you&rsquo;ll pick where next
+        </p>
+      )}
+      <p className="db-git-hint">
+        HTTPS and SSH URLs both work. You&rsquo;ll choose the destination folder in the next step.
+      </p>
+      {error !== null && (
+        <p className="db-git-form-error" role="alert">
+          {error}
+        </p>
+      )}
+      {cloning && (
+        <div className="db-git-progress">
+          {progressPercent !== null && (
+            <div
+              className="db-git-progress-bar"
+              role="progressbar"
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={Math.round(progressPercent)}
+              style={{ width: `${progressPercent}%` }}
+            />
+          )}
+          <p className="db-git-progress-text">{progressText}</p>
+          <button
+            type="button"
+            className="db-git-secondary-btn"
+            onClick={() => handleRef.current?.cancel()}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </Dialog>
+  );
+}

package/src/Git/GitCommitDialog.tsx

@@ -0,0 +1,119 @@
+/**
+ * GitCommitDialog — message + per-file selection for committing changes.
+ *
+ * All changed files are included by default; while a merge is being
+ * concluded, conflicted files are force-included (locked) because a commit
+ * that omits them would not resolve the merge. Selection logic lives in
+ * commit-selection.ts so it stays unit-testable.
+ */
+
+import { useRef, useState } from 'react';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+import { BADGE_LABELS, badgeKindFor } from './git-status.js';
+import {
+  canCommit,
+  initSelection,
+  isMergeCommit,
+  selectedPaths,
+  setAllSelected,
+  toggleSelection,
+  type CommitSelection,
+} from './commit-selection.js';
+
+export function GitCommitDialog({ onClose }: { onClose: () => void }) {
+  const git = useGitContext();
+  const status = git?.status ?? null;
+  const merging = isMergeCommit(status);
+
+  const [message, setMessage] = useState('');
+  const [selection, setSelection] = useState<CommitSelection>(() =>
+    initSelection(status?.changes ?? [], merging),
+  );
+  const messageRef = useRef<HTMLTextAreaElement>(null);
+
+  if (!git || !status) return null;
+
+  const allOn = [...selection.included.values()].every(Boolean);
+  const commitDisabled = !canCommit(message, selection) || git.busy !== null;
+
+  const handleCommit = async () => {
+    const ok = await git.commit(message, selectedPaths(selection));
+    if (ok) onClose();
+  };
+
+  return (
+    <Dialog
+      title={merging ? 'Commit merge' : 'Commit changes'}
+      onClose={onClose}
+      size="wide"
+      closeOnBackdrop={false}
+      initialFocusRef={messageRef}
+      footer={
+        <>
+          <button type="button" className="db-git-secondary-btn" onClick={onClose}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="db-git-primary-btn"
+            disabled={commitDisabled}
+            onClick={() => void handleCommit()}
+          >
+            Commit
+          </button>
+        </>
+      }
+    >
+      {merging && (
+        <p className="db-settings-hint">
+          You&rsquo;re completing a merge. Committing will conclude it.
+        </p>
+      )}
+      <textarea
+        ref={messageRef}
+        className="db-git-commit-message"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        placeholder="Commit message"
+        aria-label="Commit message"
+        rows={3}
+      />
+      <div className="db-git-form-row">
+        <button
+          type="button"
+          className="db-git-secondary-btn"
+          onClick={() => setSelection((s) => setAllSelected(s, !allOn))}
+        >
+          {allOn ? 'Select none' : 'Select all'}
+        </button>
+      </div>
+      <ul className="db-git-file-list">
+        {status.changes.map((change) => {
+          const kind = badgeKindFor(change);
+          const locked = selection.locked.has(change.path);
+          const checked = locked || (selection.included.get(change.path) ?? true);
+          return (
+            <li key={change.path} className="db-git-file-row">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  disabled={locked}
+                  onChange={() => setSelection((s) => toggleSelection(s, change.path))}
+                />
+                <span>{change.path.replace(/^\/+/, '')}</span>
+              </label>
+              <span className="db-git-file-kind">{BADGE_LABELS[kind]}</span>
+            </li>
+          );
+        })}
+      </ul>
+      {git.lastResult?.tone === 'error' && (
+        <p className="db-git-form-error" role="alert">
+          {git.lastResult.message}
+        </p>
+      )}
+    </Dialog>
+  );
+}

package/src/Git/GitConflictsDialog.tsx

@@ -0,0 +1,62 @@
+/**
+ * GitConflictsDialog — lists conflicted files after a pull hits a merge
+ * conflict. Each row opens the file in the editor so the user can resolve
+ * the markers; the primary action hands off to the commit dialog, which
+ * concludes the merge.
+ */
+
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+
+export function GitConflictsDialog({
+  paths,
+  onOpenFile,
+  onClose,
+}: {
+  paths: string[];
+  onOpenFile: (path: string) => void;
+  onClose: () => void;
+}) {
+  const git = useGitContext();
+
+  return (
+    <Dialog
+      title="Merge conflicts"
+      onClose={onClose}
+      footer={
+        <>
+          <button type="button" className="db-git-secondary-btn" onClick={onClose}>
+            Close
+          </button>
+          <button
+            type="button"
+            className="db-git-primary-btn"
+            onClick={() => git?.openDialog({ kind: 'commit' })}
+          >
+            Open commit dialog
+          </button>
+        </>
+      }
+    >
+      <p className="db-settings-hint">
+        These files contain conflict markers. Edit each one to resolve the conflicts, then commit to
+        complete the merge.
+      </p>
+      <ul className="db-git-file-list">
+        {paths.map((path) => (
+          <li key={path} className="db-git-file-row">
+            <button
+              type="button"
+              onClick={() => {
+                onOpenFile(path);
+                onClose();
+              }}
+            >
+              {path.replace(/^\/+/, '')}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </Dialog>
+  );
+}

package/src/Git/GitContext.tsx

@@ -0,0 +1,88 @@
+/**
+ * GitContext — the seam between DocBlocksShell and every git UI surface.
+ *
+ * The shell calls useGit() once and provides the value here; the status
+ * bar, file-tree badges, toolbar control, and dialogs all consume it.
+ * Consumers must tolerate a null context (FileExplorer renders standalone
+ * in tests and on surfaces with no git).
+ */
+
+import { createContext, useContext } from 'react';
+import type {
+  DocBlocksHostGitAPI,
+  GitCapabilities,
+  GitRepoDetection,
+  GitStatus,
+} from '@bendyline/docblocks/host';
+import type { FileSystemProvider } from '@bendyline/docblocks/filesystem';
+import type { GitBadgeKind } from './git-status.js';
+
+export type GitDialogState =
+  | { kind: 'none' }
+  | { kind: 'commit' }
+  | { kind: 'branches'; createFocus?: boolean }
+  | { kind: 'history'; path?: string }
+  /** `revision` absent → working tree vs HEAD; present → that commit vs its parent. */
+  | { kind: 'diff'; path: string; revision?: { sha: string } }
+  | { kind: 'clone' }
+  | {
+      kind: 'auth-guidance';
+      operation: 'push' | 'pull' | 'fetch' | 'clone' | 'pr';
+      detail?: string;
+    }
+  | { kind: 'conflicts'; paths: string[] };
+
+export type GitBusyKind = 'push' | 'pull' | 'fetch' | 'commit' | 'branch' | 'pr' | null;
+
+export interface GitInlineResult {
+  tone: 'info' | 'error';
+  message: string;
+}
+
+export interface GitValue {
+  /** Tier 1 — Electron host with a working git. Gates the clone entry. */
+  available: boolean;
+  capabilities: GitCapabilities | null;
+  /** Tier 2 — the active workspace root is a repository. Gates everything else. */
+  repo: GitRepoDetection | null;
+  /** Main-owned repository capability; never a native path. */
+  repositoryId: string | null;
+  /** Parsed web location of the first remote, when one exists and parses. */
+  remoteWeb: { host: string; owner: string; repo: string; webUrl: string } | null;
+  /** Raw host API for read-heavy dialogs (log, branches, file-at-revision). */
+  gitApi: DocBlocksHostGitAPI | null;
+  provider: FileSystemProvider | null;
+  theme: 'light' | 'dark';
+
+  status: GitStatus | null;
+  badges: ReadonlyMap<string, GitBadgeKind>;
+  busy: GitBusyKind;
+  /** Latest operation outcome, surfaced in an aria-live region. */
+  lastResult: GitInlineResult | null;
+
+  refresh: () => void;
+  /** Debounced refresh — used after autosave writes. */
+  scheduleRefresh: () => void;
+
+  /** Actions route their typed errors to dialogs/lastResult internally. */
+  commit: (message: string, paths: string[]) => Promise<boolean>;
+  push: () => Promise<void>;
+  pull: () => Promise<void>;
+  fetchRemote: () => Promise<void>;
+  createBranch: (name: string) => Promise<boolean>;
+  switchBranch: (name: string) => Promise<boolean>;
+  /** Open the repo (or a file within it) on the remote's web host. */
+  openOnRemote: (filePath?: string) => void;
+  createPullRequest: () => Promise<void>;
+
+  dialog: GitDialogState;
+  openDialog: (dialog: GitDialogState) => void;
+  closeDialog: () => void;
+}
+
+export const GitContext = createContext<GitValue | null>(null);
+
+/** Null when no provider is mounted — callers must degrade gracefully. */
+export function useGitContext(): GitValue | null {
+  return useContext(GitContext);
+}