chore: i18n pass on server panel before worlds proj

packages/ui/src/components/servers/ServerSettingsModal.vue

@@ -6,7 +6,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import type { TabbedModalTab } from '#ui/components'
 import { TabbedModal } from '#ui/components'
-import { defineMessage, defineMessages, useVIntl } from '#ui/composables/i18n'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
 	ServerSettingsAdvancedPage,
 	ServerSettingsGeneralPage,
@@ -22,7 +22,7 @@ import {
 	injectModrinthServerContext,
 	injectNotificationManager,
 } from '#ui/providers'
-import { commonMessages } from '#ui/utils/common-messages'
+import { commonMessages, serverSettingsTabMessages } from '#ui/utils/common-messages'
 
 type ShowOptions = {
 	serverId: string
@@ -89,10 +89,7 @@ const tabs = computed<TabbedModalTab[]>(() =>
 			isOwner: isOwner.value,
 			isAdmin: isAdmin.value,
 		}
-		const name = defineMessage({
-			id: `server.settings.tabs.${tab.id}`,
-			defaultMessage: tab.label,
-		})
+		const name = serverSettingsTabMessages[tab.id]
 		const shown = tab.shown ? tab.shown(ctx) : true
 
 		if (tab.external) {
@@ -222,7 +219,7 @@ defineExpose({ show, hide })
 	>
 		<template #title>
 			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
-				{{ server.name || 'Server' }} <ChevronRightIcon />
+				{{ server.name || formatMessage(commonMessages.serverLabel) }} <ChevronRightIcon />
 				<span class="font-extrabold text-contrast">{{
 					formatMessage(commonMessages.settingsLabel)
 				}}</span>

packages/ui/src/components/servers/backups/BackupCreateModal.vue

@@ -1,14 +1,16 @@
 <template>
-	<NewModal ref="modal" header="Create backup" @show="focusInput">
+	<NewModal ref="modal" :header="formatMessage(messages.modalTitle)" @show="focusInput">
 		<div class="flex flex-col gap-2 md:w-[600px] -mb-2">
 			<label for="backup-name-input">
-				<span class="text-lg font-semibold text-contrast">Name</span>
+				<span class="text-lg font-semibold text-contrast">{{
+					formatMessage(messages.nameLabel)
+				}}</span>
 			</label>
 			<StyledInput
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
-				:placeholder="`Backup #${newBackupAmount}`"
+				:placeholder="formatMessage(messages.namePlaceholder, { number: newBackupAmount })"
 				:maxlength="48"
 				wrapper-class="w-full"
 			/>
@@ -26,8 +28,11 @@
 				>
 					<IssuesIcon class="hidden text-orange sm:block" />
 					<span class="text-sm text-orange">
-						You already have a backup named '<span class="font-semibold">{{ trimmedName }}</span
-						>'
+						<IntlFormatted :message-id="messages.duplicateName" :values="{ name: trimmedName }">
+							<template #name-highlight="{ children }">
+								<span class="font-semibold"><component :is="() => children" /></span>
+							</template>
+						</IntlFormatted>
 					</span>
 				</div>
 			</Transition>
@@ -40,7 +45,7 @@
 				leave-to-class="opacity-0 max-h-0"
 			>
 				<div v-if="isRateLimited" class="overflow-hidden text-sm text-red">
-					You're creating backups too fast. Please wait a moment before trying again.
+					{{ formatMessage(messages.rateLimitedInline) }}
 				</div>
 			</Transition>
 		</div>
@@ -49,13 +54,13 @@
 				<ButtonStyled type="outlined">
 					<button class="!border !border-surface-4" @click="hideModal">
 						<XIcon />
-						Cancel
+						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="brand">
 					<button :disabled="createMutation.isPending.value || nameExists" @click="createBackup">
 						<PlusIcon />
-						Create backup
+						{{ formatMessage(messages.createBackup) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -69,20 +74,60 @@ import { IssuesIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
+import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
-} from '../../../providers'
+} from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
+
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
+const messages = defineMessages({
+	modalTitle: {
+		id: 'servers.backups.create-modal.title',
+		defaultMessage: 'Create backup',
+	},
+	nameLabel: {
+		id: 'servers.backups.create-modal.name-label',
+		defaultMessage: 'Name',
+	},
+	namePlaceholder: {
+		id: 'servers.backups.create-modal.name-placeholder',
+		defaultMessage: 'Backup #{number}',
+	},
+	duplicateName: {
+		id: 'servers.backups.create-modal.duplicate-name',
+		defaultMessage: "You already have a backup named '<name-highlight>{name}</name-highlight>'.",
+	},
+	rateLimitedInline: {
+		id: 'servers.backups.create-modal.rate-limited-inline',
+		defaultMessage: "You're creating backups too fast. Please wait a moment before trying again.",
+	},
+	createBackup: {
+		id: 'servers.backups.create-modal.create-button',
+		defaultMessage: 'Create backup',
+	},
+	errorTitle: {
+		id: 'servers.backups.create-modal.notification.error.title',
+		defaultMessage: 'Error creating backup',
+	},
+	rateLimitedNotification: {
+		id: 'servers.backups.create-modal.notification.rate-limited',
+		defaultMessage: "You're creating backups too fast.",
+	},
+})
+
 const props = defineProps<{
 	backups?: Archon.Backups.v1.Backup[]
 }>()
@@ -129,7 +174,8 @@ const hideModal = () => {
 }
 
 const createBackup = () => {
-	const name = trimmedName.value || `Backup #${newBackupAmount.value}`
+	const name =
+		trimmedName.value || formatMessage(messages.namePlaceholder, { number: newBackupAmount.value })
 	isRateLimited.value = false
 
 	createMutation.mutate(name, {
@@ -141,12 +187,16 @@ const createBackup = () => {
 				isRateLimited.value = true
 				addNotification({
 					type: 'error',
-					title: 'Error creating backup',
-					text: "You're creating backups too fast.",
+					title: formatMessage(messages.errorTitle),
+					text: formatMessage(messages.rateLimitedNotification),
 				})
 			} else {
 				const message = error instanceof Error ? error.message : String(error)
-				addNotification({ type: 'error', title: 'Error creating backup', text: message })
+				addNotification({
+					type: 'error',
+					title: formatMessage(messages.errorTitle),
+					text: message,
+				})
 			}
 		},
 	})

packages/ui/src/components/servers/backups/BackupDeleteModal.vue

@@ -1,12 +1,12 @@
 <template>
-	<NewModal ref="modal" header="Delete backup" fade="danger">
+	<NewModal ref="modal" :header="formatMessage(messages.modalTitle)" fade="danger">
 		<div class="flex flex-col gap-6 max-w-[400px]">
-			<Admonition type="critical" header="Delete warning">
-				This backup will be permanently deleted. This action cannot be undone.
+			<Admonition type="critical" :header="formatMessage(messages.warningHeader)">
+				{{ formatMessage(messages.warningBody) }}
 			</Admonition>
 
 			<div v-if="currentBackup" class="flex flex-col gap-2">
-				<span class="font-semibold text-contrast">Backup</span>
+				<span class="font-semibold text-contrast">{{ formatMessage(messages.backupLabel) }}</span>
 				<BackupItem :backup="currentBackup" preview class="!bg-surface-2 !shadow-none" />
 			</div>
 		</div>
@@ -16,13 +16,13 @@
 				<ButtonStyled type="outlined">
 					<button class="!border !border-surface-4" @click="modal?.hide()">
 						<XIcon />
-						Cancel
+						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled color="red">
 					<button @click="deleteBackup">
 						<TrashIcon />
-						Delete backup
+						{{ formatMessage(messages.deleteButton) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -35,11 +35,39 @@ import type { Archon } from '@modrinth/api-client'
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
 import Admonition from '../../base/Admonition.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import NewModal from '../../modal/NewModal.vue'
 import BackupItem from './BackupItem.vue'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	modalTitle: {
+		id: 'servers.backups.delete-modal.title',
+		defaultMessage: 'Delete backup',
+	},
+	warningHeader: {
+		id: 'servers.backups.delete-modal.warning.header',
+		defaultMessage: 'Delete warning',
+	},
+	warningBody: {
+		id: 'servers.backups.delete-modal.warning.body',
+		defaultMessage: 'This backup will be permanently deleted. This action cannot be undone.',
+	},
+	backupLabel: {
+		id: 'servers.backups.delete-modal.backup-label',
+		defaultMessage: 'Backup',
+	},
+	deleteButton: {
+		id: 'servers.backups.delete-modal.delete-button',
+		defaultMessage: 'Delete backup',
+	},
+})
+
 const emit = defineEmits<{
 	(e: 'delete', backup: Archon.Backups.v1.Backup | undefined): void
 }>()

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -14,9 +14,10 @@ import {
 } from '@modrinth/assets'
 import { computed } from 'vue'
 
-import { useFormatDateTime } from '../../../composables'
-import { defineMessages, useVIntl } from '../../../composables/i18n'
-import { commonMessages } from '../../../utils'
+import { useFormatDateTime } from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import OverflowMenu, { type Option as OverflowOption } from '../../base/OverflowMenu.vue'
 
@@ -144,10 +145,6 @@ const messages = defineMessages({
 		id: 'servers.backups.item.restore',
 		defaultMessage: 'Restore',
 	},
-	rename: {
-		id: 'servers.backups.item.rename',
-		defaultMessage: 'Rename',
-	},
 	failedToCreateBackup: {
 		id: 'servers.backups.item.failed-to-create-backup',
 		defaultMessage: 'Failed to create backup',
@@ -286,7 +283,7 @@ const messages = defineMessages({
 							<DownloadIcon class="size-5" /> {{ formatMessage(commonMessages.downloadButton) }}
 						</template>
 						<template #rename>
-							<EditIcon class="size-5" /> {{ formatMessage(messages.rename) }}
+							<EditIcon class="size-5" /> {{ formatMessage(commonMessages.renameButton) }}
 						</template>
 						<template #delete>
 							<TrashIcon class="size-5" /> {{ formatMessage(commonMessages.deleteLabel) }}

packages/ui/src/components/servers/backups/BackupProgressAdmonitions.vue

@@ -11,11 +11,12 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, reactive, watch } from 'vue'
 
-import { useRelativeTime } from '../../../composables'
-import { defineMessages, useVIntl } from '../../../composables/i18n'
-import { injectModrinthClient, injectModrinthServerContext } from '../../../providers'
-import type { BackupProgressEntry } from '../../../providers/server-context'
-import { commonMessages } from '../../../utils'
+import { useRelativeTime } from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
+import type { BackupProgressEntry } from '#ui/providers/server-context'
+import { commonMessages } from '#ui/utils/common-messages'
+
 import Admonition from '../../base/Admonition.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import ProgressBar from '../../base/ProgressBar.vue'