From 4b62dc18bf7c1aaae427842acb919af00467068e Mon Sep 17 00:00:00 2001
From: Peiman Nourani <nourani.peiman@gmail.com>
Date: Fri, 9 Feb 2024 21:30:18 +0330
Subject: [PATCH] [4.x] Translatable displays (#9450)

---
 resources/js/components/Breadcrumb.vue        |  2 +-
 resources/js/components/ResourceDeleter.vue   |  2 +-
 resources/js/components/SiteSelector.vue      |  2 +-
 .../js/components/assets/Browser/Browser.vue  |  2 +-
 .../js/components/blueprints/LinkFields.vue   |  6 +++---
 .../js/components/blueprints/Listing.vue      |  2 +-
 .../js/components/blueprints/RegularField.vue |  2 +-
 .../js/components/blueprints/Section.vue      |  2 +-
 resources/js/components/blueprints/Tab.vue    |  2 +-
 .../collections/OneOrManySitesField.vue       |  2 +-
 resources/js/components/collections/View.vue  |  2 +-
 .../js/components/data-list/ColumnPicker.vue  |  4 ++--
 resources/js/components/data-list/Table.vue   |  2 +-
 .../js/components/entries/PublishForm.vue     |  6 +++---
 .../components/field-validation/Builder.vue   |  2 +-
 resources/js/components/fields/Settings.vue   |  2 +-
 .../js/components/fieldsets/EditForm.vue      |  2 +-
 .../components/fieldsets/FieldsetDeleter.vue  |  2 +-
 resources/js/components/fieldsets/Listing.vue |  2 +-
 resources/js/components/globals/Sites.vue     |  4 ++--
 resources/js/components/inputs/Text.vue       |  2 +-
 .../components/inputs/relationship/Item.vue   |  6 +++---
 .../inputs/relationship/SelectField.vue       |  4 ++--
 resources/js/components/nav/Builder.vue       |  4 ++--
 .../js/components/navigation/Listing.vue      |  2 +-
 resources/js/components/roles/Listing.vue     |  2 +-
 resources/js/components/roles/PublishForm.vue |  2 +-
 resources/js/components/terms/PublishForm.vue |  2 +-
 .../js/components/user-groups/Listing.vue     |  2 +-
 resources/js/components/users/Listing.vue     |  4 ++--
 resources/views/blueprints/index.blade.php    | 20 +++++++++----------
 resources/views/collections/empty.blade.php   |  2 +-
 .../views/forms/blueprints/edit.blade.php     |  2 +-
 resources/views/forms/show.blade.php          |  2 +-
 resources/views/partials/breadcrumb.blade.php |  2 +-
 resources/views/taxonomies/empty.blade.php    |  2 +-
 resources/views/taxonomies/show.blade.php     |  2 +-
 resources/views/usergroups/show.blade.php     |  2 +-
 src/Auth/CorePermissions.php                  | 14 ++++++-------
 src/Fieldtypes/UserRoles.php                  |  4 ++--
 src/Forms/Fieldtype.php                       |  4 ++--
 .../Controllers/CP/Forms/FormsController.php  |  4 ++--
 .../CP/Preferences/Nav/RoleNavController.php  |  2 +-
 .../Controllers/CP/Users/RolesController.php  |  2 +-
 44 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/resources/js/components/Breadcrumb.vue b/resources/js/components/Breadcrumb.vue
index 9b85eafbd4..56e6d13119 100644
--- a/resources/js/components/Breadcrumb.vue
+++ b/resources/js/components/Breadcrumb.vue
@@ -2,7 +2,7 @@
     <div class="breadcrumb flex">
         <a :href="url" class="flex-initial flex p-2 -m-2 items-center text-xs text-gray-700 hover:text-gray-900">
             <svg-icon name="micro/chevron-right" class="h-6 w-4 rotate-180" />
-            <span v-text="title" />
+            <span v-text="__(title)" />
         </a>
     </div>
 </template>
diff --git a/resources/js/components/ResourceDeleter.vue b/resources/js/components/ResourceDeleter.vue
index ce8049b28b..76e7fe1845 100644
--- a/resources/js/components/ResourceDeleter.vue
+++ b/resources/js/components/ResourceDeleter.vue
@@ -45,7 +45,7 @@ export default {
         },
 
         modalTitle() {
-            return __('Delete :resource', {resource: this.title});
+            return __('Delete :resource', {resource: __(this.title)});
         },
 
         modalBody() {
diff --git a/resources/js/components/SiteSelector.vue b/resources/js/components/SiteSelector.vue
index c999529f9f..163685c202 100644
--- a/resources/js/components/SiteSelector.vue
+++ b/resources/js/components/SiteSelector.vue
@@ -5,7 +5,7 @@
         :value="site"
         :clearable="false"
         :searchable="false"
-        :get-option-label="site => site.name"
+        :get-option-label="site => __(site.name)"
         :options="sites"
         @input="$emit('input', $event)"
     />
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index f26158c5dc..5226089cf7 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -23,7 +23,7 @@
 
                 <div class="publish-tabs tabs rounded-none rounded-t mb-3 shadow-none" v-if="showContainerTabs">
                     <button class="tab-button" v-for="item in containers" :key="item.id"
-                        v-text="item.title"
+                        v-text="__(item.title)"
                         :class="{
                             active: item.id === container.id,
                             'border-b border-gray-300': item.id !== container.id
diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index 3d34145110..dea83e6a43 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -111,8 +111,8 @@ export default {
                 .filter(field => field.type !== 'import')
                 .map(field => ({
                     value: `${fieldset.handle}.${field.handle}`,
-                    label: field.config.display,
-                    fieldset: fieldset.title,
+                    label: __(field.config.display),
+                    fieldset: __(fieldset.title),
                 }));
         });
 
@@ -124,7 +124,7 @@ export default {
             fieldSuggestions,
             fieldsetSuggestions: fieldsets.map(fieldset => ({
                 value: fieldset.handle,
-                label: fieldset.title,
+                label: __(fieldset.title),
             })),
             fieldsets,
         }
diff --git a/resources/js/components/blueprints/Listing.vue b/resources/js/components/blueprints/Listing.vue
index 730ea0d44a..84f2f8b14f 100644
--- a/resources/js/components/blueprints/Listing.vue
+++ b/resources/js/components/blueprints/Listing.vue
@@ -8,7 +8,7 @@
                 <template slot="cell-title" slot-scope="{ row: blueprint }">
                     <div class="flex items-center">
                         <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
-                        <a :href="blueprint.edit_url">{{ blueprint.title }}</a>
+                        <a :href="blueprint.edit_url">{{ __(blueprint.title) }}</a>
                     </div>
                 </template>
                 <template slot="cell-handle" slot-scope="{ value }">
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index 2057317f6d..c0c2e27b84 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -6,7 +6,7 @@
             <div class="flex flex-1 items-center justify-between">
                 <div class="flex items-center flex-1 pr-4 py-2 pl-2">
                     <svg-icon class="text-gray-800 mr-2 h-4 w-4 flex-none" :name="field.icon.startsWith('<svg') ? field.icon : `light/${field.icon}`" v-tooltip="tooltipText" default="light/generic-field" />
-                    <a class="break-all" v-text="labelText" @click="$emit('edit')" />
+                    <a class="break-all" v-text="__(labelText)" @click="$emit('edit')" />
                     <svg-icon name="light/hyperlink" v-if="isReferenceField" class="text-gray-600 text-3xs ml-2 h-4 w-4" v-tooltip="__('Imported from fieldset') + ': ' + field.field_reference" />
                 </div>
                 <div class="flex-none pr-2 flex">
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 55a0dcd878..e6dec7d50b 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -8,7 +8,7 @@
                 <div class="p-2 flex-1 flex items-center">
                     <a class="flex items-center flex-1 group" @click="edit">
                         <svg-icon :name="iconName(section.icon)" :directory="iconBaseDirectory" class="h-4 w-4 mr-2 text-gray-700 group-hover:text-blue-500" />
-                        <div class="mr-2" v-text="section.display" />
+                        <div class="mr-2" v-text="__(section.display)" />
                     </a>
                     <button class="flex items-center text-gray-700 hover:text-gray-950 mr-3" @click="edit">
                         <svg-icon class="h-4 w-4" name="pencil" />
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 2662c7df4e..6c2cfdd3d6 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -13,7 +13,7 @@
     >
         <svg-icon v-if="tab.icon" :name="iconName(tab.icon)" :directory="iconBaseDirectory" class="w-4 h-4 mr-1" />
 
-        {{ tab.display }}
+        {{ __(tab.display) }}
 
         <dropdown-list v-if="isActive" ref="dropdown" placement="bottom-start" class="text-left">
             <template #trigger>
diff --git a/resources/js/components/collections/OneOrManySitesField.vue b/resources/js/components/collections/OneOrManySitesField.vue
index 7d1321e263..72ac1b40d6 100644
--- a/resources/js/components/collections/OneOrManySitesField.vue
+++ b/resources/js/components/collections/OneOrManySitesField.vue
@@ -20,7 +20,7 @@
                 </thead>
                 <tbody>
                     <tr v-for="site in sites" :key="site.handle">
-                        <td class="align-middle" v-text="site.name" />
+                        <td class="align-middle" v-text="__(site.name)" />
                         <td>
                             <text-input
                                 class="slug-field"
diff --git a/resources/js/components/collections/View.vue b/resources/js/components/collections/View.vue
index 08ae9afa2f..46c70e855b 100644
--- a/resources/js/components/collections/View.vue
+++ b/resources/js/components/collections/View.vue
@@ -133,7 +133,7 @@
                         v-for="blueprint in blueprints"
                         :key="blueprint.handle"
                         @click="createEntry(blueprint.handle, branch.id)"
-                        v-text="blueprints.length > 1 ? blueprint.title : __('Create Child Entry')" />
+                        v-text="blueprints.length > 1 ? __(blueprint.title) : __('Create Child Entry')" />
                 </template>
                 <template v-if="branch.can_delete">
                     <li class="divider"></li>
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index a38884c7a3..6eebcb4110 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -24,7 +24,7 @@
                             <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field" v-if="hiddenColumns.length">
                                 <label class="flex items-center cursor-pointer">
                                     <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
-                                    {{ column.label }}
+                                    {{ __(column.label) }}
                                 </label>
                             </div>
                         </div>
@@ -48,7 +48,7 @@
                                         <div class="item-move py-1">&nbsp;</div>
                                         <div class="flex flex-1 ml-2 items-center p-0">
                                             <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
-                                            {{ column.label }}
+                                            {{ __(column.label) }}
                                         </div>
                                     </div>
                                 </div>
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index 2cb66f0bf1..58cb7ddb6f 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -17,7 +17,7 @@
                     class="group"
                     @click.prevent="changeSortColumn(column.field)"
                 >
-                    <span v-text="column.label" />
+                    <span v-text="__(column.label)" />
                     <svg v-if="column.sortable" :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1 opacity-0 group-hover:opacity-100">
                         <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
                     </svg>
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 8bff49f2a7..d93cd6d022 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -6,8 +6,8 @@
         <div class="flex items-center mb-6">
             <h1 class="flex-1">
                 <div class="flex items-center">
-                    <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="activeLocalization.status" />
-                    <span v-html="$options.filters.striptags(title)" />
+                    <span v-if="! isCreating" class="little-dot mr-2" :class="activeLocalization.status" v-tooltip="__(activeLocalization.status)" />
+                    <span v-html="$options.filters.striptags(__(title))" />
                 </div>
             </h1>
 
@@ -176,7 +176,7 @@
                                                 'bg-gray-500': !option.published,
                                                 'bg-red-500': !option.exists
                                             }" />
