From 533ecbdbba6183b56829096206f605451ef4c4ed Mon Sep 17 00:00:00 2001
From: Laurent GAY <l.gay@sd-libre.fr>
Date: Wed, 11 Jun 2025 18:49:45 +0200
Subject: [PATCH] correct and complete unit tests in Front-End

---
 .../Discussion/DiscussionListItem.story.vue   |   2 +-
 tests/unit/setup.ts                           |  11 +
 tests/unit/specs/common.ts                    |   4 +
 .../__snapshots__/CommentTree.spec.ts.snap    |  60 ++--
 .../__snapshots__/GroupSection.spec.ts.snap   |  28 +-
 .../ParticipationSection.spec.ts              |  11 +-
 .../ParticipationWithoutAccount.spec.ts.snap  |  99 ++++---
 .../components/Post/PostListItem.spec.ts      |  12 +-
 .../__snapshots__/PostListItem.spec.ts.snap   |  28 +-
 .../components/Report/ReportModal.spec.ts     |   3 +-
 .../__snapshots__/ReportModal.spec.ts.snap    |  34 ++-
 .../components/User/PasswordReset.spec.ts     |   6 +-
 .../__snapshots__/PasswordReset.spec.ts.snap  |  55 ----
 .../unit/specs/components/User/login.spec.ts  |  23 +-
 .../__snapshots__/navbar.spec.ts.snap         |  26 +-
 .../components/stories/ActorCardStory.spec.ts |  15 +
 .../stories/ActorInlineStory.spec.ts          |  15 +
 .../stories/AddressInfoStory.spec.ts          |  15 +
 .../stories/AuthProvidersStory.spec.ts        |  15 +
 .../stories/CategoriesPreviewStory.spec.ts    |  19 ++
 .../stories/CategoryCardStory.spec.ts         |  16 ++
 .../stories/DateCalendarIconStory.spec.ts     |  15 +
 .../stories/DiscussionListItemStory.spec.ts   |  15 +
 .../components/stories/EventCardStory.spec.ts |  25 ++
 .../stories/EventListViewCardStory.spec.ts    |  15 +
 .../components/stories/GroupCardStory.spec.ts |  15 +
 .../stories/GroupMemberCardStory.spec.ts      |  15 +
 .../stories/InlineAddressStory.spec.ts        |  15 +
 .../stories/InstanceContactLinkStory.spec.ts  |  15 +
 .../stories/MaterialIconStory.spec.ts         |  15 +
 .../MobilizonPresentationStory.spec.ts        |  15 +
 .../stories/PopoverActorCardStory.spec.ts     |  15 +
 .../stories/PostListItemStory.spec.ts         |  25 ++
 .../stories/ProfileOnboardingStory.spec.ts    |  15 +
 .../stories/ShareEventModalStory.spec.ts      |  15 +
 .../stories/SharePostModalStory.spec.ts       |  15 +
 .../stories/SkeletonEventResultStory.spec.ts  |  15 +
 .../components/stories/TagInputStory.spec.ts  |  15 +
 .../stories/UnloggedIntroductionStory.spec.ts |  15 +
 .../__snapshots__/ActorCardStory.spec.ts.snap | 110 ++++++++
 .../ActorInlineStory.spec.ts.snap             |  26 ++
 .../AddressInfoStory.spec.ts.snap             |  20 ++
 .../AuthProvidersStory.spec.ts.snap           |  14 +
 .../CategoriesPreviewStory.spec.ts.snap       |  11 +
 .../CategoryCardStory.spec.ts.snap            |  33 +++
 .../DateCalendarIconStory.spec.ts.snap        |  18 ++
 .../DiscussionCommentStory.spec.ts.snap       |  87 ++++++
 .../DiscussionListItemStory.spec.ts.snap      |  28 ++
 .../__snapshots__/EventCardStory.spec.ts.snap | 257 ++++++++++++++++++
 .../EventListViewCardStory.spec.ts.snap       |  57 ++++
 .../__snapshots__/GroupCardStory.spec.ts.snap |  86 ++++++
 .../GroupMemberCardStory.spec.ts.snap         | 107 ++++++++
 .../InlineAddressStory.spec.ts.snap           |  12 +
 .../InstanceContactLinkStory.spec.ts.snap     |  18 ++
 .../MaterialIconStory.spec.ts.snap            |  15 +
 .../MobilizonPresentationStory.spec.ts.snap   |  27 ++
 .../PopoverActorCardStory.spec.ts.snap        |  24 ++
 .../PostListItemStory.spec.ts.snap            |  60 ++++
 .../ProfileOnboardingStory.spec.ts.snap       |  19 ++
 .../ShareEventModalStory.spec.ts.snap         |  99 +++++++
 .../SharePostModalStory.spec.ts.snap          |  44 +++
 .../SkeletonEventResultStory.spec.ts.snap     |  64 +++++
 .../__snapshots__/TagInputStory.spec.ts.snap  |  14 +
 .../UnloggedIntroductionStory.spec.ts.snap    |  18 ++
 tests/unit/specs/mocks/auth.ts                |  10 +
 tests/unit/specs/mocks/client.ts              |  37 +++
 vite.config.js                                |   1 +
 67 files changed, 1900 insertions(+), 203 deletions(-)
 delete mode 100644 tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/ActorCardStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/ActorInlineStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/AddressInfoStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/AuthProvidersStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/CategoriesPreviewStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/CategoryCardStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/DateCalendarIconStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/DiscussionListItemStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/EventCardStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/EventListViewCardStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/GroupCardStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/GroupMemberCardStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/InlineAddressStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/InstanceContactLinkStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/MaterialIconStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/MobilizonPresentationStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/PopoverActorCardStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/PostListItemStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/ProfileOnboardingStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/ShareEventModalStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/SharePostModalStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/SkeletonEventResultStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/TagInputStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/UnloggedIntroductionStory.spec.ts
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/ActorCardStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/ActorInlineStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/AddressInfoStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/AuthProvidersStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/CategoriesPreviewStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/CategoryCardStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/DateCalendarIconStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/DiscussionCommentStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/DiscussionListItemStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/EventCardStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/EventListViewCardStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/GroupCardStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/GroupMemberCardStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/InlineAddressStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/InstanceContactLinkStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/MaterialIconStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/MobilizonPresentationStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/PopoverActorCardStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/PostListItemStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/ProfileOnboardingStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/ShareEventModalStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/SharePostModalStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/SkeletonEventResultStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/TagInputStory.spec.ts.snap
 create mode 100644 tests/unit/specs/components/stories/__snapshots__/UnloggedIntroductionStory.spec.ts.snap
 create mode 100644 tests/unit/specs/mocks/client.ts

diff --git a/src/components/Discussion/DiscussionListItem.story.vue b/src/components/Discussion/DiscussionListItem.story.vue
index de1ff2a66..7f075f3c2 100644
--- a/src/components/Discussion/DiscussionListItem.story.vue
+++ b/src/components/Discussion/DiscussionListItem.story.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import { IDiscussion } from "@/types/discussions";
 import { reactive } from "vue";
