pin latest state comment

src/components/CommentView/CommentView.tsx

@@ -1,7 +1,7 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import dynamic from 'next/dynamic';
-import { brandColor, danger0, gapM, gapS, gray4, gray9 } from '@taskany/colors';
+import { brandColor, danger0, gapM, gapS, gray4, gray9, backgroundColor } from '@taskany/colors';
 import {
     BinIcon,
     Card,
@@ -16,18 +16,20 @@
     Text,
     UserPic,
     nullable,
+    PinAltIcon,
 } from '@taskany/bricks';
 import { Reaction, State, User } from '@prisma/client';
 import colorLayer from 'color-layer';
 
 import { useReactionsResource } from '../../hooks/useReactionsResource';
 import { useCommentResource } from '../../hooks/useCommentResource';
 import { usePageContext } from '../../hooks/usePageContext';
+import { useLocale } from '../../hooks/useLocale';
 import { createLocaleDate } from '../../utils/dateTime';
 import { Reactions } from '../Reactions';
 import { ActivityFeedItem } from '../ActivityFeed';
-import { useLocale } from '../../hooks/useLocale';
 import { RelativeTime } from '../RelativeTime/RelativeTime';
+import { Circle, CircledIcon } from '../Circle';
 
 import { tr } from './CommentView.i18n';
 
@@ -45,6 +47,7 @@
     isNew?: boolean;
     isEditable?: boolean;
     state?: State | null;
+    isPinned?: boolean;
 
     onReactionToggle?: React.ComponentProps<typeof ReactionsDropdown>['onClick'];
     onDelete?: (id: string) => void;
@@ -104,25 +107,48 @@
 `;
 
 const StyledCardInfo = styled(CardInfo)`
-    display: grid;
-    grid-template-columns: 6fr 6fr;
-`;
-
-const StyledReactions = styled.div`
-    padding-top: ${gapM};
+    display: flex;
+    justify-content: space-between;
 `;
 
-const StyledStateDot = styled(StateDot)`
-    margin-right: ${gapS};
+const StyledCardComment = styled(CardComment)`
+    display: flex;
+    flex-direction: column;
+    gap: ${gapM};
 `;
 
 const StyledTimestamp = styled.div`
     display: flex;
     align-items: center;
-
-    padding-bottom: ${gapM};
+    gap: ${gapS};
 `;
 
+const renderTriggerHelper = ({ ref, onClick }: { ref: React.RefObject<HTMLButtonElement>; onClick: () => void }) => (
+    <MoreVerticalIcon size="xs" ref={ref} onClick={onClick} />
+);
+
+const renderItemHelper = ({ item, cursor, index }: { item: any; cursor: number; index: number }) => (
+    <MenuItem
+        key={item.label}
+        ghost
+        color={item.color}
+        focused={cursor === index}
+        icon={item.icon}
+        onClick={item.onClick}
+    >
+        {item.label}
+    </MenuItem>
+);
+
+const iconRenderCondition = (isPinned: boolean, image?: User['image'], email?: User['email']) =>
+    isPinned ? (
+        <Circle size={32}>
+            <CircledIcon as={PinAltIcon} size="s" color={backgroundColor} />
+        </Circle>
+    ) : (
+        <UserPic size={32} src={image} email={email} />
+    );
+
 export const CommentView: FC<CommentViewProps> = ({
     id,
     author,
@@ -134,6 +160,7 @@
     state,
     onDelete,
     onReactionToggle,
+    isPinned = false,
 }) => {
     const { themeId } = usePageContext();
     const locale = useLocale();
@@ -181,9 +208,26 @@
         })({ id });
     }, [id, onDelete, remove]);
 
+    const dropdownItems = useMemo(
+        () => [
+            {
+                label: tr('Edit'),
+                icon: <EditIcon size="xxs" />,
+                onClick: onEditClick,
+            },
+            {
+                label: tr('Delete'),
+                color: danger0,
+                icon: <BinIcon size="xxs" />,
+                onClick: onDeleteClick,
+            },
+        ],
+        [onDeleteClick, onEditClick],
+    );
+
     return (
-        <ActivityFeedItem id={`comment-${id}`}>
-            <UserPic size={32} src={author?.image} email={author?.email} />
+        <ActivityFeedItem id={isPinned ? '' : `comment-${id}`}>
+            {iconRenderCondition(isPinned, author?.image, author?.email)}
 
             {editMode ? (
                 <CommentEditForm
@@ -207,46 +251,19 @@
                                 <ReactionsDropdown view="icon" onClick={onReactionToggle} />
                             ))}
                             {nullable(isEditable, () => (
-                                <span>
-                                    <Dropdown
-                                        items={[
-                                            {
-                                                label: tr('Edit'),
-                                                icon: <EditIcon size="xxs" />,
-                                                onClick: onEditClick,
-                                            },
-                                            {
-                                                label: tr('Delete'),
-                                                color: danger0,
-                                                icon: <BinIcon size="xxs" />,
-                                                onClick: onDeleteClick,
-                                            },
-                                        ]}
-                                        renderTrigger={({ ref, onClick }) => (
-                                            <MoreVerticalIcon size="xs" ref={ref} onClick={onClick} />
-                                        )}
-                                        renderItem={({ item, cursor, index }) => (
-                                            <MenuItem
-                                                key={item.label}
-                                                ghost
-                                                color={item.color}
-                                                focused={cursor === index}
-                                                icon={item.icon}
-                                                onClick={item.onClick}
-                                            >
-                                                {item.label}
-                                            </MenuItem>
-                                        )}
-                                    />
-                                </span>
+                                <Dropdown
+                                    items={dropdownItems}
+                                    renderTrigger={renderTriggerHelper}
+                                    renderItem={renderItemHelper}
+                                />
                             ))}
                         </StyledCommentActions>
                     </StyledCardInfo>
 
