🌏 i18n: Improve clarity of English translation (#3154)

* 🌏 i18n: Improve clarity of English translation

* 🔧 fix(useCategories): replace i18n string to `com_ui_select_a_category`

* 🔨 refactor: avoid using placeholder strings where possible

This commit simplifies the internationalization approach for English language strings by removing the placeholder ones where they are used only once. This makes proper localization possible for Russian language, and possibly others.

Also renamed `com_ui_text_prompt` to `com_ui_prompt_text` to match the alphabetical order.

* 🎨 style(CreatePromptForm): add missing margin-top to the submit button

client/src/components/Prompts/Groups/CategorySelector.tsx

@@ -47,7 +47,7 @@ const CategorySelector = ({
           showLabel={false}
           emptyTitle={true}
           showOptionIcon={true}
-          searchPlaceholder={localize('com_ui_search_var', localize('com_ui_categories'))}
+          searchPlaceholder={localize('com_ui_search_categories')}
           className={cn('h-10 w-56 cursor-pointer', className)}
           currentValueClass="text-md gap-2"
           optionsListClass="text-sm max-h-72"

client/src/components/Prompts/Groups/CreatePromptForm.tsx

@@ -99,7 +99,7 @@ const CreatePromptForm = ({
             <Controller
               name="name"
               control={control}
-              rules={{ required: localize('com_ui_is_required', localize('com_ui_prompt_name')) }}
+              rules={{ required: localize('com_ui_prompt_name_required') }}
               render={({ field }) => (
                 <div className="mb-1 flex items-center md:mb-0">
                   <Input
@@ -127,13 +127,13 @@ const CreatePromptForm = ({
         <div className="w-full md:mt-[1.075rem]">
           <div>
             <h2 className="flex items-center justify-between rounded-t-lg border border-gray-300 py-2 pl-4 pr-1 text-base font-semibold dark:border-gray-600 dark:text-gray-200">
-              {localize('com_ui_text_prompt')}*
+              {localize('com_ui_prompt_text')}*
             </h2>
             <div className="mb-4 min-h-32 rounded-b-lg border border-gray-300 p-4 transition-all duration-150 dark:border-gray-600">
               <Controller
                 name="prompt"
                 control={control}
-                rules={{ required: localize('com_ui_is_required', localize('com_ui_text_prompt')) }}
+                rules={{ required: localize('com_ui_prompt_text_required') }}
                 render={({ field }) => (
                   <div>
                     <TextareaAutosize
@@ -159,14 +159,14 @@ const CreatePromptForm = ({
             onValueChange={(value) => methods.setValue('oneliner', value)}
             tabIndex={3}
           />
-          <div className="flex justify-end">
+          <div className="mt-4 flex justify-end">
             <Button
               tabIndex={5}
               type="submit"
               variant="default"
               disabled={!isDirty || isSubmitting || !isValid}
             >
-              {localize('com_ui_create_var', localize('com_ui_prompt'))}
+              {localize('com_ui_create_prompt')}
             </Button>
           </div>
         </div>

client/src/components/Prompts/Groups/List.tsx

@@ -34,7 +34,7 @@ export default function List({
             className="mx-2 w-full px-3"
             onClick={() => navigate('/d/prompts/new')}
           >
-            + {localize('com_ui_create_var', localize('com_ui_prompt'))}
+            + {localize('com_ui_create_prompt')}
           </Button>
         </div>
       )}

client/src/components/Prompts/Groups/NoPromptGroup.tsx

@@ -18,7 +18,7 @@ export default function NoPromptGroup() {
               navigate('/d/prompts');
             }}
           >
-            {localize('com_ui_back_to_var', localize('com_ui_prompts'))}
+            {localize('com_ui_back_to_prompts')}
           </Button>
         </div>
       </div>

client/src/components/Prompts/PromptDetails.tsx

@@ -30,7 +30,7 @@ const PromptDetails = ({ group }: { group: TPromptGroup }) => {
         <div className="flex-1 overflow-y-auto border-gray-300 p-0 dark:border-gray-600 md:max-h-[calc(100vh-150px)] md:p-4">
           <div>
             <h2 className="flex items-center justify-between rounded-t-lg border border-gray-300 py-2 pl-4 text-base font-semibold dark:border-gray-600 dark:text-gray-200">
-              {localize('com_ui_text_prompt')}
+              {localize('com_ui_prompt_text')}
             </h2>
             <div className="group relative mb-4 min-h-32 rounded-b-lg border border-gray-300 p-4 transition-all duration-150 dark:border-gray-600">
               <span className="block break-words px-2 py-1 dark:text-gray-200">{promptText}</span>

client/src/components/Prompts/PromptEditor.tsx

@@ -33,7 +33,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
   return (
     <div>
       <h2 className="flex items-center justify-between rounded-t-lg border border-gray-300 py-2 pl-4 text-base font-semibold dark:border-gray-600 dark:text-gray-200">
-        {localize('com_ui_text_prompt')}
+        {localize('com_ui_prompt_text')}
         <div className="flex flex-row gap-6">
           {editorMode === PromptsEditorMode.ADVANCED && (
             <AlwaysMakeProd className="hidden sm:flex" />