show DTI ID in item support drawer

helps make looking stuff up easier!

src/app/WardrobePage/support/ItemLayerSupportModal.js

@@ -24,6 +24,7 @@ import {
 import { ChevronRightIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 
 import ItemLayerSupportUploadModal from "./ItemLayerSupportUploadModal";
+import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
 import { OutfitLayers } from "../../components/OutfitPreview";
 import SpeciesColorPicker from "../../components/SpeciesColorPicker";
 import useOutfitAppearance, {
@@ -341,34 +342,4 @@ function ItemLayerSupportPetCompatibilityFields({
   );
 }
 
-function Metadata({ children }) {
-  return (
-    <Box
-      as="dl"
-      display="grid"
-      gridTemplateColumns="max-content auto"
-      gridRowGap="1"
-      gridColumnGap="2"
-    >
-      {children}
-    </Box>
-  );
-}
-
-function MetadataLabel({ children }) {
-  return (
-    <Box as="dt" gridColumn="1" fontWeight="bold">
-      {children}
-    </Box>
-  );
-}
-
-function MetadataValue({ children }) {
-  return (
-    <Box as="dd" gridColumn="2">
-      {children}
-    </Box>
-  );
-}
-
 export default ItemLayerSupportModal;

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -27,6 +27,7 @@ import {
 import { CheckCircleIcon, EditIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 
 import ItemLayerSupportModal from "./ItemLayerSupportModal";
+import Metadata, { MetadataLabel, MetadataValue } from "./Metadata";
 import { OutfitLayers } from "../../components/OutfitPreview";
 import useOutfitAppearance from "../../components/useOutfitAppearance";
 import { OutfitStateContext } from "../useOutfitState";
@@ -73,13 +74,15 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
               Support <span aria-hidden="true">💖</span>
             </Badge>
           </DrawerHeader>
-          <DrawerBody>
-            <Box paddingBottom="5">
-              <Stack spacing="8">
-                <ItemSupportFields item={item} />
-                <ItemSupportAppearanceLayers item={item} />
-              </Stack>
-            </Box>
+          <DrawerBody paddingBottom="5">
+            <Metadata>
+              <MetadataLabel>DTI ID:</MetadataLabel>
+              <MetadataValue>{item.id}</MetadataValue>
+            </Metadata>
+            <Stack spacing="8" marginTop="6">
+              <ItemSupportFields item={item} />
+              <ItemSupportAppearanceLayers item={item} />
+            </Stack>
           </DrawerBody>
         </DrawerContent>
       </DrawerOverlay>

src/app/WardrobePage/support/Metadata.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Box } from "@chakra-ui/core";
+
+/**
+ * Metadata is a UI component for showing metadata about something, as labels
+ * and their values.
+ */
+function Metadata({ children }) {
+  return (
+    <Box
+      as="dl"
+      display="grid"
+      gridTemplateColumns="max-content auto"
+      gridRowGap="1"
+      gridColumnGap="2"
+    >
+      {children}
+    </Box>
+  );
+}
+
+function MetadataLabel({ children }) {
+  return (
+    <Box as="dt" gridColumn="1" fontWeight="bold">
+      {children}
+    </Box>
+  );
+}
+
+function MetadataValue({ children }) {
+  return (
+    <Box as="dd" gridColumn="2">
+      {children}
+    </Box>
+  );
+}
+
+export default Metadata;
+export { MetadataLabel, MetadataValue };