microboard-ui-temp 0.0.3

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

@@ -0,0 +1,72 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import clsx from "clsx";
+import { CommentMessage as IMessage } from "microboard-temp";
+import styles from "./Message.module.css";
+import { useCommentsContext } from "entities/comments";
+import { Avatar } from "features/UserPanel/Avatar/Avatar";
+import { formatDate } from "entities/comments/lib";
+
+interface Props {
+	message: IMessage;
+	clipText?: boolean;
+	handleClick?: () => void;
+	isFirstMessage?: boolean;
+	isUnread: boolean;
+}
+
+export const Message = forwardRef(
+	(
+		{
+			message,
+			handleClick,
+			clipText = false,
+			isFirstMessage,
+			isUnread,
+		}: Props,
+		ref: ForwardedRef<HTMLDivElement>,
+	) => {
+		const { setTargetMessageId } = useCommentsContext();
+
+		const commentator = message.commentator;
+
+		const onClick = (): void => {
+			if (handleClick) {
+				handleClick();
+				setTargetMessageId(message.id);
+			}
+		};
+
+		return (
+			<div
+				onClick={onClick}
+				ref={ref}
+				className={clsx(
+					isFirstMessage ? styles.firstMessage : styles.message,
+					isUnread && styles.unread,
+				)}
+			>
+				<Avatar avatar={commentator.avatar} width={32} height={32} />
+				<div className={styles.fullWidth}>
+					<div className={styles.messageInfo}>
+						<p className={styles.username}>
+							{commentator.username}
+						</p>
+						<p className={clsx(styles.smallText, styles.date)}>
+							{formatDate(new Date(message.date))}
+						</p>
+					</div>
+					<p
+						className={clsx(
+							styles.smallText,
+							clipText && styles.clipText,
+						)}
+					>
+						{message.text}
+					</p>
+				</div>
+			</div>
+		);
+	},
+);
+
+Message.displayName = "Message";

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

