@abyss-project/commons-front-core 9.4.1 → 9.4.3

package/catalog/captures-plan.ts

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

package/catalog/catalog-entries.ts

@@ -63,7 +63,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('BottomSheet', 'mobile', 'bottom-sheet', RESPONSIVE),
   entry('ActionBar', 'mobile', 'action-bar', RESPONSIVE),
   entry('SwipeDeck', 'mobile', 'swipe-deck', RESPONSIVE),
-  entry('PageState', 'states', 'page-state'),
+  entry('PageState', 'states', 'page-state', { mobileCapture: true }),
   entry('Callout', 'states', 'callout', RESPONSIVE),
   entry('DataTable', 'data', 'data-table', RESPONSIVE),
   entry('KeyValueList', 'data', 'key-value-list'),
@@ -74,12 +74,14 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('BarChart', 'data', 'bar-chart'),
   entry('ChartTheme', 'data', 'chart-theme'),
   entry('UsageMeter', 'data', 'usage-meter'),
+  entry('FacetPanel', 'data', 'facet-panel', { mobileCapture: true }),
   entry('StatusBadge', 'meaning', 'status-badge'),
   entry('MethodBadge', 'meaning', 'method-badge'),
   entry('SeverityBadge', 'meaning', 'severity-badge'),
   entry('ScanBadge', 'meaning', 'scan-badge'),
   entry('RoleBadge', 'meaning', 'role-badge'),
   entry('ToolIcon', 'meaning', 'tool-icon'),
+  entry('ValueMenu', 'meaning', 'value-menu', { mobileCapture: true }),
   entry('Avatar', 'meaning', 'avatar'),
   entry('AvatarGroup', 'meaning', 'avatar-group'),
   entry('TeamAvatar', 'meaning', 'team-avatar'),
@@ -93,6 +95,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ConfirmDialog', 'layers', 'confirm-dialog'),
   entry('ConfirmDialogWarning', 'layers', 'confirm-dialog-warning'),
   entry('Drawer', 'layers', 'drawer'),
+  entry('PreviewDrawer', 'layers', 'preview-drawer', { mobileCapture: true }),
   entry('Menu', 'layers', 'menu'),
   entry('Toast', 'layers', 'toast'),
   entry('CommandPalette', 'layers', 'command-palette'),
@@ -112,6 +115,9 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
   entry('ContextSelector', 'inputs', 'context-selector', RESPONSIVE),
   entry('DropZone', 'inputs', 'drop-zone', RESPONSIVE),
   entry('ImportButton', 'inputs', 'import-button'),
+  entry('ExpressionSearch', 'inputs', 'expression-search', {
+    mobileCapture: true,
+  }),
 ];
 
 export const CATALOG_THEMES = [ThemeMode.Dark, ThemeMode.Light] as const;

