windmill-components 1.52.0 → 1.55.1

package/components/icons/StripeIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StripeIconProps = typeof __propDef.props;
+export type StripeIconEvents = typeof __propDef.events;
+export type StripeIconSlots = typeof __propDef.slots;
+export default class StripeIcon extends SvelteComponentTyped<StripeIconProps, StripeIconEvents, StripeIconSlots> {
+}
+export {};

package/components/icons/TelegramIcon.svelte

@@ -0,0 +1,9 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 50 50">
+	<path
+		d="M 44.376953 5.9863281 C 43.889905 6.0076957 43.415817 6.1432497 42.988281 6.3144531 C 42.565113 6.4845113 40.128883 7.5243408 36.53125 9.0625 C 32.933617 10.600659 28.256963 12.603668 23.621094 14.589844 C 14.349356 18.562196 5.2382813 22.470703 5.2382812 22.470703 L 5.3046875 22.445312 C 5.3046875 22.445312 4.7547875 22.629122 4.1972656 23.017578 C 3.9185047 23.211806 3.6186028 23.462555 3.3730469 23.828125 C 3.127491 24.193695 2.9479735 24.711788 3.015625 25.259766 C 3.2532479 27.184511 5.2480469 27.730469 5.2480469 27.730469 L 5.2558594 27.734375 L 14.158203 30.78125 C 14.385177 31.538434 16.858319 39.792923 17.402344 41.541016 C 17.702797 42.507484 17.984013 43.064995 18.277344 43.445312 C 18.424133 43.635633 18.577962 43.782915 18.748047 43.890625 C 18.815627 43.933415 18.8867 43.965525 18.957031 43.994141 C 18.958531 43.994806 18.959437 43.99348 18.960938 43.994141 C 18.969579 43.997952 18.977708 43.998295 18.986328 44.001953 L 18.962891 43.996094 C 18.979231 44.002694 18.995359 44.013801 19.011719 44.019531 C 19.043456 44.030655 19.062905 44.030268 19.103516 44.039062 C 20.123059 44.395042 20.966797 43.734375 20.966797 43.734375 L 21.001953 43.707031 L 26.470703 38.634766 L 35.345703 45.554688 L 35.457031 45.605469 C 37.010484 46.295216 38.415349 45.910403 39.193359 45.277344 C 39.97137 44.644284 40.277344 43.828125 40.277344 43.828125 L 40.310547 43.742188 L 46.832031 9.7519531 C 46.998903 8.9915162 47.022612 8.334202 46.865234 7.7402344 C 46.707857 7.1462668 46.325492 6.6299361 45.845703 6.34375 C 45.365914 6.0575639 44.864001 5.9649605 44.376953 5.9863281 z M 44.429688 8.0195312 C 44.627491 8.0103707 44.774102 8.032983 44.820312 8.0605469 C 44.866523 8.0881109 44.887272 8.0844829 44.931641 8.2519531 C 44.976011 8.419423 45.000036 8.7721605 44.878906 9.3242188 L 44.875 9.3359375 L 38.390625 43.128906 C 38.375275 43.162926 38.240151 43.475531 37.931641 43.726562 C 37.616914 43.982653 37.266874 44.182554 36.337891 43.792969 L 26.632812 36.224609 L 26.359375 36.009766 L 26.353516 36.015625 L 23.451172 33.837891 L 39.761719 14.648438 A 1.0001 1.0001 0 0 0 38.974609 13 A 1.0001 1.0001 0 0 0 38.445312 13.167969 L 14.84375 28.902344 L 5.9277344 25.849609 C 5.9277344 25.849609 5.0423771 25.356927 5 25.013672 C 4.99765 24.994652 4.9871961 25.011869 5.0332031 24.943359 C 5.0792101 24.874869 5.1948546 24.759225 5.3398438 24.658203 C 5.6298218 24.456159 5.9609375 24.333984 5.9609375 24.333984 L 5.9941406 24.322266 L 6.0273438 24.308594 C 6.0273438 24.308594 15.138894 20.399882 24.410156 16.427734 C 29.045787 14.44166 33.721617 12.440122 37.318359 10.902344 C 40.914175 9.3649615 43.512419 8.2583658 43.732422 8.1699219 C 43.982886 8.0696253 44.231884 8.0286918 44.429688 8.0195312 z M 33.613281 18.792969 L 21.244141 33.345703 L 21.238281 33.351562 A 1.0001 1.0001 0 0 0 21.183594 33.423828 A 1.0001 1.0001 0 0 0 21.128906 33.507812 A 1.0001 1.0001 0 0 0 20.998047 33.892578 A 1.0001 1.0001 0 0 0 20.998047 33.900391 L 19.386719 41.146484 C 19.35993 41.068197 19.341173 41.039555 19.3125 40.947266 L 19.3125 40.945312 C 18.800713 39.30085 16.467362 31.5161 16.144531 30.439453 L 33.613281 18.792969 z M 22.640625 35.730469 L 24.863281 37.398438 L 21.597656 40.425781 L 22.640625 35.730469 z"
+	/>
+</svg>

