admin/deduper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fullsize lightbox in review UI

Browse Source 
- Click any thumbnail to view larger in dark overlay
- Escape or click to dismiss
- Shows file path at bottom of lightbox
- 29 tests passing
This commit is contained in:
admin
2026-04-28 00:46:48 +00:00
parent c039029790
commit 994bf27a79
1 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/review.rs
View File

@@ -190,9 +190,14 @@ h1 { text-align: center; margin-bottom: 20px; color: #e94560; }
.status { text-align: center; margin-top: 16px; font-size: 1.1em; color: #e94560; }
.deleted { opacity: 0.3; pointer-events: none; }
.ignored { opacity: 0.2; pointer-events: none; }
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.92); z-index: 1000; justify-content: center; align-items: center; cursor: zoom-out; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: 8px; }
.lightbox .lb-path { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #aaa; font-size: 0.85em; background: rgba(0,0,0,0.7); padding: 6px 16px; border-radius: 8px; max-width: 90vw; text-align: center; word-break: break-all; }
</style>
</head>
<body>
<div class="lightbox" id="lightbox" onclick="closeLightbox()"><img id="lb-img" src=""><div class="lb-path" id="lb-path"></div></div>
<h1>🔍 deduper — Review Duplicates</h1>
"#);
@@ -235,7 +240,7 @@ h1 { text-align: center; margin-bottom: 20px; color: #e94560; }
html.push_str(&format!(
r#"<div class="image-card" id="card-{idx}-{pidx}">
<img src="{data_uri}" alt="{display_path}" title="Click to view full path">
<img src="{data_uri}" alt="{display_path}" title="Click for full size" onclick="openLightbox(this.src, '{display_path}')">
<div class="path">{display_path}</div>
<div class="size">{size}</div>
<label><input type="checkbox" class="del-check" data-group="{idx}" value="{display_path}"> Delete this</label>
@@ -314,6 +319,16 @@ async function shutdown() {
try { await fetch('/shutdown', {method: 'POST'}); } catch(e) {}
document.getElementById('status').textContent = 'Review complete. You can close this tab.';
}
function openLightbox(src, path) {
document.getElementById('lb-img').src = src;
document.getElementById('lb-path').textContent = path;
document.getElementById('lightbox').classList.add('active');
}
function closeLightbox() {
document.getElementById('lightbox').classList.remove('active');
}
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });
</script>
</body>
</html>