notifications: for nodes

src/containers/notifications/NotificationList/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { FC, useCallback, useEffect } from 'react';
 
 import classNames from 'classnames';
 
@@ -6,7 +6,9 @@ import { Button } from '~/components/input/Button';
 import { InputRow } from '~/components/input/InputRow';
 import { LoaderScreen } from '~/components/input/LoaderScreen';
 import { NotificationComment } from '~/components/notifications/NotificationComment';
+import { NotificationNode } from '~/components/notifications/NotificationNode';
 import { useNotificationsList } from '~/hooks/notifications/useNotificationsList';
+import { NotificationItem, NotificationType } from '~/types/notifications';
 import { useNotifications } from '~/utils/providers/NotificationProvider';
 
 import styles from './styles.module.scss';
@@ -22,6 +24,17 @@ const NotificationList: FC<NotificationListProps> = () => {
     return () => markAsRead();
   }, []);
 
+  const renderItem = useCallback((item: NotificationItem) => {
+    switch (item.type) {
+      case NotificationType.Comment:
+        return <NotificationComment item={item} />;
+      case NotificationType.Node:
+        return <NotificationNode item={item} />;
+      default:
+        return null;
+    }
+  }, []);
+
   if (isLoading) {
     return <LoaderScreen align="top" />;
   }
@@ -46,7 +59,7 @@ const NotificationList: FC<NotificationListProps> = () => {
         <div className={styles.items}>
           {items?.map((item) => (
             <div className={styles.item} key={item.created_at}>
-              <NotificationComment item={item} />
+              {renderItem(item)}
             </div>
           ))}
         </div>

src/containers/notifications/NotificationList/styles.module.scss

@@ -47,8 +47,9 @@
 
 .item {
   @include row_shadow;
-  padding-right: $gap;
+  padding: $gap / 2 $gap $gap / 2 $gap / 2;
   transition: background-color 0.25s;
+  min-width: 0;
 
   &:hover {
     background-color: $content_bg_lighter;