feat: more migration

packages/website/src/components/Ad.tsx

@@ -1,8 +1,6 @@
-'use client';
-
 import { imgur } from '@blitzkit/core';
 import { Box, BoxProps, Text } from '@radix-ui/themes';
-import { uniqueId } from 'lodash';
+import { uniqueId } from 'lodash-es';
 import { useEffect, useRef } from 'react';
 import { Vector2Tuple } from 'three';
 

packages/website/src/components/Armor/components/ShotDisplay.tsx

@@ -2,8 +2,8 @@ import { J_HAT, K_HAT } from '@blitzkit/core';
 import { Box, Flex, Text } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
-import { clamp } from 'lodash';
-import { ComponentProps, useEffect, useRef } from 'react';
+import { clamp } from 'lodash-es';
+import { type ComponentProps, useEffect, useRef } from 'react';
 import {
   BufferGeometry,
   DoubleSide,

packages/website/src/components/Armor/components/ShotDisplayCard.tsx

@@ -6,7 +6,7 @@ import {
   Separator,
   Text,
 } from '@radix-ui/themes';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { radToDeg } from 'three/src/math/MathUtils';
 import * as TankopediaEphemeral from '../../../../../website-legacy/src/stores/tankopediaEphemeral';
 import { shotStatusColors } from './ShotDisplay';

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -1,5 +1,5 @@
 import {
-  ShellType,
+  type ShellType,
   isExplosive,
   resolveNearPenetration,
   resolvePenetrationCoefficient,
@@ -7,7 +7,7 @@ import {
 import { useThree } from '@react-three/fiber';
 import { useCallback } from 'react';
 import {
-  Intersection,
+  type Intersection,
   MeshBasicMaterial,
   Object3D,
   Plane,
@@ -17,11 +17,8 @@ import {
   Vector3,
 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
-import { hasEquipment } from '../../../../../../website-legacy/src/core/blitzkit/hasEquipment';
-import { jsxTree } from '../../../../../../website-legacy/src/core/blitzkit/jsxTree';
-import { discardClippingPlane } from '../../../../../../website-legacy/src/core/three/discardClippingPlane';
-import * as Duel from '../../../../../../website-legacy/src/stores/duel';
-import * as TankopediaEphemeral from '../../../../../../website-legacy/src/stores/tankopediaEphemeral';
+import * as Duel from '../../../../stores/duel';
+import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
 import { ArmorType } from '../SpacedArmorScene';
 import { SpacedArmorSubExternal } from './components/SpacedArmorSubExternal';
 import { SpacedArmorSubSpaced } from './components/SpacedArmorSubSpaced';

packages/website/src/components/Armor/components/StaticArmorSceneComponent.tsx

@@ -1,6 +1,6 @@
 import { I_HAT, J_HAT } from '@blitzkit/core';
 import { MeshProps, useThree } from '@react-three/fiber';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 import { useEffect, useMemo } from 'react';
 import {
   Box3,

packages/website/src/components/BlitzkitButtonGrayIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function BlitzkitButtonGrayIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/ClassIcon/components/ClassHeavy.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ClassHeavy(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/ClassIcon/components/ClassLight.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ClassLight(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/ClassIcon/components/ClassMedium.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ClassMedium(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/ClassIcon/components/ClassTankDestroyer.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ClassTankDestroyer(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/ClassIcon/index.ts

@@ -1,5 +1,5 @@
-import { TankClass } from '@blitzkit/core';
-import { ComponentProps, ReactNode } from 'react';
+import { type TankClass } from '@blitzkit/core';
+import type { ComponentProps, ReactNode } from 'react';
 import { ClassHeavy } from './components/ClassHeavy';
 import { ClassLight } from './components/ClassLight';
 import { ClassMedium } from './components/ClassMedium';

packages/website/src/components/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps, Tooltip } from '@radix-ui/themes';
+import { Button, type ButtonProps, Tooltip } from '@radix-ui/themes';
 import { useState } from 'react';
 
 interface CopyButtonProps extends ButtonProps {

packages/website/src/components/DatePicker.tsx

@@ -14,7 +14,7 @@ import {
   Popover,
   Text,
 } from '@radix-ui/themes';
-import { times } from 'lodash';
+import { times } from 'lodash-es';
 import { useState } from 'react';
 
 const DAY_TITLES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

packages/website/src/components/DummyLink.tsx

@@ -1,4 +1,4 @@
-import { Link, LinkProps } from '@radix-ui/themes';
+import { Link, type LinkProps } from '@radix-ui/themes';
 
 export function DummyLink({ href = '#', onClick, ...props }: LinkProps) {
   return (

packages/website/src/components/EquipmentManager.tsx

@@ -1,6 +1,6 @@
 import { EquipmentPreset } from '@blitzkit/core';
 import { Flex } from '@radix-ui/themes';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 import { EquipmentMatrix } from '../../../website-legacy/src/stores/duel';
 import { EquipmentButton } from './ModuleButtons/EquipmentButton';
 

packages/website/src/components/ExperimentIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ExperimentIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/Footer.astro

@@ -0,0 +1,158 @@
+---
+import { gameDefinitions } from '@blitzkit/core';
+import { Code, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import packageJson from '../../../../package.json';
+
+const awaitedGameDefinitions = await gameDefinitions;
+---
+
+<Flex
+  gap="6"
+  p="6"
+  direction="column"
+  align="center"
+  style={{ backgroundColor: 'var(--color-panel)' }}
+>
+  <Flex
+    align="center"
+    justify="between"
+    maxWidth="40rem"
+    width="100%"
+    flexGrow="1"
+    gap="5"
+    position="relative"
+    direction={{ initial: 'column', sm: 'row' }}
+  >
+    <Flex
+      direction="column"
+      align={{
+        initial: 'center',
+        sm: 'start',
+      }}
+    >
+      <Heading>BlitzKit </Heading>
+      <Text color="gray">Everything World of Tanks Blitz</Text>
+      <Text size="1" color="gray">
+        Unaffiliated with Wargaming or any service
+      </Text>
+    </Flex>
+
+    <Flex
+      gap="6"
+      width={{
+        initial: '100%',
+        sm: 'auto',
+      }}
+    >
+      <Flex
+        direction="column"
+        gap="1"
+        align={{
+          initial: 'end',
+          sm: 'start',
+        }}
+        flexGrow={{
+          initial: '1',
+          sm: '0',
+        }}
+        flexBasis={{
+          initial: '0',
+          sm: 'auto',
+        }}
+      >
+        <Heading size="3">About</Heading>
+        <Flex
+          direction="column"
+          align={{
+            initial: 'end',
+            sm: 'start',
+          }}
+        >
+          <Link href="/docs/about/credits" color="gray"> Credits </Link>
+          <Link
+            href="https://discord.gg/nDt7AjGJQH"
+            target="_blank"
+            color="gray"
+          >
+            Discord
+          </Link>
+          <Link
+            href="https://github.com/tresabhi/blitzkit"
+            target="_blank"
+            color="gray"
+          >
+            GitHub
+          </Link>
+          <Link href="/docs/patches" color="gray"> Patches </Link>
+
+          {/* patreon supporters? */}
+        </Flex>
+      </Flex>
+
+      <Flex
+        direction="column"
+        gap="1"
+        flexGrow={{
+          initial: '1',
+          sm: '0',
+        }}
+        flexBasis={{
+          initial: '0',
+          sm: 'auto',
+        }}
+      >
+        <Heading size="3">Legal</Heading>
+        <Flex direction="column">
+          <Link href="/docs/legal/privacy-policy" color="gray">
+            Privacy policy
+          </Link>
+          <Link href="/docs/legal/terms-of-service" color="gray">
+            Terms of service
+          </Link>
+          <Link
+            href="https://www.google.com/settings/ads"
+            target="_blank"
+            color="gray"
+          >
+            Ad settings
+          </Link>
+        </Flex>
+      </Flex>
+    </Flex>
+  </Flex>
+
+  <Flex gap="5" display={{ initial: 'flex', sm: 'none' }}>
+    <Flex direction="column" justify="between" align="end">
+      <Text size="2" color="gray"> BlitzKit </Text>
+      <Text size="2" color="gray"> WoT Blitz </Text>
+      <Text size="2" color="gray"> CDN </Text>
+    </Flex>
+
+    <Flex direction="column" justify="between" align="start">
+      <Code size="2" color="gray">
+        {packageJson.version}
+      </Code>
+      <Code size="2" color="gray">
+        {awaitedGameDefinitions.version}
+      </Code>
+      <Code size="2" color="gray">
+        {process.env.PUBLIC_ASSET_BRANCH}
+      </Code>
+    </Flex>
+  </Flex>
+
+  <Flex gap="2" align="center" display={{ initial: 'none', sm: 'flex' }}>
+    <Text size="2" color="gray"> BlitzKit </Text>
+    <Code size="2" color="gray">
+      {packageJson.version}
+    </Code>
+    <Text size="2" color="gray"> WoT Blitz </Text>
+    <Code size="2" color="gray">
+      {awaitedGameDefinitions.version}
+    </Code>
+    <Text size="2" color="gray"> CDN </Text>
+    <Code size="2" color="gray">
+      {process.env.PUBLIC_ASSET_BRANCH}
+    </Code>
+  </Flex>
+</Flex>

packages/website/src/components/Footer/components/WoTBVersion.tsx

@@ -1,13 +0,0 @@
-import { gameDefinitions } from '@blitzkit/core';
-import { Code } from '@radix-ui/themes';
-import { use } from 'react';
-
-export function WoTBVersion() {
-  const awaitedGameDefinitions = use(gameDefinitions);
-
-  return (
-    <Code color="gray" size="2">
-      {awaitedGameDefinitions.version}
-    </Code>
-  );
-}

packages/website/src/components/Footer/index.css.ts

@@ -1,14 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const containerInner = style({
-  justifyContent: 'space-between',
-  width: '100%',
-  maxWidth: 1024,
-  padding: '0 16px',
-
-  '@media': {
-    'screen and (max-width: 640px)': {
-      justifyContent: 'center',
-    },
-  },
-});

packages/website/src/components/Footer/index.tsx

@@ -1,182 +0,0 @@
-'use client';
-
-import { gameDefinitions } from '@blitzkit/core';
-import { Code, Flex, Heading, Text, Theme } from '@radix-ui/themes';
-import { use } from 'react';
-import packageJson from '../../../../../package.json';
-import { Link } from '../Link';
-
-export function Footer() {
-  const awaitedGameDefinitions = use(gameDefinitions);
-
-  return (
-    <Theme radius="none">
-      <Flex
-        gap="6"
-        p="6"
-        direction="column"
-        align="center"
-        style={{ backgroundColor: 'var(--color-panel)' }}
-      >
-        <Flex
-          align="center"
-          justify="between"
-          maxWidth="40rem"
-          width="100%"
-          flexGrow="1"
-          gap="5"
-          position="relative"
-          direction={{ initial: 'column', sm: 'row' }}
-        >
-          <Flex
-            direction="column"
-            align={{
-              initial: 'center',
-              sm: 'start',
-            }}
-          >
-            <Heading>BlitzKit </Heading>
-            <Text color="gray">Everything World of Tanks Blitz</Text>
-            <Text size="1" color="gray">
-              Unaffiliated with Wargaming or any service
-            </Text>
-          </Flex>
-
-          <Flex
-            gap="6"
-            width={{
-              initial: '100%',
-              sm: 'auto',
-            }}
-          >
-            <Flex
-              direction="column"
-              gap="1"
-              align={{
-                initial: 'end',
-                sm: 'start',
-              }}
-              flexGrow={{
-                initial: '1',
-                sm: '0',
-              }}
-              flexBasis={{
-                initial: '0',
-                sm: 'auto',
-              }}
-            >
-              <Heading size="3">About</Heading>
-              <Flex
-                direction="column"
-                align={{
-                  initial: 'end',
-                  sm: 'start',
-                }}
-              >
-                <Link href="/docs/about/credits" color="gray">
-                  Credits
-                </Link>
-                <Link
-                  href="https://discord.gg/nDt7AjGJQH"
-                  target="_blank"
-                  color="gray"
-                >
-                  Discord
-                </Link>
-                <Link
-                  href="https://github.com/tresabhi/blitzkit"
-                  target="_blank"
-                  color="gray"
-                >
-                  GitHub
-                </Link>
-                <Link href="/docs/patches" color="gray">
-                  Patches
-                </Link>
-
-                {/* patreon supporters? */}
-              </Flex>
-            </Flex>
-
-            <Flex
-              direction="column"
-              gap="1"
-              flexGrow={{
-                initial: '1',
-                sm: '0',
-              }}
-              flexBasis={{
-                initial: '0',
-                sm: 'auto',
-              }}
-            >
-              <Heading size="3">Legal</Heading>
-              <Flex direction="column">
-                <Link href="/docs/legal/privacy-policy" color="gray">
-                  Privacy policy
-                </Link>
-                <Link href="/docs/legal/terms-of-service" color="gray">
-                  Terms of service
-                </Link>
-                <Link
-                  href="https://www.google.com/settings/ads"
-                  target="_blank"
-                  color="gray"
-                >
-                  Ad settings
-                </Link>
-              </Flex>
-            </Flex>
-          </Flex>
-        </Flex>
-
-        <Flex gap="5" display={{ initial: 'flex', sm: 'none' }}>
-          <Flex direction="column" justify="between" align="end">
-            <Text size="2" color="gray">
-              BlitzKit
-            </Text>
-            <Text size="2" color="gray">
-              WoT Blitz
-            </Text>
-            <Text size="2" color="gray">
-              CDN
-            </Text>
-          </Flex>
-
-          <Flex direction="column" justify="between" align="start">
-            <Code size="2" color="gray">
-              {packageJson.version}
-            </Code>
-            <Code size="2" color="gray">
-              {awaitedGameDefinitions.version}
-            </Code>
-            <Code size="2" color="gray">
-              {process.env.NEXT_PUBLIC_ASSET_BRANCH}
-            </Code>
-          </Flex>
-        </Flex>
-
-        <Flex gap="2" align="center" display={{ initial: 'none', sm: 'flex' }}>
-          <Text size="2" color="gray">
-            BlitzKit
-          </Text>
-          <Code size="2" color="gray">
-            {packageJson.version}
-          </Code>
-          <Text size="2" color="gray">
-            WoT Blitz
-          </Text>
-          <Code size="2" color="gray">
-            {awaitedGameDefinitions.version}
-          </Code>
-          <Text size="2" color="gray">
-            CDN
-          </Text>
-          <Code size="2" color="gray">
-            {process.env.NEXT_PUBLIC_ASSET_BRANCH}
-          </Code>
-        </Flex>
-      </Flex>
-    </Theme>
-  );
-}

packages/website/src/components/HomeHero.astro

@@ -4,8 +4,8 @@ import { Code, Flex, Heading, Text } from '@radix-ui/themes';
 import { BRANCH_NAMES } from '../constants/branches';
 
 const isBranchNamed =
-  process.env.NEXT_PUBLIC_ASSET_BRANCH &&
-  BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH];
+  process.env.PUBLIC_ASSET_BRANCH &&
+  BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH];
 ---
 
 <style>
@@ -58,7 +58,7 @@ const isBranchNamed =
           {
             isBranchNamed && (
               <Code size="8" color="gray" highContrast variant="outline">
-                {BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH!]}
+                {BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH!]}
               </Code>
             )
           }

packages/website/src/components/Link.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import {
-  Link as RadixLink,
-  LinkProps as RadixLinkProps,
-} from '@radix-ui/themes';
-import { useRouter } from 'next/navigation';
-import { forwardRef } from 'react';
-
-type LinkProps = RadixLinkProps & {
-  disabled?: boolean;
-};
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, onClick, target, disabled, style, ...props }, ref) => {
-    const router = useRouter();
-
-    return (
-      <RadixLink
-        style={{
-          cursor: disabled ? 'not-allowed' : 'pointer',
-          ...style,
-        }}
-        ref={ref}
-        href={disabled ? undefined : href}
-        onClick={(event) => {
-          if (disabled) return;
-
-          event.preventDefault();
-
-          if (href) {
-            if (event.ctrlKey || event.metaKey || target === '_blank') {
-              window.open(href);
-            } else {
-              router.push(href);
-            }
-          }
-          onClick?.(event);
-        }}
-        {...props}
-      />
-    );
-  },
-);

packages/website/src/components/ModuleButtons/TankComponentButton.tsx

@@ -1,5 +1,5 @@
 import { Button, Text, Tooltip } from '@radix-ui/themes';
-import { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 export interface TankComponentButtonProps
   extends ComponentProps<typeof Button> {

packages/website/src/components/Navbar/components/WargamingAccountName.tsx

@@ -1,21 +1,27 @@
 import { getAccountInfo, idToRegion } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
 import { Text } from '@radix-ui/themes';
-import { use, useMemo } from 'react';
-import * as App from '../../../../../website-legacy/src/stores/app';
+import { useMemo } from 'react';
+import usePromise from 'react-promise-suspense';
+import { $wargamingLogin } from '../../../stores/wargamingLogin';
 
 export function WargamingAccountName() {
-  const wargaming = App.use((state) => state.logins.wargaming!);
-  const promise = useMemo(
-    () =>
-      getAccountInfo(idToRegion(wargaming.id), wargaming.id, [], {
-        access_token: wargaming.token,
-      }).then((data) => {
-        console.log(data);
-        return data?.nickname as string | undefined;
-      }),
-    [wargaming],
-  );
-  const nickname = use(promise);
+  const wargamingLogin = useStore($wargamingLogin);
+  const promise = useMemo(async () => {
+    if (!wargamingLogin.token) return null;
+
+    const data = await getAccountInfo(
+      idToRegion(Number(wargamingLogin.id)),
+      Number(wargamingLogin.id),
+      [],
+      {
+        access_token: wargamingLogin.token,
+      },
+    );
+
+    return data?.nickname as string | undefined;
+  }, [wargamingLogin.token]);
+  const nickname = usePromise(() => promise, []);
 
   return nickname ?? <Text color="gray">Unknown Account</Text>;
 }

packages/website/src/components/Navbar/components/WargamingLoginButton.tsx

@@ -1,7 +1,6 @@
 import { assertSecret, REGIONS } from '@blitzkit/core';
 import strings from '@blitzkit/core/lang/en-US.json';
-import { Button, ButtonProps, Dialog, Flex } from '@radix-ui/themes';
-import { Link } from '../../Link';
+import { Button, type ButtonProps, Dialog, Flex, Link } from '@radix-ui/themes';
 import { WargamingIcon } from '../../WargamingIcon';
 
 export function WargamingLoginButton({ children, ...props }: ButtonProps) {
@@ -29,7 +28,7 @@ export function WargamingLoginButton({ children, ...props }: ButtonProps) {
                 href={
                   typeof window !== 'undefined'
                     ? `https://api.worldoftanks.${region}/wot/auth/login/?application_id=${assertSecret(
-                        process.env.NEXT_PUBLIC_WARGAMING_APPLICATION_ID,
+                        process.env.PUBLIC_WARGAMING_APPLICATION_ID,
                       )}&redirect_uri=${encodeURIComponent(
                         `${location.origin}/auth/wargaming?return=${location.origin}${location.pathname}`,
                       )}`

packages/website/src/components/Navbar/index.tsx

@@ -1,11 +1,10 @@
-'use client';
-
 import {
   assertSecret,
   imgur,
   ImgurSize,
   patreonLoginUrl,
 } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
 import {
   Cross1Icon,
   DiscordLogoIcon,
@@ -21,18 +20,18 @@ import {
   Grid,
   IconButton,
   Inset,
+  Link,
   Popover,
   ScrollArea,
   Separator,
   Skeleton,
   Text,
 } from '@radix-ui/themes';
-import { usePathname } from 'next/navigation';
 import { Fragment, Suspense, useState } from 'react';
-import * as App from '../../../../website-legacy/src/stores/app';
-import { BRANCH_NAMES } from '../../../../website/src/components/Hero/constants';
+import { BRANCH_NAMES } from '../../constants/branches';
 import { homeTool, TOOLS } from '../../constants/tools';
-import { Link } from '../Link';
+import { $patreonLogin } from '../../stores/patreonLogin';
+import { $wargamingLogin } from '../../stores/wargamingLogin';
 import { PatreonIcon } from '../PatreonIcon';
 import { WargamingIcon } from '../WargamingIcon';
 import { WargamingAccountName } from './components/WargamingAccountName';
@@ -41,14 +40,13 @@ import * as styles from './index.css';
 
 export function Navbar() {
   const [showHamburgerMenu, setShowHamburgerMenu] = useState(false);
-  const pathname = usePathname();
-  const logins = App.use((state) => state.logins);
-  const mutateApp = App.useMutation();
+  const patreonLogin = useStore($patreonLogin);
+  const wargamingLogin = useStore($wargamingLogin);
   const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
   const tools = [homeTool, ...toolsFiltered];
   const isBranchNamed =
-    process.env.NEXT_PUBLIC_ASSET_BRANCH &&
-    BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH];
+    process.env.PUBLIC_ASSET_BRANCH &&
+    BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH];
 
   return (
     <Flex className={styles.navbar}>
@@ -67,6 +65,7 @@ export function Navbar() {
                 className={styles.hamburger}
                 onClick={(event) => {
                   event.stopPropagation();
+                  console.log('click!');
                   setShowHamburgerMenu((state) => !state);
                 }}
               >
@@ -85,7 +84,7 @@ export function Navbar() {
                   BlitzKit
                   {isBranchNamed && (
                     <Code color="gray" size="1" highContrast variant="outline">
-                      {BRANCH_NAMES[process.env.NEXT_PUBLIC_ASSET_BRANCH!]}
+                      {BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH!]}
                     </Code>
                   )}
                 </Flex>
@@ -103,10 +102,12 @@ export function Navbar() {
               {toolsFiltered.map((tool, index) => {
                 const unavailableOnBranch = tool.branches?.every(
                   (branch) =>
-                    branch !==
-                    assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH),
+                    branch !== assertSecret(process.env.PUBLIC_ASSET_BRANCH),
                 );
-                const selected = pathname.startsWith(`/tools/${tool.id}`);
+                // const selected = window.location.pathname.startsWith(
+                //   `/tools/${tool.id}`,
+                // );
+                const selected = false;
 
                 if (unavailableOnBranch) return null;
 
@@ -172,31 +173,29 @@ export function Navbar() {
                   width="320px"
                   onOpenAutoFocus={(event) => event.preventDefault()}
                 >
-                  {(logins.patreon || logins.wargaming) && (
+                  {(patreonLogin.token || wargamingLogin.token) && (
                     <Flex direction="column" gap="2">
                       <Text align="center" color="gray">
                         Logged in accounts
                       </Text>
 
-                      {logins.patreon && (
+                      {patreonLogin.token && (
                         <Flex align="center" gap="2" justify="center">
                           <PatreonIcon width={15} height={15} />
                           <Text>Patreon</Text>
                           <Button
                             color="red"
                             variant="ghost"
-                            onClick={() =>
-                              mutateApp((draft) => {
-                                draft.logins.patreon = undefined;
-                              })
-                            }
+                            onClick={() => {
+                              $patreonLogin.set({ token: undefined });
+                            }}
                           >
                             Logout
                           </Button>
                         </Flex>
                       )}
 
-                      {logins.wargaming && (
+                      {wargamingLogin.token && (
                         <Flex align="center" gap="2" justify="center">
                           <WargamingIcon width={15} height={15} />
                           <Text>
@@ -209,11 +208,9 @@ export function Navbar() {
                           <Button
                             color="red"
                             variant="ghost"
-                            onClick={() =>
-                              mutateApp((draft) => {
-                                draft.logins.wargaming = undefined;
-                              })
-                            }
+                            onClick={() => {
+                              $wargamingLogin.set({ token: undefined });
+                            }}
                           >
                             Logout
                           </Button>
@@ -222,19 +219,19 @@ export function Navbar() {
                     </Flex>
                   )}
 
-                  {!logins.patreon !== !logins.wargaming && (
+                  {!patreonLogin.token !== !wargamingLogin.token && (
                     <Inset side="x">
                       <Separator my="4" size="4" />
                     </Inset>
                   )}
 
-                  {(!logins.patreon || !logins.wargaming) && (
+                  {(!patreonLogin.token || !wargamingLogin.token) && (
                     <Flex direction="column" gap="2">
                       <Text align="center" color="gray">
                         Log in with...
                       </Text>
 
-                      {!logins.patreon && (
+                      {!patreonLogin.token && (
                         <Link
                           style={{ width: '100%' }}
                           href={patreonLoginUrl()}
@@ -245,7 +242,7 @@ export function Navbar() {
                         </Link>
                       )}
 
-                      {!logins.wargaming && <WargamingLoginButton />}
+                      {!wargamingLogin.token && <WargamingLoginButton />}
                     </Flex>
                   )}
                 </Popover.Content>
@@ -266,7 +263,7 @@ export function Navbar() {
             {tools.map((tool) => {
               const unavailableOnBranch = tool.branches?.every(
                 (branch) =>
-                  branch !== assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH),
+                  branch !== assertSecret(process.env.PUBLIC_ASSET_BRANCH),
               );
 
               if (unavailableOnBranch) return null;

packages/website/src/components/PageWrapper.tsx

@@ -1,5 +1,5 @@
 import { Flex, FlexProps, Theme } from '@radix-ui/themes';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { RadixSize } from '../../../website-legacy/src/stores/embedState';
 
 type PageWrapperProps = FlexProps & {

packages/website/src/components/Party3.astro

@@ -0,0 +1,13 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-GL2JVHCGPQ"
+></script>
+<script>
+  // @ts-nocheck
+
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', 'G-GL2JVHCGPQ');
+</script>

packages/website/src/components/Party3.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-export function Party3() {
-  useEffect(() => {
-    (window as any).msAdsQueue = (window as any).msAdsQueue || [];
-  }, []);
-
-  return (
-    <>
-      {/* analytics */}
-      <script
-        async
-        src="https://www.googletagmanager.com/gtag/js?id=G-GL2JVHCGPQ"
-      />
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-
-            gtag('config', 'G-GL2JVHCGPQ');
-          `,
-        }}
-      />
-
-      {/* adsense */}
-      {/* <script
-        async
-        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1289406790225052"
-        crossOrigin="anonymous"
-      /> */}
-
-      {/* pub center */}
-      {/* <script
-        async
-        src="https://adsdk.microsoft.com/mmnow/sdk.js?siteId=364645&publisherId=253617120"
-        crossOrigin="anonymous"
-      /> */}
-    </>
-  );
-}

packages/website/src/components/PatreonIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function PatreonIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/Plugs.tsx

@@ -1,6 +1,5 @@
-'use client';
-
 import { assertSecret, patreonLoginUrl } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
 import { ArrowRightIcon } from '@radix-ui/react-icons';
 import {
   Badge,
@@ -13,17 +12,17 @@ import {
 } from '@radix-ui/themes';
 import { useLayoutEffect, useState } from 'react';
 import { useAdExempt } from '../hooks/useAdExempt';
-import * as App from '../stores/app';
+import { $patreonLogin } from '../stores/patreonLogin';
 import { PatreonIcon } from './PatreonIcon';
 
 export function Plugs() {
   const [hasPatreon, setHasPatreon] = useState(false);
   const exempt = useAdExempt();
-  const patreon = App.use((state) => state.logins.patreon);
+  const patreonLogin = useStore($patreonLogin);
 
   useLayoutEffect(() => {
-    setHasPatreon(patreon !== undefined);
-  }, [patreon]);
+    setHasPatreon(patreonLogin !== undefined);
+  }, [patreonLogin]);
 
   return (
     <Flex
@@ -34,8 +33,8 @@ export function Plugs() {
       py="8"
       gap="6"
     >
-      {assertSecret(process.env.NEXT_PUBLIC_PROMOTE_OPENTEST) === 'true' &&
-        assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH) !== 'opentest' && (
+      {assertSecret(process.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
+        assertSecret(process.env.PUBLIC_ASSET_BRANCH) !== 'opentest' && (
           <>
             <Flex direction="column" gap="3" align="center">
               <Flex align="center" gap="2">

packages/website/src/components/ResearchedIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ResearchedIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/ScienceIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ScienceIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/ScienceOffIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function ScienceOffIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/Skeleton/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { skeleton } from './index.css';
 
 export function Skeleton({ className, ...props }: ComponentProps<'div'>) {

packages/website/src/components/StickyTableRoot.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Table } from '@radix-ui/themes';
 import { RootProps } from '@radix-ui/themes/dist/cjs/components/table';
 import { useEffect, useRef } from 'react';

packages/website/src/components/TanksEmbed.tsx

@@ -6,7 +6,7 @@ import {
 import strings from '@blitzkit/core/lang/en-US.json';
 import { amberDark, blueDark } from '@radix-ui/colors';
 import { Flex, Text } from '@radix-ui/themes';
-import { times } from 'lodash';
+import { times } from 'lodash-es';
 import { ReactNode } from 'react';
 import { toRadiusVar } from '../../../website-legacy/src/core/radix/utils';
 import { useEmbedStateCurry } from '../../../website-legacy/src/stores/embedState/utilities';

packages/website/src/components/VerifiedIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function VerifiedIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/components/WargamingIcon.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export function WargamingIcon(props: ComponentProps<'svg'>) {
   return (

packages/website/src/core/blitz/applyPitchYawLimits.ts

@@ -1,5 +1,5 @@
 import { normalizeAngleRad, PitchLimits, YawLimits } from '@blitzkit/core';
-import { clamp } from 'lodash';
+import { clamp } from 'lodash-es';
 import { degToRad } from 'three/src/math/MathUtils';
 
 export function applyPitchYawLimits(

packages/website/src/core/blitzkit/tankToCompareMember.ts

@@ -1,5 +1,5 @@
 import { ProvisionDefinitions, TankDefinition } from '@blitzkit/core';
-import { uniqueId } from 'lodash';
+import { uniqueId } from 'lodash-es';
 import { CompareMember } from '../../stores/compareEphemeral';
 import { tankToDuelMember } from './tankToDuelMember';
 

packages/website/src/core/zustand/createContextualSafeStore.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { type Draft, produce } from 'immer';
 import {
   createContext,

packages/website/src/hooks/useAdExempt.ts

@@ -1,20 +1,21 @@
+import { useStore } from '@nanostores/react';
 import { useLayoutEffect, useState } from 'react';
-import * as App from '../stores/app';
+import { $patreonLogin } from '../stores/patreonLogin';
 
 let cache: Record<string, boolean | Promise<boolean>> = {};
 
 export function useAdExempt() {
-  const patreon = App.use((state) => state.logins.patreon);
+  const patreonLogin = useStore($patreonLogin);
   const [exempt, setExempt] = useState(false);
 
   useLayoutEffect(() => {
     (async () => {
-      if (!patreon) return setExempt(false);
+      if (!patreonLogin.token) return setExempt(false);
 
-      if (!(patreon.token in cache)) {
-        cache[patreon.token] = new Promise<boolean>(async (resolve) => {
+      if (!(patreonLogin.token in cache)) {
+        cache[patreonLogin.token] = new Promise<boolean>(async (resolve) => {
           const response = await fetch(
-            `/api/patreon/membership/${patreon.token}`,
+            `/api/patreon/membership/${patreonLogin.token}`,
             { cache: 'force-cache' },
           );
 
@@ -23,12 +24,12 @@ export function useAdExempt() {
           const json = await response.json();
           const exempt = typeof json === 'boolean' && json;
 
-          cache[patreon.token] = exempt;
+          cache[patreonLogin.token] = exempt;
           resolve(exempt);
         });
       }
 
-      setExempt(await cache[patreon.token]);
+      setExempt(await cache[patreonLogin.token]);
     })();
   }, []);
 

packages/website/src/hooks/useEccentricity.ts

@@ -1,5 +1,5 @@
 import { TankDefinition, tankDefinitions } from '@blitzkit/core';
-import { sumBy } from 'lodash';
+import { sumBy } from 'lodash-es';
 import { use, useMemo } from 'react';
 import * as Duel from '../stores/duel';
 

packages/website/src/hooks/useTankModelDefinition.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import * as TankopediaEphemeral from '../stores/tankopediaEphemeral';
 
 export function useTankModelDefinition() {

packages/website/src/layouts/RootLayout.astro

@@ -1,6 +1,9 @@
 ---
 import { Flex, Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
+import Footer from '../components/Footer.astro';
+import { Navbar } from '../components/Navbar';
+import Party3 from '../components/Party3.astro';
 const { pathname } = Astro.url;
 
 const isRoot = pathname === '/';
@@ -29,7 +32,7 @@ const isRoot = pathname === '/';
     <meta property="og:site_name" content="BlitzKit" />
     <link rel="icon" type="image/x-icon" href="/favicon.png" />
 
-    <!-- <Party3 /> -->
+    <Party3 />
   </head>
 
   <body>
@@ -42,7 +45,7 @@ const isRoot = pathname === '/';
       suppressContentEditableWarning
     >
       <Flex direction="column" minHeight="100vh">
-        <!-- {!hideNav && <Navbar />} -->
+        <Navbar client:idle />
 
         <!-- <Checks /> -->
 
@@ -50,7 +53,7 @@ const isRoot = pathname === '/';
         <slot />
         <!-- </Suspense> -->
 
-        <!-- {!hideNav && <Footer />} -->
+        <Footer />
       </Flex>
     </Theme>
   </body>

packages/website/src/pages/index.astro

@@ -13,26 +13,24 @@ import {
   tankPerformanceTool,
 } from '../constants/tools';
 import RootLayout from '../layouts/RootLayout.astro';
-import * as App from '../stores/app';
 ---
 
-<App.Provider>
-  <RootLayout>
-    <HomeHero />
+<RootLayout>
+  <HomeHero />
 
-    <Plugs />
+  <Plugs />
 
-    <Flex p="4" justify="center" gap="4">
-      <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
-        <ToolCard tool={tankopediaTool} />
+  <Flex p="4" justify="center" gap="4">
+    <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
+      <ToolCard tool={tankopediaTool} />
 
-        <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-          {/* <ToolCard tool={playerStatsTool} /> */}
-          <ToolCard tool={compareTool} />
-          <ToolCard tool={tankPerformanceTool} />
-        </Flex>
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        {/* <ToolCard tool={playerStatsTool} /> */}
+        <ToolCard tool={compareTool} />
+        <ToolCard tool={tankPerformanceTool} />
+      </Flex>
 
-        <!-- {
+      <!-- {
         !exempt && (
           <Flex justify="center">
             <AdMidSectionResponsive />
@@ -40,13 +38,13 @@ import * as App from '../stores/app';
         )
       } -->
 
-        <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-          <ToolCard tool={sessionTool} />
-          {/* <ToolCard tool={embedTool} /> */}
-          <ToolCard tool={ratingTool} />
-        </Flex>
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={sessionTool} />
+        {/* <ToolCard tool={embedTool} /> */}
+        <ToolCard tool={ratingTool} />
+      </Flex>
 
-        <!-- {
+      <!-- {
         !exempt && (
           <Flex
             justify="center"
@@ -60,47 +58,46 @@ import * as App from '../stores/app';
         )
       } -->
 
-        <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-          <ToolCard tool={discordTool} />
-          <ToolCard tool={moreTool} />
-        </Flex>
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={discordTool} />
+        <ToolCard tool={moreTool} />
+      </Flex>
 
-        <!-- {!exempt && <AdMidSectionResponsive />} -->
+      <!-- {!exempt && <AdMidSectionResponsive />} -->
 
-        <Heading>Other cool projects</Heading>
+      <Heading mt="6">Other cool projects</Heading>
 
-        <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-          <ToolCard
-            tool={{
-              button: {
-                text: 'Analyze',
-                color: 'blue',
-              },
-              description: 'Rich historic average stats',
-              id: 'blitz-analysis',
-              image: 'j76YXGl',
-              title: 'BlitzAnalysis[]',
-              href: 'https://blitzanalysiz.com/',
-            }}
-          />
-          <ToolCard
-            tool={{
-              button: {
-                color: 'purple',
-                text: 'Install',
-                highContrast: true,
-              },
-              image: 'zYrrYbR',
-              description: 'In-game session stats',
-              id: 'blitz-insider',
-              title: 'Blitz Insider',
-              href: 'https://discord.gg/UjWf9eGgtR',
-            }}
-          />
-        </Flex>
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard
+          tool={{
+            button: {
+              text: 'Analyze',
+              color: 'blue',
+            },
+            description: 'Rich historic average stats',
+            id: 'blitz-analysis',
+            image: 'j76YXGl',
+            title: 'BlitzAnalysis[]',
+            href: 'https://blitzanalysiz.com/',
+          }}
+        />
+        <ToolCard
+          tool={{
+            button: {
+              color: 'purple',
+              text: 'Install',
+              highContrast: true,
+            },
+            image: 'zYrrYbR',
+            description: 'In-game session stats',
+            id: 'blitz-insider',
+            title: 'Blitz Insider',
+            href: 'https://discord.gg/UjWf9eGgtR',
+          }}
+        />
       </Flex>
     </Flex>
+  </Flex>
 
-    <div style={{ flex: 1 }}></div>
-  </RootLayout>
-</App.Provider>
+  <div style={{ flex: 1 }}></div>
+</RootLayout>

packages/website/src/stores/app/index.ts

@@ -1,28 +1,10 @@
-'use client';
-
-import lodash from 'lodash';
+import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
 
-interface WargamingLogin {
-  id: number;
-  token: string;
-  expires: number;
-}
-
-interface PatreonLogin {
-  token: string;
-  refreshToken: string;
-  expires: number;
-}
-
 export interface App {
   developerMode: boolean;
-  logins: {
-    wargaming?: WargamingLogin;
-    patreon?: PatreonLogin;
-  };
   policiesAgreementIndex: number;
 }
 

packages/website/src/stores/compareEphemeral.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { create } from 'zustand';
 import { DuelMember } from './duel';
 

packages/website/src/stores/comparePersistent.ts

@@ -1,6 +1,4 @@
-'use client';
-
-import lodash from 'lodash';
+import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';

packages/website/src/stores/duel/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   type EngineDefinition,
   type GunDefinition,

packages/website/src/stores/embedState/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import * as radixColors from '@radix-ui/colors';
 import { create } from 'zustand';
 import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';

packages/website/src/stores/patreonLogin.ts

@@ -0,0 +1,15 @@
+import { persistentMap } from '@nanostores/persistent';
+
+type PatreonLogin =
+  | {
+      token: undefined;
+    }
+  | {
+      token: string;
+      refreshToken: string;
+      expires: string;
+    };
+
+export const $patreonLogin = persistentMap<PatreonLogin>('patreon:', {
+  token: undefined,
+});

packages/website/src/stores/session.ts

@@ -1,7 +1,5 @@
-'use client';
-
 import { IndividualTankStats, Region, Stat } from '@blitzkit/core';
-import lodash from 'lodash';
+import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';

packages/website/src/stores/tankFilters.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { TankClass, Tier, TreeType } from '@blitzkit/core';
 import { create } from 'zustand';
 import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';

packages/website/src/stores/tankPerformancePersistent/index.ts

@@ -1,6 +1,4 @@
-'use client';
-
-import lodash from 'lodash';
+import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';

packages/website/src/stores/tankPerformanceSort/index.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { create } from 'zustand';
 import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
 import { TankPerformanceSortTypeNames } from './constants';

packages/website/src/stores/tankopediaEphemeral.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { ModelDefinition } from '@blitzkit/core';
 import { Vector3 } from 'three';
 import { create } from 'zustand';

packages/website/src/stores/tankopediaPersistent/index.ts

@@ -1,7 +1,5 @@
-'use client';
-
 import { TankClass, Tier, TreeType } from '@blitzkit/core';
-import lodash from 'lodash';
+import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { ENVIRONMENTS } from '../../app/tools/tankopedia/[id]/components/Lighting';

packages/website/src/stores/tankopediaSort.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { create } from 'zustand';
 import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
 import {

packages/website/src/stores/wargamingLogin.ts

@@ -0,0 +1,15 @@
+import { persistentMap } from '@nanostores/persistent';
+
+type PatreonLogin =
+  | {
+      token: undefined;
+    }
+  | {
+      token: string;
+      id: string;
+      expires: string;
+    };
+
+export const $wargamingLogin = persistentMap<PatreonLogin>('wargaming:', {
+  token: undefined,
+});

packages/website/src/types/global.d.ts

@@ -0,0 +1,5 @@
+declare global {
+  interface Window {
+    MyNamespace: any;
+  }
+}