From 75335647ee6c448a6be4c6fc094a8b29154784ba Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:19:36 -0700
Subject: [PATCH 1/7] update tags page + sort project types consistently
 (#7044)

---
 apps/frontend/src/layouts/default.vue         |  44 +-
 apps/frontend/src/locales/de-CH/index.json    |   6 -
 apps/frontend/src/locales/de-DE/index.json    |   6 -
 apps/frontend/src/locales/en-US/index.json    |  22 +-
 apps/frontend/src/locales/es-419/index.json   |   6 -
 apps/frontend/src/locales/fr-FR/index.json    |   6 -
 apps/frontend/src/locales/hu-HU/index.json    |   6 -
 apps/frontend/src/locales/it-IT/index.json    |   3 -
 apps/frontend/src/locales/ko-KR/index.json    |   6 -
 apps/frontend/src/locales/nl-NL/index.json    |   6 -
 apps/frontend/src/locales/pl-PL/index.json    |   3 -
 apps/frontend/src/locales/pt-BR/index.json    |   6 -
 apps/frontend/src/locales/ru-RU/index.json    |   6 -
 apps/frontend/src/locales/uk-UA/index.json    |   6 -
 apps/frontend/src/locales/zh-CN/index.json    |   6 -
 apps/frontend/src/locales/zh-TW/index.json    |   6 -
 .../pages/[type]/[project]/settings/tags.vue  | 641 +++++++++---------
 .../src/pages/collection/[collection].vue     |   3 +-
 .../src/pages/organization/[organization].vue |  25 +-
 .../components/base/UnsavedChangesPopup.vue   |  53 +-
 .../layouts/shared/user-profile/layout.vue    |  20 +-
 packages/ui/src/utils/index.ts                |   1 +
 packages/ui/src/utils/project-types.ts        |  31 +
 packages/ui/src/utils/search.ts               |   4 +-
 24 files changed, 452 insertions(+), 470 deletions(-)
 create mode 100644 packages/ui/src/utils/project-types.ts

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index bf09d69e04..6ebd410f11 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -138,22 +138,6 @@
 						<BracesIcon aria-hidden="true" />
 						{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
 					</ButtonLink>
-					<ButtonLink
-						type="quiet"
-						to="/discover/modpacks"
-						:class="
-							route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')
-								? (route.name === 'discover-modpacks'
-										? 'main-nav-primary'
-										: 'main-nav-secondary') === 'main-nav-primary'
-									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
-									: '!bg-[var(--color-button-bg)] !text-contrast'
-								: ''
-						"
-					>
-						<PackageOpenIcon aria-hidden="true" />
-						{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
-					</ButtonLink>
 					<ButtonLink
 						type="quiet"
 						to="/discover/shaders"
@@ -170,6 +154,22 @@
 						<GlassesIcon aria-hidden="true" />
 						{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
 					</ButtonLink>
+					<ButtonLink
+						type="quiet"
+						to="/discover/modpacks"
+						:class="
+							route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')
+								? (route.name === 'discover-modpacks'
+										? 'main-nav-primary'
+										: 'main-nav-secondary') === 'main-nav-primary'
+									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+									: '!bg-[var(--color-button-bg)] !text-contrast'
+								: ''
+						"
+					>
+						<PackageOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
+					</ButtonLink>
 					<ButtonLink
 						type="quiet"
 						to="/discover/plugins"
@@ -1215,8 +1215,8 @@ const navRoutes = computed(() => [
 		href: '/discover/mods',
 	},
 	{
-		label: formatMessage(getProjectTypeMessage('plugin', true)),
-		href: '/discover/plugins',
+		label: formatMessage(getProjectTypeMessage('resourcepack', true)),
+		href: '/discover/resourcepacks',
 	},
 	{
 		label: formatMessage(getProjectTypeMessage('datapack', true)),
@@ -1226,14 +1226,14 @@ const navRoutes = computed(() => [
 		label: formatMessage(getProjectTypeMessage('shader', true)),
 		href: '/discover/shaders',
 	},
-	{
-		label: formatMessage(getProjectTypeMessage('resourcepack', true)),
-		href: '/discover/resourcepacks',
-	},
 	{
 		label: formatMessage(getProjectTypeMessage('modpack', true)),
 		href: '/discover/modpacks',
 	},
+	{
+		label: formatMessage(getProjectTypeMessage('plugin', true)),
+		href: '/discover/plugins',
+	},
 	{
 		label: formatMessage(getProjectTypeMessage('server', true)),
 		href: '/discover/servers',
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index f8f3215659..8701689713 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Hervorgehobene Tags"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Du kannst bis zu 3 deiner relevantesten Tags als hervorheben. Andere Tags werden möglicherweise hervorgehoben, falls du nicht alle 3 auswählst."
-  },
   "project.settings.tags.features-description": {
     "message": "Wähle alle Funktionen aus, die dein {type} nutzt."
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Wähle mindestens eine Kategorie aus, um eine Kategorie hervorzuheben."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Genaue Tags sind wichtig, damit Nutzer dein {type} leichter finden können. Achte darauf, alle zutreffenden Tags auszuwählen."
-  },
   "project.settings.tags.title": {
     "message": "Tags"
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index f78ec91224..e414759eb7 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Hervorgehobene Tags"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Du kannst bis zu 3 deiner relevantesten Tags als hervorheben. Andere Tags werden möglicherweise hervorgehoben, falls du nicht alle 3 auswählst."
-  },
   "project.settings.tags.features-description": {
     "message": "Wähle alle Funktionen aus, die dein {type} nutzt."
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Wähle mindestens eine Kategorie aus, um eine Kategorie hervorzuheben."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Genaue Tags sind wichtig, damit Nutzer dein {type} leichter finden können. Achte darauf, alle zutreffenden Tags auszuwählen."
-  },
   "project.settings.tags.title": {
     "message": "Tags"
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index da8e2ed9ef..812e796be1 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -3929,12 +3929,27 @@
   "project.settings.tags.featured-tags": {
     "message": "Featured tags"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "You can feature up to 3 of your most relevant tags. Other tags may be promoted to featured if you do not select all 3."
+  "project.settings.tags.featured-tags-required": {
+    "message": "You must have at least one featured tag."
+  },
+  "project.settings.tags.featured-tags-select-description": {
+    "message": "Select your most relevant tags. These are displayed before the rest of your tags."
   },
   "project.settings.tags.features-description": {
     "message": "Select all of the features that your {type} makes use of."
   },
+  "project.settings.tags.group-title.categories": {
+    "message": "{showType, select, yes {{types} categories} other {Categories}}"
+  },
+  "project.settings.tags.group-title.features": {
+    "message": "{showType, select, yes {{types} features} other {Features}}"
+  },
+  "project.settings.tags.group-title.performance-impact": {
+    "message": "{showType, select, yes {{types} performance impact} other {Performance impact}}"
+  },
+  "project.settings.tags.group-title.resolutions": {
+    "message": "{showType, select, yes {{types} resolutions} other {Resolutions}}"
+  },
   "project.settings.tags.multiple-resolution-tags-warning": {
     "message": "You've selected {count} resolution tags ({tags}). Resource packs should typically only have one resolution tag."
   },
@@ -3947,9 +3962,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Select at least one category in order to feature a category."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Accurate tagging is important to help people find your {type}. Make sure to select all tags that apply."
-  },
   "project.settings.tags.title": {
     "message": "Tags"
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index 2aa8d978e3..038094172a 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Etiquetas destacadas"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Puedes destacar hasta 3 de tus etiquetas más relevantes. Otras etiquetas pueden ser promovidas a destacadas si no seleccionas las 3 completas."
-  },
   "project.settings.tags.features-description": {
     "message": "Selecciona todas las características que tu {type} usa."
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Selecciona al menos una categoría para destacar una categoría."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Seleccionar etiquetas relevantes es importante para ayudar a la gente a encontrar tu {type}. Asegúrate de seleccionar todas las etiquetas que apliquen."
-  },
   "project.settings.tags.title": {
     "message": "Etiquetas"
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index a7729d4f72..d78cf40a5e 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Tags mis en avant"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Vous pouvez mettre en avant jusqu'à 3 de vos tags les plus pertinents. D'autres tags peuvent être mis en avant si vous ne sélectionnez pas les 3."
-  },
   "project.settings.tags.features-description": {
     "message": "Sélectionnez toutes les fonctionnalités que votre {type} utilise."
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Sélectionnez au moins une catégorie afin de pouvoir mettre en avant une catégorie."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Un étiquetage correct est important pour aider les gens à trouver votre {type}. Faites en sorte de sélectionner tous les tags qui s'appliquent."
-  },
   "project.settings.tags.title": {
     "message": "Tags"
   },
diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index f95488ce5e..7313d7b514 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -3641,9 +3641,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Kiemelt címkék"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Legfeljebb 3 legrelevánsabb címkét jelölhetsz ki kiemeltként. Ha nem választod ki mind a 3-at, akkor a többi címke is kiemeltként jelenhet meg."
-  },
   "project.settings.tags.features-description": {
     "message": "Jelöld ki az összes olyan funkciót, amelyet a {type} használ."
   },
@@ -3659,9 +3656,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Válassz ki legalább egy kategóriát ahhoz, hogy kiemelj egy kategóriát."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "A pontos címkézés fontos ahhoz, hogy a {type} könnyebben me. Feltétlenül válaszd ki az összes releváns címkét."
-  },
   "project.settings.tags.title": {
     "message": "Címkék"
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index b94fefd5b4..1d09448f32 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -3917,9 +3917,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Tag in evidenza"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Puoi mettere in evidenza fino a 3 tag. Altri tag potrebbero aggiungersi se non bastassero."
-  },
   "project.settings.tags.multiple-resolution-tags-warning": {
     "message": "Hai selezionato {count} tag di risoluzione ({tags}). I pacchetti di risorse dovrebbero averne solo uno."
   },
diff --git a/apps/frontend/src/locales/ko-KR/index.json b/apps/frontend/src/locales/ko-KR/index.json
index 4b43d5eb08..280d47f8af 100644
--- a/apps/frontend/src/locales/ko-KR/index.json
+++ b/apps/frontend/src/locales/ko-KR/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "추천 태그"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "가장 적합한 태그를 최대 3개까지 지정할 수 있습니다. 3개를 모두 선택하지 않으면 다른 태그가 추천 태그로 표시될 수 있습니다."
-  },
   "project.settings.tags.features-description": {
     "message": " {type}에서 사용하는 모든 기능을 선택하세요."
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "추천 카테고리를 지정하려면 적어도 하나의 카테고리를 선택해야 합니다."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "정확한 태그 선택은 {type}을 쉽게 찾을 수 있도록 돕습니다. 관련된 모든 태그를 선택해 주세요."
-  },
   "project.settings.tags.title": {
     "message": "태그"
   },
diff --git a/apps/frontend/src/locales/nl-NL/index.json b/apps/frontend/src/locales/nl-NL/index.json
index 6c64df1f48..6e52d55ba4 100644
--- a/apps/frontend/src/locales/nl-NL/index.json
+++ b/apps/frontend/src/locales/nl-NL/index.json
@@ -3926,9 +3926,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Uitgelichte tags"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Je kunt maximaal 3 van je meest relevante tags als uitgelichte tags selecteren. Als je niet alle 3 selecteert, kunnen andere tags als uitgelichte tags worden weergegeven."
-  },
   "project.settings.tags.features-description": {
     "message": "Selecteer alle functies waarvan je {type} gebruikmaakt."
   },
@@ -3944,9 +3941,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Selecteer minstens één categorie om een categorie uit te lichten."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Nauwkeurige tags zijn belangrijk om mensen te helpen je {type} te vinden. Zorg ervoor dat je alle relevante tags selecteert."
-  },
   "project.settings.tags.title": {
     "message": "Tags"
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index 85f58da7e8..28d9253571 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -3875,9 +3875,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Wyróżnione tagi"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Możesz wyróżnić 3 z najlepiej pasujących do Twojego projektu tagów. Inne tagi mogą zostać pokazane jako wyróżnione, jeżeli nie wybierzesz wszystkich trzech."
-  },
   "project.settings.tags.features-description": {
     "message": "Wszystkie funkcjonalności, których używa {type}"
   },
diff --git a/apps/frontend/src/locales/pt-BR/index.json b/apps/frontend/src/locales/pt-BR/index.json
index 20925759f1..c43bc191b6 100644
--- a/apps/frontend/src/locales/pt-BR/index.json
+++ b/apps/frontend/src/locales/pt-BR/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Etiquetas em destaque"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Você pode destacar até 3 das suas etiquetas mais relevantes. Outras etiquetas poderão ser promovidas a destaque caso você não selecione todas as 3."
-  },
   "project.settings.tags.features-description": {
     "message": "Selecione todas as funcionalidades que o seu {type} utiliza."
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Selecione pelo menos uma categoria para ela ser destacada."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Etiquetar corretamente é importante para ajudar as pessoas a encontrarem seu {type}. Certifique-se de selecionar todas as etiquetas aplicáveis."
-  },
   "project.settings.tags.title": {
     "message": "Etiquetas"
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index 51a767ad5b..dc0d3de738 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -3920,9 +3920,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Ключевые теги"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Можно выбрать до 3 ключевых тегов. Если не выбрать все 3, то другие теги могут стать ключевыми."
-  },
   "project.settings.tags.features-description": {
     "message": "Выберите все особенности, которые использует ваш {type}"
   },
@@ -3935,9 +3932,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Выберите хотя бы одну категорию, чтобы отобразить ее."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Аккуратная маркировка важна, чтобы помочь людям найти ваш {type}"
-  },
   "project.settings.tags.title": {
     "message": "Теги"
   },
diff --git a/apps/frontend/src/locales/uk-UA/index.json b/apps/frontend/src/locales/uk-UA/index.json
index 0bd18c26c5..f85db2798d 100644
--- a/apps/frontend/src/locales/uk-UA/index.json
+++ b/apps/frontend/src/locales/uk-UA/index.json
@@ -3926,9 +3926,6 @@
   "project.settings.tags.featured-tags": {
     "message": "Основні теґи"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "Ви можете обрати основними до 3 найбільш описових теґів. Інші теґи можуть стати основними, якщо не оберете всі 3."
-  },
   "project.settings.tags.features-description": {
     "message": "Оберіть увесь функціонал, який присутній у {type}."
   },
@@ -3944,9 +3941,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "Виберіть хоча б одну категорію, щоб рекомендувати її."
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "Указання правильних теґів необхідне, щоб люди могли легше знайти ваш {type}. Переконайтеся, що ви обрали підхожі теґи."
-  },
   "project.settings.tags.title": {
     "message": "Теґи"
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index 1cbf4f42c0..f556e930cc 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "精选标签"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "你可以设置最多 3 个精选标签，标示出最相关的特点。如果没有选完 3 个标签，其他标签也可能提升为精选标签。"
-  },
   "project.settings.tags.features-description": {
     "message": "选择你的{type}作用于哪类特性。"
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "请先至少选择一个分类，再设置精选分类。"
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "准确选好标签，能极大帮助别人找到你的{type}。请确保选择所有合适的标签。"
-  },
   "project.settings.tags.title": {
     "message": "标签"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index 6b70244445..acc1d22e3a 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -3929,9 +3929,6 @@
   "project.settings.tags.featured-tags": {
     "message": "精選標籤"
   },
-  "project.settings.tags.featured-tags-description": {
-    "message": "你可以選擇最多 3 個最相關的標籤作為精選標籤。如果沒有選完 3 個標籤，系統可能會自動將其他標籤選為精選標籤。"
-  },
   "project.settings.tags.features-description": {
     "message": "請選擇你的{type}包含的功能。"
   },
@@ -3947,9 +3944,6 @@
   "project.settings.tags.select-at-least-one-category": {
     "message": "請選擇至少一個類別再選擇精選標籤。"
   },
-  "project.settings.tags.tagging-importance-description": {
-    "message": "精確的標籤對於協助使用者找到你的{type}非常重要。請務必選擇所有合適的標籤。"
-  },
   "project.settings.tags.title": {
     "message": "標籤"
   },
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/tags.vue b/apps/frontend/src/pages/[type]/[project]/settings/tags.vue
index cbfc414335..5a2645962f 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/tags.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/tags.vue
@@ -1,174 +1,23 @@
-<template>
-	<div>
-		<ConfirmLeaveModal ref="confirmLeaveModal" />
-		<section class="universal-card">
-			<div class="label">
-				<h3>
-					<span class="label__title size-card-header">{{ formatMessage(messages.tagsTitle) }}</span>
-				</h3>
-			</div>
-
-			<div
-				v-if="tooManyTagsWarning && !allTagsSelectedWarning"
-				class="my-2 flex items-center gap-1.5 text-orange"
-			>
-				<TriangleAlertIcon class="my-auto" />
-				{{ tooManyTagsWarning }}
-			</div>
-
-			<div v-if="multipleResolutionTagsWarning" class="my-2 flex items-center gap-1.5 text-orange">
-				<TriangleAlertIcon class="my-auto" />
-				{{ multipleResolutionTagsWarning }}
-			</div>
-
-			<div v-if="allTagsSelectedWarning" class="my-2 flex items-center gap-1.5 text-red">
-				<TriangleAlertIcon class="my-auto" />
-				<span>{{ allTagsSelectedWarning }}</span>
-			</div>
-
-			<p>
-				{{
-					formatMessage(messages.taggingImportanceDescription, {
-						type: formatProjectType(project.project_type).toLowerCase(),
-					})
-				}}
-			</p>
-
-			<p
-				v-if="project.versions.length === 0 && projectV3?.minecraft_server == null"
-				class="known-errors"
-			>
-				{{ formatMessage(messages.uploadVersionFirst) }}
-			</p>
-			<template v-else>
-				<template v-for="header in Object.keys(categoryLists)" :key="`categories-${header}`">
-					<div class="label mb-3">
-						<h4>
-							<span class="label__title">{{ formatCategoryHeader(formatMessage, header) }}</span>
-						</h4>
-						<span class="label__description">
-							<template v-if="header === 'categories'">
-								{{
-									formatMessage(messages.categoriesDescription, {
-										type: formatProjectType(project.project_type).toLowerCase(),
-									})
-								}}
-							</template>
-							<template v-else-if="header === 'features'">
-								{{
-									formatMessage(messages.featuresDescription, {
-										type: formatProjectType(project.project_type).toLowerCase(),
-									})
-								}}
-							</template>
-							<template v-else-if="header === 'resolutions'">
-								{{
-									formatMessage(messages.resolutionsDescription, {
-										type: formatProjectType(project.project_type).toLowerCase(),
-									})
-								}}
-							</template>
-							<template v-else-if="header === 'performance impact'">
-								{{
-									formatMessage(messages.performanceImpactDescription, {
-										type: formatProjectType(project.project_type).toLowerCase(),
-									})
-								}}
-							</template>
-						</span>
-					</div>
-					<div class="category-list input-div">
-						<Checkbox
-							v-for="category in categoryLists[header]"
-							:key="`category-${header}-${category.name}`"
-							:model-value="current.selectedTags.includes(category)"
-							:description="formatCategory(formatMessage, category.name)"
-							class="category-selector"
-							@update:model-value="toggleCategory(category)"
-						>
-							<div class="category-selector__label">
-								<component
-									:is="getTagIcon(category.name)"
-									v-if="header !== 'resolutions' && getTagIcon(category.name)"
-									aria-hidden="true"
-									class="icon"
-								/>
-								<span aria-hidden="true">
-									<FormattedTag :tag="category.name" enforce-type="category" />
-								</span>
-							</div>
-						</Checkbox>
-					</div>
-				</template>
-				<div class="label">
-					<h4>
-						<span class="label__title"
-							><StarIcon /> {{ formatMessage(messages.featuredTags) }}</span
-						>
-					</h4>
-					<span class="label__description">{{
-						formatMessage(messages.featuredTagsDescription)
-					}}</span>
-				</div>
-				<p v-if="current.selectedTags.length < 1">
-					{{ formatMessage(messages.selectAtLeastOneCategory) }}
-				</p>
-				<div class="category-list input-div">
-					<Checkbox
-						v-for="category in current.selectedTags"
-						:key="`featured-category-${category.name}`"
-						class="category-selector"
-						:model-value="current.featuredTags.includes(category)"
-						:description="formatCategory(formatMessage, category.name)"
-						:disabled="current.featuredTags.length >= 3 && !current.featuredTags.includes(category)"
-						@update:model-value="toggleFeaturedCategory(category)"
-					>
-						<div class="category-selector__label">
-							<component
-								:is="getTagIcon(category.name)"
-								v-if="category.header !== 'resolutions' && getTagIcon(category.name)"
-								aria-hidden="true"
-								class="icon"
-							/>
-							<span aria-hidden="true">
-								<FormattedTag :tag="category.name" enforce-type="category" />
-							</span>
-						</div>
-					</Checkbox>
-				</div>
-			</template>
-		</section>
-		<UnsavedChangesPopup
-			:original="saved"
-			:modified="current"
-			:saving="saving"
-			@reset="reset"
-			@save="save"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import {
-	getCategoryIcon,
-	SERVER_CATEGORY_ICON_MAP,
-	StarIcon,
-	TriangleAlertIcon,
-} from '@modrinth/assets'
-import {
+	Admonition,
 	Checkbox,
 	ConfirmLeaveModal,
 	defineMessages,
 	formatCategory,
 	formatCategoryHeader,
+	formatProjectTypeSentence,
 	FormattedTag,
 	injectProjectPageContext,
+	type MessageDescriptor,
+	sortProjectTypes,
+	TagItem,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useSavable,
 	useVIntl,
 } from '@modrinth/ui'
-import { formatProjectType, sortedCategories } from '@modrinth/utils'
+import { capitalizeString, sortedCategories } from '@modrinth/utils'
 import { computed } from 'vue'
 
 interface Category {
@@ -178,19 +27,30 @@ interface Category {
 	project_type: string
 }
 
+interface CategoryGroup {
+	id: string
+	title: string
+	description?: string
+	categories: Category[]
+}
+
+const MAX_FEATURED_TAGS = 3
+
+const RESOLUTION_TAGS = ['8x-', '16x', '32x', '48x', '64x', '128x', '256x', '512x+']
+
+const SHARED_CATEGORY_PROJECT_TYPES: Record<string, string> = {
+	plugin: 'mod',
+	datapack: 'mod',
+}
+
 const tags = useGeneratedState()
 const { formatMessage, locale } = useVIntl()
 
 const messages = defineMessages({
-	tagsTitle: {
+	title: {
 		id: 'project.settings.tags.title',
 		defaultMessage: 'Tags',
 	},
-	taggingImportanceDescription: {
-		id: 'project.settings.tags.tagging-importance-description',
-		defaultMessage:
-			'Accurate tagging is important to help people find your {type}. Make sure to select all tags that apply.',
-	},
 	uploadVersionFirst: {
 		id: 'project.settings.tags.upload-version-first',
 		defaultMessage: 'Please upload a version first in order to select tags!',
@@ -217,14 +77,18 @@ const messages = defineMessages({
 		defaultMessage: 'Featured tags',
 	},
 	featuredTagsDescription: {
-		id: 'project.settings.tags.featured-tags-description',
+		id: 'project.settings.tags.featured-tags-select-description',
 		defaultMessage:
-			'You can feature up to 3 of your most relevant tags. Other tags may be promoted to featured if you do not select all 3.',
+			'Select your most relevant tags. These are displayed before the rest of your tags.',
 	},
 	selectAtLeastOneCategory: {
 		id: 'project.settings.tags.select-at-least-one-category',
 		defaultMessage: 'Select at least one category in order to feature a category.',
 	},
+	featuredTagsRequired: {
+		id: 'project.settings.tags.featured-tags-required',
+		defaultMessage: 'You must have at least one featured tag.',
+	},
 	tooManyTagsServerHardWarning: {
 		id: 'project.settings.tags.too-many-tags-server-hard-warning',
 		defaultMessage:
@@ -252,72 +116,183 @@ const messages = defineMessages({
 	},
 })
 
+const groupTitleMessages: Record<string, MessageDescriptor> = defineMessages({
+	categories: {
+		id: 'project.settings.tags.group-title.categories',
+		defaultMessage: '{showType, select, yes {{types} categories} other {Categories}}',
+	},
+	features: {
+		id: 'project.settings.tags.group-title.features',
+		defaultMessage: '{showType, select, yes {{types} features} other {Features}}',
+	},
+	resolutions: {
+		id: 'project.settings.tags.group-title.resolutions',
+		defaultMessage: '{showType, select, yes {{types} resolutions} other {Resolutions}}',
+	},
+	'performance impact': {
+		id: 'project.settings.tags.group-title.performance-impact',
+		defaultMessage:
+			'{showType, select, yes {{types} performance impact} other {Performance impact}}',
+	},
+})
+
+const groupDescriptionMessages: Record<string, MessageDescriptor> = {
+	categories: messages.categoriesDescription,
+	features: messages.featuresDescription,
+	resolutions: messages.resolutionsDescription,
+	'performance impact': messages.performanceImpactDescription,
+}
+
 const { projectV2: project, projectV3, patchProject } = injectProjectPageContext()
 
-const formatCategoryName = (categoryName: string) => {
-	return formatCategory(formatMessage, categoryName)
-}
+const formatCategoryName = (categoryName: string) => formatCategory(formatMessage, categoryName)
 
 const isServerProject = computed(() => projectV3.value?.minecraft_server != null)
 
-const getTagIcon = (categoryName: string) => {
-	const iconName = isServerProject.value
-		? (SERVER_CATEGORY_ICON_MAP[categoryName] ?? categoryName)
-		: categoryName
-	return getCategoryIcon(iconName)
+const canSelectTags = computed(() => project.value.versions.length > 0 || isServerProject.value)
+
+const projectTypes = computed(() => {
+	if (isServerProject.value) {
+		return ['minecraft_java_server']
+	}
+
+	const types = projectV3.value?.project_types?.length
+		? projectV3.value.project_types
+		: [project.value.actualProjectType]
+
+	return sortProjectTypes(new Set(types))
+})
+
+const allCategories = computed(
+	() => sortedCategories(tags.value, formatCategoryName, locale.value) as Category[],
+)
+
+const projectTypesByCategoryList = computed(() => {
+	const lists = new Map<string, string[]>()
+	for (const projectType of projectTypes.value) {
+		const source = SHARED_CATEGORY_PROJECT_TYPES[projectType] ?? projectType
+		lists.set(source, [...(lists.get(source) ?? []), projectType])
+	}
+	return lists
+})
+
+const projectTypeListFormatter = computed(
+	() => new Intl.ListFormat(locale.value, { style: 'long', type: 'conjunction' }),
+)
+
+function formatProjectTypeName(type: string) {
+	return formatProjectTypeSentence(
+		formatMessage,
+		type === 'minecraft_java_server' ? 'server' : type,
+	)
 }
 
-const matchesProjectType = (x: Category) => {
-	if (isServerProject.value) {
-		return x.project_type === 'minecraft_java_server'
-	} else {
-		return x.project_type === project.value.actualProjectType
+function formatGroupTitle(header: string, types: string[]) {
+	const message = groupTitleMessages[header]
+	if (!message) {
+		return formatCategoryHeader(formatMessage, header)
 	}
+
+	const showType = projectTypes.value.length > 1
+	return formatMessage(message, {
+		showType: showType ? 'yes' : 'other',
+		types: showType
+			? capitalizeString(projectTypeListFormatter.value.format(types.map(formatProjectTypeName)))
+			: '',
+	})
+}
+
+function formatGroupDescription(header: string, types: string[]) {
+	const message = groupDescriptionMessages[header]
+	if (!message) {
+		return undefined
+	}
+
+	// listing out every type gets unwieldy, fallback to the generic term when there's more than one
+	return formatMessage(message, {
+		type: formatProjectTypeName(types.length > 1 ? 'project' : types[0]),
+	})
+}
+
+const categorySections = computed(() => {
+	const sections: {
+		categoryList: string
+		header: string
+		types: string[]
+		categories: Category[]
+	}[] = []
+
+	for (const [categoryList, types] of projectTypesByCategoryList.value) {
+		const byHeader = new Map<string, Category[]>()
+		for (const category of allCategories.value) {
+			if (category.project_type !== categoryList) continue
+			byHeader.set(category.header, [...(byHeader.get(category.header) ?? []), category])
+		}
+
+		for (const [header, categories] of byHeader) {
+			sections.push({
+				categoryList,
+				header,
+				types,
+				categories:
+					header === 'minecraft_server_features' ? withPokemonFirst(categories) : categories,
+			})
+		}
+	}
+
+	return sections
+})
+
+const categoryGroups = computed<CategoryGroup[]>(() =>
+	categorySections.value.map((section) => ({
+		id: `${section.categoryList}-${section.header}`,
+		title: formatGroupTitle(section.header, section.types),
+		description: formatGroupDescription(section.header, section.types),
+		categories: section.categories,
+	})),
+)
+
+function withPokemonFirst(categories: Category[]) {
+	return categories.slice().sort((a, b) => {
+		if (a.name === 'pokemon') return -1
+		if (b.name === 'pokemon') return 1
+		return 0
+	})
+}
+
+const availableTags = computed(() => [
+	...new Set(categorySections.value.flatMap((section) => section.categories.map((x) => x.name))),
+])
+
+function hasSameTags(a: string[], b: string[]) {
+	return a.length === b.length && a.every((tag) => b.includes(tag))
 }
 
 const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	() => ({
-		selectedTags: sortedCategories(tags.value, formatCategoryName, locale.value).filter(
-			(x: Category) =>
-				matchesProjectType(x) &&
-				(project.value.categories.includes(x.name) ||
-					project.value.additional_categories.includes(x.name)),
-		) as Category[],
-		featuredTags: sortedCategories(tags.value, formatCategoryName, locale.value).filter(
-			(x: Category) => matchesProjectType(x) && project.value.categories.includes(x.name),
-		) as Category[],
+		selectedTags: availableTags.value.filter(
+			(tag) =>
+				project.value.categories.includes(tag) || project.value.additional_categories.includes(tag),
+		),
+		featuredTags: availableTags.value.filter((tag) => project.value.categories.includes(tag)),
 	}),
 	async () => {
-		// Promote selected categories to featured if there are less than 3 featured
-		const newFeaturedTags = current.value.featuredTags.slice()
-		if (newFeaturedTags.length < 1 && current.value.selectedTags.length > newFeaturedTags.length) {
-			const nonFeaturedCategories = current.value.selectedTags.filter(
-				(x) => !newFeaturedTags.includes(x),
-			)
-			nonFeaturedCategories
-				.slice(0, Math.min(nonFeaturedCategories.length, 3 - newFeaturedTags.length))
-				.forEach((x) => newFeaturedTags.push(x))
+		if (!canSave.value) {
+			throw new Error('At least one tag must be featured')
 		}
 
-		// Convert selected and featured categories to backend-usable arrays
-		const categories = newFeaturedTags.map((x) => x.name)
-		const additionalCategories = current.value.selectedTags
-			.filter((x) => !newFeaturedTags.includes(x))
-			.map((x) => x.name)
+		const featuredTags = current.value.featuredTags
+		const additionalCategories = current.value.selectedTags.filter(
+			(tag) => !featuredTags.includes(tag),
+		)
 
 		const data: Record<string, string[]> = {}
 
-		if (
-			categories.length !== project.value.categories.length ||
-			categories.some((value) => !project.value.categories.includes(value))
-		) {
-			data.categories = categories
+		if (!hasSameTags(featuredTags, project.value.categories)) {
+			data.categories = featuredTags
 		}
 
-		if (
-			additionalCategories.length !== project.value.additional_categories.length ||
-			additionalCategories.some((value) => !project.value.additional_categories.includes(value))
-		) {
+		if (!hasSameTags(additionalCategories, project.value.additional_categories)) {
 			data.additional_categories = additionalCategories
 		}
 
@@ -327,31 +302,15 @@ const { saved, current, saving, hasChanges, reset, save } = useSavable(
 
 const { confirmLeaveModal } = usePageLeaveSafety(hasChanges)
 
-const categoryLists = computed(() => {
-	const lists: Record<string, Category[]> = {}
-	sortedCategories(tags.value, formatCategoryName, locale.value).forEach((x: Category) => {
-		if (matchesProjectType(x)) {
-			const header = x.header
-			if (!lists[header]) {
-				lists[header] = []
-			}
-			lists[header].push(x)
-		}
-	})
-	const featuresKey = 'minecraft_server_features'
-	if (lists[featuresKey]) {
-		lists[featuresKey].sort((a, b) => {
-			if (a.name === 'pokemon') return -1
-			if (b.name === 'pokemon') return 1
-			return 0
-		})
-	}
-	return lists
-})
+const isFeaturedLimitReached = computed(
+	() => current.value.featuredTags.length >= MAX_FEATURED_TAGS,
+)
+
+const canSave = computed(() => current.value.featuredTags.length > 0)
 
 const tooManyTagsWarning = computed(() => {
 	const tagCount = current.value.selectedTags.length
-	if (projectV3?.value?.minecraft_server != null) {
+	if (isServerProject.value) {
 		if (tagCount > 18) {
 			return formatMessage(messages.tooManyTagsServerHardWarning, { count: tagCount })
 		} else if (tagCount > 12) {
@@ -364,122 +323,140 @@ const tooManyTagsWarning = computed(() => {
 })
 
 const multipleResolutionTagsWarning = computed(() => {
-	if (project.value.actualProjectType !== 'resourcepack') return null
+	if (!projectTypes.value.includes('resourcepack')) return null
 
-	const resolutionTags = current.value.selectedTags.filter((tag) =>
-		['8x-', '16x', '32x', '48x', '64x', '128x', '256x', '512x+'].includes(tag.name),
-	)
+	const resolutionTags = current.value.selectedTags.filter((tag) => RESOLUTION_TAGS.includes(tag))
+	if (resolutionTags.length < 2) return null
 
-	if (resolutionTags.length > 1) {
-		const tagsList = resolutionTags
-			.map((t) => t.name)
+	return formatMessage(messages.multipleResolutionTagsWarning, {
+		count: resolutionTags.length,
+		tags: resolutionTags
 			.join(', ')
 			.replace('8x-', '8x or lower')
-			.replace('512x+', '512x or higher')
-		return formatMessage(messages.multipleResolutionTagsWarning, {
-			count: resolutionTags.length,
-			tags: tagsList,
-		})
-	}
-	return null
+			.replace('512x+', '512x or higher'),
+	})
 })
 
 const allTagsSelectedWarning = computed(() => {
-	const categoriesForProjectType = sortedCategories(
-		tags.value,
-		formatCategoryName,
-		locale.value,
-	).filter((x: Category) => x.project_type === project.value.actualProjectType)
-	const totalSelectedTags = current.value.selectedTags.length
-
 	if (
-		totalSelectedTags === categoriesForProjectType.length &&
-		categoriesForProjectType.length > 0
+		availableTags.value.length < 1 ||
+		availableTags.value.length < 1 ||
+		current.value.selectedTags.length !== availableTags.value.length
 	) {
-		return formatMessage(messages.allTagsSelectedWarning, {
-			count: categoriesForProjectType.length,
-		})
+		return null
 	}
-	return null
+
+	return formatMessage(messages.allTagsSelectedWarning, { count: availableTags.value.length })
 })
 
-const toggleCategory = (category: Category) => {
-	if (current.value.selectedTags.includes(category)) {
-		current.value.selectedTags = current.value.selectedTags.filter((x) => x !== category)
-		if (current.value.featuredTags.includes(category)) {
-			current.value.featuredTags = current.value.featuredTags.filter((x) => x !== category)
-		}
-	} else {
-		current.value.selectedTags = [...current.value.selectedTags, category]
+function toggleTagRaw(selection: string[], tag: string) {
+	if (selection.includes(tag)) {
+		return selection.filter((x) => x !== tag)
+	}
+	return availableTags.value.filter((x) => x === tag || selection.includes(x))
+}
+
+const toggleTag = (tag: string) => {
+	current.value.selectedTags = toggleTagRaw(current.value.selectedTags, tag)
+	if (!current.value.selectedTags.includes(tag)) {
+		current.value.featuredTags = current.value.featuredTags.filter((x) => x !== tag)
 	}
 }
 
-const toggleFeaturedCategory = (category: Category) => {
-	if (current.value.featuredTags.includes(category)) {
-		current.value.featuredTags = current.value.featuredTags.filter((x) => x !== category)
-	} else {
-		current.value.featuredTags = [...current.value.featuredTags, category]
-	}
+const toggleFeatured = (tag: string) => {
+	current.value.featuredTags = toggleTagRaw(current.value.featuredTags, tag)
 }
 </script>
+<template>
+	<div>
+		<ConfirmLeaveModal ref="confirmLeaveModal" />
+		<h2 class="mb-4 mt-0 text-2xl font-semibold">
+			{{ formatMessage(messages.title) }}
+		</h2>
+		<p v-if="!canSelectTags" class="known-errors">
+			{{ formatMessage(messages.uploadVersionFirst) }}
+		</p>
+		<div v-else class="flex flex-col gap-4">
+			<Admonition v-if="allTagsSelectedWarning" type="critical" :body="allTagsSelectedWarning" />
+			<Admonition v-else-if="tooManyTagsWarning" type="warning" :body="tooManyTagsWarning" />
+			<Admonition
+				v-if="multipleResolutionTagsWarning"
+				type="warning"
+				:body="multipleResolutionTagsWarning"
+			/>
 
-<style lang="scss" scoped>
-.label__title {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-card-xs);
-	margin-top: var(--spacing-card-bg);
+			<div
+				v-for="group in categoryGroups"
+				:key="group.id"
+				class="rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4"
+			>
+				<h3 class="mb-1 mt-0 text-base font-semibold text-contrast">
+					{{ group.title }}
+				</h3>
+				<p v-if="group.description" class="mb-3 mt-0 text-sm">
+					{{ group.description }}
+				</p>
+				<div class="grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4">
+					<Checkbox
+						v-for="category in group.categories"
+						:key="`${group.id}-${category.name}`"
+						:model-value="current.selectedTags.includes(category.name)"
+						:description="formatCategoryName(category.name)"
+						@update:model-value="toggleTag(category.name)"
+					>
+						<span aria-hidden="true">
+							<FormattedTag :tag="category.name" enforce-type="category" />
+						</span>
+					</Checkbox>
+				</div>
+			</div>
 
-	svg {
-		vertical-align: top;
-	}
-}
-.category-list {
-	column-count: 4;
-	column-gap: var(--spacing-card-lg);
-	margin-bottom: var(--spacing-card-md);
-
-	:deep(.category-selector) {
-		margin-bottom: 0.75rem;
-
-		.category-selector__label {
-			display: flex;
-			align-items: center;
-			text-align: left;
-
-			.icon {
-				height: 1rem;
-				width: 1rem;
-				margin-right: 0.25rem;
-				display: flex;
-				align-items: center;
-
-				svg {
-					width: 1rem;
-					height: 1rem;
-				}
-			}
-		}
-
-		span {
-			user-select: none;
-		}
-	}
-
-	@media only screen and (max-width: 1250px) {
-		column-count: 3;
-	}
-	@media only screen and (max-width: 1024px) {
-		column-count: 4;
-	}
-	@media only screen and (max-width: 960px) {
-		column-count: 3;
-	}
-	@media only screen and (max-width: 750px) {
-		column-count: 2;
-	}
-	@media only screen and (max-width: 530px) {
-		column-count: 1;
-	}
-}
-</style>
+			<div class="rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4">
+				<div class="mb-1 flex items-center gap-2">
+					<h3 class="m-0 text-base font-semibold text-contrast">
+						{{ formatMessage(messages.featuredTags) }}
+					</h3>
+					<TagItem
+						v-tooltip="
+							current.featuredTags.length === 0
+								? formatMessage(messages.featuredTagsRequired)
+								: undefined
+						"
+						:style="canSave ? undefined : { '--_color': 'var(--color-red)' }"
+					>
+						{{ current.featuredTags.length }}/{{ MAX_FEATURED_TAGS }}
+					</TagItem>
+				</div>
+				<p class="mb-3 mt-0 text-sm">
+					{{ formatMessage(messages.featuredTagsDescription) }}
+				</p>
+				<p v-if="current.selectedTags.length < 1" class="m-0 text-sm text-secondary">
+					{{ formatMessage(messages.selectAtLeastOneCategory) }}
+				</p>
+				<div v-else class="grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4">
+					<Checkbox
+						v-for="name in current.selectedTags"
+						:key="`featured-${name}`"
+						:model-value="current.featuredTags.includes(name)"
+						:description="formatCategoryName(name)"
+						:disabled="isFeaturedLimitReached && !current.featuredTags.includes(name)"
+						@update:model-value="toggleFeatured(name)"
+					>
+						<span aria-hidden="true">
+							<FormattedTag :tag="name" enforce-type="category" />
+						</span>
+					</Checkbox>
+				</div>
+			</div>
+		</div>
+		<UnsavedChangesPopup
+			:original="saved"
+			:modified="current"
+			:saving="saving"
+			:can-save="canSave"
+			:save-disabled-reason="messages.featuredTagsRequired"
+			@reset="reset"
+			@save="save"
+		/>
+	</div>
+</template>
diff --git a/apps/frontend/src/pages/collection/[collection].vue b/apps/frontend/src/pages/collection/[collection].vue
index 167ce44566..355c6abc24 100644
--- a/apps/frontend/src/pages/collection/[collection].vue
+++ b/apps/frontend/src/pages/collection/[collection].vue
@@ -425,6 +425,7 @@ import {
 	ProjectCardList,
 	RadioButtons,
 	SidebarCard,
+	sortProjectTypes,
 	StyledInput,
 	TeleportOverflowMenu,
 	useCompactNumber,
@@ -769,7 +770,7 @@ const projectTypes = computed(() => {
 		projects.value?.map((project) => project?.project_type).filter((x) => x !== undefined) || [],
 	)
 	projectSet.delete('project')
-	return Array.from(projectSet)
+	return sortProjectTypes(projectSet)
 })
 
 function getProjectTypeSentenceMessage(type) {
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index 740318d10a..88368fc6e0 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -236,6 +236,7 @@ import {
 	ProjectCard,
 	ProjectCardList,
 	SidebarCard,
+	sortProjectTypes,
 	useCompactNumber,
 	useVIntl,
 } from '@modrinth/ui'
@@ -376,15 +377,14 @@ const isInvited = computed(() => {
 })
 
 const projectTypes = computed(() => {
-	const obj: Record<string, boolean> = {}
+	const types = new Set<string>()
 
 	for (const project of projects.value ?? []) {
-		obj[project.project_types[0] ?? 'project'] = true
+		const type = project.project_types[0] ?? 'project'
+		if (type !== 'project') types.add(type)
 	}
 
-	delete obj.project
-
-	return Object.keys(obj)
+	return sortProjectTypes(types)
 })
 function isProjectServer(project: ProjectV3): boolean {
 	return project.minecraft_server != null
@@ -494,15 +494,12 @@ const navLinks = computed(() => [
 		label: formatMessage(commonMessages.allProjectType),
 		href: `/organization/${organization.value?.slug}`,
 	},
-	...projectTypes.value
-		.map((x) => {
-			return {
-				label: formatMessage(getProjectTypeMessage(x as ProjectType, true)),
-				href: `/organization/${organization.value?.slug}/${x}s`,
-			}
-		})
-		.slice()
-		.sort((a, b) => a.label.localeCompare(b.label)),
+	...projectTypes.value.map((x) => {
+		return {
+			label: formatMessage(getProjectTypeMessage(x as ProjectType, true)),
+			href: `/organization/${organization.value?.slug}/${x}s`,
+		}
+	}),
 ])
 
 async function copyId() {
diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue
index c997b965a5..5c3bab9260 100644
--- a/packages/ui/src/components/base/UnsavedChangesPopup.vue
+++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue
@@ -15,20 +15,25 @@ const emit = defineEmits<{
 	(e: 'reset' | 'save', event: MouseEvent): void
 }>()
 
+type SaveDisabledReason = MessageDescriptor | string
+
 const props = withDefaults(
 	defineProps<{
 		canReset?: boolean
+		canSave?: boolean
 		original: T
 		modified: Partial<T>
 		saving?: boolean
 		text?: MessageDescriptor | string
 		saveLabel?: MessageDescriptor | string
 		savingLabel?: MessageDescriptor | string
+		saveDisabledReason?: SaveDisabledReason | SaveDisabledReason[]
 		saveIcon?: Component
 		inline?: boolean
 	}>(),
 	{
 		canReset: true,
+		canSave: true,
 		saving: false,
 		text: () =>
 			defineMessage({
@@ -37,6 +42,7 @@ const props = withDefaults(
 			}),
 		saveLabel: () => commonMessages.saveButton,
 		savingLabel: () => commonMessages.savingButton,
+		saveDisabledReason: undefined,
 		saveIcon: SaveIcon,
 		inline: false,
 	},
@@ -50,6 +56,22 @@ function localizeIfPossible(message: MessageDescriptor | string) {
 	return typeof message === 'string' ? message : formatMessage(message)
 }
 
+const saveDisabled = computed(() => props.saving || !props.canSave)
+
+const saveDisabledTooltip = computed(() => {
+	if (!saveDisabled.value || props.saving || !props.saveDisabledReason) {
+		return undefined
+	}
+
+	const reasons = (
+		Array.isArray(props.saveDisabledReason) ? props.saveDisabledReason : [props.saveDisabledReason]
+	).map(localizeIfPossible)
+
+	return reasons.length > 0
+		? { content: reasons.join('\n'), popperClass: 'unsaved-changes-save-tooltip' }
+		: undefined
+})
+
 const actionBar = ref<InstanceType<typeof FloatingActionBar> | null>(null)
 
 function nudge(): void {
@@ -66,11 +88,32 @@ defineExpose({ nudge })
 			<Button v-if="canReset" type="quiet" :disabled="saving" @click="(e) => emit('reset', e)">
 				<HistoryIcon /> {{ formatMessage(commonMessages.resetButton) }}
 			</Button>
-			<Button type="colored" color="brand" :disabled="saving" @click="(e) => emit('save', e)">
-				<SpinnerIcon v-if="saving" class="animate-spin" />
-				<component :is="saveIcon" v-else />
-				{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
-			</Button>
+			<span
+				v-tooltip="saveDisabledTooltip"
+				class="flex"
+				:class="{ 'cursor-not-allowed': saveDisabled }"
+			>
+				<Button
+					type="colored"
+					color="brand"
+					:disabled="saveDisabled"
+					:class="{ 'pointer-events-none': saveDisabled }"
+					@click="(e) => emit('save', e)"
+				>
+					<SpinnerIcon v-if="saving" class="animate-spin" />
+					<component :is="saveIcon" v-else />
+					{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
+				</Button>
+			</span>
 		</div>
 	</FloatingActionBar>
 </template>
+
+<style lang="scss">
+/* unscoped because floating-vue teleports the tooltip outside of scope */
+.v-popper__popper.v-popper--theme-tooltip.unsaved-changes-save-tooltip .v-popper__inner {
+	max-width: 22rem;
+	white-space: pre-line;
+	line-height: 1.4;
+}
+</style>
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index 608994520e..bd16975459 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -496,7 +496,7 @@ import {
 	injectPageContext,
 	injectTags,
 } from '#ui/providers'
-import { commonMessages, getProjectTypeTitleMessage } from '#ui/utils'
+import { commonMessages, getProjectTypeTitleMessage, sortProjectTypes } from '#ui/utils'
 
 import { blockedUsersQueryKey, injectUserProfile } from './providers'
 import {
@@ -840,7 +840,7 @@ const projectTypes = computed(() => {
 	const types = new Set(projects.value.map((project) => project.resolvedProjectType))
 	if (collections.value.length > 0) types.add('collection')
 	types.delete('project')
-	return [...types]
+	return sortProjectTypes(types)
 })
 
 const navLinks = computed(() => {
@@ -851,15 +851,13 @@ const navLinks = computed(() => {
 			label: formatMessage(commonMessages.allProjectType),
 			href: profilePath,
 		},
-		...projectTypes.value
-			.map((projectType) => ({
-				label:
-					projectType === 'collection'
-						? formatMessage(messages.collectionsLabel)
-						: formatMessage(getProjectTypeTitleMessage(projectType), { count: 2 }),
-				href: `${profilePath}/${projectType}s`,
-			}))
-			.sort((first, second) => first.label.localeCompare(second.label)),
+		...projectTypes.value.map((projectType) => ({
+			label:
+				projectType === 'collection'
+					? formatMessage(messages.collectionsLabel)
+					: formatMessage(getProjectTypeTitleMessage(projectType), { count: 2 }),
+			href: `${profilePath}/${projectType}s`,
+		})),
 	]
 })
 
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 6aeb20c1a9..217dd867e4 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -6,6 +6,7 @@ export * from './file-extensions'
 export * from './game-modes'
 export * from './loaders'
 export * from './notices'
+export * from './project-types'
 export * from './savable'
 export * from './search'
 export * from './server-content-installing'
diff --git a/packages/ui/src/utils/project-types.ts b/packages/ui/src/utils/project-types.ts
new file mode 100644
index 0000000000..447532156a
--- /dev/null
+++ b/packages/ui/src/utils/project-types.ts
@@ -0,0 +1,31 @@
+export const PROJECT_TYPE_ORDER = [
+	'mod',
+	'resourcepack',
+	'datapack',
+	'shader',
+	'modpack',
+	'plugin',
+	'server',
+	'collection',
+] as const
+
+export type OrderedProjectType = (typeof PROJECT_TYPE_ORDER)[number]
+
+const PROJECT_TYPE_SORT_ALIASES: Record<string, string> = {
+	minecraft_java_server: 'server',
+	shaderpack: 'shader',
+}
+
+export function getProjectTypeSortIndex(type: string): number {
+	const normalized = PROJECT_TYPE_SORT_ALIASES[type] ?? type
+	const index = (PROJECT_TYPE_ORDER as readonly string[]).indexOf(normalized)
+	return index === -1 ? PROJECT_TYPE_ORDER.length : index
+}
+
+export function compareProjectTypes(a: string, b: string): number {
+	return getProjectTypeSortIndex(a) - getProjectTypeSortIndex(b)
+}
+
+export function sortProjectTypes<T extends string>(types: Iterable<T>): T[] {
+	return [...types].sort(compareProjectTypes)
+}
diff --git a/packages/ui/src/utils/search.ts b/packages/ui/src/utils/search.ts
index 5a189fa92e..8e06f062ce 100644
--- a/packages/ui/src/utils/search.ts
+++ b/packages/ui/src/utils/search.ts
@@ -93,10 +93,10 @@ export type ProjectType =
 
 const ALL_PROJECT_TYPES: ProjectType[] = [
 	'mod',
-	'modpack',
 	'resourcepack',
-	'shader',
 	'datapack',
+	'shader',
+	'modpack',
 	'plugin',
 	'server',
 ]

From bca5303ae34eef7080aa2bd55481fe000172aaa4 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:19:56 -0700
Subject: [PATCH 2/7] improve popout animations (#7040)

---
 packages/ui/src/components/base/Combobox.vue  |   8 +-
 .../src/components/base/DropdownFilterBar.vue | 378 +++++++++---------
 .../ui/src/components/base/MultiSelect.vue    |   7 +-
 .../base/buttons/TeleportOverflowMenu.vue     |  24 +-
 .../base/buttons/TeleportPopoutMenu.vue       |   9 +-
 .../files-tab/components/FileContextMenu.vue  |  11 +-
 packages/ui/src/styles/tailwind-utilities.css |  23 ++
 7 files changed, 230 insertions(+), 230 deletions(-)

diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 4a0c6bcd0a..750238a9e1 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -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'"
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 90163795c1..796b8907f7 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -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])
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index f765bd90e6..7d17408333 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -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"
diff --git a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
index f219a88910..8f0aec56f2 100644
--- a/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue
@@ -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"
diff --git a/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue b/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
index 16574bfec9..8fc2ff4abb 100644
--- a/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
+++ b/packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue
@@ -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"
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
index 6bc8da0469..340c136540 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
@@ -1,18 +1,11 @@
 <template>
 	<Teleport to="#teleports">
-		<Transition
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="transform scale-75 opacity-0"
-			enter-to-class="transform scale-100 opacity-100"
-			leave-active-class="transition duration-125 ease-in"
-			leave-from-class="transform scale-100 opacity-100"
-			leave-to-class="transform scale-75 opacity-0"
-		>
+		<Transition name="floating-expand">
 			<div
 				v-if="visible"
 				ref="menuRef"
 				class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
-				:style="{ left: `${position.x}px`, top: `${position.y}px` }"
+				:style="{ left: `${position.x}px`, top: `${position.y}px`, transformOrigin: 'top left' }"
 				role="menu"
 				tabindex="-1"
 				@mousedown.stop
diff --git a/packages/ui/src/styles/tailwind-utilities.css b/packages/ui/src/styles/tailwind-utilities.css
index adc17e4fd2..c32ef00996 100644
--- a/packages/ui/src/styles/tailwind-utilities.css
+++ b/packages/ui/src/styles/tailwind-utilities.css
@@ -1,3 +1,26 @@
+:root {
+	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.floating-expand-enter-from,
+.floating-expand-leave-to {
+	opacity: 0;
+	scale: 0.9 0.3;
+}
+
+.floating-expand-enter-to,
+.floating-expand-leave-from {
+	opacity: 1;
+}
+
+.floating-expand-enter-active,
+.floating-expand-leave-active {
+	transition:
+		opacity 0.125s var(--ease-out-expo),
+		scale 0.125s var(--ease-out-expo);
+	transform-origin: top;
+}
+
 @layer utilities {
 	.heading-xl {
 		@apply m-0 text-xl font-semibold leading-none text-contrast;

From 2e8aaa31beb84ea1d5069011198f6a488e44014d Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:20:05 -0700
Subject: [PATCH 3/7] change admin edit role modal to edit user (#7035)

change edit role modal to edit user
---
 apps/app-frontend/src/pages/User.vue          |   6 +
 apps/frontend/src/pages/user/[user].vue       |   3 +
 .../ui/src/components/user/UserPageHeader.vue |  12 +-
 .../components/edit-user-modal.vue            | 310 ++++++++++++++++++
 .../layouts/shared/user-profile/layout.vue    | 107 +-----
 .../user-profile/providers/user-profile.ts    |   4 +-
 packages/ui/src/locales/de-CH/index.json      |  15 -
 packages/ui/src/locales/de-DE/index.json      |  15 -
 packages/ui/src/locales/en-US/index.json      |  15 -
 packages/ui/src/locales/es-419/index.json     |  15 -
 packages/ui/src/locales/fr-FR/index.json      |  15 -
 packages/ui/src/locales/hu-HU/index.json      |  15 -
 packages/ui/src/locales/it-IT/index.json      |  15 -
 packages/ui/src/locales/ko-KR/index.json      |  15 -
 packages/ui/src/locales/nl-NL/index.json      |   6 -
 packages/ui/src/locales/pl-PL/index.json      |  15 -
 packages/ui/src/locales/pt-BR/index.json      |  15 -
 packages/ui/src/locales/ru-RU/index.json      |  15 -
 packages/ui/src/locales/sv-SE/index.json      |  15 -
 packages/ui/src/locales/uk-UA/index.json      |  15 -
 packages/ui/src/locales/zh-CN/index.json      |  15 -
 packages/ui/src/locales/zh-TW/index.json      |  15 -
 22 files changed, 330 insertions(+), 343 deletions(-)
 create mode 100644 packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue

diff --git a/apps/app-frontend/src/pages/User.vue b/apps/app-frontend/src/pages/User.vue
index e04c0da3fa..daf79890c2 100644
--- a/apps/app-frontend/src/pages/User.vue
+++ b/apps/app-frontend/src/pages/User.vue
@@ -52,6 +52,8 @@ import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 
 import {
 	block_user,
+	change_user_avatar,
+	delete_user_avatar,
 	get_blocked_users,
 	get_user_collections,
 	get_user_organizations,
@@ -119,6 +121,10 @@ const userProfile = provideUserProfile({
 	getOrganizations: get_user_organizations,
 	getCollections: get_user_collections,
 	patchUser: patch_user,
+	changeAvatar: async (userId, file, extension) => {
+		await change_user_avatar(userId, new Uint8Array(await file.arrayBuffer()), extension)
+	},
+	deleteAvatar: delete_user_avatar,
 	getBlockedUsers: get_blocked_users,
 	blockUser: block_user,
 	unblockUser: unblock_user,
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 3962e8ebcd..a4e01bc453 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -34,6 +34,9 @@ const userProfile = provideUserProfile({
 	getOrganizations: (userId) => client.labrinth.users_v2.getOrganizations(userId),
 	getCollections: (userId) => client.labrinth.users_v2.getCollections(userId),
 	patchUser: (userId, patch) => client.labrinth.users_v2.patch(userId, patch),
+	changeAvatar: (userId, file, extension) =>
+		client.labrinth.users_v2.changeIcon(userId, file, extension),
+	deleteAvatar: (userId) => client.labrinth.users_v2.deleteIcon(userId),
 	getBlockedUsers: () => client.labrinth.blocked_users_v3.list(),
 	blockUser: (userId) => client.labrinth.blocked_users_v3.block(userId),
 	unblockUser: (userId) => client.labrinth.blocked_users_v3.unblock(userId),
diff --git a/packages/ui/src/components/user/UserPageHeader.vue b/packages/ui/src/components/user/UserPageHeader.vue
index 84a552cd00..a99f3eadaf 100644
--- a/packages/ui/src/components/user/UserPageHeader.vue
+++ b/packages/ui/src/components/user/UserPageHeader.vue
@@ -136,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',
@@ -220,7 +216,7 @@ const emit = defineEmits<{
 	toggleAffiliate: []
 	openInfo: []
 	openAnalytics: []
-	editRole: []
+	editUser: []
 }>()
 
 const { formatMessage } = useVIntl()
@@ -306,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,
 	},
diff --git a/packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue b/packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue
new file mode 100644
index 0000000000..64e3e27043
--- /dev/null
+++ b/packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue
@@ -0,0 +1,310 @@
+<template>
+	<NewModal ref="modal" header="Edit user" :closable="!isSaving">
+		<div class="flex w-[28rem] flex-col gap-4">
+			<div class="flex flex-col gap-2.5">
+				<span class="text-lg font-semibold text-contrast">Profile picture</span>
+				<div class="flex items-center gap-4">
+					<Avatar
+						:src="displayedAvatarUrl"
+						size="md"
+						circle
+						:alt="form.username || user.username"
+					/>
+					<div class="flex flex-col gap-2">
+						<FileButton
+							:max-size="262144"
+							:prompt="formatMessage(commonMessages.uploadImageButton)"
+							accept="image/png,image/jpeg,image/gif,image/webp"
+							size="md"
+							:disabled="isSaving"
+							@change="showAvatarPreview"
+						>
+							<UploadIcon aria-hidden="true" />
+						</FileButton>
+						<Button
+							v-if="avatarUrl && !pendingAvatarDeletion"
+							native-type="button"
+							size="md"
+							:disabled="isSaving"
+							@click="removeAvatar"
+						>
+							<TrashIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.removeImageButton) }}
+						</Button>
+						<Button
+							v-if="avatarFile || pendingAvatarDeletion"
+							native-type="button"
+							size="md"
+							:disabled="isSaving"
+							@click="resetAvatar"
+						>
+							<UndoIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.resetButton) }}
+						</Button>
+					</div>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<label class="text-lg font-semibold text-contrast" for="admin-edit-username">
+					{{ formatMessage(commonMessages.usernameLabel) }}
+				</label>
+				<div class="flex items-center gap-2">
+					<StyledInput
+						id="admin-edit-username"
+						v-model="form.username"
+						class="w-full"
+						:error="form.username.length > 39"
+						:disabled="isSaving"
+					/>
+					<span
+						v-if="form.username.length >= 30"
+						class="shrink-0 text-secondary"
+						:class="{ 'text-red': form.username.length > 39 }"
+					>
+						{{ form.username.length }}/39
+					</span>
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<label class="text-lg font-semibold text-contrast" for="admin-edit-bio">Bio</label>
+				<StyledInput
+					id="admin-edit-bio"
+					v-model="form.bio"
+					multiline
+					:error="form.bio.length > 160"
+					:disabled="isSaving"
+				/>
+				<div class="text-secondary" :class="{ 'text-red': form.bio.length > 160 }">
+					{{ form.bio.length }}/160
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-2.5">
+				<span class="text-lg font-semibold text-contrast">Role</span>
+				<Combobox
+					v-model="form.role"
+					:options="roleOptions"
+					placeholder="Select a role"
+					:disabled="isSaving"
+				/>
+			</div>
+
+			<div class="flex justify-end gap-2">
+				<Button native-type="button" :disabled="isSaving" @click="cancel">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="brand"
+					native-type="button"
+					:disabled="!canSave || isSaving"
+					@click="save"
+				>
+					<template v-if="isSaving">
+						<SpinnerIcon class="animate-spin" />
+						{{ formatMessage(commonMessages.savingButton) }}
+					</template>
+					<template v-else>
+						<SaveIcon />
+						{{ formatMessage(commonMessages.saveChangesButton) }}
+					</template>
+				</Button>
+			</div>
+		</div>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { SaveIcon, SpinnerIcon, TrashIcon, UndoIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue'
+import { useRouter } from 'vue-router'
+
+import Avatar from '#ui/components/base/Avatar.vue'
+import { Button, FileButton } from '#ui/components/base/buttons'
+import Combobox from '#ui/components/base/Combobox.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { useVIntl } from '#ui/composables'
+import { injectNotificationManager } from '#ui/providers'
+import { commonMessages } from '#ui/utils'
+
+import { injectUserProfile } from '../providers'
+
+const props = defineProps<{
+	user: Labrinth.Users.v3.User
+	userId: string
+}>()
+
+const userProfile = injectUserProfile()
+const notificationManager = injectNotificationManager()
+const queryClient = useQueryClient()
+const router = useRouter()
+const { formatMessage } = useVIntl()
+
+const modal = ref<InstanceType<typeof NewModal> | null>(null)
+const isSaving = ref(false)
+const form = ref<{
+	username: string
+	bio: string
+	role: Labrinth.Users.v3.Role | null
+}>({
+	username: '',
+	bio: '',
+	role: null,
+})
+const avatarUrl = ref<string | null>(null)
+const avatarFile = shallowRef<File | null>(null)
+const avatarPreviewUrl = ref<string | null>(null)
+const pendingAvatarDeletion = ref(false)
+
+const roleOptions = [
+	{ value: 'developer', label: 'None' },
+	{ value: 'moderator', label: 'Content Moderator' },
+	{ value: 'admin', label: 'Admin' },
+] satisfies { value: Labrinth.Users.v3.Role; label: string }[]
+
+const displayedAvatarUrl = computed(() => {
+	if (avatarPreviewUrl.value) {
+		return avatarPreviewUrl.value
+	}
+	if (pendingAvatarDeletion.value) {
+		return null
+	}
+	return avatarUrl.value
+})
+
+const hasChanges = computed(() => {
+	return (
+		form.value.username !== props.user.username ||
+		form.value.bio !== (props.user.bio ?? '') ||
+		form.value.role !== props.user.role ||
+		Boolean(avatarFile.value || pendingAvatarDeletion.value)
+	)
+})
+
+const canSave = computed(() => {
+	return (
+		hasChanges.value &&
+		form.value.username.length > 0 &&
+		form.value.username.length <= 39 &&
+		form.value.bio.length <= 160 &&
+		form.value.role !== null
+	)
+})
+
+function revokeAvatarPreview(): void {
+	if (avatarPreviewUrl.value) {
+		URL.revokeObjectURL(avatarPreviewUrl.value)
+		avatarPreviewUrl.value = null
+	}
+}
+
+function syncFromUser(): void {
+	revokeAvatarPreview()
+	form.value = {
+		username: props.user.username,
+		bio: props.user.bio ?? '',
+		role: props.user.role,
+	}
+	avatarUrl.value = props.user.avatar_url ?? null
+	avatarFile.value = null
+	pendingAvatarDeletion.value = false
+}
+
+function showAvatarPreview(files: File[]): void {
+	const file = files[0]
+	if (!file) {
+		return
+	}
+
+	revokeAvatarPreview()
+	avatarFile.value = file
+	avatarPreviewUrl.value = URL.createObjectURL(file)
+	pendingAvatarDeletion.value = false
+}
+
+function removeAvatar(): void {
+	revokeAvatarPreview()
+	avatarFile.value = null
+	pendingAvatarDeletion.value = true
+}
+
+function resetAvatar(): void {
+	revokeAvatarPreview()
+	avatarFile.value = null
+	pendingAvatarDeletion.value = false
+}
+
+function show(): void {
+	syncFromUser()
+	modal.value?.show()
+}
+
+function hide(): void {
+	modal.value?.hide()
+}
+
+function cancel(): void {
+	syncFromUser()
+	hide()
+}
+
+async function save(): Promise<void> {
+	if (!form.value.role || !canSave.value || isSaving.value) {
+		return
+	}
+	const nextUsername = form.value.username
+	const usernameChanged = nextUsername !== props.user.username
+	isSaving.value = true
+	try {
+		const patch: Partial<Pick<Labrinth.Users.v3.User, 'bio' | 'role' | 'username'>> = {}
+		if (usernameChanged) {
+			patch.username = nextUsername
+		}
+		if (form.value.bio !== (props.user.bio ?? '')) {
+			patch.bio = form.value.bio
+		}
+		if (form.value.role !== props.user.role) {
+			patch.role = form.value.role
+		}
+		if (Object.keys(patch).length > 0) {
+			await userProfile.patchUser(props.user.id, patch)
+		}
+
+		if (pendingAvatarDeletion.value) {
+			await userProfile.deleteAvatar(props.user.id)
+		} else if (avatarFile.value) {
+			const extension = avatarFile.value.type.split('/').at(-1)
+			if (!extension) throw new Error('The selected image does not have a valid file type.')
+			await userProfile.changeAvatar(props.user.id, avatarFile.value, extension)
+		}
+
+		await queryClient.invalidateQueries({ queryKey: ['user', props.userId] })
+		hide()
+
+		if (usernameChanged) {
+			await router.replace(`/user/${encodeURIComponent(nextUsername)}`)
+		}
+	} catch {
+		notificationManager.addNotification({
+			type: 'error',
+			title: 'Failed to update user',
+			text: 'An error occurred while updating this user. Please try again.',
+		})
+	} finally {
+		isSaving.value = false
+	}
+}
+
+onBeforeUnmount(revokeAvatarPreview)
+
+defineExpose({
+	show,
+	hide,
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/user-profile/layout.vue b/packages/ui/src/layouts/shared/user-profile/layout.vue
index bd16975459..8ffe648c35 100644
--- a/packages/ui/src/layouts/shared/user-profile/layout.vue
+++ b/packages/ui/src/layouts/shared/user-profile/layout.vue
@@ -37,41 +37,7 @@
 			</template>
 		</NewModal>
 
-		<NewModal
-			v-if="variant === 'web'"
-			ref="editRoleModal"
-			:header="formatMessage(messages.editRoleButton)"
-		>
-			<div class="flex w-80 flex-col gap-4">
-				<Combobox
-					v-model="selectedRole"
-					:options="roleOptions"
-					:placeholder="formatMessage(messages.selectRolePlaceholder)"
-				/>
-				<div class="flex justify-end gap-2">
-					<Button native-type="button" @click="cancelRoleEdit">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</Button>
-					<Button
-						type="colored"
-						color="brand"
-						native-type="button"
-						:disabled="!selectedRole || selectedRole === user.role || isSavingRole"
-						@click="saveRoleEdit"
-					>
-						<template v-if="isSavingRole">
-							<SpinnerIcon class="animate-spin" />
-							{{ formatMessage(messages.savingLabel) }}
-						</template>
-						<template v-else>
-							<SaveIcon />
-							{{ formatMessage(commonMessages.saveChangesButton) }}
-						</template>
-					</Button>
-				</div>
-			</div>
-		</NewModal>
+		<EditUserModal v-if="variant === 'web'" ref="editUserModal" :user="user" :user-id="userId" />
 
 		<NewModal
 			v-if="variant === 'web' && isStaffViewing"
@@ -226,7 +192,7 @@
 					@open-analytics="
 						openPath(`/dashboard/analytics?user=${encodeURIComponent(user.username)}`)
 					"
-					@edit-role="openRoleEditModal"
+					@edit-user="editUserModal?.show()"
 				>
 					<template v-if="isModrinthUser" #summary>
 						<IntlFormatted :message-id="messages.officialAccountBio">
@@ -460,7 +426,6 @@ import {
 	LibraryIcon,
 	LinkIcon,
 	LockIcon,
-	SaveIcon,
 	SpinnerIcon,
 	XIcon,
 } from '@modrinth/assets'
@@ -477,7 +442,6 @@ import Admonition from '#ui/components/base/Admonition.vue'
 import AutoLink from '#ui/components/base/AutoLink.vue'
 import Avatar from '#ui/components/base/Avatar.vue'
 import { Button } from '#ui/components/base/buttons'
-import Combobox from '#ui/components/base/Combobox.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
@@ -498,6 +462,7 @@ import {
 } from '#ui/providers'
 import { commonMessages, getProjectTypeTitleMessage, sortProjectTypes } from '#ui/utils'
 
+import EditUserModal from './components/edit-user-modal.vue'
 import { blockedUsersQueryKey, injectUserProfile } from './providers'
 import {
 	hasActivePride26Midas,
@@ -571,18 +536,6 @@ const messages = defineMessages({
 		id: 'profile.collection.projects-count',
 		defaultMessage: '{count, plural, one {# project} other {# projects}}',
 	},
-	savingLabel: {
-		id: 'profile.label.saving',
-		defaultMessage: 'Saving...',
-	},
-	editRoleButton: {
-		id: 'profile.button.edit-role',
-		defaultMessage: 'Edit role',
-	},
-	selectRolePlaceholder: {
-		id: 'profile.role.select-placeholder',
-		defaultMessage: 'Select a role',
-	},
 	userDetailsTitle: {
 		id: 'profile.details.title',
 		defaultMessage: 'User details',
@@ -692,14 +645,6 @@ const messages = defineMessages({
 		defaultMessage:
 			'The official user account of Modrinth. Get support at <support-link></support-link> or via email at <email></email>',
 	},
-	roleUpdateErrorTitle: {
-		id: 'profile.role.update-error-title',
-		defaultMessage: 'Failed to update role',
-	},
-	roleUpdateErrorDescription: {
-		id: 'profile.role.update-error-description',
-		defaultMessage: 'An error occurred while updating the user role. Please try again.',
-	},
 	blockButton: {
 		id: 'profile.button.block',
 		defaultMessage: 'Block',
@@ -1043,35 +988,15 @@ async function retryQueries(): Promise<void> {
 }
 
 const userDetailsModal = ref<ModalRef | null>(null)
-const editRoleModal = ref<ModalRef | null>(null)
+const editUserModal = ref<InstanceType<typeof EditUserModal> | null>(null)
 const blockUserModal = ref<ModalRef | null>(null)
-const selectedRole = ref<Labrinth.Users.v3.Role | null>(null)
-const isSavingRole = ref(false)
 const isBlockingUser = ref(false)
 const isUnblockingUser = ref(false)
-const roleOptions = [
-	{ value: 'developer', label: 'Developer' },
-	{ value: 'moderator', label: 'Moderator' },
-	{ value: 'admin', label: 'Admin' },
-] satisfies { value: Labrinth.Users.v3.Role; label: string }[]
-
-watch(
-	user,
-	(currentUser) => {
-		selectedRole.value = currentUser?.role ?? null
-	},
-	{ immediate: true },
-)
 
 function openUserDetails(): void {
 	userDetailsModal.value?.show()
 }
 
-function openRoleEditModal(): void {
-	selectedRole.value = user.value?.role ?? null
-	editRoleModal.value?.show()
-}
-
 async function handleBlockAction(): Promise<void> {
 	if (!auth.user.value) {
 		await auth.requestSignIn(route.fullPath)
@@ -1148,11 +1073,6 @@ async function unblockCurrentUser(): Promise<void> {
 	}
 }
 
-function cancelRoleEdit(): void {
-	selectedRole.value = user.value?.role ?? null
-	editRoleModal.value?.hide()
-}
-
 async function toggleAffiliate(): Promise<void> {
 	if (!user.value) return
 	await userProfile.patchUser(user.value.id, {
@@ -1160,23 +1080,4 @@ async function toggleAffiliate(): Promise<void> {
 	})
 	await queryClient.invalidateQueries({ queryKey: ['user', props.userId] })
 }
-
-async function saveRoleEdit(): Promise<void> {
-	if (!user.value || !selectedRole.value || selectedRole.value === user.value.role) return
-
-	isSavingRole.value = true
-	try {
-		await userProfile.patchUser(user.value.id, { role: selectedRole.value })
-		await queryClient.invalidateQueries({ queryKey: ['user', props.userId] })
-		editRoleModal.value?.hide()
-	} catch {
-		notificationManager.addNotification({
-			type: 'error',
-			title: formatMessage(messages.roleUpdateErrorTitle),
-			text: formatMessage(messages.roleUpdateErrorDescription),
-		})
-	} finally {
-		isSavingRole.value = false
-	}
-}
 </script>
diff --git a/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts b/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts
index 6314ece5c6..58270661bd 100644
--- a/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts
+++ b/packages/ui/src/layouts/shared/user-profile/providers/user-profile.ts
@@ -9,8 +9,10 @@ export interface UserProfileContext {
 	getCollections: (userId: string) => Promise<Labrinth.Collections.Collection[]>
 	patchUser: (
 		userId: string,
-		patch: Partial<Pick<Labrinth.Users.v3.User, 'badges' | 'role'>>,
+		patch: Partial<Pick<Labrinth.Users.v3.User, 'badges' | 'bio' | 'role' | 'username'>>,
 	) => Promise<void>
+	changeAvatar: (userId: string, file: Blob, extension: string) => Promise<void>
+	deleteAvatar: (userId: string) => Promise<void>
 	getBlockedUsers: () => Promise<Labrinth.BlockedUsers.v3.BlockedUserId[]>
 	blockUser: (userId: string) => Promise<void>
 	unblockUser: (userId: string) => Promise<void>
diff --git a/packages/ui/src/locales/de-CH/index.json b/packages/ui/src/locales/de-CH/index.json
index 4620db4fa0..a5632aaf9a 100644
--- a/packages/ui/src/locales/de-CH/index.json
+++ b/packages/ui/src/locales/de-CH/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Projekt erstellen"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Rolle bearbeiten"
-  },
   "profile.button.info": {
     "defaultMessage": "Nutzerdetails anzeigen"
   },
@@ -2981,24 +2978,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {Projekt} other {Projekte}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Speichert..."
-  },
   "profile.official-account": {
     "defaultMessage": "Offizielles Modrinth-Konto"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Das offizielle Benutzerkonto von Modrinth. Erhalte Hilfe unter <support-link></support-link> oder per E-Mail unter <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Eine Rolle auswählen"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Beim Aktualisieren dieser Nutzerrolle ist ein Fehler aufgetreten. Bitte versuche es erneut."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Rolle konnte nicht aktualisiert werden"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Beim Freigeben dieses Nutzers ist ein Fehler aufgetreten. Bitte versuche es erneut."
   },
diff --git a/packages/ui/src/locales/de-DE/index.json b/packages/ui/src/locales/de-DE/index.json
index e49817eab2..d57bdd0cb8 100644
--- a/packages/ui/src/locales/de-DE/index.json
+++ b/packages/ui/src/locales/de-DE/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Projekt erstellen"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Rolle bearbeiten"
-  },
   "profile.button.info": {
     "defaultMessage": "Nutzerdetails anzeigen"
   },
@@ -2981,24 +2978,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {Projekt} other {Projekte}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Speichert..."
-  },
   "profile.official-account": {
     "defaultMessage": "Offizielles Modrinth-Konto"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Das offizielle Benutzerkonto von Modrinth. Erhalte Hilfe unter <support-link></support-link> oder per E-Mail unter <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Eine Rolle auswählen"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Beim Aktualisieren dieser Nutzerrolle ist ein Fehler aufgetreten. Bitte versuche es erneut."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Rolle konnte nicht aktualisiert werden"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Beim Freigeben dieses Nutzers ist ein Fehler aufgetreten. Bitte versuche es erneut."
   },
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index b1704ca9cc..029827877e 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Create a project"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Edit role"
-  },
   "profile.button.info": {
     "defaultMessage": "View user details"
   },
@@ -2996,24 +2993,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {project} other {projects}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Saving..."
-  },
   "profile.official-account": {
     "defaultMessage": "Official Modrinth account"
   },
   "profile.official-account.bio": {
     "defaultMessage": "The official user account of Modrinth. Get support at <support-link></support-link> or via email at <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Select a role"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "An error occurred while updating the user role. Please try again."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Failed to update role"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "An error occurred while unblocking this user. Please try again."
   },
diff --git a/packages/ui/src/locales/es-419/index.json b/packages/ui/src/locales/es-419/index.json
index d72d86a709..ab32fc08d8 100644
--- a/packages/ui/src/locales/es-419/index.json
+++ b/packages/ui/src/locales/es-419/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Crear un proyecto"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Editar rol"
-  },
   "profile.button.info": {
     "defaultMessage": "Ver detalles del usuario"
   },
@@ -2996,24 +2993,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {proyecto} other {proyectos}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Guardando..."
-  },
   "profile.official-account": {
     "defaultMessage": "Cuenta oficial de Modrinth"
   },
   "profile.official-account.bio": {
     "defaultMessage": "La cuenta oficial de Modrinth. Consigue ayuda en <support-link></support-link> o escríbenos a través de email: <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Selecciona un rol"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Ocurrió un error al actualizar el rol del usuario. Por favor inténtalo otra vez."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Error al actualizar el rol"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Ocurrió un error al desbloquear a este usuario. Por favor inténtalo otra vez."
   },
diff --git a/packages/ui/src/locales/fr-FR/index.json b/packages/ui/src/locales/fr-FR/index.json
index 3a73d5ac67..0f641ef1d2 100644
--- a/packages/ui/src/locales/fr-FR/index.json
+++ b/packages/ui/src/locales/fr-FR/index.json
@@ -2891,9 +2891,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Créer un projet"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Modifier le rôle"
-  },
   "profile.button.info": {
     "defaultMessage": "Voir les détails de l'utilisateur"
   },
@@ -2975,24 +2972,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural,one {projet}other {projets}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Enregistrement..."
-  },
   "profile.official-account": {
     "defaultMessage": "Compte Modrinth officiel"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Le compte utilisateur officiel de Modrinth. Obtenez de l’aide via <support-link></support-link> ou par e-mail à <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Sélectionner un rôle"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Une erreur s'est produite lors de la mise à jour du rôle utilisateur. Veuillez réessayer."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Impossible de mettre à jour le rôle"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Une erreur s'est produite pendant le déblocage de cet utilisateur. Veuillez réessayer."
   },
diff --git a/packages/ui/src/locales/hu-HU/index.json b/packages/ui/src/locales/hu-HU/index.json
index 56b16f5eb5..5e9d85aa35 100644
--- a/packages/ui/src/locales/hu-HU/index.json
+++ b/packages/ui/src/locales/hu-HU/index.json
@@ -2534,9 +2534,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Projekt létrehozása"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Szerep szerkesztése"
-  },
   "profile.button.info": {
     "defaultMessage": "Felhasználói adatok megtekintése"
   },
@@ -2609,24 +2606,12 @@
   "profile.label.project-count": {
     "defaultMessage": "projekt"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Mentés..."
-  },
   "profile.official-account": {
     "defaultMessage": "Hivatalos Modrinth-fiók"
   },
   "profile.official-account.bio": {
     "defaultMessage": "A Modrinth hivatalos felhasználói fiókja. Támogatás a <support-link></support-link> oldalon kaphatsz vagy e-mailben a <email></email> címen."
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Válassz egy rangot"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Hiba történt a felhasználói szerepkör frissítése közben. Kérlek próbáld meg újra."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "A szerepkör frissítése nem sikerült"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Hiba történt a felhasználó letiltásának feloldása közben. Kérlek próbáld meg újra."
   },
diff --git a/packages/ui/src/locales/it-IT/index.json b/packages/ui/src/locales/it-IT/index.json
index 8c99b7d979..76b765ac73 100644
--- a/packages/ui/src/locales/it-IT/index.json
+++ b/packages/ui/src/locales/it-IT/index.json
@@ -2855,9 +2855,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Crea un progetto"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Modifica ruolo"
-  },
   "profile.button.info": {
     "defaultMessage": "Mostra info utente"
   },
@@ -2954,24 +2951,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {progetto} other {progetti}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Salvataggio..."
-  },
   "profile.official-account": {
     "defaultMessage": "Account Modrinth ufficiale"
   },
   "profile.official-account.bio": {
     "defaultMessage": "L'account ufficiale di Modrinth. Ricevi assistenza presso <support-link></support-link> o tramite mail presso <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Seleziona il ruolo"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Sì è verificato un errore nel salvataggio del ruolo utente. Riprova più tardi."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Impossibile salvare il ruolo"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Sì è verificato un errore nello sbloccare l'utente. Riprova più tardi."
   },
diff --git a/packages/ui/src/locales/ko-KR/index.json b/packages/ui/src/locales/ko-KR/index.json
index cb845c6eef..7ce577da9e 100644
--- a/packages/ui/src/locales/ko-KR/index.json
+++ b/packages/ui/src/locales/ko-KR/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "프로젝트 만들기"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "역할 수정"
-  },
   "profile.button.info": {
     "defaultMessage": "사용자 상세 정보 보기"
   },
@@ -2981,24 +2978,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, other {프로젝트}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "저장 중..."
-  },
   "profile.official-account": {
     "defaultMessage": "공식 Modrinth 계정"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Modrinth의 공식 사용자 계정입니다. <support-link></support-link> 또는 <email></email> 을 통해 문의해 주세요"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "역할 선택"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "사용자 역할을 업데이트하는 동안 오류가 발생했습니다. 다시 시도해 주세요."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "역할 업데이트 실패"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "이 사용자의 차단을 해제하는 동안 오류가 발생했습니다. 다시 시도해 주세요."
   },
diff --git a/packages/ui/src/locales/nl-NL/index.json b/packages/ui/src/locales/nl-NL/index.json
index 456e7988e7..40df10dea6 100644
--- a/packages/ui/src/locales/nl-NL/index.json
+++ b/packages/ui/src/locales/nl-NL/index.json
@@ -2858,9 +2858,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Een project aanmaken"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Rol bewerken"
-  },
   "profile.button.info": {
     "defaultMessage": "Gebruikersgegevens bekijken"
   },
@@ -2939,9 +2936,6 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {project} other {projecten}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Opslaan..."
-  },
   "profile.official-account": {
     "defaultMessage": "Officieel Modrinth-account"
   },
diff --git a/packages/ui/src/locales/pl-PL/index.json b/packages/ui/src/locales/pl-PL/index.json
index a602e1f73c..579d0fdf09 100644
--- a/packages/ui/src/locales/pl-PL/index.json
+++ b/packages/ui/src/locales/pl-PL/index.json
@@ -2885,9 +2885,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Utwórz projekt"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Edytuj rolę"
-  },
   "profile.button.info": {
     "defaultMessage": "Otwórz szczegóły użytkownika"
   },
@@ -2960,24 +2957,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {projekt} few {projekty} other {projektów}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Zapisywanie..."
-  },
   "profile.official-account": {
     "defaultMessage": "Oficjalne konto Modrinth"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Oficjalne konto Modrinth. Otrzymaj wsparcie na stronie <support-link></support-link> lub poprzez e-mail <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Wybierz rolę"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Wystąpił błąd podczas ustawiania roli tego użytkownika. Spróbuj ponownie później."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Nie udało się zaktualizować roli"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Wystąpił błąd podczas odblokowywania tego użytkownika. Spróbuj ponownie później."
   },
diff --git a/packages/ui/src/locales/pt-BR/index.json b/packages/ui/src/locales/pt-BR/index.json
index 454a67c26c..8d76406a29 100644
--- a/packages/ui/src/locales/pt-BR/index.json
+++ b/packages/ui/src/locales/pt-BR/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Criar projeto"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Editar cargo"
-  },
   "profile.button.info": {
     "defaultMessage": "Ver detalhes do usuário"
   },
@@ -2996,24 +2993,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {projeto} other {projetos}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Salvando..."
-  },
   "profile.official-account": {
     "defaultMessage": "Conta oficial do Modrinth"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Conta oficial do Modrinth. Obtenha suporte em<support-link></support-link> ou por e-mail via <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Selecione um cargo"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Ocorreu um erro ao atualizar o cargo do usuário. Tente novamente."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Falha ao atualizar cargo"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Ocorreu um erro ao desbloquear este usuário. Tente novamente."
   },
diff --git a/packages/ui/src/locales/ru-RU/index.json b/packages/ui/src/locales/ru-RU/index.json
index 24430a0f10..7a2e25906f 100644
--- a/packages/ui/src/locales/ru-RU/index.json
+++ b/packages/ui/src/locales/ru-RU/index.json
@@ -2810,9 +2810,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Создать проект"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Настройка роли"
-  },
   "profile.button.info": {
     "defaultMessage": "Посмотреть подробности"
   },
@@ -2909,24 +2906,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {проект} few {проекта} other {проектов}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Сохранение..."
-  },
   "profile.official-account": {
     "defaultMessage": "Официальный аккаунт Modrinth"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Официальный аккаунт Modrinth. Связь с поддержкой: <support-link></support-link> или по почте <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Выберите роль"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Произошла ошибка при обновлении роли. Попробуйте снова."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Не удалось обновить роль"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Произошла ошибка при разблокировке пользователя. Попробуйте снова."
   },
diff --git a/packages/ui/src/locales/sv-SE/index.json b/packages/ui/src/locales/sv-SE/index.json
index 93cd6523dc..84cda49a99 100644
--- a/packages/ui/src/locales/sv-SE/index.json
+++ b/packages/ui/src/locales/sv-SE/index.json
@@ -2558,9 +2558,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Skapa ett projekt"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Ändra roll"
-  },
   "profile.button.info": {
     "defaultMessage": "Visa användardetaljer"
   },
@@ -2627,21 +2624,9 @@
   "profile.label.project-count": {
     "defaultMessage": "Projekt"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Sparar..."
-  },
   "profile.official-account": {
     "defaultMessage": "Officiellt Modrinth-konto"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Välj en roll"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Ett fel inträffade medan användarrollen uppdaterades. Vänligen försök igen."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Misslyckades att uppdatera rollen"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Ett fel inträffade under avblockeringen av den här användaren. Vänligen försök igen."
   },
diff --git a/packages/ui/src/locales/uk-UA/index.json b/packages/ui/src/locales/uk-UA/index.json
index a4850a6d7d..cdb5b752eb 100644
--- a/packages/ui/src/locales/uk-UA/index.json
+++ b/packages/ui/src/locales/uk-UA/index.json
@@ -2852,9 +2852,6 @@
   "profile.button.create-project": {
     "defaultMessage": "Створити проєкт"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "Зміна ролі"
-  },
   "profile.button.info": {
     "defaultMessage": "Деталі про користувача"
   },
@@ -2945,24 +2942,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, one {проєкт} few {проєкти} many {проєктів} other {проєктів}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "Збереження..."
-  },
   "profile.official-account": {
     "defaultMessage": "Офіційний обліковий запис Modrinth"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Офіційний обліковий запис Modrinth. Зв'язатися з підтримкою можна за <support-link></support-link> або через електронну пошту за <email></email>"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "Виберіть роль"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "Виникла помилка під час оновлення ролі користувача. Спробуйте знову."
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "Не вдалося оновити роль"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "Виникла помилка під час розблокування користувача. Спробуйте знову."
   },
diff --git a/packages/ui/src/locales/zh-CN/index.json b/packages/ui/src/locales/zh-CN/index.json
index 229117c170..eaf3fee149 100644
--- a/packages/ui/src/locales/zh-CN/index.json
+++ b/packages/ui/src/locales/zh-CN/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "创建项目"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "编辑角色"
-  },
   "profile.button.info": {
     "defaultMessage": "查看用户详情"
   },
@@ -2996,24 +2993,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, other {项目}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "正在保存……"
-  },
   "profile.official-account": {
     "defaultMessage": "官方 Modrinth 账户"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Modrinth 的官方用户账号。可通过 <support-link></support-link> 或电子邮件 <email></email> 获取支持"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "选择角色"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "更新用户角色时发生了错误。请重试。"
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "更新角色失败"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "解除屏蔽该用户时发生了错误。请重试。"
   },
diff --git a/packages/ui/src/locales/zh-TW/index.json b/packages/ui/src/locales/zh-TW/index.json
index c42ded253b..bcc2570137 100644
--- a/packages/ui/src/locales/zh-TW/index.json
+++ b/packages/ui/src/locales/zh-TW/index.json
@@ -2897,9 +2897,6 @@
   "profile.button.create-project": {
     "defaultMessage": "建立專案"
   },
-  "profile.button.edit-role": {
-    "defaultMessage": "編輯身分"
-  },
   "profile.button.info": {
     "defaultMessage": "檢視使用者詳細資訊"
   },
@@ -2996,24 +2993,12 @@
   "profile.label.project-count": {
     "defaultMessage": "{count, plural, other {個專案}}"
   },
-  "profile.label.saving": {
-    "defaultMessage": "正在儲存..."
-  },
   "profile.official-account": {
     "defaultMessage": "Modrinth 官方帳號"
   },
   "profile.official-account.bio": {
     "defaultMessage": "Modrinth 的官方使用者帳號。請至 <support-link></support-link> 取得支援，或透過電子郵件 <email></email> 聯絡客服團隊"
   },
-  "profile.role.select-placeholder": {
-    "defaultMessage": "選擇身分"
-  },
-  "profile.role.update-error-description": {
-    "defaultMessage": "更新使用者身分時發生錯誤，請再試一次。"
-  },
-  "profile.role.update-error-title": {
-    "defaultMessage": "無法更新身分"
-  },
   "profile.unblock-user.error-description": {
     "defaultMessage": "解除封鎖使用者時發生錯誤，請再試一次。"
   },

From 9181c155e0d189ddd4ac964752fe3779460d6d78 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:20:13 -0700
Subject: [PATCH 4/7] fix license field showing on server projects (#7031)

* fix license field showing on server projects

* random commit to trigger CI hopefully?
---
 README.md                                    | 2 +-
 apps/frontend/src/pages/[type]/[project].vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7b4f90ef20..0def9bf509 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 
 ## Modrinth Monorepo
 
-Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines of Code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge%3Fformat%3Dhuman&logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
+Welcome to the Modrinth Monorepo, the primary codebase for the Modrinth web interface and app. It contains ![Lines of code](https://img.shields.io/endpoint?url=https://loctopus.creeperkatze.dev/github/modrinth/code/badge%3Fformat%3Dhuman&logoColor=white&color=black&label=) lines of code and has ![Contributors](https://img.shields.io/github/contributors/Modrinth/code?color=black&label=) contributors!
 
 If you're not a developer and you've stumbled upon this repository, you can access the web interface on the [Modrinth website](https://modrinth.com) and download the latest release of the app [here](https://modrinth.com/app).
 
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 6b2b092f30..25f5022078 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -469,6 +469,7 @@
 					<ProjectSidebarDetails
 						:project="project"
 						:link-target="$external()"
+						:hide-license="isServerProject"
 						:show-followers="isServerProject"
 						class="card flex-card"
 					/>

From b0394de1644fbf5e251f1031d62bb9a4e562fea2 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:20:31 -0700
Subject: [PATCH 5/7] add loading states for creators + server details (#7033)

* add loading states for creators + server details

* prepr
---
 apps/frontend/src/pages/[type]/[project].vue  | 19 ++++-
 .../project/ProjectSidebarCreators.vue        | 81 +++++++++++--------
 .../project/ProjectSidebarServerInfo.vue      | 23 +++++-
 .../server/ServerModpackContentCard.vue       |  5 ++
 4 files changed, 92 insertions(+), 36 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 25f5022078..fe34c4ec58 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -432,7 +432,8 @@
 
 				<div class="normal-page__sidebar">
 					<ProjectSidebarServerInfo
-						v-if="isServerProject && serverDataLoaded"
+						v-if="isServerProject"
+						:loading="!serverDataLoaded"
 						:project-v3="projectV3"
 						:tags="tags"
 						:required-content="serverRequiredContent"
@@ -462,6 +463,7 @@
 					<ProjectSidebarCreators
 						:organization="organization"
 						:members="members"
+						:loading="creatorsLoading"
 						:org-link="(slug) => `/organization/${slug}`"
 						:user-link="(username) => `/user/${username}`"
 						class="card flex-card"
@@ -1023,7 +1025,11 @@ watch(serverModpackVersionId, (versionId) => {
 })
 
 // Members
-const { data: allMembersRaw, error: _membersError } = useQuery({
+const {
+	data: allMembersRaw,
+	error: _membersError,
+	isPending: membersPending,
+} = useQuery({
 	queryKey: computed(() => ['project', projectId.value, 'members']),
 	queryFn: () => client.labrinth.projects_v3.getMembers(projectId.value),
 	staleTime: STALE_TIME,
@@ -1074,7 +1080,7 @@ const {
 
 // Organization
 // Only fetch organization if project belongs to one
-const { data: organizationRaw } = useQuery({
+const { data: organizationRaw, isPending: organizationPending } = useQuery({
 	queryKey: computed(() => ['project', projectId.value, 'organization']),
 	queryFn: () => client.labrinth.projects_v3.getOrganization(projectId.value),
 	staleTime: STALE_TIME,
@@ -1085,6 +1091,13 @@ const { data: organizationRaw } = useQuery({
 // Return null when the project no longer belongs to an organization.
 const organization = computed(() => (projectRaw.value?.organization ? organizationRaw.value : null))
 
+const creatorsLoading = computed(
+	() =>
+		!projectRaw.value ||
+		membersPending.value ||
+		(!!projectRaw.value.organization && organizationPending.value),
+)
+
 const { data: thread } = useQuery({
 	queryKey: computed(() => ['thread', projectRaw.value?.thread_id]),
 	queryFn: () => client.labrinth.threads_v3.getThread(projectRaw.value.thread_id),
diff --git a/packages/ui/src/components/project/ProjectSidebarCreators.vue b/packages/ui/src/components/project/ProjectSidebarCreators.vue
index 0e58d1b997..1eab4a2d36 100644
--- a/packages/ui/src/components/project/ProjectSidebarCreators.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCreators.vue
@@ -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',
diff --git a/packages/ui/src/components/project/ProjectSidebarServerInfo.vue b/packages/ui/src/components/project/ProjectSidebarServerInfo.vue
index f025f93afa..0c6767b788 100644
--- a/packages/ui/src/components/project/ProjectSidebarServerInfo.vue
+++ b/packages/ui/src/components/project/ProjectSidebarServerInfo.vue
@@ -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>(), {
diff --git a/packages/ui/src/components/project/server/ServerModpackContentCard.vue b/packages/ui/src/components/project/server/ServerModpackContentCard.vue
index 1d25e4b6c0..e448286df5 100644
--- a/packages/ui/src/components/project/server/ServerModpackContentCard.vue
+++ b/packages/ui/src/components/project/server/ServerModpackContentCard.vue
@@ -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()

From 5ef999bf8aff6660921118fe2df7a52a3727224a Mon Sep 17 00:00:00 2001
From: ThatGravyBoat <gravy@thatgravyboat.tech>
Date: Fri, 7 Aug 2026 18:04:03 -0230
Subject: [PATCH 6/7] feat: requested moderation and tech review changes
 (#7019)

* feat: requested moderation and tech review changes

* chore: run prepr

* chore: run prepr

---------

Signed-off-by: ThatGravyBoat <gravy@thatgravyboat.tech>
---
 .../ui/moderation/ModerationTechRevCard.vue   | 77 +++++++++++++++----
 .../moderation/settings/ModerationKeybind.vue | 10 ++-
 .../settings/ModerationKeybinds.vue           |  2 +-
 .../[type]/[project]/version/[version].vue    | 18 +++++
 .../src/pages/[type]/[project]/versions.vue   | 18 +++++
 .../moderation/technical-review/[project].vue | 29 +++++++
 .../moderation/technical-review/index.vue     | 45 +++++++++++
 packages/moderation/src/data/keybinds.ts      | 12 +++
 packages/moderation/src/data/settings.ts      |  7 ++
 packages/moderation/src/types/keybinds.ts     | 25 +++++-
 10 files changed, 223 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
index 0baa5864a0..e6f5b3f9a4 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue
@@ -856,6 +856,10 @@ async function updateDetailStatus(
 
 	updatingDetails.add(detailId)
 
+	const previousMarkedCount = selectedFile.value
+		? getFileMarkedCount(selectedFile.value)
+		: undefined
+
 	try {
 		await updateIssueDetails([{ detail_id: detailId, verdict }])
 
@@ -880,7 +884,7 @@ async function updateDetailStatus(
 		if (verdict !== 'pending' && selectedFile.value) {
 			const markedCount = getFileMarkedCount(selectedFile.value)
 			const totalCount = getFileDetailCount(selectedFile.value)
-			if (markedCount === totalCount) {
+			if (previousMarkedCount != markedCount && markedCount === totalCount) {
 				backToFileList()
 			}
 		}
@@ -938,6 +942,10 @@ async function updateGlobalDetailStatus(
 
 	updatingGlobalDetailKeys.add(detail.key)
 
+	const previousMarkedCount = selectedFile.value
+		? getFileMarkedCount(selectedFile.value)
+		: undefined
+
 	try {
 		await updateGlobalIssueDetail(detail.key, verdict)
 
@@ -958,7 +966,7 @@ async function updateGlobalDetailStatus(
 		if (verdict !== 'pending' && selectedFile.value) {
 			const markedCount = getFileMarkedCount(selectedFile.value)
 			const totalCount = getFileDetailCount(selectedFile.value)
-			if (markedCount === totalCount) {
+			if (previousMarkedCount != markedCount && markedCount === totalCount) {
 				backToFileList()
 			}
 		}
@@ -1355,8 +1363,10 @@ const canSubmitReview = computed(() => {
 	if (totalIssues === 0) return true
 	return allIssuesResolved.value
 })
+const hasSubmittedPassReview = ref(false)
 
 async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
+	hasSubmittedPassReview.value = verdict === 'safe'
 	const editorContent = threadViewRef.value?.getReplyContent() || ''
 
 	let message: string | undefined
@@ -1523,13 +1533,39 @@ function copyId() {
 
 			<div class="h-px w-full bg-surface-5"></div>
 
-			<NavTabs
-				mode="local"
-				:links="navTabsLinks"
-				:active-index="activeTabIndex"
-				class="bg-surface-3! shadow-none!"
-				@tab-click="handleTabClick"
-			/>
+			<div class="flex flex-row justify-between">
+				<NavTabs
+					mode="local"
+					:links="navTabsLinks"
+					:active-index="activeTabIndex"
+					class="bg-surface-3! shadow-none!"
+					@tab-click="handleTabClick"
+				/>
+
+				<div v-if="selectedFile" class="flex flex-row items-end gap-2">
+					<ButtonLink
+						v-tooltip="`Download`"
+						type="outlined"
+						target="_blank"
+						:href="selectedFile.download_url"
+						:download="selectedFile.file_name"
+						class="!bg-surface-2"
+						aria-label="Download"
+					>
+						<DownloadIcon aria-hidden="true" />
+					</ButtonLink>
+					<ButtonLink
+						v-tooltip="`Open in Slicer`"
+						type="outlined"
+						target="_blank"
+						:href="`https://slicer.run/?url=${encodeURIComponent(selectedFile.download_url)}`"
+						class="!bg-surface-2"
+						aria-label="Open in Slicer"
+					>
+						<ExternalIcon aria-hidden="true" /> Open
+					</ButtonLink>
+				</div>
+			</div>
 		</div>
 
 		<div class="border-t border-surface-3 bg-surface-2">
@@ -1552,10 +1588,16 @@ function copyId() {
 						>
 							<template #additionalActions>
 								<Button
-									v-tooltip="!canSubmitReview ? 'There are still pending flags!' : undefined"
+									v-tooltip="
+										!canSubmitReview
+											? 'There are still pending flags!'
+											: hasSubmittedPassReview
+												? 'Project already passed!'
+												: undefined
+									"
 									type="colored"
 									color="brand"
-									:disabled="!canSubmitReview"
+									:disabled="!canSubmitReview || hasSubmittedPassReview"
 									@click="handleSubmitReview('safe')"
 								>
 									<ShieldCheckIcon /> Pass
@@ -1683,7 +1725,16 @@ function copyId() {
 							:download="file.file_name"
 							tabindex="0"
 						>
-							<DownloadIcon /> Download
+							<DownloadIcon />
+						</ButtonLink>
+						<ButtonLink
+							v-tooltip="`Open in Slicer`"
+							type="outlined"
+							target="_blank"
+							:href="`https://slicer.run/?url=${encodeURIComponent(file.download_url)}`"
+							aria-label="Open in Slicer"
+						>
+							<ExternalIcon aria-hidden="true" /> Open
 						</ButtonLink>
 					</div>
 				</div>
@@ -2063,7 +2114,7 @@ function copyId() {
 										v-tooltip="`Copy code`"
 										type="quiet"
 										:label="`Copy code`"
-										class="absolute right-2 top-2 border-[1px]"
+										class="!absolute right-2 top-2 border-[1px]"
 										@click="copyToClipboard(getClassDecompiledSource(classItem)!, classItem.key)"
 									>
 										<CopyIcon v-if="!showCopyFeedback.get(classItem.key)" />
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue
index b9dd7a5320..377c658252 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue
@@ -2,9 +2,13 @@
 	<div>
 		<span class="flex flex-row items-center gap-2 text-sm text-secondary">
 			<GlobeIcon
-				v-if="props.global"
+				v-if="props.scope === 'project'"
 				v-tooltip="'Can be used without the checklist open if setting enabled.'"
 			/>
+			<ShieldCheckIcon
+				v-if="props.scope === 'tech-review'"
+				v-tooltip="'Used within the tech review pages'"
+			/>
 			{{ props.title }}
 			<IconButton
 				type="quiet"
@@ -45,14 +49,14 @@
 </template>
 
 <script setup lang="ts">
-import { GlobeIcon, RotateCounterClockwiseIcon } from '@modrinth/assets'
+import { GlobeIcon, RotateCounterClockwiseIcon, ShieldCheckIcon } from '@modrinth/assets'
 import { type KeybindDefinition, toKeybindDefinition } from '@modrinth/moderation'
 import { IconButton } from '@modrinth/ui'
 import { onUnmounted } from 'vue'
 
 const props = defineProps<{
 	title: string
-	global: boolean
+	scope: string
 	definitions: KeybindDefinition[]
 	default: KeybindDefinition[]
 	onChange: (definitions: KeybindDefinition[]) => void
diff --git a/apps/frontend/src/components/ui/moderation/settings/ModerationKeybinds.vue b/apps/frontend/src/components/ui/moderation/settings/ModerationKeybinds.vue
index 35ae3a472c..2ef3e51d83 100644
--- a/apps/frontend/src/components/ui/moderation/settings/ModerationKeybinds.vue
+++ b/apps/frontend/src/components/ui/moderation/settings/ModerationKeybinds.vue
@@ -12,7 +12,7 @@ const keybinds = useModerationKeybinds()
 				v-for="[id, keybind] in keybinds"
 				:key="id"
 				:title="keybind.description"
-				:global="keybind.scope === 'project'"
+				:scope="keybind.scope"
 				:definitions="keybind.keybind"
 				:default="keybind.defaultKeybind"
 				:on-change="
diff --git a/apps/frontend/src/pages/[type]/[project]/version/[version].vue b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
index 25fd9b2851..193aeb89f7 100644
--- a/apps/frontend/src/pages/[type]/[project]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[project]/version/[version].vue
@@ -144,6 +144,22 @@
 							<DownloadIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.downloadButton) }}
 						</ButtonLink>
+						<ButtonLink
+							v-if="
+								!!primaryFile?.url &&
+								isStaff(auth.user) &&
+								modSettings.get(moderationSettings.General.SlicerButtonInVersions)
+							"
+							v-tooltip="`Open in Slicer`"
+							type="quiet"
+							target="_blank"
+							:href="`https://slicer.run/?url=${encodeURIComponent(primaryFile?.url)}`"
+							class="!bg-button-bg"
+							aria-label="Open in Slicer"
+						>
+							<ExternalIcon aria-hidden="true" />
+							Open
+						</ButtonLink>
 						<ButtonLink
 							v-for="file in promotedFiles.filter(
 								(x) =>
@@ -502,6 +518,7 @@ import {
 	TrashIcon,
 	XIcon,
 } from '@modrinth/assets'
+import { moderationSettings } from '@modrinth/moderation'
 import {
 	Admonition,
 	Button,
@@ -545,6 +562,7 @@ const emit = defineEmits<{
 const data = useNuxtApp()
 const route = useNativeRoute()
 const router = useRouter()
+const modSettings = useModerationSettings()
 const auth = await useAuth()
 const tags = useGeneratedState()
 const client = injectModrinthClient()
diff --git a/apps/frontend/src/pages/[type]/[project]/versions.vue b/apps/frontend/src/pages/[type]/[project]/versions.vue
index 48bec39fc7..adefb0711f 100644
--- a/apps/frontend/src/pages/[type]/[project]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[project]/versions.vue
@@ -53,6 +53,21 @@
 					>
 						<DownloadIcon aria-hidden="true" />
 					</ButtonLink>
+					<ButtonLink
+						v-if="
+							!!getPrimaryFile(version) &&
+							isStaff(auth.user) &&
+							modSettings.get(moderationSettings.General.SlicerButtonInVersions)
+						"
+						v-tooltip="`Open in Slicer`"
+						type="quiet"
+						target="_blank"
+						:href="`https://slicer.run/?url=${encodeURIComponent(createDownloadUrl(version))}`"
+						class="!w-9 !rounded-full !px-0 hover:!bg-button-bg"
+						aria-label="Open in Slicer"
+					>
+						<ExternalIcon aria-hidden="true" />
+					</ButtonLink>
 					<TeleportOverflowMenu
 						v-if="currentMember"
 						type="quiet"
@@ -268,6 +283,7 @@ import {
 	SpinnerIcon,
 	TrashIcon,
 } from '@modrinth/assets'
+import { moderationSettings } from '@modrinth/moderation'
 import {
 	ButtonLink,
 	ConfirmModal,
@@ -277,6 +293,7 @@ import {
 	ProjectPageVersions,
 	TeleportOverflowMenu,
 } from '@modrinth/ui'
+import { isStaff } from '@modrinth/utils'
 import { onMounted, useTemplateRef, watch } from 'vue'
 
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
@@ -289,6 +306,7 @@ const { createProjectDownloadUrl, updateVersionsFilterContext } = useCdnDownload
 
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
+const modSettings = useModerationSettings()
 const auth = await useAuth()
 
 const client = injectModrinthClient()
diff --git a/apps/frontend/src/pages/moderation/technical-review/[project].vue b/apps/frontend/src/pages/moderation/technical-review/[project].vue
index 6f04ae4823..e3f413c26b 100644
--- a/apps/frontend/src/pages/moderation/technical-review/[project].vue
+++ b/apps/frontend/src/pages/moderation/technical-review/[project].vue
@@ -12,6 +12,7 @@ import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevC
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const route = useRoute()
+const keybinds = useModerationKeybinds()
 
 const projectId = String(useRouteId('project'))
 
@@ -269,6 +270,34 @@ function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
 function refetch() {
 	queryClient.invalidateQueries({ queryKey: ['tech-review-project-report', projectId] })
 }
+
+function handleKeybinds(event: KeyboardEvent) {
+	keybinds.value.handle(event, {
+		scope: 'tech-review',
+		actions: {
+			goToTop: () => {
+				window.scrollTo({
+					top: 0,
+					behavior: 'smooth',
+				})
+			},
+			goToBottom: () => {
+				window.scrollTo({
+					top: document.body.scrollHeight,
+					behavior: 'smooth',
+				})
+			},
+		},
+	})
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', handleKeybinds)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleKeybinds)
+})
 </script>
 
 <template>
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
index 23877ace6b..b46ed59776 100644
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/index.vue
@@ -32,6 +32,7 @@ useHead({ title: 'Tech review queue - Modrinth' })
 
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
+const keybinds = useModerationKeybinds()
 
 const currentPage = ref(1)
 const API_PAGE_SIZE = 50
@@ -571,6 +572,50 @@ watch(totalPages, (pages) => {
 // 		complete: 20,
 // 	}
 // })
+
+const CARD_BOTTOM_OFFSET = 210
+
+function handleKeybinds(event: KeyboardEvent) {
+	keybinds.value.handle(event, {
+		scope: 'tech-review',
+		actions: {
+			goToTop: () => {
+				Array.from(cardRefs.values())
+					.filter((card) => card.getBoundingClientRect().top <= 0)
+					.reduce((prev, curr) =>
+						curr.getBoundingClientRect().top > prev.getBoundingClientRect().top ? curr : prev,
+					)
+					?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+			},
+			goToBottom: () => {
+				const nearestCard = Array.from(cardRefs.values())
+					.filter((card) => card.getBoundingClientRect().bottom >= window.innerHeight)
+					.reduce((prev, curr) =>
+						curr.getBoundingClientRect().top < prev.getBoundingClientRect().top ? curr : prev,
+					)
+
+				if (nearestCard) {
+					window.scrollTo({
+						behavior: 'smooth',
+						top:
+							nearestCard.getBoundingClientRect().bottom +
+							window.scrollY -
+							window.innerHeight +
+							CARD_BOTTOM_OFFSET,
+					})
+				}
+			},
+		},
+	})
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', handleKeybinds)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleKeybinds)
+})
 </script>
 
 <template>
diff --git a/packages/moderation/src/data/keybinds.ts b/packages/moderation/src/data/keybinds.ts
index 25b2994374..d4eb0fab10 100644
--- a/packages/moderation/src/data/keybinds.ts
+++ b/packages/moderation/src/data/keybinds.ts
@@ -115,6 +115,18 @@ const keybinds: { [id: string]: KeybindListener } = {
 		scope: 'checklist',
 		action: (ctx) => ctx.actions.tryReject(),
 	},
+	'tech-review-top': {
+		keybind: 'ArrowUp',
+		description: 'Go to top of the tech review card',
+		scope: 'tech-review',
+		action: (ctx) => ctx.actions.goToTop(),
+	},
+	'tech-review-bottom': {
+		keybind: 'ArrowDown',
+		description: 'Go to bottom of the tech review card',
+		scope: 'tech-review',
+		action: (ctx) => ctx.actions.goToBottom(),
+	},
 }
 
 export default keybinds
diff --git a/packages/moderation/src/data/settings.ts b/packages/moderation/src/data/settings.ts
index 432aa09d2b..d62436821c 100644
--- a/packages/moderation/src/data/settings.ts
+++ b/packages/moderation/src/data/settings.ts
@@ -27,6 +27,13 @@ const settings = {
 			description: 'Whether private messages should be highlighted in the chat.',
 			default: true,
 		}),
+		SlicerButtonInVersions: setting.asToggle({
+			type: 'toggle',
+			id: 'slicer-button-in-versions',
+			title: 'Show Slicer Button in Versions Table and Page',
+			description: 'Whether the slicer button should be shown in the versions table and page.',
+			default: false,
+		}),
 		AdjustPageAlignment: setting.asEnum({
 			type: 'enum',
 			id: 'adjust-page-alignment',
diff --git a/packages/moderation/src/types/keybinds.ts b/packages/moderation/src/types/keybinds.ts
index 529eaccc86..cb57be2368 100644
--- a/packages/moderation/src/types/keybinds.ts
+++ b/packages/moderation/src/types/keybinds.ts
@@ -16,6 +16,11 @@ export interface ModerationActions {
 	tryEditMessage: () => void
 }
 
+export interface TechReviewActions {
+	goToTop: () => void
+	goToBottom: () => void
+}
+
 export interface ModerationState {
 	currentStage: number
 	totalStages: number
@@ -44,7 +49,15 @@ export type ModerationChecklistContext = {
 	actions: ModerationActions
 }
 
-export type ModerationContext = ModerationProjectContext | ModerationChecklistContext
+export type ModerationTechReviewContext = {
+	scope: 'tech-review'
+	actions: TechReviewActions
+}
+
+export type ModerationContext =
+	| ModerationProjectContext
+	| ModerationChecklistContext
+	| ModerationTechReviewContext
 
 export interface KeybindDefinition {
 	key: string
@@ -58,7 +71,7 @@ export interface KeybindDefinition {
 export type BaseKeybindListener<T> = {
 	keybind: KeybindDefinition | KeybindDefinition[] | string | string[]
 	description: string
-	scope: 'project' | 'checklist'
+	scope: 'project' | 'checklist' | 'tech-review'
 	enabled?: (ctx: T) => boolean
 	action: (ctx: T) => void
 }
@@ -69,7 +82,13 @@ export type KeybindProjectListener = BaseKeybindListener<ModerationProjectContex
 export type KeybindChecklistListener = BaseKeybindListener<ModerationChecklistContext> & {
 	scope: 'checklist'
 }
-export type KeybindListener = KeybindProjectListener | KeybindChecklistListener
+export type KeybindTechReviewListener = BaseKeybindListener<ModerationTechReviewContext> & {
+	scope: 'tech-review'
+}
+export type KeybindListener =
+	| KeybindProjectListener
+	| KeybindChecklistListener
+	| KeybindTechReviewListener
 
 export function parseKeybind(keybindString: string): KeybindDefinition {
 	const parts = keybindString.split('+').map((p) => p.trim().toLowerCase())

From e4cbec6b2caa3a6e90923d6422770a1e86578b8b Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Fri, 7 Aug 2026 13:42:57 -0700
Subject: [PATCH 7/7] changelog

---
 packages/blog/changelog.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/blog/changelog.ts b/packages/blog/changelog.ts
index 979ffff830..186f72224c 100644
--- a/packages/blog/changelog.ts
+++ b/packages/blog/changelog.ts
@@ -10,6 +10,35 @@ export type VersionEntry = {
 }
 
 const VERSIONS: VersionEntry[] = [
+	{
+		date: `2026-08-07T20:41:51+00:00`,
+		product: 'app',
+		version: '0.17.4',
+		body: `## Changed
+- Added loading states for project members and server details, to make it feel smoother.
+- Improved popout menu animations.
+- Updated NeoForge icon to be closer to the actual logo and look more like a fox.
+- Updated design of buttons.
+
+## Fixed
+- Fixed "Licensed Unknown" showing up under details on server projects.
+- Fixed project types sometimes appearing in random orders on some pages.`,
+	},
+	{
+		date: `2026-08-07T20:41:51+00:00`,
+		product: 'web',
+		body: `## Changed
+- Added loading states for project members and server details, to make it feel smoother.
+- Improved popout menu animations.
+- Updated project tag settings page to new design.
+- Updated NeoForge icon to be closer to the actual logo and look more like a fox.
+
+## Fixed
+- Fixed "Licensed Unknown" showing up under details on server projects.
+- Fixed tags settings page being broken.
+- Fixed project types sometimes appearing in random orders on some pages.
+- Fixed when the project download UI has two compatible versions and no additional content, it showed as radio buttons.`,
+	},
 	{
 		date: `2026-07-31T06:10:23+00:00`,
 		product: 'web',