src/webui/gallery-editor/index.html

@@ -40,6 +40,16 @@
         </label>
         <button id="remove-all-gallery" class="up-btn">🗑 Delete all</button>
       </div>
+        <div class="filter-row">
+          <label>
+            <input type="radio" name="gallery-filter" id="show-all-radio" checked>
+            All
+          </label>
+          <label>
+            <input type="radio" name="gallery-filter" id="show-untagged-radio">
+            Untagged
+          </label>
+        </div>
       <span id="gallery-count" class="photo-count"></span>
       <input type="file" id="upload-gallery" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
       <div id="gallery"></div>

src/webui/js/gallery-editor.js

@@ -2,6 +2,7 @@
 let galleryImages = [];
 let heroImages = [];
 let allTags = []; // global tag list
+let showOnlyUntagged = false;
 
 // --- Load images from server on page load ---
 async function loadData() {
@@ -34,7 +35,15 @@ function updateAllTags() {
 function renderGallery() {
   const container = document.getElementById('gallery');
   container.innerHTML = '';
-  galleryImages.forEach((img, i) => {
+
+  // Filter images if toggle is on
+  let imagesToShow = galleryImages;
+  if (showOnlyUntagged) {
+    imagesToShow = galleryImages.filter(img => !img.tags || img.tags.length === 0);
+  }
+
+  imagesToShow.forEach((img) => {
+    const i = galleryImages.indexOf(img); // Use real index for tag/delete actions
     const div = document.createElement('div');
     div.className = 'photo flex-item flex-column';
     div.innerHTML = `
@@ -57,31 +66,31 @@ function renderGallery() {
   // Update gallery count (top)
   const galleryCount = document.getElementById('gallery-count');
   if (galleryCount) {
-    galleryCount.innerHTML = `<p>${galleryImages.length} photos</p>`;
+    galleryCount.innerHTML = `<p>${imagesToShow.length} photos</p>`;
   }
 
   // Update gallery count (bottom)
   const galleryCountBottom = document.getElementById('gallery-count-bottom');
   if (galleryCountBottom) {
-    galleryCountBottom.innerHTML = `<p>${galleryImages.length} photos</p>`;
+    galleryCountBottom.innerHTML = `<p>${imagesToShow.length} photos</p>`;
   }
 
   // Show/hide Remove All button (top)
   const removeAllBtn = document.getElementById('remove-all-gallery');
   if (removeAllBtn) {
-    removeAllBtn.style.display = galleryImages.length > 0 ? 'inline-block' : 'none';
+    removeAllBtn.style.display = imagesToShow.length > 0 ? 'inline-block' : 'none';
   }
 
   // Show/hide bottom upload row
   const bottomGalleryUpload = document.getElementById('bottom-gallery-upload');
   if (bottomGalleryUpload) {
-    bottomGalleryUpload.style.display = galleryImages.length > 0 ? 'flex' : 'none';
+    bottomGalleryUpload.style.display = imagesToShow.length > 0 ? 'flex' : 'none';
   }
 
   // Show/hide Remove All button (bottom)
   const removeAllBtnBottom = document.getElementById('remove-all-gallery-bottom');
   if (removeAllBtnBottom) {
-    removeAllBtnBottom.style.display = galleryImages.length > 0 ? 'inline-block' : 'none';
+    removeAllBtnBottom.style.display = imagesToShow.length > 0 ? 'inline-block' : 'none';
   }
 }
 
@@ -475,6 +484,25 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('delete-modal-cancel').onclick = hideDeleteModal;
   document.getElementById('delete-modal-confirm').onclick = confirmDelete;
 
+  // --- Radio toggle for gallery filter ---
+  const showAllRadio = document.getElementById('show-all-radio');
+  const showUntaggedRadio = document.getElementById('show-untagged-radio');
+
+  if (showAllRadio && showUntaggedRadio) {
+    showAllRadio.addEventListener('change', () => {
+      if (showAllRadio.checked) {
+        showOnlyUntagged = false;
+        renderGallery();
+      }
+    });
+    showUntaggedRadio.addEventListener('change', () => {
+      if (showUntaggedRadio.checked) {
+        showOnlyUntagged = true;
+        renderGallery();
+      }
+    });
+  }
+
   // Bulk delete buttons
   const removeAllGalleryBtn = document.getElementById('remove-all-gallery');
   const removeAllGalleryBtnBottom = document.getElementById('remove-all-gallery-bottom');

src/webui/style/style.css

@@ -236,6 +236,19 @@ h2 {
   cursor: pointer;
 }
 
+/* --- Filter Row --- */
+.filter-row label {
+  display: inline-block;
+  margin-right: 16px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.filter-row input[type="radio"] {
+  accent-color: #55c3ec;
+  margin-right: 6px;
+}
+
 /* --- Gallery & Hero Grid --- */
 #gallery, #hero {
   display: grid;