microboard-ui-temp 0.0.3

package/src/features/ContextPanel/Buttons/AIModel/AIModel.tsx

@@ -0,0 +1,97 @@
+import { useAccount } from "App/useAccount";
+import { Dropdown } from "entities/AIInput";
+import { useAIContext } from "entities/AIInput/AIContext";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import btnStyle from "../ContextPanelButton.module.css";
+
+import clsx from "clsx";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { ButtonWithMenu } from "../ButtonWithMenu";
+import style from "./AIModel.module.css";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+
+type Props = {
+	rounded?: "left" | "right" | "none" | "full";
+};
+
+const MENU_NAME = "AIModelSelector";
+
+export function AIModel({ rounded = "none" }: Props): React.ReactElement {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { t } = useTranslation();
+	const account = useAccount();
+	const { model } = useAIContext();
+
+	const handleClick = () => {
+		toggleMenu(MENU_NAME);
+	};
+
+	const closeMenu = () => {
+		if (openedMenu === MENU_NAME) {
+			toggleMenu(MENU_NAME);
+		}
+	};
+
+	return (
+		// <div>
+		// 	<UiButton
+		// 		className={clsx(btnStyle.contextPanelButton, btnStyle.bold)}
+		// 		id="SelectAiModel"
+		// 		tooltip={t("contextPanel.ai.model")}
+		// 		tooltipPosition="top"
+		// 		onClick={handleClick}
+		// 		variant="secondary"
+		// 		active={openedMenu === MENU_NAME}
+		// 		rounded={rounded}
+		// 	>
+		// 		{t(`ai.models.${model}.mobileTitle`)}
+		// 	</UiButton>
+		// 	{openedMenu === MENU_NAME && (
+		// 		<Dropdown
+		// 			isPhoneScreen={true}
+		// 			setIsDropdownOpen={closeMenu}
+		// 			account={account}
+		// 		/>
+		// 	)}
+		// </div>
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={verticalAlign => (
+				<UiButton
+					className={clsx(btnStyle.contextPanelButton, btnStyle.bold)}
+					id="SelectAiModel"
+					tooltip={t("contextPanel.ai.model")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					rounded={rounded}
+				>
+					{t(`ai.models.${model}.mobileTitle`)}
+				</UiButton>
+			)}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+					className={style.menu}
+					padding={0}
+				>
+					<Dropdown
+						isPhoneScreen={true}
+						setIsDropdownOpen={closeMenu}
+						account={account}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

package/src/features/ContextPanel/Buttons/AIModel/index.ts

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

package/src/features/ContextPanel/Buttons/AIModel.tsx

@@ -0,0 +1,95 @@
+import { useAccount } from "App/useAccount";
+import { Dropdown } from "entities/AIInput";
+import { useAIContext } from "entities/AIInput/AIContext";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import btnStyle from "../ContextPanelButton.module.css";
+
+import clsx from "clsx";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { ButtonWithMenu } from "../ButtonWithMenu";
+import style from "./AIModel.module.css";
+import { UiPanel } from "shared/ui-lib/UiPanel";
+
+type Props = {
+	rounded?: "left" | "right" | "none" | "full";
+};
+
+const MENU_NAME = "AIModelSelector";
+
+export function AIModel({ rounded = "none" }: Props): React.ReactElement {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { t } = useTranslation();
+	const account = useAccount();
+	const { model } = useAIContext();
+
+	const handleClick = () => {
+		toggleMenu(MENU_NAME);
+	};
+
+	const closeMenu = () => {
+		if (openedMenu === MENU_NAME) {
+			toggleMenu(MENU_NAME);
+		}
+	};
+
+	return (
+		// <div>
+		// 	<UiButton
+		// 		className={clsx(btnStyle.contextPanelButton, btnStyle.bold)}
+		// 		id="SelectAiModel"
+		// 		tooltip={t("contextPanel.ai.model")}
+		// 		tooltipPosition="top"
+		// 		onClick={handleClick}
+		// 		variant="secondary"
+		// 		active={openedMenu === MENU_NAME}
+		// 		rounded={rounded}
+		// 	>
+		// 		{t(`ai.models.${model}.mobileTitle`)}
+		// 	</UiButton>
+		// 	{openedMenu === MENU_NAME && (
+		// 		<Dropdown
+		// 			isPhoneScreen={true}
+		// 			setIsDropdownOpen={closeMenu}
+		// 			account={account}
+		// 		/>
+		// 	)}
+		// </div>
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={verticalAlign => (
+				<UiButton
+					className={clsx(btnStyle.contextPanelButton, btnStyle.bold)}
+					id="SelectAiModel"
+					tooltip={t("contextPanel.ai.model")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					rounded={rounded}
+				>
+					{t(`ai.models.${model}.mobileTitle`)}
+				</UiButton>
+			)}
+		>
+			{verticalAlign => (
+				<UiPanel
+					rounded={verticalAlign === "bottom" ? "bottom" : "full"}
+					className={style.menu}
+				>
+					<Dropdown
+						isPhoneScreen={true}
+						setIsDropdownOpen={closeMenu}
+						account={account}
+					/>
+				</UiPanel>
+			)}
+		</ButtonWithMenu>
+	);
+}

package/src/features/ContextPanel/Buttons/AddList/AddList.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useAppContext } from "features/AppContext";
+import { ButtonWithMenu } from "features/ContextPanel/Buttons/ButtonWithMenu";
+import { usePanelContext } from "features/ContextPanel/PanelContext";
+import { Icon } from "shared/ui-lib/Icon";
+import { UiPanel } from "shared/ui-lib/UiPanel/UiPanel";
+import btnStyle from "../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { ListType } from "microboard-temp";
+
+const MENU_NAME = "AddList";
+
+export function AddList(): React.ReactElement | null {
+	const { toggleMenu, openedMenu, panelMbr, windowHeight } =
+		usePanelContext();
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const richText = board.selection.items.getSingle()?.getRichText();
+	if (!richText) {
+		return null;
+	}
+
+	const listType = richText.editor.getListTypeAtSelectionStart();
+
+	const handleClick = (): void => {
+		toggleMenu(MENU_NAME);
+	};
+
+	const handleListTypePick = (listType: ListType): void => {
+		richText.editor.toggleListType(listType);
+		toggleMenu(MENU_NAME);
+	};
+
+	return (
+		<ButtonWithMenu
+			menuName={MENU_NAME}
+			openedMenu={openedMenu}
+			panelMbr={panelMbr}
+			windowHeight={windowHeight}
+			align="left"
+			button={
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id="addListBtn"
+					tooltip={t("contextPanel.addList.tooltip")}
+					tooltipPosition="top"
+					onClick={handleClick}
+					variant="secondary"
+					active={openedMenu === MENU_NAME}
+					hideTooltip={openedMenu === MENU_NAME}
+					rounded="none"
+				>
+					<Icon width={18} height={18} iconName="BulletedList" />
+				</UiButton>
+			}
+		>
+			<UiPanel rounded="bottom" vertical={false} padding={12} gap={8}>
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id={"addList-ul"}
+					onClick={() => handleListTypePick("ul_list")}
+					variant="secondary"
+					rounded="full"
+					active={listType === "ul_list"}
+				>
+					<Icon iconName="BulletedList" width={20} height={20} />
+				</UiButton>
+				<UiButton
+					className={btnStyle.contextPanelButton}
+					id={"addList-ol"}
+					onClick={() => handleListTypePick("ol_list")}
+					variant="secondary"
+					rounded="full"
+					active={listType === "ol_list"}
+				>
+					<Icon iconName="NumberedList" width={20} height={20} />
+				</UiButton>
+			</UiPanel>
+		</ButtonWithMenu>
+	);
+}

package/src/features/ContextPanel/Buttons/AddList/index.ts

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

package/src/features/ContextPanel/Buttons/ButtonWithMenu/ButtonWithMenu.tsx

@@ -0,0 +1,107 @@
+import { Mbr } from "microboard-temp";
+import clsx from "clsx";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
+import style from "./UiButtonWithMenu.module.css";
+
+type RenderNode = (
+	verticalAlign: "middle" | "top" | "bottom",
+	horizontalAlign: "Left" | "Right" | "Center" | "None",
+) => ReactNode;
+
+type Props = {
+	children: ReactNode | RenderNode;
+	button: ReactNode | RenderNode;
+	menuName: string;
+	openedMenu: string;
+	panelMbr: Mbr;
+	windowHeight: number;
+	windowWidth?: number;
+	align?: "center" | "left" | "right";
+	offset?: "Left" | "Right" | "Center";
+};
+
+export function ButtonWithMenu({
+	button,
+	menuName,
+	openedMenu,
+	children,
+	panelMbr,
+	windowHeight,
+	windowWidth,
+	align = "center",
+	offset,
+}: Props): React.ReactElement | null {
+	const menuRef = useRef<HTMLDivElement>(null);
+	const [verticalAlign, setVerticalAlign] = useState<
+		"bottom" | "middle" | "top"
+	>("bottom");
+	const [horizontalAlign, setHorizontalAlign] = useState<
+		"Left" | "Right" | "Center" | "None"
+	>(offset || "Left");
+
+	const setMenuVerticalAlign = (): void => {
+		const menu = menuRef.current;
+		if (!menu) {
+			return;
+		}
+		const menuHeight = menu.getBoundingClientRect().height;
+
+		if (panelMbr.bottom + menuHeight < windowHeight) {
+			setVerticalAlign("bottom");
+			return;
+		}
+
+		if (panelMbr.top < windowHeight) {
+			setVerticalAlign("top");
+			return;
+		}
+
+		setVerticalAlign("middle");
+	};
+
+	const setMenuHorizontalAlign = (): void => {
+		const menu = menuRef.current;
+		if (!menu) {
+			return;
+		}
+
+		const menuWidth = menu.getBoundingClientRect().width;
+		if (windowWidth && panelMbr.right + menuWidth > windowWidth) {
+			setHorizontalAlign("Center");
+			return;
+		}
+
+		setHorizontalAlign("None");
+	};
+
+	useEffect(() => {
+		setMenuHorizontalAlign();
+		setMenuVerticalAlign();
+	}, [panelMbr, windowHeight, windowWidth]);
+
+	return (
+		<div className={style.container}>
+			{typeof button === "function"
+				? button(verticalAlign, horizontalAlign)
+				: button}
+			<div
+				ref={menuRef}
+				className={clsx([
+					style.menu,
+					style[verticalAlign],
+					style[align],
+					style[openedMenu === menuName ? "opened" : "closed"],
+					// offset &&
+					// 	verticalAlign === "middle" &&
+					// 	style[`offset${offset}`],
+					style[`offset${horizontalAlign}`],
+				])}
+			>
+				{typeof children === "function"
+					? children(verticalAlign, horizontalAlign)
+					: children}
+			</div>
+			{/* )} */}
+		</div>
+	);
+}

package/src/features/ContextPanel/Buttons/ButtonWithMenu/UiButtonWithMenu.module.css

@@ -0,0 +1,49 @@
+.container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+
+.menu {
+	position: absolute;
+	z-index: 20;
+
+	--offset: 0px;
+}
+
+.offset {
+	--offset: 8px;
+}
+
+.top {
+	bottom: calc(100% + var(--offset));
+}
+
+.bottom {
+	top: calc(100% + var(--offset));
+}
+
+.offset-left {
+	left: calc(100% + var(--offset));
+}
+
+.offset-right {
+	right: calc(100% + var(--offset));
+}
+
+.offset-center {
+	right: 0;
+}
+
+.middle {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.opened {
+	visibility: visible;
+}
+
+.closed {
+	visibility: hidden;
+}

package/src/features/ContextPanel/Buttons/ButtonWithMenu/index.ts

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

package/src/features/ContextPanel/Buttons/CardGame/Card/CreateDeck.tsx

@@ -0,0 +1,65 @@
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "../../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton/UiButton";
+import { Card, Deck } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+	rounded?: string;
+	onlyCards: boolean;
+}
+
+export function CreateDeck({ rounded = "none", onlyCards }: Props) {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+	const single = board.selection.items.getSingle();
+	if (single && single.itemType === "Deck") {
+		return null;
+	}
+
+	const cardsOrDecks = board.selection.items.list();
+
+	const handleClick = (): void => {
+		if (onlyCards) {
+			board.add(new Deck(board, "", undefined, cardsOrDecks));
+		} else {
+			let mainDeck: Deck | null = null;
+			const cards: Card[] = [];
+			cardsOrDecks.forEach(item => {
+				if (item.itemType === "Card") {
+					cards.push(item);
+				} else if (item.itemType === "Deck") {
+					if (mainDeck) {
+						cards.push(...mainDeck.getDeck());
+						board.remove(mainDeck);
+						mainDeck = item;
+					} else {
+						mainDeck = item;
+					}
+				}
+			});
+			if (!mainDeck) {
+				board.add(new Deck(board, "", undefined, cards));
+				return;
+			}
+			mainDeck.addCards(cards);
+			board.selection.items.removeAll();
+		}
+	};
+
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id="create-deck"
+			tooltip={t("contextPanel.gameItems.deck.create")}
+			tooltipPosition="top"
+			onClick={handleClick}
+			variant="secondary"
+			rounded={rounded}
+		>
+			<Icon iconName="Plus" />
+		</UiButton>
+	);
+}

package/src/features/ContextPanel/Buttons/CardGame/Card/FlipCard.tsx

@@ -0,0 +1,41 @@
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "../../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton/UiButton";
+import { Card } from "microboard-temp";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+	rounded?: string;
+}
+
+export function FlipCard({ rounded = "none" }: Props) {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const single = board.selection.items.getSingle();
+
+	if (!single || single.itemType !== "Card") {
+		return null;
+	}
+
+	const handleClick = (): void => {
+		const card = single as Card;
+		card.toggleIsOpen();
+	};
+
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id="flip-card"
+			tooltip={t("contextPanel.gameItems.card.flip")}
+			tooltipPosition="top"
+			onClick={handleClick}
+			variant="secondary"
+			rounded={rounded}
+		>
+			<Icon iconName="ToggleCursors" />
+		</UiButton>
+	);
+}

