Menu -> React Aria Components (#2230)

* Initial * wip * wip * wip * wip * wip * wip * Delete old * fix e2e test
2026-03-21 18:04:39 -05:00 · 2025-04-27 19:44:01 +03:00 · 2025-04-27 19:44:01 +03:00 · 2f05616efc
commit 2f05616efc
parent bda32b1fb8
12 changed files with 404 additions and 269 deletions
--- a/app/components/Menu.tsx
+++ b/app/components/Menu.tsx
@ -1,84 +0,0 @@
-import { Menu as HeadlessUIMenu, Transition } from "@headlessui/react";
-import clsx from "clsx";
-import * as React from "react";
-import { Image } from "./Image";
-
-export interface MenuProps {
-	button: React.ElementType;
-	items: {
-		// type: "button"; TODO: type: "link"
-		text: string;
-		id: string | number;
-		icon?: React.ReactNode;
-		imagePath?: string;
-		onClick: () => void;
-		disabled?: boolean;
-		selected?: boolean;
-	}[];
-	className?: string;
-	scrolling?: boolean;
-	opensLeft?: boolean;
-}
-
-export function Menu({
-	button,
-	items,
-	className,
-	scrolling,
-	opensLeft,
-}: MenuProps) {
-	return (
-		<HeadlessUIMenu as="div" className={clsx("menu-container", className)}>
-			<HeadlessUIMenu.Button as={button} />
-			<Transition
-				as={React.Fragment}
-				enter="transition ease-out duration-100"
-				enterFrom="transform opacity-0 scale-95"
-				enterTo="transform opacity-100 scale-100"
-				leave="transition ease-in duration-75"
-				leaveFrom="transform opacity-100 scale-100"
-				leaveTo="transform opacity-0 scale-95"
-			>
-				<HeadlessUIMenu.Items
-					className={clsx("menu__items-container", {
-						"menu-container__scrolling": scrolling,
-						"menu__items-container__opens-left": opensLeft,
-					})}
-				>
-					{items.map((item) => {
-						return (
-							<HeadlessUIMenu.Item key={item.id} disabled={item.disabled}>
-								{({ active }) => (
-									<button
-										className={clsx("menu__item", {
-											menu__item__active: active,
-											menu__item__disabled: item.disabled,
-											menu__item__selected: item.selected,
-										})}
-										onClick={item.onClick}
-										data-testid={`menu-item-${item.id}`}
-										type="button"
-									>
-										{item.icon ? (
-											<span className="menu__item__icon">{item.icon}</span>
-										) : null}
-										{item.imagePath ? (
-											<Image
-												path={item.imagePath}
-												alt=""
-												width={24}
-												height={24}
-												className="menu__item__img"
-											/>
-										) : null}
-										{item.text}
-									</button>
-								)}
-							</HeadlessUIMenu.Item>
-						);
-					})}
-				</HeadlessUIMenu.Items>
-			</Transition>
-		</HeadlessUIMenu>
-	);
-}
--- a/app/components/elements/Menu.module.css
+++ b/app/components/elements/Menu.module.css
@ -0,0 +1,81 @@
+.itemsContainer {
+	position: absolute;
+	top: 32px;
+	border-radius: var(--rounded);
+	background-color: var(--bg-darker);
+	border: var(--border-style);
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	align-items: flex-start;
+	width: max-content;
+}
+
+.itemsContainerOpensLeft {
+	right: 0;
+}
+
+.container {
+	position: relative;
+}
+
+.scrolling {
+	max-height: 300px !important;
+	overflow-y: auto;
+	scrollbar-color: rgb(83 65 91) transparent;
+	scrollbar-width: thin;
+	scrollbar-gutter: stable;
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	font-weight: var(--bold);
+	font-size: var(--fonts-xs);
+	color: var(--text);
+	white-space: nowrap;
+	gap: var(--s-2);
+	border-radius: var(--rounded-xs);
+	padding: var(--s-1-5) var(--s-2-5);
+	background-color: var(--bg-darker);
+	width: 100%;
+	border: 0;
+	outline: none;
+	justify-content: flex-start;
+}
+
+.item:first-child {
+	border-radius: 14.5px 14.5px var(--rounded-xs) var(--rounded-xs);
+}
+
+.item:last-child {
+	border-radius: var(--rounded-xs) var(--rounded-xs) 14.5px 14.5px;
+}
+
+.item[data-focused] {
+	background-color: var(--theme-very-transparent);
+}
+
+.itemDisabled {
+	color: var(--text-lighter);
+	cursor: not-allowed;
+}
+
+.itemSelected {
+	background-color: var(--theme-transparent);
+	font-weight: var(--extra-bold);
+}
+
+.itemActive {
+	color: var(--theme);
+}
+
+.itemIcon {
+	width: 18px;
+}
+
+.itemImg {
+	min-width: 24px;
+	min-height: 24px;
+}
--- a/app/components/elements/Menu.tsx
+++ b/app/components/elements/Menu.tsx
@ -0,0 +1,79 @@
+import clsx from "clsx";
+import {
+	Menu,
+	MenuItem,
+	type MenuItemProps,
+	MenuTrigger,
+	Popover,
+} from "react-aria-components";
+import { Image } from "../Image";
+import styles from "./Menu.module.css";
+
+interface SendouMenuProps {
+	trigger: React.ReactNode;
+	scrolling?: boolean;
+	opensLeft?: boolean;
+	children: React.ReactNode;
+}
+
+export function SendouMenu({
+	children,
+	trigger,
+	opensLeft,
+	scrolling,
+}: SendouMenuProps) {
+	return (
+		<MenuTrigger>
+			{trigger}
+			<Popover
+				className={clsx(styles.itemsContainer, {
+					[styles.scrolling]: scrolling,
+					[styles.itemsContainerOpensLeft]: !opensLeft,
+				})}
+			>
+				<Menu>{children}</Menu>
+			</Popover>
+		</MenuTrigger>
+	);
+}
+
+export interface SendouMenuItemProps extends MenuItemProps {
+	icon?: React.ReactNode;
+	imagePath?: string;
+	isActive?: boolean;
+}
+
+export function SendouMenuItem(props: SendouMenuItemProps) {
+	const textValue =
+		props.textValue ??
+		(typeof props.children === "string" ? props.children : undefined);
+	return (
+		<MenuItem
+			{...props}
+			textValue={textValue}
+			className={({ isSelected, isDisabled }) =>
+				clsx(styles.item, {
+					[styles.itemSelected]: isSelected,
+					[styles.itemDisabled]: isDisabled,
+					[styles.itemActive]: props.isActive,
+				})
+			}
+		>
+			<>
+				{props.icon ? (
+					<span className={styles.itemIcon}>{props.icon}</span>
+				) : null}
+				{props.imagePath ? (
+					<Image
+						path={props.imagePath}
+						alt=""
+						width={24}
+						height={24}
+						className={styles.itemImg}
+					/>
+				) : null}
+				{props.children}
+			</>
+		</MenuItem>
+	);
+}
--- a/app/components/layout/AnythingAdder.tsx
+++ b/app/components/layout/AnythingAdder.tsx
@ -1,5 +1,4 @@
-import { useNavigate } from "@remix-run/react";
-import * as React from "react";
+import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { useUser } from "~/features/auth/core/user";
 import { FF_SCRIMS_ENABLED } from "~/features/scrims/scrims-constants";
@ -16,100 +15,106 @@ import {
 	plusSuggestionsNewPage,
 	userNewBuildPage,
 } from "~/utils/urls";
-import { Menu, type MenuProps } from "../Menu";
+import {
+	SendouMenu,
+	SendouMenuItem,
+	type SendouMenuItemProps,
+} from "../elements/Menu";
 import { PlusIcon } from "../icons/Plus";

-const FilterMenuButton = React.forwardRef<
-	HTMLButtonElement,
-	React.ButtonHTMLAttributes<HTMLButtonElement>
->((props, ref) => {
-	return (
-		<button
-			className="layout__header__button"
-			{...props}
-			ref={ref}
-			data-testid="anything-adder-menu-button"
-		>
-			<PlusIcon className="layout__header__button__icon" />
-		</button>
-	);
-});
-
 export function AnythingAdder() {
 	const { t } = useTranslation(["common"]);
 	const user = useUser();
-	const navigate = useNavigate();

 	if (!user) {
 		return null;
 	}

-	const items: MenuProps["items"] = [
+	const items: Array<SendouMenuItemProps> = [
 		{
 			id: "tournament",
-			text: t("header.adder.tournament"),
+			children: t("header.adder.tournament"),
 			imagePath: navIconUrl("medal"),
-			onClick: () => navigate(TOURNAMENT_NEW_PAGE),
+			href: TOURNAMENT_NEW_PAGE,
 		},
 		{
 			id: "calendarEvent",
-			text: t("header.adder.calendarEvent"),
+			children: t("header.adder.calendarEvent"),
 			imagePath: navIconUrl("calendar"),
-			onClick: () => navigate(CALENDAR_NEW_PAGE),
+			href: CALENDAR_NEW_PAGE,
 		},
 		{
 			id: "builds",
-			text: t("header.adder.build"),
+			children: t("header.adder.build"),
 			imagePath: navIconUrl("builds"),
-			onClick: () => navigate(userNewBuildPage(user)),
+			href: userNewBuildPage(user),
 		},
 		{
 			id: "team",
-			text: t("header.adder.team"),
+			children: t("header.adder.team"),
 			imagePath: navIconUrl("t"),
-			onClick: () => navigate(NEW_TEAM_PAGE),
+			href: NEW_TEAM_PAGE,
 		},
 		FF_SCRIMS_ENABLED
 			? {
 					id: "scrimPost",
-					text: t("header.adder.scrimPost"),
+					children: t("header.adder.scrimPost"),
 					imagePath: navIconUrl("scrims"),
-					onClick: () => navigate(newScrimPostPage()),
+					href: newScrimPostPage(),
 				}
 			: null,
 		FF_SCRIMS_ENABLED
 			? {
 					id: "association",
-					text: t("header.adder.association"),
+					children: t("header.adder.association"),
 					imagePath: navIconUrl("associations"),
-					onClick: () => navigate(newAssociationsPage()),
+					href: newAssociationsPage(),
 				}
 			: null,
 		{
 			id: "lfgPost",
-			text: t("header.adder.lfgPost"),
+			children: t("header.adder.lfgPost"),
 			imagePath: navIconUrl("lfg"),
-			onClick: () => navigate(lfgNewPostPage()),
+			href: lfgNewPostPage(),
 		},
 		{
 			id: "art",
-			text: t("header.adder.art"),
+			children: t("header.adder.art"),
 			imagePath: navIconUrl("art"),
-			onClick: () => navigate(newArtPage()),
+			href: newArtPage(),
 		},
 		{
 			id: "vods",
-			text: t("header.adder.vod"),
+			children: t("header.adder.vod"),
 			imagePath: navIconUrl("vods"),
-			onClick: () => navigate(newVodPage()),
+			href: newVodPage(),
 		},
 		{
 			id: "plus",
-			text: t("header.adder.plusSuggestion"),
+			children: t("header.adder.plusSuggestion"),
 			imagePath: navIconUrl("plus"),
-			onClick: () => navigate(plusSuggestionsNewPage()),
+			href: plusSuggestionsNewPage(),
 		},
 	].filter((item) => item !== null);

-	return <Menu items={items} button={FilterMenuButton} opensLeft />;
+	return (
+		<SendouMenu
+			trigger={
+				<Button
+					className="layout__header__button"
+					data-testid="anything-adder-menu-button"
+				>
+					<PlusIcon className="layout__header__button__icon" />
+				</Button>
+			}
+		>
+			{items.map((item) => (
+				<SendouMenuItem
+					key={item.id}
+					data-testid={`menu-item-${item.id}`}
+					{...item}
+				/>
+			))}
+		</SendouMenu>
+	);
 }
--- a/app/features/art/routes/art.tsx
+++ b/app/features/art/routes/art.tsx
@ -55,6 +55,7 @@ export const meta: MetaFunction = (args) => {
 	});
 };

