Merge remote-tracking branch 'origin/main' into prospector/disclosures-frontend

# Conflicts: # apps/frontend/src/pages/[type]/[project].vue # apps/frontend/src/pages/[type]/[project]/settings/tags.vue
2026-08-31 03:55:59 +00:00 · 2026-08-07 15:16:40 -07:00
parent b4d1eef9c7 e4cbec6b2c
commit 4d481acd41
253 changed files with 8101 additions and 5756 deletions
@@ -132,51 +132,51 @@ const buttonColors: Record<string, 'blue' | 'orange' | 'red' | 'green'> = {

 <style scoped>
 .collapsible-admonition[data-type='critical'] {
-	border-color: rgba(255, 73, 110, 0.6);
+	border-color: color-mix(in srgb, var(--color-red) 60%, transparent);
 }

 .collapsible-admonition[data-type='critical'] .collapsible-admonition__item {
-	background: rgba(255, 73, 110, 0.1);
+	background: var(--color-red-bg);
 }

 .collapsible-admonition[data-type='critical'] .collapsible-admonition__item--bordered {
-	border-top: 1px solid rgba(255, 73, 110, 0.6);
+	border-top: 1px solid color-mix(in srgb, var(--color-red) 60%, transparent);
 }

 .collapsible-admonition[data-type='info'] {
-	border-color: rgba(47, 158, 255, 0.6);
+	border-color: color-mix(in srgb, var(--color-blue) 60%, transparent);
 }

 .collapsible-admonition[data-type='info'] .collapsible-admonition__item {
-	background: rgba(47, 158, 255, 0.1);
+	background: var(--color-blue-bg);
 }

 .collapsible-admonition[data-type='info'] .collapsible-admonition__item--bordered {
-	border-top: 1px solid rgba(47, 158, 255, 0.6);
+	border-top: 1px solid color-mix(in srgb, var(--color-blue) 60%, transparent);
 }

 .collapsible-admonition[data-type='warning'] {
-	border-color: rgba(255, 163, 71, 0.6);
+	border-color: color-mix(in srgb, var(--color-orange) 60%, transparent);
 }

 .collapsible-admonition[data-type='warning'] .collapsible-admonition__item {
-	background: rgba(255, 163, 71, 0.1);
+	background: var(--color-orange-bg);
 }

 .collapsible-admonition[data-type='warning'] .collapsible-admonition__item--bordered {
-	border-top: 1px solid rgba(255, 163, 71, 0.6);
+	border-top: 1px solid color-mix(in srgb, var(--color-orange) 60%, transparent);
 }

 .collapsible-admonition[data-type='success'] {
-	border-color: rgba(27, 217, 106, 0.6);
+	border-color: color-mix(in srgb, var(--color-green) 60%, transparent);
 }

 .collapsible-admonition[data-type='success'] .collapsible-admonition__item {
-	background: rgba(27, 217, 106, 0.1);
+	background: var(--color-green-bg);
 }

 .collapsible-admonition[data-type='success'] .collapsible-admonition__item--bordered {
-	border-top: 1px solid rgba(27, 217, 106, 0.6);
+	border-top: 1px solid color-mix(in srgb, var(--color-green) 60%, transparent);
 }

 .collapsible-admonition-enter-active,
@@ -97,12 +97,7 @@
 		</ButtonFrame>

 		<Teleport to="#teleports">
-			<Transition
-				enter-active-class="transition-opacity duration-150"
-				leave-active-class="transition-opacity duration-150"
-				enter-from-class="opacity-0"
-				leave-to-class="opacity-0"
-			>
+			<Transition name="floating-expand">
 				<div
 					v-if="shouldRenderDropdown"
 					ref="dropdownRef"
@@ -110,7 +105,6 @@
 					:class="[
 						props.dropdownClass,
 						openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
-						props.dropdownClass,
 					]"
 					:style="dropdownStyle"
 					:role="listbox ? 'listbox' : 'menu'"
@@ -128,12 +128,7 @@
 	</div>

 	<Teleport to="#teleports">
-		<Transition
-			:enter-active-class="addMenuTransitionEnterActiveClass"
-			leave-active-class="transition-none duration-0"
-			:enter-from-class="addMenuTransitionEnterFromClass"
-			leave-to-class="opacity-0"
-		>
+		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
 			<div
 				v-if="isAddMenuOpen && !isMobileActiveSubmenu"
 				ref="menuContainer"
@@ -166,207 +161,214 @@
 	</Teleport>

 	<Teleport to="#teleports">
-		<div
-			v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
-			ref="submenu"
-			class="fixed z-[10000] flex max-h-[min(70vh,32rem)] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-4 shadow-2xl"
-			:class="activeCategory.submenuClass ?? DEFAULT_SUBMENU_CLASS"
-			:style="submenuStyle"
-			@mouseenter="handleSubmenuMouseEnter"
-			@mouseleave="handleSubmenuMouseLeave"
-			@keydown="handleAddMenuKeydown"
-			@mousemove="(event) => handleMenuMouseMove(event, 'submenu')"
-		>
+		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
 			<div
