useAnimatedList.ts

'use client';

import { useEffect, useRef, useState } from 'react';

interface Identifiable {
  id: string;
}

export interface AnimatedEntry<T> {
  item: T;
  /** True while the item has been removed from the source list but is still
   *  animating out — kept in the DOM until its exit animation ends. */
  leaving: boolean;
}

/**
 * Drives CSS-only enter/leave animations for a keyed list — the small piece a
 * library like react-transition-group would otherwise provide.
 *
 * When an item disappears from `items` it isn't dropped immediately; it's kept
 * in the rendered set (flagged `leaving`) at its previous position so a CSS
 * exit animation can play. The consumer calls `handleExited(id)` from
 * `onAnimationEnd` to finally remove it. Present items always follow the
 * incoming (already-sorted) order, so live inserts still land correctly.
 */
export function useAnimatedList<T extends Identifiable>(items: T[]): {
  entries: AnimatedEntry<T>[];
  handleExited: (id: string) => void;
} {
  const [entries, setEntries] = useState<AnimatedEntry<T>[]>(() =>
    items.map((item) => ({ item, leaving: false })),
  );

  // Index each present id held last render, so a leaving card fades out where
  // it was instead of jumping to the end of the column.
  const lastIndex = useRef<Map<string, number>>(
    new Map(items.map((item, i) => [item.id, i])),
  );

  useEffect(() => {
    setEntries((current) => {
      const nextIds = new Set(items.map((i) => i.id));

      // Present items, in the incoming sorted order.
      const result: AnimatedEntry<T>[] = items.map((item) => ({
        item,
        leaving: false,
      }));

      // Anything currently rendered but gone from the new list → still leaving.
      const leaving = current.filter((e) => !nextIds.has(e.item.id));
      for (const entry of leaving) {
        const idx = Math.min(
          lastIndex.current.get(entry.item.id) ?? result.length,
          result.length,
        );
        result.splice(idx, 0, { item: entry.item, leaving: true });
      }

      return result;
    });

    lastIndex.current = new Map(items.map((item, i) => [item.id, i]));
  }, [items]);

  const handleExited = (id: string) =>
    setEntries((current) =>
      current.filter((e) => !(e.item.id === id && e.leaving)),
    );

  return { entries, handleExited };
}