microboard-ui-temp 0.0.3

package/src/features/LinksProvider/LinkToButton/LinkToButton.tsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Connector, Item } from "microboard-temp";
+import { useDomMbr } from "App/useDomMbr";
+import { useAppContext } from "features/AppContext";
+import { Icon } from "../../../shared/ui-lib/Icon";
+import styles from "./LinkToButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { createPortal } from "react-dom";
+
+async function getFavicon(url: string): Promise<string | undefined> {
+	try {
+		const response = await fetch(url);
+		if (!response.ok) {
+			return undefined;
+		}
+		const text = await response.text();
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(text, "text/html");
+
+		const iconLink = doc.querySelector(
+			'link[rel="icon"], link[rel="shortcut icon"]',
+		);
+
+		if (iconLink && iconLink.getAttribute("href")) {
+			return new URL(iconLink.getAttribute("href")!, url).href;
+		} else {
+			return undefined;
+		}
+	} catch {
+		return undefined;
+	}
+}
+
+interface Props {
+	item: Item;
+	handleClick: (item: Item) => void;
+}
+
+export const LinkToButton = ({ item, handleClick }: Props): JSX.Element => {
+	const linkToButtonRef = useRef<HTMLButtonElement | null>(null);
+	const [iconUrl, setIconUrl] = useState<string | undefined>(undefined);
+	const imgRef = useRef<HTMLImageElement | null>(null);
+	const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+	const { app, board } = useAppContext();
+	const closeTooltipTimeoutId = useRef<number | undefined>();
+
+	const mbr = useDomMbr({
+		app,
+		board,
+		ref: linkToButtonRef,
+		targetMbr:
+			item instanceof Connector
+				? item.endPointer.path.getMbr()
+				: item.getMbr(),
+		subjects: ["camera", "selection"],
+		fit: "linkToBtn",
+	});
+
+	useEffect(() => {
+		let url: string | undefined = undefined;
+		try {
+			url = `${new URL(item.getLinkTo()!).origin}/favicon.ico`;
+		} catch {}
+
+		if (url !== iconUrl) {
+			setIconUrl(url);
+		}
+	}, [item.getLinkTo()]);
+
+	const setIcon = async (): Promise<void> => {
+		if (!item.getLinkTo() || !iconUrl) {
+			return;
+		}
+		const favicon = await getFavicon(new URL(item.getLinkTo()!).origin);
+
+		if (favicon && favicon !== iconUrl) {
+			setIconUrl(favicon);
+		} else {
+			setIconUrl(undefined);
+		}
+	};
+
+	const closeTooltip = () => {
+		closeTooltipTimeoutId.current = setTimeout(
+			() => setIsTooltipOpen(false),
+			50,
+		);
+	};
+
+	const openTooltip = () => {
+		if (closeTooltipTimeoutId.current) {
+			clearTimeout(closeTooltipTimeoutId.current);
+			closeTooltipTimeoutId.current = undefined;
+		}
+		setIsTooltipOpen(true);
+	};
+
+	return (
+		<div onMouseEnter={openTooltip} onMouseLeave={closeTooltip}>
+			<UiButton
+				style={{
+					position: "absolute",
+					left: mbr.left,
+					top: mbr.top,
+					zIndex: board.getZIndex(item),
+				}}
+				className={styles.btn}
+				ref={linkToButtonRef}
+				onClick={() => handleClick(item)}
+				variant="secondary"
+				rounded="none"
+			>
+				<LinkTooltip
+					link={item.getLinkTo()}
+					isOpen={isTooltipOpen}
+					onClick={() => handleClick(item)}
+					left={mbr.left}
+					top={mbr.top + 24}
+					openTooltip={openTooltip}
+					closeTooltip={closeTooltip}
+				/>
+				{iconUrl ? (
+					<img
+						ref={imgRef}
+						className={styles.icon}
+						src={iconUrl}
+						alt="#"
+						onError={setIcon}
+					/>
+				) : (
+					<Icon iconName="linkTo" width={16} height={16} />
+				)}
+			</UiButton>
+		</div>
+	);
+};
+
+interface LinkTooltipProps {
+	top: number;
+	left: number;
+	link?: string;
+	onClick: () => void;
+	isOpen: boolean;
+	openTooltip: () => void;
+	closeTooltip: () => void;
+}
+
+const LinkTooltip = ({
+	top,
+	left,
+	link,
+	onClick,
+	isOpen,
+	openTooltip,
+	closeTooltip,
+}: LinkTooltipProps) => {
+	if (!link || !isOpen) {
+		return null;
+	}
+	return createPortal(
+		<div
+			onMouseEnter={openTooltip}
+			onMouseLeave={closeTooltip}
+			onClick={onClick}
+			className={styles.tooltip}
+			style={{
+				top,
+				left,
+			}}
+		>
+			{link}
+		</div>,
+		document.body,
+	);
+};

