From d94fd7ef271d3ca512acbdebad74ad5840b76760 Mon Sep 17 00:00:00 2001
From: tsm-odoo <tsm@odoo.com>
Date: Mon, 17 Jul 2023 13:13:57 +0000
Subject: [PATCH] [IMP] mail: introduce action panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit uniformises the different discuss option
panel by introducing a dedicated component.

Before this change, every single discuss panel would
look different: font size/weight, text in lower/upper
case, margins...

Moreover, in the chat window, the close panel button
was absolute positionned which could overlap with the
content of the panel. Moreover, the cross icon looked
strange with the one of the chat window header.

This commit introduces the `ActionPanel` component in
order to solve those inconsistencies and replaces the
cross icon by an arrow left one.

part of task-3332872

closes odoo/odoo#128742

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../static/src/core/common/chat_window.js     |  1 +
 .../static/src/core/common/chat_window.xml    |  5 +-
 .../mail/static/src/core/common/discuss.scss  |  5 +-
 .../mail/static/src/core/common/discuss.xml   |  4 +-
 .../static/src/core/common/thread_actions.js  |  1 +
 .../src/discuss/call/common/call_settings.js  |  8 +-
 .../src/discuss/call/common/call_settings.xml |  5 +-
 .../src/discuss/call/common/thread_actions.js |  1 +
 .../src/discuss/core/common/action_panel.js   | 17 ++++
 .../src/discuss/core/common/action_panel.scss |  3 +
 .../src/discuss/core/common/action_panel.xml  | 16 ++++
 .../discuss/core/common/channel_invitation.js |  7 +-
 .../core/common/channel_invitation.xml        | 86 +++++++++----------
 .../core/common/channel_member_list.js        |  8 +-
 .../core/common/channel_member_list.xml       |  8 +-
 .../src/discuss/core/common/thread_actions.js |  3 +
 .../common/pinned_messages_panel.js           |  6 ++
 .../common/pinned_messages_panel.scss         |  4 -
 .../common/pinned_messages_panel.xml          | 11 +--
 .../message_pin/common/thread_actions.js      |  1 +
 20 files changed, 128 insertions(+), 72 deletions(-)
 create mode 100644 addons/mail/static/src/discuss/core/common/action_panel.js
 create mode 100644 addons/mail/static/src/discuss/core/common/action_panel.scss
 create mode 100644 addons/mail/static/src/discuss/core/common/action_panel.xml

diff --git a/addons/mail/static/src/core/common/chat_window.js b/addons/mail/static/src/core/common/chat_window.js
index 8b6461628c3..9ee6dfd6a7f 100644
--- a/addons/mail/static/src/core/common/chat_window.js
+++ b/addons/mail/static/src/core/common/chat_window.js
@@ -59,6 +59,7 @@ export class ChatWindow extends Component {
         this.contentRef = useRef("content");
         this.threadActions = useThreadActions();
         useChildSubEnv({
+            closeActionPanel: () => this.threadActions.activeAction?.close(),
             inChatWindow: true,
             messageHighlight: this.messageHighlight,
         });
diff --git a/addons/mail/static/src/core/common/chat_window.xml b/addons/mail/static/src/core/common/chat_window.xml
index 140e4695183..1f876f7416e 100644
--- a/addons/mail/static/src/core/common/chat_window.xml
+++ b/addons/mail/static/src/core/common/chat_window.xml
@@ -55,9 +55,10 @@
             </t>
         </div>
         <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"/>
+                <div t-if="threadActions.activeAction?.componentCondition" class="h-100" t-attf-class="{{ threadActions.activeAction.panelOuterClass }}">
+                    <t t-component="threadActions.activeAction.component" t-props="{ ...threadActions.activeAction.componentProps, thread }"/>
+                </div>
                 <t t-else="">
                     <Thread isInChatWindow="true" thread="thread" t-key="thread.localId" jumpPresent="state.jumpThreadPresent" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo"/>
                     <Composer composer="thread.composer" autofocus="props.chatWindow.autofocus" mode="'compact'" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onPostCallback.bind="() => this.state.jumpThreadPresent++" dropzoneRef="contentRef" type="composerType"/>
diff --git a/addons/mail/static/src/core/common/discuss.scss b/addons/mail/static/src/core/common/discuss.scss
index 3fe3b4c4c90..74ad423e243 100644
--- a/addons/mail/static/src/core/common/discuss.scss
+++ b/addons/mail/static/src/core/common/discuss.scss
@@ -5,7 +5,8 @@
 }
 
 .o-mail-Discuss-inspector {
-    width: $o-mail-Discuss-inspector;
+    flex-basis: $o-mail-Discuss-inspector;
+    flex-shrink: 0;
 }
 
 .o-mail-Discuss-selfAvatar {
@@ -44,7 +45,7 @@
             transform: translate(-50%, -50%);
             opacity: 0;
         }
