chore: Add snooze

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

@@ -4,7 +4,7 @@
     :class="isOnExpandedLayout ? '' : 'min-w-[360px] max-w-[360px]'"
   >
     <inbox-list-header
-      :is-context-menu-open="isContextMenuOpen"
+      :is-context-menu-open="isInboxContextMenuOpen"
       @filter="onFilterChange"
       @redirect="redirectToInbox"
     />
@@ -19,8 +19,9 @@
         @mark-notification-as-read="markNotificationAsRead"
         @mark-notification-as-unread="markNotificationAsUnRead"
         @delete-notification="deleteNotification"
-        @context-menu-open="isContextMenuOpen = true"
-        @context-menu-close="isContextMenuOpen = false"
+        @snooze-notification="openSnoozeNotificationModal"
+        @context-menu-open="isInboxContextMenuOpen = true"
+        @context-menu-close="isInboxContextMenuOpen = false"
       />
       <div v-if="uiFlags.isFetching" class="text-center">
         <span class="spinner mt-4 mb-4" />
@@ -76,7 +77,7 @@ export default {
       status: '',
       type: '',
       sortOrder: wootConstants.INBOX_SORT_BY.NEWEST,
-      isContextMenuOpen: false,
+      isInboxContextMenuOpen: false,
     };
   },
   computed: {
@@ -191,6 +192,10 @@ export default {
       this.type = type;
       this.sortOrder = sortBy || wootConstants.INBOX_SORT_BY.NEWEST;
     },
+    openSnoozeNotificationModal() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'snooze_notification' });
+    },
   },
 };
 </script>

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

@@ -17,7 +17,11 @@
         @next="onClickNext"
         @prev="onClickPrev"
       />
+      <div v-if="isLoadingConversation" class="h-[calc(100%-56px)] w-full">
+        <span class="spinner mt-4 mb-4 h-full w-full" />
+      </div>
       <conversation-box
+        v-else
         class="h-[calc(100%-56px)]"
         is-inbox-view
         :inbox-id="inboxId"
@@ -77,6 +81,7 @@ export default {
   data() {
     return {
       isOnExpandedLayout: false,
+      isLoadingConversation: false,
     };
   },
   computed: {
@@ -106,11 +111,7 @@ export default {
       return this.uiFlags.isFetching && !this.notifications.length;
     },
     showInboxMessageView() {
-      return (
-        Boolean(this.notificationId) &&
-        Boolean(this.currentChat.id) &&
-        !this.isFetchingInitialData
-      );
+      return Boolean(this.notificationId) && !this.isFetchingInitialData;
     },
     totalNotifications() {
       return this.notifications?.length ?? 0;
@@ -133,8 +134,10 @@ export default {
   watch: {
     conversationId: {
       immediate: true,
-      handler() {
-        this.fetchConversationById();
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.fetchConversationById();
+        }
       },
     },
   },
@@ -160,15 +163,23 @@ export default {
     },
     async fetchConversationById() {
       if (!this.notificationId || !this.conversationId) return;
-      const chat = this.findConversation();
-      if (!chat) {
-        await this.$store.dispatch('getConversation', this.conversationId);
+      this.isLoadingConversation = true;
+      this.$store.dispatch('clearSelectedState');
+      const existingChat = this.findConversation();
+      if (existingChat) {
+        this.setActiveChat(existingChat);
+        this.isLoadingConversation = false;
+        return;
       }
+      await this.$store.dispatch('getConversation', this.conversationId);
       this.setActiveChat();
+      this.isLoadingConversation = false;
     },
-    setActiveChat() {
-      const selectedConversation = this.findConversation();
+
+    setActiveChat(conversation = null) {
+      const selectedConversation = conversation || this.findConversation();
       if (!selectedConversation) return;
+
       this.$store
         .dispatch('setActiveChat', { data: selectedConversation })
         .then(() => {

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

@@ -89,6 +89,7 @@ export default {
     return {
       isContextMenuOpen: false,
       contextMenuPosition: { x: null, y: null },
+      activeNotificationId: null,
     };
   },
   computed: {
@@ -96,7 +97,9 @@ export default {
       return this.notificationItem?.primary_actor;
     },
     isInboxCardActive() {
-      return this.$route.params.conversation_id === this.primaryActor?.id;
+      return (
+        Number(this.activeNotificationId) === Number(this.notificationItem?.id)
+      );
     },
     inbox() {
       return this.$store.getters['inboxes/getInbox'](
@@ -109,6 +112,12 @@ export default {
     meta() {
       return this.primaryActor?.meta;
     },
+    isNotSnoozed() {
+      return (
+        !this.notificationItem?.snoozed_until &&
+        this.$route.params.notification_id
+      );
+    },
     assigneeMeta() {
       return this.meta?.assignee;
     },
@@ -131,6 +140,12 @@ export default {
         },
       ];
 
+      if (this.isNotSnoozed) {
+        items.push({
+          key: 'snooze',
+          label: this.$t('INBOX.MENU_ITEM.SNOOZE'),
+        });
+      }
       if (!this.isUnread) {
         items.push({
           key: 'mark_as_unread',
@@ -157,6 +172,14 @@ export default {
       return '';
     },
   },
+  watch: {
+    '$route.params.notification_id': {
+      immediate: true,
+      handler(newVal) {
+        this.activeNotificationId = newVal;
+      },
+    },
+  },
   unmounted() {
     this.closeContextMenu();
   },
@@ -214,6 +237,9 @@ export default {
         case 'delete':
           this.$emit('delete-notification', this.notificationItem);
           break;
+        case 'snooze':
+          this.$emit('snooze-notification', this.notificationItem);
+          break;
         default:
       }
     },