Merge pull request #917 from gitbutlerapp/more-blah-blah

More blah blah

src/lib/icons/IconEmptyMug.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	viewBox="0 0 64.005 64.005"
+	data-name="Low Mug"
+	id="Low_Mug"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<rect fill="none" id="rect2317-7" transform="translate(0 0)" />
+
+	<g id="g2132" transform="translate(7.683 13.062)">
+		<path
+			d="M1.661,1.66S1.518,21.515,6.456,30.769c3.823,7.165,6.2,7.973,10.557,7.973,1.27,0,2.708-.069,4.4-.069s3.131.069,4.4.069c4.367,0,6.773-.809,10.606-7.973C41.374,21.515,41.218,1.66,41.218,1.66H1.661m0-2.257H41.218a2.257,2.257,0,0,1,2.256,2.239c.007.834.1,20.541-5.062,30.191-2.081,3.888-3.824,6.125-5.83,7.479A11.254,11.254,0,0,1,25.817,41c-.618,0-1.262-.015-1.944-.031-.777-.018-1.581-.037-2.46-.037s-1.683.019-2.46.037c-.68.016-1.323.031-1.939.031a11.173,11.173,0,0,1-6.746-1.689c-1.991-1.352-3.727-3.588-5.8-7.478C-.684,22.183-.6,2.478-.6,1.644A2.257,2.257,0,0,1,1.661-.6Z"
+			id="path2134"
+			transform="translate(0.596 0.596)"
+		/>
+	</g>
+
+	<g id="g2136" transform="translate(47.71 20.961)">
+		<path
+			d="M58.174,21.831s8.973-2.243,8.32,8.32S54.9,41.743,54.9,41.743"
+			fill="none"
+			id="path2138"
+			stroke="#000000"
+			stroke-width="2"
+			transform="translate(-54.903 -21.632)"
+		/>
+	</g>
+
+	<g id="g2140" transform="translate(17.746 43.823)">
+		<path
+			d="M8.7,6.043c3.9.109,5.551,1.582,9.751,1.979s7.617-1.833,6.315,0C20.88,13.3,18.866,12.53,12.99,12.53S5.132,13.3,1.259,8.021C.065,6.082,4.8,5.933,8.7,6.043Z"
+			id="path2142"
+			transform="translate(-1.071 -6.016)"
+		/>
+	</g>
+</svg>

src/lib/icons/IconHelp.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+	/>
+</svg>

src/lib/icons/IconLock.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+	/>
+</svg>

