windmill-components 1.56.5 → 1.57.2

package/assets/app.css

@@ -27,6 +27,10 @@
 		whitespace: normal !important;
 	}
 
+	pre code.hljs {
+		overflow: visible !important;
+	}
+
 	svelte-virtual-list-row {
 		overflow: visible !important;
 	}
@@ -40,7 +44,7 @@
 		box-shadow: none !important;
 	}
 
-	.templatable-editor span.mtk20 {
+	.Template-editor span.mtk20 {
 		color: black !important;
 	}
 }

package/components/ArgInput.svelte

@@ -157,7 +157,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								bind:value={description}
 								placeholder="Field description"
 							/>
-							{#if type == 'string' && !contentEncoding && format != 'date-time'}
+							{#if type == 'string' && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
@@ -300,18 +300,18 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				</select>
 			{:else if inputCat == 'date'}
 				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
-			{:else if inputCat == 'sql'}
-				<div class="border rounded mb-4 w-full border-gray-700">
+			{:else if inputCat == 'sql' || inputCat == 'yaml'}
+				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={() => dispatch('focus')}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}
-						lang="sql"
+						lang={inputCat}
 						bind:code={value}
-						class="few-lines-editor"
 						on:change={async () => {
 							dispatch('input', { rawValue: value, isRaw: false })
 						}}
+						autoHeight
 					/>
 				</div>
 			{:else if inputCat == 'base64'}
@@ -360,7 +360,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 										variant="border"
 										color="blue"
 										size="sm"
-										btnClasses="min-w-min items-center leading-4 py-0"
+										btnClasses="min-w-min min-h-[34px] items-center leading-4 py-0"
 										on:click={() => {
 											pickForField = label
 											itemPicker?.openDrawer?.()

package/components/DisplayResult.svelte

@@ -73,7 +73,7 @@ let payload = '';
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 			>
 				{#each Object.keys(result) as col}
-					<div class="flex flex-col max-h-40 min-w-full overflow-auto">
+					<div class="flex flex-col max-h-40 min-w-full">
 						<div
 							class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md "
 						>

package/components/Dropdown.svelte

@@ -10,7 +10,7 @@ const dispatch = createEventDispatcher();
 </script>
 
 <Menu {placement} let:close>
-	<Button nonCaptureEvent color="light" size="xs" {btnClasses} slot="trigger">
+	<Button nonCaptureEvent color="light" size="xs" {btnClasses} {...$$restProps} slot="trigger">
 		{#if !$$slots.default}
 			<MoreHorizontal size={20} />
 		{:else}

package/components/Dropdown.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { DropdownItem } from '../utils';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         dropdownItems: DropdownItem[];
         name?: string | undefined;
         placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;

package/components/Editor.svelte

@@ -28,6 +28,7 @@ languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSuggestionDiagnostics: true,
     noSyntaxValidation: true
 });
+languages.typescript.typescriptDefaults.setExtraLibs([]);
 meditor.defineTheme('myTheme', {
     base: 'vs',
     inherit: true,
@@ -105,7 +106,7 @@ export function setCode(ncode) {
         editor.setValue(ncode);
     }
 }
-function format() {
+export function format() {
     if (editor) {
         code = getCode();
         editor.getAction('editor.action.formatDocument').run();
@@ -156,7 +157,6 @@ export async function reloadWebsocket() {
                 markdown: {
                     isTrusted: true
                 },
-                // workspaceFolder: { uri: Uri.parse(`/tmp/${name}`), name: 'tmp', index: 0 },
                 initializationOptions,
                 middleware: {
                     workspace: {
@@ -354,7 +354,9 @@ async function closeWebsockets() {
 async function loadMonaco() {
     const model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    editor = meditor.create(divEl, {
+        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
+    });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;

package/components/Editor.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         insertAtBeginning?: ((code: string) => void) | undefined;
         insertAtLine?: ((code: string, line: number) => void) | undefined;
         setCode?: ((ncode: string) => void) | undefined;
+        format?: (() => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
         addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
@@ -44,6 +45,7 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get insertAtBeginning(): (code: string) => void;
     get insertAtLine(): (code: string, line: number) => void;
     get setCode(): (ncode: string) => void;
+    get format(): () => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
     get addAction(): (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;

package/components/EditorBar.svelte

@@ -3,7 +3,7 @@
 
 <script>import { ResourceService, VariableService } from '../gen';
 import { getScriptByPath, sendUserToast } from '../utils';
-import { faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { faBroom, faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -286,6 +286,20 @@ async function onScriptPick(e) {
 				</span>
 			</Button></div
 		>
+		<div>
+			<Button
+				btnClasses="!font-medium"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={editor.format}
+				startIcon={{ icon: faBroom }}
+			>
+				{#if !iconOnly}
+					Format (Ctrl+S)
+				{/if}
+			</Button></div
+		>
 	</div>
 	<div class="py-1">
 		<div>

package/components/FlowBuilder.svelte

@@ -2,13 +2,12 @@
 import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import { encodeState, formatCron, loadHubScripts, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { encodeState, formatCron, loadHubScripts, sendUserToast } from '../utils';
 import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
-import { Icon } from 'svelte-awesome';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Badge, Button, Drawer, DrawerContent } from './common';
+import { Button, Drawer, DrawerContent } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
@@ -50,6 +49,7 @@ async function saveFlow() {
     const { cron, args, enabled } = $scheduleStore;
     $dirtyStore = false;
     if (initialPath === '') {
+        localStorage.removeItem('flow');
         await FlowService.createFlow({
             workspace: $workspaceStore,
             requestBody: {
@@ -65,6 +65,7 @@ async function saveFlow() {
         }
     }
     else {
+        localStorage.removeItem(`flow-${initialPath}`);
         await FlowService.updateFlow({
             workspace: $workspaceStore,
             path: initialPath,
@@ -112,16 +113,23 @@ async function saveFlow() {
 }
 let timeout = undefined;
 $: {
-    if ($flowStore && $flowStateStore) {
-        setUrl();
+    if ($flowStore || $selectedIdStore) {
+        saveDraft();
     }
 }
-function setUrl() {
+function saveDraft() {
     timeout && clearTimeout(timeout);
-    timeout = setTimeout(() => setQueryWithoutLoad($page.url, 'state', encodeState({
-        flow: $flowStore,
-        selectedId: $selectedIdStore
-    })), 500);
+    timeout = setTimeout(() => {
+        try {
+            localStorage.setItem(initialPath ? `flow-${initialPath}` : 'flow', encodeState({
+                flow: $flowStore,
+                selectedId: $selectedIdStore
+            }));
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }, 500);
 }
 const selectedIdStore = writable(selectedId);
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });

package/components/GroupEditor.svelte

@@ -85,6 +85,7 @@ function getRole(x) {
 				placeholder="Summary of the group"
 			/>
 			<Button
+				disabled={!can_write}
 				size="xs"
 				on:click={async () => {
 					await GroupService.updateGroup({

package/components/IconedResourceType.svelte

@@ -8,12 +8,12 @@ export let center = false;
 $: name_prefix = name.split('_')[0];
 </script>
 
-<div class=" truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
+<div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
 	{#if APP_TO_ICON_COMPONENT[name_prefix]}
-		<span class="text-gray-700">
+		<span class="text-gray-700 grayscale">
 			<svelte:component this={APP_TO_ICON_COMPONENT[name_prefix]} {height} {width} />
 		</span>
 	{:else}

package/components/InputTransformForm.svelte

@@ -54,7 +54,7 @@ function setPropertyType(rawValue) {
     }
 }
 function isStaticTemplate(inputCat) {
-    return inputCat === 'string' || inputCat === 'sql';
+    return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
 function connectProperty(rawValue) {
     if (isStaticTemplate(inputCat)) {
@@ -94,10 +94,13 @@ const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 $: isStaticTemplate(inputCat) && propertyType == 'static' && setPropertyType(arg?.value);
 const openBracket = '${';
 const closeBracket = '}';
+$: schema.properties[argName].default &&
+    !arg?.value &&
+    monacoTemplate?.setCode(schema.properties[argName].default);
 </script>
 
 {#if arg != undefined}
-	<div class="flex flex-row justify-between gap-1 mb-1">
+	<div class="flex flex-row justify-between gap-1 pb-1">
 		<div class="flex items-center flex-wrap grow">
 			<FieldHeader
 				label={argName}
@@ -161,7 +164,7 @@ const closeBracket = '}';
 				>
 					{#if isStaticTemplate(inputCat)}
 						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Templatable &nbsp; <Tooltip
+							{'${} '}Template &nbsp; <Tooltip
 								>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
 								refer to contextual objects like 'flow_input', or 'result' or functions like
 								'resource' and 'variable'
@@ -199,7 +202,7 @@ const closeBracket = '}';
 	<div class="max-w-xs" />
 
 	<div
-		class="relative {$propPickerConfig?.propName == argName
+		class="relative mb-6 {$propPickerConfig?.propName == argName
 			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
 			: ''}"
 	>
@@ -271,7 +274,6 @@ const closeBracket = '}';
 			Not recognized input type {argName}
 		{/if}
 	</div>
-	<div class="mb-6" />
 {:else}
 	<p class="text-sm text-gray-700">Argument at {argName} is undefined</p>
 {/if}

package/components/ItemPicker.svelte

@@ -1,5 +1,6 @@
-<script>import { Drawer, Skeleton } from './common';
+<script>import { Button, Drawer, Skeleton } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
+import NoItemFound from './home/NoItemFound.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import SearchItems from './SearchItems.svelte';
 export let pickCallback;
@@ -11,7 +12,6 @@ export let closeOnClick = true;
 /** Displayed if the load function returns no items. */
 export let noItemMessage = 'There are no items in the list';
 /** Displayed if the search returns no items. */
-export let emptySearchMessage = 'No items found';
 export let buttons = {};
 let loading = false;
 let items = [];
@@ -43,7 +43,7 @@ let drawer;
 
 <Drawer bind:this={drawer} size="600px">
 	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
-		<div>
+		<div class="w-full">
 			<div class="w-12/12 pb-4">
 				<input
 					type="text"
@@ -61,72 +61,78 @@ let drawer;
 					{@html noItemMessage}
 				</div>
 			{:else if filteredItems?.length}
-				<ul class="divide-y divide-gray-200">
+				<div class="border rounded-md divide-y divide-gray-200 w-full">
 					{#each filteredItems as obj}
-						<li class="flex flex-row w-full">
-							<button
-								class="py-4 px-1 gap-1 flex flex-row grow border  border-gray-300 border-opacity-0 
-									hover:bg-white hover:border-opacity-100 text-black"
-								on:click={() => {
-									if (closeOnClick) {
-										drawer.closeDrawer()
-									}
-									pickCallback(obj['path'], obj[extraField])
-								}}
-							>
-								{#if `app` in obj}
-									<div class="mr-2 text-sm text-left truncate w-24">
-										<IconedResourceType after={true} silent={false} name={obj['app']} />
-									</div>
-								{/if}
-								{#if `resource_type` in obj}
-									<div class="mr-2 truncate text-left w-24 text-sm">
-										<IconedResourceType after={true} name={obj['resource_type']} />
-									</div>
-								{/if}
-								<div class="flex flex-col">
-									{#if obj.marked}
-										<div class="text-sm font-semibold">
-											{@html obj.marked}
+						<div
+							class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0 
+						first-of-type:rounded-t-md last-of-type:rounded-b-md"
+						>
+							<div class="inline-flex items-center grow">
+								<button
+									class="py-2 px-1 gap-1 flex grow border-gray-300 border-opacity-0
+									 text-black"
+									on:click={() => {
+										if (closeOnClick) {
+											drawer.closeDrawer()
+										}
+										pickCallback(obj['path'], obj[extraField])
+									}}
+								>
+									{#if `app` in obj}
+										<div class="mr-2 text-sm text-left center-center  w-30">
+											<IconedResourceType after={true} silent={false} name={obj['app']} />
+										</div>
+									{/if}
+									{#if `resource_type` in obj}
+										<div class="mr-2  text-left w-30  center-center  text-sm">
+											<IconedResourceType after={true} name={obj['resource_type']} />
 										</div>
-									{:else}
-										<div class="text-sm font-semibold flex flex-col">
-											<span class="mr-2 text-left">{obj[extraField] ?? ''}</span>
-											{#if extraField != 'path'}
-												<span class="font-normal text-xs text-left italic overflow-hidden"
-													>{obj['path'] ?? ''}</span
+									{/if}
+									<div class="flex grow flex-col break-all overflow-hidden">
+										{#if obj.marked}
+											<div class="text-sm font-semibold text-left">
+												{@html obj.marked}
+											</div>
+										{:else}
+											<div class="text-sm font-semibold flex flex-col">
+												<span class="mr-2 text-left">{obj[extraField] ?? ''}</span>
+												{#if extraField != 'path'}
+													<span class="font-normal text-xs text-left italic"
+														>{obj['path'] ?? ''}</span
+													>
+												{/if}
+											</div>
+											{#if extraField != 'description'}
+												<div class="text-xs font-light italic text-left"
+													>{obj['description'] ?? ''}</div
 												>
 											{/if}
-										</div>
-										{#if extraField != 'description'}
-											<div class="text-xs font-light italic text-left"
-												>{obj['description'] ?? ''}</div
-											>
 										{/if}
-									{/if}
-								</div>
-							</button>
+									</div>
+								</button>
+							</div>
 							{#if buttons}
-								<div class="flex flex-row">
+								<div class="flex flex-row items-center">
 									{#each Object.entries(buttons) as [name, button]}
-										<button
-											class="py-4 px-1 gap-1 flex flex-row grow  text-black"
-											on:click={() => {
-												button(obj['path'] ?? '')
-											}}
-										>
-											{name}
-										</button>
+										<div>
+											<Button
+												size="sm"
+												variant="border"
+												on:click={() => {
+													button(obj['path'] ?? '')
+												}}
+											>
+												{name}
+											</Button>
+										</div>
 									{/each}
 								</div>
 							{/if}
-						</li>
+						</div>
 					{/each}
-				</ul>
-			{:else}
-				<div class="text-center text-sm text-gray-600 mt-2">
-					{@html emptySearchMessage}
 				</div>
+			{:else}
+				<NoItemFound />
 			{/if}
 		</div>
 		<svelte:fragment slot="actions">

package/components/ItemPicker.svelte.d.ts

@@ -8,8 +8,7 @@ declare const __propDef: {
         itemName: string;
         closeOnClick?: boolean | undefined;
         /** Displayed if the load function returns no items. */ noItemMessage?: string | undefined;
-        /** Displayed if the search returns no items. */ emptySearchMessage?: string | undefined;
-        buttons?: Record<string, (x: string) => void> | undefined;
+        /** Displayed if the search returns no items. */ buttons?: Record<string, (x: string) => void> | undefined;
         openDrawer?: (() => void) | undefined;
     };
     events: {

package/components/LogViewer.svelte

@@ -1,6 +1,4 @@
-<script>import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { Icon } from 'svelte-awesome';
-import { fade } from 'svelte/transition';
+<script>import { Loader2 } from 'lucide-svelte';
 import { Drawer, DrawerContent } from './common';
 export let content;
 export let isLoading;
@@ -40,15 +38,15 @@ let logViewer;
 				</div>
 			</div>
 		</div>
-		{#if duration}
+		{#if isLoading}
+			<Loader2 class="animate-spin absolute top-2 left-2" />
+		{:else if duration}
 			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
 		{/if}
-
 		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}<span>{content}</span>{:else if isLoading}<Icon
-					data={faSpinner}
-					class="animate-spin"
-				/>{:else}<span class="text-gray-600">No logs are available yet</span>{/if}</pre
+			>{#if content}<span>{content}</span>{:else if !isLoading}<span class="text-gray-600"
+					>No logs are available yet</span
+				>{/if}</pre
 		>
 	</div>
 </div>

package/components/ModulePreview.svelte

@@ -6,11 +6,10 @@ import TestJobLoader from './TestJobLoader.svelte';
 import LogViewer from './LogViewer.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import Button from './common/button/Button.svelte';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
 import { workspaceStore } from '../stores';
-import { Icon } from 'svelte-awesome';
+import { Loader2 } from 'lucide-svelte';
 export let mod;
 export let schema;
 // Test
@@ -71,16 +70,8 @@ function jobDone() {
 			bind:args={stepArgs}
 		/>
 		{#if testIsLoading}
-			<Button
-				on:click={testJobLoader?.cancelJob}
-				btnClasses="w-full mt-4"
-				color="red"
-				size="sm"
-				startIcon={{
-					icon: faSpinner,
-					classes: 'animate-spin'
-				}}
-			>
+			<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full mt-4" color="red" size="sm">
+				<Loader2 class="animate-spin mr-1" />
 				Cancel
 			</Button>
 		{/if}
@@ -98,7 +89,7 @@ function jobDone() {
 				{:else}
 					<div class="p-2">
 						{#if testIsLoading}
-							<Icon data={faSpinner} class="animate-spin" />
+							<Loader2 class="animate-spin" />
 						{:else}
 							Test to see the result here
 						{/if}

package/components/MoveDrawer.svelte

@@ -4,21 +4,23 @@ import { userStore, workspaceStore } from '../stores';
 import { Alert, Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Path from './Path.svelte';
-import { FlowService, ScriptService } from '../gen';
+import { AppService, FlowService, ScriptService } from '../gen';
 const dispatch = createEventDispatcher();
 let kind;
 let initialPath = '';
-let path = '';
+let path = undefined;
+let summary = undefined;
 let drawer;
 let own = false;
-export async function openDrawer(initialPath_l, kind_l) {
+export async function openDrawer(initialPath_l, summary_l, kind_l) {
     kind = kind_l;
     initialPath = initialPath_l;
+    summary = summary_l;
     await loadOwner();
     drawer.openDrawer();
 }
 async function loadOwner() {
-    own = await isOwner(path, $userStore, $workspaceStore);
+    own = await isOwner(initialPath, $userStore, $workspaceStore);
 }
 async function updatePath() {
     if (kind == 'flow') {
@@ -30,8 +32,8 @@ async function updatePath() {
             workspace: $workspaceStore,
             path: initialPath,
             requestBody: {
-                path,
-                summary: flow.summary,
+                path: path ?? '',
+                summary: summary ?? '',
                 description: flow.description,
                 value: flow.value
             }
@@ -42,6 +44,7 @@ async function updatePath() {
             workspace: $workspaceStore,
             path: initialPath
         });
+        script.summary = summary ?? '';
         await ScriptService.createScript({
             workspace: $workspaceStore,
             requestBody: {
@@ -49,7 +52,17 @@ async function updatePath() {
                 description: script.description ?? '',
                 lock: script.lock?.split('\n'),
                 parent_hash: script.hash,
-                path
+                path: path ?? ''
+            }
+        });
+    }
+    else if (kind == 'app') {
+        await AppService.updateApp({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path: path != initialPath ? path : undefined,
+                summary
             }
         });
     }
@@ -59,16 +72,27 @@ async function updatePath() {
 </script>
 
 <Drawer bind:this={drawer}>
-	<DrawerContent title="Move {initialPath}" on:close={drawer.closeDrawer}>
-		<div class="flex flex-col gap-6">
-			<h1>Move {initialPath} to</h1>
-			{#if !own}
-				<Alert type="warning" title="Not owner"
-					>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
-				>
-			{/if}
+	<DrawerContent title="Move/Rename {initialPath}" on:close={drawer.closeDrawer}>
+		<h1 class="mb-2">Move/Rename {initialPath}</h1>
+
+		{#if !own}
+			<Alert type="warning" title="Not owner"
+				>Since you do not own this item, you cannot move this item (you can however fork it)</Alert
+			>
+		{/if}
+		<h2 class="border-b pb-1 mt-8 mb-4">Summary</h2>
+		<input
+			type="text"
+			bind:value={summary}
+			placeholder="A short summary displayed when it is listed"
+			rows="1"
+			disabled={!own}
+		/>
+
+		<h2 class="border-b pb-1 mt-8 mb-4">Path</h2>
+		<div class="flex flex-col mb-2 gap-6">
 			<Path disabled={!own} {kind} {initialPath} bind:path />
-			<Button disabled={!own} on:click={updatePath}>Move</Button>
+			<Button disabled={!own} on:click={updatePath}>Move/Rename</Button>
 			<div />
 		</div>
 	</DrawerContent>