feat(git): show current branch boundary in commit history (#682)

* feat(git): show current branch boundary in commit history * style(git): round commit cards around branch divider * style(git): refine branch divider visual boundary
2026-03-17 02:45:37 +02:00
parent 8f6f1c8284
commit de50283bdf
3 changed files with 118 additions and 13 deletions
@@ -66,6 +66,11 @@ type SyncAction = 'fetch' | 'pull' | 'push' | null;
 type CommitAction = 'commit' | 'commitAndPush' | null;
 type BranchOperation = 'merge' | 'rebase' | null;
 type ActionTab = 'commit' | 'branch' | 'pr' | 'worktree';
+type HistoryBranchDivider = {
+  insertBeforeIndex: number;
+  branchName: string;
+  direction: 'up' | 'down';
+} | null;

 const GIT_ACTION_TAB_STORAGE_KEY = 'oc.git.actionTab';

@@ -408,6 +413,7 @@ export const GitView: React.FC = () => {
  const [expandedCommitHashes, setExpandedCommitHashes] = React.useState<Set<string>>(new Set());
  const [commitFilesMap, setCommitFilesMap] = React.useState<Map<string, CommitFileEntry[]>>(new Map());
  const [loadingCommitHashes, setLoadingCommitHashes] = React.useState<Set<string>>(new Set());
+  const [historyBranchDivider, setHistoryBranchDivider] = React.useState<HistoryBranchDivider>(null);
  const [remoteUrl, setRemoteUrl] = React.useState<string | null>(null);
  const [gitmojiEmojis, setGitmojiEmojis] = React.useState<GitmojiEntry[]>([]);
  const [gitmojiSearch, setGitmojiSearch] = React.useState('');
@@ -1215,6 +1221,62 @@ export const GitView: React.FC = () => {
      branch: currentBranch,
    };
  }, [canShowPullRequestSection, currentBranch, currentDirectory]);
