microboard-ui-temp 0.0.3

package/src/entities/comments/CommentContainer/CommentPreview/CommentPreview.module.css

@@ -0,0 +1,89 @@
+.avatarsMap {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 8px;
+	flex-wrap: nowrap;
+}
+
+.preview {
+	background-color: #ffffff;
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	padding: 12px;
+	gap: 12px;
+	color: #14151a;
+	border-radius: 6px;
+	border: 2px solid #dee0e3;
+	font-family: "Manrope", Arial;
+	box-shadow: 0 1px 2px rgba(20, 21, 26, 0.05);
+	z-index: 4;
+	bottom: 36px;
+}
+
+.noWrap {
+	gap: 12px;
+	display: flex;
+	flex-wrap: nowrap;
+}
+
+.wrap {
+	gap: 12px;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.commentTippy {
+	color: #ffffff;
+	position: absolute;
+	top: 100%;
+	z-index: 2;
+}
+
+.infoContainer {
+	max-width: 224px;
+	min-width: 220px;
+}
+
+.username {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.005em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 140px;
+}
+
+.message {
+	font-size: 18px;
+	font-weight: 500;
+	line-height: 26px;
+	letter-spacing: -0.012em;
+	word-break: break-word;
+	max-height: 78px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+}
+
+.smallText {
+	white-space: nowrap;
+	font-weight: 400;
+	font-size: 12px;
+	line-height: 16px;
+	margin-top: 2px;
+	color: #0f132499;
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.spaceBetween {
+	justify-content: space-between;
+}

package/src/entities/comments/CommentContainer/CommentPreview/CommentPreview.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import clsx from "clsx";
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import { Commentator, CommentMessage } from "microboard-temp";
+import styles from "./CommentPreview.module.css";
+import { useTranslation } from "react-i18next";
+import { Avatar } from "features/UserPanel/Avatar/Avatar";
+import { formatDate } from "entities/comments/lib";
+import { getCorrectEnding } from "shared/lib/getCorrectEnding";
+
+interface Props {
+	commentators: Commentator[];
+	firstMessage: CommentMessage;
+	messagesCount: number;
+	handleClick: () => void;
+	isOpen: boolean;
+}
+
+export const CommentPreview = ({
+	commentators,
+	firstMessage,
+	messagesCount,
+	handleClick,
+	isOpen,
+}: Props): JSX.Element => {
+	const { t } = useTranslation();
+
+	return (
+		<div
+			onClick={handleClick}
+			className={styles.preview}
+			style={isOpen ? undefined : { display: "none" }}
+		>
+			<div
+				className={clsx(
+					commentators.length > 1 ? styles.wrap : styles.noWrap,
+				)}
+			>
+				{commentators.length === 1 ? (
+					<Avatar
+						key={commentators[0].username}
+						avatar={commentators[0].avatar}
+						width={32}
+						height={32}
+					/>
+				) : (
+					<div className={styles.avatarsMap}>
+						{commentators.slice(0, 5).map(commentator => {
+							return (
+								<Avatar
+									key={commentator.id}
+									avatar={commentator.avatar}
+									width={32}
+									height={32}
+								/>
+							);
+						})}
+					</div>
+				)}
+				<div>
+					<div
+						className={clsx(
+							styles.noWrap,
+							styles.spaceBetween,
+							styles.infoContainer,
+						)}
+					>
+						<p className={styles.username}>
+							{commentators[0].username}
+						</p>
+						<p className={styles.smallText}>
+							{formatDate(new Date(firstMessage.date))}
+						</p>
+					</div>
+					<p className={styles.message}>{firstMessage.text}</p>
+				</div>
+			</div>
+			<Icon
+				width={18}
+				height={8}
+				iconName={"CommentTippy"}
+				className={styles.commentTippy}
+			/>
+			{!!messagesCount && (
+				<p className={clsx(styles.smallText, styles.fullWidth)}>
+					{messagesCount}{" "}
+					{t(`comment.answer.${getCorrectEnding(messagesCount)}`)}
+				</p>
+			)}
+		</div>
+	);
+};

package/src/entities/comments/CommentInput/CommentInput.module.css

@@ -0,0 +1,69 @@
+.submitBtn {
+	min-width: 20px;
+	min-height: 20px;
+	padding: 0;
+	margin-left: 10px;
+	background: transparent;
+}
+
+.submitBtn.active {
+	background: transparent;
+}
+
+.submitBtnWrapper {
+	position: relative;
+}
+
+.submitBtnSeparator {
+	position: absolute;
+	height: 40px;
+	top: -10px;
+}
+
+.wrapper {
+	width: 100%;
+}
+
+.InputContainer {
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+	background-color: #0a0f290a;
+	padding: 2px;
+	margin-top: 6px;
+}
+
+.InputContainer:focus-within {
+	outline: none;
+	border: none;
+}
+
+.editModeButtons {
+	display: flex;
+	justify-content: space-between;
+}
+
+.editModeButtons > div {
+	display: flex;
+	gap: 12px;
+}
+
+.editModeButtons button {
+	border: none;
+	outline: none;
+	background: none;
+	font-family: Manrope;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 24px;
+	color: #14151a;
+	cursor: pointer;
+}
+
+.saveBtn {
+	color: #4778f5 !important;
+}
+
+.deleteBtn {
+	color: #e6483d !important;
+}

package/src/entities/comments/CommentInput/CommentInput.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import styles from "./CommentInput.module.css";
+import { Icon } from "../../../shared/ui-lib/Icon";
+import { Input } from "shared/ui-lib/Input/Input";
+import { useTranslation } from "react-i18next";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+interface Props {
+	value: string;
+	setValue: (value: string) => void;
+	handleSubmit: () => void;
+	handleRemove?: () => void;
+	handleReject?: () => void;
+	handleKeyDown?: (e: KeyboardEvent) => void;
+	mode: "create" | "edit" | "reply";
+	onInput?: () => void;
+}
+
+export const CommentInput = ({
+	value,
+	handleSubmit,
+	handleRemove,
+	setValue,
+	mode,
+	handleReject,
+	onInput,
+}: Props): JSX.Element => {
+	const [showSeparator, setShowSeparator] = useState(true);
+
+	const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+		event.stopPropagation();
+		if (event.key === "Enter" && !value.trim()) {
+			return event.preventDefault();
+		}
+		if (event.key === "Enter" && !!value.trim() && !event.shiftKey) {
+			event.preventDefault();
+			return handleSubmit();
+		}
+		if (event.key === "Escape") {
+			if (handleReject) {
+				return handleReject();
+			}
+			return setValue("");
+		}
+	};
+	const { t } = useTranslation();
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+		const target = event.target;
+		setValue(target.value);
+		if (target.scrollHeight > 20) {
+			setShowSeparator(false);
+		} else {
+			setShowSeparator(true);
+		}
+	};
+
+	return (
+		<div className={styles.wrapper}>
+			<Input
+				maxLength={560}
+				id={`comment-message-input-${mode}`}
+				placeholder={t(`comment.${mode}`)}
+				value={value}
+				onInput={onInput}
+				inputContainerClassName={
+					mode === "edit" ? styles.inputContainer : undefined
+				}
+				shouldFocus={true}
+				shouldSelect={mode === "edit"}
+				multiline={true}
+				onKeyDown={onKeyDown}
+				onPaste={event => event.stopPropagation()}
+				onCopy={event => event.stopPropagation()}
+				onChange={handleChange}
+				postfixButton={
+					(mode === "create" || mode === "reply") && (
+						<div className={styles.submitBtnWrapper}>
+							{showSeparator && (
+								<UiSeparator
+									vertical={true}
+									className={styles.submitBtnSeparator}
+								/>
+							)}
+							<UiButton
+								variant="secondary"
+								className={styles.submitBtn}
+								active={!!value}
+								disabled={!value}
+								onClick={handleSubmit}
+								style={{ backgroundColor: "transparent" }}
+							>
+								<Icon
+									iconName="Vector"
+									width={20}
+									height={20}
+								/>
+							</UiButton>
+						</div>
+					)
+				}
+			/>
+			{mode === "edit" && (
+				<div className={styles.editModeButtons}>
+					<div>
+						<button onClick={handleReject}>Отменить</button>
+						<button
+							onClick={handleSubmit}
+							className={styles.saveBtn}
+						>
+							Сохранить
+						</button>
+					</div>
+					<button onClick={handleRemove} className={styles.deleteBtn}>
+						Удалить
+					</button>
+				</div>
+			)}
+		</div>
+	);
+};

