From 5be35591c2dd88c909c6785f35f1f58ffed0d338 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 2 Jan 2025 19:04:48 -0800
Subject: [PATCH] Use CSS instead of server requests for image format in pet
 styles form

Instead of offering a form to request a different format, we just
render both in the HTML, and use CSS to swap between the two. Love to
see the `:has` filter come through for us!
---
 .../pet_states/support-outfit-viewer.sass     | 13 +++++--
 .../_support_outfit_viewer.html.haml          | 35 +++++++++----------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/pet_states/support-outfit-viewer.sass b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass
index 26e2c1fb..c0983b2e 100644
--- a/app/assets/stylesheets/pet_states/support-outfit-viewer.sass
+++ b/app/assets/stylesheets/pet_states/support-outfit-viewer.sass
@@ -1,5 +1,4 @@
 @import "../partials/clean/constants"
-@import "../partials/context_button"
 
 support-outfit-viewer
 	display: flex
@@ -39,8 +38,16 @@ support-outfit-viewer
 			input[type=radio]
 				margin: 0
 
-		[type=submit]
-			+context-button
+	.outfit-viewer-area
+		> [data-format=png]
+			display: none
+
+	&:has(input[value=png]:checked)
+		.outfit-viewer-area
+			> [data-format=svg]
+				display: none
+			> [data-format=png]
+				display: block
 
 	> table
 		flex: 0 0 auto
diff --git a/app/views/pet_states/_support_outfit_viewer.html.haml b/app/views/pet_states/_support_outfit_viewer.html.haml
index 26fe0f27..4fe81992 100644
--- a/app/views/pet_states/_support_outfit_viewer.html.haml
+++ b/app/views/pet_states/_support_outfit_viewer.html.haml
@@ -1,24 +1,21 @@
 = content_tag "support-outfit-viewer", **html_options do
-	= turbo_frame_tag "support-outfit-viewer-preview" do
-		%div
-			-# Render an outfit viewer in a magnifier. Use SVG by default for clarity,
-			-# but also offer an option to switch to PNG if it looks wrong.
-			%magic-magnifier
-				= outfit_viewer outfit,
-					preferred_image_format: params[:preferred_image_format] == "png" ? :png : :svg
+	%div
+		.outfit-viewer-area
+			%magic-magnifier{"data-format": "svg"}
+				= outfit_viewer outfit, preferred_image_format: :svg
+			%magic-magnifier{"data-format": "png"}
+				= outfit_viewer outfit, preferred_image_format: :png
 
-			= form_with method: :get, class: "outfit-viewer-controls" do |f|
-				%fieldset
-					%legend Format
-					%label
-						= f.radio_button "preferred_image_format", "svg",
-							checked: params[:preferred_image_format] != "png"
-						SVG
-					%label
-						= f.radio_button "preferred_image_format", "png",
-							checked: params[:preferred_image_format] == "png"
-						PNG
-				= f.submit "Update"
+		= form_with method: :get, class: "outfit-viewer-controls" do |f|
+			%fieldset
+				%legend Format
+				%label
+					= f.radio_button "preferred_image_format", "svg",
+					  checked: true
+					SVG
+				%label
+					= f.radio_button "preferred_image_format", "png"
+					PNG
 
 	%table
 		%thead