-import DiscussionListItem from "./DiscussionListItem.vue";
+import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
 
 const discussion = reactive<IDiscussion>({
   title: "A discussion",
diff --git a/tests/unit/setup.ts b/tests/unit/setup.ts
index 975632a63..50b9ab163 100644
--- a/tests/unit/setup.ts
+++ b/tests/unit/setup.ts
@@ -2,8 +2,19 @@ import "./specs/mocks/matchMedia";
 import { config } from "@vue/test-utils";
 import { createHead } from "@unhead/vue";
 import { i18n } from "@/utils/i18n";
+import { afterEach, beforeEach, vi } from "vitest";
 
 const head = createHead();
 
 config.global.plugins.push(head);
 config.global.plugins.push(i18n);
+
+beforeEach(() => {
+  const mokeDate = new Date(2022, 1, 2, 3, 4);
+  vi.useFakeTimers();
+  vi.setSystemTime(mokeDate);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
diff --git a/tests/unit/specs/common.ts b/tests/unit/specs/common.ts
index 4e2da5c23..4f172c0c4 100644
--- a/tests/unit/specs/common.ts
+++ b/tests/unit/specs/common.ts
@@ -18,3 +18,7 @@ export const defaultResolvers = {
     }),
   },
 };
+
+export const nullMock = {
+  data: {},
+};
diff --git a/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap b/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
index 9eacac965..901310f7d 100644
--- a/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
+++ b/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
@@ -1,67 +1,67 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CommentTree > renders a comment tree with comments 1`] = `
-"<div data-v-5d0380ab=\\"\\">
-  <form data-v-5d0380ab=\\"\\" class=\\"mt-2\\">
+"<div data-v-5d0380ab="">
+  <form data-v-5d0380ab="" class="mt-2">
     <!--v-if-->
-    <article data-v-5d0380ab=\\"\\" class=\\"flex flex-wrap items-start gap-2\\">
-      <figure data-v-5d0380ab=\\"\\" class=\\"\\">
-        <identity-picker-wrapper-stub data-v-5d0380ab=\\"\\" modelvalue=\\"[object Object]\\" inline=\\"false\\" masked=\\"false\\"></identity-picker-wrapper-stub>
+    <article data-v-5d0380ab="" class="flex flex-wrap items-start gap-2">
+      <figure data-v-5d0380ab="" class="">
+        <identity-picker-wrapper-stub data-v-5d0380ab="" modelvalue="[object Object]" inline="false" masked="false"></identity-picker-wrapper-stub>
       </figure>
-      <div data-v-5d0380ab=\\"\\" class=\\"flex-1\\">
-        <div data-v-5d0380ab=\\"\\" class=\\"flex flex-col gap-2\\">
-          <div data-v-5d0380ab=\\"\\" class=\\"editor-wrapper\\">
-            <editor-stub data-v-5d0380ab=\\"\\" currentactor=\\"[object Object]\\" mode=\\"comment\\" modelvalue=\\"\\" aria-label=\\"Comment body\\" placeholder=\\"Write a new comment\\"></editor-stub>
+      <div data-v-5d0380ab="" class="flex-1">
+        <div data-v-5d0380ab="" class="flex flex-col gap-2">
+          <div data-v-5d0380ab="" class="editor-wrapper">
+            <editor-stub data-v-5d0380ab="" currentactor="[object Object]" mode="comment" modelvalue="" aria-label="Comment body" placeholder="Write a new comment"></editor-stub>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
       </div>
-      <div data-v-5d0380ab=\\"\\" class=\\"\\">
-        <o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\"></o-button-stub>
+      <div data-v-5d0380ab="" class="">
+        <o-button-stub data-v-5d0380ab="" tag="button" variant="primary" iconleft="send" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="submit" role="button" iconboth="false"></o-button-stub>
       </div>
     </article>
   </form>
-  <transition-group-stub data-v-5d0380ab=\\"\\" tag=\\"div\\" name=\\"comment-empty-list\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"mt-2\\">
-    <transition-group-stub data-v-5d0380ab=\\"\\" name=\\"comment-list\\" tag=\\"ul\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"comment-list\\">
-      <event-comment-stub data-v-5d0380ab=\\"\\" comment=\\"[object Object]\\" event=\\"[object Object]\\" currentactor=\\"[object Object]\\" rootcomment=\\"true\\" readonly=\\"false\\" class=\\"root-comment my-2\\"></event-comment-stub>
-      <event-comment-stub data-v-5d0380ab=\\"\\" comment=\\"[object Object]\\" event=\\"[object Object]\\" currentactor=\\"[object Object]\\" rootcomment=\\"true\\" readonly=\\"false\\" class=\\"root-comment my-2\\"></event-comment-stub>
+  <transition-group-stub data-v-5d0380ab="" tag="div" name="comment-empty-list" appear="false" persisted="false" css="true" class="mt-2">
+    <transition-group-stub data-v-5d0380ab="" name="comment-list" tag="ul" appear="false" persisted="false" css="true" class="comment-list">
+      <event-comment-stub data-v-5d0380ab="" comment="[object Object]" event="[object Object]" currentactor="[object Object]" rootcomment="true" readonly="false" class="root-comment my-2"></event-comment-stub>
+      <event-comment-stub data-v-5d0380ab="" comment="[object Object]" event="[object Object]" currentactor="[object Object]" rootcomment="true" readonly="false" class="root-comment my-2"></event-comment-stub>
     </transition-group-stub>
   </transition-group-stub>
 </div>"
 `;
 
 exports[`CommentTree > renders a loading comment tree 1`] = `
-"<div data-v-5d0380ab=\\"\\">
+"<div data-v-5d0380ab="">
   <!--v-if-->
-  <p data-v-5d0380ab=\\"\\" class=\\"text-center\\">Loading comments…</p>
+  <p data-v-5d0380ab="" class="text-center">Loading comments…</p>
 </div>"
 `;
 
 exports[`CommentTree > renders an empty comment tree 1`] = `
-"<div data-v-5d0380ab=\\"\\">
-  <form data-v-5d0380ab=\\"\\" class=\\"mt-2\\">
+"<div data-v-5d0380ab="">
+  <form data-v-5d0380ab="" class="mt-2">
     <!--v-if-->
-    <article data-v-5d0380ab=\\"\\" class=\\"flex flex-wrap items-start gap-2\\">
-      <figure data-v-5d0380ab=\\"\\" class=\\"\\">
-        <identity-picker-wrapper-stub data-v-5d0380ab=\\"\\" modelvalue=\\"[object Object]\\" inline=\\"false\\" masked=\\"false\\"></identity-picker-wrapper-stub>
+    <article data-v-5d0380ab="" class="flex flex-wrap items-start gap-2">
+      <figure data-v-5d0380ab="" class="">
+        <identity-picker-wrapper-stub data-v-5d0380ab="" modelvalue="[object Object]" inline="false" masked="false"></identity-picker-wrapper-stub>
       </figure>
-      <div data-v-5d0380ab=\\"\\" class=\\"flex-1\\">
-        <div data-v-5d0380ab=\\"\\" class=\\"flex flex-col gap-2\\">
-          <div data-v-5d0380ab=\\"\\" class=\\"editor-wrapper\\">
-            <editor-stub data-v-5d0380ab=\\"\\" currentactor=\\"[object Object]\\" mode=\\"comment\\" modelvalue=\\"\\" aria-label=\\"Comment body\\" placeholder=\\"Write a new comment\\"></editor-stub>
+      <div data-v-5d0380ab="" class="flex-1">
+        <div data-v-5d0380ab="" class="flex flex-col gap-2">
+          <div data-v-5d0380ab="" class="editor-wrapper">
+            <editor-stub data-v-5d0380ab="" currentactor="[object Object]" mode="comment" modelvalue="" aria-label="Comment body" placeholder="Write a new comment"></editor-stub>
             <!--v-if-->
           </div>
           <!--v-if-->
         </div>
       </div>
-      <div data-v-5d0380ab=\\"\\" class=\\"\\">
-        <o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\"></o-button-stub>
+      <div data-v-5d0380ab="" class="">
+        <o-button-stub data-v-5d0380ab="" tag="button" variant="primary" iconleft="send" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="submit" role="button" iconboth="false"></o-button-stub>
       </div>
     </article>
   </form>
-  <transition-group-stub data-v-5d0380ab=\\"\\" tag=\\"div\\" name=\\"comment-empty-list\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" class=\\"mt-2\\">
-    <empty-content-stub data-v-5d0380ab=\\"\\" icon=\\"comment\\" descriptionclasses=\\"\\" inline=\\"true\\" center=\\"false\\"></empty-content-stub>
+  <transition-group-stub data-v-5d0380ab="" tag="div" name="comment-empty-list" appear="false" persisted="false" css="true" class="mt-2">
+    <empty-content-stub data-v-5d0380ab="" icon="comment" descriptionclasses="" inline="true" center="false"></empty-content-stub>
   </transition-group-stub>
 </div>"
 `;
diff --git a/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap b/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
index 7dc38b91c..d464a83dc 100644
--- a/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
+++ b/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
@@ -1,29 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`GroupSection > renders group section with basic informations 1`] = `
-"<section class=\\"flex flex-col mb-3 border-2 border-mbz-purple\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
-    <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
-      <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
-    </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
+"<section 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 class="o-icon" data-oruga="icon"><i class="mdi mdi-bullhorn 36"></i></span>
+      <h2 class="text-2xl font-medium mt-0">My group section</h2>
+    </div><a href="/@my_group@remotedomain.net/p" class="self-center">View all</a>
   </div>
-  <div class=\\"flex-1\\">
+  <div class="flex-1 min-h-40">
     <div>A list of elements</div>
   </div>
-  <div class=\\"flex justify-end p-2\\"><a href=\\"/@my_group@remotedomain.net/p/new\\" class=\\"btn-primary\\">+ Create a post</a></div>
+  <div class="flex flex-wrap justify-end p-2"><a href="/@my_group@remotedomain.net/p/new" class="btn-primary">+ Create a post</a></div>
 </section>"
 `;
 
 exports[`GroupSection > renders public group section 1`] = `
-"<section class=\\"flex flex-col mb-3 border-2 border-yellow-1\\">
-  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
-    <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
-      <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
-    </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
+"<section 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 class="o-icon" data-oruga="icon"><i class="mdi mdi-bullhorn 36"></i></span>
+      <h2 class="text-2xl font-medium mt-0">My group section</h2>
+    </div><a href="/@my_group@remotedomain.net/p" class="self-center">View all</a>
   </div>
-  <div class=\\"flex-1\\">
+  <div class="flex-1 min-h-40">
     <div>A list of elements</div>
   </div>
-  <div class=\\"flex justify-end p-2\\"><a href=\\"/@my_group@remotedomain.net/p/new\\" class=\\"btn-primary\\">+ Create a post</a></div>
+  <div class="flex flex-wrap justify-end p-2"><a href="/@my_group@remotedomain.net/p/new" class="btn-primary">+ Create a post</a></div>
 </section>"
 `;
diff --git a/tests/unit/specs/components/Participation/ParticipationSection.spec.ts b/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
index 42abfd719..57bd69973 100644
--- a/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
+++ b/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
@@ -89,11 +89,8 @@ describe("ParticipationSection", () => {
     );
 
     wrapper.find(".event-participation small span").trigger("click");
-    expect(
-      wrapper
-        .findComponent({ ref: "anonymous-participation-modal" })
-        .isVisible()
-    ).toBeTruthy();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("div.o-modal").isVisible()).toBeTruthy();
 
     cancelAnonymousParticipationButton.trigger("click");
     await wrapper.vm.$nextTick();
@@ -120,9 +117,7 @@ describe("ParticipationSection", () => {
     wrapper.find(".event-participation small span").trigger("click");
 
     await wrapper.vm.$nextTick();
-    const modal = wrapper.findComponent({
-      ref: "anonymous-participation-modal",
-    });
+    const modal = wrapper.find("div.o-modal");
     expect(modal.isVisible()).toBeTruthy();
     expect(modal.find(".o-notification--primary").text()).toBe(
       "As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
diff --git a/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap b/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap
index c59631d62..687ade13d 100644
--- a/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap
+++ b/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap
@@ -1,55 +1,64 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ParticipationWithoutAccount > handles being already a participant 1`] = `
-"<section class=\\"container mx-auto\\">
-  <div class=\\"\\">
+"<section class="container mx-auto">
+  <div class="">
     <form>
       <p>This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.</p>
-      <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
-        <article class=\\"o-notification o-notification--info\\">
-          <!--v-if-->
-          <!--v-if-->
-          <div class=\\"o-notification__wrapper\\">
-            <!--v-if-->
-            <div class=\\"o-notification__content\\">Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.</div>
+      <transition-stub name="fade" appear="false" persisted="false" css="true">
+        <article class="o-notification o-notification--info o-notification--top" data-oruga="notification">
+          <!---->
+          <div class="o-notification__wrapper">
+            <!---->
+            <div class="o-notification__content">Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.</div>
           </div>
         </article>
       </transition-stub>
-      <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
-        <article class=\\"o-notification o-notification--danger\\">
-          <!--v-if-->
-          <!--v-if-->
-          <div class=\\"o-notification__wrapper\\">
-            <!--v-if-->
-            <div class=\\"o-notification__content\\">You are already a participant of this event</div>
+      <transition-stub name="fade" appear="false" persisted="false" css="true">
+        <article class="o-notification o-notification--danger o-notification--top" data-oruga="notification">
+          <!---->
+          <div class="o-notification__wrapper">
+            <!---->
+            <div class="o-notification__content">You are already a participant of this event</div>
           </div>
         </article>
       </transition-stub>
-      <div class=\\"o-field o-field--filled\\"><label for=\\"anonymousParticipationEmail\\" class=\\"o-field__label\\">Email address</label>
-        <div class=\\"o-ctrl-input\\"><input id=\\"anonymousParticipationEmail\\" placeholder=\\"Your email\\" required=\\"\\" class=\\"o-input\\" type=\\"email\\" autocomplete=\\"off\\">
-          <!--v-if-->
-          <!--v-if-->
-          <!--v-if-->
+      <div data-oruga="field" class="o-field o-field--filled"><label for="anonymousParticipationEmail" class="o-field__label">Email address</label>
+        <div class="o-field__body">
+          <div class="o-field o-field--addons">
+            <div data-oruga="input" class="o-input__wrapper"><input required="" id="anonymousParticipationEmail" data-oruga-input="email" type="email" class="o-input" autocomplete="off" placeholder="Your email">
+              <!---->
+              <!---->
+              <!---->
+            </div>
+          </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
       <p>If you want, you may send a message to the event organizer here.</p>
-      <div class=\\"o-field o-field--filled\\"><label for=\\"anonymousParticipationMessage\\" class=\\"o-field__label\\">Message</label>
-        <div class=\\"o-ctrl-input\\"><textarea id=\\"anonymousParticipationMessage\\" minlength=\\"10\\" class=\\"o-input o-input__textarea\\"></textarea>
-          <!--v-if-->
-          <!--v-if-->
-          <!--v-if-->
+      <div data-oruga="field" class="o-field o-field--filled"><label for="anonymousParticipationMessage" class="o-field__label">Message</label>
+        <div class="o-field__body">
+          <div class="o-field o-field--addons">
+            <div data-oruga="input" class="o-input__wrapper"><textarea minlength="10" id="anonymousParticipationMessage" data-oruga-input="textarea" class="o-input o-input__textarea"></textarea>
+              <!---->
+              <!---->
+              <!---->
+            </div>
+          </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
-      <div class=\\"o-field\\">
-        <!--v-if--><label class=\\"o-chk o-chk--checked\\"><input type=\\"checkbox\\" class=\\"o-chk__check o-chk__check--checked\\" true-value=\\"true\\" false-value=\\"false\\" value=\\"false\\"><span class=\\"o-chk__label\\"><b>Remember my participation in this browser</b><p>Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device.</p></span></label>
-        <!--v-if-->
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <div class="o-field__body">
+          <div class="o-field o-field--addons"><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label"><b>Remember my participation in this browser</b><p>Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device.</p></span></label></div>
+        </div>
+        <!---->
       </div>
-      <div class=\\"flex gap-2 my-2\\"><button type=\\"submit\\" class=\\"o-btn o-btn--primary o-btn--disabled\\" disabled=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Send email</span>
-          <!--v-if--></span>
-        </button><button type=\\"button\\" class=\\"o-btn o-btn--text\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Back to previous page</span>
-          <!--v-if--></span>
+      <div class="flex gap-2 my-2"><button type="submit" class="o-btn o-btn--primary o-btn--disabled" role="button" data-oruga="button" disabled=""><span class="o-btn__wrapper"><!----><span class="o-btn__label">Send email</span>
+          <!----></span>
+        </button><button type="button" class="o-btn o-btn--text" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Back to previous page</span>
+          <!----></span>
         </button></div>
     </form>
   </div>
@@ -57,26 +66,26 @@ exports[`ParticipationWithoutAccount > handles being already a participant 1`] =
 `;
 
 exports[`ParticipationWithoutAccount > renders the participation without account view with minimal data 1`] = `
-"<section class=\\"container mx-auto\\">
-  <div class=\\"\\">
+"<section class="container mx-auto">
+  <div class="">
     <div>
-      <h1 class=\\"title\\">Request for participation confirmation sent</h1>
-      <p class=\\"prose dark:prose-invert\\"><span>Check your inbox (and your junk mail folder).</span><span class=\\"details\\">Your participation will be validated once you click the confirmation link into the email.</span></p>
+      <h1 class="title">Request for participation confirmation sent</h1>
+      <p class="prose dark:prose-invert"><span>Check your inbox (and your junk mail folder).</span><span class="details">Your participation will be validated once you click the confirmation link into the email.</span></p>
       <!--v-if-->
-      <p class=\\"prose dark:prose-invert\\">You may now close this window, or <a href=\\"/events/f37910ea-fd5a-4756-9679-00971f3f4106\\" class=\\"\\">return to the event's page</a>.</p>
+      <p class="prose dark:prose-invert">You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</p>
     </div>
   </div>
 </section>"
 `;
 
 exports[`ParticipationWithoutAccount > renders the warning if the event participation is restricted 1`] = `
-"<section class=\\"container mx-auto\\">
-  <div class=\\"\\">
+"<section class="container mx-auto">
+  <div class="">
     <div>
-      <h1 class=\\"title\\">Request for participation confirmation sent</h1>
-      <p class=\\"prose dark:prose-invert\\"><span>Check your inbox (and your junk mail folder).</span><span class=\\"details\\">Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation.</span></p>
+      <h1 class="title">Request for participation confirmation sent</h1>
+      <p class="prose dark:prose-invert"><span>Check your inbox (and your junk mail folder).</span><span class="details">Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation.</span></p>
       <!--v-if-->
-      <p class=\\"prose dark:prose-invert\\">You may now close this window, or <a href=\\"/events/f37910ea-fd5a-4756-9679-00971f3f4106\\" class=\\"\\">return to the event's page</a>.</p>
+      <p class="prose dark:prose-invert">You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</p>
     </div>
   </div>
 </section>"
diff --git a/tests/unit/specs/components/Post/PostListItem.spec.ts b/tests/unit/specs/components/Post/PostListItem.spec.ts
index 78fdea58d..97e0d67d0 100644
--- a/tests/unit/specs/components/Post/PostListItem.spec.ts
+++ b/tests/unit/specs/components/Post/PostListItem.spec.ts
@@ -4,6 +4,8 @@ import { beforeEach, describe, it, expect } from "vitest";
 import { enUS } from "date-fns/locale";
 import { routes } from "@/router";
 import { createRouter, createWebHistory, Router } from "vue-router";
+import { DEFAULT_PICTURE } from "@/graphql/config";
+import { getMockClient } from "../../mocks/client";
 
 let router: Router;
 
@@ -30,17 +32,15 @@ const generateWrapper = (
   customPostData: Record<string, unknown> = {},
   customProps: Record<string, unknown> = {}
 ) => {
+  const global_data = getMockClient([DEFAULT_PICTURE]);
+  global_data.provide.dateFnsLocale = enUS;
+  global_data.plugins = [router];
   return mount(PostListItem, {
     props: {
       post: { ...postData, ...customPostData },
       ...customProps,
     },
-    global: {
-      provide: {
-        dateFnsLocale: enUS,
-      },
-      plugins: [router],
-    },
+    global: global_data,
   });
 };
 
diff --git a/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap b/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
index cc0c700c7..4f49b108c 100644
--- a/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
+++ b/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PostListItem > renders post list item with basic informations 1`] = `
-"<a data-v-6ca7cc69=\\"\\" href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\">
+"<a data-v-6ca7cc69="" href="/p/my-blog-post-some-uuid" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto">
   <!--v-if-->
-  <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
-    <h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
-    <p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
+  <div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+    <h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold" lang="en">My Blog Post</h3>
+    <p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="" dir="auto" class="">Dec 2, 2020</span></p>
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -14,25 +14,25 @@ exports[`PostListItem > renders post list item with basic informations 1`] = `
 `;
 
 exports[`PostListItem > renders post list item with publisher name 1`] = `
-"<a data-v-6ca7cc69=\\"\\" href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\">
+"<a data-v-6ca7cc69="" href="/p/my-blog-post-some-uuid" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto">
   <!--v-if-->
-  <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
-    <h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
-    <p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
+  <div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+    <h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold" lang="en">My Blog Post</h3>
+    <p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="" dir="auto" class="">Dec 2, 2020</span></p>
     <!--v-if-->
-    <p data-v-6ca7cc69=\\"\\" class=\\"flex gap-1\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon account-edit-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z\\"><!--v-if--></path></svg></span>Published by <b data-v-6ca7cc69=\\"\\" class=\\"\\">An author</b></p>
+    <p data-v-6ca7cc69="" class="flex gap-1"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon account-edit-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z"><!--v-if--></path></svg></span>Published by <b data-v-6ca7cc69="" class="">An author</b></p>
     <!--v-if-->
   </div>
 </a>"
 `;
 
 exports[`PostListItem > renders post list item with tags 1`] = `
-"<a data-v-6ca7cc69=\\"\\" href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\">
+"<a data-v-6ca7cc69="" href="/p/my-blog-post-some-uuid" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto">
   <!--v-if-->
