Localized show page titles

client/public/locales/en/common.json

@@ -161,6 +161,7 @@
             "edit": "Edit Spool",
             "list": "Spools",
             "show": "Show Spool",
+            "show_title": "[Spool #{{id}}] {{name}}",
             "archive": "Archive Spool"
         },
         "messages": {
@@ -200,7 +201,8 @@
             "clone": "Clone Filament",
             "edit": "Edit Filament",
             "list": "Filaments",
-            "show": "Show Filament"
+            "show": "Show Filament",
+            "show_title": "[Filament #{{id}}] {{name}}"
         }
     },
     "vendor": {
@@ -216,7 +218,8 @@
             "clone": "Clone Vendor",
             "edit": "Edit Vendor",
             "list": "Vendors",
-            "show": "Show Vendor"
+            "show": "Show Vendor",
+            "show_title": "[Vendor #{{id}}] {{name}}"
         }
     },
     "table": {

client/src/pages/filaments/show.tsx

@@ -26,7 +26,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
     if (item.vendor) {
       vendorPrefix = `${item.vendor.name} - `;
     }
-    return `[Filament #${item.id}] ${vendorPrefix}${item.name}`;
+    return t("filament.titles.show_title", { id: item.id, name: vendorPrefix + item.name });
   };
 
   const formatVendor = (item: IVendor) => {

client/src/pages/spools/show.tsx

@@ -43,7 +43,7 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
   };
 
   const formatTitle = (item: ISpool) => {
-    return `[Spool #${item.id}] ${formatFilament(item.filament)}`;
+    return t("spool.titles.show_title", { id: item.id, name: formatFilament(item.filament) });
   };
 
   return (

client/src/pages/vendors/show.tsx

@@ -20,7 +20,7 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
   const record = data?.data;
 
   const formatTitle = (item: IVendor) => {
-    return `[Vendor #${item.id}] ${item.name}`;
+    return t("vendor.titles.show_title", { id: item.id, name: item.name });
   };
 
   return (