feat: new stacking ui commit lines (gitbutlerapp#4972)

Co-authored-by: Pavel Laptev <pawellaptew@gmail.com>
mibesr · Sep 28, 2024 · d10bbcf · d10bbcf
1 parent 8b84f46
commit d10bbcf
Show file tree

Hide file tree

Showing 28 changed files with 1,773 additions and 109 deletions.
diff --git a/apps/desktop/src/lib/branch/BranchCard.svelte b/apps/desktop/src/lib/branch/BranchCard.svelte
@@ -12,6 +12,7 @@
 	import Dropzones from '$lib/branch/Dropzones.svelte';
 	import CommitDialog from '$lib/commit/CommitDialog.svelte';
 	import CommitList from '$lib/commit/CommitList.svelte';
+	import StackingCommitList from '$lib/commit/StackingCommitList.svelte';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { stackingFeature } from '$lib/config/uiFeatureFlags';
 	import BranchFiles from '$lib/file/BranchFiles.svelte';
@@ -240,12 +241,12 @@
 						{#if $stackingFeature}
 							{@const groups = groupCommitsByRef(branch.commits)}
 							{#each groups as group (group.ref)}
-								<div class="commit-group">
+								<div class="commit-group" class:stacking={$stackingFeature}>
 									{#if group.branchName}
 										<StackedBranchHeader upstreamName={group.branchName} />
 										<PullRequestCard upstreamName={group.branchName} />
 									{/if}
-									<CommitList
+									<StackingCommitList
 										localCommits={group.localCommits}
 										localAndRemoteCommits={group.remoteCommits}
 										integratedCommits={group.integratedCommits}
@@ -256,6 +257,14 @@
 									/>
 								</div>
 							{/each}
+							{#if $integratedCommits.length === 0 && $localCommits.length > 0}
+								{@render pushButton({
+									disabled:
+										localCommitsConflicted ||
+										localAndRemoteCommitsConflicted ||
+										$localCommits.length === 0
+								})}
+							{/if}
 						{:else}
 							<CommitList
 								localCommits={$localCommits}
@@ -268,11 +277,6 @@
 								{pushButton}
 							/>
 						{/if}
-						{#if $stackingFeature}
-							{@render pushButton({
-								disabled: localCommitsConflicted || localAndRemoteCommitsConflicted
-							})}
-						{/if}
 					</div>
 				</div>
 			</ScrollableContainer>
@@ -325,6 +329,13 @@
 		padding: 12px;
 	}
 
+	.branch-card__files.card,
+	.no-changes.card,
+	.new-branch.card {
+		border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
+	}
+
+	/* Stacking */
 	.card-no-stacking {
 		flex: 1;
 		display: flex;
@@ -338,6 +349,13 @@
 		flex: 1;
 		display: flex;
 		flex-direction: column;
+		gap: 10px;
+	}
+
+	.commit-group {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
 	}
 
 	.branch-card__files {
@@ -353,6 +371,15 @@
 		padding: 12px;
 	}
 
+	.card-no-stacking {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--clr-border-2);
+		border-radius: var(--radius-m);
+		background: var(--clr-bg-1);
+	}
+
 	.new-branch,
 	.no-changes {
 		flex-grow: 1;
@@ -383,12 +410,4 @@
 		height: 100%;
 		background-color: var(--clr-border-2);
 	}
-
-	.commit-group {
-		margin: 10px 0;
-		border: 1px solid var(--clr-border-2);
-		border-radius: var(--radius-m);
-		background: var(--clr-bg-1);
-		overflow: hidden;
-	}
 </style>
diff --git a/apps/desktop/src/lib/branch/BranchHeader.svelte b/apps/desktop/src/lib/branch/BranchHeader.svelte
@@ -219,9 +219,10 @@
 		</div>
 	</div>
 {:else}
-	<div class="header__wrapper">
+	<div class="header__wrapper" class:header__wrapper--stacking={$stackingFeature}>
 		<div
 			class="header card"
+			class:header_card--stacking={$stackingFeature}
 			class:header_target-branch={branch.selectedForChanges}
 			class:header_target-branch-animation={isTargetBranchAnimated && branch.selectedForChanges}
 		>
@@ -337,6 +338,18 @@
 		top: 12px;
 		padding-bottom: 8px;
 	}
+	.header__wrapper--stacking {
+		padding-bottom: unset !important;
+
+		& .header__info-wrapper .draggable {
+			height: auto;
+		}
+	}
+	.header_card--stacking {
+		border-bottom-right-radius: 0px;
+		border-bottom-left-radius: 0px;
+		border-bottom-width: 0px;
+	}
 	.header {
 		z-index: var(--z-lifted);
 		position: relative;
@@ -428,6 +441,7 @@
 	.draggable {
 		display: flex;
 		height: fit-content;
+		align-items: center;
 		cursor: grab;
 		padding: 2px 2px 0 0;
 		color: var(--clr-scale-ntrl-50);

diff --git a/apps/desktop/src/lib/commit/CommitCard.svelte b/apps/desktop/src/lib/commit/CommitCard.svelte
@@ -5,7 +5,6 @@
 	import { BaseBranch } from '$lib/baseBranch/baseBranch';
 	import CommitMessageInput from '$lib/commit/CommitMessageInput.svelte';
 	import { persistedCommitMessage } from '$lib/config/config';
-	import { stackingFeature } from '$lib/config/uiFeatureFlags';
 	import { draggableCommit } from '$lib/dragging/draggable';
 	import { DraggableCommit, nonDraggable } from '$lib/dragging/draggables';
 	import BranchFilesList from '$lib/file/BranchFilesList.svelte';
@@ -92,17 +91,6 @@
 	let createRefModal: Modal;
 	let createRefName = $baseBranch.remoteName + '/';
 
-	function openCreateRefModal(e: Event, commit: DetailedCommit | Commit) {
-		e.stopPropagation();
-		createRefModal.show(commit);
-	}
-
-	function pushCommitRef(commit: DetailedCommit) {
-		if (branch && commit.remoteRef) {
-			branchController.pushChangeReference(branch.id, commit.remoteRef);
-		}
-	}
-
 	function openCommitMessageModal(e: Event) {
 		e.stopPropagation();
 
@@ -267,7 +255,8 @@
 					? {
 							label: commit.descriptionTitle,
 							sha: commitShortSha,
-							dateAndAuthor: getTimeAndAuthor(),
+							date: getTimeAgo(commit.createdAt),
+							authorImgUrl: commit.author.gravatarUrl,
 							commitType: type,
 							data: new DraggableCommit(commit.branchId, commit, isHeadCommit),
 							viewportId: 'board-viewport'
@@ -407,26 +396,6 @@
 										icon="edit-small"
 										onclick={openCommitMessageModal}>Edit message</Button
 									>
-									{#if $stackingFeature && commit instanceof DetailedCommit && !commit.remoteRef}
-										<Button
-											size="tag"
-											style="ghost"
-											outline
-											icon="branch"
-											onclick={(e: Event) => {openCreateRefModal(e, commit)}}>Create ref</Button
-										>
-									{/if}
-									{#if $stackingFeature && commit instanceof DetailedCommit && commit.remoteRef}
-										<Button
-											size="tag"
-											style="ghost"
-											outline
-											icon="remote"
-											onclick={() => {
-												pushCommitRef(commit);
-											}}>Push ref</Button
-										>
-									{/if}
 								{/if}
 								{#if canEdit() && project.succeedingRebases}
 									<Button size="tag" style="ghost" outline onclick={editPatch}>

diff --git a/apps/desktop/src/lib/commit/CommitDialog.svelte b/apps/desktop/src/lib/commit/CommitDialog.svelte
@@ -119,6 +119,7 @@
 		padding: 14px;
 		background: var(--clr-bg-1);
 		border-top: 1px solid var(--clr-border-2);
+		border-radius: 0 0 var(--radius-m) var(--radius-m) !important;
 		transition: background-color var(--transition-medium);
 	}
 

diff --git a/apps/desktop/src/lib/commit/CommitDragItem.svelte b/apps/desktop/src/lib/commit/CommitDragItem.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { CommitDragActions, CommitDragActionsFactory } from '$lib/commits/dragActions';
+	import { stackingFeature } from '$lib/config/uiFeatureFlags';
 	import CardOverlay from '$lib/dropzone/CardOverlay.svelte';
 	import Dropzone from '$lib/dropzone/Dropzone.svelte';
 	import { getContext, maybeGetContextStore } from '$lib/utils/context';
@@ -40,9 +41,13 @@
 				{hovered}
 				{activated}
 				label="Amend commit"
-				extraPaddings={{
-					left: 4
-				}}
+				extraPaddings={$stackingFeature
+					? {
+							left: 4
+						}
+					: {
+							left: 4
+						}}
 			/>
 		{/snippet}
 	</Dropzone>
@@ -57,9 +62,13 @@
 				{hovered}
 				{activated}
 				label="Squash commit"
-				extraPaddings={{
-					left: 4
-				}}
+				extraPaddings={$stackingFeature
+					? {
+							left: -4
+						}
+					: {
+							left: 4
+						}}
 			/>
 		{/snippet}
 	</Dropzone>

diff --git a/apps/desktop/src/lib/commit/CommitList.svelte b/apps/desktop/src/lib/commit/CommitList.svelte
@@ -5,7 +5,6 @@
 	import { BaseBranch } from '$lib/baseBranch/baseBranch';
 	import { transformAnyCommit } from '$lib/commitLines/transformers';
 	import InsertEmptyCommitAction from '$lib/components/InsertEmptyCommitAction.svelte';
-	import { stackingFeature } from '$lib/config/uiFeatureFlags';
 	import {
 		ReorderDropzoneManagerFactory,
 		type ReorderDropzone
@@ -69,9 +68,7 @@
 
 	const mappedLocalCommits = $derived(
 		localCommits.length > 0
-			? !$stackingFeature
-				? [...localCommits.map(transformAnyCommit), { id: LineSpacer.Local }]
-				: localCommits.map(transformAnyCommit)
+			? [...localCommits.map(transformAnyCommit), { id: LineSpacer.Local }]
 			: []
 	);
 	const mappedLocalAndRemoteCommits = $derived(
@@ -148,7 +145,7 @@
 {/snippet}
 
 {#if hasCommits || hasRemoteCommits}
-	<div class="commits" class:stacked={$stackingFeature}>
+	<div class="commits">
 		<!-- UPSTREAM COMMITS -->
 
 		{#if remoteCommits.length > 0}
@@ -235,7 +232,7 @@
 						on:click={() => insertBlankCommit(commit.id, 'below')}
 					/>
 				{/each}
-				{#if !$stackingFeature && pushButton}
+				{#if pushButton}
 					<CommitAction bottomBorder={hasRemoteCommits}>
 						{#snippet lines()}
 							<LineGroup lineGroup={lineManager.get(LineSpacer.Local)} topHeightPx={0} />
@@ -331,8 +328,9 @@
 					{/key}
 				</div>
 				<div class="base-row__content">
-					<span class="text-11 base-row__text"
-						>Base commit <button
+					<span class="text-11 base-row__text">
+						Base commit
+						<button
 							class="base-row__commit-link"
 							onclick={async () => await goto(`/${project.id}/base`)}
 						>
@@ -365,10 +363,6 @@
 		--avatar-top: 16px;
 	}
 
-	.commits.stacked {
-		border-top: none;
-	}
-
 	/* BASE ROW */
 
 	.base-row-container {