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

layouts/default.vue

@@ -88,7 +88,7 @@
                   <NuxtLink class="item button-transparent" :to="`/user/${auth.user.username}`">
                     <div class="title profile-link">
                       <div class="username">@{{ auth.user.username }}</div>
-                      <div class="prompt">{{ formatMessage(messages.visitYourProfile) }}</div>
+                      <div class="prompt">{{ formatMessage(commonMessages.visitYourProfile) }}</div>
                     </div>
                   </NuxtLink>
                   <hr class="divider" />
@@ -492,10 +492,6 @@ const navMenuMessages = defineMessages({
 })
 
 const messages = defineMessages({
-  visitYourProfile: {
-    id: 'layout.label.visit-your-profile',
-    defaultMessage: 'Visit your profile',
-  },
   toggleMenu: {
     id: 'layout.menu-toggle.action',
     defaultMessage: 'Toggle menu',

locales/en-US/index.json

@@ -344,6 +344,9 @@
   "label.visibility": {
     "message": "Visibility"
   },
+  "label.visit-your-profile": {
+    "message": "Visit your profile"
+  },
   "layout.action.change-theme": {
     "message": "Change theme"
   },
@@ -410,9 +413,6 @@
   "layout.footer.resources.title": {
     "message": "Resources"
   },
-  "layout.label.visit-your-profile": {
-    "message": "Visit your profile"
-  },
   "layout.menu-toggle.action": {
     "message": "Toggle menu"
   },
@@ -440,18 +440,9 @@
   "profile.error.not-found": {
     "message": "User not found"
   },
-  "profile.input.upload-avatar": {
-    "message": "Upload avatar"
-  },
   "profile.joined-at": {
     "message": "Joined {ago}"
   },
-  "profile.label.edit-bio": {
-    "message": "Bio"
-  },
-  "profile.label.edit-username": {
-    "message": "Username"
-  },
   "profile.label.no-collections": {
     "message": "This user has no collections!"
   },
@@ -1019,9 +1010,6 @@
   "settings.profile.username.title": {
     "message": "Username"
   },
-  "settings.profile.visit-profile": {
-    "message": "Visit your profile"
-  },
   "settings.sessions.action.revoke-session": {
     "message": "Revoke session"
   },

pages/settings.vue

@@ -8,45 +8,57 @@
         <aside class="universal-card">
           <NavStack>
             <h3>Display</h3>
-            <NavStackItem link="/settings" :label="formatMessage(messages.appearanceTitle)">
+            <NavStackItem
+              link="/settings"
+              :label="formatMessage(commonSettingsMessages.appearance)"
+            >
               <PaintBrushIcon />
             </NavStackItem>
             <NavStackItem
               v-if="isStaging"
               link="/settings/language"
-              :label="formatMessage(messages.languageTitle)"
+              :label="formatMessage(commonSettingsMessages.language)"
             >
               <LanguagesIcon />
             </NavStackItem>
             <template v-if="auth.user">
               <h3>Account</h3>
-              <NavStackItem link="/settings/profile" :label="formatMessage(messages.profileTitle)">
+              <NavStackItem
+                link="/settings/profile"
+                :label="formatMessage(commonSettingsMessages.profile)"
+              >
                 <UserIcon />
               </NavStackItem>
-              <NavStackItem link="/settings/account" :label="formatMessage(messages.accountTitle)">
+              <NavStackItem
+                link="/settings/account"
+                :label="formatMessage(commonSettingsMessages.account)"
+              >
                 <ShieldIcon />
               </NavStackItem>
               <NavStackItem
                 link="/settings/authorizations"
-                :label="formatMessage(messages.authorizedAppsTitle)"
+                :label="formatMessage(commonSettingsMessages.authorizedApps)"
               >
                 <GridIcon />
               </NavStackItem>
               <NavStackItem
                 link="/settings/sessions"
-                :label="formatMessage(messages.sessionsTitle)"
+                :label="formatMessage(commonSettingsMessages.sessions)"
               >
                 <MonitorSmartphoneIcon />
               </NavStackItem>
             </template>
             <template v-if="auth.user">
               <h3>Developer</h3>
-              <NavStackItem link="/settings/pats" :label="formatMessage(messages.patsTitle)">
+              <NavStackItem
+                link="/settings/pats"
+                :label="formatMessage(commonSettingsMessages.pats)"
+              >
                 <KeyIcon />
               </NavStackItem>
               <NavStackItem
                 link="/settings/applications"
-                :label="formatMessage(messages.applicationsTitle)"
+                :label="formatMessage(commonSettingsMessages.applications)"
               >
                 <ServerIcon />
               </NavStackItem>
@@ -62,7 +74,6 @@
 </template>
 <script setup>
 import {
-  UsersIcon,
   ServerIcon,
   GridIcon,
   PaintBrushIcon,
@@ -75,45 +86,10 @@ import NavStack from '~/components/ui/NavStack.vue'
 import NavStackItem from '~/components/ui/NavStackItem.vue'
 import MonitorSmartphoneIcon from '~/assets/images/utils/monitor-smartphone.svg'
 
-import { commonMessages } from '~/utils/common-messages.ts'
+import { commonMessages, commonSettingsMessages } from '~/utils/common-messages.ts'
 
 const { formatMessage } = useVIntl()
 
-const messages = defineMessages({
-  appearanceTitle: {
-    id: 'settings.appearance.title',
-    defaultMessage: 'Appearance',
-  },
-  languageTitle: {
-    id: 'settings.language.title',
-    defaultMessage: 'Language',
-  },
-  profileTitle: {
-    id: 'settings.profile.title',
-    defaultMessage: 'Public profile',
-  },
-  accountTitle: {
-    id: 'settings.account.title',
-    defaultMessage: 'Account and security',
-  },
-  authorizedAppsTitle: {
-    id: 'settings.authorized-apps.title',
-    defaultMessage: 'Authorized apps',
-  },
-  sessionsTitle: {
-    id: 'settings.sessions.title',
-    defaultMessage: 'Sessions',
-  },
-  patsTitle: {
-    id: 'settings.pats.title',
-    defaultMessage: 'Personal access tokens',
-  },
-  applicationsTitle: {
-    id: 'settings.applications.title',
-    defaultMessage: 'Your applications',
-  },
-})
-
 const route = useRoute()
 const auth = await useAuth()
 const isStaging = useRuntimeConfig().public.siteUrl !== 'https://modrinth.com'

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()

pages/user/[id].vue

@@ -355,18 +355,6 @@ const messages = defineMessages({
     id: 'profile.button.report',
     defaultMessage: 'Report',
   },
-  profileUploadAvatarInput: {
-    id: 'profile.input.upload-avatar',
-    defaultMessage: 'Upload avatar',
-  },
-  profileEditUsernameLabel: {
-    id: 'profile.label.edit-username',
-    defaultMessage: 'Username',
-  },
-  profileEditBioLabel: {
-    id: 'profile.label.edit-bio',
-    defaultMessage: 'Bio',
-  },
   profileNoProjectsLabel: {
     id: 'profile.label.no-projects',
     defaultMessage: 'This user has no projects!',

utils/common-messages.ts

@@ -135,4 +135,43 @@ export const commonMessages = defineMessages({
     id: 'label.visibility',
     defaultMessage: 'Visibility',
   },
+  visitYourProfile: {
+    id: 'label.visit-your-profile',
+    defaultMessage: 'Visit your profile',
+  },
+})
+
+export const commonSettingsMessages = defineMessages({
+  appearance: {
+    id: 'settings.appearance.title',
+    defaultMessage: 'Appearance',
+  },
+  language: {
+    id: 'settings.language.title',
+    defaultMessage: 'Language',
+  },
+  profile: {
+    id: 'settings.profile.title',
+    defaultMessage: 'Public profile',
+  },
+  account: {
+    id: 'settings.account.title',
+    defaultMessage: 'Account and security',
+  },
+  authorizedApps: {
+    id: 'settings.authorized-apps.title',
+    defaultMessage: 'Authorized apps',
+  },
+  sessions: {
+    id: 'settings.sessions.title',
+    defaultMessage: 'Sessions',
+  },
+  pats: {
+    id: 'settings.pats.title',
+    defaultMessage: 'Personal access tokens',
+  },
+  applications: {
+    id: 'settings.applications.title',
+    defaultMessage: 'Your applications',
+  },
 })