readme: nits and toc

Author: rubenfiszel

README.md

@@ -47,6 +47,7 @@ Windmill Labs offers commercial licenses, an enterprise edition, local hub mirro
 <b>Disclaimer: </b>Windmill is in <b>BETA</b>. It is secure to run in production but we are still <a href="https://github.com/orgs/windmill-labs/projects/2">improving the product fast<a/>.
 </p>
 
+![Windmill Screenshot](./imgs/windmill-flow.png)
 ![Windmill Screenshot](./imgs/windmill.png)
 
 Windmill is <b>fully open-sourced (AGPLv3)</b>:
@@ -80,31 +81,21 @@ Windmill is <b>fully open-sourced (AGPLv3)</b>:
 1. Define a minimal and generic script in Python, Typescript, Go or Bash that solves a
    specific task. Here sending an email with SMTP. The code can be defined in
    the provided Web IDE or synchronized with your own github repo:
-   ![Step 1](./imgs/python-script.png)
+   ![Step 1](./imgs/windmill-editor.png)
 
-2. Your scripts parameters are automatically parsed and generate a frontend. You
-   can narrow down the types during task definition to specify regex for string,
-   an enum or a specific format for objects. Each script correspond to an app by
-   itself: ![Step 2](./imgs/arguments.png)
+2. Your scripts parameters are automatically parsed and generate a frontend. 
+   ![Step 2](./imgs/windmill-run.png)
+   ![Step 3](./imgs/windmill-result.png)
 
 3. Make it flow! You can chain your scripts or scripts made by the community
