changing mute toggle

frontend/src/lib/components/Path.svelte

@@ -24,7 +24,6 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import FolderEditor from './FolderEditor.svelte'
 	import { random_adj } from './random_positive_adjetive'
-
 	import { Eye, Folder, Plus, SearchCode, User } from 'lucide-svelte'
 
 	type PathKind =
@@ -325,7 +324,7 @@
 		<div class="flex justify-start w-full grow">
 			<Badge
 				color="gray"
-				class="center-center !bg-surface-secondary !text-tertiary !w-[70px] !h-[24px] rounded-r-none border"
+				class="center-center !bg-surface-secondary !text-tertiary !font-normal !w-[70px] !h-[24px] rounded-r-none border border-r-0"
 			>
 				Full path
 			</Badge>
@@ -334,7 +333,7 @@
 				readonly
 				value={path}
 				size={path?.length || 50}
-				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none grow"
+				class="font-mono !text-xs max-w-[calc(100%-70px)] !text-tertiary !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none grow"
 				on:focus={({ currentTarget }) => {
 					currentTarget.select()
 				}}

frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import Toggle from '$lib/components/Toggle.svelte'
+
+	import { FlowService, ScriptService } from '$lib/gen'
+	import { sendUserToast } from '$lib/toast'
+	import { workspaceStore } from '$lib/stores'
+
+	export let kind: 'script' | 'flow'
+	export let scriptOrFlowPath: string
+	export let errorHandlerMuted: boolean | undefined
+	let toggleState = errorHandlerMuted
+
+	async function toggleErrorHandler(): Promise<void> {
+		toggleState = !toggleState
+		if ($workspaceStore !== undefined) {
+			try {
+				if (kind === 'flow') {
+					await FlowService.toggleWorkspaceErrorHandlerForFlow({
+						workspace: $workspaceStore,
+						path: scriptOrFlowPath,
+						requestBody: {
+							muted: !errorHandlerMuted
+						}
+					})
+				} else {
+					await ScriptService.toggleWorkspaceErrorHandlerForScript({
+						workspace: $workspaceStore,
+						path: scriptOrFlowPath,
+						requestBody: {
+							muted: !errorHandlerMuted
+						}
+					})
+				}
+			} catch (error) {
+				sendUserToast(
+					`Error while toggling Workspace Error Handler: ${error.body || error.message}`,
+					true
+				)
+				toggleState = false
+				return
+			}
+			errorHandlerMuted = !errorHandlerMuted
+			toggleState = errorHandlerMuted
+			sendUserToast(
+				errorHandlerMuted ? 'Workspace error handler muted' : 'Workspace error handler active',
+				false
+			)
+		}
+		toggleState = false
+	}
+
+	$: console.log('toggleState', toggleState)
+</script>
+
+<Toggle
+	lightToogle={true}
+	size="sm"
+	checked={toggleState}
+	on:change={toggleErrorHandler}
+	options={{
+		right: 'Mute',
+		rightTooltip: 'Disable workspace error handler, EE only'
+	}}
+	class="mt-2"
+/>

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -18,7 +18,7 @@
 	import type { Schema } from '$lib/common'
 	import Section from '$lib/components/Section.svelte'
 	import Label from '$lib/components/Label.svelte'
-	import ErrorHandlerToggleButton from '$lib/components/details/ErrorHandlerToggleButton.svelte'
+	import ErrorHandlerToggleButtonV2 from '$lib/components/details/ErrorHandlerToggleButtonV2.svelte'
 	import WorkerTagPicker from '$lib/components/WorkerTagPicker.svelte'
 	import MetadataGen from '$lib/components/copilot/MetadataGen.svelte'
 
@@ -272,11 +272,10 @@
 
 				<!-- Error Handler Section -->
 				<div class="flex flex-row items-center">
-					<ErrorHandlerToggleButton
+					<ErrorHandlerToggleButtonV2
 						kind="flow"
 						scriptOrFlowPath={$pathStore}
 						bind:errorHandlerMuted={$flowStore.ws_error_handler_muted}
-						iconOnly={false}
 					/>
 				</div>