feat(frontend): Small UI fixes (#1026)

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -54,7 +54,7 @@
 
 <div class="border-b flex flex-row justify-between py-1 px-4 items-center">
 	<input class="text-sm w-64" bind:value={title} />
-	<div class="flex gap-2">
+	<div class="flex gap-4 items-center">
 		<div>
 			<ToggleButtonGroup bind:selected={mode}>
 				<ToggleButton position="left" value="dnd" startIcon={{ icon: faHand }} size="xs">
@@ -67,12 +67,20 @@
 		</div>
 		<div>
 			<ToggleButtonGroup bind:selected={breakpoint}>
-				<ToggleButton position="left" value="sm" startIcon={{ icon: faMobileAlt }} size="xs">
-					Mobile
-				</ToggleButton>
-				<ToggleButton position="right" value="lg" startIcon={{ icon: faDesktopAlt }} size="xs">
-					Desktop
-				</ToggleButton>
+				<ToggleButton
+					position="left"
+					value="sm"
+					startIcon={{ icon: faMobileAlt }}
+					size="xs"
+					iconOnly
+				/>
+				<ToggleButton
+					position="right"
+					value="lg"
+					startIcon={{ icon: faDesktopAlt }}
+					size="xs"
+					iconOnly
+				/>
 			</ToggleButtonGroup>
 		</div>
 	</div>

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -61,14 +61,18 @@
 	let scriptCreationDrawer: Drawer | undefined = undefined
 
 	$: selectedScriptName = undefined as string | undefined
-	$: scriptsUsedByComponents = new Map<string, string[]>()
+	$: scriptsUsedByComponents = new Map<string, string>()
 	$: {
 		scriptsUsedByComponents.clear()
 
 		$app.grid
-			.filter((gridComponent) => gridComponent.data.type !== 'runnable')
+			.filter((gridComponent) => gridComponent)
 			.forEach((gridComponent) => {
-				if (gridComponent.data.componentInput.runnable !== undefined) {
+				if (
+					gridComponent.data?.componentInput?.type === 'runnable' &&
+					gridComponent.data.componentInput.runnable !== undefined &&
+					gridComponent.data.componentInput.runnable.type === 'runnableByName'
+				) {
 					scriptsUsedByComponents.set(
 						gridComponent.data.componentInput.runnable.inlineScriptName,
 						gridComponent.data.id

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -34,7 +34,7 @@
 	import gridHelp from 'svelte-grid/build/helper/index.mjs'
 	import { gridColumns } from '../../gridUtils'
 	import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte'
-	import { faEdge } from '@fortawesome/free-brands-svg-icons'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	export let component: AppComponent | undefined
 	export let onDelete: (() => void) | undefined = undefined
@@ -186,12 +186,12 @@
 								Object.keys(component.componentInput.fields ?? {}).length
 							})`}
 						>
-							{#if component.type === 'buttoncomponent'}
-								<Alert title="Button inputs" type="info" size="xs">
+							<svelte:fragment slot="action">
+								<Tooltip>
 									The runnable inputs of a button component are not settable by the user. They must
 									be defined statically or connected.
-								</Alert>
-							{/if}
+								</Tooltip>
+							</svelte:fragment>
 
 							<InputsSpecsEditor
 								bind:inputSpecs={component.componentInput.fields}
@@ -215,21 +215,7 @@
 
 		{#if component.verticalAlignment !== undefined}
 			<PanelSection title="Alignment">
-				<svelte:fragment slot="action">
-					<Button
-						size="xs"
-						on:click={() => {
-							if (component) {
-								component.verticalAlignment = 'center'
-								component.horizontalAlignment = 'center'
-							}
-						}}
-						startIcon={{ icon: faMinimize }}
-					>
-						Center
-					</Button>
-				</svelte:fragment>
-				<div class="w-full text-xs font-semibold">Horizontal alignment</div>
+				<div class="w-full text-xs font-semibold">Horizontal</div>
 
 				<div class="w-full">
 					<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
@@ -245,7 +231,7 @@
 					</ToggleButtonGroup>
 				</div>
 				{#if component.type !== 'formcomponent'}
-					<div class="w-full text-xs font-semibold">Vertical alignment</div>
+					<div class="w-full text-xs font-semibold">Vertical</div>
 					<div class="w-full">
 						<ToggleButtonGroup bind:selected={component.verticalAlignment}>
 							<ToggleButton position="left" value="top" size="xs">

frontend/src/lib/components/apps/editor/settingsPanel/Recompute.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <PanelSection title="Recompute">
-	{#if Object.keys($runnableComponents ?? {}).length > 0}
+	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">
 				<tr>
@@ -50,6 +50,6 @@
 			</tbody>
 		</table>
 	{:else}
-		<div class="text-xs">No components to recompute</div>
+		<div class="text-xs">No components to recompute. Create one and select it here.</div>
 	{/if}
 </PanelSection>

frontend/src/lib/components/apps/utils.ts

@@ -14,7 +14,7 @@ import {
 	Table2,
 	TextCursorInput,
 	Type,
-	FolderInput
+	ToggleLeft
 } from 'lucide-svelte'
 import type { AppInputs, InputType } from './inputType'
 import type { AppComponent } from './types'
@@ -79,7 +79,7 @@ export const displayData: Record<AppComponent['type'], { name: string; icon: any
 	},
 	formcomponent: {
 		name: 'Form',
-		icon: FolderInput
+		icon: FormInput
 	},
 	piechartcomponent: {
 		name: 'Pie chart',
@@ -94,8 +94,8 @@ export const displayData: Record<AppComponent['type'], { name: string; icon: any
 		icon: Table2
 	},
 	checkboxcomponent: {
-		name: 'Checkbox',
-		icon: BoxSelect
+		name: 'Toggle',
+		icon: ToggleLeft
 	},
 	textinputcomponent: {
 		name: 'Text input',