enh: manifest modal

src/lib/components/workspace/Tools.svelte

@@ -20,7 +20,9 @@
 	import ConfirmDialog from '../common/ConfirmDialog.svelte';
 	import ToolMenu from './Tools/ToolMenu.svelte';
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
-	import ValvesModal from './ValvesModal.svelte';
+	import ValvesModal from './common/ValvesModal.svelte';
+	import ManifestModal from './common/ManifestModal.svelte';
+	import Heart from '../icons/Heart.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -30,6 +32,7 @@
 	let showConfirm = false;
 	let query = '';
 
+	let showManifestModal = false;
 	let showValvesModal = false;
 	let selectedTool = null;
 
@@ -169,6 +172,21 @@
 				</div>
 			</a>
 			<div class="flex flex-row gap-0.5 self-center">
+				{#if tool?.meta?.manifest?.funding_url ?? false}
+					<Tooltip content="Donate">
+						<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;
+								showManifestModal = true;
+							}}
+						>
+							<Heart />
+						</button>
+					</Tooltip>
+				{/if}
+
 				<Tooltip content="Valves">
 					<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"
@@ -345,6 +363,7 @@
 </div>
 
 <ValvesModal bind:show={showValvesModal} type="tool" id={selectedTool?.id ?? null} />
+<ManifestModal bind:show={showManifestModal} manifest={selectedTool?.meta?.manifest ?? {}} />
 
 <ConfirmDialog
 	bind:show={showConfirm}