-    
+
         &:hover {
             background-color: rgba($black, 0.5);
             i {
diff --git a/addons/mail/static/src/core/common/discuss.xml b/addons/mail/static/src/core/common/discuss.xml
index a0131445138..a9ffc25e6b1 100644
--- a/addons/mail/static/src/core/common/discuss.xml
+++ b/addons/mail/static/src/core/common/discuss.xml
@@ -65,7 +65,9 @@
                     <Thread thread="thread" t-key="thread.localId" jumpPresent="state.jumpThreadPresent" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo"/>
                     <Composer t-if="thread.type !== 'mailbox' or messageToReplyTo.thread === thread" t-key="thread.localId" composer="thread.composer" autofocus="true" messageEdition="messageEdition" messageToReplyTo="messageToReplyTo" onDiscardCallback="() => messageToReplyTo.cancel()" onPostCallback.bind="() => this.state.jumpThreadPresent++" dropzoneRef="contentRef" type="messageToReplyTo?.message ? (messageToReplyTo.message.isNote ? 'note' : 'message') : undefined"/>
                 </div>
-                <t t-if="threadActions.activeAction?.componentCondition" t-component="threadActions.activeAction.component" thread="thread" className="'o-mail-Discuss-inspector border-start'" t-props="threadActions.activeAction.componentProps"/>
+                <div t-if="threadActions.activeAction?.componentCondition" t-attf-class="{{ threadActions.activeAction.panelOuterClass }}" class="h-100 border-start o-mail-Discuss-inspector">
+                    <t t-component="threadActions.activeAction.component" thread="thread" t-props="threadActions.activeAction.componentProps"/>
+                </div>
             </div>
         </div>
         <div t-if="!thread and (!ui.isSmall or store.discuss.activeTab === 'mailbox')" class="d-flex flex-grow-1 align-items-center justify-content-center w-100 bg-view">
diff --git a/addons/mail/static/src/core/common/thread_actions.js b/addons/mail/static/src/core/common/thread_actions.js
index 4966f2b2365..e7ad0c9d6c5 100644
--- a/addons/mail/static/src/core/common/thread_actions.js
+++ b/addons/mail/static/src/core/common/thread_actions.js
@@ -108,6 +108,7 @@ function transformAction(component, id, action) {
             }
             action.open?.(component, this);
         },
+        panelOuterClass: action.panelOuterClass,
         /** Determines whether this is a popover linked to this action. */
         popover: null,
         /** Determines the order of this action (smaller first). */
diff --git a/addons/mail/static/src/discuss/call/common/call_settings.js b/addons/mail/static/src/discuss/call/common/call_settings.js
index 6819926b4ad..c5cde382f43 100644
--- a/addons/mail/static/src/discuss/call/common/call_settings.js
+++ b/addons/mail/static/src/discuss/call/common/call_settings.js
@@ -1,14 +1,16 @@
 /* @odoo-module */
 
 import { useRtc } from "@mail/discuss/call/common/rtc_hook";
+import { ActionPanel } from "@mail/discuss/core/common/action_panel";
 
 import { Component, onWillStart, useExternalListener, useState } from "@odoo/owl";
 
-import { browser } from "@web/core/browser/browser";
 import { _t } from "@web/core/l10n/translation";
+import { browser } from "@web/core/browser/browser";
 import { useService } from "@web/core/utils/hooks";
 
 export class CallSettings extends Component {
+    static components = { ActionPanel };
     static template = "discuss.CallSettings";
     static props = ["thread", "className?"];
 
@@ -120,4 +122,8 @@ export class CallSettings extends Component {
     onChangeEdgeBlurAmount(ev) {
         this.userSettings.edgeBlurAmount = Number(ev.target.value);
     }
+
+    get title() {
+        return _t("Voice Settings");
+    }
 }
diff --git a/addons/mail/static/src/discuss/call/common/call_settings.xml b/addons/mail/static/src/discuss/call/common/call_settings.xml
index f19e1e6f29a..5d8ced5ce54 100644
--- a/addons/mail/static/src/discuss/call/common/call_settings.xml
+++ b/addons/mail/static/src/discuss/call/common/call_settings.xml
@@ -2,9 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.CallSettings" owl="1">
-        <div class="o-discuss-CallSettings flex-grow-1 py-2 user-select-none bg-view" t-attf-class="{{ props.className }}" t-ref="root">
+        <ActionPanel title="title">
             <div class="d-flex flex-column px-3 overflow-auto">
-                <div class="py-2 fw-bolder text-700 text-truncate text-uppercase">Voice Settings</div>
                 <div class="mb-3 d-flex align-items-center flex-wrap">
                     <label class="d-flex align-items-center flex-wrap mw-100 cursor-pointer" title="Input device" aria-label="Input device">
                         <span class="me-2 text-truncate">Input device</span>
@@ -101,7 +100,7 @@
                     <button class="btn btn-primary" t-att-disabled="rtc.state.logs.size === 0" t-on-click="onClickDownloadLogs">Download logs</button>
                 </div>
             </div>
-        </div>
+        </ActionPanel>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/discuss/call/common/thread_actions.js b/addons/mail/static/src/discuss/call/common/thread_actions.js
index 2156318a93f..3c275e1bf23 100644
--- a/addons/mail/static/src/discuss/call/common/thread_actions.js
+++ b/addons/mail/static/src/discuss/call/common/thread_actions.js
@@ -37,6 +37,7 @@ threadActionsRegistry
                 (!component.props.chatWindow || component.props.chatWindow.isOpen)
             );
         },
