From 7bc2c1dd4dd6240bf569919c102e7d76f4345ae0 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Mon, 15 Sep 2025 00:49:31 -0700
Subject: [PATCH] make default layout translatable (#4378)

* make default layout translatable

* intl:extract

* fix lint
---
 apps/frontend/src/layouts/default.vue         | 285 ++++++++++++++----
 apps/frontend/src/locales/en-US/index.json    |  76 ++++-
 .../src/pages/search/[searchProjectType].vue  |  16 +-
 packages/ui/src/locales/en-US/index.json      |  54 ++++
 packages/ui/src/utils/common-messages.ts      |  81 +++++
 5 files changed, 448 insertions(+), 64 deletions(-)

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index e63bce77b..99cb7eb82 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -93,7 +93,12 @@
 				{{ formatMessage(stagingBannerMessages.description) }}
 			</template>
 			<template #actions_right>
-				<Button transparent icon-only aria-label="Close" @click="hideStagingBanner">
+				<Button
+					transparent
+					icon-only
+					:aria-label="formatMessage(messages.close)"
+					@click="hideStagingBanner"
+				>
 					<XIcon aria-hidden="true" />
 				</Button>
 			</template>
@@ -115,7 +120,7 @@
 			class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
 		>
 			<div>
-				<NuxtLink to="/" aria-label="Modrinth home page">
+				<NuxtLink to="/" :aria-label="formatMessage(messages.modrinthHomePage)">
 					<TextLogo aria-hidden="true" class="h-7 w-auto text-contrast" />
 				</NuxtLink>
 			</div>
@@ -130,7 +135,10 @@
 							route.name === 'search-mods' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/mods"> <BoxIcon aria-hidden="true" /> Mods </nuxt-link>
+						<nuxt-link to="/mods">
+							<BoxIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.mod) }}
+						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
@@ -142,7 +150,8 @@
 						"
 					>
 						<nuxt-link to="/resourcepacks">
-							<PaintbrushIcon aria-hidden="true" /> Resource Packs
+							<PaintbrushIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.resourcepack) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
@@ -152,7 +161,10 @@
 							route.name === 'search-datapacks' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/datapacks"> <BracesIcon aria-hidden="true" /> Data Packs </nuxt-link>
+						<nuxt-link to="/datapacks">
+							<BracesIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
+						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
@@ -161,7 +173,10 @@
 							route.name === 'search-modpacks' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/modpacks"> <PackageOpenIcon aria-hidden="true" /> Modpacks </nuxt-link>
+						<nuxt-link to="/modpacks">
+							<PackageOpenIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
+						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
@@ -170,7 +185,10 @@
 							route.name === 'search-shaders' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/shaders"> <GlassesIcon aria-hidden="true" /> Shaders </nuxt-link>
+						<nuxt-link to="/shaders">
+							<GlassesIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
+						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled
 						type="transparent"
@@ -179,7 +197,10 @@
 							route.name === 'search-plugins' ? 'main-nav-primary' : 'main-nav-secondary'
 						"
 					>
