windmill-components 1.695.0 → 1.698.0

package/package/components/VariableEditor.svelte

@@ -1,126 +1,176 @@
-<script lang="ts">import { VariableService } from '../gen';
-import Path from './Path.svelte';
-import LabelsInput from './LabelsInput.svelte';
-import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { VariableService, WorkspaceService } from '../gen';
+import { createEventDispatcher, untrack } from 'svelte';
 import { userStore, workspaceStore } from '../stores';
-import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Alert from './common/alert/Alert.svelte';
-import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
-import { canWrite, isOwner } from '../utils';
-import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
-import { Loader2, Save } from 'lucide-svelte';
-import autosize from '../autosize';
+import { canWrite } from '../utils';
+import { Save } from 'lucide-svelte';
+import VariableForm from './VariableForm.svelte';
+import WsSpecificVersions from './WsSpecificVersions.svelte';
+import { resource } from 'runed';
+import { deepEqual } from 'fast-equals';
+import { getUserExt } from '../user';
 const dispatch = createEventDispatcher();
-let path = $state('');
-let variable = $state({
-    value: '',
-    is_secret: true,
-    description: ''
-});
-let valid = $state(true);
-let labels = $state(undefined);
-let drawer = $state();
-let edit = $state(false);
-let initialPath = $state('');
+let editPath = $state(undefined);
+let states = $state({});
+let initialStates = $state({});
+let existedInitially = $state({});
+let extraPerms = $state({});
+let perWsUser = $state({});
+let selected = $state(undefined);
 let pathError = $state('');
