add frontend test about group - #1879

src/components/Image/LazyImage.vue

@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 import BlurhashImg from "./BlurhashImg.vue";
 
-import { computed, ref, onMounted, onUnmounted, watchEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -40,15 +40,12 @@ const props = withDefaults(
 );
 
 const isLoaded = ref(false);
-const observer = ref<IntersectionObserver | null>(null);
 
 const wrapper = ref<HTMLElement | null>(null);
 const image = ref<HTMLImageElement | null>(null);
 
 const src = computed(() => props.src);
 
-const isIntersecting = ref(false);
-
 const blurhashOpacity = computed(() =>
   isLoaded.value ? "opacity-0 hidden" : "opacity-100"
 );
@@ -57,22 +54,6 @@ const imageOpacity = computed(() =>
   isLoaded.value ? "opacity-100" : "opacity-0"
 );
 
-onMounted(() => {
-  observer.value = new IntersectionObserver((entries) => {
-    isIntersecting.value = entries[0].isIntersecting;
-  });
-
-  if (wrapper.value) {
-    observer.value.observe(wrapper.value);
-  }
-});
-
-onUnmounted(() => {
-  if (observer.value) {
-    observer.value.disconnect();
-  }
-});
-
 watchEffect(() => {
   // Image is visible (means: has entered the viewport),
   // so start loading by setting the src attribute

tests/unit/specs/views/Event/ParticipantsView.spec.ts

@@ -0,0 +1,238 @@
+import { beforeEach, describe, it, expect, vi } from "vitest";
+import { enUS } from "date-fns/locale";
+import { routes } from "@/router";
+import { createRouter, createWebHistory, Router } from "vue-router";
+import { config, mount } from "@vue/test-utils";
+import { Oruga } from "@oruga-ui/oruga-next";
+import flushPromises from "flush-promises";
+import { getMockClient, requestHandlers } from "../../mocks/client";
+import { htmlRemoveId } from "../../common";
+import ParticipantsView from "@/views/Event/ParticipantsView.vue";
+import {
+  EXPORT_EVENT_PARTICIPATIONS,
+  PARTICIPANTS,
+  UPDATE_PARTICIPANT,
+} from "@/graphql/event";
+import { computed } from "vue";
+
+vi.mock("@/composition/apollo/actor", () => {
+  return {
+    useCurrentActorClient: () => {
+      const error = null;
+      const loading = null;
+      const currentActor = computed(() => {
+        return {
+          id: 123,
+          name: "test",
+          domain: null,
+          preferredUsername: "test",
+        };
+      });
+      return { currentActor, error, loading };
+    },
+  };
+});
+
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
+
+const mock_event_part = {
+  data: {
+    event: {
+      __typename: "Event",
+      attributedTo: null,
+      id: "2",
+      organizerActor: {
+        __typename: "Person",
+        avatar: null,
+        domain: null,
+        id: "2",
+        name: "test",
+        preferredUsername: "test",
+        summary: null,
+        type: "PERSON",
+        url: "http://mobilizon.test/@test",
+      },
+      participantStats: {
+        __typename: "ParticipantStats",
+        going: 2,
+        notApproved: 0,
+        participant: 1,
+        rejected: 0,
+      },
+      participants: {
+        __typename: "PaginatedParticipantList",
+        elements: [
+          {
+            __typename: "Participant",
+            actor: {
+              __typename: "Person",
+              avatar: null,
+              domain: null,
+              id: "2",
+              name: "Test",
+              preferredUsername: "test",
+              summary: null,
+              type: "PERSON",
+              url: "http://mobilizon.test/@test",
+            },
+            event: {
+              __typename: "Event",
+              id: "2",
+              uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
+            },
+            id: "c058b4ca-3fb5-4601-9f71-3940da1d4bcc",
+            insertedAt: "2025-11-12T14:51:01Z",
+            metadata: null,
+            role: "CREATOR",
+          },
+        ],
+        total: 0,
+      },
+      title: "event-test",
+      uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
+    },
+  },
+};
+
+const generateWrapper = (eventExtra: any) => {
+  const global_data = getMockClient([
+    EXPORT_EVENT_PARTICIPATIONS,
+    [PARTICIPANTS, eventExtra],
+    UPDATE_PARTICIPANT,
+  ]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
+  return mount(ParticipantsView, {
+    props: {
+      eventId: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
+    },
+    global: {
+      ...global_data,
+      stubs: {
+        RouterLink: false,
+      },
+    },
+  });
+};
+
+describe("ParticipantsView", () => {
+  it("Show simple", async () => {
+    const wrapper = generateWrapper(mock_event_part);
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledWith({
+      limit: 10,
+      page: 1,
+      roles: undefined,
+      uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
+    });
+  });
+
+  it("Show event's group / user admin", async () => {
+    const new_event = structuredClone(mock_event_part);
+    new_event.data.event.attributedTo = {
+      __typename: "Group",
+      id: 123,
+      uuid: "987654314231132",
+      allowSeeParticipants: false,
+      members: {
+        __typename: "PaginatedMemberList",
+        elements: [
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              id: "7",
+            },
+            id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
+            role: "MEMBER",
+          },
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              id: "123",
+            },
+            id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
+            role: "ADMINISTRATOR",
+          },
+        ],
+      },
+    };
+    const wrapper = generateWrapper(new_event);
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledWith({
+      limit: 10,
+      page: 1,
+      roles: undefined,
+      uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
+    });
+  });
+
+  it("Show event's group / user member", async () => {
+    const new_event = structuredClone(mock_event_part);
+    new_event.data.event.attributedTo = {
+      __typename: "Group",
+      id: 123,
+      uuid: "987654314231132",
+      allowSeeParticipants: true,
+      members: {
+        __typename: "PaginatedMemberList",
+        elements: [
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              id: "123",
+            },
+            id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
+            role: "MEMBER",
+          },
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              id: "2",
+            },
+            id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
+            role: "ADMINISTRATOR",
+          },
+        ],
+      },
+    };
+
+    const wrapper = generateWrapper(new_event);
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledWith({
+      limit: 10,
+      page: 1,
+      roles: undefined,
+      uuid: "67e9b659-84d9-4414-99f3-a1baaa88cf2d",
+    });
+  });
+});

tests/unit/specs/views/Event/__snapshots__/ParticipantsView.spec.ts.snap

