feat(frontend) migrate menu to melt menu

frontend/src/.d.ts

@@ -1,7 +1,7 @@
-declare namespace svelte.JSX {
-	interface DOMAttributes<T> {
-		onclick_outside?: CompositionEventHandler<T>
-		onpointerdown_outside?: (event: CustomEvent) => void
-		onpointerdown_connecting?: (event: CustomEvent) => void
+declare namespace svelteHTML {
+	interface HTMLAttributes<T> {
+		'on:click_outside'?: (event: CustomEvent) => void
+		'on:pointerdown_outside'?: (event: CustomEvent) => void
+		'on:pointerdown_connecting'?: (event: CustomEvent) => void
 	}
 }

frontend/src/lib/components/AddUser.svelte

@@ -2,7 +2,8 @@
 	import { createEventDispatcher } from 'svelte'
 	import { globalEmailInvite, superadmin, workspaceStore } from '$lib/stores'
 	import { SettingService, UserService, WorkspaceService } from '$lib/gen'
-	import { Button, Popup } from './common'
+	import { Button } from './common'
+	import Popover from './meltComponents/Popover.svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { isCloudHosted } from '$lib/cloud'
 	import { goto } from '$lib/navigation'
@@ -72,64 +73,66 @@
 	let selected: 'operator' | 'developer' | 'admin' = 'developer'
 </script>
 
-<Popup
-	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
->
-	<svelte:fragment slot="button">
+<Popover placement="bottom-end">
+	<svelte:fragment slot="trigger">
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: UserPlus }}>
 			Add new user
 		</Button>
 	</svelte:fragment>
-	<div class="flex flex-col w-72 p-2">
-		<span class="text-sm mb-2 leading-6 font-semibold">Add a new user</span>
+	<svelte:fragment slot="content">
+		<div class="flex flex-col w-72 p-4">
+			<span class="text-sm mb-2 leading-6 font-semibold">Add a new user</span>
 
-		<span class="text-xs mb-1 leading-6">Email</span>
-		<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+			<span class="text-xs mb-1 leading-6">Email</span>
+			<input type="email mb-1" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
 
