Frontend Refactor + Bug Fixes

* merge category and tag selector

* unifiy category selector

* add hint

* spacing

* fix nextcloud migration

* simplify email validator #261

* formatting

* cleanup

* auto-gen

* format

* update run script

* unified category/tag selector

* rename component

* Add advanced search link

* remove old code

* convert keywords to tags

* add proper behavior on rename

* proper image name association on rename

* fix test cleanup

* changelog

* set docker comppand

* minify on migration

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

frontend/src/components/UI/Dialogs/NewCategoryTagDialog.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <v-btn icon @click="dialog = true" class="mt-n1">
+      <v-icon :color="color">mdi-plus</v-icon>
+    </v-btn>
+    <v-dialog v-model="dialog" width="500">
+      <v-card>
+        <v-app-bar dense dark color="primary mb-2">
+          <v-icon large left class="mt-1">
+            mdi-tag
+          </v-icon>
+
+          <v-toolbar-title class="headline">
+            {{ title }}
+          </v-toolbar-title>
+
+          <v-spacer></v-spacer>
+        </v-app-bar>
+        <v-card-title> </v-card-title>
+        <v-form @submit.prevent="select">
+          <v-card-text>
+            <v-text-field
+              dense
+              :label="inputLabel"
+              v-model="itemName"
+              :rules="[rules.required]"
+            ></v-text-field>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="grey" text @click="dialog = false">
+              {{ $t("general.cancel") }}
+            </v-btn>
+            <v-btn color="success" text type="submit" :disabled="!itemName">
+              {{ $t("general.create") }}
+            </v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import { api } from "@/api";
+const CREATED_ITEM_EVENT = "created-item";
+export default {
+  props: {
+    buttonText: String,
+    value: String,
+    color: {
+      default: null,
+    },
+    tagDialog: {
+      default: true,
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      itemName: "",
+      rules: {
+        required: val =>
+          !!val || this.$t("settings.theme.theme-name-is-required"),
+      },
+    };
+  },
+
+  computed: {
+    title() {
+      return this.tagDialog ? "Create a Tag" : "Create a Category";
+    },
+    inputLabel() {
+      return this.tagDialog ? "Tag Name" : "Tag Category";
+    },
+  },
+  watch: {
+    dialog(val) {
+      if (!val) this.itemName = "";
+    },
+  },
+
+  methods: {
+    async select() {
+      const newItem = await (async () => {
+        if (this.tagDialog) {
+          const newItem = await api.tags.create(this.itemName);
+          return newItem;
+        } else {
+          const newItem = await api.categories.create(this.itemName);
+          return newItem;
+        }
+      })();
+
+      this.$emit(CREATED_ITEM_EVENT, newItem);
+      this.dialog = false;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/UI/Search/SearchBar.vue

@@ -17,11 +17,18 @@
       </v-text-field>
     </template>
     <v-card v-if="showResults" max-height="500" :max-width="maxWidth">
-      <v-card-text class="py-1">Results</v-card-text>
+      <v-card-text class="flex row mx-auto">
+        <div class="mr-auto">
+          Results
+        </div>
+        <router-link to="/search">
+          Advanced Search
+        </router-link>
+      </v-card-text>
       <v-divider></v-divider>
-      <v-list scrollable>
+      <v-list scrollable v-if="autoResults">
         <v-list-item
-          v-for="(item, index) in autoResults"
+          v-for="(item, index) in autoResults.slice(0, 15)"
           :key="index"
           :to="navOnClick ? `/recipe/${item.item.slug}` : null"
           @click="navOnClick ? null : selected(item.item.slug, item.item.name)"