package/src/features/ContextPanel/Buttons/CardGame/Deck/GetCard.tsx

@@ -0,0 +1,61 @@
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "../../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton/UiButton";
+import { useTranslation } from "react-i18next";
+import { Card, Deck } from "microboard-temp";
+
+interface Props {
+	cardPosition: "random" | "top" | "bottom";
+	rounded?: string;
+}
+
+export function GetCard({ cardPosition, rounded = "none" }: Props) {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const single = board.selection.items.getSingle();
+
+	if (!single || single.itemType !== "Deck") {
+		return null;
+	}
+
+	const handleClick = (): void => {
+		let card: Card;
+		const deck = single as Deck;
+		switch (cardPosition) {
+			case "random":
+				card = deck.getRandomCard();
+				break;
+			case "top":
+				card = deck.getTopCard();
+				break;
+			case "bottom":
+				card = deck.getBottomCard();
+				break;
+			default:
+				card = deck.getRandomCard();
+				break;
+		}
+		const { left, top } = deck.getMbr();
+		card.transformation.translateTo(left, top - 200);
+		if (deck.getDeck().length === 0) {
+			board.remove(deck);
+		}
+	};
+
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id={`get-card-${cardPosition}`}
+			tooltip={t(`contextPanel.gameItems.deck.getCard.${cardPosition}`)}
+			tooltipPosition="top"
+			onClick={handleClick}
+			variant="secondary"
+			rounded={rounded}
+		>
+			<Icon iconName="Play" />
+		</UiButton>
+	);
+}

