Prep for the RC1 release of the desktop app

frontend/src/components/window/MainWindow.svelte

@@ -4,10 +4,12 @@
 	import type { AppWindowState } from "@graphite/state-providers/app-window";
 	import type { DialogState } from "@graphite/state-providers/dialog";
 	import type { TooltipState } from "@graphite/state-providers/tooltip";
+	import { isDesktop } from "@graphite/utility-functions/platform";
 
 	import Dialog from "@graphite/components/floating-menus/Dialog.svelte";
 	import Tooltip from "@graphite/components/floating-menus/Tooltip.svelte";
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 	import StatusBar from "@graphite/components/window/status-bar/StatusBar.svelte";
 	import TitleBar from "@graphite/components/window/title-bar/TitleBar.svelte";
 	import Workspace from "@graphite/components/window/workspace/Workspace.svelte";
@@ -29,6 +31,17 @@
 	{#if $tooltip.visible}
 		<Tooltip />
 	{/if}
+	{#if isDesktop() && new Date() > new Date("2026-01-31")}
+		<LayoutCol class="release-candidate-expiry">
+			<TextLabel>
+				<p>
+					This is an outdated desktop release candidate build. Its testing<br />
+					period has concluded and the next build is available for download.<br />
+					Please update to help us continue testing by reporting new issues.
+				</p>
+			</TextLabel>
+		</LayoutCol>
+	{/if}
 </LayoutCol>
 
 <style lang="scss" global>
@@ -37,4 +50,24 @@
 		overflow: auto;
 		touch-action: none;
 	}
+
+	.release-candidate-expiry {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background-color: var(--color-e-nearwhite);
+		color: var(--color-2-mildblack);
+		opacity: 0.9;
+		pointer-events: none;
+		padding: 12px 40px;
+		border-radius: 4px;
+		text-align-last: justify;
+		font-size: 18px;
+		z-index: 1000;
+
+		.text-label {
+			line-height: 1.5;
+		}
+	}
 </style>

frontend/src/components/window/status-bar/StatusBar.svelte

@@ -3,25 +3,33 @@
 
 	import type { Editor } from "@graphite/editor";
 	import type { Layout } from "@graphite/messages";
-	import { patchLayout, UpdateStatusBarHintsLayout } from "@graphite/messages";
+	import { patchLayout, UpdateStatusBarHintsLayout, UpdateStatusBarInfoLayout } from "@graphite/messages";
 
 	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
+	import Separator from "@graphite/components/widgets/labels/Separator.svelte";
 	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
 
 	const editor = getContext<Editor>("editor");
 
 	let statusBarHintsLayout: Layout = [];
+	let statusBarInfoLayout: Layout = [];
 
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdateStatusBarHintsLayout, (data) => {
 			patchLayout(statusBarHintsLayout, data);
 			statusBarHintsLayout = statusBarHintsLayout;
 		});
+		editor.subscriptions.subscribeJsMessage(UpdateStatusBarInfoLayout, (data) => {
+			patchLayout(statusBarInfoLayout, data);
+			statusBarInfoLayout = statusBarInfoLayout;
+		});
 	});
 </script>
 
 <LayoutRow class="status-bar">
 	<WidgetLayout class="hints" layout={statusBarHintsLayout} layoutTarget="StatusBarHints" />
+	<Separator />
+	<WidgetLayout class="info" layout={statusBarInfoLayout} layoutTarget="StatusBarInfo" />
 </LayoutRow>
 
 <style lang="scss" global>
@@ -29,12 +37,18 @@
 		height: 24px;
 		width: 100%;
 		flex: 0 0 auto;
+		justify-content: space-between;
 
 		.hints {
 			overflow: hidden;
 			--row-height: 24px;
 			margin: 0 4px;
 			max-width: calc(100% - 2 * 4px);
+			flex: 1 1 auto;
+
+			> * {
+				flex: 0 0 auto;
+			}
 
 			.text-label,
 			.shortcut-label {
@@ -55,5 +69,34 @@
 				padding: 0 4px;
 			}
 		}
+
+		.hints + .separator {
+			position: relative;
+
+			&::before {
+				content: "";
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: -40px;
+				width: 40px;
+				background: linear-gradient(to right, rgba(var(--color-2-mildblack-rgb), 0) 0%, rgba(var(--color-2-mildblack-rgb), 1) 100%);
+			}
+		}
+
+		.info {
+			margin: 0 4px;
+			--row-height: 24px;
+			justify-content: flex-end;
+
+			.text-label {
+				align-items: center;
+				flex-shrink: 0;
+
+				+ .text-label {
+					margin-left: 4px;
+				}
+			}
+		}
 	}
 </style>