@bendyline/docblocks-react 1.1.1 → 2.0.0

package/src/Git/GitDiffView.tsx

@@ -0,0 +1,105 @@
+/**
+ * GitDiffView — read-only Monaco side-by-side diff.
+ *
+ * Monaco is never statically imported: squisq's useMonacoLoader() lazily
+ * imports the editor bundle once per page and hands back the namespace.
+ * The diff editor and both text models are created imperatively into a
+ * host div and disposed on unmount (the classic Monaco leak). Content and
+ * theme changes update the existing editor without recreating it.
+ */
+
+import { useEffect, useRef } from 'react';
+import {
+  detectLanguageFromFileName,
+  useMonacoLoader,
+  type UseMonacoLoaderResult,
+} from '@bendyline/squisq-editor-react';
+
+type MonacoModule = NonNullable<UseMonacoLoaderResult['monaco']>;
+type DiffEditorInstance = ReturnType<MonacoModule['editor']['createDiffEditor']>;
+type TextModel = ReturnType<MonacoModule['editor']['createModel']>;
+
+export interface GitDiffViewProps {
+  original: string;
+  modified: string;
+  /** Used for language detection (markdown for .md, plain text otherwise). */
+  fileName: string;
+  theme: 'light' | 'dark';
+  /** Optional column headers rendered above the two panes. */
+  labels?: { original: string; modified: string };
+}
+
+function languageFor(fileName: string): string {
+  const detected = detectLanguageFromFileName(fileName);
+  if (detected) return detected;
+  return fileName.toLowerCase().endsWith('.md') ? 'markdown' : 'plaintext';
+}
+
+export function GitDiffView({ original, modified, fileName, theme, labels }: GitDiffViewProps) {
+  const { monaco, ready } = useMonacoLoader();
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const editorRef = useRef<DiffEditorInstance | null>(null);
+  const modelsRef = useRef<{ original: TextModel; modified: TextModel } | null>(null);
+
+  const language = languageFor(fileName);
+
+  // Create the editor once monaco settles; dispose editor AND models on unmount.
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!monaco || !host) return;
+    const originalModel = monaco.editor.createModel('', 'plaintext');
+    const modifiedModel = monaco.editor.createModel('', 'plaintext');
+    const editor = monaco.editor.createDiffEditor(host, {
+      readOnly: true,
+      renderSideBySide: true,
+      automaticLayout: true,
+      minimap: { enabled: false },
+      wordWrap: 'on',
+      scrollBeyondLastLine: false,
+      renderOverviewRuler: false,
+    });
+    editor.setModel({ original: originalModel, modified: modifiedModel });
+    editorRef.current = editor;
+    modelsRef.current = { original: originalModel, modified: modifiedModel };
+    return () => {
+      editorRef.current = null;
+      modelsRef.current = null;
+      editor.dispose();
+      originalModel.dispose();
+      modifiedModel.dispose();
+    };
+  }, [monaco]);
+
+  // Sync content + language into the existing models — never recreate the editor.
+  useEffect(() => {
+    if (!monaco) return;
+    const models = modelsRef.current;
+    if (!models) return;
+    if (models.original.getValue() !== original) models.original.setValue(original);
+    if (models.modified.getValue() !== modified) models.modified.setValue(modified);
+    monaco.editor.setModelLanguage(models.original, language);
+    monaco.editor.setModelLanguage(models.modified, language);
+  }, [monaco, original, modified, language]);
+
+  // React to theme prop changes.
+  useEffect(() => {
+    if (!monaco) return;
+    monaco.editor.setTheme(theme === 'dark' ? 'vs-dark' : 'vs');
+  }, [monaco, theme]);
+
+  if (!ready) {
+    return <div className="db-git-diff-loading">Loading diff…</div>;
+  }
+
+  return (
+    <>
+      {labels && (
+        <div className="db-git-diff-labels">
+          <span>{labels.original}</span>
+          <span>{labels.modified}</span>
+        </div>
+      )}
+      <div ref={hostRef} className="db-git-diff-host" />
+    </>
+  );
+}