package/src/features/ContextPanel/Buttons/CardGame/Deck/ShuffleDeck.tsx

@@ -0,0 +1,39 @@
+import { Icon } from "shared/ui-lib/Icon";
+import React from "react";
+import { useAppContext } from "features/AppContext";
+import btnStyle from "../../ContextPanelButton.module.css";
+import { UiButton } from "shared/ui-lib/UiButton/UiButton";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+	rounded?: string;
+}
+
+export function ShuffleDeck({ rounded = "none" }: Props) {
+	const { board } = useAppContext();
+	const { t } = useTranslation();
+
+	const single = board.selection.items.getSingle();
+
+	if (!single || single.itemType !== "Deck") {
+		return null;
+	}
+
+	const handleClick = (): void => {
+		single.shuffleDeck();
+	};
+
+	return (
+		<UiButton
+			className={btnStyle.contextPanelButton}
+			id="shuffle-deck"
+			tooltip={t("contextPanel.gameItems.deck.shuffle")}
+			tooltipPosition="top"
+			onClick={handleClick}
+			variant="secondary"
+			rounded={rounded}
+		>
+			<Icon iconName="publicDrafts" />
+		</UiButton>
+	);
+}

package/src/features/ContextPanel/Buttons/CardGame/Dice/ChangeRange/ChangeRange.module.css

@@ -0,0 +1,53 @@
+.button {
+	gap: 0.6rem;
+	padding: 0;
+	padding-left: 0.6rem;
+	padding-right: 0;
+	min-width: 76px;
+}
+
+.font-size {
+	flex: 1 0;
+	height: 100%;
+}
+
+.input {
+	font-size: 1.6rem;
+	font-weight: 500;
+	max-width: 36px;
+	height: 100%;
+	text-align: center;
+	border: none;
+	outline: none;
+}
+
+.input:focus {
+	color: rgba(83, 20, 163, 1);
+}
+
+.input:not(:focus) {
+	cursor: pointer;
+	color: rgba(20, 21, 26, 1);
+}
+
+.size-list {
+	min-width: 52px;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	overflow: hidden;
+}
+
+.menuBottom {
+	border-bottom-left-radius: 0;
+}
+
+.chevron {
+	width: 2rem;
+	align-self: stretch;
+	min-height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	flex: 1 0;
+}