feat: Notifications, visual fixes

backend/data/src/main/kotlin/io/tolgee/constants/NotificationType.kt

@@ -3,6 +3,7 @@ package io.tolgee.constants
 enum class NotificationType {
   TASK_ASSIGNED,
   TASK_COMPLETED,
+  TASK_CLOSED,
   MFA_ENABLED,
   MFA_DISABLED,
   PASSWORD_CHANGED,

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/TaskService.kt

@@ -558,12 +558,18 @@ class TaskService(
   }
 
   private fun createNotificationIfApplicable(task: Task) {
-    if (task.state != TaskState.DONE) return
+    val notificationType =
+      when (task.state) {
+        TaskState.DONE -> NotificationType.TASK_COMPLETED
+        TaskState.CLOSED -> NotificationType.TASK_CLOSED
+        else -> return
+      }
+
     val author = task.author ?: return
 
     notificationService.save(
       Notification().apply {
-        type = NotificationType.TASK_COMPLETED
+        type = notificationType
         user = author
         project = task.project
         originatingUser = authenticationFacade.authenticatedUserEntity

webapp/src/component/layout/Notifications/NotificationItem.tsx

@@ -4,6 +4,7 @@ import {
   ListItemButton,
   ListItemButtonProps,
   styled,
+  Typography,
 } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { components } from 'tg.service/apiSchema.generated';
@@ -15,7 +16,7 @@ import { AvatarImg } from 'tg.component/common/avatar/AvatarImg';
 const StyledItem = styled(ListItemButton)`
   display: grid;
   column-gap: 10px;
-  grid-template-columns: 30px 1fr 120px;
+  grid-template-columns: 32px 1fr 120px;
   grid-template-rows: 1fr;
   grid-template-areas:
     'notification-avatar notification-detail notification-time'
@@ -25,16 +26,24 @@ const StyledItem = styled(ListItemButton)`
 
 const StyledDetail = styled(Box)`
   grid-area: notification-detail;
+  font-size: 14px;
+
+  b {
+    font-weight: 500;
+  }
 `;
 
 const StyledAvatar = styled(Box)`
   grid-area: notification-avatar;
 `;
 
 const StyledTime = styled(Box)`
-  font-size: 13px;
   grid-area: notification-time;
   text-align: right;
+`;
+
+const StyledRightDetailText = styled(Typography)`
+  font-size: 12px;
   color: ${({ theme }) => theme.palette.text.secondary};
 `;
 
@@ -44,14 +53,12 @@ const StyledProject = styled(StyledTime)`
 
 export type NotificationItemProps = {
   notification: components['schemas']['NotificationModel'];
-  isLast: boolean;
   destinationUrl?: string;
 } & ListItemButtonProps;
 
 export const NotificationItem: React.FC<NotificationItemProps> = ({
   notification,
   key,
-  isLast,
   destinationUrl,
   children,
 }) => {
@@ -62,7 +69,6 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
   return (
     <StyledItem
       key={key}
-      divider={!isLast}
       //@ts-ignore
       component={Link}
       to={destinationUrl}
@@ -77,20 +83,28 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
               type: 'USER',
               id: originatingUser.id || 0,
             }}
-            size={30}
+            size={32}
           />
         )}
       </StyledAvatar>
       <StyledDetail>{children}</StyledDetail>
       {createdAt && (
         <StyledTime>
-          {formatDistanceToNowStrict(new Date(createdAt), {
-            addSuffix: true,
-            locale: locales[language].dateFnsLocale,
-          })}
+          <StyledRightDetailText variant="body2">
+            {formatDistanceToNowStrict(new Date(createdAt), {
+              addSuffix: true,
+              locale: locales[language].dateFnsLocale,
+            })}
+          </StyledRightDetailText>
         </StyledTime>
       )}
-      {project && <StyledProject>{project.name}</StyledProject>}
+      {project && (
+        <StyledProject>
+          <StyledRightDetailText variant="body2">
+            {project.name}
+          </StyledRightDetailText>
+        </StyledProject>
+      )}
     </StyledItem>
   );
 };

webapp/src/component/layout/Notifications/NotificationTypeMap.tsx

@@ -1,5 +1,6 @@
 import { TaskAssignedItem } from 'tg.component/layout/Notifications/TaskAssignedItem';
 import { TaskCompletedItem } from 'tg.component/layout/Notifications/TaskCompletedItem';
+import { TaskClosedItem } from 'tg.component/layout/Notifications/TaskClosedItem';
 import { MfaEnabledItem } from 'tg.component/layout/Notifications/MfaEnabledItem';
 import { MfaDisabledItem } from 'tg.component/layout/Notifications/MfaDisabledItem';
 import { PasswordChangedItem } from 'tg.component/layout/Notifications/PasswordChangedItem';
@@ -15,6 +16,7 @@ type NotificationsComponentMap = Record<
 export const notificationComponents: NotificationsComponentMap = {
   TASK_ASSIGNED: TaskAssignedItem,
   TASK_COMPLETED: TaskCompletedItem,
+  TASK_CLOSED: TaskClosedItem,
   MFA_ENABLED: MfaEnabledItem,
   MFA_DISABLED: MfaDisabledItem,
   PASSWORD_CHANGED: PasswordChangedItem,

webapp/src/component/layout/Notifications/NotificationsPopup.tsx

@@ -1,5 +1,5 @@
 import { default as React, useEffect } from 'react';
-import { List, ListItem, styled } from '@mui/material';
+import { List, ListItem, styled, Typography } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import {
   useApiInfiniteQuery,
@@ -14,6 +14,7 @@ import { notificationComponents } from 'tg.component/layout/Notifications/Notifi
 import { NotificationsChanged } from 'tg.websocket-client/WebsocketClient';
 import { components } from 'tg.service/apiSchema.generated';
 import { InfiniteData } from 'react-query';
+import { useWindowSize } from 'usehooks-ts';
 
 type PagedModelNotificationModel =
   components['schemas']['PagedModelNotificationModel'];
@@ -26,8 +27,8 @@ const StyledMenu = styled(Menu)`
   }
 `;
 
-const StyledListItemHeader = styled(ListItem)`
-  font-weight: bold;
+const StyledHeader = styled(Typography)`
+  font-size: 16px;
 `;
 
 function getNotifications(
@@ -111,6 +112,8 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
     }
   }, [user, client]);
 
+  const windowSize = useWindowSize();
+  const maxHeight = Math.min(500, windowSize.height - 100);
   const notifications = getNotifications(notificationsLoadable.data);
 
   return (
@@ -130,7 +133,7 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
       slotProps={{
         paper: {
           style: {
-            maxHeight: 500,
+            maxHeight: maxHeight,
             minWidth: 400,
           },
           onScroll: (event) => {
@@ -148,17 +151,15 @@ export const NotificationsPopup: React.FC<NotificationsPopupProps> = ({
       }}
     >
       <List id="notifications-list" data-cy="notifications-list">
-        <StyledListItemHeader divider>
-          <T keyName="notifications-header" />
-        </StyledListItemHeader>
+        <ListItem>
+          <StyledHeader variant="h6">
+            <T keyName="notifications-header" />
+          </StyledHeader>
+        </ListItem>
         {notifications?.map((notification, i) => {
           const Component = notificationComponents[notification.type]!;
           return (
-            <Component
-              notification={notification}
-              key={notification.id}
-              isLast={i === notifications.length - 1}
-            />
+            <Component notification={notification} key={notification.id} />
           );
         })}
         {notifications?.length === 0 && (

webapp/src/component/layout/Notifications/TaskAssignedItem.tsx

@@ -1,52 +1,19 @@
 import { default as React, FunctionComponent } from 'react';
-import { Box, styled } from '@mui/material';
 import { T } from '@tolgee/react';
 import {
-  NotificationItem,
-  NotificationItemProps,
-} from 'tg.component/layout/Notifications/NotificationItem';
-import { getTaskUrl } from 'tg.constants/links';
+  TaskItem,
+  TaskItemProps,
+} from 'tg.component/layout/Notifications/TaskItem';
 
-const StyledLinkedDetailItem = styled(Box)`
-  margin-right: 10px;
-  display: inline;
-`;
-
-const StyledLinkedDetailNumber = styled(StyledLinkedDetailItem)`
-  color: ${({ theme }) => theme.palette.text.secondary};
-`;
-
-type TaskAssignedItemProps = NotificationItemProps;
+type TaskAssignedItemProps = TaskItemProps;
 
 export const TaskAssignedItem: FunctionComponent<TaskAssignedItemProps> = ({
   notification,
   ...props
 }) => {
-  const destinationUrl = getTaskUrl(
-    notification.project!.id,
-    notification.linkedTask!.number
-  );
   return (
-    <NotificationItem
-      notification={notification}
-      destinationUrl={destinationUrl}
-      {...props}
-    >
-      <Box>
-        <b>{notification.originatingUser?.name}</b>&nbsp;
-        <T keyName="notifications-task-assigned" />
-      </Box>
-      <Box>
-        <StyledLinkedDetailItem>
-          {notification.linkedTask?.language.flagEmoji}
-        </StyledLinkedDetailItem>
-        <StyledLinkedDetailItem>
-          {notification.linkedTask?.name}
-        </StyledLinkedDetailItem>
-        <StyledLinkedDetailNumber>
-          #{notification.linkedTask?.number}
-        </StyledLinkedDetailNumber>
-      </Box>
-    </NotificationItem>
+    <TaskItem notification={notification} {...props}>
+      <T keyName="notifications-task-assigned" />
+    </TaskItem>
   );
 };

webapp/src/component/layout/Notifications/TaskClosedItem.tsx

@@ -0,0 +1,19 @@
+import { default as React, FunctionComponent } from 'react';
+import { T } from '@tolgee/react';
+import {
+  TaskItem,
+  TaskItemProps,
+} from 'tg.component/layout/Notifications/TaskItem';
+
+type TaskClosedItemProps = TaskItemProps;
+
+export const TaskClosedItem: FunctionComponent<TaskClosedItemProps> = ({
+  notification,
+  ...props
+}) => {
+  return (
+    <TaskItem notification={notification} {...props}>
+      <T keyName="notifications-task-closed" />
+    </TaskItem>
+  );
+};

webapp/src/component/layout/Notifications/TaskCompletedItem.tsx

@@ -1,52 +1,19 @@
 import { default as React, FunctionComponent } from 'react';
-import { Box, styled } from '@mui/material';
 import { T } from '@tolgee/react';
 import {
-  NotificationItem,
-  NotificationItemProps,
-} from 'tg.component/layout/Notifications/NotificationItem';
-import { getTaskUrl } from 'tg.constants/links';
+  TaskItem,
+  TaskItemProps,
+} from 'tg.component/layout/Notifications/TaskItem';
 
-const StyledLinkedDetailItem = styled(Box)`
-  margin-right: 10px;
-  display: inline;
-`;
-
-const StyledLinkedDetailNumber = styled(StyledLinkedDetailItem)`
-  color: ${({ theme }) => theme.palette.text.secondary};
-`;
-
-type TaskCompletedItemProps = NotificationItemProps;
+type TaskCompletedItemProps = TaskItemProps;
 
 export const TaskCompletedItem: FunctionComponent<TaskCompletedItemProps> = ({
   notification,
   ...props
 }) => {
-  const destinationUrl = getTaskUrl(
-    notification.project!.id,
-    notification.linkedTask!.number
-  );
   return (
-    <NotificationItem
-      notification={notification}
-      destinationUrl={destinationUrl}
-      {...props}
-    >
-      <Box>
-        <b>{notification.originatingUser?.name}</b>&nbsp;
-        <T keyName="notifications-task-completed" />
-      </Box>
-      <Box>
-        <StyledLinkedDetailItem>
-          {notification.linkedTask?.language.flagEmoji}
-        </StyledLinkedDetailItem>
-        <StyledLinkedDetailItem>
-          {notification.linkedTask?.name}
-        </StyledLinkedDetailItem>
-        <StyledLinkedDetailNumber>
-          #{notification.linkedTask?.number}
-        </StyledLinkedDetailNumber>
-      </Box>
-    </NotificationItem>
+    <TaskItem notification={notification} {...props}>
+      <T keyName="notifications-task-completed" />
+    </TaskItem>
   );
 };