From b514d417c0b7f9c130cd18e97978d88f362e8ff4 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 14:58:55 +0200
Subject: [PATCH 1/8] Add typespec for category_statistics

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 lib/mobilizon/events/events.ex | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/mobilizon/events/events.ex b/lib/mobilizon/events/events.ex
index cfc3804e0..34034989a 100644
--- a/lib/mobilizon/events/events.ex
+++ b/lib/mobilizon/events/events.ex
@@ -1674,6 +1674,7 @@ defmodule Mobilizon.Events do
     |> Repo.all()
   end
 
+  @spec category_statistics :: [{String.t(), non_neg_integer()}]
   def category_statistics do
     Event
     |> filter_future_events(true)

From ff1fbdfdbac2743333db9f4f6d66ee29411e98ee Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 14:59:13 +0200
Subject: [PATCH 2/8] Handle categories page empty and fix attribution section

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/CategoriesView.vue | 49 +++++++++++----------------------
 1 file changed, 16 insertions(+), 33 deletions(-)

diff --git a/js/src/views/CategoriesView.vue b/js/src/views/CategoriesView.vue
index e058d6182..52a6f528f 100644
--- a/js/src/views/CategoriesView.vue
+++ b/js/src/views/CategoriesView.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="container mx-auto py-4 md:py-12 px-2 md:px-60">
     <main>
-      <div class="flex flex-wrap items-center justify-center gap-3 md:gap-4">
+      <h1>{{ t('Category list')}}</h1>
+      <div class="flex flex-wrap items-center justify-center gap-3 md:gap-4" v-if="promotedCategories.length > 0">
         <CategoryCard
           v-for="category in promotedCategories"
           :key="category.key"
@@ -9,41 +10,22 @@
           :with-details="true"
         />
       </div>
+      <div v-else>
+        <EmptyContent icon="image" :inline="true">
+          {{ t('No categories with public upcoming events on this instance were found.') }}
+        </EmptyContent>
+      </div>
 
       <div
         class="mx-auto w-full max-w-lg rounded-2xl dark:bg-gray-800 p-2 mt-10"
       >
-        <div
-          class="card"
-          animation="slide"
-          :open="isLicencePanelOpen"
-          @open="isLicencePanelOpen = !isLicencePanelOpen"
-          :aria-id="'contentIdForA11y5'"
-        >
-          <div>
-            <button
-              class="flex w-full justify-between rounded-lg px-4 py-2 text-left text-sm font-medium dark:text-zinc-300"
-            >
-              {{ t("Category illustrations credits") }}
-              <svg
-                width="24"
-                height="24"
-                :class="isLicencePanelOpen ? 'transform rotate-90' : ''"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                strokeWidth="{2}"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </button>
-          </div>
-          <div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
+      <o-collapse v-model:open="isLicencePanelOpen" :aria-id="'contentIdForA11y5'">
+        <template #trigger>
+          <o-button aria-controls="contentIdForA11y1" :icon-right="isLicencePanelOpen ? 'chevron-up' : 'chevron-down'">
+            {{ t("Category illustrations credits") }}
+          </o-button>
+        </template>
+        <div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
             <p
               v-for="(categoryLicence, key) in categoriesPicturesLicences"
               :key="key"
@@ -88,7 +70,7 @@
               />
             </p>
           </div>
-        </div>
+      </o-collapse>
       </div>
     </main>
   </div>
@@ -107,6 +89,7 @@ import {
 } from "@/components/Categories/constants";
 import { useI18n } from "vue-i18n";
 import { useEventCategories } from "@/composition/apollo/config";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
 
 const { t } = useI18n({ useScope: "global" });
 

From e22cb8c3bdaaa0b546811d243bb2bd96bc86634c Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 17:47:53 +0200
Subject: [PATCH 3/8] Improve TextEditor

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/TextEditor.vue | 109 +++++++++++++++----------------
 1 file changed, 54 insertions(+), 55 deletions(-)

diff --git a/js/src/components/TextEditor.vue b/js/src/components/TextEditor.vue
index 86a21dfc7..62af70e5a 100644
--- a/js/src/components/TextEditor.vue
+++ b/js/src/components/TextEditor.vue
@@ -13,7 +13,7 @@
       >
         <button
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('bold') }"
+          :class="{ 'is-active': editor?.isActive('bold') }"
           @click="editor?.chain().focus().toggleBold().run()"
           type="button"
           :title="t('Bold')"
@@ -23,7 +23,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('italic') }"
+          :class="{ 'is-active': editor?.isActive('italic') }"
           @click="editor?.chain().focus().toggleItalic().run()"
           type="button"
           :title="t('Italic')"
@@ -33,7 +33,7 @@
 
         <button
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('underline') }"
+          :class="{ 'is-active': editor?.isActive('underline') }"
           @click="editor?.chain().focus().toggleUnderline().run()"
           type="button"
           :title="t('Underline')"
@@ -44,7 +44,7 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+          :class="{ 'is-active': editor?.isActive('heading', { level: 1 }) }"
           @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()"
           type="button"
           :title="t('Heading Level 1')"
@@ -55,7 +55,7 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+          :class="{ 'is-active': editor?.isActive('heading', { level: 2 }) }"
           @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()"
           type="button"
           :title="t('Heading Level 2')"
@@ -66,7 +66,7 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+          :class="{ 'is-active': editor?.isActive('heading', { level: 3 }) }"
           @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()"
           type="button"
           :title="t('Heading Level 3')"
@@ -77,7 +77,7 @@
         <button
           class="menubar__button"
           @click="showLinkMenu()"
-          :class="{ 'is-active': editor.isActive('link') }"
+          :class="{ 'is-active': editor?.isActive('link') }"
           type="button"
           :title="t('Add link')"
         >
@@ -85,7 +85,7 @@
         </button>
 
         <button
-          v-if="editor.isActive('link')"
+          v-if="editor?.isActive('link')"
           class="menubar__button"
           @click="editor?.chain().focus().unsetLink().run()"
           type="button"
@@ -107,7 +107,7 @@
         <button
           class="menubar__button"
           v-if="!isBasicMode"
-          :class="{ 'is-active': editor.isActive('bulletList') }"
+          :class="{ 'is-active': editor?.isActive('bulletList') }"
           @click="editor?.chain().focus().toggleBulletList().run()"
           type="button"
           :title="t('Bullet list')"
@@ -118,7 +118,7 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('orderedList') }"
+          :class="{ 'is-active': editor?.isActive('orderedList') }"
           @click="editor?.chain().focus().toggleOrderedList().run()"
           type="button"
           :title="t('Ordered list')"
@@ -129,7 +129,7 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor.isActive('blockquote') }"
+          :class="{ 'is-active': editor?.isActive('blockquote') }"
           @click="editor?.chain().focus().toggleBlockquote().run()"
           type="button"
           :title="t('Quote')"