@@ -0,0 +1,331 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ParticipantsView > Show event's group / user admin 1`] = `
+"<section data-v-6bee7c76="" class="container mx-auto">
+  <breadcrumbs-nav data-v-6bee7c76="" links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <h1 data-v-6bee7c76="">Participants</h1>
+  <div data-v-6bee7c76="" class="">
+    <div data-v-6bee7c76="" class="">
+      <div data-v-6bee7c76="" class="">
+        <div data-v-6bee7c76="" data-oruga="field" class="o-field o-field--horizontal">
+          <div class="o-field__horizontal-label"><label id="v-0-0" for="role-select" class="o-field__label">Status</label></div>
+          <div class="o-field__horizontal-body">
+            <div data-oruga="field" class="o-field o-field--filled">
+              <!---->
+              <div data-v-6bee7c76="" data-oruga="select" class="o-select">
+                <!----><select aria-labelledby="v-0-0" id="role-select" data-oruga-input="select" class="o-select__input o-select__input--arrowed" autocomplete="off">
+                  <!---->
+                  <option data-v-6bee7c76="" value="EVERYTHING">Everything</option>
+                  <option data-v-6bee7c76="" value="CREATOR">Organizer</option>
+                  <option data-v-6bee7c76="" value="PARTICIPANT">Participant</option>
+                  <option data-v-6bee7c76="" value="NOT_APPROVED">Not approved</option>
+                  <option data-v-6bee7c76="" value="REJECTED">Rejected</option>
+                </select>
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <!---->
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+  <div data-v-6bee7c76="" data-oruga="table" class="o-table__root">
+    <div style="display: none;"><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-1">Participant <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-2">Role <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-3" class="column-message">Message <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-4">Date <!----></span></div>
+    <!---->
+    <!---->
+    <div class="o-table__wrapper">
+      <table detail-key="id" class="o-table" aria-rowcount="1" aria-colcount="5">
+        <!---->
+        <thead>
+          <tr aria-rowindex="1">
+            <!---->
+            <th class="o-table__th o-table__th-checkbox" aria-colindex="1">
+              <div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check all" id="v-0-2" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_check_all" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
+                <!---->
+              </div>
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Participant</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Role</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Message</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="5"><span class="o-table__th__label">Date</span>
+              <!---->
+            </th>
+            <!---->
+          </tr>
+          <!---->
+          <!---->
+        </thead>
+        <tbody>
+          <tr class="" draggable="false" aria-rowindex="2">
+            <!---->
+            <td class="o-table__td o-table__td-checkbox">
+              <div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check row 0" id="v-0-3" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_0_check" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
+                <!---->
+              </div>
+            </td>
+            <td class="o-table__td" data-label="Participant">
+              <article data-v-6bee7c76="" class="flex gap-2"><span data-v-6bee7c76="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
+                <div data-v-6bee7c76="">
+                  <div data-v-6bee7c76="" class="prose dark:prose-invert">
+                    <p data-v-6bee7c76=""><span data-v-6bee7c76="">test</span><br data-v-6bee7c76=""><span data-v-6bee7c76="" class="text-sm">@test</span></p>
+                  </div>
+                </div>
+              </article>
+            </td>
+            <td class="o-table__td" data-label="Role"><span data-v-6955ca87="" data-v-6bee7c76="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Organizer</span></td>
+            <td class="o-table__td" data-label="Message">
+              <p data-v-6bee7c76="" class="has-text-grey-dark">No message</p>
+            </td>
+            <td class="o-table__td" data-label="Date"><span data-v-6bee7c76="" class="text-center">Wednesday, November 12, 2025<br data-v-6bee7c76="">3:51 PM</span></td>
+            <!---->
+          </tr>
+          <transition-group-stub name="slide" appear="false" persisted="false" css="true">
+            <!---->
+          </transition-group-stub>
+          <!---->
+        </tbody>
+        <!---->
+      </table>
+      <transition-stub name="fade" appear="false" persisted="false" css="true">
+        <!---->
+      </transition-stub>
+    </div>
+    <div class="o-table__pagination">
+      <div></div>
+      <div>
+        <nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-0 / 0</small></nav>
+      </div>
+    </div>
+  </div>
+  <div data-v-6bee7c76="" class="flex flex-wrap gap-2"><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-success"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to approve</span>
+      <!----></span>
+    </button><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-danger"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to reject</span>
+      <!----></span>
+    </button></div>
+</section>"
+`;
+
+exports[`ParticipantsView > Show event's group / user member 1`] = `
+"<section data-v-6bee7c76="" class="container mx-auto">
+  <breadcrumbs-nav data-v-6bee7c76="" links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <h1 data-v-6bee7c76="">Participants</h1>
+  <div data-v-6bee7c76="" class="">
+    <div data-v-6bee7c76="" class="">
+      <div data-v-6bee7c76="" class="">
+        <div data-v-6bee7c76="" data-oruga="field" class="o-field o-field--horizontal">
+          <div class="o-field__horizontal-label"><label id="v-0-0" for="role-select" class="o-field__label">Status</label></div>
+          <div class="o-field__horizontal-body">
+            <div data-oruga="field" class="o-field o-field--filled">
+              <!---->
+              <div data-v-6bee7c76="" data-oruga="select" class="o-select">
+                <!----><select aria-labelledby="v-0-0" id="role-select" data-oruga-input="select" class="o-select__input o-select__input--arrowed" autocomplete="off">
+                  <!---->
+                  <option data-v-6bee7c76="" value="EVERYTHING">Everything</option>
+                  <option data-v-6bee7c76="" value="CREATOR">Organizer</option>
+                  <option data-v-6bee7c76="" value="PARTICIPANT">Participant</option>
+                  <option data-v-6bee7c76="" value="NOT_APPROVED">Not approved</option>
+                  <option data-v-6bee7c76="" value="REJECTED">Rejected</option>
+                </select>
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <!---->
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+  <div data-v-6bee7c76="" data-oruga="table" class="o-table__root">
+    <div style="display: none;"><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-1">Participant <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-2">Role <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-3" class="column-message">Message <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-4">Date <!----></span></div>
+    <!---->
+    <!---->
+    <div class="o-table__wrapper">
+      <table detail-key="id" class="o-table" aria-rowcount="1" aria-colcount="4">
+        <!---->
+        <thead>
+          <tr aria-rowindex="1">
+            <!---->
+            <!---->
+            <th class="o-table__th" draggable="false" aria-colindex="1"><span class="o-table__th__label">Participant</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Role</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Message</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Date</span>
+              <!---->
+            </th>
+            <!---->
+          </tr>
+          <!---->
+          <!---->
+        </thead>
+        <tbody>
+          <tr class="" draggable="false" aria-rowindex="2">
+            <!---->
+            <!---->
+            <td class="o-table__td" data-label="Participant">
+              <article data-v-6bee7c76="" class="flex gap-2"><span data-v-6bee7c76="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
+                <div data-v-6bee7c76="">
+                  <div data-v-6bee7c76="" class="prose dark:prose-invert">
+                    <p data-v-6bee7c76=""><span data-v-6bee7c76="">test</span><br data-v-6bee7c76=""><span data-v-6bee7c76="" class="text-sm">@test</span></p>
+                  </div>
+                </div>
+              </article>
+            </td>
+            <td class="o-table__td" data-label="Role"><span data-v-6955ca87="" data-v-6bee7c76="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Organizer</span></td>
+            <td class="o-table__td" data-label="Message">
+              <p data-v-6bee7c76="" class="has-text-grey-dark">No message</p>
+            </td>
+            <td class="o-table__td" data-label="Date"><span data-v-6bee7c76="" class="text-center">Wednesday, November 12, 2025<br data-v-6bee7c76="">3:51 PM</span></td>
+            <!---->
+          </tr>
+          <transition-group-stub name="slide" appear="false" persisted="false" css="true">
+            <!---->
+          </transition-group-stub>
+          <!---->
+        </tbody>
+        <!---->
+      </table>
+      <transition-stub name="fade" appear="false" persisted="false" css="true">
+        <!---->
+      </transition-stub>
+    </div>
+    <div class="o-table__pagination">
+      <div></div>
+      <div>
+        <nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-0 / 0</small></nav>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</section>"
+`;
+
+exports[`ParticipantsView > Show simple 1`] = `
+"<section data-v-6bee7c76="" class="container mx-auto">
+  <breadcrumbs-nav data-v-6bee7c76="" links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <h1 data-v-6bee7c76="">Participants</h1>
+  <div data-v-6bee7c76="" class="">
+    <div data-v-6bee7c76="" class="">
+      <div data-v-6bee7c76="" class="">
+        <div data-v-6bee7c76="" data-oruga="field" class="o-field o-field--horizontal">
+          <div class="o-field__horizontal-label"><label id="v-0-0" for="role-select" class="o-field__label">Status</label></div>
+          <div class="o-field__horizontal-body">
+            <div data-oruga="field" class="o-field o-field--filled">
+              <!---->
+              <div data-v-6bee7c76="" data-oruga="select" class="o-select">
+                <!----><select aria-labelledby="v-0-0" id="role-select" data-oruga-input="select" class="o-select__input o-select__input--arrowed" autocomplete="off">
+                  <!---->
+                  <option data-v-6bee7c76="" value="EVERYTHING">Everything</option>
+                  <option data-v-6bee7c76="" value="CREATOR">Organizer</option>
+                  <option data-v-6bee7c76="" value="PARTICIPANT">Participant</option>
+                  <option data-v-6bee7c76="" value="NOT_APPROVED">Not approved</option>
+                  <option data-v-6bee7c76="" value="REJECTED">Rejected</option>
+                </select>
+                <!---->
+              </div>
+              <!---->
+            </div>
+          </div>
+          <!---->
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+  <div data-v-6bee7c76="" data-oruga="table" class="o-table__root">
+    <div style="display: none;"><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-1">Participant <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-2">Role <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-3" class="column-message">Message <!----></span><span data-v-6bee7c76="" data-oruga="table-column" data-id="table-4">Date <!----></span></div>
+    <!---->
+    <!---->
+    <div class="o-table__wrapper">
+      <table detail-key="id" class="o-table" aria-rowcount="1" aria-colcount="5">
+        <!---->
+        <thead>
+          <tr aria-rowindex="1">
+            <!---->
+            <th class="o-table__th o-table__th-checkbox" aria-colindex="1">
+              <div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check all" id="v-0-2" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_check_all" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
+                <!---->
+              </div>
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Participant</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Role</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Message</span>
+              <!---->
+            </th>
+            <th class="o-table__th" draggable="false" aria-colindex="5"><span class="o-table__th__label">Date</span>
+              <!---->
+            </th>
+            <!---->
+          </tr>
+          <!---->
+          <!---->
+        </thead>
+        <tbody>
+          <tr class="" draggable="false" aria-rowindex="2">
+            <!---->
+            <td class="o-table__td o-table__td-checkbox">
+              <div data-oruga="checkbox" class="o-checkbox o-checkbox--disabled"><input aria-label="Check row 0" id="v-0-3" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" name="row_0_check" true-value="true" false-value="false" disabled="" autocomplete="off" aria-checked="false">
+                <!---->
+              </div>
+            </td>
+            <td class="o-table__td" data-label="Participant">
+              <article data-v-6bee7c76="" class="flex gap-2"><span data-v-6bee7c76="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
+                <div data-v-6bee7c76="">
+                  <div data-v-6bee7c76="" class="prose dark:prose-invert">
+                    <p data-v-6bee7c76=""><span data-v-6bee7c76="">test</span><br data-v-6bee7c76=""><span data-v-6bee7c76="" class="text-sm">@test</span></p>
+                  </div>
+                </div>
+              </article>
+            </td>
+            <td class="o-table__td" data-label="Role"><span data-v-6955ca87="" data-v-6bee7c76="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Organizer</span></td>
+            <td class="o-table__td" data-label="Message">
+              <p data-v-6bee7c76="" class="has-text-grey-dark">No message</p>
+            </td>
+            <td class="o-table__td" data-label="Date"><span data-v-6bee7c76="" class="text-center">Wednesday, November 12, 2025<br data-v-6bee7c76="">3:51 PM</span></td>
+            <!---->
+          </tr>
+          <transition-group-stub name="slide" appear="false" persisted="false" css="true">
+            <!---->
+          </transition-group-stub>
+          <!---->
+        </tbody>
+        <!---->
+      </table>
+      <transition-stub name="fade" appear="false" persisted="false" css="true">
+        <!---->
+      </transition-stub>
+    </div>
+    <div class="o-table__pagination">
+      <div></div>
+      <div>
+        <nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-0 / 0</small></nav>
+      </div>
+    </div>
+  </div>
+  <div data-v-6bee7c76="" class="flex flex-wrap gap-2"><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-success"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to approve</span>
+      <!----></span>
+    </button><button data-v-6bee7c76="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined-danger"><span class="o-button__wrapper"><!----><span class="o-button__label">No participant to reject</span>
+      <!----></span>
+    </button></div>
+</section>"
+`;

tests/unit/specs/views/Group/CreateView.spec.ts

@@ -44,6 +44,26 @@ describe("CreateView", () => {
     await wrapper.vm.$nextTick();
     await flushPromises();
     expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
-    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+
+    expect(wrapper.find("form").exists()).toBe(true);
+    wrapper.find('input[id="group-display-name"]').setValue("New Group");
+    wrapper.find('input[id="group-preferred-username"]').setValue("new_group");
+    wrapper.find('input[id="full-address-autocomplete-1"]').setValue("");
+    wrapper.find('input[name="groupVisibility"]:nth-of-type(1)').setChecked();
+    wrapper.findAll('input[name="groupOpenness"]')[1].setChecked();
+    wrapper.find("form").trigger("submit");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_0).toHaveBeenCalledWith({
+      allowSeeParticipants: true,
+      manuallyApprovesFollowers: false,
+      name: "New Group",
+      openness: "MODERATED",
+      preferredUsername: "new_group",
+      summary: "",
+      visibility: "PUBLIC",
+    });
   });
 });

tests/unit/specs/views/Group/GroupFollowers.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, it, expect } from "vitest";
+import { beforeEach, describe, it, expect, vi } from "vitest";
 import { enUS } from "date-fns/locale";
 import { routes } from "@/router";
 import { createRouter, createWebHistory, Router } from "vue-router";
@@ -9,6 +9,8 @@ import { getMockClient, requestHandlers } from "../../mocks/client";
 import { htmlRemoveId } from "../../common";
 import GroupFollowers from "@/views/Group/GroupFollowers.vue";
 import { GROUP_FOLLOWERS, UPDATE_FOLLOWER } from "@/graphql/followers";
+import { MemberRole } from "@/types/enums";
+import { computed } from "vue";
 
 config.global.plugins.push(Oruga);
 
@@ -23,8 +25,104 @@ beforeEach(async () => {
   // await router.isReady();
 });
 
+vi.mock("@/composition/apollo/actor", () => {
+  return {
+    useCurrentActorClient: () => {
+      const error = null;
+      const loading = null;
+      const currentActor = computed(() => {
+        return {
+          id: 123,
+          name: "test",
+          domain: null,
+          preferredUsername: "test",
+        };
+      });
+      return { currentActor, error, loading };
+    },
+    usePersonStatusGroup: () => {
+      const error = null;
+      const loading = null;
+      const person = computed(() => {
+        return {
+          memberships: {
+            total: 1,
+            elements: [
+              {
+                role: MemberRole.ADMINISTRATOR,
+              },
+            ],
+          },
+        };
+      });
+      return { person, error, loading };
+    },
+  };
+});
+
+const groupFollowersMock = {
+  data: {
+    group: {
+      __typename: "Group",
+      avatar: null,
+      domain: null,
+      id: "6",
+      followers: {
+        __typename: "PaginatedFollowerList",
+        elements: [
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              avatar: null,
+              domain: null,
+              id: "7",
+              name: "autre",
+              preferredUsername: "autre",
+              summary: null,
+              type: "PERSON",
+              url: "http://mobilizon.test/@autre",
+            },
+            id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
+            insertedAt: "2025-11-12T14:57:27",
+            approved: true,
+            updatedAt: "2025-11-12T14:57:27",
+          },
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              avatar: null,
+              domain: null,
+              id: "2",
+              name: "Test",
+              preferredUsername: "test",
+              summary: null,
+              type: "PERSON",
+              url: "http://mobilizon.test/@test",
+            },
+            id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
+            insertedAt: "2025-11-12T12:04:07",
+            approved: true,
+            updatedAt: "2025-11-12T12:04:07",
+          },
+        ],
+        total: 2,
+      },
+      name: "mygroup",
+      preferredUsername: "mygroup",
+      summary: null,
+      type: "GROUP",
+      url: "http://mobilizon.test/@mygroup",
+    },
+  },
+};
+
 const generateWrapper = () => {
-  const global_data = getMockClient([GROUP_FOLLOWERS, UPDATE_FOLLOWER]);
+  const global_data = getMockClient([
+    [GROUP_FOLLOWERS, groupFollowersMock],
+    UPDATE_FOLLOWER,
+  ]);
   global_data.provide.dateFnsLocale = enUS;
   global_data.plugins = [router];
   return mount(GroupFollowers, {

tests/unit/specs/views/Group/GroupMembers.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, it, expect } from "vitest";
+import { beforeEach, describe, it, expect, vi } from "vitest";
 import { enUS } from "date-fns/locale";
 import { routes } from "@/router";
 import { createRouter, createWebHistory, Router } from "vue-router";
@@ -15,6 +15,43 @@ import {
   UPDATE_MEMBER,
   APPROVE_MEMBER,
 } from "@/graphql/member";
+import { computed } from "vue";
+import { MemberRole } from "@/types/enums";
+
+vi.mock("@/composition/apollo/actor", () => {
+  return {
+    useCurrentActorClient: () => {
+      const error = null;
+      const loading = null;
+      const currentActor = computed(() => {
+        return {
+          id: 123,
+          name: "test",
+          domain: null,
+          preferredUsername: "test",
+        };
+      });
+      return { currentActor, error, loading };
+    },
+    usePersonStatusGroup: () => {
+      const error = null;
+      const loading = null;
+      const person = computed(() => {
+        return {
+          memberships: {
+            total: 1,
+            elements: [
+              {
+                role: MemberRole.ADMINISTRATOR,
+              },
+            ],
+          },
+        };
+      });
+      return { person, error, loading };
+    },
+  };
+});
 
 config.global.plugins.push(Oruga);
 
@@ -29,10 +66,66 @@ beforeEach(async () => {
   // await router.isReady();
 });
 
+const groupMembersMock = {
+  data: {
+    group: {
+      __typename: "Group",
+      avatar: null,
+      domain: null,
+      id: "6",
+      members: {
+        __typename: "PaginatedMemberList",
+        elements: [
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              avatar: null,
+              domain: null,
+              id: "7",
+              name: "autre",
+              preferredUsername: "autre",
+              summary: null,
+              type: "PERSON",
+              url: "http://mobilizon.test/@autre",
+            },
+            id: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
+            insertedAt: "2025-11-12T14:57:27",
+            role: "MEMBER",
+          },
+          {
+            __typename: "Member",
+            actor: {
+              __typename: "Person",
+              avatar: null,
+              domain: null,
+              id: "2",
+              name: "Test",
+              preferredUsername: "test",
+              summary: null,
+              type: "PERSON",
+              url: "http://mobilizon.test/@test",
+            },
+            id: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
+            insertedAt: "2025-11-12T12:04:07",
+            role: "ADMINISTRATOR",
+          },
+        ],
+        total: 2,
+      },
+      name: "mygroup",
+      preferredUsername: "mygroup",
+      summary: null,
+      type: "GROUP",
+      url: "http://mobilizon.test/@mygroup",
+    },
+  },
+};
+
 const generateWrapper = () => {
   const global_data = getMockClient([
     INVITE_MEMBER,
-    GROUP_MEMBERS,
+    [GROUP_MEMBERS, groupMembersMock],
     REMOVE_MEMBER,
     UPDATE_MEMBER,
     APPROVE_MEMBER,
@@ -70,4 +163,81 @@ describe("GroupMembers", () => {
       roles: undefined,
     });
   });
+
+  it("Remove", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    wrapper.find("button.o-button--danger").trigger("click");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_3).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_2).toHaveBeenCalledWith({
+      groupId: "6",
+      memberId: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
+    });
+  });
+
+  it("Promote", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    wrapper.findAll("button")[1].trigger("click");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_3).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_3).toHaveBeenCalledWith({
+      memberId: "399a0f7a-7cfa-405d-8408-a3d1f316ab9b",
+      oldRole: "MEMBER",
+      role: "MODERATOR",
+    });
+  });
+
+  it("Demote", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    wrapper.findAll("button")[3].trigger("click");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_3).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_3).toHaveBeenCalledWith({
+      memberId: "95807e0a-7a7e-4403-90ea-d883e51e9db4",
+      oldRole: "ADMINISTRATOR",
+      role: "MODERATOR",
+    });
+  });
+
+  it("Invite", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    wrapper
+      .find('input[id="new-member-field"]')
+      .setValue("invite@mobilizon.test");
+    wrapper.find("form").trigger("submit");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(2);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_3).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_4).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_0).toHaveBeenCalledWith({
+      groupId: "6",
+      targetActorUsername: "invite@mobilizon.test",
+    });
+  });
 });

tests/unit/specs/views/Group/GroupSettings.spec.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, it, expect } from "vitest";
+import { beforeEach, describe, it, expect, vi } from "vitest";
 import { enUS } from "date-fns/locale";
 import { routes } from "@/router";
 import { createRouter, createWebHistory, Router } from "vue-router";
@@ -8,8 +8,45 @@ import flushPromises from "flush-promises";
 import { getMockClient, requestHandlers } from "../../mocks/client";
 import { htmlRemoveId } from "../../common";
 import GroupSettings from "@/views/Group/GroupSettings.vue";
-import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
+import { FETCH_GROUP_PUBLIC, UPDATE_GROUP } from "@/graphql/group";
 import { DELETE_GROUP } from "@/graphql/group";
+import { computed } from "vue";
+import { MemberRole } from "@/types/enums";
+
+vi.mock("@/composition/apollo/actor", () => {
+  return {
+    useCurrentActorClient: () => {
+      const error = null;
+      const loading = null;
+      const currentActor = computed(() => {
+        return {
+          id: 123,
+          name: "test",
+          domain: null,
+          preferredUsername: "test",
+        };
+      });
+      return { currentActor, error, loading };
+    },
+    usePersonStatusGroup: () => {
+      const error = null;
+      const loading = null;
+      const person = computed(() => {
+        return {
+          memberships: {
+            total: 1,
+            elements: [
+              {
+                role: MemberRole.ADMINISTRATOR,
+              },
+            ],
+          },
+        };
+      });
+      return { person, error, loading };
+    },
+  };
+});
 
 config.global.plugins.push(Oruga);
 
@@ -64,6 +101,7 @@ const mock_group = {
 const generateWrapper = () => {
   const global_data = getMockClient([
     [FETCH_GROUP_PUBLIC, mock_group],
+    UPDATE_GROUP,
     DELETE_GROUP,
   ]);
   global_data.provide.dateFnsLocale = enUS;
@@ -87,10 +125,29 @@ describe("GroupSettings", () => {
     await wrapper.vm.$nextTick();
     await flushPromises();
     expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+
+    wrapper.findAll('input[name="groupVisibility"]')[1].setChecked();
+    wrapper.findAll('input[name="groupOpenness"]')[0].setChecked();
+    wrapper.find("form").trigger("submit");
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+
     expect(requestHandlers.handle_0).toHaveBeenCalledTimes(1);
-    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.handle_1).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.handle_2).toHaveBeenCalledTimes(0);
     expect(requestHandlers.handle_0).toHaveBeenCalledWith({
       name: "my-group",
     });
+    expect(requestHandlers.handle_1).toHaveBeenCalledWith({
+      allowSeeParticipants: false,
+      id: "123",
+      manuallyApprovesFollowers: true,
+      name: "ssss",
+      openness: "OPEN",
+      physicalAddress: null,
+      summary: null,
+      visibility: "UNLISTED",
+    });
   });
 });

tests/unit/specs/views/Group/GroupView.spec.ts

@@ -5,7 +5,11 @@ import { createRouter, createWebHistory, Router } from "vue-router";
 import { config, mount } from "@vue/test-utils";
 import { Oruga } from "@oruga-ui/oruga-next";
 import flushPromises from "flush-promises";
-import { getMockClient, requestHandlers } from "../../mocks/client";
+import {
+  createMockIntersectionObserver,
+  getMockClient,
+  requestHandlers,
+} from "../../mocks/client";
 import { htmlRemoveId } from "../../common";
 import GroupView from "@/views/Group/GroupView.vue";
 import { FETCH_GROUP_PUBLIC } from "@/graphql/group";
@@ -33,9 +37,46 @@ beforeEach(async () => {
   // await router.isReady();
 });
 
+const mock_group = {
+  data: {
+    group: {
+      __typename: "Group",
+      avatar: null,
+      banner: null,
+      domain: null,
+      id: "123",
+      manuallyApprovesFollowers: true,
+      allowSeeParticipants: false,
+      members: {
+        __typename: "PaginatedMemberList",
+        total: 1,
+      },
+      name: "ssss",
+      openness: "MODERATED",
+      organizedEvents: {
+        __typename: "PaginatedEventList",
+        elements: [],
+        total: 0,
+      },
+      physicalAddress: null,
+      posts: {
+        __typename: "PaginatedPostList",
+        elements: [],
+        total: 0,
+      },
+      preferredUsername: "example",
+      summary: null,
+      suspended: false,
+      type: "GROUP",
+      url: "https://mobilizon.test/@example",
+      visibility: "PUBLIC",
+    },
+  },
+};
+
 const generateWrapper = () => {
   const global_data = getMockClient([
-    FETCH_GROUP_PUBLIC,
+    [FETCH_GROUP_PUBLIC, mock_group],
     JOIN_GROUP,
     GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
     PERSON_STATUS_GROUP,

tests/unit/specs/views/Group/__snapshots__/CreateView.spec.ts.snap

@@ -120,3 +120,124 @@ exports[`CreateView > Show simple 1`] = `
   </form>
 </section>"
 `;
+
+exports[`CreateView > Show simple 2`] = `
+"<section class="container mx-auto">
+  <h1>Create a new group</h1>
+  <form>
+    <div data-oruga="field" class="o-field o-field--filled"><label id="v-0-0" for="group-display-name" class="o-field__label">Group display name</label>
+      <div data-oruga="input" class="o-input o-input--expanded">
+        <!----><input aria-labelledby="v-0-0" aria-required="true" required="" id="group-display-name" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off">
+        <!---->
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <div class="field"><label class="label" for="group-preferred-username">Federated Group Name</label>
+      <div class="field-body">
+        <div data-oruga="field" class="o-field o-field--filled">
+          <!---->
+          <div data-oruga="input" class="o-input o-input--expanded">
+            <!----><input aria-labelledby="v-0-2" aria-describedby="v-0-3" aria-required="true" required="" pattern="[a-z0-9_]+" id="group-preferred-username" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off" validation-message="Only alphanumeric lowercased characters and underscores are supported.">
+            <!---->
+            <!---->
+          </div>
+          <p class="control"><span class="button is-static">@localhost</span></p>
+          <p id="v-0-3" class="o-field__message">Only alphanumeric lowercased characters and underscores are supported.</p>
+        </div>
+      </div>
+      <!--v-if-->
+    </div>
+    <div data-oruga="field" class="o-field"><label id="v-0-4" for="group-summary" class="o-field__label">Description</label>
+      <!---->
+    </div>
+    <div class="address-autocomplete">
+      <div data-oruga="field" class="o-field !-mt-2 flex" id="FullAddressAutoComplete-o-field"><label id="v-0-0-0" for="full-address-autocomplete-1" class="o-field__label">Group address</label>
+        <!--v-if-->
+        <div data-oruga="autocomplete" class="o-dropdown o-dropdown--expanded o-dropdown--position-auto o-autocomplete">
+          <div class="o-dropdown__trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-disabled="false" aria-controls="v-0-0-2" aria-labelledby="v-0-0-0">
+            <div data-oruga="input" class="o-input o-input--expanded"><span data-oruga="icon" class="o-icon o-input__icon-left"><i class="mdi mdi-map-marker mdi-24px"></i></span><input aria-labelledby="v-0-0-0" class="FullAddressAutoComplete-o-autocomplete !mt-0 !h-full o-input__input o-input__input--iconspace-left o-input__input--placeholder" aria-autocomplete="list" aria-controls="v-0-0-2" enterkeyhint="enter" id="full-address-autocomplete-1" type="text" data-oruga-input="text" autocomplete="off" placeholder="e.g. 10 Rue Jangot">
+              <!---->
+              <!---->
+            </div>
+          </div>
+          <!--teleport start-->
+          <!---->
+          <transition-stub name="fade" appear="false" persisted="false" css="true">
+            <div id="v-0-0-2" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--auto" style="max-height: 200px; overflow: auto; display: none;" role="listbox" aria-labelledby="v-0-0-0" aria-multiselectable="false">
+              <!---->
+              <!---->
+              <div id="v-0-0-2-1" data-oruga="dropdown-item" data-id="dropdown-1" class="o-dropdown__item o-dropdown__item--clickable o-autocomplete__item o-autocomplete__item--empty" role="option" tabindex="-1" aria-selected="false" aria-disabled="false"></div>
+              <!---->
+            </div>
+          </transition-stub>
+          <!--teleport end-->
+        </div><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--disabled reset-area !h-auto" disabled="" title="Clear address field"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span>
+          <!---->
+          <!----></span>
+        </button>
+        <!---->
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+    <div class="field"><b class="field-label">Avatar</b>
+      <div><label data-oruga="upload" class="o-upload !flex">
+          <div class="o-upload__draggable" role="button" tabindex="0">
+            <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Avatar</span></span>
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+          </div><input type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+        </label></div>
+      <!--v-if-->
+    </div>
+    <div class="field"><b class="field-label">Banner</b>
+      <div><label data-oruga="upload" class="o-upload !flex">
+          <div class="o-upload__draggable" role="button" tabindex="0">
+            <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Banner</span></span>
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+          </div><input type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+        </label></div>
+      <!--v-if-->
+    </div>
+    <fieldset>
+      <legend class="field-label !mb-0 mt-2">Group visibility</legend>
+      <div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-6" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="true" aria-labelledby="v-0-7" value="PUBLIC"><label id="v-0-7" for="v-0-6" class="o-radio__label">Visible everywhere on the web<br><small>The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page.</small></label></div>
+      <div data-oruga="radio" class="o-radio"><input id="v-0-8" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="false" aria-labelledby="v-0-9" value="UNLISTED"><label id="v-0-9" for="v-0-8" class="o-radio__label">Only accessible through link<br><small>You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines.</small></label></div>
+    </fieldset>
+    <fieldset>
+      <legend class="mt-2"><span class="field-label !mb-0">New members</span><span>Members will also access private sections like discussions, resources and restricted posts.</span></legend>
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <div data-oruga="radio" class="o-radio"><input aria-labelledby="v-0-10" id="v-0-12" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" value="OPEN"><label id="v-0-10" for="v-0-12" class="o-radio__label">Anyone can join freely<br><small>Anyone wanting to be a member from your group will be able to from your group page.</small></label></div>
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <div data-oruga="radio" class="o-radio o-radio--checked"><input aria-labelledby="v-0-13" id="v-0-15" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="true" value="MODERATED"><label id="v-0-13" for="v-0-15" class="o-radio__label">Moderate new members<br><small>Anyone can request being a member, but an administrator needs to approve the membership.</small></label></div>
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <div data-oruga="radio" class="o-radio"><input aria-labelledby="v-0-16" id="v-0-18" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" value="INVITE_ONLY"><label id="v-0-16" for="v-0-18" class="o-radio__label">Manually invite new members<br><small>The only way for your group to get new members is if an admininistrator invites them.</small></label></div>
+        <!---->
+      </div>
+    </fieldset>
+    <fieldset>
+      <legend class="mt-2"><span class="field-label !mb-0">Followers</span><span>Followers will receive new public events and posts.</span></legend>
+      <div data-oruga="checkbox" class="o-checkbox"><input id="v-0-19" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false" aria-labelledby="v-0-20"><label id="v-0-20" for="v-0-19" class="o-checkbox__label">Manually approve new followers</label></div>
+    </fieldset>
+    <fieldset>
+      <legend class="mt-2"><span class="field-label !mb-0">Permission</span></legend>
+      <div data-oruga="checkbox" class="o-checkbox o-checkbox--checked"><input id="v-0-21" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="true" aria-labelledby="v-0-22"><label id="v-0-22" for="v-0-21" class="o-checkbox__label">Members can see events' participants</label></div>
+    </fieldset><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary mt-3"><span class="o-button__wrapper"><!----><span class="o-button__label">Create my group</span>
+      <!----></span>
+    </button>
+  </form>
+</section>"
+`;

tests/unit/specs/views/Group/__snapshots__/GroupFollowers.spec.ts.snap

@@ -2,10 +2,106 @@
 
 exports[`GroupFollowers > Show simple 1`] = `
 "<div>
