Use table layout for Item Getting Guide item list

This helps us be more efficient with our use of space, keep the CTAs well
aligned, show a clear total, and set up how we might do CTAs for more complex
cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!

app/assets/stylesheets/items/sources.sass

@@ -1,14 +1,41 @@
-.nc-mall-items
+@import "../partials/clean/constants"
-	list-style: none
+@import "../partials/clean/mixins"
-	display: flex
-	flex-wrap: wrap
-	gap: 1em
 
-	li
+.item-list
-		display: flex
+	border-collapse: collapse
-		flex-direction: column
+	border: 1px solid $soft-border-color
-		align-items: center
+
-		width: auto
+	td, th
+		border-top: 1px solid $soft-border-color
+		border-bottom: 1px solid $soft-border-color
+		padding: .25em
+		vertical-align: middle
+
+		&:first-child
+			padding-left: .5em
+
+		&:last-child
+			padding-right: .5em
+
+	.thumbnail-cell
+		img
+			display: block
+			width: 2.5em
+			height: 2.5em
+
+	.add-to-cart-cell
+		text-align: right
+		padding-left: 1em
+
+	thead
+		background: $module-bg-color
+
+		th
+			text-align: left
+
+		.add-to-cart
+			/* Bootstrap's Purple 600 */
+			+awesome-button-color(#59359a)
 
 	.add-to-cart
 		font-size: 85%

app/helpers/items_helper.rb

@@ -52,15 +52,23 @@ module ItemsHelper
     content_tag :div, content, :class => 'closeted-icons'
   end
   
+  # NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
   def nc_icon
     image_tag 'nc.png', :title => t('items.item.nc.description'),
               :alt => t('items.item.nc.abbr'), :class => 'nc-icon'
   end
 
+  # NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
   def nc_icon_for(item)
     nc_icon if item.nc?
   end
 
+  # NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
+  def item_thumbnail_for(item)
+    image_tag item.thumbnail_url, alt: "Thumbnail for #{item.name}",
+      title: item.description, loading: "lazy"
+  end
+
   def time_with_only_month_if_old(first_seen_at)
     # For this month and the previous month, show the full date, so people can
     # understand *exactly* how recent it was.

app/views/items/_item_link.html.haml

@@ -1,6 +1,5 @@
 -# NOTE: Changing this requires bumping the cache at `_closet_list.html.haml`!
 = link_to item_path(item) do
-  = image_tag item.thumbnail_url, alt: "Thumbnail for #{item.name}",
+  = item_thumbnail_for(item)
-    title: item.description, loading: "lazy"
   %span.name= item.name
   = nc_icon_for(item)

app/views/items/sources.html.haml

@@ -10,12 +10,25 @@
 
 		[nc]: https://secure.nc.neopets.com/get-neocash
 		[gc]: https://secure.nc.neopets.com/nickcash-cards
-	%ul.nc-mall-items
+	%table.item-list
-		- @nc_mall_items.each do |item|
+		%thead
-			%li
+			%tr
-				= render item
+				%td
-				%button.add-to-cart{onclick: "alert('Todo!')"}
+				%th
-					Buy (#{item.current_nc_price} NC)
+					Total: #{@nc_mall_items.map(&:current_nc_price).sum} NC
+					(#{pluralize @nc_mall_items.size, "item"})
+						
+					%td.add-to-cart-cell
+						%button.add-to-cart{onclick: "alert('Todo!')"}
+							Buy all in NC Mall
+		%tbody
+			- @nc_mall_items.each do |item|
+				%tr
+					%td.thumbnail-cell= item_thumbnail_for(item)
+					%td= item.name
+					%td.add-to-cart-cell
+						%button.add-to-cart{onclick: "alert('Todo!')"}
+							Buy (#{item.current_nc_price} NC)
 
 - if @np_items.present?
 	%h2 Neopoint items