From 2b4b0cdc7471d55e2dafaf059bd049fe59e2a43d Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 11 Nov 2023 10:37:18 +0100
Subject: [PATCH] UX improvements

---
 frontend/src/lib/assets/app.css               | 11 ----
 frontend/src/lib/components/ArgInput.svelte   | 31 ++++++---
 .../lib/components/LightweightArgInput.svelte | 13 ++++
 .../src/lib/components/SavedInputs.svelte     | 10 +--
 .../src/lib/components/ScriptBuilder.svelte   |  1 -
 .../(logged)/flows/get/[...path]/+page.svelte | 44 +++++++------
 .../scripts/get/[...hash]/+page.svelte        | 63 ++++++++++---------
 7 files changed, 99 insertions(+), 74 deletions(-)

diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css
index 6331726058..fc0fd9c788 100644
--- a/frontend/src/lib/assets/app.css
+++ b/frontend/src/lib/assets/app.css
@@ -10,17 +10,6 @@
 		@apply dark:border-gray-600;
 	}
 
-	input::-webkit-outer-spin-button,
-	input::-webkit-inner-spin-button {
-		-webkit-appearance: none !important;
-		margin: 0;
-	}
-
-	/* Firefox */
-	input[type='number'] {
-		-moz-appearance: textfield !important;
-	}
-
 	@font-face {
 		font-family: 'Inter';
 		src: url('/Inter-Variable.ttf');
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 56aaa6ace9..8cad901f44 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -425,13 +425,17 @@
 					/>
 				</div>
 			{:else if inputCat == 'base64'}
-				<input
-					{autofocus}
-					type="file"
-					class="my-6"
-					on:change={(x) => fileChanged(x, (val) => (value = val))}
-					multiple={false}
-				/>
+				<div class="flex flex-col my-6 w-full">
+					<input
+						{autofocus}
+						type="file"
+						on:change={(x) => fileChanged(x, (val) => (value = val))}
+						multiple={false}
+					/>
+					{#if value?.length}
+						<div class="text-2xs text-tertiary mt-1">File length: {value.length} base64 chars</div>
+					{/if}
+				</div>
 			{:else if inputCat == 'resource-string'}
 				<ResourcePicker
 					{disablePortal}
@@ -510,3 +514,16 @@
 		{/if}
 	</div>
 </div>
+
+<style>
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none !important;
+		margin: 0;
+	}
+
+	/* Firefox */
+	input[type='number'] {
+		-moz-appearance: textfield !important;
+	}
+</style>
diff --git a/frontend/src/lib/components/LightweightArgInput.svelte b/frontend/src/lib/components/LightweightArgInput.svelte
index 6ff4cefcd1..0458c6cf40 100644
--- a/frontend/src/lib/components/LightweightArgInput.svelte
+++ b/frontend/src/lib/components/LightweightArgInput.svelte
@@ -362,3 +362,16 @@
 		{/if}
 	</div>
 </div>
+
+<style>
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none !important;
+		margin: 0;
+	}
+
+	/* Firefox */
+	input[type='number'] {
+		-moz-appearance: textfield !important;
+	}
+</style>
diff --git a/frontend/src/lib/components/SavedInputs.svelte b/frontend/src/lib/components/SavedInputs.svelte
index ea3f936ce6..666a98053c 100644
--- a/frontend/src/lib/components/SavedInputs.svelte
+++ b/frontend/src/lib/components/SavedInputs.svelte
@@ -145,7 +145,7 @@
 		<Pane>
 			<div class="w-full flex flex-col gap-4 p-2">
 				<div class="w-full flex justify-between items-center gap-4 flex-wrap">
-					<span class="text-sm font-extrabold flex-shrink-0"
+					<span class="text-sm font-semibold flex-shrink-0"
 						>Saved Inputs <Tooltip
 							>Shared inputs are available to anyone with access to the script</Tooltip
 						></span
@@ -260,7 +260,7 @@
 
 		<Pane>
 			<div class="w-full flex flex-col gap-4 p-2">
