From 4a74e5e1a7f98e7b1b6e0cd598e5b3f3e4a0109e Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Tue, 21 May 2024 18:03:00 -0700
Subject: [PATCH] Use table layout for Item Getting Guide's NP items section

As part of this, I added a new `search_icon` helper, and a new
`button_link_to` helper, which both styles the link as a button and
accepts an `icon` parameter to make it easier to pass in an icon!
---
 app/assets/stylesheets/_layout.sass |  3 +++
 app/helpers/application_helper.rb   | 17 ++++++++++++++++-
 app/views/items/sources.html.haml   | 16 +++++++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass
index 982be028..173d1916 100644
--- a/app/assets/stylesheets/_layout.sass
+++ b/app/assets/stylesheets/_layout.sass
@@ -100,6 +100,9 @@ a.button, input[type=submit], button
   +awesome-button
   &.loud
     +loud-awesome-button
+  .icon
+    margin-right: .375em
+    vertical-align: middle
 
 ul.buttons
   margin-bottom: 1em
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 0db3a801..4fa2b261 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -21,6 +21,14 @@ 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 content
+    end
+  end
+
   def advertise_campaign_progress(campaign, &block)
     if campaign && campaign.advertised?
       campaign_progress(campaign, &block)
@@ -77,7 +85,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 +191,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)
diff --git a/app/views/items/sources.html.haml b/app/views/items/sources.html.haml
index df15f62f..c82826b1 100644
--- a/app/views/items/sources.html.haml
+++ b/app/views/items/sources.html.haml
@@ -41,7 +41,21 @@
 		[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|
+				%tr
+					%td.thumbnail-cell= item_thumbnail_for(item)
+					%td= item.name
+					%td.actions-cell
+						= 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