show upstream commits

src-tauri/src/virtual_branches/mod.rs

@@ -63,8 +63,7 @@ pub struct VirtualBranchCommit {
     pub id: String,
     pub description: String,
     pub created_at: u128,
-    pub author_name: String,
-    pub author_email: String,
+    pub author: Author,
     pub is_remote: bool,
 }
 
@@ -144,7 +143,7 @@ pub struct BaseBranch {
     pub upstream_commits: Vec<VirtualBranchCommit>,
 }
 
-#[derive(Debug, Serialize, Hash, PartialEq, Eq)]
+#[derive(Debug, Serialize, Hash, Clone, PartialEq, Eq)]
 #[serde(rename_all = "camelCase")]
 pub struct Author {
     pub name: String,
@@ -900,8 +899,6 @@ pub fn commit_to_vbranch_commit(
 ) -> Result<VirtualBranchCommit> {
     let timestamp = commit.time().seconds() as u128;
     let signature = commit.author();
-    let name = signature.name().unwrap().to_string();
-    let email = signature.email().unwrap().to_string();
     let message = commit.message().unwrap().to_string();
     let sha = commit.id().to_string();
 
@@ -913,8 +910,7 @@ pub fn commit_to_vbranch_commit(
     let commit = VirtualBranchCommit {
         id: sha,
         created_at: timestamp * 1000,
-        author_name: name,
-        author_email: email,
+        author: Author::from(signature),
         description: message,
         is_remote,
     };

src/lib/vbranches/types.ts

@@ -42,8 +42,7 @@ export class Branch {
 
 export class Commit {
 	id!: string;
-	authorEmail!: string;
-	authorName!: string;
+	author!: Author;
 	description!: string;
 	@Transform((obj) => new Date(obj.value))
 	createdAt!: Date;

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

@@ -46,7 +46,7 @@
 
 {#if target}
 	<div class="flex w-full max-w-full" role="group" on:dragover|preventDefault>
-		<Tray {branches} {target} {remoteBranches} />
+		<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"
 			draggable="true"
@@ -60,7 +60,7 @@
 		/>
 		<div class="flex w-full flex-col overflow-x-hidden">
 			<Board {branches} {projectId} projectPath={project.path} {target} />
-			<BottomPanel />
+			<BottomPanel {target} />
 		</div>
 	</div>
 {:else}

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

@@ -1,10 +1,25 @@
 <script lang="ts">
+	import { Button, Modal } from '$lib/components';
 	import { slide } from 'svelte/transition';
 	import { IconTriangleUp, IconTriangleDown } from '$lib/icons';
+	import type { BaseBranch } from '$lib/vbranches';
+	import type { BranchController } from '$lib/vbranches';
+	import { IconRefresh } from '$lib/icons';
+	import { BRANCH_CONTROLLER_KEY } from '$lib/vbranches/branchController';
+	import { getContext } from 'svelte';
+
+	export let target: BaseBranch;
+
+	let updateTargetModal: Modal;
+
+	const branchController = getContext<BranchController>(BRANCH_CONTROLLER_KEY);
+
+	$: console.log(target);
 	let shown = false;
+	$: behindMessage = target.behind > 0 ? `behind ${target.behind}` : 'up-to-date';
 </script>
 
-<div class="flex border-t border-light-400 dark:border-dark-600">
+<div class="flex border-t border-light-400 p-2 dark:border-dark-600">
 	<div class="ml-4 flex flex-col">
 		<div
 			role="button"
@@ -18,24 +33,72 @@
 			{:else}
 				<IconTriangleUp />
 			{/if}
-			<span class="text-sm font-bold uppercase"> Common base </span>
+			<div class="flex flex-row justify-between space-x-2">
+				<div class="font-bold uppercase">Common base</div>
+				<div class="flex-grow pb-1 font-bold" title={behindMessage}>{target.branchName}</div>
+				<div class="pb-1">{target.behind > 0 ? `behind ${target.behind}` : 'up-to-date'}</div>
+				<div class="flex-shrink-0 text-light-700 dark:text-dark-100" title={behindMessage}>
+					{#if target.behind == 0}
+						<button
+							class="p-0 hover:bg-light-200 disabled:text-light-300 dark:hover:bg-dark-800 disabled:dark:text-dark-300"
+							on:click={() => branchController.fetchFromTarget()}
+							title="click to fetch"
+						>
+							<IconRefresh />
+						</button>
+					{:else}
+						<button
+							class="p-0 disabled:text-light-300 disabled:dark:text-dark-300"
+							on:click={updateTargetModal.show}
+							disabled={target.behind == 0}
+							title={target.behind > 0 ? 'click to update target' : 'already up-to-date'}
+						>
+							<IconRefresh />
+						</button>
+					{/if}
+				</div>
+			</div>
 		</div>
 		{#if shown}
 			<div class="h-64 py-2" transition:slide={{ duration: 150 }}>
-				<div class="">
-					<div>We're no strangers to love You know the rules and so do I</div>
-					<div>
-						A full commitment's what I'm thinking of You wouldn't get this from any other guy
-					</div>
-					<div>I just wanna tell you how I'm feeling Gotta make you understand</div>
-					<div>Never gonna give you up</div>
-					<div>Never gonna let you down</div>
-					<div>Never gonna run around and desert you</div>
-					<div>Never gonna make you cry</div>
-					<div>Never gonna say goodbye</div>
-					<div>Never gonna tell a lie and hurt you</div>
+				<div>Upstream Commits:</div>
+				<div class="flex flex-col">
+					{#each target.upstreamCommits as commit}
+						<div class="flex flex-row space-x-2">
+							<img
+								class="relative z-30 inline-block h-4 w-4 rounded-full ring-1 ring-white dark:ring-black"
+								title="Gravatar for {commit.author.email}"
+								alt="Gravatar for {commit.author.email}"
+								srcset="{commit.author.gravatarUrl} 2x"
+								width="100"
+								height="100"
+								on:error
+							/>
+							<div>{commit.description.substring(0, 50)}</div>
+						</div>
+					{/each}
 				</div>
 			</div>
 		{/if}
 	</div>
 </div>
+
+<!-- Confirm target update modal -->
+
+<Modal width="small" bind:this={updateTargetModal}>
+	<svelte:fragment slot="title">Update target</svelte:fragment>
+	<p>You are about to update the base branch.</p>
+	<svelte:fragment slot="controls" let:close>
+		<Button height="small" kind="outlined" on:click={close}>Cancel</Button>
+		<Button
+			height="small"
+			color="purple"
+			on:click={() => {
+				branchController.updateBaseBranch();
+				close();
+			}}
+		>
+			Update
+		</Button>
+	</svelte:fragment>
+</Modal>

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

@@ -12,7 +12,7 @@
 		{commit.description}
 	</div>
 	<div class="flex text-light-700">
-		<div class="flex-grow">{commit.authorName}</div>
+		<div class="flex-grow">{commit.author.name}</div>
 		<div>{formatDistanceToNow(commit.createdAt)} ago</div>
 	</div>
 </div>

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

@@ -2,7 +2,7 @@
 	import { Button, Checkbox, Modal } from '$lib/components';
 	import type { Branch, BranchData, BaseBranch } from '$lib/vbranches';
 	import { formatDistanceToNow } from 'date-fns';
-	import { IconGitBranch, IconRemote, IconRefresh } from '$lib/icons';
+	import { IconGitBranch, IconRemote } from '$lib/icons';
 	import { IconTriangleDown, IconTriangleUp } from '$lib/icons';
 	import { accordion } from './accordion';
 	import PopupMenu from '$lib/components/PopupMenu/PopupMenu.svelte';
@@ -12,7 +12,6 @@
 	import { getContext } from 'svelte';
 	import { BRANCH_CONTROLLER_KEY } from '$lib/vbranches/branchController';
 
-	export let target: BaseBranch;
 	export let branches: Branch[];
 	export let remoteBranches: BranchData[];
 
@@ -24,14 +23,9 @@
 
 	let yourBranchContextMenu: PopupMenu;
 	let remoteBranchContextMenu: PopupMenu;
-	let updateTargetModal: Modal;
 	let applyConflictedModal: Modal;
 	let deleteBranchModal: Modal;
 
-	$: behindMessage = target.behind > 0 ? `behind ${target.behind}` : 'up-to-date';
-
-	$: console.log(target);
-
 	function toggleBranch(branch: Branch) {
 		if (branch.active) {
 			branchController.unapplyBranch(branch.id);
@@ -66,37 +60,6 @@
 	class="tray-scroll w-80 min-w-[216px] shrink-0 cursor-default resize-x overflow-y-scroll overscroll-y-none border-r border-light-400 bg-white text-light-800 dark:border-dark-600 dark:bg-dark-900 dark:text-dark-100"
 	style:width={$userSettings.trayWidth ? `${$userSettings.trayWidth}px` : null}
 >
-	<!-- Target branch -->
-	<div class="pl-2 pr-4 pt-2 text-light-700 dark:bg-dark-700 dark:text-dark-200">Base branch</div>
-	<div
-		class="flex w-full flex-row items-center justify-between border-b border-light-400 pb-1 pl-2 pr-1 text-light-900 dark:border-dark-500 dark:bg-dark-700 dark:text-dark-100"
-	>
-		<div class="flex-grow pb-1 font-bold" title={behindMessage}>{target.branchName}</div>
-		<div class="flex items-center gap-1">
-			<div class="pb-1">{target.behind > 0 ? `behind ${target.behind}` : 'up-to-date'}</div>
-			<div class="flex-shrink-0 text-light-700 dark:text-dark-100" title={behindMessage}>
-				{#if target.behind == 0}
-					<button
-						class="p-0 hover:bg-light-200 disabled:text-light-300 dark:hover:bg-dark-800 disabled:dark:text-dark-300"
-						on:click={() => branchController.fetchFromTarget()}
-						title="click to fetch"
-					>
-						<IconRefresh />
-					</button>
-				{:else}
-					<button
-						class="p-0 disabled:text-light-300 disabled:dark:text-dark-300"
-						on:click={updateTargetModal.show}
-						disabled={target.behind == 0}
-						title={target.behind > 0 ? 'click to update target' : 'already up-to-date'}
-					>
-						<IconRefresh />
-					</button>
-				{/if}
-			</div>
-		</div>
-	</div>
-
 	<!-- Your branches -->
 	<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"
@@ -255,26 +218,6 @@
 		</svelte:fragment>
 	</Modal>
 
-	<!-- Confirm target update modal -->
-
-	<Modal width="small" bind:this={updateTargetModal}>
-		<svelte:fragment slot="title">Update target</svelte:fragment>
-		<p>You are about to update the base branch.</p>
-		<svelte:fragment slot="controls" let:close>
-			<Button height="small" kind="outlined" on:click={close}>Cancel</Button>
-			<Button
-				height="small"
-				color="purple"
-				on:click={() => {
-					branchController.updateBaseBranch();
-					close();
-				}}
-			>
-				Update
-			</Button>
-		</svelte:fragment>
-	</Modal>
-
 	<!-- Delete branch confirmation modal -->
 
 	<Modal width="small" bind:this={deleteBranchModal} let:item>