Link from commmit cards to Github

This commit goes a bit beyond the scope of the title, it also
renames a few targets to base.

src/lib/vbranches/types.ts

@@ -9,7 +9,7 @@ export class Hunk {
 	})
 	modifiedAt!: Date;
 	filePath!: string;
-    locked!: boolean;
+	locked!: boolean;
 }
 
 export class File {
@@ -83,4 +83,8 @@ export class BaseBranch {
 	get repoBaseUrl(): string {
 		return this.remoteUrl.replace(':', '/').replace('git@', 'https://').replace('.git', '');
 	}
+
+	commitUrl(commitId: string): string | undefined {
+		return `${this.repoBaseUrl}/commit/${commitId}`;
+	}
 }

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

@@ -34,7 +34,7 @@
 	setContext(BRANCH_CONTROLLER_KEY, branchController);
 
 	$: remoteBranches = Loaded.isValue($remoteBranchStore) ? $remoteBranchStore.value : [];
-	$: target = Loaded.isValue($targetBranchStore) ? $targetBranchStore.value : undefined;
+	$: base = Loaded.isValue($targetBranchStore) ? $targetBranchStore.value : undefined;
 	$: branches =
 		!$vbranchStore.isLoading && !Loaded.isError($vbranchStore) ? $vbranchStore.value : [];
 	let targetChoice: string | undefined;
@@ -47,7 +47,7 @@
 	}
 </script>
 
