NotificationCenter

Ilmoituskeskus

Kello, lukumerkki ja ilmoitusten lista ponnahdusikkunassa.

Käyttöpaikat

Suoraan: palvelu tuo osan itse. Välillisesti: osa tulee mukaan toisen paketin osan kautta, ja sen muutos näkyy palvelussa silti. Laskettu julkaisun yhteydessä 23.10.2026.

Ei käytössä palveluissa
Esimerkki valitulla teemalla ja sävyllä; vaihda ne yläpalkista.

Käyttö

Paketin README:n luku sellaisenaan.

NotificationCenter — ilmoituskeskus

<NotificationCenter
  notifications={ilmoitukset}
  kinds={{
    failed: { tone: "error",   icon: ServerCrash },
    stale:  { tone: "warning", icon: Clock },
  }}
  LinkComponent={NextLink}
  onMarkRead={(id) => merkitseLuetuksi(id)}
  onMarkAllRead={() => merkitseKaikkiLuetuiksi()}
  footer={<Link href="/halytykset">Katso kaikki →</Link>}
/>

Paketti omistaa kellon, lukumerkin ja listan rakenteen; palvelu omistaa ilmoitukset, sanaston, linkit ja lukutilan säilytyksen. Sama raja kuin createStatusBadgeissa: kinds mappaa palvelun tapahtumalajit sävyihin ja ikoneihin, eikä paketti tunne niitä.

> ⚠️ `onMarkRead` ja `onMarkAllRead` ovat valinnaisia, mutta ilman niitä > lukumerkintää ei näytetä lainkaan. Nappi joka unohtaa on huonompi kuin ei > nappia. Jos lukutilaa ei voi säilyttää, komponentti tekee puutteesta > näkyvän sen sijaan että lupaisi jotain mitä se ei tee.

> `unread` tarkoittaa "tämä käyttäjä ei ole nähnyt tätä" — ei "tämä on > tärkeä". Jos palvelu ei pysty seuraamaan sitä käyttäjäkohtaisesti, jätä > kenttä pois: pysyvä merkki kellossa on kohinaa jota käyttäjä ei voi > poistaa. Vakavuus kuuluu kindiin.

Laskenta on erikseen: unreadBadge (katkaisu 9+:aan), unreadCount (puuttuva unread = luettu) ja sortNotifications (uusimmat ensin, aikaleimattomat loppuun, vakaa järjestys).

Tuonti ja lähde

import { NotificationCenter } from "@karkkainen/ui";
  • src/components/notification-center.tsx