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

@@ -4,23 +4,30 @@
   </div>
 </template>
 
-<script>
-// eslint-disable-next-line no-undef
-// __webpack_public_path__ = window.FileBrowser.StaticURL + "/";
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { setHtmlLocale } from "./i18n";
+import { getMediaPreference, getTheme, setTheme } from "./utils/theme";
 
-export default {
-  name: "app",
-  mounted() {
-    const loading = document.getElementById("loading");
-    loading.classList.add("done");
+const { locale } = useI18n();
 
-    setTimeout(function () {
-      loading.parentNode.removeChild(loading);
-    }, 200);
-  },
-};
+const userTheme = ref<UserTheme>(getTheme() || getMediaPreference());
+
+onMounted(() => {
+  setTheme(userTheme.value);
+  setHtmlLocale(locale.value);
+  // this might be null during HMR
+  const loading = document.getElementById("loading");
+  loading?.classList.add("done");
+
+  setTimeout(function () {
+    loading?.parentNode?.removeChild(loading);
+  }, 200);
+});
+
+// handles ltr/rtl changes
+watch(locale, (newValue) => {
+  newValue && setHtmlLocale(newValue);
+});
 </script>
-
-<style>
-@import "./css/styles.css";
-</style>