From 65312744c70cc1a2c15abad6705fe7b30167d66c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 5 Aug 2025 03:15:36 +0530
Subject: [PATCH] chore: Update inbox view context menu (#12090)

# Pull Request Template

## Description

This PR updates the inbox view context menu to use the existing
conversation card context menu for consistency.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshots

**Before**
<img width="395" height="257" alt="image"
src="https://github.com/user-attachments/assets/88620d0c-99b4-480d-a9c3-89b78907dfc6"
/>
<img width="395" height="257" alt="image"
src="https://github.com/user-attachments/assets/e42523ba-f880-47c6-b3a0-131ffa41fb1b"
/>


**After**
<img width="395" height="257" alt="image"
src="https://github.com/user-attachments/assets/13cf7528-2c37-4077-9e66-7bd0e53df0d5"
/>
<img width="395" height="257" alt="image"
src="https://github.com/user-attachments/assets/8558f574-ef33-4b58-b0f7-fbddbcefe200"
/>


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../components-next/Inbox/InboxCard.vue       |  3 +-
 .../routes/dashboard/inbox/InboxList.vue      |  2 +-
 .../inbox/components/InboxContextMenu.vue     | 51 +++++++++----------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
index 79a451404..90cc1ff53 100644
--- a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
+++ b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
@@ -63,11 +63,12 @@ const lastActivityAt = computed(() => {
 });
 
 const menuItems = computed(() => [
-  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
   {
     key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
+    icon: isUnread.value ? 'mail' : 'mail-unread',
     label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
   },
+  { key: 'delete', icon: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
 ]);
 
 const messageClasses = computed(() => ({
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index ce6bd8be0..6f6f6cad3 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -246,7 +246,7 @@ onMounted(() => {
           :key="notificationItem.id"
           :inbox-item="notificationItem"
           :state-inbox="stateInbox(notificationItem.primaryActor?.inboxId)"
-          class="inbox-card rounded-lg hover:rounded-lg hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+          class="inbox-card rounded-none hover:rounded-lg hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
           :class="
             currentConversationId === notificationItem.primaryActor?.id
               ? 'bg-n-alpha-1 dark:bg-n-alpha-3 rounded-lg active'
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
index 8156bebbe..4671df3bb 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue
@@ -1,32 +1,27 @@
-<script>
+<script setup>
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
-import MenuItem from './MenuItem.vue';
+import MenuItem from 'dashboard/components/widgets/conversation/contextMenu/menuItem.vue';
 
-export default {
-  components: {
-    MenuItem,
-    ContextMenu,
+defineProps({
+  contextMenuPosition: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    contextMenuPosition: {
-      type: Object,
-      default: () => ({}),
-    },
-    menuItems: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['close', 'selectAction'],
-  methods: {
-    handleClose() {
-      this.$emit('close');
-    },
-    onMenuItemClick(key) {
-      this.$emit('selectAction', key);
-      this.handleClose();
-    },
+  menuItems: {
+    type: Array,
+    default: () => [],
   },
+});
+
+const emit = defineEmits(['close', 'selectAction']);
+
+const handleClose = () => {
+  emit('close');
+};
+
+const onMenuItemClick = key => {
+  emit('selectAction', key);
+  handleClose();
 };
 </script>
 
@@ -37,12 +32,14 @@ export default {
     @close="handleClose"
   >
     <div
-      class="bg-n-alpha-3 backdrop-blur-[100px] w-40 py-2 px-2 outline outline-1 outline-n-container shadow-lg rounded-xl"
+      class="p-1 rounded-md shadow-xl bg-n-alpha-3/50 backdrop-blur-[100px] outline-1 outline outline-n-weak/50"
     >
       <MenuItem
         v-for="item in menuItems"
         :key="item.key"
-        :label="item.label"
+        :option="item"
+        variant="icon"
+        class="!w-48"
         @click.stop="onMenuItemClick(item.key)"
       />
     </div>