build: add allowScripts to package.json

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -15,7 +15,7 @@ body:
     attributes:
       label: Description
       description: A clear and concise description of what the bug is.
-      placeholder: e.g. Sometimes when generating a password not all character sets are included
+      placeholder: e.g. Sometimes clicking on the extension icon doesn't open the side panel
     validations:
       required: true
 
@@ -105,3 +105,5 @@ body:
           required: true
         - label: The provided reproduction is a minimal reproducible example of the bug.
           required: true
+        - label: This issue was written in English.
+          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -60,3 +60,5 @@ body:
       options:
         - label: Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
           required: true
+        - label: This issue was written in English.
+          required: true

components/VirtualList.tsx

@@ -1,98 +0,0 @@
-export default function VirtualList<T>(props: VirtualListProps<T>): React.ReactElement
-{
-	const [columns, setColumns] = useState<number>(1);
-	const [rowsToRender, setRowsToRender] = useState<number>(0);
-	const [rowIndex, setRowIndex] = useState<number>(0);
-	const additionalRows = 3;
-
-	const heights: number[] = useMemo(() =>
-	{
-		if (typeof props.itemHeight === "number")
-			return props.items.map(() => props.itemHeight as number);
-
-		return props.items.map(props.itemHeight);
-	}, [props.items, props.itemHeight]);
-	const minHeight: number = Math.min(...heights);
-
-	const totalRows: number = Math.ceil(props.items.length / columns);
-	const takeCount: number = rowsToRender * columns;
-
-	const renderStartIndex: number = rowIndex * columns;
-	const paddingTop: number = calculateHeight(heights, 0, rowIndex, columns);
-	const paddingBottom: number = calculateHeight(heights, rowIndex + rowsToRender, totalRows, columns);
-
-	const renderedItems = props.items.slice(renderStartIndex, renderStartIndex + takeCount);
-
-	useEffect(() =>
-	{
-		const container = document.querySelector(props.containerSelector);
-
-		const handleResize = (): void =>
-		{
-			if (!container)
-				return;
-
-			const newRowsToRender: number = Math.ceil(container.clientHeight / minHeight) + additionalRows;
-
-			setRowsToRender(newRowsToRender);
-
-			if (!props.columnMinWidth)
-			{
-				setColumns(1);
-				return;
-			}
-
-			const newColumns: number = Math.floor((container.clientWidth - (props.horizontalOffset ?? 0)) / (props.columnMinWidth));
-			setColumns(Math.max(1, newColumns));
-		};
-		handleResize();
-
-		const handleScroll = (e: Event): void =>
-		{
-			const target = e.target as HTMLElement;
-			const topOffset: number = target.scrollHeight - calculateHeight(heights, 0, totalRows, columns);
-			const scrollTop: number = Math.max(0, target.scrollTop - topOffset);
-
-			const newIndex: number = Math.floor(scrollTop / minHeight - Math.floor(additionalRows / 2));
-			console.log("scroll", scrollTop, newIndex);
-			setRowIndex(Math.max(0, newIndex));
-		};
-		container?.addEventListener("scroll", handleScroll);
-		window.addEventListener("resize", handleResize);
-
-		return () =>
-		{
-			container?.removeEventListener("scroll", handleScroll);
-			window.removeEventListener("resize", handleResize);
-		};
-	}, [totalRows, props.columnMinWidth, props.horizontalOffset, heights, columns]);
-
-	return (
-		<section tabIndex={ 0 } style={ { paddingTop, paddingBottom } } className={ props.className }>
-			{ renderedItems.map((item, index) => props.itemRenderer(item, rowIndex * columns + index)) }
-		</section>
-	);
-}
-
-export type VirtualListProps<T> = {
-	className?: string;
-	itemHeight: number | ((item: T, index: number) => number);
-	containerSelector: string;
-	horizontalOffset?: number;
-	columnMinWidth?: number;
-	items: T[];
-	itemRenderer: (item: T, index: number) => React.ReactElement;
-};
-
-function calculateHeight(heights: number[], rowStart: number, rowEnd: number, columns: number): number
-{
-	let height = 0;
-
-	for (let i = rowStart; i < rowEnd; i++)
-	{
-		const rowHeights = heights.slice(i * columns, (i + 1) * columns);
-		height += Math.max(...rowHeights);
-	}
-
-	return height;
-}

entrypoints/sidepanel/contexts/CollectionsProvider.tsx

@@ -45,37 +45,7 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre
 
 	const addCollection = async (collection: CollectionItem): Promise<void> =>
 	{
-		// TEMP
+		await updateStorage([collection, ...collections]);
-		// 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,8 +22,6 @@ 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
 {
@@ -62,8 +60,6 @@ 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);
@@ -119,55 +115,7 @@ export default function CollectionListView(): ReactElement
 					</Button>
 				</div>
 				:
-				<DndContext
+				<section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
-					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) }
@@ -207,7 +155,7 @@ export default function CollectionListView(): ReactElement
 							}
 						</DragOverlay>
 					</DndContext>
-				</section> */
+				</section>
 			}
 		</article>
 	);

entrypoints/sidepanel/utils/calculateCollectionHeight.tsx

@@ -1,37 +0,0 @@
-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);
-	}
-}

features/settingsReview/hooks/useSettingsReviewDialog.tsx

@@ -11,7 +11,7 @@ export default function useSettingsReviewDialog(dialog: DialogContextType): Prom
 			if (needsReview.length > 0)
 				dialog.pushCustom(
 					<SettingsReviewDialog />,
-					undefined,
+					"alert",
 					() =>
 					{
 						settingsForReview.removeValue();

features/v3welcome/hooks/useWelcomeDialog.tsx

@@ -11,7 +11,7 @@ export default function useWelcomeDialog(dialog: DialogContextType): Promise<voi
 			if (showWelcome || import.meta.env.DEV)
 				dialog.pushCustom(
 					<WelcomeDialog />,
-					undefined,
+					"alert",
 					() =>
 					{
 						showWelcomeDialog.removeValue();

package.json

@@ -46,5 +46,9 @@
 		"web-ext-run": {
 			"tmp": "^0.2.6"
 		}
+	},
+	"allowScripts": {
+		"esbuild": true,
+		"spawn-sync": true
 	}
 }