Skip to content

Commit 0e3d389

Browse files
peterpeterparkerpeterpeterparker
authored
feat(frontend): launchpad with toolbar even for new user (#2783)
1 parent 9623738 commit 0e3d389

6 files changed

Lines changed: 106 additions & 77 deletions

File tree

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

Lines changed: 21 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,37 @@
11
<script lang="ts">
22
import { nonNullish } from '@dfinity/utils';
3-
import { run } from 'svelte/legacy';
4-
import { fade } from 'svelte/transition';
5-
import LaunchpadFirstSatellite from '$lib/components/modules/launchpad/LaunchpadFirstSatellite.svelte';
3+
import LaunchpadGuard from '$lib/components/modules/launchpad/LaunchpadGuard.svelte';
4+
import LaunchpadHeader from '$lib/components/modules/launchpad/LaunchpadHeader.svelte';
65
import LaunchpadSegments from '$lib/components/modules/launchpad/LaunchpadSegments.svelte';
7-
import Message from '$lib/components/ui/Message.svelte';
8-
import Spinner from '$lib/components/ui/Spinner.svelte';
6+
import LaunchpadToolbar from '$lib/components/modules/launchpad/LaunchpadToolbar.svelte';
7+
import { account } from '$lib/derived/console/account.derived';
98
import { satellites } from '$lib/derived/satellites.derived';
10-
import { i18n } from '$lib/stores/app/i18n.store';
119
12-
let loading = $state(true);
13-
run(() => {
14-
(() => {
15-
if (nonNullish($satellites)) {
16-
setTimeout(() => (loading = false), 500);
17-
return;
18-
}
10+
let filter = $state('');
1911
20-
loading = true;
21-
})();
22-
});
12+
// If the user was never updated, they never received credits.
13+
// We do this check to e.g. not display the getting started banner on Skylab.
14+
let userNoFirstCredits = $derived(
15+
nonNullish($account) &&
16+
$account.created_at === $account.updated_at &&
17+
$account.credits.e8s === 0n
18+
);
19+
20+
let withoutGreetingsReturningLabel = $derived(($satellites?.length ?? 0n) === 0n);
2321
</script>
2422

25-
{#if loading || ($satellites?.length ?? 0n) === 0}
26-
{#if loading}
27-
<div class="spinner">
28-
<Message>
29-
{#snippet icon()}
30-
<Spinner inline />
31-
{/snippet}
23+
<LaunchpadGuard>
24+
<section>
25+
<LaunchpadHeader userGettingStarted={userNoFirstCredits} {withoutGreetingsReturningLabel}>
26+
<LaunchpadToolbar bind:filter />
27+
</LaunchpadHeader>
3228

33-
<p>{$i18n.launchpad.loading_launchpad}</p>
34-
</Message>
35-
</div>
36-
{:else}
37-
<section in:fade>
38-
<LaunchpadFirstSatellite />
39-
</section>
40-
{/if}
41-
{:else if ($satellites?.length ?? 0) >= 1}
42-
<section in:fade>
43-
<LaunchpadSegments />
29+
<LaunchpadSegments {filter} />
4430
</section>
45-
{/if}
31+
</LaunchpadGuard>
4632

4733
<style lang="scss">
4834
@use '../../../styles/mixins/grid';
49-
@use '../../../styles/mixins/media';
5035
5136
section {
5237
@include grid.twelve-columns;
@@ -57,17 +42,4 @@
5742
margin-top: var(--padding-4x);
5843
}
5944
}
60-
61-
section,
62-
h1,
63-
div {
64-
position: relative;
65-
}
66-
67-
.spinner {
68-
position: fixed;
69-
top: 50%;
70-
left: 50%;
71-
transform: translate(-50%, -75%);
72-
}
7345
</style>

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<script lang="ts">
2-
import { nonNullish } from '@dfinity/utils';
32
import IconRocket from '$lib/components/icons/IconRocket.svelte';
43
import LaunchpadButton from '$lib/components/modules/launchpad/LaunchpadButton.svelte';
5-
import LaunchpadHeader from '$lib/components/modules/launchpad/LaunchpadHeader.svelte';
64
import { testIds } from '$lib/constants/test-ids.constants';
75
import { authIdentity } from '$lib/derived/auth.derived';
8-
import { account } from '$lib/derived/console/account.derived';
96
import { missionControlId } from '$lib/derived/console/account.mission-control.derived';
107
import { initSatelliteWizard } from '$lib/services/factory/factory.create.services';
118
import { i18n } from '$lib/stores/app/i18n.store';
9+
import { layoutLaunchpad } from '$lib/stores/app/layout-launchpad.store';
10+
import { LaunchpadLayout } from '$lib/types/layout';
1211
1312
const createSatellite = async () => {
1413
await initSatelliteWizard({
@@ -17,20 +16,12 @@
1716
});
1817
};
1918
20-
// If the user was never updated, they never received credits.
21-
// We do this check to e.g. not display the getting started banner on Skylab.
22-
let userNoFirstCredits = $derived(
23-
nonNullish($account) &&
24-
$account.created_at === $account.updated_at &&
25-
$account.credits.e8s === 0n
26-
);
19+
let row = $derived($layoutLaunchpad === LaunchpadLayout.LIST);
2720
</script>
2821

29-
<LaunchpadHeader userGettingStarted={userNoFirstCredits} withoutGreetingsReturningLabel />
30-
31-
<LaunchpadButton onclick={createSatellite} testId={testIds.launchpad.launch}>
32-
<div class="new">
33-
<IconRocket size="48px" />
22+
<LaunchpadButton onclick={createSatellite} {row} testId={testIds.launchpad.launch}>
23+
<div class="new" class:row>
24+
<IconRocket size={row ? '24px' : '48px'} />
3425

3526
<p>{$i18n.satellites.launch_first}</p>
3627
</div>
@@ -48,14 +39,24 @@
4839
gap: var(--padding-4x);
4940
5041
height: 100%;
42+
43+
&.row {
44+
justify-content: flex-end;
45+
flex-direction: row;
46+
gap: var(--padding-3x);
47+
}
48+
49+
&:not(.row) {
50+
p {
51+
max-width: 150px;
52+
text-align: center;
53+
}
54+
}
5155
}
5256
5357
p {
5458
@include fonts.bold(true);
5559
56-
max-width: 150px;
57-
text-align: center;
58-
5960
margin: 0;
6061
}
6162
</style>

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script lang="ts">
2+
import { nonNullish } from '@dfinity/utils';
3+
import type { Snippet } from 'svelte';
4+
import { run } from 'svelte/legacy';
5+
import { fade } from 'svelte/transition';
6+
import Message from '$lib/components/ui/Message.svelte';
7+
import Spinner from '$lib/components/ui/Spinner.svelte';
8+
import { satellites } from '$lib/derived/satellites.derived';
9+
import { i18n } from '$lib/stores/app/i18n.store';
10+
11+
interface Props {
12+
children: Snippet;
13+
}
14+
15+
let { children }: Props = $props();
16+
17+
let loading = $state(true);
18+
run(() => {
19+
(() => {
20+
if (nonNullish($satellites)) {
21+
setTimeout(() => (loading = false), 500);
22+
return;
23+
}
24+
25+
loading = true;
26+
})();
27+
});
28+
</script>
29+
30+
{#if loading}
31+
<div class="spinner">
32+
<Message>
33+
{#snippet icon()}
34+
<Spinner inline />
35+
{/snippet}
36+
37+
<p>{$i18n.launchpad.loading_launchpad}</p>
38+
</Message>
39+
</div>
40+
{:else if nonNullish($satellites)}
41+
<div in:fade>
42+
{@render children()}
43+
</div>
44+
{/if}
45+
46+
<style lang="scss">
47+
.spinner {
48+
position: fixed;
49+
top: 50%;
50+
left: 50%;
51+
transform: translate(-50%, -75%);
52+
}
53+
</style>

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<script lang="ts">
22
import LaunchpadAnalytics from '$lib/components/modules/launchpad/LaunchpadAnalytics.svelte';
3-
import LaunchpadHeader from '$lib/components/modules/launchpad/LaunchpadHeader.svelte';
3+
import LaunchpadFirstSatellite from '$lib/components/modules/launchpad/LaunchpadFirstSatellite.svelte';
44
import LaunchpadMonitoring from '$lib/components/modules/launchpad/LaunchpadMonitoring.svelte';
55
import LaunchpadSatellite from '$lib/components/modules/launchpad/LaunchpadSatellite.svelte';
6-
import LaunchpadToolbar from '$lib/components/modules/launchpad/LaunchpadToolbar.svelte';
76
import LaunchpadUfo from '$lib/components/modules/launchpad/LaunchpadUfo.svelte';
87
import { sortedSatelliteUis } from '$lib/derived/satellites.derived';
98
import { sortedUfoUis } from '$lib/derived/ufos.derived';
109
import { satelliteMatchesFilter } from '$lib/utils/satellite.utils';
1110
import { ufoMatchesFilter } from '$lib/utils/ufo.utils';
1211
13-
let filter = $state('');
12+
interface Props {
13+
filter: string;
14+
}
15+
16+
let { filter }: Props = $props();
1417
1518
let satellites = $derived(
1619
$sortedSatelliteUis.filter((satellite) =>
@@ -23,9 +26,9 @@
2326
);
2427
</script>
2528

26-
<LaunchpadHeader>
27-
<LaunchpadToolbar bind:filter />
28-
</LaunchpadHeader>
29+
{#if (satellites?.length ?? 0n) === 0}
30+
<LaunchpadFirstSatellite />
31+
{/if}
2932

3033
<LaunchpadMonitoring />
3134

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@
324324
},
325325
"satellites": {
326326
"title": "Satellites",
327-
"launch": "Launch a new Satellite",
327+
"launch": "Launch a Satellite",
328328
"launch_first": "Launch your first Satellite",
329329
"search": "Search",
330330
"satellite": "Satellite",
@@ -1184,7 +1184,7 @@
11841184
"create_ufo_price": "Starting a UFO requires {0}.",
11851185
"ufo_name": "UFO name",
11861186
"enter_name": "Enter a name for your UFO",
1187-
"create": "Create UFO",
1187+
"create": "Spin up a UFO",
11881188
"ready": "Your UFO is ready!",
11891189
"overview": "Overview",
11901190
"loading_ufos": "Loading your UFOs",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@
325325
},
326326
"satellites": {
327327
"title": "所有卫星",
328-
"launch": "部署新卫星",
328+
"launch": "启动一颗卫星",
329329
"launch_first": "启动您的第一个 Satellite",
330330
"search": "搜索",
331331
"satellite": "卫星",
@@ -1186,7 +1186,7 @@
11861186
"create_ufo_price": "启动 UFO 需要 {0}。",
11871187
"ufo_name": "UFO 名称",
11881188
"enter_name": "为您的 UFO 输入名称",
1189-
"create": "创建 UFO",
1189+
"create": "启动 UFO",
11901190
"ready": "您的 UFO 已准备就绪！",
11911191
"overview": "概览",
11921192
"loading_ufos": "正在加载您的 UFO",

0 commit comments

Comments
 (0)