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; } .status { text-align: center; margin-top: 16px; font-size: 1.1em; color: #e94560; }
.deleted { opacity: 0.3; pointer-events: none; } .deleted { opacity: 0.3; pointer-events: none; }
.ignored { opacity: 0.2; 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> </style>
</head> </head>
<body> <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> <h1>🔍 deduper — Review Duplicates</h1>
"#); "#);
@@ -235,7 +240,7 @@ h1 { text-align: center; margin-bottom: 20px; color: #e94560; }
html.push_str(&format!( html.push_str(&format!(
r#"<div class="image-card" id="card-{idx}-{pidx}"> 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="path">{display_path}</div>
<div class="size">{size}</div> <div class="size">{size}</div>
<label><input type="checkbox" class="del-check" data-group="{idx}" value="{display_path}"> Delete this</label> <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) {} try { await fetch('/shutdown', {method: 'POST'}); } catch(e) {}
document.getElementById('status').textContent = 'Review complete. You can close this tab.'; 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> </script>
</body> </body>
</html> </html>