@@ -0,0 +1,143 @@
+.panel {
+	transition: width 0.3s;
+	position: fixed;
+	right: var(--absolute-position-panel-padding);
+	top: 72px;
+	width: 0;
+	height: calc(100% - 142px);
+	overflow: hidden;
+	box-shadow: none;
+	border: none;
+}
+
+.panel.open {
+	width: 320px;
+	visibility: visible;
+	box-shadow: 0px 10px 16px -3px #14151a14;
+	border: 1px solid #dee0e3;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 12px 8px;
+}
+
+.title {
+	font-family: Manrope;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 400;
+}
+
+.close {
+	--padding: 4px;
+	--radius: 12px;
+	--min-width: 28px;
+	--min-height: 28px;
+	color: var(--text-base-primary);
+}
+
+.controls {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 0 8px;
+}
+
+.optionsContainer {
+	font-family: Manrope;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 400;
+	width: 240px;
+	padding: 6px;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	border-radius: 12px;
+	border: 1px solid #dee0e3;
+	background-color: #ffffff;
+	box-shadow: 0px 10px 16px -3px #14151a14;
+}
+
+.optionsPanel {
+	position: absolute;
+	right: -32px;
+}
+
+.btn {
+	font-family: Manrope;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 400;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	border-radius: 6px;
+	padding: 6px;
+	gap: 8px;
+	cursor: pointer;
+}
+
+.btn:hover {
+	background-color: #0a0f290a;
+}
+
+.separator {
+	width: 238px;
+	transform: translateX(-6px);
+	border-top: 1px solid #dee0e3;
+}
+
+.filtersBtn {
+	transform: translateX(-6px);
+	gap: 12px;
+	min-width: 120px;
+	max-width: 160px;
+	color: #0f132499;
+}
+
+.flex {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.scrollContainer {
+	padding: 8px 0;
+	overflow-y: auto;
+	scrollbar-gutter: stable;
+	width: 100%;
+}
+
+.scrollContainer::-webkit-scrollbar {
+	appearance: none;
+	width: 2px;
+}
+
+.scrollContainer::-webkit-scrollbar-button {
+	display: none;
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 2px;
+}
+
+.cards {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 0 8px;
+	max-width: 100%;
+}
+
+.noComments {
+	margin-left: 12px;
+}

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

@@ -0,0 +1,278 @@
+import React, { useRef, useState } from "react";
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import styles from "./CommentsPanel.module.css";
+import { useTranslation } from "react-i18next";
+import { ButtonWithMenu } from "features/UserPanel/Buttons/ButtonWithMenu/ButtonWithMenu";
+import clsx from "clsx";
+import { useCommentsContext } from "entities/comments";
+import { useAppContext } from "features/AppContext";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import { useAccount } from "App/useAccount";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useCommentsPanelContext } from "./CommentsPanelContext";
+import { ToggleMark } from "shared/ui-lib/ToggleMark/ToggleMark";
+import { CommentCard } from "./CommentCard/CommentCard";
+
+export const CommentsPanel: React.FC = () => {
+	const [isOptionsPanelOpen, setIsOptionsPanelOpen] = useState(false);
+	const [isFiltersPanelOpen, setIsFiltersPanelOpen] = useState(false);
+	const [showCommentsFilter, setShowCommentsFilter] = useState<
+		"all" | "replies"
+	>("all");
+	const { t } = useTranslation();
+	const {
+		showResolved,
+		setShowResolved,
+		showComments,
+		setShowComments,
+		enableClusters,
+		setEnableClusters,
+	} = useCommentsContext();
+	const { setIsPanelOpen, isPanelOpen } = useCommentsPanelContext();
+	const { board } = useAppContext();
+	const forceUpdate = useForceUpdate();
+	const optionsPanelRef = useRef<HTMLDivElement>(null);
+	const filtersPanelRef = useRef<HTMLDivElement>(null);
+	const account = useAccount();
+	useAppSubscription({
+		subjects: ["items"],
+		observer: () => {
+			forceUpdate();
+		},
+	});
+
+	const userId = account.info?.id;
+
+	const closePanels = (): void => {
+		setIsOptionsPanelOpen(false);
+		setIsFiltersPanelOpen(false);
+	};
+
+	const clickOutsideRef = useClickOutside(closePanels, [
+		optionsPanelRef,
+		filtersPanelRef,
+	]);
+
+	const comments = board.items.getComments().filter(comment => {
+		if (!comment.getThread().length) {
+			return false;
+		}
+		if (showCommentsFilter === "replies") {
+			return !!comment.getUnreadMessages(userId);
+		}
+		return true;
+	});
+
+	const markAllCommentsAsRead = (): void => {
+		if (!userId) {
+			return;
+		}
+		comments.forEach(comment => {
+			const unreadMessages = comment.getUnreadMessages(userId);
+			if (unreadMessages) {
+				comment.markMessagesAsRead(
+					unreadMessages.map(mes => mes.id),
+					userId,
+				);
+			}
+		});
+		setIsOptionsPanelOpen(false);
+	};
+
+	const handleFiltersBtnClick = (): void => {
+		setIsFiltersPanelOpen(!isFiltersPanelOpen);
+		setIsOptionsPanelOpen(false);
+	};
+
+	const handleOptionsBtnClick = (): void => {
+		setIsFiltersPanelOpen(false);
+		setIsOptionsPanelOpen(!isOptionsPanelOpen);
+	};
+
+	const handleShowCommentsFilterClick = (filter: "all" | "replies"): void => {
+		setShowCommentsFilter(filter);
+		setIsFiltersPanelOpen(false);
+	};
+
+	const toggleShowResolved = (): void => {
+		setShowResolved(!showResolved);
+		setIsFiltersPanelOpen(false);
+	};
+
+	const toggleShowComments = (): void => {
+		setShowComments(!showComments);
+		setIsOptionsPanelOpen(false);
+	};
+
+	const toggleEnableClusters = (): void => {
+		setEnableClusters(!enableClusters);
+		setIsOptionsPanelOpen(false);
+	};
+
+	const canViewResolvedComments: boolean =
+		account.permissions.checkPermissions(
+			"owns",
+			"boards",
+			board.getBoardId(),
+		);
+
+	if (board.getBoardId() === "blank") {
+		return null;
+	}
+	return (
+		<UiPanel
+			style={isPanelOpen ? { padding: "0 4px" } : { padding: "0" }}
+			className={clsx(styles.panel, isPanelOpen && styles.open)}
+			vertical={true}
+			zIndex={5}
+		>
+			<div className={styles.header}>
+				<h3 className={styles.title}>{t("comment.panel.title")}</h3>
+				<UiButton
+					onClick={() => setIsPanelOpen(false)}
+					variant="secondary"
+					className={styles.close}
+				>
+					<Icon iconName="modalCross" width={12} height={12} />
+				</UiButton>
+			</div>
+			<div className={styles.controls}>
+				<ButtonWithMenu
+					ref={filtersPanelRef}
+					button={
+						<button
+							id={"comments-filters"}
+							onClick={handleFiltersBtnClick}
+							className={clsx(styles.btn, styles.filtersBtn)}
+						>
+							{t(
+								`comment.panel.showComments.${showCommentsFilter}`,
+							)}
+							<Icon
+								iconName={
+									isFiltersPanelOpen
+										? "StrokeChevronUp"
+										: "StrokeChevronDown"
+								}
+								width={14}
+								height={14}
+							/>
+						</button>
+					}
+					isOpen={isFiltersPanelOpen}
+				>
+					<div className={styles.optionsContainer}>
+						<button
+							onClick={() => handleShowCommentsFilterClick("all")}
+							className={clsx(
+								styles.btn,
+								showCommentsFilter === "all" && styles.active,
+							)}
+						>
+							{t("comment.panel.showComments.all")}
+						</button>
+						<button
+							onClick={() =>
+								handleShowCommentsFilterClick("replies")
+							}
+							className={clsx(
+								styles.btn,
+								showCommentsFilter === "replies" &&
+									styles.active,
+							)}
+						>
+							{t("comment.panel.showComments.replies")}
+						</button>
+						{canViewResolvedComments && (
+							<>
+								<div className={styles.separator}></div>
+								<button
+									onClick={toggleShowResolved}
+									className={styles.btn}
+								>
+									{t("comment.panel.showResolved")}
+									<ToggleMark isActive={showResolved} />
+								</button>
+							</>
+						)}
+					</div>
+				</ButtonWithMenu>
+				<ButtonWithMenu
+					ref={optionsPanelRef}
+					button={
+						<UiButton
+							id={"comments-options"}
+							onClick={handleOptionsBtnClick}
+							active={isOptionsPanelOpen}
+							variant="secondary"
+							size="sm"
+							style={{ padding: 0 }}
+						>
+							<Icon
+								iconName="GearStroke"
+								width={16}
+								height={16}
+							/>
+						</UiButton>
+					}
+					isOpen={isOptionsPanelOpen}
+				>
+					<div
+						className={clsx(
+							styles.optionsContainer,
+							styles.optionsPanel,
+						)}
+					>
+						<button
+							onClick={toggleShowComments}
+							className={styles.btn}
+						>
+							{t("comment.panel.showCommentsOnBoard")}
+							<ToggleMark isActive={showComments} />
+						</button>
+						<button
+							onClick={toggleEnableClusters}
+							className={styles.btn}
+						>
+							{t("comment.panel.groupComments")}
+							<ToggleMark isActive={enableClusters} />
+						</button>
+						<button
+							onClick={markAllCommentsAsRead}
+							className={styles.btn}
+						>
+							<div className={styles.flex}>
+								<Icon
+									iconName="MarkAsReadComment"
+									width={20}
+									height={20}
+								/>
+								{t("comment.panel.markAllAsRead")}
+							</div>
+						</button>
+					</div>
+				</ButtonWithMenu>
+			</div>
+			<div className={styles.scrollContainer}>
+				{comments.length ? (
+					<div className={styles.cards}>
+						{comments.map(comment => (
+							<CommentCard
+								key={comment.getId()}
+								comment={comment}
+							/>
+						))}
+					</div>
+				) : (
+					<p className={styles.noComments}>
+						You have no unread messages
+					</p>
+				)}
+			</div>
+			<div ref={clickOutsideRef}></div>
+		</UiPanel>
+	);
+};

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

