53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { useEffect } from "react";
|
|
import { Text, View } from "react-native";
|
|
import { Trash2 } from "lucide-react-native";
|
|
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. Same cadence as
|
|
// desktop — a beat long enough to read "this was deleted," not so long it
|
|
// stalls the stream.
|
|
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 (
|
|
<View className="flex-1 items-center justify-center px-8">
|
|
<Trash2 color="rgba(255,255,255,0.4)" size={28} strokeWidth={1.5} />
|
|
<Text className="text-white/70 mt-3 text-base font-medium">
|
|
This particle was deleted
|
|
</Text>
|
|
{deleter ? (
|
|
<Text className="text-white/40 mt-1 text-xs">
|
|
by {deleter.displayName}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|