[WV2] Add badges to items

app/assets/stylesheets/application/item-badges.css

@@ -0,0 +1,32 @@
+/*
+ * Shared item badge styles for NC/NP/PB badges
+ * Used across item pages, wardrobe, search results, etc.
+ *
+ * These colors are from DTI 2020, based on Chakra UI's color palette.
+ */
+
+.item-badge {
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  text-decoration: none;
+  font-size: .75rem;
+  font-weight: bold;
+  line-height: 1;
+
+  background: #E2E8F0;
+  color: #1A202C;
+
+  &[data-item-kind="nc"] {
+    background: #E9D8FD;
+    color: #44337A;
+  }
+
+  &[data-item-kind="pb"] {
+    background: #FEEBC8;
+    color: #7B341E;
+  }
+
+  .icon {
+    vertical-align: middle;
+  }
+}

app/assets/stylesheets/outfits/new_v2.css

@@ -1,3 +1,5 @@
+@import "../application/item-badges.css";
+
 body.wardrobe-v2 {
   margin: 0;
   padding: 0;
@@ -199,18 +201,66 @@ body.wardrobe-v2 {
 .worn-items {
   margin-top: 2rem;
 
-  ul {
+  .items-list {
     list-style: none;
     padding: 0;
     margin: 0.5rem 0;
   }
 
-  li {
+  .item-card {
-    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
     background: #f9f9f9;
     margin-bottom: 0.5rem;
-    border-radius: 4px;
+    border-radius: 8px;
     color: #333;
+    transition: background 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      background: #f0f0f0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .item-thumbnail {
+    flex-shrink: 0;
+    width: 50px;
+    height: 50px;
+    border-radius: 6px;
+    overflow: hidden;
+    background: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      display: block;
+    }
+  }
+
+  .item-info {
+    flex: 1;
+    min-width: 0; /* Allow text to truncate */
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .item-name {
+    font-weight: 500;
+    color: #2D3748;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .item-badges {
+    display: flex;
+    gap: 0.375rem;
+    flex-wrap: wrap;
   }
 }
 

app/assets/stylesheets/partials/_item_header.sass

@@ -1,5 +1,6 @@
 @import "../partials/clean/constants"
 @import "../partials/clean/mixins"
+@import "../application/item-badges"
 
 =item-header
   border-bottom: 1px solid $module-border-color
@@ -27,7 +28,7 @@
       text-align: left
       line-height: 100%
       margin-bottom: 0
-      
+
     .item-links
       grid-area: links
 
@@ -41,32 +42,6 @@
       abbr
         cursor: help
 
-      .item-kind, .first-seen-at
-        padding: .25em .5em
-        border-radius: .25em
-
-        text-decoration: none
-        font-weight: bold
-        line-height: 1
-
-        background: #E2E8F0
-        color: #1A202C
-
-        .icon
-          vertical-align: middle
-      
-      .item-kind
-        // These colors are copied from DTI 2020, for initial consistency!
-        // They're based on the Chakra UI colors, which I think are in turn the
-        // Bootstrap colors? Or something?
-        // NOTE: For the data-type=np case, we use the default gray colors.
-        &[data-type=nc]
-          background: #E9D8FD
-          color: #44337A
-        &[data-type=pb]
-          background: #FEEBC8
-          color: #7B341E
-
     .support-form
       grid-area: support
       font-size: 85%
@@ -100,21 +75,21 @@
       font-size: 150%
       font-weight: bold
       margin-bottom: .75em
-    
+
     .closet-hangers-ownership-groups
       +clearfix
       margin-bottom: .5em
-    
+
       div
         float: left
         margin: 0 5%
         text-align: left
         width: 40%
-        
+
         li
           list-style: none
           word-wrap: break-word
-          
+
           label.unlisted
             font-style: italic
 

app/views/items/_item_header.html.haml

@@ -9,26 +9,8 @@
     = image_tag item.thumbnail_url, class: 'item-thumbnail'
     %h2.item-name= item.name
     %nav.item-links
-      - if item.currently_in_mall?
+      = render "items/badges/kind", item: item
-        = link_to "https://ncmall.neopets.com/", class: "item-kind", data: {type: "nc"},
+      = render "items/badges/first_seen", item: item
-          title: "Currently in NC Mall!", target: "_blank" do
-          = cart_icon alt: "Buy"
-          #{item.current_nc_price} NC
-      - elsif item.nc?
-        %abbr.item-kind{'data-type' => 'nc', title: t('items.show.item_kinds.nc.description')}
-          = t('items.show.item_kinds.nc.label')
-      - elsif item.pb?
-        %abbr.item-kind{'data-type' => 'pb', title: t('items.show.item_kinds.pb.description')}
-          = t('items.show.item_kinds.pb.label')
-      - else
-        %abbr.item-kind{'data-type' => 'np', title: t('items.show.item_kinds.np.description')}
-          = t('items.show.item_kinds.np.label')
-
-      - if item.created_at?
-        %time.first-seen-at{
-          datetime: item.created_at.iso8601,
-          title: "First seen on #{item.created_at.to_date.to_fs(:long)}",
-        }= time_with_only_month_if_old item.created_at
 
       = link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
       = link_to t('items.show.resources.impress_2020'), impress_2020_url_for(item)

app/views/items/badges/_first_seen.html.haml

@@ -0,0 +1,13 @@
+-# Renders a "first seen" timestamp badge for an item
+-#
+-# Usage:
+-#   = render "items/badges/first_seen", item: @item
+-#
+-# Shows when the item was first added to the database.
+-# Only renders if the item has a created_at timestamp.
+
+- if item.created_at?
+  %time.item-badge.first-seen-at{
+    datetime: item.created_at.iso8601,
+    title: "First seen on #{item.created_at.to_date.to_fs(:long)}",
+  }= time_with_only_month_if_old item.created_at

app/views/items/badges/_kind.html.haml

@@ -0,0 +1,25 @@
+-# Renders an item kind badge (NC/NP/PB)
+-#
+-# Usage:
+-#   = render "items/item_kind_badge", item: @item
+-#
+-# The badge shows:
+-# - For NC Mall items: clickable link with price
+-# - For NC items: purple "NC" badge
+-# - For PB items: orange "PB" badge
+-# - For NP items: gray "NP" badge
+
+- if item.currently_in_mall?
+  = link_to "https://ncmall.neopets.com/", class: "item-badge", data: {item_kind: "nc"},
+    title: "Currently in NC Mall!", target: "_blank" do
+    = cart_icon alt: "Buy"
+    #{item.current_nc_price} NC
+- elsif item.nc?
+  %abbr.item-badge{data: {item_kind: "nc"}, title: t('items.show.item_kinds.nc.description')}
+    = t('items.show.item_kinds.nc.label')
+- elsif item.pb?
+  %abbr.item-badge{data: {item_kind: "pb"}, title: t('items.show.item_kinds.pb.description')}
+    = t('items.show.item_kinds.pb.label')
+- else
+  %abbr.item-badge{data: {item_kind: "np"}, title: t('items.show.item_kinds.np.description')}
+    = t('items.show.item_kinds.np.label')

app/views/outfits/new_v2.html.haml

@@ -51,6 +51,13 @@
         - if @outfit.worn_items.any?
           .worn-items
             %h2 Items (#{@outfit.worn_items.size})
-            %ul
+            %ul.items-list
               - @outfit.worn_items.each do |item|
-                %li= item.name
+                %li.item-card
+                  .item-thumbnail
+                    = image_tag item.thumbnail_url, alt: item.name, loading: "lazy"
+                  .item-info
+                    .item-name= item.name
+                    .item-badges
+                      = render "items/badges/kind", item: item
+                      = render "items/badges/first_seen", item: item