microboard-ui-temp 0.0.3

package/src/pages/WheelLogger/WheelLogger.module.css

@@ -0,0 +1,32 @@
+.loggerContainer {
+	position: fixed;
+	bottom: 10px;
+	left: 10px;
+	padding: 10px;
+	background-color: rgba(0, 0, 0, 0.7);
+	color: white;
+	font-size: 12px;
+	z-index: 1000;
+	max-height: 300px;
+	overflow-y: auto;
+	width: 350px;
+}
+
+.loggerTitle {
+	font-weight: bold;
+}
+
+.loggerMouse {
+	margin-top: 5px;
+}
+
+.loggerEvents {
+	margin-top: 10px;
+}
+
+.loggerButton {
+	margin-top: 20px;
+	color: black;
+	cursor: pointer;
+	font-size: 12px;
+}

package/src/pages/WheelLogger/WheelLogger.tsx

@@ -0,0 +1,94 @@
+import { LogEntryType, WheelEventLogger } from "App/Wheel/WheelEventLogger";
+import React, { useLayoutEffect, useRef, useState } from "react";
+import styles from "./WheelLogger.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { AppContext, useAppContext } from "features/AppContext";
+import { AppView } from "features/AppView";
+import { useBoardsList } from "App/useBoardsList";
+
+export const WheelEventLoggerPage: React.FC = () => {
+	const { app } = useAppContext();
+	const board = app.getBoard();
+	const boardsList = useBoardsList();
+	const [events, setEvents] = useState<LogEntryType[]>([]);
+	const [mousePosition, setMousePosition] = useState<{
+		x: number;
+		y: number;
+	}>({ x: 0, y: 0 });
+	const loggerRef = useRef<WheelEventLogger | null>(null);
+
+	useLayoutEffect(() => {
+		const init = async (): Promise<void> => {
+			try {
+				await boardsList.loadBoards();
+				const boardId = await boardsList.createBoard();
+				await app.openBoard(boardId);
+				app.render();
+
+				loggerRef.current = new WheelEventLogger(
+					setEvents,
+					setMousePosition,
+				);
+
+				console.log("Logger initialized successfully");
+			} catch (error) {
+				console.error("Initialization failed:", error);
+			}
+		};
+
+		init();
+
+		return () => {
+			loggerRef.current?.cleanup();
+		};
+	}, []);
+
+	const exportData = (): void => {
+		const blob = new Blob([JSON.stringify(events, null, 2)], {
+			type: "application/json",
+		});
+		const a = document.createElement("a");
+		a.href = URL.createObjectURL(blob);
+		const browserInfo =
+			navigator.userAgent.match(
+				/(Firefox|Chrome|Safari|Edge|Opera)/,
+			)?.[0] || "UnknownBrowser";
+		a.download = `wheel_events_${browserInfo}.json`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+	};
+
+	if (!board) {
+		return <div></div>;
+	}
+
+	return (
+		<>
+			<AppContext.Provider value={{ app, board }}>
+				<AppView />
+			</AppContext.Provider>
+			<div className={styles.loggerContainer}>
+				<div className={styles.loggerTitle}>Wheel Event Logger</div>
+				<div className={styles.loggerMouse}>
+					Mouse: ({mousePosition.x}, {mousePosition.y})
+				</div>
+				<div className={styles.loggerEvents}>
+					{events.slice(0, 10).map((entry, index) => (
+						<div key={index}>
+							{`ΔX: ${entry.deltaX}, ΔY: ${entry.deltaY}, Mode: ${entry.deltaMode}`}
+						</div>
+					))}
+				</div>
+				<UiButton
+					variant="secondary"
+					className={styles.loggerButton}
+					onClick={exportData}
+					size="sm"
+				>
+					Export Data
+				</UiButton>
+			</div>
+		</>
+	);
+};

package/src/pages/layouts/AppLayout.tsx

