From c16d0a38a8ba4c65a83690670b225fa9daa406cc Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 20 Mar 2026 12:20:03 -0400
Subject: [PATCH] feat: add tabbed layout to settings page with Overview,
 Import, Maintenance tabs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/static/style.css        |  72 +++++++++++++++++
 app/templates/settings.html | 154 ++++++++++++++++++++++++------------
 2 files changed, 176 insertions(+), 50 deletions(-)

diff --git a/app/static/style.css b/app/static/style.css
index c85fd6d..56d4c60 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -1212,6 +1212,78 @@ header {
 /*------------------------------------------------------------------------------
   Settings
 ------------------------------------------------------------------------------*/
+
+/* Settings page title */
+.settings-title {
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+/* Settings tab bar */
+.settings-tab-bar {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  max-width: 1600px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 1.5rem;
+}
+
+.settings-tab-btn {
+  padding: 0.4rem 1.1rem;
+  border-radius: 999px;
+  border: 1px solid var(--filter-border);
+  background: var(--filter-bg);
+  color: var(--filter-fg);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.settings-tab-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.settings-tab-btn.is-active {
+  background: var(--filter-active-bg);
+  border-color: var(--filter-active-border);
+  color: var(--filter-active-fg);
+}
+
+/* Settings tab panels */
+.settings-tab-panel {
+  display: none;
+}
+
+.settings-tab-panel.is-active {
+  display: block;
+}
+
+/* Maintenance tab — visually subdued */
+.settings-tab-panel[data-tab="maintenance"] .settings-container {
+  opacity: 0.8;
+}
+.settings-tab-panel[data-tab="maintenance"] .settings-container:hover {
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+/* Two-column layout for Import tab */
+.settings-two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .settings-two-col {
+    grid-template-columns: 1fr;
+  }
+}
 .settings-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
diff --git a/app/templates/settings.html b/app/templates/settings.html
index bc25ab9..2ad19ec 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -2,7 +2,17 @@
 {% block title %}Settings{% endblock %}
 
 {% block content %}
-<h1 style="text-align:center; margin-top: 1rem;">Settings</h1>
+<h1 class="settings-title">Settings</h1>
+
+<!-- Tab bar -->
+<div class="settings-tab-bar" role="tablist">
+  <button class="settings-tab-btn is-active" data-tab="overview" role="tab">Overview</button>
+  <button class="settings-tab-btn" data-tab="import" role="tab">Import</button>
+  <button class="settings-tab-btn" data-tab="maintenance" role="tab">Maintenance</button>
+</div>
+
+<!-- ===== OVERVIEW TAB ===== -->
+<div class="settings-tab-panel is-active" data-tab="overview">
 
 <!-- System Stats (Full Width at Top) -->
 <div class="settings-grid-full">
@@ -126,20 +136,6 @@
           </p>
         </div>
 
-        <div class="queue-actions" style="margin-top: 0.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap;">
-          <button id="regenMissingThumbsBtn" class="btn secondary-btn">Regenerate Missing Thumbnails</button>
-          <button id="reapplyArtistTagsBtn" class="btn secondary-btn">Reapply Artist Tags from Paths</button>
-          <button id="cleanupOrphanedTagsBtn" class="btn secondary-btn">Cleanup Orphaned Tags</button>
-        </div>
-
-        <div id="celeryWorkerInfo" style="margin-top: 1rem;">
-          <p style="color: var(--text-muted); font-size: 0.85rem;">
-            Workers: <strong id="workerCount">-</strong> |
-            Active Tasks: <strong id="activeTasks">-</strong>
-          </p>
-        </div>
-      </div>
-
       <!-- Task List with Filters -->
       <div id="taskListSection" style="margin-top: 1.5rem;">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
@@ -215,9 +211,15 @@
   </div>
 </div>
 
-<div class="settings-grid">
+</div><!-- end overview tab panel -->
+
+<!-- ===== IMPORT TAB ===== -->
+<div class="settings-tab-panel" data-tab="import">
+<div class="settings-grid-full">
+<div class="settings-two-col">
+
   <!-- Column 1: Import Filters -->
-  <div class="settings-column">
+  <div>
     <div class="settings-container">
       <div class="settings-section">
         <h2>Import Filters</h2>
@@ -266,8 +268,8 @@
     </div>
   </div>
 
-  <!-- Column 2: Deletion Tools -->
-  <div class="settings-column">
+  <!-- Column 2: Deletion Tools + Duplicate Detection -->
+  <div>
     <div class="settings-container">
       <div class="settings-section">
         <h2>Delete Images by Tag</h2>
@@ -305,7 +307,7 @@
       </div>
     </div>
 
-    <div class="settings-container">
+    <div class="settings-container" style="margin-top: 1rem;">
       <div class="settings-section">
         <h2>Clean Up Existing Images</h2>
         <p class="settings-description">Scan and remove images that don't meet filter criteria.</p>
@@ -362,48 +364,76 @@
         </div>
       </div>
     </div>
-  </div>
-</div><!-- end settings-grid -->
 
-<!-- Duplicate Detection (Full Width) -->
-<div class="settings-container" style="max-width: 1200px; margin: 2rem auto;">
-  <div class="settings-section">
-    <h2>Duplicate Detection</h2>
-    <p class="settings-description">Scan for visually similar images using perceptual hash comparison. The first image in each group has the highest resolution and will be kept.</p>
+    <!-- Duplicate Detection -->
+    <div class="settings-container" style="margin-top: 1rem;">
+      <div class="settings-section">
+        <h2>Duplicate Detection</h2>
+        <p class="settings-description">Scan for visually similar images using perceptual hash comparison. The first image in each group has the highest resolution and will be kept.</p>
 
-    <div class="form-card" style="margin-bottom: 1rem;">
-      <div class="form-group">
-        <label class="form-label">Hamming Distance Threshold</label>
-        <select id="dupThreshold" class="form-input">
-          <option value="5">Strict (5) - Nearly identical</option>
-          <option value="10" selected>Normal (10) - Minor variations</option>
-          <option value="15">Loose (15) - Similar images</option>
-          <option value="20">Very Loose (20) - Broadly similar</option>
-        </select>
-        <p class="form-help">Lower values find only very similar images. Higher values find more potential duplicates but may include false positives.</p>
+        <div class="form-card" style="margin-bottom: 1rem;">
+          <div class="form-group">
+            <label class="form-label">Hamming Distance Threshold</label>
+            <select id="dupThreshold" class="form-input">
+              <option value="5">Strict (5) - Nearly identical</option>
+              <option value="10" selected>Normal (10) - Minor variations</option>
+              <option value="15">Loose (15) - Similar images</option>
+              <option value="20">Very Loose (20) - Broadly similar</option>
+            </select>
+            <p class="form-help">Lower values find only very similar images. Higher values find more potential duplicates but may include false positives.</p>
+          </div>
+
+          <button type="button" id="scanDuplicatesBtn" class="btn primary-btn" style="width: 100%;">Scan for Duplicates</button>
+        </div>
+
+        <div id="dupResults" style="display: none;">
+          <div class="import-stats" style="margin-bottom: 1rem;">
+            <h3>Scan Results</h3>
+            <p>Found <strong id="dupGroupCount">0</strong> group(s) of potential duplicates.</p>
+          </div>
+
+          <div id="dupGroups"></div>
+
+          <div id="dupActions" style="margin-top: 1rem; display: none;">
+            <p class="form-help" style="margin-bottom: 0.75rem;">
+              Selected for deletion: <strong id="dupSelectedCount">0</strong> image(s)
+              <span style="color: var(--text-muted);">(The highest resolution image in each group is protected)</span>
+            </p>
+            <button type="button" id="deleteDuplicatesBtn" class="btn danger-btn" disabled>Delete Selected Duplicates</button>
+          </div>
+        </div>
       </div>
-
-      <button type="button" id="scanDuplicatesBtn" class="btn primary-btn" style="width: 100%;">Scan for Duplicates</button>
     </div>
+  </div><!-- end column 2 -->
 
-    <div id="dupResults" style="display: none;">
-      <div class="import-stats" style="margin-bottom: 1rem;">
-        <h3>Scan Results</h3>
-        <p>Found <strong id="dupGroupCount">0</strong> group(s) of potential duplicates.</p>
+</div><!-- end settings-two-col -->
+</div><!-- end settings-grid-full -->
+</div><!-- end import tab panel -->
+
+<!-- ===== MAINTENANCE TAB ===== -->
+<div class="settings-tab-panel" data-tab="maintenance">
+<div class="settings-grid-full">
+  <div class="settings-container">
+    <div class="settings-section">
+      <h2>Maintenance Tools</h2>
+      <p class="settings-description">Background operations and worker management.</p>
+
+      <div class="queue-actions" style="margin-top: 0.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap;">
+        <button id="regenMissingThumbsBtn" class="btn secondary-btn">Regenerate Missing Thumbnails</button>
+        <button id="reapplyArtistTagsBtn" class="btn secondary-btn">Reapply Artist Tags from Paths</button>
+        <button id="cleanupOrphanedTagsBtn" class="btn secondary-btn">Cleanup Orphaned Tags</button>
       </div>
 
-      <div id="dupGroups"></div>
-
-      <div id="dupActions" style="margin-top: 1rem; display: none;">
-        <p class="form-help" style="margin-bottom: 0.75rem;">
-          Selected for deletion: <strong id="dupSelectedCount">0</strong> image(s)
-          <span style="color: var(--text-muted);">(The highest resolution image in each group is protected)</span>
+      <div id="celeryWorkerInfo" style="margin-top: 1rem;">
+        <p style="color: var(--text-muted); font-size: 0.85rem;">
+          Workers: <strong id="workerCount">-</strong> |
+          Active Tasks: <strong id="activeTasks">-</strong>
         </p>
-        <button type="button" id="deleteDuplicatesBtn" class="btn danger-btn" disabled>Delete Selected Duplicates</button>
       </div>
     </div>
   </div>
 </div>
+</div><!-- end maintenance tab panel -->
 
 <style>
   .clickable-stat {
@@ -1816,4 +1846,28 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 });
 </script>
+
+<script>
+(function() {
+  const tabBtns = document.querySelectorAll('.settings-tab-btn');
+  const tabPanels = document.querySelectorAll('.settings-tab-panel');
+
+  function activateTab(tabName) {
+    tabBtns.forEach(btn => btn.classList.toggle('is-active', btn.dataset.tab === tabName));
+    tabPanels.forEach(panel => panel.classList.toggle('is-active', panel.dataset.tab === tabName));
+    history.replaceState({}, '', `#${tabName}`);
+  }
+
+  tabBtns.forEach(btn => {
+    btn.addEventListener('click', () => activateTab(btn.dataset.tab));
+  });
+
+  // Restore from URL hash on load
+  const hash = window.location.hash.replace('#', '');
+  const validTabs = ['overview', 'import', 'maintenance'];
+  if (validTabs.includes(hash)) {
+    activateTab(hash);
+  }
+})();
+</script>
 {% endblock %}