package/src/entities/comments/CommentsContext.tsx

@@ -0,0 +1,65 @@
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+import React, { useState } from "react";
+import { Comment } from "microboard-temp";
+
+interface Context {
+	openedThreadId: string | undefined;
+	setOpenedThreadId: (id: string | undefined) => void;
+	showResolved: boolean;
+	setShowResolved: (arg: boolean) => void;
+	showComments: boolean;
+	setShowComments: (arg: boolean) => void;
+	enableClusters: boolean;
+	setEnableClusters: (arg: boolean) => void;
+	targetMessageId: string | undefined;
+	setTargetMessageId: (id: string | undefined) => void;
+	movingComment: Comment | null;
+	setMovingComment: (id: Comment | null) => void;
+}
+
+export const CommentsContext = createStrictContext<Context>();
+
+export function useCommentsContext() {
+	return useStrictContext(CommentsContext);
+}
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export const CommentsContextProvider = ({ children }: Props): JSX.Element => {
+	const [openedThreadId, setOpenedThreadId] = useState<string | undefined>(
+		undefined,
+	);
+	const [showResolved, setShowResolved] = useState(false);
+	const [showComments, setShowComments] = useState(true);
+	const [enableClusters, setEnableClusters] = useState(true);
+	const [targetMessageId, setTargetMessageId] = useState<string | undefined>(
+		undefined,
+	);
+	const [movingComment, setMovingComment] = useState<Comment | null>(null);
+
+	return (
+		<CommentsContext.Provider
+			value={{
+				openedThreadId,
+				setOpenedThreadId,
+				showResolved,
+				setShowResolved,
+				setShowComments,
+				showComments,
+				setEnableClusters,
+				enableClusters,
+				targetMessageId,
+				setTargetMessageId,
+				movingComment,
+				setMovingComment,
+			}}
+		>
+			{children}
+		</CommentsContext.Provider>
+	);
+};