-                                            {{ option.name }}
+                                            {{ __(option.name) }}
                                             <loading-graphic
                                                 :size="14"
                                                 text=""
diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index d429ecc581..36aad05240 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -59,7 +59,7 @@
                     />
                 </template>
                 <template #option="{ value, display }">
-                    {{ display }} <code class="ml-2">{{ valueWithoutTrailingColon(value) }}</code>
+                    {{ __(display) }} <code class="ml-2">{{ valueWithoutTrailingColon(value) }}</code>
                 </template>
                 <template #no-options="{ search }">
                     <div class="vs__dropdown-option text-left">{{ __('Add') }} <code class="ml-2">{{ search }}</code></div>
diff --git a/resources/js/components/fields/Settings.vue b/resources/js/components/fields/Settings.vue
index 23a9842507..83976854e8 100644
--- a/resources/js/components/fields/Settings.vue
+++ b/resources/js/components/fields/Settings.vue
@@ -8,7 +8,7 @@
 
         <header v-if="!loading" class="flex items-center sticky top-0 inset-x-0 bg-white shadow px-8 py-2 z-1 h-13">
             <h1 class="flex-1 flex items-center text-xl">
-                {{ values.display || config.display || config.handle }}
+                {{ __(values.display) || __(config.display) || config.handle }}
                 <small class="badge-pill bg-gray-100 ml-4 border text-xs text-gray-700 font-medium leading-none flex items-center">
                     <svg-icon class="h-4 w-4 mr-2 inline-block text-gray-700" :name="fieldtype.icon.startsWith('<svg') ? fieldtype.icon : `light/${fieldtype.icon}`"></svg-icon>
                     {{ fieldtype.title }}
