Major 3.0 (#118)

Co-authored-by: Maison da Silva <maisonmdsgreen@hotmail.com>
2026-04-22 07:58:01 +03:00 · 2025-07-30 15:02:26 +03:00
parent d6996031b6
commit 2bd9337e63
200 changed files with 19452 additions and 3339 deletions
@@ -0,0 +1,88 @@
+import CollectionHeader from "@/entrypoints/sidepanel/components/collections/CollectionHeader";
+import useDndItem from "@/entrypoints/sidepanel/hooks/useDndItem";
+import { useGroupColors } from "@/hooks/useGroupColors";
+import { CollectionItem } from "@/models/CollectionModels";
+import { horizontalListSortingStrategy, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { Body1Strong, mergeClasses } from "@fluentui/react-components";
+import { CollectionsRegular } from "@fluentui/react-icons";
+import { ReactElement } from "react";
+import CollectionContext from "../contexts/CollectionContext";
+import { useCollections } from "../contexts/CollectionsProvider";
+import { useStyles_CollectionView } from "./CollectionView.styles";
+import GroupView from "./GroupView";
+import TabView from "./TabView";
+
+export default function CollectionView({ collection, index: collectionIndex, dragOverlay }: CollectionViewProps): ReactElement
+{
+	const { tilesView } = useCollections();
+	const {
+		setNodeRef,
+		nodeProps,
+		setActivatorNodeRef,
+		activatorProps,
+		activeItem, isCurrentlySorting, isBeingDragged, isActiveOverThis: isOver
+	} = useDndItem({ id: collectionIndex.toString(), data: { indices: [collectionIndex], item: collection } });
+
+	const isActiveOverThis: boolean = isOver && activeItem?.item.type !== "collection";
+
+	const tabCount: number = useMemo(() => collection.items.flatMap(i => i.type === "group" ? i.items : i).length, [collection.items]);
+	const hasPinnedGroup: boolean = useMemo(() => collection.items.length > 0 &&
+		(collection.items[0].type === "group" && collection.items[0].pinned === true), [collection.items]);
+
+	const cls = useStyles_CollectionView();
+	const colorCls = useGroupColors();
+
+	return (
+		<CollectionContext.Provider value={ { collection, tabCount, hasPinnedGroup } }>
+			<div
+				ref={ setNodeRef } { ...nodeProps }
+				className={ mergeClasses(
+					cls.root,
+					collection.color && colorCls[collection.color],
+					collection.color && cls.color,
+					!tilesView && cls.verticalRoot,
+					dragOverlay && cls.dragOverlay,
+					isBeingDragged && cls.dragging,
+					isCurrentlySorting && cls.sorting,
+					isActiveOverThis && cls.draggingOver
+				) }
+			>
+
+				<CollectionHeader dragHandleProps={ activatorProps } dragHandleRef={ setActivatorNodeRef } />
+
+				{ (!activeItem || activeItem.item.type !== "collection") && !dragOverlay &&
+					<>
+						{ collection.items.length < 1 ?
+							<div className={ cls.empty }>
+								<CollectionsRegular fontSize={ 32 } />
+								<Body1Strong>{ i18n.t("collections.empty") }</Body1Strong>
+							</div>
+							:
+							<div className={ mergeClasses(cls.list, !tilesView && cls.verticalList) }>
+								<SortableContext
+									items={ collection.items.map((_, index) => [collectionIndex, index].join("/")) }
+									strategy={ tilesView ? horizontalListSortingStrategy : verticalListSortingStrategy }
+								>
+									{ collection.items.map((i, index) =>
+										i.type === "group" ?
+											<GroupView
+												key={ index } group={ i } indices={ [collectionIndex, index] } />
+											:
+											<TabView key={ index } tab={ i } indices={ [collectionIndex, index] } />
+									) }
+								</SortableContext>
+							</div>
+						}
+					</>
+				}
+			</div >
+		</CollectionContext.Provider>
+	);
+}
+
+export type CollectionViewProps =
+	{
+		collection: CollectionItem;
+		index: number;
+		dragOverlay?: boolean;
+	};