@@ -0,0 +1,37 @@
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+import React, { useState } from "react";
+
+interface Context {
+	isPanelOpen: boolean;
+	setIsPanelOpen: (arg: boolean) => void;
+}
+
+export const CommentsPanelContext = createStrictContext<Context>();
+
+export function useCommentsPanelContext(): Context {
+	return useStrictContext(CommentsPanelContext);
+}
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export const CommentsPanelContextProvider = ({
+	children,
+}: Props): JSX.Element => {
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+
+	return (
+		<CommentsPanelContext.Provider
+			value={{
+				isPanelOpen,
+				setIsPanelOpen,
+			}}
+		>
+			{children}
+		</CommentsPanelContext.Provider>
+	);
+};

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

@@ -0,0 +1,4 @@
+.createComment {
+	width: 340px;
+	z-index: 1;
+}

package/src/entities/comments/CommentsProvider.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { useAppContext } from "../../features/AppContext";
+import { CommentContainer } from "./CommentContainer/CommentContainer";
+import { CreateComment } from "./CreateComment/CreateComment";
+import styles from "./CommentsProvider.module.css";
+import { Cluster } from "./Cluster/Cluster";
+import { useCommentsMerge } from "./useCommentsMerge";
+import { useCommentsContext } from "entities/comments/CommentsContext";
+
+export const CommentsProvider = (): JSX.Element => {
+	const { board } = useAppContext();
+	const { showResolved, showComments, enableClusters, movingComment } =
+		useCommentsContext();
+
+	const forceUpdate = useForceUpdate();
+	const commentToAdd = board.tools.getAddComment()?.comment;
+	let showCreateComment = false;
+
+	useAppSubscription({
+		subjects: ["items", "camera", "tools", "selectionItems", "selection"],
+		observer: () => {
+			forceUpdate();
+		},
+	});
+
+	const comments = board.items.getComments().filter(comment => {
+		const threadLength = comment.getThread().length;
+		if (threadLength === 0) {
+			showCreateComment = comment.getId() === commentToAdd?.getId();
+			return false;
+		}
+		return showResolved ? true : !comment.getResolved();
+	});
+
+	const { clusters, singleComments } = useCommentsMerge(
+		comments.filter(
+			comment =>
+				comment !== movingComment && !comment.transformationRenderBlock,
+		),
+		board.camera.getScale(),
+	);
+
+	if (!showComments) {
+		return <></>;
+	}
+
+	const commentsToShow = enableClusters ? singleComments : comments;
+	if (movingComment) {
+		commentsToShow.push(movingComment);
+	}
+
+	return (
+		<>
+			{commentsToShow.map(comment => {
+				return (
+					<CommentContainer comment={comment} key={comment.getId()} />
+				);
+			})}
+			{showCreateComment && commentToAdd && (
+				<CreateComment
+					className={styles.createComment}
+					comment={commentToAdd}
+				/>
+			)}
+			{enableClusters &&
+				clusters.map(cluster => (
+					<Cluster key={cluster[0].getId()} comments={cluster} />
+				))}
+		</>
+	);
+};

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

