Notification Center

"use client";

// A bell that opens every notification in one panel. The badge counts what's
// unread; the panel lists everything, newest first, grouped into Today,
// Yesterday and Earlier when the times are real dates. Opening one marks it
// read; the cross that replaces its time on hover, or a swipe to the left on
// touch, dismisses it, and the rows below slide up into the gap.
//
// Works controlled (`notifications` + `onNotificationsChange`) or on its own
// (`defaultNotifications`). Arrow keys move between rows and Delete removes
// one; Escape or a press outside closes the panel and hands focus back to the
// bell.

import NumberFlow from "@number-flow/react";
import { AnimatePresence, motion, useReducedMotion, type PanInfo } from "motion/react";
import {
  useCallback,
  useEffect,
  useRef,
  useState,
  useSyncExternalStore,
  type CSSProperties,
  type KeyboardEvent,
  type ReactNode,