diff --git a/src/frontend/public/locales/common/en-US.json b/src/frontend/public/locales/common/en-US.json index a5412c72..42121817 100755 --- a/src/frontend/public/locales/common/en-US.json +++ b/src/frontend/public/locales/common/en-US.json @@ -123,6 +123,8 @@ "{{count}} threads have been unarchived._other": "{{count}} threads have been unarchived.", "{{count}} threads have been updated._one": "The thread has been updated.", "{{count}} threads have been updated._other": "{{count}} threads have been updated.", + "{{count}} unread_one": "{{count}} unread", + "{{count}} unread_other": "{{count}} unread", "{{count}} unread messages_one": "{{count}} unread message", "{{count}} unread messages_other": "{{count}} unread messages", "{{count}} unread messages mentioning you_one": "{{count}} unread message mentioning you", diff --git a/src/frontend/public/locales/common/fr-FR.json b/src/frontend/public/locales/common/fr-FR.json index 4c6cecfb..6c702c34 100755 --- a/src/frontend/public/locales/common/fr-FR.json +++ b/src/frontend/public/locales/common/fr-FR.json @@ -182,6 +182,9 @@ "{{count}} threads have been updated._one": "La conversation a été mise à jour.", "{{count}} threads have been updated._many": "{{count}} conversations ont été mises à jour.", "{{count}} threads have been updated._other": "{{count}} conversations ont été mises à jour.", + "{{count}} unread_one": "{{count}} message non lu", + "{{count}} unread_many": "{{count}} messages non lus", + "{{count}} unread_other": "{{count}} messages non lus", "{{count}} unread messages_one": "{{count}} message non lu", "{{count}} unread messages_many": "{{count}} messages non lus", "{{count}} unread messages_other": "{{count}} messages non lus", diff --git a/src/frontend/src/features/layouts/components/mailbox-selector/_index.scss b/src/frontend/src/features/layouts/components/mailbox-selector/_index.scss index 76239a48..88740157 100644 --- a/src/frontend/src/features/layouts/components/mailbox-selector/_index.scss +++ b/src/frontend/src/features/layouts/components/mailbox-selector/_index.scss @@ -97,3 +97,42 @@ white-space: nowrap; } } + +.mailbox-selector__option-label { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: var(--c--globals--spacings--sm); + + & > .mailbox-selector__option-name { + font-size: var(--c--globals--font--sizes--sm); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + & > .mailbox-selector__option-unread-count { + display: inline-flex; + align-items: center; + flex-shrink: 0; + font-size: var(--c--globals--font--sizes--xs); + color: var(--c--contextuals--content--semantic--neutral--tertiary); + gap: var(--c--globals--spacings--3xs); + line-height: 1; + + &:before { + content: ''; + display: inline-block; + --size: 0.5rem; + flex-shrink: 0; + width: var(--size); + height: var(--size); + border-radius: 50%; + box-sizing: border-box; + border: 0.5px solid var(--c--contextuals--border--semantic--contextual--primary); + background-color: var(--c--contextuals--background--semantic--brand--primary); + } + + + } +} \ No newline at end of file diff --git a/src/frontend/src/features/layouts/components/mailbox-selector/index.tsx b/src/frontend/src/features/layouts/components/mailbox-selector/index.tsx index 0e729dba..af395218 100644 --- a/src/frontend/src/features/layouts/components/mailbox-selector/index.tsx +++ b/src/frontend/src/features/layouts/components/mailbox-selector/index.tsx @@ -2,6 +2,7 @@ import { DropdownMenu, UserAvatar } from "@gouvfr-lasuite/ui-kit"; import { ChevronDown } from "@gouvfr-lasuite/ui-kit/icons"; import { Button } from "@gouvfr-lasuite/cunningham-react"; import { useState } from "react"; +import { useTranslation } from "react-i18next"; import { Mailbox } from "@/features/api/gen"; import MailboxHelper from "@/features/utils/mailbox-helper"; @@ -30,6 +31,7 @@ export const MailboxSelector = ({ selectedMailbox, onSelect, }: MailboxSelectorProps) => { + const { t } = useTranslation(); const [isOpen, setIsOpen] = useState(false); const label = getMailboxLabel(selectedMailbox); @@ -66,16 +68,31 @@ export const MailboxSelector = ({ const sortedMailboxes = MailboxHelper.sortByKind(mailboxes); const options = sortedMailboxes.map((mailbox, index) => ({ - label: getMailboxLabel(mailbox), + label: (