[WIP] Migrate /items/search to Next.js routing

Okay I actually screwed up the layouts thing a bit! Because right, they need to *share* a LayoutComponent in order to share the UI across the pages. This gets a bit tricky with wanting to change the margin, too. I'll address this with an upcoming refactor!

pages/items/search/[query].tsx

@@ -0,0 +1,5 @@
+// Both of these routes are the same page! The query parameter is effectively
+// optional: this is the route if you have it, and the other is the route if
+// you don't.
+import ItemSearchPageWrapper from "./index";
+export default ItemSearchPageWrapper;

pages/items/search/index.tsx

@@ -0,0 +1,19 @@
+import ItemSearchPageToolbar from "../../../src/app/components/ItemSearchPageToolbar";
+import ItemSearchPage from "../../../src/app/ItemSearchPage";
+import PageLayout from "../../../src/app/PageLayout";
+import type { NextPageWithLayout } from "../../_app";
+
+const ItemSearchPageWrapper: NextPageWithLayout = () => {
+  return <ItemSearchPage />;
+};
+
+ItemSearchPageWrapper.layoutComponent = ({ children }) => {
+  return (
+    <PageLayout>
+      <ItemSearchPageToolbar marginBottom="6" />
+      {children}
+    </PageLayout>
+  );
+};
+
+export default ItemSearchPageWrapper;

src/app/App.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
 import {
   BrowserRouter as Router,
   Switch,
@@ -12,7 +11,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
 import { loadable } from "./util";
 
 const HomePage = loadable(() => import("./HomePage"));
-const ItemSearchPage = loadable(() => import("./ItemSearchPage"));
 const ItemTradesOfferingPage = loadable(() =>
   import("./ItemTradesPage").then((m) => m.ItemTradesOfferingPage)
 );
@@ -27,17 +25,6 @@ const WardrobePage = loadable(() => import("./WardrobePage"), {
   fallback: <WardrobePageLayout />,
 });
 
-// ItemPage and ItemSearchPage need to share a search toolbar, so here it is!
-// It'll load in dynamically like the page elements, with a hacky fallback to
-// take up 40px of height until it loads.
-//
-// There very well be a better way to encapsulate this! It's not *great* to
-// have this here. I just don't wanna over abstract it just yet 😅
-const ItemSearchPageToolbar = loadable(
-  () => import("./components/ItemSearchPageToolbar"),
-  { fallback: <Box height="40px" /> }
-);
-
 /**
  * App is the entry point of our application. There's not a ton of exciting
  * stuff happening here, mostly just setting up some globals and theming!
@@ -50,12 +37,6 @@ function App() {
       <ScrollToTop />
 
       <Switch>
-        <Route path="/items/search/:query?">
-          <PageLayout>
-            <ItemSearchPageToolbar marginBottom="6" />
-            <ItemSearchPage />
-          </PageLayout>
-        </Route>
         <Route path="/items/:itemId/trades/offering">
           <PageLayout>
             <ItemTradesOfferingPage />

src/app/components/SquareItemCard.js

@@ -8,7 +8,7 @@ import {
   useToken,
 } from "@chakra-ui/react";
 import { ClassNames } from "@emotion/react";
-import { Link } from "react-router-dom";
+import Link from "next/link";
 
 import { safeImageUrl, useCommonStyles } from "../util";
 import { CheckIcon, CloseIcon, StarIcon } from "@chakra-ui/icons";
@@ -57,38 +57,40 @@ function SquareItemCard({
           `}
           role="group"
         >
-          <Link
+          <Link href={`/items/${item.id}`} passHref>
-            to={`/items/${item.id}`}
+            <Box
-            className={css`
+              as="a"
-              border-radius: ${mdRadiusValue};
+              className={css`
-              transition: all 0.2s;
+                border-radius: ${mdRadiusValue};
-              &:hover,
+                transition: all 0.2s;
-              &:focus {
+                &:hover,
-                transform: scale(1.05);
+                &:focus {
-              }
+                  transform: scale(1.05);
-              &:focus {
+                }
-                box-shadow: ${outlineShadowValue};
+                &:focus {
-                outline: none;
+                  box-shadow: ${outlineShadowValue};
-              }
+                  outline: none;
-            `}
+                }
-            {...props}
+              `}
-          >
+              {...props}
-            <SquareItemCardLayout
+            >
-              name={item.name}
+              <SquareItemCardLayout
-              thumbnailImage={
+                name={item.name}
-                <ItemThumbnail
+                thumbnailImage={
-                  item={item}
+                  <ItemThumbnail
-                  tradeMatchingMode={tradeMatchingMode}
+                    item={item}
-                />
+                    tradeMatchingMode={tradeMatchingMode}
-              }
+                  />
-              removeButton={
+                }
-                showRemoveButton ? (
+                removeButton={
-                  <SquareItemCardRemoveButton onClick={onRemove} />
+                  showRemoveButton ? (
-                ) : null
+                    <SquareItemCardRemoveButton onClick={onRemove} />
-              }
+                  ) : null
-              boxShadow={tradeMatchShadow}
+                }
-              footer={footer}
+                boxShadow={tradeMatchShadow}
-            />
+                footer={footer}
+              />
+            </Box>
           </Link>
           {showRemoveButton && (
             <div