diff --git a/resources/js/components/fieldsets/EditForm.vue b/resources/js/components/fieldsets/EditForm.vue
index 575ecbd243..2967efbafa 100644
--- a/resources/js/components/fieldsets/EditForm.vue
+++ b/resources/js/components/fieldsets/EditForm.vue
@@ -5,7 +5,7 @@
         <header class="mb-6">
             <breadcrumb :url="breadcrumbUrl" :title="__('Fieldsets')" />
             <div class="flex items-center justify-between">
-                <h1>{{ initialTitle }}</h1>
+                <h1>{{ __(initialTitle) }}</h1>
                 <button type="submit" class="btn-primary" @click.prevent="save" v-text="__('Save')" />
             </div>
         </header>
diff --git a/resources/js/components/fieldsets/FieldsetDeleter.vue b/resources/js/components/fieldsets/FieldsetDeleter.vue
index 01b65da9d0..6c0ce29354 100644
--- a/resources/js/components/fieldsets/FieldsetDeleter.vue
+++ b/resources/js/components/fieldsets/FieldsetDeleter.vue
@@ -67,7 +67,7 @@ export default {
         },
 
         modalTitle() {
-            return __('Delete :resource', {resource: this.title});
+            return __('Delete :resource', {resource: __(this.title)});
         },
 
         deleteUrl() {
diff --git a/resources/js/components/fieldsets/Listing.vue b/resources/js/components/fieldsets/Listing.vue
index 58fbacdc80..933fb228a5 100644
--- a/resources/js/components/fieldsets/Listing.vue
+++ b/resources/js/components/fieldsets/Listing.vue
@@ -4,7 +4,7 @@
             <div class="overflow-x-auto overflow-y-hidden">
                 <data-list-table>
                     <template slot="cell-title" slot-scope="{ row: fieldset }">
-                        <a :href="fieldset.edit_url">{{ fieldset.title }}</a>
+                        <a :href="fieldset.edit_url">{{ __(fieldset.title) }}</a>
                     </template>
                     <template slot="cell-handle" slot-scope="{ value }">
                         <span class="font-mono text-xs">{{ value }}</span>
diff --git a/resources/js/components/globals/Sites.vue b/resources/js/components/globals/Sites.vue
index 8f77d63897..04ed120fe3 100644
--- a/resources/js/components/globals/Sites.vue
+++ b/resources/js/components/globals/Sites.vue
@@ -13,7 +13,7 @@
                     <td>
                         <div class="flex items-center text-sm">
                             <toggle-input v-model="site.enabled" class="mr-4" />
-                            {{ site.name }}
+                            {{ __(site.name) }}
                         </div>
                     </td>
                     <td class="text-sm">
@@ -60,7 +60,7 @@ export default {
 
         siteOriginOptions(site) {
             return this.sites
-                .map(s => ({ value: s.handle, label: s.name }))
+                .map(s => ({ value: s.handle, label: __(s.name) }))
                 .filter(s => s.value !== site.handle)
         }
 
diff --git a/resources/js/components/inputs/Text.vue b/resources/js/components/inputs/Text.vue
index c92ce63814..002e35ea8d 100644
--- a/resources/js/components/inputs/Text.vue
+++ b/resources/js/components/inputs/Text.vue
@@ -17,7 +17,7 @@
                 :step="step"
                 :disabled="disabled"
                 :readonly="isReadOnly"
-                :placeholder="placeholder"
+                :placeholder="__(placeholder)"
                 :autocomplete="autocomplete"
                 :autofocus="focus"
                 :min="min"
diff --git a/resources/js/components/inputs/relationship/Item.vue b/resources/js/components/inputs/relationship/Item.vue
index 8e589ca437..121ad38189 100644
--- a/resources/js/components/inputs/relationship/Item.vue
+++ b/resources/js/components/inputs/relationship/Item.vue
@@ -11,12 +11,12 @@
             <div
                 v-if="item.invalid"
                 v-tooltip.top="__('An item with this ID could not be found')"
-                v-text="item.title" />
+                v-text="__(item.title)" />
 
 
-            <a v-if="!item.invalid && editable" @click.prevent="edit" v-text="item.title" class="truncate" v-tooltip="item.title" :href="item.edit_url" />
+            <a v-if="!item.invalid && editable" @click.prevent="edit" v-text="__(item.title)" class="truncate" v-tooltip="item.title" :href="item.edit_url" />
 
-            <div v-if="!item.invalid && !editable" v-text="item.title" />
+            <div v-if="!item.invalid && !editable" v-text="__(item.title)" />
 
             <inline-edit-form
                 v-if="isEditing"
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 5f1b21a1c9..5e6a57d07b 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -11,7 +11,7 @@
             :multiple="multiple"
             :options="options"
             :get-option-key="(option) => option.id"
-            :get-option-label="(option) => option.title"
+            :get-option-label="(option) => __(option.title)"
             :create-option="(value) => ({ title: value, id: value })"
             :placeholder="__(config.placeholder) || __('Choose...')"
             :searchable="true"
@@ -46,7 +46,7 @@
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">
                         <span v-for="item in items" :key="item.id" class="vs__selected mt-2" :class="{ 'sortable-item': !readOnly }">
-                            {{ item.title }}
+                            {{ __(item.title) }}
                             <button v-if="!readOnly" @click="deselect(item)" type="button" :aria-label="__('Deselect option')" class="vs__deselect">
                                 <span>×</span>
                             </button>
diff --git a/resources/js/components/nav/Builder.vue b/resources/js/components/nav/Builder.vue
index b417a30078..5331205517 100644
--- a/resources/js/components/nav/Builder.vue
+++ b/resources/js/components/nav/Builder.vue
@@ -6,7 +6,7 @@
             <breadcrumb v-if="indexUrl" :url="indexUrl" :title="__('CP Nav Preferences')" />
 
             <div class="flex items-center">
-                <h1 class="flex-1">{{ title }}</h1>
+                <h1 class="flex-1">{{ __(title) }}</h1>
 
                 <dropdown-list class="mr-2">
                     <dropdown-item :text="__('Reset Nav Customizations')" class="warning" @click="confirmingReset = true"></dropdown-item>
@@ -43,7 +43,7 @@
                         <dropdown-item v-for="option in saveAsOptions" :key="option.url" @click="saveAs(option.url)" class="group">
                             <div class="flex items-start pr-4">
                                 <svg-icon :name="option.icon" class="text-gray shrink-0 mr-2 w-4 group-hover:text-white" />
-                                <span class="whitespace-normal">{{ option.label }}</span>
+                                <span class="whitespace-normal">{{ __(option.label) }}</span>
                             </div>
                         </dropdown-item>
                     </dropdown-list>
diff --git a/resources/js/components/navigation/Listing.vue b/resources/js/components/navigation/Listing.vue
index 93cfa348fa..256d8c6300 100644
--- a/resources/js/components/navigation/Listing.vue
+++ b/resources/js/components/navigation/Listing.vue
@@ -3,7 +3,7 @@
         <div class="card p-0" slot-scope="{ filteredRows: rows }">
             <data-list-table :rows="rows">
                 <template slot="cell-title" slot-scope="{ row: structure }">
-                    <a :href="structure.show_url" class="flex items-center" v-text="structure.title" />
+                    <a :href="structure.show_url" class="flex items-center" v-text="__(structure.title)" />
                 </template>
                 <template slot="actions" slot-scope="{ row: structure, index }">
                     <dropdown-list>
diff --git a/resources/js/components/roles/Listing.vue b/resources/js/components/roles/Listing.vue
index 5e208c6ef0..c9d8ce23a1 100644
--- a/resources/js/components/roles/Listing.vue
+++ b/resources/js/components/roles/Listing.vue
@@ -3,7 +3,7 @@
         <div class="card p-0" slot-scope="{ }">
             <data-list-table>
                 <template slot="cell-title" slot-scope="{ row: role, index }">
-                    <a :href="role.edit_url">{{ role.title }}</a>
+                    <a :href="role.edit_url">{{ __(role.title) }}</a>
                 </template>
                 <template slot="cell-handle" slot-scope="{ value: handle }">
                     <span class="font-mono text-xs">{{ handle }}</span>
diff --git a/resources/js/components/roles/PublishForm.vue b/resources/js/components/roles/PublishForm.vue
index b3d47e2dbf..954374f85c 100644
--- a/resources/js/components/roles/PublishForm.vue
+++ b/resources/js/components/roles/PublishForm.vue
@@ -4,7 +4,7 @@
             <header class="mb-6">
                 <breadcrumb :url="breadcrumbUrl" :title="__('Roles & Permissions')" />
                 <div class="flex items-center justify-between">
-                    <h1 v-text="initialTitle || __('Create Role')" />
+                    <h1 v-text="__(initialTitle) || __('Create Role')" />
                     <button type="submit" class="btn-primary" @click="save">{{ __('Save') }}</button>
                 </div>
             </header>
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index b3caebbbcf..9dca80133b 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -175,7 +175,7 @@
                                                 'bg-gray-500': !option.published,
                                                 'bg-red-500': !option.exists
                                             }" />
-                                            {{ option.name }}
+                                            {{ __(option.name) }}
                                             <loading-graphic :size="14" text="" class="ml-2" v-if="localizing === option.handle" />
                                         </div>
                                         <div class="badge-sm bg-orange" v-if="option.origin" v-text="__('Origin')" />
diff --git a/resources/js/components/user-groups/Listing.vue b/resources/js/components/user-groups/Listing.vue
index 8980afd08c..977b23be82 100644
--- a/resources/js/components/user-groups/Listing.vue
+++ b/resources/js/components/user-groups/Listing.vue
@@ -3,7 +3,7 @@
         <div class="card p-0" slot-scope="{ }">
             <data-list-table>
                 <template slot="cell-title" slot-scope="{ row: group, index }">
-                    <a :href="group.show_url">{{ group.title }}</a>
+                    <a :href="group.show_url">{{ __(group.title) }}</a>
                 </template>
                 <template slot="cell-handle" slot-scope="{ value: handle }">
                     <span class="font-mono text-xs">{{ handle }}</span>
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 6c0a52aed5..303bd8cd0b 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -83,12 +83,12 @@
                                 <div class="role-index-field">
                                     <div v-if="user.super" class="role-index-field-item mr-1 mb-1.5">{{ __('Super Admin') }}</div>
                                     <div v-if="!roles || roles.length === 0" />
-                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ role.title }}</div>
+                                    <div v-for="(role, i) in (roles || [])" class="role-index-field-item mr-1 mb-1.5">{{ __(role.title) }}</div>
                                 </div>
                             </template>
                             <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
                                 <div class="groups-index-field">
