Toogle on top

frontend/src/lib/components/Toggle.svelte

@@ -18,7 +18,7 @@
 	export let id = (Math.random() + 1).toString(36).substring(10)
 	export let lightMode: boolean = false
 
-	export let size: 'sm' | 'xs' = 'sm'
+	export let size: 'sm' | 'xs' | '2xs' = 'sm'
 
 	const dispatch = createEventDispatcher()
 	const bothOptions = Boolean(options.left) && Boolean(options.right)
@@ -37,7 +37,7 @@
 			class={twMerge(
 				'mr-2 font-medium duration-50 select-none',
 				bothOptions || textDisabled ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
-				size === 'xs' ? 'text-xs' : 'text-sm',
+				size === 'xs' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
 				textClass
 			)}
 			style={textStyle}
@@ -74,6 +74,8 @@
 					: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-400',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
+					: size === '2xs'
+					? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
 					: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
 			)}
 		/>

frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte

@@ -16,8 +16,7 @@
 	import type { GraphEventHandlers } from '../../graphBuilder'
 	import { twMerge } from 'tailwind-merge'
 	import MapItem from '../../../flows/map/MapItem.svelte'
-	import { fade, scale } from 'svelte/transition'
-	import { flip } from 'svelte/animate'
+	import Toggle from '$lib/components/Toggle.svelte'
 
 	export let path: string
 	export let isEditor: boolean
@@ -239,19 +238,25 @@
 				{/each}
 
 				{#if data.flowIsSimplifiable}
-					<div class="grow-0 center-center">
-						<button
-							class="flex items-center text-xs"
+					<div class="absolute -top-5 right-0 text-2xs">
+						<Toggle
+							color="nord"
+							options={{
+								left: 'Simplified view'
+							}}
+							checked={simplifiedTriggers}
+							size="2xs"
+							textClass="text-[0.6rem] text-tertiary font-normal"
 							on:click={() => {
 								simplifiedTriggers = !simplifiedTriggers
 							}}
 						>
-							{#if !simplifiedTriggers}
-								<ChevronDown class="ml-1" size={14} />
+							{#if simplifiedTriggers}
+								Switch to full view
 							{:else}
-								<ChevronRight class="ml-1" size={14} />
+								Switch to simplified view
 							{/if}
-						</button>
+						</Toggle>
 					</div>
 				{/if}