windmill-components 1.448.50 → 1.472.2

package/package/components/sidebar/FavoriteMenu.svelte

@@ -1,17 +1,24 @@
-<script>import { Code2, LayoutDashboard, Star } from 'lucide-svelte';
+<script>import { CodeXml, LayoutDashboard, Star } from 'lucide-svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
-import Menu from '../common/menu/MenuV2.svelte';
+import { Menu, MenuItem } from '../meltComponents';
 import MenuButton from './MenuButton.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
 export let lightMode = false;
 export let isCollapsed = false;
 export let favoriteLinks = [];
+export let createMenu;
 </script>
 
-<Menu>
-	<div slot="trigger">
-		<MenuButton class="!text-xs" icon={Star} label={'Favorites'} {isCollapsed} {lightMode} />
-	</div>
+<Menu {createMenu} let:item usePointerDownOutside>
+	<svelte:fragment slot="trigger" let:trigger>
+		<MenuButton
+			class="!text-xs"
+			icon={Star}
+			label={'Favorites'}
+			{isCollapsed}
+			{lightMode}
+			{trigger}
+		/>
+	</svelte:fragment>
 
 	<div class="overflow-hidden" role="none">
 		{#if !favoriteLinks.length}
@@ -23,20 +30,22 @@ export let favoriteLinks = [];
 		{:else}
 			<div class="py-1 w-full max-w-full">
 				{#each favoriteLinks ?? [] as favorite (favorite.href)}
-					<MenuItem href={favorite.href}>
-						<span class="w-full inline-flex flex-row px-4 py-2 hover:bg-surface-hover">
-							<span class="center-center">
-								{#if favorite.kind == 'script'}
-									<Code2 size={16} />
-								{:else if favorite.kind == 'flow'}
-									<BarsStaggered size={16} />
-								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
-									<LayoutDashboard size={16} />
-								{/if}
-							</span>
-							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
-								{favorite.label}
-							</span>
+					<MenuItem
+						href={favorite.href}
+						{item}
+						class="w-full inline-flex flex-row px-4 py-2 data-[highlighted]:bg-surface-hover"
+					>
+						<span class="center-center">
+							{#if favorite.kind == 'script'}
+								<CodeXml size={16} />
+							{:else if favorite.kind == 'flow'}
+								<BarsStaggered size={16} />
+							{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
+								<LayoutDashboard size={16} />
+							{/if}
+						</span>
+						<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
+							{favorite.label}
 						</span>
 					</MenuItem>
 				{/each}

package/package/components/sidebar/FavoriteMenu.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { MenubarBuilders } from '@melt-ui/svelte';
 declare const __propDef: {
     props: {
         lightMode?: boolean | undefined;
@@ -8,6 +9,7 @@ declare const __propDef: {
             href: string;
             kind: 'script' | 'flow' | 'app' | 'raw_app';
         }[] | undefined;
+        createMenu: MenubarBuilders['createMenu'];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/sidebar/MenuButton.svelte

@@ -2,6 +2,8 @@
 import Popover from '../Popover.svelte';
 import { createEventDispatcher } from 'svelte';
 import SideBarNotification from './SideBarNotification.svelte';
+import { goto } from '$app/navigation';
+import { conditionalMelt } from '../../utils';
 export let label = undefined;
 export let icon = undefined;
 export let isCollapsed;
@@ -11,27 +13,40 @@ export let stopPropagationOnClick = false;
 export let shortcut = '';
 export let notificationsCount = 0;
 export let color = null;
+export let trigger = undefined;
+export let href = undefined;
 let dispatch = createEventDispatcher();
 </script>
 
 {#if !disabled}
-	<Popover appearTimeout={0} disappearTimeout={0} class="w-full" disablePopup={!isCollapsed}>
+	<Popover
+		appearTimeout={0}
+		disappearTimeout={0}
+		class="w-full"
+		disablePopup={!isCollapsed}
+		placement="right"
+	>
 		<button
 			on:click={(e) => {
 				if (stopPropagationOnClick) e.preventDefault()
+				if (href) {
+					goto(href)
+				}
 				dispatch('click')
 			}}
 			class={twMerge(
 				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
 				lightMode
-					? 'text-primary hover:bg-surface-hover '
-					: 'hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
+					? 'text-primary data-[highlighted]:bg-surface-hover hover:bg-surface-hover'
+					: 'data-[highlighted]:bg-[#2A3648] hover:bg-[#2A3648] text-primary-inverse dark:text-primary',
 				color ? 'border-4' : '',
-				'transition-all',
+				'transition-all relative',
 				$$props.class
 			)}
 			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
-			title={label}
+			use:conditionalMelt={trigger}
+			title={isCollapsed ? undefined : label}
+			{...$trigger}
 		>
 			{#if icon}
 				<svelte:component

package/package/components/sidebar/MenuButton.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { MenubarMenuElements } from '@melt-ui/svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -11,6 +12,8 @@ declare const __propDef: {
         shortcut?: string | undefined;
         notificationsCount?: number | undefined;
         color?: string | null | undefined;
+        trigger?: MenubarMenuElements['trigger'] | undefined;
+        href?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/package/components/sidebar/MenuLink.svelte

@@ -1,4 +1,4 @@
-<script>import { classNames } from '../../utils';
+<script>import { classNames, conditionalMelt } from '../../utils';
 import { navigating, page } from '$app/stores';
 import Popover from '../Popover.svelte';
 import { base } from '$app/paths';
@@ -8,6 +8,7 @@ export let icon = undefined;
 export let isCollapsed;
 export let disabled = false;
 export let lightMode = false;
+export let item = undefined;
 let isSelected = false;
 navigating.subscribe(() => {
     if (href === `${base}/`) {
@@ -27,17 +28,19 @@ navigating.subscribe(() => {
 				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
 				isSelected
 					? lightMode
-						? 'bg-surface-selected hover:bg-surface-hover rounded-none'
-						: 'bg-frost-700 hover:bg-[#30404e]'
+						? 'bg-surface-selected hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
+						: 'bg-frost-700 hover:bg-[#30404e] data-[highlighted]:bg-[#30404e]'
 					: lightMode
-					? 'hover:bg-surface-hover rounded-none'
-					: 'hover:bg-[#2A3648]',
+					? 'hover:bg-surface-hover rounded-none data-[highlighted]:bg-surface-hover'
+					: 'hover:bg-[#2A3648] data-[highlighted]:bg-[#2A3648]',
 
 				'hover:transition-all',
 				$$props.class
 			)}
 			target={href.includes('http') ? '_blank' : null}
 			title={isCollapsed ? undefined : label}
+			use:conditionalMelt={item}
+			{...$item}
 		>
 			{#if icon}
 				<svelte:component

package/package/components/sidebar/MenuLink.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import type { MenubarMenuElements } from '@melt-ui/svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,6 +9,7 @@ declare const __propDef: {
         isCollapsed: boolean;
         disabled?: boolean | undefined;
         lightMode?: boolean | undefined;
+        item?: MenubarMenuElements['item'] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/sidebar/OperatorMenu.svelte

@@ -1,73 +1,133 @@
 <script>import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog } from 'lucide-svelte';
 import { base } from '../../base';
-import Menu from '../common/menu/MenuV2.svelte';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
-import { enterpriseLicense, superadmin } from '../../stores';
-import MenuButton from './MenuButton.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
-import MenuLink from './MenuLink.svelte';
+import { enterpriseLicense, superadmin, userWorkspaces, workspaceStore } from '../../stores';
 import { twMerge } from 'tailwind-merge';
 import { USER_SETTINGS_HASH } from './settings';
 import { logout } from '../../logout';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
+import { Menu, Menubar, MenuItem } from '../meltComponents';
+import MenuButton from './MenuButton.svelte';
+import MenuLink from './MenuLink.svelte';
+import { onDestroy } from 'svelte';
 let darkMode = false;
 export let isCollapsed = false;
 export let favoriteLinks = [];
-const mainMenuLinks = [
-    { label: 'Home', href: `${base}/`, icon: Home },
-    { label: 'Runs', href: `${base}/runs`, icon: Play },
-    { label: 'Schedules', href: `${base}/schedules`, icon: Calendar }
-];
-let secondMenuLinks = [
+$: mainMenuLinks = [
+    { label: 'Home', id: 'home', href: `${base}/`, icon: Home },
+    { label: 'Runs', id: 'runs', href: `${base}/runs`, icon: Play },
+    { label: 'Schedules', id: 'schedules', href: `${base}/schedules`, icon: Calendar }
+].filter((link) => link.id === 'home' ||
+    ($userWorkspaces &&
+        $workspaceStore &&
+        $userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] ===
+            true));
+$: secondMenuLinks = [
     {
         label: 'Resources',
+        id: 'resources',
         href: `${base}/resources`
     },
     {
         label: 'Variables',
+        id: 'variables',
         href: `${base}/variables`
     },
     {
-        label: 'Custom HTTP Routes',
+        label: 'Custom HTTP routes',
+        id: 'triggers',
         href: `${base}/routes`
     },
     {
-        label: 'Websocket Triggers',
-        href: `${base}/websockets`
+        label: 'Websocket triggers',
+        id: 'triggers',
+        href: `${base}/websocket_triggers`
+    },
+    {
+        label: 'Postgres triggers',
+        id: 'triggers',
+        href: `${base}/postgres_triggers`
+    },
+    {
+        label: 'Kafka triggers',
+        id: 'triggers',
+        href: `${base}/kafka_triggers`
+    },
+    {
+        label: 'NATS triggers',
+        id: 'triggers',
+        href: `${base}/nats_triggers`
     },
     {
-        label: 'Kafka Triggers',
-        href: `${base}/kafka`
+        label: 'SQS triggers',
+        id: 'triggers',
+        href: `${base}/sqs_triggers`
     },
     {
         label: 'Audit logs',
+        id: 'audit_logs',
         href: `${base}/audit_logs`
     },
     {
         label: 'Groups',
+        id: 'groups',
         href: `${base}/groups`
     },
     {
         label: 'Folders',
+        id: 'folders',
         href: `${base}/folders`
     },
     {
         label: 'Workers',
+        id: 'workers',
         href: `${base}/workers`
     }
-];
+].filter((link) => {
+    if (!$userWorkspaces || !$workspaceStore)
+        return false;
+    return ($userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] === true);
+});
 let moreOpen = false;
+let moreOpenTimeout;
+function debouncedSetMoreOpen(value) {
+    if (moreOpenTimeout) {
+        clearTimeout(moreOpenTimeout);
+    }
+    moreOpenTimeout = setTimeout(() => {
+        moreOpen = value;
+    }, 150); // 150ms debounce
+}
+onDestroy(() => {
+    if (moreOpenTimeout) {
+        clearTimeout(moreOpenTimeout);
+    }
+});
 </script>
 
-<Menu>
-	<div slot="trigger">
-		<MenuButton class="!text-xs" icon={MenuIcon} {isCollapsed} lightMode label={undefined} />
-	</div>
-	<div class="w-full max-w-full">
-		{#each favoriteLinks ?? [] as favorite (favorite.href)}
-			<MenuItem href={favorite.href}>
-				<span class="w-full inline-flex flex-row px-2 py-2 hover:bg-surface-hover">
+<Menubar let:createMenu>
+	<Menu {createMenu} let:item usePointerDownOutside>
+		<svelte:fragment slot="trigger" let:trigger>
+			<MenuButton
+				class="!text-xs"
+				icon={MenuIcon}
+				{isCollapsed}
+				lightMode
+				label={undefined}
+				{trigger}
+			/>
+		</svelte:fragment>
+		<div class="w-full max-w-full">
+			{#each favoriteLinks ?? [] as favorite (favorite.href)}
+				<MenuItem
+					href={favorite.href}
+					{item}
+					class={twMerge(
+						'w-full inline-flex flex-row px-2 py-2 hover:bg-surface-hover',
+						'data-[highlighted]:bg-surface-hover'
+					)}
+				>
 					<span class="center-center">
 						{#if favorite.kind == 'script'}
 							<Code2 size={16} />
@@ -80,120 +140,153 @@ let moreOpen = false;
 					<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
 						{favorite.label}
 					</span>
-				</span>
-			</MenuItem>
+				</MenuItem>
+			{/each}
+		</div>
+
+		{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+			<MenuLink class="!text-xs" {...menuLink} {isCollapsed} lightMode {item} />
 		{/each}
-	</div>
 
-	{#each mainMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-		<MenuLink class="!text-xs" {...menuLink} {isCollapsed} lightMode />
-	{/each}
+		<div class="divide-y" role="none">
+			<div role="none">
+				<MenuItem
+					href={USER_SETTINGS_HASH}
+					class={twMerge(
+						'flex flex-row gap-3.5 items-center px-2 py-2 ',
+						'text-secondary text-xs',
+						'hover:bg-surface-hover hover:text-primary cursor-pointer',
+						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+					)}
+					{item}
+				>
+					<Settings size={14} />
+					Account settings
+				</MenuItem>
+			</div>
 
-	<div class="divide-y" role="none">
-		<div role="none">
-			<MenuItem
-				href={USER_SETTINGS_HASH}
-				class={twMerge(
-					'flex flex-row gap-3.5 items-center px-2 py-2 ',
-					'text-secondary text-xs',
-					'hover:bg-surface-hover hover:text-primary cursor-pointer'
-				)}
-			>
-				<Settings size={14} />
-				Account settings
-			</MenuItem>
-		</div>
+			<div role="none">
+				<MenuItem
+					on:click={() => {
+						if (!document.documentElement.classList.contains('dark')) {
+							document.documentElement.classList.add('dark')
+							window.localStorage.setItem('dark-mode', 'dark')
+						} else {
+							document.documentElement.classList.remove('dark')
+							window.localStorage.setItem('dark-mode', 'light')
+						}
+					}}
+					class={twMerge(
+						'text-secondary block text-left px-2 py-2 font-normal text-xs hover:bg-surface-hover hover:text-primary w-full',
+						'flex flex-row items-center gap-3.5 ',
+						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+					)}
+					{item}
+				>
+					{#if darkMode}
+						<Sun size={14} />
+					{:else}
+						<Moon size={14} />
+					{/if}
+					Switch theme
+				</MenuItem>
+				<MenuItem
+					href="{base}/user/workspaces"
+					on:click={() => {
+						localStorage.removeItem('workspace')
+					}}
+					class={twMerge(
+						'text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary',
+						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+					)}
+					{item}
+				>
+					<Building size={14} />
+					All workspaces
+				</MenuItem>
 
-		<div role="none">
-			<button
-				on:click={() => {
-					if (!document.documentElement.classList.contains('dark')) {
-						document.documentElement.classList.add('dark')
-						window.localStorage.setItem('dark-mode', 'dark')
-					} else {
-						document.documentElement.classList.remove('dark')
-						window.localStorage.setItem('dark-mode', 'light')
-					}
-				}}
-				class={twMerge(
-					'text-secondary block text-left px-2 py-2 font-normal text-xs hover:bg-surface-hover hover:text-primary w-full',
-					'flex flex-row items-center gap-3.5 '
-				)}
-				role="menuitem"
-				tabindex="-1"
-			>
-				{#if darkMode}
-					<Sun size={14} />
-				{:else}
-					<Moon size={14} />
+				{#if $superadmin}
+					<MenuItem
+						href="#superadmin-settings"
+						class={twMerge(
+							'flex flex-row gap-3.5 items-center px-2 py-2 ',
+							'text-secondary text-xs',
+							'hover:bg-surface-hover hover:text-primary cursor-pointer',
+							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+						)}
+						{item}
+					>
+						<ServerCog size={14} />
+						Instance settings
+					</MenuItem>
 				{/if}
-				Switch theme
-			</button>
-			<a
-				href="{base}/user/workspaces"
-				on:click={() => {
-					localStorage.removeItem('workspace')
-				}}
-				class="text-primary flex gap-3.5 px-2 py-2 text-xs hover:bg-surface-hover hover:text-primary"
-				role="menuitem"
-				tabindex="-1"
-			>
-				<Building size={14} />
-				All workspaces
-			</a>
 
-			{#if $superadmin}
 				<MenuItem
-					href="#superadmin-settings"
+					on:click={() => logout()}
 					class={twMerge(
-						'flex flex-row gap-3.5 items-center px-2 py-2 ',
+						'flex flex-row gap-3.5  items-center px-2 py-2 w-full',
 						'text-secondary text-xs',
-						'hover:bg-surface-hover hover:text-primary cursor-pointer'
+						'hover:bg-surface-hover hover:text-primary cursor-pointer',
+						'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 					)}
+					{item}
 				>
-					<ServerCog size={14} />
-					Instance settings
+					<LogOut size={14} />
+					Sign out
 				</MenuItem>
-			{/if}
-
-			<MenuItem
-				href="#"
-				on:click={() => logout()}
-				class={twMerge(
-					'flex flex-row gap-3.5  items-center px-2 py-2 ',
-					'text-secondary text-xs',
-					'hover:bg-surface-hover hover:text-primary cursor-pointer'
-				)}
+			</div>
+			<div
+				on:mouseenter={() => debouncedSetMoreOpen(true)}
+				on:mouseleave={() => debouncedSetMoreOpen(false)}
+				role="none"
 			>
-				<LogOut size={14} />
-				Sign out
-			</MenuItem>
-		</div>
-		<div
-			on:mouseenter={() => (moreOpen = true)}
-			on:mouseleave={() => (moreOpen = false)}
-			class="divide-y"
-			role="none"
-		>
-			{#if moreOpen == false}
-				<div class="px-2 text-tertiary text-2xs">More...</div>
-			{:else}
-				{#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
-					<div>
-						<a
-							href={menuLink.href}
-							class="flex flex-row gap-3.5 items-center px-2 py-0.5 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer"
-						>
-							{menuLink.label}
-						</a>
-					</div>
-				{/each}
-			{/if}
+				<MenuItem
+					on:m-focusin={() => debouncedSetMoreOpen(true)}
+					on:m-focusout={() => debouncedSetMoreOpen(false)}
+					{item}
+				>
+					{#if !moreOpen || secondMenuLinks.length === 0}
+						<div class="px-2 py-2 text-tertiary text-2xs">More...</div>
+					{/if}
+				</MenuItem>
+				{#if moreOpen && secondMenuLinks.length > 0}
+					{#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+						<div>
+							<MenuItem
+								href={menuLink.href}
+								class={twMerge(
+									'flex flex-row gap-3.5 items-center px-2 py-2 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
+									'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+								)}
+								{item}
+								on:m-focusin={() => debouncedSetMoreOpen(true)}
+								on:m-focusout={() => debouncedSetMoreOpen(false)}
+							>
+								{menuLink.label}
+							</MenuItem>
+						</div>
+					{/each}
+				{/if}
+			</div>
 		</div>
-	</div>
-	{#if $enterpriseLicense}
-		<MultiplayerMenu />
-	{/if}
-</Menu>
+		{#if $enterpriseLicense}
+			<div
+				on:mouseenter={() => {
+					if (moreOpenTimeout) {
+						setTimeout(() => {
+							clearTimeout(moreOpenTimeout)
+						}, 15)
+					}
+				}}
+				on:mouseleave={() => {
+					debouncedSetMoreOpen(false)
+				}}
+				role="none"
+			>
+				<MultiplayerMenu />
+			</div>
+		{/if}
+	</Menu>
+</Menubar>
 
 <DarkModeObserver bind:darkMode />