Add basic styles to trades page

Still not accessible via links, just exists!

app/assets/stylesheets/application.css.sass

@@ -17,6 +17,7 @@
 @import items
 @import items/index
 @import items/show
+@import item_trades/index
 @import outfits/index
 @import outfits/new
 @import pets/bulk

app/assets/stylesheets/item_trades/_index.sass

@@ -0,0 +1,25 @@
+@import "../partials/item_header"
+
+body.item_trades-index
+	.item-header
+		+item-header
+
+	.item-page-subtitle
+		text-align: left
+
+	.trades-table
+		text-align: left
+		width: 100%
+		table-layout: fixed
+
+		th:nth-child(1), th:nth-child(2)
+			width: 15ch
+
+		.trade-list-names
+			list-style: none
+
+			li
+				display: inline
+
+				&:not(:last-child)::after
+					content: ", "

app/assets/stylesheets/items/_show.sass

@@ -1,42 +1,10 @@
 @import "../partials/clean/constants"
 @import "../partials/clean/mixins"
+@import "../partials/item_header"
 
 body.items-show
-  #item-header
+  .item-header
-    border-bottom: 1px solid $module-border-color
+    +item-header
-    margin-bottom: 1em
-    padding: 1em 0
-
-    display: grid
-    grid-template-areas: "img gap1" "img name" "img links" "img gap2"
-    align-items: center
-    justify-content: center
-    column-gap: 1em
-    row-gap: .5em
-
-    #item-thumbnail
-      grid-area: img
-
-      border: 1px solid $module-border-color
-      height: 80px
-      width: 80px
-
-    #item-name
-      grid-area: name
-
-      text-align: left
-      line-height: 100%
-      
-    #item-links
-      grid-area: links
-
-      text-align: left
-      a
-        font-size: 75%
-        margin-left: 1em
-    
-  #item-name
-    margin-bottom: 0
 
   #item-info-section
     display: grid

app/assets/stylesheets/partials/_item_header.sass

@@ -0,0 +1,33 @@
+=item-header
+  border-bottom: 1px solid $module-border-color
+  margin-bottom: 1em
+  padding: 1em 0
+
+  display: grid
+  grid-template-areas: "img gap1" "img name" "img links" "img gap2"
+  align-items: center
+  justify-content: center
+  column-gap: 1em
+  row-gap: .5em
+
+  #item-thumbnail
+    grid-area: img
+
+    border: 1px solid $module-border-color
+    height: 80px
+    width: 80px
+
+  #item-name
+    grid-area: name
+
+    text-align: left
+    line-height: 100%
+    margin-bottom: 0
+    
+  #item-links
+    grid-area: links
+
+    text-align: left
+    a
+      font-size: 75%
+      margin-left: 1em

app/views/item_trades/index.html.haml

@@ -1,10 +1,12 @@
 - title t(".title.#{@type}")
 - hide_title_header
 
+= render partial: "items/item_header", locals: {item: @item}
+
 %h2.item-page-subtitle= t(".title.#{@type}")
 
 - if @trades.present?
-	%table
+	%table.trades-table
 		%thead
 			%tr
 				%th= t(".table.headings.last_active")
@@ -21,9 +23,10 @@
 					%td= trade.user.name
 					%td
 						- if trade.lists.present?
-							%ul
+							%ul.trade-list-names
 								- trade.lists.each do |list|
-									%li= list.name
+									%li= link_to list.name, user_closet_hangers_path(trade.user,
+										anchor: "closet-list-#{list.id}")
 						- else
 							%span.not-in-a-list= t(".table.not_in_a_list")
 - else

app/views/items/_item_header.haml

@@ -0,0 +1,17 @@
+%header.item-header
+  = image_tag item.thumbnail_url, id: 'item-thumbnail'
+  %h2#item-name= item.name
+  %nav#item-links
+    = nc_icon_for(item)
+    - unless item.rarity.blank?
+      == #{t 'items.show.rarity'}: #{item.rarity_index} (#{item.rarity})
+    = link_to t('items.show.resources.jn_items'), jn_items_url_for(item)
+    - if item.nc_trade_value
+      = link_to t('items.show.resources.owls', value: item.nc_trade_value.value_text),
+        "https://www.neopets.com/~owls",
+        title: nc_trade_value_updated_at_text(item.nc_trade_value)
+    - unless item.nc?
+      = link_to t('items.show.resources.shop_wizard'), shop_wizard_url_for(item)
+      = link_to t('items.show.resources.super_shop_wizard'), super_shop_wizard_url_for(item)
+      = link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
+      = link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)

app/views/items/show.html.haml

@@ -1,23 +1,7 @@
 - title @item.name
 - canonical_path @item
 
-%header#item-header
+= render partial: "item_header", locals: {item: @item}
-  = image_tag @item.thumbnail_url, :id => 'item-thumbnail'
-  %h2#item-name= @item.name
-  %nav#item-links
-    = nc_icon_for(@item)
-    - unless @item.rarity.blank?
-      == #{t '.rarity'}: #{@item.rarity_index} (#{@item.rarity})
-    = link_to t('.resources.jn_items'), jn_items_url_for(@item)
-    - if @item.nc_trade_value
-      = link_to t('.resources.owls', value: @item.nc_trade_value.value_text),
-        "https://www.neopets.com/~owls",
-        title: nc_trade_value_updated_at_text(@item.nc_trade_value)
-    - unless @item.nc?
-      = link_to t('.resources.shop_wizard'), shop_wizard_url_for(@item)
-      = link_to t('.resources.super_shop_wizard'), super_shop_wizard_url_for(@item)
-      = link_to t('.resources.trading_post'), trading_post_url_for(@item)
-      = link_to t('.resources.auction_genie'), auction_genie_url_for(@item)
 
 %section#item-info-section
   #item-info