feat(frontend): attach UFO

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

@@ -4,7 +4,7 @@
 		size?: string;
 	}
 
-	let { size = '24px' }: Props = $props();
+	let { size = '20px' }: Props = $props();
 </script>
 
 <svg

src/frontend/src/lib/components/modules/attach-detach/AttachSegment.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { Principal } from '@icp-sdk/core/principal';
-	import type { Snippet } from 'svelte';
 	import InputCanisterId from '$lib/components/app/core/InputCanisterId.svelte';
+	import IconLink from '$lib/components/icons/IconLink.svelte';
 	import Popover from '$lib/components/ui/Popover.svelte';
+	import Value from '$lib/components/ui/Value.svelte';
 	import { isBusy } from '$lib/derived/app/busy.derived';
 	import { authIdentity } from '$lib/derived/auth.derived';
 	import { missionControlId } from '$lib/derived/console/account.mission-control.derived';
@@ -12,15 +13,9 @@
 	import { toasts } from '$lib/stores/app/toasts.store';
 	import { i18nCapitalize, i18nFormat } from '$lib/utils/i18n.utils';
 
-	interface Props {
-		segment: 'satellite' | 'orbiter';
-		visible: boolean | undefined;
-		title?: Snippet;
-		input?: Snippet;
-		onsuccess: () => void;
-	}
+	let visible = $state(false);
 
-	let { segment, visible = $bindable(), title, input, onsuccess }: Props = $props();
+	let segment = $state<'satellite' | 'orbiter' | 'ufo'>('satellite');
 
 	let validConfirm = $state(false);
 	let canisterId = $state('');
@@ -53,8 +48,6 @@
 
 		visible = false;
 
