Move item lists bulk management form to an openable dialog in the header

app/assets/javascripts/items/item_header.js

@@ -0,0 +1,22 @@
+const userListSections = document.querySelectorAll(
+	".item-header .user-lists-section");
+for (const section of userListSections) {
+	try {
+		const dialog = section.querySelector("dialog");
+		const opener = section.querySelector(".dialog-opener");
+		const closer = section.querySelector(".dialog-closer");
+		if (dialog.showModal) { // check browser support
+			opener.addEventListener("click", (event) => {
+				dialog.show();
+				event.preventDefault();
+			});
+			document.body.addEventListener("click", (event) => {
+				if (dialog.open && !section.contains(event.target)) {
+					dialog.close();
+				}
+			});
+		}
+	} catch (error) {
+		console.error(`Error applying dialog behavior to item header:`, error);
+	}
+}

app/assets/stylesheets/items/_show.sass

@@ -6,47 +6,6 @@ body.items-show
   .item-header
     +item-header
 
-  #your-items-form
-    border: 1px solid $module-border-color
-    font-size: 85%
-    margin-bottom: 2em
-    margin-left: auto
-    margin-right: auto
-    padding: 1em
-    width: 30em
-
-    h3
-      font-size: 150%
-      font-weight: bold
-      margin-bottom: .25em
-    
-    #closet-hangers-ownership-groups
-      +clearfix
-      margin-bottom: .5em
-    
-      div
-        float: left
-        margin: 0 5%
-        text-align: left
-        width: 40%
-        
-        li
-          list-style: none
-          word-wrap: break-word
-          
-          label.unlisted
-            font-style: italic
-
-    form
-      padding: .5em 0
-
-    select
-      width: 9em
-
-    input[type=number]
-      margin-right: .5em
-      width: 3em
-
   #item-contributors
     +subtle-banner
     clear: both

app/assets/stylesheets/partials/_item_header.sass

@@ -1,4 +1,5 @@
 @import "../partials/clean/constants"
+@import "../partials/clean/mixins"
 
 =item-header
   border-bottom: 1px solid $module-border-color
@@ -7,7 +8,7 @@
 
   .item-header-main
     display: grid
-    grid-template-areas: "img gap1" "img name" "img links" "img gap2" "nav nav"
+    grid-template-areas: "img gap1" "img name" "img links" "img lists" "img gap2" "nav nav"
     align-items: center
     justify-content: center
     column-gap: 1em
@@ -58,6 +59,57 @@
           background: #E2E8F0
           color: #1A202C
 
+    .user-lists-section
+      grid-area: lists
+      font-size: 85%
+      text-align: left
+
+      .dialog-opener
+        &::after
+          content: " ›"
+
+      dialog
+        background: $background-color
+        border: 1px solid $module-border-color
+        border-radius: .5em
+        padding: 1em
+        width: 30em
+        text-align: center
+        z-index: 2
+        margin-top: .5em
+        box-shadow: 0px 1px 4px #666
+
+        h3
+          font-size: 150%
+          font-weight: bold
+          margin-bottom: .25em
+        
+        .closet-hangers-ownership-groups
+          +clearfix
+          margin-bottom: .5em
+        
+          div
+            float: left
+            margin: 0 5%
+            text-align: left
+            width: 40%
+            
+            li
+              list-style: none
+              word-wrap: break-word
+              
+              label.unlisted
+                font-style: italic
+
+        form
+          padding: .5em 0
+
+        select
+          width: 9em
+
+        input[type=number]
+          margin-right: .5em
+          width: 3em
 
   .item-description
     margin-top: .5em

app/views/items/_item_header.haml

@@ -28,6 +28,43 @@
         = link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
         = link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
 
+    - if user_signed_in?
+      .user-lists-section
+        = link_to t('items.show.closet_hangers.button'),
+          user_closet_hangers_path(current_user),
+          class: 'dialog-opener'
+        %dialog
+          %h3
+            = t 'items.show.closet_hangers.header_html',
+              user_items_link: link_to(t('your_items'),
+              user_closet_hangers_path(current_user))
+          = form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => @item), :method => :put do
+            .closet-hangers-ownership-groups
+              - @current_user_lists.each do |owned, lists|
+                %div
+                  %h4= closet_lists_group_name(:you, owned)
+                  %ul
+                    - lists.each_with_index do |list, index|
+                      %li
+                        = number_field_tag "quantity[#{list.id}]",
+                          @current_user_quantities[list.id], min: 0,
+                          autofocus: owned && index == 0
+                        = label_tag "quantity[#{list.id}]", list.name
+                    
+                    %li
+                      = number_field_tag "quantity[#{owned}]",
+                        @current_user_quantities[owned], min: 0,
+                        autofocus: owned && lists.empty?
+                          
+                      - unless lists.empty?
+                        = label_tag "quantity[#{owned}]",
+                                    t('closet_lists.unlisted_name'),
+                                    :class => 'unlisted'
+                      - else
+                        = label_tag "quantity[#{owned}]",
+                                    t('items.show.closet_hangers.quantity_label')
+            = submit_tag t('items.show.closet_hangers.submit')
+
   %p.item-description= @item.description
 
   %nav.item-subpages-nav
@@ -46,3 +83,6 @@
               count: trades[:offering].size),
             item_trades_path(item, type: 'seeking'),
             'data-is-current' => current_subpage == 'trades_seeking'
+
+- content_for :javascripts do
+  = javascript_include_tag 'items/item_header'

app/views/items/show.html.haml

@@ -4,37 +4,6 @@
 = render partial: "item_header",
   locals: {item: @item, trades: @trades, current_subpage: "preview"}
 
-- if user_signed_in?
-  #your-items-form
-    %h3
-      = t '.closet_hangers.header_html',
-          :user_items_link => link_to(t('your_items'),
-                                      user_closet_hangers_path(current_user))
-    = form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => @item), :method => :put do
-      #closet-hangers-ownership-groups
-        - @current_user_lists.each do |owned, lists|
-          %div
-            %h4= closet_lists_group_name(:you, owned)
-            %ul
-              - lists.each do |list|
-                %li
-                  = number_field_tag "quantity[#{list.id}]",
-                    @current_user_quantities[list.id], :min => 0
-                  = label_tag "quantity[#{list.id}]", list.name
-              
-              %li
-                = number_field_tag "quantity[#{owned}]",
-                  @current_user_quantities[owned], :min => 0
-                    
-                - unless lists.empty?
-                  = label_tag "quantity[#{owned}]",
-                              t('closet_lists.unlisted_name'),
-                              :class => 'unlisted'
-                - else
-                  = label_tag "quantity[#{owned}]",
-                              t('.closet_hangers.quantity_label')
-      = submit_tag t('.closet_hangers.submit')
-
 #outfit-preview-root{'data-item-id': @item.id}
 
 - unless @contributors_with_counts.empty?

config/locales/en.yml

@@ -316,6 +316,7 @@ en:
         trading_post: Trades
         auction_genie: Auctions
       closet_hangers:
+        button: Add to your lists
         header_html: Track this in %{user_items_link}
         quantity_label: How many?
         submit: Save to Your Items