@@ -0,0 +1,8 @@
+.form {
+	background: #ffffff;
+	border-radius: 12px;
+}
+
+.createComment {
+	width: 340px;
+}

package/src/entities/comments/CreateComment/CreateComment.tsx

@@ -0,0 +1,66 @@
+import React, { useRef, useState } from "react";
+import { useDomMbr } from "App/useDomMbr";
+import { useAppContext } from "features/AppContext";
+import { Comment } from "microboard-temp";
+import styles from "./CreateComment.module.css";
+import clsx from "clsx";
+import { CommentInput } from "../CommentInput/CommentInput";
+import { useAccount } from "App/useAccount";
+
+interface Props {
+	comment: Comment;
+	className?: string;
+}
+
+export const CreateComment = ({ comment, className }: Props): JSX.Element => {
+	const formRef = useRef<null | HTMLDivElement>(null);
+	const [value, setValue] = useState("");
+	const { app, board } = useAppContext();
+	const account = useAccount();
+	const mbr = useDomMbr({
+		app,
+		board,
+		ref: formRef,
+		targetMbr: comment.getMbr(),
+		subjects: ["camera", "selection"],
+		fit: "threadPanel",
+	});
+
+	const handleSubmit = (): void => {
+		const accountInfo = account.info;
+		if (!accountInfo?.id) {
+			return;
+		}
+		comment.saveMessage(
+			value,
+			accountInfo.name,
+			accountInfo.id,
+			accountInfo.avatar,
+		);
+	};
+
+	const handleReject = (): void => {
+		return board.tools.addComment(true);
+	};
+
+	return (
+		<div
+			ref={formRef}
+			className={clsx(styles.form, className)}
+			style={{
+				position: "absolute",
+				left: mbr.left,
+				top: mbr.top,
+				zIndex: "4",
+			}}
+		>
+			<CommentInput
+				mode="create"
+				value={value}
+				handleReject={handleReject}
+				setValue={setValue}
+				handleSubmit={handleSubmit}
+			/>
+		</div>
+	);
+};