assets/stylesheets/App.css

@@ -782,7 +782,3 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 .ant-descriptions .ant-descriptions-item-label::after {
   top: 0;
 }
-
-.minimal-code-block-editor .ant-typography pre {
-  margin: 0;
-}

src/components/Dashboard/common/CodeBlockEditor.jsx

@@ -140,10 +140,7 @@ export default function CodeBlockEditor({
   return (
     <>
       {minimal ? (
-        <div
+        <div style={{ maxWidth: '300px' }}>
-          style={{ maxWidth: '300px' }}
-          className='minimal-code-block-editor'
-        >
           <Link
             onClick={() => {
               setCodeMirrorOpen(true)

src/components/Dashboard/common/CountryDisplay.jsx

@@ -13,19 +13,14 @@ const CountryDisplay = ({ countryCode }) => {
   }
 
   return (
-    <Flex
+    <Flex gap={'small'} align='center' className='country-display'>
-      gap={'small'}
-      align='center'
-      className='country-display'
-      style={{ minWidth: 0 }}
-    >
       <Flag
         code={country.code}
         size='middle'
         hasBorder={true}
         borderRadius={5}
       />
-      <div style={{ minWidth: 0 }}>
+      <div>
         <Text ellipsis>{country.name}</Text>
       </div>
     </Flex>

src/components/Dashboard/common/NoteItem.jsx

@@ -36,8 +36,6 @@ const NoteItem = ({
   showChildNotes = true,
   showActions = true,
   showInfo = true,
-  showBody = true,
-  showFooter = true,
   largeSpacing = false
 }) => {
   const [childNotes, setChildNotes] = useState([])
@@ -164,21 +162,16 @@ const NoteItem = ({
   const noteItem = (
     <>
       <Flex vertical gap={'small'}>
-        {showBody && (
         <Flex gap={'middle'} align='start' style={{ marginBottom: '4px' }}>
           <Space>
             <PersonIcon />
             <Text style={{ whiteSpace: 'nowrap' }}>{note.user.name}:</Text>
           </Space>
-            <div style={{ marginTop: '4px' }}>
+          <div style={{ marginTop: '1px' }}>
             <MarkdownDisplay content={note.content} />
           </div>
         </Flex>
-        )}
-        {showFooter && showBody && (
         <Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
-        )}
-        {showFooter && (
         <Flex wrap gap={'small'}>
           {showActions && (
             <>
@@ -253,7 +246,6 @@ const NoteItem = ({
             </Space>
           </Flex>
         </Flex>
-        )}
         {isExpanded && (
           <Flex vertical gap={'small'} style={{ flexGrow: 1 }}>
             {childNotes.length > 0 ? (
@@ -350,9 +342,7 @@ NoteItem.propTypes = {
   showChildNotes: PropTypes.bool,
   showActions: PropTypes.bool,
   largeSpacing: PropTypes.bool,
-  showInfo: PropTypes.bool,
+  showInfo: PropTypes.bool
-  showBody: PropTypes.bool,
-  showFooter: PropTypes.bool
 }
 
 export default NoteItem

src/components/Dashboard/common/Notification.jsx

@@ -1,15 +1,12 @@
-import { useState, memo, useMemo } from 'react'
+import { useState } from 'react'
 import PropTypes from 'prop-types'
+import { Typography, Button, Tag, Badge, Flex, Card, Divider } from 'antd'
 import {
-  Typography,
+  BellOutlined,
-  Button,
+  InfoCircleOutlined,
-  Tag,
+  ExclamationCircleOutlined,
-  Badge,
+  CheckCircleOutlined
-  Flex,
+} from '@ant-design/icons'
-  Card,
-  Divider,
-  Popover
-} from 'antd'
 import TimeDisplay from './TimeDisplay'
 import EditIcon from '../../Icons/EditIcon'
 import PropertyChanges from './PropertyChanges'
@@ -18,194 +15,9 @@ import ObjectDisplay from './ObjectDisplay'
 import BinIcon from '../../Icons/BinIcon'
 import NoteItem from './NoteItem'
 import PlusIcon from '../../Icons/PlusIcon'
-import InfoCircleIcon from '../../Icons/InfoCircleIcon'
-import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon'
-import CheckCircleIcon from '../../Icons/CheckCircleIcon'
-import BellIcon from '../../Icons/BellIcon'
-import { getModelByName } from '../../../database/ObjectModels'
 
 const { Text, Paragraph } = Typography
 
-const getNotificationMessage = (type, metadata) => {
-  const objectType = metadata?.objectType ?? metadata?.note?.parentType
-  const model = objectType ? getModelByName(objectType) : null
-  const objectLabel = model?.label?.toLowerCase() ?? 'object'
-
-  switch (type) {
-    case 'editObject':
-      return `A ${objectLabel} was updated.`
-    case 'deleteObject':
-      return `A ${objectLabel} was deleted.`
-    case 'newNote':
-      return 'A new note was added.'
-    case 'info':
-      return 'You have a new notification.'
-    case 'error':
-      return 'An error occurred.'
-    case 'success':
-      return 'Action completed successfully.'
-    default:
-      return 'You have a new notification.'
-  }
-}
-
-const getParagraphProps = (largeSpacing) => ({
-  ellipsis: {
-    rows: 2,
-    expandable: true,
-    symbol: 'Show more'
-  },
-  style: {
-    margin: largeSpacing ? '10px 0 0 0' : 0,
-    lineHeight: 1.7,
-    marginBottom: 2
-  }
-})
-
-const NotificationBody = memo(function NotificationBody({
-  type,
-  message,
-  metadata,
-  largeSpacing
-}) {
-  const paragraph = getParagraphProps(largeSpacing)
-
-  switch (type) {
-    case 'editObject':
-      if (metadata?.old || metadata?.new) {
-        return (
-          <PropertyChanges
-            type={metadata?.objectType ?? 'unknown'}
-            value={{
-              old: metadata.old,
-              new: metadata.new
-            }}
-          />
-        )
-      }
-      return <Paragraph {...paragraph}>{message}</Paragraph>
-    case 'newNote':
-      return (
-        <NoteItem
-          note={metadata?.note}
-          showCard={false}
-          showCreatedAt={false}
-          showChildNotes={false}
-          showActions={false}
-          showInfo={false}
-          showBody={true}
-          showFooter={false}
-          largeSpacing={largeSpacing}
-        />
-      )
-    case 'deleteObject':
-      return <Paragraph {...paragraph}>{message}</Paragraph>
-    case 'info':
-    case 'error':
-    case 'success':
-      return <Paragraph {...paragraph}>{message}</Paragraph>
-    default:
-      return <Paragraph {...paragraph}>{message}</Paragraph>
-  }
-})
-
-NotificationBody.propTypes = {
-  type: PropTypes.string,
-  message: PropTypes.string,
-  metadata: PropTypes.object,
-  largeSpacing: PropTypes.bool
-}
-
-const NotificationDetails = memo(function NotificationDetails({
-  type,
-  message,
-  metadata,
-  largeSpacing
-}) {
-  const paragraph = getParagraphProps(largeSpacing)
-  const object = metadata?.object
-  const user = metadata?.user
-  const objectType = metadata?.objectType
-  const note = metadata?.note
-
-  switch (type) {
-    case 'editObject':
-      return (
-        <Flex align='center' gap='small'>
-          <Text {...paragraph} type='secondary'>
-            Object:
-          </Text>
-          <ObjectDisplay
-            object={object}
-            objectType={objectType}
-            showHyperlink={true}
-            showSpotlight={true}
-          />
-          <Text {...paragraph} style={{ marginLeft: '5px' }} type='secondary'>
-            User:
-          </Text>
-          <ObjectDisplay
-            object={user}
-            objectType='user'
-            showHyperlink={true}
-            showSpotlight={true}
-          />
-        </Flex>
-      )
-    case 'newNote':
-      return (
-        <Paragraph {...paragraph}>
-          <NoteItem
-            note={note}
-            showCard={false}
-            showCreatedAt={false}
-            showChildNotes={false}
-            showActions={false}
-            showInfo={false}
-            showBody={false}
-            largeSpacing={largeSpacing}
-          />
-        </Paragraph>
-      )
-    case 'deleteObject':
-      return (
-        <Flex align='center' gap='small'>
-          <Text {...paragraph} type='secondary'>
-            Object:
-          </Text>
-          <ObjectDisplay
-            object={object}
-            objectType={objectType}
-            showHyperlink={true}
-            showSpotlight={true}
-          />
-          <Text {...paragraph} style={{ marginLeft: '5px' }} type='secondary'>
-            User:
-          </Text>
-          <ObjectDisplay
-            object={user}
-            objectType='user'
-            showHyperlink={true}
-            showSpotlight={true}
-          />
-        </Flex>
-      )
-    case 'info':
-    case 'error':
-    case 'success':
-      return <Paragraph {...paragraph}>{message}</Paragraph>
-    default:
-      return <Paragraph {...paragraph}>{message}</Paragraph>
-  }
-})
-
-NotificationDetails.propTypes = {
-  type: PropTypes.string,
-  message: PropTypes.string,
-  metadata: PropTypes.object,
-  largeSpacing: PropTypes.bool
-}
-
 const Notification = ({
   notification,
   onMarkAsRead,
@@ -215,16 +27,14 @@ const Notification = ({
   showExtraInfo = true,
   inlineIcon = false,
   largeSpacing = false,
-  showSince = true,
+  showSince = true
-  showDetails = true,
-  largeTitleSpacing = false
 }) => {
   const [deleting, setDeleting] = useState(false)
 
-  const getNotificationTagIcon = (type) => {
+  const getNotificationIcon = (type) => {
     switch (type) {
       case 'info':
-        return <InfoCircleIcon />
+        return <InfoCircleOutlined />
       case 'editObject':
         return <EditIcon />
       case 'newNote':
@@ -232,29 +42,16 @@ const Notification = ({
       case 'deleteObject':
         return <BinIcon />
       case 'error':
-        return <ExclamationOctagonIcon />
+        return <ExclamationCircleOutlined />
       case 'success':
-        return <CheckCircleIcon />
+        return <CheckCircleOutlined />
       default:
-        return <BellIcon />
+        return <BellOutlined />
     }
   }
 
-  const getNotificationIcon = (type, metadata) => {
-    if (['editObject', 'newNote', 'deleteObject'].includes(type)) {
-      const objectType = metadata?.objectType ?? metadata?.note?.parentType
-      const model = objectType ? getModelByName(objectType) : null
-      if (model?.icon) {
-        const Icon = model.icon
-        return <Icon style={{ fontSize: 17 }} />
-      }
-    }
-
-    return getNotificationTagIcon(type)
-  }
-
   const getNotificationTag = (type) => {
-    const icon = getNotificationTagIcon(type)
+    const icon = getNotificationIcon(type)
     switch (type) {
       case 'info':
         return (
@@ -301,6 +98,71 @@ const Notification = ({
     }
   }
 
+  const getMetadataDisplay = (metadata, type) => {
+    if (metadata.old && metadata.new && type === 'editObject') {
+      return (
+        <PropertyChanges
+          type={metadata?.objectType ?? 'unknown'}
+          value={{
+            old: metadata.old,
+            new: metadata.new
+          }}
+        />
+      )
+    }
+    return null
+  }
+
+  const getNotificationMessage = (metadata, type) => {
+    const paragraph = {
+      ellipsis: {
+        rows: 2,
+        expandable: true,
+        symbol: 'Show more'
+      },
+      style: { margin: largeSpacing ? '10px 0 0 0' : 0 }
+    }
+    switch (type) {
+      case 'editObject': {
+        return (
+          <Paragraph {...paragraph}>
+            Object:
+            <ObjectDisplay
+              object={{ ...metadata?.object, _id: metadata?.object?._id }}
+              objectType={metadata.objectType}
+              showHyperlink={true}
+              showSpotlight={true}
+            />
+            User:
+            <ObjectDisplay
+              object={metadata.user}
+              objectType='user'
+              showHyperlink={true}
+              showSpotlight={true}
+            />
+          </Paragraph>
+        )
+      }
+      case 'newNote': {
+        return (
+          <Paragraph {...paragraph}>
+            <NoteItem
+              note={metadata.note}
+              showCard={false}
+              showCreatedAt={false}
+              showChildNotes={false}
+              showActions={false}
+              showInfo={false}
+              largeSpacing={largeSpacing}
+            />
+          </Paragraph>
+        )
+      }
+      default:
+        return <Paragraph {...paragraph}>{notification.message}</Paragraph>
+    }
+  }
+
   const handleMarkAsRead = () => {
     if (onMarkAsRead && !notification.read) {
       onMarkAsRead(notification._id)
@@ -319,114 +181,46 @@ const Notification = ({
     }
   }
 
-  const message = useMemo(
-    () => getNotificationMessage(notification.type, notification.metadata),
-    [notification.type, notification.metadata]
-  )
-
-  const notificationDetails = useMemo(
-    () => (
-      <NotificationDetails
-        type={notification.type}
-        message={message}
-        metadata={notification.metadata}
-        largeSpacing={largeSpacing}
-      />
-    ),
-    [notification.type, message, notification.metadata, largeSpacing]
-  )
-
-  const notificationBody = useMemo(
-    () => (
-      <NotificationBody
-        type={notification.type}
-        message={message}
-        metadata={notification.metadata}
-        largeSpacing={largeSpacing}
-      />
-    ),
-    [notification.type, message, notification.metadata, largeSpacing]
-  )
-
   const content = (
-    <Flex align='start' gap='small' style={{ width: '100%' }}>
+    <Flex align='start' gap='small'>
-      <Flex vertical style={{ flex: 1, width: '100%' }} gap='12px'>
+      <Flex vertical style={{ flex: 1 }} gap='small'>
-        <Flex vertical gap={largeTitleSpacing ? '10px' : '7px'}>
         <Flex justify='space-between' align='center'>
-            <Flex
+          <Flex align='center' gap='middle'>
-              align='center'
+            {inlineIcon && getNotificationIcon(notification.type)}
-              gap={largeTitleSpacing ? 'middle' : '8px'}
+            <Badge dot={!notification.read} offset={[2, 4]}>
-              style={{ minWidth: 0 }}
+              <Text strong={!notification.read}>{notification.title}</Text>
-            >
+            </Badge>
-              {inlineIcon &&
-                getNotificationIcon(notification.type, notification.metadata)}
-
-              <Text
-                strong={!notification.read}
-                ellipsis
-                style={{ minWidth: 0 }}
-              >
-                {notification.title}
-              </Text>
           </Flex>
-            <Flex align='center' gap='5px' style={{ marginLeft: 10 }}>
-              {showDetails && (
-                <Popover
-                  arrow={false}
-                  trigger={['hover', 'click']}
-                  placement='bottomLeft'
-                  content={
-                    <div style={{ marginLeft: '6px' }}>
-                      {notificationDetails}
-                    </div>
-                  }
-                >
-                  <Button
-                    type='text'
-                    size='small'
-                    onClick={handleMarkAsRead}
-                    disabled={deleting}
-                    icon={
-                      <InfoCircleIcon
-                        style={{ fontSize: 14, marginTop: 2.5, marginLeft: 0 }}
-                      />
-                    }
-                  ></Button>
-                </Popover>
-              )}
           {showDelete && (
-                <Badge
-                  dot={!notification.read}
-                  offset={[0, 3]}
-                  style={{ minWidth: 0 }}
-                >
             <Button
               type='text'
               size='small'
               loading={deleting}
               disabled={deleting}
+              style={{
+                width: 20,
+                height: 20,
+                position: 'relative',
+                left: 2
+              }}
               icon={
                 <XMarkIcon
-                        style={{
+                  style={{ fontSize: 10, marginBottom: 5, marginLeft: 0 }}
-                          fontSize: 12,
-                          marginBottom: 4.5,
-                          marginLeft: 0
-                        }}
                 />
               }
               onClick={handleDelete}
             />
-                </Badge>
           )}
         </Flex>
-          </Flex>
 
-          {notificationBody}
+        {getNotificationMessage(notification.metadata, notification.type)}
-        </Flex>
+
+        {notification.metadata &&
+          getMetadataDisplay(notification.metadata, notification.type)}
         {showExtraInfo && (
           <>
             <Divider style={{ margin: largeSpacing ? '10px 0' : 0 }} />
-            <Flex justify='space-between' align='center'>
+            <Flex ju stify='space-between' align='center'>
               {getNotificationTag(notification.type)}
               <TimeDisplay
                 dateTime={notification.createdAt}
@@ -444,10 +238,7 @@ const Notification = ({
       size='small'
       style={{
         cursor: 'pointer',
-        transition: 'background-color 0.2s',
+        transition: 'background-color 0.2s'
-        backgroundColor: notification.metadata?.note?.noteType?.color
-          ? notification.metadata.note.noteType.color + '26'
-          : undefined
       }}
       onClick={handleMarkAsRead}
       styles={{ body: { padding: '10px 12px 12px 12px' } }}
@@ -455,7 +246,7 @@ const Notification = ({
       {content}
     </Card>
   ) : (
-    <div style={{ marginTop: '-1px', width: '100%' }}>{content}</div>
+    <div style={{ marginTop: '-1px' }}>{content}</div>
   )
 }
 
@@ -463,16 +254,9 @@ Notification.propTypes = {
   notification: PropTypes.shape({
     _id: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
-    type: PropTypes.oneOf([
+    message: PropTypes.string.isRequired,
-      'info',
+    type: PropTypes.oneOf(['info', 'warning', 'error', 'success', 'default'])
-      'warning',
+      .isRequired,
-      'error',
-      'success',
-      'default',
-      'editObject',
-      'deleteObject',
-      'newNote'
-    ]).isRequired,
     read: PropTypes.bool.isRequired,
     createdAt: PropTypes.string.isRequired,
     metadata: PropTypes.object
@@ -484,9 +268,7 @@ Notification.propTypes = {
   showExtraInfo: PropTypes.bool,
   inlineIcon: PropTypes.bool,
   largeSpacing: PropTypes.bool,
-  showSince: PropTypes.bool,
+  showSince: PropTypes.bool
-  showDetails: PropTypes.bool,
-  largeTitleSpacing: PropTypes.bool
 }
 
 export default Notification

src/components/Dashboard/common/NotificationCenter.jsx

@@ -56,9 +56,7 @@ const NotificationCenter = ({ visible }) => {
         handleMarkAllAsRead()
       } else if (key === 'clearAll') {
         setClearNotificationsLoading(true)
-        deleteAllNotifications().finally(() =>
+        deleteAllNotifications().finally(() => setClearNotificationsLoading(false))
-          setClearNotificationsLoading(false)
-        )
       }
     }
   }
@@ -97,8 +95,6 @@ const NotificationCenter = ({ visible }) => {
           <Flex vertical gap='small'>
             {notifications.map((notification) => (
               <Notification
-                inlineIcon={true}
-                showDetails={true}
                 key={notification._id}
                 notification={notification}
                 onMarkAsRead={handleMarkAsRead}

src/components/Dashboard/context/NotificationContext.jsx

@@ -146,12 +146,10 @@ const NotificationProvider = ({ children }) => {
             showDelete={false}
             showExtraInfo={false}
             inlineIcon={true}
-            showDetails={false}
-            largeTitleSpacing={true}
           />
         ),
         icon: null,
-        duration: 5,
+        duration: 3,
         key: notif._id
       })
     }