[WV2] Split template into partials

app/assets/stylesheets/wardrobe/show.css

@@ -643,7 +643,7 @@ body.wardrobe-v2 {
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
 
-      &:hover .item-add-button {
+      &:hover :is(.item-add-button, .item-remove-button) {
         opacity: 1;
       }
     }

app/views/wardrobe/_item_card.html.haml

@@ -0,0 +1,17 @@
+- is_worn = @outfit.worn_items.include?(item)
+%li.item-card
+  .item-thumbnail
+    = image_tag item.thumbnail_url, alt: item.name, loading: "lazy"
+  .item-info
+    .item-name= item.name
+    .item-badges
+      = render "items/badges/kind", item: item
+      = render "items/badges/first_seen", item: item
+  - if is_worn
+    = button_to wardrobe_v2_path, method: :get, class: "item-remove-button", title: "Remove #{item.name}", "aria-label": "Remove #{item.name}" do
+      ❌
+      = outfit_state_params @outfit.without_item(item)
+  - else
+    = button_to wardrobe_v2_path, method: :get, class: "item-add-button", title: "Add #{item.name}", "aria-label": "Add #{item.name}" do
+      ➕
+      = outfit_state_params @outfit.with_item(item)

app/views/wardrobe/_pose_picker.html.haml

@@ -0,0 +1,39 @@
+- pose_info = pose_emoji_and_label(@selected_pose)
+%button#pose-picker-button.pose-picker-button{type: "button", popovertarget: "pose-picker-popover"}
+  %span.pose-emoji= pose_info[:emoji]
+  %span.pose-label= pose_info[:label]
+  %span.chevron ▾
+
+%pose-picker-popover#pose-picker-popover{popover: "auto"}
+  = form_with url: wardrobe_v2_path, method: :get, class: "pose-picker-form" do |f|
+    = outfit_state_params except: [:pose]
+    %table.pose-picker-table
+      %thead
+        %tr
+          %th
+          %th
+            %span.emoji-icon{title: "Happy"} 😀
+          %th
+            %span.emoji-icon{title: "Sad"} 😢
+          %th
+            %span.emoji-icon{title: "Sick"} 🤢
+      %tbody
+        %tr
+          %th
+            %span.emoji-icon{title: "Masculine"} 💁‍♂️
+          %td
+            = render "pose_option", pose: "HAPPY_MASC", pet_state: @available_poses["HAPPY_MASC"], selected: @selected_pose == "HAPPY_MASC"
+          %td
+            = render "pose_option", pose: "SAD_MASC", pet_state: @available_poses["SAD_MASC"], selected: @selected_pose == "SAD_MASC"
+          %td
+            = render "pose_option", pose: "SICK_MASC", pet_state: @available_poses["SICK_MASC"], selected: @selected_pose == "SICK_MASC"
+        %tr
+          %th
+            %span.emoji-icon{title: "Feminine"} 💁‍♀️
+          %td
+            = render "pose_option", pose: "HAPPY_FEM", pet_state: @available_poses["HAPPY_FEM"], selected: @selected_pose == "HAPPY_FEM"
+          %td
+            = render "pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: @selected_pose == "SAD_FEM"
+          %td
+            = render "pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: @selected_pose == "SICK_FEM"
+    = submit_tag "Change pose", name: nil, class: "pose-submit-button"

app/views/wardrobe/_search_results.html.haml

@@ -4,17 +4,7 @@
 
     %ul.search-results-list
       - @search_results.each do |item|
-        %li.item-card
+        = render "item_card", item: item
-          .item-thumbnail
-            = image_tag item.thumbnail_url, alt: item.name, loading: "lazy"
-          .item-info
-            .item-name= item.name
-            .item-badges
-              = render "items/badges/kind", item: item
-              = render "items/badges/first_seen", item: item
-          = button_to wardrobe_v2_path, method: :get, class: "item-add-button", title: "Add #{item.name}", "aria-label": "Add #{item.name}" do
-            ➕
-            = outfit_state_params @outfit.with_item(item)
 
     = will_paginate @search_results, param_name: "q[page]", params: { q: params[:q], species: @outfit.species_id, color: @outfit.color_id, objects: params[:objects] }
 

app/views/wardrobe/_species_color_picker.html.haml

@@ -0,0 +1,12 @@
+%species-color-picker
+  = form_with url: wardrobe_v2_path, method: :get do |f|
+    = outfit_state_params except: [:color, :species]
+    = 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

app/views/wardrobe/show.html.haml

@@ -30,59 +30,10 @@
           = outfit_viewer @outfit
 
         .preview-controls
-          %species-color-picker
+          = render "species_color_picker"
-            = form_with url: wardrobe_v2_path, method: :get do |f|
-              = outfit_state_params except: [:color, :species]
-              = 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
 
           - if @pet_type
-            - pose_info = pose_emoji_and_label(@selected_pose)
+            = render "pose_picker"
-            %button#pose-picker-button.pose-picker-button{type: "button", popovertarget: "pose-picker-popover"}
-              %span.pose-emoji= pose_info[:emoji]
-              %span.pose-label= pose_info[:label]
-              %span.chevron ▾
-
-            %pose-picker-popover#pose-picker-popover{popover: "auto"}
-              = form_with url: wardrobe_v2_path, method: :get, class: "pose-picker-form" do |f|
-                = outfit_state_params except: [:pose]
-                %table.pose-picker-table
-                  %thead
-                    %tr
-                      %th
-                      %th
-                        %span.emoji-icon{title: "Happy"} 😀
-                      %th
-                        %span.emoji-icon{title: "Sad"} 😢
-                      %th
-                        %span.emoji-icon{title: "Sick"} 🤢
-                  %tbody
-                    %tr
-                      %th
-                        %span.emoji-icon{title: "Masculine"} 💁‍♂️
-                      %td
-                        = render "pose_option", pose: "HAPPY_MASC", pet_state: @available_poses["HAPPY_MASC"], selected: @selected_pose == "HAPPY_MASC"
-                      %td
-                        = render "pose_option", pose: "SAD_MASC", pet_state: @available_poses["SAD_MASC"], selected: @selected_pose == "SAD_MASC"
-                      %td
-                        = render "pose_option", pose: "SICK_MASC", pet_state: @available_poses["SICK_MASC"], selected: @selected_pose == "SICK_MASC"
-                    %tr
-                      %th
-                        %span.emoji-icon{title: "Feminine"} 💁‍♀️
-                      %td
-                        = render "pose_option", pose: "HAPPY_FEM", pet_state: @available_poses["HAPPY_FEM"], selected: @selected_pose == "HAPPY_FEM"
-                      %td
-                        = render "pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: @selected_pose == "SAD_FEM"
-                      %td
-                        = render "pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: @selected_pose == "SICK_FEM"
-                = submit_tag "Change pose", name: nil, class: "pose-submit-button"
 
       .outfit-controls-section
         .item-search-form
@@ -106,14 +57,4 @@
                   %h3.zone-label= zone_group[:zone_label]
                   %ul.items-list
                     - zone_group[:items].each do |item|
-                      %li.item-card
+                      = render "item_card", item: item
-                        .item-thumbnail
-                          = image_tag item.thumbnail_url, alt: item.name, loading: "lazy"
-                        .item-info
-                          .item-name= item.name
-                          .item-badges
-                            = render "items/badges/kind", item: item
-                            = render "items/badges/first_seen", item: item
-                        = button_to wardrobe_v2_path, method: :get, class: "item-remove-button", title: "Remove #{item.name}", "aria-label": "Remove #{item.name}" do
-                          ❌
-                          = outfit_state_params @outfit.without_item(item)