@@ -193,7 +193,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
+import { useEditor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
 import Blockquote from "@tiptap/extension-blockquote";
 import BulletList from "@tiptap/extension-bullet-list";
 import Heading from "@tiptap/extension-heading";
@@ -254,8 +254,6 @@ const props = withDefaults(
 
 const emit = defineEmits(["update:modelValue"]);
 
-const editor = ref<Editor | null>(null);
-
 const isDescriptionMode = computed((): boolean => {
   return props.mode === "description" || isBasicMode.value;
 });
@@ -278,47 +276,6 @@ const isBasicMode = computed((): boolean => {
 
 // const observer = ref<MutationObserver | null>(null);
 
-onMounted(() => {
-  editor.value = new Editor({
-    editorProps: {
-      attributes: {
-        "aria-multiline": isShortMode.value.toString(),
-        "aria-label": props.ariaLabel ?? "",
-        role: "textbox",
-      },
-      transformPastedHTML: transformPastedHTML,
-    },
-    extensions: [
-      Blockquote,
-      BulletList,
-      Heading,
-      Document,
-      Paragraph,
-      Text,
-      OrderedList,
-      ListItem,
-      Mention.configure(MentionOptions),
-      CustomImage,
-      AutoDir,
-      Underline,
-      Bold,
-      Italic,
-      Strike,
-      Dropcursor,
-      Gapcursor,
-      History,
-      Link.configure({
-        HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
-      }),
-    ],
-    injectCSS: false,
-    content: props.modelValue,
-    onUpdate: () => {
-      emit("update:modelValue", editor.value?.getHTML());
-    },
-  });
-});
-
 const transformPastedHTML = (html: string): string => {
   // When using comment mode, limit to acceptable tags
   if (isCommentMode.value) {
@@ -333,6 +290,47 @@ const transformPastedHTML = (html: string): string => {
   return html;
 };
 
+const editor = useEditor({
+  editorProps: {
+    attributes: {
+      "aria-multiline": isShortMode.value.toString(),
+      "aria-label": props.ariaLabel ?? "",
+      role: "textbox",
+      class:
+        "prose dark:prose-invert prose-sm sm:prose lg:prose-lg xl:prose-xl m-5 focus:outline-none !max-w-full",
+    },
+    transformPastedHTML: transformPastedHTML,
+  },
+  extensions: [
+    Blockquote,
+    BulletList,
+    Heading,
+    Document,
+    Paragraph,
+    Text,
+    OrderedList,
+    ListItem,
+    Mention.configure(MentionOptions),
+    CustomImage,
+    AutoDir,
+    Underline,
+    Bold,
+    Italic,
+    Strike,
+    Dropcursor,
+    Gapcursor,
+    History,
+    Link.configure({
+      HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
+    }),
+  ],
+  injectCSS: false,
+  content: props.modelValue,
+  onUpdate: () => {
+    emit("update:modelValue", editor.value?.getHTML());
+  },
+});
+
 const value = computed(() => props.modelValue);
 
 watch(value, (val: string) => {
@@ -351,6 +349,7 @@ const { t } = useI18n({ useScope: "global" });
 const showLinkMenu = (): void => {
   dialog?.prompt({
     message: t("Enter the link URL"),
+    hasInput: true,
     inputAttrs: {
       type: "url",
     },

From 557e12948bfc9139b7f22986796355d63599ad4a Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 17:48:09 +0200
Subject: [PATCH 4/8] Add name to GraphQL queries

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/graphql/user.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/src/graphql/user.ts b/js/src/graphql/user.ts
index 7c3aefd7a..e902488f0 100644
--- a/js/src/graphql/user.ts
+++ b/js/src/graphql/user.ts
@@ -28,7 +28,7 @@ export const VALIDATE_USER = gql`
 `;
 
 export const LOGGED_USER = gql`
-  query {
+  query LoggedUserQuery {
     loggedUser {
       id
       email
@@ -300,7 +300,7 @@ export const UPDATE_USER_LOCALE = gql`
 `;
 
 export const FEED_TOKENS_LOGGED_USER = gql`
-  query {
+  query FeedTokensLoggedUser {
     loggedUser {
       id
       feedTokens {

From 9fe816ebcfd340e77dc99718a6d0f006c8e20d6e Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 17:48:37 +0200
Subject: [PATCH 5/8] Improve CategoriesView

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/CategoriesView.vue | 35 ++++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/js/src/views/CategoriesView.vue b/js/src/views/CategoriesView.vue
index 52a6f528f..8568a75c0 100644
--- a/js/src/views/CategoriesView.vue
+++ b/js/src/views/CategoriesView.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="container mx-auto py-4 md:py-12 px-2 md:px-60">
     <main>
-      <h1>{{ t('Category list')}}</h1>
-      <div class="flex flex-wrap items-center justify-center gap-3 md:gap-4" v-if="promotedCategories.length > 0">
+      <h1>{{ t("Category list") }}</h1>
+      <div
+        class="flex flex-wrap items-center justify-center gap-3 md:gap-4"
+        v-if="promotedCategories.length > 0"
+      >
         <CategoryCard
           v-for="category in promotedCategories"
           :key="category.key"
@@ -12,20 +15,30 @@
       </div>
       <div v-else>
         <EmptyContent icon="image" :inline="true">
-          {{ t('No categories with public upcoming events on this instance were found.') }}
+          {{
+            t(
+              "No categories with public upcoming events on this instance were found."
+            )
+          }}
         </EmptyContent>
       </div>
 
       <div
         class="mx-auto w-full max-w-lg rounded-2xl dark:bg-gray-800 p-2 mt-10"
       >
-      <o-collapse v-model:open="isLicencePanelOpen" :aria-id="'contentIdForA11y5'">
-        <template #trigger>
-          <o-button aria-controls="contentIdForA11y1" :icon-right="isLicencePanelOpen ? 'chevron-up' : 'chevron-down'">
-            {{ t("Category illustrations credits") }}
-          </o-button>
-        </template>
-        <div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
+        <o-collapse
+          v-model:open="isLicencePanelOpen"
+          :aria-id="'contentIdForA11y5'"
+        >
+          <template #trigger>
+            <o-button
+              aria-controls="contentIdForA11y1"
+              :icon-right="isLicencePanelOpen ? 'chevron-up' : 'chevron-down'"
+            >
+              {{ t("Category illustrations credits") }}
+            </o-button>
+          </template>
+          <div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
             <p
               v-for="(categoryLicence, key) in categoriesPicturesLicences"
               :key="key"
@@ -70,7 +83,7 @@
               />
             </p>
           </div>
-      </o-collapse>
+        </o-collapse>
       </div>
     </main>
   </div>

From 528744d76507cbb1560fb9581eb395981984ff56 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 17:48:58 +0200
Subject: [PATCH 6/8] Improve EventView.vue

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 .../components/Event/EventActionSection.vue   | 904 ++++++++++++++++++
 js/src/components/Event/EventBanner.vue       |   2 +-
 .../components/Event/EventMinimalistCard.vue  |  35 +-
 .../Event/EventParticipationCard.vue          |   2 +-
 js/src/components/Image/LazyImage.vue         |   6 +-
 js/src/views/Event/EventView.vue              | 889 +----------------
 6 files changed, 937 insertions(+), 901 deletions(-)
 create mode 100644 js/src/components/Event/EventActionSection.vue

diff --git a/js/src/components/Event/EventActionSection.vue b/js/src/components/Event/EventActionSection.vue
new file mode 100644
index 000000000..ecb8eb325
--- /dev/null
+++ b/js/src/components/Event/EventActionSection.vue
@@ -0,0 +1,904 @@
+<template>
+  <div class="">
+    <participation-section
+      v-if="event && currentActor && identities && anonymousParticipationConfig"
+      :participation="participations[0]"
+      :event="event"
+      :anonymousParticipation="anonymousParticipation"
+      :currentActor="currentActor"
+      :identities="identities"
+      :anonymousParticipationConfig="anonymousParticipationConfig"
+      @join-event="joinEvent"
+      @join-modal="isJoinModalActive = true"
+      @join-event-with-confirmation="joinEventWithConfirmation"
+      @confirm-leave="confirmLeave"
+      @cancel-anonymous-participation="cancelAnonymousParticipation"
+    />
+    <div class="flex flex-col">
+      <template v-if="!event?.draft">
+        <p
+          v-if="event?.visibility === EventVisibility.PUBLIC"
+          class="inline-flex gap-1"
+        >
+          <Earth />
+          {{ t("Public event") }}
+        </p>
+        <p
+          v-if="event?.visibility === EventVisibility.UNLISTED"
+          class="inline-flex gap-1"
+        >
+          <Link />
+          {{ t("Private event") }}
+        </p>
+      </template>
+      <template v-if="!event?.local && organizer?.domain">
+        <a :href="event?.url">
+          <tag>{{ organizer?.domain }}</tag>
+        </a>
+      </template>
+      <p class="inline-flex gap-1">
+        <TicketConfirmationOutline />
+        <router-link
+          class="participations-link"
+          v-if="canManageEvent && event?.draft === false"
+          :to="{
+            name: RouteName.PARTICIPATIONS,
+            params: { eventId: event.uuid },
+          }"
+        >
+          <!-- We retire one because of the event creator who is a
+                    participant -->
+          <span v-if="maximumAttendeeCapacity">
+            {{
+              t(
+                "{available}/{capacity} available places",
+                {
+                  available:
+                    maximumAttendeeCapacity -
+                    event.participantStats.participant,
+                  capacity: maximumAttendeeCapacity,
+                },
+                maximumAttendeeCapacity - event.participantStats.participant
+              )
+            }}
+          </span>
+          <span v-else>
+            {{
+              t(
+                "No one is participating|One person participating|{going} people participating",
+                {
+                  going: event.participantStats.participant,
+                },
+                event.participantStats.participant
+              )
+            }}
+          </span>
+        </router-link>
+        <span v-else>
+          <span v-if="maximumAttendeeCapacity">
+            {{
+              t(
+                "{available}/{capacity} available places",
+                {
+                  available:
+                    maximumAttendeeCapacity -
+                    (event?.participantStats.participant ?? 0),
+                  capacity: maximumAttendeeCapacity,
+                },
+                maximumAttendeeCapacity -
+                  (event?.participantStats.participant ?? 0)
+              )
+            }}
+          </span>
+          <span v-else>
+            {{
+              t(
+                "No one is participating|One person participating|{going} people participating",
+                {
+                  going: event?.participantStats.participant,
+                },
+                event?.participantStats.participant ?? 0
+              )
+            }}
+          </span>
+        </span>
+        <VTooltip v-if="event?.local === false">
+          <HelpCircleOutline :size="16" />
+          <template #popper>
+            {{
+              t(
+                "The actual number of participants may differ, as this event is hosted on another instance."
+              )
+            }}
+          </template>
+        </VTooltip>
+      </p>
+      <o-dropdown>
+        <template #trigger>
+          <o-button icon-right="dots-horizontal">
+            {{ t("Actions") }}
+          </o-button>
+        </template>
+        <o-dropdown-item
+          aria-role="listitem"
+          has-link
+          v-if="canManageEvent || event?.draft"
+        >
+          <router-link
+            class="flex gap-1"
+            :to="{
+              name: RouteName.EDIT_EVENT,
+              params: { eventId: event?.uuid },
+            }"
+          >
+            <Pencil />
+            {{ t("Edit") }}
+          </router-link>
+        </o-dropdown-item>
+        <o-dropdown-item
+          aria-role="listitem"
+          has-link
+          v-if="canManageEvent || event?.draft"
+        >
+          <router-link
+            class="flex gap-1"
+            :to="{
+              name: RouteName.DUPLICATE_EVENT,
+              params: { eventId: event?.uuid },
+            }"
+          >
+            <ContentDuplicate />
+            {{ t("Duplicate") }}
+          </router-link>
+        </o-dropdown-item>
+        <o-dropdown-item
+          aria-role="listitem"
+          v-if="canManageEvent || event?.draft"
+          @click="openDeleteEventModal"
+          @keyup.enter="openDeleteEventModal"
+          ><span class="flex gap-1">
+            <Delete />
+            {{ t("Delete") }}
+          </span>
+        </o-dropdown-item>
+
+        <hr
+          role="presentation"
+          class="dropdown-divider"
+          aria-role="o-dropdown-item"
+          v-if="canManageEvent || event?.draft"
+        />
+        <o-dropdown-item
+          aria-role="listitem"
+          v-if="event?.draft === false"
+          @click="triggerShare()"
+          @keyup.enter="triggerShare()"
+          class="p-1"
+        >
+          <span class="flex gap-1">
+            <Share />
+            {{ t("Share this event") }}
+          </span>
+        </o-dropdown-item>
+        <o-dropdown-item
+          aria-role="listitem"
+          @click="downloadIcsEvent()"
+          @keyup.enter="downloadIcsEvent()"
+          v-if="event?.draft === false"
+        >
+          <span class="flex gap-1">
+            <CalendarPlus />
+            {{ t("Add to my calendar") }}
+          </span>
+        </o-dropdown-item>
+        <o-dropdown-item
+          aria-role="listitem"
+          v-if="ableToReport"
+          @click="isReportModalActive = true"
+          @keyup.enter="isReportModalActive = true"
+          class="p-1"
+        >
+          <span class="flex gap-1">
+            <Flag />
+            {{ t("Report") }}
+          </span>
+        </o-dropdown-item>
+      </o-dropdown>
+    </div>
+  </div>
+  <o-modal
+    v-model:active="isReportModalActive"
+    has-modal-card
+    ref="reportModal"
+    :close-button-aria-label="t('Close')"
+  >
+    <ReportModal
+      :on-confirm="reportEvent"
+      :title="t('Report this event')"
+      :outside-domain="organizerDomain"
+    />
+  </o-modal>
+  <o-modal
+    :close-button-aria-label="t('Close')"
+    v-model:active="isShareModalActive"
+    has-modal-card
+    ref="shareModal"
+  >
+    <share-event-modal
+      v-if="event"
+      :event="event"
+      :eventCapacityOK="eventCapacityOK"
+    />
+  </o-modal>
+  <o-modal
+    v-model:active="isJoinModalActive"
+    has-modal-card
+    ref="participationModal"
+    :close-button-aria-label="t('Close')"
+  >
+    <identity-picker v-if="identity" v-model="identity">
+      <template #footer>
+        <footer class="flex gap-2">
+          <o-button
+            outlined
+            ref="cancelButton"
+            @click="isJoinModalActive = false"
+            @keyup.enter="isJoinModalActive = false"
+          >
+            {{ t("Cancel") }}
+          </o-button>
+          <o-button
+            v-if="identity"
+            variant="primary"
+            ref="confirmButton"
+            @click="
+              event?.joinOptions === EventJoinOptions.RESTRICTED
+                ? joinEventWithConfirmation(identity as IPerson)
+                : joinEvent(identity as IPerson)
+            "
+            @keyup.enter="
+              event?.joinOptions === EventJoinOptions.RESTRICTED
+                ? joinEventWithConfirmation(identity as IPerson)
+                : joinEvent(identity as IPerson)
+            "
+          >
+            {{ t("Confirm my particpation") }}
+          </o-button>
+        </footer>
+      </template>
+    </identity-picker>
+  </o-modal>
+  <o-modal
+    v-model:active="isJoinConfirmationModalActive"
+    has-modal-card
+    ref="joinConfirmationModal"
+    :close-button-aria-label="t('Close')"
+  >
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">
+          {{ t("Participation confirmation") }}
+        </p>
+      </header>
+
+      <section class="modal-card-body">
+        <p>
+          {{
+            t(
+              "The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?"
+            )
+          }}
+        </p>
+        <form
+          @submit.prevent="
+            joinEvent(actorForConfirmation as IPerson, messageForConfirmation)
+          "
+        >
+          <o-field :label="t('Message')">
+            <o-input
+              type="textarea"
+              size="medium"
+              v-model="messageForConfirmation"
+              minlength="10"
+            ></o-input>
+          </o-field>
+          <div class="buttons">
+            <o-button
+              native-type="button"
+              class="button"
+              ref="cancelButton"
+              @click="isJoinConfirmationModalActive = false"
+              @keyup.enter="isJoinConfirmationModalActive = false"
+              >{{ t("Cancel") }}
+            </o-button>
+            <o-button variant="primary" native-type="submit">
+              {{ t("Confirm my participation") }}
+            </o-button>
+          </div>
+        </form>
+      </section>
+    </div>
+  </o-modal>
+</template>
+
+<script lang="ts" setup>
+import { IActor, IPerson } from "@/types/actor";
+import { IEvent } from "@/types/event.model";
+import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
+import ReportModal from "@/components/Report/ReportModal.vue";
+import IdentityPicker from "@/views/Account/IdentityPicker.vue";
+import {
+  EventVisibility,
+  EventJoinOptions,
+  ParticipantRole,
+  MemberRole,
+} from "@/types/enums";
+import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
+import { computed, defineAsyncComponent, inject, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import Tag from "@/components/TagElement.vue";
+import Earth from "vue-material-design-icons/Earth.vue";
+import Link from "vue-material-design-icons/Link.vue";
+import Flag from "vue-material-design-icons/Flag.vue";
+import CalendarPlus from "vue-material-design-icons/CalendarPlus.vue";
+import ContentDuplicate from "vue-material-design-icons/ContentDuplicate.vue";
+import Delete from "vue-material-design-icons/Delete.vue";
+import Pencil from "vue-material-design-icons/Pencil.vue";
+import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
+import TicketConfirmationOutline from "vue-material-design-icons/TicketConfirmationOutline.vue";
+import Share from "vue-material-design-icons/Share.vue";
+import {
+  EVENT_PERSON_PARTICIPATION,
+  FETCH_EVENT,
+  JOIN_EVENT,
+  LEAVE_EVENT,
+} from "@/graphql/event";
+import { Notifier } from "@/plugins/notifier";
+import { Dialog } from "@/plugins/dialog";
+import { Snackbar } from "@/plugins/snackbar";
+import RouteName from "@/router/name";
+import {
+  AnonymousParticipationNotFoundError,
+  getLeaveTokenForParticipation,
+  isParticipatingInThisEvent,
+  removeAnonymousParticipation,
+} from "@/services/AnonymousParticipationStorage";
+import {
+  useAnonymousActorId,
+  useAnonymousParticipationConfig,
+  useAnonymousReportsConfig,
+} from "@/composition/apollo/config";
+import { useCurrentUserIdentities } from "@/composition/apollo/actor";
+import { useRouter } from "vue-router";
+import { IParticipant } from "@/types/participant.model";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
+import { useMutation } from "@vue/apollo-composable";
+import { useCreateReport } from "@/composition/apollo/report";
+import { useDeleteEvent } from "@/composition/apollo/event";
+
+const ShareEventModal = defineAsyncComponent(
+  () => import("@/components/Event/ShareEventModal.vue")
+);
+
+const props = defineProps<{
+  event: IEvent;
+  currentActor: IPerson | undefined;
+  participations: IParticipant[];
+  person: IPerson | undefined;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+
+const notifier = inject<Notifier>("notifier");
+const dialog = inject<Dialog>("dialog");
+
+const router = useRouter();
+
+const { anonymousReportsConfig } = useAnonymousReportsConfig();
+const { anonymousActorId } = useAnonymousActorId();
+const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
+const { identities } = useCurrentUserIdentities();
+
+const event = computed(() => props.event);
+
+const identity = ref<IPerson | undefined | null>(null);
+
+const ableToReport = computed((): boolean => {
+  return (
+    props.currentActor?.id != null ||
+    anonymousReportsConfig.value?.allowed === true
+  );
+});
+
+const organizer = computed((): IActor | null => {
+  if (event.value?.attributedTo?.id) {
+    return event.value.attributedTo;
+  }
+  if (event.value?.organizerActor) {
+    return event.value.organizerActor;
+  }
+  return null;
+});
+
+const organizerDomain = computed((): string | undefined => {
+  return organizer.value?.domain ?? undefined;
+});
+
+const reportModal = ref();
+const isReportModalActive = ref(false);
+const isShareModalActive = ref(false);
+const isJoinModalActive = ref(false);
+const isJoinConfirmationModalActive = ref(false);
+
+const actorForConfirmation = ref<IPerson | null>(null);
+const messageForConfirmation = ref("");
+
+const anonymousParticipation = ref<boolean | null>(null);
+
+const downloadIcsEvent = async (): Promise<void> => {
+  const data = await (
+    await fetch(`${GRAPHQL_API_ENDPOINT}/events/${event.value.uuid}/export/ics`)
+  ).text();
+  const blob = new Blob([data], { type: "text/calendar" });
+  const link = document.createElement("a");
+  link.href = window.URL.createObjectURL(blob);
+  link.download = `${event.value?.title}.ics`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const triggerShare = (): void => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-start
+  if (navigator.share) {
+    navigator
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      .share({
+        title: event.value?.title,
+        url: event.value?.url,
+      })
+      .then(() => console.debug("Successful share"))
+      .catch((error: any) => console.debug("Error sharing", error));
+  } else {
+    isShareModalActive.value = true;
+    // send popup
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-end
+};
+
+const canManageEvent = computed((): boolean => {
+  return actorIsOrganizer.value || hasGroupPrivileges.value;
+});
+
+// const actorIsParticipant = computed((): boolean => {
+//   if (actorIsOrganizer.value) return true;
+
+//   return (
+//     participations.value.length > 0 &&
+//     participations.value[0].role === ParticipantRole.PARTICIPANT
+//   );
+// });
+
+const actorIsOrganizer = computed((): boolean => {
+  return (
+    props.participations.length > 0 &&
+    props.participations[0].role === ParticipantRole.CREATOR
+  );
+});
+
+const hasGroupPrivileges = computed((): boolean => {
+  return (
+    props.person?.memberships !== undefined &&
+    props.person?.memberships?.total > 0 &&
+    [MemberRole.MODERATOR, MemberRole.ADMINISTRATOR].includes(
+      props.person?.memberships?.elements[0].role
+    )
+  );
+});
+
+const joinEventWithConfirmation = (actor: IPerson): void => {
+  isJoinConfirmationModalActive.value = true;
+  actorForConfirmation.value = actor;
+};
+
+const {
+  mutate: joinEventMutation,
+  onDone: onJoinEventMutationDone,
+  onError: onJoinEventMutationError,
+} = useMutation<{
+  joinEvent: IParticipant;
+}>(JOIN_EVENT, () => ({
+  update: (
+    store: ApolloCache<{
+      joinEvent: IParticipant;
+    }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+
+    const participationCachedData = store.readQuery<{ person: IPerson }>({
+      query: EVENT_PERSON_PARTICIPATION,
+      variables: { eventId: event.value?.id, actorId: identity.value?.id },
+    });
+
+    if (participationCachedData?.person == undefined) {
+      console.error(
+        "Cannot update participation cache, because of null value."
+      );
+      return;
+    }
+    store.writeQuery({
+      query: EVENT_PERSON_PARTICIPATION,
+      variables: { eventId: event.value?.id, actorId: identity.value?.id },
+      data: {
+        person: {
+          ...participationCachedData?.person,
+          participations: {
+            elements: [data.joinEvent],
+            total: 1,
+          },
+        },
+      },
+    });
+
+    const cachedData = store.readQuery<{ event: IEvent }>({
+      query: FETCH_EVENT,
+      variables: { uuid: event.value?.uuid },
+    });
+    if (cachedData == null) return;
+    const { event: cachedEvent } = cachedData;
+    if (cachedEvent === null) {
+      console.error(
+        "Cannot update event participant cache, because of null value."
+      );
+      return;
+    }
+    const participantStats = { ...cachedEvent.participantStats };
+
+    if (data.joinEvent.role === ParticipantRole.NOT_APPROVED) {
+      participantStats.notApproved += 1;
+    } else {
+      participantStats.going += 1;
+      participantStats.participant += 1;
+    }
+
+    store.writeQuery({
+      query: FETCH_EVENT,
+      variables: { uuid: props.event.uuid },
+      data: {
+        event: {
+          ...cachedEvent,
+          participantStats,
+        },
+      },
+    });
+  },
+}));
+
+const joinEvent = (
+  identityForJoin: IPerson,
+  message: string | null = null
+): void => {
+  isJoinConfirmationModalActive.value = false;
+  isJoinModalActive.value = false;
+  joinEventMutation({
+    eventId: event.value?.id,
+    actorId: identityForJoin?.id,
+    message,
+  });
+};
+
+const participationRequestedMessage = () => {
+  notifier?.success(t("Your participation has been requested"));
+};
+
+const participationConfirmedMessage = () => {
+  notifier?.success(t("Your participation has been confirmed"));
+};
+
+onJoinEventMutationDone(({ data }) => {
+  if (data) {
+    if (data.joinEvent.role === ParticipantRole.NOT_APPROVED) {
+      participationRequestedMessage();
+    } else {
+      participationConfirmedMessage();
+    }
+  }
+});
+
+onJoinEventMutationError((error) => {
+  console.error(error);
+});
+
+const confirmLeave = (): void => {
+  dialog?.confirm({
+    title: t('Leaving event "{title}"', {
+      title: event.value?.title,
+    }),
+    message: t(
+      'Are you sure you want to cancel your participation at event "{title}"?',
+      {
+        title: event.value?.title,
+      }
+    ),
+    confirmText: t("Leave event"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    hasIcon: true,
+    onConfirm: () => {
+      if (event.value && props.currentActor?.id) {
+        console.debug("calling leave event");
+        leaveEvent(event.value, props.currentActor.id);
+      }
+    },
+  });
+};
+
+const {
+  mutate: createReportMutation,
+  onDone: onCreateReportDone,
+  onError: onCreateReportError,
+} = useCreateReport();
+
+onCreateReportDone(() => {
+  notifier?.success(
+    t("Event {eventTitle} reported", { eventTitle: props?.event?.title })
+  );
+});
+
+onCreateReportError((error) => {
+  console.error(error);
+});
+
+const reportEvent = async (
+  content: string,
+  forward: boolean
+): Promise<void> => {
+  isReportModalActive.value = false;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  reportModal.value.close();
+  if (!organizer.value) return;
+
+  createReportMutation({
+    eventId: event.value?.id ?? "",
+    reportedId: organizer.value?.id ?? "",
+    content,
+    forward,
+  });
+};
+
+const maximumAttendeeCapacity = computed((): number | undefined => {
+  return event.value?.options?.maximumAttendeeCapacity;
+});
+
+const eventCapacityOK = computed((): boolean => {
+  if (event.value?.draft) return true;
+  if (!maximumAttendeeCapacity.value) return true;
+  return (
+    event.value?.options?.maximumAttendeeCapacity !== undefined &&
+    event.value.participantStats.participant !== undefined &&
+    event.value?.options?.maximumAttendeeCapacity >
+      event.value.participantStats.participant
+  );
+});
+
+// const numberOfPlacesStillAvailable = computed((): number | undefined => {
+//   if (event.value?.draft) return maximumAttendeeCapacity.value;
+//   return (
+//     (maximumAttendeeCapacity.value ?? 0) -
+//     (event.value?.participantStats.participant ?? 0)
+//   );
+// });
+
+const {
+  mutate: leaveEventMutation,
+  onDone: onLeaveEventMutationDone,
+  onError: onLeaveEventMutationError,
+} = useMutation<{ leaveEvent: { actor: { id: string } } }>(LEAVE_EVENT, () => ({
+  update: (
+    store: ApolloCache<{
+      leaveEvent: IParticipant;
+    }>,
+    { data }: FetchResult,
+    { context, variables }
+  ) => {
+    if (data == null) return;
+    let participation;
+
+    const token = context?.token;
+    const actorId = variables?.actorId;
+    const localEventId = variables?.eventId;
+    const eventUUID = context?.eventUUID;
+    const isAnonymousParticipationConfirmed =
+      context?.isAnonymousParticipationConfirmed;
+
+    if (!token) {
+      const participationCachedData = store.readQuery<{
+        person: IPerson;
+      }>({
+        query: EVENT_PERSON_PARTICIPATION,
+        variables: { eventId: localEventId, actorId },
+      });
+      if (participationCachedData == null) return;
+      const { person: cachedPerson } = participationCachedData;
+      [participation] = cachedPerson?.participations?.elements ?? [undefined];
+
+      store.modify({
+        id: `Person:${actorId}`,
+        fields: {
+          participations() {
+            return {
+              elements: [],
+              total: 0,
+            };
+          },
+        },
+      });
+    }
+
+    const eventCachedData = store.readQuery<{ event: IEvent }>({
+      query: FETCH_EVENT,
+      variables: { uuid: eventUUID },
+    });
+    if (eventCachedData == null) return;
+    const { event: eventCached } = eventCachedData;
+    if (eventCached === null) {
+      console.error("Cannot update event cache, because of null value.");
+      return;
+    }
+    const participantStats = { ...eventCached.participantStats };
+    if (participation && participation?.role === ParticipantRole.NOT_APPROVED) {
+      participantStats.notApproved -= 1;
+    } else if (isAnonymousParticipationConfirmed === false) {
+      participantStats.notConfirmed -= 1;
+    } else {
+      participantStats.going -= 1;
+      participantStats.participant -= 1;
+    }
+    store.writeQuery({
+      query: FETCH_EVENT,
+      variables: { uuid: eventUUID },
+      data: {
+        event: {
+          ...eventCached,
+          participantStats,
+        },
+      },
+    });
+  },
+}));
+
+const leaveEvent = (
+  eventToLeave: IEvent,
+  actorId: string,
+  token: string | null = null,
+  isAnonymousParticipationConfirmed: boolean | null = null
+): void => {
+  leaveEventMutation(
+    {
+      eventId: eventToLeave.id,
+      actorId,
+      token,
+    },
+    {
+      context: {
+        token,
+        isAnonymousParticipationConfirmed,
+        eventUUID: eventToLeave.uuid,
+      },
+    }
+  );
+};
+
+onLeaveEventMutationDone(({ data }) => {
+  if (data) {
+    notifier?.success(t("You have cancelled your participation"));
+  }
+});
+
+const snackbar = inject<Snackbar>("snackbar");
+
+onLeaveEventMutationError((error) => {
+  snackbar?.open({
+    message: error.message,
+    variant: "danger",
+    position: "bottom",
+  });
+  console.error(error);
+});
+
+const anonymousParticipationConfirmed = async (): Promise<boolean> => {
+  return isParticipatingInThisEvent(props.event?.uuid);
+};
+
+const cancelAnonymousParticipation = async (): Promise<void> => {
+  if (!event.value || !anonymousActorId.value) return;
+  const token = (await getLeaveTokenForParticipation(
+    props.event?.uuid
+  )) as string;
+  leaveEvent(event.value, anonymousActorId.value, token);
+  await removeAnonymousParticipation(props.event?.uuid);
+  anonymousParticipation.value = null;
+};
+
+onMounted(async () => {
+  identity.value = props.currentActor;
+
+  try {
+    if (window.isSecureContext) {
+      anonymousParticipation.value = await anonymousParticipationConfirmed();
+    }
+  } catch (e) {
+    if (e instanceof AnonymousParticipationNotFoundError) {
+      anonymousParticipation.value = null;
+    } else {
+      console.error(e);
+    }
+  }
+});
+
+const {
+  mutate: deleteEvent,
+  onDone: onDeleteEventDone,
+  onError: onDeleteEventError,
+} = useDeleteEvent();
+
+const escapeRegExp = (string: string) => {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+};
+
+const deleteEventMessage = computed(() => {
+  const participantsLength = event.value?.participantStats.participant;
+  const prefix = participantsLength
+    ? t(
+        "There are {participants} participants.",
+        {
+          participants: event.value.participantStats.participant,
+        },
+        event.value.participantStats.participant
+      )
+    : "";
+  return `${prefix}
+        ${t(
+          "Are you sure you want to delete this event? This action cannot be reverted."
+        )}
+        <br><br>
+        ${t('To confirm, type your event title "{eventTitle}"', {
+          eventTitle: event.value?.title,
+        })}`;
+});
+
+const openDeleteEventModal = () => {
+  dialog?.prompt({
+    title: t("Delete event"),
+    message: deleteEventMessage.value,
+    confirmText: t("Delete event"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    hasIcon: true,
+    hasInput: true,
+    inputAttrs: {
+      placeholder: event.value?.title,
+      pattern: escapeRegExp(event.value?.title ?? ""),
+    },
+    onConfirm: (result: string) => {
+      console.debug("calling delete event", result);
+      if (result.trim() === event.value?.title) {
+        event.value?.id ? deleteEvent({ eventId: event.value?.id }) : null;
+      }
+    },
+  });
+};
+
+onDeleteEventDone(() => {
+  router.push({ name: RouteName.MY_EVENTS });
+});
+
+onDeleteEventError((error) => {
+  console.error(error);
+});
+</script>
diff --git a/js/src/components/Event/EventBanner.vue b/js/src/components/Event/EventBanner.vue
index a3b143418..22ffc704c 100644
--- a/js/src/components/Event/EventBanner.vue
+++ b/js/src/components/Event/EventBanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-center h-80">
+  <div class="flex justify-center max-h-80">
     <lazy-image-wrapper :picture="picture" />
   </div>
 </template>
diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index b39971060..72cc4e8e3 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -12,13 +12,13 @@
         <lazy-image-wrapper
           :picture="event.picture"
           :rounded="true"
-          class="object-cover flex-none h-32 md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
+          class="object-cover flex-none h-40 md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
         />
       </div>
     </div>
-    <div class="title-info-wrapper p-2">
+    <div class="p-2">
       <h3
-        class="event-minimalist-title pb-2 text-lg leading-6 line-clamp-3 font-bold text-violet-title dark:text-white"
+        class="pb-2 text-lg leading-6 line-clamp-3 font-bold text-violet-title dark:text-white"
         :lang="event.language"
         dir="auto"
       >
@@ -36,9 +36,13 @@
         >
           {{ $t("Cancelled") }}
         </tag>
-        <tag class="mr-2" variant="warning" size="medium" v-if="event.draft">{{
-          $t("Draft")
-        }}</tag>
+        <tag
+          class="mr-2 font-normal"
+          variant="warning"
+          size="medium"
+          v-if="event.draft"
+          >{{ $t("Draft") }}</tag
+        >
         {{ event.title }}
       </h3>
       <inline-address
@@ -173,24 +177,5 @@ withDefaults(
   // .calendar-icon {
   //   @include margin-right(1rem);
   // }
-
-  .title-info-wrapper {
-    flex: 2;
-
-    // .event-minimalist-title {
-    //   padding-bottom: 5px;
-    //   font-size: 18px;
-    //   line-height: 24px;
-    //   display: -webkit-box;
-    //   -webkit-line-clamp: 3;
-    //   -webkit-box-orient: vertical;
-    //   overflow: hidden;
-    //   font-weight: bold;
-    d    // }
-
-    :deep(.icon) {
-      vertical-align: middle;
-    }
-  }
 }
 </style>
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index 2f06d483a..47ea7c728 100644
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -26,7 +26,7 @@
         class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-x-1.5 md:gap-y-3 gapt-x-3"
       >
         <div class="mr-0 ml-0">
-          <div class="h-36 relative w-full">
+          <div class="h-40 relative w-full">
             <div class="flex absolute bottom-2 left-2 z-10">
               <date-calendar-icon
                 :date="participation.event.beginsOn.toString()"
diff --git a/js/src/components/Image/LazyImage.vue b/js/src/components/Image/LazyImage.vue
index 0a2a40da1..5971d96d3 100644
--- a/js/src/components/Image/LazyImage.vue
+++ b/js/src/components/Image/LazyImage.vue
@@ -1,6 +1,6 @@
 <template>
-  <div ref="wrapper" class="" v-bind="$attrs">
-    <div class="h-full w-full">
+  <div ref="wrapper" class="flex-1" v-bind="$attrs">
+    <div class="h-full w-full max-w-100 min-h-[10rem]">
       <!-- Show the placeholder as background -->
       <blurhash-img
         v-if="blurhash"
@@ -13,7 +13,7 @@
       <!-- Show the real image on the top and fade in after loading -->
       <img
         ref="image"
-        class="transition-opacity duration-500 rounded-lg object-cover w-full h-full"
+        class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full"
         :class="imageOpacity"
         alt=""
         src=""
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index ae3a70f7c..e7468e54e 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="container mx-auto">
     <o-loading v-model:active="eventLoading" />
-    <div class="wrapper mb-3">
+    <div class="flex flex-col mb-3">
       <event-banner :picture="event?.picture" />
-      <div class="intro-wrapper">
+      <div class="intro-wrapper flex flex-col relative px-2 pb-2">
         <div class="date-calendar-icon-wrapper" v-if="event?.beginsOn">
           <date-calendar-icon :date="event.beginsOn.toString()" />
         </div>
 
         <section class="intro" dir="auto">
-          <div class="flex flex-wrap">
+          <div class="flex flex-wrap gap-2">
             <div class="flex-1 min-w-fit">
               <h1
                 class="text-4xl font-bold m-0"
@@ -96,219 +96,13 @@
               </div>
             </div>
 
-            <div class="">
-              <participation-section
-                v-if="
-                  event &&
-                  currentActor &&
-                  identities &&
-                  anonymousParticipationConfig
-                "
-                :participation="participations[0]"
-                :event="event"
-                :anonymousParticipation="anonymousParticipation"
-                :currentActor="currentActor"
-                :identities="identities"
-                :anonymousParticipationConfig="anonymousParticipationConfig"
-                @join-event="joinEvent"
-                @join-modal="isJoinModalActive = true"
-                @join-event-with-confirmation="joinEventWithConfirmation"
-                @confirm-leave="confirmLeave"
-                @cancel-anonymous-participation="cancelAnonymousParticipation"
-              />
-              <div class="flex flex-col">
-                <template v-if="!event?.draft">
-                  <p
-                    v-if="event?.visibility === EventVisibility.PUBLIC"
-                    class="inline-flex gap-1"
-                  >
-                    <Earth />
-                    {{ t("Public event") }}
-                  </p>
-                  <p
-                    v-if="event?.visibility === EventVisibility.UNLISTED"
-                    class="inline-flex gap-1"
-                  >
-                    <Link />
-                    {{ t("Private event") }}
-                  </p>
-                </template>
-                <template v-if="!event?.local && organizer?.domain">
-                  <a :href="event?.url">
-                    <tag>{{ organizer?.domain }}</tag>
-                  </a>
-                </template>
-                <p class="inline-flex gap-1">
-                  <TicketConfirmationOutline />
-                  <router-link
-                    class="participations-link"
-                    v-if="canManageEvent && event?.draft === false"
-                    :to="{
-                      name: RouteName.PARTICIPATIONS,
-                      params: { eventId: event.uuid },
-                    }"
-                  >
-                    <!-- We retire one because of the event creator who is a
-                    participant -->
-                    <span v-if="maximumAttendeeCapacity">
-                      {{
-                        t(
-                          "{available}/{capacity} available places",
-                          {
-                            available:
-                              maximumAttendeeCapacity -
-                              event.participantStats.participant,
-                            capacity: maximumAttendeeCapacity,
-                          },
-                          maximumAttendeeCapacity -
-                            event.participantStats.participant
-                        )
-                      }}
-                    </span>
-                    <span v-else>
-                      {{
-                        t(
-                          "No one is participating|One person participating|{going} people participating",
-                          {
-                            going: event.participantStats.participant,
-                          },
-                          event.participantStats.participant
-                        )
-                      }}
-                    </span>
-                  </router-link>
-                  <span v-else>
-                    <span v-if="maximumAttendeeCapacity">
-                      {{
-                        t(
-                          "{available}/{capacity} available places",
-                          {
-                            available:
-                              maximumAttendeeCapacity -
-                              (event?.participantStats.participant ?? 0),
-                            capacity: maximumAttendeeCapacity,
-                          },
-                          maximumAttendeeCapacity -
-                            (event?.participantStats.participant ?? 0)
-                        )
-                      }}
-                    </span>
-                    <span v-else>
-                      {{
-                        t(
-                          "No one is participating|One person participating|{going} people participating",
-                          {
-                            going: event?.participantStats.participant,
-                          },
-                          event?.participantStats.participant ?? 0
-                        )
-                      }}
-                    </span>
-                  </span>
-                  <VTooltip v-if="event?.local === false">
-                    <HelpCircleOutline :size="16" />
-                    <template #popper>
-                      {{
-                        t(
-                          "The actual number of participants may differ, as this event is hosted on another instance."
-                        )
-                      }}
-                    </template>
-                  </VTooltip>
-                </p>
-                <o-dropdown>
-                  <template #trigger>
-                    <o-button icon-right="dots-horizontal">
-                      {{ t("Actions") }}
-                    </o-button>
-                  </template>
-                  <o-dropdown-item
-                    aria-role="listitem"
-                    has-link
-                    v-if="canManageEvent || event?.draft"
-                  >
-                    <router-link
-                      class="flex gap-1"
-                      :to="{
-                        name: RouteName.EDIT_EVENT,
-                        params: { eventId: event?.uuid },
-                      }"
-                    >
-                      <Pencil />
-                      {{ t("Edit") }}
-                    </router-link>
-                  </o-dropdown-item>
-                  <o-dropdown-item
-                    aria-role="listitem"
-                    has-link
-                    v-if="canManageEvent || event?.draft"
-                  >
-                    <router-link
-                      class="flex gap-1"
-                      :to="{
-                        name: RouteName.DUPLICATE_EVENT,
-                        params: { eventId: event?.uuid },
-                      }"
-                    >
-                      <ContentDuplicate />
-                      {{ t("Duplicate") }}
-                    </router-link>
-                  </o-dropdown-item>
-                  <o-dropdown-item
-                    aria-role="listitem"
-                    v-if="canManageEvent || event?.draft"
-                    @click="openDeleteEventModal"
-                    @keyup.enter="openDeleteEventModal"
-                    ><span class="flex gap-1">
-                      <Delete />
-                      {{ t("Delete") }}
-                    </span>
-                  </o-dropdown-item>
-
-                  <hr
-                    role="presentation"
-                    class="dropdown-divider"
-                    aria-role="o-dropdown-item"
-                    v-if="canManageEvent || event?.draft"
-                  />
-                  <o-dropdown-item
-                    aria-role="listitem"
-                    v-if="event?.draft === false"
-                    @click="triggerShare()"
-                    @keyup.enter="triggerShare()"
-                    class="p-1"
-                  >
-                    <span class="flex gap-1">
-                      <Share />
-                      {{ t("Share this event") }}
-                    </span>
-                  </o-dropdown-item>
-                  <o-dropdown-item
-                    aria-role="listitem"
-                    @click="downloadIcsEvent()"
-                    @keyup.enter="downloadIcsEvent()"
-                    v-if="event?.draft === false"
-                  >
-                    <span class="flex gap-1">
-                      <CalendarPlus />
-                      {{ t("Add to my calendar") }}
-                    </span>
-                  </o-dropdown-item>
-                  <o-dropdown-item
-                    aria-role="listitem"
-                    v-if="ableToReport"
-                    @click="isReportModalActive = true"
-                    @keyup.enter="isReportModalActive = true"
-                    class="p-1"
-                  >
-                    <span class="flex gap-1">
-                      <Flag />
-                      {{ t("Report") }}
-                    </span>
-                  </o-dropdown-item>
-                </o-dropdown>
-              </div>
-            </div>
+            <EventActionSection
+              v-if="event"
+              :event="event"
+              :currentActor="currentActor"
+              :participations="participations"
+              :person="person"
+            />
           </div>
         </section>
       </div>
@@ -316,8 +110,10 @@
       <div
         class="event-description-wrapper rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse"
       >
-        <aside class="event-metadata rounded dark:bg-gray-600 shadow-md">
-          <div class="sticky">
+        <aside
+          class="event-metadata rounded bg-white dark:bg-gray-600 shadow-md h-min"
+        >
+          <div class="sticky p-4">
             <event-metadata-sidebar
               v-if="event"
               :event="event"
@@ -365,122 +161,6 @@
         </h2>
         <multi-card :events="event?.relatedEvents ?? []" />
       </section>
-      <o-modal
-        v-model:active="isReportModalActive"
-        has-modal-card
-        ref="reportModal"
-        :close-button-aria-label="t('Close')"
-      >
-        <ReportModal
-          :on-confirm="reportEvent"
-          :title="t('Report this event')"
-          :outside-domain="organizerDomain"
-        />
-      </o-modal>
-      <o-modal
-        :close-button-aria-label="t('Close')"
-        v-model:active="isShareModalActive"
-        has-modal-card
-        ref="shareModal"
-      >
-        <share-event-modal
-          v-if="event"
-          :event="event"
-          :eventCapacityOK="eventCapacityOK"
-        />
-      </o-modal>
-      <o-modal
-        v-model:active="isJoinModalActive"
-        has-modal-card
-        ref="participationModal"
-        :close-button-aria-label="t('Close')"
-      >
-        <identity-picker v-if="identity" v-model="identity">
-          <template #footer>
-            <footer class="flex gap-2">
-              <o-button
-                outlined
-                ref="cancelButton"
-                @click="isJoinModalActive = false"
-                @keyup.enter="isJoinModalActive = false"
-              >
-                {{ t("Cancel") }}
-              </o-button>
-              <o-button
-                v-if="identity"
-                variant="primary"
-                ref="confirmButton"
-                @click="
-                  event?.joinOptions === EventJoinOptions.RESTRICTED
-                    ? joinEventWithConfirmation(identity as IPerson)
-                    : joinEvent(identity as IPerson)
-                "
-                @keyup.enter="
-                  event?.joinOptions === EventJoinOptions.RESTRICTED
-                    ? joinEventWithConfirmation(identity as IPerson)
-                    : joinEvent(identity as IPerson)
-                "
-              >
-                {{ t("Confirm my particpation") }}
-              </o-button>
-            </footer>
-          </template>
-        </identity-picker>
-      </o-modal>
-      <o-modal
-        v-model:active="isJoinConfirmationModalActive"
-        has-modal-card
-        ref="joinConfirmationModal"
-        :close-button-aria-label="t('Close')"
-      >
-        <div class="modal-card">
-          <header class="modal-card-head">
-            <p class="modal-card-title">
-              {{ t("Participation confirmation") }}
-            </p>
-          </header>
-
-          <section class="modal-card-body">
-            <p>
-              {{
-                t(
-                  "The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?"
-                )
-              }}
-            </p>
-            <form
-              @submit.prevent="
-                joinEvent(
-                  actorForConfirmation as IPerson,
-                  messageForConfirmation
-                )
-              "
-            >
-              <o-field :label="t('Message')">
-                <o-input
-                  type="textarea"
-                  size="medium"
-                  v-model="messageForConfirmation"
-                  minlength="10"
-                ></o-input>
-              </o-field>
-              <div class="buttons">
-                <o-button
-                  native-type="button"
-                  class="button"
-                  ref="cancelButton"
-                  @click="isJoinConfirmationModalActive = false"
-                  @keyup.enter="isJoinConfirmationModalActive = false"
-                  >{{ t("Cancel") }}
-                </o-button>
-                <o-button variant="primary" native-type="submit">
-                  {{ t("Confirm my participation") }}
-                </o-button>
-              </div>
-            </form>
-          </section>
-        </div>
-      </o-modal>
       <o-modal
         v-model:active="showMap"
         :close-button-aria-label="t('Close')"
@@ -503,52 +183,30 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  EventJoinOptions,
-  EventStatus,
-  EventVisibility,
-  MemberRole,
-  ParticipantRole,
-  RoutingType,
-} from "@/types/enums";
+import { EventStatus, ParticipantRole, RoutingType } from "@/types/enums";
 import {
   EVENT_PERSON_PARTICIPATION,
   // EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
-  FETCH_EVENT,
-  JOIN_EVENT,
-  LEAVE_EVENT,
 } from "@/graphql/event";
-import { IEvent } from "@/types/event.model";
 import {
   displayName,
   IActor,
   IPerson,
   usernameWithDomain,
 } from "@/types/actor";
-import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import MultiCard from "@/components/Event/MultiCard.vue";
-import ReportModal from "@/components/Report/ReportModal.vue";
-import IdentityPicker from "@/views/Account/IdentityPicker.vue";
-import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
 import RouteName from "@/router/name";
 import CommentTree from "@/components/Comment/CommentTree.vue";
 import "intersection-observer";
-import {
-  AnonymousParticipationNotFoundError,
-  getLeaveTokenForParticipation,
-  isParticipatingInThisEvent,
-  removeAnonymousParticipation,
-} from "@/services/AnonymousParticipationStorage";
 import Tag from "@/components/TagElement.vue";
 import EventMetadataSidebar from "@/components/Event/EventMetadataSidebar.vue";
 import EventBanner from "@/components/Event/EventBanner.vue";
+import EventActionSection from "@/components/Event/EventActionSection.vue";
 import PopoverActorCard from "@/components/Account/PopoverActorCard.vue";
-import { IParticipant } from "@/types/participant.model";
-import { ApolloCache, FetchResult } from "@apollo/client/core";
 import { IEventMetadataDescription } from "@/types/event-metadata";
 import { eventMetaDataList } from "@/services/EventMetadata";
-import { useDeleteEvent, useFetchEvent } from "@/composition/apollo/event";
+import { useFetchEvent } from "@/composition/apollo/event";
 import {
   computed,
   onMounted,
@@ -558,41 +216,21 @@ import {
   inject,
 } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import Earth from "vue-material-design-icons/Earth.vue";
-import Link from "vue-material-design-icons/Link.vue";
-import Flag from "vue-material-design-icons/Flag.vue";
-import CalendarPlus from "vue-material-design-icons/CalendarPlus.vue";
-import ContentDuplicate from "vue-material-design-icons/ContentDuplicate.vue";
-import Delete from "vue-material-design-icons/Delete.vue";
-import Pencil from "vue-material-design-icons/Pencil.vue";
-import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
-import TicketConfirmationOutline from "vue-material-design-icons/TicketConfirmationOutline.vue";
 import {
   useCurrentActorClient,
-  useCurrentUserIdentities,
   usePersonStatusGroup,
 } from "@/composition/apollo/actor";
 import { useLoggedUser } from "@/composition/apollo/user";
-import { useMutation, useQuery } from "@vue/apollo-composable";
+import { useQuery } from "@vue/apollo-composable";
 import {
-  useAnonymousActorId,
-  useAnonymousParticipationConfig,
-  useAnonymousReportsConfig,
   useEventCategories,
   useRoutingType,
 } from "@/composition/apollo/config";
-import { useCreateReport } from "@/composition/apollo/report";
-import Share from "vue-material-design-icons/Share.vue";
 import { useI18n } from "vue-i18n";
-import { Dialog } from "@/plugins/dialog";
 import { Notifier } from "@/plugins/notifier";
 import { AbsintheGraphQLErrors } from "@/types/errors.model";
 import { useHead } from "@vueuse/head";
-import { Snackbar } from "@/plugins/snackbar";
 
-const ShareEventModal = defineAsyncComponent(
-  () => import("@/components/Event/ShareEventModal.vue")
-);
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const IntegrationTwitch = defineAsyncComponent(
   () => import("@/components/Event/Integrations/TwitchIntegration.vue")
@@ -662,13 +300,8 @@ const { person } = usePersonStatusGroup(
   usernameWithDomain(event.value?.attributedTo)
 );
 
-const { anonymousReportsConfig } = useAnonymousReportsConfig();
-const { anonymousActorId } = useAnonymousActorId();
 const { eventCategories } = useEventCategories();
 
-const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
-const { identities } = useCurrentUserIdentities();
-
 // metaInfo() {
 //   return {
 //     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -684,22 +317,13 @@ const { identities } = useCurrentUserIdentities();
 
 const identity = ref<IPerson | undefined | null>(null);
 
-const reportModal = ref();
 const oldParticipationRole = ref<string | undefined>(undefined);
-const isReportModalActive = ref(false);
-const isShareModalActive = ref(false);
-const isJoinModalActive = ref(false);
-const isJoinConfirmationModalActive = ref(false);
 
 const observer = ref<IntersectionObserver | null>(null);
 const commentsObserver = ref<Element | null>(null);
 
 const loadComments = ref(false);
 
-const anonymousParticipation = ref<boolean | null>(null);
-const actorForConfirmation = ref<IPerson | null>(null);
-const messageForConfirmation = ref("");
-
 const eventTitle = computed((): undefined | string => {
   return event.value?.title;
 });
@@ -719,18 +343,6 @@ onMounted(async () => {
     loadComments.value = true;
   }
 
-  try {
-    if (window.isSecureContext) {
-      anonymousParticipation.value = await anonymousParticipationConfirmed();
-    }
-  } catch (e) {
-    if (e instanceof AnonymousParticipationNotFoundError) {
-      anonymousParticipation.value = null;
-    } else {
-      console.error(e);
-    }
-  }
-
   observer.value = new IntersectionObserver(
     (entries) => {
       // eslint-disable-next-line no-restricted-syntax
@@ -789,231 +401,7 @@ onMounted(async () => {
   // });
 });
 
-const deleteEventMessage = computed(() => {
-  const participantsLength = event.value?.participantStats.participant;
-  const prefix = participantsLength
-    ? t(
-        "There are {participants} participants.",
-        {
-          participants: event.value.participantStats.participant,
-        },
-        event.value.participantStats.participant
-      )
-    : "";
-  return `${prefix}
-        ${t(
-          "Are you sure you want to delete this event? This action cannot be reverted."
-        )}
-        <br><br>
-        ${t('To confirm, type your event title "{eventTitle}"', {
-          eventTitle: event.value?.title,
-        })}`;
-});
-
 const notifier = inject<Notifier>("notifier");
-const dialog = inject<Dialog>("dialog");
-
-const {
-  mutate: deleteEvent,
-  onDone: onDeleteEventDone,
-  onError: onDeleteEventError,
-} = useDeleteEvent();
-
-const escapeRegExp = (string: string) => {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
-};
-
-const openDeleteEventModal = () => {
-  dialog?.prompt({
-    title: t("Delete event"),
-    message: deleteEventMessage.value,
-    confirmText: t("Delete event"),
-    cancelText: t("Cancel"),
-    variant: "danger",
-    hasIcon: true,
-    hasInput: true,
-    inputAttrs: {
-      placeholder: event.value?.title,
-      pattern: escapeRegExp(event.value?.title ?? ""),
-    },
-    onConfirm: (result: string) => {
-      console.debug("calling delete event", result);
-      if (result.trim() === event.value?.title) {
-        event.value?.id ? deleteEvent({ eventId: event.value?.id }) : null;
-      }
-    },
-  });
-};
-
-onDeleteEventDone(() => {
-  router.push({ name: RouteName.MY_EVENTS });
-});
-
-onDeleteEventError((error) => {
-  console.error(error);
-});
-
-const {
-  mutate: createReportMutation,
-  onDone: onCreateReportDone,
-  onError: onCreateReportError,
-} = useCreateReport();
-
-onCreateReportDone(() => {
-  notifier?.success(t("Event {eventTitle} reported", { eventTitle }));
-});
-
-onCreateReportError((error) => {
-  console.error(error);
-});
-
-const reportEvent = async (
-  content: string,
-  forward: boolean
-): Promise<void> => {
-  isReportModalActive.value = false;
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  reportModal.value.close();
-  if (!organizer.value) return;
-
-  createReportMutation({
-    eventId: event.value?.id ?? "",
-    reportedId: organizer.value?.id ?? "",
-    content,
-    forward,
-  });
-};
-
-const joinEventWithConfirmation = (actor: IPerson): void => {
-  isJoinConfirmationModalActive.value = true;
-  actorForConfirmation.value = actor;
-};
-
-const {
-  mutate: joinEventMutation,
-  onDone: onJoinEventMutationDone,
-  onError: onJoinEventMutationError,
-} = useMutation<{
-  joinEvent: IParticipant;
-}>(JOIN_EVENT, () => ({
-  update: (
-    store: ApolloCache<{
-      joinEvent: IParticipant;
-    }>,
-    { data }: FetchResult
-  ) => {
-    if (data == null) return;
-
-    const participationCachedData = store.readQuery<{ person: IPerson }>({
-      query: EVENT_PERSON_PARTICIPATION,
-      variables: { eventId: event.value?.id, actorId: identity.value?.id },
-    });
-
-    if (participationCachedData?.person == undefined) {
-      console.error(
-        "Cannot update participation cache, because of null value."
-      );
-      return;
-    }
-    store.writeQuery({
-      query: EVENT_PERSON_PARTICIPATION,
-      variables: { eventId: event.value?.id, actorId: identity.value?.id },
-      data: {
-        person: {
-          ...participationCachedData?.person,
-          participations: {
-            elements: [data.joinEvent],
-            total: 1,
-          },
-        },
-      },
-    });
-
-    const cachedData = store.readQuery<{ event: IEvent }>({
-      query: FETCH_EVENT,
-      variables: { uuid: event.value?.uuid },
-    });
-    if (cachedData == null) return;
-    const { event: cachedEvent } = cachedData;
-    if (cachedEvent === null) {
-      console.error(
-        "Cannot update event participant cache, because of null value."
-      );
-      return;
-    }
-    const participantStats = { ...cachedEvent.participantStats };
-
-    if (data.joinEvent.role === ParticipantRole.NOT_APPROVED) {
-      participantStats.notApproved += 1;
-    } else {
-      participantStats.going += 1;
-      participantStats.participant += 1;
-    }
-
-    store.writeQuery({
-      query: FETCH_EVENT,
-      variables: { uuid: props.uuid },
-      data: {
-        event: {
-          ...cachedEvent,
-          participantStats,
-        },
-      },
-    });
-  },
-}));
-
-const joinEvent = async (
-  identityForJoin: IPerson,
-  message: string | null = null
-): Promise<void> => {
-  isJoinConfirmationModalActive.value = false;
-  isJoinModalActive.value = false;
-  joinEventMutation({
-    eventId: event.value?.id,
-    actorId: identityForJoin?.id,
-    message,
-  });
-};
-
-onJoinEventMutationDone(({ data }) => {
-  if (data) {
-    if (data.joinEvent.role === ParticipantRole.NOT_APPROVED) {
-      participationRequestedMessage();
-    } else {
-      participationConfirmedMessage();
-    }
-  }
-});
-
-onJoinEventMutationError((error) => {
-  console.error(error);
-});
-
-const confirmLeave = (): void => {
-  dialog?.confirm({
-    title: t('Leaving event "{title}"', {
-      title: event.value?.title,
-    }),
-    message: t(
-      'Are you sure you want to cancel your participation at event "{title}"?',
-      {
-        title: event.value?.title,
-      }
-    ),
-    confirmText: t("Leave event"),
-    cancelText: t("Cancel"),
-    variant: "danger",
-    hasIcon: true,
-    onConfirm: () => {
-      if (event.value && currentActor.value?.id) {
-        console.debug("calling leave event");
-        leaveEvent(event.value, currentActor.value.id);
-      }
-    },
-  });
-};
 
 watch(participations, () => {
   if (participations.value.length > 0) {
@@ -1042,10 +430,6 @@ const participationConfirmedMessage = () => {
   notifier?.success(t("Your participation has been confirmed"));
 };
 
-const participationRequestedMessage = () => {
-  notifier?.success(t("Your participation has been requested"));
-};
-
 const participationRejectedMessage = () => {
   notifier?.error(t("Your participation has been rejected"));
 };
@@ -1054,40 +438,6 @@ const participationChangedMessage = () => {
   notifier?.info(t("Your participation status has been changed"));
 };
 
-const downloadIcsEvent = async (): Promise<void> => {
-  const data = await (
-    await fetch(`${GRAPHQL_API_ENDPOINT}/events/${props.uuid}/export/ics`)
-  ).text();
-  const blob = new Blob([data], { type: "text/calendar" });
-  const link = document.createElement("a");
-  link.href = window.URL.createObjectURL(blob);
-  link.download = `${event.value?.title}.ics`;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-const triggerShare = (): void => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore-start
-  if (navigator.share) {
-    navigator
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      .share({
-        title: event.value?.title,
-        url: event.value?.url,
-      })
-      .then(() => console.debug("Successful share"))
-      .catch((error: any) => console.debug("Error sharing", error));
-  } else {
-    isShareModalActive.value = true;
-    // send popup
-  }
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore-end
-};
-
 const handleErrors = (errors: AbsintheGraphQLErrors): void => {
   if (
     errors.some((error) => error.status_code === 404) ||
@@ -1101,84 +451,12 @@ onFetchEventError(({ graphQLErrors }) =>
   handleErrors(graphQLErrors as AbsintheGraphQLErrors)
 );
 
-// const actorIsParticipant = computed((): boolean => {
-//   if (actorIsOrganizer.value) return true;
-
-//   return (
-//     participations.value.length > 0 &&
-//     participations.value[0].role === ParticipantRole.PARTICIPANT
-//   );
-// });
-
-const actorIsOrganizer = computed((): boolean => {
-  return (
-    participations.value.length > 0 &&
-    participations.value[0].role === ParticipantRole.CREATOR
-  );
-});
-
-const hasGroupPrivileges = computed((): boolean => {
-  return (
-    person.value?.memberships !== undefined &&
-    person.value?.memberships?.total > 0 &&
-    [MemberRole.MODERATOR, MemberRole.ADMINISTRATOR].includes(
-      person.value?.memberships?.elements[0].role
-    )
-  );
-});
-
-const canManageEvent = computed((): boolean => {
-  return actorIsOrganizer.value || hasGroupPrivileges.value;
-});
-
 // const endDate = computed((): string | undefined => {
 //   return event.value?.endsOn && event.value.endsOn > event.value.beginsOn
 //     ? event.value.endsOn
 //     : event.value?.beginsOn;
 // });
 
-const maximumAttendeeCapacity = computed((): number | undefined => {
-  return event.value?.options?.maximumAttendeeCapacity;
-});
-
-const eventCapacityOK = computed((): boolean => {
-  if (event.value?.draft) return true;
-  if (!maximumAttendeeCapacity.value) return true;
-  return (
-    event.value?.options?.maximumAttendeeCapacity !== undefined &&
-    event.value.participantStats.participant !== undefined &&
-    event.value?.options?.maximumAttendeeCapacity >
-      event.value.participantStats.participant
-  );
-});
-
-// const numberOfPlacesStillAvailable = computed((): number | undefined => {
-//   if (event.value?.draft) return maximumAttendeeCapacity.value;
-//   return (
-//     (maximumAttendeeCapacity.value ?? 0) -
-//     (event.value?.participantStats.participant ?? 0)
-//   );
-// });
-
-const anonymousParticipationConfirmed = async (): Promise<boolean> => {
-  return isParticipatingInThisEvent(props.uuid);
-};
-
-const cancelAnonymousParticipation = async (): Promise<void> => {
-  if (!event.value || !anonymousActorId.value) return;
-  const token = (await getLeaveTokenForParticipation(props.uuid)) as string;
-  leaveEvent(event.value, anonymousActorId.value, token);
-  await removeAnonymousParticipation(props.uuid);
-  anonymousParticipation.value = null;
-};
-
-const ableToReport = computed((): boolean => {
-  return (
-    currentActor.value?.id != null ||
-    anonymousReportsConfig.value?.allowed === true
-  );
-});
-
 const organizer = computed((): IActor | null => {
   if (event.value?.attributedTo?.id) {
     return event.value.attributedTo;
@@ -1189,10 +467,6 @@ const organizer = computed((): IActor | null => {
   return null;
 });
 
-const organizerDomain = computed((): string | undefined => {
-  return organizer.value?.domain ?? undefined;
-});
-
 const metadataToComponent: Record<string, string> = {
   "mz:live:twitch:url": "IntegrationTwitch",
   "mz:live:peertube:url": "IntegrationPeertube",
@@ -1234,123 +508,6 @@ const eventCategory = computed((): string | undefined => {
   })?.label as string;
 });
 
-const {
-  mutate: leaveEventMutation,
-  onDone: onLeaveEventMutationDone,
-  onError: onLeaveEventMutationError,
-} = useMutation<{ leaveEvent: { actor: { id: string } } }>(LEAVE_EVENT, () => ({
-  update: (
-    store: ApolloCache<{
-      leaveEvent: IParticipant;
-    }>,
-    { data }: FetchResult,
-    { context, variables }
-  ) => {
-    if (data == null) return;
-    let participation;
-
-    const token = context?.token;
-    const actorId = variables?.actorId;
-    const localEventId = variables?.eventId;
-    const eventUUID = context?.eventUUID;
-    const isAnonymousParticipationConfirmed =
-      context?.isAnonymousParticipationConfirmed;
-
-    if (!token) {
-      const participationCachedData = store.readQuery<{
-        person: IPerson;
-      }>({
-        query: EVENT_PERSON_PARTICIPATION,
-        variables: { eventId: localEventId, actorId },
-      });
-      if (participationCachedData == null) return;
-      const { person: cachedPerson } = participationCachedData;
-      [participation] = cachedPerson?.participations?.elements ?? [undefined];
-
-      store.modify({
-        id: `Person:${actorId}`,
-        fields: {
-          participations() {
-            return {
-              elements: [],
-              total: 0,
-            };
-          },
-        },
-      });
-    }
-
-    const eventCachedData = store.readQuery<{ event: IEvent }>({
-      query: FETCH_EVENT,
-      variables: { uuid: eventUUID },
-    });
-    if (eventCachedData == null) return;
-    const { event: eventCached } = eventCachedData;
-    if (eventCached === null) {
-      console.error("Cannot update event cache, because of null value.");
-      return;
-    }
-    const participantStats = { ...eventCached.participantStats };
-    if (participation && participation?.role === ParticipantRole.NOT_APPROVED) {
-      participantStats.notApproved -= 1;
-    } else if (isAnonymousParticipationConfirmed === false) {
-      participantStats.notConfirmed -= 1;
-    } else {
-      participantStats.going -= 1;
-      participantStats.participant -= 1;
-    }
-    store.writeQuery({
-      query: FETCH_EVENT,
-      variables: { uuid: eventUUID },
-      data: {
-        event: {
-          ...eventCached,
-          participantStats,
-        },
-      },
-    });
-  },
-}));
-
-const leaveEvent = (
-  eventToLeave: IEvent,
-  actorId: string,
-  token: string | null = null,
-  isAnonymousParticipationConfirmed: boolean | null = null
-): void => {
-  leaveEventMutation(
-    {
-      eventId: eventToLeave.id,
-      actorId,
-      token,
-    },
-    {
-      context: {
-        token,
-        isAnonymousParticipationConfirmed,
-        eventUUID: eventToLeave.uuid,
-      },
-    }
-  );
-};
-
-onLeaveEventMutationDone(({ data }) => {
-  if (data) {
-    notifier?.success(t("You have cancelled your participation"));
-  }
-});
-
-const snackbar = inject<Snackbar>("snackbar");
-
-onLeaveEventMutationError((error) => {
-  snackbar?.open({
-    message: error.message,
-    variant: "danger",
-    position: "bottom",
-  });
-  console.error(error);
-});
-
 useHead({
   title: computed(() => eventTitle.value ?? ""),
   meta: [{ name: "description", content: eventDescription.value }],
@@ -1529,17 +686,7 @@ a.participations-link {
   cursor: auto;
 }
 
-.wrapper,
 .intro-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.intro-wrapper {
-  position: relative;
-  padding: 0 16px 16px;
-  // background: #fff;
-
   .date-calendar-icon-wrapper {
     margin-top: 16px;
     height: 0;

From 74581912f3621c852d9df132abb6ecb92d90b014 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 17:49:13 +0200
Subject: [PATCH 7/8] Only preload svg shapes on homepage

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 lib/web/templates/page/index.html.heex | 8 +++++---
 lib/web/views/page_view.ex             | 5 +++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/lib/web/templates/page/index.html.heex b/lib/web/templates/page/index.html.heex
index 8d35f4a24..a851fc873 100644
--- a/lib/web/templates/page/index.html.heex
+++ b/lib/web/templates/page/index.html.heex
@@ -7,9 +7,11 @@
     <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png" sizes="152x152" />
     <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color={theme_color()} />
     <meta name="theme-color" content={theme_color()} />
-    <link rel="preload" href="/img/shape-1.svg" as="image" />
-    <link rel="preload" href="/img/shape-2.svg" as="image" />
-    <link rel="preload" href="/img/shape-3.svg" as="image" />
+    <%= if is_root(assigns) do %>
+      <link rel="preload" href="/img/shape-1.svg" as="image" />
+      <link rel="preload" href="/img/shape-2.svg" as="image" />
+      <link rel="preload" href="/img/shape-3.svg" as="image" />
+    <% end %>
     <%= tags(assigns) || assigns.tags %>
     <%= Vite.inlined_phx_manifest() %>
     <%= Vite.vite_client() %>
diff --git a/lib/web/views/page_view.ex b/lib/web/views/page_view.ex
index c7badebfe..660dcb59f 100644
--- a/lib/web/views/page_view.ex
+++ b/lib/web/views/page_view.ex
@@ -86,4 +86,9 @@ defmodule Mobilizon.Web.PageView do
   def language_direction(assigns) do
     assigns |> Map.get(:locale, "en") |> get_language_direction()
   end
+
+  @spec is_root(map()) :: boolean()
+  def is_root(assigns) do
+    assigns |> Map.get(:conn, %{request_path: "/"}) |> Map.get(:request_path, "/") == "/"
+  end
 end

From c23c2bdba6ec5d0004d02f8d4126cee809265668 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 11 Oct 2022 17:56:22 +0200
Subject: [PATCH 8/8] Lint fixes

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Local/CloseEvents.vue |  2 +-
 js/src/components/TextEditor.vue        |  2 +-
 js/src/views/Event/EventView.vue        | 16 ----------------
 3 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/js/src/components/Local/CloseEvents.vue b/js/src/components/Local/CloseEvents.vue
index 8f1ed5f83..9c6747e66 100644
--- a/js/src/components/Local/CloseEvents.vue
+++ b/js/src/components/Local/CloseEvents.vue
@@ -55,7 +55,7 @@
 import { LocationType } from "../../types/user-location.model";
 import MoreContent from "./MoreContent.vue";
 import CloseContent from "./CloseContent.vue";
-import { computed, onMounted, ref, useAttrs } from "vue";
+import { computed, onMounted, useAttrs } from "vue";
 import { SEARCH_EVENTS } from "@/graphql/search";
 import { IEvent } from "@/types/event.model";
 import { useLazyQuery } from "@vue/apollo-composable";
diff --git a/js/src/components/TextEditor.vue b/js/src/components/TextEditor.vue
index 62af70e5a..b29980d28 100644
--- a/js/src/components/TextEditor.vue
+++ b/js/src/components/TextEditor.vue
@@ -218,7 +218,7 @@ import Underline from "@tiptap/extension-underline";
 import Link from "@tiptap/extension-link";
 import { AutoDir } from "./Editor/Autodir";
 // import sanitizeHtml from "sanitize-html";
-import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, inject, onBeforeUnmount, watch } from "vue";
 import { Dialog } from "@/plugins/dialog";
 import { useI18n } from "vue-i18n";
 import { useMutation } from "@vue/apollo-composable";
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
index e7468e54e..3ff5ad6e5 100755
--- a/js/src/views/Event/EventView.vue
+++ b/js/src/views/Event/EventView.vue
@@ -451,22 +451,6 @@ onFetchEventError(({ graphQLErrors }) =>
   handleErrors(graphQLErrors as AbsintheGraphQLErrors)
 );
 
-// const endDate = computed((): string | undefined => {
-//   return event.value?.endsOn && event.value.endsOn > event.value.beginsOn
-//     ? event.value.endsOn
-//     : event.value?.beginsOn;
-// });
-
-const organizer = computed((): IActor | null => {
-  if (event.value?.attributedTo?.id) {
-    return event.value.attributedTo;
-  }
-  if (event.value?.organizerActor) {
-    return event.value.organizerActor;
-  }
-  return null;
-});
-
 const metadataToComponent: Record<string, string> = {
   "mz:live:twitch:url": "IntegrationTwitch",
   "mz:live:peertube:url": "IntegrationPeertube",