-				v-if="isMobileAddMenuLayout"
-				class="flex items-center border-0 border-b border-solid border-b-surface-5 bg-surface-4"
-			>
-				<button
-					type="button"
-					class="flex h-12 w-full items-center gap-2 border-0 bg-transparent px-4 text-left text-base font-semibold text-primary shadow-none transition-all hover:brightness-110 focus-visible:brightness-110"
-					@click="returnToCategoryMenu"
-				>
-					<ChevronLeftIcon class="size-5 shrink-0 text-secondary" />
-					<span class="min-w-0 truncate">{{ activeCategory.label }}</span>
-				</button>
-			</div>
-			<div
-				v-if="activeCategory.searchable"
-				class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
-			>
-				<StyledInput
-					v-model="categorySearchQuery"
-					:icon="SearchIcon"
-					type="text"
-					:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
-					wrapper-class="grow bg-surface-4 mx-1"
-					input-class="ps-9 mx-1.5"
-				/>
-				<slot
-					name="search-actions"
-					:category="activeCategory"
-					:selected-values="activeCategorySelectedValues"
-					:set-selected-values="setActiveCategorySelectedValues"
-					:close-menu="closeAddMenu"
-				></slot>
-			</div>
-
-			<div v-if="$slots['category-top']" class="border-0 border-b border-solid border-b-surface-5">
-				<slot
-					name="category-top"
-					:category="activeCategory"
-					:selected-values="activeCategorySelectedValues"
-					:set-selected-values="setActiveCategorySelectedValues"
-					:close-menu="closeAddMenu"
-				></slot>
-			</div>
-
-			<div
-				class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-4 py-2.5 text-sm"
-			>
-				<span class="font-semibold text-secondary">{{ activeCategorySelectionLabel }}</span>
-				<button
-					type="button"
-					class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors"
-					:class="
-						hasActiveCategorySelection
-							? 'hover:bg-transparent hover:text-contrast'
-							: 'cursor-not-allowed opacity-50'
-					"
-					:disabled="!hasActiveCategorySelection"
-					@click="clearActiveCategorySelection"
-					@keydown.enter.stop
-					@keydown.space.stop
-				>
-					Clear
-				</button>
-			</div>
-			<div
-				ref="activeCategoryOptionsScrollbar"
-				class="dropdown-filter-bar-options-scrollbar min-h-0 flex-1 bg-surface-4"
-				data-overlayscrollbars-initialize
+				v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
+				ref="submenu"
+				class="fixed z-[10000] flex max-h-[min(70vh,32rem)] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-4 shadow-2xl"
+				:class="activeCategory.submenuClass ?? DEFAULT_SUBMENU_CLASS"
+				:style="submenuStyle"
+				@mouseenter="handleSubmenuMouseEnter"
+				@mouseleave="handleSubmenuMouseLeave"
+				@keydown="handleAddMenuKeydown"
+				@mousemove="(event) => handleMenuMouseMove(event, 'submenu')"
 			>
 				<div
-					ref="activeCategoryOptionsContainer"
-					class="h-full min-h-0 overflow-y-auto"
-					data-overlayscrollbars-viewport
+					v-if="isMobileAddMenuLayout"
+					class="flex items-center border-0 border-b border-solid border-b-surface-5 bg-surface-4"
+				>
+					<button
+						type="button"
+						class="flex h-12 w-full items-center gap-2 border-0 bg-transparent px-4 text-left text-base font-semibold text-primary shadow-none transition-all hover:brightness-110 focus-visible:brightness-110"
+						@click="returnToCategoryMenu"
+					>
+						<ChevronLeftIcon class="size-5 shrink-0 text-secondary" />
+						<span class="min-w-0 truncate">{{ activeCategory.label }}</span>
+					</button>
+				</div>
+				<div
+					v-if="activeCategory.searchable"
+					class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
+				>
+					<StyledInput
+						v-model="categorySearchQuery"
+						:icon="SearchIcon"
+						type="text"
+						:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
+						wrapper-class="grow bg-surface-4 mx-1"
+						input-class="ps-9 mx-1.5"
+					/>
+					<slot
+						name="search-actions"
+						:category="activeCategory"
+						:selected-values="activeCategorySelectedValues"
+						:set-selected-values="setActiveCategorySelectedValues"
+						:close-menu="closeAddMenu"
+					></slot>
+				</div>
+
+				<div
+					v-if="$slots['category-top']"
+					class="border-0 border-b border-solid border-b-surface-5"
+				>
+					<slot
+						name="category-top"
+						:category="activeCategory"
+						:selected-values="activeCategorySelectedValues"
+						:set-selected-values="setActiveCategorySelectedValues"
+						:close-menu="closeAddMenu"
+					></slot>
+				</div>
+
+				<div
+					class="flex items-center justify-between gap-3 border-0 border-b border-solid border-b-surface-5 px-4 py-2.5 text-sm"
+				>
+					<span class="font-semibold text-secondary">{{ activeCategorySelectionLabel }}</span>
+					<button
+						type="button"
+						class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors"
+						:class="
+							hasActiveCategorySelection
+								? 'hover:bg-transparent hover:text-contrast'
+								: 'cursor-not-allowed opacity-50'
+						"
+						:disabled="!hasActiveCategorySelection"
+						@click="clearActiveCategorySelection"
+						@keydown.enter.stop
+						@keydown.space.stop
+					>
+						Clear
+					</button>
+				</div>
+				<div
+					ref="activeCategoryOptionsScrollbar"
+					class="dropdown-filter-bar-options-scrollbar min-h-0 flex-1 bg-surface-4"
+					data-overlayscrollbars-initialize
 				>
 					<div
-						v-if="filteredActiveCategoryOptions.length === 0"
-						class="px-4 py-3.5 text-base font-medium text-secondary"
-					>
-						{{ activeCategoryEmptyStateLabel }}
-					</div>
-					<div
-						v-else
-						ref="activeCategoryOptionsListContainer"
-						:class="shouldVirtualizeActiveCategoryOptions ? 'relative' : 'flex flex-col'"
-						:style="activeCategoryOptionsListStyle"
+						ref="activeCategoryOptionsContainer"
+						class="h-full min-h-0 overflow-y-auto"
+						data-overlayscrollbars-viewport
 					>
 						<div
-							v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
-							:key="getActiveCategoryItemKey(item, index)"
-							:class="shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined"
-							:style="getActiveCategoryOptionWrapperStyle(index)"
+							v-if="filteredActiveCategoryOptions.length === 0"
+							class="px-4 py-3.5 text-base font-medium text-secondary"
+						>
+							{{ activeCategoryEmptyStateLabel }}
+						</div>
+						<div
+							v-else
+							ref="activeCategoryOptionsListContainer"
+							:class="shouldVirtualizeActiveCategoryOptions ? 'relative' : 'flex flex-col'"
+							:style="activeCategoryOptionsListStyle"
 						>
 							<div
-								v-if="isDropdownFilterSectionHeader(item)"
-								class="flex items-center justify-between gap-3 border-0 px-4 py-2.5 text-sm font-semibold text-secondary"
-								:class="[
-									item.class,
-									item.dividerBefore && index > 0
-										? 'border-t border-solid border-surface-5'
-										: undefined,
-								]"
+								v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
+								:key="getActiveCategoryItemKey(item, index)"
+								:class="
+									shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined
+								"
+								:style="getActiveCategoryOptionWrapperStyle(index)"
 							>