-		onsuccess();
-
 		toasts.success({
 			text: i18nCapitalize(
 				i18nFormat($i18n.canisters.attach_success, [
@@ -68,13 +61,33 @@
 	};
 </script>
 
+<button class="primary" aria-label={$i18n.core.attach} onclick={() => (visible = true)}
+	><IconLink /></button
+>
+
 <Popover backdrop="dark" center bind:visible>
 	<form class="container" onsubmit={handleSubmit}>
-		<h3>{@render title?.()}</h3>
+		<h3>{$i18n.launchpad.attach_title}</h3>
+
+		<p>{$i18n.launchpad.attach_description}</p>
+
+		<div>
+			<Value>
+				{#snippet label()}
+					{$i18n.cli.module}
+				{/snippet}
+
+				<select bind:value={segment}>
+					<option value="satellite">{$i18n.satellites.satellite}</option>
+					<option value="orbiter">{$i18n.analytics.orbiter} ({$i18n.analytics.title})</option>
+					<option value="ufo">{$i18n.ufo.title}</option>
+				</select>
+			</Value>
+		</div>
 
 		<InputCanisterId disabled={$isBusy} bind:canisterId bind:valid={validConfirm}>
 			{#snippet label()}
-				{@render input?.()}
+				{$i18n.launchpad.attach_id}
 			{/snippet}
 		</InputCanisterId>
 
@@ -92,4 +105,8 @@
 	label {
 		margin: var(--padding-1_5x) 0 0;
 	}
+
+	p {
+		font-size: var(--font-size-small);
+	}
 </style>

src/frontend/src/lib/components/modules/launchpad/LaunchpadToolbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { debounce } from '@dfinity/utils';
 	import { run } from 'svelte/legacy';
-	import AttachActions from '$lib/components/modules/attach-detach/AttachActions.svelte';
+	import AttachSegment from '$lib/components/modules/attach-detach/AttachSegment.svelte';
 	import LaunchpadLayout from '$lib/components/modules/launchpad/LaunchpadLayout.svelte';
 	import LaunchpadNewActions from '$lib/components/modules/launchpad/LaunchpadNewActions.svelte';
 	import Input from '$lib/components/ui/Input.svelte';
@@ -37,7 +37,7 @@
 
 		<LaunchpadLayout />
 
-		<AttachActions />
+		<AttachSegment />
 	</div>
 
 	<LaunchpadNewActions />

src/frontend/src/lib/components/ui/Popover.svelte

@@ -114,7 +114,7 @@
 		}
 
 		&.center {
-			--popover-min-size: 280px;
+			--popover-min-size: 300px;
 
 			&.wide {
 				--popover-min-size: 540px;

src/frontend/src/lib/i18n/en.json

@@ -311,7 +311,6 @@
 		"loading_launchpad": "Loading your launchpad...",
 		"go_launchpad": "Go to launchpad",
 		"launchpad": "Launchpad",
-		"attach": "Attach Satellite",
 		"morning": "Morning",
 		"afternoon": "Afternoon",
 		"good_evening": "Good evening",
@@ -320,7 +319,10 @@
 		"commander": "Commander",
 		"spacebuilder": "Spacebuilder",
 		"captain": "Captain",
-		"getting_started_credits": "Welcome to Juno! Reach out on <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> and we'll get you started for free."
+		"getting_started_credits": "Welcome to Juno! Reach out on <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> and we'll get you started for free.",
+		"attach_title": "Attach Module",
+		"attach_description": "Connect an existing Satellite, Orbiter, or UFO to your Console.",
+		"attach_id": "Enter ID"
 	},
 	"satellites": {
 		"title": "Satellites",
@@ -509,8 +511,6 @@
 		"others": "Others",
 		"browsers": "Browsers",
 		"operating_systems": "Operating systems",
-		"attach": "Attach analytics",
-		"attach_id": "Enter Orbiter ID",
 		"score": "Score",
 		"rating": "Rating",
 		"web_vitals": "Web Vitals",

src/frontend/src/lib/i18n/zh-cn.json

@@ -312,7 +312,6 @@
 		"loading_launchpad": "正在加载启动台...",
 		"go_launchpad": "前往启动台",
 		"launchpad": "启动台",
-		"attach": "关联卫星",
 		"morning": "早上好",
 		"afternoon": "下午好",
 		"good_evening": "晚上好",
@@ -321,7 +320,10 @@
 		"commander": "指挥官",
 		"spacebuilder": "太空建造者",
 		"captain": "船长",
-		"getting_started_credits": "欢迎来到 Juno！在 <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> 上联系我们，免费开始您的旅程。"
+		"getting_started_credits": "欢迎来到 Juno！在 <a href=\"https://discord.gg/wHZ57Z2RAG\" rel=\"external noopener noreferrer\" target=\"_blank\"><strong>Discord</strong></a> 上联系我们，免费开始您的旅程。",
+		"attach_title": "附加模块",
+		"attach_description": "将现有的卫星、轨道器或 UFO 连接到您的控制台。",
+		"attach_id": "输入 ID"
 	},
 	"satellites": {
 		"title": "所有卫星",
@@ -510,8 +512,6 @@
 		"others": "其他",
 		"browsers": "浏览器",
 		"operating_systems": "操作系统",
-		"attach": "附加统计",
-		"attach_id": "输入轨道器ID",
 		"score": "得分",
 		"rating": "评级",
 		"web_vitals": "网页核心指标",

src/frontend/src/lib/services/attach-detach/attach.services.ts

@@ -45,7 +45,11 @@ export const attachSegment = async ({
 		return { result: 'error' };
 	}
 
-	const { valid } = await assertKnowSegmentType({ segment, segmentId, identity });
+	const { valid } =
+		segment === 'ufo'
+			? // No preventive assertion for UFO #yolo
+				{ valid: true }
+			: await assertKnowSegmentType({ segment, segmentId, identity });
 
 	if (!valid) {
 		return { result: 'error' };

src/frontend/src/lib/types/i18n.d.ts

@@ -318,7 +318,6 @@ interface I18nLaunchpad {
 	loading_launchpad: string;
 	go_launchpad: string;
 	launchpad: string;
-	attach: string;
 	morning: string;
 	afternoon: string;
 	good_evening: string;
@@ -328,6 +327,9 @@ interface I18nLaunchpad {
 	spacebuilder: string;
 	captain: string;
 	getting_started_credits: string;
+	attach_title: string;
+	attach_description: string;
+	attach_id: string;
 }
 
 interface I18nSatellites {
@@ -523,8 +525,6 @@ interface I18nAnalytics {
 	others: string;
 	browsers: string;
 	operating_systems: string;
-	attach: string;
-	attach_id: string;
 	score: string;
 	rating: string;
 	web_vitals: string;