UX nits

frontend/src/lib/components/apps/CreateApp.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { faDashboard, faPlus } from '@fortawesome/free-solid-svg-icons'
 	import { AppService, Policy } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/utils'
@@ -12,6 +12,7 @@
 	import type { App } from '$lib/components/apps/types'
 	import { goto } from '$app/navigation'
 	import Path from '$lib/components/Path.svelte'
+	import { LayoutDashboard } from 'lucide-svelte'
 
 	let drawerOpen = false
 
@@ -69,5 +70,5 @@
 	startIcon={{ icon: faPlus }}
 	on:click={() => (drawerOpen = true)}
 >
-	New app
+	New App (alpha) <LayoutDashboard class="ml-1.5" size={18} />
 </Button>

frontend/src/lib/components/common/table/RowIcon.svelte

@@ -21,12 +21,12 @@
 
 <div class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
 	{#if kind === 'flow'}
-		<span class="ml-1.5 mb-0.5 -mt-0.5">
-			<Icon data={faBarsStaggered} scale={1.2} class="mr-1 text-[#14b8a6]" />
+		<span class="ml-1 mb-0.5 -mt-0.5">
+			<Icon data={faBarsStaggered} scale={1.1} class="mr-0.5 text-[#14b8a6]" />
 		</span>
 	{:else if kind === 'app'}
-		<LayoutDashboard size={26} color={iconColor} />
+		<LayoutDashboard size={24} color={iconColor} />
 	{:else if kind === 'script'}
-		<Code2 size={26} color={iconColor} />
+		<Code2 size={24} color={iconColor} />
 	{/if}
 </div>

frontend/src/lib/components/flows/CreateActionsFlow.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import { faPlus } from '@fortawesome/free-solid-svg-icons'
+	import { faBarsStaggered, faPlus } from '@fortawesome/free-solid-svg-icons'
 
 	import { Button, ButtonPopup, ButtonPopupItem } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { flowStore, initFlow } from '$lib/components/flows/flowStore'
+	import { Icon } from 'svelte-awesome'
 
 	let drawer: Drawer | undefined = undefined
 	let pendingJson: string
@@ -23,7 +24,9 @@
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<ButtonPopup size="sm" spacingSize="xl" startIcon={{ icon: faPlus }} href="/flows/add">
-		<svelte:fragment slot="main">New Flow</svelte:fragment>
+		<svelte:fragment slot="main"
+			>New Flow <Icon data={faBarsStaggered} scale={0.8} class="ml-1.5" />
+		</svelte:fragment>
 		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from raw JSON
 		</ButtonPopupItem>

frontend/src/lib/components/scripts/CreateActionsScript.svelte

@@ -5,6 +5,7 @@
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import WorkspaceScriptPicker from '../flows/pickers/WorkspaceScriptPicker.svelte'
 	import { goto } from '$app/navigation'
+	import { Code2 } from 'lucide-svelte'
 
 	let drawer: Drawer | undefined = undefined
 </script>
@@ -12,7 +13,7 @@
 <!-- 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>
+		<svelte:fragment slot="main">New Script <Code2 class="ml-1.5" size={18} /></svelte:fragment>
 		<ButtonPopupItem on:click={() => drawer?.toggleDrawer?.()}>
 			Import from template
 		</ButtonPopupItem>