-								<span class="flex min-w-0 items-center gap-2">
-									<component
-										:is="item.icon"
-										v-if="item.icon"
-										class="size-4 shrink-0"
-										aria-hidden="true"
-									/>
-									<span class="min-w-0 truncate">{{ item.label }}</span>
-								</span>
+								<div
+									v-if="isDropdownFilterSectionHeader(item)"
+									class="flex items-center justify-between gap-3 border-0 px-4 py-2.5 text-sm font-semibold text-secondary"
+									:class="[
+										item.class,
+										item.dividerBefore && index > 0
+											? 'border-t border-solid border-surface-5'
+											: undefined,
+									]"
+								>
+									<span class="flex min-w-0 items-center gap-2">
+										<component
+											:is="item.icon"
+											v-if="item.icon"
+											class="size-4 shrink-0"
+											aria-hidden="true"
+										/>
+										<span class="min-w-0 truncate">{{ item.label }}</span>
+									</span>
+									<button
+										v-if="hasSelectableSectionHeaderOptions(item)"
+										type="button"
+										class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:text-contrast"
+										@click="toggleSectionHeaderOptions(item)"
+									>
+										{{ areSectionHeaderOptionsSelected(item) ? 'Clear' : 'Select all' }}
+									</button>
+								</div>
 								<button
-									v-if="hasSelectableSectionHeaderOptions(item)"
+									v-else
 									type="button"
-									class="border-0 bg-transparent p-0 text-sm font-semibold text-secondary shadow-none transition-colors hover:text-contrast"
-									@click="toggleSectionHeaderOptions(item)"
+									class="flex w-full cursor-pointer items-center gap-2.5 border-0 px-4 py-3.5 text-left text-contrast shadow-none transition-all duration-150 bg-surface-4 hover:brightness-[115%] focus-visible:brightness-[115%] focus-visible:outline-none"
+									:class="[
+										shouldVirtualizeActiveCategoryOptions ? 'h-12' : undefined,
+										{
+											'brightness-[115%]': item.selected,
+											'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
+										},
+									]"
+									:aria-disabled="item.disabled || undefined"
+									:aria-checked="item.selected"
+									role="checkbox"
+									@click="toggleFilterOption(activeCategory.key, item)"
 								>
-									{{ areSectionHeaderOptionsSelected(item) ? 'Clear' : 'Select all' }}
-								</button>
-							</div>
-							<button
-								v-else
-								type="button"
-								class="flex w-full cursor-pointer items-center gap-2.5 border-0 px-4 py-3.5 text-left text-contrast shadow-none transition-all duration-150 bg-surface-4 hover:brightness-[115%] focus-visible:brightness-[115%] focus-visible:outline-none"
-								:class="[
-									shouldVirtualizeActiveCategoryOptions ? 'h-12' : undefined,
-									{
-										'brightness-[115%]': item.selected,
-										'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
-									},
-								]"
-								:aria-disabled="item.disabled || undefined"
-								:aria-checked="item.selected"
-								role="checkbox"
-								@click="toggleFilterOption(activeCategory.key, item)"
-							>
-								<span
-									v-if="checkboxPosition === 'left'"
-									class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
-									:class="
-										item.selected
-											? 'border-button-border bg-brand text-brand-inverted'
-											: 'border-surface-5 bg-surface-2'
-									"
-								>
-									<CheckIcon v-if="item.selected" aria-hidden="true" stroke-width="3" />
-								</span>
-								<div class="flex min-w-0 flex-1 items-center justify-between gap-3">
-									<slot
-										v-if="$slots.option"
-										name="option"
-										:category="activeCategory"
-										:option="item"
-										:selected="item.selected"
-										:index="index"
-									></slot>
-									<template v-else>
-										<span
-											class="min-w-0 truncate font-semibold leading-tight"
-											:class="item.selected ? 'text-contrast' : 'text-primary'"
-										>
-											{{ item.label }}
-										</span>
+									<span
+										v-if="checkboxPosition === 'left'"
+										class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
+										:class="
+											item.selected
+												? 'border-button-border bg-brand text-brand-inverted'
+												: 'border-surface-5 bg-surface-2'
+										"
+									>
+										<CheckIcon v-if="item.selected" aria-hidden="true" stroke-width="3" />
+									</span>
+									<div class="flex min-w-0 flex-1 items-center justify-between gap-3">
 										<slot
-											name="option-right"
+											v-if="$slots.option"
+											name="option"
 											:category="activeCategory"
 											:option="item"
 											:selected="item.selected"
+											:index="index"
 										></slot>
-									</template>
-								</div>
-								<span
-									v-if="checkboxPosition === 'right'"
-									class="flex shrink-0 items-center justify-center text-brand"
-								>
-									<CheckIcon v-if="item.selected" aria-hidden="true" class="size-5" />
-								</span>
-							</button>
+										<template v-else>
+											<span
+												class="min-w-0 truncate font-semibold leading-tight"
+												:class="item.selected ? 'text-contrast' : 'text-primary'"
+											>
+												{{ item.label }}
+											</span>
+											<slot
+												name="option-right"
+												:category="activeCategory"
+												:option="item"
+												:selected="item.selected"
+											></slot>
+										</template>
+									</div>
+									<span
+										v-if="checkboxPosition === 'right'"
+										class="flex shrink-0 items-center justify-center text-brand"
+									>
+										<CheckIcon v-if="item.selected" aria-hidden="true" class="size-5" />
+									</span>
+								</button>
+							</div>
 						</div>
 					</div>
 				</div>
+				<slot
+					name="category-footer"
+					:category="activeCategory"
+					:selected-values="activeCategorySelectedValues"
+					:set-selected-values="setActiveCategorySelectedValues"
+					:close-menu="closeAddMenu"
+				></slot>
 			</div>
