Merge branch 'fixes' into 'main'

Various fixes

See merge request framasoft/mobilizon!1309

js/src/components/Address/AddressInfo.vue

@@ -113,10 +113,6 @@ address {
 
   span.addressDescription {
     text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 0 auto;
-    min-width: 100%;
-    max-width: 4rem;
     overflow: hidden;
   }
 

js/src/components/Event/EventActionSection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="">
     <participation-section
-      v-if="event && currentActor && identities && anonymousParticipationConfig"
+      v-if="event && anonymousParticipationConfig"
       :participation="participations[0]"
       :event="event"
       :anonymousParticipation="anonymousParticipation"
@@ -15,27 +15,6 @@
       @cancel-anonymous-participation="cancelAnonymousParticipation"
     />
     <div class="flex flex-col">
-      <template v-if="!event?.draft">
-        <p
-          v-if="event?.visibility === EventVisibility.PUBLIC"
-          class="inline-flex gap-1"
-        >
-          <Earth />
-          {{ t("Public event") }}
-        </p>
-        <p
-          v-if="event?.visibility === EventVisibility.UNLISTED"
-          class="inline-flex gap-1"
-        >
-          <Link />
-          {{ t("Private event") }}
-        </p>
-      </template>
-      <template v-if="!event?.local && organizer?.domain">
-        <a :href="event?.url">
-          <tag>{{ organizer?.domain }}</tag>
-        </a>
-      </template>
       <p class="inline-flex gap-1">
         <TicketConfirmationOutline />
         <router-link
@@ -327,18 +306,10 @@ import { IEvent } from "@/types/event.model";
 import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
 import ReportModal from "@/components/Report/ReportModal.vue";
 import IdentityPicker from "@/views/Account/IdentityPicker.vue";
-import {
+import { EventJoinOptions, ParticipantRole, MemberRole } from "@/types/enums";
-  EventVisibility,
-  EventJoinOptions,
-  ParticipantRole,
-  MemberRole,
-} from "@/types/enums";
 import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
 import { computed, defineAsyncComponent, inject, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import Tag from "@/components/TagElement.vue";
-import Earth from "vue-material-design-icons/Earth.vue";
-import Link from "vue-material-design-icons/Link.vue";
 import Flag from "vue-material-design-icons/Flag.vue";
 import CalendarPlus from "vue-material-design-icons/CalendarPlus.vue";
 import ContentDuplicate from "vue-material-design-icons/ContentDuplicate.vue";

js/src/components/Event/EventListViewCard.vue

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="bg-white dark:bg-gray-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2"
+    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="">

js/src/components/Event/FullAddressAutoComplete.vue

@@ -4,7 +4,7 @@
       <o-field
         :label-for="id"
         :message="fieldErrors"
-        :variant="{ danger: fieldErrors }"
+        :variant="fieldErrors ? 'danger' : ''"
         class="!-mt-2"
         :labelClass="labelClass"
       >

js/src/components/Event/ParticipationButton.vue

@@ -165,8 +165,8 @@ import TimerSandEmpty from "vue-material-design-icons/TimerSandEmpty.vue";
 const props = defineProps<{
   participation: IParticipant | undefined;
   event: IEvent;
-  currentActor: IPerson;
+  currentActor: IPerson | undefined;
-  identities: IPerson[];
+  identities: IPerson[] | undefined;
 }>();
 
 const emit = defineEmits([

js/src/components/Event/SkeletonEventResultList.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="bg-white dark:bg-slate-800 shadow rounded-md w-full mx-auto">
+    <div class="animate-pulse flex flex-col sm:flex-row space-3-4 items-center">
+      <div class="object-cover h-40 w-72 bg-slate-700 m-2 md:m-4 shrink-0" />
+
+      <div
+        class="flex gap-3 flex self-start flex-col justify-between m-2 md:m-4 w-full px-2 md:px-4"
+      >
+        <div class="h-3 bg-slate-700 w-52 hidden sm:block"></div>
+        <div class="h-5 bg-slate-700 w-72 lg:w-96"></div>
+        <div class="flex items-center">
+          <div
+            class="rounded-full object-cover h-6 w-6 bg-slate-700 mx-2 shrink-0"
+          />
+          <div class="h-3 bg-slate-700 w-52"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

js/src/components/Group/SkeletonGroupResultList.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="bg-white dark:bg-slate-800 shadow rounded-md w-full mx-auto">
+    <div class="animate-pulse flex flex-col sm:flex-row space-3-4 items-center">
+      <div
+        class="object-cover h-40 w-40 rounded-full bg-slate-700 m-2 md:m-4 shrink-0"
+      />
+
+      <div
+        class="flex gap-3 flex self-start flex-col justify-between m-2 md:m-4 self-center w-full px-2 md:px-4"
+      >
+        <div class="h-5 bg-slate-700 w-64"></div>
+        <div class="h-3 bg-slate-700 w-52"></div>
+      </div>
+    </div>
+  </div>
+</template>

js/src/components/Participation/ParticipationSection.vue

@@ -138,8 +138,8 @@ const props = withDefaults(
     participation: IParticipant | undefined;
     event: IEvent;
     anonymousParticipation?: boolean | null;
-    currentActor: IPerson;
+    currentActor: IPerson | undefined;
-    identities: IPerson[];
+    identities: IPerson[] | undefined;
     anonymousParticipationConfig: IAnonymousParticipationConfig;
   }>(),
   {

js/src/components/Participation/UnloggedParticipation.vue

@@ -1,106 +1,99 @@
 <template>
-  <section class="container mx-auto hero">
+  <section class="container mx-auto max-w-2xl">
-    <div class="hero-body" v-if="event">
+    <h2 class="text-2xl">
-      <div class="container mx-auto">
+      {{ t("You wish to participate to the following event") }}
-        <h2 class="text-2xl">
+    </h2>
-          {{ $t("You wish to participate to the following event") }}
+    <EventListViewCard v-if="event" :event="event" />
-        </h2>
+    <div class="flex flex-wrap gap-4 items-center w-full my-6">
-        <EventListViewCard v-if="event" :event="event" />
+      <div class="bg-white dark:bg-zinc-700 rounded-md p-4 flex-1">
-        <div class="columns has-text-centered">
+        <router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }">
-          <div class="column">
+          <figure class="flex justify-center my-2">
-            <router-link
+            <img
-              :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }"
+              src="/img/undraw_profile.svg"
-            >
+              alt="Profile illustration"
-              <figure class="image is-128x128">
+              width="128"
-                <img
+              height="128"
-                  src="../../assets/undraw_profile.svg"
+            />
-                  alt="Profile illustration"
+          </figure>
-                />
+          <o-button variant="primary">{{
-              </figure>
+            t("I have a Mobilizon account")
-              <o-button variant="primary">{{
+          }}</o-button>
-                $t("I have a Mobilizon account")
+        </router-link>
-              }}</o-button>
+        <p>
-            </router-link>
+          <small>
-            <p>
+            {{
-              <small>
+              t("Either on the {instance} instance or on another instance.", {
-                {{
+                instance: host,
-                  $t(
+              })
-                    "Either on the {instance} instance or on another instance.",
+            }}
-                    {
+          </small>
-                      instance: host,
+          <o-tooltip
-                    }
+            variant="dark"
-                  )
+            :label="
-                }}
+              t(
-              </small>
+                'Mobilizon is a federated network. You can interact with this event from a different server.'
-              <o-tooltip
+              )
-                variant="dark"
-                :label="
-                  $t(
-                    'Mobilizon is a federated network. You can interact with this event from a different server.'
-                  )
-                "
-              >
-                <o-icon size="small" icon="help-circle-outline" />
-              </o-tooltip>
-            </p>
-          </div>
-          <vertical-divider
-            :content="$t('Or')"
-            v-if="anonymousParticipationAllowed"
-          />
-          <div
-            class="column"
-            v-if="
-              anonymousParticipationAllowed &&
-              hasAnonymousEmailParticipationMethod
             "
           >
-            <router-link
+            <o-icon size="small" icon="help-circle-outline" />
-              :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
+          </o-tooltip>
-              v-if="event.local"
+        </p>
-            >
-              <figure class="image is-128x128">
-                <img
-                  src="../../assets/undraw_mail_2.svg"
-                  alt="Privacy illustration"
-                />
-              </figure>
-              <o-button variant="primary">{{
-                $t("I don't have a Mobilizon account")
-              }}</o-button>
-            </router-link>
-            <a :href="`${event.url}/participate/without-account`" v-else>
-              <figure class="image is-128x128">
-                <img
-                  src="../../assets/undraw_mail_2.svg"
-                  alt="Privacy illustration"
-                />
-              </figure>
-              <o-button variant="primary">{{
-                $t("I don't have a Mobilizon account")
-              }}</o-button>
-            </a>
-            <p>
-              <small>{{ $t("Participate using your email address") }}</small>
-              <br />
-              <small v-if="!event.local">
-                {{ $t("You will be redirected to the original instance") }}
-              </small>
-            </p>
-          </div>
-        </div>
-        <div class="has-text-centered">
-          <o-button tag="a" variant="text" @click="router.go(-1)">{{
-            $t("Back to previous page")
-          }}</o-button>
-        </div>
       </div>
+      <div
+        class="bg-white dark:bg-zinc-700 rounded-md p-4 flex-1"
+        v-if="
+          event &&
+          anonymousParticipationAllowed &&
+          hasAnonymousEmailParticipationMethod
+        "
+      >
+        <router-link
+          :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
+          v-if="event.local"
+        >
+          <figure class="flex justify-center my-2">
+            <img
+              width="128"
+              height="128"
+              src="/img/undraw_mail_2.svg"
+              alt="Privacy illustration"
+            />
+          </figure>
+          <o-button variant="primary">{{
+            t("I don't have a Mobilizon account")
+          }}</o-button>
+        </router-link>
+        <a :href="`${event.url}/participate/without-account`" v-else>
+          <figure class="flex justify-center my-2">
+            <img
+              src="/img/undraw_mail_2.svg"
+              width="128"
+              height="128"
+              alt="Privacy illustration"
+            />
+          </figure>
+          <o-button variant="primary">{{
+            t("I don't have a Mobilizon account")
+          }}</o-button>
+        </a>
+        <p>
+          <small>{{ t("Participate using your email address") }}</small>
+          <br />
+          <small v-if="!event.local">
+            {{ t("You will be redirected to the original instance") }}
+          </small>
+        </p>
+      </div>
+    </div>
+    <div class="has-text-centered">
+      <o-button tag="a" variant="text" @click="router.go(-1)">{{
+        t("Back to previous page")
+      }}</o-button>
     </div>
   </section>
 </template>
 <script lang="ts" setup>
 import EventListViewCard from "@/components/Event/EventListViewCard.vue";
-import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
 import RouteName from "../../router/name";
 import { useFetchEvent } from "@/composition/apollo/event";
 import { useAnonymousParticipationConfig } from "@/composition/apollo/config";

js/src/components/TextEditor.vue

@@ -44,8 +44,8 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor?.isActive('heading', { level: 1 }) }"
+          :class="{ 'is-active': editor?.isActive('heading', { level: 3 }) }"
-          @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()"
+          @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()"
           type="button"
           :title="t('Heading Level 1')"
         >
@@ -55,8 +55,8 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor?.isActive('heading', { level: 2 }) }"
+          :class="{ 'is-active': editor?.isActive('heading', { level: 4 }) }"
-          @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()"
+          @click="editor?.chain().focus().toggleHeading({ level: 4 }).run()"
           type="button"
           :title="t('Heading Level 2')"
         >
@@ -66,8 +66,8 @@
         <button
           v-if="!isBasicMode"
           class="menubar__button"
-          :class="{ 'is-active': editor?.isActive('heading', { level: 3 }) }"
+          :class="{ 'is-active': editor?.isActive('heading', { level: 5 }) }"
-          @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()"
+          @click="editor?.chain().focus().toggleHeading({ level: 5 }).run()"
           type="button"
           :title="t('Heading Level 3')"
         >
@@ -309,7 +309,9 @@ const editor = useEditor({
   extensions: [
     Blockquote,
     BulletList,
-    Heading,
+    Heading.configure({
+      levels: [3, 4, 5],
+    }),
     Document,
     Paragraph,
     Text,

js/src/components/Utils/RedirectWithAccount.vue

@@ -1,66 +1,77 @@
 <template>
-  <section class="container mx-auto hero is-fullheight">
+  <section class="container mx-auto max-w-2xl">
-    <div class="hero-body">
+    <div class="flex flex-wrap gap-4 items-center w-full">
-      <div class="container mx-auto">
+      <div class="px-2 flex-1">
-        <div class="columns is-vcentered">
+        <h2 class="text-2xl">
-          <div class="column has-text-centered">
+          {{
-            <o-button
+            t("I have an account on {instance}.", { instance: instanceName })
-              variant="primary"
+          }}
-              size="medium"
+        </h2>
-              tag="router-link"
+        <i18n-t keypath="My federated identity ends in {domain}">
-              :to="{
+          <template #domain>
-                name: RouteName.LOGIN,
+            <code>@{{ host }}</code>
-                query: {
+          </template>
-                  code: LoginErrorCode.NEED_TO_LOGIN,
+        </i18n-t>
-                  redirect: pathAfterLogin,
+        <o-button
-                },
+          variant="primary"
-              }"
+          size="medium"
-              >{{ $t("Login on {instance}", { instance: host }) }}</o-button
+          tag="router-link"
-            >
+          class="mt-4"
-          </div>
+          :to="{
-          <vertical-divider :content="$t('Or')" />
+            name: RouteName.LOGIN,
-          <div class="column">
+            query: {
-            <h2 class="text-2xl">
+              code: LoginErrorCode.NEED_TO_LOGIN,
-              {{ $t("I have an account on another Mobilizon instance.") }}
+              redirect: pathAfterLogin,
-            </h2>
+            },
-            <p>{{ $t("Other software may also support this.") }}</p>
+          }"
-            <p>{{ sentence }}</p>
+          >{{ t("Login on {instance}", { instance: host }) }}</o-button
-            <form @submit.prevent="redirectToInstance">
+        >
-              <o-field :label="$t('Your federated identity')">
-                <o-field>
-                  <o-input
-                    expanded
-                    autocapitalize="none"
-                    autocorrect="off"
-                    v-model="remoteActorAddress"
-                    :placeholder="$t('profile@instance')"
-                  ></o-input>
-                  <p class="control">
-                    <button class="button is-primary" type="submit">
-                      {{ $t("Go") }}
-                    </button>
-                  </p>
-                </o-field>
-              </o-field>
-            </form>
-          </div>
-        </div>
-        <div class="has-text-centered">
-          <o-button tag="a" variant="text" @click="$router.go(-1)">{{
-            $t("Back to previous page")
-          }}</o-button>
-        </div>
       </div>
+      <div class="sm:border-l-4 px-2 sm:px-4 flex-1">
+        <h2 class="text-2xl">
+          {{ t("I have an account on another Mobilizon instance.") }}
+        </h2>
+        <p>{{ t("Other software may also support this.") }}</p>
+        <p>{{ sentence }}</p>
+        <form @submit.prevent="redirectToInstance">
+          <o-field
+            :label="t('Your federated identity')"
+            label-for="remoteProfileInput"
+          >
+            <o-field>
+              <o-input
+                id="remoteProfileInput"
+                expanded
+                autocapitalize="none"
+                autocorrect="off"
+                v-model="remoteActorAddress"
+                :placeholder="t('profile{\'@\'}instance')"
+              ></o-input>
+              <p class="control">
+                <o-button type="submit">
+                  {{ t("Go") }}
+                </o-button>
+              </p>
+            </o-field>
+          </o-field>
+        </form>
+      </div>
+    </div>
+    <div class="text-center">
+      <o-button tag="a" variant="text" @click="$router.go(-1)">{{
+        t("Back to previous page")
+      }}</o-button>
     </div>
   </section>
 </template>
 <script lang="ts" setup>
-import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
 import { LoginErrorCode } from "@/types/enums";
 import RouteName from "../../router/name";
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useInstanceName } from "@/composition/apollo/config";
 
-defineProps<{
+const props = defineProps<{
   uri: string;
   pathAfterLogin?: string;
   sentence?: string;
@@ -68,7 +79,10 @@ defineProps<{
 
 const remoteActorAddress = ref("");
 
-// eslint-disable-next-line class-methods-use-this
+const { t } = useI18n({ useScope: "global" });
+
+const { instanceName } = useInstanceName();
+
 const host = computed((): string => {
   return window.location.hostname;
 });
@@ -101,7 +115,7 @@ const webFingerFetch = async (
     );
 
     if (link && link.template.includes("{uri}")) {
-      return link.template.replace("{uri}", encodeURIComponent(this.uri));
+      return link.template.replace("{uri}", encodeURIComponent(props.uri));
     }
   }
   throw new Error("No interaction path found in webfinger data");

js/src/components/Utils/VerticalDivider.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="is-divider-vertical" :data-content="dataContent"></div>
-</template>
-<script lang="ts" setup>
-import { computed } from "vue";
-
-const props = withDefaults(defineProps<{ content?: string }>(), {
-  content: "Or",
-});
-
-const dataContent = computed((): string => {
-  return props.content.toLocaleUpperCase();
-});
-</script>

js/src/i18n/cs.json

@@ -1311,7 +1311,7 @@
   "more than 1360 contributors": "více než 1360 přispěvatelů",
   "multitude of interconnected Mobilizon websites": "množství propojených webových stránek Mobilizon",
   "new{'@'}email.com": "nový{'@'}email.com",
-  "profile@instance": "profil@instance",
+  "profile{'@'}instance": "profil{'@'}instance",
   "report #{report_number}": "hlášení #{report_number}",
   "return to the event's page": "návrat na stránku události",
   "return to the homepage": "zpět na domovskou stránku",

js/src/i18n/en_US.json

@@ -1425,5 +1425,18 @@
   "Message body": "Message body",
   "Describe your event": "Describe your event",
   "A few lines about your group": "A few lines about your group",
-  "Write your post": "Write your post"
+  "Write your post": "Write your post",
+  "Suggestions:": "Suggestions:",
+  "Make sure that all words are spelled correctly.": "Make sure that all words are spelled correctly.",
+  "Try different keywords.": "Try different keywords.",
+  "Try more general keywords.": "Try more general keywords.",
+  "Try fewer keywords.": "Try fewer keywords.",
+  "Change the filters.": "Change the filters.",
+  "No results found for {search}": "No results found for {search}",
+  "No events found for {search}": "No events found for {search}",
+  "No groups found for {search}": "No groups found for {search}",
+  "No event found at this address": "No event found at this address",
+  "I have an account on {instance}.": "I have an account on {instance}.",
+  "profile{\\'@\\'}instance": "profile{\\'@\\'}instance",
+  "My federated identity ends in {domain}": "My federated identity ends in {domain}"
 }

js/src/i18n/fr_FR.json

@@ -1312,7 +1312,7 @@
   "more than 1360 contributors": "plus de 1360 contributeur·rice·s",
   "multitude of interconnected Mobilizon websites": "multitude de sites web Mobilizon interconnectés",
   "new{'@'}email.com": "nouvel{'@'}email.com",
-  "profile@instance": "profil@instance",
+  "profile{'@'}instance": "profil{'@'}instance",
   "report #{report_number}": "le signalement #{report_number}",
   "return to the event's page": "retourner sur la page de l'événement",
   "return to the homepage": "retour à la page d'accueil",
@@ -1423,5 +1423,18 @@
   "Message body": "Corps du message",
   "Describe your event": "Décrivez votre événement",
   "A few lines about your group": "Quelques lignes à propos de votre groupe",
-  "Write your post": "Écrivez votre billet"
+  "Write your post": "Écrivez votre billet",
+  "Suggestions:": "Suggestions :",
+  "Make sure that all words are spelled correctly.": "Vérifiez l’orthographe des termes de recherche.",
+  "Try different keywords.": "Essayez d'autres mots.",
+  "Try more general keywords.": "Utilisez des mots clés plus généraux.",
+  "Try fewer keywords.": "Spécifiez un moins grand nombre de mots-clés.",
+  "Change the filters.": "Changez les filtres.",
+  "No results found for {search}": "Aucun résultat trouvé pour {search}",
+  "No events found for {search}": "Aucun événement trouvé pour {search}",
+  "No groups found for {search}": "Aucun groupe trouvé pour {search}",
+  "No event found at this address": "Aucun événement trouvé à cette addresse",
+  "I have an account on {instance}.": "J'ai un compte sur {instance}.",
+  "profile{\\'@\\'}instance": "profil{\\'@\\'}instance",
+  "My federated identity ends in {domain}": "Mon identité fédérée se termine par {domain}"
 }

js/src/views/Event/EventView.vue

@@ -3,14 +3,19 @@
     <o-loading v-model:active="eventLoading" />
     <div class="flex flex-col mb-3">
       <event-banner :picture="event?.picture" />
-      <div class="intro-wrapper flex flex-col relative px-2 pb-2">
+      <div
-        <div class="date-calendar-icon-wrapper" v-if="event?.beginsOn">
+        class="flex flex-col relative pb-2 bg-white dark:bg-zinc-700 my-2 rounded"
-          <date-calendar-icon :date="event.beginsOn.toString()" />
+      >
+        <div class="date-calendar-icon-wrapper relative" v-if="event?.beginsOn">
+          <date-calendar-icon
+            :date="event.beginsOn.toString()"
+            class="absolute left-3 -top-16"
+          />
         </div>
 
-        <section class="intro" dir="auto">
+        <section class="intro px-2 pt-4" dir="auto">
           <div class="flex flex-wrap gap-2">
-            <div class="flex-1">
+            <div class="flex-1 min-w-[300px]">
               <h1
                 class="text-4xl font-bold m-0"
                 dir="auto"
@@ -65,7 +70,7 @@
                   </popover-actor-card>
                 </span>
               </div>
-              <div class="inline-flex items-center gap-1">
+              <div class="flex flex-wrap items-center gap-2 gap-y-4 mt-2 my-3">
                 <p v-if="event?.status !== EventStatus.CONFIRMED">
                   <tag
                     variant="warning"
@@ -78,7 +83,28 @@
                     >{{ t("Event cancelled") }}</tag
                   >
                 </p>
-                <p class="flex gap-1 items-center" dir="auto">
+                <template v-if="!event?.draft">
+                  <p
+                    v-if="event?.visibility === EventVisibility.PUBLIC"
+                    class="inline-flex gap-1"
+                  >
+                    <Earth />
+                    {{ t("Public event") }}
+                  </p>
+                  <p
+                    v-if="event?.visibility === EventVisibility.UNLISTED"
+                    class="inline-flex gap-1"
+                  >
+                    <Link />
+                    {{ t("Private event") }}
+                  </p>
+                </template>
+                <template v-if="!event?.local && organizerDomain">
+                  <a :href="event?.url">
+                    <tag variant="info">{{ organizerDomain }}</tag>
+                  </a>
+                </template>
+                <p class="flex flex-wrap gap-1 items-center" dir="auto">
                   <tag v-if="eventCategory" class="category" capitalize>{{
                     eventCategory
                   }}</tag>
@@ -110,7 +136,9 @@
       <div
         class="rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse gap-4"
       >
-        <aside class="rounded bg-white dark:bg-gray-600 shadow-md h-min">
+        <aside
+          class="rounded bg-white dark:bg-zinc-700 shadow-md h-min max-w-screen-sm"
+        >
           <div class="sticky p-4">
             <event-metadata-sidebar
               v-if="event"
@@ -132,7 +160,7 @@
               <div
                 :lang="event?.language"
                 dir="auto"
-                class="description-content"
+                class="mt-4 prose md:prose-lg lg:prose-xl dark:prose-invert prose-h1:text-xl prose-h1:font-semibold prose-h2:text-lg prose-h3:text-base md:prose-h1:text-2xl md:prose-h1:font-semibold md:prose-h2:text-xl md:prose-h3:text-lg lg:prose-h1:text-2xl lg:prose-h1:font-semibold lg:prose-h2:text-xl lg:prose-h3:text-lg"
                 ref="eventDescriptionElement"
                 v-html="event.description"
               />
@@ -151,7 +179,7 @@
             ref="commentsObserver"
           >
             <a href="#comments">
-              <h2 class="text-xl" id="comments">{{ t("Comments") }}</h2>
+              <h2 class="text-2xl" id="comments">{{ t("Comments") }}</h2>
             </a>
             <comment-tree v-if="event && loadComments" :event="event" />
           </section>
@@ -189,13 +217,25 @@
 </template>
 
 <script lang="ts" setup>
-import { EventStatus, ParticipantRole, RoutingType } from "@/types/enums";
+import {
+  EventStatus,
+  ParticipantRole,
+  RoutingType,
+  EventVisibility,
+} from "@/types/enums";
 import {
   EVENT_PERSON_PARTICIPATION,
   // EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
 } from "@/graphql/event";
-import { displayName, IPerson, usernameWithDomain } from "@/types/actor";
+import {
+  displayName,
+  IActor,
+  IPerson,
+  usernameWithDomain,
+} from "@/types/actor";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import Earth from "vue-material-design-icons/Earth.vue";
+import Link from "vue-material-design-icons/Link.vue";
 import MultiCard from "@/components/Event/MultiCard.vue";
 import RouteName from "@/router/name";
 import CommentTree from "@/components/Comment/CommentTree.vue";
@@ -493,6 +533,20 @@ const eventCategory = computed((): string | undefined => {
   })?.label as string;
 });
 
