Fix styles in support form when field is errored

Ah right, `> label` doesn't work with how Rails will wrap broken labels
and inputs each in a `.field_with_errors` element. Fixed, and added
some basic coloring!

app/assets/stylesheets/application/support-form.sass

@@ -1,30 +1,70 @@
+@import "../partials/clean/constants"
+
 .support-form
 	display: flex
 	flex-direction: column
 	gap: 1em
 	align-items: flex-start
 
-	fieldset
+	.fields
+		list-style-type: none
+		display: flex
+		flex-direction: column
+		gap: .75em
 		width: 100%
-		display: grid
-		grid-template-columns: auto 1fr
-		align-items: center
-		gap: 1em
 
-		> *:nth-child(2n)
-			width: 40rch
-			max-width: 100%
-			box-sizing: border-box
+		> li
+			display: flex
+			flex-direction: column
+			gap: .25em
+			max-width: 60ch
 
-		input[type=url]
-			font-size: .85em
+			> label, > .field_with_errors label
+				display: block
+				font-weight: bold
 
-		> label, .field-name
-			font-weight: bold
-			&:has(+ .radio-field)
-				align-self: start
+			.field_with_errors
+				> label
+					color: $error-color
 
-	.thumbnail-field
+				input[type=text], input[type=url]
+					border-color: $error-border-color
+					color: $error-color
+
+			&[data-type=radio]
+				ul
+					list-style-type: none
+
+			&[data-type=radio-grid] // Set the `--num-columns` property to configure!
+				max-width: none
+
+				ul
+					list-style-type: none
+					display: grid
+					grid-template-columns: repeat(var(--num-columns, 1), 1fr)
+					gap: .25em
+
+				label
+					display: flex
+					align-items: center
+					gap: .5em
+					padding: .5em 1em
+					border: 1px solid $soft-border-color
+					border-radius: 1em
+
+					input
+						margin: 0
+
+					&:has(:checked)
+						background: $module-bg-color
+						border-color: $module-border-color
+
+	input[type=text], input[type=url]
+		width: 100%
+		min-width: 10ch
+		box-sizing: border-box
+
+	.thumbnail-input
 		display: flex
 		align-items: center
 		gap: .25em
@@ -33,14 +73,14 @@
 			width: 40px
 			height: 40px
 
-		input
-			flex: 1 0 20ch
-
-	.radio-field
+	fieldset
 		display: flex
 		flex-direction: column
 		gap: .25em
 
+		legend
+			font-weight: bold
+
 	.field_with_errors
 		display: contents
 

app/assets/stylesheets/pet_states/edit.sass

@@ -1,25 +1,5 @@
-@import "../partials/clean/constants"
-
 outfit-viewer
 	margin: 0 auto
 
-.pose-options
-	list-style-type: none
-	display: grid
-	grid-template-columns: 1fr 1fr 1fr
-	gap: .25em
-
-	label
-		display: flex
-		align-items: center
-		gap: .5em
-		padding: .5em 1em
-		border: 1px solid $soft-border-color
-		border-radius: 1em
-
-		input
-			margin: 0
-
-		&:has(:checked)
-			background: $module-bg-color
-			border-color: $module-border-color
+.fields li[data-type=radio-grid]
+	--num-columns: 3

app/controllers/items_controller.rb

@@ -124,7 +124,7 @@ class ItemsController < ApplicationController
       flash[:notice] = "\"#{@item.name}\" successfully saved!"
       redirect_to @item
     else
-      render action: "edit", layout: "application"
+      render action: "edit", layout: "application", status: :bad_request
     end
   end
 

app/helpers/support_form_helper.rb

@@ -0,0 +1,65 @@
+module SupportFormHelper
+	class SupportFormBuilder < ActionView::Helpers::FormBuilder
+		attr_reader :template
+		delegate :concat, :content_tag, :image_tag, to: :template, private: true
+
+		def errors
+			return nil if object.errors.empty?
+
+			error_list = content_tag(:ul) do
+				object.errors.each do |error|
+					concat content_tag(:li, error.full_message)
+				end
+			end
+
+			content_tag(:p) do
+				concat "Could not save:"
+				concat error_list
+			end
+		end
+
+		def fields(&block)
+			content_tag(:ul, class: "fields", &block)
+		end
+
+		def field(**kwargs, &block)
+			content_tag(:li, **kwargs, &block)
+		end
+
+		def radio_fieldset(legend, **kwargs, &block)
+			kwargs.reverse_merge!("data-type": "radio")
+			field(**kwargs) do
+				content_tag(:fieldset) do
+					concat content_tag(:legend, legend)
+					concat content_tag(:ul, &block)
+				end
+			end
+		end
+
+		def radio_field(**kwargs, &block)
+			content_tag(:li) do
+				content_tag(:label, **kwargs, &block)
+			end
+		end
+
+		def radio_grid_fieldset(*args, &block)
+			radio_fieldset(*args, "data-type": "radio-grid", &block)
+		end
+
+		def thumbnail_input(method)
+			url = object.send(method)
+			content_tag(:div, class: "thumbnail-input") do
+				concat image_tag(url, alt: "Thumbnail") if url.present?
+				concat url_field(method)
+			end
+		end
+	end
+
+	def support_form_with(**kwargs, &block)
+		kwargs.merge!(
+			builder: SupportFormBuilder,
+			class: ["support-form", kwargs[:class]],
+		)
+		form_with(**kwargs, &block)
+	end
+end

