microboard-ui-temp 0.0.3

package/src/features/Presence/PresenceUsers/PresenceUsers.module.css

@@ -0,0 +1,366 @@
+.wrapper {
+	padding: 0 12px;
+}
+
+.container {
+	/* background-color: #1a1a1a; */
+	border-radius: 8px;
+	/* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
+	padding: 9px 0 9px 0;
+	display: flex;
+}
+
+.userList {
+	display: flex;
+	align-items: center;
+	/* gap: 4px; */
+}
+
+.userWrapper {
+	position: relative;
+	margin-left: -2px;
+	cursor: pointer;
+	background-color: white;
+	border-radius: 50%;
+}
+
+.usersOverflowWrapper {
+	background-color: #e9eaec;
+	border-radius: 1000px;
+	height: 32px;
+	margin-left: -24px;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 0 6px 0 0;
+	font-weight: 500;
+	outline: 1px solid #e9eaec;
+	cursor: pointer;
+}
+
+.usersOverflowGap {
+	width: 26px;
+	height: 24px;
+}
+
+.usersOverflowCounter {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.userList > .userWrapper:nth-child(n) {
+	z-index: calc(100 + var(--index));
+}
+
+.userWrapper:not(:first-child) {
+	margin-left: -8px;
+}
+
+.userAvatar {
+	position: relative;
+	box-sizing: border-box;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	border: 2px solid transparent;
+	background-color: #ddd4fd;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #14151a;
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.userAvatar > img {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.trackedUserOverlay {
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.idle {
+	opacity: 50%;
+}
+
+.userCounter {
+	color: #14151a;
+	background-color: #f7f7f8;
+	border: 2px solid #dee0e3;
+}
+
+.selectedAvatar {
+	/* border: 2px solid #22c55e; */
+	/* outline: solid 2px #22c55e;
+	outline-offset: 2px; */
+}
+
+.tooltip {
+	position: absolute;
+	bottom: -48px;
+	right: 0;
+	display: none;
+	background-color: #0b0c0e;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	color: #ffffff;
+	font-size: 12px;
+	line-height: 16px;
+	padding: 4px 8px;
+	border-radius: 6px;
+	white-space: nowrap;
+}
+
+.tippy {
+	position: absolute;
+	display: none;
+	bottom: -29px;
+	right: 10px;
+}
+
+.userWrapper:hover .tooltip {
+	display: block;
+}
+
+.userWrapper:hover .tippy {
+	display: block;
+}
+
+.toggleButton {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background-color: #924fe8;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-left: 4px;
+	cursor: pointer;
+	border: none;
+}
+
+.toggleButton:hover {
+	background-color: #1f2228;
+}
+
+.toggleButton:focus {
+	outline: none;
+	ring: 2px solid #525252;
+}
+
+.dropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	margin-top: 8px;
+	width: 240px;
+	max-width: 296px;
+	overflow: auto;
+	background-color: white;
+	border-radius: 8px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	padding: 4px 0;
+}
+
+.dropdownItem {
+	padding: 8px 12px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	cursor: pointer;
+}
+
+.dropdownItem:hover {
+	background-color: #ececec;
+}
+
+.dropdownAvatar {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	font-size: 12px;
+}
+
+.dropdownSelectedAvatar {
+	border: 2px solid #22c55e;
+}
+
+.userName {
+	color: #1f2228;
+	font-size: 14px;
+}
+
+.selectedIndicator {
+	margin-left: auto;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: #22c55e;
+}
+
+.followingCounter {
+	position: absolute;
+	top: 32px;
+	left: 0;
+	z-index: 1000;
+}
+
+.followingCounterIcon {
+	display: flex;
+	gap: 4px;
+	padding: 2px 6px;
+	background-color: #f48e2f;
+	border-radius: 500px;
+	color: white;
+	font-size: 12px;
+	z-index: 1000;
+	cursor: pointer;
+}
+
+.followersTooltip {
+	position: absolute;
+	width: 205px;
+	padding: 12px 16px;
+	display: none;
+	flex-direction: column;
+
+	top: 32px;
+	right: 0px;
+
+	background-color: #0b0c0e;
+	border-radius: 8px;
+	font-size: 12px;
+}
+
+.followersMe {
+	color: white;
+}
+
+.followersBoard {
+	display: block;
+	color: rgba(255, 255, 255, 0.6);
+}
+
+.followersTooltipTitle {
+	color: #1f2228;
+	font-size: 14px;
+	font-weight: 500;
+}
+
+.followersHr {
+	margin-top: 8px;
+	width: 100%;
+	height: 1px;
+	background-color: rgba(255, 255, 255, 0.18);
+}
+
+.followersList {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-top: 8px;
+}
+
+.followersItem {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
+	color: white;
+}
+
+.followersVisible {
+	display: flex;
+}
+
+.btn {
+	padding: 0 8px;
+	height: 32px;
+	margin-left: 8px;
+}
+
+.shareModal {
+	width: 100%;
+	/* padding: 12px 16px; */
+	background-color: white;
+	border-radius: 12px;
+	/* border: 1px solid var(--border-action-normal); */
+	/* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */
+	display: flex;
+	flex-direction: column;
+	/* gap: 12px; */
+	padding: 6px 10px 10px;
+}
+
+.shareModalSearchIcon {
+	color: #696b76;
+}
+
+.shareModal input {
+	color: #14151a;
+}
+
+.shareModal input::placeholder {
+	color: #14151a;
+}
+
+.shareUser {
+	display: flex;
+	gap: 8px;
+	padding: 6px 8px;
+	align-items: center;
+
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 500;
+
+	position: relative;
+}
+
+.shareUserPic {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	color: white;
+	cursor: pointer;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-transform: uppercase;
+	flex-shrink: 0;
+}
+
+.shareEye {
+	color: black;
+	z-index: 5;
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 14px;
+	left: 16px;
+}
+
+.shareList {
+	/* border-bottom: 1px solid #dee0e3; */
+	max-height: 350px;
+	padding-bottom: 5px;
+	margin: 6px 0 7px 0;
+}

package/src/features/Presence/PresenceUsers/PresenceUsers.tsx

@@ -0,0 +1,239 @@
+import { App } from "App";
+import { useAccount } from "App/useAccount";
+import {
+	Presence,
+	PRESENCE_CLEANUP_IDLE_TIMER,
+	PresenceUser,
+} from "microboard-temp";
+import clsx from "clsx";
+import { useCommentsPanelContext } from "entities/comments/CommentsPanel/CommentsPanelContext";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { UserPic } from "features/UserPanel/UserPic/UserPic";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { getEmailPrefix } from "shared/lib/getEmailPrefix";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import { EyeIcon } from "./EyeIcon";
+import { PresenceUserAvatar } from "./PresenceUserAvatar";
+import styles from "./PresenceUsers.module.css";
+
+export interface User {
+	id: string;
+	name: string;
+	color: string;
+	avatar: string | null;
+	idle: boolean;
+}
+
+interface Props {
+	app: App;
+}
+
+export const FollowingUsersCount: React.FC<{
+	followers: PresenceUser[];
+}> = ({ followers }) => {
+	const { t } = useTranslation();
+	const [isOpen, setIsOpen] = useState(false);
+	const account = useAccount();
+	const tooltipRef = useClickOutside(() => {
+		setIsOpen(false);
+	});
+	if (!followers.length) {
+		return null;
+	}
+
+	return (
+		<div className={styles.followingCounter}>
+			<div
+				className={styles.followingCounterIcon}
+				onMouseDown={ev => {
+					ev.stopPropagation();
+				}}
+				onClick={() => {
+					if (isOpen) {
+						return;
+					}
+					setIsOpen(!isOpen);
+				}}
+			>
+				<EyeIcon fill={"white"} />
+				<span>{followers.length}</span>
+			</div>
+			<div
+				ref={tooltipRef}
+				className={clsx(
+					styles.followersTooltip,
+					isOpen && styles.followersVisible,
+				)}
+			>
+				<p className={styles.followersMe}>
+					{account.info?.email} {t("presence.(you)")}
+				</p>
+				<span className={styles.followersBoard}>
+					{t("presence.yourBoard")}
+				</span>
+				<div className={styles.followersHr} />
+				<div className={styles.followersList}>
+					{followers.map(follower => (
+						<span
+							key={follower.userId}
+							className={styles.followersItem}
+						>
+							{follower.nickname} {t("presence.following")}
+						</span>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+const USERS_IN_ROW = 3;
+
+export const PresenceUsers: React.FC<Props> = () => {
+	const { board } = useAppContext();
+	const [selectedUsers, setSelectedUsers] = useState<Set<string>>(new Set());
+	const [users, setUsers] = useState<User[]>([]);
+	const [followers, setFollowers] = useState<PresenceUser[]>([]);
+	const [trackedUser, setTrackedUser] = useState<PresenceUser | null>(null);
+	const [displayUsers, setDisplayUsers] = useState(users);
+	const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
+	const account = useAccount();
+	const { setIsPanelOpen } = useCommentsPanelContext();
+
+	const needsCollapse = users.length >= 3;
+	useEffect(() => {
+		const sortedUsers = [...users]
+			.sort((first, second) =>
+				selectedUsers.has(first.id) === selectedUsers.has(second.id)
+					? 0
+					: selectedUsers.has(first.id)
+						? -1
+						: 1,
+			)
+			.sort((first, second) =>
+				first.idle === second.idle ? 0 : first.idle ? 1 : -1,
+			);
+
+		setDisplayUsers(sortedUsers.slice(0, USERS_IN_ROW));
+	}, [users, selectedUsers]);
+
+	const selectUser = (userId: string): void => {
+		if (board.presence.trackedUser?.userId === userId) {
+			board.presence.disableTracking();
+			setSelectedUsers(new Set([]));
+			return;
+		}
+		board.presence.enableTracking(userId);
+		setSelectedUsers(new Set([userId]));
+	};
+
+	const updateUsers = (presence: Presence): void => {
+		const now = Date.now();
+		const pUsers = presence
+			.getUsers(board.getBoardId(), true)
+			.map(user => ({
+				id: user.userId,
+				hardId: user.hardId,
+				name: user.nickname,
+				color: user.color,
+				avatar: user.avatar,
+				idle: user.lastActivity < now - PRESENCE_CLEANUP_IDLE_TIMER,
+			}));
+
+		const uniqueUsersByHardId = [
+			...new Map(
+				pUsers
+					.filter(user => user.hardId !== null)
+					.map(user => [user.hardId, user]),
+			).values(),
+			...pUsers.filter(user => user.hardId === null),
+		];
+
+		setUsers(uniqueUsersByHardId);
+
+		setFollowers(board.presence.getFollowers());
+	};
+
+	useEffect(() => {
+		const observer = (presence: Presence): void => {
+			updateUsers(presence);
+			setTrackedUser(presence.trackedUser || null);
+		};
+
+		board.presence.subject.subscribe(observer);
+
+		return () => {
+			board.presence.subject.unsubscribe(observer);
+		};
+	}, [board]);
+
+	useEffect(() => {
+		updateUsers(board.presence);
+	}, [board.getInterfaceType()]);
+
+	return (
+		<div className={styles.wrapper}>
+			<div className={styles.container}>
+				<div className={styles.userList}>
+					{displayUsers.map((user, index) => (
+						<PresenceUserAvatar
+							key={user.id}
+							user={user}
+							trackedUser={trackedUser}
+							index={index}
+							onClick={() => {}}
+						/>
+					))}
+
+					<UserPic
+						className={styles.userWrapper}
+						style={{ zIndex: 1000 }}
+						followers={followers}
+						presenceUsers={users}
+						email={
+							account.info?.name ??
+							getEmailPrefix(
+								account.info?.email ?? "",
+								"Anonymous",
+							)
+						}
+						setIsDropdownOpen={setIsUserDropdownOpen}
+						isDropdownOpen={isUserDropdownOpen}
+					/>
+					{needsCollapse && (
+						<button
+							onClick={event => {
+								event.stopPropagation();
+								if (!isUserDropdownOpen) {
+									setIsUserDropdownOpen(true);
+									setIsPanelOpen(false);
+								} else {
+									setIsUserDropdownOpen(false);
+									setIsPanelOpen(false);
+								}
+							}}
+							style={
+								{
+									"--index": displayUsers.length,
+								} as React.CSSProperties
+							}
+							className={styles.usersOverflowWrapper}
+						>
+							<div className={styles.usersOverflowGap} />
+							<div className={styles.usersOverflowCounter}>
+								<span>{users.length}</span>
+								<Icon
+									iconName="StrokeChevronDown"
+									width={11}
+									height={6}
+								/>
+							</div>
+						</button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};

package/src/features/Presence/PresenceUsers/UserAvatar.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import clsx from "clsx";
+import { rgbToRgba } from "microboard-temp";
+import styles from "./PresenceUsers.module.css";
+import { EyeIcon } from "./EyeIcon";
+
+interface Props {
+	user: {
+		id: string;
+		name: string;
+		color: string;
+		avatar: string | null;
+		idle: boolean;
+	};
+	trackedUser: { userId: string } | null;
+	index: number;
+	onClick: () => void;
+}
+
+const TippySvg: React.FC = () => {
+	return (
+		<svg
+			width="14"
+			height="4"
+			viewBox="0 0 14 4"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M6.9372 0C6.9372 0 3.40535 3.99848 0.0980963 3.99963C-1.46344 4.00017 16.1695 4.00007 13.7763 3.99963C10.2587 3.99898 6.9372 0 6.9372 0Z"
+				fill="#0B0C0E"
+			/>
+		</svg>
+	);
+};
+
+export const UserAvatar: React.FC<Props> = ({
+	user,
+	trackedUser,
+	index,
+	onClick,
+}) => {
+	const isTracked = trackedUser?.userId === user.id;
+
+	return (
+		<div
+			className={styles.userWrapper}
+			style={{ "--index": index } as React.CSSProperties}
+			onClick={onClick}
+		>
+			<div
+				className={clsx(
+					styles.userAvatar,
+					isTracked ? styles.selectedAvatar : "",
+					user.idle && !isTracked ? styles.idle : "",
+				)}
+				style={{
+					borderColor: user.color,
+					backgroundColor: user.avatar
+						? undefined
+						: rgbToRgba(user.color, 0.5),
+				}}
+			>
+				{user.avatar ? (
+					<img
+						src={user.avatar}
+						width={30}
+						height={30}
+						alt={user.name}
+					/>
+				) : (
+					user.name.charAt(0)
+				)}
+				{isTracked && (
+					<div
+						className={styles.trackedUserOverlay}
+						style={{
+							backgroundColor:
+								rgbToRgba(user.color, 0.5) || user.color,
+						}}
+					>
+						<EyeIcon />
+					</div>
+				)}
+			</div>
+			<div className={styles.tooltip}>{user.name}</div>
+			<div className={styles.tippy}>
+				<TippySvg />
+			</div>
+		</div>
+	);
+};

package/src/features/Presence/PresenceUsers/mock.ts

@@ -0,0 +1,34 @@
+import { User } from "./PresenceUsers";
+
+export const mockUsers: User[] = [
+	{
+		id: "1",
+		name: "John Doe",
+		color: "rgb(71,120,245)",
+		avatar: null,
+	},
+	{
+		id: "2",
+		name: "Jane Doe",
+		color: "rgb(244,142,47)",
+		avatar: null,
+	},
+	{
+		id: "3",
+		name: "Bob Smith",
+		color: "rgb(38,189,108)",
+		avatar: null,
+	},
+	{
+		id: "4",
+		name: "Alice Johnson",
+		color: "rgb(230,72,61)",
+		avatar: null,
+	},
+	{
+		id: "5",
+		name: "Emily Davis",
+		color: "rgb(146,79,232)",
+		avatar: null,
+	},
+];