Make tags translatable, move icons to frontend, a few other things (#5229)

* Make tags translatable, move icons to frontend, a few other things

* Migrate more things

* fix import

* more import fixes

* export tag-messages

* lint
This commit is contained in:
Prospector
2026-01-28 11:01:56 -08:00
committed by GitHub
parent 6d68d50699
commit 16ac2aae6b
121 changed files with 1532 additions and 229 deletions

View File

@@ -977,7 +977,7 @@ import {
useVIntl,
} from '@modrinth/ui'
import VersionSummary from '@modrinth/ui/src/components/version/VersionSummary.vue'
import { formatCategory, formatPrice, formatProjectType, renderString } from '@modrinth/utils'
import { formatPrice, formatProjectType, renderString } from '@modrinth/utils'
import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
import { useLocalStorage } from '@vueuse/core'
import dayjs from 'dayjs'

View File

@@ -66,18 +66,24 @@
v-for="category in categoryLists[header]"
:key="`category-${header}-${category.name}`"
:model-value="current.selectedTags.includes(category)"
:description="formatCategory(category.name)"
:description="
typeof getTagMessageOrDefault(category.name, 'category') === 'string'
? getTagMessageOrDefault(category.name, 'category')
: formatMessage(getTagMessageOrDefault(category.name, 'category'))
"
class="category-selector"
@update:model-value="toggleCategory(category)"
>
<div class="category-selector__label">
<div
v-if="header !== 'resolutions' && category.icon"
<component
:is="getCategoryIcon(category.name)"
v-if="header !== 'resolutions' && getCategoryIcon(category.name)"
aria-hidden="true"
class="icon"
v-html="category.icon"
/>
<span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
<span aria-hidden="true">
<FormattedTag :tag="category.name" enforce-type="category" />
</span>
</div>
</Checkbox>
</div>
@@ -100,18 +106,24 @@
:key="`featured-category-${category.name}`"
class="category-selector"
:model-value="current.featuredTags.includes(category)"
:description="formatCategory(category.name)"
:description="
typeof getTagMessageOrDefault(category.name, 'category') === 'string'
? getTagMessageOrDefault(category.name, 'category')
: formatMessage(getTagMessageOrDefault(category.name, 'category'))
"
:disabled="current.featuredTags.length >= 3 && !current.featuredTags.includes(category)"
@update:model-value="toggleFeaturedCategory(category)"
>
<div class="category-selector__label">
<div
v-if="category.header !== 'resolutions' && category.icon"
<component
:is="getCategoryIcon(category.name)"
v-if="category.header !== 'resolutions' && getCategoryIcon(category.name)"
aria-hidden="true"
class="icon"
v-html="category.icon"
/>
<span aria-hidden="true"> {{ formatCategory(category.name) }}</span>
<span aria-hidden="true">
<FormattedTag :tag="category.name" enforce-type="category" />
</span>
</div>
</Checkbox>
</div>
@@ -128,14 +140,17 @@
</template>
<script setup lang="ts">
import { StarIcon, TriangleAlertIcon } from '@modrinth/assets'
import { Checkbox, injectProjectPageContext, UnsavedChangesPopup, useSavable } from '@modrinth/ui'
import { getCategoryIcon, StarIcon, TriangleAlertIcon } from '@modrinth/assets'
import {
formatCategory,
formatCategoryHeader,
formatProjectType,
sortedCategories,
} from '@modrinth/utils'
Checkbox,
FormattedTag,
getTagMessageOrDefault,
injectProjectPageContext,
UnsavedChangesPopup,
useSavable,
useVIntl,
} from '@modrinth/ui'
import { formatCategoryHeader, formatProjectType, sortedCategories } from '@modrinth/utils'
import { computed } from 'vue'
interface Category {
@@ -146,6 +161,7 @@ interface Category {
}
const tags = useGeneratedState()
const { formatMessage } = useVIntl()
const { projectV2: project, patchProject } = injectProjectPageContext()
@@ -308,9 +324,12 @@ const toggleFeaturedCategory = (category: Category) => {
.icon {
height: 1rem;
width: 1rem;
margin-right: 0.25rem;
display: flex;
align-items: center;
svg {
margin-right: 0.25rem;
width: 1rem;
height: 1rem;
}

View File

@@ -428,6 +428,7 @@ import {
Avatar,
Badge,
ButtonStyled,
Categories,
ConfirmModal,
CopyCode,
ENVIRONMENTS_COPY,
@@ -440,7 +441,6 @@ import { Multiselect } from 'vue-multiselect'
import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
import Modal from '~/components/ui/Modal.vue'
import Categories from '~/components/ui/search/Categories.vue'
import { useImageUpload } from '~/composables/image-upload.ts'
import { inferVersionInfo } from '~/helpers/infer'
import { createDataPackVersion } from '~/helpers/package.js'