From c868c27d9ec7499b8d182868cfc98c49cd24549a Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 4 Feb 2025 20:08:59 +0000
Subject: [PATCH] replace detail page dropdown with DropdownV2

---
 frontend/src/lib/components/DropdownV2.svelte |  4 +-
 .../details/DetailPageHeader.svelte           | 39 ++++--------
 .../src/lib/components/details/Menu.svelte    | 62 -------------------
 .../lib/components/meltComponents/Menu.svelte |  4 +-
 4 files changed, 17 insertions(+), 92 deletions(-)
 delete mode 100644 frontend/src/lib/components/details/Menu.svelte

diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index 404ebce6f3..8df25b42f6 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -2,6 +2,7 @@
 	import { MoreVertical } from 'lucide-svelte'
 	import { Menu, Menubar } from '$lib/components/meltComponents'
 	import { melt } from '@melt-ui/svelte'
+	import type { Placement } from '@floating-ui/core'
 
 	import DropdownV2Inner from './DropdownV2Inner.svelte'
 
@@ -18,6 +19,7 @@
 	export let items: Item[] | (() => Item[]) | (() => Promise<Item[]>) = []
 	export let justifyEnd: boolean = true
 	export let disabled = false
+	export let placement: Placement = 'bottom-end'
 
 	async function computeItems(): Promise<Item[]> {
 		if (typeof items === 'function') {
@@ -29,7 +31,7 @@
 </script>
 
 <Menubar let:createMenu>
-	<Menu {createMenu} placement="bottom-end" {justifyEnd} on:close on:open {disabled} let:item>
+	<Menu {createMenu} {placement} {justifyEnd} on:close on:open {disabled} let:item>
 		<svelte:fragment slot="trigger" let:trigger>
 			<div use:melt={trigger}>
 				{#if $$slots.buttonReplacement}
diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index 6a3012946b..abf4a004bf 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { Badge, Button } from '$lib/components/common'
 
-	import Menu from '$lib/components/details/Menu.svelte'
-	import MenuItem from '$lib/components/common/menu/MenuItem.svelte'
-	import { classNames } from '$lib/utils'
+	import DropdownV2 from '$lib/components/DropdownV2.svelte'
 	import ErrorHandlerToggleButton from './ErrorHandlerToggleButton.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { userStore } from '$lib/stores'
@@ -73,30 +71,17 @@
 			</div>
 			<div class="flex gap-1 md:gap-2 items-center">
 				{#if menuItems.length > 0}
-					<Menu>
-						<svelte:fragment slot="items">
-							{#each menuItems as { label, Icon, onclick, color } (label)}
-								<MenuItem
-									on:click={() => {
-										const div = document.querySelector('[id^="headlessui-menu-items"]')
-										div?.parentElement?.remove()
-
-										onclick()
-									}}
-								>
-									<div
-										class={classNames(
-											'text-xs flex items-center gap-2 flex-row-2 ',
-											color === 'red' ? 'text-red-500' : ''
-										)}
-									>
-										<Icon class="h-4" />
-										{label}
-									</div>
-								</MenuItem>
-							{/each}
-						</svelte:fragment>
-					</Menu>
+					{#key menuItems}
+						<DropdownV2
+							items={menuItems.map((item) => ({
+								displayName: item.label,
+								icon: item.Icon,
+								action: item.onclick,
+								type: item.color === 'red' ? 'delete' : 'action'
+							}))}
+							placement="bottom-end"
+						/>
+					{/key}
 				{/if}
 				<ErrorHandlerToggleButton
 					kind={errorHandlerKind}
diff --git a/frontend/src/lib/components/details/Menu.svelte b/frontend/src/lib/components/details/Menu.svelte
deleted file mode 100644
index baa8999974..0000000000
--- a/frontend/src/lib/components/details/Menu.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-	import { Menu, Transition, MenuButton, MenuItems } from '@rgossiaux/svelte-headlessui'
-	import { MoreVertical } from 'lucide-svelte'
-	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
-	import Portal from '$lib/components/Portal.svelte'
-
-	import Button from '../common/button/Button.svelte'
-
-	const [popperRef, popperContent] = createPopperActions({ placement: 'auto' })
-
-	const popperOptions: PopperOptions<{}> = {
-		placement: 'bottom-end',
-		strategy: 'fixed',
-		modifiers: [
-			{ name: 'offset', options: { offset: [8, 8] } },
-			{
-				name: 'arrow',
-				options: {
-					padding: 10
-				}
-			}
-		]
-	}
-</script>
-
-<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
-	<span use:popperRef>
-		<MenuButton>
-			<Button
-				nonCaptureEvent
-				color="light"
-				size="xs"
-				startIcon={{
-					icon: MoreVertical
-				}}
-				iconOnly
-			/>
-		</MenuButton>
-	</span>
-
-	<Portal name="menu">
-		<div use:popperContent={popperOptions} class="z-[2000]">
-			<Transition
-				show={open}
-				enter="transition ease-out duration-[25ms]"
-				enterFrom="transform opacity-0 scale-95"
-				enterTo="transform opacity-100 scale-100"
-				leave="transition ease-in duration-[25ms]"
-				leaveFrom="transform opacity-100 scale-100"
-				leaveTo="transform opacity-0 scale-95"
-			>
-				<MenuItems
-					class="absolute border right-0 z-50 w-56 origin-top-right top-1 rounded-md bg-surface shadow-md focus:outline-none cursor-pointer"
-				>
-					<div class="my-1">
-						<slot name="items" />
-					</div>
-				</MenuItems>
-			</Transition>
-		</div>
-	</Portal>
-</Menu>
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte
index 820b2e5f04..4f7b1831f9 100644
--- a/frontend/src/lib/components/meltComponents/Menu.svelte
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import Portal from '$lib/components/Portal.svelte'
 	import { melt, createSync } from '@melt-ui/svelte'
-
+	import type { Placement } from '@floating-ui/core'
 	import { twMerge } from 'tailwind-merge'
 	import ResolveOpen from '$lib/components/common/menu/ResolveOpen.svelte'
 
-	export let placement: any = 'right-start'
+	export let placement: Placement = 'right-start'
 	export let justifyEnd: boolean = false
 	export let lightMode: boolean = false
 	export let maxHeight: number = 900