Build a Fast, Accessible React Notification Bell Dropdown (with Real‑Time Updates)

import React, {useEffect, useId, useRef, useState} from 'react'
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'

type Notification = {
  id: string
  title: string
  body?: string
  href?: string
  iconUrl?: string
  createdAt: string
  read: boolean
}

type Page = { items: Notification[]; nextCursor?: string | null }

async function fetchNotifications(cursor?: string): Promise<Page> {
  const url = cursor ? `/api/notifications?cursor=${cursor}` : '/api/notifications'
  const res = await fetch(url, { credentials: 'include' })
  if (!res.ok) throw new Error('Failed to load')
  return res.json()
}

async function markRead(id: string): Promise<{ id: string }> {
  const res = await fetch(`/api/notifications/${id}/read`, { method: 'POST', credentials: 'include' })
  if (!res.ok) throw new Error('Failed to mark read')
  return res.json()
}

export function useNotifications() {
  // Cursor-based pagination; keep the list small in memory
  const query = useQuery({
    queryKey: ['notifications', 'page-1'],
    queryFn: () => fetchNotifications(),
    staleTime: 30_000,
    refetchOnWindowFocus: false,
  })
  return query
}

export function NotificationBell() {
  const { data, isLoading, isError, refetch } = useNotifications()
  const qc = useQueryClient()
  const [open, setOpen] = useState(false)
  const btnRef = useRef<HTMLButtonElement | null>(null)
  const panelRef = useRef<HTMLDivElement | null>(null)
  const menuId = useId()

  const items = data?.items ?? []
  const unreadCount = items.reduce((acc, it) => acc + (it.read ? 0 : 1), 0)

  // Close on outside click
  useEffect(() => {
    if (!open) return
    const onDown = (e: MouseEvent) => {
      if (!panelRef.current || !btnRef.current) return
      const target = e.target as Node
      if (!panelRef.current.contains(target) && !btnRef.current.contains(target)) {
        setOpen(false)
        btnRef.current?.focus()
      }
    }
    document.addEventListener('mousedown', onDown)
    return () => document.removeEventListener('mousedown', onDown)
  }, [open])

  // Keyboard handling on the button
  const onButtonKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
      e.preventDefault(); setOpen(true)
      requestAnimationFrame(() => {
        const first = panelRef.current?.querySelector<HTMLElement>('[role="menuitem"]')
        first?.focus()
      })
    }
  }

  // Optimistic mark-as-read
  const readMutation = useMutation({
    mutationFn: (id: string) => markRead(id),
    onMutate: async (id: string) => {
      await qc.cancelQueries({ queryKey: ['notifications', 'page-1'] })
      const prev = qc.getQueryData<Page>(['notifications', 'page-1'])
      if (prev) {
        const next: Page = { ...prev, items: prev.items.map(it => it.id === id ? { ...it, read: true } : it) }
        qc.setQueryData(['notifications', 'page-1'], next)
      }
      return { prev }
    },
    onError: (_err, _id, ctx) => {
      if (ctx?.prev) qc.setQueryData(['notifications', 'page-1'], ctx.prev)
    },
    onSettled: () => qc.invalidateQueries({ queryKey: ['notifications', 'page-1'] })
  })

  const onItemActivate = (id: string, href?: string) => {
    readMutation.mutate(id)
    if (href) window.location.assign(href)
  }

  return (
    <div className='relative'>
      <button
        ref={btnRef}
        aria-label='Notifications'
        aria-expanded={open}
        aria-controls={menuId}
        className='relative inline-flex items-center justify-center h-10 w-10 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800'
        onClick={() => setOpen(v => !v)}
        onKeyDown={onButtonKeyDown}
      >
        {/* Bell icon placeholder */}
        <svg aria-hidden='true' viewBox='0 0 24 24' className='h-6 w-6 text-neutral-700 dark:text-neutral-200'>
          <path d='M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2Zm6-6v-5a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2Z' fill='currentColor' />
        </svg>
        {unreadCount > 0 && (
          <span aria-live='polite' className='absolute -top-1 -right-1 min-w-5 h-5 px-1 rounded-full bg-red-600 text-white text-xs grid place-items-center'>
            {unreadCount > 99 ? '99+' : unreadCount}
          </span>
        )}
      </button>

      {open && (
        <div
          ref={panelRef}
          id={menuId}
          role='menu'
          aria-label='Notifications list'
          className='absolute right-0 mt-2 w-[380px] max-h-[60vh] overflow-auto rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-xl'
        >
          <header className='sticky top-0 z-10 bg-white/80 dark:bg-neutral-900/80 backdrop-blur px-3 py-2 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800'>
            <div className='font-medium'>Notifications</div>
            <button className='text-sm text-blue-600 hover:underline disabled:opacity-50' disabled={!unreadCount}>Mark all read</button>
          </header>

          {isLoading && (
            <ul className='p-2 space-y-2'>
              {Array.from({ length: 5 }).map((_, i) => (
                <li key={i} className='animate-pulse h-14 rounded-md bg-neutral-100 dark:bg-neutral-800' />
              ))}
            </ul>
          )}

          {isError && (
            <div className='p-4 text-sm'>Failed to load. <button className='text-blue-600 underline' onClick={() => refetch()}>Retry</button></div>
          )}

          {!isLoading && items.length === 0 && (
            <div className='p-6 text-sm text-neutral-600 dark:text-neutral-400'>You are all caught up.</div>
          )}

          <ul className='p-2'>
            {items.map((n, idx) => (
              <li key={n.id} role='menuitem' tabIndex={0}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onItemActivate(n.id, n.href) }
                    if (e.key === 'Escape') { setOpen(false); btnRef.current?.focus() }
                    if (e.key === 'ArrowDown') { (e.currentTarget.nextElementSibling as HTMLElement | null)?.focus() }
                    if (e.key === 'ArrowUp') { (e.currentTarget.previousElementSibling as HTMLElement | null)?.focus() }
                  }}
                  onClick={() => onItemActivate(n.id, n.href)}
                  className={'group flex gap-3 p-3 rounded-md cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-800 ' + (n.read ? '' : 'bg-blue-50/40 dark:bg-blue-900/10')}
              >
                {n.iconUrl ? (
                  <img alt='' src={n.iconUrl} className='h-8 w-8 rounded' />
                ) : (
                  <div className='h-8 w-8 rounded bg-neutral-200 dark:bg-neutral-700' />
                )}
                <div className='min-w-0'>
                  <div className='truncate font-medium'>{n.title}</div>
                  {n.body && <div className='truncate text-sm text-neutral-600 dark:text-neutral-400'>{n.body}</div>}
                  <time className='text-xs text-neutral-500'>{new Date(n.createdAt).toLocaleString()}</time>
                </div>
                {!n.read && <span className='ml-auto mt-2 h-2 w-2 rounded-full bg-blue-600' />}
              </li>
            ))}
          </ul>

          <footer className='px-3 py-2 border-t border-neutral-100 dark:border-neutral-800 text-sm'>
            <button className='text-blue-600 hover:underline' onClick={() => window.location.assign('/notifications')}>View all</button>
          </footer>
        </div>
      )}
    </div>
  )
}