!feat: major 3.0 release candidate

features/v3welcome/components/WelcomeDialog.tsx

@@ -0,0 +1,68 @@
+import { useTheme } from "@/contexts/ThemeProvider";
+import { v3blogPost } from "@/data/links";
+import extLink from "@/utils/extLink";
+import * as fui from "@fluentui/react-components";
+
+export default function WelcomeDialog(): React.ReactElement
+{
+	const { isDark } = useTheme();
+	const cls = useStyles();
+
+	return (
+		<fui.DialogSurface>
+			<fui.DialogBody>
+				<fui.DialogContent className={ cls.root }>
+					<img alt="" src={ browser.runtime.getURL(isDark ? "/promo/dark.webp" : "/promo/light.webp") } />
+
+					<fui.Title2>{ i18n.t("features.v3welcome.title") }</fui.Title2>
+
+					<fui.Body1 as="p">
+						{ i18n.t("features.v3welcome.text1") }
+					</fui.Body1>
+					<fui.Body1 as="p">
+						{ i18n.t("features.v3welcome.text2") }
+					</fui.Body1>
+					<ul>
+						{ !import.meta.env.FIREFOX &&
+							<li>{ i18n.t("features.v3welcome.list.item1") }</li>
+						}
+						<li>{ i18n.t("features.v3welcome.list.item2") }</li>
+						<li>{ i18n.t("features.v3welcome.list.item3") }</li>
+						<li>{ i18n.t("features.v3welcome.list.item4") }</li>
+						<li>{ i18n.t("features.v3welcome.list.item5") }</li>
+					</ul>
+					<fui.Body1>
+						{ i18n.t("features.v3welcome.text3") }
+					</fui.Body1>
+
+				</fui.DialogContent>
+
+				<fui.DialogActions>
+					<fui.DialogTrigger disableButtonEnhancement>
+						<fui.Button appearance="primary" as="a" { ...extLink(v3blogPost) }>
+							{ i18n.t("features.v3welcome.actions.visit_blog") }
+						</fui.Button>
+					</fui.DialogTrigger>
+					<fui.DialogTrigger disableButtonEnhancement>
+						<fui.Button appearance="subtle">
+							{ i18n.t("common.actions.close") }
+						</fui.Button>
+					</fui.DialogTrigger>
+				</fui.DialogActions>
+			</fui.DialogBody>
+		</fui.DialogSurface>
+	);
+}
+
+const useStyles = fui.makeStyles({
+	root:
+	{
+		display: "flex",
+		flexFlow: "column",
+		gap: fui.tokens.spacingVerticalS
+	},
+	image:
+	{
+		display: "contents"
+	}
+});

features/v3welcome/hooks/useWelcomeDialog.tsx

@@ -0,0 +1,17 @@
+import { useDialog } from "@/contexts/DialogProvider";
+import WelcomeDialog from "../components/WelcomeDialog";
+import { showWelcomeDialog } from "../utils/showWelcomeDialog";
+
+export default function useWelcomeDialog(): void
+{
+	const dialog = useDialog();
+
+	useEffect(() =>
+	{
+		showWelcomeDialog.getValue().then(showWelcome =>
+		{
+			if (showWelcome || import.meta.env.DEV)
+				dialog.pushCustom(<WelcomeDialog />, undefined, () => showWelcomeDialog.removeValue());
+		});
+	}, []);
+}

features/v3welcome/index.ts

@@ -0,0 +1,2 @@
+export { default as useWelcomeDialog } from "./hooks/useWelcomeDialog";
+export { showWelcomeDialog } from "./utils/showWelcomeDialog";

features/v3welcome/utils/showWelcomeDialog.ts

@@ -0,0 +1,6 @@
+export const showWelcomeDialog = storage.defineItem(
+	"local:showWelcome",
+	{
+		fallback: false
+	}
+);