fix: copilot fixes

* Bump the react group across 1 directory with 3 updates (#207)

Bumps the react group with 3 updates in the / directory: [react](https://github.com/facebook/react/tree/HEAD/packages/react), [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) and [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom).


Updates `react` from 19.2.0 to 19.2.1
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.2.1/packages/react)

Updates `@types/react` from 19.2.4 to 19.2.7
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

Updates `react-dom` from 19.2.0 to 19.2.1
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/v19.2.1/packages/react-dom)

Updates `@types/react` from 19.2.4 to 19.2.7
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react)

---
updated-dependencies:
- dependency-name: react
  dependency-version: 19.2.1
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: react
- dependency-name: "@types/react"
  dependency-version: 19.2.7
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: react
- dependency-name: react-dom
  dependency-version: 19.2.1
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: react
- dependency-name: "@types/react"
  dependency-version: 19.2.7
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: react
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump the deps group across 1 directory with 5 updates (#208)

Bumps the deps group with 5 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@fluentui/react-components](https://github.com/microsoft/fluentui) | `9.72.7` | `9.72.8` |
| [@fluentui/react-icons](https://github.com/microsoft/fluentui-system-icons) | `2.0.314` | `2.0.316` |
| [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic/tree/HEAD/packages/eslint-plugin) | `5.5.0` | `5.6.1` |
| [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/typescript-eslint) | `8.46.4` | `8.49.0` |
| [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) | `7.2.2` | `7.2.7` |



Updates `@fluentui/react-components` from 9.72.7 to 9.72.8
- [Release notes](https://github.com/microsoft/fluentui/releases)
- [Commits](https://github.com/microsoft/fluentui/compare/@fluentui/react-components_v9.72.7...@fluentui/react-components_v9.72.8)

Updates `@fluentui/react-icons` from 2.0.314 to 2.0.316
- [Commits](https://github.com/microsoft/fluentui-system-icons/commits)

Updates `@stylistic/eslint-plugin` from 5.5.0 to 5.6.1
- [Release notes](https://github.com/eslint-stylistic/eslint-stylistic/releases)
- [Changelog](https://github.com/eslint-stylistic/eslint-stylistic/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint-stylistic/eslint-stylistic/commits/v5.6.1/packages/eslint-plugin)

Updates `typescript-eslint` from 8.46.4 to 8.49.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/typescript-eslint/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.49.0/packages/typescript-eslint)

Updates `vite` from 7.2.2 to 7.2.7
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v7.2.7/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v7.2.7/packages/vite)

---
updated-dependencies:
- dependency-name: "@fluentui/react-components"
  dependency-version: 9.72.8
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: deps
- dependency-name: "@fluentui/react-icons"
  dependency-version: 2.0.316
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: deps
- dependency-name: "@stylistic/eslint-plugin"
  dependency-version: 5.6.1
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: deps
- dependency-name: typescript-eslint
  dependency-version: 8.49.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: deps
- dependency-name: vite
  dependency-version: 7.2.7
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: deps
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Migrated to npm

* Updated package.json version

* Fixed pipelines build

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -22,5 +22,5 @@
 		}
 	},
 
-	"postCreateCommand": "yarn install"
+	"postCreateCommand": "npm install"
 }

.github/workflows/cd_pipeline.yml

@@ -51,8 +51,7 @@ jobs:
           echo "WXT_GA4_API_SECRET=${{ secrets.GA4_SECRET }}" >> .env
           echo "WXT_GA4_MEASUREMENT_ID=${{ secrets.GA4_MEASUREMENT_ID }}" >> .env
 
-      - run: corepack enable
+      - run: npm install
-      - run: yarn install
 
       # Patch for firefox dnd popup (see https://github.com/clauderic/dnd-kit/issues/1043)
       - run: grep -v "this.windowListeners.add(EventName.Resize, this.handleCancel);" core.esm.js > core.esm.js.tmp && mv core.esm.js.tmp core.esm.js
@@ -64,7 +63,7 @@ jobs:
         working-directory: ./node_modules/@wxt-dev/analytics/dist
         if: ${{ matrix.target == 'firefox' }}
 
-      - run: yarn zip -b ${{ matrix.target }}
+      - run: npm run zip -- -b ${{ matrix.target }}
 
       - name: Drop build artifacts (${{ matrix.target }})
         uses: actions/upload-artifact@main
@@ -81,7 +80,7 @@ jobs:
           source: ./.output/firefox-mv3
           channel: listed
 
-      - run: yarn npm audit
+      - run: npm audit
         continue-on-error: ${{ github.event_name != 'release' && github.event.inputs.bypass_audit == 'true' }}
 
   publish-github:

.github/workflows/pr_pipeline.yml

@@ -43,8 +43,7 @@ jobs:
           echo "WXT_GA4_API_SECRET=${{ secrets.GA4_SECRET }}" >> .env
           echo "WXT_GA4_MEASUREMENT_ID=${{ secrets.GA4_MEASUREMENT_ID }}" >> .env
 
-      - run: corepack enable
+      - run: npm install
-      - run: yarn install
 
       # Patch for firefox dnd popup (see https://github.com/clauderic/dnd-kit/issues/1043)
       - run: grep -v "this.windowListeners.add(EventName.Resize, this.handleCancel);" core.esm.js > core.esm.js.tmp && mv core.esm.js.tmp core.esm.js
@@ -56,7 +55,7 @@ jobs:
         working-directory: ./node_modules/@wxt-dev/analytics/dist
         if: ${{ matrix.target == 'firefox' }}
 
-      - run: yarn zip -b ${{ matrix.target }}
+      - run: npm run zip -- -b ${{ matrix.target }}
 
       - name: Drop artifacts (${{ matrix.target }})
         uses: actions/upload-artifact@main
@@ -73,4 +72,4 @@ jobs:
           source: ./.output/firefox-mv3
           channel: listed
 
-      - run: yarn npm audit
+      - run: npm audit

.yarnrc.yml

@@ -1,117 +0,0 @@
-nodeLinker: node-modules
-
-packageExtensions:
-  "@wxt-dev/module-react@*":
-    peerDependencies:
-      vite: "*"
-  "@fluentui/react-accordion@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-avatar@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-carousel@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-color-picker@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-combobox@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-dialog@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-field@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-list@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-menu@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-nav@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-overflow@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-popover@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-swatch-picker@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-table@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-tabs@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-tag-picker@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-teaching-popover@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-toolbar@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-tree@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-alert@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-checkbox@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-components@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-drawer@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-infobutton@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-infolabel@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-input@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-persona@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-progress@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-radio@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-select@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-skeleton@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-slider@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-spinbutton@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-switch@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-tags@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-textarea@*":
-    peerDependencies:
-      scheduler: "0.23.0"
-  "@fluentui/react-search@*":
-    peerDependencies:
-      scheduler: "0.23.0"

entrypoints/options/hooks/useOptionsStyles.ts

@@ -41,5 +41,9 @@ export const useOptionsStyles = makeStyles({
 		flexFlow: "column",
 		alignItems: "flex-start",
 		gap: tokens.spacingVerticalSNudge
+	},
+	messageBar:
+	{
+		flexShrink: 0
 	}
 });

entrypoints/options/layouts/StorageSection.tsx

@@ -2,12 +2,13 @@ import { useDialog } from "@/contexts/DialogProvider";
 import { clearGraphicsStorage, cloudDisabled, setCloudStorage, thumbnailCaptureEnabled } from "@/features/collectionStorage";
 import { useDangerStyles } from "@/hooks/useDangerStyles";
 import useStorageInfo from "@/hooks/useStorageInfo";
-import { Button, Field, InfoLabel, LabelProps, MessageBar, MessageBarBody, MessageBarTitle, ProgressBar, Switch } from "@fluentui/react-components";
+import { Button, Divider, Field, InfoLabel, LabelProps, MessageBar, MessageBarBody, MessageBarTitle, ProgressBar, Subtitle2, Switch } from "@fluentui/react-components";
 import { ArrowDownload20Regular, ArrowUpload20Regular } from "@fluentui/react-icons";
 import { Unwatch } from "wxt/utils/storage";
 import { useOptionsStyles } from "../hooks/useOptionsStyles";
 import exportData from "../utils/exportData";
 import importData from "../utils/importData";
+import BookmarksSection from "@/features/netscapeBookmarks/layouts/BookmarksSection";
 
 export default function StorageSection(): React.ReactElement
 {
@@ -78,6 +79,59 @@ export default function StorageSection(): React.ReactElement
 
 	return (
 		<>
+			<Subtitle2>{ i18n.t("options_page.storage.manage_title") }</Subtitle2>
+
+			{ isCloudDisabled === false &&
+				<Field
+					label={ i18n.t("options_page.storage.capacity.title") }
+					hint={ i18n.t("options_page.storage.capacity.description", [(bytesInUse / 1024).toFixed(1), storageQuota / 1024]) }
+					validationState={ usedStorageRatio >= 0.8 ? "error" : undefined }
+				>
+					<ProgressBar value={ usedStorageRatio } thickness="large" />
+				</Field>
+			}
+
+			<div className={ cls.horizontalButtons }>
+				{ isCloudDisabled === true &&
+					<Button appearance="primary" onClick={ () => setCloudStorage(true) }>
+						{ i18n.t("options_page.storage.enable") }
+					</Button>
+				}
+
+				{ isCloudDisabled === false &&
+					<div className={ cls.horizontalButtons }>
+						<Button
+							appearance="subtle" className={ dangerCls.buttonSubtle }
+							onClick={ handleDisableCloud }
+						>
+							{ i18n.t("options_page.storage.disable") }
+						</Button>
+					</div>
+				}
+			</div>
+
+			<div className={ cls.horizontalButtons }>
+				<Button icon={ <ArrowDownload20Regular /> } onClick={ exportData }>
+					{ i18n.t("options_page.storage.export") }
+				</Button>
+				<Button icon={ <ArrowUpload20Regular /> } onClick={ handleImport }>
+					{ i18n.t("options_page.storage.import") }
+				</Button>
+			</div>
+
+			{ importResult !== null &&
+				<MessageBar intent={ importResult ? "success" : "error" } className={ cls.messageBar }>
+					<MessageBarBody>
+						{ importResult === true ?
+							i18n.t("options_page.storage.import_results.success") :
+							i18n.t("options_page.storage.import_results.error")
+						}
+					</MessageBarBody>
+				</MessageBar>
+			}
+
+			<Divider />
+			<Subtitle2>{ i18n.t("options_page.storage.thumbnails_title") }</Subtitle2>
 			<div className={ cls.group }>
 				<Switch
 					checked={ isThumbnailCaptureEnabled ?? true }
@@ -101,52 +155,8 @@ export default function StorageSection(): React.ReactElement
 				</Button>
 			</div>
 
-			{ isCloudDisabled === false &&
+			<Divider />
-				<Field
+			<BookmarksSection />
-					label={ i18n.t("options_page.storage.capacity.title") }
-					hint={ i18n.t("options_page.storage.capacity.description", [(bytesInUse / 1024).toFixed(1), storageQuota / 1024]) }
-					validationState={ usedStorageRatio >= 0.8 ? "error" : undefined }
-				>
-					<ProgressBar value={ usedStorageRatio } thickness="large" />
-				</Field>
-			}
-
-			{ isCloudDisabled === true &&
-				<Button appearance="primary" onClick={ () => setCloudStorage(true) }>
-					{ i18n.t("options_page.storage.enable") }
-				</Button>
-			}
-
-			<div className={ cls.horizontalButtons }>
-				<Button icon={ <ArrowDownload20Regular /> } onClick={ exportData }>
-					{ i18n.t("options_page.storage.export") }
-				</Button>
-				<Button icon={ <ArrowUpload20Regular /> } onClick={ handleImport }>
-					{ i18n.t("options_page.storage.import") }
-				</Button>
-			</div>
-
-			{ importResult !== null &&
-				<MessageBar intent={ importResult ? "success" : "error" }>
-					<MessageBarBody>
-						{ importResult === true ?
-							i18n.t("options_page.storage.import_results.success") :
-							i18n.t("options_page.storage.import_results.error")
-						}
-					</MessageBarBody>
-				</MessageBar>
-			}
-
-			{ isCloudDisabled === false &&
-				<div className={ cls.horizontalButtons }>
-					<Button
-						appearance="subtle" className={ dangerCls.buttonSubtle }
-						onClick={ handleDisableCloud }
-					>
-						{ i18n.t("options_page.storage.disable") }
-					</Button>
-				</div>
-			}
 		</>
 	);
 }

eslint.config.js

@@ -19,13 +19,14 @@ export default defineConfig([
 	{ files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
 	{
 		files: ["**/*.{jsonc,json}"],
+		ignores: [".devcontainer/devcontainer.json", "package-lock.json"],
 		plugins: { json },
 		language: "json/jsonc",
 		extends: ["json/recommended"]
 	},
 	{
 		files: ["**/*.json"],
-		ignores: [".devcontainer/devcontainer.json"],
+		ignores: [".devcontainer/devcontainer.json", "package-lock.json"],
 		plugins: { json },
 		language: "json/json",
 		extends: ["json/recommended"]

features/collectionStorage/utils/parseCollections.ts

@@ -74,7 +74,7 @@ function parseTab(data: string): TabItem
 {
 	return {
 		type: "tab",
-		url: data.match(/(?<=^(\t){1,2}t\|).*(?=\|)/)!.toString(),
+		url: data.match(/(?<=^\t{1,2}t\|).*(?=\|)/)!.toString(),
-		title: data.match(/(?<=^(\t){1,2}t\|.*\|).*$/)?.toString()
+		title: data.match(/(?<=^\t{1,2}t\|.*\|).*$/)?.toString()
 	};
 }

features/netscapeBookmarks/layouts/BookmarksSection.tsx

@@ -0,0 +1,66 @@
+import { useDialog } from "@/contexts/DialogProvider";
+import { Body1, Button, makeStyles, MessageBar, MessageBarBody, Subtitle2, tokens } from "@fluentui/react-components";
+import { ArrowDownload20Regular, ArrowUpload20Regular } from "@fluentui/react-icons";
+import importBookmarks from "../utils/importBookmarks";
+import exportBookmarks from "../utils/exportBookmarks";
+
+export default function BookmarksSection(): React.ReactElement
+{
+	const cls = useStyles();
+	const dialog = useDialog();
+
+	const [importResult, setImportResult] = useState<number | null>(null);
+
+	const handleImport = (): void =>
+		dialog.pushPrompt({
+			title: i18n.t("features.netscape_bookmarks.import_dialog.title"),
+			confirmText: i18n.t("options_page.storage.import_prompt.proceed"),
+			onConfirm: () => importBookmarks().then(setImportResult),
+			content: (
+				<Body1 as="p">
+					{ i18n.t("features.netscape_bookmarks.import_dialog.content") }
+				</Body1>
+			)
+		});
+
+	return (
+		<div className={ cls.root }>
+			<Subtitle2>{ i18n.t("features.netscape_bookmarks.title") }</Subtitle2>
+
+			{ importResult !== null &&
+				<MessageBar intent={ importResult >= 0 ? "success" : "error" } layout="multiline">
+					<MessageBarBody>
+						{ importResult >= 0 ?
+							i18n.t("features.netscape_bookmarks.import_result.success", [importResult]) :
+							i18n.t("features.netscape_bookmarks.import_result.error")
+						}
+					</MessageBarBody>
+				</MessageBar>
+			}
+
+			<div className={ cls.buttons }>
+				<Button icon={ <ArrowDownload20Regular /> } onClick={ exportBookmarks }>
+					{ i18n.t("features.netscape_bookmarks.export") }
+				</Button>
+				<Button icon={ <ArrowUpload20Regular /> } onClick={ handleImport }>
+					{ i18n.t("features.netscape_bookmarks.import") }
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+const useStyles = makeStyles({
+	root:
+	{
+		display: "flex",
+		flexFlow: "column",
+		gap: tokens.spacingVerticalMNudge
+	},
+	buttons:
+	{
+		display: "flex",
+		flexWrap: "wrap",
+		gap: tokens.spacingVerticalSNudge
+	}
+});

features/netscapeBookmarks/utils/convertBookmarks.ts

@@ -0,0 +1,104 @@
+import { CollectionItem, GraphicsStorage, GroupItem, TabItem } from "@/models/CollectionModels";
+import { Bookmark } from "node-bookmarks-parser/build/interfaces/bookmark";
+
+export default function convertBookmarks(bookmarks: Bookmark[]): [CollectionItem[], GraphicsStorage, number]
+{
+	let count: number = 0;
+	const graphics: GraphicsStorage = {};
+	const items: CollectionItem[] = [];
+	const untitled: CollectionItem = {
+		items: [],
+		timestamp: Date.now(),
+		type: "collection"
+	};
+
+	for (const bookmark of bookmarks)
+	{
+		if (bookmark.type === "bookmark")
+		{
+			untitled.items.push(getTab(bookmark, graphics));
+			count++;
+		}
+		else if (bookmark.type === "folder")
+		{
+			const collection: CollectionItem = getCollection(bookmark, graphics);
+			items.push(collection);
+			count += collection.items.reduce((acc, item) =>
+			{
+				if (item.type === "tab")
+					return acc + 1;
+				else if (item.type === "group")
+					return acc + item.items.length;
+				return acc;
+			}, 0);
+		}
+	}
+
+	if (untitled.items.length > 0)
+		items.unshift(untitled);
+
+	return [items, graphics, count];
+}
+
+function getTab(bookmark: Bookmark, graphics: GraphicsStorage): TabItem
+{
+	if (bookmark.icon)
+		graphics[bookmark.url!] = {
+			icon: bookmark.icon
+		};
+
+	return {
+		type: "tab",
+		url: bookmark.url!,
+		title: bookmark.title || bookmark.url!
+	};
+}
+
+function getCollection(bookmark: Bookmark, graphics: GraphicsStorage): CollectionItem
+{
+	const collection: CollectionItem = {
+		items: [],
+		title: bookmark.title,
+		timestamp: Date.now(),
+		type: "collection"
+	};
+
+	if (bookmark.children)
+		for (const child of bookmark.children)
+		{
+			if (child.type === "bookmark")
+				collection.items.push(getTab(child, graphics));
+			else if (child.type === "folder" && child.children)
+				collection.items.push(getGroup(child, graphics));
+		}
+
+	return collection;
+}
+
+function getGroup(bookmark: Bookmark, graphics: GraphicsStorage): GroupItem
+{
+	const group: GroupItem = {
+		items: [],
+		title: bookmark.title,
+		pinned: false,
+		type: "group",
+		color: getRandomColor()
+	};
+
+	if (bookmark.children)
+		for (const child of bookmark.children)
+		{
+			if (child.type === "bookmark")
+				group.items.push(getTab(child, graphics));
+			else if (child.type === "folder")
+				group.items.push(...getGroup(child, graphics).items);
+		}
+
+	return group;
+}
+
+function getRandomColor(): "blue" | "cyan" | "green" | "grey" | "orange" | "pink" | "purple" | "red" | "yellow"
+{
+	const colors = ["blue", "cyan", "green", "grey", "orange", "pink", "purple", "red", "yellow"] as const;
+	return colors[Math.floor(Math.random() * colors.length)];
+}

features/netscapeBookmarks/utils/exportBookmarks.ts

@@ -0,0 +1,69 @@
+import { getCollectionTitle } from "@/entrypoints/sidepanel/utils/getCollectionTitle";
+import { getCollections } from "@/features/collectionStorage";
+import { CollectionItem, GroupItem } from "@/models/CollectionModels";
+
+export default async function exportBookmarks(): Promise<void>
+{
+	const [collections] = await getCollections();
+	const lines: string[] = [
+		"<!DOCTYPE NETSCAPE-Bookmark-file-1>",
+		"<!-- This is an automatically generated file.",
+		"    It will be read and overwritten.",
+		"    DO NOT EDIT! -->",
+		"<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=UTF-8\">",
+		"<TITLE>Bookmarks</TITLE>",
+		"<H1>Bookmarks</H1>",
+		"<DL><p>"
+	];
+
+	for (const collection of collections)
+		lines.push(...createFolder(collection));
+
+	lines.push("</DL><p>");
+
+	const data: string = lines.join("\n");
+
+	const blob: Blob = new Blob([data], { type: "text/html" });
+
+	const element: HTMLAnchorElement = document.createElement("a");
+	element.style.display = "none";
+	element.href = URL.createObjectURL(blob);
+	element.setAttribute("download", "collections.html");
+
+	document.body.appendChild(element);
+	element.click();
+
+	URL.revokeObjectURL(element.href);
+	document.body.removeChild(element);
+}
+
+function createFolder(item: CollectionItem | GroupItem): string[]
+{
+	const lines: string[] = [];
+	const title: string = item.type === "collection" ?
+		(item.title ?? getCollectionTitle(item)) :
+		(item.pinned ? i18n.t("groups.pinned") : (item.title ?? ""));
+
+	lines.push(`<DT><H3>${sanitizeString(title)}</H3>`);
+	lines.push("<DL><p>");
+
+	for (const subItem of item.items)
+	{
+		if (subItem.type === "tab")
+			lines.push(`<DT><A HREF="${encodeURI(subItem.url).replace(/"/g, "%22")}">${sanitizeString(subItem.title || subItem.url)}</A>`);
+		else if (subItem.type === "group")
+			lines.push(...createFolder(subItem));
+	}
+
+	lines.push("</DL><p>");
+	return lines;
+}
+
+function sanitizeString(str: string): string
+{
+	return str
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;");
+}

features/netscapeBookmarks/utils/importBookmarks.ts

@@ -0,0 +1,52 @@
+import { getCollections, saveCollections } from "@/features/collectionStorage";
+import { sendMessage } from "@/utils/messaging";
+import parse from "node-bookmarks-parser";
+import { Bookmark } from "node-bookmarks-parser/build/interfaces/bookmark";
+import convertBookmarks from "./convertBookmarks";
+
+export default async function importBookmarks(): Promise<number | null>
+{
+	const element: HTMLInputElement = document.createElement("input");
+	element.style.display = "none";
+	element.hidden = true;
+	element.type = "file";
+	element.accept = ".html";
+
+	document.body.appendChild(element);
+	element.click();
+
+	await new Promise(resolve =>
+	{
+		const listener = () =>
+		{
+			element.removeEventListener("input", listener);
+			resolve(null);
+		};
+		element.addEventListener("input", listener);
+	});
+
+	if (!element.files || element.files.length < 1)
+		return null;
+
+	const file: File = element.files[0];
+	const content: string = await file.text();
+
+	document.body.removeChild(element);
+
+	try
+	{
+		const bookmarks: Bookmark[] = parse(content);
+		const [data, graphics, tabCount] = convertBookmarks(bookmarks);
+		const [collections, cloudIssues] = await getCollections();
+
+		await saveCollections([...data, ...collections], cloudIssues === null, graphics);
+		sendMessage("refreshCollections", undefined);
+
+		return tabCount;
+	}
+	catch (error)
+	{
+		console.error("Failed to parse bookmarks file", error);
+		return -1;
+	}
+}

locales/en.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "See the full list of what we collect"
       p3_link: "here"
 
+  netscape_bookmarks:
+    title: "Browser bookmarks"
+    export: "Export collections as bookmarks"
+    import: "Import from bookmarks file"
+    import_dialog:
+      title: "Import bookmarks"
+      content: "Import bookmarks from a Netscape-format bookmarks file exported from your browser."
+    import_result:
+      success: "Successfully imported $1 bookmarks."
+      error: "Failed to import bookmarks. Please ensure the file is a valid bookmarks file."
+
 notifications:
   tabs_saved:
     title: "New collection created"
@@ -114,6 +125,8 @@ options_page:
           restore: "Open tabs and remove the collection"
   storage:
     title: "Storage"
+    manage_title: "Storage management"
+    thumbnails_title: "Thumbnails & icons"
     capacity:
       title: "Cloud storage capacity"
       description: "$1 of $2 KiB"

locales/es.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "Ver la lista completa de lo que recopilamos"
       p3_link: "aquí"
 
+  netscape_bookmarks:
+    title: "Marcadores del navegador"
+    export: "Exportar colecciones como marcadores"
+    import: "Importar desde archivo de marcadores"
+    import_dialog:
+      title: "Importar marcadores"
+      content: "Importa marcadores desde un archivo de marcadores en formato Netscape exportado desde tu navegador."
+    import_result:
+      success: "Se importaron correctamente $1 marcadores."
+      error: "No se pudieron importar los marcadores. Asegúrate de que el archivo sea un archivo de marcadores válido."
+
 notifications:
   tabs_saved:
     title: "Nueva colección creada"
@@ -114,6 +125,8 @@ options_page:
           restore: "Abrir pestañas y eliminar la colección"
   storage:
     title: "Almacenamiento"
+    manage_title: "Administrar almacenamiento"
+    thumbnails_title: "Miniaturas e íconos"
     capacity:
       title: "Capacidad de almacenamiento en la nube"
       description: "$1 de $2 KiB"

locales/it.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "Vedi l'elenco completo di ciò che raccogliamo"
       p3_link: "qui"
 
+  netscape_bookmarks:
+    title: "Segnalibri del browser"
+    export: "Esporta collezioni come segnalibri"
+    import: "Importa da file di segnalibri"
+    import_dialog:
+      title: "Importa segnalibri"
+      content: "Importa segnalibri da un file di segnalibri in formato Netscape esportato dal tuo browser."
+    import_result:
+      success: "Importati con successo $1 segnalibri."
+      error: "Impossibile importare i segnalibri. Assicurati che il file sia un file di segnalibri valido."
+
 notifications:
   tabs_saved:
     title: "Nuova collezione creata"
@@ -114,6 +125,8 @@ options_page:
           restore: "Apri le schede e rimuovi la collezione"
   storage:
     title: "Archiviazione"
+    manage_title: "Gestisci archiviazione"
+    thumbnails_title: "Miniature e icone"
     capacity:
       title: "Capacità di archiviazione cloud"
       description: "$1 di $2 KiB"

locales/pl.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "Pełną listę zbieranych danych można zobaczyć"
       p3_link: "tutaj"
 
+  netscape_bookmarks:
+    title: "Import/eksport zakładek"
+    export: "Eksportuj kolekcje jako plik zakładek"
+    import: "Importuj z pliku zakładek"
+    import_dialog:
+      title: "Import zakładek"
+      content: "Importuj zakładki z pliku zakładek w formacie Netscape wyeksportowanego z przeglądarki."
+    import_result:
+      success: "Zakładki zostały pomyślnie zaimportowane ($1)"
+      error: "Nie udało się zaimportować zakładek. Upewnij się, że plik jest poprawnym plikiem zakładek."
+
 notifications:
   tabs_saved:
     title: "Utworzono nową kolekcję"
@@ -114,6 +125,8 @@ options_page:
           restore: "Otwórz karty i usuń kolekcję"
   storage:
     title: "Magazyn"
+    manage_title: "Zarządzaj magazynem"
+    thumbnails_title: "Podglądy i ikony"
     capacity:
       title: "Magazyn w chmurze"
       description: "$1 z $2 KiB"

locales/pt_BR.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "Veja a lista completa do que coletamos"
       p3_link: "aqui"
 
+  netscape_bookmarks:
+    title: "Favoritos do navegador"
+    export: "Exportar coleções como favoritos"
+    import: "Importar de arquivo de favoritos"
+    import_dialog:
+      title: "Importar favoritos"
+      content: "Importe favoritos de um arquivo de favoritos no formato Netscape exportado do seu navegador."
+    import_result:
+      success: "Importados com sucesso $1 favoritos."
+      error: "Falha ao importar favoritos. Por favor, certifique-se de que o arquivo é um arquivo de favoritos válido."
+
 notifications:
   tabs_saved:
     title: "Nova coleção criada"
@@ -114,6 +125,8 @@ options_page:
           restore: "Abrir abas e remover a coleção"
   storage:
     title: "Armazenamento"
+    manage_title: "Gerenciar armazenamento"
+    thumbnails_title: "Miniaturas e ícones"
     capacity:
       title: "Capacidade de armazenamento na nuvem"
       description: "$1 de $2 KiB"

locales/ru.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "Полный список собираемых данных можно посмотреть"
       p3_link: "здесь"
 
+  netscape_bookmarks:
+    title: "Импорт/экспорт закладок"
+    export: "Экспортировать коллекции как файл закладок"
+    import: "Импорт из файла закладок"
+    import_dialog:
+      title: "Импорт закладок"
+      content: "Импортируйте закладки из файла закладок в формате Netscape, экспортированного из вашего браузера."
+    import_result:
+      success: "Закладки успешно импортированы ($1 шт.)"
+      error: "Не удалось импортировать закладки. Пожалуйста, убедитесь, что файл является допустимым файлом закладок."
+
 notifications:
   tabs_saved:
     title: "Создана новая коллекция"
@@ -114,6 +125,8 @@ options_page:
           restore: "Открыть вкладки и удалить коллекцию"
   storage:
     title: "Хранилище"
+    manage_title: "Управление хранилищем"
+    thumbnails_title: "Превью и иконки"
     capacity:
       title: "Объём облачного хранилища"
       description: "$1 из $2 КиБ"

locales/uk.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "Повний список зібраних даних можна подивитися"
       p3_link: "тут"
 
+  netscape_bookmarks:
+    title: "Імпорт/експорт закладок"
+    export: "Експортувати колекції як файл закладок"
+    import: "Імпорт із файлу закладок"
+    import_dialog:
+      title: "Імпорт закладок"
+      content: "Імпортуйте закладки з файлу закладок у форматі Netscape, експортованого з вашого браузера."
+    import_result:
+      success: "Закладки успішно імпортовані ($1 шт.)"
+      error: "Не вдалося імпортувати закладки. Будь ласка, переконайтеся, що файл є коректним файлом закладок."
+
 notifications:
   tabs_saved:
     title: "Створено нову колекцію"
@@ -114,6 +125,8 @@ options_page:
           restore: "Відкрити вкладки та видалити колекцію"
   storage:
     title: "Сховище"
+    manage_title: "Керування сховищем"
+    thumbnails_title: "Прев'ю та іконки"
     capacity:
       title: "Хмарне сховище"
       description: "$1 з $2 КіБ"
@@ -132,13 +145,13 @@ options_page:
     disable_prompt:
       text: "Ця дія вимкне синхронізацію колекцій між вашими пристроями. Налаштування продовжать зберігатися у хмарі."
       action: "Вимкнути та перезавантажити розширення"
-    thumbnail_capture: "Зберігати превью і іконки для збережених вкладок"
+    thumbnail_capture: "Зберігати прев'ю і іконки для збережених вкладок"
     thumbnail_capture_notice1: "Необхідний доступ до вмісту відвіданих веб-сайтів"
     thumbnail_capture_notice2: "Вимкнення цієї функції може покращити продуктивність при великій кількості збережених вкладок"
     clear_thumbnails:
       action: "Видалити збережені іконки"
-      title: "Видалити превью і іконки?"
+      title: "Видалити прев'ю і іконки?"
-      prompt: "Ця дія видалить всі превью і іконки у ваших збережених вкладках. Цю дію не можна скасувати."
+      prompt: "Ця дія видалить всі прев'ю і іконки у ваших збережених вкладках. Цю дію не можна скасувати."
   about:
     title: "О розширенні"
     developed_by: "Розробник: Євген Лис"

locales/zh_CN.yml

@@ -46,6 +46,17 @@ features:
       p3_text: "请参阅我们收集内容的"
       p3_link: "完整列表"
 
+  netscape_bookmarks:
+    title: "浏览器书签"
+    export: "将收藏导出为书签"
+    import: "从书签文件导入"
+    import_dialog:
+      title: "导入书签"
+      content: "从您的浏览器导出的 Netscape 格式书签文件中导入书签。"
+    import_result:
+      success: "成功导入 $1 个书签。"
+      error: "导入书签失败。请确保该文件是有效的书签文件。"
+
 notifications:
   tabs_saved:
     title: "已创建新收藏"
@@ -114,6 +125,8 @@ options_page:
           restore: "打开标签页并删除收藏"
   storage:
     title: "存储"
+    manage_title: "存储管理"
+    thumbnails_title: "缩略图和图标"
     capacity:
       title: "云存储容量"
       description: "$1 / $2 KiB"

package.json

@@ -1,46 +1,43 @@
 {
 	"name": "tabs-aside",
 	"private": true,
-	"version": "3.2.1",
+	"version": "3.2.3",
 	"type": "module",
 	"scripts": {
 		"dev": "wxt",
-		"build": "yarn lint && wxt build --mv3",
+		"build": "npm run lint && wxt build --mv3",
-		"zip": "yarn lint && wxt zip --mv3",
+		"zip": "npm run lint && wxt zip --mv3",
 		"lint": "tsc --noEmit && eslint . -c eslint.config.js",
 		"prepare": "wxt prepare",
-		"postinstall": "yarn prepare"
+		"postinstall": "wxt prepare"
 	},
 	"dependencies": {
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@fluentui/react-components": "^9.72.6",
+		"@fluentui/react-components": "^9.72.8",
-		"@fluentui/react-icons": "^2.0.313",
+		"@fluentui/react-icons": "^2.0.316",
 		"@webext-core/messaging": "^2.3.0",
 		"@wxt-dev/analytics": "^0.5.1",
 		"@wxt-dev/i18n": "^0.2.4",
 		"lzutf8": "^0.6.3",
-		"react": "~19.2.0",
+		"node-bookmarks-parser": "^2.0.0",
-		"react-dom": "~19.2.0"
+		"react": "^19.2.1",
+		"react-dom": "^19.2.1"
 	},
 	"devDependencies": {
 		"@eslint/css": "^0.14.1",
 		"@eslint/js": "^9.39.1",
 		"@eslint/json": "^0.14.0",
-		"@stylistic/eslint-plugin": "^5.5.0",
+		"@stylistic/eslint-plugin": "^5.6.1",
-		"@types/react": "~19.2.2",
+		"@types/react": "^19.2.7",
-		"@types/react-dom": "~19.2.2",
+		"@types/react-dom": "^19.2.3",
 		"@wxt-dev/module-react": "^1.1.5",
 		"eslint": "^9.39.1",
 		"eslint-plugin-react": "^7.37.5",
-		"globals": "^16.5.0",
-		"scheduler": "0.23.0",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.46.4",
+		"typescript-eslint": "^8.49.0",
-		"vite": "^7.2.2",
 		"wxt": "^0.20.11"
-	},
+	}
-	"packageManager": "yarn@4.9.2"
 }