feat(frontend): launchpad with toolbar even for new user

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

@@ -1,52 +1,37 @@
 <script lang="ts">
 	import { nonNullish } from '@dfinity/utils';
-	import { run } from 'svelte/legacy';
-	import { fade } from 'svelte/transition';
-	import LaunchpadFirstSatellite from '$lib/components/modules/launchpad/LaunchpadFirstSatellite.svelte';
+	import LaunchpadGuard from '$lib/components/modules/launchpad/LaunchpadGuard.svelte';
+	import LaunchpadHeader from '$lib/components/modules/launchpad/LaunchpadHeader.svelte';
 	import LaunchpadSegments from '$lib/components/modules/launchpad/LaunchpadSegments.svelte';
-	import Message from '$lib/components/ui/Message.svelte';
-	import Spinner from '$lib/components/ui/Spinner.svelte';
+	import LaunchpadToolbar from '$lib/components/modules/launchpad/LaunchpadToolbar.svelte';
+	import { account } from '$lib/derived/console/account.derived';
 	import { satellites } from '$lib/derived/satellites.derived';
-	import { i18n } from '$lib/stores/app/i18n.store';
 
-	let loading = $state(true);
-	run(() => {
-		(() => {
-			if (nonNullish($satellites)) {
-				setTimeout(() => (loading = false), 500);
-				return;
-			}
+	let filter = $state('');
 
-			loading = true;
-		})();
-	});
+	// If the user was never updated, they never received credits.
+	// We do this check to e.g. not display the getting started banner on Skylab.
+	let userNoFirstCredits = $derived(
+		nonNullish($account) &&
+			$account.created_at === $account.updated_at &&
+			$account.credits.e8s === 0n
+	);
+
+	let withoutGreetingsReturningLabel = $derived(($satellites?.length ?? 0n) === 0n);
 </script>
 
-{#if loading || ($satellites?.length ?? 0n) === 0}
-	{#if loading}
-		<div class="spinner">
-			<Message>
-				{#snippet icon()}
-					<Spinner inline />
-				{/snippet}
+<LaunchpadGuard>
+	<section>
+		<LaunchpadHeader userGettingStarted={userNoFirstCredits} {withoutGreetingsReturningLabel}>
+			<LaunchpadToolbar bind:filter />
+		</LaunchpadHeader>
 
-				<p>{$i18n.launchpad.loading_launchpad}</p>
-			</Message>
-		</div>
-	{:else}
-		<section in:fade>
-			<LaunchpadFirstSatellite />
-		</section>
-	{/if}
-{:else if ($satellites?.length ?? 0) >= 1}
-	<section in:fade>
-		<LaunchpadSegments />
+		<LaunchpadSegments {filter} />
 	</section>
-{/if}
+</LaunchpadGuard>
 
 <style lang="scss">
 	@use '../../../styles/mixins/grid';
-	@use '../../../styles/mixins/media';
 
 	section {
 		@include grid.twelve-columns;
@@ -57,17 +42,4 @@
 			margin-top: var(--padding-4x);
 		}
 	}
-
-	section,
-	h1,
-	div {
-		position: relative;
-	}
-
-	.spinner {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -75%);
-	}
 </style>

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

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { nonNullish } from '@dfinity/utils';
 	import IconRocket from '$lib/components/icons/IconRocket.svelte';
 	import LaunchpadButton from '$lib/components/modules/launchpad/LaunchpadButton.svelte';
-	import LaunchpadHeader from '$lib/components/modules/launchpad/LaunchpadHeader.svelte';
 	import { testIds } from '$lib/constants/test-ids.constants';
 	import { authIdentity } from '$lib/derived/auth.derived';
-	import { account } from '$lib/derived/console/account.derived';
 	import { missionControlId } from '$lib/derived/console/account.mission-control.derived';
 	import { initSatelliteWizard } from '$lib/services/factory/factory.create.services';
 	import { i18n } from '$lib/stores/app/i18n.store';
+	import { layoutLaunchpad } from '$lib/stores/app/layout-launchpad.store';
+	import { LaunchpadLayout } from '$lib/types/layout';
 
 	const createSatellite = async () => {
 		await initSatelliteWizard({
@@ -17,20 +16,12 @@
 		});
 	};
 
-	// If the user was never updated, they never received credits.
-	// We do this check to e.g. not display the getting started banner on Skylab.
-	let userNoFirstCredits = $derived(
-		nonNullish($account) &&
-			$account.created_at === $account.updated_at &&
-			$account.credits.e8s === 0n
-	);
+	let row = $derived($layoutLaunchpad === LaunchpadLayout.LIST);
 </script>
 
-<LaunchpadHeader userGettingStarted={userNoFirstCredits} withoutGreetingsReturningLabel />
-
-<LaunchpadButton onclick={createSatellite} testId={testIds.launchpad.launch}>
-	<div class="new">
-		<IconRocket size="48px" />
+<LaunchpadButton onclick={createSatellite} {row} testId={testIds.launchpad.launch}>
+	<div class="new" class:row>
+		<IconRocket size={row ? '24px' : '48px'} />
 
 		<p>{$i18n.satellites.launch_first}</p>
 	</div>
@@ -48,14 +39,24 @@
 		gap: var(--padding-4x);
 
 		height: 100%;
+
+		&.row {
+			justify-content: flex-end;
+			flex-direction: row;
+			gap: var(--padding-3x);
+		}
+
+		&:not(.row) {
+			p {
+				max-width: 150px;
+				text-align: center;
+			}
+		}
 	}
 
 	p {
 		@include fonts.bold(true);
 
-		max-width: 150px;
-		text-align: center;
-
 		margin: 0;
 	}
 </style>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { nonNullish } from '@dfinity/utils';