-let can_write = $state(true);
+let drawer = $state();
+let form = $state();
+const deployTo = resource(() => selected, async (ws) => ws ? (await WorkspaceService.getDeployTo({ workspace: ws })).deploy_to : undefined);
+const MAX_VARIABLE_LENGTH = 10000;
+const edit = $derived(editPath !== undefined);
+const initialPath = $derived(editPath ?? '');
+const current = $derived(selected ? states[selected] : undefined);
+const can_write = $derived.by(() => {
+    if (!selected || !edit)
+        return true;
+    const perms = extraPerms[selected];
+    if (!perms)
+        return true;
+    return canWrite(editPath ?? '', perms, perWsUser[selected] ?? $userStore);
+});
+const dirtyWorkspaces = $derived(Object.keys(states).filter((ws) => !deepEqual(states[ws], initialStates[ws])));
+const anyDirty = $derived(dirtyWorkspaces.length > 0);
+const otherDirty = $derived(dirtyWorkspaces.length == 1
+    ? dirtyWorkspaces.filter((ws) => ws !== $workspaceStore)
+    : dirtyWorkspaces);
+const dirtyValid = $derived(dirtyWorkspaces.every((ws) => states[ws].variable.value.length <= MAX_VARIABLE_LENGTH));
+const dirtyCanWrite = $derived(dirtyWorkspaces.every((ws) => {
+    const perms = extraPerms[ws];
+    return !perms || canWrite(editPath ?? '', perms, perWsUser[ws] ?? $userStore);
+}));
+// Lazy-fetch the variable for the selected workspace when not already cached
+$effect(() => {
+    const ws = selected;
+    const p = editPath;
+    if (!ws || !p)
+        return;
+    if (ws in states)
+        return;
+    untrack(() => {
+        Promise.all([
+            VariableService.getVariable({ workspace: ws, path: p, decryptSecret: false }),
+            getUserExt(ws)
+        ]).then(([v, user]) => {
+            const s = {
+                path: v.path,
+                variable: {
+                    value: v.value ?? '',
+                    is_secret: v.is_secret,
+                    description: v.description ?? ''
+                },
+                labels: v.labels ?? undefined,
+                wsSpecific: v.ws_specific ?? false
+            };
+            states[ws] = s;
+            initialStates[ws] = structuredClone(s);
+            existedInitially[ws] = true;
+            extraPerms[ws] = v.extra_perms ?? {};
+            perWsUser[ws] = user;
+        });
+    });
+});
+function reset() {
+    states = {};
+    initialStates = {};
+    existedInitially = {};
+    extraPerms = {};
+    perWsUser = {};
+    pathError = '';
+}
 export function initNew() {
-    variable = {
-        value: '',
-        is_secret: true,
-        description: ''
+    reset();
+    editPath = undefined;
+    const ws = $workspaceStore;
+    const s = {
+        path: '',
+        variable: { value: '', is_secret: true, description: '' },
+        labels: undefined,
+        wsSpecific: false
     };
-    edit = false;
-    initialPath = '';
-    path = '';
-    labels = undefined;
-    can_write = true;
+    states[ws] = s;
+    initialStates[ws] = structuredClone(s);
+    existedInitially[ws] = false;
+    selected = ws;
     drawer?.openDrawer();
 }
-export async function editVariable(edit_path) {
-    edit = true;
-    const getV = await VariableService.getVariable({
-        workspace: $workspaceStore ?? '',
-        path: edit_path,
-        decryptSecret: false
-    });
-    can_write =
-        getV.workspace_id == $workspaceStore &&
-            canWrite(edit_path, getV.extra_perms ?? {}, $userStore);
-    variable = {
-        value: getV.value ?? '',
-        is_secret: getV.is_secret,
-        description: getV.description ?? ''
-    };
-    labels = getV.labels ?? undefined;
-    initialPath = edit_path;
-    path = edit_path;
+export function editVariable(edit_path) {
+    reset();
+    editPath = edit_path;
+    selected = $workspaceStore;
     drawer?.openDrawer();
 }
-export async function loadVariable(path) {
+async function loadSecret() {
+    if (!editPath || !selected)
+        return;
     const getV = await VariableService.getVariable({
-        workspace: $workspaceStore ?? '',
-        path,
+        workspace: selected,
+        path: editPath,
         decryptSecret: true
     });
-    variable.value = getV.value ?? '';
-    editor?.setCode(variable.value);
+    const s = states[selected];
+    const ini = initialStates[selected];
+    if (s)
+        s.variable.value = getV.value ?? '';
+    if (ini)
+        ini.variable.value = getV.value ?? '';
+    form?.setCode(getV.value ?? '');
 }
-const MAX_VARIABLE_LENGTH = 10000;
-$effect(() => {
-    valid = variable.value.length <= MAX_VARIABLE_LENGTH;
-});
-async function createVariable() {
-    await VariableService.createVariable({
-        workspace: $workspaceStore,
-        requestBody: {
-            path,
-            value: variable.value,
-            is_secret: variable.is_secret,
-            description: variable.description,
-            labels
-        }
-    });
-    sendUserToast(`Created variable ${path}`);
-    dispatch('create');
-    drawer?.closeDrawer();
-}
-async function updateVariable() {
+async function save() {
+    const dirty = dirtyWorkspaces;
     try {
-        const getV = await VariableService.getVariable({
-            workspace: $workspaceStore ?? '',
-            path: initialPath,
-            decryptSecret: false
-        });
-        await VariableService.updateVariable({
-            workspace: $workspaceStore,
-            path: initialPath,
-            requestBody: {
-                path: getV.path != path ? path : undefined,
-                value: variable.value == '' ? undefined : variable.value,
-                is_secret: getV.is_secret != variable.is_secret ? variable.is_secret : undefined,
-                description: getV.description != variable.description ? variable.description : undefined,
-                labels
+        for (const ws of dirty) {
+            const s = states[ws];
+            const ini = initialStates[ws];
+            if (existedInitially[ws]) {
+                await VariableService.updateVariable({
+                    workspace: ws,
+                    path: ini.path,
+                    requestBody: {
+                        path: ini.path != s.path ? s.path : undefined,
+                        value: s.variable.value == '' ? undefined : s.variable.value,
+                        is_secret: ini.variable.is_secret != s.variable.is_secret ? s.variable.is_secret : undefined,
+                        description: ini.variable.description != s.variable.description
+                            ? s.variable.description
+                            : undefined,
+                        labels: s.labels,
+                        ws_specific: s.wsSpecific
+                    }
+                });
             }
-        });
-        sendUserToast(`Updated variable ${initialPath}`);
+            else {
+                await VariableService.createVariable({
+                    workspace: ws,
+                    requestBody: {
+                        path: s.path,
+                        value: s.variable.value,
+                        is_secret: s.variable.is_secret,
+                        description: s.variable.description,
+                        labels: s.labels,
+                        ws_specific: s.wsSpecific
+                    }
+                });
+            }
+        }
+        sendUserToast(edit ? `Updated variable in ${dirty.length} workspace(s)` : `Created variable`);
         dispatch('create');
         drawer?.closeDrawer();
     }
     catch (err) {
-        sendUserToast(`Could not update variable: ${err.body}`, true);
+        sendUserToast(`Could not save variable: ${err.body}`, true);
     }
 }
-let editorKind = $state('plain');
-let editor = $state(undefined);
 </script>
 
-<Drawer bind:this={drawer} size="900px">
+<Drawer bind:this={drawer} size="50rem">
 	<DrawerContent
 		title={edit ? `Update variable at ${initialPath}` : 'Add a variable'}
 		on:close={drawer?.closeDrawer}
@@ -132,114 +182,42 @@ let editor = $state(undefined);
 				</Alert>
 			{/if}
 
-			<div class="flex flex-col gap-1">
-				<label for="path" class="text-xs font-semibold text-emphasis">Path</label>
-				<Path
-					disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
-					bind:error={pathError}
-					bind:path
-					{initialPath}
-					namePlaceholder="variable"
-					kind="variable"
-				/>
-				<LabelsInput bind:labels />
-			</div>
-			<label class="flex flex-col gap-1">
-				<span class="text-xs font-semibold text-emphasis">Secret</span>
-				<Toggle
-					on:change={() => edit && loadVariable(initialPath)}
-					bind:checked={variable.is_secret}
-					disabled={edit && $userStore?.operator}
-				/>
-				{#if variable.is_secret}
-					<Alert type="warning" title="Audit log for each access">
-						Every secret is encrypted at rest and in transit with a key specific to this workspace.
-						In addition, any read of a secret variable generates an audit log whose operation name
-						is: variables.decrypt_secret
-					</Alert>
-				{/if}
-			</label>
-
-			<div class="flex flex-col gap-1">
-				<label for="variable-value" class="flex flex-row justify-left items-center">
-					<span class="text-xs font-semibold text-emphasis">Variable value&nbsp;</span>
+			{#if otherDirty.length > 0}
+				<Alert type="warning" title="Editing multiple workspaces">
+					You are going to edit the value in: {otherDirty.join(', ')}
+				</Alert>
+			{/if}
 
-					<span class="text-xs text-secondary font-normal">
-						({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)
-					</span>
-					{#if edit && variable.is_secret}
-						<div class="ml-3"></div>
-						{#if $userStore?.operator}
-							<div class="p-2 border">Operators cannot load secret value</div>
-						{:else}
-							<Button size="xs" variant="default" on:click={() => loadVariable(initialPath)}>
-								Load secret value<Tooltip>Will generate an audit log</Tooltip>
-							</Button>
-						{/if}
-					{/if}
-				</label>
-				<div>
-					<div class="flex flex-col gap-2">
-						<ToggleButtonGroup bind:selected={editorKind}>
-							{#snippet children({ item })}
-								<ToggleButton value="plain" label="Plain" {item} />
-								<ToggleButton value="json" label="Json" {item} />
-								<ToggleButton value="yaml" label="YAML" {item} />
-							{/snippet}
-						</ToggleButtonGroup>
-						{#if editorKind == 'plain'}
-							<textarea
-								disabled={!can_write}
-								rows="4"
-								use:autosize
-								bind:value={variable.value}
-								placeholder="Update variable value"
-								id="variable-value"
-							></textarea>
-						{:else if editorKind == 'json'}
-							<div class="border rounded mb-4 w-full">
-								{#await import('./SimpleEditor.svelte')}
-									<Loader2 class="animate-spin" />
-								{:then Module}
-									<Module.default
-										bind:this={editor}
-										autoHeight
-										lang="json"
-										bind:code={variable.value}
-										fixedOverflowWidgets={false}
-										class="bg-surface-tertiary"
-									/>
-								{/await}
-							</div>
-						{:else if editorKind == 'yaml'}
-							<div class="border rounded mb-4 w-full">
-								{#await import('./SimpleEditor.svelte')}
-									<Loader2 class="animate-spin" />
-								{:then Module}
-									<Module.default
-										bind:this={editor}
-										autoHeight
-										lang="yaml"
-										bind:code={variable.value}
-										fixedOverflowWidgets={false}
-										class="bg-surface-tertiary"
-									/>
-								{/await}
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div>
-			<label class="flex flex-col gap-1">
-				<span class="text-xs font-semibold text-emphasis">Description</span>
-				<textarea rows="4" use:autosize bind:value={variable.description} placeholder="Used for X"
-				></textarea>
-			</label>
+			{#if current}
+				{#key current}
+					<VariableForm
+						bind:this={form}
+						bind:path={current.path}
+						bind:pathError
+						bind:variable={current.variable}
+						bind:labels={current.labels}
+						bind:wsSpecific={current.wsSpecific}
+						{initialPath}
+						deployTo={deployTo.current}
+						{can_write}
+						{edit}
+						onLoadSecret={loadSecret}
+					/>
+				{/key}
+			{/if}
 		</div>
 		{#snippet actions()}
+			{#if edit && $workspaceStore}
+				<WsSpecificVersions
+					kind="variable"
+					workspaceId={$workspaceStore}
+					{initialPath}
+					bind:selected
+				/>
+			{/if}
 			<Button
-				on:click={() => (edit ? updateVariable() : createVariable())}
-				disabled={!can_write || !valid || pathError != ''}
+				on:click={save}
+				disabled={!anyDirty || !dirtyValid || !dirtyCanWrite || pathError != ''}
 				startIcon={{ icon: Save }}
 				variant="accent"
 				size="sm"

package/package/components/VariableEditor.svelte.d.ts

@@ -17,8 +17,7 @@ declare const VariableEditor: $$__sveltets_2_IsomorphicComponent<Record<string,
     [evt: string]: CustomEvent<any>;
 }, {}, {
     initNew: () => void;
-    editVariable: (edit_path: string) => Promise<void>;
-    loadVariable: (path: string) => Promise<void>;
+    editVariable: (edit_path: string) => void;
 }, "">;
 type VariableEditor = InstanceType<typeof VariableEditor>;
 export default VariableEditor;

package/package/components/VariableForm.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">import Path from './Path.svelte';
+import LabelsInput from './LabelsInput.svelte';
+import Toggle from './Toggle.svelte';
+import Alert from './common/alert/Alert.svelte';
+import { Button } from './common';
+import Tooltip from './Tooltip.svelte';
+import Label from './Label.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import { Loader2 } from 'lucide-svelte';
+import autosize from '../autosize';
+import { userStore, workspaceStore } from '../stores';
+import { isOwner } from '../utils';
+let { path = $bindable(), initialPath, pathError = $bindable(), variable = $bindable(), labels = $bindable(), wsSpecific = $bindable(), deployTo, can_write, edit, onLoadSecret } = $props();
+const MAX_VARIABLE_LENGTH = 10000;
+let editorKind = $state('plain');
+let editor = $state(undefined);
+export function setCode(value) {
+    editor?.setCode(value);
+}
+</script>
+
+<div class="flex flex-col gap-1">
+	<label for="path" class="text-xs font-semibold text-emphasis">Path</label>
+	<Path
+		disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+		bind:error={pathError}
+		bind:path
+		{initialPath}
+		namePlaceholder="variable"
+		kind="variable"
+	/>
+	<LabelsInput bind:labels />
+</div>
+<label class="flex flex-col gap-1">
+	<span class="text-xs font-semibold text-emphasis">Secret</span>
+	<Toggle
+		on:change={() => edit && onLoadSecret?.()}
+		bind:checked={variable.is_secret}
+		disabled={edit && $userStore?.operator}
+	/>
+	{#if variable.is_secret}
+		<Alert type="warning" title="Audit log for each access">
+			Every secret is encrypted at rest and in transit with a key specific to this workspace. In
+			addition, any read of a secret variable generates an audit log whose operation name is:
+			variables.decrypt_secret
+		</Alert>
+	{/if}
+</label>
+
+{#if deployTo}
+	<Label
+		label="Workspace specific"
+		tooltip="Prevents this variable from being deployed to prod/staging"
+	>
+		<Toggle bind:checked={wsSpecific} />
+	</Label>
+{/if}
+
+<div class="flex flex-col gap-1">
+	<label for="variable-value" class="flex flex-row justify-left items-center">
+		<span class="text-xs font-semibold text-emphasis">Variable value&nbsp;</span>
+		<span class="text-xs text-secondary font-normal">
+			({variable.value.length}/{MAX_VARIABLE_LENGTH} characters)
+		</span>
+		{#if edit && variable.is_secret}
+			<div class="ml-3"></div>
+			{#if $userStore?.operator}
+				<div class="p-2 border">Operators cannot load secret value</div>
+			{:else}
+				<Button size="xs" variant="default" on:click={() => onLoadSecret?.()}>
+					Load secret value<Tooltip>Will generate an audit log</Tooltip>
+				</Button>
+			{/if}
+		{/if}
+	</label>
+	<div>
+		<div class="flex flex-col gap-2">
+			<ToggleButtonGroup bind:selected={editorKind}>
+				{#snippet children({ item })}
+					<ToggleButton value="plain" label="Plain" {item} />
+					<ToggleButton value="json" label="Json" {item} />
+					<ToggleButton value="yaml" label="YAML" {item} />
+				{/snippet}
+			</ToggleButtonGroup>
+			{#if editorKind == 'plain'}
+				<textarea
+					disabled={!can_write}
+					rows="4"
+					use:autosize
+					bind:value={variable.value}
+					placeholder="Update variable value"
+					id="variable-value"
+				></textarea>
+			{:else if editorKind == 'json'}
+				<div class="border rounded mb-4 w-full">
+					{#await import('./SimpleEditor.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default
+							bind:this={editor}
+							autoHeight
+							lang="json"
+							bind:code={variable.value}
+							fixedOverflowWidgets={false}
+							class="bg-surface-tertiary"
+						/>
+					{/await}
+				</div>
+			{:else if editorKind == 'yaml'}
+				<div class="border rounded mb-4 w-full">
+					{#await import('./SimpleEditor.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default
+							bind:this={editor}
+							autoHeight
+							lang="yaml"
+							bind:code={variable.value}
+							fixedOverflowWidgets={false}
+							class="bg-surface-tertiary"
+						/>
+					{/await}
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+<label class="flex flex-col gap-1">
+	<span class="text-xs font-semibold text-emphasis">Description</span>
+	<textarea rows="4" use:autosize bind:value={variable.description} placeholder="Used for X"
+	></textarea>
+</label>

package/package/components/VariableForm.svelte.d.ts

@@ -0,0 +1,22 @@
+interface Variable {
+    value: string;
+    is_secret: boolean;
+    description: string;
+}
+interface Props {
+    path: string;
+    initialPath: string;
+    pathError: string;
+    variable: Variable;
+    labels: string[] | undefined;
+    wsSpecific: boolean;
+    deployTo: string | undefined;
+    can_write: boolean;
+    edit: boolean;
+    onLoadSecret?: () => void;
+}
+declare const VariableForm: import("svelte").Component<Props, {
+    setCode: (value: string) => void;
+}, "path" | "variable" | "labels" | "pathError" | "wsSpecific">;
+type VariableForm = ReturnType<typeof VariableForm>;
+export default VariableForm;

package/package/components/WsSpecificVersions.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { WorkspaceService } from '../gen';
+import { resource } from 'runed';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonMore from './common/toggleButton-v2/ToggleButtonMore.svelte';
+let { kind, workspaceId, initialPath, selected = $bindable() } = $props();
+let versionsResource = resource([() => ({ path: initialPath, ws: workspaceId, kind })], async ([{ path, ws, kind }]) => {
+    return await WorkspaceService.listWsSpecificVersions({ workspace: ws, kind, path });
+});
+const MAX_REGULAR = 3;
+let versions = $derived([
+    workspaceId,
+    ...(versionsResource.current?.filter((v) => v != workspaceId) ?? [])
+]);
+let nonForks = $derived(versions.filter((v) => !v.startsWith('wm-fork-')));
+let forks = $derived(versions.filter((v) => v.startsWith('wm-fork-')));
+// Cap the inline buttons at MAX_REGULAR. Overflow (non-fork) workspaces
+// land in the dropdown above the forks so the visual ordering stays
+// "regular workspaces first, forks last".
+let regular = $derived(nonForks.slice(0, MAX_REGULAR));
+let more = $derived([...nonForks.slice(MAX_REGULAR), ...forks]);
+</script>
+
+{#if versions.length > 1}
+	<ToggleButtonGroup bind:selected>
+		{#snippet children({ item })}
+			{#each regular as v (v)}
+				<ToggleButton value={v} label={v} {item} />
+			{/each}
+			{#if more.length > 0}
+				<ToggleButtonMore
+					togglableItems={more.map((v) => ({ label: v, value: v }))}
+					{item}
+					bind:selected
+				/>
+			{/if}
+		{/snippet}
+	</ToggleButtonGroup>
+{/if}

package/package/components/WsSpecificVersions.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    kind: 'resource' | 'variable';
+    workspaceId: string;
+    initialPath: string;
+    selected: string | undefined;
+}
+declare const WsSpecificVersions: import("svelte").Component<Props, {}, "selected">;
+type WsSpecificVersions = ReturnType<typeof WsSpecificVersions>;
+export default WsSpecificVersions;

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -84,7 +84,6 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
             path?: string;
             lock?: string;
             cache_ttl?: number;
-            tag?: string;
         };
         id?: number;
         force_viewer_static_fields?: {

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

@@ -14,6 +14,6 @@ type $$ComponentProps = {
     hideSecretUrl?: boolean;
     preserveOnBehalfOf?: boolean;
 };
-declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "preserveOnBehalfOf" | "pathError" | "customPath" | "deploymentMsg" | "customPathError" | "newEditedPath">;
+declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "pathError" | "preserveOnBehalfOf" | "customPath" | "deploymentMsg" | "customPathError" | "newEditedPath">;
 type AppEditorHeaderDeploy = ReturnType<typeof AppEditorHeaderDeploy>;
 export default AppEditorHeaderDeploy;

package/package/components/common/table/AppRow.svelte

@@ -18,7 +18,7 @@ import { getDeployUiSettings } from '../../home/deploy_ui';
 import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
 import { buildForkEditUrl } from '../../../utils/editInFork';
 import { isCloudHosted } from '../../../cloud';
-let { app, marked, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true) } = $props();
+let { app, marked, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true), keyboardSelected = false } = $props();
 const dispatch = createEventDispatcher();
 let appExport = $state(undefined);
 let appDeploymentHistory = $state(undefined);
@@ -43,6 +43,7 @@ async function loadAppJson() {
 	workspaceId={app.workspace_id ?? $workspaceStore ?? ''}
 	canFavorite={!app.draft_only}
 	{depth}
+	{keyboardSelected}
 >
 	{#snippet badges()}
 		{#if app.execution_mode == 'anonymous'}