microboard-ui-temp 0.0.3

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

@@ -0,0 +1,72 @@
+.wrapper {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	border: 2px solid transparent;
+	background-color: rgba(200, 200, 200, 0.2);
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	overflow: hidden;
+	pointer-events: none;
+	z-index: 102;
+}
+
+.header {
+	color: #fff;
+	pointer-events: auto;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	align-items: center;
+	gap: 10px;
+	padding: 4px 6px;
+	font-family: Arial, sans-serif;
+	font-size: 12px;
+	display: flex;
+	position: fixed;
+	bottom: 2px;
+	font-weight: 700;
+	min-height: 28px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.stop {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	color: #fff;
+	cursor: pointer;
+	background: #0000004f;
+	border: none;
+	border-radius: 4px;
+	padding: 5px 10px;
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.stop:hover {
+	background: #e04e54;
+}
+
+.svgContainer {
+}
+
+.svgLeft {
+	position: absolute;
+	top: 4px;
+	left: -11px;
+	transform: scale(3);
+}
+
+.svgRight {
+	position: absolute;
+	top: 4px;
+	right: -11px;
+	transform: scale(3);
+}

package/src/features/Presence/UserTracking/UserTracking.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import styles from "./UserTracking.module.css";
+import { Presence, PresenceUser, Board } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+	board: Board;
+}
+
+export const UserTracking: React.FC<Props> = ({ board }) => {
+	const { t } = useTranslation();
+	const [trackedUser, setTrackedUser] = useState<PresenceUser | null>(null);
+
+	const onStopFollowing = (): void => {
+		board.presence.disableTracking();
+	};
+
+	useEffect(() => {
+		const observer = (presence: Presence): void => {
+			if (presence.trackedUser) {
+				const updatedUser = presence.users.get(
+					presence.trackedUser.userId,
+				);
+				if (updatedUser) {
+					setTrackedUser(updatedUser);
+				} else {
+					setTrackedUser(presence.trackedUser);
+				}
+			} else {
+				setTrackedUser(null);
+			}
+		};
+		board.presence.subject.subscribe(observer);
+
+		return () => {
+			board.presence.subject.unsubscribe(observer);
+		};
+	}, []);
+
+	if (!trackedUser) {
+		return null;
+	}
+
+	return (
+		<div
+			className={styles.wrapper}
+			style={{ borderColor: trackedUser.color }}
+		>
+			<div
+				className={styles.header}
+				style={{
+					backgroundColor: trackedUser.color || "#fff",
+				}}
+			>
+				<span>
+					{t("presence.followingUser")}{" "}
+					{trackedUser.nickname === "Anonymous"
+						? t("presence.anonymous")
+						: trackedUser.nickname}
+				</span>
+				<button className={styles.stop} onClick={onStopFollowing}>
+					{t("presence.stop")}
+				</button>
+			</div>
+		</div>
+	);
+};

package/src/features/ProfileSettingsModal/ProfileSettingsModal.module.css

@@ -0,0 +1,100 @@
+.heading {
+	font-size: 48px;
+	font-weight: 600;
+}
+
+.email {
+	font-family: Manrope;
+	font-size: 16px;
+	font-weight: 600;
+}
+
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	align-items: center;
+	padding: 32px 64px;
+}
+
+.avatar {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.avatarBtns {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.avatarBtn {
+	padding: 6px 14px;
+}
+
+.inputs {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	width: 100%;
+	gap: 16px;
+}
+
+.btns {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.icon {
+	display: grid;
+	place-items: center;
+	color: #696b76;
+}
+
+.btn {
+	align-self: flex-start;
+	padding: 6px 12px;
+}
+
+.newsletter {
+	font-family: "Manrope";
+	font-size: 14px;
+	color: #6f717c;
+}
+
+.newsletterLink {
+	color: #4778f5;
+	transition: all 0.35s;
+}
+
+.newsletterLink::after {
+	background-color: #4778f5;
+	height: 1px;
+	bottom: 1px;
+	transition: all 0.35s;
+}
+
+.newsletterLink:hover:after {
+	background-color: #ded1ff;
+	height: 1px;
+	bottom: 1px;
+}
+
+@media screen and (max-width: 1028px) {
+	.container {
+		padding: 16px;
+	}
+	.heading {
+		font-size: 24px;
+		align-self: flex-start;
+	}
+}
+
+.cryptoWallet {
+	align-self: flex-start;
+	font-size: 14px;
+}

package/src/features/ProfileSettingsModal/ProfileSettingsModal.tsx

@@ -0,0 +1,333 @@
+import { useAccount } from "App/useAccount";
+import { CHANGE_PASSWORD_MODAL } from "features/ChangePasswordModal";
+import { ChangePassword } from "features/UserPanel/icons/ChangePassword";
+import { Logout } from "features/UserPanel/icons/Logout";
+import { UserAvatar } from "features/UserPanel/UserAvatar/UserAvatar";
+import { USER_PLAN_MODAL_ID } from "features/UserPlan";
+import React, {
+	ReactElement,
+	useCallback,
+	useRef,
+	useState,
+	type ChangeEventHandler,
+	type KeyboardEventHandler,
+	type MouseEventHandler,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { debounce } from "shared/lib/debounce";
+import { Checkbox } from "shared/ui-lib/Checkbox";
+import { Icon } from "shared/ui-lib/Icon";
+import { Input } from "shared/ui-lib/Input";
+import { OuterLink } from "shared/ui-lib/OuterLink";
+import { notify } from "shared/ui-lib/Toast";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+import styles from "./ProfileSettingsModal.module.css";
+
+export const PROFILE_SETTINGS_MODAL_ID = Symbol("profileSettingsModal");
+const MAX_AVATAR_SIZE = 10 * 1024 * 1024; // 10MB
+const ACCEPTED_AVATAR_TYPES = ["image/jpeg", "image/png", "image/svg+xml"];
+
+export function ProfileSettingsModal(): ReactElement {
+	// const isMediaMatches = useMediaQuery("(max-width: 1170px)");
+	const account = useAccount();
+	const [name, setName] = useState(() => account.info?.name ?? "");
+	const [updateState, setUpdateState] = useState<
+		"idle" | "error" | "loading" | "success"
+	>("idle");
+	const { openModal, closeModal } = useUiModalContext();
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const avatarInputRef = useRef<HTMLInputElement>(null);
+	const setIdleTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+	const abortController = useRef(new AbortController());
+	const isEmailExist = Boolean(account.info?.email);
+
+	const debouncedChangeInfo = useCallback(
+		debounce(async (newName: string) => {
+			setUpdateState("loading");
+			await account.changeInfo(
+				{ name: newName },
+				abortController.current.signal,
+			);
+			setUpdateState("success");
+
+			setIdleTimeoutRef.current = setTimeout(() => {
+				setUpdateState("idle");
+			}, 3000);
+		}, 2000),
+		[account],
+	);
+
+	const handleNameChange: ChangeEventHandler<HTMLInputElement> = ev => {
+		ev.stopPropagation();
+		abortController.current.abort();
+		abortController.current = new AbortController();
+		const newName = ev.target.value;
+		setUpdateState("idle");
+		setName(newName);
+		if (setIdleTimeoutRef.current) {
+			clearTimeout(setIdleTimeoutRef.current);
+		}
+		debouncedChangeInfo(newName, account.info?.newsletter);
+	};
+
+	const debouncedChangeNewsletter = useCallback(
+		debounce(async (newsletter: boolean) => {
+			await account.changeNewsletter(
+				{ newsletter },
+				abortController.current.signal,
+			);
+		}, 2000),
+		[account],
+	);
+
+	const handleNewsletterChange = (_newsletter: boolean): void => {
+		abortController.current.abort();
+		abortController.current = new AbortController();
+		if (setIdleTimeoutRef.current) {
+			clearTimeout(setIdleTimeoutRef.current);
+		}
+		debouncedChangeNewsletter(!account.info?.newsletter);
+	};
+
+	const handleOpenPasswordChange: MouseEventHandler = ev => {
+		ev.stopPropagation();
+		openModal(CHANGE_PASSWORD_MODAL);
+	};
+
+	const handleAddEmail: MouseEventHandler = ev => {
+		ev.stopPropagation();
+		navigate("/bind-email/add-email" + window.location.search);
+	};
+
+	const handleAvatarChange: ChangeEventHandler<
+		HTMLInputElement
+	> = async ev => {
+		ev.preventDefault();
+		const file = ev.target.files?.[0];
+		if (!file) {
+			return;
+		}
+		if (file.size > MAX_AVATAR_SIZE) {
+			notify({
+				variant: "error",
+				header: t("profile.avatarUploadError"),
+				body: t("profile.avatarSizeConstraint"),
+			});
+			return;
+		}
+
+		if (!ACCEPTED_AVATAR_TYPES.includes(file.type)) {
+			notify({
+				variant: "error",
+				header: t("profile.avatarUploadError"),
+				body: t("profile.avatarTypeConstraint"),
+			});
+			return;
+		}
+
+		await account.uploadAvatar(file);
+		ev.target.value = "";
+	};
+
+	const handleAvatarSelectOpen: MouseEventHandler = ev => {
+		ev.stopPropagation();
+		ev.preventDefault();
+
+		const target = avatarInputRef.current;
+
+		if (!target) {
+			return;
+		}
+
+		target.click();
+	};
+
+	const handlePlanModalOpen: MouseEventHandler = ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		// if (isMediaMatches) {
+		// 	navigate("/user/plan");
+		// } else {
+		openModal(USER_PLAN_MODAL_ID);
+		// }
+	};
+
+	const handleAvatarRemove: MouseEventHandler = async ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+
+		await account.removeAvatar();
+	};
+
+	const handleLogout: MouseEventHandler = async ev => {
+		ev.stopPropagation();
+
+		await account.logout();
+
+		closeModal();
+		navigate("/");
+	};
+
+	const preventEvt: KeyboardEventHandler = ev => {
+		ev.stopPropagation();
+	};
+
+	return (
+		<UiModal modalId={PROFILE_SETTINGS_MODAL_ID} closeByBgClick={false}>
+			<div className={styles.container}>
+				<h1 className={styles.heading}>{t("profile.title")}</h1>
+				<div className={styles.avatar}>
+					<UserAvatar
+						src={account.info?.avatar}
+						width={56}
+						height={56}
+					/>
+					<input
+						type="file"
+						accept={ACCEPTED_AVATAR_TYPES.join(",")}
+						style={{ display: "none" }}
+						ref={avatarInputRef}
+						onChange={handleAvatarChange}
+					/>
+					<div className={styles.avatarBtns}>
+						<UiButton
+							onClick={handleAvatarSelectOpen}
+							className={styles.avatarBtn}
+							variant="tertiary"
+							size="lg"
+						>
+							{t("profile.upload")}
+						</UiButton>
+						<UiButton
+							className={styles.avatarBtn}
+							variant="quaternary"
+							onClick={handleAvatarRemove}
+							disabled={account.info?.avatarGenerated}
+							size="lg"
+						>
+							{t("profile.remove")}
+						</UiButton>
+					</div>
+				</div>
+				{account.info?.address && (
+					<div className={styles.cryptoWallet}>
+						{t("profile.cryptoWallet")}: {account.info?.address}
+					</div>
+				)}
+				<div className={styles.inputs}>
+					<Input
+						label={t("profile.email")}
+						placeholder={t("profile.email")}
+						disabled
+						value={account.info?.email ?? ""}
+						id="email"
+						autoFocus={false}
+						isSuccess={updateState === "success"}
+						helperText={isEmailExist ? "" : t("profile.emailDesc")}
+					/>
+					{!isEmailExist && (
+						<UiButton
+							variant="quaternary"
+							size="md"
+							className={styles.btn}
+							onClick={handleAddEmail}
+						>
+							{t("profile.addEmail")}
+						</UiButton>
+					)}
+					<Input
+						label={t("profile.name")}
+						value={name}
+						id="name"
+						onChange={handleNameChange}
+						onKeyDown={preventEvt}
+						onKeyUp={preventEvt}
+						onKeyPress={preventEvt}
+						autoFocus={false}
+						isSuccess={updateState === "success"}
+						successText={
+							updateState === "success" ? t("profile.saved") : ""
+						}
+						helperText={
+							updateState === "idle" || updateState === "loading"
+								? t("profile.msg")
+								: ""
+						}
+					/>
+				</div>
+				<NewsLetterCheckbox
+					accountNewsletter={account.info?.newsletter}
+					onChange={handleNewsletterChange}
+				/>
+				<div className={styles.btns}>
+					<UiButton
+						type="button"
+						onClick={handleOpenPasswordChange}
+						variant="ghost"
+						className={styles.btn}
+						size="lg"
+					>
+						<ChangePassword /> {t("profile.changePassword")}
+					</UiButton>
+					<UiButton
+						type="button"
+						onClick={handlePlanModalOpen}
+						variant="ghost"
+						className={styles.btn}
+						size="lg"
+					>
+						<span className={styles.icon}>
+							<Icon
+								iconName="ArrowUpCircle"
+								width={20}
+								height={20}
+							/>
+						</span>{" "}
+						{t("userPlan.upgradePlan")}
+					</UiButton>
+					<UiButton
+						type="button"
+						onClick={handleLogout}
+						variant="ghost"
+						className={styles.btn}
+						size="lg"
+					>
+						<Logout /> {t("profile.logout")}
+					</UiButton>
+				</div>
+			</div>
+		</UiModal>
+	);
+}
+
+const NewsLetterCheckbox = ({
+	accountNewsletter,
+	onChange,
+}: {
+	accountNewsletter?: boolean;
+	onChange: (isChecked: boolean) => void;
+}): ReactElement => {
+	const { t } = useTranslation();
+
+	return (
+		<div className={styles.newsletter}>
+			<Checkbox checked={accountNewsletter} onChange={onChange}>
+				<span className={styles.newsletter}>
+					{t("auth.newsletter")}
+					<OuterLink
+						href={"https://microboard.io/privacy-policy"}
+						className={styles.newsletterLink}
+					>
+						{" "}
+						Microboard.io
+					</OuterLink>
+				</span>
+			</Checkbox>
+		</div>
+	);
+};

package/src/features/ProfileSettingsModal/index.ts

@@ -0,0 +1,4 @@
+export {
+	PROFILE_SETTINGS_MODAL_ID,
+	ProfileSettingsModal,
+} from "./ProfileSettingsModal";

package/src/features/QuickAddButtons/QuickAddButtonsClear.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+
+const QuickAddButtonsClear: React.FC<{ children?: React.ReactNode }> = ({
+	children,
+}) => {
+	const { app } = useAppContext();
+	app.getBoard()?.selection.quickAddButtons.clear();
+	return <>{children}</>;
+};
+
+export default QuickAddButtonsClear;

package/src/features/README.md

@@ -0,0 +1,36 @@
+# View
+
+![tree](./index.svg)
+
+## React state pattern
+
+React is a library to produce objects that describe a composition of HTML elements to create and update a DOM element that matches the composition.
+
+React is a View in Model View Controller (MVC) pattern. The state of an App is usually contained outside of React in some kind of Model implemented in many different ways with or without any dedicated library. React is called to provide a View of the state of an App (Model) Some simple state can be handled by React itself.
+
+React component's `render` method produces an object that describes a composition of HTML elements.
+
+`const root = ReactDOM.createRoot(reactElement: React.ReactElement, htmlElement: HTMLElement)` mounts a React element on to a DOM element.
+
+`root.render(props)` produces a new object that describes a composition of HTML elements and updates the mounted DOM element to match the composition.
+
+React renders the composition when the `React.createElement(component, props, ...children)` is called (JSX expressions `<Component {...props}>{...children}</Component>` are compiled into the calls to the `React.createElement`).
+
+React rerenders the composition and updates the mounted DOM element to match it:
+
+1. When the `root.render(props)` is called
+2. After the component's `setState()` method is called
+3. When the component's `forceUpdate()` method is called
+
+The composition depends on values of:
+
+1. `this.props` - object passed as an argument to the `root.render` or the `React.createElement`. The object can hold primitive values that you computed outside of the component.
+2. `this.state` - object created at the component construction time or updated with the component's `setState()` method. The object can hold simple values that you change in event handlers and do not need outside of the component (in any parent og the component or another branch of the components tree).
+3. `this.context` - object passed from a nearest context provider parent. The object can hold simple values that you need in a lot of components in a tree (a shortcut not to pass values through props).
+4. any value that you request from any object in the components `render` method. You have to subscribe to the changes to the value, observe the changes and call the `forceUpdate` method of the component to force a rerender.
+
+React components call hooks during their lifecicle:
+
+1. `componentDidMount` - after component is mounted to the DOM element. Use to subscribe to native events and subjects in the model, read values from the DOM element or change them.
+2. `componentDidUpdate` - after the DOM element is updated to match the object constructed by the components `render` method. Use to read values from the DOM element or change them.
+3. `componentWillUnmount` - before the component will be unmounted from the DOM element and the DOM element will be destroyed. Use to unsubscribe from the native events and subjects in the model.

package/src/features/Rename/RenameContext.tsx

@@ -0,0 +1,54 @@
+import { useBoardsList } from "App/useBoardsList";
+import {
+	createStrictContext,
+	useStrictContext,
+} from "shared/lib/strictContext";
+import React, {
+	Dispatch,
+	PropsWithChildren,
+	SetStateAction,
+	useState,
+} from "react";
+
+const RenameContext = createStrictContext<{
+	renamingId: string | number | null;
+	setRenamingId: Dispatch<SetStateAction<string | number | null>>;
+	setNewName: Dispatch<SetStateAction<string>>;
+	newName: string;
+	rename: () => Promise<void>;
+}>();
+
+export const useRenameContext = () => {
+	return useStrictContext(RenameContext);
+};
+
+export function RenameContextProvider({ children }: PropsWithChildren<{}>) {
+	const [renamingId, setRenamingId] = useState<string | number | null>(null);
+	const [newName, setNewName] = useState<string>("");
+	const boardsList = useBoardsList();
+	const rename = async () => {
+		if (!renamingId) {
+			return;
+		}
+		if (typeof renamingId === "string") {
+			await boardsList.rename(renamingId, newName);
+			return;
+		}
+		if (typeof renamingId === "number") {
+			await boardsList.renameFolder(renamingId, newName);
+		}
+	};
+	return (
+		<RenameContext.Provider
+			value={{
+				newName,
+				renamingId,
+				setNewName,
+				setRenamingId,
+				rename,
+			}}
+		>
+			{children}
+		</RenameContext.Provider>
+	);
+}

package/src/features/Rename/RenameInput.module.css

@@ -0,0 +1,15 @@
+.form {
+	max-width: 32ch;
+	min-width: 10ch;
+}
+
+.input {
+	font-weight: 500;
+	font-size: 14px;
+	line-height: 18px;
+	padding: 0 4px;
+	width: 100%;
+	display: inline-block;
+	border: 1px solid rgb(222, 223, 227);
+	outline: none;
+}