-                                    <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
+                                    <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ __(group.title) }}</div>
                                 </div>
                             </template>
                             <template slot="actions" slot-scope="{ row: user, index }">
diff --git a/resources/views/blueprints/index.blade.php b/resources/views/blueprints/index.blade.php
index b8e0cee8e1..77bf411694 100644
--- a/resources/views/blueprints/index.blade.php
+++ b/resources/views/blueprints/index.blade.php
@@ -16,12 +16,12 @@
 
             @foreach (Statamic\Facades\Collection::all() as $collection)
                 @if ($loop->first)<h6 class="p-2">{{ __('Collections') }}</h6>@endif
-                <dropdown-item redirect="{{ cp_route('collections.blueprints.create', $collection) }}" text="{{ $collection->title() }}"></dropdown-item>
+                <dropdown-item redirect="{{ cp_route('collections.blueprints.create', $collection) }}" text="{{ __($collection->title()) }}"></dropdown-item>
             @endforeach
 
             @foreach (Statamic\Facades\Taxonomy::all() as $taxonomy)
                 @if ($loop->first)<h6 class="p-2 mt-4">{{ __('Taxonomies') }}</h6>@endif
-                <dropdown-item redirect="{{ cp_route('taxonomies.blueprints.create', $taxonomy) }}" text="{{ $taxonomy->title() }}"></dropdown-item>
+                <dropdown-item redirect="{{ cp_route('taxonomies.blueprints.create', $taxonomy) }}" text="{{ __($taxonomy->title()) }}"></dropdown-item>
             @endforeach
         </dropdown-list>
         </div>
