!feat: major 3.0 release candidate

hooks/useBmcStyles.ts

@@ -0,0 +1,13 @@
+import { makeStyles } from "@fluentui/react-components";
+
+export const useBmcStyles = makeStyles({
+	button:
+	{
+		backgroundColor: "#ff813f",
+
+		"&:hover, &:hover:active":
+		{
+			backgroundColor: "#ff6b1c"
+		}
+	}
+});

hooks/useDangerStyles.ts

@@ -0,0 +1,28 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+export const useDangerStyles = makeStyles({
+	menuItem:
+	{
+		color: tokens.colorStatusDangerForeground1 + " !important",
+
+		"& .fui-MenuItem__icon":
+		{
+			color: tokens.colorStatusDangerForeground1 + " !important"
+		}
+	},
+	buttonPrimary:
+	{
+		backgroundColor: tokens.colorStatusDangerBackground3,
+		color: tokens.colorNeutralForegroundStaticInverted,
+
+		"&:hover":
+		{
+			backgroundColor: tokens.colorStatusDangerBackground3Hover,
+
+			"&:active":
+			{
+				backgroundColor: tokens.colorStatusDangerBackground3Pressed
+			}
+		}
+	}
+});

hooks/useGroupColors.ts

@@ -0,0 +1,49 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+export const useGroupColors: () => Record<chrome.tabGroups.ColorEnum, string> = makeStyles({
+	blue:
+	{
+		"--border": tokens.colorPaletteBlueBorderActive,
+		"--text": tokens.colorNeutralForegroundInverted
+	},
+	cyan:
+	{
+		"--border": tokens.colorPaletteTealBorderActive,
+		"--text": tokens.colorNeutralForegroundInverted
+	},
+	green:
+	{
+		"--border": tokens.colorPaletteGreenBorderActive,
+		"--text": tokens.colorNeutralForegroundInverted
+	},
+	grey:
+	{
+		"--border": tokens.colorPalettePlatinumBorderActive,
+		"--text": tokens.colorNeutralForegroundInverted
+	},
+	orange:
+	{
+		"--border": tokens.colorPalettePeachBorderActive,
+		"--text": tokens.colorNeutralForegroundInverted
+	},
+	pink:
+	{
+		"--border": tokens.colorPalettePinkBorderActive,
+		"--text": tokens.colorNeutralForegroundInverted
+	},
+	purple:
+	{
+		"--border": tokens.colorPalettePurpleBorderActive,
+		"--text": tokens.colorNeutralForegroundStaticInverted
+	},
+	red:
+	{
+		"--border": tokens.colorPaletteRedBackground3,
+		"--text": tokens.colorNeutralForegroundStaticInverted
+	},
+	yellow:
+	{
+		"--border": tokens.colorPaletteYellowBorderActive,
+		"--text": tokens.colorNeutralForeground1Static
+	}
+});

hooks/useSettings.ts

@@ -0,0 +1,24 @@
+import { settings } from "@/utils/settings";
+
+export default function useSettings<K extends keyof typeof settings>(key: K): SettingsHook<K>
+{
+	const [value, setValue] = useState<SettingsValue<K> | null>(null);
+
+	useEffect(() =>
+	{
+		settings[key].getValue()
+			.then(value => setValue(value as SettingsValue<K>));
+
+		const unwatch = settings[key].watch(value => setValue(value as SettingsValue<K>));
+
+		return () => unwatch();
+	}, [key]);
+
+	return [value, settings[key].setValue] as SettingsHook<K>;
+}
+
+export type SettingsValue<K extends keyof typeof settings> =
+	typeof settings[K] extends { fallback: infer T; } ? T : never;
+
+export type SettingsHook<K extends keyof typeof settings> =
+	[SettingsValue<K> | null, (newValue: SettingsValue<K>) => Promise<void>];

hooks/useStorageInfo.ts

@@ -0,0 +1,27 @@
+export default function useStorageInfo(): StorageInfoHook
+{
+	const [bytesInUse, setBytesInUse] = useState<number>(0);
+
+	useEffect(() =>
+	{
+		const updateValue = async () =>
+			setBytesInUse(await browser.storage.sync.getBytesInUse());
+
+		updateValue();
+		browser.storage.sync.onChanged.addListener(updateValue);
+		return () => browser.storage.sync.onChanged.removeListener(updateValue);
+	}, []);
+
+	return {
+		bytesInUse,
+		storageQuota: chrome.storage.sync.QUOTA_BYTES ?? 102400,
+		usedStorageRatio: bytesInUse / (chrome.storage.sync.QUOTA_BYTES ?? 102400)
+	};
+}
+
+export type StorageInfoHook =
+	{
+		bytesInUse: number;
+		storageQuota: number;
+		usedStorageRatio: number;
+	};