Notification center

"use client";

import {
  useEffect,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type ReactNode,
} from "react";
import { Button } from "./button";
import { EmptyInbox, EmptyState } from "./empty-state";
import { Icon } from "./icon";
import { Popover, type PopoverPlacement } from "./popover";
import "./notification-center.css";

export type NotificationItem = {
  id: string;
  /** Who or what, and what happened, e.g. "Priya Raman mentioned you". */
  title: string;
  /** A line of detail under the title. */
  text?: ReactNode;
  /** When, already formatted, e.g. "5 min ago". */
  time: string;
  /** ISO date for a time element. */
  dateTime?: string;
  /** The heading it is listed under, e.g. "Today" or "Earlier". Items keep their order within it. */
  group?: string;
  unread?: boolean;
  /** Makes the title a link to the thing it is about. */
  href?: string;
};

export type NotificationCenterProps = Omit<ComponentProps<"div">, "children" | "title"> & {
  items: NotificationItem[];
  /** Called with an id when an item is marked read. */
  onMarkRead?: (id: string) => void;
  /** Called with an id when a read item is marked unread. Without it, read items have no toggle. */
  onMarkUnread?: (id: string) => void;
  /** Shows "Mark all as read" in the header. */
  onMarkAllRead?: () => void;
  /** Shows a dismiss button on each item. */
  onDismiss?: (id: string) => void;
  /** Called when an item's title is activated. Without href, the title becomes a button. */
  onOpenItem?: (id: string) => void;
  /** Heading of the panel and name of the bell. */
  title?: string;
  /** Where the panel opens against the bell. */
  placement?: PopoverPlacement;
  /** Replaces the default empty state. */
  empty?: ReactNode;
};

const ITEM = ".eq-notification-center-item";

/** Focuses an item's title link or button, or the item itself when it has neither. */
function focusItem(row: Element | undefined) {
  if (!(row instanceof HTMLElement)) return false;
  const open = row.querySelector<HTMLElement>(".eq-notification-center-open");
  (open ?? row).focus();
  return true;
}

