feat(notifications): discussion, space and away notifications with email delivery

frontend/cypress/e2e/notifications/notification-filters.cy.ts

@@ -0,0 +1,96 @@
+import { resetData } from '../../support/seed'
+
+describe('Notification filters', () => {
+  let alpha: string
+  let beta: string
+  let alphaSpace: string
+  let betaSpace: string
+
+  const mentionHtml =
+    '<p>Ping <span data-type="mention" data-id="member@example.com" data-label="Member">@Member</span></p>'
+
+  beforeEach(() => {
+    resetData('two_communities').then((ids) => {
+      ;[alpha, beta] = (ids.communities as string[]).map(String)
+      ;[alphaSpace, betaSpace] = (ids.spaces as string[]).map(String)
+    })
+    cy.then(() => {
+      for (const [space, title] of [
+        [alphaSpace, 'Alpha thread'],
+        [betaSpace, 'Beta thread'],
+        [alphaSpace, 'Padding one'],
+        [alphaSpace, 'Padding two'],
+        [alphaSpace, 'Padding three'],
+      ]) {
+        cy.task('requestAsUser', {
+          user: 'member2@example.com',
+          method: 'POST',
+          path: '/api/v2/document/GP Discussion',
+          body: { title, project: space, content: mentionHtml },
+        })
+      }
+    })
+    cy.loginAs('member')
+    cy.intercept('GET', '**/api/v2/document/GP%20Notification*').as('notificationList')
+    cy.visit('/g/notifications')
+    cy.wait('@notificationList')
+  })
+
+  it('lists both mentions under a day label', () => {
+    cy.contains('[data-slot="list-group-header"]', 'Today').should('be.visible')
+    cy.contains('Alpha thread').should('be.visible')
+    cy.contains('Beta thread').should('be.visible')
+  })
+
+  it('narrows to the picked community', () => {
+    cy.button('All communities').click()
+    cy.contains('[role="option"]', 'Alpha').click()
+    cy.get('body').type('{esc}')
+    cy.wait('@notificationList')
+
+    cy.contains('Alpha thread').should('be.visible')
+    cy.contains('Beta thread').should('not.exist')
+    cy.button('Alpha').should('be.visible').click()
+    cy.contains('[role="option"]', 'Beta').click()
+    cy.get('body').type('{esc}')
+    cy.button('2 communities').should('be.visible')
+
+    cy.button('Clear').click()
+    cy.wait('@notificationList')
+    cy.contains('Beta thread').should('be.visible')
+  })
+
+  it('narrows to the picked space', () => {
+    cy.button('All spaces').click()
+    cy.contains('[role="option"]', 'Beta Space').click()
+    cy.get('body').type('{esc}')
+    cy.wait('@notificationList')
+
+    cy.contains('Beta thread').should('be.visible')
+    cy.contains('Alpha thread').should('not.exist')
+  })
+
+  it('keeps today’s rows under the Today filter and shows the day on an empty day', () => {
+    cy.button('All dates').click()
+    cy.button('Today').click()
+    cy.wait('@notificationList')
+    cy.button('Today').should('be.visible')
+    cy.contains('Alpha thread').should('be.visible')
+    cy.contains('Beta thread').should('be.visible')
+
+    cy.window().then((win) => {
+      win.localStorage.setItem(
+        'gameplan:notificationFilters',
+        JSON.stringify({
+          communities: [],
+          spaces: [],
+          date: { kind: 'range', from: '2020-01-01', to: '2020-01-01' },
+        }),
+      )
+    })
+    cy.reload()
+    cy.wait('@notificationList')
+    cy.contains('1 January 2020').should('be.visible')
+    cy.contains('Nothing here').should('be.visible')
+  })
+})

frontend/src/components/DiscussionNotificationBell.vue

@@ -0,0 +1,35 @@
+<template>
+  <Dropdown
+    :options="options"
+    align="end"
+    :button="{
+      icon: discussionStateIcon[state],
+      variant: 'ghost',
+      label: `Notifications: ${state}`,
+      tooltip: `Notifications: ${state}`,
+      loading,
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Dropdown } from 'frappe-ui'
+import {
+  discussionNotificationOptions,
+  discussionStateIcon,
+  type DiscussionNotificationChoice,
+  type DiscussionNotificationState,
+} from '@/data/notificationPreferences'
+
+const props = defineProps<{
+  state: DiscussionNotificationState
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{ (e: 'select', choice: DiscussionNotificationChoice): void }>()
+
+const options = computed(() =>
+  discussionNotificationOptions(props.state, (choice) => emit('select', choice)),
+)
+</script>

frontend/src/components/DiscussionView.vue

@@ -4,6 +4,24 @@
       <template #prefix>
         <PageHeaderBackButton :to="backRoute" />
       </template>
+      <template #suffix>
+        <template v-if="showHeaderActions">
+          <DiscussionNotificationBell
+            :state="discussion.doc!.notification_state!"
+            :loading="discussion.setNotificationState.loading"
+            @select="setNotificationState"
+          />
+          <Dropdown
+            align="end"
+            :button="{
+              icon: 'lucide-more-horizontal',
+              variant: 'ghost',
+              label: 'Discussion Options',
+            }"
+            :options="headerActions"
+          />
+        </template>
+      </template>
     </PageHeaderMobile>
     <PageHeader class="hidden sm:flex">
       <SpaceBreadcrumbs
