From b891a40ac14851ee5d905f7ea71da02406ae63b8 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 4 Feb 2025 18:41:28 +0000
Subject: [PATCH] use melt menu for DropDownV2

---
 frontend/src/lib/components/DropdownV2.svelte | 33 +++++++++++--------
 .../src/lib/components/DropdownV2Inner.svelte |  9 +++--
 .../components/meltComponents/MenuItem.svelte | 18 ++++++++++
 .../lib/components/meltComponents/index.ts    |  1 +
 4 files changed, 44 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/lib/components/meltComponents/MenuItem.svelte

diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index ef14f4bbcb..404ebce6f3 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { MoreVertical } from 'lucide-svelte'
-	import Menu from './common/menu/MenuV2.svelte'
+	import { Menu, Menubar } from '$lib/components/meltComponents'
+	import { melt } from '@melt-ui/svelte'
 
 	import DropdownV2Inner from './DropdownV2Inner.svelte'
 
@@ -27,17 +28,21 @@
 	}
 </script>
 
-<Menu placement="bottom-end" {justifyEnd} on:close on:open {disabled}>
-	<div slot="trigger">
-		{#if $$slots.buttonReplacement}
-			<slot name="buttonReplacement" />
-		{:else}
-			<MoreVertical
-				size={16}
-				class="w-8  h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md"
-			/>
-		{/if}
-	</div>
+<Menubar let:createMenu>
+	<Menu {createMenu} placement="bottom-end" {justifyEnd} on:close on:open {disabled} let:item>
+		<svelte:fragment slot="trigger" let:trigger>
+			<div use:melt={trigger}>
+				{#if $$slots.buttonReplacement}
+					<slot name="buttonReplacement" />
+				{:else}
+					<MoreVertical
+						size={16}
+						class="w-8  h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md"
+					/>
+				{/if}
+			</div>
+		</svelte:fragment>
 
-	<DropdownV2Inner items={computeItems} />
-</Menu>
+		<DropdownV2Inner items={computeItems} meltItem={item} />
+	</Menu>
+</Menubar>
diff --git a/frontend/src/lib/components/DropdownV2Inner.svelte b/frontend/src/lib/components/DropdownV2Inner.svelte
index 548fda060c..115fb8c325 100644
--- a/frontend/src/lib/components/DropdownV2Inner.svelte
+++ b/frontend/src/lib/components/DropdownV2Inner.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MenuItem } from '@rgossiaux/svelte-headlessui'
+	import { MenuItem } from '$lib/components/meltComponents'
 	import { Loader2 } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
 
@@ -14,6 +14,7 @@
 	}
 
 	export let items: Item[] | (() => Item[]) | (() => Promise<Item[]>) = []
+	export let meltItem: any
 
 	let computedItems: Item[] | undefined = undefined
 	async function computeItems() {
@@ -35,13 +36,15 @@
 				href={item?.href}
 				disabled={item?.disabled}
 				class={twMerge(
-					'px-4 py-2 text-primary hover:bg-surface-hover hover:text-primary cursor-pointer text-xs transition-all',
+					'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-all',
+					'data-[highlighted]:bg-surface-hover',
 					'flex flex-row gap-2 items-center',
 					item?.disabled && 'text-gray-400 cursor-not-allowed',
 					item?.type === 'delete' &&
 						!item?.disabled &&
-						'text-red-500 hover:bg-red-100 hover:text-red-500'
+						'text-red-500 hover:bg-red-100 hover:text-red-500 data-[highlighted]:text-red-500 data-[highlighted]:bg-red-100'
 				)}
+				item={meltItem}
 			>
 				{#if item.icon}
 					<svelte:component this={item.icon} size={14} />
diff --git a/frontend/src/lib/components/meltComponents/MenuItem.svelte b/frontend/src/lib/components/meltComponents/MenuItem.svelte
new file mode 100644
index 0000000000..d0c899428e
--- /dev/null
+++ b/frontend/src/lib/components/meltComponents/MenuItem.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { melt } from '@melt-ui/svelte'
+
+	export let href: string | undefined = undefined
+	export let disabled: boolean = false
+
+	export let item: any
+</script>
+
+{#if href}
+	<a {href} use:melt={item} {disabled} class={$$props.class}>
+		<slot />
+	</a>
+{:else}
+	<button use:melt={item} on:click {disabled} class={$$props.class}>
+		<slot />
+	</button>
+{/if}
diff --git a/frontend/src/lib/components/meltComponents/index.ts b/frontend/src/lib/components/meltComponents/index.ts
index 19712b5f77..3af39b5433 100644
--- a/frontend/src/lib/components/meltComponents/index.ts
+++ b/frontend/src/lib/components/meltComponents/index.ts
@@ -1,2 +1,3 @@
 export { default as Menu } from './Menu.svelte'
 export { default as Menubar } from './Menubar.svelte'
+export { default as MenuItem } from './MenuItem.svelte'