From ddb87b2bb3c945470f0820863b811b3747fad5eb Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 13:30:17 +0100
Subject: [PATCH 01/10] draft: layout for alert

---
 .../ui/{ => create}/CollectionCreateModal.vue |  2 +
 .../components/ui/create/CreateLimitAlert.vue | 85 +++++++++++++++++++
 .../{ => create}/OrganizationCreateModal.vue  |  2 +
 .../ProjectCreateModal.vue}                   |  2 +
 apps/frontend/src/layouts/default.vue         |  8 +-
 apps/frontend/src/pages/[type]/[id].vue       |  2 +-
 .../src/pages/dashboard/collections.vue       |  2 +-
 .../src/pages/dashboard/organizations.vue     |  2 +-
 .../frontend/src/pages/dashboard/projects.vue |  2 +-
 apps/frontend/src/pages/organization/[id].vue |  2 +-
 .../organization/[id]/settings/projects.vue   |  2 +-
 apps/frontend/src/pages/user/[id].vue         |  4 +-
 12 files changed, 103 insertions(+), 12 deletions(-)
 rename apps/frontend/src/components/ui/{ => create}/CollectionCreateModal.vue (97%)
 create mode 100644 apps/frontend/src/components/ui/create/CreateLimitAlert.vue
 rename apps/frontend/src/components/ui/{ => create}/OrganizationCreateModal.vue (97%)
 rename apps/frontend/src/components/ui/{ModalCreation.vue => create/ProjectCreateModal.vue} (98%)

diff --git a/apps/frontend/src/components/ui/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
similarity index 97%
rename from apps/frontend/src/components/ui/CollectionCreateModal.vue
rename to apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index 44086a7973..45794a2676 100644
--- a/apps/frontend/src/components/ui/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -1,6 +1,7 @@
 <template>
 	<NewModal ref="modal" header="Creating a collection">
 		<div class="flex flex-col gap-3">
+			<LimitAlert type="collection" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
@@ -51,6 +52,7 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
+import LimitAlert from './CreateLimitAlert.vue'
 
 const { addNotification } = injectNotificationManager()
 const router = useNativeRouter()
diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
new file mode 100644
index 0000000000..14dccc9535
--- /dev/null
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -0,0 +1,85 @@
+<template>
+	<Admonition
+		v-if="shouldShowAlert"
+		type="warning"
+		:header="`Approaching ${typeDisplayName} limit`"
+		class="mb-4"
+	>
+		<div class="flex flex-col gap-3">
+			<div class="flex items-center justify-between">
+				<span class="text-sm">
+					{{ current }} of {{ max }} {{ typeDisplayName }}{{ max !== 1 ? 's' : '' }} created
+				</span>
+				<span class="text-lg font-semibold">{{ percentage }}%</span>
+			</div>
+			<div class="h-3 w-full rounded-full border-solid border-highlight-orange bg-highlight-orange">
+				<div
+					class="h-full rounded-full bg-brand-orange transition-all duration-300"
+					:style="`width: ${percentage}%`"
+				/>
+			</div>
+			<p class="m-0 text-sm text-contrast">
+				Please contact support to increase your
+				{{ typeDisplayName }}s limit.
+			</p>
+		</div>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { Admonition } from '@modrinth/ui'
+import { computed } from 'vue'
+
+interface LimitsResponse {
+	projects: { current: number; max: number } | null
+	organizations: { current: number; max: number } | null
+	collections: { current: number; max: number } | null
+}
+
+const props = defineProps<{
+	type: 'project' | 'org' | 'collection'
+}>()
+
+// const { data: limits } = await useAsyncData('limits', () =>
+// 	useBaseFetch('limits', {
+// 		apiVersion: 3,
+// 	}),
+// )
+
+const limits = ref({
+	projects: { current: 8, max: 10 },
+	organizations: { current: 3, max: 4 },
+	collections: { current: 15, max: 20 },
+})
+
+const limitKey = computed(() => {
+	switch (props.type) {
+		case 'project':
+			return 'projects'
+		case 'org':
+			return 'organizations'
+		case 'collection':
+			return 'collections'
+		default:
+			return 'projects'
+	}
+})
+
+const typeDisplayName = computed(() => {
+	switch (props.type) {
+		case 'project':
+			return 'project'
+		case 'org':
+			return 'organization'
+		case 'collection':
+			return 'collection'
+		default:
+			return 'project'
+	}
+})
+
+const current = computed(() => limits.value?.[limitKey.value]?.current ?? 0)
+const max = computed(() => limits.value?.[limitKey.value]?.max ?? null)
+const percentage = computed(() => (max.value ? Math.round((current.value / max.value) * 100) : 0))
+const shouldShowAlert = computed(() => max.value !== null && percentage.value >= 75)
+</script>
diff --git a/apps/frontend/src/components/ui/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
similarity index 97%
rename from apps/frontend/src/components/ui/OrganizationCreateModal.vue
rename to apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index e1389eda4d..91814066ab 100644
--- a/apps/frontend/src/components/ui/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -1,6 +1,7 @@
 <template>
 	<NewModal ref="modal" header="Creating an organization">
 		<div class="flex flex-col gap-3">
+			<LimitAlert type="org" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
@@ -75,6 +76,7 @@
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { ref } from 'vue'
+import LimitAlert from './CreateLimitAlert.vue'
 
 const router = useNativeRouter()
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/components/ui/ModalCreation.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
similarity index 98%
rename from apps/frontend/src/components/ui/ModalCreation.vue
rename to apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index b36cf052ff..a4c47173cf 100644
--- a/apps/frontend/src/components/ui/ModalCreation.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -1,6 +1,7 @@
 <template>
 	<NewModal ref="modal" header="Creating a project">
 		<div class="flex flex-col gap-3">
+			<LimitAlert type="project" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
@@ -86,6 +87,7 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, DropdownSelect, injectNotificationManager, NewModal } from '@modrinth/ui'
+import LimitAlert from './CreateLimitAlert.vue'
 
 const { addNotification } = injectNotificationManager()
 
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index bd959ed922..64eba57414 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -676,7 +676,7 @@
 			</div>
 		</header>
 		<main class="min-h-[calc(100vh-4.5rem-310.59px)]">
-			<ModalCreation v-if="auth.user" ref="modal_creation" />
+			<ProjectCreateModal v-if="auth.user" ref="modal_creation" />
 			<CollectionCreateModal ref="modal_collection_creation" />
 			<OrganizationCreateModal ref="modal_organization_creation" />
 			<slot id="main" />
@@ -825,10 +825,10 @@ import { isAdmin, isStaff } from '@modrinth/utils'
 import { IntlFormatted } from '@vintl/vintl/components'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
-import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
+import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
+import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
+import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import CreatorTaxFormModal from '~/components/ui/dashboard/CreatorTaxFormModal.vue'
-import ModalCreation from '~/components/ui/ModalCreation.vue'
-import OrganizationCreateModal from '~/components/ui/OrganizationCreateModal.vue'
 import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 0ec972df97..ff480bfb7b 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -1012,7 +1012,7 @@ import { navigateTo } from '#app'
 import Accordion from '~/components/ui/Accordion.vue'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import AutomaticAccordion from '~/components/ui/AutomaticAccordion.vue'
-import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
+import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
 import NavTabs from '~/components/ui/NavTabs.vue'
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 0811070663..6c8b4ad7b6 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -108,7 +108,7 @@ import {
 } from '@modrinth/assets'
 import { Avatar, Button, commonMessages } from '@modrinth/ui'
 
-import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
+import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 
 const { formatMessage } = useVIntl()
 const formatCompactNumber = useCompactNumber()
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index c0c43f8fc8..c701b35455 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -52,7 +52,7 @@
 import { PlusIcon, UsersIcon } from '@modrinth/assets'
 import { Avatar } from '@modrinth/ui'
 
