menu refactor + web account switcher (#7307)

* add account switcher, migrate context menus to overflow menu system, update version filter controls, only pad instance icons

* app account switcher, improve some context menus, theme stuff

* prepr

* handle reauthentication

* fix a couple sign in issues, admin page cleanup, fix org status badges, fix official account badge, open in local keybind, publish plus icons

* rename generic menus to ButtonMenu (& types)

* fix hydration issue w/ dropdowns + middleware error

apps/app-frontend/src/components/ui/friends/FriendsSection.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import { MoreVerticalIcon, TrashIcon, UserIcon, XIcon } from '@modrinth/assets'
+import type { ButtonMenuOption } from '@modrinth/ui'
 import {
 	Accordion,
-	Avatar,
+	ContextMenu,
 	defineMessages,
 	IconButton,
 	TeleportOverflowMenu,
+	UserAvatar,
 	useVIntl,
 } from '@modrinth/ui'
 import { useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 
-import ContextMenu from '@/components/ui/context-menu/index.vue'
 import type { FriendWithUserData } from '@/helpers/friends.ts'
 
 const { formatMessage } = useVIntl()
@@ -36,27 +37,30 @@ const emit = defineEmits<{
 	onClose: []
 }>()
 
-function createContextMenuOptions(friend: FriendWithUserData) {
-	if (friend.accepted) {
-		return [
-			{
-				name: 'view-profile',
-			},
-			{
-				name: 'remove-friend',
-				color: 'danger',
-			},
-		]
-	} else {
-		return [
-			{
-				name: 'view-profile',
-			},
-			{
-				name: 'cancel-request',
-			},
-		]
-	}
+function createContextMenuOptions(friend: FriendWithUserData): ButtonMenuOption[] {
+	return [
+		{
+			id: 'view-profile',
+			label: formatMessage(messages.viewProfile),
+			icon: UserIcon,
+			action: () => openProfile(friend.username),
+		},
+		friend.accepted
+			? {
+					id: 'remove-friend',
+					label: formatMessage(messages.removeFriend),
+					icon: TrashIcon,
+					tone: 'red',
+					hoverFilledOnly: true,
+					action: () => void props.removeFriend(friend),
+				}
+			: {
+					id: 'cancel-request',
+					label: formatMessage(messages.cancelRequest),
+					icon: XIcon,
+					action: () => void props.removeFriend(friend),
+				},
+	]
 }
 
 function openProfile(username: string) {
@@ -64,16 +68,6 @@ function openProfile(username: string) {
 }
 
 const friendOptions = useTemplateRef('friendOptions')
-async function handleFriendOptions(args: { item: FriendWithUserData; option: string }) {
-	switch (args.option) {
-		case 'remove-friend':
-		case 'cancel-request':
-			await props.removeFriend(args.item)
-			break
-		case 'view-profile':
-			openProfile(args.item.username)
-	}
-}
 
 const messages = defineMessages({
 	removeFriend: {
@@ -96,18 +90,15 @@ const messages = defineMessages({
 		id: 'friends.friend.view-profile',
 		defaultMessage: 'View profile',
 	},
+	friendActionsLabel: {
+		id: 'friends.friend.actions.label',
+		defaultMessage: 'Friend actions',
+	},
 })
 </script>
 
 <template>
-	<ContextMenu ref="friendOptions" @option-clicked="handleFriendOptions">
-		<template #view-profile>
-			<UserIcon />
-			{{ formatMessage(messages.viewProfile) }}
-		</template>
-		<template #remove-friend> <TrashIcon /> {{ formatMessage(messages.removeFriend) }} </template>
-		<template #cancel-request> <XIcon /> {{ formatMessage(messages.cancelRequest) }} </template>
-	</ContextMenu>
+	<ContextMenu ref="friendOptions" :label="formatMessage(messages.friendActionsLabel)" />
 	<Accordion
 		:open-by-default="openByDefault"
 		:force-open="isSearching"
@@ -130,32 +121,24 @@ const messages = defineMessages({
 				<div
 					v-for="friend in friends"
 					:key="friend.username"
-					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1"
+					class="group grid items-center grid-cols-[1fr_auto] gap-2 hover:bg-button-bg transition-colors rounded-full mr-1 select-none"
 					@contextmenu.prevent.stop="
-						(event) => friendOptions?.showMenu(event, friend, createContextMenuOptions(friend))
+						(event) => friendOptions?.open(event, createContextMenuOptions(friend))
 					"
 				>
 					<RouterLink
 						:to="`/user/${encodeURIComponent(friend.username)}`"
-						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline"
+						class="grid min-w-0 grid-cols-[auto_1fr] items-center gap-2 text-inherit no-underline group no-click-animation"
 					>
-						<div class="relative">
-							<Avatar
-								:src="friend.avatar"
-								:class="{ grayscale: !friend.online && friend.accepted }"
-								class="w-12 h-12 rounded-full"
-								size="32px"
-								circle
-							/>
-							<span
-								v-if="friend.online"
-								aria-hidden="true"
-								class="bottom-[2px] right-[-2px] absolute w-3 h-3 bg-brand border-2 border-black border-solid rounded-full"
-							/>
-						</div>
+						<UserAvatar
+							:src="friend.avatar"
+							size="32px"
+							:badge="friend.online"
+							:grayscale="!friend.online && friend.accepted"
+						/>
 						<div class="flex flex-col">
 							<span
-								class="text-sm m-0"
+								class="text-sm m-0 group-hover:underline"
 								:class="friend.online || !friend.accepted ? 'text-contrast' : 'text-primary'"
 							>
 								{{ friend.username }}