-						<nuxt-link to="/plugins"> <PlugIcon aria-hidden="true" /> Plugins </nuxt-link>
+						<nuxt-link to="/plugins">
+							<PlugIcon aria-hidden="true" />
+							{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
+						</nuxt-link>
 					</ButtonStyled>
 				</template>
 				<template v-else>
@@ -244,18 +265,36 @@
 								aria-hidden="true"
 							/>
 							<CompassIcon v-else aria-hidden="true" />
-							<span class="hidden md:contents">Discover content</span>
-							<span class="contents md:hidden">Discover</span>
+							<span class="hidden md:contents">{{
+								formatMessage(navMenuMessages.discoverContent)
+							}}</span>
+							<span class="contents md:hidden">{{ formatMessage(navMenuMessages.discover) }}</span>
 							<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
 
-							<template #mods> <BoxIcon aria-hidden="true" /> Mods </template>
-							<template #resourcepacks>
-								<PaintbrushIcon aria-hidden="true" /> Resource Packs
+							<template #mods>
+								<BoxIcon aria-hidden="true" />
+								{{ formatMessage(commonProjectTypeCategoryMessages.mod) }}
+							</template>
+							<template #resourcepacks>
+								<PaintbrushIcon aria-hidden="true" />
+								{{ formatMessage(commonProjectTypeCategoryMessages.resourcepack) }}
+							</template>
+							<template #datapacks>
+								<BracesIcon aria-hidden="true" />
+								{{ formatMessage(commonProjectTypeCategoryMessages.datapack) }}
+							</template>
+							<template #plugins>
+								<PlugIcon aria-hidden="true" />
+								{{ formatMessage(commonProjectTypeCategoryMessages.plugin) }}
+							</template>
+							<template #shaders>
+								<GlassesIcon aria-hidden="true" />
+								{{ formatMessage(commonProjectTypeCategoryMessages.shader) }}
+							</template>
+							<template #modpacks>
+								<PackageOpenIcon aria-hidden="true" />
+								{{ formatMessage(commonProjectTypeCategoryMessages.modpack) }}
 							</template>
-							<template #datapacks> <BracesIcon aria-hidden="true" /> Data Packs </template>
-							<template #plugins> <PlugIcon aria-hidden="true" /> Plugins </template>
-							<template #shaders> <GlassesIcon aria-hidden="true" /> Shaders </template>
-							<template #modpacks> <PackageOpenIcon aria-hidden="true" /> Modpacks </template>
 						</TeleportOverflowMenu>
 					</ButtonStyled>
 					<ButtonStyled
@@ -270,14 +309,18 @@
 					>
 						<nuxt-link to="/servers">
 							<ServerIcon aria-hidden="true" />
-							Host a server
+							{{ formatMessage(navMenuMessages.hostAServer) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled type="transparent" :highlighted="route.name === 'app'">
 						<nuxt-link to="/app">
 							<DownloadIcon aria-hidden="true" />
-							<span class="hidden md:contents">Get Modrinth App</span>
-							<span class="contents md:hidden">Modrinth App</span>
+							<span class="hidden md:contents">{{
+								formatMessage(navMenuMessages.getModrinthApp)
+							}}</span>
+							<span class="contents md:hidden">{{
+								formatMessage(navMenuMessages.modrinthApp)
+							}}</span>
 						</nuxt-link>
 					</ButtonStyled>
 				</template>
@@ -290,7 +333,7 @@
 						position="bottom"
 						direction="left"
 						:dropdown-id="`${basePopoutId}-staff`"
-						aria-label="Create new..."
+						:aria-label="formatMessage(messages.createNew)"
 						:options="[
 							{
 								id: 'review-projects',
@@ -329,12 +372,20 @@
 					>
 						<ModrinthIcon aria-hidden="true" />
 						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-						<template #review-projects> <ScaleIcon aria-hidden="true" /> Review projects </template>
-						<template #review-reports> <ReportIcon aria-hidden="true" /> Reports </template>
-						<template #user-lookup> <UserIcon aria-hidden="true" /> Lookup by email </template>
-						<template #file-lookup> <FileIcon aria-hidden="true" /> File lookup </template>
+						<template #review-projects>
+							<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.reviewProjects) }}
+						</template>
+						<template #review-reports>
+							<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.reports) }}
+						</template>
+						<template #user-lookup>
+							<UserIcon aria-hidden="true" /> {{ formatMessage(messages.lookupByEmail) }}
+						</template>
+						<template #file-lookup>
+							<FileIcon aria-hidden="true" /> {{ formatMessage(messages.fileLookup) }}
+						</template>
 						<template #servers-notices>
-							<IssuesIcon aria-hidden="true" /> Manage server notices
+							<IssuesIcon aria-hidden="true" /> {{ formatMessage(messages.manageServerNotices) }}
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
@@ -345,7 +396,7 @@
 						position="bottom"
 						direction="left"
 						:dropdown-id="`${basePopoutId}-create`"
