windmill-components 1.309.7 → 1.352.0

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -35,7 +35,6 @@ import ButtonDropdown from '../../common/button/ButtonDropdown.svelte';
 import { MenuItem } from '@rgossiaux/svelte-headlessui';
 import AppEditorTutorial from './AppEditorTutorial.svelte';
 import AppTimeline from './AppTimeline.svelte';
-import { cloneDeep } from 'lodash';
 import AppReportsDrawer from './AppReportsDrawer.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
 import { getPrimaryKeys } from '../components/display/dbtable/utils';
@@ -45,6 +44,7 @@ import { getSelectInput } from '../components/display/dbtable/queries/select';
 import { getInsertInput } from '../components/display/dbtable/queries/insert';
 import { getUpdateInput } from '../components/display/dbtable/queries/update';
 import { getDeleteInput } from '../components/display/dbtable/queries/delete';
+import { collectOneOfFields } from './appUtils';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -114,7 +114,9 @@ async function computeTriggerables() {
         }
         if ((c.type === 'aggridcomponent' ||
             c.type === 'aggridcomponentee' ||
-            c.type === 'dbexplorercomponent') &&
+            c.type === 'dbexplorercomponent' ||
+            c.type === 'aggridinfinitecomponent' ||
+            c.type === 'aggridinfinitecomponentee') &&
             Array.isArray(c.actions)) {
             r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })));
         }
@@ -175,20 +177,40 @@ async function computeTriggerables() {
         .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => {
         return await processRunnable(BG_PREFIX + i, v, v.fields);
     }))));
-    console.log('allTriggers', allTriggers);
-    policy.triggerables = Object.fromEntries(allTriggers.filter(Boolean));
+    delete policy.triggerables;
+    const ntriggerables = Object.fromEntries(allTriggers.filter(Boolean));
+    policy.triggerables_v2 = ntriggerables;
 }
 async function processRunnable(id, runnable, fields) {
     const staticInputs = collectStaticFields(fields);
+    const oneOfInputs = collectOneOfFields(fields, $app);
+    const allowUserResources = Object.entries(fields)
+        .map(([k, v]) => {
+        return v['allowUserResources'] ? k : undefined;
+    })
+        .filter(Boolean);
     if (runnable?.type == 'runnableByName') {
-        console.log('processRunnable:content', runnable.inlineScript?.content);
         let hex = await hash(runnable.inlineScript?.content);
         console.log('hex', hex, id);
-        return [`${id}:rawscript/${hex}`, staticInputs];
+        return [
+            `${id}:rawscript/${hex}`,
+            {
+                static_inputs: staticInputs,
+                one_of_inputs: oneOfInputs,
+                allow_user_resources: allowUserResources
+            }
+        ];
     }
     else if (runnable?.type == 'runnableByPath') {
         let prefix = runnable.runType !== 'hubscript' ? runnable.runType : 'script';
-        return [`${id}:${prefix}/${runnable.path}`, staticInputs];
+        return [
+            `${id}:${prefix}/${runnable.path}`,
+            {
+                static_inputs: staticInputs,
+                one_of_inputs: oneOfInputs,
+                allow_user_resources: allowUserResources
+            }
+        ];
     }
 }
 async function createApp(path) {
@@ -206,7 +228,7 @@ async function createApp(path) {
         });
         savedApp = {
             summary: $summary,
-            value: cloneDeep($app),
+            value: structuredClone($app),
             path: path,
             policy: policy
         };
@@ -239,7 +261,7 @@ async function updateApp(npath) {
     });
     savedApp = {
         summary: $summary,
-        value: cloneDeep($app),
+        value: structuredClone($app),
         path: npath,
         policy
     };
@@ -261,7 +283,7 @@ async function updateApp(npath) {
     }
 }
 let secretUrl = undefined;