@@ -39,10 +39,10 @@
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('icons/light/content-writing')</div>
                                 <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
-                                <a href="{{ cp_route('collections.blueprints.edit', [$collection, $blueprint]) }}" v-pre>{{ $blueprint->title() }}</a>
+                                <a href="{{ cp_route('collections.blueprints.edit', [$collection, $blueprint]) }}" v-pre>{{ __($blueprint->title()) }}</a>
                             </div>
                         </td>
-                        <td class="text-right text-2xs" v-pre>{{ $collection->title() }}</td>
+                        <td class="text-right text-2xs" v-pre>{{ __($collection->title()) }}</td>
                     </tr>
                 @endforeach
         @if ($loop->last)
@@ -63,10 +63,10 @@
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('icons/light/tags')</div>
                                 <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
-                                <a href="{{ cp_route('taxonomies.blueprints.edit', [$taxonomy, $blueprint]) }}" v-pre>{{ $blueprint->title() }}</a>
+                                <a href="{{ cp_route('taxonomies.blueprints.edit', [$taxonomy, $blueprint]) }}" v-pre>{{ __($blueprint->title()) }}</a>
                             </div>
                         </td>
-                        <td class="text-right text-2xs" v-pre>{{ $taxonomy->title() }}</td>
+                        <td class="text-right text-2xs" v-pre>{{ __($taxonomy->title()) }}</td>
                     </tr>
                 @endforeach
         @if ($loop->last)
