Merge branch 'feat/redesign-conversation-header' into feat/redesign-m…

…essenger-chat-container

src/apps/messenger/Main.module.scss

@@ -6,6 +6,15 @@
 }
 
 .Header {
+  left: 0;
+  pointer-events: all !important;
+  position: absolute;
+  top: 16px;
+  width: calc(100% - 16px) !important;
+  z-index: 1000;
+}
+
+.Actions {
   right: 13px;
   pointer-events: all !important;
   position: absolute;

src/apps/messenger/Main.tsx

@@ -10,8 +10,9 @@ import { DevPanelContainer } from '../../components/dev-panel/container';
 import { FeatureFlag } from '../../components/feature-flag';
 
 import styles from './Main.module.scss';
-import { ConversationHeader } from '../../components/messenger/chat/conversation-header/container';
+import { ConversationHeaderContainer as ConversationHeader } from '../../components/messenger/conversation-header/container';
 import { denormalize } from '../../store/channels';
+import { ConversationActionsContainer as ConversationActions } from '../../components/messenger/conversation-actions/container';
 
 export interface Properties {
   context: {
@@ -49,7 +50,9 @@ export class Container extends React.Component<Properties> {
             <Sidekick />
 
             <div className={styles.Split}>
-              <ConversationHeader className={styles.Header} />
+              {!this.props.isSocialChannel && <ConversationHeader className={styles.Header} />}
+
+              <ConversationActions className={styles.Actions} />
 
               {this.props.isSocialChannel && !this.props.isJoiningConversation && this.props.isValidConversation && (
                 <FeatureFlag featureFlag='enableChannels'>

src/components/header/index.module.scss

@@ -1,18 +1,17 @@
 @use '~@zero-tech/zui/styles/theme' as theme;
 @import '../../glass';
 
+$header-height: 66px;
+
 .Header {
-  display: flex;
-  align-items: center;
-  border-radius: 6px;
-  border: 1px solid rgba(52, 56, 60, 0.24);
+  border-radius: 16px;
   box-sizing: border-box;
-
-  gap: 9px;
-  padding: 8px;
-
-  background: rgba(17, 18, 19, 0.24);
-  backdrop-filter: blur(64px);
+  display: flex;
+  gap: 8px;
+  height: $header-height;
+  padding: 16px;
+  width: 100%;
+  @include flat-thick;
 
   .Avatar {
     pointer-events: none;
@@ -38,7 +37,18 @@
 
   .End {
     display: flex;
-    gap: 9px;
+    gap: 8px;
+  }
+
+  .Title {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 17px;
+    color: theme.$color-greyscale-12;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .Subtitle {

src/components/header/index.tsx

@@ -13,25 +13,22 @@ export interface HeaderProps {
   icon?: ReactNode;
   onClick?: () => void;
   subtitle?: ReactNode;
-  title?: ReactNode;
+  title: ReactNode;
 }
 
 export const Header = ({ icon, className, end, onClick, subtitle, title }: HeaderProps) => {
   // If it's clickable, it should be a button
   const Details = onClick ? 'button' : 'div';
-  const hasDetails = icon || title || subtitle;
 
   return (
     <div className={classNames(styles.Header, className)}>
-      {hasDetails && (
-        <Details className={styles.Details} onClick={onClick}>
-          {icon && <div className={styles.Avatar}>{icon}</div>}
-          <span className={styles.Description}>
-            <div className={styles.Title}>{title}</div>
-            {subtitle && <div className={styles.Subtitle}>{subtitle}</div>}
-          </span>
-        </Details>
-      )}
+      <Details className={styles.Details} onClick={onClick}>
+        {icon && <div className={styles.Avatar}>{icon}</div>}
+        <span className={styles.Description}>
+          <div className={styles.Title}>{title}</div>
+          {subtitle && <div className={styles.Subtitle}>{subtitle}</div>}
+        </span>
+      </Details>
       {end && <div className={styles.End}>{end}</div>}
     </div>
   );

src/components/header/index.vitest.tsx

@@ -43,7 +43,7 @@ describe(Header, () => {
 
   it('should call onClick', async () => {
     const onClick = vi.fn();
-    renderComponent({ onClick, title: 'foo' });
+    renderComponent({ onClick });
 
     screen.getByRole('button').click();