feat: navbar account

packages/website/src/components/BlitzKitTheme.tsx

@@ -0,0 +1,22 @@
+import { Theme } from '@radix-ui/themes';
+import type { ReactNode } from 'react';
+
+interface BlitzKitThemeProps {
+  children: ReactNode;
+}
+
+export function BlitzKitTheme({ children }: BlitzKitThemeProps) {
+  return (
+    <Theme
+      style={{ minHeight: 'unset' }}
+      appearance="dark"
+      panelBackground="solid"
+      radius="full"
+      accentColor="amber"
+      suppressHydrationWarning
+      suppressContentEditableWarning
+    >
+      {children}
+    </Theme>
+  );
+}

packages/website/src/components/Navbar.astro

@@ -22,6 +22,7 @@ import { NAVBAR_HEIGHT } from '../constants/navbar';
 import { homeTool, TOOLS } from '../constants/tools';
 import { PatreonIcon } from './PatreonIcon';
 import { NavbarAccount } from './NavbarAccount';
+import { TestComponent } from '../pages/TestComponent';
 
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const tools = [homeTool, ...toolsFiltered];
@@ -44,7 +45,7 @@ const isBranchNamed =
 
     transition-duration: 250ms;
     width: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
     backdrop-filter: blur(4rem) brightness(0.75);
     -webkit-backdrop-filter: blur(4rem) brightness(0.75);
 
@@ -198,7 +199,7 @@ const isBranchNamed =
             <GearIcon />
           </Link>
 
-          <NavbarAccount client:load />
+          <NavbarAccount client:idle />
         </Flex>
       </Flex>
     </Flex>

packages/website/src/components/NavbarAccount.tsx

@@ -15,6 +15,7 @@ import {
 import { Suspense } from 'react';
 import { $patreonLogin } from '../stores/patreonLogin';
 import { $wargamingLogin } from '../stores/wargamingLogin';
+import { BlitzKitTheme } from './BlitzKitTheme';
 import { PatreonIcon } from './PatreonIcon';
 import { WargamingAccountName } from './WargamingAccountName';
 import { WargamingIcon } from './WargamingIcon';
@@ -32,79 +33,81 @@ export function NavbarAccount() {
         </IconButton>
       </Popover.Trigger>
 
-      <Popover.Content
+      <BlitzKitTheme>
-        align="end"
+        <Popover.Content
-        width="320px"
+          align="end"
-        onOpenAutoFocus={(event) => event.preventDefault()}
+          width="320px"
-      >
+          onOpenAutoFocus={(event) => event.preventDefault()}
-        {(patreonLogin.token || wargamingLogin.token) && (
+        >
-          <Flex direction="column" gap="2">
+          {(patreonLogin.token || wargamingLogin.token) && (
-            <Text align="center" color="gray">
+            <Flex direction="column" gap="2">
-              Logged in accounts
+              <Text align="center" color="gray">
-            </Text>
+                Logged in accounts
+              </Text>
 
-            {patreonLogin.token && (
+              {patreonLogin.token && (
-              <Flex align="center" gap="2" justify="center">
+                <Flex align="center" gap="2" justify="center">
-                <PatreonIcon width={15} height={15} />
+                  <PatreonIcon width={15} height={15} />
-                <Text>Patreon</Text>
+                  <Text>Patreon</Text>
-                <Button
+                  <Button
-                  color="red"
+                    color="red"
-                  variant="ghost"
+                    variant="ghost"
-                  onClick={() => {
+                    onClick={() => {
-                    $patreonLogin.set({ token: undefined });
+                      $patreonLogin.set({ token: undefined });
-                  }}
+                    }}
-                >
+                  >
-                  Logout
+                    Logout
-                </Button>
+                  </Button>
-              </Flex>
+                </Flex>
-            )}
+              )}
 
-            {wargamingLogin.token && (
+              {wargamingLogin.token && (
-              <Flex align="center" gap="2" justify="center">
+                <Flex align="center" gap="2" justify="center">
-                <WargamingIcon width={15} height={15} />
+                  <WargamingIcon width={15} height={15} />
-                <Text>
+                  <Text>
-                  <Suspense fallback={<Skeleton height="1em" width="5rem" />}>
+                    <Suspense fallback={<Skeleton height="1em" width="5rem" />}>
-                    <WargamingAccountName />
+                      <WargamingAccountName />
-                  </Suspense>
+                    </Suspense>
-                </Text>
+                  </Text>
-                <Button
+                  <Button
-                  color="red"
+                    color="red"
-                  variant="ghost"
+                    variant="ghost"
-                  onClick={() => {
+                    onClick={() => {
-                    $wargamingLogin.set({ token: undefined });
+                      $wargamingLogin.set({ token: undefined });
-                  }}
+                    }}
-                >
+                  >
-                  Logout
+                    Logout
-                </Button>
+                  </Button>
-              </Flex>
+                </Flex>
-            )}
+              )}
-          </Flex>
+            </Flex>
-        )}
+          )}
 
-        {!patreonLogin.token !== !wargamingLogin.token && (
+          {!patreonLogin.token !== !wargamingLogin.token && (
-          <Inset side="x">
+            <Inset side="x">
-            <Separator my="4" size="4" />
+              <Separator my="4" size="4" />
-          </Inset>
+            </Inset>
-        )}
+          )}
 
-        {(!patreonLogin.token || !wargamingLogin.token) && (
+          {(!patreonLogin.token || !wargamingLogin.token) && (
-          <Flex direction="column" gap="2">
+            <Flex direction="column" gap="2">
-            <Text align="center" color="gray">
+              <Text align="center" color="gray">
-              Log in with...
+                Log in with...
-            </Text>
+              </Text>
 
-            {!patreonLogin.token && (
+              {!patreonLogin.token && (
-              <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
+                <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
-                <Button style={{ width: '100%' }} color="tomato">
+                  <Button style={{ width: '100%' }} color="tomato">
-                  <PatreonIcon width={15} height={15} /> Patreon
+                    <PatreonIcon width={15} height={15} /> Patreon
-                </Button>
+                  </Button>
-              </Link>
+                </Link>
-            )}
+              )}
 
-            {!wargamingLogin.token && <WargamingLoginButton />}
+              {!wargamingLogin.token && <WargamingLoginButton />}
-          </Flex>
+            </Flex>
-        )}
+          )}
-      </Popover.Content>
+        </Popover.Content>
+      </BlitzKitTheme>
     </Popover.Root>
   );
 }

