From e3794f95781d0376a22d8504699631bc4b28b726 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sat, 3 Feb 2024 16:23:39 +0100
Subject: [PATCH 1/6] Begin Work

---
 components/ui/CollectionCreateModal.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/ui/CollectionCreateModal.vue b/components/ui/CollectionCreateModal.vue
index 6701c085af..3216b27f2a 100644
--- a/components/ui/CollectionCreateModal.vue
+++ b/components/ui/CollectionCreateModal.vue
@@ -29,11 +29,11 @@
       <div class="push-right input-group">
         <Button @click="modal.hide()">
           <CrossIcon />
-          Cancel
+          {{ formatMessage(commonMessages.cancelButton) }}
         </Button>
         <Button color="primary" @click="create">
           <CheckIcon />
-          Continue
+          {{ formatMessage(commonMessages.continueButton) }}
         </Button>
       </div>
     </div>
@@ -42,6 +42,8 @@
 <script setup>
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
+const { formatMessage } = useVIntl()
+
 const router = useRouter()
 
 const name = ref('')

From 4094f4d99031b6c41c0217003346c00ff2a687d1 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sat, 3 Feb 2024 16:33:18 +0100
Subject: [PATCH 2/6] Add more keys for header, label & input

---
 components/ui/CollectionCreateModal.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/ui/CollectionCreateModal.vue b/components/ui/CollectionCreateModal.vue
index 3216b27f2a..3aa7559931 100644
--- a/components/ui/CollectionCreateModal.vue
+++ b/components/ui/CollectionCreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modal" header="Create a collection">
+  <Modal ref="modal" :header="formatMessage(messages.header)">
     <div class="universal-modal modal-creation universal-labels">
       <div class="markdown-body">
         <p>
@@ -9,14 +9,14 @@
         </p>
       </div>
       <label for="name">
-        <span class="label__title">Name<span class="required">*</span></span>
+        <span class="label__title">{{ formatMessage(messages.nameLabel) }}<span class="required">*</span></span>
       </label>
       <input
         id="name"
         v-model="name"
         type="text"
         maxlength="64"
-        :placeholder="`Enter collection name...`"
+        :placeholder="formatMessage(messages.namePlaceholder)"
         autocomplete="off"
       />
       <label for="additional-information">
@@ -44,6 +44,21 @@ import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
 const { formatMessage } = useVIntl()
 
+const messages = defineMessages({
+  header: {
+    id: 'component.modal.collection-create.header',
+    defaultMessage: 'Create a collection',
+  },
+  nameLabel: {
+    id: 'component.modal.collection-create.name.label',
+    defaultMessage: 'Name',
+  },
+  namePlaceholder: {
+    id: 'component.modal.collection-create.name.placeholder',
+    defaultMessage: 'Enter collection name...',
+  },
+})
+
 const router = useRouter()
 
 const name = ref('')

From 1c34a872a363968c4399d0f50d49745e5cd964fd Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sat, 3 Feb 2024 17:47:27 +0100
Subject: [PATCH 3/6] Finsh Work

---
 components/ui/CollectionCreateModal.vue | 25 ++++++++++++++++++++-----
 locales/en-US/index.json                | 18 ++++++++++++++++++
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/components/ui/CollectionCreateModal.vue b/components/ui/CollectionCreateModal.vue
index 3aa7559931..246c360745 100644
--- a/components/ui/CollectionCreateModal.vue
+++ b/components/ui/CollectionCreateModal.vue
@@ -3,9 +3,11 @@
     <div class="universal-modal modal-creation universal-labels">
       <div class="markdown-body">
         <p>
-          Your new collection will be created as a public collection with
-          {{ projectIds.length > 0 ? projectIds.length : 'no' }}
-          {{ projectIds.length !== 1 ? 'projects' : 'project' }}.
+          {{
+            formatMessage(messages.description, {
+              count: formatCompactNumber(projectIds.length),
+            })
+          }}
         </p>
       </div>
       <label for="name">
@@ -20,8 +22,8 @@
         autocomplete="off"
       />
       <label for="additional-information">
-        <span class="label__title">Summary<span class="required">*</span></span>
-        <span class="label__description">This appears on your collection's page.</span>
+        <span class="label__title">{{ formatMessage(messages.additionalInformationLabel) }}<span class="required">*</span></span>
+        <span class="label__description">{{ formatMessage(messages.additionalInformationDescription) }}</span>
       </label>
       <div class="textarea-wrapper">
         <textarea id="additional-information" v-model="description" maxlength="256" />
@@ -43,8 +45,21 @@
 import { XIcon as CrossIcon, CheckIcon, Modal, Button } from 'omorphia'
 
 const { formatMessage } = useVIntl()