-  <!--v-if-->
+  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
   <transition-stub name="fade" appear="false" persisted="false" css="true">
     <!---->
   </transition-stub>
-  <!--v-if-->
+  <section class="container mx-auto section">
+    <h1>Group Followers (2)</h1>
+    <div data-oruga="field" class="o-field o-field--horizontal">
+      <div class="o-field__horizontal-label"><label id="v-0-0" class="o-field__label">Status</label></div>
+      <div class="o-field__horizontal-body">
+        <div data-oruga="field" class="o-field">
+          <!---->
+          <div data-oruga="switch" class="o-switch o-switch--position o-switch--rounded"><input aria-labelledby="v-0-0" id="v-0-2" type="checkbox" role="switch" data-oruga-input="switch" class="o-switch__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false"><label id="v-0-0" for="v-0-2" class="o-switch__label">Pending</label></div>
+          <!---->
+        </div>
+      </div>
+      <!---->
+    </div>
+    <div data-oruga="table" class="o-table__root">
+      <div style="display: none;"><span data-oruga="table-column" data-id="table-1">Follower <!----></span><span data-oruga="table-column" data-id="table-2">Date <!----></span><span data-oruga="table-column" data-id="table-3">Actions <!----></span></div>
+      <!---->
+      <!---->
+      <div class="o-table__wrapper">
+        <table class="o-table" aria-rowcount="3" aria-colcount="3">
+          <!---->
+          <thead>
+            <tr aria-rowindex="1">
+              <!---->
+              <!---->
+              <th class="o-table__th" draggable="false" aria-colindex="1"><span class="o-table__th__label">Follower</span>
+                <!---->
+              </th>
+              <th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Date</span>
+                <!---->
+              </th>
+              <th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Actions</span>
+                <!---->
+              </th>
+              <!---->
+            </tr>
+            <!---->
+            <!---->
+          </thead>
+          <tbody>
+            <tr class="" draggable="false" aria-rowindex="2">
+              <!---->
+              <!---->
+              <td class="o-table__td" data-label="Follower">
+                <article class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
+                  <div class="">
+                    <div class=""><span>autre</span><br><span class="">@autre</span></div>
+                  </div>
+                </article>
+              </td>
+              <td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>2:57 PM</span></td>
+              <td class="o-table__td" data-label="Actions">
+                <div class="flex gap-2">
+                  <!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span><span class="o-button__label">Reject</span>
+                    <!----></span>
+                  </button>
+                </div>
+              </td>
+              <!---->
+            </tr>
+            <!---->
+            <tr class="" draggable="false" aria-rowindex="3">
+              <!---->
+              <!---->
+              <td class="o-table__td" data-label="Follower">
+                <article class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
+                  <div class="">
+                    <div class=""><span>Test</span><br><span class="">@test</span></div>
+                  </div>
+                </article>
+              </td>
+              <td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>12:04 PM</span></td>
+              <td class="o-table__td" data-label="Actions">
+                <div class="flex gap-2">
+                  <!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-close mdi-24px"></i></span><span class="o-button__label">Reject</span>
+                    <!----></span>
+                  </button>
+                </div>
+              </td>
+              <!---->
+            </tr>
+            <!---->
+            <!---->
+          </tbody>
+          <!---->
+        </table>
+        <transition-stub name="fade" appear="false" persisted="false" css="true">
+          <!---->
+        </transition-stub>
+      </div>
+      <div class="o-table__pagination">
+        <div></div>
+        <div>
+          <nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-2 / 2</small></nav>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>"
 `;

tests/unit/specs/views/Group/__snapshots__/GroupMembers.spec.ts.snap

@@ -2,10 +2,164 @@
 
 exports[`GroupMembers > Show simple 1`] = `
 "<div>
