Add layers table to pet appearance edit page

Gonna add some more functionality here too, but right now we at least
have this!

app/assets/stylesheets/pet_states/edit.sass

@@ -1,5 +1,5 @@
-outfit-viewer
-	margin: 0 auto
+support-outfit-viewer
+	margin-block: 1em
 
 .fields li[data-type=radio-grid]
 	--num-columns: 3

app/assets/stylesheets/pet_states/support-outfit-viewer.sass

@@ -0,0 +1,31 @@
+@import "../partials/clean/constants"
+
+support-outfit-viewer
+	display: flex
+	gap: 2em
+	flex-wrap: wrap
+	justify-content: center
+
+	outfit-viewer
+		flex: 0 0 auto
+		border: 1px solid $module-border-color
+		border-radius: 1em
+
+	> table
+		flex: 0 0 auto
+		border-collapse: collapse
+		table-layout: fixed
+		border-radius: .5em
+
+		th, td
+			border: 1px solid $soft-border-color
+			font-size: .85em
+			padding: .25em .5em
+			text-align: left
+
+		> tbody
+			> tr > :nth-child(3) // links column
+				ul
+					list-style-type: none
+					display: flex
+					gap: .5em

app/controllers/pet_states_controller.rb

@@ -1,6 +1,7 @@
 class PetStatesController < ApplicationController
-	before_action :find_pet_state
 	before_action :support_staff_only
+	before_action :find_pet_state
+	before_action :preload_assets
 
 	def edit
 	end
@@ -22,6 +23,10 @@ class PetStatesController < ApplicationController
 		@reference_pet_type = @pet_type.reference
 	end
 
+	def preload_assets
+		SwfAsset.preload_manifests @pet_state.swf_assets
+	end
+
 	def pet_state_params
 		params.require(:pet_state).permit(:pose, :glitched)
 	end

app/helpers/outfits_helper.rb

@@ -65,11 +65,25 @@ module OutfitsHelper
     text_field_tag 'name', nil, options
   end
 
-  def outfit_viewer(outfit=nil, pet_state: nil, **html_options)
-    outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present?
-    raise "outfit_viewer must have outfit or pet state" if outfit.nil?
+  def outfit_viewer(...)
+    render partial: "outfit_viewer",
+      locals: parse_outfit_viewer_options(...)
+  end
 
-    render partial: "outfit_viewer", locals: {outfit:, html_options:}
+  def support_outfit_viewer(...)
+    render partial: "support_outfit_viewer",
+      locals: parse_outfit_viewer_options(...)
+  end
+
+  private
+
+  def parse_outfit_viewer_options(outfit=nil, pet_state: nil, **html_options)
+    outfit = Outfit.new(pet_state:) if outfit.nil? && pet_state.present?
+
+    if outfit.nil?
+      raise ArgumentError, "outfit viewer must have outfit or pet state"
+    end
+
+    {outfit:, html_options:}
   end
 end
-

app/models/swf_asset.rb

@@ -41,7 +41,7 @@ class SwfAsset < ApplicationRecord
     {
       swf: url,
       png: image_url,
-      svg: manifest_asset_urls[:svg],
+      svg: svg_url,
       canvas_library: manifest_asset_urls[:js],
       manifest: manifest_url,
     }
@@ -186,6 +186,18 @@ class SwfAsset < ApplicationRecord
     nil
   end
 
+  def image_url?
+    image_url.present?
+  end
+
+  def svg_url
+    manifest_asset_urls[:svg]
+  end
+
+  def svg_url?
+    svg_url.present?
+  end
+
   def canvas_movie?
     canvas_movie_library_url.present?
   end

app/views/pet_states/_support_outfit_viewer.html.haml

@@ -0,0 +1,25 @@
+= content_tag "support-outfit-viewer", **html_options do
+	= outfit_viewer outfit
+	%table
+		%thead
+			%tr
+				%th{scope: "col"} DTI ID
+				%th{scope: "col"} Zone
+				%th{scope: "col"} Links
+		%tbody
+			- outfit.visible_layers.each do |swf_asset|
+				%tr
+					%th{scope: "row"}
+						= swf_asset.id
+					%td
+						= swf_asset.zone.label
+						(##{swf_asset.zone.id})
+					%td
+						%ul
+							- if swf_asset.image_url?
+								%li= link_to "PNG", swf_asset.image_url, target: "_blank"
+							- if swf_asset.svg_url?
+								%li= link_to "SVG", swf_asset.svg_url, target: "_blank"
+							%li= link_to "SWF", swf_asset.url, target: "_blank"
+							- if swf_asset.manifest_url?
+								%li= link_to "Manifest", swf_asset.manifest_url, target: "_blank"

app/views/pet_states/edit.html.haml

@@ -6,16 +6,16 @@
 		= link_to "Rainbow Pool", pet_types_path
 	%li
 		= link_to @pet_type.possibly_new_color.human_name,
-		          pet_types_path(color: @pet_type.possibly_new_color.human_name)
+							pet_types_path(color: @pet_type.possibly_new_color.human_name)
 	%li{"data-relation-to-prev": "sibling"}
 		= link_to @pet_type.possibly_new_species.human_name,
-		          pet_types_path(species: @pet_type.possibly_new_species.human_name)
+							pet_types_path(species: @pet_type.possibly_new_species.human_name)
 	%li
 		= link_to "Appearances", @pet_type
 	%li
 		\##{@pet_state.id}
 
-= outfit_viewer pet_state: @pet_state
+= support_outfit_viewer pet_state: @pet_state
 
 = support_form_with model: [@pet_type, @pet_state] do |f|
 	= f.errors
@@ -47,7 +47,9 @@
 	= stylesheet_link_tag "application/breadcrumbs"
 	= stylesheet_link_tag "application/outfit-viewer"
 	= stylesheet_link_tag "application/support-form"
+	= stylesheet_link_tag "pet_states/support-outfit-viewer"
 	= page_stylesheet_link_tag "pet_states/edit"
 
 - content_for :javascripts do
 	= javascript_include_tag "outfit-viewer"
+	= javascript_include_tag "pet_states/support-outfit-viewer"