package/src/Git/GitHistoryDialog.tsx

@@ -0,0 +1,195 @@
+/**
+ * GitHistoryDialog — paged commit log for the repository or a single file.
+ *
+ * Pages `git log` 50 commits at a time; a row expands (one at a time) to
+ * show the full message body and the files changed in that commit — each
+ * file opens the commit-vs-parent diff dialog (which replaces this one;
+ * acceptable for v1).
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import type { GitFileChange, GitLogEntry } from '@bendyline/docblocks/host';
+import { Dialog } from '../components/Dialog.js';
+import { useGitContext } from './GitContext.js';
+import { BADGE_GLYPHS, BADGE_LABELS, badgeKindFor } from './git-status.js';
+
+export interface GitHistoryDialogProps {
+  /** Slash-prefixed workspace-relative path; absent → whole-repo history. */
+  path?: string;
+  onClose: () => void;
+}
+
+const PAGE_SIZE = 50;
+
+type CommitDetail = { body: string; files: GitFileChange[] } | { error: string };
+
+/** Message body beyond the subject line, or '' when it adds nothing. */
+function extraBody(body: string, subject: string): string {
+  const trimmedBody = body.trim();
+  const trimmedSubject = subject.trim();
+  if (!trimmedBody || trimmedBody === trimmedSubject) return '';
+  if (trimmedBody.startsWith(trimmedSubject)) {
+    return trimmedBody.slice(trimmedSubject.length).trim();
+  }
+  return trimmedBody;
+}
+
+function formatDate(iso: string): string {
+  const date = new Date(iso);
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+}
+
+export function GitHistoryDialog({ path, onClose }: GitHistoryDialogProps) {
+  const git = useGitContext();
+  const gitApi = git?.gitApi ?? null;
+  const repositoryId = git?.repositoryId ?? null;
+
+  const [entries, setEntries] = useState<GitLogEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [expandedSha, setExpandedSha] = useState<string | null>(null);
+  const [details, setDetails] = useState<ReadonlyMap<string, CommitDetail>>(new Map());
+
+  const loadPage = useCallback(
+    async (skip: number) => {
+      if (!gitApi || !repositoryId) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await gitApi.log(repositoryId, { path, maxCount: PAGE_SIZE, skip });
+        if (!result.ok) {
+          setError(result.error.message);
+          return;
+        }
+        setEntries((prev) => (skip === 0 ? result.value : [...prev, ...result.value]));
+        setHasMore(result.value.length === PAGE_SIZE);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [gitApi, repositoryId, path],
+  );
+
+  useEffect(() => {
+    setEntries([]);
+    setExpandedSha(null);
+    setDetails(new Map());
+    setHasMore(false);
+    void loadPage(0);
+  }, [loadPage]);
+
+  const handleRowClick = (sha: string) => {
+    if (expandedSha === sha) {
+      setExpandedSha(null);
+      return;
+    }
+    setExpandedSha(sha);
+    if (!gitApi || !repositoryId || details.has(sha)) return;
+    void gitApi.commitFiles(repositoryId, sha).then((result) => {
+      setDetails((prev) => {
+        const next = new Map(prev);
+        next.set(sha, result.ok ? result.value : { error: result.error.message });
+        return next;
+      });
+    });
+  };
+
+  if (!git) return null;
+
+  const baseName = path ? path.replace(/^\/+/, '').split('/').pop() : null;
+  const title = baseName ? `History — ${baseName}` : 'Commit history';
+
+  return (
+    <Dialog title={title} size="wide" onClose={onClose}>
+      {error && (
+        <p className="db-git-form-error" role="alert">
+          {error}
+        </p>
+      )}
+      {!error && entries.length === 0 && loading && <p className="db-git-hint">Loading history…</p>}
+      {!error && entries.length === 0 && !loading && <p className="db-git-hint">No commits yet.</p>}
+      {entries.length > 0 && (
+        <ul className="db-git-history-list">
+          {entries.map((entry) => {
+            const expanded = expandedSha === entry.sha;
+            const detail = details.get(entry.sha);
+            const meta = [
+              entry.authorName,
+              entry.sha.slice(0, 7),
+              formatDate(entry.authorDate),
+              entry.refs.join(', '),
+            ]
+              .filter(Boolean)
+              .join(' · ');
+            const body =
+              detail && !('error' in detail) ? extraBody(detail.body, entry.subject) : '';
+            return (
+              <li key={entry.sha} className="db-git-history-item">
+                <button
+                  type="button"
+                  className="db-git-history-toggle"
+                  aria-expanded={expanded}
+                  onClick={() => handleRowClick(entry.sha)}
+                >
+                  <span className="db-git-history-subject">{entry.subject}</span>
+                  <span className="db-git-history-meta">{meta}</span>
+                </button>
+                {expanded && !detail && <p className="db-git-hint">Loading…</p>}
+                {expanded && detail && 'error' in detail && (
+                  <p className="db-git-form-error" role="alert">
+                    {detail.error}
+                  </p>
+                )}
+                {expanded && detail && !('error' in detail) && (
+                  <>
+                    {body && <pre className="db-git-history-body">{body}</pre>}
+                    <ul className="db-git-history-files">
+                      {detail.files.map((file) => {
+                        const kind = badgeKindFor(file);
+                        return (
+                          <li key={file.path}>
+                            <button
+                              type="button"
+                              className="db-git-history-file"
+                              onClick={() =>
+                                git.openDialog({
+                                  kind: 'diff',
+                                  path: file.path,
+                                  revision: { sha: entry.sha },
+                                })
+                              }
+                            >
+                              <span
+                                className="db-git-file-kind"
+                                aria-label={BADGE_LABELS[kind]}
+                                title={BADGE_LABELS[kind]}
+                              >
+                                {BADGE_GLYPHS[kind]}
+                              </span>
+                              {file.path.replace(/^\/+/, '')}
+                            </button>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {hasMore && (
+        <button
+          type="button"
+          className="db-git-secondary-btn"
+          disabled={loading}
+          onClick={() => void loadPage(entries.length)}
+        >
+          Show older commits
+        </button>
+      )}
+    </Dialog>
+  );
+}

package/src/Git/GitStatusBar.tsx

@@ -0,0 +1,157 @@
+/**
+ * GitStatusBar — slim sidebar row showing branch, ahead/behind, and dirty
+ * count, with the repo actions menu (commit, sync, branches, history,
+ * remote conveniences). Renders nothing unless the active workspace is a
+ * git repository.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useGitContext } from './GitContext.js';
+import { formatAheadBehind, summarizeDirty } from './git-status.js';
+
+export function GitStatusBar() {
+  const git = useGitContext();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [menuOpen]);
+
+  const runItem = useCallback((action: () => void) => {
+    setMenuOpen(false);
+    action();
+  }, []);
+
+  if (!git || !git.repo || !git.status) return null;
+
+  const { status } = git;
+  const branchLabel = status.detached ? 'detached HEAD' : (status.branch ?? 'no branch');
+  const aheadBehind = formatAheadBehind(status);
+  const dirty = summarizeDirty(status);
+  const merging = status.operation === 'merge';
+  const chipLabelParts = [`Git: branch ${branchLabel}`];
+  if (status.ahead > 0) chipLabelParts.push(`${status.ahead} ahead`);
+  if (status.behind > 0) chipLabelParts.push(`${status.behind} behind`);
+  if (dirty) chipLabelParts.push(dirty);
+  if (merging) chipLabelParts.push('merge in progress');
+
+  const canCreatePr =
+    git.capabilities?.ghAvailable === true && git.remoteWeb?.host === 'github.com';
+
+  return (
+    <div ref={rootRef} className="db-git-statusbar">
+      <button
+        type="button"
+        className="db-git-statusbar-chip"
+        onClick={() => setMenuOpen((open) => !open)}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        aria-label={chipLabelParts.join(', ')}
+        title={chipLabelParts.join(', ')}
+      >
+        <span className="db-git-branch-glyph" aria-hidden="true">
+          {'⎇'}
+        </span>
+        <span className="db-git-statusbar-branch">{branchLabel}</span>
+        {aheadBehind && <span className="db-git-statusbar-counts">{aheadBehind}</span>}
+        {dirty && <span className="db-git-statusbar-dirty">{dirty}</span>}
+        {merging && <span className="db-git-statusbar-merge">merging</span>}
+        {git.busy && (
+          <span className="db-git-statusbar-busy" aria-hidden="true">
+            {'…'}
+          </span>
+        )}
+      </button>
+
+      {menuOpen && (
+        <div className="db-git-menu" role="menu" aria-label="Git actions">
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={status.changes.length === 0 && !merging}
+            onClick={() => runItem(() => git.openDialog({ kind: 'commit' }))}
+          >
+            {merging ? 'Commit merge…' : 'Commit…'}
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={git.busy !== null}
+            onClick={() => runItem(() => void git.push())}
+          >
+            {status.upstream === null && !status.unborn ? 'Publish branch' : 'Push'}
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={git.busy !== null}
+            onClick={() => runItem(() => void git.pull())}
+          >
+            Pull
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            disabled={git.busy !== null}
+            onClick={() => runItem(() => void git.fetchRemote())}
+          >
+            Fetch
+          </button>
+          <div className="db-git-menu-divider" role="separator" />
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            onClick={() => runItem(() => git.openDialog({ kind: 'branches' }))}
+          >
+            Branches…
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-git-menu-item"
+            onClick={() => runItem(() => git.openDialog({ kind: 'history' }))}
+          >
+            Commit history…
+          </button>
+          {(git.remoteWeb || canCreatePr) && (
+            <div className="db-git-menu-divider" role="separator" />
+          )}
+          {git.remoteWeb && (
+            <button
+              type="button"
+              role="menuitem"
+              className="db-git-menu-item"
+              onClick={() => runItem(() => git.openOnRemote())}
+            >
+              Open on {git.remoteWeb.host}
+            </button>
+          )}
+          {canCreatePr && (
+            <button
+              type="button"
+              role="menuitem"
+              className="db-git-menu-item"
+              disabled={git.busy !== null}
+              onClick={() => runItem(() => void git.createPullRequest())}
+            >
+              Create pull request
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/Git/GitToolbarControl.tsx

@@ -0,0 +1,123 @@
+/**
+ * GitToolbarControl — per-file git actions in the editor toolbar.
+ *
+ * A single branch-glyph button (styled like the export trigger) opening a
+ * small dropdown: view working-tree changes, per-file history, and "Open
+ * on <host>" when a web remote is known. A dot overlay marks the selected
+ * file as modified. Null-renders without a git context, a repository, or a
+ * selected file. Deliberately has no editor dependency.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { useGitContext } from './GitContext.js';
+import { isFileDirty } from './git-status.js';
+
+export interface GitToolbarControlProps {
+  /** Currently selected file path (slash-prefixed), or null. */
+  selectedFile: string | null;
+}
+
+export function GitToolbarControl({ selectedFile }: GitToolbarControlProps) {
+  const git = useGitContext();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click (same pointerdown pattern as ExportToolbarControls).
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (e: PointerEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [menuOpen]);
+
+  if (!git || !git.repo || !selectedFile) return null;
+
+  const dirty = isFileDirty(git.status, selectedFile);
+  const label = dirty ? 'Git actions (file modified)' : 'Git actions';
+
+  const openDiff = () => {
+    setMenuOpen(false);
+    git.openDialog({ kind: 'diff', path: selectedFile });
+  };
+  const openHistory = () => {
+    setMenuOpen(false);
+    git.openDialog({ kind: 'history', path: selectedFile });
+  };
+  const openOnRemote = () => {
+    setMenuOpen(false);
+    git.openOnRemote(selectedFile);
+  };
+
+  return (
+    <div className="db-toolbar-menu" ref={menuRef}>
+      <button
+        type="button"
+        className="squisq-toolbar-button db-git-toolbar-trigger"
+        onClick={() => setMenuOpen((prev) => !prev)}
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        data-tooltip={label}
+      >
+        <BranchGlyph />
+        {dirty && <span className="db-git-toolbar-dot" aria-hidden="true" />}
+      </button>
+
+      {menuOpen && (
+        <div className="db-toolbar-menu-dropdown" role="menu">
+          <button
+            type="button"
+            role="menuitem"
+            className="db-toolbar-menu-item"
+            disabled={!dirty}
+            onClick={openDiff}
+          >
+            View changes
+          </button>
+          <button
+            type="button"
+            role="menuitem"
+            className="db-toolbar-menu-item"
+            onClick={openHistory}
+          >
+            File history…
+          </button>
+          {git.remoteWeb && (
+            <button
+              type="button"
+              role="menuitem"
+              className="db-toolbar-menu-item"
+              onClick={openOnRemote}
+            >
+              Open on {git.remoteWeb.host}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function BranchGlyph() {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width="16"
+      height="16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="4.5" cy="12" r="2" />
+      <circle cx="11.5" cy="4" r="2" />
+      <path d="M4.5 10V7.5A2.5 2.5 0 0 1 7 5h2.5" />
+    </svg>
+  );
+}

package/src/Git/GitUI.tsx

@@ -0,0 +1,68 @@
+/**
+ * GitUI — single mount point for the git status bar, the aria-live
+ * operation result line, and every git dialog. Dialog visibility lives in
+ * GitContext so the file tree, toolbar, and native menu can all open them.
+ */
+
+import type { ElectronWorkspaceInfo } from '@bendyline/docblocks/host';
+import { useGitContext } from './GitContext.js';
+import { GitStatusBar } from './GitStatusBar.js';
+import { GitCommitDialog } from './GitCommitDialog.js';
+import { GitBranchesDialog } from './GitBranchesDialog.js';
+import { GitHistoryDialog } from './GitHistoryDialog.js';
+import { GitDiffDialog } from './GitDiffDialog.js';
+import { GitCloneDialog } from './GitCloneDialog.js';
+import { GitAuthGuidanceDialog } from './GitAuthGuidanceDialog.js';
+import { GitConflictsDialog } from './GitConflictsDialog.js';
+
+export interface GitUIProps {
+  /** Open a workspace file in the editor (from conflicts/history dialogs). */
+  onOpenFile: (path: string) => void;
+  /** A clone finished and its folder is registered — open the workspace. */
+  onWorkspaceCloned?: (info: ElectronWorkspaceInfo) => void;
+}
+
+export function GitUI({ onOpenFile, onWorkspaceCloned }: GitUIProps) {
+  const git = useGitContext();
+  if (!git || !git.available) return null;
+
+  const { dialog, closeDialog } = git;
+
+  return (
+    <>
+      <GitStatusBar />
+      {git.repo && (
+        <span className="db-git-inline-status" role="status" aria-live="polite">
+          {git.lastResult?.message ?? ''}
+        </span>
+      )}
+      {dialog.kind === 'commit' && <GitCommitDialog onClose={closeDialog} />}
+      {dialog.kind === 'branches' && (
+        <GitBranchesDialog createFocus={dialog.createFocus} onClose={closeDialog} />
+      )}
+      {dialog.kind === 'history' && <GitHistoryDialog path={dialog.path} onClose={closeDialog} />}
+      {dialog.kind === 'diff' && (
+        <GitDiffDialog path={dialog.path} revision={dialog.revision} onClose={closeDialog} />
+      )}
+      {dialog.kind === 'clone' && (
+        <GitCloneDialog
+          onClose={closeDialog}
+          onCloned={(info) => {
+            closeDialog();
+            onWorkspaceCloned?.(info);
+          }}
+        />
+      )}
+      {dialog.kind === 'auth-guidance' && (
+        <GitAuthGuidanceDialog
+          operation={dialog.operation}
+          detail={dialog.detail}
+          onClose={closeDialog}
+        />
+      )}
+      {dialog.kind === 'conflicts' && (
+        <GitConflictsDialog paths={dialog.paths} onOpenFile={onOpenFile} onClose={closeDialog} />
+      )}
+    </>
+  );
+}