package/catalog/pages/ExpressionSearch.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { ExpressionSearch } from '../../src/components/inputs/ExpressionSearch/ExpressionSearch';
+import { Example, LastEvent, Showcase, useEventLog } from '../frame';
+
+const KEYS = [
+  { name: 'level', count: 18420 },
+  { name: 'env', count: 18420 },
+  { name: 'release', count: 17983 },
+  { name: 'status', count: 9214 },
+  { name: '@user.plan', count: 4120 },
+];
+
+const VALUES: Record<string, { value: string; count: number }[]> = {
+  level: [
+    { value: 'ERROR', count: 1204 },
+    { value: 'WARN', count: 3310 },
+    { value: 'INFO', count: 13906 },
+  ],
+  env: [
+    { value: 'prod', count: 15012 },
+    { value: 'staging', count: 3408 },
+  ],
+};
+
+const fetchKeys = async (prefix: string) =>
+  KEYS.filter((key) => key.name.startsWith(prefix));
+
+const fetchValues = async (field: string, prefix: string) =>
+  (VALUES[field] ?? []).filter((item) => item.value.startsWith(prefix));
+
+export const ExpressionSearchPage = () => {
+  const { log } = useEventLog();
+  const [typed, setTyped] = useState('');
+  const [broken, setBroken] = useState('level:ERROR (env:prod OR env:staging');
+  return (
+    <Showcase
+      family="Saisie"
+      name="ExpressionSearch"
+      description="Champ de filtre en expression (level:ERROR -env:staging) : suggestions de clés puis de valeurs, erreur de syntaxe soulignée à sa position sans perdre la saisie."
+    >
+      <Example
+        title="Saisie avec suggestions de clés puis de valeurs"
+        maxWidth={720}
+      >
+        <ExpressionSearch
+          value={typed}
+          onChange={setTyped}
+          onSubmit={(value) => log(`filtrer : ${value || 'aucun filtre'}`)}
+          fetchKeys={fetchKeys}
+          fetchValues={fetchValues}
+        />
+      </Example>
+      <Example title="Expression incomplète" maxWidth={720}>
+        <ExpressionSearch
+          value={broken}
+          onChange={setBroken}
+          onSubmit={(value) => log(`filtrer : ${value}`)}
+          fetchKeys={fetchKeys}
+          fetchValues={fetchValues}
+        />
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/FacetPanel.tsx

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { FacetPanel } from '../../src/components/data/FacetPanel/FacetPanel';
+import type { Facet } from '../../src/components/data/FacetPanel/FacetPanel';
+import { px } from '../../src/theme/components/shared';
+import { fontWeights } from '../../src/theme/tokens/primitives';
+import { styled } from '@mui/material/styles';
+import { Example, Showcase } from '../frame';
+
+const FACETS: Facet[] = [
+  {
+    field: 'level',
+    label: 'Niveau',
+    values: [
+      { value: 'ERROR', count: 1204 },
+      { value: 'WARN', count: 3310 },
+      { value: 'INFO', count: 13906 },
+    ],
+    estimated: false,
+    loading: false,
+  },
+  {
+    field: 'env',
+    label: 'Environnement',
+    values: [
+      { value: 'prod', count: 15012 },
+      { value: 'staging', count: 3408 },
+    ],
+    estimated: true,
+    loading: false,
+  },
+  {
+    field: '@user.plan',
+    label: 'Plan (attribut)',
+    values: [],
+    estimated: false,
+    loading: true,
+  },
+  {
+    field: 'release',
+    label: 'Version',
+    values: [],
+    estimated: false,
+    loading: false,
+    error: 'Lecture interrompue après 5 s : réduisez la période.',
+    onRetry: () => undefined,
+  },
+];
+
+const Expression = styled('code')(({ theme }) => ({
+  display: 'block',
+  fontFamily: theme.design.fonts.mono,
+  fontSize: px(theme.design.typeScale.small),
+  fontWeight: fontWeights.medium,
+  color: theme.design.tokens['text.secondary'],
+  overflowWrap: 'anywhere',
+}));
+
+export const FacetPanelPage = () => {
+  const [expression, setExpression] = useState('level:ERROR -env:staging');
+  return (
+    <Showcase
+      family="Données"
+      name="FacetPanel"
+      description="Valeurs les plus fréquentes de chaque champ : une coche ajoute la condition à l'expression, « Exclure » ajoute son contraire. L'expression reste la seule source de vérité."
+    >
+      <Example
+        title="Quatre facettes : prête, estimée, en chargement, en échec"
+        maxWidth={360}
+      >
+        <FacetPanel
+          facets={FACETS}
+          expression={expression}
+          onExpressionChange={setExpression}
+        />
+      </Example>
+      <Example title="Expression résultante" maxWidth={720}>
+        <Expression>{expression === '' ? '—' : expression}</Expression>
+      </Example>
+    </Showcase>
+  );
+};

package/catalog/pages/PageState.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Button from '@mui/material/Button';
 import Skeleton from '@mui/material/Skeleton';
 import CreateNewFolderOutlined from '@mui/icons-material/CreateNewFolderOutlined';
@@ -10,6 +11,9 @@ import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
 import { ACCOUNTS } from '../fixtures';
 import { AccountCard } from '../parts';
 
+// Seconds the rate-limit example counts down from, long enough to be read on a capture.
+const RATE_LIMIT_SECONDS = 42;
+
 // Height of an account card: 2 × 64 + 32.
 const CARD_HEIGHT = space[10] * 2 + space[7];
 
@@ -23,6 +27,9 @@ const AccountSkeleton = () => (
 
 export const PageStatePage = () => {
   const { log } = useEventLog();
+  const [retryAt] = useState(
+    () => new Date(Date.now() + RATE_LIMIT_SECONDS * 1000),
+  );
   const ready = (
     <Columns>
       {ACCOUNTS.map((account) => (
@@ -82,6 +89,16 @@ export const PageStatePage = () => {
           {ready}
         </PageState>
       </Example>
+      <Example title="Trop de requêtes, avec compte à rebours">
+        <PageState
+          status={PageStatus.RateLimited}
+          skeleton={<AccountSkeleton />}
+          retryAt={retryAt}
+          error={{ onRetry: () => log('réessayer après la limite') }}
+        >
+          {ready}
+        </PageState>
+      </Example>
       <Example title="Introuvable">
         <PageState status={PageStatus.NotFound} skeleton={<AccountSkeleton />}>
           {ready}

package/catalog/pages/PreviewDrawer.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef } from 'react';
+import Button from '@mui/material/Button';
+import { PreviewDrawer } from '../../src/components/layers/PreviewDrawer/PreviewDrawer';
+import { usePreviewStack } from '../../src/components/layers/PreviewDrawer/usePreviewStack';
+import type { IPreviewRef } from '../../src/components/layers/PreviewDrawer/usePreviewStack';
+import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
+import { Example, Row, Showcase } from '../frame';
+
+const REQUEST: IPreviewRef = { type: 'request', id: '9f3c2a71' };
+const SESSION: IPreviewRef = { type: 'session', id: 'b41d07ce' };
+const LOG: IPreviewRef = { type: 'log', id: 'e7a90b14' };
+const RELEASE: IPreviewRef = { type: 'release', id: '2.14.0' };
+
+const TITLES: Record<string, string> = {
+  request: 'GET /api/invoices',
+  session: 'Session b41d07ce',
+  log: 'Log e7a90b14',
+  release: 'Version 2.14.0',
+};
+
+const titleOf = (ref: IPreviewRef) =>
+  TITLES[ref.type] ?? `${ref.type} ${ref.id}`;
+
+const Content = ({ reference }: { reference: IPreviewRef }) => {
+  const { open } = usePreviewStack();
+  return (
+    <>
+      <KeyValueList
+        items={[
+          { id: 'id', label: 'Identifiant', value: reference.id, mono: true },
+          {
+            id: 'status',
+            label: 'Statut',
+            value: reference.type === 'request' ? '200' : 'terminée',
+            mono: true,
+          },
+          { id: 'duration', label: 'Durée', value: '184 ms', mono: true },
+          { id: 'env', label: 'Environnement', value: 'prod' },
+        ]}
+      />
+      {reference.type === 'request' && (
+        <Button variant="outlined" onClick={() => open(SESSION)}>
+          Ouvrir la session liée
+        </Button>
+      )}
+      {reference.type === 'session' && (
+        <Button variant="outlined" onClick={() => open(LOG)}>
+          Ouvrir le log lié
+        </Button>
+      )}
+      {reference.type === 'log' && (
+        <Button variant="outlined" onClick={() => open(RELEASE)}>
+          Ouvrir la version liée
+        </Button>
+      )}
+    </>
+  );
+};
+
+/** Steps of the opening sequence: nothing yet, then each preview opened on the previous one. */
+enum Arrival {
+  Idle,
+  RequestOpened,
+  SessionOpened,
+  LogOpened,
+  Done,
+}
+
+export const PreviewDrawerPage = () => {
+  const { stack, open } = usePreviewStack();
+  const arrival = useRef(Arrival.Idle);
+
+  // Four previews stacked on arrival, so the page shows the trail without a click. Each one is
+  // opened once the stack of the previous render is in the URL.
+  useEffect(() => {
+    if (arrival.current === Arrival.Idle && stack.length === 0) {
+      arrival.current = Arrival.RequestOpened;
+      open(REQUEST);
+    } else if (
+      arrival.current === Arrival.RequestOpened &&
+      stack.length === 1
+    ) {
+      arrival.current = Arrival.SessionOpened;
+      open(SESSION);
+    } else if (
+      arrival.current === Arrival.SessionOpened &&
+      stack.length === 2
+    ) {
+      arrival.current = Arrival.LogOpened;
+      open(LOG);
+    } else if (arrival.current === Arrival.LogOpened && stack.length === 3) {
+      arrival.current = Arrival.Done;
+      open(RELEASE);
+    }
+  }, [stack, open]);
+
+  return (
+    <Showcase
+      family="Couches"
+      name="PreviewDrawer"
+      description="Aperçu empilable porté par l'URL (?preview=type:id,type:id, cinq au plus) : fil de toute la pile (chaque niveau ramène à lui, replié en « … » et les deux derniers sur téléphone), Échap ferme le dernier, lien vers la pleine page."
+    >
+      <Example title="Ouvrir un aperçu">
+        <Row>
+          <Button variant="outlined" onClick={() => open(REQUEST)}>
+            Requête GET /api/invoices
+          </Button>
+          <Button variant="outlined" onClick={() => open(SESSION)}>
+            Session b41d07ce
+          </Button>
+        </Row>
+      </Example>
+      <PreviewDrawer
+        titleOf={titleOf}
+        fullPageHref={(ref) => `/${ref.type}/${ref.id}`}
+        render={(ref) => <Content reference={ref} />}
+      />
+    </Showcase>
+  );
+};

package/catalog/pages/ProductTour.tsx

@@ -35,7 +35,7 @@ export const ProductTourPage = () => {
     <Showcase
       family="Couches"
       name="ProductTour"
-      description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. Échap passe la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas."
+      description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. « Étape n sur N » et une croix en en-tête, « Précédent » dès la deuxième étape ; Échap et la croix passent la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas. Une cible cachée est ignorée."
     >
       <Example title="Première visite de Memories">
         <Row>
@@ -46,6 +46,14 @@ export const ProductTourPage = () => {
           >
             Importer
           </Button>
+          {/* A hidden twin of the first target: the tour points at the rendered one. */}
+          <Button
+            data-tour="catalog-create-event"
+            variant="contained"
+            sx={{ display: 'none' }}
+          >
+            Créer un événement
+          </Button>
           <Button
             data-tour="catalog-create-event"
             variant="contained"

package/catalog/pages/Section.tsx

@@ -4,6 +4,8 @@ import {
   Section,
   SectionTone,
 } from '../../src/components/structure/Section/Section';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
 import { KeyValueList } from '../../src/components/data/KeyValueList/KeyValueList';
 import { Columns, Example, LastEvent, Showcase, useEventLog } from '../frame';
 import { ACCOUNTS, LONG_NAV_LABEL, formatEuro } from '../fixtures';
@@ -38,6 +40,14 @@ export const SectionPage = () => {
           </Columns>
         </Section>
       </Example>
+      <Example title="Avec le logo d'un service">
+        <Section
+          title="Mes clouds"
+          icon={<ToolIcon tool={ToolKind.Cloud} size={20} />}
+        >
+          <LastEvent />
+        </Section>
+      </Example>
       <Example title="Sans action, contenu en liste clé-valeur">
         <Section title="Disponible à dépenser">
           <KeyValueList

package/catalog/pages/StatTile.tsx

@@ -1,4 +1,6 @@
 import { StatTile } from '../../src/components/data/StatTile/StatTile';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { ToolKind } from '../../src/theme/tokens/domain';
 import { Columns, Example, Showcase } from '../frame';
 import {
   BANKING_TOTALS,
@@ -45,6 +47,17 @@ export const StatTilePage = () => (
     <Example title="Transactions d'octobre (la dernière tuile est un lien)">
       <BankingStatTiles />
     </Example>
+    <Example title="Avec le logo d'un service">
+      <Columns>
+        <StatTile
+          label="Stockage Cloud"
+          icon={<ToolIcon tool={ToolKind.Cloud} size={16} />}
+          value="3,2"
+          unit="Go"
+          delta={{ value: 'sur 10 Go', tone: 'text.muted' }}
+        />
+      </Columns>
+    </Example>
     <Example title="Avec unité">
       <Columns>
         <StatTile

package/catalog/pages/ValueMenu.tsx

@@ -0,0 +1,40 @@
+import { ValueMenu } from '../../src/components/meaning/ValueMenu/ValueMenu';
+import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
+
+export const ValueMenuPage = () => {
+  const { log } = useEventLog();
+  const handlers = (field: string, value: string) => ({
+    onFilter: () => log(`filtrer ${field}:${value}`),
+    onExclude: () => log(`exclure ${field}:${value}`),
+    onCopy: () => log(`copier ${value}`),
+  });
+  return (
+    <Showcase
+      family="Sens"
+      name="ValueMenu"
+      description="Rend une valeur cliquable : filtrer, exclure, copier, puis selon la page ajouter en colonne, voir l'évolution ou ouvrir l'objet désigné."
+    >
+      <Example title="Valeur d'un champ connu : trois actions" framed>
+        <ValueMenu field="level" value="ERROR" {...handlers('level', 'ERROR')}>
+          ERROR
+        </ValueMenu>
+      </Example>
+      <Example title="Valeur d'une liste : six actions" framed>
+        <Row>
+          <span>Requête</span>
+          <ValueMenu
+            field="requestId"
+            value="9f3c2a71"
+            {...handlers('requestId', '9f3c2a71')}
+            onAddColumn={() => log('ajouter requestId en colonne')}
+            onTrend={() => log('évolution de requestId')}
+            onOpen={() => log('ouvrir 9f3c2a71')}
+          >
+            9f3c2a71
+          </ValueMenu>
+        </Row>
+      </Example>
+      <LastEvent />
+    </Showcase>
+  );
+};

package/catalog/pages/index.ts

@@ -27,6 +27,8 @@ import { DateFieldPage } from './DateField';
 import { DateRangeFieldPage } from './DateRangeField';
 import { DrawerPage } from './Drawer';
 import { DropZonePage } from './DropZone';
+import { ExpressionSearchPage } from './ExpressionSearch';
+import { FacetPanelPage } from './FacetPanel';
 import { FilterBarPage } from './FilterBar';
 import { FormFieldPage } from './FormField';
 import { ImportButtonPage } from './ImportButton';
@@ -41,6 +43,7 @@ import { NotificationsMenuPage } from './NotificationsMenu';
 import { NumberFieldPage } from './NumberField';
 import { PageHeaderPage } from './PageHeader';
 import { PageStatePage } from './PageState';
+import { PreviewDrawerPage } from './PreviewDrawer';
 import { ProductTourPage } from './ProductTour';
 import { QRCodeModalPage } from './QRCodeModal';
 import { RichSelectPage } from './RichSelect';
@@ -63,6 +66,7 @@ import { ToastPage } from './Toast';
 import { ToolbarPage } from './Toolbar';
 import { ToolIconPage } from './ToolIcon';
 import { UsageMeterPage } from './UsageMeter';
+import { ValueMenuPage } from './ValueMenu';
 
 /** Every catalog page, by the `component` URL parameter (`catalog-entries.ts`). */
 export const CATALOG_PAGES: Record<string, ComponentType> = {
@@ -94,6 +98,8 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   DateRangeField: DateRangeFieldPage,
   Drawer: DrawerPage,
   DropZone: DropZonePage,
+  ExpressionSearch: ExpressionSearchPage,
+  FacetPanel: FacetPanelPage,
   FilterBar: FilterBarPage,
   FormField: FormFieldPage,
   ImportButton: ImportButtonPage,
@@ -108,6 +114,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   NumberField: NumberFieldPage,
   PageHeader: PageHeaderPage,
   PageState: PageStatePage,
+  PreviewDrawer: PreviewDrawerPage,
   ProductTour: ProductTourPage,
   QRCodeModal: QRCodeModalPage,
   RichSelect: RichSelectPage,
@@ -130,4 +137,5 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
   Toolbar: ToolbarPage,
   ToolIcon: ToolIconPage,
   UsageMeter: UsageMeterPage,
+  ValueMenu: ValueMenuPage,
 };

package/catalog/specs/captures.spec.ts

@@ -32,6 +32,13 @@ const REACH: Record<
       .click();
     await expect(page.getByRole('dialog')).toBeVisible();
   },
+  // The value of a list (six actions): the menu lists every action with its label.
+  'menu-open': async (page) => {
+    await page.getByRole('button', { name: /Actions sur requestId/ }).click();
+    const menu = page.getByRole('menu').or(page.getByRole('dialog'));
+    await expect(menu).toBeVisible();
+    await expect(menu.getByRole('menuitem')).toHaveCount(6);
+  },
   // 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();

package/catalog/specs/expression-search-scroll.spec.ts

@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test';
+import { ThemeMode } from '../../src/theme/tokens/primitives';
+import { openCatalogPage } from './catalog-page';
+
+// ExpressionSearch in a narrow field: the underlined character of a syntax error must be inside
+// the visible part of the field when the error appears (jsdom has no layout, so this is checked
+// in a real browser).
+
+const PHONE = { width: 390, height: 844 };
+
+test('the underlined error character is in view in a 390 px field', async ({
+  page,
+}) => {
+  await openCatalogPage(page, 'ExpressionSearch', ThemeMode.Light, PHONE);
+  const mark = page.locator('[data-expression-error]').first();
+  const input = page.getByRole('combobox').nth(1);
+  await expect(mark).toBeAttached();
+
+  const box = async (locator: typeof mark) => {
+    const rect = await locator.evaluate((element) => {
+      const { left, right } = element.getBoundingClientRect();
+      return { left, right };
+    });
+    return rect;
+  };
+  const markBox = await box(mark);
+  const inputBox = await box(input);
+  expect(await input.evaluate((element) => element.scrollLeft)).toBeGreaterThan(
+    0,
+  );
+  expect(markBox.left).toBeGreaterThanOrEqual(inputBox.left - 1);
+  expect(markBox.right).toBeLessThanOrEqual(inputBox.right + 1);
+});

package/catalog/specs/preview-drawer-trail.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+import { ThemeMode } from '../../src/theme/tokens/primitives';
+import { openCatalogPage } from './catalog-page';
+
+// PreviewDrawer: the catalog opens four levels on arrival (request, session, log, release). The
+// trail lists all four on a desktop and folds to « … » and the last two on a phone.
+
+const trailItems = (page: Parameters<typeof openCatalogPage>[0]) =>
+  page
+    .getByRole('navigation', { name: 'Fil des aperçus' })
+    .getByRole('listitem');
+
+test('the trail lists the four levels at 1440 px', async ({ page }) => {
+  await openCatalogPage(page, 'PreviewDrawer', ThemeMode.Light, {
+    width: 1440,
+    height: 900,
+  });
+  await expect(trailItems(page)).toHaveText([
+    'GET /api/invoices',
+    'Session b41d07ce',
+    'Log e7a90b14',
+    'Version 2.14.0',
+  ]);
+});
+
+test('the trail folds to an ellipsis and the last two levels at 390 px', async ({
+  page,
+}) => {
+  await openCatalogPage(page, 'PreviewDrawer', ThemeMode.Light, {
+    width: 390,
+    height: 844,
+  });
+  await expect(trailItems(page)).toHaveText([
+    '…',
+    'Log e7a90b14',
+    'Version 2.14.0',
+  ]);
+});

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

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