@@ -85,7 +85,7 @@
                     <td>
                         <div class="flex items-center">
                             <div class="w-4 h-4 mr-4">@cp_svg('icons/light/hierarchy-files')</div>
-                            <a href="{{ cp_route('navigation.blueprint.edit', $nav->handle()) }}" v-pre>{{ $nav->title() }}</a>
+                            <a href="{{ cp_route('navigation.blueprint.edit', $nav->handle()) }}" v-pre>{{ __($nav->title()) }}</a>
                         </div>
                     </td>
                 </tr>
@@ -105,7 +105,7 @@
                     <td>
                         <div class="flex items-center">
                             <div class="w-4 h-4 mr-4">@cp_svg('icons/light/earth')</div>
-                            <a href="{{ cp_route('globals.blueprint.edit', $set->handle()) }}" v-pre>{{ $set->title() }}</a>
+                            <a href="{{ cp_route('globals.blueprint.edit', $set->handle()) }}" v-pre>{{ __($set->title()) }}</a>
                         </div>
                     </td>
                 </tr>
@@ -125,7 +125,7 @@
                     <td>
                         <div class="flex items-center">
                             <div class="w-4 h-4 mr-4">@cp_svg('icons/light/assets')</div>
-                            <a href="{{ cp_route('asset-containers.blueprint.edit', $container->handle()) }}" v-pre>{{ $container->title() }}</a>
+                            <a href="{{ cp_route('asset-containers.blueprint.edit', $container->handle()) }}" v-pre>{{ __($container->title()) }}</a>
                         </div>
                     </td>
                 </tr>
@@ -146,7 +146,7 @@
                     <td>
                         <div class="flex items-center">
                             <div class="w-4 h-4 mr-4">@cp_svg('icons/light/drawer-file')</div>
-                            <a href="{{ cp_route('forms.blueprint.edit', $form->handle()) }}" v-pre>{{ $form->title() }}</a>
+                            <a href="{{ cp_route('forms.blueprint.edit', $form->handle()) }}" v-pre>{{ __($form->title()) }}</a>
                         </div>
                     </td>
             @if ($loop->last)
diff --git a/resources/views/collections/empty.blade.php b/resources/views/collections/empty.blade.php
index 0ce30204c8..b82fe23559 100644
--- a/resources/views/collections/empty.blade.php
+++ b/resources/views/collections/empty.blade.php
@@ -8,7 +8,7 @@
         'url' => cp_route('collections.index'),
         'title' => __('Collections')
     ])
-    <h1>{{ $collection->title() }}</h1>
+    <h1>{{ __($collection->title()) }}</h1>
 </header>
 
 <div class="card p-4 content">
diff --git a/resources/views/forms/blueprints/edit.blade.php b/resources/views/forms/blueprints/edit.blade.php
index 032a064897..3c40b230d7 100644
--- a/resources/views/forms/blueprints/edit.blade.php
+++ b/resources/views/forms/blueprints/edit.blade.php
@@ -5,7 +5,7 @@
 
     @include('statamic::partials.breadcrumb', [
         'url' => cp_route('forms.show', $form->handle()),
-        'title' => $form->title(),
+        'title' => __($form->title()),
     ])
 
     <blueprint-builder
