compiling search

packages/website/src/components/Compare/CompareTable.tsx

@@ -18,6 +18,7 @@ import { useLocale } from "../../hooks/useLocale";
 import { CompareEphemeral } from "../../stores/compareEphemeral";
 import type { EquipmentMatrix } from "../../stores/duel";
 import { BlitzkitButtonGrayIcon } from "../BlitzkitButtonGrayIcon";
+import { CompareTankCard } from "../CompareTankCard";
 import { ConsumablesManager } from "../ConsumablesManager";
 import { CrewSkillManager } from "../CrewSkillManager";
 import { EquipmentManager } from "../EquipmentManager";
@@ -27,7 +28,6 @@ import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
 import { StickyTableRoot } from "../StickyTableRoot";
 import { Body } from "./Body";
 import { InsertionMarker } from "./IntersectionMarker";
-import { TankCard } from "./TankCard";
 
 interface CompareTableProps {
   stats: TankCharacteristics[];
@@ -77,7 +77,7 @@ export function CompareTable({ stats }: CompareTableProps) {
           </StickyColumnHeaderCell>
 
           {members.map(({ tank, key }, index) => {
-            return <TankCard index={index} key={key} tank={tank} />;
+            return <CompareTankCard index={index} key={key} tank={tank} />;
           })}
         </Table.Row>
       </Table.Header>

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

@@ -0,0 +1,3 @@
+.name {
+  max-width: 8rem;
+}

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

@@ -1,20 +1,22 @@
 import { type TankDefinition, tankIcon } from "@blitzkit/core";
-import { Flex, Text } from "@radix-ui/themes";
 import { useEffect, useRef } from "react";
 import { Vector2 } from "three";
 import { useLocale } from "../../hooks/useLocale";
 import { CompareEphemeral } from "../../stores/compareEphemeral";
+import { InsertionMarker } from "../Compare/IntersectionMarker";
+import { insertionMarkers } from "../Compare/IntersectionMarker/constants";
+import { TankControl } from "../Compare/TankControl";
+import { Flex } from "../Flex";
 import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
-import { InsertionMarker } from "./IntersectionMarker";
-import { insertionMarkers } from "./IntersectionMarker/constants";
-import { TankControl } from "./TankControl";
+import { Text } from "../Text";
+import styles from "./index.module.css";
 
 interface TankCardProps {
   index: number;
   tank: TankDefinition;
 }
 
-export function TankCard({ index, tank }: TankCardProps) {
+export function CompareTankCard({ index, tank }: TankCardProps) {
   const draggable = useRef<HTMLDivElement>(null);
   const { unwrap } = useLocale();
 
@@ -103,12 +105,12 @@ export function TankCard({ index, tank }: TankCardProps) {
 
   return (
     <StickyColumnHeaderCell width="0">
-      <Flex direction="column" align="center" justify="between" gap="2">
+      <Flex column align="center" justify="between" gap="2">
         <TankControl index={index} key={tank.id} slug={tank.slug} />
 
         <Flex
           ref={draggable}
-          direction="column"
+          column
           align="center"
           justify="between"
           gap="2"
@@ -129,14 +131,7 @@ export function TankCard({ index, tank }: TankCardProps) {
             }}
           />
 
-          <Text
-            style={{
-              whiteSpace: "nowrap",
-              maxWidth: 128,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
-          >
+          <Text className={styles.name} nowrap overflow="ellipsis">
             {unwrap(tank.name!)}
           </Text>
         </Flex>

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

@@ -0,0 +1,3 @@
+.recent {
+  /* mt="2" mb="6" */
+}

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

@@ -1,16 +1,20 @@
 import { isEqual } from "lodash-es";
 import { useMemo } from "react";
-import { api } from "../../../core/blitzkit/api";
-import { useLocale } from "../../../hooks/useLocale";
-import { TankFilters } from "../../../stores/tankFilters";
-import { TankopediaPersistent } from "../../../stores/tankopediaPersistent";
-import { TankSort } from "../../../stores/tankopediaSort";
-import { TankCard } from "../../TankCard";
-import { TankCardWrapper } from "../../TankCardWrapper";
+import { api } from "../../core/blitzkit/api";
+import { useLocale } from "../../hooks/useLocale";
+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";
+import styles from "./index.module.css";
 
 const tankDefinitions = await api.tankDefinitions();
 
-export function RecentlyViewed() {
+export function RecentlyViewedTanks() {
   const filters = TankFilters.use();
   // non-reactive because it is a little weird that it updates instantly even before the page loads
   const recentlyViewed = TankopediaPersistent.state.recentlyViewed.filter(
@@ -34,7 +38,7 @@ export function RecentlyViewed() {
   }
 
   return (
-    <Flex direction="column" gap="2" mt="2" mb="6">
+    <Flex column gap="2" className={styles.recent}>
       <Text color="gray" align="center">
         {strings.website.common.tank_search.recent}
       </Text>
@@ -44,7 +48,7 @@ export function RecentlyViewed() {
         ))}
       </TankCardWrapper>
 
-      <Separator size="4" />
+      <Separator />
     </Flex>
   );
 }

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

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

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

@@ -0,0 +1,5 @@
+import styles from "./index.module.css";
+
+export function Separator() {
+  return <div className={styles.separator} />;
+}

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

@@ -5,8 +5,10 @@ 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 { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
+import { Text, type TextProps } from "../Text";
 import "./index.css";
 
 type TankCardProps = TextProps & {

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

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

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

@@ -25,14 +25,14 @@ import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonCompo
 import { Callout } from "../Callout";
 import { ExperimentIcon } from "../ExperimentIcon";
 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 { Text } from "../Text";
 import { TankSearchCard } from "./components/Card";
 import { NoResults } from "./components/NoResults";
-import { RecentlyViewed } from "./components/RecentlyViewed";
-import { TankCardSkeleton } from "../TankCardSkeleton";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 import styles from "./index.module.css";
 
@@ -439,7 +439,7 @@ export const TankSearch = memo<TankSearchProps>(
 
         {!tankFilters.search && !tankFilters.searching && <TankSearchFilters />}
 
-        {!skeleton && !compact && <RecentlyViewed />}
+        {!skeleton && !compact && <RecentlyViewedTanks />}
 
         <div className={styles.tanks}>
           <div className={styles.count}>

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

@@ -21,7 +21,6 @@ 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";
@@ -216,23 +215,21 @@ function TiersFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button color="gray" variant="surface">
-          <Flex gap="1">
-            {tiers.slice(0, MAX_ICONS).map((tier) => (
-              <Text size="minor" key={tier}>
-                {TIER_ROMAN_NUMERALS[tier]}
-              </Text>
-            ))}
+        <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>
-        </Button>
+          {tiers.length > MAX_ICONS && (
+            <Text size="minor">
+              {literals(strings.common.units.plus, {
+                value: tiers.length - MAX_ICONS,
+              })}
+            </Text>
+          )}
+        </Flex>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -291,22 +288,20 @@ function NationsFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button 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>
+        <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>
 
       <DropdownMenu.Content>
@@ -375,26 +370,24 @@ function ClassFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button 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>
+        <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>
 
       <DropdownMenu.Content>
@@ -455,26 +448,24 @@ function GunTypeFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button color="gray" variant="surface">
-          <Flex>
-            {gunTypes.map((gunType) => {
-              const Icon = GUN_TYPE_ICONS[gunType];
+        <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>
-        </Button>
+            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>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -533,26 +524,24 @@ function TypeFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button 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>
+        <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>
 
       <DropdownMenu.Content>
@@ -634,32 +623,20 @@ function IndividualShellFilter({
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <IconButton
-          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>
+        {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>
 
       <DropdownMenu.Content>
@@ -849,31 +826,29 @@ function ConsumablesFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button 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`)}
-              />
-            ))}
+        <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>
-        </Button>
+          {consumables.length > MAX_ICONS && (
+            <Text size="minor" className={styles["overflow-plus"]}>
+              {literals(strings.common.units.plus, {
+                value: consumables.length - MAX_ICONS,
+              })}
+            </Text>
+          )}
+        </Flex>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -943,31 +918,29 @@ function ProvisionsFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button 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`)}
-              />
-            ))}
+        <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>
-        </Button>
+          {provisions.length > MAX_ICONS && (
+            <Text size="minor" className={styles["overflow-plus"]}>
+              {literals(strings.common.units.plus, {
+                value: provisions.length - MAX_ICONS,
+              })}
+            </Text>
+          )}
+        </Flex>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -1052,31 +1025,29 @@ function GameModeAbilitiesFilter() {
   return (
     <DropdownMenu.Root modal={false}>
       <DropdownMenu.Trigger>
-        <Button 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}
-              />
-            ))}
+        <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>
-        </Button>
+          {icons.length > MAX_ICONS && (
+            <Text size="minor" className={styles["overflow-plus"]}>
+              {literals(strings.common.units.plus, {
+                value: icons.length - MAX_ICONS,
+              })}
+            </Text>
+          )}
+        </Flex>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>

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

@@ -1,4 +1,5 @@
 ---
+import { Section } from "../../../../components/Section";
 import ToolBanner from "../../../../components/ToolBanner.astro";
 import { tools } from "../../../../constants/tools";
 import BaseLayout from "../../../../layouts/BaseLayout.astro";
@@ -12,7 +13,9 @@ const { locale } = Astro.props;
 <BaseLayout {locale} accent="purple">
   <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
 
-  <Page {locale} client:only="react">
-    <Page {locale} skeleton slot="fallback" />
-  </Page>
+  <Section>
+    <Page {locale} client:only="react">
+      <Page {locale} skeleton slot="fallback" />
+    </Page>
+  </Section>
 </BaseLayout>