microboard-ui-temp 0.0.3

package/src/features/AppView/AppView.tsx

@@ -0,0 +1,302 @@
+import { useAIContext } from "entities/AIInput/AIContext";
+import { AiGenerationButton } from "entities/AIInput/AIGenerationButton";
+import { AIInput } from "entities/AIInput/AIInput";
+import { Canvas } from "entities/Canvas";
+import { AccessDeniedModal } from "features/AccessDeniedModal";
+import { AiUnavailableModal } from "features/AiUnavailableModal/AiUnavailableModal";
+import { useAppContext } from "features/AppContext";
+import { ChangePasswordModal } from "features/ChangePasswordModal";
+import { ContextMenu } from "features/ContextMenu";
+import { ContextPanel } from "features/ContextPanel";
+import { ExportPanel } from "features/ExportPanel";
+import { ExportVisible } from "features/ExportPanel/ExportVisible";
+import { HyperLink } from "features/hyperLink/HyperLink";
+import { useHyperLinkContext } from "features/hyperLink/HyperLinkContext";
+import { HyperLinkInput } from "features/hyperLink/HyperLinkInput/HyperLinkInput";
+import {
+	AuthClipboardModal,
+	ImgAuthClipboardModal,
+	ImportMiro,
+	ImportMiroStartModal,
+} from "features/ImportMiro";
+import {
+	ErrorNotification,
+	LoadingNotification,
+	SuccessNotification,
+	WarnClipboardNotification,
+	WarnNotification,
+} from "features/ImportMiro/ImportMiroBoards/Notifications";
+import { ItemTooltip } from "features/ItemTooltip";
+import { LandingMenu, MobileLandingMenu } from "features/LandingMenu";
+import { LocalFileSaveProgress } from "features/LocalFileSavingProgress";
+import { CookiesModal } from "features/Modal/CookiesModal";
+import { UserTracking } from "features/Presence/UserTracking/UserTracking";
+import { ProfileSettingsModal } from "features/ProfileSettingsModal";
+import { ShareModal } from "features/ShareModal";
+import { SidePanelsContainer } from "features/SidePanelsContainer";
+import { CreateTemplateModal, SelectTemplateModal } from "features/Templates";
+import { TextEditors } from "features/TextEditor/TextEditor";
+import { ToastProvider } from "features/ToastProvider";
+import { UserPanelLayout } from "features/UserPanel/UserPanel";
+import { UserPlanModal } from "features/UserPlan";
+import { HistoryModal } from "features/UserPlan/HistoryModal";
+import { LimitsModal } from "features/UserPlan/LimitsModal";
+import { SelectPaymentModal } from "features/UserPlan/SelectPaymentModal";
+import { ViewModeGuard } from "features/ViewModeGuard";
+import { ZoomPanel } from "features/ZoomPanel";
+import React, { useEffect, useRef } from "react";
+import {
+	useLocation,
+	useNavigate,
+	useParams,
+	useSearchParams,
+} from "react-router-dom";
+import { shouldShow } from "shared/lib/queryStringParser";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import { UIMainLoader } from "shared/ui-lib/UIMainLoader/UIMainLoader";
+import { UiModalBackground } from "shared/ui-lib/UiModal";
+import { CommentsProvider } from "../../entities/comments";
+import { LinksProvider } from "../LinksProvider/LinksProvider";
+import { SetLinkToModal } from "../Modal/SetLinkToModal";
+import style from "./AppView.module.css";
+import { InactiveBoardHidder } from "./InactiveBoardHidder";
+import NoBoardIsOpen from "./NoBoardIsOpen";
+import { QuickAddPanel } from "./QuickAddPanel";
+import { MediaUnavailableModal } from "features/MediaUnavailableModal/MediaUnavailableModal";
+import { ShareSnapshotModal } from "features/ShareSnapshotModal";
+import { BoardMenu } from "entities/BoardMenu";
+import { MouseOrTrackpadModal } from "entities/BoardMenu/MouseOrTracpadModal/MouseOrTrackpadModal";
+import { ItemsProvider } from "features/ItemsProvider";
+import { VideoPlayer } from "features/VideoPlayer/VideoPlayer";
+import { AudioPlayer } from "features/AudioPlayer/AudioPlayer";
+// import { CounterComponent } from "features/Counter/Counter";
+import { ErrorBoundary } from "features/ErrorBoundary/ErrorBoundary";
+import { CreateCardsModal } from "../GameItems/CreateCardsModal";
+import { CreateDiceModal } from "../GameItems/CreateDiceModal";
+
+export function AppView(): JSX.Element {
+	const { app, board } = useAppContext();
+	const { setQuotedText, tryToSendGenerationRequest } = useAIContext();
+	const { setHyperLinkData, hyperLinkData } = useHyperLinkContext();
+	const location = useLocation();
+	const navigate = useNavigate();
+	const params = useParams();
+	const forceUpdate = useForceUpdate();
+	const animationId = useRef<number | null>(null);
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const [searchParams] = useSearchParams();
+	const authCode = searchParams.get("code");
+	const teamIdSearch = searchParams.get("team_id");
+	let canPasteAgain = true;
+	function update(): void {
+		if (animationId.current) {
+			return; // Function already scheduled to run
+		}
+
+		animationId.current = requestAnimationFrame(() => {
+			forceUpdate();
+			animationId.current = null;
+		});
+	}
+
+	const itemsComponents = {
+		Video: VideoPlayer,
+		Audio: AudioPlayer,
+		// Counter: CounterComponent,
+	};
+
+	useEffect(() => {
+		const handleCtrlWheel = (ev: WheelEvent): void => {
+			if (ev.ctrlKey) {
+				ev.preventDefault();
+			}
+		};
+
+		const handlerOnKeyUp = (event: KeyboardEvent): void => {
+			controller.onKeyUp(event);
+			canPasteAgain = true;
+		};
+
+		const handlerOnPaste = (event: ClipboardEvent): void => {
+			if (!canPasteAgain) {
+				return;
+			}
+			controller.onPaste(event);
+			canPasteAgain = false;
+		};
+
+		app.boardSubject.subscribe(update);
+		const container = containerRef.current;
+		const controller = app.controller;
+		const abortController = new AbortController();
+		if (container) {
+			container.addEventListener("touchmove", preventDefault, {
+				passive: false,
+				signal: abortController.signal,
+			});
+			container.addEventListener("wheel", controller.onWheel, {
+				capture: true,
+				passive: false,
+				signal: abortController.signal,
+			});
+			document.addEventListener("wheel", handleCtrlWheel, {
+				passive: false,
+				signal: abortController.signal,
+			});
+			window.addEventListener("resize", controller.onResize);
+			container.addEventListener(
+				"contextmenu",
+				controller.onContextMenu,
+				{
+					capture: false,
+					passive: false,
+					signal: abortController.signal,
+				},
+			);
+			container.addEventListener(
+				"pointermove",
+				controller.onPointerMove,
+				{
+					capture: true,
+					signal: abortController.signal,
+				},
+			);
+			window.addEventListener("keydown", controller.onKeyDown, {
+				signal: abortController.signal,
+			});
+			window.addEventListener("keyup", handlerOnKeyUp, {
+				signal: abortController.signal,
+			});
+			window.addEventListener("copy", controller.onCopy, {
+				signal: abortController.signal,
+			});
+			window.addEventListener("paste", handlerOnPaste, {
+				signal: abortController.signal,
+			});
+			window.addEventListener("drop", controller.onDrop, {
+				signal: abortController.signal,
+			});
+			window.addEventListener(
+				"dragover",
+				event => event.preventDefault(),
+				{
+					signal: abortController.signal,
+				},
+			);
+		}
+
+		return () => {
+			app.boardSubject.unsubscribe(update);
+			abortController.abort();
+		};
+	}, [containerRef.current]);
+
+	const appBoard = app.getBoard();
+
+	return (
+		<ErrorBoundary>
+			<div className={style.wrapper}>
+				{shouldShow("titlePanel") && <LandingMenu />}
+				{shouldShow("titlePanel") && <MobileLandingMenu />}
+				<InactiveBoardHidder>
+					<div ref={containerRef} className="NoContextMenu">
+						<ViewModeGuard
+							mode={["edit", "view"]}
+							fallback={
+								<div className={style.loaderWrapper}>
+									<UIMainLoader />
+								</div>
+							}
+						/>
+						<Canvas
+							router={{ location, navigate, params }}
+							app={app}
+							board={board}
+						>
+							<LinksProvider />
+							<ItemsProvider itemsComponents={itemsComponents} />
+						</Canvas>
+						<TextEditors
+							app={app}
+							board={board}
+							setQuotedText={setQuotedText}
+							setHyperLinkData={setHyperLinkData}
+							hyperLinkData={hyperLinkData}
+							sendGenerationRequest={tryToSendGenerationRequest}
+						/>
+					</div>
+				</InactiveBoardHidder>
+				{appBoard.getBoardId() === "blank" && <NoBoardIsOpen />}
+				<ExportVisible>
+					<SidePanelsContainer
+						isBlank={appBoard.getBoardId() === "blank"}
+					/>
+					<ContextMenu />
+					<ItemTooltip />
+					<ViewModeGuard mode={"edit"}>
+						{interfaceType => {
+							if (interfaceType === "edit") {
+								return <AIInput />;
+							}
+							return null;
+						}}
+					</ViewModeGuard>
+				</ExportVisible>
+				<ExportVisible>
+					<UserPanelLayout app={app} />
+					<CommentsProvider />
+				</ExportVisible>
+				<ExportVisible>
+					<UserTracking board={board} />
+				</ExportVisible>
+				<InactiveBoardHidder>
+					<ZoomPanel />
+				</InactiveBoardHidder>
+				<ViewModeGuard>
+					<ContextPanel />
+					<QuickAddPanel />
+					<ExportPanel />
+					<BoardMenu />
+				</ViewModeGuard>
+				<HyperLink />
+				<AiGenerationButton />
+				<HyperLinkInput />
+				<ToastProvider />
+				{authCode && teamIdSearch ? <ImportMiro /> : null}
+				<CookiesModal />
+				<UiModalBackground>
+					<ImportMiroStartModal />
+					<SelectPaymentModal />
+					<UserPlanModal />
+					<LimitsModal />
+					<HistoryModal />
+					<ShareModal />
+					<ShareSnapshotModal />
+					<ProfileSettingsModal />
+					<ChangePasswordModal />
+					<AccessDeniedModal />
+					<AiUnavailableModal />
+					<MediaUnavailableModal />
+					<SelectTemplateModal />
+					<AuthClipboardModal />
+					<ImgAuthClipboardModal />
+					<LoadingNotification />
+					<ErrorNotification />
+					<SuccessNotification />
+					<WarnClipboardNotification />
+					<WarnNotification />
+					<SetLinkToModal />
+					<CreateTemplateModal />
+					<MouseOrTrackpadModal />
+					<CreateCardsModal />
+					<CreateDiceModal />
+				</UiModalBackground>
+				<LocalFileSaveProgress />
+			</div>
+		</ErrorBoundary>
+	);
+}
+
+function preventDefault(event: TouchEvent): void {
+	event.preventDefault();
+}

