feat: experimental warning

src/app/layout.tsx

@@ -1,12 +1,15 @@
 'use client';
 
-import { Flex, Theme } from '@radix-ui/themes';
+import { AlertDialog, Button, Flex, Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import Navbar from '../components/Navbar';
+import isDev from '../core/blitzkrieg/isDev';
+import { isLocalhost } from '../core/blitzkrieg/isLocalhost';
+import { useApp } from '../stores/app';
 
 config();
 
@@ -22,6 +25,13 @@ const robotoFlex = Roboto_Flex({
 export default function RootLayout({ children }: RootLayoutProps) {
   const pathname = usePathname();
   const isEmbed = pathname.split('/')[1] === 'embeds';
+  const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
+
+  useEffect(() => {
+    setShowDevBuildAlert(
+      isDev() && !isLocalhost() && !useApp.getState().bypassDevBuildAlert,
+    );
+  }, []);
 
   return (
     <html lang="en" className={robotoFlex.className}>
@@ -39,12 +49,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
           paddingTop: isEmbed ? 0 : '3.25rem',
         }}
       >
-        {/* <AlertDialog.Root open>
-          <AlertDialog.Content>
-            <AlertDialog.Title>Peepee</AlertDialog.Title>
-          </AlertDialog.Content>
-        </AlertDialog.Root> */}
-
         <Theme
           appearance="dark"
           panelBackground="translucent"
@@ -54,6 +58,35 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           {!isEmbed && <Navbar />}
 
+          <AlertDialog.Root open={showDevBuildAlert}>
+            <AlertDialog.Content>
+              <AlertDialog.Title>Experimental version!</AlertDialog.Title>
+              <AlertDialog.Description>
+                This version may have a lot of issues. Report issues to{' '}
+                <a href="https://discord.gg/nDt7AjGJQH" target="_blank">
+                  the official Discord server
+                </a>
+                . Also consider using{' '}
+                <a href="https://blitz-krieg.vercel.app/">
+                  the more stable version
+                </a>
+                .
+              </AlertDialog.Description>
+
+              <Flex justify="end">
+                <Button
+                  variant="solid"
+                  onClick={() => {
+                    setShowDevBuildAlert(false);
+                    useApp.setState({ bypassDevBuildAlert: true });
+                  }}
+                >
+                  Continue
+                </Button>
+              </Flex>
+            </AlertDialog.Content>
+          </AlertDialog.Root>
+
           <Flex direction="column">{children}</Flex>
         </Theme>
       </body>

src/core/blitzkrieg/isLocalhost.ts

@@ -0,0 +1,5 @@
+export function isLocalhost() {
+  return (
+    typeof window !== 'undefined' && window.location.hostname === 'localhost'
+  );
+}

src/stores/app.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface App {
+  bypassDevBuildAlert: boolean;
+}
+
+export const useApp = create<App>()(
+  persist(
+    (set) => ({
+      bypassDevBuildAlert: false,
+    }),
+    { name: 'app' },
+  ),
+);