-			<slot
-				name="category-footer"
-				:category="activeCategory"
-				:selected-values="activeCategorySelectedValues"
-				:set-selected-values="setActiveCategorySelectedValues"
-				:close-menu="closeAddMenu"
-			></slot>
-		</div>
+		</Transition>
 	</Teleport>
 </template>

@@ -726,12 +728,6 @@ const isMobileActiveSubmenu = computed(
 	() =>
 		isMobileAddMenuLayout.value && activeCategory.value !== undefined && hasSubmenuPosition.value,
 )
-const addMenuTransitionEnterActiveClass = computed(() =>
-	isMobileAddMenuLayout.value ? 'transition-none duration-0' : 'transition-opacity duration-150',
-)
-const addMenuTransitionEnterFromClass = computed(() =>
-	isMobileAddMenuLayout.value ? 'opacity-100' : 'opacity-0',
-)
 const addMenuTriggerElement = computed(() => addMenuTrigger.value?.element ?? null)
 const addMenuOutsideClickTarget = computed(() => menuContainer.value ?? submenu.value)
 const addMenuOutsideClickIgnore = computed(() => [addMenuTriggerElement, menuContainer, submenu])
@@ -13,7 +13,7 @@
 	>
 		<div
 			:class="[
-				'grid place-content-center  text-brand border-brand border-solid border bg-highlight-green',
+				'grid place-content-center  text-brand border-brand border-solid border bg-brand-highlight',
 				size === 'small' ? 'w-10 h-10' : 'h-14 w-14',
 				size === 'small' ? 'rounded-xl' : 'rounded-2xl',
 			]"
@@ -38,7 +38,7 @@ function pillClass(active: boolean) {
 	return [
 		'cursor-pointer rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-all duration-100 active:scale-[0.97]',
 		active
-			? 'border-green bg-brand-highlight text-brand'
+			? 'border-brand bg-brand-highlight text-brand'
 			: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5',
 	]
 }
@@ -108,12 +108,7 @@
 		</component>

 		<Teleport to="#teleports">
-			<Transition
-				enter-active-class="transition-opacity duration-150"
-				leave-active-class="transition-opacity duration-150"
-				enter-from-class="opacity-0"
-				leave-to-class="opacity-0"
-			>
+			<Transition name="floating-expand">
 				<div
 					v-if="isOpen"
 					ref="dropdownRef"
@@ -80,6 +80,19 @@ const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchor
 	resolvedDistance,
 )

+const menuTransformOrigin = computed(() => {
+	switch (resolvedSide.value) {
+		case 'top':
+			return 'bottom center'
+		case 'left':
+			return 'right center'
+		case 'right':
+			return 'left center'
+		default:
+			return 'top center'
+	}
+})
+
 const menuItemClasses =
 	'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
 	'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
@@ -294,20 +307,13 @@ defineExpose({ open: openMenu, close: closeMenu })
 	</component>

 	<Teleport to="body">
-		<Transition
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="scale-95 opacity-0"
-			enter-to-class="scale-100 opacity-100"
-			leave-active-class="transition duration-100 ease-in"
-			leave-from-class="scale-100 opacity-100"
-			leave-to-class="scale-95 opacity-0"
-		>
+		<Transition name="floating-expand">
 			<div
 				v-if="isOpen"
 				:id="menuId"
 				ref="panelElement"
 				class="fixed isolate z-[9999] flex min-w-48 flex-col gap-1 rounded-[14px] bg-surface-3 p-2 shadow-lg ring-1 ring-surface-5"
-				:style="panelStyle"
+				:style="[panelStyle, { transformOrigin: menuTransformOrigin }]"
 				role="menu"
 				:aria-label="props.label"
 				@keydown="handleMenuKeydown"
@@ -123,14 +123,7 @@ defineExpose({ open: openMenu, close: closeMenu })
 	</component>

 	<Teleport to="body">
-		<Transition
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="scale-95 opacity-0"
-			enter-to-class="scale-100 opacity-100"
-			leave-active-class="transition duration-100 ease-in"
-			leave-from-class="scale-100 opacity-100"
-			leave-to-class="scale-95 opacity-0"
-		>
+		<Transition name="floating-expand">
 			<div
 				v-if="isOpen"
 				:id="panelId"
@@ -122,6 +122,7 @@ export type { SortDirection, TableColumn } from './Table.vue'
 export { default as Table } from './Table.vue'
 export type { TabsTab, TabsValue } from './Tabs.vue'
 export { default as Tabs } from './Tabs.vue'
+export { default as TagIcon } from './TagIcon.vue'
 export { default as TagItem } from './TagItem.vue'
 export { default as TagTagItem } from './TagTagItem.vue'
 export type {
@@ -86,7 +86,7 @@
 							}"
 							@click="serverLoader = loader"
 						>
-							<LoaderIcon :loader="loader" class="!h-12 !w-12" />
+							<TagIcon :tag="loader" enforce-type="loader" class="!h-12 !w-12" />
 							<p class="text-lg font-bold m-0">{{ loader }}</p>
 						</button>
 					</div>
@@ -478,9 +478,9 @@ import Checkbox from '../base/Checkbox.vue'
 import Combobox from '../base/Combobox.vue'
 import Slider from '../base/Slider.vue'
 import StyledInput from '../base/StyledInput.vue'
+import TagIcon from '../base/TagIcon.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import NewModal from '../modal/NewModal.vue'
-import LoaderIcon from '../servers/icons/LoaderIcon.vue'

 const { formatMessage } = useVIntl()
 const formatPrice = useFormatPrice()
