Refactor settings to use common lang keys for titles (#1674)

pages/settings/applications.vue

@@ -128,7 +128,7 @@
 
     <div class="header__row">
       <div class="header__title">
-        <h2>Applications</h2>
+        <h2>{{ formatMessage(commonSettingsMessages.applications) }}</h2>
       </div>
       <button
         class="btn btn-primary"
@@ -238,6 +238,9 @@ import {
   useScopes,
   getScopeValue,
 } from '~/composables/auth/scopes.ts'
+import { commonSettingsMessages } from '~/utils/common-messages.ts'
+
+const { formatMessage } = useVIntl()
 
 definePageMeta({
   middleware: 'auth',

pages/settings/authorizations.vue

@@ -7,7 +7,7 @@
       proceed-label="Revoke"
       @proceed="revokeApp(revokingId)"
     />
-    <h2>Authorizations</h2>
+    <h2>{{ formatMessage(commonSettingsMessages.authorizedApps) }}</h2>
     <p>
       When you authorize an application with your Modrinth account, you grant it access to your
       account. You can manage and review access to your account here at any time.
@@ -89,9 +89,11 @@
 </template>
 <script setup>
 import { Button, TrashIcon, CheckIcon, ConfirmModal, Avatar } from 'omorphia'
-
+import { commonSettingsMessages } from '~/utils/common-messages.ts'
 import { useScopes } from '~/composables/auth/scopes.ts'
 
+const { formatMessage } = useVIntl()
+
 const { scopesToDefinitions } = useScopes()
 
 const revokingId = ref(null)

pages/settings/language.vue

@@ -4,15 +4,12 @@ import RadioButtonIcon from '~/assets/images/utils/radio-button.svg'
 import RadioButtonCheckedIcon from '~/assets/images/utils/radio-button-checked.svg'
 import WarningIcon from '~/assets/images/utils/issues.svg'
 import { isModifierKeyDown } from '~/helpers/events.ts'
+import { commonSettingsMessages } from '~/utils/common-messages.ts'
 
 const vintl = useVIntl()
 const { formatMessage } = vintl
 
 const messages = defineMessages({
-  languagesTitle: {
-    id: 'settings.language.title',
-    defaultMessage: 'Language',
-  },
   languagesDescription: {
     id: 'settings.language.description',
     defaultMessage:
@@ -288,7 +285,7 @@ function getItemLabel(locale: Locale) {
 <template>
   <div>
     <section class="universal-card">
-      <h2>{{ formatMessage(messages.languagesTitle) }}</h2>
+      <h2>{{ formatMessage(commonSettingsMessages.language) }}</h2>
 
       <div class="card-description">
         <IntlFormatted :message-id="messages.languagesDescription">

pages/settings/pats.vue

@@ -74,7 +74,7 @@
 
     <div class="header__row">
       <div class="header__title">
-        <h2>{{ formatMessage(messages.title) }}</h2>
+        <h2>{{ formatMessage(commonSettingsMessages.pats) }}</h2>
       </div>
       <button
         class="btn btn-primary"
@@ -204,6 +204,7 @@
 <script setup>
 import { PlusIcon, XIcon, Checkbox, TrashIcon, EditIcon, SaveIcon, ConfirmModal } from 'omorphia'
 
+import { commonSettingsMessages } from '~/utils/common-messages.ts'
 import {
   hasScope,
   scopeList,
@@ -262,10 +263,6 @@ const deleteModalMessages = defineMessages({
 })
 
 const messages = defineMessages({
-  title: {
-    id: 'settings.pats.title',
-    defaultMessage: 'Personal access tokens',
-  },
   description: {
     id: 'settings.pats.description',
     defaultMessage:

pages/settings/profile.vue

@@ -78,7 +78,7 @@
           }}
         </Button>
         <Button :link="`/user/${auth.user.username}`">
-          <UserIcon /> {{ formatMessage(messages.visitProfile) }}
+          <UserIcon /> {{ formatMessage(commonMessages.visitYourProfile) }}
         </Button>
       </div>
     </section>
@@ -96,10 +96,10 @@ import {
   UndoIcon,
   XIcon,
 } from 'omorphia'
-import { commonMessages } from '~/utils/common-messages'
+import { commonMessages } from '~/utils/common-messages.ts'
 
 useHead({
-  title: 'Account settings - Modrinth',
+  title: 'Profile settings - Modrinth',
 })
 
 definePageMeta({
@@ -142,10 +142,6 @@ const messages = defineMessages({
     id: 'settings.profile.bio.description',
     defaultMessage: 'A short description to tell everyone a little bit about you.',
   },
-  visitProfile: {
-    id: 'settings.profile.visit-profile',
-    defaultMessage: 'Visit your profile',
-  },
 })
 
 const auth = await useAuth()

pages/settings/sessions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="universal-card">
-    <h2>{{ formatMessage(messages.sessionsTitle) }}</h2>
+    <h2>{{ formatMessage(commonSettingsMessages.sessions) }}</h2>
     <p class="preserve-lines">
       {{ formatMessage(messages.sessionsDescription) }}
     </p>
@@ -57,6 +57,7 @@
 </template>
 <script setup>
 import { XIcon } from 'omorphia'
+import { commonSettingsMessages } from '~/utils/common-messages.ts'
 
 definePageMeta({
   middleware: 'auth',
@@ -87,10 +88,6 @@ const messages = defineMessages({
     id: 'settings.sessions.last-accessed-ago',
     defaultMessage: 'Last accessed {ago}',
   },
-  sessionsTitle: {
-    id: 'settings.sessions.title',
-    defaultMessage: 'Sessions',
-  },
   unknownOsLabel: {
     id: 'settings.sessions.unknown-os',
     defaultMessage: 'Unknown OS',
@@ -102,7 +99,7 @@ const messages = defineMessages({
 })
 
 useHead({
-  title: () => `${formatMessage(messages.sessionsTitle)} - Modrinth`,
+  title: () => `${formatMessage(messages.sessions)} - Modrinth`,
 })
 
 const data = useNuxtApp()