-import OrganizationCreateModal from '~/components/ui/OrganizationCreateModal.vue'
+import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import { useAuth } from '~/composables/auth.js'
 
 const createOrgModal = ref(null)
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 1752268bd4..0b0bf540eb 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -341,7 +341,7 @@ import { formatProjectType } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'
 
 import Modal from '~/components/ui/Modal.vue'
-import ModalCreation from '~/components/ui/ModalCreation.vue'
+import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import { getProjectTypeForUrl } from '~/helpers/projects.js'
 
 useHead({ title: 'Projects - Modrinth' })
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index a62864bce2..f90e009dfb 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -284,7 +284,7 @@ import { formatNumber } from '@modrinth/utils'
 
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
-import ModalCreation from '~/components/ui/ModalCreation.vue'
+import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import NavStack from '~/components/ui/NavStack.vue'
 import NavStackItem from '~/components/ui/NavStackItem.vue'
 import NavTabs from '~/components/ui/NavTabs.vue'
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index f18e24d15f..874f09f829 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -323,7 +323,7 @@ import {
 import { formatProjectType } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'
 
-import ModalCreation from '~/components/ui/ModalCreation.vue'
+import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import OrganizationProjectTransferModal from '~/components/ui/OrganizationProjectTransferModal.vue'
 import { injectOrganizationContext } from '~/providers/organization-context.ts'
 
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index 3574b51efa..afa64d1556 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -377,8 +377,8 @@ import PlusBadge from '~/assets/images/badges/plus.svg?component'
 import StaffBadge from '~/assets/images/badges/staff.svg?component'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
-import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
-import ModalCreation from '~/components/ui/ModalCreation.vue'
+import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
+import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import NavTabs from '~/components/ui/NavTabs.vue'
 import ProjectCard from '~/components/ui/ProjectCard.vue'
 import { isStaff } from '~/helpers/users.js'

From f64a4ba04ce7ffa0e5cb81d86bcaf8307306ffa0 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 17:40:57 +0100
Subject: [PATCH 02/10] feat: simplify

---
 .../instructions/i18n-convert.instructions.md |  71 ++++++++
 .../ui/create/CollectionCreateModal.vue       |  97 ++++++++---
 .../components/ui/create/CreateLimitAlert.vue | 158 ++++++++++++++----
 .../ui/create/OrganizationCreateModal.vue     | 103 +++++++++---
 .../ui/create/ProjectCreateModal.vue          | 130 ++++++++++----
 5 files changed, 448 insertions(+), 111 deletions(-)
 create mode 100644 .github/instructions/i18n-convert.instructions.md

diff --git a/.github/instructions/i18n-convert.instructions.md b/.github/instructions/i18n-convert.instructions.md
new file mode 100644
index 0000000000..44a98ce4bc
--- /dev/null
+++ b/.github/instructions/i18n-convert.instructions.md
@@ -0,0 +1,71 @@
+---
+applyTo: '**/*.vue'
+---
+
+You are given a Nuxt/Vue single-file component (.vue). Your task is to convert every hard-coded natural-language string in the <template> into our localization system using @vintl/vintl-nuxt (which wraps FormatJS).
+
+Please follow these rules precisely:
+
+1. Identify translatable strings
+
+- Scan the <template> for all user-visible strings (inner text, alt attributes, placeholders, button labels, etc.). Do not extract dynamic expressions (like {{ user.name }}) or HTML tags. Only extract static human-readable text.
+
+2. Create message definitions
+
+- In the <script setup> block, import `defineMessage` or `defineMessages` from `@vintl/vintl`.
+- For each extracted string, define a message with a unique `id` (use a descriptive prefix based on the component path, e.g. `auth.welcome.long-title`) and a `defaultMessage` equal to the original English string.
+  Example:
+  const messages = defineMessages({
+  welcomeTitle: { id: 'auth.welcome.title', defaultMessage: 'Welcome' },
+  welcomeDescription: { id: 'auth.welcome.description', defaultMessage: 'You’re now part of the community…' },
+  })
+
+3. Handle variables and ICU formats
+
+- Replace dynamic parts with ICU placeholders: "Hello, ${user.name}!" → `{name}` and defaultMessage: 'Hello, {name}!'
+- For numbers/dates/times, use ICU/FormatJS options (e.g., currency): `{price, number, ::currency/USD}`
+- For plurals/selects, use ICU: `'{count, plural, one {# message} other {# messages}}'`
+
+4. Rich-text messages (links/markup)
+
+- In `defaultMessage`, wrap link/markup ranges with tags, e.g.:
+  "By creating an account, you agree to our <terms-link>Terms</terms-link> and <privacy-link>Privacy Policy</privacy-link>."
+- Render rich-text messages with `<IntlFormatted>` from `@vintl/vintl/components` and map tags via `values`:
+  <IntlFormatted
+    :message="messages.tosLabel"
+    :values="{
+      'terms-link': (chunks) => <NuxtLink to='/terms'>{chunks}</NuxtLink>,
+      'privacy-link': (chunks) => <NuxtLink to='/privacy'>{chunks}</NuxtLink>,
+    }"
+  />
+- For simple emphasis: `'Welcome to <strong>Modrinth</strong>!'` and map `'strong': (c) => <strong>{c}</strong>`
+
+5. Formatting in templates
+
+- Import and use `useVIntl()`; prefer `formatMessage` for simple strings:
+  `const { formatMessage } = useVIntl()`
+  `<button>{{ formatMessage(messages.welcomeTitle) }}</button>`
+- Vue methods like `$formatMessage`, `$formatNumber`, `$formatDate` are also available if needed.
+
+6. Naming conventions and id stability
+
+- Make `id`s descriptive and stable (e.g., `error.generic.default.title`). Group related messages with `defineMessages`.
+
+7. Avoid Vue/ICU delimiter collisions
+
+- If an ICU placeholder would end right before `}}` in a Vue template, insert a space so it becomes `} }` to avoid parsing issues.
+
+8. Update imports and remove literals
+
+- Ensure imports for `defineMessage`/`defineMessages`, `useVIntl`, and `<IntlFormatted>` are present. Replace all hard-coded strings with `formatMessage(...)` or `<IntlFormatted>` and remove the literals.
+
+9. Preserve functionality
+
+- Do not change logic, layout, reactivity, or bindings—only refactor strings into i18n.
+
+Use existing patterns from our codebase:
+
+- Variables/plurals: see `apps/frontend/src/pages/frog.vue`
+- Rich-text link tags: see `apps/frontend/src/pages/auth/welcome.vue` and `apps/frontend/src/error.vue`
+
+When you finish, there should be no hard-coded English strings left in the template—everything comes from `formatMessage` or `<IntlFormatted>`.
diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index 45794a2676..3f7fcf16cc 100644
--- a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -1,11 +1,11 @@
 <template>
-	<NewModal ref="modal" header="Creating a collection">
-		<div class="flex flex-col gap-3">
-			<LimitAlert type="collection" />
+	<NewModal ref="modal" :header="formatMessage(messages.title)">
+		<div class="flex min-w-96 flex-col gap-3">
+			<CreateLimitAlert type="collection" v-model="hasHitLimit" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
-						Name
+						{{ formatMessage(messages.nameLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
@@ -14,35 +14,40 @@
 					v-model="name"
 					type="text"
 					maxlength="64"
-					:placeholder="`Enter collection name...`"
+					:placeholder="formatMessage(messages.namePlaceholder)"
 					autocomplete="off"
+					:disabled="hasHitLimit"
 				/>
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="additional-information" class="flex flex-col gap-1">
-					<span class="text-lg font-semibold text-contrast"> Summary </span>
-					<span>A sentence or two that describes your collection.</span>
+					<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.summaryLabel) }}</span>
+					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
 				<div class="textarea-wrapper">
-					<textarea id="additional-information" v-model="description" maxlength="256" />
+					<textarea
+						id="additional-information"
+						v-model="description"
+						maxlength="256"
+						:placeholder="formatMessage(messages.summaryPlaceholder)"
+						:disabled="hasHitLimit"
+					/>
 				</div>
 			</div>
