microboard-ui-temp 0.0.3

package/src/entities/comments/Thread/ExtraOptions/ExtraOptions.module.css

@@ -0,0 +1,44 @@
+.container {
+	position: relative;
+}
+
+.panelContainer {
+	position: absolute;
+	top: 100%;
+	padding-top: 8px;
+	z-index: 3;
+}
+
+.panel {
+	width: 100%;
+	padding: 4px !important;
+}
+
+.btn {
+	display: flex;
+	align-items: center;
+	padding: 6px;
+	gap: 6px;
+	background-color: #ffffff;
+	border-radius: 6px;
+	width: 100%;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	text-wrap: nowrap;
+	font-family: Manrope;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.005em;
+}
+
+.btn:hover {
+	background-color: #f7f7f8;
+}
+
+@media (max-width: 568px) {
+	.panelContainer {
+		right: 0;
+	}
+}

package/src/entities/comments/Thread/ExtraOptions/ExtraOptions.tsx

@@ -0,0 +1,127 @@
+import { useAccount } from "App/useAccount";
+import { Comment } from "microboard-temp";
+import React, { useState } from "react";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "../../../../shared/ui-lib/Icon";
+import styles from "./ExtraOptions.module.css";
+import { notify } from "shared/ui-lib/Toast/notify";
+import { useTranslation } from "react-i18next";
+import { getLinkToItem } from "features/ContextPanel/Buttons/RestOptionsMenu/Items/getLinkToItem";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+
+interface Props {
+	comment: Comment;
+	canEdit: boolean;
+}
+
+export const ExtraOptions = ({ comment, canEdit }: Props): JSX.Element => {
+	const [isCursorOnButton, setIsCursorOnButton] = useState(false);
+	const [isCursorOnMenu, setIsCursorOnMenu] = useState(false);
+	const { board } = useAppContext();
+	const account = useAccount();
+	const { t } = useTranslation();
+
+	const userId = account.info?.id;
+
+	const handleRemove = (): void => {
+		board.remove(comment);
+	};
+
+	const handleMarkAsUnread = (): void => {
+		if (!userId) {
+			return;
+		}
+		comment.markThreadAsUnread(userId);
+	};
+
+	const handleMouseLeave = (element: "menu" | "btn"): void => {
+		if (element === "btn") {
+			setIsCursorOnButton(false);
+		}
+		if (element === "menu") {
+			setIsCursorOnMenu(false);
+		}
+	};
+
+	const handleCopyLink = async (): Promise<void> => {
+		try {
+			await navigator.clipboard.writeText(getLinkToItem(comment.getId()));
+			notify({
+				body: t("contextPanel.copyItemLink.success.description"),
+				variant: "success",
+				duration: 3000,
+			});
+		} catch (err) {
+			console.error(err);
+			notify({
+				header: t("contextPanel.copyItemLink.error.title"),
+				body: t("contextPanel.copyItemLink.error.description"),
+				variant: "error",
+			});
+		}
+	};
+
+	return (
+		<div className={styles.container}>
+			<UiButton
+				size="sm"
+				variant="secondary"
+				onMouseEnter={() => setIsCursorOnButton(true)}
+				onMouseLeave={() => handleMouseLeave("btn")}
+				style={{
+					padding: 0,
+					color: "#696B76",
+				}}
+			>
+				<Icon iconName="Dots" width={24} height={24} />
+			</UiButton>
+			{(isCursorOnButton || isCursorOnMenu) && (
+				<div
+					className={styles.panelContainer}
+					onMouseEnter={() => setIsCursorOnMenu(true)}
+					onMouseLeave={() => handleMouseLeave("menu")}
+				>
+					<UiPanel className={styles.panel} vertical={true}>
+						{userId &&
+							!comment.getIsThreadMarkedAsUnread(userId) && (
+								<button
+									className={styles.btn}
+									onClick={handleMarkAsUnread}
+								>
+									<Icon
+										iconName={"MarkAsUnreadComment"}
+										width={20}
+										height={20}
+									/>
+									{t("comment.markAsUnread")}
+								</button>
+							)}
+						<button onClick={handleCopyLink} className={styles.btn}>
+							<Icon
+								iconName={"CopyLink"}
+								width={20}
+								height={20}
+							/>
+							{t("comment.copyLink")}
+						</button>
+						{canEdit && (
+							<button
+								className={styles.btn}
+								onClick={handleRemove}
+							>
+								<Icon
+									style={{ color: "#696B76" }}
+									iconName={"Delete"}
+									width={20}
+									height={20}
+								/>
+								{t("comment.deleteThread")}
+							</button>
+						)}
+					</UiPanel>
+				</div>
+			)}
+		</div>
+	);
+};

