import filter work and cleanup

app/static/js/modal-pagination.js

@@ -159,8 +159,8 @@ document.addEventListener('DOMContentLoaded', () => {
   async function fetchAutocomplete(query) {
     try {
       const url = query
-        ? `/api/tags/search?q=${encodeURIComponent(query)}&limit=8`
-        : `/api/tags/search?limit=8`;
+        ? `/api/tags/search?q=${encodeURIComponent(query)}&limit=8&exclude_kind=archive`
+        : `/api/tags/search?limit=8&exclude_kind=archive`;
       const r = await fetch(url);
       const j = await r.json();
       renderAutocomplete(j.tags || []);
@@ -296,6 +296,10 @@ document.addEventListener('DOMContentLoaded', () => {
     modal.classList.add('active');
     updateImage(index);
     history.replaceState({ modalIndex: index }, '', window.location.href);
+    // Focus the tag input after modal opens
+    if (tagInput) {
+      setTimeout(() => tagInput.focus(), 100);
+    }
   }
 
   function closeModal() {

app/static/js/showcase.js

@@ -133,10 +133,12 @@
     }
     item.appendChild(imgEl);
 
-    if (img.tags && img.tags.length > 0) {
+    // Filter out archive tags from display (they're still visible in modal)
+    const visibleTags = (img.tags || []).filter(t => t.kind !== 'archive');
+    if (visibleTags.length > 0) {
       const overlay = document.createElement('div');
       overlay.className = 'tag-overlay';
-      img.tags.forEach(t => {
+      visibleTags.forEach(t => {
         const chip = document.createElement('a');
         chip.className = 'tag-chip';
         chip.href = `/gallery?tag=${encodeURIComponent(t.name)}`;

app/static/style.css

@@ -890,17 +890,51 @@ header {
 /*------------------------------------------------------------------------------
   Settings
 ------------------------------------------------------------------------------*/
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  max-width: 1600px;
+  margin: 1.5rem auto;
+  padding: 0 1.5rem;
+  align-items: start;
+}
+.settings-column {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+@media (max-width: 1200px) {
+  .settings-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .settings-column:first-child {
+    grid-column: 1 / -1;
+    flex-direction: row;
+  }
+  .settings-column:first-child > .settings-container {
+    flex: 1;
+  }
+}
+@media (max-width: 768px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
+    padding: 0 1rem;
+  }
+  .settings-column:first-child {
+    flex-direction: column;
+  }
+}
 .settings-container {
-  max-width: 500px;
-  margin: 2rem auto;
-  padding: 2rem;
+  padding: 1.5rem;
   background: var(--panel);
   border-radius: 8px;
   box-shadow: var(--shadow-2);
   border: 1px solid rgba(255, 255, 255, 0.08);
 }
-.settings-section h2 {
-  margin-bottom: 1.5rem;
+.settings-section h2,
+.settings-info h2 {
+  margin-bottom: 1rem;
   text-align: center;
   color: var(--text);
   font-weight: 500;
@@ -933,7 +967,6 @@ header {
 .danger-btn:hover { background-color: var(--btn-danger-hover); }
 
 .settings-info {
-  margin-top: 2rem;
   font-size: 0.9rem;
   color: var(--text-muted);
   text-align: center;
@@ -1101,6 +1134,26 @@ header {
   border-color: var(--btn-primary);
   background: rgba(255, 255, 255, 0.12);
 }
+
+/* Select dropdowns - ensure dark theme for options */
+select.form-input {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2.5rem;
+}
+select.form-input option,
+select.form-input optgroup {
+  background: #1a1a1a;
+  color: #ffffff;
+}
+select.form-input optgroup {
+  font-weight: 600;
+  color: #a0a0a0;
+}
+
 .form-button {
   padding: 0.75rem;
   background-color: var(--btn-primary);