Drag-and-Drop Interactions & Astryx Ref Forwarding

import {
  useEffect,
  useMemo,
  useRef,
  useState,
  type Dispatch,
  type PointerEvent as ReactPointerEvent,
  type SetStateAction,
} from 'react';
import { DRAG_THRESHOLD } from '../data';
import type { ColumnId, DragState, DropTarget, WorkItem } from '../types';

export function useKanbanDrag(
  items: WorkItem[],
  setItems: Dispatch<SetStateAction<WorkItem[]>>,
) {
  const [drag, setDrag] = useState<DragState | null>(null);

  // Live DOM registries for hit-testing. These nodes arrive through the
  // forwarded-refs contract: LayoutContent hands us its scrollable node,
  // Card hands us its root div (see getColumnRef / getCardRef below).
  const columnEls = useRef(new Map<ColumnId, HTMLElement>());
  const cardEls = useRef(new Map<string, HTMLElement>());
  const columnRefCbs = useRef(
    new Map<ColumnId, (el: HTMLDivElement | null) => void>(),
  );
  const cardRefCbs = useRef(
    new Map<string, (el: HTMLDivElement | null) => void>(),
  );
  const teardownRef = useRef<(() => void) | null>(null);

  // Stable ref callbacks so registering an element never churns across renders.
  const getColumnRef = (id: ColumnId) => {
    let cb = columnRefCbs.current.get(id);
    if (!cb) {
      cb = el => {
        if (el) columnEls.current.set(id, el);
        else columnEls.current.delete(id);
      };
      columnRefCbs.current.set(id, cb);
    }
    return cb;
  };

  const getCardRef = (id: string) => {
    let cb = cardRefCbs.current.get(id);
    if (!cb) {
      cb = el => {
        if (el) cardEls.current.set(id, el);
        else cardEls.current.delete(id);
      };
      cardRefCbs.current.set(id, cb);
    }
    return cb;
  };

  const itemsByColumn = useMemo(() => {
    const map: Record<ColumnId, WorkItem[]> = {
      todo: [],
      'in-progress': [],
      'in-review': [],
      done: [],
    };
    for (const item of items) {
      map[item.column].push(item);
    }
    return map;
  }, [items]);

  // Hit-tests the pointer against the forwarded nodes in the registries.
  // getBoundingClientRect() on Card/LayoutContent nodes is the raw geometry
  // the ref contract gives us on demand — read at event time, never during render.
  const computeTarget = (
    px: number,
    py: number,
    draggedId: string,
  ): DropTarget | null => {
    for (const [colId, el] of Array.from(columnEls.current.entries())) {
      const r = el.getBoundingClientRect();
      if (px < r.left || px > r.right || py < r.top || py > r.bottom) {
        continue;
      }

      const ids = itemsByColumn[colId]
        .filter(it => it.id !== draggedId)
        .map(it => it.id);

      let index = ids.length;
      for (let i = 0; i < ids.length; i++) {
        const cardEl = cardEls.current.get(ids[i]);
        if (!cardEl) continue;
        const cr = cardEl.getBoundingClientRect();
        if (py < cr.top + cr.height / 2) {
          index = i;
          break;
        }
      }
      return { column: colId, index };
    }
    return null;
  };

  // Rebuild the flat item list so the dragged card lands at the resolved slot
  // while every other card keeps its relative order.
  const commitDrag = (id: string, target: DropTarget) => {
    setItems(prev => {
      const moved = prev.find(it => it.id === id);
      if (!moved) return prev;

      const rest = prev.filter(it => it.id !== id);
      const updated: WorkItem = { ...moved, column: target.column };
      const colItems = rest.filter(it => it.column === target.column);
      const anchor = colItems[target.index];

      if (!anchor) return [...rest, updated];
      const at = rest.indexOf(anchor);
      return [...rest.slice(0, at), updated, ...rest.slice(at)];
    });
  };

  const onCardPointerDown = (e: ReactPointerEvent, id: string) => {
    if (e.button !== 0) return;
    // Let the card's own controls (the actions menu) handle the press.
    if (
      (e.target as HTMLElement).closest(
        'button, [role="menuitem"], [role="menu"]',
      )
    ) {
      return;
    }

    const el = cardEls.current.get(id);
    if (!el) return;

    const rect = el.getBoundingClientRect();
    const startX = e.clientX;
    const startY = e.clientY;
    const offsetX = startX - rect.left;
    const offsetY = startY - rect.top;
    const { width, height } = rect;

    let started = false;
    let target: DropTarget | null = null;

    const onMove = (ev: PointerEvent) => {
      if (
        !started &&
        Math.abs(ev.clientX - startX) + Math.abs(ev.clientY - startY) <
          DRAG_THRESHOLD
      ) {
        return;
      }
      started = true;
      target = computeTarget(ev.clientX, ev.clientY, id);
      setDrag({
        id,
        width,
        height,
        offsetX,
        offsetY,
        pointerX: ev.clientX,
        pointerY: ev.clientY,
        target,
      });
    };

    const onUp = () => {
      teardownRef.current?.();
      if (started && target) commitDrag(id, target);
      setDrag(null);
    };

    const teardown = () => {
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
      teardownRef.current = null;
    };
    teardownRef.current = teardown;

    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  };

  const isDragging = drag !== null;

  // Suppress selection while dragging and detach listeners on unmount.
  useEffect(() => {
    if (!isDragging) return;
    const previous = document.body.style.userSelect;
    document.body.style.userSelect = 'none';
    return () => {
      document.body.style.userSelect = previous;
    };
  }, [isDragging]);

  useEffect(() => () => teardownRef.current?.(), []);

  return {
    drag,
    itemsByColumn,
    getColumnRef,
    getCardRef,
    onCardPointerDown,
  };
}

