fixes

apps/ui/src/lib/components/svg/services/ServiceIcons.svelte

@@ -5,4 +5,4 @@
 	const name: any = type && type[0].toUpperCase() + type.substring(1).toLowerCase();
 </script>
 
-<svelte:component this={Icons[name]} {isAbsolute} />
+<svelte:component this={Icons[name.replace('.','').replaceAll(' ','')]} {isAbsolute} />

apps/ui/src/lib/components/svg/services/index.ts

@@ -6,7 +6,7 @@ export { default as Vscodeserver } from './VSCodeServer.svelte';
 export { default as Wordpress } from './Wordpress.svelte';
 export { default as Vaultwarden } from './VaultWarden.svelte';
 export { default as Languagetool } from './LanguageTool.svelte';
-export { default as N8n } from './N8n.svelte';
+export { default as N8nio } from './N8n.svelte';
 export { default as Uptimekuma } from './UptimeKuma.svelte';
 export { default as Ghost } from './Ghost.svelte';
 export { default as Meilisearch } from './MeiliSearch.svelte';

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

@@ -34,6 +34,7 @@
 	import { goto } from '$app/navigation';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
+	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
 
 	const { id } = $page.params;
 	const from = $page.url.searchParams.get('from');
@@ -48,9 +49,9 @@
 	}
 	function doSearch() {
 		filteredServices = services.filter(
-			(type: any) =>
-				type.name.toLowerCase().includes(search.toLowerCase()) ||
-				type.labels.some((label: string) => label.toLowerCase().includes(search.toLowerCase()))
+			(service: any) =>
+			service.name.toLowerCase().includes(search.toLowerCase()) ||
+			service.labels?.some((label: string) => label.toLowerCase().includes(search.toLowerCase()))
 		);
 	}
 	function cleanupSearch() {
@@ -93,7 +94,7 @@
 			<div class="p-2">
 				<form on:submit|preventDefault={() => handleSubmit(service)}>
 					<button type="submit" class="box-selection relative text-xl font-bold hover:bg-primary">
-						<!-- <ServiceIcons type={service.name} /> -->
+						<ServiceIcons type={service.name} />
 						{service.name}
 					</button>
 				</form>

apps/ui/src/routes/services/[id]/index.svelte

@@ -389,9 +389,13 @@
 		<div>
 			{#each Object.keys(template) as oneService}
 				<div
-					class="flex flex-row my-6 space-x-2"
-					class:border-b={template[oneService].environment.length > 0}
-					class:border-coolgray-500={template[oneService].environment.length > 0}
+					class="flex flex-row my-2 space-x-2"
+					class:my-6={template[oneService].environment.length > 0 &&
+						template[oneService].environment.find((env) => env.main === oneService)}
+					class:border-b={template[oneService].environment.length > 0 &&
+						template[oneService].environment.find((env) => env.main === oneService)}
+					class:border-coolgray-500={template[oneService].environment.length > 0 &&
+						template[oneService].environment.find((env) => env.main === oneService)}
 				>
 					<div class="title font-bold pb-3 capitalize">
 						{template[oneService].name ||
@@ -405,10 +409,15 @@
 						{#each template[oneService].environment as variable}
 							{#if variable.main === oneService}
 								<div class="grid grid-cols-2 items-center gap-2">
-									<label class="h-10" for={variable.name}>{variable.label || variable.name}</label>
+									<label class="h-10" for={variable.name}
+										>{variable.label || variable.name}
+										{#if variable.description}
+											<Explainer explanation={variable.description} />
+										{/if}</label
+									>
+
 									{#if variable.defaultValue === '$$generate_fqdn'}
-										<input
-											class="w-full"
+										<CopyPasswordField
 											disabled
 											readonly
 											name={variable.name}
@@ -416,8 +425,7 @@
 											value={service.fqdn}
 										/>
 									{:else if variable.defaultValue === '$$generate_domain'}
-										<input
-											class="w-full"
+										<CopyPasswordField
 											disabled
 											readonly
 											name={variable.name}
@@ -425,8 +433,7 @@
 											value={getDomain(service.fqdn) || ''}
 										/>
 									{:else if variable.defaultValue === '$$generate_network'}
-										<input
-											class="w-full"
+										<CopyPasswordField
 											disabled
 											readonly
 											name={variable.name}
@@ -472,6 +479,7 @@
 										/>
 									{:else}
 										<CopyPasswordField
+											placeholder={variable.defaultValue || 'optional'}
 											required={variable?.required}
 											readonly={isDisabled}
 											disabled={isDisabled}