src/lib/icons/IconNewBadge.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	version="1.1"
+	id="_x32_"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 512 512"
+	xml:space="preserve"
+>
+	<g>
+		<path
+			fill="currentColor"
+			d="M13.175,203.061c0,0-0.004-0.013-0.007-0.026l-0.672-1.763L13.175,203.061z"
+		/>
+		<path
+			fill="currentColor"
+			d="M17.239,163.415l11.178-7.3c0.006,0,0.012-0.007,0.019-0.014L17.239,163.415z"
+		/>
+		<path
+			fill="currentColor"
+			d="M480.364,260.466c-0.549-1.436-0.823-2.951-0.823-4.466c0-1.521,0.274-3.042,0.826-4.492l16.869-44.275
+		l1.586-4.172c1.74-4.564,2.582-9.324,2.582-14.006c0.006-12.986-6.458-25.516-17.835-32.953l-5.599-3.656l-37.84-24.708
+		c-2.569-1.684-4.447-4.276-5.25-7.247l-13.548-50.047c-4.675-17.23-20.28-29.075-37.978-29.075c-0.669,0-1.335,0.013-2.004,0.052
+		L329.766,44v-0.006l-0.774,0.02c-2.896,0-5.687-0.98-7.933-2.788l-37.766-30.42l-2.598-2.089
+		C273.507,2.912,264.725-0.006,256.002,0c-8.72-0.013-17.504,2.912-24.697,8.717l0.01-0.007L195.11,37.87l-4.159,3.35
+		c-2.256,1.815-5.057,2.795-7.94,2.795L182.338,44l-51.555-2.572l-0.033-0.007c-0.8-0.046-1.502-0.052-2.102-0.052
+		c-17.701,0-33.303,11.844-37.978,29.075l-13.549,50.047c-0.806,2.983-2.693,5.582-5.278,7.273l-3.732,2.436l-39.694,25.915
+		c-11.371,7.444-17.828,19.966-17.822,32.946c0,4.675,0.839,9.415,2.573,13.973l18.465,48.473l0.003,0.006
+		c0.548,1.437,0.826,2.965,0.826,4.486c0,1.522-0.274,3.043-0.826,4.48l-18.461,48.46l0.003-0.006
+		c-1.74,4.564-2.583,9.318-2.583,13.999c-0.006,12.987,6.451,25.523,17.838,32.966l32.218,21.038l11.201,7.313
+		c2.583,1.684,4.463,4.27,5.269,7.26l13.549,50.041c4.671,17.23,20.28,29.075,37.978,29.081c0.6-0.006,1.254-0.013,1.952-0.052
+		l-1.482,0.078l53.439-2.67h-0.026l0.5-0.007c2.866,0,5.658,0.98,7.91,2.795l40.371,32.522h0.003
+		c7.185,5.792,15.964,8.71,24.687,8.704c8.72,0.007,17.502-2.912,24.691-8.71l43.841-35.318l-3.467,2.795
+		c2.253-1.815,5.038-2.788,7.907-2.788l0.6,0.013l52.189,2.605l-0.262-0.012c0.568,0.026,1.186,0.039,1.855,0.045
+		c17.691-0.006,33.306-11.844,37.978-29.081l13.548-50.041c0.806-2.99,2.684-5.569,5.262-7.254l43.45-28.37
+		c11.364-7.444,17.818-19.966,17.812-32.947c0-4.682-0.842-9.442-2.586-14.012L480.364,260.466z M455.38,241.988
+		c-1.72,4.512-2.582,9.265-2.582,14.012c0,4.754,0.862,9.507,2.582,14.019l18.449,48.44l0.003,0.007
+		c0.565,1.482,0.829,2.984,0.829,4.473c-0.007,4.166-2.063,8.188-5.716,10.571l-43.41,28.344h0.003
+		c-8.086,5.275-13.95,13.346-16.474,22.67l-13.548,50.04c-1.485,5.524-6.513,9.324-12.16,9.317l-0.751-0.02l-0.189-0.006
+		l-51.474-2.566h0.036c-0.634-0.039-1.303-0.052-2.004-0.059c-8.968,0-17.685,3.069-24.694,8.717l-3.47,2.801l-36.897,29.721
+		c-2.324,1.874-5.086,2.788-7.91,2.788c-2.82,0-5.586-0.914-7.913-2.788l-40.368-32.522c-7.006-5.641-15.719-8.71-24.69-8.71
+		c-0.601,0-1.303,0.007-2.106,0.052v0.007l-51.64,2.579l0.016-0.006l-0.652,0.013c-5.642,0.006-10.676-3.794-12.161-9.317
+		l-13.548-50.04c-2.524-9.324-8.387-17.394-16.474-22.67l-32.212-21.031l-11.194-7.313c-3.65-2.377-5.713-6.405-5.72-10.578
+		c0.003-1.496,0.265-2.997,0.826-4.466l18.461-48.454l-0.003,0.007c1.72-4.518,2.582-9.265,2.582-14.019
+		c0-4.753-0.858-9.506-2.582-14.018L38.848,195.33l-0.679-1.776c-0.565-1.489-0.826-2.997-0.83-4.492
+		c0.007-4.172,2.067-8.188,5.716-10.564l43.414-28.343l0.007-0.007c8.082-5.288,13.94-13.352,16.464-22.67l13.548-50.047
+		c1.482-5.517,6.523-9.324,12.161-9.317l0.503,0.006l51.91,2.592l0.056,0.007c0.63,0.026,1.264,0.04,1.894,0.046
+		c8.968,0,17.688-3.063,24.701-8.704l40.386-32.529c2.321-1.874,5.08-2.782,7.904-2.788c2.821,0,5.583,0.914,7.907,2.788
+		l-2.602-2.096l42.979,34.618c7.022,5.654,15.752,8.704,24.707,8.704c0.666,0,1.263-0.02,1.792-0.033h-0.14l52.075-2.599h0.035
+		l0.601-0.013c5.641-0.007,10.678,3.8,12.16,9.317l13.548,50.047c2.524,9.317,8.38,17.381,16.464,22.67l49.018,32.006l-5.602-3.656
+		c3.653,2.377,5.71,6.392,5.716,10.558c0,1.496-0.264,2.998-0.832,4.492l-20.832,54.683L455.38,241.988z"
+		/>
+		<path
+			fill="currentColor"
+			d="M196.151,226.298l-13.784,2.709c-0.725,0.15-1.123,0.725-0.979,1.463l10.254,52.175l-0.597,0.124
+		l-39.528-46.423c-0.653-0.757-1.45-0.986-2.305-0.816l-14.636,2.88c-0.725,0.144-1.123,0.718-0.966,1.455l15.817,80.448
+		c0.14,0.738,0.725,1.136,1.45,0.992l13.783-2.71c0.725-0.15,1.123-0.731,0.983-1.469l-10.242-52.051l0.61-0.118l39.613,46.28
+		c0.653,0.757,1.338,0.999,2.318,0.816l14.509-2.86c0.724-0.144,1.122-0.725,0.966-1.463l-15.814-80.454
+		C197.46,226.54,196.876,226.155,196.151,226.298z"
+		/>
+		<path
+			fill="currentColor"
+			d="M280.868,279.649l-35.731,7.026c-0.483,0.105-0.78-0.091-0.865-0.581l-3.385-17.192
+		c-0.102-0.483,0.098-0.77,0.581-0.874l29.757-5.85c0.725-0.144,1.123-0.719,0.983-1.449l-2.546-12.922
+		c-0.144-0.724-0.728-1.123-1.453-0.986l-29.754,5.857c-0.484,0.091-0.784-0.111-0.881-0.594l-3.232-16.454
+		c-0.098-0.49,0.101-0.784,0.584-0.875l35.731-7.026c0.725-0.144,1.123-0.725,0.966-1.456l-2.56-13.038
+		c-0.144-0.738-0.725-1.13-1.453-0.986l-53.152,10.454c-0.741,0.144-1.126,0.725-0.982,1.462l15.817,80.454
+		c0.156,0.732,0.724,1.123,1.465,0.98l53.152-10.454c0.728-0.144,1.126-0.725,0.97-1.456l-2.563-13.046
+		C282.178,279.91,281.593,279.506,280.868,279.649z"
+		/>
+		<path
+			fill="currentColor"
+			d="M377.221,190.694l-15.605,3.068c-0.852,0.164-1.266,0.634-1.224,1.515l-1.221,54.291l-0.258,0.046
+		l-24.847-49.16c-0.398-0.699-0.983-1.084-1.708-0.94l-10.61,2.083c-0.839,0.17-1.237,0.744-1.338,1.541l-3.911,54.82l-0.242,0.052
+		l-22.19-49.701c-0.255-0.718-0.839-1.096-1.691-0.927l-15.732,3.082c-0.852,0.17-0.996,0.706-0.725,1.417l37.266,76.23
+		c0.398,0.685,0.98,1.084,1.708,0.94l12.19-2.403c0.852-0.163,1.25-0.751,1.348-1.528l4.368-54.415l0.242-0.045l24.521,48.728
+		c0.385,0.685,0.97,1.084,1.822,0.914l12.19-2.403c0.852-0.157,1.365-0.77,1.352-1.535l5.504-84.645
+		C378.4,190.955,378.073,190.524,377.221,190.694z"
+		/>
+	</g>
+</svg>