+        panelOuterClass: "o-discuss-CallSettings",
         icon: "fa fa-fw fa-gear",
         iconLarge: "fa fa-fw fa-lg fa-gear",
         name: _t("Show Call Settings"),
diff --git a/addons/mail/static/src/discuss/core/common/action_panel.js b/addons/mail/static/src/discuss/core/common/action_panel.js
new file mode 100644
index 00000000000..b862b6ef9e5
--- /dev/null
+++ b/addons/mail/static/src/discuss/core/common/action_panel.js
@@ -0,0 +1,17 @@
+/* @odoo-module */
+
+import { Component } from "@odoo/owl";
+
+/**
+ * @typedef {Object} Props
+ * @prop {string} title
+ * @prop {Object} [slots]
+ * @extends {Component<Props, Env>}
+ */
+export class ActionPanel extends Component {
+    static template = "mail.ActionPanel";
+    static props = {
+        title: String,
+        slots: { type: Object, optional: true },
+    };
+}
diff --git a/addons/mail/static/src/discuss/core/common/action_panel.scss b/addons/mail/static/src/discuss/core/common/action_panel.scss
new file mode 100644
index 00000000000..03b72670c63
--- /dev/null
+++ b/addons/mail/static/src/discuss/core/common/action_panel.scss
@@ -0,0 +1,3 @@
+.o-mail-ActionPanel-backButton {
+    color: $o-brand-odoo;
+}
diff --git a/addons/mail/static/src/discuss/core/common/action_panel.xml b/addons/mail/static/src/discuss/core/common/action_panel.xml
new file mode 100644
index 00000000000..36c62ae5f84
--- /dev/null
+++ b/addons/mail/static/src/discuss/core/common/action_panel.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ActionPanel" owl="1">
+        <div class="overflow-auto d-flex flex-column flex-shrink-0 bg-view position-relative p-3 pt-0 h-100">
+            <div class="position-sticky top-0 py-3 d-flex align-items-baseline bg-view" style="z-index: 1;" >
+                <button t-if="env.closeActionPanel" class="o-mail-ActionPanel-backButton btn opacity-75 opacity-100-hover ps-0 py-0 fs-5" title="Close panel" t-on-click.stop="env.closeActionPanel">
+                    <i class="oi oi-arrow-left"/>
+                </button>
+                <p class="fs-6 fw-bold text-uppercase m-0 text-700 flex-grow-1" t-esc="props.title"/>
+            </div>
+            <t t-slot="default"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/discuss/core/common/channel_invitation.js b/addons/mail/static/src/discuss/core/common/channel_invitation.js
index 23c5755d1c4..35b0e85bb97 100644
--- a/addons/mail/static/src/discuss/core/common/channel_invitation.js
+++ b/addons/mail/static/src/discuss/core/common/channel_invitation.js
@@ -1,6 +1,7 @@
 /* @odoo-module */
 
 import { ImStatus } from "@mail/core/common/im_status";
