Add PB badge to items in search / homepage

Oh right, labeling PB items as NP is confusing! Here, we add a "PB" case to the lil badge on the corner of the item thumbnail, in item search page & homepage Newest Items.

src/app/HomePage.js

@@ -380,6 +380,7 @@ function NewItemsSectionContent() {
           name
           thumbnailUrl
           isNc
+          isPb
         }
       }
     `

src/app/ItemSearchPage.js

@@ -145,6 +145,7 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
             name
             thumbnailUrl
             isNc
+            isPb
           }
         }
       }

src/app/components/SquareItemCard.js

@@ -95,17 +95,19 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
 function ItemThumbnail({ item }) {
   const mdRadiusValue = useToken("radii", "md");
 
+  const colorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray";
+
   const badgeBackground = useColorModeValue(
-    item.isNc ? "purple.100" : "gray.100",
-    item.isNc ? "purple.500" : "gray.500"
+    `${colorScheme}.100`,
+    `${colorScheme}.500`
   );
   const badgeColor = useColorModeValue(
-    item.isNc ? "purple.500" : "gray.500",
-    item.isNc ? "purple.100" : "gray.100"
+    `${colorScheme}.500`,
+    `${colorScheme}.100`
   );
   const thumbnailShadowColor = useColorModeValue(
-    item.isNc ? "purple.200" : "gray.200",
-    item.isNc ? "purple.600" : "gray.600"
+    `${colorScheme}.200`,
+    `${colorScheme}.600`
   );
 
   const [
@@ -158,7 +160,7 @@ function ItemThumbnail({ item }) {
                 color: ${badgeColorValue};
               `}
             >
-              {item.isNc ? "NC" : "NP"}
+              {item.isNc ? "NC" : item.isPb ? "PB" : "NP"}
             </div>
           )}
         </div>