microboard-ui-temp 0.0.3

package/src/entities/account/AuthForm.module.css

@@ -0,0 +1,150 @@
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: stretch;
+	width: 100%;
+	height: 100%;
+	background-color: white;
+}
+
+.form {
+	box-sizing: border-box;
+	border-radius: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 100%;
+}
+
+.link {
+	font-family: "Manrope", "Arial";
+	font-weight: 600;
+	font-size: 14px;
+
+	text-decoration: none;
+	color: #6c7173;
+	align-self: flex-start;
+
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	margin-top: 10px;
+}
+
+.link:hover {
+	text-decoration: underline;
+}
+
+.link:visited {
+	color: #6c7173;
+}
+
+.title {
+	font-family: "Manrope", "Arial";
+	font-weight: 600;
+	text-align: center;
+	margin-bottom: 32px;
+}
+
+.error {
+	color: red;
+}
+
+.button {
+	margin-top: 32px;
+	font-family: "Manrope", "Arial";
+	font-size: 14px;
+	font-weight: 500;
+	width: 100%;
+	height: 40px;
+	border: 1px solid #14151a;
+	border-radius: 12px;
+	background-color: #14151a;
+	color: white;
+	cursor: pointer;
+	outline-color: transparent;
+	box-sizing: border-box;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	gap: 8px;
+}
+
+.button:disabled {
+	border-color: #e9eaec;
+	background-color: #e9eaec;
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.button:disabled:hover {
+	cursor: not-allowed;
+	border-color: #e9eaec;
+	background-color: #e9eaec;
+	color: rgba(10, 15, 41, 0.25);
+}
+
+.button:active {
+	outline: 2px solid rgba(200, 178, 255, 0.5);
+}
+
+.button:hover {
+	background-color: #1f2228;
+}
+
+.forgot {
+	font-weight: 600 !important;
+}
+
+.btns {
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	gap: 12px;
+
+	margin-top: 16px;
+}
+
+.anotherBtns {
+	gap: 16px;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	margin: 0 0 40px;
+}
+
+@media screen and (max-width: 640px) {
+	.title {
+		margin-bottom: 8px;
+	}
+
+	.policy {
+		font-size: 14px;
+		text-align: center;
+
+		margin-bottom: 20px;
+	}
+
+	.policyLink {
+		text-decoration: none;
+	}
+
+	.policyLink::after {
+		content: "";
+		position: absolute;
+		bottom: -3px;
+		left: 0;
+		width: 100%;
+		height: 2px;
+		background-color: transparent;
+	}
+
+	.btns {
+		margin-top: 8px;
+	}
+}

package/src/entities/account/AuthForm.tsx

@@ -0,0 +1,48 @@
+import { GoogleAuthBtn } from "features/GoogleAuthBtn";
+import { LoginWith } from "features/LoginWith/LoginWith";
+import { WalletLoginButton } from "features/WalletLoginButton";
+import React, {
+	type FormEventHandler,
+	type PropsWithChildren,
+	forwardRef,
+} from "react";
+import styles from "./AuthForm.module.css";
+
+type Props = PropsWithChildren<{
+	onSubmit: FormEventHandler;
+	title: string;
+	id: string;
+	showPolicies?: boolean;
+	showAnotherAuthWay?: boolean;
+}>;
+
+export const AuthForm = forwardRef<HTMLFormElement, Props>(
+	(
+		{ onSubmit, title, id, children, showPolicies, showAnotherAuthWay },
+		ref,
+	) => {
+		return (
+			<div className={styles.wrapper}>
+				<form
+					className={styles.form}
+					id={id}
+					onSubmit={onSubmit}
+					ref={ref}
+				>
+					<h1 className={styles.title}>{title}</h1>
+					{children}
+				</form>
+				{showAnotherAuthWay && (
+					<div className={styles.anotherBtns}>
+						<LoginWith />
+						<WalletLoginButton />
+						<GoogleAuthBtn />
+					</div>
+				)}
+			</div>
+		);
+	},
+);
+
+// Set a display name for easier debugging
+AuthForm.displayName = "AuthForm";

package/src/entities/account/AuthGuard.tsx

@@ -0,0 +1,17 @@
+import { useAccount } from "App/useAccount";
+import React from "react";
+import { Navigate, Outlet } from "react-router-dom";
+
+export const AuthGuard: React.FC = () => {
+	const account = useAccount();
+
+	if (!account.isInitialized) {
+		return null;
+	}
+
+	if (account.isLoggedIn) {
+		return <Outlet />;
+	} else {
+		return <Navigate to="/auth/sign-in" />;
+	}
+};

package/src/entities/account/AuthInterceptor.ts

@@ -0,0 +1,21 @@
+import type { Account } from "entities/account";
+import type { HTTPRequestConfig } from "shared/api/base/types";
+
+export function getAuthInterceptor(account: Account) {
+	return async (config: HTTPRequestConfig): Promise<HTTPRequestConfig> => {
+		if (!account.isLoggedIn) {
+			return config;
+		}
+
+		if (account.isTokenExpired && !account.isTokenLoading) {
+			await account.refreshTokens();
+		}
+
+		config.headers = {
+			Authorization: `Bearer ${account.accessToken}`,
+			...config.headers,
+		};
+
+		return config;
+	};
+}

package/src/entities/account/UnauthGuard.tsx

@@ -0,0 +1,17 @@
+import { useAccount } from "App/useAccount";
+import React, { useLayoutEffect } from "react";
+import { Navigate, Outlet } from "react-router-dom";
+
+export function UnauthGuard() {
+	const account = useAccount();
+
+	if (!account.isInitialized) {
+		return null;
+	}
+
+	if (account.isLoggedIn) {
+		return <Navigate to="/" />;
+	} else {
+		return <Outlet />;
+	}
+}

package/src/entities/account/index.ts

@@ -0,0 +1,5 @@
+export { Account } from "./Account";
+export { AuthForm } from "./AuthForm";
+export { AuthGuard } from "./AuthGuard";
+export { UnauthGuard } from "./UnauthGuard";
+export { getAuthInterceptor } from "./AuthInterceptor";

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

@@ -0,0 +1,43 @@
+.cluster {
+	width: 50px;
+	height: 50px;
+	background-color: #ffffff;
+	color: #ffffff;
+	border-radius: 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2px solid #dee0e3;
+	box-shadow: 0px 10px 16px -3px #14151a0d;
+	cursor: pointer;
+	position: absolute;
+	z-index: 1;
+}
+
+.cluster.unread {
+	background-color: #924fe8;
+	color: #924fe8;
+}
+
+.cluster > p {
+	color: #14151a;
+	font-family: "Manrope", Arial;
+	font-size: 24px;
+	font-weight: 700;
+	line-height: 32px;
+	letter-spacing: -0.014em;
+}
+
+.cluster.unread > p {
+	color: #ffffff;
+}
+
+.clusterTippy {
+	position: absolute;
+	top: 100%;
+	z-index: 2;
+}
+
+.cluster:hover {
+	scale: 1.12;
+}

package/src/entities/comments/Cluster/Cluster.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from "react";
+import { useDomMbr } from "App/useDomMbr";
+import { useAppContext } from "features/AppContext";
+import styles from "./Cluster.module.css";
+import { Mbr, Comment } from "microboard-temp";
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import clsx from "clsx";
+import { useAccount } from "App/useAccount";
+
+interface Props {
+	comments: Comment[];
+}
+
+export const Cluster = ({ comments }: Props): JSX.Element => {
+	const clusterRef = useRef<HTMLDivElement>(null);
+	const { board, app } = useAppContext();
+	const account = useAccount();
+
+	const mbr = useDomMbr({
+		app,
+		board,
+		ref: clusterRef,
+		targetMbr: comments[0].getAnchorMbr(),
+		subjects: ["camera", "selectionItem"],
+		fit: "comment",
+	});
+
+	useEffect(() => {
+		if (clusterRef.current) {
+			clusterRef.current.addEventListener(
+				"wheel",
+				app.controller.onWheel,
+				{
+					capture: true,
+					passive: false,
+				},
+			);
+		}
+
+		return () => {
+			if (clusterRef.current) {
+				clusterRef.current.removeEventListener(
+					"wheel",
+					app.controller.onWheel,
+				);
+			}
+		};
+	}, []);
+
+	// TODO const
+	// const mergeDistance = 60;
+
+	const handleClick = (): void => {
+		const mbrToFit = new Mbr();
+		comments.forEach(comment => {
+			const anchor = comment.getAnchorPoint();
+			if (anchor.x > mbrToFit.right || mbrToFit.right === 0) {
+				mbrToFit.right = anchor.x;
+			}
+			if (anchor.x < mbrToFit.left || mbrToFit.left === 0) {
+				mbrToFit.left = anchor.x;
+			}
+			if (anchor.y > mbrToFit.bottom || mbrToFit.bottom === 0) {
+				mbrToFit.bottom = anchor.y;
+			}
+			if (anchor.y < mbrToFit.top || mbrToFit.top === 0) {
+				mbrToFit.top = anchor.y;
+			}
+		});
+		mbrToFit.right = mbrToFit.right + mbrToFit.getWidth();
+		mbrToFit.left = mbrToFit.left - mbrToFit.getWidth();
+		mbrToFit.top = mbrToFit.top - mbrToFit.getHeight();
+		mbrToFit.bottom = mbrToFit.bottom + mbrToFit.getHeight();
+		board.camera.zoomToFit(mbrToFit);
+	};
+
+	const hasUnreadMessages = comments.some(comment =>
+		comment.getUnreadMessages(account.info?.id),
+	);
+
+	return (
+		<div
+			ref={clusterRef}
+			onClick={handleClick}
+			className={clsx(styles.cluster, hasUnreadMessages && styles.unread)}
+			style={{
+				left: mbr.left,
+				top: mbr.top,
+			}}
+		>
+			<p>{comments.length}</p>
+			<Icon
+				width={18}
+				height={8}
+				iconName={"CommentTippy"}
+				className={styles.clusterTippy}
+			/>
+		</div>
+	);
+};

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

@@ -0,0 +1,51 @@
+.comment {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 32px;
+	border-radius: 6px;
+	border: 2px solid #dee0e3;
+	padding: 6px;
+	background-color: #ffffff;
+	color: #ffffff;
+	z-index: 1;
+	cursor: pointer;
+	box-shadow: 0px 10px 16px -3px #14151a0d;
+}
+
+.unread {
+	background-color: #924fe8;
+	color: #924fe8;
+}
+
+.commentTippy {
+	position: absolute;
+	top: 100%;
+	z-index: 2;
+}
+
+.badge {
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: #924fe8;
+	position: absolute;
+	right: -8px;
+	top: -8px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #ffffff;
+	font-family: Manrope;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 16px;
+}
+
+.badgeDot {
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	background-color: #ffffff;
+}

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

@@ -0,0 +1,232 @@
+import React, { TouchEventHandler, useEffect, useRef, useState } from "react";
+import { useDomMbr } from "App/useDomMbr.ts";
+import { useAppContext } from "features/AppContext.tsx";
+import { Icon } from "../../../shared/ui-lib/Icon/index.ts";
+import styles from "./CommentContainer.module.css";
+import clsx from "clsx";
+import { ThreadPanel } from "../Thread/ThreadPanel.tsx";
+import { useCommentsContext } from "../CommentsContext.tsx";
+import { useAppSubscription } from "App/useBoardSubscription.ts";
+import { useForceUpdate } from "shared/lib/useForceUpdate.ts";
+import { Point, Comment } from "microboard-temp";
+import { CommentPreview } from "./CommentPreview/CommentPreview.tsx";
+import { Avatar } from "features/UserPanel/Avatar/Avatar.tsx";
+import { useAccount } from "App/useAccount.ts";
+
+interface Props {
+	comment: Comment;
+}
+
+export const CommentContainer = ({ comment }: Props) => {
+	const commentContainerRef = useRef<HTMLDivElement | null>(null);
+	const threadPanelRef = useRef<HTMLDivElement | null>(null);
+	const commentRef = useRef<HTMLDivElement | null>(null);
+	const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+	const initialCommentPosition = useRef<Point>(comment.getAnchorPoint());
+	const { app, board } = useAppContext();
+	const {
+		openedThreadId,
+		setOpenedThreadId,
+		setMovingComment,
+		movingComment,
+	} = useCommentsContext();
+	const movingCommentRef = useRef<Comment | null>(movingComment);
+	const isThreadOpen = openedThreadId === comment.getId();
+	const account = useAccount();
+
+	const mbr = useDomMbr({
+		app,
+		board,
+		ref: isThreadOpen ? threadPanelRef : commentContainerRef,
+		targetMbr: comment.getAnchorMbr(),
+		subjects: ["camera", "selectionItem", "items"],
+		fit: isThreadOpen ? "threadPanel" : "comment",
+	});
+	const forceUpdate = useForceUpdate();
+
+	useAppSubscription({
+		subjects: ["tools", "pointer", "items", "selectionItems", "selection"],
+		observer: () => {
+			const select = board.tools.getSelect();
+			if (movingCommentRef.current && select && !select.isLeftDown) {
+				setMovingComment(null);
+				movingCommentRef.current = null;
+				if (
+					initialCommentPosition.current.x ===
+						comment.getAnchorPoint().x &&
+					initialCommentPosition.current.y ===
+						comment.getAnchorPoint().y
+				) {
+					return setOpenedThreadId(comment.getId());
+				}
+			}
+			forceUpdate();
+		},
+	});
+
+	const commentators = comment.getCommentators();
+	const width =
+		12 + 24 + 18 * (commentators.length > 3 ? 2 : commentators.length - 1);
+
+	useEffect(() => {
+		if (commentRef.current) {
+			commentRef.current.addEventListener(
+				"wheel",
+				app.controller.onWheel,
+				{
+					capture: true,
+					passive: false,
+				},
+			);
+		}
+
+		return () => {
+			if (commentRef.current) {
+				commentRef.current.removeEventListener(
+					"wheel",
+					app.controller.onWheel,
+				);
+			}
+		};
+	}, [isThreadOpen]);
+
+	const openPreview = () => {
+		if (!movingComment) {
+			setIsPreviewOpen(true);
+		}
+	};
+
+	const closePreview = () => {
+		if (!movingComment) {
+			setIsPreviewOpen(false);
+		}
+	};
+
+	const handleMouseUp = () => {
+		setOpenedThreadId(comment.getId());
+	};
+
+	const handleMouseDown = (
+		e: MouseEvent | TouchEventHandler<HTMLDivElement>,
+	) => {
+		if ("touches" in e) {
+			return;
+		}
+
+		setIsPreviewOpen(false);
+		board.selection.removeAll();
+
+		if (isThreadOpen || (e as MouseEvent).button === 2) {
+			return;
+		}
+		const select = board.tools.getSelect();
+		if (select) {
+			const commentAnchor = comment.getAnchorPoint();
+			comment.setItemToFollow(undefined);
+			setMovingComment(comment);
+			movingCommentRef.current = comment;
+			select.leftButtonDown(comment);
+			initialCommentPosition.current = commentAnchor;
+			setIsPreviewOpen(false);
+			board.pointer.pointTo(commentAnchor.x, commentAnchor.y);
+		}
+	};
+
+	const userId = account.info?.id;
+	const unreadMessages = comment.getUnreadMessages(userId);
+	const isUnread = Boolean(
+		unreadMessages || (userId && comment.getIsThreadMarkedAsUnread(userId)),
+	);
+
+	const zIndex = isThreadOpen ? 3 : isPreviewOpen ? 2 : 1;
+
+	return (
+		<div
+			ref={commentContainerRef}
+			style={{
+				width: "fit-content",
+				height: "fit-content",
+				position: "fixed",
+				zIndex,
+				left: mbr.left,
+				top: mbr.top,
+				pointerEvents: movingComment ? "none" : "auto",
+			}}
+			id={`comment-${comment.getId()}`}
+		>
+			{isThreadOpen ? (
+				<ThreadPanel comment={comment} ref={threadPanelRef} mbr={mbr} />
+			) : (
+				<div
+					ref={commentRef}
+					onMouseEnter={openPreview}
+					onMouseLeave={closePreview}
+					onMouseDown={handleMouseDown}
+					onTouchStart={handleMouseDown}
+					onTouchEnd={handleMouseUp}
+					onMouseUp={handleMouseUp}
+				>
+					<div
+						className={clsx(
+							styles.comment,
+							isUnread && styles.unread,
+						)}
+						style={{
+							width,
+						}}
+					>
+						{!comment.getResolved() ? (
+							commentators
+								.slice(0, 3)
+								.map((commentator, index) => {
+									return (
+										<Avatar
+											avatar={commentator.avatar}
+											key={index}
+											style={{
+												border: "2px solid #ffffff",
+												boxSizing: "unset",
+												marginLeft:
+													index > 0 ? "-6px" : 0,
+											}}
+										/>
+									);
+								})
+						) : (
+							<Icon
+								iconName={"checkMark"}
+								width={20}
+								height={20}
+							/>
+						)}
+						<CommentPreview
+							isOpen={isPreviewOpen}
+							handleClick={() =>
+								setOpenedThreadId(comment.getId())
+							}
+							commentators={commentators}
+							firstMessage={comment.getThread()[0]}
+							messagesCount={comment.getThread().length - 1}
+						/>
+						{isUnread && (
+							<div className={styles.badge}>
+								{userId &&
+								comment.getIsThreadMarkedAsUnread(userId) ? (
+									<div className={styles.badgeDot}></div>
+								) : (
+									unreadMessages?.length
+								)}
+							</div>
+						)}
+						<Icon
+							width={18}
+							height={8}
+							iconName={"CommentTippy"}
+							className={styles.commentTippy}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};