-{#if target}
+{#if base}
 	<div class="flex w-full max-w-full" role="group" on:dragover|preventDefault>
 		<Tray {branches} {remoteBranches} />
 		<div
@@ -63,19 +63,19 @@
 		/>
 		<div class="flex w-full flex-col overflow-hidden">
 			<div class="lane-scroll flex flex-grow overflow-x-auto overflow-y-hidden overscroll-y-none">
-				{#if target}
-					<UpstreamBranchLane baseBranch={target} />
+				{#if base}
+					<UpstreamBranchLane {base} />
 				{/if}
 				<Board
 					{branches}
 					{projectId}
 					projectPath={$project?.path}
-					{target}
+					{base}
 					cloudEnabled={$project?.api?.sync || false}
 					{cloud}
 				/>
 			</div>
-			<BottomPanel {target} {userSettings} />
+			<BottomPanel {base} {userSettings} />
 		</div>
 	</div>
 {:else}

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

@@ -11,7 +11,7 @@
 	export let projectId: string;
 	export let projectPath: string;
 	export let branches: Branch[];
-	export let target: BaseBranch | undefined;
+	export let base: BaseBranch | undefined;
 	export let cloudEnabled: boolean;
 	export let cloud: ReturnType<typeof CloudApi>;
 
@@ -88,7 +88,7 @@
 			{projectId}
 			branchId={id}
 			{projectPath}
-			{target}
+			{base}
 			{cloudEnabled}
 			{cloud}
 			{upstream}

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

@@ -5,14 +5,12 @@
 	import { formatDistanceToNow } from 'date-fns';
 	import type { SettingsStore } from '$lib/userSettings';
 
-	export let target: BaseBranch;
+	export let base: BaseBranch;
 	export let userSettings: SettingsStore;
 
-	let shown = false;
-
 	export function createCommitUrl(id: string): string | undefined {
-		if (!target) return undefined;
-		return `${target.repoBaseUrl}/commit/${id}`;
+		if (!base) return undefined;
+		return base.commitUrl(id);
 	}
 
 	function toggleExpanded() {
@@ -34,8 +32,8 @@
 				on:keypress={toggleExpanded}
 			>
 				<div class="text-sm font-bold uppercase">Common base</div>
-				{#if target.behind == 0}
-					<div class="text-sm">{target.branchName}</div>
+				{#if base.behind == 0}
+					<div class="text-sm">{base.branchName}</div>
 				{/if}
 				{#if $userSettings.bottomPanelExpanded}
 					<IconTriangleDown />
@@ -48,9 +46,9 @@
 					<a
 						class="underline hover:text-blue-500"
 						target="_blank"
-						href={createCommitUrl(target.baseSha)}
+						href={createCommitUrl(base.baseSha)}
 					>
-						{target.baseSha.substring(0, 8)}
+						{base.baseSha.substring(0, 8)}
 					</a>
 				</div>
 			{/if}
@@ -66,7 +64,7 @@
 			<div
 				class="lane-scroll flex w-full flex-col gap-y-1 overflow-y-auto bg-white dark:bg-dark-1100"
 			>
-				{#each target.recentCommits as commit}
+				{#each base.recentCommits as commit}
 					<div
 						class="flex flex-row items-center gap-x-1 border-b border-light-300 px-2 text-light-700 dark:border-dark-700 dark:text-dark-200"
 					>

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

@@ -47,7 +47,7 @@
 	export let projectId: string;
 	export let order: number;
 	export let conflicted: boolean;
-	export let target: BaseBranch | undefined;
+	export let base: BaseBranch | undefined;
 	export let cloudEnabled: boolean;
 	export let cloud: ReturnType<typeof CloudApi>;
 	export let upstream: string | undefined;
@@ -443,7 +443,7 @@
 										class="h-3 w-3 rounded-full border-2 border-light-500 bg-light-200 dark:border-dark-600 dark:bg-dark-1000"
 									/>
 								</div>
-								<CommitCard {commit} />
+								<CommitCard {commit} {base} />
 							</div>
 						{/each}
 					</div>
@@ -464,7 +464,7 @@
 
 						<div class="ml-12 flex items-center py-2 font-mono text-sm">
 							{#if upstream}
-								<Link target="_blank" rel="noreferrer" href={url(target, upstream)}>
+								<Link target="_blank" rel="noreferrer" href={url(base, upstream)}>
 									<span class="text-sm font-bold">
 										{upstream.split('refs/remotes/')[1]}
 									</span>
@@ -486,7 +486,7 @@
 										class:dark:bg-dark-500={commit.isRemote}
 									/>
 								</div>
-								<CommitCard {commit} />
+								<CommitCard {commit} {base} />
 							</div>
 						{/each}
 					</div>

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

@@ -1,27 +1,35 @@
 <script lang="ts">
 	import { formatDistanceToNow } from 'date-fns';
-	import type { Commit } from '$lib/vbranches';
+	import type { BaseBranch, Commit } from '$lib/vbranches';
 
 	export let commit: Commit;
+	export let base: BaseBranch | undefined;
 </script>
 
-<div
-	class="flex-grow overflow-x-hidden rounded border border-light-400 bg-light-50 p-2 dark:border-dark-600 dark:bg-dark-900"
+<a
+	href={base?.commitUrl(commit.id)}
+	target="_blank"
+	title="Open in browser"
+	class="flex-grow overflow-x-hidden"
 >
-	<div class="mb-1 truncate">
-		{commit.description}
+	<div
+		class="rounded border border-light-400 bg-light-50 p-2 dark:border-dark-600 dark:bg-dark-900"
+	>
+		<div class="mb-1 truncate">
+			{commit.description}
+		</div>
+		<div class="flex space-x-1 text-sm text-light-700">
+			<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 class="flex-grow truncate">{commit.author.name}</div>
+			<div class="truncate">{formatDistanceToNow(commit.createdAt)} ago</div>
+		</div>
 	</div>
-	<div class="flex space-x-1 text-sm text-light-700">
-		<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 class="flex-grow truncate">{commit.author.name}</div>
-		<div class="truncate">{formatDistanceToNow(commit.createdAt)} ago</div>
-	</div>
-</div>
+</a>

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

@@ -7,17 +7,17 @@
 	import { BRANCH_CONTROLLER_KEY } from '$lib/vbranches/branchController';
 	import { getContext } from 'svelte';
 
-	export let baseBranch: BaseBranch;
+	export let base: BaseBranch;
 
 	let updateTargetModal: Modal;
 
 	const branchController = getContext<BranchController>(BRANCH_CONTROLLER_KEY);
 
 	// $: behind = baseBranch.behind > 0;
-	$: behindMessage = baseBranch.behind > 0 ? `behind ${baseBranch.behind}` : 'up-to-date';
+	$: behindMessage = base.behind > 0 ? `behind ${base.behind}` : 'up-to-date';
 
 	let fetching = false;
-	$: expanded = baseBranch.behind > 0;
+	$: expanded = base.behind > 0;
 	let buttonHovered = false;
 </script>
 
@@ -30,7 +30,7 @@
 	role="group"
 >
 	<div class="flex w-full items-center gap-4 border-b border-light-500 px-2 dark:border-dark-500">
-		<Tooltip label={'Fetch ' + baseBranch.branchName}>
+		<Tooltip label={'Fetch ' + base.branchName}>
 			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 			<button
 				on:mouseover={() => (buttonHovered = true)}
@@ -47,7 +47,7 @@
 						<div class:animate-spin={fetching}>
 							<IconRefresh class="h-4 w-4" />
 						</div>
-					{:else if baseBranch.remoteUrl.includes('github.com')}
+					{:else if base.remoteUrl.includes('github.com')}
 						<IconGithub class="h-4 w-4" />
 					{:else}
 						<IconBranch class="h-4 w-4" />
@@ -56,7 +56,7 @@
 			</button>
 		</Tooltip>
 		{#if expanded}
-			<div class="flex-grow font-mono font-bold">{baseBranch.branchName}</div>
+			<div class="flex-grow font-mono font-bold">{base.branchName}</div>
 		{/if}
 	</div>
 
@@ -75,7 +75,7 @@
 				<div class="ml-4">
 					<Tooltip
 						label={'Merges the commits from ' +
-							baseBranch.branchName +
+							base.branchName +
 							' into the base of all applied virtual branches'}
 					>
 						<Button
@@ -90,7 +90,7 @@
 				</div>
 				<div class="-ml-[18px] flex h-full">
 					<div class="z-40 mt-4 flex w-full flex-col gap-2">
-						{#each baseBranch.upstreamCommits as commit}
+						{#each base.upstreamCommits as commit}
 							<div class="flex w-full items-center pb-2">
 								<div class="ml-3 mr-2">
 									<div
@@ -99,7 +99,7 @@
 										class:dark:bg-dark-500={commit.isRemote}
 									/>
 								</div>
-								<CommitCard {commit} />
+								<CommitCard {commit} {base} />
 							</div>
 						{/each}
 					</div>