-			<p class="m-0 max-w-[30rem]">
-				Your new collection will be created as a public collection with
-				{{ projectIds.length > 0 ? projectIds.length : 'no' }}
-				{{ projectIds.length !== 1 ? 'projects' : 'project' }}.
+			<p class="m-0">
+				{{ formatMessage(messages.collectionInfo, { count: projectIds.length }) }}
 			</p>
-			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button @click="create">
-						<PlusIcon aria-hidden="true" />
-						Create collection
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled class="w-24">
 					<button @click="modal.hide()">
 						<XIcon aria-hidden="true" />
-						Cancel
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand" class="w-36">
+					<button @click="create" :disabled="hasHitLimit">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createCollection) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -52,13 +57,59 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
-import LimitAlert from './CreateLimitAlert.vue'
+import { defineMessages } from '@vintl/vintl'
+import CreateLimitAlert from './CreateLimitAlert.vue'
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 const router = useNativeRouter()
 
+const messages = defineMessages({
+	title: {
+		id: 'create.collection.title',
+		defaultMessage: 'Creating a collection',
+	},
+	nameLabel: {
+		id: 'create.collection.name-label',
+		defaultMessage: 'Name',
+	},
+	namePlaceholder: {
+		id: 'create.collection.name-placeholder',
+		defaultMessage: 'Enter collection name...',
+	},
+	summaryLabel: {
+		id: 'create.collection.summary-label',
+		defaultMessage: 'Summary',
+	},
+	summaryDescription: {
+		id: 'create.collection.summary-description',
+		defaultMessage: 'A sentence or two that describes your collection.',
+	},
+	summaryPlaceholder: {
+		id: 'create.collection.summary-placeholder',
+		defaultMessage: 'This is a collection of...',
+	},
+	collectionInfo: {
+		id: 'create.collection.collection-info',
+		defaultMessage: 'Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {# project} other {# projects}}.',
+	},
+	cancel: {
+		id: 'create.collection.cancel',
+		defaultMessage: 'Cancel',
+	},
+	createCollection: {
+		id: 'create.collection.create-collection',
+		defaultMessage: 'Create collection',
+	},
+	errorTitle: {
+		id: 'create.collection.error-title',
+		defaultMessage: 'An error occurred',
+	},
+})
+
 const name = ref('')
 const description = ref('')
+const hasHitLimit = ref(false)
 
 const modal = ref()
 
@@ -90,7 +141,7 @@ async function create() {
 		await router.push(`/collection/${result.id}`)
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
+			title: formatMessage(messages.errorTitle),
 			text: err?.data?.description || err?.message || err,
 			type: 'error',
 		})
diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index 14dccc9535..ec092ef42a 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -1,63 +1,138 @@
 <template>
 	<Admonition
 		v-if="shouldShowAlert"
-		type="warning"
-		:header="`Approaching ${typeDisplayName} limit`"
+		:type="hasHitLimit ? 'critical' : 'warning'"
+		:header="
+			hasHitLimit
+				? formatMessage(messages.limitReached, { type: capitalizeString(typeDisplayName) })
+				: formatMessage(messages.approachingLimit, { type: typeDisplayName, current, max })
+		"
 		class="mb-4"
 	>
-		<div class="flex flex-col gap-3">
-			<div class="flex items-center justify-between">
-				<span class="text-sm">
-					{{ current }} of {{ max }} {{ typeDisplayName }}{{ max !== 1 ? 's' : '' }} created
-				</span>
-				<span class="text-lg font-semibold">{{ percentage }}%</span>
-			</div>
-			<div class="h-3 w-full rounded-full border-solid border-highlight-orange bg-highlight-orange">
-				<div
-					class="h-full rounded-full bg-brand-orange transition-all duration-300"
-					:style="`width: ${percentage}%`"
-				/>
-			</div>
-			<p class="m-0 text-sm text-contrast">
-				Please contact support to increase your
-				{{ typeDisplayName }}s limit.
-			</p>
+		<div class="flex w-full flex-col gap-2">
+			<template v-if="hasHitLimit">
+				{{ formatMessage(messages.limitReachedDescription, { type: typeDisplayName, max }) }}
+				<div class="w-min">
+					<ButtonStyled color="red">
+						<NuxtLink to="https://support.modrinth.com" target="_blank">
+							<UnknownIcon /> {{ formatMessage(messages.contactSupport) }}</NuxtLink
+						>
+					</ButtonStyled>
+				</div>
+			</template>
+			<template v-else>
+				{{
+					formatMessage(messages.approachingLimitDescription, {
+						type: typeDisplayName,
+						max,
+						typePlural: typeDisplayName + 's',
+					})
+				}}
+				<div class="w-min">
+					<ButtonStyled color="orange">
+						<NuxtLink to="https://support.modrinth.com" target="_blank">
+							<UnknownIcon /> {{ formatMessage(messages.contactSupport) }}</NuxtLink
+						>
+					</ButtonStyled>
+				</div>
+			</template>
 		</div>
 	</Admonition>
 </template>
 
 <script setup lang="ts">
-import { Admonition } from '@modrinth/ui'
-import { computed } from 'vue'
+import { UnknownIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled } from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
+import { defineMessages } from '@vintl/vintl'
+import { computed, watch } from 'vue'
+
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	limitReached: {
+		id: 'create.limit-alert.limit-reached',
+		defaultMessage: '{type} limit reached',
+	},
+	approachingLimit: {
+		id: 'create.limit-alert.approaching-limit',
+		defaultMessage: 'Approaching {type} limit ({current}/{max})',
+	},
+	limitReachedDescription: {
+		id: 'create.limit-alert.limit-reached-description',
+		defaultMessage:
+			"You've reached your {type} limit of {max}. Please contact support to increase your limit.",
+	},
+	approachingLimitDescription: {
+		id: 'create.limit-alert.approaching-limit-description',
+		defaultMessage:
+			"You're about to hit the {type} limit, please contact support if you need more than {max} {typePlural}.",
+	},
+	contactSupport: {
+		id: 'create.limit-alert.contact-support',
+		defaultMessage: 'Contact Support',
+	},
+})
 
 interface LimitsResponse {
-	projects: { current: number; max: number } | null
-	organizations: { current: number; max: number } | null
-	collections: { current: number; max: number } | null
+	current: {
+		projects: number
+		orgs: number
+		collections: number
+	}
+	max: {
+		projects: number | null
+		orgs: number | null
+		collections: number | null
+	}
 }
 
 const props = defineProps<{
 	type: 'project' | 'org' | 'collection'
 }>()
 
-// const { data: limits } = await useAsyncData('limits', () =>
-// 	useBaseFetch('limits', {
-// 		apiVersion: 3,
-// 	}),
-// )
+const model = defineModel<boolean>()
+
+// const { data: limits } = await useAsyncData<LimitsResponse | undefined>('limits', () => {
+// 	try {
+// 		return useBaseFetch('limits', { apiVersion: 3 }) as Promise<LimitsResponse>
+// 	} catch {
+// 		const fallbackLimits: LimitsResponse = {
+// 			current: {
+// 				projects: 10,
+// 				orgs: 4,
+// 				collections: 20,
+// 			},
+// 			max: {
+// 				projects: 10,
+// 				orgs: 4,
+// 				collections: 20,
+// 			},
+// 		}
 