app/models/alt_style.rb

@@ -37,7 +37,7 @@ class AltStyle < ApplicationRecord
   # `fits:<New?>-faerie-draik` intentionally will not work, and the canonical
   # filter name will be `fits:alt-style-IDNUMBER`, instead.
   def series_name
-    real_series_name || "<New?>"
+    real_series_name || AltStyle.placeholder_name
   end
 
   def real_series_name=(new_series_name)
@@ -97,6 +97,10 @@ class AltStyle < ApplicationRecord
     thumbnail_url != DEFAULT_THUMBNAIL_URL
   end
 
+  def self.placeholder_name
+    "<New?>"
+  end
+
   # For convenience in the console!
   def self.find_by_name(color_name, species_name)
     color = Color.find_by_name(color_name)

app/views/alt_styles/edit.html.haml

@@ -13,21 +13,19 @@
 
 = image_tag @alt_style.preview_image_url, class: "alt-style-preview"
 
-= form_with model: @alt_style, class: "support-form" do |f|
-	- if @alt_style.errors.any?
-		%p
-			Could not save:
-			%ul.errors
-				- @alt_style.errors.each do |error|
-					%li= error.full_message
-	%fieldset
-		= f.label :real_series_name, "Series"
-		= f.text_field :real_series_name, autofocus: !@alt_style.real_series_name?
-		= f.label :thumbnail_url, "Thumbnail"
-		.thumbnail-field
-			- if @alt_style.thumbnail_url?
-				= image_tag @alt_style.thumbnail_url
-			= f.url_field :thumbnail_url
+= support_form_with model: @alt_style, class: "support-form" do |f|
+	= f.errors
+
+	= f.fields do
+		= f.field do
+			= f.label :real_series_name, "Series"
+			= f.text_field :real_series_name, autofocus: !@alt_style.real_series_name?,
+				placeholder: AltStyle.placeholder_name
+
+		= f.field do
+			= f.label :thumbnail_url, "Thumbnail"
+			= f.thumbnail_input :thumbnail_url
+
 	.actions
 		= f.submit "Save changes"
 		%label{title: "If checked, takes you to the next unlabeled pet style, if any. Useful for labeling in bulk!"}

app/views/items/edit.html.haml

@@ -8,50 +8,49 @@
 	you change something, but it doesn't match what we're seeing on Neopets.com,
 	it will probably be reverted automatically when someone models it.
 
-= form_with model: @item, class: "support-form" do |f|
-	- if @item.errors.any?
-		%p
-			Could not save:
-			%ul.errors
-				- @item.errors.each do |error|
-					%li= error.full_message
-	%fieldset
-		= f.label :name
-		= f.text_field :name
-		= f.label :thumbnail_url, "Thumbnail"
-		.thumbnail-field
-			- if @item.thumbnail_url?
-				= image_tag @item.thumbnail_url
-			= f.url_field :thumbnail_url
-		= f.label :description
-		= f.text_field :description
-		.field-name Item kind
-		.radio-field
-			%label{title: "NC items generally have a rarity value of 500.\nPaintbrush items generally contain a special message in the description."}
+= support_form_with model: @item, class: "support-form" do |f|
+	= f.errors
+
+	= f.fields do
+		= f.field do
+			= f.label :name
+			= f.text_field :name
+
+		= f.field do
+			= f.label :thumbnail_url, "Thumbnail"
+			= f.thumbnail_input :thumbnail_url
+
+		= f.field do
+			= f.label :description
+			= f.text_field :description
+
+		= f.radio_fieldset "Item kind" do
+			= f.radio_field title: "NC items generally have a rarity value of 500.\nPaintbrush items generally contain a special message in the description." do
 				= f.radio_button :is_manually_nc, false
 				Automatic: Based on rarity and description
