house keeping

src/App.tsx

@@ -11,7 +11,6 @@ import { arch, locale, platform, version } from "@tauri-apps/plugin-os";
 import { reaction } from "mobx";
 import ErrorBoundary from "./components/ErrorBoundary";
 import Loader from "./components/Loader";
-import OfflineBanner from "./components/banners/OfflineBanner";
 import { UnauthenticatedGuard } from "./components/guards/UnauthenticatedGuard";
 import { BannerContext } from "./contexts/BannerContext";
 import useLogger from "./hooks/useLogger";
@@ -22,6 +21,7 @@ import { useAppStore } from "./stores/AppStore";
 import { Globals } from "./utils/Globals";
 // @ts-expect-error no types
 import FPSStats from "react-fps-stats";
+import VeryImportantBanner from "./components/banners/VeryImportantBanner";
 import { isTauri } from "./utils/Utils";
 
 function App() {
@@ -69,6 +69,13 @@ function App() {
 			};
 		};
 
+		const hasVeryImportantBannerShown = localStorage.getItem("very_important_banner_dismissed");
+		if (!hasVeryImportantBannerShown) {
+			bannerContext.setContent({
+				element: <VeryImportantBanner />,
+			});
+		}
+
 		isTauri && loadAsyncGlobals();
 		Globals.load();
 		app.loadSettings();
@@ -79,14 +86,14 @@ function App() {
 		return dispose;
 	}, []);
 
-	React.useEffect(() => {
+	// React.useEffect(() => {
-		if (!app.isNetworkConnected)
+	// 	if (!app.isNetworkConnected)
-			bannerContext.setContent({
+	// 		bannerContext.setContent({
-				forced: true,
+	// 			forced: true,
-				element: <OfflineBanner />,
+	// 			element: <OfflineBanner />,
-			});
+	// 		});
-		else bannerContext.close();
+	// 	else bannerContext.close();
-	}, [app.isNetworkConnected, bannerContext]);
+	// }, [app.isNetworkConnected, bannerContext]);
 
 	return (
 		<ErrorBoundary section="app">

src/components/Banner.tsx

@@ -21,48 +21,48 @@ function Banner() {
 	const logger = useLogger("Banner");
 	const bannerContext = React.useContext(BannerContext);
 
+	if (!bannerContext.content) return null;
+
 	return (
 		<AnimatePresence>
-			{bannerContext.content && (
+			<Container
-				<Container
+				variants={{
-					variants={{
+					show: {
-						show: {
+						// slide down
-							// slide down
+						y: 0,
-							y: 0,
+						transition: {
-							transition: {
+							delayChildren: 0.3,
-								delayChildren: 0.3,
+							staggerChildren: 0.2,
-								staggerChildren: 0.2,
-							},
 						},
-						hide: {
+					},
-							// slide up
+					hide: {
-							y: "-100%",
+						// slide up
-							transition: {
+						y: "-100%",
-								delayChildren: 0.3,
+						transition: {
-								staggerChildren: 0.2,
+							delayChildren: 0.3,
-							},
+							staggerChildren: 0.2,
 						},
-					}}
+					},
-					initial="hide"
+				}}
-					animate="show"
+				initial="hide"
-					exit="hide"
+				animate="show"
-					onAnimationComplete={() => {
+				exit="hide"
-						logger.debug("animation complete");
+				onAnimationComplete={() => {
-					}}
+					logger.debug("animation complete");
-					style={bannerContext.content.style}
+				}}
-				>
+				style={bannerContext.content.style}
-					{bannerContext.content.element}
+			>
-					{!bannerContext.content.forced && (
+				{bannerContext.content.element}
-						<CloseWrapper
+				{!bannerContext.content.forced && (
-							onClick={() => {
+					<CloseWrapper
-								bannerContext.close();
+						onClick={() => {
-							}}
+							bannerContext.close();
-						>
+						}}
-							<Icon icon="mdiClose" color="var(--text)" size="24px" />
+					>
-						</CloseWrapper>
+						<Icon icon="mdiClose" color="var(--text)" size="24px" />
-					)}
+					</CloseWrapper>
-				</Container>
+				)}
-			)}
+			</Container>
 		</AnimatePresence>
 	);
 }

src/components/banners/VeryImportantBanner.tsx

@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { modalController } from "../../controllers/modals";
+import Button from "../Button";
+
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: row;
+	background-color: var(--primary);
+	flex: 1;
+	justify-content: center;
+	align-items: center;
+`;
+
+const Text = styled.span`
+	padding: 10px;
+`;
+
+function VeryImportantBanner() {
+	return (
+		<Wrapper>
+			<Text>We have a suprise for you!</Text>
+			<Button
+				onClick={() => {
+					modalController.push({
+						type: "very_important",
+					});
+				}}
+				style={{
+					backgroundColor: "var(--primary-light)",
+					border: "1px solid var(--primary-dark)",
+				}}
+			>
+				Show me
+			</Button>
+		</Wrapper>
+	);
+}
+
+export default VeryImportantBanner;

src/components/modals/VeryImportantModal.tsx

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import styled from "styled-components";
+import { BannerContext } from "../../contexts/BannerContext";
+import { ModalProps } from "../../controllers/modals/types";
+import { Modal } from "./ModalComponents";
+
+const Text = styled.span`
+	padding: 10px;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	flex: 1;
+`;
+
+export function VeryImportantModal({ ...props }: ModalProps<"very_important">) {
+	const bannerContext = useContext(BannerContext);
+	return (
+		<Modal
+			{...props}
+			actions={[
+				{
+					onClick: () => {
+						localStorage.setItem("very_important_banner_dismissed", "true");
+						bannerContext.close();
+						return true;
+					},
+					confirmation: true,
+					children: <span>I've been clowned</span>,
+					palette: "primary",
+				},
+			]}
+		>
+			<Text>April fools! 🤡</Text>
+		</Modal>
+	);
+}

src/controllers/modals/ModalController.tsx

@@ -15,6 +15,7 @@ import {
 	LeaveServerModal,
 	SettingsModal,
 } from "../../components/modals";
+import { VeryImportantModal } from "../../components/modals/VeryImportantModal";
 import { Modal } from "./types";
 
 function randomUUID() {
@@ -187,4 +188,5 @@ export const modalController = new ModalControllerExtended({
 	// modify_displayname: ModifyDisplayname,
 	// changelog_usernames: ChangelogUsernames,
 	settings: SettingsModal,
+	very_important: VeryImportantModal,
 });

src/controllers/modals/types.ts

@@ -10,7 +10,7 @@ export type Modal = {
 	key?: string;
 } & (
 	| {
-			type: "add_server" | "create_server" | "join_server" | "settings";
+			type: "add_server" | "create_server" | "join_server" | "settings" | "very_important";
 	  }
 	| {
 			type: "error";