From e8aafce789d5b5905fe1f3d4c5098e045f42e80a Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 27 Mar 2023 11:50:40 +0200
Subject: [PATCH] fix(frontend): Small app fixes (#1331)

* fix(frontend): wip

* fix(frontend): wip

* fix(frontend): merge main

* fix(frontend): fix build

* fix(frontend): revert css

* fix(frontend): fix alignement + remove id from  if deleted

* fix(frontend): fix connection height

* fix(frontend): done
---
 .../lib/components/apps/editor/AppEditor.svelte |  2 +-
 .../components/apps/editor/AppPreview.svelte    |  1 -
 .../components/apps/editor/GridEditor.svelte    |  4 ++--
 .../components/apps/editor/GridViewer.svelte    |  1 -
 .../components/apps/editor/SettingsPanel.svelte |  3 +--
 .../apps/editor/component/Component.svelte      |  4 +++-
 .../apps/editor/componentsPanel/store.ts        |  9 ++++-----
 .../editor/contextPanel/ContextPanel.svelte     | 10 +++++-----
 .../inlineScriptsPanel/EmptyInlineScript.svelte | 11 ++---------
 .../InlineScriptEditor.svelte                   | 17 ++++++++---------
 .../InlineScriptEditorDrawer.svelte             |  1 -
 .../InlineScriptEditorPanel.svelte              |  7 ++++---
 .../InlineScriptsPanel.svelte                   |  1 -
 .../InlineScriptsPanelWithTable.svelte          |  3 ++-
 .../settingsPanel/ArrayStaticInputEditor.svelte |  4 ++--
 .../editor/settingsPanel/ComponentPanel.svelte  |  8 +++++++-
 .../apps/editor/settingsPanel/GridTab.svelte    |  3 +--
 .../settingsPanel/SelectedRunnable.svelte       |  3 +--
 .../inputEditor/EvalInputEditor.svelte          |  7 +++++--
 .../inputEditor/IconSelectInput.svelte          |  7 ++++---
 frontend/src/lib/components/apps/rx.ts          |  4 ++--
 .../src/lib/components/flows/map/MapItem.svelte |  6 +++---
 22 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 68460c3de6..5f6fb69103 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -243,7 +243,7 @@
 											{#if $appStore.grid}
 												<ComponentNavigation />
 
-												<div on:pointerdown|stopPropagation class={width}>
+												<div on:pointerdown|stopPropagation class={twMerge(width, 'mx-auto')}>
 													<GridEditor {policy} />
 												</div>
 
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index 136d3ba6ae..ec490b983c 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -4,7 +4,6 @@
 	import { buildWorld } from '../rx'
 	import type {
 		App,
-		AppEditorContext,
 		AppViewerContext,
 		ConnectingInput,
 		EditorBreakpoint,
diff --git a/frontend/src/lib/components/apps/editor/GridEditor.svelte b/frontend/src/lib/components/apps/editor/GridEditor.svelte
index 4eda481dc1..b904f2af3e 100644
--- a/frontend/src/lib/components/apps/editor/GridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getContext, afterUpdate } from 'svelte'
-	import type { App, AppEditorContext, AppViewerContext } from '../types'
+	import { getContext } from 'svelte'
+	import type { AppEditorContext, AppViewerContext } from '../types'
 	import { classNames } from '$lib/utils'
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
 	import { twMerge } from 'tailwind-merge'
diff --git a/frontend/src/lib/components/apps/editor/GridViewer.svelte b/frontend/src/lib/components/apps/editor/GridViewer.svelte
index c8c38c994f..3f5a2fdd0d 100644
--- a/frontend/src/lib/components/apps/editor/GridViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/GridViewer.svelte
@@ -22,7 +22,6 @@
 	export let parentWidth: number | undefined = undefined
 
 	let getComputedCols
-
 	let container
 
 	$: [gapX, gapY] = gap
diff --git a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
index 0efb739c1b..ae516facf1 100644
--- a/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/SettingsPanel.svelte
@@ -17,7 +17,6 @@
 		.find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`))
 
 	$: componentSettings = findComponentSettings($app, $selectedComponent?.[0])
-
 	$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0])
 
 	function findTableActionSettings(app: App, id: string | undefined) {
@@ -36,7 +35,7 @@
 	}
 
 	function findComponentSettings(app: App, id: string | undefined) {
-		if (!id) return
+		if (!id) return undefined
 		if (app?.grid) {
 			const gridItem = app.grid.find((x) => x.data?.id === id)
 			if (gridItem) {
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 9236478bd3..6aae1c50ca 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -92,8 +92,10 @@
 				class="border p-0.5 text-xs"
 				on:click={() => {
 					$movingcomponents = undefined
-				}}>Cancel move</button
+				}}
 			>
+				Cancel move
+			</button>
 		</div>
 	{/if}
 	<div
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/store.ts b/frontend/src/lib/components/apps/editor/componentsPanel/store.ts
index 05274010a9..84fbeef5e4 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/store.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/store.ts
@@ -1,4 +1,4 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store'
 
 const store = writable<IsOpenStoreItem>({})
 
@@ -10,12 +10,11 @@ export const isOpenStore = {
 	/** If an item is already set, it won't get updated. */
 	addItems: (items: IsOpenStoreItem[]) => {
 		let newItems = {}
-		items.forEach(item => newItems = { ...newItems, ...item })
-		store.update(last => ({ ...newItems, ...last }))
-
+		items.forEach((item) => (newItems = { ...newItems, ...item }))
+		store.update((last) => ({ ...newItems, ...last }))
 	},
 	toggle: (id: string) => {
-		store.update(last => ({ ...last, [id]: !last[id] }))
+		store.update((last) => ({ ...last, [id]: !last[id] }))
 	},
 	reset: () => store.set({})
 }
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
index 9409346e48..3e337949ae 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ContextPanel.svelte
@@ -11,7 +11,7 @@
 	import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte'
 	import OutputHeader from './components/OutputHeader.svelte'
 
-	const { connectingInput, app, allIdsInPath } = getContext<AppViewerContext>('AppViewerContext')
+	const { connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let search = writable<string>('')
 
@@ -22,11 +22,11 @@
 	})
 </script>
 
-<PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
-	<div class="bg-white w-full h-full z-30">
+<PanelSection noPadding titlePadding="px-1.5 pt-2" title="Outputs">
+	<div class="bg-white h-auto w-full z-30 ">
 		<div class="min-w-[150px]">
-			<div class="sticky z-10 top-0 left-0 w-full bg-white p-2">
-				<div class="relative">
+			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
+				<div class="relative w-full">
 					<input
 						bind:value={$search}
 						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index af32468fd5..78d0ad2a43 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -12,20 +12,19 @@
 	import { Building, Globe2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { fly } from 'svelte/transition'
-	import type { AppEditorContext, AppViewerContext } from '../../types'
+	import type { AppViewerContext } from '../../types'
 	import { defaultCode } from '../component'
 	import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte'
 	import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte'
 
 	export let name: string
-	export let id: string
+	export let componentType: string | undefined = undefined
 
 	let tab = 'inlinescripts'
 	let filter: string = ''
 	let picker: Drawer
 
 	const { appPath, app } = getContext<AppViewerContext>('AppViewerContext')
-
 	const dispatch = createEventDispatcher()
 
 	async function inferInlineScriptSchema(
@@ -47,8 +46,6 @@
 		path: string,
 		subkind: 'pgsql' | 'mysql' | undefined = undefined
 	) {
-		const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type
-
 		const content =
 			defaultCode(componentType ?? '', language) ??
 			initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow')
@@ -93,10 +90,6 @@
 	}
 
 	const langs = ['deno', 'python3', 'go', 'bash'] as Script.language[]
-
-	function loadSchemaFromTriggerable(path: string, arg1: string) {
-		throw new Error('Function not implemented.')
-	}
 </script>
 
 <Drawer bind:this={picker} size="1000px">
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index de8de910e5..082914389e 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -9,7 +9,7 @@
 	import type { Schema } from '$lib/common'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
 	import Editor from '$lib/components/Editor.svelte'
-	import { emptySchema, scriptLangToEditorLang } from '$lib/utils'
+	import { emptySchema, isMac, scriptLangToEditorLang } from '$lib/utils'
 	import Popover from '../../../Popover.svelte'
 	import { computeFields } from './utils'
 	import { deepEqual } from 'fast-equals'
@@ -67,6 +67,7 @@
 			loadSchemaAndInputsByName()
 		}
 	})
+
 	const dispatch = createEventDispatcher()
 	let runLoading = false
 
@@ -82,8 +83,6 @@
 		}
 	}
 
-	let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1
-
 	$: extraLib =
 		inlineScript?.language == 'frontend' && worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
@@ -177,7 +176,7 @@
 						Format
 
 						<div class="flex flex-row items-center gap-1">
-							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 							<Kbd>S</Kbd>
 						</div>
 					</div>
@@ -199,7 +198,7 @@
 							Run
 
 							<div class="flex flex-row items-center gap-1">
-								<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+								<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 								<Kbd>
 									<div class="h-4 flex items-center justify-center">
 										<CornerDownLeft size={10} />
@@ -248,15 +247,15 @@
 			{:else}
 				<SimpleEditor
 					bind:this={simpleEditor}
+					class="h-full"
+					{extraLib}
+					bind:code={inlineScript.content}
+					lang="javascript"
 					cmdEnterAction={async () => {
 						runLoading = true
 						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
 						runLoading = false
 					}}
-					class="h-full"
-					{extraLib}
-					bind:code={inlineScript.content}
-					lang="javascript"
 					on:change={() => {
 						$app = $app
 					}}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
index a91780f7cd..2aa702c0d2 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte
@@ -2,7 +2,6 @@
 	import { Button, Drawer, DrawerContent } from '$lib/components/common'
 	import type Editor from '$lib/components/Editor.svelte'
 	import ScriptEditor from '$lib/components/ScriptEditor.svelte'
-	import type { Preview } from '$lib/gen'
 	import { faSave } from '@fortawesome/free-solid-svg-icons'
 	import type { InlineScript } from '../../types'
 
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index 1c7007d91d..01aabef491 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -18,6 +18,7 @@
 
 	export let componentInput: AppInput | undefined
 	export let defaultUserInput = false
+	export let componentType: string
 	export let id: string
 	export let transformer: boolean
 
@@ -97,8 +98,8 @@
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600"
-			>Selected editor component is a transformer but component has no transformer
+		<span class="px-2 text-gray-600">
+			Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}
 {:else if componentInput && componentInput.type == 'runnable'}
@@ -115,7 +116,7 @@
 			/>
 		{:else}
 			<EmptyInlineScript
-				{id}
+				{componentType}
 				name={componentInput.runnable.name}
 				on:delete={deleteInlineScript}
 				on:new={(e) => {
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 02f595849f..2937faefd2 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -74,7 +74,6 @@
 						/>
 					{:else}
 						<EmptyInlineScript
-							id={`b_${hiddenInlineScript}`}
 							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
 							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 							on:new={(e) => {
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte
index 6f6a97bfc4..c2d7114499 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
 	import type { AppEditorContext, GridItem } from '../../types'
-
 	import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte'
 
 	const { selectedComponentInEditor } = getContext<AppEditorContext>('AppEditorContext')
@@ -14,6 +13,7 @@
 		defaultUserInput={gridItem.data?.type == 'formcomponent' ||
 			gridItem?.data?.type == 'formbuttoncomponent'}
 		id={gridItem.data.id}
+		componentType={gridItem.data.type}
 		transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 		bind:componentInput={gridItem.data.componentInput}
 	/>
@@ -23,6 +23,7 @@
 	{#each gridItem.data.actionButtons as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel
+				componentType={actionButton.type}
 				id={actionButton.id}
 				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 				bind:componentInput={actionButton.componentInput}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
index 5132781af5..53df57284f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 	import { X } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
-	import type { InputType, StaticAppInput, StaticInput, StaticOptions } from '../../inputType'
+	import type { InputType, StaticInput, StaticOptions } from '../../inputType'
 	import SubTypeEditor from './SubTypeEditor.svelte'
 
 	export let componentInput: StaticInput<any[]>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index e4c9f626f5..8a33500344 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -50,7 +50,8 @@
 		jobs
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	const { history, ontextfocus } = getContext<AppEditorContext>('AppEditorContext')
+	const { history, ontextfocus, movingcomponents } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	$: editor && ($ontextfocus = () => editor?.focus())
 
@@ -60,7 +61,12 @@
 		if (componentSettings?.item.id) {
 			$errorByComponent = clearErrorByComponentId(componentSettings?.item.id, $errorByComponent)
 			$jobs = clearJobsByComponentId(componentSettings?.item.id, $jobs)
+
+			if ($movingcomponents?.includes(componentSettings?.item.id)) {
+				$movingcomponents = $movingcomponents.filter((id) => id !== componentSettings?.item.id)
+			}
 		}
+
 		$selectedComponent = undefined
 		$focusedGrid = undefined
 		if (componentSettings?.item && !noGrid) {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
index 98ab1d1a9c..ab1b206780 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
-	import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
-	import { CrossIcon } from 'lucide-svelte'
+	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext } from '../../types'
 	import { deleteGridItem } from '../appUtils'
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
index 5160796f42..f71f4caf33 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte
@@ -2,8 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons'
-	import { includes } from 'lodash'
+	import { faClose } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
 	import type { ResultAppInput } from '../../inputType'
 	import type { AppEditorContext, AppViewerContext } from '../../types'
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
index f9697e20ae..ae92ac6202 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte
@@ -12,8 +12,6 @@
 
 	const { onchange, worldStore, state } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: componentInput && onchange?.()
-
 	$: extraLib =
 		componentInput?.expr && $worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows, $state, false)
@@ -28,6 +26,11 @@
 			shouldBindKey={false}
 			{extraLib}
 			autoHeight
+			on:change={() => {
+				if (onchange) {
+					onchange()
+				}
+			}}
 		/>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
index 7093aa9eb6..a534e9f01f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AppInput, StaticInput } from '../../../inputType'
+	import type { StaticInput } from '../../../inputType'
 	import { Loader2, X } from 'lucide-svelte'
 	import { Popup } from '../../../../common'
 	import { fade } from 'svelte/transition'
@@ -45,8 +45,9 @@
 
 	function select(label: string) {
 		componentInput.value = label
-		if ((document.activeElement as HTMLElement)?.blur) {
-			;(document.activeElement as HTMLElement).blur()
+		const elem = document.activeElement as HTMLElement
+		if (elem.blur) {
+			elem.blur()
 		}
 	}
 </script>
diff --git a/frontend/src/lib/components/apps/rx.ts b/frontend/src/lib/components/apps/rx.ts
index 26e1f01844..38256fff6a 100644
--- a/frontend/src/lib/components/apps/rx.ts
+++ b/frontend/src/lib/components/apps/rx.ts
@@ -4,11 +4,11 @@ import { deepEqual } from 'fast-equals'
 
 export interface Subscriber<T> {
 	id?: string
-	next(v: T)
+	next(v: T): void
 }
 
 export interface Observable<T> {
-	subscribe(x: Subscriber<T>)
+	subscribe(x: Subscriber<T>): void
 }
 export interface Output<T> extends Observable<T> {
 	set(x: T, force?: boolean): void
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 8118232115..27727b96be 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -82,9 +82,9 @@
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
-				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border"
-					>Cancel move</Button
-				>
+				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border">
+					Cancel move
+				</Button>
 			</div>
 		{/if}