feat(frontend): Add integration icons (#1063)

frontend/src/lib/components/IconedResourceType.svelte

@@ -11,12 +11,12 @@
 	$: name_prefix = name.split('_')[0]
 </script>
 
-<div class=" truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
+<div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
 	{#if APP_TO_ICON_COMPONENT[name_prefix]}
-		<span class="text-gray-700">
+		<span class="text-gray-700 grayscale">
 			<svelte:component this={APP_TO_ICON_COMPONENT[name_prefix]} {height} {width} />
 		</span>
 	{:else}

frontend/src/lib/components/icons/ClickhouseIcon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 168 168"
+	fill="none"
+>
+	<path
+		d="M0 139.667H18.6667V158.333H0V139.667Z"
+		fill="#FF0000"
+	/>
+	<path
+		d="M0 9H18.6667V139.667H0V9ZM37.3333 9H56V158.333H37.3333V9ZM74.6667 9H93.3333V158.333H74.6667V9ZM112 9H130.667V158.333H112V9ZM149.333 69.6667H168V97.6667H149.333V69.6667Z"
+		fill="#FFCC00"
+	/>
+</svg>

frontend/src/lib/components/icons/FaunadbIcon.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 168 168"
+	fill="none"
+>
+	<path
+		d="M124.222 37.638C114.302 40.949 109.525 46.888 106.271 56.138C105.431 58.609 103.331 61.342 100.969 63.182L109.105 71.907L83.28 53.827L12 4C12 4 17.144 37.428 18.929 49.727C20.189 58.399 22.34 62.288 29.164 66.23L31.894 67.702L43.651 73.904L36.67 70.277L68.898 87.885L68.688 88.358L33.993 72.274C35.83 78.582 39.399 90.723 40.922 96.084C42.549 101.865 44.386 103.968 50.002 106.018L60.342 109.802L66.746 107.279L58.611 112.693L17.931 164.358C44.963 139.235 67.849 130.3 84.593 122.994C105.956 113.744 118.816 107.805 127.214 86.466C133.198 71.486 137.869 52.302 143.801 44.891L156.451 28.703C156.451 28.703 130.258 35.641 124.222 37.638Z"
+		fill="#3F00A5"
+	/>
+</svg>
+

frontend/src/lib/components/icons/OpenaiIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let height = '24px'
+	export let width = '24px'
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	x="0px"
+	y="0px"
+	{width}
+	{height}
+	viewBox="0 0 168 168"
+	fill="none"
+>
+	<path
+		d="M75.3666 0.990772C56.9205 0.990772 40.5323 12.7091 34.82 30.0051C28.9578 31.1972 23.4203 33.6075 18.5758 37.0754C13.7313 40.5434 9.69106 44.9895 6.7239 50.1179C-2.52748 65.8927 -0.414958 85.724 11.9789 99.245C8.15248 110.57 9.46573 122.963 15.5767 133.218C24.7714 149.049 43.2721 157.162 61.3762 153.387C65.3401 157.8 70.2122 161.329 75.6676 163.739C81.123 166.148 87.0364 167.382 93.0135 167.359C111.46 167.359 127.848 155.641 133.56 138.345C145.438 135.921 155.661 128.597 161.6 118.232C170.908 102.457 168.795 82.6257 156.403 69.1047V69.0488C158.293 63.451 158.95 57.5194 158.33 51.6509C157.709 45.7825 155.826 40.1123 152.805 35.0198C143.609 19.245 125.106 11.13 107.06 14.905C103.078 10.503 98.1934 6.98605 92.7294 4.58725C87.2654 2.18845 81.3471 0.962552 75.3666 0.990772ZM75.3666 11.8088L75.31 11.8646C82.7341 11.8646 89.873 14.4 95.5833 19.0773C95.3546 19.1891 94.8973 19.4706 94.5554 19.6403L60.9776 38.7389C59.2637 39.6971 58.2358 41.4998 58.2358 43.4722V88.3172L43.7881 80.0924V43.021C43.7849 34.7519 47.1089 26.8196 53.03 20.9669C58.9511 15.1141 66.9849 11.8195 75.3666 11.8068V11.8088ZM115.816 24.8646C121.381 24.854 126.849 26.2929 131.669 29.0359C136.489 31.7788 140.49 35.7285 143.267 40.4857C146.921 46.796 148.291 54.1764 147.034 61.3311C146.806 61.1614 146.351 60.9378 146.063 60.7682L112.485 41.6116C111.641 41.1403 110.687 40.8926 109.716 40.8926C108.746 40.8926 107.792 41.1403 106.947 41.6116L67.6005 64.0341V47.5826L100.094 29.0469C104.871 26.3143 110.294 24.8711 115.816 24.8626V24.8646ZM32.7662 41.8931V81.2742C32.7662 83.2466 33.7941 84.9933 35.508 86.0075L74.796 108.374L60.2896 116.655L27.8531 98.1749C20.6043 94.0304 15.3186 87.2176 13.1561 79.232C10.9937 71.2464 12.1313 62.7407 16.3193 55.5818C20.0137 49.2641 25.8321 44.4207 32.7662 41.8911V41.8931ZM108.032 51.639L140.525 70.1189C155.659 78.7389 160.796 97.7817 152.059 112.712L152.115 112.768C148.404 119.078 142.579 123.923 135.669 126.403V87.0196C135.669 85.0472 134.641 83.2446 132.927 82.2883L93.582 59.8638L108.032 51.639ZM84.1607 65.2179L100.723 74.6824V93.5555L84.1607 103.02L67.6005 93.5555V74.6824L84.1607 65.2179ZM110.201 80.0924L124.649 88.3172V125.333C124.649 142.573 110.486 156.545 93.0701 156.545V156.489C85.7026 156.489 78.5071 153.954 72.8534 149.278C73.0821 149.167 73.5961 148.883 73.8814 148.713L107.459 129.615C109.173 128.657 110.258 126.854 110.199 124.882L110.201 80.0924ZM100.778 104.318V120.767L68.2844 139.247C53.1508 147.811 33.8487 142.74 25.1113 127.866H25.168C21.4569 121.612 20.1416 114.175 21.3982 107.021C21.6269 107.19 22.0842 107.414 22.3695 107.584L55.9472 126.74C56.792 127.211 57.7459 127.459 58.7164 127.459C59.6868 127.459 60.6408 127.211 61.4855 126.74L100.778 104.318Z"
+		fill="#0F0F0F"
+	/>
+</svg>

frontend/src/lib/components/icons/index.ts

@@ -30,6 +30,9 @@ import TelegramIcon from './TelegramIcon.svelte'
 import FunkwhaleIcon from './FunkwhaleIcon.svelte'
 import GdocsIcon from './GdocsIcon.svelte'
 import NextcloudIcon from './NextcloudIcon.svelte'
+import FaunadbIcon from './FaunadbIcon.svelte'
+import ClickhouseIcon from './ClickhouseIcon.svelte'
+import OpenaiIcon from './OpenaiIcon.svelte'
 
 export const APP_TO_ICON_COMPONENT = {
 	postgresql: PostgresIcon,
@@ -66,7 +69,10 @@ export const APP_TO_ICON_COMPONENT = {
 	helper: WindmillIcon,
 	windmillhub: WindmillIcon,
 	gdocs: GdocsIcon,
-	ocs: NextcloudIcon
+	ocs: NextcloudIcon,
+	faunadb: FaunadbIcon,
+	clickhouse: ClickhouseIcon,
+	openai: OpenaiIcon,
 } as const
 
 export {
@@ -99,4 +105,7 @@ export {
 	DatadogIcon,
 	FunkwhaleIcon,
 	GdocsIcon,
+	FaunadbIcon,
+	ClickhouseIcon,
+	OpenaiIcon,
 }