From e80d9b7b738eea35fc6b755775178625702de25f Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Mon, 7 Jul 2025 12:44:55 +0200
Subject: [PATCH] asset sub icon

---
 .../graph/renderers/nodes/AssetNode.svelte    | 10 ++++-
 .../components/icons/AssetGenericIcon.svelte  | 20 ++++++++++
 .../lib/components/icons/AssetResIcon.svelte  | 39 +++++++++++++++++++
 .../lib/components/icons/AssetS3Icon.svelte   | 37 ++++++++++++++++++
 4 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/components/icons/AssetGenericIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/AssetResIcon.svelte
 create mode 100644 frontend/src/lib/components/icons/AssetS3Icon.svelte

diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
index 52dd54fb51..e88409b57b 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { AssetN } from '../../graphBuilder.svelte'
-	import { AlertTriangle, Pyramid } from 'lucide-svelte'
+	import { AlertTriangle } from 'lucide-svelte'
 	import { assetEq } from '$lib/components/assets/lib'
 	import { twMerge } from 'tailwind-merge'
 	import type { FlowGraphAssetContext } from '$lib/components/flows/types'
@@ -11,6 +11,7 @@
 	} from '../../../../../routes/(root)/(logged)/assets/ExploreAssetButton.svelte'
 	import { Tooltip } from '$lib/components/meltComponents'
 	import { pluralize } from '$lib/utils'
