tweaking series order tools

app/static/js/bulk-select.js

@@ -7,7 +7,8 @@
 
   const state = {
     isSelectMode: false,
-    selectedIds: new Set()
+    selectedIds: new Set(),
+    selectionOrder: []  // Array to track order of selection
   };
 
   // DOM elements (populated on init)
@@ -28,6 +29,8 @@
     dom.tagInput = document.getElementById('bulkTagInput');
     dom.autocomplete = document.getElementById('bulkTagAutocomplete');
     dom.commonTags = document.getElementById('commonTagsList');
+    dom.floatingPreview = document.getElementById('floatingPreview');
+    dom.floatingPreviewImage = document.getElementById('floatingPreviewImage');
 
     if (!dom.selectBtn || !dom.panel) return;
 
@@ -63,6 +66,30 @@
         }
       }
     });
+
+    // Preview on hover in select mode
+    document.addEventListener('mouseenter', handlePreviewShow, true);
+    document.addEventListener('mouseleave', handlePreviewHide, true);
+  }
+
+  function handlePreviewShow(e) {
+    if (!state.isSelectMode || !dom.floatingPreview) return;
+    const item = e.target.closest('.img-clickable');
+    if (!item) return;
+
+    const fullSrc = item.dataset.full;
+    if (fullSrc && dom.floatingPreviewImage) {
+      dom.floatingPreviewImage.src = fullSrc;
+      dom.floatingPreview.classList.add('active');
+    }
+  }
+
+  function handlePreviewHide(e) {
+    if (!dom.floatingPreview) return;
+    const item = e.target.closest('.img-clickable');
+    if (!item) return;
+
+    dom.floatingPreview.classList.remove('active');
   }
 
   function toggleSelectMode() {
@@ -104,12 +131,18 @@
 
     if (state.selectedIds.has(id)) {
       state.selectedIds.delete(id);
+      state.selectionOrder = state.selectionOrder.filter(x => x !== id);
       item.classList.remove('selected');
+      removeOrderBadge(item);
     } else {
       state.selectedIds.add(id);
+      state.selectionOrder.push(id);
       item.classList.add('selected');
+      addOrderBadge(item, state.selectionOrder.length);
     }
 
+    // Update all badges to reflect current order
+    updateAllOrderBadges();
     updateCount();
     loadCommonTags();
     dispatchSelectionChanged();
@@ -117,8 +150,10 @@
 
   function clearSelection() {
     state.selectedIds.clear();
+    state.selectionOrder = [];
     document.querySelectorAll('.img-clickable.selected').forEach(el => {
       el.classList.remove('selected');
+      removeOrderBadge(el);
     });
     updateCount();
     updateCommonTagsDisplay();
@@ -133,7 +168,10 @@
 
   function dispatchSelectionChanged() {
     document.dispatchEvent(new CustomEvent('selectionChanged', {
-      detail: { count: state.selectedIds.size }
+      detail: {
+        count: state.selectedIds.size,
+        orderedIds: [...state.selectionOrder]
+      }
     }));
   }
 
@@ -165,11 +203,43 @@
   }
 
   function updateSelectionUI() {
-    // Re-apply selected class to any newly loaded images that are in selection
+    // Re-apply selected class and order badges to any newly loaded images that are in selection
     document.querySelectorAll('.img-clickable').forEach(item => {
       const id = parseInt(item.dataset.id);
       if (state.selectedIds.has(id)) {
         item.classList.add('selected');
+        const orderIndex = state.selectionOrder.indexOf(id);
+        if (orderIndex !== -1) {
+          addOrderBadge(item, orderIndex + 1);
+        }
+      }
+    });
+  }
+
+  // ---------------------------
+  // Order Badge Helpers
+  // ---------------------------
+  function addOrderBadge(item, orderNumber) {
+    removeOrderBadge(item); // Remove existing badge first
+    const badge = document.createElement('div');
+    badge.className = 'selection-order-badge';
+    badge.textContent = orderNumber;
+    item.appendChild(badge);
+  }
+
+  function removeOrderBadge(item) {
+    const existing = item.querySelector('.selection-order-badge');
+    if (existing) existing.remove();
+  }
+
+  function updateAllOrderBadges() {
+    document.querySelectorAll('.img-clickable').forEach(item => {
+      const id = parseInt(item.dataset.id);
+      const orderIndex = state.selectionOrder.indexOf(id);
+      if (orderIndex !== -1) {
+        addOrderBadge(item, orderIndex + 1);
+      } else {
+        removeOrderBadge(item);
       }
     });
   }
@@ -474,6 +544,7 @@
 
   // Expose global API for other scripts (like series editor)
   window.selectedImages = state.selectedIds;
+  window.selectionOrder = state.selectionOrder;  // Ordered array of selected IDs
   window.clearSelection = clearSelection;
   window.enableSelectMode = enableSelectMode;
   window.disableSelectMode = disableSelectMode;