Tooltip-refactoring-+-new-component (#4804)

* tooltip component + custom svelte transitions

* update some tooltips

* replace old toogle

* replace old tooltip hook

* remove old tooltip hook

* lint fixes

* design tokens update

Author: PavelLaptev

apps/desktop/src/lib/branch/ActiveBranchStatus.svelte

@@ -47,7 +47,7 @@
 			icon="pr-small"
 			style="success"
 			kind="solid"
-			help="These changes have been integrated upstream, update your workspace to make this lane disappear."
+			tooltip="Changes have been integrated upstream, update your workspace to make this lane disappear."
 			reversedDirection>Integrated</Button
 		>
 	{:else}
@@ -56,7 +56,7 @@
 			size="tag"
 			icon="virtual-branch-small"
 			style="neutral"
-			help="These changes are in your working directory."
+			tooltip="Changes are in your working directory"
 			reversedDirection>Virtual</Button
 		>
 	{/if}
@@ -68,7 +68,7 @@
 				style="neutral"
 				shrinkable
 				disabled
-				help="Branch name that will be used when pushing. You can change it from the lane menu."
+				tooltip={'Branch name that will be used when pushing.\nChange it from the lane menu'}
 			>
 				{name}
 			</Button>
@@ -81,7 +81,7 @@
 		style="neutral"
 		kind="solid"
 		icon="remote-branch-small"
-		help="At least some of your changes have been pushed"
+		tooltip="Some changes have been pushed"
 		reversedDirection>Remote</Button
 	>
 	<Button

apps/desktop/src/lib/branch/BranchHeader.svelte

@@ -132,7 +132,7 @@
 			<div class="draggable" data-drag-handle>
 				<Icon name="draggable" />
 			</div>
-			<Button style="ghost" outline icon="unfold-lane" help="Expand lane" onclick={expandLane} />
+			<Button style="ghost" outline icon="unfold-lane" tooltip="Expand lane" onclick={expandLane} />
 		</div>
 
 		<div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
@@ -147,7 +147,7 @@
 							clickable={false}
 							style="warning"
 							kind="soft"
-							help="Uncommitted changes"
+							tooltip="Uncommitted changes"
 						>
 							{uncommittedChanges}
 							{uncommittedChanges === 1 ? 'change' : 'changes'}
@@ -198,7 +198,7 @@
 									clickable={false}
 									icon="locked-small"
 									style="warning"
-									help="Applying this branch will add merge conflict markers that you will have to resolve"
+									tooltip="Applying this branch will add merge conflict markers that you will have to resolve"
 								>
 									Conflict
 								</Button>
@@ -214,7 +214,7 @@
 						<Button
 							style="pop"
 							kind="soft"
-							help="New changes will land here"
+							tooltip="New changes will land here"
 							icon="target"
 							clickable={false}
 						>
@@ -224,7 +224,7 @@
 						<Button
 							style="ghost"
 							outline
-							help="When selected, new changes will land here"
+							tooltip="When selected, new changes land here"
 							icon="target"
 							onclick={async () => {
 								isTargetBranchAnimated = true;
@@ -242,7 +242,7 @@
 							<PullRequestButton
 								click={async ({ draft }) => await createPr({ draft })}
 								disabled={branch.commits.length === 0 || !$gitHost}
-								help={!$gitHost ? 'You can enable git host integration in the settings' : ''}
+								tooltip={!$gitHost ? 'You can enable git host integration in the settings' : ''}
 								loading={isLoading}
 							/>
 						{/if}

apps/desktop/src/lib/branch/BranchLaneContextMenu.svelte

@@ -14,6 +14,7 @@
 	import { VirtualBranch } from '$lib/vbranches/types';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 
 	interface Props {
 		contextMenuEl?: ContextMenu;
@@ -138,13 +139,9 @@
 
 	<ContextMenuSection>
 		<ContextMenuItem label="Allow rebasing" on:click={toggleAllowRebasing}>
-			<Toggle
-				small
-				slot="control"
-				bind:checked={allowRebasing}
-				on:click={toggleAllowRebasing}
-				help="Allows changing commits after push (force push needed)"
-			/>
+			<Tooltip slot="control" text={'Allows changing commits after push\n(force push needed)'}>
+				<Toggle small bind:checked={allowRebasing} on:click={toggleAllowRebasing} />
+			</Tooltip>
 		</ContextMenuItem>
 	</ContextMenuSection>
 

apps/desktop/src/lib/branch/BranchPreviewHeader.svelte

@@ -10,7 +10,7 @@
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
-	import { tooltip } from '@gitbutler/ui/utils/tooltip';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import type { PullRequest } from '$lib/gitHost/interface/types';
 	import type { Branch } from '$lib/vbranches/types';
 	import { goto } from '$app/navigation';
@@ -40,13 +40,18 @@
 			<BranchLabel disabled name={branch.name} />
 			<div class="header__remote-branch">
 				{#if remoteBranch}
-					<div
-						class="status-tag text-11 text-semibold remote"
-						use:tooltip={'At least some of your changes have been pushed'}
-					>
-						<Icon name="remote-branch-small" />
-						{localBranch ? 'local and remote' : 'remote'}
-					</div>
+					<Tooltip text="At least some of your changes have been pushed'">
+						<Button
+							size="tag"
+							icon="remote-branch-small"
+							style="neutral"
+							kind="solid"
+							clickable={false}
+						>
+							{localBranch ? 'local and remote' : 'remote'}
+						</Button>
+					</Tooltip>
+
 					{#if gitHostBranch}
 						<Button
 							size="tag"
@@ -93,7 +98,7 @@
 				<Button
 					style="ghost"
 					outline
-					help="Restores these changes into your working directory"
+					tooltip="Restores these changes into your working directory"
 					icon="plus-small"
 					loading={isApplying}
 					disabled={$mode?.type !== 'OpenWorkspace'}
@@ -120,7 +125,7 @@
 				<Button
 					style="ghost"
 					outline
-					help="Deletes the local branch. If this branch is also present on a remote, it will not be deleted there."
+					tooltip="Deletes the local branch. If this branch is also present on a remote, it will not be deleted there."
 					icon="bin-small"
 					loading={isDeleting}
 					disabled={!localBranch}

apps/desktop/src/lib/commit/CommitCard.svelte

@@ -26,8 +26,8 @@
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo';
-	import { tooltip } from '@gitbutler/ui/utils/tooltip';
 	import { type Snippet } from 'svelte';
 
 	export let branch: VirtualBranch | undefined = undefined;
@@ -299,24 +299,25 @@
 
 					<div class="text-11 commit__subtitle">
 						{#if commit.isSigned}
-							<div class="commit__signed" use:tooltip={{ text: 'Signed', delay: 500 }}>
-								<Icon name="success-outline-small" />
-							</div>
+							<Tooltip text="Signed">
+								<div class="commit__signed">
+									<Icon name="success-outline-small" />
+								</div>
+							</Tooltip>
 
 							<span class="commit__subtitle-divider">•</span>
 						{/if}
 
 						{#if conflicted}
-							<div
-								class="commit__conflicted"
-								use:tooltip={{
-									text: 'Conflicted commits must be resolved before they can be ammended or squashed.\n\nPlease resolve conflicts using the "Resolve conflicts" button'
-								}}
+							<Tooltip
+								text={"Conflicted commits must be resolved before they can be ammended or squashed.\nPlease resolve conflicts using the 'Resolve conflicts' button"}
 							>
-								<Icon name="warning-small" />
+								<div class="commit__conflicted">
+									<Icon name="warning-small" />
 
-								Conflicted
-							</div>
+									Conflicted
+								</div>
+							</Tooltip>
 
 							<span class="commit__subtitle-divider">•</span>
 						{/if}
@@ -593,6 +594,7 @@
 
 		text-decoration: underline;
 		text-underline-offset: 2px;
+		transition: color var(--transition-fast);
 
 		&:hover {
 			color: var(--clr-text-1);

apps/desktop/src/lib/commit/CommitDialog.svelte

@@ -3,11 +3,11 @@
 	import { persistedCommitMessage, projectRunCommitHooks } from '$lib/config/config';
 	import { getContext, getContextStore } from '$lib/utils/context';
 	import { intersectionObserver } from '$lib/utils/intersectionObserver';
-	import { slideFade } from '$lib/utils/svelteTransitions';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { Ownership } from '$lib/vbranches/ownership';
 	import { VirtualBranch } from '$lib/vbranches/types';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import { slideFade } from '@gitbutler/ui/utils/transitions';
 	import type { Writable } from 'svelte/store';
 
 	export let projectId: string;

apps/desktop/src/lib/commit/CommitList.svelte

@@ -228,7 +228,7 @@
 							wide
 							loading={isPushingCommits}
 							disabled={localCommitsConflicted}
-							help={localCommitsConflicted
+							tooltip={localCommitsConflicted
 								? 'In order to push, please resolve any conflicted commits.'
 								: undefined}
 							onclick={async () => {

apps/desktop/src/lib/commit/CommitMessageInput.svelte

@@ -21,7 +21,7 @@
 	import { VirtualBranch, LocalFile } from '$lib/vbranches/types';
 	import Checkbox from '@gitbutler/ui/Checkbox.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
-	import { tooltip } from '@gitbutler/ui/utils/tooltip';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { fly } from 'svelte/transition';
 
@@ -179,57 +179,52 @@
 		{/if}
 
 		{#if title.length > 50}
-			<div
-				transition:fly={{ y: 2, duration: 150 }}
-				class="commit-box__textarea-tooltip"
-				use:tooltip={{
-					text: '50 characters or less is best. Extra info can be added in the description.',
-					delay: 200
-				}}
-			>
-				<Icon name="idea" />
-			</div>
+			<Tooltip text={'50 characters or less is best.\nUse description for more details'}>
+				<div transition:fly={{ y: 2, duration: 150 }} class="commit-box__textarea-tooltip">
+					<Icon name="idea" />
+				</div>
+			</Tooltip>
 		{/if}
 
-		<div
-			class="commit-box__texarea-actions"
-			class:commit-box-actions_expanded={isExpanded}
-			use:tooltip={!aiConfigurationValid
-				? 'You must be logged in or have provided your own API key to use this feature'
+		<Tooltip
+			text={!aiConfigurationValid
+				? 'You must be logged in or have provided your own API key'
 				: !$aiGenEnabled
-					? 'You must have summary generation enabled to use this feature'
-					: ''}
+					? 'You must have summary generation enabled'
+					: undefined}
 		>
-			<DropDownButton
-				style="ghost"
-				outline
-				icon="ai-small"
-				disabled={!($aiGenEnabled && aiConfigurationValid)}
-				loading={aiLoading}
-				menuPosition="top"
-				onclick={async () => await generateCommitMessage($branch.files)}
-			>
-				Generate message
-
-				{#snippet contextMenuSlot()}
-					<ContextMenuSection>
-						<ContextMenuItem
-							label="Extra concise"
-							on:click={() => ($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
-						>
-							<Checkbox small slot="control" bind:checked={$commitGenerationExtraConcise} />
-						</ContextMenuItem>
-
-						<ContextMenuItem
-							label="Use emojis 😎"
-							on:click={() => ($commitGenerationUseEmojis = !$commitGenerationUseEmojis)}
-						>
-							<Checkbox small slot="control" bind:checked={$commitGenerationUseEmojis} />
-						</ContextMenuItem>
-					</ContextMenuSection>
-				{/snippet}
-			</DropDownButton>
-		</div>
+			<div class="commit-box__texarea-actions" class:commit-box-actions_expanded={isExpanded}>
+				<DropDownButton
+					style="ghost"
+					outline
+					icon="ai-small"
+					disabled={!($aiGenEnabled && aiConfigurationValid)}
+					loading={aiLoading}
+					menuPosition="top"
+					onclick={async () => await generateCommitMessage($branch.files)}
+				>
+					Generate message
+
+					{#snippet contextMenuSlot()}
+						<ContextMenuSection>
+							<ContextMenuItem
+								label="Extra concise"
+								on:click={() => ($commitGenerationExtraConcise = !$commitGenerationExtraConcise)}
+							>
+								<Checkbox small slot="control" bind:checked={$commitGenerationExtraConcise} />
+							</ContextMenuItem>
+
+							<ContextMenuItem
+								label="Use emojis 😎"
+								on:click={() => ($commitGenerationUseEmojis = !$commitGenerationUseEmojis)}
+							>
+								<Checkbox small slot="control" bind:checked={$commitGenerationUseEmojis} />
+							</ContextMenuItem>
+						</ContextMenuSection>
+					{/snippet}
+				</DropDownButton>
+			</div>
+		</Tooltip>
 	</div>
 {/if}
 

apps/desktop/src/lib/components/BaseBranch.svelte

@@ -10,7 +10,7 @@
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Checkbox from '@gitbutler/ui/Checkbox.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
-	import { tooltip } from '@gitbutler/ui/utils/tooltip';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import type { BaseBranch } from '$lib/baseBranch/baseBranch';
 
 	export let base: BaseBranch;
@@ -49,7 +49,7 @@
 		<Button
 			style="pop"
 			kind="solid"
-			help={`Merges the commits from ${base.branchName} into the base of all applied virtual branches`}
+			tooltip={`Merges the commits from ${base.branchName} into the base of all applied virtual branches`}
 			disabled={$mode?.type !== 'OpenWorkspace'}
 			onclick={() => {
 				if ($mergeUpstreamWarningDismissed) {
@@ -77,12 +77,9 @@
 	{/if}
 
 	<div>
-		<h1
-			class="text-13 info-text text-bold"
-			use:tooltip={'This is the current base for your virtual branches.'}
-		>
-			Local
-		</h1>
+		<Tooltip text="Current base for virtual branches.">
+			<h1 class="text-13 info-text text-bold">Local</h1>
+		</Tooltip>
 		{#each base.recentCommits as commit, index}
 			<CommitCard
 				{commit}

apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte

@@ -23,7 +23,7 @@
 			icon="plus-small"
 			size="tag"
 			width={26}
-			help="Insert empty commit"
+			tooltip="Insert empty commit"
 			helpShowDelay={500}
 			onclick={() => dispatch('click')}
 		/>