-                    <CardComment>
+                    <StyledCardComment>
                         {nullable(state, (s) => (
                             <StyledTimestamp>
-                                <StyledStateDot color={colorLayer(s.hue, 9, s.hue === 1 ? 0 : undefined)[themeId]} />
+                                <StateDot color={colorLayer(s.hue, 9, s.hue === 1 ? 0 : undefined)[themeId]} />
                                 <Text size="m" weight="bolder" color={gray9}>
                                     {createLocaleDate(createdAt, { locale })}
                                 </Text>
@@ -256,11 +273,9 @@
                         <Md>{commentDescription}</Md>
 
                         {nullable(reactions?.length, () => (
-                            <StyledReactions>
-                                <Reactions reactions={reactionsProps.reactions} onClick={onReactionToggle} />
-                            </StyledReactions>
+                            <Reactions reactions={reactionsProps.reactions} onClick={onReactionToggle} />
                         ))}
-                    </CardComment>
+                    </StyledCardComment>
                 </StyledCommentCard>
             )}
         </ActivityFeedItem>

src/components/GoalPreview/GoalPreview.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 import { danger0, gapM, gapS, gray7 } from '@taskany/colors';
@@ -43,6 +43,7 @@ import { State } from '../State';
 import { useGoalDependencyResource } from '../../hooks/useGoalDependencyResource';
 import { GoalDependencyAddForm } from '../GoalDependencyForm/GoalDependencyForm';
 import { GoalDependencyListByKind } from '../GoalDependencyList/GoalDependencyList';
+import { CommentView } from '../CommentView/CommentView';
 
 import { tr } from './GoalPreview.i18n';
 
@@ -95,6 +96,8 @@ const StyledModalContent = styled(ModalContent)`
 
 const StyledCard = styled(Card)`
     min-height: 60px;
+
+    margin-bottom: ${gapS};
 `;
 
 const GoalPreview: React.FC<GoalPreviewProps> = ({ preview, onClose, onDelete }) => {
@@ -188,6 +191,7 @@ const GoalPreview: React.FC<GoalPreviewProps> = ({ preview, onClose, onDelete })
     const commentsRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
     const headerRef = useRef<HTMLDivElement>(null);
+
     const onCommentsClick = useCallback(() => {
         commentsRef.current &&
             contentRef.current &&
@@ -200,6 +204,16 @@ const GoalPreview: React.FC<GoalPreviewProps> = ({ preview, onClose, onDelete })
 
     const { title, description, updatedAt } = goal || preview;
 
+    const lastChangedStatusComment = useMemo(() => {
+        if (!goal || goal.comments?.length <= 1) {
+            return null;
+        }
+
+        const foundResult = goal.comments.findLast((comment) => comment.stateId);
+        return foundResult?.stateId === goal.stateId ? foundResult : null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [goal?.comments, goal?.stateId]);
+
     return (
         <>
             <ModalPreview visible onClose={onPreviewClose}>
@@ -305,6 +319,21 @@ const GoalPreview: React.FC<GoalPreviewProps> = ({ preview, onClose, onDelete })
                         </CardComment>
                     </StyledCard>
 
+                    {nullable(lastChangedStatusComment, (value) => (
+                        <CommentView
+                            id={value.id}
+                            author={value.activity?.user}
+                            description={value.description}
+                            state={value.state}
+                            createdAt={value.createdAt}
+                            isPinned
+                            onDelete={onCommentDelete}
+                            onReactionToggle={onCommentReactionToggle(value.id)}
+                            reactions={value.reactions}
+                            isEditable={value.activity?.id === user?.activityId}
+                        />
+                    ))}
+
                     {nullable(goal, ({ activityFeed, id, goalAchiveCriteria, relations, project, _isEditable }) => (
                         <GoalActivity
                             feed={activityFeed}