feat: add conversation actions to channel chat (#2721)

Author: domw30

src/apps/feed/components/feed-chat/index.tsx

@@ -15,11 +15,10 @@ import { Panel, PanelBody, PanelHeader, PanelTitle } from '../../../../component
 import { InvertedScroll } from '../../../../components/inverted-scroll';
 import { getOtherMembersTypingDisplayJSX } from '../../../../components/messenger/lib/utils';
 import { rawChannelSelector } from '../../../../store/channels/saga';
-import { IconButton } from '@zero-tech/zui/components/IconButton';
-import { IconChevronLeft, IconChevronRight } from '@zero-tech/zui/icons';
 import { toggleSecondarySidekick } from '../../../../store/group-management';
 import { MembersSidekick } from '../../../../components/sidekick/variants/members-sidekick';
 import { Spinner } from '@zero-tech/zui/components/LoadingIndicator';
+import { ConversationActionsContainer } from '../../../../components/messenger/conversation-actions/container';
 
 import classNames from 'classnames';
 import styles from './styles.module.scss';
@@ -142,15 +141,11 @@ export class Container extends React.Component<Properties> {
 
   renderHeader = () => {
     return (
-      <PanelHeader className={styles.PanelHeader} toggleSidekick={this.toggleSidekick}>
-        <PanelTitle>Chat</PanelTitle>
-        <IconButton
-          className={classNames(styles.GroupButton, this.props.isSecondarySidekickOpen && 'is-active')}
-          Icon={this.props.isSecondarySidekickOpen ? IconChevronRight : IconChevronLeft}
-          size={32}
-          onClick={this.toggleSidekick}
-          isFilled
-        />
+      <PanelHeader className={styles.PanelHeader}>
+        <PanelTitle className={styles.PanelTitle} toggleSidekick={this.toggleSidekick}>
+          Chat
+        </PanelTitle>
+        <ConversationActionsContainer />
       </PanelHeader>
     );
   };

src/apps/feed/components/feed-chat/styles.module.scss

@@ -43,7 +43,14 @@
 }
 
 .PanelHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.PanelTitle {
   cursor: pointer;
+  width: 100%;
 }
 
 .GroupButton {

src/components/layout/panel/index.tsx

@@ -28,14 +28,14 @@ export const PanelBody = ({ children, className }: PanelProps) => {
   return <div className={cn(styles.Body, className)}>{children}</div>;
 };
 
-export const PanelHeader = ({ children, className, toggleSidekick }: PanelProps) => {
+export const PanelHeader = ({ children, className }: PanelProps) => {
+  return <div className={cn(styles.Header, className)}>{children}</div>;
+};
+
+export const PanelTitle = ({ children, className, toggleSidekick }: PanelProps) => {
   return (
-    <div className={cn(styles.Header, className)} onClick={toggleSidekick}>
+    <div className={cn(styles.Title, className)} onClick={toggleSidekick}>
       {children}
     </div>
   );
 };
-
-export const PanelTitle = ({ children, className }: PanelProps) => {
-  return <div className={cn(styles.Title, className)}>{children}</div>;
-};