feat(frontend): show ids in attach (#2786)

* feat(frontend): show ids in attach

* chore: fmt

Author: peterpeterparker

src/frontend/src/lib/components/app/core/DevId.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Identifier from '$lib/components/ui/Identifier.svelte';
+	import Value from '$lib/components/ui/Value.svelte';
+	import { devId } from '$lib/derived/dev.derived';
+	import { i18n } from '$lib/stores/app/i18n.store';
+</script>
+
+<Value>
+	{#snippet label()}
+		{$i18n.profile.dev_id}
+	{/snippet}
+
+	<Identifier identifier={$devId?.toText() ?? ''} />
+</Value>

src/frontend/src/lib/components/mission-control/MissionControlId.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Identifier from '$lib/components/ui/Identifier.svelte';
+	import Value from '$lib/components/ui/Value.svelte';
+	import { i18n } from '$lib/stores/app/i18n.store';
+	import type { MissionControlId } from '$lib/types/mission-control';
+
+	interface Props {
+		missionControlId: MissionControlId;
+	}
+
+	let { missionControlId }: Props = $props();
+</script>
+
+<Value>
+	{#snippet label()}
+		{$i18n.mission_control.id}
+	{/snippet}
+
+	<Identifier identifier={missionControlId.toText()} shorten={false} small={false} />
+</Value>

src/frontend/src/lib/components/mission-control/MissionControlOverview.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
+	import MissionControlId from '$lib/components/mission-control/MissionControlId.svelte';
 	import MissionControlOverviewActions from '$lib/components/mission-control/MissionControlOverviewActions.svelte';
 	import MissionControlRuntimeActions from '$lib/components/mission-control/MissionControlRuntimeActions.svelte';
 	import CanisterOverview from '$lib/components/modules/canister/display/CanisterOverview.svelte';
 	import CanisterSubnet from '$lib/components/modules/canister/display/CanisterSubnet.svelte';
 	import SegmentVersion from '$lib/components/modules/segments/SegmentVersion.svelte';
-	import Identifier from '$lib/components/ui/Identifier.svelte';
-	import Value from '$lib/components/ui/Value.svelte';
 	import { authSignedIn } from '$lib/derived/auth.derived';
 	import { missionControlVersion } from '$lib/derived/version.derived';
 	import { i18n } from '$lib/stores/app/i18n.store';
-	import type { MissionControlId } from '$lib/types/mission-control';
+	import type { MissionControlId as MissionControlIdType } from '$lib/types/mission-control';
 
 	interface Props {
-		missionControlId: MissionControlId;
+		missionControlId: MissionControlIdType;
 	}
 
 	let { missionControlId }: Props = $props();
@@ -26,12 +25,7 @@
 		<div class="columns-3 fit-column-1">
 			<div class="id">
 				<div>
-					<Value>
-						{#snippet label()}
-							{$i18n.mission_control.id}
-						{/snippet}
-						<Identifier identifier={missionControlId.toText()} shorten={false} small={false} />
-					</Value>
+					<MissionControlId {missionControlId} />
 				</div>
 
 				<CanisterSubnet canisterId={missionControlId} />

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

@@ -3,8 +3,8 @@
 	import { Principal } from '@icp-sdk/core/principal';
 	import InputCanisterId from '$lib/components/app/core/InputCanisterId.svelte';
 	import IconLink from '$lib/components/icons/IconLink.svelte';
+	import AttachSegmentInfo from '$lib/components/modules/attach-detach/AttachSegmentInfo.svelte';
 	import CheckboxInline from '$lib/components/ui/CheckboxInline.svelte';
-	import Html from '$lib/components/ui/Html.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';
@@ -103,6 +103,8 @@
 			</CheckboxInline>
 		{/if}
 
+		<AttachSegmentInfo />
+
 		<button class="submit" disabled={$isBusy || !validConfirm} type="submit">
 			{$i18n.core.submit}
 		</button>
@@ -118,7 +120,6 @@
 		margin: var(--padding-1_5x) 0 0;
 	}
 
-	p,
 	span {
 		font-size: var(--font-size-small);
 	}

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { nonNullish } from '@dfinity/utils';
+	import DevId from '$lib/components/app/core/DevId.svelte';
+	import MissionControlId from '$lib/components/mission-control/MissionControlId.svelte';
+	import Hr from '$lib/components/ui/Hr.svelte';
+	import { missionControlId } from '$lib/derived/console/account.mission-control.derived';
+</script>
+
+<div class="info">
+	<Hr />
+
+	<div class="dev-id">
+		<DevId />
+	</div>
+
+	{#if nonNullish($missionControlId)}
+		<div>
+			<MissionControlId missionControlId={$missionControlId} />
+		</div>
+	{/if}
+
+	<Hr />
+</div>
+
+<style lang="scss">
+	.info {
+		margin: var(--padding-2x) 0 0;
+		font-size: var(--font-size-small);
+	}
+
+	.dev-id {
+		padding: var(--padding-2x) 0 0;
+	}
+</style>

src/frontend/src/routes/(single)/profile/+page.svelte

@@ -2,8 +2,8 @@
 	import { nonNullish } from '@dfinity/utils';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import DevId from '$lib/components/app/core/DevId.svelte';
 	import IdentityGuard from '$lib/components/auth/guards/IdentityGuard.svelte';
-	import Identifier from '$lib/components/ui/Identifier.svelte';
 	import Value from '$lib/components/ui/Value.svelte';
 	import { authSignedOut } from '$lib/derived/auth.derived';
 	import { credits } from '$lib/derived/console/credits.derived';
@@ -32,12 +32,7 @@
 		<div class="columns-3 fit-column-1">
 			<div>
 				<div class="dev-id">
-					<Value>
-						{#snippet label()}
-							{$i18n.profile.dev_id}
-						{/snippet}
-						<Identifier identifier={$authStore.identity?.getPrincipal().toText() ?? ''} />
-					</Value>
+					<DevId />
 				</div>
 
 				<Value>