feat(react): unify chat menu

packages/status-react/src/components/chat-menu/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { BellIcon } from '~/src/icons/bell-icon'
+import { ContextMenu, DropdownMenu } from '~/src/system'
+
+interface Props {
+  type: 'dropdown' | 'context'
+  chatType: 'channel' | 'chat' | 'group-chat'
+}
+
+export const ChatMenu = (props: Props) => {
+  const { type, chatType } = props
+
+  const Menu = type === 'dropdown' ? DropdownMenu : ContextMenu
+
+  const renderMenuItems = () => {
+    const commonMenuItems = (
+      <>
+        <Menu.TriggerItem label="Mute Chat" icon={<BellIcon />}>
+          <Menu.Item>For 15 min</Menu.Item>
+          <Menu.Item>For 1 hour</Menu.Item>
+          <Menu.Item>For 8 hours</Menu.Item>
+          <Menu.Item>For 24 hours</Menu.Item>
+          <Menu.Item>Until I turn it back on</Menu.Item>
+        </Menu.TriggerItem>
+        <Menu.Item icon={<BellIcon />}>Mark as Read</Menu.Item>
+        <Menu.TriggerItem label="Fetch Messages" icon={<BellIcon />}>
+          <Menu.Item>Last 24 hours</Menu.Item>
+          <Menu.Item>Last 2 days</Menu.Item>
+          <Menu.Item>Last 3 days</Menu.Item>
+          <Menu.Item>Last 7 days</Menu.Item>
+        </Menu.TriggerItem>
+      </>
+    )
+
+    if (chatType === 'channel') {
+      return commonMenuItems
+    }
+
+    if (chatType === 'group-chat') {
+      return (
+        <>
+          <Menu.Item icon={<BellIcon />}>Add / remove from group</Menu.Item>
+          <Menu.Item icon={<BellIcon />}>Edit name and image</Menu.Item>
+          <Menu.Separator />
+          {commonMenuItems}
+          <Menu.Separator />
+          <Menu.Item icon={<BellIcon />} danger>
+            Leave Chat
+          </Menu.Item>
+        </>
+      )
+    }
+
+    return (
+      <>
+        <Menu.Item icon={<BellIcon />}>View Profile</Menu.Item>
+        <Menu.Separator />
+        {commonMenuItems}
+        <Menu.Separator />
+        <Menu.Item icon={<BellIcon />} danger>
+          Delete Chat
+        </Menu.Item>
+      </>
+    )
+  }
+
+  return <Menu>{renderMenuItems()}</Menu>
+}

packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { BellIcon } from '~/src/icons/bell-icon'
+import { ChatMenu } from '~/src/components/chat-menu'
-import { ContextMenu, ContextMenuTrigger } from '~/src/system/context-menu'
+import { ContextMenuTrigger } from '~/src/system/context-menu'
 
 import { SidebarItem } from '../sidebar-item'
 
@@ -17,21 +17,7 @@ export const ChannelItem = (props: Props) => {
   return (
     <ContextMenuTrigger>
       <SidebarItem {...sidebarItemProps}>#{children}</SidebarItem>
-      <ContextMenu>
+      <ChatMenu type="context" chatType="channel" />
-        <ContextMenu.Item icon={<BellIcon />}>View Profile</ContextMenu.Item>
-        <ContextMenu.Separator />
-        <ContextMenu.TriggerItem label="Mute Chat">
-          <ContextMenu.Item>For 15 min</ContextMenu.Item>
-          <ContextMenu.Item>For 1 hour</ContextMenu.Item>
-          <ContextMenu.Item>For 8 hours</ContextMenu.Item>
-          <ContextMenu.Item>For 24 hours</ContextMenu.Item>
-          <ContextMenu.Item>Until I turn it back on</ContextMenu.Item>
-        </ContextMenu.TriggerItem>
-        <ContextMenu.Separator />
-        <ContextMenu.Item icon={<BellIcon />} danger>
-          Delete
-        </ContextMenu.Item>
-      </ContextMenu>
     </ContextMenuTrigger>
   )
 }

packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 
-import { BellIcon } from '~/src/icons/bell-icon'
+import { ChatMenu } from '~/src/components/chat-menu'
-import { ContextMenu, ContextMenuTrigger } from '~/src/system'
+import { useChat } from '~/src/protocol/use-chat'
+import { ContextMenuTrigger } from '~/src/system'
 
 import { SidebarItem } from '../sidebar-item'
 
@@ -14,24 +15,12 @@ interface Props extends SidebarItemProps {
 export const ChatItem = (props: Props) => {
   const { children, ...sidebarItemProps } = props
 
+  const chat = useChat(children)
+
   return (
     <ContextMenuTrigger>
       <SidebarItem {...sidebarItemProps}>{children}</SidebarItem>
-      <ContextMenu>
+      <ChatMenu type="context" chatType={chat.type} />
-        <ContextMenu.Item icon={<BellIcon />}>View Profile</ContextMenu.Item>
-        <ContextMenu.Separator />
-        <ContextMenu.TriggerItem label="Mute Chat" icon={<BellIcon />}>
-          <ContextMenu.Item>For 15 min</ContextMenu.Item>
-          <ContextMenu.Item>For 1 hour</ContextMenu.Item>
-          <ContextMenu.Item>For 8 hours</ContextMenu.Item>
-          <ContextMenu.Item>For 24 hours</ContextMenu.Item>
-          <ContextMenu.Item>Until I turn it back on</ContextMenu.Item>
-        </ContextMenu.TriggerItem>
-        <ContextMenu.Separator />
-        <ContextMenu.Item icon={<BellIcon />} danger>
-          Delete
-        </ContextMenu.Item>
-      </ContextMenu>
     </ContextMenuTrigger>
   )
 }