diff --git a/resources/views/forms/show.blade.php b/resources/views/forms/show.blade.php
index 5525da0a40..c6553bdbc4 100644
--- a/resources/views/forms/show.blade.php
+++ b/resources/views/forms/show.blade.php
@@ -11,7 +11,7 @@
         ])
         <div class="flex items-center">
             <h1 class="flex-1">
-                {{ $form->title() }}
+                {{ __($form->title()) }}
             </h1>
 
             @if(\Statamic\Facades\User::current()->can('edit', $form) || \Statamic\Facades\User::current()->can('delete', $form))
diff --git a/resources/views/partials/breadcrumb.blade.php b/resources/views/partials/breadcrumb.blade.php
index 37c253d957..de0d5e6ea8 100644
--- a/resources/views/partials/breadcrumb.blade.php
+++ b/resources/views/partials/breadcrumb.blade.php
@@ -3,6 +3,6 @@
         <div class="h-6 rotate-180 svg-icon using-svg">
             @cp_svg('icons/micro/chevron-right')
         </div>
-        <span v-pre>{{ $title }}</span>
+        <span v-pre>{{ __($title) }}</span>
     </a>
 </div>
diff --git a/resources/views/taxonomies/empty.blade.php b/resources/views/taxonomies/empty.blade.php
index 54b91b3ea6..c362cafd05 100644
--- a/resources/views/taxonomies/empty.blade.php
+++ b/resources/views/taxonomies/empty.blade.php
@@ -8,7 +8,7 @@
         'url' => cp_route('taxonomies.index'),
         'title' => __('Taxonomies')
     ])
-    <h1>{{ $taxonomy->title() }}</h1>
+    <h1>{{ __($taxonomy->title()) }}</h1>
 </header>
 
 <div class="card p-4 content">
diff --git a/resources/views/taxonomies/show.blade.php b/resources/views/taxonomies/show.blade.php
index 5f1ae3d8cf..56a106c9aa 100644
--- a/resources/views/taxonomies/show.blade.php
+++ b/resources/views/taxonomies/show.blade.php
@@ -10,7 +10,7 @@
             'title' => __('Taxonomies')
         ])
         <div class="flex items-center">
-            <h1 class="flex-1">{{ $taxonomy->title() }}</h1>
+            <h1 class="flex-1">{{ __($taxonomy->title()) }}</h1>
 
             <dropdown-list class="mr-2">
                 @can('edit', $taxonomy)
diff --git a/resources/views/usergroups/show.blade.php b/resources/views/usergroups/show.blade.php
index c0efed4f36..ecc2850ad2 100644
--- a/resources/views/usergroups/show.blade.php
+++ b/resources/views/usergroups/show.blade.php
@@ -10,7 +10,7 @@
             'title' => __('User Groups')
         ])
         <div class="flex items-center">
-            <h1 class="flex-1">{{ $group->title() }}</h1>
+            <h1 class="flex-1">{{ __($group->title()) }}</h1>
             <dropdown-list class="mr-2">
                 @can('edit', $group)
                     <dropdown-item :text="__('Edit User Group')" redirect="{{ $group->editUrl() }}"></dropdown-item>
diff --git a/src/Auth/CorePermissions.php b/src/Auth/CorePermissions.php
index 9637e1f20b..69f9d4e64f 100644
--- a/src/Auth/CorePermissions.php
+++ b/src/Auth/CorePermissions.php
@@ -77,7 +77,7 @@ protected function registerSites()
         $this->register('access {site} site', function ($permission) {
             $permission->replacements('site', function () {
                 return Site::all()->map(function ($site) {
-                    return ['value' => $site->handle(), 'label' => $site->name().' ('.$site->handle().')', 'handle' => $site->handle()];
+                    return ['value' => $site->handle(), 'label' => __($site->name()).' ('.$site->handle().')', 'handle' => $site->handle()];
                 });
             });
         });
@@ -101,7 +101,7 @@ protected function registerCollections()
                 ]),
             ])->replacements('collection', function () {
                 return Collection::all()->map(function ($collection) {
-                    return ['value' => $collection->handle(), 'label' => $collection->title()];
+                    return ['value' => $collection->handle(), 'label' => __($collection->title())];
                 });
             });
         });
@@ -116,7 +116,7 @@ protected function registerNavigation()
                 $this->permission('edit {nav} nav'),
             ])->replacements('nav', function () {
                 return Nav::all()->map(function ($nav) {
-                    return ['value' => $nav->handle(), 'label' => $nav->title()];
+                    return ['value' => $nav->handle(), 'label' => __($nav->title())];
                 });
             });
         });
@@ -129,7 +129,7 @@ protected function registerGlobals()
         $this->register('edit {global} globals', function ($permission) {
             $permission->replacements('global', function () {
                 return GlobalSet::all()->map(function ($global) {
-                    return ['value' => $global->handle(), 'label' => $global->title()];
+                    return ['value' => $global->handle(), 'label' => __($global->title())];
                 });
             });
         });
