Shared/Notification Drawer

Notification Drawer

Panel de notificaciones compartido. Se abre desde la campana de la navbar como Sheet lateral en tablet y desktop, y como Sheet de pantalla completa en mobile. El componente recibe un contrato tipado y no realiza fetching.

Con datos mock

Incluye filtros Todas, No leídas y Leídas, agrupación temporal y acciones de lectura.

Empty state

Cuando la colección está vacía se mantiene el header y se muestra el estado definido en Figma.

Uso

Renderizá el componente junto a la navbar y conectá callbacks de la app consumidora.

import { NotificationDrawer } from '@repo/ui';

            <NotificationDrawer
              notifications={notifications}
              onItemClick={handleNotificationClick}
              onMarkAllRead={handleMarkAllRead}
            />

Responsive behavior

Mobile: ancho completo y alto completo.
Tablet y desktop: Sheet derecho de hasta 420px y alto completo.
El focus trap, escape y overlay son provistos por el primitive Sheet.