From cbe079e4b626e4c57a0baae4423db80ccd559a7d Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 24 Sep 2026 16:36:42 +0200
Subject: [PATCH] web/repo: replace service picker tooltip with docs link

Signed-off-by: eti <eti@eti.tf>
---
 .../lib/components/repo/ServicePicker.svelte  | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/repo/ServicePicker.svelte b/web/src/lib/components/repo/ServicePicker.svelte
index b5aa0c5d7..3d57112e2 100644
--- a/web/src/lib/components/repo/ServicePicker.svelte
+++ b/web/src/lib/components/repo/ServicePicker.svelte
@@ -9,12 +9,11 @@
 
 <script lang="ts">
 	import bonesRadioLoadingRow from "$lib/bones/bones-radio--loading-row.bones.json";
-	import DollyCheck from "$lib/components/icons/DollyCheck.svelte";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import { link } from "$lib/components/ui/Link.svelte";
 	import Radio from "$lib/components/ui/Radio.svelte";
-	import Tooltip from "$lib/components/ui/Tooltip.svelte";
 
 	interface Props {
 		kind: "knot" | "spindle";
@@ -49,22 +48,24 @@
 		</div>
 	{:then list}
 		{#each list as host (host)}
-			<div class="flex min-h-8 items-center">
+			<div class="flex min-h-8 items-center gap-xs">
 				<Radio value={host} bind:group={choice} name={kind}>
 					{#if host === official}
-						<span class="inline-flex items-center gap-xs">
-							Hosted by Tangled <span class="sr-only">({host})</span>
-							<Tooltip content="Tangled operates this {kind} for you.">
-								<DollyCheck
-									aria-hidden="true"
-									class="size-4"
-								/>
-							</Tooltip>
-						</span>
+						Hosted by Tangled. <span class="sr-only">({host})</span>
 					{:else}
 						{host}
 					{/if}
 				</Radio>
+				{#if host === official}
+					<a
+						href="https://docs.tangled.org/{kind}s"
+						target="_blank"
+						rel="external noopener noreferrer"
+						class={link({ class: "underline" })}
+					>
+						Learn more here.
+					</a>
+				{/if}
 			</div>
 		{/each}
 	{/await}
@@ -80,6 +81,6 @@
 		/>
 	</div>
 	{#if choice === OTHER_SERVICE}
-		<Checkbox bind:checked={remember} class="ml-xl mt-2xs">Remember this {kind}</Checkbox>
+		<Checkbox bind:checked={remember} class="mt-2xs ml-xl">Remember this {kind}</Checkbox>
 	{/if}
 </div>
-- 
2.51.2