@@ -147,7 +147,7 @@ protected function registerTaxonomies()
                 ]),
             ])->replacements('taxonomy', function () {
                 return Taxonomy::all()->map(function ($taxonomy) {
-                    return ['value' => $taxonomy->handle(), 'label' => $taxonomy->title()];
+                    return ['value' => $taxonomy->handle(), 'label' => __($taxonomy->title())];
                 });
             });
         });
@@ -167,7 +167,7 @@ protected function registerAssets()
                 ]),
             ])->replacements('container', function () {
                 return AssetContainer::all()->map(function ($container) {
-                    return ['value' => $container->handle(), 'label' => $container->title()];
+                    return ['value' => $container->handle(), 'label' => __($container->title())];
                 });
             });
         });
@@ -206,7 +206,7 @@ protected function registerForms()
                 $this->permission('delete {form} form submissions'),
             ])->replacements('form', function () {
                 return Form::all()->map(function ($form) {
-                    return ['value' => $form->handle(), 'label' => $form->title()];
+                    return ['value' => $form->handle(), 'label' => __($form->title())];
                 });
             });
         });
diff --git a/src/Fieldtypes/UserRoles.php b/src/Fieldtypes/UserRoles.php
index e06423431c..f056fa3573 100644
--- a/src/Fieldtypes/UserRoles.php
+++ b/src/Fieldtypes/UserRoles.php
@@ -17,7 +17,7 @@ protected function toItemArray($id, $site = null)
     {
         if ($role = Role::find($id)) {
             return [
-                'title' => $role->title(),
+                'title' => __($role->title()),
                 'id' => $role->handle(),
             ];
         }
@@ -42,7 +42,7 @@ public function getIndexItems($request)
         return Role::all()->sortBy('title')->map(function ($role) {
             return [
                 'id' => $role->handle(),
-                'title' => $role->title(),
+                'title' => __($role->title()),
             ];
         })->values();
     }
diff --git a/src/Forms/Fieldtype.php b/src/Forms/Fieldtype.php
index 9fb8fe87e7..8ff9b21478 100644
--- a/src/Forms/Fieldtype.php
+++ b/src/Forms/Fieldtype.php
@@ -57,7 +57,7 @@ protected function toItemArray($id, $site = null)
     {
         if ($form = Facades\Form::find($id)) {
             return [
-                'title' => $form->title(),
+                'title' => __($form->title()),
                 'id' => $form->handle(),
             ];
         }
@@ -85,7 +85,7 @@ public function getIndexItems($request)
         $formFields = function ($form) {
             return [
                 'id' => $form->handle(),
-                'title' => $form->title(),
+                'title' => __($form->title()),
                 'submissions' => $form->submissions()->count(),
             ];
         };
diff --git a/src/Http/Controllers/CP/Forms/FormsController.php b/src/Http/Controllers/CP/Forms/FormsController.php
index ea057f73e2..74497e1222 100644
--- a/src/Http/Controllers/CP/Forms/FormsController.php
+++ b/src/Http/Controllers/CP/Forms/FormsController.php
@@ -30,7 +30,7 @@ public function index(Request $request)
             ->map(function ($form) {
                 return [
                     'id' => $form->handle(),
-                    'title' => $form->title(),
+                    'title' => __($form->title()),
                     'submissions' => $form->submissions()->count(),
                     'show_url' => $form->showUrl(),
                     'edit_url' => $form->editUrl(),
@@ -143,7 +143,7 @@ public function edit($form)
 
         $values = [
             'handle' => $form->handle(),
-            'title' => $form->title(),
+            'title' => __($form->title()),
             'honeypot' => $form->honeypot(),
             'store' => $form->store(),
             'email' => $form->email(),
diff --git a/src/Http/Controllers/CP/Preferences/Nav/RoleNavController.php b/src/Http/Controllers/CP/Preferences/Nav/RoleNavController.php
index ced54f5354..57806826a0 100644
--- a/src/Http/Controllers/CP/Preferences/Nav/RoleNavController.php
+++ b/src/Http/Controllers/CP/Preferences/Nav/RoleNavController.php
@@ -32,7 +32,7 @@ public function edit($handle)
             : Nav::buildWithoutPreferences(true);
 
         return $this->navBuilder($nav, [
-            'title' => $role->title(),
+            'title' => __($role->title()),
             'updateUrl' => cp_route('preferences.nav.role.update', $role->handle()),
             'destroyUrl' => cp_route('preferences.nav.role.destroy', $role->handle()),
         ]);
diff --git a/src/Http/Controllers/CP/Users/RolesController.php b/src/Http/Controllers/CP/Users/RolesController.php
index 0fa5588e29..465a071a07 100644
--- a/src/Http/Controllers/CP/Users/RolesController.php
+++ b/src/Http/Controllers/CP/Users/RolesController.php
@@ -24,7 +24,7 @@ public function index(Request $request)
         $roles = Role::all()->map(function ($role) {
             return [
                 'id' => $role->handle(),
-                'title' => $role->title(),
+                'title' => __($role->title()),
                 'handle' => $role->handle(),
                 'permissions' => $role->isSuper() ? __('Super User') : $role->permissions()->count(),
                 'edit_url' => $role->editUrl(),