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/components/SearchField.vue

@@ -0,0 +1,64 @@
+<template>
+  <p label-for="navSearchField" class="-mt-2">
+    <input
+      :placeholder="defaultPlaceHolder"
+      type="search"
+      id="navSearchField"
+      icon="Magnify"
+      icon-clickable
+      rounded
+      custom-class="searchField"
+      dir="auto"
+      v-model="search"
+      @keyup.enter="enter"
+    />
+    <label>
+      <span class="sr-only">{{ defaultPlaceHolder }}</span>
+    </label>
+  </p>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import RouteName from "../router/name";
+
+const router = useRouter();
+const { t } = useI18n({ useScope: "global" });
+const emit = defineEmits(["navbar-search"]);
+
+const props = defineProps<{
+  placeholder?: string;
+}>();
+
+const search = ref("");
+
+const enter = async (): Promise<void> => {
+  emit("navbar-search");
+  await router.push({
+    name: RouteName.SEARCH,
+    query: { term: search.value },
+  });
+};
+
+const defaultPlaceHolder = computed((): string => {
+  // We can't use "this" inside @Prop's default value.
+  return props.placeholder ?? t("Search");
+});
+</script>
+
+<style lang="scss">
+label span.visually-hidden {
+  display: none;
+}
+
+input.searchField {
+  box-shadow: none;
+  border-color: #b5b5b5;
+  border-radius: 9999px !important;
+
+  &::placeholder {
+    color: gray;
+  }
+}
+</style>