fix: ref based insertion

apps/desktop/src/components/v3/BranchCommitList.svelte

@@ -13,6 +13,7 @@
 		stackId: string;
 		branchName: string;
 		lastBranch?: boolean;
+		selectedBranchName?: string;
 		selectedCommitId?: string;
 		upstreamTemplate?: Snippet<
 			[
@@ -28,16 +29,19 @@
 		localAndRemoteTemplate?: Snippet<
 			[{ commit: Commit; commitKey: CommitKey; first: boolean; last: boolean; selected: boolean }]
 		>;
+		emptyBranchCommitHere?: Snippet;
 	}
 
 	let {
 		projectId,
 		stackId,
 		branchName,
 		lastBranch,
+		selectedBranchName,
 		selectedCommitId,
 		localAndRemoteTemplate,
-		upstreamTemplate
+		upstreamTemplate,
+		emptyBranchCommitHere
 	}: Props = $props();
 
 	const [stackService] = inject(StackService);
@@ -53,7 +57,13 @@
 <ReduxResult result={combineResults(upstreamOnlyCommits, localAndRemoteCommits)}>
 	{#snippet children([upstreamOnlyCommits, localAndRemoteCommits])}
 		{#if !upstreamOnlyCommits.length && !localAndRemoteCommits.length}
-			<EmptyBranch {lastBranch} />
+			{#if selectedBranchName === branchName && emptyBranchCommitHere}
+				<div class="empty-branch-commit-here">
+					{@render emptyBranchCommitHere()}
+				</div>
+			{:else}
+				<EmptyBranch {lastBranch} selected={selectedBranchName === branchName} />
+			{/if}
 		{:else}
 			<div class="commit-list">
 				{#if upstreamTemplate}
@@ -81,11 +91,11 @@
 </ReduxResult>
 
 <style lang="postcss">
+	.empty-branch-commit-here,
 	.commit-list {
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		border-radius: 0 0 var(--radius-ml) var(--radius-ml);
-		/* overflow: hidden; */
 	}
 </style>

apps/desktop/src/components/v3/BranchHeader.svelte

@@ -90,6 +90,7 @@
 
 <style lang="postcss">
 	.branch-header {
+		width: 100%;
 		position: relative;
 		display: flex;
 		align-items: center;

apps/desktop/src/components/v3/CommitGoesHere.svelte

@@ -2,6 +2,7 @@
 	import BranchCommitList from './BranchCommitList.svelte';
 	import BranchHeader from './BranchHeader.svelte';
 	import CommitRow from './CommitRow.svelte';
+	import ScrollableContainer from '../ScrollableContainer.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
 	import { createCommitPath } from '$lib/routes/routes.svelte';
@@ -35,77 +36,90 @@
 		</div>
 	</div>
 {/snippet}
-{#snippet commitHere(args: { commitId: string; last?: boolean })}
+
+{#snippet commitHere(args: { commitId: string; last?: boolean; branchName: string })}
 	<button
 		class="commit-here"
 		type="button"
 		class:last={args.last}
-		onclick={() => goto(createCommitPath(projectId, stackId, branchName, args.commitId))}
+		onclick={() => goto(createCommitPath(projectId, stackId, args.branchName, args.commitId))}
 	>
 		<div class="commit-here__circle"></div>
 		<div class="commit-here__line"></div>
 		<div class="commit-here__label text-11 text-semibold">Commit here</div>
 	</button>
 {/snippet}
-<div class="commit-goes-here">
-	<ReduxResult result={branchesResult.current}>
-		{#snippet children(branches)}
-			{#each branches as branch, i}
-				{@const lastBranch = i === branches.length - 1}
-				<div class="branch" class:selected={branch.name === branchName}>
-					<div class="header-wrapper">
-						<BranchHeader
+
+<ScrollableContainer>
+	<div class="commit-goes-here">
+		<ReduxResult result={branchesResult.current}>
+			{#snippet children(branches)}
+				{#each branches as branch, i}
+					{@const lastBranch = i === branches.length - 1}
+					<div class="branch" class:selected={branch.name === branchName}>
+						<div class="header-wrapper">
+							<BranchHeader
+								{projectId}
+								{stackId}
+								{branch}
+								onclick={() => {
+									goto(createCommitPath(projectId, stackId, branch.name), {
+										replaceState: true
+									});
+								}}
+								isTopBranch={i === 0}
+								lineColor="var(--clr-commit-local)"
+								readonly
+							/>
+						</div>
+						<BranchCommitList
 							{projectId}
 							{stackId}
-							{branch}
-							isTopBranch={i === 0}
-							lineColor="var(--clr-commit-local)"
-							readonly
-						/>
-					</div>
-					<BranchCommitList
-						{projectId}
-						{stackId}
-						branchName={branch.name}
-						selectedCommitId={parentId}
-					>
-						{#snippet localAndRemoteTemplate({ commit, commitKey, first, last, selected })}
-							{@const baseSha = $baseBranch?.baseSha}
-							{#if selected}
-								{@render indicator({ first })}
-							{/if}
-							<div class="commit-wrapper" class:last>
-								{#if !selected}
-									{@render commitHere({ commitId: commit.id })}
+							branchName={branch.name}
+							selectedBranchName={branchName}
+							selectedCommitId={parentId}
+						>
+							{#snippet emptyBranchCommitHere()}
+								{@render indicator({ first: true })}
+							{/snippet}
+							{#snippet localAndRemoteTemplate({ commit, commitKey, first, last, selected })}
+								{@const baseSha = $baseBranch?.baseSha}
+								{#if selected && branchName === branch.name}
+									{@render indicator({ first })}
 								{/if}
-								<CommitRow
-									{projectId}
-									{commitKey}
-									{first}
-									{commit}
-									lastCommit={last}
-									lineColor="var(--clr-commit-local)"
-									opacity={0.4}
-									borderTop={selected}
-									onclick={() =>
-										goto(createCommitPath(projectId, stackId, branchName, commit.id), {
-											replaceState: true
-										})}
-								/>
-								{#if lastBranch && last && baseSha && parentId !== baseSha}
-									{@render commitHere({ commitId: baseSha, last: true })}
+								<div class="commit-wrapper" class:last>
+									{#if !selected}
+										{@render commitHere({ commitId: commit.id, branchName: branch.name })}
+									{/if}
+									<CommitRow
+										{projectId}
+										{commitKey}
+										{first}
+										{commit}
+										lastCommit={last}
+										lineColor="var(--clr-commit-local)"
+										opacity={0.4}
+										borderTop={selected}
+										onclick={() =>
+											goto(createCommitPath(projectId, stackId, branch.name, commit.id), {
+												replaceState: true
+											})}
+									/>
+									{#if lastBranch && last && baseSha && parentId !== baseSha}
+										{@render commitHere({ commitId: baseSha, last: true, branchName: branch.name })}
+									{/if}
+								</div>
+								{#if lastBranch && last && parentId === baseSha}
+									{@render indicator({ last: true })}
 								{/if}
-							</div>
-							{#if lastBranch && last && parentId === baseSha}
-								{@render indicator({ last: true })}
-							{/if}
-						{/snippet}
-					</BranchCommitList>
-				</div>
-			{/each}
-		{/snippet}
-	</ReduxResult>
-</div>
+							{/snippet}
+						</BranchCommitList>
+					</div>
+				{/each}
+			{/snippet}
+		</ReduxResult>
+	</div>
+</ScrollableContainer>
 
 <style lang="postcss">
 	.commit-goes-here {
@@ -124,6 +138,11 @@
 			background-color: var(--clr-bg-1);
 		}
 	}
+
+	.branch .empty-branch-commit-here .indicator {
+		border-radius: 0 0 var(--radius-l) var(--radius-l);
+	}
+
 	.header-wrapper {
 		opacity: 0.4;
 	}
@@ -142,6 +161,7 @@
 		}
 		&.last {
 			border-bottom: none;
+			border-radius: 0 0 var(--radius-l) var(--radius-l);
 		}
 	}
 	.pin {
@@ -168,11 +188,16 @@
 		display: flex;
 		width: 100%;
 		background-color: var(--clr-bg-2);
-		&.last {
+
+		&.last:not(:has(~ .indicator)) {
 			border-radius: 0 0 var(--radius-l) var(--radius-l);
 		}
 	}
 
+	.last .indicator {
+		border-radius: 0 0 var(--radius-l) var(--radius-l);
+	}
+
 	/* COMMIT HERE */
 	.commit-here {
 		width: 100%;

apps/desktop/src/components/v3/EmptyBranch.svelte

@@ -3,13 +3,14 @@
 
 	interface Props {
 		lastBranch?: boolean;
+		selected?: boolean;
 	}
 
-	const { lastBranch }: Props = $props();
+	const { lastBranch, selected }: Props = $props();
 </script>
 
 <div class="empty-series" style:--commit-color={getColorFromBranchType('LocalOnly')}>
-	<div class="commit-line" class:dashed={lastBranch}></div>
+	<div class="commit-line" class:selected class:dashed={lastBranch}></div>
 	<div class="text-13 text-body empty-series__label">
 		This is an empty branch.
 		<br />
@@ -33,5 +34,10 @@
 	.commit-line {
 		position: absolute;
 		left: 20px;
+		opacity: 0.4;
+
+		&.selected {
+			opacity: 1;
+		}
 	}
 </style>

apps/desktop/src/components/v3/NewCommit.svelte

@@ -22,8 +22,10 @@
 	};
 	const { projectId, stackId, branchName, commitId }: Props = $props();
 
-	const baseBranchService = getContext(BaseBranchService);
 	const stackService = getContext(StackService);
+	const branchesResult = $derived(stackService.branches(projectId, stackId).current);
+	const branches = $derived(branchesResult.data);
+	const baseBranchService = getContext(BaseBranchService);
 	const base = $derived(baseBranchService.base);
 
 	const changeSelection = getContext(ChangeSelectionService);
@@ -39,7 +41,30 @@
 
 	const baseSha = $derived($base?.baseSha);
 	const defaultParentId = $derived(commit ? commit.id : baseSha);
-	const parentId = $derived(commitId ? commitId : defaultParentId);
+
+	const parentId = $derived.by(() => {
+		// If commitId is explicitly provided, use it
+		if (commitId) return commitId;
+
+		// Try to find parent based on branch position in stack
+		if (branches?.length) {
+			const currentBranchIndex = branches.findIndex((b) => b.name === branchName);
+
+			// If this branch has a "parent" branch in the stack
+			if (currentBranchIndex >= 0 && currentBranchIndex < branches.length - 1) {
+				const parentBranch = branches[currentBranchIndex + 1];
+				if (parentBranch?.name) {
+					const parentCommit = stackService.commitAt(projectId, stackId, parentBranch.name, 0)
+						.current.data;
+
+					if (parentCommit?.id) return parentCommit.id;
+				}
+			}
+		}
+
+		// Fall back to default (either current commit or base SHA)
+		return defaultParentId;
+	});
 
 	/**
 	 * At the moment this code can only commit to the tip of the stack.
@@ -69,6 +94,7 @@
 			stackId,
 			parentId,
 			message: message,
+			stackSegmentShortName: branchName,
 			worktreeChanges: selection.map((item) =>
 				item.type === 'full'
 					? {
@@ -120,7 +146,7 @@
 		background: var(--clr-bg-1);
 	}
 	.right {
-		width: 300px;
+		width: 310px;
 		background-image: radial-gradient(
 			oklch(from var(--clr-scale-ntrl-50) l c h / 0.5) 0.6px,
 			#ffffff00 0.6px

apps/desktop/src/lib/stacks/stackService.svelte.ts

@@ -14,6 +14,7 @@ type CreateCommitRequest = {
 	stackId: string;
 	message: string;
 	parentId: string;
+	stackSegmentShortName: string;
 	worktreeChanges: {
 		previousPathBytes?: number[];
 		pathBytes: number[];

crates/but-cli/Cargo.toml

@@ -18,9 +18,7 @@ testing = ["dep:gitbutler-commit"]
 gitbutler-command-context.workspace = true
 gitbutler-project.workspace = true
 but-settings.workspace = true
-gitbutler-stack.workspace = true
 but-core.workspace = true
-gitbutler-oxidize.workspace = true
 but-workspace.workspace = true
 but-hunk-dependency.workspace = true
 

crates/but-cli/src/args.rs

@@ -31,6 +31,11 @@ pub enum Subcommands {
         /// The message of the new commit.
         #[clap(long, short = 'm')]
         message: Option<String>,
+        /// The name of the reference that the commit should be in.
+        ///
+        /// If there is ambiguity, this is what makes it ambiguous.
+        #[clap(long, short = 's')]
+        stack_segment_ref: Option<String>,
         /// Amend to the current or given commit.
         #[clap(long)]
         amend: bool,