tank search ui rebuilt... somewhat

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.75em;
   color: var(--gray-1);
   font-weight: var(--weight-medium);
 
   cursor: pointer;
 
   &[data-size="minor"] {
-    font-size: 0.75rem;
+    font-size: 0.75em;
+    padding: var(--space-2) var(--space-3);
   }
 
   &[data-array="true"] {

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/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/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,15 @@
+.image-wrapper {
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+
+  height: 6rem;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+}

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

@@ -1,15 +1,15 @@
 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 & {
   tank: TankDefinition;
@@ -20,36 +20,33 @@ type TankCardProps = TextProps & {
 
 const tankDefinitions = await api.tankDefinitions();
 
-export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
+export const TankCard = ({
-  (
-    {
   tank,
   discriminator,
   onTankSelect: onSelect,
   noLink,
   style,
   ...props
-    }: TankCardProps,
+}: TankCardProps) => {
-    ref,
-  ) => {
   const { unwrap, locale } = useLocale();
+
   const provideLink = !noLink && onSelect === undefined;
+  const name = unwrap(tank.name!);
 
-    const Icon = classIcons[tank.class];
+  const color: TextProps["color"] =
-
-    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"
+        : "gray";
-        }
+  const lowContrast = tank.type !== TankType.TANK_TYPE_RESEARCHABLE;
-        highContrast={tank.type === TankType.TANK_TYPE_RESEARCHABLE}
+
+  const Icon = classIcons[tank.class];
+
+  const content = (
+    <Flex
+      column
+      gap="3"
       onClick={() => {
         onSelect?.(tank);
         TankopediaPersistent.mutate((draft) => {
@@ -58,62 +55,45 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
             .slice(0, MAX_RECENTLY_VIEWED);
         });
       }}
-        className="tank-search-card"
+    >
-        data-provide-link={provideLink}
+      <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!)}
+          alt={name}
           src={alias("api", `/tanks/${tank.id}/icons/big.webp`)}
-            className="image"
-            draggable={false}
         />
-
-          <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>
 
+      <Text color={color} lowContrast={lowContrast}>
+        <Flex align="center" gap="2" justify="center">
+          <Icon className={styles.icon} />
+          {name}
+        </Flex>
+      </Text>
+
       {discriminator && (
-            <Text
+        <Text lowContrast align="center">
-              color="gray"
-              align="center"
-              style={{
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}
-            >
           {discriminator}
         </Text>
       )}
-        </LinkI18n>
+    </Flex>
-      </Text>
   );
-  },
+
-);
+  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,8 @@
 .wrapper {
-  /* py="4"
+  display: grid;
-      columns="repeat(auto-fill, minmax(7rem, 1fr))"
+
-      flow="dense"
+  gap: var(--space-4);
-      gap="4"
+  row-gap: var(--space-5);
-      gapY="8" */
+
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 }

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>
+      <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,19 +1,11 @@
-.container {
+.tanks {
-  display: flex;
-  flex-direction: column;
-
-  gap: var(--space-2);
-  flex-grow: 1;
-
-  .tanks {
   /* mt="2" gap="1" align="center" justify="center" direction="column" */
 
   .count {
     /* gap="2" */
   }
-  }
+}
 
-  .test-warning {
+.test-warning {
   /* justify="center" mt="4" */
-  }
 }

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,6 +24,7 @@ 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";
@@ -36,12 +37,11 @@ import { NoResults } from "./components/NoResults";
 import { MAX_RECENTLY_VIEWED } from "./constants";
 import styles from "./index.module.css";
 
-export type TankSearchProps = MaybeSkeletonComponentProps &
+export type TankSearchProps = MaybeSkeletonComponentProps & {
-  ComponentProps<"div"> & {
   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);
@@ -430,7 +430,7 @@ export const TankSearch = memo<TankSearchProps>(
     }, [tankFilters, tankopediaSort]);
 
     return (
-      <div className={styles.container} {...props}>
+      <Flex column gap="4">
         <TankSearchBar
           skeleton={skeleton}
           topResult={tanks?.[0]}
@@ -543,7 +543,7 @@ export const TankSearch = memo<TankSearchProps>(
             )}
           </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

@@ -5,10 +5,10 @@ import { type KeyboardEventHandler, useCallback, useRef } from "react";
 import { useLocale } from "../../hooks/useLocale";
 import { TankFilters } from "../../stores/tankFilters";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
+import { Flex } from "../Flex";
 import { Spinner } from "../Spinner";
 import { Sort } from "../TankSearch/components/Sort";
 import { TextField } from "../TextField";
-import styles from "./index.module.css";
 
 type SearchBarProps = MaybeSkeletonComponentProps & {
   topResult?: TankDefinition;
@@ -65,8 +65,7 @@ export function TankSearchBar({
   );
 
   return (
-    <div className={styles["search-bar"]}>
+    <Flex gap="3">
-      <div className={styles.wrapper}>
       <TextField
         disabled={skeleton}
         defaultValue={search ?? undefined}
@@ -80,7 +79,6 @@ export function TankSearchBar({
       </TextField>
 
       <Sort />
-      </div>
+    </Flex>
-    </div>
   );
 }

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,7 +215,8 @@ function TiersFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <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}>
@@ -230,6 +232,7 @@ function TiersFilter() {
               </Text>
             )}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -287,7 +290,8 @@ function NationsFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
           <Flex>
             {nations.map((nation, index) => (
               <img
@@ -302,6 +306,7 @@ function NationsFilter() {
               />
             ))}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -369,7 +374,8 @@ function ClassFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
           <Flex>
             {classes.map((tankClass, index) => {
               const Icon = classIcons[tankClass];
@@ -388,6 +394,7 @@ function ClassFilter() {
               );
             })}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -447,7 +454,8 @@ function GunTypeFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
           <Flex>
             {gunTypes.map((gunType) => {
               const Icon = GUN_TYPE_ICONS[gunType];
@@ -466,6 +474,7 @@ function GunTypeFilter() {
               );
             })}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -523,7 +532,8 @@ function TypeFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
           <Flex gap="1">
             {types.map((tankType) => {
               return (
@@ -542,6 +552,7 @@ function TypeFilter() {
               );
             })}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -622,7 +633,19 @@ function IndividualShellFilter({
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <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" />
@@ -637,6 +660,7 @@ function IndividualShellFilter({
               )}
             />
           )}
+        </IconButton>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -825,7 +849,8 @@ function ConsumablesFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
           <Flex>
             {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
               <img
@@ -849,6 +874,7 @@ function ConsumablesFilter() {
               </Text>
             )}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -917,7 +943,8 @@ function ProvisionsFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
           <Flex>
             {provisions.slice(0, MAX_ICONS).map((provision, index) => (
               <img
@@ -941,6 +968,7 @@ function ProvisionsFilter() {
               </Text>
             )}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>
@@ -1024,7 +1052,8 @@ function GameModeAbilitiesFilter() {
 
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger>
+      <DropdownMenu.Trigger asChild>
+        <Button size="minor" color="gray" variant="surface">
           <Flex>
             {icons.slice(0, MAX_ICONS).map((icon, index) => (
               <img
@@ -1048,6 +1077,7 @@ function GameModeAbilitiesFilter() {
               </Text>
             )}
           </Flex>
+        </Button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Content>

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/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/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>];
   }