feat: jump to position

src/app/tools/ratings/page.tsx

@@ -83,6 +83,7 @@ export default function Page() {
     page * rowsPerPage,
     page * rowsPerPage + rowsPerPage,
   );
+  const positionInput = useRef<HTMLInputElement>(null);
   const previousPage = () => setPage((page) => Math.max(page - 1, 0));
   const nextPage = () =>
     setPage((page) =>
@@ -152,6 +153,19 @@ export default function Page() {
       });
     }
   }
+  const handleJumpToPosition = () => {
+    const rawPosition = positionInput.current!.valueAsNumber - 1;
+    const position = Math.max(
+      0,
+      Math.min(rawPosition, (players.data?.length ?? 0) - 1),
+    );
+    setPage(Math.floor(position / rowsPerPage));
+
+    if (players.data) {
+      setHighlightedPlayerId(players.data[position].id);
+    }
+  };
+  const [jumpToPositionOpen, setJumpToPositionOpen] = useState(false);
 
   useEffect(() => {
     setPage(0);
@@ -246,11 +260,69 @@ export default function Page() {
         </Select.Root>
       </Flex>
 
-      <Flex justify="between" wrap="wrap" gap="2">
+      <Flex justify="center" wrap="wrap" gap="2">
+        <Button variant="soft" onClick={previousPage}>
+          <CaretLeftIcon />
+        </Button>
+        <PageTurner />
+        <Select.Root
+          onValueChange={(value) => setRowsPerPage(parseInt(value))}
+          defaultValue={`${rowsPerPage}`}
+        >
+          <Select.Trigger />
+
+          <Select.Content>
+            {ROWS_OPTIONS.map((size) => (
+              <Select.Item value={`${size}`} key={size}>
+                {size} per page
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+        <Button variant="soft" onClick={nextPage}>
+          <CaretRightIcon />
+        </Button>
+      </Flex>
+
+      <Flex gap="2" justify="center">
+        <Dialog.Root
+          open={jumpToPositionOpen}
+          onOpenChange={setJumpToPositionOpen}
+        >
+          <Dialog.Trigger>
+            <Button variant="soft">Jump to position...</Button>
+          </Dialog.Trigger>
+
+          <Dialog.Content>
+            <Flex gap="4" justify="center">
+              <TextField.Input
+                ref={positionInput}
+                onChange={handleSearchPlayerChange}
+                type="number"
+                placeholder="Type a position..."
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    handleJumpToPosition();
+                    setJumpToPositionOpen(false);
+                  }
+                }}
+              />
+
               <Flex gap="2">
+                <Dialog.Close>
+                  <Button color="red">Cancel</Button>
+                </Dialog.Close>
+                <Dialog.Close>
+                  <Button onClick={handleJumpToPosition}>Jump</Button>
+                </Dialog.Close>
+              </Flex>
+            </Flex>
+          </Dialog.Content>
+        </Dialog.Root>
+
         <Popover.Root>
           <Popover.Trigger>
-              <Button variant="soft">Jump to league</Button>
+            <Button variant="soft">Jump to league...</Button>
           </Popover.Trigger>
 
           <Popover.Content>
@@ -282,7 +354,7 @@ export default function Page() {
 
         <Dialog.Root>
           <Dialog.Trigger>
-              <Button variant="soft">Jump to player</Button>
+            <Button variant="soft">Jump to player...</Button>
           </Dialog.Trigger>
 
           <Dialog.Content>
@@ -338,32 +410,6 @@ export default function Page() {
         </Dialog.Root>
       </Flex>
 
-        <Select.Root
-          onValueChange={(value) => setRowsPerPage(parseInt(value))}
-          defaultValue={`${rowsPerPage}`}
-        >
-          <Select.Trigger />
-
-          <Select.Content>
-            {ROWS_OPTIONS.map((size) => (
-              <Select.Item value={`${size}`} key={size}>
-                {size} per page
-              </Select.Item>
-            ))}
-          </Select.Content>
-        </Select.Root>
-
-        <Flex gap="2" align="center">
-          <Button variant="soft" onClick={previousPage}>
-            <CaretLeftIcon />
-          </Button>
-          <PageTurner />
-          <Button variant="soft" onClick={nextPage}>
-            <CaretRightIcon />
-          </Button>
-        </Flex>
-      </Flex>
-
       <Leaderboard.Root>
         {players.isLoading ? (
           <Leaderboard.Gap message="Loading players..." />