fix: smart search for new services

apps/api/src/lib/services/supportedVersions.ts

@@ -29,7 +29,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'stable',
 		ports: {
 			main: 8000
-		}
+		},
+		labels: ['analytics', 'plausible', 'plausible-analytics', 'gdpr', 'no-cookie']
 	},
 	{
 		name: 'nocodb',
@@ -39,7 +40,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 8080
-		}
+		},
+		labels: ['nocodb', 'airtable', 'database']
 	},
 	{
 		name: 'minio',
@@ -49,7 +51,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 9001
-		}
+		},
+		labels: ['minio', 's3', 'storage']
 	},
 	{
 		name: 'vscodeserver',
@@ -59,7 +62,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 8080
-		}
+		},
+		labels: ['vscodeserver', 'vscode', 'code-server', 'ide']
 	},
 	{
 		name: 'wordpress',
@@ -70,7 +74,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 80
-		}
+		},
+		labels: ['wordpress', 'blog', 'cms']
 	},
 	{
 		name: 'vaultwarden',
@@ -80,7 +85,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 80
-		}
+		},
+		labels: ['vaultwarden', 'password-manager', 'passwords']
 	},
 	{
 		name: 'languagetool',
@@ -90,7 +96,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 8010
-		}
+		},
+		labels: ['languagetool', 'grammar', 'spell-checker']
 	},
 	{
 		name: 'n8n',
@@ -100,7 +107,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 5678
-		}
+		},
+		labels: ['n8n', 'workflow', 'automation', 'ifttt', 'zapier', 'nodered']
 	},
 	{
 		name: 'uptimekuma',
@@ -110,7 +118,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 3001
-		}
+		},
+		labels: ['uptimekuma', 'uptime', 'monitoring']
 	},
 	{
 		name: 'ghost',
@@ -121,7 +130,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 2368
-		}
+		},
+		labels: ['ghost', 'blog', 'cms']
 	},
 	{
 		name: 'meilisearch',
@@ -132,7 +142,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 7700
-		}
+		},
+		labels: ['meilisearch', 'search', 'search-engine']
 	},
 	{
 		name: 'umami',
@@ -143,7 +154,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'postgresql-latest',
 		ports: {
 			main: 3000
-		}
+		},
+		labels: ['umami', 'analytics', 'gdpr', 'no-cookie']
 	},
 	{
 		name: 'hasura',
@@ -154,7 +166,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'v2.10.0',
 		ports: {
 			main: 8080
-		}
+		},
+		labels: ['hasura', 'graphql', 'database']
 	},
 	{
 		name: 'fider',
@@ -165,7 +178,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'stable',
 		ports: {
 			main: 3000
-		}
+		},
+		labels: ['fider', 'feedback', 'suggestions']
 	},
 	{
 		name: 'appwrite',
@@ -176,7 +190,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: '1.0',
 		ports: {
 			main: 80
-		}
+		},
+		labels: ['appwrite', 'database', 'storage', 'api', 'serverless']
 	},
 	// {
 	//     name: 'moodle',
@@ -198,7 +213,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 8000
-		}
+		},
+		labels: ['glitchtip', 'error-reporting', 'error', 'sentry', 'bugsnag']
 	},
 	{
 		name: 'searxng',
@@ -209,7 +225,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 8080
-		}
+		},
+		labels: ['searxng', 'search', 'search-engine']
 	},
 	{
 		name: 'weblate',
@@ -220,7 +237,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 8080
-		}
+		},
+		labels: ['weblate', 'translation', 'localization']
 	},
 	// {
 	// 	name: 'taiga',
@@ -242,7 +260,8 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 3000
-		}
+		},
+		labels: ['grafana', 'monitoring', 'metrics', 'dashboard']
 	},
 	{
 		name: 'trilium',
@@ -253,6 +272,7 @@ export const supportedServiceTypesAndVersions = [
 		recommendedVersion: 'latest',
 		ports: {
 			main: 8080
-		}
+		},
+		labels: ['trilium', 'notes', 'note-taking', 'wiki']
 	},
 ];

apps/ui/src/routes/services/[id]/configuration/type.svelte

@@ -27,10 +27,12 @@
 <script lang="ts">
 	export let types: any;
 
+	let search = '';
+	let filteredTypes = types;
+
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { get, post } from '$lib/api';
-	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
 	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
 
@@ -45,10 +47,50 @@
 			return errorNotification(error);
 		}
 	}
+	function doSearch() {
+		filteredTypes = types.filter(
+			(type: any) =>
+				type.name.toLowerCase().includes(search.toLowerCase()) ||
+				type.labels.some((label: string) => label.toLowerCase().includes(search.toLowerCase()))
+		);
+	}
+	function cleanupSearch() {
+		search = '';
+		filteredTypes = types;
+	}
 </script>
 
-<div class="flex flex-wrap justify-center">
+<div class="container lg:mx-auto lg:p-0 px-8 pt-5">
-	{#each types as type}
+	<div class="input-group flex w-full">
+		<div class="btn btn-square cursor-default no-animation hover:bg-error" on:click={cleanupSearch}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="w-6 h-6"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentcolor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<line x1="18" y1="6" x2="6" y2="18" />
+				<line x1="6" y1="6" x2="18" y2="18" />
+			</svg>
+		</div>
+		<input
+			id="search"
+			class="input w-full"
+			type="text"
+			placeholder="Search for services"
+			bind:value={search}
+			on:input={() => doSearch()}
+		/>
+	</div>
+</div>
+<div class="container lg:mx-auto lg:pt-20 lg:p-0 px-8 pt-20">
+<div class="flex flex-wrap justify-center  gap-8">
+	{#each filteredTypes as type}
 		<div class="p-2">
 			<form on:submit|preventDefault={() => handleSubmit(type.name)}>
 				<button type="submit" class="box-selection relative text-xl font-bold hover:bg-pink-600">
@@ -59,3 +101,4 @@
 		</div>
 	{/each}
 </div>
+</div>