Add page numbers to item search

I'm gonna make this a bit more powerful later, but just for now, the text "Page 1 of 27" shows up!

I also don't like that the page number has to blink out while we load the new stuff; there are multiple solutions, but tbh I think the Apollo Cache should be the one to handle this, and that we can do it by refactoring the query structure a bit!

src/app/components/PaginationToolbar.js

@@ -1,27 +1,33 @@
 import React from "react";
-import { Button, Flex } from "@chakra-ui/react";
+import { Box, Button, Flex } from "@chakra-ui/react";
 import { Link, useLocation } from "react-router-dom";
 
+const PER_PAGE = 30;
+
 function PaginationToolbar({ isLoading, totalCount, ...props }) {
   const { search } = useLocation();
 
   const currentOffset =
     parseInt(new URLSearchParams(search).get("offset")) || 0;
 
+  const currentPageIndex = Math.floor(currentOffset / PER_PAGE);
+  const currentPageNumber = currentPageIndex + 1;
+  const numTotalPages = totalCount ? Math.ceil(totalCount / PER_PAGE) : null;
+
   const prevPageSearchParams = new URLSearchParams(search);
-  const prevPageOffset = currentOffset - 30;
+  const prevPageOffset = currentOffset - PER_PAGE;
   prevPageSearchParams.set("offset", prevPageOffset);
   const prevPageUrl = "?" + prevPageSearchParams.toString();
   const prevPageIsDisabled = isLoading || prevPageOffset < 0;
 
   const nextPageSearchParams = new URLSearchParams(search);
-  const nextPageOffset = currentOffset + 30;
+  const nextPageOffset = currentOffset + PER_PAGE;
   nextPageSearchParams.set("offset", nextPageOffset);
   const nextPageUrl = "?" + nextPageSearchParams.toString();
   const nextPageIsDisabled = isLoading || nextPageOffset >= totalCount;
 
   return (
-    <Flex justify="space-between" {...props}>
+    <Flex align="center" justify="space-between" {...props}>
       <Button
         as={prevPageIsDisabled ? "button" : Link}
         to={prevPageIsDisabled ? undefined : prevPageUrl}
@@ -30,6 +36,11 @@ function PaginationToolbar({ isLoading, totalCount, ...props }) {
       >
         ← Prev
       </Button>
+      {numTotalPages && (
+        <Box>
+          Page {currentPageNumber} of {numTotalPages}
+        </Box>
+      )}
       <Button
         as={nextPageIsDisabled ? "button" : Link}
         to={nextPageIsDisabled ? undefined : nextPageUrl}