add created at date to item page

this will help me notice which items are new! lol

src/app/ItemPage.js

@@ -7,6 +7,7 @@ import {
   Box,
   Skeleton,
   SkeletonText,
+  Tooltip,
   VisuallyHidden,
   VStack,
   useBreakpointValue,
@@ -63,6 +64,7 @@ function ItemPageHeader({ itemId, isEmbedded }) {
           isNc
           thumbnailUrl
           description
+          createdAt
         }
       }
     `,
@@ -130,6 +132,20 @@ function ItemPageBadges({ item, isEmbedded }) {
       <Skeleton isLoaded={item?.isNc != null}>
         {item?.isNc ? <NcBadge /> : <NpBadge />}
       </Skeleton>
+      {
+        // If the createdAt date is null (loaded and empty), hide the badge.
+        item.createdAt !== null && (
+          <Skeleton
+            // Distinguish between undefined (still loading) and null (loaded and
+            // empty).
+            isLoaded={item.createdAt !== undefined}
+          >
+            <Badge display="block">
+              <ShortTimestamp when={item.createdAt || "1970-01-01"} />
+            </Badge>
+          </Skeleton>
+        )
+      }
       <Skeleton isLoaded={searchBadgesAreLoaded}>
         <LinkBadge
           href={`https://impress.openneo.net/items/${item.id}`}
@@ -228,6 +244,47 @@ function LinkBadge({ children, href, isEmbedded }) {
   );
 }
 
+const fullDateFormatter = new Intl.DateTimeFormat("en-US", {
+  dateStyle: "long",
+});
+const monthYearFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  year: "numeric",
+});
+const monthDayYearFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+});
+function ShortTimestamp({ when }) {
+  const date = new Date(when);
+
+  // To find the start of last month, take today, then set its date to the 1st
+  // and its time to midnight (the start of this month), and subtract one
+  // month. (JS handles negative months and rolls them over correctly.)
+  const startOfLastMonth = new Date();
+  startOfLastMonth.setDate(1);
+  startOfLastMonth.setHours(0);
+  startOfLastMonth.setMinutes(0);
+  startOfLastMonth.setSeconds(0);
+  startOfLastMonth.setMilliseconds(0);
+  startOfLastMonth.setMonth(startOfLastMonth.getMonth() - 1);
+
+  const dateIsOlderThanLastMonth = date < startOfLastMonth;
+
+  return (
+    <Tooltip
+      label={`First seen on ${fullDateFormatter.format(date)}`}
+      placement="top"
+      openDelay={400}
+    >
+      {dateIsOlderThanLastMonth
+        ? monthYearFormatter.format(date)
+        : monthDayYearFormatter.format(date)}
+    </Tooltip>
+  );
+}
+
 function ItemPageOwnWantButtons({ itemId }) {
   const theme = useTheme();
   const toast = useToast();

src/server/query-tests/Item.test.js

@@ -13,6 +13,7 @@ describe("Item", () => {
             thumbnailUrl
             rarityIndex
             isNc
+            createdAt
             manualSpecialColor {
               id
               name

src/server/query-tests/__snapshots__/Item.test.js.snap

@@ -11926,6 +11926,7 @@ exports[`Item loads metadata 1`] = `
 Object {
   "items": Array [
     Object {
+      "createdAt": null,
       "description": "Dont leave any trace that you were there with these gloves.",
       "explicitlyBodySpecific": false,
       "id": "38913",
@@ -11936,6 +11937,7 @@ Object {
       "thumbnailUrl": "http://images.neopets.com/items/clo_zafara_agent_gloves.gif",
     },
     Object {
+      "createdAt": null,
       "description": "Hide your face and hair so no one can recognise you.",
       "explicitlyBodySpecific": false,
       "id": "38911",
@@ -11946,6 +11948,7 @@ Object {
       "thumbnailUrl": "http://images.neopets.com/items/clo_zafara_agent_hood.gif",
     },
     Object {
+      "createdAt": null,
       "description": "This robe is great for being stealthy.",
       "explicitlyBodySpecific": false,
       "id": "38912",
@@ -11956,6 +11959,7 @@ Object {
       "thumbnailUrl": "http://images.neopets.com/items/clo_zafara_agent_robe.gif",
     },
     Object {
+      "createdAt": "2011-03-31T07:15:51.000Z",
       "description": "Maybe youll be discovered by some Neopets from the future and thawed out!",
       "explicitlyBodySpecific": true,
       "id": "55788",
@@ -11966,6 +11970,7 @@ Object {
       "thumbnailUrl": "http://images.neopets.com/items/mall_petinice.gif",
     },
     Object {
+      "createdAt": "2018-04-13T01:23:08.000Z",
       "description": "Made with the finest jewels of the sea!",
       "explicitlyBodySpecific": false,
       "id": "77530",
@@ -11979,6 +11984,7 @@ Object {
       "thumbnailUrl": "http://images.neopets.com/items/mall_clo_marabluegown.gif",
     },
     Object {
+      "createdAt": "2018-06-23T04:50:35.000Z",
       "description": "You truly are the number one fan of Altador Cup, and your room reflects this!",
       "explicitlyBodySpecific": false,
       "id": "78104",

src/server/types/Item.js

@@ -10,6 +10,10 @@ const typeDefs = gql`
     rarityIndex: Int!
     isNc: Boolean!
 
+    # When this item was first added to DTI. ISO 8601 string, or null if the
+    # item was added so long ago that we don't have this field!
+    createdAt: String
+
     currentUserOwnsThis: Boolean!
     currentUserWantsThis: Boolean!
 
@@ -102,6 +106,10 @@ const resolvers = {
       const item = await itemLoader.load(id);
       return item.rarityIndex === 500 || item.rarityIndex === 0;
     },
+    createdAt: async ({ id }, _, { itemLoader }) => {
+      const item = await itemLoader.load(id);
+      return item.createdAt && item.createdAt.toISOString();
+    },
 
     currentUserOwnsThis: async (
       { id },