+import { ActionPanel } from "@mail/discuss/core/common/action_panel";
 import { useMessaging, useStore } from "@mail/core/common/messaging_hook";
 
 import { Component, onMounted, onWillStart, useRef, useState } from "@odoo/owl";
@@ -9,7 +10,7 @@ import { _t } from "@web/core/l10n/translation";
 import { useService } from "@web/core/utils/hooks";
 
 export class ChannelInvitation extends Component {
-    static components = { ImStatus };
+    static components = { ImStatus, ActionPanel };
     static defaultProps = { hasSizeConstraints: false };
     static props = ["hasSizeConstraints?", "thread", "close", "className?"];
     static template = "discuss.ChannelInvitation";
@@ -140,4 +141,8 @@ export class ChannelInvitation extends Component {
         }
         return _t("Invite");
     }
+
+    get title() {
+        return _t("Invite people");
+    }
 }
diff --git a/addons/mail/static/src/discuss/core/common/channel_invitation.xml b/addons/mail/static/src/discuss/core/common/channel_invitation.xml
index ea75e6abaae..677a639cd22 100644
--- a/addons/mail/static/src/discuss/core/common/channel_invitation.xml
+++ b/addons/mail/static/src/discuss/core/common/channel_invitation.xml
@@ -2,54 +2,50 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.ChannelInvitation" owl="1">
-        <div class="o-discuss-ChannelInvitation bg-view d-flex flex-column" t-att-class="{ 'o-discuss-ChannelInvitation-has-size-constraints': props.hasSizeConstraints }" t-attf-class="{{ props.className }}">
-            <t t-if="store.user">
-                <h3 class="mx-3 mt-3 mb-2">Invite people</h3>
-                <div class="mx-3 my-2">
+        <ActionPanel title="title">
+            <div t-att-class="{ 'o-discuss-ChannelInvitation-has-size-constraints': props.hasSizeConstraints }">
+                <t t-if="store.user">
                     <input class="o-discuss-ChannelInvitation-search border form-control" t-ref="input" placeholder="Type the name of a person" t-on-input="onInput"/>
-                </div>
-                <div class="d-flex flex-column flex-grow-1 mx-0 py-2 overflow-auto">
-                    <t t-foreach="state.selectablePartners" t-as="selectablePartner" t-key="selectablePartner.id">
-                        <div class="o-discuss-ChannelInvitation-selectable o_object_fit_cover d-flex align-items-center px-3 py-1 btn" t-on-click="() => this.onClickSelectablePartner(selectablePartner)">
-                            <div class="d-flex align-items-center p-2">
-                                <div class="o-discuss-ChannelInvitation-avatar position-relative d-flex flex-shrink-0">
-                                    <img class="w-100 h-100 rounded o_object_fit_cover"
-                                         t-att-src="threadService.avatarUrl(selectablePartner, props.thread)"/>
-                                    <ImStatus persona="selectablePartner" className="'position-absolute top-100 start-100 translate-middle bg-view mt-n1 ms-n1'"/>
+                    <div class="d-flex flex-column mx-0 py-2 overflow-auto">
+                        <t t-foreach="state.selectablePartners" t-as="selectablePartner" t-key="selectablePartner.id">
+                            <div class="o-discuss-ChannelInvitation-selectable o_object_fit_cover d-flex align-items-center px-3 py-1 btn" t-on-click="() => this.onClickSelectablePartner(selectablePartner)">
+                                <div class="d-flex align-items-center p-2">
+                                    <div class="o-discuss-ChannelInvitation-avatar position-relative d-flex flex-shrink-0">
+                                        <img class="w-100 h-100 rounded o_object_fit_cover"
+                                            t-att-src="threadService.avatarUrl(selectablePartner, props.thread)"/>
+                                        <ImStatus persona="selectablePartner" className="'position-absolute top-100 start-100 translate-middle bg-view mt-n1 ms-n1'"/>
+                                    </div>
                                 </div>