-						aria-label="Create new..."
+						:aria-label="formatMessage(messages.createNew)"
 						:options="[
 							{
 								id: 'new-project',
@@ -364,13 +415,15 @@
 					>
 						<PlusIcon aria-hidden="true" />
 						<DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
-						<template #new-project> <BoxIcon aria-hidden="true" /> New project </template>
+						<template #new-project>
+							<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
+						</template>
 						<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
 						<template #new-collection>
-							<CollectionIcon aria-hidden="true" /> New collection
+							<CollectionIcon aria-hidden="true" /> {{ formatMessage(messages.newCollection) }}
 						</template>
 						<template #new-organization>
-							<OrganizationIcon aria-hidden="true" /> New organization
+							<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.newOrganization) }}
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
@@ -382,34 +435,57 @@
 				>
 					<Avatar :src="auth.user.avatar_url" aria-hidden="true" circle />
 					<DropdownIcon class="h-5 w-5 text-secondary" />
-					<template #profile> <UserIcon aria-hidden="true" /> Profile </template>
-					<template #notifications> <BellIcon aria-hidden="true" /> Notifications </template>
-					<template #saved> <BookmarkIcon aria-hidden="true" /> Saved projects </template>
-					<template #servers> <ServerIcon aria-hidden="true" /> My servers </template>
+					<template #profile>
+						<UserIcon aria-hidden="true" /> {{ formatMessage(messages.profile) }}
+					</template>
+					<template #notifications>
+						<BellIcon aria-hidden="true" /> {{ formatMessage(commonMessages.notificationsLabel) }}
+					</template>
+					<template #saved>
+						<BookmarkIcon aria-hidden="true" /> {{ formatMessage(messages.savedProjects) }}
+					</template>
+					<template #servers>
+						<ServerIcon aria-hidden="true" /> {{ formatMessage(commonMessages.serversLabel) }}
+					</template>
 					<template #plus>
-						<ArrowBigUpDashIcon aria-hidden="true" /> Upgrade to Modrinth+
+						<ArrowBigUpDashIcon aria-hidden="true" />
+						{{ formatMessage(messages.upgradeToModrinthPlus) }}
+					</template>
+					<template #settings>
+						<SettingsIcon aria-hidden="true" /> {{ formatMessage(commonMessages.settingsLabel) }}
+					</template>
+					<template #flags>
+						<ReportIcon aria-hidden="true" /> {{ formatMessage(messages.featureFlags) }}
+					</template>
+					<template #projects>
+						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.projects) }}
 					</template>
-					<template #settings> <SettingsIcon aria-hidden="true" /> Settings </template>
-					<template #flags> <ReportIcon aria-hidden="true" /> Feature flags </template>
-					<template #projects> <BoxIcon aria-hidden="true" /> Projects </template>
 					<template #organizations>
-						<OrganizationIcon aria-hidden="true" /> Organizations
+						<OrganizationIcon aria-hidden="true" /> {{ formatMessage(messages.organizations) }}
+					</template>
+					<template #revenue>
+						<CurrencyIcon aria-hidden="true" /> {{ formatMessage(messages.revenue) }}
+					</template>
+					<template #analytics>
+						<ChartIcon aria-hidden="true" /> {{ formatMessage(messages.analytics) }}
+					</template>
+					<template #moderation>
+						<ScaleIcon aria-hidden="true" /> {{ formatMessage(commonMessages.moderationLabel) }}
+					</template>
+					<template #sign-out>
+						<LogOutIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signOutButton) }}
 					</template>
-					<template #revenue> <CurrencyIcon aria-hidden="true" /> Revenue </template>
-					<template #analytics> <ChartIcon aria-hidden="true" /> Analytics </template>
-					<template #moderation> <ScaleIcon aria-hidden="true" /> Moderation </template>
-					<template #sign-out> <LogOutIcon aria-hidden="true" /> Sign out </template>
 				</OverflowMenu>
 				<template v-else>
 					<ButtonStyled color="brand">
 						<nuxt-link to="/auth/sign-in">
 							<LogInIcon aria-hidden="true" />
-							Sign in
+							{{ formatMessage(commonMessages.signInButton) }}
 						</nuxt-link>
 					</ButtonStyled>
 					<ButtonStyled circular>
