feat: even cleaner filters

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

@@ -27,7 +27,8 @@ export function Options() {
   const tankopediaState = useTankopedia();
 
   return (
-    <Flex justify="center" wrap="wrap" gap="2">
+    <Flex justify="center" direction="column" gap="2">
+      <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
         <Button
           color="red"
           onClick={() =>
@@ -44,7 +45,6 @@ export function Options() {
         >
           Clear
         </Button>
-
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
             <Button variant="soft">
@@ -71,7 +71,6 @@ export function Options() {
             </DropdownMenu.RadioGroup>
           </DropdownMenu.Content>
         </DropdownMenu.Root>
-
         <Flex style={{ flex: 1 }}>
           {TREE_TYPES.map((type, index) => (
             <Button
@@ -110,7 +109,6 @@ export function Options() {
             </Button>
           ))}
         </Flex>
-
         <Flex style={{ flex: 1 }}>
           {[...TANK_TYPES].reverse().map((type, index) => (
             <Button
@@ -147,84 +145,6 @@ export function Options() {
             </Button>
           ))}
         </Flex>
-
-      <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
-        {[...TIERS].reverse().map((tier, index) => (
-          <Button
-            key={tier}
-            variant={
-              tankopediaState.filters.tiers.includes(tier) ? 'solid' : '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={() =>
-              mutateTankopedia((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}
-            variant={
-              tankopediaState.filters.nations.includes(nation)
-                ? 'solid'
-                : 'soft'
-            }
-            style={{
-              flex: 1,
-              margin: -0.5,
-              borderTopLeftRadius: index === 0 ? undefined : 0,
-              borderBottomLeftRadius: index === 0 ? undefined : 0,
-              borderTopRightRadius:
-                index === nations.length - 1 ? undefined : 0,
-              borderBottomRightRadius:
-                index === nations.length - 1 ? undefined : 0,
-            }}
-            onClick={() =>
-              mutateTankopedia((draft) => {
-                if (draft.filters.nations.includes(nation)) {
-                  draft.filters.nations = draft.filters.nations.filter(
-                    (preexistingType) => preexistingType !== nation,
-                  );
-                } else {
-                  draft.filters.nations.push(nation);
-                }
-              })
-            }
-          >
-            <img
-              src={asset(`flags/circle/${nation}.webp`)}
-              style={{
-                width: '1em',
-                height: '1em',
-                scale: 2,
-                transform: 'translate(15%, 15%)',
-              }}
-            />
-          </Button>
-        ))}
-      </Flex>
-
         <Flex
           direction="column"
           className={styles.splitFilters}
@@ -248,7 +168,9 @@ export function Options() {
                     borderTopLeftRadius: index === 0 ? undefined : 0,
                     borderBottomLeftRadius: 0,
                     borderTopRightRadius:
-                    index === TIERS.length - 6 ? undefined : 0,
+                      index === TIERS.length - Math.round(TIERS.length / 2) - 1
+                        ? undefined
+                        : 0,
                     borderBottomRightRadius: 0,
                   }}
                   onClick={() =>
@@ -267,7 +189,6 @@ export function Options() {
                 </Button>
               ))}
           </Flex>
-
           <Flex>
             {[...TIERS]
               .reverse()
@@ -287,7 +208,9 @@ export function Options() {
                     borderBottomLeftRadius: index === 0 ? undefined : 0,
                     borderTopRightRadius: 0,
                     borderBottomRightRadius:
-                    index === TIERS.length - 6 ? undefined : 0,
+                      index === TIERS.length - Math.round(TIERS.length / 2) - 1
+                        ? undefined
+                        : 0,
                   }}
                   onClick={() =>
                     mutateTankopedia((draft) => {
@@ -306,7 +229,6 @@ export function Options() {
               ))}
           </Flex>
         </Flex>
-
         <Flex
           direction="column"
           className={styles.splitFilters}
@@ -327,7 +249,9 @@ export function Options() {
                   borderTopLeftRadius: index === 0 ? undefined : 0,
                   borderBottomLeftRadius: 0,
                   borderTopRightRadius:
-                  index === nations.length - 5 ? undefined : 0,
+                    index === nations.length - Math.round(nations.length / 2)
+                      ? undefined
+                      : 0,
                   borderBottomRightRadius:
                     index === nations.length - 1 ? undefined : 0,
                 }}
@@ -373,7 +297,90 @@ export function Options() {
                   borderTopRightRadius:
                     index === nations.length - 1 ? undefined : 0,
                   borderBottomRightRadius:
-                  index === nations.length - 6 ? undefined : 0,
+                    index ===
+                    nations.length - Math.round(nations.length / 2) - 1
+                      ? undefined
+                      : 0,
+                }}
+                onClick={() =>
+                  mutateTankopedia((draft) => {
+                    if (draft.filters.nations.includes(nation)) {
+                      draft.filters.nations = draft.filters.nations.filter(
+                        (preexistingType) => preexistingType !== nation,
+                      );
+                    } else {
+                      draft.filters.nations.push(nation);
+                    }
+                  })
+                }
+              >
+                <img
+                  src={asset(`flags/circle/${nation}.webp`)}
+                  style={{
+                    width: '1em',
+                    height: '1em',
+                    scale: 2,
+                    transform: 'translate(15%, 15%)',
+                  }}
+                />
+              </Button>
+            ))}
+          </Flex>
+        </Flex>
+      </Flex>
+
+      <Flex gap="2" style={{ flex: 1 }} wrap="wrap">
+        <Flex className={styles.oneLineFilters} style={{ flex: 1 }}>
+          {[...TIERS].reverse().map((tier, index) => (
+            <Button
+              key={tier}
+              variant={
+                tankopediaState.filters.tiers.includes(tier) ? 'solid' : '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={() =>
+                mutateTankopedia((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}
+              variant={
+                tankopediaState.filters.nations.includes(nation)
+                  ? 'solid'
+                  : 'soft'
+              }
+              style={{
+                flex: 1,
+                margin: -0.5,
+                borderTopLeftRadius: index === 0 ? undefined : 0,
+                borderBottomLeftRadius: index === 0 ? undefined : 0,
+                borderTopRightRadius:
+                  index === nations.length - 1 ? undefined : 0,
+                borderBottomRightRadius:
+                  index === nations.length - 1 ? undefined : 0,
               }}
               onClick={() =>
                 mutateTankopedia((draft) => {

src/app/tools/tankopedia/page.tsx

@@ -28,14 +28,13 @@ import { theme } from '../../../stitches.config';
 import mutateTankopedia, {
   TankopediaSortBy,
   TankopediaSortDirection,
-  TankopediaTestTankDisplay,
   useTankopedia,
 } from '../../../stores/tankopedia';
 import { Options } from './components/Options';
 import { PageTurner } from './components/PageTurner';
 import * as styles from './page.css';
 
-const TANKS_PER_PAGE = 3 * 2 ** 4;
+const TANKS_PER_PAGE = 3 * 2 ** 3;
 
 export default function Page() {
   const tankopediaState = useTankopedia();
@@ -102,7 +101,7 @@ export default function Page() {
   return (
     <PageWrapper size="wide" color="purple">
       <Suspense fallback={<Text>Loading...</Text>}>
-        <Flex direction="column" gap="6">
+        <Flex direction="column" gap="4">
           <Flex gap="2">
             <TextField.Root style={{ flex: 1 }}>
               <TextField.Slot>
@@ -174,10 +173,10 @@ export default function Page() {
                 </DropdownMenu.RadioGroup>
               </DropdownMenu.Content>
             </DropdownMenu.Root>
-
           </Flex>
 
           <Options />
+        </Flex>
 
         <PageTurner
           page={page}
@@ -185,7 +184,6 @@ export default function Page() {
           tanksPerPage={TANKS_PER_PAGE}
           searchedList={searchedList}
         />
-        </Flex>
 
         <Flex wrap="wrap" gap="3" justify="center">
           {searchedList