-const limits = ref({
-	projects: { current: 8, max: 10 },
-	organizations: { current: 3, max: 4 },
-	collections: { current: 15, max: 20 },
+// 		return new Promise((resolve) => resolve(fallbackLimits))
+// 	}
+// })
+
+const limits = ref<LimitsResponse>({
+	current: {
+		projects: 8,
+		orgs: 3,
+		collections: 19,
+	},
+	max: {
+		projects: 10,
+		orgs: 4,
+		collections: 20,
+	},
 })
 
-const limitKey = computed(() => {
+const limitKey = computed((): keyof LimitsResponse['current'] => {
 	switch (props.type) {
 		case 'project':
 			return 'projects'
 		case 'org':
-			return 'organizations'
+			return 'orgs'
 		case 'collection':
 			return 'collections'
 		default:
@@ -78,8 +153,17 @@ const typeDisplayName = computed(() => {
 	}
 })
 
-const current = computed(() => limits.value?.[limitKey.value]?.current ?? 0)
-const max = computed(() => limits.value?.[limitKey.value]?.max ?? null)
+const current = computed(() => limits.value?.current?.[limitKey.value] ?? 0)
+const max = computed(() => limits.value?.max?.[limitKey.value] ?? null)
 const percentage = computed(() => (max.value ? Math.round((current.value / max.value) * 100) : 0))
+const hasHitLimit = computed(() => max.value !== null && current.value >= max.value)
 const shouldShowAlert = computed(() => max.value !== null && percentage.value >= 75)
+
+watch(
+	hasHitLimit,
+	(newValue) => {
+		model.value = newValue
+	},
+	{ immediate: true },
+)
 </script>
diff --git a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index 91814066ab..da11c31f08 100644
--- a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -1,11 +1,11 @@
 <template>
-	<NewModal ref="modal" header="Creating an organization">
-		<div class="flex flex-col gap-3">
-			<LimitAlert type="org" />
+	<NewModal ref="modal" :header="formatMessage(messages.title)">
+		<div class="flex min-w-96 flex-col gap-3">
+			<CreateLimitAlert type="org" v-model="hasHitLimit" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
-						Name
+						{{ formatMessage(messages.nameLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
@@ -14,15 +14,16 @@
 					v-model="name"
 					type="text"
 					maxlength="64"
-					:placeholder="`Enter organization name...`"
+					:placeholder="formatMessage(messages.namePlaceholder)"
 					autocomplete="off"
+					:disabled="hasHitLimit"
 					@input="updateSlug"
 				/>
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="slug">
 					<span class="text-lg font-semibold text-contrast">
-						URL
+						{{ formatMessage(messages.urlLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
@@ -34,6 +35,7 @@
 						type="text"
 						maxlength="64"
 						autocomplete="off"
+						:disabled="hasHitLimit"
 						@input="setManualSlug"
 					/>
 				</div>
@@ -41,30 +43,35 @@
 			<div class="flex flex-col gap-2">
 				<label for="additional-information" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast">
-						Summary
+						{{ formatMessage(messages.summaryLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
-					<span>A sentence or two that describes your organization.</span>
+					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
 				<div class="textarea-wrapper">
-					<textarea id="additional-information" v-model="description" maxlength="256" />
+					<textarea
+						id="additional-information"
+						v-model="description"
+						maxlength="256"
+						:placeholder="formatMessage(messages.summaryPlaceholder)"
+						:disabled="hasHitLimit"
+					/>
 				</div>
 			</div>
-			<p class="m-0 max-w-[30rem]">
-				You will be the owner of this organization, but you can invite other members and transfer
-				ownership at any time.
+			<p class="m-0">
+				{{ formatMessage(messages.ownershipInfo) }}
 			</p>
-			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button @click="createOrganization">
-						<PlusIcon aria-hidden="true" />
-						Create organization
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled class="w-24">
 					<button @click="hide">
 						<XIcon aria-hidden="true" />
-						Cancel
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand" class="w-40">
+					<button @click="createOrganization" :disabled="hasHitLimit">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createOrganization) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -75,16 +82,66 @@
 <script setup lang="ts">
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
+import { defineMessages } from '@vintl/vintl'
 import { ref } from 'vue'
-import LimitAlert from './CreateLimitAlert.vue'
+import CreateLimitAlert from './CreateLimitAlert.vue'
 
 const router = useNativeRouter()
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'create.organization.title',
+		defaultMessage: 'Creating an organization',
+	},
+	nameLabel: {
+		id: 'create.organization.name-label',
+		defaultMessage: 'Name',
+	},
+	namePlaceholder: {
+		id: 'create.organization.name-placeholder',
+		defaultMessage: 'Enter organization name...',
+	},
+	urlLabel: {
+		id: 'create.organization.url-label',
+		defaultMessage: 'URL',
+	},
+	summaryLabel: {
+		id: 'create.organization.summary-label',
+		defaultMessage: 'Summary',
+	},
+	summaryDescription: {
+		id: 'create.organization.summary-description',
+		defaultMessage: 'A sentence or two that describes your organization.',
+	},
+	summaryPlaceholder: {
+		id: 'create.organization.summary-placeholder',
+		defaultMessage: 'An organization for...',
+	},
+	ownershipInfo: {
+		id: 'create.organization.ownership-info',
+		defaultMessage: 'You will be the owner of this organization, but you can invite other members and transfer ownership at any time.',
+	},
+	cancel: {
+		id: 'create.organization.cancel',
+		defaultMessage: 'Cancel',
+	},
+	createOrganization: {
+		id: 'create.organization.create-organization',
+		defaultMessage: 'Create organization',
+	},
+	errorTitle: {
+		id: 'create.organization.error-title',
+		defaultMessage: 'An error occurred',
+	},
+})
 
 const name = ref<string>('')
 const slug = ref<string>('')
 const description = ref<string>('')
 const manualSlug = ref<boolean>(false)
+const hasHitLimit = ref<boolean>(false)
 const modal = ref<InstanceType<typeof NewModal>>()
 
 async function createOrganization(): Promise<void> {
@@ -108,7 +165,7 @@ async function createOrganization(): Promise<void> {
 	} catch (err: any) {
 		console.error(err)
 		addNotification({
-			title: 'An error occurred',
+			title: formatMessage(messages.errorTitle),
 			text: err.data ? err.data.description : err,
 			type: 'error',
 		})
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index a4c47173cf..e13dafb1f5 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -1,11 +1,11 @@
 <template>
-	<NewModal ref="modal" header="Creating a project">
-		<div class="flex flex-col gap-3">
-			<LimitAlert type="project" />
+	<NewModal ref="modal" :header="formatMessage(messages.title)">
+		<div class="flex min-w-96 flex-col gap-3">
+			<CreateLimitAlert type="project" v-model="hasHitLimit" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
-						Name
+						{{ formatMessage(messages.nameLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
@@ -14,15 +14,16 @@
 					v-model="name"
 					type="text"
 					maxlength="64"
-					placeholder="Enter project name..."
+					:placeholder="formatMessage(messages.namePlaceholder)"
 					autocomplete="off"
+					:disabled="hasHitLimit"
 					@input="updatedName()"
 				/>
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="slug">
 					<span class="text-lg font-semibold text-contrast">
-						URL
+						{{ formatMessage(messages.urlLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
@@ -34,6 +35,7 @@
 						type="text"
 						maxlength="64"
 						autocomplete="off"
+						:disabled="hasHitLimit"
 						@input="manualSlug = true"
 					/>
 				</div>
@@ -41,42 +43,49 @@
 			<div class="flex flex-col gap-2">
 				<label for="visibility" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast">
-						Visibility
+						{{ formatMessage(messages.visibilityLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
-					<span> The visibility of your project after it has been approved. </span>
+					<span>{{ formatMessage(messages.visibilityDescription) }}</span>
 				</label>
 				<DropdownSelect
 					id="visibility"
 					v-model="visibility"
 					:options="visibilities"
 					:display-name="(x) => x.display"
-					name="Visibility"
+					:disabled="hasHitLimit"
+					:name="formatMessage(messages.visibilityLabel)"
 				/>
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="additional-information" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast">
-						Summary
+						{{ formatMessage(messages.summaryLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
-					<span> A sentence or two that describes your project. </span>
+					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
 				<div class="textarea-wrapper">
-					<textarea id="additional-information" v-model="description" maxlength="256" />
+					<textarea
+						id="additional-information"
+						v-model="description"
+						maxlength="256"
+						:placeholder="formatMessage(messages.summaryPlaceholder)"
+						:disabled="hasHitLimit"
+					/>
 				</div>
 			</div>
-			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button @click="createProject">
-						<PlusIcon aria-hidden="true" />
-						Create project
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled class="w-24">
 					<button @click="cancel">
 						<XIcon aria-hidden="true" />
-						Cancel
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand" class="w-32">
+					<button @click="createProject" :disabled="hasHitLimit">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createProject) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -87,12 +96,76 @@
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, DropdownSelect, injectNotificationManager, NewModal } from '@modrinth/ui'
-import LimitAlert from './CreateLimitAlert.vue'
+import { defineMessages } from '@vintl/vintl'
+import CreateLimitAlert from './CreateLimitAlert.vue'
 
 const { addNotification } = injectNotificationManager()
-
+const { formatMessage } = useVIntl()
 const router = useRouter()
 
+const messages = defineMessages({
+	title: {
+		id: 'create.project.title',
+		defaultMessage: 'Creating a project',
+	},
+	nameLabel: {
+		id: 'create.project.name-label',
+		defaultMessage: 'Name',
+	},
+	namePlaceholder: {
+		id: 'create.project.name-placeholder',
+		defaultMessage: 'Enter project name...',
+	},
+	urlLabel: {
+		id: 'create.project.url-label',
+		defaultMessage: 'URL',
+	},
+	visibilityLabel: {
+		id: 'create.project.visibility-label',
+		defaultMessage: 'Visibility',
+	},
+	visibilityDescription: {
+		id: 'create.project.visibility-description',
+		defaultMessage: 'The visibility of your project after it has been approved.',
+	},
+	summaryLabel: {
+		id: 'create.project.summary-label',
+		defaultMessage: 'Summary',
+	},
+	summaryDescription: {
+		id: 'create.project.summary-description',
+		defaultMessage: 'A sentence or two that describes your project.',
+	},
+	summaryPlaceholder: {
+		id: 'create.project.summary-placeholder',
+		defaultMessage: 'This project adds...',
+	},
+	cancel: {
+		id: 'create.project.cancel',
+		defaultMessage: 'Cancel',
+	},
+	createProject: {
+		id: 'create.project.create-project',
+		defaultMessage: 'Create project',
+	},
+	errorTitle: {
+		id: 'create.project.error-title',
+		defaultMessage: 'An error occurred',
+	},
+	visibilityPublic: {
+		id: 'create.project.visibility-public',
+		defaultMessage: 'Public',
+	},
+	visibilityUnlisted: {
+		id: 'create.project.visibility-unlisted',
+		defaultMessage: 'Unlisted',
+	},
+	visibilityPrivate: {
+		id: 'create.project.visibility-private',
+		defaultMessage: 'Private',
+	},
+})
+
 const props = defineProps({
 	organizationId: {
 		type: String,
@@ -102,6 +175,7 @@ const props = defineProps({
 })
 
 const modal = ref()
+const hasHitLimit = ref(false)
 
 const name = ref('')
 const slug = ref('')
@@ -110,20 +184,20 @@ const manualSlug = ref(false)
 const visibilities = ref([
 	{
 		actual: 'approved',
-		display: 'Public',
+		display: formatMessage(messages.visibilityPublic),
 	},
 	{
 		actual: 'unlisted',
-		display: 'Unlisted',
+		display: formatMessage(messages.visibilityUnlisted),
 	},
 	{
 		actual: 'private',
-		display: 'Private',
+		display: formatMessage(messages.visibilityPrivate),
 	},
 ])
 const visibility = ref({
 	actual: 'approved',
-	display: 'Public',
+	display: formatMessage(messages.visibilityPublic),
 })
 
 const cancel = () => {
@@ -184,7 +258,7 @@ async function createProject() {
 		})
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
+			title: formatMessage(messages.errorTitle),
 			text: err.data ? err.data.description : err,
 			type: 'error',
 		})

From 200b716b6a4e63b1ace2bf4523c1818cca4d0134 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 17:41:31 +0100
Subject: [PATCH 03/10] feat: remove dummy data

---
 .../components/ui/create/CreateLimitAlert.vue | 37 ++-----------------
 1 file changed, 4 insertions(+), 33 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index ec092ef42a..68f5f3e0f5 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -93,39 +93,10 @@ const props = defineProps<{
 
 const model = defineModel<boolean>()
 
-// const { data: limits } = await useAsyncData<LimitsResponse | undefined>('limits', () => {
-// 	try {
-// 		return useBaseFetch('limits', { apiVersion: 3 }) as Promise<LimitsResponse>
-// 	} catch {
-// 		const fallbackLimits: LimitsResponse = {
-// 			current: {
-// 				projects: 10,
-// 				orgs: 4,
-// 				collections: 20,
-// 			},
-// 			max: {
-// 				projects: 10,
-// 				orgs: 4,
-// 				collections: 20,
-// 			},
-// 		}
-
-// 		return new Promise((resolve) => resolve(fallbackLimits))
-// 	}
-// })
-
-const limits = ref<LimitsResponse>({
-	current: {
-		projects: 8,
-		orgs: 3,
-		collections: 19,
-	},
-	max: {
-		projects: 10,
-		orgs: 4,
-		collections: 20,
-	},
-})
+const { data: limits } = await useAsyncData<LimitsResponse | undefined>(
+	'limits',
+	() => useBaseFetch('limits', { apiVersion: 3 }) as Promise<LimitsResponse>,
+)
 
 const limitKey = computed((): keyof LimitsResponse['current'] => {
 	switch (props.type) {

From ce0a98845286137b3a096120979deb29efb4fa1f Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 17:48:08 +0100
Subject: [PATCH 04/10] fix: lint and widths

---
 .../ui/create/CollectionCreateModal.vue       |  14 +-
 .../ui/create/OrganizationCreateModal.vue     |  10 +-
 .../ui/create/ProjectCreateModal.vue          |   7 +-
 apps/frontend/src/locales/en-US/index.json    | 123 ++++++++++++++++++
 .../frontend/src/pages/dashboard/projects.vue |   2 +-
 5 files changed, 143 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index 3f7fcf16cc..9eada58306 100644
--- a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -1,7 +1,7 @@
 <template>
 	<NewModal ref="modal" :header="formatMessage(messages.title)">
-		<div class="flex min-w-96 flex-col gap-3">
-			<CreateLimitAlert type="collection" v-model="hasHitLimit" />
+		<div class="min-w-md flex max-w-md flex-col gap-3">
+			<CreateLimitAlert v-model="hasHitLimit" type="collection" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
@@ -21,7 +21,9 @@
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="additional-information" class="flex flex-col gap-1">
-					<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.summaryLabel) }}</span>
+					<span class="text-lg font-semibold text-contrast">{{
+						formatMessage(messages.summaryLabel)
+					}}</span>
 					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
 				<div class="textarea-wrapper">
@@ -45,7 +47,7 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand" class="w-36">
-					<button @click="create" :disabled="hasHitLimit">
+					<button :disabled="hasHitLimit" @click="create">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createCollection) }}
 					</button>
@@ -58,6 +60,7 @@
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { defineMessages } from '@vintl/vintl'
+
 import CreateLimitAlert from './CreateLimitAlert.vue'
 
 const { addNotification } = injectNotificationManager()
@@ -91,7 +94,8 @@ const messages = defineMessages({
 	},
 	collectionInfo: {
 		id: 'create.collection.collection-info',
-		defaultMessage: 'Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {# project} other {# projects}}.',
+		defaultMessage:
+			'Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {# project} other {# projects}}.',
 	},
 	cancel: {
 		id: 'create.collection.cancel',
diff --git a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index da11c31f08..f3a9f64ceb 100644
--- a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -1,7 +1,7 @@
 <template>
 	<NewModal ref="modal" :header="formatMessage(messages.title)">
-		<div class="flex min-w-96 flex-col gap-3">
-			<CreateLimitAlert type="org" v-model="hasHitLimit" />
+		<div class="min-w-md flex max-w-md flex-col gap-3">
+			<CreateLimitAlert v-model="hasHitLimit" type="org" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
@@ -69,7 +69,7 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand" class="w-40">
-					<button @click="createOrganization" :disabled="hasHitLimit">
+					<button :disabled="hasHitLimit" @click="createOrganization">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createOrganization) }}
 					</button>
@@ -84,6 +84,7 @@ import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { defineMessages } from '@vintl/vintl'
 import { ref } from 'vue'
+
 import CreateLimitAlert from './CreateLimitAlert.vue'
 
 const router = useNativeRouter()
@@ -121,7 +122,8 @@ const messages = defineMessages({
 	},
 	ownershipInfo: {
 		id: 'create.organization.ownership-info',
-		defaultMessage: 'You will be the owner of this organization, but you can invite other members and transfer ownership at any time.',
+		defaultMessage:
+			'You will be the owner of this organization, but you can invite other members and transfer ownership at any time.',
 	},
 	cancel: {
 		id: 'create.organization.cancel',
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index e13dafb1f5..7b265aa1b3 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -1,7 +1,7 @@
 <template>
 	<NewModal ref="modal" :header="formatMessage(messages.title)">
-		<div class="flex min-w-96 flex-col gap-3">
-			<CreateLimitAlert type="project" v-model="hasHitLimit" />
+		<div class="min-w-md flex max-w-md flex-col gap-3">
+			<CreateLimitAlert v-model="hasHitLimit" type="project" />
 			<div class="flex flex-col gap-2">
 				<label for="name">
 					<span class="text-lg font-semibold text-contrast">
@@ -83,7 +83,7 @@
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand" class="w-32">
-					<button @click="createProject" :disabled="hasHitLimit">
+					<button :disabled="hasHitLimit" @click="createProject">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createProject) }}
 					</button>
@@ -97,6 +97,7 @@
 import { PlusIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, DropdownSelect, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { defineMessages } from '@vintl/vintl'
+
 import CreateLimitAlert from './CreateLimitAlert.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 676328dfea..aa9ea7e3f4 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -428,6 +428,129 @@
   "common.yes": {
     "message": "Yes"
   },
+  "create.collection.cancel": {
+    "message": "Cancel"
+  },
+  "create.collection.collection-info": {
+    "message": "Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {# project} other {# projects}}."
+  },
+  "create.collection.create-collection": {
+    "message": "Create collection"
+  },
+  "create.collection.error-title": {
+    "message": "An error occurred"
+  },
+  "create.collection.name-label": {
+    "message": "Name"
+  },
+  "create.collection.name-placeholder": {
+    "message": "Enter collection name..."
+  },
+  "create.collection.summary-description": {
+    "message": "A sentence or two that describes your collection."
+  },
+  "create.collection.summary-label": {
+    "message": "Summary"
+  },
+  "create.collection.summary-placeholder": {
+    "message": "This is a collection of..."
+  },
+  "create.collection.title": {
+    "message": "Creating a collection"
+  },
+  "create.limit-alert.approaching-limit": {
+    "message": "Approaching {type} limit ({current}/{max})"
+  },
+  "create.limit-alert.approaching-limit-description": {
+    "message": "You're about to hit the {type} limit, please contact support if you need more than {max} {typePlural}."
+  },
+  "create.limit-alert.contact-support": {
+    "message": "Contact Support"
+  },
+  "create.limit-alert.limit-reached": {
+    "message": "{type} limit reached"
+  },
+  "create.limit-alert.limit-reached-description": {
+    "message": "You've reached your {type} limit of {max}. Please contact support to increase your limit."
+  },
+  "create.organization.cancel": {
+    "message": "Cancel"
+  },
+  "create.organization.create-organization": {
+    "message": "Create organization"
+  },
+  "create.organization.error-title": {
+    "message": "An error occurred"
+  },
+  "create.organization.name-label": {
+    "message": "Name"
+  },
+  "create.organization.name-placeholder": {
+    "message": "Enter organization name..."
+  },
+  "create.organization.ownership-info": {
+    "message": "You will be the owner of this organization, but you can invite other members and transfer ownership at any time."
+  },
+  "create.organization.summary-description": {
+    "message": "A sentence or two that describes your organization."
+  },
+  "create.organization.summary-label": {
+    "message": "Summary"
+  },
+  "create.organization.summary-placeholder": {
+    "message": "An organization for..."
+  },
+  "create.organization.title": {
+    "message": "Creating an organization"
+  },
+  "create.organization.url-label": {
+    "message": "URL"
+  },
+  "create.project.cancel": {
+    "message": "Cancel"
+  },
+  "create.project.create-project": {
+    "message": "Create project"
+  },
+  "create.project.error-title": {
+    "message": "An error occurred"
+  },
+  "create.project.name-label": {
+    "message": "Name"
+  },
+  "create.project.name-placeholder": {
+    "message": "Enter project name..."
+  },
+  "create.project.summary-description": {
+    "message": "A sentence or two that describes your project."
+  },
+  "create.project.summary-label": {
+    "message": "Summary"
+  },
+  "create.project.summary-placeholder": {
+    "message": "This project adds..."
+  },
+  "create.project.title": {
+    "message": "Creating a project"
+  },
+  "create.project.url-label": {
+    "message": "URL"
+  },
+  "create.project.visibility-description": {
+    "message": "The visibility of your project after it has been approved."
+  },
+  "create.project.visibility-label": {
+    "message": "Visibility"
+  },
+  "create.project.visibility-private": {
+    "message": "Private"
+  },
+  "create.project.visibility-public": {
+    "message": "Public"
+  },
+  "create.project.visibility-unlisted": {
+    "message": "Unlisted"
+  },
   "dashboard.collections.button.create-new": {
     "message": "Create new"
   },
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index 0b0bf540eb..7e12c64472 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -340,8 +340,8 @@ import {
 import { formatProjectType } from '@modrinth/utils'
 import { Multiselect } from 'vue-multiselect'
 
-import Modal from '~/components/ui/Modal.vue'
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
+import Modal from '~/components/ui/Modal.vue'
 import { getProjectTypeForUrl } from '~/helpers/projects.js'
 
 useHead({ title: 'Projects - Modrinth' })

From 660d7c7cbaad7a6ef4137f8ea5dd0457fbbd7fdd Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 17:51:39 +0100
Subject: [PATCH 05/10] feat: use chips rather than dropdown select

---
 .../components/ui/create/ProjectCreateModal.vue    | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 7b265aa1b3..e0e60a09d0 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -48,13 +48,12 @@
 					</span>
 					<span>{{ formatMessage(messages.visibilityDescription) }}</span>
 				</label>
-				<DropdownSelect
+				<Chips
 					id="visibility"
 					v-model="visibility"
-					:options="visibilities"
-					:display-name="(x) => x.display"
+					:items="visibilities"
+					:format-label="(x) => x.display"
 					:disabled="hasHitLimit"
-					:name="formatMessage(messages.visibilityLabel)"
 				/>
 			</div>
 			<div class="flex flex-col gap-2">
@@ -95,7 +94,7 @@
 
 <script setup>
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, DropdownSelect, injectNotificationManager, NewModal } from '@modrinth/ui'
+import { ButtonStyled, Chips, injectNotificationManager, NewModal } from '@modrinth/ui'
 import { defineMessages } from '@vintl/vintl'
 
 import CreateLimitAlert from './CreateLimitAlert.vue'
@@ -196,10 +195,7 @@ const visibilities = ref([
 		display: formatMessage(messages.visibilityPrivate),
 	},
 ])
-const visibility = ref({
-	actual: 'approved',
-	display: formatMessage(messages.visibilityPublic),
-})
+const visibility = ref(visibilities.value[0])
 
 const cancel = () => {
 	modal.value.hide()

From 46cce52799bc3ac24825a73ca4add18e0acad3c1 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 19:22:27 +0100
Subject: [PATCH 06/10] feat: remove gap from admonition header v body

---
 .../components/ui/create/CreateLimitAlert.vue | 20 +++++++++++++------
 .../ui/src/components/base/Admonition.vue     |  2 +-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index 68f5f3e0f5..a5040660d2 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -9,7 +9,7 @@
 		"
 		class="mb-4"
 	>
-		<div class="flex w-full flex-col gap-2">
+		<div class="mt-0 flex w-full flex-col gap-2">
 			<template v-if="hasHitLimit">
 				{{ formatMessage(messages.limitReachedDescription, { type: typeDisplayName, max }) }}
 				<div class="w-min">
@@ -45,7 +45,7 @@ import { UnknownIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { defineMessages } from '@vintl/vintl'
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const { formatMessage } = useVIntl()
 
@@ -93,10 +93,18 @@ const props = defineProps<{
 
 const model = defineModel<boolean>()
 
-const { data: limits } = await useAsyncData<LimitsResponse | undefined>(
-	'limits',
-	() => useBaseFetch('limits', { apiVersion: 3 }) as Promise<LimitsResponse>,
-)
+const limits = ref<LimitsResponse>({
+	current: {
+		projects: 8,
+		orgs: 4,
+		collections: 12,
+	},
+	max: {
+		projects: 10,
+		orgs: 5,
+		collections: 15,
+	},
+})
 
 const limitKey = computed((): keyof LimitsResponse['current'] => {
 	switch (props.type) {
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index 8571b64bd6..347d094dd2 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -9,7 +9,7 @@
 			:is="icons[type]"
 			:class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
 		/>
-		<div class="flex flex-col gap-2">
+		<div class="flex flex-col">
 			<div class="font-semibold flex justify-between gap-4">
 				<slot name="header">{{ header }}</slot>
 			</div>

From c7657cad4385c862a05bf63bcb0f95c9ddd175e2 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 19:23:42 +0100
Subject: [PATCH 07/10] Revert "feat: remove gap from admonition header v body"

This reverts commit 46cce52799bc3ac24825a73ca4add18e0acad3c1.
---
 .../components/ui/create/CreateLimitAlert.vue | 20 ++++++-------------
 .../ui/src/components/base/Admonition.vue     |  2 +-
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index a5040660d2..68f5f3e0f5 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -9,7 +9,7 @@
 		"
 		class="mb-4"
 	>
-		<div class="mt-0 flex w-full flex-col gap-2">
+		<div class="flex w-full flex-col gap-2">
 			<template v-if="hasHitLimit">
 				{{ formatMessage(messages.limitReachedDescription, { type: typeDisplayName, max }) }}
 				<div class="w-min">
@@ -45,7 +45,7 @@ import { UnknownIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { defineMessages } from '@vintl/vintl'
-import { computed, ref, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 const { formatMessage } = useVIntl()
 
@@ -93,18 +93,10 @@ const props = defineProps<{
 
 const model = defineModel<boolean>()
 
-const limits = ref<LimitsResponse>({
-	current: {
-		projects: 8,
-		orgs: 4,
-		collections: 12,
-	},
-	max: {
-		projects: 10,
-		orgs: 5,
-		collections: 15,
-	},
-})
+const { data: limits } = await useAsyncData<LimitsResponse | undefined>(
+	'limits',
+	() => useBaseFetch('limits', { apiVersion: 3 }) as Promise<LimitsResponse>,
+)
 
 const limitKey = computed((): keyof LimitsResponse['current'] => {
 	switch (props.type) {
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index 347d094dd2..8571b64bd6 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -9,7 +9,7 @@
 			:is="icons[type]"
 			:class="['hidden h-8 w-8 flex-none sm:block', iconClasses[type]]"
 		/>
-		<div class="flex flex-col">
+		<div class="flex flex-col gap-2">
 			<div class="font-semibold flex justify-between gap-4">
 				<slot name="header">{{ header }}</slot>
 			</div>

From 1829bc997adf5066281f1c878a3d9676e468dcc0 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sat, 27 Sep 2025 19:34:06 +0100
Subject: [PATCH 08/10] fix: niche fixes

---
 .../components/ui/create/CreateLimitAlert.vue  | 10 +++++-----
 apps/frontend/src/locales/en-US/index.json     |  2 +-
 packages/assets/generated-icons.ts             |  2 ++
 packages/assets/icons/support-chat.svg         | 18 ++++++++++++++++++
 4 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 packages/assets/icons/support-chat.svg

diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index 68f5f3e0f5..2c28ed7dd4 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -9,13 +9,13 @@
 		"
 		class="mb-4"
 	>
-		<div class="flex w-full flex-col gap-2">
+		<div class="flex w-full flex-col gap-4">
 			<template v-if="hasHitLimit">
 				{{ formatMessage(messages.limitReachedDescription, { type: typeDisplayName, max }) }}
 				<div class="w-min">
 					<ButtonStyled color="red">
 						<NuxtLink to="https://support.modrinth.com" target="_blank">
-							<UnknownIcon /> {{ formatMessage(messages.contactSupport) }}</NuxtLink
+							<MessageIcon />{{ formatMessage(messages.contactSupport) }}</NuxtLink
 						>
 					</ButtonStyled>
 				</div>
@@ -31,7 +31,7 @@
 				<div class="w-min">
 					<ButtonStyled color="orange">
 						<NuxtLink to="https://support.modrinth.com" target="_blank">
-							<UnknownIcon /> {{ formatMessage(messages.contactSupport) }}</NuxtLink
+							<MessageIcon />{{ formatMessage(messages.contactSupport) }}</NuxtLink
 						>
 					</ButtonStyled>
 				</div>
@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { UnknownIcon } from '@modrinth/assets'
+import { MessageIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
 import { defineMessages } from '@vintl/vintl'
@@ -70,7 +70,7 @@ const messages = defineMessages({
 	},
 	contactSupport: {
 		id: 'create.limit-alert.contact-support',
-		defaultMessage: 'Contact Support',
+		defaultMessage: 'Contact support',
 	},
 })
 
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index aa9ea7e3f4..011371510c 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -465,7 +465,7 @@
     "message": "You're about to hit the {type} limit, please contact support if you need more than {max} {typePlural}."
   },
   "create.limit-alert.contact-support": {
-    "message": "Contact Support"
+    "message": "Contact support"
   },
   "create.limit-alert.limit-reached": {
     "message": "{type} limit reached"
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 4adb0cf0e4..0272326c19 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -166,6 +166,7 @@ import _StopCircleIcon from './icons/stop-circle.svg?component'
 import _StrikethroughIcon from './icons/strikethrough.svg?component'
 import _SunIcon from './icons/sun.svg?component'
 import _SunriseIcon from './icons/sunrise.svg?component'
+import _SupportChatIcon from './icons/support-chat.svg?component'
 import _TagIcon from './icons/tag.svg?component'
 import _TagsIcon from './icons/tags.svg?component'
 import _TerminalSquareIcon from './icons/terminal-square.svg?component'
@@ -364,6 +365,7 @@ export const StopCircleIcon = _StopCircleIcon
 export const StrikethroughIcon = _StrikethroughIcon
 export const SunIcon = _SunIcon
 export const SunriseIcon = _SunriseIcon
+export const SupportChatIcon = _SupportChatIcon
 export const TagIcon = _TagIcon
 export const TagsIcon = _TagsIcon
 export const TerminalSquareIcon = _TerminalSquareIcon
diff --git a/packages/assets/icons/support-chat.svg b/packages/assets/icons/support-chat.svg
new file mode 100644
index 0000000000..8d988728cf
--- /dev/null
+++ b/packages/assets/icons/support-chat.svg
@@ -0,0 +1,18 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-message-circle-question-mark-icon lucide-message-circle-question-mark"
+>
+	<path
+		d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"
+	/>
+	<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+	<path d="M12 17h.01" />
+</svg>

From e15b07f9d830e6030fc3e02ac73738aaf43973e5 Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sun, 28 Sep 2025 17:11:22 +0100
Subject: [PATCH 09/10] feat: update for new backend structure

---
 .../components/ui/create/CreateLimitAlert.vue | 58 ++++++++++---------
 apps/frontend/src/locales/en-US/index.json    |  9 +++
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index 2c28ed7dd4..b4514a111a 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -72,19 +72,23 @@ const messages = defineMessages({
 		id: 'create.limit-alert.contact-support',
 		defaultMessage: 'Contact support',
 	},
+	typeProject: {
+		id: 'create.limit-alert.type-project',
+		defaultMessage: 'project',
+	},
+	typeOrganization: {
+		id: 'create.limit-alert.type-organization',
+		defaultMessage: 'organization',
+	},
+	typeCollection: {
+		id: 'create.limit-alert.type-collection',
+		defaultMessage: 'collection',
+	},
 })
 
-interface LimitsResponse {
-	current: {
-		projects: number
-		orgs: number
-		collections: number
-	}
-	max: {
-		projects: number | null
-		orgs: number | null
-		collections: number | null
-	}
+interface UserLimits {
+	current: number
+	max: number
 }
 
 const props = defineProps<{
@@ -93,39 +97,39 @@ const props = defineProps<{
 
 const model = defineModel<boolean>()
 
-const { data: limits } = await useAsyncData<LimitsResponse | undefined>(
-	'limits',
-	() => useBaseFetch('limits', { apiVersion: 3 }) as Promise<LimitsResponse>,
-)
-
-const limitKey = computed((): keyof LimitsResponse['current'] => {
+const apiEndpoint = computed(() => {
 	switch (props.type) {
 		case 'project':
-			return 'projects'
+			return 'limits/projects'
 		case 'org':
-			return 'orgs'
+			return 'limits/organizations'
 		case 'collection':
-			return 'collections'
+			return 'limits/collections'
 		default:
-			return 'projects'
+			return 'limits/projects'
 	}
 })
 
+const { data: limits } = await useAsyncData<UserLimits | undefined>(
+	`limits-${props.type}`,
+	() => useBaseFetch(apiEndpoint.value, { apiVersion: 3 }) as Promise<UserLimits>,
+)
+
 const typeDisplayName = computed(() => {
 	switch (props.type) {
 		case 'project':
-			return 'project'
+			return formatMessage(messages.typeProject)
 		case 'org':
-			return 'organization'
+			return formatMessage(messages.typeOrganization)
 		case 'collection':
-			return 'collection'
+			return formatMessage(messages.typeCollection)
 		default:
-			return 'project'
+			return formatMessage(messages.typeProject)
 	}
 })
 
-const current = computed(() => limits.value?.current?.[limitKey.value] ?? 0)
-const max = computed(() => limits.value?.max?.[limitKey.value] ?? null)
+const current = computed(() => limits.value?.current ?? 0)
+const max = computed(() => limits.value?.max ?? null)
 const percentage = computed(() => (max.value ? Math.round((current.value / max.value) * 100) : 0))
 const hasHitLimit = computed(() => max.value !== null && current.value >= max.value)
 const shouldShowAlert = computed(() => max.value !== null && percentage.value >= 75)
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 011371510c..8edc0c9ab1 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -473,6 +473,15 @@
   "create.limit-alert.limit-reached-description": {
     "message": "You've reached your {type} limit of {max}. Please contact support to increase your limit."
   },
+  "create.limit-alert.type-collection": {
+    "message": "collection"
+  },
+  "create.limit-alert.type-organization": {
+    "message": "organization"
+  },
+  "create.limit-alert.type-project": {
+    "message": "project"
+  },
   "create.organization.cancel": {
     "message": "Cancel"
   },

From c6eb757450dcc22bef895c49573ce3bb0696ec2d Mon Sep 17 00:00:00 2001
From: IMB11 <contact@cal.engineer>
Date: Sun, 28 Sep 2025 17:15:30 +0100
Subject: [PATCH 10/10] fix: i18n

---
 .../components/ui/create/CreateLimitAlert.vue | 44 ++++++++++++++-----
 apps/frontend/src/locales/en-US/index.json    |  9 ++++
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index b4514a111a..440966ff54 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -4,14 +4,14 @@
 		:type="hasHitLimit ? 'critical' : 'warning'"
 		:header="
 			hasHitLimit
-				? formatMessage(messages.limitReached, { type: capitalizeString(typeDisplayName) })
-				: formatMessage(messages.approachingLimit, { type: typeDisplayName, current, max })
+				? formatMessage(messages.limitReached, { type: capitalizeString(typeName.singular) })
+				: formatMessage(messages.approachingLimit, { type: typeName.singular, current, max })
 		"
 		class="mb-4"
 	>
 		<div class="flex w-full flex-col gap-4">
 			<template v-if="hasHitLimit">
-				{{ formatMessage(messages.limitReachedDescription, { type: typeDisplayName, max }) }}
+				{{ formatMessage(messages.limitReachedDescription, { type: typeName.singular, max }) }}
 				<div class="w-min">
 					<ButtonStyled color="red">
 						<NuxtLink to="https://support.modrinth.com" target="_blank">
@@ -23,9 +23,9 @@
 			<template v-else>
 				{{
 					formatMessage(messages.approachingLimitDescription, {
-						type: typeDisplayName,
+						type: typeName.singular,
 						max,
-						typePlural: typeDisplayName + 's',
+						typePlural: typeName.plural,
 					})
 				}}
 				<div class="w-min">
@@ -84,6 +84,18 @@ const messages = defineMessages({
 		id: 'create.limit-alert.type-collection',
 		defaultMessage: 'collection',
 	},
+	typePluralProject: {
+		id: 'create.limit-alert.type-plural-project',
+		defaultMessage: 'projects',
+	},
+	typePluralOrganization: {
+		id: 'create.limit-alert.type-plural-organization',
+		defaultMessage: 'organizations',
+	},
+	typePluralCollection: {
+		id: 'create.limit-alert.type-plural-collection',
+		defaultMessage: 'collections',
+	},
 })
 
 interface UserLimits {
@@ -115,16 +127,28 @@ const { data: limits } = await useAsyncData<UserLimits | undefined>(
 	() => useBaseFetch(apiEndpoint.value, { apiVersion: 3 }) as Promise<UserLimits>,
 )
 
-const typeDisplayName = computed(() => {
+const typeName = computed<{ singular: string; plural: string }>(() => {
 	switch (props.type) {
 		case 'project':
-			return formatMessage(messages.typeProject)
+			return {
+				singular: formatMessage(messages.typeProject),
+				plural: formatMessage(messages.typePluralProject),
+			}
 		case 'org':
-			return formatMessage(messages.typeOrganization)
+			return {
+				singular: formatMessage(messages.typeOrganization),
+				plural: formatMessage(messages.typePluralOrganization),
+			}
 		case 'collection':
-			return formatMessage(messages.typeCollection)
+			return {
+				singular: formatMessage(messages.typeCollection),
+				plural: formatMessage(messages.typePluralCollection),
+			}
 		default:
-			return formatMessage(messages.typeProject)
+			return {
+				singular: formatMessage(messages.typeProject),
+				plural: formatMessage(messages.typePluralProject),
+			}
 	}
 })
 
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 8edc0c9ab1..ffc394fe2d 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -479,6 +479,15 @@
   "create.limit-alert.type-organization": {
     "message": "organization"
   },
+  "create.limit-alert.type-plural-collection": {
+    "message": "collections"
+  },
+  "create.limit-alert.type-plural-organization": {
+    "message": "organizations"
+  },
+  "create.limit-alert.type-plural-project": {
+    "message": "projects"
+  },
   "create.limit-alert.type-project": {
     "message": "project"
   },