From baac00f678f6e766fa83d8e3434fefad55ef5465 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Mon, 22 Aug 2022 12:12:09 +0200
Subject: [PATCH] Improve search

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/apollo/user.ts                         |    2 -
 js/src/assets/oruga-tailwindcss.css           |   32 +
 js/src/components/Categories/CategoryCard.vue |    2 +-
 js/src/components/Event/EventCard.vue         |    2 +-
 .../Event/EventParticipationCard.vue          |   58 +-
 js/src/components/Event/MultiCard.vue         |    2 +-
 js/src/components/Group/GroupCard.vue         |   46 +-
 js/src/components/Group/GroupMemberCard.vue   |    4 +-
 js/src/components/Image/LazyImage.vue         |    2 -
 js/src/components/Local/CloseContent.vue      |   17 +-
 js/src/components/Local/CloseEvents.vue       |  114 +-
 js/src/components/Local/CloseGroups.vue       |   94 +-
 js/src/components/Local/LastEvents.vue        |    1 +
 js/src/components/Local/MoreContent.vue       |    4 +-
 .../Search/filters/FilterSection.vue          |   70 ++
 js/src/components/Tag.vue                     |    9 +-
 .../components/core/{Tag.vue => CoreTag.vue}  |   10 +-
 js/src/components/core/MaterialIcon.vue       |    2 +
 js/src/graphql/search.ts                      |   10 +-
 js/src/i18n/en_US.json                        |   20 +-
 js/src/i18n/fr_FR.json                        |   18 +-
 js/src/main.ts                                |    2 +-
 js/src/oruga-config.ts                        |   21 +
 js/src/registerServiceWorker.ts               |    4 +-
 js/src/types/enums.ts                         |    6 +
 js/src/utils/html.ts                          |    9 +-
 js/src/utils/i18n.ts                          |   20 -
 js/src/utils/listFormat.ts                    |   17 +
 js/src/views/Event/Event.vue                  |   14 +-
 js/src/views/Event/MyEvents.vue               |   10 +-
 js/src/views/HomeView.vue                     |  655 +++++-----
 js/src/views/SearchView.vue                   | 1053 +++++++++++------
 js/tailwind.config.js                         |    1 -
 lib/graphql/resolvers/config.ex               |    2 +-
 lib/graphql/schema/search.ex                  |    8 +
 lib/mobilizon/events/events.ex                |   15 +
 36 files changed, 1343 insertions(+), 1013 deletions(-)
 create mode 100644 js/src/components/Search/filters/FilterSection.vue
 rename js/src/components/core/{Tag.vue => CoreTag.vue} (89%)
 create mode 100644 js/src/utils/listFormat.ts

diff --git a/js/src/apollo/user.ts b/js/src/apollo/user.ts
index ac617fda4..969e31392 100644
--- a/js/src/apollo/user.ts
+++ b/js/src/apollo/user.ts
@@ -134,8 +134,6 @@ export default function buildCurrentUserResolver(
           },
         };
 
-        console.debug("updating current user location", data);
-
         localCache.writeQuery({ data, query: CURRENT_USER_LOCATION_CLIENT });
       },
     },
diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index 8c2f80610..ae2bf55e9 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -204,3 +204,35 @@ button.menubar__button {
   @apply text-white;
   background: #363636;
 }
+
+/** Pagination */
+.pagination {
+  @apply flex items-center text-center justify-between;
+}
+.pagination-link {
+  @apply inline-flex items-center relative justify-center cursor-pointer rounded h-10 m-1 p-2 bg-white text-lg;
+}
+.pagination-list {
+  @apply flex items-center text-center list-none flex-wrap grow shrink justify-start;
+}
+.pagination-next,
+.pagination-previous {
+  @apply px-3;
+}
+.pagination-link-current {
+  @apply bg-primary cursor-not-allowed pointer-events-none border-primary text-white;
+}
+.pagination-ellipsis {
+  @apply text-center m-1 text-gray-300;
+}
+
+/** Tabs */
+.tabs-nav {
+  @apply flex items-center justify-start pb-0.5;
+}
+.tabs-nav-item-boxed {
+  @apply flex items-center justify-center px-2 py-2 rounded-t border-transparent;
+}
+.tabs-nav-item-active-boxed {
+  @apply bg-white border-gray-300 text-primary;
+}
diff --git a/js/src/components/Categories/CategoryCard.vue b/js/src/components/Categories/CategoryCard.vue
index 4ef4242a2..1c3e5c6df 100644
--- a/js/src/components/Categories/CategoryCard.vue
+++ b/js/src/components/Categories/CategoryCard.vue
@@ -3,7 +3,7 @@
     :to="{
       name: 'SEARCH',
       query: {
-        eventCategory: category.key,
+        categoryOneOf: [category.key],
         contentType: 'EVENTS',
         radius: undefined,
       },
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index c2c9dcfb2..43c0ac830 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link
-    class="mbz-card max-w-xs shrink-0 w-[18rem] snap-center"
+    class="mbz-card max-w-xs shrink-0 w-[18rem] snap-center dark:bg-mbz-purple"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
     <div class="bg-secondary rounded-lg">
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index 6b0b33c85..327b48d7c 100644
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -1,9 +1,6 @@
 <template>
-  <article class="bg-white dark:bg-mbz-purple mb-5 mt-4 p-0">
-    <div
-      class="bg-mbz-yellow-2 flex p-2 text-violet-title rounded-t-lg"
-      dir="auto"
-    >
+  <article class="bg-white dark:bg-mbz-purple mb-5 mt-4 pb-2 md:p-0">
+    <div class="bg-yellow-2 flex p-2 text-violet-title rounded-t-lg" dir="auto">
       <figure
         class="image is-24x24 ltr:pr-1 rtl:pl-1"
         v-if="participation.actor.avatar"
@@ -21,7 +18,7 @@
     </div>
     <div class="list-card flex flex-col relative">
       <div
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-1.5 gapt-x-3 pb-2"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-x-1.5 md:gap-y-3 gapt-x-3"
       >
         <div class="mr-0 ml-0">
           <div class="h-36 relative w-full">
@@ -52,24 +49,24 @@
             </router-link>
           </div>
         </div>
-        <div class="list-card-content lg:col-span-2 flex-1 p-2">
+        <div class="list-card-content lg:col-span-4 flex-1 p-2">
           <div class="flex items-center pt-2" dir="auto">
-            <b-tag
+            <Tag
               variant="info"
               class="mr-1 mb-1"
-              size="is-medium"
+              size="medium"
               v-if="participation.event.status === EventStatus.TENTATIVE"
             >
-              {{ $t("Tentative") }}
-            </b-tag>
-            <b-tag
+              {{ t("Tentative") }}
+            </Tag>
+            <Tag
               variant="danger"
               class="mr-1 mb-1"
-              size="is-medium"
+              size="medium"
               v-if="participation.event.status === EventStatus.CANCELLED"
             >
-              {{ $t("Cancelled") }}
-            </b-tag>
+              {{ t("Cancelled") }}
+            </Tag>
             <router-link
               :to="{
                 name: RouteName.EVENT,
@@ -96,7 +93,7 @@
             "
           >
             <Video />
-            <span>{{ $t("Online") }}</span>
+            <span>{{ t("Online") }}</span>
           </div>
           <div class="flex gap-1">
             <figure class="" v-if="actorAvatarURL">