package/src/features/LinksProvider/LinksProvider.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback } from "react";
+import { useAppSubscription } from "../../App/useBoardSubscription";
+import { useForceUpdate } from "../../shared/lib/useForceUpdate";
+import { useAppContext } from "../AppContext";
+import { LinkToButton } from "./LinkToButton/LinkToButton";
+import { Item } from "microboard-temp";
+import { notify } from "shared/ui-lib/Toast/notify";
+import { useTranslation } from "react-i18next";
+
+export const LinksProvider = (): JSX.Element => {
+	const { board } = useAppContext();
+
+	const forceUpdate = useForceUpdate();
+
+	useAppSubscription({
+		subjects: ["items", "camera", "selection"],
+		observer: () => {
+			forceUpdate();
+		},
+	});
+
+	const { t } = useTranslation();
+
+	const handleClick = useCallback((item: Item) => {
+		const link = item.getLinkTo();
+		if (!link) {
+			return;
+		}
+
+		const handleNotFoundItemLink = async (): Promise<void> => {
+			try {
+				notify({
+					body: t("linkToToast.noItem"),
+					variant: "info",
+					duration: 3000,
+				});
+			} catch (err) {
+				console.error(err);
+				notify({
+					header: t("linkToToast.error.title"),
+					body: t("linkToToast.error.description"),
+					variant: "error",
+				});
+			}
+		};
+
+		const url = new URL(link);
+		const separatedLink = link.split("boards/");
+		if (
+			url.origin === window.location.origin &&
+			separatedLink.length > 1 &&
+			separatedLink[1].includes(board.getBoardId())
+		) {
+			const itemId = url.searchParams.get("focus");
+			if (!itemId) {
+				return;
+			}
+			const item = board.items.getById(itemId);
+			if (!item) {
+				return handleNotFoundItemLink();
+			}
+			return board.camera.zoomToFit(item.getMbr());
+		}
+		window.open(url, "_blank");
+	}, []);
+
+	return (
+		<>
+			{[...board.items.listAll(), ...board.items.listFrames()]
+				.filter(
+					item => item.getLinkTo() && !item.transformationRenderBlock,
+				)
+				.map(item => {
+					return (
+						<LinkToButton
+							item={item}
+							key={item.getId()}
+							handleClick={handleClick}
+						/>
+					);
+				})}
+		</>
+	);
+};

package/src/features/LinksProvider/index.ts

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

package/src/features/LocalFileSavingProgress/LocalFileSaveProgress.module.css

@@ -0,0 +1,6 @@
+.unauthText {
+	position: absolute;
+	top: var(--absolute-position-panel-padding);
+	left: 50%;
+	transform: translateX(-50%);
+}

package/src/features/LocalFileSavingProgress/LocalFileSaveProgress.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import styles from "./LocalFileSaveProgress.module.css";
+import { useAppSubscription } from "App/useBoardSubscription";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+
+const LocalFileSaveProgress: React.FC = () => {
+	const { app } = useAppContext();
+	const forceUpdate = useForceUpdate();
+	useAppSubscription({
+		subjects: ["board"], // previously used events subscription
+		observer: forceUpdate,
+	});
+
+	if (
+		!app.getBoard().getBoardId().includes("local") ||
+		!app.getLocalEditFileHandler()
+	) {
+		return null;
+	}
+
+	return (
+		<UiPanel className={styles.unauthText}>
+			{app.getBoard().events?.log.saveFileTimeout ? "Saving..." : "Saved"}
+		</UiPanel>
+	);
+};
+
+export default LocalFileSaveProgress;

package/src/features/LocalFileSavingProgress/index.ts

@@ -0,0 +1 @@
+export { default as LocalFileSaveProgress } from "./LocalFileSaveProgress";

package/src/features/LoginWith/LoginWith.module.css

@@ -0,0 +1,18 @@
+.wr {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	margin: 32px 0;
+	font-size: 14px;
+	font-family: "Manrope";
+	color: #666;
+	font-weight: 400;
+}
+
+.line {
+	flex-grow: 1;
+	height: 1px;
+	background-color: #ddd;
+	margin: 0 10px;
+}

