Add filter form to alt styles page

Oh wow, alt styles are getting some real work! I'll improve both the
user-facing and Support-facing tooling, to better handle the complexity.

app/assets/stylesheets/alt_styles/_index.sass

@@ -1,18 +0,0 @@
-body.alt_styles-index
-	.alt-styles-header
-		margin-top: 1em
-		margin-bottom: .5em
-
-	.alt-styles-list
-		list-style: none
-		display: flex
-		flex-wrap: wrap
-		gap: 1.5em
-
-	.alt-style
-		text-align: center
-		width: 80px
-
-	.alt-style-thumbnail
-		width: 80px
-		height: 80px

app/assets/stylesheets/alt_styles/index.sass

@@ -0,0 +1,29 @@
+.filters
+	fieldset
+		display: flex
+		flex-direction: row
+		align-items: center
+		justify-content: center
+		gap: .5em
+
+	legend
+		display: contents
+		font-weight: bold
+
+.alt-styles-header
+	margin-top: 1em
+	margin-bottom: .5em
+
+.alt-styles-list
+	list-style: none
+	display: flex
+	flex-wrap: wrap
+	gap: 1.5em
+
+.alt-style
+	text-align: center
+	width: 80px
+
+.alt-style-thumbnail
+	width: 80px
+	height: 80px

app/assets/stylesheets/application.css.sass

@@ -8,7 +8,6 @@
 
 @import partials/jquery.jgrowl
 
-@import alt_styles/index
 @import closet_hangers/index
 @import closet_lists/form
 @import neopets_page_import_tasks/new

app/controllers/alt_styles_controller.rb

@@ -3,10 +3,11 @@ class AltStylesController < ApplicationController
 		@alt_styles = AltStyle.includes(:species, :color, :swf_assets).
 			order(:species_id, :color_id)
 
-		if params[:species_id]
+		@color = find_color
-			@species = Species.find(params[:species_id])
+		@species = find_species
-			@alt_styles = @alt_styles.merge(@species.alt_styles)
+
-		end
+		@alt_styles.merge!(@color.alt_styles) if @color
+		@alt_styles.merge!(@species.alt_styles) if @species
 
 		# We're going to link to the HTML5 image URL, so make sure we have all the
 		# manifests ready!
@@ -30,4 +31,20 @@ class AltStylesController < ApplicationController
 			}
 		end
 	end
+
+	protected
+
+	def find_color
+		if params[:color]
+			Color.find_by(name: params[:color])
+		end
+	end
+
+	def find_species
+		if params[:species_id]
+			Species.find_by(id: params[:species_id])
+		elsif params[:species]
+			Species.find_by(name: params[:species])
+		end
+	end
 end

app/models/color.rb

@@ -1,5 +1,6 @@
 class Color < ApplicationRecord
   has_many :pet_types
+  has_many :alt_styles
   
   scope :alphabetical, -> { order(:name) }
   scope :basic, -> { where(basic: true) }

app/views/alt_styles/index.html.haml

@@ -1,4 +1,5 @@
 - title "Styling Studio"
+- use_responsive_design
 
 %p
 	Here's all the new NC Pet Styles we have! They're available in the app too,
@@ -13,6 +14,18 @@
 	wearable items, there's not a great way for us to get style tokens onto
 	tradelists… this may change someday, but probably not soon, sorry!
 
+= form_with url: alt_styles_path, method: :get, class: "filters" do |f|
+	%fieldset
+		%legend Filter by:
+		= f.select :color, Color.order(:name).map(&:human_name),
+		           selected: @color&.human_name, include_blank: "Color…"
+		= f.select :species, Species.order(:name).map(&:human_name),
+		           selected: @species&.human_name, include_blank: "Species…"
+		= f.submit "Go"
+
 - @alt_styles.group_by(&:species).each do |species, species_styles|
 	%h2.alt-styles-header= species.human_name
 	%ul.alt-styles-list= render partial: "alt_style", collection: species_styles
+
+- content_for :stylesheets do
+	= page_stylesheet_link_tag "alt_styles/index"