Major 3.0 (#118)

Co-authored-by: Maison da Silva <maisonmdsgreen@hotmail.com>

entrypoints/background.ts

@@ -12,6 +12,7 @@ import { settings } from "@/utils/settings";
 import watchTabSelection from "@/utils/watchTabSelection";
 import { Tabs, Windows } from "wxt/browser";
 import { Unwatch } from "wxt/storage";
+import { openCollection, openGroup } from "./sidepanel/utils/opener";
 
 export default defineBackground(() =>
 {
@@ -68,7 +69,13 @@ export default defineBackground(() =>
 				icon: graphicsCache[data.url]?.icon
 			};
 		});
-		onMessage("refreshCollections", () => {});
+		onMessage("refreshCollections", () => { });
+
+		if (import.meta.env.FIREFOX)
+		{
+			onMessage("openCollection", ({ data }) => openCollection(data.collection, data.targetWindow));
+			onMessage("openGroup", ({ data }) => openGroup(data.group, data.newWindow));
+		}
 
 		setupTabCaputre();
 		async function setupTabCaputre(): Promise<void>

entrypoints/options/utils/importData.ts

@@ -37,7 +37,12 @@ export default async function importData(): Promise<boolean | null>
 			await browser.storage.local.set(data.local);
 
 		if (data.sync)
+		{
+			if (import.meta.env.FIREFOX && data.sync.contextAction === "context")
+				data.sync.contextAction = "open";
+
 			await browser.storage.sync.set(data.sync);
+		}
 	}
 	catch (error)
 	{

entrypoints/sidepanel/components/EditDialog.tsx

@@ -24,6 +24,13 @@ export default function EditDialog(props: GroupEditDialogProps): ReactElement
 
 	const cls = useStyles_EditDialog();
 	const colorCls = useGroupColors();
+	const horizontalNavigationAttributes = fui.useArrowNavigationGroup({ axis: "horizontal" });
+
+	const onSubmit = (e: React.FormEvent<HTMLFormElement>) =>
+	{
+		e.preventDefault();
+		handleSave();
+	};
 
 	const handleSave = () =>
 	{
@@ -58,78 +65,80 @@ export default function EditDialog(props: GroupEditDialogProps): ReactElement
 
 	return (
 		<fui.DialogSurface className={ fui.mergeClasses(cls.surface, (color && color !== "pinned") && colorCls[color]) }>
-			<fui.DialogBody>
-				<fui.DialogTitle>
-					{
-						props.type === "collection" ?
-							i18n.t(`dialogs.edit.title.${props.collection ? "edit" : "new"}_collection`) :
-							i18n.t(`dialogs.edit.title.${props.group ? "edit" : "new"}_group`)
-					}
-				</fui.DialogTitle>
+			<form onSubmit={ onSubmit }>
+				<fui.DialogBody>
+					<fui.DialogTitle>
+						{
+							props.type === "collection" ?
+								i18n.t(`dialogs.edit.title.${props.collection ? "edit" : "new"}_collection`) :
+								i18n.t(`dialogs.edit.title.${props.group ? "edit" : "new"}_group`)
+						}
+					</fui.DialogTitle>
 
-				<fui.DialogContent>
-					<form className={ cls.content }>
-						<fui.Field label={ i18n.t("dialogs.edit.collection_title") }>
-							<fui.Input
-								contentBefore={ <Rename20Regular /> }
-								disabled={ color === "pinned" }
-								placeholder={
-									props.type === "collection" ? getCollectionTitle(props.collection, true) : ""
-								}
-								value={ color === "pinned" ? i18n.t("groups.pinned") : title }
-								onChange={ (_, e) => setTitle(e.value) } />
-						</fui.Field>
-						<fui.Field label="Color">
-							<div className={ cls.colorPicker }>
-								{ (props.type === "group" && (!props.hidePinned || props.group?.pinned)) &&
-									<fui.ToggleButton
-										checked={ color === "pinned" }
-										onClick={ () => setColor("pinned") }
-										icon={ <Pin20Filled /> }
-										shape="circular"
-									>
-										{ i18n.t("groups.pinned") }
-									</fui.ToggleButton>
-								}
-								{ props.type === "collection" &&
-									<fui.ToggleButton
-										checked={ color === undefined }
-										onClick={ () => setColor(undefined) }
-										icon={ <CircleOff20Regular /> }
-										shape="circular"
-									>
-										{ i18n.t("colors.none") }
-									</fui.ToggleButton>
-								}
-								{ Object.keys(colorCls).map(i =>
-									<fui.ToggleButton
-										checked={ color === i }
-										onClick={ () => setColor(i as chrome.tabGroups.ColorEnum) }
-										className={ fui.mergeClasses(cls.colorButton, colorCls[i as chrome.tabGroups.ColorEnum]) }
-										icon={ {
-											className: cls.colorButton_icon,
-											children: <Circle20Filled />
-										} }
-										key={ i }
-										shape="circular"
-									>
-										{ i18n.t(`colors.${i as chrome.tabGroups.ColorEnum}`) }
-									</fui.ToggleButton>
-								) }
-							</div>
-						</fui.Field>
-					</form>
-				</fui.DialogContent>
+					<fui.DialogContent>
+						<div className={ cls.content }>
+							<fui.Field label={ i18n.t("dialogs.edit.collection_title") }>
+								<fui.Input
+									contentBefore={ <Rename20Regular /> }
+									disabled={ color === "pinned" }
+									placeholder={
+										props.type === "collection" ? getCollectionTitle(props.collection, true) : ""
+									}
+									value={ color === "pinned" ? i18n.t("groups.pinned") : title }
+									onChange={ (_, e) => setTitle(e.value) } />
+							</fui.Field>
+							<fui.Field label="Color">
+								<div className={ cls.colorPicker } { ...horizontalNavigationAttributes }>
+									{ (props.type === "group" && (!props.hidePinned || props.group?.pinned)) &&
+										<fui.ToggleButton
+											checked={ color === "pinned" }
+											onClick={ () => setColor("pinned") }
+											icon={ <Pin20Filled /> }
+											shape="circular"
+										>
+											{ i18n.t("groups.pinned") }
+										</fui.ToggleButton>
+									}
+									{ props.type === "collection" &&
+										<fui.ToggleButton
+											checked={ color === undefined }
+											onClick={ () => setColor(undefined) }
+											icon={ <CircleOff20Regular /> }
+											shape="circular"
+										>
+											{ i18n.t("colors.none") }
+										</fui.ToggleButton>
+									}
+									{ Object.keys(colorCls).map(i =>
+										<fui.ToggleButton
+											checked={ color === i }
+											onClick={ () => setColor(i as chrome.tabGroups.ColorEnum) }
+											className={ fui.mergeClasses(cls.colorButton, colorCls[i as chrome.tabGroups.ColorEnum]) }
+											icon={ {
+												className: cls.colorButton_icon,
+												children: <Circle20Filled />
+											} }
+											key={ i }
+											shape="circular"
+										>
+											{ i18n.t(`colors.${i as chrome.tabGroups.ColorEnum}`) }
+										</fui.ToggleButton>
+									) }
+								</div>
+							</fui.Field>
+						</div>
+					</fui.DialogContent>
 
-				<fui.DialogActions>
-					<fui.DialogTrigger disableButtonEnhancement>
-						<fui.Button appearance="primary" onClick={ handleSave }>{ i18n.t("common.actions.save") }</fui.Button>
-					</fui.DialogTrigger>
-					<fui.DialogTrigger disableButtonEnhancement>
-						<fui.Button appearance="subtle">{ i18n.t("common.actions.cancel") }</fui.Button>
-					</fui.DialogTrigger>
-				</fui.DialogActions>
-			</fui.DialogBody>
+					<fui.DialogActions>
+						<fui.DialogTrigger disableButtonEnhancement>
+							<fui.Button appearance="primary" as="button" type="submit">{ i18n.t("common.actions.save") }</fui.Button>
+						</fui.DialogTrigger>
+						<fui.DialogTrigger disableButtonEnhancement>
+							<fui.Button appearance="subtle">{ i18n.t("common.actions.cancel") }</fui.Button>
+						</fui.DialogTrigger>
+					</fui.DialogActions>
+				</fui.DialogBody>
+			</form>
 		</fui.DialogSurface>
 	);
 }

entrypoints/sidepanel/components/collections/GroupMoreMenu.tsx

@@ -7,11 +7,12 @@ import getSelectedTabs from "@/entrypoints/sidepanel/utils/getSelectedTabs";
 import { useDangerStyles } from "@/hooks/useDangerStyles";
 import useSettings from "@/hooks/useSettings";
 import { TabItem } from "@/models/CollectionModels";
+import { sendMessage } from "@/utils/messaging";
+import saveTabsToCollection from "@/utils/saveTabsToCollection";
 import { Button, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, Tooltip } from "@fluentui/react-components";
 import * as ic from "@fluentui/react-icons";
 import { ReactElement } from "react";
 import { openGroup } from "../../utils/opener";
-import saveTabsToCollection from "@/utils/saveTabsToCollection";
 
 export default function GroupMoreMenu(): ReactElement
 {
@@ -56,6 +57,14 @@ export default function GroupMoreMenu(): ReactElement
 				onSave={ item => updateGroup(item, collection.timestamp, indices[1]) } />
 		);
 
+	const openGroupInNewWindow = () =>
+	{
+		if (import.meta.env.FIREFOX && listLocation === "popup")
+			sendMessage("openGroup", { group, newWindow: true });
+		else
+			openGroup(group, true);
+	};
+
 	const handleAddSelected = async () =>
 	{
 		const newTabs: TabItem[] = isTab ?
@@ -75,7 +84,7 @@ export default function GroupMoreMenu(): ReactElement
 			<MenuPopover>
 				<MenuList>
 					{ group.items.length > 0 &&
-						<MenuItem icon={ <NewWindowIcon /> } onClick={ () => openGroup(group, true) }>
+						<MenuItem icon={ <NewWindowIcon /> } onClick={ openGroupInNewWindow }>
 							{ i18n.t("groups.menu.new_window") }
 						</MenuItem>
 					}

entrypoints/sidepanel/components/collections/OpenCollectionButton.tsx

@@ -1,6 +1,7 @@
 import { useDialog } from "@/contexts/DialogProvider";
 import useSettings from "@/hooks/useSettings";
 import browserLocaleKey from "@/utils/browserLocaleKey";
+import { sendMessage } from "@/utils/messaging";
 import { Menu, MenuButtonProps, MenuItem, MenuList, MenuOpenChangeData, MenuOpenEvent, MenuPopover, MenuTrigger, SplitButton } from "@fluentui/react-components";
 import * as ic from "@fluentui/react-icons";
 import CollectionContext, { CollectionContextType } from "../../contexts/CollectionContext";
@@ -10,6 +11,7 @@ import { openCollection } from "../../utils/opener";
 export default function OpenCollectionButton({ onOpenChange }: OpenCollectionButtonProps): React.ReactElement
 {
 	const [defaultAction] = useSettings("defaultRestoreAction");
+	const [listLocation] = useSettings("listLocation");
 	const { removeItem } = useCollections();
 	const dialog = useDialog();
 	const { collection } = useContext<CollectionContextType>(CollectionContext);
@@ -22,7 +24,12 @@ export default function OpenCollectionButton({ onOpenChange }: OpenCollectionBut
 	const handleIncognito = async () =>
 	{
 		if (await browser.extension.isAllowedIncognitoAccess())
-			openCollection(collection, "incognito");
+		{
+			if (import.meta.env.FIREFOX && listLocation === "popup")
+				sendMessage("openCollection", { collection, targetWindow: "incognito" });
+			else
+				openCollection(collection, "incognito");
+		}
 		else
 			dialog.pushPrompt({
 				title: i18n.t("collections.incognito_check.title"),
@@ -45,7 +52,9 @@ export default function OpenCollectionButton({ onOpenChange }: OpenCollectionBut
 	};
 
 	const handleOpen = (mode: "current" | "new") =>
-		() => openCollection(collection, mode);
+		import.meta.env.FIREFOX && listLocation === "popup" && mode === "new" ?
+			() => sendMessage("openCollection", { collection, targetWindow: "new" }) :
+			() => openCollection(collection, mode);
 
 	const handleRestore = async () =>
 	{

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "tabs-aside",
 	"private": true,
-	"version": "3.0.0-rc8",
+	"version": "3.0.0",
 	"type": "module",
 	"scripts": {
 		"dev": "wxt",
@@ -16,31 +16,31 @@
 		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@fluentui/react-components": "^9.67.0",
-		"@fluentui/react-icons": "^2.0.306",
+		"@fluentui/react-components": "^9.68.1",
+		"@fluentui/react-icons": "^2.0.307",
 		"@webext-core/messaging": "^2.3.0",
-		"@wxt-dev/analytics": "0.4.1",
+		"@wxt-dev/analytics": "^0.4.1",
 		"@wxt-dev/i18n": "^0.2.4",
 		"lzutf8": "^0.6.3",
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
 	},
 	"devDependencies": {
 		"@eslint/css": "^0.10.0",
-		"@eslint/js": "^9.31.0",
-		"@eslint/json": "^0.13.0",
-		"@stylistic/eslint-plugin": "^5.2.0",
+		"@eslint/js": "^9.32.0",
+		"@eslint/json": "^0.13.1",
+		"@stylistic/eslint-plugin": "^5.2.2",
 		"@types/react": "^18.3.1",
 		"@types/react-dom": "^18.3.1",
-		"@types/scheduler": "^0",
+		"@types/scheduler": "0.23.0",
 		"@wxt-dev/module-react": "^1.1.3",
-		"eslint": "^9.31.0",
+		"eslint": "^9.32.0",
 		"eslint-plugin-react": "^7.37.5",
 		"globals": "^16.3.0",
 		"scheduler": "0.23.0",
 		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.37.0",
-		"vite": "^6.3.5",
+		"typescript-eslint": "^8.38.0",
+		"vite": "^7.0.6",
 		"wxt": "~0.19.29"
 	},
 	"packageManager": "yarn@4.9.2"

utils/messaging.ts

@@ -1,5 +1,5 @@
 import { trackError } from "@/features/analytics";
-import { GraphicsStorage } from "@/models/CollectionModels";
+import { CollectionItem, GraphicsStorage, GroupItem } from "@/models/CollectionModels";
 import { defineExtensionMessaging, ExtensionMessagingConfig, ExtensionMessenger, ExtensionSendMessageArgs, GetDataType, GetReturnType } from "@webext-core/messaging";
 
 type ProtocolMap =
@@ -7,6 +7,9 @@ type ProtocolMap =
 		addThumbnail(data: { url: string; thumbnail: string; }): void;
 		getGraphicsCache(): GraphicsStorage;
 		refreshCollections(): void;
+
+		openCollection(data: { collection: CollectionItem; targetWindow: "new" | "incognito"; }): void;
+		openGroup(data: { group: GroupItem; newWindow: boolean; }): void;
 	};
 
 function defineMessaging(config?: ExtensionMessagingConfig): ExtensionMessenger<ProtocolMap>