refactor: replace custom sync button with Tag component

The custom sync button is replaced with the Tag component. The Tag
component is updated to support a loading state and help text. The
busy label is moved inside the Tag component. The custom sync button
styles are removed.

gitbutler-ui/src/lib/components/SyncButton.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { syncToCloud } from '$lib/backend/cloud';
 	import { Project } from '$lib/backend/projects';
-	import Icon from '$lib/components/Icon.svelte';
+	import Tag from '$lib/components/Tag.svelte';
 	import TimeAgo from '$lib/components/TimeAgo.svelte';
 	import { GitHubService } from '$lib/github/service';
 	import { getContextByClass } from '$lib/utils/context';
-	import { tooltip } from '$lib/utils/tooltip';
 	import { BaseBranchService } from '$lib/vbranches/branchStoresCache';
 
 	const project = getContextByClass(Project);
@@ -20,9 +19,14 @@
 	$: cloudEnabled = project?.api?.sync || false;
 </script>
 
-<button
+<Tag
-	class="sync-btn"
+	clickable
-	class:sync-btn-busy={$baseServiceBusy$}
+	border
+	reversedDirection
+	color="ghost"
+	icon="update-small"
+	help="Last fetch from upstream"
+	loading={$baseServiceBusy$}
 	on:mousedown={async (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -33,74 +37,14 @@
 		}
 	}}
 >
-	{#if !$baseServiceBusy$}
-		<div class="sync-btn__icon">
-			<Icon name="update-small" />
-		</div>
-	{/if}
-
-	<span class="text-base-11 text-semibold sync-btn__label" use:tooltip={'Last fetch from upstream'}>
 	{#if $baseServiceBusy$}
 		<div class="sync-btn__busy-label">busy…</div>
 	{:else if $baseBranch?.lastFetched}
 		<TimeAgo date={$baseBranch?.lastFetched} />
 	{/if}
-	</span>
+</Tag>
-</button>
 
 <style lang="postcss">
-	.sync-btn {
-		display: flex;
-		align-items: center;
-		gap: var(--size-2);
-		height: var(--size-20);
-		padding-left: var(--size-2);
-		padding-right: var(--size-4);
-		background: var(--clr-theme-container-light);
-		border: 1px solid var(--clr-theme-container-outline-light);
-		border-radius: var(--radius-m);
-		cursor: pointer;
-
-		&.sync-btn-busy {
-			cursor: default;
-		}
-
-		transition:
-			background var(--transition-fast),
-			border var(--transition-fast);
-
-		&:hover {
-			background: var(--clr-theme-container-light);
-			border: 1px solid var(--clr-theme-container-outline-pale);
-		}
-
-		&:hover .sync-btn__icon {
-			fill: var(--clr-theme-scale-ntrl-40);
-		}
-
-		&:hover .sync-btn__label {
-			color: var(--clr-theme-scale-ntrl-40);
-		}
-	}
-
-	.sync-btn__icon {
-		display: flex;
-		color: var(--clr-theme-scale-ntrl-40);
-		transform-origin: center;
-		transform: rotate(0deg);
-		transition:
-			fill var(--transition-fast),
-			transform var(--transition-slow);
-	}
-
-	.sync-btn__label {
-		display: block;
-		line-height: 1;
-		white-space: nowrap;
-		color: var(--clr-theme-scale-ntrl-40);
-		transition: color var(--transition-fast);
-	}
-
 	.sync-btn__busy-label {
 		padding-left: var(--size-4);
 	}

gitbutler-ui/src/lib/components/Tag.svelte

@@ -25,6 +25,7 @@
 	export let clickable = false;
 	export let shrinkable = false;
 	export let verticalOrientation = false;
+	export let loading = false;
 </script>
 
 <div
@@ -54,7 +55,9 @@
 	<span class="label" class:verticalLabel={verticalOrientation}>
 		<slot />
 	</span>
-	{#if icon}
+	{#if loading}
+		<Icon name="spinner" />
+	{:else if icon}
 		<div class="icon" class:verticalIcon={verticalOrientation}>
 			<Icon name={icon} spinnerRadius={3.5} />
 		</div>