package/src/features/AppView/InactiveBoardHidder.tsx

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from "react";
+import { useAppContext } from "features/AppContext";
+
+export function InactiveBoardHidder({
+	children,
+}: PropsWithChildren<{}>): JSX.Element {
+	const { app } = useAppContext();
+	const appBoardId = app.getBoard().getBoardId();
+
+	if (appBoardId === "blank") {
+		return <></>;
+	}
+	return <>{children}</>;
+}

package/src/features/AppView/LocalAppView.tsx

@@ -0,0 +1,177 @@
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React, { useEffect, useRef } from "react";
+import { useAppContext } from "features/AppContext";
+import { CanvasNoRouter } from "entities/Canvas";
+import { ContextPanel } from "features/ContextPanel";
+import { ExportVisible } from "features/ExportPanel/ExportVisible";
+import { TextEditors } from "features/TextEditor/TextEditor";
+import { ToastProvider } from "features/ToastProvider";
+import { ViewModeGuard } from "features/ViewModeGuard";
+import { ZoomPanel } from "features/ZoomPanel";
+import { LinksProvider } from "../LinksProvider/LinksProvider";
+import style from "./AppView.module.css";
+import { InactiveBoardHidder } from "./InactiveBoardHidder";
+import { QuickAddPanel } from "./QuickAddPanel";
+import { LocalFileSaveProgress } from "features/LocalFileSavingProgress";
+import { ToolsPanel } from "features/ToolsPanel";
+import { ShapesPanelContextProvider } from "features/ShapesPanel";
+import { useAIContext } from "entities/AIInput/AIContext";
+import { HyperLink } from "features/hyperLink/HyperLink";
+import { useHyperLinkContext } from "features/hyperLink/HyperLinkContext";
+import { VideoPlayer } from "features/VideoPlayer/VideoPlayer";
+import { AudioPlayer } from "features/AudioPlayer/AudioPlayer";
+import { ItemsProvider } from "features/ItemsProvider";
+import { ErrorBoundary } from "features/ErrorBoundary/ErrorBoundary";
+
+export function LocalAppView(): JSX.Element {
+	const { app, board } = useAppContext();
+	const forceUpdate = useForceUpdate();
+	const animationId = useRef<number | null>(null);
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const { setQuotedText, tryToSendGenerationRequest } = useAIContext();
+	const { setHyperLinkData, hyperLinkData } = useHyperLinkContext();
+	let canPasteAgain = true;
+
+	const itemsComponents = {
+		Video: VideoPlayer,
+		Audio: AudioPlayer,
+	};
+
+	function update(): void {
+		if (animationId.current) {
+			return; // Function already scheduled to run
+		}
+
+		animationId.current = requestAnimationFrame(() => {
+			forceUpdate();
+			animationId.current = null;
+		});
+	}
+
+	useEffect(() => {
+		const handleCtrlWheel = (ev: WheelEvent): void => {
+			if (ev.ctrlKey) {
+				ev.preventDefault();
+			}
+		};
+
+		const handlerOnKeyUp = (event: KeyboardEvent): void => {
+			controller.onKeyUp(event);
+			canPasteAgain = true;
+		};
+
+		const handlerOnPaste = (event: ClipboardEvent): void => {
+			if (!canPasteAgain) {
+				return;
+			}
+			controller.onPaste(event);
+			canPasteAgain = false;
+		};
+
+		app.boardSubject.subscribe(update);
+		const container = containerRef.current;
+		const controller = app.controller;
+		if (container) {
+			document.addEventListener("touchmove", preventDefault, {
+				passive: false,
+			});
+			container.addEventListener("wheel", controller.onWheel, {
+				capture: true,
+				passive: false,
+			});
+			document.addEventListener("wheel", handleCtrlWheel, {
+				passive: false,
+			});
+			window.addEventListener("resize", controller.onResize);
+			container.addEventListener(
+				"contextmenu",
+				controller.onContextMenu,
+				{
+					capture: false,
+					passive: false,
+				},
+			);
+			container.addEventListener(
+				"pointermove",
+				controller.onPointerMove,
+				{
+					capture: true,
+				},
+			);
+			window.addEventListener("keydown", controller.onKeyDown);
+			window.addEventListener("keyup", handlerOnKeyUp);
+			window.addEventListener("copy", controller.onCopy);
+			window.addEventListener("paste", handlerOnPaste);
+			window.addEventListener("drop", controller.onDrop);
+			window.addEventListener("dragover", event =>
+				event.preventDefault(),
+			);
+		}
+
+		return () => {
+			app.boardSubject.unsubscribe(update);
+
+			if (container) {
+				document.removeEventListener("touchmove", preventDefault);
+				container.removeEventListener("wheel", controller.onWheel);
+				document.removeEventListener("wheel", handleCtrlWheel);
+				window.removeEventListener("resize", controller.onResize);
+				container.removeEventListener(
+					"contextmenu",
+					controller.onContextMenu,
+				);
+				container.removeEventListener(
+					"pointermove",
+					controller.onPointerMove,
+				);
+				window.removeEventListener("keydown", controller.onKeyDown);
+				window.removeEventListener("keyup", handlerOnKeyUp);
+				window.removeEventListener("copy", controller.onCopy);
+				window.removeEventListener("paste", handlerOnPaste);
+				window.removeEventListener("drop", controller.onDrop);
+			}
+		};
+	}, [containerRef.current]);
+
+	return (
+		<ErrorBoundary>
+			<div className={style.wrapper}>
+				<InactiveBoardHidder>
+					<div ref={containerRef}>
+						<CanvasNoRouter app={app} board={board}>
+							<LinksProvider />
+						</CanvasNoRouter>
+						<TextEditors
+							app={app}
+							board={board}
+							setQuotedText={setQuotedText}
+							setHyperLinkData={setHyperLinkData}
+							hyperLinkData={hyperLinkData}
+							sendGenerationRequest={tryToSendGenerationRequest}
+						/>
+					</div>
+				</InactiveBoardHidder>
+				<ExportVisible>
+					<ShapesPanelContextProvider>
+						<ToolsPanel />
+					</ShapesPanelContextProvider>
+				</ExportVisible>
+				<InactiveBoardHidder>
+					<ZoomPanel />
+				</InactiveBoardHidder>
+				<HyperLink />
+				<ItemsProvider itemsComponents={itemsComponents} />
+				<ViewModeGuard>
+					<ContextPanel />
+					<QuickAddPanel />
+				</ViewModeGuard>
+				<ToastProvider />
+				<LocalFileSaveProgress />
+			</div>
+		</ErrorBoundary>
+	);
+}
+
+function preventDefault(event: TouchEvent): void {
+	event.preventDefault();
+}

