feat: implement <DropdownRadio* /> to <PresetMenu /> (#21910)

This pull-request implements a `<CheckboxRadioGroup />` and
`<CheckboxRadioItem />` to our filtering menus. This means that people
will be able to actively see what preset filter is applied when opening
the filtering dropdown menu.

| Old | New | 
| --- | --- |
| <img width="286" height="407" alt="OLD_FILTER_MENU"
src="https://github.com/user-attachments/assets/791ba518-a949-4f69-b0e7-ad09ec521971"
/> | <img width="286" height="407" alt="NEW_FILTER_MENU"
src="https://github.com/user-attachments/assets/7e789d75-cb4c-4ad0-8c32-5a7087fb1626"
/> |

site/src/components/DropdownMenu/DropdownMenu.tsx

@@ -165,6 +165,7 @@ export const DropdownMenuRadioItem = forwardRef<
 				"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none transition-colors",
 				"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 				"data-[state=checked]:bg-surface-secondary data-[state=checked]:text-content-primary",
+				"font-medium",
 			],
 			className,
 		)}

site/src/components/Filter/Filter.tsx

@@ -11,6 +11,8 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
@@ -223,6 +225,7 @@ export const Filter: FC<FilterProps> = ({
 			) : (
 				<>
 					<PresetMenu
+						value={filter.query}
 						onSelect={(query) => filter.update(query)}
 						presets={presets}
 						learnMoreLink={learnMoreLink}
@@ -265,6 +268,7 @@ export const Filter: FC<FilterProps> = ({
 };
 
 interface PresetMenuProps {
+	value: string;
 	presets: PresetFilter[];
 	learnMoreLink?: string;
 	learnMoreLabel2?: string;
@@ -273,6 +277,7 @@ interface PresetMenuProps {
 }
 
 const PresetMenu: FC<PresetMenuProps> = ({
+	value,
 	presets,
 	learnMoreLink,
 	learnMoreLabel2,
@@ -288,14 +293,17 @@ const PresetMenu: FC<PresetMenuProps> = ({
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent side="bottom" align="start">
-				{presets.map((presetFilter) => (
-					<DropdownMenuItem
-						onSelect={() => onSelect(presetFilter.query)}
-						key={presetFilter.name}
-					>
-						{presetFilter.name}
-					</DropdownMenuItem>
-				))}
+				<DropdownMenuRadioGroup value={value}>
+					{presets.map((presetFilter) => (
+						<DropdownMenuRadioItem
+							value={presetFilter.query}
+							onSelect={() => onSelect(presetFilter.query)}
+							key={presetFilter.name}
+						>
+							{presetFilter.name}
+						</DropdownMenuRadioItem>
+					))}
+				</DropdownMenuRadioGroup>
 				{(learnMoreLink || learnMoreLink2) && <DropdownMenuSeparator />}
 				{learnMoreLink && (
 					<DropdownMenuItem asChild>