windmill-components 1.623.1 → 1.623.2

package/package/components/sidebar/MenuButton.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">export const sidebarClasses = {
     text: 'text-primary-inverse dark:text-primary data-[light-mode=true]:text-primary text-xs font-normal',
     selectedText: 'text-emphasis-inverse dark:text-emphasis text-xs font-normal',
+    sublabelText: 'text-secondary-inverse dark:text-secondary text-2xs font-normal',
     hoverBg: 'transition-colors hover:bg-surface-hover-inverse dark:hover:bg-surface-hover data-[light-mode=true]:hover:bg-surface-hover'
 };
 </script>
@@ -11,7 +12,7 @@ import { createEventDispatcher } from 'svelte';
 import SideBarNotification from './SideBarNotification.svelte';
 import { conditionalMelt } from '../../utils';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
-let { aiId = undefined, aiDescription = undefined, label = undefined, icon = undefined, iconClasses = null, iconProps = null, isCollapsed, disabled = false, lightMode = false, stopPropagationOnClick = false, shortcut = '', notificationsCount = 0, color = null, trigger = undefined, href = undefined, class: classNames = undefined } = $props();
+let { aiId = undefined, aiDescription = undefined, label = undefined, sublabel = undefined, icon = undefined, iconClasses = null, iconProps = null, isCollapsed, disabled = false, lightMode = false, stopPropagationOnClick = false, shortcut = '', notificationsCount = 0, color = null, trigger = undefined, href = undefined, class: classNames = undefined } = $props();
 let buttonRef = $state(undefined);
 let dispatch = createEventDispatcher();
 // Dynamic component based on whether href is provided
@@ -47,41 +48,70 @@ const Element = href ? 'a' : 'button';
 			{href}
 			data-light-mode={lightMode}
 			class={twMerge(
-				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
+				'group flex items-center px-2 py-2 font-light rounded-md gap-2 w-full',
 				sidebarClasses.hoverBg,
-				color ? 'border-4' : '',
 				'transition-all relative',
+				sublabel ? 'h-10' : 'h-8',
 				classNames
 			)}
