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/Rename.vue

@@ -10,8 +10,8 @@
         >:
       </p>
       <input
+        id="focus-prompt"
         class="input input--block"
-        v-focus
         type="text"
         @keyup.enter="submit"
         v-model.trim="name"
@@ -21,7 +21,7 @@
     <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')"
       >
@@ -41,7 +41,9 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 import url from "@/utils/url";
 import { files as api } from "@/api";
 
@@ -55,13 +57,20 @@ export default {
   created() {
     this.name = this.oldName();
   },
+  inject: ["$showError"],
   computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     cancel: function () {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
     oldName: function () {
       if (!this.isListing) {
@@ -96,12 +105,12 @@ export default {
           return;
         }
 
-        this.$store.commit("setReload", true);
+        this.reload = true;
       } catch (e) {
         this.$showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
   },
 };