feat: valves

src/lib/components/workspace/Tools.svelte

@@ -20,6 +20,7 @@
 	import ConfirmDialog from '../common/ConfirmDialog.svelte';
 	import ToolMenu from './Tools/ToolMenu.svelte';
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
+	import ValvesModal from './ValvesModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -29,6 +30,9 @@
 	let showConfirm = false;
 	let query = '';
 
+	let showValvesModal = false;
+	let selectedTool = null;
+
 	const shareHandler = async (tool) => {
 		console.log(tool);
 	};
@@ -169,6 +173,10 @@
 					<button
 						class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 						type="button"
+						on:click={() => {
+							selectedTool = tool;
+							showValvesModal = true;
+						}}
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -336,6 +344,8 @@
 	</a>
 </div>
 
+<ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
+
 <ConfirmDialog
 	bind:show={showConfirm}
 	on:confirm={() => {