package/components/icons/TelegramIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TelegramIconProps = typeof __propDef.props;
+export type TelegramIconEvents = typeof __propDef.events;
+export type TelegramIconSlots = typeof __propDef.slots;
+export default class TelegramIcon extends SvelteComponentTyped<TelegramIconProps, TelegramIconEvents, TelegramIconSlots> {
+}
+export {};

package/components/icons/WindmillIcon.svelte

@@ -27,13 +27,13 @@ export let white = false;
 			fill: #ffffff;
 		}
 		.st2 {
-			fill: #999;
+			fill: #bcd4fc;
 		}
 		.st3 {
-			fill: black;
+			fill: #3b82f6;
 		}
 		.st4 {
-			fill: #999;
+			fill: #b3b3b3;
 		}
 		.st5 {
 			fill: url(#SVGID_1_);

package/components/icons/index.d.ts

@@ -20,6 +20,16 @@ import TogglIcon from './TogglIcon.svelte';
 import WindmillIcon from './WindmillIcon.svelte';
 import MailchimpIcon from './MailchimpIcon.svelte';
 import SendgridIcon from './SendgridIcon.svelte';
+import SendflakeIcon from './SendflakeIcon.svelte';
+import QRCodeIcon from './QRCodeIcon.svelte';
+import LinkedinIcon from './LinkedinIcon.svelte';
+import HubspotIcon from './HubspotIcon.svelte';
+import DatadogIcon from './DatadogIcon.svelte';
+import StripeIcon from './StripeIcon.svelte';
+import TelegramIcon from './TelegramIcon.svelte';
+import FunkwhaleIcon from './FunkwhaleIcon.svelte';
+import GdocsIcon from './GdocsIcon.svelte';
+import NextcloudIcon from './NextcloudIcon.svelte';
 export declare const APP_TO_ICON_COMPONENT: {
     readonly postgresql: typeof PostgresIcon;
     readonly mysql: typeof Mysql;
@@ -44,5 +54,17 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly http: typeof HttpIcon;
     readonly mailchimp: typeof MailchimpIcon;
     readonly sendgrid: typeof SendgridIcon;
+    readonly snowflake: typeof SendflakeIcon;
+    readonly qrcode: typeof QRCodeIcon;
+    readonly linkedin: typeof LinkedinIcon;
+    readonly hubspot: typeof HubspotIcon;
+    readonly datadog: typeof DatadogIcon;
+    readonly stripe: typeof StripeIcon;
+    readonly telegram: typeof TelegramIcon;
+    readonly funkwhale: typeof FunkwhaleIcon;
+    readonly helper: typeof WindmillIcon;
+    readonly windmillhub: typeof WindmillIcon;
+    readonly gdocs: typeof GdocsIcon;
+    readonly ocs: typeof NextcloudIcon;
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, };

package/components/icons/index.js

@@ -20,6 +20,16 @@ import TogglIcon from './TogglIcon.svelte';
 import WindmillIcon from './WindmillIcon.svelte';
 import MailchimpIcon from './MailchimpIcon.svelte';
 import SendgridIcon from './SendgridIcon.svelte';
+import SendflakeIcon from './SendflakeIcon.svelte';
+import QRCodeIcon from './QRCodeIcon.svelte';
+import LinkedinIcon from './LinkedinIcon.svelte';
+import HubspotIcon from './HubspotIcon.svelte';
+import DatadogIcon from './DatadogIcon.svelte';
+import StripeIcon from './StripeIcon.svelte';
+import TelegramIcon from './TelegramIcon.svelte';
+import FunkwhaleIcon from './FunkwhaleIcon.svelte';
+import GdocsIcon from './GdocsIcon.svelte';
+import NextcloudIcon from './NextcloudIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -44,5 +54,17 @@ export const APP_TO_ICON_COMPONENT = {
     http: HttpIcon,
     mailchimp: MailchimpIcon,
     sendgrid: SendgridIcon,
+    snowflake: SendflakeIcon,
+    qrcode: QRCodeIcon,
+    linkedin: LinkedinIcon,
+    hubspot: HubspotIcon,
+    datadog: DatadogIcon,
+    stripe: StripeIcon,
+    telegram: TelegramIcon,
+    funkwhale: FunkwhaleIcon,
+    helper: WindmillIcon,
+    windmillhub: WindmillIcon,
+    gdocs: GdocsIcon,
+    ocs: NextcloudIcon
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, };

package/components/jobs/JobDetail.svelte

@@ -1,7 +1,7 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
-import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
+import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
 import { Badge } from '../common';
@@ -121,7 +121,7 @@ export let job;
 				<div>
 					{#if job && job.parent_job}
 						{#if job.is_flow_step}
-							<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span
+							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
 								class="mx-2"
 							>
 								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a

package/components/preview/FlowPreviewStatus.svelte

@@ -2,27 +2,16 @@
 export let job;
 </script>
 
-<div class="overflow-x-auto relative">
-	<table class="text-sm text-left text-gray-500 dark:text-gray-400">
-		<tbody>
-			<tr>
-				<th scope="row" class="py-2 pr-6 font-bold text-gray-900 whitespace-nowrap dark:text-white">
-					Status
-				</th>
-				<td class="py-2 "> <JobStatus {job} /></td>
-			</tr>
-			{#if job}
-				<tr>
-					<th scope="row" class="py-2 pr-6  font-bold text-gray-900 whitespace-nowrap ">
-						Job Id
-					</th>
-					<td class="py-2">
-						<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
-							{job?.id}
-						</a>
-					</td>
-				</tr>
-			{/if}
-		</tbody>
-	</table>
+<div class="grid grid-cols-2 gap-4 mb-1 text-gray-500 dark:text-gray-400">
+	<JobStatus {job} />
+	{#if job}
+		<div
+			><div class=" text-gray-900 whitespace-nowrap ">
+				<span class="font-bold">Job Id</span>
+				<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
+					{job?.id}
+				</a>
+			</div>
+		</div>
+	{/if}
 </div>

package/components/propertyPicker/PropPicker.svelte

@@ -100,6 +100,22 @@ async function loadResources() {
 					/>
 				</div>
 			{/if}
+			{#if pickableProperties.hasResume}
+				<span class="font-bold text-sm">Resume payloads</span>
+				<div class="overflow-y-auto mb-2">
+					<ObjectViewer
+						topLevelNode
+						pureViewer={!$propPickerConfig}
+						json={{
+							resume: 'The resume payload',
+							resumes: 'All resume payloads from all approvers'
+						}}
+						on:select={(e) => {
+							dispatch('select', `${e.detail}`)
+						}}
+					/>
+				</div>
+			{/if}
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
 				<span class="font-bold text-sm">All Results</span>
 				<div class="overflow-y-auto mb-2">

package/components/propertyPicker/PropPickerResult.svelte

@@ -1,9 +1,8 @@
-<script>import { createEventDispatcher } from 'svelte';
-import ObjectViewer from './ObjectViewer.svelte';
+<script>import ObjectViewer from './ObjectViewer.svelte';
 export let result;
 </script>
 
-<div class="w-full">
+<div class="w-full px-2">
 	<span class="font-bold text-sm">Result</span>
 	<div class="overflow-y-auto mb-2 w-full">
 		<ObjectViewer json={{ result }} on:select />

package/components/propertyPicker/WarningMessage.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  WarningMessageProps */
 /** @typedef {typeof __propDef.events}  WarningMessageEvents */
 /** @typedef {typeof __propDef.slots}  WarningMessageSlots */
-export default class WarningMessage extends SvelteComponentTyped<{}, {
+export default class WarningMessage extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type WarningMessageEvents = typeof __propDef.events;
 export type WarningMessageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/scriptEditor/LogPanel.svelte

@@ -17,6 +17,7 @@ import HighlightCode from '../HighlightCode.svelte';
 import LogViewer from '../LogViewer.svelte';
 import { Pane } from 'svelte-splitpanes';
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
+import { fade } from 'svelte/transition';
 export let path;
 export let lang;
 export let previewIsLoading = false;
@@ -65,17 +66,23 @@ function closeDrawer() {
 		-->
 		{#if selectedTab === 'logs'}
 			<SplitPanesWrapper horizontal>
-				<Pane class="!duration-[0ms]">
-					<LogViewer content={previewJob?.logs} isLoading={previewIsLoading} />
+				<Pane class="!duration-[0ms] relative">
+					<LogViewer
+						duration={previewJob?.['duration_ms']}
+						content={previewJob?.logs}
+						isLoading={previewIsLoading}
+					/>
 				</Pane>
 				<Pane class="!duration-[0ms]">
 					{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
-						<pre class="overflow-x-auto break-words relative h-full p-2"
+						<pre
+							transition:fade={{ duration: 50 }}
+							class="overflow-x-auto break-words relative h-full p-2"
 							><DisplayResult result={previewJob.result} />
 						</pre>
 					{:else}
 						<div class="text-sm text-gray-600 p-2">
-							{previewIsLoading ? 'Waiting for result...' : 'Test to see the result here'}
+							{previewIsLoading ? '' : 'Test to see the result here'}
 						</div>
 					{/if}
 				</Pane>

package/components/scripts/CreateActionsScript.svelte

@@ -1,75 +1,29 @@
-<script>import { goto } from '$app/navigation';
-import { faPlus, faScroll } from '@fortawesome/free-solid-svg-icons';
-import Fuse from 'fuse.js';
-import { Script } from '../../gen';
-import { ScriptService } from '../../gen';
-import { workspaceStore, hubScripts } from '../../stores';
+<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { ButtonPopup, ButtonPopupItem } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import Icon from 'svelte-awesome';
-const drawers = {
-    template: undefined
-};
-let hubItems;
-let templateScripts = [];
-let templateFilter = '';
-let filteredTemplates;
-const fuseOptions = {
-    includeScore: false,
-    keys: ['description', 'path', 'content', 'hash', 'summary']
-};
-const templateFuse = new Fuse(templateScripts, fuseOptions);
-$: hubItems = $hubScripts?.filter((x) => x.kind == Script.kind.SCRIPT) || [];
-$: filteredTemplates =
-    templateFilter.length > 0
-        ? templateFuse.search(templateFilter).map((value) => value.item)
-        : templateScripts;
-async function loadTemplateScripts() {
-    templateScripts = await ScriptService.listScripts({
-        workspace: $workspaceStore,
-        isTemplate: true
-    });
-    templateFuse.setCollection(templateScripts);
-}
+import WorkspaceScriptPicker from '../flows/pickers/WorkspaceScriptPicker.svelte';
+import { goto } from '$app/navigation';
+import { Code2 } from 'lucide-svelte';
+let drawer = undefined;
 </script>
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/scripts/add">
-		<svelte:fragment slot="main">New Script</svelte:fragment>
-		<ButtonPopupItem on:click={() => drawers.template?.toggleDrawer()}>
+		<svelte:fragment slot="main">New Script <Code2 class="ml-1.5" size={18} /></svelte:fragment>
+		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from template
 		</ButtonPopupItem>
 	</ButtonPopup>
 </div>
 
 <!-- Template script list -->
-<Drawer bind:this={drawers.template} size="800px" on:open={loadTemplateScripts}>
-	<DrawerContent title="Pick a template" on:close={() => drawers.template?.toggleDrawer()}>
-		<div class="pt-2 pb-4">
-			<input placeholder="Search templates" bind:value={templateFilter} class="search-bar" />
-		</div>
-		<div class="flex flex-col mb-2 md:mb-6">
-			{#if filteredTemplates && filteredTemplates.length > 0}
-				{#each filteredTemplates as { summary, path, hash }}
-					<a
-						class="p-1 flex flex-row items-baseline gap-2 selected text-gray-700"
-						href="/scripts/add?template={path}"
-					>
-						{#if summary}
-							<p class="text-sm font-semibold">{summary}</p>
-						{/if}
-
-						<p class="text-sm">{path}</p>
-						<p class="text-gray-400 text-xs text-right grow">
-							Last version: {hash}
-						</p>
-					</a>
-				{/each}
-			{:else}
-				<p class="text-sm text-gray-700">No templates</p>
-			{/if}
-		</div>
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Pick a template" on:close={() => drawer?.toggleDrawer?.()}>
+		<WorkspaceScriptPicker
+			isTemplate
+			on:pick={(e) => goto(`/scripts/add?template=${e.detail.path}`)}
+		/>
 	</DrawerContent>
 </Drawer>

package/components/scripts/CreateActionsScript.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/sidebar/FavoriteMenu.svelte

@@ -0,0 +1,52 @@
+<script>import { classNames } from '../../utils';
+import { faCode, faStar, faTelevision, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import Menu from '../common/menu/Menu.svelte';
+export let isCollapsed = false;
+export let favoriteLinks = [];
+</script>
+
+<Menu placement="bottom-start" let:close noMinW>
+	<button
+		slot="trigger"
+		type="button"
+		class={classNames(
+			'group w-full flex items-center text-white hover:bg-gray-50 hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 px-2 py-2 text-sm font-medium rounded-md h-8 '
+		)}
+	>
+		<Icon
+			data={faStar}
+			class={classNames('flex-shrink-0 h-4 w-4', isCollapsed ? '-mr-1' : 'mr-2')}
+		/>
+
+		{#if !isCollapsed}
+			<span class={classNames('whitespace-pre truncate')}>Favorites</span>
+		{/if}
+	</button>
+
+	<div class="divide-y divide-gray-100  overflow-hidden" role="none">
+		<table class="w-full">
+			{#each favoriteLinks ?? [] as favorite (favorite.href)}
+				<tr>
+					<a href={favorite.href} on:click={close} class="inline-flex flex-row px-4 py-2">
+						<td class="center-center">
+							{#if favorite.kind == 'script'}
+								<Icon data={faCode} />
+							{:else if favorite.kind == 'flow'}
+								<Icon data={faBarsStaggered} />
+							{:else if favorite.kind == 'app'}
+								<Icon data={faTelevision} />
+							{/if}
+						</td>
+						<td class="text-gray-800 ml-2 grow text-xs center-center truncate">{favorite.label}</td>
+					</a>
+				</tr>
+			{/each}
+		</table>
+		<div class="py-1" role="none">
+			<div class="text-gray-600 block px-4 py-2 text-xs" role="menuitem" tabindex="-1">
+				Add Scripts/Flows/Apps here by starring them
+			</div>
+		</div>
+	</div>
+</Menu>

package/components/sidebar/FavoriteMenu.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isCollapsed?: boolean | undefined;
+        favoriteLinks?: {
+            label: string;
+            href: string;
+            kind: 'script' | 'flow' | 'app';
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FavoriteMenuProps = typeof __propDef.props;
+export type FavoriteMenuEvents = typeof __propDef.events;
+export type FavoriteMenuSlots = typeof __propDef.slots;
+export default class FavoriteMenu extends SvelteComponentTyped<FavoriteMenuProps, FavoriteMenuEvents, FavoriteMenuSlots> {
+}
+export {};

package/components/sidebar/SidebarContent.svelte

@@ -1,25 +1,24 @@
-<script>import { faBookOpen, faCalendar, faCubes, faEye, faHomeAlt, faPlay, faRobot, faUsersCog, faWallet, faCog, faStar } from '@fortawesome/free-solid-svg-icons';
+<script>import { faBookOpen, faCalendar, faCubes, faEye, faHomeAlt, faPlay, faRobot, faUsersCog, faCog, faDollarSign } from '@fortawesome/free-solid-svg-icons';
 import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MenuLink from './MenuLink.svelte';
-import { userStore } from '../../stores';
+import { superadmin, userStore } from '../../stores';
 const mainMenuLinks = [
     { label: 'Home', href: '/', icon: faHomeAlt },
     { label: 'Runs', href: '/runs', icon: faPlay },
-    { label: 'Variables', href: '/variables', icon: faWallet },
-    { label: 'Resources', href: '/resources', icon: faCubes }
+    { label: 'Variables', href: '/variables', icon: faDollarSign, disabled: $userStore?.operator },
+    { label: 'Resources', href: '/resources', icon: faCubes, disabled: $userStore?.operator }
 ];
-export let favoriteLinks = [];
 $: secondaryMenuLinks = [
-    { label: 'Schedules', href: '/schedules', icon: faCalendar },
-    { label: 'Groups', href: '/groups', icon: faUsersCog },
-    { label: 'Audit Logs', href: '/audit_logs', icon: faEye },
+    { label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: $userStore?.operator },
+    { label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
+    { label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
     {
         label: 'Workspace',
         href: '/workspace_settings',
         icon: faCog,
-        disabled: !$userStore?.is_admin
+        disabled: !($userStore?.is_admin || $superadmin)
     },
-    { label: 'Workers', href: '/workers', icon: faRobot }
+    { label: 'Workers', href: '/workers', icon: faRobot, disabled: $userStore?.operator }
 ];
 const thirdMenuLinks = [
     { label: 'Docs', href: 'https://docs.windmill.dev/docs/intro/', icon: faBookOpen },
@@ -33,21 +32,13 @@ const thirdMenuLinks = [
 export let isCollapsed = false;
 </script>
 
-<div class="flex-1 flex flex-col py-4 overflow-x-hidden scrollbar-hidden">
+<div class="flex-1 flex flex-col pb-4 overflow-x-hidden scrollbar-hidden">
 	<nav class="h-full flex justify-between flex-col px-2">
 		<div class="space-y-1 pt-4">
 			{#each mainMenuLinks as menuLink (menuLink.href)}
 				<MenuLink class="text-md" {...menuLink} {isCollapsed} />
 			{/each}
 			<div class="h-2" />
-			<div class="max-h-40 overflow-y-auto  max-w-xs truncate">
-				<div class="flex flex-col max-h-min">
-					{#each favoriteLinks as menuLink (menuLink.href)}
-						<MenuLink class="text-xs max-w-xs truncate" {...menuLink} {isCollapsed} icon={faStar} />
-					{/each}
-				</div>
-			</div>
-			<div class="h-2" />
 		</div>
 		<div class="space-1-2">
 			{#each secondaryMenuLinks as menuLink (menuLink.href)}

package/components/sidebar/SidebarContent.svelte.d.ts

@@ -1,10 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        favoriteLinks?: {
-            label: string;
-            href: string;
-        }[] | undefined;
         isCollapsed?: boolean | undefined;
     };
     events: {

package/components/sidebar/UserMenu.svelte

@@ -1,7 +1,7 @@
 <script>import { logout } from '../../logout';
-import { userStore, usersWorkspaceStore, superadmin } from '../../stores';
-import { classNames } from '../../utils';
-import { faCrown, faUser } from '@fortawesome/free-solid-svg-icons';
+import { userStore, usersWorkspaceStore, superadmin, usageStore } from '../../stores';
+import { classNames, isCloudHosted } from '../../utils';
+import { faAngleDoubleDown, faCrown, faHardHat, faPlay, faUser } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import Menu from '../common/menu/Menu.svelte';
@@ -25,8 +25,10 @@ export let isCollapsed = false;
 		{#if !isCollapsed}
 			<span class={classNames('whitespace-pre truncate')}>
 				{$userStore?.username ?? ($superadmin ? $superadmin : '___')}
-				{#if $userStore?.is_admin}
+				{#if $userStore?.is_admin || $superadmin}
 					<Icon data={faCrown} scale={0.6} />
+				{:else if $userStore?.operator}
+					<Icon class="ml-2" data={faHardHat} scale={0.8} />
 				{/if}
 			</span>
 		{/if}
@@ -38,7 +40,15 @@ export let isCollapsed = false;
 			<p class="text-sm font-medium text-gray-900 truncate" role="none">
 				{$usersWorkspaceStore?.email}
 			</p>
+			<span class="text-xs text-gray-600">
+				{#if $userStore?.is_admin}
+					Admin of this workspace <Icon data={faCrown} scale={0.6} />
+				{:else if $userStore?.operator}
+					Operator in this workspace <Icon class="ml-2" data={faHardHat} scale={0.8} />
+				{/if}
+			</span>
 		</div>
+
 		<div class="py-1" role="none">
 			<a
 				on:click={() => dispatch('user-settings')}
@@ -74,5 +84,12 @@ export let isCollapsed = false;
 				Sign out
 			</button>
 		</div>
+		{#if isCloudHosted()}
+			<div class="py-1" role="none">
+				<span class="text-gray-700 block w-full text-left px-4 py-2 text-sm"
+					>{$usageStore}/1000 free-tier executions</span
+				>
+			</div>
+		{/if}
 	</div>
 </Menu>

package/components/sidebar/WorkspaceMenu.svelte

@@ -1,7 +1,7 @@
-<script>import { workspaceStore, usersWorkspaceStore } from '../../stores';
+<script>import { workspaceStore, userWorkspaces } from '../../stores';
 import { classNames } from '../../utils';
-import { faBuilding } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
+import { Building } from 'lucide-svelte';
 import Menu from '../common/menu/Menu.svelte';
 export let isCollapsed = false;
 </script>
@@ -14,10 +14,9 @@ export let isCollapsed = false;
 			'group w-full flex items-center text-white hover:bg-gray-50 hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-300 px-2 py-2 text-sm font-medium rounded-md h-8 '
 		)}
 	>
-		<Icon
-			data={faBuilding}
-			class={classNames('flex-shrink-0 h-4 w-4', isCollapsed ? '-mr-1' : 'mr-2')}
-		/>
+		<div class="center-center mr-2">
+			<Building size={16} />
+		</div>
 
 		{#if !isCollapsed}
 			<span class={classNames('whitespace-pre truncate')}> {$workspaceStore} </span>
@@ -26,7 +25,7 @@ export let isCollapsed = false;
 
 	<div class="divide-y divide-gray-100" role="none">
 		<table class="w-full">
-			{#each $usersWorkspaceStore?.workspaces ?? [] as workspace}
+			{#each $userWorkspaces as workspace}
 				<tr
 					class="text-xs cursor-pointer"
 					on:click={() => {

package/editorUtils.d.ts

@@ -19,6 +19,8 @@ export declare function editorConfig(model: any, code: string, lang: string, aut
     lightbulb: {
         enabled: boolean;
     };
+    'bracketPairColorization.enabled': boolean;
+    matchBrackets: "always";
 };
 export declare function createHash(): string;
 export declare function langToExt(lang: string): string;

package/editorUtils.js

@@ -19,7 +19,9 @@ export function editorConfig(model, code, lang, automaticLayout, fixedOverflowWi
         },
         lightbulb: {
             enabled: true
-        }
+        },
+        'bracketPairColorization.enabled': true,
+        matchBrackets: 'always',
     };
 }
 export function createHash() {