+const formatCompactNumber = useCompactNumber()
 
 const messages = defineMessages({
+  additionalInformationLabel: {
+    id: 'component.modal.collection-create.summary.label',
+    defaultMessage: 'Summary',
+  },
+  additionalInformationDescription: {
+    id: 'component.modal.collection-create.summary.description',
+    defaultMessage: "This appears on your collection's page.",
+  },
+  description: {
+    id: 'component.modal.collection-create.description',
+    defaultMessage: 'Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {{count} project} other {{count} projects}}',
+  },
   header: {
     id: 'component.modal.collection-create.header',
     defaultMessage: 'Create a collection',
diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index 2459075245..ee90dbaf76 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -251,6 +251,24 @@
   "collection.title": {
     "message": "{name} - Collection"
   },
+  "component.modal.collection-create.description": {
+    "message": "Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {{count} project} other {{count} projects}}"
+  },
+  "component.modal.collection-create.header": {
+    "message": "Create a collection"
+  },
+  "component.modal.collection-create.name.label": {
+    "message": "Name"
+  },
+  "component.modal.collection-create.name.placeholder": {
+    "message": "Enter collection name..."
+  },
+  "component.modal.collection-create.summary.description": {
+    "message": "This appears on your collection's page."
+  },
+  "component.modal.collection-create.summary.label": {
+    "message": "Summary"
+  },
   "dashboard.collections.button.create-new": {
     "message": "Create new"
   },

From 4679366a913caa680c59863b07aca459cb66e973 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sat, 3 Feb 2024 17:48:00 +0100
Subject: [PATCH 4/6] Forgot something

---
 components/ui/CollectionCreateModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ui/CollectionCreateModal.vue b/components/ui/CollectionCreateModal.vue
index 246c360745..124bb31e86 100644
--- a/components/ui/CollectionCreateModal.vue
+++ b/components/ui/CollectionCreateModal.vue
@@ -110,7 +110,7 @@ async function create() {
   } catch (err) {
     addNotification({
       group: 'main',
-      title: 'An error occurred',
+      title: formatMessage(commonMessages.errorNotificationTitle),
       text: err?.data?.description || err?.message || err,
       type: 'error',
     })

From 295390537a46563be1c574e9aab3715bc7c26a88 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sat, 3 Feb 2024 17:49:22 +0100
Subject: [PATCH 5/6] Fix lint error

---
 components/ui/CollectionCreateModal.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/ui/CollectionCreateModal.vue b/components/ui/CollectionCreateModal.vue
index 124bb31e86..93a4c83de2 100644
--- a/components/ui/CollectionCreateModal.vue
+++ b/components/ui/CollectionCreateModal.vue
@@ -11,7 +11,9 @@
         </p>
       </div>
       <label for="name">
-        <span class="label__title">{{ formatMessage(messages.nameLabel) }}<span class="required">*</span></span>
+        <span class="label__title">
+          {{ formatMessage(messages.nameLabel) }}<span class="required">*</span>
+        </span>
       </label>
       <input
         id="name"
@@ -22,8 +24,11 @@
         autocomplete="off"
       />
       <label for="additional-information">
-        <span class="label__title">{{ formatMessage(messages.additionalInformationLabel) }}<span class="required">*</span></span>
-        <span class="label__description">{{ formatMessage(messages.additionalInformationDescription) }}</span>
+        <span class="label__title">{{ formatMessage(messages.additionalInformationLabel) }}<span class="required">*</span>
+        </span>
+        <span class="label__description">
+          {{ formatMessage(messages.additionalInformationDescription) }}
+        </span>
       </label>
       <div class="textarea-wrapper">
         <textarea id="additional-information" v-model="description" maxlength="256" />
@@ -58,7 +63,8 @@ const messages = defineMessages({
   },
   description: {
     id: 'component.modal.collection-create.description',
-    defaultMessage: 'Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {{count} project} other {{count} projects}}',
+    defaultMessage:
+      'Your new collection will be created as a public collection with {count, plural, =0 {no projects} one {{count} project} other {{count} projects}}',
   },
   header: {
     id: 'component.modal.collection-create.header',

From fddff036711873dfad6efed4e69e6bdbe343ad00 Mon Sep 17 00:00:00 2001
From: Mysterious-Dev <mysteriousdevs@gmail.com>
Date: Sat, 3 Feb 2024 17:50:29 +0100
Subject: [PATCH 6/6] Fix lint error

---
 components/ui/CollectionCreateModal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/ui/CollectionCreateModal.vue b/components/ui/CollectionCreateModal.vue
index 93a4c83de2..c7b571012b 100644
--- a/components/ui/CollectionCreateModal.vue
+++ b/components/ui/CollectionCreateModal.vue
@@ -24,7 +24,8 @@
         autocomplete="off"
       />
       <label for="additional-information">
-        <span class="label__title">{{ formatMessage(messages.additionalInformationLabel) }}<span class="required">*</span>
+        <span class="label__title">
+          {{ formatMessage(messages.additionalInformationLabel) }}<span class="required">*</span>
         </span>
         <span class="label__description">
           {{ formatMessage(messages.additionalInformationDescription) }}