fix: various fixes

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

src/components/Account/ActorAutoComplete.vue

@@ -1,6 +1,6 @@
 <template>
   <o-inputitems
-    :modelValue="modelValue"
+    :modelValue="modelValueWithDisplayName"
     @update:modelValue="(val: IActor[]) => $emit('update:modelValue', val)"
     :data="availableActors"
     :allow-autocomplete="true"
@@ -21,10 +21,10 @@ 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 { computed, ref } from "vue";
 import ActorInline from "./ActorInline.vue";
 
-defineProps<{
+const props = defineProps<{
   modelValue: IActor[];
 }>();
 
@@ -32,6 +32,15 @@ defineEmits<{
   "update:modelValue": [value: IActor[]];
 }>();
 
+const modelValue = computed(() => props.modelValue);
+
+const modelValueWithDisplayName = computed(() =>
+  modelValue.value.map((actor) => ({
+    ...actor,
+    displayName: displayName(actor),
+  }))
+);
+
 const {
   load: loadSearchPersonsAndGroupsQuery,
   refetch: refetchSearchPersonsAndGroupsQuery,

src/components/Account/ActorCard.vue

@@ -39,8 +39,18 @@
         v-html="actor.summary"
       />
     </div>
-    <div class="flex pr-2">
-      <Email />
+    <div class="flex pr-2" v-if="actor.type === ActorType.PERSON">
+      <router-link
+        :to="{
+          name: RouteName.CONVERSATION_LIST,
+          query: {
+            newMessage: 'true',
+            personMentions: usernameWithDomain(actor),
+          },
+        }"
+      >
+        <Email />
+      </router-link>
     </div>
   </div>
   <!-- <div
@@ -85,6 +95,8 @@
 import { displayName, IActor, usernameWithDomain } from "../../types/actor";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import Email from "vue-material-design-icons/Email.vue";
+import RouteName from "@/router/name";
+import { ActorType } from "@/types/enums";
 
 withDefaults(
   defineProps<{

src/components/Account/ActorInline.vue

@@ -24,15 +24,11 @@
         @{{ usernameWithDomain(actor) }}
       </p>
     </div>
-    <div class="flex pr-2 self-center">
-      <Email />
-    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { displayName, IActor, usernameWithDomain } from "../../types/actor";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
-import Email from "vue-material-design-icons/Email.vue";
 
 defineProps<{
   actor: IActor;