JezzWTF/phokus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): improve thumbnail cleanup UX with live state and time warning

Browse Source 
Clear stale stats during cleanup, show zero when done, and warn when the
file count is large enough to take a few minutes.
This commit is contained in:
LyAhn
2026-06-09 06:45:24 +01:00
parent ceb51f8fad
commit b89e7406e9
1 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SettingsModal.tsx
+24 -16
View File
@@ -666,31 +666,39 @@ export function SettingsModal() {
<div className="rounded-xl border border-white/[0.07] bg-black/20 p-4"> <div className="rounded-xl border border-white/[0.07] bg-black/20 p-4">
<p className="text-[11px] uppercase tracking-[0.14em] text-gray-600">Orphaned files</p> <p className="text-[11px] uppercase tracking-[0.14em] text-gray-600">Orphaned files</p>
<p className="mt-2 text-2xl font-semibold text-white"> <p className="mt-2 text-2xl font-semibold text-white">
{thumbnailCleanupResult {cleaningThumbnails
? thumbnailCleanupResult.deleted_count.toLocaleString() ? "—"
: thumbnailInfo : thumbnailCleanupResult
? thumbnailInfo.count.toLocaleString() ? "0"
: "—"} : thumbnailInfo
? thumbnailInfo.count.toLocaleString()
: "—"}
</p> </p>
</div> </div>
<div className="rounded-xl border border-white/[0.07] bg-black/20 p-4"> <div className="rounded-xl border border-white/[0.07] bg-black/20 p-4">
<p className="text-[11px] uppercase tracking-[0.14em] text-gray-600">Reclaimable</p> <p className="text-[11px] uppercase tracking-[0.14em] text-gray-600">Reclaimable</p>
<p className={`mt-2 text-2xl font-semibold ${thumbnailCleanupResult ? "text-emerald-300" : "text-white"}`}> <p className={`mt-2 text-2xl font-semibold ${thumbnailCleanupResult ? "text-emerald-300" : "text-white"}`}>
{thumbnailCleanupResult {cleaningThumbnails
? `−${thumbnailCleanupResult.freed_mb.toFixed(1)} MB freed` ? "—"
: thumbnailInfo : thumbnailCleanupResult
? `${thumbnailInfo.size_mb.toFixed(1)} MB` ? "0 MB"
: "—"} : thumbnailInfo
? `${thumbnailInfo.size_mb.toFixed(1)} MB`
: "—"}
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-center justify-between gap-4 rounded-xl border border-white/[0.07] bg-black/20 p-4"> <div className="flex items-center justify-between gap-4 rounded-xl border border-white/[0.07] bg-black/20 p-4">
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
{thumbnailCleanupResult {cleaningThumbnails
? `Removed ${thumbnailCleanupResult.deleted_count.toLocaleString()} orphaned thumbnail${thumbnailCleanupResult.deleted_count === 1 ? "" : "s"}.` ? "Scanning and removing orphaned thumbnails…"
: thumbnailInfo && thumbnailInfo.count === 0 : thumbnailCleanupResult
? "No orphaned thumbnails found." ? `Removed ${thumbnailCleanupResult.deleted_count.toLocaleString()} file${thumbnailCleanupResult.deleted_count === 1 ? "" : "s"}, freed ${thumbnailCleanupResult.freed_mb.toFixed(1)} MB.`
: "Remove thumbnails no longer associated with any indexed image."} : thumbnailInfo && thumbnailInfo.count === 0
? "No orphaned thumbnails found."
: thumbnailInfo && thumbnailInfo.count > 1000
? "Remove thumbnails no longer associated with any indexed image. This may take a few minutes for large collections."
: "Remove thumbnails no longer associated with any indexed image."}
</p> </p>
<button <button
className="shrink-0 rounded-lg bg-white/[0.07] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-white/[0.11] disabled:cursor-not-allowed disabled:opacity-40" className="shrink-0 rounded-lg bg-white/[0.07] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-white/[0.11] disabled:cursor-not-allowed disabled:opacity-40"
@@ -706,7 +714,7 @@ export function SettingsModal() {
}} }}
disabled={cleaningThumbnails || thumbnailCleanupResult !== null || (thumbnailInfo !== null && thumbnailInfo.count === 0)} disabled={cleaningThumbnails || thumbnailCleanupResult !== null || (thumbnailInfo !== null && thumbnailInfo.count === 0)}
> >
{cleaningThumbnails ? "Cleaning..." : "Clean up"} {cleaningThumbnails ? "Cleaning…" : "Clean up"}
</button> </button>
</div> </div>
</div> </div>