+                                <span class="flex-grow-1 mx-2 text-truncate text-start fs-6" t-esc="selectablePartner.name"/>
+                                <input class="form-check-input flex-shrink-0" type="checkbox" t-att-checked="state.selectedPartners.includes(selectablePartner) ? 'checked' : undefined"/>
                             </div>
-                            <span class="flex-grow-1 mx-2 text-truncate text-start fs-6" t-esc="selectablePartner.name"/>
-                            <input class="form-check-input flex-shrink-0" type="checkbox" t-att-checked="state.selectedPartners.includes(selectablePartner) ? 'checked' : undefined"/>
-                        </div>
-                    </t>
-                    <div t-if="state.selectablePartners.length === 0" class="mx-3">No user found that is not already a member of this channel.</div>
-                    <div t-if="state.searchResultCount > state.selectablePartners.length" class="mx-3">
-                        Showing
-                        <t t-esc="state.selectablePartners.length"/>
-                        results out of
-                        <t t-esc="state.searchResultCount"/>
-                        . Narrow your search to see more choices.
-                    </div>
-                </div>
-                <div t-if="state.selectedPartners.length > 0" class="mx-3 mt-3">
-                    <h4>Selected users:</h4>
-                    <div class="o-discuss-ChannelInvitation-selectedList d-flex flex-wrap gap-1 overflow-auto">
-                        <t t-foreach="state.selectedPartners" t-as="selectedPartner" t-key="selectedPartner.id">
-                            <button class="btn btn-secondary" t-on-click="() => this.onClickSelectedPartner(selectedPartner)">
-                                <t t-esc="selectedPartner.name"/> <i class="fa fa-times"/>
-                            </button>
                         </t>
+                        <div t-if="state.selectablePartners.length === 0">No user found that is not already a member of this channel.</div>
+                        <div t-if="state.searchResultCount > state.selectablePartners.length">
+                            Showing
+                            <t t-esc="state.selectablePartners.length"/>
+                            results out of
+                            <t t-esc="state.searchResultCount"/>
+                            . Narrow your search to see more choices.
+                        </div>
                     </div>
-                </div>
-                <div class="mx-3 mt-2 mb-3">
-                    <button class="btn btn-primary w-100" t-att-disabled="this.state.selectedPartners.length === 0" t-att-title="invitationButtonText" t-on-click="onClickInvite">
-                        <t t-esc="invitationButtonText"/>
-                    </button>
-                </div>
-            </t>
-            <t t-if="props.thread.invitationLink">
-                <h4 class="mx-3 mt-3 mb-2">Invitation Link</h4>
-                <div class="mx-3 mt-2 mb-3">
+                    <div t-if="state.selectedPartners.length > 0" class="mt-3">
+                        <h4>Selected users:</h4>
+                        <div class="o-discuss-ChannelInvitation-selectedList d-flex flex-wrap gap-1 overflow-auto">
+                            <t t-foreach="state.selectedPartners" t-as="selectedPartner" t-key="selectedPartner.id">
+                                <button class="btn btn-secondary" t-on-click="() => this.onClickSelectedPartner(selectedPartner)">
+                                    <t t-esc="selectedPartner.name"/> <i class="fa fa-times"/>
+                                </button>
+                            </t>
+                        </div>
+                    </div>
+                    <div class="mt-2">
+                        <button class="btn btn-primary w-100" t-att-disabled="this.state.selectedPartners.length === 0" t-att-title="invitationButtonText" t-on-click="onClickInvite">
+                            <t t-esc="invitationButtonText"/>
+                        </button>
+                    </div>
+                </t>
+                <div t-if="props.thread.invitationLink" class="mt-3">
                     <div class="input-group">
                         <input class="border form-control" type="text" t-att-value="props.thread.invitationLink" readonly="" t-on-focus="onFocusInvitationLinkInput"/>
                         <button class="btn btn-primary" t-on-click="onClickCopy">
@@ -58,8 +54,8 @@
                     </div>
                     <div t-if="props.thread.accessRestrictedToGroupText" class="mt-2" t-esc="props.thread.accessRestrictedToGroupText"/>
                 </div>
