notifications: added boris notifications

src/components/notifications/NotificationComment/index.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+import classNames from 'classnames';
+
 import { Anchor } from '~/components/common/Anchor';
 import { Avatar } from '~/components/common/Avatar';
 import { InlineUsername } from '~/components/common/InlineUsername';
@@ -11,11 +13,12 @@ import styles from './styles.module.scss';
 
 interface NotificationCommentProps {
   item: NotificationItem;
+  isNew?: boolean;
 }
 
-const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
+const NotificationComment: FC<NotificationCommentProps> = ({ item, isNew }) => (
   <Anchor href={item.url} className={styles.link}>
-    <div className={styles.message}>
+    <div className={classNames(styles.message, { [styles.new]: isNew })}>
       <div className={styles.icon}>
         <Avatar
           size={32}
@@ -31,11 +34,13 @@ const NotificationComment: FC<NotificationCommentProps> = ({ item }) => (
             <InlineUsername>{item.user.username}</InlineUsername>
           </span>
           <span>-</span>
-          <Square
-            className={styles.item_image}
-            size={16}
-            image={getURLFromString(item.thumbnail, 'avatar')}
-          />
+          {!!item.thumbnail && (
+            <Square
+              className={styles.item_image}
+              size={16}
+              image={getURLFromString(item.thumbnail, 'avatar')}
+            />
+          )}
           <div className={styles.item_title}>{item.title}</div>
         </b>
 

src/components/notifications/NotificationComment/styles.module.scss

@@ -12,6 +12,18 @@
   display: grid;
   grid-template-columns: 32px auto;
   column-gap: 0;
+  position: relative;
+
+  &.new::after {
+    content: ' ';
+    position: absolute;
+    top: $gap;
+    right: $gap;
+    background: $color_danger;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+  }
 }
 
 .content {
@@ -49,7 +61,6 @@
 
 .item_title {
   flex: 1;
-  padding-left: 5px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -58,6 +69,7 @@
 .item_image {
   flex: 0 0 16px;
   border-radius: 2px;
+  margin-right: 5px;
 }
 
 .time {

src/components/notifications/NotificationNode/index.tsx

@@ -1,5 +1,7 @@
 import { FC, useMemo } from 'react';
 
+import classNames from 'classnames';
+
 import { NodeThumbnail } from '~/components/node/NodeThumbnail';
 import { NotificationItem } from '~/types/notifications';
 import { getPrettyDate } from '~/utils/dom';
@@ -8,9 +10,10 @@ import styles from './styles.module.scss';
 
 interface NotificationNodeProps {
   item: NotificationItem;
+  isNew?: boolean;
 }
 
-const NotificationNode: FC<NotificationNodeProps> = ({ item }) => {
+const NotificationNode: FC<NotificationNodeProps> = ({ item, isNew }) => {
   const thumbnail = useMemo(
     () => ({
       title: item.title,
@@ -21,7 +24,7 @@ const NotificationNode: FC<NotificationNodeProps> = ({ item }) => {
   );
 
   return (
-    <div className={styles.card}>
+    <div className={classNames(styles.card, { [styles.new]: isNew })}>
       <div className={styles.image}>
         <NodeThumbnail item={thumbnail} />
       </div>

src/components/notifications/NotificationNode/styles.module.scss

@@ -8,6 +8,17 @@
   justify-content: center;
   align-items: center;
   padding: $gap/2;
+
+  &.new::after {
+    content: ' ';
+    position: absolute;
+    top: $gap;
+    right: $gap;
+    background: $color_danger;
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+  }
 }
 
 .text {

src/components/notifications/NotificationSettingsForm/index.tsx

@@ -9,8 +9,6 @@ import { Toggle } from '~/components/input/Toggle';
 import { useNotificationSettingsForm } from '~/hooks/notifications/useNotificationSettingsForm';
 import { NotificationSettings } from '~/types/notifications';
 
-import styles from './styles.module.scss';
-
 interface NotificationSettingsFormProps {
   value: NotificationSettings;
   onSubmit: (val: Partial<NotificationSettings>) => Promise<unknown>;
@@ -65,6 +63,8 @@ const NotificationSettingsForm: FC<NotificationSettingsFormProps> = ({
           <InputRow input={toggle('comments', !values.enabled)}>
             Комментарии
           </InputRow>
+
+          <InputRow input={toggle('boris', !values.enabled)}>Борис</InputRow>
         </Group>
       </Zone>
 

src/components/notifications/NotificationSettingsForm/styles.module.scss

@@ -1,7 +0,0 @@
-@import 'src/styles/variables';
-
-.grid {
-  display: grid;
-  grid-auto-flow: row;
-  row-gap: $gap;
-}