feat: migrated tank search

packages/website/src/components/Footer.astro

@@ -136,7 +136,7 @@ const awaitedGameDefinitions = await gameDefinitions;
         {awaitedGameDefinitions.version}
       </Code>
       <Code size="2" color="gray">
-        {process.env.PUBLIC_ASSET_BRANCH}
+        {import.meta.env.PUBLIC_ASSET_BRANCH}
       </Code>
     </Flex>
   </Flex>
@@ -152,7 +152,7 @@ const awaitedGameDefinitions = await gameDefinitions;
     </Code>
     <Text size="2" color="gray"> CDN </Text>
     <Code size="2" color="gray">
-      {process.env.PUBLIC_ASSET_BRANCH}
+      {import.meta.env.PUBLIC_ASSET_BRANCH}
     </Code>
   </Flex>
 </Flex>

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.PUBLIC_ASSET_BRANCH &&
-  BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH];
+  import.meta.env.PUBLIC_ASSET_BRANCH &&
+  BRANCH_NAMES[import.meta.env.PUBLIC_ASSET_BRANCH];
 ---
 
 <style>
@@ -58,7 +58,7 @@ const isBranchNamed =
           {
             isBranchNamed && (
               <Code size="8" color="gray" highContrast variant="outline">
-                {BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH!]}
+                {BRANCH_NAMES[import.meta.env.PUBLIC_ASSET_BRANCH!]}
               </Code>
             )
           }

packages/website/src/components/Navbar.astro

@@ -25,8 +25,8 @@ import { NavbarAccount } from './NavbarAccount';
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const tools = [homeTool, ...toolsFiltered];
 const isBranchNamed =
-  process.env.PUBLIC_ASSET_BRANCH &&
-  BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH];
+  import.meta.env.PUBLIC_ASSET_BRANCH &&
+  BRANCH_NAMES[import.meta.env.PUBLIC_ASSET_BRANCH];
 ---
 
 <style>
@@ -125,7 +125,7 @@ const isBranchNamed =
               {
                 isBranchNamed && (
                   <Code color="gray" size="1" highContrast variant="outline">
-                    {BRANCH_NAMES[process.env.PUBLIC_ASSET_BRANCH!]}
+                    {BRANCH_NAMES[import.meta.env.PUBLIC_ASSET_BRANCH!]}
                   </Code>
                 )
               }
