From f6e3bf6ca3f2dc31b2efc57df0b2c82ceec9bdfe Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 5 Dec 2023 14:20:21 +0100
Subject: [PATCH] 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 | 11 +---
 .../lib/components/DarkModeObserver.svelte    |  8 ++-
 .../LightweightResourcePicker.svelte          | 16 +----
 .../src/lib/components/ResourcePicker.svelte  | 16 +----
 .../src/lib/components/ScriptPicker.svelte    | 16 +----
 .../inputEditor/ConnectedInputEditor.svelte   |  4 +-
 .../script/shared/ScriptTransformer.svelte    | 64 ++++++++-----------
 .../components/sidebar/DarkModeToggle.svelte  | 10 +--
 .../lib/components/sidebar/UserMenu.svelte    | 11 +---
 9 files changed, 47 insertions(+), 109 deletions(-)

diff --git a/frontend/src/lib/components/AppConnect.svelte b/frontend/src/lib/components/AppConnect.svelte
index f3416de771..3eb8d62321 100644
--- a/frontend/src/lib/components/AppConnect.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/DarkModeObserver.svelte b/frontend/src/lib/components/DarkModeObserver.svelte
index 4b1875615e..2a99d68494 100644
--- a/frontend/src/lib/components/DarkModeObserver.svelte
+++ b/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
 				}
 			}
 		})
diff --git a/frontend/src/lib/components/LightweightResourcePicker.svelte b/frontend/src/lib/components/LightweightResourcePicker.svelte
index bd47151899..efff2d741d 100644
--- a/frontend/src/lib/components/LightweightResourcePicker.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index 0633610d1f..e2ade97be0 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/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) => {
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index c7a5c6746b..064f3b02c7 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/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}>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
index 180a80e324..720adcb956 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte
+++ b/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={() => {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
index 11b7ecae62..7dd514ddb2 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte
+++ b/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>
diff --git a/frontend/src/lib/components/sidebar/DarkModeToggle.svelte b/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
index f078968a77..54a738350a 100644
--- a/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
+++ b/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 />
diff --git a/frontend/src/lib/components/sidebar/UserMenu.svelte b/frontend/src/lib/components/sidebar/UserMenu.svelte
index ea3c5d888d..e01d658fce 100644
--- a/frontend/src/lib/components/sidebar/UserMenu.svelte
+++ b/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 />