From f843f23cb7023ffa872de0d8511124078cbd3761 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Thu, 12 Sep 2024 21:28:08 +0000
Subject: [PATCH 01/17] chore: finish draft work for FeatureBadge component

---
 .../FeatureBadge/FeatureBadge.stories.tsx     | 22 ++++++
 .../components/FeatureBadge/FeatureBadge.tsx  | 67 +++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 site/src/components/FeatureBadge/FeatureBadge.stories.tsx
 create mode 100644 site/src/components/FeatureBadge/FeatureBadge.tsx

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
new file mode 100644
index 0000000000000..32072c3facaad
--- /dev/null
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FeatureBadge } from "./FeatureBadge";
+
+const meta: Meta<typeof FeatureBadge> = {
+	title: "components/FeatureBadge",
+	component: FeatureBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof FeatureBadge>;
+
+export const Small: Story = {
+	args: {
+		size: "sm",
+	},
+};
+
+export const Medium: Story = {
+	args: {
+		size: "md",
+	},
+};
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
new file mode 100644
index 0000000000000..73ef11d7f2fa3
--- /dev/null
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -0,0 +1,67 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import type { FC, HTMLAttributes, ReactNode } from "react";
+
+/**
+ * All types of feature that we are currently supporting. Defined as record to
+ * ensure that we can't accidentally make typos when writing the badge text.
+ */
+const featureBadgeTypes = {
+	beta: "beta",
+	earlyAccess: "early access",
+} as const satisfies Record<string, ReactNode>;
+
+const styles = {
+	badge: (theme) => ({
+		// Base type is based on a span so that the element can be placed inside
+		// more types of HTML elements without creating invalid markdown, but we
+		// still want the default display behavior to be div-like
+		display: "block",
+		maxWidth: "fit-content",
+		flexShrink: 0,
+		padding: "8px 4px",
+		border: `1px solid ${theme.palette.divider}`,
+		color: theme.palette.text.secondary,
+		backgroundColor: theme.palette.background.default,
+		borderRadius: "6px",
+
+		// Base style assumes that small badges will be the default
+		fontSize: "0.75rem",
+	}),
+
+	highlighted: (theme) => ({
+		color: theme.palette.text.primary,
+		borderColor: theme.palette.text.primary,
+	}),
+
+	mediumText: {
+		fontSize: "1rem",
+	},
+} as const satisfies Record<string, Interpolation<Theme>>;
+
+type FeatureBadgeProps = Readonly<
+	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+		type: keyof typeof featureBadgeTypes;
+		size?: "sm" | "md";
+		isHighlighted?: boolean;
+	}
+>;
+
+export const FeatureBadge: FC<FeatureBadgeProps> = ({
+	type,
+	size = "sm",
+	isHighlighted = false,
+	...delegatedProps
+}) => {
+	return (
+		<span
+			css={[
+				styles.badge,
+				size === "md" && styles.mediumText,
+				isHighlighted && styles.highlighted,
+			]}
+			{...delegatedProps}
+		>
+			{featureBadgeTypes[type]}
+		</span>
+	);
+};

From 43874a4a239aa8282d255a10f42e0d817f88de28 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Thu, 12 Sep 2024 21:36:42 +0000
Subject: [PATCH 02/17] fix: add visually-hidden helper text for screen readers

