moving styling and views to be more consistent and for gallery view to be less cumbersome.

app/static/js/modal-pagination.js

@@ -28,11 +28,16 @@ document.addEventListener('DOMContentLoaded', () => {
   let dragStartY = 0;
   let dragMoved = false;
 
+  // Legacy pagination inputs (for non-infinite-scroll pages)
   const hasNextPageInput = document.getElementById('hasNextPage');
   const nextPageUrlInput = document.getElementById('nextPageUrl');
   const hasPrevPageInput = document.getElementById('hasPrevPage');
   const prevPageUrlInput = document.getElementById('prevPageUrl');
 
+  // Check if we're in infinite scroll mode
+  // Infinite scroll mode is when galleryState exists (set by gallery.html template)
+  const isInfiniteScrollMode = typeof window.galleryState !== 'undefined';
+
   // ---------------------------
   // Tag editor helpers
   // ---------------------------
@@ -158,9 +163,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
   async function fetchAutocomplete(query) {
     try {
+      // Exclude system-managed tag kinds from autocomplete (archive, post, source)
+      const excludeKinds = 'archive,post,source';
       const url = query
-        ? `/api/tags/search?q=${encodeURIComponent(query)}&limit=8&exclude_kind=archive`
-        : `/api/tags/search?limit=8&exclude_kind=archive`;
+        ? `/api/tags/search?q=${encodeURIComponent(query)}&limit=8&exclude_kind=${excludeKinds}`
+        : `/api/tags/search?limit=8&exclude_kind=${excludeKinds}`;
       const r = await fetch(url);
       const j = await r.json();
       renderAutocomplete(j.tags || []);
@@ -316,7 +323,12 @@ document.addEventListener('DOMContentLoaded', () => {
   function showNext() {
     if (currentIndex < images.length - 1) {
       updateImage(currentIndex + 1);
+    } else if (isInfiniteScrollMode) {
+      // In infinite scroll mode, just stay at the last image
+      // User needs to scroll the gallery to load more
+      return;
     } else if (hasNextPageInput?.value === "true") {
+      // Legacy pagination mode - fetch next page
       fetch(nextPageUrlInput.value)
         .then(res => res.text())
         .then(html => {
@@ -349,7 +361,11 @@ document.addEventListener('DOMContentLoaded', () => {
   function showPrev() {
     if (currentIndex > 0) {
       updateImage(currentIndex - 1);
+    } else if (isInfiniteScrollMode) {
+      // In infinite scroll mode, just stay at the first image
+      return;
     } else if (hasPrevPageInput?.value === "true") {
+      // Legacy pagination mode - fetch previous page
       fetch(prevPageUrlInput.value)
         .then(res => res.text())
         .then(html => {
@@ -480,6 +496,11 @@ document.addEventListener('DOMContentLoaded', () => {
     images = Array.from(document.querySelectorAll('.img-clickable'));
   });
 
+  // Listen for gallery infinite scroll updates to refresh the images array
+  document.addEventListener('galleryUpdated', () => {
+    images = Array.from(document.querySelectorAll('.img-clickable'));
+  });
+
   window.addEventListener('popstate', () => {
     if (modal.classList.contains('active')) {
       closeModal();