Add item page links to Item Getting Guide table rows

Just a simple one! Clicking the item image or name takes you to the DTI
item page for it now!

app/assets/stylesheets/_layout.sass

@@ -100,6 +100,9 @@ a.button, input[type=submit], button
   +awesome-button
   &.loud
     +loud-awesome-button
+  .icon
+    margin-right: .25em
+    vertical-align: middle
 
 ul.buttons
   margin-bottom: 1em

app/assets/stylesheets/items/sources.sass

@@ -1,14 +1,43 @@
-.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
 
-	.add-to-cart
+	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
+
+	.actions-cell
+		text-align: right
+		padding-left: 1em
 		font-size: 85%
+
+	.name-cell a
+		text-decoration: none
+		&:hover
+			text-decoration: underline
+
+	thead
+		background: $module-bg-color
+
+		th
+			text-align: left
+
+		.actions-cell button
+			/* Bootstrap's Purple 600 */
+			+awesome-button-color(#59359a)

app/helpers/application_helper.rb

@@ -21,6 +21,15 @@ module ApplicationHelper
     end
   end
 
+  def button_link_to(content, url, icon: nil, **options)
+    klass = options.fetch(:class, "") + " button"
+    link_to url, class: klass, **options do
+      concat icon
+      concat " "
+      concat content
+    end
+  end
+
   def advertise_campaign_progress(campaign, &block)
     if campaign && campaign.advertised?
       campaign_progress(campaign, &block)
@@ -69,6 +78,13 @@ module ApplicationHelper
     end
   end
 
+  # SVG icon source from Font Awesome 6! (https://creativecommons.org/licenses/by/4.0/)
+  CART_ICON_SVG_SOURCE = '<path fill="currentColor" d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path>'.html_safe
+  def cart_icon(alt: "Cart")
+    content_tag :svg, CART_ICON_SVG_SOURCE, alt:, class: "icon",
+      viewBox: "0 0 576 512", style: "height: 1em"
+  end
+
   def contact_email
     "matchu@openneo.net"
   end
@@ -77,7 +93,7 @@ module ApplicationHelper
   EXTERNAL_LINK_SVG_SOURCE = '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path></g>'.html_safe
   def external_link_icon
     content_tag :svg, EXTERNAL_LINK_SVG_SOURCE, alt: "(external link)",
-      viewBox: "0 0 24 24", style: "width: 1em; height: 1em"
+      class: "icon", viewBox: "0 0 24 24", style: "width: 1em; height: 1em"
   end
 
   def flashes
@@ -183,6 +199,13 @@ module ApplicationHelper
     stylesheet_link_tag src, options
   end
 
+  # SVG icon source from Chakra UI!
+  SEARCH_SVG_SOURCE = '<path fill="currentColor" d="M23.384,21.619,16.855,15.09a9.284,9.284,0,1,0-1.768,1.768l6.529,6.529a1.266,1.266,0,0,0,1.768,0A1.251,1.251,0,0,0,23.384,21.619ZM2.75,9.5a6.75,6.75,0,1,1,6.75,6.75A6.758,6.758,0,0,1,2.75,9.5Z"></path>'.html_safe
+  def search_icon
+    content_tag :svg, SEARCH_SVG_SOURCE, alt: "Search", class: "icon",
+      viewBox: "0 0 24 24", style: "width: 1em; height: 1em"
+  end
+
   def secondary_nav(&block)
     content_for :before_flashes,
       content_tag(:nav, :id => 'secondary-nav', &block)

app/helpers/items_helper.rb

@@ -1,8 +1,6 @@
 require "addressable/template"
 
 module ItemsHelper
-  JNItemsURLFormat = 'https://items.jellyneo.net/search/?name=%s&name_type=3'
-  
   module PetTypeImage
     Format = 'https://pets.neopets.com/cp/%s/%i/%i.png'
 
@@ -52,15 +50,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.
@@ -74,8 +80,11 @@ module ItemsHelper
     first_seen_at.strftime("%b %Y")
   end
 
+  JN_ITEMS_URL_TEMPLATE = Addressable::Template.new(
+    "https://items.jellyneo.net/search/?name_type=3{&name}"
+  )
   def jn_items_url_for(item)
-    sprintf(JNItemsURLFormat, CGI::escape(item.name))
+    JN_ITEMS_URL_TEMPLATE.expand(name: item.name).to_s
   end
 
   IMPRESS_2020_ITEM_URL_TEMPLATE = Addressable::Template.new(
@@ -85,20 +94,32 @@ module ItemsHelper
     IMPRESS_2020_ITEM_URL_TEMPLATE.expand(id: item.id).to_s
   end
   
+  SHOP_WIZARD_URL_TEMPLATE = Addressable::Template.new(
+    "https://www.neopets.com/shops/wizard.phtml{?string}"
+  )
   def shop_wizard_url_for(item)
-    "https://www.neopets.com/market.phtml?type=wizard&string=#{CGI::escape item.name}"
+    SHOP_WIZARD_URL_TEMPLATE.expand(string: item.name).to_s
   end
   
+  SUPER_SHOP_WIZARD_URL_TEMPLATE = Addressable::Template.new(
+    "https://www.neopets.com/portal/supershopwiz.phtml{?string}"
+  )
   def super_shop_wizard_url_for(item)
-    "https://www.neopets.com/portal/supershopwiz.phtml?string=#{CGI::escape item.name}"
+    SUPER_SHOP_WIZARD_URL_TEMPLATE.expand(string: item.name).to_s
   end
   
+  TRADING_POST_URL_TEMPLATE = Addressable::Template.new(
+    "https://www.neopets.com/island/tradingpost.phtml?type=browse&criteria=item_exact{&search_string}"
+  )
   def trading_post_url_for(item)
-    "https://www.neopets.com/island/tradingpost.phtml?type=browse&criteria=item_exact&search_string=#{CGI::escape item.name}"
+    TRADING_POST_URL_TEMPLATE.expand(search_string: item.name).to_s
   end
   
+  AUCTION_GENIE_URL_TEMPLATE = Addressable::Template.new(
+    "https://www.neopets.com/genie.phtml?type=process_genie&criteria=exact{&auctiongenie}"
+  )
   def auction_genie_url_for(item)
-    "https://www.neopets.com/genie.phtml?type=process_genie&criteria=exact&auctiongenie=#{CGI::escape item.name}"
+    AUCTION_GENIE_URL_TEMPLATE.expand(auctiongenie: item.name).to_s
   end
   
   def format_contribution_count(count)

app/models/item.rb

@@ -176,7 +176,7 @@ class Item < ApplicationRecord
   end
 
   def current_nc_price
-    nc_mall_record.current_price
+    nc_mall_record&.current_price
   end
 
   def restricted_zones(options={})

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/_item_list_row.html.haml

@@ -0,0 +1,4 @@
+%tr
+	%td.thumbnail-cell= link_to item_thumbnail_for(item), item, target: "_blank"
+	%td.name-cell= link_to item.name, item, target: "_blank"
+	%td.actions-cell= yield

app/views/items/sources.html.haml

@@ -10,12 +10,24 @@
 
 		[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.actions-cell
+						%button{onclick: "alert('Todo!')"}
+							= cart_icon alt: ""
+							Buy all in NC Mall
+		%tbody
+			- @nc_mall_items.each do |item|
+				= render "item_list_row", item: do
+					%button{onclick: "alert('Todo!')"}
+						= cart_icon alt: ""
+						Buy (#{item.current_nc_price} NC)
 
 - if @np_items.present?
 	%h2 Neopoint items
@@ -28,7 +40,18 @@
 		[wiz]: https://www.neopets.com/shops/wizard.phtml
 		[tp]: https://www.neopets.com/island/tradingpost.phtml?type=browse
 		[ag]: https://www.neopets.com/genie.phtml
-	= render @np_items
+	%table.item-list
+		%thead
+			%td
+			%th{colspan: 2}
+				Total: #{pluralize @np_items.size, "item"}
+		%tbody
+			- @np_items.each do |item|
+				= render "item_list_row", item: do
+					= button_link_to "Shops", shop_wizard_url_for(item),
+						target: "_blank", icon: search_icon
+					= button_link_to "Trades", trading_post_url_for(item),
+						target: "_blank", icon: search_icon
 
 - if @pb_items.present?
 	%h2 Paintbrush items