---
 site/src/components/FeatureBadge/FeatureBadge.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 73ef11d7f2fa3..7c10a404858a4 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -1,4 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import { visuallyHidden } from "@mui/utils";
 import type { FC, HTMLAttributes, ReactNode } from "react";
 
 /**
@@ -61,7 +62,9 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 			]}
 			{...delegatedProps}
 		>
+			<span style={visuallyHidden}> (This feature is</span>
 			{featureBadgeTypes[type]}
+			<span style={visuallyHidden}>)</span>
 		</span>
 	);
 };

From fb70781f771ed2f6190674ddb55883fb283fc691 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Thu, 12 Sep 2024 21:39:55 +0000
Subject: [PATCH 03/17] chore: add stories for highlighted state

---
 .../FeatureBadge/FeatureBadge.stories.tsx          | 14 ++++++++++++++
 site/src/components/FeatureBadge/FeatureBadge.tsx  |  6 +++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index 32072c3facaad..3db8210787d2a 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -20,3 +20,17 @@ export const Medium: Story = {
 		size: "md",
 	},
 };
+
+export const HighlightedSmall: Story = {
+	args: {
+		size: "sm",
+		highlighted: true,
+	},
+};
+
+export const HighlightedMedium: Story = {
+	args: {
+		size: "md",
+		highlighted: true,
+	},
+};
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 7c10a404858a4..dd63ea48a4a43 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -43,14 +43,14 @@ type FeatureBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		type: keyof typeof featureBadgeTypes;
 		size?: "sm" | "md";
-		isHighlighted?: boolean;
+		highlighted?: boolean;
 	}
 >;
 
 export const FeatureBadge: FC<FeatureBadgeProps> = ({
 	type,
 	size = "sm",
-	isHighlighted = false,
+	highlighted = false,
 	...delegatedProps
 }) => {
 	return (
@@ -58,7 +58,7 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 			css={[
 				styles.badge,
 				size === "md" && styles.mediumText,
-				isHighlighted && styles.highlighted,
+				highlighted && styles.highlighted,
 			]}
 			{...delegatedProps}
 		>

From c2470f97f5868964494e4667c785f2a1d3f2ac14 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Thu, 12 Sep 2024 21:50:49 +0000
Subject: [PATCH 04/17] fix: update base styles

---
 .../components/FeatureBadge/FeatureBadge.stories.tsx  |  3 +++
 site/src/components/FeatureBadge/FeatureBadge.tsx     | 11 +++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index 3db8210787d2a..8b5236eb774a1 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -4,6 +4,9 @@ import { FeatureBadge } from "./FeatureBadge";
 const meta: Meta<typeof FeatureBadge> = {
 	title: "components/FeatureBadge",
 	component: FeatureBadge,
+	args: {
+		type: "beta",
+	},
 };
 
 export default meta;
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index dd63ea48a4a43..0163292133a67 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -17,16 +17,19 @@ const styles = {
 		// more types of HTML elements without creating invalid markdown, but we
 		// still want the default display behavior to be div-like
 		display: "block",
+
+		// Base style assumes that small badges will be the default
+		fontSize: "0.75rem",
+
 		maxWidth: "fit-content",
 		flexShrink: 0,
-		padding: "8px 4px",
+		padding: "4px 8px",
+		lineHeight: 1,
+		whiteSpace: "nowrap",
 		border: `1px solid ${theme.palette.divider}`,
 		color: theme.palette.text.secondary,
 		backgroundColor: theme.palette.background.default,
 		borderRadius: "6px",
-
-		// Base style assumes that small badges will be the default
-		fontSize: "0.75rem",
 	}),
 
 	highlighted: (theme) => ({

From 693946f78df903c8e6b815e5500be766dcc4e87e Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Thu, 12 Sep 2024 21:54:48 +0000
Subject: [PATCH 05/17] chore: remove debug display option

---
 site/src/components/FeatureBadge/FeatureBadge.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 0163292133a67..0872a4b82faa4 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -8,7 +8,6 @@ import type { FC, HTMLAttributes, ReactNode } from "react";
  */
 const featureBadgeTypes = {
 	beta: "beta",
-	earlyAccess: "early access",
 } as const satisfies Record<string, ReactNode>;
 
 const styles = {

From 129613b743b206eeeac2bbf4ffc630dd891402cf Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 13 Sep 2024 19:46:43 +0000
Subject: [PATCH 06/17] chore: update Popover to propagate events

---
 site/src/components/Popover/Popover.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 7db3c4eda1799..43db214b0f097 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -1,10 +1,10 @@
 import MuiPopover, {
 	type PopoverProps as MuiPopoverProps,
-	// biome-ignore lint/nursery/noRestrictedImports: Used as base component
 } from "@mui/material/Popover";
 import {
 	type FC,
 	type HTMLAttributes,
+	type PointerEvent,
 	type ReactElement,
 	type ReactNode,
 	type RefObject,
@@ -95,17 +95,20 @@ export const PopoverTrigger = (
 	const { children, ...elementProps } = props;
 
 	const clickProps = {
-		onClick: () => {
+		onClick: (event: PointerEvent<HTMLElement>) => {
 			popover.setOpen(true);
+			elementProps.onClick?.(event);
 		},
 	};
 
 	const hoverProps = {
-		onPointerEnter: () => {
+		onPointerEnter: (event: PointerEvent<HTMLElement>) => {
 			popover.setOpen(true);
+			elementProps.onPointerEnter?.(event);
 		},
-		onPointerLeave: () => {
+		onPointerLeave: (event: PointerEvent<HTMLElement>) => {
 			popover.setOpen(false);
+			elementProps.onPointerLeave?.(event);
 		},
 	};
 

From 6adea6b60652a7691c749b2df0b3d970089ecefe Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 13 Sep 2024 19:47:04 +0000
Subject: [PATCH 07/17] wip: commit progress on FeatureBadge update

---
 .../FeatureBadge/FeatureBadge.stories.tsx     |  23 +--
 .../components/FeatureBadge/FeatureBadge.tsx  | 134 ++++++++++++++++--
 2 files changed, 123 insertions(+), 34 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index 8b5236eb774a1..1d522ed83748c 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -12,28 +12,9 @@ const meta: Meta<typeof FeatureBadge> = {
 export default meta;
 type Story = StoryObj<typeof FeatureBadge>;
 
-export const Small: Story = {
+export const SmallInteractive: Story = {
 	args: {
 		size: "sm",
-	},
-};
-
-export const Medium: Story = {
-	args: {
-		size: "md",
-	},
-};
-
-export const HighlightedSmall: Story = {
-	args: {
-		size: "sm",
-		highlighted: true,
-	},
-};
-
-export const HighlightedMedium: Story = {
-	args: {
-		size: "md",
-		highlighted: true,
+		variant: "interactive",
 	},
 };
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 0872a4b82faa4..ff1105cc8426f 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -1,6 +1,16 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import Link from "@mui/material/Link";
 import { visuallyHidden } from "@mui/utils";
-import type { FC, HTMLAttributes, ReactNode } from "react";
+import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
+import { Popover, PopoverTrigger } from "components/Popover/Popover";
+import {
+	useEffect,
+	useState,
+	type FC,
+	type HTMLAttributes,
+	type ReactNode,
+} from "react";
+import { docs } from "utils/docs";
 
 /**
  * All types of feature that we are currently supporting. Defined as record to
@@ -8,6 +18,7 @@ import type { FC, HTMLAttributes, ReactNode } from "react";
  */
 const featureBadgeTypes = {
 	beta: "beta",
+	experimental: "experimental",
 } as const satisfies Record<string, ReactNode>;
 
 const styles = {
@@ -16,11 +27,12 @@ const styles = {
 		// more types of HTML elements without creating invalid markdown, but we
 		// still want the default display behavior to be div-like
 		display: "block",
+		maxWidth: "fit-content",
 
 		// Base style assumes that small badges will be the default
 		fontSize: "0.75rem",
 
-		maxWidth: "fit-content",
+		cursor: "default",
 		flexShrink: 0,
 		padding: "4px 8px",
 		lineHeight: 1,
@@ -31,42 +43,138 @@ const styles = {
 		borderRadius: "6px",
 	}),
 
-	highlighted: (theme) => ({
+	badgeHover: (theme) => ({
 		color: theme.palette.text.primary,
 		borderColor: theme.palette.text.primary,
 	}),
 
-	mediumText: {
+	badgeLargeText: {
 		fontSize: "1rem",
 	},
+
+	tooltipTitle: {
+		fontWeight: 600,
+		fontFamily: "inherit",
+		fontSize: 18,
+		margin: 0,
+		lineHeight: 1,
+		paddingBottom: "8px",
+	},
+
+	tooltipDescription: {
+		margin: 0,
+		lineHeight: 1.2,
+	},
 } as const satisfies Record<string, Interpolation<Theme>>;
 
 type FeatureBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		type: keyof typeof featureBadgeTypes;
-		size?: "sm" | "md";
-		highlighted?: boolean;
+		size?: "sm" | "lg";
+
+		/**
+		 * Defines how the FeatureBadge should render.
+		 * - interactive (default) - The badge functions like a link and
+		 *   controls its own hover styling.
+		 * - static - The badge is completely static and has no interaction
+		 *   behavior.
+		 * - staticHover - The badge is completely static, but displays badge
+		     hover styling (but nothing related to links). Useful if you want a
+			 parent component to control the hover styling.
+		 */
+		variant?: "interactive" | "static" | "staticHover";
 	}
 >;
 
 export const FeatureBadge: FC<FeatureBadgeProps> = ({
 	type,
 	size = "sm",
-	highlighted = false,
+	variant = "interactive",
+	onPointerEnter,
+	onPointerLeave,
 	...delegatedProps
 }) => {
-	return (
+	const [isBadgeHovering, setIsBadgeHovering] = useState(false);
+	useEffect(() => {
+		const onWindowBlur = () => {
+			setIsBadgeHovering(false);
+		};
+
+		window.addEventListener("blur", onWindowBlur);
+		return () => window.removeEventListener("blur", onWindowBlur);
+	}, []);
+
+	const featureType = featureBadgeTypes[type];
+	const showHoverStyles =
+		variant === "staticHover" || (variant === "interactive" && isBadgeHovering);
+
+	const coreContent = (
 		<span
 			css={[
 				styles.badge,
-				size === "md" && styles.mediumText,
-				highlighted && styles.highlighted,
+				size === "lg" && styles.badgeLargeText,
+				showHoverStyles && styles.badgeHover,
 			]}
 			{...delegatedProps}
 		>
-			<span style={visuallyHidden}> (This feature is</span>
-			{featureBadgeTypes[type]}
-			<span style={visuallyHidden}>)</span>
+			<span style={visuallyHidden}> (This is a</span>
+			{featureType}
+			<span style={visuallyHidden}> feature)</span>
 		</span>
 	);
+
+	if (variant !== "interactive") {
+		return coreContent;
+	}
+
+	return (
+		<Popover mode="hover">
+			<PopoverTrigger
+				onPointerEnter={(event) => {
+					setIsBadgeHovering(true);
+					onPointerEnter?.(event);
+				}}
+				onPointerLeave={(event) => {
+					setIsBadgeHovering(false);
+					onPointerLeave?.(event);
+				}}
+			>
+				{coreContent}
+			</PopoverTrigger>
+
+			<HelpTooltipContent
+				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+				transformOrigin={{ vertical: "top", horizontal: "center" }}
+			>
+				<h5 css={styles.tooltipTitle}>
+					{capitalizeFirstLetter(featureType)} Feature
+				</h5>
+
+				<p css={styles.tooltipDescription}>
+					This is {getGrammaticalArticle(featureType)} {featureType} feature. It
+					has not yet been marked for general availability.
+				</p>
+
+				<Link
+					href={docs("/contributing/feature-stages")}
+					target="_blank"
+					rel="noreferrer"
+					css={{ fontWeight: 600 }}
+				>
+					Feature stage documentation
+					<span style={visuallyHidden}> (link opens in new tab)</span>
+				</Link>
+			</HelpTooltipContent>
+		</Popover>
+	);
 };
+
+function getGrammaticalArticle(nextWord: string): string {
+	const vowels = ["a", "e", "i", "o", "u"];
+	const firstLetter = nextWord.slice(0, 1).toLowerCase();
+	return vowels.includes(firstLetter) ? "an" : "a";
+}
+
+function capitalizeFirstLetter(text: string): string {
+	return text.slice(0, 1).toUpperCase() + text.slice(1);
+}

From d4455a89f91d88cb6017ab11a9fb962d7d1dd33d Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 13 Sep 2024 20:05:09 +0000
Subject: [PATCH 08/17] wip: commit more progress

---
 .../FeatureBadge/FeatureBadge.stories.tsx         | 11 ++++++++++-
 site/src/components/FeatureBadge/FeatureBadge.tsx | 15 +++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index 1d522ed83748c..a4610a160802d 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -12,8 +12,17 @@ const meta: Meta<typeof FeatureBadge> = {
 export default meta;
 type Story = StoryObj<typeof FeatureBadge>;
 
-export const SmallInteractive: Story = {
+export const SmallInteractiveBeta: Story = {
 	args: {
+		type: "beta",
+		size: "sm",
+		variant: "interactive",
+	},
+};
+
+export const SmallInteractiveExperimental: Story = {
+	args: {
+		type: "experimental",
 		size: "sm",
 		variant: "interactive",
 	},
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index ff1105cc8426f..3ec1267a764ff 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -52,17 +52,24 @@ const styles = {
 		fontSize: "1rem",
 	},
 
-	tooltipTitle: {
+	tooltipTitle: (theme) => ({
+		color: theme.palette.text.primary,
 		fontWeight: 600,
 		fontFamily: "inherit",
 		fontSize: 18,
 		margin: 0,
 		lineHeight: 1,
 		paddingBottom: "8px",
-	},
+	}),
 
 	tooltipDescription: {
 		margin: 0,
+		lineHeight: 1.4,
+		paddingBottom: "8px",
+	},
+
+	tooltipLink: {
+		fontWeight: 600,
 		lineHeight: 1.2,
 	},
 } as const satisfies Record<string, Interpolation<Theme>>;
@@ -159,9 +166,9 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 					href={docs("/contributing/feature-stages")}
 					target="_blank"
 					rel="noreferrer"
-					css={{ fontWeight: 600 }}
+					css={styles.tooltipLink}
 				>
-					Feature stage documentation
+					Learn about feature stages
 					<span style={visuallyHidden}> (link opens in new tab)</span>
 				</Link>
 			</HelpTooltipContent>

From 8ae71d389e2040435cab04c7d881ff61e51cbcac Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 13 Sep 2024 20:17:04 +0000
Subject: [PATCH 09/17] chore: update tag definitions to satify Biome

---
 .../AppearancePage/AppearanceForm.tsx         | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
index a4e520c2b7137..6559e31723156 100644
--- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
+++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -175,23 +175,23 @@ const ThemePreview: FC<ThemePreviewProps> = ({
 				<div css={styles.page}>
 					<div css={styles.header}>
 						<div css={styles.headerLinks}>
-							<div css={[styles.headerLink, styles.activeHeaderLink]}></div>
-							<div css={styles.headerLink}></div>
-							<div css={styles.headerLink}></div>
+							<div css={[styles.headerLink, styles.activeHeaderLink]} />
+							<div css={styles.headerLink} />
+							<div css={styles.headerLink} />
 						</div>
 						<div css={styles.headerLinks}>
-							<div css={styles.proxy}></div>
-							<div css={styles.user}></div>
+							<div css={styles.proxy} />
+							<div css={styles.user} />
 						</div>
 					</div>
 					<div css={styles.body}>
-						<div css={styles.title}></div>
+						<div css={styles.title} />
 						<div css={styles.table}>
-							<div css={styles.tableHeader}></div>
-							<div css={styles.workspace}></div>
-							<div css={styles.workspace}></div>
-							<div css={styles.workspace}></div>
-							<div css={styles.workspace}></div>
+							<div css={styles.tableHeader} />
+							<div css={styles.workspace} />
+							<div css={styles.workspace} />
+							<div css={styles.workspace} />
+							<div css={styles.workspace} />
 						</div>
 					</div>
 				</div>

From 0ad68afb99fc5bcf2d1708637b7e1dd22fd30f8c Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 13 Sep 2024 21:00:40 +0000
Subject: [PATCH 10/17] chore: update all colors for preview role

---
 .../components/FeatureBadge/FeatureBadge.tsx  | 14 +++++---
 site/src/theme/dark/roles.ts                  | 36 +++++++++++++++----
 site/src/theme/darkBlue/roles.ts              | 36 +++++++++++++++----
 site/src/theme/index.ts                       |  1 -
 site/src/theme/light/roles.ts                 | 36 +++++++++++++++----
 site/src/theme/roles.ts                       |  2 +-
 6 files changed, 97 insertions(+), 28 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 3ec1267a764ff..353a44b527962 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -10,6 +10,7 @@ import {
 	type HTMLAttributes,
 	type ReactNode,
 } from "react";
+import tailwindColors from "theme/tailwindColors";
 import { docs } from "utils/docs";
 
 /**
@@ -37,15 +38,18 @@ const styles = {
 		padding: "4px 8px",
 		lineHeight: 1,
 		whiteSpace: "nowrap",
-		border: `1px solid ${theme.palette.divider}`,
-		color: theme.palette.text.secondary,
-		backgroundColor: theme.palette.background.default,
+		border: `1px solid ${theme.roles.preview.outline}`,
+		color: theme.roles.preview.text,
+		backgroundColor: theme.roles.preview.background,
 		borderRadius: "6px",
+		transition:
+			"color 0.4s ease-in-out, border-color 0.4s ease-in-out, background-color 0.4s ease-in-out",
 	}),
 
 	badgeHover: (theme) => ({
-		color: theme.palette.text.primary,
-		borderColor: theme.palette.text.primary,
+		color: theme.roles.preview.hover.text,
+		borderColor: theme.roles.preview.hover.outline,
+		backgroundColor: theme.roles.preview.hover.background,
 	}),
 
 	badgeLargeText: {
diff --git a/site/src/theme/dark/roles.ts b/site/src/theme/dark/roles.ts
index 32a9ea4f12992..dfefd1d10909b 100644
--- a/site/src/theme/dark/roles.ts
+++ b/site/src/theme/dark/roles.ts
@@ -1,7 +1,7 @@
 import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
-export default {
+const roles: Roles = {
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -143,13 +143,35 @@ export default {
 		},
 	},
 	preview: {
-		background: colors.violet[950],
-		outline: colors.violet[500],
-		text: colors.violet[50],
+		background: colors.cyan[950],
+		outline: colors.cyan[600],
+		text: colors.cyan[400],
 		fill: {
-			solid: colors.violet[400],
-			outline: colors.violet[400],
+			solid: colors.cyan[400],
+			outline: colors.cyan[400],
 			text: colors.white,
 		},
+		hover: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
+		disabled: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
 	},
-} satisfies Roles;
+};
+
+export default roles;
diff --git a/site/src/theme/darkBlue/roles.ts b/site/src/theme/darkBlue/roles.ts
index 744b7329249b9..a0f36daa810b9 100644
--- a/site/src/theme/darkBlue/roles.ts
+++ b/site/src/theme/darkBlue/roles.ts
@@ -1,7 +1,7 @@
 import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
-export default {
+const roles: Roles = {
 	danger: {
 		background: colors.orange[950],
 		outline: colors.orange[500],
@@ -143,13 +143,35 @@ export default {
 		},
 	},
 	preview: {
-		background: colors.violet[950],
-		outline: colors.violet[500],
-		text: colors.violet[50],
+		background: colors.cyan[950],
+		outline: colors.cyan[600],
+		text: colors.cyan[400],
 		fill: {
-			solid: colors.violet[400],
-			outline: colors.violet[400],
+			solid: colors.cyan[400],
+			outline: colors.cyan[400],
 			text: colors.white,
 		},
+		hover: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
+		disabled: {
+			background: colors.zinc[950],
+			outline: colors.cyan[500],
+			text: colors.cyan[300],
+			fill: {
+				text: colors.white,
+				outline: colors.cyan[600],
+				solid: colors.cyan[600],
+			},
+		},
 	},
-} satisfies Roles;
+};
+
+export default roles;
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 8509ccb4135a6..7516fe1207929 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,4 +1,3 @@
-// biome-ignore lint/nursery/noRestrictedImports: We still use `Theme` as a basis for our actual theme, for now.
 import type { Theme as MuiTheme } from "@mui/material/styles";
 import type * as monaco from "monaco-editor";
 import type { Branding } from "./branding";
diff --git a/site/src/theme/light/roles.ts b/site/src/theme/light/roles.ts
index fe3d1d9687bfa..905d45384f247 100644
--- a/site/src/theme/light/roles.ts
+++ b/site/src/theme/light/roles.ts
@@ -1,7 +1,7 @@
 import type { Roles } from "../roles";
 import colors from "../tailwindColors";
 
-export default {
+const roles: Roles = {
 	danger: {
 		background: colors.orange[50],
 		outline: colors.orange[400],
@@ -143,13 +143,35 @@ export default {
 		},
 	},
 	preview: {
-		background: colors.violet[50],
-		outline: colors.violet[500],
-		text: colors.violet[950],
+		background: colors.cyan[100],
+		outline: colors.cyan[500],
+		text: colors.cyan[950],
 		fill: {
-			solid: colors.violet[600],
-			outline: colors.violet[600],
+			solid: colors.cyan[600],
+			outline: colors.cyan[600],
 			text: colors.white,
 		},
+		hover: {
+			background: colors.cyan[50],
+			outline: colors.cyan[600],
+			text: colors.cyan[950],
+			fill: {
+				outline: colors.cyan[500],
+				solid: colors.cyan[500],
+				text: colors.white,
+			},
+		},
+		disabled: {
+			background: colors.cyan[50],
+			outline: colors.cyan[800],
+			text: colors.cyan[200],
+			fill: {
+				solid: colors.cyan[800],
+				outline: colors.cyan[800],
+				text: colors.white,
+			},
+		},
 	},
-} satisfies Roles;
+};
+
+export default roles;
diff --git a/site/src/theme/roles.ts b/site/src/theme/roles.ts
index 13d54f8840d20..87620bd43ef8c 100644
--- a/site/src/theme/roles.ts
+++ b/site/src/theme/roles.ts
@@ -36,7 +36,7 @@ export interface Roles {
 	/** This isn't quite ready for prime-time, but you're welcome to look around!
 	 * Preview features, experiments, unstable, etc.
 	 */
-	preview: Role;
+	preview: InteractiveRole;
 }
 
 /**

From 781a6099b81089b5dc1e3d3b6332d0177145db79 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 13 Sep 2024 21:45:02 +0000
Subject: [PATCH 11/17] fix: make sure badge shows as hovered while inside
 tooltip

---
 .../FeatureBadge/FeatureBadge.stories.tsx     | 16 +++++++++++++++
 .../components/FeatureBadge/FeatureBadge.tsx  | 20 ++++++++++++++-----
 site/src/components/Popover/Popover.tsx       | 17 ++++++++++++----
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index a4610a160802d..7326015b23dae 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -27,3 +27,19 @@ export const SmallInteractiveExperimental: Story = {
 		variant: "interactive",
 	},
 };
+
+export const LargeInteractiveBeta: Story = {
+	args: {
+		type: "beta",
+		size: "lg",
+		variant: "interactive",
+	},
+};
+
+export const LargeStaticBeta: Story = {
+	args: {
+		type: "beta",
+		size: "lg",
+		variant: "static",
+	},
+};
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 353a44b527962..57ba3e05b754e 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -43,7 +43,7 @@ const styles = {
 		backgroundColor: theme.roles.preview.background,
 		borderRadius: "6px",
 		transition:
-			"color 0.4s ease-in-out, border-color 0.4s ease-in-out, background-color 0.4s ease-in-out",
+			"color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out",
 	}),
 
 	badgeHover: (theme) => ({
@@ -105,10 +105,15 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 	onPointerLeave,
 	...delegatedProps
 }) => {
+	// Not a big fan of having two hover variables, but we need to make sure the
+	// badge maintains its hover styling while the mouse is inside the tooltip
 	const [isBadgeHovering, setIsBadgeHovering] = useState(false);
+	const [isTooltipHovering, setIsTooltipHovering] = useState(false);
+
 	useEffect(() => {
 		const onWindowBlur = () => {
 			setIsBadgeHovering(false);
+			setIsTooltipHovering(false);
 		};
 
 		window.addEventListener("blur", onWindowBlur);
@@ -116,16 +121,19 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 	}, []);
 
 	const featureType = featureBadgeTypes[type];
-	const showHoverStyles =
-		variant === "staticHover" || (variant === "interactive" && isBadgeHovering);
+	const showBadgeHoverStyle =
+		variant === "staticHover" ||
+		(variant === "interactive" && (isBadgeHovering || isTooltipHovering));
 
 	const coreContent = (
 		<span
 			css={[
 				styles.badge,
 				size === "lg" && styles.badgeLargeText,
-				showHoverStyles && styles.badgeHover,
+				showBadgeHoverStyle && styles.badgeHover,
 			]}
+			onPointerEnter={variant === "interactive" ? undefined : onPointerEnter}
+			onPointerLeave={variant === "interactive" ? undefined : onPointerLeave}
 			{...delegatedProps}
 		>
 			<span style={visuallyHidden}> (This is a</span>
@@ -156,6 +164,8 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 			<HelpTooltipContent
 				anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
 				transformOrigin={{ vertical: "top", horizontal: "center" }}
+				onPointerEnter={() => setIsTooltipHovering(true)}
+				onPointerLeave={() => setIsTooltipHovering(false)}
 			>
 				<h5 css={styles.tooltipTitle}>
 					{capitalizeFirstLetter(featureType)} Feature
@@ -163,7 +173,7 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 
 				<p css={styles.tooltipDescription}>
 					This is {getGrammaticalArticle(featureType)} {featureType} feature. It
-					has not yet been marked for general availability.
+					has not yet reached generally availability (GA).
 				</p>
 
 				<Link
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 43db214b0f097..0e12728667537 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -5,6 +5,7 @@ import {
 	type FC,
 	type HTMLAttributes,
 	type PointerEvent,
+	type PointerEventHandler,
 	type ReactElement,
 	type ReactNode,
 	type RefObject,
@@ -133,6 +134,8 @@ export type PopoverContentProps = Omit<
 
 export const PopoverContent: FC<PopoverContentProps> = ({
 	horizontal = "left",
+	onPointerEnter,
+	onPointerLeave,
 	...popoverProps
 }) => {
 	const popover = usePopover();
@@ -155,7 +158,7 @@ export const PopoverContent: FC<PopoverContentProps> = ({
 				},
 			}}
 			{...horizontalProps(horizontal)}
-			{...modeProps(popover)}
+			{...modeProps(popover, onPointerEnter, onPointerLeave)}
 			{...popoverProps}
 			id={popover.id}
 			open={popover.open}
@@ -165,14 +168,20 @@ export const PopoverContent: FC<PopoverContentProps> = ({
 	);
 };
 
-const modeProps = (popover: PopoverContextValue) => {
+const modeProps = (
+	popover: PopoverContextValue,
+	externalOnPointerEnter: PointerEventHandler<HTMLDivElement> | undefined,
+	externalOnPointerLeave: PointerEventHandler<HTMLDivElement> | undefined,
+) => {
 	if (popover.mode === "hover") {
 		return {
-			onPointerEnter: () => {
+			onPointerEnter: (event: PointerEvent<HTMLDivElement>) => {
 				popover.setOpen(true);
+				externalOnPointerEnter?.(event);
 			},
-			onPointerLeave: () => {
+			onPointerLeave: (event: PointerEvent<HTMLDivElement>) => {
 				popover.setOpen(false);
+				externalOnPointerLeave?.(event);
 			},
 		};
 	}

From a98186479dec68ecd4e1a1dc0d25d3d6e955610d Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Fri, 13 Sep 2024 22:10:25 +0000
Subject: [PATCH 12/17] wip: commit progress on adding story for controlled
 variant

---
 .../FeatureBadge/FeatureBadge.stories.tsx     | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index 7326015b23dae..842dbebd0353d 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { FeatureBadge } from "./FeatureBadge";
+import { useState } from "react";
+import { useTheme } from "@emotion/react";
 
 const meta: Meta<typeof FeatureBadge> = {
 	title: "components/FeatureBadge",
@@ -43,3 +45,44 @@ export const LargeStaticBeta: Story = {
 		variant: "static",
 	},
 };
+
+export const HoverControlledByParent: Story = {
+	args: {
+		type: "experimental",
+		size: "sm",
+	},
+
+	decorators: (Story, context) => {
+		const theme = useTheme();
+		const [isHovering, setIsHovering] = useState(false);
+
+		return (
+			<button
+				type="button"
+				onPointerEnter={() => setIsHovering(true)}
+				onPointerLeave={() => setIsHovering(false)}
+				css={[
+					{
+						backgroundColor: theme.palette.background.default,
+						color: theme.palette.text.primary,
+						display: "flex",
+						flexFlow: "row nowrap",
+						alignItems: "center",
+						columnGap: "16px",
+					},
+					isHovering && {
+						backgroundColor: "green",
+					},
+				]}
+			>
+				<span>Blah</span>
+				{Story({
+					args: {
+						...context.initialArgs,
+						variant: isHovering ? "staticHover" : "static",
+					},
+				})}
+			</button>
+		);
+	},
+};

From f47d0598d7ee1ccb4ce5416a4ab2b1939595a5a3 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Mon, 16 Sep 2024 13:37:54 +0000
Subject: [PATCH 13/17] fix: sort imports

---
 site/src/components/FeatureBadge/FeatureBadge.stories.tsx | 4 ++--
 site/src/components/FeatureBadge/FeatureBadge.tsx         | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index 842dbebd0353d..9143c130d809b 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -1,7 +1,7 @@
+import { useTheme } from "@emotion/react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { FeatureBadge } from "./FeatureBadge";
 import { useState } from "react";
-import { useTheme } from "@emotion/react";
+import { FeatureBadge } from "./FeatureBadge";
 
 const meta: Meta<typeof FeatureBadge> = {
 	title: "components/FeatureBadge",
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 57ba3e05b754e..eeb160e622118 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -10,7 +10,6 @@ import {
 	type HTMLAttributes,
 	type ReactNode,
 } from "react";
-import tailwindColors from "theme/tailwindColors";
 import { docs } from "utils/docs";
 
 /**

From ad61763536431103318b6a1295392e3f9c8c2660 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Mon, 16 Sep 2024 13:50:20 +0000
Subject: [PATCH 14/17] refactor: change component API to be more
 obvious/ergonomic

---
 .../FeatureBadge/FeatureBadge.stories.tsx     |  3 +-
 .../components/FeatureBadge/FeatureBadge.tsx  | 54 ++++++++++---------
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
index 9143c130d809b..714b461ea4140 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.stories.tsx
@@ -79,7 +79,8 @@ export const HoverControlledByParent: Story = {
 				{Story({
 					args: {
 						...context.initialArgs,
-						variant: isHovering ? "staticHover" : "static",
+						variant: "static",
+						highlighted: isHovering,
 					},
 				})}
 			</button>
diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index eeb160e622118..208f6f1c9db22 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -77,29 +77,43 @@ const styles = {
 	},
 } as const satisfies Record<string, Interpolation<Theme>>;
 
+function grammaticalArticle(nextWord: string): string {
+	const vowels = ["a", "e", "i", "o", "u"];
+	const firstLetter = nextWord.slice(0, 1).toLowerCase();
+	return vowels.includes(firstLetter) ? "an" : "a";
+}
+
+function capitalizeFirstLetter(text: string): string {
+	return text.slice(0, 1).toUpperCase() + text.slice(1);
+}
+
 type FeatureBadgeProps = Readonly<
 	Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
 		type: keyof typeof featureBadgeTypes;
 		size?: "sm" | "lg";
-
-		/**
-		 * Defines how the FeatureBadge should render.
-		 * - interactive (default) - The badge functions like a link and
-		 *   controls its own hover styling.
-		 * - static - The badge is completely static and has no interaction
-		 *   behavior.
-		 * - staticHover - The badge is completely static, but displays badge
-		     hover styling (but nothing related to links). Useful if you want a
-			 parent component to control the hover styling.
-		 */
-		variant?: "interactive" | "static" | "staticHover";
-	}
+	} & (
+			| {
+					/**
+					 * Defines whether the FeatureBadge should act as a
+					 * controlled or uncontrolled component with its hover and
+					 * general interaction styling.
+					 */
+					variant: "interactive";
+
+					// Had to specify the highlighted key for this union option
+					// even though it won't be used, because otherwise the type
+					// ergonomics for users would be too clunky.
+					highlighted?: undefined;
+			  }
+			| { variant: "static"; highlighted?: boolean }
+		)
 >;
 
 export const FeatureBadge: FC<FeatureBadgeProps> = ({
 	type,
 	size = "sm",
 	variant = "interactive",
+	highlighted = false,
 	onPointerEnter,
 	onPointerLeave,
 	...delegatedProps
@@ -121,7 +135,7 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 
 	const featureType = featureBadgeTypes[type];
 	const showBadgeHoverStyle =
-		variant === "staticHover" ||
+		highlighted ||
 		(variant === "interactive" && (isBadgeHovering || isTooltipHovering));
 
 	const coreContent = (
@@ -171,7 +185,7 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 				</h5>
 
 				<p css={styles.tooltipDescription}>
-					This is {getGrammaticalArticle(featureType)} {featureType} feature. It
+					This is {grammaticalArticle(featureType)} {featureType} feature. It
 					has not yet reached generally availability (GA).
 				</p>
 
@@ -188,13 +202,3 @@ export const FeatureBadge: FC<FeatureBadgeProps> = ({
 		</Popover>
 	);
 };
-
-function getGrammaticalArticle(nextWord: string): string {
-	const vowels = ["a", "e", "i", "o", "u"];
-	const firstLetter = nextWord.slice(0, 1).toLowerCase();
-	return vowels.includes(firstLetter) ? "an" : "a";
-}
-
-function capitalizeFirstLetter(text: string): string {
-	return text.slice(0, 1).toUpperCase() + text.slice(1);
-}

From 6e16aaabb0f2a8a9650450d6d81c75e87f8deabd Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Mon, 16 Sep 2024 13:54:37 +0000
Subject: [PATCH 15/17] fix: add biome-ignore comments to more base files

---
 site/src/components/Popover/Popover.tsx | 1 +
 site/src/theme/index.ts                 | 1 +
 2 files changed, 2 insertions(+)

diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 0e12728667537..8b4479d95b3a4 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -1,5 +1,6 @@
 import MuiPopover, {
 	type PopoverProps as MuiPopoverProps,
+	// biome-ignore lint/nursery/noRestrictedImports: This is the base component that our custom popover is based on
 } from "@mui/material/Popover";
 import {
 	type FC,
diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 7516fe1207929..3079ce01b27a3 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,3 +1,4 @@
+// biome-ignore lint/nursery/noRestrictedImports: Have to use MUI styles as base
 import type { Theme as MuiTheme } from "@mui/material/styles";
 import type * as monaco from "monaco-editor";
 import type { Branding } from "./branding";

From 6a19b611ab02128674f9a460f2becfbd6aee0c7b Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Mon, 16 Sep 2024 13:59:54 +0000
Subject: [PATCH 16/17] fix: update import order again

---
 site/src/components/FeatureBadge/FeatureBadge.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/FeatureBadge/FeatureBadge.tsx b/site/src/components/FeatureBadge/FeatureBadge.tsx
index 208f6f1c9db22..75b7c15045cde 100644
--- a/site/src/components/FeatureBadge/FeatureBadge.tsx
+++ b/site/src/components/FeatureBadge/FeatureBadge.tsx
@@ -4,11 +4,11 @@ import { visuallyHidden } from "@mui/utils";
 import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
 import { Popover, PopoverTrigger } from "components/Popover/Popover";
 import {
-	useEffect,
-	useState,
 	type FC,
 	type HTMLAttributes,
 	type ReactNode,
+	useEffect,
+	useState,
 } from "react";
 import { docs } from "utils/docs";
 

From a2338673b592a6459c49373292d3568044b0c536 Mon Sep 17 00:00:00 2001
From: Michael Smith <throwawayclover@gmail.com>
Date: Mon, 16 Sep 2024 14:03:30 +0000
Subject: [PATCH 17/17] chore: revert biome-ignore comment

---
 site/src/theme/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts
index 3079ce01b27a3..8509ccb4135a6 100644
--- a/site/src/theme/index.ts
+++ b/site/src/theme/index.ts
@@ -1,4 +1,4 @@
-// biome-ignore lint/nursery/noRestrictedImports: Have to use MUI styles as base
+// biome-ignore lint/nursery/noRestrictedImports: We still use `Theme` as a basis for our actual theme, for now.
 import type { Theme as MuiTheme } from "@mui/material/styles";
 import type * as monaco from "monaco-editor";
 import type { Branding } from "./branding";

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/grepdemos/coder/pull/11.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/grepdemos/coder/pull/11.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/grepdemos/coder/pull/11.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/grepdemos/coder/pull/11.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>