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/views/Layout.vue

@@ -1,46 +1,46 @@
 <template>
   <div>
-    <div v-if="progress" class="progress">
-      <div v-bind:style="{ width: this.progress + '%' }"></div>
+    <div v-if="uploadStore.getProgress" class="progress">
+      <div v-bind:style="{ width: uploadStore.getProgress + '%' }"></div>
     </div>
     <sidebar></sidebar>
     <main>
       <router-view></router-view>
-      <shell v-if="isExecEnabled && isLogged && user.perm.execute" />
+      <shell
+        v-if="
+          enableExec && authStore.isLoggedIn && authStore.user?.perm.execute
+        "
+      />
     </main>
     <prompts></prompts>
     <upload-files></upload-files>
   </div>
 </template>
 
-<script>
-import { mapState, mapGetters } from "vuex";
+<script setup lang="ts">
+import { useAuthStore } from "@/stores/auth";
+import { useLayoutStore } from "@/stores/layout";
+import { useFileStore } from "@/stores/file";
+import { useUploadStore } from "@/stores/upload";
 import Sidebar from "@/components/Sidebar.vue";
 import Prompts from "@/components/prompts/Prompts.vue";
 import Shell from "@/components/Shell.vue";
-import UploadFiles from "../components/prompts/UploadFiles.vue";
+import UploadFiles from "@/components/prompts/UploadFiles.vue";
 import { enableExec } from "@/utils/constants";
+import { watch } from "vue";
+import { useRoute } from "vue-router";
 
-export default {
-  name: "layout",
-  components: {
-    Sidebar,
-    Prompts,
-    Shell,
-    UploadFiles,
-  },
-  computed: {
-    ...mapGetters(["isLogged", "progress", "currentPrompt"]),
-    ...mapState(["user"]),
-    isExecEnabled: () => enableExec,
-  },
-  watch: {
-    $route: function () {
-      this.$store.commit("resetSelected");
-      this.$store.commit("multiple", false);
-      if (this.currentPrompt?.prompt !== "success")
-        this.$store.commit("closeHovers");
-    },
-  },
-};
+const layoutStore = useLayoutStore();
+const authStore = useAuthStore();
+const fileStore = useFileStore();
+const uploadStore = useUploadStore();
+const route = useRoute();
+
+watch(route, () => {
+  fileStore.selected = [];
+  fileStore.multiple = false;
+  if (layoutStore.currentPromptName !== "success") {
+    layoutStore.closeHovers();
+  }
+});
 </script>