Feature: Notification Center View

src/app/_cache/forageStorage.ts

@@ -25,10 +25,35 @@ export async function migrateAssignees(lookupKey: string) {
 
 export async function getAssignees(lookupKey: string): Promise<IAssigneeCombined[]> {
   if (typeof window === 'undefined') return []
-  return (await localforage.getItem<IAssigneeCombined[]>(`assignees.${lookupKey}`)) ?? []
+
+  try {
+    if (!(await document.hasStorageAccess())) {
+      console.info('Browswer has no storage access')
+      await document.requestStorageAccess()
+    }
+
+    return (await localforage.getItem<IAssigneeCombined[]>(`assignees.${lookupKey}`)) ?? []
+  } catch (error: unknown) {
+    console.error(
+      "Storage access not granted. Under Chrome's Settings > Privacy and Security, make sure 'Third-party cookies' is allowed.",
+    )
+    return []
+  }
 }
 
 export async function setAssignees(lookupKey: string, value: any) {
   if (typeof window === 'undefined') return
-  return await localforage.setItem(`assignees.${lookupKey}`, value)
+
+  try {
+    if (!(await document.hasStorageAccess())) {
+      console.info('Browswer has no storage access')
+      await document.requestStorageAccess()
+    }
+
+    return await localforage.setItem(`assignees.${lookupKey}`, value)
+  } catch (error: unknown) {
+    console.error(
+      "Storage access not granted. Under Chrome's Settings > Privacy and Security, make sure 'Third-party cookies' is allowed.",
+    )
+  }
 }

src/app/api/tasks/task-notifications.service.ts

@@ -26,8 +26,10 @@ export class TaskNotificationsService extends BaseService {
       const handleNotificationRead = {
         [AssigneeType.client]: this.notificationService.markClientNotificationAsRead,
         [AssigneeType.company]: this.notificationService.markAsReadForAllRecipients,
+        [AssigneeType.internalUser]: (task: Task) =>
+          this.notificationService.deleteInternalUserNotificationsForTask(task.id),
       }
-      // @ts-expect-error This is completely safe
+
       await handleNotificationRead[task?.assigneeType]?.(task)
     }
   }

src/app/detail/[task_id]/[user_type]/page.tsx

