build: switch from yarn to npm to manage js dependencies and move js contents to root

yarn v1 is being deprecated and starts to have some issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/views/PageNotFound.vue

@@ -0,0 +1,82 @@
+<template>
+  <section class="container mx-auto py-4 is-max-desktop max-w-2xl">
+    <div class="">
+      <div class="">
+        <picture>
+          <source
+            :srcset="`/img/pics/error-480w.webp 1x, /img/pics/error-1024w.webp 2x`"
+            type="image/webp"
+          />
+
+          <img
+            :src="`/img/pics/error-480w.webp`"
+            alt=""
+            width="2616"
+            height="1698"
+            loading="lazy"
+          />
+        </picture>
+        <h1 class="text-4xl mb-3">
+          {{ $t("The page you're looking for doesn't exist.") }}
+        </h1>
+        <p>
+          {{
+            $t(
+              "Please make sure the address is correct and that the page hasn't been moved."
+            )
+          }}
+        </p>
+        <p>
+          {{
+            $t(
+              "Please contact this instance's Mobilizon admin if you think this is a mistake."
+            )
+          }}
+        </p>
+        <!--  The following should just be replaced with the SearchField component but it fails for some reason  -->
+        <form @submit.prevent="enter" class="flex flex-wrap mt-3">
+          <o-field expanded>
+            <o-input
+              expanded
+              icon="magnify"
+              type="search"
+              :placeholder="searchPlaceHolder"
+              v-model="searchText"
+            />
+            <p class="control">
+              <button type="submit" class="button is-primary">
+                {{ $t("Search") }}
+              </button>
+            </p>
+          </o-field>
+        </form>
+      </div>
+    </div>
+  </section>
+</template>
+<script lang="ts" setup>
+import { useHead } from "@vueuse/head";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import RouteName from "../router/name";
+
+const searchText = ref("");
+
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Page not found")),
+});
+const router = useRouter();
+
+const searchPlaceHolder = computed((): string => {
+  return t("Search events, groups, etc.") as string;
+});
+
+const enter = async (): Promise<void> => {
+  await router.push({
+    name: RouteName.SEARCH,
+    query: { term: searchText.value },
+  });
+};
+</script>