windmill-components 1.60.4 → 1.75.0

package/components/apps/editor/componentsPanel/CssSettings.svelte

@@ -0,0 +1,188 @@
+<script>import { onMount, getContext } from 'svelte';
+import { LayoutDashboardIcon, MousePointer2, CurlyBraces } from 'lucide-svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import { emptyString } from '../../../../utils';
+import { Tab, TabContent, Tabs } from '../../../common';
+import ListItem from './ListItem.svelte';
+import { isOpenStore } from './store';
+import CssProperty from './CssProperty.svelte';
+import { components } from '../component';
+import { slide } from 'svelte/transition';
+const STATIC_ELEMENTS = ['app'];
+const TITLE_PREFIX = 'Css.';
+const SHOW_UNUSED_ID = 'Setting.ShowUnused';
+const { app } = getContext('AppViewerContext');
+let rawCode = '';
+let viewJsonSchema = false;
+$: rawCode && parseJson();
+let jsonError = '';
+function parseJson() {
+    try {
+        $app.css = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
+}
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify($app.css, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+const entries = [
+    {
+        type: 'app',
+        name: 'App',
+        icon: LayoutDashboardIcon,
+        ids: ['viewer', 'grid', 'component']
+    },
+    ...Object.values(components).map(({ name, icon, data: { type, customCss } }) => ({
+        type,
+        name,
+        icon,
+        ids: Object.keys(customCss ?? {}) ?? []
+    }))
+];
+let isCustom = Object.fromEntries(Object.keys(entries).map((k) => [k, false]));
+let newCss = $app.css ?? {};
+entries.forEach((e) => {
+    if (!newCss[e.type]) {
+        isCustom[e.type] = true;
+        newCss[e.type] = {};
+    }
+    e.ids.forEach((id) => {
+        if (!newCss[e.type][id]) {
+            newCss[e.type][id] = components?.[e.type]?.data?.customCss?.[id] ?? { class: '', style: '' };
+        }
+    });
+    e.ids
+        .map((id) => newCss[e.type][id].class != '' || newCss[e.type][id].style != '')
+        .forEach((c) => {
+        if (c) {
+            isCustom[e.type] = true;
+        }
+    });
+});
+//@ts-ignore
+$app.css = newCss;
+$: staticComponents = entries.filter(({ type }) => STATIC_ELEMENTS.includes(type));
+$: usedComponents = Object.keys($app.grid.reduce((acc, { data }) => {
+    acc[data.type] = true;
+    return acc;
+}, {}))
+    .map((type) => entries.find((entry) => entry.type === type))
+    .filter(Boolean);
+$: unusedComponents = entries.filter(({ type }) => {
+    return (!STATIC_ELEMENTS.includes(type) && !usedComponents.find((entry) => entry.type === type));
+});
+onMount(() => {
+    isOpenStore.addItems([{ name: 'App' }, ...Object.values(components)].map((component) => {
+        return { [TITLE_PREFIX + component.name]: false };
+    }));
+    isOpenStore.addItems([{ [SHOW_UNUSED_ID]: false }]);
+});
+</script>
+
+<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
+	<Tab value="ui" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<MousePointer2 size={16} />
+			<span class="pl-1">UI</span>
+		</div>
+	</Tab>
+	<Tab value="json" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<CurlyBraces size={16} />
+			<span class="pl-1">JSON</span>
+		</div>
+	</Tab>
+	<div slot="content" class="h-full overflow-y-auto">
+		<TabContent value="ui">
+			{#each [...staticComponents, ...usedComponents] as { type, name, icon, ids }}
+				{#if ids.length > 0}
+					<ListItem title={name} prefix={TITLE_PREFIX}>
+						<div slot="title" class="flex items-center">
+							<svelte:component this={icon} size={18} />
+							<span class="ml-1">
+								{name}
+							</span>
+						</div>
+						<div class="pb-2">
+							{#each ids as id}
+								<div class="mb-3">
+									{#if $app?.css?.[type][id]}
+										<CssProperty
+											name={id}
+											bind:value={$app.css[type][id]}
+											on:focus={() => (isCustom[type] = true)}
+										/>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					</ListItem>
+				{/if}
+			{/each}
+			<div class="px-1 my-4">
+				<button
+					on:click|preventDefault|stopPropagation={() => isOpenStore.toggle(SHOW_UNUSED_ID)}
+					class="w-full text-xs text-gray-500 text-center font-medium hover:underline p-2"
+				>
+					{$isOpenStore[SHOW_UNUSED_ID] ? 'Hide' : 'Show'} unused components
+				</button>
+			</div>
+			{#if $isOpenStore[SHOW_UNUSED_ID]}
+				<div transition:slide|local={{ duration: 300 }}>
+					{#each unusedComponents as { type, name, icon, ids }}
+						{#if ids.length > 0}
+							<ListItem title={name} prefix={TITLE_PREFIX}>
+								<div slot="title" class="flex items-center">
+									<svelte:component this={icon} size={18} />
+									<span class="ml-1">
+										{name}
+									</span>
+								</div>
+								<div class="pb-2">
+									{#each ids as id}
+										<div class="mb-3">
+											{#if $app?.css?.[type][id]}
+												<CssProperty
+													name={id}
+													bind:value={$app.css[type][id]}
+													on:focus={() => (isCustom[type] = true)}
+												/>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							</ListItem>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+		</TabContent>
+		<TabContent value="json">
+			{#if !emptyString(jsonError)}
+				<span class="text-red-400 text-xs mb-1 flex flex-row-reverse">
+					{jsonError}
+				</span>
+			{:else}
+				<div class="py-2" />
+			{/if}
+			<div class="h-full w-full py-1">
+				<SimpleEditor
+					autoHeight
+					class="editor"
+					lang="json"
+					bind:code={rawCode}
+					fixedOverflowWidgets={false}
+				/>
+			</div>
+		</TabContent>
+	</div>
+</Tabs>

package/components/apps/editor/componentsPanel/CssSettings.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CssSettingsProps = typeof __propDef.props;
+export type CssSettingsEvents = typeof __propDef.events;
+export type CssSettingsSlots = typeof __propDef.slots;
+export default class CssSettings extends SvelteComponentTyped<CssSettingsProps, CssSettingsEvents, CssSettingsSlots> {
+}
+export {};

package/components/apps/editor/componentsPanel/ListItem.svelte

@@ -0,0 +1,39 @@
+<script>import { slide } from 'svelte/transition';
+import { ChevronDown } from 'lucide-svelte';
+import { isOpenStore } from './store';
+export let title;
+export let prefix = undefined;
+$: storeTitle = prefix + title;
+$: isOpen = prefix ? $isOpenStore[storeTitle] : true;
+</script>
+
+<section class="pt-1 pb-2 px-1">
+	{#if prefix !== undefined}
+		<button
+			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
+			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
+			rounded-sm duration-200 hover:bg-gray-100"
+		>
+			<h1 class="text-sm font-semibold text-left">
+				<slot name="title">
+					{title}
+				</slot>
+			</h1>
+			<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
+		</button>
+		{#if isOpen}
+			<div transition:slide|local={{ duration: 300 }} class="px-2">
+				<slot />
+			</div>
+		{/if}
+	{:else}
+		<h1 class="text-sm font-semibold text-left px-2 py-1">
+			<slot name="title">
+				{title}
+			</slot>
+		</h1>
+		<div class="px-2">
+			<slot />
+		</div>
+	{/if}
+</section>

package/components/apps/editor/componentsPanel/ListItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        prefix?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        default: {};
+    };
+};
+export type ListItemProps = typeof __propDef.props;
+export type ListItemEvents = typeof __propDef.events;
+export type ListItemSlots = typeof __propDef.slots;
+export default class ListItem extends SvelteComponentTyped<ListItemProps, ListItemEvents, ListItemSlots> {
+}
+export {};

package/components/apps/editor/componentsPanel/componentStaticValues.d.ts

@@ -1,7 +1,11 @@
 export declare const staticValues: {
-    readonly buttonColorOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light")[];
+    readonly buttonColorOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
     readonly buttonSizeOptions: readonly ["xs", "sm", "md", "lg", "xl"];
     readonly tableSearchOptions: readonly ["By Component", "By Runnable", "Disabled"];
     readonly chartThemeOptions: readonly ["theme1", "theme2", "theme3"];
     readonly textStyleOptions: readonly ["Title", "Subtitle", "Body", "Label", "Caption"];
+    readonly currencyOptions: readonly ["USD", "EUR", "GBP", "CAD", "AUD", "JPY", "CNY", "INR", "BRL"];
+    readonly localeOptions: readonly ["en-US", "en-GB", "en-IE", "de-DE", "fr-FR", "br-FR", "ja-JP", "pt-TL", "fr-CA", "en-CA"];
+    readonly objectFitOptions: readonly ["contain", "cover", "fill"];
+    readonly splitPanelOptions: readonly ["2", "3", "4"];
 };

package/components/apps/editor/componentsPanel/componentStaticValues.js

@@ -5,5 +5,20 @@ export const staticValues = {
     buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
     tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
     chartThemeOptions: ['theme1', 'theme2', 'theme3'],
-    textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption']
+    textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],
+    currencyOptions: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY', 'CNY', 'INR', 'BRL'],
+    localeOptions: [
+        'en-US',
+        'en-GB',
+        'en-IE',
+        'de-DE',
+        'fr-FR',
+        'br-FR',
+        'ja-JP',
+        'pt-TL',
+        'fr-CA',
+        'en-CA'
+    ],
+    objectFitOptions: ['contain', 'cover', 'fill'],
+    splitPanelOptions: ['2', '3', '4']
 };

package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -2,7 +2,7 @@
 import { getContext } from 'svelte';
 export let outputs = [];
 export let componentId;
-const { worldStore } = getContext('AppEditorContext');
+const { worldStore } = getContext('AppViewerContext');
 let object = {};
 function subscribeToAllOutputs(observableOutputs) {
     if (observableOutputs) {

package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,11 +1,13 @@
-<script>import { page } from '$app/stores';
-import { classNames } from '../../../../utils';
+<script>import { classNames } from '../../../../utils';
+import { X } from 'lucide-svelte';
 import { getContext } from 'svelte';
-import { key } from 'svelte-awesome/icons';
-import { displayData } from '../../utils';
+import { flip } from 'svelte/animate';
+import { fade } from 'svelte/transition';
+import { findGridItem } from '../appUtils';
+import { components } from '../component';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
-const { connectingInput, staticOutputs, worldStore, selectedComponent, app } = getContext('AppEditorContext');
+const { connectingInput, staticOutputs, worldStore, selectedComponent, app } = getContext('AppViewerContext');
 function connectInput(componentId, path) {
     if ($connectingInput) {
         $connectingInput = {
@@ -22,80 +24,126 @@ function connectInput(componentId, path) {
     }
 }
 function getComponentNameById(componentId) {
-    const component = $app.grid.find((c) => c?.data?.id === componentId);
-    if (component?.data.type) {
-        return displayData[component?.data.type].name;
+    const component = findGridItem($app, componentId);
+    if (component?.data?.type) {
+        return components[component?.data.type].name;
     }
     else if (componentId == 'ctx') {
         return 'Context';
     }
+    else if (componentId.startsWith('bg_')) {
+        return 'Background';
+    }
     else {
         return 'Table action';
     }
 }
-$: panels = [['ctx', ['email', 'username', 'query']]].concat(Object.entries($staticOutputs));
+$: panels = [['ctx', ['email', 'username', 'query', 'hash']]].concat(Object.entries($staticOutputs));
+let search = '';
+// filter out outputs that don't match the search by name (computed by getComponentNameById) and id
+// The output should be [string, string[]][]
+$: filteredPanels = panels.filter(([componentId, outputs]) => {
+    const name = getComponentNameById(componentId);
+    return (name.toLowerCase().includes(search.toLowerCase()) ||
+        componentId.toLowerCase().includes(search.toLowerCase()));
+});
 </script>
 
-<PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">
-	<div
-		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-2 pt-4 pb-2"
-	>
-		{#each panels as [componentId, outputs] (componentId)}
-			{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
-				<div>
-					<div
-						class="flex {$connectingInput?.opened
-							? 'bg-white z-50'
-							: ''} flex-row justify-between w-full"
-					>
-						<button
-							on:click|stopPropagation|preventDefault={$connectingInput.opened
-								? undefined
-								: () => ($selectedComponent = componentId)}
-							class={classNames(
-								'px-2 text-2xs py-0.5 border border-gray-300 font-bold rounded-t-sm w-fit',
-								$selectedComponent === componentId
-									? ' bg-indigo-500 text-white'
-									: 'bg-gray-200 text-gray-500'
-							)}
-						>
-							{componentId}
-						</button>
-						<span
-							class={classNames(
-								'px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit',
-								'bg-gray-500 text-white'
-							)}
-						>
-							{getComponentNameById(componentId)}
-						</span>
-					</div>
-
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class={classNames(
-							$connectingInput?.opened ? 'bg-white z-50' : '',
-							`w-full py-2 grow border relative break-all `,
-							$selectedComponent === componentId ? 'border border-blue-500 ' : '',
-							$connectingInput.hoveredComponent === componentId ? 'outline outline-blue-500' : ''
-						)}
+<PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
+	<div class="overflow-auto h-full min-w-[150px] w-full relative flex flex-col">
+		<div class="sticky z-50 top-0 left-0 w-full bg-white px-2 pb-2">
+			<div class="relative">
+				<input
+					bind:value={search}
+					class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+					placeholder="Search outputs..."
+				/>
+				{#if search}
+					<button
+						class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+						on:click|stopPropagation|preventDefault={() => (search = '')}
 					>
-						{#key $selectedComponent}
-							{#key $connectingInput?.opened}
-								<ComponentOutputViewer
-									outputs={$connectingInput?.opened && $selectedComponent === componentId
-										? ['search']
-										: outputs}
+						<X size="14" />
+					</button>
+				{/if}
+			</div>
+		</div>
+		<div class="relative p-2">
+			{#each filteredPanels as [componentId, outputs] (componentId)}
+				<div
+					animate:flip={{ duration: 300 }}
+					in:fade|local={{ duration: 100, delay: 50 }}
+					out:fade|local={{ duration: 100 }}
+					class="pb-2"
+				>
+					{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
+						{@const name = getComponentNameById(componentId)}
+						<div>
+							<div
+								class="flex {$connectingInput?.opened
+									? 'bg-white z-50'
+									: ''} flex-row justify-between w-full"
+							>
+								<button
+									on:click|stopPropagation|preventDefault={$connectingInput.opened
+										? undefined
+										: () => ($selectedComponent = componentId)}
+									class={classNames(
+										'px-2 text-2xs py-0.5 border-t border-x font-bold rounded-t-sm w-fit',
+										$selectedComponent === componentId
+											? ' bg-indigo-500/90 text-white border-indigo-500/90'
+											: 'bg-gray-100 text-gray-500 border-gray-200'
+									)}
+								>
 									{componentId}
-									on:select={({ detail }) => {
-										connectInput(componentId, detail)
-									}}
-								/>
-							{/key}
-						{/key}
-					</div>
+								</button>
+								<span
+									class={classNames(
+										'px-1 text-2xs py-0.5 font-semibold rounded-t-sm w-fit',
+										'bg-gray-700 text-white'
+									)}
+								>
+									{name}
+								</span>
+							</div>
+							<div
+								class={classNames(
+									$connectingInput?.opened ? 'bg-white z-50' : '',
+									`w-full py-2 grow border relative break-all `,
+									$selectedComponent === componentId ? 'border border-indigo-500/90 ' : '',
+									$connectingInput.hoveredComponent === componentId
+										? 'outline outline-indigo-500/90'
+										: ''
+								)}
+							>
+								{#key $selectedComponent}
+									{#key $connectingInput?.opened}
+										<ComponentOutputViewer
+											outputs={$connectingInput?.opened && $selectedComponent === componentId
+												? name == 'Table'
+													? ['search']
+													: []
+												: outputs}
+											{componentId}
+											on:select={({ detail }) => {
+												connectInput(componentId, detail)
+											}}
+										/>
+									{/key}
+								{/key}
+							</div>
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<div
+					in:fade|local={{ duration: 50, delay: 100 }}
+					out:fade|local={{ duration: 50 }}
+					class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-4 px-2"
+				>
+					No outputs found
 				</div>
-			{/if}
-		{/each}
+			{/each}
+		</div>
 	</div>
 </PanelSection>

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -1,14 +1,23 @@
-<script>import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
+<script>import { Button, Drawer, DrawerContent, Tab, Tabs } from '../../../common';
+import FlowScriptPicker from '../../../flows/pickers/FlowScriptPicker.svelte';
+import PickHubScript from '../../../flows/pickers/PickHubScript.svelte';
 import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
-import { emptySchema } from '../../../../utils';
+import { capitalize, emptySchema, getScriptByPath } from '../../../../utils';
+import { faCodeBranch, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { Building, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';
-import { defaultCode } from '../../editorUtils';
+import { defaultCode } from '../component';
+import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
+import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 export let name;
 export let id;
-const { appPath, app } = getContext('AppEditorContext');
+let tab = 'inlinescripts';
+let filter = '';
+let picker;
+const { appPath, app } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
 async function inferInlineScriptSchema(language, content, schema) {
     try {
@@ -21,9 +30,12 @@ async function inferInlineScriptSchema(language, content, schema) {
 }
 async function createInlineScriptByLanguage(language, path, subkind = undefined) {
     const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type;
-    const fullPath = `${appPath}/inline-script/${path}`;
     const content = defaultCode(componentType, language) ??
         initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
+    return newInlineScript(content, language, path);
+}
+async function newInlineScript(content, language, path) {
+    const fullPath = `${appPath}/inline-script/${path}`;
     let schema = emptySchema();
     schema = await inferInlineScriptSchema(language, content, schema);
     const newInlineScript = {
@@ -34,15 +46,80 @@ async function createInlineScriptByLanguage(language, path, subkind = undefined)
     };
     dispatch('new', newInlineScript);
 }
+async function pickScript(path) {
+    const script = await getScriptByPath(path);
+    newInlineScript(script.content, script.language, path);
+}
+async function pickHubScript(path) {
+    const script = await getScriptByPath(path);
+    newInlineScript(script.content, script.language, path);
+}
+function pickInlineScript(name) {
+    const unusedInlineScriptIndex = $app.unusedInlineScripts?.findIndex((script) => script.name === name);
+    const unusedInlineScript = $app.unusedInlineScripts?.[unusedInlineScriptIndex];
+    $app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1);
+    $app = $app;
+    dispatch('new', unusedInlineScript.inlineScript);
+}
 const langs = ['deno', 'python3', 'go', 'bash'];
+function loadSchemaFromTriggerable(path, arg1) {
+    throw new Error('Function not implemented.');
+}
 </script>
 
-<div class="flex flex-col p-4 gap-2 text-sm" in:fly={{ duration: 50 }}>
-	Please choose a language:
+<Drawer bind:this={picker} size="1000px">
+	<DrawerContent title="Script/Flow Picker" on:close={picker.closeDrawer}>
+		<div>
+			<div class="max-w-6xl">
+				<Tabs bind:selected={tab}>
+					<Tab size="sm" value="inlinescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Detached Inline Scripts
+						</div>
+					</Tab>
+					<Tab size="sm" value="workspacescripts">
+						<div class="flex gap-2 items-center my-1">
+							<Building size={18} />
+							Workspace Scripts
+						</div>
+					</Tab>
+
+					<Tab size="sm" value="hubscripts">
+						<div class="flex gap-2 items-center my-1">
+							<Globe2 size={18} />
+							Hub Scripts
+						</div>
+					</Tab>
+				</Tabs>
+				<div class="my-2" />
+				<div class="flex flex-col gap-y-16">
+					<div class="flex flex-col">
+						{#if tab == 'inlinescripts'}
+							<InlineScriptList
+								on:pick={(e) => pickInlineScript(e.detail)}
+								inlineScripts={$app.unusedInlineScripts
+									? $app.unusedInlineScripts.map((uis) => uis.name)
+									: []}
+							/>
+						{:else if tab == 'workspacescripts'}
+							<WorkspaceScriptList on:pick={(e) => pickScript(e.detail)} />
+						{:else if tab == 'hubscripts'}
+							<PickHubScript bind:filter on:pick={(e) => pickHubScript(e.detail.path)} />
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<div class="flex flex-col px-4 py-2 gap-2 text-sm" in:fly={{ duration: 50 }}>
+	<div>Choose a language:</div>
 	<div class="flex gap-2 flex-row flex-wrap">
 		{#each langs as lang}
 			<FlowScriptPicker
-				label={lang}
+				label={capitalize(lang)}
 				{lang}
 				on:click={() => {
 					createInlineScriptByLanguage(lang, name)
@@ -57,12 +134,34 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 				createInlineScriptByLanguage(Script.language.DENO, name, 'pgsql')
 			}}
 		/>
-		<FlowScriptPicker
+		<!-- <FlowScriptPicker
 			label={`MySQL`}
 			lang="mysql"
 			on:click={() => {
 				createInlineScriptByLanguage(Script.language.DENO, name, 'mysql')
 			}}
-		/>
+		/> -->
+	</div>
+
+	<div class="mt-4">
+		<Button
+			on:click={() => picker?.openDrawer()}
+			size="xs"
+			color="blue"
+			startIcon={{ icon: faCodeBranch }}
+			btnClasses="truncate"
+		>
+			or fork a detached/Workspace/Hub script
+		</Button>
+		<Button
+			on:click={() => dispatch('delete')}
+			size="xs"
+			color="red"
+			variant="border"
+			startIcon={{ icon: faTrash }}
+			btnClasses="truncate"
+		>
+			Delete
+		</Button>
 	</div>
 </div>