From 08f39ddc78093f54d9cc57ec3e3f10973174395d Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 28 Dec 2023 17:02:50 +0100
Subject: [PATCH 01/22] Begin Work

---
 locales/en-US/index.json  | 18 ++++++++++++++++++
 pages/collection/[id].vue |  6 +++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 9875b6a6a2..7cc95215f9 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -8,6 +8,24 @@
   "button.save": {
     "message": "Save"
   },
+  "collection.label.owner": {
+    "message": "Owner"
+  },
+  "collection.label.private": {
+    "message": "Private"
+  },
+  "collection.label.public": {
+    "message": "Public"
+  },
+  "collection.label.rejected": {
+    "message": "Rejected"
+  },
+  "collection.label.unlisted": {
+    "message": "Unlisted"
+  },
+  "collection.title": {
+    "message": "{name} - Collection"
+  },
   "frog": {
     "message": "You've been frogged! 🐸"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index cd3ab0230a..fcac3b26bc 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -16,7 +16,7 @@
             <template v-if="canEdit && isEditing === false">
               <Button @click="isEditing = true">
                 <EditIcon />
-                Edit
+                {{ formatMessage(commonMessages.editButton) }}
               </Button>
               <Button id="delete-collection" @click="() => $refs.deleteModal.show()">
                 <TrashIcon />
@@ -100,11 +100,11 @@
             <div class="push-right input-group">
               <Button @click="isEditing = false">
                 <XIcon />
-                Cancel
+                {{ formatMessage(commonMessages.cancelButton) }}
               </Button>
               <Button color="primary" @click="saveChanges()">
                 <SaveIcon />
-                Save
+                {{ formatMessage(commonMessages.saveButton) }}
               </Button>
             </div>
           </template>

From 63a3fe6e5fd06c82e4d0289ebf9cd806263374d7 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 28 Dec 2023 17:06:55 +0100
Subject: [PATCH 02/22] Add more common messages

---
 pages/collection/[id].vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index fcac3b26bc..3cb59627f4 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -167,7 +167,12 @@
 
               <div class="metadata-item">
                 <div
-                  v-tooltip="$dayjs(collection.created).format('MMMM D, YYYY [at] h:mm A')"
+                  v-tooltip="
+                    formatMessage(commonMessages.dateAtTimeTooltip, {
+                      date: new Date(collection.created),
+                      time: new Date(collection.created),
+                    })
+                  "
                   class="date"
                 >
                   <CalendarIcon />
@@ -180,7 +185,12 @@
 
               <div v-if="collection.id !== 'following'" class="metadata-item">
                 <div
-                  v-tooltip="$dayjs(collection.created).format('MMMM D, YYYY [at] h:mm A')"
+                  v-tooltip="
+                    formatMessage(commonMessages.dateAtTimeTooltip, {
+                      date: new Date(collection.updated),
+                      time: new Date(collection.updated),
+                    })
+                  "
                   class="date"
                 >
                   <UpdatedIcon />

From 96d8844aa23b93547d0a0a66c34853d6a5db941f Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Thu, 28 Dec 2023 17:17:35 +0100
Subject: [PATCH 03/22] Work on modal

---
 locales/en-US/index.json  |  6 ++++++
 pages/collection/[id].vue | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 7cc95215f9..a4b980b786 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -23,6 +23,12 @@
   "collection.label.unlisted": {
     "message": "Unlisted"
   },
+  "collection.delete-modal.description": {
+    "message": "This will remove this collection forever. This action cannot be undone."
+  },
+  "collection.delete-modal.title": {
+    "message": "Are you sure you want to delete this collection?"
+  },
   "collection.title": {
     "message": "{name} - Collection"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 3cb59627f4..0ffd682080 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -3,8 +3,8 @@
     <ModalConfirm
       v-if="auth.user && auth.user.id === creator.id"
       ref="deleteModal"
-      title="Are you sure you want to delete this collection?"
-      description="This will remove this collection forever. This action cannot be undone."
+      :title="formatMessage(messages.deleteModalTitle)"
+      :description="formatMessage(messages.deleteModalDescription)"
       :has-to-type="false"
       proceed-label="Delete"
       @proceed="deleteCollection()"
@@ -374,6 +374,17 @@ import ProjectCard from '~/components/ui/ProjectCard.vue'
 const vintl = useVIntl()
 const { formatMessage } = vintl
 
+const messages = defineMessages({
+  deleteModalDescription: {
+    id: 'collection.delete-modal.description',
+    defaultMessage: 'This will remove this collection forever. This action cannot be undone.',
+  },
+  deleteModalTitle: {
+    id: 'collection.delete-modal.title',
+    defaultMessage: 'Are you sure you want to delete this collection?',
+  },
+})
+
 const data = useNuxtApp()
 const route = useRoute()
 const auth = await useAuth()

From a02bfee2dc3d168d08d32c295f8cb7621454800d Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 31 Dec 2023 12:38:51 +0100
Subject: [PATCH 04/22] Add more keys

---
 locales/en-US/index.json  |  9 ++++++
 pages/collection/[id].vue | 60 ++++++++++++++++++++++++++++++---------
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index a4b980b786..2ae464246c 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -8,6 +8,12 @@
   "button.save": {
     "message": "Save"
   },
+  "collection.label.created-at": {
+    "message": "Created {ago}"
+  },
+  "collection.label.curated-by": {
+    "message": "Curated by"
+  },
   "collection.label.owner": {
     "message": "Owner"
   },
@@ -23,6 +29,9 @@
   "collection.label.unlisted": {
     "message": "Unlisted"
   },
+  "collection.label.updated-at": {
+    "message": "Updated {ago}"
+  },
   "collection.delete-modal.description": {
     "message": "This will remove this collection forever. This action cannot be undone."
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 0ffd682080..9b71df8187 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -90,8 +90,8 @@
                 :multiple="false"
                 :display-name="
                   (s) => {
-                    if (s === 'listed') return 'Public'
-                    return capitalizeString(s)
+                    if (s === 'listed') return formatMessage(messages.publicLabel)
+                    return formatMessage(messages[`${s}Label`])
                   }
                 "
                 :searchable="false"
@@ -131,25 +131,25 @@
                   <template v-if="collection.status === 'listed'">
                     <WorldIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> Public </strong>
+                      <strong> {{ formatMessage(messages.publicLabel) }} </strong>
                     </div>
                   </template>
                   <template v-else-if="collection.status === 'unlisted'">
                     <LinkIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> Unlisted </strong>
+                      <strong> {{ formatMessage(messages.unlistedLabel) }} </strong>
                     </div>
                   </template>
                   <template v-else-if="collection.status === 'private'">
                     <LockIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> Private </strong>
+                      <strong> {{ formatMessage(messages.privateLabel) }} </strong>
                     </div>
                   </template>
                   <template v-else-if="collection.status === 'rejected'">
                     <XIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> Rejected </strong>
+                      <strong> {{ formatMessage(messages.rejectedLabel) }} </strong>
                     </div>
                   </template>
                 </div>
@@ -177,8 +177,9 @@
                 >
                   <CalendarIcon />
                   <label>
-                    Created
-                    {{ fromNow(collection.created) }}
+                    {{
+                      formatMessage(messages.createdAtLabel, { ago: formatRelativeTime(collection.created) })
+                    }}
                   </label>
                 </div>
               </div>
@@ -195,8 +196,9 @@
                 >
                   <UpdatedIcon />
                   <label>
-                    Updated
-                    {{ fromNow(collection.updated) }}
+                    {{
+                      formatMessage(messages.updatedAtLabel, { ago: formatRelativeTime(collection.updated) })
+                    }}
                   </label>
                 </div>
               </div>
@@ -205,7 +207,7 @@
             <hr class="card-divider" />
 
             <div class="collection-info">
-              <h2 class="card-header">Curated by</h2>
+              <h2 class="card-header">{{ formatMessage(messages.curatedByLabel) }}</h2>
               <div class="metadata-item">
                 <nuxt-link
                   class="team-member columns button-transparent"
@@ -215,7 +217,7 @@
 
                   <div class="member-info">
                     <p class="name">{{ creator.username }}</p>
-                    <p class="role">Owner</p>
+                    <p class="role">{{ formatMessage(messages.ownerLabel) }}</p>
                   </div>
                 </nuxt-link>
               </div>
@@ -341,7 +343,6 @@
 
 <script setup>
 import {
-  capitalizeString,
   Avatar,
   Button,
   CalendarIcon,
@@ -373,8 +374,17 @@ import ProjectCard from '~/components/ui/ProjectCard.vue'
 
 const vintl = useVIntl()
 const { formatMessage } = vintl
+const formatRelativeTime = useRelativeTime()
 
 const messages = defineMessages({
+  createdAtLabel: {
+    id: 'collection.label.created-at',
+    defaultMessage: 'Created {ago}',
+  },
+  curatedByLabel: {
+    id: 'collection.label.curated-by',
+    defaultMessage: 'Curated by',
+  },
   deleteModalDescription: {
     id: 'collection.delete-modal.description',
     defaultMessage: 'This will remove this collection forever. This action cannot be undone.',
@@ -383,6 +393,30 @@ const messages = defineMessages({
     id: 'collection.delete-modal.title',
     defaultMessage: 'Are you sure you want to delete this collection?',
   },
+  ownerLabel: {
+    id: 'collection.label.owner',
+    defaultMessage: 'Owner',
+  },
+  privateLabel: {
+    id: 'collection.label.private',
+    defaultMessage: 'Private',
+  },
+  publicLabel: {
+    id: 'collection.label.public',
+    defaultMessage: 'Public',
+  },
+  rejectedLabel: {
+    id: 'collection.label.rejected',
+    defaultMessage: 'Rejected',
+  },
+  unlistedLabel: {
+    id: 'collection.label.unlisted',
+    defaultMessage: 'Unlisted',
+  },
+  updatedAtLabel: {
+    id: 'collection.label.updated-at',
+    defaultMessage: 'Updated {ago}',
+  },
 })
 
 const data = useNuxtApp()

From ed6b5212e5d3679e6714b39c2c0f1821df768d6d Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 31 Dec 2023 12:48:46 +0100
Subject: [PATCH 05/22] Add keys for icon buttons

---
 locales/en-US/index.json  |  6 ++++++
 pages/collection/[id].vue | 12 ++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 2ae464246c..2975ffd51c 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -8,6 +8,12 @@
   "button.save": {
     "message": "Save"
   },
+  "collection.button.delete-icon": {
+    "message": "Delete icon"
+  },
+  "collection.button.edit-icon": {
+    "message": "Edit icon"
+  },
   "collection.label.created-at": {
     "message": "Created {ago}"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 9b71df8187..18c2f309d3 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -25,7 +25,7 @@
             </template>
             <template v-else-if="canEdit && isEditing === true">
               <PopoutMenu class="btn" position="bottom" direction="right">
-                <EditIcon /> Edit icon
+                <EditIcon /> {{ formatMessage(messages.editIconButton) }}
                 <template #menu>
                   <span class="icon-edit-menu">
                     <FileInput
@@ -53,7 +53,7 @@
                       "
                     >
                       <TrashIcon />
-                      Delete icon
+                      {{ formatMessage(messages.deleteIconButton) }}
                     </Button>
                   </span>
                 </template>
@@ -377,6 +377,14 @@ const { formatMessage } = vintl
 const formatRelativeTime = useRelativeTime()
 
 const messages = defineMessages({
+  editIconButton: {
+    id: 'collection.button.edit-icon',
+    defaultMessage: 'Edit icon',
+  },
+  deleteIconButton: {
+    id: 'collection.button.delete-icon',
+    defaultMessage: 'Delete icon',
+  },
   createdAtLabel: {
     id: 'collection.label.created-at',
     defaultMessage: 'Created {ago}',

From 3d2b2b52ce1b040568c9dc6d4933f6a868579d37 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 31 Dec 2023 12:58:11 +0100
Subject: [PATCH 06/22] Add more keys

---
 locales/en-US/index.json  | 6 ++++++
 pages/collection/[id].vue | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 2975ffd51c..f99a4ed6aa 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -20,6 +20,12 @@
   "collection.label.curated-by": {
     "message": "Curated by"
   },
+  "collection.label.no-projects": {
+    "message": "This collection has no projects!"
+  },
+  "collection.label.no-projects-auth": {
+    "message": "You don't have any projects.\nWould you like to <create-link>add one</create-link>?"
+  },
   "collection.label.owner": {
     "message": "Owner"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 18c2f309d3..a322e01677 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -334,7 +334,7 @@
             Would you like to
             <a class="link" @click.prevent="$router.push('/mods')"> add one</a>?
           </span>
-          <span v-else class="text">This collection has no projects!</span>
+          <span v-else class="text">{{ formatMessage(messages.noProjectsLabel) }}</span>
         </div>
       </div>
     </div>
@@ -401,6 +401,10 @@ const messages = defineMessages({
     id: 'collection.delete-modal.title',
     defaultMessage: 'Are you sure you want to delete this collection?',
   },
+  noProjectsLabel: {
+    id: 'collection.label.no-projects',
+    defaultMessage: 'This collection has no projects!',
+  },
   ownerLabel: {
     id: 'collection.label.owner',
     defaultMessage: 'Owner',

From ef7d114f66a20a169dee8f14c2ead137ceccdd87 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 31 Dec 2023 15:17:57 +0100
Subject: [PATCH 07/22] Handle error keys

---
 locales/en-US/index.json  |  6 ++++++
 pages/collection/[id].vue | 18 +++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index f99a4ed6aa..4234a91e07 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -14,6 +14,12 @@
   "collection.button.edit-icon": {
     "message": "Edit icon"
   },
+  "collection.button.upload-icon": {
+    "message": "Upload icon"
+  },
+  "collection.error.not-found": {
+    "message": "Delete icon"
+  },
   "collection.label.created-at": {
     "message": "Created {ago}"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index a322e01677..d1c5a745e2 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -39,7 +39,7 @@
                       @change="showPreviewImage"
                     >
                       <UploadIcon />
-                      Upload icon
+                      {{ formatMessage(messages.uploadIconButton) }}
                     </FileInput>
                     <Button
                       v-if="!deletedIcon && (previewImage || collection.icon_url)"
@@ -389,6 +389,10 @@ const messages = defineMessages({
     id: 'collection.label.created-at',
     defaultMessage: 'Created {ago}',
   },
+  collectionNotFoundError: {
+    id: 'collection.error.not-found',
+    defaultMessage: 'Collection not found',
+  },
   curatedByLabel: {
     id: 'collection.label.curated-by',
     defaultMessage: 'Curated by',
@@ -429,6 +433,10 @@ const messages = defineMessages({
     id: 'collection.label.updated-at',
     defaultMessage: 'Updated {ago}',
   },
+  uploadIconButton: {
+    id: 'collection.button.upload-icon',
+    defaultMessage: 'Upload icon',
+  },
 })
 
 const data = useNuxtApp()
@@ -489,7 +497,7 @@ try {
   throw createError({
     fatal: true,
     statusCode: 404,
-    message: 'Collection not found',
+    message: formatMessage(messages.collectionNotFoundError),
   })
 }
 
@@ -497,7 +505,7 @@ if (!collection.value) {
   throw createError({
     fatal: true,
     statusCode: 404,
-    message: 'Collection not found',
+    message: formatMessage(messages.collectionNotFoundError),
   })
 }
 
@@ -591,7 +599,7 @@ async function saveChanges() {
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err,
       type: 'error',
     })
@@ -611,7 +619,7 @@ async function deleteCollection() {
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err.data.description,
       type: 'error',
     })

From c0d878b45aa29232a5213ee4dff041984a3ec978 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 31 Dec 2023 15:25:23 +0100
Subject: [PATCH 08/22] Add more keys

---
 locales/en-US/index.json  |  6 ++++++
 pages/collection/[id].vue | 12 ++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 4234a91e07..3d70c07b28 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -17,6 +17,12 @@
   "collection.button.upload-icon": {
     "message": "Upload icon"
   },
+  "collection.button.remove-project": {
+    "message": "Remove project"
+  },
+  "collection.button.unfollow-project": {
+    "message": "Unfollow project"
+  },
   "collection.error.not-found": {
     "message": "Delete icon"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index d1c5a745e2..8726077434 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -315,7 +315,7 @@
               "
             >
               <TrashIcon />
-              Remove project
+              {{ formatMessage(messages.removeProjectButton) }}
             </button>
             <button
               v-if="collection.id === 'following'"
@@ -323,7 +323,7 @@
               @click="userUnfollowProject(project)"
             >
               <TrashIcon />
-              Unfollow project
+              {{ formatMessage(messages.unfollowProjectButton) }}
             </button>
           </ProjectCard>
         </div>
@@ -425,6 +425,14 @@ const messages = defineMessages({
     id: 'collection.label.rejected',
     defaultMessage: 'Rejected',
   },
+  removeProjectButton: {
+    id: 'collection.button.remove-project',
+    defaultMessage: 'Remove project',
+  },
+  unfollowProjectButton: {
+    id: 'collection.button.unfollow-project',
+    defaultMessage: 'Unfollow project',
+  },
   unlistedLabel: {
     id: 'collection.label.unlisted',
     defaultMessage: 'Unlisted',

From 57be3c08bc6be27e0a8134250bad25c473f0e5c1 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 15:46:20 +0100
Subject: [PATCH 09/22] Add more keys

---
 locales/en-US/index.json  |  3 +++
 pages/collection/[id].vue | 28 ++++++++++++++++++++--------
 utils/common-messages.ts  |  4 ++++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 3d70c07b28..6ce5157c87 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -89,6 +89,9 @@
   "input.view.list": {
     "message": "List view"
   },
+  "label.delete": {
+    "message": "Delete"
+  },
   "notification.error.title": {
     "message": "An error occurred"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 8726077434..6fd8b1f435 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -6,7 +6,7 @@
       :title="formatMessage(messages.deleteModalTitle)"
       :description="formatMessage(messages.deleteModalDescription)"
       :has-to-type="false"
-      proceed-label="Delete"
+      :proceed-label="formatMessage(commonMessages.deleteLabel)"
       @proceed="deleteCollection()"
     />
     <div class="normal-page">
@@ -20,7 +20,7 @@
               </Button>
               <Button id="delete-collection" @click="() => $refs.deleteModal.show()">
                 <TrashIcon />
-                Delete
+                {{ formatMessage(commonMessages.deleteLabel) }}
               </Button>
             </template>
             <template v-else-if="canEdit && isEditing === true">
@@ -178,7 +178,9 @@
                   <CalendarIcon />
                   <label>
                     {{
-                      formatMessage(messages.createdAtLabel, { ago: formatRelativeTime(collection.created) })
+                      formatMessage(messages.createdAtLabel, {
+                        ago: formatRelativeTime(collection.created),
+                      })
                     }}
                   </label>
                 </div>
@@ -197,7 +199,9 @@
                   <UpdatedIcon />
                   <label>
                     {{
-                      formatMessage(messages.updatedAtLabel, { ago: formatRelativeTime(collection.updated) })
+                      formatMessage(messages.updatedAtLabel, {
+                        ago: formatRelativeTime(collection.updated),
+                      })
                     }}
                   </label>
                 </div>
@@ -329,10 +333,14 @@
         </div>
         <div v-else class="error">
           <UpToDate class="icon" /><br />
-          <span v-if="auth.user && auth.user.id === creator.id" class="text">
-            You don't have any projects.<br />
-            Would you like to
-            <a class="link" @click.prevent="$router.push('/mods')"> add one</a>?
+          <span v-if="auth.user && auth.user.id === creator.id" class="preserve-lines text">
+            <IntlFormatted :message-id="messages.noProjectsAuthLabel">
+              <template #create-link="{ children }">
+                <a class="link" @click.prevent="$router.push('/mods')">
+                  <component :is="() => children" />
+                </a>
+              </template>
+            </IntlFormatted>
           </span>
           <span v-else class="text">{{ formatMessage(messages.noProjectsLabel) }}</span>
         </div>
@@ -409,6 +417,10 @@ const messages = defineMessages({
     id: 'collection.label.no-projects',
     defaultMessage: 'This collection has no projects!',
   },
+  noProjectsAuthLabel: {
+    id: 'collection.label.no-projects-auth',
+    defaultMessage: "You don't have any projects.\nWould you like to <create-link>add one</create-link>?",
+  },
   ownerLabel: {
     id: 'collection.label.owner',
     defaultMessage: 'Owner',
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 965175a299..62b4d6d228 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -11,6 +11,10 @@ export const commonMessages = defineMessages({
     id: 'tooltip.date-at-time',
     defaultMessage: '{date, date, long} at {time, time, short}',
   },
+  deleteLabel: {
+    id: 'label.delete',
+    defaultMessage: 'Delete',
+  },
   editButton: {
     id: 'button.edit',
     defaultMessage: 'Edit',

From 6864ae671b49a207a0758a4bb841c8d64a400bbd Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 15:55:59 +0100
Subject: [PATCH 10/22] Edit fields keys

---
 locales/en-US/index.json  |  9 +++++++++
 pages/collection/[id].vue |  6 +++---
 utils/common-messages.ts  | 12 ++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 6ce5157c87..bfeecd3218 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -92,6 +92,15 @@
   "label.delete": {
     "message": "Delete"
   },
+  "label.description": {
+    "message": "Description"
+  },
+  "label.title": {
+    "message": "Title"
+  },
+  "label.visibility": {
+    "message": "Visibility"
+  },
   "notification.error.title": {
     "message": "An error occurred"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 6fd8b1f435..315c9224be 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -70,17 +70,17 @@
                 />
               </div>
               <label for="collection-title">
-                <span class="label__title"> Title </span>
+                <span class="label__title"> {{ formatMessage(commonMessages.titleLabel) }} </span>
               </label>
               <input id="collection-title" v-model="name" maxlength="255" type="text" />
               <label for="collection-description">
-                <span class="label__title"> Description </span>
+                <span class="label__title"> {{ formatMessage(commonMessages.descriptionLabel) }} </span>
               </label>
               <div class="textarea-wrapper">
                 <textarea id="collection-description" v-model="summary" maxlength="255" />
               </div>
               <label for="visibility">
-                <span class="label__title"> Visibility </span>
+                <span class="label__title"> {{ formatMessage(commonMessages.visibilityLabel) }} </span>
               </label>
               <DropdownSelect
                 id="visibility"
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 62b4d6d228..bc0a9c1c26 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -15,6 +15,10 @@ export const commonMessages = defineMessages({
     id: 'label.delete',
     defaultMessage: 'Delete',
   },
+  descriptionLabel: {
+    id: 'label.description',
+    defaultMessage: 'Description',
+  },
   editButton: {
     id: 'button.edit',
     defaultMessage: 'Edit',
@@ -39,4 +43,12 @@ export const commonMessages = defineMessages({
     id: 'button.save',
     defaultMessage: 'Save',
   },
+  titleLabel: {
+    id: 'label.title',
+    defaultMessage: 'Title',
+  },
+  visibilityLabel: {
+    id: 'label.visibility',
+    defaultMessage: 'Visibility',
+  },
 })

From 657c8864c1c8b2b984120709cd8b29558e2470c3 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 16:30:09 +0100
Subject: [PATCH 11/22] Finish (almost)

---
 locales/en-US/index.json  | 21 +++++++++++-----
 pages/collection/[id].vue | 52 +++++++++++++++++++++++++++++++--------
 2 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index bfeecd3218..923ed6add5 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -23,9 +23,21 @@
   "collection.button.unfollow-project": {
     "message": "Unfollow project"
   },
+  "collection.delete-modal.description": {
+    "message": "This will remove this collection forever. This action cannot be undone."
+  },
+  "collection.delete-modal.title": {
+    "message": "Are you sure you want to delete this collection?"
+  },
+  "collection.description": {
+    "message": "{description} - View the collection {name} by {username} on Modrinth"
+  },
   "collection.error.not-found": {
     "message": "Delete icon"
   },
+  "collection.label.collection": {
+    "message": "Collection"
+  },
   "collection.label.created-at": {
     "message": "Created {ago}"
   },
@@ -47,6 +59,9 @@
   "collection.label.public": {
     "message": "Public"
   },
+  "collection.label.projects-count": {
+    "message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
+  },
   "collection.label.rejected": {
     "message": "Rejected"
   },
@@ -56,12 +71,6 @@
   "collection.label.updated-at": {
     "message": "Updated {ago}"
   },
-  "collection.delete-modal.description": {
-    "message": "This will remove this collection forever. This action cannot be undone."
-  },
-  "collection.delete-modal.title": {
-    "message": "Are you sure you want to delete this collection?"
-  },
   "collection.title": {
     "message": "{name} - Collection"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 315c9224be..e17bfc7bba 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -74,13 +74,17 @@
               </label>
               <input id="collection-title" v-model="name" maxlength="255" type="text" />
               <label for="collection-description">
-                <span class="label__title"> {{ formatMessage(commonMessages.descriptionLabel) }} </span>
+                <span class="label__title">
+                  {{ formatMessage(commonMessages.descriptionLabel) }}
+                </span>
               </label>
               <div class="textarea-wrapper">
                 <textarea id="collection-description" v-model="summary" maxlength="255" />
               </div>
               <label for="visibility">
-                <span class="label__title"> {{ formatMessage(commonMessages.visibilityLabel) }} </span>
+                <span class="label__title">
+                  {{ formatMessage(commonMessages.visibilityLabel) }}
+                </span>
               </label>
               <DropdownSelect
                 id="visibility"
@@ -117,7 +121,7 @@
               <h1 class="title">{{ collection.name }}</h1>
 
               <div>
-                <span class="collection-label"><BoxIcon /> Collection</span>
+                <span class="collection-label"><BoxIcon /> {{ formatMessage(messages.collectionLabel) }}</span>
               </div>
 
               <div class="collection-info">
@@ -158,10 +162,16 @@
               <div class="primary-stat">
                 <LibraryIcon class="primary-stat__icon" aria-hidden="true" />
                 <div class="primary-stat__text">
-                  <span class="primary-stat__counter">
-                    {{ $formatNumber(projects.length || 0) }}
-                  </span>
-                  project<span v-if="projects.length !== 1">s</span>
+                  <IntlFormatted
+                    :message-id="messages.projectsCountLabel"
+                    :values="{ count: formatCompactNumber(projects.length || 0) }"
+                  >
+                    <template #stat="{ children }">
+                      <span class="primary-stat__counter">
+                        <component :is="() => normalizeChildren(children)" />
+                      </span>
+                    </template>
+                  </IntlFormatted>
                 </div>
               </div>
 
@@ -383,8 +393,21 @@ import ProjectCard from '~/components/ui/ProjectCard.vue'
 const vintl = useVIntl()
 const { formatMessage } = vintl
 const formatRelativeTime = useRelativeTime()
+const formatCompactNumber = useCompactNumber()
 
 const messages = defineMessages({
+  collectionDescription: {
+    id: 'collection.description',
+    defaultMessage: '{description} - View the collection {name} by {username} on Modrinth',
+  },
+  collectionLabel: {
+    id: 'collection.label.collection',
+    defaultMessage: 'Collection',
+  },
+  collectionTitle: {
+    id: 'collection.title',
+    defaultMessage: '{name} - Collection',
+  },
   editIconButton: {
     id: 'collection.button.edit-icon',
     defaultMessage: 'Edit icon',
@@ -419,7 +442,8 @@ const messages = defineMessages({
   },
   noProjectsAuthLabel: {
     id: 'collection.label.no-projects-auth',
-    defaultMessage: "You don't have any projects.\nWould you like to <create-link>add one</create-link>?",
+    defaultMessage:
+      "You don't have any projects.\nWould you like to <create-link>add one</create-link>?",
   },
   ownerLabel: {
     id: 'collection.label.owner',
@@ -429,6 +453,10 @@ const messages = defineMessages({
     id: 'collection.label.private',
     defaultMessage: 'Private',
   },
+  projectsCountLabel: {
+    id: 'collection.label.projects-count',
+    defaultMessage: '{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
+  },
   publicLabel: {
     id: 'collection.label.public',
     defaultMessage: 'Public',
@@ -529,8 +557,12 @@ if (!collection.value) {
   })
 }
 
-const title = `${collection.value.name} - Collection`
-const description = `${collection.value.description} - View the collection ${collection.value.description} by ${creator.value.username} on Modrinth`
+const title = formatMessage(messages.collectionTitle, { name: collection.value.name })
+const description = formatMessage(messages.collectionDescription, { 
+  name: collection.value.name,
+  description: collection.value.description,
+  username: creator.value.username,
+})
 
 if (!route.name.startsWith('type-id-settings')) {
   useSeoMeta({

From aeb9da32d20849f20ae3f0551131c5298043289b Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 16:37:56 +0100
Subject: [PATCH 12/22] Finish work for collection page

---
 locales/en-US/index.json  |  6 ++++++
 pages/collection/[id].vue | 12 ++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 923ed6add5..387d6b5630 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -32,6 +32,9 @@
   "collection.description": {
     "message": "{description} - View the collection {name} by {username} on Modrinth"
   },
+  "collection.description.following": {
+    "message": "Auto-generated collection of all the projects you're following."
+  },
   "collection.error.not-found": {
     "message": "Delete icon"
   },
@@ -74,6 +77,9 @@
   "collection.title": {
     "message": "{name} - Collection"
   },
+  "collection.title.following": {
+    "message": "Followed projects"
+  },
   "frog": {
     "message": "You've been frogged! 🐸"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index e17bfc7bba..5da3d8992d 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -436,6 +436,14 @@ const messages = defineMessages({
     id: 'collection.delete-modal.title',
     defaultMessage: 'Are you sure you want to delete this collection?',
   },
+  followingCollectionDescription: {
+    id: 'collection.description.following',
+    defaultMessage: "Auto-generated collection of all the projects you're following.",
+  },
+  followingCollectionTitle: {
+    id: 'collection.title.following',
+    defaultMessage: 'Followed projects',
+  },
   noProjectsLabel: {
     id: 'collection.label.no-projects',
     defaultMessage: 'This collection has no projects!',
@@ -510,8 +518,8 @@ try {
     collection = ref({
       id: 'following',
       icon_url: 'https://cdn.modrinth.com/follow-collection.png',
-      name: 'Followed projects',
-      description: "Auto-generated collection of all the projects you're following.",
+      name: formatMessage(messages.followingCollectionTitle),
+      description: formatMessage(messages.followingCollectionDescription),
       status: 'private',
       user: auth.value.user.id,
       created: auth.value.user.created,

From 1eedb5461e2125a9ff5fd65e26f72502fab58aee Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 17:47:19 +0100
Subject: [PATCH 13/22] Dashboard Nav stack & Format

---
 locales/en-US/index.json        |  3 +++
 pages/collection/[id].vue       |  9 +++++---
 pages/dashboard.vue             | 14 +++++++++++-
 pages/dashboard/collections.vue | 40 ++++++++++++++++++++++++++++-----
 4 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 387d6b5630..a87eb9b96a 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -80,6 +80,9 @@
   "collection.title.following": {
     "message": "Followed projects"
   },
+  "dashboard.collections.title": {
+    "message": "Collections"
+  },
   "frog": {
     "message": "You've been frogged! 🐸"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 5da3d8992d..52af8d3ddb 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -121,7 +121,9 @@
               <h1 class="title">{{ collection.name }}</h1>
 
               <div>
-                <span class="collection-label"><BoxIcon /> {{ formatMessage(messages.collectionLabel) }}</span>
+                <span class="collection-label">
+                  <BoxIcon /> {{ formatMessage(messages.collectionLabel) }}
+                </span>
               </div>
 
               <div class="collection-info">
@@ -463,7 +465,8 @@ const messages = defineMessages({
   },
   projectsCountLabel: {
     id: 'collection.label.projects-count',
-    defaultMessage: '{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
+    defaultMessage:
+      '{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
   },
   publicLabel: {
     id: 'collection.label.public',
@@ -566,7 +569,7 @@ if (!collection.value) {
 }
 
 const title = formatMessage(messages.collectionTitle, { name: collection.value.name })
-const description = formatMessage(messages.collectionDescription, { 
+const description = formatMessage(messages.collectionDescription, {
   name: collection.value.name,
   description: collection.value.description,
   username: creator.value.username,
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 2eb3a4b313..a60033dec1 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -24,7 +24,10 @@
           <NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
             <ListIcon />
           </NavStackItem>
-          <NavStackItem link="/dashboard/collections" label="Collections">
+          <NavStackItem
+            link="/dashboard/collections"
+            :label="formatMessage(messages.collectionsTitle)"
+          >
             <LibraryIcon />
           </NavStackItem>
           <NavStackItem link="/dashboard/revenue" label="Revenue">
@@ -50,6 +53,15 @@ import ReportIcon from '~/assets/images/utils/report.svg'
 import NotificationsIcon from '~/assets/images/utils/bell.svg'
 import HeartIcon from '~/assets/images/utils/heart.svg'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  collectionsTitle: {
+    id: 'dashboard.collections.title',
+    defaultMessage: 'Collections',
+  },
+})
+
 definePageMeta({
   middleware: 'auth',
 })
diff --git a/pages/dashboard/collections.vue b/pages/dashboard/collections.vue
index 553dbd295a..1c8764c921 100644
--- a/pages/dashboard/collections.vue
+++ b/pages/dashboard/collections.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="universal-card">
     <CollectionCreateModal ref="modal_creation" />
-    <h2>Collections</h2>
+    <h2>{{ formatMessage(messages.collectionsTitle) }}</h2>
     <div class="search-row">
       <div class="iconified-input">
         <label for="search-input" hidden>Search your collections</label>
@@ -50,19 +50,19 @@
             <div class="stats">
               <template v-if="collection.status === 'listed'">
                 <WorldIcon />
-                <span> Public </span>
+                <span> {{ formatMessage(messages.publicLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'unlisted'">
                 <LinkIcon />
-                <span> Unlisted </span>
+                <span> {{ formatMessage(messages.unlistedLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'private'">
                 <LockIcon />
-                <span> Private </span>
+                <span> {{ formatMessage(messages.privateLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'rejected'">
                 <XIcon />
-                <span> Rejected </span>
+                <span> {{ formatMessage(messages.rejectedLabel) }} </span>
               </template>
             </div>
           </div>
@@ -76,6 +76,36 @@ import { Avatar, BoxIcon, SearchIcon, XIcon, Button, PlusIcon, LinkIcon, LockIco
 import WorldIcon from '~/assets/images/utils/world.svg'
 import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
 
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+  collectionsTitle: {
+    id: 'dashboard.collections.title',
+    defaultMessage: 'Collections',
+  },
+  privateLabel: {
+    id: 'collection.label.private',
+    defaultMessage: 'Private',
+  },
+  projectsCountLabel: {
+    id: 'collection.label.projects-count',
+    defaultMessage:
+      '{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
+  },
+  publicLabel: {
+    id: 'collection.label.public',
+    defaultMessage: 'Public',
+  },
+  rejectedLabel: {
+    id: 'collection.label.rejected',
+    defaultMessage: 'Rejected',
+  },
+  unlistedLabel: {
+    id: 'collection.label.unlisted',
+    defaultMessage: 'Unlisted',
+  },
+})
+
 definePageMeta({
   middleware: 'auth',
 })

From e3f7a01a82689d1cc4265561737ee37af3329ebc Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 18:15:09 +0100
Subject: [PATCH 14/22] WIP

---
 locales/en-US/index.json        | 3 +++
 pages/dashboard/collections.vue | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index a87eb9b96a..0c9d462b73 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -80,6 +80,9 @@
   "collection.title.following": {
     "message": "Followed projects"
   },
+  "dashboard.collections.button.create-new": {
+    "message": "Create new"
+  },
   "dashboard.collections.title": {
     "message": "Collections"
   },
diff --git a/pages/dashboard/collections.vue b/pages/dashboard/collections.vue
index 1c8764c921..495600f813 100644
--- a/pages/dashboard/collections.vue
+++ b/pages/dashboard/collections.vue
@@ -12,7 +12,7 @@
         </Button>
       </div>
       <Button color="primary" @click="$refs.modal_creation.show()">
-        <PlusIcon /> Create new
+        <PlusIcon /> {{ formatMessage(messages.createNewButton) }}
       </Button>
     </div>
     <div class="collections-grid">
@@ -79,6 +79,10 @@ import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
+  createNewButton: {
+    id: 'dashboard.collections.button.create-new',
+    defaultMessage: 'Create new',
+  },
   collectionsTitle: {
     id: 'dashboard.collections.title',
     defaultMessage: 'Collections',

From b328862eb3027f14952b5aedc455cb170783f50a Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 18:39:48 +0100
Subject: [PATCH 15/22] Move some messages to common

---
 locales/en-US/index.json        | 27 +++++++++++++++------------
 pages/collection/[id].vue       | 28 ++++++----------------------
 pages/dashboard/collections.vue | 31 ++++++++++---------------------
 utils/common-messages.ts        | 16 ++++++++++++++++
 4 files changed, 47 insertions(+), 55 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 0c9d462b73..36e8c84814 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -56,21 +56,9 @@
   "collection.label.owner": {
     "message": "Owner"
   },
-  "collection.label.private": {
-    "message": "Private"
-  },
-  "collection.label.public": {
-    "message": "Public"
-  },
   "collection.label.projects-count": {
     "message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
   },
-  "collection.label.rejected": {
-    "message": "Rejected"
-  },
-  "collection.label.unlisted": {
-    "message": "Unlisted"
-  },
   "collection.label.updated-at": {
     "message": "Updated {ago}"
   },
@@ -83,6 +71,9 @@
   "dashboard.collections.button.create-new": {
     "message": "Create new"
   },
+  "dashboard.collections.label.projects-count": {
+    "message": "{count, plural, one {{count} project} other {{count} projects}}"
+  },
   "dashboard.collections.title": {
     "message": "Collections"
   },
@@ -116,9 +107,21 @@
   "label.description": {
     "message": "Description"
   },
+  "label.private": {
+    "message": "Private"
+  },
+  "label.public": {
+    "message": "Public"
+  },
+  "label.rejected": {
+    "message": "Rejected"
+  },
   "label.title": {
     "message": "Title"
   },
+  "label.unlisted": {
+    "message": "Unlisted"
+  },
   "label.visibility": {
     "message": "Visibility"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 52af8d3ddb..e70a2a0533 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -94,8 +94,8 @@
                 :multiple="false"
                 :display-name="
                   (s) => {
-                    if (s === 'listed') return formatMessage(messages.publicLabel)
-                    return formatMessage(messages[`${s}Label`])
+                    if (s === 'listed') return formatMessage(commonMessages.publicLabel)
+                    return formatMessage(commonMessages[`${s}Label`])
                   }
                 "
                 :searchable="false"
@@ -137,25 +137,25 @@
                   <template v-if="collection.status === 'listed'">
                     <WorldIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> {{ formatMessage(messages.publicLabel) }} </strong>
+                      <strong> {{ formatMessage(commonMessages.publicLabel) }} </strong>
                     </div>
                   </template>
                   <template v-else-if="collection.status === 'unlisted'">
                     <LinkIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> {{ formatMessage(messages.unlistedLabel) }} </strong>
+                      <strong> {{ formatMessage(commonMessages.unlistedLabel) }} </strong>
                     </div>
                   </template>
                   <template v-else-if="collection.status === 'private'">
                     <LockIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> {{ formatMessage(messages.privateLabel) }} </strong>
+                      <strong> {{ formatMessage(commonMessages.privateLabel) }} </strong>
                     </div>
                   </template>
                   <template v-else-if="collection.status === 'rejected'">
                     <XIcon class="primary-stat__icon" aria-hidden="true" />
                     <div class="primary-stat__text">
-                      <strong> {{ formatMessage(messages.rejectedLabel) }} </strong>
+                      <strong> {{ formatMessage(commonMessages.rejectedLabel) }} </strong>
                     </div>
                   </template>
                 </div>
@@ -459,23 +459,11 @@ const messages = defineMessages({
     id: 'collection.label.owner',
     defaultMessage: 'Owner',
   },
-  privateLabel: {
-    id: 'collection.label.private',
-    defaultMessage: 'Private',
-  },
   projectsCountLabel: {
     id: 'collection.label.projects-count',
     defaultMessage:
       '{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
   },
-  publicLabel: {
-    id: 'collection.label.public',
-    defaultMessage: 'Public',
-  },
-  rejectedLabel: {
-    id: 'collection.label.rejected',
-    defaultMessage: 'Rejected',
-  },
   removeProjectButton: {
     id: 'collection.button.remove-project',
     defaultMessage: 'Remove project',
@@ -484,10 +472,6 @@ const messages = defineMessages({
     id: 'collection.button.unfollow-project',
     defaultMessage: 'Unfollow project',
   },
-  unlistedLabel: {
-    id: 'collection.label.unlisted',
-    defaultMessage: 'Unlisted',
-  },
   updatedAtLabel: {
     id: 'collection.label.updated-at',
     defaultMessage: 'Updated {ago}',
diff --git a/pages/dashboard/collections.vue b/pages/dashboard/collections.vue
index 495600f813..e08334b1b5 100644
--- a/pages/dashboard/collections.vue
+++ b/pages/dashboard/collections.vue
@@ -28,8 +28,8 @@
             Auto-generated collection of all the projects you're following.
           </span>
           <div class="stat-bar">
-            <div class="stats"><BoxIcon /> {{ user.follows.length }} projects</div>
-            <div class="stats"><LockIcon /> <span> Private </span></div>
+            <div class="stats"><BoxIcon /> {{ formatMessage(messages.projectsCountLabel, { count: formatCompactNumber(user.follows.length) }) }}</div>
+            <div class="stats"><LockIcon /> <span> {{ formatMessage(commonMessages.privateLabel) }} </span></div>
           </div>
         </div>
       </nuxt-link>
@@ -46,23 +46,23 @@
             {{ collection.description }}
           </span>
           <div class="stat-bar">
-            <div class="stats"><BoxIcon /> {{ collection.projects?.length || 0 }} projects</div>
+            <div class="stats"><BoxIcon /> {{ formatMessage(messages.projectsCountLabel, { count: formatCompactNumber(collection.projects?.length || 0) }) }}</div>
             <div class="stats">
               <template v-if="collection.status === 'listed'">
                 <WorldIcon />
-                <span> {{ formatMessage(messages.publicLabel) }} </span>
+                <span> {{ formatMessage(commonMessages.publicLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'unlisted'">
                 <LinkIcon />
-                <span> {{ formatMessage(messages.unlistedLabel) }} </span>
+                <span> {{ formatMessage(commonMessages.unlistedLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'private'">
                 <LockIcon />
-                <span> {{ formatMessage(messages.privateLabel) }} </span>
+                <span> {{ formatMessage(commonMessages.privateLabel) }} </span>
               </template>
               <template v-else-if="collection.status === 'rejected'">
                 <XIcon />
-                <span> {{ formatMessage(messages.rejectedLabel) }} </span>
+                <span> {{ formatMessage(commonMessages.rejectedLabel) }} </span>
               </template>
             </div>
           </div>
@@ -77,6 +77,7 @@ import WorldIcon from '~/assets/images/utils/world.svg'
 import CollectionCreateModal from '~/components/ui/CollectionCreateModal.vue'
 
 const { formatMessage } = useVIntl()
+const formatCompactNumber = useCompactNumber()
 
 const messages = defineMessages({
   createNewButton: {
@@ -92,21 +93,9 @@ const messages = defineMessages({
     defaultMessage: 'Private',
   },
   projectsCountLabel: {
-    id: 'collection.label.projects-count',
+    id: 'dashboard.collections.label.projects-count',
     defaultMessage:
-      '{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}',
-  },
-  publicLabel: {
-    id: 'collection.label.public',
-    defaultMessage: 'Public',
-  },
-  rejectedLabel: {
-    id: 'collection.label.rejected',
-    defaultMessage: 'Rejected',
-  },
-  unlistedLabel: {
-    id: 'collection.label.unlisted',
-    defaultMessage: 'Unlisted',
+      '{count, plural, one {{count} project} other {{count} projects}}',
   },
 })
 
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index bc0a9c1c26..30c4b52768 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -39,6 +39,18 @@ export const commonMessages = defineMessages({
     id: 'notification.error.title',
     defaultMessage: 'An error occurred',
   },
+  privateLabel: {
+    id: 'collection.label.private',
+    defaultMessage: 'Private',
+  },
+  publicLabel: {
+    id: 'label.public',
+    defaultMessage: 'Public',
+  },
+  rejectedLabel: {
+    id: 'label.rejected',
+    defaultMessage: 'Rejected',
+  },
   saveButton: {
     id: 'button.save',
     defaultMessage: 'Save',
@@ -47,6 +59,10 @@ export const commonMessages = defineMessages({
     id: 'label.title',
     defaultMessage: 'Title',
   },
+  unlistedLabel: {
+    id: 'label.unlisted',
+    defaultMessage: 'Unlisted',
+  },
   visibilityLabel: {
     id: 'label.visibility',
     defaultMessage: 'Visibility',

From b36736336c7d3950dc29d6c8bbd40a31e3d9b400 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 18:46:39 +0100
Subject: [PATCH 16/22] Finish work

---
 locales/en-US/index.json        |  6 ++++++
 pages/dashboard/collections.vue | 26 +++++++++++++++++++-------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 36e8c84814..e3b58502f5 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -74,6 +74,12 @@
   "dashboard.collections.label.projects-count": {
     "message": "{count, plural, one {{count} project} other {{count} projects}}"
   },
+  "dashboard.collections.label.search-input": {
+    "message": "Search your collections"
+  },
+  "dashboard.collections.long-title": {
+    "message": "Your collections"
+  },
   "dashboard.collections.title": {
     "message": "Collections"
   },
diff --git a/pages/dashboard/collections.vue b/pages/dashboard/collections.vue
index e08334b1b5..2298887a84 100644
--- a/pages/dashboard/collections.vue
+++ b/pages/dashboard/collections.vue
@@ -4,7 +4,7 @@
     <h2>{{ formatMessage(messages.collectionsTitle) }}</h2>
     <div class="search-row">
       <div class="iconified-input">
-        <label for="search-input" hidden>Search your collections</label>
+        <label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
         <SearchIcon />
         <input id="search-input" v-model="filterQuery" type="text" />
         <Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
@@ -23,9 +23,9 @@
       >
         <Avatar src="https://cdn.modrinth.com/follow-collection.png" class="icon" />
         <div class="details">
-          <span class="title">Followed projects</span>
+          <span class="title">{{ formatMessage(messages.followingCollectionTitle) }}</span>
           <span class="description">
-            Auto-generated collection of all the projects you're following.
+            {{ formatMessage(messages.followingCollectionDescription) }}
           </span>
           <div class="stat-bar">
             <div class="stats"><BoxIcon /> {{ formatMessage(messages.projectsCountLabel, { count: formatCompactNumber(user.follows.length) }) }}</div>
@@ -84,19 +84,31 @@ const messages = defineMessages({
     id: 'dashboard.collections.button.create-new',
     defaultMessage: 'Create new',
   },
+  collectionsLongTitle: {
+    id: 'dashboard.collections.title',
+    defaultMessage: 'Your collections',
+  },
   collectionsTitle: {
     id: 'dashboard.collections.title',
     defaultMessage: 'Collections',
   },
-  privateLabel: {
-    id: 'collection.label.private',
-    defaultMessage: 'Private',
+  followingCollectionDescription: {
+    id: 'collection.description.following',
+    defaultMessage: "Auto-generated collection of all the projects you're following.",
+  },
+  followingCollectionTitle: {
+    id: 'collection.title.following',
+    defaultMessage: 'Followed projects',
   },
   projectsCountLabel: {
     id: 'dashboard.collections.label.projects-count',
     defaultMessage:
       '{count, plural, one {{count} project} other {{count} projects}}',
   },
+  searchInputLabel: {
+    id: 'dashboard.collections.label.search-input',
+    defaultMessage: 'Search your collections',
+  },
 })
 
 definePageMeta({
@@ -104,7 +116,7 @@ definePageMeta({
 })
 
 useHead({
-  title: 'Your collections - Modrinth',
+  title: () => `${formatMessage(messages.collectionsLongTitle)} - Modrinth`,
 })
 
 const user = await useUser()

From feb6bf918670b692b717f190756b6ba975700ef3 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 18:47:56 +0100
Subject: [PATCH 17/22] Format

---
 pages/dashboard/collections.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/pages/dashboard/collections.vue b/pages/dashboard/collections.vue
index 2298887a84..7a3cb43ad7 100644
--- a/pages/dashboard/collections.vue
+++ b/pages/dashboard/collections.vue
@@ -28,8 +28,17 @@
             {{ formatMessage(messages.followingCollectionDescription) }}
           </span>
           <div class="stat-bar">
-            <div class="stats"><BoxIcon /> {{ formatMessage(messages.projectsCountLabel, { count: formatCompactNumber(user.follows.length) }) }}</div>
-            <div class="stats"><LockIcon /> <span> {{ formatMessage(commonMessages.privateLabel) }} </span></div>
+            <div class="stats">
+              <BoxIcon />
+              {{
+                formatMessage(messages.projectsCountLabel, {
+                  count: formatCompactNumber(user.follows.length),
+                })
+              }}
+            </div>
+            <div class="stats">
+              <LockIcon /> <span> {{ formatMessage(commonMessages.privateLabel) }} </span>
+            </div>
           </div>
         </div>
       </nuxt-link>
@@ -46,7 +55,14 @@
             {{ collection.description }}
           </span>
           <div class="stat-bar">
-            <div class="stats"><BoxIcon /> {{ formatMessage(messages.projectsCountLabel, { count: formatCompactNumber(collection.projects?.length || 0) }) }}</div>
+            <div class="stats">
+              <BoxIcon />
+              {{
+                formatMessage(messages.projectsCountLabel, {
+                  count: formatCompactNumber(collection.projects?.length || 0),
+                })
+              }}
+            </div>
             <div class="stats">
               <template v-if="collection.status === 'listed'">
                 <WorldIcon />
@@ -102,8 +118,7 @@ const messages = defineMessages({
   },
   projectsCountLabel: {
     id: 'dashboard.collections.label.projects-count',
-    defaultMessage:
-      '{count, plural, one {{count} project} other {{count} projects}}',
+    defaultMessage: '{count, plural, one {{count} project} other {{count} projects}}',
   },
   searchInputLabel: {
     id: 'dashboard.collections.label.search-input',

From 563a56261031b6ec4ea89cdfa9ea80b73337db98 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Mon, 1 Jan 2024 18:51:13 +0100
Subject: [PATCH 18/22] Reorganization

---
 utils/common-messages.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 30c4b52768..ae9965bbb7 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -23,6 +23,10 @@ export const commonMessages = defineMessages({
     id: 'button.edit',
     defaultMessage: 'Edit',
   },
+  errorNotificationTitle: {
+    id: 'notification.error.title',
+    defaultMessage: 'An error occurred',
+  },
   galleryInputView: {
     id: 'input.view.gallery',
     defaultMessage: 'Gallery view',
@@ -35,10 +39,6 @@ export const commonMessages = defineMessages({
     id: 'input.view.list',
     defaultMessage: 'List view',
   },
-  errorNotificationTitle: {
-    id: 'notification.error.title',
-    defaultMessage: 'An error occurred',
-  },
   privateLabel: {
     id: 'collection.label.private',
     defaultMessage: 'Private',

From b41087fe6d32e643e44a21281998e4155a22be74 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 7 Jan 2024 13:42:02 +0100
Subject: [PATCH 19/22] Fix some mistake

---
 locales/en-US/index.json        | 23 +++++++++++++----------
 pages/collection/[id].vue       |  6 +-----
 pages/dashboard/collections.vue |  8 ++------
 utils/common-messages.ts        |  4 ++++
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 3171c8a093..b50f6c8d3d 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -14,15 +14,15 @@
   "collection.button.edit-icon": {
     "message": "Edit icon"
   },
-  "collection.button.upload-icon": {
-    "message": "Upload icon"
-  },
   "collection.button.remove-project": {
     "message": "Remove project"
   },
   "collection.button.unfollow-project": {
     "message": "Unfollow project"
   },
+  "collection.button.upload-icon": {
+    "message": "Upload icon"
+  },
   "collection.delete-modal.description": {
     "message": "This will remove this collection forever. This action cannot be undone."
   },
@@ -36,7 +36,7 @@
     "message": "Auto-generated collection of all the projects you're following."
   },
   "collection.error.not-found": {
-    "message": "Delete icon"
+    "message": "Collection not found"
   },
   "collection.label.collection": {
     "message": "Collection"
@@ -56,6 +56,9 @@
   "collection.label.owner": {
     "message": "Owner"
   },
+  "collection.label.private": {
+    "message": "Private"
+  },
   "collection.label.projects-count": {
     "message": "{count, plural, one {<stat>{count}</stat> project} other {<stat>{count}</stat> projects}}"
   },
@@ -65,9 +68,6 @@
   "collection.title": {
     "message": "{name} - Collection"
   },
-  "collection.title.following": {
-    "message": "Followed projects"
-  },
   "dashboard.collections.button.create-new": {
     "message": "Create new"
   },
@@ -113,8 +113,8 @@
   "label.description": {
     "message": "Description"
   },
-  "label.private": {
-    "message": "Private"
+  "label.followed-projects": {
+    "message": "Followed projects"
   },
   "label.public": {
     "message": "Public"
@@ -156,7 +156,7 @@
     "message": "Username"
   },
   "profile.label.no-collections": {
-    "message": "This user has no collection!"
+    "message": "This user has no collections!"
   },
   "profile.label.no-collections-auth": {
     "message": "You don't have any collections.\nWould you like to <create-link>create one</create-link>?"
@@ -167,6 +167,9 @@
   "profile.label.no-projects-auth": {
     "message": "You don't have any projects.\nWould you like to <create-link>create one</create-link>?"
   },
+  "profile.label.organizations": {
+    "message": "Organizations"
+  },
   "profile.meta.description": {
     "message": "Download {username}'s projects on Modrinth"
   },
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index 4e13ae3c64..ce3ef4f35b 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -442,10 +442,6 @@ const messages = defineMessages({
     id: 'collection.description.following',
     defaultMessage: "Auto-generated collection of all the projects you're following.",
   },
-  followingCollectionTitle: {
-    id: 'collection.title.following',
-    defaultMessage: 'Followed projects',
-  },
   noProjectsLabel: {
     id: 'collection.label.no-projects',
     defaultMessage: 'This collection has no projects!',
@@ -505,7 +501,7 @@ try {
     collection = ref({
       id: 'following',
       icon_url: 'https://cdn.modrinth.com/follow-collection.png',
-      name: formatMessage(messages.followingCollectionTitle),
+      name: formatMessage(commonMessages.followedProjectsLabel),
       description: formatMessage(messages.followingCollectionDescription),
       status: 'private',
       user: auth.value.user.id,
diff --git a/pages/dashboard/collections.vue b/pages/dashboard/collections.vue
index 519d1ec787..6e8f3543af 100644
--- a/pages/dashboard/collections.vue
+++ b/pages/dashboard/collections.vue
@@ -23,7 +23,7 @@
       >
         <Avatar src="https://cdn.modrinth.com/follow-collection.png" class="icon" />
         <div class="details">
-          <span class="title">{{ formatMessage(messages.followingCollectionTitle) }}</span>
+          <span class="title">{{ formatMessage(commonMessages.followedProjectsLabel) }}</span>
           <span class="description">
             {{ formatMessage(messages.followingCollectionDescription) }}
           </span>
@@ -101,7 +101,7 @@ const messages = defineMessages({
     defaultMessage: 'Create new',
   },
   collectionsLongTitle: {
-    id: 'dashboard.collections.title',
+    id: 'dashboard.collections.long-title',
     defaultMessage: 'Your collections',
   },
   collectionsTitle: {
@@ -112,10 +112,6 @@ const messages = defineMessages({
     id: 'collection.description.following',
     defaultMessage: "Auto-generated collection of all the projects you're following.",
   },
-  followingCollectionTitle: {
-    id: 'collection.title.following',
-    defaultMessage: 'Followed projects',
-  },
   projectsCountLabel: {
     id: 'dashboard.collections.label.projects-count',
     defaultMessage: '{count, plural, one {{count} project} other {{count} projects}}',
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index ae9965bbb7..76ca838685 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -27,6 +27,10 @@ export const commonMessages = defineMessages({
     id: 'notification.error.title',
     defaultMessage: 'An error occurred',
   },
+  followedProjectsLabel: {
+    id: 'label.followed-projects',
+    defaultMessage: 'Followed projects',
+  },
   galleryInputView: {
     id: 'input.view.gallery',
     defaultMessage: 'Gallery view',

From 18babe86492ca63fc14a850be3fd427f35fde382 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 7 Jan 2024 13:56:51 +0100
Subject: [PATCH 20/22] add common collections label

---
 locales/en-US/index.json        | 6 +++---
 pages/dashboard.vue             | 9 +--------
 pages/dashboard/collections.vue | 6 +-----
 utils/common-messages.ts        | 4 ++++
 4 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index b50f6c8d3d..bbda232139 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -80,9 +80,6 @@
   "dashboard.collections.long-title": {
     "message": "Your collections"
   },
-  "dashboard.collections.title": {
-    "message": "Collections"
-  },
   "frog": {
     "message": "You've been frogged! 🐸"
   },
@@ -107,6 +104,9 @@
   "input.view.list": {
     "message": "List view"
   },
+  "label.collections": {
+    "message": "Collections"
+  },
   "label.delete": {
     "message": "Delete"
   },
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 889c948802..8732c6707f 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -26,7 +26,7 @@
           </NavStackItem>
           <NavStackItem
             link="/dashboard/collections"
-            :label="formatMessage(messages.collectionsTitle)"
+            :label="formatMessage(commonMessages.collectionsLabel)"
           >
             <LibraryIcon />
           </NavStackItem>
@@ -55,13 +55,6 @@ import OrganizationIcon from '~/assets/images/utils/organization.svg'
 
 const { formatMessage } = useVIntl()
 
-const messages = defineMessages({
-  collectionsTitle: {
-    id: 'dashboard.collections.title',
-    defaultMessage: 'Collections',
-  },
-})
-
 definePageMeta({
   middleware: 'auth',
 })
diff --git a/pages/dashboard/collections.vue b/pages/dashboard/collections.vue
index 6e8f3543af..c41b9e7334 100644
--- a/pages/dashboard/collections.vue
+++ b/pages/dashboard/collections.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="universal-card">
     <CollectionCreateModal ref="modal_creation" />
-    <h2>{{ formatMessage(messages.collectionsTitle) }}</h2>
+    <h2>{{ formatMessage(commonMessages.collectionsLabel) }}</h2>
     <div class="search-row">
       <div class="iconified-input">
         <label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
@@ -104,10 +104,6 @@ const messages = defineMessages({
     id: 'dashboard.collections.long-title',
     defaultMessage: 'Your collections',
   },
-  collectionsTitle: {
-    id: 'dashboard.collections.title',
-    defaultMessage: 'Collections',
-  },
   followingCollectionDescription: {
     id: 'collection.description.following',
     defaultMessage: "Auto-generated collection of all the projects you're following.",
diff --git a/utils/common-messages.ts b/utils/common-messages.ts
index 76ca838685..dae336354d 100644
--- a/utils/common-messages.ts
+++ b/utils/common-messages.ts
@@ -7,6 +7,10 @@ export const commonMessages = defineMessages({
     id: 'button.cancel',
     defaultMessage: 'Cancel',
   },
+  collectionsLabel: {
+    id: 'label.collections',
+    defaultMessage: 'Collections',
+  },
   dateAtTimeTooltip: {
     id: 'tooltip.date-at-time',
     defaultMessage: '{date, date, long} at {time, time, short}',

From 500607e95d60ffdd8eb603bd02abd0ac93b8492a Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sun, 7 Jan 2024 16:45:42 +0100
Subject: [PATCH 21/22] Add collections label key to default layout

---
 layouts/default.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index b828daff67..b7d66bf155 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -79,7 +79,7 @@
                   <hr class="divider" />
                   <NuxtLink class="item button-transparent" to="/dashboard/collections">
                     <LibraryIcon class="icon" />
-                    <span class="title">Collections</span>
+                    <span class="title">{{ formatMessage(commonMessages.collectionsLabel) }}</span>
                   </NuxtLink>
                   <NuxtLink class="item button-transparent" to="/dashboard/notifications">
                     <NotificationIcon class="icon" />
@@ -379,6 +379,8 @@ import NavRow from '~/components/ui/NavRow.vue'
 import ModalCreation from '~/components/ui/ModalCreation.vue'
 import Avatar from '~/components/ui/Avatar.vue'
 
+const { formatMessage } = useVIntl()
+
 const app = useNuxtApp()
 const auth = await useAuth()
 const cosmetics = useCosmetics()

From 5ceb92e57f7f73cf99ed5cb8a78bce701871f7d4 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Thu, 18 Jan 2024 19:14:13 +0100
Subject: [PATCH 22/22] Make title and description reactive (#8)

---
 pages/collection/[id].vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index ce3ef4f35b..36eed43e7b 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -548,16 +548,18 @@ if (!collection.value) {
   })
 }
 
-const title = formatMessage(messages.collectionTitle, { name: collection.value.name })
-const description = formatMessage(messages.collectionDescription, {
-  name: collection.value.name,
-  description: collection.value.description,
-  username: creator.value.username,
-})
+const title = computed(() =>
+  formatMessage(messages.collectionTitle, { name: collection.value.name })
+)
 
 useSeoMeta({
   title,
-  description,
+  description: () =>
+    formatMessage(messages.collectionDescription, {
+      name: collection.value.name,
+      description: collection.value.description,
+      username: creator.value.username,
+    }),
   ogTitle: title,
   ogDescription: collection.value.description,
   ogImage: collection.value.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',