added hoverable hints

src/components/comment/CommentImageGrid/index.tsx

@@ -2,6 +2,8 @@ import { FC } from 'react';
 
 import classNames from 'classnames';
 
+import { Hoverable } from '~/components/common/Hoverable';
+import { Icon } from '~/components/input/Icon';
 import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
@@ -24,8 +26,13 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
         [styles.multiple]: files.length > 1,
       })}
     >
-      {files.map((file, index) => (
-        <div key={file.id} onClick={() => onClick(file)}>
+      {files.map((file) => (
+        <Hoverable
+          key={file.id}
+          onClick={() => onClick(file)}
+          className={styles.item}
+          icon={<Icon icon="zoom" size={30} />}
+        >
           <img
             srcSet={getFileSrcSet(file)}
             src={getURL(file, imagePresets['300'])}
@@ -33,7 +40,7 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
             className={styles.image}
             sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
           />
-        </div>
+        </Hoverable>
       ))}
     </div>
   );

src/components/comment/CommentImageGrid/styles.module.scss

@@ -30,3 +30,7 @@
     max-inline-size: 250px;
   }
 }
+
+.item {
+  border-radius: $radius;
+}

src/components/common/Hoverable/index.tsx

@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface HoverableProps extends DivProps {
+  icon?: ReactNode;
+}
+
+const Hoverable: FC<HoverableProps> = ({
+  children,
+  className,
+  icon,
+  ...rest
+}) => (
+  <div
+    {...rest}
+    className={classNames(styles.hoverable, className, {
+      [styles.with_icon]: !!icon,
+    })}
+  >
+    {icon && <div className={styles.icon}>{icon}</div>}
+    {children}
+  </div>
+);
+
+export { Hoverable };

src/components/common/Hoverable/styles.module.scss

@@ -0,0 +1,43 @@
+@import 'src/styles/variables';
+
+.hoverable {
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    inset: 0;
+    border-radius: $radius;
+    opacity: 0;
+    transition: all 100ms;
+    box-shadow: inset $color_primary 0 0 0 2px;
+    touch-action: none;
+    pointer-events: none;
+  }
+
+  &.with_icon::after {
+    background: linear-gradient(325deg, $color_primary 20px, transparent 100px);
+  }
+
+  &:hover {
+    z-index: 10;
+    transition: all 100ms;
+
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.icon {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  z-index: 2;
+  opacity: 0;
+
+  .hoverable:hover & {
+    opacity: 1;
+  }
+}

src/components/node/NodeRelated/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ReactElement } from 'react';
 
+import { Hoverable } from '~/components/common/Hoverable';
 import { SubTitle } from '~/components/common/SubTitle';
 import { Group } from '~/components/containers/Group';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
@@ -7,7 +8,6 @@ import { INode } from '~/types';
 
 import styles from './styles.module.scss';
 
-
 interface IProps {
   title: ReactElement | string;
   items: Partial<INode>[];
@@ -19,8 +19,10 @@ const NodeRelated: FC<IProps> = ({ title, items }) => {
       <SubTitle className={styles.title}>{title}</SubTitle>
 
       <div className={styles.grid}>
-        {items.map(item => (
-          <NodeRelatedItem item={item} key={item.id} />
+        {items.map((item) => (
+          <Hoverable key={item.id}>
+            <NodeRelatedItem item={item} />
+          </Hoverable>
         ))}
       </div>
     </Group>

src/components/node/NodeRelatedItem/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { FC, memo, useEffect, useMemo, useRef, useState } from 'react';
 
 import classNames from 'classnames';