From c760a0b4823e7e9a71c584443f6414c461bfc9a2 Mon Sep 17 00:00:00 2001
From: ndom91 <yo@ndo.dev>
Date: Thu, 17 Oct 2024 16:07:54 +0200
Subject: [PATCH] feat: add tooltip option to ContextMenuItem

---
 .../contextmenu/ContextMenuItem.svelte        | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/lib/components/contextmenu/ContextMenuItem.svelte b/apps/desktop/src/lib/components/contextmenu/ContextMenuItem.svelte
index 5e579134f..7a61dac1b 100644
--- a/apps/desktop/src/lib/components/contextmenu/ContextMenuItem.svelte
+++ b/apps/desktop/src/lib/components/contextmenu/ContextMenuItem.svelte
@@ -1,21 +1,34 @@
 <script lang="ts">
 	import Icon from '@gitbutler/ui/Icon.svelte';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 	import type iconsJson from '@gitbutler/ui/data/icons.json';
+	import type { Snippet } from 'svelte';
 
-	export let icon: keyof typeof iconsJson | undefined = undefined;
-	export let label: string;
-	export let disabled = false;
+	interface Props {
+		icon?: keyof typeof iconsJson | undefined;
+		label: string;
+		disabled?: boolean;
+		control?: Snippet;
+		tooltip?: string;
+		onclick: () => void;
+	}
+
+	const { onclick, icon = undefined, label, disabled, control, tooltip = '' }: Props = $props();
 </script>
 
-<button class="menu-item" class:disabled {disabled} on:click>
+<button class="menu-item" class:disabled {disabled} {onclick}>
 	{#if icon}
 		<Icon name={icon} />
 	{/if}
 
-	<span class="label text-12">
-		{label}
-	</span>
-	<slot name="control" />
+	<Tooltip text={tooltip}>
+		<span class="label text-12">
+			{label}
+		</span>
+	</Tooltip>
+	{#if control}
+		{@render control()}
+	{/if}
 </button>
 
 <style lang="postcss">