windmill-components 1.623.1 → 1.642.0

package/package/components/sidebar/OperatorMenu.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog, GraduationCap } from 'lucide-svelte';
+<script lang="ts">import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog, GraduationCap, Table2 } from 'lucide-svelte';
 import { base } from '../../base';
 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"
@@ -168,6 +158,8 @@ onDestroy(() => {
 									<BarsStaggered size={16} />
 								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
 									<LayoutDashboard size={16} />
+								{:else if favorite.kind == 'asset'}
+									<Table2 size={16} />
 								{/if}
 							</span>
 							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
@@ -255,8 +247,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 +257,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/OperatorMenu.svelte.d.ts

@@ -1,6 +1,11 @@
+import type { FavoriteKind } from './FavoriteMenu.svelte';
 interface Props {
     isCollapsed?: boolean;
-    favoriteLinks?: any;
+    favoriteLinks?: {
+        label: string;
+        href: string;
+        kind: FavoriteKind;
+    }[];
 }
 declare const OperatorMenu: import("svelte").Component<Props, {}, "">;
 type OperatorMenu = ReturnType<typeof OperatorMenu>;

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'
@@ -442,7 +470,7 @@ let secondaryMenuLinks = $derived([
 		</div>
 		<div class="pt-4">
 			<div
-				class="text-gray-400 text-[0.5rem] uppercase transition-opacity"
+				class="text-secondary text-[0.5rem] uppercase transition-opacity"
 				class:opacity-0={isCollapsed}>Triggers</div
 			>
 			<Menubar class="flex flex-col gap-1">
@@ -457,8 +485,8 @@ let secondaryMenuLinks = $derived([
 									aiId="sidebar-menu-link-add-trigger"
 									aiDescription="Button to add a new trigger. Can be HTTP, WebSocket, Postgres, Kafka, NATS, SQS, GCP Pub/Sub, or MQTT"
 									class={twMerge(
-										'w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded',
-										'data-[highlighted]:bg-[#2A3648] dark:data-[highlighted]:bg-[#30404e]'
+										'w-full text-secondary text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-surface-hover rounded',
+										'data-[highlighted]:bg-surface-hover'
 									)}
 									meltElement={trigger}
 								>
@@ -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>

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore, workspaceColor, clearWorkspaceFromStorage } from '../../stores';
+import { isRuleActive } from '../../workspaceProtectionRules.svelte';
 import { Building, Plus, Settings, GitFork } from 'lucide-svelte';
 import MenuButton from './MenuButton.svelte';
 import { Menu, MenuItem } from '../meltComponents';
+import WorkspaceIcon from '../workspace/WorkspaceIcon.svelte';
 import { goto } from '../../navigation';
 import { base } from '../../base';
 import { page } from '$app/stores';
@@ -12,6 +14,7 @@ import { isCloudHosted } from '../../cloud';
 import { workspaceAIClients } from '../copilot/lib';
 import { twMerge } from 'tailwind-merge';
 import { buildWorkspaceHierarchy } from '../../utils/workspaceHierarchy';
+import { getContrastTextColor } from '../../utils';
 function removePrefix(str, prefix) {
     if (str.startsWith(prefix)) {
         return str.substring(prefix.length);
@@ -44,12 +47,6 @@ async function toggleSwitchWorkspace(id) {
         await goto('/');
     }
 }
-// Helper function to check if a workspace is forked
-function isForkedWorkspace(workspaceId) {
-    if (!$userWorkspaces)
-        return false;
-    return $userWorkspaces.some((w) => w.id === workspaceId && w.parent_workspace_id != null);
-}
 function getForkedWorkspace(workspaceId) {
     if (!$userWorkspaces)
         return undefined;
@@ -61,48 +58,37 @@ function getParentWorkspace(parentId) {
     return $userWorkspaces.find((w) => w.id === parentId);
 }
 // Group workspaces into parent-child hierarchy using Svelte 5 derived and the new utility
-const groupedWorkspaces = $derived(() => {
+const groupedWorkspaces = $derived.by(() => {
     if (!$userWorkspaces)
         return [];
     return buildWorkspaceHierarchy($userWorkspaces);
 });
+const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary';
 </script>
 
-{#if isForkedWorkspace($workspaceStore ?? '') && !isCollapsed}
-	{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
-	{@const parentWorkspace = forkedWorkspace
-		? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
-		: null}
-	<Menu {createMenu} usePointerDownOutside>
-		{#snippet triggr({ trigger })}
-			<div class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs">
-				<Building size={12} class="text-primary" />
-				<span class="text-xs text-primary"> {parentWorkspace?.name ?? ''} </span>
-			</div>
-		{/snippet}
-	</Menu>
-{/if}
 <Menu {createMenu} usePointerDownOutside>
 	{#snippet triggr({ trigger })}
 		{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
 		{@const parentWorkspace = forkedWorkspace
 			? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
 			: null}
+		{@const iconColor = getContrastTextColor($workspaceColor)}
 		{#if forkedWorkspace && parentWorkspace}
-			<div class={isCollapsed ? '' : 'pl-6'}>
-				<MenuButton
-					class="!text-xs"
-					icon={GitFork}
-					label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
-					{isCollapsed}
-					color={$workspaceColor}
-					{trigger}
-				/>
-			</div>
+			<MenuButton
+				class="!text-xs"
+				icon={GitFork}
+				iconProps={iconColor ? { style: `color: ${iconColor}` } : undefined}
+				label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
+				sublabel={parentWorkspace?.name ? `Fork of ${parentWorkspace.name}` : undefined}
+				{isCollapsed}
+				color={$workspaceColor}
+				{trigger}
+			/>
 		{:else}
 			<MenuButton
 				class="!text-xs"
 				icon={Building}
+				iconProps={iconColor ? { style: `color: ${iconColor}` } : undefined}
 				label={$workspaceStore ?? ''}
 				{isCollapsed}
 				color={$workspaceColor}
@@ -114,13 +100,14 @@ const groupedWorkspaces = $derived(() => {
 	{#snippet children({ item })}
 		<div class="divide-y" role="none">
 			<div class="py-1">
-				{#each groupedWorkspaces() as { workspace, depth, isForked, parentName }}
+				{#each groupedWorkspaces as { workspace, depth, isForked, parentName }}
+					{@const isSelected = $workspaceStore === workspace.id}
 					<MenuItem
 						class={twMerge(
-							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-2 px-3',
 							workspace.disabled && 'opacity-50 cursor-not-allowed',
-							$workspaceStore === workspace.id
-								? 'cursor-default bg-surface-selected'
+							isSelected
+								? 'cursor-default bg-surface-accent-selected'
 								: workspace.disabled
 									? ''
 									: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
@@ -133,73 +120,47 @@ const groupedWorkspaces = $derived(() => {
 						{item}
 					>
 						<div class="flex items-center justify-between min-w-0 w-full">
-							<div
-								class={twMerge('flex items-center gap-2 min-w-0', 'pl-4')}
-								style:padding-left={`${4 + depth * 12}px`}
-							>
-								{#if isForked}
-									<GitFork size={12} class="text-primary flex-shrink-0" />
-								{:else}
-									<Building size={12} />
-								{/if}
+							<div class="flex items-center gap-2 min-w-0" style:padding-left={`${depth * 16}px`}>
+								<WorkspaceIcon workspaceColor={workspace.color} {isForked} {parentName} />
 								<div class="min-w-0 flex-1">
 									<div
 										class={twMerge(
-											'truncate text-left text-[1.2em]',
-											isForked ? 'text-secondary' : 'text-primary'
+											'truncate text-left text-xs font-normal',
+											isSelected ? 'text-accent' : 'text-primary'
 										)}
+										title={workspace.name}
 									>
 										{workspace.name}{workspace.disabled ? ' (user disabled)' : ''}
 									</div>
 									<div
 										class={twMerge(
-											'font-mono text-2xs whitespace-nowrap truncate text-left',
-											isForked ? 'text-primary opacity-75' : 'text-primary'
+											'font-mono text-2xs whitespace-nowrap truncate text-left font-normal',
+											isSelected ? 'text-accent/80' : 'text-secondary'
 										)}
+										title={workspace.id}
 									>
 										{workspace.id}
 									</div>
-									{#if isForked && parentName}
-										<div class="text-primary text-2xs truncate text-left pl-2 min-h-[1rem]">
-											Fork of {parentName}
-										</div>
-									{/if}
 								</div>
 							</div>
-							{#if workspace.color}
-								<div
-									class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
-									style="background-color: {workspace.color}"
-								></div>
-							{/if}
 						</div>
 					</MenuItem>
 				{/each}
 			</div>
 			{#if (isCloudHosted() || $superadmin) && !strictWorkspaceSelect}
 				<div class="py-1" role="none">
-					<a
-						href="{base}/user/create_workspace"
-						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
-						role="menuitem"
-						tabindex="-1"
-					>
+					<MenuItem href="{base}/user/create_workspace" class={itemClass} {item}>
 						<Plus size={16} />
 						Workspace
-					</a>
+					</MenuItem>
 				</div>
 			{/if}
-			{#if !strictWorkspaceSelect && !isCloudHosted()}
+			{#if !strictWorkspaceSelect && !isCloudHosted() && !isRuleActive('DisableWorkspaceForking')}
 				<div class="py-1" role="none">
-					<a
-						href="{base}/user/fork_workspace"
-						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
-						role="menuitem"
-						tabindex="-1"
-					>
+					<MenuItem href="{base}/user/fork_workspace" class={itemClass} {item}>
 						<GitFork size={16} />
 						Fork current workspace
-					</a>
+					</MenuItem>
 				</div>
 			{/if}
 			{#if !strictWorkspaceSelect}
@@ -207,10 +168,7 @@ const groupedWorkspaces = $derived(() => {
 					<MenuItem
 						href="{base}/user/workspaces"
 						onClick={() => clearWorkspaceFromStorage()}
-						class={twMerge(
-							'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary',
-							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-						)}
+						class={itemClass}
 						{item}
 					>
 						All workspaces
@@ -219,14 +177,7 @@ const groupedWorkspaces = $derived(() => {
 			{/if}
 			{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
 				<div class="py-1" role="none">
-					<MenuItem
-						href="{base}/workspace_settings"
-						class={twMerge(
-							'text-secondary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2',
-							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-						)}
-						{item}
-					>
+					<MenuItem href="{base}/workspace_settings" class={itemClass} {item}>
 						<Settings size={16} />
 						Workspace settings
 					</MenuItem>

package/package/components/sqlTypeService.js

@@ -4,7 +4,8 @@
  * This module handles the communication between the Monaco editor and the
  * custom TypeScript worker that injects SQL type annotations.
  */
-import { languages, Uri, editor, MarkerSeverity } from 'monaco-editor';
+import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features';
+import { Uri, editor, MarkerSeverity } from 'monaco-editor';
 /**
  * Cached promise for the TypeScript worker client
  * We lazily initialize this when first needed
@@ -14,7 +15,7 @@ async function getWorkerClient() {
     try {
         // Get or create the worker client
         if (!_workerClient) {
-            _workerClient = (await languages.typescript.getTypeScriptWorker());
+            _workerClient = (await getTypeScriptWorker());
         }
         return _workerClient;
     }
@@ -97,7 +98,7 @@ export async function updateSqlQueriesInWorker(fileUri, queries) {
 async function revalidateModel(model) {
     if (!model || model.isDisposed())
         return;
-    const getWorker = await languages.typescript.getTypeScriptWorker();
+    const getWorker = await getTypeScriptWorker();
     const worker = await getWorker(model.uri);
     const diagnostics = (await Promise.all([
         worker.getSyntacticDiagnostics(model.uri.toString()),

package/package/components/table/AutoDataTable.svelte

@@ -134,7 +134,7 @@ let slicedData = $derived(data.slice((currentPage - 1) * perPage, currentPage *
 <div class={className} bind:clientWidth={wrapperWidth}>
 	<div class="flex flex-col gap-2 py-1 my-1" style={`max-width: ${wrapperWidth}px;`}>
 		<div class="flex flex-row justify-between items-center gap-2">
-			<div class="flex flex-row gap-2 items-center whitespace-nowrap w-full">
+			<div class="flex flex-row gap-2 items-center whitespace-nowrap grow min-w-0">
 				<input bind:value={search} placeholder="Search..." class="h-8 !text-xs" />
 				{#if selection.length > 0}
 					<span class="text-xs text-gray-500 dark:text-gray-200">
@@ -142,7 +142,7 @@ let slicedData = $derived(data.slice((currentPage - 1) * perPage, currentPage *
 					</span>
 				{/if}
 			</div>
-			<div class="flex flex-row items-center gap-2">
+			<div class="flex flex-row items-center gap-2 shrink-0">
 				<DownloadCsv
 					getContent={() => {
 						return convertJsonToCsv(