feat(front): add dedicated page and route for event announcements

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

src/views/Event/AnnouncementView.vue

@@ -0,0 +1,47 @@
+<template>
+  <section class="container mx-auto" v-if="event">
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.MY_EVENTS, text: t('My events') },
+        {
+          name: RouteName.EVENT,
+          params: { uuid: event.uuid },
+          text: event.title,
+        },
+        {
+          name: RouteName.ANNOUNCEMENTS,
+          params: { uuid: event.uuid },
+          text: t('Announcements'),
+        },
+      ]"
+    />
+    <EventConversations :event="event" class="my-6" />
+    <NewPrivateMessage :event="event" />
+  </section>
+</template>
+
+<script lang="ts" setup>
+import RouteName from "@/router/name";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@unhead/vue";
+import EventConversations from "../../components/Conversations/EventConversations.vue";
+import NewPrivateMessage from "../../components/Participation/NewPrivateMessage.vue";
+import { useFetchEvent } from "@/composition/apollo/event";
+
+const props = defineProps<{
+  eventId: string;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+
+const eventId = computed(() => props.eventId);
+
+const { event } = useFetchEvent(eventId);
+
+useHead({
+  title: computed(() =>
+    t("Announcements for {eventTitle}", { eventTitle: event.value?.title })
+  ),
+});
+</script>

src/views/Event/ParticipantsView.vue

@@ -252,8 +252,6 @@
         </div>
       </template>
     </o-table>
-    <EventConversations :event="event" class="my-6" />
-    <NewPrivateMessage :event="event" />
   </section>
 </template>
 
@@ -287,8 +285,6 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { Notifier } from "@/plugins/notifier";
 import Tag from "@/components/TagElement.vue";
 import { useHead } from "@unhead/vue";
-import EventConversations from "../../components/Conversations/EventConversations.vue";
-import NewPrivateMessage from "../../components/Participation/NewPrivateMessage.vue";
 
 const PARTICIPANTS_PER_PAGE = 10;
 const MESSAGE_ELLIPSIS_LENGTH = 130;