refactor: migrate Message context menu to centralized store

packages/web/src/components/chat/Message.tsx

@@ -3,7 +3,8 @@ import { createPortal } from 'react-dom';
 import type { MessageWithUser } from '@backspace/shared';
 import { MarkdownRenderer } from './MarkdownRenderer';
 import { Avatar } from '../ui/Avatar';
-import { ContextMenu } from '../ui/ContextMenu';
+import { useContextMenu } from '../../hooks/useContextMenu';
+import type { ContextMenuItem } from '../../stores/contextMenuStore';
 import { useAuthStore } from '../../stores/authStore';
 import { useChatStore } from '../../stores/chatStore';
 import { useSpaceStore } from '../../stores/spaceStore';
@@ -156,10 +157,17 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
     });
   };
 
-  const contextMenuItems = [];
+  const contextMenuItems: ContextMenuItem[] = [];
   if (isAuthor) {
     contextMenuItems.push({
+      key: 'edit',
+      type: 'action',
       label: 'Edit Message',
+      icon: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
+        </svg>
+      ),
       onClick: () => {
         setEditContent(message.content ?? '');
         setIsEditing(true);
@@ -168,12 +176,21 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
   }
   if (canDelete) {
     contextMenuItems.push({
+      key: 'delete',
+      type: 'action',
       label: 'Delete Message',
+      icon: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+        </svg>
+      ),
       onClick: () => deleteMessage(message.id, channelKey),
       danger: true,
     });
   }
 
+  const { onContextMenu } = useContextMenu(contextMenuItems);
+
   const handleEditSubmit = async (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -519,9 +536,9 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
     </div>
   );
 
-  if (contextMenuItems.length > 0) {
+  return (
-    return <ContextMenu items={contextMenuItems}>{content}</ContextMenu>;
+    <div onContextMenu={contextMenuItems.length > 0 ? onContextMenu : undefined}>
-  }
+      {content}
-
+    </div>
-  return content;
+  );
 }