@@ -0,0 +1,86 @@
+import type { App } from "App";
+import React from "react";
+import { Outlet } from "react-router-dom";
+import { AIContextProvider } from "entities/AIInput";
+import { AppContext } from "features/AppContext";
+import { ContextMenuContextProvider } from "features/ContextMenu";
+import { OpenedFoldersContextProvider } from "entities/Folder";
+import { HyperLinkContextProvider } from "features/hyperLink";
+import ModalsWrapper from "features/Modal/ModalsWrapper";
+import { RenameContextProvider } from "features/Rename";
+import { SidePanelContextProvider } from "features/SidePanel/SidePanelContext";
+import { ToastProvider } from "features/ToastProvider";
+import { LocalSidePanelContextProvider } from "features/SidePanel/LocalSidePanelContext";
+import { CryptoWrapper } from "features/CryptoWrapper";
+import { CommentsContextProvider } from "entities/comments/CommentsContext";
+
+type Props = {
+	app: App;
+};
+
+type ComponentWithChildren = React.ComponentType<{
+	children?: React.ReactNode;
+}>;
+
+function compose(components: ComponentWithChildren[]): React.FC {
+	return function ComposedComponent({
+		children,
+	}: {
+		children?: React.ReactNode;
+	}) {
+		return components.reduceRight<React.ReactElement | null>(
+			(acc, Component) => {
+				return <Component>{acc}</Component>;
+			},
+			children ? <>{children}</> : <React.Fragment />,
+		);
+	};
+}
+
+const PROVIDERS: ComponentWithChildren[] = [
+	CryptoWrapper,
+	HyperLinkContextProvider,
+	AIContextProvider,
+	CommentsContextProvider,
+	ModalsWrapper,
+	ContextMenuContextProvider,
+	RenameContextProvider,
+	OpenedFoldersContextProvider,
+	SidePanelContextProvider,
+];
+
+const LOCAL_PROVIDERS: ComponentWithChildren[] = [
+	HyperLinkContextProvider,
+	AIContextProvider,
+	LocalSidePanelContextProvider,
+];
+
+const Provider = compose(PROVIDERS);
+const LocalProvider = compose(LOCAL_PROVIDERS);
+
+export function AppLayout({ app }: Props): JSX.Element {
+	const board = app.getBoard();
+	return (
+		<AppContext.Provider value={{ app, board }}>
+			<Provider>
+				<Outlet />
+				<ToastProvider />
+			</Provider>
+		</AppContext.Provider>
+	);
+}
+
+export function LocalAppLayout({
+	app,
+	children,
+}: Props & { children?: React.ReactNode }): JSX.Element {
+	const board = app.getBoard();
+	return (
+		<AppContext.Provider value={{ app, board }}>
+			<LocalProvider>
+				{children}
+				<Outlet />
+			</LocalProvider>
+		</AppContext.Provider>
+	);
+}

package/src/pages/layouts/AuthLayout/AuthLayout.module.css

@@ -0,0 +1,80 @@
+.authView {
+	width: 100%;
+
+	display: grid;
+	grid-template-rows: max-content 1fr 64px;
+	align-items: center;
+	justify-content: center;
+	justify-items: center;
+	/* flex-direction: column; */
+	/* align-items: center; */
+	/* justify-content: center; */
+
+	height: 100vh;
+
+	font-family: "Manrope", "Arial";
+}
+
+.navbar {
+	width: 1280px;
+	min-height: 64px;
+	z-index: 100;
+}
+
+.content {
+	max-width: 500px;
+	min-width: 300px;
+	width: 80%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: center;
+}
+
+@media screen and (max-width: 1280px) {
+	.authView .content {
+		width: 500px;
+		padding: 0 16px;
+	}
+
+	.authView .navbar {
+		width: 100%;
+	}
+}
+
+@media (max-width: 640px) {
+	.authView .navbar {
+		width: 100%;
+	}
+
+	.authView .content {
+		width: 100%;
+		/*padding: 0 12px;*/
+	}
+}
+
+.policy {
+	margin-top: auto;
+	margin-bottom: 40px;
+	font-family: "Manrope", "Arial";
+	font-size: 14px;
+	color: rgba(15, 19, 36, 0.6);
+	text-align: center;
+}
+
+.policyLink {
+	position: relative;
+	color: rgba(15, 19, 36, 0.6);
+	text-decoration: none;
+}
+
+.policyLink::after {
+	content: "";
+	position: absolute;
+	bottom: -3px;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background-color: rgba(10, 15, 41, 0.08);
+}