+// xxx: 401 page should show same as vod
 export default function ArtPage() {
 	const { t } = useTranslation(["art", "common"]);
 	const data = useLoaderData<typeof loader>();
--- a/app/features/builds/routes/builds.$slug.tsx
+++ b/app/features/builds/routes/builds.$slug.tsx
@ -8,9 +8,10 @@ import { nanoid } from "nanoid";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { BuildCard } from "~/components/BuildCard";
-import { Button, LinkButton } from "~/components/Button";
+import { LinkButton } from "~/components/Button";
 import { Main } from "~/components/Main";
-import { Menu } from "~/components/Menu";
+import { SendouButton } from "~/components/elements/Button";
+import { SendouMenu, SendouMenuItem } from "~/components/elements/Menu";
 import { BeakerFilledIcon } from "~/components/icons/BeakerFilled";
 import { CalendarIcon } from "~/components/icons/Calendar";
 import { ChartBarIcon } from "~/components/icons/ChartBar";
@ -270,20 +271,6 @@ export default function WeaponsBuildsPage() {
 		return `?${params.toString()}`;
 	};

-	const FilterMenuButton = React.forwardRef((props, ref) => (
-		<Button
-			variant="outlined"
-			size="tiny"
-			icon={<FilterIcon />}
-			disabled={filters.length >= MAX_BUILD_FILTERS}
-			testId="add-filter-button"
-			{...props}
-			_ref={ref}
-		>
-			{t("builds:addFilter")}
-		</Button>
-	));
-
 	const nthOfSameFilter = (index: number) => {
 		const type = filters[index].type;

@ -293,30 +280,43 @@ export default function WeaponsBuildsPage() {
 	return (
 		<Main className="stack lg">
 			<div className="builds-buttons">
-				<Menu
-					items={[
-						{
-							id: "ability",
-							text: t("builds:filters.type.ability"),
-							icon: <BeakerFilledIcon />,
-							onClick: () => handleFilterAdd("ability"),
-						},
-						{
-							id: "mode",
-							text: t("builds:filters.type.mode"),
-							icon: <MapIcon />,
-							onClick: () => handleFilterAdd("mode"),
-						},
-						{
-							id: "date",
-							text: t("builds:filters.type.date"),
-							icon: <CalendarIcon />,
-							onClick: () => handleFilterAdd("date"),
-							disabled: filters.some((filter) => filter.type === "date"),
-						},
-					]}
-					button={FilterMenuButton}
-				/>
+				<SendouMenu
+					trigger={
+						<SendouButton
+							variant="outlined"
+							size="small"
+							icon={<FilterIcon />}
+							isDisabled={filters.length >= MAX_BUILD_FILTERS}
+							data-testid="add-filter-button"
+						>
+							{t("builds:addFilter")}
+						</SendouButton>
+					}
+				>
+					<SendouMenuItem
+						icon={<BeakerFilledIcon />}
+						isDisabled={filters.length >= MAX_BUILD_FILTERS}
+						onAction={() => handleFilterAdd("ability")}
+						data-testid="menu-item-ability"
+					>
+						{t("builds:filters.type.ability")}
+					</SendouMenuItem>
+					<SendouMenuItem
+						icon={<MapIcon />}
+						onAction={() => handleFilterAdd("mode")}
+						data-testid="menu-item-mode"
+					>
+						{t("builds:filters.type.mode")}
+					</SendouMenuItem>
+					<SendouMenuItem
+						icon={<CalendarIcon />}
+						isDisabled={filters.some((filter) => filter.type === "date")}
+						onAction={() => handleFilterAdd("date")}
+						data-testid="menu-item-date"
+					>
+						{t("builds:filters.type.date")}
+					</SendouMenuItem>
+				</SendouMenu>
 				<div className="builds-buttons__link">
 					<LinkButton
 						to={weaponBuildStatsPage(data.slug)}
--- a/app/features/lfg/components/LFGAddFilterButton.tsx
+++ b/app/features/lfg/components/LFGAddFilterButton.tsx
@ -1,27 +1,9 @@
-import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Button } from "~/components/Button";
-import { Menu } from "~/components/Menu";
+import { SendouButton } from "~/components/elements/Button";
+import { SendouMenu, SendouMenuItem } from "~/components/elements/Menu";
 import { FilterIcon } from "~/components/icons/Filter";
 import type { LFGFilter } from "../lfg-types";

-const FilterMenuButton = React.forwardRef((props, ref) => {
-	const { t } = useTranslation(["lfg"]);
-
-	return (
-		<Button
-			variant="outlined"
-			size="tiny"
-			icon={<FilterIcon />}
-			testId="add-filter-button"
-			{...props}
-			_ref={ref}
-		>
-			{t("lfg:addFilter")}
-		</Button>
-	);
-});
-
 const defaultFilters: Record<LFGFilter["_tag"], LFGFilter> = {
 	Weapon: { _tag: "Weapon", weaponSplIds: [] },
 	Type: { _tag: "Type", type: "PLAYER_FOR_TEAM" },
@ -42,14 +24,27 @@ export function LFGAddFilterButton({
 	const { t } = useTranslation(["lfg"]);

 	return (
-		<Menu
-			items={Object.entries(defaultFilters).map(([tag, defaultFilter]) => ({
-				id: tag,
-				text: t(`lfg:filters.${tag as LFGFilter["_tag"]}`),
-				disabled: filters.some((filter) => filter._tag === tag),
-				onClick: () => addFilter(defaultFilter),
-			}))}
-			button={FilterMenuButton}
-		/>
+		<SendouMenu
+			trigger={
+				<SendouButton
+					variant="outlined"
+					size="small"
+					icon={<FilterIcon />}
+					data-testid="add-filter-button"
+				>
+					{t("lfg:addFilter")}
+				</SendouButton>
+			}
+		>
+			{Object.entries(defaultFilters).map(([tag, defaultFilter]) => (
+				<SendouMenuItem
+					key={tag}
+					isDisabled={filters.some((filter) => filter._tag === tag)}
+					onAction={() => addFilter(defaultFilter)}
+				>
+					{t(`lfg:filters.${tag as LFGFilter["_tag"]}`)}
+				</SendouMenuItem>
+			))}
+		</SendouMenu>
 	);
 }
--- a/app/features/tournament-bracket/routes/to.$id.brackets.tsx
+++ b/app/features/tournament-bracket/routes/to.$id.brackets.tsx
@ -10,8 +10,8 @@ import { Alert } from "~/components/Alert";
 import { Button } from "~/components/Button";
 import { Divider } from "~/components/Divider";
 import { FormWithConfirm } from "~/components/FormWithConfirm";
-import { Menu } from "~/components/Menu";
 import { SendouButton } from "~/components/elements/Button";
+import { SendouMenu, SendouMenuItem } from "~/components/elements/Menu";
 import { SendouPopover } from "~/components/elements/Popover";
 import { CheckmarkIcon } from "~/components/icons/Checkmark";
 import { EyeIcon } from "~/components/icons/Eye";
@ -490,31 +490,34 @@ function BracketNav({

 	const bracketNameForButton = (name: string) => name.replace("bracket", "");

-	const button = React.forwardRef((props, ref) => (
-		<Button
-			className="tournament-bracket__bracket-nav__link"
-			_ref={ref}
-			{...props}
-		>
-			{bracketNameForButton(tournament.bracketByIdxOrDefault(bracketIdx).name)}
-			<span className="tournament-bracket__bracket-nav__chevron">▼</span>
-		</Button>
-	));
-
 	return (
 		<>
 			{/** MOBILE */}
-			<Menu
-				items={visibleBrackets.map((bracket, i) => {
-					return {
-						id: bracket.name,
-						onClick: () => setBracketIdx(i),
-						text: bracketNameForButton(bracket.name),
-					};
-				})}
-				button={button}
-				className="tournament-bracket__menu"
-			/>
+			<SendouMenu
+				trigger={
+					<SendouButton
+						className={clsx(
+							"tournament-bracket__bracket-nav__link",
+							"tournament-bracket__menu",
+						)}
+					>
+						{bracketNameForButton(
+							tournament.bracketByIdxOrDefault(bracketIdx).name,
+						)}
+						<span className="tournament-bracket__bracket-nav__chevron">▼</span>
+					</SendouButton>
+				}
+			>
+				{visibleBrackets.map((bracket, i) => (
+					<SendouMenuItem
+						key={bracket.name}
+						onAction={() => setBracketIdx(i)}
+						isActive={i === bracketIdx}
+					>
+						{bracketNameForButton(bracket.name)}
+					</SendouMenuItem>
+				))}
+			</SendouMenu>
 			{/** DESKTOP */}
 			<div className="tournament-bracket__bracket-nav tournament-bracket__button-row">
 				{visibleBrackets.map((bracket, i) => {
--- a/app/features/user-page/loaders/u.$identifier.builds.server.ts
+++ b/app/features/user-page/loaders/u.$identifier.builds.server.ts
@ -4,10 +4,13 @@ import * as BuildRepository from "~/features/builds/BuildRepository.server";
 import { sortAbilities } from "~/features/builds/core/ability-sorting.server";
 import * as UserRepository from "~/features/user-page/UserRepository.server";
 import type { MainWeaponId } from "~/modules/in-game-lists";
+import type { SerializeFrom } from "~/utils/remix";
 import { notFoundIfFalsy, privatelyCachedJson } from "~/utils/remix.server";
 import { sortBuilds } from "../core/build-sorting.server";
 import { userParamsSchema } from "../user-page-schemas.server";

+export type UserBuildsPageData = SerializeFrom<typeof loader>;
+
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 	const loggedInUser = await getUserId(request);
 	const { identifier } = userParamsSchema.parse(params);
--- a/app/features/user-page/routes/u.$identifier.builds.tsx
+++ b/app/features/user-page/routes/u.$identifier.builds.tsx
@ -6,8 +6,8 @@ import { Button } from "~/components/Button";
 import { Dialog } from "~/components/Dialog";
 import { FormMessage } from "~/components/FormMessage";
 import { Image, WeaponImage } from "~/components/Image";
-import { Menu, type MenuProps } from "~/components/Menu";
 import { SubmitButton } from "~/components/SubmitButton";
+import { SendouMenu, SendouMenuItem } from "~/components/elements/Menu";
 import { LockIcon } from "~/components/icons/Lock";
 import { SortIcon } from "~/components/icons/Sort";
 import { TrashIcon } from "~/components/icons/Trash";
@ -25,7 +25,10 @@ import type { UserPageLoaderData } from "../loaders/u.$identifier.server";
 import { DEFAULT_BUILD_SORT } from "../user-page-constants";

 import { action } from "../actions/u.$identifier.builds.server";
-import { loader } from "../loaders/u.$identifier.builds.server";
+import {
+	type UserBuildsPageData,
+	loader,
+} from "../loaders/u.$identifier.builds.server";
 export { loader, action };

 export const handle: SendouRouteHandle = {
@ -139,42 +142,6 @@ function BuildsFilters({
 	const showPublicPrivateFilters =
 		user?.id === layoutData.user.id && privateBuildsCount > 0;

-	const WeaponFilterMenuButton = React.forwardRef((props, ref) => (
-		<Button
-			variant={typeof weaponFilter === "number" ? undefined : "outlined"}
-			size="tiny"
-			className="u__build-filter-button"
-			{...props}
-			_ref={ref}
-		>
-			<Image
-				path={weaponCategoryUrl("SHOOTERS")}
-				width={24}
-				height={24}
-				alt=""
-			/>
-			{t("builds:filters.filterByWeapon")}
-		</Button>
-	));
-
-	const weaponFilterMenuItems = mainWeaponIds
-		.map((weaponId) => {
-			const count = data.weaponCounts[weaponId];
-
-			if (!count) return null;
-
-			const item: MenuProps["items"][number] = {
-				id: weaponId,
-				text: `${t(`weapons:MAIN_${weaponId}`)} (${count})`,
-				icon: <WeaponImage weaponSplId={weaponId} variant="build" size={18} />,
-				onClick: () => setWeaponFilter(weaponId),
-				selected: weaponFilter === weaponId,
-			};
-
-			return item;
-		})
-		.filter((item) => item !== null);
-
 	return (
 		<div className="stack horizontal sm flex-wrap">
 			<SendouButton
@ -208,10 +175,11 @@ function BuildsFilters({
 				</>
 			) : null}

-			<Menu
-				items={weaponFilterMenuItems}
-				button={WeaponFilterMenuButton}
-				scrolling
+			<WeaponFilterMenu
+				mainWeaponIds={mainWeaponIds}
+				counts={data.weaponCounts}
+				weaponFilter={weaponFilter}
+				setWeaponFilter={setWeaponFilter}
 			/>
 		</div>
 	);
@ -359,3 +327,57 @@ function ChangeSortingDialogSelect({
 		</select>
 	);
 }
+
+function WeaponFilterMenu({
+	mainWeaponIds,
+	counts,
+	weaponFilter,
+	setWeaponFilter,
+}: {
+	mainWeaponIds: MainWeaponId[];
+	counts: UserBuildsPageData["weaponCounts"];
+	weaponFilter: BuildFilter;
+	setWeaponFilter: (weaponFilter: MainWeaponId) => void;
+}) {
+	const { t } = useTranslation(["weapons", "builds"]);
+
+	return (
+		<SendouMenu
+			scrolling
+			trigger={
+				<SendouButton
+					variant={typeof weaponFilter === "number" ? undefined : "outlined"}
+					size="small"
+					className="u__build-filter-button"
+				>
+					<Image
+						path={weaponCategoryUrl("SHOOTERS")}
+						width={24}
+						height={24}
+						alt=""
+					/>
+					{t("builds:filters.filterByWeapon")}
+				</SendouButton>
+			}
+		>
+			{mainWeaponIds.map((weaponId) => {
+				const count = counts[weaponId];
+
+				if (!count) return null;
+
+				return (
+					<SendouMenuItem
+						key={weaponId}
+						icon={
+							<WeaponImage weaponSplId={weaponId} variant="build" size={18} />
+						}
+						onAction={() => setWeaponFilter(weaponId)}
+						isActive={weaponFilter === weaponId}
+					>
+						{`${t(`weapons:MAIN_${weaponId}`)} (${count})`}
+					</SendouMenuItem>
+				);
+			})}
+		</SendouMenu>
+	);
+}
--- a/app/root.tsx
+++ b/app/root.tsx
@ -11,6 +11,7 @@ import {
 	Scripts,
 	ScrollRestoration,
 	type ShouldRevalidateFunction,
+	useHref,
 	useLoaderData,
 	useMatches,
 	useNavigate,
@ -21,8 +22,10 @@ import generalI18next from "i18next";
 import NProgress from "nprogress";
 import * as React from "react";
 import { I18nProvider } from "react-aria-components";
+import { RouterProvider } from "react-aria-components";
 import { ErrorBoundary as ClientErrorBoundary } from "react-error-boundary";
 import { useTranslation } from "react-i18next";
+import type { NavigateOptions } from "react-router-dom";
 import { useChangeLanguage } from "remix-i18next/react";
 import * as NotificationRepository from "~/features/notifications/NotificationRepository.server";
 import { NOTIFICATIONS } from "~/features/notifications/notifications-contants";
@ -140,6 +143,7 @@ function Document({
 }) {
 	const { htmlThemeClass } = useTheme();
 	const { i18n } = useTranslation();
+	const navigate = useNavigate();
 	const locale = data?.locale ?? DEFAULT_LANGUAGE;

 	// TODO: re-enable after testing if it causes bug where JS is not loading on revisit
@ -175,13 +179,15 @@ function Document({
 			<body style={customizedCSSVars}>
 				{process.env.NODE_ENV === "development" && <HydrationTestIndicator />}
 				<React.StrictMode>
-					<I18nProvider locale={i18n.language}>
-						<SendouToastRegion />
-						<MyRamp data={data} />
-						<Layout data={data} isErrored={isErrored}>
-							{children}
-						</Layout>
-					</I18nProvider>
+					<RouterProvider navigate={navigate} useHref={useHref}>
+						<I18nProvider locale={i18n.language}>
+							<SendouToastRegion />
+							<MyRamp data={data} />
+							<Layout data={data} isErrored={isErrored}>
+								{children}
+							</Layout>
+						</I18nProvider>
+					</RouterProvider>
 				</React.StrictMode>
 				<ScrollRestoration
 					getKey={(location) => {
@ -271,8 +277,6 @@ function useCustomizedCSSVars() {

 	for (const match of matches) {
 		if ((match.data as any)?.[CUSTOMIZED_CSS_VARS_NAME]) {
-			// cheating TypeScript here but no real way to keep up
-			// even an illusion of type safety here
 			return Object.fromEntries(
 				Object.entries(
 					(match.data as any)[CUSTOMIZED_CSS_VARS_NAME] as Record<
@ -287,6 +291,12 @@ function useCustomizedCSSVars() {
 	return;
 }

+declare module "react-aria-components" {
+	interface RouterConfig {
+		routerOptions: NavigateOptions;
+	}
+}
+
 export default function App() {
 	// prop drilling data instead of using useLoaderData in the child components directly because
 	// useLoaderData can't be used in CatchBoundary and layout is rendered in it as well
--- a/app/styles/layout.css
+++ b/app/styles/layout.css
@ -30,6 +30,12 @@
 	overflow: initial;
 }

+.logo:focus-visible {
+	outline: 2px solid var(--theme);
+	outline-offset: 2px;
+	border-radius: var(--rounded);
+}
+
 .layout__breadcrumb-separator {
 	font-size: 20px;
 	opacity: 0.4;
@ -96,6 +102,7 @@
 .layout__header__button {
 	width: var(--item-size);
 	height: var(--item-size);
+	outline-offset: 2px;
 	padding: 0.25rem;
 	border: 2px solid;
 	border-color: var(--theme-transparent);
@ -105,6 +112,19 @@
 	cursor: pointer;
 }

+.layout__header__button:focus-visible {
+	outline: 2px solid var(--theme);
+}
+
+.layout__user-item {
+	outline-offset: 2px;
+	border-radius: 100%;
+}
+
+.layout__user-item:focus-visible {
+	outline: 2px solid var(--theme);
+}
+
 .layout__header__button__icon {
 	width: 1.15rem;
 }