feat: create modal limit alerting (#4429)

* draft: layout for alert

* feat: simplify

* feat: remove dummy data

* fix: lint and widths

* feat: use chips rather than dropdown select

* feat: remove gap from admonition header v body

* Revert "feat: remove gap from admonition header v body"

This reverts commit 46cce52799bc3ac24825a73ca4add18e0acad3c1.

* fix: niche fixes

* feat: update for new backend structure

* fix: i18n

apps/frontend/src/components/ui/CollectionCreateModal.vue

@@ -1,128 +0,0 @@
-<template>
-	<NewModal ref="modal" header="Creating a collection">
-		<div class="flex flex-col gap-3">
-			<div class="flex flex-col gap-2">
-				<label for="name">
-					<span class="text-lg font-semibold text-contrast">
-						Name
-						<span class="text-brand-red">*</span>
-					</span>
-				</label>
-				<input
-					id="name"
-					v-model="name"
-					type="text"
-					maxlength="64"
-					:placeholder="`Enter collection name...`"
-					autocomplete="off"
-				/>
-			</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>
-				</label>
-				<div class="textarea-wrapper">
-					<textarea id="additional-information" v-model="description" maxlength="256" />
-				</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>
-			<div class="flex gap-2">
-				<ButtonStyled color="brand">
-					<button @click="create">
-						<PlusIcon aria-hidden="true" />
-						Create collection
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="modal.hide()">
-						<XIcon aria-hidden="true" />
-						Cancel
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</NewModal>
-</template>
-<script setup>
-import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
-
-const { addNotification } = injectNotificationManager()
-const router = useNativeRouter()
-
-const name = ref('')
-const description = ref('')
-
-const modal = ref()
-
-const props = defineProps({
-	projectIds: {
-		type: Array,
-		default() {
-			return []
-		},
-	},
-})
-
-async function create() {
-	startLoading()
-	try {
-		const result = await useBaseFetch('collection', {
-			method: 'POST',
-			body: {
-				name: name.value.trim(),
-				description: description.value.trim() || undefined,
-				projects: props.projectIds,
-			},
-			apiVersion: 3,
-		})
-
-		await initUserCollections()
-
-		modal.value.hide()
-		await router.push(`/collection/${result.id}`)
-	} catch (err) {
-		addNotification({
-			title: 'An error occurred',
-			text: err?.data?.description || err?.message || err,
-			type: 'error',
-		})
-	}
-	stopLoading()
-}
-function show(event) {
-	name.value = ''
-	description.value = ''
-	modal.value.show(event)
-}
-
-defineExpose({
-	show,
-})
-</script>
-
-<style scoped lang="scss">
-.modal-creation {
-	input {
-		width: 20rem;
-		max-width: 100%;
-	}
-
-	.text-input-wrapper {
-		width: 100%;
-	}
-
-	textarea {
-		min-height: 5rem;
-	}
-
-	.input-group {
-		margin-top: var(--gap-md);
-	}
-}
-</style>

apps/frontend/src/components/ui/create/CollectionCreateModal.vue

@@ -0,0 +1,185 @@
+<template>
+	<NewModal ref="modal" :header="formatMessage(messages.title)">
+		<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">
+						{{ formatMessage(messages.nameLabel) }}
+						<span class="text-brand-red">*</span>
+					</span>
+				</label>
+				<input
+					id="name"
+					v-model="name"
+					type="text"
+					maxlength="64"
+					: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">{{
+						formatMessage(messages.summaryLabel)
+					}}</span>
+					<span>{{ formatMessage(messages.summaryDescription) }}</span>
+				</label>
+				<div class="textarea-wrapper">
+					<textarea
+						id="additional-information"
+						v-model="description"
+						maxlength="256"
+						:placeholder="formatMessage(messages.summaryPlaceholder)"
+						:disabled="hasHitLimit"
+					/>
+				</div>
+			</div>
+			<p class="m-0">
+				{{ formatMessage(messages.collectionInfo, { count: projectIds.length }) }}
+			</p>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled class="w-24">
+					<button @click="modal.hide()">
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.cancel) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand" class="w-36">
+					<button :disabled="hasHitLimit" @click="create">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createCollection) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</NewModal>
+</template>
+<script setup>
+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()
+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()
+
+const props = defineProps({
+	projectIds: {
+		type: Array,
+		default() {
+			return []
+		},
+	},
+})
+
+async function create() {
+	startLoading()
+	try {
+		const result = await useBaseFetch('collection', {
+			method: 'POST',
+			body: {
+				name: name.value.trim(),
+				description: description.value.trim() || undefined,
+				projects: props.projectIds,
+			},
+			apiVersion: 3,
+		})
+
+		await initUserCollections()
+
+		modal.value.hide()
+		await router.push(`/collection/${result.id}`)
+	} catch (err) {
+		addNotification({
+			title: formatMessage(messages.errorTitle),
+			text: err?.data?.description || err?.message || err,
+			type: 'error',
+		})
+	}
+	stopLoading()
+}
+function show(event) {
+	name.value = ''
+	description.value = ''
+	modal.value.show(event)
+}
+
+defineExpose({
+	show,
+})
+</script>
+
+<style scoped lang="scss">
+.modal-creation {
+	input {
+		width: 20rem;
+		max-width: 100%;
+	}
+
+	.text-input-wrapper {
+		width: 100%;
+	}
+
+	textarea {
+		min-height: 5rem;
+	}
+
+	.input-group {
+		margin-top: var(--gap-md);
+	}
+}
+</style>