@@ -81,7 +81,7 @@ export default async function TaskDetailPage({
   searchParams,
 }: {
   params: { task_id: string; task_name: string; user_type: UserType }
-  searchParams: { token: string; isRedirect?: string }
+  searchParams: { token: string; isRedirect?: string; fromNotificationCenter?: string }
 }) {
   const { token } = searchParams
   const { task_id, user_type } = params
@@ -103,10 +103,17 @@ export default async function TaskDetailPage({
   if (!tokenPayload) {
     throw new Error('Please provide a Valid Token')
   }
+  const fromNotificationCenter = !!searchParams.fromNotificationCenter
 
   console.info(`app/detail/${task_id}/${user_type}/page.tsx | Serving user ${token} with payload`, tokenPayload)
   if (!task) {
-    return <DeletedTaskRedirectPage userType={tokenPayload.companyId ? UserRole.Client : UserRole.IU} token={token} />
+    return (
+      <DeletedTaskRedirectPage
+        userType={tokenPayload.companyId ? UserRole.Client : UserRole.IU}
+        token={token}
+        fromNotificationCenter={fromNotificationCenter}
+      />
+    )
   }
 
   const isPreviewMode = !!getPreviewMode(tokenPayload)
@@ -130,7 +137,7 @@ export default async function TaskDetailPage({
       {token && <OneTaskDataFetcher token={token} task_id={task_id} initialTask={task} />}
       <RealTime tokenPayload={tokenPayload}>
         <EscapeHandler />
-        <ResponsiveStack>
+        <ResponsiveStack fromNotificationCenter={fromNotificationCenter}>
           <Box sx={{ width: '100%', display: 'flex', flex: 1, flexDirection: 'column', overflow: 'hidden' }}>
             {isPreviewMode ? (
               <StyledBox>
@@ -192,6 +199,7 @@ export default async function TaskDetailPage({
                       await deleteAttachment(token, id)
                     }}
                     userType={params.user_type}
+                    token={token}
                   />
                 </StyledTiptapDescriptionWrapper>
                 {subTaskStatus.canCreateSubtask && (
@@ -207,7 +215,18 @@ export default async function TaskDetailPage({
               </TaskDetailsContainer>
             </CustomScrollBar>
           </Box>
-          <Box>
+          <Box
+            {...(fromNotificationCenter
+              ? {
+                  sx: {
+                    display: 'flex',
+                    overflow: 'hidden',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  },
+                }
+              : {})}
+          >
             <AssigneeCacheGetter lookupKey={getAssigneeCacheLookupKey(user_type, tokenPayload, isPreviewMode)} />
             <AssigneeFetcher
               token={token}

src/app/detail/ui/Comments.tsx

@@ -40,6 +40,7 @@ export const Comments = ({ comment, createComment, deleteComment, task_id, stabl
         />
 
         <CommentCard
+          data-comment-card="true"
           comment={comment}
           createComment={createComment}
           deleteComment={deleteComment}

src/app/detail/ui/ResponsiveStack.tsx

@@ -1,15 +1,31 @@
 'use client'
 
-import { selectTaskDetails } from '@/redux/features/taskDetailsSlice'
+import { selectTaskDetails, setFromNotificationCenter } from '@/redux/features/taskDetailsSlice'
+import store from '@/redux/store'
 import { Stack } from '@mui/material'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
-export const ResponsiveStack = ({ children }: { children: ReactNode }) => {
+export const ResponsiveStack = ({
+  children,
+  fromNotificationCenter,
+}: {
+  children: ReactNode
+  fromNotificationCenter: boolean
+}) => {
   const { showSidebar } = useSelector(selectTaskDetails)
 
+  useEffect(() => {
+    store.dispatch(setFromNotificationCenter(fromNotificationCenter))
+  }, [fromNotificationCenter])
+
   return (
-    <Stack direction={showSidebar ? 'row' : 'column-reverse'} sx={{ height: '100vh' }}>
+    <Stack
+      direction={!showSidebar || fromNotificationCenter ? 'column-reverse' : 'row'}
+      sx={{
+        height: '100vh',
+      }}
+    >
       {children}
     </Stack>
   )

src/app/detail/ui/Sidebar.tsx

@@ -31,6 +31,7 @@ import {
 } from '@/utils/assignee'
 import { createDateFromFormattedDateString, formatDate } from '@/utils/dateHelper'
 import { NoAssignee } from '@/utils/noAssignee'
+import { Box, Skeleton, Stack, styled, SxProps, Typography } from '@mui/material'
 import {
   getSelectedUserIds,
   getSelectedViewerIds,
@@ -42,14 +43,20 @@ import {
   shouldConfirmBeforeReassignment,
   shouldConfirmViewershipBeforeReassignment,
 } from '@/utils/shouldConfirmBeforeReassign'
-import { Box, Skeleton, Stack, styled, Typography } from '@mui/material'
 import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { z } from 'zod'
 
-const StyledText = styled(Typography)(({ theme }) => ({
+type StyledTypographyProps = {
+  display?: string
+}
+
+const StyledText = styled(Typography, {
+  shouldForwardProp: (prop: string) => prop !== 'display', // don't pass to DOM
+})<StyledTypographyProps>(({ theme, display }) => ({
   color: theme.color.gray[500],
   width: '80px',
+  display,
 }))
 
 export const Sidebar = ({
@@ -74,7 +81,7 @@ export const Sidebar = ({
   portalUrl?: string
 }) => {
   const { activeTask, workflowStates, assignee, previewMode } = useSelector(selectTaskBoard)
-  const { showSidebar, showConfirmAssignModal } = useSelector(selectTaskDetails)
+  const { showSidebar, showConfirmAssignModal, fromNotificationCenter } = useSelector(selectTaskDetails)
   const { tokenPayload } = useSelector(selectAuthDetails)
 
   const [isHydrated, setIsHydrated] = useState(false)
@@ -196,7 +203,8 @@ export const Sidebar = ({
         })
     }
   }
-  if (!showSidebar) {
+
+  if (!showSidebar || fromNotificationCenter) {
     return (
       <Stack
         direction="row"
@@ -209,7 +217,7 @@ export const Sidebar = ({
           maxWidth: '654px',
           justifyContent: 'flex-start',
           alignItems: 'center',
-          width: '100%',
+          width: fromNotificationCenter ? '654px' : 'auto',
           margin: '0 auto',
           display: 'flex',
         }}
@@ -261,11 +269,11 @@ export const Sidebar = ({
           <CopilotPopSelector
             name="Set assignee"
             onChange={handleAssigneeChange}
-            disabled={disabled}
+            disabled={disabled || fromNotificationCenter}
             initialValue={assigneeValue}
             buttonContent={
               <SelectorButton
-                disabled={disabled}
+                disabled={disabled || fromNotificationCenter}
                 height={'30px'}
                 startIcon={<CopilotAvatar currentAssignee={assigneeValue} />}
                 buttonContent={
@@ -301,11 +309,11 @@ export const Sidebar = ({
               hideIusList
               name="Set client visibility"
               onChange={handleTaskViewerChange}
-              disabled={disabled && !previewMode}
+              disabled={(disabled && !previewMode) || fromNotificationCenter}
               initialValue={taskViewerValue || undefined}
               buttonContent={
                 <SelectorButton
-                  disabled={disabled && !previewMode}
+                  disabled={(disabled && !previewMode) || fromNotificationCenter}
                   height={'30px'}
                   startIcon={<CopilotAvatar currentAssignee={taskViewerValue || undefined} />}
                   buttonContent={
@@ -474,11 +482,11 @@ export const Sidebar = ({
               <CopilotPopSelector
                 name="Set assignee"
                 onChange={handleAssigneeChange}
-                disabled={disabled}
+                disabled={disabled || fromNotificationCenter}
                 initialValue={assigneeValue}
                 buttonContent={
                   <SelectorButton
-                    disabled={disabled}
+                    disabled={disabled || fromNotificationCenter}
                     padding="0px"
                     startIcon={<CopilotAvatar width="16px" height="16px" currentAssignee={assigneeValue} />}
                     outlined={true}
@@ -529,11 +537,11 @@ export const Sidebar = ({
                   hideIusList
                   name="Set client visibility"
                   onChange={handleTaskViewerChange}
-                  disabled={disabled && !previewMode} // allow visibility change in preview mode
+                  disabled={(disabled && !previewMode) || fromNotificationCenter} // allow visibility change in preview mode
                   initialValue={taskViewerValue || undefined}
                   buttonContent={
                     <SelectorButton
-                      disabled={disabled && !previewMode}
+                      disabled={(disabled && !previewMode) || fromNotificationCenter}
                       padding="0px"
                       startIcon={<CopilotAvatar width="16px" height="16px" currentAssignee={taskViewerValue || undefined} />}
                       outlined={true}

src/app/detail/ui/Subtasks.tsx

@@ -10,6 +10,7 @@
 import { GrayAddMediumIcon } from '@/icons'
 import { selectAuthDetails } from '@/redux/features/authDetailsSlice'
 import { selectTaskBoard } from '@/redux/features/taskBoardSlice'
+import { selectTaskDetails } from '@/redux/features/taskDetailsSlice'
 import { CreateTaskRequest, TaskResponse } from '@/types/dto/tasks.dto'
 import { fetcher } from '@/utils/fetcher'
 import { generateRandomString } from '@/utils/generateRandomString'
@@ -40,6 +41,7 @@
   const [openTaskForm, setOpenTaskForm] = useState(false)
   const { workflowStates, assignee, activeTask } = useSelector(selectTaskBoard)
   const { tokenPayload } = useSelector(selectAuthDetails)
+  const { fromNotificationCenter } = useSelector(selectTaskDetails)
   const [optimisticUpdates, setOptimisticUpdates] = useState<OptimisticUpdate[]>([]) //might need this server-temp id maps in the future.
   const [lastUpdated, setLastUpdated] = useState<string | null>()
   const handleFormCancel = () => setOpenTaskForm(false)
@@ -73,7 +75,7 @@
       debounceMutate(cacheKey)
     }
     setLastUpdated(activeTask?.lastSubtaskUpdated)
   }, [activeTask?.lastSubtaskUpdated])
 
   const handleSubTaskCreation = (payload: CreateTaskRequest) => {
     const tempId = generateRandomString('temp-task')
@@ -200,6 +202,7 @@
               variant="subtask"
               mode={mode}
               handleUpdate={handleSubTaskUpdate}
+              disableNavigation={fromNotificationCenter}
             />
           )
         })}

src/app/detail/ui/TaskCardList.tsx

@@ -66,9 +66,19 @@ interface TaskCardListProps {
   handleUpdate?: (taskId: string, changes: Partial<TaskResponse>, updater: () => Promise<void>) => Promise<void>
   isTemp?: boolean
   sx?: SxProps<Theme> | undefined
+  disableNavigation?: boolean
 }
 
-export const TaskCardList = ({ task, variant, workflowState, mode, handleUpdate, isTemp, sx }: TaskCardListProps) => {
+export const TaskCardList = ({
+  task,
+  variant,
+  workflowState,
+  mode,
+  handleUpdate,
+  isTemp,
+  sx,
+  disableNavigation = false,
+}: TaskCardListProps) => {
   const { assignee, workflowStates, previewMode, token, confirmAssignModalId, assigneeCache, confirmViewershipModalId } =
     useSelector(selectTaskBoard)
   const { tokenPayload } = useSelector(selectAuthDetails)
@@ -173,8 +183,13 @@ export const TaskCardList = ({ task, variant, workflowState, mode, handleUpdate,
         justifyContent: 'flex-end',
         minWidth: 0,
         ':hover': {
-          cursor: 'pointer',
-          background: (theme) => (variant == 'subtask-board' ? theme.color.gray[150] : theme.color.gray[100]),
+          cursor: disableNavigation ? 'auto' : 'pointer',
+          background: (theme) =>
+            disableNavigation
+              ? theme.color.base.white
+              : variant == 'subtask-board'
+                ? theme.color.gray[150]
+                : theme.color.gray[100],
         },
         ':focus-visible': {
           outline: (theme) => `1px solid ${theme.color.borders.focusBorder2}`,
@@ -220,7 +235,7 @@ export const TaskCardList = ({ task, variant, workflowState, mode, handleUpdate,
           disabled={checkIfTaskViewer(task.viewers, tokenPayload)}
         />
 
-        {isTemp || variant === 'subtask-board' ? (
+        {isTemp || variant === 'subtask-board' || disableNavigation ? (
           <div
             key={task.id}
             style={{
@@ -279,7 +294,7 @@ export const TaskCardList = ({ task, variant, workflowState, mode, handleUpdate,
                 flexShrink: 1,
               }}
             >
-              <TaskTitle variant="list" title={task.title} />
+              <TaskTitle variant={variant == 'task' ? 'list' : 'subtasks'} title={task.title} />
               {(task.subtaskCount > 0 || task.isArchived) && (
                 <Stack direction="row" sx={{ display: 'flex', gap: '12px', flexShrink: 0, alignItems: 'center' }}>
                   <TaskMetaItems task={task} lineHeight="21px" />

src/app/detail/ui/TaskEditor.tsx

@@ -31,6 +31,7 @@
   postAttachment: (postAttachmentPayload: CreateAttachmentRequest) => void
   deleteAttachment: (id: string) => void
   userType: UserType
+  token: string
 }
 
 export const TaskEditor = ({
@@ -44,11 +45,12 @@
   postAttachment,
   deleteAttachment,
   userType,
+  token,
 }: Prop) => {
   const [updateTitle, setUpdateTitle] = useState('')
   const [updateDetail, setUpdateDetail] = useState('')
   const { showConfirmDeleteModal, openImage } = useSelector(selectTaskDetails)
-  const { token, activeTask } = useSelector(selectTaskBoard)
+  const { activeTask } = useSelector(selectTaskBoard)
   const [isUserTyping, setIsUserTyping] = useState(false)
   const [activeUploads, setActiveUploads] = useState(0)
 
@@ -80,7 +82,7 @@
         setUpdateDetail(currentTask.body ?? '')
       }
     }
   }, [activeTask?.title, activeTask?.body, task_id, activeUploads, task])
 
   const _titleUpdateDebounced = async (title: string) => updateTaskTitle(title)
 

src/app/detail/ui/ToggleController.tsx

@@ -7,7 +7,7 @@ import { ReactNode, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
 export const ToggleController = ({ children }: { children: ReactNode }) => {
-  const { showSidebar } = useSelector(selectTaskDetails)
+  const { showSidebar, fromNotificationCenter } = useSelector(selectTaskDetails)
   const matches = useMediaQuery('(max-width:800px)')
 
   const nonMobile = useMediaQuery('(min-width:800px)')
@@ -21,7 +21,7 @@ export const ToggleController = ({ children }: { children: ReactNode }) => {
   return (
     <Box
       sx={{
-        width: showSidebar ? 'calc(100% - 339px)' : '100%',
+        width: showSidebar && !fromNotificationCenter ? 'calc(100% - 339px)' : '100%',
         display: matches && showSidebar ? 'none' : 'flex',
         flex: 1,
         flexDirection: 'column',