Feature/CRF++ and server side locales (#731)

* add universal toast plugin

* add server side locales

* integrate CRF++ into CI/CD Pipeline

* docs(docs): 📝 add recipe parser docs

* feat(backend): ✨ Continued work on ingredient parsers

* add new model dest

* feat(frontend): ✨ New ingredient parser page

* formatting

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/pages/recipe/_slug/ingredient-parser.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-container v-if="recipe">
+    <v-container>
+      <BaseCardSectionTitle title="Ingredients Processor"> </BaseCardSectionTitle>
+      <v-card-actions class="justify-end">
+        <BaseButton color="info">
+          <template #icon> {{ $globals.icons.foods }}</template>
+          Parse All
+        </BaseButton>
+        <BaseButton save> Save All </BaseButton>
+      </v-card-actions>
+
+      </v-card>
+      <v-expansion-panels v-model="panels" multiple>
+        <v-expansion-panel v-for="(ing, index) in ingredients" :key="index">
+          <v-expansion-panel-header class="my-0 py-0">
+            {{ recipe.recipeIngredient[index].note }}
+          </v-expansion-panel-header>
+          <v-expansion-panel-content class="pb-0 mb-0">
+            <RecipeIngredientEditor v-model="ingredients[index]" />
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-container>
+  </v-container>
+</template>
+  
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs, useRoute, watch } from "@nuxtjs/composition-api";
+import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
+import { useApiSingleton } from "~/composables/use-api";
+import { useRecipeContext } from "~/composables/use-recipe-context";
+export default defineComponent({
+  components: {
+    RecipeIngredientEditor,
+  },
+  setup() {
+    const state = reactive({
+      panels: null,
+    });
+    const route = useRoute();
+    const slug = route.value.params.slug;
+    const api = useApiSingleton();
+
+    const { getBySlug, loading } = useRecipeContext();
+
+    const recipe = getBySlug(slug);
+
+    const ingredients = ref<any[]>([]);
+
+    watch(recipe, () => {
+      const copy = recipe?.value?.recipeIngredient || [];
+      ingredients.value = [...copy];
+    });
+
+    return {
+      ...toRefs(state),
+      api,
+      recipe,
+      loading,
+      ingredients,
+    };
+  },
+  head() {
+    return {
+      title: "Parser",
+    };
+  },
+});
+</script>
+  
+<style scoped>
+</style>