fix: various fixes

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

src/views/Conversations/ConversationListView.vue

@@ -44,19 +44,28 @@
 <script lang="ts" setup>
 import RouteName from "../../router/name";
 import { useQuery } from "@vue/apollo-composable";
-import { computed, defineAsyncComponent, ref } from "vue";
+import { computed, defineAsyncComponent, ref, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
-import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import {
+  booleanTransformer,
+  integerTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
 import { PROFILE_CONVERSATIONS } from "@/graphql/event";
 import ConversationListItem from "../../components/Conversations/ConversationListItem.vue";
 import EmptyContent from "../../components/Utils/EmptyContent.vue";
 import { useHead } from "@vueuse/head";
 import { IPerson } from "@/types/actor";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { arrayTransformer } from "@/utils/route";
 
 const page = useRouteQuery("page", 1, integerTransformer);
 const CONVERSATIONS_PER_PAGE = 10;
 
+const showModal = useRouteQuery("newMessage", false, booleanTransformer);
+const personMentions = useRouteQuery("personMentions", [], arrayTransformer);
+const groupMentions = useRouteQuery("groupMentions", [], arrayTransformer);
+
 const { t } = useI18n({ useScope: "global" });
 
 useHead({
@@ -69,6 +78,7 @@ const { result: conversationsResult } = useQuery<{
   loggedPerson: Pick<IPerson, "conversations">;
 }>(PROFILE_CONVERSATIONS, () => ({
   page: page.value,
+  limit: CONVERSATIONS_PER_PAGE,
 }));
 
 const conversations = computed(
@@ -88,7 +98,17 @@ const NewConversation = defineAsyncComponent(
 const openNewMessageModal = () => {
   oruga.modal.open({
     component: NewConversation,
+    props: {
+      personMentions: personMentions.value,
+      groupMentions: groupMentions.value,
+    },
     trapFocus: true,
   });
 };
+
+watchEffect(() => {
+  if (showModal.value) {
+    openNewMessageModal();
+  }
+});
 </script>

src/views/Conversations/ConversationView.vue

@@ -14,13 +14,13 @@
       ]"
     />
     <div
-      v-if="conversation.event"
-      class="bg-mbz-yellow p-6 mb-6 rounded flex gap-2 items-center"
+      v-if="conversation.event && !isCurrentActorAuthor"
+      class="bg-mbz-yellow p-6 mb-3 rounded flex gap-2 items-center"
     >
       <Calendar :size="36" />
       <i18n-t
         tag="p"
-        keypath="This is a announcement from the organizers of event {event}"
+        keypath="This is a announcement from the organizers of event {event}. You can't reply to it, but you can send a private message to event organizers."
       >
         <template #event>
           <b>
@@ -35,10 +35,7 @@
         </template>
       </i18n-t>
     </div>
-    <div
-      v-if="currentActor && currentActor.id !== conversation.actor?.id"
-      class="bg-mbz-info p-6 rounded flex gap-2 items-center my-3"
-    >
+    <o-notification v-if="isCurrentActorAuthor" variant="info" closable>
       <i18n-t
         keypath="You have access to this conversation as a member of the {group} group"
         tag="p"
@@ -55,7 +52,36 @@
           >
         </template>
       </i18n-t>
-    </div>
+    </o-notification>
+    <o-notification
+      v-else-if="groupParticipants.length > 0 && !conversation.event"
+      variant="info"
+      closable
+    >
+      <p>
+        {{
+          t(
+            "The following participants are groups, which means group members are able to reply to this conversation:"
+          )
+        }}
+      </p>
+      <ul class="list-disc">
+        <li
+          v-for="groupParticipant in groupParticipants"
+          :key="groupParticipant.id"
+        >
+          <router-link
+            :to="{
+              name: RouteName.GROUP,
+              params: {
+                preferredUsername: usernameWithDomain(groupParticipant),
+              },
+            }"
+            ><b>{{ displayName(groupParticipant) }}</b></router-link
+          >
+        </li>
+      </ul>
+    </o-notification>
     <o-notification v-if="error" variant="danger">
       {{ error }}
     </o-notification>
@@ -107,7 +133,7 @@
       </form>
       <div
         v-else-if="conversation.event"
-        class="bg-mbz-yellow p-6 rounded flex gap-2 items-center mt-6"
+        class="bg-mbz-yellow p-6 rounded flex gap-2 items-center mt-3"
       >
         <Calendar :size="36" />
         <i18n-t
@@ -239,6 +265,12 @@ const otherParticipants = computed(
     ) ?? []
 );
 
+const groupParticipants = computed(() => {
+  return otherParticipants.value.filter(
+    (participant) => participant.type === ActorType.GROUP
+  );
+});
+
 const Editor = defineAsyncComponent(
   () => import("../../components/TextEditor.vue")
 );
@@ -253,8 +285,15 @@ const title = computed(() =>
   })
 );
 
+const isCurrentActorAuthor = computed(
+  () =>
+    currentActor.value &&
+    conversation.value &&
+    currentActor.value.id !== conversation.value?.actor?.id
+);
+
 useHead({
-  title: title.value,
+  title: () => title.value,
 });
 
 const newComment = ref("");