+	import type { Snippet } from 'svelte';
+	import { run } from 'svelte/legacy';
+	import { fade } from 'svelte/transition';
+	import Message from '$lib/components/ui/Message.svelte';
+	import Spinner from '$lib/components/ui/Spinner.svelte';
+	import { satellites } from '$lib/derived/satellites.derived';
+	import { i18n } from '$lib/stores/app/i18n.store';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	let loading = $state(true);
+	run(() => {
+		(() => {
+			if (nonNullish($satellites)) {
+				setTimeout(() => (loading = false), 500);
+				return;
+			}
+
+			loading = true;
+		})();
+	});
+</script>
+
+{#if loading}
+	<div class="spinner">
+		<Message>
+			{#snippet icon()}
+				<Spinner inline />
+			{/snippet}
+
+			<p>{$i18n.launchpad.loading_launchpad}</p>
+		</Message>
+	</div>
+{:else if nonNullish($satellites)}
+	<div in:fade>
+		{@render children()}
+	</div>
+{/if}
+
+<style lang="scss">
+	.spinner {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -75%);
+	}
+</style>

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

@@ -1,16 +1,19 @@
 <script lang="ts">
 	import LaunchpadAnalytics from '$lib/components/modules/launchpad/LaunchpadAnalytics.svelte';
-	import LaunchpadHeader from '$lib/components/modules/launchpad/LaunchpadHeader.svelte';
+	import LaunchpadFirstSatellite from '$lib/components/modules/launchpad/LaunchpadFirstSatellite.svelte';
 	import LaunchpadMonitoring from '$lib/components/modules/launchpad/LaunchpadMonitoring.svelte';
 	import LaunchpadSatellite from '$lib/components/modules/launchpad/LaunchpadSatellite.svelte';
-	import LaunchpadToolbar from '$lib/components/modules/launchpad/LaunchpadToolbar.svelte';
 	import LaunchpadUfo from '$lib/components/modules/launchpad/LaunchpadUfo.svelte';
 	import { sortedSatelliteUis } from '$lib/derived/satellites.derived';
 	import { sortedUfoUis } from '$lib/derived/ufos.derived';
 	import { satelliteMatchesFilter } from '$lib/utils/satellite.utils';
 	import { ufoMatchesFilter } from '$lib/utils/ufo.utils';
 
-	let filter = $state('');
+	interface Props {
+		filter: string;
+	}
+
+	let { filter }: Props = $props();
 
 	let satellites = $derived(
 		$sortedSatelliteUis.filter((satellite) =>
@@ -23,9 +26,9 @@
 	);
 </script>
 
-<LaunchpadHeader>
-	<LaunchpadToolbar bind:filter />
-</LaunchpadHeader>
+{#if (satellites?.length ?? 0n) === 0}
+	<LaunchpadFirstSatellite />
+{/if}
 
 <LaunchpadMonitoring />
 

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

@@ -324,7 +324,7 @@
 	},
 	"satellites": {
 		"title": "Satellites",
-		"launch": "Launch a new Satellite",
+		"launch": "Launch a Satellite",
 		"launch_first": "Launch your first Satellite",
 		"search": "Search",
 		"satellite": "Satellite",
@@ -1184,7 +1184,7 @@
 		"create_ufo_price": "Starting a UFO requires {0}.",
 		"ufo_name": "UFO name",
 		"enter_name": "Enter a name for your UFO",
-		"create": "Create UFO",
+		"create": "Spin up a UFO",
 		"ready": "Your UFO is ready!",
 		"overview": "Overview",
 		"loading_ufos": "Loading your UFOs",

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

@@ -325,7 +325,7 @@
 	},
 	"satellites": {
 		"title": "所有卫星",
-		"launch": "部署新卫星",
+		"launch": "启动一颗卫星",
 		"launch_first": "启动您的第一个 Satellite",
 		"search": "搜索",
 		"satellite": "卫星",
@@ -1186,7 +1186,7 @@
 		"create_ufo_price": "启动 UFO 需要 {0}。",
 		"ufo_name": "UFO 名称",
 		"enter_name": "为您的 UFO 输入名称",
-		"create": "创建 UFO",
+		"create": "启动 UFO",
 		"ready": "您的 UFO 已准备就绪！",
 		"overview": "概览",
 		"loading_ufos": "正在加载您的 UFO",