add pb badge to pb items, instead of nc/np badge

src/app/ItemPage.js

@@ -30,9 +30,8 @@ import { useParams } from "react-router-dom";
 
 import {
   ItemBadgeList,
+  ItemKindBadge,
   ItemThumbnail,
-  NcBadge,
-  NpBadge,
 } from "./components/ItemCard";
 import { Delay, Heading1, usePageTitle } from "./util";
 import {
@@ -76,6 +75,7 @@ function ItemPageHeader({ itemId, isEmbedded }) {
           id
           name
           isNc
+          isPb
           thumbnailUrl
           description
           createdAt
@@ -150,7 +150,7 @@ function ItemPageBadges({ item, isEmbedded }) {
   return (
     <ItemBadgeList marginTop="1">
       <SubtleSkeleton isLoaded={item?.isNc != null}>
-        {item?.isNc ? <NcBadge /> : <NpBadge />}
+        <ItemKindBadge isNc={item.isNc} isPb={item.isPb} />
       </SubtleSkeleton>
       {
         // If the createdAt date is null (loaded and empty), hide the badge.
@@ -192,7 +192,7 @@ function ItemPageBadges({ item, isEmbedded }) {
         </LinkBadge>
       </SubtleSkeleton>
       <SubtleSkeleton isLoaded={searchBadgesAreLoaded}>
-        {!item?.isNc && (
+        {!item?.isNc && !item?.isPb && (
           <LinkBadge
             href={
               "http://www.neopets.com/market.phtml?type=wizard&string=" +
@@ -205,7 +205,7 @@ function ItemPageBadges({ item, isEmbedded }) {
         )}
       </SubtleSkeleton>
       <SubtleSkeleton isLoaded={searchBadgesAreLoaded}>
-        {!item?.isNc && (
+        {!item?.isNc && !item?.isPb && (
           <LinkBadge
             href={
               "http://www.neopets.com/portal/supershopwiz.phtml?string=" +
@@ -218,7 +218,7 @@ function ItemPageBadges({ item, isEmbedded }) {
         )}
       </SubtleSkeleton>
       <SubtleSkeleton isLoaded={searchBadgesAreLoaded}>
-        {!item?.isNc && (
+        {!item?.isNc && !item?.isPb && (
           <LinkBadge
             href={
               "http://www.neopets.com/island/tradingpost.phtml?type=browse&criteria=item_exact&search_string=" +
@@ -231,7 +231,7 @@ function ItemPageBadges({ item, isEmbedded }) {
         )}
       </SubtleSkeleton>
       <SubtleSkeleton isLoaded={searchBadgesAreLoaded}>
-        {!item?.isNc && (
+        {!item?.isNc && !item?.isPb && (
           <LinkBadge
             href={
               "http://www.neopets.com/genie.phtml?type=process_genie&criteria=exact&auctiongenie=" +

src/app/UserItemsPage.js

@@ -13,8 +13,7 @@ import { Heading1, Heading2, Heading3 } from "./util";
 import ItemCard, {
   ItemBadgeList,
   ItemCardList,
-  NcBadge,
-  NpBadge,
+  ItemKindBadge,
   YouOwnThisBadge,
   YouWantThisBadge,
   getZoneBadges,
@@ -44,6 +43,7 @@ function UserItemsPage() {
             items {
               id
               isNc
+              isPb
               name
               thumbnailUrl
               currentUserOwnsThis
@@ -256,7 +256,7 @@ function ClosetList({ closetList, isCurrentUser, showHeading }) {
               item={item}
               badges={
                 <ItemBadgeList>
-                  {item.isNc ? <NcBadge /> : <NpBadge />}
+                  <ItemKindBadge isNc={item.isNc} isPb={item.isPb} />
                   {hasYouOwnThisBadge(item) && <YouOwnThisBadge />}
                   {hasYouWantThisBadge(item) && <YouWantThisBadge />}
                   {getZoneBadges(item.allOccupiedZones, {

src/app/WardrobePage/Item.js

@@ -16,9 +16,8 @@ import loadable from "@loadable/component";
 import {
   ItemCardContent,
   ItemBadgeList,
+  ItemKindBadge,
   MaybeAnimatedBadge,
-  NcBadge,
-  NpBadge,
   YouOwnThisBadge,
   YouWantThisBadge,
   getZoneBadges,
@@ -211,17 +210,7 @@ function ItemBadges({ item }) {
 
   return (
     <ItemBadgeList>
-      {item.isNc ? (
-        <NcBadge />
-      ) : (
-        // The main purpose of the NP badge is alignment: if there are
-        // zone badges, we want them to start at the same rough position,
-        // even if there's an NC badge at the start. But if this view
-        // generally avoids zone badges, we'd rather have the NC badge be
-        // a little extra that might pop up and hide the NP case, rather
-        // than try to line things up like a table.
-        <NpBadge />
-      )}
+      <ItemKindBadge isNc={item.isNc} isPb={item.isPb} />
       {
         // This badge is unreliable, but it's helpful for looking for animated
         // items to test, so we show it only to support. We use this form

src/app/WardrobePage/SearchPanel.js

@@ -280,6 +280,7 @@ function useSearchResults(query, outfitState) {
             name
             thumbnailUrl
             isNc
+            isPb
             currentUserOwnsThis
             currentUserWantsThis
 

src/app/WardrobePage/useOutfitState.js

@@ -38,6 +38,7 @@ function useOutfitState() {
           name
           thumbnailUrl
           isNc
+          isPb
           currentUserOwnsThis
           currentUserWantsThis
 

src/app/components/ItemCard.js

@@ -230,8 +230,6 @@ export function NcBadge() {
 }
 
 export function NpBadge() {
-  // NOTE: display:block helps with some layout consistency, overriding the
-  //       default of inline-block.
   return (
     <ItemBadgeTooltip label="Neopoints">
       <Badge display="block">NP</Badge>
@@ -239,6 +237,26 @@ export function NpBadge() {
   );
 }
 
+export function PbBadge() {
+  return (
+    <ItemBadgeTooltip label="This item is only obtainable via paintbrush">
+      <Badge colorScheme="orange" display="block">
+        PB
+      </Badge>
+    </ItemBadgeTooltip>
+  );
+}
+
+export function ItemKindBadge({ isNc, isPb }) {
+  if (isNc) {
+    return <NcBadge />;
+  } else if (isPb) {
+    return <PbBadge />;
+  } else {
+    return <NpBadge />;
+  }
+}
+
 export function YouOwnThisBadge({ variant = "long" }) {
   let badge = (
     <Badge