@@ -246,9 +246,7 @@ function selectCustom() {
 			<div
 				class="z-10 -mb-3.5 rounded-full text-sm font-medium text-brand whitespace-nowrap absolute -top-3 right-4 bg-surface-3"
 			>
-				<div
-					class="bg-brand-highlight border border-solid border-highlight-green px-2.5 py-0.5 rounded-full"
-				>
+				<div class="bg-brand-highlight border border-solid border-brand px-2.5 py-0.5 rounded-full">
 					{{ formatMessage(messages.mostPopular) }}
 				</div>
 			</div>
@@ -2,45 +2,59 @@
 	<div class="flex flex-col gap-3">
 		<h2 class="text-lg font-semibold m-0">{{ formatMessage(messages.title) }}</h2>
 		<div class="flex flex-col gap-3 font-semibold">
-			<template v-if="organization">
+			<template v-if="loading">
+				<div v-for="i in 2" :key="`creator-skeleton-${i}`" class="flex gap-2 items-center">
+					<div class="size-[32px] rounded-full bg-surface-4 animate-pulse"></div>
+					<div class="flex flex-col gap-1.5">
+						<div class="w-24 h-4 rounded-full bg-surface-4 animate-pulse"></div>
+						<div class="w-16 h-3 rounded-full bg-surface-4 animate-pulse"></div>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="isEmpty">
+				<span class="text-red"> Error: Project has no members. This shouldn't happen. </span>
+			</template>
+			<template v-else>
+				<template v-if="organization">
+					<AutoLink
+						class="flex gap-2 items-center w-fit text-primary leading-[1.2] group"
+						:to="orgLink(organization.slug)"
+						:target="linkTarget ?? null"
+					>
+						<Avatar :src="organization.icon_url" :alt="organization.name" size="32px" />
+						<div class="flex flex-col flex-nowrap justify-center">
+							<span class="group-hover:underline font-medium">
+								{{ organization.name }}
+							</span>
+							<span class="text-sm font-normal text-secondary flex items-center gap-1"
+								><OrganizationIcon /> {{ formatMessage(messages.organization) }}</span
+							>
+						</div>
+					</AutoLink>
+					<hr v-if="sortedMembers.length > 0" class="w-full border-button-border my-0.5" />
+				</template>
 				<AutoLink
+					v-for="member in sortedMembers"
+					:key="`member-${member.id}`"
 					class="flex gap-2 items-center w-fit text-primary leading-[1.2] group"
-					:to="orgLink(organization.slug)"
-					:target="linkTarget ?? null"
+					:to="userLink(member.user.username)"
+					:target="resolveLinkTarget(userLinkTarget)"
 				>
-					<Avatar :src="organization.icon_url" :alt="organization.name" size="32px" />
-					<div class="flex flex-col flex-nowrap justify-center">
-						<span class="group-hover:underline font-medium">
-							{{ organization.name }}
+					<Avatar :src="member.user.avatar_url" :alt="member.user.username" size="32px" circle />
+					<div class="flex flex-col">
+						<span class="flex w-full flex-nowrap items-center gap-1 group-hover:underline">
+							<span class="min-w-0 overflow-hidden truncate">{{ member.user.username }}</span>
+							<CrownIcon
+								v-if="member.is_owner"
+								v-tooltip="formatMessage(messages.owner)"
+								class="text-brand-orange"
+							/>
+							<ExternalIcon v-if="resolveLinkTarget(userLinkTarget) === '_blank'" />
 						</span>
-						<span class="text-sm font-normal text-secondary flex items-center gap-1"
-							><OrganizationIcon /> {{ formatMessage(messages.organization) }}</span
-						>
+						<span class="text-sm font-normal text-secondary">{{ member.role }}</span>
 					</div>
 				</AutoLink>
-				<hr v-if="sortedMembers.length > 0" class="w-full border-button-border my-0.5" />
 			</template>
-			<AutoLink
-				v-for="member in sortedMembers"
-				:key="`member-${member.id}`"
-				class="flex gap-2 items-center w-fit text-primary leading-[1.2] group"
-				:to="userLink(member.user.username)"
-				:target="resolveLinkTarget(userLinkTarget)"
-			>
-				<Avatar :src="member.user.avatar_url" :alt="member.user.username" size="32px" circle />
-				<div class="flex flex-col">
-					<span class="flex w-full flex-nowrap items-center gap-1 group-hover:underline">
-						<span class="min-w-0 overflow-hidden truncate">{{ member.user.username }}</span>
-						<CrownIcon
-							v-if="member.is_owner"
-							v-tooltip="formatMessage(messages.owner)"
-							class="text-brand-orange"
-						/>
-						<ExternalIcon v-if="resolveLinkTarget(userLinkTarget) === '_blank'" />
-					</span>
-					<span class="text-sm font-normal text-secondary">{{ member.role }}</span>
-				</div>
-			</AutoLink>
 		</div>
 	</div>
 </template>
@@ -80,6 +94,7 @@ const props = defineProps<{
 	userLink: (username: string) => string
 	linkTarget?: string
 	userLinkTarget?: string | null
+	loading?: boolean
 }>()

 function resolveLinkTarget(target: string | null | undefined): string | null {
@@ -113,6 +128,8 @@ const sortedMembers = computed(() => {
 	return owner ? [owner, ...rest] : rest
 })

+const isEmpty = computed(() => !props.organization && sortedMembers.value.length === 0)
+
 const messages = defineMessages({
 	title: {
 		id: 'project.about.creators.title',
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="hasContent" class="flex flex-col gap-3">
+	<div v-if="loading || hasContent" class="flex flex-col gap-3">
 		<h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>

 		<div
@@ -15,6 +15,10 @@
 				<CopyIcon class="shrink-0" />
 			</div>
 		</div>
+		<div
+			v-else-if="loading && !projectV3"
+			class="h-12 rounded-2xl bg-surface-4 animate-pulse"
+		></div>

 		<section v-if="requiredContent" class="flex flex-col gap-2">
 			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.requiredContent) }}</h3>
@@ -26,8 +30,13 @@
 				:onclick-version="requiredContent.onclickVersion"
 				:onclick-download="requiredContent.onclickDownload"
 				:show-custom-modpack-tooltip="requiredContent.showCustomModpackTooltip"
+				:loading-version="loading"
 			/>
 		</section>
+		<section v-else-if="loading" class="flex flex-col gap-2">
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.requiredContent) }}</h3>
+			<div class="h-[52px] rounded-2xl bg-surface-4 animate-pulse"></div>
+		</section>
 		<section v-if="recommendedVersions.length" class="flex flex-col gap-2">
 			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.minecraftJava) }}</h3>
 			<div class="flex flex-wrap gap-1.5">
@@ -57,6 +66,17 @@
 				</TagItem>
 			</div>
 		</section>