@@ -14,6 +32,22 @@
       <span class="hidden text-lg-medium text-ink-gray-8 print:inline">
         {{ [communityTitle, space?.title].filter(Boolean).join(' / ') }}
       </span>
+      <div v-if="showHeaderActions" class="flex items-center gap-2 print:hidden">
+        <DiscussionNotificationBell
+          :state="discussion.doc!.notification_state!"
+          :loading="discussion.setNotificationState.loading"
+          @select="setNotificationState"
+        />
+        <Dropdown
+          align="end"
+          :button="{
+            icon: 'lucide-more-horizontal',
+            variant: 'ghost',
+            label: 'Discussion Options',
+          }"
+          :options="headerActions"
+        />
+      </div>
     </PageHeader>
     <div class="discussion-container">
       <div v-if="discussion.loading">
@@ -65,6 +99,7 @@
             padding puts its contents back where they were.
           -->
           <div
+            ref="postActionsRow"
             class="flex items-center bg-surface-base pb-2 pt-2"
             :class="
               editingPost
@@ -98,6 +133,12 @@
               </Tooltip>
             </div>
             <div class="ml-auto flex space-x-2 print:hidden">
+              <DiscussionNotificationBell
+                v-if="!readOnlyMode && discussion.doc.notification_state"
+                :state="discussion.doc.notification_state"
+                :loading="discussion.setNotificationState.loading"
+                @select="setNotificationState"
+              />
               <Dropdown
                 v-if="!readOnlyMode"
                 class="ml-auto"
@@ -351,9 +392,10 @@ import {
   Switch,
   dialog,
 } from 'frappe-ui'
-import { until, useEventListener } from '@vueuse/core'
+import { until, useEventListener, useIntersectionObserver } from '@vueuse/core'
 import type { Editor } from '@tiptap/vue-3'
 import Reactions from './Reactions.vue'
+import DiscussionNotificationBell from './DiscussionNotificationBell.vue'
 import UserAvatarWithHover from './UserAvatarWithHover.vue'
 import CommentsArea from '@/components/CommentsArea.vue'
 import DiscussionViewEditor from './editor/DiscussionViewEditor.vue'
@@ -367,6 +409,7 @@ import { getSpace, useSpace } from '@/data/spaces'
 import { useCommunity } from '@/data/communities'
 import { useGroupedSpaceOptions } from '@/data/groupedSpaces'
 import { useDiscussion } from '@/data/discussions'
+import type { DiscussionNotificationChoice } from '@/data/notificationPreferences'
 import { useDraftSync } from '@/data/useDraftSync'
 import { tags } from '@/data/tags'
 import { shellScrollContainer, useShellScrolled } from 'frappe-ui'
@@ -849,6 +892,20 @@ const canMoveOrPinDiscussion = computed(() =>
   canMoveOrPinContent(discussion.doc, space.value, useSessionUser()),
 )
 
+const postActionsRow = useTemplateRef<HTMLElement>('postActionsRow')
+const postActionsVisible = ref(true)
+useIntersectionObserver(postActionsRow, ([entry]) => {
+  postActionsVisible.value = entry?.isIntersecting ?? true
+})
+const showHeaderActions = computed(
+  () =>
+    !postActionsVisible.value && !props.readOnlyMode && Boolean(discussion.doc?.notification_state),
+)
+const HEADER_MENU_EXCLUDES = new Set(['Edit', 'Revisions'])
+const headerActions = computed(() =>
+  actions.value.filter((action) => !HEADER_MENU_EXCLUDES.has(action.label)),
+)
+
 const actions = computed(() => [
   {
     label: 'Edit',
@@ -977,6 +1034,15 @@ const actions = computed(() => [
   },
 ])
 
+async function setNotificationState(choice: DiscussionNotificationChoice) {
+  await discussion.setNotificationState.submit({ state: choice })
+  const result = discussion.setNotificationState.data
+  if (discussion.doc && result) {
+    discussion.doc.notification_state = result.notification_state
+    discussion.doc.notification_state_is_explicit = result.notification_state_is_explicit
+  }
+}
+
 useCommandPaletteCommands(
   computed(() => {
     if (props.readOnlyMode || !discussion.doc) return []

frontend/src/components/NotificationFilterTrigger.vue

@@ -0,0 +1,22 @@
+<template>
+  <Button :variant="active ? 'subtle' : 'outline'" :label="label" :icon-left="icon">
+    <template #suffix>
+      <span
+        class="lucide-chevron-down size-4 transition-transform"
+        :class="{ 'rotate-180': open }"
+        aria-hidden="true"
+      />
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { Button } from 'frappe-ui'
+
+defineProps<{
+  label: string
+  open?: boolean
+  active?: boolean
+  icon?: string
+}>()
+</script>