package/src/features/AppView/NoBoardIsOpen.module.css

@@ -0,0 +1,29 @@
+.container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+
+.innerContainer {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding: 0px;
+	gap: 24px;
+}
+
+.title {
+	font-size: 2em;
+	font-weight: 400;
+}
+
+.btns {
+	display: flex;
+	gap: 16px;
+}
+
+.btn {
+	text-wrap: nowrap;
+	padding: 10px 12px;
+}

package/src/features/AppView/NoBoardIsOpen.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useRenameContext } from "features/Rename";
+import { useSidePanelContext } from "features/SidePanel/SidePanelContext";
+import styles from "./NoBoardIsOpen.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { useAppContext } from "features/AppContext";
+import { useIsPhoneScreen } from "shared/lib/useIsPhoneScreen";
+
+const NoBoardIsOpen: React.FC = () => {
+	const { t } = useTranslation();
+	const { openMenu, handleAddNew, isOpen } = useSidePanelContext();
+	const { setRenamingId, setNewName } = useRenameContext();
+	const { board } = useAppContext();
+	const isProneScreen = useIsPhoneScreen();
+
+	const handleOpenMenu: React.MouseEventHandler = event => {
+		event.stopPropagation();
+		event.preventDefault();
+		if (isOpen) {
+			openMenu(1500);
+		} else {
+			openMenu();
+		}
+	};
+
+	const handleCreateNewBoard: React.MouseEventHandler = event => {
+		event.preventDefault();
+		event.stopPropagation();
+		handleAddNew(boardId => {
+			if (!isProneScreen) {
+				openMenu();
+			}
+			setNewName(t("board.untitled"));
+			setRenamingId(boardId);
+		});
+	};
+
+	if (board.getBoardId() !== "blank") {
+		return null;
+	}
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.innerContainer}>
+				<span className={styles.title}>{t("noBoard.title")}</span>
+				<div className={styles.btns}>
+					<UiButton
+						className={styles.btn}
+						variant="quaternary"
+						onClick={handleOpenMenu}
+						size="lg"
+					>
+						{t("noBoard.chooseBoard")}
+					</UiButton>
+					<UiButton
+						className={styles.btn}
+						onClick={handleCreateNewBoard}
+						size="lg"
+					>
+						{t("noBoard.createNewBoard")}
+					</UiButton>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default NoBoardIsOpen;

package/src/features/AppView/QuickAddPanel/QuickAddPanel.module.css

@@ -0,0 +1,12 @@
+.panel {
+	display: grid;
+	grid-template-columns: repeat(3, 32px);
+}
+
+.wrapper {
+	margin-top: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 8px;
+}