[FIX] mail: OdooBot has a request notif should not be muted

Before this commit, the "OdooBot has a request" notification in the
Messaging Menu -- which suggest to enable push notifications -- had
a muted style, which looks as if the item is unimportant and was
read by the current user.

This is an important notification, at an equivalent level of
importance than needaction notifications. This was already
highlighted by this item contributing to the global Messaging Menu
counter.

This commit fixes the issue by not muting this notification. To do
so, it enhances prop `muted` on `NotificationItem` component:
- 0 (default): the notif is unmuted
- 1: the notif is slightly muted
- 2: the notif is hard-muted

0/1 are equivalent to the different muted style of notification in
16.4, while `muted: 2` shows a hard-muted notification when the user
choose to manually mute a channel, as to not receive any notification
from it.

Some logic related to "mark as read"/"counter" logic has been moved
to this muted prop concern, as not all notification that have mark
as read or a counter necessarily must be muted, e.g. with "OdooBot
has a request".

Task-3566799

closes odoo/odoo#140380

X-original-commit: c60fdbb25b38899ceeb89e76abc35c3474ce1f5b
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core/web/messaging_menu.xml

@@ -80,7 +80,7 @@
                     displayName="thread.displayName"
                     iconSrc="thread.imgUrl"
                     hasMarkAsReadButton="thread.isUnread"
-                    muted="thread.muteUntilDateTime"
+                    muted="thread.muteUntilDateTime ? 2 : !thread.isUnread ? 1 : 0"
                     onClick="(isMarkAsRead) => this.onClickThread(isMarkAsRead, thread)"
                     onSwipeRight="hasTouch() and thread.isUnread ? { action: () => this.markAsRead(thread), icon: 'fa-check-circle', bgColor: 'bg-success' } : undefined"
                     onSwipeLeft="hasTouch() and threadService.canUnpin(thread) ? { action: () => this.threadService.unpin(thread), icon: 'fa-times-circle', bgColor: 'bg-danger' } : undefined"

addons/mail/static/src/core/web/notification_item.js

@@ -26,6 +26,7 @@ export class NotificationItem extends Component {
     static defaultProps = {
         counter: 0,
         displayName: "",
+        muted: 0,
     };
     static template = "mail.NotificationItem";
 

addons/mail/static/src/core/web/notification_item.xml

@@ -3,16 +3,16 @@
 
 <t t-name="mail.NotificationItem">
     <ActionSwiper onLeftSwipe="props.onSwipeLeft ? props.onSwipeLeft : undefined" onRightSwipe="props.onSwipeRight ? props.onSwipeRight : undefined">
-        <button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': !props.hasMarkAsReadButton, 'opacity-50': props.muted }" t-on-click="onClick" t-ref="root">
+        <button class="o-mail-NotificationItem list-group-item list-group-item-action d-flex cursor-pointer align-items-center p-1" t-att-class="{ 'text-muted': props.muted === 1, 'opacity-50': props.muted === 2 }" t-on-click="onClick" t-ref="root">
             <div class="position-relative o-bg-inherit m-1 flex-shrink-0" style="width:40px;height:40px;">
                 <img class="o_avatar w-100 h-100 rounded" alt="Notification Item Image" t-att-src="props.iconSrc"/>
                 <t t-slot="icon"/>
             </div>
             <div class="d-flex flex-column flex-grow-1 align-self-start m-2 overflow-auto">
                 <div class="d-flex text-nowrap">
-                    <span class="o-mail-NotificationItem-name text-truncate" t-att-class="props.hasMarkAsReadButton and !props.muted ? 'fw-bolder' : 'fw-bold'" t-esc="props.displayName"/>
+                    <span class="o-mail-NotificationItem-name text-truncate" t-att-class="props.muted === 1 ? 'fw-bolder' : 'fw-bold'" t-esc="props.displayName"/>
                     <span class="flex-grow-1"/>
-                    <small t-if="props.datetime" class="o-mail-NotificationItem-date ms-2" t-att-class="{ 'opacity-75 fw-bold': props.counter > 0 and !props.muted, 'opacity-50 text-muted': props.counter === 0 || props.muted }">
+                    <small t-if="props.datetime" class="o-mail-NotificationItem-date ms-2" t-att-class="{ 'opacity-75 fw-bold': !props.muted, 'opacity-50 text-muted': props.muted }">
                         <RelativeTime datetime="props.datetime"/>
                     </small>
                 </div>
@@ -23,7 +23,7 @@
                     </div>
                     <div class="flex-grow-1"/>
                     <div class="d-flex align-items-center">
-                        <span t-if="props.counter > 0 and !rootHover.isHover" t-attf-class="o-mail-NotificationItem-badge o-discuss-badge {{props.muted ? 'o-muted' : ''}} d-flex align-items-center justify-content-center m-0 badge rounded-pill fw-bold o-mail-NotificationItem-counter"><t t-esc="props.counter"/></span>
+                        <span t-if="props.counter > 0 and !rootHover.isHover" t-attf-class="o-mail-NotificationItem-badge o-discuss-badge {{props.muted === 2 ? 'o-muted' : ''}} d-flex align-items-center justify-content-center m-0 badge rounded-pill fw-bold o-mail-NotificationItem-counter"><t t-esc="props.counter"/></span>
                         <span t-if="props.hasMarkAsReadButton and rootHover.isHover" class="o-mail-NotificationItem-badge o-discuss-badgeShape text-success d-flex align-items-center justify-content-center m-0 badge rounded-pill fw-bold o-mail-NotificationItem-markAsRead fa fa-check text-600 opacity-50 opacity-100-hover cursor-pointer" title="Mark As Read" t-ref="markAsRead"/>
                     </div>
                 </div>