From f96569b2bf30b98d96cd0be4df480114969e45bd Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sun, 2 Nov 2025 08:55:17 +0000
Subject: [PATCH] [WV2] Persist state in URL

---
 app/assets/javascripts/outfit-viewer.js | 17 +++++--
 app/views/outfits/new_v2.html.haml      | 68 ++++++++++++-------------
 2 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/outfit-viewer.js b/app/assets/javascripts/outfit-viewer.js
index cff10e62..b281ce78 100644
--- a/app/assets/javascripts/outfit-viewer.js
+++ b/app/assets/javascripts/outfit-viewer.js
@@ -126,7 +126,7 @@ class OutfitLayer extends HTMLElement {
 			} else {
 				throw new Error(
 					`<outfit-layer> got unexpected status: ` +
-						JSON.stringify(data.status),
+					JSON.stringify(data.status),
 				);
 			}
 		} else {
@@ -196,7 +196,7 @@ function morphWithOutfitLayers(currentElement, newElement) {
 				if (
 					newNode.tagName === "OUTFIT-LAYER" &&
 					newNode.getAttribute("data-asset-id") !==
-						currentNode.getAttribute("data-asset-id")
+					currentNode.getAttribute("data-asset-id")
 				) {
 					currentNode.replaceWith(newNode);
 					return false;
@@ -205,10 +205,19 @@ function morphWithOutfitLayers(currentElement, newElement) {
 		},
 	});
 }
-addEventListener("turbo:before-frame-render", (event) => {
+
+function onTurboRender(event) {
 	// Rather than enforce Idiomorph must be loaded, let's just be resilient
 	// and only bother if we have it. (Replacing content is not *that* bad!)
 	if (typeof Idiomorph !== "undefined") {
 		event.detail.render = (a, b) => morphWithOutfitLayers(a, b);
 	}
-});
+}
+
+// On most pages, we only apply this to Turbo frames, to be conservative. (Morphing the whole page is hard!)
+addEventListener("turbo:before-frame-render", onTurboRender);
+
+// But on pages that opt into it (namely the wardrobe), we do it for the full page too.
+if (document.querySelector('meta[name=outfit-viewer-morph-mode][value=full-page]') !== null) {
+	addEventListener("turbo:before-render", onTurboRender);
+}
diff --git a/app/views/outfits/new_v2.html.haml b/app/views/outfits/new_v2.html.haml
index 5f252eb0..46b40564 100644
--- a/app/views/outfits/new_v2.html.haml
+++ b/app/views/outfits/new_v2.html.haml
@@ -10,47 +10,47 @@
     = stylesheet_link_tag "application/hanger-spinner"
     = stylesheet_link_tag "application/outfit-viewer"
     = page_stylesheet_link_tag "outfits/new_v2"
-    = csrf_meta_tags
     = javascript_include_tag "application", async: true
     = javascript_include_tag "idiomorph", async: true
     = javascript_include_tag "outfit-viewer", async: true
     = javascript_include_tag "species-color-picker", async: true
     = javascript_include_tag "outfits/new_v2", async: true
+    = csrf_meta_tags
+    %meta{name: 'outfit-viewer-morph-mode', value: 'full-page'}
   %body.wardrobe-v2
-    = turbo_frame_tag "outfit-editor" do
-      .wardrobe-container
-        .outfit-preview-section
-          - if @pet_type.nil?
-            .no-preview-message
-              %p
-                We haven't seen this kind of pet before! Try a different species/color
-                combination.
-          - else
-            = outfit_viewer @outfit
+    .wardrobe-container
+      .outfit-preview-section
+        - if @pet_type.nil?
+          .no-preview-message
+            %p
+              We haven't seen this kind of pet before! Try a different species/color
+              combination.
+        - else
+          = outfit_viewer @outfit
 
-          %species-color-picker
-            = form_with url: wardrobe_v2_path, method: :get do |f|
-              = select_tag :color,
-                options_from_collection_for_select(@colors, "id", "human_name",
-                  @selected_color&.id),
-                "aria-label": "Pet color"
-              = select_tag :species,
-                options_from_collection_for_select(@species, "id", "human_name",
-                  @selected_species&.id),
-                "aria-label": "Pet species"
-              = submit_tag "Go", name: nil
+        %species-color-picker
+          = form_with url: wardrobe_v2_path, method: :get do |f|
+            = select_tag :color,
+              options_from_collection_for_select(@colors, "id", "human_name",
+                @selected_color&.id),
+              "aria-label": "Pet color"
+            = select_tag :species,
+              options_from_collection_for_select(@species, "id", "human_name",
+                @selected_species&.id),
+              "aria-label": "Pet species"
+            = submit_tag "Go", name: nil
 
-              -# Preserve item IDs in the URL
-              - if params[:objects].present?
-                - params[:objects].each do |item_id|
-                  = hidden_field_tag "objects[]", item_id
+            -# Preserve item IDs in the URL
+            - if params[:objects].present?
+              - params[:objects].each do |item_id|
+                = hidden_field_tag "objects[]", item_id
 
-        .outfit-controls-section
-          %h1 Customize your pet
+      .outfit-controls-section
+        %h1 Customize your pet
 
-          - if @outfit.worn_items.any?
-            .worn-items
-              %h2 Items (#{@outfit.worn_items.size})
-              %ul
-                - @outfit.worn_items.each do |item|
-                  %li= item.name
+        - if @outfit.worn_items.any?
+          .worn-items
+            %h2 Items (#{@outfit.worn_items.size})
+            %ul
+              - @outfit.worn_items.each do |item|
+                %li= item.name