+const organizer = computed((): IActor | null => {
+  if (event.value?.attributedTo?.id) {
+    return event.value.attributedTo;
+  }
+  if (event.value?.organizerActor) {
+    return event.value.organizerActor;
+  }
+  return null;
+});
+
+const organizerDomain = computed((): string | undefined => {
+  return organizer.value?.domain ?? undefined;
+});
+
 useHead({
   title: computed(() => eventTitle.value ?? ""),
   meta: [{ name: "description", content: eventDescription.value }],

js/src/views/SearchView.vue

@@ -500,11 +500,16 @@
       </div>
       <div v-if="mode === ViewMode.LIST">
         <template v-if="contentType === ContentType.ALL">
+          <template v-if="searchLoading">
+            <SkeletonGroupResultList v-for="i in 2" :key="i" />
+            <SkeletonEventResultList v-for="i in 4" :key="i" />
+          </template>
           <o-notification v-if="features && !features.groups" variant="danger">
             {{ t("Groups are not enabled on this instance.") }}
           </o-notification>
           <div v-else-if="searchGroups && searchGroups?.total > 0">
             <GroupCard
+              class="my-2"
               v-for="group in searchGroups?.elements"
               :group="group"
               :key="group.id"
@@ -513,9 +518,6 @@
               mode="row"
             />
           </div>
-          <o-notification v-else-if="searchLoading === false" variant="danger">
-            {{ t("No groups found") }}
-          </o-notification>
           <div v-if="searchEvents && searchEvents.total > 0">
             <event-card
               mode="row"
@@ -529,16 +531,40 @@
               class="my-4"
             />
           </div>
-          <o-notification v-else-if="searchLoading === false" variant="info">
+          <EmptyContent v-else-if="searchLoading === false" icon="magnify">
-            <p>{{ t("No events found") }}</p>
+            <span v-if="searchIsUrl">
-            <p v-if="searchIsUrl && !currentUser?.id">
+              {{ t("No event found at this address") }}
+            </span>
+            <span v-else-if="!search">
+              {{ t("No results found") }}
+            </span>
+            <i18n-t keypath="No results found for {search}" tag="span" v-else>
+              <template #search>
+                <b class="">{{ search }}</b>
+              </template>
+            </i18n-t>
+            <template #desc v-if="searchIsUrl && !currentUser?.id">
               {{
                 t(
                   "Only registered users may fetch remote events from their URL."
                 )
               }}
-            </p>
+            </template>
-          </o-notification>
+            <template #desc v-else>
+              <p class="my-2 text-start">
+                {{ t("Suggestions:") }}
+              </p>
+              <ul class="list-disc list-inside text-start">
+                <li>
+                  {{ t("Make sure that all words are spelled correctly.") }}
+                </li>
+                <li>{{ t("Try different keywords.") }}</li>
+                <li>{{ t("Try more general keywords.") }}</li>
+                <li>{{ t("Try fewer keywords.") }}</li>
+                <li>{{ t("Change the filters.") }}</li>
+              </ul>
+            </template>
+          </EmptyContent>
           <o-pagination
             v-if="
               (searchEvents && searchEvents?.total > EVENT_PAGE_LIMIT) ||
@@ -556,6 +582,9 @@
           />
         </template>
         <template v-else-if="contentType === ContentType.EVENTS">
+          <template v-if="searchLoading">
+            <SkeletonEventResultList v-for="i in 8" :key="i" />
+          </template>
           <template v-if="searchEvents && searchEvents.total > 0">
             <event-card
               mode="row"
@@ -580,24 +609,51 @@
             >
             </o-pagination>
           </template>
-          <o-notification v-else-if="searchLoading === false" variant="info">
+          <EmptyContent v-else-if="searchLoading === false" icon="calendar">
-            <p>{{ t("No events found") }}</p>
+            <span v-if="searchIsUrl">
-            <p v-if="searchIsUrl && !currentUser?.id">
+              {{ t("No event found at this address") }}
+            </span>
+            <span v-else-if="!search">
+              {{ t("No events found") }}
+            </span>
+            <i18n-t keypath="No events found for {search}" tag="span" v-else>
+              <template #search>
+                <b>{{ search }}</b>
+              </template>
+            </i18n-t>
+            <template #desc v-if="searchIsUrl && !currentUser?.id">
               {{
                 t(
                   "Only registered users may fetch remote events from their URL."
                 )
               }}
-            </p>
+            </template>
-          </o-notification>
+            <template #desc v-else>
+              <p class="my-2 text-start">
+                {{ t("Suggestions:") }}
+              </p>
+              <ul class="list-disc list-inside text-start">
+                <li>
+                  {{ t("Make sure that all words are spelled correctly.") }}
+                </li>
+                <li>{{ t("Try different keywords.") }}</li>
+                <li>{{ t("Try more general keywords.") }}</li>
+                <li>{{ t("Try fewer keywords.") }}</li>
+                <li>{{ t("Change the filters.") }}</li>
+              </ul>
+            </template>
+          </EmptyContent>
         </template>
         <template v-else-if="contentType === ContentType.GROUPS">
           <o-notification v-if="features && !features.groups" variant="danger">
             {{ t("Groups are not enabled on this instance.") }}
           </o-notification>
-
+          <template v-else-if="searchLoading">
+            <SkeletonGroupResultList v-for="i in 6" :key="i" />
+          </template>
           <template v-else-if="searchGroups && searchGroups?.total > 0">
             <GroupCard
+              class="my-2"
               v-for="group in searchGroups?.elements"
               :group="group"
               :key="group.id"
@@ -617,9 +673,33 @@
             >
             </o-pagination>
           </template>
-          <o-notification v-else-if="searchLoading === false" variant="danger">
+          <EmptyContent
-            {{ t("No groups found") }}
+            v-else-if="searchLoading === false"
-          </o-notification>
+            icon="account-multiple"
+          >
+            <span v-if="!search">
+              {{ t("No events found") }}
+            </span>
+            <i18n-t keypath="No groups found for {search}" tag="span" v-else>
+              <template #search>
+                <b>{{ search }}</b>
+              </template>
+            </i18n-t>
+            <template #desc>
+              <p class="my-2 text-start">
+                {{ t("Suggestions:") }}
+              </p>
+              <ul class="list-disc list-inside text-start">
+                <li>
+                  {{ t("Make sure that all words are spelled correctly.") }}
+                </li>
+                <li>{{ t("Try different keywords.") }}</li>
+                <li>{{ t("Try more general keywords.") }}</li>
+                <li>{{ t("Try fewer keywords.") }}</li>
+                <li>{{ t("Change the filters.") }}</li>
+              </ul>
+            </template>
+          </EmptyContent>
         </template>
       </div>
       <event-marker-map
@@ -693,6 +773,9 @@ import { IConfig } from "@/types/config.model";
 import { TypeNamed } from "@/types/apollo";
 import { LatLngBounds } from "leaflet";
 import lodashSortBy from "lodash/sortBy";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import SkeletonGroupResultList from "@/components/Group/SkeletonGroupResultList.vue";
+import SkeletonEventResultList from "@/components/Event/SkeletonEventResultList.vue";
 
 const EventMarkerMap = defineAsyncComponent(
   () => import("@/components/Search/EventMarkerMap.vue")
@@ -764,6 +847,10 @@ const arrayTransformer: RouteQueryTransformer<string[]> = {
   },
 };
 
+const props = defineProps<{
+  tag?: string;
+}>();
+
 const page = useRouteQuery("page", 1, integerTransformer);
 const eventPage = useRouteQuery("eventPage", 1, integerTransformer);
 const groupPage = useRouteQuery("groupPage", 1, integerTransformer);
@@ -775,7 +862,7 @@ const distance = useRouteQuery("distance", "10_km");
 const when = useRouteQuery("when", "any");
 const contentType = useRouteQuery(
   "contentType",
-  ContentType.ALL,
+  props.tag ? ContentType.EVENTS : ContentType.ALL,
   enumTransformer(ContentType)
 );
 
@@ -819,10 +906,6 @@ const EVENT_PAGE_LIMIT = 16;
 
 const GROUP_PAGE_LIMIT = 16;
 
-const props = defineProps<{
-  tag?: string;
-}>();
-
 const { features } = useFeatures();
 const { eventCategories } = useEventCategories();
 

lib/mobilizon/actors/actors.ex

@@ -237,7 +237,7 @@ defmodule Mobilizon.Actors do
         {:ok, person}
 
       {:error, _step, err, _} ->
-        Logger.error("Error while creating a new person")
+        Logger.debug("Error while creating a new person")
         {:error, err}
     end
   end

lib/mobilizon/events/event.ex

@@ -166,6 +166,7 @@ defmodule Mobilizon.Events.Event do
     |> put_picture(attrs)
     |> validate_lengths()
     |> validate_end_time()
+    |> unique_constraint(:url)
   end
 
   @spec validate_lengths(Changeset.t()) :: Changeset.t()