Add arrow buttons to PosePickerSupport

Easier to move between appearances quickly! I'm adding this in anticipation of a use case of rapidly labeling Unknown appearances—I want it to be easy to label one and go to the next!

src/app/WardrobePage/support/Metadata.js

@@ -13,6 +13,7 @@ function Metadata({ children, ...otherProps }) {
       gridTemplateColumns="max-content auto"
       gridRowGap="1"
       gridColumnGap="2"
+      {...otherProps}
     >
       {children}
     </Box>

src/app/WardrobePage/support/PosePickerSupport.js

@@ -1,7 +1,8 @@
 import React from "react";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
-import { Box, Select, Switch } from "@chakra-ui/core";
+import { Box, IconButton, Select, Switch } from "@chakra-ui/core";
+import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
 
 import HangerSpinner from "../../components/HangerSpinner";
 import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
@@ -143,33 +144,13 @@ function PosePickerSupport({
 
   return (
     <Box>
-      <Box display="flex" justifyContent="flex-end" marginBottom="4">
+      <PosePickerSupportNavigator
-        <Select
+        petAppearances={data.petAppearances}
-          size="sm"
+        currentPetAppearance={currentPetAppearance}
-          width="auto"
+        canonicalAppearanceIds={canonicalAppearanceIds}
-          value={appearanceId}
+        dispatchToOutfit={dispatchToOutfit}
-          onChange={(e) => {
+      />
-            const id = e.target.value;
+      <Metadata fontSize="sm">
-            const petAppearance = data.petAppearances.find(
-              (pa) => pa.id === id
-            );
-            dispatchToOutfit({
-              type: "setPose",
-              pose: petAppearance.pose,
-              appearanceId: petAppearance.id,
-            });
-          }}
-        >
-          {data.petAppearances.map((pa) => (
-            <option key={pa.id} value={pa.id}>
-              {POSE_NAMES[pa.pose]} ({pa.id}){" "}
-              {canonicalAppearanceIds.includes(pa.id) && "⭐️"}
-              {pa.isGlitched && "👾"}
-            </option>
-          ))}
-        </Select>
-      </Box>
-      <Metadata>
         <MetadataLabel>DTI ID:</MetadataLabel>
         <MetadataValue>{appearanceId}</MetadataValue>
         <MetadataLabel>Pose:</MetadataLabel>
@@ -214,6 +195,78 @@ function PosePickerSupport({
   );
 }
 
+function PosePickerSupportNavigator({
+  petAppearances,
+  currentPetAppearance,
+  canonicalAppearanceIds,
+  dispatchToOutfit,
+}) {
+  const currentIndex = petAppearances.indexOf(currentPetAppearance);
+  const prevPetAppearance = petAppearances[currentIndex - 1];
+  const nextPetAppearance = petAppearances[currentIndex + 1];
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="flex-end"
+      marginBottom="4"
+      // Space for the position-absolute PosePicker mode switcher
+      paddingLeft="12"
+    >
+      <IconButton
+        aria-label="Go to previous appearance"
+        icon={<ArrowBackIcon />}
+        size="sm"
+        marginRight="2"
+        isDisabled={prevPetAppearance == null}
+        onClick={() =>
+          dispatchToOutfit({
+            type: "setPose",
+            pose: prevPetAppearance.pose,
+            appearanceId: prevPetAppearance.id,
+          })
+        }
+      />
+      <Select
+        size="sm"
+        width="auto"
+        value={currentPetAppearance.id}
+        onChange={(e) => {
+          const id = e.target.value;
+          const petAppearance = petAppearances.find((pa) => pa.id === id);
+          dispatchToOutfit({
+            type: "setPose",
+            pose: petAppearance.pose,
+            appearanceId: petAppearance.id,
+          });
+        }}
+      >
+        {petAppearances.map((pa) => (
+          <option key={pa.id} value={pa.id}>
+            {POSE_NAMES[pa.pose]}{" "}
+            {canonicalAppearanceIds.includes(pa.id) && "⭐️"}
+            {pa.isGlitched && "👾"} ({pa.id})
+          </option>
+        ))}
+      </Select>
+      <IconButton
+        aria-label="Go to next appearance"
+        icon={<ArrowForwardIcon />}
+        size="sm"
+        marginLeft="2"
+        isDisabled={nextPetAppearance == null}
+        onClick={() =>
+          dispatchToOutfit({
+            type: "setPose",
+            pose: nextPetAppearance.pose,
+            appearanceId: nextPetAppearance.id,
+          })
+        }
+      />
+    </Box>
+  );
+}
+
 export function PosePickerSupportSwitch({ isChecked, onChange }) {
   return (
     <Box as="label" display="flex" flexDirection="row" alignItems="center">