microboard-ui-temp 0.0.3

package/src/entities/Folder/Folder.tsx

@@ -0,0 +1,356 @@
+import {
+	SortableContext,
+	useSortable,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { useBoardsList } from "App/useBoardsList";
+import clsx from "clsx";
+import { useAppContext } from "features/AppContext";
+import { useContextMenuContext } from "features/ContextMenu";
+import { RenameInput, useRenameContext } from "features/Rename";
+import { useSidePanelContext } from "features/SidePanel";
+import React, {
+	useEffect,
+	useRef,
+	useState,
+	type CSSProperties,
+	type MouseEventHandler,
+	type SyntheticEvent,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { foldersApi, type boardsApiV2 } from "shared/apiV2";
+import { FolderType } from "shared/apiV2/folders";
+import { handleClickDetection } from "shared/lib/handleClickDetection";
+import { Icon } from "shared/ui-lib/Icon";
+import {
+	UiAdaptiveAccordion,
+	type AccordionState,
+} from "shared/ui-lib/UiAdaptiveAccordion";
+import { DragPlaceholder } from "./DragPlaceholder";
+import styles from "./Folder.module.css";
+import { FolderItem } from "./FolderItem";
+import { useOpenedFoldersContext } from "./OpenedFoldersContext";
+
+type Props = {
+	folder: foldersApi.Folder | null;
+	parentFolderId?: number;
+	handleOpenBoard?: (board: boardsApiV2.Board) => void;
+	accordionClassName?: string;
+	zIndex?: number;
+};
+
+// @ts-expect-error TODO add icons for all folder types
+export const folderIcons: Record<foldersApi.FolderType, IconId> = {
+	[foldersApi.FolderType.DRAFTS]: "publicDrafts",
+	[foldersApi.FolderType.ROOT]: "myBoards",
+	[foldersApi.FolderType.VISITED]: "sharedBoards",
+	[foldersApi.FolderType.NESTED]: "Folder",
+};
+
+export type FolderRef = {
+	openFoldersContainsBoard: (boardId: string) => void;
+};
+
+export const Folder = ({
+	folder,
+	handleOpenBoard,
+	accordionClassName,
+	zIndex = 0,
+	parentFolderId,
+}: Props) => {
+	const { open, close } = useContextMenuContext();
+	const { t } = useTranslation();
+	const { setNewName, setRenamingId, renamingId } = useRenameContext();
+	const { board } = useAppContext();
+	const { isOpen: isSidePanelOpen } = useSidePanelContext();
+	const boardsList = useBoardsList();
+	const boardId = board.getBoardId();
+	const accordionRef = useRef<AccordionState>(null);
+	const currentBoardRef = useRef<HTMLDivElement>();
+	const currentFolderRef = useRef<HTMLButtonElement>(null);
+	const { id, foldersRefState } = useOpenedFoldersContext();
+	const [openedByDragging, setOpenedByDragging] = useState(false);
+	const [originalPosition, setOriginalPosition] = useState<
+		Record<"left" | "top" | "width" | "height", number>
+	>({ left: 0, top: 0, width: 0, height: 0 });
+	const { isOver, setNodeRef } = useSortable({
+		id: folder?.id || "unknown",
+		data: folder ?? undefined,
+		disabled:
+			folder?.type !== foldersApi.FolderType.ROOT &&
+			folder?.type !== foldersApi.FolderType.NESTED,
+	});
+	const {
+		attributes,
+		listeners,
+		setNodeRef: setNodeRefHeader,
+		transform,
+		isDragging,
+	} = useSortable({
+		id: `header-${folder?.id ?? 0}`,
+		data: { ...folder, parentFolderId },
+		disabled:
+			folder?.type !== foldersApi.FolderType.ROOT &&
+			folder?.type !== foldersApi.FolderType.NESTED,
+	});
+
+	const isOverTimerRef = useRef<NodeJS.Timeout>();
+	const itemRef = useRef<HTMLDivElement | null>(null);
+
+	const style: CSSProperties | undefined = transform
+		? {
+				transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+				zIndex: 10000,
+			}
+		: undefined;
+
+	const openFolders = (id: string | number | null) => {
+		if (!id) {
+			return;
+		}
+
+		let folderIds;
+		if (typeof id === "string") {
+			folderIds = boardsList.getPathToBoard(id);
+		}
+
+		if (typeof id === "number") {
+			folderIds = boardsList.getPathToFolder(id);
+		}
+
+		if (!folderIds) {
+			return;
+		}
+
+		if (folder?.id && folderIds.includes(folder?.id)) {
+			accordionRef.current?.open();
+		}
+
+		setTimeout(() => {
+			if (currentBoardRef.current && folderIds.at(-1) === folder?.id) {
+				currentBoardRef.current.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+				});
+
+				foldersRefState?.scrollTo({ left: 0, behavior: "instant" });
+			}
+		}, 500);
+	};
+
+	useEffect(() => {
+		if (id) {
+			return openFolders(id);
+		}
+	}, [id, isSidePanelOpen]);
+
+	useEffect(() => {
+		if (isOver && !accordionRef.current?.isOpen) {
+			clearTimeout(isOverTimerRef.current);
+			isOverTimerRef.current = setTimeout(() => {
+				setOpenedByDragging(true);
+
+				accordionRef.current?.open();
+			}, 800);
+		}
+
+		// if (overFolderId !== folder?.id && !isOver && openedByDragging) {
+		// 	accordionRef.current?.close();
+		// }
+
+		if (!isOver) {
+			null;
+			clearTimeout(isOverTimerRef.current);
+		}
+
+		return () => {
+			clearTimeout(isOverTimerRef.current);
+		};
+	}, [isOver]);
+
+	useEffect(() => {
+		if (
+			(folder?.type === foldersApi.FolderType.DRAFTS ||
+				folder?.type === foldersApi.FolderType.ROOT ||
+				folder?.type === foldersApi.FolderType.VISITED) &&
+			folder?.items.length > 0
+		) {
+			if (isSidePanelOpen) {
+				accordionRef.current?.open();
+			}
+		}
+	}, [isSidePanelOpen]);
+
+	const calcOriginalPosition = () => {
+		if (isDragging && itemRef.current) {
+			const rect = itemRef.current.getBoundingClientRect();
+			setOriginalPosition({
+				top: rect.y,
+				left: rect.x,
+				width: rect.width,
+				height: rect.height,
+			});
+		}
+	};
+
+	useEffect(() => {
+		calcOriginalPosition();
+		document.addEventListener("scroll", calcOriginalPosition, true);
+
+		if (isDragging) {
+			accordionRef.current?.close();
+		}
+		return () => {
+			document.removeEventListener("scroll", calcOriginalPosition, true);
+		};
+	}, [isDragging]);
+
+	if (!folder || folder.type === foldersApi.FolderType.TRASH) {
+		return null;
+	}
+
+	const isRenameAllowed = folder.type === foldersApi.FolderType.NESTED;
+	const isRenaming = renamingId === folder.id;
+
+	const handleClick = (toggle: () => void): MouseEventHandler =>
+		handleClickDetection(
+			() => {
+				toggle();
+				close();
+			},
+			() => {
+				if (!isRenameAllowed) {
+					return;
+				}
+				setNewName(folder.title);
+				setRenamingId(folder.id);
+			},
+			200,
+		);
+
+	const handleContextMenuOpen: MouseEventHandler = ev => {
+		ev.preventDefault();
+		ev.stopPropagation();
+		open(ev.clientX, ev.clientY, undefined, folder.id);
+	};
+
+	const stopPropagation = (ev: SyntheticEvent) => {
+		ev.stopPropagation();
+	};
+
+	return (
+		<SortableContext
+			items={folder.items.map(({ id }) => id)}
+			strategy={verticalListSortingStrategy}
+		>
+			<UiAdaptiveAccordion
+				className={clsx(accordionClassName, styles.folder)}
+				style={{ zIndex, ...style }}
+				ref={accordionRef}
+				elemRef={setNodeRef}
+				renderHeader={({ toggle, isOpen }) => (
+					<div
+						className={styles.wrapper}
+						{...listeners}
+						{...attributes}
+						ref={node => {
+							setNodeRefHeader(node);
+							itemRef.current = node;
+						}}
+					>
+						{folder.type !== FolderType.VISITED && (
+							<button
+								className={styles.contextMenuBtn}
+								onClick={handleContextMenuOpen}
+								onMouseDown={stopPropagation}
+								onMouseUp={stopPropagation}
+							>
+								<Icon
+									width={16}
+									height={16}
+									iconName="ThreeDots"
+								/>
+							</button>
+						)}
+						<button
+							ref={currentFolderRef}
+							className={clsx(
+								styles.header,
+								isOver && styles.over,
+							)}
+							onClick={handleClick(toggle)}
+							onContextMenu={handleContextMenuOpen}
+						>
+							<span className={styles.icon}>
+								<Icon
+									width={20}
+									height={20}
+									iconName={isOpen ? "ArrowUp" : "ArrowDown"}
+								/>
+								<Icon
+									width={20}
+									height={20}
+									iconName={folderIcons[folder.type]}
+								/>
+							</span>
+							{isRenaming ? (
+								<RenameInput />
+							) : (
+								<span>{folder.title}</span>
+							)}
+						</button>
+					</div>
+				)}
+				renderContent={() => (
+					<div className={styles.contentWrapper}>
+						<div className={styles.content}>
+							{boardsList.getOverDndItem()?.id === folder.id && (
+								<DragPlaceholder />
+							)}
+							{folder.items.length > 0 ? (
+								<>
+									{folder.items.map((item, idx) => (
+										<>
+											{item.itemType === "board" ? (
+												<FolderItem
+													ref={el => {
+														if (
+															el &&
+															item.id === boardId
+														) {
+															currentBoardRef.current =
+																el;
+														}
+													}}
+													folder={folder}
+													key={item.id}
+													board={item}
+													handleOpenBoard={
+														handleOpenBoard
+													}
+												/>
+											) : (
+												<Folder
+													parentFolderId={folder.id}
+													zIndex={zIndex + 1}
+													key={item.id}
+													folder={item}
+												/>
+											)}
+										</>
+									))}
+								</>
+							) : (
+								<span className={styles.noContent}>
+									{t("sidePanel.folders.notAvailable")}
+								</span>
+							)}
+						</div>
+					</div>
+				)}
+			/>
+		</SortableContext>
+	);
+};
+
+Folder.displayName = "Folder";