-  <!--v-if-->
+  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
   <transition-stub name="fade" appear="false" persisted="false" css="true">
     <!---->
   </transition-stub>
-  <!--v-if-->
+  <section class="container mx-auto section">
+    <h1>Group Members (2)</h1>
+    <form>
+      <div data-oruga="field" class="o-field o-field--horizontal" custom-class="add-relay">
+        <div class="o-field__horizontal-label"><label id="v-0-0" for="new-member-field" class="o-field__label">Invite a new member</label></div>
+        <div class="o-field__horizontal-body">
+          <div data-oruga="field" class="o-field">
+            <!---->
+            <div class="o-field__body">
+              <div class="o-field">
+                <div data-oruga="field" class="o-field" expanded="" size="large">
+                  <!---->
+                  <div class="o-field__body">
+                    <div class="o-field o-field--grouped">
+                      <p class="control">
+                      <div data-oruga="input" class="o-input">
+                        <!----><input aria-labelledby="v-0-6" id="new-member-field" type="text" data-oruga-input="text" class="o-input__input o-input__input--placeholder" autocomplete="off" placeholder="Ex: someone@mobilizon.org">
+                        <!---->
+                        <!---->
+                      </div>
+                      </p>
+                      <p class="control"><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Invite member</span>
+                          <!----></span>
+                        </button></p>
+                    </div>
+                  </div>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <!---->
+          </div>
+        </div>
+        <!---->
+      </div>
+    </form>
+    <div data-oruga="field" class="o-field o-field--horizontal my-2">
+      <div class="o-field__horizontal-label"><label id="v-0-4" for="group-members-status-filter" class="o-field__label">Status</label></div>
+      <div class="o-field__horizontal-body">
+        <div data-oruga="field" class="o-field">
+          <!---->
+          <div data-oruga="select" class="o-select">
+            <!----><select aria-labelledby="v-0-4" id="group-members-status-filter" data-oruga-input="select" class="o-select__input o-select__input--placeholder o-select__input--arrowed" autocomplete="off">
+              <!---->
+              <option>Everything</option>
+              <option value="ADMINISTRATOR">Administrator</option>
+              <option value="MODERATOR">Moderator</option>
+              <option value="MEMBER">Member</option>
+              <option value="INVITED">Invited</option>
+              <option value="NOT_APPROVED">Not approved</option>
+              <option value="REJECTED">Rejected</option>
+            </select>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+      <!---->
+    </div>
+    <div data-oruga="table" class="o-table__root">
+      <div style="display: none;"><span data-oruga="table-column" data-id="table-1">Member <!----></span><span data-oruga="table-column" data-id="table-2">Role <!----></span><span data-oruga="table-column" data-id="table-3">Date <!----></span><span data-oruga="table-column" data-id="table-4">Actions <!----></span></div>
+      <!---->
+      <!---->
+      <div class="o-table__wrapper">
+        <table class="o-table" aria-rowcount="3" aria-colcount="4">
+          <!---->
+          <thead>
+            <tr aria-rowindex="1">
+              <!---->
+              <!---->
+              <th class="o-table__th" draggable="false" aria-colindex="1"><span class="o-table__th__label">Member</span>
+                <!---->
+              </th>
+              <th class="o-table__th" draggable="false" aria-colindex="2"><span class="o-table__th__label">Role</span>
+                <!---->
+              </th>
+              <th class="o-table__th" draggable="false" aria-colindex="3"><span class="o-table__th__label">Date</span>
+                <!---->
+              </th>
+              <th class="o-table__th" draggable="false" aria-colindex="4"><span class="o-table__th__label">Actions</span>
+                <!---->
+              </th>
+              <!---->
+            </tr>
+            <!---->
+            <!---->
+          </thead>
+          <tbody>
+            <tr class="" draggable="false" aria-rowindex="2">
+              <!---->
+              <!---->
+              <td class="o-table__td" data-label="Member">
+                <article class="flex"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
+                  <div class="">
+                    <div class="text-start"><span>autre</span><br><span class="">@autre</span></div>
+                  </div>
+                </article>
+              </td>
+              <td class="o-table__td" data-label="Role"><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Member</span></td>
+              <td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>2:57 PM</span></td>
+              <td class="o-table__td" data-label="Actions">
+                <div class="flex flex-wrap gap-2">
+                  <!--v-if-->
+                  <!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-chevron-double-up mdi-24px"></i></span><span class="o-button__label">Promote</span>
+                    <!----></span>
+                  </button>
+                  <!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-exit-to-app mdi-24px"></i></span><span class="o-button__label">Remove</span>
+                    <!----></span>
+                  </button>
+                </div>
+              </td>
+              <!---->
+            </tr>
+            <!---->
+            <tr class="" draggable="false" aria-rowindex="3">
+              <!---->
+              <!---->
+              <td class="o-table__td" data-label="Member">
+                <article class="flex"><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span>
+                  <div class="">
+                    <div class="text-start"><span>Test</span><br><span class="">@test</span></div>
+                  </div>
+                </article>
+              </td>
+              <td class="o-table__td" data-label="Role"><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Administrator</span></td>
+              <td class="o-table__td" data-label="Date"><span class="has-text-centered">Wednesday, November 12, 2025<br>12:04 PM</span></td>
+              <td class="o-table__td" data-label="Actions">
+                <div class="flex flex-wrap gap-2">
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-chevron-double-down mdi-24px"></i></span><span class="o-button__label">Demote</span>
+                    <!----></span>
+                  </button>
+                  <!--v-if-->
+                </div>
+              </td>
+              <!---->
+            </tr>
+            <!---->
+            <!---->
+          </tbody>
+          <!---->
+        </table>
+        <transition-stub name="fade" appear="false" persisted="false" css="true">
+          <!---->
+        </transition-stub>
+      </div>
+      <div class="o-table__pagination">
+        <div></div>
+        <div>
+          <nav data-oruga="pagination" class="o-pagination o-pagination--right o-pagination--right o-pagination--small o-pagination--simple"><button type="button" role="button" disabled="" class="o-pagination__button-previous o-pagination__button--disabled o-pagination__button" aria-label="Previous page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-left mdi-24px"></i></span></button><button type="button" role="button" disabled="" class="o-pagination__button-next o-pagination__button--disabled o-pagination__button" aria-label="Next page" aria-current="false"><span data-oruga="icon" class="o-icon" aria-hidden="true"><i class="mdi mdi-chevron-right mdi-24px"></i></span></button><small class="o-pagination__info">1-2 / 2</small></nav>
+        </div>
+      </div>
+    </div>
+  </section>
 </div>"
 `;

tests/unit/specs/views/Group/__snapshots__/GroupSettings.spec.ts.snap

@@ -6,14 +6,162 @@ exports[`GroupSettings > Show simple 1`] = `
   <transition-stub name="fade" appear="false" persisted="false" css="true">
     <!---->
   </transition-stub>
