feat: simpler filter ui

src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx

@@ -26,25 +26,7 @@ export function Options() {
   const filters = useTankopediaPersistent((state) => state.filters);
 
   return (
-    <Flex justify="center" direction="column" gap="2">
+    <Flex gap="2" wrap="wrap" justify="center">
-      <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
-        <Button
-          color="red"
-          onClick={() =>
-            useTankopediaPersistent.setState({
-              filters: {
-                nations: [],
-                tiers: [],
-                treeTypes: [],
-                types: [],
-                test: 'include',
-                page: 0,
-              },
-            })
-          }
-        >
-          Reset
-        </Button>
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <Button variant="soft" color="gray">
@@ -71,7 +53,7 @@ export function Options() {
           </DropdownMenu.RadioGroup>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
-        <Flex style={{ flex: 1 }}>
+      <Flex>
         {TREE_TYPES.map((type, index) => (
           <Button
             key={type}
@@ -106,7 +88,7 @@ export function Options() {
           </Button>
         ))}
       </Flex>
-        <Flex style={{ flex: 1 }}>
+      <Flex>
         {[...TANK_TYPES].map((type, index) => (
           <Button
             key={type}
@@ -267,8 +249,7 @@ export function Options() {
                 borderTopRightRadius:
                   index === nations.length - 1 ? undefined : 0,
                 borderBottomRightRadius:
-                    index ===
+                  index === nations.length - Math.round(nations.length / 2) - 1
-                    nations.length - Math.round(nations.length / 2) - 1
                     ? 16
                     : 0,
               }}
@@ -289,42 +270,7 @@ export function Options() {
           ))}
         </Flex>
       </Flex>
-      </Flex>
+      <Flex className={styles.oneLineFilters}>
-
-      <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
-        <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
-          {[...TIERS].map((tier, index) => (
-            <Button
-              key={tier}
-              color={filters.tiers.includes(tier) ? undefined : 'gray'}
-              variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
-              style={{
-                flex: 1,
-                margin: -0.5,
-                borderTopLeftRadius: index === 0 ? undefined : 0,
-                borderBottomLeftRadius: index === 0 ? undefined : 0,
-                borderTopRightRadius:
-                  index === TIERS.length - 1 ? undefined : 0,
-                borderBottomRightRadius:
-                  index === TIERS.length - 1 ? undefined : 0,
-              }}
-              onClick={() =>
-                mutateTankopediaPersistent((draft) => {
-                  if (draft.filters.tiers.includes(tier)) {
-                    draft.filters.tiers = draft.filters.tiers.filter(
-                      (preexistingTier) => preexistingTier !== tier,
-                    );
-                  } else {
-                    draft.filters.tiers.push(tier);
-                  }
-                })
-              }
-            >
-              {TIER_ROMAN_NUMERALS[tier]}
-            </Button>
-          ))}
-        </Flex>
-        <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
         {nations.map((nation, index) => (
           <Button
             key={nation}
@@ -356,6 +302,36 @@ export function Options() {
           </Button>
         ))}
       </Flex>
+      <Flex className={styles.oneLineFilters}>
+        {[...TIERS].map((tier, index) => (
+          <Button
+            key={tier}
+            color={filters.tiers.includes(tier) ? undefined : 'gray'}
+            variant={filters.tiers.includes(tier) ? 'surface' : 'soft'}
+            style={{
+              flex: 1,
+              margin: -0.5,
+              borderTopLeftRadius: index === 0 ? undefined : 0,
+              borderBottomLeftRadius: index === 0 ? undefined : 0,
+              borderTopRightRadius: index === TIERS.length - 1 ? undefined : 0,
+              borderBottomRightRadius:
+                index === TIERS.length - 1 ? undefined : 0,
+            }}
+            onClick={() =>
+              mutateTankopediaPersistent((draft) => {
+                if (draft.filters.tiers.includes(tier)) {
+                  draft.filters.tiers = draft.filters.tiers.filter(
+                    (preexistingTier) => preexistingTier !== tier,
+                  );
+                } else {
+                  draft.filters.tiers.push(tier);
+                }
+              })
+            }
+          >
+            {TIER_ROMAN_NUMERALS[tier]}
+          </Button>
+        ))}
       </Flex>
     </Flex>
   );

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -1,5 +1,9 @@
 import { slateDark } from '@radix-ui/colors';
-import { CaretDownIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import {
+  CaretDownIcon,
+  MagnifyingGlassIcon,
+  TrashIcon,
+} from '@radix-ui/react-icons';
 import {
   Button,
   Card,
@@ -10,7 +14,7 @@ import {
   TextField,
 } from '@radix-ui/themes';
 import { go } from 'fuzzysort';
-import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react';
+import { use, useEffect, useMemo, useRef, useState } from 'react';
 import { TankType, TreeType } from '../../../../../components/Tanks';
 import { asset } from '../../../../../core/blitzkrieg/asset';
 import {
@@ -202,13 +206,28 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
               </DropdownMenu.RadioGroup>
             </DropdownMenu.Content>
           </DropdownMenu.Root>
+
+          <Button
+            color="red"
+            variant="soft"
+            onClick={() =>
+              useTankopediaPersistent.setState({
+                filters: {
+                  nations: [],
+                  tiers: [],
+                  treeTypes: [],
+                  types: [],
+                  test: 'include',
+                  page: 0,
+                },
+              })
+            }
+          >
+            <TrashIcon />
+          </Button>
         </Flex>
 
-        <Card variant={compact ? 'ghost' : 'surface'}>
-          <Suspense fallback={<Text>Loading...</Text>}>
         <Options />
-          </Suspense>
-        </Card>
       </Flex>
 
       {!compact && (

src/app/tools/tankopedia/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
   const router = useRouter();
 
   return (
-    <PageWrapper size="wide" color="purple">
+    <PageWrapper size="double" color="purple">
       <TankSearch
         onSelect={(tank) => {
           router.push(`./tankopedia/${tank.id}`);