Add translation keys for create collection modal

components/ui/CollectionCreateModal.vue

@@ -1,39 +1,47 @@
 <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>
-          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">
-        <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">
-        <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" />
       </div>
       <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 +50,37 @@
 <script setup>
 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',
+  },
+  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('')
@@ -78,7 +117,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',
     })

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"
   },