Composants

NotificationsNouveau

La cloche Comlink : un badge de non-lus, la liste des dernières transmissions, un toast quand quelque chose arrive pendant que tu es sur la page, et une notification système quand l’onglet est caché.

Essayer

La vraie cloche est dans la barre en haut (connecte-toi au Hub pour y voir tes notifications). Ici, des démos sans réseau — à l’ouverture, la cloche recharge depuis le serveur : si tu es connecté, tes vraies notifications remplacent la liste de démo.

AubotaNotif.toast({ module: 'Listes', title: 'Nouvelle invitation', body: '@ana t’invite à « Courses »', href: 'https://hub.aubota.xyz/lists' });
AubotaNotif.setCount(3);
AubotaNotif.render([{ id: 'n1', unread: true, module: 'Hub', title: 'Rappel', body: 'Réunion à 14 h', ts: 1760000000, href: '/meetings' }]);
AubotaNotif.open();

Installer

Inclus dans aubui.js (mode complet). La cloche est créée par la barre globale ou par <nav aub-nav> ; toute .aub-notif présente au chargement (ou à l’événement aub-nav-ready) est branchée.

HTML (cloche faite main)

<script src="https://ui.aubota.xyz/js/notifications.js" defer></script>

<div class="aub-notif">
  <button type="button" class="aub-notif__btn" aria-label="Notifications" aria-expanded="false">🔔<span class="aub-notif__badge"></span></button>
  <div class="aub-notif__dropdown">
    <div class="aub-notif__header">Notifications</div>
    <div class="aub-notif__list"></div>
  </div>
</div>

API `window.AubotaNotif`

Appel	Rôle
`setCount(n)`	Badge de toutes les cloches de la page.
`render(items)`	Remplace la liste (voir format ci-dessous).
`open()` · `close()`	Ouvre / ferme la première cloche.
`load()`	Recharge tout de suite depuis l’endpoint.
`toast({ module, title, body, href, onClick })`	Toast Comlink (bas-droite, 6 s, 3 au plus, cliquable).

Événement (document)	Sens	detail
`aubota:notif-new`	émis	`{ items }` : nouveautés annoncées (pour rafraîchir une vue).
`aubota:notif-count`	écouté	`{ unread }` : une page (Comlink) signale ses marquages, le badge suit sans attendre.
`aub-nav-ready`	écouté	Re-scan des cloches après un montage tardif.

Contrat de l’endpoint

Sur hub.* : /api/notifications.php ; sur social.* : /api/notifications ; ailleurs : Hub puis Social (le premier qui répond est gardé, lecture et écriture).

JSON

GET  → { "ok": true, "unread": 2, "items": [
         { "id": "n1", "unread": true, "module": "Listes", "title": "…", "body": "…",
           "href": "https://hub.aubota.xyz/lists", "ts": 1760000000 } ] }
POST ← { "act": "read", "id": "n1" }   (JSON, cookies inclus)

href n’est suivi que s’il commence par http(s):// ou / ; tout le texte est échappé.
Sans ts (Social), les nouveautés sont détectées par différence d’ids ; la première visite pose une référence sans rien annoncer.
Poll sans cache : 30 s onglet visible, 90 s caché, rechargement au retour sur l’onglet. Un même id n’est jamais annoncé deux fois, même entre onglets.
Rien n’est marqué lu à l’ouverture de la cloche : seulement au clic sur une notification.
Hub : un Web Push reçu par le service worker donne un toast immédiat (même tag aub-n-<id> que la notification système : pas de doublon).

Essayer

Installer

API window.AubotaNotif

Contrat de l’endpoint

API `window.AubotaNotif`