no results

packages/core/src/blitzkit/tankNames.ts

@@ -1,6 +1,6 @@
-import { BlitzKitAPI } from "@blitzkit/core";
+import { BlitzKitAPI } from "@blitzkit/core/src/blitzkit/api/base";
 import locales from "@blitzkit/i18n/locales.json";
-import { deburr } from "lodash-es";
+import { deburr, times } from "lodash-es";
 import { I18nString } from "../protos";
 
 export async function fetchTankNames(api: BlitzKitAPI) {
@@ -12,40 +12,53 @@ export async function fetchTankNames(api: BlitzKitAPI) {
 
   return await Promise.all(
     tankDefinitionsArray.map(async (tank) => {
-      const searchableNameDeburr: I18nString = { locales: {} };
+      const name_deburr: I18nString = I18nString.create();
+      const camouflages_deburr: I18nString[] = [];
+
+      const camouflages = tank.camouflages.map(
+        (id) => camouflageDefinitions.camouflages[id].name!,
+      );
 
       Object.entries(tank.name!).forEach(([key, value]) => {
-        searchableNameDeburr.locales[key] = deburr(value);
+        name_deburr.locales[key] = deburr(value);
+      });
+
+      camouflages.forEach((camouflage, index) => {
+        camouflages_deburr[index] = I18nString.create();
+        Object.entries(camouflage).forEach(([key, value]) => {
+          camouflages_deburr[index].locales[key] = deburr(value);
+        });
       });
 
       return {
         id: tank.id,
-        name: tank.name,
-        searchableName: tank.name,
-        searchableNameDeburr,
-        camouflages: tank.camouflages
-          ?.map((id) =>
-            locales.supported.map(
-              ({ locale }) =>
-                camouflageDefinitions.camouflages[id]?.name!.locales[locale],
-            ),
-          )
-          .flat()
-          .filter(Boolean)
-          .map(deburr)
-          .join(" "),
-        treeType: tank.type,
+        slug: tank.slug,
+        dev_name: tank.dev_name,
+
+        name: tank.name!,
+        name_deburr,
+
+        camouflages,
+        camouflages_deburr,
       };
     }),
   );
 }
 
 export const SEARCH_KEYS = [
+  "id",
+  "slug",
+  "dev_name",
+
   ...locales.supported
     .map(({ locale }) => [
-      `searchableName.locales.${locale}`,
-      `searchableNameDeburr.locales.${locale}`,
+      `name.locales.${locale}`,
+      `name_deburr.locales.${locale}`,
+
+      ...times(8, (index) => [
+        `camouflages.${index}.locales.${locale}`,
+        `camouflages_deburr.${index}.locales.${locale}`,
+      ]),
     ])
-    .flat(),
-  "camouflages",
+    .flat(2),
 ];

packages/website/src/components/Back/index.module.css

@@ -0,0 +1,3 @@
+.back {
+  display: contents;
+}

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

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+interface Props extends ComponentProps<"div"> {}
+
+export function Back({ className, onClick, ...props }: Props) {
+  console.log("init");
+
+  return (
+    <div
+      className={classNames(styles.back, className)}
+      onClick={(event) => {
+        console.log("back");
+        window.history.back();
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+}

packages/website/src/components/Button/index.module.css

@@ -10,14 +10,15 @@
   border: none;
 
   font-family: var(--font-family-regular);
-  font-size: 0.75rem;
+  font-size: 0.8em;
   color: var(--gray-1);
   font-weight: var(--weight-medium);
 
   cursor: pointer;
 
   &[data-size="minor"] {
-    font-size: 0.75rem;
+    font-size: 0.7em;
+    padding: var(--space-2) var(--space-3);
   }
 
   &[data-array="true"] {
@@ -60,7 +61,7 @@
 
   &[data-variant="surface"],
   &[data-variant="soft"] {
-    background-color: var(--accent-3);
+    background-color: var(--accent-a3);
     color: var(--gray-12);
   }
 

packages/website/src/components/DropdownMenu/index.module.css

@@ -0,0 +1,2 @@
+.Trigger {
+}

packages/website/src/components/Flex/index.module.css

@@ -4,4 +4,61 @@
   &[data-column="true"] {
     flex-direction: column;
   }
+  &[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
+  &[data-justify="start"] {
+    justify-content: flex-start;
+  }
+  &[data-justify="center"] {
+    justify-content: center;
+  }
+  &[data-justify="end"] {
+    justify-content: flex-end;
+  }
+  &[data-justify="between"] {
+    justify-content: space-between;
+  }
+
+  &[data-align="start"] {
+    align-items: flex-start;
+  }
+  &[data-align="center"] {
+    align-items: center;
+  }
+  &[data-align="end"] {
+    align-items: flex-end;
+  }
+
+  &[data-gap="0"] {
+    gap: var(--space-0);
+  }
+  &[data-gap="1"] {
+    gap: var(--space-1);
+  }
+  &[data-gap="2"] {
+    gap: var(--space-2);
+  }
+  &[data-gap="3"] {
+    gap: var(--space-3);
+  }
+  &[data-gap="4"] {
+    gap: var(--space-4);
+  }
+  &[data-gap="5"] {
+    gap: var(--space-5);
+  }
+  &[data-gap="6"] {
+    gap: var(--space-6);
+  }
+  &[data-gap="7"] {
+    gap: var(--space-7);
+  }
+  &[data-gap="8"] {
+    gap: var(--space-8);
+  }
+  &[data-gap="9"] {
+    gap: var(--space-9);
+  }
 }

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

@@ -4,17 +4,34 @@ import { classNames } from "../../ui/classNames";
 import styles from "./index.module.css";
 
 interface Props extends ComponentProps<"div"> {
-  gap?: Space;
   column?: boolean;
+  wrap?: boolean;
+
+  align?: "start" | "center" | "end";
+  justify?: "start" | "center" | "end" | "between";
+
+  gap?: Space;
 }
 
-export function Flex({ children, column, className, gap, ...props }: Props) {
+export function Flex({
+  children,
+  column,
+  className,
+  gap,
+  justify,
+  align,
+  wrap,
+  ...props
+}: Props) {
   return (
     <div
       {...props}
       className={classNames(styles.flex, className)}
-      data-gap={gap}
       data-column={column}
+      data-wrap={wrap}
+      data-gap={gap}
+      data-justify={justify}
+      data-align={align}
     >
       {children}
     </div>

packages/website/src/components/Link/index.module.css

@@ -6,6 +6,10 @@
   align-items: center;
   gap: var(--space-3);
 
+  &[data-underline="always"] {
+    text-decoration: underline;
+  }
+
   &[data-underline="hover"],
   &[data-underline="never"] {
     text-decoration: none;

packages/website/src/components/LinkI18nWrapper/index.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+  display: contents;
+}

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

@@ -0,0 +1,21 @@
+import locales from "@blitzkit/i18n/locales.json";
+import { LinkWrapper, type LinkWrapperProps } from "../LinkWrapper";
+import styles from "./index.module.css";
+
+export interface LinkI18nWrapperProps extends LinkWrapperProps {
+  locale: string;
+}
+
+export function LinkI18nWrapper({
+  locale,
+  href,
+  ...props
+}: LinkI18nWrapperProps) {
+  return (
+    <LinkWrapper
+      className={styles.wrapper}
+      href={`${locale === locales.default ? "" : `/${locale}`}${href}`}
+      {...props}
+    />
+  );
+}

packages/website/src/components/LinkWrapper/index.module.css

@@ -0,0 +1,3 @@
+.wrapper {
+  display: contents;
+}

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

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+export interface LinkWrapperProps extends ComponentProps<"a"> {}
+
+export function LinkWrapper({ className, ...props }: LinkWrapperProps) {
+  return <a className={classNames(styles.wrapper, className)} {...props} />;
+}

packages/website/src/components/RecentlyViewedTanks/index.module.css

@@ -1,3 +1,8 @@
 .recent {
-  /* mt="2" mb="6" */
+  margin-top: var(--space-4);
+  padding: var(--space-4);
+
+  background-color: var(--gray-a2);
+
+  border-radius: var(--space-3);
 }

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

@@ -6,7 +6,6 @@ import { TankFilters } from "../../stores/tankFilters";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankSort } from "../../stores/tankopediaSort";
 import { Flex } from "../Flex";
-import { Separator } from "../Separator";
 import { TankCard } from "../TankCard";
 import { TankCardWrapper } from "../TankCardWrapper";
 import { Text } from "../Text";
@@ -38,17 +37,16 @@ export function RecentlyViewedTanks() {
   }
 
   return (
-    <Flex column gap="2" className={styles.recent}>
-      <Text color="gray" align="center">
+    <Flex column gap="4" className={styles.recent}>
+      <Text color="gray" lowContrast>
         {strings.website.common.tank_search.recent}
       </Text>
-      <TankCardWrapper>
+
+      <TankCardWrapper compact>
         {recentlyViewed.map((id) => (
-          <TankCard tank={tankDefinitions.tanks[id]} key={id} />
+          <TankCard compact tank={tankDefinitions.tanks[id]} key={id} />
         ))}
       </TankCardWrapper>
-
-      <Separator />
     </Flex>
   );
 }

packages/website/src/components/Section/index.module.css

@@ -2,6 +2,10 @@
   display: flex;
   justify-content: center;
 
+  &:last-child {
+    flex: 1;
+  }
+
   .content {
     flex: 1;
     max-width: var(--page-width);

packages/website/src/components/TankCard/index.css

@@ -1,43 +0,0 @@
-.tank-search-card {
-  user-select: none;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2);
-  background-position: top left;
-  background-size: contain;
-  background-repeat: no-repeat;
-  overflow: hidden;
-}
-
-.tank-search-card[data-provide-link='true'] {
-  cursor: pointer;
-}
-
-.tank-search-card .link {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  color: inherit;
-}
-
-.tank-search-card .image {
-  width: 100%;
-  height: 8rem;
-  object-position: center right;
-  object-fit: contain;
-  filter: drop-shadow(-1px -1px 4px black);
-}
-
-.tank-search-card .class-icon {
-  width: 1em;
-  height: 1em;
-  min-width: 1em;
-  min-height: 1em;
-}
-
-.tank-search-card .name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

packages/website/src/components/TankCard/index.module.css

@@ -0,0 +1,43 @@
+.wrapper {
+  --image-height: 6rem;
+
+  &[data-compact="true"] {
+    --image-height: 4rem;
+
+    .image-wrapper {
+      background-size: auto 75%;
+    }
+  }
+
+  .image-wrapper {
+    overflow: hidden;
+
+    box-sizing: border-box;
+
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+
+    height: var(--image-height);
+  }
+
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    gap: var(--space-2);
+
+    .icon {
+      width: 1em;
+      height: 1em;
+      min-width: 1em;
+      min-height: 1em;
+    }
+
+    .text {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}

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

@@ -1,119 +1,99 @@
 import { alias, TankType, type TankDefinition } from "@blitzkit/core";
 import { uniq } from "lodash-es";
-import { forwardRef, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { api } from "../../core/blitzkit/api";
 import { useLocale } from "../../hooks/useLocale";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { classIcons } from "../ClassIcon";
 import { Flex } from "../Flex";
-import { LinkI18n } from "../LinkI18n";
+import { LinkI18nWrapper } from "../LinkI18nWrapper";
 import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
 import { Text, type TextProps } from "../Text";
-import "./index.css";
+import styles from "./index.module.css";
 
-type TankCardProps = TextProps & {
+type TankCardProps = {
   tank: TankDefinition;
   onTankSelect?: (tank: TankDefinition) => void;
   discriminator?: ReactNode;
   noLink?: boolean;
+  compact?: boolean;
 };
 
 const tankDefinitions = await api.tankDefinitions();
 
-export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
-  (
-    {
-      tank,
-      discriminator,
-      onTankSelect: onSelect,
-      noLink,
-      style,
-      ...props
-    }: TankCardProps,
-    ref,
-  ) => {
-    const { unwrap, locale } = useLocale();
-    const provideLink = !noLink && onSelect === undefined;
+export const TankCard = ({
+  tank,
+  discriminator,
+  onTankSelect: onSelect,
+  noLink,
+  compact,
+}: TankCardProps) => {
+  const { unwrap, locale } = useLocale();
 
-    const Icon = classIcons[tank.class];
+  const provideLink = !noLink && onSelect === undefined;
+  const name = unwrap(tank.name!);
 
-    return (
-      <Text
-        ref={ref}
-        tabIndex={onSelect ? 0 : undefined}
-        size="2"
-        color={
-          tank.type === TankType.TANK_TYPE_COLLECTOR
-            ? "blue"
-            : tank.type === TankType.TANK_TYPE_PREMIUM
-              ? "amber"
-              : "gray"
-        }
-        highContrast={tank.type === TankType.TANK_TYPE_RESEARCHABLE}
-        onClick={() => {
-          onSelect?.(tank);
-          TankopediaPersistent.mutate((draft) => {
-            draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
-              .filter((id) => id in tankDefinitions.tanks)
-              .slice(0, MAX_RECENTLY_VIEWED);
-          });
-        }}
-        className="tank-search-card"
-        data-provide-link={provideLink}
+  const color: TextProps["color"] =
+    tank.type === TankType.TANK_TYPE_COLLECTOR
+      ? "blue"
+      : tank.type === TankType.TANK_TYPE_PREMIUM
+        ? "amber"
+        : "gray";
+  const lowContrast = tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
+
+  const Icon = classIcons[tank.class];
+
+  const content = (
+    <Flex
+      className={styles.wrapper}
+      data-compact={compact}
+      column
+      gap="3"
+      onClick={() => {
+        onSelect?.(tank);
+        TankopediaPersistent.mutate((draft) => {
+          draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
+            .filter((id) => id in tankDefinitions.tanks)
+            .slice(0, MAX_RECENTLY_VIEWED);
+        });
+      }}
+    >
+      <Flex
+        justify="end"
+        className={styles["image-wrapper"]}
         style={{
           backgroundImage: `url(${alias(
             "api",
             `/flags/scratched/${tank.nation}.webp`,
           )})`,
-          ...style,
         }}
-        {...props}
       >
-        <LinkI18n
-          locale={locale}
-          className="link"
-          underline="hover"
-          href={provideLink ? `/tanks/${tank.slug}` : "#"}
-          onClick={(event) => {
-            if (!provideLink) event.preventDefault();
-          }}
-        >
-          <img
-            alt={unwrap(tank.name!)}
-            src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
-            className="image"
-            draggable={false}
-          />
+        <img
+          alt={name}
+          src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
+        />
+      </Flex>
 
-          <Flex
-            justify="center"
-            gap="1"
-            align="center"
-            overflow="hidden"
-            width="100%"
-            mt="1"
-          >
-            <Icon className="class-icon" />
-            <Text align="center" className="name">
-              {unwrap(tank.name!)}
-            </Text>
-          </Flex>
-
-          {discriminator && (
-            <Text
-              color="gray"
-              align="center"
-              style={{
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}
-            >
-              {discriminator}
-            </Text>
-          )}
-        </LinkI18n>
+      <Text className={styles.name} color={color} lowContrast={lowContrast}>
+        <Icon className={styles.icon} />
+        <span className={styles.text}>{name}</span>
       </Text>
+
+      {discriminator && (
+        <Text lowContrast align="center">
+          {discriminator}
+        </Text>
+      )}
+    </Flex>
+  );
+
+  if (provideLink) {
+    return (
+      <LinkI18nWrapper locale={locale} href={`/tanks/${tank.slug}`}>
+        {content}
+      </LinkI18nWrapper>
     );
-  },
-);
+  }
+
+  return content;
+};

packages/website/src/components/TankCardWrapper/index.module.css

@@ -1,7 +1,13 @@
 .wrapper {
-  /* py="4"
-      columns="repeat(auto-fill, minmax(7rem, 1fr))"
-      flow="dense"
-      gap="4"
-      gapY="8" */
+  --min-size: 12rem;
+
+  display: grid;
+  gap: var(--space-5) var(--space-4);
+  grid-template-columns: repeat(auto-fill, minmax(var(--min-size), 1fr));
+
+  &[data-compact="true"] {
+    --min-size: 7rem;
+
+    gap: var(--space-4);
+  }
 }

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

@@ -2,9 +2,16 @@ import type { ComponentProps } from "react";
 import { classNames } from "../../ui/classNames";
 import styles from "./index.module.css";
 
-export function TankCardWrapper({
-  className,
-  ...props
-}: ComponentProps<"div">) {
-  return <div className={classNames(styles.wrapper, className)} {...props} />;
+interface Props extends ComponentProps<"div"> {
+  compact?: boolean;
+}
+
+export function TankCardWrapper({ className, compact, ...props }: Props) {
+  return (
+    <div
+      className={classNames(styles.wrapper, className)}
+      data-compact={compact}
+      {...props}
+    />
+  );
 }

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

@@ -5,6 +5,7 @@ import type {
   TankopediaSortDirection,
 } from "../../../stores/tankopediaPersistent";
 import { TankSort } from "../../../stores/tankopediaSort";
+import { Button } from "../../Button";
 import { DropdownMenu } from "../../DropdownMenu";
 
 interface ItemProps {
@@ -39,9 +40,11 @@ export function Sort() {
 
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        {strings.website.common.tank_search.sort_dropdown.label}
-        <CaretDownIcon />
+      <DropdownMenu.Trigger asChild>
+        <Button variant="surface" color="gray">
+          {strings.website.common.tank_search.sort_dropdown.label}
+          <CaretDownIcon />
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content align="end">

packages/website/src/components/TankSearch/index.module.css

@@ -1,11 +1,9 @@
 .container {
-  display: flex;
-  flex-direction: column;
+  flex: 1;
 
-  gap: var(--space-2);
-  flex-grow: 1;
+  .label {
+    margin: var(--space-4) 0;
 
-  .tanks {
     /* mt="2" gap="1" align="center" justify="center" direction="column" */
 
     .count {

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

@@ -9,7 +9,7 @@ import {
 import { literals } from "@blitzkit/i18n/src/literals";
 import fuzzysort from "fuzzysort";
 import { times, uniq } from "lodash-es";
-import { memo, useEffect, useMemo, useState, type ComponentProps } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import usePromise from "react-promise-suspense";
 import { awaitableTankNames } from "../../core/awaitables/tankNames";
 import { api } from "../../core/blitzkit/api";
@@ -24,24 +24,24 @@ import { TankSort } from "../../stores/tankopediaSort";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
+import { Flex } from "../Flex";
 import { Link } from "../Link";
 import { RecentlyViewedTanks } from "../RecentlyViewedTanks";
 import { TankCardSkeleton } from "../TankCardSkeleton";
 import { TankCardWrapper } from "../TankCardWrapper";
 import { TankSearchBar } from "../TankSearchBar";
 import { TankSearchFilters } from "../TankSearchFilters";
+import { TankSearchNoResults } from "../TankSearchNoResults";
 import { Text } from "../Text";
 import { TankSearchCard } from "./components/Card";
-import { NoResults } from "./components/NoResults";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 import styles from "./index.module.css";
 
-export type TankSearchProps = MaybeSkeletonComponentProps &
-  ComponentProps<"div"> & {
-    compact?: boolean;
-    onSelect?: (tank: TankDefinition) => void;
-    onSelectAll?: (tanks: TankDefinition[]) => void;
-  };
+export type TankSearchProps = MaybeSkeletonComponentProps & {
+  compact?: boolean;
+  onSelect?: (tank: TankDefinition) => void;
+  onSelectAll?: (tanks: TankDefinition[]) => void;
+};
 
 const PREVIEW_COUNT = 20;
 const DEFAULT_LOADED_CARDS = 64;
@@ -55,7 +55,7 @@ const [gameDefinitions, modelDefinitions, tankDefinitions, tankNames] =
   ]);
 
 export const TankSearch = memo<TankSearchProps>(
-  ({ compact, onSelect, onSelectAll, skeleton, ...props }) => {
+  ({ compact, onSelect, onSelectAll, skeleton }) => {
     const { strings, locale } = useLocale();
     const wargaming = App.use((state) => state.logins.wargaming);
     const awaitedTanksDefinitionsArray = Object.values(tankDefinitions.tanks);
@@ -73,9 +73,7 @@ export const TankSearch = memo<TankSearchProps>(
         } else {
           return Promise.resolve(
             fuzzysort
-              .go(tankFilters.search, tankNames, {
-                keys: SEARCH_KEYS,
-              })
+              .go(tankFilters.search, tankNames, { keys: SEARCH_KEYS })
               .map((result) => tankDefinitions.tanks[result.obj.id]),
           );
         }
@@ -430,63 +428,65 @@ export const TankSearch = memo<TankSearchProps>(
     }, [tankFilters, tankopediaSort]);
 
     return (
-      <div className={styles.container} {...props}>
+      <Flex className={styles.container} column gap="4">
         <TankSearchBar
           skeleton={skeleton}
           topResult={tanks?.[0]}
           onSelect={onSelect}
         />
 
-        {!tankFilters.search && !tankFilters.searching && <TankSearchFilters />}
+        {!tankFilters.search && <TankSearchFilters />}
 
         {!skeleton && !compact && <RecentlyViewedTanks />}
 
-        <div className={styles.tanks}>
-          <div className={styles.count}>
-            <Text lowContrast>
-              {sorted.length === 1
-                ? strings.website.common.tank_search.count_singular
-                : literals(strings.website.common.tank_search.count_plural, {
-                    count: sorted.length.toLocaleString(locale),
-                  })}
-            </Text>
+        {tanks.length > 0 && (
+          <Flex justify="center" className={styles.label}>
+            <div className={styles.count}>
+              <Text lowContrast>
+                {sorted.length === 1
+                  ? strings.website.common.tank_search.count_singular
+                  : literals(strings.website.common.tank_search.count_plural, {
+                      count: sorted.length.toLocaleString(locale),
+                    })}
+              </Text>
 
-            {onSelectAll && (
-              <Link
-                underline="always"
-                href="#"
-                onClick={(event) => {
-                  event.preventDefault();
-                  onSelectAll(sorted);
-                  TankopediaPersistent.mutate((draft) => {
-                    draft.recentlyViewed = uniq([
-                      ...sorted.map(({ id }) => id),
-                      ...draft.recentlyViewed,
-                    ])
-                      .filter((id) => id in tankDefinitions.tanks)
-                      .slice(0, MAX_RECENTLY_VIEWED);
-                  });
-                }}
-              >
-                {strings.website.common.tank_search.select_all}
-              </Link>
+              {onSelectAll && (
+                <Link
+                  underline="always"
+                  href="#"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    onSelectAll(sorted);
+                    TankopediaPersistent.mutate((draft) => {
+                      draft.recentlyViewed = uniq([
+                        ...sorted.map(({ id }) => id),
+                        ...draft.recentlyViewed,
+                      ])
+                        .filter((id) => id in tankDefinitions.tanks)
+                        .slice(0, MAX_RECENTLY_VIEWED);
+                    });
+                  }}
+                >
+                  {strings.website.common.tank_search.select_all}
+                </Link>
+              )}
+            </div>
+
+            {tankopediaSort.by !== "meta.none" && (
+              <Text color="gray">
+                {literals(strings.website.common.tank_search.sorting_by, {
+                  name: strings.website.common.tank_search.sort[
+                    tankopediaSort.by
+                  ],
+                })}
+                {SORT_UNITS[tankopediaSort.by] === undefined
+                  ? ""
+                  : ` (${SORT_UNITS[tankopediaSort.by]})`}
+                , {tankopediaSort.direction}
+              </Text>
             )}
-          </div>
-
-          {tankopediaSort.by !== "meta.none" && (
-            <Text color="gray">
-              {literals(strings.website.common.tank_search.sorting_by, {
-                name: strings.website.common.tank_search.sort[
-                  tankopediaSort.by
-                ],
-              })}
-              {SORT_UNITS[tankopediaSort.by] === undefined
-                ? ""
-                : ` (${SORT_UNITS[tankopediaSort.by]})`}
-              , {tankopediaSort.direction}
-            </Text>
-          )}
-        </div>
+          </Flex>
+        )}
 
         {tankFilters.showTesting && !tankFilters.showNonTesting && (
           <div className={styles["test-warning"]}>
@@ -497,7 +497,7 @@ export const TankSearch = memo<TankSearchProps>(
           </div>
         )}
 
-        {!skeleton && !tankFilters.searching && (
+        {!skeleton && (
           <>
             {tanks.length > 0 && (
               <TankCardWrapper>
@@ -527,23 +527,10 @@ export const TankSearch = memo<TankSearchProps>(
               </TankCardWrapper>
             )}
 
-            {tanks.length === 0 && <NoResults type="search" />}
+            {tanks.length === 0 && <TankSearchNoResults type="search" />}
           </>
         )}
-
-        {(skeleton || tankFilters.searching) && (
-          <TankCardWrapper>
-            {times(
-              Math.round(
-                skeleton ? DEFAULT_LOADED_CARDS : 10 + 10 * Math.random(),
-              ),
-              (index) => (
-                <TankCardSkeleton key={index} />
-              ),
-            )}
-          </TankCardWrapper>
-        )}
-      </div>
+      </Flex>
     );
   },
 );

packages/website/src/components/TankSearchBar/index.module.css

@@ -1,7 +0,0 @@
-.search-bar {
-  /*  justify="center" */
-
-  .wrapper {
-    /* gap="2" flexGrow="1" */
-  }
-}

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

@@ -1,14 +1,12 @@
 import type { TankDefinition } from "@blitzkit/core";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { debounce } from "lodash-es";
 import { type KeyboardEventHandler, useCallback, useRef } from "react";
 import { useLocale } from "../../hooks/useLocale";
 import { TankFilters } from "../../stores/tankFilters";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
-import { Spinner } from "../Spinner";
+import { Flex } from "../Flex";
 import { Sort } from "../TankSearch/components/Sort";
 import { TextField } from "../TextField";
-import styles from "./index.module.css";
 
 type SearchBarProps = MaybeSkeletonComponentProps & {
   topResult?: TankDefinition;
@@ -22,36 +20,19 @@ export function TankSearchBar({
 }: SearchBarProps) {
   const { strings } = useLocale();
   const search = TankFilters.use((state) => state.search);
-  const searching = TankFilters.use((state) => state.searching);
   const input = useRef<HTMLInputElement>(null);
-  const performSearch = useCallback(
-    debounce(() => {
-      TankFilters.mutate((draft) => {
-        draft.searching = false;
-      });
-
-      if (!input.current) return;
-
-      const sanitized = input.current.value.trim();
-
-      TankFilters.mutate((draft) => {
-        draft.search = sanitized.length === 0 ? null : sanitized;
-      });
-    }, 500),
-    [],
-  );
   const handleChange = useCallback(() => {
-    if (!searching) {
-      TankFilters.mutate((draft) => {
-        draft.searching = true;
-      });
-    }
+    if (!input.current) return;
 
-    performSearch();
-  }, [searching]);
+    const sanitized = input.current.value.trim();
+
+    TankFilters.mutate((draft) => {
+      draft.search = sanitized.length === 0 ? null : sanitized;
+    });
+  }, []);
   const handleKeyDown = useCallback<KeyboardEventHandler>(
     (event) => {
-      if (event.key !== "Enter" || !topResult || searching) return;
+      if (event.key !== "Enter" || !topResult) return;
 
       event.preventDefault();
 
@@ -65,22 +46,20 @@ export function TankSearchBar({
   );
 
   return (
-    <div className={styles["search-bar"]}>
-      <div className={styles.wrapper}>
-        <TextField
-          disabled={skeleton}
-          defaultValue={search ?? undefined}
-          style={{ flex: 1 }}
-          ref={input}
-          placeholder={strings.website.common.tank_search.search_bar_hint}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-        >
-          {searching ? <Spinner /> : <MagnifyingGlassIcon />}
-        </TextField>
+    <Flex gap="3">
+      <TextField
+        disabled={skeleton}
+        defaultValue={search ?? undefined}
+        style={{ flex: 1 }}
+        ref={input}
+        placeholder={strings.website.common.tank_search.search_bar_hint}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+      >
+        <MagnifyingGlassIcon />
+      </TextField>
 
-        <Sort />
-      </div>
-    </div>
+      <Sort />
+    </Flex>
   );
 }

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

@@ -21,6 +21,7 @@ import { api } from "../../core/blitzkit/api";
 import { useLocale } from "../../hooks/useLocale";
 import { App } from "../../stores/app";
 import { TankFilters, type CaseType } from "../../stores/tankFilters";
+import { Button } from "../Button";
 import { classIcons } from "../ClassIcon";
 import { DropdownMenu } from "../DropdownMenu";
 import { Flex } from "../Flex";
@@ -173,7 +174,7 @@ const TIERS = times(10, (i) => 10 - i);
 
 export function TankSearchFilters() {
   return (
-    <div className={styles.container}>
+    <Flex gap="3" wrap>
       <TiersFilter />
       <ClassFilter />
       <TypeFilter />
@@ -189,7 +190,7 @@ export function TankSearchFilters() {
       <GameModeAbilitiesFilter />
 
       <ResetButton />
-    </div>
+    </Flex>
   );
 }
 
@@ -214,22 +215,24 @@ function TiersFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex gap="1">
-          {tiers.slice(0, MAX_ICONS).map((tier) => (
-            <Text size="minor" key={tier}>
-              {TIER_ROMAN_NUMERALS[tier]}
-            </Text>
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex gap="1">
+            {tiers.slice(0, MAX_ICONS).map((tier) => (
+              <Text size="minor" key={tier}>
+                {TIER_ROMAN_NUMERALS[tier]}
+              </Text>
+            ))}
 
-          {tiers.length > MAX_ICONS && (
-            <Text size="minor">
-              {literals(strings.common.units.plus, {
-                value: tiers.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {tiers.length > MAX_ICONS && (
+              <Text size="minor">
+                {literals(strings.common.units.plus, {
+                  value: tiers.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -287,21 +290,23 @@ function NationsFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {nations.map((nation, index) => (
-            <img
-              key={nation}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-              }}
-              src={alias("api", `/flags/circle/${nation}.webp`)}
-            />
-          ))}
-        </Flex>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {nations.map((nation, index) => (
+              <img
+                key={nation}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                }}
+                src={alias("api", `/flags/circle/${nation}.webp`)}
+              />
+            ))}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -369,25 +374,27 @@ function ClassFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {classes.map((tankClass, index) => {
-            const Icon = classIcons[tankClass];
-            return (
-              <Icon
-                key={tankClass}
-                style={{
-                  color: "var(--gray-12)",
-                  opacity: 1,
-                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                  marginLeft: index > 0 ? "-0.5em" : undefined,
-                  width: "1.25em",
-                  height: "1.25em",
-                }}
-              />
-            );
-          })}
-        </Flex>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {classes.map((tankClass, index) => {
+              const Icon = classIcons[tankClass];
+              return (
+                <Icon
+                  key={tankClass}
+                  style={{
+                    color: "var(--gray-12)",
+                    opacity: 1,
+                    filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                    marginLeft: index > 0 ? "-0.5em" : undefined,
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -447,25 +454,27 @@ function GunTypeFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {gunTypes.map((gunType) => {
-            const Icon = GUN_TYPE_ICONS[gunType];
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {gunTypes.map((gunType) => {
+              const Icon = GUN_TYPE_ICONS[gunType];
 
-            return (
-              <Icon
-                key={gunType}
-                style={{
-                  margin: gunType === "regular" ? "0 -0.125em" : undefined,
-                  opacity: 1,
-                  color: "var(--gray-12)",
-                  width: "1.25em",
-                  height: "1.25em",
-                }}
-              />
-            );
-          })}
-        </Flex>
+              return (
+                <Icon
+                  key={gunType}
+                  style={{
+                    margin: gunType === "regular" ? "0 -0.125em" : undefined,
+                    opacity: 1,
+                    color: "var(--gray-12)",
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -523,25 +532,27 @@ function TypeFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex gap="1">
-          {types.map((tankType) => {
-            return (
-              <ResearchedIcon
-                style={{
-                  color: `var(--${TANK_TYPE_COLORS[tankType]}-${
-                    tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
-                  })`,
-                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                  opacity: 1,
-                  width: "1.25em",
-                  height: "1.25em",
-                }}
-                key={tankType}
-              />
-            );
-          })}
-        </Flex>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex gap="1">
+            {types.map((tankType) => {
+              return (
+                <ResearchedIcon
+                  style={{
+                    color: `var(--${TANK_TYPE_COLORS[tankType]}-${
+                      tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
+                    })`,
+                    filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                    opacity: 1,
+                    width: "1.25em",
+                    height: "1.25em",
+                  }}
+                  key={tankType}
+                />
+              );
+            })}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -622,21 +633,34 @@ function IndividualShellFilter({
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        {shells[index] === null && (
-          <Text color="gray" style={{ display: "contents" }}>
-            <MissingShellIcon width="1em" height="1em" />
-          </Text>
-        )}
-        {shells[index] !== null && (
-          <img
-            style={{ width: "1em", height: "1em" }}
-            src={alias(
-              "api",
-              `/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`,
-            )}
-          />
-        )}
+      <DropdownMenu.Trigger asChild>
+        <IconButton
+          size="minor"
+          variant="surface"
+          style={{
+            borderTopLeftRadius: index === 0 ? undefined : 0,
+            borderBottomLeftRadius: index === 0 ? undefined : 0,
+            borderTopRightRadius: index === 2 ? undefined : 0,
+            borderBottomRightRadius: index === 2 ? undefined : 0,
+          }}
+          color="gray"
+          highContrast
+        >
+          {shells[index] === null && (
+            <Text color="gray" style={{ display: "contents" }}>
+              <MissingShellIcon width="1em" height="1em" />
+            </Text>
+          )}
+          {shells[index] !== null && (
+            <img
+              style={{ width: "1em", height: "1em" }}
+              src={alias(
+                "api",
+                `/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`,
+              )}
+            />
+          )}
+        </IconButton>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -825,30 +849,32 @@ function ConsumablesFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
-            <img
-              key={consumable}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-                objectFit: "contain",
-              }}
-              src={alias("api", `/icons/consumables/${consumable}.webp`)}
-            />
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
+              <img
+                key={consumable}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                  objectFit: "contain",
+                }}
+                src={alias("api", `/icons/consumables/${consumable}.webp`)}
+              />
+            ))}
 
-          {consumables.length > MAX_ICONS && (
-            <Text size="minor" className={styles["overflow-plus"]}>
-              {literals(strings.common.units.plus, {
-                value: consumables.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {consumables.length > MAX_ICONS && (
+              <Text size="minor" className={styles["overflow-plus"]}>
+                {literals(strings.common.units.plus, {
+                  value: consumables.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -917,30 +943,32 @@ function ProvisionsFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {provisions.slice(0, MAX_ICONS).map((provision, index) => (
-            <img
-              key={provision}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-                objectFit: "contain",
-              }}
-              src={alias("api", `/icons/provisions/${provision}.webp`)}
-            />
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {provisions.slice(0, MAX_ICONS).map((provision, index) => (
+              <img
+                key={provision}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                  objectFit: "contain",
+                }}
+                src={alias("api", `/icons/provisions/${provision}.webp`)}
+              />
+            ))}
 
-          {provisions.length > MAX_ICONS && (
-            <Text size="minor" className={styles["overflow-plus"]}>
-              {literals(strings.common.units.plus, {
-                value: provisions.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {provisions.length > MAX_ICONS && (
+              <Text size="minor" className={styles["overflow-plus"]}>
+                {literals(strings.common.units.plus, {
+                  value: provisions.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -1024,30 +1052,32 @@ function GameModeAbilitiesFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
-        <Flex>
-          {icons.slice(0, MAX_ICONS).map((icon, index) => (
-            <img
-              key={icon}
-              style={{
-                filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
-                marginLeft: index > 0 ? "-0.5em" : undefined,
-                width: "1.25em",
-                height: "1.25em",
-                objectFit: "contain",
-              }}
-              src={icon}
-            />
-          ))}
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
+          <Flex>
+            {icons.slice(0, MAX_ICONS).map((icon, index) => (
+              <img
+                key={icon}
+                style={{
+                  filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
+                  marginLeft: index > 0 ? "-0.5em" : undefined,
+                  width: "1.25em",
+                  height: "1.25em",
+                  objectFit: "contain",
+                }}
+                src={icon}
+              />
+            ))}
 
-          {icons.length > MAX_ICONS && (
-            <Text size="minor" className={styles["overflow-plus"]}>
-              {literals(strings.common.units.plus, {
-                value: icons.length - MAX_ICONS,
-              })}
-            </Text>
-          )}
-        </Flex>
+            {icons.length > MAX_ICONS && (
+              <Text size="minor" className={styles["overflow-plus"]}>
+                {literals(strings.common.units.plus, {
+                  value: icons.length - MAX_ICONS,
+                })}
+              </Text>
+            )}
+          </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>

packages/website/src/components/TankSearchNoResults/index.module.css

@@ -0,0 +1,3 @@
+.no-results {
+  flex: 1;
+}

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

@@ -1,19 +1,22 @@
-import { useLocale } from "../../../hooks/useLocale";
-import { TankFilters } from "../../../stores/tankFilters";
+import { useLocale } from "../../hooks/useLocale";
+import { TankFilters } from "../../stores/tankFilters";
+import { Flex } from "../Flex";
+import { Link } from "../Link";
+import { Text } from "../Text";
+import styles from "./index.module.css";
 
 interface NoResultsProps {
   type?: "filters" | "search";
 }
 
-export function NoResults({ type = "filters" }: NoResultsProps) {
+export function TankSearchNoResults({ type = "filters" }: NoResultsProps) {
   const { strings } = useLocale();
 
   return (
-    <Flex flexGrow="1" align="center" justify="center">
-      <Text color="gray">
+    <Flex className={styles["no-results"]} align="center" justify="center">
+      <Text lowContrast>
         {strings.website.common.tank_search.no_tanks_found.body}{" "}
         <Link
-          href="#"
           underline="always"
           color="red"
           onClick={() => {

packages/website/src/components/ToolBanner.astro

@@ -1,7 +1,11 @@
 ---
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
 import type { Tool } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Back } from "./Back";
+import { Flex } from "./Flex";
 import { Heading } from "./Heading";
+import { IconButton } from "./IconButton";
 
 interface Props {
   locale: string;
@@ -16,6 +20,8 @@ const toolStrings =
 
 <style>
   .tool-banner {
+    --tool-banner-overlap: 8rem;
+
     background-size: cover;
 
     .content {
@@ -40,11 +46,18 @@ const toolStrings =
       }
 
       .centered {
+        position: relative;
+
         flex: 1;
         max-width: var(--page-width);
 
         display: flex;
         flex-direction: column;
+
+        .return {
+          width: 0.75em;
+          height: 0.75em;
+        }
       }
 
       .pattern {
@@ -87,7 +100,15 @@ const toolStrings =
 
     <div class="centered">
       <Heading weight="bold" size="2">
-        {toolStrings.name}
+        <Flex align="center" gap="4">
+          <Back client:load>
+            <IconButton variant="soft" color="gray" highContrast>
+              <ArrowLeftIcon className="return" />
+            </IconButton>
+          </Back>
+
+          {toolStrings.name}
+        </Flex>
       </Heading>
     </div>
   </div>

packages/website/src/components/ToolCard.astro

@@ -77,7 +77,7 @@ const toolStrings =
 </style>
 
 <div
-  style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
+  style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
   class="container"
 >
   <LinkI18n
@@ -89,7 +89,7 @@ const toolStrings =
   >
     <div
       class="background"
-      style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
+      style={{ backgroundImage: `url(/media/tools/banners/${tool.id}.webp)` }}
     >
     </div>
 

packages/website/src/layouts/BaseLayout.astro

@@ -50,7 +50,7 @@ const { accent, locale } = Astro.props;
 
           background-color: var(--gray-1);
 
-          padding: var(--space-5);
+          padding: var(--space-4);
           gap: var(--space-6);
         }
       }

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro

@@ -1,4 +1,5 @@
 ---
+import ColorScale from "../../../../components/ColorScale.astro";
 import { Section } from "../../../../components/Section";
 import ToolBanner from "../../../../components/ToolBanner.astro";
 import { tools } from "../../../../constants/tools";
@@ -11,6 +12,9 @@ const { locale } = Astro.props;
 ---
 
 <BaseLayout {locale} accent="purple">
+  <ColorScale color="blue" />
+  <ColorScale color="amber" />
+
   <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
 
   <Section>

packages/website/src/stores/tankFilters.ts

@@ -18,7 +18,6 @@ export interface TankFilters {
   classes: TankClass[];
   types: TankType[];
   search: string | null;
-  searching: boolean;
   gunType: CaseType<GunDefinition>[];
   shells: [ShellType | null, ShellType | null, ShellType | null];
   consumables: number[];
@@ -38,7 +37,6 @@ export const TankFilters = new Varuna<TankFilters>({
   classes: [],
   types: [],
   search: null,
-  searching: false,
   gunType: [],
   shells: [null, null, null],
   consumables: [],

packages/website/src/ui/compose.tsx

@@ -27,7 +27,7 @@ export function composeRadixComponents<
 
     mapped[key] = composeRadixComponent(
       components[key] as FC,
-      styles[key],
+      `radix__${styles[key]}`,
     ) as Components[Extract<keyof Components, string>];
   }