-  <transition-stub name="fade" appear="false" persisted="false" css="true">
+  <section class="container mx-auto mb-6">
-    <article data-oruga="notification" class="o-notification o-notification--top">
+    <form>
-      <!---->
+      <div data-oruga="field" class="o-field o-field--filled"><label id="v-0-0" for="group-settings-name" class="o-field__label">Group name</label>
-      <div class="o-notification__wrapper">
+        <div data-oruga="input" class="o-input o-input--expanded">
+          <!----><input aria-labelledby="v-0-0" id="group-settings-name" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off">
+          <!---->
+          <!---->
+        </div>
         <!---->
-        <div class="o-notification__content">You are not an administrator for this group.</div>
       </div>
-    </article>
+      <div data-oruga="field" class="o-field"><label id="v-0-2" class="o-field__label">Group short description</label>
-  </transition-stub>
+        <!---->
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-4" class="o-field__label">Avatar</label>
+        <div><label data-oruga="upload" class="o-upload !flex">
+            <div class="o-upload__draggable" role="button" tabindex="0">
+              <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Avatar</span></span>
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div><input aria-labelledby="v-0-4" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+          </label></div>
+        <!--v-if-->
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-6" class="o-field__label">Banner</label>
+        <div><label data-oruga="upload" class="o-upload !flex">
+            <div class="o-upload__draggable" role="button" tabindex="0">
+              <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Banner</span></span>
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div><input aria-labelledby="v-0-6" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+          </label></div>
+        <!--v-if-->
+        <!---->
+      </div>
+      <p class="label">Group visibility</p>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-8" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="true" aria-labelledby="v-0-9" value="PUBLIC"><label id="v-0-9" for="v-0-8" class="o-radio__label">Visible everywhere on the web<br><small>The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page.</small></label></div>
+      </div>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio"><input id="v-0-10" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="false" aria-labelledby="v-0-11" value="UNLISTED"><label id="v-0-11" for="v-0-10" class="o-radio__label">Only accessible through link<br><small>You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines.</small></label></div>
+        <p class="pl-6 flex items-center gap-2"><code>https://mobilizon.test/@example</code>
+          <!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary" native-type="button"><span class="o-button__wrapper"><!----><!----><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-right"><i class="mdi mdi-content-paste mdi-24px"></i></span></span></button>
+        </p>
+      </div>
+      <p class="label">New members</p>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio"><input id="v-0-12" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-13" value="OPEN"><label id="v-0-13" for="v-0-12" class="o-radio__label">Anyone can join freely<br><small>Anyone wanting to be a member from your group will be able to from your group page.</small></label></div>
+      </div>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-14" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="true" aria-labelledby="v-0-15" value="MODERATED"><label id="v-0-15" for="v-0-14" class="o-radio__label">Moderate new members<br><small>Anyone can request being a member, but an administrator needs to approve the membership.</small></label></div>
+      </div>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio"><input id="v-0-16" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-17" value="INVITE_ONLY"><label id="v-0-17" for="v-0-16" class="o-radio__label">Manually invite new members<br><small>The only way for your group to get new members is if an admininistrator invites them.</small></label></div>
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-18" class="o-field__label" for="v-0-20">Followers</label>
+        <div data-oruga="checkbox" class="o-checkbox o-checkbox--checked"><input aria-labelledby="v-0-18" aria-describedby="v-0-19" id="v-0-20" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="true"><label id="v-0-18" for="v-0-20" class="o-checkbox__label">Manually approve new followers</label></div>
+        <p id="v-0-19" class="o-field__message">Followers will receive new public events and posts.</p>
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-21" class="o-field__label" for="v-0-23">Permission</label>
+        <div data-oruga="checkbox" class="o-checkbox"><input aria-labelledby="v-0-21" id="v-0-23" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false"><label id="v-0-21" for="v-0-23" class="o-checkbox__label">Members can see events' participants</label></div>
+        <!---->
+      </div>
+      <!---->
+      <div class="flex flex-wrap gap-2 my-2"><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Update group</span>
+          <!----></span>
+        </button><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><!----><span class="o-button__label">Delete group</span>
+          <!----></span>
+        </button></div>
+    </form>
+  </section>
+</div>"
+`;
+
+exports[`GroupSettings > Show simple 2`] = `
+"<div>
+  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <transition-stub name="fade" appear="false" persisted="false" css="true">
+    <!---->
+  </transition-stub>
+  <section class="container mx-auto mb-6">
+    <form>
+      <div data-oruga="field" class="o-field o-field--filled"><label id="v-0-0" for="group-settings-name" class="o-field__label">Group name</label>
+        <div data-oruga="input" class="o-input o-input--expanded">
+          <!----><input aria-labelledby="v-0-0" id="group-settings-name" type="text" data-oruga-input="text" class="o-input__input" autocomplete="off">
+          <!---->
+          <!---->
+        </div>
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-2" class="o-field__label">Group short description</label>
+        <!---->
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-4" class="o-field__label">Avatar</label>
+        <div><label data-oruga="upload" class="o-upload !flex">
+            <div class="o-upload__draggable" role="button" tabindex="0">
+              <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Avatar</span></span>
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div><input aria-labelledby="v-0-4" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+          </label></div>
+        <!--v-if-->
+        <!---->
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-6" class="o-field__label">Banner</label>
+        <div><label data-oruga="upload" class="o-upload !flex">
+            <div class="o-upload__draggable" role="button" tabindex="0">
+              <div class="w-100 text-center p-4 rounded-xl border-dashed border-2 border-gray-600"><span class="mx-auto flex w-fit"><span aria-hidden="true" class="material-design-icon upload-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"><!--v-if--></path></svg></span><span class="capitalize">Click to upload Banner</span></span>
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div><input aria-labelledby="v-0-6" type="file" data-oruga-input="file" accept="image/gif,image/png,image/jpeg,image/webp">
+          </label></div>
+        <!--v-if-->
+        <!---->
+      </div>
+      <p class="label">Group visibility</p>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio"><input id="v-0-8" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="false" aria-labelledby="v-0-9" value="PUBLIC"><label id="v-0-9" for="v-0-8" class="o-radio__label">Visible everywhere on the web<br><small>The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page.</small></label></div>
+      </div>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-10" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupVisibility" autocomplete="off" aria-checked="true" aria-labelledby="v-0-11" value="UNLISTED"><label id="v-0-11" for="v-0-10" class="o-radio__label">Only accessible through link<br><small>You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines.</small></label></div>
+        <p class="pl-6 flex items-center gap-2"><code>https://mobilizon.test/@example</code>
+          <!--v-if--><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary" native-type="button"><span class="o-button__wrapper"><!----><!----><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-right"><i class="mdi mdi-content-paste mdi-24px"></i></span></span></button>
+        </p>
+      </div>
+      <p class="label">New members</p>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio o-radio--checked"><input id="v-0-12" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="true" aria-labelledby="v-0-13" value="OPEN"><label id="v-0-13" for="v-0-12" class="o-radio__label">Anyone can join freely<br><small>Anyone wanting to be a member from your group will be able to from your group page.</small></label></div>
+      </div>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio"><input id="v-0-14" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-15" value="MODERATED"><label id="v-0-15" for="v-0-14" class="o-radio__label">Moderate new members<br><small>Anyone can request being a member, but an administrator needs to approve the membership.</small></label></div>
+      </div>
+      <div class="field">
+        <div data-oruga="radio" class="o-radio"><input id="v-0-16" type="radio" data-oruga-input="radio" class="o-radio__input" name="groupOpenness" autocomplete="off" aria-checked="false" aria-labelledby="v-0-17" value="INVITE_ONLY"><label id="v-0-17" for="v-0-16" class="o-radio__label">Manually invite new members<br><small>The only way for your group to get new members is if an admininistrator invites them.</small></label></div>
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-18" class="o-field__label" for="v-0-20">Followers</label>
+        <div data-oruga="checkbox" class="o-checkbox o-checkbox--checked"><input aria-labelledby="v-0-18" aria-describedby="v-0-19" id="v-0-20" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="true"><label id="v-0-18" for="v-0-20" class="o-checkbox__label">Manually approve new followers</label></div>
+        <p id="v-0-19" class="o-field__message">Followers will receive new public events and posts.</p>
+      </div>
+      <div data-oruga="field" class="o-field"><label id="v-0-21" class="o-field__label" for="v-0-23">Permission</label>
+        <div data-oruga="checkbox" class="o-checkbox"><input aria-labelledby="v-0-21" id="v-0-23" type="checkbox" data-oruga-input="checkbox" class="o-checkbox__input" true-value="true" false-value="false" autocomplete="off" aria-checked="false"><label id="v-0-21" for="v-0-23" class="o-checkbox__label">Members can see events' participants</label></div>
+        <!---->
+      </div>
+      <!---->
+      <div class="flex flex-wrap gap-2 my-2"><button data-oruga="button" type="submit" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Update group</span>
+          <!----></span>
+        </button><button data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--danger"><span class="o-button__wrapper"><!----><span class="o-button__label">Delete group</span>
+          <!----></span>
+        </button></div>
+    </form>
+  </section>
 </div>"
 `;

tests/unit/specs/views/Group/__snapshots__/GroupView.spec.ts.snap

@@ -3,23 +3,265 @@
 exports[`GroupView > Show simple 1`] = `
 "<div data-v-63850a71="" class="container mx-auto is-widescreen">
   <!--v-if-->