src/routes/repo/[projectId]/+page.svelte

@@ -50,7 +50,7 @@
 	<div class="flex w-full max-w-full" role="group" on:dragover|preventDefault>
 		<Tray {branches} {remoteBranches} />
 		<div
-			class="z-50 -ml-[0.250rem] w-[0.250rem] shrink-0 cursor-col-resize hover:bg-orange-200 dark:bg-dark-1000 dark:hover:bg-orange-700"
+			class="z-30 -ml-[0.250rem] w-[0.250rem] shrink-0 cursor-col-resize hover:bg-orange-200 dark:bg-dark-1000 dark:hover:bg-orange-700"
 			draggable="true"
 			role="separator"
 			on:drag={(e) => {
@@ -135,9 +135,7 @@
 				</p>
 				<p class="text-light-700 dark:text-dark-100">
 					This works by specifying a "base branch" that represents the state of production, normally
-					something like "origin/master". All of your virtual branches are based off of this branch
+					something like "origin/master".
-					and need to be kept up to date with this branch to ensure they are working with the latest
-					code.
 				</p>
 				<div class="font-bold">Ownership, Committing and Pushing</div>
 				<p class="text-light-700 dark:text-dark-100">

src/routes/repo/[projectId]/Board.svelte

@@ -6,6 +6,7 @@
 	import { BRANCH_CONTROLLER_KEY, BranchController } from '$lib/vbranches/branchController';
 	import { getContext } from 'svelte';
 	import type { getCloudApiClient } from '$lib/api/cloud/api';
+	import { Link } from '$lib/components';
 	export let projectId: string;
 	export let projectPath: string;
 	export let branches: Branch[];
@@ -91,5 +92,31 @@
 			{upstream}
 		/>
 	{/each}
-	<NewBranchDropZone />
+
+	{#if branches.length == 0}
+		<div
+			class="m-auto mx-20 flex w-full flex-grow items-center justify-center rounded border border-light-400 bg-light-200 p-8 dark:border-dark-500 dark:bg-dark-1000"
+		>
+			<div class="inline-flex w-96 flex-col items-center gap-y-4">
+				<h3 class="text-xl font-medium">You are up to date</h3>
+				<p class="text-light-700 dark:text-dark-200">
+					This means that your working directory looks exactly like your base branch. There isn't
+					anything locally that is not in your production code.
+				</p>
+				<p class="text-light-700 dark:text-dark-200">
+					If you start editing files in your working directory, a new virtual branch will
+					automatically be created and you can manage it here.
+				</p>
+				<Link
+					target="_blank"
+					rel="noreferrer"
+					href="https://docs.gitbutler.com/features/virtual-branches/branch-lanes"
+				>
+					Learn more
+				</Link>
+			</div>
+		</div>
+	{:else}
+		<NewBranchDropZone />
+	{/if}
 </div>

src/routes/repo/[projectId]/BranchLane.svelte

@@ -20,6 +20,7 @@
 	import { invoke } from '@tauri-apps/api/tauri';
 	import type { getCloudApiClient } from '$lib/api/cloud/api';
 	import Scrollbar from '$lib/components/Scrollbar.svelte';
+	import IconNewBadge from '$lib/icons/IconNewBadge.svelte';
 
 	const [send, receive] = crossfade({
 		duration: (d) => Math.sqrt(d * 200),
@@ -378,13 +379,26 @@
 						</div>
 					{/if}
 					{#if files.length == 0}
-						<!-- attention: these markers have custom css at the bottom of thise file -->
+						{#if commits.length == 0}
-						<div
+							<div
-							class="no-changes rounded text-center font-mono text-light-700 dark:border-zinc-700"
+								class="no-changes space-y-6 rounded p-8 text-center text-light-700 dark:border-zinc-700"
-							data-dnd-ignore
+								data-dnd-ignore
-						>
+							>
-							No uncomitted changes
+								<p>Nothing on this branch yet.</p>
-						</div>
+								<IconNewBadge class="mx-auto mt-4 h-16 w-16 text-blue-400 dark:text-dark-400" />
+								<p class="px-12 text-light-600">
+									Get some work done, then throw some files my way!
+								</p>
+							</div>
+						{:else}
+							<!-- attention: these markers have custom css at the bottom of thise file -->
+							<div
+								class="no-changes rounded text-center font-mono text-light-700 dark:border-zinc-700"
+								data-dnd-ignore
+							>
+								No uncommitted changes on this branch
+							</div>
+						{/if}
 					{/if}
 				</div>
 				{#if localCommits.length > 0 || remoteCommits.length > 0}
@@ -498,6 +512,16 @@
 </div>
 
 <PopupMenu bind:this={popupMenu} let:item={branchId}>
+	{#if !maximized}
+		<PopupMenuItem on:click={() => (maximized = !maximized)}>Maximize</PopupMenuItem>
+	{:else}
+		<PopupMenuItem on:click={() => (maximized = !maximized)}>Minimize</PopupMenuItem>
+	{/if}
+
+	<div class="mx-3">
+		<div class="my-2 h-[0.0625rem] w-full bg-light-300 dark:bg-dark-500" />
+	</div>
+
 	<PopupMenuItem on:click={() => branchId && branchController.unapplyBranch(branchId)}>
 		Unapply
 	</PopupMenuItem>

src/routes/repo/[projectId]/FileCardNext.svelte

@@ -21,6 +21,8 @@
 	import { slide } from 'svelte/transition';
 	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/userSettings';
 	import { summarizeHunk } from '$lib/summaries';
+	import Tooltip from '$lib/components/Tooltip/Tooltip.svelte';
+	import IconLock from '$lib/icons/IconLock.svelte';
 
 	export let file: File;
 	export let conflicted: boolean;
@@ -83,7 +85,7 @@
 	on:dragstart={(e) => e.dataTransfer?.setData('text/hunk', getAllHunksOwnership())}
 	role="group"
 	class="changed-file inner"
-	class:opacity-60={isFileLocked}
+	class:opacity-80={isFileLocked}
 >
 	<div
 		class="flex w-full flex-col justify-center gap-2 border-b border-t border-light-300 bg-light-50 py-1 text-light-900 dark:border-dark-500 dark:bg-dark-800 dark:text-light-300"
@@ -111,6 +113,15 @@
 
 				{@html boldenFilename(file.path)}
 			</div>
+			{#if isFileLocked}
+				<div class="flex flex-grow-0">
+					<Tooltip
+						label="File changes cannot be moved because part of this file was already committed into this branch"
+					>
+						<IconLock class="h-4 w-4 text-yellow-600" />
+					</Tooltip>
+				</div>
+			{/if}
 			<div
 				on:click|stopPropagation={() => {
 					expanded = !expanded;
@@ -119,7 +130,7 @@
 				on:keypress={() => (expanded = !expanded)}
 				role="button"
 				tabindex="0"
-				class="cursor-pointer px-3 py-2 text-light-600 dark:text-dark-200"
+				class="flex-grow-0 cursor-pointer px-3 py-2 text-light-600 dark:text-dark-200"
 			>
 				{#if !file.binary}
 					{#if expanded}

src/routes/repo/[projectId]/Tray.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Checkbox, Modal } from '$lib/components';
+	import { Button, Checkbox, Link, Modal } from '$lib/components';
 	import type { Branch, BranchData } from '$lib/vbranches/types';
 	import { formatDistanceToNow } from 'date-fns';
 	import { IconGitBranch, IconRemote } from '$lib/icons';
@@ -9,9 +9,12 @@
 	import PopupMenuItem from '$lib/components/PopupMenu/PopupMenuItem.svelte';
 	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/userSettings';
 	import { getContext } from 'svelte';
-	import { BRANCH_CONTROLLER_KEY, BranchController } from '$lib/vbranches/branchController';
+	import type { BranchController } from '$lib/vbranches/branchController';
+	import { BRANCH_CONTROLLER_KEY } from '$lib/vbranches/branchController';
 	import Tooltip from '$lib/components/Tooltip/Tooltip.svelte';
 	import Scrollbar from '$lib/components/Scrollbar.svelte';
+	import IconMeatballMenu from '$lib/icons/IconMeatballMenu.svelte';
+	import IconHelp from '$lib/icons/IconHelp.svelte';
 
 	export let branches: Branch[];
 	export let remoteBranches: BranchData[];
@@ -83,7 +86,7 @@
 	<div
 		class="flex items-center justify-between border-b border-light-400 bg-light-100 px-2 py-1 pr-1 dark:border-dark-600 dark:bg-dark-800"
 	>
-		<div class="font-bold">Your branches</div>
+		<div class="font-bold">Your Virtual Branches</div>
 		<div class="flex h-4 w-4 justify-around">
 			<button class="h-full w-full" on:click={() => (yourBranchesOpen = !yourBranchesOpen)}>
 				{#if yourBranchesOpen}
@@ -105,7 +108,7 @@
 		>
 			<div bind:this={vbContents}>
 				{#if !branches || branches.length == 0}
-					<div class="px-2 py-1">There are currently no branches</div>
+					<div class="p-4 text-light-700">You currently have no virtual branches.</div>
 				{:else}
 					{#each branches as branch (branch.id)}
 						{@const { added, removed } = sumBranchLinesAddedRemoved(branch)}
@@ -116,39 +119,47 @@
 							class="border-b border-light-400 p-2 dark:border-dark-600"
 						>
 							<div class="flex flex-row justify-between">
-								<div class="flex w-full items-center">
+								<div class="flex flex-shrink items-center">
 									<Checkbox
 										on:change={() => toggleBranch(branch)}
 										bind:checked={branch.active}
 										disabled={!(branch.mergeable || !branch.baseCurrent) || branch.conflicted}
 									/>
-									<div class="ml-2 w-full truncate text-black dark:text-white">
+									<div class="max-w-36 ml-2 w-36 flex-grow truncate text-black dark:text-white">
 										{branch.name}
 									</div>
 								</div>
-								{#if !branch.active}
+								<button
-									{#if !branch.baseCurrent}
+									class="h-8 w-8 flex-grow-0 p-2 text-light-600 transition-colors hover:bg-zinc-300 dark:text-dark-200 dark:hover:bg-zinc-800"
-										<!-- branch will cause merge conflicts if applied -->
+									on:click={(e) => yourBranchContextMenu.openByMouse(e, branch)}
-										<Tooltip label="Will introduce merge conflicts if applied">
+								>
-											<div class="text-yellow-500">&#9679;</div>
+									<IconMeatballMenu />
-										</Tooltip>
+								</button>
-									{:else if branch.mergeable}
-										<Tooltip label="Can be applied cleanly">
-											<div class="text-green-500">&#9679;</div>
-										</Tooltip>
-									{:else}
-										<Tooltip
-											label="Canflicts with changes in your working directory, cannot be applied"
-										>
-											<div class="text-red-500">&#9679;</div>
-										</Tooltip>
-									{/if}
-								{/if}
 							</div>
 							<div class="flex items-center text-sm text-light-700 dark:text-dark-300">
 								<div class="flex-grow">
 									{latestModifiedAt ? formatDistanceToNow(latestModifiedAt) : ''}
 								</div>
+								{#if !branch.active}
+									<div class="mr-2">
+										{#if !branch.baseCurrent}
+											<!-- branch will cause merge conflicts if applied -->
+											<Tooltip label="Will introduce merge conflicts if applied">
+												<div class="text-yellow-500">&#9679;</div>
+											</Tooltip>
+										{:else if branch.mergeable}
+											<Tooltip label="Can be applied cleanly">
+												<div class="text-green-500">&#9679;</div>
+											</Tooltip>
+										{:else}
+											<Tooltip
+												label="Canflicts with changes in your working directory, cannot be applied"
+											>
+												<div class="text-red-500">&#9679;</div>
+											</Tooltip>
+										{/if}
+									</div>
+								{/if}
 								<div class="flex gap-1 font-mono text-sm font-bold">
 									<span class="text-green-500">
 										+{added}
@@ -170,7 +181,16 @@
 	<div
 		class="flex items-center justify-between border-b border-light-400 bg-light-100 px-2 py-1 pr-1 dark:border-dark-600 dark:bg-dark-800"
 	>
-		<div class="font-bold">Remote branches</div>
+		<div class="flex flex-row place-items-center space-x-2">
+			<div class="font-bold">Remote Branches</div>
+			<a
+				target="_blank"
+				rel="noreferrer"
+				href="https://docs.gitbutler.com/features/virtual-branches/remote-branches"
+			>
+				<IconHelp class="h-3 w-3 text-light-600" />
+			</a>
+		</div>
 		<div class="flex h-4 w-4 justify-around">
 			<button class="h-full w-full" on:click={() => (remoteBranchesOpen = !remoteBranchesOpen)}>
 				{#if remoteBranchesOpen}
@@ -189,7 +209,18 @@
 		>
 			<div bind:this={rbContents}>
 				{#if !remoteBranches || remoteBranches.length == 0}
-					<div class="px-2 py-1">There are currently no branches</div>
+					<div class="p-4">
+						<p class="mb-2 text-light-700">
+							There are no local or remote Git branches that can be imported as virtual branches
+						</p>
+						<Link
+							target="_blank"
+							rel="noreferrer"
+							href="https://docs.gitbutler.com/features/virtual-branches/remote-branches"
+						>
+							Learn more
+						</Link>
+					</div>
 				{:else}
 					{#each remoteBranches ?? [] as branch}
 						<div
@@ -200,9 +231,15 @@
 							<div class="flex flex-row items-center gap-x-2 pr-1">
 								<div class="text-light-600 dark:text-dark-200">
 									{#if branch.name.match('refs/remotes')}
-										<IconRemote class="h-4 w-4" />
+										<Tooltip
+											label="This is a remote branch that you don't have a virtual branch tracking yet"
+										>
+											<IconRemote class="h-4 w-4" />
+										</Tooltip>
 									{:else}
-										<IconGitBranch class="h-4 w-4" />
+										<Tooltip label="This is a local branch that is not a virtual branch yet">
+											<IconGitBranch class="h-4 w-4" />
+										</Tooltip>
 									{/if}
 								</div>
 								<div class="flex-grow truncate text-black dark:text-white" title={branch.name}>
@@ -211,15 +248,31 @@
 										.replace('origin/', '')
 										.replace('refs/heads/', '')}
 								</div>
-								<div>{branch.ahead}/{branch.behind}</div>
+								<button
-								{#if !branch.mergeable}
+									class="h-8 w-8 flex-grow-0 p-2 text-light-600 transition-colors hover:bg-zinc-300 dark:text-dark-200 dark:hover:bg-zinc-800"
-									<div class="font-bold text-red-500" title="Can't be merged">!</div>
+									on:click={(e) => remoteBranchContextMenu.openByMouse(e, branch)}
-								{/if}
+								>
+									<IconMeatballMenu />
+								</button>
 							</div>
-							<div class="flex flex-row justify-between pr-1 text-light-700 dark:text-dark-300">
+							<div
-								<div class="text-sm">{formatDistanceToNow(branch.lastCommitTs * 1000)}</div>
+								class="flex flex-row justify-between space-x-2 rounded bg-light-100 p-1 pr-1 text-light-700 dark:bg-dark-700 dark:text-dark-300"
+							>
+								<div class="flex-grow-0 text-sm">
+									{formatDistanceToNow(branch.lastCommitTs * 1000)}
+								</div>
+								<div class="flex flex-grow-0 flex-row space-x-2">
+									<Tooltip
+										label="This branch has {branch.ahead} commits not on your base branch and your base has {branch.behind} commits not on this branch yet"
+									>
+										<div class="text-sm">{branch.ahead}/{branch.behind}</div>
+									</Tooltip>
+									{#if !branch.mergeable}
+										<div class="font-bold text-red-500" title="Can't be merged">!</div>
+									{/if}
+								</div>
 								<div
-									class="isolate flex -space-x-2 overflow-hidden transition duration-300 ease-in-out hover:space-x-1 hover:transition hover:ease-in"
+									class="isolate flex flex-grow justify-end -space-x-2 overflow-hidden transition duration-300 ease-in-out hover:space-x-1 hover:transition hover:ease-in"
 								>
 									{#each branch.authors as author}
 										<img

src/routes/repo/[projectId]/UpstreamBranchLane.svelte

@@ -19,6 +19,7 @@
 	const branchController = getContext<BranchController>(BRANCH_CONTROLLER_KEY);
 
 	$: expanded = base.behind > 0;
+	$: multiple = base.upstreamCommits.length > 1;
 </script>
 
 <div
@@ -29,13 +30,17 @@
 	dark:border-dark-600 dark:border-r-light-800 dark:bg-dark-700 dark:text-dark-100"
 	role="group"
 >
-	<div class="flex w-full bg-light-200 dark:bg-dark-800">
+	<div class="flex w-full {expanded ? 'bg-purple-300' : 'bg-light-200'} dark:bg-dark-800">
 		<div
 			class="flex flex-grow items-center border-b border-light-500 pl-1 dark:border-dark-500"
 			class:border-r={!expanded}
 			class:pr-1={!expanded}
 		>
-			<Tooltip label={'Fetch ' + base.branchName}>
+			<Tooltip
+				label={'Your upstream branch (' +
+					base.branchName +
+					') is up to date. Click to fetch again and check for new work.'}
+			>
 				<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 				<button
 					on:mouseover={() => (buttonHovered = true)}
@@ -83,6 +88,13 @@
 					bind:this={viewport}
 					class="hide-native-scrollbar flex max-h-full flex-grow flex-col overflow-y-scroll pb-8 pt-2"
 				>
+					<div
+						class="mb-2 ml-8 rounded-sm bg-light-300 p-1 text-center text-xs text-light-700 dark:bg-dark-500"
+					>
+						There {multiple ? 'are' : 'is'}
+						{base.upstreamCommits.length} unmerged upstream
+						{multiple ? 'commits' : 'commit'}
+					</div>
 					<div bind:this={contents}>
 						<div class="ml-8">
 							<Tooltip
@@ -136,8 +148,20 @@
 <!-- Confirm target update modal -->
 
 <Modal width="small" bind:this={updateTargetModal}>
-	<svelte:fragment slot="title">Update target</svelte:fragment>
+	<svelte:fragment slot="title">Merge Upstream Work</svelte:fragment>
-	<p>You are about to update the base branch.</p>
+	<div class="flex flex-col space-y-2">
+		<p class="text-blue-600">You are about to merge upstream work from your base branch.</p>
+		<p class="font-bold">What will this do?</p>
+		<p>
+			We will try to merge the work that is upstream into each of your virtual branches, so that
+			they are all up to date.
+		</p>
+		<p>
+			Any virtual branches that we can't merge cleanly, we will unapply and mark with a blue dot.
+			You can merge these manually later.
+		</p>
+		<p>Any virtual branches that are fully integrated upstream will be automatically removed.</p>
+	</div>
 	<svelte:fragment slot="controls" let:close>
 		<Button height="small" kind="outlined" on:click={close}>Cancel</Button>
 		<Button
@@ -148,7 +172,7 @@
 				close();
 			}}
 		>
-			Update
+			Merge Upstream
 		</Button>
 	</svelte:fragment>
 </Modal>

tailwind.config.cjs

@@ -102,9 +102,16 @@ const config = {
 				900: '#1e3a8a'
 			},
 			yellow: {
-				400: '#facc15',
+				50: '#FFFBE6',
-				500: '#eab308',
+				100: '#FFF7CC',
-				900: '#713f12'
+				200: '#FEF0A2',
+				300: '#FDE978',
+				400: '#FACC15',
+				500: '#EAB308',
+				600: '#C19206',
+				700: '#987105',
+				800: '#6F5004',
+				900: '#713F12'
 			},
 			red: {
 				400: '#F87171',
@@ -126,11 +133,28 @@ const config = {
 				900: '#14532d'
 			},
 			purple: {
-				600: '#5852A0'
+				50: '#F2F0FD',
+				100: '#E6E0FA',
+				200: '#CFC7F5',
+				300: '#B8ADF1',
+				400: '#A193EC',
+				500: '#8A79E7',
+				600: '#5852A0',
+				700: '#443D7A',
+				800: '#302854',
+				900: '#1C142E'
 			},
 			orange: {
-				200: '#fed7aa',
+				50: '#FEF6E4',
-				700: '#CD6E02'
+				100: '#FEE9C8',
+				200: '#FED7AA',
+				300: '#FDC592',
+				400: '#FCB37B',
+				500: '#FBA163',
+				600: '#FA8E4B',
+				700: '#CD6E02',
+				800: '#A55602',
+				900: '#7D3F02'
 			},
 			zinc: {
 				50: '#fafafa',