feat: migrate to vue 3 (#2689)

---------

Co-authored-by: Joep <jcbuhre@gmail.com>
Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com>
Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/components/header/Action.vue

@@ -2,24 +2,31 @@
   <button @click="action" :aria-label="label" :title="label" class="action">
     <i class="material-icons">{{ icon }}</i>
     <span>{{ label }}</span>
-    <span v-if="counter > 0" class="counter">{{ counter }}</span>
+    <span v-if="counter && counter > 0" class="counter">{{ counter }}</span>
   </button>
 </template>
 
-<script>
-export default {
-  name: "action",
-  props: ["icon", "label", "counter", "show"],
-  methods: {
-    action: function () {
-      if (this.show) {
-        this.$store.commit("showHover", this.show);
-      }
+<script setup lang="ts">
+import { useLayoutStore } from "@/stores/layout";
 
-      this.$emit("action");
-    },
-  },
+const props = defineProps<{
+  icon?: string;
+  label?: string;
+  counter?: number;
+  show?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "action"): any;
+}>();
+
+const layoutStore = useLayoutStore();
+
+const action = () => {
+  if (props.show) {
+    layoutStore.showHover(props.show);
+  }
+
+  emit("action");
 };
 </script>
-
-<style></style>

frontend/src/components/header/HeaderBar.vue

@@ -1,62 +1,59 @@
 <template>
   <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
-    <action
-      v-if="showMenu !== undefined"
+    <img v-if="showLogo" :src="logoURL" />
+    <Action
+      v-if="showMenu"
       class="menu-button"
       icon="menu"
-      :label="$t('buttons.toggleSidebar')"
-      @action="openSidebar()"
+      :label="t('buttons.toggleSidebar')"
+      @action="layoutStore.showHover('sidebar')"
     />
 
     <slot />
 
-    <div id="dropdown" :class="{ active: this.currentPromptName === 'more' }">
+    <div
+      id="dropdown"
+      :class="{ active: layoutStore.currentPromptName === 'more' }"
+    >
       <slot name="actions" />
     </div>
 
-    <action
-      v-if="this.$slots.actions"
+    <Action
+      v-if="ifActionsSlot"
       id="more"
       icon="more_vert"
-      :label="$t('buttons.more')"
-      @action="$store.commit('showHover', 'more')"
+      :label="t('buttons.more')"
+      @action="layoutStore.showHover('more')"
     />
 
     <div
       class="overlay"
-      v-show="this.currentPromptName == 'more'"
-      @click="$store.commit('closeHovers')"
+      v-show="layoutStore.currentPromptName == 'more'"
+      @click="layoutStore.closeHovers"
     />
   </header>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useLayoutStore } from "@/stores/layout";
+
 import { logoURL } from "@/utils/constants";
 
 import Action from "@/components/header/Action.vue";
-import { mapGetters } from "vuex";
+import { computed, useSlots } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
-  name: "header-bar",
-  props: ["showLogo", "showMenu"],
-  components: {
-    Action,
-  },
-  data: function () {
-    return {
-      logoURL,
-    };
-  },
-  methods: {
-    openSidebar() {
-      this.$store.commit("showHover", "sidebar");
-    },
-  },
-  computed: {
-    ...mapGetters(["currentPromptName"]),
-  },
-};
+defineProps<{
+  showLogo?: boolean;
+  showMenu?: boolean;
+}>();
+
+const layoutStore = useLayoutStore();
+const slots = useSlots();
+
+const { t } = useI18n();
+
+const ifActionsSlot = computed(() => (slots.actions ? true : false));
 </script>
 
 <style></style>