feat(context-menu): Add WhatsApp-style context menus with right-click support

- Add ContextMenu component with keyboard navigation (↑/↓/Enter/Esc)
- Support right-click on chat rows and message bubbles
- Position menus dynamically using exact bubble bounds (this.x, this.y)
- Handle bottom overflow by anchoring menu to bubble bottom instead
- Add chat actions: Archive/Unarchive, Mark as unread, Delete
- Add message actions: Reply, Copy, React, Forward, Pin, Star, Delete
- Fix archive detection using _chat.archived property
- Replace delete emoji with ✕ for better terminal compatibility
- Add context menu icons to theme configuration

Author: muhammedaksam

src/components/ContextMenu.ts

@@ -7,6 +7,7 @@ import { Box, ProxiedVNode, Text, type BoxRenderable } from "@opentui/core"
 import { WhatsAppTheme, Icons } from "../config/theme"
 import { appState, type ContextMenuType } from "../state/AppState"
 import type { ChatSummary, WAMessage } from "@muhammedaksam/waha-node"
+import { getRenderer } from "../state/RendererContext"
 
 export interface ContextMenuItem {
   id: string
@@ -180,39 +181,89 @@ export function ContextMenu(): ProxiedVNode<typeof BoxRenderable> | null {
   })
 
   // Calculate menu height
-  const menuHeight = items.reduce((acc, item) => acc + (item.separator ? 2 : 1), 0) + 2 // +2 for border
+  const menuHeight =
+    items.reduce((acc, item) => acc + (item.separator ? 2 : 1), 0) +
+    (contextMenu.type === "chat" ? 2 : 1) // +2 for border
 
   // Menu title
-  const title = contextMenu.type === "chat" ? "Chat Options" : "Message Options"
+  // const title = contextMenu.type === "chat" ? "Chat Options" : "Message Options"
+
+  // Position logic differs by menu type:
+  // - Chat menu: appears at click position (floating near clicked chat)
+  // - Message menu: anchored to right side of conversation area, near the clicked message
+  const pos = contextMenu.position || { x: 10, y: 5 }
+
+  let leftPosition: number
+  let topPosition: number
+
+  if (contextMenu.type === "message") {
+    // For message menu: anchor to top-right corner of the message bubble
+    // Use the exact bubble position and dimensions passed from the renderable
+    const message = contextMenu.targetData as { fromMe?: boolean } | null
+    const isFromMe = message?.fromMe === true
+
+    // Get bubble bounds from position
+    const bubbleX = pos.x
+    const bubbleY = pos.y
+    const bubbleWidth = pos.bubbleWidth || 40
+    const bubbleHeight = pos.bubbleHeight || 3
+
+    if (isFromMe) {
+      // Sent messages (right-aligned) - menu appears 1 block left from the bubble's left edge
+      // So position is: bubbleX - menuWidth - 1
+      leftPosition = Math.max(2, bubbleX - menuWidth - 1)
+    } else {
+      // Received messages (left-aligned) - menu appears 1 block right from the bubble's right edge
+      // So position is: bubbleX + bubbleWidth + 1
+      leftPosition = bubbleX + bubbleWidth + 1
+    }
+
+    // Check for bottom overflow - if menu would go off screen, show above instead
+    const renderer = getRenderer()
+    const terminalHeight = renderer.height
+    // Anchor 1 row down from the top of the bubble
+    const anchorY = bubbleY + 1
+
+    if (anchorY + menuHeight > terminalHeight - 2) {
+      // Menu would overflow - anchor from bottom of bubble instead (menu grows upward)
+      // Position so the bottom of the menu aligns with the bottom of the bubble
+      topPosition = Math.max(2, bubbleY + bubbleHeight - menuHeight)
+    } else {
+      // Normal positioning - menu starts 1 row down from bubble top
+      topPosition = Math.max(2, anchorY)
+    }
+  } else {
+    // For chat menu: use click position
+    leftPosition = Math.max(2, pos.x)
+    topPosition = Math.max(2, pos.y)
+  }
 
   return Box(
     {
-      // Position in center of screen for now
-      // A more sophisticated implementation would position near click location
       position: "absolute",
-      top: 5,
-      left: 10,
+      top: topPosition,
+      left: leftPosition,
       width: menuWidth + 2, // +2 for border
-      height: menuHeight,
+      height: menuHeight + (contextMenu.type === "message" ? 1 : 0),
       backgroundColor: WhatsAppTheme.panelDark,
       border: true,
       borderColor: WhatsAppTheme.borderLight,
       flexDirection: "column",
       zIndex: 100,
     },
     // Header
-    Box(
-      {
-        height: 1,
-        width: menuWidth,
-        paddingLeft: 1,
-        backgroundColor: WhatsAppTheme.panelLight,
-      },
-      Text({
-        content: title,
-        fg: WhatsAppTheme.textSecondary,
-      })
-    ),
+    // Box(
+    //   {
+    //     height: 1,
+    //     width: menuWidth,
+    //     paddingLeft: 1,
+    //     backgroundColor: WhatsAppTheme.panelLight,
+    //   },
+    //   Text({
+    //     content: title,
+    //     fg: WhatsAppTheme.textSecondary,
+    //   })
+    // ),
     // Menu items
     ...menuItems
   )

