microboard-ui-temp 0.0.3

package/src/features/TitlePanel/TitlePanel.module.css

@@ -0,0 +1,123 @@
+.panel {
+	position: absolute;
+	top: -60px;
+	left: var(--absolute-position-panel-padding);
+	overflow: hidden;
+}
+
+.logoWrapper.viewMode {
+	border-top-left-radius: var(--radius);
+	border-bottom-left-radius: var(--radius);
+}
+
+.tabletHide.viewMode {
+	border-top-right-radius: var(--radius);
+	border-bottom-right-radius: var(--radius);
+}
+
+.logo {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	/* padding: 12px 14px; */
+	text-decoration: none;
+	color: var(--text-base-primary);
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.name {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin: auto;
+	overflow: hidden;
+	color: var(--text-base-primary);
+	font-size: 16px;
+	font-weight: 400;
+}
+
+input.rename {
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.exportDropdown {
+	position: absolute;
+	top: calc(100% + var(--absolute-position-panel-padding));
+	left: 86%;
+	background-color: white;
+	border: 1px solid rgba(204, 204, 204, 0.5);
+	border-radius: 8px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	padding: 5px;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	z-index: 100;
+}
+
+.exportDropdown > div {
+	padding: 10px;
+	cursor: pointer;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.exportDropdown > div:hover {
+	background-color: #0a0f290a;
+}
+
+.exportDropdownItemTitle {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.exportDropdown strong {
+	font-size: 12px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-grow: 1;
+}
+
+.exportDropdown p {
+	margin: 0;
+	color: rgba(20, 21, 26, 1);
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.betaTag {
+	padding: 4px 8px;
+	font-size: 10px;
+	color: #007bff;
+	background-color: #e0f0ff;
+	border-radius: 4px;
+	font-weight: 600;
+}
+
+@media screen and (max-width: 520px) {
+	.mobileHide {
+		display: none;
+	}
+
+	.menuButton {
+		border-top-right-radius: var(--radius);
+		border-bottom-right-radius: var(--radius);
+	}
+}
+
+@media screen and (max-width: 680px) {
+	.tabletHide {
+		display: none;
+	}
+
+	.logoWrapper {
+		border-top-right-radius: var(--radius);
+		border-bottom-right-radius: var(--radius);
+	}
+}

package/src/features/TitlePanel/TitlePanel.tsx

@@ -0,0 +1,341 @@
+import { useAccount } from "App/useAccount";
+import { useBoardsList } from "App/useBoardsList";
+import { useAppSubscription } from "App/useBoardSubscription";
+import clsx from "clsx";
+import Cookies from "js-cookie";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import {
+	type ChangeEventHandler,
+	MouseEventHandler,
+	default as React,
+	type RefObject,
+	useEffect,
+	useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { useSidePanelContext } from "features/SidePanel/SidePanelContext";
+import { notify } from "shared/ui-lib/Toast/notify";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+import { ViewModeGuard } from "features/ViewModeGuard";
+import { getApiUrl } from "../../Config";
+import style from "./TitlePanel.module.css";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import { UiSeparator } from "shared/ui-lib/UiSeparator";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Icon, Logo } from "shared/ui-lib/Icon";
+import { BoardRename } from "entities/BoardName";
+import { createPortal } from "react-dom";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { CREATE_TEMPLATE_MODAL } from "features/Templates/CreateTemplateModal/CreateTemplateModal";
+import { SHARE_SNAPSHOT_MODAL_ID } from "features/ShareSnapshotModal/ShareSnapshotModal";
+
+const MAX_BOARD_TITLE_LENGTH = 32;
+
+export function TitlePanel(): JSX.Element | null {
+	const forceUpdate = useForceUpdate();
+	const { t } = useTranslation();
+	const { openModal } = useUiModalContext();
+	const { board } = useAppContext();
+	const { isOpen, toggleSideMenu } = useSidePanelContext();
+	useAppSubscription({ observer: forceUpdate, subjects: ["tools"] });
+	const boardsList = useBoardsList();
+	const account = useAccount();
+
+	const boardId = board.getBoardId();
+	const boardName =
+		boardsList.getBoardInfo(boardId)?.title || t("board.untitled");
+	const isBlank = boardId === "blank";
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const clickOutsideRef = useClickOutside<HTMLButtonElement>(
+		() => setIsDropdownOpen(false),
+		[],
+		true,
+	);
+	const [isRenaming, setIsRenaming] = useState(false);
+	const [newBoardName, setNewBoardName] = useState(boardName);
+	const [isBoardRenameBtnShown, setIsBoardRenameBtnShown] = useState(false);
+	const isExport = board.tools.getExport();
+	if (isExport) {
+		return null;
+	}
+
+	const handleBoardRename: ChangeEventHandler<HTMLInputElement> = event => {
+		if (!event.currentTarget) {
+			return;
+		}
+		setNewBoardName(event.currentTarget.value);
+	};
+
+	const handleRenameCancel = (): void => {
+		setIsRenaming(false);
+	};
+
+	const canRename = account.permissions.checkPermissions(
+		"owns",
+		"boards",
+		boardId ?? "",
+	);
+	const handleBoardRenameStart: MouseEventHandler = _event => {
+		if (!canRename || isBlank || board.getInterfaceType() === "view") {
+			return;
+		}
+		setIsRenaming(true);
+		setNewBoardName(boardName);
+	};
+
+	const handleRenameConfirm = (): void => {
+		boardsList.rename(boardId, newBoardName);
+	};
+
+	const openExport = (): void => {
+		board.tools.export();
+	};
+
+	const openShareSnapshot = (): void => {
+		openModal(SHARE_SNAPSHOT_MODAL_ID);
+		setIsDropdownOpen(false);
+	};
+
+	const exportHTML = (): string => {
+		const htmlContent = board.serializeHTML();
+		const blob = new Blob([htmlContent], {
+			type: "text/html;charset=utf-8",
+		});
+		const url = URL.createObjectURL(blob);
+		const anch = document.createElement("a");
+		anch.href = url;
+		anch.download = `${boardName}.html`;
+		anch.click();
+		URL.revokeObjectURL(url);
+		return htmlContent;
+	};
+
+	const toggleExportDropdown = (): void => {
+		setIsDropdownOpen(prev => !prev);
+	};
+
+	const saveTemplate = (): void => {
+		const body = JSON.stringify({ snapshot: board.getSnapshot() });
+		saveTemplateReq(body);
+	};
+
+	async function saveTemplateReq(body: any): Promise<void> {
+		try {
+			const response = await fetch(
+				`${getApiUrl()}/templates/${board.getBoardId()}`,
+				{
+					method: "PATCH",
+					mode: "cors",
+					cache: "no-cache",
+					credentials: "same-origin",
+					headers: {
+						"Content-Type": "application/json",
+						Authorization: `Bearer ${Cookies.get("accessToken")}`,
+					},
+					body,
+					redirect: "follow",
+					referrerPolicy: "no-referrer",
+				},
+			);
+
+			if (response.status === 204) {
+				return openModal(CREATE_TEMPLATE_MODAL);
+			}
+
+			if (!response.ok) {
+				throw new Error("response not OK");
+			}
+			notify({
+				body: t("template.saveSuccess"),
+				variant: "info",
+				duration: 3000,
+			});
+		} catch (error) {
+			console.error("Failed to create template.", error);
+		}
+	}
+
+	const strippedName =
+		(boardName?.length ?? 0) > MAX_BOARD_TITLE_LENGTH
+			? `${boardName?.slice(0, MAX_BOARD_TITLE_LENGTH)}...`
+			: (boardName ?? "");
+	return (
+		<UiPanel className={style.panel} padding={0} zIndex={10}>
+			<ViewModeGuard iframe>
+				<SidePanelButton
+					isOpen={isOpen}
+					toggle={toggleSideMenu}
+					className={style.menuButton}
+				/>
+				<UiSeparator vertical className={style.mobileHide} />
+			</ViewModeGuard>
+			<UiButton
+				rounded={isBoardRenameBtnShown ? "none" : "right"}
+				variant="secondary"
+				className={clsx(
+					style.mobileHide,
+					style.logoWrapper,
+					board.getInterfaceType() === "view" && style.viewMode,
+				)}
+			>
+				<div className={style.logo}>
+					<Logo id="logo" />
+					<span translate="no">{t("appTitle")}</span>
+				</div>
+			</UiButton>
+			<ViewModeGuard
+				mode={["edit", "view"]}
+				callback={() => setIsBoardRenameBtnShown(true)}
+				fallbackCb={() => setIsBoardRenameBtnShown(false)}
+			>
+				<UiSeparator vertical className={style.tabletHide} />
+				<UiButton
+					variant="secondary"
+					rounded="none"
+					onDoubleClick={handleBoardRenameStart}
+					className={clsx(
+						style.tabletHide,
+						board.getInterfaceType() === "view" && style.viewMode,
+					)}
+					onClick={evt => {
+						evt.preventDefault();
+						evt.stopPropagation();
+					}}
+				>
+					{isRenaming ? (
+						<BoardRename
+							width={newBoardName.length}
+							value={newBoardName}
+							onCancel={handleRenameCancel}
+							onChange={handleBoardRename}
+							onConfirm={handleRenameConfirm}
+							className={style.rename}
+						/>
+					) : (
+						<span className={style.name}>
+							{isBlank ? t("noBoard.title") : strippedName}
+						</span>
+					)}
+				</UiButton>
+			</ViewModeGuard>
+			<ViewModeGuard>
+				<UiSeparator vertical className={style.tabletHide} />
+				<UiButton
+					ref={clickOutsideRef}
+					className={style.tabletHide}
+					onClick={toggleExportDropdown}
+					variant="secondary"
+					rounded="right"
+					tooltip={isDropdownOpen ? undefined : t("export.tooltip")}
+					tooltipPosition="bottom"
+				>
+					<Icon iconName="Export" />
+				</UiButton>
+				{isDropdownOpen && (
+					<ExportDropdown
+						buttonRef={clickOutsideRef}
+						exportHTML={exportHTML}
+						openExport={openExport}
+						openShareSnapshot={openShareSnapshot}
+					/>
+				)}
+				{window.enableTemplateCreating && (
+					<>
+						<UiSeparator vertical className={style.tabletHide} />
+						<UiButton
+							className={style.tabletHide}
+							onClick={saveTemplate}
+							variant="secondary"
+							rounded="right"
+							tooltip={t("template.save")}
+							tooltipPosition="bottom"
+						>
+							<Icon iconName="Pen" />
+						</UiButton>
+					</>
+				)}
+			</ViewModeGuard>
+		</UiPanel>
+	);
+}
+
+function SidePanelButton({
+	isOpen,
+	toggle,
+	className,
+}: {
+	isOpen: boolean;
+	toggle: () => void;
+	className?: string;
+}): React.ReactElement {
+	const { t } = useTranslation();
+
+	return (
+		<UiButton
+			id={isOpen ? "CloseSidePanel" : "OpenSidePanel"}
+			tooltip={
+				isOpen ? t("titlePanel.menu.close") : t("titlePanel.menu.open")
+			}
+			tooltipPosition="bottom-left"
+			onClick={toggle}
+			variant="secondary"
+			rounded="left"
+			className={className}
+		>
+			<Icon iconName={isOpen ? "SidePanelClose" : "SidePanelOpen"} />
+		</UiButton>
+	);
+}
+
+type ExportDropdownProps = {
+	buttonRef: RefObject<HTMLButtonElement>;
+	openExport: () => void;
+	exportHTML: () => void;
+	openShareSnapshot: () => void;
+};
+
+function ExportDropdown({
+	buttonRef,
+	openExport,
+	exportHTML,
+	openShareSnapshot,
+}: ExportDropdownProps) {
+	const { t } = useTranslation();
+	const [position, setPosition] = useState({ top: 0, left: 0 });
+
+	useEffect(() => {
+		if (buttonRef.current) {
+			const rect = buttonRef.current.getBoundingClientRect();
+			setPosition({
+				top: rect.bottom + window.scrollY,
+				left: rect.left + window.scrollX,
+			});
+		}
+	}, [buttonRef]);
+
+	return createPortal(
+		<div
+			className={style.exportDropdown}
+			style={{
+				position: "absolute",
+				top: position.top + 8,
+				left: position.left,
+			}}
+		>
+			<div onClick={openExport}>
+				<Icon iconName="ExportPNG" width={20} height={20} />
+				<p>{t("export.PNGTitle")}</p>
+			</div>
+			<div onClick={exportHTML}>
+				<Icon iconName="ExportFile" width={20} height={20} />
+				<p>{t("export.HTMLTitle")}</p>
+			</div>
+			<div onClick={openShareSnapshot}>
+				<Icon iconName="ShareSnapshotLink" width={20} height={20} />
+				<p>{t("export.HTMLSnapshot.HTMLSnapshotLink")}</p>
+			</div>
+		</div>,
+		document.body,
+	);
+}

package/src/features/TitlePanel/index.ts

@@ -0,0 +1 @@
+export { TitlePanel } from "./TitlePanel";

package/src/features/ToastProvider.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from "react";
+import { Toaster } from "react-hot-toast";
+
+export function ToastProvider() {
+	const isPhoneScreenCheck = () =>
+		matchMedia("screen and (max-width: 640px)").matches;
+	const [isPhoneScreen, setIsPhoneScreen] = useState(isPhoneScreenCheck);
+	useEffect(() => {
+		const setScreen = () => {
+			setIsPhoneScreen(isPhoneScreenCheck());
+		};
+
+		window.addEventListener("resize", setScreen);
+
+		return () => {
+			window.removeEventListener("resize", setScreen);
+		};
+	});
+	return (
+		<Toaster
+			containerStyle={
+				isPhoneScreen
+					? {
+							left: 10,
+							top: 10,
+							width: "calc(100% - 10)",
+							maxHeight: "50%",
+						}
+					: { top: 70, right: 12 }
+			}
+		/>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddConnector.tsx

@@ -0,0 +1,73 @@
+import type { ConnectorLineStyle } from "microboard-temp";
+import { getHotkeyLabel } from "microboard-temp";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { ConnectorLineStylePicker } from "features/Pickers/ConnectorLineStylePicker";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ButtonWithMenu } from "./ButtonWithMenu/ButtonWithMenu";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+export function AddConnector(): React.ReactElement {
+	const { board, app } = useAppContext();
+	const { t } = useTranslation();
+	const [isActive, setIsActive] = useState(
+		Boolean(board.tools.getAddConnector()),
+	);
+
+	const addTool = board.tools.getAddConnector();
+	useEffect(() => {
+		if (addTool) {
+			setIsActive(true);
+		} else {
+			setIsActive(false);
+		}
+	}, [addTool]);
+
+	const handleClick = (): void => {
+		board.tools.addConnector(true);
+		setIsActive(false);
+	};
+
+	const handlePick = (lineStyle: ConnectorLineStyle): void => {
+		const tool = board.tools.getAddConnector();
+		if (tool) {
+			tool.applyLineStyle(lineStyle);
+			app.sessionStorage.setConnectorLineStyle(lineStyle);
+			setIsActive(false);
+		}
+	};
+
+	const selectedConnector = board.tools.getAddConnector()?.lineStyle;
+
+	return (
+		<ButtonWithMenu
+			button={
+				<UiButton
+					id={"tool-add-connector"}
+					tooltip={
+						isActive
+							? undefined
+							: t("toolsPanel.addConnector.tooltip")
+					}
+					hotkey={getHotkeyLabel("connector")}
+					active={isActive || !!addTool}
+					onClick={handleClick}
+					variant="secondary"
+					rounded="none"
+				>
+					<Icon iconName="Connector" />
+				</UiButton>
+			}
+			isOpen={isActive}
+		>
+			<UiPanel vertical padding={0}>
+				<ConnectorLineStylePicker
+					selected={selectedConnector}
+					onPick={handlePick}
+				/>
+			</UiPanel>
+		</ButtonWithMenu>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddCounter.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "shared/ui-lib/Icon";
+
+export function AddCounter() {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const handleClick = () => {
+		board.tools.addRegisteredTool("AddCounter", true);
+	};
+
+	const isActive = Boolean(board.tools.getAddRegisteredTool("AddCounter"));
+
+	return (
+		<UiButton
+			id={"redo"}
+			tooltip={"Counter"}
+			onClick={handleClick}
+			variant="secondary"
+			rounded="top"
+			active={isActive}
+		>
+			<Icon iconName="Undo" />
+		</UiButton>
+	);
+}

package/src/features/ToolsPanel/Buttons/AddDrawing/AddDrawing.module.css

@@ -0,0 +1,13 @@
+.panel {
+	transform: translateY(calc(0% - (100% / 3)));
+}
+
+.indicator {
+	position: absolute;
+	right: 8px;
+	top: 8px;
+	border: 1px solid rgba(31, 31, 31, 0.25);
+	border-radius: 50%;
+	width: 8px;
+	height: 8px;
+}