delete images feature

src/index.html

@@ -69,6 +69,11 @@
             box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
         }
 
+        .thumbnail.selected {
+            border-color: #4caf50;
+            background-color: rgba(76, 175, 80, 0.3);
+        }
+
         .image-viewer {
             background: rgba(255,255,255,0.1);
             backdrop-filter: blur(10px);
@@ -182,25 +187,25 @@
 
 
         <article class="controls-card">
+            <div class="status" id="status">No folder selected</div>
             <div class="timeline-progress" id="timelineProgress"></div>
             <div class="timeline-labels" id="timelineLabels" style="display: flex; justify-content: space-between; font-size: 0.8rem; color: #fff; margin-bottom: 0.5rem;"></div>
             <div class="control-group">
 
-
                 <button class="button primary" onclick="selectFolder()">
                     <i>folder</i>
                     <span>Select Folder</span>
                 </button>
-                <button class="button primary" id="playBtn" onclick="togglePlay()" disabled>
-                    <i>play_arrow</i>
-                    <span>Play</span>
-                </button>
                 <button class="button primary" onclick="goToFirst()" disabled id="firstBtn" class="round-btn" title="First">
                     <i>first_page</i>
                 </button>
                 <button class="button primary" onclick="previousImage()" disabled id="prevBtn" class="round-btn" title="Previous">
                     <i>skip_previous</i>
                 </button>
+                <button class="button primary" id="playBtn" onclick="togglePlay()" disabled>
+                    <i>play_arrow</i>
+                    <span>Play</span>
+                </button>
                 <button class="button primary" onclick="nextImage()" disabled id="nextBtn" class="round-btn" title="Next">
                     <i>skip_next</i>
                 </button>
@@ -214,7 +219,9 @@
                     <span id="speedValue">1x</span>
                 </div>
                 
-                <div class="status" id="status">No folder selected</div>
+                <button class="button danger" id="deleteBtn" onclick="deleteSelectedImages()" disabled>
+                    <i>delete</i>
+                </button>
             </div>
         </article>
     </div>
@@ -228,6 +235,7 @@
         let isPlaying = false;
         let playInterval = null;
         let playSpeed = 1000;
+        let selectedIndices = [];
 
         function selectFolder() {
             document.getElementById('folderInput').click();
@@ -273,37 +281,60 @@
         function createThumbnails() {
             const container = document.getElementById('thumbnailsScroll');
             const thumbnailsContainer = document.getElementById('thumbnailsContainer');
-            
             container.innerHTML = '';
-            
             if (images.length === 0) {
                 thumbnailsContainer.style.display = 'none';
                 return;
             }
-
             thumbnailsContainer.style.display = 'block';
-            
             images.forEach((img, index) => {
                 const thumb = document.createElement('img');
                 thumb.src = img.url;
                 thumb.className = 'thumbnail';
-                thumb.onclick = () => goToImage(index);
+                thumb.onclick = (e) => handleThumbnailClick(e, index);
                 thumb.title = `${img.name} - ${img.createdDate.toLocaleString()}`;
                 container.appendChild(thumb);
             });
-
             updateThumbnailHighlight();
         }
 
+        function handleThumbnailClick(e, index) {
+            if (e.ctrlKey || e.metaKey) {
+                // Toggle selection
+                if (selectedIndices.includes(index)) {
+                    selectedIndices = selectedIndices.filter(i => i !== index);
+                } else {
+                    selectedIndices.push(index);
+                }
+            } else if (e.shiftKey && selectedIndices.length > 0) {
+                // Range select
+                const last = selectedIndices[selectedIndices.length - 1];
+                const [start, end] = [Math.min(last, index), Math.max(last, index)];
+                selectedIndices = [];
+                for (let i = start; i <= end; i++) selectedIndices.push(i);
+            } else {
+                // Single select
+                selectedIndices = [index];
+            }
+            updateThumbnailHighlight();
+            if (selectedIndices.length === 1) {
+                currentIndex = selectedIndices[0];
+                displayCurrentImage();
+            } else {
+                displayCurrentImage();
+            }
+            updateDeleteButton();
+        }
+
         function updateThumbnailHighlight() {
             const thumbnails = document.querySelectorAll('.thumbnail');
             thumbnails.forEach((thumb, index) => {
-                thumb.classList.toggle('active', index === currentIndex);
+                thumb.classList.toggle('active', index === currentIndex && selectedIndices.length <= 1);
+                thumb.classList.toggle('selected', selectedIndices.includes(index));
             });
-
             // Scroll active thumbnail into view
-            if (thumbnails[currentIndex]) {
+            if (selectedIndices.length === 1 && thumbnails[selectedIndices[0]]) {
-                thumbnails[currentIndex].scrollIntoView({
+                thumbnails[selectedIndices[0]].scrollIntoView({
                     behavior: 'smooth',
                     block: 'nearest',
                     inline: 'center'
@@ -340,7 +371,10 @@
                 container.innerHTML = '<div class="placeholder">No images loaded</div>';
                 return;
             }
-
+            if (selectedIndices.length > 1) {
+                container.innerHTML = `<div class="placeholder">${selectedIndices.length} images selected. Use the Delete Selected button to remove them.</div>`;
+                return;
+            }
             const current = images[currentIndex];
             const createdDate = current.createdDate.toLocaleString();
             
@@ -552,6 +586,24 @@
             document.getElementById('status').textContent = message;
         }
 
+        function updateDeleteButton() {
+            document.getElementById('deleteBtn').disabled = selectedIndices.length === 0;
+        }
+
+        function deleteSelectedImages() {
+            if (selectedIndices.length === 0) return;
+            // Remove selected images
+            images = images.filter((_, idx) => !selectedIndices.includes(idx));
+            // Reset selection and currentIndex
+            selectedIndices = [];
+            currentIndex = Math.min(currentIndex, images.length - 1);
+            createThumbnails();
+            updateButtons();
+            displayCurrentImage();
+            updateStatus(`Deleted selected images.`);
+            updateDeleteButton();
+        }
+
         // Keyboard shortcuts
         document.addEventListener('keydown', function(e) {
             switch(e.code) {