Paginate Alt Styles, sort by most recent first-seen date

app/assets/stylesheets/application/rainbow-pool.sass

@@ -51,3 +51,9 @@
 		margin: 0 auto
 		position: relative
 		z-index: 1
+
+.rainbow-pool-pagination
+	margin-block: .5em
+	display: flex
+	justify-content: center
+	gap: 1em

app/assets/stylesheets/pet_types/index.sass

@@ -1,3 +0,0 @@
-[role=navigation]
-	margin-block: .5em
-	text-align: center

app/controllers/alt_styles_controller.rb

@@ -2,8 +2,7 @@ class AltStylesController < ApplicationController
 	before_action :support_staff_only, except: [:index]
 
 	def index
-		@all_alt_styles = AltStyle.includes(:species, :color).
-			order(:species_id, :color_id)
+		@all_alt_styles = AltStyle.includes(:species, :color)
 
 		@all_colors = @all_alt_styles.map(&:color).uniq.sort_by(&:name)
 		@all_species = @all_alt_styles.map(&:species).uniq.sort_by(&:name)
@@ -16,7 +15,9 @@ class AltStylesController < ApplicationController
 		@color = find_color
 		@species = find_species
 
-		@alt_styles = @all_alt_styles.includes(:swf_assets)
+		@alt_styles = @all_alt_styles.includes(:swf_assets).
+			by_creation_date.order(:color_id, :species_id, :series_name).
+			paginate(page: params[:page], per_page: 30)
 		@alt_styles.where!(series_name: @series_name) if @series_name.present?
 		@alt_styles.merge!(@color.alt_styles) if @color
 		@alt_styles.merge!(@species.alt_styles) if @species

app/models/alt_style.rb

@@ -20,6 +20,9 @@ class AltStyle < ApplicationRecord
     species = Species.find_by_name!(species_name)
     where(series_name:, color_id: color.id, species_id: species.id)
   }
+  scope :by_creation_date, -> {
+    order("DATE(created_at) DESC")
+  }
 
   def name
     I18n.translate('pet_types.human_name', color_human_name: color.human_name,

app/views/alt_styles/index.html.haml

@@ -26,10 +26,11 @@
 		           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.rainbow-pool-list
-		= render partial: "alt_style", collection: species_styles
+= will_paginate @alt_styles, class: "rainbow-pool-pagination"
+
+%ul.rainbow-pool-list= render @alt_styles
+
+= will_paginate @alt_styles, class: "rainbow-pool-pagination"
 
 - content_for :stylesheets do
 	= stylesheet_link_tag "application/rainbow-pool"

app/views/pet_types/index.html.haml

@@ -8,12 +8,11 @@
         = form.select :species, @species_names, selected: @selected_species&.human_name, include_blank: "Species…"
         = form.submit "Go"
 
-= will_paginate @pet_types
+= will_paginate @pet_types, class: "rainbow-pool-pagination"
 
 %ui.rainbow-pool-list= render @pet_types
 
-= will_paginate @pet_types
+= will_paginate @pet_types, class: "rainbow-pool-pagination"
 
 - content_for :stylesheets do
     = stylesheet_link_tag "application/rainbow-pool"
-    = page_stylesheet_link_tag "pet_types/index"