feat: add netscape bookmark import/export #203

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 { ArrowDownload24Regular, ArrowUpload24Regular } 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={ <ArrowDownload24Regular /> } onClick={ exportBookmarks }>
+					{ i18n.t("features.netscape_bookmarks.export") }
+				</Button>
+				<Button icon={ <ArrowUpload24Regular /> } 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
+	}
+});