feat: sticky

src/app/tools/tankopedia/components/TierCard.tsx

@@ -1,5 +1,5 @@
 import { Flex, Grid, Heading, Separator } from '@radix-ui/themes';
-import { useEffect, useRef } from 'react';
+import { memo, useEffect, useRef } from 'react';
 import {
   TankDefinition,
   Tier,
@@ -14,42 +14,47 @@ interface TierCardProps {
   tanks: TankDefinition[];
 }
 
-export function TierCard({ tier, tanks }: TierCardProps) {
-  const container = useRef<HTMLDivElement>(null);
+export const TierCard = memo(
+  ({ tier, tanks }: TierCardProps) => {
+    const container = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const unsubscribe = useTankopediaFilters.subscribe((filters) => {
-      if (!container.current) return;
+    useEffect(() => {
+      const unsubscribe = useTankopediaFilters.subscribe((filters) => {
+        if (!container.current) return;
 
-      const visible = tanks.some((tank) => tankopediaFilterTank(filters, tank));
-      container.current.style.display = visible ? 'flex' : 'none';
-    });
+        const visible = tanks.some((tank) =>
+          tankopediaFilterTank(filters, tank),
+        );
+        container.current.style.display = visible ? 'flex' : 'none';
+      });
 
-    return unsubscribe;
-  }, []);
+      return unsubscribe;
+    }, []);
 
-  return (
-    <Flex
-      ref={container}
-      direction="column"
-      gap="4"
-      display={tanks.length === 0 ? 'none' : 'flex'}
-    >
-      <Flex align="center" mb="4" gap="4">
-        <Heading weight="regular">Tier {TIER_ROMAN_NUMERALS[tier]}</Heading>
-        <Separator style={{ flex: 1 }} />
-      </Flex>
-
-      <Grid
-        flexGrow="1"
-        columns="repeat(auto-fill, minmax(100px, 1fr))"
-        gap="2"
-        gapY="6"
+    return (
+      <Flex
+        ref={container}
+        direction="column"
+        gap="4"
+        display={tanks.length === 0 ? 'none' : 'flex'}
       >
-        {tanks.map((tank) => (
-          <TankCard key={tank.id} tank={tank} />
-        ))}
-      </Grid>
-    </Flex>
-  );
-}
+        <Flex align="center" mb="4" gap="4">
+          <Heading weight="regular">Tier {TIER_ROMAN_NUMERALS[tier]}</Heading>
+          <Separator style={{ flex: 1 }} />
+        </Flex>
+
+        <Grid
+          flexGrow="1"
+          columns="repeat(auto-fill, minmax(100px, 1fr))"
+          gap="2"
+          gapY="6"
+        >
+          {tanks.map((tank) => (
+            <TankCard key={tank.id} tank={tank} />
+          ))}
+        </Grid>
+      </Flex>
+    );
+  },
+  (prev, next) => prev.tier === next.tier,
+);

src/app/tools/tankopedia/page.tsx

@@ -6,6 +6,7 @@ import { times } from 'lodash';
 import { use } from 'react';
 import { classIcons } from '../../../components/ClassIcon';
 import { ExperimentIcon } from '../../../components/ExperimentIcon';
+import { NAVBAR_HEIGHT } from '../../../components/Navbar';
 import PageWrapper from '../../../components/PageWrapper';
 import { ResearchedIcon } from '../../../components/ResearchedIcon';
 import { ScienceIcon } from '../../../components/ScienceIcon';
@@ -44,6 +45,7 @@ export default function Page() {
             initial: 'row',
             sm: 'column',
           }}
+          height="fit-content"
           gap="2"
           align={{
             initial: 'start',
@@ -53,6 +55,13 @@ export default function Page() {
             initial: 'center',
             sm: 'start',
           }}
+          position={{
+            initial: 'static',
+            sm: 'sticky',
+          }}
+          style={{
+            top: `calc(${NAVBAR_HEIGHT}px + var(--space-3))`,
+          }}
         >
           <Flex
             direction={{