fix: migrate to new style radio button

frontend/src/lib/components/ObjectResourceInput.svelte

@@ -4,7 +4,7 @@
 	import ResourcePicker from './ResourcePicker.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import SchemaForm from './SchemaForm.svelte'
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 
 	export let format: string
 	export let value: any
@@ -54,7 +54,7 @@
 
 <div class="flex flex-row w-full gap-2">
 	<div class="shrink w-40">
-		<RadioButtonV3
+		<RadioButton
 			options={[
 				[`Resource (${resourceTypeName})`, 'resource'],
 				[`Raw object value`, 'raw']

frontend/src/lib/components/RadioButton.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	export let label = ''
-	export let options: ([string, any] | string)[]
+	export let options: [string | { title: string; desc: string }, any][]
 	export let value: any
 
 	import { createEventDispatcher } from 'svelte'
+	import Tooltip from './Tooltip.svelte'
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -24,7 +25,10 @@
 					aria-labelledby="memory-option-0-label"
 					on:click={() => dispatch('change', val)}
 				/>
-				<p>{label}</p>
+				<p>
+					{#if typeof label !== 'string'}{label.title} <Tooltip>{label.desc}</Tooltip>
+					{:else}{label}{/if}
+				</p>
 			</label>
 		{/each}
 	</div>

frontend/src/lib/components/RadioButtonV2.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	export let options: [{ title: string; desc?: string }, string][]
-	export let value: any
-
-	import { createEventDispatcher } from 'svelte'
-	import Tooltip from './Tooltip.svelte'
-
-	$: dispatch('change', value)
-
-	const dispatch = createEventDispatcher()
-</script>
-
-<div class="flex flex-row gap-x-4 m-4 reveal flex-wrap ">
-	{#each options as [label, val]}
-		<button
-			type="button"
-			on:click={() => {
-				value = val
-			}}
-			class="flex flex-col default-secondary-button-v2 mb-2 grow"
-			class:selected={value == val}
-		>
-			<h2 class="mb-2">{label.title} <Tooltip>{label.desc}</Tooltip></h2>
-		</button>
-	{/each}
-</div>
-
-<style>
-	.selected {
-		@apply bg-blue-500/70 text-white;
-	}
-	.selected > h2 {
-		@apply text-white;
-	}
-</style>

frontend/src/lib/components/ScriptBuilder.svelte

@@ -10,7 +10,7 @@
 	import { onDestroy } from 'svelte'
 	import SvelteMarkdown from 'svelte-markdown'
 	import Path from './Path.svelte'
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 	import Required from './Required.svelte'
 	import ScriptEditor from './ScriptEditor.svelte'
 	import ScriptSchema from './ScriptSchema.svelte'
@@ -177,7 +177,7 @@
 			</Path>
 			<h3 class="text-gray-700 pb-1 border-b">Language</h3>
 			<div class="max-w-md">
-				<RadioButtonV3
+				<RadioButton
 					label="Language"
 					options={[
 						['Typescript (Deno)', 'deno'],

frontend/src/lib/components/ScriptPicker.svelte

@@ -12,7 +12,7 @@
 	import python from 'svelte-highlight/languages/python'
 
 	import { getScriptByPath } from '$lib/utils'
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 
 	export let scriptPath: string | undefined = undefined
 	export let allowFlow = false
@@ -65,7 +65,7 @@
 <div class="flex flex-row items-center space-x-5">
 	<div class="w-80">
 		{#if options.length > 1}
-			<RadioButtonV3 bind:value={itemKind} {options} />
+			<RadioButton bind:value={itemKind} {options} />
 		{/if}
 	</div>
 

frontend/src/lib/components/StringTypeNarrowing.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import RadioButtonV3 from './RadioButtonV3.svelte'
+	import RadioButton from './RadioButton.svelte'
 	import ResourceTypePicker from './ResourceTypePicker.svelte'
 
 	export let pattern: string | undefined
@@ -31,7 +31,7 @@
 	$: contentEncoding = kind == 'base64' ? 'base64' : undefined
 </script>
 
-<RadioButtonV3
+<RadioButton
 	label="Kind"
 	options={[
 		['None', 'none'],

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

@@ -7,13 +7,13 @@
 	import FlowPreview from '../FlowPreview.svelte'
 	import FlowViewer from '../FlowViewer.svelte'
 	import Modal from '../Modal.svelte'
+	import RadioButton from '../RadioButton.svelte'
 	import CollapseLink from './../CollapseLink.svelte'
 	import CronInput from './../CronInput.svelte'
 	import FlowBox from './../flows/FlowBox.svelte'
 	import { flowStore, initFlow, mode } from './../flows/flowStore'
 	import { flowToMode } from './../flows/utils'
 	import Path from './../Path.svelte'
-	import RadioButtonV2 from './../RadioButtonV2.svelte'
 	import Required from './../Required.svelte'
 	import SchemaForm from './../SchemaForm.svelte'
 	import Toggle from './../Toggle.svelte'
@@ -131,25 +131,27 @@
 		</label>
 	</div>
 
-	<RadioButtonV2
-		options={[
-			[
-				{
-					title: 'UI or webhook triggered',
-					desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
-				},
-				'push'
-			],
-			[
-				{
-					title: 'Watching changes regularly',
-					desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
-				},
-				'pull'
-			]
-		]}
-		bind:value={$mode}
-	/>
+	<div class="mx-6">
+		<RadioButton
+			options={[
+				[
+					{
+						title: 'UI or webhook triggered',
+						desc: 'Trigger this flow through the generated UI, a manual schedule or by calling the associated webhook'
+					},
+					'push'
+				],
+				[
+					{
+						title: 'Watching changes regularly',
+						desc: 'The first module of this flow is a trigger script whose purpose is to pull data from an external source and return all new items since last run. This flow is meant to be scheduled very regularly to reduce latency to react to new events. It will trigger the rest of the flow once per item. If no new items, the flow will be skipped.'
+					},
+					'pull'
+				]
+			]}
+			bind:value={$mode}
+		/>
+	</div>
 	{#if $mode == 'pull'}
 		<div class="p-4">
 			<CollapseLink text="set primary schedule" open={true}>