[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,8 +57,9 @@ function SquareItemCard({
           `}
           role="group"
         >
-          <Link
+          <Link href={`/items/${item.id}`} passHref>
-            to={`/items/${item.id}`}
+            <Box
+              as="a"
               className={css`
                 border-radius: ${mdRadiusValue};
                 transition: all 0.2s;
@@ -89,6 +90,7 @@ function SquareItemCard({
                 boxShadow={tradeMatchShadow}
                 footer={footer}
               />
+            </Box>
           </Link>
           {showRemoveButton && (
             <div