llink/js/desktop/src/features/particles/delete-particle-overlay.tsx

import { useCallback, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDestructiveOverlay } from '@/components/confirm-destructive-overlay';
import { softDeleteParticle } from '@/lib/firestore-particles';
import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
import type { Particle } from '@/api/types';
import { useSuspendPlayback } from '@/hooks/use-suspend-playback';

interface DeleteParticleOverlayProps {
  networkId: string;
  streamId: string;
  particle: Particle;
  userId: string;
  onClose: () => void;
}

export function DeleteParticleOverlay({
  networkId,
  streamId,
  particle,
  userId,
  onClose,
}: DeleteParticleOverlayProps) {
  useSuspendPlayback(true, 'delete-particle');

  const [deleting, setDeleting] = useState(false);

  const handleDelete = useCallback(async () => {
    if (deleting) return;
    setDeleting(true);
    try {
      const docPath = toFirestoreDocPath(
        particlePath(networkId, [streamId, particle.id]),
      );
      await softDeleteParticle(docPath, userId);
      toast.success('Particle deleted');
      onClose();
    } catch (e) {
      const message =
        e instanceof Error ? e.message : 'Failed to delete particle';
      toast.error(message);
      setDeleting(false);
    }
  }, [deleting, networkId, onClose, particle.id, streamId, userId]);

  return (
    <ConfirmDestructiveOverlay
      title="Delete this particle?"
      description={
        <p>
          This cannot be undone. Other viewers will see a "This particle was
          deleted" message in its place.
        </p>
      }
      confirmLabel="Delete"
      pendingLabel="Deleting…"
      isPending={deleting}
      onConfirm={handleDelete}
      onClose={onClose}
    />
  );
}