package/src/entities/comments/CommentsPanel/CommentCard/CommentCard.module.css

@@ -0,0 +1,36 @@
+.card {
+	width: 100%;
+	border-radius: 6px;
+	border: 1px solid #dee0e3;
+	font-family: "Manrope", Arial;
+	color: #14151a;
+	cursor: pointer;
+}
+
+.btn {
+	font-family: Manrope;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	color: #0f132499;
+	background: none;
+	border: none;
+	margin-left: 52px;
+	cursor: pointer;
+}
+
+.btn.highlighted {
+	color: #4778f5;
+}
+
+.firstMessage {
+	padding-bottom: 8px;
+}
+
+.firstMessage:hover {
+	background-color: #0a0f290a;
+}
+
+.unread {
+	background-color: #0a0f290a;
+}

package/src/entities/comments/CommentsPanel/CommentCard/CommentCard.tsx

@@ -0,0 +1,132 @@
+import React, { MouseEvent, useRef, useState } from "react";
+import { Comment } from "microboard-temp";
+import styles from "./CommentCard.module.css";
+import { Message } from "./Message/Message";
+import { useAppContext } from "features/AppContext";
+import clsx from "clsx";
+import { useAccount } from "App/useAccount";
+import { useTranslation } from "react-i18next";
+import { useIntersectionObserver } from "entities/comments/useIntersectionObserver";
+import { useCommentsContext } from "entities/comments";
+import { useScrollToUnreadMessage } from "entities/comments/useScrollToUnreadMessage";
+import { getCorrectEnding } from "shared/lib/getCorrectEnding";
+
+interface Props {
+	comment: Comment;
+}
+
+export const CommentCard = ({ comment }: Props): JSX.Element => {
+	const [showMoreComments, setShowMoreComments] = useState(false);
+	const refs = useRef<Record<string, HTMLDivElement>>({});
+	const { board } = useAppContext();
+	const account = useAccount();
+	const { t } = useTranslation();
+	const { setOpenedThreadId } = useCommentsContext();
+	const userId = account.info?.id;
+	const messages = comment.getThread();
+	const unreadMessages = comment.getUnreadMessages(userId);
+
+	useIntersectionObserver({
+		comment,
+		refs,
+		userId,
+		deps: [showMoreComments, unreadMessages && unreadMessages.length],
+		disabled: !showMoreComments,
+	});
+	useScrollToUnreadMessage({
+		unreadMessages,
+		refs,
+		deps: [showMoreComments],
+	});
+
+	const handleCardClick = (): void => {
+		const item = board.items.getById(comment.getId());
+		if (!item) {
+			return;
+		}
+
+		board.camera.zoomToFit(item.getMbr());
+	};
+
+	const handleShowBtnClick = (ev: MouseEvent<HTMLButtonElement>): void => {
+		ev.stopPropagation();
+		setShowMoreComments(!showMoreComments);
+	};
+
+	const setRef = (id: string) => (el: HTMLDivElement) => {
+		refs.current[id] = el;
+	};
+
+	const handleMessageClick = (): void => {
+		setOpenedThreadId(comment.getId());
+	};
+
+	let showMoreText: string;
+	if (unreadMessages) {
+		const ending = getCorrectEnding(unreadMessages.length);
+		showMoreText = `${t("comment.panel.card.showNew", { count: unreadMessages.length })} 
+		${t(`comment.panel.card.new.${ending}`)}
+		${t(`comment.panel.card.comments.${ending}`)}`;
+	} else {
+		showMoreText = `${t("comment.panel.card.showMore", { count: messages.length - 1 })} 
+        ${t(`comment.panel.card.comments.${getCorrectEnding(messages.length - 1)}`)}`;
+	}
+
+	return (
+		<div className={styles.card} onClick={handleCardClick}>
+			<div
+				className={clsx(
+					styles.firstMessage,
+					!!unreadMessages &&
+						!!unreadMessages.find(
+							message => message.id === messages[0].id,
+						) &&
+						styles.unread,
+				)}
+			>
+				<Message
+					isUnread={false}
+					isFirstMessage
+					ref={setRef(messages[0].id)}
+					message={messages[0]}
+					clipText={!showMoreComments && messages.length > 1}
+				/>
+				{messages.length > 1 && (
+					<button
+						className={clsx(
+							styles.btn,
+							unreadMessages && styles.highlighted,
+						)}
+						onClick={handleShowBtnClick}
+					>
+						{!showMoreComments
+							? showMoreText
+							: t("comment.panel.card.hideComments")}
+					</button>
+				)}
+			</div>
+			{showMoreComments &&
+				messages.length &&
+				messages.slice(1).map(mes => {
+					if (!mes || !mes.id) {
+						return null;
+					}
+					return (
+						<Message
+							isUnread={
+								!!unreadMessages &&
+								!!unreadMessages.length &&
+								!!unreadMessages.find(
+									message => message.id === mes.id,
+								)
+							}
+							handleClick={handleMessageClick}
+							ref={setRef(mes.id)}
+							key={mes.id}
+							message={mes}
+						/>
+					);
+				})}
+		</div>
+	);
+};

package/src/entities/comments/CommentsPanel/CommentCard/Message/Message.module.css

@@ -0,0 +1,73 @@
+.messageInfo {
+	gap: 12px;
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.wrap {
+	gap: 12px;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.username {
+	font-family: Manrope;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 24px;
+	letter-spacing: -0.01em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 132px;
+}
+
+.smallText {
+	font-family: Manrope;
+	font-weight: 500;
+	font-size: 14px;
+	line-height: 20px;
+	word-break: break-word;
+}
+
+.clipText {
+	max-height: 60px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+}
+
+.date {
+	white-space: nowrap;
+	color: #0f132499;
+}
+
+.message {
+	display: flex;
+	gap: 8px;
+	padding: 8px 12px;
+}
+
+.firstMessage {
+	display: flex;
+	gap: 8px;
+	border-top-left-radius: 6px;
+	border-top-right-radius: 6px;
+	padding: 16px 12px 0 12px;
+}
+
+.message:hover {
+	background-color: #0a0f290a;
+}
+
+.unread {
+	background-color: #0a0f290a;
+}
+
+.fullWidth {
+	width: 100%;
+}