JakeBreath
e97c3b9da0
Inline banners and per-row status text reported action results all over the app; they are replaced by a small toast stack (bottom-right, Level 3 floating well styling) that only speaks for actions: successes fade, errors stay until dismissed, and form-field validation stays inline. Destructive actions no longer use bespoke inline confirm steps (the library detail's Confirm delete button) or fire immediately (duplicate copies/items, delete page selections, temp cleanup, upload discard, job cancellation): they all go through one promise-based confirm dialog (confirmAction) with a danger variant, Escape/backdrop to cancel.
496 lines
18 KiB
TypeScript
496 lines
18 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { useMemo, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { Button, Spinner, inputClass } from "@/components/ui";
|
|
import { api, errorMessage } from "@/lib/api";
|
|
import { cn } from "@/lib/cn";
|
|
import { formatBytes } from "@/lib/format";
|
|
import type {
|
|
DuplicateEntry,
|
|
VisualGroupsResponse,
|
|
VisualMatchesResponse,
|
|
} from "@/lib/types";
|
|
import { confirmAction } from "@/store/confirm";
|
|
import { toast } from "@/store/toasts";
|
|
|
|
const ALGORITHMS = [
|
|
{ value: "ahash", label: "aHash" },
|
|
{ value: "dhash", label: "dHash" },
|
|
{ value: "phash", label: "pHash" },
|
|
{ value: "whash", label: "wHash" },
|
|
];
|
|
|
|
interface DeleteResult {
|
|
deleted: string[];
|
|
errors: { j_id?: string; location?: number; error: string }[];
|
|
}
|
|
|
|
function MemberCard({
|
|
entry,
|
|
selected,
|
|
onToggle,
|
|
}: {
|
|
entry: DuplicateEntry;
|
|
selected: boolean;
|
|
onToggle: () => void;
|
|
}) {
|
|
const preview =
|
|
entry.thumbnail_url ?? `/api/files/${entry.j_id}/thumbnail/`;
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"overflow-hidden rounded-lg border bg-ctp-base",
|
|
selected ? "border-ctp-mauve" : "border-ctp-surface0",
|
|
)}
|
|
>
|
|
<button type="button" onClick={onToggle} className="block w-full text-left">
|
|
<div className="relative aspect-square overflow-hidden bg-ctp-mantle">
|
|
<img
|
|
src={preview}
|
|
alt={entry.j_id}
|
|
loading="lazy"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<span
|
|
className={cn(
|
|
"absolute left-2 top-2 flex h-5 w-5 items-center justify-center rounded border text-[11px]",
|
|
selected
|
|
? "border-ctp-mauve bg-ctp-mauve text-ctp-crust"
|
|
: "border-ctp-surface1 bg-ctp-crust/70 text-transparent",
|
|
)}
|
|
>
|
|
✓
|
|
</span>
|
|
{entry.similarity !== undefined ? (
|
|
<span className="absolute right-2 top-2 rounded-sm bg-ctp-crust/80 px-1.5 py-0.5 font-mono text-[10px] text-ctp-peach">
|
|
{entry.similarity}%
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</button>
|
|
<div className="px-2 py-1.5">
|
|
<Link
|
|
to={`/detail/${entry.j_id}`}
|
|
className="font-mono text-[10px] text-ctp-blue hover:underline"
|
|
>
|
|
{entry.j_id}
|
|
</Link>
|
|
<p
|
|
className="truncate font-mono text-[11px] text-ctp-subtext1"
|
|
title={entry.filename}
|
|
>
|
|
{entry.filename}
|
|
</p>
|
|
<p className="font-mono text-[10px] text-ctp-overlay0">
|
|
{formatBytes(entry.size)}
|
|
{entry.location_count > 1 ? ` · ${entry.location_count} copies` : ""}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function DuplicatesPage() {
|
|
const queryClient = useQueryClient();
|
|
const [threshold, setThreshold] = useState(80);
|
|
const [algorithms, setAlgorithms] = useState<string[]>(
|
|
ALGORITHMS.map((algorithm) => algorithm.value),
|
|
);
|
|
const [groupsPage, setGroupsPage] = useState(1);
|
|
const [groupsEnabled, setGroupsEnabled] = useState(false);
|
|
const [selected, setSelected] = useState<string[]>([]);
|
|
const [dismissed, setDismissed] = useState<string[]>([]);
|
|
const [similarTarget, setSimilarTarget] = useState("");
|
|
|
|
const exactQuery = useQuery({
|
|
queryKey: ["duplicates-md5"],
|
|
queryFn: () =>
|
|
api<{ count: number; groups: DuplicateEntry[] }>("/api/duplicates/md5/"),
|
|
});
|
|
|
|
const groupsQuery = useQuery({
|
|
queryKey: [
|
|
"duplicate-groups",
|
|
groupsEnabled,
|
|
threshold,
|
|
algorithms,
|
|
groupsPage,
|
|
],
|
|
queryFn: () =>
|
|
api<VisualGroupsResponse>("/api/duplicates/visual_groups/", {
|
|
method: "POST",
|
|
json: { threshold, algorithms, page: groupsPage },
|
|
}),
|
|
enabled: groupsEnabled && algorithms.length > 0,
|
|
});
|
|
|
|
const similarMutation = useMutation({
|
|
mutationFn: (jId: string) =>
|
|
api<VisualMatchesResponse>("/api/duplicates/visual/", {
|
|
method: "POST",
|
|
json: { j_id: jId, threshold, algorithms },
|
|
}),
|
|
onError: (error) => toast.error(errorMessage(error)),
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (payload: { j_ids?: string[]; location_ids?: number[] }) =>
|
|
api<DeleteResult>("/api/delete/", { method: "POST", json: payload }),
|
|
onSuccess: (result) => {
|
|
setSelected([]);
|
|
const noun = result.deleted.length === 1 ? "entry" : "entries";
|
|
toast.ok(`Deleted ${result.deleted.length} ${noun}.`);
|
|
if (result.errors.length > 0) {
|
|
toast.error(
|
|
`${result.errors.length} ${noun} could not be deleted: ` +
|
|
result.errors.map((entry) => entry.error).join(", "),
|
|
);
|
|
}
|
|
void queryClient.invalidateQueries({ queryKey: ["duplicates-md5"] });
|
|
void queryClient.invalidateQueries({ queryKey: ["duplicate-groups"] });
|
|
void queryClient.invalidateQueries({ queryKey: ["files"] });
|
|
},
|
|
onError: (error) => toast.error(errorMessage(error)),
|
|
});
|
|
|
|
async function handleDeleteCopy(locationId: number) {
|
|
const confirmed = await confirmAction({
|
|
title: "Delete this copy?",
|
|
description:
|
|
"The file at this path is removed. The item stays as long as another copy exists.",
|
|
confirmLabel: "Delete copy",
|
|
danger: true,
|
|
});
|
|
if (confirmed) deleteMutation.mutate({ location_ids: [locationId] });
|
|
}
|
|
|
|
async function handleDeleteItem(jId: string) {
|
|
const confirmed = await confirmAction({
|
|
title: `Delete ${jId}?`,
|
|
description: "The item and all of its copies are removed from the library.",
|
|
confirmLabel: "Delete",
|
|
danger: true,
|
|
});
|
|
if (confirmed) deleteMutation.mutate({ j_ids: [jId] });
|
|
}
|
|
|
|
async function handleDeleteSelected() {
|
|
const confirmed = await confirmAction({
|
|
title: `Delete ${selected.length} item(s)?`,
|
|
description: "They are removed from the library along with all of their copies.",
|
|
confirmLabel: "Delete",
|
|
danger: true,
|
|
});
|
|
if (confirmed) deleteMutation.mutate({ j_ids: selected });
|
|
}
|
|
|
|
function toggleSelected(jId: string) {
|
|
setSelected((current) =>
|
|
current.includes(jId)
|
|
? current.filter((value) => value !== jId)
|
|
: [...current, jId],
|
|
);
|
|
}
|
|
|
|
function toggleAlgorithm(value: string) {
|
|
setGroupsPage(1);
|
|
setAlgorithms((current) =>
|
|
current.includes(value)
|
|
? current.filter((algorithm) => algorithm !== value)
|
|
: [...current, value],
|
|
);
|
|
}
|
|
|
|
const groups = useMemo(
|
|
() =>
|
|
(groupsQuery.data?.groups ?? []).filter(
|
|
(group) =>
|
|
!dismissed.includes(
|
|
group.members
|
|
.map((member) => member.j_id)
|
|
.sort()
|
|
.join("|"),
|
|
),
|
|
),
|
|
[groupsQuery.data, dismissed],
|
|
);
|
|
|
|
return (
|
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-8">
|
|
<header>
|
|
<h1 className="text-lg font-semibold">Duplicates</h1>
|
|
<p className="mt-1 text-sm text-ctp-overlay0">
|
|
Clean up exact copies and visually similar files.
|
|
</p>
|
|
</header>
|
|
|
|
<section className="flex flex-col gap-3">
|
|
<header className="flex items-center justify-between gap-2">
|
|
<h2 className="text-sm font-semibold text-ctp-subtext1">
|
|
Exact duplicates
|
|
</h2>
|
|
<span className="font-mono text-[11px] text-ctp-overlay0">
|
|
{exactQuery.data?.count ?? 0} item(s)
|
|
</span>
|
|
</header>
|
|
{exactQuery.isPending ? (
|
|
<Spinner className="h-5 w-5" />
|
|
) : (exactQuery.data?.count ?? 0) === 0 ? (
|
|
<p className="rounded-lg border border-dashed border-ctp-surface1 px-3 py-6 text-center text-xs text-ctp-overlay0">
|
|
No items exist at multiple paths.
|
|
</p>
|
|
) : (
|
|
<div className="flex flex-col gap-3">
|
|
{exactQuery.data?.groups.map((group) => (
|
|
<div
|
|
key={group.j_id}
|
|
className="flex flex-col gap-3 rounded-lg border border-ctp-surface0 bg-ctp-base p-3 lg:flex-row"
|
|
>
|
|
<div className="w-32 shrink-0">
|
|
<div className="aspect-square overflow-hidden rounded-md bg-ctp-mantle">
|
|
<img
|
|
src={
|
|
group.thumbnail_url ??
|
|
`/api/files/${group.j_id}/thumbnail/`
|
|
}
|
|
alt={group.j_id}
|
|
loading="lazy"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
<Link
|
|
to={`/detail/${group.j_id}`}
|
|
className="font-mono text-[10px] text-ctp-blue hover:underline"
|
|
>
|
|
{group.j_id}
|
|
</Link>
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate font-mono text-xs text-ctp-subtext1">
|
|
{group.filename}
|
|
</p>
|
|
<ul className="mt-2 flex flex-col gap-1.5">
|
|
{(group.locations ?? []).map((location) => (
|
|
<li
|
|
key={location.id}
|
|
className="flex items-center justify-between gap-3 rounded-md border border-ctp-surface0 px-2 py-1"
|
|
>
|
|
<span className="truncate font-mono text-[11px] text-ctp-overlay1" title={location.rel_path}>
|
|
{location.rel_path}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => void handleDeleteCopy(location.id)}
|
|
className="shrink-0 rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-red transition hover:bg-ctp-red/15"
|
|
>
|
|
delete copy
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="shrink-0">
|
|
<Button
|
|
variant="danger"
|
|
className="px-2 py-1 text-xs"
|
|
onClick={() => void handleDeleteItem(group.j_id)}
|
|
>
|
|
Delete item
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="flex flex-col gap-3">
|
|
<h2 className="text-sm font-semibold text-ctp-subtext1">
|
|
Visual similarity
|
|
</h2>
|
|
<div className="flex flex-col gap-3 rounded-lg border border-ctp-surface0 bg-ctp-base p-3">
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<label className="flex flex-1 items-center gap-3 text-xs text-ctp-subtext0">
|
|
Similarity {threshold}%
|
|
<input
|
|
type="range"
|
|
min={50}
|
|
max={100}
|
|
value={threshold}
|
|
onChange={(event) => {
|
|
setGroupsPage(1);
|
|
setThreshold(Number(event.target.value));
|
|
}}
|
|
className="flex-1"
|
|
/>
|
|
</label>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{ALGORITHMS.map((algorithm) => (
|
|
<label
|
|
key={algorithm.value}
|
|
className={cn(
|
|
"cursor-pointer rounded-full border px-2.5 py-1 font-mono text-[11px] transition",
|
|
algorithms.includes(algorithm.value)
|
|
? "border-ctp-mauve/40 bg-ctp-mauve/15 text-ctp-mauve"
|
|
: "border-ctp-surface1 text-ctp-subtext0 hover:border-ctp-surface2",
|
|
)}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
className="hidden"
|
|
checked={algorithms.includes(algorithm.value)}
|
|
onChange={() => toggleAlgorithm(algorithm.value)}
|
|
/>
|
|
{algorithm.label}
|
|
</label>
|
|
))}
|
|
</div>
|
|
<Button
|
|
onClick={() => {
|
|
setGroupsEnabled(true);
|
|
void groupsQuery.refetch();
|
|
}}
|
|
disabled={algorithms.length === 0 || groupsQuery.isFetching}
|
|
>
|
|
{groupsQuery.isFetching ? "Comparing…" : "Find groups"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-end gap-2 border-t border-ctp-surface0 pt-3">
|
|
<label className="flex flex-col gap-1 text-xs text-ctp-subtext0">
|
|
Find files similar to
|
|
<input
|
|
className={cn(inputClass, "w-32 font-mono")}
|
|
placeholder="J-123"
|
|
value={similarTarget}
|
|
onChange={(event) => setSimilarTarget(event.target.value)}
|
|
/>
|
|
</label>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => similarMutation.mutate(similarTarget.trim())}
|
|
disabled={!similarTarget.trim() || similarMutation.isPending}
|
|
>
|
|
{similarMutation.isPending ? "Searching…" : "Search"}
|
|
</Button>
|
|
</div>
|
|
|
|
{similarMutation.data ? (
|
|
similarMutation.data.count === 0 ? (
|
|
<p className="text-xs text-ctp-overlay0">
|
|
No matches at {similarMutation.data.threshold}% similarity.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
|
|
{similarMutation.data.matches.map((entry) => (
|
|
<MemberCard
|
|
key={entry.j_id}
|
|
entry={entry}
|
|
selected={selected.includes(entry.j_id)}
|
|
onToggle={() => toggleSelected(entry.j_id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
) : null}
|
|
</div>
|
|
|
|
{groupsEnabled ? (
|
|
groupsQuery.isPending ? (
|
|
<Spinner className="h-5 w-5" />
|
|
) : groups.length === 0 ? (
|
|
<p className="rounded-lg border border-dashed border-ctp-surface1 px-3 py-6 text-center text-xs text-ctp-overlay0">
|
|
No groups at {threshold}% similarity.
|
|
</p>
|
|
) : (
|
|
<div className="flex flex-col gap-4">
|
|
{groups.map((group) => {
|
|
const groupKey = group.members
|
|
.map((member) => member.j_id)
|
|
.sort()
|
|
.join("|");
|
|
return (
|
|
<div
|
|
key={groupKey}
|
|
className="rounded-lg border border-ctp-surface0 bg-ctp-base p-3"
|
|
>
|
|
<header className="flex items-center justify-between gap-2">
|
|
<span className="font-mono text-[11px] text-ctp-overlay0">
|
|
{group.size} similar items
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDismissed((current) => [...current, groupKey])}
|
|
className="rounded-md px-1.5 py-0.5 font-mono text-[10px] text-ctp-overlay0 transition hover:bg-ctp-surface0 hover:text-ctp-text"
|
|
>
|
|
dismiss
|
|
</button>
|
|
</header>
|
|
<div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
|
|
{group.members.map((member) => (
|
|
<MemberCard
|
|
key={member.j_id}
|
|
entry={member}
|
|
selected={selected.includes(member.j_id)}
|
|
onToggle={() => toggleSelected(member.j_id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<div className="flex items-center justify-between gap-3">
|
|
<Button
|
|
variant="secondary"
|
|
disabled={groupsPage <= 1 || groupsQuery.isFetching}
|
|
onClick={() => setGroupsPage((page) => Math.max(1, page - 1))}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<span className="font-mono text-xs text-ctp-overlay0">
|
|
Page {groupsQuery.data?.page ?? groupsPage} ·{" "}
|
|
{groupsQuery.data?.count ?? 0} group(s)
|
|
</span>
|
|
<Button
|
|
variant="secondary"
|
|
disabled={!groupsQuery.data?.has_next || groupsQuery.isFetching}
|
|
onClick={() => setGroupsPage((page) => page + 1)}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
) : null}
|
|
|
|
{selected.length > 0 ? (
|
|
<div className="sticky bottom-16 z-20 flex items-center justify-between gap-3 rounded-lg border border-ctp-mauve/40 bg-ctp-surface0 px-3 py-2 shadow-[0_4px_12px_rgba(17,17,27,0.6)]">
|
|
<span className="text-xs text-ctp-subtext1">
|
|
{selected.length} selected
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
className="px-2 py-1 text-xs"
|
|
onClick={() => setSelected([])}
|
|
>
|
|
Clear
|
|
</Button>
|
|
<Button
|
|
variant="danger"
|
|
className="px-2 py-1 text-xs"
|
|
disabled={deleteMutation.isPending}
|
|
onClick={() => void handleDeleteSelected()}
|
|
>
|
|
{deleteMutation.isPending ? "Deleting…" : "Delete selected"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|