+		<section v-else-if="loading" class="flex flex-col gap-2">
+			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.minecraftJava) }}</h3>
+			<div class="flex flex-wrap gap-1.5">
+				<div
+					v-for="width in ['w-16', 'w-20']"
+					:key="`version-skeleton-${width}`"
+					class="h-[26px] rounded-full bg-surface-4 animate-pulse"
+					:class="width"
+				></div>
+			</div>
+		</section>
 		<section v-if="props.ping !== undefined || region" class="flex flex-col gap-2">
 			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.region) }}</h3>
 			<div class="flex flex-wrap gap-1.5 items-center">
@@ -115,6 +135,7 @@ interface Props {
 	loaders?: string[]
 	ping?: number
 	statusOnline?: boolean
+	loading?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -27,6 +27,10 @@
 				>
 					{{ versionNumber }}
 				</div>
+				<div
+					v-else-if="loadingVersion"
+					class="w-16 h-4 my-0.5 rounded-full bg-surface-4 animate-pulse"
+				></div>
 			</div>
 		</div>
 		<IconButton
@@ -58,6 +62,7 @@ defineProps<{
 	onclickVersion?: () => void
 	onclickDownload?: () => void
 	showCustomModpackTooltip?: boolean
+	loadingVersion?: boolean
 }>()

 const { formatMessage } = useVIntl()
@@ -33,10 +33,10 @@ const { formatMessage } = useVIntl()

 const pingClass = computed(() => {
 	if (props.ping === undefined) {
-		return 'border-brand bg-highlight-green text-brand'
+		return 'border-green bg-highlight-green text-green'
 	}
 	if (props.ping < 150) {
-		return 'border-brand bg-highlight-green text-brand'
+		return 'border-green bg-highlight-green text-green'
 	}
 	if (props.ping < 250) {
 		return 'border-brand-orange bg-highlight-orange text-orange'
@@ -514,7 +514,7 @@ function roleClasses(role: ServerAccessRole): string {
 		case 'owner':
 			return 'border-orange !bg-highlight-orange !text-orange'
 		case 'editor':
-			return 'border-green !bg-highlight-green !text-brand'
+			return 'border-green !bg-highlight-green !text-green'
 		case 'viewer':
 			return 'border-blue !bg-highlight-blue !text-blue'
 	}
@@ -300,7 +300,7 @@ function roleClasses(role: ServerAccessRole): string {
 		case 'owner':
 			return 'border-orange bg-highlight-orange text-orange'
 		case 'editor':
-			return 'border-green bg-highlight-green text-brand'
+			return 'border-green bg-highlight-green text-green'
 		case 'viewer':
 			return 'border-blue bg-highlight-blue text-blue'
 	}
@@ -115,7 +115,7 @@ function roleClasses(role: ServerAccessRole): string {
 		case 'owner':
 			return 'border-orange bg-highlight-orange text-orange'
 		case 'editor':
-			return 'border-green bg-highlight-green text-brand'
+			return 'border-green bg-highlight-green text-green'
 		case 'viewer':
 			return 'border-blue bg-highlight-blue text-blue'
 	}
@@ -1,236 +0,0 @@
-<template>
-	<svg
-		v-if="normalizedLoader === 'Fabric'"
-		xmlns="http://www.w3.org/2000/svg"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<path fill="none" d="M0 0h24v24H0z" />
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="23"
-			d="m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8"
-			transform="matrix(.08671 0 0 .0867 -49.8 -56)"
-		/>
-	</svg>
-	<svg
-		v-else-if="normalizedLoader === 'Quilt'"
-		xmlns:xlink="http://www.w3.org/1999/xlink"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="2"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<defs>
-			<path
-				id="quilt"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="65.6"
-				d="M442.5 233.9c0-6.4-5.2-11.6-11.6-11.6h-197c-6.4 0-11.6 5.2-11.6 11.6v197c0 6.4 5.2 11.6 11.6 11.6h197c6.4 0 11.6-5.2 11.6-11.7v-197Z"
-			></path>
-		</defs>
-		<path fill="none" d="M0 0h24v24H0z"></path>
-		<use
-			xlink:href="#quilt"
-			stroke-width="65.6"
-			transform="matrix(.03053 0 0 .03046 -3.2 -3.2)"
-		></use>
-		<use xlink:href="#quilt" stroke-width="65.6" transform="matrix(.03053 0 0 .03046 -3.2 7)"></use>
-		<use
-			xlink:href="#quilt"
-			stroke-width="65.6"
-			transform="matrix(.03053 0 0 .03046 6.9 -3.2)"
-		></use>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="70.4"
-			d="M442.5 234.8c0-7-5.6-12.5-12.5-12.5H234.7c-6.8 0-12.4 5.6-12.4 12.5V430c0 6.9 5.6 12.5 12.4 12.5H430c6.9 0 12.5-5.6 12.5-12.5V234.8Z"
-			transform="rotate(45 3.5 24) scale(.02843 .02835)"
-		></path>
-	</svg>
-	<svg
-		v-else-if="normalizedLoader === 'Forge'"
-		ml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="1.5"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<path fill="none" d="M0 0h24v24H0z"></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			d="M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z"
-		></path>
-	</svg>
-	<svg
-		v-else-if="normalizedLoader === 'NeoForge'"
-		enable-background="new 0 0 24 24"
-		version="1.1"
-		viewBox="0 0 24 24"
-		xml:space="preserve"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<g
-			fill="none"
-			stroke="currentColor"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			stroke-width="2"
-		>
-			<path d="m12 19.2v2m0-2v2" />
-			<path
-				d="m8.4 1.3c0.5 1.5 0.7 3 0.1 4.6-0.2 0.5-0.9 1.5-1.6 1.5m8.7-6.1c-0.5 1.5-0.7 3-0.1 4.6 0.2 0.6 0.9 1.5 1.6 1.5"
-			/>
-			<path d="m3.6 15.8h-1.7m18.5 0h1.7" />
-			<path d="m3.2 12.1h-1.7m19.3 0h1.8" />
-			<path d="m8.1 12.7v1.6m7.8-1.6v1.6" />
-			<path d="m10.8 18h1.2m0 1.2-1.2-1.2m2.4 0h-1.2m0 1.2 1.2-1.2" />
-			<path
-				d="m4 9.7c-0.5 1.2-0.8 2.4-0.8 3.7 0 3.1 2.9 6.3 5.3 8.2 0.9 0.7 2.2 1.1 3.4 1.1m0.1-17.8c-1.1 0-2.1 0.2-3.2 0.7m11.2 4.1c0.5 1.2 0.8 2.4 0.8 3.7 0 3.1-2.9 6.3-5.3 8.2-0.9 0.7-2.2 1.1-3.4 1.1m-0.1-17.8c1.1 0 2.1 0.2 3.2 0.7"
-			/>
-			<path
-				d="m4 9.7c-0.2-1.8-0.3-3.7 0.5-5.5s2.2-2.6 3.9-3m11.6 8.5c0.2-1.9 0.3-3.7-0.5-5.5s-2.2-2.6-3.9-3"
-			/>
-			<path d="m12 21.2-2.4 0.4m2.4-0.4 2.4 0.4" />
-		</g>
-	</svg>
-	<svg
-		v-else-if="normalizedLoader === 'Paper'"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="1.5"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<path fill="none" d="M0 0h24v24H0z" />
-		<path fill="none" stroke="currentColor" stroke-width="2" d="m12 18 6 2 3-17L2 14l6 2" />
-		<path stroke="currentColor" stroke-width="2" d="m9 21-1-5 4 2-3 3Z" />
-		<path fill="currentColor" d="m12 18-4-2 10-9-6 11Z" />
-	</svg>
-	<svg
-		v-else-if="normalizedLoader === 'Spigot'"
-		viewBox="0 0 332 284"
-		style="
-			fill-rule: evenodd;
-			clip-rule: evenodd;
-			stroke-linejoin: round;
-			fill: none;
-			fill-rule: nonzero;
-			stroke-width: 24px;
-		"
-		stroke="currentColor"
-	>
-		<path
-			d="M147.5,27l27,-15l27.5,15l66.5,0l0,33.5l-73,-0.912l0,45.5l26,-0.088l0,31.5l-12.5,0l0,15.5l16,21.5l35,0l0,-21.5l35.5,0l0,21.5l24.5,0l0,55.5l-24.5,0l0,17l-35.5,0l0,-27l-35,0l-55.5,14.5l-67.5,-14.5l-15,14.5l18,12.5l-3,24.5l-41.5,1.5l-48.5,-19.5l6,-19l24.5,-4.5l16,-41l79,-36l-7,-15.5l0,-31.5l23.5,0l0,-45.5l-73.5,0l0,-32.5l67,0Z"
-		/>
-	</svg>
-	<svg
-		v-else-if="normalizedLoader === 'Bukkit'"
-		viewBox="0 0 292 319"
-		style="fill-rule: evenodd; clip-rule: evenodd; stroke-linecap: round; stroke-linejoin: round"
-		stroke="currentColor"
-	>
-		<g transform="matrix(1,0,0,1,0,-5)">
-			<path
-				d="M12,109.5L12,155L34.5,224L57.5,224L57.5,271L81,294L160,294L160,172L259.087,172L265,155L265,109.5M12,109.5L12,64L34.5,64L34.5,41L81,17L195.5,17L241,41L241,64L265,64L265,109.5M12,109.5L81,109.5L81,132L195.5,132L195.5,109.5L265,109.5M264.087,204L264.087,244M207.5,272L207.5,312M250,272L250,312L280,312L280,272L250,272ZM192.5,204L192.5,244L222.5,244L222.5,204L192.5,204Z"
-				style="fill: none; fill-rule: nonzero; stroke-width: 24px"
-			/>
-		</g>
-	</svg>
-	<svg
-		v-else-if="normalizedLoader === 'Purpur'"
-		xml:space="preserve"
-		fill-rule="evenodd"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-miterlimit="1.5"
-		clip-rule="evenodd"
-		viewBox="0 0 24 24"
-	>
-		<defs>
-			<path
-				id="purpur"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="1.68"
-				d="m264 41.95 8-4v8l-8 4v-8Z"
-			></path>
-		</defs>
-		<path fill="none" d="M0 0h24v24H0z"></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="m264 29.95-8 4 8 4.42 8-4.42-8-4Z"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="m272 38.37-8 4.42-8-4.42"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="m260 31.95 8 4.21V45"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<path
-			fill="none"
-			stroke="currentColor"
-			stroke-width="1.77"
-			d="M260 45v-8.84l8-4.21"
-			transform="matrix(1.125 0 0 1.1372 -285 -31.69)"
-		></path>
-		<use
-			xlink:href="#purpur"
-			stroke-width="1.68"
-			transform="matrix(1.125 0 0 1.2569 -285 -40.78)"
-		></use>
-		<use
-			xlink:href="#purpur"
-			stroke-width="1.68"
-			transform="matrix(-1.125 0 0 1.2569 309 -40.78)"
-		></use>
-	</svg>
-	<svg v-else-if="normalizedLoader === 'Vanilla'" viewBox="0 0 20 20" fill="currentColor">
-		<path
-			fill-rule="evenodd"
-			d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z"
-			clip-rule="evenodd"
-		></path>
-	</svg>
-	<LoaderIcon v-else />
-</template>
-
-<script setup lang="ts">
-import { LoaderIcon } from '@modrinth/assets'
-import { computed } from 'vue'
-
-import { formatLoaderLabel, type ServerLoader } from '#ui/utils/loaders'
-
-const props = defineProps<{
-	loader: ServerLoader
-}>()
-
-const normalizedLoader = computed(() => formatLoaderLabel(props.loader))
-</script>
@@ -1,2 +1 @@
-export { default as LoaderIcon } from './LoaderIcon.vue'
 export { default as ServerIcon } from './ServerIcon.vue'
@@ -2,7 +2,7 @@
 	<div class="flex min-w-0 flex-row items-center gap-2 truncate">
 		<Separator v-if="!noSeparator" />
 		<div class="flex flex-row items-center gap-1.5">
-			<LoaderIcon v-if="loader" :loader="loader" />
+			<TagIcon v-if="loader" :tag="loader" enforce-type="loader" />
 			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
 			<AutoLink
 				v-if="isLink"
@@ -41,7 +41,7 @@ import { injectServerSettingsModal } from '#ui/providers/server-settings-modal'
 import type { ServerLoader } from '#ui/utils/loaders'

 import AutoLink from '../../base/AutoLink.vue'
-import LoaderIcon from '../icons/LoaderIcon.vue'
+import TagIcon from '../../base/TagIcon.vue'
 import Separator from './Separator.vue'

 defineProps<{
@@ -147,6 +147,7 @@ import { Button } from '#ui/components/base/buttons'

 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectNotificationManager } from '../../../providers'
+import { commonMessages } from '../../../utils/common-messages'
 import Avatar from '../../base/Avatar.vue'
 import Combobox from '../../base/Combobox.vue'
 import NewModal from '../../modal/NewModal.vue'
@@ -226,10 +227,6 @@ const messages = defineMessages({
 		id: 'sharing.invite-players-modal.added',
 		defaultMessage: 'Added',
 	},
-	cancelButton: {
-		id: 'sharing.invite-players-modal.cancel',
-		defaultMessage: 'Cancel',
-	},
 	requestedButton: {
 		id: 'sharing.invite-players-modal.requested',
 		defaultMessage: 'Request sent',
@@ -297,7 +294,9 @@ const searchPlaceholderLabel = computed(
 const addButtonLabel = computed(() => props.addLabel ?? formatMessage(messages.addButton))
 const inviteButtonLabel = computed(() => props.inviteLabel ?? formatMessage(messages.inviteButton))
 const addedButtonLabel = computed(() => props.addedLabel ?? formatMessage(messages.addedButton))
-const cancelButtonLabel = computed(() => props.cancelLabel ?? formatMessage(messages.cancelButton))
+const cancelButtonLabel = computed(
+	() => props.cancelLabel ?? formatMessage(commonMessages.cancelButton),
+)
 const requestedButtonLabel = computed(
 	() => props.requestedLabel ?? formatMessage(messages.requestedButton),
 )
@@ -32,7 +32,7 @@
 							/>
 							<div class="flex justify-end gap-2 p-3 pt-1">
 								<Button type="outlined" native-type="button" @click="cancelCustomExpiry">
-									{{ formatMessage(messages.cancel) }}
+									{{ formatMessage(commonMessages.cancelButton) }}
 								</Button>
 								<Button
 									type="colored"
@@ -73,7 +73,7 @@
 			<div class="flex justify-end gap-2">
 				<Button :disabled="saving" @click="modal?.hide()">
 					<XIcon aria-hidden="true" />
-					{{ formatMessage(messages.cancel) }}
+					{{ formatMessage(commonMessages.cancelButton) }}
 				</Button>
 				<Button type="colored" color="brand" :disabled="!canSave" @click="save">
 					<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
@@ -94,6 +94,7 @@ import { Button } from '#ui/components/base/buttons'
 import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectNotificationManager } from '../../../providers'
+import { commonMessages } from '../../../utils/common-messages'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
 import DatePicker from '../../base/DatePicker.vue'
 import StyledInput from '../../base/StyledInput.vue'
@@ -186,10 +187,6 @@ const messages = defineMessages({
 		id: 'sharing.invite-players-modal.custom-expiry-value',
 		defaultMessage: 'Custom: {date}',
 	},
-	cancel: {
-		id: 'sharing.invite-players-modal.cancel-button',
-		defaultMessage: 'Cancel',
-	},
 	apply: {
 		id: 'sharing.invite-players-modal.apply-button',
 		defaultMessage: 'Apply',
@@ -57,7 +57,15 @@

 		<template #actions>
 			<PageHeaderActions>
-				<ButtonLink v-if="isSelf" size="xl" :to="editProfileLink">
+				<Button
+					v-if="isSelf && typeof editProfileLink === 'function'"
+					size="xl"
+					@click="editProfileLink"
+				>
+					<EditIcon />
+					{{ formatMessage(commonMessages.editButton) }}
+				</Button>
+				<ButtonLink v-else-if="isSelf" size="xl" :to="editProfileLink">
 					<EditIcon />
 					{{ formatMessage(commonMessages.editButton) }}
 				</ButtonLink>
@@ -96,7 +104,7 @@ import { computed } from 'vue'

 import Avatar from '#ui/components/base/Avatar.vue'
 import type { OverflowMenuOption } from '#ui/components/base/buttons'
-import { ButtonLink, TeleportOverflowMenu } from '#ui/components/base/buttons'
+import { Button, ButtonLink, TeleportOverflowMenu } from '#ui/components/base/buttons'
 import PageHeader from '#ui/components/base/page-header/index.vue'
 import PageHeaderMetadata from '#ui/components/base/page-header/metadata/index.vue'
 import PageHeaderMetadataNumberItem from '#ui/components/base/page-header/metadata/page-header-metadata-number-item.vue'
@@ -128,10 +136,6 @@ const messages = defineMessages({
 		id: 'profile.button.unblock',
 		defaultMessage: 'Unblock',
 	},
-	editRoleButton: {
-		id: 'profile.button.edit-role',
-		defaultMessage: 'Edit role',
-	},
 	infoButton: {
 		id: 'profile.button.info',
 		defaultMessage: 'View user details',
@@ -212,7 +216,7 @@ const emit = defineEmits<{
 	toggleAffiliate: []
 	openInfo: []
 	openAnalytics: []
-	editRole: []
+	editUser: []
 }>()

 const { formatMessage } = useVIntl()
@@ -298,10 +302,10 @@ const moreActions = computed<OverflowMenuOption[]>(() => [
 		shown: props.showStaffActions && props.isAdmin,
 	},
 	{
-		id: 'edit-role',
-		label: formatMessage(messages.editRoleButton),
+		id: 'edit-user',
+		label: 'Edit user',
 		icon: EditIcon,
-		action: () => emit('editRole'),
+		action: () => emit('editUser'),
 		tone: 'orange',
 		shown: props.showStaffActions && props.isAdmin,
 	},