sub menus

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

@@ -1,4 +1,5 @@
-.Content {
+.Content,
+.SubContent {
   --gutter: var(--space-5);
 
   min-width: min(calc(100dvw - 2 * var(--space-4)), 16rem);
@@ -13,8 +14,7 @@
   display: flex;
   flex-direction: column;
 
-  margin-top: var(--space-3);
-  margin-right: var(--space-4);
+  margin: var(--space-4);
 
   box-shadow: var(--shadow-subtle);
   border-radius: var(--space-3);
@@ -47,7 +47,8 @@
 
   .Item,
   .CheckboxItem,
-  .RadioItem {
+  .RadioItem,
+  .SubTrigger {
     position: relative;
 
     background-color: var(--gray-3);
@@ -70,8 +71,8 @@
       background-color: var(--gray-5);
     }
 
-    & + & {
-      border-top: var(--space-1) solid var(--gray-2);
+    &:not(:last-child) {
+      border-bottom: var(--space-1) solid var(--gray-2);
     }
 
     img,

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

@@ -10,7 +10,7 @@ import { useStrings } from "../../hooks/useStrings";
 import { TankFilters } from "../../stores/tankFilters";
 import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { Flex } from "../Flex";
-import { Sort } from "../TankSearch/components/Sort";
+import { TankSearchSort } from "../TankSearchSort";
 import { TextField } from "../TextField";
 
 type SearchBarProps = MaybeSkeletonComponentProps & {
@@ -74,7 +74,7 @@ export function TankSearchBar({
         <MagnifyingGlassIcon />
       </TextField>
 
-      <Sort />
+      <TankSearchSort />
     </Flex>
   );
 }

packages/website/src/components/TankSearchSort.tsx

@@ -1,12 +1,16 @@
-import { CaretDownIcon } from "@radix-ui/react-icons";
-import { characteristicsGroups } from "../../../config/characteristicsGroups";
-import { useStrings } from "../../../hooks/useStrings";
-import { TankopediaSortDirection } from "../../../stores/tankopediaPersistent";
-import { TankSort } from "../../../stores/tankopediaSort";
-import { sortableCharacteristics } from "../../../tankopedia/sortableCharacteristics";
-import type { CharacteristicName } from "../../../types/characteristics";
-import { Button } from "../../Button";
-import { DropdownMenu } from "../../DropdownMenu";
+import {
+  CaretDownIcon,
+  CaretRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons";
+import { characteristicsGroups } from "../config/characteristicsGroups";
+import { useStrings } from "../hooks/useStrings";
+import { TankopediaSortDirection } from "../stores/tankopediaPersistent";
+import { TankSort } from "../stores/tankopediaSort";
+import { sortableCharacteristics } from "../tankopedia/sortableCharacteristics";
+import type { CharacteristicName } from "../types/characteristics";
+import { Button } from "./Button";
+import { DropdownMenu } from "./DropdownMenu";
 
 interface ItemProps {
   by: CharacteristicName;
@@ -25,12 +29,16 @@ function Item({ by }: ItemProps) {
         });
       }}
     >
+      <DropdownMenu.ItemIndicator>
+        <DotFilledIcon />
+      </DropdownMenu.ItemIndicator>
+
       {strings.tanks.characteristics.items[by]}
     </DropdownMenu.CheckboxItem>
   );
 }
 
-export function Sort() {
+export function TankSearchSort() {
   const by = TankSort.use((state) => state.by);
   const direction = TankSort.use((state) => state.direction);
   const strings = useStrings();
@@ -46,7 +54,7 @@ export function Sort() {
 
       <DropdownMenu.Content align="end">
         <DropdownMenu.Label>
-          {strings.website.common.tank_search.sort.direction.label}
+          {strings.website.common.tank_search.sort.by}
         </DropdownMenu.Label>
 
         <DropdownMenu.CheckboxItem
@@ -57,6 +65,10 @@ export function Sort() {
             });
           }}
         >
+          <DropdownMenu.ItemIndicator>
+            <DotFilledIcon />
+          </DropdownMenu.ItemIndicator>
+
           {strings.website.common.tank_search.sort.none}
         </DropdownMenu.CheckboxItem>
 
@@ -76,6 +88,8 @@ export function Sort() {
                     >
                   )[group.name]
                 }
+
+                <CaretRightIcon />
               </DropdownMenu.SubTrigger>
 
               <DropdownMenu.SubContent>
@@ -93,8 +107,10 @@ export function Sort() {
           {strings.website.common.tank_search.sort.direction.label}
         </DropdownMenu.Label>
         <DropdownMenu.RadioGroup
-          value={direction}
-          onValueChange={(value) => {
+          value={`${direction}`}
+          onValueChange={(_value) => {
+            const value = Number(_value);
+
             if (
               value !== TankopediaSortDirection.Ascending &&
               value !== TankopediaSortDirection.Descending
@@ -107,10 +123,22 @@ export function Sort() {
             });
           }}
         >
-          <DropdownMenu.RadioItem value={TankopediaSortDirection.Ascending}>
+          <DropdownMenu.RadioItem
+            value={`${TankopediaSortDirection.Ascending}`}
+          >
+            <DropdownMenu.ItemIndicator>
+              <DotFilledIcon />
+            </DropdownMenu.ItemIndicator>
+
             {strings.website.common.tank_search.sort.direction.ascending}
           </DropdownMenu.RadioItem>
-          <DropdownMenu.RadioItem value={TankopediaSortDirection.Descending}>
+          <DropdownMenu.RadioItem
+            value={`${TankopediaSortDirection.Descending}`}
+          >
+            <DropdownMenu.ItemIndicator>
+              <DotFilledIcon />
+            </DropdownMenu.ItemIndicator>
+
             {strings.website.common.tank_search.sort.direction.descending}
           </DropdownMenu.RadioItem>
         </DropdownMenu.RadioGroup>