-  <transition-stub data-v-63850a71="" name="fade" appear="false" persisted="false" css="true">
+  <!--v-if-->
-    <article data-oruga="notification" class="o-notification o-notification--danger o-notification--top">
+  <div data-v-63850a71="" class="header flex flex-col">
-      <!---->
+    <breadcrumbs-nav data-v-63850a71="" links="[object Object],[object Object]"></breadcrumbs-nav>
-      <div class="o-notification__wrapper">
+    <header data-v-63850a71="" class="block-container presentation">
-        <!---->
+      <div data-v-63850a71="" class="banner-container">
-        <div class="o-notification__content">No group found</div>
+        <div data-v-63850a71="" class="flex-1">
+          <div class="h-full w-full max-w-100 min-h-[10rem]">
+            <!-- Show the placeholder as background --><canvas width="32" height="32" class="transition-opacity duration-500 opacity-100"></canvas><!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="/img/mobilizon_default_card.png" loading="lazy">
+          </div>
+        </div>
       </div>
-    </article>
+      <div data-v-63850a71="" class="header flex flex-col">
-  </transition-stub>
+        <div data-v-63850a71="" class="flex self-center h-0 mt-4 items-end"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon account-group-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="128" height="128" viewBox="0 0 24 24"><path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"><!--v-if--></path></svg></span></div>
-  <!--v-if-->
+        <div data-v-63850a71="" class="title-container flex flex-1 flex-col text-center">
-  <!--v-if-->
+          <h1 data-v-63850a71="" class="m-1">ssss</h1><span data-v-63850a71="" dir="ltr" class="m-1">@example</span>
-  <!--v-if-->
+        </div>
+        <div data-v-63850a71="" class="flex flex-wrap justify-center flex-col md:flex-row">
+          <div data-v-63850a71="" class="flex flex-wrap gap-3 justify-center">
+            <!--v-if-->
+            <!--v-if-->
+            <div data-v-63850a71="" data-oruga="dropdown" class="o-dropdown o-dropdown--position-bottom-left" aria-role="list">
+              <div class="o-dropdown__trigger" aria-haspopup="menu" aria-disabled="false" aria-controls="v-0-0"><button data-v-63850a71="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-rss mdi-24px"></i></span><span class="o-button__label">Follow</span><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-right"><i class="mdi mdi-menu-down mdi-24px"></i></span></span></button></div>
+              <!--teleport start-->
+              <!---->
+              <transition-stub name="fade" appear="false" persisted="false" css="true">
+                <div id="v-0-0" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
+                  <div data-v-63850a71="" id="v-0-0-1" data-oruga="dropdown-item" data-id="dropdown-1" class="o-dropdown__item o-dropdown__item--clickable p-0" role="menuitem" tabindex="-1" aria-disabled="false" aria-role="listitem" custom="" focusable="false"><button data-v-63850a71="" class="flex gap-1 text-start py-4 px-2 w-full"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon rss-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"><!--v-if--></path></svg></span>
+                      <div data-v-63850a71="" class="pl-2">
+                        <h3 data-v-63850a71="" class="font-medium text-lg">Follow</h3>
+                        <p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm">Get informed of the upcoming public events</p>
+                        <p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm italic">Follow requests will be approved by a group moderator</p>
+                        <!--v-if-->
+                      </div>
+                    </button></div>
+                  <div data-v-63850a71="" id="v-0-0-2" data-oruga="dropdown-item" data-id="dropdown-2" class="o-dropdown__item o-dropdown__item--clickable p-0 border-t border-solid" role="menuitem" tabindex="-1" aria-disabled="false" aria-role="listitem" custom="" focusable="false"><button data-v-63850a71="" class="flex gap-1 text-start py-4 px-2 w-full"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon account-multiple-plus-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 17V19H7V17S7 13 13 13 19 17 19 17M16 8A3 3 0 1 0 13 11A3 3 0 0 0 16 8M19.2 13.06A5.6 5.6 0 0 1 21 17V19H24V17S24 13.55 19.2 13.06M18 5A2.91 2.91 0 0 0 17.11 5.14A5 5 0 0 1 17.11 10.86A2.91 2.91 0 0 0 18 11A3 3 0 0 0 18 5M8 10H5V7H3V10H0V12H3V15H5V12H8Z"><!--v-if--></path></svg></span>
+                      <div data-v-63850a71="" class="pl-2">
+                        <h3 data-v-63850a71="" class="font-medium text-lg">Join</h3>
+                        <div data-v-63850a71="">
+                          <p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm">Become part of the community and start organizing events</p>
+                          <!--v-if-->
+                          <p data-v-63850a71="" class="whitespace-normal md:whitespace-nowrap text-sm italic">Membership requests will be approved by a group moderator</p>
+                          <!--v-if-->
+                        </div>
+                      </div>
+                    </button></div>
+                </div>
+              </transition-stub>
+              <!--teleport end-->
+            </div>
+            <!--v-if-->
+            <!--v-if-->
+            <!--v-if-->
+            <!--v-if--><a data-v-63850a71="" href="/conversations?newMessage=true&amp;groupMentions=example" class="o-button o-button--outlined" data-oruga="button" role="button" tabindex="0"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-email mdi-24px"></i></span><span class="o-button__label">Contact</span>
+              <!----></span>
+            </a><button data-v-63850a71="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-share mdi-24px"></i></span><span class="o-button__label">Share</span>
+              <!----></span>
+            </button>
+            <div data-v-63850a71="" data-oruga="tooltip" class="o-tooltip">
+              <div class="o-tooltip__trigger" aria-haspopup="true" aria-describedby="v-0-3"></div>
+              <!--teleport start-->
+              <transition-stub name="fade" appear="false" persisted="false" css="true">
+                <div id="v-0-3" class="o-tooltip__content o-tooltip__content--right o-tooltip__content--success" role="tooltip" style="display: none;"><span class="o-tooltip__arrow o-tooltip__arrow--right o-tooltip__arrow--success"></span>URL copied to clipboard</div>
+              </transition-stub>
+              <!--teleport end-->
+            </div>
+            <div data-v-63850a71="" data-oruga="dropdown" class="o-dropdown o-dropdown--position-bottom-left" aria-role="list">
+              <div class="o-dropdown__trigger" aria-haspopup="menu" aria-disabled="false" aria-controls="v-0-4"><button data-v-63850a71="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined" aria-label="Other actions"><span class="o-button__wrapper"><span data-oruga="icon" class="o-icon o-button__icon o-button__icon-left"><i class="mdi mdi-dots-horizontal mdi-24px"></i></span>
+                  <!---->
+                  <!----></span>
+                </button></div>
+              <!--teleport start-->
+              <!---->
+              <transition-stub name="fade" appear="false" persisted="false" css="true">
+                <div id="v-0-4" tabindex="-1" class="o-dropdown__menu o-dropdown__menu--bottom-left" role="menu" aria-hidden="true" style="display: none;">
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                  <div data-v-63850a71="" id="v-0-4-1" data-oruga="dropdown-item" data-id="dropdown-1" class="o-dropdown__item o-dropdown__item--clickable" role="menuitem" tabindex="-1" aria-disabled="false" has-link="" aria-role="menuitem"><a data-v-63850a71="" href="http://localhost:3000/@my-group/feed/atom" title="Atom feed for events and posts" class="inline-flex gap-1"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon rss-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"><!--v-if--></path></svg></span> RSS/Atom Feed</a></div>
+                  <div data-v-63850a71="" id="v-0-4-2" data-oruga="dropdown-item" data-id="dropdown-2" class="o-dropdown__item o-dropdown__item--clickable" role="menuitem" tabindex="-1" aria-disabled="false" has-link="" aria-role="menuitem"><a data-v-63850a71="" href="http://localhost:3000/@my-group/feed/ics" title="ICS feed for events" class="inline-flex gap-1"><span data-v-63850a71="" aria-hidden="true" class="material-design-icon calendar-sync-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18,11V12.5C21.19,12.5 23.09,16.05 21.33,18.71L20.24,17.62C21.06,15.96 19.85,14 18,14V15.5L15.75,13.25L18,11M18,22V20.5C14.81,20.5 12.91,16.95 14.67,14.29L15.76,15.38C14.94,17.04 16.15,19 18,19V17.5L20.25,19.75L18,22M19,3H18V1H16V3H8V1H6V3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H14C13.36,20.45 12.86,19.77 12.5,19H5V8H19V10.59C19.71,10.7 20.39,10.94 21,11.31V5A2,2 0 0,0 19,3Z"><!--v-if--></path></svg></span> ICS/WebCal Feed</a></div>
+                  <hr data-v-63850a71="" role="presentation" class="dropdown-divider">
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
+              </transition-stub>
+              <!--teleport end-->
+            </div>
+          </div>
+        </div>
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </header>
+  </div>
+  <div data-v-63850a71="" class="grid grid-cols-1 md:grid-cols-3 gap-2 mb-2">
+    <!-- Public thing: Members -->
+    <section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
+      <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+        <div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-account-group 36"></i></span>
+          <h2 class="text-2xl font-medium mt-0">Members</h2>
+        </div>
+        <!--v-if-->
+      </div>
+      <div class="flex-1 min-h-40">
+        <div data-v-63850a71="" class="flex flex-col justify-center h-full">
+          <!--v-if-->
+          <div data-v-63850a71="" class="">
+            <h2 data-v-63850a71="" class="text-center">1 members</h2>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-wrap justify-end p-2"></div>
+    </section><!-- Public thing: About -->
+    <section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
+      <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+        <div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-information 36"></i></span>
+          <h2 class="text-2xl font-medium mt-0">About</h2>
+        </div>
+        <!--v-if-->
+      </div>
+      <div class="flex-1 min-h-40">
+        <div data-v-63850a71="" class="flex flex-col items-center mt-20 mb-10 text-center" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-information 48"></i></span>
+          <h2 class="mb-3">
+            <!-- @slot Mandatory title -->No about content yet
+          </h2>
+          <p class="" style="display: none;">
+            <!-- @slot Optional description -->
+          </p>
+        </div>
+      </div>
+      <div class="flex flex-wrap justify-end p-2"></div>
+    </section><!-- Public thing: Location -->
+    <section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
+      <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+        <div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-earth 36"></i></span>
+          <h2 class="text-2xl font-medium mt-0">Location</h2>
+        </div>
+        <!--v-if-->
+      </div>
+      <div class="flex-1 min-h-40">
+        <div data-v-63850a71="" class="flex flex-col items-center mt-20 mb-10 text-center" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-earth 48"></i></span>
+          <h2 class="mb-3">
+            <!-- @slot Mandatory title -->No location yet
+          </h2>
+          <p class="" style="display: none;">
+            <!-- @slot Optional description -->
+          </p>
+        </div>
+      </div>
+      <div class="flex flex-wrap justify-end p-2"></div>
+    </section>
+  </div>
+  <div data-v-63850a71="">
+    <div data-v-63850a71="" class="grid grid-cols-1 gap-2 mb-2 md:grid-cols-2">
+      <!-- Public thing: Long Events -->
+      <!--v-if-->
+      <!-- Public thing: Events -->
+      <section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
+        <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+          <div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-calendar 36"></i></span>
+            <h2 class="text-2xl font-medium mt-0">Events</h2>
+          </div><a href="/@example/events" class="self-center">View all</a>
+        </div>
+        <div class="flex-1 min-h-40">
+          <div class="flex flex-col items-center mt-20 mb-10" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-calendar 48"></i></span>
+            <h2 class="mb-3">
+              <!-- @slot Mandatory title -->No public upcoming events
+            </h2>
+            <p class="" style="display: none;">
+              <!-- @slot Optional description -->
+            </p>
+          </div><!-- <o-skeleton animated v-else></o-skeleton> -->
+        </div>
+        <div class="flex flex-wrap justify-end p-2"><a href="/@example/events?showPassedEvents=true" class="o-button o-button--text button" data-oruga="button" role="button" tabindex="0"><span class="o-button__wrapper"><!----><span class="o-button__label">Past events</span>
+            <!----></span>
+          </a>
+          <!--v-if-->
+        </div>
+      </section><!-- Public thing: Posts -->
+      <section data-v-63850a71="" class="flex flex-col border-2 border-yellow-1 rounded-lg">
+        <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+          <div class="flex flex-1 gap-1"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-bullhorn 36"></i></span>
+            <h2 class="text-2xl font-medium mt-0">Announcements</h2>
+          </div><a href="/@example/p" class="self-center">View all</a>
+        </div>
+        <div class="flex-1 min-h-40">
+          <div class="p-2">
+            <div class="flex flex-col items-center mt-20 mb-10" role="note"><span data-oruga="icon" class="o-icon"><i class="mdi mdi-bullhorn 48"></i></span>
+              <h2 class="mb-3">
+                <!-- @slot Mandatory title -->No posts yet
+              </h2>
+              <p class="" style="display: none;">
+                <!-- @slot Optional description -->
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-wrap justify-end p-2"></div>
+      </section>
+    </div>
+    <div data-v-63850a71="" class="grid grid-cols-1 gap-2 mb-2 md:grid-cols-2">
+      <!-- Private thing: Group discussions -->
+      <!--v-if-->
+      <!-- Private thing: Resources -->
+      <!--v-if-->
+    </div>
+  </div>
   <div data-v-63850a71="" class="my-2">
     <!--v-if-->
   </div>
