From d418eaee1239187bcf247b5968dcb0e7e5639d47 Mon Sep 17 00:00:00 2001
From: "Calum H." <contact@cal.engineer>
Date: Sun, 28 Sep 2025 20:48:21 +0100
Subject: [PATCH] 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
---
 .../instructions/i18n-convert.instructions.md |  71 +++++++
 .../components/ui/CollectionCreateModal.vue   | 128 ------------
 .../ui/create/CollectionCreateModal.vue       | 185 ++++++++++++++++++
 .../components/ui/create/CreateLimitAlert.vue | 168 ++++++++++++++++
 .../{ => create}/OrganizationCreateModal.vue  | 103 ++++++++--
 .../ProjectCreateModal.vue}                   | 139 +++++++++----
 apps/frontend/src/layouts/default.vue         |   8 +-
 apps/frontend/src/locales/en-US/index.json    | 141 +++++++++++++
 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 +-
 packages/assets/generated-icons.ts            |   2 +
 packages/assets/icons/support-chat.svg        |  18 ++
 17 files changed, 785 insertions(+), 194 deletions(-)
 create mode 100644 .github/instructions/i18n-convert.instructions.md
 delete mode 100644 apps/frontend/src/components/ui/CollectionCreateModal.vue
 create mode 100644 apps/frontend/src/components/ui/create/CollectionCreateModal.vue
 create mode 100644 apps/frontend/src/components/ui/create/CreateLimitAlert.vue
 rename apps/frontend/src/components/ui/{ => create}/OrganizationCreateModal.vue (54%)
 rename apps/frontend/src/components/ui/{ModalCreation.vue => create/ProjectCreateModal.vue} (53%)
 create mode 100644 packages/assets/icons/support-chat.svg

diff --git a/.github/instructions/i18n-convert.instructions.md b/.github/instructions/i18n-convert.instructions.md
new file mode 100644
index 000000000..44a98ce4b
--- /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/CollectionCreateModal.vue b/apps/frontend/src/components/ui/CollectionCreateModal.vue
deleted file mode 100644
index 44086a797..000000000
--- a/apps/frontend/src/components/ui/CollectionCreateModal.vue
+++ /dev/null
@@ -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>
diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
new file mode 100644
index 000000000..9eada5830
--- /dev/null
+++ b/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>
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 000000000..440966ff5
--- /dev/null
+++ b/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>
diff --git a/apps/frontend/src/components/ui/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
similarity index 54%
rename from apps/frontend/src/components/ui/OrganizationCreateModal.vue
rename to apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index e1389eda4..f3a9f64ce 100644
--- a/apps/frontend/src/components/ui/OrganizationCreateModal.vue
+++ b/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',
 		})
diff --git a/apps/frontend/src/components/ui/ModalCreation.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
similarity index 53%
rename from apps/frontend/src/components/ui/ModalCreation.vue
rename to apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index b36cf052f..e0e60a09d 100644
--- a/apps/frontend/src/components/ui/ModalCreation.vue
+++ b/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',
 		})
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index bd959ed92..64eba5741 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/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 676328dfe..ffc394fe2 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -428,6 +428,147 @@
   "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.limit-alert.type-collection": {
+    "message": "collection"
+  },
+  "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"
+  },
+  "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/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 0ec972df9..ff480bfb7 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 081107066..6c8b4ad7b 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 c0c43f8fc..c701b3545 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 1752268bd..7e12c6447 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 ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import Modal from '~/components/ui/Modal.vue'
-import ModalCreation from '~/components/ui/ModalCreation.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 a62864bce..f90e009df 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 f18e24d15..874f09f82 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 3574b51ef..afa64d155 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'
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 4adb0cf0e..0272326c1 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 000000000..8d988728c
--- /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>