From 215c48aa535e855e18350e0be3771ce7632037c4 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Thu, 13 Feb 2025 21:23:21 +0000
Subject: [PATCH] wip migrate popup to popover

---
 .../auditLogs/AuditLogMobileFilters.svelte    | 13 ++---
 .../calendarPicker/CalendarPicker.svelte      | 51 ++++++++++---------
 .../components/meltComponents/Popover.svelte  |  7 ++-
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
index af581d374a..9bee58b8cb 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogMobileFilters.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
 	import { Filter } from 'lucide-svelte'
-	import { Popup, Button } from '../common'
+	import { Button } from '../common'
+	import Popover from '$lib/components/meltComponents/Popover.svelte'
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	contentClasses="p-4 flex flex-col w-80"
 >
 	<svelte:fragment slot="button">
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
 			Filters
 		</Button>
 	</svelte:fragment>
-	<div class="flex flex-col w-80">
+	<svelte:fragment slot="content">
 		<slot name="filters" />
-	</div>
-</Popup>
+	</svelte:fragment>
+</Popover>
diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
index 4e1e7cadb5..2aa9807237 100644
--- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Calendar } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
-	import { Popup } from '..'
+	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import type { Placement } from '@floating-ui/core'
 	import DateTimeInput from '$lib/components/DateTimeInput.svelte'
 
@@ -17,8 +17,8 @@
 	export let placement: Placement = 'top-end'
 </script>
 
-<Popup floatingConfig={{ placement: placement, strategy: 'absolute' }} {target}>
-	<svelte:fragment slot="button">
+<Popover floatingConfig={{ placement: placement, strategy: 'absolute' }} portal={target}>
+	<svelte:fragment slot="trigger">
 		<button
 			title="Open calendar picker"
 			class="absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2 items-center text-primary bg-surface border rounded center-center hover:bg-surface-hover transition-all cursor-pointer"
@@ -30,26 +30,27 @@
 			<Calendar size={14} />
 		</button>
 	</svelte:fragment>
-
-	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<label class="block text-primary">
-		<div class="pb-1 text-sm text-secondary">{label}</div>
+	<svelte:fragment slot="content">
+		<!-- svelte-ignore a11y-label-has-associated-control -->
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div on:click|stopPropagation class="flex w-full">
-			<DateTimeInput
-				{clearable}
-				{useDropdown}
-				value={date}
-				on:change={(e) => {
-					date = e.detail
-					dispatch('change', date)
-				}}
-				on:clear={() => {
-					dispatch('clear')
-				}}
-			/>
-		</div>
-	</label>
-</Popup>
+		<label class="block text-primary">
+			<div class="pb-1 text-sm text-secondary">{label}</div>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div on:click|stopPropagation class="flex w-full">
+				<DateTimeInput
+					{clearable}
+					{useDropdown}
+					value={date}
+					on:change={(e) => {
+						date = e.detail
+						dispatch('change', date)
+					}}
+					on:clear={() => {
+						dispatch('clear')
+					}}
+				/>
+			</div>
+		</label>
+	</svelte:fragment>
+</Popover>
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index b0eb4a1243..4244160486 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -14,6 +14,8 @@
 	export let floatingConfig: any | undefined = undefined
 	export let usePointerDownOutside: boolean = false
 	export let closeOnOutsideClick: boolean = true
+	export let contentClasses: string = ''
+	export let portal: string | HTMLElement | undefined = undefined
 
 	const {
 		elements: { trigger, content, arrow, close: closeElement },
@@ -23,7 +25,8 @@
 		forceVisible: true,
 		positioning: floatingConfig ?? {
 			placement
-		}
+		},
+		portal
 	})
 
 	let isOpen = false
@@ -79,7 +82,7 @@
 		{#if displayArrow}
 			<div use:melt={$arrow} />
 		{/if}
-		<slot name="content" {open} {close} />
+		<slot name="content" {open} {close} class={contentClasses} />
 		{#if closeButton}
 			<button class="close" use:melt={$closeElement}>
 				<X class="size-3" />