-$: secretUrl == undefined && policy.execution_mode == 'anonymous' && getSecretUrl();
+$: appPath != '' && secretUrl == undefined && getSecretUrl();
 async function getSecretUrl() {
     secretUrl = await AppService.getPublicSecretOfApp({
         workspace: $workspaceStore,
@@ -269,16 +291,17 @@ async function getSecretUrl() {
     });
 }
 async function setPublishState() {
+    await computeTriggerables();
     await AppService.updateApp({
         workspace: $workspaceStore,
         path: appPath,
         requestBody: { policy }
     });
     if (policy.execution_mode == 'anonymous') {
-        sendUserToast('App made visible publicly at the secret URL.');
+        sendUserToast('App require no login to be accessed');
     }
     else {
-        sendUserToast('App made unaccessible publicly');
+        sendUserToast('App require login and read-access');
     }
 }
 async function save() {
@@ -315,13 +338,13 @@ async function saveInitialDraft() {
         });
         savedApp = {
             summary: $summary,
-            value: cloneDeep($app),
+            value: structuredClone($app),
             path: newPath,
             policy,
             draft_only: true,
             draft: {
                 summary: $summary,
-                value: cloneDeep($app),
+                value: structuredClone($app),
                 path: newPath,
                 policy
             }
@@ -398,14 +421,14 @@ async function saveDraft(forceSave = false) {
             ...(savedApp?.draft_only
                 ? {
                     summary: $summary,
-                    value: cloneDeep($app),
+                    value: structuredClone($app),
                     path: savedApp.draft_only ? newPath || path : path,
                     policy
                 }
                 : savedApp),
             draft: {
                 summary: $summary,
-                value: cloneDeep($app),
+                value: structuredClone($app),
                 path: newPath || path,
                 policy
             }
@@ -591,7 +614,6 @@ export function openTroubleshootPanel() {
 <svelte:window on:keydown={onKeyDown} />
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
-
 <UnsavedConfirmationModal
 	{diffDrawer}
 	savedValue={savedApp}
@@ -772,22 +794,26 @@ export function openTroubleshootPanel() {
 			</Alert>
 		{:else}
 			<Alert title="App executed on behalf of you">
-				A viewer of the app will execute the runnables of the app on behalf of the publisher (you).
+				A viewer of the app will execute the runnables of the app on behalf of the publisher (you)
 				<Tooltip>
-					This is to ensure that all resources/runnable available at time of creating the app would
-					prevent the good execution of the app. To guarantee tight security, a policy is computed
-					at time of deployment of the app which only allow the scripts/flows referred to in the app
-					to be called on behalf of, and the resources are passed by reference so that their actual
-					value is . Furthermore, static parameters are not overridable. Hence, users will only be
-					able to use the app as intended by the publisher without risk for leaking resources not
-					used in the app.
+					It ensures that all required resources/runnable visible for publisher but not for viewer
+					at time of creating the app would prevent the execution of the app. To guarantee tight
+					security, a policy is computed at time of deployment of the app which only allow the
+					scripts/flows referred to in the app to be called on behalf of. Furthermore, static
+					parameters are not overridable. Hence, users will only be able to use the app as intended
+					by the publisher without risk for leaking resources not used in the app.
 				</Tooltip>
 			</Alert>
+
+			<div class="mt-10" />
+
+			<h2>Secret public URL</h2>
 			<div class="mt-4" />
+
 			<Toggle
 				options={{
-					left: `Require read-access`,
-					right: `Publish publicly for anyone knowing the secret url`
+					left: `Require login and read-access`,
+					right: `No login required`
 				}}
 				checked={policy.execution_mode == 'anonymous'}
 				on:change={(e) => {
@@ -796,11 +822,11 @@ export function openTroubleshootPanel() {
 				}}
 			/>
 
-			{#if policy.execution_mode == 'anonymous' && secretUrl}
-				{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
-				{@const href = $page.url.protocol + '//' + url}
-				<div class="my-6 box">
-					Public url:
+			<div class="my-6 box">
+				Secret public url:
+				{#if secretUrl}
+					{@const url = `${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`}
+					{@const href = $page.url.protocol + '//' + url}
 					<a
 						on:click={(e) => {
 							e.preventDefault()
@@ -814,12 +840,16 @@ export function openTroubleshootPanel() {
 							<Clipboard />
 						</span>
 					</a>
-				</div>
+				{:else}<Loader2 class="animate-spin" />
+				{/if}
+				<div class="text-xs text-secondary"
+					>You may share this url directly or embed it using an iframe (if not requiring login)</div
+				>
+			</div>
 
-				<Alert type="info" title="Only latest saved app is publicly available">
-					Once made public, you will still need to deploy the app to make visible the latest changes
-				</Alert>
-			{/if}
+			<Alert type="info" title="Only latest deployed app is publicly available">
+				You will still need to deploy the app to make visible the latest changes
+			</Alert>
 		{/if}
 	</DrawerContent>
 </Drawer>
@@ -842,7 +872,7 @@ export function openTroubleshootPanel() {
 	</DrawerContent>
 </Drawer>
 
-<Drawer bind:open={$jobsDrawerOpen} size="900px" --zIndex={1003}>
+<Drawer bind:open={$jobsDrawerOpen} size="900px">
 	<DrawerContent
 		noPadding
 		title="Debug Runs"

package/package/components/apps/editor/AppInputs.svelte

@@ -25,7 +25,7 @@ let resourceOnly = true;
 					{/each}
 				</div>
 			</div>
-		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent'}
+		{:else if gridItem?.data?.type === 'aggridcomponent' || gridItem?.data?.type === 'aggridcomponentee' || gridItem?.data?.type === 'dbexplorercomponent' || gridItem?.data?.type === 'aggridinfinitecomponent' || gridItem?.data?.type === 'aggridinfinitecomponentee'}
 			<div>
 				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 				<div class="ml-4 mt-4">

package/package/components/apps/editor/AppPreview.svelte

@@ -9,13 +9,13 @@ import GridViewer from './GridViewer.svelte';
 import Component from './component/Component.svelte';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration } from '../gridUtils';
-import { HiddenComponent } from '../components';
 import { deepEqual } from 'fast-equals';
-import { dfs } from './appUtils';
+import { dfs, maxHeight } from './appUtils';
 import { BG_PREFIX, migrateApp } from '../utils';
 import { workspaceStore, enterpriseLicense } from '../../../stores';
 import DarkModeObserver from '../../DarkModeObserver.svelte';
 import { getTheme } from './componentsPanel/themeUtils';
+import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 export let app;
 export let appPath = '';
 export let breakpoint = writable('lg');
@@ -133,13 +133,15 @@ function addOrRemoveCss(isPremium, cssString) {
         }
     }
 }
+let appHeight = 0;
+$: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 </script>
 
 <DarkModeObserver on:change={onThemeChange} />
 
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
-<div class="relative h-full">
+<div class="relative min-h-screen h-full" bind:clientHeight={appHeight}>
 	<div id="app-editor-top-level-drawer" />
 	<div id="app-editor-select" />
 
@@ -173,7 +175,7 @@ function addOrRemoveCss(isPremium, cssString) {
 			class={twMerge(
 				'p-2 overflow-visible',
 				app.css?.['app']?.['grid']?.class ?? '',
-				'wm-app-grid  subgrid'
+				'wm-app-grid subgrid'
 			)}
 			bind:clientWidth={$parentWidth}
 		>
@@ -182,16 +184,24 @@ function addOrRemoveCss(isPremium, cssString) {
 					allIdsInPath={$allIdsInPath}
 					items={app.grid}
 					let:dataItem
-					rowHeight={36}
+					let:hidden
 					cols={columnConfiguration}
-					gap={[4, 2]}
+					{maxRow}
+					breakpoint={$breakpoint}
 				>
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class={'h-full w-full center-center'}
 						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
 					>
-						<Component render={true} component={dataItem.data} selected={false} locked={true} />
+						<Component
+							render={true}
+							component={dataItem.data}
+							selected={false}
+							locked={true}
+							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
+							{hidden}
+						/>
 					</div>
 				</GridViewer>
 			</div>
@@ -200,6 +210,7 @@ function addOrRemoveCss(isPremium, cssString) {
 
 	{#if isLocked}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			on:click={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"

package/package/components/apps/editor/ComponentHeader.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Bug, Expand, Move, Network, Pen, Plug2 } from 'lucide-svelte';
+import { Anchor, ArrowDownFromLine, Bug, Expand, Move, Network, Pen, Plug2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import Popover from '../../Popover.svelte';
 import { Button, Popup } from '../../common';
@@ -16,6 +16,8 @@ export let connecting = false;
 export let hasInlineEditor = false;
 export let inlineEditorOpened = false;
 export let errorHandledByComponent = false;
+export let fullHeight = false;
+//export let willNotDisplay: boolean = false
 const dispatch = createEventDispatcher();
 const { errorByComponent, openDebugRun, connectingInput } = getContext('AppViewerContext');
 </script>
@@ -107,6 +109,40 @@ const { errorByComponent, openDebugRun, connectingInput } = getContext('AppViewe
 			<DecisionTreeDebug id={component.id} nodes={component.nodes ?? []} />
 		{/if}
 
+		<!-- {#if willNotDisplay}
+			<Popover>
+				<svelte:fragment slot="text">
+					This component won't render, because an other component above it is set to fill the
+					height.
+				</svelte:fragment>
+				<div
+					title="Fill height"
+					class={classNames(
+						'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+						'bg-red-100 text-red-600 border-red-500 hover:bg-red-200 hover:text-red-800'
+					)}
+				>
+					<EyeOff aria-label="Expand position" size={14} />
+				</div>
+			</Popover>
+		{/if} -->
+
+		<button
+			title="Fill height"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('fillHeight')}
+			on:pointerdown|stopPropagation
+		>
+			<ArrowDownFromLine
+				aria-label="Expand position"
+				size={14}
+				class={fullHeight ? 'text-orange-500' : ''}
+			/>
+		</button>
+
 		<button
 			title="Expand"
 			class={classNames(

package/package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -10,12 +10,14 @@ declare const __propDef: {
         hasInlineEditor?: boolean | undefined;
         inlineEditorOpened?: boolean | undefined;
         errorHandledByComponent?: boolean | undefined;
+        fullHeight?: boolean | undefined;
     };
     events: {
         mousedown: MouseEvent;
         pointerdown: PointerEvent;
         mouseover: CustomEvent<any>;
         triggerInlineEditor: CustomEvent<any>;
+        fillHeight: CustomEvent<any>;
         expand: CustomEvent<any>;
         lock: CustomEvent<any>;
     } & {

package/package/components/apps/editor/GridEditor.svelte

@@ -67,10 +67,10 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 			</div>
 			<div>
 				{policy.on_behalf_of ? `Author ${policy.on_behalf_of_email}` : ''}
-				<Tooltip
-					>The scripts will be run on behalf of the author and a tight policy ensure security about
-					the possible inputs of the runnables.</Tooltip
-				>
+				<Tooltip>
+					The scripts will be run on behalf of the author and a tight policy ensure security about
+					the possible inputs of the runnables.
+				</Tooltip>
 			</div>
 		</div>
 	</div>
@@ -106,9 +106,8 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 					$app.grid = e.detail
 				}}
 				let:dataItem
-				rowHeight={36}
+				let:hidden
 				cols={columnConfiguration}
-				gap={[4, 2]}
 			>
 				<ComponentWrapper
 					id={dataItem.id}
@@ -120,10 +119,12 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 				>
 					<GridEditorMenu id={dataItem.id}>
 						<Component
+							{hidden}
 							render={true}
 							component={dataItem.data}
 							selected={Boolean($selectedComponent?.includes(dataItem.id))}
 							locked={isFixed(dataItem)}
+							fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 							on:lock={() => {
 								const gridItem = findGridItem($app, dataItem.id)
 								if (gridItem) {
@@ -137,6 +138,14 @@ $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
 								expandGriditem($app.grid, dataItem.id, $breakpoint)
 								$app = $app
 							}}
+							on:fillHeight={() => {
+								const gridItem = findGridItem($app, dataItem.id)
+								const b = $breakpoint === 'sm' ? 3 : 12
+								if (gridItem?.[b]) {
+									gridItem[b].fullHeight = !gridItem[b].fullHeight
+								}
+								$app = $app
+							}}
 						/>
 					</GridEditorMenu>
 				</ComponentWrapper>

package/package/components/apps/editor/GridEditorMenu.svelte

@@ -1,64 +1,135 @@
+<script context="module">import { writable } from 'svelte/store';
+// Using a Svelte store for global state management
+const openedContextMenus = writable(new Set());
+</script>
+
 <script>import { getModifierKey } from '../../../utils';
 import { Copy, Paintbrush2, Scissors, Trash } from 'lucide-svelte';
-import ContextMenu from '../../ContextMenu.svelte';
 import ComponentCallbacks from './component/ComponentCallbacks.svelte';
 import { getContext } from 'svelte';
 import DeleteComponent from './settingsPanel/DeleteComponent.svelte';
-import { findComponentSettings } from './appUtils';
 import { secondaryMenuLeft } from './settingsPanel/secondaryMenu';
-import StylePanel from './settingsPanel/StylePanel.svelte';
+import { clickOutside } from '../../../utils';
+import Portal from 'svelte-portal';
+import { twMerge } from 'tailwind-merge';
+let contextMenuVisible = false;
+let menuX = 0;
+let menuY = 0;
+function handleRightClick(event) {
+    event.preventDefault();
+    contextMenuVisible = true;
+    menuX = event.clientX;
+    menuY = event.clientY;
+    openedContextMenus.update((menus) => {
+        menus.forEach((menu) => menu.id !== id && menu.close());
+        menus.clear();
+        menus.add({ id, close: () => (contextMenuVisible = false) });
+        return menus;
+    });
+}
+function closeContextMenu() {
+    contextMenuVisible = false;
+    openedContextMenus.update((menus) => {
+        menus.clear();
+        return menus;
+    });
+}
+function handleClickOutside(event) {
+    if (contextMenuVisible) {
+        closeContextMenu();
+    }
+}
 export let id;
 let componentCallbacks = undefined;
-const { selectedComponent, app } = getContext('AppViewerContext');
-const { movingcomponents } = getContext('AppEditorContext');
+const { selectedComponent } = getContext('AppViewerContext');
+const { movingcomponents, stylePanel } = getContext('AppEditorContext');
 let deleteComponent = undefined;
-$: componentSettings = $selectedComponent?.map((sc) => findComponentSettings($app, sc));
+const menuItems = [
+    {
+        label: 'Cut',
+        onClick: () => {
+            componentCallbacks?.handleCut(new KeyboardEvent('keydown'));
+        },
+        icon: Scissors,
+        shortcut: `${getModifierKey()}X`,
+        disabled: $movingcomponents?.includes($selectedComponent?.[0] ?? '')
+    },
+    {
+        label: 'Copy',
+        onClick: () => {
+            componentCallbacks?.handleCopy(new KeyboardEvent('keydown'));
+        },
+        icon: Copy,
+        shortcut: `${getModifierKey()}C`
+    },
+    {
+        label: 'Show style panel',
+        onClick: () => {
+            secondaryMenuLeft?.toggle(stylePanel(), { type: 'style' });
+        },
+        icon: Paintbrush2,
+        disabled: $secondaryMenuLeft.isOpen
+    },
+    {
+        label: 'Delete',
+        onClick: () => {
+            deleteComponent?.removeGridElement();
+        },
+        icon: Trash,
+        shortcut: `Del`,
+        color: 'red'
+    }
+];
 </script>
 
 <ComponentCallbacks bind:this={componentCallbacks} />
-<ContextMenu
-	contextMenu={{
-		menuItems: [
-			{
-				label: 'Cut',
-				onClick: () => {
-					componentCallbacks?.handleCut(new KeyboardEvent('keydown'))
-				},
-				icon: Scissors,
-				shortcut: `${getModifierKey()}X`,
-				disabled: $movingcomponents?.includes($selectedComponent?.[0] ?? '')
-			},
-			{
-				label: 'Copy',
-				onClick: () => {
-					componentCallbacks?.handleCopy(new KeyboardEvent('keydown'))
-				},
-				icon: Copy,
-				shortcut: `${getModifierKey()}C`
-			},
-			{
-				label: 'Show style panel',
-				onClick: () => {
-					secondaryMenuLeft?.toggle(StylePanel, {})
-				},
-				icon: Paintbrush2,
-				disabled: $secondaryMenuLeft.isOpen
-			},
+<DeleteComponent bind:this={deleteComponent} />
 
-			{
-				label: 'Delete',
-				onClick: () => {
-					deleteComponent?.removeGridElement()
-				},
-				icon: Trash,
-				shortcut: `Del`,
-				color: 'red'
-			}
-		]
-	}}
-	{id}
->
+<svelte:window on:click={handleClickOutside} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div on:click={closeContextMenu} on:contextmenu={handleRightClick} class="h-full w-full">
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<slot />
-</ContextMenu>
 
-<DeleteComponent {componentSettings} bind:this={deleteComponent} />
+	{#if contextMenuVisible}
+		<Portal>
+			<div style="position: fixed; top: {menuY}px; left: {menuX}px; z-index:6000;">
+				<div class="rounded-md bg-surface border shadow-md divide-y w-64">
+					<div class="p-1" use:clickOutside={false}>
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						{#each menuItems as item}
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<button
+								class={twMerge(
+									'flex items-center p-2 hover:bg-surface-hover cursor-pointer transition-all rounded-md  w-full',
+									item.color === 'red' && 'text-red-500',
+									item.color === 'green' && 'text-green-500',
+									item.color === 'blue' && 'text-blue-500',
+									item.disabled && 'opacity-50 cursor-not-allowed'
+								)}
+								on:click={() => {
+									item.onClick()
+									closeContextMenu()
+								}}
+								disabled={item.disabled}
+							>
+								<!-- svelte-ignore missing-declaration -->
+								<svelte:component this={item.icon} class="w-4 h-4" />
+
+								<span class="ml-2 text-xs">{item.label}</span>
+								{#if item.shortcut}
+									<span class="ml-auto text-xs text-gray-400">
+										{item.shortcut}
+									</span>
+								{/if}
+							</button>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</Portal>
+	{/if}
+</div>