-   shared on [WindmillHub](https://hub.windmill.dev). There is tight integration
-   between Windmill and the hub to make it easy to build flows from a soon-to-be
-   exhaustive library of generic modules. In flows, one can pipe output to input
-   using rich expressions that are just plain Javascript underneath. Flows
-   support for-loops, branching, approval steps. As such and coupled with
-   inputs being able to refer to any step's output, they are actual DAG rather
-   than just linear sequences. They are backed by an open JSON spec we call
-   [OpenFlow](https://docs.windmill.dev/docs/openflow)
-
-Both scripts and flows are not restricted to be triggered by the UI. They can be
-triggered by a schedule, watch for changes (using
-[internal states](https://docs.windmill.dev/docs/reference#internal-state)) or
-triggered through API with either an async or sync webhook. The latter kind of
-endpoints make Windmill akin to a self-hostable AWS Lambda. Windmill can be the
-central place to host, build and run all of your integrations, automation and
-internal apps. We include credentials management and OAuth integration, groups
-and much more!
+   shared on [WindmillHub](https://hub.windmill.dev). 
+  ![Step 4](./imgs/windmill-flow.png)
+
+4. (Coming soon) Build complex UI on top of your scripts and flows. 
+
+Scripts and flows can also be triggered by a cron schedule '*/5 * * * *' or through webhooks.
+
+You can build your entire infra on top of Windmill!
 
 ## CLI
 

backend/windmill-api/src/apps.rs

@@ -127,8 +127,8 @@ async fn list_apps(
     let sqlb = SqlBuilder::select_from("app")
         .fields(&[
             "id",
-            "workspace_id",
-            "path",
+            "app.workspace_id",
+            "app.path",
             "summary",
             "versions[array_upper(versions, 1)] as version",
             "policy->>'execution_mode' as execution_mode",
@@ -138,7 +138,7 @@ async fn list_apps(
         .left()
         .join("favorite")
         .on(
-            "favorite.favorite_kind = 'app' AND favorite.workspace_id = o.workspace_id AND favorite.path = o.path AND favorite.usr = ?"
+            "favorite.favorite_kind = 'app' AND favorite.workspace_id = app.workspace_id AND favorite.path = app.path AND favorite.usr = ?"
                 .bind(&authed.username),
         )
         .order_desc("favorite.path IS NOT NULL")

frontend/src/lib/components/flows/map/FlowBranchAllMap.svelte

@@ -64,7 +64,7 @@
 								: ''
 						)}
 					>
-						<Icon data={faCodeBranch} class="mr-2" />
+						<Icon data={faCodeBranch} scale={1.1} class="mr-2" />
 						<span
 							class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
 						>

frontend/src/lib/components/flows/map/FlowBranchOneMap.svelte

@@ -61,7 +61,7 @@
 						: ''
 				)}
 			>
-				<Icon data={faCodeBranch} class="mr-2" />
+				<Icon data={faCodeBranch} scale={1.1} class="mr-2" />
 				<span
 					class="truncate text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center"
 				>
@@ -87,7 +87,7 @@
 								: ''
 						)}
 					>
-						<Icon data={faCodeBranch} class="mr-2" />
+						<Icon data={faCodeBranch} scale={1.1} class="mr-2" />
 						<span
 							class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
 						>

frontend/src/lib/components/flows/map/MapItem.svelte

@@ -8,6 +8,7 @@
 	import FlowBranchOneMap from './FlowBranchOneMap.svelte'
 	import FlowBranchAllMap from './FlowBranchAllMap.svelte'
 	import {
+		faArrowRotateForward,
 		faBuilding,
 		faCode,
 		faCodeBranch,
@@ -16,6 +17,7 @@
 	} from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
+	import LanguageIcon from '$lib/components/common/languageIcons/LanguageIcon.svelte'
 
 	export let mod: FlowModule
 
@@ -51,7 +53,7 @@
 				{...itemProps}
 			>
 				<div slot="icon">
-					<Icon data={faRepeat} scale={0.8} />
+					<Icon data={faArrowRotateForward} scale={1.1} />
 				</div>
 			</FlowModuleSchemaItem>
 			<div class="flex flex-row w-full">
@@ -74,7 +76,7 @@
 				label={mod.summary || 'Run one branch'}
 			>
 				<div slot="icon">
-					<Icon data={faCodeBranch} scale={0.8} />
+					<Icon data={faCodeBranch} scale={1} />
 				</div>
 			</FlowModuleSchemaItem>
 			<FlowBranchOneMap bind:module={mod} />
@@ -90,7 +92,7 @@
 				label={mod.summary || 'Run all branches'}
 			>
 				<div slot="icon">
-					<Icon data={faCodeBranch} scale={0.8} />
+					<Icon data={faCodeBranch} scale={1} />
 				</div>
 			</FlowModuleSchemaItem>
 			<FlowBranchAllMap bind:module={mod} />
@@ -109,14 +111,16 @@
 			>
 				<div slot="icon">
 					{#if mod.value.type === 'rawscript'}
-						<Icon data={faCode} scale={0.8} />
+						<LanguageIcon lang={mod.value.language} width={16} height={16} />
 					{:else if mod.value.type === 'identity'}
-						<Icon data={faLongArrowDown} scale={0.8} />
+						<Icon data={faLongArrowDown} scale={1.1} />
 					{:else if mod.value.type === 'script'}
 						{#if mod.value.path.startsWith('hub/')}
-							<IconedResourceType name={mod.value.path.split('/')[2]} silent={true} />
+							<div class="w-5">
+								<IconedResourceType name={mod.value.path.split('/')[2]} silent={true} />
+							</div>
 						{:else}
-							<Icon data={faBuilding} scale={0.8} />
+							<Icon data={faBuilding} scale={1.1} />
 						{/if}
 					{/if}
 				</div>

frontend/src/lib/components/sidebar/MenuLink.svelte

@@ -46,7 +46,7 @@
 		{#if !isCollapsed}
 			<span
 				class={classNames(
-					'whitespace-pre text-white',
+					'whitespace-pre text-white truncate',
 					isSelected ? ' text-gray-700 font-bold' : 'text-white group-hover:text-gray-900'
 				)}
 			>

frontend/src/lib/components/sidebar/SidebarContent.svelte

@@ -59,10 +59,12 @@
 				<MenuLink class="text-lg" {...menuLink} {isCollapsed} />
 			{/each}
 			<div class="h-2" />
-			<div class="max-h-40 overflow-y-auto flex flex-col space-y-1.5 max-w-xs">
-				{#each favoriteLinks as menuLink (menuLink.href)}
-					<MenuLink class="text-xs max-w-xs truncate" {...menuLink} {isCollapsed} icon={faStar} />
-				{/each}
+			<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>