56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Trash2 } from 'lucide-react';
|
|
import type { Particle } from '@/api/types';
|
|
import { useNetwork } from '@/hooks/use-networks';
|
|
import { resolveHumanDisplay } from '@/lib/humans';
|
|
|
|
// How long to linger on a tombstone before auto-advancing. Matches the
|
|
// "reading" cadence of a short text particle.
|
|
const TOMBSTONE_DURATION_MS = 2000;
|
|
|
|
interface DeletedParticleViewProps {
|
|
particle: Particle;
|
|
networkId: string;
|
|
paused: boolean;
|
|
onEnded: () => void;
|
|
}
|
|
|
|
export function DeletedParticleView({
|
|
particle,
|
|
networkId,
|
|
paused,
|
|
onEnded,
|
|
}: DeletedParticleViewProps) {
|
|
const network = useNetwork(networkId);
|
|
const deleterId =
|
|
'deleted_by_human_id' in particle
|
|
? particle.deleted_by_human_id
|
|
: undefined;
|
|
const deleter = deleterId
|
|
? resolveHumanDisplay(deleterId, network?.humans)
|
|
: null;
|
|
|
|
useEffect(() => {
|
|
if (paused) return;
|
|
|
|
const timeout = setTimeout(onEnded, TOMBSTONE_DURATION_MS);
|
|
return () => clearTimeout(timeout);
|
|
}, [paused, onEnded, particle.id]);
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center px-8">
|
|
<div className="flex flex-col items-center gap-3 text-center">
|
|
<Trash2 className="text-muted-foreground size-6" />
|
|
<p className="text-foreground text-base font-medium">
|
|
This particle was deleted
|
|
</p>
|
|
{deleter && (
|
|
<p className="text-muted-foreground text-xs">
|
|
by {deleter.displayName}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|