Spatial consistency

import { useState } from 'react';
import { useAnimate, useReducedMotion } from 'motion/react';

type Email = { id: string; from: string; subject: string };

// An emptied slot closes completely, padding and border included.
const CLOSED = { height: 0, paddingTop: 0, paddingBottom: 0, borderWidth: 0 };

export function Inbox({ initial }: { initial: Email[] }) {
  const [emails, setEmails] = useState(initial);
  const [archived, setArchived] = useState(0);
  const [archiveButton, animate] = useAnimate<HTMLButtonElement>();
  const reduceMotion = useReducedMotion();

  // The row flies into the Archive button, so people see where it went.
  async function archive(id: string, button: HTMLElement) {
    const row = button.closest('li')!;
    const from = row.getBoundingClientRect();
    const to = archiveButton.current.getBoundingClientRect();
    const x = to.x + to.width / 2 - (from.x + from.width / 2);
    const y = to.y + to.height / 2 - (from.y + from.height / 2);
    await animate(
      row,
      reduceMotion ? { opacity: 0 } : { x, y, scale: 0.2, opacity: 0 },
      { duration: reduceMotion ? 0.15 : 0.45, ease: 'easeInOut' }
    );
    setArchived((count) => count + 1);
    animate(archiveButton.current, { scale: [1, 1.1, 1] }, { duration: 0.3 });
    // Close the empty slot so the rows below slide up.
    await animate(row, CLOSED, { duration: 0.2 });
    setEmails((list) => list.filter((email) => email.id !== id));
  }

  return (
    <section className='w-96 rounded-2xl border bg-background text-sm'>
      <header className='flex justify-end border-b p-2'>
        <button ref={archiveButton} type='button' className='px-3 py-1.5'>
          Archive ({archived})
        </button>
      </header>
      <ul>
        {emails.map((email) => (
          <li
            key={email.id}
            className='flex items-center gap-3 overflow-hidden border-b px-4 py-3 last:border-b-0'
          >
            <span className='w-24 shrink-0 font-medium'>{email.from}</span>
            <span className='flex-1 truncate text-muted-foreground'>
              {email.subject}
            </span>
            <button
              type='button'
              onClick={(event) => archive(email.id, event.currentTarget)}
              className='rounded-md px-2 py-1 text-xs hover:bg-muted'
            >
              Archive
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}