-						<nuxt-link v-tooltip="'Settings'" to="/settings">
-							<SettingsIcon aria-label="Settings" />
+						<nuxt-link :v-tooltip="formatMessage(commonMessages.settingsLabel)" to="/settings">
+							<SettingsIcon :aria-label="formatMessage(commonMessages.settingsLabel)" />
 						</nuxt-link>
 					</ButtonStyled>
 				</template>
@@ -489,7 +565,7 @@
 						</NuxtLink>
 						<NuxtLink v-if="flags.developerMode" class="iconified-button" to="/flags">
 							<ReportIcon aria-hidden="true" />
-							Feature flags
+							{{ formatMessage(messages.featureFlags) }}
 						</NuxtLink>
 					</template>
 					<NuxtLink class="iconified-button" to="/settings">
@@ -510,7 +586,7 @@
 					to="/"
 					class="tab button-animation"
 					:title="formatMessage(navMenuMessages.home)"
-					aria-label="Home"
+					:aria-label="formatMessage(navMenuMessages.home)"
 				>
 					<HomeIcon aria-hidden="true" />
 				</NuxtLink>
@@ -518,7 +594,7 @@
 					class="tab button-animation"
 					:class="{ 'router-link-exact-active': isBrowseMenuOpen }"
 					:title="formatMessage(navMenuMessages.search)"
-					aria-label="Search"
+					:aria-label="formatMessage(navMenuMessages.search)"
 					@click="toggleBrowseMenu()"
 				>
 					<template v-if="auth.user">
@@ -533,7 +609,7 @@
 					<NuxtLink
 						to="/dashboard/notifications"
 						class="tab button-animation"
-						aria-label="Notifications"
+						:aria-label="formatMessage(commonMessages.notificationsLabel)"
 						:class="{
 							'no-active': isMobileMenuOpen || isBrowseMenuOpen,
 						}"
@@ -550,7 +626,7 @@
 					<NuxtLink
 						to="/dashboard"
 						class="tab button-animation"
-						aria-label="Dashboard"
+						:aria-label="formatMessage(commonMessages.dashboardLabel)"
 						:title="formatMessage(commonMessages.dashboardLabel)"
 					>
 						<ChartIcon aria-hidden="true" />
@@ -595,7 +671,7 @@
 					<div
 						class="flex flex-col items-center gap-3 md:items-start"
 						role="region"
-						aria-label="Modrinth information"
+						:aria-label="formatMessage(messages.modrinthInformation)"
 					>
 						<TextLogo
 							aria-hidden="true"
