From 127ffc787ef891cb3b8f371694211a7b29130811 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 2 Jul 2024 20:07:16 -0500
Subject: [PATCH] feat: sticky tank cards

---
 .../tank-performance/components/Table.tsx     | 21 +++++++++++++++++++
 src/app/tools/tank-performance/page.tsx       | 17 ++-------------
 src/components/StickyTableRoot.tsx            | 17 +++++++++++++++
 src/components/TankRowHeaderCell.tsx          |  9 +++++++-
 4 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 src/app/tools/tank-performance/components/Table.tsx
 create mode 100644 src/components/StickyTableRoot.tsx

diff --git a/src/app/tools/tank-performance/components/Table.tsx b/src/app/tools/tank-performance/components/Table.tsx
new file mode 100644
index 000000000..30bde3187
--- /dev/null
+++ b/src/app/tools/tank-performance/components/Table.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { Flex } from '@radix-ui/themes';
+import { Suspense } from 'react';
+import { StickyTableRoot } from '../../../../components/StickyTableRoot';
+import { BodyLoader } from './BodyLoader';
+import { Header } from './Header';
+import { Tanks } from './Tanks';
+
+export function TankTable() {
+  return (
+    <Flex justify="center">
+      <StickyTableRoot variant="surface" style={{ maxWidth: '100%' }}>
+        <Header />
+        <Suspense fallback={<BodyLoader />}>
+          <Tanks />
+        </Suspense>
+      </StickyTableRoot>
+    </Flex>
+  );
+}
diff --git a/src/app/tools/tank-performance/page.tsx b/src/app/tools/tank-performance/page.tsx
index 1a12405fe..859dfe7b8 100644
--- a/src/app/tools/tank-performance/page.tsx
+++ b/src/app/tools/tank-performance/page.tsx
@@ -1,27 +1,14 @@
-import { Flex, Table } from '@radix-ui/themes';
-import { Suspense } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
 import { FilterControl } from '../tankopedia/components/FilterControl';
-import { BodyLoader } from './components/BodyLoader';
-import { Header } from './components/Header';
 import { Info } from './components/Info';
-import { Tanks } from './components/Tanks';
+import { TankTable } from './components/Table';
 
 export default function Page() {
   return (
     <PageWrapper color="jade" noMaxWidth>
       <Info />
-
       <FilterControl />
-
-      <Flex justify="center">
-        <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
-          <Header />
-          <Suspense fallback={<BodyLoader />}>
-            <Tanks />
-          </Suspense>
-        </Table.Root>
-      </Flex>
+      <TankTable />
     </PageWrapper>
   );
 }
diff --git a/src/components/StickyTableRoot.tsx b/src/components/StickyTableRoot.tsx
new file mode 100644
index 000000000..f7615fc2e
--- /dev/null
+++ b/src/components/StickyTableRoot.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { Table } from '@radix-ui/themes';
+import { RootProps } from '@radix-ui/themes/dist/cjs/components/table';
+import { useEffect, useRef } from 'react';
+
+export function StickyTableRoot(props: RootProps) {
+  const table = useRef<HTMLTableElement>(null);
+
+  useEffect(() => {
+    table.current
+      ?.querySelector('table')
+      ?.style.setProperty('overflow', 'auto');
+  }, []);
+
+  return <Table.Root {...props} ref={table} />;
+}
diff --git a/src/components/TankRowHeaderCell.tsx b/src/components/TankRowHeaderCell.tsx
index 7b8fbe7e5..ecc0ea732 100644
--- a/src/components/TankRowHeaderCell.tsx
+++ b/src/components/TankRowHeaderCell.tsx
@@ -13,7 +13,14 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
   const Icon = classIcons[tank.class];
 
   return (
-    <Table.RowHeaderCell style={{ display: 'flex' }}>
+    <Table.RowHeaderCell
+      style={{
+        display: 'flex',
+        position: 'sticky',
+        left: 0,
+        backgroundColor: 'var(--color-background)',
+      }}
+    >
       <Link href={`/tools/tankopedia/${tank.id}`} tabIndex={-1}>
         <img
           alt={tank.name}