fix(frontend): Fix dark mode observer, removed code duplication (#2770)

* fix(frontend): Fix dark mode observer, removed code duplication

* Revert

frontend/src/lib/components/AppConnect.svelte

@@ -329,17 +329,10 @@
 	let filteredConnectsManual: [string, { img?: string; instructions: string[]; key?: string }][] =
 		[]
 
-	let darkMode: boolean = document.documentElement.classList.contains('dark')
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-		} else {
-			darkMode = false
-		}
-	}
+	let darkMode: boolean = false
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode />
 
 <SearchItems
 	{filter}

frontend/src/lib/components/DarkModeObserver.svelte

@@ -2,14 +2,20 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { createEventDispatcher } from 'svelte'
 
+	export let darkMode: boolean = false
 	const dispatch = createEventDispatcher()
 
 	let observer: MutationObserver
 	onMount(() => {
+		darkMode = document.documentElement.classList.contains('dark')
+
 		observer = new MutationObserver((mutationsList, observer) => {
 			for (let mutation of mutationsList) {
 				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-					dispatch('change', document.documentElement.classList.contains('dark'))
+					const newDarkMode = document.documentElement.classList.contains('dark')
+					dispatch('change', newDarkMode)
+
+					darkMode = newDarkMode
 				}
 			}
 		})

frontend/src/lib/components/LightweightResourcePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { createEventDispatcher } from 'svelte'
 	import Select from './apps/svelte-select/lib/index'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 
@@ -50,21 +50,9 @@
 	$: dispatch('change', value)
 
 	let darkMode: boolean = false
-
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-		} else {
-			darkMode = false
-		}
-	}
-
-	onMount(() => {
-		onThemeChange()
-	})
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode />
 
 <Select
 	portal={!disablePortal}

frontend/src/lib/components/ResourcePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ResourceService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { createEventDispatcher } from 'svelte'
 	import Select from './apps/svelte-select/lib/index'
 	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 	import AppConnect from './AppConnect.svelte'
@@ -60,21 +60,9 @@
 	let resourceEditor: ResourceEditor
 
 	let darkMode: boolean = false
-
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-		} else {
-			darkMode = false
-		}
-	}
-
-	onMount(() => {
-		onThemeChange()
-	})
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode />
 
 <AppConnect
 	on:refresh={async (e) => {

frontend/src/lib/components/ScriptPicker.svelte

@@ -2,7 +2,7 @@
 	import { ScriptService, FlowService, Script } from '$lib/gen'
 
 	import { workspaceStore } from '$lib/stores'
-	import { createEventDispatcher, onMount } from 'svelte'
+	import { createEventDispatcher } from 'svelte'
 
 	import Select from './apps/svelte-select/lib/index'
 
@@ -55,21 +55,9 @@
 
 	$: itemKind && $workspaceStore && loadItems()
 	let darkMode: boolean = false
-
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-		} else {
-			darkMode = false
-		}
-	}
-
-	onMount(() => {
-		onThemeChange()
-	})
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode />
 
 <Drawer bind:this={drawerViewer} size="900px">
 	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte

@@ -3,7 +3,7 @@
 	import { Badge, Button } from '$lib/components/common'
 	import { getContext } from 'svelte'
 	import type { ConnectedAppInput, InputConnection } from '../../../inputType'
-	import { Plug, UserX } from 'lucide-svelte'
+	import { Plug, Unplug } from 'lucide-svelte'
 
 	export let componentInput: ConnectedAppInput
 
@@ -26,7 +26,7 @@
 
 	<Button
 		size="xs"
-		startIcon={{ icon: UserX }}
+		startIcon={{ icon: Unplug }}
 		color="red"
 		variant="border"
 		on:click={() => {

frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte

@@ -2,8 +2,8 @@
 	import type { AppEditorContext, InlineScript } from '$lib/components/apps/types'
 	import { getContext } from 'svelte'
 	import { Button } from '$lib/components/common'
-	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { Plus, X } from 'lucide-svelte'
+	import Section from '$lib/components/Section.svelte'
 
 	const { selectedComponentInEditor } = getContext<AppEditorContext>('AppEditorContext')
 
@@ -13,41 +13,31 @@
 	$: checked = Boolean(appInput.transformer)
 </script>
 
-<div
-	class="text-sm font-semibold justify-between flex flex-row items-center"
-	id="app-editor-script-transformer"
->
-	<div class="flex flex-row items-center gap-2">
-		Transformer
-
-		<Tooltip wrapperClass="flex">
-			{"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"}
-		</Tooltip>
-	</div>
-	<Button
-		size="xs"
-		color={checked ? 'red' : 'light'}
-		variant="border"
-		on:click={() => {
-			if (appInput.transformer) {
-				appInput.transformer = undefined
-			} else {
-				appInput.transformer = {
-					language: 'frontend',
-					content: 'return result'
-				}
-				$selectedComponentInEditor = id + '_transformer'
-			}
-		}}
+<div class="mt-2">
+	<Section
+		label="Transformer"
+		tooltip={"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"}
 	>
-		<div class="flex flex-row gap-1 items-center">
-			{#if checked}
-				<X size={16} />
-				Remove
-			{:else}
-				<Plus size={16} />
-				Add
-			{/if}
-		</div>
-	</Button>
+		<svelte:fragment slot="action">
+			<Button
+				size="xs"
+				color={checked ? 'red' : 'light'}
+				variant="border"
+				on:click={() => {
+					if (appInput.transformer) {
+						appInput.transformer = undefined
+					} else {
+						appInput.transformer = {
+							language: 'frontend',
+							content: 'return result'
+						}
+						$selectedComponentInEditor = id + '_transformer'
+					}
+				}}
+				startIcon={{ icon: checked ? X : Plus }}
+			>
+				{checked ? 'Remove' : 'Add'}
+			</Button>
+		</svelte:fragment>
+	</Section>
 </div>

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

@@ -7,14 +7,6 @@
 	export let darkMode: boolean = document.documentElement.classList.contains('dark')
 	export let forcedDarkMode: boolean = true
 
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-		} else {
-			darkMode = false
-		}
-	}
-
 	export function toggle() {
 		if (!document.documentElement.classList.contains('dark')) {
 			document.documentElement.classList.add('dark')
@@ -40,4 +32,4 @@
 	{/if}
 </button>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode />

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

@@ -11,15 +11,8 @@
 	import MenuButton from './MenuButton.svelte'
 	import { MenuItem } from '@rgossiaux/svelte-headlessui'
 
-	let darkMode: boolean = document.documentElement.classList.contains('dark')
+	let darkMode: boolean = false
 	export let isCollapsed: boolean = false
-	function onThemeChange() {
-		if (document.documentElement.classList.contains('dark')) {
-			darkMode = true
-		} else {
-			darkMode = false
-		}
-	}
 </script>
 
 <Menu>
@@ -142,4 +135,4 @@
 	</div>
 </Menu>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode />