feat(frontend): display a maintenance banner warning (#2801)

peterpeterparker · web-flow · commit bb96e5a64dba · 2026-05-26T14:15:45.000+09:00
* feat(frontend): display a maintenance banner warning

* chore: fmt
diff --git a/src/frontend/src/lib/components/app/core/Banner.svelte b/src/frontend/src/lib/components/app/core/Banner.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import IconSpaceStation from '$lib/components/icons/IconSpaceStation.svelte';
+	import IconWarning from '$lib/components/icons/IconWarning.svelte';
+	import Html from '$lib/components/ui/Html.svelte';
+	import { i18n } from '$lib/stores/app/i18n.store';
+
+	interface Props {
+		display: 'dev' | 'maintenance';
+	}
+
+	let { display }: Props = $props();
+</script>
+
+<aside class="banner" class:warn={display === 'maintenance'}>
+	{#if display === 'dev'}
+		<IconSpaceStation /> <strong>Dev Console</strong>
+	{:else}
+		<IconWarning size="18" /> <Html text={$i18n.core.maintenance}></Html>
+	{/if}
+</aside>
+
+<style lang="scss">
+	.banner {
+		height: var(--banner-height);
+
+		background: var(--color-tertiary);
+		color: var(--color-tertiary-contrast);
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		gap: var(--padding);
+
+		&.warn {
+			background: var(--color-warning);
+			color: var(--color-warning-contrast);
+		}
+	}
+</style>
diff --git a/src/frontend/src/lib/components/app/core/BannerSkylab.svelte b/src/frontend/src/lib/components/app/core/BannerSkylab.svelte
diff --git a/src/frontend/src/lib/components/app/core/Navbar.svelte b/src/frontend/src/lib/components/app/core/Navbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { debounce, nonNullish } from '@dfinity/utils';
 	import { fade } from 'svelte/transition';
-	import BannerSkylab from '$lib/components/app/core/BannerSkylab.svelte';
+	import Banner from '$lib/components/app/core/Banner.svelte';
 	import Logo from '$lib/components/app/core/Logo.svelte';
 	import NavbarSpotlight from '$lib/components/app/core/NavbarSpotlight.svelte';
 	import NavbarTitle from '$lib/components/app/core/NavbarTitle.svelte';
@@ -37,10 +37,10 @@
 </script>
 
 {#snippet banner()}
-	<BannerSkylab />
+	<Banner display={isSkylab() ? 'dev' : 'maintenance'} />
 {/snippet}
 
-<Header banner={isSkylab() ? banner : undefined} {hide}>
+<Header {banner} {hide}>
 	<div class="start">
 		{#if start === 'menu'}
 			<ButtonMenu />
diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json
@@ -126,7 +126,8 @@
 		"environment": "Environment",
 		"tags": "Tags",
 		"edit_details": "Edit details",
-		"tags_placeholder": "Comma-separated or one per line. Leave empty for no tags."
+		"tags_placeholder": "Comma-separated or one per line. Leave empty for no tags.",
+		"maintenance": "Juno is in <strong>maintenance</strong> and not actively developed anymore."
 	},
 	"canisters": {
 		"top_up": "Top-up",
diff --git a/src/frontend/src/lib/i18n/zh-cn.json b/src/frontend/src/lib/i18n/zh-cn.json
@@ -127,7 +127,8 @@
 		"environment": "运行环境",
 		"tags": "标签",
 		"edit_details": "编辑详情",
-		"tags_placeholder": "逗号分隔或每行一个，留空则不添加标签。"
+		"tags_placeholder": "逗号分隔或每行一个，留空则不添加标签。",
+		"maintenance": "Juno 目前处于<strong>维护模式</strong>，不再积极开发。"
 	},
 	"canisters": {
 		"top_up": "充值",
diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts
@@ -130,6 +130,7 @@ interface I18nCore {
 	tags: string;
 	edit_details: string;
 	tags_placeholder: string;
+	maintenance: string;
 }
 
 interface I18nCanisters {

Original file line number	Diff line number	Diff line change
`@@ -130,6 +130,7 @@ interface I18nCore {`
`130`	`130`	`tags: string;`
`131`	`131`	`edit_details: string;`
`132`	`132`	`tags_placeholder: string;`
	`133`	`+ maintenance: string;`
`133`	`134`	`}`
`134`	`135`
`135`	`136`	`interface I18nCanisters {`