-  <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\">
-    <h3 data-v-6ca7cc69=\\"\\" class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\">My Blog Post</h3>
-    <p data-v-6ca7cc69=\\"\\" class=\\"flex gap-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span data-v-6ca7cc69=\\"\\" dir=\\"auto\\" class=\\"\\">Dec 2, 2020</span></p>
-    <div data-v-6ca7cc69=\\"\\" class=\\"flex flex-wrap gap-y-0 gap-x-2\\"><span data-v-6ca7cc69=\\"\\" aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\" class=\\"rounded-md truncate text-sm text-violet-title px-2 py-1 bg-purple-3 dark:text-violet-3\\">A tag</span></div>
+  <div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+    <h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold" lang="en">My Blog Post</h3>
+    <p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="" dir="auto" class="">Dec 2, 2020</span></p>
+    <div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z"><!--v-if--></path></svg></span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">A tag</span></div>
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/tests/unit/specs/components/Report/ReportModal.spec.ts b/tests/unit/specs/components/Report/ReportModal.spec.ts
index cd3926446..9169655f6 100644
--- a/tests/unit/specs/components/Report/ReportModal.spec.ts
+++ b/tests/unit/specs/components/Report/ReportModal.spec.ts
@@ -96,7 +96,8 @@ describe("ReportModal", () => {
     );
 
     const switchButton = wrapper.find('input[type="checkbox"]');
-    switchButton.setValue(true);
+    switchButton.setValue();
+    await wrapper.vm.$nextTick();
 
     const submit = wrapper.find("footer button.o-btn--primary");
     submit.trigger("click");
diff --git a/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap b/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap
index 511f97971..f238ee08a 100644
--- a/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap
+++ b/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap
@@ -1,29 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ReportModal > renders report modal with basic informations and submits it 1`] = `
-"<div data-v-e0cceef3=\\"\\" class=\\"p-2\\">
+"<div data-v-e0cceef3="" class="p-2">
   <!--v-if-->
-  <section data-v-e0cceef3=\\"\\">
-    <div data-v-e0cceef3=\\"\\" class=\\"flex gap-1 flex-row mb-3 bg-mbz-yellow p-3 rounded items-center\\"><span data-v-e0cceef3=\\"\\" 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>
+  <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="" class="o-icon o-icon--warning hidden md:block flex-1" data-oruga="icon"><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=\\"\\">
+    <div data-v-e0cceef3="">
       <!--v-if-->
-      <div data-v-e0cceef3=\\"\\" class=\\"o-field o-field--filled\\"><label for=\\"additional-comments\\" class=\\"o-field__label\\">Additional comments</label>
-        <div data-v-e0cceef3=\\"\\" class=\\"o-ctrl-input\\"><textarea id=\\"additional-comments\\" autofocus=\\"\\" class=\\"o-input o-input__textarea\\"></textarea>
-          <!--v-if-->
-          <!--v-if-->
-          <!--v-if-->
+      <div data-v-e0cceef3="" data-oruga="field" class="o-field o-field--filled"><label for="additional-comments" class="o-field__label">Additional comments</label>
+        <div class="o-field__body">
+          <div class="o-field o-field--addons">
+            <div data-v-e0cceef3="" data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><textarea autofocus="" id="additional-comments" data-oruga-input="textarea" class="o-input o-input__textarea"></textarea>
+              <!---->
+              <!---->
+              <!---->
+            </div>
+          </div>
         </div>
-        <!--v-if-->
+        <!---->
       </div>
       <!--v-if-->
     </div>
   </section>
-  <footer data-v-e0cceef3=\\"\\" class=\\"flex gap-2 py-3\\"><button data-v-e0cceef3=\\"\\" type=\\"button\\" class=\\"o-btn o-btn--outlined\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Cancel</span>
-      <!--v-if--></span>
-    </button><button data-v-e0cceef3=\\"\\" type=\\"button\\" class=\\"o-btn o-btn--primary\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Send the report</span>
-      <!--v-if--></span>
+  <footer data-v-e0cceef3="" class="flex gap-2 py-3"><button data-v-e0cceef3="" type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Cancel</span>
+      <!----></span>
+    </button><button data-v-e0cceef3="" type="button" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Send the report</span>
+      <!----></span>
     </button></footer>
 </div>"
 `;
diff --git a/tests/unit/specs/components/User/PasswordReset.spec.ts b/tests/unit/specs/components/User/PasswordReset.spec.ts
index f30be1b68..bceefc008 100644
--- a/tests/unit/specs/components/User/PasswordReset.spec.ts
+++ b/tests/unit/specs/components/User/PasswordReset.spec.ts
@@ -70,7 +70,10 @@ describe("Reset page", () => {
     const wrapper = generateWrapper();
     expect(wrapper.router).toBe(router);
     expect(wrapper.findAll('input[type="password"').length).toBe(2);
-    expect(wrapper.html()).toMatchSnapshot();
+    const labels = wrapper.findAll("label");
+    expect(labels.length).toBe(2);
+    expect(labels.at(0).text()).toBe("Password");
+    expect(labels.at(1).text()).toBe("Password (confirmation)");
   });
 
   it("shows error if token is invalid", async () => {
@@ -98,7 +101,6 @@ describe("Reset page", () => {
     expect(wrapper.find(".o-notification--danger").text()).toContain(
       "The token you provided is invalid"
     );
-    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("redirects to homepage if token is valid", async () => {
diff --git a/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap b/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap
deleted file mode 100644
index 0deaa7470..000000000
--- a/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap
+++ /dev/null
@@ -1,55 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Reset page > renders correctly 1`] = `
-"<section class=\\"container mx-auto\\">
-  <h1 class=\\"\\">Password reset</h1>
-  <form>
-    <div class=\\"o-field\\"><label class=\\"o-field__label\\">Password</label>
-      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
-        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-    </div>
-    <div class=\\"o-field\\"><label class=\\"o-field__label\\">Password (confirmation)</label>
-      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
-        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-    </div><button class=\\"button is-primary\\">Reset my password</button>
-  </form>
-</section>"
-`;
-
-exports[`Reset page > shows error if token is invalid 1`] = `
-"<section class=\\"container mx-auto\\">
-  <h1 class=\\"\\">Password reset</h1>
-  <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\" title=\\"Error\\">
-    <article class=\\"o-notification o-notification--danger\\">
-      <!--v-if-->
-      <!--v-if-->
-      <div class=\\"o-notification__wrapper\\">
-        <!--v-if-->
-        <div class=\\"o-notification__content\\">The token you provided is invalid.</div>
-      </div>
-    </article>
-  </transition-stub>
-  <form>
-    <div class=\\"o-field o-field--filled\\"><label class=\\"o-field__label\\">Password</label>
-      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
-        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-    </div>
-    <div class=\\"o-field o-field--filled\\"><label class=\\"o-field__label\\">Password (confirmation)</label>
-      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
-        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-    </div><button class=\\"button is-primary\\">Reset my password</button>
-  </form>
-</section>"
-`;
diff --git a/tests/unit/specs/components/User/login.spec.ts b/tests/unit/specs/components/User/login.spec.ts
index c1e42f10e..c9db00cff 100644
--- a/tests/unit/specs/components/User/login.spec.ts
+++ b/tests/unit/specs/components/User/login.spec.ts
@@ -8,9 +8,17 @@ import {
 import buildCurrentUserResolver from "@/apollo/user";
 import { loginMock as loginConfigMock } from "../../mocks/config";
 import { LOGIN_CONFIG } from "@/graphql/config";
-import { loginMock, loginResponseMock } from "../../mocks/auth";
+import {
+  loginMock,
+  loginResponseMock,
+  nullIdentityMock,
+} from "../../mocks/auth";
 import { LOGIN } from "@/graphql/auth";
-import { CURRENT_USER_CLIENT } from "@/graphql/user";
+import {
+  CURRENT_USER_CLIENT,
+  LOGGED_USER_LOCATION,
+  UPDATE_CURRENT_USER_CLIENT,
+} from "@/graphql/user";
 import { ICurrentUser } from "@/types/current-user.model";
 import flushPromises from "flush-promises";
 import RouteName from "@/router/name";
@@ -24,6 +32,8 @@ import {
   injectRouterMock,
   getRouter,
 } from "vue-router-mock";
+import { IDENTITIES } from "@/graphql/actor";
+import { nullMock } from "../../common";
 
 config.global.plugins.push(Oruga);
 config.plugins.VueWrapper.install(VueRouterMock);
@@ -58,6 +68,8 @@ describe("Render login form", () => {
     requestHandlers = {
       configQueryHandler: vi.fn().mockResolvedValue(loginConfigMock),
       loginMutationHandler: vi.fn().mockResolvedValue(loginResponseMock),
+      identity: vi.fn().mockResolvedValue(nullIdentityMock),
+      mockhdl: vi.fn().mockResolvedValue(nullMock),
       ...handlers,
     };
     mockClient.setRequestHandler(
@@ -65,6 +77,12 @@ describe("Render login form", () => {
       requestHandlers.configQueryHandler
     );
     mockClient.setRequestHandler(LOGIN, requestHandlers.loginMutationHandler);
+    mockClient.setRequestHandler(IDENTITIES, requestHandlers.identity);
+    mockClient.setRequestHandler(LOGGED_USER_LOCATION, requestHandlers.mockhdl);
+    mockClient.setRequestHandler(
+      UPDATE_CURRENT_USER_CLIENT,
+      requestHandlers.mockhdl
+    );
 
     wrapper = mount(Login, {
       props: {
@@ -80,6 +98,7 @@ describe("Render login form", () => {
         },
       },
     });
+    wrapper.router.push.mockReset();
   };
 
   afterEach(() => {
diff --git a/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap b/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
index cf310114d..58d868dbc 100644
--- a/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
+++ b/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
@@ -1,20 +1,26 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`App component > renders a Vue component 1`] = `
-"<nav class=\\"bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900\\" id=\\"navbar\\">
-  <div class=\\"container mx-auto flex flex-wrap items-center mx-auto gap-2 sm:gap-4\\">
-    <router-link to=\\"[object Object]\\" class=\\"flex items-center flex-1\\">
-      <mobilizon-logo-stub invert=\\"false\\" class=\\"w-40\\"></mobilizon-logo-stub>
+"<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900" id="navbar">
+  <div class="container mx-auto flex flex-wrap items-center gap-2 sm:gap-4">
+    <router-link to="[object Object]" class="flex items-center flex-1">
+      <mobilizon-logo-stub invert="false" class="w-40"></mobilizon-logo-stub>
     </router-link>
-    <!--v-if--><button type=\\"button\\" class=\\"inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600\\" aria-controls=\\"mobile-menu-2\\" aria-expanded=\\"false\\"><span class=\\"sr-only\\">Open main menu</span><svg class=\\"w-6 h-6\\" aria-hidden=\\"true\\" fill=\\"currentColor\\" viewBox=\\"0 0 20 20\\" xmlns=\\"http://www.w3.org/2000/svg\\">
-        <path fill-rule=\\"evenodd\\" d=\\"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\\" clip-rule=\\"evenodd\\"></path>
+    <!--v-if--><button type="button" class="inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false"><span class="sr-only">Open main menu</span><svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
       </svg></button>
-    <div class=\\"justify-between items-center w-full md:flex md:w-auto md:order-1 hidden\\" id=\\"mobile-menu-2\\">
-      <ul class=\\"flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold\\">
+    <div class="justify-between items-center w-full md:flex md:w-auto md:order-1 hidden" id="mobile-menu-2">
+      <ul class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold">
+        <li class="m-auto">
+          <router-link to="[object Object]" class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Search</router-link>
+        </li>
+        <li class="m-auto">
+          <router-link to="[object Object]" class="block relative py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Calendar<span class="absolute right-0 text-xs"><br>(beta)</span></router-link>
+        </li>
         <!--v-if-->
         <!--v-if-->
-        <li>
-          <router-link to=\\"[object Object]\\" class=\\"block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700\\">Login</router-link>
+        <li class="m-auto">
+          <router-link to="[object Object]" class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Login</router-link>
         </li>
         <!--v-if-->
       </ul>
diff --git a/tests/unit/specs/components/stories/ActorCardStory.spec.ts b/tests/unit/specs/components/stories/ActorCardStory.spec.ts
new file mode 100644
index 000000000..2542b39b3
--- /dev/null
+++ b/tests/unit/specs/components/stories/ActorCardStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import ActorCardStory from "@/components/Account/ActorCard.story.vue";
+
+describe("Actor Card Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(ActorCardStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/ActorInlineStory.spec.ts b/tests/unit/specs/components/stories/ActorInlineStory.spec.ts
new file mode 100644
index 000000000..8c820eebc
--- /dev/null
+++ b/tests/unit/specs/components/stories/ActorInlineStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import ActorInlineStory from "@/components/Account/ActorInline.story.vue";
+
+describe("Actor Inline Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(ActorInlineStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/AddressInfoStory.spec.ts b/tests/unit/specs/components/stories/AddressInfoStory.spec.ts
new file mode 100644
index 000000000..03d6c84a7
--- /dev/null
+++ b/tests/unit/specs/components/stories/AddressInfoStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import AddressInfoStory from "@/components/Address/AddressInfo.story.vue";
+
+describe("Address Info Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(AddressInfoStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/AuthProvidersStory.spec.ts b/tests/unit/specs/components/stories/AuthProvidersStory.spec.ts
new file mode 100644
index 000000000..a5192c79b
--- /dev/null
+++ b/tests/unit/specs/components/stories/AuthProvidersStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import AuthProvidersStory from "@/components/User/AuthProviders.story.vue";
+
+describe("Auth Providers Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(AuthProvidersStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/CategoriesPreviewStory.spec.ts b/tests/unit/specs/components/stories/CategoriesPreviewStory.spec.ts
new file mode 100644
index 000000000..911f39133
--- /dev/null
+++ b/tests/unit/specs/components/stories/CategoriesPreviewStory.spec.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import CategoriesPreviewStory from "@/components/Home/CategoriesPreview.story.vue";
+import { getMockClient } from "../../mocks/client";
+import { CATEGORY_STATISTICS } from "@/graphql/statistics";
+
+describe("Categories Preview Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(CategoriesPreviewStory, {
+      global: getMockClient([CATEGORY_STATISTICS]),
+    });
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/CategoryCardStory.spec.ts b/tests/unit/specs/components/stories/CategoryCardStory.spec.ts
new file mode 100644
index 000000000..13ed91194
--- /dev/null
+++ b/tests/unit/specs/components/stories/CategoryCardStory.spec.ts
@@ -0,0 +1,16 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import CategoryCardStory from "@/components/Categories/CategoryCard.story.vue";
+
+describe("Category Card Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(CategoryCardStory);
+  };
+  afterEach(() => {});
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/DateCalendarIconStory.spec.ts b/tests/unit/specs/components/stories/DateCalendarIconStory.spec.ts
new file mode 100644
index 000000000..ebccf0c4e
--- /dev/null
+++ b/tests/unit/specs/components/stories/DateCalendarIconStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import DateCalendarIconStory from "@/components/Event/DateCalendarIcon.story.vue";
+
+describe("Date Calendar Icon Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(DateCalendarIconStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/DiscussionListItemStory.spec.ts b/tests/unit/specs/components/stories/DiscussionListItemStory.spec.ts
new file mode 100644
index 000000000..400e4ddf4
--- /dev/null
+++ b/tests/unit/specs/components/stories/DiscussionListItemStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import DiscussionListItemStory from "@/components/Discussion/DiscussionListItem.story.vue";
+
+describe("Discussion List Item Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(DiscussionListItemStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/EventCardStory.spec.ts b/tests/unit/specs/components/stories/EventCardStory.spec.ts
new file mode 100644
index 000000000..6bb9354a7
--- /dev/null
+++ b/tests/unit/specs/components/stories/EventCardStory.spec.ts
@@ -0,0 +1,25 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import EventCardStory from "@/components/Event/EventCard.story.vue";
+import {
+  createMockIntersectionObserver,
+  getMockClient,
+} from "../../mocks/client";
+import { DEFAULT_PICTURE } from "@/graphql/config";
+
+describe("Event Card Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(EventCardStory, {
+      global: getMockClient([DEFAULT_PICTURE]),
+    });
+  };
+  beforeEach(() => {
+    createMockIntersectionObserver();
+  });
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/EventListViewCardStory.spec.ts b/tests/unit/specs/components/stories/EventListViewCardStory.spec.ts
new file mode 100644
index 000000000..4a2f39361
--- /dev/null
+++ b/tests/unit/specs/components/stories/EventListViewCardStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import EventListViewCardStory from "@/components/Event/EventListViewCard.story.vue";
+
+describe("Event List View Card Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(EventListViewCardStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/GroupCardStory.spec.ts b/tests/unit/specs/components/stories/GroupCardStory.spec.ts
new file mode 100644
index 000000000..6a1c26b3d
--- /dev/null
+++ b/tests/unit/specs/components/stories/GroupCardStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import GroupCardStory from "@/components/Group/GroupCard.story.vue";
+
+describe("Group Card Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(GroupCardStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/GroupMemberCardStory.spec.ts b/tests/unit/specs/components/stories/GroupMemberCardStory.spec.ts
new file mode 100644
index 000000000..1eb7514d6
--- /dev/null
+++ b/tests/unit/specs/components/stories/GroupMemberCardStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import GroupMemberCardStory from "@/components/Group/GroupMemberCard.story.vue";
+
+describe("Group Member Card Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(GroupMemberCardStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/InlineAddressStory.spec.ts b/tests/unit/specs/components/stories/InlineAddressStory.spec.ts
new file mode 100644
index 000000000..f8d2233a0
--- /dev/null
+++ b/tests/unit/specs/components/stories/InlineAddressStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import InlineAddressStory from "@/components/Address/InlineAddress.story.vue";
+
+describe("Inline Address Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(InlineAddressStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/InstanceContactLinkStory.spec.ts b/tests/unit/specs/components/stories/InstanceContactLinkStory.spec.ts
new file mode 100644
index 000000000..369079ef2
--- /dev/null
+++ b/tests/unit/specs/components/stories/InstanceContactLinkStory.spec.ts
@@ -0,0 +1,15 @@
+import InstanceContactLinkStory from "@/components/About/InstanceContactLink.story.vue";
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+
+describe("Instance Contact Link Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(InstanceContactLinkStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/MaterialIconStory.spec.ts b/tests/unit/specs/components/stories/MaterialIconStory.spec.ts
new file mode 100644
index 000000000..2033e44b7
--- /dev/null
+++ b/tests/unit/specs/components/stories/MaterialIconStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import MaterialIconStory from "@/components/core/MaterialIcon.story.vue";
+
+describe("Material Icon Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(MaterialIconStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/MobilizonPresentationStory.spec.ts b/tests/unit/specs/components/stories/MobilizonPresentationStory.spec.ts
new file mode 100644
index 000000000..06dcd5cf7
--- /dev/null
+++ b/tests/unit/specs/components/stories/MobilizonPresentationStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import MobilizonPresentationStory from "@/components/Home/MobilizonPresentation.story.vue";
+
+describe("Mobilizon Presentation Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(MobilizonPresentationStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/PopoverActorCardStory.spec.ts b/tests/unit/specs/components/stories/PopoverActorCardStory.spec.ts
new file mode 100644
index 000000000..fc2388971
--- /dev/null
+++ b/tests/unit/specs/components/stories/PopoverActorCardStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import PopoverActorCardStory from "@/components/Account/PopoverActorCard.story.vue";
+
+describe("Popover Actor Card Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(PopoverActorCardStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/PostListItemStory.spec.ts b/tests/unit/specs/components/stories/PostListItemStory.spec.ts
new file mode 100644
index 000000000..def52dc0d
--- /dev/null
+++ b/tests/unit/specs/components/stories/PostListItemStory.spec.ts
@@ -0,0 +1,25 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import PostListItemStory from "@/components/Post/PostListItem.story.vue";
+import {
+  createMockIntersectionObserver,
+  getMockClient,
+} from "../../mocks/client";
+import { DEFAULT_PICTURE } from "@/graphql/config";
+
+describe("Post List Item Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(PostListItemStory, {
+      global: getMockClient([DEFAULT_PICTURE]),
+    });
+  };
+  beforeEach(() => {
+    createMockIntersectionObserver();
+  });
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/ProfileOnboardingStory.spec.ts b/tests/unit/specs/components/stories/ProfileOnboardingStory.spec.ts
new file mode 100644
index 000000000..d44127c71
--- /dev/null
+++ b/tests/unit/specs/components/stories/ProfileOnboardingStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import ProfileOnboardingStory from "@/components/Account/ProfileOnboarding.story.vue";
+
+describe("Profile On boarding Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(ProfileOnboardingStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/ShareEventModalStory.spec.ts b/tests/unit/specs/components/stories/ShareEventModalStory.spec.ts
new file mode 100644
index 000000000..98bd4b148
--- /dev/null
+++ b/tests/unit/specs/components/stories/ShareEventModalStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import ShareEventModalStory from "@/components/Event/ShareEventModal.story.vue";
+
+describe("Share Event Modal Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(ShareEventModalStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/SharePostModalStory.spec.ts b/tests/unit/specs/components/stories/SharePostModalStory.spec.ts
new file mode 100644
index 000000000..b41fffbb2
--- /dev/null
+++ b/tests/unit/specs/components/stories/SharePostModalStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import SharePostModalStory from "@/components/Post/SharePostModal.story.vue";
+
+describe("Share Post Modal Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(SharePostModalStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/SkeletonEventResultStory.spec.ts b/tests/unit/specs/components/stories/SkeletonEventResultStory.spec.ts
new file mode 100644
index 000000000..1db68086f
--- /dev/null
+++ b/tests/unit/specs/components/stories/SkeletonEventResultStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import SkeletonEventResultStory from "@/components/Event/SkeletonEventResult.story.vue";
+
+describe("Skeleton Event Result Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(SkeletonEventResultStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/TagInputStory.spec.ts b/tests/unit/specs/components/stories/TagInputStory.spec.ts
new file mode 100644
index 000000000..ffc9eeb67
--- /dev/null
+++ b/tests/unit/specs/components/stories/TagInputStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import TagInputStory from "@/components/Event/TagInput.story.vue";
+
+describe("Tag Input Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(TagInputStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/UnloggedIntroductionStory.spec.ts b/tests/unit/specs/components/stories/UnloggedIntroductionStory.spec.ts
new file mode 100644
index 000000000..5ff18b62f
--- /dev/null
+++ b/tests/unit/specs/components/stories/UnloggedIntroductionStory.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import UnloggedIntroductionStory from "@/components/Home/UnloggedIntroduction.story.vue";
+
+describe("Unlogged Introduction Story", () => {
+  let wrapper: VueWrapper;
+
+  const generateWrapper = () => {
+    wrapper = mount(UnloggedIntroductionStory);
+  };
+  it("Default", async () => {
+    generateWrapper();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});
diff --git a/tests/unit/specs/components/stories/__snapshots__/ActorCardStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/ActorCardStory.spec.ts.snap
new file mode 100644
index 000000000..75780292e
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/ActorCardStory.spec.ts.snap
@@ -0,0 +1,110 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Actor Card Story > Default 1`] = `
+"<story>
+  <variant title="local">
+    <div data-v-b0ff4ece="" class="bg-white dark:bg-mbz-purple rounded-lg flex space-x-4 items-center flex-col p-4 shadow-md sm:p-8 pb-10 w-80">
+      <div data-v-b0ff4ece="" class="flex pl-2"><span data-v-b0ff4ece="" class="ltr:-mr-0.5 rtl:-ml-0.5 material-design-icon account-circle-icon ltr:-mr-0.5 rtl:-ml-0.5" aria-hidden="true" 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>
+      <div data-v-b0ff4ece="" class="text-center overflow-hidden w-full">
+        <h5 data-v-b0ff4ece="" class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-gray-200 whitespace-pre-line line-clamp-2">Thomas Citharel</h5>
+        <p data-v-b0ff4ece="" class="text-gray-500 dark:text-gray-200 truncate"><span data-v-b0ff4ece="" dir="ltr">@tcit</span></p>
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div data-v-b0ff4ece="" class="flex pr-2">
+        <router-link data-v-b0ff4ece="" to="[object Object]"><span data-v-b0ff4ece="" aria-hidden="true" class="material-design-icon email-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></router-link>
+      </div>
+    </div>
+    <!-- <div
+    class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
+    dir="auto"
+  >
+    <div class="flex-shrink-0">
+      <figure class="w-12 h-12" v-if="actor.avatar">
+        <img
+          class="rounded-lg"
+          :src="actor.avatar.url"
+          alt=""
+          width="48"
+          height="48"
+        />
+      </figure>
+      <o-icon
+        v-else
+        size="large"
+        icon="account-circle"
+        class="ltr:-mr-0.5 rtl:-ml-0.5"
+      />
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
+        {{ displayName(actor) }}
+      </h5>
+      <p class="text-gray-500 truncate" v-if="actor.name">
+        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
+      </p>
+      <div
+        v-if="full"
+        class="line-clamp-3"
+        :class="{ limit: limit }"
+        v-html="actor.summary"
+      />
+    </div>
+  </div> -->
+  </variant>
+  <variant title="remote">
+    <div data-v-b0ff4ece="" class="bg-white dark:bg-mbz-purple rounded-lg flex space-x-4 items-center flex-col p-4 shadow-md sm:p-8 pb-10 w-80">
+      <div data-v-b0ff4ece="" class="flex pl-2">
+        <figure data-v-b0ff4ece="" class="w-12 h-12"><img data-v-b0ff4ece="" class="rounded-full object-cover h-full" src="https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg" alt="" width="48" height="48" loading="lazy"></figure>
+      </div>
+      <div data-v-b0ff4ece="" class="text-center overflow-hidden w-full">
+        <h5 data-v-b0ff4ece="" class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-gray-200 whitespace-pre-line line-clamp-2">Framasoft</h5>
+        <p data-v-b0ff4ece="" class="text-gray-500 dark:text-gray-200 truncate"><span data-v-b0ff4ece="" dir="ltr">@framasoft@framapiaf.org</span></p>
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div data-v-b0ff4ece="" class="flex pr-2">
+        <router-link data-v-b0ff4ece="" to="[object Object]"><span data-v-b0ff4ece="" aria-hidden="true" class="material-design-icon email-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></router-link>
+      </div>
+    </div>
+    <!-- <div
+    class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
+    dir="auto"
+  >
+    <div class="flex-shrink-0">
+      <figure class="w-12 h-12" v-if="actor.avatar">
+        <img
+          class="rounded-lg"
+          :src="actor.avatar.url"
+          alt=""
+          width="48"
+          height="48"
+        />
+      </figure>
+      <o-icon
+        v-else
+        size="large"
+        icon="account-circle"
+        class="ltr:-mr-0.5 rtl:-ml-0.5"
+      />
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
+        {{ displayName(actor) }}
+      </h5>
+      <p class="text-gray-500 truncate" v-if="actor.name">
+        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
+      </p>
+      <div
+        v-if="full"
+        class="line-clamp-3"
+        :class="{ limit: limit }"
+        v-html="actor.summary"
+      />
+    </div>
+  </div> -->
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/ActorInlineStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/ActorInlineStory.spec.ts.snap
new file mode 100644
index 000000000..4a259664d
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/ActorInlineStory.spec.ts.snap
@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Actor Inline Story > Default 1`] = `
+"<story>
+  <variant title="local">
+    <div data-v-397a2c1c="" class="inline-flex items-start gap-2 bg-white dark:bg-violet-1 dark:text-white p-2 rounded-md">
+      <div data-v-397a2c1c="" class="flex-none"><span data-v-397a2c1c="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="36" height="36" 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>
+      <div data-v-397a2c1c="" class="flex-auto">
+        <p data-v-397a2c1c="" class="text-lg line-clamp-3 md:line-clamp-2 max-w-xl">Thomas Citharel</p>
+        <p data-v-397a2c1c="" class="text-sm text-gray-500 dark:text-gray-300 truncate"> @tcit</p>
+      </div>
+    </div>
+  </variant>
+  <variant title="remote">
+    <div data-v-397a2c1c="" class="inline-flex items-start gap-2 bg-white dark:bg-violet-1 dark:text-white p-2 rounded-md">
+      <div data-v-397a2c1c="" class="flex-none">
+        <figure data-v-397a2c1c=""><img data-v-397a2c1c="" class="rounded-xl" src="https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg" alt="" width="36" height="36" loading="lazy"></figure>
+      </div>
+      <div data-v-397a2c1c="" class="flex-auto">
+        <p data-v-397a2c1c="" class="text-lg line-clamp-3 md:line-clamp-2 max-w-xl">Framasoft</p>
+        <p data-v-397a2c1c="" class="text-sm text-gray-500 dark:text-gray-300 truncate"> @framasoft@framapiaf.org</p>
+      </div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/AddressInfoStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/AddressInfoStory.spec.ts.snap
new file mode 100644
index 000000000..268fd0394
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/AddressInfoStory.spec.ts.snap
@@ -0,0 +1,20 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Address Info Story > Default 1`] = `
+"<story>
+  <variant title="Basic">
+    <address data-v-f169049d="" dir="auto">
+      <!--v-if-->
+      <p data-v-f169049d=""><span data-v-f169049d="" class="addressDescription" title="Locaux Motiv">Locaux Motiv</span><br data-v-f169049d=""><span data-v-f169049d="">10 Rue Jangot, 69007, Lyon</span><br data-v-f169049d="">
+        <!--v-if-->
+      </p>
+    </address>
+  </variant>
+  <variant title="Basic with timezone">
+    <address data-v-f169049d="" dir="auto">
+      <!--v-if-->
+      <p data-v-f169049d=""><span data-v-f169049d="" class="addressDescription" title="Locaux Motiv">Locaux Motiv</span><br data-v-f169049d=""><span data-v-f169049d="">10 Rue Jangot, 69007, Lyon</span><br data-v-f169049d=""><small data-v-f169049d=""> 🌐 heure d’été irlandaise (UTC+1)</small></p>
+    </address>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/AuthProvidersStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/AuthProvidersStory.spec.ts.snap
new file mode 100644
index 000000000..4c0d14cfb
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/AuthProvidersStory.spec.ts.snap
@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Auth Providers Story > Default 1`] = `
+"<story>
+  <variant title="Public">
+    <div><b>Sign in with</b>
+      <div class="flex gap-1 flex-wrap">
+        <o-button tag="a" outlined="" variant="primary" href="/auth/keycloak" icon-left="lock"><span>Entreprise</span></o-button>
+        <o-button tag="a" outlined="" variant="primary" icon-left="google" href="/auth/google"><span>Google</span></o-button>
+      </div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/CategoriesPreviewStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/CategoriesPreviewStory.spec.ts.snap
new file mode 100644
index 000000000..aeb6e697d
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/CategoriesPreviewStory.spec.ts.snap
@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Categories Preview Story > Default 1`] = `
+"<story setup-app="function setupApp({ app }) {
+      app.provide(__vite_ssr_import_2__.DefaultApolloClient, __vite_ssr_import_1__.apolloClient);
+    }">
+  <variant>
+    <!--v-if-->
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/CategoryCardStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/CategoryCardStory.spec.ts.snap
new file mode 100644
index 000000000..d5b4e968d
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/CategoryCardStory.spec.ts.snap
@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Category Card Story > Default 1`] = `
+"<story>
+  <variant title="Basic">
+    <section class="flex flex-wrap gap-3 md:gap-5">
+      <router-link to="[object Object]" class="max-w-xs rounded-lg overflow-hidden bg-center bg-no-repeat bg-cover shadow-lg relative group">
+        <picture class="brightness-50">
+          <source srcset="/img/categories/photography.webp 2x, /img/categories/photography.webp" media="(min-width: 1000px)">
+          <source srcset="/img/categories/photography.webp 2x, /img/categories/photography-small.webp" media="(min-width: 300px)"><img class="w-full h-36 w-36 md:h-52 md:w-52 object-cover" src="/img/categories/photography.webp" srcset="/img/categories/photography-small.webp " width="384" height="384" alt="" loading="lazy">
+        </picture>
+        <div class="px-3 py-1 absolute left-0 bottom-0">
+          <h2 class="group-hover:text-slate-200 font-semibold text-white tracking-tight text-xl mb-3">Hello</h2>
+        </div>
+        <!--v-if-->
+      </router-link>
+    </section>
+  </variant>
+  <variant title="Details">
+    <section class="flex flex-wrap gap-3 md:gap-5">
+      <router-link to="[object Object]" class="max-w-xs rounded-lg overflow-hidden bg-center bg-no-repeat bg-cover shadow-lg relative group">
+        <picture class="brightness-50">
+          <source srcset="/img/categories/outdoors_adventure.webp 2x, /img/categories/outdoors_adventure.webp" media="(min-width: 1000px)">
+          <source srcset="/img/categories/outdoors_adventure.webp 2x, /img/categories/outdoors_adventure-small.webp" media="(min-width: 300px)"><img class="w-full h-36 w-36 md:h-52 md:w-52 object-cover" src="/img/categories/outdoors_adventure.webp" srcset="/img/categories/outdoors_adventure-small.webp " width="384" height="384" alt="" loading="lazy">
+        </picture>
+        <div class="px-3 py-1 absolute left-0 bottom-0">
+          <h2 class="group-hover:text-slate-200 font-semibold text-white tracking-tight text-xl mb-3">Hello</h2>
+        </div><span class="absolute z-10 inline-flex items-center px-3 py-1 text-xs font-semibold text-white bg-black rounded-full right-2 top-2">5 events</span>
+      </router-link>
+    </section>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/DateCalendarIconStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/DateCalendarIconStory.spec.ts.snap
new file mode 100644
index 000000000..563c750af
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/DateCalendarIconStory.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Date Calendar Icon Story > Default 1`] = `
+"<story>
+  <variant title="new">
+    <div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white" style="--small: 2;">
+      <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+      <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+    </div>
+  </variant>
+  <variant title="small">
+    <div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+      <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+      <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/DiscussionCommentStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/DiscussionCommentStory.spec.ts.snap
new file mode 100644
index 000000000..5c522f1dd
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/DiscussionCommentStory.spec.ts.snap
@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Discussion Comment Story > Default 1`] = `
+"<story>
+  <variant title="Basic">
+    <article data-v-49696bef="" class="flex gap-2 bg-white dark:bg-transparent border rounded-md p-2 mt-2">
+      <div data-v-49696bef="" class="">
+        <figure data-v-49696bef="" class=""><img data-v-49696bef="" class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="48" height="48"></figure>
+      </div>
+      <div data-v-49696bef="" class="mb-2 pt-1 flex-1">
+        <div data-v-49696bef="" class="flex items-center gap-1" dir="auto">
+          <div data-v-49696bef="" class="flex flex-1 flex-col"><strong data-v-49696bef="">Thomas Citharel</strong><small data-v-49696bef="">@tcit</small></div><span data-v-49696bef="" class="icons"><o-dropdown data-v-49696bef="" aria-role="list" position="bottom-left"><o-dropdown-item data-v-49696bef="" aria-role="menuitem"><o-icon data-v-49696bef="" icon="pencil"></o-icon> Edit</o-dropdown-item><o-dropdown-item data-v-49696bef="" aria-role="menuitem"><o-icon data-v-49696bef="" icon="delete"></o-icon> Delete</o-dropdown-item><!--v-if--></o-dropdown></span>
+          <div data-v-49696bef="" class="self-center">
+            <!--v-if-->
+          </div>
+        </div>
+        <div data-v-49696bef="" class="text-wrapper" dir="auto">
+          <div data-v-49696bef="" class="prose md:prose-lg lg:prose-xl dark:prose-invert">Hello there</div>
+          <!--v-if-->
+        </div>
+      </div>
+    </article>
+    <o-modal data-v-49696bef="" active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
+      <div data-v-e0cceef3="" data-v-49696bef="" class="p-2">
+        <header data-v-e0cceef3="" class="mb-3">
+          <h2 data-v-e0cceef3="" class="text-2xl">Report this comment</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">
+            <o-icon data-v-e0cceef3="" icon="alert" variant="warning" custom-size="48" class="hidden md:block flex-1"></o-icon>
+            <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-->
+            <o-field data-v-e0cceef3="" label="Additional comments" label-for="additional-comments">
+              <o-input data-v-e0cceef3="" modelvalue="" type="textarea" id="additional-comments" autofocus="" expanded=""></o-input>
+            </o-field>
+            <!--v-if-->
+          </div>
+        </section>
+        <footer data-v-e0cceef3="" class="flex gap-2 py-3">
+          <o-button data-v-e0cceef3="" outlined="">Cancel</o-button>
+          <o-button data-v-e0cceef3="" variant="primary">Send the report</o-button>
+        </footer>
+      </div>
+    </o-modal>
+  </variant>
+  <variant title="Deleted comment">
+    <article data-v-49696bef="" class="flex gap-2 bg-white dark:bg-transparent border rounded-md p-2 mt-2">
+      <div data-v-49696bef="" class=""><span data-v-49696bef="" 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>
+      <div data-v-49696bef="" class="mb-2 pt-1 flex-1">
+        <div data-v-49696bef="" class="flex items-center gap-1" dir="auto"><span data-v-49696bef="" class="name comment-link has-text-grey">[deleted]</span>
+          <!--v-if-->
+          <div data-v-49696bef="" class="self-center">
+            <!--v-if-->
+          </div>
+        </div>
+        <div data-v-49696bef="" class="comment-deleted">[This comment has been deleted by it's author]</div>
+      </div>
+    </article>
+    <o-modal data-v-49696bef="" active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
+      <div data-v-e0cceef3="" data-v-49696bef="" class="p-2">
+        <header data-v-e0cceef3="" class="mb-3">
+          <h2 data-v-e0cceef3="" class="text-2xl">Report this comment</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">
+            <o-icon data-v-e0cceef3="" icon="alert" variant="warning" custom-size="48" class="hidden md:block flex-1"></o-icon>
+            <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-->
+            <o-field data-v-e0cceef3="" label="Additional comments" label-for="additional-comments">
+              <o-input data-v-e0cceef3="" modelvalue="" type="textarea" id="additional-comments" autofocus="" expanded=""></o-input>
+            </o-field>
+            <!--v-if-->
+          </div>
+        </section>
+        <footer data-v-e0cceef3="" class="flex gap-2 py-3">
+          <o-button data-v-e0cceef3="" outlined="">Cancel</o-button>
+          <o-button data-v-e0cceef3="" variant="primary">Send the report</o-button>
+        </footer>
+      </div>
+    </o-modal>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/DiscussionListItemStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/DiscussionListItemStory.spec.ts.snap
new file mode 100644
index 000000000..e057d3cba
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/DiscussionListItemStory.spec.ts.snap
@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Discussion List Item Story > Default 1`] = `
+"<story>
+  <variant title="Basic">
+    <router-link class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent" dir="auto" to="[object Object]">
+      <div class=""><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="32" height="32" 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>
+      <div class="flex-1">
+        <div class="flex items-center">
+          <p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">A discussion</p><span class="" title="Wednesday, February 2, 2022 at 3:04 AM">0 seconds</span>
+        </div>
+        <div class="line-clamp-2" dir="auto"></div>
+      </div>
+    </router-link>
+  </variant>
+  <variant title="Deleted comment">
+    <router-link class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent" dir="auto" to="[object Object]">
+      <div class=""><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="32" height="32" 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>
+      <div class="flex-1">
+        <div class="flex items-center">
+          <p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">A discussion</p><span class="" title="Wednesday, February 2, 2022 at 3:04 AM">0 seconds</span>
+        </div>
+        <div class="">[This comment has been deleted]</div>
+      </div>
+    </router-link>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/EventCardStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/EventCardStory.spec.ts.snap
new file mode 100644
index 000000000..8911ff613
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/EventCardStory.spec.ts.snap
@@ -0,0 +1,257 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Event Card Story > Default 1`] = `
+"<story title="EventCard">
+  <variant title="default">
+    <router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
+      <div data-v-4bd07c72="" class="rounded-lg">
+        <div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
+          <div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+            <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+            <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <figure data-v-4bd07c72="" class="block relative pt-40">
+          <div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
+            <div class="h-full w-full max-w-100 min-h-[10rem]">
+              <!-- Show the placeholder as background -->
+              <!--v-if-->
+              <!-- 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="" loading="lazy">
+            </div>
+          </div>
+          <div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
+            <!--v-if-->
+            <!--v-if-->
+            <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+          </div>
+        </figure>
+      </div>
+      <div data-v-4bd07c72="" class="p-2 flex-auto">
+        <div data-v-4bd07c72="" class="relative flex flex-col h-full">
+          <div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
+            <!--v-if-->
+          </div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
+          <!--v-if-->
+          <div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
+            <h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
+            <div data-v-4bd07c72="" class="">
+              <div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
+                <figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
+              </div>
+              <div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
+              <div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
+                <!--v-if-->
+                <!--v-if-->
+                <!--v-if-->
+                <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </variant>
+  <variant title="long">
+    <router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
+      <div data-v-4bd07c72="" class="rounded-lg">
+        <div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
+          <div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+            <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+            <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <figure data-v-4bd07c72="" class="block relative pt-40">
+          <div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
+            <div class="h-full w-full max-w-100 min-h-[10rem]">
+              <!-- Show the placeholder as background -->
+              <!--v-if-->
+              <!-- 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="" loading="lazy">
+            </div>
+          </div>
+          <div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
+            <!--v-if-->
+            <!--v-if-->
+            <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+          </div>
+        </figure>
+      </div>
+      <div data-v-4bd07c72="" class="p-2 flex-auto">
+        <div data-v-4bd07c72="" class="relative flex flex-col h-full">
+          <div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
+            <!--v-if-->
+          </div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
+          <!--v-if-->
+          <div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
+            <h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very long title that will have trouble to display because it will take multiple lines but where will it stop&nbsp;?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.</h2>
+            <div data-v-4bd07c72="" class="">
+              <div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
+                <figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
+              </div>
+              <div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
+              <div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
+                <!--v-if-->
+                <!--v-if-->
+                <!--v-if-->
+                <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </variant>
+  <variant title="tentative">
+    <router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
+      <div data-v-4bd07c72="" class="rounded-lg">
+        <div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
+          <div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+            <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+            <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <figure data-v-4bd07c72="" class="block relative pt-40">
+          <div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
+            <div class="h-full w-full max-w-100 min-h-[10rem]">
+              <!-- Show the placeholder as background -->
+              <!--v-if-->
+              <!-- 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="" loading="lazy">
+            </div>
+          </div>
+          <div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Tentative</span>
+            <!--v-if-->
+            <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+          </div>
+        </figure>
+      </div>
+      <div data-v-4bd07c72="" class="p-2 flex-auto">
+        <div data-v-4bd07c72="" class="relative flex flex-col h-full">
+          <div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
+            <!--v-if-->
+          </div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
+          <!--v-if-->
+          <div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
+            <h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
+            <div data-v-4bd07c72="" class="">
+              <div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
+                <figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
+              </div>
+              <div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
+              <div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
+                <!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Tentative</span>
+                <!--v-if-->
+                <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </variant>
+  <variant title="cancelled">
+    <router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
+      <div data-v-4bd07c72="" class="rounded-lg">
+        <div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
+          <div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+            <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+            <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <figure data-v-4bd07c72="" class="block relative pt-40">
+          <div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
+            <div class="h-full w-full max-w-100 min-h-[10rem]">
+              <!-- Show the placeholder as background -->
+              <!--v-if-->
+              <!-- 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="" loading="lazy">
+            </div>
+          </div>
+          <div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
+            <!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-danger dark:text-white">Cancelled</span>
+            <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+          </div>
+        </figure>
+      </div>
+      <div data-v-4bd07c72="" class="p-2 flex-auto">
+        <div data-v-4bd07c72="" class="relative flex flex-col h-full">
+          <div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
+            <!--v-if-->
+          </div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
+          <!--v-if-->
+          <div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
+            <h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
+            <div data-v-4bd07c72="" class="">
+              <div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
+                <figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
+              </div>
+              <div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
+              <div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
+                <!--v-if-->
+                <!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-danger dark:text-white">Cancelled</span>
+                <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </variant>
+  <variant title="Row mode">
+    <router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:flex sm:items-start">
+      <div data-v-4bd07c72="" class="rounded-lg sm:w-full sm:max-w-[20rem]">
+        <div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 sm:hidden calendar-simple">
+          <div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+            <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+            <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <figure data-v-4bd07c72="" class="block relative pt-40">
+          <div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
+            <div class="h-full w-full max-w-100 min-h-[10rem]">
+              <!-- Show the placeholder as background -->
+              <!--v-if-->
+              <!-- 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="" loading="lazy">
+            </div>
+          </div>
+          <div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end" style="display: none;">
+            <!--v-if-->
+            <!--v-if-->
+            <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+          </div>
+        </figure>
+      </div>
+      <div data-v-4bd07c72="" class="p-2 flex-auto sm:flex-1">
+        <div data-v-4bd07c72="" class="relative flex flex-col h-full">
+          <div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end sm:hidden">
+            <!--v-if-->
+          </div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden sm:block"></span>
+          <!--v-if-->
+          <div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
+            <h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very long title that will have trouble to display because it will take multiple lines but where will it stop&nbsp;?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.</h2>
+            <div data-v-4bd07c72="" class="">
+              <div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
+                <figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
+              </div>
+              <div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
+              <div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden sm:flex">
+                <!--v-if-->
+                <!--v-if-->
+                <!--v-if-->
+                <router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/EventListViewCardStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/EventListViewCardStory.spec.ts.snap
new file mode 100644
index 000000000..902d0db50
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/EventListViewCardStory.spec.ts.snap
@@ -0,0 +1,57 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Event List View Card Story > Default 1`] = `
+"<story title="EventListViewCard">
+  <variant title="default">
+    <article class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2">
+      <div class="flex gap-2">
+        <div class="">
+          <div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+            <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+            <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+          </div>
+        </div>
+        <router-link to="[object Object]">
+          <h2 class="mt-0 line-clamp-2">A very interesting event</h2>
+        </router-link>
+      </div>
+      <div class="">
+        <!--v-if--><span>Organized by Hello</span>
+      </div>
+      <div class="flex gap-1"><span><span aria-hidden="true" class="material-design-icon earth-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"><!--v-if--></path></svg></span>
+        <!--v-if-->
+        <!--v-if--></span><span><span>0 participants</span></span>
+      </div>
+    </article>
+  </variant>
+  <variant title="long">
+    <article class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2">
+      <div class="flex gap-2">
+        <div class="">
+          <div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
+            <div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
+            <div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
+          </div>
+        </div>
+        <router-link to="[object Object]">
+          <h2 class="mt-0 line-clamp-2">A very long title that will have trouble to display because it will take multiple lines but where will it stop&nbsp;?! Maybe after 3 lines is enough. Let's say so.</h2>
+        </router-link>
+      </div>
+      <div class="">
+        <!--v-if--><span>Organized by Hello</span>
+      </div>
+      <div class="flex gap-1"><span><span aria-hidden="true" class="material-design-icon earth-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"><!--v-if--></path></svg></span>
+        <!--v-if-->
+        <!--v-if--></span><span><span>0 participants</span></span>
+      </div>
+    </article>
+  </variant>
+  <!-- <Variant title="tentative">
+      <EventListViewCard :event="tentativeEvent" />
+    </Variant>
+
+    <Variant title="cancelled">
+      <EventListViewCard :event="cancelledEvent" />
+    </Variant> -->
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/GroupCardStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/GroupCardStory.spec.ts.snap
new file mode 100644
index 000000000..88b3a5ae1
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/GroupCardStory.spec.ts.snap
@@ -0,0 +1,86 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Group Card Story > Default 1`] = `
+"<story>
+  <variant title="Empty">
+    <div class="p-5">
+      <router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
+        <div class="flex-none p-2 md:p-4"><span 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>
+        <div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full">
+          <div class="flex gap-1 mb-2">
+            <div class="overflow-hidden flex-auto">
+              <h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
+            </div>
+          </div>
+          <div class="mb-2 line-clamp-3" dir="auto"></div>
+          <div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+        </div>
+      </router-link>
+    </div>
+  </variant>
+  <variant title="With media">
+    <div class="p-5">
+      <router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
+        <div class="flex-none p-2 md:p-4">
+          <figure class=""><img class="rounded-full" src="https://mobilizon.fr/media/890f5396ef80081a6b1b18a5db969746cf8bb340e8a4e657d665e41f6646c539.jpg?name=framasoft%27s%20avatar.jpg" alt="" height="128" width="128"></figure>
+        </div>
+        <div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full">
+          <div class="flex gap-1 mb-2">
+            <div class="overflow-hidden flex-auto">
+              <h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
+            </div>
+          </div>
+          <div class="mb-2 line-clamp-3" dir="auto"></div>
+          <div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+        </div>
+      </router-link>
+    </div>
+  </variant>
+  <variant title="with followers or members">
+    <div class="p-5">
+      <router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
+        <div class="flex-none p-2 md:p-4">
+          <figure class=""><img class="rounded-full" src="https://mobilizon.fr/media/890f5396ef80081a6b1b18a5db969746cf8bb340e8a4e657d665e41f6646c539.jpg?name=framasoft%27s%20avatar.jpg" alt="" height="128" width="128"></figure>
+        </div>
+        <div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full">
+          <div class="flex gap-1 mb-2">
+            <div class="overflow-hidden flex-auto">
+              <h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
+            </div>
+          </div>
+          <div class="mb-2 line-clamp-3" dir="auto">You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:h-full to apply the h-full utility at only medium screen sizes and above.</div>
+          <div>
+            <div class="truncate flex gap-1" dir="auto" title="Nantes, undefined"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Nantes</span></div>
+            <p class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"><!--v-if--></path></svg></span> 7 members or followers</p>
+          </div>
+        </div>
+      </router-link>
+    </div>
+  </variant>
+  <variant title="Row mode">
+    <router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:flex-row">
+      <div class="flex-none p-2 md:p-4">
+        <figure class=""><img class="rounded-full" src="https://mobilizon.fr/media/890f5396ef80081a6b1b18a5db969746cf8bb340e8a4e657d665e41f6646c539.jpg?name=framasoft%27s%20avatar.jpg" alt="" height="128" width="128"></figure>
+      </div>
+      <div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full sm:flex-1">
+        <div class="flex gap-1 mb-2">
+          <div class="overflow-hidden flex-auto">
+            <h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
+          </div>
+        </div>
+        <div class="mb-2 line-clamp-3" dir="auto">You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:h-full to apply the h-full utility at only medium screen sizes and above.</div>
+        <div>
+          <div class="truncate flex gap-1" dir="auto" title="Nantes, undefined"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Nantes</span></div>
+          <p class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"><!--v-if--></path></svg></span> 7 members or followers</p>
+        </div>
+      </div>
+    </router-link>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/GroupMemberCardStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/GroupMemberCardStory.spec.ts.snap
new file mode 100644
index 000000000..67bd3ee3e
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/GroupMemberCardStory.spec.ts.snap
@@ -0,0 +1,107 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Group Member Card Story > Default 1`] = `
+"<story>
+  <variant title="simple member">
+    <div class="p-5">
+      <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
+        <div class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg" dir="auto">
+          <figure class=""><img class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="24" height="24"></figure> Thomas Citharel (@tcit)
+        </div>
+        <div class="flex items-center gap-2 p-2 pr-4" dir="auto">
+          <div class="flex-1">
+            <div class="p-2 flex gap-2">
+              <div class="">
+                <figure class="h-12 w-12"><img class="rounded-full w-full h-full object-cover" src="https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png" alt="" width="48" height="48"></figure>
+              </div>
+              <div class="" dir="auto">
+                <router-link to="[object Object]">
+                  <h2 class="mt-0">Framasoft</h2>
+                  <div class="flex flex-col items-start"><span class="text-sm">@framasoft@mobilizon.fr</span>
+                    <!--v-if-->
+                  </div>
+                </router-link>
+              </div>
+            </div>
+            <div class="mt-3 prose dark:prose-invert lg:prose-xl prose-p:m-0 line-clamp-2">
+              <p><strong>La Fediverse</strong>, <strong>c'est la <em><u>Féd</u>ération qui englobe l'Un<u>ivers</u> des réseaux sociaux libres et décentralisés,</em> </strong>dont Mobilizon (évènements), Mastodon (microblog), Peertube (vidéos), Pixelfed (photos), Funkwhale (musique), Matrix (messagerie instantanée)... et tant d'autres font partie.</p>
+              <p><strong>Et "La Fediverse <em>Nantaise</em>" est un collectif cherchant à faire connaître localement tout le potentiel de ces réseaux ! :-)</strong></p>
+            </div>
+          </div>
+          <div>
+            <o-dropdown aria-role="list" position="bottom-left">
+              <o-dropdown-item class="inline-flex gap-1" aria-role="listitem"><span aria-hidden="true" class="material-design-icon exit-to-app-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"><!--v-if--></path></svg></span> Leave</o-dropdown-item>
+            </o-dropdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  </variant>
+  <variant title="moderator">
+    <div class="p-5">
+      <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
+        <div class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg" dir="auto">
+          <figure class=""><img class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="24" height="24"></figure> Thomas Citharel (@tcit)
+        </div>
+        <div class="flex items-center gap-2 p-2 pr-4" dir="auto">
+          <div class="flex-1">
+            <div class="p-2 flex gap-2">
+              <div class="">
+                <figure class="h-12 w-12"><img class="rounded-full w-full h-full object-cover" src="https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png" alt="" width="48" height="48"></figure>
+              </div>
+              <div class="" dir="auto">
+                <router-link to="[object Object]">
+                  <h2 class="mt-0">Framasoft</h2>
+                  <div class="flex flex-col items-start"><span class="text-sm">@framasoft@mobilizon.fr</span><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Moderator</span></div>
+                </router-link>
+              </div>
+            </div>
+            <div class="mt-3 prose dark:prose-invert lg:prose-xl prose-p:m-0 line-clamp-2">
+              <p><strong>La Fediverse</strong>, <strong>c'est la <em><u>Féd</u>ération qui englobe l'Un<u>ivers</u> des réseaux sociaux libres et décentralisés,</em> </strong>dont Mobilizon (évènements), Mastodon (microblog), Peertube (vidéos), Pixelfed (photos), Funkwhale (musique), Matrix (messagerie instantanée)... et tant d'autres font partie.</p>
+              <p><strong>Et "La Fediverse <em>Nantaise</em>" est un collectif cherchant à faire connaître localement tout le potentiel de ces réseaux ! :-)</strong></p>
+            </div>
+          </div>
+          <div>
+            <o-dropdown aria-role="list" position="bottom-left">
+              <o-dropdown-item class="inline-flex gap-1" aria-role="listitem"><span aria-hidden="true" class="material-design-icon exit-to-app-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"><!--v-if--></path></svg></span> Leave</o-dropdown-item>
+            </o-dropdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  </variant>
+  <variant title="administrator">
+    <div class="p-5">
+      <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
+        <div class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg" dir="auto">
+          <figure class=""><img class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="24" height="24"></figure> Thomas Citharel (@tcit)
+        </div>
+        <div class="flex items-center gap-2 p-2 pr-4" dir="auto">
+          <div class="flex-1">
+            <div class="p-2 flex gap-2">
+              <div class="">
+                <figure class="h-12 w-12"><img class="rounded-full w-full h-full object-cover" src="https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png" alt="" width="48" height="48"></figure>
+              </div>
+              <div class="" dir="auto">
+                <router-link to="[object Object]">
+                  <h2 class="mt-0">Framasoft</h2>
+                  <div class="flex flex-col items-start"><span class="text-sm">@framasoft@mobilizon.fr</span><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Administrator</span></div>
+                </router-link>
+              </div>
+            </div>
+            <div class="mt-3 prose dark:prose-invert lg:prose-xl prose-p:m-0 line-clamp-2">
+              <p><strong>La Fediverse</strong>, <strong>c'est la <em><u>Féd</u>ération qui englobe l'Un<u>ivers</u> des réseaux sociaux libres et décentralisés,</em> </strong>dont Mobilizon (évènements), Mastodon (microblog), Peertube (vidéos), Pixelfed (photos), Funkwhale (musique), Matrix (messagerie instantanée)... et tant d'autres font partie.</p>
+              <p><strong>Et "La Fediverse <em>Nantaise</em>" est un collectif cherchant à faire connaître localement tout le potentiel de ces réseaux ! :-)</strong></p>
+            </div>
+          </div>
+          <div>
+            <o-dropdown aria-role="list" position="bottom-left">
+              <o-dropdown-item class="inline-flex gap-1" aria-role="listitem"><span aria-hidden="true" class="material-design-icon exit-to-app-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"><!--v-if--></path></svg></span> Leave</o-dropdown-item>
+            </o-dropdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/InlineAddressStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/InlineAddressStory.spec.ts.snap
new file mode 100644
index 000000000..0edc634b4
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/InlineAddressStory.spec.ts.snap
@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Inline Address Story > Default 1`] = `
+"<story>
+  <variant title="with locality">
+    <div class="truncate flex gap-1" dir="auto" title="Locaux Motiv, Lyon"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Lyon</span></div>
+  </variant>
+  <variant title="without locality">
+    <div class="truncate flex gap-1" dir="auto" title="Locaux Motiv, null"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Locaux Motiv</span></div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/InstanceContactLinkStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/InstanceContactLinkStory.spec.ts.snap
new file mode 100644
index 000000000..846b5afb1
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/InstanceContactLinkStory.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Instance Contact Link Story > Default 1`] = `
+"<story>
+  <variant title="empty">
+    <p><span>contact uninformed</span></p>
+  </variant>
+  <variant title="string">
+    <p><span dir="auto">someone</span></p>
+  </variant>
+  <variant title="email">
+    <p><a dir="auto" title="someone@somewhere.tld" href="mailto:someone@somewhere.tld">someone@somewhere.tld</a></p>
+  </variant>
+  <variant title="url">
+    <p><a dir="auto" title="https://somewhere.com" href="https://somewhere.com">somewhere.com</a></p>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/MaterialIconStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/MaterialIconStory.spec.ts.snap
new file mode 100644
index 000000000..ac624fea6
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/MaterialIconStory.spec.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Material Icon Story > Default 1`] = `
+"<story layout="[object Object]">
+  <variant title="Google">
+    <!---->
+  </variant>
+  <variant title="Calendar">
+    <!---->
+  </variant>
+  <variant title="Account Multiple Plus">
+    <!---->
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/MobilizonPresentationStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/MobilizonPresentationStory.spec.ts.snap
new file mode 100644
index 000000000..a2e82a143
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/MobilizonPresentationStory.spec.ts.snap
@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Mobilizon Presentation Story > Default 1`] = `
+"<story>
+  <variant>
+    <div class="container mx-auto py-4 px-2">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+        <div>
+          <h3 class="dark:text-white text-3xl font-bold">A practical tool</h3>
+          <p class="dark:text-white">Mobilizon is a tool that helps you <b>find, create and organise events</b>.</p>
+        </div>
+        <div>
+          <h3 class="dark:text-white text-3xl font-bold">An ethical alternative</h3>
+          <p class="dark:text-white">Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.</p>
+        </div>
+        <div>
+          <h3 class="dark:text-white text-3xl font-bold">A federated software</h3>
+          <p class="dark:text-white">Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.</p>
+        </div>
+      </div>
+      <div class="mt-4 text-center">
+        <o-button variant="primary" size="large" tag="a" href="https://joinmobilizon.org">Learn more about Mobilizon</o-button>
+      </div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/PopoverActorCardStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/PopoverActorCardStory.spec.ts.snap
new file mode 100644
index 000000000..5094b67ff
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/PopoverActorCardStory.spec.ts.snap
@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Popover Actor Card Story > Default 1`] = `
+"<story>
+  <variant setup-app="function setupApp({ app }) {
+      app.use(__vite_ssr_import_2__.default);
+    }" title="Person">
+    <div class="p-5">
+      <vmenu distance="16" triggers="hover" class="popover">
+        <div><b> Popover me !</b></div>
+      </vmenu>
+    </div>
+  </variant>
+  <variant setup-app="function setupApp({ app }) {
+      app.use(__vite_ssr_import_2__.default);
+    }" title="Group">
+    <div class="p-5">
+      <vmenu distance="16" triggers="hover" class="popover">
+        <div><b> Popover me !</b></div>
+      </vmenu>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/PostListItemStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/PostListItemStory.spec.ts.snap
new file mode 100644
index 000000000..d92c6bd9e
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/PostListItemStory.spec.ts.snap
@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Post List Item Story > Default 1`] = `
+"<story>
+  <variant title="Public">
+    <router-link data-v-6ca7cc69="" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto" to="[object Object]">
+      <div data-v-6ca7cc69="" class="flex-1 object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg">
+        <div class="h-full w-full max-w-100 min-h-[10rem]">
+          <!-- Show the placeholder as background -->
+          <!--v-if-->
+          <!-- 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="" loading="lazy">
+        </div>
+      </div>
+      <div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+        <h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold">Musique sur Nantes : un groupe à développer ensemble !</h3>
+        <p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="">less than a minute ago</span></p>
+        <div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z"><!--v-if--></path></svg></span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Musique</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Concert</span></div>
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </router-link>
+  </variant>
+  <variant title="Long">
+    <router-link data-v-6ca7cc69="" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto" to="[object Object]">
+      <div data-v-6ca7cc69="" class="flex-1 object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg">
+        <div class="h-full w-full max-w-100 min-h-[10rem]">
+          <!-- Show the placeholder as background -->
+          <!--v-if-->
+          <!-- 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="" loading="lazy">
+        </div>
+      </div>
+      <div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+        <h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold">Musique sur Nantes : un groupe à développer ensemble ! Musique sur Nantes : un groupe à développer ensemble !</h3>
+        <p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="">less than a minute ago</span></p>
+        <div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z"><!--v-if--></path></svg></span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Musique</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Concert</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">VeryLongTagWhatHappensThen</span></div>
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+    </router-link>
+  </variant>
+  <variant title="Is member">
+    <router-link data-v-6ca7cc69="" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto" to="[object Object]">
+      <div data-v-6ca7cc69="" class="flex-1 object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg">
+        <div class="h-full w-full max-w-100 min-h-[10rem]">
+          <!-- Show the placeholder as background -->
+          <!--v-if-->
+          <!-- 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="" loading="lazy">
+        </div>
+      </div>
+      <div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+        <h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold">Musique sur Nantes : un groupe à développer ensemble ! Musique sur Nantes : un groupe à développer ensemble !</h3>
+        <p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="">less than a minute ago</span></p>
+        <div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z"><!--v-if--></path></svg></span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Musique</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Concert</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">VeryLongTagWhatHappensThen</span></div>
+        <p data-v-6ca7cc69="" class="flex gap-1"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon account-edit-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z"><!--v-if--></path></svg></span>Published by <b data-v-6ca7cc69="" class="">I'm the author</b></p>
+        <!--v-if-->
+      </div>
+    </router-link>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/ProfileOnboardingStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/ProfileOnboardingStory.spec.ts.snap
new file mode 100644
index 000000000..883a2581c
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/ProfileOnboardingStory.spec.ts.snap
@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Profile On boarding Story > Default 1`] = `
+"<story>
+  <variant>
+    <div class="p-5">
+      <div class="">
+        <h2 class="text-2xl">Profiles and federation</h2>
+      </div>
+      <p class="my-2">Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want.</p>
+      <hr role="presentation">
+      <p class="my-2"><span>Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere.</span>This instance, <b>Instance name (localhost)</b>, hosts your profile, so remember its name.</p>
+      <hr role="presentation">
+      <p class="my-2">If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:</p>
+      <div class="text-center"><code>tcit@localhost</code></div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/ShareEventModalStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/ShareEventModalStory.spec.ts.snap
new file mode 100644
index 000000000..163075790
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/ShareEventModalStory.spec.ts.snap
@@ -0,0 +1,99 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Share Event Modal Story > Default 1`] = `
+"<story>
+  <variant title="Public">
+    <div class="dark:text-white">
+      <div data-v-2242ad82="" class="dark:text-white p-4">
+        <header data-v-2242ad82="" class="">
+          <h2 data-v-2242ad82="" class="text-2xl">Share this event</h2>
+        </header>
+        <section data-v-2242ad82="" class="flex">
+          <div data-v-2242ad82="" class="w-full">
+            <o-field data-v-2242ad82="" label="Event URL" label-for="url-text">
+              <o-input data-v-2242ad82="" id="url-text" modelvalue="https://mobilizon.fr/events/an-uuid" expanded=""></o-input>
+              <p data-v-2242ad82="" class="control">
+                <o-tooltip data-v-2242ad82="" label="URL copied to clipboard" active="false" variant="success" position="left"></o-tooltip>
+                <o-button data-v-2242ad82="" variant="primary" icon-right="content-paste" native-type="button" title="Copy URL to clipboard"></o-button>
+              </p>
+            </o-field>
+            <div data-v-2242ad82="" class="flex flex-wrap gap-1"><a data-v-2242ad82="" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" target="_blank" rel="nofollow noopener" title="Twitter"><span data-v-2242ad82="" class="dark:text-white material-design-icon twitter-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://toot.kytta.dev/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="mastodon" target="_blank" rel="nofollow noopener" title="Mastodon"><span data-v-2242ad82="" class="text-primary dark:text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><title>Mastodon logo</title><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"></path></svg></span></a><a data-v-2242ad82="" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="Facebook"><span data-v-2242ad82="" class="dark:text-white material-design-icon facebook-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://wa.me/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="WhatsApp"><span data-v-2242ad82="" class="dark:text-white material-design-icon whatsapp-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://t.me/share/url?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" class="telegram" target="_blank" rel="nofollow noopener" title="Telegram"><span data-v-2242ad82="" class="text-primary dark:text-white dark:fill-white"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg></span></a><a data-v-2242ad82="" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;title=hello" target="_blank" rel="nofollow noopener" title="LinkedIn"><span data-v-2242ad82="" class="dark:text-white material-design-icon linkedin-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://share.diasporafoundation.org/?title=hello&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="diaspora" target="_blank" rel="nofollow noopener" title="Diaspora"><span data-v-2242ad82="" class="text-black dark:text-white dark:fill-white"><svg version="1.1" viewBox="0 0 65.131 65.131" xmlns="http://www.w3.org/2000/svg"><title>Diaspora logo</title><path d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z" stroke-width=".33922"></path><path d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z" fill="transparent" stroke-width=".093311"></path></svg></span></a><a data-v-2242ad82="" href="mailto:?to=&amp;body=https://mobilizon.fr/events/an-uuid&amp;subject=hello" target="_blank" rel="nofollow noopener" title="Email"><span data-v-2242ad82="" class="dark:text-white material-design-icon email-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </variant>
+  <variant title="Private">
+    <div class="dark:text-white">
+      <div data-v-2242ad82="" class="dark:text-white p-4">
+        <header data-v-2242ad82="" class="">
+          <h2 data-v-2242ad82="" class="text-2xl">Share this event</h2>
+        </header>
+        <section data-v-2242ad82="" class="flex">
+          <div data-v-2242ad82="" class="w-full">
+            <o-notification variant="warning" closable="false">This event is accessible only through it's link. Be careful where you post this link.</o-notification>
+            <!--v-if-->
+            <!--v-if-->
+            <o-field data-v-2242ad82="" label="Event URL" label-for="url-text">
+              <o-input data-v-2242ad82="" id="url-text" modelvalue="https://mobilizon.fr/events/an-uuid" expanded=""></o-input>
+              <p data-v-2242ad82="" class="control">
+                <o-tooltip data-v-2242ad82="" label="URL copied to clipboard" active="false" variant="success" position="left"></o-tooltip>
+                <o-button data-v-2242ad82="" variant="primary" icon-right="content-paste" native-type="button" title="Copy URL to clipboard"></o-button>
+              </p>
+            </o-field>
+            <div data-v-2242ad82="" class="flex flex-wrap gap-1"><a data-v-2242ad82="" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" target="_blank" rel="nofollow noopener" title="Twitter"><span data-v-2242ad82="" class="dark:text-white material-design-icon twitter-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://toot.kytta.dev/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="mastodon" target="_blank" rel="nofollow noopener" title="Mastodon"><span data-v-2242ad82="" class="text-primary dark:text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><title>Mastodon logo</title><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"></path></svg></span></a><a data-v-2242ad82="" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="Facebook"><span data-v-2242ad82="" class="dark:text-white material-design-icon facebook-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://wa.me/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="WhatsApp"><span data-v-2242ad82="" class="dark:text-white material-design-icon whatsapp-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://t.me/share/url?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" class="telegram" target="_blank" rel="nofollow noopener" title="Telegram"><span data-v-2242ad82="" class="text-primary dark:text-white dark:fill-white"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg></span></a><a data-v-2242ad82="" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;title=hello" target="_blank" rel="nofollow noopener" title="LinkedIn"><span data-v-2242ad82="" class="dark:text-white material-design-icon linkedin-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://share.diasporafoundation.org/?title=hello&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="diaspora" target="_blank" rel="nofollow noopener" title="Diaspora"><span data-v-2242ad82="" class="text-black dark:text-white dark:fill-white"><svg version="1.1" viewBox="0 0 65.131 65.131" xmlns="http://www.w3.org/2000/svg"><title>Diaspora logo</title><path d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z" stroke-width=".33922"></path><path d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z" fill="transparent" stroke-width=".093311"></path></svg></span></a><a data-v-2242ad82="" href="mailto:?to=&amp;body=https://mobilizon.fr/events/an-uuid&amp;subject=hello" target="_blank" rel="nofollow noopener" title="Email"><span data-v-2242ad82="" class="dark:text-white material-design-icon email-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </variant>
+  <variant title="Cancelled">
+    <div class="dark:text-white">
+      <div data-v-2242ad82="" class="dark:text-white p-4">
+        <header data-v-2242ad82="" class="">
+          <h2 data-v-2242ad82="" class="text-2xl">Share this event</h2>
+        </header>
+        <section data-v-2242ad82="" class="flex">
+          <div data-v-2242ad82="" class="w-full">
+            <!--v-if-->
+            <o-notification variant="danger" closable="false">This event has been cancelled.</o-notification>
+            <!--v-if-->
+            <o-field data-v-2242ad82="" label="Event URL" label-for="url-text">
+              <o-input data-v-2242ad82="" id="url-text" modelvalue="https://mobilizon.fr/events/an-uuid" expanded=""></o-input>
+              <p data-v-2242ad82="" class="control">
+                <o-tooltip data-v-2242ad82="" label="URL copied to clipboard" active="false" variant="success" position="left"></o-tooltip>
+                <o-button data-v-2242ad82="" variant="primary" icon-right="content-paste" native-type="button" title="Copy URL to clipboard"></o-button>
+              </p>
+            </o-field>
+            <div data-v-2242ad82="" class="flex flex-wrap gap-1"><a data-v-2242ad82="" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" target="_blank" rel="nofollow noopener" title="Twitter"><span data-v-2242ad82="" class="dark:text-white material-design-icon twitter-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://toot.kytta.dev/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="mastodon" target="_blank" rel="nofollow noopener" title="Mastodon"><span data-v-2242ad82="" class="text-primary dark:text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><title>Mastodon logo</title><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"></path></svg></span></a><a data-v-2242ad82="" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="Facebook"><span data-v-2242ad82="" class="dark:text-white material-design-icon facebook-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://wa.me/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="WhatsApp"><span data-v-2242ad82="" class="dark:text-white material-design-icon whatsapp-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://t.me/share/url?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" class="telegram" target="_blank" rel="nofollow noopener" title="Telegram"><span data-v-2242ad82="" class="text-primary dark:text-white dark:fill-white"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg></span></a><a data-v-2242ad82="" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;title=hello" target="_blank" rel="nofollow noopener" title="LinkedIn"><span data-v-2242ad82="" class="dark:text-white material-design-icon linkedin-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://share.diasporafoundation.org/?title=hello&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="diaspora" target="_blank" rel="nofollow noopener" title="Diaspora"><span data-v-2242ad82="" class="text-black dark:text-white dark:fill-white"><svg version="1.1" viewBox="0 0 65.131 65.131" xmlns="http://www.w3.org/2000/svg"><title>Diaspora logo</title><path d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z" stroke-width=".33922"></path><path d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z" fill="transparent" stroke-width=".093311"></path></svg></span></a><a data-v-2242ad82="" href="mailto:?to=&amp;body=https://mobilizon.fr/events/an-uuid&amp;subject=hello" target="_blank" rel="nofollow noopener" title="Email"><span data-v-2242ad82="" class="dark:text-white material-design-icon email-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </variant>
+  <variant title="No seats left">
+    <div class="dark:text-white">
+      <div data-v-2242ad82="" class="dark:text-white p-4">
+        <header data-v-2242ad82="" class="">
+          <h2 data-v-2242ad82="" class="text-2xl">Share this event</h2>
+        </header>
+        <section data-v-2242ad82="" class="flex">
+          <div data-v-2242ad82="" class="w-full">
+            <!--v-if-->
+            <!--v-if-->
+            <o-notification variant="warning">All the places have already been taken</o-notification>
+            <o-field data-v-2242ad82="" label="Event URL" label-for="url-text">
+              <o-input data-v-2242ad82="" id="url-text" modelvalue="https://mobilizon.fr/events/an-uuid" expanded=""></o-input>
+              <p data-v-2242ad82="" class="control">
+                <o-tooltip data-v-2242ad82="" label="URL copied to clipboard" active="false" variant="success" position="left"></o-tooltip>
+                <o-button data-v-2242ad82="" variant="primary" icon-right="content-paste" native-type="button" title="Copy URL to clipboard"></o-button>
+              </p>
+            </o-field>
+            <div data-v-2242ad82="" class="flex flex-wrap gap-1"><a data-v-2242ad82="" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" target="_blank" rel="nofollow noopener" title="Twitter"><span data-v-2242ad82="" class="dark:text-white material-design-icon twitter-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://toot.kytta.dev/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="mastodon" target="_blank" rel="nofollow noopener" title="Mastodon"><span data-v-2242ad82="" class="text-primary dark:text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><title>Mastodon logo</title><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"></path></svg></span></a><a data-v-2242ad82="" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="Facebook"><span data-v-2242ad82="" class="dark:text-white material-design-icon facebook-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://wa.me/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" target="_blank" rel="nofollow noopener" title="WhatsApp"><span data-v-2242ad82="" class="dark:text-white material-design-icon whatsapp-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://t.me/share/url?url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;text=hello" class="telegram" target="_blank" rel="nofollow noopener" title="Telegram"><span data-v-2242ad82="" class="text-primary dark:text-white dark:fill-white"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg></span></a><a data-v-2242ad82="" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid&amp;title=hello" target="_blank" rel="nofollow noopener" title="LinkedIn"><span data-v-2242ad82="" class="dark:text-white material-design-icon linkedin-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://share.diasporafoundation.org/?title=hello&amp;url=https%3A%2F%2Fmobilizon.fr%2Fevents%2Fan-uuid" class="diaspora" target="_blank" rel="nofollow noopener" title="Diaspora"><span data-v-2242ad82="" class="text-black dark:text-white dark:fill-white"><svg version="1.1" viewBox="0 0 65.131 65.131" xmlns="http://www.w3.org/2000/svg"><title>Diaspora logo</title><path d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z" stroke-width=".33922"></path><path d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z" fill="transparent" stroke-width=".093311"></path></svg></span></a><a data-v-2242ad82="" href="mailto:?to=&amp;body=https://mobilizon.fr/events/an-uuid&amp;subject=hello" target="_blank" rel="nofollow noopener" title="Email"><span data-v-2242ad82="" class="dark:text-white material-design-icon email-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/SharePostModalStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/SharePostModalStory.spec.ts.snap
new file mode 100644
index 000000000..4e8fcaa9e
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/SharePostModalStory.spec.ts.snap
@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Share Post Modal Story > Default 1`] = `
+"<story>
+  <variant title="Public">
+    <div data-v-2242ad82="" data-v-f94f3b17="" class="dark:text-white p-4">
+      <header data-v-2242ad82="" class="">
+        <h2 data-v-2242ad82="" class="text-2xl">Share this post</h2>
+      </header>
+      <section data-v-2242ad82="" class="flex">
+        <div data-v-2242ad82="" class="w-full">
+          <o-field data-v-2242ad82="" label="Post URL" label-for="url-text">
+            <o-input data-v-2242ad82="" id="url-text" modelvalue="https://mobilizon.fr/p/an-uuid" expanded=""></o-input>
+            <p data-v-2242ad82="" class="control">
+              <o-tooltip data-v-2242ad82="" label="URL copied to clipboard" active="false" variant="success" position="left"></o-tooltip>
+              <o-button data-v-2242ad82="" variant="primary" icon-right="content-paste" native-type="button" title="Copy URL to clipboard"></o-button>
+            </p>
+          </o-field>
+          <div data-v-2242ad82="" class="flex flex-wrap gap-1"><a data-v-2242ad82="" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid&amp;text=hello" target="_blank" rel="nofollow noopener" title="Twitter"><span data-v-2242ad82="" class="dark:text-white material-design-icon twitter-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://toot.kytta.dev/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" class="mastodon" target="_blank" rel="nofollow noopener" title="Mastodon"><span data-v-2242ad82="" class="text-primary dark:text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><title>Mastodon logo</title><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"></path></svg></span></a><a data-v-2242ad82="" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" target="_blank" rel="nofollow noopener" title="Facebook"><span data-v-2242ad82="" class="dark:text-white material-design-icon facebook-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://wa.me/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" target="_blank" rel="nofollow noopener" title="WhatsApp"><span data-v-2242ad82="" class="dark:text-white material-design-icon whatsapp-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://t.me/share/url?url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid&amp;text=hello" class="telegram" target="_blank" rel="nofollow noopener" title="Telegram"><span data-v-2242ad82="" class="text-primary dark:text-white dark:fill-white"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg></span></a><a data-v-2242ad82="" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid&amp;title=hello" target="_blank" rel="nofollow noopener" title="LinkedIn"><span data-v-2242ad82="" class="dark:text-white material-design-icon linkedin-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://share.diasporafoundation.org/?title=hello&amp;url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" class="diaspora" target="_blank" rel="nofollow noopener" title="Diaspora"><span data-v-2242ad82="" class="text-black dark:text-white dark:fill-white"><svg version="1.1" viewBox="0 0 65.131 65.131" xmlns="http://www.w3.org/2000/svg"><title>Diaspora logo</title><path d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z" stroke-width=".33922"></path><path d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z" fill="transparent" stroke-width=".093311"></path></svg></span></a><a data-v-2242ad82="" href="mailto:?to=&amp;body=https://mobilizon.fr/p/an-uuid&amp;subject=hello" target="_blank" rel="nofollow noopener" title="Email"><span data-v-2242ad82="" class="dark:text-white material-design-icon email-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+        </div>
+      </section>
+    </div>
+  </variant>
+  <variant title="Private">
+    <div data-v-2242ad82="" data-v-f94f3b17="" class="dark:text-white p-4">
+      <header data-v-2242ad82="" class="">
+        <h2 data-v-2242ad82="" class="text-2xl">Share this post</h2>
+      </header>
+      <section data-v-2242ad82="" class="flex">
+        <div data-v-2242ad82="" class="w-full">
+          <o-field data-v-2242ad82="" label="Post URL" label-for="url-text">
+            <o-input data-v-2242ad82="" id="url-text" modelvalue="https://mobilizon.fr/p/an-uuid" expanded=""></o-input>
+            <p data-v-2242ad82="" class="control">
+              <o-tooltip data-v-2242ad82="" label="URL copied to clipboard" active="false" variant="success" position="left"></o-tooltip>
+              <o-button data-v-2242ad82="" variant="primary" icon-right="content-paste" native-type="button" title="Copy URL to clipboard"></o-button>
+            </p>
+          </o-field>
+          <div data-v-2242ad82="" class="flex flex-wrap gap-1"><a data-v-2242ad82="" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid&amp;text=hello" target="_blank" rel="nofollow noopener" title="Twitter"><span data-v-2242ad82="" class="dark:text-white material-design-icon twitter-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://toot.kytta.dev/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" class="mastodon" target="_blank" rel="nofollow noopener" title="Mastodon"><span data-v-2242ad82="" class="text-primary dark:text-white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><title>Mastodon logo</title><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"></path><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"></path></svg></span></a><a data-v-2242ad82="" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" target="_blank" rel="nofollow noopener" title="Facebook"><span data-v-2242ad82="" class="dark:text-white material-design-icon facebook-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://wa.me/?text=hello%0D%0Ahttps%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" target="_blank" rel="nofollow noopener" title="WhatsApp"><span data-v-2242ad82="" class="dark:text-white material-design-icon whatsapp-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://t.me/share/url?url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid&amp;text=hello" class="telegram" target="_blank" rel="nofollow noopener" title="Telegram"><span data-v-2242ad82="" class="text-primary dark:text-white dark:fill-white"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"></path></svg></span></a><a data-v-2242ad82="" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid&amp;title=hello" target="_blank" rel="nofollow noopener" title="LinkedIn"><span data-v-2242ad82="" class="dark:text-white material-design-icon linkedin-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z"><!--v-if--></path></svg></span></a><a data-v-2242ad82="" href="https://share.diasporafoundation.org/?title=hello&amp;url=https%3A%2F%2Fmobilizon.fr%2Fp%2Fan-uuid" class="diaspora" target="_blank" rel="nofollow noopener" title="Diaspora"><span data-v-2242ad82="" class="text-black dark:text-white dark:fill-white"><svg version="1.1" viewBox="0 0 65.131 65.131" xmlns="http://www.w3.org/2000/svg"><title>Diaspora logo</title><path d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z" stroke-width=".33922"></path><path d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z" fill="transparent" stroke-width=".093311"></path></svg></span></a><a data-v-2242ad82="" href="mailto:?to=&amp;body=https://mobilizon.fr/p/an-uuid&amp;subject=hello" target="_blank" rel="nofollow noopener" title="Email"><span data-v-2242ad82="" class="dark:text-white material-design-icon email-icon dark:text-white" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></a></div>
+        </div>
+      </section>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/SkeletonEventResultStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/SkeletonEventResultStory.spec.ts.snap
new file mode 100644
index 000000000..23f26e63f
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/SkeletonEventResultStory.spec.ts.snap
@@ -0,0 +1,64 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Skeleton Event Result Story > Default 1`] = `
+"<story>
+  <variant title="row">
+    <div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-4xl w-full mx-auto">
+      <div class="animate-pulse flex flex-col items-center md:flex-row">
+        <div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
+        <div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
+          <div class="flex space-x-4 flex-row">
+            <div class="rounded-full bg-slate-700 h-10 w-10"></div>
+            <div class="flex flex-col flex-1 space-y-2">
+              <div class="h-3 bg-slate-700"></div>
+              <div class="h-2 bg-slate-700"></div>
+            </div>
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </div>
+    </div>
+  </variant>
+  <variant title="column">
+    <div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-sm w-full mx-auto">
+      <div class="animate-pulse flex flex-col items-center md:flex-col">
+        <div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
+        <div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
+          <div class="flex space-x-4 flex-row">
+            <div class="rounded-full bg-slate-700 h-10 w-10"></div>
+            <div class="flex flex-col flex-1 space-y-2">
+              <div class="h-3 bg-slate-700"></div>
+              <div class="h-2 bg-slate-700"></div>
+            </div>
+          </div>
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+      </div>
+    </div>
+  </variant>
+  <variant title="not minimal">
+    <div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-4xl w-full mx-auto">
+      <div class="animate-pulse flex flex-col items-center md:flex-row">
+        <div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
+        <div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
+          <div class="flex space-x-4 flex-row">
+            <div class="rounded-full bg-slate-700 h-10 w-10"></div>
+            <div class="flex flex-col flex-1 space-y-2">
+              <div class="h-3 bg-slate-700"></div>
+              <div class="h-2 bg-slate-700"></div>
+            </div>
+          </div>
+          <div class="h-3 bg-slate-700 mt-3 w-60"></div>
+          <div class="flex">
+            <div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
+            <div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
+            <div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/TagInputStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/TagInputStory.spec.ts.snap
new file mode 100644
index 000000000..3263721de
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/TagInputStory.spec.ts.snap
@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Tag Input Story > Default 1`] = `
+"<story>
+  <variant title="new">
+    <o-field label-for="tag-input-1" class="taginput-field">
+      <o-taginput modelvalue="Hello" data="" allow-autocomplete="true" allow-new="true" field="title" icon="label" maxlength="20" maxitems="10" placeholder="Eg: Stockholm, Dance, Chess…" id="tag-input-1" dir="auto" expanded=""></o-taginput>
+    </o-field>
+  </variant>
+  <!-- <Variant title="small">
+      <TagInput v-model="tags" />
+    </Variant> -->
+</story>"
+`;
diff --git a/tests/unit/specs/components/stories/__snapshots__/UnloggedIntroductionStory.spec.ts.snap b/tests/unit/specs/components/stories/__snapshots__/UnloggedIntroductionStory.spec.ts.snap
new file mode 100644
index 000000000..99c0e832d
--- /dev/null
+++ b/tests/unit/specs/components/stories/__snapshots__/UnloggedIntroductionStory.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Unlogged Introduction Story > Default 1`] = `
+"<story>
+  <variant title="Open">
+    <section class="container mx-auto px-2 my-3">
+      <h1 class="dark:text-white font-bold">Test! Test! Test!</h1>
+      <p class="dark:text-white mb-2">An instance that doesn't exist</p>
+    </section>
+  </variant>
+  <variant title="Closed">
+    <section class="container mx-auto px-2 my-3">
+      <h1 class="dark:text-white font-bold">Test! Test! Test!</h1>
+      <p class="dark:text-white mb-2">An instance that doesn't exist</p>
+    </section>
+  </variant>
+</story>"
+`;
diff --git a/tests/unit/specs/mocks/auth.ts b/tests/unit/specs/mocks/auth.ts
index 53a604e87..4f8f8d79f 100644
--- a/tests/unit/specs/mocks/auth.ts
+++ b/tests/unit/specs/mocks/auth.ts
@@ -32,3 +32,13 @@ export const resetPasswordResponseMock = {
     },
   },
 };
+
+export const nullIdentityMock = {
+  data: {
+    loggedUser: {
+      __typename: "loggedUser",
+      id: 1,
+      actors: null,
+    },
+  },
+};
diff --git a/tests/unit/specs/mocks/client.ts b/tests/unit/specs/mocks/client.ts
new file mode 100644
index 000000000..3ef4ac150
--- /dev/null
+++ b/tests/unit/specs/mocks/client.ts
@@ -0,0 +1,37 @@
+import buildCurrentUserResolver from "@/apollo/user";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import { cache } from "@/apollo/memory";
+import {
+  createMockClient,
+  MockApolloClient,
+  RequestHandler,
+} from "mock-apollo-client";
+import { vi } from "vitest";
+import { nullMock } from "../common";
+
+let mockClient: MockApolloClient | null;
+let requestHandlers: Record<string, RequestHandler>;
+
+export function getMockClient(queries: Array<string>): any {
+  mockClient = createMockClient({
+    cache,
+    resolvers: buildCurrentUserResolver(cache),
+  });
+  requestHandlers = {
+    nullHandle: vi.fn().mockResolvedValue(nullMock),
+  };
+  queries.forEach((query: any) => {
+    mockClient.setRequestHandler(query, requestHandlers.nullHandle);
+  });
+  return { provide: { [DefaultApolloClient]: mockClient } };
+}
+
+export function createMockIntersectionObserver(): void {
+  const mockIntersectionObserver = vi.fn();
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null,
+  });
+  window.IntersectionObserver = mockIntersectionObserver;
+}
diff --git a/vite.config.js b/vite.config.js
index cdad55769..5728a6dc8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -116,6 +116,7 @@ export default defineConfig(({ command }) => {
       coverage: {
         reporter: ["text", "json", "html"],
         reportsDirectory: path.resolve(__dirname, "./coverage"),
+        include: ["src/**/*.{vue,js,ts}"],
       },
       setupFiles: [path.resolve(__dirname, "./tests/unit/setup.ts")],
       include: [path.resolve(__dirname, "./tests/unit/specs/**/*.spec.ts")],