export function NotificationCenter({
  items,
  onMarkRead,
  onMarkUnread,
  onMarkAllRead,
  onDismiss,
  onOpenItem,
  title = "Notifications",
  placement = "bottom-end",
  empty,
  className,
  ...rest
}: NotificationCenterProps) {
  const base = useId();
  const panelId = `${base}-panel`;
  const headingId = `${base}-heading`;
  const panel = useRef<HTMLDivElement>(null);
  const refocus = useRef<number | null>(null);
  const unread = items.filter((item) => item.unread).length;
  const [message, setMessage] = useState("");
  const announced = useRef(unread);

  // Announce changes to the unread count, not the count the page loaded with.
  useEffect(() => {
    if (announced.current === unread) return;
    announced.current = unread;
    setMessage(unread === 0 ? "No unread notifications" : `${unread} unread notification${unread === 1 ? "" : "s"}`);
  }, [unread]);

  // After a dismiss or a toggle removed the focused button, focus the item now in that
  // place, or the panel when none is left. Nothing moves while focus is still in the panel.
  useEffect(() => {
    const index = refocus.current;
    refocus.current = null;
    const surface = panel.current;
    if (index === null || !surface || surface.contains(document.activeElement)) return;
    const rows = surface.querySelectorAll(ITEM);
    if (!focusItem(rows[Math.min(index, rows.length - 1)])) surface.focus();
  }, [items]);

  const groups: { label: string; items: { item: NotificationItem; index: number }[] }[] = [];
  items.forEach((item, index) => {
    const label = item.group ?? "";
    const found = groups.find((group) => group.label === label);
    if (found) found.items.push({ item, index });
    else groups.push({ label, items: [{ item, index }] });
  });

  function rowIndex(element: Element) {
    const row = element.closest(ITEM);
    const rows = Array.from(panel.current?.querySelectorAll(ITEM) ?? []);
    return row ? Math.max(0, rows.indexOf(row)) : 0;
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
    if (!(event.target instanceof Element)) return;
    const row = event.target.closest(ITEM);
    if (!row) return;
    const rows = Array.from(event.currentTarget.querySelectorAll(ITEM));
    const at = rows.indexOf(row);
    const last = rows.length - 1;
    const next =
      event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowDown" ? Math.min(at + 1, last) : Math.max(at - 1, 0);
    event.preventDefault();
    event.stopPropagation();
    focusItem(rows[next]);
  }

  return (
    <div {...rest} className={["eq-notification-center", className].filter(Boolean).join(" ")}>
      <Button
        className="eq-notification-center-bell"
        variant="ghost"
        square
        popoverTarget={panelId}
        aria-label={unread > 0 ? `${title}, ${unread} unread` : title}
        lead={<Icon name="bell" size="m" />}
        trail={
          unread > 0 ? (
            <span key={unread} className="eq-notification-center-count" aria-hidden="true">
              {unread > 99 ? "99+" : unread}
            </span>
          ) : undefined
        }
      />
      <span className="eq-notification-center-status" role="status">
        {message}
      </span>
      <Popover
        ref={panel}
        id={panelId}
        className="eq-notification-center-panel"
        placement={placement}
        role="dialog"
        aria-labelledby={headingId}
        tabIndex={-1}
      >
        <div className="eq-notification-center-header">
          <h2 className="eq-notification-center-title" id={headingId}>
            {title}
          </h2>
          {onMarkAllRead && items.length > 0 && (
            <Button
              className="eq-notification-center-all"
              size="s"
              variant="ghost"
              // Stays focusable at zero unread, so focus is never dropped by the click that emptied it.
              aria-disabled={unread === 0 || undefined}
              onClick={() => {
                if (unread > 0) onMarkAllRead();
              }}
            >
              Mark all as read
            </Button>
          )}
        </div>
        {items.length === 0 ? (
          <div className="eq-notification-center-empty">
            {empty ?? (
              <EmptyState size="s" icon={<EmptyInbox />} title="You are all caught up">
                Mentions, reviews and alerts will show up here.
              </EmptyState>
            )}
          </div>
        ) : (
          <div className="eq-notification-center-body" onKeyDown={handleKeyDown}>
            {groups.map((group) => (
              <div className="eq-notification-center-group" key={group.label}>
                {group.label && (
                  <div className="eq-notification-center-group-label" aria-hidden="true">
                    {group.label}
                  </div>
                )}
                <ul className="eq-notification-center-list" aria-label={group.label || title}>
                  {group.items.map(({ item, index }) => {
                    const nameId = `${base}-name-${index}`;
                    const name = (
                      <>
                        {item.unread && <span className="eq-notification-center-hidden">Unread: </span>}
                        <span className="eq-notification-center-name" id={nameId}>
                          {item.title}
                        </span>
                      </>
                    );
                    const toggle = item.unread ? onMarkRead : onMarkUnread;
                    return (
                      <li
                        key={item.id}
                        className="eq-notification-center-item"
                        data-unread={item.unread || undefined}
                        data-open={item.href || onOpenItem ? "" : undefined}
                        tabIndex={-1}
                      >
                        <span className="eq-notification-center-dot" aria-hidden="true" />
                        <div className="eq-notification-center-content">
                          {item.href ? (
                            <a className="eq-notification-center-open" href={item.href} onClick={() => onOpenItem?.(item.id)}>
                              {name}
                            </a>
                          ) : onOpenItem ? (
                            <button type="button" className="eq-notification-center-open" onClick={() => onOpenItem(item.id)}>
                              {name}
                            </button>
                          ) : (
                            <span>{name}</span>
                          )}
                          {item.text != null && <span className="eq-notification-center-text">{item.text}</span>}
                          {item.dateTime ? (
                            <time className="eq-notification-center-time" dateTime={item.dateTime}>
                              {item.time}
                            </time>
                          ) : (
                            <span className="eq-notification-center-time">{item.time}</span>
                          )}
                        </div>
                        {(toggle || onDismiss) && (
                          <div className="eq-notification-center-actions">
                            {toggle && (
                              <Button
                                className="eq-notification-center-action"
                                size="s"
                                square
                                variant="quiet"
                                aria-label={item.unread ? "Mark as read" : "Mark as unread"}
                                aria-describedby={nameId}
                                lead={<Icon name={item.unread ? "check" : "mail"} size="s" />}
                                onClick={(event) => {
                                  // Without the opposite handler this button goes away; focus then moves to the row.
                                  refocus.current = rowIndex(event.currentTarget);
                                  toggle(item.id);
                                }}
                              />
                            )}
                            {onDismiss && (
                              <Button
                                className="eq-notification-center-action"
                                size="s"
                                square
                                variant="quiet"
                                aria-label="Dismiss"
                                aria-describedby={nameId}
                                lead={<Icon name="close" size="s" />}
                                onClick={(event) => {
                                  refocus.current = rowIndex(event.currentTarget);
                                  onDismiss(item.id);
                                }}
                              />
                            )}
                          </div>
                        )}
                      </li>
                    );
                  })}
                </ul>
              </div>
            ))}
          </div>
        )}
      </Popover>
    </div>
  );
}