@@ -140,7 +140,7 @@ const isBranchNamed =
             toolsFiltered.map((tool, index) => {
               const unavailableOnBranch = tool.branches?.every(
                 (branch) =>
-                  branch !== assertSecret(process.env.PUBLIC_ASSET_BRANCH),
+                  branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
               );
               // const selected = window.location.pathname.startsWith(
               //   `/tools/${tool.id}`,
@@ -215,7 +215,7 @@ const isBranchNamed =
           tools.map((tool) => {
             const unavailableOnBranch = tool.branches?.every(
               (branch) =>
-                branch !== assertSecret(process.env.PUBLIC_ASSET_BRANCH),
+                branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
             );
 
             if (unavailableOnBranch) return null;

packages/website/src/components/Plugs.tsx

@@ -33,8 +33,8 @@ export function Plugs() {
       py="8"
       gap="6"
     >
-      {assertSecret(process.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
-        assertSecret(process.env.PUBLIC_ASSET_BRANCH) !== 'opentest' && (
+      {assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
+        assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) !== 'opentest' && (
           <>
             <Flex direction="column" gap="3" align="center">
               <Flex align="center" gap="2">

packages/website/src/components/TankSearch/components/SearchBar.tsx

@@ -3,10 +3,9 @@ import { useStore } from '@nanostores/react';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Flex, Spinner, TextField } from '@radix-ui/themes';
 import { debounce } from 'lodash-es';
-import { useRouter } from 'next/navigation';
 import { type KeyboardEventHandler, useCallback, useRef } from 'react';
-import { QuickLink } from './QuickLink';
 import { $tankFilters } from '../../../stores/tankFilters';
+import { QuickLink } from './QuickLink';
 import { Sort } from './Sort';
 
 interface SearchBarProps {
@@ -16,7 +15,6 @@ interface SearchBarProps {
 
 export function SearchBar({ topResult, onSelect }: SearchBarProps) {
   const tankFilters = useStore($tankFilters);
-  const router = useRouter();
   const input = useRef<HTMLInputElement>(null);
   const performSearch = useCallback(
     debounce(() => {
@@ -56,7 +54,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
       if (onSelect) {
         onSelect(topResult);
       } else {
-        router.push(`/tools/tankopedia/${topResult.id}`);
+        window.location.href = `/tools/tankopedia/${topResult.id}`;
       }
     },
     [topResult],

packages/website/src/components/TankSearch/components/TankCard.tsx

@@ -9,9 +9,8 @@ import {
   type TankDefinition,
 } from '@blitzkit/core';
 import { useStore } from '@nanostores/react';
-import { Flex, Text } from '@radix-ui/themes';
+import { Flex, Link, Text } from '@radix-ui/themes';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import Link from 'next/link';
 import { useMemo } from 'react';
 import { resolveReload } from '../../../core/blitzkit/resolveReload';
 import { useAwait } from '../../../hooks/useAwait';
@@ -158,7 +157,6 @@ export function TankCard({ tank, onSelect }: TankCardProps) {
       <Link
         className={styles.link}
         href={onSelect ? '#' : `/tools/tankopedia/${tank.id}`}
-        prefetch={false}
       >
         <img alt={tank.name} src={tankIcon(tank.id)} className={styles.image} />
 

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

@@ -49,15 +49,15 @@ export const TankSearch = memo<TankSearchProps>(
   ({ compact, onSelect, onSelectAll, ...props }) => {
     const exempt = useAdExempt();
     const awaitedGameDefinitions = useAwait(gameDefinitions);
+    console.log(awaitedGameDefinitions);
     const awaitedModelDefinitions = useAwait(modelDefinitions);
     const awaitedTankDefinitions = useAwait(tankDefinitions);
     const awaitedTanksDefinitionsArray = useAwait(tankDefinitionsArray);
     const awaitedTankNames = useAwait(tankNames);
     const tankFilters = useStore($tankFilters);
     const tankopediaSort = useStore($tankopediaSort);
-    const tanksFiltered = useMemo(() => {
-      console.log(awaitedTanksDefinitionsArray);
 
+    const tanksFiltered = useMemo(() => {
       if (tankFilters.search === undefined) {
         const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
           filterTank(tankFilters, tank),

packages/website/src/components/ToolCard.astro

@@ -10,7 +10,7 @@ interface Props {
 
 const { tool } = Astro.props;
 const disabled = tool.branches?.every(
-  (branch) => branch !== assertSecret(process.env.PUBLIC_ASSET_BRANCH),
+  (branch) => branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
 );
 ---
 
@@ -106,7 +106,7 @@ const disabled = tool.branches?.every(
             disabled ? (
               <>
                 Unavailable on{' '}
-                <Code>{assertSecret(process.env.PUBLIC_ASSET_BRANCH)}</Code>
+                <Code>{assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH)}</Code>
               </>
             ) : (
               tool.description

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

@@ -1,5 +1,5 @@
-import { TankDefinition } from '@blitzkit/core';
-import { TankFilters } from '../../stores/tankFilters';
+import type { TankDefinition } from '@blitzkit/core';
+import type { TankFilters } from '../../stores/tankFilters';
 
 export function filterTank(filters: TankFilters, tank: TankDefinition) {
   return (

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

@@ -1,4 +1,4 @@
-import { GunDefinition } from '@blitzkit/core';
+import type { GunDefinition } from '@blitzkit/core';
 
 export function resolveReload(gun: GunDefinition) {
   if (gun.type === 'regular') {

packages/website/src/hooks/useAwait.ts

@@ -1,8 +1,10 @@
+import { useRef } from 'react';
 import usePromise from 'react-promise-suspense';
 
 /**
  * A more stable alternative to `use` using `usePromise`.
  */
 export function useAwait<Type>(promise: Promise<Type>) {
-  return usePromise(async () => await promise, []);
+  const callback = useRef(async () => await promise);
+  return usePromise(callback.current, []);
 }

packages/website/src/pages/tools/tankopedia/index.astro

@@ -1,8 +1,7 @@
 ---
-import { TankSearch } from '../../../components/TankSearch';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
 ---
 
 <ToolLayout>
-  <TankSearch />
+  <!-- <TankSearch client:only="react" /> -->
 </ToolLayout>

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

@@ -1,4 +1,4 @@
-import { TankopediaSortBy } from '.';
+import type { TankopediaSortBy } from '.';
 
 export const SORT_UNITS: Record<TankopediaSortBy, string | undefined> = {
   'meta.none': undefined,

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

@@ -1,4 +1,4 @@
-import { TankClass, Tier, TreeType } from '@blitzkit/core';
+import type { TankClass, Tier, TreeType } from '@blitzkit/core';
 import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';