[PAY-1143] Desktop: Overflow menu on Chat Header (#3169)

packages/stems/src/components/Icons/index.ts

@@ -139,3 +139,4 @@ export { ReactComponent as IconSettings } from '../../assets/icons/iconSettings.
 export { ReactComponent as IconDashboard } from '../../assets/icons/iconDashboard.svg'
 export { ReactComponent as IconMood } from '../../assets/icons/iconMood.svg'
 export { ReactComponent as IconDesktop } from '../../assets/icons/iconDesktop.svg'
+export { ReactComponent as IconTrash } from '../../assets/icons/iconTrash.svg'

packages/web/src/pages/chat-page/components/ChatHeader.module.css

@@ -35,6 +35,7 @@
 }
 
 .right {
+  flex: 1;
   display: flex;
   align-items: flex-end;
   padding: var(--unit-4);

packages/web/src/pages/chat-page/components/ChatHeader.tsx

@@ -1,31 +1,59 @@
 import { forwardRef, useCallback } from 'react'
 
-import { useProxySelector, chatSelectors } from '@audius/common'
-import { IconButton, IconCompose, IconSettings } from '@audius/stems'
+import {
+  useProxySelector,
+  chatSelectors,
+  chatActions,
+  User
+} from '@audius/common'
+import {
+  IconButton,
+  IconCompose,
+  IconSettings,
+  IconKebabHorizontal,
+  PopupMenu,
+  IconBlockMessages,
+  IconUnblockMessages,
+  IconUser,
+  IconTrash
+} from '@audius/stems'
+import { push as pushRoute } from 'connected-react-router'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
+import { profilePage } from 'utils/route'
 
 import styles from './ChatHeader.module.css'
 import { ChatUser } from './ChatUser'
 
 const messages = {
   header: 'Messages',
   settings: 'Settings',
-  compose: 'Compose'
+  compose: 'Compose',
+  chatSettings: 'Chat Settings',
+  block: 'Block Messages',
+  unblock: 'Unblock Messages',
+  delete: 'Delete Conversation',
+  visit: "Visit User's Profile"
 }
 
-const { getOtherChatUsers } = chatSelectors
+const { getOtherChatUsers, getBlockees } = chatSelectors
+const { blockUser, unblockUser } = chatActions
 
 type ChatHeaderProps = { currentChatId?: string }
 
 export const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
   ({ currentChatId }, ref) => {
+    const dispatch = useDispatch()
     const [, setCreateChatVisible] = useModalState('CreateChat')
     const [, setInboxSettingsVisible] = useModalState('InboxSettings')
     const users = useProxySelector(
       (state) => getOtherChatUsers(state, currentChatId),
       [currentChatId]
     )
+    const user: User | null = users[0] ?? null
+    const blockeeList = useSelector(getBlockees)
+    const isBlocked = user && blockeeList.includes(user.user_id)
 
     const handleComposeClicked = useCallback(() => {
       setCreateChatVisible(true)
@@ -35,6 +63,44 @@ export const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
       setInboxSettingsVisible(true)
     }, [setInboxSettingsVisible])
 
+    const handleUnblockClicked = useCallback(() => {
+      dispatch(unblockUser({ userId: user.user_id }))
+    }, [dispatch, user])
+
+    const handleBlockClicked = useCallback(() => {
+      dispatch(blockUser({ userId: user.user_id }))
+    }, [dispatch, user])
+
+    const handleVisitClicked = useCallback(() => {
+      dispatch(pushRoute(profilePage(user.handle)))
+    }, [dispatch, user])
+
+    const overflowItems = [
+      isBlocked
+        ? {
+            text: messages.unblock,
+            icon: <IconUnblockMessages />,
+            onClick: handleUnblockClicked
+          }
+        : {
+            text: messages.block,
+            icon: <IconBlockMessages />,
+            onClick: handleBlockClicked
+          },
+      {
+        text: messages.delete,
+        icon: <IconTrash />,
+        onClick: () => {
+          // TODO: Store changes for chat deletion
+        }
+      },
+      {
+        text: messages.visit,
+        icon: <IconUser />,
+        onClick: handleVisitClicked
+      }
+    ]
+
     return (
       <div ref={ref} className={styles.root}>
         <div className={styles.left}>
@@ -53,7 +119,24 @@ export const ChatHeader = forwardRef<HTMLDivElement, ChatHeaderProps>(
           </div>
         </div>
         <div className={styles.right}>
-          {users.length > 0 ? <ChatUser user={users[0]} /> : null}
+          {user ? <ChatUser user={user} /> : null}
+          {user ? (
+            <div className={styles.overflow}>
+              <PopupMenu
+                items={overflowItems}
+                transformOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                renderTrigger={(ref, trigger) => (
+                  <IconButton
+                    ref={ref}
+                    aria-label={messages.chatSettings}
+                    icon={<IconKebabHorizontal />}
+                    onClick={trigger}
+                  />
+                )}
+              />
+            </div>
+          ) : null}
         </div>
       </div>
     )