chore: update branch conflict handling and apply button behavior

packages/ui/src/lib/vbranches/types.ts

@@ -20,6 +20,9 @@ export class File {
 	expanded?: boolean;
 	@Transform((obj) => new Date(obj.value))
 	modifiedAt!: Date;
+	// This indicates if a file has merge conflict markers generated and not yet resolved.
+	// This is true for files after a branch which does not apply cleanly (Branch.isMergeable == false) is applied.
+	// (therefore this field is applicable only for applied branches, i.e. active == true)
 	conflicted!: boolean;
 	content!: string;
 	binary!: boolean;
@@ -38,6 +41,7 @@ export class Branch {
 	id!: string;
 	name!: string;
 	notes!: string;
+	// Active means the branch has been applied to the working directory (i.e. "Applied Branches")
 	active!: boolean;
 	@Type(() => File)
 	files!: File[];
@@ -51,6 +55,10 @@ export class Branch {
 	conflicted!: boolean;
 	baseCurrent!: boolean;
 	ownership!: string;
+	// This should actually be named "canBeCleanlyApplied" - if it's false, applying this branch will generate conflict markers,
+	// but it's totatlly okay for a user to apply it.
+	// If the branch has been already applied, then it was either performed cleanly or we generated conflict markers in the diffs.
+	// (therefore this field is applicable for stashed/unapplied or remote branches, i.e. active == false)
 	isMergeable!: Promise<boolean>;
 }
 

packages/ui/src/routes/[projectId]/components/BranchFiles.svelte

@@ -34,7 +34,7 @@
 	$: scrollable = contents ? contents.scrollHeight > contents.offsetHeight : false;
 </script>
 
-{#if branch.conflicted}
+{#if branch.active && branch.conflicted}
 	<div class="mb-2 bg-red-500 p-2 font-bold text-white">
 		{#if branch.files.some((f) => f.conflicted)}
 			This virtual branch conflicts with upstream changes. Please resolve all conflicts and commit

packages/ui/src/routes/[projectId]/components/BranchLane.svelte

@@ -272,24 +272,6 @@
 		>
 			<div class="flex">
 				<div class="border-color-4 flex flex-grow flex-col">
-					{#await branch.isMergeable then isMergeable}
-						{#if !isMergeable}
-							<!-- use of relative is for tooltip rendering -->
-							<div class="bg-red-500 px-2 py-0.5 text-center font-bold dark:bg-red-700">
-								<Tooltip
-									label="Canflicts with changes in your working directory, cannot be applied"
-								>
-									<span class="text-white">cannot be applied</span>
-								</Tooltip>
-							</div>
-						{:else if !branch.baseCurrent}
-							<div class="bg-yellow-500 px-2 py-0.5 font-bold dark:bg-yellow-600">
-								<Tooltip label="Will introduce merge conflicts if applied">
-									<span class="">will cause merge conflicts</span>
-								</Tooltip>
-							</div>
-						{/if}
-					{/await}
 					<BranchHeader
 						{branchController}
 						{branch}

packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte

@@ -6,6 +6,7 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import type { Branch } from '$lib/vbranches/types';
 	import Modal from '$lib/components/Modal.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	export let data: PageData;
 
@@ -41,18 +42,25 @@
 	{:else if !$branches$}
 		<p>Loading...</p>
 	{:else if branch}
-		{#await branch.isMergeable then isMergeable}
-			{#if isMergeable}
 		<Button kind="outlined" color="primary" on:click={() => branch && applyBranch(branch)}>
-					Apply
+			<span class="purple"> Apply </span>
 		</Button>
-			{/if}
-		{/await}
 		<IconButton
 			icon="question-mark"
 			title="delete branch"
 			on:click={() => deleteBranchModal.show(branch)}
 		/>
+		{#await branch.isMergeable then isMergeable}
+			{#if isMergeable}
+				<Tooltip
+					label="Applying this branch will add merge conflict markers that you will have to resolve"
+				>
+					<div class="flex select-none bg-yellow-500 px-2 py-0.5 font-bold dark:bg-yellow-600">
+						<span>Conflicts with Applied Branches</span>
+					</div>
+				</Tooltip>
+			{/if}
+		{/await}
 		<BranchLane
 			{branch}
 			{branchController}