src/state/AppState.ts

@@ -22,6 +22,12 @@ export interface ContextMenuState {
   targetId: string | null // Chat ID or Message ID
   targetData?: ChatSummary | WAMessage | null // The actual chat or message data
   selectedIndex: number // Currently highlighted menu item
+  position: {
+    x: number
+    y: number
+    bubbleWidth?: number // For message bubbles - the width of the bubble
+    bubbleHeight?: number // For message bubbles - the height of the bubble
+  }
 }
 
 export type ViewType =
@@ -315,7 +321,8 @@ class StateManager {
   openContextMenu(
     type: ContextMenuType,
     targetId: string,
-    targetData?: ChatSummary | WAMessage | null
+    targetData?: ChatSummary | WAMessage | null,
+    position: { x: number; y: number } = { x: 10, y: 5 }
   ): void {
     this.setState({
       contextMenu: {
@@ -324,6 +331,7 @@ class StateManager {
         targetId,
         targetData,
         selectedIndex: 0,
+        position,
       },
     })
   }

src/views/ChatListManager.ts

@@ -226,7 +226,8 @@ class ChatListManager {
             if (event.button === 2) {
               debugLog("ChatListManager", `Right-clicked chat: ${chatRef.name || chatId}`)
               appState.setSelectedChatIndex(chatIndex)
-              appState.openContextMenu("chat", chatId, chatRef)
+              // Pass click position for menu placement
+              appState.openContextMenu("chat", chatId, chatRef, { x: event.x, y: event.y })
               return
             }
 

src/views/ConversationView.ts

@@ -570,10 +570,24 @@ function renderMessage(
     borderColor: isFromMe ? WhatsAppTheme.green : WhatsAppTheme.borderColor,
     flexDirection: "column",
     // Handle right-click for context menu
-    onMouse: (event) => {
+    // Use function (not arrow) to get access to 'this' which is the bubble renderable
+    onMouse: function (event) {
       if (event.type === "down" && event.button === 2) {
-        debugLog("ConversationView", `Right-clicked message: ${msgId}`)
-        appState.openContextMenu("message", msgId, msgRef as unknown as WAMessage)
+        // Get bubble's exact screen position and dimensions
+        const bubbleX = this.x
+        const bubbleY = this.y
+
+        debugLog(
+          "ConversationView",
+          `Right-clicked message: ${msgId} at bubble pos (${bubbleX}, ${bubbleY})`
+        )
+
+        // Pass bubble bounds for precise positioning
+        // The context menu will use this to anchor to the bubble's corner
+        appState.openContextMenu("message", msgId, msgRef as unknown as WAMessage, {
+          x: bubbleX,
+          y: bubbleY,
+        })
       }
     },
   })