[FIX] mail: do not open server-synced chat windows in mobile

Before this commit, when there were some chat windows open
in desktop, mobile device were displaying the chat windows
at page load.

This was even buggy, because the chat windows are mounted in
a folded state, and it shows only the header of chat window.
The content behind the chat window is visible but we cannot
interact unless the chat window is closed.

This commit makes a few changes to fix the issue:
- Folded state of chat windows is ignored in mobile: the chat
  window is fully displayed in mobile even when in "folded" state.
- At page load, server data from chat window state are ignored
  in mobile
- Messaging menu in mobile should not display content below:
  dropdown in mobile had some margin which displayed some content
  below. Fix is to have `m-0`.
- Chat Windows are displayed on top of Messaging Menu in mobile.
  In desktop it makes sense it's the other way, because messaging
  menu can be toggled when there's a chat window. But it's not
  clickable in mobile, and it acts as the previous screen to open
  a chat window.

closes odoo/odoo#127597

X-original-commit: 791924d6d1d0e5aff6d9e84844626ac5863c2a88
Signed-off-by: Didier Debondt (did) <did@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/mail/static/src/core/common/chat_window.scss

@@ -2,6 +2,9 @@
     height: 480px;
     width: $o-mail-ChatWindow-width;
     z-index: 999; // messaging menu is dropdown (1000)
+    &.o-mobile {
+        z-index: 1001; // above messaging menu (chat window takes whole screen)
+    }
     box-shadow: -5px -5px 10px rgba(#000000, 0.09);
     outline: none;
 

addons/mail/static/src/core/common/chat_window.xml

@@ -5,7 +5,7 @@
     <div class="o-mail-ChatWindow"
         t-att-style="style"
         t-att-class="{
-                'w-100 h-100': ui.isSmall,
+                'w-100 h-100 o-mobile': ui.isSmall,
                 'o-folded': props.chatWindow.folded,
                 'position-absolute bottom-0 overflow-hidden d-flex flex-column': !props.chatWindow.hidden,
                 'rounded-top-3': !props.chatWindow.hidden and !ui.isSmall,
@@ -54,7 +54,7 @@
                 <t t-set="itemClass" t-value="'me-1'"/>
             </t>
         </div>
-        <div t-if="!props.chatWindow.folded" class="o-mail-ChatWindow-content bg-view d-flex flex-column h-100 overflow-auto position-relative" t-ref="content">
+        <div t-if="!props.chatWindow.folded or ui.isSmall" class="o-mail-ChatWindow-content bg-view d-flex flex-column h-100 overflow-auto position-relative" t-ref="content">
             <button t-if="threadActions.activeAction" class="o-mail-ChatWindow-closePanel btn position-absolute top-0 end-0 btn opacity-75 opacity-100-hover" title="Close panel" t-on-click.stop="() => threadActions.activeAction.close()"><i class="fa fa-close"/></button>
             <t t-if="thread" name="thread content">
                 <t t-if="threadActions.activeAction?.componentCondition" t-component="threadActions.activeAction.component" thread="thread" t-props="threadActions.activeAction.componentProps"/>

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

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="mail.MessagingMenu" owl="1">
-    <Dropdown t-if="!env.inDiscussApp" autoOpen="false" beforeOpen.bind="beforeOpen" onStateChanged="state => this.state.isOpen = state.open" position="'bottom-end'" menuClass="`p-0 ${ ui.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
+    <Dropdown t-if="!env.inDiscussApp" autoOpen="false" beforeOpen.bind="beforeOpen" onStateChanged="state => this.state.isOpen = state.open" position="'bottom-end'" menuClass="`p-0 ${ ui.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column m-0' : ''}`">
         <t t-set-slot="toggler">
             <i class="fa fa-lg fa-comments" role="img" aria-label="Messages" t-on-click="() => store.discuss.activeTab = ui.isSmall and store.discuss.activeTab === 'mailbox' ? 'all' : store.discuss.activeTab"></i>
             <span t-if="counter" class="o-mail-MessagingMenu-counter badge rounded-pill"><t t-esc="counter"/></span>

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

@@ -23,7 +23,7 @@ patch(Messaging.prototype, "mail/core/web", {
             );
             this.notificationService.add(notification, { type: "info" });
             const chat = await this.threadService.getChat({ partnerId });
-            if (chat) {
+            if (chat && !this.ui.isSmall) {
                 this.chatWindowService.insert({ thread: chat });
             }
         });
@@ -32,7 +32,7 @@ patch(Messaging.prototype, "mail/core/web", {
         this.loadFailures();
         for (const channelData of data.channels) {
             const thread = this.threadService.createChannelThread(channelData);
-            if (channelData.is_minimized && channelData.state !== "closed") {
+            if (channelData.is_minimized && channelData.state !== "closed" && !this.ui.isSmall) {
                 this.chatWindowService.insert({
                     autofocus: 0,
                     folded: channelData.state === "folded",

addons/mail/static/tests/chat_window/chat_window_tests.js

@@ -1007,6 +1007,35 @@ QUnit.test("Chat window in mobile are not foldable", async (assert) => {
     assert.containsOnce($, ".o-mail-ChatWindow-content"); // content => non-folded
 });
 
+QUnit.test("Server-synced chat windows should not open at page load on mobile", async (assert) => {
+    const pyEnv = await startServer();
+    pyEnv["discuss.channel"].create({
+        channel_member_ids: [
+            Command.create({
+                fold_state: "open",
+                is_minimized: true,
+                partner_id: pyEnv.currentPartnerId,
+            }),
+        ],
+    });
+    patchUiSize({ size: SIZES.SM });
+    await start();
+    assert.containsNone($, ".o-mail-ChatWindow");
+});
+
+QUnit.test("chat window of channels should not have 'Open in Discuss' (mobile)", async (assert) => {
+    const pyEnv = await startServer();
+    pyEnv["discuss.channel"].create({ name: "General" });
+    patchUiSize({ size: SIZES.SM });
+    await start();
+    await click(".o_menu_systray i[aria-label='Messages']");
+    await click(".o-mail-NotificationItem");
+    assert.containsOnce($, ".o-mail-ChatWindow");
+    assert.containsOnce($, "[title='Open Actions Menu']");
+    await click("[title='Open Actions Menu']");
+    assert.containsNone($, "[title='Open in Discuss']");
+});
+
 QUnit.test("Open chat window of new inviter", async (assert) => {
     const pyEnv = await startServer();
     await start();