-  <!--v-if-->
+  <div data-v-63850a71="" class="public-container flex flex-col">
-  <!--v-if-->
+    <!--v-if-->
-  <!--v-if-->
+  </div>
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-modal="false" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <div data-v-e0cceef3="" data-v-63850a71="" class="p-2">
+          <header data-v-e0cceef3="" class="mb-3">
+            <h2 data-v-e0cceef3="" class="text-2xl">Report this group</h2>
+          </header>
+          <section data-v-e0cceef3="">
+            <div data-v-e0cceef3="" class="flex gap-1 flex-row mb-3 bg-mbz-yellow dark:text-black p-3 rounded items-center"><span data-v-e0cceef3="" data-oruga="icon" class="o-icon o-icon--warning hidden md:block flex-1"><i class="mdi mdi-alert 48"></i></span>
+              <p data-v-e0cceef3="">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
+            </div>
+            <div data-v-e0cceef3="">
+              <!--v-if-->
+              <div data-v-e0cceef3="" data-oruga="field" class="o-field"><label id="v-0-7" for="additional-comments" class="o-field__label">Additional comments</label>
+                <div data-v-e0cceef3="" data-oruga="input" class="o-input o-input--expanded o-input--textarea">
+                  <!----><textarea aria-labelledby="v-0-7" autofocus="" id="additional-comments" data-oruga-input="textarea" class="o-input__input o-input__input--placeholder"></textarea>
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+              </div>
+              <!--v-if-->
+            </div>
+          </section>
+          <footer data-v-e0cceef3="" class="flex gap-2 py-3"><button data-v-e0cceef3="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--outlined"><span class="o-button__wrapper"><!----><span class="o-button__label">Cancel</span>
+              <!----></span>
+            </button><button data-v-e0cceef3="" data-oruga="button" type="button" role="button" tabindex="0" class="o-button o-button--primary"><span class="o-button__wrapper"><!----><span class="o-button__label">Send the report</span>
+              <!----></span>
+            </button></footer>
+        </div><button type="button" class="o-modal__close" aria-label="Close" data-oruga="close" style="display: none;"><span data-oruga="icon" class="o-icon o-icon--medium"><i class="mdi mdi-close mdi-36px"></i></span></button>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-modal="false" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <!----><button type="button" class="o-modal__close" aria-label="Close" data-oruga="close" style="display: none;"><span data-oruga="icon" class="o-icon o-icon--medium"><i class="mdi mdi-close mdi-36px"></i></span></button>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
 </div>"
 `;