package/src/entities/comments/Thread/OptionsPanel/OptionsPanel.module.css

@@ -0,0 +1,32 @@
+.panel {
+	width: 150px;
+	position: absolute;
+	padding: 4px !important;
+}
+
+.btn {
+	display: flex;
+	align-items: center;
+	padding: 6px;
+	background-color: #ffffff;
+	border-radius: 6px;
+	width: 100%;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	font-family: Manrope;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.005em;
+}
+
+.btn:hover {
+	background-color: #f7f7f8;
+}
+
+@media (max-width: 568px) {
+	.panel {
+		transform: translateX(calc(-100% + 20px));
+	}
+}

package/src/entities/comments/Thread/OptionsPanel/OptionsPanel.tsx

@@ -0,0 +1,38 @@
+import React, { CSSProperties, forwardRef } from "react";
+import { UiPanel } from "../../../../shared/ui-lib/UiPanel";
+import styles from "./OptionsPanel.module.css";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+	canRemove: boolean;
+	handleRemove: () => void;
+	setTextUnderEditor: () => void;
+	style: CSSProperties;
+}
+
+export const OptionsPanel = forwardRef<HTMLDivElement, Props>(
+	(
+		{ canRemove, handleRemove, style, setTextUnderEditor }: Props,
+		ref,
+	): JSX.Element => {
+		const { t } = useTranslation();
+
+		return (
+			<UiPanel
+				ref={ref}
+				className={styles.panel}
+				vertical={true}
+				style={style}
+			>
+				{canRemove && (
+					<button className={styles.btn} onClick={handleRemove}>
+						{t("comment.deleteMessage")}
+					</button>
+				)}
+				<button onClick={setTextUnderEditor} className={styles.btn}>
+					{t("comment.editMessage")}
+				</button>
+			</UiPanel>
+		);
+	},
+);

package/src/entities/comments/Thread/ThreadPanel.module.css

@@ -0,0 +1,82 @@
+.panel {
+	width: 420px;
+	padding: 0 !important;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	z-index: 4;
+	max-width: 80dvw;
+}
+
+.header {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px 16px 12px 16px;
+	background-color: #ffffff;
+	position: relative;
+	border-radius: 12px 12px 0 0;
+	z-index: 2;
+}
+
+.noPermission {
+	justify-content: end;
+}
+
+.headerOptions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.threadBtn {
+	width: fit-content;
+	height: fit-content;
+	padding: 6px 12px;
+	border-radius: 10px;
+}
+
+.messages {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: 0 16px 4px 20px;
+	max-height: 60vh;
+	margin-right: 4px;
+	transform: translateY(-8px);
+}
+
+.scrollContainer {
+	width: 100%;
+	overflow-y: auto;
+	scrollbar-gutter: stable;
+}
+
+.scrollContainer::-webkit-scrollbar {
+	appearance: none;
+	width: 4px;
+}
+
+.scrollContainer::-webkit-scrollbar-button {
+	display: none;
+}
+
+.scrollContainer::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 4px;
+}
+
+.createMessage {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	align-items: center;
+	padding: 12px 16px;
+	gap: 12px;
+}
+
+.input {
+	width: 100%;
+}

package/src/entities/comments/Thread/ThreadPanel.tsx

