undo badge streamlining

I figured that we'd want simpler UI in the ItemsPanel when possible… but now that we've got it pretty simple and comfy, I think the consistency is better

src/app/WardrobePage/Item.js

@@ -62,10 +62,6 @@ function Item({
   const restrictedZoneLabels = getZoneLabels(
     item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems)
   );
-  const zonesAreSimple =
-    occupiedZoneLabels.length <= 1 && restrictedZoneLabels.length === 0;
-  const shouldHideZones = hideSimpleZones && zonesAreSimple;
-  const shouldShowZones = !shouldHideZones;
 
   return (
     <>
@@ -84,35 +80,39 @@ function Item({
             {item.isNc ? (
               <Badge colorScheme="purple">NC</Badge>
             ) : (
+              // 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.
               <Badge>NP</Badge>
             )}
-            {shouldShowZones &&
+            {occupiedZoneLabels.map((zoneLabel) => (
-              occupiedZoneLabels.map((zoneLabel) => (
+              <Badge key={zoneLabel}>{getZoneShorthand(zoneLabel)}</Badge>
-                <Badge key={zoneLabel}>{getZoneShorthand(zoneLabel)}</Badge>
+            ))}
-              ))}
+            {restrictedZoneLabels.map((zoneLabel) => (
-            {shouldShowZones &&
+              <Tooltip
-              restrictedZoneLabels.map((zoneLabel) => (
+                label={
-                <Tooltip
+                  <Box textAlign="center">
-                  label={
+                    Restricted: This isn't a {zoneLabel} item, but you can't
-                    <Box textAlign="center">
+                    wear {zoneLabel} items with it
-                      Restricted: This isn't a {zoneLabel} item, but you can't
+                  </Box>
-                      wear {zoneLabel} items with it
+                }
-                    </Box>
+                placement="top"
-                  }
+                openDelay={250}
-                  placement="top"
+              >
-                  openDelay={250}
+                <Badge
+                  key={zoneLabel}
+                  display="flex"
+                  flexDirection="row"
+                  alignItems="center"
                 >
-                  <Badge
+                  {getZoneShorthand(zoneLabel)}
-                    key={zoneLabel}
+                  <NotAllowedIcon marginLeft="1" />
-                    display="flex"
+                </Badge>
-                    flexDirection="row"
+              </Tooltip>
-                    alignItems="center"
+            ))}
-                  >
-                    {getZoneShorthand(zoneLabel)}
-                    <NotAllowedIcon marginLeft="1" />
-                  </Badge>
-                </Tooltip>
-              ))}
           </Wrap>
         </Box>
         <Box flex="0 0 auto">

src/app/WardrobePage/ItemsPanel.js

@@ -123,7 +123,6 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) {
                     isWorn={outfitState.wornItemIds.includes(item.id)}
                     isInOutfit={outfitState.allItemIds.includes(item.id)}
                     dispatchToOutfit={dispatchToOutfit}
-                    hideSimpleZones
                   />
                 </label>
               </CSSTransition>