+
+  React.useEffect(() => {
+    if (!currentDirectory || !git || !log?.all?.length || !currentBranch || !baseBranch || currentBranch === baseBranch) {
+      setHistoryBranchDivider(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    const resolveBranchDivider = async () => {
+      try {
+        const branchOnlyLog = await git.getGitLog(currentDirectory, {
+          from: baseBranch,
+          to: 'HEAD',
+          maxCount: logMaxCountLocal,
+        });
+
+        if (cancelled) {
+          return;
+        }
+
+        const branchHashes = new Set(
+          (branchOnlyLog?.all ?? [])
+            .map((entry) => entry.hash)
+            .filter((hash) => typeof hash === 'string' && hash.length > 0)
+        );
+
+        if (branchHashes.size === 0) {
+          setHistoryBranchDivider(null);
+          return;
+        }
+
+        const insertBeforeIndex = log.all.findIndex((entry) => !branchHashes.has(entry.hash));
+        if (insertBeforeIndex <= 0) {
+          setHistoryBranchDivider(null);
+          return;
+        }
+
+        setHistoryBranchDivider({
+          insertBeforeIndex,
+          branchName: currentBranch,
+          direction: 'up',
+        });
+      } catch {
+        if (!cancelled) {
+          setHistoryBranchDivider(null);
+        }
+      }
+    };
+
+    void resolveBranchDivider();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [baseBranch, currentBranch, currentDirectory, git, log, logMaxCountLocal]);
  // Keep these sections stable in layout; individual cards render placeholders when unavailable.

  const toggleFileSelection = (path: string) => {
@@ -1956,6 +2018,7 @@ export const GitView: React.FC = () => {
              loadingCommitHashes={loadingCommitHashes}
              onCopyHash={handleCopyCommitHash}
              showHeader={false}
+              branchDivider={historyBranchDivider}
            />
          </div>
        </DialogContent>
@@ -12,6 +12,8 @@ interface HistoryCommitRowProps {
  files: CommitFileEntry[];
  isLoadingFiles: boolean;
  onCopyHash: (hash: string) => void;
+  roundTop?: boolean;
+  roundBottom?: boolean;
 }

 function formatCommitDate(date: string) {
@@ -52,6 +54,8 @@ export const HistoryCommitRow: React.FC<HistoryCommitRowProps> = ({
  files,
  isLoadingFiles,
  onCopyHash,
+  roundTop = false,
+  roundBottom = false,
 }) => {
  return (
    <li>
@@ -60,6 +64,8 @@ export const HistoryCommitRow: React.FC<HistoryCommitRowProps> = ({
        onClick={onToggle}
        className={cn(
          'w-full flex items-start gap-3 px-3 py-2 text-left transition-colors',
+          roundTop && 'rounded-t-lg',
+          roundBottom && !isExpanded && 'rounded-b-lg',
          isExpanded ? 'bg-sidebar/90' : 'hover:bg-sidebar/40'
        )}
      >
@@ -107,7 +113,7 @@ export const HistoryCommitRow: React.FC<HistoryCommitRowProps> = ({
      </button>

      {isExpanded && (
-        <div className="px-3 pb-2 pl-8 border-t border-border/40">
+        <div className={cn('px-3 pb-2 pl-8 border-t border-border/40', roundBottom && 'rounded-b-lg')}>
          {isLoadingFiles ? (
            <div className="flex items-center gap-2 py-2">
              <RiLoader4Line className="size-4 animate-spin text-muted-foreground" />
@@ -1,5 +1,5 @@
 import React from 'react';
-import { RiArrowUpSLine, RiArrowDownSLine } from '@remixicon/react';
+import { RiArrowDownSLine, RiArrowUpLine, RiArrowUpSLine } from '@remixicon/react';
 import {
  Collapsible,
  CollapsibleContent,
@@ -33,6 +33,11 @@ interface HistorySectionProps {
  loadingCommitHashes: Set<string>;
  onCopyHash: (hash: string) => void;
  showHeader?: boolean;
+  branchDivider?: {
+    insertBeforeIndex: number;
+    branchName: string;
+    direction: 'up' | 'down';
+  } | null;
 }

 export const HistorySection: React.FC<HistorySectionProps> = ({
@@ -46,6 +51,7 @@ export const HistorySection: React.FC<HistorySectionProps> = ({
  loadingCommitHashes,
  onCopyHash,
  showHeader = true,
+  branchDivider = null,
 }) => {
  const [isOpen, setIsOpen] = React.useState(true);

@@ -53,6 +59,11 @@ export const HistorySection: React.FC<HistorySectionProps> = ({
    return null;
  }

+  const hasDivider =
+    branchDivider !== null &&
+    branchDivider.insertBeforeIndex > 0 &&
+    branchDivider.insertBeforeIndex < log.all.length;
+
  const content = (
    <ScrollableOverlay outerClassName="min-h-0 max-h-[50vh]" className="w-full">
      {log.all.length === 0 ? (
@@ -63,17 +74,42 @@ export const HistorySection: React.FC<HistorySectionProps> = ({
        </div>
      ) : (
        <ul className="divide-y divide-border/60">
-          {log.all.map((entry) => (
-            <HistoryCommitRow
-              key={entry.hash}
-              entry={entry}
-              isExpanded={expandedCommitHashes.has(entry.hash)}
-              onToggle={() => onToggleCommit(entry.hash)}
-              files={commitFilesMap.get(entry.hash) ?? []}
-              isLoadingFiles={loadingCommitHashes.has(entry.hash)}
-              onCopyHash={onCopyHash}
-            />
-          ))}
+          {log.all.map((entry, index) => {
+            const isBoundary = hasDivider && index === branchDivider.insertBeforeIndex;
+            const roundTop = isBoundary;
+            const roundBottom = hasDivider && index === branchDivider.insertBeforeIndex - 1;
+
+            return (
+              <React.Fragment key={entry.hash}>
+                {isBoundary ? (
+                  <li className="px-3 py-2" aria-hidden>
+                    <div className="flex items-center gap-2">
+                      <span className="h-px flex-1 bg-border/60" />
+                      <span className="inline-flex max-w-[80%] items-center gap-1 typography-micro text-muted-foreground">
+                        <span className="truncate" title={branchDivider.branchName}>{branchDivider.branchName}</span>
+                        {branchDivider.direction === 'down' ? (
+                          <RiArrowDownSLine className="size-3.5" />
+                        ) : (
+                          <RiArrowUpLine className="size-3.5" />
+                        )}
+                      </span>
+                      <span className="h-px flex-1 bg-border/60" />
+                    </div>
+                  </li>
+                ) : null}
+                <HistoryCommitRow
+                  entry={entry}
+                  isExpanded={expandedCommitHashes.has(entry.hash)}
+                  onToggle={() => onToggleCommit(entry.hash)}
+                  files={commitFilesMap.get(entry.hash) ?? []}
+                  isLoadingFiles={loadingCommitHashes.has(entry.hash)}
+                  onCopyHash={onCopyHash}
+                  roundTop={roundTop}
+                  roundBottom={roundBottom}
+                />
+              </React.Fragment>
+            );
+          })}
        </ul>
      )}
    </ScrollableOverlay>