packages/website/src/layouts/RootLayout.astro

@@ -1,5 +1,6 @@
 ---
-import { Flex, Theme } from '@radix-ui/themes';
+import { Flex } from '@radix-ui/themes';
+import { BlitzKitTheme } from '../components/BlitzKitTheme';
 import Footer from '../components/Footer.astro';
 import Navbar from '../components/Navbar.astro';
 import Party3 from '../components/Party3.astro';
@@ -37,14 +38,7 @@ const isRoot = pathname === '/';
   </head>
 
   <body>
-    <Theme
+    <BlitzKitTheme>
-      appearance="dark"
-      panelBackground="solid"
-      radius="full"
-      accentColor="amber"
-      suppressHydrationWarning
-      suppressContentEditableWarning
-    >
       <Flex direction="column" minHeight="100vh">
         <Navbar />
 
@@ -56,6 +50,6 @@ const isRoot = pathname === '/';
 
         <Footer />
       </Flex>
-    </Theme>
+    </BlitzKitTheme>
   </body>
 </html>

packages/website/src/pages/TestComponent.tsx

@@ -1,4 +1,5 @@
-import { Button, Popover } from '@radix-ui/themes';
+import { Button, Flex, Popover, Text } from '@radix-ui/themes';
+import { BlitzKitTheme } from '../components/BlitzKitTheme';
 
 export function TestComponent() {
   return (
@@ -7,7 +8,14 @@ export function TestComponent() {
         <Button>Radix UI</Button>
       </Popover.Trigger>
 
-      <Popover.Content>Content</Popover.Content>
+      <BlitzKitTheme>
+        <Popover.Content>
+          <Flex direction="column">
+            <Text>I should be in a dark mode popover</Text>
+            <Button>And I should be yellow and have full border radius!</Button>
+          </Flex>
+        </Popover.Content>
+      </BlitzKitTheme>
     </Popover.Root>
   );
 }

packages/website/src/pages/test.astro

@@ -1,11 +1,16 @@
 ---
-import { Theme } from '@radix-ui/themes';
+import { BlitzKitTheme } from '../components/BlitzKitTheme';
-import '@radix-ui/themes/styles.css';
 import { TestComponent } from './TestComponent';
 ---
 
-Minimal!
+<style is:global>
+  @import '@radix-ui/themes/styles.css';
+</style>
 
-<Theme>
+<html>
-  <TestComponent client:only="react" />
+  <body>
-</Theme>
+    <BlitzKitTheme>
+      <TestComponent client:idle />
+    </BlitzKitTheme>
+  </body>
+</html>