feat(wip): virtualized collections list #235

entrypoints/sidepanel/contexts/CollectionsProvider.tsx

@@ -45,7 +45,37 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre
 
 	const addCollection = async (collection: CollectionItem): Promise<void> =>
 	{
-		await updateStorage([collection, ...collections]);
+		// TEMP
+		// await updateStorage([collection, ...collections]);
+		const items: CollectionItem[] = [];
+
+		for (let i = 0; i < 128; i++)
+			items.push({
+				title: i.toString(),
+				items: [
+					{
+						type: "tab",
+						title: "Google",
+						url: "https://www.google.com"
+					},
+					{
+						type: "group",
+						title: "Group",
+						color: "blue",
+						items: [
+							{
+								type: "tab",
+								title: "Facebook",
+								url: "https://www.facebook.com"
+							}
+						]
+					}
+				],
+				timestamp: Date.now() + i,
+				type: "collection"
+			});
+
+		await updateStorage(items);
 	};
 
 	const removeItem = async (...indices: number[]): Promise<void> =>

entrypoints/sidepanel/layouts/collections/CollectionListView.tsx

@@ -22,6 +22,8 @@ import { snapHandleToCursor } from "../../utils/dnd/snapHandleToCursor";
 import { useStyles_CollectionListView } from "./CollectionListView.styles";
 import SearchBar from "./SearchBar";
 import StorageCapacityIssueMessage from "./messages/StorageCapacityIssueMessage";
+import VirtualList from "@/components/VirtualList";
+import calculateCollectionHeight from "../../utils/calculateCollectionHeight";
 
 export default function CollectionListView(): ReactElement
 {
@@ -60,6 +62,8 @@ export default function CollectionListView(): ReactElement
 		setShowHidden(newShowHidden);
 	}, []);
 
+	// FIXME: disable drag and drop if filters are active!!!
+
 	const handleDragStart = (event: DragStartEvent): void =>
 	{
 		setActive(event.active.data.current as DndItem);
@@ -115,7 +119,55 @@ export default function CollectionListView(): ReactElement
 					</Button>
 				</div>
 				:
-				<section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
+				<DndContext
+					sensors={ sensors }
+					collisionDetection={ collisionDetector(!tilesView) }
+					onDragStart={ handleDragStart }
+					onDragEnd={ handleDragEnd }
+					modifiers={ [snapHandleToCursor] }
+				>
+					<SortableContext
+						items={ resultList.map((_, index) => index.toString()) }
+						strategy={ tilesView ? verticalListSortingStrategy : rectSortingStrategy }
+					>
+
+						<VirtualList
+							className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }
+							itemHeight={ item => calculateCollectionHeight(item, tilesView, compactView ?? true) }
+							horizontalOffset={ 32 }
+							columnMinWidth={ !tilesView ? 360 : undefined }
+							items={ resultList }
+							containerSelector="article"
+							itemRenderer={ (item, index) =>
+								<CollectionView key={ item.timestamp } collection={ item } index={ index } compact={ compactView } />
+							} />
+					</SortableContext>
+
+					<DragOverlay dropAnimation={ null }>
+						{ active !== null ?
+							active.item.type === "collection" ?
+								<CollectionView collection={ active.item } index={ -1 } dragOverlay />
+								:
+								<CollectionContext.Provider
+									value={ {
+										tabCount: 0,
+										collection: resultList[active.indices[0]],
+										hasPinnedGroup: true
+									} }
+								>
+									{ active.item.type === "group" ?
+										<GroupView group={ active.item } indices={ [-1] } collectionId={ -1 } dragOverlay />
+										:
+										<TabView tab={ active.item } indices={ [-1] } collectionId={ -1 } dragOverlay />
+									}
+								</CollectionContext.Provider>
+							:
+							<></>
+						}
+					</DragOverlay>
+				</DndContext>
+
+				/* <section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
 					<DndContext
 						sensors={ sensors }
 						collisionDetection={ collisionDetector(!tilesView) }
@@ -155,7 +207,7 @@ export default function CollectionListView(): ReactElement
 							}
 						</DragOverlay>
 					</DndContext>
-				</section>
+				</section> */
 			}
 		</article>
 	);

entrypoints/sidepanel/utils/calculateCollectionHeight.tsx

@@ -0,0 +1,37 @@
+import { CollectionItem, GroupItem } from "@/models/CollectionModels";
+
+export default function calculateCollectionHeight(collection: CollectionItem, tilesView: boolean, compactView: boolean): number
+{
+	if (compactView)
+		return collection.color ? 69.2 : 67.6;
+
+	if (collection.items.length < 1)
+		return collection.color ? 217.6 : 219.2;
+
+	if (tilesView)
+	{
+		let height = 201.6;
+
+		if (collection.items.some(i => i.type === "group"))
+			height = 242.4;
+
+		if (collection.color)
+			height += 1.6;
+
+		return height;
+	}
+
+	else
+	{
+		let baseHeight: number = collection.color ? 81.2 : 79.6;
+
+		baseHeight += 39.6 * collection.items.flatMap(i => i.type === "group" ? i.items : [i]).length - 6;
+
+		const groups: GroupItem[] = collection.items.filter(i => i.type === "group");
+
+		for (const group of groups)
+			baseHeight += group.items.length < 1 ? 126 : 50;
+
+		return Math.min(baseHeight, 572);
+	}
+}