@edifice.io/react 2.6.2 → 2.6.3-develop-enabling.20260825194305

package/dist/modules/editor/test-utils/createTestEditor.d.ts

@@ -0,0 +1,10 @@
+import { Editor, EditorOptions, Extensions } from '@tiptap/core';
+/**
+ * Builds a real, headless (uncoupled from React) tiptap `Editor` for
+ * component specs that need genuine ProseMirror state - selection, commands,
+ * `isActive` - rather than a hand-rolled mock. Callers should call
+ * `.destroy()` in `afterEach` to avoid leaking editor instances across tests.
+ */
+export declare const createTestEditor: (overrides?: {
+    extensions?: Extensions;
+} & Partial<EditorOptions>) => Editor;

package/dist/modules/homepage/components/Communities/Communities.d.ts

@@ -0,0 +1,10 @@
+import { CommunityItemProps } from './CommunityItem';
+export interface CommunitiesProps {
+    communitiesList?: CommunityItemProps[];
+    handleActionClick: () => void;
+}
+declare const Communities: {
+    ({ communitiesList, handleActionClick, }: CommunitiesProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Communities;

package/dist/modules/homepage/components/Communities/CommunitiesContainer.d.ts

@@ -0,0 +1,9 @@
+import { CommunitiesModel } from './useCommunities';
+export type CommunitiesContainerProps = {
+    onCommunityClick?: (community: CommunitiesModel) => void;
+    onHeaderActionClick: () => void;
+};
+export declare function CommunitiesContainer({ onCommunityClick, onHeaderActionClick, }: CommunitiesContainerProps): import("react/jsx-runtime").JSX.Element | "An error occurred while loading communities.";
+export declare namespace CommunitiesContainer {
+    var displayName: string;
+}

package/dist/modules/homepage/components/Communities/CommunitiesSkeleton.d.ts

@@ -0,0 +1,5 @@
+declare const CommunitiesSkeleton: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CommunitiesSkeleton;

package/dist/modules/homepage/components/Communities/CommunityItem.d.ts

@@ -0,0 +1,11 @@
+export interface CommunityItemProps {
+    title: string;
+    communityImage: string;
+    onActionClick: () => void;
+    nbNotifications?: number;
+}
+declare const CommunityItem: {
+    ({ title, communityImage, nbNotifications, onActionClick, }: CommunityItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CommunityItem;

package/dist/modules/homepage/components/Communities/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Communities';
+export { default as Communities } from './Communities';
+export * from './CommunitiesContainer';
+export * from './CommunitiesSkeleton';
+export { default as CommunitiesSkeleton } from './CommunitiesSkeleton';
+export * from './CommunityItem';
+export { default as CommunitiesItem } from './CommunityItem';
+export * from './useCommunities';

package/dist/modules/homepage/components/Communities/useCommunities.d.ts

@@ -0,0 +1,13 @@
+export interface CommunitiesModel {
+    id: number | string;
+    title: string;
+    communityImage?: string;
+    icon?: string;
+    nbNotifications?: number;
+    notifications?: number;
+}
+export declare function useCommunities(): {
+    communities: CommunitiesModel[];
+    isLoading: boolean;
+    error: Error | null;
+};

package/dist/modules/homepage/components/Favorites/Favorites.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import illuEmptyFavorite from "@edifice.io/bootstrap/dist/images/homepage/illu-empty-favorite.svg";
 import SvgIconArrowRight from "../../../icons/components/IconArrowRight.js";
@@ -11,13 +12,15 @@ function Favorites({
 }) {
   const {
     t
-  } = useTranslation(), getAppName = (app) => app.prefix && app.prefix.length > 1 ? t(app.prefix.substring(1)) : t(app.displayName) || "";
+  } = useTranslation(), getAppName = (app) => app.prefix && app.prefix.length > 1 ? t(app.prefix.substring(1)) : t(app.displayName) || "", visibleApps = useMemo(() => apps.filter((app) => app.display !== !1).sort((a, b) => getAppName(a).localeCompare(getAppName(b), void 0, {
+    sensitivity: "base"
+  })), [apps, t]);
   return /* @__PURE__ */ jsxs(HomeCard, { variant: "secondary", children: [
     /* @__PURE__ */ jsx(HomeCard.Header, { title: t("homepage.favorites.title", "Favoris"), actionLabel: t("homepage.favorites.all", "Mes applis"), onActionClick: onSeeAllClick, actionRightIcon: /* @__PURE__ */ jsx(SvgIconArrowRight, {}) }),
-    /* @__PURE__ */ jsx(HomeCard.Content, { children: /* @__PURE__ */ jsx("div", { className: "favorites-content", children: apps.length === 0 ? /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "12", children: [
-      /* @__PURE__ */ jsx("img", { src: illuEmptyFavorite, alt: "", width: 80, height: 80 }),
+    /* @__PURE__ */ jsx(HomeCard.Content, { children: /* @__PURE__ */ jsx("div", { className: "favorites-content", children: visibleApps.length === 0 ? /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "12", children: [
+      /* @__PURE__ */ jsx("img", { src: illuEmptyFavorite, alt: "", width: 50, height: 50 }),
       /* @__PURE__ */ jsx("span", { className: "favorites-empty-text", children: t("homepage.favorites.empty", "Ajouter des applications à vos favoris pour les retrouver ici et y accéder rapidement !") })
-    ] }) : /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "8 16", children: apps.map((app) => {
+    ] }) : /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "8 16", children: visibleApps.map((app) => {
       const appName = getAppName(app), opensInNewTab = app.isExternal || app.target === "_blank";
       return /* @__PURE__ */ jsx("a", { href: app.address, "aria-label": appName, title: appName, target: opensInNewTab ? "_blank" : void 0, rel: opensInNewTab ? "noopener noreferrer" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "40", variant: "square" }) }, app.name);
     }) }) }) })

package/dist/modules/homepage/components/Header/Header.js

@@ -12,6 +12,7 @@ import SvgIconHomeBeta from "../../../icons/components/nav/IconHomeBeta.js";
 import SvgIconMessagesBeta from "../../../icons/components/nav/IconMessagesBeta.js";
 import SvgIconMyAppsBeta from "../../../icons/components/nav/IconMyAppsBeta.js";
 import SvgIconNotificationBeta from "../../../icons/components/nav/IconNotificationBeta.js";
+import { useHasNotificationToday } from "../Notifications/hooks/useNotificationList.js";
 import useConversation from "../../../../hooks/useConversation/useConversation.js";
 import useUser from "../../../../hooks/useUser/useUser.js";
 import useHasWorkflow from "../../../../hooks/useHasWorkflow/useHasWorkflow.js";
@@ -45,7 +46,7 @@ const Header = ({
     avatar
   }), {
     theme
-  } = useEdificeTheme(), hasMessages = messages > 0, [userRef, isUserHovered] = useHover(), popoverUserId = useId(), handleNotificationsClick = () => {
+  } = useEdificeTheme(), hasMessages = messages > 0, hasNotificationToday = useHasNotificationToday(), [userRef, isUserHovered] = useHover(), popoverUserId = useId(), handleNotificationsClick = () => {
     onNotificationsClick == null || onNotificationsClick();
   };
   return /* @__PURE__ */ jsx("header", { className: classes, "data-product": dataProduct, children: /* @__PURE__ */ jsxs(Navbar, { className: "px-24", children: [
@@ -65,7 +66,24 @@ const Header = ({
         /* @__PURE__ */ jsx(VisuallyHidden, { children: t("conversation") })
       ] }) }),
       /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsx(NavLink, { link: "/welcome", translate: t("navbar.applications"), "data-testid": "header-my-apps-button", children: /* @__PURE__ */ jsx(SvgIconMyAppsBeta, {}) }) }),
-      /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsx(ButtonBeta, { leftIcon: /* @__PURE__ */ jsx(SvgIconNotificationBeta, {}), variant: "ghost", onClick: handleNotificationsClick }) }),
+      /* @__PURE__ */ jsxs(NavItem, { className: "position-relative", children: [
+        /* @__PURE__ */ jsx(ButtonBeta, { leftIcon: /* @__PURE__ */ jsx(SvgIconNotificationBeta, {}), variant: "ghost", onClick: handleNotificationsClick }),
+        hasNotificationToday && /* @__PURE__ */ jsx("span", { style: {
+          position: "absolute",
+          top: 0,
+          right: 0,
+          width: 15,
+          height: 15,
+          background: "red",
+          borderRadius: "50%",
+          border: "2px solid white",
+          pointerEvents: "none",
+          zIndex: 1,
+          display: "block"
+        }, "aria-label": t("homepage.notifications.new-badge", {
+          defaultValue: "Nouvelle notification"
+        }) })
+      ] }),
       /* @__PURE__ */ jsxs(NavItem, { className: "position-relative", ref: userRef, id: popoverUserId, "aria-haspopup": "true", "aria-expanded": isUserHovered, "data-testid": "header-user-menu-button", children: [
         /* @__PURE__ */ jsx(NavLink, { link: "/userbook/mon-compte", translate: t("navbar.myaccount"), "data-testid": "header-user-profile-button", children: /* @__PURE__ */ jsx(Avatar, { alt: userName, size: "sm", src: userAvatar, variant: "circle", className: "bg-white", width: "32", height: "32" }) }),
         /* @__PURE__ */ jsx(Popover, { align: "end", className: "widget", id: popoverUserId, isVisible: isUserHovered, children: /* @__PURE__ */ jsx(PopoverBody, { children: /* @__PURE__ */ jsxs("a", { href: "/auth/logout?callback=" + ((theme == null ? void 0 : theme.logoutCallback) ?? ""), className: "nav-link logout d-flex align-items-center gap-8", "data-testid": "header-logout-button", children: [

package/dist/modules/homepage/components/HomeCard/HomeCard.d.ts

@@ -20,9 +20,13 @@ export interface HomeCardProps extends ComponentPropsWithoutRef<'div'> {
      * `HomeCard.Header` is rendered with these props.
      */
     headerProps?: HomeCardHeaderProps;
+    /**
+     * Optional footer
+     */
+    footer?: ReactNode;
 }
 declare const HomeCard: {
-    ({ variant, children, headerProps, className, ...rest }: HomeCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, children, headerProps, footer, className, ...rest }: HomeCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {

package/dist/modules/homepage/components/HomeCard/HomeCard.js

@@ -1,14 +1,22 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import HomeCardContent from "./HomeCardContent.js";
 import HomeCardHeader from "./HomeCardHeader.js";
+import Flex from "../../../../components/Flex/Flex.js";
 const Root = ({
   variant = "user",
   children,
   headerProps,
+  footer,
   className,
   ...rest
-}) => /* @__PURE__ */ jsx("div", { "data-testid": "home-card", "data-variant": variant, className: clsx("home-card", `home-card--${variant}`, className), ...rest, children: headerProps && !children ? /* @__PURE__ */ jsx(HomeCardHeader, { ...headerProps }) : children }), HomeCard = Object.assign(Root, {
+}) => {
+  const classNames = clsx("home-card", `home-card--${variant}`, className), content = /* @__PURE__ */ jsx("div", { "data-testid": "home-card", "data-variant": variant, className: classNames, ...rest, children: headerProps && !children ? /* @__PURE__ */ jsx(HomeCardHeader, { ...headerProps }) : children });
+  return footer ? /* @__PURE__ */ jsxs("div", { className: "home-card--with-footer", children: [
+    content,
+    /* @__PURE__ */ jsx(Flex, { direction: "row", gap: "8", className: "px-16 py-4 home-card-footer", children: footer })
+  ] }) : content;
+}, HomeCard = Object.assign(Root, {
   Header: HomeCardHeader,
   Content: HomeCardContent
 });

package/dist/modules/homepage/components/LastInfos/LastInfosList.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import SvgIconArrowRight from "../../../icons/components/IconArrowRight.js";
 import LastInfos from "./LastInfos.js";
-import illuLastInfosEmptyScreen from "@edifice.io/bootstrap/dist/images/homepage/illu-last-infos-beta.svg";
+import illuLastInfosEmptyScreen from "@edifice.io/bootstrap/dist/images/homepage/illu-empty-last-infos.png";
 import Flex from "../../../../components/Flex/Flex.js";
 import ButtonBeta from "../../../../components/ButtonBeta/ButtonBeta.js";
 import EmptyScreen from "../../../../components/EmptyScreen/EmptyScreen.js";
@@ -23,7 +23,7 @@ function LastInfosList({
       /* @__PURE__ */ jsx("h2", { className: "last-infos-list-title", children: t("homepage.last-infos-list.title") }),
       /* @__PURE__ */ jsx(ButtonBeta, { color: "tertiary", variant: "ghost", className: "last-infos-list-seemore", rightIcon: /* @__PURE__ */ jsx(SvgIconArrowRight, {}), onClick: handleSeeMoreClick, children: t("homepage.last-infos-list.see.more") })
     ] }),
-    /* @__PURE__ */ jsx(Flex, { gap: "16", direction: "column", className: "last-infos-list-body", children: infos.length === 0 ? /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: illuLastInfosEmptyScreen, size: 64, text: t("homepage.last-infos-list.empty") }) : infos.map((infosProps) => /* @__PURE__ */ jsx(LastInfos, { onClick: handleInfoClick, ...infosProps }, infosProps.id)) })
+    /* @__PURE__ */ jsx("div", { className: "last-infos-list-body", children: infos.length === 0 ? /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: illuLastInfosEmptyScreen, size: 135, text: t("homepage.last-infos-list.empty") }) : infos.map((infosProps) => /* @__PURE__ */ jsx(LastInfos, { onClick: handleInfoClick, ...infosProps }, infosProps.id)) })
   ] });
 }
 export {

package/dist/modules/homepage/components/Notifications/NotificationItem.js

@@ -1,14 +1,15 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import NotificationOptionsMenu from "./components/NotificationOptionsMenu.js";
 import SystemNotificationItem from "./components/SystemNotificationItem.js";
 import UserNotificationItem from "./components/UserNotificationItem.js";
 import { notificationAdapter } from "./components/notificationAdapter.js";
 const NotificationItem = ({
   notification
 }) => {
-  const notif = notificationAdapter(notification);
+  const notif = notificationAdapter(notification), menu = /* @__PURE__ */ jsx(NotificationOptionsMenu, { notificationId: notification._id });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    notif.type === "user" && /* @__PURE__ */ jsx(UserNotificationItem, { notification: notif }),
-    notif.type === "system" && /* @__PURE__ */ jsx(SystemNotificationItem, { notification: notif })
+    notif.type === "user" && /* @__PURE__ */ jsx(UserNotificationItem, { notification: notif, menu }),
+    notif.type === "system" && /* @__PURE__ */ jsx(SystemNotificationItem, { notification: notif, menu })
   ] });
 };
 export {

package/dist/modules/homepage/components/Notifications/NotificationList.d.ts

@@ -2,6 +2,12 @@ import { NotificationModel } from '@edifice.io/client';
 export type NotificationListProps = {
     /** List of notifications to display */
     notifications?: NotificationModel[];
+    /** All notification types available to filter on */
+    notificationTypes?: string[];
+    /** Notification types currently applied as filter */
+    selectedTypes?: string[];
+    /** Callback when the user validates a new filter selection */
+    onFilterChange?: (types: string[]) => void;
     /** Callback when the notifications list is closed */
     onCloseNotifications?: () => void;
     /** Callback to load the next page of notifications, used for infinite scrolling */
@@ -12,7 +18,7 @@ export type NotificationListProps = {
     isLoading?: boolean;
 };
 declare const NotificationList: {
-    ({ notifications, onCloseNotifications, onLoadNextPage, hasNextPage, isLoading, }: NotificationListProps): import("react/jsx-runtime").JSX.Element;
+    ({ notifications, notificationTypes, selectedTypes, onFilterChange, onCloseNotifications, onLoadNextPage, hasNextPage, isLoading, }: NotificationListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NotificationList;

package/dist/modules/homepage/components/Notifications/NotificationList.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import illuEmptyNotification from "@edifice.io/bootstrap/dist/images/emptyscreen/illu-notifications.png";
+import illuEmptyNotification from "@edifice.io/bootstrap/dist/images/homepage/illu-empty-notifications.png";
 import { useTranslation } from "react-i18next";
 import SvgIconClose from "../../../icons/components/IconClose.js";
+import NotificationFilterMenu from "./components/NotificationFilterMenu.js";
 import NotificationItem from "./NotificationItem.js";
 import NotificationListSkeleton from "./NotificationListSkeleton.js";
 import NotificationSkeleton from "./NotificationSkeleton.js";
@@ -12,6 +13,9 @@ import EmptyScreen from "../../../../components/EmptyScreen/EmptyScreen.js";
 import Divider from "../../../../components/Divider/Divider.js";
 const NotificationList = ({
   notifications,
+  notificationTypes,
+  selectedTypes,
+  onFilterChange,
   onCloseNotifications,
   onLoadNextPage,
   hasNextPage,
@@ -26,10 +30,13 @@ const NotificationList = ({
   };
   return /* @__PURE__ */ jsx("section", { role: "region", className: "notification-list", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", wrap: "nowrap", className: "py-16 ps-24 pe-8", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-truncate", children: t("homepage.notifications-list.title") }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "8", className: "notification-list-title", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-truncate", children: t("homepage.notifications-list.title") }),
+        notificationTypes && notificationTypes.length > 0 && /* @__PURE__ */ jsx(NotificationFilterMenu, { notificationTypes, selectedTypes: selectedTypes ?? notificationTypes, onFilterChange: (types) => onFilterChange == null ? void 0 : onFilterChange(types) })
+      ] }),
       onCloseNotifications && /* @__PURE__ */ jsx(ButtonBeta, { color: "tertiary", variant: "ghost", rightIcon: /* @__PURE__ */ jsx(SvgIconClose, {}), onClick: handleCloseClick, "aria-label": t("homepage.notifications-list.close"), title: t("homepage.notifications-list.close"), "data-testid": "notification-list-close-button" })
     ] }),
-    (notifications == null ? void 0 : notifications.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "mx-24", children: /* @__PURE__ */ jsx(EmptyScreen, { size: 120, imageSrc: illuEmptyNotification, imageAlt: t("homepage.notifications-list.empty.description"), text: t("homepage.notifications-list.empty.description") }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    (notifications == null ? void 0 : notifications.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "mx-24", children: /* @__PURE__ */ jsx(EmptyScreen, { size: 135, imageSrc: illuEmptyNotification, imageAlt: t("homepage.notifications-list.empty.description"), text: t("homepage.notifications-list.empty.description") }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("ul", { children: notifications == null ? void 0 : notifications.map((notification, index) => /* @__PURE__ */ jsxs("li", { children: [
         /* @__PURE__ */ jsx(NotificationItem, { notification }),
         /* @__PURE__ */ jsx(Divider, { className: "border-grey-300 my-0" })

package/dist/modules/homepage/components/Notifications/NotificationListContainer.js

@@ -6,11 +6,14 @@ const NotificationListContainer = ({
 }) => {
   const {
     notifications,
+    notificationTypes,
+    selectedTypes,
+    setSelectedTypes,
     hasNextPage,
     loadNextPage,
     isLoading
   } = useNotificationListContainer();
-  return /* @__PURE__ */ jsx(NotificationList, { notifications, onCloseNotifications, onLoadNextPage: () => {
+  return /* @__PURE__ */ jsx(NotificationList, { notifications, notificationTypes, selectedTypes, onFilterChange: setSelectedTypes, onCloseNotifications, onLoadNextPage: () => {
     hasNextPage && !isLoading && loadNextPage();
   }, hasNextPage, isLoading });
 };

package/dist/modules/homepage/components/Notifications/components/CommonNotificationItem.d.ts

@@ -5,6 +5,7 @@ export type NotificationItemProps = {
     date: Date;
     uri?: string;
     children?: ReactNode;
+    menu?: ReactNode;
 };
 /**
  * Base layout for a single notification row.
@@ -18,7 +19,7 @@ export type NotificationItemProps = {
  * `SystemNotification` instead of consuming this directly.
  */
 declare const CommonNotificationItem: {
-    ({ picture, message, date, uri, children, }: NotificationItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ picture, message, date, uri, children, menu, }: NotificationItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CommonNotificationItem;

package/dist/modules/homepage/components/Notifications/components/CommonNotificationItem.js

@@ -6,21 +6,25 @@ const CommonNotificationItem = ({
   message,
   date,
   uri,
-  children
+  children,
+  menu
 }) => {
   const {
     formatTimeAgo,
     formatDate
   } = useDate();
-  return /* @__PURE__ */ jsx(Flex, { direction: "column", className: "notification-item", gap: "8", children: /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "8", children: [
-    /* @__PURE__ */ jsx("div", { className: "notification-item-picture", children: picture }),
-    /* @__PURE__ */ jsx("a", { href: uri, "data-testid": "notification-item-content", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "8", children: [
-      /* @__PURE__ */ jsx("div", { className: "notification-item-message", dangerouslySetInnerHTML: {
-        __html: message
-      } }),
-      children,
-      /* @__PURE__ */ jsx("p", { className: "notification-item-date", title: formatDate(date, "LLL"), children: formatTimeAgo(date) })
-    ] }) })
+  return /* @__PURE__ */ jsx(Flex, { direction: "column", className: "notification-item", gap: "8", children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", wrap: "nowrap", gap: "8", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "start", gap: "8", className: "notification-item-content-wrapper", children: [
+      /* @__PURE__ */ jsx("div", { className: "notification-item-picture", children: picture }),
+      /* @__PURE__ */ jsx("a", { href: uri, className: "notification-item-link", "data-testid": "notification-item-content", children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "8", children: [
+        /* @__PURE__ */ jsx("div", { className: "notification-item-message", dangerouslySetInnerHTML: {
+          __html: message
+        } }),
+        children,
+        /* @__PURE__ */ jsx("p", { className: "notification-item-date", title: formatDate(date, "LLL"), children: formatTimeAgo(date) })
+      ] }) })
+    ] }),
+    menu && /* @__PURE__ */ jsx("div", { className: "notification-item-menu", children: menu })
   ] }) });
 };
 export {

package/dist/modules/homepage/components/Notifications/components/NotificationFilterMenu.d.ts

@@ -0,0 +1,16 @@
+export type NotificationFilterMenuProps = {
+    /** All notification types available */
+    notificationTypes: string[];
+    /** Notification types currently applied as filter */
+    selectedTypes: string[];
+    /** Callback when the user validates a new filter selection */
+    onFilterChange: (types: string[]) => void;
+};
+/**
+ * Trigger button opening the notification types filter modal.
+ */
+declare const NotificationFilterMenu: {
+    ({ notificationTypes, selectedTypes, onFilterChange, }: NotificationFilterMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default NotificationFilterMenu;

package/dist/modules/homepage/components/Notifications/components/NotificationFilterMenu.js

@@ -0,0 +1,29 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconFilter from "../../../../icons/components/IconFilter.js";
+import SvgIconRafterDown from "../../../../icons/components/IconRafterDown.js";
+import NotificationFilterModal from "./NotificationFilterModal.js";
+import ButtonBeta from "../../../../../components/ButtonBeta/ButtonBeta.js";
+const NotificationFilterMenu = ({
+  notificationTypes,
+  selectedTypes,
+  onFilterChange
+}) => {
+  const {
+    t
+  } = useTranslation(), [isOpen, setIsOpen] = useState(!1), handleApply = (types) => {
+    onFilterChange(types), setIsOpen(!1);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ButtonBeta, { type: "button", color: "secondary", variant: "outline", size: "md", leftIcon: /* @__PURE__ */ jsx(SvgIconFilter, {}), rightIcon: /* @__PURE__ */ jsx(SvgIconRafterDown, {}), "aria-label": t("homepage.notifications.filter-modal.trigger", {
+      defaultValue: "Filtrer les notifications"
+    }), title: t("homepage.notifications.filter-modal.trigger", {
+      defaultValue: "Filtrer les notifications"
+    }), onClick: () => setIsOpen(!0), "data-testid": "notification-filter-button" }),
+    isOpen && /* @__PURE__ */ jsx(NotificationFilterModal, { isOpen, allTypes: notificationTypes, appliedTypes: selectedTypes, onCancel: () => setIsOpen(!1), onApply: handleApply })
+  ] });
+};
+export {
+  NotificationFilterMenu as default
+};

package/dist/modules/homepage/components/Notifications/components/NotificationFilterModal.d.ts

@@ -0,0 +1,18 @@
+export type NotificationFilterModalProps = {
+    isOpen: boolean;
+    /** All notification types available */
+    allTypes: string[];
+    /** Notification types currently applied as filter */
+    appliedTypes: string[];
+    onCancel: () => void;
+    onApply: (types: string[]) => void;
+};
+/**
+ * Modal letting the user choose which notification types to display in the
+ * homepage notifications list.
+ */
+declare const NotificationFilterModal: {
+    ({ isOpen, allTypes, appliedTypes, onCancel, onApply, }: NotificationFilterModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default NotificationFilterModal;

package/dist/modules/homepage/components/Notifications/components/NotificationFilterModal.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconCheck from "../../../../icons/components/IconCheck.js";
+import { getAppCodeAndI18nKey } from "./notificationAdapter.js";
+import Modal from "../../../../../components/Modal/Modal.js";
+import Flex from "../../../../../components/Flex/Flex.js";
+import Checkbox from "../../../../../components/Checkbox/Checkbox.js";
+import AppIcon from "../../../../../components/AppIcon/AppIcon.js";
+import ButtonBeta from "../../../../../components/ButtonBeta/ButtonBeta.js";
+const NotificationFilterModal = ({
+  isOpen,
+  allTypes,
+  appliedTypes,
+  onCancel,
+  onApply
+}) => {
+  const {
+    t
+  } = useTranslation(), [selected, setSelected] = useState(appliedTypes), toggleType = (type) => {
+    setSelected((current) => current.includes(type) ? current.filter((value) => value !== type) : [...current, type]);
+  }, toggleAll = () => {
+    setSelected(selected.length === allTypes.length ? [] : allTypes);
+  };
+  return /* @__PURE__ */ jsxs(Modal, { id: "notification-filter-modal", size: "lg", scrollable: !0, isOpen, onModalClose: onCancel, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: onCancel, children: t("homepage.notifications.filter-modal.title", {
+      defaultValue: "Filtrer les notifications"
+    }) }),
+    /* @__PURE__ */ jsx(Modal.Subtitle, { children: t("homepage.notifications.filter-modal.subtitle", {
+      defaultValue: "Sélectionnez seulement les notifications importantes pour vous"
+    }) }),
+    /* @__PURE__ */ jsxs(Modal.Body, { children: [
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "8", className: "mb-16", children: [
+        /* @__PURE__ */ jsx("div", { className: "notification-filter-select-all", children: /* @__PURE__ */ jsx(Checkbox, { label: t("homepage.notifications.filter-modal.select-all", {
+          defaultValue: "Tout sélectionner"
+        }), checked: selected.length === allTypes.length, indeterminate: selected.length > 0 && selected.length < allTypes.length, onChange: toggleAll }) }),
+        /* @__PURE__ */ jsx("span", { className: "notification-filter-count", children: t("homepage.notifications.filter-modal.count", {
+          selected: selected.length,
+          total: allTypes.length,
+          defaultValue: "[[selected]] / [[total]] sélectionnées"
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: "8", className: "notification-filter-options", children: allTypes.map((type) => {
+        const [appCode, appI18nKey] = getAppCodeAndI18nKey(type), checked = selected.includes(type);
+        return /* @__PURE__ */ jsxs("label", { className: clsx("notification-filter-chip", {
+          "is-checked": checked
+        }), children: [
+          /* @__PURE__ */ jsx(AppIcon, { app: appCode, size: "24", iconFit: "contain" }),
+          /* @__PURE__ */ jsx("span", { children: t(appI18nKey, {
+            defaultValue: appCode
+          }) }),
+          /* @__PURE__ */ jsx("input", { type: "checkbox", className: "form-check-input", checked, onChange: () => toggleType(type) })
+        ] }, type);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(ButtonBeta, { color: "tertiary", onClick: onCancel, type: "button", variant: "ghost", children: t("cancel") }),
+      /* @__PURE__ */ jsx(ButtonBeta, { color: "default", onClick: () => onApply(selected), type: "button", variant: "filled", rightIcon: /* @__PURE__ */ jsx(SvgIconCheck, {}), children: t("homepage.notifications.filter-modal.confirm", {
+        defaultValue: "Enregistrer"
+      }) })
+    ] })
+  ] });
+};
+export {
+  NotificationFilterModal as default
+};

package/dist/modules/homepage/components/Notifications/components/NotificationItemResource.d.ts

@@ -1,5 +1,6 @@
 export type NotificationItemResourceProps = {
     appCode: string;
+    appI18nKey: string;
 };
 /**
  * Displays the originating application of a notification as a small icon + label.
@@ -9,7 +10,7 @@ export type NotificationItemResourceProps = {
  *
  */
 declare const NotificationItemResource: {
-    ({ appCode, }: NotificationItemResourceProps): import("react/jsx-runtime").JSX.Element;
+    ({ appCode, appI18nKey, }: NotificationItemResourceProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default NotificationItemResource;

package/dist/modules/homepage/components/Notifications/components/NotificationItemResource.js

@@ -2,11 +2,12 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import AppIcon from "../../../../../components/AppIcon/AppIcon.js";
 const NotificationItemResource = ({
-  appCode
+  appCode,
+  appI18nKey
 }) => {
   const {
     t
-  } = useTranslation(), appLabel = t(`${appCode}`, {
+  } = useTranslation(), appLabel = t(`${appI18nKey}`, {
     defaultValue: appCode
   }), appCssClass = `app-${appCode}`;
   return /* @__PURE__ */ jsxs("div", { className: `notification-item-resource ${appCssClass} bg-app-light`, children: [

package/dist/modules/homepage/components/Notifications/components/NotificationOptionsMenu.d.ts

@@ -0,0 +1,12 @@
+export type NotificationOptionsMenuProps = {
+    notificationId: string;
+};
+/**
+ * Options menu for a single notification row, allowing the user to report
+ * or delete it.
+ */
+declare const NotificationOptionsMenu: {
+    ({ notificationId, }: NotificationOptionsMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default NotificationOptionsMenu;

package/dist/modules/homepage/components/Notifications/components/NotificationOptionsMenu.js

@@ -0,0 +1,42 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconAlertTriangle from "../../../../icons/components/IconAlertTriangle.js";
+import SvgIconDelete from "../../../../icons/components/IconDelete.js";
+import SvgIconOptions from "../../../../icons/components/IconOptions.js";
+import { useReportNotification, useDeleteNotification } from "../services/queries/notification.js";
+import ReportNotificationModal from "./ReportNotificationModal.js";
+import Dropdown from "../../../../../components/Dropdown/Dropdown.js";
+import IconButton from "../../../../../components/Button/IconButton.js";
+const NotificationOptionsMenu = ({
+  notificationId
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    mutate: reportNotification
+  } = useReportNotification(), {
+    mutate: deleteNotification
+  } = useDeleteNotification(), [isReportModalOpen, setIsReportModalOpen] = useState(!1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dropdown, { overflow: !1, children: (triggerProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(IconButton, { ...triggerProps, type: "button", "aria-label": t("homepage.notifications.options.label", {
+        defaultValue: "Options de la notification"
+      }), color: "tertiary", variant: "ghost", icon: /* @__PURE__ */ jsx(SvgIconOptions, {}), "data-testid": "notification-item-options-button" }),
+      /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgIconAlertTriangle, {}), onClick: () => setIsReportModalOpen(!0), children: t("homepage.notifications.options.report", {
+          defaultValue: "Signaler"
+        }) }),
+        /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgIconDelete, {}), onClick: () => deleteNotification(notificationId), children: t("homepage.notifications.options.delete", {
+          defaultValue: "Supprimer"
+        }) })
+      ] })
+    ] }) }),
+    isReportModalOpen && /* @__PURE__ */ jsx(ReportNotificationModal, { isOpen: isReportModalOpen, onCancel: () => setIsReportModalOpen(!1), onConfirm: () => {
+      reportNotification(notificationId), setIsReportModalOpen(!1);
+    } })
+  ] });
+};
+export {
+  NotificationOptionsMenu as default
+};

package/dist/modules/homepage/components/Notifications/components/ReportNotificationModal.d.ts

@@ -0,0 +1,13 @@
+export type ReportNotificationModalProps = {
+    isOpen: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+};
+/**
+ * Confirmation modal shown before reporting a notification as inappropriate.
+ */
+declare const ReportNotificationModal: {
+    ({ isOpen, onCancel, onConfirm, }: ReportNotificationModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ReportNotificationModal;