eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

feat: create modal limit alerting (#4429)

Browse Source 
* 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
This commit is contained in:
Calum H.
2025-09-28 20:48:21 +01:00
committed by GitHub
parent f466470d06
commit d418eaee12
17 changed files with 785 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
.github/instructions/i18n-convert.instructions.md vendored Normal file
View File

@@ -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>`.

128
apps/frontend/src/components/ui/CollectionCreateModal.vue
View File

@@ -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>

185
apps/frontend/src/components/ui/create/CollectionCreateModal.vue Normal file
View File

@@ -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>

168
apps/frontend/src/components/ui/create/CreateLimitAlert.vue Normal file
View File

@@ -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>

103
apps/frontend/src/components/ui/OrganizationCreateModal.vue → apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
View File

@@ -1,10 +1,11 @@
<template> <template>
<NewModal ref="modal" header="Creating an organization"> <NewModal ref="modal" :header="formatMessage(messages.title)">
<div class="flex flex-col gap-3"> <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"> <div class="flex flex-col gap-2">
<label for="name"> <label for="name">
<span class="text-lg font-semibold text-contrast"> <span class="text-lg font-semibold text-contrast">
Name {{ formatMessage(messages.nameLabel) }}
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
</label> </label>
@@ -13,15 +14,16 @@
v-model="name" v-model="name"
type="text" type="text"
maxlength="64" maxlength="64"
:placeholder="`Enter organization name...`" :placeholder="formatMessage(messages.namePlaceholder)"
autocomplete="off" autocomplete="off"
:disabled="hasHitLimit"
@input="updateSlug" @input="updateSlug"
/> />
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="slug"> <label for="slug">
<span class="text-lg font-semibold text-contrast"> <span class="text-lg font-semibold text-contrast">
URL {{ formatMessage(messages.urlLabel) }}
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
</label> </label>
@@ -33,6 +35,7 @@
type="text" type="text"
maxlength="64" maxlength="64"
autocomplete="off" autocomplete="off"
:disabled="hasHitLimit"
@input="setManualSlug" @input="setManualSlug"
/> />
</div> </div>
@@ -40,30 +43,35 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="additional-information" class="flex flex-col gap-1"> <label for="additional-information" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> <span class="text-lg font-semibold text-contrast">
Summary {{ formatMessage(messages.summaryLabel) }}
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
<span>A sentence or two that describes your organization.</span> <span>{{ formatMessage(messages.summaryDescription) }}</span>
</label> </label>
<div class="textarea-wrapper"> <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> </div>
<p class="m-0 max-w-[30rem]"> <p class="m-0">
You will be the owner of this organization, but you can invite other members and transfer {{ formatMessage(messages.ownershipInfo) }}
ownership at any time.
</p> </p>
<div class="flex gap-2"> <div class="flex justify-end gap-2">
<ButtonStyled color="brand"> <ButtonStyled class="w-24">
<button @click="createOrganization">
<PlusIcon aria-hidden="true" />
Create organization
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="hide"> <button @click="hide">
<XIcon aria-hidden="true" /> <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> </button>
</ButtonStyled> </ButtonStyled>
</div> </div>
@@ -74,15 +82,68 @@
<script setup lang="ts"> <script setup lang="ts">
import { PlusIcon, XIcon } from '@modrinth/assets' import { PlusIcon, XIcon } from '@modrinth/assets'
import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui' import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
import { defineMessages } from '@vintl/vintl'
import { ref } from 'vue' import { ref } from 'vue'
import CreateLimitAlert from './CreateLimitAlert.vue'
const router = useNativeRouter() const router = useNativeRouter()
const { addNotification } = injectNotificationManager() 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 name = ref<string>('')
const slug = ref<string>('') const slug = ref<string>('')
const description = ref<string>('') const description = ref<string>('')
const manualSlug = ref<boolean>(false) const manualSlug = ref<boolean>(false)
const hasHitLimit = ref<boolean>(false)
const modal = ref<InstanceType<typeof NewModal>>() const modal = ref<InstanceType<typeof NewModal>>()
async function createOrganization(): Promise<void> { async function createOrganization(): Promise<void> {
@@ -106,7 +167,7 @@ async function createOrganization(): Promise<void> {
} catch (err: any) { } catch (err: any) {
console.error(err) console.error(err)
addNotification({ addNotification({
title: 'An error occurred', title: formatMessage(messages.errorTitle),
text: err.data ? err.data.description : err, text: err.data ? err.data.description : err,
type: 'error', type: 'error',
}) })

139
apps/frontend/src/components/ui/ModalCreation.vue → apps/frontend/src/components/ui/create/ProjectCreateModal.vue
View File

@@ -1,10 +1,11 @@
<template> <template>
<NewModal ref="modal" header="Creating a project"> <NewModal ref="modal" :header="formatMessage(messages.title)">
<div class="flex flex-col gap-3"> <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"> <div class="flex flex-col gap-2">
<label for="name"> <label for="name">
<span class="text-lg font-semibold text-contrast"> <span class="text-lg font-semibold text-contrast">
Name {{ formatMessage(messages.nameLabel) }}
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
</label> </label>
@@ -13,15 +14,16 @@
v-model="name" v-model="name"
type="text" type="text"
maxlength="64" maxlength="64"
placeholder="Enter project name..." :placeholder="formatMessage(messages.namePlaceholder)"
autocomplete="off" autocomplete="off"
:disabled="hasHitLimit"
@input="updatedName()" @input="updatedName()"
/> />
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="slug"> <label for="slug">
<span class="text-lg font-semibold text-contrast"> <span class="text-lg font-semibold text-contrast">
URL {{ formatMessage(messages.urlLabel) }}
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
</label> </label>
@@ -33,6 +35,7 @@
type="text" type="text"
maxlength="64" maxlength="64"
autocomplete="off" autocomplete="off"
:disabled="hasHitLimit"
@input="manualSlug = true" @input="manualSlug = true"
/> />
</div> </div>
@@ -40,42 +43,48 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="visibility" class="flex flex-col gap-1"> <label for="visibility" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> <span class="text-lg font-semibold text-contrast">
Visibility {{ formatMessage(messages.visibilityLabel) }}
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
<span> The visibility of your project after it has been approved. </span> <span>{{ formatMessage(messages.visibilityDescription) }}</span>
</label> </label>
<DropdownSelect <Chips
id="visibility" id="visibility"
v-model="visibility" v-model="visibility"
:options="visibilities" :items="visibilities"
:display-name="(x) => x.display" :format-label="(x) => x.display"
name="Visibility" :disabled="hasHitLimit"
/> />
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label for="additional-information" class="flex flex-col gap-1"> <label for="additional-information" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> <span class="text-lg font-semibold text-contrast">
Summary {{ formatMessage(messages.summaryLabel) }}
<span class="text-brand-red">*</span> <span class="text-brand-red">*</span>
</span> </span>
<span> A sentence or two that describes your project. </span> <span>{{ formatMessage(messages.summaryDescription) }}</span>
</label> </label>
<div class="textarea-wrapper"> <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> </div>
<div class="flex gap-2"> <div class="flex justify-end gap-2">
<ButtonStyled color="brand"> <ButtonStyled class="w-24">
<button @click="createProject">
<PlusIcon aria-hidden="true" />
Create project
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="cancel"> <button @click="cancel">
<XIcon aria-hidden="true" /> <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> </button>
</ButtonStyled> </ButtonStyled>
</div> </div>
@@ -85,12 +94,78 @@
<script setup> <script setup>
import { PlusIcon, XIcon } from '@modrinth/assets' 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 { addNotification } = injectNotificationManager()
const { formatMessage } = useVIntl()
const router = useRouter() 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({ const props = defineProps({
organizationId: { organizationId: {
type: String, type: String,
@@ -100,6 +175,7 @@ const props = defineProps({
}) })
const modal = ref() const modal = ref()
const hasHitLimit = ref(false)
const name = ref('') const name = ref('')
const slug = ref('') const slug = ref('')
@@ -108,21 +184,18 @@ const manualSlug = ref(false)
const visibilities = ref([ const visibilities = ref([
{ {
actual: 'approved', actual: 'approved',
display: 'Public', display: formatMessage(messages.visibilityPublic),
}, },
{ {
actual: 'unlisted', actual: 'unlisted',
display: 'Unlisted', display: formatMessage(messages.visibilityUnlisted),
}, },
{ {
actual: 'private', actual: 'private',
display: 'Private', display: formatMessage(messages.visibilityPrivate),
}, },
]) ])
const visibility = ref({ const visibility = ref(visibilities.value[0])
actual: 'approved',
display: 'Public',
})
const cancel = () => { const cancel = () => {
modal.value.hide() modal.value.hide()
@@ -182,7 +255,7 @@ async function createProject() {
}) })
} catch (err) { } catch (err) {
addNotification({ addNotification({
title: 'An error occurred', title: formatMessage(messages.errorTitle),
text: err.data ? err.data.description : err, text: err.data ? err.data.description : err,
type: 'error', type: 'error',
}) })

8
apps/frontend/src/layouts/default.vue
View File

@@ -676,7 +676,7 @@
</div> </div>
</header> </header>
<main class="min-h-[calc(100vh-4.5rem-310.59px)]"> <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" /> <CollectionCreateModal ref="modal_collection_creation" />
<OrganizationCreateModal ref="modal_organization_creation" /> <OrganizationCreateModal ref="modal_organization_creation" />
<slot id="main" /> <slot id="main" />
@@ -825,10 +825,10 @@ import { isAdmin, isStaff } from '@modrinth/utils'
import { IntlFormatted } from '@vintl/vintl/components' import { IntlFormatted } from '@vintl/vintl/components'
import TextLogo from '~/components/brand/TextLogo.vue' 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 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 TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
import { errors as generatedStateErrors } from '~/generated/state.json' import { errors as generatedStateErrors } from '~/generated/state.json'
import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts' import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'

141
apps/frontend/src/locales/en-US/index.json
View File

@@ -428,6 +428,147 @@
"common.yes": { "common.yes": {
"message": "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": { "dashboard.collections.button.create-new": {
"message": "Create new" "message": "Create new"
}, },

2
apps/frontend/src/pages/[type]/[id].vue
View File

@@ -1012,7 +1012,7 @@ import { navigateTo } from '#app'
import Accordion from '~/components/ui/Accordion.vue' import Accordion from '~/components/ui/Accordion.vue'
import AdPlaceholder from '~/components/ui/AdPlaceholder.vue' import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
import AutomaticAccordion from '~/components/ui/AutomaticAccordion.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 MessageBanner from '~/components/ui/MessageBanner.vue'
import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue' import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
import NavTabs from '~/components/ui/NavTabs.vue' import NavTabs from '~/components/ui/NavTabs.vue'

2
apps/frontend/src/pages/dashboard/collections.vue
View File

@@ -108,7 +108,7 @@ import {
} from '@modrinth/assets' } from '@modrinth/assets'
import { Avatar, Button, commonMessages } from '@modrinth/ui' 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 { formatMessage } = useVIntl()
const formatCompactNumber = useCompactNumber() const formatCompactNumber = useCompactNumber()

2
apps/frontend/src/pages/dashboard/organizations.vue
View File

@@ -52,7 +52,7 @@
import { PlusIcon, UsersIcon } from '@modrinth/assets' import { PlusIcon, UsersIcon } from '@modrinth/assets'
import { Avatar } from '@modrinth/ui' 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' import { useAuth } from '~/composables/auth.js'
const createOrgModal = ref(null) const createOrgModal = ref(null)

2
apps/frontend/src/pages/dashboard/projects.vue
View File

@@ -340,8 +340,8 @@ import {
import { formatProjectType } from '@modrinth/utils' import { formatProjectType } from '@modrinth/utils'
import { Multiselect } from 'vue-multiselect' import { Multiselect } from 'vue-multiselect'
import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
import Modal from '~/components/ui/Modal.vue' import Modal from '~/components/ui/Modal.vue'
import ModalCreation from '~/components/ui/ModalCreation.vue'
import { getProjectTypeForUrl } from '~/helpers/projects.js' import { getProjectTypeForUrl } from '~/helpers/projects.js'
useHead({ title: 'Projects - Modrinth' }) useHead({ title: 'Projects - Modrinth' })

2
apps/frontend/src/pages/organization/[id].vue
View File

@@ -284,7 +284,7 @@ import { formatNumber } from '@modrinth/utils'
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component' import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
import AdPlaceholder from '~/components/ui/AdPlaceholder.vue' 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 NavStack from '~/components/ui/NavStack.vue'
import NavStackItem from '~/components/ui/NavStackItem.vue' import NavStackItem from '~/components/ui/NavStackItem.vue'
import NavTabs from '~/components/ui/NavTabs.vue' import NavTabs from '~/components/ui/NavTabs.vue'

2
apps/frontend/src/pages/organization/[id]/settings/projects.vue
View File

@@ -323,7 +323,7 @@ import {
import { formatProjectType } from '@modrinth/utils' import { formatProjectType } from '@modrinth/utils'
import { Multiselect } from 'vue-multiselect' 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 OrganizationProjectTransferModal from '~/components/ui/OrganizationProjectTransferModal.vue'
import { injectOrganizationContext } from '~/providers/organization-context.ts' import { injectOrganizationContext } from '~/providers/organization-context.ts'

4
apps/frontend/src/pages/user/[id].vue
View File

@@ -377,8 +377,8 @@ import PlusBadge from '~/assets/images/badges/plus.svg?component'
import StaffBadge from '~/assets/images/badges/staff.svg?component' import StaffBadge from '~/assets/images/badges/staff.svg?component'
import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component' import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
import AdPlaceholder from '~/components/ui/AdPlaceholder.vue' import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue' import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
import ModalCreation from '~/components/ui/ModalCreation.vue' import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
import NavTabs from '~/components/ui/NavTabs.vue' import NavTabs from '~/components/ui/NavTabs.vue'
import ProjectCard from '~/components/ui/ProjectCard.vue' import ProjectCard from '~/components/ui/ProjectCard.vue'
import { isStaff } from '~/helpers/users.js' import { isStaff } from '~/helpers/users.js'

2
packages/assets/generated-icons.ts
View File

@@ -166,6 +166,7 @@ import _StopCircleIcon from './icons/stop-circle.svg?component'
import _StrikethroughIcon from './icons/strikethrough.svg?component' import _StrikethroughIcon from './icons/strikethrough.svg?component'
import _SunIcon from './icons/sun.svg?component' import _SunIcon from './icons/sun.svg?component'
import _SunriseIcon from './icons/sunrise.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 _TagIcon from './icons/tag.svg?component'
import _TagsIcon from './icons/tags.svg?component' import _TagsIcon from './icons/tags.svg?component'
import _TerminalSquareIcon from './icons/terminal-square.svg?component' import _TerminalSquareIcon from './icons/terminal-square.svg?component'
@@ -364,6 +365,7 @@ export const StopCircleIcon = _StopCircleIcon
export const StrikethroughIcon = _StrikethroughIcon export const StrikethroughIcon = _StrikethroughIcon
export const SunIcon = _SunIcon export const SunIcon = _SunIcon
export const SunriseIcon = _SunriseIcon export const SunriseIcon = _SunriseIcon
export const SupportChatIcon = _SupportChatIcon
export const TagIcon = _TagIcon export const TagIcon = _TagIcon
export const TagsIcon = _TagsIcon export const TagsIcon = _TagsIcon
export const TerminalSquareIcon = _TerminalSquareIcon export const TerminalSquareIcon = _TerminalSquareIcon

18
packages/assets/icons/support-chat.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 509 B