-				<span class="text-sm font-extrabold">Previous runs</span>
+				<span class="text-sm font-semibold">Previous runs</span>
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
 					{#if previousInputs.length > 0}
@@ -288,7 +288,7 @@
 										{i.created_by}
 									</div>
 									<div
-										class="whitespace-nowrap col-span-3 font-normal overflow-hidden text-ellipsis flex-shrink text-center"
+										class="whitespace-nowrap col-span-3 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
 										<TimeAgo date={i.created_at ?? ''} />
 									</div>
@@ -315,7 +315,7 @@
 		<Pane>
 			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
 				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
-					<div class="text-sm font-extrabold">Preview</div>
+					<div class="text-sm font-semibold">Preview</div>
 					<div class="w-full flex flex-col">
 						<Button
 							color="blue"
@@ -331,7 +331,7 @@
 					</div>
 					<div class="w-full min-h-0 grow overflow-auto">
 						{#if Object.keys(selectedInput?.args || {}).length > 0}
-							<div class="border overflow-auto h-full p-2">
+							<div class=" overflow-auto h-full p-2">
 								<ObjectViewer json={selectedInput?.args} />
 							</div>
 						{:else}
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 4ab2803ee5..b3468d1141 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -30,7 +30,6 @@
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
 	import ErrorHandlerToggleButton from '$lib/components/details/ErrorHandlerToggleButton.svelte'
 	import {
-		AlertTriangle,
 		Bug,
 		CheckCircle,
 		Code,
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index df7d65c074..030fd53380 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -288,32 +288,21 @@
 				<Splitpanes horizontal>
 					<Pane size={60} minSize={20}>
 						<div class="p-8 w-full max-w-3xl mx-auto gap-2 bg-surface">
-							<div class="flex flex-col gap-0.5">
-								{#if !emptyString(flow.summary)}
-									<span class="text-lg font-semibold">{flow.path}</span>
-								{/if}
-								<span class="text-sm text-tertiary">
-									Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
-								</span>
-
-								{#if deploymentInProgress}
-									<Badge color="yellow">
-										<Loader2 size={12} class="inline animate-spin mr-1" />
-										Deployment in progress
-									</Badge>
-								{/if}
-								{#if flow.archived}
-									<div class="" />
-									<Alert type="error" title="Archived">This flow was archived</Alert>
-								{/if}
-
+							<div class="flex flex-col gap-2">
 								{#if !emptyString(flow.description)}
-									<div class=" break-words whitespace-pre-wrap text-sm">
+									<div class=" break-words whitespace-pre-wrap text-sm mb-4 !text-secondary">
 										<Urlize text={defaultIfEmptyString(flow.description, 'No description')} />
 									</div>
 								{/if}
 							</div>
 
+							{#if deploymentInProgress}
+								<Badge color="yellow">
+									<Loader2 size={12} class="inline animate-spin mr-1" />
+									Deployment in progress
+								</Badge>
+							{/if}
+
 							<RunForm
 								viewKeybinding
 								{loading}
@@ -326,6 +315,21 @@
 								isFlow
 								bind:this={runForm}
 							/>
+							{#if !emptyString(flow.summary)}
+								<div class="mb-2">
+									<span class="!text-tertiary">{flow.path}</span>
+								</div>
+							{/if}
+							<div class="flex flex-row gap-x-2 flex-wrap items-center">
+								<span class="text-sm text-tertiary">
+									Edited <TimeAgo date={flow.edited_at ?? ''} /> by {flow.edited_by}
+								</span>
+
+								{#if flow.archived}
+									<div class="" />
+									<Alert type="error" title="Archived">This flow was archived</Alert>
+								{/if}
+							</div>
 						</div>
 					</Pane>
 					<Pane size={40} minSize={20}>
diff --git a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
index c12355bdd9..5d8c4b5e40 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte
@@ -437,7 +437,7 @@
 		</svelte:fragment>
 		<svelte:fragment slot="form">
 			<div class="p-8 w-full max-w-3xl mx-auto">
-				<div class="flex flex-col gap-0.5 mb-8">
+				<div class="flex flex-col gap-0.5 mb-4">
 					{#if script.lock_error_logs || topHash || script.archived || script.deleted}
 						<div class="flex flex-col gap-2 my-2">
 							{#if script.lock_error_logs}
@@ -471,41 +471,20 @@
 						</div>
 					{/if}
 
-					{#if !emptyString(script.summary)}
-						<span class="text-lg font-semibold">{script.path}</span>
-					{/if}
-
-					<div class="flex flex-row gap-x-2 flex-wrap items-center mt-2">
-						<span class="text-sm text-secondary">
-							Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by || 'unknown'}
-						</span>
-						<Badge small color="gray">
-							{truncateHash(script?.hash ?? '')}
-						</Badge>
-						{#if script?.is_template}
-							<Badge color="blue">Template</Badge>
-						{/if}
-						{#if script && script.kind !== 'script'}
-							<Badge color="blue">
-								{script?.kind}
-							</Badge>
-						{/if}
-						{#if deploymentInProgress}
-							<Badge color="yellow">
-								<Loader2 size={12} class="inline animate-spin mr-1" />
-								Deployment in progress
-							</Badge>
-						{/if}
-						<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
-					</div>
-
 					{#if !emptyString(script.description)}
-						<div class="border p-2">
+						<div class="py-2 !text-secondary">
 							<Urlize text={defaultIfEmptyString(script.description, 'No description')} />
 						</div>
 					{/if}
 				</div>
 
+				{#if deploymentInProgress}
+					<Badge color="yellow">
+						<Loader2 size={12} class="inline animate-spin mr-1" />
+						Deployment in progress
+					</Badge>
+				{/if}
+
 				<RunForm
 					viewKeybinding
 					loading={runLoading}
@@ -519,6 +498,30 @@
 					isFlow={false}
 					bind:this={runForm}
 				/>
+
+				{#if !emptyString(script.summary)}
+					<div class="mb-2">
+						<span class="!text-tertiary">{script.path}</span>
+					</div>
+				{/if}
+				<div class="flex flex-row gap-x-2 flex-wrap items-center">
+					<span class="text-sm text-tertiary">
+						Edited <TimeAgo date={script.created_at || ''} /> by {script.created_by || 'unknown'}
+					</span>
+					<Badge small color="gray">
+						{truncateHash(script?.hash ?? '')}
+					</Badge>
+					{#if script?.is_template}
+						<Badge color="blue">Template</Badge>
+					{/if}
+					{#if script && script.kind !== 'script'}
+						<Badge color="blue">
+							{script?.kind}
+						</Badge>
+					{/if}
+
+					<SharedBadge canWrite={can_write} extraPerms={script?.extra_perms ?? {}} />
+				</div>
 			</div>
 		</svelte:fragment>
 		<svelte:fragment slot="save_inputs">