bvandeusen/imagerepo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add tabbed layout to settings page with Overview, Import, Maintenance tabs

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-20 12:20:03 -04:00
parent bf7d528917
commit c16d0a38a8
2 changed files with 176 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/style.css
+72
View File
@@ -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);
app/templates/settings.html
+104 -50
View File
@@ -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 %}