-            </t>
-        </div>
+            </div>
+        </ActionPanel>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/discuss/core/common/channel_member_list.js b/addons/mail/static/src/discuss/core/common/channel_member_list.js
index 94f65d82c5b..f6b4950f0ca 100644
--- a/addons/mail/static/src/discuss/core/common/channel_member_list.js
+++ b/addons/mail/static/src/discuss/core/common/channel_member_list.js
@@ -1,14 +1,16 @@
 /* @odoo-module */
 
 import { ImStatus } from "@mail/core/common/im_status";
+import { ActionPanel } from "@mail/discuss/core/common/action_panel";
 import { useMessaging, useStore } from "@mail/core/common/messaging_hook";
 
 import { Component, onWillUpdateProps, onWillStart, useState } from "@odoo/owl";
 
+import { _t } from "@web/core/l10n/translation";
 import { useService } from "@web/core/utils/hooks";
 
 export class ChannelMemberList extends Component {
-    static components = { ImStatus };
+    static components = { ImStatus, ActionPanel };
     static props = ["thread", "className?"];
     static template = "discuss.ChannelMemberList";
 
@@ -44,4 +46,8 @@ export class ChannelMemberList extends Component {
         }
         this.threadService.openChat({ partnerId: member.persona.id });
     }
+
+    get title() {
+        return _t("Member List");
+    }
 }
diff --git a/addons/mail/static/src/discuss/core/common/channel_member_list.xml b/addons/mail/static/src/discuss/core/common/channel_member_list.xml
index 8213a2bdbca..81a0692dcc8 100644
--- a/addons/mail/static/src/discuss/core/common/channel_member_list.xml
+++ b/addons/mail/static/src/discuss/core/common/channel_member_list.xml
@@ -2,16 +2,16 @@
 <templates xml:space="preserve">
 
     <t t-name="discuss.ChannelMemberList" owl="1">
-        <div class="o-discuss-ChannelMemberList d-flex flex-column overflow-auto bg-view" t-att-class="props.className">
+        <ActionPanel title="title">
             <t t-if="props.thread.onlineMembers.length > 0">
-                <h6 class="m-2">
+                <h6 class="mx-3 text-700">
                     Online -
                     <t t-esc="props.thread.onlineMembers.length"/>
                 </h6>
                 <t t-foreach="props.thread.onlineMembers" t-as="member" t-key="member.id" t-call="discuss.channel_member"/>
             </t>
             <t t-if="props.thread.offlineMembers.length > 0">
-                <h6 class="m-2">
+                <h6 class="mx-3 text-700">
                     Offline -
                     <t t-esc="props.thread.offlineMembers.length"/>
                 </h6>
@@ -22,7 +22,7 @@
             <div t-if="!props.thread.areAllMembersLoaded" class="mx-2 my-1">
                 <button class="btn btn-secondary" title="Load more" t-on-click.stop="() => threadService.fetchChannelMembers(props.thread)">Load more</button>
             </div>
-        </div>
+        </ActionPanel>
     </t>
 
     <t t-name="discuss.channel_member" owl="1">
diff --git a/addons/mail/static/src/discuss/core/common/thread_actions.js b/addons/mail/static/src/discuss/core/common/thread_actions.js
index fd8a5b5a92b..7d111bda079 100644
--- a/addons/mail/static/src/discuss/core/common/thread_actions.js
+++ b/addons/mail/static/src/discuss/core/common/thread_actions.js
@@ -24,6 +24,7 @@ threadActionsRegistry
                 (!component.props.chatWindow || component.props.chatWindow.isOpen)
             );
         },
+        panelOuterClass: "o-discuss-ChannelInvitation",
         icon: "fa fa-fw fa-user-plus",
         iconLarge: "fa fa-fw fa-lg fa-user-plus",
         name: _t("Add Users"),
@@ -40,6 +41,7 @@ threadActionsRegistry
             if (!component.props.chatWindow) {
                 action.popover = usePopover(ChannelInvitation, {
                     onClose: () => action.close(),
+                    popoverClass: action.panelOuterClass,
                 });
             }
         },
@@ -53,6 +55,7 @@ threadActionsRegistry
                 (!component.props.chatWindow || component.props.chatWindow.isOpen)
             );
         },
+        panelOuterClass: "o-discuss-ChannelMemberList",
         icon: "fa fa-fw fa-users",
         iconLarge: "fa fa-fw fa-lg fa-users",
         name: _t("Show Member List"),