@@ -122,7 +119,7 @@
               <!-- Less than 10 seats left -->
               <span class="has-text-danger" v-if="lastSeatsLeft">
                 {{
-                  $t("{number} seats left", {
+                  t("{number} seats left", {
                     number: seatsLeft,
                   })
                 }}
@@ -133,7 +130,7 @@
                 "
               >
                 {{
-                  $t(
+                  t(
                     "{available}/{capacity} available places",
                     {
                       available:
@@ -149,7 +146,7 @@
               </span>
               <span v-else>
                 {{
-                  $t(
+                  t(
                     "{count} participants",
                     {
                       count: participation.event.participantStats.participant,
@@ -170,7 +167,7 @@
                 "
               >
                 {{
-                  $t(
+                  t(
                     "{count} requests waiting",
                     {
                       count: participation.event.participantStats.notApproved,
@@ -183,10 +180,13 @@
           </div>
         </div>
 
-        <o-dropdown aria-role="list" class="text-center self-center">
+        <o-dropdown
+          aria-role="list"
+          class="text-center self-center md:col-span-2 lg:col-span-1"
+        >
           <template #trigger>
             <o-button icon-right="dots-horizontal">
-              {{ $t("Actions") }}
+              {{ t("Actions") }}
             </o-button>
           </template>
           <o-dropdown-item
@@ -208,7 +208,7 @@
               "
             >
               <Pencil />
-              {{ $t("Edit") }}
+              {{ t("Edit") }}
             </div>
           </o-dropdown-item>
 
@@ -226,7 +226,7 @@
               "
             >
               <ContentDuplicate />
-              {{ $t("Duplicate") }}
+              {{ t("Duplicate") }}
             </div>
           </o-dropdown-item>
 
@@ -241,7 +241,7 @@
           >
             <div @click="openDeleteEventModalWrapper" class="flex gap-1">
               <Delete />
-              {{ $t("Delete") }}
+              {{ t("Delete") }}
             </div>
           </o-dropdown-item>
 
@@ -264,7 +264,7 @@
               "
             >
               <AccountMultiplePlus />
-              {{ $t("Manage participations") }}
+              {{ t("Manage participations") }}
             </div>
           </o-dropdown-item>
 
@@ -277,7 +277,7 @@
               }"
             >
               <ViewCompact />
-              {{ $t("View event page") }}
+              {{ t("View event page") }}
             </router-link>
           </o-dropdown-item>
         </o-dropdown>
@@ -288,12 +288,11 @@
 
 <script lang="ts" setup>
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
+import { EventStatus, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "@/types/participant.model";
 import {
   IEvent,
   IEventCardOptions,
-  organizer,
   organizerAvatarUrl,
   organizerDisplayName,
 } from "@/types/event.model";
@@ -319,6 +318,7 @@ import { useI18n } from "vue-i18n";
 import { Dialog } from "@/plugins/dialog";
 import { Snackbar } from "@/plugins/snackbar";
 import { useDeleteEvent } from "@/composition/apollo/event";
+import Tag from "@/components/Tag.vue";
 
 const defaultOptions: IEventCardOptions = {
   hideDate: true,
diff --git a/js/src/components/Event/MultiCard.vue b/js/src/components/Event/MultiCard.vue
index 66b12de37..b707af07d 100644
--- a/js/src/components/Event/MultiCard.vue
+++ b/js/src/components/Event/MultiCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid auto-rows-[1fr] gap-x-5 gap-y-8 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))]"
+    class="grid auto-rows-[1fr] gap-x-2 gap-y-4 md:gap-x-6 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))] justify-items-center"
   >
     <event-card
       class="flex flex-col h-full"
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index a1126a869..281c92d7b 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -4,35 +4,49 @@
       name: RouteName.GROUP,
       params: { preferredUsername: usernameWithDomain(group) },
     }"
-    class="card flex flex-col max-w-md bg-white dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg"
+    class="card flex flex-col shrink-0 w-[18rem] bg-white dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg"
   >
-    <figure class="rounded-t-lg flex justify-center h-1/4">
+    <figure class="rounded-t-lg flex justify-center h-40">
       <lazy-image-wrapper :picture="group.banner" :rounded="true" />
     </figure>
     <div class="py-2 pl-2">
       <div class="flex gap-1 mb-2">
         <div class="">
           <figure class="" v-if="group.avatar">
-            <img class="rounded-xl" :src="group.avatar.url" alt="" />
+            <img
+              class="rounded-xl"
+              :src="group.avatar.url"
+              alt=""
+              height="64"
+              width="64"
+            />
           </figure>
-          <AccountGroup v-else :size="48" />
+          <AccountGroup v-else :size="64" />
         </div>
-        <div class="">
-          <h3 class="text-2xl" dir="auto">
+        <div class="px-1">
+          <h3
+            class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white"
+            dir="auto"
+          >
             {{ displayName(group) }}
           </h3>
-          <span class="is-6 has-text-grey-dark group-federated-username">
+          <span>
             {{ `@${usernameWithDomain(group)}` }}
           </span>
         </div>
       </div>
-      <div class="mb-2 line-clamp-3" dir="auto" v-html="group.summary" />
+      <div
+        class="mb-2 line-clamp-3"
+        dir="auto"
+        v-html="saneSummary"
+        v-if="showSummary"
+      />
       <div>
         <inline-address
           v-if="group.physicalAddress && addressFullName(group.physicalAddress)"
           :physicalAddress="group.physicalAddress"
         />
-        <p class="flex">
+        <p class="flex gap-1">
           <Account />
           {{
             t(
@@ -58,10 +72,18 @@ import { addressFullName } from "@/types/address.model";
 import { useI18n } from "vue-i18n";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 import Account from "vue-material-design-icons/Account.vue";
+import { htmlToText } from "@/utils/html";
+import { computed } from "vue";
 
-defineProps<{
-  group: IGroup;
-}>();
+const props = withDefaults(
+  defineProps<{
+    group: IGroup;
+    showSummary: boolean;
+  }>(),
+  { showSummary: true }
+);
 
 const { t } = useI18n({ useScope: "global" });
+
+const saneSummary = computed(() => htmlToText(props.group.summary));
 </script>
diff --git a/js/src/components/Group/GroupMemberCard.vue b/js/src/components/Group/GroupMemberCard.vue
index 16581ed35..c0f536c83 100644
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -62,7 +62,7 @@
         <div
           class="mt-3 prose dark:prose-invert lg:prose-xl line-clamp-2"
           v-if="member.parent.summary"
-          v-html="flattenHTMLParagraphs(member.parent.summary)"
+          v-html="htmlToText(member.parent.summary)"
         />
       </div>
       <div>
@@ -95,7 +95,7 @@ import DotsHorizontal from "vue-material-design-icons/DotsHorizontal.vue";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import Tag from "@/components/Tag.vue";
-import { flattenHTMLParagraphs } from "@/utils/html";
+import { htmlToText } from "@/utils/html";
 
 defineProps<{
   member: IMember;
diff --git a/js/src/components/Image/LazyImage.vue b/js/src/components/Image/LazyImage.vue
index 01b121c3a..0a2a40da1 100644
--- a/js/src/components/Image/LazyImage.vue
+++ b/js/src/components/Image/LazyImage.vue
@@ -57,13 +57,11 @@ const imageOpacity = computed(() =>
 );
 
 onMounted(() => {
-  console.debug("on lazy image mounted");
   observer.value = new IntersectionObserver((entries) => {
     isIntersecting.value = entries[0].isIntersecting;
   });
 
   if (wrapper.value) {
-    console.debug("starting observing");
     observer.value.observe(wrapper.value);
   }
 });
diff --git a/js/src/components/Local/CloseContent.vue b/js/src/components/Local/CloseContent.vue
index 31493b325..2b539d1d7 100644
--- a/js/src/components/Local/CloseContent.vue
+++ b/js/src/components/Local/CloseContent.vue
@@ -9,7 +9,7 @@
         </h2>
 
         <button
-          v-if="suggestGeoloc && isIPLocation"
+          v-if="suggestGeoloc"
           class="inline-flex bg-primary rounded text-white flex-initial px-4 py-2 justify-center w-full md:w-min whitespace-nowrap"
           @click="emit('doGeoLoc')"
         >
@@ -21,7 +21,7 @@
     <div class="hidden sm:block" v-show="showScrollLeftButton">
       <button
         @click="scrollLeft"
-        class="absolute inset-y-0 my-auto z-10 rounded-full bg-white w-10 h-10 border border-shadowColor -left-5"
+        class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5"
       >
         <div class="">&lt;</div>
       </button>
@@ -38,7 +38,7 @@
     <div class="hidden sm:block" v-show="showScrollRightButton">
       <button
         @click="scrollRight"
-        class="absolute inset-y-0 my-auto z-10 rounded-full bg-white w-10 h-10 border border-shadowColor -right-5"
+        class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -right-5"
       >
         <div class="">&gt;</div>
       </button>
@@ -47,9 +47,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { LocationType } from "../../types/user-location.model";
 
 withDefaults(
   defineProps<{
@@ -62,14 +61,6 @@ const emit = defineEmits(["doGeoLoc"]);
 
 const { t } = useI18n({ useScope: "global" });
 
-const userLocationInjection = inject<{
-  userLocation: LocationType;
-}>("userLocation");
-
-const isIPLocation = computed(
-  () => userLocationInjection?.userLocation.isIPLocation
-);
-
 const showScrollRightButton = ref(true);
 const showScrollLeftButton = ref(false);
 
diff --git a/js/src/components/Local/CloseEvents.vue b/js/src/components/Local/CloseEvents.vue
index 932794349..46a8f6479 100644
--- a/js/src/components/Local/CloseEvents.vue
+++ b/js/src/components/Local/CloseEvents.vue
@@ -1,8 +1,10 @@
 <template>
   <close-content
+    class="container mx-auto px-2"
     v-show="loadingEvents || (events && events.total > 0)"
     :suggestGeoloc="suggestGeoloc"
     v-on="attrs"
+    @doGeoLoc="emit('doGeoLoc')"
   >
     <template #title>
       <template v-if="userLocationName">
@@ -25,13 +27,7 @@
         :key="event.uuid"
       />
       <more-content
-        v-if="
-          userLocation &&
-          userLocationName &&
-          userLocation.lat &&
-          userLocation.lon &&
-          userLocation.picture
-        "
+        v-if="userLocationName && userLocation?.lat && userLocation?.lon"
         :to="{
           name: 'SEARCH',
           query: {
@@ -39,10 +35,10 @@
             lat: userLocation.lat?.toString(),
             lon: userLocation.lon?.toString(),
             contentType: 'EVENTS',
-            distance: '25',
+            distance: '25_km',
           },
         }"
-        :picture="userLocation.picture"
+        :picture="userLocation?.picture"
       >
         {{
           t("View more events around {position}", {
@@ -65,115 +61,33 @@ import { useQuery } from "@vue/apollo-composable";
 import EventCard from "../Event/EventCard.vue";
 import { Paginate } from "@/types/paginate";
 import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
-import { CURRENT_USER_LOCATION_CLIENT } from "@/graphql/location";
-import { ICurrentUser, IUser } from "@/types/current-user.model";
-import { CURRENT_USER_CLIENT, USER_SETTINGS } from "@/graphql/user";
-import { coordsToGeoHash, geoHashToCoords } from "@/utils/location";
-import { REVERSE_GEOCODE } from "@/graphql/address";
-import { IAddress } from "@/types/address.model";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
 import { useI18n } from "vue-i18n";
+import { coordsToGeoHash } from "@/utils/location";
+
+const props = defineProps<{ userLocation: LocationType }>();
+const emit = defineEmits(["doGeoLoc"]);
 
 const EVENT_PAGE_LIMIT = 12;
 
-const { result: currentUserResult } = useQuery<{
-  currentUser: ICurrentUser;
-}>(CURRENT_USER_CLIENT);
-
-const currentUser = computed(() => currentUserResult.value?.currentUser);
-
-const { result: userResult } = useQuery<{ loggedUser: IUser }>(
-  USER_SETTINGS,
-  {},
-  () => ({
-    enabled: currentUser.value?.isLoggedIn,
-  })
-);
-
-const loggedUser = computed(() => userResult.value?.loggedUser);
-
-const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
-
-const config = computed<IConfig | undefined>(() => configResult.value?.config);
-
-const serverLocation = computed(() => config.value?.location);
-
 const { t } = useI18n({ useScope: "global" });
 const attrs = useAttrs();
 
-const coords = computed(() => {
-  const userSettingsGeoHash =
-    loggedUser.value?.settings?.location?.geohash ?? undefined;
-  const userSettingsCoords = geoHashToCoords(userSettingsGeoHash);
-
-  if (userSettingsCoords) {
-    return { ...userSettingsCoords, isIPLocation: false };
-  }
-
-  return { ...serverLocation.value, isIPLocation: true };
-});
-
-const { result: reverseGeocodeResult } = useQuery<{
-  reverseGeocode: IAddress[];
-}>(REVERSE_GEOCODE, coords, () => ({
-  enabled: coords.value?.longitude != undefined,
-}));
-
-const userSettingsLocation = computed(() => {
-  const address = reverseGeocodeResult.value?.reverseGeocode[0];
-  const placeName = address?.locality ?? address?.region ?? address?.country;
-  return {
-    lat: coords.value?.latitude,
-    lon: coords.value?.longitude,
-    name: placeName,
-    picture: address?.pictureInfo,
-    isIPLocation: coords.value?.isIPLocation,
-  };
-});
-
-const { result: currentUserLocationResult } = useQuery<{
-  currentUserLocation: LocationType;
-}>(CURRENT_USER_LOCATION_CLIENT);
-const currentUserLocation = computed(() => {
-  return {
-    ...currentUserLocationResult.value?.currentUserLocation,
-    isIPLocation: false,
-  };
-});
-
-const geohash = computed(() => {
-  return coordsToGeoHash(userLocation.value?.lat, userLocation.value?.lon);
-});
-
 const userLocationName = computed(() => {
-  return userLocation.value?.name;
+  return props.userLocation?.name;
 });
-
-const userLocation = computed(() => {
-  if (
-    !userSettingsLocation.value ||
-    (userSettingsLocation.value?.isIPLocation &&
-      currentUserLocation.value?.name)
-  ) {
-    return currentUserLocation.value;
-  }
-  return userSettingsLocation.value;
-});
-
-const suggestGeoloc = computed(() => userLocation.value?.isIPLocation);
+const suggestGeoloc = computed(() => props.userLocation?.isIPLocation);
 
 const { result: eventsResult, loading: loadingEvents } = useQuery<{
   searchEvents: Paginate<IEvent>;
-}>(SEARCH_EVENTS, {
-  location: geohash,
+}>(SEARCH_EVENTS, () => ({
+  location: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon),
   beginsOn: new Date(),
   endsOn: undefined,
   radius: 25,
   eventPage: 1,
   limit: EVENT_PAGE_LIMIT,
   type: "IN_PERSON",
-});
+}));
 
 const events = computed(
   () => eventsResult.value?.searchEvents ?? { elements: [], total: 0 }
diff --git a/js/src/components/Local/CloseGroups.vue b/js/src/components/Local/CloseGroups.vue
index 3ab597005..7b492c13e 100644
--- a/js/src/components/Local/CloseGroups.vue
+++ b/js/src/components/Local/CloseGroups.vue
@@ -1,11 +1,21 @@
 <template>
-  <close-content v-show="loadingGroups || selectedGroups.length > 0">
+  <close-content
+    class="container mx-auto px-2"
+    v-show="loadingGroups || selectedGroups.length > 0"
+    @do-geo-loc="emit('doGeoLoc')"
+    :suggestGeoloc="userLocation.isIPLocation"
+  >
     <template #title>
-      {{
-        $t("Popular groups nearby {position}", {
-          position: userLocationName,
-        })
-      }}
+      <template v-if="userLocationName">
+        {{
+          t("Popular groups nearby {position}", {
+            position: userLocationName,
+          })
+        }}
+      </template>
+      <template v-else>
+        {{ t("Popular groups close to you") }}
+      </template>
     </template>
     <template #content>
       <!-- <skeleton-group-result
@@ -14,32 +24,32 @@
         :key="i"
         v-show="loadingGroups"
       /> -->
-      <group-result
+      <group-card
         v-for="group in selectedGroups"
         :key="group.id"
-        class="scroll-ml-6 snap-center shrink-0 first:pl-8 last:pr-8 w-[18rem]"
         :group="group"
         :view-mode="'column'"
         :minimal="true"
         :has-border="true"
+        :showSummary="false"
       />
 
       <more-content
-        v-if="userLocation"
+        v-if="userLocationName"
         :to="{
           name: 'SEARCH',
           query: {
             locationName: userLocationName,
-            lat: userLocation.lat,
-            lon: userLocation.lon,
+            lat: userLocation.lat?.toString(),
+            lon: userLocation.lon?.toString(),
             contentType: 'GROUPS',
-            distance: currentDistance,
+            distance: '25_km',
           },
         }"
         :picture="userLocation.picture"
       >
         {{
-          $t("View more groups around {position}", {
+          t("View more groups around {position}", {
             position: userLocationName,
           })
         }}
@@ -48,8 +58,7 @@
   </close-content>
 </template>
 
-<script lang="ts">
-import { defineComponent, inject, reactive, computed, ref } from "vue";
+<script lang="ts" setup>
 // import SkeletonGroupResult from "../../components/result/SkeletonGroupResult.vue";
 import sampleSize from "lodash/sampleSize";
 import { LocationType } from "../../types/user-location.model";
@@ -57,39 +66,36 @@ import MoreContent from "./MoreContent.vue";
 import CloseContent from "./CloseContent.vue";
 import { IGroup } from "@/types/actor";
 import { SEARCH_GROUPS } from "@/graphql/search";
+import { useQuery } from "@vue/apollo-composable";
+import { Paginate } from "@/types/paginate";
+import { computed } from "vue";
+import GroupCard from "@/components/Group/GroupCard.vue";
+import { coordsToGeoHash } from "@/utils/location";
+import { useI18n } from "vue-i18n";
 
-export default defineComponent({
-  components: {
-    MoreContent,
-    CloseContent,
-    // SkeletonGroupResult,
-  },
-  apollo: {
-    groups: {
-      query: SEARCH_GROUPS,
-    },
-  },
-  setup() {
-    const userLocationInjection = inject<{
-      userLocation: LocationType;
-    }>("userLocation");
+const props = defineProps<{ userLocation: LocationType }>();
+const emit = defineEmits(["doGeoLoc"]);
 
-    const groups = reactive<IGroup[]>([]);
+const { t } = useI18n({ useScope: "global" });
 
-    const selectedGroups = computed(() => sampleSize(groups, 5));
+const { result: groupsResult, loading: loadingGroups } = useQuery<{
+  searchGroups: Paginate<IGroup>;
+}>(
+  SEARCH_GROUPS,
+  () => ({
+    location: coordsToGeoHash(props.userLocation.lat, props.userLocation.lon),
+    radius: 25,
+    page: 1,
+    limit: 12,
+  }),
+  () => ({ enabled: props.userLocation?.lat !== undefined })
+);
 
-    const currentDistance = ref("25_km");
+const groups = computed(
+  () => groupsResult.value?.searchGroups ?? { total: 0, elements: [] }
+);
 
-    const userLocationName = computed(
-      () => userLocationInjection?.userLocation?.name
-    );
+const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5));
 
-    return {
-      selectedGroups,
-      userLocation: userLocationInjection?.userLocation,
-      userLocationName,
-      currentDistance,
-    };
-  },
-});
+const userLocationName = computed(() => props?.userLocation?.name);
 </script>
diff --git a/js/src/components/Local/LastEvents.vue b/js/src/components/Local/LastEvents.vue
index 0001a7f34..91ad29861 100644
--- a/js/src/components/Local/LastEvents.vue
+++ b/js/src/components/Local/LastEvents.vue
@@ -1,5 +1,6 @@
 <template>
   <close-content
+    class="container mx-auto px-2"
     v-show="loadingEvents || (events && events.total > 0)"
     :suggestGeoloc="false"
     v-on="attrs"
diff --git a/js/src/components/Local/MoreContent.vue b/js/src/components/Local/MoreContent.vue
index 743e8fb24..734e892a5 100644
--- a/js/src/components/Local/MoreContent.vue
+++ b/js/src/components/Local/MoreContent.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link
     :to="to"
-    class="mbz-card flex flex-col items-center dark:border-gray-700 shadow-md md:flex-col snap-center shrink-0 first:pl-8 w-[18rem]"
+    class="mbz-card flex flex-col items-center dark:border-gray-700 shadow-md md:flex-col snap-center shrink-0 first:pl-8 w-[18rem] dark:bg-mbz-purple"
   >
     <div class="relative w-full group">
       <img
@@ -63,7 +63,7 @@ import { computed } from "vue";
 import { CategoryPictureLicencing } from "../Categories/constants";
 
 const props = defineProps<{
-  to: { name: string; query: Record<string, string> };
+  to: { name: string; query: Record<string, string | undefined> };
   picture?: CategoryPictureLicencing & { url: string };
 }>();
 
diff --git a/js/src/components/Search/filters/FilterSection.vue b/js/src/components/Search/filters/FilterSection.vue
new file mode 100644
index 000000000..c1643741e
--- /dev/null
+++ b/js/src/components/Search/filters/FilterSection.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="border-b border-gray-200 dark:border-gray-500 py-6">
+    <h2 class="-my-3 flow-root">
+      <!-- Expand/collapse section button -->
+      <button
+        type="button"
+        class="py-3 w-full flex items-center justify-between text-gray-400 hover:text-gray-500 dark:text-slate-100 hover:dark:text-slate-200"
+        aria-controls="filter-section-mobile-0"
+        :aria-expanded="opened"
+        @click="$emit('update:opened', !opened)"
+      >
+        <div class="flex flex-wrap gap-1 flex-col items-start">
+          <span class="font-medium text-gray-900 dark:text-slate-100 text-left">
+            {{ title }}
+          </span>
+          <slot name="preview" />
+        </div>
+        <span class="ml-6 flex items-center">
+          <svg
+            v-show="!opened"
+            class="h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <svg
+            v-show="opened"
+            class="h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </button>
+    </h2>
+    <!-- Filter section, show/hide based on section state. -->
+    <transition>
+      <div v-show="opened" class="pt-2">
+        <slot name="options" />
+      </div>
+    </transition>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps({
+  title: {
+    required: true,
+    type: String,
+  },
+  opened: {
+    required: true,
+    type: Boolean,
+  },
+});
+defineEmits(["update:opened"]);
+</script>
diff --git a/js/src/components/Tag.vue b/js/src/components/Tag.vue
index 18013cbaa..5b8656180 100644
--- a/js/src/components/Tag.vue
+++ b/js/src/components/Tag.vue
@@ -1,7 +1,7 @@
 <template>
   <span
-    class="rounded-md my-1 truncate text-sm text-violet-title capitalize px-2 py-1"
-    :class="typeClasses"
+    class="rounded-md my-1 truncate text-sm text-violet-title px-2 py-1"
+    :class="[typeClasses, capitalize]"
   >
     <slot />
   </span>
@@ -12,8 +12,9 @@ import { computed } from "vue";
 const props = withDefaults(
   defineProps<{
     variant?: "info" | "danger" | "warning" | "light";
+    capitalize: boolean;
   }>(),
-  { variant: "light" }
+  { variant: "light", capitalize: false }
 );
 
 const typeClasses = computed(() => {
@@ -23,6 +24,8 @@ const typeClasses = computed(() => {
       return "bg-purple-3 dark:text-violet-3";
     case "info":
       return "bg-mbz-info dark:text-white";
+    case "warning":
+      return "bg-yellow-1";
     case "danger":
       return "bg-mbz-danger dark:text-white";
   }
diff --git a/js/src/components/core/Tag.vue b/js/src/components/core/CoreTag.vue
similarity index 89%
rename from js/src/components/core/Tag.vue
rename to js/src/components/core/CoreTag.vue
index c0c1e978d..fe66c5ad9 100644
--- a/js/src/components/core/Tag.vue
+++ b/js/src/components/core/CoreTag.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="attached && closable" class="tags has-addons">
-    <span class="tag" :class="[type, size, { 'is-rounded': rounded }]">
+    <span class="tag" :class="[variant, size, { rounded }]">
       <!-- <o-icon
         v-if="icon"
         :icon="icon"
@@ -15,7 +15,7 @@
       class="tag"
       role="button"
       :aria-label="ariaCloseLabel"
-      :tabindex="tabstop ? 0 : false"
+      :tabindex="tabstop ? 0 : undefined"
       :disabled="disabled"
       :class="[
         size,
@@ -35,7 +35,7 @@
       /> -->
     </a>
   </div>
-  <span v-else class="tag" :class="[type, size, { 'is-rounded': rounded }]">
+  <span v-else class="tag" :class="[variant, size, { 'is-rounded': rounded }]">
     <!-- <o-icon
       v-if="icon"
       :icon="icon"
@@ -53,7 +53,7 @@
       class="delete is-small"
       :class="closeType"
       :disabled="disabled"
-      :tabindex="tabstop ? 0 : false"
+      :tabindex="tabstop ? 0 : undefined"
       @click="close"
       @keyup.delete.prevent="close"
     />
@@ -64,7 +64,7 @@ const props = withDefaults(
   defineProps<{
     attached?: boolean;
     closable?: boolean;
-    type?: string;
+    variant?: string;
     size?: string;
     rounded?: boolean;
     disabled?: boolean;
diff --git a/js/src/components/core/MaterialIcon.vue b/js/src/components/core/MaterialIcon.vue
index 20cf3208d..2fe0fbc6f 100644
--- a/js/src/components/core/MaterialIcon.vue
+++ b/js/src/components/core/MaterialIcon.vue
@@ -227,6 +227,8 @@ const icons: Record<string, () => Promise<any>> = {
     import(`../../../node_modules/vue-material-design-icons/LanDisconnect.vue`),
   CloudQuestion: () =>
     import(`../../../node_modules/vue-material-design-icons/CloudQuestion.vue`),
+  Filter: () =>
+    import(`../../../node_modules/vue-material-design-icons/Filter.vue`),
 };
 
 const props = withDefaults(
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index c9281f4e9..082afe078 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -11,7 +11,8 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
     $tags: String
     $term: String
     $type: EventType
-    $category: String
+    $categoryOneOf: [String]
+    $statusOneOf: [EventStatus]
     $beginsOn: DateTime
     $endsOn: DateTime
     $eventPage: Int
@@ -24,7 +25,8 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
       tags: $tags
       term: $term
       type: $type
-      category: $category
+      categoryOneOf: $categoryOneOf
+      statusOneOf: $statusOneOf
       beginsOn: $beginsOn
       endsOn: $endsOn
       page: $eventPage
@@ -156,9 +158,7 @@ export const SEARCH_GROUPS = gql`
   query SearchGroups(
     $location: String
     $radius: Float
-    $tags: String
     $term: String
-    $category: String
     $groupPage: Int
     $limit: Int
   ) {
@@ -188,8 +188,6 @@ export const SEARCH_GROUPS = gql`
       }
     }
   }
-  ${EVENT_OPTIONS_FRAGMENT}
-  ${TAG_FRAGMENT}
   ${ADDRESS_FRAGMENT}
   ${ACTOR_FRAGMENT}
 `;
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 92638ed13..28603c091 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -1365,5 +1365,23 @@
   "multitude of interconnected Mobilizon websites": "multitude of interconnected Mobilizon websites",
   "Mobilizon is a tool that helps you {find_create_organize_events}.": "Mobilizon is a tool that helps you {find_create_organize_events}.",
   "Ethical alternative to Facebook events, groups and pages, Mobilizon is a {tool_designed_to_serve_you}. Period.": "Ethical alternative to Facebook events, groups and pages, Mobilizon is a {tool_designed_to_serve_you}. Period.",
-  "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}.": "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}."
+  "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}.": "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}.",
+  "translation": "",
+  "detail": "",
+  "Events close to you": "Events close to you",
+  "Popular groups close to you": "Popular groups close to you",
+  "View more events": "View more events",
+  "Hide filters": "Hide filters",
+  "Show filters": "Show filters",
+  "Online events": "Online events",
+  "Event date": "Event date",
+  "Distance": "Distance",
+  "{numberOfCategories} selected": "{numberOfCategories} selected",
+  "Event status": "Event status",
+  "Statuses": "Statuses",
+  "Languages": "Languages",
+  "{numberOfLanguages} selected": "{numberOfLanguages} selected",
+  "Apply filters": "Apply filters",
+  "Any distance": "Any distance",
+  "{number} kilometers": "{number} kilometers"
 }
\ No newline at end of file
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 4869c5a17..74c219316 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -1351,5 +1351,21 @@
   "multitude of interconnected Mobilizon websites": "multitude de sites web Mobilizon interconnectés",
   "Mobilizon is a tool that helps you {find_create_organize_events}.": "Mobilizon est un outil qui vous permet de {find_create_organize_events}.",
   "Ethical alternative to Facebook events, groups and pages, Mobilizon is a {tool_designed_to_serve_you}. Period.": "Alternative éthique aux événements, groupes et pages Facebook, Mobilizon est un {tool_designed_to_serve_you}. Point.",
-  "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}.": "Mobilizon n’est pas une plateforme géante, mais une {multitude_of_interconnected_mobilizon_websites}."
+  "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}.": "Mobilizon n’est pas une plateforme géante, mais une {multitude_of_interconnected_mobilizon_websites}.",
+  "Events close to you": "Événements proches de vous",
+  "Popular groups close to you": "Groupes populaires proches de vous",
+  "View more events": "Voir plus d'événements",
+  "Hide filters": "Masquer les filtres",
+  "Show filters": "Afficher les filtres",
+  "Online events": "Événements en ligne",
+  "Event date": "Date de l'événement",
+  "Distance": "Distance",
+  "{numberOfCategories} selected": "{numberOfCategories} sélectionnées",
+  "Event status": "Statut de l'événement",
+  "Statuses": "Statuts",
+  "Languages": "Langues",
+  "{numberOfLanguages} selected": "{numberOfLanguages} sélectionnées",
+  "Apply filters": "Appliquer les filtres",
+  "Any distance": "N'importe quelle distance",
+  "{number} kilometers": "{number} kilomètres"
 }
diff --git a/js/src/main.ts b/js/src/main.ts
index c73dc36be..bce9e6373 100644
--- a/js/src/main.ts
+++ b/js/src/main.ts
@@ -20,7 +20,7 @@ import { dateFnsPlugin } from "./plugins/dateFns";
 import { dialogPlugin } from "./plugins/dialog";
 import { snackbarPlugin } from "./plugins/snackbar";
 import { notifierPlugin } from "./plugins/notifier";
-import Tag from "./components/core/Tag.vue";
+import Tag from "./components/core/CoreTag.vue";
 import FloatingVue from "floating-vue";
 import "floating-vue/dist/style.css";
 import Oruga from "@oruga-ui/oruga-next";
diff --git a/js/src/oruga-config.ts b/js/src/oruga-config.ts
index 59b6c867e..82c4610d9 100644
--- a/js/src/oruga-config.ts
+++ b/js/src/oruga-config.ts
@@ -77,4 +77,25 @@ export const orugaConfig = {
     tableClass: "table",
     tdClass: "table-td",
   },
+  pagination: {
+    rootClass: "pagination",
+    simpleClass: "pagination-simple",
+    listClass: "pagination-list",
+    infoClass: "pagination-info",
+    linkClass: "pagination-link",
+    linkCurrentClass: "pagination-link-current",
+    linkDisabledClass: "pagination-link-disabled",
+    nextBtnClass: "pagination-next",
+    prevBtnClass: "pagination-previous",
+    ellipsisClass: "pagination-ellipsis",
+  },
+  tabs: {
+    rootClass: "tabs",
+    navTabsClass: "tabs-nav",
+    navTypeClass: "tabs-nav-",
+    navSizeClass: "tabs-nav-",
+    tabItemWrapperClass: "tabs-nav-item-wrapper",
+    itemHeaderTypeClass: "tabs-nav-item-",
+    itemHeaderActiveClass: "tabs-nav-item-active-",
+  },
 };
diff --git a/js/src/registerServiceWorker.ts b/js/src/registerServiceWorker.ts
index c78ddbc29..a84837468 100644
--- a/js/src/registerServiceWorker.ts
+++ b/js/src/registerServiceWorker.ts
@@ -1,8 +1,6 @@
-/* eslint-disable no-console */
-
 import { register } from "register-service-worker";
 
-if ("serviceWorker" in navigator) {
+if ("serviceWorker" in navigator && import.meta.env.PROD) {
   register(`${import.meta.env.BASE_URL}service-worker.js`, {
     ready() {
       console.debug(
diff --git a/js/src/types/enums.ts b/js/src/types/enums.ts
index 1061d196b..e4e51534d 100644
--- a/js/src/types/enums.ts
+++ b/js/src/types/enums.ts
@@ -130,6 +130,12 @@ export enum SearchTabs {
   GROUPS = 1,
 }
 
+export enum ContentType {
+  ALL = "ALL",
+  EVENTS = "EVENTS",
+  GROUPS = "GROUPS",
+}
+
 export enum ActorType {
   PERSON = "PERSON",
   APPLICATION = "APPLICATION",
diff --git a/js/src/utils/html.ts b/js/src/utils/html.ts
index c47c06f20..ffa2dad41 100644
--- a/js/src/utils/html.ts
+++ b/js/src/utils/html.ts
@@ -2,6 +2,11 @@ export function nl2br(text: string): string {
   return text.replace(/(?:\r\n|\r|\n)/g, "<br>");
 }
 
-export function flattenHTMLParagraphs(html: string): string {
-  return html.replace("</p><p>", "<br />").replace(/<?\/p>/g, "");
+export function htmlToText(html: string) {
+  const template = document.createElement("template");
+  const trimmedHTML = html.trim();
+  template.innerHTML = trimmedHTML;
+  const text = template.content.textContent;
+  template.remove();
+  return text;
 }
diff --git a/js/src/utils/i18n.ts b/js/src/utils/i18n.ts
index 237f0e2e4..c2a7030f5 100644
--- a/js/src/utils/i18n.ts
+++ b/js/src/utils/i18n.ts
@@ -11,17 +11,10 @@ const localeInLocalStorage = getLocaleData();
 
 export const AVAILABLE_LANGUAGES = Object.keys(langs);
 
-console.debug("localeInLocalStorage", localeInLocalStorage);
-
 let language =
   localeInLocalStorage ||
   (document.documentElement.getAttribute("lang") as string);
 
-console.debug(
-  "localeInLocalStorage or fallback to lang html attribute",
-  language
-);
-
 language =
   language ||
   ((window.navigator as any).userLanguage || window.navigator.language).replace(
@@ -29,15 +22,11 @@ language =
     "_"
   );
 
-console.debug("language or fallback to window.navigator language", language);
-
 export const locale =
   language && Object.prototype.hasOwnProperty.call(langs, language)
     ? language
     : language.split("-")[0];
 
-console.debug("chosen locale", locale);
-
 export const i18n = createI18n({
   legacy: false,
   locale: locale, // set locale
@@ -52,12 +41,9 @@ export const i18n = createI18n({
   globalInjection: true,
 });
 
-console.debug("set VueI18n with default locale", DEFAULT_LOCALE);
-
 const loadedLanguages = [DEFAULT_LOCALE];
 
 function setI18nLanguage(lang: string): string {
-  console.debug("setting i18n locale to", lang);
   i18n.global.locale = lang;
   setLanguageInDOM(lang);
   return lang;
@@ -74,7 +60,6 @@ function setLanguageInDOM(lang: string): void {
   const direction = ["ar", "ae", "he", "fa", "ku", "ur"].includes(fixedLang)
     ? "rtl"
     : "ltr";
-  console.debug("setDirection with", [fixedLang, direction]);
   html.setAttribute("dir", direction);
 }
 
@@ -96,17 +81,14 @@ function vueI18NfileForLanguage(lang: string) {
 export async function loadLanguageAsync(lang: string): Promise<string> {
   // If the same language
   if (i18n.global.locale === lang) {
-    console.debug("already using language", lang);
     return Promise.resolve(setI18nLanguage(lang));
   }
 
   // If the language was already loaded
   if (loadedLanguages.includes(lang)) {
-    console.debug("language already loaded", lang);
     return Promise.resolve(setI18nLanguage(lang));
   }
   // If the language hasn't been loaded yet
-  console.debug("loading language", lang);
   const newMessages = await import(
     `../i18n/${vueI18NfileForLanguage(lang)}.json`
   );
@@ -115,9 +97,7 @@ export async function loadLanguageAsync(lang: string): Promise<string> {
   return setI18nLanguage(lang);
 }
 
-console.debug("loading async locale", locale);
 loadLanguageAsync(locale);
-console.debug("loaded async locale", locale);
 
 export function formatList(list: string[]): string {
   if (window.Intl && Intl.ListFormat) {
diff --git a/js/src/utils/listFormat.ts b/js/src/utils/listFormat.ts
new file mode 100644
index 000000000..47cb20787
--- /dev/null
+++ b/js/src/utils/listFormat.ts
@@ -0,0 +1,17 @@
+const shortConjunctionFormatter = new Intl.ListFormat(undefined, {
+  style: "short",
+  type: "conjunction",
+});
+
+const shortDisjunctionFormatter = new Intl.ListFormat(undefined, {
+  style: "short",
+  type: "disjunction",
+});
+
+export const listShortConjunctionFormatter = (list: Array<string>): string => {
+  return shortConjunctionFormatter.format(list);
+};
+
+export const listShortDisjunctionFormatter = (list: Array<string>): string => {
+  return shortDisjunctionFormatter.format(list);
+};
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 6c0c613df..bf7dcbb16 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -66,7 +66,7 @@
                 </span>
               </div>
               <p class="flex gap-1 items-center" dir="auto">
-                <tag v-if="eventCategory" class="category">{{
+                <tag v-if="eventCategory" class="category" capitalize>{{
                   eventCategory
                 }}</tag>
                 <router-link
@@ -77,22 +77,22 @@
                   <tag>{{ tag.title }}</tag>
                 </router-link>
               </p>
-              <b-tag variant="warning" size="is-medium" v-if="event?.draft"
+              <tag variant="warning" size="is-medium" v-if="event?.draft"
                 >{{ t("Draft") }}
-              </b-tag>
+              </tag>
               <span
                 class="event-status"
                 v-if="event?.status !== EventStatus.CONFIRMED"
               >
-                <b-tag
+                <tag
                   variant="warning"
                   v-if="event?.status === EventStatus.TENTATIVE"
-                  >{{ t("Event to be confirmed") }}</b-tag
+                  >{{ t("Event to be confirmed") }}</tag
                 >
-                <b-tag
+                <tag
                   variant="danger"
                   v-if="event?.status === EventStatus.CANCELLED"
-                  >{{ t("Event cancelled") }}</b-tag
+                  >{{ t("Event cancelled") }}</tag
                 >
               </span>
             </div>
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index 8112a5f04..b56b0ac9b 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -79,15 +79,13 @@
         <section
           class="py-4"
           v-if="
-            showUpcoming &&
-            monthlyFutureEvents &&
-            monthlyFutureEvents.length > 0
+            showUpcoming && monthlyFutureEvents && monthlyFutureEvents.size > 0
           "
         >
           <transition-group name="list" tag="p">
             <div
               class="mb-5"
-              v-for="month of monthlyFutureEvents()"
+              v-for="month of monthlyFutureEvents"
               :key="month[0]"
             >
               <span class="upcoming-month">{{ month[0] }}</span>
@@ -336,7 +334,7 @@ const monthlyEvents = (
   }, new Map());
 };
 
-const monthlyFutureEvents = (): Map<string, Eventable[]> => {
+const monthlyFutureEvents = computed((): Map<string, Eventable[]> => {
   let eventable = [] as Eventable[];
   if (showAttending.value) {
     eventable = [...eventable, ...futureParticipations.value];
@@ -345,7 +343,7 @@ const monthlyFutureEvents = (): Map<string, Eventable[]> => {
     eventable = [...eventable, ...groupEvents.value];
   }
   return monthlyEvents(eventable);
-};
+});
 
 const monthlyPastParticipations = computed((): Map<string, Eventable[]> => {
   return monthlyEvents(pastParticipations.value.elements, true);
diff --git a/js/src/views/HomeView.vue b/js/src/views/HomeView.vue
index 1833f77a9..16cbbe17d 100644
--- a/js/src/views/HomeView.vue
+++ b/js/src/views/HomeView.vue
@@ -1,226 +1,171 @@
 <template>
-  <div>
-    <!-- <o-loading v-model:active="$apollo.loading" /> -->
-    <section class="mt-5 sm:mt-24">
-      <div class="-z-10 overflow-hidden">
-        <img
-          alt=""
-          src="/img/shape-1.svg"
-          class="-z-10 absolute left-[2%] top-36"
-          width="300"
-        />
-        <img
-          alt=""
-          src="/img/shape-2.svg"
-          class="-z-10 absolute left-[50%] top-[5%] -translate-x-2/4 opacity-60"
-          width="800"
-        />
-        <img
-          alt=""
-          src="/img/shape-3.svg"
-          class="-z-10 absolute top-0 right-36"
-          width="200"
-        />
-      </div>
-    </section>
-    <unlogged-introduction :config="config" v-if="config && !isLoggedIn" />
-    <search-fields v-model:search="search" v-model:location="location" />
-    <categories-preview />
-    <div
-      id="recent_events"
-      class="container mx-auto section"
-      v-if="config && (!currentUser || !currentActor)"
-    >
-      <section class="events-recent px-2">
-        <h2 class="title">
-          {{ $t("Last published events") }}
-        </h2>
-        <p>
-          <i18n-t
-            tag="span"
-            keypath="On {instance} and other federated instances"
-          >
-            <template #instance>
-              <b>{{ config.name }}</b>
-            </template>
-          </i18n-t>
-        </p>
-        <div v-if="events.total > 0">
-          <multi-card :events="events.elements.slice(0, 6)" />
-          <span
-            class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
-          >
-            <router-link
-              :to="{ name: RouteName.SEARCH }"
-              class="hover:text-slate-800 hover:dark:text-slate-400"
-              >{{ $t("View everything") }} >></router-link
-            >
-          </span>
-        </div>
-        <o-notification v-else variant="danger">{{
-          $t("No events found")
-        }}</o-notification>
-      </section>
-    </div>
-    <div
-      id="picture"
-      v-if="config && (!currentUser || !currentUser.isLoggedIn)"
-    >
-      <div class="container mx-auto">
-        <close-events @doGeoLoc="performGeoLocation()" />
-      </div>
-      <div class="picture-container">
-        <picture>
-          <source
-            media="(max-width: 799px)"
-            :srcset="`/img/pics/homepage-480w.webp`"
-            type="image/webp"
-          />
-
-          <source
-            media="(max-width: 1024px)"
-            :srcset="`/img/pics/homepage-1024w.webp`"
-            type="image/webp"
-          />
-
-          <source
-            media="(max-width: 1920px)"
-            :srcset="`/img/pics/homepage-1920w.webp`"
-            type="image/webp"
-          />
-
-          <source
-            media="(min-width: 1921px)"
-            :srcset="`/img/pics/homepage.webp`"
-            type="image/webp"
-          />
-
-          <img
-            :src="`/img/pics/homepage-1024w.webp`"
-            width="3840"
-            height="2719"
-            alt=""
-            loading="lazy"
-          />
-        </picture>
-      </div>
-      <presentation />
-    </div>
-    <div class="container mx-auto" v-if="config && loggedUserSettings">
-      <section
-        v-if="
-          currentActor && currentActor.id && (welcomeBack || newRegisteredUser)
-        "
-      >
-        <o-notification variant="info" v-if="welcomeBack">{{
-          $t("Welcome back {username}!", {
-            username: currentActor.displayName(),
-          })
-        }}</o-notification>
-        <o-notification variant="info" v-if="newRegisteredUser">{{
-          $t("Welcome to Mobilizon, {username}!", {
-            username: currentActor.displayName(),
-          })
-        }}</o-notification>
-      </section>
-      <!-- Your upcoming events -->
-      <section v-if="canShowMyUpcomingEvents">
-        <h2 class="dark:text-white text-2xl font-bold">
-          {{ $t("Your upcoming events") }}
-        </h2>
-        <div
-          v-for="row of goingToEvents"
-          class="text-slate-700 dark:text-slate-300"
-          :key="row[0]"
-        >
-          <p
-            class="date-component-container"
-            v-if="isInLessThanSevenDays(row[0])"
-          >
-            <span v-if="isToday(row[0])">{{
-              $t(
-                "You have one event today.",
-                {
-                  count: row[1].size,
-                },
-                row[1].size
-              )
-            }}</span>
-            <span v-else-if="isTomorrow(row[0])">{{
-              $t(
-                "You have one event tomorrow.",
-                {
-                  count: row[1].size,
-                },
-                row[1].size
-              )
-            }}</span>
-            <span v-else-if="isInLessThanSevenDays(row[0])">
-              {{
-                $t(
-                  "You have one event in {days} days.",
-                  {
-                    count: row[1].size,
-                    days: calculateDiffDays(row[0]),
-                  },
-                  row[1].size
-                )
-              }}
-            </span>
-          </p>
-          <div>
-            <event-participation-card
-              v-for="participation in thisWeek(row)"
-              :key="participation[1].id"
-              :participation="participation[1]"
-            />
-          </div>
-        </div>
-        <span
-          class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
-        >
-          <router-link
-            :to="{ name: RouteName.MY_EVENTS }"
-            class="hover:text-slate-800 hover:dark:text-slate-400"
-            >{{ $t("View everything") }} >></router-link
-          >
-        </span>
-      </section>
-      <hr
-        role="presentation"
-        class="home-separator"
-        v-if="canShowMyUpcomingEvents && canShowFollowedGroupEvents"
+  <!-- <o-loading v-model:active="$apollo.loading" /> -->
+  <!-- Nice looking SVGs -->
+  <section class="mt-5 sm:mt-24">
+    <div class="-z-10 overflow-hidden">
+      <img
+        alt=""
+        src="/img/shape-1.svg"
+        class="-z-10 absolute left-[2%] top-36"
+        width="300"
+      />
+      <img
+        alt=""
+        src="/img/shape-2.svg"
+        class="-z-10 absolute left-[50%] top-[5%] -translate-x-2/4 opacity-60"
+        width="800"
+      />
+      <img
+        alt=""
+        src="/img/shape-3.svg"
+        class="-z-10 absolute top-0 right-36"
+        width="200"
       />
-      <!-- Events from your followed groups -->
-      <section class="followActivity" v-if="canShowFollowedGroupEvents">
-        <h2 class="title">
-          {{ $t("Upcoming events from your groups") }}
-        </h2>
-        <p>{{ $t("That you follow or of which you are a member") }}</p>
-        <multi-card :events="filteredFollowedGroupsEvents" />
-        <span
-          class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
-        >
-          <router-link
-            class="hover:text-slate-800 hover:dark:text-slate-400"
-            :to="{
-              name: RouteName.MY_EVENTS,
-              query: {
-                showUpcoming: 'true',
-                showDrafts: 'false',
-                showAttending: 'false',
-                showMyGroups: 'true',
-              },
-            }"
-            >{{ $t("View everything") }} >></router-link
-          >
-        </span>
-      </section>
-
-      <CloseEvents @doGeoLoc="performGeoLocation()" />
-      <LastEvents :instanceName="config.name" class="mb-10" />
     </div>
-  </div>
+  </section>
+  <!-- Unlogged introduction -->
+  <unlogged-introduction :config="config" v-if="config && !isLoggedIn" />
+  <!-- Search fields -->
+  <search-fields v-model:search="search" v-model:location="location" />
+  <!-- Categories preview -->
+  <categories-preview />
+  <!-- Welcome back -->
+  <section v-if="currentActor?.id && (welcomeBack || newRegisteredUser)">
+    <o-notification variant="info" v-if="welcomeBack">{{
+      $t("Welcome back {username}!", {
+        username: displayName(currentActor),
+      })
+    }}</o-notification>
+    <o-notification variant="info" v-if="newRegisteredUser">{{
+      $t("Welcome to Mobilizon, {username}!", {
+        username: displayName(currentActor),
+      })
+    }}</o-notification>
+  </section>
+  <!-- Your upcoming events -->
+  <section v-if="canShowMyUpcomingEvents" class="container mx-auto">
+    <h2 class="dark:text-white font-bold">
+      {{ $t("Your upcoming events") }}
+    </h2>
+    <div
+      v-for="row of goingToEvents"
+      class="text-slate-700 dark:text-slate-300"
+      :key="row[0]"
+    >
+      <p class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
+        <span v-if="isToday(row[0])">{{
+          $t(
+            "You have one event today.",
+            {
+              count: row[1].size,
+            },
+            row[1].size
+          )
+        }}</span>
+        <span v-else-if="isTomorrow(row[0])">{{
+          $t(
+            "You have one event tomorrow.",
+            {
+              count: row[1].size,
+            },
+            row[1].size
+          )
+        }}</span>
+        <span v-else-if="isInLessThanSevenDays(row[0])">
+          {{
+            $t(
+              "You have one event in {days} days.",
+              {
+                count: row[1].size,
+                days: calculateDiffDays(row[0]),
+              },
+              row[1].size
+            )
+          }}
+        </span>
+      </p>
+      <div>
+        <event-participation-card
+          v-for="participation in thisWeek(row)"
+          :key="participation[1].id"
+          :participation="participation[1]"
+        />
+      </div>
+    </div>
+    <span
+      class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
+    >
+      <router-link
+        :to="{ name: RouteName.MY_EVENTS }"
+        class="hover:text-slate-800 hover:dark:text-slate-400"
+        >{{ $t("View everything") }} >></router-link
+      >
+    </span>
+  </section>
+  <!-- Events from your followed groups -->
+  <section class="followActivity" v-if="canShowFollowedGroupEvents">
+    <h2 class="title">
+      {{ $t("Upcoming events from your groups") }}
+    </h2>
+    <p>{{ $t("That you follow or of which you are a member") }}</p>
+    <multi-card :events="filteredFollowedGroupsEvents" />
+    <span
+      class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
+    >
+      <router-link
+        class="hover:text-slate-800 hover:dark:text-slate-400"
+        :to="{
+          name: RouteName.MY_EVENTS,
+          query: {
+            showUpcoming: 'true',
+            showDrafts: 'false',
+            showAttending: 'false',
+            showMyGroups: 'true',
+          },
+        }"
+        >{{ $t("View everything") }} >></router-link
+      >
+    </span>
+  </section>
+  <!-- Recent events -->
+  <CloseEvents @doGeoLoc="performGeoLocation()" :userLocation="userLocation" />
+  <CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
+  <LastEvents v-if="config" :instanceName="config.name" />
+  <!-- Unlogged content section -->
+  <picture v-if="!currentUser?.isLoggedIn">
+    <source
+      media="(max-width: 799px)"
+      :srcset="`/img/pics/homepage-480w.webp`"
+      type="image/webp"
+    />
+
+    <source
+      media="(max-width: 1024px)"
+      :srcset="`/img/pics/homepage-1024w.webp`"
+      type="image/webp"
+    />
+
+    <source
+      media="(max-width: 1920px)"
+      :srcset="`/img/pics/homepage-1920w.webp`"
+      type="image/webp"
+    />
+
+    <source
+      media="(min-width: 1921px)"
+      :srcset="`/img/pics/homepage.webp`"
+      type="image/webp"
+    />
+
+    <img
+      :src="`/img/pics/homepage-1024w.webp`"
+      width="3840"
+      height="2719"
+      alt=""
+      loading="lazy"
+    />
+  </picture>
+  <presentation v-if="!currentUser?.isLoggedIn" />
 </template>
 
 <script lang="ts" setup>
@@ -231,8 +176,7 @@ import { FETCH_EVENTS } from "../graphql/event";
 import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
 import MultiCard from "../components/Event/MultiCard.vue";
 import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
-import { IPerson, Person } from "../types/actor";
-import ngeohash from "ngeohash";
+import { IPerson, displayName } from "../types/actor";
 import {
   ICurrentUser,
   IUser,
@@ -246,6 +190,7 @@ import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
 // import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
 import CloseEvents from "@/components/Local/CloseEvents.vue";
+import CloseGroups from "@/components/Local/CloseGroups.vue";
 import LastEvents from "@/components/Local/LastEvents.vue";
 import { computed, onMounted, reactive, watch } from "vue";
 import { useMutation, useQuery } from "@vue/apollo-composable";
@@ -262,7 +207,7 @@ import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
 import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
 import SearchFields from "@/components/Home/SearchFields.vue";
 import { useHead } from "@vueuse/head";
-import InformationOutline from "vue-material-design-icons/InformationOutline.vue";
+import { geoHashToCoords } from "@/utils/location";
 
 const { result: resultEvents } = useQuery<{ events: Paginate<IEvent> }>(
   FETCH_EVENTS,
@@ -278,8 +223,8 @@ const events = computed(
 const { result: currentActorResult } = useQuery<{ currentActor: IPerson }>(
   CURRENT_ACTOR_CLIENT
 );
-const currentActor = computed<Person | undefined>(
-  () => new Person(currentActorResult.value?.currentActor)
+const currentActor = computed<IPerson | undefined>(
+  () => currentActorResult.value?.currentActor
 );
 
 const { result: currentUserResult } = useQuery<{
@@ -305,112 +250,6 @@ const followedGroupEvents = computed(
   () => userResult.value?.loggedUser?.followedGroupEvents
 );
 
-const userSettingsLocation = computed(
-  () => loggedUser.value?.settings?.location
-);
-
-const { result: currentUserLocationResult } = useQuery<{
-  currentUserLocation: LocationType;
-}>(CURRENT_USER_LOCATION_CLIENT);
-
-const currentUserLocation = computed(() => {
-  return currentUserLocationResult.value?.currentUserLocation;
-});
-
-const { mutate: saveCurrentUserLocation } = useMutation<any, LocationType>(
-  UPDATE_CURRENT_USER_LOCATION_CLIENT
-);
-
-const reverseGeoCodeInformation = reactive<{
-  latitude: number | undefined;
-  longitude: number | undefined;
-  accuracy: number | undefined;
-}>({
-  latitude: undefined,
-  longitude: undefined,
-  accuracy: undefined,
-});
-
-const { onResult: onReverseGeocodeResult } = useQuery<{
-  reverseGeocode: IAddress[];
-}>(REVERSE_GEOCODE, reverseGeoCodeInformation, () => ({
-  enabled: reverseGeoCodeInformation.latitude !== undefined,
-}));
-
-onReverseGeocodeResult((result) => {
-  if (!result?.data) return;
-  const geoLocationInformation = result?.data?.reverseGeocode[0];
-  console.debug("geoLocationInformation", result.data);
-  const placeName =
-    geoLocationInformation.locality ??
-    geoLocationInformation.region ??
-    geoLocationInformation.country;
-  console.log("place name", placeName);
-
-  saveCurrentUserLocation({
-    lat: reverseGeoCodeInformation.latitude,
-    lon: reverseGeoCodeInformation.longitude,
-    accuracy: Math.round(reverseGeoCodeInformation.accuracy ?? 12) / 1000,
-    isIPLocation: false,
-    name: placeName,
-    picture: geoLocationInformation.pictureInfo,
-  });
-});
-
-const fetchAndSaveCurrentLocationName = async ({
-  coords: { latitude, longitude, accuracy },
-}: GeolocationPosition) => {
-  console.debug(
-    "data found from navigator geocoding",
-    latitude,
-    longitude,
-    accuracy
-  );
-  reverseGeoCodeInformation.latitude = latitude;
-  reverseGeoCodeInformation.longitude = longitude;
-  reverseGeoCodeInformation.accuracy = accuracy;
-};
-
-const performGeoLocation = () => {
-  navigator.geolocation.getCurrentPosition(fetchAndSaveCurrentLocationName);
-};
-
-const GEOHASH_DEPTH = 9; // put enough accuracy, radius will be used anyway
-
-const geohash = computed(
-  () => userSettingsLocation.value?.geohash ?? currentUserLocationGeoHash
-);
-
-const currentUserLocationGeoHash = computed(() => {
-  if (currentUserLocation.value?.lat && currentUserLocation.value?.lon) {
-    return ngeohash.encode(
-      currentUserLocation.value?.lat,
-      currentUserLocation.value?.lon,
-      GEOHASH_DEPTH
-    );
-  }
-  return undefined;
-});
-
-const radius = computed(
-  () => userSettingsLocation.value?.range ?? currentUserLocation.value?.accuracy
-);
-const locationName = computed(
-  () => userSettingsLocation.value?.name ?? currentUserLocation.value?.name
-);
-
-// const { result: closeEventsResult } = useQuery<{
-//   searchEvents: Paginate<IEvent>;
-// }>(
-//   CLOSE_CONTENT,
-//   { location: geohash, radius },
-//   { enabled: geohash.value !== undefined }
-// );
-
-// const closeEvents = computed(
-//   () => closeEventsResult.value?.searchEvents || { total: 0, elements: [] }
-// );
-
 const currentUserParticipations = computed(
   () => loggedUser.value?.participations.elements
 );
@@ -499,16 +338,6 @@ const goingToEvents = computed<Map<string, Map<string, IParticipant>>>(() => {
   );
 });
 
-// const eventDeleted = (eventid: string): void => {
-//   currentUserParticipations = currentUserParticipations?.filter(
-//     (participation) => participation.event.id !== eventid
-//   );
-// }
-
-// viewEvent(event: IEvent): void {
-//   this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
-// }
-
 const loggedUserSettings = computed<IUserSettings | undefined>(() => {
   return loggedUser.value?.settings;
 });
@@ -517,14 +346,6 @@ const canShowMyUpcomingEvents = computed<boolean>(() => {
   return currentActor.value?.id != undefined && goingToEvents.value.size > 0;
 });
 
-// const canShowCloseEvents = computed<boolean>(() => {
-//   return (
-//     loggedUser.value?.settings?.location != undefined &&
-//     closeEvents.value != undefined &&
-//     closeEvents.value?.total > 0
-//   );
-// });
-
 const canShowFollowedGroupEvents = computed<boolean>(() => {
   return filteredFollowedGroupsEvents.value.length > 0;
 });
@@ -562,18 +383,134 @@ watch(loggedUser, (loggedUserValue) => {
     });
   }
 });
-
-// metaInfo() {
-//   return {
-//     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//     // @ts-ignore
-//     title: this.instanceName,
-//     titleTemplate: "%s | Mobilizon",
-//   };
-// },
-
 const isLoggedIn = computed(() => loggedUser.value?.id !== undefined);
 
+/**
+ * Geolocation stuff
+ */
+
+// The location hash saved in the user settings (should be the default)
+const userSettingsLocationGeoHash = computed(
+  () => loggedUser.value?.settings?.location?.geohash
+);
+
+// The location provided by the server
+const serverLocation = computed(() => config.value?.location);
+
+// The coords from the user location or the server provided location
+const coords = computed(() => {
+  const userSettingsCoords = geoHashToCoords(
+    userSettingsLocationGeoHash.value ?? undefined
+  );
+
+  if (userSettingsCoords) {
+    return { ...userSettingsCoords, isIPLocation: false };
+  }
+
+  return { ...serverLocation.value, isIPLocation: true };
+});
+
+const { result: reverseGeocodeResult } = useQuery<{
+  reverseGeocode: IAddress[];
+}>(REVERSE_GEOCODE, coords, () => ({
+  enabled: coords.value?.longitude != undefined,
+}));
+
+const userSettingsLocation = computed(() => {
+  const address = reverseGeocodeResult.value?.reverseGeocode[0];
+  const placeName = address?.locality ?? address?.region ?? address?.country;
+  return {
+    lat: coords.value?.latitude,
+    lon: coords.value?.longitude,
+    name: placeName,
+    picture: address?.pictureInfo,
+    isIPLocation: coords.value?.isIPLocation,
+  };
+});
+
+const { result: currentUserLocationResult } = useQuery<{
+  currentUserLocation: LocationType;
+}>(CURRENT_USER_LOCATION_CLIENT);
+
+// The user's location currently in the Apollo cache
+const currentUserLocation = computed(() => {
+  return {
+    ...(currentUserLocationResult.value?.currentUserLocation ?? {
+      lat: undefined,
+      lon: undefined,
+      accuracy: undefined,
+      isIPLocation: undefined,
+      name: undefined,
+      picture: undefined,
+    }),
+    isIPLocation: false,
+  };
+});
+
+const userLocation = computed(() => {
+  if (
+    !userSettingsLocation.value ||
+    (userSettingsLocation.value?.isIPLocation &&
+      currentUserLocation.value?.name)
+  ) {
+    return currentUserLocation.value;
+  }
+  return userSettingsLocation.value;
+});
+
+const { mutate: saveCurrentUserLocation } = useMutation<any, LocationType>(
+  UPDATE_CURRENT_USER_LOCATION_CLIENT
+);
+
+const reverseGeoCodeInformation = reactive<{
+  latitude: number | undefined;
+  longitude: number | undefined;
+  accuracy: number | undefined;
+}>({
+  latitude: undefined,
+  longitude: undefined,
+  accuracy: undefined,
+});
+
+const { onResult: onReverseGeocodeResult } = useQuery<{
+  reverseGeocode: IAddress[];
+}>(REVERSE_GEOCODE, reverseGeoCodeInformation, () => ({
+  enabled: reverseGeoCodeInformation.latitude !== undefined,
+}));
+
+onReverseGeocodeResult((result) => {
+  if (!result?.data) return;
+  const geoLocationInformation = result?.data?.reverseGeocode[0];
+  const placeName =
+    geoLocationInformation.locality ??
+    geoLocationInformation.region ??
+    geoLocationInformation.country;
+
+  saveCurrentUserLocation({
+    lat: reverseGeoCodeInformation.latitude,
+    lon: reverseGeoCodeInformation.longitude,
+    accuracy: Math.round(reverseGeoCodeInformation.accuracy ?? 12) / 1000,
+    isIPLocation: false,
+    name: placeName,
+    picture: geoLocationInformation.pictureInfo,
+  });
+});
+
+const fetchAndSaveCurrentLocationName = async ({
+  coords: { latitude, longitude, accuracy },
+}: GeolocationPosition) => {
+  reverseGeoCodeInformation.latitude = latitude;
+  reverseGeoCodeInformation.longitude = longitude;
+  reverseGeoCodeInformation.accuracy = accuracy;
+};
+
+const performGeoLocation = () => {
+  navigator.geolocation.getCurrentPosition(fetchAndSaveCurrentLocationName);
+};
+
+/**
+ * View Head
+ */
 useHead({
   title: computed(() => instanceName.value ?? ""),
 });
diff --git a/js/src/views/SearchView.vue b/js/src/views/SearchView.vue
index ef97def1e..1cf9edd3f 100644
--- a/js/src/views/SearchView.vue
+++ b/js/src/views/SearchView.vue
@@ -1,234 +1,500 @@
 <template>
-  <div class="container mx-auto mb-4">
-    <h1 class="">{{ $t("Explore") }}</h1>
-    <section v-if="tag">
-      <i18n-t keypath="Events tagged with {tag}">
-        <template #tag>
-          <b-tag variant="light">{{ $t("#{tag}", { tag }) }}</b-tag>
-        </template>
-      </i18n-t>
-    </section>
-    <section class="" v-else>
-      <div class="">
-        <form @submit.prevent="submit()">
-          <o-field
-            :label="$t('Key words')"
-            label-for="search"
-            class="text-black"
-          >
-            <o-input
-              icon="Magnify"
-              type="search"
-              id="search"
-              ref="autocompleteSearchInput"
-              :modelValue="search"
-              @modelValue:update="debouncedUpdateSearchQuery"
-              dir="auto"
-              :placeholder="
-                $t('For instance: London, Taekwondo, Architecture…')
-              "
-            />
-          </o-field>
-          <full-address-auto-complete
-            :label="$t('Location')"
-            v-model="location"
-            id="location"
-            ref="aac"
-            :placeholder="$t('For instance: London')"
-            :hideMap="true"
-            :hideSelected="true"
-          />
-          <o-field
-            :label="$t('Radius')"
-            label-for="radius"
-            class="searchRadius"
-          >
-            <o-select expanded v-model="radius" id="radius">
-              <option
-                v-for="(radiusOption, index) in radiusOptions"
-                :key="index"
-                :value="radiusOption"
-              >
-                {{ radiusString(radiusOption) }}
-              </option>
-            </o-select>
-          </o-field>
-          <o-field :label="$t('Date')" label-for="date">
-            <o-select
-              expanded
-              v-model="when"
-              id="date"
-              :disabled="activeTab !== 0"
-            >
-              <option
-                v-for="(option, index) in dateOptions"
-                :key="index"
-                :value="index"
-              >
-                {{ option.label }}
-              </option>
-            </o-select>
-          </o-field>
-          <o-field
-            expanded
-            :label="$t('Type')"
-            label-for="type"
-            class="searchType"
-          >
-            <o-select
-              expanded
-              v-model="type"
-              id="type"
-              :disabled="activeTab !== 0"
-            >
-              <option :value="null">
-                {{ $t("Any type") }}
-              </option>
-              <option :value="'ONLINE'">
-                {{ $t("Online") }}
-              </option>
-              <option :value="'IN_PERSON'">
-                {{ $t("In person") }}
-              </option>
-            </o-select>
-          </o-field>
-          <o-field
-            v-if="config"
-            expanded
-            :label="$t('Category')"
-            label-for="category"
-            class="searchCategory"
-          >
-            <o-select
-              expanded
-              v-model="eventCategory"
-              id="category"
-              :disabled="activeTab !== 0"
-            >
-              <option :value="null">
-                {{ $t("Any category") }}
-              </option>
-              <option
-                :value="category.id"
-                v-for="category in config.eventCategories"
-                :key="category.id"
-              >
-                {{ category.label }}
-              </option>
-            </o-select>
-          </o-field>
-        </form>
-      </div>
-    </section>
-    <section class="mt-4" v-if="!canSearchEvents && !canSearchGroups">
-      <!-- <o-loading v-model:active="$apollo.loading"></o-loading> -->
-      <h2>{{ $t("Featured events") }}</h2>
-      <div v-if="events && events.elements.length > 0">
-        <multi-card class="my-4" :events="events?.elements" />
-        <div
-          class="pagination"
-          v-if="events && events.total > EVENT_PAGE_LIMIT"
+  <div
+    class="container mx-auto md:py-3 md:px-4 flex flex-col lg:flex-row gap-x-5 gap-y-1"
+  >
+    <aside
+      class="flex-none lg:block lg:sticky top-8 rounded-md px-2 pt-2 w-full lg:w-80 flex-col justify-between mt-2 lg:pb-10 lg:px-8 overflow-y-auto dark:text-slate-100 bg-white dark:bg-mbz-purple"
+    >
+      <o-button
+        @click="toggleFilters"
+        icon-left="filter"
+        class="w-full inline-flex lg:!hidden text-white px-4 py-2 justify-center"
+      >
+        <span v-if="!filtersPanelOpened">{{ t("Hide filters") }}</span>
+        <span v-else>{{ t("Show filters") }}</span>
+      </o-button>
+      <form
+        @submit.prevent="doNewSearch"
+        :class="{ hidden: filtersPanelOpened }"
+        class="lg:block mt-2"
+      >
+        <p class="sr-only">{{ t("Type") }}</p>
+        <ul
+          class="font-medium text-gray-900 dark:text-slate-100 space-y-4 pb-4 border-b border-gray-200 dark:border-gray-500"
         >
+          <li
+            v-for="content in contentTypeMapping"
+            :key="content.contentType"
+            class="flex gap-1"
+          >
+            <Magnify
+              v-if="content.contentType === ContentType.ALL"
+              :size="24"
+            />
+
+            <Calendar
+              v-if="content.contentType === ContentType.EVENTS"
+              :size="24"
+            />
+
+            <AccountMultiple
+              v-if="content.contentType === ContentType.GROUPS"
+              :size="24"
+            />
+
+            <router-link
+              :to="{
+                ...$route,
+                query: { ...$route.query, contentType: content.contentType },
+              }"
+            >
+              {{ content.label }}
+            </router-link>
+          </li>
+        </ul>
+
+        <div
+          class="py-4 border-b border-gray-200 dark:border-gray-500"
+          v-show="contentType !== 'GROUPS'"
+        >
+          <o-switch v-model="isOnline">{{ t("Online events") }}</o-switch>
+        </div>
+
+        <filter-section
+          v-show="contentType !== 'GROUPS'"
+          v-model:opened="searchFilterSectionsOpenStatus.eventDate"
+          :title="t('Event date')"
+        >
+          <template #options>
+            <fieldset class="flex flex-col">
+              <legend class="sr-only">{{ t("Event date") }}</legend>
+              <div
+                v-for="(eventStartDateRangeOption, key) in dateOptions"
+                :key="key"
+              >
+                <input
+                  :id="key"
+                  v-model="when"
+                  type="radio"
+                  name="eventStartDateRange"
+                  :value="key"
+                  class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  :for="key"
+                  class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+                  >{{ eventStartDateRangeOption.label }}</label
+                >
+              </div>
+            </fieldset>
+          </template>
+          <template #preview>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+            >
+              {{
+                Object.entries(dateOptions).find(([key]) => key === when)?.[1]
+                  ?.label
+              }}
+            </span>
+          </template>
+        </filter-section>
+
+        <filter-section
+          v-show="!isOnline"
+          v-model:opened="searchFilterSectionsOpenStatus.eventDistance"
+          :title="t('Distance')"
+        >
+          <template #options>
+            <fieldset class="flex flex-col">
+              <legend class="sr-only">{{ t("Distance") }}</legend>
+              <div
+                v-for="distanceOption in eventDistance"
+                :key="distanceOption.id"
+              >
+                <input
+                  :id="distanceOption.id"
+                  v-model="distance"
+                  type="radio"
+                  name="eventDistance"
+                  :value="distanceOption.id"
+                  class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  :for="distanceOption.id"
+                  class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+                  >{{ distanceOption.label }}</label
+                >
+              </div>
+            </fieldset>
+          </template>
+          <template #preview>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+            >
+              {{ eventDistance.find(({ id }) => id === distance)?.label }}
+            </span>
+          </template>
+        </filter-section>
+
+        <filter-section
+          v-show="contentType !== 'GROUPS'"
+          v-model:opened="searchFilterSectionsOpenStatus.eventCategory"
+          :title="t('Categories')"
+        >
+          <template #options>
+            <fieldset class="flex flex-col">
+              <legend class="sr-only">{{ t("Categories") }}</legend>
+              <div v-for="category in eventCategories" :key="category.id">
+                <input
+                  :id="category.id"
+                  v-model="categoryOneOf"
+                  type="checkbox"
+                  name="category"
+                  :value="category.id"
+                  class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  :for="category.id"
+                  class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+                  >{{ category.label }}</label
+                >
+              </div>
+            </fieldset>
+          </template>
+          <template #preview>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-if="categoryOneOf.length > 2"
+            >
+              {{
+                t("{numberOfCategories} selected", {
+                  numberOfCategories: categoryOneOf.length,
+                })
+              }}
+            </span>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-else-if="categoryOneOf.length > 0"
+            >
+              {{
+                listShortDisjunctionFormatter(
+                  categoryOneOf.map(
+                    (category) =>
+                      (eventCategories ?? []).find(({ id }) => id === category)
+                        ?.label ?? ""
+                  )
+                )
+              }}
+            </span>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-else-if="categoryOneOf.length === 0"
+            >
+              {{ t("Categories", "All") }}
+            </span>
+          </template>
+        </filter-section>
+        <filter-section
+          v-show="contentType !== 'GROUPS'"
+          v-model:opened="searchFilterSectionsOpenStatus.eventStatus"
+          :title="t('Event status')"
+        >
+          <template #options>
+            <fieldset class="flex flex-col">
+              <legend class="sr-only">{{ t("Event status") }}</legend>
+              <div
+                v-for="eventStatusOption in eventStatuses"
+                :key="eventStatusOption.id"
+              >
+                <input
+                  :id="eventStatusOption.id"
+                  v-model="statusOneOf"
+                  type="checkbox"
+                  name="eventStatus"
+                  :value="eventStatusOption.id"
+                  class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  :for="eventStatusOption.id"
+                  class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+                  >{{ eventStatusOption.label }}</label
+                >
+              </div>
+            </fieldset>
+          </template>
+          <template #preview>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-if="statusOneOf.length === Object.values(EventStatus).length"
+            >
+              {{ t("Statuses", "All") }}
+            </span>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-else-if="statusOneOf.length > 0"
+            >
+              {{
+                listShortDisjunctionFormatter(
+                  statusOneOf.map(
+                    (status) =>
+                      eventStatuses.find(({ id }) => id === status)?.label ?? ""
+                  )
+                )
+              }}
+            </span>
+          </template>
+        </filter-section>
+
+        <filter-section
+          v-model:opened="searchFilterSectionsOpenStatus.eventLanguage"
+          :title="t('Languages')"
+        >
+          <template #options>
+            <fieldset class="flex flex-col">
+              <legend class="sr-only">{{ t("Languages") }}</legend>
+              <div v-for="(language, key) in langs" :key="key">
+                <input
+                  :id="key"
+                  type="checkbox"
+                  name="eventStartDateRange"
+                  :value="key"
+                  v-model="languageOneOf"
+                  class="w-4 h-4 border-gray-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:bg-blue-600 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label
+                  :for="key"
+                  class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+                  >{{ language }}</label
+                >
+              </div>
+            </fieldset>
+          </template>
+          <template #preview>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-if="languageOneOf.length > 2"
+            >
+              {{
+                t("{numberOfLanguages} selected", {
+                  numberOfLanguages: languageOneOf.length,
+                })
+              }}
+            </span>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-else-if="languageOneOf.length > 0"
+            >
+              {{
+                listShortDisjunctionFormatter(
+                  languageOneOf.map((lang) => langs[lang])
+                )
+              }}
+            </span>
+            <span
+              class="bg-blue-100 text-blue-800 text-sm font-semibold p-0.5 rounded dark:bg-blue-200 dark:text-blue-800 grow-0"
+              v-else-if="languageOneOf.length === 0"
+            >
+              {{ t("Languages", "All") }}
+            </span>
+          </template>
+        </filter-section>
+
+        <!--
+
+            <div class="">
+              <label v-translate class="font-bold" for="host">Mobilizon instance</label>
+
+              <input
+                id="host"
+                v-model="formHost"
+                type="text"
+                name="host"
+                placeholder="mobilizon.fr"
+                class="dark:text-black md:max-w-fit w-full"
+              />
+            </div>
+
+            <div class="">
+              <label v-translate class="inline font-bold" for="tagsAllOf">All of these tags</label>
+              <button
+                v-if="formTagsAllOf.length !== 0"
+                v-translate
+                class="text-sm ml-2"
+                @click="resetField('tagsAllOf')"
+              >
+                Reset
+              </button>
+
+              <vue-tags-input
+                v-model="formTagAllOf"
+                :placeholder="tagsPlaceholder"
+                :tags="formTagsAllOf"
+                @tags-changed="(newTags) => (formTagsAllOf = newTags)"
+              />
+            </div>
+
+            <div>
+              <div>
+                <label v-translate class="inline font-bold" for="tagsOneOf">One of these tags</label>
+                <button
+                  v-if="formTagsOneOf.length !== 0"
+                  v-translate
+                  class="text-sm ml-2"
+                  @click="resetField('tagsOneOf')"
+                >
+                  Reset
+                </button>
+              </div>
+
+              <vue-tags-input
+                v-model="formTagOneOf"
+                :placeholder="tagsPlaceholder"
+                :tags="formTagsOneOf"
+                @tags-changed="(newTags) => (formTagsOneOf = newTags)"
+              />
+            </div>-->
+
+        <div class="sr-only">
+          <button
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            type="submit"
+          >
+            {{ t("Apply filters") }}
+          </button>
+        </div>
+
+        <o-button
+          @click="toggleFilters"
+          icon-left="filter"
+          class="w-full inline-flex lg:!hidden text-white px-4 py-2 justify-center"
+        >
+          {{ t("Hide filters") }}
+        </o-button>
+      </form>
+    </aside>
+    <div class="flex-1 px-2">
+      <o-tabs type="boxed" v-if="contentType == ContentType.ALL">
+        <o-tab-item>
+          <template #header>
+            <Calendar />
+
+            <span>
+              {{ t("Events") }}
+              <b-tag rounded>{{ searchEvents?.total }}</b-tag>
+            </span>
+          </template>
+          <div v-if="searchEvents && searchEvents.total > 0">
+            <multi-card class="my-4" :events="searchEvents?.elements" />
+            <div
+              class="pagination"
+              v-if="searchEvents && searchEvents?.total > EVENT_PAGE_LIMIT"
+            >
+              <o-pagination
+                :total="searchEvents.total"
+                v-model:current="eventPage"
+                :per-page="EVENT_PAGE_LIMIT"
+                :aria-next-label="t('Next page')"
+                :aria-previous-label="t('Previous page')"
+                :aria-page-label="t('Page')"
+                :aria-current-label="t('Current page')"
+              >
+              </o-pagination>
+            </div>
+          </div>
+          <o-notification v-else-if="searchLoading === false" variant="info">
+            <p>{{ t("No events found") }}</p>
+            <p v-if="searchIsUrl && !currentUser?.id">
+              {{
+                t(
+                  "Only registered users may fetch remote events from their URL."
+                )
+              }}
+            </p>
+          </o-notification>
+        </o-tab-item>
+
+        <o-tab-item>
+          <template #header>
+            <AccountMultiple />
+            <span>
+              {{ t("Groups") }} <b-tag rounded>{{ searchGroups?.total }}</b-tag>
+            </span>
+          </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">
+            <multi-group-card class="my-4" :groups="searchGroups?.elements" />
+            <div class="pagination">
+              <o-pagination
+                :total="searchGroups?.total"
+                v-model:current="groupPage"
+                :per-page="GROUP_PAGE_LIMIT"
+                :aria-next-label="t('Next page')"
+                :aria-previous-label="t('Previous page')"
+                :aria-page-label="t('Page')"
+                :aria-current-label="t('Current page')"
+              >
+              </o-pagination>
+            </div>
+          </div>
+          <o-notification v-else-if="searchLoading === false" variant="danger">
+            {{ t("No groups found") }}
+          </o-notification>
+        </o-tab-item>
+      </o-tabs>
+      <div v-else-if="contentType === ContentType.EVENTS">
+        <div v-if="searchEvents && searchEvents.total > 0">
+          <multi-card class="my-4" :events="searchEvents?.elements" />
           <o-pagination
-            :total="events.total"
-            v-model="featuredEventPage"
+            v-show="searchEvents && searchEvents?.total > EVENT_PAGE_LIMIT"
+            :total="searchEvents.total"
+            v-model:current="eventPage"
             :per-page="EVENT_PAGE_LIMIT"
-            :aria-next-label="$t('Next page')"
-            :aria-previous-label="$t('Previous page')"
-            :aria-page-label="$t('Page')"
-            :aria-current-label="$t('Current page')"
+            :aria-next-label="t('Next page')"
+            :aria-previous-label="t('Previous page')"
+            :aria-page-label="t('Page')"
+            :aria-current-label="t('Current page')"
           >
           </o-pagination>
         </div>
-      </div>
-      <o-notification
-        v-else-if="
-          events &&
-          events.elements.length === 0 &&
-          featuredEventsLoading === false
-        "
-        variant="info"
-        >{{ $t("No events found") }}</o-notification
-      >
-    </section>
-    <o-tabs v-else v-model="activeTab" type="is-boxed">
-      <!-- <o-loading v-model:active="searchLoading"></o-loading> -->
-      <o-tab-item :value="SearchTabs.EVENTS">
-        <template #header>
-          <Calendar />
-          <span>
-            {{ $t("Events") }}
-            <b-tag rounded>{{ searchEvents?.total }}</b-tag>
-          </span>
-        </template>
-        <div v-if="searchEvents && searchEvents.total > 0">
-          <multi-card class="my-4" :events="searchEvents?.elements" />
-          <div
-            class="pagination"
-            v-if="searchEvents && searchEvents?.total > EVENT_PAGE_LIMIT"
-          >
-            <o-pagination
-              :total="searchEvents.total"
-              v-model="eventPage"
-              :per-page="EVENT_PAGE_LIMIT"
-              :aria-next-label="$t('Next page')"
-              :aria-previous-label="$t('Previous page')"
-              :aria-page-label="$t('Page')"
-              :aria-current-label="$t('Current page')"
-            >
-            </o-pagination>
-          </div>
-        </div>
-        <o-notification v-else-if="searchLoading === false" variant="primary">
-          <p>{{ $t("No events found") }}</p>
+        <o-notification v-else-if="searchLoading === false" variant="info">
+          <p>{{ t("No events found") }}</p>
           <p v-if="searchIsUrl && !currentUser?.id">
             {{
-              $t(
-                "Only registered users may fetch remote events from their URL."
-              )
+              t("Only registered users may fetch remote events from their URL.")
             }}
           </p>
         </o-notification>
-      </o-tab-item>
-      <o-tab-item v-if="!tag" :value="SearchTabs.GROUPS">
-        <template #header>
-          <AccountMultiple />
-
-          <span>
-            {{ $t("Groups") }} <b-tag rounded>{{ searchGroups?.total }}</b-tag>
-          </span>
-        </template>
-        <o-notification
-          v-if="config && !config.features.groups"
-          variant="danger"
-        >
-          {{ $t("Groups are not enabled on this instance.") }}
+      </div>
+      <div 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>
         <div v-else-if="searchGroups && searchGroups?.total > 0">
           <multi-group-card class="my-4" :groups="searchGroups?.elements" />
-          <div class="pagination">
-            <o-pagination
-              :total="searchGroups?.total"
-              v-model="groupPage"
-              :per-page="GROUP_PAGE_LIMIT"
-              :aria-next-label="$t('Next page')"
-              :aria-previous-label="$t('Previous page')"
-              :aria-page-label="$t('Page')"
-              :aria-current-label="$t('Current page')"
-            >
-            </o-pagination>
-          </div>
+          <o-pagination
+            v-show="searchGroups && searchGroups?.total > GROUP_PAGE_LIMIT"
+            :total="searchGroups?.total"
+            v-model:current="groupPage"
+            :per-page="GROUP_PAGE_LIMIT"
+            :aria-next-label="t('Next page')"
+            :aria-previous-label="t('Previous page')"
+            :aria-page-label="t('Page')"
+            :aria-current-label="t('Current page')"
+          >
+          </o-pagination>
         </div>
         <o-notification v-else-if="searchLoading === false" variant="danger">
-          {{ $t("No groups found") }}
+          {{ t("No groups found") }}
         </o-notification>
-      </o-tab-item>
-    </o-tabs>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import ngeohash, { GeographicPoint } from "ngeohash";
 import {
   endOfToday,
   addDays,
@@ -242,78 +508,86 @@ import {
   startOfMonth,
   eachWeekendOfInterval,
 } from "date-fns";
-import { SearchTabs } from "@/types/enums";
+import { ContentType, EventStatus } from "@/types/enums";
 import MultiCard from "../components/Event/MultiCard.vue";
-import { FETCH_EVENTS } from "../graphql/event";
 import { IEvent } from "../types/event.model";
-import { IAddress, Address } from "../types/address.model";
 import FullAddressAutoComplete from "../components/Event/FullAddressAutoComplete.vue";
 import { SEARCH_EVENTS_AND_GROUPS } from "../graphql/search";
 import { Paginate } from "../types/paginate";
 import { IGroup } from "../types/actor";
 import MultiGroupCard from "../components/Group/MultiGroupCard.vue";
-import { CONFIG } from "../graphql/config";
-import { REVERSE_GEOCODE } from "../graphql/address";
-import debounce from "lodash/debounce";
 import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUser } from "@/types/current-user.model";
 import { useQuery } from "@vue/apollo-composable";
-import { computed, inject, onMounted, ref, reactive } from "vue";
+import { computed, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import {
   floatTransformer,
   integerTransformer,
   useRouteQuery,
+  enumTransformer,
+  booleanTransformer,
+  RouteQueryTransformer,
 } from "vue-use-route-query";
-import { IConfig } from "@/types/config.model";
 import Calendar from "vue-material-design-icons/Calendar.vue";
 import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
+import Magnify from "vue-material-design-icons/Magnify.vue";
+
 import { useHead } from "@vueuse/head";
 import type { Locale } from "date-fns";
+import FilterSection from "@/components/Search/filters/FilterSection.vue";
+import { listShortDisjunctionFormatter } from "@/utils/listFormat";
+import langs from "@/i18n/langs.json";
+import { useEventCategories, useFeatures } from "@/composition/apollo/config";
 
 const search = useRouteQuery("search", "");
 
 interface ISearchTimeOption {
   label: string;
-  start?: Date | null;
-  end?: Date | null;
+  start?: string | null;
+  end?: string | null;
 }
 
-const featuredEventPage = useRouteQuery(
-  "featuredEventPage",
-  1,
-  integerTransformer
-);
+const arrayTransformer: RouteQueryTransformer<string[]> = {
+  fromQuery(query: string) {
+    return query.split(",");
+  },
+  toQuery(value: string[]) {
+    return value.join(",");
+  },
+};
+
 const eventPage = useRouteQuery("eventPage", 1, integerTransformer);
 const groupPage = useRouteQuery("groupPage", 1, integerTransformer);
-const activeTab = useRouteQuery(
-  "searchType",
-  SearchTabs.EVENTS,
-  integerTransformer
-);
+
 const geohash = useRouteQuery("geohash", "");
 const radius = useRouteQuery("radius", null, floatTransformer);
+const distance = useRouteQuery("distance", "10_km");
 const when = useRouteQuery("when", "any");
-const type = useRouteQuery("type", "");
-const eventCategory = useRouteQuery("eventCategory", "any");
+const contentType = useRouteQuery(
+  "contentType",
+  ContentType.ALL,
+  enumTransformer(ContentType)
+);
+const isOnline = useRouteQuery("isOnline", false, booleanTransformer);
+const categoryOneOf = useRouteQuery("categoryOneOf", [], arrayTransformer);
+const statusOneOf = useRouteQuery(
+  "statusOneOf",
+  [EventStatus.CONFIRMED],
+  arrayTransformer
+);
+const languageOneOf = useRouteQuery("languageOneOf", [], arrayTransformer);
 
-const EVENT_PAGE_LIMIT = 12;
+const EVENT_PAGE_LIMIT = 16;
 
-const GROUP_PAGE_LIMIT = 12;
-
-// const DEFAULT_RADIUS = 25; // value to set if radius is null but location set
-
-const DEFAULT_ZOOM = 11; // zoom on a city
-
-// const GEOHASH_DEPTH = 9; // put enough accuracy, radius will be used anyway
+const GROUP_PAGE_LIMIT = 16;
 
 const props = defineProps<{
   tag?: string;
 }>();
 
-const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
-
-const config = computed(() => configResult.value?.config);
+const { features } = useFeatures();
+const { eventCategories } = useEventCategories();
 
 const searchEvents = computed(() => searchElementsResult.value?.searchEvents);
 const searchGroups = computed(() => searchElementsResult.value?.searchGroups);
@@ -324,14 +598,12 @@ const { result: currentUserResult } = useQuery<{ currentUser: ICurrentUser }>(
 
 const currentUser = computed(() => currentUserResult.value?.currentUser);
 
-const { t, locale } = useI18n({ useScope: "global" });
+const { t } = useI18n({ useScope: "global" });
 
 useHead({
   title: computed(() => t("Explore events")),
 });
 
-const location = ref<IAddress>(new Address());
-
 const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
 const weekend = computed((): { start: Date; end: Date } => {
@@ -349,44 +621,46 @@ const dateOptions: Record<string, ISearchTimeOption> = {
   past: {
     label: t("In the past") as string,
     start: null,
-    end: new Date(),
+    end: new Date().toISOString(),
   },
   today: {
     label: t("Today") as string,
-    start: new Date(),
-    end: endOfToday(),
+    start: new Date().toISOString(),
+    end: endOfToday().toISOString(),
   },
   tomorrow: {
     label: t("Tomorrow") as string,
-    start: startOfDay(addDays(new Date(), 1)),
-    end: endOfDay(addDays(new Date(), 1)),
+    start: startOfDay(addDays(new Date(), 1)).toISOString(),
+    end: endOfDay(addDays(new Date(), 1)).toISOString(),
   },
   weekend: {
     label: t("This weekend") as string,
-    start: weekend.value.start,
-    end: weekend.value.end,
+    start: weekend.value.start.toISOString(),
+    end: weekend.value.end.toISOString(),
   },
   week: {
     label: t("This week") as string,
-    start: new Date(),
-    end: endOfWeek(new Date(), { locale: dateFnsLocale }),
+    start: new Date().toISOString(),
+    end: endOfWeek(new Date(), { locale: dateFnsLocale }).toISOString(),
   },
   next_week: {
     label: t("Next week") as string,
     start: startOfWeek(addWeeks(new Date(), 1), {
       locale: dateFnsLocale,
-    }),
-    end: endOfWeek(addWeeks(new Date(), 1), { locale: dateFnsLocale }),
+    }).toISOString(),
+    end: endOfWeek(addWeeks(new Date(), 1), {
+      locale: dateFnsLocale,
+    }).toISOString(),
   },
   month: {
     label: t("This month") as string,
-    start: new Date(),
-    end: endOfMonth(new Date()),
+    start: new Date().toISOString(),
+    end: endOfMonth(new Date()).toISOString(),
   },
   next_month: {
     label: t("Next month") as string,
-    start: startOfMonth(addMonths(new Date(), 1)),
-    end: endOfMonth(addMonths(new Date(), 1)),
+    start: startOfMonth(addMonths(new Date(), 1)).toISOString(),
+    end: endOfMonth(addMonths(new Date(), 1)).toISOString(),
   },
   any: {
     label: t("Any day") as string,
@@ -395,119 +669,20 @@ const dateOptions: Record<string, ISearchTimeOption> = {
   },
 };
 
-// $refs!: {
-//   aac: FullAddressAutoComplete;
-//   autocompleteSearchInput: any;
-// };
-
-onMounted(() => {
-  prepareLocation(geohash.value);
-});
-
-const radiusString = (radiusValue: number | null): string => {
-  if (radiusValue) {
-    return t("{nb} km", { nb: radiusValue }, radiusValue) as string;
-  }
-  return t("any distance") as string;
-};
-
-const radiusOptions: (number | null)[] = [1, 5, 10, 25, 50, 100, 150, null];
-
-const submit = (): void => {
-  refetchSearchElements();
-};
-
-const updateSearchQuery = (searchQuery: string): void => {
-  search.value = searchQuery;
-};
-
-const debouncedUpdateSearchQuery = debounce(updateSearchQuery, 500);
-
-const prepareLocation = (value: string | undefined): void => {
-  if (value !== undefined) {
-    // decode
-    const latlon = ngeohash.decode(value);
-    // set location
-    reverseGeoCode(latlon, DEFAULT_ZOOM);
-  }
-};
-
-// const { onResult: onReverseGeocodeResult, load: loadReverseGeocode } =
-//   useReverseGeocode();
-
-const reverseGeoCode = async (
-  e: GeographicPoint,
-  zoom: number
-): Promise<void> => {
-  const { result: reverseGeocodeResult } = useQuery<{
-    reverseGeocode: IAddress[];
-  }>(REVERSE_GEOCODE, () => ({
-    latitude: e.latitude,
-    longitude: e.longitude,
-    zoom,
-    locale: locale.value,
-  }));
-
-  const addressData = computed(
-    () => reverseGeocodeResult.value?.reverseGeocode
-  );
-  if (addressData.value && addressData.value.length > 0) {
-    location.value = addressData.value[0];
-  }
-};
-
-// const locchange = (e: IAddress): void => {
-//   if (radius.value === undefined || radius.value === null) {
-//     radius.value = DEFAULT_RADIUS;
-//   }
-//   if (e?.geom) {
-//     const [lon, lat] = e.geom.split(";");
-//     geohash.value = ngeohash.encode(lat, lon, GEOHASH_DEPTH);
-//   } else {
-//     geohash.value = "";
-//   }
-// };
-
-const start = computed((): Date | undefined | null => {
+const start = computed((): string | undefined | null => {
   if (dateOptions[when.value]) {
     return dateOptions[when.value].start;
   }
   return undefined;
 });
 
-const end = computed((): Date | undefined | null => {
+const end = computed((): string | undefined | null => {
   if (dateOptions[when.value]) {
     return dateOptions[when.value].end;
   }
   return undefined;
 });
 
-const canSearchGroups = computed((): boolean => {
-  return (
-    stringExists(search.value) ||
-    (stringExists(geohash.value) && valueExists(radius.value))
-  );
-});
-
-const canSearchEvents = computed((): boolean => {
-  return (
-    stringExists(search.value) ||
-    stringExists(props.tag) ||
-    stringExists(type.value) ||
-    (stringExists(geohash.value) && valueExists(radius.value)) ||
-    valueExists(end.value)
-  );
-});
-
-// helper functions for skip
-const valueExists = (value: any): boolean => {
-  return value !== undefined && value !== null;
-};
-
-const stringExists = (value: string | null | undefined): boolean => {
-  return valueExists(value) && (value as string).length > 0;
-};
-
 const searchIsUrl = computed((): boolean => {
   let url;
   if (!search.value) return false;
@@ -520,35 +695,137 @@ const searchIsUrl = computed((): boolean => {
   return url.protocol === "http:" || url.protocol === "https:";
 });
 
-const { result: eventResult, loading: featuredEventsLoading } = useQuery<{
-  events: Paginate<IEvent>;
-}>(FETCH_EVENTS, () => ({
-  page: featuredEventPage.value,
-  limit: EVENT_PAGE_LIMIT,
-}));
-
-const events = computed(() => eventResult.value?.events);
-
-const searchVariables = reactive({
-  term: search,
-  tags: props.tag,
-  location: geohash,
-  beginsOn: start,
-  endsOn: end,
-  radius: radius,
-  eventPage: eventPage,
-  groupPage: groupPage,
-  limit: EVENT_PAGE_LIMIT,
-  type: type.value === "" ? undefined : type,
-  category: eventCategory,
+const contentTypeMapping = computed(() => {
+  return [
+    {
+      contentType: "ALL",
+      label: t("Everything"),
+    },
+    {
+      contentType: "EVENTS",
+      label: t("Events"),
+    },
+    {
+      contentType: "GROUPS",
+      label: t("Groups"),
+    },
+  ];
 });
 
-const {
-  result: searchElementsResult,
-  refetch: refetchSearchElements,
-  loading: searchLoading,
-} = useQuery<{
+const eventDistance = computed(() => {
+  return [
+    {
+      id: "anywhere",
+      label: t("Any distance"),
+    },
+    {
+      id: "5_km",
+      label: t(
+        "{number} kilometers",
+        {
+          number: 5,
+        },
+        5
+      ),
+    },
+    {
+      id: "10_km",
+      label: t(
+        "{number} kilometers",
+        {
+          number: 10,
+        },
+        10
+      ),
+    },
+    {
+      id: "25_km",
+      label: t(
+        "{number} kilometers",
+        {
+          number: 25,
+        },
+        25
+      ),
+    },
+    {
+      id: "50_km",
+      label: t(
+        "{number} kilometers",
+        {
+          number: 50,
+        },
+        50
+      ),
+    },
+    {
+      id: "100_km",
+      label: t(
+        "{number} kilometers",
+        {
+          number: 100,
+        },
+        100
+      ),
+    },
+    {
+      id: "150_km",
+      label: t(
+        "{number} kilometers",
+        {
+          number: 150,
+        },
+        150
+      ),
+    },
+  ];
+});
+
+const eventStatuses = computed(() => {
+  return [
+    {
+      id: EventStatus.CONFIRMED,
+      label: t("Confirmed"),
+    },
+    {
+      id: EventStatus.TENTATIVE,
+      label: t("Tentative"),
+    },
+    {
+      id: EventStatus.CANCELLED,
+      label: t("Cancelled"),
+    },
+  ];
+});
+
+const searchFilterSectionsOpenStatus = ref({
+  eventDate: true,
+  eventLanguage: false,
+  eventCategory: false,
+  eventStatus: false,
+  eventDistance: false,
+});
+
+const filtersPanelOpened = ref(true);
+
+const toggleFilters = () =>
+  (filtersPanelOpened.value = !filtersPanelOpened.value);
+
+const { result: searchElementsResult, loading: searchLoading } = useQuery<{
   searchEvents: Paginate<IEvent>;
   searchGroups: Paginate<IGroup>;
-}>(SEARCH_EVENTS_AND_GROUPS, searchVariables);
+}>(SEARCH_EVENTS_AND_GROUPS, () => ({
+  term: search.value,
+  tags: props.tag,
+  location: geohash.value,
+  beginsOn: start.value,
+  endsOn: end.value,
+  radius: radius.value,
+  eventPage: eventPage.value,
+  groupPage: groupPage.value,
+  limit: EVENT_PAGE_LIMIT,
+  type: isOnline.value ? "ONLINE" : "IN_PERSON",
+  categoryOneOf: categoryOneOf.value,
+  statusOneOf: statusOneOf.value,
+}));
 </script>
diff --git a/js/tailwind.config.js b/js/tailwind.config.js
index 29b35fc39..a4e82cfe0 100644
--- a/js/tailwind.config.js
+++ b/js/tailwind.config.js
@@ -12,7 +12,6 @@ module.exports = {
         "mbz-yellow": "#ffd599",
         "mbz-purple": "#424056",
         "mbz-bluegreen": "#1e7d97",
-        "mbz-yellow-2": "rgb(var(--color-mbz-yellow-2) / <alpha-value>)",
         "violet-1": "#3a384c",
         "violet-2": "#474467",
         "violet-3": "#3c376e",
diff --git a/lib/graphql/resolvers/config.ex b/lib/graphql/resolvers/config.ex
index 53ada9eae..5c5555d56 100644
--- a/lib/graphql/resolvers/config.ex
+++ b/lib/graphql/resolvers/config.ex
@@ -12,7 +12,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
   """
   @spec get_config(any(), map(), Absinthe.Resolution.t()) :: {:ok, map()}
   def get_config(_parent, _params, %{context: %{ip: ip}}) do
-    # ip = "2a01:e0a:184:2000:1112:e19d:9779:88c8"
+    ip = "2a01:e0a:184:2000:1112:e19d:9779:88c8"
     geolix = Geolix.lookup(ip)
 
     country_code =
diff --git a/lib/graphql/schema/search.ex b/lib/graphql/schema/search.ex
index 2da1d8fa4..90d043c9a 100644
--- a/lib/graphql/schema/search.ex
+++ b/lib/graphql/schema/search.ex
@@ -95,6 +95,14 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
       arg(:type, :event_type, description: "Whether the event is online or in person")
       arg(:category, :string, description: "The category for the event")
 
+      arg(:category_one_of, list_of(:string),
+        description: "The list of categories the event can be in"
+      )
+
+      arg(:status_one_of, list_of(:event_status),
+        description: "The list of statuses this event can have"
+      )
+
       arg(:radius, :float,
         default_value: 50,
         description: "Radius around the location to search in"
diff --git a/lib/mobilizon/events/events.ex b/lib/mobilizon/events/events.ex
index 66ece7730..10babc16b 100644
--- a/lib/mobilizon/events/events.ex
+++ b/lib/mobilizon/events/events.ex
@@ -530,6 +530,8 @@ defmodule Mobilizon.Events do
     |> events_for_begins_on(args)
     |> events_for_ends_on(args)
     |> events_for_category(args)
+    |> events_for_categories(args)
+    |> events_for_statuses(args)
     |> events_for_tags(args)
     |> events_for_location(args)
     |> filter_online(args)
@@ -1320,6 +1322,19 @@ defmodule Mobilizon.Events do
 
   defp events_for_category(query, _args), do: query
 
+  @spec events_for_categories(Ecto.Queryable.t(), map()) :: Ecto.Query.t()
+  defp events_for_categories(query, %{category_one_of: category_one_of}) when length(category_one_of) > 0 do
+    where(query, [q], q.category in ^category_one_of)
+  end
+
+  defp events_for_categories(query, _args), do: query
+
+  defp events_for_statuses(query, %{status_one_of: status_one_of}) when length(status_one_of) > 0 do
+    where(query, [q], q.status in ^status_one_of)
+  end
+
+  defp events_for_statuses(query, _args), do: query
+
   @spec events_for_tags(Ecto.Queryable.t(), map()) :: Ecto.Query.t()
   defp events_for_tags(query, %{tags: tags}) when is_valid_string(tags) do
     query