dev(ui): add ugly beta warning header (#1317)

Co-authored-by: Parth Bandwal <143504541+parrth20@users.noreply.github.com>

src/App.tsx

@@ -45,6 +45,7 @@ import { setIntervalDebounced, walletDisplayName, type WalletFileName } from '@/
 import { authStore } from '@/store/authStore'
 import { jamSettingsStore, useDeveloperMode } from '@/store/jamSettingsStore'
 import { EarnReportPage } from './components/earn/report/EarnReportPage'
+import { RootLayout } from './components/layout/RootLayout'
 import { LockWalletConfirmDialog } from './components/ui/jam/LockWalletConfirmDialog'
 import { Spinner } from './components/ui/spinner'
 import { WalletJarsDetailsPage } from './components/wallet/WalletJarsDetailsPage'
@@ -153,7 +154,15 @@ function App() {
 
   const router = createBrowserRouter(
     createRoutesFromElements(
-      <Route id="base" element={<Outlet />} errorElement={<ErrorPage />}>
+      <Route
+        id="base"
+        element={
+          <RootLayout>
+            <Outlet />
+          </RootLayout>
+        }
+        errorElement={<ErrorPage />}
+      >
         <Route path={routes.login} element={authenticated ? <Navigate to={routes.home} replace /> : <LoginPage />} />
         <Route
           path={routes.createWallet}

src/components/layout/AuthPageShell.test.tsx

@@ -12,6 +12,6 @@ describe('AuthPageShell', () => {
 
     const child = screen.getByTestId('child')
     expect(child).toBeInTheDocument()
-    expect(child.parentElement).toHaveClass('from-background', 'to-muted', 'flex', 'min-h-screen')
+    expect(child.parentElement).toHaveClass('from-background', 'to-muted', 'flex', 'flex-1')
   })
 })

src/components/layout/AuthPageShell.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react'
 
 export const AuthPageShell = ({ children }: PropsWithChildren) => {
   return (
-    <div className="from-background to-muted flex min-h-dvh min-h-screen items-start justify-center bg-gradient-to-br p-4 sm:items-center">
+    <div className="from-background to-muted flex flex-1 items-start justify-center bg-gradient-to-br p-4 sm:items-center">
       {children}
     </div>
   )

src/components/layout/Layout.tsx

@@ -72,7 +72,7 @@ export function LayoutInner({ onLogout, onLockWallet, children }: LayoutInnerPro
   }, [])
 
   return (
-    <div className="bg-brand-shell text-brand-shell-foreground flex min-h-screen min-w-0 flex-1 flex-col transition-colors duration-300">
+    <div className="bg-brand-shell text-brand-shell-foreground flex min-w-0 flex-1 flex-col transition-colors duration-300">
       <AppNavbar
         theme={resolvedTheme}
         isLoading={isLoading}

src/components/layout/RootLayout.tsx

@@ -0,0 +1,16 @@
+import { lazy, type PropsWithChildren } from 'react'
+import { APP_DISPLAY_VERSION } from '@/constants/jam'
+
+const BetaInfoHeader = lazy(() => import('@/components/layout/header/BetaInfoHeader'))
+
+const rawVersionLowercase = APP_DISPLAY_VERSION.raw?.toLowerCase() || ''
+const displayBetaHeader = ['alpha', 'beta', 'rc', 'dev', 'snapshot'].some((it) => rawVersionLowercase.includes(it))
+
+export function RootLayout({ children }: PropsWithChildren<unknown>) {
+  return (
+    <div className="flex h-screen flex-col overflow-hidden">
+      {displayBetaHeader ? <BetaInfoHeader /> : <></>}
+      <main className="flex flex-1 flex-col overflow-y-scroll">{children}</main>
+    </div>
+  )
+}

src/components/layout/header/BetaInfoHeader.tsx

@@ -0,0 +1,23 @@
+import { ArrowUpRightIcon } from 'lucide-react'
+
+export default function BetaInfoHeader() {
+  return (
+    <header className="bg-brand-warning text-brand-warning-foreground border-brand-warning-foreground/15 w-full border-b">
+      <div className="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-x-2 gap-y-1 px-3 py-1.5 text-center text-xs leading-tight">
+        <span className="border-brand-warning-foreground/25 inline-flex shrink-0 items-center rounded-full border px-1.5 py-px text-[10px] font-bold tracking-wider uppercase">
+          Beta
+        </span>
+        <span className="font-medium">Thanks for testing! Please report anything that looks off.</span>
+        <a
+          href="https://github.com/joinmarket-webui/jam/issues/new?labels=bug,beta&template=bug_report.md"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group border-brand-warning-foreground/30 hover:bg-brand-warning-foreground/10 inline-flex shrink-0 items-center gap-1 rounded-md border px-2 py-0.5 font-semibold transition-colors"
+        >
+          Report a bug
+          <ArrowUpRightIcon className="size-3 transition-transform group-hover:translate-x-px group-hover:-translate-y-px" />
+        </a>
+      </div>
+    </header>
+  )
+}

src/components/ui/sidebar.tsx

@@ -104,7 +104,7 @@ function SidebarProvider({
               ...style,
             } as React.CSSProperties
           }
-          className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}
+          className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex w-full flex-1', className)}
           {...props}
         >
           {children}

src/stories/jam/BetaInfoHeader.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import BetaInfoHeader from '@/components/layout/header/BetaInfoHeader'
+
+const meta: Meta<typeof BetaInfoHeader> = {
+  title: 'Layout/BetaInfoHeader',
+  component: BetaInfoHeader,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+type Story = StoryObj<typeof BetaInfoHeader>
+
+export const Default: Story = {}