feat(desktop): add i18n infrastructure with react-intl (#8105)

ui/desktop/src/components/RecipeHeader.tsx

@@ -1,14 +1,24 @@
+import { defineMessages, useIntl } from '../i18n';
+
+const i18n = defineMessages({
+  recipeLabel: {
+    id: 'recipeHeader.recipeLabel',
+    defaultMessage: 'Recipe',
+  },
+});
+
 interface RecipeHeaderProps {
   title: string;
 }
 
 export function RecipeHeader({ title }: RecipeHeaderProps) {
+  const intl = useIntl();
   return (
     <div className="flex items-center justify-between px-4 py-2 border-b border-border-primary">
       <div className="flex items-center ml-6">
         <span className="w-2 h-2 rounded-full bg-green-500 mr-2" />
         <span className="text-sm">
-          <span className="text-text-secondary">Recipe</span>{' '}
+          <span className="text-text-secondary">{intl.formatMessage(i18n.recipeLabel)}</span>{' '}
           <span className="text-text-primary">{title}</span>
         </span>
       </div>