-			%label{title: "Use this when Neopets releases an NC item, but labels the rarity as something other than 500, usually by mistake."}
+			= f.radio_field title: "Use this when Neopets releases an NC item, but labels the rarity as something other than 500, usually by mistake." do
 				= f.radio_button :is_manually_nc, true
 				Manually NC: From the NC Mall, but not r500
-		.field-name Modeling status
-		.radio-field
-			%label{title: "If we fit two or more species of a standard color, assume we also fit the other standard-color pets that were released at the time.\nRepeat for special colors like Baby and Maraquan."}
+
+		= f.radio_fieldset "Modeling status" do
+			= f.radio_field title: "If we fit two or more species of a standard color, assume we also fit the other standard-color pets that were released at the time.\nRepeat for special colors like Baby and Maraquan." do
 				= f.radio_button :modeling_status_hint, ""
 				Automatic: Fits 2+ species → Should fit all
-			%label{title: "Use this when e.g. there simply is no Acara version of the item."}
+			= f.radio_field title: "Use this when e.g. there simply is no Acara version of the item." do
 				= f.radio_button :modeling_status_hint, "done"
 				Done: Neopets.com is missing some models
-			%label{title: "Use this when e.g. this fits the Blue Vandagyre even though it's a Maraquan item.\nBehaves identically to Done, but helps us remember why we did this!"}
+			= f.radio_field title: "Use this when e.g. this fits the Blue Vandagyre even though it's a Maraquan item.\nBehaves identically to Done, but helps us remember why we did this!" do
 				= f.radio_button :modeling_status_hint, "glitchy"
 				Glitchy: Neopets.com has <em>too many</em> models
-		.field-name Body fit
-		.radio-field
-			%label{title: "When an asset in a zone like Background is modeled, assume it fits all pets the same, and assign it body ID \#0.\nOtherwise, assume it fits only the kind of pet it was modeled on."}
+
+		= f.radio_fieldset "Body fit" do
+			= f.radio_field title: "When an asset in a zone like Background is modeled, assume it fits all pets the same, and assign it body ID \#0.\nOtherwise, assume it fits only the kind of pet it was modeled on." do
 				= f.radio_button :explicitly_body_specific, false
 				Automatic: Some zones fit all species
-			%label{title: "Use this when an item uses a generally-universal zone like Static, but is body-specific regardless. \"Encased in Ice\" is one example.\nThis prevents these uncommon items from breaking every time they're modeled."}
+			= f.radio_field title: "Use this when an item uses a generally-universal zone like Static, but is body-specific regardless. \"Encased in Ice\" is one example.\nThis prevents these uncommon items from breaking every time they're modeled." do
 				= f.radio_button :explicitly_body_specific, true
 				Body-specific: Fits all species differently
+
 	.actions
 		= f.submit "Save changes"
 

app/views/pet_states/edit.html.haml

@@ -17,31 +17,28 @@
 
 = outfit_viewer pet_state: @pet_state
 
-= form_with model: [@pet_type, @pet_state] do |f|
-	- if @pet_state.errors.any?
-		%p
-			Could not save:
-			%ul.errors
-				- @pet_state.errors.each do |error|
-					%li= error.full_message
-	%dl
-		%dt Pose
-		%dd
-			%ul.pose-options
-				- pose_options.each do |pose|
-					%li
-						%label
-							= f.radio_button :pose, pose
-							= pose_name pose
-		%dt Glitched?
-		%dd
+= support_form_with model: [@pet_type, @pet_state] do |f|
+	= f.errors
+
+	= f.fields do
+		= f.radio_grid_fieldset "Pose" do
+			- pose_options.each do |pose|
+				= f.radio_field do
+					= f.radio_button :pose, pose
+					= pose_name(pose)
+
+		= f.field do
+			= f.label :glitched, "Gliched?"
 			= f.select :glitched, [["✅ Not marked as Glitched", false],
-			["👾 Yes, it's bad news bonko'd", true]]
-	= f.submit "Save"
+				["👾 Yes, it's bad news bonko'd", true]]
+	
+	.actions
+		= f.submit "Save changes"
 
 - content_for :stylesheets do
 	= stylesheet_link_tag "application/breadcrumbs"
 	= stylesheet_link_tag "application/outfit-viewer"
+	= stylesheet_link_tag "application/support-form"
 	= page_stylesheet_link_tag "pet_states/edit"
 
 - content_for :javascripts do