package/src/entities/Folder/FolderItem.module.css

@@ -0,0 +1,89 @@
+.wrapper {
+	position: relative;
+	background-color: #ffffff;
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	padding: 6px 8px;
+	padding-right: 36px;
+	position: relative;
+	overflow: visible;
+	color: rgba(15, 19, 36, 0.6);
+	font-size: 14px;
+	font-weight: 500;
+	gap: 8px;
+	cursor: pointer;
+	transition: background 0.3s ease;
+	border-radius: 10px;
+	position: relative;
+	font-family: Manrope;
+	width: 100%;
+}
+
+.icon {
+	color: rgba(105, 107, 118, 1);
+	display: grid;
+	place-items: center;
+}
+
+.active,
+.dragging {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.active::before {
+	content: "";
+	position: absolute;
+	left: -8px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 3px;
+	height: 10px;
+	background-color: rgba(146, 79, 232, 1);
+	border-radius: 8px;
+}
+
+.contextMenuBtn {
+	place-items: center;
+	position: absolute;
+	right: 8px;
+	top: 50%;
+	transform: translateY(-50%);
+	cursor: pointer;
+	color: rgba(105, 107, 118, 1);
+	transition: background 0.3s ease;
+	border-radius: 4px;
+	padding: 2px;
+	z-index: 5;
+	display: none;
+}
+
+@media screen and (hover: hover) {
+	.item:hover:not(.disableHover),
+	.contextMenuBtn:hover ~ .item:not(.disableHover) {
+		background-color: rgba(10, 15, 41, 0.04);
+	}
+	.contextMenuBtn:hover {
+		background-color: rgba(10, 15, 41, 0.08);
+	}
+
+	.wrapper:hover .contextMenuBtn,
+	.contextMenuBtn:hover {
+		display: grid;
+	}
+}
+
+.title {
+	max-width: 100%;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.placeholder {
+	width: 100%;
+	height: 2px;
+	background-color: rgb(200, 202, 207);
+}

package/src/entities/Folder/FolderItem.tsx

@@ -0,0 +1,165 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { useAccount } from "App/useAccount";
+import clsx from "clsx";
+import { useAppContext } from "features/AppContext";
+import { useContextMenuContext } from "features/ContextMenu";
+import { RenameInput, useRenameContext } from "features/Rename";
+import React, {
+	forwardRef,
+	useCallback,
+	useRef,
+	type CSSProperties,
+	type MouseEventHandler,
+	type SyntheticEvent,
+} from "react";
+import { useNavigate } from "react-router-dom";
+import type { boardsApiV2, foldersApi } from "shared/apiV2";
+import { handleClickDetection } from "shared/lib/handleClickDetection";
+import { Icon } from "shared/ui-lib/Icon";
+import { DragPlaceholder } from "./DragPlaceholder";
+import styles from "./FolderItem.module.css";
+
+type Props = {
+	board: foldersApi.NestedBoard;
+	folder?: foldersApi.Folder | foldersApi.NestedFolder;
+	handleOpenBoard?: (board: boardsApiV2.Board) => void;
+};
+
+export const FolderItem = forwardRef<HTMLDivElement, Props>(
+	({ board, folder, handleOpenBoard }, ref) => {
+		const { app, board: currentBoard } = useAppContext();
+		const navigate = useNavigate();
+		const { open } = useContextMenuContext();
+		const { setRenamingId, setNewName, renamingId } = useRenameContext();
+		const account = useAccount();
+		const itemRef = useRef<HTMLDivElement | null>(null);
+
+		const {
+			attributes,
+			listeners,
+			transform,
+			setNodeRef,
+			isDragging,
+			isOver,
+		} = useSortable({
+			id: board.id,
+			data: { ...board, parentFolderId: folder?.id },
+		});
+
+		const style: CSSProperties | undefined = transform
+			? {
+					transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+					zIndex: 10000,
+				}
+			: undefined;
+
+		const currentBoardId = currentBoard?.getBoardId();
+		const isActive = currentBoardId === board.id;
+		const isRenaming = board.id === renamingId;
+		const hasOwnerRights = account.permissions.checkPermissions(
+			"owns",
+			"boards",
+			board.id,
+		);
+
+		const handleClick = useCallback(
+			handleClickDetection(
+				async ev => {
+					ev.preventDefault();
+					ev.stopPropagation();
+					if (handleOpenBoard) {
+						return handleOpenBoard(board);
+					}
+					await app.openBoard(board.id);
+					navigate(`/boards/${board.id}`);
+				},
+				ev => {
+					ev.preventDefault();
+					ev.stopPropagation();
+					if (!hasOwnerRights) {
+						return;
+					}
+					setRenamingId(board.id);
+					setNewName(board.title);
+				},
+				300,
+			),
+			[board],
+		);
+
+		const stopPropagation = (ev: SyntheticEvent) => {
+			ev.stopPropagation();
+		};
+
+		const handleContextMenuOpen: MouseEventHandler = ev => {
+			ev.preventDefault();
+			ev.stopPropagation();
+			open(ev.clientX, ev.clientY, board.id, folder?.id);
+		};
+
+		return (
+			<>
+				<div
+					// style={style}
+					ref={node => {
+						itemRef.current = node;
+						if (node) {
+							setNodeRef(node);
+						}
+						if (typeof ref === "function") {
+							ref(node);
+						} else if (ref) {
+							ref.current = node;
+						}
+					}}
+					className={styles.wrapper}
+					{...listeners}
+					{...attributes}
+				>
+					{!isDragging && (
+						<button
+							className={styles.contextMenuBtn}
+							onClick={handleContextMenuOpen}
+							onMouseDown={stopPropagation}
+							onMouseUp={stopPropagation}
+						>
+							<Icon width={16} height={16} iconName="ThreeDots" />
+						</button>
+					)}
+					<button
+						className={clsx(
+							styles.item,
+							{
+								[styles.active]: isActive,
+								[styles.dragging]: isDragging,
+							},
+							isOver && styles.disableHover,
+						)}
+						onContextMenu={handleContextMenuOpen}
+						onClick={handleClick}
+						onMouseDown={stopPropagation}
+						onMouseUp={stopPropagation}
+					>
+						<span className={styles.icon}>
+							<Icon
+								width={20}
+								height={20}
+								iconName={
+									board.isPublic ? "EmbedBoardIcon" : "lock"
+								}
+							/>
+						</span>
+						{isRenaming ? (
+							<RenameInput />
+						) : (
+							<span className={styles.title}>{board.title}</span>
+						)}
+					</button>
+				</div>
+				{isOver && <DragPlaceholder />}
+			</>
+		);
+	},
+);
+
+FolderItem.displayName = "FolderItem";