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/prompts/Replace.vue

@@ -11,9 +11,10 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
+        tabindex="3"
       >
         {{ $t("buttons.cancel") }}
       </button>
@@ -22,14 +23,17 @@
         @click="currentPrompt.action"
         :aria-label="$t('buttons.continue')"
         :title="$t('buttons.continue')"
+        tabindex="2"
       >
         {{ $t("buttons.continue") }}
       </button>
       <button
+        id="focus-prompt"
         class="button button--flat button--red"
         @click="currentPrompt.confirm"
         :aria-label="$t('buttons.replace')"
         :title="$t('buttons.replace')"
+        tabindex="1"
       >
         {{ $t("buttons.replace") }}
       </button>
@@ -38,10 +42,16 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "replace",
-  computed: mapGetters(["currentPrompt"]),
+  computed: {
+    ...mapState(useLayoutStore, ["currentPrompt"]),
+  },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
 };
 </script>