feat: Add Suggestion To Use Bulk URL Import (#2852)

* fixed warning

* re-arranged menu options

* fixed broken link

* added bulk url suggestion

* simply bulk import url var

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -139,7 +139,7 @@ export default defineComponent({
       default: false,
     },
   },
-  setup(props, context) {
+  setup(_, context) {
     const deleteDialog = ref(false);
 
     const { i18n, $globals } = useContext();

frontend/lang/messages/en-US.json

@@ -533,6 +533,8 @@
     "new-recipe-names-must-be-unique": "New recipe names must be unique",
     "scrape-recipe": "Scrape Recipe",
     "scrape-recipe-description": "Scrape a recipe by url. Provide the url for the site you want to scrape, and Mealie will attempt to scrape the recipe from that site and add it to your collection.",
+    "scrape-recipe-have-a-lot-of-recipes": "Have a lot of recipes you want to scrape at once?",
+    "scrape-recipe-suggest-bulk-importer": "Try out the bulk importer",
     "import-original-keywords-as-tags": "Import original keywords as tags",
     "stay-in-edit-mode": "Stay in Edit mode",
     "import-from-zip": "Import from Zip",

frontend/pages/g/_groupSlug/r/create.vue

@@ -20,7 +20,7 @@
 
     <AdvancedOnly>
       <v-container class="d-flex justify-center align-center my-4">
-        <a :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }}</a>
+        <router-link :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }}</router-link>
       </v-container>
     </AdvancedOnly>
   </div>
@@ -42,6 +42,11 @@ export default defineComponent({
         text: i18n.tc("recipe.import-with-url"),
         value: "url",
       },
+      {
+        icon: $globals.icons.link,
+        text: i18n.tc("recipe.bulk-url-import"),
+        value: "bulk",
+      },
       {
         icon: $globals.icons.edit,
         text: i18n.tc("recipe.create-recipe"),
@@ -52,11 +57,6 @@ export default defineComponent({
         text: i18n.tc("recipe.import-with-zip"),
         value: "zip",
       },
-      {
-        icon: $globals.icons.link,
-        text: i18n.tc("recipe.bulk-url-import"),
-        value: "bulk",
-      },
       {
         icon: $globals.icons.robot,
         text: i18n.tc("recipe.debug-scraper"),

frontend/pages/g/_groupSlug/r/create/url.vue

@@ -4,7 +4,8 @@
       <div>
         <v-card-title class="headline"> {{ $t('recipe.scrape-recipe') }} </v-card-title>
         <v-card-text>
-          {{ $t('recipe.scrape-recipe-description') }}
+          <p>{{ $t('recipe.scrape-recipe-description') }}</p>
+          <p>{{ $t('recipe.scrape-recipe-have-a-lot-of-recipes') }} <a :href="bulkImporterTarget">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</a>.</p>
           <v-text-field
             v-model="recipeUrl"
             :label="$t('new-recipe.recipe-url')"
@@ -94,6 +95,8 @@ export default defineComponent({
     const router = useRouter();
     const tags = useTagStore();
 
+    const bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
+
     function handleResponse(response: AxiosResponse<string> | null, edit = false, refreshTags = false) {
       if (response?.status !== 201) {
         state.error = true;
@@ -167,6 +170,7 @@ export default defineComponent({
     }
 
     return {
+      bulkImporterTarget,
       recipeUrl,
       importKeywordsAsTags,
       stayInEditMode,