@@ -0,0 +1,298 @@
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import { UiPanel } from "../../../shared/ui-lib/UiPanel/index.ts";
+import styles from "./ThreadPanel.module.css";
+import { Icon } from "../../../shared/ui-lib/Icon/index.ts";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Message } from "./message/Message.tsx";
+import clsx from "clsx";
+import { CommentInput } from "../CommentInput/CommentInput.tsx";
+import { useAppContext } from "features/AppContext.tsx";
+import { Mbr, Comment } from "microboard-temp";
+import { ExtraOptions } from "./ExtraOptions/ExtraOptions.tsx";
+import { OptionsPanel } from "./OptionsPanel/OptionsPanel.tsx";
+import { useCommentsContext } from "../CommentsContext.tsx";
+import { useTranslation } from "react-i18next";
+import { useIntersectionObserver } from "entities/comments/useIntersectionObserver.ts";
+import { Avatar } from "features/UserPanel/Avatar/Avatar.tsx";
+import { useAccount } from "App/useAccount.ts";
+import { useClickOutside } from "shared/lib/useClickOutside.ts";
+import { useScrollToUnreadMessage } from "entities/comments/useScrollToUnreadMessage.ts";
+import { UiSeparator } from "shared/ui-lib/UiSeparator/UiSeparator.tsx";
+
+interface MessageOptionsData {
+	top: number;
+	left: number;
+	messageId: string;
+}
+
+interface Props {
+	comment: Comment;
+	mbr: Mbr;
+}
+
+export const ThreadPanel = forwardRef<HTMLDivElement, Props>(
+	({ comment, mbr }: Props, ref) => {
+		const [value, setValue] = useState("");
+		const { board } = useAppContext();
+		const [messageOptionsData, setMessageOptionsData] =
+			useState<null | MessageOptionsData>(null);
+		const refs = useRef<Record<string, HTMLDivElement>>({});
+		const messageOptionsRef = useRef<HTMLDivElement>(null);
+		const [textUnderEditorId, setTextUnderEditorId] = useState<
+			undefined | string
+		>(undefined);
+		const {
+			setOpenedThreadId,
+			setTargetMessageId,
+			targetMessageId,
+			openedThreadId,
+		} = useCommentsContext();
+		const account = useAccount();
+		const openedThreadIdRef = useRef<string | undefined>(openedThreadId);
+		openedThreadIdRef.current = openedThreadId;
+
+		const threadRef = useClickOutside(
+			() => setOpenedThreadId(undefined),
+			[messageOptionsRef],
+			true,
+		);
+
+		const { t } = useTranslation();
+		const accountInfo = account.info;
+		const userId = accountInfo?.id;
+		const unreadMessages = comment.getUnreadMessages(userId);
+
+		useIntersectionObserver({
+			comment,
+			refs,
+			userId,
+			deps: [unreadMessages && unreadMessages.length],
+		});
+		useScrollToUnreadMessage({ unreadMessages, refs });
+
+		const canRemove =
+			comment.getThread()[0].id !== messageOptionsData?.messageId;
+		const handleRemoveMessage = (id?: string): void => {
+			if (!messageOptionsData && !id) {
+				return;
+			}
+			if (messageOptionsData) {
+				comment.removeMessage(messageOptionsData.messageId);
+			} else if (id) {
+				comment.removeMessage(id);
+			}
+			setMessageOptionsData(null);
+		};
+
+		const handleSetEditor = (): void => {
+			if (!messageOptionsData) {
+				return;
+			}
+			setTextUnderEditorId(messageOptionsData?.messageId);
+			setMessageOptionsData(null);
+		};
+
+		const setRef = (id: string) => (el: HTMLDivElement) => {
+			refs.current[id] = el;
+		};
+
+		const handleMessageOptionsClick = (messageId: string): void => {
+			if (
+				messageOptionsData &&
+				messageId === messageOptionsData.messageId
+			) {
+				return setMessageOptionsData(null);
+			}
+			const { left, top } =
+				refs.current[messageId].getBoundingClientRect();
+			setMessageOptionsData({
+				messageId,
+				left: left - mbr.left,
+				top: top - mbr.top + 26,
+			});
+		};
+
+		useEffect(() => {
+			if (userId && comment.getIsThreadMarkedAsUnread(userId)) {
+				comment.markThreadAsRead(userId);
+			}
+
+			if (targetMessageId && refs.current[targetMessageId]) {
+				refs.current[targetMessageId].scrollIntoView({
+					behavior: "smooth",
+				});
+				setTargetMessageId(undefined);
+			}
+		}, [userId, targetMessageId]);
+
+		const handleClose = (): void => {
+			setOpenedThreadId(undefined);
+		};
+
+		const toggleResolved = (): void => {
+			comment.setResolved(!comment.getResolved());
+		};
+
+		const handleCreateMessage = (): void => {
+			if (!userId) {
+				return;
+			}
+			comment.saveMessage(
+				value,
+				accountInfo?.name || "Unknown",
+				userId,
+				accountInfo?.avatar,
+			);
+			setValue("");
+		};
+
+		const handleEditMessage = (newValue: string, id: string): void => {
+			comment.editMessage(newValue, id);
+		};
+
+		const thread = comment.getThread();
+		const canEditThread: boolean =
+			account.permissions.checkPermissions(
+				"owns",
+				"boards",
+				board.getBoardId(),
+			) || userId === comment.getCommentators()[0].id;
+
+		return (
+			<div ref={threadRef}>
+				<UiPanel className={styles.panel} ref={ref} zIndex={2}>
+					<div
+						className={clsx(
+							styles.header,
+							!canEditThread && styles.noPermission,
+						)}
+					>
+						{canEditThread && (
+							<UiButton
+								className={styles.threadBtn}
+								variant="quaternary"
+								onClick={toggleResolved}
+								size="sm"
+							>
+								{!comment.getResolved() && (
+									<Icon
+										iconName="checkMark"
+										width={20}
+										height={20}
+									/>
+								)}
+								{comment.getResolved()
+									? t("comment.openThread")
+									: t("comment.closeThread")}
+							</UiButton>
+						)}
+						<div className={styles.headerOptions}>
+							<ExtraOptions
+								comment={comment}
+								canEdit={canEditThread}
+							/>
+							<UiButton
+								size="sm"
+								variant="secondary"
+								onClick={handleClose}
+								style={{
+									padding: 0,
+									color: "#696B76",
+								}}
+							>
+								<Icon
+									iconName="modalCross"
+									width={16}
+									height={16}
+								/>
+							</UiButton>
+						</div>
+					</div>
+					<UiSeparator />
+					<div
+						className={clsx(
+							styles.messages,
+							styles.scrollContainer,
+						)}
+					>
+						{thread.map((mes, index) => {
+							if (!mes || !mes.id) {
+								return null;
+							}
+							return (
+								<Message
+									ref={setRef(mes.id)}
+									key={mes.id}
+									text={mes.text}
+									date={mes.date}
+									handleEditMessage={handleEditMessage}
+									id={mes.id}
+									isTextUnderEditor={
+										textUnderEditorId === mes.id
+									}
+									setTextUnderEditor={setTextUnderEditorId}
+									commentator={mes.commentator}
+									handleOptionsClick={() =>
+										handleMessageOptionsClick(mes.id)
+									}
+									handleRemoveMessage={() =>
+										handleRemoveMessage(mes.id)
+									}
+									isShorted={
+										thread[index - 1] &&
+										thread[index - 1].commentator
+											.username ===
+											mes.commentator.username
+									}
+									isOptionsPanelActive={Boolean(
+										messageOptionsData &&
+											messageOptionsData.messageId ===
+												mes.id,
+									)}
+								/>
+							);
+						})}
+					</div>
+					{(userId || userId === 0) && accountInfo?.name && (
+						<>
+							<UiSeparator />
+							<div className={styles.scrollContainer}>
+								<div className={styles.createMessage}>
+									<Avatar
+										avatar={accountInfo?.avatar}
+										width={20}
+										height={20}
+									/>
+									<CommentInput
+										mode="reply"
+										value={value}
+										setValue={setValue}
+										handleSubmit={handleCreateMessage}
+										onInput={() =>
+											comment.subject.publish(comment)
+										}
+									/>
+								</div>
+							</div>
+						</>
+					)}
+					{messageOptionsData && (
+						<OptionsPanel
+							ref={messageOptionsRef}
+							setTextUnderEditor={handleSetEditor}
+							canRemove={canRemove}
+							handleRemove={handleRemoveMessage}
+							style={{
+								position: "absolute",
+								top: messageOptionsData.top,
+								left: messageOptionsData.left,
+							}}
+						/>
+					)}
+				</UiPanel>
+			</div>
+		);
+	},
+);
+
+ThreadPanel.displayName = "ThreadPanel";

package/src/entities/comments/Thread/message/Message.module.css

@@ -0,0 +1,71 @@
+.message {
+	width: 100%;
+	color: #14151a;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	margin-top: 12px;
+}
+
+.shortedMessage {
+	margin-top: 0;
+	gap: 0;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.headerInfo {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.username {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	letter-spacing: -0.005em;
+}
+
+.date {
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 20px;
+	color: #0f132499;
+}
+
+.text {
+	font-size: 18px;
+	font-weight: 500;
+	line-height: 26px;
+	font-family: Manrope;
+	letter-spacing: -0.012em;
+	word-break: break-word;
+}
+
+.dotsBtn {
+	max-width: 20px;
+	max-height: 20px;
+	min-width: 20px;
+	min-height: 20px;
+	padding: 0;
+	border-radius: 4px;
+	color: rgba(105, 107, 118, 1);
+}
+
+.dotsBtn:hover {
+	color: rgba(105, 107, 118, 1);
+}
+
+.invisible {
+	opacity: 0;
+}
+
+.visible {
+	opacity: 1;
+	transform: translateY(4px);
+}