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,14 +14,17 @@ interface TierCardProps {
   tanks: TankDefinition[];
 }
 
-export function TierCard({ tier, tanks }: TierCardProps) {
+export const TierCard = memo(
+  ({ tier, tanks }: TierCardProps) => {
     const container = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
       const unsubscribe = useTankopediaFilters.subscribe((filters) => {
         if (!container.current) return;
 
-      const visible = tanks.some((tank) => tankopediaFilterTank(filters, tank));
+        const visible = tanks.some((tank) =>
+          tankopediaFilterTank(filters, tank),
+        );
         container.current.style.display = visible ? 'flex' : 'none';
       });
 
@@ -52,4 +55,6 @@ export function TierCard({ tier, tanks }: TierCardProps) {
         </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={{