ui(duplicates): show parent folder + full-path tooltip on each thumbnail

Two copies of IMG_1234.jpg sitting in different folders looked
identical on the duplicates grid — same filename, same dimensions,
same Best heuristic. The user had no way to pick which copy to keep
without opening each in the preview overlay.

Backend: include filepath in the per-member payload from
GET /api/v1/library/duplicates/groups (was filename-only).

Frontend: a black 65% strip at the bottom of every duplicate
thumbnail showing the parent folder name (the actual discriminator
when filenames match), with the full filepath surfaced via the
native title tooltip on hover. The dimensions chip moves from
bottom-left to top-left so the bottom strip can run edge-to-edge.

memberToPhoto stops faking filepath=filename (a years-old workaround
that broke any code path needing the real path); the synthetic Photo
the grid hands to PhotoThumbnail now carries the real filepath.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claudio
2026-05-11 00:16:48 +02:00
parent f743733edd
commit f290784bf3
3 changed files with 50 additions and 16 deletions

View File

@@ -733,6 +733,7 @@ async def get_duplicate_groups(
select( select(
Photo.id, Photo.id,
Photo.filename, Photo.filename,
Photo.filepath,
Photo.taken_at, Photo.taken_at,
Photo.file_size, Photo.file_size,
Photo.width, Photo.width,
@@ -751,22 +752,25 @@ async def get_duplicate_groups(
) )
).all() ).all()
# Bucket members by group_id. # Bucket members by group_id. filepath is included so the
# Duplicates view can show "which folder does this copy live in"
# — the discriminator the user needs to pick a winner.
groups: dict[str, list[dict]] = {} groups: dict[str, list[dict]] = {}
for row in rows: for row in rows:
member = { member = {
"id": row[0], "id": row[0],
"filename": row[1], "filename": row[1],
"taken_at": row[2].isoformat() if row[2] else None, "filepath": row[2],
"file_size": row[3], "taken_at": row[3].isoformat() if row[3] else None,
"width": row[4], "file_size": row[4],
"height": row[5], "width": row[5],
"thumb_small": row[6], "height": row[6],
"file_hash": row[7], "thumb_small": row[7],
"folder_id": row[8], "file_hash": row[8],
"media_type": row[9], "folder_id": row[9],
"media_type": row[10],
} }
groups.setdefault(row[10], []).append(member) groups.setdefault(row[11], []).append(member)
def earliest(g: list[dict]) -> str: def earliest(g: list[dict]) -> str:
# Used as a secondary sort key. Photos with no taken_at sort last # Used as a secondary sort key. Photos with no taken_at sort last

View File

@@ -450,19 +450,28 @@ const DuplicateGroupSection = memo(function DuplicateGroupSection({
Keep this Keep this
</button> </button>
)} )}
{/* Dimensions chip — bottom-LEFT. Neutral metadata variant {/* Dimensions chip — top-LEFT (Best / Keep this lives
* matches the family. Rare collision with a manual rating * top-right; bottom is reserved for the path strip). */}
* (also bottom-left) is tolerated: rated duplicates are
* uncommon in practice. */}
<div <div
className={cn( className={cn(
'pointer-events-none absolute bottom-1 left-1 z-10 font-mono', 'pointer-events-none absolute left-1.5 top-1.5 z-10 font-mono',
THUMB_BADGE_BASE, THUMB_BADGE_BASE,
THUMB_BADGE_NEUTRAL THUMB_BADGE_NEUTRAL
)} )}
> >
{formatDimensions(member)} {formatDimensions(member)}
</div> </div>
{/* Path strip — full-width across the bottom. Shows the
* parent folder name (the actual discriminator when two
* copies share the same filename), truncating from the
* right if necessary. Full filepath surfaces via the
* native tooltip on hover. */}
<div
className="pointer-events-none absolute bottom-0 left-0 right-0 z-10 truncate bg-black/65 px-1.5 py-0.5 text-[10px] text-white"
title={photoByMemberId.get(member.id)!.filepath}
>
{duplicatePathLabel(photoByMemberId.get(member.id)!.filepath)}
</div>
</div> </div>
) )
})} })}
@@ -505,6 +514,23 @@ function formatBytes(n: number): string {
return `${n}B` return `${n}B`
} }
/** Short label for the bottom path strip on a duplicate thumbnail.
* Goal: tell two copies-with-the-same-filename apart at a glance, so
* we want the parent folder name — that's almost always the
* discriminator (different shoots, different years, different
* upload sources). When the parent folder is unhelpful (e.g. the
* filename is itself sitting at the root) we fall back to the file
* basename. Long folder names get text-overflow-ellipsis'd by the
* enclosing strip's `truncate`. */
function duplicatePathLabel(filepath: string): string {
if (!filepath) return ''
const parts = filepath.split('/').filter(Boolean)
if (parts.length === 0) return filepath
if (parts.length === 1) return parts[0]
// The second-to-last segment IS the parent directory.
return parts[parts.length - 2]
}
/** Adapt a DuplicateGroupMember (the slim API shape) to a Photo, which /** Adapt a DuplicateGroupMember (the slim API shape) to a Photo, which
* is what PhotoThumbnail expects. We deliberately set is_duplicate=false * is what PhotoThumbnail expects. We deliberately set is_duplicate=false
* on the synthetic Photo so the duplicate badge isn't drawn on every * on the synthetic Photo so the duplicate badge isn't drawn on every
@@ -512,7 +538,7 @@ function formatBytes(n: number): string {
function memberToPhoto(m: DuplicateGroupMember): Photo { function memberToPhoto(m: DuplicateGroupMember): Photo {
return { return {
id: m.id, id: m.id,
filepath: m.filename, // good enough for the RAW/video extension regex filepath: m.filepath,
filename: m.filename, filename: m.filename,
media_type: m.media_type, media_type: m.media_type,
width: m.width, width: m.width,

View File

@@ -538,6 +538,10 @@ export const library = {
export interface DuplicateGroupMember { export interface DuplicateGroupMember {
id: string id: string
filename: string filename: string
/** Full path of the file on disk. Powers the path strip in the
* Duplicates view so the user can tell two same-named-different-
* folder copies apart at a glance. */
filepath: string
taken_at: string | null taken_at: string | null
file_size: number | null file_size: number | null
width: number | null width: number | null