@abyss-project/commons-front-core 8.1.0 → 8.2.0

package/README.md

@@ -1,93 +1,125 @@
-# Abyss Commons Front Core
-
-`@abyss-project/commons-front-core`
-
-Composants React, hooks, design system et traductions partagés par les frontends Abyss.
-
-_Shared React components, hooks, design system and translations for Abyss frontends._
-
-## Installation
-
-```bash
-npm install @abyss-project/commons-front-core
-# or
-pnpm add @abyss-project/commons-front-core
-```
-
-## Liens
-
-- **Documentation** : [https://docs.abyss-project.fr/abyss-project](https://docs.abyss-project.fr/abyss-project)
-- **NPM** : [@abyss-project/commons-front-core](https://www.npmjs.com/package/@abyss-project/commons-front-core)
-- **Application Abyss** : [app.abyss-project.fr](https://app.abyss-project.fr)
-- **Statut des services** : [status.abyss-project.fr](https://status.abyss-project.fr)
-
-## Usage
-
-Voir la [documentation produit](https://docs.abyss-project.fr/abyss-project) pour les guides d'utilisation, la configuration du Core, les exemples d'appel et la référence des permissions.
-
-## RUM
-
-Le RUM navigateur d'un front (SDK `@abyss-project/monitor-browser`, peer `^1.2.0`) se démarre par `AbyssRumProvider`, monté **sous** `AbyssCookieConsentProvider` et, quand le front en a un, sous `AuthProvider` :
-
-```tsx
-<AbyssErrorBoundary appName="abyss-cloud">
-  <AuthProvider client={authClient}>
-    <AbyssCookieConsentProvider consentVersion={COOKIE_CONSENT_VERSION} isAuthenticated={isAuthenticated}>
-      <AbyssRumProvider config={buildRumOptions()}>
-        <App />
-      </AbyssRumProvider>
-    </AbyssCookieConsentProvider>
-  </AuthProvider>
-</AbyssErrorBoundary>
-```
-
-- **`config` est requise** (raison de la majeure 8.0.0 : aucun front ne peut oublier son RUM). `config={null}` désactive le RUM explicitement : rien n'est installé. Elle reçoit les options de `AbyssRum.init` (`apiUrl`, `proxyUrl`, `applicationId`, `token`, `release`, `instrumentedOrigins`, `routeResolver`…), sauf `consent`, que le provider fournit.
-- **Une seule initialisation.** `AbyssRum.init` est appelé au premier commit avec une `config` non nulle, une fois, StrictMode compris. Une `config` qui change ensuite est **ignorée** : le SDK vit autant que la page.
-- **Consentement.** Le replay exige la catégorie analytics de `AbyssCookieConsentProvider`, relue à chaque décision du SDK : un consentement donné ou retiré après le démarrage est suivi. Sans provider de consentement, analytics vaut refusé.
-- **Acteur.** Sous `AuthProvider`, l'acteur de la session est l'id de l'utilisateur connecté, `null` à la déconnexion, inchangé pendant le chargement de la session. Sans `AuthProvider`, aucun acteur.
-- **`feedbackTicket`** (`intakeSlug`, `internalTicketSectionId`, `appName`, `sessionUrl(sessionId, offsetMs)`, `locale?()`) : chaque retour utilisateur enregistré par Monitor devient un ticket Internal Tickets, par l'intake public d'abyss-console (`fileInternalTicketIntake`, peer `@abyss-project/console` `^12.4.0`, configuré par `AbyssConsoleCore.setConfig` du front). Titre `[<appName>] Retour utilisateur` ; description : le message, l'e-mail, la route et le lien vers la session. Le déclarant est l'e-mail saisi, sinon celui de l'utilisateur connecté ; un retour anonyme sans e-mail ne crée aucun ticket et reste dans Monitor. Un échec de création est journalisé (`console.warn`) et avalé. `locale()` est relue à chaque retour : sa sous-étiquette primaire (`en-GB` → `en`) part comme `locale` de l'intake, la langue des courriels de suivi ; une langue que l'intake ne parle pas (hors `UserLanguage`) n'est pas envoyée.
-- **`onFeedbackSent`** : rappel du front, appelé pour chaque retour enregistré, après le ticket (créé, sauté ou en échec).
-- **Erreurs de rendu.** `AbyssErrorBoundary` envoie l'erreur qu'il attrape à `AbyssRum.captureError(error, { source: 'error-boundary' })` ; sans RUM démarré, l'appel ne fait rien.
-
-### Construire les options : `buildAbyssRumProviderConfig`
-
-Les fronts Abyss ne recopient pas leurs options : ils passent leurs valeurs de config brutes (chaîne vide = absente) au constructeur partagé, qui rend `AbyssRumProviderConfig | null`.
-
-```ts
-import { buildAbyssRumProviderConfig } from '@abyss-project/commons-front-core';
-
-export const buildRumOptions = () =>
-  buildAbyssRumProviderConfig({
-    token: config.app.abyssMonitor.rumToken,
-    applicationId: config.app.abyssMonitor.applicationId,
-    monitorApiUrl: config.app.abyssMonitor.api,
-    apiUrl: config.app.abyssCloud.api, // l'API du front : relais `/_t` et origine instrumentée
-    mainApiUrl: config.app.abyss.api, // l'API d'abyss-main : origine instrumentée
-    release: config.app.abyssMonitor.release,
-    routeTemplates: CLOUD_ROUTE_TEMPLATES, // gabarits complets du routeur
-    appName: 'AbyssCloud',
-    mainFrontUrl: config.app.abyss.site, // la page de session vit dans le front d'abyss-main
-    feedbackIntakeSlug: config.app.abyssMonitor.feedbackIntakeSlug,
-    feedbackSectionId: config.app.abyssMonitor.feedbackSectionId,
-    organizationId: config.app.abyssMonitor.organizationId,
-    projectId: config.app.abyssMonitor.projectId,
-    locale: () => currentLanguage(),
-  });
-```
-
-- **`null`** sans jeton, application, API Monitor, API du front ou API d'abyss-main (ou si l'une des trois URL n'en est pas une) : rien n'est installé.
-- **Relais et corrélation** : `proxyUrl` = origine de `apiUrl` + `/_t` ; `instrumentedOrigins` = origines de `apiUrl` et `mainApiUrl` (une seule fois si c'est la même), plus celle de Monitor avec `instrumentMonitorApi: true` (front d'abyss-main, qui appelle Monitor lui-même).
-- **Routes** : `routeResolver` = `createRouteResolver(routeTemplates)`.
-- **Ticket de retour** posé seulement quand l'intake, sa section, l'organisation, le projet et `mainFrontUrl` sont là ; son lien est `abyssMainRumSessionPath`, à l'instant du retour en secondes entières.
-
-### Gabarits de route : `createRouteResolver(patterns)`
-
-`createRouteResolver(patterns: readonly string[]): (location: Location) => string` donne au SDK le gabarit de la route (`/org/:orgId/boards/:boardId`), que le SDK masque ensuite comme toute URL. Les gabarits sont **complets** (routes imbriquées comprises) et classés comme react-router les classe (`matchRoutes`) : un segment statique l'emporte sur un paramètre, un paramètre sur un `*`, quel que soit l'ordre de la liste. Sans correspondance : `location.pathname`.
-
-### Page d'une session : `abyssMainRumSessionPath`
-
-`ABYSS_MAIN_RUM_SESSION_ROUTE` (`/org/:orgId/project/:projectId/application/:applicationId/monitor/rum/sessions/:sessionId`) est la seule source du chemin de la page d'une session dans le front d'abyss-main, qui le monte. `abyssMainRumSessionPath({ orgId, projectId, applicationId }, sessionId, t?)` le remplit (id de session encodé) et ajoute `?t=` en secondes entières, jamais négatif.
-
-## Support
-
-Pour toute demande, ouvrir un ticket depuis [l'application Abyss](https://app.abyss-project.fr/dashboard/account/tickets/create).
+# Abyss Commons Front Core
+
+`@abyss-project/commons-front-core`
+
+Composants React, hooks, design system et traductions partagés par les frontends Abyss.
+
+_Shared React components, hooks, design system and translations for Abyss frontends._
+
+## Installation
+
+```bash
+npm install @abyss-project/commons-front-core
+# or
+pnpm add @abyss-project/commons-front-core
+```
+
+## Liens
+
+- **Documentation** : [https://docs.abyss-project.fr/abyss-project](https://docs.abyss-project.fr/abyss-project)
+- **NPM** : [@abyss-project/commons-front-core](https://www.npmjs.com/package/@abyss-project/commons-front-core)
+- **Application Abyss** : [app.abyss-project.fr](https://app.abyss-project.fr)
+- **Statut des services** : [status.abyss-project.fr](https://status.abyss-project.fr)
+
+## Usage
+
+Voir la [documentation produit](https://docs.abyss-project.fr/abyss-project) pour les guides d'utilisation, la configuration du Core, les exemples d'appel et la référence des permissions.
+
+## RUM
+
+Le RUM navigateur d'un front (SDK `@abyss-project/monitor-browser`, peer `^1.2.0`) se démarre par `AbyssRumProvider`, monté **sous** `AbyssCookieConsentProvider` et, quand le front en a un, sous `AuthProvider` :
+
+```tsx
+<AbyssErrorBoundary appName="abyss-cloud">
+  <AuthProvider client={authClient}>
+    <AbyssCookieConsentProvider consentVersion={COOKIE_CONSENT_VERSION} isAuthenticated={isAuthenticated}>
+      <AbyssRumProvider config={buildRumOptions()}>
+        <App />
+      </AbyssRumProvider>
+    </AbyssCookieConsentProvider>
+  </AuthProvider>
+</AbyssErrorBoundary>
+```
+
+- **`config` est requise** (raison de la majeure 8.0.0 : aucun front ne peut oublier son RUM). `config={null}` désactive le RUM explicitement : rien n'est installé. Elle reçoit les options de `AbyssRum.init` (`apiUrl`, `proxyUrl`, `applicationId`, `token`, `release`, `instrumentedOrigins`, `routeResolver`…), sauf `consent`, que le provider fournit.
+- **Une seule initialisation.** `AbyssRum.init` est appelé au premier commit avec une `config` non nulle, une fois, StrictMode compris. Une `config` qui change ensuite est **ignorée** : le SDK vit autant que la page.
+- **Consentement.** Le replay exige la catégorie analytics de `AbyssCookieConsentProvider`, relue à chaque décision du SDK : un consentement donné ou retiré après le démarrage est suivi. Sans provider de consentement, analytics vaut refusé.
+- **Acteur.** Sous `AuthProvider`, l'acteur de la session est l'id de l'utilisateur connecté, `null` à la déconnexion, inchangé pendant le chargement de la session. Sans `AuthProvider`, aucun acteur.
+- **`feedbackTicket`** (`intakeSlug`, `internalTicketSectionId`, `appName`, `sessionUrl(sessionId, offsetMs)`, `locale?()`) : chaque retour utilisateur enregistré par Monitor devient un ticket Internal Tickets, par l'intake public d'abyss-console (`fileInternalTicketIntake`, peer `@abyss-project/console` `^12.4.0`, configuré par `AbyssConsoleCore.setConfig` du front). Titre `[<appName>] Retour utilisateur` ; description : le message, l'e-mail, la route et le lien vers la session. Le déclarant est l'e-mail saisi, sinon celui de l'utilisateur connecté ; un retour anonyme sans e-mail ne crée aucun ticket et reste dans Monitor. Un échec de création est journalisé (`console.warn`) et avalé. `locale()` est relue à chaque retour : sa sous-étiquette primaire (`en-GB` → `en`) part comme `locale` de l'intake, la langue des courriels de suivi ; une langue que l'intake ne parle pas (hors `UserLanguage`) n'est pas envoyée.
+- **`onFeedbackSent`** : rappel du front, appelé pour chaque retour enregistré, après le ticket (créé, sauté ou en échec).
+- **Erreurs de rendu.** `AbyssErrorBoundary` envoie l'erreur qu'il attrape à `AbyssRum.captureError(error, { source: 'error-boundary' })` ; sans RUM démarré, l'appel ne fait rien.
+
+### Construire les options : `buildAbyssRumProviderConfig`
+
+Les fronts Abyss ne recopient pas leurs options : ils passent leurs valeurs de config brutes (chaîne vide = absente) au constructeur partagé, qui rend `AbyssRumProviderConfig | null`.
+
+```ts
+import { buildAbyssRumProviderConfig } from '@abyss-project/commons-front-core';
+
+export const buildRumOptions = () =>
+  buildAbyssRumProviderConfig({
+    token: config.app.abyssMonitor.rumToken,
+    applicationId: config.app.abyssMonitor.applicationId,
+    monitorApiUrl: config.app.abyssMonitor.api,
+    apiUrl: config.app.abyssCloud.api, // l'API du front : relais `/_t` et origine instrumentée
+    mainApiUrl: config.app.abyss.api, // l'API d'abyss-main : origine instrumentée
+    release: config.app.abyssMonitor.release,
+    routeTemplates: CLOUD_ROUTE_TEMPLATES, // gabarits complets du routeur
+    appName: 'AbyssCloud',
+    mainFrontUrl: config.app.abyss.site, // la page de session vit dans le front d'abyss-main
+    feedbackIntakeSlug: config.app.abyssMonitor.feedbackIntakeSlug,
+    feedbackSectionId: config.app.abyssMonitor.feedbackSectionId,
+    organizationId: config.app.abyssMonitor.organizationId,
+    projectId: config.app.abyssMonitor.projectId,
+    locale: () => currentLanguage(),
+  });
+```
+
+- **`null`** sans jeton, application, API Monitor, API du front ou API d'abyss-main (ou si l'une des trois URL n'en est pas une) : rien n'est installé.
+- **Relais et corrélation** : `proxyUrl` = origine de `apiUrl` + `/_t` ; `instrumentedOrigins` = origines de `apiUrl` et `mainApiUrl` (une seule fois si c'est la même), plus celle de Monitor avec `instrumentMonitorApi: true` (front d'abyss-main, qui appelle Monitor lui-même).
+- **Routes** : `routeResolver` = `createRouteResolver(routeTemplates)`.
+- **Ticket de retour** posé seulement quand l'intake, sa section, l'organisation, le projet et `mainFrontUrl` sont là ; son lien est `abyssMainRumSessionPath`, à l'instant du retour en secondes entières.
+
+### Gabarits de route : `createRouteResolver(patterns)`
+
+`createRouteResolver(patterns: readonly string[]): (location: Location) => string` donne au SDK le gabarit de la route (`/org/:orgId/boards/:boardId`), que le SDK masque ensuite comme toute URL. Les gabarits sont **complets** (routes imbriquées comprises) et classés comme react-router les classe (`matchRoutes`) : un segment statique l'emporte sur un paramètre, un paramètre sur un `*`, quel que soit l'ordre de la liste. Sans correspondance : `location.pathname`.
+
+### Page d'une session : `abyssMainRumSessionPath`
+
+`ABYSS_MAIN_RUM_SESSION_ROUTE` (`/org/:orgId/project/:projectId/application/:applicationId/monitor/rum/sessions/:sessionId`) est la seule source du chemin de la page d'une session dans le front d'abyss-main, qui le monte. `abyssMainRumSessionPath({ orgId, projectId, applicationId }, sessionId, t?)` le remplit (id de session encodé) et ajoute `?t=` en secondes entières, jamais négatif.
+
+## Changements visibles
+
+### 8.2.0
+
+Shell et tableaux de bord du front principal sur le design system (carte #286, zone 1).
+
+- **Nouveau** : `AppShell` prend `chromeless` (plein écran sans cadre), les entrées `external` et `action`,
+  l'action de section (`NavSection.action`) et les entrées internes du pied ; `NotificationsMenu`, `AccountMenu`,
+  `DesignCssVariables` et `focusRing` sont exportés ; `CommandPalette` gagne icônes, sous-titres, récents, sources
+  asynchrones et ouverture filtrée.
+- **Paliers** : les composants du design system basculent à 768 et 1200 px (`designMedia`, `useDesignBreakpoint`)
+  quel que soit le provider. Sous le thème legacy, l'`AppShell` montre le rail dès 768 px (et non plus à 900), la
+  `Modal` une fenêtre dès 768 px, et la bannière MFA passe son bouton sous le texte quand il ne tient plus à côté.
+- **Largeur de `Drawer` et de `Toast` sous le thème legacy** : la largeur par défaut passe de 600 à 480 px (palier
+  `sm` des jetons, et non plus le `sm` de MUI). Un hôte qui comptait sur 600 px passe `width` explicitement au
+  `Drawer`.
+- **Largeur de `Modal` et de `CommandPalette` sous le thème legacy** : elle reste tirée des `theme.breakpoints` de
+  MUI (prop `size` de la `Modal` passée à `maxWidth`, `sm` pour la palette). Sous le thème legacy, `md` vaut 900 px
+  et `sm` 600 px, contre 768 et 480 sous `AbyssThemeProvider` : la même `Modal` est donc plus large chez un hôte
+  legacy. Suivi : `DS-LEGACY-WIDTHS` dans `docs/internal/TECH-DEBT.md` d'abyss-main.
+- **Sélecteur d'espace** : un espace qui porte le nom de son type (« Espace personnel ») n'a plus de seconde ligne
+  répétant ce type.
+- **Navigation** : la liste des sections garde une barre de défilement fine et visible quand elle dépasse la
+  hauteur de la fenêtre.
+- **`PageState`** : `forbidden.message` remplace la description générique de l’accès refusé, pour nommer à qui
+  demander l’accès (organisation, projet).
+- **`PageState`** : le bloc d’état passe son action sous le texte dès que son emplacement fait moins de 512 px
+  (colonne latérale), et plus seulement sous 768 px d’écran.
+- **`PageHeader`** : de 768 px à la largeur du bureau, les actions passent sous le titre dès qu'elles ne tiennent
+  plus à côté d'un titre de 256 px.
+
+
+## Support
+
+Pour toute demande, ouvrir un ticket depuis [l'application Abyss](https://app.abyss-project.fr/dashboard/account/tickets/create).

package/catalog/captures-plan.ts

@@ -33,7 +33,8 @@ export type CaptureState =
   | 'arrival'
   | 'sheet-open'
   | 'list-open'
-  | 'calendar-open';
+  | 'calendar-open'
+  | 'panel-open';
 
 /** File name suffix of each state. */
 const STATE_SUFFIX: Record<CaptureState, string> = {
@@ -41,6 +42,7 @@ const STATE_SUFFIX: Record<CaptureState, string> = {
   'sheet-open': '-feuille',
   'list-open': '-liste',
   'calendar-open': '-calendrier',
+  'panel-open': '-ouvert',
 };
 
 /** The states shown beyond arrival: what a closed control hides (options, calendar, sheet). */
@@ -48,6 +50,8 @@ const EXTRA_STATES: Record<string, CaptureState> = {
   SceneMobile: 'sheet-open',
   RichSelect: 'list-open',
   DateField: 'calendar-open',
+  NotificationsMenu: 'panel-open',
+  AccountMenu: 'panel-open',
 };
 
 export interface Capture {

package/catalog/catalog-entries.ts

@@ -51,6 +51,10 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('Toolbar', 'structure', 'toolbar', RESPONSIVE),
   entry('FilterBar', 'structure', 'filter-bar', RESPONSIVE),
   entry('SplitView', 'structure', 'split-view', RESPONSIVE),
+  entry('NotificationsMenu', 'structure', 'notifications-menu', {
+    mobileCapture: true,
+  }),
+  entry('AccountMenu', 'structure', 'account-menu'),
   entry('MobileShell', 'mobile', 'mobile-shell', RESPONSIVE),
   entry('BottomSheet', 'mobile', 'bottom-sheet', RESPONSIVE),
   entry('ActionBar', 'mobile', 'action-bar', RESPONSIVE),

package/catalog/pages/AccountMenu.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import PersonOutline from '@mui/icons-material/PersonOutline';
+import SettingsOutlined from '@mui/icons-material/SettingsOutlined';
+import CreditCardOutlined from '@mui/icons-material/CreditCardOutlined';
+import ForumOutlined from '@mui/icons-material/ForumOutlined';
+import { AccountMenu } from '../../src/components/structure/AccountMenu/AccountMenu';
+import { ThemeMode } from '../../src/theme/tokens/primitives';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+export const AccountMenuPage = () => {
+  const { log } = useEventLog();
+  const [mode, setMode] = useState(ThemeMode.Dark);
+
+  return (
+    <Showcase
+      family="Structure"
+      name="AccountMenu"
+      description="Avatar de la barre du haut : identité, entrées de l'hôte, thème sombre, déconnexion."
+    >
+      <Example title="Barre du haut">
+        <Row>
+          <AccountMenu
+            user={{ name: 'Mehdi Abyss', email: 'mehdi@abyss.example' }}
+            themeMode={mode}
+            onThemeModeChange={(next) => {
+              setMode(next);
+              log(`thème ${next}`);
+            }}
+            items={[
+              {
+                id: 'account',
+                label: 'Mon compte',
+                icon: <PersonOutline />,
+                href: '/compte',
+              },
+              {
+                id: 'settings',
+                label: 'Paramètres',
+                icon: <SettingsOutlined />,
+                href: '/compte/parametres',
+              },
+              {
+                id: 'billing',
+                label: 'Facturation',
+                icon: <CreditCardOutlined />,
+                href: '/compte/facturation',
+              },
+              {
+                id: 'discord',
+                label: 'Discord',
+                icon: <ForumOutlined />,
+                onClick: () => log('discord'),
+              },
+            ]}
+            onLogout={() => log('déconnexion')}
+          />
+        </Row>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/NotificationsMenu.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import GroupAddOutlined from '@mui/icons-material/GroupAddOutlined';
+import ChatBubbleOutlineOutlined from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import FileDownloadDoneOutlined from '@mui/icons-material/FileDownloadDoneOutlined';
+import { NotificationsMenu } from '../../src/components/structure/NotificationsMenu/NotificationsMenu';
+import type { NotificationItem } from '../../src/components/structure/NotificationsMenu/NotificationsMenu';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+const MINUTE_MS = 60 * 1000;
+
+const initialItems = (): NotificationItem[] => [
+  {
+    id: 'invite',
+    title: 'Ada Lovelace vous invite dans Atelier Nord',
+    body: 'Rejoignez l’organisation pour voir ses projets et ses tableaux.',
+    createdAt: new Date(Date.now() - 4 * MINUTE_MS),
+    read: false,
+    icon: <GroupAddOutlined />,
+  },
+  {
+    id: 'comment',
+    title: 'Nouveau commentaire sur « Roadmap T4 »',
+    body: 'Grace : « On décale la refonte du tableau de bord à novembre ? »',
+    createdAt: new Date(Date.now() - 70 * MINUTE_MS),
+    read: false,
+    icon: <ChatBubbleOutlineOutlined />,
+    href: '/tableaux/roadmap',
+  },
+  {
+    id: 'export',
+    title: 'Votre export de relevés est prêt',
+    createdAt: new Date(Date.now() - 2 * 24 * 60 * MINUTE_MS),
+    read: true,
+    icon: <FileDownloadDoneOutlined />,
+  },
+];
+
+export const NotificationsMenuPage = () => {
+  const { log } = useEventLog();
+  const [items, setItems] = useState(initialItems);
+  const [sound, setSound] = useState(true);
+  const unread = items.filter((item) => !item.read).length;
+  const markRead = (id: string) =>
+    setItems((current) =>
+      current.map((item) => (item.id === id ? { ...item, read: true } : item)),
+    );
+
+  return (
+    <Showcase
+      family="Structure"
+      name="NotificationsMenu"
+      description="Cloche de la barre du haut : pastille des non lues, panneau (feuille sous 768 px), tout marquer lu, son, préférences, actions par notification."
+    >
+      <Example title="Barre du haut">
+        <Row>
+          <NotificationsMenu
+            items={items}
+            unreadCount={unread}
+            loading={false}
+            onOpen={() => log('ouvrir')}
+            onItemClick={(id) => {
+              markRead(id);
+              log(`lire ${id}`);
+            }}
+            onMarkAllRead={() => {
+              setItems((current) =>
+                current.map((item) => ({ ...item, read: true })),
+              );
+              log('tout lire');
+            }}
+            soundEnabled={sound}
+            onToggleSound={() => {
+              setSound((value) => !value);
+              log('son');
+            }}
+            preferencesHref="/compte/notifications"
+            renderItemActions={(item) =>
+              item.id === 'invite' && !item.read ? (
+                <Button
+                  size="small"
+                  variant="outlined"
+                  onClick={() => {
+                    markRead(item.id);
+                    log('accepter');
+                  }}
+                >
+                  Accepter
+                </Button>
+              ) : null
+            }
+          />
+        </Row>
+      </Example>
+      <Example title="Liste vide et premier chargement">
+        <Row>
+          <NotificationsMenu
+            items={[]}
+            unreadCount={0}
+            loading={false}
+            onItemClick={(id) => log(`lire ${id}`)}
+            onMarkAllRead={() => log('tout lire')}
+          />
+          <NotificationsMenu
+            items={[]}
+            unreadCount={0}
+            loading
+            onItemClick={(id) => log(`lire ${id}`)}
+            onMarkAllRead={() => log('tout lire')}
+          />
+        </Row>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/index.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react';
+import { AccountMenuPage } from './AccountMenu';
 import { ActionBarPage } from './ActionBar';
 import { AppShellPage } from './AppShell';
 import { BottomSheetPage } from './BottomSheet';
@@ -17,6 +18,7 @@ import { MenuPage } from './Menu';
 import { MethodBadgePage } from './MethodBadge';
 import { MobileShellPage } from './MobileShell';
 import { ModalPage } from './Modal';
+import { NotificationsMenuPage } from './NotificationsMenu';
 import { PageHeaderPage } from './PageHeader';
 import { PageStatePage } from './PageState';
 import { RichSelectPage } from './RichSelect';
@@ -39,6 +41,7 @@ import { ToolbarPage } from './Toolbar';
 
 /** Every catalog page, by the `component` URL parameter (`catalog-entries.ts`). */
 export const CATALOG_PAGES: Record<string, ComponentType> = {
+  AccountMenu: AccountMenuPage,
   ActionBar: ActionBarPage,
   AppShell: AppShellPage,
   BottomSheet: BottomSheetPage,
@@ -57,6 +60,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   MethodBadge: MethodBadgePage,
   MobileShell: MobileShellPage,
   Modal: ModalPage,
+  NotificationsMenu: NotificationsMenuPage,
   PageHeader: PageHeaderPage,
   PageState: PageStatePage,
   RichSelect: RichSelectPage,

package/catalog/specs/captures.spec.ts

@@ -32,6 +32,13 @@ const REACH: Record<
       .click();
     await expect(page.getByRole('dialog')).toBeVisible();
   },
+  // The first top bar trigger of the page: the notifications bell or the account avatar.
+  'panel-open': async (page) => {
+    await page.locator('[aria-haspopup]').first().click();
+    await expect(
+      page.getByRole('dialog').or(page.getByRole('menu')),
+    ).toBeVisible();
+  },
 };
 
 for (const capture of CAPTURES) {

package/catalog/specs/write-capture-index.ts

@@ -24,6 +24,7 @@ const STATE_LABEL: Record<CaptureState, string> = {
   'sheet-open': ', feuille ouverte',
   'list-open': ', liste ouverte',
   'calendar-open': ', calendrier ouvert',
+  'panel-open': ', panneau ouvert',
 };
 
 const describe = (capture: Capture): string =>