From 2dc5505147ea8a7c6bc824bfb772d26d279a7732 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sun, 2 Nov 2025 08:06:27 +0000
Subject: [PATCH] [WV2] Move species color picker into outfit area

---
 app/assets/stylesheets/outfits/new_v2.css | 99 ++++++++++++++++-------
 app/views/outfits/new_v2.html.haml        | 35 +++-----
 2 files changed, 83 insertions(+), 51 deletions(-)

diff --git a/app/assets/stylesheets/outfits/new_v2.css b/app/assets/stylesheets/outfits/new_v2.css
index 1331b0e0..a8406865 100644
--- a/app/assets/stylesheets/outfits/new_v2.css
+++ b/app/assets/stylesheets/outfits/new_v2.css
@@ -40,6 +40,76 @@ body.wardrobe-v2 {
     padding: 2rem;
     font-size: 1.2rem;
   }
+
+  /* Species/color picker floats over the preview at the bottom */
+  species-color-picker {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    pointer-events: none;
+    /* Allow clicks through when hidden */
+
+    /* Start hidden, reveal on hover or focus */
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    form {
+      display: flex;
+      gap: 0.5rem;
+      pointer-events: auto;
+      /* Re-enable clicks on the form itself */
+    }
+
+    select {
+      padding: 0.5rem 2rem 0.5rem 0.75rem;
+      font-size: 1rem;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      border-radius: 0.375rem;
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      cursor: pointer;
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+      background-position: right 0.5rem center;
+      background-repeat: no-repeat;
+      background-size: 1.5em 1.5em;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.8);
+        border-color: rgba(255, 255, 255, 0.5);
+      }
+
+      &:focus {
+        outline: none;
+        border-color: rgba(255, 255, 255, 0.8);
+        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+      }
+
+      option {
+        background: #2D3748;
+        color: white;
+      }
+    }
+  }
+
+  /* Show picker on hover (real hover only, not simulated touch hover) */
+  @media (hover: hover) {
+    &:hover species-color-picker {
+      opacity: 1;
+    }
+  }
+
+  /* Show picker when it has focus */
+  &:has(species-color-picker:focus-within) species-color-picker {
+    opacity: 1;
+  }
 }
 
 .outfit-controls-section {
@@ -67,35 +137,6 @@ body.wardrobe-v2 {
   }
 }
 
-.species-color-picker {
-  margin: 1.5rem 0;
-
-  .form-group {
-    margin-bottom: 1rem;
-
-    label {
-      display: block;
-      font-weight: bold;
-      margin-bottom: 0.5rem;
-      color: #333;
-    }
-
-    select {
-      width: 100%;
-      padding: 0.5rem;
-      font-size: 1rem;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      font-family: inherit;
-
-      &:focus {
-        outline: none;
-        border-color: #448844;
-      }
-    }
-  }
-}
-
 .current-selection {
   padding: 1rem;
   background: #f0f0f0;
diff --git a/app/views/outfits/new_v2.html.haml b/app/views/outfits/new_v2.html.haml
index bee6327a..b384da3a 100644
--- a/app/views/outfits/new_v2.html.haml
+++ b/app/views/outfits/new_v2.html.haml
@@ -27,35 +27,26 @@
           - else
             = outfit_viewer @outfit
 
-        .outfit-controls-section
-          %h1 Customize your pet
-
-          .species-color-picker
+          %species-color-picker
             = form_with url: wardrobe_v2_path, method: :get do |f|
-              .form-group
-                = label_tag :species, "Species:"
-                = select_tag :species,
-                  options_from_collection_for_select(@species, "id", "human_name",
-                    @selected_species&.id),
-                  onchange: "this.form.requestSubmit()"
-
-              .form-group
-                = label_tag :color, "Color:"
-                = select_tag :color,
-                  options_from_collection_for_select(@colors, "id", "human_name",
-                    @selected_color&.id),
-                  onchange: "this.form.requestSubmit()"
+              = select_tag :color,
+                options_from_collection_for_select(@colors, "id", "human_name",
+                  @selected_color&.id),
+                onchange: "this.form.requestSubmit()",
+                "aria-label": "Pet color"
+              = select_tag :species,
+                options_from_collection_for_select(@species, "id", "human_name",
+                  @selected_species&.id),
+                onchange: "this.form.requestSubmit()",
+                "aria-label": "Pet species"
 
               -# Preserve item IDs in the URL
               - if params[:objects].present?
                 - params[:objects].each do |item_id|
                   = hidden_field_tag "objects[]", item_id
 
-          - if @outfit.pet_state
-            .current-selection
-              %p
-                Currently showing:
-                %strong= "#{@selected_color.human_name} #{@selected_species.human_name}"
+        .outfit-controls-section
+          %h1 Customize your pet
 
           - if @outfit.worn_items.any?
             .worn-items