-		{#if !automateUsernameCreation}
-			<span class="text-xs mb-1 pt-2 leading-6">Username</span>
-			<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
-		{/if}
+			{#if !automateUsernameCreation}
+				<span class="text-xs mb-1 pt-2 leading-6">Username</span>
+				<input type="text" on:keyup={handleKeyUp} placeholder="username" bind:value={username} />
+			{/if}
 
-		<span class="text-xs mb-1 pt-2 leading-6">Role</span>
-		<ToggleButtonGroup bind:selected class="mb-4">
-			<ToggleButton
-				value="operator"
+			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
+			<ToggleButtonGroup bind:selected class="mb-4" let:item>
+				<ToggleButton
+					value="operator"
+					size="sm"
+					label="Operator"
+					tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+					{item}
+				/>
+				<ToggleButton
+					position="center"
+					value="developer"
+					size="sm"
+					label="Developer"
+					tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+					{item}
+				/>
+				<ToggleButton
+					position="right"
+					value="admin"
+					size="sm"
+					label="Admin"
+					tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+					{item}
+				/>
+			</ToggleButtonGroup>
+			<Button
+				variant="contained"
+				color="blue"
 				size="sm"
-				label="Operator"
-				tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
-			/>
-			<ToggleButton
-				position="center"
-				value="developer"
-				size="sm"
-				label="Developer"
-				tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-			/>
-			<ToggleButton
-				position="right"
-				value="admin"
-				size="sm"
-				label="Admin"
-				tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-			/>
-		</ToggleButtonGroup>
-		<Button
-			variant="contained"
-			color="blue"
-			size="sm"
-			on:click={() => {
-				addUser().then(() => {
-					// @ts-ignore
-					email = undefined
-					// @ts-ignore
-					username = undefined
-				})
-			}}
-			disabled={email === undefined || (!automateUsernameCreation && username === undefined)}
-		>
-			Add
-		</Button>
-	</div>
-</Popup>
+				on:click={() => {
+					addUser().then(() => {
+						// @ts-ignore
+						email = undefined
+						// @ts-ignore
+						username = undefined
+					})
+				}}
+				disabled={email === undefined || (!automateUsernameCreation && username === undefined)}
+			>
+				Add
+			</Button>
+		</div>
+	</svelte:fragment>
+</Popover>

frontend/src/lib/components/ApiConnectForm.svelte

@@ -8,7 +8,7 @@
 	import Toggle from './Toggle.svelte'
 	import TestConnection from './TestConnection.svelte'
 	import SupabaseIcon from './icons/SupabaseIcon.svelte'
-	import Popup from './common/popup/Popup.svelte'
+	import Popover from './meltComponents/Popover.svelte'
 	import Button from './common/button/Button.svelte'
 	import { Loader2 } from 'lucide-svelte'
 
@@ -129,13 +129,12 @@
 		/>
 		<TestConnection {resourceType} {args} />
 		{#if resourceType == 'postgresql'}
-			<Popup
-				let:close
+			<Popover
 				floatingConfig={{
 					placement: 'bottom'
 				}}
 			>
-				<svelte:fragment slot="button">
+				<svelte:fragment slot="trigger">
 					<Button
 						spacingSize="sm"
 						size="xs"
@@ -147,32 +146,34 @@
 						From connection string
 					</Button>
 				</svelte:fragment>
-				<div class="block text-primary">
-					<div class="w-[550px] flex flex-col items-start gap-1">
-						<div class="flex flex-row gap-1 w-full">
-							<input
-								type="text"
-								bind:value={connectionString}
-								placeholder="postgres://user:password@host:5432/dbname?sslmode=disable"
-							/>
-							<Button
-								size="xs"
-								color="blue"
-								buttonType="button"
-								on:click={() => {
-									parseConnectionString(close)
-								}}
-								disabled={connectionString.length <= 0}
-							>
-								Apply
-							</Button>
+				<svelte:fragment slot="content" let:close>
+					<div class="block text-primary p-4">
+						<div class="w-[550px] flex flex-col items-start gap-1">
+							<div class="flex flex-row gap-1 w-full">
+								<input
+									type="text"
+									bind:value={connectionString}
+									placeholder="postgres://user:password@host:5432/dbname?sslmode=disable"
+								/>
+								<Button
+									size="xs"
+									color="blue"
+									buttonType="button"
+									on:click={() => {
+										parseConnectionString(close)
+									}}
+									disabled={connectionString.length <= 0}
+								>
+									Apply
+								</Button>
+							</div>
+							{#if !validConnectionString}
+								<p class="text-red-500 text-xs">Could not parse connection string</p>
+							{/if}
 						</div>
-						{#if !validConnectionString}
-							<p class="text-red-500 text-xs">Could not parse connection string</p>
-						{/if}
 					</div>
-				</div>
-			</Popup>
+				</svelte:fragment>
+			</Popover>
 		{/if}
 		{#if resourceType == 'postgresql' && supabaseWizard}
 			<a

frontend/src/lib/components/ArgInput.svelte

@@ -759,9 +759,10 @@
 								value = { label: oneOfSelected }
 								redraw += 1
 							}}
+							let:item
 						>
 							{#each oneOf as obj}
-								<ToggleButton value={obj.title} label={obj.title} />
+								<ToggleButton value={obj.title} label={obj.title} {item} />
 							{/each}
 						</ToggleButtonGroup>
 						{#if oneOfSelected}

frontend/src/lib/components/AssignableTags.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { Button, Popup } from './common'
+	import { Button } from './common'
 	import { Pen } from 'lucide-svelte'
+	import Popover from './meltComponents/Popover.svelte'
 
 	import Tooltip from './Tooltip.svelte'
 	import AssignableTagsInner from './AssignableTagsInner.svelte'
@@ -11,12 +12,13 @@
 	export let showWorkspaceRestriction = false
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{ strategy: 'absolute', placement: placement }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 	{disabled}
+	closeButton
+	usePointerDownOutside
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<Button {color} size="xs" nonCaptureEvent={true} {disabled}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
@@ -28,5 +30,7 @@
 			>
 		</Button>
 	</svelte:fragment>
-	<AssignableTagsInner {showWorkspaceRestriction} on:refresh />
-</Popup>
+	<svelte:fragment slot="content">
+		<AssignableTagsInner {showWorkspaceRestriction} on:refresh />
+	</svelte:fragment>
+</Popover>

frontend/src/lib/components/AssignableTagsInner.svelte

@@ -29,7 +29,7 @@
 	loadCustomTags()
 </script>
 
-<div class="flex flex-col w-72 p-2 gap-2">
+<div class="flex flex-col w-72 p-4 gap-2">
 	{#if customTags == undefined}
 		<Loader2 class="animate-spin" />
 	{:else}

frontend/src/lib/components/Auth0Setting.svelte

@@ -52,9 +52,15 @@
 			<label class="block pb-2">
 				<div class="flex gap-2 items-end">
 					<div>
-						<ToggleButtonGroup bind:selected={value['custom']}>
-							<ToggleButton value={false} label={'Org'} />
-							<ToggleButton value={true} label="Custom" />
+						<ToggleButtonGroup
+							selected={value['custom'] ? 'custom' : 'org'}
+							on:selected={({ detail }) => {
+								value['custom'] = detail === 'custom'
+							}}
+							let:item
+						>
+							<ToggleButton value="org" label={'Org'} {item} />
+							<ToggleButton value="custom" label="Custom" {item} />
 						</ToggleButtonGroup>
 					</div>
 					<div class="grow">

frontend/src/lib/components/AutoscalingConfigEditor.svelte

@@ -264,28 +264,23 @@
 				on:selected={(e) => dispatch('dirty')}
 				bind:selected={config.integration.type}
 				class="mb-4 mt-2"
+				let:item
 			>
 				<ToggleButton
 					value="dryrun"
-					size="sm"
 					label="Dry run"
 					tooltip="See autoscaling events but not actual scaling actions will be performed"
+					{item}
 				/>
 				<ToggleButton
 					value="script"
-					size="sm"
 					label="Custom script"
 					tooltip="Run a custom script to scale your worker group"
+					{item}
 				/>
-				<ToggleButton position="center" disabled value="ecs" size="sm" label="ECS (soon)" />
-				<ToggleButton position="right" disabled value="nomad" size="sm" label="Nomad (soon)" />
-				<ToggleButton
-					position="right"
-					disabled
-					value="kubernetes"
-					size="sm"
-					label="Kubernetes (soon)"
-				/>
+				<ToggleButton disabled value="ecs" label="ECS (soon)" {item} />
+				<ToggleButton disabled value="nomad" label="Nomad (soon)" {item} />
+				<ToggleButton disabled value="kubernetes" label="Kubernetes (soon)" {item} />
 			</ToggleButtonGroup>
 
 			{#if config.integration.type === 'script'}
@@ -347,12 +342,12 @@
 				</div>
 			{/if}
 		{:else}
-			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2">
-				<ToggleButton value="dryrun" size="sm" label="Dry run" />
-				<ToggleButton value="script" size="sm" label="Custom script" />
-				<ToggleButton position="center" value="ecs" size="sm" label="ECS (soon)" />
-				<ToggleButton position="right" value="nomad" size="sm" label="Nomad (soon)" />
-				<ToggleButton position="right" value="kubernetes" size="sm" label="Kubernetes (soon)" />
+			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2" let:item>
+				<ToggleButton value="dryrun" label="Dry run" {item} />
+				<ToggleButton value="script" label="Custom script" {item} />
+				<ToggleButton value="ecs" label="ECS (soon)" {item} />
+				<ToggleButton value="nomad" label="Nomad (soon)" {item} />
+				<ToggleButton value="kubernetes" label="Kubernetes (soon)" {item} />
 			</ToggleButtonGroup>
 
 			<label>