feat(frontend): ✨ food filter and add back search dialog (#794)

* return ingredients and foods on summary

* filter on foods

* update search page to TS and comp-api

* add additional search fields

* feat(frontend): ✨ add back search dialog

* update docs

* formatting

* update sidebar - remove dropdown

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

frontend/components/Layout/AppHeader.vue

@@ -10,24 +10,29 @@
     <div btn class="pl-2">
       <v-toolbar-title style="cursor: pointer" @click="$router.push('/')"> Mealie </v-toolbar-title>
     </div>
-
-    {{ value }}
+    <RecipeDialogSearch ref="domSearchDialog" />
 
     <v-spacer></v-spacer>
-    <!-- <v-tooltip bottom>
-      <template #activator="{ on, attrs }">
-        <v-btn icon class="mr-1" small v-bind="attrs" v-on="on">
-          <v-icon v-text="isDark ? $globals.icons.weatherSunny : $globals.icons.weatherNight"> </v-icon>
-        </v-btn>
-      </template>
-      <span>{{ isDark ? $t("settings.theme.switch-to-light-mode") : $t("settings.theme.switch-to-dark-mode") }}</span>
-    </v-tooltip> -->
-    <!-- <div v-if="false" style="width: 350px"></div>
-    <div v-else>
-      <v-btn icon @click="$refs.recipeSearch.open()">
-        <v-icon> {{ $globals.icons.search }} </v-icon>
-      </v-btn>
-    </div> -->
+
+    <div v-if="!$vuetify.breakpoint.xs" style="max-width: 500px" @click="activateSearch">
+      <v-text-field
+        readonly
+        class="mt-6 rounded-xl"
+        rounded
+        dark
+        solo
+        dense
+        flat
+        :prepend-inner-icon="$globals.icons.search"
+        background-color="primary lighten-1"
+        color="white"
+        placeholder="Press '/'"
+      >
+      </v-text-field>
+    </div>
+    <v-btn v-else icon @click="activateSearch">
+      <v-icon> {{ $globals.icons.search }}</v-icon>
+    </v-btn>
 
     <!-- Navigation Menu -->
     <template v-if="menu">
@@ -44,19 +49,47 @@
 </template>
     
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import RecipeDialogSearch from "~/components/Domain/Recipe/RecipeDialogSearch.vue";
 export default defineComponent({
+  components: { RecipeDialogSearch },
   props: {
-    value: {
-      type: Boolean,
-      default: null,
-    },
     menu: {
       type: Boolean,
       default: true,
     },
   },
+  setup() {
+    const domSearchDialog = ref(null);
+
+    function activateSearch() {
+      // @ts-ignore
+      domSearchDialog?.value?.open();
+    }
+
+    return {
+      activateSearch,
+      domSearchDialog,
+    };
+  },
+  mounted() {
+    document.addEventListener("keyup", this.handleKeyEvent);
+  },
+  beforeUnmount() {
+    document.removeEventListener("keyup", this.handleKeyEvent);
+  },
+  methods: {
+    handleKeyEvent(e: any) {
+      if (
+        e.key === "/" &&
+        // @ts-ignore
+        !document.activeElement.id.startsWith("input")
+      ) {
+        e.preventDefault();
+        this.activateSearch();
+      }
+    },
+  },
 });
 </script>