Make better tooltip for commit line avatars

app/src/lib/components/Avatar.svelte

@@ -4,6 +4,7 @@
 
 	export let author: Author;
 	export let status: CommitStatus;
+	export let help: string | undefined = undefined;
 </script>
 
 <img
@@ -15,7 +16,7 @@
 	class:remote={status == 'remote'}
 	class:local={status == 'local'}
 	class:upstream={status == 'upstream'}
-	use:tooltip={author.name}
+	use:tooltip={help}
 	on:error
 />
 

app/src/lib/components/LocalLine.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Avatar from './Avatar.svelte';
+	import { getAvatarTooltip } from '$lib/utils/avatar';
 	import type { Commit } from '$lib/vbranches/types';
 
 	export let dashed: boolean;
@@ -7,6 +8,7 @@
 	export let first: boolean;
 
 	$: hasRoot = isRoot(commit);
+	$: tooltipText = getAvatarTooltip(commit);
 
 	function isRoot(commit: Commit | undefined): boolean {
 		return !!commit && (commit.parent == undefined || commit.parent?.status == 'remote');
@@ -25,7 +27,7 @@
 	{#if commit}
 		{@const author = commit.author}
 		<div class="avatar" class:first>
-			<Avatar {author} status={commit.status} />
+			<Avatar {author} status={commit.status} help={tooltipText} />
 		</div>
 	{/if}
 	{#if hasRoot}

app/src/lib/components/RemoteLine.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Avatar from './Avatar.svelte';
+	import { getAvatarTooltip } from '$lib/utils/avatar';
 	import type { Commit, RemoteCommit } from '$lib/vbranches/types';
 
 	export let commit: Commit | undefined;
@@ -10,6 +11,8 @@
 	export let line: boolean;
 	export let root: boolean;
 	export let upstreamLine: boolean;
+
+	$: tooltipText = getAvatarTooltip(commit || remoteCommit);
 </script>
 
 <div class="remote-column" class:has-root={root}>
@@ -49,13 +52,13 @@
 		{#if commit}
 			{@const author = commit.author}
 			<div class="avatar" class:first class:short>
-				<Avatar {author} status={commit.status} />
+				<Avatar {author} status={commit.status} help={tooltipText} />
 			</div>
 		{/if}
 		{#if remoteCommit}
 			{@const author = remoteCommit.author}
 			<div class="avatar" class:first class:short>
-				<Avatar {author} status={remoteCommit.status} />
+				<Avatar {author} status={remoteCommit.status} help={tooltipText} />
 			</div>
 		{/if}
 	{/if}

app/src/lib/components/ShadowLine.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Avatar from './Avatar.svelte';
+	import { getAvatarTooltip } from '$lib/utils/avatar';
 	import { tooltip } from '$lib/utils/tooltip';
 	import type { Commit, RemoteCommit } from '$lib/vbranches/types';
 
@@ -9,6 +11,8 @@
 	export let localCommit: Commit | undefined;
 	export let dashed: boolean;
 	export let upstreamLine: boolean;
+
+	$: tooltipText = getAvatarTooltip(localCommit || remoteCommit);
 </script>
 
 <div class="shadow-column">
@@ -21,25 +25,13 @@
 		<div class="shadow-line upstream" class:short class:first />
 	{/if}
 	{#if localCommit}
-		<div
-			class="shadow-marker"
-			class:first
-			class:short
-			use:tooltip={localCommit.descriptionTitle}
-		></div>
+		<div class="shadow-marker" class:first class:short use:tooltip={tooltipText}></div>
 	{/if}
 	{#if remoteCommit}
 		{@const author = remoteCommit.author}
-		<img
-			class="avatar"
-			class:first
-			title={author.name}
-			alt="Gravatar for {author.email}"
-			srcset="{author.gravatarUrl} 2x"
-			width="100"
-			height="100"
-			on:error
-		/>
+		<div class="avatar" class:first class:short>
+			<Avatar {author} status={remoteCommit.status} help={tooltipText} />
+		</div>
 	{/if}
 </div>
 
@@ -97,14 +89,10 @@
 
 	.avatar {
 		position: absolute;
-		width: var(--size-16);
-		height: var(--size-16);
-		border-radius: var(--radius-m);
 		top: var(--size-10);
 		left: var(--size-4);
-		border: var(--size-2) solid var(--clr-commit-upstream);
 		&.first {
-			top: var(--size-40);
+			top: calc(var(--size-40) + var(--size-2));
 		}
 	}
 </style>

app/src/lib/utils/avatar.ts

@@ -0,0 +1,7 @@
+import type { Commit, RemoteCommit } from '$lib/vbranches/types';
+
+export function getAvatarTooltip(commit: Commit | RemoteCommit | undefined): string | undefined {
+	if (commit) {
+		return [commit.author.name, commit.descriptionTitle, commit.id.substring(0, 6)].join('\n');
+	}
+}