import { Toolbar } from '@astryxdesign/core/Toolbar';
import { Heading, Text } from '@astryxdesign/core/Text';
import { Badge } from '@astryxdesign/core/Badge';
import { Selector } from '@astryxdesign/core/Selector';
import { Divider } from '@astryxdesign/core/Divider';
import { IconButton } from '@astryxdesign/core/IconButton';
import { Button } from '@astryxdesign/core/Button';
import { Icon } from '@astryxdesign/core/Icon';
import { HStack } from '@astryxdesign/core/Layout';
import { useTranslator } from '@astryxdesign/core/i18n';
import {
  ArrowsUpDownIcon,
  FunnelIcon,
  MagnifyingGlassIcon,
  MoonIcon,
  SunIcon,
  LanguageIcon,
  PlusIcon,
} from '@heroicons/react/24/outline';
import { styles } from '../styles';
import { usePreferences } from '../providers';

interface BoardToolbarProps {
  totalTasks: number;
  sprint: string;
  onSprintChange: (sprint: string) => void;
  dragStatus?: string; // shown while a drag is in progress
}

export function BoardToolbar({
  totalTasks,
  sprint,
  onSprintChange,
  dragStatus,
}: BoardToolbarProps) {
  const t = useTranslator();
  const { mode, setMode, locale, setLocale } = usePreferences();

  return (
    <Toolbar
      label="Board actions"
      gap={2}
      startContent={
        <HStack gap={2} vAlign="center">
          <Heading level={3}>{t('@app.board.title')}</Heading>
          <Badge label={totalTasks} variant="neutral" />
          {dragStatus ? (
            <Text type="supporting" color="secondary" hasTabularNumbers>
              {dragStatus}
            </Text>
          ) : null}
        </HStack>
      }
      endContent={
        <HStack gap={2}>
          {/* … sprint selector, icon buttons, theme + language toggles,
              and the Add task button from lesson 10 — unchanged … */}
        </HStack>
      }
    />
  );
}

'use client';

import { useState } from 'react';
import { Section } from '@astryxdesign/core/Section';
import {
  Layout,
  LayoutHeader,
  LayoutContent,
  HStack,
  VStack,
} from '@astryxdesign/core/Layout';
import { styles } from '../styles';
import { BoardCard } from './BoardCard';
import { BoardColumn } from './BoardColumn';
import { BoardToolbar } from './BoardToolbar';
import { useKanbanDrag } from '../hooks/useKanbanDrag';
import { COLUMNS, INITIAL_ITEMS } from '../data';
import type { ColumnId } from '../types';
import type { ColumnId, WorkItem } from '../types';

export default function KanbanBoard() {
  const [items, setItems] = useState<WorkItem[]>(INITIAL_ITEMS);
  const [sprint, setSprint] = useState('003');

  // Temporary — real moves arrive with the drag hook in lesson 11.
  const moveItem = (id: string, to: ColumnId) => {
    alert(`Move task ${id} to ${to}`);
  };

  const { drag, itemsByColumn, getColumnRef, getCardRef, onCardPointerDown } =
    useKanbanDrag(items, setItems);

  const moveItem = (id: string, to: ColumnId) => {
    setItems(prev =>
      prev.map(item => (item.id === id ? { ...item, column: to } : item)),
    );
  };

  return (
    <Section height="100dvh">
      <Layout
        height="fill"
        header={
          <LayoutHeader hasDivider padding={4}>
            <BoardToolbar
              totalTasks={INITIAL_ITEMS.length}
              totalTasks={items.length}
              sprint={sprint}
              onSprintChange={setSprint}
              dragStatus={
                drag
                  ? `Dragging ${drag.id} → ${
                      drag.target
                        ? `${drag.target.column} #${drag.target.index}`
                        : 'no target'
                    }`
                  : undefined
              }
            />
          </LayoutHeader>
        }
        content={
          <LayoutContent padding={0}>
            <HStack gap={4} xstyle={styles.boardColumns}>
              {COLUMNS.map(col => {
                const items = INITIAL_ITEMS.filter(it => it.column === col.id);
                return (
              {COLUMNS.map(col => (
                  <BoardColumn
                    key={col.id}
                    meta={col}
                    count={items.length}
                    count={itemsByColumn[col.id].length}
                    contentRef={() => {}}
                    contentRef={getColumnRef(col.id)}
                  >
                    {/* null children trigger BoardColumn's EmptyState fallback */}
                    {items.length > 0 ? (
                    {itemsByColumn[col.id].length > 0 ? (
                      <VStack gap={2}>
                        {items.map(item => (
                        {itemsByColumn[col.id].map(item => (
                          <BoardCard
                            key={item.id}
                            item={item}
                            cardRef={() => {}}
                            cardRef={getCardRef(item.id)}
                            onPointerDown={() => {}}
                            onPointerDown={onCardPointerDown}
                            onMove={moveItem}
                          />
                        ))}
                      </VStack>
                    ) : null}
                  </BoardColumn>
                );
              })}
              ))}
            </HStack>
          </LayoutContent>
        }
      />
    </Section>
  );
}