diff --git a/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.js b/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.js
index da87fe23343..8de45751c4c 100644
--- a/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.js
+++ b/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.js
@@ -2,6 +2,7 @@
 
 import { Message } from "@mail/core/common/message";
 import { useMessagePinService } from "@mail/discuss/message_pin/common/message_pin_service";
+import { ActionPanel } from "@mail/discuss/core/common/action_panel";
 
 import { Component, onWillStart, onWillUpdateProps, useState, useSubEnv } from "@odoo/owl";
 
@@ -11,6 +12,7 @@ import { useService } from "@web/core/utils/hooks";
 export class PinnedMessagesPanel extends Component {
     static components = {
         Message,
+        ActionPanel,
     };
     static props = ["thread", "className?"];
     static template = "discuss.PinnedMessagesPanel";
@@ -71,4 +73,8 @@ export class PinnedMessagesPanel extends Component {
             return _t("This conversation doesn't have any pinned messages.");
         }
     }
+
+    get title() {
+        return _t("Pinned Messages");
+    }
 }
diff --git a/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.scss b/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.scss
index 6deb2fb7ef1..d5884e4860f 100644
--- a/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.scss
+++ b/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.scss
@@ -2,10 +2,6 @@
     flex-basis: 425px;
 }
 
-.o-discuss-PinnedMessagesPanel-title {
-    z-index: 1;
-}
-
 .o-discuss-PinnedMessagesPanel-jump {
     color: white;
 }
diff --git a/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.xml b/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.xml
index 16e7ce3705b..f3add1b7cdd 100644
--- a/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.xml
+++ b/addons/mail/static/src/discuss/message_pin/common/pinned_messages_panel.xml
@@ -1,14 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="discuss.PinnedMessagesPanel" owl="1">
-        <div class="o-discuss-PinnedMessagesPanel overflow-auto d-flex flex-column flex-shrink-0 bg-view position-relative" t-att-class="{
-            'flex-grow-1': env.inChatWindow,
-        }" t-attf-class="{{ props.className }}">
-            <p class="o-discuss-PinnedMessagesPanel-title position-sticky top-0 py-3 mb-0 fw-bolder text-center text-uppercase text-700">
-                Pinned messages
-            </p>
+        <ActionPanel title="title">
             <div class="d-flex flex-column" t-att-class="{ 'justify-content-center flex-grow-1': !messagePinService.hasPinnedMessages(props.thread) }" t-ref="message-list">
-                <div class="card m-3 mt-0" t-foreach="messagePinService.getPinnedMessages(props.thread)" t-as="message" t-key="message.id">
+                <div class="card mb-3" t-foreach="messagePinService.getPinnedMessages(props.thread)" t-as="message" t-key="message.id">
                     <div class="card-body">
                         <div class="d-flex justify-content-end">
                             <button class="o-discuss-PinnedMessagesPanel-jump btn rounded bg-400 badge opacity-0 flex-shrink-0" t-att-class="{ 'opacity-100 py-1 px-2': ui.isSmall }" t-on-click="() => this.onClickJump(message)">Jump</button>
@@ -21,6 +16,6 @@
                 </div>
                 <p t-if="!messagePinService.hasPinnedMessages(props.thread)" t-esc="emptyMessage" class="text-center fst-italic text-500 fs-6"/>
             </div>
-        </div>
+        </ActionPanel>
     </t>
 </templates>
diff --git a/addons/mail/static/src/discuss/message_pin/common/thread_actions.js b/addons/mail/static/src/discuss/message_pin/common/thread_actions.js
index 8ceac937a87..3a3c75a93b7 100644
--- a/addons/mail/static/src/discuss/message_pin/common/thread_actions.js
+++ b/addons/mail/static/src/discuss/message_pin/common/thread_actions.js
@@ -15,6 +15,7 @@ threadActionsRegistry.add("pinned-messages", {
             (!component.props.chatWindow || component.props.chatWindow.isOpen)
         );
     },
+    panelOuterClass: "o-discuss-PinnedMessagesPanel",
     icon: "fa fa-fw fa-thumb-tack",
     iconLarge: "fa fa-fw fa-lg fa-thumb-tack",
     name: _t("Pinned Messages"),