feature/editor-improvements (#289)

* pin editor buttons on scroll

* scaler scratch

* fix langauge assignment 1st pass

* set lang on navigate

* refactor/breakup router

* unify style for language selectro

* refactor/code-cleanup

* refactor/page specific components to page folder

* Fix time card layout issue

* fix timecard display

* update mobile cards / fix overflow errors

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

frontend/src/components/UI/TheRecipeFab.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
+      <v-card :loading="processing">
+        <v-app-bar dark color="primary mb-2">
+          <v-icon large left v-if="!processing">
+            mdi-link
+          </v-icon>
+          <v-progress-circular
+            v-else
+            indeterminate
+            color="white"
+            large
+            class="mr-2"
+          >
+          </v-progress-circular>
+
+          <v-toolbar-title class="headline">
+            {{ $t("new-recipe.from-url") }}
+          </v-toolbar-title>
+
+          <v-spacer></v-spacer>
+        </v-app-bar>
+        <v-form ref="urlForm" @submit.prevent="createRecipe">
+          <v-card-text>
+            <v-text-field
+              v-model="recipeURL"
+              :label="$t('new-recipe.recipe-url')"
+              required
+              validate-on-blur
+              autofocus
+              class="mt-1"
+              :rules="[isValidWebUrl]"
+              :hint="$t('new-recipe.url-form-hint')"
+              persistent-hint
+            ></v-text-field>
+
+            <v-alert v-if="error" color="red" outlined type="success">
+              {{ $t("new-recipe.error-message") }}
+            </v-alert>
+          </v-card-text>
+
+          <v-divider></v-divider>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="grey" text @click="reset">
+              {{ $t("general.close") }}
+            </v-btn>
+            <v-btn color="success" text type="submit" :loading="processing">
+              {{ $t("general.submit") }}
+            </v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-dialog>
+    <v-speed-dial v-model="fab" fixed right bottom open-on-hover>
+      <template v-slot:activator>
+        <v-btn v-model="fab" color="accent" dark fab>
+          <v-icon> mdi-plus </v-icon>
+        </v-btn>
+      </template>
+      <v-btn fab dark small color="primary" @click="addRecipe = true">
+        <v-icon>mdi-link</v-icon>
+      </v-btn>
+      <v-btn fab dark small color="accent" @click="navCreate">
+        <v-icon>mdi-square-edit-outline</v-icon>
+      </v-btn>
+    </v-speed-dial>
+  </div>
+</template>
+
+<script>
+import { api } from "@/api";
+
+export default {
+  data() {
+    return {
+      error: false,
+      fab: false,
+      addRecipe: false,
+      recipeURL: "",
+      processing: false,
+    };
+  },
+
+  methods: {
+    async createRecipe() {
+      if (this.$refs.urlForm.validate()) {
+        this.processing = true;
+        let response = await api.recipes.createByURL(this.recipeURL);
+        if (response.status !== 201) {
+          this.error = true;
+          this.processing = false;
+          return;
+        }
+
+        this.addRecipe = false;
+        this.processing = false;
+        this.recipeURL = "";
+        this.$router.push(`/recipe/${response.data}`);
+      }
+    },
+
+    navCreate() {
+      this.$router.push("/new");
+    },
+
+    reset() {
+      this.fab = false;
+      this.error = false;
+      this.addRecipe = false;
+      this.recipeURL = "";
+      this.processing = false;
+    },
+    isValidWebUrl(url) {
+      let regEx = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)$/gm;
+      return regEx.test(url) ? true : "Must be a Valid URL";
+    },
+  },
+};
+</script>
+
+<style>
+</style>