-			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
 			use:conditionalMelt={trigger}
 			title={isCollapsed ? undefined : label}
 			{...$trigger}
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<SvelteComponent
-					size={16}
-					class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
-					{...iconProps}
-				/>
+				{#if color}
+					<svg width="26" height="26" viewBox="0 0 26 26" class="flex-shrink-0 -ml-[5px]">
+						<circle cx="13" cy="13" r="13" fill={color} />
+						<foreignObject x="5" y="5" width="16" height="16">
+							<SvelteComponent
+								size={16}
+								class={twMerge(sidebarClasses.text, 'transition-colors', iconClasses)}
+								{...iconProps}
+							/>
+						</foreignObject>
+					</svg>
+				{:else}
+					<SvelteComponent
+						size={16}
+						class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
+						{...iconProps}
+					/>
+				{/if}
 			{/if}
 
-			{#if !isCollapsed && label}
-				<span
-					class={twMerge(
-						'whitespace-pre truncate',
-						sidebarClasses.text,
-						'transition-all',
-						classNames
-					)}
-				>
-					{label}
-					<span class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold">
-						{shortcut}
-					</span>
-				</span>
-			{/if}
+			<div class="flex flex-col text-left grow min-w-0">
+				{#if !isCollapsed && label}
+					<div
+						class={twMerge(
+							'whitespace-pre truncate w-full',
+							sidebarClasses.text,
+							'transition-all',
+							classNames
+						)}
+						title={label}
+					>
+						{label}
+						<span
+							class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold"
+						>
+							{shortcut}
+						</span>
+					</div>
+				{/if}
+
+				{#if sublabel}
+					<div
+						class={twMerge(
+							'whitespace-pre truncate w-full',
+							sidebarClasses.sublabelText,
+							'transition-all',
+							classNames
+						)}
+						title={sublabel}>{sublabel}</div
+					>
+				{/if}
+			</div>
 
 			{#if isCollapsed && notificationsCount > 0}
 				<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">

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

@@ -1,6 +1,7 @@
 export declare const sidebarClasses: {
     text: string;
     selectedText: string;
+    sublabelText: string;
     hoverBg: string;
 };
 import type { MenubarMenuElements } from '@melt-ui/svelte';
@@ -8,6 +9,7 @@ interface Props {
     aiId?: string | undefined;
     aiDescription?: string | undefined;
     label?: string | undefined;
+    sublabel?: string | undefined;
     icon?: any | undefined;
     iconClasses?: string | null;
     iconProps?: any | null;

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -80,7 +80,7 @@ function showActivity(url) {
 
 {#if connected}
 	<div class="divide-gray-100 border-t" role="none">
-		<div class="px-2.5 text-xs font-semibold mt-1">Live activity</div>
+		<div class="px-2 text-xs text-secondary font-normal mt-1">Live activity</div>
 		<div class="py-1 flex flex-col gap-y-1 max-h-48 overflow-auto" transition:slide>
 			{#each Object.entries($awarenessStore ?? {}) as [user, url]}
 				<div class="inline-flex gap-2 px-2 items-center">
@@ -89,12 +89,12 @@ function showActivity(url) {
 						title={user}
 					>
 						<span class="text-sm font-medium leading-none text-white"
-							>{user.substring(0, 2).toLocaleUpperCase()}</span
+							>{user?.substring(0, 2).toLocaleUpperCase()}</span
 						>
 					</span>
 					<div class="flex flex-col">
-						<span class="text-sm text-primary truncate">{user}</span>
-						<span class="text-xs text-primary truncate">{showActivity(url)}</span>
+						<span class="text-xs text-primary truncate">{user}</span>
+						<span class="text-2xs text-secondary truncate">{showActivity(url ?? '')}</span>
 					</div>
 				</div>
 			{/each}

package/package/components/sidebar/OperatorMenu.svelte

@@ -4,13 +4,13 @@ import MultiplayerMenu from './MultiplayerMenu.svelte';
 import { clearWorkspaceFromStorage, enterpriseLicense, superadmin, userWorkspaces, workspaceStore, tutorialsToDo, skippedAll } from '../../stores';
 import { twMerge } from 'tailwind-merge';
 import { USER_SETTINGS_HASH } from './settings';
-import { logout } from '../../logout';
+import { logout } from '../../logoutKit';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Menu, Menubar, MenuItem } from '../meltComponents';
 import MenuButton, { sidebarClasses } from './MenuButton.svelte';
 import MenuLink from './MenuLink.svelte';
-import { onDestroy } from 'svelte';
+import ResizeTransitionWrapper from '../common/ResizeTransitionWrapper.svelte';
 let darkMode = $state(false);
 let { isCollapsed = false, favoriteLinks = [] } = $props();
 let mainMenuLinks = $derived([
@@ -34,6 +34,12 @@ let mainMenuLinks = $derived([
         $workspaceStore &&
         $userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] ===
             true)));
+function filterLink(link) {
+    if (!$userWorkspaces || !$workspaceStore)
+        return false;
+    let userWorkspace = $userWorkspaces.find((_) => _.id === $workspaceStore);
+    return userWorkspace?.operator_settings?.[link.id] === true;
+}
 let secondMenuLinks = $derived([
     {
         label: 'Resources',
@@ -50,6 +56,23 @@ let secondMenuLinks = $derived([
         id: 'assets',
         href: `${base}/assets`
     },
+    {
+        label: 'Groups',
+        id: 'groups',
+        href: `${base}/groups`
+    },
+    {
+        label: 'Folders',
+        id: 'folders',
+        href: `${base}/folders`
+    },
+    {
+        label: 'Workers',
+        id: 'workers',
+        href: `${base}/workers`
+    }
+].filter(filterLink));
+let secondMenuTriggerLinks = $derived([
     {
         label: 'Custom HTTP routes',
         id: 'triggers',
@@ -99,47 +122,14 @@ let secondMenuLinks = $derived([
         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 = $state(false);
-let moreOpenTimeout = $state();
-function debouncedSetMoreOpen(value) {
-    if (moreOpenTimeout) {
-        clearTimeout(moreOpenTimeout);
-    }
-    moreOpenTimeout = setTimeout(() => {
-        moreOpen = value;
-    }, 150); // 150ms debounce
-}
-onDestroy(() => {
-    if (moreOpenTimeout) {
-        clearTimeout(moreOpenTimeout);
-    }
-});
+].filter(filterLink));
+let showMore = $state(false);
 </script>
 
 <Menubar>
 	{#snippet children({ createMenu })}
-		<Menu {createMenu} usePointerDownOutside>
+		<Menu {createMenu} usePointerDownOutside on:close={() => (showMore = false)}>
 			{#snippet triggr({ trigger })}
 				<MenuButton
 					class="!text-xs"
@@ -255,8 +245,8 @@ onDestroy(() => {
 							onClick={() => logout()}
 							class={twMerge(
 								'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',
+								'text-primary text-xs',
+								'hover:bg-surface-hover cursor-pointer',
 								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 							)}
 							{item}
@@ -265,57 +255,42 @@ onDestroy(() => {
 							Sign out
 						</MenuItem>
 					</div>
-					<div
-						onmouseenter={() => debouncedSetMoreOpen(true)}
-						onmouseleave={() => debouncedSetMoreOpen(false)}
-						role="none"
-					>
-						<MenuItem
-							onFocusIn={() => debouncedSetMoreOpen(true)}
-							onFocusOut={() => debouncedSetMoreOpen(false)}
-							{item}
-						>
-							{#if !moreOpen || secondMenuLinks.length === 0}
-								<div class="px-2 py-2 text-primary 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}
-										onFocusIn={() => debouncedSetMoreOpen(true)}
-										onFocusOut={() => debouncedSetMoreOpen(false)}
-									>
-										{menuLink.label}
-									</MenuItem>
-								</div>
-							{/each}
+					<div onmouseleave={() => (showMore = false)} role="none">
+						{#if secondMenuLinks.length}
+							<ResizeTransitionWrapper vertical innerClass="w-full">
+								{#if !showMore}
+									<div onmouseenter={() => (showMore = true)} role="none">
+										<MenuItem {item}>
+											<div class="px-2 py-2 text-primary text-2xs">More...</div>
+										</MenuItem>
+									</div>
+								{:else}
+									{#snippet renderSecondMenuLinks(menuLinks: SecondMenuLink[])}
+										{#each menuLinks as menuLink (menuLink.href ?? menuLink.label)}
+											<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}
+											>
+												{menuLink.label}
+											</MenuItem>
+										{/each}
+									{/snippet}
+									<div class="divide-y">
+										<div>{@render renderSecondMenuLinks(secondMenuLinks)}</div>
+										<div>{@render renderSecondMenuLinks(secondMenuTriggerLinks)}</div>
+									</div>
+								{/if}
+							</ResizeTransitionWrapper>
+						{/if}
+						{#if $enterpriseLicense}
+							<MultiplayerMenu />
 						{/if}
 					</div>
 				</div>
-				{#if $enterpriseLicense}
-					<div
-						onmouseenter={() => {
-							if (moreOpenTimeout) {
-								setTimeout(() => {
-									clearTimeout(moreOpenTimeout)
-								}, 15)
-							}
-						}}
-						onmouseleave={() => {
-							debouncedSetMoreOpen(false)
-						}}
-						role="none"
-					>
-						<MultiplayerMenu />
-					</div>
-				{/if}
 			{/snippet}
 		</Menu>
 	{/snippet}

package/package/components/sidebar/SidebarContent.svelte

@@ -2,7 +2,7 @@
 import { superadmin, usedTriggerKinds, userStore, workspaceStore, isCriticalAlertsUIOpen, enterpriseLicense, devopsRole, tutorialsToDo, skippedAll } from '../../stores';
 import { syncTutorialsTodos } from '../../tutorialUtils';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
-import { BookOpen, HardHat, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, GraduationCap, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid, Trash2, MailIcon } from 'lucide-svelte';
+import { BookOpen, ServerCog, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, GraduationCap, HelpCircle, Home, LogOut, Newspaper, Play, Route, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid, Trash2, MailIcon } from 'lucide-svelte';
 import UserMenu from './UserMenu.svelte';
 import DiscordIcon from '../icons/brands/Discord.svelte';
 import { WorkspaceService } from '../../gen';
@@ -20,6 +20,7 @@ import KafkaIcon from '../icons/KafkaIcon.svelte';
 import NatsIcon from '../icons/NatsIcon.svelte';
 import MqttIcon from '../icons/MqttIcon.svelte';
 import AwsIcon from '../icons/AwsIcon.svelte';
+import { getAvailableNativeTriggerServices, getServiceConfig, getServiceIcon } from '../triggers/native/utils';
 import { Menubar, Menu, MenuSingleItem, MenuItem, MeltButton } from '../meltComponents';
 import MenuButton from './MenuButton.svelte';
 import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte';
@@ -38,6 +39,23 @@ async function deleteFork() {
 let hasNewChangelogs = $state(false);
 let recentChangelogs = $state([]);
 let lastOpened = localStorage.getItem('changelogsLastOpened');
+let availableNativeServices = $state([]);
+async function loadAvailableNativeTriggers() {
+    try {
+        const services = await getAvailableNativeTriggerServices($workspaceStore);
+        const serviceData = await Promise.all(services.map(async (service) => ({
+            service,
+            icon: await getServiceIcon(service),
+            config: getServiceConfig(service)
+        })));
+        availableNativeServices = serviceData;
+    }
+    catch (err) {
+        console.error('Failed to load available native trigger services:', err);
+        availableNativeServices = [];
+    }
+}
+loadAvailableNativeTriggers();
 onMount(async () => {
     if (lastOpened) {
         // @ts-ignore
@@ -255,6 +273,16 @@ let defaultExtraTriggerLinks = $derived([
         aiDescription: 'Button to navigate to Email triggers'
     }
 ]);
+let nativeTriggerLinks = $derived(availableNativeServices.map(({ service, icon, config }) => ({
+    label: config?.serviceDisplayName || service,
+    href: `/native_triggers/${service}`,
+    icon: icon,
+    disabled: $userStore?.operator,
+    kind: service,
+    aiId: `sidebar-menu-link-${service}`,
+    aiDescription: `Button to navigate to ${config?.serviceDisplayName || service} triggers`
+})));
+let allTriggerLinks = $derived([...defaultExtraTriggerLinks, ...nativeTriggerLinks]);
 let triggerMenuLinks = $derived([
     {
         label: 'Schedules',
@@ -264,9 +292,9 @@ let triggerMenuLinks = $derived([
         aiId: 'sidebar-menu-link-schedules',
         aiDescription: 'Button to navigate to schedules'
     },
-    ...defaultExtraTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href))
+    ...allTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href))
 ]);
-let extraTriggerLinks = $derived(defaultExtraTriggerLinks.filter((link) => {
+let extraTriggerLinks = $derived(allTriggerLinks.filter((link) => {
     return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind);
 }));
 let secondaryMenuLinks = $derived([
@@ -345,7 +373,7 @@ let secondaryMenuLinks = $derived([
     {
         label: 'Workers',
         href: `${base}/workers`,
-        icon: HardHat,
+        icon: ServerCog,
         disabled: $userStore?.operator,
         aiId: 'sidebar-menu-link-workers',
         aiDescription: 'Button to navigate to workers'
@@ -582,7 +610,12 @@ let secondaryMenuLinks = $derived([
 							{/snippet}
 							{#snippet children({ item })}
 								{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-									<MenuItem href={subItem.href} class={itemClass} target={subItem.external !== false ? "_blank" : undefined} {item}>
+									<MenuItem
+										href={subItem.href}
+										class={itemClass}
+										target={subItem.external !== false ? '_blank' : undefined}
+										{item}
+									>
 										<div class="flex flex-row items-center gap-2">
 											{#if subItem.icon}
 												<subItem.icon size={16} />
@@ -615,7 +648,7 @@ let secondaryMenuLinks = $derived([
 <ConfirmationModal
 	open={leaveWorkspaceModal}
 	title="Leave workspace"
-	confirmationText="Remove"
+	confirmationText="Leave workspace"
 	on:canceled={() => {
 		leaveWorkspaceModal = false
 	}}

package/package/components/sidebar/UserMenu.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">import { goto } from '../../navigation';
-import { logout } from '../../logout';
+import { logout } from '../../logoutKit';
 import { userStore, usageStore, workspaceUsageStore, isPremiumStore, workspaceStore } from '../../stores';
 import { USER_SETTINGS_HASH } from './settings';
 import { isCloudHosted } from '../../cloud';
 import { twMerge } from 'tailwind-merge';
-import { Crown, HardHat, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte';
+import { Crown, ServerCog, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import MenuButton from './MenuButton.svelte';
 import { Menu, MenuItem } from '../meltComponents';
@@ -35,7 +35,7 @@ const itemClass = twMerge('text-secondary text-left font-normal text-xs ', 'flex
 				{#if $userStore?.is_admin}
 					Admin of this workspace <Crown size={14} />
 				{:else if $userStore?.operator}
-					Operator in this workspace <HardHat size={14} />
+					Operator in this workspace <ServerCog size={14} />
 				{/if}
 			</span>
 		</div>