package/src/features/LoginWith/LoginWith.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+import styles from "./LoginWith.module.css";
+import React from "react";
+
+export const LoginWith = (): JSX.Element => {
+	const { t } = useTranslation();
+
+	return (
+		<div className={styles.wr}>
+			<span className={styles.line}></span>
+			<span className={styles.text}>{t("auth.loginWith")}</span>
+			<span className={styles.line}></span>
+		</div>
+	);
+};

package/src/features/MediaUnavailableModal/MediaUnavailableModal.module.css

@@ -0,0 +1,52 @@
+.wrapper {
+	padding: 72px 64px;
+	display: flex;
+	flex-direction: column;
+	min-width: 300px;
+}
+
+@media screen and (max-width: 720px) {
+	.wrapper {
+		padding: 20px 12px;
+	}
+}
+
+.heading {
+	font-family: Manrope;
+	font-size: 30px;
+	font-style: normal;
+	font-weight: 600;
+}
+
+.msg {
+	font-family: Manrope;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 500;
+	margin-top: 8px;
+}
+
+.link {
+	color: #924fe8;
+	text-decoration: underline;
+	border: none;
+}
+
+.link::after {
+	width: 0;
+	height: 0;
+	background: none;
+}
+
+.link:hover::after {
+	width: 0;
+	height: 0;
+	background: none;
+}
+
+.btn {
+	margin-top: 16px;
+	align-self: flex-start;
+	width: auto;
+	padding: 10px 16px;
+}

package/src/features/MediaUnavailableModal/MediaUnavailableModal.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Link } from "shared/ui-lib/Link";
+import styles from "./MediaUnavailableModal.module.css";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { UiModal } from "shared/ui-lib/UiModal/UiModal";
+
+export const MEDIA_UNAVAILABLE_MODAL_ID = "MEDIA_UNAVAILABLE_MODAL_ID";
+
+export function MediaUnavailableModal(): JSX.Element {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { closeModal } = useUiModalContext();
+
+	return (
+		<UiModal
+			modalId={MEDIA_UNAVAILABLE_MODAL_ID}
+			renderAsPageOnMobile={false}
+		>
+			<div className={styles.wrapper}>
+				<h1 className={styles.heading}>
+					{t("toolsPanel.addMedia.unauth.heading")}
+				</h1>
+				<div className={styles.msg}>
+					<Trans
+						t={t}
+						i18nKey={"toolsPanel.addMedia.unauth.description"}
+						components={{
+							p: <p />,
+							signinLink: (
+								<Link
+									to="/auth/sign-in"
+									className={styles.link}
+									onClick={closeModal}
+								/>
+							),
+							signupLink: (
+								<Link
+									to="/auth/sign-up"
+									className={styles.link}
+									onClick={closeModal}
+								/>
+							),
+						}}
+					/>
+				</div>
+
+				<UiButton
+					variant="primary"
+					className={styles.btn}
+					onClick={() => {
+						navigate("/auth/sign-in");
+						closeModal();
+					}}
+					size="lg"
+				>
+					{t("auth.signIn")}
+				</UiButton>
+			</div>
+		</UiModal>
+	);
+}

package/src/features/MediaUnavailableModal/index.ts

@@ -0,0 +1,4 @@
+export {
+	MEDIA_UNAVAILABLE_MODAL_ID,
+	MediaUnavailableModal,
+} from "./MediaUnavailableModal.tsx";

package/src/features/Modal/ConfirmModal.module.css

@@ -0,0 +1,71 @@
+.modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+	padding: 32px 64px;
+	gap: 32px;
+	isolation: isolate;
+	box-shadow:
+		0px 18px 24px -5px rgba(20, 21, 26, 0.1),
+		0px 8px 8px -5px rgba(20, 21, 26, 0.05);
+}
+
+.wrapper {
+	background-color: white;
+	padding: 20px;
+	border-radius: 24px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	text-align: center;
+	max-width: 650px;
+}
+
+.title {
+	font-size: 24px;
+	font-weight: 600;
+	margin-bottom: 10px;
+}
+
+.description {
+	margin-bottom: 20px;
+	font-size: 14px;
+	line-height: 20px;
+	text-align: center;
+}
+
+.buttons {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	padding: 0px;
+	gap: 16px;
+}
+
+.cancelButton {
+	padding: 10px 20px;
+	font-size: 16px;
+	cursor: pointer;
+	background-color: black;
+	color: white;
+	border: none;
+	border-radius: 8px;
+}
+
+.confirmButton {
+	padding: 10px 20px;
+	font-size: 16px;
+	cursor: pointer;
+	background: rgba(10, 15, 41, 0.04);
+	border-radius: 12px;
+	color: black;
+	border: none;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}