Compact interfaces and edit more things inline

core/templates/partials/queue-list.html

@@ -61,10 +61,11 @@
                 <div class="buttons are-small" style="margin: 0;">
                   <button
                     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                    hx-get="{% url 'queue_update' type=type pk=item.id %}"
+                    hx-get="{% url 'queue_update' type='window' pk=item.id %}?hx_target=%23queue-inline-editor-{{ item.id }}"
                     hx-trigger="click"
-                    hx-target="#{{ type }}s-here"
+                    hx-target="#queue-inline-editor-{{ item.id }}"
                     hx-swap="innerHTML"
+                    _="on htmx:afterRequest if event.detail.successful set #queue-inline-editor-{{ item.id }}.style.display to 'block' end"
                     class="button is-light">
                     <span class="icon is-small"><i class="fa-solid fa-pen"></i></span>
                     <span>Edit</span>
@@ -82,6 +83,9 @@
                   </button>
                 </div>
               </div>
+              <div
+                id="queue-inline-editor-{{ item.id }}"
+                style="display: none; margin-top: 0.55rem; padding: 0.55rem; border-radius: 8px; border: 1px solid rgba(50, 115, 220, 0.25); background: rgba(255, 255, 255, 0.78);"></div>
             </article>
           </div>
         {% endfor %}