@@ -719,6 +795,7 @@ import {
 	Button,
 	ButtonStyled,
 	commonMessages,
+	commonProjectTypeCategoryMessages,
 	injectNotificationManager,
 	OverflowMenu,
 	PagewideBanner,
@@ -848,6 +925,26 @@ const navMenuMessages = defineMessages({
 		id: 'layout.nav.search',
 		defaultMessage: 'Search',
 	},
+	discoverContent: {
+		id: 'layout.nav.discover-content',
+		defaultMessage: 'Discover content',
+	},
+	discover: {
+		id: 'layout.nav.discover',
+		defaultMessage: 'Discover',
+	},
+	hostAServer: {
+		id: 'layout.nav.host-a-server',
+		defaultMessage: 'Host a server',
+	},
+	getModrinthApp: {
+		id: 'layout.nav.get-modrinth-app',
+		defaultMessage: 'Get Modrinth App',
+	},
+	modrinthApp: {
+		id: 'layout.nav.modrinth-app',
+		defaultMessage: 'Modrinth App',
+	},
 })
 
 const messages = defineMessages({
@@ -859,14 +956,90 @@ const messages = defineMessages({
 		id: 'layout.avatar.alt',
 		defaultMessage: 'Your avatar',
 	},
-	getModrinthApp: {
-		id: 'layout.action.get-modrinth-app',
-		defaultMessage: 'Get Modrinth App',
-	},
 	changeTheme: {
 		id: 'layout.action.change-theme',
 		defaultMessage: 'Change theme',
 	},
+	close: {
+		id: 'layout.action.close-banner',
+		defaultMessage: 'Close',
+	},
+	modrinthHomePage: {
+		id: 'layout.nav.modrinth-home-page',
+		defaultMessage: 'Modrinth home page',
+	},
+	modrinthInformation: {
+		id: 'layout.footer.modrinth-information',
+		defaultMessage: 'Modrinth information',
+	},
+	createNew: {
+		id: 'layout.action.create-new',
+		defaultMessage: 'Create new...',
+	},
+	reviewProjects: {
+		id: 'layout.action.review-projects',
+		defaultMessage: 'Review projects',
+	},
+	reports: {
+		id: 'layout.action.reports',
+		defaultMessage: 'Reports',
+	},
+	lookupByEmail: {
+		id: 'layout.action.lookup-by-email',
+		defaultMessage: 'Lookup by email',
+	},
+	fileLookup: {
+		id: 'layout.action.file-lookup',
+		defaultMessage: 'File lookup',
+	},
+	manageServerNotices: {
+		id: 'layout.action.manage-server-notices',
+		defaultMessage: 'Manage server notices',
+	},
+	newProject: {
+		id: 'layout.action.new-project',
+		defaultMessage: 'New project',
+	},
+	newCollection: {
+		id: 'layout.action.new-collection',
+		defaultMessage: 'New collection',
+	},
+	newOrganization: {
+		id: 'layout.action.new-organization',
+		defaultMessage: 'New organization',
+	},
+	profile: {
+		id: 'layout.nav.profile',
+		defaultMessage: 'Profile',
+	},
+	savedProjects: {
+		id: 'layout.nav.saved-projects',
+		defaultMessage: 'Saved projects',
+	},
+	upgradeToModrinthPlus: {
+		id: 'layout.nav.upgrade-to-modrinth-plus',
+		defaultMessage: 'Upgrade to Modrinth+',
+	},
+	featureFlags: {
+		id: 'layout.nav.feature-flags',
+		defaultMessage: 'Feature flags',
+	},
+	projects: {
+		id: 'layout.nav.projects',
+		defaultMessage: 'Projects',
+	},
+	organizations: {
+		id: 'layout.nav.organizations',
+		defaultMessage: 'Organizations',
+	},
+	revenue: {
+		id: 'layout.nav.revenue',
+		defaultMessage: 'Revenue',
+	},
+	analytics: {
+		id: 'layout.nav.analytics',
+		defaultMessage: 'Analytics',
+	},
 })
 
 const footerMessages = defineMessages({
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 2f4bb7306..17866b10d 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -665,8 +665,35 @@
   "layout.action.change-theme": {
     "message": "Change theme"
   },
-  "layout.action.get-modrinth-app": {
-    "message": "Get Modrinth App"
+  "layout.action.close-banner": {
+    "message": "Close"
+  },
+  "layout.action.create-new": {
+    "message": "Create new..."
+  },
+  "layout.action.file-lookup": {
+    "message": "File lookup"
+  },
+  "layout.action.lookup-by-email": {
+    "message": "Lookup by email"
+  },
+  "layout.action.manage-server-notices": {
+    "message": "Manage server notices"
+  },
+  "layout.action.new-collection": {
+    "message": "New collection"
+  },
+  "layout.action.new-organization": {
+    "message": "New organization"
+  },
+  "layout.action.new-project": {
+    "message": "New project"
+  },
+  "layout.action.reports": {
+    "message": "Reports"
+  },
+  "layout.action.review-projects": {
+    "message": "Review projects"
   },
   "layout.avatar.alt": {
     "message": "Your avatar"
@@ -746,6 +773,9 @@
   "layout.footer.legal.terms-of-use": {
     "message": "Terms of Use"
   },
+  "layout.footer.modrinth-information": {
+    "message": "Modrinth information"
+  },
   "layout.footer.open-source": {
     "message": "Modrinth is <github-link>open source</github-link>."
   },
@@ -800,12 +830,54 @@
   "layout.meta.og-description": {
     "message": "Discover and publish Minecraft content!"
   },
+  "layout.nav.analytics": {
+    "message": "Analytics"
+  },
+  "layout.nav.discover": {
+    "message": "Discover"
+  },
+  "layout.nav.discover-content": {
+    "message": "Discover content"
+  },
+  "layout.nav.feature-flags": {
+    "message": "Feature flags"
+  },
+  "layout.nav.get-modrinth-app": {
+    "message": "Get Modrinth App"
+  },
   "layout.nav.home": {
     "message": "Home"
   },
+  "layout.nav.host-a-server": {
+    "message": "Host a server"
+  },
+  "layout.nav.modrinth-app": {
+    "message": "Modrinth App"
+  },
+  "layout.nav.modrinth-home-page": {
+    "message": "Modrinth home page"
+  },
+  "layout.nav.organizations": {
+    "message": "Organizations"
+  },
+  "layout.nav.profile": {
+    "message": "Profile"
+  },
+  "layout.nav.projects": {
+    "message": "Projects"
+  },
+  "layout.nav.revenue": {
+    "message": "Revenue"
+  },
+  "layout.nav.saved-projects": {
+    "message": "Saved projects"
+  },
   "layout.nav.search": {
     "message": "Search"
   },
+  "layout.nav.upgrade-to-modrinth-plus": {
+    "message": "Upgrade to Modrinth+"
+  },
   "moderation.filter.by": {
     "message": "Filter by"
   },
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index bd9088014..e28ec20ed 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -328,6 +328,7 @@ import {
 	Button,
 	ButtonStyled,
 	Checkbox,
+	commonProjectTypeCategoryMessages,
 	DropdownSelect,
 	NewProjectCard,
 	Pagination,
@@ -635,12 +636,15 @@ function setClosestMaxResults() {
 
 const selectableProjectTypes = computed(() => {
 	return [
-		{ label: 'Mods', href: `/mods` },
-		{ label: 'Resource Packs', href: `/resourcepacks` },
-		{ label: 'Data Packs', href: `/datapacks` },
-		{ label: 'Shaders', href: `/shaders` },
-		{ label: 'Modpacks', href: `/modpacks` },
-		{ label: 'Plugins', href: `/plugins` },
+		{ label: formatMessage(commonProjectTypeCategoryMessages.mod), href: `/mods` },
+		{
+			label: formatMessage(commonProjectTypeCategoryMessages.resourcepack),
+			href: `/resourcepacks`,
+		},
+		{ label: formatMessage(commonProjectTypeCategoryMessages.datapack), href: `/datapacks` },
+		{ label: formatMessage(commonProjectTypeCategoryMessages.shader), href: `/shaders` },
+		{ label: formatMessage(commonProjectTypeCategoryMessages.modpack), href: `/modpacks` },
+		{ label: formatMessage(commonProjectTypeCategoryMessages.plugin), href: `/plugins` },
 	]
 })
 
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index a097b23bc..d5ee652a3 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -359,6 +359,60 @@
   "project-type.all": {
     "defaultMessage": "All"
   },
+  "project-type.datapack.capital": {
+    "defaultMessage": "{count, plural, one {Data Pack} other {Data Packs}}"
+  },
+  "project-type.datapack.category": {
+    "defaultMessage": "Data Packs"
+  },
+  "project-type.datapack.lowercase": {
+    "defaultMessage": "{count, plural, one {data pack} other {data packs}}"
+  },
+  "project-type.mod.capital": {
+    "defaultMessage": "{count, plural, one {Mod} other {Mods}}"
+  },
+  "project-type.mod.category": {
+    "defaultMessage": "Mods"
+  },
+  "project-type.mod.lowercase": {
+    "defaultMessage": "{count, plural, one {mod} other {mods}}"
+  },
+  "project-type.modpack.capital": {
+    "defaultMessage": "{count, plural, one {Modpack} other {Modpacks}}"
+  },
+  "project-type.modpack.category": {
+    "defaultMessage": "Modpacks"
+  },
+  "project-type.modpack.lowercase": {
+    "defaultMessage": "{count, plural, one {modpack} other {modpacks}}"
+  },
+  "project-type.plugin.capital": {
+    "defaultMessage": "{count, plural, one {Plugin} other {Plugins}}"
+  },
+  "project-type.plugin.category": {
+    "defaultMessage": "Plugins"
+  },
+  "project-type.plugin.lowercase": {
+    "defaultMessage": "{count, plural, one {plugin} other {plugins}}"
+  },
+  "project-type.resourcepack.capital": {
+    "defaultMessage": "{count, plural, one {Resource Pack} other {Resource Packs}}"
+  },
+  "project-type.resourcepack.category": {
+    "defaultMessage": "Resource Packs"
+  },
+  "project-type.resourcepack.lowercase": {
+    "defaultMessage": "{count, plural, one {resource pack} other {resource packs}}"
+  },
+  "project-type.shader.capital": {
+    "defaultMessage": "{count, plural, one {Shader} other {Shaders}}"
+  },
+  "project-type.shader.category": {
+    "defaultMessage": "Shaders"
+  },
+  "project-type.shader.lowercase": {
+    "defaultMessage": "{count, plural, one {shader} other {shaders}}"
+  },
   "project.about.compatibility.environments": {
     "defaultMessage": "Supported environments"
   },
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index e357a820f..f65759666 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -271,6 +271,87 @@ export const commonMessages = defineMessages({
 	},
 })
 
+export const commonProjectTypeCategoryMessages = defineMessages({
+	datapack: {
+		id: 'project-type.datapack.category',
+		defaultMessage: 'Data Packs',
+	},
+	mod: {
+		id: 'project-type.mod.category',
+		defaultMessage: 'Mods',
+	},
+	modpack: {
+		id: 'project-type.modpack.category',
+		defaultMessage: 'Modpacks',
+	},
+	plugin: {
+		id: 'project-type.plugin.category',
+		defaultMessage: 'Plugins',
+	},
+	resourcepack: {
+		id: 'project-type.resourcepack.category',
+		defaultMessage: 'Resource Packs',
+	},
+	shader: {
+		id: 'project-type.shader.category',
+		defaultMessage: 'Shaders',
+	},
+})
+
+export const commonProjectTypeTitleMessages = defineMessages({
+	datapack: {
+		id: 'project-type.datapack.capital',
+		defaultMessage: '{count, plural, one {Data Pack} other {Data Packs}}',
+	},
+	mod: {
+		id: 'project-type.mod.capital',
+		defaultMessage: '{count, plural, one {Mod} other {Mods}}',
+	},
+	modpack: {
+		id: 'project-type.modpack.capital',
+		defaultMessage: '{count, plural, one {Modpack} other {Modpacks}}',
+	},
+	plugin: {
+		id: 'project-type.plugin.capital',
+		defaultMessage: '{count, plural, one {Plugin} other {Plugins}}',
+	},
+	resourcepack: {
+		id: 'project-type.resourcepack.capital',
+		defaultMessage: '{count, plural, one {Resource Pack} other {Resource Packs}}',
+	},
+	shader: {
+		id: 'project-type.shader.capital',
+		defaultMessage: '{count, plural, one {Shader} other {Shaders}}',
+	},
+})
+
+export const commonProjectTypeSentenceMessages = defineMessages({
+	datapack: {
+		id: 'project-type.datapack.lowercase',
+		defaultMessage: '{count, plural, one {data pack} other {data packs}}',
+	},
+	mod: {
+		id: 'project-type.mod.lowercase',
+		defaultMessage: '{count, plural, one {mod} other {mods}}',
+	},
+	modpack: {
+		id: 'project-type.modpack.lowercase',
+		defaultMessage: '{count, plural, one {modpack} other {modpacks}}',
+	},
+	plugin: {
+		id: 'project-type.plugin.lowercase',
+		defaultMessage: '{count, plural, one {plugin} other {plugins}}',
+	},
+	resourcepack: {
+		id: 'project-type.resourcepack.lowercase',
+		defaultMessage: '{count, plural, one {resource pack} other {resource packs}}',
+	},
+	shader: {
+		id: 'project-type.shader.lowercase',
+		defaultMessage: '{count, plural, one {shader} other {shaders}}',
+	},
+})
+
 export const commonSettingsMessages = defineMessages({
 	account: {
 		id: 'settings.account.title',