apps/frontend/src/components/ui/create/CreateLimitAlert.vue

@@ -0,0 +1,168 @@
+<template>
+	<Admonition
+		v-if="shouldShowAlert"
+		:type="hasHitLimit ? 'critical' : 'warning'"
+		:header="
+			hasHitLimit
+				? 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: typeName.singular, max }) }}
+				<div class="w-min">
+					<ButtonStyled color="red">
+						<NuxtLink to="https://support.modrinth.com" target="_blank">
+							<MessageIcon />{{ formatMessage(messages.contactSupport) }}</NuxtLink
+						>
+					</ButtonStyled>
+				</div>
+			</template>
+			<template v-else>
+				{{
+					formatMessage(messages.approachingLimitDescription, {
+						type: typeName.singular,
+						max,
+						typePlural: typeName.plural,
+					})
+				}}
+				<div class="w-min">
+					<ButtonStyled color="orange">
+						<NuxtLink to="https://support.modrinth.com" target="_blank">
+							<MessageIcon />{{ formatMessage(messages.contactSupport) }}</NuxtLink
+						>
+					</ButtonStyled>
+				</div>
+			</template>
+		</div>
+	</Admonition>
+</template>
+
+<script setup lang="ts">
+import { MessageIcon } 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',
+	},
+	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',
+	},
+	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 {
+	current: number
+	max: number
+}
+
+const props = defineProps<{
+	type: 'project' | 'org' | 'collection'
+}>()
+
+const model = defineModel<boolean>()
+
+const apiEndpoint = computed(() => {
+	switch (props.type) {
+		case 'project':
+			return 'limits/projects'
+		case 'org':
+			return 'limits/organizations'
+		case 'collection':
+			return 'limits/collections'
+		default:
+			return 'limits/projects'
+	}
+})
+
+const { data: limits } = await useAsyncData<UserLimits | undefined>(
+	`limits-${props.type}`,
+	() => useBaseFetch(apiEndpoint.value, { apiVersion: 3 }) as Promise<UserLimits>,
+)
+
+const typeName = computed<{ singular: string; plural: string }>(() => {
+	switch (props.type) {
+		case 'project':
+			return {
+				singular: formatMessage(messages.typeProject),
+				plural: formatMessage(messages.typePluralProject),
+			}
+		case 'org':
+			return {
+				singular: formatMessage(messages.typeOrganization),
+				plural: formatMessage(messages.typePluralOrganization),
+			}
+		case 'collection':
+			return {
+				singular: formatMessage(messages.typeCollection),
+				plural: formatMessage(messages.typePluralCollection),
+			}
+		default:
+			return {
+				singular: formatMessage(messages.typeProject),
+				plural: formatMessage(messages.typePluralProject),
+			}
+	}
+})
+
+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)
+
+watch(
+	hasHitLimit,
+	(newValue) => {
+		model.value = newValue
+	},
+	{ immediate: true },
+)
+</script>

apps/frontend/src/components/ui/create/OrganizationCreateModal.vue

@@ -1,10 +1,11 @@
 <template>
-	<NewModal ref="modal" header="Creating an organization">
-		<div class="flex flex-col gap-3">
+	<NewModal ref="modal" :header="formatMessage(messages.title)">
+		<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">
-						Name
+						{{ formatMessage(messages.nameLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
@@ -13,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>
@@ -33,6 +35,7 @@
 						type="text"
 						maxlength="64"
 						autocomplete="off"
+						:disabled="hasHitLimit"
 						@input="setManualSlug"
 					/>
 				</div>
@@ -40,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 :disabled="hasHitLimit" @click="createOrganization">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createOrganization) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -74,15 +82,68 @@
 <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 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> {
@@ -106,7 +167,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',
 		})

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -1,10 +1,11 @@
 <template>
-	<NewModal ref="modal" header="Creating a project">
-		<div class="flex flex-col gap-3">
+	<NewModal ref="modal" :header="formatMessage(messages.title)">
+		<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">
-						Name
+						{{ formatMessage(messages.nameLabel) }}
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
@@ -13,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>
@@ -33,6 +35,7 @@
 						type="text"
 						maxlength="64"
 						autocomplete="off"
+						:disabled="hasHitLimit"
 						@input="manualSlug = true"
 					/>
 				</div>
@@ -40,42 +43,48 @@
 			<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
+				<Chips
 					id="visibility"
 					v-model="visibility"
-					:options="visibilities"
-					:display-name="(x) => x.display"
-					name="Visibility"
+					:items="visibilities"
+					:format-label="(x) => x.display"
+					: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
+						{{ 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 :disabled="hasHitLimit" @click="createProject">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createProject) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -85,12 +94,78 @@
 
 <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'
 
 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,
@@ -100,6 +175,7 @@ const props = defineProps({
 })
 
 const modal = ref()
+const hasHitLimit = ref(false)
 
 const name = ref('')
 const slug = ref('')
@@ -108,21 +184,18 @@ 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',
-})
+const visibility = ref(visibilities.value[0])
 
 const cancel = () => {
 	modal.value.hide()
@@ -182,7 +255,7 @@ async function createProject() {
 		})
 	} catch (err) {
 		addNotification({
-			title: 'An error occurred',
+			title: formatMessage(messages.errorTitle),
 			text: err.data ? err.data.description : err,
 			type: 'error',
 		})