feat: Inbox options dropdown menu (#8836)

app/javascript/dashboard/i18n/locale/en/inbox.json

@@ -2,6 +2,7 @@
   "INBOX": {
     "LIST": {
       "TITLE": "Inbox",
+      "DISPLAY_DROPDOWN": "Display",
       "LOADING": "Fetching notifications",
       "EOF": "All notifications loaded 🎉",
       "404": "There are no active notifications in this group."
@@ -17,7 +18,10 @@
       "MARK_AS_READ": "Mark as read",
       "MARK_AS_UNREAD": "Mark as unread",
       "SNOOZE": "Snooze",
-      "DELETE": "Delete"
+      "DELETE": "Delete",
+      "MARK_ALL_READ": "Mark all as read",
+      "DELETE_ALL": "Delete all",
+      "DELETE_ALL_READ": "Delete all read"
     }
   }
 }

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -1,11 +1,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import InboxCard from './components/InboxCard.vue';
+import InboxListHeader from './components/InboxListHeader.vue';
 import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 export default {
   components: {
     InboxCard,
+    InboxListHeader,
     IntersectionObserver,
   },
   data() {
@@ -70,11 +72,7 @@ export default {
   <div
     class="flex flex-col min-w-[360px] w-full max-w-[360px] h-full ltr:border-r border-slate-50 dark:border-slate-800/50"
   >
-    <div
+    <inbox-list-header />
-      class="flex text-xl w-full pl-5 pr-3 py-2 h-14 items-center font-medium text-slate-900 dark:text-slate-25 border-b border-slate-50 dark:border-slate-800/50"
-    >
-      {{ $t('INBOX.LIST.TITLE') }}
-    </div>
     <div
       ref="notificationList"
       class="flex flex-col w-full h-full overflow-x-hidden overflow-y-auto"

app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue

@@ -4,7 +4,7 @@
   >
     <div class="flex items-center gap-1.5">
       <h1 class="font-medium text-slate-900 dark:text-slate-25 text-xl">
-        Inbox
+        {{ $t('INBOX.LIST.TITLE') }}
       </h1>
       <div
         role="button"
@@ -14,7 +14,7 @@
         <span
           class="text-slate-600 relative -top-px dark:text-slate-200 text-xs text-center font-medium"
         >
-          Display
+          {{ $t('INBOX.LIST.DISPLAY_DROPDOWN') }}
         </span>
         <fluent-icon
           icon="chevron-down"
@@ -23,14 +23,14 @@
         />
       </div>
     </div>
-    <div class="flex gap-1 items-center">
+    <div class="flex relative gap-1 items-center">
-      <woot-button
+      <!-- <woot-button
         variant="clear"
         size="small"
         color-scheme="secondary"
         icon="filter"
         @click="openInboxFilter"
-      />
+      /> -->
       <woot-button
         variant="clear"
         size="small"
@@ -38,21 +38,34 @@
         icon="mail-inbox"
         @click="openInboxOptionsMenu"
       />
+      <inbox-option-menu
+        v-if="showInboxOptionMenu"
+        v-on-clickaway="openInboxOptionsMenu"
+        class="absolute top-9"
+      />
     </div>
   </div>
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
+import InboxOptionMenu from './InboxOptionMenu.vue';
 export default {
+  components: {
+    InboxOptionMenu,
+  },
+  mixins: [clickaway],
+  data() {
+    return {
+      showInboxOptionMenu: false,
+    };
+  },
   methods: {
     openInboxDisplayMenu() {
       this.$emit('open-display-menu');
     },
-    openInboxFilter() {
-      this.$emit('open-filter');
-    },
     openInboxOptionsMenu() {
-      this.$emit('open-options-menu');
+      this.showInboxOptionMenu = !this.showInboxOptionMenu;
     },
   },
 };

app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-500 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
+  >
+    <div class="flex flex-col">
+      <menu-item
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onMenuItemClick(item.key)"
+      />
+    </div>
+    <div class="flex flex-col">
+      <menu-item
+        v-for="item in commonMenuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onMenuItemClick(item.key)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuItem from './MenuItem.vue';
+export default {
+  components: {
+    MenuItem,
+  },
+  data() {
+    return {
+      menuItems: [
+        {
+          key: 'mark_as_read',
+          label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
+        },
+        {
+          key: 'mark_as_unread',
+          label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
+        },
+        {
+          key: 'snooze',
+          label: this.$t('INBOX.MENU_ITEM.SNOOZE'),
+        },
+        {
+          key: 'delete',
+          label: this.$t('INBOX.MENU_ITEM.DELETE'),
+        },
+      ],
+      commonMenuItems: [
+        {
+          key: 'mark_all_read',
+          label: this.$t('INBOX.MENU_ITEM.MARK_ALL_READ'),
+        },
+        {
+          key: 'delete_all',
+          label: this.$t('INBOX.MENU_ITEM.DELETE_ALL'),
+        },
+        {
+          key: 'delete_all_read',
+          label: this.$t('INBOX.MENU_ITEM.DELETE_ALL_READ'),
+        },
+      ],
+    };
+  },
+  methods: {
+    onMenuItemClick(key) {
+      this.$emit('option-click', key);
+    },
+  },
+};
+</script>