refactor: migrate frontend tooling to vite 4 (#2645)

---------

Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/views/files/Editor.vue

@@ -26,13 +26,13 @@ import { theme } from "@/utils/constants";
 import buttons from "@/utils/buttons";
 import url from "@/utils/url";
 
+import { version as ace_version } from "ace-builds";
 import ace from "ace-builds/src-min-noconflict/ace.js";
 import modelist from "ace-builds/src-min-noconflict/ext-modelist.js";
-import "ace-builds/webpack-resolver";
 
-import HeaderBar from "@/components/header/HeaderBar";
-import Action from "@/components/header/Action";
-import Breadcrumbs from "@/components/Breadcrumbs";
+import HeaderBar from "@/components/header/HeaderBar.vue";
+import Action from "@/components/header/Action.vue";
+import Breadcrumbs from "@/components/Breadcrumbs.vue";
 
 export default {
   name: "editor",
@@ -86,6 +86,11 @@ export default {
   mounted: function () {
     const fileContent = this.req.content || "";
 
+    ace.config.set(
+      "basePath",
+      `https://cdn.jsdelivr.net/npm/ace-builds@${ace_version}/src-min-noconflict/`
+    );
+
     this.editor = ace.edit("editor", {
       value: fileContent,
       showPrintMargin: false,

frontend/src/views/files/Listing.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <header-bar showMenu showLogo>
-      <search /> <title />
+      <search />
+      <title />
       <action
         class="search-button"
         icon="search"
@@ -274,10 +275,10 @@ import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
 
-import HeaderBar from "@/components/header/HeaderBar";
-import Action from "@/components/header/Action";
-import Search from "@/components/Search";
-import Item from "@/components/files/ListingItem";
+import HeaderBar from "@/components/header/HeaderBar.vue";
+import Action from "@/components/header/Action.vue";
+import Search from "@/components/Search.vue";
+import Item from "@/components/files/ListingItem.vue";
 
 export default {
   name: "listing",

frontend/src/views/files/Preview.vue

@@ -148,9 +148,9 @@ import { files as api } from "@/api";
 import { resizePreview } from "@/utils/constants";
 import url from "@/utils/url";
 import throttle from "lodash.throttle";
-import HeaderBar from "@/components/header/HeaderBar";
-import Action from "@/components/header/Action";
-import ExtendedImage from "@/components/files/ExtendedImage";
+import HeaderBar from "@/components/header/HeaderBar.vue";
+import Action from "@/components/header/Action.vue";
+import ExtendedImage from "@/components/files/ExtendedImage.vue";
 
 const mediaTypes = ["image", "video", "audio", "blob"];