+	import AssetGenericIcon from '$lib/components/icons/AssetGenericIcon.svelte'
 
 	interface Props {
 		data: AssetN['data']
@@ -40,7 +41,12 @@
 				onmouseenter={() => (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
 				onmouseleave={() => (flowGraphAssetsCtx.val.selectedAsset = undefined)}
 			>
-				<Pyramid size={16} class="shrink-0 ml-1" />
+				<AssetGenericIcon
+					assetKind={data.asset.kind}
+					fill={''}
+					class="shrink-0 ml-1 fill-tertiary stroke-tertiary"
+					size="16px"
+				/>
 				<span class="text-3xs truncate flex-1">
 					{data.asset.path}
 				</span>
diff --git a/frontend/src/lib/components/icons/AssetGenericIcon.svelte b/frontend/src/lib/components/icons/AssetGenericIcon.svelte
new file mode 100644
index 0000000000..48fc3d79d0
--- /dev/null
+++ b/frontend/src/lib/components/icons/AssetGenericIcon.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { AssetKind } from '../assets/lib'
+	import AssetResIcon from './AssetResIcon.svelte'
+	import AssetS3Icon from './AssetS3Icon.svelte'
+
+	interface Props {
+		size?: string
+		fill?: string
+		assetKind: AssetKind
+		class?: string
+	}
+
+	let { assetKind, fill, size, class: className = '' }: Props = $props()
+</script>
+
+{#if assetKind == 's3object'}
+	<AssetS3Icon {fill} width={size} height={size} class={className} />
+{:else if assetKind == 'resource'}
+	<AssetResIcon {fill} width={size} height={size} class={className} />
+{:else}{/if}
diff --git a/frontend/src/lib/components/icons/AssetResIcon.svelte b/frontend/src/lib/components/icons/AssetResIcon.svelte
new file mode 100644
index 0000000000..6a7560538b
--- /dev/null
+++ b/frontend/src/lib/components/icons/AssetResIcon.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	interface Props {
+		height?: string
+		width?: string
+		fill?: string
+		class?: string
+	}
+
+	let { height = '24px', width = '24px', fill = 'black', class: className = '' }: Props = $props()
+</script>
+
+<svg
+	{width}
+	{height}
+	class={className}
+	viewBox="0 0 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_1_2)">
+		<path
+			d="M11.1311 0.0107422C11.4062 0.0294253 11.6758 0.101532 11.9212 0.229492C12.135 0.341119 12.3266 0.49012 12.4866 0.668945L12.636 0.857422L12.6389 0.861328L18.9612 10H16.5286L11.9964 3.44824V14H9.99636V3.44824L1.99929 15.0156L8.00027 18.4424V20.7461L1.00027 16.748L0.99148 16.7441L0.992457 16.7432C0.754965 16.6045 0.548332 16.4183 0.386012 16.1963C0.223751 15.9743 0.108176 15.7215 0.048121 15.4531C-0.0119221 15.1847 -0.0157978 14.9067 0.0364023 14.6367C0.0886027 14.3668 0.196125 14.1104 0.351832 13.8838L0.353785 13.8818L9.35379 0.861328L9.35574 0.857422C9.54004 0.593423 9.78607 0.378374 10.0716 0.229492C10.3162 0.101939 10.5844 0.0296717 10.8587 0.0107422C10.9036 0.00456634 10.9498 0 10.9964 0C11.0421 2.90995e-05 11.0871 0.0047857 11.1311 0.0107422Z"
+			{fill}
+			stroke="none"
+		/>
+		<path
+			d="M16 19.6191L14.015 20.85C13.8595 20.9467 13.6814 20.9977 13.5 20.9977C13.3186 20.9977 13.1405 20.9467 12.985 20.85L11.485 19.9191C11.3374 19.8274 11.2152 19.6977 11.1302 19.5428C11.0452 19.3879 11.0004 19.2128 11 19.0347V17.3591C11.0004 17.1809 11.0452 17.0059 11.1302 16.851C11.2152 16.696 11.3374 16.5664 11.485 16.4747L13.5 15.2231M16 19.6191V16.7746M16 19.6191L17.985 20.85C18.1405 20.9467 18.3186 20.9977 18.5 20.9977C18.6814 20.9977 18.8595 20.9467 19.015 20.85L20.515 19.9191C20.6626 19.8274 20.7848 19.6977 20.8698 19.5428C20.9548 19.3879 20.9996 19.2128 21 19.0347V17.3591C20.9996 17.1809 20.9548 17.0059 20.8698 16.851C20.7848 16.696 20.6626 16.5664 20.515 16.4747L18.5 15.2231M16 16.7746L13.5 15.2231M16 16.7746L13.5 18.3262M16 16.7746L18.5 15.2231M16 16.7746L18.5 18.3262M16 16.7746V13.9301M13.5 15.2231V12.963C13.5004 12.7849 13.5452 12.6099 13.6302 12.4549C13.7152 12.3 13.8374 12.1704 13.985 12.0786L15.485 11.1477C15.6405 11.0511 15.8186 11 16 11C16.1814 11 16.3595 11.0511 16.515 11.1477L18.015 12.0786C18.1626 12.1704 18.2848 12.3 18.3698 12.4549C18.4548 12.6099 18.4996 12.7849 18.5 12.963V15.2231M13.5 18.3262L11.13 16.8522M13.5 18.3262V21M18.5 18.3262L20.87 16.8522M18.5 18.3262V21M16 13.9301L13.63 12.4562M16 13.9301L18.37 12.4562"
+			fill="none"
+			stroke={fill}
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_1_2">
+			<rect width="22" height="22" fill="white" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/frontend/src/lib/components/icons/AssetS3Icon.svelte b/frontend/src/lib/components/icons/AssetS3Icon.svelte
new file mode 100644
index 0000000000..38a6568651
--- /dev/null
+++ b/frontend/src/lib/components/icons/AssetS3Icon.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Props {
+		height?: string
+		width?: string
+		fill?: string
+		class?: string
+	}
+
+	let { height = '24px', width = '24px', fill = 'black', class: className = '' }: Props = $props()
+</script>
+
+<svg
+	{width}
+	{height}
+	class={className}
+	viewBox="0 0 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_1_2)">
+		<path
+			d="M11.1306 0.0107422C11.4057 0.0293908 11.6752 0.101568 11.9206 0.229492C12.1345 0.341099 12.326 0.490128 12.486 0.668945L12.6354 0.857422L12.6384 0.861328L20.3444 12H17.9118L11.9958 3.44824V12H9.99579V3.44824L1.99872 15.0156L6.9997 17.8711V20.1748L0.999698 16.748L0.990909 16.7441L0.991885 16.7432C0.754443 16.6045 0.547723 16.4183 0.38544 16.1963C0.223223 15.9743 0.107588 15.7214 0.0475494 15.4531C-0.0124758 15.1848 -0.0163539 14.9067 0.0358306 14.6367C0.0880166 14.3668 0.195596 14.1104 0.35126 13.8838L0.353213 13.8818L9.35321 0.861328L9.35517 0.857422C9.53943 0.593439 9.78556 0.378393 10.071 0.229492C10.3156 0.101917 10.5838 0.0297091 10.8581 0.0107422C10.903 0.00456123 10.9492 1.95652e-05 10.9958 0C11.0415 1.06148e-05 11.0865 0.00479284 11.1306 0.0107422Z"
+			{fill}
+			stroke="none"
+		/>
+		<path
+			d="M11.792 22.084C11.176 22.084 10.624 21.984 10.136 21.784C9.648 21.584 9.256 21.288 8.96 20.896C8.672 20.504 8.52 20.032 8.504 19.48H10.688C10.72 19.792 10.828 20.032 11.012 20.2C11.196 20.36 11.436 20.44 11.732 20.44C12.036 20.44 12.276 20.372 12.452 20.236C12.628 20.092 12.716 19.896 12.716 19.648C12.716 19.44 12.644 19.268 12.5 19.132C12.364 18.996 12.192 18.884 11.984 18.796C11.784 18.708 11.496 18.608 11.12 18.496C10.576 18.328 10.132 18.16 9.788 17.992C9.444 17.824 9.148 17.576 8.9 17.248C8.652 16.92 8.528 16.492 8.528 15.964C8.528 15.18 8.812 14.568 9.38 14.128C9.948 13.68 10.688 13.456 11.6 13.456C12.528 13.456 13.276 13.68 13.844 14.128C14.412 14.568 14.716 15.184 14.756 15.976H12.536C12.52 15.704 12.42 15.492 12.236 15.34C12.052 15.18 11.816 15.1 11.528 15.1C11.28 15.1 11.08 15.168 10.928 15.304C10.776 15.432 10.7 15.62 10.7 15.868C10.7 16.14 10.828 16.352 11.084 16.504C11.34 16.656 11.74 16.82 12.284 16.996C12.828 17.18 13.268 17.356 13.604 17.524C13.948 17.692 14.244 17.936 14.492 18.256C14.74 18.576 14.864 18.988 14.864 19.492C14.864 19.972 14.74 20.408 14.492 20.8C14.252 21.192 13.9 21.504 13.436 21.736C12.972 21.968 12.424 22.084 11.792 22.084ZM15.1548 15.712C15.1868 14.856 15.4668 14.196 15.9948 13.732C16.5228 13.268 17.2388 13.036 18.1428 13.036C18.7428 13.036 19.2548 13.14 19.6788 13.348C20.1108 13.556 20.4348 13.84 20.6508 14.2C20.8748 14.56 20.9868 14.964 20.9868 15.412C20.9868 15.94 20.8548 16.372 20.5908 16.708C20.3268 17.036 20.0188 17.26 19.6668 17.38V17.428C20.1228 17.58 20.4828 17.832 20.7468 18.184C21.0108 18.536 21.1428 18.988 21.1428 19.54C21.1428 20.036 21.0268 20.476 20.7948 20.86C20.5708 21.236 20.2388 21.532 19.7988 21.748C19.3668 21.964 18.8508 22.072 18.2508 22.072C17.2908 22.072 16.5228 21.836 15.9468 21.364C15.3788 20.892 15.0788 20.18 15.0468 19.228H17.0388C17.0468 19.58 17.1468 19.86 17.3388 20.068C17.5308 20.268 17.8108 20.368 18.1788 20.368C18.4908 20.368 18.7308 20.28 18.8988 20.104C19.0748 19.92 19.1628 19.68 19.1628 19.384C19.1628 19 19.0388 18.724 18.7908 18.556C18.5508 18.38 18.1628 18.292 17.6268 18.292H17.2428V16.624H17.6268C18.0348 16.624 18.3628 16.556 18.6108 16.42C18.8668 16.276 18.9948 16.024 18.9948 15.664C18.9948 15.376 18.9148 15.152 18.7548 14.992C18.5948 14.832 18.3748 14.752 18.0948 14.752C17.7908 14.752 17.5628 14.844 17.4108 15.028C17.2668 15.212 17.1828 15.44 17.1588 15.712H15.1548Z"
+			{fill}
+			stroke="none"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_1_2">
+			<rect width="22" height="22" fill="white" />
+		</clipPath>
+	</defs>
+</svg>