fix: UI + refactor

apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import DocLink from '$lib/components/DocLink.svelte';
 	import { t } from '$lib/translations';
 	export let readOnly: any;
 	export let service: any;
 </script>
 
 <div class="flex space-x-1 py-5">
-	<div class="title">Ghost</div>
-	<Explainer text={'You can change these values in the Ghost admin panel.'} />
+	<div class="title">
+		Ghost <DocLink explanation="You can change these values in the Ghost admin panel." />
+	</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
 	<label for="email">{$t('forms.default_email_address')}</label>

apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import { t } from '$lib/translations';
 	export let service: any;
 </script>

apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
+	import DocLink from '$lib/components/DocLink.svelte';
 	import { appSession, status } from '$lib/store';
 	import { t } from '$lib/translations';
 	export let service: any;
@@ -11,7 +11,11 @@
 	<div class="title">Plausible Analytics</div>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="scriptName">Script Name</label>
+	<label for="scriptName"
+		>Script Name <DocLink
+			explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
+		/></label
+	>
 	<input
 		name="scriptName"
 		id="scriptName"
@@ -21,9 +25,6 @@
 		bind:value={service.plausibleAnalytics.scriptName}
 		required
 	/>
-	<Explainer
-		text="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
-	/>
 </div>
 <div class="grid grid-cols-2 items-center px-10">
 	<label for="email">{$t('forms.email')}</label>

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

@@ -14,7 +14,6 @@
 	import { t } from '$lib/translations';
 	import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
 	import Setting from '$lib/components/Setting.svelte';
 
 	import Fider from './_Fider.svelte';
@@ -31,6 +30,7 @@
 	import Moodle from './_Moodle.svelte';
 	import Searxng from './_Searxng.svelte';
 	import Weblate from './_Weblate.svelte';
+	import DocLink from '$lib/components/DocLink.svelte';
 
 	const { id } = $page.params;
 	$: isDisabled =
@@ -283,8 +283,9 @@
 				</div>
 				<div class="grid grid-cols-2 px-10">
 					<div class="flex-col ">
-						<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100">API URL</label>
-						<Explainer text={$t('application.https_explainer')} />
+						<label for="apiFqdn" class="pt-2 text-base font-bold text-stone-100"
+							>API URL <DocLink explanation={$t('application.https_explainer')} /></label
+						>
 					</div>
 
 					<CopyPasswordField
@@ -302,9 +303,9 @@
 				<div class="grid grid-cols-2 px-10">
 					<div class="flex-col ">
 						<label for="fqdn" class="pt-2 text-base font-bold text-stone-100"
-							>{$t('application.url_fqdn')}</label
-						>
-						<Explainer text={$t('application.https_explainer')} />
+							>{$t('application.url_fqdn')}
+							<DocLink explanation={$t('application.https_explainer')} />
+						</label>
 					</div>
 
 					<CopyPasswordField
@@ -364,7 +365,11 @@
 				/>
 			</div>
 			<div class="grid grid-cols-2 items-center px-10">
-				<label for="exposePort" class="text-base font-bold text-stone-100">Exposed Port</label>
+				<label for="exposePort" class="text-base font-bold text-stone-100"
+					>Exposed Port <DocLink
+						explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
+					/></label
+				>
 				<input
 					readonly={!$appSession.isAdmin && !$status.service.isRunning}
 					disabled={!$appSession.isAdmin ||
@@ -375,9 +380,6 @@
 					bind:value={service.exposePort}
 					placeholder="12345"
 				/>
-				<Explainer
-					text={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
-				/>
 			</div>
 
 			{#if service.type === 'plausibleanalytics'}

apps/ui/src/routes/services/[id]/_Services/_Umami.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
-	import Explainer from '$lib/components/Explainer.svelte';
-
+	import DocLink from '$lib/components/DocLink.svelte';
 	export let service: any;
 </script>
 
@@ -13,7 +12,11 @@
 	<input name="adminUser" id="adminUser" placeholder="admin" value="admin" disabled readonly />
 </div>
 <div class="grid grid-cols-2 items-center px-10">
-	<label for="umamiAdminPassword">Initial Admin Password</label>
+	<label for="umamiAdminPassword"
+		>Initial Admin Password <DocLink
+			explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
+		/></label
+	>
 	<CopyPasswordField
 		isPasswordField
 		name="umamiAdminPassword"
@@ -23,7 +26,4 @@
 		disabled
 		readonly
 	/>
-	<Explainer
-		text="It could be changed in Umami. <br>This is just the password set initially after the first start."
-	/>
 </div>