package/src/pages/layouts/AuthLayout/AuthLayout.tsx

@@ -0,0 +1,74 @@
+import QuickAddButtonsClear from "features/QuickAddButtons/QuickAddButtonsClear";
+import { Navbar } from "features/Widgets/Navbar/Navbar";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { OuterLink } from "shared/ui-lib/OuterLink";
+import { notify } from "shared/ui-lib/Toast";
+import style from "./AuthLayout.module.css";
+
+type Props = { showPolicies?: boolean };
+
+export const AuthLayout = ({ showPolicies }: Props) => {
+	const location = useLocation();
+	const navigate = useNavigate();
+	const { t, i18n } = useTranslation();
+
+	useEffect(() => {
+		const params = new URLSearchParams(location.search);
+		if (params.get("authException") === "true") {
+			setTimeout(() => {
+				notify({
+					header: t("auth.unknownError"),
+					body: t("auth.googleError"),
+					variant: "error",
+				});
+			}, 0);
+			params.delete("authException");
+			navigate({ search: params.toString() }, { replace: true });
+		}
+	}, [location, navigate]);
+
+	return (
+		<QuickAddButtonsClear>
+			<div className={style.authView}>
+				<div className={style.navbar}>
+					<Navbar />
+				</div>
+				<div className={style.content}>
+					<Outlet />
+				</div>
+				{showPolicies && (
+					<div className={style.policy}>
+						{t("auth.policyWith")}{" "}
+						<OuterLink
+							href={
+								i18n.language === "ru"
+									? window.location.origin +
+										"/pdf/terms_conditions_ru.pdf"
+									: window.location.origin +
+										"/pdf/terms_conditions_en.pdf"
+							}
+							className={style.policyLink}
+						>
+							{t("auth.termsAndConditions")}
+						</OuterLink>{" "}
+						{t("common.and")}{" "}
+						<OuterLink
+							href={
+								i18n.language === "ru"
+									? window.location.origin +
+										"/pdf/privacy_policy_ru.pdf"
+									: window.location.origin +
+										"/pdf/privacy_policy_en.pdf"
+							}
+							className={style.policyLink}
+						>
+							{t("auth.privacyPolicy")}
+						</OuterLink>
+					</div>
+				)}
+			</div>
+		</QuickAddButtonsClear>
+	);
+};

package/src/pages/layouts/AuthLayout/Tail.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface Props {
+	width?: number;
+	height?: number;
+}
+
+export const Tail: React.FC<Props> = ({ width = 21, height = 20 }) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 21 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M13.9773 9.16591L9.50732 4.69591L10.6857 3.51758L17.1673 9.99924L10.6857 16.4809L9.50732 15.3026L13.9773 10.8326H3.83398V9.16591H13.9773Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+};

package/src/pages/layouts/AuthLayout/index.ts

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

package/src/production.entrypoint.ts

@@ -0,0 +1,39 @@
+/* eslint-disable no-var */
+import { App, createApp } from "App/App";
+import "features/Cursors";
+import { initInter } from "initI18N";
+import "./index.css";
+
+declare global {
+	interface Window {
+		app: App;
+		showDebug: boolean;
+		enableTemplateCreating: boolean;
+		enableVideos: boolean;
+		enableGames: boolean;
+		enableLogger: () => void;
+		disableLogger: () => void;
+	}
+}
+
+// var showDebug = isMicroboard() ? true : false;
+window.showDebug = false;
+window.enableTemplateCreating = false;
+window.enableDiagrams = false;
+window.enableVideos = true;
+window.enableGames = false;
+
+async function initializeApp() {
+	await initInter();
+	window.app = createApp();
+	window.enableLogger = window.app.enableLogger;
+	window.disableLogger = window.app.disableLogger;
+
+	window.app.account.init().finally(() => {
+		window.app.connection.connect().then(() => {
+			window.app.render();
+		});
+	});
+}
+
+initializeApp();