fix: collections removed by their sorted index

entrypoints/sidepanel/components/CollectionView.tsx

@@ -33,7 +33,7 @@ export default function CollectionView({ collection, index: collectionIndex, dra
 	const colorCls = useGroupColors();
 
 	return (
-		<CollectionContext.Provider value={ { collection, collectionIndex, tabCount, hasPinnedGroup } }>
+		<CollectionContext.Provider value={ { collection, tabCount, hasPinnedGroup } }>
 			<div
 				ref={ setNodeRef } { ...nodeProps }
 				className={ mergeClasses(

entrypoints/sidepanel/components/TabView.tsx

@@ -9,10 +9,12 @@ import { Button, Caption1, Link, mergeClasses, Tooltip } from "@fluentui/react-c
 import { Dismiss20Regular } from "@fluentui/react-icons";
 import { MouseEventHandler, ReactElement } from "react";
 import { useStyles_TabView } from "./TabView.styles";
+import CollectionContext, { CollectionContextType } from "../contexts/CollectionContext";
 
 export default function TabView({ tab, indices, dragOverlay }: TabViewProps): ReactElement
 {
 	const { removeItem, graphics, tilesView } = useCollections();
+	const { collection } = useContext<CollectionContextType>(CollectionContext);
 	const {
 		setNodeRef, setActivatorNodeRef,
 		nodeProps, activatorProps, isBeingDragged
@@ -29,16 +31,18 @@ export default function TabView({ tab, indices, dragOverlay }: TabViewProps): Re
 		args.preventDefault();
 		args.stopPropagation();
 
+		const removeIndex: number[] = [collection.timestamp, ...indices.slice(1)];
+
 		if (deletePrompt)
 			dialog.pushPrompt({
 				title: i18n.t("tabs.delete"),
 				content: i18n.t("common.delete_prompt"),
 				destructive: true,
 				confirmText: i18n.t("common.actions.delete"),
-				onConfirm: () => removeItem(...indices)
+				onConfirm: () => removeItem(...removeIndex)
 			});
 		else
-			removeItem(...indices);
+			removeItem(...removeIndex);
 	};
 
 	const handleClick: MouseEventHandler<HTMLAnchorElement> = (args) =>

entrypoints/sidepanel/components/collections/CollectionHeader.tsx

@@ -15,7 +15,7 @@ export default function CollectionHeader({ dragHandleRef, dragHandleProps }: Col
 	const [listLocation] = useSettings("listLocation");
 	const isTab: boolean = listLocation === "tab" || listLocation === "pinned";
 	const { updateCollection } = useCollections();
-	const { tabCount, collection, collectionIndex } = useContext<CollectionContextType>(CollectionContext);
+	const { tabCount, collection } = useContext<CollectionContextType>(CollectionContext);
 	const [alwaysShowToolbars] = useSettings("alwaysShowToolbars");
 
 	const AddIcon = bundleIcon(Add20Filled, Add20Regular);
@@ -25,7 +25,7 @@ export default function CollectionHeader({ dragHandleRef, dragHandleProps }: Col
 		const newTabs: (TabItem | GroupItem)[] = isTab ?
 			(await saveTabsToCollection(false)).items :
 			await getSelectedTabs();
-		updateCollection({ ...collection, items: [...collection.items, ...newTabs] }, collectionIndex);
+		updateCollection({ ...collection, items: [...collection.items, ...newTabs] }, collection.timestamp);
 	};
 
 	const cls = useStyles();

entrypoints/sidepanel/components/collections/CollectionMoreButton.tsx

@@ -13,7 +13,7 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu
 	const [listLocation] = useSettings("listLocation");
 	const isTab: boolean = listLocation === "tab" || listLocation === "pinned";
 	const { removeItem, updateCollection } = useCollections();
-	const { tabCount, hasPinnedGroup, collection, collectionIndex } = useContext<CollectionContextType>(CollectionContext);
+	const { tabCount, hasPinnedGroup, collection } = useContext<CollectionContextType>(CollectionContext);
 	const dialog = useDialog();
 	const [deletePrompt] = useSettings("deletePrompt");
 
@@ -33,10 +33,10 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu
 				content: i18n.t("common.delete_prompt"),
 				destructive: true,
 				confirmText: i18n.t("common.actions.delete"),
-				onConfirm: () => removeItem(collectionIndex)
+				onConfirm: () => removeItem(collection.timestamp)
 			});
 		else
-			removeItem(collectionIndex);
+			removeItem(collection.timestamp);
 	};
 
 	const handleEdit = () =>
@@ -44,7 +44,7 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu
 			<EditDialog
 				type="collection"
 				collection={ collection }
-				onSave={ item => updateCollection(item, collectionIndex) } />
+				onSave={ item => updateCollection(item, collection.timestamp) } />
 		);
 
 	const handleCreateGroup = () =>
@@ -52,7 +52,7 @@ export default function CollectionMoreButton({ onAddSelected }: CollectionMoreBu
 			<EditDialog
 				type="group"
 				hidePinned={ hasPinnedGroup }
-				onSave={ group => updateCollection({ ...collection, items: [...collection.items, group] }, collectionIndex) } />
+				onSave={ group => updateCollection({ ...collection, items: [...collection.items, group] }, collection.timestamp) } />
 		);
 
 	return (

entrypoints/sidepanel/components/collections/GroupMoreMenu.tsx

@@ -18,7 +18,7 @@ export default function GroupMoreMenu(): ReactElement
 	const [listLocation] = useSettings("listLocation");
 	const isTab: boolean = listLocation === "tab" || listLocation === "pinned";
 	const { group, indices } = useContext<GroupContextType>(GroupContext);
-	const { hasPinnedGroup } = useContext<CollectionContextType>(CollectionContext);
+	const { hasPinnedGroup, collection } = useContext<CollectionContextType>(CollectionContext);
 	const [deletePrompt] = useSettings("deletePrompt");
 	const dialog = useDialog();
 	const { updateGroup, removeItem, ungroup } = useCollections();
@@ -33,16 +33,18 @@ export default function GroupMoreMenu(): ReactElement
 
 	const handleDelete = () =>
 	{
+		const removeIndex: number[] = [collection.timestamp, ...indices.slice(1)];
+
 		if (deletePrompt)
 			dialog.pushPrompt({
 				title: i18n.t("groups.menu.delete"),
 				content: i18n.t("common.delete_prompt"),
 				confirmText: i18n.t("common.actions.delete"),
 				destructive: true,
-				onConfirm: () => removeItem(...indices)
+				onConfirm: () => removeItem(...removeIndex)
 			});
 		else
-			removeItem(...indices);
+			removeItem(...removeIndex);
 	};
 
 	const handleEdit = () =>
@@ -51,7 +53,7 @@ export default function GroupMoreMenu(): ReactElement
 				type="group"
 				group={ group }
 				hidePinned={ hasPinnedGroup }
-				onSave={ item => updateGroup(item, indices[0], indices[1]) } />
+				onSave={ item => updateGroup(item, collection.timestamp, indices[1]) } />
 		);
 
 	const handleAddSelected = async () =>
@@ -59,7 +61,7 @@ export default function GroupMoreMenu(): ReactElement
 		const newTabs: TabItem[] = isTab ?
 			(await saveTabsToCollection(false)).items.flatMap(i => i.type === "tab" ? i : i.items) :
 			await getSelectedTabs();
-		updateGroup({ ...group, items: [...group.items, ...newTabs] }, indices[0], indices[1]);
+		updateGroup({ ...group, items: [...group.items, ...newTabs] }, collection.timestamp, indices[1]);
 	};
 
 	return (
@@ -89,7 +91,7 @@ export default function GroupMoreMenu(): ReactElement
 						<MenuItem
 							className={ dangerCls.menuItem }
 							icon={ <UngroupIcon /> }
-							onClick={ () => ungroup(indices[0], indices[1]) }
+							onClick={ () => ungroup(collection.timestamp, indices[1]) }
 						>
 							{ i18n.t("groups.menu.ungroup") }
 						</MenuItem>

entrypoints/sidepanel/components/collections/OpenCollectionButton.tsx

@@ -12,7 +12,7 @@ export default function OpenCollectionButton(): React.ReactElement
 	const [defaultAction] = useSettings("defaultRestoreAction");
 	const { removeItem } = useCollections();
 	const dialog = useDialog();
-	const { collection, collectionIndex } = useContext<CollectionContextType>(CollectionContext);
+	const { collection } = useContext<CollectionContextType>(CollectionContext);
 
 	const OpenIcon = ic.bundleIcon(ic.Open20Filled, ic.Open20Regular);
 	const RestoreIcon = ic.bundleIcon(ic.ArrowExportRtl20Filled, ic.ArrowExportRtl20Regular);
@@ -50,7 +50,7 @@ export default function OpenCollectionButton(): React.ReactElement
 	const handleRestore = async () =>
 	{
 		await openCollection(collection);
-		removeItem(collectionIndex);
+		removeItem(collection.timestamp);
 	};
 
 	return (

entrypoints/sidepanel/contexts/CollectionContext.tsx

@@ -8,7 +8,6 @@ export default CollectionContext;
 export type CollectionContextType =
 	{
 		collection: CollectionItem;
-		collectionIndex: number;
 		tabCount: number;
 		hasPinnedGroup: boolean;
 	};

entrypoints/sidepanel/contexts/CollectionsProvider.tsx

@@ -50,12 +50,14 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre
 
 	const removeItem = (...indices: number[]): void =>
 	{
+		const collectionIndex: number = collections.findIndex(i => i.timestamp === indices[0]);
+
 		if (indices.length > 2)
-			(collections[indices[0]].items[indices[1]] as GroupItem).items.splice(indices[2], 1);
+			(collections[collectionIndex].items[indices[1]] as GroupItem).items.splice(indices[2], 1);
 		else if (indices.length > 1)
-			collections[indices[0]].items.splice(indices[1], 1);
+			collections[collectionIndex].items.splice(indices[1], 1);
 		else
-			collections.splice(indices[0], 1);
+			collections.splice(collectionIndex, 1);
 
 		updateStorage(collections);
 	};
@@ -65,20 +67,23 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre
 		updateStorage(collectionList);
 	};
 
-	const updateCollection = (collection: CollectionItem, index: number): void =>
+	const updateCollection = (collection: CollectionItem, id: number): void =>
 	{
+		const index: number = collections.findIndex(i => i.timestamp === id);
 		collections[index] = collection;
 		updateStorage(collections);
 	};
 
-	const updateGroup = (group: GroupItem, collectionIndex: number, groupIndex: number): void =>
+	const updateGroup = (group: GroupItem, collectionId: number, groupIndex: number): void =>
 	{
+		const collectionIndex: number = collections.findIndex(i => i.timestamp === collectionId);
 		collections[collectionIndex].items[groupIndex] = group;
 		updateStorage(collections);
 	};
 
-	const ungroup = (collectionIndex: number, groupIndex: number): void =>
+	const ungroup = (collectionId: number, groupIndex: number): void =>
 	{
+		const collectionIndex: number = collections.findIndex(i => i.timestamp === collectionId);
 		const group = collections[collectionIndex].items[groupIndex] as GroupItem;
 		collections[collectionIndex].items.splice(groupIndex, 1, ...group.items);
 		updateStorage(collections);
@@ -108,9 +113,9 @@ export type CollectionsContextType =
 		addCollection: (collection: CollectionItem) => void;
 
 		updateCollections: (collections: CollectionItem[]) => void;
-		updateCollection: (collection: CollectionItem, index: number) => void;
+		updateCollection: (collection: CollectionItem, id: number) => void;
-		updateGroup: (group: GroupItem, collectionIndex: number, groupIndex: number) => void;
+		updateGroup: (group: GroupItem, collectionId: number, groupIndex: number) => void;
-		ungroup: (collectionIndex: number, groupIndex: number) => void;
+		ungroup: (collectionId: number, groupIndex: number) => void;
 
 		removeItem: (...indices: number[]) => void;
 	};

entrypoints/sidepanel/layouts/collections/CollectionListView.tsx

@@ -121,27 +121,25 @@ export default function CollectionListView(): ReactElement
 						</SortableContext>
 
 						<DragOverlay dropAnimation={ null }>
-							{ active &&
+							{ active !== null ?
-								<>
+								active.item.type === "collection" ?
-									{ active.item.type === "collection" &&
+									<CollectionView collection={ active.item } index={ -1 } dragOverlay />
-										<CollectionView collection={ active.item } index={ -1 } dragOverlay />
+									:
-									}
+									<CollectionContext.Provider
-									{ active.item.type === "group" &&
+										value={ {
-										<CollectionContext.Provider
+											tabCount: 0,
-											value={ {
+											collection: resultList[active.indices[0]],
-												tabCount: 0,
+											hasPinnedGroup: true
-												collectionIndex: active.indices[0],
+										} }
-												collection: resultList[active.indices[0]],
+									>
-												hasPinnedGroup: true
+										{ active.item.type === "group" ?
-											} }
-										>
 											<GroupView group={ active.item } indices={ [-1] } dragOverlay />
-										</CollectionContext.Provider>
+											:
-									}
+											<TabView tab={ active.item } indices={ [-1] } dragOverlay />
-									{ active.item.type === "tab" &&
+										}
-										<TabView tab={ active.item } indices={ [-1] } dragOverlay />
+									</CollectionContext.Provider>
-									}
+								:
-								</>
+								<></>
 							}
 						</DragOverlay>
 					</DndContext>