feat(frontend): ufo settings and snapshots (#2781)

* feat(frontend): ufo settings and snapshots

* chore: fmt

Author: peterpeterparker

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

@@ -122,11 +122,11 @@
 
 		<div>
 			<a
-					class="link not-themed"
-					class:collapsed={$menuCollapsed}
-					class:selected={isRouteSelected({ routeId, path: 'ufo' })}
-					href={`/ufo${queryParam}`}
-					role="menuitem"
+				class="link not-themed"
+				class:collapsed={$menuCollapsed}
+				class:selected={isRouteSelected({ routeId, path: 'ufo' })}
+				href={`/ufo${queryParam}`}
+				role="menuitem"
 			>
 				<IconUfo size="24px" />
 				<span>{$i18n.ufo.title}</span>

src/frontend/src/lib/components/ufos/setup/UfoSettings.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import CanisterSettings from '$lib/components/modules/canister/settings/CanisterSettings.svelte';
+	import Snapshots from '$lib/components/modules/snapshot/Snapshots.svelte';
+	import SatelliteAccessKeys from '$lib/components/satellites/setup/SatelliteAccessKeys.svelte';
+	import { i18n } from '$lib/stores/app/i18n.store';
+	import type { Satellite } from '$lib/types/satellite';
+	import type { Ufo } from '$lib/types/ufo';
+
+	interface Props {
+		ufo: Ufo;
+	}
+
+	let { ufo }: Props = $props();
+</script>
+
+<CanisterSettings canisterId={ufo.ufo_id} segment="ufo" segmentLabel={$i18n.ufo.title} />
+
+<Snapshots canisterId={ufo.ufo_id} segment="ufo" segmentLabel={$i18n.ufo.title} />

src/frontend/src/routes/(split)/ufo/+page.svelte

@@ -6,6 +6,7 @@
 	import Warnings from '$lib/components/modules/warning/Warnings.svelte';
 	import UfoGuard from '$lib/components/ufos/guards/UfoGuard.svelte';
 	import UfoOverview from '$lib/components/ufos/overview/UfoOverview.svelte';
+	import UfoSettings from '$lib/components/ufos/setup/UfoSettings.svelte';
 	import Tabs from '$lib/components/ui/Tabs.svelte';
 	import {
 		type Tab,
@@ -48,7 +49,7 @@
 					{#if $store.tabId === $store.tabs[0].id}
 						<UfoOverview {ufo} />
 					{:else if $store.tabId === $store.tabs[1].id}
-						TODO
+						<UfoSettings {ufo} />
 					{/if}
 				</Tabs>
 			{/snippet}