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/Account/ActorAutoComplete.vue

@@ -0,0 +1,77 @@
+<template>
+  <o-inputitems
+    :modelValue="modelValue"
+    @update:modelValue="(val: IActor[]) => $emit('update:modelValue', val)"
+    :data="availableActors"
+    :allow-autocomplete="true"
+    :allow-new="false"
+    :open-on-focus="false"
+    field="displayName"
+    placeholder="Add a recipient"
+    @typing="getActors"
+  >
+    <template #default="props">
+      <ActorInline :actor="props.option" />
+    </template>
+  </o-inputitems>
+</template>
+
+<script setup lang="ts">
+import { SEARCH_PERSON_AND_GROUPS } from "@/graphql/search";
+import { IActor, IGroup, IPerson, displayName } from "@/types/actor";
+import { Paginate } from "@/types/paginate";
+import { useLazyQuery } from "@vue/apollo-composable";
+import { ref } from "vue";
+import ActorInline from "./ActorInline.vue";
+
+defineProps<{
+  modelValue: IActor[];
+}>();
+
+defineEmits<{
+  "update:modelValue": [value: IActor[]];
+}>();
+
+const {
+  load: loadSearchPersonsAndGroupsQuery,
+  refetch: refetchSearchPersonsAndGroupsQuery,
+} = useLazyQuery<
+  { searchPersons: Paginate<IPerson>; searchGroups: Paginate<IGroup> },
+  { searchText: string }
+>(SEARCH_PERSON_AND_GROUPS);
+
+const availableActors = ref<IActor[]>([]);
+
+const getActors = async (text: string) => {
+  availableActors.value = await fetchActors(text);
+};
+
+const fetchActors = async (text: string): Promise<IActor[]> => {
+  if (text === "") return [];
+  try {
+    const res =
+      (await loadSearchPersonsAndGroupsQuery(SEARCH_PERSON_AND_GROUPS, {
+        searchText: text,
+      })) ||
+      (
+        await refetchSearchPersonsAndGroupsQuery({
+          searchText: text,
+        })
+      )?.data;
+    if (!res) return [];
+    return [
+      ...res.searchPersons.elements.map((person) => ({
+        ...person,
+        displayName: displayName(person),
+      })),
+      ...res.searchGroups.elements.map((group) => ({
+        ...group,
+        displayName: displayName(group),
+      })),
+    ];
+  } catch (e) {
+    console.error(e);
+    return [];
+  }
+};
+</script>