diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 66a805a23..739e569f5 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -127,14 +127,14 @@ exunit:
         - test-junit-report.xml
     expire_in: 30 days
 
-jest:
+vitest:
   stage: test
   needs:
     - lint-front
   before_script:
     - yarn --cwd "js" install --frozen-lockfile
   script:
-    - yarn --cwd "js" run test:unit --no-color --ci --reporters=default --reporters=jest-junit
+    - yarn --cwd "js" run coverage --reporter=default --reporter=junit --outputFile.junit=./junit.xml
   artifacts:
     when: always
     paths:
diff --git a/.tool-versions b/.tool-versions
index 3162337da..73654c14d 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1,2 +1,2 @@
-elixir 1.13.4-otp-24
-erlang 24.3.3
+elixir 1.14.0-otp-25
+erlang 25.0.4
diff --git a/config/config.exs b/config/config.exs
index f5dc26cb5..1ebf3e65a 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -54,7 +54,7 @@ config :mobilizon, Mobilizon.Web.Endpoint,
   secret_key_base: "1yOazsoE0Wqu4kXk3uC5gu3jDbShOimTCzyFL3OjCdBmOXMyHX87Qmf3+Tu9s0iM",
   render_errors: [view: Mobilizon.Web.ErrorView, accepts: ~w(html json)],
   pubsub_server: Mobilizon.PubSub,
-  cache_static_manifest: "priv/static/manifest.json",
+  cache_static_manifest: "priv/static/cache_manifest.json",
   has_reverse_proxy: true
 
 config :mime, :types, %{
@@ -123,6 +123,18 @@ config :mobilizon, Mobilizon.Web.Email.Mailer,
   # can be `true`
   no_mx_lookups: false
 
+config :vite_phx,
+  release_app: :mobilizon,
+  # to tell prod and dev env appart
+  environment: config_env(),
+  # this manifest is different from the Phoenix "cache_manifest.json"!
+  # optional
+  vite_manifest: "priv/static/manifest.json",
+  # optional
+  phx_manifest: "priv/static/cache_manifest.json",
+  # optional
+  dev_server_address: "http://localhost:5173"
+
 # Configures Elixir's Logger
 config :logger, :console,
   backends: [:console],
@@ -347,6 +359,23 @@ config :mobilizon, :exports,
 
 config :mobilizon, :analytics, providers: []
 
+config :mobilizon, Mobilizon.Service.Pictures, service: Mobilizon.Service.Pictures.Unsplash
+
+config :mobilizon, Mobilizon.Service.Pictures.Unsplash,
+  app_name: "Mobilizon",
+  access_key: nil
+
+config :mobilizon, :search, global: [is_default_search: false, is_enabled: true]
+
+config :mobilizon, Mobilizon.Service.GlobalSearch,
+  service: Mobilizon.Service.GlobalSearch.SearchMobilizon
+
+config :mobilizon, Mobilizon.Service.GlobalSearch.SearchMobilizon,
+  endpoint: "https://search.joinmobilizon.org",
+  csp_policy: [
+    img_src: "search.joinmobilizon.org"
+  ]
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{config_env()}.exs"
diff --git a/config/dev.exs b/config/dev.exs
index 9a37eef89..77c55e544 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -15,13 +15,7 @@ config :mobilizon, Mobilizon.Web.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "node_modules/webpack/bin/webpack.js",
-      "--mode",
-      "development",
-      "--watch",
-      "--watch-options-stdin",
-      "--config",
-      "node_modules/@vue/cli-service/webpack.config.js",
+      "node_modules/.bin/vite",
       cd: Path.expand("../js", __DIR__)
     ]
   ]
@@ -102,3 +96,5 @@ config :mobilizon, :anonymous,
   reports: [
     allowed: true
   ]
+
+config :unplug, :init_mode, :runtime
diff --git a/docker/tests/Dockerfile b/docker/tests/Dockerfile
index 4c87c709b..6342d6847 100644
--- a/docker/tests/Dockerfile
+++ b/docker/tests/Dockerfile
@@ -1,7 +1,7 @@
 FROM elixir:latest
 LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"
 
-ENV REFRESHED_AT=2022-04-06
+ENV REFRESHED_AT=2022-09-20
 RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 cmake exiftool python3-pip python3-setuptools
 RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq
 RUN npm install -g yarn wait-on
diff --git a/js/.eslintrc.js b/js/.eslintrc.js
index 10dcd95e4..101b36075 100644
--- a/js/.eslintrc.js
+++ b/js/.eslintrc.js
@@ -1,3 +1,6 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
 module.exports = {
   root: true,
 
@@ -6,10 +9,11 @@ module.exports = {
   },
 
   extends: [
-    "plugin:vue/essential",
     "eslint:recommended",
-    "@vue/typescript/recommended",
+    "plugin:vue/vue3-essential",
+    "@vue/eslint-config-typescript/recommended",
     "plugin:prettier/recommended",
+    "@vue/eslint-config-prettier",
   ],
 
   plugins: ["prettier"],
@@ -20,12 +24,11 @@ module.exports = {
   },
 
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-underscore-dangle": [
       "error",
       {
-        allow: ["__typename"],
+        allow: ["__typename", "__schema"],
       },
     ],
     "@typescript-eslint/no-explicit-any": "off",
@@ -50,4 +53,7 @@ module.exports = {
   },
 
   ignorePatterns: ["src/typings/*.d.ts", "vue.config.js"],
+  globals: {
+    GeolocationPositionError: true,
+  },
 };
diff --git a/js/.gitignore b/js/.gitignore
index b3a5de1e2..5c5176c48 100644
--- a/js/.gitignore
+++ b/js/.gitignore
@@ -5,6 +5,7 @@ node_modules
 /tests/e2e/videos/
 /tests/e2e/screenshots/
 /coverage
+stats.html
 
 # local env files
 .env.local
@@ -23,3 +24,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/js/babel.config.js b/js/babel.config.js
deleted file mode 100644
index 162a3ea97..000000000
--- a/js/babel.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
diff --git a/js/env.d.ts b/js/env.d.ts
new file mode 100644
index 000000000..f284c30a9
--- /dev/null
+++ b/js/env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="histoire/vue" />
+
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SERVER_URL: string;
+  readonly VITE_HISTOIRE_ENV: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/js/get_union_json.ts b/js/get_union_json.ts
index 287cc9982..9a36881d1 100644
--- a/js/get_union_json.ts
+++ b/js/get_union_json.ts
@@ -1,5 +1,5 @@
-const fetch = require("node-fetch");
-const fs = require("fs");
+import fetch from "node-fetch";
+import fs from "fs";
 
 fetch(`http://localhost:4000/api`, {
   method: "POST",
diff --git a/js/histoire.config.ts b/js/histoire.config.ts
new file mode 100644
index 000000000..349d77575
--- /dev/null
+++ b/js/histoire.config.ts
@@ -0,0 +1,51 @@
+/// <reference types="@histoire/plugin-vue/components" />
+
+import { defineConfig } from "histoire";
+import { HstVue } from "@histoire/plugin-vue";
+import path from "path";
+
+export default defineConfig({
+  plugins: [HstVue()],
+  setupFile: path.resolve(__dirname, "./src/histoire.setup.ts"),
+  viteNodeInlineDeps: [/date-fns/],
+  tree: {
+    groups: [
+      {
+        title: "Actors",
+        include: (file) => /^src\/components\/Account/.test(file.path),
+      },
+      {
+        title: "Address",
+        include: (file) => /^src\/components\/Address/.test(file.path),
+      },
+      {
+        title: "Comments",
+        include: (file) => /^src\/components\/Comment/.test(file.path),
+      },
+      {
+        title: "Discussion",
+        include: (file) => /^src\/components\/Discussion/.test(file.path),
+      },
+      {
+        title: "Events",
+        include: (file) => /^src\/components\/Event/.test(file.path),
+      },
+      {
+        title: "Groups",
+        include: (file) => /^src\/components\/Group/.test(file.path),
+      },
+      {
+        title: "Home",
+        include: (file) => /^src\/components\/Home/.test(file.path),
+      },
+      {
+        title: "Posts",
+        include: (file) => /^src\/components\/Post/.test(file.path),
+      },
+      {
+        title: "Others",
+        include: () => true,
+      },
+    ],
+  },
+});
diff --git a/js/jest.config.js b/js/jest.config.js
deleted file mode 100644
index a87688fe7..000000000
--- a/js/jest.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
-  collectCoverage: true,
-  collectCoverageFrom: [
-    "**/*.{vue,ts}",
-    "!**/node_modules/**",
-    "!get_union_json.ts",
-  ],
-  coverageReporters: ["html", "text", "text-summary"],
-  reporters: ["default", "jest-junit"],
-  // The following should fix the issue with svgs and ?inline loader (see Logo.vue), but doesn't work
-  //
-  // transform: {
-  //   "^.+\\.svg$": "<rootDir>/tests/unit/svgTransform.js",
-  // },
-  // moduleNameMapper: {
-  //   "^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1",
-  //   "^@/(.*)$": "<rootDir>/src/$1",
-  // },
-};
diff --git a/js/package.json b/js/package.json
index 79073992b..4287e202f 100644
--- a/js/package.json
+++ b/js/package.json
@@ -3,19 +3,25 @@
   "version": "2.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
+    "preview": "vite preview",
     "build": "yarn run build:assets && yarn run build:pictures",
-    "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 TZ=UTC vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint",
-    "build:assets": "vue-cli-service build --report",
-    "build:pictures": "bash ./scripts/build/pictures.sh"
+    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
+    "format": "prettier .  --write",
+    "build:assets": "vite build",
+    "build:pictures": "bash ./scripts/build/pictures.sh",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@absinthe/socket": "^0.2.1",
     "@absinthe/socket-apollo-link": "^0.2.1",
     "@apollo/client": "^3.3.16",
-    "@mdi/font": "^6.1.95",
+    "@headlessui/vue": "^1.6.7",
+    "@oruga-ui/oruga-next": "^0.5.5",
     "@sentry/tracing": "^7.1",
     "@sentry/vue": "^7.1",
     "@tailwindcss/line-clamp": "^0.4.0",
@@ -39,24 +45,32 @@
     "@tiptap/extension-strike": "^2.0.0-beta.26",
     "@tiptap/extension-text": "^2.0.0-beta.15",
     "@tiptap/extension-underline": "^2.0.0-beta.7",
-    "@tiptap/vue-2": "^2.0.0-beta.21",
+    "@tiptap/suggestion": "^2.0.0-beta.195",
+    "@tiptap/vue-3": "^2.0.0-beta.96",
     "@vue-a11y/announcer": "^2.1.0",
     "@vue-a11y/skip-to": "^2.1.2",
-    "@vue/apollo-option": "4.0.0-alpha.11",
+    "@vue-leaflet/vue-leaflet": "^0.6.1",
+    "@vue/apollo-composable": "^4.0.0-alpha.17",
+    "@vue/compiler-sfc": "^3.2.37",
+    "@vueuse/core": "^9.1.0",
+    "@vueuse/head": "^0.7.9",
+    "@vueuse/router": "^9.0.2",
     "apollo-absinthe-upload-link": "^1.5.0",
     "autoprefixer": "^10",
-    "blurhash": "^1.1.3",
-    "buefy": "^0.9.0",
+    "blurhash": "^2.0.0",
+    "bulma": "^0.9.4",
     "bulma-divider": "^0.2.0",
-    "core-js": "^3.6.4",
     "date-fns": "^2.16.0",
     "date-fns-tz": "^1.1.6",
-    "graphql": "^16.0.0",
+    "floating-vue": "^2.0.0-beta.17",
+    "graphql": "^15.8.0",
     "graphql-tag": "^2.10.3",
+    "hammerjs": "^2.0.8",
     "intersection-observer": "^0.12.0",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.4.0",
     "leaflet.locatecontrol": "^0.76.0",
+    "leaflet.markercluster": "^1.5.3",
     "lodash": "^4.17.11",
     "ngeohash": "^0.6.3",
     "p-debounce": "^4.0.0",
@@ -67,24 +81,28 @@
     "tailwindcss": "^3",
     "tippy.js": "^6.2.3",
     "unfetch": "^4.2.0",
-    "v-tooltip": "^2.1.3",
-    "vue": "^2.6.11",
-    "vue-class-component": "^7.2.3",
-    "vue-i18n": "^8.14.0",
+    "vue": "^3.2.37",
+    "vue-i18n": "9",
+    "vue-material-design-icons": "^5.1.2",
     "vue-matomo": "^4.1.0",
     "vue-meta": "^2.3.1",
     "vue-plausible": "^1.3.1",
-    "vue-property-decorator": "^9.0.0",
-    "vue-router": "^3.1.6",
+    "vue-router": "4",
     "vue-scrollto": "^2.17.1",
-    "vue2-leaflet": "^2.0.3",
-    "vuedraggable": "^2.24.3"
+    "vue-use-route-query": "^1.1.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/jest": "^28.0.0",
+    "@histoire/plugin-vue": "^0.10.0",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.0",
+    "@playwright/test": "^1.25.1",
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.4",
+    "@types/hammerjs": "^2.0.41",
     "@types/leaflet": "^1.5.2",
     "@types/leaflet.locatecontrol": "^0.74",
+    "@types/leaflet.markercluster": "^1.5.1",
     "@types/lodash": "^4.14.141",
     "@types/ngeohash": "^0.6.2",
     "@types/phoenix": "^1.5.2",
@@ -93,37 +111,29 @@
     "@types/prosemirror-state": "^1.2.4",
     "@types/prosemirror-view": "^1.11.4",
     "@types/sanitize-html": "^2.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
-    "@vue/cli-plugin-babel": "~5.0.6",
-    "@vue/cli-plugin-eslint": "~5.0.6",
-    "@vue/cli-plugin-pwa": "~5.0.6",
-    "@vue/cli-plugin-router": "~5.0.6",
-    "@vue/cli-plugin-typescript": "~5.0.6",
-    "@vue/cli-plugin-unit-jest": "~5.0.6",
-    "@vue/cli-service": "~5.0.6",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitest/coverage-c8": "^0.23.4",
+    "@vitest/ui": "^0.23.4",
+    "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^1.1.0",
-    "@vue/vue2-jest": "^28.0.0",
-    "babel-jest": "^28.1.1",
-    "eslint": "^8.2.0",
+    "@vue/test-utils": "^2.0.2",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^9.1.1",
+    "eslint-plugin-vue": "^9.3.0",
     "flush-promises": "^1.0.2",
-    "jest": "^28.1.1",
-    "jest-junit": "^13.0.0",
+    "histoire": "^0.10.4",
+    "jsdom": "^20.0.0",
     "mock-apollo-client": "^1.1.0",
     "prettier": "^2.2.1",
     "prettier-eslint": "^15.0.1",
+    "rollup-plugin-visualizer": "^5.7.1",
     "sass": "^1.34.1",
-    "sass-loader": "^13.0.0",
-    "ts-jest": "28",
-    "typescript": "~4.5.5",
-    "vue-cli-plugin-tailwind": "~3.0.0",
-    "vue-i18n-extract": "^2.0.4",
-    "vue-template-compiler": "^2.6.11",
-    "webpack-cli": "^4.7.0"
+    "typescript": "~4.8.3",
+    "vite": "^3.0.9",
+    "vite-plugin-pwa": "^0.13.0",
+    "vitest": "^0.23.3",
+    "vue-i18n-extract": "^2.0.4"
   }
 }
diff --git a/js/playwright.config.ts b/js/playwright.config.ts
new file mode 100644
index 000000000..c3da6c26e
--- /dev/null
+++ b/js/playwright.config.ts
@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./tests/e2e",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:4005",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;
diff --git a/js/public/img/categories/arts-small.webp b/js/public/img/categories/arts-small.webp
new file mode 100644
index 000000000..2d5f4b411
Binary files /dev/null and b/js/public/img/categories/arts-small.webp differ
diff --git a/js/public/img/categories/arts.webp b/js/public/img/categories/arts.webp
new file mode 100644
index 000000000..a9fab2781
Binary files /dev/null and b/js/public/img/categories/arts.webp differ
diff --git a/js/public/img/categories/business-small.webp b/js/public/img/categories/business-small.webp
new file mode 100644
index 000000000..967246ba0
Binary files /dev/null and b/js/public/img/categories/business-small.webp differ
diff --git a/js/public/img/categories/business.webp b/js/public/img/categories/business.webp
new file mode 100644
index 000000000..06d4d2c9d
Binary files /dev/null and b/js/public/img/categories/business.webp differ
diff --git a/js/public/img/categories/crafts-small.webp b/js/public/img/categories/crafts-small.webp
new file mode 100644
index 000000000..97c743d60
Binary files /dev/null and b/js/public/img/categories/crafts-small.webp differ
diff --git a/js/public/img/categories/crafts.webp b/js/public/img/categories/crafts.webp
new file mode 100644
index 000000000..6dbe7a670
Binary files /dev/null and b/js/public/img/categories/crafts.webp differ
diff --git a/js/public/img/categories/film_media-small.webp b/js/public/img/categories/film_media-small.webp
new file mode 100644
index 000000000..deafb6b03
Binary files /dev/null and b/js/public/img/categories/film_media-small.webp differ
diff --git a/js/public/img/categories/film_media.webp b/js/public/img/categories/film_media.webp
new file mode 100644
index 000000000..c50ef4338
Binary files /dev/null and b/js/public/img/categories/film_media.webp differ
diff --git a/js/public/img/categories/food_drink-small.webp b/js/public/img/categories/food_drink-small.webp
new file mode 100644
index 000000000..71d984907
Binary files /dev/null and b/js/public/img/categories/food_drink-small.webp differ
diff --git a/js/public/img/categories/food_drink.webp b/js/public/img/categories/food_drink.webp
new file mode 100644
index 000000000..0225ca512
Binary files /dev/null and b/js/public/img/categories/food_drink.webp differ
diff --git a/js/public/img/categories/games-small.webp b/js/public/img/categories/games-small.webp
new file mode 100644
index 000000000..8095816a1
Binary files /dev/null and b/js/public/img/categories/games-small.webp differ
diff --git a/js/public/img/categories/games.webp b/js/public/img/categories/games.webp
new file mode 100644
index 000000000..56a069448
Binary files /dev/null and b/js/public/img/categories/games.webp differ
diff --git a/js/public/img/categories/health-small.webp b/js/public/img/categories/health-small.webp
new file mode 100644
index 000000000..1514b3ee3
Binary files /dev/null and b/js/public/img/categories/health-small.webp differ
diff --git a/js/public/img/categories/health.webp b/js/public/img/categories/health.webp
new file mode 100644
index 000000000..fcec8cea3
Binary files /dev/null and b/js/public/img/categories/health.webp differ
diff --git a/js/public/img/categories/lgbtq-small.webp b/js/public/img/categories/lgbtq-small.webp
new file mode 100644
index 000000000..d3f70c9b3
Binary files /dev/null and b/js/public/img/categories/lgbtq-small.webp differ
diff --git a/js/public/img/categories/lgbtq.webp b/js/public/img/categories/lgbtq.webp
new file mode 100644
index 000000000..72b460152
Binary files /dev/null and b/js/public/img/categories/lgbtq.webp differ
diff --git a/js/public/img/categories/movements_politics-small.webp b/js/public/img/categories/movements_politics-small.webp
new file mode 100644
index 000000000..e7c47b4cb
Binary files /dev/null and b/js/public/img/categories/movements_politics-small.webp differ
diff --git a/js/public/img/categories/movements_politics.webp b/js/public/img/categories/movements_politics.webp
new file mode 100644
index 000000000..987dbbddf
Binary files /dev/null and b/js/public/img/categories/movements_politics.webp differ
diff --git a/js/public/img/categories/music-small.webp b/js/public/img/categories/music-small.webp
new file mode 100644
index 000000000..856ec7184
Binary files /dev/null and b/js/public/img/categories/music-small.webp differ
diff --git a/js/public/img/categories/music.webp b/js/public/img/categories/music.webp
new file mode 100644
index 000000000..4efa3fef2
Binary files /dev/null and b/js/public/img/categories/music.webp differ
diff --git a/js/public/img/categories/outdoors_adventure-small.webp b/js/public/img/categories/outdoors_adventure-small.webp
new file mode 100644
index 000000000..79a2027c0
Binary files /dev/null and b/js/public/img/categories/outdoors_adventure-small.webp differ
diff --git a/js/public/img/categories/outdoors_adventure.webp b/js/public/img/categories/outdoors_adventure.webp
new file mode 100644
index 000000000..1eac571b7
Binary files /dev/null and b/js/public/img/categories/outdoors_adventure.webp differ
diff --git a/js/public/img/categories/party-small.webp b/js/public/img/categories/party-small.webp
new file mode 100644
index 000000000..a52d1c406
Binary files /dev/null and b/js/public/img/categories/party-small.webp differ
diff --git a/js/public/img/categories/party.webp b/js/public/img/categories/party.webp
new file mode 100644
index 000000000..8e3bc6b3a
Binary files /dev/null and b/js/public/img/categories/party.webp differ
diff --git a/js/public/img/categories/photography-small.webp b/js/public/img/categories/photography-small.webp
new file mode 100644
index 000000000..0ac0863bf
Binary files /dev/null and b/js/public/img/categories/photography-small.webp differ
diff --git a/js/public/img/categories/photography.webp b/js/public/img/categories/photography.webp
new file mode 100644
index 000000000..082401eda
Binary files /dev/null and b/js/public/img/categories/photography.webp differ
diff --git a/js/public/img/categories/spirituality_religion_beliefs-small.webp b/js/public/img/categories/spirituality_religion_beliefs-small.webp
new file mode 100644
index 000000000..bff9c3798
Binary files /dev/null and b/js/public/img/categories/spirituality_religion_beliefs-small.webp differ
diff --git a/js/public/img/categories/spirituality_religion_beliefs.webp b/js/public/img/categories/spirituality_religion_beliefs.webp
new file mode 100644
index 000000000..3022135b8
Binary files /dev/null and b/js/public/img/categories/spirituality_religion_beliefs.webp differ
diff --git a/js/public/img/categories/sports-small.webp b/js/public/img/categories/sports-small.webp
new file mode 100644
index 000000000..0f6367432
Binary files /dev/null and b/js/public/img/categories/sports-small.webp differ
diff --git a/js/public/img/categories/sports.webp b/js/public/img/categories/sports.webp
new file mode 100644
index 000000000..304eff1cf
Binary files /dev/null and b/js/public/img/categories/sports.webp differ
diff --git a/js/public/img/categories/theatre-small.webp b/js/public/img/categories/theatre-small.webp
new file mode 100644
index 000000000..ff0c6575f
Binary files /dev/null and b/js/public/img/categories/theatre-small.webp differ
diff --git a/js/public/img/categories/theatre.webp b/js/public/img/categories/theatre.webp
new file mode 100644
index 000000000..766e608c7
Binary files /dev/null and b/js/public/img/categories/theatre.webp differ
diff --git a/js/public/img/koena-a11y.svg b/js/public/img/koena-a11y.svg
deleted file mode 100644
index 4ef920d2f..000000000
--- a/js/public/img/koena-a11y.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg41" x="0" y="0" viewBox="0 0 182.5 64.8" style="enable-background:new 0 0 182.5 64.8" xml:space="preserve"><style type="text/css" id="style2">.st2{fill:#132c77}</style><g id="g43"><path d="M27.5 53.8h133.2c6.6 0 11.9-5.9 11.9-13.1V21c0-7.3-5.3-13.2-11.9-13.2H27.2" id="path32_1_" style="fill:#fff;stroke:#132c77;stroke-width:3.0359;stroke-miterlimit:10"/><path d="M27.6 25.7h1c.3 0 .6-.1.9-.2l.6-.3c.6-.3 1.1-.6 1.6-1 .4-.3.7-.6 1.1-.9.7-.7 1.4-1.5 2-2.3v-1.1c.1-3.3-1-6.5-3.2-9-2.8 3.4-6.9 5.5-11.3 5.9-.2 1-.3 2.1-.3 3.1 0 2.5.6 5 1.8 7.2.4.6.8 1.2 1.3 1.7.4.4.9.8 1.4 1.1v5.7l-1.2.1c-.7 0-1.3.1-1.8.2 1 1.6 3 4.1 6.2 4.1 2 0 3.9-1 5.1-2.6.4-.4.7-.9.9-1.4-.6-.1-1.3-.2-2.2-.2h-1.2v-5.7c.5-.3.9-.7 1.3-1.1.5-.5.9-1.1 1.3-1.7.2-.3.3-.6.5-.9l-.4.1c-.4.3-.8.6-1.3.8-.4.2-.8.4-1.3.6-.6.2-1.2.4-1.8.4h-1c-.7 0-1.3-.6-1.3-1.3v-.2c.2-.6.7-1.1 1.3-1.1z" id="path12_1_" style="fill:#fff"/><path d="m37.5 34.1-1.4-.4c-1-.2-2-.4-3-.4v-1.5c4.5-1 6.3-3.8 6.3-9.9 0-8.3-4-15.5-6.8-15.5-.4.1-.9.2-1.3.4 0 0-1.4-1-4.9-1-8.3 0-11.1 11.9-11.1 17.5s1.9 7.8 6.5 8.7v1.5c-.8.1-1.6.2-2.4.4-9.4 1.6-12.2 6-12.2 8.6 0 .7 0 2.8 8.9 8.1 3.1 1.8 9 5 11.3 5s8.2-3.1 11.3-5c8.9-5.3 8.9-7.4 8.9-8.1.1-2.6-2.3-6.5-10.1-8.4zM19.9 19.9c0-1.1.1-2.1.3-3.1 4.4-.3 8.6-2.5 11.4-5.9 2.2 2.5 3.4 5.7 3.3 9.1v1.2c-.6.8-1.3 1.6-2 2.3-.3.3-.7.6-1.1.9-.5.4-1 .7-1.6 1l-.6.3-.9.3h-1c-.6 0-1.1.4-1.3 1v.3c0 .7.6 1.3 1.3 1.3h1c.6 0 1.2-.1 1.7-.4.4-.2.9-.4 1.3-.6.4-.3.9-.5 1.3-.8l.5-.4c-.2.3-.3.6-.5.9-.4.6-.8 1.2-1.3 1.7-.4.4-.8.8-1.3 1.1v5.8l1.2.1c.9.1 1.6.1 2.2.2v.1c-.3.5-.6.9-.9 1.4-1.2 1.6-3.1 2.6-5.2 2.7-3.2 0-5.3-2.4-6.3-4.1.5-.1 1.1-.1 1.8-.2l1.2-.1v-6c-.5-.3-.9-.7-1.3-1.1-.5-.5-.9-1.1-1.3-1.7-1.2-2.2-1.9-4.7-1.9-7.3z" class="st2" id="path14_1_"/><circle r="12.5" cy="49.1" cx="45.3" id="circle34_1_" style="fill:#fff;stroke:#132c77;stroke-width:2.58;stroke-miterlimit:10"/><path d="M47.8 42.9c0-1.4-1.1-2.5-2.5-2.5s-2.5 1.1-2.5 2.5 1.1 2.5 2.5 2.5c1.4.1 2.5-1.1 2.5-2.5z" class="st2" id="Shape_1_"/><path d="M39.4 45.9c-.7-.1-1.3.5-1.4 1.2-.1.7.5 1.3 1.2 1.4l3.6.3c.2 0 .4.2.4.4v1c0 .2 0 .4-.1.6L41 56c-.2.7.2 1.4.8 1.6.6.2 1.2-.1 1.5-.6l2-4.8 1.9 4.8c.2.7.9 1 1.6.8.7-.2 1-.9.8-1.6 0-.1-.1-.2-.1-.2l-2-5.2c-.1-.2-.1-.4-.1-.6v-1c0-.2.2-.4.4-.4l3.6-.3c.7-.1 1.2-.7 1.2-1.4-.1-.7-.7-1.2-1.4-1.2l-4.5.4h-3l-4.3-.4z" class="st2" id="Shape-2_1_"/><g aria-label="Contact" transform="translate(62.731 27.6)" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="text13"><path d="M11.163-11.663v1.803q-.863-.804-1.845-1.202-.973-.398-2.073-.398-2.167 0-3.318 1.33-1.151 1.32-1.151 3.825 0 2.496 1.151 3.825 1.151 1.32 3.318 1.32 1.1 0 2.073-.397.982-.398 1.845-1.202v1.786q-.897.61-1.904.914-.999.304-2.116.304-2.869 0-4.52-1.752-1.65-1.76-1.65-4.798 0-3.047 1.65-4.8 1.651-1.76 4.52-1.76 1.134 0 2.133.305 1.007.296 1.887.897z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path17"/><path d="M17.41-8.387q-1.253 0-1.981.981-.728.974-.728 2.675 0 1.701.72 2.683.727.973 1.988.973 1.245 0 1.972-.982.728-.981.728-2.674 0-1.684-.728-2.666-.727-.99-1.972-.99zm0-1.32q2.03 0 3.19 1.32 1.16 1.32 1.16 3.656 0 2.327-1.16 3.656-1.16 1.32-3.19 1.32-2.04 0-3.2-1.32-1.15-1.329-1.15-3.656 0-2.336 1.15-3.656 1.16-1.32 3.2-1.32z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path19"/><path d="M32.22-5.721V0h-1.557v-5.67q0-1.346-.524-2.015-.525-.668-1.575-.668-1.26 0-1.989.804-.727.804-.727 2.192V0h-1.566v-9.48h1.566v1.474q.558-.855 1.311-1.278.762-.424 1.752-.424 1.634 0 2.472 1.016.838 1.007.838 2.97z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path21"/><path d="M36.867-12.17v2.69h3.208v1.211h-3.208v5.146q0 1.16.313 1.49.322.33 1.295.33h1.6V0h-1.6q-1.803 0-2.488-.669-.686-.677-.686-2.454v-5.146H34.16v-1.21H35.3v-2.692z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path23"/><path d="M46.43-4.765q-1.886 0-2.614.432-.728.431-.728 1.472 0 .83.541 1.32.55.483 1.49.483 1.295 0 2.074-.914.787-.923.787-2.446v-.347zm3.107-.643V0H47.98v-1.439q-.533.863-1.329 1.278-.796.406-1.947.406-1.455 0-2.319-.812-.854-.821-.854-2.192 0-1.6 1.066-2.412 1.075-.813 3.2-.813h2.183v-.152q0-1.075-.711-1.659-.703-.592-1.98-.592-.813 0-1.583.194-.77.195-1.481.584v-1.439q.854-.33 1.658-.49.804-.17 1.566-.17 2.057 0 3.072 1.067 1.016 1.066 1.016 3.233z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path25"/><path d="M59.566-9.115v1.456q-.66-.364-1.328-.542-.66-.186-1.338-.186-1.515 0-2.353.964-.837.957-.837 2.692 0 1.735.837 2.7.838.956 2.353.956.677 0 1.338-.178.668-.186 1.328-.55v1.44q-.651.304-1.354.456-.694.152-1.481.152-2.141 0-3.402-1.345-1.261-1.346-1.261-3.631 0-2.32 1.27-3.648 1.277-1.329 3.495-1.329.719 0 1.405.153.685.144 1.328.44z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path27"/><path d="M63.815-12.17v2.69h3.208v1.211h-3.208v5.146q0 1.16.313 1.49.322.33 1.295.33h1.6V0h-1.6q-1.803 0-2.488-.669-.686-.677-.686-2.454v-5.146h-1.142v-1.21h1.142v-2.692z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path29"/></g><g aria-label="accessibilité" transform="translate(62.558 44.974)" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="text15"><path d="M5.941-4.765q-1.887 0-2.615.432-.728.431-.728 1.472 0 .83.542 1.32.55.483 1.49.483 1.294 0 2.073-.914.787-.923.787-2.446v-.347zm3.107-.643V0H7.49v-1.439Q6.957-.576 6.161-.16q-.795.406-1.946.406-1.456 0-2.32-.812-.854-.821-.854-2.192 0-1.6 1.066-2.412 1.075-.813 3.2-.813H7.49v-.152q0-1.075-.71-1.659-.703-.592-1.981-.592-.813 0-1.583.194-.77.195-1.481.584v-1.439q.855-.33 1.659-.49.804-.17 1.566-.17 2.056 0 3.072 1.067 1.016 1.066 1.016 3.233z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path32"/><path d="M19.077-9.115v1.456q-.66-.364-1.329-.542-.66-.186-1.337-.186-1.515 0-2.353.964-.838.957-.838 2.692 0 1.735.838 2.7.838.956 2.353.956.677 0 1.337-.178.669-.186 1.329-.55v1.44q-.652.304-1.354.456-.694.152-1.481.152-2.142 0-3.403-1.345-1.26-1.346-1.26-3.631 0-2.32 1.269-3.648 1.278-1.329 3.495-1.329.72 0 1.405.153.686.144 1.329.44z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path34"/><path d="M28.607-9.115v1.456q-.66-.364-1.33-.542-.66-.186-1.336-.186-1.515 0-2.353.964-.838.957-.838 2.692 0 1.735.838 2.7.838.956 2.353.956.677 0 1.337-.178.669-.186 1.329-.55v1.44q-.652.304-1.354.456-.694.152-1.482.152-2.14 0-3.402-1.345-1.261-1.346-1.261-3.631 0-2.32 1.27-3.648 1.278-1.329 3.495-1.329.72 0 1.405.153.685.144 1.329.44z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path36"/><path d="M39.423-5.129v.762h-7.16q.102 1.608.965 2.454.872.838 2.42.838.898 0 1.735-.22.847-.22 1.676-.66v1.473q-.838.355-1.718.541-.88.186-1.786.186-2.268 0-3.597-1.32-1.32-1.32-1.32-3.571 0-2.328 1.253-3.69 1.26-1.372 3.393-1.372 1.913 0 3.022 1.236 1.117 1.227 1.117 3.343zm-1.557-.457q-.017-1.278-.72-2.04-.694-.761-1.845-.761-1.303 0-2.09.736-.779.736-.897 2.074z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path38"/><path d="M48.022-9.2v1.473q-.66-.339-1.371-.508-.711-.17-1.473-.17-1.16 0-1.743.356-.576.356-.576 1.067 0 .541.415.854.415.305 1.667.584l.534.119q1.658.355 2.352 1.007.703.643.703 1.803 0 1.32-1.05 2.09-1.04.77-2.869.77-.761 0-1.59-.152-.822-.144-1.736-.44v-1.608q.863.448 1.701.677.838.22 1.66.22 1.1 0 1.692-.372.592-.381.592-1.067 0-.635-.431-.973-.424-.339-1.87-.652l-.542-.127q-1.448-.304-2.091-.93-.643-.635-.643-1.736 0-1.337.948-2.065t2.691-.728q.863 0 1.625.127t1.405.381z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path40"/><path d="M57.053-9.2v1.473q-.66-.339-1.371-.508-.711-.17-1.473-.17-1.16 0-1.744.356-.575.356-.575 1.067 0 .541.415.854.414.305 1.667.584l.533.119q1.659.355 2.353 1.007.702.643.702 1.803 0 1.32-1.049 2.09-1.041.77-2.87.77-.76 0-1.59-.152-.821-.144-1.735-.44v-1.608q.863.448 1.7.677.839.22 1.66.22 1.1 0 1.692-.372.593-.381.593-1.067 0-.635-.432-.973-.423-.339-1.87-.652l-.542-.127q-1.447-.304-2.09-.93-.644-.635-.644-1.736 0-1.337.948-2.065t2.692-.728q.863 0 1.625.127.761.127 1.405.381z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path42"/><path d="M60.04-9.48h1.558V0H60.04zm0-3.69h1.558v1.973H60.04z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path44"/><path d="M71.66-4.731q0-1.718-.71-2.692-.703-.981-1.938-.981-1.236 0-1.947.981-.702.974-.702 2.692 0 1.718.702 2.7.71.973 1.947.973 1.235 0 1.938-.973.71-.982.71-2.7zm-5.297-3.31q.49-.846 1.235-1.252.753-.415 1.794-.415 1.727 0 2.802 1.371 1.083 1.372 1.083 3.606t-1.083 3.605Q71.119.245 69.392.245q-1.04 0-1.794-.406-.745-.415-1.235-1.26V0h-1.566v-13.17h1.566z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path46"/><path d="M75.859-9.48h1.557V0h-1.557zm0-3.69h1.557v1.973h-1.557z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path48"/><path d="M80.674-13.17h1.558V0h-1.558z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path50"/><path d="M85.49-9.48h1.557V0H85.49zm0-3.69h1.557v1.973H85.49z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path52"/><path d="M91.846-12.17v2.69h3.208v1.211h-3.208v5.146q0 1.16.313 1.49.322.33 1.295.33h1.6V0h-1.6q-1.802 0-2.488-.669-.686-.677-.686-2.454v-5.146h-1.142v-1.21h1.142v-2.692z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path54"/><path d="M105.21-5.129v.762h-7.16q.102 1.608.965 2.454.872.838 2.42.838.897 0 1.735-.22.847-.22 1.676-.66v1.473q-.838.355-1.718.541-.88.186-1.786.186-2.268 0-3.597-1.32-1.32-1.32-1.32-3.571 0-2.328 1.253-3.69 1.26-1.372 3.393-1.372 1.913 0 3.022 1.236 1.117 1.227 1.117 3.343zm-1.557-.457q-.017-1.278-.72-2.04-.694-.761-1.845-.761-1.303 0-2.09.736-.779.736-.897 2.074zm-1.498-8.277h1.684l-2.76 3.182h-1.294z" style="font-size:17.33329964px;font-family:Luciole-Regular;fill:#132c77" id="path56"/></g></g></svg>
\ No newline at end of file
diff --git a/js/src/assets/logo.svg b/js/public/img/logo.svg
similarity index 100%
rename from js/src/assets/logo.svg
rename to js/public/img/logo.svg
diff --git a/js/public/img/online-event.webp b/js/public/img/online-event.webp
new file mode 100644
index 000000000..c20e97658
Binary files /dev/null and b/js/public/img/online-event.webp differ
diff --git a/js/public/img/pics/error.jpg b/js/public/img/pics/error.jpg
deleted file mode 100644
index 46752640e..000000000
Binary files a/js/public/img/pics/error.jpg and /dev/null differ
diff --git a/js/public/img/pics/error.webp b/js/public/img/pics/error.webp
new file mode 100644
index 000000000..d807645e5
Binary files /dev/null and b/js/public/img/pics/error.webp differ
diff --git a/js/public/img/pics/event_creation-1024w.jpg b/js/public/img/pics/event_creation-1024w.jpg
deleted file mode 100644
index 57c879268..000000000
Binary files a/js/public/img/pics/event_creation-1024w.jpg and /dev/null differ
diff --git a/js/public/img/pics/event_creation-1024w.webp b/js/public/img/pics/event_creation-1024w.webp
index 887137e16..96f31769c 100644
Binary files a/js/public/img/pics/event_creation-1024w.webp and b/js/public/img/pics/event_creation-1024w.webp differ
diff --git a/js/public/img/pics/event_creation-480w.jpg b/js/public/img/pics/event_creation-480w.jpg
deleted file mode 100644
index 004c872c0..000000000
Binary files a/js/public/img/pics/event_creation-480w.jpg and /dev/null differ
diff --git a/js/public/img/pics/event_creation-480w.webp b/js/public/img/pics/event_creation-480w.webp
index 7b6c6fda8..15f143247 100644
Binary files a/js/public/img/pics/event_creation-480w.webp and b/js/public/img/pics/event_creation-480w.webp differ
diff --git a/js/public/img/pics/event_creation.jpg b/js/public/img/pics/event_creation.jpg
deleted file mode 100644
index 227c4affc..000000000
Binary files a/js/public/img/pics/event_creation.jpg and /dev/null differ
diff --git a/js/public/img/pics/event_creation.webp b/js/public/img/pics/event_creation.webp
new file mode 100644
index 000000000..7406af41d
Binary files /dev/null and b/js/public/img/pics/event_creation.webp differ
diff --git a/js/public/img/pics/footer_1.jpg b/js/public/img/pics/footer_1.jpg
deleted file mode 100644
index 15a7a887e..000000000
Binary files a/js/public/img/pics/footer_1.jpg and /dev/null differ
diff --git a/js/public/img/pics/footer_1.webp b/js/public/img/pics/footer_1.webp
new file mode 100644
index 000000000..e6685dec6
Binary files /dev/null and b/js/public/img/pics/footer_1.webp differ
diff --git a/js/public/img/pics/footer_2.jpg b/js/public/img/pics/footer_2.jpg
deleted file mode 100644
index 389a1c88d..000000000
Binary files a/js/public/img/pics/footer_2.jpg and /dev/null differ
diff --git a/js/public/img/pics/footer_2.webp b/js/public/img/pics/footer_2.webp
new file mode 100644
index 000000000..e438b2cb9
Binary files /dev/null and b/js/public/img/pics/footer_2.webp differ
diff --git a/js/public/img/pics/footer_3.jpg b/js/public/img/pics/footer_3.jpg
deleted file mode 100644
index d126878b4..000000000
Binary files a/js/public/img/pics/footer_3.jpg and /dev/null differ
diff --git a/js/public/img/pics/footer_3.webp b/js/public/img/pics/footer_3.webp
new file mode 100644
index 000000000..be647fe19
Binary files /dev/null and b/js/public/img/pics/footer_3.webp differ
diff --git a/js/public/img/pics/footer_4.jpg b/js/public/img/pics/footer_4.jpg
deleted file mode 100644
index 50a35c9ac..000000000
Binary files a/js/public/img/pics/footer_4.jpg and /dev/null differ
diff --git a/js/public/img/pics/footer_4.webp b/js/public/img/pics/footer_4.webp
new file mode 100644
index 000000000..1d498275b
Binary files /dev/null and b/js/public/img/pics/footer_4.webp differ
diff --git a/js/public/img/pics/footer_5.jpg b/js/public/img/pics/footer_5.jpg
deleted file mode 100644
index e67a5bf66..000000000
Binary files a/js/public/img/pics/footer_5.jpg and /dev/null differ
diff --git a/js/public/img/pics/footer_5.webp b/js/public/img/pics/footer_5.webp
new file mode 100644
index 000000000..3fd2a6b90
Binary files /dev/null and b/js/public/img/pics/footer_5.webp differ
diff --git a/js/public/img/pics/group-1024w.jpg b/js/public/img/pics/group-1024w.jpg
deleted file mode 100644
index 5e7e9c329..000000000
Binary files a/js/public/img/pics/group-1024w.jpg and /dev/null differ
diff --git a/js/public/img/pics/group-1024w.webp b/js/public/img/pics/group-1024w.webp
index 3e9463f90..fea1fde5d 100644
Binary files a/js/public/img/pics/group-1024w.webp and b/js/public/img/pics/group-1024w.webp differ
diff --git a/js/public/img/pics/group-480w.jpg b/js/public/img/pics/group-480w.jpg
deleted file mode 100644
index b003dd502..000000000
Binary files a/js/public/img/pics/group-480w.jpg and /dev/null differ
diff --git a/js/public/img/pics/group-480w.webp b/js/public/img/pics/group-480w.webp
index 8e8380625..319d1257f 100644
Binary files a/js/public/img/pics/group-480w.webp and b/js/public/img/pics/group-480w.webp differ
diff --git a/js/public/img/pics/group.jpg b/js/public/img/pics/group.jpg
deleted file mode 100644
index 039149cd2..000000000
Binary files a/js/public/img/pics/group.jpg and /dev/null differ
diff --git a/js/public/img/pics/group.webp b/js/public/img/pics/group.webp
new file mode 100644
index 000000000..26ef07440
Binary files /dev/null and b/js/public/img/pics/group.webp differ
diff --git a/js/public/img/pics/homepage.jpg b/js/public/img/pics/homepage.jpg
deleted file mode 100644
index 8fd9d5835..000000000
Binary files a/js/public/img/pics/homepage.jpg and /dev/null differ
diff --git a/js/public/img/pics/homepage.webp b/js/public/img/pics/homepage.webp
new file mode 100644
index 000000000..0d0791a50
Binary files /dev/null and b/js/public/img/pics/homepage.webp differ
diff --git a/js/public/img/pics/homepage_background-1024w.webp b/js/public/img/pics/homepage_background-1024w.webp
deleted file mode 100644
index 9f63b55e5..000000000
Binary files a/js/public/img/pics/homepage_background-1024w.webp and /dev/null differ
diff --git a/js/public/img/pics/realisation.jpg b/js/public/img/pics/realisation.jpg
deleted file mode 100644
index ecc4610f0..000000000
Binary files a/js/public/img/pics/realisation.jpg and /dev/null differ
diff --git a/js/public/img/pics/realisation.webp b/js/public/img/pics/realisation.webp
new file mode 100644
index 000000000..739b6df84
Binary files /dev/null and b/js/public/img/pics/realisation.webp differ
diff --git a/js/public/img/pics/rose.jpg b/js/public/img/pics/rose.jpg
deleted file mode 100644
index 1689c50ec..000000000
Binary files a/js/public/img/pics/rose.jpg and /dev/null differ
diff --git a/js/public/img/pics/rose.webp b/js/public/img/pics/rose.webp
new file mode 100644
index 000000000..9d8328860
Binary files /dev/null and b/js/public/img/pics/rose.webp differ
diff --git a/js/public/img/shape-1.svg b/js/public/img/shape-1.svg
new file mode 100644
index 000000000..c8a8128df
--- /dev/null
+++ b/js/public/img/shape-1.svg
@@ -0,0 +1,10 @@
+<!--?xml version="1.0" standalone="no"?-->
+              <svg id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
+                    <defs> 
+                        <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
+                            <stop id="stop1" stop-color="rgba(255, 231.287, 78.545, 0.3)" offset="0%"></stop>
+                            <stop id="stop2" stop-color="rgba(254.848, 165.324, 149.009, 0.25)" offset="100%"></stop>
+                        </linearGradient>
+                    </defs>
+                <path fill="url(#sw-gradient)" d="M18.2,-13.5C23.5,-7.8,27.8,-0.2,27.7,8.7C27.5,17.6,22.9,27.8,14.1,33.9C5.3,39.9,-7.8,41.6,-17.7,36.8C-27.6,32,-34.2,20.7,-37.1,8.4C-39.9,-3.9,-39,-17.2,-32.2,-23.2C-25.4,-29.3,-12.7,-28.3,-3.1,-25.8C6.4,-23.3,12.8,-19.3,18.2,-13.5Z" width="100%" height="100%" transform="translate(50 50)" style="transition: all 0.3s ease 0s;" stroke-width="0" stroke="url(#sw-gradient)"></path>
+              </svg>
\ No newline at end of file
diff --git a/js/public/img/shape-2.svg b/js/public/img/shape-2.svg
new file mode 100644
index 000000000..8c0b87491
--- /dev/null
+++ b/js/public/img/shape-2.svg
@@ -0,0 +1,10 @@
+<!--?xml version="1.0" standalone="no"?-->
+              <svg id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
+                    <defs> 
+                        <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
+                            <stop id="stop1" stop-color="rgba(181.058, 255, 167.816, 0.2)" offset="0%"></stop>
+                            <stop id="stop2" stop-color="rgba(149.009, 254.848, 251.263, 0.25)" offset="100%"></stop>
+                        </linearGradient>
+                    </defs>
+                <path fill="url(#sw-gradient)" d="M20.2,-14.3C28.2,-6,38.3,2.5,37.6,9.8C36.9,17.1,25.5,23.1,15.5,25.2C5.6,27.3,-2.9,25.4,-11.2,21.9C-19.6,18.4,-27.9,13.3,-30.8,5.6C-33.7,-2.1,-31.2,-12.5,-25.2,-20.4C-19.1,-28.3,-9.6,-33.7,-1.8,-32.3C6.1,-30.9,12.1,-22.7,20.2,-14.3Z" width="100%" height="100%" transform="translate(50 50)" style="transition: all 0.3s ease 0s;" stroke-width="0" stroke="url(#sw-gradient)"></path>
+              </svg>
\ No newline at end of file
diff --git a/js/public/img/shape-3.svg b/js/public/img/shape-3.svg
new file mode 100644
index 000000000..dba085f3c
--- /dev/null
+++ b/js/public/img/shape-3.svg
@@ -0,0 +1,10 @@
+<!--?xml version="1.0" standalone="no"?-->
+              <svg id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
+                    <defs> 
+                        <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">
+                            <stop id="stop1" stop-color="rgba(172.198, 167.816, 255, 0.2)" offset="0%"></stop>
+                            <stop id="stop2" stop-color="rgba(236.8, 149.009, 254.848, 0.25)" offset="100%"></stop>
+                        </linearGradient>
+                    </defs>
+                <path fill="url(#sw-gradient)" d="M25.3,-21.5C29.4,-15.2,26.8,-4.8,23.6,3.8C20.4,12.5,16.5,19.4,10.2,23.2C3.9,27,-4.8,27.6,-12.6,24.5C-20.3,21.4,-27,14.6,-30.1,5.6C-33.2,-3.4,-32.6,-14.4,-26.9,-21.1C-21.3,-27.8,-10.7,-30.1,0,-30.1C10.7,-30.1,21.3,-27.8,25.3,-21.5Z" width="100%" height="100%" transform="translate(50 50)" style="transition: all 0.3s ease 0s;" stroke-width="0" stroke="url(#sw-gradient)"></path>
+              </svg>
\ No newline at end of file
diff --git a/js/public/index.html b/js/public/index.html
deleted file mode 100644
index 083951877..000000000
--- a/js/public/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="auto">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <meta name="server-injected-data" />
-  </head>
-
-  <body>
-    <noscript>
-      <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
-        properly without JavaScript enabled. Please enable it to
-        continue.</strong
-      >
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
diff --git a/js/scripts/build/pictures.sh b/js/scripts/build/pictures.sh
index d19fec20a..999d136ef 100755
--- a/js/scripts/build/pictures.sh
+++ b/js/scripts/build/pictures.sh
@@ -30,11 +30,6 @@ convert_image () {
     convert -geometry "$resolution"x $file $output
 }
 
-produce_webp () {
-    name=$(file_name)
-    output="$output_dir/$name.webp"
-    cwebp $file -quiet -o $output
-}
 
 progress() {
     local w=80 p=$1;  shift
@@ -68,23 +63,3 @@ do
     fi
 done
 echo -e "\nDone!"
-
-echo "Generating optimized versions of the pictures…"
-
-if ! command -v cwebp &> /dev/null
-then
-    echo "$(tput setaf 1)ERROR: The cwebp command could not be found. You need to install webp.$(tput sgr 0)"
-    exit 1
-fi
-
-nb_files=$( shopt -s nullglob ; set -- $output_dir/* ; echo $#)
-i=1
-for file in $output_dir/*
-do
-    if [[ -f $file ]]; then
-        produce_webp
-        progress $(($i*100/$nb_files)) still working...
-        i=$((i+1))
-    fi
-done
-echo -e "\nDone!"
\ No newline at end of file
diff --git a/js/src/App.vue b/js/src/App.vue
index 309331248..175d22d41 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -1,267 +1,277 @@
 <template>
   <div id="mobilizon">
-    <VueAnnouncer />
-    <VueSkipTo to="#main" :label="$t('Skip to main content')" />
+    <!-- <VueAnnouncer />
+    <VueSkipTo to="#main" :label="t('Skip to main content')" /> -->
     <NavBar />
-    <div v-if="config && config.demoMode">
-      <b-message
-        class="container"
-        type="is-danger"
-        :title="$t('Warning').toLocaleUpperCase()"
+    <div v-if="isDemoMode">
+      <o-notification
+        class="container mx-auto"
+        variant="danger"
+        :title="t('Warning').toLocaleUpperCase()"
         closable
-        :aria-close-label="$t('Close')"
+        :aria-close-label="t('Close')"
       >
         <p>
-          {{ $t("This is a demonstration site to test Mobilizon.") }}
-          <b>{{ $t("Please do not use it in any real way.") }}</b>
+          {{ t("This is a demonstration site to test Mobilizon.") }}
+          <b>{{ t("Please do not use it in any real way.") }}</b>
           {{
-            $t(
+            t(
               "This website isn't moderated and the data that you enter will be automatically destroyed every day at 00:01 (Paris timezone)."
             )
           }}
         </p>
-      </b-message>
+      </o-notification>
     </div>
-    <error v-if="error" :error="error" />
+    <ErrorComponent v-if="error" :error="error" />
 
-    <main id="main" v-else>
-      <transition name="fade" mode="out-in">
-        <router-view ref="routerView" />
-      </transition>
+    <main id="main" class="pt-4" v-else>
+      <router-view></router-view>
     </main>
     <mobilizon-footer />
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
-import NavBar from "./components/NavBar.vue";
+<script lang="ts" setup>
+import NavBar from "@/components/NavBar.vue";
 import {
   AUTH_ACCESS_TOKEN,
   AUTH_USER_EMAIL,
   AUTH_USER_ID,
   AUTH_USER_ROLE,
-} from "./constants";
-import {
-  CURRENT_USER_CLIENT,
-  UPDATE_CURRENT_USER_CLIENT,
-} from "./graphql/user";
-import Footer from "./components/Footer.vue";
-import Logo from "./components/Logo.vue";
-import { initializeCurrentActor } from "./utils/auth";
-import { CONFIG } from "./graphql/config";
-import { IConfig } from "./types/config.model";
-import { ICurrentUser } from "./types/current-user.model";
+} from "@/constants";
+import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
+import MobilizonFooter from "@/components/PageFooter.vue";
 import jwt_decode, { JwtPayload } from "jwt-decode";
-import { refreshAccessToken } from "./apollo/utils";
-import { Route } from "vue-router";
+import { refreshAccessToken } from "@/apollo/utils";
+import {
+  reactive,
+  ref,
+  provide,
+  onUnmounted,
+  onMounted,
+  onBeforeMount,
+  inject,
+  defineAsyncComponent,
+  computed,
+  watch,
+} from "vue";
+import { LocationType } from "@/types/user-location.model";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { initializeCurrentActor } from "@/utils/identity";
+import { useI18n } from "vue-i18n";
+import { Snackbar } from "@/plugins/snackbar";
+import { Notifier } from "@/plugins/notifier";
+import { CONFIG } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { useRouter } from "vue-router";
 
-@Component({
-  apollo: {
-    currentUser: CURRENT_USER_CLIENT,
-    config: CONFIG,
-  },
-  components: {
-    Logo,
-    NavBar,
-    error: () =>
-      import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
-    "mobilizon-footer": Footer,
-  },
-  metaInfo() {
-    return {
-      titleTemplate: "%s | Mobilizon",
+const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
+
+const config = computed(() => configResult.value?.config);
+
+const ErrorComponent = defineAsyncComponent(
+  () => import("@/components/ErrorComponent.vue")
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+const location = computed(() => config.value?.location);
+
+const userLocation = reactive<LocationType>({
+  lon: undefined,
+  lat: undefined,
+  name: undefined,
+  picture: undefined,
+  isIPLocation: true,
+  accuracy: 100,
+});
+
+const updateUserLocation = (newLocation: LocationType) => {
+  userLocation.lat = newLocation.lat;
+  userLocation.lon = newLocation.lon;
+  userLocation.name = newLocation.name;
+  userLocation.picture = newLocation.picture;
+  userLocation.isIPLocation = newLocation.isIPLocation;
+  userLocation.accuracy = newLocation.accuracy;
+};
+
+updateUserLocation({
+  lat: location.value?.latitude,
+  lon: location.value?.longitude,
+  name: "", // config.ipLocation.country.name,
+  isIPLocation: true,
+  accuracy: 150, // config.ipLocation.location.accuracy_radius * 1.5 || 150,
+});
+
+provide("userLocation", {
+  userLocation,
+  updateUserLocation,
+});
+
+// const routerView = ref("routerView");
+const error = ref<Error | null>(null);
+const online = ref(true);
+const interval = ref<number>(0);
+
+const notifier = inject<Notifier>("notifier");
+
+interval.value = setInterval(async () => {
+  const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
+  if (accessToken) {
+    const token = jwt_decode<JwtPayload>(accessToken);
+    if (
+      token?.exp !== undefined &&
+      new Date(token.exp * 1000 - 60000) < new Date()
+    ) {
+      refreshAccessToken();
+    }
+  }
+}, 60000) as unknown as number;
+
+onBeforeMount(async () => {
+  if (initializeCurrentUser()) {
+    await initializeCurrentActor();
+  }
+});
+
+const snackbar = inject<Snackbar>("snackbar");
+
+onMounted(() => {
+  online.value = window.navigator.onLine;
+  window.addEventListener("offline", () => {
+    online.value = false;
+    showOfflineNetworkWarning();
+    console.debug("offline");
+  });
+  window.addEventListener("online", () => {
+    online.value = true;
+    console.debug("online");
+  });
+  document.addEventListener("refreshApp", (event: Event) => {
+    snackbar?.open({
+      queue: false,
+      indefinite: true,
+      variant: "dark",
+      actionText: t("Update app"),
+      cancelText: t("Ignore"),
+      message: t("A new version is available."),
+      onAction: async () => {
+        const registration = event.detail as ServiceWorkerRegistration;
+        try {
+          await refreshApp(registration);
+          window.location.reload();
+        } catch (err) {
+          console.error(err);
+          notifier?.error(t("An error has occured while refreshing the page."));
+        }
+      },
+    });
+  });
+});
+
+onUnmounted(() => {
+  clearInterval(interval.value);
+  interval.value = 0;
+});
+
+const { mutate: updateCurrentUser } = useMutation(UPDATE_CURRENT_USER_CLIENT);
+
+const initializeCurrentUser = () => {
+  const userId = localStorage.getItem(AUTH_USER_ID);
+  const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
+  const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
+  const role = localStorage.getItem(AUTH_USER_ROLE);
+
+  if (userId && userEmail && accessToken && role) {
+    updateCurrentUser({
+      id: userId,
+      email: userEmail,
+      isLoggedIn: true,
+      role,
+    });
+    return true;
+  }
+  return false;
+};
+
+const refreshApp = async (
+  registration: ServiceWorkerRegistration
+): Promise<any> => {
+  const worker = registration.waiting;
+  if (!worker) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel();
+
+    channel.port1.onmessage = (event) => {
+      if (event.data.error) {
+        reject(event.data);
+      } else {
+        resolve(event.data);
+      }
     };
-  },
-})
-export default class App extends Vue {
-  config!: IConfig;
+    worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
+  });
+};
 
-  currentUser!: ICurrentUser;
+const showOfflineNetworkWarning = (): void => {
+  notifier?.error(t("You are offline"));
+};
+// const extractPageTitleFromRoute = (routeWatched: RouteLocation): string => {
+//   if (routeWatched.meta?.announcer?.message) {
+//     return routeWatched.meta?.announcer?.message();
+//   }
+//   return document.title;
+// };
 
-  error: Error | null = null;
+// watch(route, (routeWatched) => {
+//   const pageTitle = extractPageTitleFromRoute(routeWatched);
+//   if (pageTitle) {
+//     // this.$announcer.polite(
+//     //   t("Navigated to {pageTitle}", {
+//     //     pageTitle,
+//     //   }) as string
+//     // );
+//   }
+//   // Set the focus to the router view
+//   // https://marcus.io/blog/accessible-routing-vuejs
+//   setTimeout(() => {
+//     const focusTarget = (
+//       routerView.value?.$refs?.componentFocusTarget !== undefined
+//         ? routerView.value?.$refs?.componentFocusTarget
+//         : routerView.value?.$el
+//     ) as HTMLElement;
+//     if (focusTarget && focusTarget instanceof Element) {
+//       // Make focustarget programmatically focussable
+//       focusTarget.setAttribute("tabindex", "-1");
 
-  online = true;
+//       // Focus element
+//       focusTarget.focus();
 
-  interval: number | undefined = undefined;
+//       // Remove tabindex from focustarget.
+//       // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
+//       focusTarget.removeAttribute("tabindex");
+//     }
+//   }, 0);
+// });
 
-  @Ref("routerView") routerView!: Vue;
+const router = useRouter();
 
-  async created(): Promise<void> {
-    if (await this.initializeCurrentUser()) {
-      await initializeCurrentActor(this.$apollo.provider.defaultClient);
-    }
-  }
-
-  errorCaptured(error: Error): void {
-    this.error = error;
-  }
-
-  private async initializeCurrentUser() {
-    const userId = localStorage.getItem(AUTH_USER_ID);
-    const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
-    const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
-    const role = localStorage.getItem(AUTH_USER_ROLE);
-
-    if (userId && userEmail && accessToken && role) {
-      return this.$apollo.mutate({
-        mutation: UPDATE_CURRENT_USER_CLIENT,
-        variables: {
-          id: userId,
-          email: userEmail,
-          isLoggedIn: true,
-          role,
-        },
-      });
-    }
-    return false;
-  }
-
-  mounted(): void {
-    this.online = window.navigator.onLine;
-    window.addEventListener("offline", () => {
-      this.online = false;
-      this.showOfflineNetworkWarning();
-      console.debug("offline");
-    });
-    window.addEventListener("online", () => {
-      this.online = true;
-      console.debug("online");
-    });
-    document.addEventListener("refreshApp", (event: Event) => {
-      this.$buefy.snackbar.open({
-        queue: false,
-        indefinite: true,
-        type: "is-secondary",
-        actionText: this.$t("Update app") as string,
-        cancelText: this.$t("Ignore") as string,
-        message: this.$t("A new version is available.") as string,
-        onAction: async () => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          const detail = event.detail;
-          const registration = detail as ServiceWorkerRegistration;
-          try {
-            await this.refreshApp(registration);
-            window.location.reload();
-          } catch (err) {
-            console.error(err);
-            this.$notifier.error(
-              this.$t(
-                "An error has occured while refreshing the page."
-              ) as string
-            );
-          }
-        },
-      });
-    });
-
-    this.interval = setInterval(async () => {
-      const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
-      if (accessToken) {
-        const token = jwt_decode<JwtPayload>(accessToken);
-        if (
-          token?.exp !== undefined &&
-          new Date(token.exp * 1000 - 60000) < new Date()
-        ) {
-          refreshAccessToken(this.$apollo.getClient());
-        }
-      }
-    }, 60000);
-  }
-
-  private async refreshApp(
-    registration: ServiceWorkerRegistration
-  ): Promise<any> {
-    const worker = registration.waiting;
-    if (!worker) {
-      return Promise.resolve();
-    }
-    console.debug("Doing worker.skipWaiting().");
-    return new Promise((resolve, reject) => {
-      const channel = new MessageChannel();
-
-      channel.port1.onmessage = (event) => {
-        console.debug("Done worker.skipWaiting().");
-        if (event.data.error) {
-          reject(event.data);
-        } else {
-          resolve(event.data);
-        }
-      };
-      console.debug("calling skip waiting");
-      worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
+watch(config, async (configWatched: IConfig | undefined) => {
+  if (configWatched) {
+    const { statistics } = await import("@/services/statistics");
+    statistics(configWatched?.analytics, {
+      router,
+      version: configWatched.version,
     });
   }
+});
 
-  showOfflineNetworkWarning(): void {
-    this.$notifier.error(this.$t("You are offline") as string);
-  }
-
-  unmounted(): void {
-    clearInterval(this.interval);
-    this.interval = undefined;
-  }
-
-  @Watch("config")
-  async initializeStatistics(config: IConfig) {
-    if (config) {
-      const { statistics } = (await import("./services/statistics")) as {
-        statistics: (config: IConfig, environment: Record<string, any>) => void;
-      };
-      statistics(config, { router: this.$router, version: config.version });
-    }
-  }
-
-  @Watch("$route", { immediate: true })
-  updateAnnouncement(route: Route): void {
-    const pageTitle = this.extractPageTitleFromRoute(route);
-    if (pageTitle) {
-      this.$announcer.polite(
-        this.$t("Navigated to {pageTitle}", {
-          pageTitle,
-        }) as string
-      );
-    }
-    // Set the focus to the router view
-    // https://marcus.io/blog/accessible-routing-vuejs
-    setTimeout(() => {
-      const focusTarget = (
-        this.routerView?.$refs?.componentFocusTarget !== undefined
-          ? this.routerView?.$refs?.componentFocusTarget
-          : this.routerView?.$el
-      ) as HTMLElement;
-      if (focusTarget && focusTarget instanceof Element) {
-        // Make focustarget programmatically focussable
-        focusTarget.setAttribute("tabindex", "-1");
-
-        // Focus element
-        focusTarget.focus();
-
-        // Remove tabindex from focustarget.
-        // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
-        focusTarget.removeAttribute("tabindex");
-      }
-    }, 0);
-  }
-
-  extractPageTitleFromRoute(route: Route): string {
-    if (route.meta?.announcer?.message) {
-      return route.meta?.announcer?.message();
-    }
-    return document.title;
-  }
-}
+const isDemoMode = computed(() => config.value?.demoMode);
 </script>
 
 <style lang="scss">
-@import "variables";
-
-/* Icons */
-$mdi-font-path: "~@mdi/font/fonts";
-@import "~@mdi/font/scss/materialdesignicons";
-@import "common";
-
 #mobilizon {
   min-height: 100vh;
   display: flex;
diff --git a/js/src/api/_entrypoint.ts b/js/src/api/_entrypoint.ts
index 16de19cd8..bc630131c 100644
--- a/js/src/api/_entrypoint.ts
+++ b/js/src/api/_entrypoint.ts
@@ -14,7 +14,8 @@ export const MOBILIZON_INSTANCE_HOST = window.location.hostname;
  *
  * Example: https://framameet.org
  */
-export const GRAPHQL_API_ENDPOINT = window.location.origin;
+export const GRAPHQL_API_ENDPOINT =
+  import.meta.env.VITE_SERVER_URL ?? window.location.origin;
 
 /**
  * URL with path on which the API is. Replaces GRAPHQL_API_ENDPOINT if used
@@ -23,4 +24,4 @@ export const GRAPHQL_API_ENDPOINT = window.location.origin;
  *
  * Example: https://framameet.org/api
  */
-export const GRAPHQL_API_FULL_PATH = `${window.location.origin}/api`;
+export const GRAPHQL_API_FULL_PATH = `${GRAPHQL_API_ENDPOINT}/api`;
diff --git a/js/src/apollo/absinthe-socket-link.ts b/js/src/apollo/absinthe-socket-link.ts
new file mode 100644
index 000000000..70a462666
--- /dev/null
+++ b/js/src/apollo/absinthe-socket-link.ts
@@ -0,0 +1,25 @@
+import { Socket as PhoenixSocket } from "phoenix";
+import { create } from "@absinthe/socket";
+import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link";
+import { AUTH_ACCESS_TOKEN } from "@/constants";
+import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
+
+const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
+
+const webSocketPrefix = import.meta.env.PROD ? "wss" : "ws";
+const wsEndpoint = `${webSocketPrefix}${httpServer.substring(
+  httpServer.indexOf(":")
+)}/graphql_socket`;
+
+const phoenixSocket = new PhoenixSocket(wsEndpoint, {
+  params: () => {
+    const token = localStorage.getItem(AUTH_ACCESS_TOKEN);
+    if (token) {
+      return { token };
+    }
+    return {};
+  },
+});
+
+const absintheSocket = create(phoenixSocket);
+export default createAbsintheSocketLink(absintheSocket);
diff --git a/js/src/apollo/absinthe-upload-socket-link.ts b/js/src/apollo/absinthe-upload-socket-link.ts
new file mode 100644
index 000000000..6f40d6d0e
--- /dev/null
+++ b/js/src/apollo/absinthe-upload-socket-link.ts
@@ -0,0 +1,20 @@
+import fetch from "unfetch";
+import { createLink } from "apollo-absinthe-upload-link";
+import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "@/api/_entrypoint";
+
+// Endpoints
+const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
+const httpEndpoint = GRAPHQL_API_FULL_PATH || `${httpServer}/api`;
+
+const customFetch = async (uri: string, options: any) => {
+  const response = await fetch(uri, options);
+  if (response.status >= 400) {
+    return Promise.reject(response.status);
+  }
+  return response;
+};
+
+export const uploadLink = createLink({
+  uri: httpEndpoint,
+  fetch: customFetch,
+});
diff --git a/js/src/apollo/auth.ts b/js/src/apollo/auth.ts
new file mode 100644
index 000000000..02d60c2b8
--- /dev/null
+++ b/js/src/apollo/auth.ts
@@ -0,0 +1,23 @@
+import { AUTH_ACCESS_TOKEN } from "@/constants";
+import { ApolloLink } from "@apollo/client/core";
+
+export function generateTokenHeader() {
+  const token = localStorage.getItem(AUTH_ACCESS_TOKEN);
+
+  return token ? `Bearer ${token}` : null;
+}
+
+const authMiddleware = new ApolloLink((operation, forward) => {
+  // add the authorization to the headers
+  operation.setContext({
+    headers: {
+      authorization: generateTokenHeader(),
+    },
+  });
+
+  if (forward) return forward(operation);
+
+  return null;
+});
+
+export { authMiddleware };
diff --git a/js/src/apollo/error-link.ts b/js/src/apollo/error-link.ts
new file mode 100644
index 000000000..faaf7f00a
--- /dev/null
+++ b/js/src/apollo/error-link.ts
@@ -0,0 +1,101 @@
+import { logout } from "@/utils/auth";
+import { onError } from "@apollo/client/link/error";
+import { fromPromise } from "@apollo/client/core";
+import { refreshAccessToken } from "./utils";
+import { GraphQLError } from "graphql";
+import { generateTokenHeader } from "./auth";
+
+let isRefreshing = false;
+let pendingRequests: any[] = [];
+
+const resolvePendingRequests = () => {
+  pendingRequests.map((callback) => callback());
+  pendingRequests = [];
+};
+
+const isAuthError = (graphQLError: GraphQLError | undefined) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return graphQLError && [403, 401].includes(graphQLError.status_code);
+};
+
+const errorLink = onError(
+  ({ graphQLErrors, networkError, forward, operation }) => {
+    console.debug("We have an apollo error", [graphQLErrors, networkError]);
+    if (
+      graphQLErrors?.some((graphQLError) => isAuthError(graphQLError)) ||
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      networkError === 401
+    ) {
+      console.debug("It's a authorization error (statusCode 401)");
+      let forwardOperation;
+
+      if (!isRefreshing) {
+        console.debug("Setting isRefreshing to true");
+        isRefreshing = true;
+
+        forwardOperation = fromPromise(
+          refreshAccessToken()
+            .then((res) => {
+              if (res !== true) {
+                // failed to refresh the token
+                throw "Failed to refresh the token";
+              }
+              resolvePendingRequests();
+
+              const context = operation.getContext();
+              const oldHeaders = context.headers;
+
+              operation.setContext({
+                headers: {
+                  ...oldHeaders,
+                  authorization: generateTokenHeader(),
+                },
+              });
+              return true;
+            })
+            .catch((e) => {
+              console.debug("Something failed, let's logout", e);
+              pendingRequests = [];
+              // don't perform a logout since we don't have any working access/refresh tokens
+              logout(false);
+              return;
+            })
+            .finally(() => {
+              isRefreshing = false;
+            })
+        ).filter((value) => Boolean(value));
+      } else {
+        forwardOperation = fromPromise(
+          new Promise((resolve) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            pendingRequests.push(() => resolve());
+          })
+        );
+      }
+
+      return forwardOperation.flatMap(() => forward(operation));
+    }
+
+    if (graphQLErrors) {
+      graphQLErrors.map(
+        (graphQLError: GraphQLError & { status_code?: number }) => {
+          if (graphQLError?.status_code !== 401) {
+            console.debug(
+              `[GraphQL error]: Message: ${graphQLError.message}, Location: ${graphQLError.locations}, Path: ${graphQLError.path}`
+            );
+          }
+        }
+      );
+    }
+
+    if (networkError) {
+      console.error(`[Network error]: ${networkError}`);
+      console.debug(JSON.stringify(networkError));
+    }
+  }
+);
+
+export default errorLink;
diff --git a/js/src/apollo/link.ts b/js/src/apollo/link.ts
new file mode 100644
index 000000000..5e63dd2d4
--- /dev/null
+++ b/js/src/apollo/link.ts
@@ -0,0 +1,40 @@
+import { split } from "@apollo/client/core";
+import { RetryLink } from "@apollo/client/link/retry";
+import { getMainDefinition } from "@apollo/client/utilities";
+import absintheSocketLink from "./absinthe-socket-link";
+import { authMiddleware } from "./auth";
+import errorLink from "./error-link";
+import { uploadLink } from "./absinthe-upload-socket-link";
+
+let link;
+
+// The Absinthe socket Apollo link relies on an old library
+// (@jumpn/utils-composite) which itself relies on an old
+// Babel version, which is incompatible with Histoire.
+// We just don't use the absinthe apollo socket link
+// in this case.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+if (!import.meta.env.VITE_HISTOIRE_ENV) {
+  // const absintheSocketLink = await import("./absinthe-socket-link");
+
+  link = split(
+    // split based on operation type
+    ({ query }) => {
+      const definition = getMainDefinition(query);
+      return (
+        definition.kind === "OperationDefinition" &&
+        definition.operation === "subscription"
+      );
+    },
+    absintheSocketLink,
+    uploadLink
+  );
+}
+
+const retryLink = new RetryLink();
+
+export const fullLink = authMiddleware
+  .concat(retryLink)
+  .concat(errorLink)
+  .concat(link ?? uploadLink);
diff --git a/js/src/apollo/memory.ts b/js/src/apollo/memory.ts
new file mode 100644
index 000000000..659135fd1
--- /dev/null
+++ b/js/src/apollo/memory.ts
@@ -0,0 +1,14 @@
+import { defaultDataIdFromObject, InMemoryCache } from "@apollo/client/core";
+import { possibleTypes, typePolicies } from "./utils";
+
+export const cache = new InMemoryCache({
+  addTypename: true,
+  typePolicies,
+  possibleTypes,
+  dataIdFromObject: (object: any) => {
+    if (object.__typename === "Address") {
+      return object.origin_id;
+    }
+    return defaultDataIdFromObject(object);
+  },
+});
diff --git a/js/src/apollo/user.ts b/js/src/apollo/user.ts
index 2eb20ed6e..e7195918a 100644
--- a/js/src/apollo/user.ts
+++ b/js/src/apollo/user.ts
@@ -1,4 +1,5 @@
 import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { CURRENT_USER_LOCATION_CLIENT } from "@/graphql/location";
 import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUserRole } from "@/types/enums";
 import { ApolloCache, NormalizedCacheObject } from "@apollo/client/cache";
@@ -7,7 +8,7 @@ import { Resolvers } from "@apollo/client/core/types";
 export default function buildCurrentUserResolver(
   cache: ApolloCache<NormalizedCacheObject>
 ): Resolvers {
-  cache.writeQuery({
+  cache?.writeQuery({
     query: CURRENT_USER_CLIENT,
     data: {
       currentUser: {
@@ -20,7 +21,7 @@ export default function buildCurrentUserResolver(
     },
   });
 
-  cache.writeQuery({
+  cache?.writeQuery({
     query: CURRENT_ACTOR_CLIENT,
     data: {
       currentActor: {
@@ -33,6 +34,20 @@ export default function buildCurrentUserResolver(
     },
   });
 
+  cache?.writeQuery({
+    query: CURRENT_USER_LOCATION_CLIENT,
+    data: {
+      currentUserLocation: {
+        lat: null,
+        lon: null,
+        accuracy: null,
+        isIPLocation: null,
+        name: null,
+        picture: null,
+      },
+    },
+  });
+
   return {
     Mutation: {
       updateCurrentUser: (
@@ -84,6 +99,39 @@ export default function buildCurrentUserResolver(
 
         localCache.writeQuery({ data, query: CURRENT_ACTOR_CLIENT });
       },
+      updateCurrentUserLocation: (
+        _: any,
+        {
+          lat,
+          lon,
+          accuracy,
+          isIPLocation,
+          name,
+          picture,
+        }: {
+          lat: number;
+          lon: number;
+          accuracy: number;
+          isIPLocation: boolean;
+          name: string;
+          picture: any;
+        },
+        { cache: localCache }: { cache: ApolloCache<NormalizedCacheObject> }
+      ) => {
+        const data = {
+          currentUserLocation: {
+            lat,
+            lon,
+            accuracy,
+            isIPLocation,
+            name,
+            picture,
+            __typename: "CurrentUserLocation",
+          },
+        };
+
+        localCache.writeQuery({ data, query: CURRENT_USER_LOCATION_CLIENT });
+      },
     },
   };
 }
diff --git a/js/src/apollo/utils.ts b/js/src/apollo/utils.ts
index 07caeb405..4c994d917 100644
--- a/js/src/apollo/utils.ts
+++ b/js/src/apollo/utils.ts
@@ -4,19 +4,16 @@ import { IFollower } from "@/types/actor/follower.model";
 import { IParticipant } from "@/types/participant.model";
 import { Paginate } from "@/types/paginate";
 import { saveTokenData } from "@/utils/auth";
-import {
-  ApolloClient,
-  FieldPolicy,
-  NormalizedCacheObject,
-  Reference,
-  TypePolicies,
-} from "@apollo/client/core";
+import { FieldPolicy, Reference, TypePolicies } from "@apollo/client/core";
 import introspectionQueryResultData from "../../fragmentTypes.json";
 import { IMember } from "@/types/actor/member.model";
 import { IComment } from "@/types/comment.model";
 import { IEvent } from "@/types/event.model";
 import { IActivity } from "@/types/activity.model";
 import uniqBy from "lodash/uniqBy";
+import { provideApolloClient, useMutation } from "@vue/apollo-composable";
+import { apolloClient } from "@/vue-apollo";
+import { IToken } from "@/types/login.model";
 
 type possibleTypes = { name: string };
 type schemaType = {
@@ -73,6 +70,12 @@ export const typePolicies: TypePolicies = {
   Instance: {
     keyFields: ["domain"],
   },
+  Config: {
+    merge: true,
+  },
+  Address: {
+    keyFields: ["id"],
+  },
   RootQueryType: {
     fields: {
       relayFollowers: paginatedLimitPagination<IFollower>(),
@@ -99,9 +102,7 @@ export const typePolicies: TypePolicies = {
   },
 };
 
-export async function refreshAccessToken(
-  apolloClient: ApolloClient<NormalizedCacheObject>
-): Promise<boolean> {
+export async function refreshAccessToken(): Promise<boolean> {
   // Remove invalid access token, so the next request is not authenticated
   localStorage.removeItem(AUTH_ACCESS_TOKEN);
 
@@ -112,23 +113,30 @@ export async function refreshAccessToken(
     return false;
   }
 
-  console.log("Refreshing access token.");
+  console.debug("Refreshing access token.");
 
-  try {
-    const res = await apolloClient.mutate({
-      mutation: REFRESH_TOKEN,
-      variables: {
-        refreshToken,
-      },
+  return new Promise((resolve, reject) => {
+    const { mutate, onDone, onError } = provideApolloClient(apolloClient)(() =>
+      useMutation<{ refreshToken: IToken }>(REFRESH_TOKEN)
+    );
+
+    mutate({
+      refreshToken,
     });
 
-    saveTokenData(res.data.refreshToken);
+    onDone(({ data }) => {
+      if (data?.refreshToken) {
+        saveTokenData(data?.refreshToken);
+        resolve(true);
+      }
+      reject(false);
+    });
 
-    return true;
-  } catch (err) {
-    console.debug("Failed to refresh token");
-    return false;
-  }
+    onError((err) => {
+      console.debug("Failed to refresh token", err);
+      reject(false);
+    });
+  });
 }
 
 type KeyArgs = FieldPolicy<any>["keyArgs"];
diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
new file mode 100644
index 000000000..63dffe692
--- /dev/null
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -0,0 +1,280 @@
+body {
+  @apply bg-body-background-color dark:bg-zinc-800 dark:text-white;
+}
+
+/* Button */
+.btn {
+  @apply font-bold py-2 px-4 bg-mbz-bluegreen hover:bg-mbz-bluegreen-600 text-white rounded h-10 outline-none focus:ring ring-offset-1 ring-offset-slate-50 ring-blue-300;
+}
+.btn:hover {
+  @apply text-slate-200;
+}
+.btn-rounded {
+  @apply rounded-full;
+}
+.btn-outlined-,
+.btn-outlined-primary {
+  @apply bg-transparent text-black dark:text-white font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
+}
+.btn-outlined-:hover,
+.btn-outlined-primary:hover {
+  @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
+}
+.btn-size-large {
+  @apply text-2xl py-6;
+}
+.btn-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+.btn-danger {
+  @apply bg-mbz-danger hover:bg-mbz-danger/90;
+}
+.btn-success {
+  @apply bg-mbz-success;
+}
+.btn-text {
+  @apply bg-transparent border-transparent text-black dark:text-white font-normal underline hover:bg-zinc-200 hover:text-black;
+}
+
+/* Field */
+.field {
+  margin-top: 0.5rem;
+}
+.field-label {
+  @apply block text-gray-700 dark:text-gray-100 text-base font-bold mb-2;
+}
+.field-danger {
+  @apply text-red-500;
+}
+
+.o-field.o-field--addons .control:last-child:not(:only-child) .button {
+  @apply inline-flex text-gray-800 bg-gray-200 h-9 mt-[1px] rounded text-center px-2 py-1.5;
+
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.field-message-info {
+  @apply text-mbz-info;
+}
+
+.field-message-danger {
+  @apply text-mbz-danger;
+}
+
+/* Input */
+.input {
+  @apply appearance-none border w-full py-2 px-3 text-black leading-tight dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50;
+}
+.input-danger {
+  @apply border-red-500;
+}
+.input-icon-right {
+  right: 0.5rem;
+}
+.input[type="text"]:disabled,
+.input[type="email"]:disabled {
+  @apply bg-zinc-200 dark:bg-zinc-400;
+}
+
+.icon-warning {
+  @apply text-amber-600;
+}
+
+.icon-danger {
+  @apply text-red-500;
+}
+.icon-success {
+  @apply text-mbz-success;
+}
+.icon-grey {
+  @apply text-gray-500;
+}
+
+.o-input__icon-left {
+  @apply dark:text-black h-10 w-10;
+}
+
+.o-input-iconspace-left {
+  @apply pl-10;
+}
+
+/* InputItems */
+.inputitems-item {
+  @apply bg-primary mr-2;
+}
+
+.inputitems-item:first-child {
+  @apply ml-2;
+}
+
+/* Autocomplete */
+.autocomplete-menu {
+  @apply max-h-[200px] drop-shadow-md text-black;
+}
+
+.autocomplete-item {
+  @apply py-1.5 px-4;
+}
+
+/* Dropdown */
+.dropdown {
+  @apply inline-flex relative;
+}
+.dropdown-menu {
+  min-width: 12em;
+  @apply bg-white dark:bg-zinc-700 shadow-lg rounded text-start py-2;
+}
+.dropdown-item {
+  @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full;
+}
+
+.dropdown-item-active {
+  @apply bg-white text-black;
+}
+.dropdown-button {
+  @apply inline-flex gap-1;
+}
+
+/* Checkbox */
+
+.checkbox {
+  @apply appearance-none bg-primary border-primary;
+}
+
+.checkbox-checked {
+  @apply bg-primary text-primary;
+}
+
+.checkbox-label {
+  margin-left: 0.2rem;
+}
+
+/* Modal */
+
+.modal-content {
+  @apply bg-white dark:bg-zinc-800 rounded px-2 py-4 w-full z-0;
+}
+
+/* Switch */
+.switch {
+  @apply cursor-pointer inline-flex items-center relative mr-2;
+}
+
+.switch-label {
+  @apply pl-2;
+}
+
+.switch-check-checked {
+  @apply bg-primary;
+}
+
+/* Select */
+.select {
+  @apply dark:bg-zinc-600 dark:placeholder:text-zinc-400 dark:text-zinc-50 rounded pl-2 pr-6 border-2 border-transparent h-10 shadow-none;
+}
+
+/* Radio */
+.form-radio {
+  @apply bg-none text-primary accent-primary;
+}
+.radio-label {
+  @apply pl-2;
+}
+
+/* Editor */
+button.menubar__button {
+  @apply dark:text-white;
+}
+
+/* Notification */
+.notification {
+  @apply p-7 bg-mbz-yellow-alt-200 dark:bg-mbz-purple-600 text-black dark:text-white rounded;
+}
+
+.notification-primary {
+  @apply bg-primary;
+}
+
+.notification-info {
+  @apply bg-mbz-info text-black;
+}
+
+.notification-warning {
+  @apply bg-amber-600 text-black;
+}
+
+.notification-danger {
+  @apply bg-mbz-danger text-white;
+}
+
+/* Table */
+.table tr {
+  @apply odd:bg-white dark:odd:bg-zinc-600 last:border-b-0 even:bg-gray-50 dark:even:bg-zinc-700 border-b rounded;
+}
+
+.table-td {
+  @apply py-4 px-2 whitespace-nowrap;
+}
+
+.table-th {
+  @apply p-2;
+}
+
+.table-root {
+  @apply mt-4;
+}
+
+/* Snackbar */
+.notification-dark {
+  @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 dark:bg-zinc-300 text-lg text-black;
+}
+.pagination-list {
+  @apply flex items-center text-center list-none flex-wrap grow shrink justify-start;
+}
+.pagination-next,
+.pagination-previous {
+  @apply px-3 dark:text-black;
+}
+.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;
+}
+
+/** Tooltip */
+.tooltip-content {
+  @apply bg-zinc-800 text-white dark:bg-zinc-300 dark:text-black rounded py-1 px-2;
+}
+.tooltip-arrow {
+  @apply text-zinc-800 dark:text-zinc-200;
+}
+.tooltip-content-success {
+  @apply bg-mbz-success text-white;
+}
+
+/** Tiptap editor */
+.menubar__button {
+  @apply hover:bg-[rgba(0,0,0,.05)];
+}
diff --git a/js/src/assets/tailwind.css b/js/src/assets/tailwind.css
index 7f393742a..9d1ebab06 100644
--- a/js/src/assets/tailwind.css
+++ b/js/src/assets/tailwind.css
@@ -3,3 +3,45 @@
 @tailwind components;
 
 @tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-white dark:bg-gray-900;
+  }
+
+  h1 {
+    @apply text-4xl lg:text-5xl leading-none font-extrabold tracking-tight mt-5 mb-4 sm:mt-7 sm:mb-5;
+  }
+
+  h2 {
+    @apply text-xl mt-2;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+}
+
+@layer components {
+  .mbz-card {
+    @apply block bg-mbz-yellow-alt-300 hover:bg-mbz-yellow-alt-200 text-violet-title dark:text-white dark:hover:text-white rounded-lg dark:border-violet-title shadow-md dark:bg-mbz-purple dark:hover:dark:bg-mbz-purple-400 dark:text-white dark:hover:text-white;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --oruga-variant-primary: #1e7d97;
+
+    --oruga-field-label-color: white;
+
+    --oruga-table-background-color: #111827;
+    --oruga-table-th-color: white;
+
+    --oruga-modal-content-background-color: #111827;
+
+    --oruga-dropdown-item-color: white;
+    --oruga-dropdown-menu-background: #111827;
+    --oruga-dropdown-item-hover-color: white;
+    --oruga-dropdown-item-hover-background-color: #111827;
+  }
+}
diff --git a/js/src/common.scss b/js/src/common.scss
deleted file mode 100644
index 2d882fb28..000000000
--- a/js/src/common.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-@use "@/styles/_mixins" as *;
-@import "variables.scss";
-
-@import "~bulma";
-@import "~bulma-divider";
-@import "~buefy/src/scss/buefy";
-@import "styles/vue-announcer.scss";
-@import "styles/vue-skip-to.scss";
-
-a.out,
-.content a,
-.ProseMirror a {
-  text-decoration: underline;
-  text-decoration-color: #ed8d07;
-  text-decoration-thickness: 2px;
-}
-
-.section {
-  padding: 1rem 1% 4rem;
-}
-
-$color-black: #000;
-
-.mention {
-  background: rgba($color-black, 0.1);
-  font-size: 0.9rem;
-  font-weight: bold;
-  border-radius: 5px;
-  padding: 0.2rem;
-  white-space: nowrap;
-  @include margin-right(0.2rem);
-}
-
-.mention-suggestion {
-  color: rgba($color-black, 0.6);
-}
-
-.mention .mention {
-  background: initial;
-  @include margin-right(0);
-}
-
-.select select {
-  border-color: $borders;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-body {
-  background: $body-background-color;
-  font-family: BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Segoe UI",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  overflow-x: hidden;
-}
-
-#mobilizon > .container > .message {
-  margin: 1rem auto auto;
-  .message-header {
-    button.delete {
-      background: #4a4a4a;
-    }
-  }
-}
-
-.module-description {
-  margin-bottom: 2rem;
-  color: $violet-1;
-}
-
-$list-background-color: $scheme-main !default;
-$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1),
-  0 0 0 1px rgba($scheme-invert, 0.1) !default;
-$list-radius: $radius !default;
-
-$list-item-border: 1px solid $border !default;
-$list-item-color: $text !default;
-$list-item-active-background-color: $link !default;
-$list-item-active-color: $link-invert !default;
-$list-item-hover-background-color: $background !default;
-
-.list-item {
-  display: block;
-  padding: 0.5em 1em;
-  &:not(a) {
-    color: $list-item-color;
-  }
-  &:first-child {
-    border-top-left-radius: $list-radius;
-    border-top-right-radius: $list-radius;
-  }
-  &:last-child {
-    border-bottom-left-radius: $list-radius;
-    border-bottom-right-radius: $list-radius;
-  }
-  &:not(:last-child) {
-    border-bottom: $list-item-border;
-  }
-  &.is-active {
-    background-color: $list-item-active-background-color;
-    color: $list-item-active-color;
-  }
-}
-
-a.list-item {
-  background-color: $list-item-hover-background-color;
-  cursor: pointer;
-}
-
-.setting-title {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-
-  h2 {
-    display: inline;
-    background: $secondary;
-    padding: 2px 7.5px;
-    text-transform: uppercase;
-    font-size: 1.25rem;
-  }
-}
-
-@mixin focus() {
-  &:focus {
-    border: 2px solid black;
-    border-radius: 5px;
-  }
-}
-
-ul.menu-list > li,
-p {
-  @include focus;
-}
-.navbar-item {
-  @include focus;
-}
-
-.navbar-dropdown span.navbar-item:hover {
-  background-color: whitesmoke;
-  color: #0a0a0a;
-}
-
-/**
- * Bulma/Buefy fixes
- */
-.icon {
-  vertical-align: middle;
-}
-
-.tags .tag:not(:last-child) {
-  margin-right: unset;
-  @include margin-right(0.5rem);
-}
-
-.button .icon {
-  &:first-child:not(:last-child) {
-    @include margin-left(calc(-0.5em - 1px));
-    @include margin-right(0.25em);
-  }
-  &:last-child:not(:first-child) {
-    @include margin-right(calc(-0.5em - 1px));
-    @include margin-left(0.25em);
-  }
-}
-
-.buttons .button:not(:last-child):not(.is-fullwidth) {
-  margin-right: unset;
-  @include margin-right(0.5rem);
-}
-
-.breadcrumb li:first-child a {
-  padding-left: unset;
-  @include padding-left(0);
-  @include padding-right(0.75em);
-}
-.media-left {
-  @include margin-left(1rem);
-}
-a.dropdown-item {
-  @include padding-right(3rem);
-}
diff --git a/js/src/components/About/InstanceContactLink.story.vue b/js/src/components/About/InstanceContactLink.story.vue
new file mode 100644
index 000000000..6369bd2c4
--- /dev/null
+++ b/js/src/components/About/InstanceContactLink.story.vue
@@ -0,0 +1,20 @@
+<template>
+  <Story>
+    <Variant title="empty">
+      <InstanceContactLink />
+    </Variant>
+    <Variant title="string">
+      <InstanceContactLink contact="someone" />
+    </Variant>
+    <Variant title="email">
+      <InstanceContactLink contact="someone@somewhere.tld" />
+    </Variant>
+    <Variant title="url">
+      <InstanceContactLink contact="https://somewhere.com" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import InstanceContactLink from "./InstanceContactLink.vue";
+</script>
diff --git a/js/src/components/About/InstanceContactLink.vue b/js/src/components/About/InstanceContactLink.vue
index 429e7fb67..e56a1129c 100644
--- a/js/src/components/About/InstanceContactLink.vue
+++ b/js/src/components/About/InstanceContactLink.vue
@@ -4,49 +4,49 @@
       configLink.text
     }}</a>
     <span dir="auto" v-else-if="contact">{{ contact }}</span>
-    <span v-else>{{ $t("contact uninformed") }}</span>
+    <span v-else>{{ t("contact uninformed") }}</span>
   </p>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
-@Component
-export default class InstanceContactLink extends Vue {
-  @Prop({ required: true, type: String }) contact!: string;
+const props = defineProps<{
+  contact?: string;
+}>();
 
-  get configLink(): { uri: string; text: string } | null {
-    if (!this.contact) return null;
-    if (this.isContactEmail) {
-      return {
-        uri: `mailto:${this.contact}`,
-        text: this.contact,
-      };
-    }
-    if (this.isContactURL) {
-      return {
-        uri: this.contact,
-        text:
-          InstanceContactLink.urlToHostname(this.contact) ||
-          (this.$t("Contact") as string),
-      };
-    }
+const { t } = useI18n({ useScope: "global" });
+
+const configLink = computed((): { uri: string; text: string } | null => {
+  if (!props.contact) return null;
+  if (isContactEmail.value) {
+    return {
+      uri: `mailto:${props.contact}`,
+      text: props.contact,
+    };
+  }
+  if (isContactURL.value) {
+    return {
+      uri: props.contact,
+      text: urlToHostname(props.contact) ?? "Contact",
+    };
+  }
+  return null;
+});
+
+const isContactEmail = computed((): boolean => {
+  return (props.contact ?? "").includes("@");
+});
+
+const isContactURL = computed((): boolean => {
+  return (props.contact ?? "").match(/^https?:\/\//g) !== null;
+});
+
+const urlToHostname = (url: string): string | null => {
+  try {
+    return new URL(url).hostname;
+  } catch (e) {
     return null;
   }
-
-  get isContactEmail(): boolean {
-    return this.contact.includes("@");
-  }
-
-  get isContactURL(): boolean {
-    return this.contact.match(/^https?:\/\//g) !== null;
-  }
-
-  static urlToHostname(url: string): string | null {
-    try {
-      return new URL(url).hostname;
-    } catch (e) {
-      return null;
-    }
-  }
-}
+};
 </script>
diff --git a/js/src/components/Account/ActorCard.story.vue b/js/src/components/Account/ActorCard.story.vue
new file mode 100644
index 000000000..462de9758
--- /dev/null
+++ b/js/src/components/Account/ActorCard.story.vue
@@ -0,0 +1,52 @@
+<template>
+  <Story>
+    <Variant title="local">
+      <ActorCard :actor="stateLocal"></ActorCard>
+      <template #controls>
+        <HstText v-model="stateLocal.preferredUsername" title="username" />
+        <HstText v-model="stateLocal.name" title="Name" />
+      </template>
+    </Variant>
+    <Variant title="remote">
+      <ActorCard :actor="stateRemote"></ActorCard>
+      <template #controls>
+        <HstText v-model="stateRemote.preferredUsername" title="username" />
+        <HstText v-model="stateRemote.name" title="Name" />
+        <HstText v-model="stateRemote.domain" title="Domain" />
+        <HstText v-model="avatarUrl" title="Avatar" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import ActorCard from "./ActorCard.vue";
+import { reactive, ref } from "vue";
+import { IActor } from "@/types/actor";
+import { ActorType } from "@/types/enums";
+
+const avatarUrl = ref<string>(
+  "https://framapiaf.s3.framasoft.org/framapiaf/accounts/avatars/000/000/399/original/aa56a445efb72803.jpg"
+);
+
+const stateLocal = reactive<IActor>({
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: null,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+
+const stateRemote = reactive<IActor>({
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  avatar: { url: avatarUrl.value, id: "", name: "", alt: "", metadata: {} },
+  domain: "framapiaf.org",
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+</script>
diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue
index 62eb1a70a..4ae3e256f 100644
--- a/js/src/components/Account/ActorCard.vue
+++ b/js/src/components/Account/ActorCard.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="bg-white rounded-lg flex space-x-4 items-center"
+    class="bg-white dark:bg-mbz-purple rounded-lg flex space-x-4 items-center"
     :class="{ 'flex-col p-4 shadow-md sm:p-8 pb-10 w-80': !inline }"
   >
-    <div>
+    <div class="flex pl-2">
       <figure class="w-12 h-12" v-if="actor.avatar">
         <img
           class="rounded-lg"
@@ -13,20 +13,19 @@
           height="48"
         />
       </figure>
-      <b-icon
+      <AccountCircle
         v-else
-        :size="inline ? 'is-medium' : 'is-large'"
-        icon="account-circle"
+        :size="inline ? 24 : 48"
         class="ltr:-mr-0.5 rtl:-ml-0.5"
       />
     </div>
     <div :class="{ 'text-center': !inline }" class="overflow-hidden w-full">
       <h5
-        class="text-xl font-medium violet-title tracking-tight text-gray-900 whitespace-pre-line line-clamp-2"
+        class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-gray-200 whitespace-pre-line line-clamp-2"
       >
         {{ displayName(actor) }}
       </h5>
-      <p class="text-gray-500 truncate" v-if="actor.name">
+      <p class="text-gray-500 dark:text-gray-200 truncate" v-if="actor.name">
         <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
       </p>
       <div
@@ -54,9 +53,9 @@
           height="48"
         />
       </figure>
-      <b-icon
+      <o-icon
         v-else
-        size="is-large"
+        size="large"
         icon="account-circle"
         class="ltr:-mr-0.5 rtl:-ml-0.5"
       />
@@ -78,29 +77,28 @@
     </div>
   </div> -->
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+<script lang="ts" setup>
 import { displayName, IActor, usernameWithDomain } from "../../types/actor";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 
-@Component
-export default class ActorCard extends Vue {
-  @Prop({ required: true, type: Object }) actor!: IActor;
-
-  @Prop({ required: false, type: Boolean, default: false }) full!: boolean;
-
-  @Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
-
-  @Prop({ required: false, type: Boolean, default: false }) popover!: boolean;
-
-  @Prop({ required: false, type: Boolean, default: true }) limit!: boolean;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-}
+withDefaults(
+  defineProps<{
+    actor: IActor;
+    full?: boolean;
+    inline?: boolean;
+    popover?: boolean;
+    limit?: boolean;
+  }>(),
+  {
+    full: false,
+    inline: false,
+    popover: false,
+    limit: true,
+  }
+);
 </script>
 <style scoped>
-.only-first-child ::v-deep :not(:first-child) {
+.only-first-child :deep(:not(:first-child)) {
   display: none;
 }
 </style>
diff --git a/js/src/components/Account/ActorInline.story.vue b/js/src/components/Account/ActorInline.story.vue
new file mode 100644
index 000000000..40195eb80
--- /dev/null
+++ b/js/src/components/Account/ActorInline.story.vue
@@ -0,0 +1,52 @@
+<template>
+  <Story>
+    <Variant title="local">
+      <ActorInline :actor="stateLocal" />
+      <template #controls>
+        <HstText v-model="stateLocal.preferredUsername" title="username" />
+        <HstText v-model="stateLocal.name" title="Name" />
+      </template>
+    </Variant>
+    <Variant title="remote">
+      <ActorInline :actor="stateRemote" />
+      <template #controls>
+        <HstText v-model="stateRemote.preferredUsername" title="username" />
+        <HstText v-model="stateRemote.name" title="Name" />
+        <HstText v-model="stateRemote.domain" title="Domain" />
+        <HstText v-model="avatarUrl" title="Avatar" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import ActorInline from "./ActorInline.vue";
+import { reactive, ref } from "vue";
+import { IActor } from "@/types/actor";
+import { ActorType } from "@/types/enums";
+
+const avatarUrl = ref<string>(
+  "https://framapiaf.s3.framasoft.org/framapiaf/accounts/avatars/000/000/399/original/aa56a445efb72803.jpg"
+);
+
+const stateLocal = reactive<IActor>({
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: null,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+
+const stateRemote = reactive<IActor>({
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  avatar: { url: avatarUrl.value, id: "", name: "", alt: "", metadata: {} },
+  domain: "framapiaf.org",
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+});
+</script>
diff --git a/js/src/components/Account/ActorInline.vue b/js/src/components/Account/ActorInline.vue
index 4857b8607..a6e712a84 100644
--- a/js/src/components/Account/ActorInline.vue
+++ b/js/src/components/Account/ActorInline.vue
@@ -1,34 +1,37 @@
 <template>
-  <div class="inline-flex items-start">
+  <div
+    class="inline-flex items-start bg-white dark:bg-violet-1 dark:text-white p-2 rounded-md"
+  >
     <div class="flex-none mr-2">
-      <figure class="image is-48x48" v-if="actor.avatar">
-        <img class="is-rounded" :src="actor.avatar.url" alt="" />
+      <figure v-if="actor.avatar">
+        <img
+          class="rounded-xl"
+          :src="actor.avatar.url"
+          alt=""
+          width="36"
+          height="36"
+        />
       </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <AccountCircle :size="36" v-else />
     </div>
 
     <div class="flex-auto">
-      <p class="text-base line-clamp-3 md:line-clamp-2 max-w-xl">
+      <p class="text-lg line-clamp-3 md:line-clamp-2 max-w-xl">
         {{ displayName(actor) }}
       </p>
-      <p class="text-sm text-gray-500 truncate">
+      <p class="text-sm text-gray-500 dark:text-gray-300 truncate">
         @{{ usernameWithDomain(actor) }}
       </p>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+<script lang="ts" setup>
 import { displayName, IActor, usernameWithDomain } from "../../types/actor";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 
-@Component
-export default class ActorInline extends Vue {
-  @Prop({ required: true, type: Object }) actor!: IActor;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-}
+defineProps<{
+  actor: IActor;
+}>();
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
@@ -42,7 +45,7 @@ div.actor-inline {
     flex-basis: auto;
     flex-grow: 0;
     flex-shrink: 0;
-    @include margin-right(0.5rem);
+    // @include margin-right(0.5rem);
   }
   div.actor-name {
     flex-basis: auto;
diff --git a/js/src/components/Account/Identities.vue b/js/src/components/Account/Identities.vue
deleted file mode 100644
index 8d9d76e51..000000000
--- a/js/src/components/Account/Identities.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <section>
-    <h1 class="title">
-      {{ $t("My identities") }}
-    </h1>
-
-    <ul class="identities">
-      <li v-for="identity in identities" :key="identity.id">
-        <router-link
-          :to="{
-            name: 'UpdateIdentity',
-            params: { identityName: identity.preferredUsername },
-          }"
-          class="media identity"
-          v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
-        >
-          <div class="media-left">
-            <figure class="image is-48x48" v-if="identity.avatar">
-              <img class="is-rounded" :src="identity.avatar.url" />
-            </figure>
-          </div>
-
-          <div class="media-content">
-            {{ identity.displayName() }}
-          </div>
-        </router-link>
-      </li>
-    </ul>
-
-    <router-link
-      :to="{ name: 'CreateIdentity' }"
-      class="button create-identity is-primary"
-    >
-      {{ $t("Create a new identity") }}
-    </router-link>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { IDENTITIES } from "../../graphql/actor";
-import { IPerson, Person } from "../../types/actor";
-
-@Component({
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-
-      update(result) {
-        return result.identities.map((i: IPerson) => new Person(i));
-      },
-    },
-  },
-})
-export default class Identities extends Vue {
-  @Prop({ type: String }) currentIdentityName!: string;
-
-  identities: Person[] = [];
-
-  errors: string[] = [];
-
-  isCurrentIdentity(identity: IPerson): boolean {
-    return identity.preferredUsername === this.currentIdentityName;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.identities {
-  border-right: 1px solid grey;
-
-  padding: 15px 0;
-}
-
-.media.identity {
-  align-items: center;
-  font-size: 1.3rem;
-  padding-bottom: 0;
-  margin-bottom: 15px;
-  color: #000;
-
-  &.is-current-identity {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-}
-
-.title {
-  margin-bottom: 30px;
-}
-</style>
diff --git a/js/src/components/Account/PopoverActorCard.story.vue b/js/src/components/Account/PopoverActorCard.story.vue
new file mode 100644
index 000000000..4f06faf1c
--- /dev/null
+++ b/js/src/components/Account/PopoverActorCard.story.vue
@@ -0,0 +1,59 @@
+<template>
+  <Story>
+    <Variant :setup-app="setupApp" title="Person">
+      <div class="p-5">
+        <PopoverActorCard :actor="baseActor">
+          <div><b> Popover me !</b></div></PopoverActorCard
+        >
+      </div>
+    </Variant>
+    <Variant :setup-app="setupApp" title="Group">
+      <div class="p-5">
+        <PopoverActorCard :actor="group">
+          <div><b> Popover me !</b></div></PopoverActorCard
+        >
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import PopoverActorCard from "./PopoverActorCard.vue";
+import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css";
+import { ActorType } from "@/types/enums";
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+
+const group = {
+  ...baseActor,
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  domain: "mobilizon.fr",
+  avatar: {
+    ...baseActorAvatar,
+    url: "https://framapiaf.s3.framasoft.org/framapiaf/accounts/avatars/000/000/399/original/aa56a445efb72803.jpg",
+  },
+};
+
+function setupApp({ app }) {
+  app.use(FloatingVue);
+}
+</script>
diff --git a/js/src/components/Account/PopoverActorCard.vue b/js/src/components/Account/PopoverActorCard.vue
index 4f75672b8..b649075e2 100644
--- a/js/src/components/Account/PopoverActorCard.vue
+++ b/js/src/components/Account/PopoverActorCard.vue
@@ -1,44 +1,28 @@
 <template>
-  <v-popover
-    offset="16"
-    trigger="hover"
+  <VMenu
+    :distance="16"
+    :triggers="['hover']"
     class="popover"
     :class="{ inline, clickable: actor && actor.type === ActorType.GROUP }"
   >
     <slot></slot>
-    <template slot="popover">
+    <template #popper>
       <actor-card :full="true" :actor="actor" :popover="true" />
     </template>
-  </v-popover>
+  </VMenu>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { ActorType } from "@/types/enums";
-import { Component, Vue, Prop } from "vue-property-decorator";
 import { IActor } from "../../types/actor";
 import ActorCard from "./ActorCard.vue";
 
-@Component({
-  components: {
-    ActorCard,
-  },
-})
-export default class PopoverActorCard extends Vue {
-  @Prop({ required: true, type: Object }) actor!: IActor;
-
-  @Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
-
-  ActorType = ActorType;
-}
+withDefaults(
+  defineProps<{
+    actor: IActor;
+    inline?: boolean;
+  }>(),
+  {
+    inline: false,
+  }
+);
 </script>
-
-<style lang="scss" scoped>
-.inline {
-  display: inline;
-}
-.popover {
-  cursor: default;
-}
-.clickable {
-  cursor: pointer;
-}
-</style>
diff --git a/js/src/components/Account/ProfileOnboarding.story.vue b/js/src/components/Account/ProfileOnboarding.story.vue
new file mode 100644
index 000000000..604b118e1
--- /dev/null
+++ b/js/src/components/Account/ProfileOnboarding.story.vue
@@ -0,0 +1,29 @@
+<template>
+  <Story>
+    <Variant>
+      <div class="p-5">
+        <ProfileOnboarding
+          :current-actor="baseActor"
+          instance-name="Instance name"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import ProfileOnboarding from "./ProfileOnboarding.vue";
+import { ActorType } from "@/types/enums";
+import { IPerson } from "@/types/actor";
+
+const baseActor: IPerson = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: null,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+</script>
diff --git a/js/src/components/Account/ProfileOnboarding.vue b/js/src/components/Account/ProfileOnboarding.vue
index bba073384..89908b5e9 100644
--- a/js/src/components/Account/ProfileOnboarding.vue
+++ b/js/src/components/Account/ProfileOnboarding.vue
@@ -1,71 +1,60 @@
 <template>
-  <div class="section container">
-    <div class="setting-title">
-      <h2>{{ $t("Profiles and federation") }}</h2>
-    </div>
-    <div>
-      <p class="content">
-        {{
-          $t(
-            "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want."
-          )
-        }}
-      </p>
-      <hr role="presentation" />
-      <p class="content">
-        <span>
-          {{
-            $t(
-              "Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere."
-            )
-          }}
-        </span>
-        <span
-          v-if="config"
-          v-html="
-            $t(
-              'This instance, <b>{instanceName} ({domain})</b>, hosts your profile, so remember its name.',
-              {
-                domain,
-                instanceName: config.name,
-              }
-            )
-          "
-        />
-      </p>
-      <hr role="presentation" />
-      <p class="content">
-        {{
-          $t(
-            "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:"
-          )
-        }}
-      </p>
-      <div class="has-text-centered">
-        <code>{{ `${currentActor.preferredUsername}@${domain}` }}</code>
-      </div>
-    </div>
+  <div class="">
+    <h2 class="text-2xl">{{ t("Profiles and federation") }}</h2>
+  </div>
+  <p class="my-2">
+    {{
+      t(
+        "Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want."
+      )
+    }}
+  </p>
+  <hr role="presentation" />
+  <p class="my-2">
+    <span>
+      {{
+        t(
+          "Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere."
+        )
+      }}
+    </span>
+    <i18n-t
+      keypath="This instance, {instanceName}, hosts your profile, so remember its name."
+    >
+      <template #instanceName>
+        <b>{{
+          t("{instanceName} ({domain})", {
+            domain,
+            instanceName,
+          })
+        }}</b>
+      </template>
+    </i18n-t>
+  </p>
+  <hr role="presentation" />
+  <p class="my-2">
+    {{
+      t(
+        "If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:"
+      )
+    }}
+  </p>
+  <div class="text-center">
+    <code>{{ `${currentActor?.preferredUsername}@${domain}` }}</code>
   </div>
 </template>
 
-<script lang="ts">
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { CONFIG } from "@/graphql/config";
+<script lang="ts" setup>
 import { IPerson } from "@/types/actor";
-import { IConfig } from "@/types/config.model";
-import { Component, Vue } from "vue-property-decorator";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  apollo: {
-    config: CONFIG,
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-})
-export default class ProfileOnboarding extends Vue {
-  config!: IConfig;
+defineProps<{
+  currentActor: IPerson;
+  instanceName: string;
+}>();
 
-  currentActor!: IPerson;
+const { t } = useI18n({ useScope: "global" });
 
-  domain = window.location.hostname;
-}
+const domain = computed(() => window.location.hostname);
 </script>
diff --git a/js/src/components/Activity/DiscussionActivityItem.vue b/js/src/components/Activity/DiscussionActivityItem.vue
index 036ef128f..bc19ca904 100644
--- a/js/src/components/Activity/DiscussionActivityItem.vue
+++ b/js/src/components/Activity/DiscussionActivityItem.vue
@@ -1,118 +1,117 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'chat'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          v-if="activity.object"
-          slot="discussion"
-          :to="{
-            name: RouteName.DISCUSSION,
-            params: { slug: subjectParams.discussion_slug },
-          }"
-          >{{ subjectParams.discussion_title }}</router-link
-        >
-        <b v-else slot="discussion">{{ subjectParams.discussion_title }}</b>
-        <router-link
-          v-if="activity.object && subjectParams.old_discussion_title"
-          slot="old_discussion"
-          :to="{
-            name: RouteName.DISCUSSION,
-            params: { slug: subjectParams.discussion_slug },
-          }"
-          >{{ subjectParams.old_discussion_title }}</router-link
-        >
-        <b
-          v-else-if="subjectParams.old_discussion_title"
-          slot="old_discussion"
-          >{{ subjectParams.old_discussion_title }}</b
-        >
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
+    <o-icon :icon="'chat'" :variant="iconColor" custom-size="24" />
+    <div class="mt-1 ml-2 prose dark:prose-invert prose-p:m-0">
+      <i18n-t :keypath="translation" tag="p">
+        <template #discussion>
+          <router-link
+            v-if="activity.object"
+            :to="{
+              name: RouteName.DISCUSSION,
+              params: { slug: subjectParams.discussion_slug },
+            }"
+            >{{ subjectParams.discussion_title }}</router-link
+          >
+          <b v-else>{{ subjectParams.discussion_title }}</b>
+        </template>
+        <template #old_discussion>
+          <router-link
+            v-if="activity.object && subjectParams.old_discussion_title"
+            :to="{
+              name: RouteName.DISCUSSION,
+              params: { slug: subjectParams.discussion_slug },
+            }"
+            >{{ subjectParams.old_discussion_title }}</router-link
+          >
+          <b v-else-if="subjectParams.old_discussion_title">{{
+            subjectParams.old_discussion_title
+          }}</b>
+        </template>
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b>
+              {{
+                $t("{'@'}{username}", {
+                  username: usernameWithDomain(activity.author),
+                })
+              }}</b
+            ></popover-actor-card
+          ></template
+        ></i18n-t
       >
       <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
+        formatTimeString(activity.insertedAt)
       }}</small>
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { usernameWithDomain } from "@/types/actor";
 import { ActivityDiscussionSubject } from "@/types/enums";
-import { Component } from "vue-property-decorator";
 import RouteName from "../../router/name";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
+import { IActivity } from "@/types/activity.model";
+import { computed } from "vue";
+import { formatTimeString } from "@/filters/datetime";
+import {
+  useActivitySubjectParams,
+  useIsActivityAuthorCurrentActor,
+} from "@/composition/activity";
 
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class DiscussionActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-  ActivityDiscussionSubject = ActivityDiscussionSubject;
+const props = defineProps<{
+  activity: IActivity;
+}>();
 
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityDiscussionSubject.DISCUSSION_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the discussion {discussion}.";
-        }
-        return "{profile} created the discussion {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_REPLIED:
-        if (this.isAuthorCurrentActor) {
-          return "You replied to the discussion {discussion}.";
-        }
-        return "{profile} replied to the discussion {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_RENAMED:
-        if (this.isAuthorCurrentActor) {
-          return "You renamed the discussion from {old_discussion} to {discussion}.";
-        }
-        return "{profile} renamed the discussion from {old_discussion} to {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
-        if (this.isAuthorCurrentActor) {
-          return "You archived the discussion {discussion}.";
-        }
-        return "{profile} archived the discussion {discussion}.";
-      case ActivityDiscussionSubject.DISCUSSION_DELETED:
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the discussion {discussion}.";
-        }
-        return "{profile} deleted the discussion {discussion}.";
-      default:
-        return undefined;
-    }
+const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+
+const subjectParams = useActivitySubjectParams()(props.activity);
+
+const translation = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityDiscussionSubject.DISCUSSION_CREATED:
+      if (isAuthorCurrentActor) {
+        return "You created the discussion {discussion}.";
+      }
+      return "{profile} created the discussion {discussion}.";
+    case ActivityDiscussionSubject.DISCUSSION_REPLIED:
+      if (isAuthorCurrentActor) {
+        return "You replied to the discussion {discussion}.";
+      }
+      return "{profile} replied to the discussion {discussion}.";
+    case ActivityDiscussionSubject.DISCUSSION_RENAMED:
+      if (isAuthorCurrentActor) {
+        return "You renamed the discussion from {old_discussion} to {discussion}.";
+      }
+      return "{profile} renamed the discussion from {old_discussion} to {discussion}.";
+    case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
+      if (isAuthorCurrentActor) {
+        return "You archived the discussion {discussion}.";
+      }
+      return "{profile} archived the discussion {discussion}.";
+    case ActivityDiscussionSubject.DISCUSSION_DELETED:
+      if (isAuthorCurrentActor) {
+        return "You deleted the discussion {discussion}.";
+      }
+      return "{profile} deleted the discussion {discussion}.";
+    default:
+      return undefined;
   }
+});
 
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityDiscussionSubject.DISCUSSION_CREATED:
-      case ActivityDiscussionSubject.DISCUSSION_REPLIED:
-        return "is-success";
-      case ActivityDiscussionSubject.DISCUSSION_RENAMED:
-      case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
-        return "is-grey";
-      case ActivityDiscussionSubject.DISCUSSION_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
+const iconColor = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityDiscussionSubject.DISCUSSION_CREATED:
+    case ActivityDiscussionSubject.DISCUSSION_REPLIED:
+      return "success";
+    case ActivityDiscussionSubject.DISCUSSION_RENAMED:
+    case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
+      return "grey";
+    case ActivityDiscussionSubject.DISCUSSION_DELETED:
+      return "danger";
+    default:
+      return undefined;
   }
-}
+});
 </script>
 <style lang="scss" scoped>
 @import "./activity.scss";
diff --git a/js/src/components/Activity/EventActivityItem.vue b/js/src/components/Activity/EventActivityItem.vue
index 8fd38305a..184884f27 100644
--- a/js/src/components/Activity/EventActivityItem.vue
+++ b/js/src/components/Activity/EventActivityItem.vue
@@ -1,107 +1,107 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'calendar'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          slot="event"
-          v-if="activity.object"
-          :to="{
-            name: RouteName.EVENT,
-            params: { uuid: subjectParams.event_uuid },
-          }"
-          >{{ subjectParams.event_title }}</router-link
-        >
-        <b v-else slot="event">{{ subjectParams.event_title }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
+    <o-icon :icon="'calendar'" :variant="iconColor" custom-size="24" />
+    <div class="mt-1 ml-2 prose dark:prose-invert prose-p:m-0">
+      <i18n-t :keypath="translation" tag="p">
+        <template #event>
+          <router-link
+            v-if="activity.object"
+            :to="{
+              name: RouteName.EVENT,
+              params: { uuid: subjectParams.event_uuid },
+            }"
+            >{{ subjectParams.event_title }}</router-link
+          >
+          <b v-else>{{ subjectParams.event_title }}</b>
+        </template>
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b>
+              {{
+                $t("{'@'}{username}", {
+                  username: usernameWithDomain(activity.author),
+                })
+              }}</b
+            ></popover-actor-card
+          ></template
+        ></i18n-t
       >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
+      <small class="activity-date">{{
+        formatTimeString(activity.insertedAt)
       }}</small>
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
+import {
+  useActivitySubjectParams,
+  useIsActivityAuthorCurrentActor,
+} from "@/composition/activity";
+import { IActivity } from "@/types/activity.model";
 import { usernameWithDomain } from "@/types/actor";
+import { formatTimeString } from "@/filters/datetime";
 import {
   ActivityEventCommentSubject,
   ActivityEventSubject,
 } from "@/types/enums";
-import { mixins } from "vue-class-component";
-import { Component } from "vue-property-decorator";
+import { computed } from "vue";
 import RouteName from "../../router/name";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
 
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class EventActivityItem extends mixins(ActivityMixin) {
-  ActivityEventSubject = ActivityEventSubject;
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
+const props = defineProps<{
+  activity: IActivity;
+}>();
 
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityEventSubject.EVENT_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the event {event}.";
+const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+
+const subjectParams = useActivitySubjectParams()(props.activity);
+
+const translation = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityEventSubject.EVENT_CREATED:
+      if (isAuthorCurrentActor) {
+        return "You created the event {event}.";
+      }
+      return "The event {event} was created by {profile}.";
+    case ActivityEventSubject.EVENT_UPDATED:
+      if (isAuthorCurrentActor) {
+        return "You updated the event {event}.";
+      }
+      return "The event {event} was updated by {profile}.";
+    case ActivityEventSubject.EVENT_DELETED:
+      if (isAuthorCurrentActor) {
+        return "You deleted the event {event}.";
+      }
+      return "The event {event} was deleted by {profile}.";
+    case ActivityEventCommentSubject.COMMENT_POSTED:
+      if (subjectParams.comment_reply_to) {
+        if (isAuthorCurrentActor) {
+          return "You replied to a comment on the event {event}.";
         }
-        return "The event {event} was created by {profile}.";
-      case ActivityEventSubject.EVENT_UPDATED:
-        if (this.isAuthorCurrentActor) {
-          return "You updated the event {event}.";
-        }
-        return "The event {event} was updated by {profile}.";
-      case ActivityEventSubject.EVENT_DELETED:
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the event {event}.";
-        }
-        return "The event {event} was deleted by {profile}.";
-      case ActivityEventCommentSubject.COMMENT_POSTED:
-        if (this.subjectParams.comment_reply_to) {
-          if (this.isAuthorCurrentActor) {
-            return "You replied to a comment on the event {event}.";
-          }
-          return "{profile} replied to a comment on the event {event}.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You posted a comment on the event {event}.";
-        }
-        return "{profile} posted a comment on the event {event}.";
-      default:
-        return undefined;
-    }
+        return "{profile} replied to a comment on the event {event}.";
+      }
+      if (isAuthorCurrentActor) {
+        return "You posted a comment on the event {event}.";
+      }
+      return "{profile} posted a comment on the event {event}.";
+    default:
+      return undefined;
   }
+});
 
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityEventSubject.EVENT_CREATED:
-      case ActivityEventCommentSubject.COMMENT_POSTED:
-        return "is-success";
-      case ActivityEventSubject.EVENT_UPDATED:
-        return "is-grey";
-      case ActivityEventSubject.EVENT_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
+const iconColor = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityEventSubject.EVENT_CREATED:
+    case ActivityEventCommentSubject.COMMENT_POSTED:
+      return "success";
+    case ActivityEventSubject.EVENT_UPDATED:
+      return "grey";
+    case ActivityEventSubject.EVENT_DELETED:
+      return "danger";
+    default:
+      return undefined;
   }
-}
+});
 </script>
 <style lang="scss" scoped>
 @import "./activity.scss";
diff --git a/js/src/components/Activity/GroupActivityItem.vue b/js/src/components/Activity/GroupActivityItem.vue
index 1b879a6aa..d76458a90 100644
--- a/js/src/components/Activity/GroupActivityItem.vue
+++ b/js/src/components/Activity/GroupActivityItem.vue
@@ -1,189 +1,168 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'cog'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          v-if="activity.object"
-          slot="group"
-          :to="{
-            name: RouteName.GROUP,
-            params: {
-              preferredUsername: subjectParams.group_federated_username,
-            },
-          }"
-          >{{ subjectParams.group_name }}</router-link
-        >
-        <b v-else slot="post">{{ subjectParams.group_name }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
+    <o-icon :icon="'cog'" :variant="iconColor" custom-size="24" />
+    <div class="mt-1 ml-2 prose dark:prose-invert prose-p:m-0">
+      <i18n-t :keypath="translation" tag="p">
+        <template #group>
+          <router-link
+            v-if="activity.object"
+            :to="{
+              name: RouteName.GROUP,
+              params: {
+                preferredUsername: subjectParams.group_federated_username,
+              },
+            }"
+            >{{ subjectParams.group_name }}</router-link
+          >
+          <b v-else>{{ subjectParams.group_name }}</b>
+        </template>
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b>
+              {{
+                $t("{'@'}{username}", {
+                  username: usernameWithDomain(activity.author),
+                })
+              }}</b
+            ></popover-actor-card
+          ></template
+        ></i18n-t
       >
-      <i18n
-        :path="detail"
-        v-for="detail in details"
-        :key="detail"
-        tag="p"
-        class="has-text-grey-dark"
-      >
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        >
-        <router-link
-          v-if="activity.object"
-          slot="group"
-          :to="{
+      <i18n-t :keypath="detail" v-for="detail in details" :key="detail" tag="p">
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b>
+              {{
+                $t("{'@'}{username}", {
+                  username: usernameWithDomain(activity.author),
+                })
+              }}</b
+            ></popover-actor-card
+          >
+        </template>
+        <template #group>
+          <router-link
+            v-if="activity.object"
+            :to="{
             name: RouteName.GROUP,
-            params: { preferredUsername: usernameWithDomain(activity.object) },
+            params: { preferredUsername: usernameWithDomain(activity.object as IActor) },
           }"
-          >{{ subjectParams.group_name }}</router-link
-        >
-        <b v-else slot="post">{{ subjectParams.group_name }}</b>
-        <b v-if="subjectParams.old_group_name" slot="old_group_name">{{
-          subjectParams.old_group_name
-        }}</b>
-      </i18n>
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
-      }}</small>
+            >{{ subjectParams.group_name }}</router-link
+          >
+          <b v-else>{{ subjectParams.group_name }}</b>
+        </template>
+        <template #old_group_name>
+          <b v-if="subjectParams.old_group_name">{{
+            subjectParams.old_group_name
+          }}</b>
+        </template>
+      </i18n-t>
+      <small>{{ formatTimeString(activity.insertedAt) }}</small>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
+<script lang="ts" setup>
+import {
+  useIsActivityAuthorCurrentActor,
+  useActivitySubjectParams,
+} from "@/composition/activity";
+import { IActivity } from "@/types/activity.model";
+import { IActor, IGroup, usernameWithDomain } from "@/types/actor";
 import { ActivityGroupSubject, GroupVisibility, Openness } from "@/types/enums";
-import { Component } from "vue-property-decorator";
+import { computed } from "vue";
 import RouteName from "../../router/name";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
+import { formatTimeString } from "@/filters/datetime";
 
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class GroupActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-  ActivityGroupSubject = ActivityGroupSubject;
+const props = defineProps<{
+  activity: IActivity;
+}>();
 
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityGroupSubject.GROUP_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the group {group}.";
-        }
-        return "{profile} created the group {group}.";
-      case ActivityGroupSubject.GROUP_UPDATED:
-        if (this.isAuthorCurrentActor) {
-          return "You updated the group {group}.";
-        }
-        return "{profile} updated the group {group}.";
-      default:
-        return undefined;
-    }
-  }
+const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
 
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityGroupSubject.GROUP_CREATED:
-        return "is-success";
-      case ActivityGroupSubject.GROUP_UPDATED:
-        return "is-grey";
-      default:
-        return undefined;
-    }
-  }
+const subjectParams = useActivitySubjectParams()(props.activity);
 
-  get details(): string[] {
-    const details = [];
-    const changes = this.subjectParams.group_changes.split(",");
-    if (changes.includes("name") && this.subjectParams.old_group_name) {
-      details.push("{old_group_name} was renamed to {group}.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("visibility") && this.activity.object.visibility) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      switch (this.activity.object.visibility) {
-        case GroupVisibility.PRIVATE:
-          details.push("Visibility was set to private.");
-          break;
-        case GroupVisibility.PUBLIC:
-          details.push("Visibility was set to public.");
-          break;
-        default:
-          details.push("Visibility was set to an unknown value.");
-          break;
+const translation = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityGroupSubject.GROUP_CREATED:
+      if (isAuthorCurrentActor) {
+        return "You created the group {group}.";
       }
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("openness") && this.activity.object.openness) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      switch (this.activity.object.openness) {
-        case Openness.INVITE_ONLY:
-          details.push("The group can now only be joined with an invite.");
-          break;
-        case Openness.MODERATED:
-          details.push(
-            "The group can now be joined by anyone, but new members need to be approved by an administrator."
-          );
-          break;
-        case Openness.OPEN:
-          details.push("The group can now be joined by anyone.");
-          break;
-        default:
-          details.push("Unknown value for the openness setting.");
-          break;
+      return "{profile} created the group {group}.";
+    case ActivityGroupSubject.GROUP_UPDATED:
+      if (isAuthorCurrentActor) {
+        return "You updated the group {group}.";
       }
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("address") && this.activity.object.physicalAddress) {
-      details.push("The group's physical address was changed.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("avatar") && this.activity.object.avatar) {
-      details.push("The group's avatar was changed.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("banner") && this.activity.object.banner) {
-      details.push("The group's banner was changed.");
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (changes.includes("summary") && this.activity.object.summary) {
-      details.push("The group's short description was changed.");
-    }
-    return details;
+      return "{profile} updated the group {group}.";
+    default:
+      return undefined;
   }
-}
+});
+
+const iconColor = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityGroupSubject.GROUP_CREATED:
+      return "success";
+    case ActivityGroupSubject.GROUP_UPDATED:
+      return "grey";
+    default:
+      return undefined;
+  }
+});
+
+const group = computed(() => props.activity.object as IGroup);
+
+const details = computed((): string[] => {
+  const localDetails = [];
+  const changes = subjectParams.group_changes.split(",");
+  if (changes.includes("name") && subjectParams.old_group_name) {
+    localDetails.push("{old_group_name} was renamed to {group}.");
+  }
+  if (changes.includes("visibility") && group.value.visibility) {
+    switch (group.value.visibility) {
+      case GroupVisibility.PRIVATE:
+        localDetails.push("Visibility was set to private.");
+        break;
+      case GroupVisibility.PUBLIC:
+        localDetails.push("Visibility was set to public.");
+        break;
+      default:
+        localDetails.push("Visibility was set to an unknown value.");
+        break;
+    }
+  }
+  if (changes.includes("openness") && group.value.openness) {
+    switch (group.value.openness) {
+      case Openness.INVITE_ONLY:
+        localDetails.push("The group can now only be joined with an invite.");
+        break;
+      case Openness.MODERATED:
+        localDetails.push(
+          "The group can now be joined by anyone, but new members need to be approved by an administrator."
+        );
+        break;
+      case Openness.OPEN:
+        localDetails.push("The group can now be joined by anyone.");
+        break;
+      default:
+        localDetails.push("Unknown value for the openness setting.");
+        break;
+    }
+  }
+  if (changes.includes("address") && group.value.physicalAddress) {
+    localDetails.push("The group's physical address was changed.");
+  }
+  if (changes.includes("avatar") && group.value.avatar) {
+    localDetails.push("The group's avatar was changed.");
+  }
+  if (changes.includes("banner") && group.value.banner) {
+    localDetails.push("The group's banner was changed.");
+  }
+  if (changes.includes("summary") && group.value.summary) {
+    localDetails.push("The group's short description was changed.");
+  }
+  return localDetails;
+});
 </script>
 <style lang="scss" scoped>
 @import "./activity.scss";
diff --git a/js/src/components/Activity/MemberActivityItem.vue b/js/src/components/Activity/MemberActivityItem.vue
index d927438b6..275261cf5 100644
--- a/js/src/components/Activity/MemberActivityItem.vue
+++ b/js/src/components/Activity/MemberActivityItem.vue
@@ -1,236 +1,232 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="icon" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <popover-actor-card
-          v-if="activity.object"
-          :actor="activity.object.actor"
-          :inline="true"
-          slot="member"
-        >
-          <b> {{ displayName(activity.object.actor) }}</b></popover-actor-card
-        >
-        <b slot="member" v-else>{{
-          subjectParams.member_actor_federated_username
-        }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b> {{ displayName(activity.author) }}</b></popover-actor-card
-        ></i18n
+    <o-icon :icon="icon" :variant="iconColor" custom-size="24" />
+    <div class="mt-1 ml-2 prose dark:prose-invert prose-p:m-0">
+      <i18n-t :keypath="translation" tag="p">
+        <template #member>
+          <popover-actor-card
+            v-if="member"
+            :actor="member.actor"
+            :inline="true"
+          >
+            <b> {{ displayName(member.actor) }}</b></popover-actor-card
+          >
+          <b v-else>{{ subjectParams.member_actor_federated_username }}</b>
+        </template>
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b> {{ displayName(activity.author) }}</b></popover-actor-card
+          ></template
+        ></i18n-t
       >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
+      <small class="activity-date">{{
+        formatTimeString(activity.insertedAt)
       }}</small>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { displayName } from "@/types/actor";
-import { ActivityMemberSubject, MemberRole } from "@/types/enums";
-import { Component } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
-
 export const MEMBER_ROLE_VALUE: Record<string, number> = {
   [MemberRole.MEMBER]: 20,
   [MemberRole.MODERATOR]: 50,
   [MemberRole.ADMINISTRATOR]: 90,
   [MemberRole.CREATOR]: 100,
 };
+</script>
+<script lang="ts" setup>
+import { displayName } from "@/types/actor";
+import { ActivityMemberSubject, MemberRole } from "@/types/enums";
+import PopoverActorCard from "../Account/PopoverActorCard.vue";
+import { formatTimeString } from "@/filters/datetime";
+import {
+  useIsActivityAuthorCurrentActor,
+  useActivitySubjectParams,
+  useIsActivityObjectCurrentActor,
+} from "@/composition/activity";
+import { IActivity } from "@/types/activity.model";
+import { computed } from "vue";
+import { IMember } from "@/types/actor/member.model";
 
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class MemberActivityItem extends mixins(ActivityMixin) {
-  displayName = displayName;
-  RouteName = RouteName;
-  ActivityMemberSubject = ActivityMemberSubject;
+const props = defineProps<{
+  activity: IActivity;
+}>();
 
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityMemberSubject.MEMBER_REQUEST:
-        if (this.isAuthorCurrentActor) {
-          return "You requested to join the group.";
-        }
-        return "{member} requested to join the group.";
-      case ActivityMemberSubject.MEMBER_INVITED:
-        if (this.isAuthorCurrentActor) {
-          return "You invited {member}.";
-        }
-        return "{member} was invited by {profile}.";
-      case ActivityMemberSubject.MEMBER_ADDED:
-        if (this.isAuthorCurrentActor) {
-          return "You added the member {member}.";
-        }
-        return "{profile} added the member {member}.";
-      case ActivityMemberSubject.MEMBER_APPROVED:
-        if (this.isAuthorCurrentActor) {
-          return "You approved {member}'s membership.";
-        }
-        if (this.isObjectMemberCurrentActor) {
-          return "Your membership was approved by {profile}.";
-        }
-        return "{profile} approved {member}'s membership.";
-      case ActivityMemberSubject.MEMBER_JOINED:
-        return "{member} joined the group.";
-      case ActivityMemberSubject.MEMBER_UPDATED:
-        if (this.subjectParams.member_role && this.subjectParams.old_role) {
-          return this.roleUpdate;
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You updated the member {member}.";
-        }
-        return "{profile} updated the member {member}.";
-      case ActivityMemberSubject.MEMBER_REMOVED:
-        if (this.subjectParams.member_role === MemberRole.NOT_APPROVED) {
-          if (this.isAuthorCurrentActor) {
-            return "You rejected {member}'s membership request.";
-          }
-          return "{profile} rejected {member}'s membership request.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You excluded member {member}.";
-        }
-        return "{profile} excluded member {member}.";
-      case ActivityMemberSubject.MEMBER_QUIT:
-        return "{profile} quit the group.";
-      case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
-        return "{member} rejected the invitation to join the group.";
-      case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-        if (this.isAuthorCurrentActor) {
-          return "You accepted the invitation to join the group.";
-        }
-        return "{member} accepted the invitation to join the group.";
-      default:
-        return undefined;
-    }
-  }
+const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
 
-  get icon(): string {
-    switch (this.activity.subject) {
-      case ActivityMemberSubject.MEMBER_REQUEST:
-      case ActivityMemberSubject.MEMBER_ADDED:
-      case ActivityMemberSubject.MEMBER_INVITED:
-      case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-        return "account-multiple-plus";
-      case ActivityMemberSubject.MEMBER_REMOVED:
-      case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
-      case ActivityMemberSubject.MEMBER_QUIT:
-        return "account-multiple-minus";
-      case ActivityMemberSubject.MEMBER_UPDATED:
-      default:
-        return "account-multiple";
-    }
-  }
+const subjectParams = useActivitySubjectParams()(props.activity);
+const member = computed(() => props.activity.object as IMember);
 
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityMemberSubject.MEMBER_ADDED:
-      case ActivityMemberSubject.MEMBER_INVITED:
-      case ActivityMemberSubject.MEMBER_JOINED:
-      case ActivityMemberSubject.MEMBER_APPROVED:
-      case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-        return "is-success";
-      case ActivityMemberSubject.MEMBER_REQUEST:
-      case ActivityMemberSubject.MEMBER_UPDATED:
-        return "is-grey";
-      case ActivityMemberSubject.MEMBER_REMOVED:
-      case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
-      case ActivityMemberSubject.MEMBER_QUIT:
-        return "is-danger";
-      default:
-        return undefined;
-    }
-  }
+const isObjectMemberCurrentActor = useIsActivityObjectCurrentActor()(
+  props.activity
+);
 
-  get roleUpdate(): string | undefined {
-    if (
-      Object.keys(MEMBER_ROLE_VALUE).includes(this.subjectParams.member_role) &&
-      Object.keys(MEMBER_ROLE_VALUE).includes(this.subjectParams.old_role)
-    ) {
-      if (
-        MEMBER_ROLE_VALUE[this.subjectParams.member_role] >
-        MEMBER_ROLE_VALUE[this.subjectParams.old_role]
-      ) {
-        switch (this.subjectParams.member_role) {
-          case MemberRole.MODERATOR:
-            if (this.isAuthorCurrentActor) {
-              return "You promoted {member} to moderator.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were promoted to moderator by {profile}.";
-            }
-            return "{profile} promoted {member} to moderator.";
-          case MemberRole.ADMINISTRATOR:
-            if (this.isAuthorCurrentActor) {
-              return "You promoted {member} to administrator.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were promoted to administrator by {profile}.";
-            }
-            return "{profile} promoted {member} to administrator.";
-          default:
-            if (this.isAuthorCurrentActor) {
-              return "You promoted the member {member} to an unknown role.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were promoted to an unknown role by {profile}.";
-            }
-            return "{profile} promoted {member} to an unknown role.";
-        }
-      } else {
-        switch (this.subjectParams.member_role) {
-          case MemberRole.MODERATOR:
-            if (this.isAuthorCurrentActor) {
-              return "You demoted {member} to moderator.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were demoted to moderator by {profile}.";
-            }
-            return "{profile} demoted {member} to moderator.";
-          case MemberRole.MEMBER:
-            if (this.isAuthorCurrentActor) {
-              return "You demoted {member} to simple member.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were demoted to simple member by {profile}.";
-            }
-            return "{profile} demoted {member} to simple member.";
-          default:
-            if (this.isAuthorCurrentActor) {
-              return "You demoted the member {member} to an unknown role.";
-            }
-            if (this.isObjectMemberCurrentActor) {
-              return "You were demoted to an unknown role by {profile}.";
-            }
-            return "{profile} demoted {member} to an unknown role.";
-        }
+const translation = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityMemberSubject.MEMBER_REQUEST:
+      if (isAuthorCurrentActor) {
+        return "You requested to join the group.";
       }
-    } else {
-      if (this.isAuthorCurrentActor) {
+      return "{member} requested to join the group.";
+    case ActivityMemberSubject.MEMBER_INVITED:
+      if (isAuthorCurrentActor) {
+        return "You invited {member}.";
+      }
+      return "{member} was invited by {profile}.";
+    case ActivityMemberSubject.MEMBER_ADDED:
+      if (isAuthorCurrentActor) {
+        return "You added the member {member}.";
+      }
+      return "{profile} added the member {member}.";
+    case ActivityMemberSubject.MEMBER_APPROVED:
+      if (isAuthorCurrentActor) {
+        return "You approved {member}'s membership.";
+      }
+      if (isObjectMemberCurrentActor) {
+        return "Your membership was approved by {profile}.";
+      }
+      return "{profile} approved {member}'s membership.";
+    case ActivityMemberSubject.MEMBER_JOINED:
+      return "{member} joined the group.";
+    case ActivityMemberSubject.MEMBER_UPDATED:
+      if (subjectParams.member_role && subjectParams.old_role) {
+        return roleUpdate.value;
+      }
+      if (isAuthorCurrentActor) {
         return "You updated the member {member}.";
       }
-      return "{profile} updated the member {member}";
-    }
+      return "{profile} updated the member {member}.";
+    case ActivityMemberSubject.MEMBER_REMOVED:
+      if (subjectParams.member_role === MemberRole.NOT_APPROVED) {
+        if (isAuthorCurrentActor) {
+          return "You rejected {member}'s membership request.";
+        }
+        return "{profile} rejected {member}'s membership request.";
+      }
+      if (isAuthorCurrentActor) {
+        return "You excluded member {member}.";
+      }
+      return "{profile} excluded member {member}.";
+    case ActivityMemberSubject.MEMBER_QUIT:
+      return "{profile} quit the group.";
+    case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
+      return "{member} rejected the invitation to join the group.";
+    case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
+      if (isAuthorCurrentActor) {
+        return "You accepted the invitation to join the group.";
+      }
+      return "{member} accepted the invitation to join the group.";
+    default:
+      return undefined;
   }
+});
 
-  get isObjectMemberCurrentActor(): boolean {
-    return (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      this.activity?.object?.actor?.id === this.currentActor?.id &&
-      this.currentActor?.id !== undefined
-    );
+const icon = computed((): string => {
+  switch (props.activity.subject) {
+    case ActivityMemberSubject.MEMBER_REQUEST:
+    case ActivityMemberSubject.MEMBER_ADDED:
+    case ActivityMemberSubject.MEMBER_INVITED:
+    case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
+      return "account-multiple-plus";
+    case ActivityMemberSubject.MEMBER_REMOVED:
+    case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
+    case ActivityMemberSubject.MEMBER_QUIT:
+      return "account-multiple-minus";
+    case ActivityMemberSubject.MEMBER_UPDATED:
+    default:
+      return "account-multiple";
   }
-}
+});
+
+const iconColor = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityMemberSubject.MEMBER_ADDED:
+    case ActivityMemberSubject.MEMBER_INVITED:
+    case ActivityMemberSubject.MEMBER_JOINED:
+    case ActivityMemberSubject.MEMBER_APPROVED:
+    case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
+      return "success";
+    case ActivityMemberSubject.MEMBER_REQUEST:
+    case ActivityMemberSubject.MEMBER_UPDATED:
+      return "grey";
+    case ActivityMemberSubject.MEMBER_REMOVED:
+    case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
+    case ActivityMemberSubject.MEMBER_QUIT:
+      return "danger";
+    default:
+      return undefined;
+  }
+});
+
+const roleUpdate = computed((): string | undefined => {
+  if (
+    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.member_role) &&
+    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.old_role)
+  ) {
+    if (
+      MEMBER_ROLE_VALUE[subjectParams.member_role] >
+      MEMBER_ROLE_VALUE[subjectParams.old_role]
+    ) {
+      switch (subjectParams.member_role) {
+        case MemberRole.MODERATOR:
+          if (isAuthorCurrentActor) {
+            return "You promoted {member} to moderator.";
+          }
+          if (isObjectMemberCurrentActor) {
+            return "You were promoted to moderator by {profile}.";
+          }
+          return "{profile} promoted {member} to moderator.";
+        case MemberRole.ADMINISTRATOR:
+          if (isAuthorCurrentActor) {
+            return "You promoted {member} to administrator.";
+          }
+          if (isObjectMemberCurrentActor) {
+            return "You were promoted to administrator by {profile}.";
+          }
+          return "{profile} promoted {member} to administrator.";
+        default:
+          if (isAuthorCurrentActor) {
+            return "You promoted the member {member} to an unknown role.";
+          }
+          if (isObjectMemberCurrentActor) {
+            return "You were promoted to an unknown role by {profile}.";
+          }
+          return "{profile} promoted {member} to an unknown role.";
+      }
+    } else {
+      switch (subjectParams.member_role) {
+        case MemberRole.MODERATOR:
+          if (isAuthorCurrentActor) {
+            return "You demoted {member} to moderator.";
+          }
+          if (isObjectMemberCurrentActor) {
+            return "You were demoted to moderator by {profile}.";
+          }
+          return "{profile} demoted {member} to moderator.";
+        case MemberRole.MEMBER:
+          if (isAuthorCurrentActor) {
+            return "You demoted {member} to simple member.";
+          }
+          if (isObjectMemberCurrentActor) {
+            return "You were demoted to simple member by {profile}.";
+          }
+          return "{profile} demoted {member} to simple member.";
+        default:
+          if (isAuthorCurrentActor) {
+            return "You demoted the member {member} to an unknown role.";
+          }
+          if (isObjectMemberCurrentActor) {
+            return "You were demoted to an unknown role by {profile}.";
+          }
+          return "{profile} demoted {member} to an unknown role.";
+      }
+    }
+  } else {
+    if (isAuthorCurrentActor) {
+      return "You updated the member {member}.";
+    }
+    return "{profile} updated the member {member}";
+  }
+});
 </script>
 <style lang="scss" scoped>
 @import "./activity.scss";
diff --git a/js/src/components/Activity/PostActivityItem.vue b/js/src/components/Activity/PostActivityItem.vue
index 07597f7cb..06f2cb1a4 100644
--- a/js/src/components/Activity/PostActivityItem.vue
+++ b/js/src/components/Activity/PostActivityItem.vue
@@ -1,92 +1,92 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'bullhorn'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link
-          v-if="activity.object"
-          slot="post"
-          :to="{
-            name: RouteName.POST,
-            params: { slug: subjectParams.post_slug },
-          }"
-          >{{ subjectParams.post_title }}</router-link
-        >
-        <b v-else slot="post">{{ subjectParams.post_title }}</b>
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
+    <o-icon :icon="'bullhorn'" :variant="iconColor" custom-size="24" />
+    <div class="mt-1 ml-2 prose dark:prose-invert prose-p:m-0">
+      <i18n-t :keypath="translation" tag="p">
+        <template #post>
+          <router-link
+            v-if="activity.object"
+            :to="{
+              name: RouteName.POST,
+              params: { slug: subjectParams.post_slug },
+            }"
+            >{{ subjectParams.post_title }}</router-link
+          >
+          <b v-else>{{ subjectParams.post_title }}</b>
+        </template>
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b>
+              {{
+                $t("{'@'}{username}", {
+                  username: usernameWithDomain(activity.author),
+                })
+              }}</b
+            ></popover-actor-card
+          ></template
+        ></i18n-t
       >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
+      <small class="activity-date">{{
+        formatTimeString(activity.insertedAt)
       }}</small>
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { usernameWithDomain } from "@/types/actor";
 import { ActivityPostSubject } from "@/types/enums";
-import { Component } from "vue-property-decorator";
 import RouteName from "../../router/name";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
+import { formatTimeString } from "@/filters/datetime";
+import {
+  useIsActivityAuthorCurrentActor,
+  useActivitySubjectParams,
+} from "@/composition/activity";
+import { IActivity } from "@/types/activity.model";
+import { computed } from "vue";
 
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class PostActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
-  ActivityPostSubject = ActivityPostSubject;
+const props = defineProps<{
+  activity: IActivity;
+}>();
 
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityPostSubject.POST_CREATED:
-        if (this.isAuthorCurrentActor) {
-          return "You created the post {post}.";
-        }
-        return "The post {post} was created by {profile}.";
-      case ActivityPostSubject.POST_UPDATED:
-        if (this.isAuthorCurrentActor) {
-          return "You updated the post {post}.";
-        }
-        return "The post {post} was updated by {profile}.";
-      case ActivityPostSubject.POST_DELETED:
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the post {post}.";
-        }
-        return "The post {post} was deleted by {profile}.";
-      default:
-        return undefined;
-    }
+const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+
+const subjectParams = useActivitySubjectParams()(props.activity);
+
+const translation = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityPostSubject.POST_CREATED:
+      if (isAuthorCurrentActor) {
+        return "You created the post {post}.";
+      }
+      return "The post {post} was created by {profile}.";
+    case ActivityPostSubject.POST_UPDATED:
+      if (isAuthorCurrentActor) {
+        return "You updated the post {post}.";
+      }
+      return "The post {post} was updated by {profile}.";
+    case ActivityPostSubject.POST_DELETED:
+      if (isAuthorCurrentActor) {
+        return "You deleted the post {post}.";
+      }
+      return "The post {post} was deleted by {profile}.";
+    default:
+      return undefined;
   }
+});
 
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityPostSubject.POST_CREATED:
-        return "is-success";
-      case ActivityPostSubject.POST_UPDATED:
-        return "is-grey";
-      case ActivityPostSubject.POST_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
+const iconColor = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityPostSubject.POST_CREATED:
+      return "success";
+    case ActivityPostSubject.POST_UPDATED:
+      return "grey";
+    case ActivityPostSubject.POST_DELETED:
+      return "danger";
+    default:
+      return undefined;
   }
-}
+});
 </script>
 <style lang="scss" scoped>
 @import "./activity.scss";
diff --git a/js/src/components/Activity/ResourceActivityItem.vue b/js/src/components/Activity/ResourceActivityItem.vue
index 605b24a0a..65b8e7d50 100644
--- a/js/src/components/Activity/ResourceActivityItem.vue
+++ b/js/src/components/Activity/ResourceActivityItem.vue
@@ -1,189 +1,193 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'link'" :type="iconColor" />
-    <div class="subject">
-      <i18n :path="translation" tag="p">
-        <router-link v-if="activity.object" slot="resource" :to="path">{{
-          subjectParams.resource_title
-        }}</router-link>
-        <b v-else slot="resource">{{ subjectParams.resource_title }}</b>
-        <router-link v-if="activity.object" slot="new_path" :to="path">{{
-          parentDirectory
-        }}</router-link>
-        <b v-else slot="new_path">{{ parentDirectory }}</b>
-        <router-link
-          v-if="activity.object && subjectParams.old_resource_title"
-          slot="old_resource_title"
-          :to="path"
-          >{{ subjectParams.old_resource_title }}</router-link
-        >
-        <b
-          v-else-if="subjectParams.old_resource_title"
-          slot="old_resource_title"
-          >{{ subjectParams.old_resource_title }}</b
-        >
+    <o-icon :icon="'link'" :variant="iconColor" custom-size="24" />
+    <div class="mt-1 ml-2 prose dark:prose-invert prose-p:m-0">
+      <i18n-t :keypath="translation" tag="p">
+        <template #resource>
+          <router-link v-if="activity.object" :to="path">{{
+            subjectParams.resource_title
+          }}</router-link>
+          <b v-else>{{ subjectParams.resource_title }}</b>
+        </template>
+        <template #new_path>
+          <router-link v-if="activity.object" :to="path">{{
+            parentDirectory
+          }}</router-link>
+          <b v-else>{{ parentDirectory }}</b>
+        </template>
+        <template #old_resource_title>
+          <router-link
+            v-if="activity.object && subjectParams.old_resource_title"
+            :to="path"
+            >{{ subjectParams.old_resource_title }}</router-link
+          >
+          <b v-else-if="subjectParams.old_resource_title">{{
+            subjectParams.old_resource_title
+          }}</b>
+        </template>
 
-        <popover-actor-card
-          :actor="activity.author"
-          :inline="true"
-          slot="profile"
-        >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
-        ></i18n
+        <template #profile>
+          <popover-actor-card :actor="activity.author" :inline="true">
+            <b>
+              {{
+                $t("{'@'}{username}", {
+                  username: usernameWithDomain(activity.author),
+                })
+              }}</b
+            ></popover-actor-card
+          ></template
+        ></i18n-t
       >
-      <small class="has-text-grey-dark activity-date">{{
-        activity.insertedAt | formatTimeString
+      <small class="activity-date">{{
+        formatTimeString(activity.insertedAt)
       }}</small>
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { usernameWithDomain } from "@/types/actor";
 import { ActivityResourceSubject } from "@/types/enums";
-import { Component } from "vue-property-decorator";
 import RouteName from "../../router/name";
 import PopoverActorCard from "../Account/PopoverActorCard.vue";
-import ActivityMixin from "../../mixins/activity";
-import { mixins } from "vue-class-component";
-import { Location } from "vue-router";
+import { formatTimeString } from "@/filters/datetime";
+import {
+  useIsActivityAuthorCurrentActor,
+  useActivitySubjectParams,
+} from "@/composition/activity";
+import { IActivity } from "@/types/activity.model";
+import { computed } from "vue";
+import { IResource } from "@/types/resource";
 
-@Component({
-  components: {
-    PopoverActorCard,
-  },
-})
-export default class ResourceActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
-  RouteName = RouteName;
+const props = defineProps<{
+  activity: IActivity;
+}>();
 
-  get translation(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityResourceSubject.RESOURCE_CREATED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.isAuthorCurrentActor) {
-            return "You created the folder {resource}.";
+const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+
+const subjectParams = useActivitySubjectParams()(props.activity);
+
+const resource = computed(() => props.activity.object as IResource);
+
+const translation = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityResourceSubject.RESOURCE_CREATED:
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      if (props.activity?.object?.type === "folder") {
+        if (isAuthorCurrentActor) {
+          return "You created the folder {resource}.";
+        }
+        return "{profile} created the folder {resource}.";
+      }
+      if (isAuthorCurrentActor) {
+        return "You created the resource {resource}.";
+      }
+      return "{profile} created the resource {resource}.";
+    case ActivityResourceSubject.RESOURCE_MOVED:
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      if (props.activity?.object?.type === "folder") {
+        if (parentDirectory.value === null) {
+          if (isAuthorCurrentActor) {
+            return "You moved the folder {resource} to the root folder.";
           }
-          return "{profile} created the folder {resource}.";
+          return "{profile} moved the folder {resource} to the root folder.";
         }
-        if (this.isAuthorCurrentActor) {
-          return "You created the resource {resource}.";
+        if (isAuthorCurrentActor) {
+          return "You moved the folder {resource} into {new_path}.";
         }
-        return "{profile} created the resource {resource}.";
-      case ActivityResourceSubject.RESOURCE_MOVED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.parentDirectory === null) {
-            if (this.isAuthorCurrentActor) {
-              return "You moved the folder {resource} to the root folder.";
-            }
-            return "{profile} moved the folder {resource} to the root folder.";
-          }
-          if (this.isAuthorCurrentActor) {
-            return "You moved the folder {resource} into {new_path}.";
-          }
-          return "{profile} moved the folder {resource} into {new_path}.";
+        return "{profile} moved the folder {resource} into {new_path}.";
+      }
+      if (parentDirectory.value === null) {
+        if (isAuthorCurrentActor) {
+          return "You moved the resource {resource} to the root folder.";
         }
-        if (this.parentDirectory === null) {
-          if (this.isAuthorCurrentActor) {
-            return "You moved the resource {resource} to the root folder.";
-          }
-          return "{profile} moved the resource {resource} to the root folder.";
+        return "{profile} moved the resource {resource} to the root folder.";
+      }
+      if (isAuthorCurrentActor) {
+        return "You moved the resource {resource} into {new_path}.";
+      }
+      return "{profile} moved the resource {resource} into {new_path}.";
+    case ActivityResourceSubject.RESOURCE_UPDATED:
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      if (props.activity?.object?.type === "folder") {
+        if (isAuthorCurrentActor) {
+          return "You renamed the folder from {old_resource_title} to {resource}.";
         }
-        if (this.isAuthorCurrentActor) {
-          return "You moved the resource {resource} into {new_path}.";
+        return "{profile} renamed the folder from {old_resource_title} to {resource}.";
+      }
+      if (isAuthorCurrentActor) {
+        return "You renamed the resource from {old_resource_title} to {resource}.";
+      }
+      return "{profile} renamed the resource from {old_resource_title} to {resource}.";
+    case ActivityResourceSubject.RESOURCE_DELETED:
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      if (props.activity?.object?.type === "folder") {
+        if (isAuthorCurrentActor) {
+          return "You deleted the folder {resource}.";
         }
-        return "{profile} moved the resource {resource} into {new_path}.";
-      case ActivityResourceSubject.RESOURCE_UPDATED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.isAuthorCurrentActor) {
-            return "You renamed the folder from {old_resource_title} to {resource}.";
-          }
-          return "{profile} renamed the folder from {old_resource_title} to {resource}.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You renamed the resource from {old_resource_title} to {resource}.";
-        }
-        return "{profile} renamed the resource from {old_resource_title} to {resource}.";
-      case ActivityResourceSubject.RESOURCE_DELETED:
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        if (this.activity?.object?.type === "folder") {
-          if (this.isAuthorCurrentActor) {
-            return "You deleted the folder {resource}.";
-          }
-          return "{profile} deleted the folder {resource}.";
-        }
-        if (this.isAuthorCurrentActor) {
-          return "You deleted the resource {resource}.";
-        }
-        return "{profile} deleted the resource {resource}.";
-      default:
-        return undefined;
-    }
+        return "{profile} deleted the folder {resource}.";
+      }
+      if (isAuthorCurrentActor) {
+        return "You deleted the resource {resource}.";
+      }
+      return "{profile} deleted the resource {resource}.";
+    default:
+      return undefined;
   }
+});
 
-  get iconColor(): string | undefined {
-    switch (this.activity.subject) {
-      case ActivityResourceSubject.RESOURCE_CREATED:
-        return "is-success";
-      case ActivityResourceSubject.RESOURCE_MOVED:
-      case ActivityResourceSubject.RESOURCE_UPDATED:
-        return "is-grey";
-      case ActivityResourceSubject.RESOURCE_DELETED:
-        return "is-danger";
-      default:
-        return undefined;
-    }
+const iconColor = computed((): string | undefined => {
+  switch (props.activity.subject) {
+    case ActivityResourceSubject.RESOURCE_CREATED:
+      return "success";
+    case ActivityResourceSubject.RESOURCE_MOVED:
+    case ActivityResourceSubject.RESOURCE_UPDATED:
+      return "grey";
+    case ActivityResourceSubject.RESOURCE_DELETED:
+      return "danger";
+    default:
+      return undefined;
   }
+});
 
-  get path(): Location {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const path = this.parentPath(this.activity?.object?.path);
-    if (path === "") {
-      return {
-        name: RouteName.RESOURCE_FOLDER_ROOT,
-        params: {
-          preferredUsername: usernameWithDomain(this.activity.group),
-        },
-      };
-    }
+const path = computed(() => {
+  const localPath = parentPath(resource.value?.path);
+  if (localPath === "") {
     return {
-      name: RouteName.RESOURCE_FOLDER,
+      name: RouteName.RESOURCE_FOLDER_ROOT,
       params: {
-        path,
-        preferredUsername: usernameWithDomain(this.activity.group),
+        preferredUsername: usernameWithDomain(props.activity.group),
       },
     };
   }
+  return {
+    name: RouteName.RESOURCE_FOLDER,
+    params: {
+      path: localPath,
+      preferredUsername: usernameWithDomain(props.activity.group),
+    },
+  };
+});
 
-  get parentDirectory(): string | undefined | null {
-    if (this.subjectParams.resource_path) {
-      const parentPath = this.parentPath(this.subjectParams.resource_path);
-      const directory = parentPath.split("/");
-      const res = directory.pop();
-      res === "" ? null : res;
-    }
-    return null;
-  }
+const parentPath = (parent: string | undefined): string | undefined => {
+  if (!parent) return undefined;
+  const localPath = parent.split("/");
+  localPath.pop();
+  return localPath.join("/").replace(/^\//, "");
+};
 
-  parentPath(parent: string): string {
-    const path = parent.split("/");
-    path.pop();
-    return path.join("/").replace(/^\//, "");
+const parentDirectory = computed((): string | undefined | null => {
+  if (subjectParams.resource_path) {
+    const parentPathResult = parentPath(subjectParams.resource_path);
+    const directory = parentPathResult?.split("/");
+    const res = directory?.pop();
+    res === "" ? null : res;
   }
-}
+  return null;
+});
 </script>
 <style lang="scss" scoped>
 @import "./activity.scss";
diff --git a/js/src/components/Activity/SkeletonActivityItem.vue b/js/src/components/Activity/SkeletonActivityItem.vue
index c21f6fabd..5c5435d29 100644
--- a/js/src/components/Activity/SkeletonActivityItem.vue
+++ b/js/src/components/Activity/SkeletonActivityItem.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="activity-item">
     <span>
-      <b-skeleton circle width="32px" height="32px"></b-skeleton>
+      <o-skeleton circle width="32px" height="32px"></o-skeleton>
     </span>
     <div class="subject">
-      <div class="content">
+      <div class="prose dark:prose-invert">
         <p>
-          <b-skeleton active></b-skeleton>
-          <b-skeleton active class="datetime"></b-skeleton>
+          <o-skeleton active></o-skeleton>
+          <o-skeleton active class="datetime"></o-skeleton>
         </p>
       </div>
     </div>
diff --git a/js/src/components/Activity/activity.scss b/js/src/components/Activity/activity.scss
index 11bceeeaa..a7181f137 100644
--- a/js/src/components/Activity/activity.scss
+++ b/js/src/components/Activity/activity.scss
@@ -1,21 +1,12 @@
 .activity-item {
   display: flex;
-  span.icon {
+  span.o-icon {
     width: 2em;
     height: 2em;
     box-sizing: border-box;
     border-radius: 50%;
-    background: #fff;
     border: 2px solid;
     z-index: 2;
     flex-shrink: 0;
-
-    &.has-text-grey {
-      border-color: $grey;
-    }
-  }
-
-  .subject {
-    padding: 0.25rem 0 0 0.5rem;
   }
 }
diff --git a/js/src/components/Address/AddressInfo.story.vue b/js/src/components/Address/AddressInfo.story.vue
new file mode 100644
index 000000000..97ae8821e
--- /dev/null
+++ b/js/src/components/Address/AddressInfo.story.vue
@@ -0,0 +1,31 @@
+<template>
+  <Story>
+    <Variant title="Basic">
+      <AddressInfo :address="address" />
+    </Variant>
+
+    <Variant title="Basic with timezone">
+      <AddressInfo
+        :address="address"
+        :show-timezone="true"
+        :user-timezone="'Europe/Berlin'"
+      />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { IAddress } from "@/types/address.model";
+import { reactive } from "vue";
+import AddressInfo from "./AddressInfo.vue";
+
+const address = reactive<IAddress>({
+  description: "Locaux Motiv",
+  street: "10 Rue Jangot",
+  locality: "Lyon",
+  postalCode: "69007",
+  region: "Auvergne Rhône-Alpes",
+  country: "France",
+  type: "",
+  timezone: "Europe/Dublin",
+});
+</script>
diff --git a/js/src/components/Address/AddressInfo.vue b/js/src/components/Address/AddressInfo.vue
index e8f50d721..7d6456d3e 100644
--- a/js/src/components/Address/AddressInfo.vue
+++ b/js/src/components/Address/AddressInfo.vue
@@ -1,22 +1,22 @@
 <template>
   <address dir="auto">
-    <b-icon
+    <o-icon
       v-if="showIcon"
-      :icon="address.poiInfos.poiIcon.icon"
-      size="is-medium"
+      :icon="poiInfos?.poiIcon.icon"
+      size="medium"
       class="icon"
     />
     <p>
       <span
         class="addressDescription"
-        :title="address.poiInfos.name"
-        v-if="address.poiInfos.name"
+        :title="poiInfos.name"
+        v-if="poiInfos?.name"
       >
-        {{ address.poiInfos.name }}
+        {{ poiInfos.name }}
       </span>
-      <br v-if="address.poiInfos.name" />
-      <span class="has-text-grey-dark">
-        {{ address.poiInfos.alternativeName }}
+      <br v-if="poiInfos?.name" />
+      <span>
+        {{ poiInfos?.alternativeName }}
       </span>
       <br />
       <small
@@ -25,7 +25,6 @@
           longShortTimezoneNamesDifferent &&
           timezoneLongNameValid
         "
-        class="has-text-grey-dark"
       >
         🌐
         {{
@@ -35,72 +34,75 @@
           })
         }}
       </small>
-      <small v-else-if="userTimezoneDifferent" class="has-text-grey-dark">
+      <small v-else-if="userTimezoneDifferent" class="">
         🌐 {{ timezoneShortName }}
       </small>
     </p>
   </address>
 </template>
-<script lang="ts">
-import { IAddress } from "@/types/address.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { addressToPoiInfos, IAddress } from "@/types/address.model";
+import { computed } from "vue";
 
-@Component
-export default class AddressInfo extends Vue {
-  @Prop({ required: true, type: Object as PropType<IAddress> })
-  address!: IAddress;
-
-  @Prop({ required: false, default: false, type: Boolean }) showIcon!: boolean;
-  @Prop({ required: false, default: false, type: Boolean })
-  showTimezone!: boolean;
-  @Prop({ required: false, type: String }) userTimezone!: string;
-
-  get userTimezoneDifferent(): boolean {
-    return (
-      this.userTimezone != undefined &&
-      this.address.timezone != undefined &&
-      this.userTimezone !== this.address.timezone
-    );
+const props = withDefaults(
+  defineProps<{
+    address: IAddress;
+    showIcon?: boolean;
+    showTimezone?: boolean;
+    userTimezone?: string;
+  }>(),
+  {
+    showIcon: false,
+    showTimezone: false,
   }
+);
 
-  get longShortTimezoneNamesDifferent(): boolean {
-    return (
-      this.timezoneLongName != undefined &&
-      this.timezoneShortName != undefined &&
-      this.timezoneLongName !== this.timezoneShortName
-    );
-  }
+const poiInfos = computed(() => addressToPoiInfos(props.address));
 
-  get timezoneLongName(): string | undefined {
-    return this.timezoneName("long");
-  }
+const userTimezoneDifferent = computed((): boolean => {
+  return (
+    props.userTimezone != undefined &&
+    props.address.timezone != undefined &&
+    props.userTimezone !== props.address.timezone
+  );
+});
 
-  get timezoneShortName(): string | undefined {
-    return this.timezoneName("short");
-  }
+const longShortTimezoneNamesDifferent = computed((): boolean => {
+  return (
+    timezoneLongName.value != undefined &&
+    timezoneShortName.value != undefined &&
+    timezoneLongName.value !== timezoneShortName.value
+  );
+});
 
-  get timezoneLongNameValid(): boolean {
-    return (
-      this.timezoneLongName != undefined && !this.timezoneLongName.match(/UTC/)
-    );
-  }
+const timezoneLongName = computed((): string | undefined => {
+  return timezoneName("long");
+});
 
-  private timezoneName(format: "long" | "short"): string | undefined {
-    return this.extractTimezone(
-      new Intl.DateTimeFormat(undefined, {
-        timeZoneName: format,
-        timeZone: this.address.timezone,
-      }).formatToParts()
-    );
-  }
+const timezoneShortName = computed((): string | undefined => {
+  return timezoneName("short");
+});
 
-  private extractTimezone(
-    parts: Intl.DateTimeFormatPart[]
-  ): string | undefined {
-    return parts.find((part) => part.type === "timeZoneName")?.value;
-  }
-}
+const timezoneLongNameValid = computed((): boolean => {
+  return (
+    timezoneLongName.value != undefined && !timezoneLongName.value.match(/UTC/)
+  );
+});
+
+const timezoneName = (format: "long" | "short"): string | undefined => {
+  return extractTimezone(
+    new Intl.DateTimeFormat(undefined, {
+      timeZoneName: format,
+      timeZone: props.address.timezone,
+    }).formatToParts()
+  );
+};
+
+const extractTimezone = (
+  parts: Intl.DateTimeFormatPart[]
+): string | undefined => {
+  return parts.find((part) => part.type === "timeZoneName")?.value;
+};
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
diff --git a/js/src/components/Address/InlineAddress.story.vue b/js/src/components/Address/InlineAddress.story.vue
new file mode 100644
index 000000000..da69eab8f
--- /dev/null
+++ b/js/src/components/Address/InlineAddress.story.vue
@@ -0,0 +1,27 @@
+<template>
+  <Story>
+    <Variant title="with locality">
+      <InlineAddress :physicalAddress="address" />
+    </Variant>
+
+    <Variant title="without locality">
+      <InlineAddress :physicalAddress="{ ...address, locality: null }" />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { IAddress } from "@/types/address.model";
+import { reactive } from "vue";
+import InlineAddress from "./InlineAddress.vue";
+
+const address = reactive<IAddress>({
+  description: "Locaux Motiv",
+  street: "10 Rue Jangot",
+  locality: "Lyon",
+  postalCode: "69007",
+  region: "Auvergne Rhône-Alpes",
+  country: "France",
+  type: "",
+  timezone: "Europe/Dublin",
+});
+</script>
diff --git a/js/src/components/Address/InlineAddress.vue b/js/src/components/Address/InlineAddress.vue
index 99c0d7171..345fd3659 100644
--- a/js/src/components/Address/InlineAddress.vue
+++ b/js/src/components/Address/InlineAddress.vue
@@ -1,13 +1,14 @@
 <template>
   <div
-    class="truncate"
+    class="truncate flex gap-1"
+    dir="auto"
     :title="
       isDescriptionDifferentFromLocality
         ? `${physicalAddress.description}, ${physicalAddress.locality}`
         : physicalAddress.description
     "
   >
-    <b-icon icon="map-marker" />
+    <MapMarker />
     <span v-if="physicalAddress.locality">
       {{ physicalAddress.locality }}
     </span>
@@ -16,21 +17,19 @@
     </span>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IAddress } from "@/types/address.model";
-import { PropType } from "vue";
-import { Prop, Vue, Component } from "vue-property-decorator";
+import MapMarker from "vue-material-design-icons/MapMarker.vue";
+import { computed } from "vue";
 
-@Component
-export default class InlineAddress extends Vue {
-  @Prop({ required: true, type: Object as PropType<IAddress> })
-  physicalAddress!: IAddress;
+const props = defineProps<{
+  physicalAddress: IAddress;
+}>();
 
-  get isDescriptionDifferentFromLocality(): boolean {
-    return (
-      this.physicalAddress?.description !== this.physicalAddress?.locality &&
-      this.physicalAddress?.description !== undefined
-    );
-  }
-}
+const isDescriptionDifferentFromLocality = computed<boolean>(() => {
+  return (
+    props.physicalAddress?.description !== props.physicalAddress?.locality &&
+    props.physicalAddress?.description !== undefined
+  );
+});
 </script>
diff --git a/js/src/components/Categories/CategoryCard.story.vue b/js/src/components/Categories/CategoryCard.story.vue
new file mode 100644
index 000000000..95fec5c33
--- /dev/null
+++ b/js/src/components/Categories/CategoryCard.story.vue
@@ -0,0 +1,29 @@
+<template>
+  <Story>
+    <Variant title="Basic">
+      <section class="flex flex-wrap gap-3 md:gap-5">
+        <CategoryCard :category="category" />
+      </section>
+    </Variant>
+    <Variant title="Details">
+      <section class="flex flex-wrap gap-3 md:gap-5">
+        <CategoryCard
+          :category="{ ...category, key: 'OUTDOORS_ADVENTURE' }"
+          :with-details="true"
+        />
+      </section>
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { CategoryStatsModel } from "@/types/stats.model";
+import { reactive } from "vue";
+import CategoryCard from "./CategoryCard.vue";
+
+const category = reactive<CategoryStatsModel>({
+  key: "PHOTOGRAPHY",
+  number: 5,
+  label: "Hello",
+});
+</script>
diff --git a/js/src/components/Categories/CategoryCard.vue b/js/src/components/Categories/CategoryCard.vue
new file mode 100644
index 000000000..1c3e5c6df
--- /dev/null
+++ b/js/src/components/Categories/CategoryCard.vue
@@ -0,0 +1,80 @@
+<template>
+  <router-link
+    :to="{
+      name: 'SEARCH',
+      query: {
+        categoryOneOf: [category.key],
+        contentType: 'EVENTS',
+        radius: undefined,
+      },
+    }"
+    class="max-w-xs rounded-lg overflow-hidden bg-center bg-no-repeat bg-cover shadow-lg relative group"
+  >
+    <picture
+      v-if="categoriesWithPictures.includes(category.key)"
+      class="brightness-50"
+    >
+      <source
+        :srcset="`/img/categories/${category.key.toLowerCase()}.webp 2x, /img/categories/${category.key.toLowerCase()}.webp`"
+        media="(min-width: 1000px)"
+      />
+      <source
+        :srcset="`/img/categories/${category.key.toLowerCase()}.webp 2x, /img/categories/${category.key.toLowerCase()}-small.webp`"
+        media="(min-width: 300px)"
+      />
+      <img
+        class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
+        :src="`/img/categories/${category.key.toLowerCase()}.webp`"
+        :srcset="`/img/categories/${category.key.toLowerCase()}-small.webp `"
+        width="384"
+        height="384"
+        alt=""
+      />
+    </picture>
+    <p
+      v-else
+      class="h-36 w-36 md:h-52 md:w-52 brightness-75"
+      :class="randomGradient()"
+    />
+    <div class="px-3 py-1 absolute left-0 bottom-0">
+      <h2
+        class="group-hover:text-slate-200 font-semibold text-white tracking-tight text-xl mb-3"
+      >
+        {{ category.label }}
+      </h2>
+    </div>
+    <span
+      v-if="withDetails"
+      class="absolute z-10 inline-flex items-center px-3 py-1 text-xs font-semibold text-white bg-black rounded-full right-2 top-2"
+    >
+      {{
+        t(
+          "{count} events",
+          {
+            count: category.number.toString(),
+          },
+          category.number
+        )
+      }}
+    </span>
+  </router-link>
+</template>
+<script lang="ts" setup>
+import { categoriesWithPictures } from "./constants";
+import { randomGradient } from "../../utils/graphics";
+import { CategoryStatsModel } from "../../types/stats.model";
+
+import { useI18n } from "vue-i18n";
+
+withDefaults(
+  defineProps<{
+    category: CategoryStatsModel;
+    withDetails?: boolean;
+  }>(),
+  {
+    withDetails: false,
+  }
+);
+
+const { t } = useI18n({ useScope: "global" });
+</script>
diff --git a/js/src/components/Categories/constants.ts b/js/src/components/Categories/constants.ts
new file mode 100644
index 000000000..b176d62ab
--- /dev/null
+++ b/js/src/components/Categories/constants.ts
@@ -0,0 +1,195 @@
+export type CategoryPictureLicencingElement = { name: string; url: string };
+export type CategoryPictureLicencing = {
+  author: CategoryPictureLicencingElement;
+  source: CategoryPictureLicencingElement;
+  license?: CategoryPictureLicencingElement;
+};
+
+export const categoriesPicturesLicences: Record<
+  string,
+  CategoryPictureLicencing
+> = {
+  THEATRE: {
+    author: {
+      name: "David Joyce",
+      url: "https://www.flickr.com/photos/deapeajay/",
+    },
+    source: {
+      name: "Flickr",
+      url: "https://www.flickr.com/photos/30815420@N00/2213310171",
+    },
+    license: {
+      name: "CC BY-SA",
+      url: "https://creativecommons.org/licenses/by-sa/2.0/",
+    },
+  },
+  SPORTS: {
+    author: {
+      name: "Md Mahdi",
+      url: "https://unsplash.com/@mahdi17",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/lQpFRPrepQ8",
+    },
+  },
+  MUSIC: {
+    author: {
+      name: "Michael Starkie",
+      url: "https://unsplash.com/@starkie_pics",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/YjtevpXFHQY",
+    },
+  },
+  ARTS: {
+    author: {
+      name: "RhondaK Native Florida Folk Artist",
+      url: "https://unsplash.com/@rhondak",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/_Yc7OtfFn-0",
+    },
+  },
+  SPIRITUALITY_RELIGION_BELIEFS: {
+    author: {
+      name: "The Dancing Rain",
+      url: "https://unsplash.com/@thedancingrain",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/_KPuV9qSSlU",
+    },
+  },
+  MOVEMENTS_POLITICS: {
+    author: {
+      name: "Kyle Fiori",
+      url: "https://unsplash.com/@navy99",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/moytQ7vzhAM",
+    },
+  },
+  PARTY: {
+    author: {
+      name: "Amy Shamblen",
+      url: "https://unsplash.com/@amyshamblen",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/pJ_DCj9KswI",
+    },
+  },
+  BUSINESS: {
+    author: {
+      name: "Simone Hutsch",
+      url: "https://unsplash.com/@heysupersimi",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/6-c8GV2MBmg",
+    },
+  },
+  FILM_MEDIA: {
+    author: {
+      name: "Dan Senior",
+      url: "https://unsplash.com/@dansenior",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/ENtn4fH8C3g",
+    },
+  },
+  PHOTOGRAPHY: {
+    author: {
+      name: "Nathyn Masters",
+      url: "https://unsplash.com/@nathynmasters",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/k3oSs0hWOPo",
+    },
+  },
+  HEALTH: {
+    author: {
+      name: "Derek Finch",
+      url: "https://unsplash.com/@drugwatcher",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/Gi8Q8IfpxdY",
+    },
+  },
+  GAMES: {
+    author: {
+      name: "Randy Fath",
+      url: "https://unsplash.com/@randyfath",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/_EoxKxrDL20",
+    },
+  },
+  OUTDOORS_ADVENTURE: {
+    author: {
+      name: "Davide Sacchet",
+      url: "https://unsplash.com/@davide_sak_",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/RYN-kov1lTY",
+    },
+  },
+  FOOD_DRINK: {
+    author: {
+      name: "sina piryae",
+      url: "https://unsplash.com/@sinapiryae",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/bBzjWthTqb8",
+    },
+  },
+  CRAFTS: {
+    author: {
+      name: "rocknwool",
+      url: "https://unsplash.com/@rocknwool",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/Jcb5O26G08A",
+    },
+  },
+  LGBTQ: {
+    author: {
+      name: "analuisa gamboa",
+      url: "https://unsplash.com/@anigmb",
+    },
+    source: {
+      name: "Unsplash",
+      url: "https://unsplash.com/photos/HsraPtCtRCM",
+    },
+  },
+};
+
+export const categoriesWithPictures = [
+  "SPORTS",
+  "THEATRE",
+  "MUSIC",
+  "ARTS",
+  "MOVEMENTS_POLITICS",
+  "SPIRITUALITY_RELIGION_BELIEFS",
+  "PARTY",
+  "BUSINESS",
+  "FILM_MEDIA",
+  "PHOTOGRAPHY",
+  "HEALTH",
+  "GAMES",
+  "OUTDOORS_ADVENTURE",
+  "FOOD_DRINK",
+  "CRAFTS",
+  "LGBTQ",
+];
diff --git a/js/src/components/Comment/Comment.vue b/js/src/components/Comment/Comment.vue
deleted file mode 100644
index 569134f60..000000000
--- a/js/src/components/Comment/Comment.vue
+++ /dev/null
@@ -1,538 +0,0 @@
-<template>
-  <li
-    :class="{
-      reply: comment.inReplyToComment,
-      announcement: comment.isAnnouncement,
-      selected: commentSelected,
-    }"
-    class="comment-element"
-  >
-    <article class="media" :id="commentId" dir="auto">
-      <popover-actor-card
-        :actor="comment.actor"
-        :inline="true"
-        v-if="comment.actor"
-      >
-        <figure
-          class="image is-32x32 media-left"
-          v-if="!comment.deletedAt && comment.actor.avatar"
-        >
-          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
-        </figure>
-        <b-icon class="media-left" v-else icon="account-circle" />
-      </popover-actor-card>
-      <div v-else class="media-left">
-        <figure
-          class="image is-32x32"
-          v-if="!comment.deletedAt && comment.actor.avatar"
-        >
-          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
-        </figure>
-        <b-icon v-else icon="account-circle" />
-      </div>
-      <div class="media-content">
-        <div class="content">
-          <span class="first-line" v-if="!comment.deletedAt" dir="auto">
-            <strong :class="{ organizer: commentFromOrganizer }">{{
-              comment.actor.name
-            }}</strong>
-            <small dir="ltr">@{{ usernameWithDomain(comment.actor) }}</small>
-          </span>
-          <a v-else class="comment-link" :href="commentURL">
-            <span>{{ $t("[deleted]") }}</span>
-          </a>
-          <a class="comment-link" :href="commentURL">
-            <small>{{
-              formatDistanceToNow(new Date(comment.updatedAt), {
-                locale: $dateFnsLocale,
-                addSuffix: true,
-              })
-            }}</small>
-          </a>
-          <span class="icons" v-if="!comment.deletedAt">
-            <button
-              v-if="comment.actor.id === currentActor.id"
-              @click="deleteComment"
-            >
-              <b-icon icon="delete" size="is-small" aria-hidden="true" />
-              <span class="visually-hidden">{{ $t("Delete") }}</span>
-            </button>
-            <button @click="reportModal()">
-              <b-icon icon="alert" size="is-small" />
-              <span class="visually-hidden">{{ $t("Report") }}</span>
-            </button>
-          </span>
-          <br />
-          <div
-            v-if="!comment.deletedAt"
-            v-html="comment.text"
-            dir="auto"
-            :lang="comment.language"
-          />
-          <div v-else>{{ $t("[This comment has been deleted]") }}</div>
-          <div class="load-replies" v-if="comment.totalReplies">
-            <p v-if="!showReplies" @click="fetchReplies">
-              <b-icon icon="chevron-down" class="reply-btn" />
-              <span class="reply-btn">{{
-                $tc("View a reply", comment.totalReplies, {
-                  totalReplies: comment.totalReplies,
-                })
-              }}</span>
-            </p>
-            <p
-              v-else-if="comment.totalReplies && showReplies"
-              @click="showReplies = false"
-            >
-              <b-icon icon="chevron-up" class="reply-btn" />
-              <span class="reply-btn">{{ $t("Hide replies") }}</span>
-            </p>
-          </div>
-        </div>
-        <nav
-          class="reply-action level is-mobile"
-          v-if="
-            currentActor.id &&
-            event.options.commentModeration !== CommentModeration.CLOSED &&
-            !comment.deletedAt
-          "
-        >
-          <div class="level-left">
-            <span
-              style="cursor: pointer"
-              class="level-item reply-btn"
-              @click="createReplyToComment()"
-            >
-              <span class="icon is-small">
-                <b-icon icon="reply" />
-              </span>
-              <span>{{ $t("Reply") }}</span>
-            </span>
-          </div>
-        </nav>
-      </div>
-    </article>
-    <form
-      class="reply"
-      @submit.prevent="replyToComment"
-      v-if="currentActor.id"
-      v-show="replyTo"
-    >
-      <article class="media reply">
-        <figure class="media-left" v-if="currentActor.avatar">
-          <p class="image is-48x48">
-            <img :src="currentActor.avatar.url" alt="" />
-          </p>
-        </figure>
-        <b-icon
-          class="media-left"
-          v-else
-          size="is-large"
-          icon="account-circle"
-        />
-        <div class="media-content">
-          <div class="content">
-            <span class="first-line">
-              <strong>{{ currentActor.name }}</strong>
-              <small dir="ltr">@{{ currentActor.preferredUsername }}</small>
-            </span>
-            <br />
-            <span class="editor-line">
-              <editor
-                class="editor"
-                ref="commentEditor"
-                v-model="newComment.text"
-                mode="comment"
-                :aria-label="$t('Comment body')"
-              />
-              <b-button
-                :disabled="newComment.text.trim().length === 0"
-                native-type="submit"
-                type="is-primary"
-                >{{ $t("Post a reply") }}</b-button
-              >
-            </span>
-          </div>
-        </div>
-      </article>
-    </form>
-    <div class="replies">
-      <div class="left">
-        <div class="vertical-border" @click="showReplies = false" />
-      </div>
-      <transition-group
-        name="comment-replies"
-        v-if="showReplies"
-        class="comment-replies"
-        tag="ul"
-      >
-        <comment
-          class="reply"
-          v-for="reply in comment.replies"
-          :key="reply.id"
-          :comment="reply"
-          :event="event"
-          @create-comment="$emit('create-comment', $event)"
-          @delete-comment="$emit('delete-comment', $event)"
-        />
-      </transition-group>
-    </div>
-  </li>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
-import EditorComponent from "@/components/Editor.vue";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { formatDistanceToNow } from "date-fns";
-import { CommentModeration } from "@/types/enums";
-import { CommentModel, IComment } from "../../types/comment.model";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import { IPerson, usernameWithDomain } from "../../types/actor";
-import { IEvent } from "../../types/event.model";
-import ReportModal from "../Report/ReportModal.vue";
-import { IReport } from "../../types/report.model";
-import { CREATE_REPORT } from "../../graphql/report";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
-
-@Component({
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-  components: {
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-    comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"),
-    PopoverActorCard,
-  },
-})
-export default class Comment extends Vue {
-  @Prop({ required: true, type: Object }) comment!: IComment;
-
-  @Prop({ required: true, type: Object }) event!: IEvent;
-
-  // Hack because Vue only exports it's own interface.
-  // See https://github.com/kaorun343/vue-property-decorator/issues/257
-  @Ref() readonly commentEditor!: EditorComponent & {
-    replyToComment: (comment: IComment) => void;
-    focus: () => void;
-  };
-
-  currentActor!: IPerson;
-
-  newComment: IComment = new CommentModel();
-
-  replyTo = false;
-
-  showReplies = false;
-
-  CommentModeration = CommentModeration;
-
-  usernameWithDomain = usernameWithDomain;
-
-  formatDistanceToNow = formatDistanceToNow;
-
-  async mounted(): Promise<void> {
-    const { hash } = this.$route;
-    if (hash.includes(`#comment-${this.comment.uuid}`)) {
-      this.fetchReplies();
-    }
-  }
-
-  async createReplyToComment(): Promise<void> {
-    if (this.replyTo) {
-      this.replyTo = false;
-      this.newComment = new CommentModel();
-      return;
-    }
-    this.replyTo = true;
-    if (this.comment.actor) {
-      this.commentEditor.replyToComment(this.comment.actor);
-      await this.$nextTick; // wait for the mention to be injected
-      this.commentEditor.focus();
-    }
-  }
-
-  replyToComment(): void {
-    this.newComment.inReplyToComment = this.comment;
-    this.newComment.originComment = this.comment.originComment || this.comment;
-    this.newComment.actor = this.currentActor;
-    this.$emit("create-comment", this.newComment);
-    this.newComment = new CommentModel();
-    this.replyTo = false;
-    this.showReplies = true;
-  }
-
-  deleteComment(): void {
-    this.$emit("delete-comment", this.comment);
-    this.showReplies = false;
-  }
-
-  fetchReplies(): void {
-    this.showReplies = true;
-  }
-
-  get commentSelected(): boolean {
-    return `#${this.commentId}` === this.$route.hash;
-  }
-
-  get commentFromOrganizer(): boolean {
-    const organizerId =
-      this.event?.organizerActor?.id || this.event?.attributedTo?.id;
-    return organizerId !== undefined && this.comment?.actor?.id === organizerId;
-  }
-
-  get commentId(): string {
-    if (this.comment.originComment)
-      return `comment-${this.comment.originComment.uuid}-${this.comment.uuid}`;
-    return `comment-${this.comment.uuid}`;
-  }
-
-  get commentURL(): string {
-    if (!this.comment.local && this.comment.url) return this.comment.url;
-    return `#${this.commentId}`;
-  }
-
-  reportModal(): void {
-    if (!this.comment.actor) return;
-    this.$buefy.modal.open({
-      parent: this,
-      component: ReportModal,
-      props: {
-        title: this.$t("Report this comment"),
-        comment: this.comment,
-        onConfirm: this.reportComment,
-        outsideDomain: this.comment.actor.domain,
-      },
-      // https://github.com/buefy/buefy/pull/3589
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      closeButtonAriaLabel: this.$t("Close"),
-    });
-  }
-
-  async reportComment(content: string, forward: boolean): Promise<void> {
-    try {
-      if (!this.comment.actor) return;
-      await this.$apollo.mutate<IReport>({
-        mutation: CREATE_REPORT,
-        variables: {
-          eventId: this.event.id,
-          reportedId: this.comment.actor.id,
-          commentsIds: [this.comment.id],
-          content,
-          forward,
-        },
-      });
-      this.$buefy.notification.open({
-        message: this.$t("Comment from @{username} reported", {
-          username: this.comment.actor.preferredUsername,
-        }) as string,
-        type: "is-success",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-    } catch (e: any) {
-      if (e.message) {
-        Snackbar.open({
-          message: e.message,
-          type: "is-danger",
-          position: "is-bottom",
-        });
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-form.reply {
-  padding-bottom: 1rem;
-}
-
-.first-line {
-  margin-bottom: 3px;
-
-  * {
-    padding: 0 5px 0 0;
-  }
-
-  strong.organizer {
-    background: $background-color;
-    border-radius: 12px;
-    color: white;
-    padding: 0 6px;
-  }
-
-  & > small {
-    @include margin-left(0.3rem);
-  }
-}
-
-.editor-line {
-  display: flex;
-  max-width: calc(80rem - 64px);
-
-  .editor {
-    flex: 1;
-    @include padding-right(10px);
-    margin-bottom: 0;
-  }
-}
-
-a.comment-link {
-  text-decoration: none;
-  @include margin-left(5px);
-  color: $text;
-  &:hover {
-    text-decoration: underline;
-  }
-  small {
-    &:hover {
-      color: hsl(0, 0%, 21%);
-    }
-  }
-}
-
-.comment-element {
-  padding: 0.25rem;
-  border-radius: 5px;
-
-  &.announcement {
-    background: $purple-2;
-
-    small {
-      color: hsl(0, 0%, 21%);
-    }
-  }
-
-  &.selected {
-    background-color: $violet-1;
-    color: $white;
-    .reply-btn,
-    small,
-    span,
-    strong,
-    .icons button {
-      color: $white;
-    }
-    a.comment-link:hover {
-      text-decoration: underline;
-      text-decoration-color: $white;
-      small {
-        color: $purple-3;
-      }
-    }
-  }
-
-  .media-left {
-    @include margin-right(5px);
-  }
-}
-
-.root-comment .replies {
-  display: flex;
-
-  .left {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    @include margin-right(10px);
-
-    .vertical-border {
-      width: 3px;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.05);
-      margin: 10px calc(1rem + 1px);
-      cursor: pointer;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-}
-
-.media .media-content {
-  overflow-x: initial;
-  .content {
-    text-align: start;
-    .editor-line {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .icons {
-    display: none;
-  }
-}
-
-.media:hover .media-content .icons {
-  display: inline;
-
-  button {
-    cursor: pointer;
-    border: none;
-    background: none;
-  }
-}
-
-.load-replies {
-  cursor: pointer;
-
-  & > p > span {
-    font-weight: bold;
-    color: $violet-2;
-  }
-}
-
-.level-item.reply-btn {
-  font-weight: bold;
-  color: $violet-2;
-}
-
-article {
-  border-radius: 4px;
-  margin-bottom: 5px;
-}
-
-.comment-replies {
-  flex-grow: 1;
-}
-
-.comment-replies-enter-active,
-.comment-replies-leave-active,
-.comment-replies-move {
-  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
-  transition-property: opacity, transform;
-}
-
-.comment-replies-enter {
-  opacity: 0;
-  transform: translateX(50px) scaleY(0.5);
-}
-
-.comment-replies-enter-to {
-  opacity: 1;
-  transform: translateX(0) scaleY(1);
-}
-
-.comment-replies-leave-active {
-  position: absolute;
-}
-
-.comment-replies-leave-to {
-  opacity: 0;
-  transform: scaleY(0);
-  transform-origin: center top;
-}
-
-.reply-action .icon {
-  @include padding-right(0.4rem);
-}
-
-.visually-hidden {
-  display: none;
-}
-</style>
diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index 402e0008e..38ba89e24 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -1,69 +1,63 @@
 <template>
   <div>
     <form
-      class="new-comment"
+      class=""
       v-if="isAbleToComment"
       @submit.prevent="createCommentForEvent(newComment)"
       @keyup.ctrl.enter="createCommentForEvent(newComment)"
     >
-      <b-notification
+      <o-notification
         v-if="isEventOrganiser && !areCommentsClosed"
         :closable="false"
-        >{{ $t("Comments are closed for everybody else.") }}</b-notification
+        class="my-2"
+        >{{ t("Comments are closed for everybody else.") }}</o-notification
       >
-      <article class="media">
-        <figure class="media-left" v-if="newComment.actor">
+      <article class="flex flex-wrap items-start gap-2">
+        <figure class="" v-if="newComment.actor">
           <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
         </figure>
-        <div class="media-content">
-          <div class="field">
-            <div class="field">
-              <p class="control">
-                <editor
-                  ref="commenteditor"
-                  mode="comment"
-                  v-model="newComment.text"
-                  :aria-label="$t('Comment body')"
-                />
-              </p>
-              <p class="help is-danger" v-if="emptyCommentError">
-                {{ $t("Comment text can't be empty") }}
+        <div class="flex-1">
+          <div class="flex flex-col gap-2">
+            <div class="editor-wrapper">
+              <Editor
+                ref="commenteditor"
+                v-if="currentActor"
+                :currentActor="currentActor"
+                mode="comment"
+                v-model="newComment.text"
+                :aria-label="t('Comment body')"
+              />
+              <p class="" v-if="emptyCommentError">
+                {{ t("Comment text can't be empty") }}
               </p>
             </div>
-            <div class="field notify-participants" v-if="isEventOrganiser">
-              <b-switch
+            <div class="" v-if="isEventOrganiser">
+              <o-switch
                 aria-labelledby="notify-participants-toggle"
                 v-model="newComment.isAnnouncement"
-                >{{ $t("Notify participants") }}</b-switch
+                >{{ t("Notify participants") }}</o-switch
               >
             </div>
           </div>
         </div>
-        <div class="send-comment">
-          <b-button
-            native-type="submit"
-            type="is-primary"
-            class="comment-button-submit"
-            icon-left="send"
-            >{{ $t("Send") }}</b-button
-          >
+        <div class="">
+          <o-button native-type="submit" variant="primary" icon-left="send">{{
+            t("Send")
+          }}</o-button>
         </div>
       </article>
     </form>
-    <b-notification v-else-if="isConnected" :closable="false">{{
-      $t("The organiser has chosen to close comments.")
-    }}</b-notification>
-    <p
-      v-if="$apollo.queries.comments.loading"
-      class="loading has-text-centered"
-    >
-      {{ $t("Loading comments…") }}
+    <o-notification v-else-if="isConnected" :closable="false">{{
+      t("The organiser has chosen to close comments.")
+    }}</o-notification>
+    <p v-if="commentsLoading" class="text-center">
+      {{ t("Loading comments…") }}
     </p>
     <transition-group tag="div" name="comment-empty-list" v-else>
       <transition-group
         key="list"
         name="comment-list"
-        v-if="filteredOrderedComments.length"
+        v-if="filteredOrderedComments.length && currentActor"
         class="comment-list"
         tag="ul"
       >
@@ -71,22 +65,27 @@
           class="root-comment"
           :comment="comment"
           :event="event"
+          :currentActor="currentActor"
           v-for="comment in filteredOrderedComments"
           :key="comment.id"
           @create-comment="createCommentForEvent"
-          @delete-comment="deleteComment"
+          @delete-comment="
+            deleteComment({
+              commentId: comment.id as string,
+              originCommentId: comment.originComment?.id,
+            })
+          "
         />
       </transition-group>
       <empty-content v-else icon="comment" key="no-comments" :inline="true">
-        <span>{{ $t("No comments yet") }}</span>
+        <span>{{ t("No comments yet") }}</span>
       </empty-content>
     </transition-group>
   </div>
 </template>
 
-<script lang="ts">
-import { Prop, Vue, Component, Watch } from "vue-property-decorator";
-import Comment from "@/components/Comment/Comment.vue";
+<script lang="ts" setup>
+import Comment from "@/components/Comment/EventComment.vue";
 import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
 import { CommentModeration } from "@/types/enums";
 import { CommentModel, IComment } from "../../types/comment.model";
@@ -95,328 +94,340 @@ import {
   DELETE_COMMENT,
   COMMENTS_THREADS_WITH_REPLIES,
 } from "../../graphql/comment";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import { IPerson } from "../../types/actor";
 import { IEvent } from "../../types/event.model";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
+import { IPerson } from "@/types/actor";
+import { AbsintheGraphQLError } from "@/types/errors.model";
+import { useI18n } from "vue-i18n";
+import { Notifier } from "@/plugins/notifier";
 
-@Component({
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-    comments: {
+const { currentActor } = useCurrentActorClient();
+
+const { result: commentsResult, loading: commentsLoading } = useQuery<{
+  event: Pick<IEvent, "id" | "uuid" | "comments">;
+}>(
+  COMMENTS_THREADS_WITH_REPLIES,
+  () => ({ eventUUID: props.event?.uuid }),
+  () => ({ enabled: props.event?.uuid !== undefined })
+);
+
+const comments = computed(() => commentsResult.value?.event.comments ?? []);
+
+const props = defineProps<{
+  event: IEvent;
+  newComment?: IComment;
+}>();
+
+const Editor = defineAsyncComponent(
+  () => import("@/components/TextEditor.vue")
+);
+
+const newComment = ref<IComment>(props.newComment ?? new CommentModel());
+
+const emptyCommentError = ref(false);
+
+const { t } = useI18n({ useScope: "global" });
+
+watch(currentActor, () => {
+  newComment.value.actor = currentActor.value as IPerson;
+});
+
+watch(newComment, (newCommentUpdated: IComment) => {
+  if (emptyCommentError.value) {
+    emptyCommentError.value = ["", "<p></p>"].includes(newCommentUpdated.text);
+  }
+});
+
+const {
+  mutate: createCommentForEventMutation,
+  onDone: createCommentForEventMutationDone,
+  onError: createCommentForEventMutationError,
+} = useMutation<
+  { createComment: IComment },
+  {
+    eventId: string;
+    text: string;
+    inReplyToCommentId?: string;
+    isAnnouncement?: boolean;
+    originCommentId?: string | undefined;
+  }
+>(CREATE_COMMENT_FROM_EVENT, () => ({
+  update: (
+    store: ApolloCache<InMemoryCache>,
+    { data }: FetchResult,
+    { variables }
+  ) => {
+    if (data == null) return;
+    // comments are attached to the event, so we can pass it to replies later
+    const newCommentLocal = { ...data.createComment, event: props.event };
+
+    // we load all existing threads
+    const commentThreadsData = store.readQuery<{ event: IEvent }>({
       query: COMMENTS_THREADS_WITH_REPLIES,
-      variables() {
-        return {
-          eventUUID: this.event.uuid,
-        };
+      variables: {
+        eventUUID: props.event?.uuid,
       },
-      update: (data) => data.event.comments,
-      skip() {
-        return !this.event.uuid;
+    });
+    if (!commentThreadsData) return;
+    const { event } = commentThreadsData;
+    const oldComments = [...event.comments];
+
+    // if it's no a root comment, we first need to find
+    // existing replies and add the new reply to it
+    if (variables?.originCommentId !== undefined) {
+      const parentCommentIndex = oldComments.findIndex(
+        (oldComment) => oldComment.id === variables.originCommentId
+      );
+      const parentComment = oldComments[parentCommentIndex];
+
+      // replace the root comment with has the updated list of replies in the thread list
+      oldComments.splice(parentCommentIndex, 1, {
+        ...parentComment,
+        replies: [...parentComment.replies, newCommentLocal],
+      });
+    } else {
+      // otherwise it's simply a new thread and we add it to the list
+      oldComments.push(newCommentLocal);
+    }
+
+    // finally we save the thread list
+    store.writeQuery({
+      query: COMMENTS_THREADS_WITH_REPLIES,
+      data: {
+        event: {
+          ...event,
+          comments: oldComments,
+        },
       },
+      variables: {
+        eventUUID: props.event?.uuid,
+      },
+    });
+  },
+}));
+
+createCommentForEventMutationDone(() => {
+  // and reset the new comment field
+  newComment.value = new CommentModel();
+});
+
+const notifier = inject<Notifier>("notifier");
+
+createCommentForEventMutationError((errors) => {
+  console.error(errors);
+  if (errors.graphQLErrors && errors.graphQLErrors.length > 0) {
+    const error = errors.graphQLErrors[0] as AbsintheGraphQLError;
+    if (error.field !== "text" && error.message[0] !== "can't be blank") {
+      notifier?.error(error.message);
+    }
+  }
+});
+
+const createCommentForEvent = (comment: IComment) => {
+  emptyCommentError.value = ["", "<p></p>"].includes(comment.text);
+
+  if (emptyCommentError.value) return;
+  if (!comment.actor) return;
+  if (!props.event?.id) return;
+
+  createCommentForEventMutation({
+    eventId: props.event?.id,
+    text: comment.text,
+    inReplyToCommentId: comment.inReplyToComment?.id,
+    isAnnouncement: comment.isAnnouncement,
+    originCommentId: comment.originComment?.id,
+  });
+};
+
+const { mutate: deleteComment, onError: deleteCommentMutationError } =
+  useMutation<
+    { deleteComment: { id: string } },
+    { commentId: string; originCommentId?: string }
+  >(DELETE_COMMENT, () => ({
+    update: (
+      store: ApolloCache<InMemoryCache>,
+      { data }: FetchResult,
+      { variables }
+    ) => {
+      if (data == null) return;
+      const deletedCommentId = data.deleteComment.id;
+
+      const commentsData = store.readQuery<{ event: IEvent }>({
+        query: COMMENTS_THREADS_WITH_REPLIES,
+        variables: {
+          eventUUID: props.event?.uuid,
+        },
+      });
+      if (!commentsData) return;
+      const { event } = commentsData;
+      let updatedComments: IComment[] = [...event.comments];
+
+      if (variables?.originCommentId) {
+        // we have deleted a reply to a thread
+        const parentCommentIndex = updatedComments.findIndex(
+          (oldComment) => oldComment.id === variables.originCommentId
+        );
+        const parentComment = updatedComments[parentCommentIndex];
+        const updatedReplies = parentComment.replies.map((reply) => {
+          if (reply.id === deletedCommentId) {
+            return {
+              ...reply,
+              deletedAt: new Date().toString(),
+            };
+          }
+          return reply;
+        });
+        updatedComments.splice(parentCommentIndex, 1, {
+          ...parentComment,
+          replies: updatedReplies,
+          totalReplies: parentComment.totalReplies - 1,
+        });
+        console.debug("updatedComments", updatedComments);
+      } else {
+        // we have deleted a thread itself
+        updatedComments = updatedComments.map((reply) => {
+          if (reply.id === deletedCommentId) {
+            return {
+              ...reply,
+              deletedAt: new Date().toString(),
+            };
+          }
+          return reply;
+        });
+      }
+      store.writeQuery({
+        query: COMMENTS_THREADS_WITH_REPLIES,
+        variables: {
+          eventUUID: props.event?.uuid,
+        },
+        data: {
+          event: {
+            ...event,
+            comments: updatedComments,
+          },
+        },
+      });
     },
-  },
-  components: {
-    Comment,
-    IdentityPickerWrapper,
-    EmptyContent,
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-  },
-})
-export default class CommentTree extends Vue {
-  @Prop({ required: false, type: Object }) event!: IEvent;
+  }));
 
-  newComment: IComment = new CommentModel();
-
-  currentActor!: IPerson;
-
-  comments: IComment[] = [];
-
-  CommentModeration = CommentModeration;
-
-  emptyCommentError = false;
-
-  @Watch("currentActor")
-  watchCurrentActor(currentActor: IPerson): void {
-    this.newComment.actor = currentActor;
+deleteCommentMutationError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
   }
+});
 
-  @Watch("newComment", { deep: true })
-  resetEmptyCommentError(newComment: IComment): void {
-    if (this.emptyCommentError) {
-      this.emptyCommentError = ["", "<p></p>"].includes(newComment.text);
-    }
-  }
-
-  async createCommentForEvent(comment: IComment): Promise<void> {
-    this.emptyCommentError = ["", "<p></p>"].includes(comment.text);
-    if (this.emptyCommentError) return;
-    try {
-      if (!comment.actor) return;
-      await this.$apollo.mutate({
-        mutation: CREATE_COMMENT_FROM_EVENT,
-        variables: {
-          eventId: this.event.id,
-          text: comment.text,
-          inReplyToCommentId: comment.inReplyToComment
-            ? comment.inReplyToComment.id
-            : null,
-          isAnnouncement: comment.isAnnouncement,
-        },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
-          if (data == null) return;
-          // comments are attached to the event, so we can pass it to replies later
-          const newComment = { ...data.createComment, event: this.event };
-
-          // we load all existing threads
-          const commentThreadsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-          });
-          if (!commentThreadsData) return;
-          const { event } = commentThreadsData;
-          const oldComments = [...event.comments];
-
-          // if it's no a root comment, we first need to find
-          // existing replies and add the new reply to it
-          if (comment.originComment !== undefined) {
-            const { originComment } = comment;
-            const parentCommentIndex = oldComments.findIndex(
-              (oldComment) => oldComment.id === originComment.id
-            );
-            const parentComment = oldComments[parentCommentIndex];
-
-            // replace the root comment with has the updated list of replies in the thread list
-            oldComments.splice(parentCommentIndex, 1, {
-              ...parentComment,
-              replies: [...parentComment.replies, newComment],
-            });
-          } else {
-            // otherwise it's simply a new thread and we add it to the list
-            oldComments.push(newComment);
-          }
-
-          // finally we save the thread list
-          store.writeQuery({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            data: {
-              event: {
-                ...event,
-                comments: oldComments,
-              },
-            },
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-          });
-        },
-      });
-
-      // and reset the new comment field
-      this.newComment = new CommentModel();
-    } catch (errors: any) {
-      console.error(errors);
-      if (errors.graphQLErrors && errors.graphQLErrors.length > 0) {
-        const error = errors.graphQLErrors[0];
-        if (error.field !== "text" && error.message[0] !== "can't be blank") {
-          this.$notifier.error(error.message);
-        }
+const orderedComments = computed((): IComment[] => {
+  return comments.value
+    .filter((comment: IComment) => comment.inReplyToComment == null)
+    .sort((a: IComment, b: IComment) => {
+      if (a.isAnnouncement !== b.isAnnouncement) {
+        return (
+          (b.isAnnouncement === true ? 1 : 0) -
+          (a.isAnnouncement === true ? 1 : 0)
+        );
       }
-    }
-  }
-
-  async deleteComment(comment: IComment): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: DELETE_COMMENT,
-        variables: {
-          commentId: comment.id,
-        },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
-          if (data == null) return;
-          const deletedCommentId = data.deleteComment.id;
-
-          const commentsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-          });
-          if (!commentsData) return;
-          const { event } = commentsData;
-          let updatedComments: IComment[] = [...event.comments];
-
-          if (comment.originComment) {
-            // we have deleted a reply to a thread
-            const { originComment } = comment;
-
-            const parentCommentIndex = updatedComments.findIndex(
-              (oldComment) => oldComment.id === originComment.id
-            );
-            const parentComment = updatedComments[parentCommentIndex];
-            const updatedReplies = parentComment.replies.map((reply) => {
-              if (reply.id === deletedCommentId) {
-                return {
-                  ...reply,
-                  deletedAt: new Date().toString(),
-                };
-              }
-              return reply;
-            });
-            updatedComments.splice(parentCommentIndex, 1, {
-              ...parentComment,
-              replies: updatedReplies,
-              totalReplies: parentComment.totalReplies - 1,
-            });
-            console.log("updatedComments", updatedComments);
-          } else {
-            // we have deleted a thread itself
-            updatedComments = updatedComments.map((reply) => {
-              if (reply.id === deletedCommentId) {
-                return {
-                  ...reply,
-                  deletedAt: new Date().toString(),
-                };
-              }
-              return reply;
-            });
-          }
-          store.writeQuery({
-            query: COMMENTS_THREADS_WITH_REPLIES,
-            variables: {
-              eventUUID: this.event.uuid,
-            },
-            data: {
-              event: {
-                ...event,
-                comments: updatedComments,
-              },
-            },
-          });
-        },
-      });
-      // this.comments = this.comments.filter(commentItem => commentItem.id !== comment.id);
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
+      if (a.publishedAt && b.publishedAt) {
+        return (
+          new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
+        );
+      } else if (a.updatedAt && b.updatedAt) {
+        return (
+          new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+        );
       }
-    }
-  }
+      return 0;
+    });
+});
 
-  get orderedComments(): IComment[] {
-    return this.comments
-      .filter((comment) => comment.inReplyToComment == null)
-      .sort((a, b) => {
-        if (a.isAnnouncement !== b.isAnnouncement) {
-          return (
-            (b.isAnnouncement === true ? 1 : 0) -
-            (a.isAnnouncement === true ? 1 : 0)
-          );
-        }
-        if (a.publishedAt && b.publishedAt) {
-          return (
-            new Date(b.publishedAt).getTime() -
-            new Date(a.publishedAt).getTime()
-          );
-        } else if (a.updatedAt && b.updatedAt) {
-          return (
-            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-          );
-        }
-        return 0;
-      });
-  }
+const filteredOrderedComments = computed((): IComment[] => {
+  return orderedComments.value.filter(
+    (comment) => !comment.deletedAt || comment.totalReplies > 0
+  );
+});
 
-  get filteredOrderedComments(): IComment[] {
-    return this.orderedComments.filter(
-      (comment) => !comment.deletedAt || comment.totalReplies > 0
-    );
-  }
+const isEventOrganiser = computed((): boolean => {
+  const organizerId =
+    props.event?.organizerActor?.id || props.event?.attributedTo?.id;
+  return organizerId !== undefined && currentActor.value?.id === organizerId;
+});
 
-  get isEventOrganiser(): boolean {
-    const organizerId =
-      this.event?.organizerActor?.id || this.event?.attributedTo?.id;
-    return organizerId !== undefined && this.currentActor?.id === organizerId;
-  }
+const areCommentsClosed = computed((): boolean => {
+  return (
+    currentActor.value?.id !== undefined &&
+    props.event?.options.commentModeration !== CommentModeration.CLOSED
+  );
+});
 
-  get areCommentsClosed(): boolean {
-    return (
-      this.currentActor.id !== undefined &&
-      this.event.options.commentModeration !== CommentModeration.CLOSED
-    );
+const isAbleToComment = computed((): boolean => {
+  if (isConnected.value) {
+    return areCommentsClosed.value || isEventOrganiser.value;
   }
+  return false;
+});
 
-  get isAbleToComment(): boolean {
-    if (this.isConnected) {
-      return this.areCommentsClosed || this.isEventOrganiser;
-    }
-    return false;
-  }
-
-  get isConnected(): boolean {
-    return this.currentActor?.id != undefined;
-  }
-}
+const isConnected = computed((): boolean => {
+  return currentActor.value?.id != undefined;
+});
 </script>
 
 <style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@import "~bulma/sass/utilities/mixins.sass";
-form.new-comment {
-  padding-bottom: 1rem;
+// @use "@/styles/_mixins" as *;
+// // @import "node_modules/bulma/sass/utilities/mixins.sass";
+// form.new-comment {
+//   padding-bottom: 1rem;
 
-  .media {
-    flex-wrap: wrap;
-    justify-content: center;
-    .media-left {
-      @include mobile {
-        @include margin-right(0.5rem);
-        @include margin-left(0.5rem);
-      }
-    }
+//   .media {
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     // .media-left {
+//     //   @include >mobile {
+//     //     @include margin-right(0.5rem);
+//     //     @include margin-left(0.5rem);
+//     //   }
+//     // }
 
-    .media-content {
-      display: flex;
-      align-items: center;
-      align-content: center;
-      width: min-content;
+//     .media-content {
+//       display: flex;
+//       align-items: center;
+//       align-content: center;
+//       width: min-content;
 
-      .field {
-        flex: 1;
-        @include padding-right(10px);
-        margin-bottom: 0;
+//       .field {
+//         flex: 1;
+//         // @include padding-right(10px);
+//         margin-bottom: 0;
 
-        &.notify-participants {
-          margin-top: 0.5rem;
-        }
-      }
-    }
-  }
-}
+//         &.notify-participants {
+//           margin-top: 0.5rem;
+//         }
+//       }
+//     }
+//   }
+// }
 
-.no-comments {
-  display: flex;
-  flex-direction: column;
+// .no-comments {
+//   display: flex;
+//   flex-direction: column;
 
-  span {
-    text-align: center;
-    margin-bottom: 10px;
-  }
+//   span {
+//     text-align: center;
+//     margin-bottom: 10px;
+//   }
 
-  img {
-    max-width: 250px;
-    align-self: center;
-  }
-}
+//   img {
+//     max-width: 250px;
+//     align-self: center;
+//   }
+// }
 
-ul.comment-list li {
-  margin-bottom: 16px;
-}
+// ul.comment-list li {
+//   margin-bottom: 16px;
+// }
 
 .comment-list-enter-active,
 .comment-list-leave-active,
@@ -447,11 +458,11 @@ ul.comment-list li {
   transform-origin: center top;
 }
 
-/*.comment-empty-list-enter-active {*/
-/*    transition: opacity .5s;*/
-/*}*/
+// .comment-empty-list-enter-active {
+//     transition: opacity .5s;
+// }
 
-/*.comment-empty-list-enter {*/
-/*    opacity: 0;*/
-/*}*/
+// .comment-empty-list-enter {
+//     opacity: 0;
+// }
 </style>
diff --git a/js/src/components/Comment/EventComment.story.vue b/js/src/components/Comment/EventComment.story.vue
new file mode 100644
index 000000000..b8a125449
--- /dev/null
+++ b/js/src/components/Comment/EventComment.story.vue
@@ -0,0 +1,177 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant title="Basic">
+      <Comment
+        :comment="comment"
+        :event="event"
+        :currentActor="baseActor"
+        @create-comment="hstEvent('Create comment', $event)"
+        @delete-comment="hstEvent('Delete comment', $event)"
+        @report-comment="hstEvent('Report comment', $event)"
+      />
+    </Variant>
+    <Variant title="Announcement">
+      <Comment
+        :comment="{ ...comment, isAnnouncement: true }"
+        :event="event"
+        :currentActor="baseActor"
+        @create-comment="hstEvent('Create comment', $event)"
+        @delete-comment="hstEvent('Delete comment', $event)"
+        @report-comment="hstEvent('Report comment', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { IPerson } from "@/types/actor";
+import { IComment } from "@/types/comment.model";
+import {
+  ActorType,
+  CommentModeration,
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+} from "@/types/enums";
+import { IEvent } from "@/types/event.model";
+import { reactive } from "vue";
+import Comment from "./EventComment.vue";
+import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css";
+import { hstEvent } from "histoire/client";
+
+function setupApp({ app }) {
+  app.use(FloatingVue);
+}
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor: IPerson = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+  id: "598",
+};
+
+const baseEvent: IEvent = {
+  uuid: "",
+  title: "A very interesting event",
+  description: "Things happen",
+  beginsOn: new Date().toISOString(),
+  endsOn: new Date().toISOString(),
+  physicalAddress: {
+    description: "Somewhere",
+    street: "",
+    locality: "",
+    region: "",
+    country: "",
+    type: "",
+    postalCode: "",
+  },
+  picture: {
+    id: "",
+    name: "",
+    alt: "",
+    metadata: {},
+    url: "https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png",
+  },
+  url: "",
+  local: true,
+  slug: "",
+  publishAt: new Date().toISOString(),
+  status: EventStatus.CONFIRMED,
+  visibility: EventVisibility.PUBLIC,
+  joinOptions: EventJoinOptions.FREE,
+  draft: false,
+  participantStats: {
+    notApproved: 0,
+    notConfirmed: 0,
+    rejected: 0,
+    participant: 0,
+    creator: 0,
+    moderator: 0,
+    administrator: 0,
+    going: 0,
+  },
+  participants: { total: 0, elements: [] },
+  relatedEvents: [],
+  tags: [{ slug: "something", title: "Something" }],
+  attributedTo: undefined,
+  organizerActor: {
+    ...baseActor,
+    name: "Hello",
+    avatar: {
+      ...baseActorAvatar,
+      url: "https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png",
+    },
+  },
+  comments: [],
+  options: {
+    maximumAttendeeCapacity: 0,
+    remainingAttendeeCapacity: 0,
+    showRemainingAttendeeCapacity: false,
+    anonymousParticipation: false,
+    hideOrganizerWhenGroupEvent: false,
+    offers: [],
+    participationConditions: [],
+    attendees: [],
+    program: "",
+    commentModeration: CommentModeration.ALLOW_ALL,
+    showParticipationPrice: false,
+    showStartTime: false,
+    showEndTime: false,
+    timezone: null,
+    isOnline: false,
+  },
+  metadata: [],
+  contacts: [],
+  language: "en",
+  category: "hello",
+};
+
+const event = reactive<IEvent>(baseEvent);
+
+const comment = reactive<IComment>({
+  text: "hello",
+  local: true,
+  actor: baseActor,
+  totalReplies: 5,
+  replies: [
+    {
+      text: "a reply!",
+      id: "90",
+      actor: baseActor,
+      updatedAt: new Date().toISOString(),
+      url: "http://somewhere.tld",
+      replies: [],
+      totalReplies: 0,
+      isAnnouncement: false,
+      local: false,
+    },
+    {
+      text: "a reply to another reply!",
+      id: "92",
+      actor: baseActor,
+      updatedAt: new Date().toISOString(),
+      url: "http://somewhere.tld",
+      replies: [],
+      totalReplies: 0,
+      isAnnouncement: false,
+      local: false,
+    },
+  ],
+  isAnnouncement: false,
+  updatedAt: new Date().toISOString(),
+  url: "http://somewhere.tld",
+});
+</script>
diff --git a/js/src/components/Comment/EventComment.vue b/js/src/components/Comment/EventComment.vue
new file mode 100644
index 000000000..09ddd0e73
--- /dev/null
+++ b/js/src/components/Comment/EventComment.vue
@@ -0,0 +1,528 @@
+<template>
+  <li
+    :class="{
+      reply: comment.inReplyToComment,
+      'bg-purple-2': comment.isAnnouncement,
+      'bg-violet-1': commentSelected,
+      'shadow-none': !rootComment,
+    }"
+    class="mbz-card p-2"
+  >
+    <article :id="commentId" dir="auto">
+      <div>
+        <div class="flex items-center gap-2">
+          <div class="flex items-center gap-1" v-if="actorComment">
+            <popover-actor-card
+              :actor="actorComment"
+              :inline="true"
+              v-if="!comment.deletedAt && actorComment.avatar"
+            >
+              <figure>
+                <img
+                  class="rounded-xl"
+                  :src="actorComment.avatar.url"
+                  alt=""
+                  width="24"
+                  height="24"
+                />
+              </figure>
+            </popover-actor-card>
+            <AccountCircle v-else />
+            <strong
+              v-if="!comment.deletedAt"
+              dir="auto"
+              :class="{ organizer: commentFromOrganizer }"
+              >{{ actorComment?.name }}</strong
+            >
+          </div>
+
+          <a v-else :href="commentURL">
+            <span>{{ t("[deleted]") }}</span>
+          </a>
+          <a :href="commentURL">
+            <small v-if="comment.updatedAt">{{
+              formatDistanceToNow(new Date(comment.updatedAt), {
+                locale: dateFnsLocale,
+                addSuffix: true,
+              })
+            }}</small>
+          </a>
+          <div v-if="!comment.deletedAt" class="flex">
+            <button
+              v-if="actorComment?.id === currentActor?.id"
+              @click="deleteComment"
+            >
+              <Delete :size="16" />
+              <span class="sr-only">{{ t("Delete") }}</span>
+            </button>
+            <button @click="reportModal">
+              <Alert :size="16" />
+              <span class="sr-only">{{ t("Report") }}</span>
+            </button>
+          </div>
+        </div>
+        <div
+          v-if="!comment.deletedAt"
+          v-html="comment.text"
+          dir="auto"
+          :lang="comment.language"
+        />
+        <div v-else>{{ t("[This comment has been deleted]") }}</div>
+        <div class="" v-if="comment.totalReplies">
+          <p
+            v-if="!showReplies"
+            @click="showReplies = true"
+            class="flex cursor-pointer"
+          >
+            <ChevronDown />
+            <span>{{
+              t(
+                "View a reply",
+                {
+                  totalReplies: comment.totalReplies,
+                },
+                comment.totalReplies
+              )
+            }}</span>
+          </p>
+          <p
+            v-else-if="comment.totalReplies && showReplies"
+            @click="showReplies = false"
+            class="flex cursor-pointer"
+          >
+            <ChevronUp />
+            <span>{{ t("Hide replies") }}</span>
+          </p>
+        </div>
+        <nav
+          v-if="
+            currentActor?.id &&
+            event.options.commentModeration !== CommentModeration.CLOSED &&
+            !comment.deletedAt
+          "
+          @click="createReplyToComment()"
+          class="flex gap-1 cursor-pointer"
+        >
+          <Reply />
+          <span>{{ t("Reply") }}</span>
+        </nav>
+      </div>
+    </article>
+    <form
+      @submit.prevent="replyToComment"
+      v-if="currentActor?.id"
+      v-show="replyTo"
+    >
+      <article class="flex gap-2">
+        <figure v-if="currentActor?.avatar" class="mt-4">
+          <img
+            :src="currentActor?.avatar.url"
+            alt=""
+            width="48"
+            height="48"
+            class="rounded-md"
+          />
+        </figure>
+        <AccountCircle v-else :size="48" />
+        <div class="flex-1">
+          <div class="flex gap-1 items-center">
+            <strong>{{ currentActor?.name }}</strong>
+            <small dir="ltr">@{{ currentActor?.preferredUsername }}</small>
+          </div>
+          <div class="flex flex-col gap-2">
+            <editor
+              ref="commentEditor"
+              v-model="newComment.text"
+              mode="comment"
+              :current-actor="currentActor"
+              :aria-label="t('Comment body')"
+              class="flex-1"
+            />
+            <o-button
+              :disabled="newComment.text.trim().length === 0"
+              native-type="submit"
+              variant="primary"
+              class="self-end"
+              >{{ t("Post a reply") }}</o-button
+            >
+          </div>
+        </div>
+      </article>
+    </form>
+    <div>
+      <div>
+        <div @click="showReplies = false" />
+      </div>
+      <transition-group
+        name="comment-replies"
+        v-if="showReplies"
+        tag="ul"
+        class="flex flex-col gap-2"
+      >
+        <Comment
+          v-for="reply in comment.replies"
+          :key="reply.id"
+          :comment="reply"
+          :event="event"
+          :currentActor="currentActor"
+          :rootComment="false"
+          @create-comment="emit('create-comment', $event)"
+          @delete-comment="emit('delete-comment', $event)"
+          @report-comment="emit('report-comment', $event)"
+        />
+      </transition-group>
+    </div>
+  </li>
+</template>
+<script lang="ts" setup>
+import EditorComponent from "@/components/TextEditor.vue";
+import { formatDistanceToNow } from "date-fns";
+import { CommentModeration } from "@/types/enums";
+import { CommentModel, IComment } from "../../types/comment.model";
+import { IPerson } from "../../types/actor";
+import { IEvent } from "../../types/event.model";
+import PopoverActorCard from "../Account/PopoverActorCard.vue";
+import {
+  computed,
+  defineAsyncComponent,
+  inject,
+  onMounted,
+  ref,
+  nextTick,
+} from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import Delete from "vue-material-design-icons/Delete.vue";
+import Alert from "vue-material-design-icons/Alert.vue";
+import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
+import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
+import Reply from "vue-material-design-icons/Reply.vue";
+import type { Locale } from "date-fns";
+
+const Editor = defineAsyncComponent(
+  () => import("@/components/TextEditor.vue")
+);
+
+const props = withDefaults(
+  defineProps<{
+    comment: IComment;
+    event: IEvent;
+    currentActor: IPerson;
+    rootComment?: boolean;
+  }>(),
+  { rootComment: true }
+);
+
+const emit = defineEmits([
+  "create-comment",
+  "delete-comment",
+  "report-comment",
+]);
+
+const commentEditor = ref<typeof EditorComponent | null>(null);
+
+// Hack because Vue only exports it's own interface.
+// See https://github.com/kaorun343/vue-property-decorator/issues/257
+// @Ref() readonly commentEditor!: EditorComponent & {
+//   replyToComment: (comment: IComment) => void;
+//   focus: () => void;
+// };
+
+const newComment = ref<IComment>(new CommentModel());
+const replyTo = ref(false);
+const showReplies = ref(false);
+const route = useRoute();
+const { t } = useI18n({ useScope: "global" });
+
+onMounted(() => {
+  if (route?.hash.includes(`#comment-${props.comment.uuid}`)) {
+    showReplies.value = true;
+  }
+});
+
+const createReplyToComment = async (): Promise<void> => {
+  if (replyTo.value) {
+    replyTo.value = false;
+    newComment.value = new CommentModel();
+    return;
+  }
+  replyTo.value = true;
+  if (props.comment.actor) {
+    commentEditor.value?.replyToComment(props.comment.actor);
+    await nextTick(); // wait for the mention to be injected
+    commentEditor.value?.focus();
+  }
+};
+
+const replyToComment = (): void => {
+  newComment.value.inReplyToComment = props.comment;
+  newComment.value.originComment = props.comment.originComment ?? props.comment;
+  newComment.value.actor = props.currentActor;
+  console.debug(newComment.value);
+  emit("create-comment", newComment.value);
+  newComment.value = new CommentModel();
+  replyTo.value = false;
+  showReplies.value = true;
+};
+
+const deleteComment = (): void => {
+  emit("delete-comment", props.comment);
+  showReplies.value = false;
+};
+
+const commentSelected = computed((): boolean => {
+  return `#${commentId.value}` === route?.hash;
+});
+
+const commentFromOrganizer = computed((): boolean => {
+  const organizerId =
+    props.event?.organizerActor?.id || props.event?.attributedTo?.id;
+  return organizerId !== undefined && props.comment?.actor?.id === organizerId;
+});
+
+const commentId = computed((): string => {
+  if (props.comment.originComment)
+    return `comment-${props.comment.originComment.uuid}-${props.comment.uuid}`;
+  return `comment-${props.comment.uuid}`;
+});
+
+const commentURL = computed((): string => {
+  if (!props.comment.local && props.comment.url) return props.comment.url;
+  return `#${commentId.value}`;
+});
+
+const reportModal = (): void => {
+  if (!props.comment.actor) return;
+  emit("report-comment", props.comment);
+  // this.$buefy.modal.open({
+  //   component: ReportModal,
+  //   props: {
+  //     title: t("Report this comment"),
+  //     comment: props.comment,
+  //     onConfirm: reportComment,
+  //     outsideDomain: props.comment.actor?.domain,
+  //   },
+  //   // https://github.com/buefy/buefy/pull/3589
+  //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //   // @ts-ignore
+  //   closeButtonAriaLabel: this.t("Close"),
+  // });
+};
+
+// const reportComment = async (
+//   content: string,
+//   forward: boolean
+// ): Promise<void> => {
+//   try {
+//     if (!props.comment.actor) return;
+
+//     const { onError, onDone } = useMutation(CREATE_REPORT, () => ({
+//       variables: {
+//         eventId: props.event.id,
+//         reportedId: props.comment.actor?.id,
+//         commentsIds: [props.comment.id],
+//         content,
+//         forward,
+//       },
+//     }));
+
+//     // this.$buefy.notification.open({
+//     //   message: this.t("Comment from @{username} reported", {
+//     //     username: this.comment.actor.preferredUsername,
+//     //   }) as string,
+//     //   type: "is-success",
+//     //   position: "is-bottom-right",
+//     //   duration: 5000,
+//     // });
+//   } catch (e: any) {
+//     if (e.message) {
+//       // Snackbar.open({
+//       //   message: e.message,
+//       //   type: "is-danger",
+//       //   position: "is-bottom",
+//       // });
+//     }
+//   }
+// };
+const actorComment = computed(() => props.comment.actor);
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+</script>
+<style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
+form.reply {
+  padding-bottom: 1rem;
+}
+
+.first-line {
+  margin-bottom: 3px;
+
+  * {
+    padding: 0 5px 0 0;
+  }
+
+  strong.organizer {
+    border-radius: 12px;
+    color: white;
+    padding: 0 6px;
+  }
+
+  // & > small {
+  //   @include margin-left(0.3rem);
+  // }
+}
+
+.editor-line {
+  display: flex;
+  max-width: calc(80rem - 64px);
+
+  .editor {
+    flex: 1;
+    // @include padding-right(10px);
+    margin-bottom: 0;
+  }
+}
+
+a.comment-link {
+  text-decoration: none;
+  // @include margin-left(5px);
+  color: text;
+  &:hover {
+    text-decoration: underline;
+  }
+  small {
+    &:hover {
+      color: hsl(0, 0%, 21%);
+    }
+  }
+}
+
+.comment-element {
+  padding: 0.25rem;
+  border-radius: 5px;
+
+  &.announcement {
+    small {
+      color: hsl(0, 0%, 21%);
+    }
+  }
+
+  &.selected {
+    .reply-btn,
+    small,
+    span,
+    strong,
+    a.comment-link:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // .media-left {
+  //   @include margin-right(5px);
+  // }
+}
+
+.root-comment .replies {
+  display: flex;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // @include margin-right(10px);
+
+    .vertical-border {
+      width: 3px;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.05);
+      margin: 10px calc(1rem + 1px);
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+
+.media .media-content {
+  overflow-x: initial;
+  .content {
+    text-align: start;
+    .editor-line {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .icons {
+    display: none;
+  }
+}
+
+.media:hover .media-content .icons {
+  display: inline;
+
+  button {
+    cursor: pointer;
+    border: none;
+    background: none;
+  }
+}
+
+.load-replies {
+  cursor: pointer;
+
+  & > p > span {
+    font-weight: bold;
+  }
+}
+
+.level-item.reply-btn {
+  font-weight: bold;
+}
+
+article {
+  border-radius: 4px;
+  margin-bottom: 5px;
+}
+
+.comment-replies {
+  flex-grow: 1;
+}
+
+.comment-replies-enter-active,
+.comment-replies-leave-active,
+.comment-replies-move {
+  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
+  transition-property: opacity, transform;
+}
+
+.comment-replies-enter {
+  opacity: 0;
+  transform: translateX(50px) scaleY(0.5);
+}
+
+.comment-replies-enter-to {
+  opacity: 1;
+  transform: translateX(0) scaleY(1);
+}
+
+.comment-replies-leave-active {
+  position: absolute;
+}
+
+.comment-replies-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: center top;
+}
+
+// .reply-action .icon {
+//   @include padding-right(0.4rem);
+// }
+
+.visually-hidden {
+  display: none;
+}
+</style>
diff --git a/js/src/components/Dashboard/LinkedNumberDashboardTile.vue b/js/src/components/Dashboard/LinkedNumberDashboardTile.vue
new file mode 100644
index 000000000..76f52b7d5
--- /dev/null
+++ b/js/src/components/Dashboard/LinkedNumberDashboardTile.vue
@@ -0,0 +1,25 @@
+<template>
+  <router-link
+    v-if="to?.name"
+    :to="to"
+    class="bg-white dark:bg-black mb-4 shadow-md rounded p-4"
+  >
+    <NumberDashboardTile :number="number" :subtitle="subtitle" :style="false">
+      <template #subtitle>
+        <slot name="subtitle" />
+      </template>
+    </NumberDashboardTile>
+  </router-link>
+</template>
+<script lang="ts" setup>
+import NumberDashboardTile from "./NumberDashboardTile.vue";
+defineProps<{
+  number?: number;
+  subtitle?: string;
+  to?: {
+    name: string;
+    params?: Record<string, any>;
+    query?: Record<string, any>;
+  };
+}>();
+</script>
diff --git a/js/src/components/Dashboard/NumberDashboardTile.vue b/js/src/components/Dashboard/NumberDashboardTile.vue
new file mode 100644
index 000000000..28f2d9127
--- /dev/null
+++ b/js/src/components/Dashboard/NumberDashboardTile.vue
@@ -0,0 +1,20 @@
+<template>
+  <article
+    :class="{ 'bg-white dark:bg-black mb-4 shadow-md rounded p-4': style }"
+  >
+    <p class="text-violet-3 text-4xl font-bold">{{ number }}</p>
+    <slot name="subtitle">
+      {{ subtitle }}
+    </slot>
+  </article>
+</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    number?: number;
+    subtitle?: string;
+    style?: boolean;
+  }>(),
+  { style: true }
+);
+</script>
diff --git a/js/src/components/Discussion/DiscussionComment.story.vue b/js/src/components/Discussion/DiscussionComment.story.vue
new file mode 100644
index 000000000..86621443f
--- /dev/null
+++ b/js/src/components/Discussion/DiscussionComment.story.vue
@@ -0,0 +1,50 @@
+<template>
+  <Story>
+    <Variant title="Basic">
+      <DiscussionComment v-model="comment" :currentActor="baseActor" />
+    </Variant>
+    <Variant title="Deleted comment">
+      <DiscussionComment v-model="deletedComment" :currentActor="baseActor" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IPerson } from "@/types/actor";
+import { IComment } from "@/types/comment.model";
+import { ActorType } from "@/types/enums";
+import { reactive } from "vue";
+import DiscussionComment from "./DiscussionComment.vue";
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor: IPerson = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+  id: "598",
+};
+
+const comment = reactive<IComment>({
+  text: "Hello there",
+  publishedAt: new Date().toString(),
+  actor: baseActor,
+});
+
+const deletedComment = reactive<IComment>({
+  ...comment,
+  actor: null,
+  deletedAt: new Date().toString(),
+});
+</script>
diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index ff8a0f848..d53a754a1 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -1,23 +1,26 @@
 <template>
-  <article class="comment">
-    <div class="avatar">
-      <figure
-        class="image is-48x48"
-        v-if="comment.actor && comment.actor.avatar"
-      >
-        <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
+  <article class="flex gap-2 bg-white dark:bg-transparent">
+    <div class="">
+      <figure class="" v-if="comment.actor && comment.actor.avatar">
+        <img
+          class="rounded-xl"
+          :src="comment.actor.avatar.url"
+          alt=""
+          :width="48"
+          :height="48"
+        />
       </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <AccountCircle :size="48" v-else />
     </div>
-    <div class="body">
-      <div class="meta" dir="auto">
-        <span
-          class="first-line name"
+    <div class="mb-2 pt-1 flex-1">
+      <div class="flex items-center gap-1" dir="auto">
+        <div
+          class="flex flex-1 flex-col"
           v-if="comment.actor && !comment.deletedAt"
         >
-          <strong>{{ comment.actor.name }}</strong>
+          <strong v-if="comment.actor.name">{{ comment.actor.name }}</strong>
           <small>@{{ usernameWithDomain(comment.actor) }}</small>
-        </span>
+        </div>
         <span v-else class="name comment-link has-text-grey">
           {{ $t("[deleted]") }}
         </span>
@@ -26,39 +29,44 @@
           v-if="
             comment.actor &&
             !comment.deletedAt &&
-            comment.actor.id === currentActor.id
+            comment.actor.id === currentActor?.id
           "
         >
-          <b-dropdown aria-role="list">
-            <b-icon slot="trigger" role="button" icon="dots-horizontal" />
+          <o-dropdown aria-role="list" position="bottom-left">
+            <template #trigger>
+              <o-icon role="button" icon="dots-horizontal" />
+            </template>
 
-            <b-dropdown-item
-              v-if="comment.actor.id === currentActor.id"
+            <o-dropdown-item
+              v-if="comment.actor?.id === currentActor?.id"
               @click="toggleEditMode"
               aria-role="menuitem"
             >
-              <b-icon icon="pencil"></b-icon>
+              <o-icon icon="pencil"></o-icon>
               {{ $t("Edit") }}
-            </b-dropdown-item>
-            <b-dropdown-item
-              v-if="comment.actor.id === currentActor.id"
-              @click="$emit('delete-comment', comment)"
+            </o-dropdown-item>
+            <o-dropdown-item
+              v-if="comment.actor?.id === currentActor?.id"
+              @click="emit('deleteComment', comment)"
               aria-role="menuitem"
             >
-              <b-icon icon="delete"></b-icon>
+              <o-icon icon="delete"></o-icon>
               {{ $t("Delete") }}
-            </b-dropdown-item>
-            <!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
-              <b-icon icon="flag" />
+            </o-dropdown-item>
+            <!-- <o-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
+              <o-icon icon="flag" />
               {{ $t("Report") }}
-            </b-dropdown-item> -->
-          </b-dropdown>
+            </o-dropdown-item> -->
+          </o-dropdown>
         </span>
-        <div class="post-infos">
-          <span :title="comment.insertedAt | formatDateTimeString">
+        <div class="self-center">
+          <span
+            :title="formatDateTimeString(comment.updatedAt?.toString())"
+            v-if="comment.updatedAt"
+          >
             {{
-              formatDistanceToNow(new Date(comment.updatedAt), {
-                locale: $dateFnsLocale,
+              formatDistanceToNow(new Date(comment.updatedAt?.toString()), {
+                locale: dateFnsLocale,
               }) || $t("Right now")
             }}</span
           >
@@ -69,20 +77,24 @@
         class="text-wrapper"
         dir="auto"
       >
-        <div class="description-content" v-html="comment.text"></div>
+        <div
+          class="prose md:prose-lg lg:prose-xl dark:prose-invert"
+          v-html="comment.text"
+        ></div>
         <p
+          class="text-sm"
           v-if="
             comment.insertedAt &&
             comment.updatedAt &&
             new Date(comment.insertedAt).getTime() !==
               new Date(comment.updatedAt).getTime()
           "
-          :title="comment.updatedAt | formatDateTimeString"
+          :title="formatDateTimeString(comment.updatedAt.toString())"
         >
           {{
             $t("Edited {ago}", {
               ago: formatDistanceToNow(new Date(comment.updatedAt), {
-                locale: $dateFnsLocale,
+                locale: dateFnsLocale,
               }),
             })
           }}
@@ -92,66 +104,68 @@
         {{ $t("[This comment has been deleted by it's author]") }}
       </div>
       <form v-else class="edition" @submit.prevent="updateComment">
-        <editor v-model="updatedComment" :aria-label="$t('Comment body')" />
-        <div class="buttons">
-          <b-button
+        <Editor
+          v-model="updatedComment"
+          :aria-label="$t('Comment body')"
+          :current-actor="currentActor"
+        />
+        <div class="flex gap-2 mt-2">
+          <o-button
             native-type="submit"
             :disabled="['<p></p>', '', comment.text].includes(updatedComment)"
-            type="is-primary"
-            >{{ $t("Update") }}</b-button
+            variant="primary"
+            >{{ $t("Update") }}</o-button
           >
-          <b-button native-type="button" @click="toggleEditMode">{{
+          <o-button native-type="button" @click="toggleEditMode">{{
             $t("Cancel")
-          }}</b-button>
+          }}</o-button>
         </div>
       </form>
     </div>
   </article>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { formatDistanceToNow } from "date-fns";
 import { IComment } from "../../types/comment.model";
-import { usernameWithDomain, IPerson } from "../../types/actor";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
+import { IPerson, usernameWithDomain } from "../../types/actor";
+import { computed, defineAsyncComponent, inject, ref } from "vue";
+import { formatDateTimeString } from "@/filters/datetime";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import type { Locale } from "date-fns";
 
-@Component({
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-  components: {
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-  },
-})
-export default class DiscussionComment extends Vue {
-  @Prop({ required: true, type: Object }) comment!: IComment;
+const Editor = defineAsyncComponent(
+  () => import("@/components/TextEditor.vue")
+);
 
-  editMode = false;
+const props = defineProps<{
+  modelValue: IComment;
+  currentActor: IPerson;
+}>();
 
-  updatedComment = "";
+const emit = defineEmits(["update:modelValue", "deleteComment"]);
 
-  currentActor!: IPerson;
+const comment = computed(() => props.modelValue);
 
-  usernameWithDomain = usernameWithDomain;
+const editMode = ref(false);
 
-  formatDistanceToNow = formatDistanceToNow;
+const updatedComment = ref("");
 
-  // isReportModalActive: boolean = false;
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
-  toggleEditMode(): void {
-    this.updatedComment = this.comment.text;
-    this.editMode = !this.editMode;
-  }
+// isReportModalActive: boolean = false;
 
-  updateComment(): void {
-    this.$emit("update-comment", {
-      ...this.comment,
-      text: this.updatedComment,
-    });
-    this.toggleEditMode();
-  }
-}
+const toggleEditMode = (): void => {
+  updatedComment.value = comment.value.text;
+  editMode.value = !editMode.value;
+};
+
+const updateComment = (): void => {
+  emit("update:modelValue", {
+    ...comment.value,
+    text: updatedComment.value,
+  });
+  toggleEditMode();
+};
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
@@ -170,7 +184,7 @@ article.comment {
       padding: 0 1rem 0.3em;
 
       .name {
-        @include margin-right(auto);
+        // @include margin-right(auto);
         flex: 1 1 auto;
         overflow: hidden;
 
@@ -178,8 +192,6 @@ article.comment {
           display: block;
           line-height: 1rem;
         }
-
-        color: #3c376e;
       }
 
       .icons {
@@ -200,39 +212,38 @@ article.comment {
       div.description-content {
         padding-bottom: 0.3rem;
 
-        ::v-deep h1 {
+        :deep(h1) {
           font-size: 2rem;
         }
 
-        ::v-deep h2 {
+        :deep(h2) {
           font-size: 1.5rem;
         }
 
-        ::v-deep h3 {
+        :deep(h3) {
           font-size: 1.25rem;
         }
 
-        ::v-deep ul {
+        :deep(ul) {
           list-style-type: disc;
         }
 
-        ::v-deep li {
+        :deep(li) {
           margin: 10px auto 10px 2rem;
         }
 
-        ::v-deep blockquote {
+        :deep(blockquote) {
           border-left: 0.2em solid #333;
           display: block;
-          @include padding-left(1em);
+          // @include padding-left(1em);
         }
 
-        ::v-deep p {
+        :deep(p) {
           margin: 10px auto;
 
           a {
             display: inline-block;
             padding: 0.3rem;
-            background: $secondary;
             color: #111;
 
             &:empty {
diff --git a/js/src/components/Discussion/DiscussionListItem.story.vue b/js/src/components/Discussion/DiscussionListItem.story.vue
new file mode 100644
index 000000000..de1ff2a66
--- /dev/null
+++ b/js/src/components/Discussion/DiscussionListItem.story.vue
@@ -0,0 +1,33 @@
+<template>
+  <Story>
+    <Variant title="Basic">
+      <DiscussionListItem :discussion="discussion" />
+    </Variant>
+    <Variant title="Deleted comment">
+      <DiscussionListItem :discussion="discussionWithDeletedComment" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IDiscussion } from "@/types/discussions";
+import { reactive } from "vue";
+import DiscussionListItem from "./DiscussionListItem.vue";
+
+const discussion = reactive<IDiscussion>({
+  title: "A discussion",
+  comments: { total: 5, elements: [] },
+  insertedAt: new Date().toString(),
+  updatedAt: new Date().toString(),
+  deletedAt: null,
+  lastComment: { text: "Hello there", publishedAt: new Date().toString() },
+});
+
+const discussionWithDeletedComment = reactive<IDiscussion>({
+  ...discussion,
+  lastComment: {
+    ...discussion.lastComment,
+    deletedAt: new Date().toString(),
+  },
+});
+</script>
diff --git a/js/src/components/Discussion/DiscussionListItem.vue b/js/src/components/Discussion/DiscussionListItem.vue
index 7f8998330..ecc982a2b 100644
--- a/js/src/components/Discussion/DiscussionListItem.vue
+++ b/js/src/components/Discussion/DiscussionListItem.vue
@@ -1,126 +1,93 @@
 <template>
   <router-link
-    class="discussion-minimalist-card-wrapper"
+    class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b"
     dir="auto"
     :to="{
       name: RouteName.DISCUSSION,
       params: { slug: discussion.slug, id: discussion.id },
     }"
   >
-    <div class="media-left">
+    <div class="">
       <figure
-        class="image is-32x32"
+        class=""
         v-if="
-          discussion.lastComment.actor && discussion.lastComment.actor.avatar
+          discussion.lastComment?.actor && discussion.lastComment.actor.avatar
         "
       >
         <img
-          class="is-rounded"
+          class="rounded-xl"
           :src="discussion.lastComment.actor.avatar.url"
-          alt
+          alt=""
+          width="32"
+          height="32"
         />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <account-circle :size="32" v-else />
     </div>
-    <div class="title-info-wrapper">
-      <div class="title-and-date">
-        <p class="discussion-minimalist-title">{{ discussion.title }}</p>
-        <span
-          class="has-text-grey-dark"
-          :title="actualDate | formatDateTimeString"
-        >
-          {{
-            formatDistanceToNowStrict(new Date(actualDate), {
-              locale: $dateFnsLocale,
-            }) || $t("Right now")
-          }}</span
+    <div class="flex-1">
+      <div class="flex items-center">
+        <p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">
+          {{ discussion.title }}
+        </p>
+        <span class="" :title="formatDateTimeString(actualDate)">
+          {{ distanceToNow }}</span
         >
       </div>
       <div
-        class="ellipsis has-text-grey-dark"
+        class="line-clamp-2"
         dir="auto"
-        v-if="!discussion.lastComment.deletedAt"
+        v-if="!discussion.lastComment?.deletedAt"
       >
         {{ htmlTextEllipsis }}
       </div>
-      <div v-else class="has-text-grey-dark">
-        {{ $t("[This comment has been deleted]") }}
+      <div v-else class="">
+        {{ t("[This comment has been deleted]") }}
       </div>
     </div>
   </router-link>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { formatDistanceToNowStrict } from "date-fns";
-import { IDiscussion } from "../../types/discussions";
-import RouteName from "../../router/name";
+import { IDiscussion } from "@/types/discussions";
+import RouteName from "@/router/name";
+import { computed, inject } from "vue";
+import { formatDateTimeString } from "@/filters/datetime";
+import type { Locale } from "date-fns";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { useI18n } from "vue-i18n";
 
-@Component
-export default class DiscussionListItem extends Vue {
-  @Prop({ required: true, type: Object }) discussion!: IDiscussion;
+const props = defineProps<{
+  discussion: IDiscussion;
+}>();
 
-  RouteName = RouteName;
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+const { t } = useI18n({ useScope: "global" });
 
-  formatDistanceToNowStrict = formatDistanceToNowStrict;
+const distanceToNow = computed(() => {
+  return (
+    formatDistanceToNowStrict(new Date(actualDate.value), {
+      locale: dateFnsLocale,
+    }) ?? t("Right now")
+  );
+});
 
-  get htmlTextEllipsis(): string {
-    const element = document.createElement("div");
-    if (this.discussion.lastComment && this.discussion.lastComment.text) {
-      element.innerHTML = this.discussion.lastComment.text
-        .replace(/<br\s*\/?>/gi, " ")
-        .replace(/<p>/gi, " ");
-    }
-    return element.innerText;
+const htmlTextEllipsis = computed((): string => {
+  const element = document.createElement("div");
+  if (props.discussion.lastComment && props.discussion.lastComment.text) {
+    element.innerHTML = props.discussion.lastComment.text
+      .replace(/<br\s*\/?>/gi, " ")
+      .replace(/<p>/gi, " ");
   }
+  return element.innerText;
+});
 
-  get actualDate(): string | Date | undefined {
-    if (
-      this.discussion.updatedAt === this.discussion.insertedAt &&
-      this.discussion.lastComment
-    ) {
-      return this.discussion.lastComment.publishedAt;
-    }
-    return this.discussion.updatedAt;
+const actualDate = computed((): string => {
+  if (
+    props.discussion.updatedAt === props.discussion.insertedAt &&
+    props.discussion.lastComment?.publishedAt
+  ) {
+    return props.discussion.lastComment.publishedAt;
   }
-}
+  return props.discussion.updatedAt;
+});
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.discussion-minimalist-card-wrapper {
-  text-decoration: none;
-  display: flex;
-  width: 100%;
-  color: initial;
-  border-bottom: 1px solid #e9e9e9;
-  align-items: center;
-
-  .calendar-icon {
-    @include margin-right(1rem);
-  }
-
-  .title-info-wrapper {
-    flex: 2;
-
-    .title-and-date {
-      display: flex;
-      align-items: center;
-
-      .discussion-minimalist-title {
-        color: #3c376e;
-        font-family: Roboto, Helvetica, Arial, serif;
-        font-size: 19px;
-        font-weight: 600;
-        flex: 1;
-      }
-    }
-
-    div.ellipsis {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      font-size: 15px;
-    }
-  }
-}
-</style>
diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
deleted file mode 100644
index a4628b39e..000000000
--- a/js/src/components/Editor.vue
+++ /dev/null
@@ -1,593 +0,0 @@
-<template>
-  <div v-if="editor">
-    <div
-      class="editor"
-      :class="{ short_mode: isShortMode, comment_mode: isCommentMode }"
-      id="tiptab-editor"
-      :data-actor-id="currentActor && currentActor.id"
-    >
-      <div
-        class="menubar bar-is-hidden"
-        v-if="isDescriptionMode"
-        :editor="editor"
-      >
-        <button
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('bold') }"
-          @click="editor.chain().focus().toggleBold().run()"
-          type="button"
-          :title="$t('Bold')"
-        >
-          <b-icon icon="format-bold" />
-        </button>
-
-        <button
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('italic') }"
-          @click="editor.chain().focus().toggleItalic().run()"
-          type="button"
-          :title="$t('Italic')"
-        >
-          <b-icon icon="format-italic" />
-        </button>
-
-        <button
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('underline') }"
-          @click="editor.chain().focus().toggleUnderline().run()"
-          type="button"
-          :title="$t('Underline')"
-        >
-          <b-icon icon="format-underline" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-          type="button"
-          :title="$t('Heading Level 1')"
-        >
-          <b-icon icon="format-header-1" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-          type="button"
-          :title="$t('Heading Level 2')"
-        >
-          <b-icon icon="format-header-2" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-          type="button"
-          :title="$t('Heading Level 3')"
-        >
-          <b-icon icon="format-header-3" />
-        </button>
-
-        <button
-          class="menubar__button"
-          @click="showLinkMenu()"
-          :class="{ 'is-active': editor.isActive('link') }"
-          type="button"
-          :title="$t('Add link')"
-        >
-          <b-icon icon="link" />
-        </button>
-
-        <button
-          v-if="editor.isActive('link')"
-          class="menubar__button"
-          @click="editor.chain().focus().unsetLink().run()"
-          type="button"
-          :title="$t('Remove link')"
-        >
-          <b-icon icon="link-off" />
-        </button>
-
-        <button
-          class="menubar__button"
-          v-if="!isBasicMode"
-          @click="showImagePrompt()"
-          type="button"
-          :title="$t('Add picture')"
-        >
-          <b-icon icon="image" />
-        </button>
-
-        <button
-          class="menubar__button"
-          v-if="!isBasicMode"
-          :class="{ 'is-active': editor.isActive('bulletList') }"
-          @click="editor.chain().focus().toggleBulletList().run()"
-          type="button"
-          :title="$t('Bullet list')"
-        >
-          <b-icon icon="format-list-bulleted" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('orderedList') }"
-          @click="editor.chain().focus().toggleOrderedList().run()"
-          type="button"
-          :title="$t('Ordered list')"
-        >
-          <b-icon icon="format-list-numbered" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          :class="{ 'is-active': editor.isActive('blockquote') }"
-          @click="editor.chain().focus().toggleBlockquote().run()"
-          type="button"
-          :title="$t('Quote')"
-        >
-          <b-icon icon="format-quote-close" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          @click="editor.chain().focus().undo().run()"
-          type="button"
-          :title="$t('Undo')"
-        >
-          <b-icon icon="undo" />
-        </button>
-
-        <button
-          v-if="!isBasicMode"
-          class="menubar__button"
-          @click="editor.chain().focus().redo().run()"
-          type="button"
-          :title="$t('Redo')"
-        >
-          <b-icon icon="redo" />
-        </button>
-      </div>
-
-      <bubble-menu
-        v-if="editor && isCommentMode"
-        class="bubble-menu"
-        :editor="editor"
-        :tippy-options="{ duration: 100 }"
-      >
-        <button
-          class="menububble__button"
-          :class="{ 'is-active': editor.isActive('bold') }"
-          @click="editor.chain().focus().toggleBold().run()"
-          type="button"
-          :title="$t('Bold')"
-        >
-          <b-icon icon="format-bold" />
-          <span class="visually-hidden">{{ $t("Bold") }}</span>
-        </button>
-
-        <button
-          class="menububble__button"
-          :class="{ 'is-active': editor.isActive('italic') }"
-          @click="editor.chain().focus().toggleItalic().run()"
-          type="button"
-          :title="$t('Italic')"
-        >
-          <b-icon icon="format-italic" />
-          <span class="visually-hidden">{{ $t("Italic") }}</span>
-        </button>
-      </bubble-menu>
-
-      <editor-content class="editor__content" :editor="editor" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-2";
-import Blockquote from "@tiptap/extension-blockquote";
-import BulletList from "@tiptap/extension-bullet-list";
-import Heading from "@tiptap/extension-heading";
-import Document from "@tiptap/extension-document";
-import Paragraph from "@tiptap/extension-paragraph";
-import Bold from "@tiptap/extension-bold";
-import Italic from "@tiptap/extension-italic";
-import Strike from "@tiptap/extension-strike";
-import Text from "@tiptap/extension-text";
-import Dropcursor from "@tiptap/extension-dropcursor";
-import Gapcursor from "@tiptap/extension-gapcursor";
-import History from "@tiptap/extension-history";
-import { IActor, IPerson, usernameWithDomain } from "../types/actor";
-import CustomImage from "./Editor/Image";
-import { UPLOAD_MEDIA } from "../graphql/upload";
-import { listenFileUpload } from "../utils/upload";
-import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
-import Mention from "@tiptap/extension-mention";
-import MentionOptions from "./Editor/Mention";
-import OrderedList from "@tiptap/extension-ordered-list";
-import ListItem from "@tiptap/extension-list-item";
-import Underline from "@tiptap/extension-underline";
-import Link from "@tiptap/extension-link";
-import { AutoDir } from "./Editor/Autodir";
-import sanitizeHtml from "sanitize-html";
-
-@Component({
-  components: { EditorContent, BubbleMenu },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-})
-export default class EditorComponent extends Vue {
-  @Prop({ required: true }) value!: string;
-
-  @Prop({ required: false, default: "description" }) mode!: string;
-
-  @Prop({ required: false, default: 100_000_000 }) maxSize!: number;
-
-  @Prop({ required: false }) ariaLabel!: string;
-
-  currentActor!: IPerson;
-
-  editor: Editor | null = null;
-
-  get isDescriptionMode(): boolean {
-    return this.mode === "description" || this.isBasicMode;
-  }
-
-  get isCommentMode(): boolean {
-    return this.mode === "comment";
-  }
-
-  get isShortMode(): boolean {
-    return this.isBasicMode;
-  }
-
-  get isBasicMode(): boolean {
-    return this.mode === "basic";
-  }
-
-  // eslint-disable-next-line
-  insertMention(obj: { range: any; attrs: any }) {
-    console.log("initialize Mention");
-  }
-
-  observer!: MutationObserver | null;
-
-  mounted(): void {
-    this.editor = new Editor({
-      editorProps: {
-        attributes: {
-          "aria-multiline": this.isShortMode.toString(),
-          "aria-label": this.ariaLabel,
-          role: "textbox",
-        },
-        transformPastedHTML: this.transformPastedHTML,
-      },
-      extensions: [
-        Blockquote,
-        BulletList,
-        Heading,
-        Document,
-        Paragraph,
-        Text,
-        OrderedList,
-        ListItem,
-        Mention.configure(MentionOptions),
-        CustomImage,
-        AutoDir,
-        Underline,
-        Bold,
-        Italic,
-        Strike,
-        Dropcursor,
-        Gapcursor,
-        History,
-        Link.configure({
-          HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
-        }),
-      ],
-      injectCSS: false,
-      content: this.value,
-      onUpdate: () => {
-        this.$emit("input", this.editor?.getHTML());
-      },
-    });
-  }
-
-  transformPastedHTML(html: string): string {
-    // When using comment mode, limit to acceptable tags
-    if (this.isCommentMode) {
-      return sanitizeHtml(html, {
-        allowedTags: ["b", "i", "em", "strong", "a"],
-        allowedAttributes: {
-          a: ["href", "rel", "target"],
-        },
-      });
-    }
-    return html;
-  }
-
-  @Watch("value")
-  onValueChanged(val: string): void {
-    if (!this.editor) return;
-    if (val !== this.editor.getHTML()) {
-      this.editor.commands.setContent(val, false);
-    }
-  }
-
-  /**
-   * Show a popup to get the link from the URL
-   */
-  showLinkMenu(): void {
-    this.$buefy.dialog.prompt({
-      message: this.$t("Enter the link URL") as string,
-      inputAttrs: {
-        type: "url",
-      },
-      trapFocus: true,
-      onConfirm: (value) => {
-        if (!this.editor) return undefined;
-        this.editor.chain().focus().setLink({ href: value }).run();
-      },
-    });
-  }
-
-  /**
-   * Show a file prompt, upload picture and insert it into editor
-   */
-  async showImagePrompt(): Promise<void> {
-    const image = await listenFileUpload();
-    try {
-      const { data } = await this.$apollo.mutate({
-        mutation: UPLOAD_MEDIA,
-        variables: {
-          file: image,
-          name: image.name,
-        },
-      });
-      if (data.uploadMedia && data.uploadMedia.url && this.editor) {
-        this.editor
-          .chain()
-          .focus()
-          .setImage({
-            src: data.uploadMedia.url,
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            "data-media-id": data.uploadMedia.id,
-          })
-          .run();
-      }
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  /**
-   * We use this to programatically insert an actor mention when creating a reply to comment
-   */
-  replyToComment(actor: IActor): void {
-    if (!this.editor) return;
-    this.editor
-      .chain()
-      .focus()
-      .insertContent({
-        type: "mention",
-        attrs: {
-          id: usernameWithDomain(actor),
-        },
-      })
-      .insertContent(" ")
-      .run();
-  }
-
-  focus(): void {
-    this.editor?.chain().focus("end");
-  }
-
-  beforeDestroy(): void {
-    this.editor?.destroy();
-  }
-}
-</script>
-<style lang="scss">
-@use "@/styles/_mixins" as *;
-@import "./Editor/style.scss";
-
-$color-black: #000;
-$color-white: #eee;
-
-.menubar {
-  margin-bottom: 1rem;
-  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
-
-  &__button {
-    font-weight: bold;
-    display: inline-flex;
-    background: transparent;
-    border: 0;
-    color: $color-black;
-    padding: 0.2rem 0.5rem;
-    @include margin-right(0.2rem);
-    border-radius: 3px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: rgba($color-black, 0.05);
-    }
-
-    &.is-active {
-      background-color: rgba($color-black, 0.1);
-    }
-  }
-}
-
-.editor {
-  position: relative;
-
-  p.is-empty:first-child::before {
-    content: attr(data-empty-text);
-    float: left;
-    color: #aaa;
-    pointer-events: none;
-    height: 0;
-    font-style: italic;
-  }
-
-  .editor__content div.ProseMirror {
-    min-height: 10rem;
-  }
-
-  &.short_mode {
-    div.ProseMirror {
-      min-height: 5rem;
-    }
-  }
-
-  &.comment_mode {
-    div.ProseMirror {
-      min-height: 2rem;
-    }
-  }
-
-  &__content {
-    div.ProseMirror {
-      min-height: 2.5rem;
-      box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
-      background-color: white;
-      border-radius: 4px;
-      color: #363636;
-      border: 1px solid #dbdbdb;
-      padding: 12px 6px;
-
-      &:focus {
-        border-color: $background-color;
-        outline: none;
-      }
-    }
-
-    h1 {
-      font-size: 2em;
-    }
-
-    h2 {
-      font-size: 1.5em;
-    }
-
-    h3 {
-      font-size: 1.25em;
-    }
-
-    ul,
-    ol {
-      @include padding-left(1rem);
-    }
-
-    ul {
-      list-style-type: disc;
-    }
-
-    li > p,
-    li > ol,
-    li > ul {
-      margin: 0;
-    }
-
-    blockquote {
-      border-left: 3px solid rgba($color-black, 0.1);
-      color: rgba($color-black, 0.8);
-      @include padding-left(0.8rem);
-      font-style: italic;
-
-      p {
-        margin: 0;
-      }
-    }
-
-    img {
-      max-width: 100%;
-      border-radius: 3px;
-    }
-  }
-}
-
-.bubble-menu {
-  display: flex;
-  background-color: #0d0d0d;
-  padding: 0.2rem;
-  border-radius: 0.5rem;
-
-  button {
-    border: none;
-    background: none;
-    color: #fff;
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
-    cursor: pointer;
-
-    &:hover,
-    &.is-active {
-      opacity: 1;
-    }
-  }
-}
-
-.suggestion-list {
-  padding: 0.2rem;
-  border: 2px solid rgba($color-black, 0.1);
-  font-size: 0.8rem;
-  font-weight: bold;
-  &__no-results {
-    padding: 0.2rem 0.5rem;
-  }
-  &__item {
-    border-radius: 5px;
-    padding: 0.2rem 0.5rem;
-    margin-bottom: 0.2rem;
-    cursor: pointer;
-    &:last-child {
-      margin-bottom: 0;
-    }
-    &.is-selected,
-    &:hover {
-      background-color: rgba($color-white, 0.2);
-    }
-    &.is-empty {
-      opacity: 0.5;
-    }
-  }
-
-  .media + .media {
-    margin-top: 0;
-    padding-top: 0;
-  }
-}
-.tippy-box[data-theme~="dark"] {
-  background-color: $color-black;
-  padding: 0;
-  font-size: 1rem;
-  text-align: inherit;
-  color: $color-white;
-  border-radius: 5px;
-}
-
-.visually-hidden {
-  display: none;
-}
-</style>
diff --git a/js/src/components/Editor/Image.ts b/js/src/components/Editor/Image.ts
index 07918e19c..2d8e91fab 100644
--- a/js/src/components/Editor/Image.ts
+++ b/js/src/components/Editor/Image.ts
@@ -1,10 +1,9 @@
 import { UPLOAD_MEDIA } from "@/graphql/upload";
-import apolloProvider from "@/vue-apollo";
-import { ApolloClient } from "@apollo/client/core/ApolloClient";
+import { apolloClient } from "@/vue-apollo";
 import { Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import Image from "@tiptap/extension-image";
-import { NormalizedCacheObject } from "@apollo/client/cache";
+import { provideApolloClient, useMutation } from "@vue/apollo-composable";
 
 /* eslint-disable class-methods-use-this */
 
@@ -60,21 +59,25 @@ const CustomImage = Image.extend({
                 top: realEvent.clientY,
               });
               if (!coordinates) return false;
-              const client =
-                apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
 
-              try {
-                images.forEach(async (image) => {
-                  const { data } = await client.mutate({
-                    mutation: UPLOAD_MEDIA,
-                    variables: {
-                      file: image,
-                      name: image.name,
-                    },
-                  });
+              images.forEach((image) => {
+                const { onDone, onError } = provideApolloClient(apolloClient)(
+                  () =>
+                    useMutation<{ uploadMedia: { url: string; id: string } }>(
+                      UPLOAD_MEDIA,
+                      () => ({
+                        variables: {
+                          file: image,
+                          name: image.name,
+                        },
+                      })
+                    )
+                );
+
+                onDone(({ data }) => {
                   const node = schema.nodes.image.create({
-                    src: data.uploadMedia.url,
-                    "data-media-id": data.uploadMedia.id,
+                    src: data?.uploadMedia.url,
+                    "data-media-id": data?.uploadMedia.id,
                   });
                   const transaction = view.state.tr.insert(
                     coordinates.pos,
@@ -82,11 +85,13 @@ const CustomImage = Image.extend({
                   );
                   view.dispatch(transaction);
                 });
-                return true;
-              } catch (error) {
-                console.error(error);
-                return false;
-              }
+
+                onError((error) => {
+                  console.error(error);
+                  return false;
+                });
+              });
+              return true;
             },
           },
         },
diff --git a/js/src/components/Editor/Mention.ts b/js/src/components/Editor/Mention.ts
index a3c2903e8..b866df575 100644
--- a/js/src/components/Editor/Mention.ts
+++ b/js/src/components/Editor/Mention.ts
@@ -1,27 +1,38 @@
 import { SEARCH_PERSONS } from "@/graphql/search";
-import { VueRenderer } from "@tiptap/vue-2";
+import { VueRenderer } from "@tiptap/vue-3";
 import tippy from "tippy.js";
 import MentionList from "./MentionList.vue";
-import { ApolloClient } from "@apollo/client/core/ApolloClient";
-import apolloProvider from "@/vue-apollo";
+import { apolloClient } from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
-import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
 import { MentionOptions } from "@tiptap/extension-mention";
 import { Editor } from "@tiptap/core";
+import { provideApolloClient, useQuery } from "@vue/apollo-composable";
+import { Paginate } from "@/types/paginate";
+import { onError } from "@apollo/client/link/error";
 
-const client =
-  apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
+const fetchItems = (query: string): Promise<IPerson[]> => {
+  return new Promise((resolve, reject) => {
+    const { onResult } = provideApolloClient(apolloClient)(() => {
+      return useQuery<{ searchPersons: Paginate<IPerson> }>(
+        SEARCH_PERSONS,
+        () => ({
+          variables: {
+            searchText: query,
+          },
+        })
+      );
+    });
 
-const fetchItems = async (query: string): Promise<IPerson[]> => {
-  const result = await client.query({
-    query: SEARCH_PERSONS,
-    variables: {
-      searchText: query,
-    },
+    onResult(({ data }) => {
+      resolve(data.searchPersons.elements);
+    });
+
+    onError(reject);
   });
-  // TipTap doesn't handle async for onFilter, hence the following line.
-  return result.data.searchPersons.elements;
+
+  // // TipTap doesn't handle async for onFilter, hence the following line.
+  // return result.data.searchPersons.elements;
 };
 
 const debouncedFetchItems = pDebounce(fetchItems, 200);
@@ -51,10 +62,10 @@ const mentionOptions: MentionOptions = {
       let popup: any;
 
       return {
-        onStart: (props: any) => {
+        onStart: (props: Record<string, any>) => {
           component = new VueRenderer(MentionList, {
-            parent: this,
-            propsData: props,
+            props,
+            editor: props.editor,
           });
 
           popup = tippy("body", {
diff --git a/js/src/components/Editor/MentionList.vue b/js/src/components/Editor/MentionList.vue
index 004eb9866..678d9c2f6 100644
--- a/js/src/components/Editor/MentionList.vue
+++ b/js/src/components/Editor/MentionList.vue
@@ -12,70 +12,64 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
+<script lang="ts" setup>
+import { usernameWithDomain } from "@/types/actor/actor.model";
 import { IPerson } from "@/types/actor";
 import ActorInline from "../../components/Account/ActorInline.vue";
+import { ref, watch } from "vue";
 
-@Component({
-  components: {
-    ActorInline,
-  },
-})
-export default class MentionList extends Vue {
-  @Prop({ type: Array, required: true }) items!: Array<IPerson>;
-  @Prop({ type: Function, required: true }) command!: any;
+const props = defineProps<{
+  items: IPerson[];
+  command: ({ id }: { id: string }) => any;
+}>();
 
-  selectedIndex = 0;
+// @Prop({ type: Function, required: true }) command!: any;
 
-  displayName = displayName;
+const selectedIndex = ref(0);
 
-  @Watch("items")
-  watchItems(): void {
-    this.selectedIndex = 0;
+watch(props.items, () => {
+  selectedIndex.value = 0;
+});
+
+// const onKeyDown = ({ event }: { event: KeyboardEvent }): boolean => {
+//   if (event.key === "ArrowUp") {
+//     upHandler();
+//     return true;
+//   }
+
+//   if (event.key === "ArrowDown") {
+//     downHandler();
+//     return true;
+//   }
+
+//   if (event.key === "Enter") {
+//     enterHandler();
+//     return true;
+//   }
+
+//   return false;
+// };
+
+// const upHandler = (): void => {
+//   selectedIndex.value =
+//     (selectedIndex.value + props.items.length - 1) % props.items.length;
+// };
+
+// const downHandler = (): void => {
+//   selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+// };
+
+// const enterHandler = (): void => {
+//   selectItem(selectedIndex.value);
+// };
+
+const selectItem = (index: number): void => {
+  const item = props.items[index];
+
+  if (item) {
+    props.command({ id: usernameWithDomain(item) });
   }
-
-  onKeyDown({ event }: { event: KeyboardEvent }): boolean {
-    if (event.key === "ArrowUp") {
-      this.upHandler();
-      return true;
-    }
-
-    if (event.key === "ArrowDown") {
-      this.downHandler();
-      return true;
-    }
-
-    if (event.key === "Enter") {
-      this.enterHandler();
-      return true;
-    }
-
-    return false;
-  }
-
-  upHandler(): void {
-    this.selectedIndex =
-      (this.selectedIndex + this.items.length - 1) % this.items.length;
-  }
-
-  downHandler(): void {
-    this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
-  }
-
-  enterHandler(): void {
-    this.selectItem(this.selectedIndex);
-  }
-
-  selectItem(index: number): void {
-    const item = this.items[index];
-
-    if (item) {
-      this.command({ id: usernameWithDomain(item) });
-    }
-  }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -96,11 +90,5 @@ export default class MentionList extends Vue {
   background: transparent;
   border: none;
   padding: 0.5rem 0.75rem;
-
-  &.is-selected,
-  &:hover {
-    color: $background-color;
-    background: rgba($background-color, 0.1);
-  }
 }
 </style>
diff --git a/js/src/components/Error.vue b/js/src/components/Error.vue
deleted file mode 100644
index e10a22775..000000000
--- a/js/src/components/Error.vue
+++ /dev/null
@@ -1,345 +0,0 @@
-<template>
-  <div class="container section" id="error-wrapper">
-    <div class="column">
-      <section>
-        <div class="picture-wrapper">
-          <picture>
-            <source
-              srcset="
-                /img/pics/error-480w.webp  1x,
-                /img/pics/error-1024w.webp 2x
-              "
-              type="image/webp"
-            />
-            <source
-              srcset="/img/pics/error-480w.jpg 1x, /img/pics/error-1024w.jpg 2x"
-              type="image/jpeg"
-            />
-
-            <img
-              :src="`/img/pics/error-480w.jpg`"
-              alt=""
-              width="480"
-              height="312"
-              loading="lazy"
-            />
-          </picture>
-        </div>
-        <b-message type="is-danger" class="is-size-5">
-          <h1>
-            {{
-              $t(
-                "An error has occured. Sorry about that. You may try to reload the page."
-              )
-            }}
-          </h1>
-        </b-message>
-      </section>
-      <b-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
-      <section v-else>
-        <h2 class="is-size-5">{{ $t("What can I do to help?") }}</h2>
-        <p class="content">
-          <i18n
-            tag="span"
-            path="{instanceName} is an instance of {mobilizon_link}, a free software built with the community."
-          >
-            <b slot="instanceName">{{ config.name }}</b>
-            <a slot="mobilizon_link" href="https://joinmobilizon.org">{{
-              $t("Mobilizon")
-            }}</a>
-          </i18n>
-          <span v-if="sentryEnabled && sentryReady">
-            {{
-              $t(
-                "We collect your feedback and the error information in order to improve this service."
-              )
-            }}</span
-          >
-          <span v-else>
-            {{
-              $t(
-                "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
-              )
-            }}
-          </span>
-        </p>
-        <form
-          v-if="sentryEnabled && sentryReady && !submittedFeedback"
-          @submit.prevent="sendErrorToSentry"
-        >
-          <b-field :label="$t('What happened?')" label-for="what-happened">
-            <b-input
-              v-model="feedback"
-              type="textarea"
-              id="what-happened"
-              :placeholder="$t(`I've clicked on X, then on Y`)"
-            />
-          </b-field>
-          <b-button icon-left="send" native-type="submit" type="is-primary">{{
-            $t("Send feedback")
-          }}</b-button>
-          <p class="content">
-            {{
-              $t(
-                "Please add as many details as possible to help identify the problem."
-              )
-            }}
-          </p>
-        </form>
-        <b-message type="is-danger" v-else-if="feedbackError">
-          <p>
-            {{
-              $t(
-                "Sorry, we wen't able to save your feedback. Don't worry, we'll try to fix this issue anyway."
-              )
-            }}
-          </p>
-          <i18n path="You may now close this page or {return_to_the_homepage}.">
-            <template #return_to_the_homepage>
-              <router-link :to="{ name: RouteName.HOME }">{{
-                $t("return to the homepage")
-              }}</router-link>
-            </template>
-          </i18n>
-        </b-message>
-        <b-message type="is-success" v-else-if="submittedFeedback">
-          <p>{{ $t("Thanks a lot, your feedback was submitted!") }}</p>
-          <i18n path="You may now close this page or {return_to_the_homepage}.">
-            <template #return_to_the_homepage>
-              <router-link :to="{ name: RouteName.HOME }">{{
-                $t("return to the homepage")
-              }}</router-link>
-            </template>
-          </i18n>
-        </b-message>
-        <div
-          class="content"
-          v-if="!(sentryEnabled && sentryReady) || submittedFeedback"
-        >
-          <p v-if="submittedFeedback">{{ $t("You may also:") }}</p>
-          <ul>
-            <li>
-              <a
-                href="https://framacolibri.org/c/mobilizon/39"
-                target="_blank"
-                >{{ $t("Open a topic on our forum") }}</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://framagit.org/framasoft/mobilizon/-/issues/"
-                target="_blank"
-                >{{
-                  $t("Open an issue on our bug tracker (advanced users)")
-                }}</a
-              >
-            </li>
-          </ul>
-        </div>
-        <p class="content" v-if="!sentryEnabled">
-          {{
-            $t(
-              "Please add as many details as possible to help identify the problem."
-            )
-          }}
-        </p>
-
-        <details>
-          <summary class="is-size-5">{{ $t("Technical details") }}</summary>
-          <p>{{ $t("Error message") }}</p>
-          <pre>{{ error }}</pre>
-          <p>{{ $t("Error stacktrace") }}</p>
-          <pre>{{ error.stack }}</pre>
-        </details>
-        <p v-if="!sentryEnabled">
-          {{
-            $t(
-              "The technical details of the error can help developers solve the problem more easily. Please add them to your feedback."
-            )
-          }}
-        </p>
-        <div class="buttons" v-if="!sentryEnabled">
-          <b-tooltip
-            :label="tooltipConfig.label"
-            :type="tooltipConfig.type"
-            :active="copied !== false"
-            always
-          >
-            <b-button
-              @click="copyErrorToClipboard"
-              @keyup.enter="copyErrorToClipboard"
-              >{{ $t("Copy details to clipboard") }}</b-button
-            >
-          </b-tooltip>
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { CONFIG } from "@/graphql/config";
-import { checkProviderConfig, convertConfig } from "@/services/statistics";
-import { IAnalyticsConfig, IConfig } from "@/types/config.model";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { LOGGED_USER } from "@/graphql/user";
-import { IUser } from "@/types/current-user.model";
-import { ISentryConfiguration } from "@/types/analytics/sentry.model";
-import { submitFeedback } from "@/services/statistics/sentry";
-import RouteName from "@/router/name";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-    loggedUser: LOGGED_USER,
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.$t("Error") as string,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class ErrorComponent extends Vue {
-  @Prop({ required: true, type: Error }) error!: Error;
-
-  copied: "success" | "error" | false = false;
-
-  config!: IConfig;
-
-  feedback = "";
-
-  submittedFeedback = false;
-
-  feedbackError = false;
-
-  loggedUser!: IUser;
-
-  RouteName = RouteName;
-
-  async copyErrorToClipboard(): Promise<void> {
-    try {
-      if (window.isSecureContext && navigator.clipboard) {
-        await navigator.clipboard.writeText(this.fullErrorString);
-      } else {
-        this.fallbackCopyTextToClipboard(this.fullErrorString);
-      }
-      this.copied = "success";
-      setTimeout(() => {
-        this.copied = false;
-      }, 2000);
-    } catch (e) {
-      this.copied = "error";
-      console.error("Unable to copy to clipboard");
-      console.error(e);
-    }
-  }
-
-  get fullErrorString(): string {
-    return `${this.error.name}: ${this.error.message}\n\n${this.error.stack}`;
-  }
-
-  get tooltipConfig(): { label: string | null; type: string | null } {
-    if (this.copied === "success")
-      return {
-        label: this.$t("Error details copied!") as string,
-        type: "is-success",
-      };
-    if (this.copied === "error")
-      return {
-        label: this.$t("Unable to copy to clipboard") as string,
-        type: "is-danger",
-      };
-    return { label: null, type: "is-primary" };
-  }
-
-  private fallbackCopyTextToClipboard(text: string): void {
-    const textArea = document.createElement("textarea");
-    textArea.value = text;
-
-    // Avoid scrolling to bottom
-    textArea.style.top = "0";
-    textArea.style.left = "0";
-    textArea.style.position = "fixed";
-
-    document.body.appendChild(textArea);
-    textArea.focus();
-    textArea.select();
-
-    document.execCommand("copy");
-
-    document.body.removeChild(textArea);
-  }
-
-  get sentryEnabled(): boolean {
-    return this.sentryProvider?.enabled === true;
-  }
-
-  get sentryProvider(): IAnalyticsConfig | undefined {
-    return this.config && checkProviderConfig(this.config, "sentry");
-  }
-
-  get sentryConfig(): ISentryConfiguration | undefined {
-    if (this.sentryProvider?.configuration) {
-      return convertConfig(
-        this.sentryProvider?.configuration
-      ) as ISentryConfiguration;
-    }
-    return undefined;
-  }
-
-  get sentryReady() {
-    const eventId = window.sessionStorage.getItem("lastEventId");
-    const dsn = this.sentryConfig?.dsn;
-    const organization = this.sentryConfig?.organization;
-    const project = this.sentryConfig?.project;
-    const host = this.sentryConfig?.host;
-    return eventId && dsn && organization && project && host;
-  }
-
-  async sendErrorToSentry() {
-    try {
-      const eventId = window.sessionStorage.getItem("lastEventId");
-      const dsn = this.sentryConfig?.dsn;
-      const organization = this.sentryConfig?.organization;
-      const project = this.sentryConfig?.project;
-      const host = this.sentryConfig?.host;
-      const endpoint = `https://${host}/api/0/projects/${organization}/${project}/user-feedback/`;
-      if (eventId && dsn && this.sentryReady) {
-        await submitFeedback(endpoint, dsn, {
-          event_id: eventId,
-          name:
-            this.loggedUser?.defaultActor?.preferredUsername || "Unknown user",
-          email: this.loggedUser?.email || "unknown@email.org",
-          comments: this.feedback,
-        });
-        this.submittedFeedback = true;
-      }
-    } catch (error) {
-      console.error(error);
-      this.feedbackError = true;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-#error-wrapper {
-  width: 100%;
-  background: $white;
-
-  section {
-    margin-bottom: 2rem;
-  }
-
-  .picture-wrapper {
-    text-align: center;
-  }
-
-  details {
-    summary:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>
diff --git a/js/src/components/ErrorComponent.vue b/js/src/components/ErrorComponent.vue
new file mode 100644
index 000000000..7f755fd49
--- /dev/null
+++ b/js/src/components/ErrorComponent.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="container mx-auto" id="error-wrapper">
+    <div class="">
+      <section>
+        <div class="text-center">
+          <picture>
+            <source
+              :srcset="`/img/pics/error-480w.webp  1x, /img/pics/error-1024w.webp 2x`"
+              type="image/webp"
+            />
+            <img
+              :src="`/img/pics/error-480w.webp`"
+              alt=""
+              width="480"
+              height="312"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+        <o-notification variant="danger" class="">
+          <h1>
+            {{
+              t(
+                "An error has occured. Sorry about that. You may try to reload the page."
+              )
+            }}
+          </h1>
+        </o-notification>
+      </section>
+      <o-loading v-if="loading" v-model:active="loading" />
+      <section v-else>
+        <h2 class="">{{ t("What can I do to help?") }}</h2>
+        <p class="prose dark:prose-invert">
+          <i18n-t
+            tag="span"
+            keypath="{instanceName} is an instance of {mobilizon_link}, a free software built with the community."
+          >
+            <template #instanceName>
+              <b>{{ config?.name }}</b>
+            </template>
+            <template #mobilizon_link>
+              <a href="https://joinmobilizon.org">{{ t("Mobilizon") }}</a>
+            </template>
+          </i18n-t>
+          <span v-if="sentryEnabled">
+            {{
+              t(
+                "We collect your feedback and the error information in order to improve this service."
+              )
+            }}</span
+          >
+          <span v-else>
+            {{
+              t(
+                "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
+              )
+            }}
+          </span>
+        </p>
+        <SentryFeedback />
+
+        <p class="prose dark:prose-invert" v-if="!sentryEnabled">
+          {{
+            t(
+              "Please add as many details as possible to help identify the problem."
+            )
+          }}
+        </p>
+
+        <details>
+          <summary>{{ t("Technical details") }}</summary>
+          <p>{{ t("Error message") }}</p>
+          <pre>{{ error }}</pre>
+          <p>{{ t("Error stacktrace") }}</p>
+          <pre>{{ error.stack }}</pre>
+        </details>
+        <p v-if="!sentryEnabled">
+          {{
+            t(
+              "The technical details of the error can help developers solve the problem more easily. Please add them to your feedback."
+            )
+          }}
+        </p>
+        <div class="buttons" v-if="!sentryEnabled">
+          <o-tooltip
+            :label="tooltipConfig.label"
+            :type="tooltipConfig.type"
+            :active="copied !== false"
+            always
+          >
+            <o-button
+              @click="copyErrorToClipboard"
+              @keyup.enter="copyErrorToClipboard"
+              >{{ t("Copy details to clipboard") }}</o-button
+            >
+          </o-tooltip>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { checkProviderConfig } from "@/services/statistics";
+import { IAnalyticsConfig } from "@/types/config.model";
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useQueryLoading } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import { useAnalytics } from "@/composition/apollo/config";
+const SentryFeedback = defineAsyncComponent(
+  () => import("./Feedback/SentryFeedback.vue")
+);
+
+const { analytics } = useAnalytics();
+
+const loading = useQueryLoading();
+
+const props = defineProps<{
+  error: Error;
+}>();
+
+const copied = ref<"success" | "error" | false>(false);
+
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Error")),
+});
+
+const copyErrorToClipboard = async (): Promise<void> => {
+  try {
+    if (window.isSecureContext && navigator.clipboard) {
+      await navigator.clipboard.writeText(fullErrorString.value);
+    } else {
+      fallbackCopyTextToClipboard(fullErrorString.value);
+    }
+    copied.value = "success";
+    setTimeout(() => {
+      copied.value = false;
+    }, 2000);
+  } catch (e) {
+    copied.value = "error";
+    console.error("Unable to copy to clipboard");
+    console.error(e);
+  }
+};
+
+const fullErrorString = computed((): string => {
+  return `${props.error.name}: ${props.error.message}\n\n${props.error.stack}`;
+});
+
+const tooltipConfig = computed(
+  (): { label: string | null; variant: string | null } => {
+    if (copied.value === "success")
+      return {
+        label: t("Error details copied!") as string,
+        variant: "success",
+      };
+    if (copied.value === "error")
+      return {
+        label: t("Unable to copy to clipboard") as string,
+        variant: "danger",
+      };
+    return { label: null, variant: "primary" };
+  }
+);
+
+const fallbackCopyTextToClipboard = (text: string): void => {
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  document.execCommand("copy");
+
+  document.body.removeChild(textArea);
+};
+
+const sentryEnabled = computed((): boolean => {
+  return sentryProvider.value?.enabled === true;
+});
+
+const sentryProvider = computed((): IAnalyticsConfig | undefined => {
+  return checkProviderConfig(analytics.value ?? [], "sentry");
+});
+</script>
+<style lang="scss" scoped>
+#error-wrapper {
+  width: 100%;
+
+  section {
+    margin-bottom: 2rem;
+  }
+
+  .picture-wrapper {
+    text-align: center;
+  }
+
+  details {
+    summary:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/js/src/components/Event/AddressAutoComplete.vue b/js/src/components/Event/AddressAutoComplete.vue
deleted file mode 100644
index 71c18fc64..000000000
--- a/js/src/components/Event/AddressAutoComplete.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <div class="address-autocomplete">
-    <b-field expanded>
-      <b-autocomplete
-        :data="addressData"
-        v-model="queryText"
-        :placeholder="$t('e.g. 10 Rue Jangot')"
-        field="fullName"
-        :loading="isFetching"
-        @typing="fetchAsyncData"
-        icon="map-marker"
-        expanded
-        @select="updateSelected"
-        v-bind="$attrs"
-        dir="auto"
-      >
-        <template #default="{ option }">
-          <b-icon :icon="option.poiInfos.poiIcon.icon" />
-          <b>{{ option.poiInfos.name }}</b
-          ><br />
-          <small>{{ option.poiInfos.alternativeName }}</small>
-        </template>
-      </b-autocomplete>
-    </b-field>
-    <b-field
-      v-if="canDoGeoLocation"
-      :message="fieldErrors"
-      :type="{ 'is-danger': fieldErrors.length }"
-    >
-      <b-button
-        type="is-text"
-        v-if="!gettingLocation"
-        icon-right="target"
-        @click="locateMe"
-        @keyup.enter="locateMe"
-        >{{ $t("Use my location") }}</b-button
-      >
-      <span v-else>{{ $t("Getting location") }}</span>
-    </b-field>
-    <!--
-    <div v-if="selected && selected.geom" class="control">
-      <b-checkbox  @input="togglemap" />
-      <label class="label">{{ $t("Show map") }}</label>
-    </div>
-
-    <div class="map" v-if="showmap && selected && selected.geom">
-      <map-leaflet
-        :coords="selected.geom"
-        :marker="{
-          text: [selected.poiInfos.name, selected.poiInfos.alternativeName],
-          icon: selected.poiInfos.poiIcon.icon,
-        }"
-        :updateDraggableMarkerCallback="reverseGeoCode"
-        :options="{ zoom: mapDefaultZoom }"
-        :readOnly="false"
-      />
-    </div>
-    -->
-  </div>
-</template>
-<script lang="ts">
-import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
-import { Address, IAddress } from "../../types/address.model";
-import AddressAutoCompleteMixin from "@/mixins/AddressAutoCompleteMixin";
-
-@Component({
-  inheritAttrs: false,
-})
-export default class AddressAutoComplete extends Mixins(
-  AddressAutoCompleteMixin
-) {
-  @Prop({ required: false, default: false }) type!: string | false;
-  @Prop({ required: false, default: true, type: Boolean })
-  doGeoLocation!: boolean;
-
-  addressData: IAddress[] = [];
-
-  selected: IAddress = new Address();
-
-  initialQueryText = "";
-
-  addressModalActive = false;
-
-  showmap = false;
-
-  get queryText2(): string {
-    if (this.value !== undefined) {
-      return new Address(this.value).fullName;
-    }
-    return this.initialQueryText;
-  }
-
-  set queryText2(queryText: string) {
-    this.initialQueryText = queryText;
-  }
-
-  @Watch("value")
-  updateEditing(): void {
-    if (!this.value?.id) return;
-    this.selected = this.value;
-  }
-
-  updateSelected(option: IAddress): void {
-    if (option == null) return;
-    this.selected = option;
-    this.$emit("input", this.selected);
-  }
-
-  resetPopup(): void {
-    this.selected = new Address();
-  }
-
-  openNewAddressModal(): void {
-    this.resetPopup();
-    this.addressModalActive = true;
-  }
-
-  togglemap(): void {
-    this.showmap = !this.showmap;
-  }
-
-  get canDoGeoLocation(): boolean {
-    return this.isSecureContext && this.doGeoLocation;
-  }
-}
-</script>
-<style lang="scss">
-.address-autocomplete {
-  margin-bottom: 0.75rem;
-}
-
-.autocomplete {
-  .dropdown-menu {
-    z-index: 2000;
-  }
-
-  .dropdown-item.is-disabled {
-    opacity: 1 !important;
-    cursor: auto;
-  }
-}
-
-.read-only {
-  cursor: pointer;
-}
-
-.map {
-  height: 400px;
-  width: 100%;
-}
-</style>
diff --git a/js/src/components/Event/DateCalendarIcon.story.vue b/js/src/components/Event/DateCalendarIcon.story.vue
new file mode 100644
index 000000000..e6b55dcb3
--- /dev/null
+++ b/js/src/components/Event/DateCalendarIcon.story.vue
@@ -0,0 +1,14 @@
+<template>
+  <Story>
+    <Variant title="new">
+      <DateCalendarIcon :date="new Date().toString()" />
+    </Variant>
+    <Variant title="small">
+      <DateCalendarIcon :date="new Date().toString()" :small="true" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import DateCalendarIcon from "./DateCalendarIcon.vue";
+</script>
diff --git a/js/src/components/Event/DateCalendarIcon.vue b/js/src/components/Event/DateCalendarIcon.vue
index 59a55e3fc..ff450dc8b 100644
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -1,71 +1,51 @@
-<docs>
-### Example
-```vue
-  <DateCalendarIcon date="2019-10-05T18:41:11.720Z" />
-```
-
-```vue
-  <DateCalendarIcon
-    :date="new Date()"
-  />
-```
-</docs>
-
 <template>
   <div
-    class="datetime-container"
+    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >
     <div class="datetime-container-header" />
     <div class="datetime-container-content">
-      <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
-      <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
+      <time :datetime="dateObj.toISOString()" class="day block font-semibold">{{
+        day
+      }}</time>
+      <time
+        :datetime="dateObj.toISOString()"
+        class="month font-semibold block uppercase py-1 px-0"
+        >{{ month }}</time
+      >
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { computed } from "vue";
 
-@Component
-export default class DateCalendarIcon extends Vue {
-  /**
-   * `date` can be a string or an actual date object.
-   */
-  @Prop({ required: true }) date!: string;
-  @Prop({ required: false, default: false }) small!: boolean;
+const props = withDefaults(
+  defineProps<{
+    date: string;
+    small?: boolean;
+  }>(),
+  { small: false }
+);
 
-  get dateObj(): Date {
-    return new Date(this.$props.date);
-  }
+const dateObj = computed<Date>(() => new Date(props.date));
 
-  get month(): string {
-    return this.dateObj.toLocaleString(undefined, { month: "short" });
-  }
+const month = computed<string>(() =>
+  dateObj.value.toLocaleString(undefined, { month: "short" })
+);
 
-  get day(): string {
-    return this.dateObj.toLocaleString(undefined, { day: "numeric" });
-  }
-  get smallStyle(): string {
-    return this.small ? "1.2" : "2";
-  }
-}
+const day = computed<string>(() =>
+  dateObj.value.toLocaleString(undefined, { day: "numeric" })
+);
+
+const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
 </script>
 
 <style lang="scss" scoped>
 div.datetime-container {
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  align-items: stretch;
   width: calc(40px * var(--small));
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
   height: calc(40px * var(--small));
-  background: #fff;
 
   .datetime-container-header {
     height: calc(10px * var(--small));
@@ -76,15 +56,9 @@ div.datetime-container {
   }
 
   time {
-    display: block;
-    font-weight: 600;
-    color: $violet-3;
-
     &.month {
-      padding: 2px 0;
       font-size: 12px;
       line-height: 12px;
-      text-transform: uppercase;
     }
 
     &.day {
diff --git a/js/src/components/Event/EventBanner.vue b/js/src/components/Event/EventBanner.vue
index 5e653725d..a3b143418 100644
--- a/js/src/components/Event/EventBanner.vue
+++ b/js/src/components/Event/EventBanner.vue
@@ -1,34 +1,16 @@
 <template>
-  <div class="banner-container">
+  <div class="flex justify-center h-80">
     <lazy-image-wrapper :picture="picture" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IMedia } from "@/types/media.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
 
-@Component({
-  components: {
-    LazyImageWrapper,
-  },
-})
-export default class EventBanner extends Vue {
-  @Prop({ default: null, type: Object as PropType<IMedia> })
-  picture!: IMedia | null;
-}
+withDefaults(
+  defineProps<{
+    picture: IMedia | null;
+  }>(),
+  { picture: null }
+);
 </script>
-<style lang="scss" scoped>
-.banner-container {
-  display: flex;
-  justify-content: center;
-  height: 30vh;
-}
-::v-deep img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 50% 50%;
-}
-</style>
diff --git a/js/src/components/Event/EventCard.story.vue b/js/src/components/Event/EventCard.story.vue
new file mode 100644
index 000000000..82020d4c8
--- /dev/null
+++ b/js/src/components/Event/EventCard.story.vue
@@ -0,0 +1,148 @@
+<template>
+  <Story title="EventCard">
+    <Variant title="default">
+      <EventCard :event="event" />
+    </Variant>
+    <Variant title="long">
+      <EventCard :event="longEvent" />
+    </Variant>
+
+    <Variant title="tentative">
+      <EventCard :event="tentativeEvent" />
+    </Variant>
+
+    <Variant title="cancelled">
+      <EventCard :event="cancelledEvent" />
+    </Variant>
+    <Variant title="Row mode">
+      <EventCard :event="longEvent" mode="row" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IActor } from "@/types/actor";
+import {
+  ActorType,
+  CommentModeration,
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+} from "@/types/enums";
+import { IEvent } from "@/types/event.model";
+import { reactive } from "vue";
+import EventCard from "./EventCard.vue";
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor: IActor = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+
+const baseEvent: IEvent = {
+  uuid: "",
+  title: "A very interesting event",
+  description: "Things happen",
+  beginsOn: new Date().toISOString(),
+  endsOn: new Date().toISOString(),
+  physicalAddress: {
+    description: "Somewhere",
+    street: "",
+    locality: "",
+    region: "",
+    country: "",
+    type: "",
+    postalCode: "",
+  },
+  picture: {
+    id: "",
+    name: "",
+    alt: "",
+    metadata: {},
+    url: "https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png",
+  },
+  url: "",
+  local: true,
+  slug: "",
+  publishAt: new Date().toISOString(),
+  status: EventStatus.CONFIRMED,
+  visibility: EventVisibility.PUBLIC,
+  joinOptions: EventJoinOptions.FREE,
+  draft: false,
+  participantStats: {
+    notApproved: 0,
+    notConfirmed: 0,
+    rejected: 0,
+    participant: 0,
+    creator: 0,
+    moderator: 0,
+    administrator: 0,
+    going: 0,
+  },
+  participants: { total: 0, elements: [] },
+  relatedEvents: [],
+  tags: [{ slug: "something", title: "Something" }],
+  attributedTo: undefined,
+  organizerActor: {
+    ...baseActor,
+    name: "Hello",
+    avatar: {
+      ...baseActorAvatar,
+      url: "https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png",
+    },
+  },
+  comments: [],
+  options: {
+    maximumAttendeeCapacity: 0,
+    remainingAttendeeCapacity: 0,
+    showRemainingAttendeeCapacity: false,
+    anonymousParticipation: false,
+    hideOrganizerWhenGroupEvent: false,
+    offers: [],
+    participationConditions: [],
+    attendees: [],
+    program: "",
+    commentModeration: CommentModeration.ALLOW_ALL,
+    showParticipationPrice: false,
+    showStartTime: false,
+    showEndTime: false,
+    timezone: null,
+    isOnline: false,
+  },
+  metadata: [],
+  contacts: [],
+  language: "en",
+  category: "hello",
+};
+
+const event = reactive<IEvent>(baseEvent);
+
+const longEvent = reactive<IEvent>({
+  ...baseEvent,
+  title:
+    "A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.",
+});
+
+const tentativeEvent = reactive<IEvent>({
+  ...baseEvent,
+  status: EventStatus.TENTATIVE,
+});
+
+const cancelledEvent = reactive<IEvent>({
+  ...baseEvent,
+  status: EventStatus.CANCELLED,
+});
+</script>
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 8ef70a2f3..bcf92c9b4 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -1,272 +1,219 @@
 <template>
-  <router-link
-    class="card"
-    :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
+  <LinkOrRouterLink
+    class="mbz-card snap-center dark:bg-mbz-purple"
+    :class="{
+      'sm:flex sm:items-start': mode === 'row',
+      'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',
+    }"
+    :to="to"
+    :isInternal="isInternal"
   >
-    <div class="card-image">
-      <figure class="image is-16by9">
+    <div
+      class="bg-secondary rounded-lg"
+      :class="{ 'sm:w-full sm:max-w-[20rem]': mode === 'row' }"
+    >
+      <figure class="block relative pt-40">
         <lazy-image-wrapper
           :picture="event.picture"
           style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
         />
         <div
-          class="tag-container"
+          class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end"
+          v-show="mode === 'column'"
           v-if="event.tags || event.status !== EventStatus.CONFIRMED"
         >
-          <b-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
+          <mobilizon-tag
+            variant="info"
+            v-if="event.status === EventStatus.TENTATIVE"
+          >
             {{ $t("Tentative") }}
-          </b-tag>
-          <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
+          </mobilizon-tag>
+          <mobilizon-tag
+            variant="danger"
+            v-if="event.status === EventStatus.CANCELLED"
+          >
             {{ $t("Cancelled") }}
-          </b-tag>
+          </mobilizon-tag>
           <router-link
             :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
             v-for="tag in (event.tags || []).slice(0, 3)"
             :key="tag.slug"
           >
-            <b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
+            <mobilizon-tag dir="auto" :with-hash-tag="true">{{
+              tag.title
+            }}</mobilizon-tag>
           </router-link>
         </div>
       </figure>
     </div>
-    <div class="card-content">
-      <div class="media">
-        <div class="media-left">
+    <div class="p-2 flex-auto" :class="{ 'sm:flex-1': mode === 'row' }">
+      <div class="relative flex flex-col h-full">
+        <div
+          class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-start"
+          :class="{ 'sm:hidden': mode === 'row' }"
+        >
           <date-calendar-icon
             :small="true"
             v-if="!mergedOptions.hideDate"
-            :date="event.beginsOn"
+            :date="event.beginsOn.toString()"
           />
         </div>
-        <div class="media-content">
-          <h3
-            class="event-title"
-            :title="event.title"
+        <span
+          class="text-gray-700 dark:text-white font-semibold hidden"
+          :class="{ 'sm:block': mode === 'row' }"
+          >{{ formatDateTimeWithCurrentLocale }}</span
+        >
+        <div class="w-full flex flex-col justify-between h-full">
+          <h2
+            class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white"
             dir="auto"
             :lang="event.language"
           >
             {{ event.title }}
-          </h3>
-          <div class="content-end">
-            <div class="event-organizer" dir="auto">
-              <figure
-                class="image is-24x24"
-                v-if="organizer(event) && organizer(event).avatar"
-              >
+          </h2>
+          <div class="">
+            <div
+              class="flex items-center text-violet-3 dark:text-white"
+              dir="auto"
+            >
+              <figure class="" v-if="actorAvatarURL">
                 <img
-                  class="is-rounded"
-                  :src="organizer(event).avatar.url"
+                  class="rounded-xl"
+                  :src="actorAvatarURL"
                   alt=""
+                  width="24"
+                  height="24"
                 />
               </figure>
-              <b-icon v-else icon="account-circle" />
-              <span class="organizer-name">
+              <account-circle v-else />
+              <span class="font-semibold ltr:pl-2 rtl:pr-2">
                 {{ organizerDisplayName(event) }}
               </span>
             </div>
             <inline-address
-              dir="auto"
               v-if="event.physicalAddress"
               :physical-address="event.physicalAddress"
             />
             <div
-              class="event-subtitle"
+              class="flex items-center text-sm"
               dir="auto"
               v-else-if="event.options && event.options.isOnline"
             >
-              <b-icon icon="video" />
-              <span>{{ $t("Online") }}</span>
+              <Video />
+              <span class="ltr:pl-2 rtl:pr-2">{{ $t("Online") }}</span>
+            </div>
+            <div
+              class="mt-1 no-underline gap-1 items-center hidden"
+              :class="{ 'sm:flex': mode === 'row' }"
+              v-if="event.tags || event.status !== EventStatus.CONFIRMED"
+            >
+              <mobilizon-tag
+                variant="info"
+                v-if="event.status === EventStatus.TENTATIVE"
+              >
+                {{ $t("Tentative") }}
+              </mobilizon-tag>
+              <mobilizon-tag
+                variant="danger"
+                v-if="event.status === EventStatus.CANCELLED"
+              >
+                {{ $t("Cancelled") }}
+              </mobilizon-tag>
+              <router-link
+                :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
+                v-for="tag in (event.tags || []).slice(0, 3)"
+                :key="tag.slug"
+              >
+                <mobilizon-tag :with-hash-tag="true" dir="auto">{{
+                  tag.title
+                }}</mobilizon-tag>
+              </router-link>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </router-link>
+  </LinkOrRouterLink>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import {
   IEvent,
   IEventCardOptions,
   organizerDisplayName,
-  organizer,
+  organizerAvatarUrl,
 } from "@/types/event.model";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
-import { Actor, Person } from "@/types/actor";
-import { EventStatus, ParticipantRole } from "@/types/enums";
+import { EventStatus } from "@/types/enums";
 import RouteName from "../../router/name";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
 
-@Component({
-  components: {
-    DateCalendarIcon,
-    LazyImageWrapper,
-    InlineAddress,
-  },
-})
-export default class EventCard extends Vue {
-  @Prop({ required: true }) event!: IEvent;
+import { computed, inject } from "vue";
+import MobilizonTag from "@/components/TagElement.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import Video from "vue-material-design-icons/Video.vue";
+import { formatDateTimeForEvent } from "@/utils/datetime";
+import type { Locale } from "date-fns";
+import LinkOrRouterLink from "../core/LinkOrRouterLink.vue";
 
-  @Prop({ required: false }) options!: IEventCardOptions;
+const props = withDefaults(
+  defineProps<{
+    event: IEvent;
+    options?: IEventCardOptions;
+    mode?: "row" | "column";
+  }>(),
+  { mode: "column" }
+);
+const defaultOptions: IEventCardOptions = {
+  hideDate: false,
+  loggedPerson: false,
+  hideDetails: false,
+  organizerActor: null,
+  isRemoteEvent: false,
+  isLoggedIn: true,
+};
 
-  ParticipantRole = ParticipantRole;
+const mergedOptions = computed<IEventCardOptions>(() => ({
+  ...defaultOptions,
+  ...props.options,
+}));
 
-  EventStatus = EventStatus;
+// const actor = computed<Actor>(() => {
+//   return Object.assign(
+//     new Person(),
+//     props.event.organizerActor ?? mergedOptions.value.organizerActor
+//   );
+// });
 
-  RouteName = RouteName;
+const actorAvatarURL = computed<string | null>(() =>
+  organizerAvatarUrl(props.event)
+);
 
-  organizerDisplayName = organizerDisplayName;
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
-  organizer = organizer;
+const formatDateTimeWithCurrentLocale = computed(() => {
+  if (!dateFnsLocale) return;
+  return formatDateTimeForEvent(new Date(props.event.beginsOn), dateFnsLocale);
+});
 
-  defaultOptions: IEventCardOptions = {
-    hideDate: false,
-    loggedPerson: false,
-    hideDetails: false,
-    organizerActor: null,
-    memberofGroup: false,
-  };
+const isInternal = computed(() => {
+  return (
+    mergedOptions.value.isRemoteEvent &&
+    mergedOptions.value.isLoggedIn === false
+  );
+});
 
-  get mergedOptions(): IEventCardOptions {
-    return { ...this.defaultOptions, ...this.options };
+const to = computed(() => {
+  if (mergedOptions.value.isRemoteEvent) {
+    if (mergedOptions.value.isLoggedIn === false) {
+      return props.event.url;
+    }
+    return {
+      name: RouteName.INTERACT,
+      query: { uri: encodeURI(props.event.url) },
+    };
   }
-
-  get actor(): Actor {
-    return Object.assign(
-      new Person(),
-      this.event.organizerActor || this.mergedOptions.organizerActor
-    );
-  }
-}
+  return { name: RouteName.EVENT, params: { uuid: props.event.uuid } };
+});
 </script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-
-a.card {
-  display: block;
-  background: $secondary;
-  color: #3c376e;
-
-  &:hover {
-    // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-    transform: scale(1.01, 1.01);
-    &:after {
-      opacity: 1;
-    }
-  }
-
-  border-radius: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-
-  &:after {
-    content: "";
-    border-radius: 5px;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  }
-
-  div.tag-container {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    @include margin-right(-3px);
-    z-index: 10;
-    max-width: 40%;
-
-    a {
-      text-decoration: none;
-    }
-
-    span.tag {
-      margin: 5px auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: block;
-      font-size: 0.9em;
-      line-height: 1.75em;
-
-      &:not(.is-info, .is-danger) {
-        background-color: #e6e4f4;
-        color: $violet-3;
-      }
-      &.is-info {
-        color: $violet-3;
-      }
-    }
-  }
-
-  div.card-image {
-    background: $secondary;
-
-    figure.image {
-      background-size: cover;
-      background-position: center;
-    }
-  }
-
-  .card-content {
-    height: 100%;
-    padding: 0.5rem;
-
-    & > .media {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-
-      & > .media-left {
-        margin-top: -15px;
-        height: 0;
-        display: flex;
-        align-items: flex-end;
-        align-self: flex-start;
-        margin-bottom: 15px;
-        @include margin-left(0);
-      }
-
-      & > .media-content {
-        flex: 1;
-        width: 100%;
-        overflow-x: inherit;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-      }
-    }
-
-    .event-title {
-      font-size: 18px;
-      line-height: 24px;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-weight: bold;
-    }
-
-    .content-end {
-      padding-top: 8px;
-    }
-
-    .event-subtitle {
-      font-size: 0.85rem;
-    }
-
-    .organizer-name {
-      font-size: 14px;
-    }
-  }
-}
-</style>
diff --git a/js/src/components/Event/EventFullDate.vue b/js/src/components/Event/EventFullDate.vue
index 4ca50ee96..1958f5792 100644
--- a/js/src/components/Event/EventFullDate.vue
+++ b/js/src/components/Event/EventFullDate.vue
@@ -1,91 +1,69 @@
-<docs>
-#### Give a translated and localized text that give the starting and ending datetime for an event.
-
-##### Start date with no ending
-```vue
-<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" />
-```
-
-##### Start date with an ending the same day
-```vue
-<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" endsOn="2015-10-06T20:41:11.720Z" />
-```
-
-##### Start date with an ending on a different day
-```vue
-<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" endsOn="2032-10-06T18:41:11.720Z" />
-```
-</docs>
-
 <template>
   <p v-if="!endsOn">
     <span>{{
       formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
     }}</span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && showEndTime">
     <span>{{
-      $t("On {date} from {startTime} to {endTime}", {
+      t("On {date} from {startTime} to {endTime}", {
         date: formatDate(beginsOn),
         startTime: formatTime(beginsOn, timezoneToShow),
         endTime: formatTime(endsOn, timezoneToShow),
       })
     }}</span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && !showEndTime">
     {{
-      $t("On {date} starting at {startTime}", {
+      t("On {date} starting at {startTime}", {
         date: formatDate(beginsOn),
         startTime: formatTime(beginsOn),
       })
     }}
   </p>
   <p v-else-if="isSameDay()">
-    {{ $t("On {date}", { date: formatDate(beginsOn) }) }}
+    {{ t("On {date}", { date: formatDate(beginsOn) }) }}
   </p>
   <p v-else-if="endsOn && showStartTime && showEndTime">
     <span>
       {{
-        $t(
-          "From the {startDate} at {startTime} to the {endDate} at {endTime}",
-          {
-            startDate: formatDate(beginsOn),
-            startTime: formatTime(beginsOn, timezoneToShow),
-            endDate: formatDate(endsOn),
-            endTime: formatTime(endsOn, timezoneToShow),
-          }
-        )
+        t("From the {startDate} at {startTime} to the {endDate} at {endTime}", {
+          startDate: formatDate(beginsOn),
+          startTime: formatTime(beginsOn, timezoneToShow),
+          endDate: formatDate(endsOn),
+          endTime: formatTime(endsOn, timezoneToShow),
+        })
       }}
     </span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ multipleTimeZones }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn && showStartTime">
     <span>
       {{
-        $t("From the {startDate} at {startTime} to the {endDate}", {
+        t("From the {startDate} at {startTime} to the {endDate}", {
           startDate: formatDate(beginsOn),
           startTime: formatTime(beginsOn, timezoneToShow),
           endDate: formatDate(endsOn),
@@ -93,120 +71,117 @@
       }}
     </span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn">
     {{
-      $t("From the {startDate} to the {endDate}", {
+      t("From the {startDate} to the {endDate}", {
         startDate: formatDate(beginsOn),
         endDate: formatDate(endsOn),
       })
     }}
   </p>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
+import {
+  formatDateString,
+  formatDateTimeString,
+  formatTimeString,
+} from "@/filters/datetime";
 import { getTimezoneOffset } from "date-fns-tz";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 
-@Component
-export default class EventFullDate extends Vue {
-  @Prop({ required: true }) beginsOn!: string;
-
-  @Prop({ required: false }) endsOn!: string;
-
-  @Prop({ required: false, default: true }) showStartTime!: boolean;
-
-  @Prop({ required: false, default: true }) showEndTime!: boolean;
-
-  @Prop({ required: false }) timezone!: string;
-
-  @Prop({ required: false }) userTimezone!: string;
-
-  showLocalTimezone = true;
-
-  get timezoneToShow(): string {
-    if (this.showLocalTimezone) {
-      return this.timezone;
-    }
-    return this.userActualTimezone;
+const props = withDefaults(
+  defineProps<{
+    beginsOn: string;
+    endsOn?: string;
+    showStartTime?: boolean;
+    showEndTime?: boolean;
+    timezone?: string;
+    userTimezone?: string;
+  }>(),
+  {
+    showStartTime: true,
+    showEndTime: true,
   }
+);
 
-  get userActualTimezone(): string {
-    if (this.userTimezone) {
-      return this.userTimezone;
-    }
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  }
+const { t } = useI18n({ useScope: "global" });
 
-  formatDate(value: Date): string | undefined {
-    if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatDateString(value);
-  }
+const showLocalTimezone = ref(true);
 
-  formatTime(value: Date, timezone: string): string | undefined {
-    if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatTimeString(value, timezone || undefined);
+const timezoneToShow = computed((): string | undefined => {
+  if (showLocalTimezone.value) {
+    return props.timezone;
   }
+  return userActualTimezone.value;
+});
 
-  formatDateTimeString(
-    value: Date,
-    timezone: string,
-    showTime: boolean
-  ): string | undefined {
-    if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatDateTimeString(
-      value,
-      timezone,
-      showTime
-    );
+const userActualTimezone = computed((): string => {
+  if (props.userTimezone) {
+    return props.userTimezone;
   }
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+});
 
-  isSameDay(): boolean {
-    const sameDay =
-      this.beginsOnDate.toDateString() === new Date(this.endsOn).toDateString();
-    return this.endsOn !== undefined && sameDay;
-  }
+const formatDate = (value: string): string | undefined => {
+  return formatDateString(value);
+};
 
-  get beginsOnDate(): Date {
-    return new Date(this.beginsOn);
-  }
+const formatTime = (
+  value: string,
+  timezone: string | undefined = undefined
+): string | undefined => {
+  return formatTimeString(value, timezone ?? "Etc/UTC");
+};
 
-  get differentFromUserTimezone(): boolean {
-    return (
-      !!this.timezone &&
-      !!this.userActualTimezone &&
-      getTimezoneOffset(this.timezone, this.beginsOnDate) !==
-        getTimezoneOffset(this.userActualTimezone, this.beginsOnDate) &&
-      this.timezone !== this.userActualTimezone
-    );
-  }
+const isSameDay = (): boolean => {
+  if (!props.endsOn) return false;
+  return (
+    beginsOnDate.value.toDateString() === new Date(props.endsOn).toDateString()
+  );
+};
 
-  get singleTimeZone(): string {
-    if (this.showLocalTimezone) {
-      return this.$t("Local time ({timezone})", {
-        timezone: this.timezoneToShow,
-      }) as string;
-    }
-    return this.$t("Time in your timezone ({timezone})", {
-      timezone: this.timezoneToShow,
-    }) as string;
-  }
+const beginsOnDate = computed((): Date => {
+  return new Date(props.beginsOn);
+});
 
-  get multipleTimeZones(): string {
-    if (this.showLocalTimezone) {
-      return this.$t("Local time ({timezone})", {
-        timezone: this.timezoneToShow,
-      }) as string;
-    }
-    return this.$t("Times in your timezone ({timezone})", {
-      timezone: this.timezoneToShow,
-    }) as string;
+const differentFromUserTimezone = computed((): boolean => {
+  return (
+    !!props.timezone &&
+    !!userActualTimezone.value &&
+    getTimezoneOffset(props.timezone, beginsOnDate.value) !==
+      getTimezoneOffset(userActualTimezone.value, beginsOnDate.value) &&
+    props.timezone !== userActualTimezone.value
+  );
+});
+
+const singleTimeZone = computed((): string => {
+  if (showLocalTimezone.value) {
+    return t("Local time ({timezone})", {
+      timezone: timezoneToShow.value,
+    });
   }
-}
+  return t("Time in your timezone ({timezone})", {
+    timezone: timezoneToShow.value,
+  });
+});
+
+const multipleTimeZones = computed((): string => {
+  if (showLocalTimezone.value) {
+    return t("Local times ({timezone})", {
+      timezone: timezoneToShow.value,
+    });
+  }
+  return t("Times in your timezone ({timezone})", {
+    timezone: timezoneToShow.value,
+  });
+});
 </script>
diff --git a/js/src/components/Event/EventListViewCard.story.vue b/js/src/components/Event/EventListViewCard.story.vue
new file mode 100644
index 000000000..2ecca3b8f
--- /dev/null
+++ b/js/src/components/Event/EventListViewCard.story.vue
@@ -0,0 +1,143 @@
+<template>
+  <Story title="EventListViewCard">
+    <Variant title="default">
+      <EventListViewCard :event="baseEvent" />
+    </Variant>
+    <Variant title="long">
+      <EventListViewCard :event="longEvent" />
+    </Variant>
+
+    <!-- <Variant title="tentative">
+      <EventListViewCard :event="tentativeEvent" />
+    </Variant>
+
+    <Variant title="cancelled">
+      <EventListViewCard :event="cancelledEvent" />
+    </Variant> -->
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IActor } from "@/types/actor";
+import {
+  ActorType,
+  CommentModeration,
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+} from "@/types/enums";
+import { IEvent } from "@/types/event.model";
+import { reactive } from "vue";
+import EventListViewCard from "./EventListViewCard.vue";
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor: IActor = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+
+const baseEvent: IEvent = {
+  uuid: "",
+  title: "A very interesting event",
+  description: "Things happen",
+  beginsOn: new Date().toISOString(),
+  endsOn: new Date().toISOString(),
+  physicalAddress: {
+    description: "Somewhere",
+    street: "",
+    locality: "",
+    region: "",
+    country: "",
+    type: "",
+    postalCode: "",
+  },
+  picture: {
+    id: "",
+    name: "",
+    alt: "",
+    metadata: {},
+    url: "https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png",
+  },
+  url: "",
+  local: true,
+  slug: "",
+  publishAt: new Date().toISOString(),
+  status: EventStatus.CONFIRMED,
+  visibility: EventVisibility.PUBLIC,
+  joinOptions: EventJoinOptions.FREE,
+  draft: false,
+  participantStats: {
+    notApproved: 0,
+    notConfirmed: 0,
+    rejected: 0,
+    participant: 0,
+    creator: 0,
+    moderator: 0,
+    administrator: 0,
+    going: 0,
+  },
+  participants: { total: 0, elements: [] },
+  relatedEvents: [],
+  tags: [{ slug: "something", title: "Something" }],
+  attributedTo: undefined,
+  organizerActor: {
+    ...baseActor,
+    name: "Hello",
+    avatar: {
+      ...baseActorAvatar,
+      url: "https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png",
+    },
+  },
+  comments: [],
+  options: {
+    maximumAttendeeCapacity: 0,
+    remainingAttendeeCapacity: 0,
+    showRemainingAttendeeCapacity: false,
+    anonymousParticipation: false,
+    hideOrganizerWhenGroupEvent: false,
+    offers: [],
+    participationConditions: [],
+    attendees: [],
+    program: "",
+    commentModeration: CommentModeration.ALLOW_ALL,
+    showParticipationPrice: false,
+    showStartTime: false,
+    showEndTime: false,
+    timezone: null,
+    isOnline: false,
+  },
+  metadata: [],
+  contacts: [],
+  language: "en",
+  category: "hello",
+};
+
+const longEvent = reactive<IEvent>({
+  ...baseEvent,
+  title:
+    "A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so.",
+});
+
+// const tentativeEvent = reactive<IEvent>({
+//   ...baseEvent,
+//   status: EventStatus.TENTATIVE,
+// });
+
+// const cancelledEvent = reactive<IEvent>({
+//   ...baseEvent,
+//   status: EventStatus.CANCELLED,
+// });
+</script>
diff --git a/js/src/components/Event/EventListViewCard.vue b/js/src/components/Event/EventListViewCard.vue
index 9a890f7fd..0924b6af3 100644
--- a/js/src/components/Event/EventListViewCard.vue
+++ b/js/src/components/Event/EventListViewCard.vue
@@ -1,169 +1,83 @@
 <template>
-  <article class="box">
-    <div class="columns">
-      <div class="content column">
-        <div class="title-wrapper">
-          <div class="date-component">
-            <date-calendar-icon :date="event.beginsOn" :small="true" />
-          </div>
-          <router-link
-            :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
-          >
-            <h2 class="title">{{ event.title }}</h2>
-          </router-link>
-        </div>
-        <div class="participation-actor has-text-grey-dark">
-          <span v-if="event.physicalAddress && event.physicalAddress.locality">
-            {{ event.physicalAddress.locality }}
-          </span>
-          <span v-if="event.attributedTo && options.memberofGroup">
-            {{
-              $t("Created by {name}", {
-                name: usernameWithDomain(event.organizerActor),
-              })
-            }}
-          </span>
-          <span v-else-if="options.memberofGroup">
-            {{
-              $t("Organized by {name}", {
-                name: usernameWithDomain(event.organizerActor),
-              })
-            }}
-          </span>
-        </div>
-        <div class="columns">
-          <span class="column is-narrow">
-            <b-icon
-              icon="earth"
-              v-if="event.visibility === EventVisibility.PUBLIC"
-            />
-            <b-icon
-              icon="link"
-              v-if="event.visibility === EventVisibility.UNLISTED"
-            />
-            <b-icon
-              icon="lock"
-              v-if="event.visibility === EventVisibility.PRIVATE"
-            />
-          </span>
-          <span class="column is-narrow participant-stats">
-            <span v-if="event.options.maximumAttendeeCapacity !== 0">
-              {{
-                $t("{approved} / {total} seats", {
-                  approved: event.participantStats.participant,
-                  total: event.options.maximumAttendeeCapacity,
-                })
-              }}
-            </span>
-            <span v-else>
-              {{
-                $tc(
-                  "{count} participants",
-                  event.participantStats.participant,
-                  {
-                    count: event.participantStats.participant,
-                  }
-                )
-              }}
-            </span>
-          </span>
-        </div>
+  <article
+    class="bg-white dark:bg-gray-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2"
+  >
+    <div class="flex gap-2">
+      <div class="">
+        <date-calendar-icon :date="event.beginsOn.toString()" :small="true" />
       </div>
+      <router-link
+        :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
+      >
+        <h2 class="mt-0 line-clamp-2">{{ event.title }}</h2>
+      </router-link>
+    </div>
+    <div class="">
+      <span v-if="event.physicalAddress && event.physicalAddress.locality">
+        {{ event.physicalAddress.locality }}
+      </span>
+      <span v-if="event.attributedTo">
+        {{
+          $t("Created by {name}", {
+            name: displayName(event.attributedTo),
+          })
+        }}
+      </span>
+      <span v-else>
+        {{
+          $t("Organized by {name}", {
+            name: displayName(event.organizerActor),
+          })
+        }}
+      </span>
+    </div>
+    <div class="flex gap-1">
+      <span>
+        <Earth v-if="event.visibility === EventVisibility.PUBLIC" />
+        <Link v-if="event.visibility === EventVisibility.UNLISTED" />
+        <Lock v-if="event.visibility === EventVisibility.PRIVATE" />
+      </span>
+      <span>
+        <span v-if="event.options.maximumAttendeeCapacity !== 0">
+          {{
+            $t("{approved} / {total} seats", {
+              approved: event.participantStats.participant,
+              total: event.options.maximumAttendeeCapacity,
+            })
+          }}
+        </span>
+        <span v-else>
+          {{
+            $t(
+              "{count} participants",
+              {
+                count: event.participantStats.participant,
+              },
+              event.participantStats.participant
+            )
+          }}
+        </span>
+      </span>
     </div>
   </article>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventCardOptions, IEvent } from "@/types/event.model";
-import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { IPerson, usernameWithDomain } from "@/types/actor";
-import { mixins } from "vue-class-component";
-import ActorMixin from "@/mixins/actor";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import EventMixin from "@/mixins/event";
-import { EventVisibility, ParticipantRole } from "@/types/enums";
+import { displayName } from "@/types/actor";
+import { EventVisibility } from "@/types/enums";
 import RouteName from "../../router/name";
+import Earth from "vue-material-design-icons/Earth.vue";
+import Link from "vue-material-design-icons/Link.vue";
+import Lock from "vue-material-design-icons/Lock.vue";
 
-const defaultOptions: IEventCardOptions = {
-  hideDate: true,
-  loggedPerson: false,
-  hideDetails: false,
-  organizerActor: null,
-  memberofGroup: false,
-};
-
-@Component({
-  components: {
-    DateCalendarIcon,
-  },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-})
-export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
-  /**
-   * The participation associated
-   */
-  @Prop({ required: true }) event!: IEvent;
-
-  /**
-   * Options are merged with default options
-   */
-  @Prop({ required: false, default: () => defaultOptions })
-  options!: IEventCardOptions;
-
-  currentActor!: IPerson;
-
-  ParticipantRole = ParticipantRole;
-
-  EventVisibility = EventVisibility;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-}
+withDefaults(defineProps<{ event: IEvent; options?: IEventCardOptions }>(), {
+  options: (): IEventCardOptions => ({
+    hideDate: true,
+    loggedPerson: false,
+    hideDetails: false,
+    organizerActor: null,
+  }),
+});
 </script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-article.box {
-  div.content {
-    padding: 5px;
-
-    .participation-actor span,
-    .participant-stats span {
-      padding: 0 5px;
-
-      button {
-        height: auto;
-        padding-top: 0;
-      }
-    }
-
-    div.title-wrapper {
-      display: flex;
-      align-items: center;
-
-      div.date-component {
-        flex: 0;
-        @include margin-right(16px);
-      }
-
-      .title {
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        font-weight: 400;
-        line-height: 1em;
-        font-size: 1.6em;
-        padding-bottom: 5px;
-        margin: auto 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/js/src/components/Event/EventMap.vue b/js/src/components/Event/EventMap.vue
index adb332f4f..0a3d050b9 100644
--- a/js/src/components/Event/EventMap.vue
+++ b/js/src/components/Event/EventMap.vue
@@ -6,6 +6,7 @@
     <div class="modal-card-body">
       <section class="map">
         <map-leaflet
+          v-if="physicalAddress?.geom"
           :coords="physicalAddress.geom"
           :marker="{
             text: physicalAddress.fullName,
@@ -15,7 +16,7 @@
       </section>
       <section class="columns is-centered map-footer">
         <div class="column is-half has-text-centered">
-          <p class="address">
+          <p class="address" v-if="physicalAddress?.fullName">
             <i class="mdi mdi-map-marker"></i>
             {{ physicalAddress.fullName }}
           </p>
@@ -66,11 +67,10 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { Address, IAddress } from "@/types/address.model";
 import { RoutingTransportationType, RoutingType } from "@/types/enums";
-import { PropType } from "vue";
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { computed } from "vue";
 
 const RoutingParamType = {
   [RoutingType.OPENSTREETMAP]: {
@@ -87,77 +87,73 @@ const RoutingParamType = {
   },
 };
 
-@Component({
-  components: {
-    "map-leaflet": () =>
-      import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
-  },
-})
-export default class EventMap extends Vue {
-  @Prop({ type: Object as PropType<IAddress> }) address!: IAddress;
-  @Prop({ type: String }) routingType!: RoutingType;
+const MapLeaflet = import("@/components/LeafletMap.vue");
 
-  get physicalAddress(): Address | null {
-    if (!this.address) return null;
+const props = defineProps<{
+  address: IAddress;
+  routingType: RoutingType;
+}>();
 
-    return new Address(this.address);
-  }
+const physicalAddress = computed((): Address | null => {
+  if (!props.address) return null;
 
-  makeNavigationPath(
-    transportationType: RoutingTransportationType
-  ): string | undefined {
-    const geometry = this.physicalAddress?.geom;
-    if (geometry) {
-      /**
-       * build urls to routing map
-       */
-      if (!RoutingParamType[this.routingType][transportationType]) {
-        return;
-      }
+  return new Address(props.address);
+});
 
-      const urlGeometry = geometry.split(";").reverse().join(",");
+const makeNavigationPath = (
+  transportationType: RoutingTransportationType
+): string | undefined => {
+  const geometry = physicalAddress.value?.geom;
+  if (geometry) {
+    /**
+     * build urls to routing map
+     */
+    if (!RoutingParamType[props.routingType][transportationType]) {
+      return;
+    }
 
-      switch (this.routingType) {
-        case RoutingType.GOOGLE_MAPS:
-          return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${
-            RoutingParamType[this.routingType][transportationType]
-          }`;
-        case RoutingType.OPENSTREETMAP:
-        default: {
-          const bboxX = geometry.split(";").reverse()[0];
-          const bboxY = geometry.split(";").reverse()[1];
-          return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${
-            RoutingParamType[this.routingType][transportationType]
-          }#map=14/${bboxX}/${bboxY}`;
-        }
+    const urlGeometry = geometry.split(";").reverse().join(",");
+
+    switch (props.routingType) {
+      case RoutingType.GOOGLE_MAPS:
+        return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${
+          RoutingParamType[props.routingType][transportationType]
+        }`;
+      case RoutingType.OPENSTREETMAP:
+      default: {
+        const bboxX = geometry.split(";").reverse()[0];
+        const bboxY = geometry.split(";").reverse()[1];
+        return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${
+          RoutingParamType[props.routingType][transportationType]
+        }#map=14/${bboxX}/${bboxY}`;
       }
     }
   }
+};
 
-  get addressLinkToRouteByCar(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.CAR);
-  }
+const addressLinkToRouteByCar = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.CAR);
+});
 
-  get addressLinkToRouteByBike(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.BIKE);
-  }
+const addressLinkToRouteByBike = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.BIKE);
+});
 
-  get addressLinkToRouteByFeet(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.FOOT);
-  }
+const addressLinkToRouteByFeet = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.FOOT);
+});
 
-  get addressLinkToRouteByTransit(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.TRANSIT);
-  }
-}
+const addressLinkToRouteByTransit = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.TRANSIT);
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 .modal-card-head {
   justify-content: flex-end;
-  button.delete {
-    @include margin-right(1rem);
-  }
+  // button.delete {
+  //   @include margin-right(1rem);
+  // }
 }
 
 section.map {
diff --git a/js/src/components/Event/EventMetadataBlock.vue b/js/src/components/Event/EventMetadataBlock.vue
index 520370304..baadec234 100644
--- a/js/src/components/Event/EventMetadataBlock.vue
+++ b/js/src/components/Event/EventMetadataBlock.vue
@@ -1,9 +1,10 @@
 <template>
   <div>
     <h2>{{ title }}</h2>
-    <div class="eventMetadataBlock">
+    <div class="flex items-center mb-3 gap-1 eventMetadataBlock">
+      <slot name="icon"></slot>
       <!-- Custom icons -->
-      <span
+      <!-- <span
         class="icon is-medium"
         v-if="icon && icon.substring(0, 7) === 'mz:icon'"
       >
@@ -13,38 +14,21 @@
           height="32"
         />
       </span>
-      <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
-      <div class="content-wrapper" :class="{ 'padding-left': icon }">
+      <o-icon v-else-if="icon" :icon="icon" size="is-medium" /> -->
+      <div class="content-wrapper overflow-hidden w-full">
         <slot></slot>
       </div>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class EventMetadataBlock extends Vue {
-  @Prop({ required: false, type: String }) icon!: string;
-
-  @Prop({ required: true, type: String }) title!: string;
-}
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+}>();
 </script>
 <style lang="scss" scoped>
-h2 {
-  font-size: 1.8rem;
-  font-weight: 500;
-  color: $violet;
-}
-
 div.eventMetadataBlock {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1.75rem;
-
   .content-wrapper {
-    overflow: hidden;
-    width: 100%;
     max-width: calc(100vw - 32px - 20px);
 
     &.padding-left {
diff --git a/js/src/components/Event/EventMetadataItem.vue b/js/src/components/Event/EventMetadataItem.vue
index a5c3682c8..ff98a0476 100644
--- a/js/src/components/Event/EventMetadataItem.vue
+++ b/js/src/components/Event/EventMetadataItem.vue
@@ -1,142 +1,143 @@
 <template>
-  <div class="card card-content">
-    <div class="media">
-      <div class="media-left">
+  <div
+    class="block p-4 bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
+  >
+    <div class="flex flex-wrap gap-1 w-full items-center">
+      <div class="">
         <img
           v-if="
-            metadataItem.icon && metadataItem.icon.substring(0, 7) === 'mz:icon'
+            modelValue.icon && modelValue.icon.substring(0, 7) === 'mz:icon'
           "
-          :src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`"
+          :src="`/img/${modelValue.icon.substring(8)}_monochrome.svg`"
           width="24"
           height="24"
           alt=""
         />
 
-        <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
-        <b-icon v-else icon="help-circle" />
+        <o-icon
+          v-else-if="modelValue.icon"
+          :icon="modelValue.icon"
+          customSize="24"
+        />
+        <o-icon v-else icon="help-circle" customSize="24" />
       </div>
-      <div class="media-content">
-        <b>{{ metadataItem.title || metadataItem.label }}</b>
+      <div class="flex-1">
+        <b>{{ modelValue.title || modelValue.label }}</b>
         <br />
         <small>
-          {{ metadataItem.description }}
+          {{ modelValue.description }}
         </small>
         <div
           v-if="
-            metadataItem.type === EventMetadataType.STRING &&
-            metadataItem.keyType === EventMetadataKeyType.CHOICE &&
-            metadataItem.choices
+            modelValue.type === EventMetadataType.STRING &&
+            modelValue.keyType === EventMetadataKeyType.CHOICE &&
+            modelValue.choices
           "
         >
-          <b-field v-for="(value, key) in metadataItem.choices" :key="key">
-            <b-radio v-model="metadataItemValue" :native-value="key">{{
+          <o-field v-for="(value, key) in modelValue.choices" :key="key">
+            <o-radio v-model="metadataItemValue" :native-value="key">{{
               value
-            }}</b-radio>
-          </b-field>
+            }}</o-radio>
+          </o-field>
         </div>
-        <b-field
+        <o-field
           v-else-if="
-            metadataItem.type === EventMetadataType.STRING &&
-            metadataItem.keyType == EventMetadataKeyType.URL
+            modelValue.type === EventMetadataType.STRING &&
+            modelValue.keyType == EventMetadataKeyType.URL
           "
         >
-          <b-input
+          <o-input
             @blur="validatePattern"
             ref="urlInput"
             type="url"
             :pattern="
-              metadataItem.pattern ? metadataItem.pattern.source : undefined
+              modelValue.pattern ? modelValue.pattern.source : undefined
             "
             :validation-message="$t(`This URL doesn't seem to be valid`)"
             required
             v-model="metadataItemValue"
-            :placeholder="metadataItem.placeholder"
+            :placeholder="modelValue.placeholder"
           />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.STRING">
-          <b-input
+        </o-field>
+        <o-field v-else-if="modelValue.type === EventMetadataType.STRING">
+          <o-input
             v-model="metadataItemValue"
-            :placeholder="metadataItem.placeholder"
+            :placeholder="modelValue.placeholder"
           />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
-          <b-numberinput v-model="metadataItemValue" />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
-          <b-checkbox v-model="metadataItemValue">
+        </o-field>
+        <o-field v-else-if="modelValue.type === EventMetadataType.INTEGER">
+          <o-input type="number" v-model="metadataItemValue" />
+        </o-field>
+        <o-field v-else-if="modelValue.type === EventMetadataType.BOOLEAN">
+          <o-checkbox v-model="metadataItemValue">
             {{
               metadataItemValue === "true"
-                ? metadataItem.choices["true"]
-                : metadataItem.choices["false"]
+                ? modelValue?.choices?.true
+                : modelValue?.choices?.false
             }}
-          </b-checkbox>
-        </b-field>
+          </o-checkbox>
+        </o-field>
       </div>
-      <b-button
+      <o-button
         icon-left="close"
-        @click="$emit('removeItem', metadataItem.key)"
+        @click="$emit('removeItem', modelValue.key)"
       />
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Ref, Vue } from "vue-property-decorator";
+import { computed, ref } from "vue";
 
-@Component
-export default class EventMetadataItem extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  value!: IEventMetadataDescription;
+const props = defineProps<{
+  modelValue: IEventMetadataDescription;
+}>();
 
-  EventMetadataType = EventMetadataType;
-  EventMetadataKeyType = EventMetadataKeyType;
+const emit = defineEmits(["update:modelValue", "removeItem"]);
 
-  @Ref("urlInput") readonly urlInput!: any;
+const urlInput = ref<any>(null);
 
-  get metadataItem(): IEventMetadataDescription {
-    return this.value;
-  }
-
-  get metadataItemValue(): string {
-    return this.metadataItem.value;
-  }
-
-  set metadataItemValue(value: string) {
-    if (this.validate(value)) {
-      this.$emit("input", { ...this.metadataItem, value: value.toString() });
+const metadataItemValue = computed({
+  get(): string {
+    return props.modelValue.value;
+  },
+  set(value: string) {
+    if (validate(value)) {
+      emit("update:modelValue", {
+        ...props.modelValue,
+        value: value.toString(),
+      });
     }
-  }
+  },
+});
 
-  validatePattern(): void {
-    this.urlInput.checkHtml5Validity();
-  }
+const validatePattern = (): void => {
+  urlInput.value?.checkHtml5Validity();
+};
 
-  private validate(value: string): boolean {
-    if (this.metadataItem.keyType === EventMetadataKeyType.URL) {
-      try {
-        const url = new URL(value);
-        if (!["http:", "https:", "mailto:"].includes(url.protocol))
-          return false;
-        if (this.metadataItem.pattern) {
-          return value.match(this.metadataItem.pattern) !== null;
-        }
-      } catch {
-        return false;
+const validate = (value: string): boolean => {
+  if (props.modelValue.keyType === EventMetadataKeyType.URL) {
+    try {
+      const url = new URL(value);
+      if (!["http:", "https:", "mailto:"].includes(url.protocol)) return false;
+      if (props.modelValue.pattern) {
+        return value.match(props.modelValue.pattern) !== null;
       }
+    } catch {
+      return false;
     }
-    return true;
   }
-}
+  return true;
+};
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 .card .media {
   align-items: center;
 
-  & > button {
-    @include margin-left(1rem);
-  }
+  // & > button {
+  //   @include margin-left(1rem);
+  // }
 }
 </style>
diff --git a/js/src/components/Event/EventMetadataList.vue b/js/src/components/Event/EventMetadataList.vue
index 313fda303..d3fb4abd0 100644
--- a/js/src/components/Event/EventMetadataList.vue
+++ b/js/src/components/Event/EventMetadataList.vue
@@ -3,18 +3,18 @@
     <div class="mb-4">
       <div v-for="(item, index) in metadata" :key="item.key" class="my-2">
         <event-metadata-item
-          :value="metadata[index]"
-          @input="updateSingleMetadata"
+          :modelValue="metadata[index]"
+          @update:modelValue="updateSingleMetadata"
           @removeItem="removeItem"
         />
       </div>
     </div>
-    <b-field
+    <o-field
       grouped
       :label="$t('Find or add an element')"
       label-for="event-metadata-autocomplete"
     >
-      <b-autocomplete
+      <o-autocomplete
         expanded
         :clear-on-select="true"
         v-model="search"
@@ -25,12 +25,12 @@
         open-on-focus
         :placeholder="$t('e.g. Accessibility, Twitch, PeerTube')"
         id="event-metadata-autocomplete"
-        @select="(option) => addElement(option)"
+        @select="addElement"
         dir="auto"
       >
-        <template slot-scope="props">
-          <div class="media">
-            <div class="media-left">
+        <template v-slot="props">
+          <div class="dark:bg-violet-3 p-1 flex items-center gap-1">
+            <div class="">
               <img
                 v-if="
                   props.option.icon &&
@@ -41,10 +41,10 @@
                 height="24"
                 alt=""
               />
-              <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
-              <b-icon v-else icon="help-circle" />
+              <o-icon v-else-if="props.option.icon" :icon="props.option.icon" />
+              <o-icon v-else icon="help-circle" />
             </div>
-            <div class="media-content">
+            <div class="">
               <b>{{ props.option.label }}</b>
               <br />
               <small>
@@ -56,14 +56,14 @@
         <template #empty>{{
           $t("No results for {search}", { search })
         }}</template>
-      </b-autocomplete>
+      </o-autocomplete>
       <p class="control">
-        <b-button @click="showNewElementModal = true">
+        <o-button @click="showNewElementModal = true">
           {{ $t("Add new…") }}
-        </b-button>
+        </o-button>
       </p>
-    </b-field>
-    <b-modal
+    </o-field>
+    <o-modal
       has-modal-card
       v-model="showNewElementModal"
       :close-button-aria-label="$t('Close')"
@@ -78,147 +78,142 @@
         </header>
         <div class="modal-card-body">
           <form @submit="addNewElement">
-            <b-field :label="$t('Element title')">
-              <b-input v-model="newElement.title" />
-            </b-field>
-            <b-field :label="$t('Element value')">
-              <b-input v-model="newElement.value" />
-            </b-field>
-            <b-button type="is-primary" native-type="submit">{{
+            <o-field :label="$t('Element title')">
+              <o-input v-model="newElement.title" />
+            </o-field>
+            <o-field :label="$t('Element value')">
+              <o-input v-model="newElement.value" />
+            </o-field>
+            <o-button variant="primary" native-type="submit">{{
               $t("Add")
-            }}</b-button>
+            }}</o-button>
           </form>
         </div>
       </div>
-    </b-modal>
+    </o-modal>
   </section>
 </template>
-<script lang="ts">
-import {
-  IEventMetadata,
-  IEventMetadataDescription,
-} from "@/types/event-metadata";
+<script lang="ts" setup>
+import { IEventMetadataDescription } from "@/types/event-metadata";
 import cloneDeep from "lodash/cloneDeep";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed, reactive, ref } from "vue";
 import EventMetadataItem from "./EventMetadataItem.vue";
 import { eventMetaDataList } from "../../services/EventMetadata";
 import { EventMetadataCategories, EventMetadataType } from "@/types/enums";
+import { useI18n } from "vue-i18n";
 
 type GroupedIEventMetadata = Array<{
   category: string;
-  items: IEventMetadata[];
+  items: IEventMetadataDescription[];
 }>;
 
-@Component({
-  components: {
-    EventMetadataItem,
-  },
-})
-export default class EventMetadataList extends Vue {
-  @Prop({ type: Array as PropType<Array<IEventMetadata>>, required: true })
-  value!: IEventMetadata[];
+const props = defineProps<{
+  modelValue: IEventMetadataDescription[];
+}>();
 
-  newElement = {
-    title: "",
-    value: "",
-  };
+const emit = defineEmits(["update:modelValue"]);
 
-  search = "";
+const newElement = reactive({
+  title: "",
+  value: "",
+});
 
-  data: IEventMetadataDescription[] = eventMetaDataList;
+const { t } = useI18n({ useScope: "global" });
 
-  showNewElementModal = false;
+const search = ref("");
 
-  get metadata(): IEventMetadata[] {
-    return this.value.map((val) => {
-      const def = this.data.find((dat) => dat.key === val.key);
+const data: IEventMetadataDescription[] = eventMetaDataList;
+
+const showNewElementModal = ref(false);
+
+const metadata = computed({
+  get(): IEventMetadataDescription[] {
+    return props.modelValue.map((val) => {
+      const def = data.find((dat) => dat.key === val.key);
       return {
         ...def,
         ...val,
       };
     }) as any[];
-  }
-
-  set metadata(metadata: IEventMetadata[]) {
-    this.$emit(
-      "input",
-      metadata.filter((elem) => elem)
+  },
+  set(newMetadata: IEventMetadataDescription[]) {
+    emit(
+      "update:modelValue",
+      newMetadata.filter((elem) => elem)
     );
-  }
+  },
+});
 
-  localizedCategories: Record<EventMetadataCategories, string> = {
-    [EventMetadataCategories.ACCESSIBILITY]: this.$t("Accessibility") as string,
-    [EventMetadataCategories.LIVE]: this.$t("Live") as string,
-    [EventMetadataCategories.REPLAY]: this.$t("Replay") as string,
-    [EventMetadataCategories.TOOLS]: this.$t("Tools") as string,
-    [EventMetadataCategories.SOCIAL]: this.$t("Social") as string,
-    [EventMetadataCategories.DETAILS]: this.$t("Details") as string,
-    [EventMetadataCategories.BOOKING]: this.$t("Booking") as string,
-    [EventMetadataCategories.VIDEO_CONFERENCE]: this.$t(
-      "Video Conference"
-    ) as string,
-  };
+const localizedCategories: Record<EventMetadataCategories, string> = {
+  [EventMetadataCategories.ACCESSIBILITY]: t("Accessibility") as string,
+  [EventMetadataCategories.LIVE]: t("Live") as string,
+  [EventMetadataCategories.REPLAY]: t("Replay") as string,
+  [EventMetadataCategories.TOOLS]: t("Tools") as string,
+  [EventMetadataCategories.SOCIAL]: t("Social") as string,
+  [EventMetadataCategories.DETAILS]: t("Details") as string,
+  [EventMetadataCategories.BOOKING]: t("Booking") as string,
+  [EventMetadataCategories.VIDEO_CONFERENCE]: t("Video Conference") as string,
+};
 
-  get filteredDataArray(): GroupedIEventMetadata {
-    return this.data
-      .filter((option) => {
-        return (
-          option.label
-            .toString()
-            .toLowerCase()
-            .indexOf(this.search.toLowerCase()) >= 0
-        );
-      })
-      .filter(({ key }) => {
-        return !this.metadata.map(({ key: key2 }) => key2).includes(key);
-      })
-      .reduce(
-        (acc: GroupedIEventMetadata, current: IEventMetadataDescription) => {
-          const group = acc.find(
-            (elem) =>
-              elem.category === this.localizedCategories[current.category]
-          );
-          if (group) {
-            group.items.push(current);
-          } else {
-            acc.push({
-              category: this.localizedCategories[current.category],
-              items: [current],
-            });
-          }
-          return acc;
-        },
-        []
+const filteredDataArray = computed((): GroupedIEventMetadata => {
+  return data
+    .filter((option) => {
+      return (
+        option.label
+          .toString()
+          .toLowerCase()
+          .indexOf(search.value.toLowerCase()) >= 0
       );
-  }
+    })
+    .filter(({ key }) => {
+      return !metadata.value.map(({ key: key2 }) => key2).includes(key);
+    })
+    .reduce(
+      (acc: GroupedIEventMetadata, current: IEventMetadataDescription) => {
+        const group = acc.find(
+          (elem) => elem.category === localizedCategories[current.category]
+        );
+        if (group) {
+          group.items.push(current);
+        } else {
+          acc.push({
+            category: localizedCategories[current.category],
+            items: [current],
+          });
+        }
+        return acc;
+      },
+      []
+    );
+});
 
-  updateSingleMetadata(element: IEventMetadataDescription): void {
-    const metadataClone = cloneDeep(this.metadata);
-    const index = metadataClone.findIndex((elem) => elem.key === element.key);
-    metadataClone.splice(index, 1, element);
-    this.$emit("input", metadataClone);
-  }
+const updateSingleMetadata = (element: IEventMetadataDescription): void => {
+  const metadataClone = cloneDeep(metadata.value);
+  const index = metadataClone.findIndex((elem) => elem.key === element.key);
+  metadataClone.splice(index, 1, element);
+  emit("update:modelValue", metadataClone);
+};
 
-  removeItem(itemKey: string): void {
-    const metadataClone = cloneDeep(this.metadata);
-    const index = metadataClone.findIndex((elem) => elem.key === itemKey);
-    metadataClone.splice(index, 1);
-    this.$emit("input", metadataClone);
-  }
+const removeItem = (itemKey: string): void => {
+  const metadataClone = cloneDeep(metadata.value);
+  const index = metadataClone.findIndex((elem) => elem.key === itemKey);
+  metadataClone.splice(index, 1);
+  emit("update:modelValue", metadataClone);
+};
 
-  addElement(element: IEventMetadata): void {
-    this.metadata = [...this.metadata, element];
-  }
+const addElement = (element: IEventMetadataDescription): void => {
+  metadata.value = [...metadata.value, element];
+};
 
-  addNewElement(e: Event): void {
-    e.preventDefault();
-    this.addElement({
-      ...this.newElement,
-      type: EventMetadataType.STRING,
-      key: `mz:plain:${(Math.random() + 1).toString(36).substring(7)}`,
-    });
-    this.showNewElementModal = false;
-  }
-}
+const addNewElement = (e: Event): void => {
+  e.preventDefault();
+  addElement({
+    ...newElement,
+    type: EventMetadataType.STRING,
+    key: `mz:plain:${(Math.random() + 1).toString(36).substring(7)}`,
+    category: EventMetadataCategories.DETAILS,
+    label: "",
+  });
+  showNewElementModal.value = false;
+};
 </script>
diff --git a/js/src/components/Event/EventMetadataSidebar.vue b/js/src/components/Event/EventMetadataSidebar.vue
index 574a0a947..b6a0db330 100644
--- a/js/src/components/Event/EventMetadataSidebar.vue
+++ b/js/src/components/Event/EventMetadataSidebar.vue
@@ -2,37 +2,48 @@
   <div>
     <event-metadata-block
       v-if="!event.options.isOnline"
-      :title="$t('Location')"
-      :icon="physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'"
+      :title="t('Location')"
+      :icon="addressPOIInfos?.poiIcon?.icon ?? 'earth'"
     >
       <div class="address-wrapper">
-        <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
+        <span v-if="!physicalAddress">{{ t("No address defined") }}</span>
         <div class="address" v-if="physicalAddress">
           <address-info :address="physicalAddress" />
-          <b-button
-            type="is-text"
+          <o-button
+            variant="text"
             class="map-show-button"
             @click="$emit('showMapModal', true)"
             v-if="physicalAddress.geom"
           >
-            {{ $t("Show map") }}
-          </b-button>
+            {{ t("Show map") }}
+          </o-button>
         </div>
       </div>
+      <template #icon>
+        <o-icon
+          v-if="addressPOIInfos?.poiIcon?.icon"
+          :icon="addressPOIInfos?.poiIcon?.icon"
+          customSize="36"
+        />
+        <Earth v-else :size="36" />
+      </template>
     </event-metadata-block>
-    <event-metadata-block :title="$t('Date and time')" icon="calendar">
+    <event-metadata-block :title="t('Date and time')">
+      <template #icon>
+        <Calendar :size="36" />
+      </template>
       <event-full-date
-        :beginsOn="event.beginsOn"
+        :beginsOn="event.beginsOn.toString()"
         :show-start-time="event.options.showStartTime"
         :show-end-time="event.options.showEndTime"
-        :timezone="event.options.timezone"
+        :timezone="event.options.timezone ?? undefined"
         :userTimezone="userTimezone"
-        :endsOn="event.endsOn"
+        :endsOn="event.endsOn?.toString()"
       />
     </event-metadata-block>
     <event-metadata-block
       class="metadata-organized-by"
-      :title="$t('Organized by')"
+      :title="t('Organized by')"
     >
       <router-link
         v-if="event.attributedTo"
@@ -52,7 +63,11 @@
           :inline="true"
         />
       </router-link>
-      <actor-card v-else :actor="event.organizerActor" :inline="true" />
+      <actor-card
+        v-else-if="event.organizerActor"
+        :actor="event.organizerActor"
+        :inline="true"
+      />
       <actor-card
         :inline="true"
         :actor="contact"
@@ -62,16 +77,18 @@
     </event-metadata-block>
     <event-metadata-block
       v-if="event.onlineAddress && urlToHostname(event.onlineAddress)"
-      icon="link"
-      :title="$t('Website')"
+      :title="t('Website')"
     >
+      <template #icon>
+        <Link :size="36" />
+      </template>
       <a
         target="_blank"
-        class="hover:underline"
+        class="underline"
         rel="noopener noreferrer ugc"
         :href="event.onlineAddress"
         :title="
-          $t('View page on {hostname} (in a new window)', {
+          t('View page on {hostname} (in a new window)', {
             hostname: urlToHostname(event.onlineAddress),
           })
         "
@@ -81,9 +98,9 @@
     <event-metadata-block
       v-for="extra in extraMetadata"
       :title="extra.title || extra.label"
-      :icon="extra.icon"
       :key="extra.key"
     >
+      <template #icon> <o-icon :icon="extra.icon" customSize="36" /> </template>
       <span
         v-if="
           ((extra.type == EventMetadataType.STRING &&
@@ -104,7 +121,7 @@
         rel="noopener noreferrer ugc"
         :href="extra.value"
         :title="
-          $t('View page on {hostname} (in a new window)', {
+          t('View page on {hostname} (in a new window)', {
             hostname: urlToHostname(extra.value),
           })
         "
@@ -119,7 +136,7 @@
         rel="noopener noreferrer ugc"
         :href="accountURL(extra)"
         :title="
-          $t('View account on {hostname} (in a new window)', {
+          t('View account on {hostname} (in a new window)', {
             hostname: urlToHostname(accountURL(extra)),
           })
         "
@@ -129,107 +146,95 @@
     </event-metadata-block>
   </div>
 </template>
-<script lang="ts">
-import { Address } from "@/types/address.model";
-import { IConfig } from "@/types/config.model";
+<script lang="ts" setup>
+import { Address, addressToPoiInfos } from "@/types/address.model";
 import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
 import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 import RouteName from "../../router/name";
 import { usernameWithDomain } from "../../types/actor";
 import EventMetadataBlock from "./EventMetadataBlock.vue";
 import EventFullDate from "./EventFullDate.vue";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import AddressInfo from "../../components/Address/AddressInfo.vue";
-import {
-  IEventMetadata,
-  IEventMetadataDescription,
-} from "@/types/event-metadata";
+import { IEventMetadataDescription } from "@/types/event-metadata";
 import { eventMetaDataList } from "../../services/EventMetadata";
 import { IUser } from "@/types/current-user.model";
+import { useI18n } from "vue-i18n";
+import Earth from "vue-material-design-icons/Earth.vue";
+import Calendar from "vue-material-design-icons/Calendar.vue";
+import Link from "vue-material-design-icons/Link.vue";
 
-@Component({
-  components: {
-    EventMetadataBlock,
-    EventFullDate,
-    PopoverActorCard,
-    ActorCard,
-    AddressInfo,
-  },
-})
-export default class EventMetadataSidebar extends Vue {
-  @Prop({ type: Object as PropType<IEvent>, required: true }) event!: IEvent;
-  @Prop({ type: Object as PropType<IConfig>, required: true }) config!: IConfig;
-  @Prop({ required: true }) user!: IUser | undefined;
-  @Prop({ required: false, default: false }) showMap!: boolean;
+const props = withDefaults(
+  defineProps<{
+    event: IEvent;
+    user: IUser | undefined;
+    showMap?: boolean;
+  }>(),
+  { showMap: false }
+);
 
-  RouteName = RouteName;
+const { t } = useI18n({ useScope: "global" });
 
-  usernameWithDomain = usernameWithDomain;
+const physicalAddress = computed((): Address | null => {
+  if (!props.event.physicalAddress) return null;
 
-  eventMetaDataList = eventMetaDataList;
+  return new Address(props.event.physicalAddress);
+});
 
-  EventMetadataType = EventMetadataType;
-  EventMetadataKeyType = EventMetadataKeyType;
+const addressPOIInfos = computed(() => {
+  if (!props.event.physicalAddress) return null;
+  return addressToPoiInfos(props.event.physicalAddress);
+});
 
-  get physicalAddress(): Address | null {
-    if (!this.event.physicalAddress) return null;
+const extraMetadata = computed((): IEventMetadataDescription[] => {
+  return props.event.metadata.map((val) => {
+    const def = eventMetaDataList.find((dat) => dat.key === val.key);
+    return {
+      ...def,
+      ...val,
+    };
+  });
+});
 
-    return new Address(this.event.physicalAddress);
+const urlToHostname = (url: string | undefined): string | null => {
+  if (!url) return null;
+  try {
+    return new URL(url).hostname;
+  } catch (e) {
+    return null;
   }
+};
 
-  get extraMetadata(): IEventMetadata[] {
-    return this.event.metadata.map((val) => {
-      const def = eventMetaDataList.find((dat) => dat.key === val.key);
-      return {
-        ...def,
-        ...val,
-      };
-    });
+const simpleURL = (url: string): string | null => {
+  try {
+    const uri = new URL(url);
+    return `${removeWWW(uri.hostname)}${uri.pathname}${uri.search}${uri.hash}`;
+  } catch (e) {
+    return null;
   }
+};
 
-  urlToHostname(url: string): string | null {
-    try {
-      return new URL(url).hostname;
-    } catch (e) {
-      return null;
+const removeWWW = (string: string): string => {
+  return string.replace(/^www./, "");
+};
+
+const accountURL = (extra: IEventMetadataDescription): string | undefined => {
+  switch (extra.key) {
+    case "mz:social:twitter:account": {
+      const handle =
+        extra.value[0] === "@" ? extra.value.slice(1) : extra.value;
+      return `https://twitter.com/${handle}`;
     }
   }
+};
 
-  simpleURL(url: string): string | null {
-    try {
-      const uri = new URL(url);
-      return `${this.removeWWW(uri.hostname)}${uri.pathname}${uri.search}${
-        uri.hash
-      }`;
-    } catch (e) {
-      return null;
-    }
-  }
-
-  private removeWWW(string: string): string {
-    return string.replace(/^www./, "");
-  }
-
-  accountURL(extra: IEventMetadataDescription): string | undefined {
-    switch (extra.key) {
-      case "mz:social:twitter:account": {
-        const handle =
-          extra.value[0] === "@" ? extra.value.slice(1) : extra.value;
-        return `https://twitter.com/${handle}`;
-      }
-    }
-  }
-
-  get userTimezone(): string | undefined {
-    return this.user?.settings?.timezone;
-  }
-}
+const userTimezone = computed((): string | undefined => {
+  return props.user?.settings?.timezone;
+});
 </script>
 <style lang="scss" scoped>
-::v-deep .metadata-organized-by {
+:deep(.metadata-organized-by) {
   .v-popover.popover .trigger {
     width: 100%;
     .media-content {
diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index 8c93c63b0..b39971060 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -1,97 +1,101 @@
 <template>
   <router-link
-    class="event-minimalist-card-wrapper bg-white rounded-lg shadow-md"
+    class="block md:flex gap-x-2 gap-y-3 bg-white dark:bg-violet-2 rounded-lg shadow-md w-full"
     dir="auto"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
     <div class="event-preview mr-0 ml-0">
-      <div>
-        <div class="date-component">
-          <date-calendar-icon :date="event.beginsOn" :small="true" />
+      <div class="relative w-full">
+        <div class="flex absolute bottom-2 left-2 z-10 date-component">
+          <date-calendar-icon :date="event.beginsOn.toString()" :small="true" />
         </div>
         <lazy-image-wrapper
           :picture="event.picture"
           :rounded="true"
-          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
+          class="object-cover flex-none h-32 md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
         />
       </div>
     </div>
-    <div class="title-info-wrapper has-text-grey-dark">
-      <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
-        <b-tag
-          type="is-info"
+    <div class="title-info-wrapper p-2">
+      <h3
+        class="event-minimalist-title pb-2 text-lg leading-6 line-clamp-3 font-bold text-violet-title dark:text-white"
+        :lang="event.language"
+        dir="auto"
+      >
+        <tag
+          variant="info"
           class="mr-1"
           v-if="event.status === EventStatus.TENTATIVE"
         >
           {{ $t("Tentative") }}
-        </b-tag>
-        <b-tag
-          type="is-danger"
+        </tag>
+        <tag
+          variant="danger"
           class="mr-1"
           v-if="event.status === EventStatus.CANCELLED"
         >
           {{ $t("Cancelled") }}
-        </b-tag>
-        <b-tag
-          class="mr-2"
-          type="is-warning"
-          size="is-medium"
-          v-if="event.draft"
-          >{{ $t("Draft") }}</b-tag
-        >
+        </tag>
+        <tag class="mr-2" variant="warning" size="medium" v-if="event.draft">{{
+          $t("Draft")
+        }}</tag>
         {{ event.title }}
       </h3>
       <inline-address
         v-if="event.physicalAddress"
-        class="event-subtitle"
+        class=""
         :physical-address="event.physicalAddress"
       />
-      <div
-        class="event-subtitle"
-        v-else-if="event.options && event.options.isOnline"
-      >
-        <b-icon icon="video" />
+      <div class="" v-else-if="event.options && event.options.isOnline">
+        <Video />
         <span>{{ $t("Online") }}</span>
       </div>
-      <div class="event-subtitle event-organizer" v-if="showOrganizer">
-        <figure
-          class="image is-24x24"
-          v-if="organizer(event) && organizer(event).avatar"
-        >
-          <img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
+      <div class="flex gap-1" v-if="showOrganizer">
+        <figure class="" v-if="organizer(event) && organizer(event)?.avatar">
+          <img
+            class="rounded-full"
+            :src="organizer(event)?.avatar?.url"
+            alt=""
+            width="24"
+            height="24"
+          />
         </figure>
-        <b-icon v-else icon="account-circle" />
-        <span class="organizer-name">
+        <AccountCircle v-else :size="24" />
+        <span class="">
           {{ organizerDisplayName(event) }}
         </span>
       </div>
-      <p class="participant-metadata">
-        <b-icon icon="account-multiple" />
+      <p class="flex gap-1">
+        <AccountMultiple />
         <span v-if="event.options.maximumAttendeeCapacity !== 0">
           {{
-            $tc(
+            $t(
               "{available}/{capacity} available places",
-              event.options.maximumAttendeeCapacity -
-                event.participantStats.participant,
               {
                 available:
                   event.options.maximumAttendeeCapacity -
                   event.participantStats.participant,
                 capacity: event.options.maximumAttendeeCapacity,
-              }
+              },
+              event.options.maximumAttendeeCapacity -
+                event.participantStats.participant
             )
           }}
         </span>
         <span v-else>
           {{
-            $tc("{count} participants", event.participantStats.participant, {
-              count: event.participantStats.participant,
-            })
+            $t(
+              "{count} participants",
+              {
+                count: event.participantStats.participant,
+              },
+              event.participantStats.participant
+            )
           }}
         </span>
         <span v-if="event.participantStats.notApproved > 0">
-          <b-button
-            type="is-text"
+          <o-button
+            variant="text"
             @click="
               gotToWithCheck(participation, {
                 name: RouteName.PARTICIPATIONS,
@@ -101,105 +105,90 @@
             "
           >
             {{
-              $tc(
+              $t(
                 "{count} requests waiting",
-                event.participantStats.notApproved,
+
                 {
                   count: event.participantStats.notApproved,
-                }
+                },
+                event.participantStats.notApproved
               )
             }}
-          </b-button>
+          </o-button>
         </span>
       </p>
     </div>
   </router-link>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
+import Video from "vue-material-design-icons/Video.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
+import Tag from "@/components/TagElement.vue";
 
-@Component({
-  components: {
-    DateCalendarIcon,
-    LazyImageWrapper,
-    InlineAddress,
-  },
-})
-export default class EventMinimalistCard extends Vue {
-  @Prop({ required: true, type: Object }) event!: IEvent;
-  @Prop({ required: false, type: Boolean, default: false })
-  showOrganizer!: boolean;
-
-  RouteName = RouteName;
-
-  ParticipantRole = ParticipantRole;
-
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
-  EventStatus = EventStatus;
-}
+withDefaults(
+  defineProps<{
+    event: IEvent;
+    showOrganizer?: boolean;
+  }>(),
+  { showOrganizer: false }
+);
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-@import "~bulma/sass/utilities/mixins.sass";
-@import "@/variables.scss";
 
 .event-minimalist-card-wrapper {
-  display: grid;
-  grid-gap: 5px 10px;
+  // display: grid;
+  // grid-gap: 5px 10px;
   grid-template-areas: "preview" "body";
-  color: initial;
+  // color: initial;
 
-  @include desktop {
-    grid-template-columns: 200px 3fr;
-    grid-template-areas: "preview body";
-  }
+  // @include desktop {
+  grid-template-columns: 200px 3fr;
+  grid-template-areas: "preview body";
+  // }
 
-  .event-preview {
-    & > div {
-      position: relative;
-      height: 120px;
-      width: 100%;
+  // .event-preview {
+  //   & > div {
+  //     position: relative;
+  //     height: 120px;
+  //     width: 100%;
 
-      div.date-component {
-        display: flex;
-        position: absolute;
-        bottom: 5px;
-        left: 5px;
-        z-index: 1;
-      }
-    }
-  }
+  //     div.date-component {
+  //       display: flex;
+  //       position: absolute;
+  //       bottom: 5px;
+  //       left: 5px;
+  //       z-index: 1;
+  //     }
+  //   }
+  // }
 
-  .calendar-icon {
-    @include margin-right(1rem);
-  }
+  // .calendar-icon {
+  //   @include margin-right(1rem);
+  // }
 
   .title-info-wrapper {
     flex: 2;
 
-    .event-minimalist-title {
-      padding-bottom: 5px;
-      font-size: 18px;
-      line-height: 24px;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-weight: bold;
-      color: $title-color;
-    }
+    // .event-minimalist-title {
+    //   padding-bottom: 5px;
+    //   font-size: 18px;
+    //   line-height: 24px;
+    //   display: -webkit-box;
+    //   -webkit-line-clamp: 3;
+    //   -webkit-box-orient: vertical;
+    //   overflow: hidden;
+    //   font-weight: bold;
+    d    // }
 
-    ::v-deep .icon {
+    :deep(.icon) {
       vertical-align: middle;
     }
   }
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index 743ae6620..d6b75bfc1 100644
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -1,29 +1,40 @@
 <template>
-  <article class="box mb-5 mt-4">
-    <div class="identity-header" dir="auto">
-      <figure class="image is-24x24" v-if="participation.actor.avatar">
+  <article
+    class="bg-white dark:bg-mbz-purple dark:hover:bg-mbz-purple-400 mb-5 mt-4 pb-2 md:p-0 rounded-t-lg"
+  >
+    <div
+      class="bg-mbz-yellow-alt-100 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"
+      >
         <img
-          class="is-rounded"
+          class="rounded"
           :src="participation.actor.avatar.url"
           alt=""
           height="24"
           width="24"
         />
       </figure>
-      <b-icon v-else icon="account-circle" />
+      <AccountCircle class="ltr:pr-1 rtl:pl-1" v-else />
       {{ displayNameAndUsername(participation.actor) }}
     </div>
-    <div class="list-card">
-      <div class="content-and-actions">
-        <div class="event-preview mr-0 ml-0">
-          <div>
-            <div class="date-component">
+    <div class="list-card flex flex-col relative">
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-x-1.5 md:gap-y-3 gapt-x-3"
+      >
+        <div class="mr-0 ml-0">
+          <div class="h-36 relative w-full">
+            <div class="flex absolute bottom-2 left-2 z-10">
               <date-calendar-icon
-                :date="participation.event.beginsOn"
+                :date="participation.event.beginsOn.toString()"
                 :small="true"
               />
             </div>
             <router-link
+              class="h-full"
               :to="{
                 name: RouteName.EVENT,
                 params: { uuid: participation.event.uuid },
@@ -43,82 +54,77 @@
             </router-link>
           </div>
         </div>
-        <div class="list-card-content">
-          <div class="title-wrapper" dir="auto">
-            <b-tag
-              type="is-info"
+        <div class="list-card-content lg:col-span-4 flex-1 p-2">
+          <div class="flex items-center pt-2" dir="auto">
+            <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
-              type="is-danger"
+              {{ 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,
                 params: { uuid: participation.event.uuid },
               }"
             >
-              <h3 class="title" :lang="participation.event.language">
+              <h3
+                class="line-clamp-3 font-bold mx-auto my-0 text-lg text-violet-title dark:text-white"
+                :lang="participation.event.language"
+              >
                 {{ participation.event.title }}
               </h3>
             </router-link>
           </div>
           <inline-address
             v-if="participation.event.physicalAddress"
-            class="event-subtitle"
             :physical-address="participation.event.physicalAddress"
           />
           <div
-            class="event-subtitle"
+            class="flex gap-1"
             v-else-if="
               participation.event.options &&
               participation.event.options.isOnline
             "
           >
-            <b-icon icon="video" />
-            <span>{{ $t("Online") }}</span>
+            <Video />
+            <span>{{ t("Online") }}</span>
           </div>
-          <div class="event-subtitle event-organizer">
-            <figure
-              class="image is-24x24"
-              v-if="
-                organizer(participation.event) &&
-                organizer(participation.event).avatar
-              "
-            >
+          <div class="flex gap-1">
+            <figure class="" v-if="actorAvatarURL">
               <img
-                class="is-rounded"
-                :src="organizer(participation.event).avatar.url"
+                class="rounded"
+                :src="actorAvatarURL"
                 alt=""
+                width="24"
+                height="24"
               />
             </figure>
-            <b-icon v-else icon="account-circle" />
-            <span class="organizer-name">
+            <AccountCircle v-else />
+            <span>
               {{ organizerDisplayName(participation.event) }}
             </span>
           </div>
-          <div class="event-subtitle event-participants">
-            <b-icon
-              :class="{ 'has-text-danger': lastSeatsLeft }"
-              icon="account-group"
-            />
+          <div class="flex">
+            <AccountGroup :class="{ 'has-text-danger': lastSeatsLeft }" />
             <span
-              class="participant-stats"
+              class="flex items-center py-0 px-2"
               v-if="participation.role !== ParticipantRole.NOT_APPROVED"
             >
               <!-- Less than 10 seats left -->
               <span class="has-text-danger" v-if="lastSeatsLeft">
                 {{
-                  $t("{number} seats left", {
+                  t("{number} seats left", {
                     number: seatsLeft,
                   })
                 }}
@@ -129,34 +135,34 @@
                 "
               >
                 {{
-                  $tc(
+                  t(
                     "{available}/{capacity} available places",
-                    participation.event.options.maximumAttendeeCapacity -
-                      participation.event.participantStats.participant,
                     {
                       available:
                         participation.event.options.maximumAttendeeCapacity -
                         participation.event.participantStats.participant,
                       capacity:
                         participation.event.options.maximumAttendeeCapacity,
-                    }
+                    },
+                    participation.event.options.maximumAttendeeCapacity -
+                      participation.event.participantStats.participant
                   )
                 }}
               </span>
               <span v-else>
                 {{
-                  $tc(
+                  t(
                     "{count} participants",
-                    participation.event.participantStats.participant,
                     {
                       count: participation.event.participantStats.participant,
-                    }
+                    },
+                    participation.event.participantStats.participant
                   )
                 }}
               </span>
-              <b-button
+              <o-button
                 v-if="participation.event.participantStats.notApproved > 0"
-                type="is-text"
+                variant="text"
                 @click="
                   gotToWithCheck(participation, {
                     name: RouteName.PARTICIPATIONS,
@@ -166,32 +172,39 @@
                 "
               >
                 {{
-                  $tc(
+                  t(
                     "{count} requests waiting",
-                    participation.event.participantStats.notApproved,
                     {
                       count: participation.event.participantStats.notApproved,
-                    }
+                    },
+                    participation.event.participantStats.notApproved
                   )
                 }}
-              </b-button>
+              </o-button>
             </span>
           </div>
         </div>
-        <div class="actions">
-          <b-dropdown aria-role="list" position="is-bottom-left">
-            <b-button slot="trigger" role="button" icon-right="dots-horizontal">
-              {{ $t("Actions") }}
-            </b-button>
 
-            <b-dropdown-item
-              v-if="
-                ![
-                  ParticipantRole.PARTICIPANT,
-                  ParticipantRole.NOT_APPROVED,
-                ].includes(participation.role)
-              "
-              aria-role="listitem"
+        <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") }}
+            </o-button>
+          </template>
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
+            "
+          >
+            <div
+              class="flex gap-1"
               @click="
                 gotToWithCheck(participation, {
                   name: RouteName.EDIT_EVENT,
@@ -199,13 +212,17 @@
                 })
               "
             >
-              <b-icon icon="pencil" />
-              {{ $t("Edit") }}
-            </b-dropdown-item>
+              <Pencil />
+              {{ t("Edit") }}
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item
-              v-if="participation.role === ParticipantRole.CREATOR"
-              aria-role="listitem"
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="participation.role === ParticipantRole.CREATOR"
+          >
+            <div
+              class="flex gap-1"
               @click="
                 gotToWithCheck(participation, {
                   name: RouteName.DUPLICATE_EVENT,
@@ -213,32 +230,37 @@
                 })
               "
             >
-              <b-icon icon="content-duplicate" />
-              {{ $t("Duplicate") }}
-            </b-dropdown-item>
+              <ContentDuplicate />
+              {{ t("Duplicate") }}
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item
-              v-if="
-                ![
-                  ParticipantRole.PARTICIPANT,
-                  ParticipantRole.NOT_APPROVED,
-                ].includes(participation.role)
-              "
-              aria-role="listitem"
-              @click="openDeleteEventModalWrapper"
-            >
-              <b-icon icon="delete" />
-              {{ $t("Delete") }}
-            </b-dropdown-item>
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
+            "
+          >
+            <div @click="openDeleteEventModalWrapper" class="flex gap-1">
+              <Delete />
+              {{ t("Delete") }}
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item
-              v-if="
-                ![
-                  ParticipantRole.PARTICIPANT,
-                  ParticipantRole.NOT_APPROVED,
-                ].includes(participation.role)
-              "
-              aria-role="listitem"
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
+            "
+          >
+            <div
+              class="flex gap-1"
               @click="
                 gotToWithCheck(participation, {
                   name: RouteName.PARTICIPATIONS,
@@ -246,304 +268,359 @@
                 })
               "
             >
-              <b-icon icon="account-multiple-plus" />
-              {{ $t("Manage participations") }}
-            </b-dropdown-item>
+              <AccountMultiplePlus />
+              {{ t("Manage participations") }}
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item aria-role="listitem" has-link>
-              <router-link
-                :to="{
-                  name: RouteName.EVENT,
-                  params: { uuid: participation.event.uuid },
-                }"
-              >
-                <b-icon icon="view-compact" />
-                {{ $t("View event page") }}
-              </router-link>
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
+          <o-dropdown-item aria-role="listitem">
+            <router-link
+              class="flex gap-1"
+              :to="{
+                name: RouteName.EVENT,
+                params: { uuid: participation.event.uuid },
+              }"
+            >
+              <ViewCompact />
+              {{ t("View event page") }}
+            </router-link>
+          </o-dropdown-item>
+        </o-dropdown>
       </div>
     </div>
   </article>
 </template>
 
-<script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
+<script lang="ts" setup>
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { mixins } from "vue-class-component";
-import { RawLocation, Route } from "vue-router";
-import { EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
-import { IParticipant } from "../../types/participant.model";
+import { EventStatus, ParticipantRole } from "@/types/enums";
+import { IParticipant } from "@/types/participant.model";
 import {
+  IEvent,
   IEventCardOptions,
-  organizer,
+  organizerAvatarUrl,
   organizerDisplayName,
-} from "../../types/event.model";
-import { displayNameAndUsername, IActor, IPerson } from "../../types/actor";
-import ActorMixin from "../../mixins/actor";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import EventMixin from "../../mixins/event";
-import RouteName from "../../router/name";
-import { changeIdentity } from "../../utils/auth";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
+} from "@/types/event.model";
+import { displayNameAndUsername, IPerson } from "@/types/actor";
+import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import RouteName from "@/router/name";
+import { changeIdentity } from "@/utils/identity";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
-import { PropType } from "vue";
+import { RouteLocationRaw, useRouter } from "vue-router";
+import Pencil from "vue-material-design-icons/Pencil.vue";
+import ContentDuplicate from "vue-material-design-icons/ContentDuplicate.vue";
+import Delete from "vue-material-design-icons/Delete.vue";
+import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.vue";
+import ViewCompact from "vue-material-design-icons/ViewCompact.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
+import Video from "vue-material-design-icons/Video.vue";
+import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { computed, inject } from "vue";
+import { useQuery } from "@vue/apollo-composable";
+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/TagElement.vue";
 
-const defaultOptions: IEventCardOptions = {
-  hideDate: true,
-  loggedPerson: false,
-  hideDetails: false,
-  organizerActor: null,
-  memberofGroup: false,
+const props = defineProps<{
+  participation: IParticipant;
+  options?: IEventCardOptions;
+}>();
+
+const emit = defineEmits(["eventDeleted"]);
+
+const { result: currentActorResult } = useQuery(CURRENT_ACTOR_CLIENT);
+const currentActor = computed(() => currentActorResult.value?.currentActor);
+const { t } = useI18n({ useScope: "global" });
+
+const dialog = inject<Dialog>("dialog");
+
+const openDeleteEventModal = (
+  event: IEvent,
+  callback: (anEvent: IEvent) => any
+): void => {
+  function escapeRegExp(string: string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+  }
+  const participantsLength = event.participantStats.participant;
+  const prefix = participantsLength
+    ? t(
+        "There are {participants} participants.",
+        {
+          participants: participantsLength,
+        },
+        participantsLength
+      )
+    : "";
+
+  dialog?.prompt({
+    variant: "danger",
+    title: t("Delete event"),
+    message: `${prefix}
+      ${t(
+        "Are you sure you want to delete this event? This action cannot be reverted."
+      )}
+      <br><br>
+      ${t('To confirm, type your event title "{eventTitle}"', {
+        eventTitle: event.title,
+      })}`,
+    confirmText: t("Delete {eventTitle}", {
+      eventTitle: event.title,
+    }),
+    inputAttrs: {
+      placeholder: event.title,
+      pattern: escapeRegExp(event.title),
+    },
+    onConfirm: () => callback(event),
+  });
 };
 
-@Component({
-  components: {
-    DateCalendarIcon,
-    PopoverActorCard,
-    LazyImageWrapper,
-    InlineAddress,
-  },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-})
-export default class EventParticipationCard extends mixins(
-  ActorMixin,
-  EventMixin
-) {
+const { oruga } = useProgrammatic();
+const snackbar = inject<Snackbar>("snackbar");
+
+const {
+  mutate: deleteEvent,
+  onDone: onDeleteEventDone,
+  onError: onDeleteEventError,
+} = useDeleteEvent();
+
+onDeleteEventDone(() => {
   /**
-   * The participation associated
+   * When the event corresponding has been deleted (by the organizer).
+   * A notification is already triggered.
+   *
+   * @type {string}
    */
-  @Prop({ required: true, type: Object as PropType<IParticipant> })
-  participation!: IParticipant;
+  emit("eventDeleted", props.participation.event.id);
 
-  /**
-   * Options are merged with default options
-   */
-  @Prop({ required: false, default: () => defaultOptions })
-  options!: IEventCardOptions;
+  oruga.notification.open({
+    message: t("Event {eventTitle} deleted", {
+      eventTitle: props.participation.event.title,
+    }),
+    variant: "success",
+    position: "bottom-right",
+    duration: 5000,
+  });
+});
 
-  currentActor!: IPerson;
+onDeleteEventError((error) => {
+  snackbar?.open({
+    message: error.message,
+    variant: "danger",
+    position: "bottom",
+  });
 
-  ParticipantRole = ParticipantRole;
+  console.error(error);
+});
 
-  EventVisibility = EventVisibility;
+/**
+ * Delete the event
+ */
+const openDeleteEventModalWrapper = () => {
+  openDeleteEventModal(props.participation.event, (event: IEvent) =>
+    deleteEvent({ eventId: event.id ?? "" })
+  );
+};
 
-  displayNameAndUsername = displayNameAndUsername;
+const router = useRouter();
 
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
-  RouteName = RouteName;
-
-  EventStatus = EventStatus;
-
-  get mergedOptions(): IEventCardOptions {
-    return { ...defaultOptions, ...this.options };
+const gotToWithCheck = async (
+  participation: IParticipant,
+  route: RouteLocationRaw
+): Promise<any> => {
+  if (
+    participation.actor.id !== currentActor.value.id &&
+    participation.event.organizerActor
+  ) {
+    const organizerActor = participation.event.organizerActor as IPerson;
+    await changeIdentity(organizerActor);
+    oruga.notification.open({
+      message: t(
+        "Current identity has been changed to {identityName} in order to manage this event.",
+        {
+          identityName: organizerActor.preferredUsername,
+        }
+      ),
+      variant: "info",
+      position: "bottom-right",
+      duration: 5000,
+    });
   }
+  return router.push(route);
+};
 
-  /**
-   * Delete the event
-   */
-  async openDeleteEventModalWrapper(): Promise<void> {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    await this.openDeleteEventModal(this.participation.event);
-  }
+// const organizerActor = computed<IActor | undefined>(() => {
+//   if (
+//     props.participation.event.attributedTo &&
+//     props.participation.event.attributedTo.id
+//   ) {
+//     return props.participation.event.attributedTo;
+//   }
+//   return props.participation.event.organizerActor;
+// });
 
-  async gotToWithCheck(
-    participation: IParticipant,
-    route: RawLocation
-  ): Promise<Route> {
-    if (
-      participation.actor.id !== this.currentActor.id &&
-      participation.event.organizerActor
-    ) {
-      const organizerActor = participation.event.organizerActor as IPerson;
-      await changeIdentity(this.$apollo.provider.defaultClient, organizerActor);
-      this.$buefy.notification.open({
-        message: this.$t(
-          "Current identity has been changed to {identityName} in order to manage this event.",
-          {
-            identityName: organizerActor.preferredUsername,
-          }
-        ) as string,
-        type: "is-info",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-    }
-    return this.$router.push(route);
+const seatsLeft = computed<number | null>(() => {
+  if (props.participation.event.options.maximumAttendeeCapacity > 0) {
+    return (
+      props.participation.event.options.maximumAttendeeCapacity -
+      props.participation.event.participantStats.participant
+    );
   }
+  return null;
+});
 
-  get organizerActor(): IActor | undefined {
-    if (
-      this.participation.event.attributedTo &&
-      this.participation.event.attributedTo.id
-    ) {
-      return this.participation.event.attributedTo;
-    }
-    return this.participation.event.organizerActor;
+const lastSeatsLeft = computed<boolean>(() => {
+  if (seatsLeft.value) {
+    return seatsLeft.value < 10;
   }
+  return false;
+});
 
-  get seatsLeft(): number | null {
-    if (this.participation.event.options.maximumAttendeeCapacity > 0) {
-      return (
-        this.participation.event.options.maximumAttendeeCapacity -
-        this.participation.event.participantStats.participant
-      );
-    }
-    return null;
-  }
+const actorAvatarURL = computed<string | null>(() =>
+  organizerAvatarUrl(props.participation.event)
+);
 
-  get lastSeatsLeft(): boolean {
-    if (this.seatsLeft) {
-      return this.seatsLeft < 10;
-    }
-    return false;
-  }
-}
+// export default class EventParticipationCard extends mixins(
+//   ActorMixin,
+//   EventMixin
+// ) {
+
+// }
 </script>
 
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-@import "~bulma/sass/utilities/mixins.sass";
+// @import "node_modules/bulma/sass/utilities/mixins.sass";
 
 article.box {
-  div.tag-container {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    @include margin-left(-5px);
-    z-index: 10;
-    max-width: 40%;
+  // div.tag-container {
+  //   position: absolute;
+  //   top: 10px;
+  //   right: 0;
+  //   @include margin-left(-5px);
+  //   z-index: 10;
+  //   max-width: 40%;
 
-    span.tag {
-      margin: 5px auto;
-      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-      /*word-break: break-all;*/
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: block;
-      /*text-align: right;*/
-      font-size: 1em;
-      /*padding: 0 1px;*/
-      line-height: 1.75em;
-    }
-  }
+  //   span.tag {
+  //     margin: 5px auto;
+  //     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
+  //     /*word-break: break-all;*/
+  //     text-overflow: ellipsis;
+  //     overflow: hidden;
+  //     display: block;
+  //     /*text-align: right;*/
+  //     font-size: 1em;
+  //     /*padding: 0 1px;*/
+  //     line-height: 1.75em;
+  //   }
+  // }
 
   .list-card {
-    display: flex;
-    padding: 0 6px 0 0;
-    position: relative;
-    flex-direction: column;
+    // display: flex;
+    // padding: 0 6px 0 0;
+    // position: relative;
+    // flex-direction: column;
 
     .content-and-actions {
-      display: grid;
-      grid-gap: 5px 10px;
+      // display: grid;
+      // grid-gap: 5px 10px;
       grid-template-areas: "preview" "body" "actions";
 
-      @include tablet {
-        grid-template-columns: 1fr 3fr;
-        grid-template-areas: "preview body" "actions actions";
-      }
+      // @include tablet {
+      //   grid-template-columns: 1fr 3fr;
+      //   grid-template-areas: "preview body" "actions actions";
+      // }
 
-      @include desktop {
-        grid-template-columns: 1fr 3fr 1fr;
-        grid-template-areas: "preview body actions";
-      }
+      // @include desktop {
+      //   grid-template-columns: 1fr 3fr 1fr;
+      //   grid-template-areas: "preview body actions";
+      // }
 
       .event-preview {
         grid-area: preview;
 
         & > div {
           height: 128px;
-          width: 100%;
-          position: relative;
+          // width: 100%;
+          // position: relative;
 
-          div.date-component {
-            display: flex;
-            position: absolute;
-            bottom: 5px;
-            left: 5px;
-            z-index: 1;
-          }
+          // div.date-component {
+          //   display: flex;
+          //   position: absolute;
+          //   bottom: 5px;
+          //   left: 5px;
+          //   z-index: 1;
+          // }
 
-          img {
-            width: 100%;
-            object-position: center;
-            object-fit: cover;
-            height: 100%;
-          }
+          // img {
+          //   width: 100%;
+          //   object-position: center;
+          //   object-fit: cover;
+          //   height: 100%;
+          // }
         }
       }
 
       .actions {
-        padding: 7px;
-        cursor: pointer;
-        align-self: center;
-        justify-self: center;
+        //   padding: 7px;
+        //   cursor: pointer;
+        //   align-self: center;
+        //   justify-self: center;
         grid-area: actions;
       }
 
       div.list-card-content {
-        flex: 1;
-        padding: 5px;
+        // flex: 1;
+        // padding: 5px;
         grid-area: body;
 
-        .participant-stats {
-          display: flex;
-          align-items: center;
-          padding: 0 5px;
-        }
+        // .participant-stats {
+        //   display: flex;
+        //   align-items: center;
+        //   padding: 0 5px;
+        // }
 
-        div.title-wrapper {
-          display: flex;
-          align-items: center;
-          padding-top: 5px;
+        // div.title-wrapper {
+        //   display: flex;
+        //   align-items: center;
+        //   padding-top: 5px;
 
-          a {
-            text-decoration: none;
-            padding-bottom: 5px;
-          }
+        //   a {
+        //     text-decoration: none;
+        //     padding-bottom: 5px;
+        //   }
 
-          .title {
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            font-size: 18px;
-            line-height: 24px;
-            margin: auto 0;
-            font-weight: bold;
-            color: $title-color;
-          }
-        }
+        //   .title {
+        //     display: -webkit-box;
+        //     -webkit-line-clamp: 3;
+        //     -webkit-box-orient: vertical;
+        //     overflow: hidden;
+        //     font-size: 18px;
+        //     line-height: 24px;
+        //     margin: auto 0;
+        //     font-weight: bold;
+        //   }
+        // }
       }
     }
   }
 
-  .identity-header {
-    background: $yellow-2;
-    display: flex;
-    padding: 5px;
+  // .identity-header {
+  //   display: flex;
+  //   padding: 5px;
 
-    figure,
-    span.icon {
-      @include padding-right(3px);
-    }
-  }
+  //   figure,
+  //   span.icon {
+  //     @include padding-right(3px);
+  //   }
+  // }
 
-  & > .columns {
-    padding: 1.25rem;
-  }
-  padding: 0;
+  // & > .columns {
+  //   padding: 1.25rem;
+  // }
+  // padding: 0;
 }
 </style>
diff --git a/js/src/components/Event/FullAddressAutoComplete.vue b/js/src/components/Event/FullAddressAutoComplete.vue
index e42fe2d30..640e3ce64 100644
--- a/js/src/components/Event/FullAddressAutoComplete.vue
+++ b/js/src/components/Event/FullAddressAutoComplete.vue
@@ -1,56 +1,62 @@
 <template>
-  <div class="address-autocomplete columns is-desktop">
-    <div class="column">
-      <b-field
+  <div class="address-autocomplete">
+    <div class="">
+      <o-field
         :label-for="id"
         expanded
         :message="fieldErrors"
-        :type="{ 'is-danger': fieldErrors.length }"
+        :type="{ 'is-danger': fieldErrors }"
+        class="!-mt-2"
+        :labelClass="labelClass"
       >
-        <template slot="label">
+        <template #label>
           {{ actualLabel }}
-          <span
-            class="is-size-6 has-text-weight-normal"
-            v-if="gettingLocation"
-            >{{ $t("Getting location") }}</span
-          >
+          <span v-if="gettingLocation">{{ t("Getting location") }}</span>
         </template>
-        <p class="control" v-if="canShowLocateMeButton && !gettingLocation">
-          <b-button
+        <p class="control" v-if="canShowLocateMeButton">
+          <o-loading
+            :full-page="false"
+            v-model:active="gettingLocation"
+            :can-cancel="false"
+            :container="mapMarker?.$el"
+          />
+          <o-button
+            ref="mapMarker"
             icon-right="map-marker"
             @click="locateMe"
-            :title="$t('Use my location')"
+            :title="t('Use my location')"
           />
         </p>
-        <b-autocomplete
+        <o-autocomplete
           :data="addressData"
           v-model="queryText"
-          :placeholder="$t('e.g. 10 Rue Jangot')"
-          field="fullName"
+          :placeholder="placeholderWithDefault"
+          :customFormatter="(elem: IAddress) => addressFullName(elem)"
           :loading="isFetching"
-          @typing="fetchAsyncData"
+          :debounceTyping="debounceDelay"
+          @typing="asyncData"
           :icon="canShowLocateMeButton ? null : 'map-marker'"
           expanded
           @select="updateSelected"
-          v-bind="$attrs"
           :id="id"
           :disabled="disabled"
           dir="auto"
+          class="!mt-0"
         >
           <template #default="{ option }">
-            <b-icon :icon="option.poiInfos.poiIcon.icon" />
+            <o-icon :icon="option.poiInfos.poiIcon.icon" />
             <b>{{ option.poiInfos.name }}</b
             ><br />
             <small>{{ option.poiInfos.alternativeName }}</small>
           </template>
           <template #empty>
-            <span v-if="isFetching">{{ $t("Searching…") }}</span>
-            <div v-else-if="queryText.length >= 3" class="is-enabled">
+            <span v-if="isFetching">{{ t("Searching…") }}</span>
+            <div v-else-if="queryText.length >= 3" class="enabled">
               <span>{{
-                $t('No results for "{queryText}"', { queryText })
+                t('No results for "{queryText}"', { queryText })
               }}</span>
               <span>{{
-                $t(
+                t(
                   "You can try another search term or drag and drop the marker on the map",
                   {
                     queryText,
@@ -58,24 +64,24 @@
                 )
               }}</span>
               <!--                        <p class="control" @click="openNewAddressModal">-->
-              <!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
+              <!--                            <button type="button" class="button is-primary">{{ t('Add') }}</button>-->
               <!--                        </p>-->
             </div>
           </template>
-        </b-autocomplete>
-        <b-button
+        </o-autocomplete>
+        <o-button
           :disabled="!queryText"
           @click="resetAddress"
           class="reset-area"
           icon-left="close"
-          :title="$t('Clear address field')"
+          :title="t('Clear address field')"
         />
-      </b-field>
+      </o-field>
       <div
-        class="card"
-        v-if="!hideSelected && (selected.originId || selected.url)"
+        class="mt-2 p-2 rounded-lg shadow-md dark:bg-violet-3"
+        v-if="!hideSelected && (selected?.originId || selected?.url)"
       >
-        <div class="card-content">
+        <div class="">
           <address-info
             :address="selected"
             :show-icon="true"
@@ -86,7 +92,7 @@
       </div>
     </div>
     <div
-      class="map column"
+      class="map"
       v-if="!hideMap && selected && selected.geom && selected.poiInfos"
     >
       <map-leaflet
@@ -102,85 +108,253 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Watch, Mixins } from "vue-property-decorator";
+<script lang="ts" setup>
 import { LatLng } from "leaflet";
-import { Address, IAddress } from "../../types/address.model";
-import AddressAutoCompleteMixin from "../../mixins/AddressAutoCompleteMixin";
+import { Address, IAddress, addressFullName } from "../../types/address.model";
 import AddressInfo from "../../components/Address/AddressInfo.vue";
+import { computed, ref, watch, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
+import { useGeocodingAutocomplete } from "@/composition/apollo/config";
+import { ADDRESS } from "@/graphql/address";
+import { useReverseGeocode } from "@/composition/apollo/address";
+import { useLazyQuery } from "@vue/apollo-composable";
+const MapLeaflet = defineAsyncComponent(
+  () => import("@/components/LeafletMap.vue")
+);
 
-@Component({
-  inheritAttrs: false,
-  components: {
-    AddressInfo,
+const props = withDefaults(
+  defineProps<{
+    modelValue: IAddress | null;
+    defaultText?: string | null;
+    label?: string;
+    labelClass?: string;
+    userTimezone?: string;
+    disabled?: boolean;
+    hideMap?: boolean;
+    hideSelected?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    labelClass: "",
+    defaultText: "",
+    disabled: false,
+    hideMap: false,
+    hideSelected: false,
+  }
+);
+
+// const addressModalActive = ref(false);
+
+const componentId = 0;
+
+const emit = defineEmits(["update:modelValue"]);
+
+const gettingLocationError = ref<string | null>(null);
+const gettingLocation = ref(false);
+const mapDefaultZoom = ref(15);
+
+const addressData = ref<IAddress[]>([]);
+
+const selected = ref<IAddress | null>(null);
+
+const isFetching = ref(false);
+
+const mapMarker = ref();
+
+const placeholderWithDefault = computed(
+  () => props.placeholder ?? t("e.g. 10 Rue Jangot")
+);
+
+// created(): void {
+//   componentId += 1;
+// }
+
+const id = computed((): string => {
+  return `full-address-autocomplete-${componentId}`;
+});
+
+const modelValue = computed(() => props.modelValue);
+
+watch(modelValue, () => {
+  if (!modelValue.value) return;
+  selected.value = modelValue.value;
+});
+
+const updateSelected = (option: IAddress): void => {
+  if (option == null) return;
+  selected.value = option;
+  emit("update:modelValue", selected.value);
+};
+
+// const resetPopup = (): void => {
+//   selected.value = new Address();
+// };
+
+// const openNewAddressModal = (): void => {
+//   resetPopup();
+//   addressModalActive.value = true;
+// };
+
+const checkCurrentPosition = (e: LatLng): boolean => {
+  if (!selected.value?.geom) return false;
+  const lat = parseFloat(selected.value?.geom.split(";")[1]);
+  const lon = parseFloat(selected.value?.geom.split(";")[0]);
+
+  return e.lat === lat && e.lng === lon;
+};
+
+const { t, locale } = useI18n({ useScope: "global" });
+
+const actualLabel = computed((): string => {
+  return props.label ?? t("Find an address");
+});
+
+// eslint-disable-next-line class-methods-use-this
+const canShowLocateMeButton = computed((): boolean => {
+  return window.isSecureContext;
+});
+
+const { geocodingAutocomplete } = useGeocodingAutocomplete();
+
+const debounceDelay = computed(() =>
+  geocodingAutocomplete.value === true ? 200 : 2000
+);
+
+const { onResult: onAddressSearchResult, load: searchAddress } = useLazyQuery<{
+  searchAddress: IAddress[];
+}>(ADDRESS);
+
+onAddressSearchResult((result) => {
+  if (result.loading) return;
+  const { data } = result;
+  addressData.value = data.searchAddress.map(
+    (address: IAddress) => new Address(address)
+  );
+  isFetching.value = false;
+});
+
+const asyncData = async (query: string): Promise<void> => {
+  if (!query.length) {
+    addressData.value = [];
+    selected.value = new Address();
+    return;
+  }
+
+  if (query.length < 3) {
+    addressData.value = [];
+    return;
+  }
+
+  isFetching.value = true;
+
+  searchAddress(undefined, {
+    query,
+    locale: locale.value,
+  });
+};
+
+const queryText = computed({
+  get() {
+    return (
+      (selected.value ? addressFullName(selected.value) : props.defaultText) ??
+      ""
+    );
   },
-})
-export default class FullAddressAutoComplete extends Mixins(
-  AddressAutoCompleteMixin
-) {
-  @Prop({ required: false, default: "" }) label!: string;
-  @Prop({ required: false }) userTimezone!: string;
-  @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
-  @Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
-  @Prop({ required: false, default: false, type: Boolean })
-  hideSelected!: boolean;
+  set(text) {
+    if (text === "" && selected.value?.id) {
+      console.debug("doing reset");
+      resetAddress();
+    }
+  },
+});
 
-  addressModalActive = false;
+const resetAddress = (): void => {
+  emit("update:modelValue", null);
+  selected.value = new Address();
+};
 
-  private static componentId = 0;
-
-  created(): void {
-    FullAddressAutoComplete.componentId += 1;
+const locateMe = async (): Promise<void> => {
+  gettingLocation.value = true;
+  gettingLocationError.value = null;
+  try {
+    const location = await getLocation();
+    mapDefaultZoom.value = 12;
+    reverseGeoCode(
+      new LatLng(location.coords.latitude, location.coords.longitude),
+      12
+    );
+  } catch (e: any) {
+    gettingLocationError.value = e.message;
   }
+  gettingLocation.value = false;
+};
 
-  get id(): string {
-    return `full-address-autocomplete-${FullAddressAutoComplete.componentId}`;
+const { onResult: onReverseGeocodeResult, load: loadReverseGeocode } =
+  useReverseGeocode();
+
+onReverseGeocodeResult((result) => {
+  if (result.loading !== false) return;
+  const { data } = result;
+  addressData.value = data.reverseGeocode.map(
+    (elem: IAddress) => new Address(elem)
+  );
+
+  if (addressData.value.length > 0) {
+    const defaultAddress = new Address(addressData.value[0]);
+    selected.value = defaultAddress;
+    emit("update:modelValue", selected.value);
   }
+});
 
-  @Watch("value")
-  updateEditing(): void {
-    if (!(this.value && this.value.id)) return;
-    this.selected = this.value;
-  }
+const reverseGeoCode = (e: LatLng, zoom: number) => {
+  // If the position has been updated through autocomplete selection, no need to geocode it!
+  if (checkCurrentPosition(e)) return;
 
-  updateSelected(option: IAddress): void {
-    if (option == null) return;
-    this.selected = option;
-    this.$emit("input", this.selected);
-  }
+  loadReverseGeocode(undefined, {
+    latitude: e.lat,
+    longitude: e.lng,
+    zoom,
+    locale: locale.value as string,
+  });
+};
 
-  resetPopup(): void {
-    this.selected = new Address();
-  }
+// eslint-disable-next-line no-undef
+const getLocation = async (): Promise<GeolocationPosition> => {
+  let errorMessage = t("Failed to get location.");
+  return new Promise((resolve, reject) => {
+    if (!("geolocation" in navigator)) {
+      reject(new Error(errorMessage as string));
+    }
 
-  openNewAddressModal(): void {
-    this.resetPopup();
-    this.addressModalActive = true;
-  }
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        resolve(pos);
+      },
+      (err) => {
+        switch (err.code) {
+          case GeolocationPositionError.PERMISSION_DENIED:
+            errorMessage = t("The geolocation prompt was denied.");
+            break;
+          case GeolocationPositionError.POSITION_UNAVAILABLE:
+            errorMessage = t("Your position was not available.");
+            break;
+          case GeolocationPositionError.TIMEOUT:
+            errorMessage = t("Geolocation was not determined in time.");
+            break;
+          default:
+            errorMessage = err.message;
+        }
+        reject(new Error(errorMessage as string));
+      }
+    );
+  });
+};
 
-  checkCurrentPosition(e: LatLng): boolean {
-    if (!this.selected || !this.selected.geom) return false;
-    const lat = parseFloat(this.selected.geom.split(";")[1]);
-    const lon = parseFloat(this.selected.geom.split(";")[0]);
-
-    return e.lat === lat && e.lng === lon;
-  }
-
-  get actualLabel(): string {
-    return this.label || (this.$t("Find an address") as string);
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  get canShowLocateMeButton(): boolean {
-    return window.isSecureContext;
-  }
-}
+const fieldErrors = computed(() => {
+  return gettingLocationError.value;
+});
 </script>
 <style lang="scss">
-.address-autocomplete {
-  margin-bottom: 0.75rem;
-}
-
 .autocomplete {
   .dropdown-menu {
     z-index: 2000;
diff --git a/js/src/components/Event/GroupedMultiEventMinimalistCard.vue b/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
index 705209f95..01a90c6d2 100644
--- a/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
+++ b/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="events-wrapper">
-    <div class="month-group" v-for="key of keys" :key="key">
-      <h2 class="is-size-5 month-name">
+    <div class="flex flex-col gap-4" v-for="key of keys" :key="key">
+      <h2 class="month-name">
         {{ monthName(groupEvents(key)[0]) }}
       </h2>
       <event-minimalist-card
-        class="py-4"
         v-for="event in groupEvents(key)"
         :key="event.id"
         :event="event"
@@ -14,51 +13,46 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 import EventMinimalistCard from "./EventMinimalistCard.vue";
 
-@Component({
-  components: {
-    EventMinimalistCard,
-  },
-})
-export default class GroupedMultiEventMinimalistCard extends Vue {
-  @Prop({ type: Array as PropType<IEvent[]>, required: true })
-  events!: IEvent[];
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
+const props = withDefaults(
+  defineProps<{
+    events: IEvent[];
+    isCurrentActorMember?: boolean;
+  }>(),
+  { isCurrentActorMember: false }
+);
 
-  get monthlyGroupedEvents(): Map<string, IEvent[]> {
-    return this.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
-      const beginsOn = new Date(event.beginsOn);
-      const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
-      const monthEvents = acc.get(month) || [];
-      acc.set(month, [...monthEvents, event]);
-      return acc;
-    }, new Map());
-  }
-
-  get keys(): string[] {
-    return Array.from(this.monthlyGroupedEvents.keys()).sort((a, b) =>
-      b.localeCompare(a)
-    );
-  }
-
-  groupEvents(key: string): IEvent[] {
-    return this.monthlyGroupedEvents.get(key) || [];
-  }
-
-  monthName(event: IEvent): string {
+const monthlyGroupedEvents = computed((): Map<string, IEvent[]> => {
+  return props.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
     const beginsOn = new Date(event.beginsOn);
-    return new Intl.DateTimeFormat(undefined, {
-      month: "long",
-      year: "numeric",
-    }).format(beginsOn);
-  }
-}
+    const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
+    const monthEvents = acc.get(month) || [];
+    acc.set(month, [...monthEvents, event]);
+    return acc;
+  }, new Map());
+});
+
+const keys = computed((): string[] => {
+  return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) =>
+    b.localeCompare(a)
+  );
+});
+
+const groupEvents = (key: string): IEvent[] => {
+  return monthlyGroupedEvents.value.get(key) || [];
+};
+
+const monthName = (event: IEvent): string => {
+  const beginsOn = new Date(event.beginsOn);
+  return new Intl.DateTimeFormat(undefined, {
+    month: "long",
+    year: "numeric",
+  }).format(beginsOn);
+};
 </script>
 <style lang="scss" scoped>
 .events-wrapper {
@@ -75,7 +69,6 @@ export default class GroupedMultiEventMinimalistCard extends Vue {
     font-size: 1.3rem;
 
     &::after {
-      background: $orange-3;
       position: absolute;
       left: 0;
       right: 0;
diff --git a/js/src/components/Event/Integrations/Etherpad.vue b/js/src/components/Event/Integrations/EtherpadIntegration.vue
similarity index 65%
rename from js/src/components/Event/Integrations/Etherpad.vue
rename to js/src/components/Event/Integrations/EtherpadIntegration.vue
index afba2f326..c938d3b97 100644
--- a/js/src/components/Event/Integrations/Etherpad.vue
+++ b/js/src/components/Event/Integrations/EtherpadIntegration.vue
@@ -9,16 +9,10 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 
-@Component
-export default class EtherpadIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
-}
+defineProps<{ metadata: IEventMetadataDescription }>();
 </script>
 <style lang="scss" scoped>
 .etherpad {
diff --git a/js/src/components/Event/Integrations/JitsiMeet.vue b/js/src/components/Event/Integrations/JitsiMeetIntegration.vue
similarity index 67%
rename from js/src/components/Event/Integrations/JitsiMeet.vue
rename to js/src/components/Event/Integrations/JitsiMeetIntegration.vue
index 2bee04aab..c93fd1e63 100644
--- a/js/src/components/Event/Integrations/JitsiMeet.vue
+++ b/js/src/components/Event/Integrations/JitsiMeetIntegration.vue
@@ -9,16 +9,9 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class JitsiMeetIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
-}
+defineProps<{ metadata: IEventMetadataDescription }>();
 </script>
 <style lang="scss" scoped>
 .jitsi-meet {
diff --git a/js/src/components/Event/Integrations/PeerTube.vue b/js/src/components/Event/Integrations/PeerTubeIntegration.vue
similarity index 52%
rename from js/src/components/Event/Integrations/PeerTube.vue
rename to js/src/components/Event/Integrations/PeerTubeIntegration.vue
index db4ccaed2..b530ee3eb 100644
--- a/js/src/components/Event/Integrations/PeerTube.vue
+++ b/js/src/components/Event/Integrations/PeerTubeIntegration.vue
@@ -12,30 +12,21 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 
-@Component
-export default class PeerTubeIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
+const props = defineProps<{ metadata: IEventMetadataDescription }>();
 
-  get videoDetails(): { host: string; uuid: string } | null {
-    if (this.metadata.pattern) {
-      const matches = this.metadata.pattern.exec(this.metadata.value);
-      if (matches && matches[1] && matches[2]) {
-        return { host: matches[1], uuid: matches[2] };
-      }
+const videoDetails = computed((): { host: string; uuid: string } | null => {
+  if (props.metadata.pattern) {
+    const matches = props.metadata.pattern.exec(props.metadata.value);
+    if (matches && matches[1] && matches[2]) {
+      return { host: matches[1], uuid: matches[2] };
     }
-    return null;
   }
-
-  get origin(): string {
-    return window.location.hostname;
-  }
-}
+  return null;
+});
 </script>
 <style lang="scss" scoped>
 .peertube {
diff --git a/js/src/components/Event/Integrations/Twitch.vue b/js/src/components/Event/Integrations/TwitchIntegration.vue
similarity index 54%
rename from js/src/components/Event/Integrations/Twitch.vue
rename to js/src/components/Event/Integrations/TwitchIntegration.vue
index a89f740c4..08d083b41 100644
--- a/js/src/components/Event/Integrations/Twitch.vue
+++ b/js/src/components/Event/Integrations/TwitchIntegration.vue
@@ -13,30 +13,25 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 
-@Component
-export default class TwitchIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
+const props = defineProps<{ metadata: IEventMetadataDescription }>();
 
-  get channelName(): string | null {
-    if (this.metadata.pattern) {
-      const matches = this.metadata.pattern.exec(this.metadata.value);
-      if (matches && matches[1]) {
-        return matches[1];
-      }
+const channelName = computed((): string | null => {
+  if (props.metadata.pattern) {
+    const matches = props.metadata.pattern.exec(props.metadata.value);
+    if (matches && matches[1]) {
+      return matches[1];
     }
-    return null;
   }
+  return null;
+});
 
-  get origin(): string {
-    return window.location.hostname;
-  }
-}
+const origin = computed((): string => {
+  return window.location.hostname;
+});
 </script>
 <style lang="scss" scoped>
 .twitch {
diff --git a/js/src/components/Event/Integrations/YouTube.vue b/js/src/components/Event/Integrations/YouTubeIntegration.vue
similarity index 56%
rename from js/src/components/Event/Integrations/YouTube.vue
rename to js/src/components/Event/Integrations/YouTubeIntegration.vue
index 2dc188691..26946813d 100644
--- a/js/src/components/Event/Integrations/YouTube.vue
+++ b/js/src/components/Event/Integrations/YouTubeIntegration.vue
@@ -13,30 +13,21 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 
-@Component
-export default class YouTubeIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
+const props = defineProps<{ metadata: IEventMetadataDescription }>();
 
-  get videoID(): string | null {
-    if (this.metadata.pattern) {
-      const matches = this.metadata.pattern.exec(this.metadata.value);
-      if (matches && matches[1]) {
-        return matches[1];
-      }
+const videoID = computed((): string | null => {
+  if (props.metadata.pattern) {
+    const matches = props.metadata.pattern.exec(props.metadata.value);
+    if (matches && matches[1]) {
+      return matches[1];
     }
-    return null;
   }
-
-  get origin(): string {
-    return window.location.hostname;
-  }
-}
+  return null;
+});
 </script>
 <style lang="scss" scoped>
 .youtube {
diff --git a/js/src/components/Event/MultiCard.vue b/js/src/components/Event/MultiCard.vue
index 5a9c75e8c..b707af07d 100644
--- a/js/src/components/Event/MultiCard.vue
+++ b/js/src/components/Event/MultiCard.vue
@@ -1,39 +1,21 @@
 <template>
-  <div class="multi-card-event">
+  <div
+    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="event-card"
+      class="flex flex-col h-full"
       v-for="event in events"
       :event="event"
       :key="event.uuid"
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+
 import EventCard from "./EventCard.vue";
-@Component({
-  components: {
-    EventCard,
-  },
-})
-export default class MultiCard extends Vue {
-  @Prop({ type: Array as PropType<IEvent[]>, required: true })
-  events!: IEvent[];
-}
+
+defineProps<{
+  events: IEvent[];
+}>();
 </script>
-<style lang="scss" scoped>
-.multi-card-event {
-  display: grid;
-  grid-auto-rows: 1fr;
-  grid-column-gap: 20px;
-  grid-row-gap: 30px;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  .event-card {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/js/src/components/Event/MultiEventMinimalistCard.vue b/js/src/components/Event/MultiEventMinimalistCard.vue
index ea99e4917..8fc73dda6 100644
--- a/js/src/components/Event/MultiEventMinimalistCard.vue
+++ b/js/src/components/Event/MultiEventMinimalistCard.vue
@@ -9,25 +9,21 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import EventMinimalistCard from "./EventMinimalistCard.vue";
 
-@Component({
-  components: {
-    EventMinimalistCard,
-  },
-})
-export default class MultiEventMinimalistCard extends Vue {
-  @Prop({ type: Array as PropType<IEvent[]>, required: true })
-  events!: IEvent[];
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
-  @Prop({ required: false, type: Boolean, default: false })
-  showOrganizer!: boolean;
-}
+withDefaults(
+  defineProps<{
+    events: IEvent[];
+    isCurrentActorMember?: boolean;
+    showOrganizer?: boolean;
+  }>(),
+  {
+    isCurrentActorMember: false,
+    showOrganizer: false,
+  }
+);
 </script>
 <style lang="scss" scoped>
 .events-wrapper {
diff --git a/js/src/components/Event/OrganizerPicker.story.vue b/js/src/components/Event/OrganizerPicker.story.vue
new file mode 100644
index 000000000..0a84c8fc8
--- /dev/null
+++ b/js/src/components/Event/OrganizerPicker.story.vue
@@ -0,0 +1,56 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant>
+      <OrganizerPicker
+        v-model="actor"
+        :identities="identities"
+        v-model:actor-filter="actorFilter"
+        :groupMemberships="[]"
+        :current-actor="currentActor"
+        @update:actor-filter="hstEvent('Actor Filter updated', $event)"
+        @update:model-value="hstEvent('Selected actor updated', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import OrganizerPicker from "./OrganizerPicker.vue";
+import { createMemoryHistory, createRouter } from "vue-router";
+import { reactive, ref } from "vue";
+import { ActorType } from "@/types/enums";
+import { hstEvent } from "histoire/client";
+
+const currentActor = reactive({
+  id: "59",
+  preferredUsername: "me",
+  name: "Someone",
+  type: ActorType.PERSON,
+});
+
+const actor = reactive({
+  id: "5",
+  preferredUsername: "hello",
+  name: "Sigmund",
+  type: ActorType.PERSON,
+});
+
+const group = reactive({
+  id: "89",
+  preferredUsername: "congregation",
+  name: "College",
+  type: ActorType.GROUP,
+});
+
+const identities = [actor, group];
+
+const actorFilter = ref("");
+
+function setupApp({ app }) {
+  app.use(
+    createRouter({
+      history: createMemoryHistory(),
+      routes: [{ path: "/", name: "home", component: { render: () => null } }],
+    })
+  );
+}
+</script>
diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index 2aba5a8ec..ac0d3f860 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/js/src/components/Event/OrganizerPicker.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="list is-hoverable">
-    <b-input
+  <div class="max-w-md mx-auto">
+    <o-input
       dir="auto"
-      :placeholder="$t('Filter by profile or group name')"
-      v-model="actorFilter"
+      :placeholder="t('Filter by profile or group name')"
+      v-model="actorFilterProxy"
+      class=""
     />
     <transition-group
       tag="ul"
       class="grid grid-cols-1 gap-y-3 m-5 max-w-md mx-auto"
+      :class="{ hidden: actualFilteredAvailableActors.length === 0 }"
       enter-active-class="duration-300 ease-out"
       enter-from-class="transform opacity-0"
       enter-to-class="opacity-100"
@@ -18,7 +20,7 @@
       <li
         class="relative focus-within:shadow-lg"
         v-for="availableActor in actualFilteredAvailableActors"
-        :key="availableActor.id"
+        :key="availableActor?.id"
       >
         <input
           class="sr-only peer"
@@ -26,126 +28,119 @@
           :value="availableActor"
           name="availableActors"
           v-model="selectedActor"
-          :id="`availableActor-${availableActor.id}`"
+          :id="`availableActor-${availableActor?.id}`"
         />
         <label
-          class="flex flex-wrap p-3 bg-white border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
-          :for="`availableActor-${availableActor.id}`"
+          class="flex flex-wrap p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
+          :for="`availableActor-${availableActor?.id}`"
         >
-          <figure class="image is-48x48" v-if="availableActor.avatar">
+          <figure class="h-12 w-12" v-if="availableActor?.avatar">
             <img
-              class="image is-rounded"
+              class="rounded-full h-full w-full object-cover"
               :src="availableActor.avatar.url"
               alt=""
+              width="48"
+              height="48"
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
-          <div>
-            <h3>{{ availableActor.name }}</h3>
-            <small>{{ `@${availableActor.preferredUsername}` }}</small>
+          <AccountCircle v-else :size="48" />
+          <div class="flex-1">
+            <h3>{{ availableActor?.name }}</h3>
+            <small>{{ `@${availableActor?.preferredUsername}` }}</small>
           </div>
         </label>
       </li>
     </transition-group>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { IPerson, IActor, Actor } from "@/types/actor";
-import {
-  CURRENT_ACTOR_CLIENT,
-  IDENTITIES,
-  LOGGED_USER_MEMBERSHIPS,
-} from "@/graphql/actor";
-import { Paginate } from "@/types/paginate";
+<script lang="ts" setup>
+import { IActor, IPerson } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
 import { MemberRole } from "@/types/enums";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 
-@Component({
-  apollo: {
-    groupMemberships: {
-      query: LOGGED_USER_MEMBERSHIPS,
-      update: (data) => data.loggedUser.memberships,
-      variables() {
-        return {
-          page: 1,
-          limit: 10,
-          membershipName: this.actorFilter,
-        };
-      },
-    },
-    identities: IDENTITIES,
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-})
-export default class OrganizerPicker extends Vue {
-  @Prop() value!: IActor;
+const props = withDefaults(
+  defineProps<{
+    currentActor: IPerson;
+    modelValue: IActor;
+    restrictModeratorLevel?: boolean;
+    identities: IActor[];
+    actorFilter: string;
+    groupMemberships: IMember[];
+  }>(),
+  { restrictModeratorLevel: false }
+);
 
-  @Prop({ required: false, default: false }) restrictModeratorLevel!: boolean;
+const emit = defineEmits(["update:modelValue", "update:actorFilter"]);
 
-  groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
+const { t } = useI18n({ useScope: "global" });
 
-  currentActor!: IPerson;
-
-  actorFilter = "";
-
-  get selectedActor(): IActor | undefined {
-    if (this.value?.id) {
-      return this.value;
+const selectedActor = computed({
+  get(): IActor | undefined {
+    if (props.modelValue?.id) {
+      return props.modelValue;
     }
-    if (this.currentActor) {
-      return this.identities.find(
-        (identity) => identity.id === this.currentActor.id
+    if (props.currentActor) {
+      return props.identities.find(
+        (identity) => identity.id === props.currentActor?.id
       );
     }
     return undefined;
+  },
+
+  set(actor: IActor | undefined) {
+    emit("update:modelValue", actor);
+  },
+});
+
+const actualMemberships = computed((): IMember[] => {
+  if (props.restrictModeratorLevel) {
+    return props.groupMemberships.filter((membership: IMember) =>
+      [
+        MemberRole.ADMINISTRATOR,
+        MemberRole.MODERATOR,
+        MemberRole.CREATOR,
+      ].includes(membership.role)
+    );
   }
+  return props.groupMemberships;
+});
 
-  set selectedActor(actor: IActor | undefined) {
-    this.$emit("input", actor);
-  }
+const actualAvailableActors = computed((): (IActor | undefined)[] => {
+  return [
+    props.currentActor,
+    ...props.identities.filter(
+      (identity: IActor) => identity.id !== props.currentActor?.id
+    ),
+    ...actualMemberships.value.map((member) => member.parent),
+  ].filter((elem) => elem);
+});
 
-  identities: IActor[] = [];
-
-  Actor = Actor;
-
-  get actualMemberships(): IMember[] {
-    if (this.restrictModeratorLevel) {
-      return this.groupMemberships.elements.filter((membership: IMember) =>
-        [
-          MemberRole.ADMINISTRATOR,
-          MemberRole.MODERATOR,
-          MemberRole.CREATOR,
-        ].includes(membership.role)
-      );
-    }
-    return this.groupMemberships.elements;
-  }
-
-  get actualAvailableActors(): IActor[] {
+const actualFilteredAvailableActors = computed((): (IActor | undefined)[] => {
+  return (actualAvailableActors.value ?? []).filter((actor) => {
+    if (actor === undefined) return false;
     return [
-      this.currentActor,
-      ...this.identities.filter(
-        (identity: IActor) => identity.id !== this.currentActor?.id
-      ),
-      ...this.actualMemberships.map((member) => member.parent),
-    ].filter((elem) => elem);
-  }
+      actor.preferredUsername?.toLowerCase(),
+      actor.name?.toLowerCase(),
+      actor.domain?.toLowerCase(),
+    ].some((match) => match?.includes(actorFilterProxy.value.toLowerCase()));
+  });
+});
 
-  get actualFilteredAvailableActors(): IActor[] {
-    return this.actualAvailableActors.filter((actor) => {
-      return [
-        actor.preferredUsername.toLowerCase(),
-        actor.name?.toLowerCase(),
-        actor.domain?.toLowerCase(),
-      ].some((match) => match?.includes(this.actorFilter.toLowerCase()));
-    });
-  }
-}
+const actorFilterProxy = computed({
+  get() {
+    return props.actorFilter;
+  },
+  set(newActorFilter: string) {
+    emit("update:actorFilter", newActorFilter);
+  },
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-::v-deep .list-item {
+:deep(.list-item) {
   box-sizing: content-box;
 
   label.b-radio {
@@ -155,14 +150,14 @@ export default class OrganizerPicker extends Vue {
       padding: 0.25rem 0;
       align-items: center;
 
-      figure.image,
-      span.icon.media-left {
-        @include margin-right(0.5rem);
-      }
+      // figure.image,
+      // span.icon.media-left {
+      //   @include margin-right(0.5rem);
+      // }
 
-      span.icon.media-left {
-        @include margin-left(-0.25rem);
-      }
+      // span.icon.media-left {
+      //   @include margin-left(-0.25rem);
+      // }
     }
   }
 }
diff --git a/js/src/components/Event/OrganizerPickerWrapper.story.vue b/js/src/components/Event/OrganizerPickerWrapper.story.vue
new file mode 100644
index 000000000..0f67ec97b
--- /dev/null
+++ b/js/src/components/Event/OrganizerPickerWrapper.story.vue
@@ -0,0 +1,87 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant>
+      <OrganizerPickerWrapper
+        v-model="actor"
+        @update:model-value="hstEvent('Value', $event)"
+        @update:contacts="hstEvent('Contacts', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import OrganizerPickerWrapper from "./OrganizerPickerWrapper.vue";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import { createMockClient } from "mock-apollo-client";
+import { cache } from "@/apollo/memory";
+import { ICurrentUserRole } from "@/types/enums";
+import { PERSON_GROUP_MEMBERSHIPS } from "@/graphql/actor";
+import { createMemoryHistory, createRouter } from "vue-router";
+import { IDENTITIES } from "@/graphql/actor";
+import { reactive } from "vue";
+import { hstEvent } from "histoire/client";
+
+const actor = reactive({
+  id: "5",
+  preferredUsername: "hello",
+  name: "Sigmund",
+});
+
+function setupApp({ app }) {
+  const defaultResolvers = {
+    Query: {
+      currentUser: (): Record<string, any> => ({
+        email: "user@mail.com",
+        id: "2",
+        role: ICurrentUserRole.USER,
+        isLoggedIn: true,
+        __typename: "CurrentUser",
+      }),
+      currentActor: (): Record<string, any> => ({
+        id: "67",
+        preferredUsername: "someone",
+        name: "Personne",
+        avatar: null,
+        __typename: "CurrentActor",
+      }),
+    },
+  };
+
+  const mockClient = createMockClient({
+    cache,
+    resolvers: defaultResolvers,
+  });
+
+  mockClient.setRequestHandler(
+    PERSON_GROUP_MEMBERSHIPS,
+    () =>
+      new Promise((resolve) =>
+        resolve({
+          data: {
+            person: { id: "5", memberships: { total: 0, elements: [] } },
+          },
+        })
+      )
+  );
+
+  mockClient.setRequestHandler(
+    IDENTITIES,
+    () =>
+      new Promise((resolve) =>
+        resolve({
+          data: {
+            identities: [{ id: "9", preferredUsername: "sam", name: "Samuel" }],
+          },
+        })
+      )
+  );
+
+  app.provide(DefaultApolloClient, mockClient);
+  app.use(
+    createRouter({
+      history: createMemoryHistory(),
+      routes: [{ path: "/", name: "home", component: { render: () => null } }],
+    })
+  );
+}
+</script>
diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index 20f59c7ff..9ed7b28dc 100644
--- a/js/src/components/Event/OrganizerPickerWrapper.vue
+++ b/js/src/components/Event/OrganizerPickerWrapper.vue
@@ -1,38 +1,40 @@
 <template>
   <div
-    class="bg-white border border-gray-300 rounded-lg cursor-pointer"
+    class="bg-white dark:bg-violet-3 border border-gray-300 rounded-lg cursor-pointer"
     v-if="selectedActor"
   >
     <!-- If we have a current actor (inline) -->
     <div
       v-if="inline && selectedActor.id"
-      class="inline box"
+      class=""
       dir="auto"
       @click="isComponentModalActive = true"
     >
-      <div class="media">
-        <div class="media-left">
-          <figure class="image is-48x48" v-if="selectedActor.avatar">
+      <div class="flex gap-1 p-4">
+        <div class="">
+          <figure class="h-12 w-12" v-if="selectedActor.avatar">
             <img
-              class="image is-rounded"
+              class="rounded-full h-full w-full object-cover"
               :src="selectedActor.avatar.url"
-              :alt="selectedActor.avatar.alt || ''"
+              :alt="selectedActor.avatar.alt ?? ''"
+              height="48"
+              width="48"
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <AccountCircle v-else :size="48" />
         </div>
-        <div class="media-content" v-if="selectedActor.name">
-          <p class="is-4">{{ selectedActor.name }}</p>
-          <p class="is-6 has-text-grey-dark">
+        <div class="flex-1" v-if="selectedActor.name">
+          <p class="">{{ selectedActor.name }}</p>
+          <p class="">
             {{ `@${selectedActor.preferredUsername}` }}
           </p>
         </div>
-        <div class="media-content" v-else>
+        <div class="flex-1" v-else>
           {{ `@${selectedActor.preferredUsername}` }}
         </div>
-        <b-button type="is-text" @click="isComponentModalActive = true">
+        <o-button type="text" @click="isComponentModalActive = true">
           {{ $t("Change") }}
-        </b-button>
+        </o-button>
       </div>
     </div>
     <!-- If we have a current actor -->
@@ -42,35 +44,42 @@
       @click="isComponentModalActive = true"
     >
       <img
-        class="image is-48x48"
+        class="rounded"
         v-if="selectedActor.avatar"
         :src="selectedActor.avatar.url"
         :alt="selectedActor.avatar.alt"
+        width="48"
+        height="48"
       />
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <AccountCircle v-else :size="48" />
     </span>
-    <b-modal
-      :active.sync="isComponentModalActive"
+    <o-modal
+      v-model:active="isComponentModalActive"
       has-modal-card
       :close-button-aria-label="$t('Close')"
     >
-      <div class="modal-card">
-        <header class="modal-card-head">
-          <p class="modal-card-title">{{ $t("Pick a profile or a group") }}</p>
+      <div class="p-2 rounded">
+        <header class="">
+          <h2 class="">{{ $t("Pick a profile or a group") }}</h2>
         </header>
-        <section class="modal-card-body">
-          <div class="columns">
-            <div class="column actor-picker">
+        <section class="">
+          <div class="flex flex-wrap gap-2 items-center">
+            <div class="max-h-[400px] overflow-y-auto flex-1">
               <organizer-picker
+                v-if="currentActor"
+                :current-actor="currentActor"
+                :identities="identities ?? []"
                 v-model="selectedActor"
-                @input="relay"
+                @update:model-value="relay"
                 :restrict-moderator-level="true"
+                :group-memberships="groupMemberships"
+                v-model:actorFilter="actorFilter"
               />
             </div>
-            <div class="column contact-picker">
+            <div class="max-h-[400px] overflow-y-auto">
               <div v-if="isSelectedActorAGroup">
                 <p>{{ $t("Add a contact") }}</p>
-                <b-input
+                <o-input
                   :placeholder="$t('Filter by name')"
                   :value="contactFilter"
                   @input="debounceSetFilterByName"
@@ -82,36 +91,34 @@
                     v-for="actor in filteredActorMembers"
                     :key="actor.id"
                   >
-                    <b-checkbox
+                    <o-checkbox
                       v-model="actualContacts"
                       :native-value="actor.id"
                     >
-                      <div class="media">
-                        <div class="media-left">
-                          <figure class="image is-48x48" v-if="actor.avatar">
+                      <div class="flex gap-1">
+                        <div class="">
+                          <figure class="" v-if="actor.avatar">
                             <img
-                              class="image is-rounded"
+                              class="rounded"
                               :src="actor.avatar.url"
                               :alt="actor.avatar.alt"
+                              width="48"
+                              height="48"
                             />
                           </figure>
-                          <b-icon
-                            v-else
-                            size="is-large"
-                            icon="account-circle"
-                          />
+                          <AccountCircle v-else :size="48" />
                         </div>
-                        <div class="media-content" v-if="actor.name">
-                          <p class="is-4">{{ actor.name }}</p>
-                          <p class="is-6 has-text-grey-dark">
+                        <div class="" v-if="actor.name">
+                          <p class="">{{ actor.name }}</p>
+                          <p class="">
                             {{ `@${usernameWithDomain(actor)}` }}
                           </p>
                         </div>
-                        <div class="media-content" v-else>
+                        <div class="" v-else>
                           {{ `@${usernameWithDomain(actor)}` }}
                         </div>
                       </div>
-                    </b-checkbox>
+                    </o-checkbox>
                   </p>
                 </div>
                 <div
@@ -124,36 +131,41 @@
                   </empty-content>
                 </div>
               </div>
-              <div v-else class="content has-text-grey-dark has-text-centered">
+              <div v-else class="">
                 <p>{{ $t("Your profile will be shown as contact.") }}</p>
               </div>
             </div>
           </div>
         </section>
-        <footer class="modal-card-foot">
-          <button class="button is-primary" type="button" @click="pickActor">
+        <footer class="my-2">
+          <o-button variant="primary" @click="pickActor">
             {{ $t("Pick") }}
-          </button>
+          </o-button>
         </footer>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { IMember } from "@/types/actor/member.model";
-import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
+<script lang="ts" setup>
+import { IActor, IGroup, usernameWithDomain } from "../../types/actor";
 import OrganizerPicker from "./OrganizerPicker.vue";
 import EmptyContent from "../Utils/EmptyContent.vue";
 import {
-  CURRENT_ACTOR_CLIENT,
-  IDENTITIES,
+  LOGGED_USER_MEMBERSHIPS,
   PERSON_GROUP_MEMBERSHIPS,
 } from "../../graphql/actor";
-import { Paginate } from "../../types/paginate";
 import { GROUP_MEMBERS } from "@/graphql/member";
 import { ActorType, MemberRole } from "@/types/enums";
+import { useQuery } from "@vue/apollo-composable";
+import { computed, ref, watch } from "vue";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+} from "@/composition/apollo/actor";
+import { useRoute } from "vue-router";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import debounce from "lodash/debounce";
+import { IUser } from "@/types/current-user.model";
 
 const MEMBER_ROLES = [
   MemberRole.CREATOR,
@@ -162,151 +174,144 @@ const MEMBER_ROLES = [
   MemberRole.MEMBER,
 ];
 
-@Component({
-  components: { OrganizerPicker, EmptyContent },
-  apollo: {
-    members: {
-      query: GROUP_MEMBERS,
-      variables() {
-        return {
-          groupName: usernameWithDomain(this.selectedActor),
-          page: this.membersPage,
-          limit: 10,
-          roles: MEMBER_ROLES.join(","),
-          name: this.contactFilter,
-        };
-      },
-      update: (data) => data.group.members,
-      skip() {
-        return (
-          !this.selectedActor || this.selectedActor.type !== ActorType.GROUP
-        );
-      },
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-    personMemberships: {
-      query: PERSON_GROUP_MEMBERSHIPS,
-      variables() {
-        return {
-          id: this.currentActor?.id,
-          page: 1,
-          limit: 10,
-          groupId: this.$route.query?.actorId,
-        };
-      },
-      update: (data) => data.person.memberships,
-    },
-    identities: IDENTITIES,
-  },
-})
-export default class OrganizerPickerWrapper extends Vue {
-  @Prop({ type: Object, required: false }) value!: IActor;
+const { currentActor } = useCurrentActorClient();
 
-  @Prop({ default: true, type: Boolean }) inline!: boolean;
+const route = useRoute();
 
-  @Prop({ type: Array, required: false, default: () => [] })
-  contacts!: IActor[];
+const { result: personMembershipsResult } = useQuery(
+  PERSON_GROUP_MEMBERSHIPS,
+  () => ({
+    id: currentActor.value?.id,
+    page: 1,
+    limit: 10,
+    groupId: route.query?.actorId,
+  })
+);
 
-  currentActor!: IPerson;
-
-  identities!: IPerson[];
-
-  isComponentModalActive = false;
-
-  contactFilter = "";
-
-  usernameWithDomain = usernameWithDomain;
-
-  members: Paginate<IMember> = { elements: [], total: 0 };
-
-  membersPage = 1;
-
-  personMemberships: Paginate<IMember> = { elements: [], total: 0 };
-
-  data(): Record<string, unknown> {
-    return {
-      debounceSetFilterByName: debounce(this.setContactFilter, 1000),
-    };
-  }
-
-  get actualContacts(): (string | undefined)[] {
-    return this.contacts.map(({ id }) => id);
-  }
-
-  set actualContacts(contactsIds: (string | undefined)[]) {
-    this.$emit(
-      "update:contacts",
-      this.actorMembers.filter(({ id }) => contactsIds.includes(id))
-    );
-  }
-
-  setContactFilter(contactFilter: string) {
-    this.contactFilter = contactFilter;
-  }
-
-  @Watch("personMemberships")
-  setInitialActor(): void {
-    if (
-      this.personMemberships?.elements[0]?.parent?.id ===
-      this.$route.query?.actorId
-    ) {
-      this.selectedActor = this.personMemberships?.elements[0]?.parent;
+const personMemberships = computed(
+  () =>
+    personMembershipsResult.value?.person.memberships ?? {
+      elements: [],
+      total: 0,
     }
-  }
+);
 
-  get selectedActor(): IActor | undefined {
-    if (this.value?.id) {
-      return this.value;
+const { identities } = useCurrentUserIdentities();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: IActor;
+    inline?: boolean;
+    contacts?: IActor[];
+  }>(),
+  { inline: true, contacts: () => [] }
+);
+
+const emit = defineEmits(["update:modelValue", "update:contacts"]);
+
+const selectedActor = computed({
+  get(): IActor | undefined {
+    if (props.modelValue?.id) {
+      return props.modelValue;
     }
-    if (this.currentActor) {
-      return this.identities.find(
-        (identity) => identity.id === this.currentActor.id
+    if (currentActor.value) {
+      return (identities.value ?? []).find(
+        (identity) => identity.id === currentActor.value?.id
       );
     }
     return undefined;
-  }
+  },
+  set(newSelectedActor: IActor | undefined) {
+    emit("update:modelValue", newSelectedActor);
+  },
+});
 
-  set selectedActor(selectedActor: IActor | undefined) {
-    this.$emit("input", selectedActor);
-  }
+const isComponentModalActive = ref(false);
+const contactFilter = ref("");
+const membersPage = ref(1);
 
-  async relay(group: IGroup): Promise<void> {
-    this.actualContacts = [];
-    this.selectedActor = group;
-  }
+const { result: membersResult } = useQuery(
+  GROUP_MEMBERS,
+  () => ({
+    groupName: usernameWithDomain(selectedActor.value),
+    page: membersPage.value,
+    limit: 10,
+    roles: MEMBER_ROLES.join(","),
+    name: contactFilter.value,
+  }),
+  () => ({ enabled: selectedActor.value?.type === ActorType.GROUP })
+);
 
-  pickActor(): void {
-    this.isComponentModalActive = false;
-  }
+const members = computed(
+  () => membersResult.value?.members ?? { elements: [], total: 0 }
+);
 
-  get actorMembers(): IActor[] {
-    if (this.isSelectedActorAGroup) {
-      return this.members.elements.map(({ actor }: { actor: IActor }) => actor);
-    }
-    return [];
-  }
+const actualContacts = computed({
+  get(): (string | undefined)[] {
+    return props.contacts.map(({ id }) => id);
+  },
+  set(contactsIds: (string | undefined)[]) {
+    emit(
+      "update:contacts",
+      actorMembers.value.filter(({ id }) => contactsIds.includes(id))
+    );
+  },
+});
 
-  get filteredActorMembers(): IActor[] {
-    return this.actorMembers.filter((actor) => {
-      return [
-        actor.preferredUsername.toLowerCase(),
-        actor.name?.toLowerCase(),
-        actor.domain?.toLowerCase(),
-      ];
-    });
-  }
+const setContactFilter = (newContactFilter: string) => {
+  contactFilter.value = newContactFilter;
+};
 
-  get isSelectedActorAGroup(): boolean {
-    return this.selectedActor?.type === ActorType.GROUP;
+const debounceSetFilterByName = debounce(setContactFilter, 1000);
+
+watch(personMemberships, () => {
+  if (
+    personMemberships.value?.elements[0]?.parent?.id === route.query?.actorId
+  ) {
+    selectedActor.value = personMemberships.value?.elements[0]?.parent;
   }
-}
+});
+
+const relay = async (group: IGroup): Promise<void> => {
+  actualContacts.value = [];
+  selectedActor.value = group;
+};
+
+const pickActor = (): void => {
+  isComponentModalActive.value = false;
+};
+
+const actorMembers = computed((): IActor[] => {
+  if (isSelectedActorAGroup.value) {
+    return members.value.elements.map(({ actor }: { actor: IActor }) => actor);
+  }
+  return [];
+});
+
+const filteredActorMembers = computed((): IActor[] => {
+  return actorMembers.value.filter((actor) => {
+    return [
+      actor.preferredUsername.toLowerCase(),
+      actor.name?.toLowerCase(),
+      actor.domain?.toLowerCase(),
+    ];
+  });
+});
+
+const isSelectedActorAGroup = computed((): boolean => {
+  return selectedActor.value?.type === ActorType.GROUP;
+});
+
+const actorFilter = ref("");
+
+const { result: groupMembershipsResult } = useQuery<{
+  loggedUser: Pick<IUser, "memberships">;
+}>(LOGGED_USER_MEMBERSHIPS, () => ({
+  page: 1,
+  limit: 10,
+  membershipName: actorFilter.value,
+}));
+const groupMemberships = computed(
+  () => groupMembershipsResult.value?.loggedUser.memberships.elements ?? []
+);
 </script>
-<style lang="scss" scoped>
-.modal-card-body .columns .column {
-  &.actor-picker,
-  &.contact-picker {
-    overflow-y: auto;
-    max-height: 400px;
-  }
-}
-</style>
diff --git a/js/src/components/Event/ParticipationButton.story.vue b/js/src/components/Event/ParticipationButton.story.vue
new file mode 100644
index 000000000..e1e16b511
--- /dev/null
+++ b/js/src/components/Event/ParticipationButton.story.vue
@@ -0,0 +1,114 @@
+<template>
+  <Story>
+    <Variant title="Unlogged">
+      <ParticipationButton
+        :event="event"
+        :current-actor="emptyCurrentActor"
+        :participation="undefined"
+        :identities="[]"
+      />
+    </Variant>
+    <Variant title="Basic">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="undefined"
+        :identities="identities"
+        @join-event="hstEvent('Join event', $event)"
+        @join-modal="hstEvent('Join modal', $event)"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+    <Variant title="Basic with confirmation">
+      <ParticipationButton
+        :event="{ ...event, joinOptions: EventJoinOptions.RESTRICTED }"
+        :current-actor="currentActor"
+        :participation="undefined"
+        :identities="identities"
+        @join-event-with-confirmation="
+          hstEvent('Join Event with confirmation', $event)
+        "
+        @join-modal="hstEvent('Join modal', $event)"
+      />
+    </Variant>
+    <Variant title="Participating">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="participation"
+        :identities="identities"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+    <Variant title="Pending approval">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="{
+          ...participation,
+          role: ParticipantRole.NOT_APPROVED,
+        }"
+        :identities="identities"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+    <Variant title="Rejected">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="{
+          ...participation,
+          role: ParticipantRole.REJECTED,
+        }"
+        :identities="identities"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IPerson } from "@/types/actor";
+import { EventJoinOptions, ParticipantRole } from "@/types/enums";
+import { IEvent } from "@/types/event.model";
+import ParticipationButton from "./ParticipationButton.vue";
+import { hstEvent } from "histoire/client";
+import { IParticipant } from "@/types/participant.model";
+
+const emptyCurrentActor: IPerson = {};
+
+const currentActor: IPerson = {
+  id: "1",
+  preferredUsername: "tcit",
+  name: "Thomas",
+  avatar: {
+    url: "https://mobilizon.fr/media/3a5f18c058a8193b1febfaf561f94ae8b91f85ac64c01ddf5ad7b251fb43baf5.jpg?name=profil.jpg",
+  },
+};
+
+const participation: IParticipant = {
+  actor: currentActor,
+  role: ParticipantRole.PARTICIPANT,
+};
+
+const identities: IPerson[] = [
+  currentActor,
+  {
+    id: "2",
+    preferredUsername: "another",
+    name: "Another",
+    avatar: {
+      url: "https://mobilizon.fr/media/95ab5ba92287ab4857bb517cadae2a7ab6a553748d1c48cefc27e2b7ab640fea.jpg?name=FB_IMG_16150214351371162.jpg",
+    },
+  },
+];
+
+const event: IEvent = {
+  title: "hello",
+  url: "https://mobilizon.fr/events/an-uuid",
+  options: {
+    anonymousParticipation: false,
+  },
+  joinOptions: EventJoinOptions.FREE,
+};
+</script>
diff --git a/js/src/components/Event/ParticipationButton.vue b/js/src/components/Event/ParticipationButton.vue
index 48fd0b93a..198c96731 100644
--- a/js/src/components/Event/ParticipationButton.vue
+++ b/js/src/components/Event/ParticipationButton.vue
@@ -1,90 +1,61 @@
-import {EventJoinOptions} from "@/types/event.model";
-<docs>
-A button to set your participation
-
-##### If the participant has been confirmed
-```vue
-<ParticipationButton :participation="{ role: 'PARTICIPANT' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-
-##### If the participant has not being approved yet
-```vue
-<ParticipationButton :participation="{ role: 'NOT_APPROVED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-
-##### If the participant has been rejected
-```vue
-<ParticipationButton :participation="{ role: 'REJECTED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-
-##### If the participant doesn't exist yet
-```vue
-<ParticipationButton :participation="null" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-</docs>
-
 <template>
-  <div class="participation-button">
-    <b-dropdown
-      aria-role="list"
-      position="is-bottom-left"
+  <div>
+    <o-dropdown
       v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
     >
       <template #trigger="{ active }">
-        <b-button
-          type="is-success"
-          size="is-large"
+        <o-button
+          variant="success"
+          size="large"
           icon-left="check"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
-          {{ $t("I participate") }}
-        </b-button>
+          {{ t("I participate") }}
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="confirmLeave"
         @keyup.enter="confirmLeave"
-        class="has-text-danger"
-        >{{ $t("Cancel my participation…") }}</b-dropdown-item
-      >
-    </b-dropdown>
+        class=""
+        >{{ t("Cancel my participation…") }}
+      </o-dropdown-item>
+    </o-dropdown>
 
     <div
       v-else-if="
         participation && participation.role === ParticipantRole.NOT_APPROVED
       "
+      class="flex flex-col"
     >
-      <b-dropdown
-        aria-role="list"
-        position="is-bottom-left"
-        class="dropdown-disabled"
-      >
-        <button class="button is-success is-large" type="button" slot="trigger">
-          <b-icon icon="timer-sand-empty" />
-          <template>
-            <span>{{ $t("I participate") }}</span>
-          </template>
-          <b-icon icon="menu-down" />
-        </button>
+      <o-dropdown>
+        <template #trigger>
+          <o-button variant="success" size="large" type="button">
+            <template class="flex items-center">
+              <TimerSandEmpty />
+              <span>{{ t("I participate") }}</span>
+              <MenuDown />
+            </template>
+          </o-button>
+        </template>
 
-        <!--                <b-dropdown-item :value="false" aria-role="listitem">-->
-        <!--                  {{ $t('Change my identity…')}}-->
-        <!--                </b-dropdown-item>-->
+        <o-dropdown-item :value="false" aria-role="listitem">
+          {{ t("Change my identity…") }}
+        </o-dropdown-item>
 
-        <b-dropdown-item
+        <o-dropdown-item
           :value="false"
           aria-role="listitem"
           @click="confirmLeave"
           @keyup.enter="confirmLeave"
-          class="has-text-danger"
-          >{{ $t("Cancel my participation request…") }}</b-dropdown-item
+          class=""
+          >{{ t("Cancel my participation request…") }}</o-dropdown-item
         >
-      </b-dropdown>
-      <small>{{ $t("Participation requested!") }}</small>
-      <br />
-      <small>{{ $t("Waiting for organization team approval.") }}</small>
+      </o-dropdown>
+      <p>{{ t("Participation requested!") }}</p>
+      <p>{{ t("Waiting for organization team approval.") }}</p>
     </div>
 
     <div
@@ -94,63 +65,63 @@ A button to set your participation
     >
       <span>
         {{
-          $t(
+          t(
             "Unfortunately, your participation request was rejected by the organizers."
           )
         }}
       </span>
     </div>
 
-    <b-dropdown
-      aria-role="list"
-      position="is-bottom-left"
-      v-else-if="!participation && currentActor.id"
-    >
+    <o-dropdown v-else-if="!participation && currentActor?.id">
       <template #trigger="{ active }">
-        <b-button
-          type="is-primary"
-          size="is-large"
+        <o-button
+          variant="primary"
+          size="large"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
-          {{ $t("Participate") }}
-        </b-button>
+          {{ t("Participate") }}
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="true"
         aria-role="listitem"
         @click="joinEvent(currentActor)"
         @keyup.enter="joinEvent(currentActor)"
       >
-        <div class="media">
-          <div class="media-left" v-if="currentActor.avatar">
-            <figure class="image is-32x32">
-              <img class="is-rounded" :src="currentActor.avatar.url" alt />
-            </figure>
-          </div>
-          <div class="media-content">
+        <div class="flex gap-2 items-center">
+          <figure class="" v-if="currentActor?.avatar">
+            <img
+              class="rounded-xl"
+              :src="currentActor.avatar.url"
+              alt=""
+              width="24"
+              height="24"
+            />
+          </figure>
+          <AccountCircle v-else />
+          <div class="">
             <span>
               {{
-                $t("as {identity}", {
-                  identity:
-                    currentActor.name || `@${currentActor.preferredUsername}`,
+                t("as {identity}", {
+                  identity: displayName(currentActor),
                 })
               }}
             </span>
           </div>
         </div>
-      </b-dropdown-item>
+      </o-dropdown-item>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="joinModal"
         @keyup.enter="joinModal"
-        v-if="identities.length > 1"
-        >{{ $t("with another identity…") }}</b-dropdown-item
+        v-if="(identities ?? []).length > 1"
+        >{{ t("with another identity…") }}</o-dropdown-item
       >
-    </b-dropdown>
-    <b-button
+    </o-dropdown>
+    <o-button
       rel="nofollow"
       tag="router-link"
       :to="{
@@ -158,110 +129,72 @@ A button to set your participation
         params: { uuid: event.uuid },
       }"
       v-else-if="!participation && hasAnonymousParticipationMethods"
-      type="is-primary"
-      size="is-large"
+      variant="primary"
+      size="large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ t("Participate") }}</o-button
     >
-    <b-button
+    <o-button
       tag="router-link"
       rel="nofollow"
       :to="{
         name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
         params: { uuid: event.uuid },
       }"
-      v-else-if="!currentActor.id"
-      type="is-primary"
-      size="is-large"
+      v-else-if="!currentActor?.id"
+      variant="primary"
+      size="large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ t("Participate") }}</o-button
     >
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { EventJoinOptions, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
 import { IEvent } from "../../types/event.model";
-import { IPerson, Person } from "../../types/actor";
-import { CURRENT_ACTOR_CLIENT, IDENTITIES } from "../../graphql/actor";
-import { CURRENT_USER_CLIENT } from "../../graphql/user";
-import { CONFIG } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
+import { IPerson, displayName } from "../../types/actor";
 import RouteName from "../../router/name";
+import { computed } from "vue";
+import MenuDown from "vue-material-design-icons/MenuDown.vue";
+import { useI18n } from "vue-i18n";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import TimerSandEmpty from "vue-material-design-icons/TimerSandEmpty.vue";
 
-@Component({
-  apollo: {
-    currentUser: {
-      query: CURRENT_USER_CLIENT,
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-    config: CONFIG,
-    identities: {
-      query: IDENTITIES,
-      update: ({ identities }) =>
-        identities
-          ? identities.map((identity: IPerson) => new Person(identity))
-          : [],
-      skip() {
-        return this.currentUser.isLoggedIn === false;
-      },
-    },
-  },
-})
-export default class ParticipationButton extends Vue {
-  @Prop({ required: true }) participation!: IParticipant;
+const props = defineProps<{
+  participation: IParticipant | undefined;
+  event: IEvent;
+  currentActor: IPerson;
+  identities: IPerson[];
+}>();
 
-  @Prop({ required: true }) event!: IEvent;
+const emit = defineEmits([
+  "join-event-with-confirmation",
+  "join-event",
+  "join-modal",
+  "confirm-leave",
+]);
 
-  @Prop({ required: true }) currentActor!: IPerson;
+const { t } = useI18n({ useScope: "global" });
 
-  ParticipantRole = ParticipantRole;
-
-  identities: IPerson[] = [];
-
-  config!: IConfig;
-
-  RouteName = RouteName;
-
-  joinEvent(actor: IPerson): void {
-    if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
-      this.$emit("join-event-with-confirmation", actor);
-    } else {
-      this.$emit("join-event", actor);
-    }
+const joinEvent = (actor: IPerson | undefined): void => {
+  if (props.event.joinOptions === EventJoinOptions.RESTRICTED) {
+    emit("join-event-with-confirmation", actor);
+  } else {
+    emit("join-event", actor);
   }
+};
 
-  joinModal(): void {
-    this.$emit("join-modal");
-  }
+const joinModal = (): void => {
+  emit("join-modal");
+};
 
-  confirmLeave(): void {
-    this.$emit("confirm-leave");
-  }
+const confirmLeave = (): void => {
+  emit("confirm-leave");
+};
 
-  get hasAnonymousParticipationMethods(): boolean {
-    return this.event.options.anonymousParticipation;
-  }
-}
+const hasAnonymousParticipationMethods = computed((): boolean => {
+  return props.event.options.anonymousParticipation;
+});
 </script>
-
-<style lang="scss" scoped>
-.participation-button {
-  .dropdown {
-    display: flex;
-    justify-content: flex-end;
-
-    &.dropdown-disabled button {
-      opacity: 0.5;
-    }
-  }
-}
-
-.anonymousParticipationModal {
-  ::v-deep .animation-content {
-    z-index: 1;
-  }
-}
-</style>
diff --git a/js/src/components/Event/RecentEventCardWrapper.vue b/js/src/components/Event/RecentEventCardWrapper.vue
index a2d2c6e1d..59b1f47aa 100644
--- a/js/src/components/Event/RecentEventCardWrapper.vue
+++ b/js/src/components/Event/RecentEventCardWrapper.vue
@@ -2,8 +2,8 @@
   <div>
     <p class="time">
       {{
-        formatDistanceToNow(new Date(event.publishAt || event.insertedAt), {
-          locale: $dateFnsLocale,
+        formatDistanceToNow(new Date(event.publishAt), {
+          locale: dateFnsLocale,
           addSuffix: true,
         }) || $t("Right now")
       }}
@@ -11,25 +11,15 @@
     <EventCard :event="event" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEvent } from "@/types/event.model";
 import { formatDistanceToNow } from "date-fns";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { inject } from "vue";
 import EventCard from "./EventCard.vue";
+import type { Locale } from "date-fns";
+defineProps<{
+  event: IEvent;
+}>();
 
-@Component({
-  components: {
-    EventCard,
-  },
-})
-export default class RecentEventCardWrapper extends Vue {
-  @Prop({ required: true, type: Object }) event!: IEvent;
-
-  formatDistanceToNow = formatDistanceToNow;
-}
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
 </script>
-<style lang="scss" scoped>
-p.time {
-  color: $violet-3;
-}
-</style>
diff --git a/js/src/components/Event/ShareEventModal.story.vue b/js/src/components/Event/ShareEventModal.story.vue
new file mode 100644
index 000000000..c153fdc5a
--- /dev/null
+++ b/js/src/components/Event/ShareEventModal.story.vue
@@ -0,0 +1,29 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <ShareEventModal :event="event" />
+    </Variant>
+    <Variant title="Private">
+      <ShareEventModal
+        :event="{ ...event, visibility: EventVisibility.PRIVATE }"
+      />
+    </Variant>
+    <Variant title="Cancelled">
+      <ShareEventModal :event="{ ...event, status: EventStatus.CANCELLED }" />
+    </Variant>
+    <Variant title="No seats left">
+      <ShareEventModal :event="event" :event-capacity-o-k="false" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { EventVisibility, EventStatus } from "@/types/enums";
+import ShareEventModal from "./ShareEventModal.vue";
+
+const event = {
+  title: "hello",
+  url: "https://mobilizon.fr/events/an-uuid",
+  visibility: EventVisibility.PUBLIC,
+};
+</script>
diff --git a/js/src/components/Event/ShareEventModal.vue b/js/src/components/Event/ShareEventModal.vue
index c6afd9317..bec5c4a95 100644
--- a/js/src/components/Event/ShareEventModal.vue
+++ b/js/src/components/Event/ShareEventModal.vue
@@ -1,220 +1,49 @@
 <template>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">{{ $t("Share this event") }}</p>
-    </header>
-
-    <section class="modal-card-body is-flex" v-if="event">
-      <div class="container has-text-centered">
-        <b-notification
-          type="is-warning"
-          v-if="event.visibility !== EventVisibility.PUBLIC"
-          :closable="false"
-        >
-          {{
-            $t(
-              "This event is accessible only through it's link. Be careful where you post this link."
-            )
-          }}
-        </b-notification>
-        <b-notification
-          type="is-danger"
-          v-if="event.status === EventStatus.CANCELLED"
-          :closable="false"
-        >
-          {{ $t("This event has been cancelled.") }}
-        </b-notification>
-        <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
-          {{ $t("All the places have already been taken") }}
-        </small>
-        <b-field :label="$t('Event URL')" label-for="event-url-text">
-          <b-input
-            id="event-url-text"
-            ref="eventURLInput"
-            :value="event.url"
-            expanded
-          />
-          <p class="control">
-            <b-tooltip
-              :label="$t('URL copied to clipboard')"
-              :active="showCopiedTooltip"
-              always
-              type="is-success"
-              position="is-left"
-            >
-              <b-button
-                type="is-primary"
-                icon-right="content-paste"
-                native-type="button"
-                @click="copyURL"
-                @keyup.enter="copyURL"
-                :title="$t('Copy URL to clipboard')"
-              />
-            </b-tooltip>
-          </p>
-        </b-field>
-        <div>
-          <a
-            :href="twitterShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="mastodonShareUrl"
-            class="mastodon"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Mastodon"
-          >
-            <mastodon-logo />
-          </a>
-          <a
-            :href="facebookShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="whatsAppShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="telegramShareUrl"
-            class="telegram"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Telegram"
-          >
-            <telegram-logo />
-          </a>
-          <a
-            :href="linkedInShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="diasporaShareUrl"
-            class="diaspora"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Diaspora"
-          >
-            <diaspora-logo />
-          </a>
-          <a
-            :href="emailShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
-          /></a>
-        </div>
-      </div>
-    </section>
+  <div class="dark:text-white">
+    <ShareModal
+      :title="t('Share this event')"
+      :text="event.title"
+      :url="event.url"
+      :input-label="t('Event URL')"
+    >
+      <o-notification
+        variant="warning"
+        v-if="event.visibility !== EventVisibility.PUBLIC"
+        :closable="false"
+      >
+        {{
+          $t(
+            "This event is accessible only through it's link. Be careful where you post this link."
+          )
+        }}
+      </o-notification>
+      <o-notification
+        variant="danger"
+        v-if="event.status === EventStatus.CANCELLED"
+        :closable="false"
+      >
+        {{ $t("This event has been cancelled.") }}
+      </o-notification>
+      <o-notification variant="warning" v-if="!eventCapacityOK">
+        {{ $t("All the places have already been taken") }}
+      </o-notification>
+    </ShareModal>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+<script lang="ts" setup>
 import { EventStatus, EventVisibility } from "@/types/enums";
-import { IEvent } from "../../types/event.model";
-import DiasporaLogo from "../Share/DiasporaLogo.vue";
-import MastodonLogo from "../Share/MastodonLogo.vue";
-import TelegramLogo from "../Share/TelegramLogo.vue";
+import { useI18n } from "vue-i18n";
+import { IEvent } from "@/types/event.model";
+import ShareModal from "@/components/Share/ShareModal.vue";
 
-@Component({
-  components: {
-    DiasporaLogo,
-    MastodonLogo,
-    TelegramLogo,
-  },
-})
-export default class ShareEventModal extends Vue {
-  @Prop({ type: Object, required: true }) event!: IEvent;
+withDefaults(
+  defineProps<{
+    event: IEvent;
+    eventCapacityOK?: boolean;
+  }>(),
+  { eventCapacityOK: true }
+);
 
-  @Prop({ type: Boolean, required: false, default: true })
-  eventCapacityOK!: boolean;
-
-  @Ref("eventURLInput") readonly eventURLInput!: any;
-
-  EventVisibility = EventVisibility;
-
-  EventStatus = EventStatus;
-
-  showCopiedTooltip = false;
-
-  get twitterShareUrl(): string {
-    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-      this.event.url
-    )}&text=${this.event.title}`;
-  }
-
-  get facebookShareUrl(): string {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-      this.event.url
-    )}`;
-  }
-
-  get linkedInShareUrl(): string {
-    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
-      this.event.url
-    )}&title=${this.event.title}`;
-  }
-
-  get whatsAppShareUrl(): string {
-    return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
-  }
-
-  get telegramShareUrl(): string {
-    return `https://t.me/share/url?url=${encodeURIComponent(
-      this.event.url
-    )}&text=${encodeURIComponent(this.event.title)}`;
-  }
-
-  get emailShareUrl(): string {
-    return `mailto:?to=&body=${this.event.url}&subject=${this.event.title}`;
-  }
-
-  get diasporaShareUrl(): string {
-    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
-      this.event.title
-    )}&url=${encodeURIComponent(this.event.url)}`;
-  }
-
-  get mastodonShareUrl(): string {
-    return `https://toot.kytta.dev/?text=${encodeURIComponent(
-      this.basicTextToEncode
-    )}`;
-  }
-
-  get basicTextToEncode(): string {
-    return `${this.event.title}\r\n${this.event.url}`;
-  }
-
-  copyURL(): void {
-    this.eventURLInput.$refs.input.select();
-    document.execCommand("copy");
-    this.showCopiedTooltip = true;
-    setTimeout(() => {
-      this.showCopiedTooltip = false;
-    }, 2000);
-  }
-}
+const { t } = useI18n({ useScope: "global" });
 </script>
-<style lang="scss" scoped>
-.diaspora,
-.mastodon,
-.telegram {
-  ::v-deep span svg {
-    width: 2.25rem;
-  }
-}
-</style>
diff --git a/js/src/components/Event/SkeletonEventResult.story.vue b/js/src/components/Event/SkeletonEventResult.story.vue
new file mode 100644
index 000000000..079d01ba7
--- /dev/null
+++ b/js/src/components/Event/SkeletonEventResult.story.vue
@@ -0,0 +1,17 @@
+<template>
+  <Story>
+    <Variant title="row">
+      <SkeletonEventResult />
+    </Variant>
+    <Variant title="column">
+      <SkeletonEventResult view-mode="column" />
+    </Variant>
+    <Variant title="not minimal">
+      <SkeletonEventResult :minimal="false" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import SkeletonEventResult from "./SkeletonEventResult.vue";
+</script>
diff --git a/js/src/components/Event/SkeletonEventResult.vue b/js/src/components/Event/SkeletonEventResult.vue
new file mode 100644
index 000000000..d29223e85
--- /dev/null
+++ b/js/src/components/Event/SkeletonEventResult.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    :class="`bg-white dark:bg-slate-800 shadow rounded-md ${
+      isRowMode ? 'max-w-4xl' : 'max-w-sm'
+    } w-full mx-auto`"
+  >
+    <div
+      :class="`animate-pulse flex flex-col items-center ${
+        isRowMode ? 'md:flex-row' : 'md:flex-col'
+      }`"
+    >
+      <div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700" />
+
+      <div
+        class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"
+      >
+        <span class="h-2 bg-slate-700"></span>
+        <span class="mb-2 h-4 bg-slate-700"></span>
+
+        <div class="flex space-x-4 flex-row">
+          <div class="rounded-full bg-slate-700 h-10 w-10"></div>
+          <div class="flex flex-col flex-1 space-y-2">
+            <div class="h-3 bg-slate-700"></div>
+            <div class="h-2 bg-slate-700"></div>
+          </div>
+        </div>
+        <div class="h-3 bg-slate-700 mt-3 w-60" v-if="!minimal"></div>
+        <div class="flex" v-if="!minimal">
+          <div
+            class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"
+            v-for="i in 3"
+            :key="i"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+const props = withDefaults(
+  defineProps<{
+    viewMode?: string;
+    minimal?: boolean;
+  }>(),
+  { viewMode: "row", minimal: true }
+);
+
+const isRowMode = computed<boolean>(() => props.viewMode == "row");
+</script>
diff --git a/js/src/components/Event/TagInput.story.vue b/js/src/components/Event/TagInput.story.vue
new file mode 100644
index 000000000..ed30e63e4
--- /dev/null
+++ b/js/src/components/Event/TagInput.story.vue
@@ -0,0 +1,23 @@
+<template>
+  <Story>
+    <Variant title="new">
+      <TagInput v-model="tags" :fetch-tags="fetchTags" />
+    </Variant>
+    <!-- <Variant title="small">
+      <TagInput v-model="tags" />
+    </Variant> -->
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { ITag } from "@/types/tag.model";
+import { reactive } from "vue";
+import TagInput from "./TagInput.vue";
+
+const tags = reactive<ITag[]>([{ title: "Hello", slug: "hello" }]);
+
+const fetchTags = async () =>
+  new Promise<ITag[]>((resolve) => {
+    resolve([{ title: "Welcome", slug: "welcome" }]);
+  });
+</script>
diff --git a/js/src/components/Event/TagInput.vue b/js/src/components/Event/TagInput.vue
index 9d4a6671c..dc88546e5 100644
--- a/js/src/components/Event/TagInput.vue
+++ b/js/src/components/Event/TagInput.vue
@@ -1,104 +1,91 @@
 <template>
-  <b-field :label-for="id">
-    <template slot="label">
+  <o-field :label-for="id">
+    <template #label>
       {{ $t("Add some tags") }}
-      <b-tooltip
-        type="is-dark"
+      <o-tooltip
+        variant="dark"
         :label="
           $t('You can add tags by hitting the Enter key or by adding a comma')
         "
       >
-        <b-icon size="is-small" icon="help-circle-outline"></b-icon>
-      </b-tooltip>
+        <HelpCircleOutline :size="16" />
+      </o-tooltip>
     </template>
-    <b-taginput
+    <o-inputitems
       v-model="tagsStrings"
       :data="filteredTags"
-      autocomplete
+      :autocomplete="true"
       :allow-new="true"
       :field="'title'"
       icon="label"
-      maxlength="20"
-      maxtags="10"
+      :maxlength="20"
+      :maxitems="10"
       :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
       @typing="debouncedGetFilteredTags"
       :id="id"
       dir="auto"
     >
-    </b-taginput>
-  </b-field>
+    </o-inputitems>
+  </o-field>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
-import { FILTER_TAGS } from "@/graphql/tags";
 import debounce from "lodash/debounce";
+import { computed, onBeforeMount, ref } from "vue";
+import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
 
-@Component({
-  apollo: {
-    tags: {
-      query: FILTER_TAGS,
-      variables() {
-        return {
-          filter: this.text,
-        };
-      },
-    },
+const props = defineProps<{
+  modelValue: ITag[];
+  fetchTags: (text: string) => Promise<ITag[]>;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const text = ref("");
+
+const tags = ref<ITag[]>([]);
+
+let componentId = 0;
+
+onBeforeMount(() => {
+  componentId += 1;
+});
+
+const id = computed((): string => {
+  return `tag-input-${componentId}`;
+});
+
+const getFilteredTags = async (newText: string): Promise<void> => {
+  text.value = newText;
+  tags.value = await props.fetchTags(newText);
+};
+
+const debouncedGetFilteredTags = debounce(getFilteredTags, 200);
+
+const filteredTags = computed((): ITag[] => {
+  return differenceBy(tags.value, props.modelValue, "id").filter(
+    (option) =>
+      option.title.toString().toLowerCase().indexOf(text.value.toLowerCase()) >=
+        0 ||
+      option.slug.toString().toLowerCase().indexOf(text.value.toLowerCase()) >=
+        0
+  );
+});
+
+const tagsStrings = computed({
+  get(): string[] {
+    return props.modelValue.map((tag: ITag) => tag.title);
   },
-})
-export default class TagInput extends Vue {
-  @Prop({ required: true }) value!: ITag[];
-
-  tags!: ITag[];
-
-  text = "";
-
-  private static componentId = 0;
-
-  created(): void {
-    TagInput.componentId += 1;
-  }
-
-  get id(): string {
-    return `tag-input-${TagInput.componentId}`;
-  }
-
-  data(): Record<string, unknown> {
-    return {
-      debouncedGetFilteredTags: debounce(this.getFilteredTags, 200),
-    };
-  }
-
-  async getFilteredTags(text: string): Promise<void> {
-    this.text = text;
-    await this.$apollo.queries.tags.refetch();
-  }
-
-  get filteredTags(): ITag[] {
-    return differenceBy(this.tags, this.value, "id").filter(
-      (option) =>
-        option.title
-          .toString()
-          .toLowerCase()
-          .indexOf(this.text.toLowerCase()) >= 0 ||
-        option.slug.toString().toLowerCase().indexOf(this.text.toLowerCase()) >=
-          0
-    );
-  }
-
-  get tagsStrings(): string[] {
-    return (this.value || []).map((tag: ITag) => tag.title);
-  }
-
-  set tagsStrings(tagsStrings: string[]) {
-    const tagEntities = tagsStrings.map((tag: string | ITag) => {
+  set(newTagsStrings: string[]) {
+    console.debug("tagsStrings", newTagsStrings);
+    const tagEntities = newTagsStrings.map((tag: string | ITag) => {
       if (typeof tag !== "string") {
         return tag;
       }
       return { title: tag, slug: tag } as ITag;
     });
-    this.$emit("input", tagEntities);
-  }
-}
+    emit("update:modelValue", tagEntities);
+  },
+});
 </script>
diff --git a/js/src/components/Feedback/SentryFeedback.vue b/js/src/components/Feedback/SentryFeedback.vue
new file mode 100644
index 000000000..0e4842cae
--- /dev/null
+++ b/js/src/components/Feedback/SentryFeedback.vue
@@ -0,0 +1,132 @@
+<template>
+  <form
+    v-if="sentryReady && !submittedFeedback"
+    @submit.prevent="sendErrorToSentry"
+  >
+    <o-field :label="t('What happened?')" label-for="what-happened">
+      <o-input
+        v-model="feedback"
+        type="textarea"
+        id="what-happened"
+        :placeholder="t(`I've clicked on X, then on Y`)"
+      />
+    </o-field>
+    <o-button icon-left="send" native-type="submit" variant="primary">{{
+      t("Send feedback")
+    }}</o-button>
+    <p class="prose dark:prose-invert">
+      {{
+        t(
+          "Please add as many details as possible to help identify the problem."
+        )
+      }}
+    </p>
+  </form>
+  <o-notification variant="danger" v-else-if="feedbackError">
+    <p>
+      {{
+        t(
+          "Sorry, we wen't able to save your feedback. Don't worry, we'll try to fix this issue anyway."
+        )
+      }}
+    </p>
+    <i18n-t keypath="You may now close this page or {return_to_the_homepage}.">
+      <template #return_to_the_homepage>
+        <router-link :to="{ name: RouteName.HOME }">{{
+          t("return to the homepage")
+        }}</router-link>
+      </template>
+    </i18n-t>
+  </o-notification>
+  <o-notification variant="success" v-else-if="submittedFeedback">
+    <p>{{ t("Thanks a lot, your feedback was submitted!") }}</p>
+    <i18n-t keypath="You may now close this page or {return_to_the_homepage}.">
+      <template #return_to_the_homepage>
+        <router-link :to="{ name: RouteName.HOME }">{{
+          t("return to the homepage")
+        }}</router-link>
+      </template>
+    </i18n-t>
+  </o-notification>
+  <div class="prose dark:prose-invert" v-if="!sentryReady || submittedFeedback">
+    <p v-if="submittedFeedback">{{ $t("You may also:") }}</p>
+    <ul>
+      <li>
+        <a href="https://framacolibri.org/c/mobilizon/39" target="_blank">{{
+          $t("Open a topic on our forum")
+        }}</a>
+      </li>
+      <li>
+        <a
+          href="https://framagit.org/framasoft/mobilizon/-/issues/"
+          target="_blank"
+          >{{ $t("Open an issue on our bug tracker (advanced users)") }}</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { convertConfig } from "@/services/statistics";
+import { IAnalyticsConfig } from "@/types/config.model";
+import { ISentryConfiguration } from "@/types/analytics/sentry.model";
+import { submitFeedback } from "@/services/statistics/sentry";
+import { computed, ref } from "vue";
+import { useLoggedUser } from "@/composition/apollo/user";
+import { useI18n } from "vue-i18n";
+import RouteName from "@/router/name";
+
+const props = defineProps<{
+  providerConfig: IAnalyticsConfig;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+
+const { loggedUser } = useLoggedUser();
+
+const feedback = ref("");
+const submittedFeedback = ref(false);
+const feedbackError = ref(false);
+
+const sentryConfig = computed((): ISentryConfiguration | undefined => {
+  if (props.providerConfig?.configuration) {
+    return convertConfig(
+      props.providerConfig?.configuration
+    ) as ISentryConfiguration;
+  }
+  return undefined;
+});
+
+const sentryReady = computed(() => {
+  const eventId = window.sessionStorage.getItem("lastEventId");
+  const dsn = sentryConfig.value?.dsn;
+  const organization = sentryConfig.value?.organization;
+  const project = sentryConfig.value?.project;
+  const host = sentryConfig.value?.host;
+  return eventId && dsn && organization && project && host;
+});
+
+const sendErrorToSentry = async () => {
+  try {
+    const eventId = window.sessionStorage.getItem("lastEventId");
+    const dsn = sentryConfig.value?.dsn;
+    const organization = sentryConfig.value?.organization;
+    const project = sentryConfig.value?.project;
+    const host = sentryConfig.value?.host;
+    const endpoint = `https://${host}/api/0/projects/${organization}/${project}/user-feedback/`;
+    if (eventId && dsn && sentryReady) {
+      await submitFeedback(endpoint, dsn, {
+        event_id: eventId,
+        name:
+          loggedUser.value?.defaultActor?.preferredUsername || "Unknown user",
+        email: loggedUser.value?.email || "unknown@email.org",
+        comments: feedback.value,
+      });
+      submittedFeedback.value = true;
+    }
+  } catch (error) {
+    console.error(error);
+    feedbackError.value = true;
+  }
+};
+</script>
diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue
deleted file mode 100644
index 5c1a18a9a..000000000
--- a/js/src/components/Footer.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-  <footer class="footer" ref="footer">
-    <picture>
-      <source
-        :srcset="`/img/pics/footer_${random}-1024w.webp 1x, /img/pics/footer_${random}-1920w.webp 2x`"
-        type="image/webp"
-      />
-      <source
-        :srcset="`/img/pics/footer_${random}-1024w.jpg 1x, /img/pics/footer_${random}-1920w.jpg 2x`"
-        type="image/jpeg"
-      />
-      <img
-        :src="`/img/pics/footer_${random}-1024w.jpg`"
-        alt=""
-        width="5234"
-        height="2189"
-        loading="lazy"
-      />
-    </picture>
-    <ul>
-      <li>
-        <b-select
-          :aria-label="$t('Language')"
-          v-if="$i18n"
-          v-model="locale"
-          :placeholder="$t('Select a language')"
-        >
-          <option
-            v-for="(language, lang) in langs"
-            :value="lang"
-            :key="lang"
-            :selected="isLangSelected(lang)"
-          >
-            {{ language }}
-          </option>
-        </b-select>
-      </li>
-      <li>
-        <router-link :to="{ name: RouteName.ABOUT }">{{
-          $t("About")
-        }}</router-link>
-      </li>
-      <li>
-        <router-link :to="{ name: RouteName.TERMS }">{{
-          $t("Terms")
-        }}</router-link>
-      </li>
-      <li>
-        <a
-          rel="external"
-          hreflang="en"
-          href="https://framagit.org/framasoft/mobilizon/blob/main/LICENSE"
-        >
-          {{ $t("License") }}
-        </a>
-      </li>
-      <li>
-        <a href="#navbar">{{ $t("Back to top") }}</a>
-      </li>
-    </ul>
-    <div class="content has-text-centered">
-      <i18n
-        tag="span"
-        path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
-      >
-        <a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
-          $t("Mobilizon")
-        }}</a>
-        <span slot="date">{{ new Date().getFullYear() }}</span>
-        <a
-          rel="external"
-          href="https://joinmobilizon.org/hall-of-fame"
-          slot="contributors"
-          >{{ $t("more than 1360 contributors") }}</a
-        >
-      </i18n>
-    </div>
-  </footer>
-</template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { saveLocaleData } from "@/utils/auth";
-import { loadLanguageAsync } from "@/utils/i18n";
-import RouteName from "../router/name";
-import langs from "../i18n/langs.json";
-
-@Component
-export default class Footer extends Vue {
-  RouteName = RouteName;
-
-  locale: string | null = this.$i18n.locale;
-
-  langs: Record<string, string> = langs;
-
-  // eslint-disable-next-line class-methods-use-this
-  get random(): number {
-    return Math.floor(Math.random() * 4) + 1;
-  }
-
-  @Watch("locale")
-  // eslint-disable-next-line class-methods-use-this
-  async updateLocale(locale: string): Promise<void> {
-    if (locale) {
-      console.debug("Setting locale from footer");
-      await loadLanguageAsync(locale);
-      saveLocaleData(locale);
-    }
-  }
-
-  @Watch("$i18n.locale", { deep: true })
-  updateLocaleFromI18n(locale: string): void {
-    if (locale) {
-      this.locale = locale;
-    }
-  }
-
-  isLangSelected(lang: string): boolean {
-    return lang === this.locale;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@import "~bulma/sass/utilities/mixins.sass";
-footer.footer {
-  color: $secondary;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-size: 14px;
-  padding: 1rem 1.5rem;
-
-  img {
-    flex: 1;
-    max-width: 40rem;
-    @include mobile {
-      max-width: 100%;
-    }
-  }
-
-  div.content {
-    flex: 1;
-    padding-top: 10px;
-  }
-
-  ul {
-    display: inline-flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-
-    li {
-      display: inline-flex;
-      margin: auto 5px;
-      padding: 2px 0;
-      a {
-        font-size: 1.1rem;
-      }
-    }
-  }
-
-  a {
-    color: $white;
-    text-decoration: underline;
-    text-decoration-color: $secondary;
-
-    &:focus {
-      background-color: #000;
-      color: #fff;
-      outline: 3px solid #000;
-      text-decoration: none;
-    }
-  }
-
-  ::v-deep span.select {
-    select,
-    option {
-      background: $background-color;
-      color: $white;
-    }
-  }
-}
-</style>
diff --git a/js/src/components/Group/GroupCard.story.vue b/js/src/components/Group/GroupCard.story.vue
new file mode 100644
index 000000000..9539e818c
--- /dev/null
+++ b/js/src/components/Group/GroupCard.story.vue
@@ -0,0 +1,60 @@
+<template>
+  <Story>
+    <Variant title="Empty">
+      <div class="p-5">
+        <GroupCard :group="basicGroup" />
+      </div>
+    </Variant>
+    <Variant title="With media">
+      <div class="p-5">
+        <GroupCard :group="groupWithMedia" />
+      </div>
+    </Variant>
+    <Variant title="with followers or members">
+      <div class="p-5">
+        <GroupCard :group="groupWithFollowersOrMembers" />
+      </div>
+    </Variant>
+    <Variant title="Row mode">
+      <GroupCard :group="groupWithFollowersOrMembers" mode="row" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IGroup } from "@/types/actor";
+import GroupCard from "./GroupCard.vue";
+
+const basicGroup: IGroup = {
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  avatar: null,
+  domain: "mobilizon.fr",
+  url: "",
+  summary: "",
+  suspended: false,
+  members: { total: 0, elements: [] },
+  followers: { total: 0, elements: [] },
+};
+
+const groupWithMedia: IGroup = {
+  ...basicGroup,
+  banner: {
+    url: "https://mobilizon.fr/media/7b340fe641e7ad711ebb6f8821b5ce824992db08701e37ebb901c175436aaafc.jpg?name=framasoft%27s%20banner.jpg",
+  },
+  avatar: {
+    url: "https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png",
+  },
+};
+
+const groupWithFollowersOrMembers: IGroup = {
+  ...groupWithMedia,
+  members: { total: 2, elements: [] },
+  followers: { total: 5, elements: [] },
+  summary:
+    "You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:h-full to apply the h-full utility at only medium screen sizes and above.",
+  physicalAddress: {
+    description: "Nantes",
+  },
+};
+</script>
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index f913cce72..cfa881228 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -1,139 +1,132 @@
 <template>
-  <router-link
-    :to="{
-      name: RouteName.GROUP,
-      params: { preferredUsername: usernameWithDomain(group) },
+  <LinkOrRouterLink
+    :to="to"
+    :isInternal="isInternal"
+    class="mbz-card shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg my-4 flex items-center flex-col"
+    :class="{
+      'sm:flex-row': mode === 'row',
+      'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',
     }"
-    class="card"
   >
-    <div class="card-image">
-      <figure class="image is-16by9">
-        <lazy-image-wrapper
-          :picture="group.banner"
-          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
+    <div class="flex-none p-2 md:p-4">
+      <figure class="" v-if="group.avatar">
+        <img
+          class="rounded-full"
+          :src="group.avatar.url"
+          alt=""
+          height="128"
+          width="128"
         />
       </figure>
+      <AccountGroup v-else :size="128" />
     </div>
-    <div class="card-content">
-      <div class="media mb-2">
-        <div class="media-left">
-          <figure class="image is-48x48" v-if="group.avatar">
-            <img class="is-rounded" :src="group.avatar.url" alt="" />
-          </figure>
-          <b-icon v-else size="is-large" icon="account-group" />
-        </div>
-        <div class="media-content">
-          <h3 class="is-size-5 group-title" dir="auto">
+    <div
+      class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full"
+      :class="{ 'sm:flex-1': mode === 'row' }"
+    >
+      <div class="flex gap-1 mb-2">
+        <div class="overflow-hidden flex-auto">
+          <h3
+            class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white"
+            dir="auto"
+          >
             {{ displayName(group) }}
           </h3>
-          <span class="is-6 has-text-grey-dark group-federated-username">
+          <span class="block truncate">
             {{ `@${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
-          class="has-text-grey-dark"
           v-if="group.physicalAddress && addressFullName(group.physicalAddress)"
           :physicalAddress="group.physicalAddress"
         />
-        <p class="has-text-grey-dark">
-          <b-icon icon="account" />
+        <p
+          class="flex gap-1"
+          v-if="group?.members?.total && group?.followers?.total"
+        >
+          <Account />
           {{
-            $tc(
+            t(
               "{count} members or followers",
-              group.members.total + group.followers.total,
               {
                 count: group.members.total + group.followers.total,
-              }
+              },
+              group.members.total + group.followers.total
+            )
+          }}
+        </p>
+        <p
+          class="flex gap-1"
+          v-else-if="group?.membersCount || group?.followersCount"
+        >
+          <Account />
+          {{
+            t(
+              "{count} members or followers",
+              {
+                count: (group.membersCount ?? 0) + (group.followersCount ?? 0),
+              },
+              (group.membersCount ?? 0) + (group.followersCount ?? 0)
             )
           }}
         </p>
       </div>
     </div>
-  </router-link>
+  </LinkOrRouterLink>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
-import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import RouteName from "../../router/name";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
 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";
+import LinkOrRouterLink from "../core/LinkOrRouterLink.vue";
 
-@Component({
-  components: {
-    LazyImageWrapper,
-    InlineAddress,
-  },
-})
-export default class GroupCard extends Vue {
-  @Prop({ required: true }) group!: IGroup;
+const props = withDefaults(
+  defineProps<{
+    group: IGroup;
+    showSummary?: boolean;
+    isRemoteGroup?: boolean;
+    isLoggedIn?: boolean;
+    mode?: "row" | "column";
+  }>(),
+  { showSummary: true, isRemoteGroup: false, isLoggedIn: true, mode: "column" }
+);
 
-  RouteName = RouteName;
+const { t } = useI18n({ useScope: "global" });
 
-  usernameWithDomain = usernameWithDomain;
+const saneSummary = computed(() => htmlToText(props.group.summary ?? ""));
 
-  displayName = displayName;
+const isInternal = computed(() => {
+  return props.isRemoteGroup && props.isLoggedIn === false;
+});
 
-  addressFullName = addressFullName;
-}
-</script>
-<style lang="scss" scoped>
-.card {
-  .card-content {
-    padding: 0.75rem;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .content {
-      flex: 1;
-    }
-
-    ::v-deep .content {
-      & > *:first-child {
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        margin-bottom: 0;
-
-        * {
-          font-weight: normal;
-          text-transform: none;
-          font-style: normal;
-          text-decoration: none;
-        }
-      }
-      & > *:not(:first-child) {
-        display: none;
-      }
-    }
-
-    .media-left {
-      margin-right: inherit;
-      margin-inline-end: 0.5rem;
-    }
-
-    .media-content {
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      .group-title {
-        line-height: 1.5rem;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        font-weight: bold;
-      }
-      .group-federated-username {
-        font-size: 14px;
-      }
+const to = computed(() => {
+  if (props.isRemoteGroup) {
+    if (props.isLoggedIn === false) {
+      return props.group.url;
     }
+    return {
+      name: RouteName.INTERACT,
+      query: { uri: encodeURI(props.group.url) },
+    };
   }
-}
-</style>
+  return {
+    name: RouteName.GROUP,
+    params: { preferredUsername: usernameWithDomain(props.group) },
+  };
+});
+</script>
diff --git a/js/src/components/Group/GroupMemberCard.story.vue b/js/src/components/Group/GroupMemberCard.story.vue
new file mode 100644
index 000000000..461d2177c
--- /dev/null
+++ b/js/src/components/Group/GroupMemberCard.story.vue
@@ -0,0 +1,91 @@
+<template>
+  <Story>
+    <Variant title="simple member">
+      <div class="p-5">
+        <GroupMemberCard :member="basicMember" />
+      </div>
+    </Variant>
+    <Variant title="moderator">
+      <div class="p-5">
+        <GroupMemberCard :member="moderatorMember" />
+      </div>
+    </Variant>
+    <Variant title="administrator">
+      <div class="p-5">
+        <GroupMemberCard :member="adminMember" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IActor } from "@/types/actor";
+import { IMember } from "@/types/actor/member.model";
+import { MemberRole } from "@/types/enums";
+import GroupMemberCard from "./GroupMemberCard.vue";
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const basePerson: IActor = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+};
+
+const basicGroup: IActor = {
+  name: "Framasoft",
+  preferredUsername: "framasoft",
+  avatar: {
+    url: "https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png",
+  },
+  domain: "mobilizon.fr",
+  url: "",
+  summary: `<p><strong>La Fediverse</strong>, <strong>c'est la <em><u>Féd</u>ération qui englobe l'Un<u>ivers</u> des réseaux sociaux libres et décentralisés,</em> </strong>dont Mobilizon (évènements), Mastodon (microblog), Peertube (vidéos), Pixelfed (photos), Funkwhale (musique), Matrix (messagerie instantanée)... et tant d'autres font partie.</p><p><strong>Et "La Fediverse <em>Nantaise</em>" est un collectif cherchant à faire connaître localement tout le potentiel de ces réseaux ! :-)</strong></p>`,
+  suspended: false,
+  members: { total: 0, elements: [] },
+  followers: { total: 0, elements: [] },
+};
+
+const basicMember: IMember = {
+  parent: basicGroup as IActor,
+  actor: basePerson,
+  role: MemberRole.MEMBER,
+};
+
+const moderatorMember: IMember = {
+  parent: basicGroup,
+  actor: basePerson,
+  role: MemberRole.MODERATOR,
+};
+
+const adminMember: IMember = {
+  parent: basicGroup,
+  actor: basePerson,
+  role: MemberRole.ADMINISTRATOR,
+};
+
+// const groupWithMedia = {
+//   ...basicGroup,
+//   banner: {
+//     url: "https://mobilizon.fr/media/7b340fe641e7ad711ebb6f8821b5ce824992db08701e37ebb901c175436aaafc.jpg?name=framasoft%27s%20banner.jpg",
+//   },
+//   avatar: {
+//     url: "https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png",
+//   },
+// };
+
+// const groupWithFollowersOrMembers = {
+//   ...groupWithMedia,
+//   members: { total: 2, elements: [] },
+//   followers: { total: 5, elements: [] },
+// };
+</script>
diff --git a/js/src/components/Group/GroupMemberCard.vue b/js/src/components/Group/GroupMemberCard.vue
index 2e8fd8e7c..748712044 100644
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -1,22 +1,37 @@
 <template>
-  <div class="card">
-    <div class="identity-header" dir="auto">
-      <figure class="image is-24x24" v-if="member.actor.avatar">
-        <img class="is-rounded" :src="member.actor.avatar.url" alt="" />
+  <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
+    <div
+      class="bg-yellow-2 text-black flex items-center gap-1 p-2 rounded-t-lg"
+      dir="auto"
+    >
+      <figure class="" v-if="member.actor.avatar">
+        <img
+          class="rounded-xl"
+          :src="member.actor.avatar.url"
+          alt=""
+          width="24"
+          height="24"
+        />
       </figure>
-      <b-icon v-else icon="account-circle" />
+      <AccountCircle v-else :size="24" />
       {{ displayNameAndUsername(member.actor) }}
     </div>
-    <div class="card-content" dir="auto">
-      <div>
-        <div class="media">
-          <div class="media-left">
-            <figure class="image is-48x48" v-if="member.parent.avatar">
-              <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
+    <div class="flex items-center gap-2 p-2 pr-4" dir="auto">
+      <div class="flex-1">
+        <div class="p-2 flex gap-2">
+          <div class="">
+            <figure class="" v-if="member.parent.avatar">
+              <img
+                class="rounded-lg"
+                :src="member.parent.avatar.url"
+                alt=""
+                width="48"
+                height="48"
+              />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <AccountGroup v-else :size="48" />
           </div>
-          <div class="media-content" dir="auto">
+          <div class="" dir="auto">
             <router-link
               :to="{
                 name: RouteName.GROUP,
@@ -25,94 +40,69 @@
                 },
               }"
             >
-              <h2>{{ member.parent.name }}</h2>
-              <p class="is-6 has-text-grey-dark">
-                <span>{{ `@${usernameWithDomain(member.parent)}` }}</span>
-                <b-taglist>
-                  <b-tag
-                    type="is-info"
-                    v-if="member.role === MemberRole.ADMINISTRATOR"
-                    >{{ $t("Administrator") }}</b-tag
-                  >
-                  <b-tag
-                    type="is-info"
-                    v-else-if="member.role === MemberRole.MODERATOR"
-                    >{{ $t("Moderator") }}</b-tag
-                  >
-                </b-taglist>
-              </p>
+              <h2 class="mt-0">{{ member.parent.name }}</h2>
+              <div class="flex flex-col items-start">
+                <span class="text-sm">{{
+                  `@${usernameWithDomain(member.parent)}`
+                }}</span>
+                <tag
+                  variant="info"
+                  v-if="member.role === MemberRole.ADMINISTRATOR"
+                  >{{ t("Administrator") }}</tag
+                >
+                <tag
+                  variant="info"
+                  v-else-if="member.role === MemberRole.MODERATOR"
+                  >{{ t("Moderator") }}</tag
+                >
+              </div>
             </router-link>
           </div>
         </div>
-        <div class="content" v-if="member.parent.summary">
-          <p v-html="member.parent.summary" />
-        </div>
+        <div
+          class="mt-3 prose dark:prose-invert lg:prose-xl line-clamp-2"
+          v-if="member.parent.summary"
+          v-html="htmlToText(member.parent.summary)"
+        />
       </div>
       <div>
-        <b-dropdown aria-role="list" position="is-bottom-left">
-          <b-icon icon="dots-horizontal" slot="trigger" />
+        <o-dropdown aria-role="list" position="bottom-left">
+          <template #trigger>
+            <DotsHorizontal class="cursor-pointer" />
+          </template>
 
-          <b-dropdown-item aria-role="listitem" @click="$emit('leave')">
-            <b-icon icon="exit-to-app" />
-            {{ $t("Leave") }}
-          </b-dropdown-item>
-        </b-dropdown>
+          <o-dropdown-item
+            class="inline-flex gap-1"
+            aria-role="listitem"
+            @click="emit('leave')"
+          >
+            <ExitToApp />
+            {{ t("Leave") }}
+          </o-dropdown-item>
+        </o-dropdown>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { displayNameAndUsername, usernameWithDomain } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
 import { MemberRole } from "@/types/enums";
 import RouteName from "../../router/name";
+import ExitToApp from "vue-material-design-icons/ExitToApp.vue";
+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/TagElement.vue";
+import { htmlToText } from "@/utils/html";
+import { useI18n } from "vue-i18n";
 
-@Component
-export default class GroupMemberCard extends Vue {
-  @Prop({ required: true }) member!: IMember;
+defineProps<{
+  member: IMember;
+}>();
 
-  RouteName = RouteName;
+const emit = defineEmits(["leave"]);
 
-  usernameWithDomain = usernameWithDomain;
-
-  displayNameAndUsername = displayNameAndUsername;
-
-  MemberRole = MemberRole;
-}
+const { t } = useI18n({ useScope: "global" });
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.card {
-  .card-content {
-    display: flex;
-    align-items: center;
-
-    & > div:first-child {
-      flex: 1;
-    }
-
-    & > div:last-child {
-      cursor: pointer;
-    }
-
-    .media-content {
-      ::v-deep .tags {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .identity-header {
-    background: $yellow-2;
-    display: flex;
-    padding: 5px;
-
-    figure,
-    span.icon {
-      @include padding-right(3px);
-    }
-  }
-}
-</style>
diff --git a/js/src/components/Group/GroupSection.vue b/js/src/components/Group/GroupSection.vue
index f6e9d6658..038409c04 100644
--- a/js/src/components/Group/GroupSection.vue
+++ b/js/src/components/Group/GroupSection.vue
@@ -1,95 +1,40 @@
 <template>
-  <section>
-    <div class="group-section-title" :class="{ privateSection }">
-      <h2>
-        <b-icon :icon="icon" />
-        <span>{{ title }}</span>
-      </h2>
-      <router-link :to="route">{{ $t("View all") }}</router-link>
+  <section
+    class="flex flex-col mb-3 border-2"
+    :class="{
+      'border-mbz-purple': privateSection,
+      'border-yellow-1': !privateSection,
+    }"
+  >
+    <div class="flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title">
+      <div class="flex flex-1 gap-1">
+        <o-icon :icon="icon" custom-size="36" />
+        <h2 class="text-2xl font-medium mt-0">{{ title }}</h2>
+      </div>
+      <router-link class="self-center" :to="route">{{
+        t("View all")
+      }}</router-link>
     </div>
-    <div class="main-slot">
+    <div class="flex-1">
       <slot></slot>
     </div>
-    <div class="create-slot">
+    <div class="flex justify-end p-2">
       <slot name="create"></slot>
     </div>
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { Route } from "vue-router";
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 
-@Component
-export default class GroupSection extends Vue {
-  @Prop({ required: true, type: String }) title!: string;
-
-  @Prop({ required: true, type: String }) icon!: string;
-
-  @Prop({ required: false, type: Boolean, default: true })
-  privateSection!: boolean;
-
-  @Prop({ required: true, type: Object }) route!: Route;
-}
+withDefaults(
+  defineProps<{
+    title: string;
+    icon: string;
+    privateSection?: boolean;
+    route: { name: string; params: { preferredUsername: string } };
+  }>(),
+  { privateSection: true }
+);
+const { t } = useI18n({ useScope: "global" });
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-section {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 2rem;
-  border: 2px solid $violet;
-  min-height: 30vh;
-
-  .create-slot {
-    display: flex;
-    justify-content: flex-end;
-    padding-bottom: 0.5rem;
-    @include padding-right(0.5rem);
-  }
-
-  .main-slot {
-    min-height: 5rem;
-    padding: 2px 5px;
-    flex: 1;
-  }
-}
-
-div.group-section-title {
-  --title-color: $violet-2;
-  display: flex;
-  align-items: stretch;
-  background: $secondary;
-  color: var(--title-color);
-
-  &.privateSection {
-    color: $purple-3;
-    background: $violet-2;
-  }
-
-  ::v-deep & > a {
-    align-self: center;
-    @include margin-right(5px);
-    color: var(--title-color);
-  }
-
-  h2 {
-    flex: 1;
-
-    ::v-deep span {
-      display: inline;
-      padding: 3px 8px;
-      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-        serif;
-      font-weight: 500;
-      font-size: 30px;
-      flex: 1;
-    }
-
-    ::v-deep span.icon {
-      flex: 0;
-      height: 100%;
-    }
-  }
-}
-</style>
diff --git a/js/src/components/Group/InvitationCard.vue b/js/src/components/Group/InvitationCard.vue
index 28d701f00..f3a2888ed 100644
--- a/js/src/components/Group/InvitationCard.vue
+++ b/js/src/components/Group/InvitationCard.vue
@@ -1,21 +1,29 @@
 <template>
-  <div class="card">
-    <div class="card-content media">
-      <div class="media-content">
-        <div class="content">
-          <i18n
+  <div class="">
+    <div class="">
+      <div class="">
+        <div class="prose dark:prose-invert">
+          <i18n-t
             tag="p"
-            path="You have been invited by {invitedBy} to the following group:"
+            keypath="You have been invited by {invitedBy} to the following group:"
           >
-            <b slot="invitedBy">{{ member.invitedBy.name }}</b>
-          </i18n>
+            <template #invitedBy>
+              <b>{{ member?.invitedBy?.name }}</b>
+            </template>
+          </i18n-t>
         </div>
-        <div class="media subfield">
-          <div class="media-left">
-            <figure class="image is-48x48" v-if="member.parent.avatar">
-              <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
+        <div class="">
+          <div class="">
+            <figure v-if="member.parent.avatar">
+              <img
+                class="rounded"
+                :src="member.parent.avatar.url"
+                alt=""
+                height="48"
+                width="48"
+              />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <AccountGroup :size="48" v-else />
           </div>
           <div class="media-content">
             <div class="level">
@@ -29,8 +37,8 @@
                       },
                     }"
                   >
-                    <h3 class="is-size-5">{{ member.parent.name }}</h3>
-                    <p class="is-size-7 has-text-grey-dark">
+                    <h3 class="">{{ member.parent.name }}</h3>
+                    <p class="">
                       <span v-if="member.parent.domain">
                         {{
                           `@${member.parent.preferredUsername}@${member.parent.domain}`
@@ -43,22 +51,22 @@
                   </router-link>
                 </div>
               </div>
-              <div class="level-right">
-                <div class="level-item">
-                  <b-button
-                    type="is-success"
+              <div class="">
+                <div class="">
+                  <o-button
+                    variant="success"
                     @click="$emit('accept', member.id)"
                   >
                     {{ $t("Accept") }}
-                  </b-button>
+                  </o-button>
                 </div>
-                <div class="level-item">
-                  <b-button
-                    type="is-danger"
+                <div class="">
+                  <o-button
+                    variant="danger"
                     @click="$emit('reject', member.id)"
                   >
                     {{ $t("Decline") }}
-                  </b-button>
+                  </o-button>
                 </div>
               </div>
             </div>
@@ -69,28 +77,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { usernameWithDomain } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
 import RouteName from "../../router/name";
+import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 
-@Component
-export default class InvitationCard extends Vue {
-  @Prop({ required: true }) member!: IMember;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-}
+defineProps<{
+  member: IMember;
+}>();
 </script>
-
-<style lang="scss" scoped>
-.media:not(.subfield) {
-  background: lighten($primary, 40%);
-  padding: 10px;
-}
-h3 {
-  color: $violet-3;
-}
-</style>
diff --git a/js/src/components/Group/Invitations.vue b/js/src/components/Group/Invitations.vue
deleted file mode 100644
index 6d19a99fe..000000000
--- a/js/src/components/Group/Invitations.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <section class="card my-3" v-if="invitations && invitations.length > 0">
-    <InvitationCard
-      v-for="member in invitations"
-      :key="member.id"
-      :member="member"
-      @accept="acceptInvitation"
-      @reject="rejectInvitation"
-    />
-  </section>
-</template>
-<script lang="ts">
-import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import InvitationCard from "@/components/Group/InvitationCard.vue";
-import { PERSON_STATUS_GROUP } from "@/graphql/actor";
-import { IMember } from "@/types/actor/member.model";
-import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
-
-@Component({
-  components: {
-    InvitationCard,
-  },
-})
-export default class Invitations extends Vue {
-  @Prop({ required: true, type: Array }) invitations!: IMember;
-
-  async acceptInvitation(id: string): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ acceptInvitation: IMember }>({
-        mutation: ACCEPT_INVITATION,
-        variables: {
-          id,
-        },
-        refetchQueries({ data }) {
-          const profile = data?.acceptInvitation?.actor as IPerson;
-          const group = data?.acceptInvitation?.parent as IGroup;
-          if (profile && group) {
-            return [
-              {
-                query: PERSON_STATUS_GROUP,
-                variables: { id: profile.id, group: usernameWithDomain(group) },
-              },
-            ];
-          }
-          return [];
-        },
-      });
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  async rejectInvitation(id: string): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ rejectInvitation: IMember }>({
-        mutation: REJECT_INVITATION,
-        variables: {
-          id,
-        },
-        refetchQueries({ data }) {
-          const profile = data?.rejectInvitation?.actor as IPerson;
-          const group = data?.rejectInvitation?.parent as IGroup;
-          if (profile && group) {
-            return [
-              {
-                query: PERSON_STATUS_GROUP,
-                variables: { id: profile.id, group: usernameWithDomain(group) },
-              },
-            ];
-          }
-          return [];
-        },
-      });
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-}
-</script>
diff --git a/js/src/components/Group/InvitationsList.vue b/js/src/components/Group/InvitationsList.vue
new file mode 100644
index 000000000..868375fcf
--- /dev/null
+++ b/js/src/components/Group/InvitationsList.vue
@@ -0,0 +1,73 @@
+<template>
+  <section class="card my-3" v-if="invitations && invitations.length > 0">
+    <InvitationCard
+      v-for="member in invitations"
+      :key="member.id"
+      :member="member"
+      @accept="acceptInvitation"
+      @reject="rejectInvitation"
+    />
+  </section>
+</template>
+<script lang="ts" setup>
+import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member";
+import InvitationCard from "@/components/Group/InvitationCard.vue";
+import { PERSON_STATUS_GROUP } from "@/graphql/actor";
+import { IMember } from "@/types/actor/member.model";
+import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
+import { useMutation } from "@vue/apollo-composable";
+import { ErrorResponse } from "@/types/errors.model";
+import { inject } from "vue";
+import type { Notifier } from "@/plugins/notifier";
+
+defineProps<{
+  invitations: IMember[];
+}>();
+
+const { mutate: acceptInvitation, onError: onAcceptInvitationError } =
+  useMutation(ACCEPT_INVITATION, {
+    refetchQueries({ data }) {
+      const profile = data?.acceptInvitation?.actor as IPerson;
+      const group = data?.acceptInvitation?.parent as IGroup;
+      if (profile && group) {
+        return [
+          {
+            query: PERSON_STATUS_GROUP,
+            variables: { id: profile.id, group: usernameWithDomain(group) },
+          },
+        ];
+      }
+      return [];
+    },
+  });
+
+const notifier = inject<Notifier>("notifier");
+
+const onError = (error: ErrorResponse) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+};
+
+onAcceptInvitationError((err) => onError(err as unknown as ErrorResponse));
+
+const { mutate: rejectInvitation, onError: onRejectInvitationError } =
+  useMutation(REJECT_INVITATION, {
+    refetchQueries({ data }) {
+      const profile = data?.rejectInvitation?.actor as IPerson;
+      const group = data?.rejectInvitation?.parent as IGroup;
+      if (profile && group) {
+        return [
+          {
+            query: PERSON_STATUS_GROUP,
+            variables: { id: profile.id, group: usernameWithDomain(group) },
+          },
+        ];
+      }
+      return [];
+    },
+  });
+
+onRejectInvitationError((err) => onError(err as unknown as ErrorResponse));
+</script>
diff --git a/js/src/components/Group/JoinGroupWithAccount.vue b/js/src/components/Group/JoinGroupWithAccount.vue
index 91138a253..05459327a 100644
--- a/js/src/components/Group/JoinGroupWithAccount.vue
+++ b/js/src/components/Group/JoinGroupWithAccount.vue
@@ -3,60 +3,42 @@
     v-if="uri"
     :uri="uri"
     :pathAfterLogin="`/@${preferredUsername}`"
-    :sentence="sentence"
+    :sentence="
+      t(
+        `We will redirect you to your instance in order to interact with this group`
+      )
+    "
   />
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
-import { FETCH_GROUP } from "@/graphql/group";
-import { displayName, IGroup } from "@/types/actor";
+import { useGroup } from "@/composition/apollo/group";
+import { displayName } from "@/types/actor";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
 
-@Component({
-  components: { RedirectWithAccount },
-  apollo: {
-    group: {
-      query: FETCH_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          name: this.$route.params.preferredUsername,
-          beforeDateTime: null,
-          afterDateTime: new Date(),
-        };
-      },
-      skip() {
-        return !this.$route.params.preferredUsername;
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.$t("Join group {group}", {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        group: this.groupTitle,
-      }) as string,
-    };
-  },
-})
-export default class JoinGroupWithAccount extends Vue {
-  @Prop({ type: String, required: true }) preferredUsername!: string;
+const props = defineProps<{
+  preferredUsername: string;
+}>();
 
-  group!: IGroup;
+const { group } = useGroup(props.preferredUsername);
 
-  get uri(): string {
-    return this.group?.url;
-  }
+const { t } = useI18n({ useScope: "global" });
 
-  get groupTitle(): undefined | string {
-    return this.group && displayName(this.group);
-  }
+useHead({
+  title: computed(() =>
+    t("Join group {group}", {
+      group: groupTitle.value,
+    })
+  ),
+});
 
-  sentence = this.$t(
-    "We will redirect you to your instance in order to interact with this group"
-  );
-}
+const uri = computed((): string | undefined => {
+  return group.value?.url;
+});
+
+const groupTitle = computed((): undefined | string => {
+  return group && displayName(group.value);
+});
 </script>
diff --git a/js/src/components/Group/MultiGroupCard.vue b/js/src/components/Group/MultiGroupCard.vue
index 392581c5f..4d3a7087d 100644
--- a/js/src/components/Group/MultiGroupCard.vue
+++ b/js/src/components/Group/MultiGroupCard.vue
@@ -8,20 +8,13 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IGroup } from "@/types/actor";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import GroupCard from "./GroupCard.vue";
-@Component({
-  components: {
-    GroupCard,
-  },
-})
-export default class MultiGroupCard extends Vue {
-  @Prop({ type: Array as PropType<IGroup[]>, required: true })
-  groups!: IGroup[];
-}
+
+defineProps<{
+  groups: IGroup[];
+}>();
 </script>
 <style lang="scss" scoped>
 .multi-card-group {
diff --git a/js/src/components/Group/Sections/DiscussionsSection.vue b/js/src/components/Group/Sections/DiscussionsSection.vue
new file mode 100644
index 000000000..e8e598672
--- /dev/null
+++ b/js/src/components/Group/Sections/DiscussionsSection.vue
@@ -0,0 +1,48 @@
+<template>
+  <group-section
+    :title="t('Discussions')"
+    icon="chat"
+    :route="{
+      name: RouteName.DISCUSSION_LIST,
+      params: { preferredUsername: usernameWithDomain(group) },
+    }"
+  >
+    <template #default>
+      <div v-if="group?.discussions?.total ?? 0 > 0">
+        <discussion-list-item
+          v-for="discussion in group?.discussions?.elements ?? []"
+          :key="discussion.id"
+          :discussion="discussion"
+        />
+      </div>
+      <empty-content v-else icon="chat" :inline="true">
+        {{ t("No discussions yet") }}
+      </empty-content>
+    </template>
+    <template #create>
+      <o-button
+        tag="router-link"
+        :to="{
+          name: RouteName.CREATE_DISCUSSION,
+          params: { preferredUsername: usernameWithDomain(group) },
+        }"
+        class="button is-primary"
+        >{{ t("+ Start a discussion") }}</o-button
+      >
+    </template>
+  </group-section>
+</template>
+
+<script lang="ts" setup>
+import RouteName from "@/router/name";
+import { IGroup } from "@/types/actor/group.model";
+import { usernameWithDomain } from "@/types/actor";
+import { useI18n } from "vue-i18n";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
+import GroupSection from "@/components/Group/GroupSection.vue";
+
+const { t } = useI18n({ useScope: "global" });
+
+defineProps<{ group: IGroup }>();
+</script>
diff --git a/js/src/components/Group/Sections/EventsSection.vue b/js/src/components/Group/Sections/EventsSection.vue
new file mode 100644
index 000000000..3aa84cf07
--- /dev/null
+++ b/js/src/components/Group/Sections/EventsSection.vue
@@ -0,0 +1,54 @@
+<template>
+  <group-section
+    :title="t('Events')"
+    icon="calendar"
+    :privateSection="false"
+    :route="{
+      name: RouteName.GROUP_EVENTS,
+      params: { preferredUsername: usernameWithDomain(group) },
+    }"
+  >
+    <template #default>
+      <div
+        class="flex flex-wrap gap-2 py-1"
+        v-if="group && group.organizedEvents.total > 0"
+      >
+        <event-minimalist-card
+          v-for="event in group.organizedEvents.elements.slice(0, 3)"
+          :event="event"
+          :key="event.uuid"
+        />
+      </div>
+      <empty-content v-else-if="group" icon="calendar" :inline="true">
+        {{ t("No public upcoming events") }}
+      </empty-content>
+      <!-- <o-skeleton animated v-else></o-skeleton> -->
+    </template>
+    <template #create>
+      <o-button
+        tag="router-link"
+        v-if="isModerator"
+        :to="{
+          name: RouteName.CREATE_EVENT,
+          query: { actorId: group?.id },
+        }"
+        class="button is-primary"
+        >{{ t("+ Create an event") }}</o-button
+      >
+    </template>
+  </group-section>
+</template>
+
+<script lang="ts" setup>
+import RouteName from "@/router/name";
+import { IGroup } from "@/types/actor/group.model";
+import { usernameWithDomain } from "@/types/actor";
+import { useI18n } from "vue-i18n";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
+import GroupSection from "@/components/Group/GroupSection.vue";
+
+const { t } = useI18n({ useScope: "global" });
+
+defineProps<{ group: IGroup; isModerator: boolean }>();
+</script>
diff --git a/js/src/components/Group/Sections/PostsSection.vue b/js/src/components/Group/Sections/PostsSection.vue
new file mode 100644
index 000000000..e4753ffdf
--- /dev/null
+++ b/js/src/components/Group/Sections/PostsSection.vue
@@ -0,0 +1,50 @@
+<template>
+  <group-section
+    :title="t('Public page')"
+    icon="bullhorn"
+    :privateSection="false"
+    :route="{
+      name: RouteName.POSTS,
+      params: { preferredUsername: usernameWithDomain(group) },
+    }"
+  >
+    <template #default>
+      <div class="p-1">
+        <multi-post-list-item
+          v-if="group?.posts?.total ?? 0 > 0"
+          :posts="(group?.posts?.elements ?? []).slice(0, 3)"
+          :isCurrentActorMember="isMember"
+        />
+        <empty-content v-else-if="group" icon="bullhorn" :inline="true">
+          {{ t("No posts yet") }}
+        </empty-content>
+      </div>
+    </template>
+    <template #create>
+      <o-button
+        tag="router-link"
+        v-if="isModerator"
+        :to="{
+          name: RouteName.POST_CREATE,
+          params: { preferredUsername: usernameWithDomain(group) },
+        }"
+        class="button is-primary"
+        >{{ t("+ Create a post") }}</o-button
+      >
+    </template>
+  </group-section>
+</template>
+
+<script lang="ts" setup>
+import RouteName from "@/router/name";
+import { IGroup } from "@/types/actor/group.model";
+import { usernameWithDomain } from "@/types/actor";
+import { useI18n } from "vue-i18n";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
+import GroupSection from "@/components/Group/GroupSection.vue";
+
+const { t } = useI18n({ useScope: "global" });
+
+defineProps<{ group: IGroup; isModerator: boolean; isMember: boolean }>();
+</script>
diff --git a/js/src/components/Group/Sections/ResourcesSection.vue b/js/src/components/Group/Sections/ResourcesSection.vue
new file mode 100644
index 000000000..938b4f514
--- /dev/null
+++ b/js/src/components/Group/Sections/ResourcesSection.vue
@@ -0,0 +1,60 @@
+<template>
+  <group-section
+    :title="t('Resources')"
+    icon="link"
+    :route="{
+      name: RouteName.RESOURCE_FOLDER_ROOT,
+      params: { preferredUsername: usernameWithDomain(group) },
+    }"
+  >
+    <template #default>
+      <div v-if="group?.resources?.elements?.length ?? 0 > 0" class="p-1">
+        <div
+          v-for="resource in group?.resources?.elements ?? []"
+          :key="resource.id"
+        >
+          <resource-item
+            :resource="resource"
+            v-if="resource.type !== 'folder'"
+            :inline="true"
+          />
+          <folder-item
+            :resource="resource"
+            :group="group"
+            v-else-if="group"
+            :inline="true"
+          />
+        </div>
+      </div>
+      <empty-content v-else icon="link" :inline="true">
+        {{ t("No resources yet") }}
+      </empty-content>
+    </template>
+    <template #create>
+      <o-button
+        tag="router-link"
+        :to="{
+          name: RouteName.RESOURCE_FOLDER_ROOT,
+          params: { preferredUsername: usernameWithDomain(group) },
+        }"
+        class="button is-primary"
+        >{{ t("+ Add a resource") }}</o-button
+      >
+    </template>
+  </group-section>
+</template>
+
+<script lang="ts" setup>
+import RouteName from "@/router/name";
+import { IGroup } from "@/types/actor/group.model";
+import { usernameWithDomain } from "@/types/actor";
+import { useI18n } from "vue-i18n";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import ResourceItem from "@/components/Resource/ResourceItem.vue";
+import FolderItem from "@/components/Resource/FolderItem.vue";
+import GroupSection from "@/components/Group/GroupSection.vue";
+
+const { t } = useI18n({ useScope: "global" });
+
+defineProps<{ group: IGroup }>();
+</script>
diff --git a/js/src/components/Group/ShareGroupModal.vue b/js/src/components/Group/ShareGroupModal.vue
index 7e91637e1..2549232c2 100644
--- a/js/src/components/Group/ShareGroupModal.vue
+++ b/js/src/components/Group/ShareGroupModal.vue
@@ -1,206 +1,41 @@
 <template>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">{{ $t("Share this group") }}</p>
-    </header>
-
-    <section class="modal-card-body is-flex" v-if="group">
-      <div class="container has-text-centered">
-        <b-notification
-          type="is-warning"
-          v-if="group.visibility !== GroupVisibility.PUBLIC"
-          :closable="false"
-        >
-          {{
-            $t(
-              "This group is accessible only through it's link. Be careful where you post this link."
-            )
-          }}
-        </b-notification>
-        <b-field :label="$t('Group URL')" label-for="group-url-text">
-          <b-input
-            id="group-url-text"
-            ref="groupURLInput"
-            :value="group.url"
-            expanded
-          />
-          <p class="control">
-            <b-tooltip
-              :label="$t('URL copied to clipboard')"
-              :active="showCopiedTooltip"
-              always
-              type="is-success"
-              position="is-left"
-            >
-              <b-button
-                type="is-primary"
-                icon-right="content-paste"
-                native-type="button"
-                @click="copyURL"
-                @keyup.enter="copyURL"
-                :title="$t('Copy URL to clipboard')"
-              />
-            </b-tooltip>
-          </p>
-        </b-field>
-        <div>
-          <a
-            :href="twitterShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="mastodonShareUrl"
-            class="mastodon"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Mastodon"
-          >
-            <mastodon-logo />
-          </a>
-          <a
-            :href="facebookShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="linkedInShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="whatsAppShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="telegramShareUrl"
-            class="telegram"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Telegram"
-          >
-            <telegram-logo />
-          </a>
-          <a
-            title="Diaspora"
-            :href="diasporaShareUrl"
-            class="diaspora"
-            target="_blank"
-            rel="nofollow noopener"
-          >
-            <diaspora-logo />
-          </a>
-          <a
-            :href="emailShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
-          /></a>
-        </div>
-      </div>
-    </section>
-  </div>
+  <share-modal
+    :title="t('Share this group')"
+    :text="displayName(group)"
+    :url="group.url"
+    :input-label="t('Group URL')"
+  >
+    <o-notification
+      variant="warning"
+      v-if="group.visibility !== GroupVisibility.PUBLIC"
+      :closable="false"
+    >
+      {{
+        $t(
+          "This group is accessible only through it's link. Be careful where you post this link."
+        )
+      }}
+    </o-notification>
+  </share-modal>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+<script lang="ts" setup>
 import { GroupVisibility } from "@/types/enums";
-import DiasporaLogo from "../Share/DiasporaLogo.vue";
-import MastodonLogo from "../Share/MastodonLogo.vue";
-import TelegramLogo from "../Share/TelegramLogo.vue";
 import { displayName, IGroup } from "@/types/actor";
+import { useI18n } from "vue-i18n";
+import ShareModal from "@/components/Share/ShareModal.vue";
 
-@Component({
-  components: {
-    DiasporaLogo,
-    MastodonLogo,
-    TelegramLogo,
-  },
-})
-export default class ShareGroupModal extends Vue {
-  @Prop({ type: Object, required: true }) group!: IGroup;
+const { t } = useI18n({ useScope: "global" });
 
-  @Ref("groupURLInput") readonly groupURLInput!: any;
-
-  GroupVisibility = GroupVisibility;
-
-  showCopiedTooltip = false;
-
-  get twitterShareUrl(): string {
-    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-      this.group.url
-    )}&text=${displayName(this.group)}`;
-  }
-
-  get facebookShareUrl(): string {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-      this.group.url
-    )}`;
-  }
-
-  get linkedInShareUrl(): string {
-    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
-      this.group.url
-    )}&title=${displayName(this.group)}`;
-  }
-
-  get whatsAppShareUrl(): string {
-    return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
-  }
-
-  get telegramShareUrl(): string {
-    return `https://t.me/share/url?url=${encodeURIComponent(
-      this.group.url
-    )}&text=${encodeURIComponent(displayName(this.group))}`;
-  }
-
-  get emailShareUrl(): string {
-    return `mailto:?to=&body=${this.group.url}&subject=${displayName(
-      this.group
-    )}`;
-  }
-
-  get diasporaShareUrl(): string {
-    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
-      displayName(this.group)
-    )}&url=${encodeURIComponent(this.group.url)}`;
-  }
-
-  get mastodonShareUrl(): string {
-    return `https://toot.kytta.dev/?text=${encodeURIComponent(
-      this.basicTextToEncode
-    )}`;
-  }
-
-  get basicTextToEncode(): string {
-    return `${displayName(this.group)}\r\n${this.group.url}`;
-  }
-
-  copyURL(): void {
-    this.groupURLInput.$refs.input.select();
-    document.execCommand("copy");
-    this.showCopiedTooltip = true;
-    setTimeout(() => {
-      this.showCopiedTooltip = false;
-    }, 2000);
-  }
-}
+defineProps<{
+  group: IGroup;
+}>();
 </script>
 <style lang="scss" scoped>
 .diaspora,
 .mastodon,
 .telegram {
-  ::v-deep span svg {
+  :deep(span svg) {
     width: 2.25rem;
   }
 }
diff --git a/js/src/components/Group/SkeletonGroupResult.vue b/js/src/components/Group/SkeletonGroupResult.vue
new file mode 100644
index 000000000..73a863393
--- /dev/null
+++ b/js/src/components/Group/SkeletonGroupResult.vue
@@ -0,0 +1,18 @@
+<template>
+  <div
+    class="bg-white dark:bg-slate-800 shadow rounded-md max-w-sm w-full mx-auto"
+  >
+    <div class="animate-pulse flex flex-col space-3-4 items-center">
+      <div
+        class="object-cover h-40 w-40 rounded-full bg-slate-700 p-2 md:p-4"
+      />
+
+      <div
+        class="flex gap-3 flex self-start flex-col justify-between p-2 md:p-4 w-full"
+      >
+        <div class="h-5 bg-slate-700"></div>
+        <div class="h-3 bg-slate-700"></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/js/src/components/Home/CategoriesPreview.story.vue b/js/src/components/Home/CategoriesPreview.story.vue
new file mode 100644
index 000000000..dc788a9df
--- /dev/null
+++ b/js/src/components/Home/CategoriesPreview.story.vue
@@ -0,0 +1,16 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant>
+      <CategoriesPreview />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { apolloClient } from "@/vue-apollo";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import CategoriesPreview from "./CategoriesPreview.vue";
+
+function setupApp({ app }) {
+  app.provide(DefaultApolloClient, apolloClient);
+}
+</script>
diff --git a/js/src/components/Home/CategoriesPreview.vue b/js/src/components/Home/CategoriesPreview.vue
new file mode 100644
index 000000000..495272f4a
--- /dev/null
+++ b/js/src/components/Home/CategoriesPreview.vue
@@ -0,0 +1,62 @@
+<template>
+  <section
+    class="mx-auto container flex flex-wrap items-center justify-center gap-3 md:gap-5 my-3"
+  >
+    <CategoryCard
+      v-for="category in promotedCategories"
+      :key="category.key"
+      :category="category"
+      :with-details="false"
+    />
+    <router-link
+      :to="{ name: RouteName.CATEGORIES }"
+      class="flex items-end brightness-85 h-36 w-36 md:h-52 md:w-52 rounded-lg font-semibold text-lg md:text-xl p-4 text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:text-slate-200"
+    >
+      <span>
+        {{ t("View all categories") }}
+      </span>
+    </router-link>
+  </section>
+</template>
+<script lang="ts" setup>
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import CategoryCard from "../Categories/CategoryCard.vue";
+import RouteName from "@/router/name";
+import { CategoryStatsModel } from "@/types/stats.model";
+import { CATEGORY_STATISTICS } from "@/graphql/statistics";
+import { useI18n } from "vue-i18n";
+import shuffle from "lodash/shuffle";
+import { categoriesWithPictures } from "../Categories/constants";
+import { useEventCategories } from "@/composition/apollo/config";
+
+const { t } = useI18n({ useScope: "global" });
+
+const { result: categoryStatsResult } = useQuery<{
+  categoryStatistics: CategoryStatsModel[];
+}>(CATEGORY_STATISTICS);
+const categoryStats = computed(
+  () => categoryStatsResult.value?.categoryStatistics ?? []
+);
+
+const { eventCategories } = useEventCategories();
+
+const eventCategoryLabel = (categoryId: string): string | undefined => {
+  return eventCategories.value?.find(({ id }) => categoryId == id)?.label;
+};
+
+const promotedCategories = computed((): CategoryStatsModel[] => {
+  return shuffle(
+    categoryStats.value.filter(
+      ({ key, number }) =>
+        key !== "MEETING" && number >= 1 && categoriesWithPictures.includes(key)
+    )
+  )
+    .map(({ key, number }) => ({
+      key,
+      number,
+      label: eventCategoryLabel(key),
+    }))
+    .slice(0, 9);
+});
+</script>
diff --git a/js/src/components/Home/MobilizonPresentation.story.vue b/js/src/components/Home/MobilizonPresentation.story.vue
new file mode 100644
index 000000000..5d66f6045
--- /dev/null
+++ b/js/src/components/Home/MobilizonPresentation.story.vue
@@ -0,0 +1,10 @@
+<template>
+  <Story>
+    <Variant>
+      <MobilizonPresentation />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import MobilizonPresentation from "./MobilizonPresentation.vue";
+</script>
diff --git a/js/src/components/Home/MobilizonPresentation.vue b/js/src/components/Home/MobilizonPresentation.vue
new file mode 100644
index 000000000..47a8a114d
--- /dev/null
+++ b/js/src/components/Home/MobilizonPresentation.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="container mx-auto py-4 px-2">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+      <div>
+        <h3 class="dark:text-white text-3xl font-bold">
+          {{ t("A practical tool") }}
+        </h3>
+        <i18n-t
+          tag="p"
+          class="dark:text-white"
+          keypath="Mobilizon is a tool that helps you {find_create_organize_events}."
+        >
+          <template #find_create_organize_events>
+            <b>{{ t("find, create and organise events") }}</b>
+          </template>
+        </i18n-t>
+      </div>
+      <div>
+        <h3 class="dark:text-white text-3xl font-bold">
+          {{ t("An ethical alternative") }}
+        </h3>
+        <i18n-t
+          tag="p"
+          class="dark:text-white"
+          keypath="Ethical alternative to Facebook events, groups and pages, Mobilizon is a {tool_designed_to_serve_you}. Period."
+        >
+          <template #tool_designed_to_serve_you>
+            <b>{{ t("tool designed to serve you") }}</b>
+          </template>
+        </i18n-t>
+      </div>
+      <div>
+        <h3 class="dark:text-white text-3xl font-bold">
+          {{ t("A federated software") }}
+        </h3>
+        <i18n-t
+          tag="p"
+          class="dark:text-white"
+          keypath="Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}."
+        >
+          <template #multitude_of_interconnected_mobilizon_websites>
+            <b>{{ t("multitude of interconnected Mobilizon websites") }}</b>
+          </template>
+        </i18n-t>
+      </div>
+    </div>
+    <div class="mt-4 text-center">
+      <o-button
+        variant="primary"
+        size="large"
+        tag="a"
+        href="https://joinmobilizon.org"
+        >{{ t("Learn more about Mobilizon") }}</o-button
+      >
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
+</script>
diff --git a/js/src/components/Home/SearchFields.story.vue b/js/src/components/Home/SearchFields.story.vue
new file mode 100644
index 000000000..93aa1da51
--- /dev/null
+++ b/js/src/components/Home/SearchFields.story.vue
@@ -0,0 +1,22 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant>
+      <SearchFields
+        :search="''"
+        :location="{}"
+        @update:location="hstEvent('update location', $event)"
+        @update:search="hstEvent('update search', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { apolloClient } from "@/vue-apollo";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import SearchFields from "./SearchFields.vue";
+import { hstEvent } from "histoire/client";
+
+function setupApp({ app }) {
+  app.provide(DefaultApolloClient, apolloClient);
+}
+</script>
diff --git a/js/src/components/Home/SearchFields.vue b/js/src/components/Home/SearchFields.vue
new file mode 100644
index 000000000..5a0c005cb
--- /dev/null
+++ b/js/src/components/Home/SearchFields.vue
@@ -0,0 +1,103 @@
+<template>
+  <form
+    id="search-anchor"
+    class="container mx-auto my-3 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
+    role="search"
+    @submit.prevent="submit"
+  >
+    <label class="sr-only" for="search_field_input">{{
+      t("Keyword, event title, group name, etc.")
+    }}</label>
+    <o-input
+      v-model="search"
+      :placeholder="t('Keyword, event title, group name, etc.')"
+      id="search_field_input"
+      autofocus
+      autocapitalize="off"
+      autocomplete="off"
+      autocorrect="off"
+      maxlength="1024"
+    />
+    <full-address-auto-complete
+      :type="AddressSearchType.ADMINISTRATIVE"
+      :doGeoLocation="false"
+      v-model="location"
+      :hide-map="true"
+      :hide-selected="true"
+      :default-text="locationDefaultText"
+      labelClass="sr-only"
+    />
+    <o-button native-type="submit" icon-left="magnify">
+      <template v-if="search">{{ t("Go!") }}</template>
+      <template v-else>{{ t("Explore!") }}</template>
+    </o-button>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { IAddress } from "@/types/address.model";
+import { AddressSearchType } from "@/types/enums";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
+import { useRouter } from "vue-router";
+import RouteName from "@/router/name";
+
+const props = defineProps<{
+  location: IAddress | null;
+  locationDefaultText?: string | null;
+  search: string;
+}>();
+
+const router = useRouter();
+
+const emit = defineEmits<{
+  (event: "update:location", location: IAddress | null): void;
+  (event: "update:search", newSearch: string): void;
+  (event: "submit"): void;
+}>();
+
+const location = computed({
+  get(): IAddress | null {
+    return props.location;
+  },
+  set(newLocation: IAddress | null) {
+    emit("update:location", newLocation);
+  },
+});
+
+const search = computed({
+  get(): string {
+    return props.search;
+  },
+  set(newSearch: string) {
+    emit("update:search", newSearch);
+  },
+});
+
+const submit = () => {
+  emit("submit");
+  const lat = location.value?.geom
+    ? parseFloat(location.value?.geom?.split(";")?.[1])
+    : undefined;
+  const lon = location.value?.geom
+    ? parseFloat(location.value?.geom?.split(";")?.[0])
+    : undefined;
+  router.push({
+    name: RouteName.SEARCH,
+    query: {
+      locationName: location.value?.locality ?? location.value?.region,
+      lat,
+      lon,
+      search: search.value,
+    },
+  });
+};
+
+const { t } = useI18n({ useScope: "global" });
+</script>
+<style scoped>
+#search-anchor :deep(.o-ctrl-input) {
+  flex: 1;
+}
+</style>
diff --git a/js/src/components/Home/UnloggedIntroduction.story.vue b/js/src/components/Home/UnloggedIntroduction.story.vue
new file mode 100644
index 000000000..4958f4e22
--- /dev/null
+++ b/js/src/components/Home/UnloggedIntroduction.story.vue
@@ -0,0 +1,23 @@
+<template>
+  <Story>
+    <Variant :title="'Open'">
+      <UnloggedIntroduction :config="config" />
+    </Variant>
+    <Variant :title="'Closed'">
+      <UnloggedIntroduction :config="configClosed" />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { reactive } from "vue";
+import UnloggedIntroduction from "./UnloggedIntroduction.vue";
+
+const config = reactive({
+  name: "My instance name",
+  description: "An instance that doesn't exist",
+  slogan: "Test! Test! Test!",
+  registrationsOpen: true,
+});
+
+const configClosed = reactive({ ...config, registrationsOpen: false });
+</script>
diff --git a/js/src/components/Home/UnloggedIntroduction.vue b/js/src/components/Home/UnloggedIntroduction.vue
new file mode 100644
index 000000000..bd95e33c9
--- /dev/null
+++ b/js/src/components/Home/UnloggedIntroduction.vue
@@ -0,0 +1,52 @@
+<template>
+  <section class="container mx-auto px-2 my-3">
+    <h1 class="dark:text-white font-bold">
+      {{ config.slogan ?? t("Gather ⋅ Organize ⋅ Mobilize") }}
+    </h1>
+    <i18n-t
+      keypath="Join {instance}, a Mobilizon instance"
+      tag="p"
+      class="dark:text-white"
+    >
+      <template #instance>
+        <b>{{ config.name }}</b>
+      </template>
+    </i18n-t>
+    <p class="dark:text-white mb-2">{{ config.description }}</p>
+    <!-- We don't invite to find other instances yet -->
+    <!-- <p v-if="!config.registrationsOpen">
+              {{ t("This instance isn't opened to registrations, but you can register on other instances.") }}
+          </p>-->
+    <div class="flex flex-wrap gap-2 items-center">
+      <o-button
+        variant="primary"
+        tag="router-link"
+        :to="{ name: RouteName.REGISTER }"
+        v-if="config.registrationsOpen"
+        >{{ t("Create an account") }}</o-button
+      >
+      <!-- We don't invite to find other instances yet -->
+      <!-- <o-button v-else variant="link" tag="a" href="https://joinmastodon.org">{{ t('Find an instance') }}</o-button> -->
+      <router-link
+        :to="{ name: RouteName.ABOUT }"
+        class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-violet-title focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      >
+        {{ t("Learn more about {instance}", { instance: config.name }) }}
+      </router-link>
+    </div>
+  </section>
+</template>
+<script lang="ts" setup>
+import { IConfig } from "@/types/config.model";
+import RouteName from "@/router/name";
+import { useI18n } from "vue-i18n";
+
+defineProps<{
+  config: Pick<
+    IConfig,
+    "name" | "description" | "slogan" | "registrationsOpen"
+  >;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+</script>
diff --git a/js/src/components/Image/BlurhashImg.vue b/js/src/components/Image/BlurhashImg.vue
index a4017a5fc..fd53a33ee 100644
--- a/js/src/components/Image/BlurhashImg.vue
+++ b/js/src/components/Image/BlurhashImg.vue
@@ -2,37 +2,33 @@
   <canvas ref="canvas" width="32" height="32" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { decode } from "blurhash";
-import { Component, Prop, Ref, Vue } from "vue-property-decorator";
 
-@Component
-export default class BlurhashImg extends Vue {
-  @Prop({ type: String, required: true }) hash!: string;
-  @Prop({ type: Number, default: 1 }) aspectRatio!: string;
+import { ref, onMounted } from "vue";
 
-  @Ref("canvas") readonly canvas!: any;
+const props = withDefaults(
+  defineProps<{
+    hash: string;
+    aspectRatio?: number;
+  }>(),
+  { aspectRatio: 1 }
+);
 
-  mounted(): void {
-    try {
-      const pixels = decode(this.hash, 32, 32);
+const canvas = ref<HTMLCanvasElement | undefined>(undefined);
+
+onMounted(() => {
+  try {
+    if (canvas.value) {
+      const pixels = decode(props.hash, 32, 32);
       const imageData = new ImageData(pixels, 32, 32);
-      const context = this.canvas.getContext("2d");
-      context.putImageData(imageData, 0, 0);
-    } catch (e) {
-      console.error(e);
+      const context = canvas.value.getContext("2d");
+      if (context) {
+        context.putImageData(imageData, 0, 0);
+      }
     }
+  } catch (e) {
+    console.error(e);
   }
-}
+});
 </script>
-<style lang="scss" scoped>
-canvas {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/js/src/components/Image/LazyImage.vue b/js/src/components/Image/LazyImage.vue
index 9bfcbf85b..0a2a40da1 100644
--- a/js/src/components/Image/LazyImage.vue
+++ b/js/src/components/Image/LazyImage.vue
@@ -1,22 +1,20 @@
 <template>
-  <div ref="wrapper" class="wrapper" v-bind="$attrs">
-    <div class="relative container">
+  <div ref="wrapper" class="" v-bind="$attrs">
+    <div class="h-full w-full">
       <!-- Show the placeholder as background -->
       <blurhash-img
         v-if="blurhash"
         :hash="blurhash"
         :aspect-ratio="height / width"
-        class="top-0 left-0 transition-opacity duration-500"
-        :class="isLoaded ? 'opacity-0' : 'opacity-100'"
+        class="transition-opacity duration-500"
+        :class="blurhashOpacity"
       />
 
       <!-- Show the real image on the top and fade in after loading -->
       <img
         ref="image"
-        :width="width"
-        :height="height"
-        class="absolute top-0 left-0 transition-opacity duration-500"
-        :class="{ isLoaded: isLoaded ? 'opacity-100' : 'opacity-0', rounded }"
+        class="transition-opacity duration-500 rounded-lg object-cover w-full h-full"
+        :class="imageOpacity"
         alt=""
         src=""
       />
@@ -24,101 +22,66 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Prop, Component, Vue, Ref, Watch } from "vue-property-decorator";
+<script lang="ts" setup>
 import BlurhashImg from "./BlurhashImg.vue";
 
-@Component({
-  components: {
-    BlurhashImg,
-  },
-})
-export default class LazyImage extends Vue {
-  @Prop({ type: String, required: true }) src!: string;
-  @Prop({ type: String, required: false, default: null }) blurhash!: string;
-  @Prop({ type: Number, default: 1 }) width!: number;
-  @Prop({ type: Number, default: 1 }) height!: number;
-  @Prop({ type: Boolean, default: false }) rounded!: boolean;
+import { computed, ref, onMounted, onUnmounted, watchEffect } from "vue";
 
-  inheritAttrs = false;
-  isLoaded = false;
+const props = withDefaults(
+  defineProps<{
+    src: string;
+    blurhash?: string | null;
+    width?: number;
+    height?: number;
+    rounded?: boolean;
+  }>(),
+  { blurhash: null, width: 100, height: 100, rounded: false }
+);
 
-  observer!: IntersectionObserver;
+const isLoaded = ref(false);
+const observer = ref<IntersectionObserver | null>(null);
 
-  @Ref("wrapper") readonly wrapper!: any;
-  @Ref("image") image!: any;
+const wrapper = ref<HTMLElement | null>(null);
+const image = ref<HTMLImageElement | null>(null);
 
-  mounted(): void {
-    this.observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        this.onEnter();
-      }
-    });
+const src = computed(() => props.src);
 
-    this.observer.observe(this.wrapper);
+const isIntersecting = ref(false);
+
+const blurhashOpacity = computed(() =>
+  isLoaded.value ? "opacity-0 hidden" : "opacity-100"
+);
+
+const imageOpacity = computed(() =>
+  isLoaded.value ? "opacity-100" : "opacity-0"
+);
+
+onMounted(() => {
+  observer.value = new IntersectionObserver((entries) => {
+    isIntersecting.value = entries[0].isIntersecting;
+  });
+
+  if (wrapper.value) {
+    observer.value.observe(wrapper.value);
   }
+});
 
-  unmounted(): void {
-    this.observer.disconnect();
+onUnmounted(() => {
+  if (observer.value) {
+    observer.value.disconnect();
   }
+});
 
-  onEnter(): void {
-    // Image is visible (means: has entered the viewport),
-    // so start loading by setting the src attribute
-    if (this.image) {
-      this.image.src = this.src;
+watchEffect(() => {
+  // Image is visible (means: has entered the viewport),
+  // so start loading by setting the src attribute
+  if (image.value) {
+    image.value.src = src.value;
 
-      this.image.onload = () => {
-        // Image is loaded, so start fading in
-        this.isLoaded = true;
-      };
-    }
+    image.value.onload = () => {
+      // Image is loaded, so start fading in
+      isLoaded.value = true;
+    };
   }
-
-  @Watch("src")
-  updateImageWithSrcChange(): void {
-    this.onEnter();
-  }
-}
+});
 </script>
-<style lang="scss" scoped>
-.relative {
-  position: relative;
-}
-.absolute {
-  position: absolute;
-}
-.top-0 {
-  top: 0;
-}
-.left-0 {
-  left: 0;
-}
-.opacity-100 {
-  opacity: 100%;
-}
-.opacity-0 {
-  opacity: 0;
-}
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-.duration-500 {
-  transition-duration: 0.5s;
-}
-.wrapper,
-.container {
-  display: flex;
-  flex: 1;
-}
-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 50% 50%;
-  &.rounded {
-    border-radius: 8px;
-  }
-}
-</style>
diff --git a/js/src/components/Image/LazyImageWrapper.vue b/js/src/components/Image/LazyImageWrapper.vue
index 038207644..b30a027ae 100644
--- a/js/src/components/Image/LazyImageWrapper.vue
+++ b/js/src/components/Image/LazyImageWrapper.vue
@@ -8,10 +8,9 @@
     :rounded="rounded"
   />
 </template>
-<script lang="ts">
+<script lang="ts" setup>
+import { computed } from "vue";
 import { IMedia } from "@/types/media.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import LazyImage from "../Image/LazyImage.vue";
 
 const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
@@ -27,28 +26,27 @@ const DEFAULT_PICTURE = {
   },
 };
 
-@Component({
-  components: {
-    LazyImage,
-  },
-})
-export default class LazyImageWrapper extends Vue {
-  @Prop({ required: false, type: Object as PropType<IMedia | null> })
-  picture!: IMedia | null;
-  @Prop({ required: false, type: Boolean, default: false }) rounded!: boolean;
-
-  get pictureOrDefault(): Partial<IMedia> {
-    if (this.picture === null) {
-      return DEFAULT_PICTURE;
-    }
-    return {
-      url: this?.picture?.url,
-      metadata: {
-        width: this?.picture?.metadata?.width,
-        height: this?.picture?.metadata?.height,
-        blurhash: this?.picture?.metadata?.blurhash,
-      },
-    };
+const props = withDefaults(
+  defineProps<{
+    picture?: IMedia | null;
+    rounded?: boolean;
+  }>(),
+  {
+    rounded: false,
   }
-}
+);
+
+const pictureOrDefault = computed(() => {
+  if (props.picture === null) {
+    return DEFAULT_PICTURE;
+  }
+  return {
+    url: props?.picture?.url,
+    metadata: {
+      width: props?.picture?.metadata?.width,
+      height: props?.picture?.metadata?.height,
+      blurhash: props?.picture?.metadata?.blurhash,
+    },
+  };
+});
 </script>
diff --git a/js/src/components/Image/test.html b/js/src/components/Image/test.html
new file mode 100644
index 000000000..6d63a3297
--- /dev/null
+++ b/js/src/components/Image/test.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Tailwind CSS -->
+    <link
+      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+
+    <title>Tailwind CSS CDN</title>
+  </head>
+  <body>
+    <div class="p-10">
+      <!--Card 1-->
+      <div class="w-full lg:max-w-full lg:flex">
+        <div
+          class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
+          style="
+            background-image: url('https://mobilizon.fr/media/70e930f488788afdf5d024be5ac2f9c9f0e1b166e16f645beb2c344cdcc65d62.jpg?name=musiquesurnantesbanner.jpg');
+          "
+          title="Mountain"
+        ></div>
+        <div
+          class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal"
+        >
+          <div class="mb-8">
+            <p class="text-sm text-gray-600 flex items-center">
+              <svg
+                class="fill-current text-gray-500 w-3 h-3 mr-2"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"
+                />
+              </svg>
+              Members only
+            </p>
+            <div class="text-gray-900 font-bold text-xl mb-2">
+              Best Mountain Trails 2020
+            </div>
+            <p class="text-gray-700 text-base">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              Voluptatibus quia, Nonea! Maiores et perferendis eaque,
+              exercitationem praesentium nihil.
+            </p>
+          </div>
+          <div class="flex items-center">
+            <img
+              class="w-10 h-10 rounded-full mr-4"
+              src="/ben.png"
+              alt="Avatar of Writer"
+            />
+            <div class="text-sm">
+              <p class="text-gray-900 leading-none">John Smith</p>
+              <p class="text-gray-600">Aug 18</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/js/src/components/LeafletMap.vue b/js/src/components/LeafletMap.vue
new file mode 100644
index 000000000..0426739ab
--- /dev/null
+++ b/js/src/components/LeafletMap.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="map-container">
+    <l-map
+      :zoom="mergedOptions.zoom"
+      :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
+      class="leaflet-map"
+      :center="[lat, lon]"
+      @click="clickMap"
+      @update:zoom="updateZoom"
+      :options="{ zoomControl: false }"
+      ref="mapComponent"
+      @ready="onMapReady"
+    >
+      <l-tile-layer :url="tiles?.endpoint" :attribution="attribution">
+      </l-tile-layer>
+      <l-control-zoom
+        position="topleft"
+        :zoomInTitle="$t('Zoom in')"
+        :zoomOutTitle="$t('Zoom out')"
+      ></l-control-zoom>
+      <l-marker
+        :lat-lng="[lat, lon]"
+        @add="openPopup"
+        @update:latLng="updateDraggableMarkerPosition"
+        :draggable="!readOnly"
+      >
+        <l-icon>
+          <MapMarker :size="48" class="text-mbz-purple" />
+        </l-icon>
+        <l-popup v-if="popupMultiLine" :options="{ offset: new Point(22, 8) }">
+          <span v-for="line in popupMultiLine" :key="line"
+            >{{ line }}<br
+          /></span>
+        </l-popup>
+      </l-marker>
+    </l-map>
+    <CrosshairsGps ref="locationIcon" class="hidden" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  LatLng,
+  LeafletMouseEvent,
+  LeafletEvent,
+  Control,
+  DomUtil,
+  Map,
+  Point,
+} from "leaflet";
+import "leaflet/dist/leaflet.css";
+import {
+  LMap,
+  LTileLayer,
+  LMarker,
+  LPopup,
+  LIcon,
+  LControlZoom,
+} from "@vue-leaflet/vue-leaflet";
+import { computed, nextTick, onMounted, ref } from "vue";
+import { useMapTiles } from "@/composition/apollo/config";
+import { useI18n } from "vue-i18n";
+import Locatecontrol from "leaflet.locatecontrol";
+import CrosshairsGps from "vue-material-design-icons/CrosshairsGps.vue";
+import MapMarker from "vue-material-design-icons/MapMarker.vue";
+
+const props = withDefaults(
+  defineProps<{
+    readOnly?: boolean;
+    coords: string;
+    marker?: { text: string | string[]; icon: string };
+    options?: Record<string, unknown>;
+    updateDraggableMarkerCallback?: (latlng: LatLng, zoom: number) => void;
+  }>(),
+  {
+    readOnly: true,
+  }
+);
+
+const defaultOptions: {
+  zoom: number;
+  height: string;
+  width: string;
+} = {
+  zoom: 15,
+  height: "100%",
+  width: "100%",
+};
+
+const zoom = ref(defaultOptions.zoom);
+
+const mapComponent = ref();
+const mapObject = ref<Map>();
+const locateControl = ref<Control.Locate>();
+const locationIcon = ref();
+
+const locationIconHTML = computed(() => locationIcon.value?.$el.innerHTML);
+
+onMounted(async () => {
+  // this part resolve an issue where the markers would not appear
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  // eslint-disable-next-line no-underscore-dangle
+  // delete Icon.Default.prototype._getIconUrl;
+  // Icon.Default.mergeOptions({
+  //   iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
+  //   iconUrl: require("leaflet/dist/images/marker-icon.png"),
+  //   shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
+  // });
+});
+
+const onMapReady = async () => {
+  mapObject.value = mapComponent.value.leafletObject;
+  mountLocateControl();
+};
+
+const mountLocateControl = () => {
+  if (canDoGeoLocation.value && mapObject.value) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    locateControl.value = new Locatecontrol({
+      strings: { title: t("Show me where I am") as string },
+      position: "topleft",
+      drawCircle: false,
+      drawMarker: false,
+      createButtonCallback(container: HTMLElement | undefined, options: any) {
+        const link = DomUtil.create(
+          "a",
+          "leaflet-bar-part leaflet-bar-part-single",
+          container
+        );
+        link.title = options.strings.title;
+        link.href = "#";
+        link.setAttribute("role", "button");
+
+        const icon = DomUtil.create(
+          "span",
+          "material-design-icon rss-icon",
+          link
+        );
+        icon.setAttribute("aria-hidden", "true");
+        icon.setAttribute("role", "img");
+        icon.insertAdjacentHTML("beforeend", locationIconHTML.value);
+        console.log("icon for location", {
+          link,
+          icon,
+        });
+        return { link, icon };
+      },
+      ...props.options,
+    }) as Control.Locate;
+    locateControl.value?.addTo(mapObject.value);
+  }
+};
+
+const openPopup = async (event: LeafletEvent): Promise<void> => {
+  await nextTick();
+  event.target.openPopup();
+};
+
+const mergedOptions = computed((): Record<string, unknown> => {
+  return { ...defaultOptions, ...props.options };
+});
+
+const lat = computed((): number => {
+  return Number.parseFloat(props.coords?.split(";")[1]);
+});
+
+const lon = computed((): number => {
+  return Number.parseFloat(props.coords.split(";")[0]);
+});
+
+const popupMultiLine = computed((): Array<string | undefined> => {
+  if (Array.isArray(props.marker?.text)) {
+    return props.marker?.text as string[];
+  }
+  return [props.marker?.text];
+});
+
+const clickMap = (event: LeafletMouseEvent): void => {
+  updateDraggableMarkerPosition(event.latlng);
+};
+
+const updateDraggableMarkerPosition = (e: LatLng): void => {
+  if (props.updateDraggableMarkerCallback) {
+    props.updateDraggableMarkerCallback(e, zoom.value);
+  }
+};
+
+const updateZoom = (newZoom: number): void => {
+  zoom.value = newZoom;
+};
+
+const { tiles } = useMapTiles();
+
+const { t } = useI18n({ useScope: "global" });
+
+const attribution = computed((): string => {
+  return tiles.value?.attribution ?? t("© The OpenStreetMap Contributors");
+});
+
+const canDoGeoLocation = computed((): boolean => {
+  return window.isSecureContext;
+});
+</script>
+<style lang="scss" scoped>
+div.map-container {
+  height: 100%;
+  width: 100%;
+
+  .leaflet-map {
+    z-index: 20;
+  }
+}
+</style>
+<style>
+@import "leaflet.locatecontrol/dist/L.Control.Locate.css";
+</style>
diff --git a/js/src/components/Local/CloseContent.vue b/js/src/components/Local/CloseContent.vue
new file mode 100644
index 000000000..0d614d003
--- /dev/null
+++ b/js/src/components/Local/CloseContent.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="relative pt-10 px-2">
+    <div class="mb-2">
+      <div class="w-full flex flex-wrap gap-3 items-center">
+        <h2
+          class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100 mt-0"
+        >
+          <slot name="title" />
+        </h2>
+
+        <button
+          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')"
+        >
+          {{ t("Geolocate me") }}
+        </button>
+      </div>
+      <slot name="subtitle" />
+    </div>
+    <div class="hidden sm:block" v-show="showScrollLeftButton">
+      <button
+        @click="scrollLeft"
+        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>
+    </div>
+    <div class="overflow-hidden">
+      <div
+        class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8 p-1"
+        ref="scrollContainer"
+        @scroll="scrollHandler"
+      >
+        <slot name="content" />
+      </div>
+    </div>
+    <div class="hidden sm:block" v-show="showScrollRightButton">
+      <button
+        @click="scrollRight"
+        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>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+withDefaults(
+  defineProps<{
+    suggestGeoloc?: boolean;
+  }>(),
+  { suggestGeoloc: true }
+);
+
+const emit = defineEmits(["doGeoLoc"]);
+
+const { t } = useI18n({ useScope: "global" });
+
+const showScrollRightButton = ref(true);
+const showScrollLeftButton = ref(false);
+
+const scrollContainer = ref<any>();
+
+const scrollHandler = () => {
+  if (scrollContainer.value) {
+    showScrollRightButton.value =
+      scrollContainer.value.scrollLeft <
+      scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
+    showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
+  }
+};
+
+const doScroll = (e: Event, left: number) => {
+  e.preventDefault();
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollBy({
+      left,
+      behavior: "smooth",
+    });
+  }
+};
+
+const scrollLeft = (e: Event) => {
+  doScroll(e, -300);
+};
+
+const scrollRight = (e: Event) => {
+  doScroll(e, 300);
+};
+
+const scrollHorizontalToVertical = (evt: WheelEvent) => {
+  evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
+};
+
+onMounted(async () => {
+  scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
+});
+
+onUnmounted(() => {
+  if (scrollContainer.value) {
+    scrollContainer.value.removeEventListener(
+      "wheel",
+      scrollHorizontalToVertical
+    );
+  }
+});
+</script>
diff --git a/js/src/components/Local/CloseEvents.vue b/js/src/components/Local/CloseEvents.vue
new file mode 100644
index 000000000..bd6808b46
--- /dev/null
+++ b/js/src/components/Local/CloseEvents.vue
@@ -0,0 +1,107 @@
+<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">
+        {{ t("Events nearby {position}", { position: userLocationName }) }}
+      </template>
+      <template v-else>
+        {{ t("Events close to you") }}
+      </template>
+    </template>
+    <template #content>
+      <skeleton-event-result
+        v-for="i in 6"
+        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
+        :key="i"
+        v-show="loadingEvents"
+      />
+      <event-card
+        v-for="event in events.elements"
+        :event="event"
+        :key="event.uuid"
+      />
+      <more-content
+        v-if="userLocationName && userLocation?.lat && userLocation?.lon"
+        :to="{
+          name: RouteName.SEARCH,
+          query: {
+            locationName: userLocationName,
+            lat: userLocation.lat?.toString(),
+            lon: userLocation.lon?.toString(),
+            contentType: 'EVENTS',
+            distance: '25_km',
+          },
+        }"
+        :picture="userLocation?.picture"
+      >
+        {{
+          t("View more events around {position}", {
+            position: userLocationName,
+          })
+        }}
+      </more-content>
+    </template>
+  </close-content>
+</template>
+
+<script lang="ts" setup>
+import { LocationType } from "../../types/user-location.model";
+import MoreContent from "./MoreContent.vue";
+import CloseContent from "./CloseContent.vue";
+import { computed, useAttrs } from "vue";
+import { SEARCH_EVENTS } from "@/graphql/search";
+import { IEvent } from "@/types/event.model";
+import { useQuery } from "@vue/apollo-composable";
+import EventCard from "../Event/EventCard.vue";
+import { Paginate } from "@/types/paginate";
+import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
+import { useI18n } from "vue-i18n";
+import { coordsToGeoHash } from "@/utils/location";
+import { roundToNearestMinute } from "@/utils/datetime";
+import RouteName from "@/router/name";
+
+const props = defineProps<{ userLocation: LocationType }>();
+const emit = defineEmits(["doGeoLoc"]);
+
+const EVENT_PAGE_LIMIT = 12;
+
+const { t } = useI18n({ useScope: "global" });
+const attrs = useAttrs();
+
+const userLocationName = computed(() => {
+  return props.userLocation?.name;
+});
+const suggestGeoloc = computed(() => props.userLocation?.isIPLocation);
+
+const geoHash = computed(() =>
+  coordsToGeoHash(props.userLocation.lat, props.userLocation.lon)
+);
+
+const { result: eventsResult, loading: loadingEvents } = useQuery<{
+  searchEvents: Paginate<IEvent>;
+}>(
+  SEARCH_EVENTS,
+  () => ({
+    location: geoHash.value,
+    beginsOn: roundToNearestMinute(new Date()),
+    endsOn: undefined,
+    radius: 25,
+    eventPage: 1,
+    limit: EVENT_PAGE_LIMIT,
+    type: "IN_PERSON",
+  }),
+  () => ({
+    enabled: geoHash.value !== undefined,
+  })
+);
+
+const events = computed(
+  () => eventsResult.value?.searchEvents ?? { elements: [], total: 0 }
+);
+</script>
diff --git a/js/src/components/Local/CloseGroups.vue b/js/src/components/Local/CloseGroups.vue
new file mode 100644
index 000000000..f11bcbfc0
--- /dev/null
+++ b/js/src/components/Local/CloseGroups.vue
@@ -0,0 +1,102 @@
+<template>
+  <close-content
+    class="container mx-auto px-2"
+    v-show="loadingGroups || selectedGroups.length > 0"
+    @do-geo-loc="emit('doGeoLoc')"
+    :suggestGeoloc="userLocation.isIPLocation"
+  >
+    <template #title>
+      <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
+        v-for="i in [...Array(6).keys()]"
+        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
+        :key="i"
+        v-show="loadingGroups"
+      />
+      <group-card
+        v-for="group in selectedGroups"
+        :key="group.id"
+        :group="group"
+        :view-mode="'column'"
+        :minimal="true"
+        :has-border="true"
+        :showSummary="false"
+      />
+
+      <more-content
+        v-if="userLocationName"
+        :to="{
+          name: RouteName.SEARCH,
+          query: {
+            locationName: userLocationName,
+            lat: userLocation.lat?.toString(),
+            lon: userLocation.lon?.toString(),
+            contentType: 'GROUPS',
+            distance: '25_km',
+          },
+        }"
+        :picture="userLocation.picture"
+      >
+        {{
+          t("View more groups around {position}", {
+            position: userLocationName,
+          })
+        }}
+      </more-content>
+    </template>
+  </close-content>
+</template>
+
+<script lang="ts" setup>
+import SkeletonGroupResult from "@/components/Group/SkeletonGroupResult.vue";
+import sampleSize from "lodash/sampleSize";
+import { LocationType } from "@/types/user-location.model";
+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";
+import RouteName from "@/router/name";
+
+const props = defineProps<{ userLocation: LocationType }>();
+const emit = defineEmits(["doGeoLoc"]);
+
+const { t } = useI18n({ useScope: "global" });
+
+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 groups = computed(
+  () => groupsResult.value?.searchGroups ?? { total: 0, elements: [] }
+);
+
+const selectedGroups = computed(() => sampleSize(groups.value?.elements, 5));
+
+const userLocationName = computed(() => props?.userLocation?.name);
+</script>
diff --git a/js/src/components/Local/LastEvents.vue b/js/src/components/Local/LastEvents.vue
new file mode 100644
index 000000000..c2b936231
--- /dev/null
+++ b/js/src/components/Local/LastEvents.vue
@@ -0,0 +1,78 @@
+<template>
+  <close-content
+    class="container mx-auto px-2"
+    v-show="loadingEvents || (events && events.total > 0)"
+    :suggestGeoloc="false"
+    v-on="attrs"
+  >
+    <template #title>
+      {{ t("Last published events") }}
+    </template>
+    <template #subtitle>
+      <i18n-t
+        class="text-slate-700 dark:text-slate-300"
+        tag="p"
+        keypath="On {instance} and other federated instances"
+      >
+        <template #instance>
+          <b>{{ instanceName }}</b>
+        </template>
+      </i18n-t>
+    </template>
+    <template #content>
+      <skeleton-event-result
+        v-for="i in 6"
+        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
+        :key="i"
+        v-show="loadingEvents"
+      />
+      <event-card
+        v-for="event in events.elements"
+        :event="event"
+        :key="event.uuid"
+      />
+      <more-content
+        :to="{
+          name: RouteName.SEARCH,
+          query: {
+            contentType: 'EVENTS',
+          },
+        }"
+      >
+        {{ t("View more events") }}
+      </more-content>
+    </template>
+  </close-content>
+</template>
+
+<script lang="ts" setup>
+import MoreContent from "./MoreContent.vue";
+import CloseContent from "./CloseContent.vue";
+import { computed, useAttrs } from "vue";
+import { IEvent } from "@/types/event.model";
+import { useQuery } from "@vue/apollo-composable";
+import EventCard from "../Event/EventCard.vue";
+import { Paginate } from "@/types/paginate";
+import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
+import { EventSortField, SortDirection } from "@/types/enums";
+import { FETCH_EVENTS } from "@/graphql/event";
+import { useI18n } from "vue-i18n";
+import RouteName from "@/router/name";
+
+defineProps<{
+  instanceName: string;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+const attrs = useAttrs();
+
+const { result: resultEvents, loading: loadingEvents } = useQuery<{
+  events: Paginate<IEvent>;
+}>(FETCH_EVENTS, {
+  orderBy: EventSortField.INSERTED_AT,
+  direction: SortDirection.DESC,
+});
+const events = computed(
+  () => resultEvents.value?.events ?? { total: 0, elements: [] }
+);
+</script>
diff --git a/js/src/components/Local/MoreContent.vue b/js/src/components/Local/MoreContent.vue
new file mode 100644
index 000000000..734e892a5
--- /dev/null
+++ b/js/src/components/Local/MoreContent.vue
@@ -0,0 +1,90 @@
+<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] dark:bg-mbz-purple"
+  >
+    <div class="relative w-full group">
+      <img
+        v-if="picture"
+        class="object-cover h-40 w-full rounded-t-lg"
+        :src="picture.url"
+        width="350"
+        alt=""
+      />
+      <div class="absolute top-0 left-0 h-full w-full">
+        <div
+          class="custom-overlay opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute left-0 h-full w-full transition-opacity"
+        />
+        <div
+          class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute left-0 h-full w-full"
+        >
+          <p class="absolute text-sm text-white left-1 bottom-1.5 px-1">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="inline h-5 w-5 pr-1"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span
+              @click="(e) => e.stopPropagation()"
+              class="align-bottom"
+              v-html="
+                $t('Photo by {author} on {source}', {
+                  author: imageAuthor,
+                  source: imageSource,
+                })
+              "
+            />
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex h-full justify-between self-end flex-col p-2 pt-1 md:p-4 md:pt-2 leading-normal w-full"
+    >
+      <h2
+        class="mb-2 text-xl font-bold tracking-tight text-violet-title dark:text-white"
+      >
+        <slot name="default" />
+      </h2>
+    </div>
+  </router-link>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { CategoryPictureLicencing } from "../Categories/constants";
+
+const props = defineProps<{
+  to: { name: string; query: Record<string, string | undefined> };
+  picture?: CategoryPictureLicencing & { url: string };
+}>();
+
+const imageAuthor = computed(
+  () =>
+    `<a target="_blank" class="underline font-medium" href="${props.picture?.author?.url}">${props.picture?.author?.name}</a>`
+);
+const imageSource = computed(
+  () =>
+    `<a target="_blank" class="underline font-medium" href="${props.picture?.source?.url}">${props.picture?.source?.name}</a>`
+);
+</script>
+<style>
+.custom-overlay {
+  background-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0) 25%,
+    rgba(2, 0, 36, 0.75) 90%,
+    rgba(2, 0, 36, 0.85) 100%
+  );
+  transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
+}
+</style>
diff --git a/js/src/components/Local/OnlineEvents.vue b/js/src/components/Local/OnlineEvents.vue
new file mode 100644
index 000000000..fe3a0a56d
--- /dev/null
+++ b/js/src/components/Local/OnlineEvents.vue
@@ -0,0 +1,77 @@
+<template>
+  <close-content
+    class="container mx-auto px-2"
+    :suggest-geoloc="false"
+    v-show="loadingEvents || (events?.elements && events?.elements.length > 0)"
+  >
+    <template #title>
+      {{ $t("Online upcoming events") }}
+    </template>
+    <template #content>
+      <skeleton-event-result
+        v-for="i in [...Array(6).keys()]"
+        class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
+        :key="i"
+        v-show="loadingEvents"
+      />
+      <event-card
+        class="scroll-ml-6 snap-center shrink-0 first:pl-8 last:pr-8 w-[18rem]"
+        v-for="event in events?.elements"
+        :key="event.id"
+        :event="event"
+        view-mode="column"
+        :has-border="true"
+        :minimal="true"
+      />
+      <more-content
+        :to="{
+          name: RouteName.SEARCH,
+          query: {
+            contentType: 'EVENTS',
+            isOnline: 'true',
+          },
+        }"
+        :picture="{
+          url: '/img/online-event.webp',
+          author: {
+            name: 'Chris Montgomery',
+            url: 'https://unsplash.com/@cwmonty',
+          },
+          source: {
+            name: 'Unsplash',
+            url: 'https://unsplash.com/?utm_source=Mobilizon&utm_medium=referral',
+          },
+        }"
+      >
+        {{ $t("View more online events") }}
+      </more-content>
+    </template>
+  </close-content>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import SkeletonEventResult from "@/components/Event/SkeletonEventResult.vue";
+import MoreContent from "./MoreContent.vue";
+import CloseContent from "./CloseContent.vue";
+import { SEARCH_EVENTS } from "@/graphql/search";
+import EventCard from "@/components/Event/EventCard.vue";
+import { useQuery } from "@vue/apollo-composable";
+import RouteName from "@/router/name";
+import { Paginate } from "@/types/paginate";
+import { IEvent } from "@/types/event.model";
+
+const EVENT_PAGE_LIMIT = 12;
+
+const { result: searchEventResult, loading: loadingEvents } = useQuery<{
+  searchEvents: Paginate<IEvent>;
+}>(SEARCH_EVENTS, () => ({
+  beginsOn: new Date(),
+  endsOn: undefined,
+  eventPage: 1,
+  limit: EVENT_PAGE_LIMIT,
+  type: "ONLINE",
+}));
+
+const events = computed(() => searchEventResult.value?.searchEvents);
+</script>
diff --git a/js/src/components/Map.vue b/js/src/components/Map.vue
deleted file mode 100644
index 30a561047..000000000
--- a/js/src/components/Map.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <div class="map-container" v-if="config">
-    <l-map
-      :zoom="mergedOptions.zoom"
-      :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
-      class="leaflet-map"
-      :center="[lat, lon]"
-      @click="clickMap"
-      @update:zoom="updateZoom"
-      :options="{ zoomControl: false }"
-    >
-      <l-tile-layer
-        :url="config.maps.tiles.endpoint"
-        :attribution="attribution"
-      >
-      </l-tile-layer>
-      <l-control-zoom
-        position="topleft"
-        :zoomInTitle="$t('Zoom in')"
-        :zoomOutTitle="$t('Zoom out')"
-      ></l-control-zoom>
-      <v-locatecontrol
-        v-if="canDoGeoLocation"
-        :options="{ icon: 'mdi mdi-map-marker' }"
-      />
-      <l-marker
-        :lat-lng="[lat, lon]"
-        @add="openPopup"
-        @update:latLng="updateDraggableMarkerPosition"
-        :draggable="!readOnly"
-      >
-        <l-popup v-if="popupMultiLine">
-          <span v-for="line in popupMultiLine" :key="line"
-            >{{ line }}<br
-          /></span>
-        </l-popup>
-      </l-marker>
-    </l-map>
-  </div>
-</template>
-
-<script lang="ts">
-import { Icon, LatLng, LeafletMouseEvent, LeafletEvent } from "leaflet";
-import "leaflet/dist/leaflet.css";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import {
-  LMap,
-  LTileLayer,
-  LMarker,
-  LPopup,
-  LIcon,
-  LControlZoom,
-} from "vue2-leaflet";
-import Vue2LeafletLocateControl from "@/components/Map/Vue2LeafletLocateControl.vue";
-import { CONFIG } from "../graphql/config";
-import { IConfig } from "../types/config.model";
-
-@Component({
-  components: {
-    LTileLayer,
-    LMap,
-    LMarker,
-    LPopup,
-    LIcon,
-    LControlZoom,
-    "v-locatecontrol": Vue2LeafletLocateControl,
-  },
-  apollo: {
-    config: CONFIG,
-  },
-})
-export default class Map extends Vue {
-  @Prop({ type: Boolean, required: false, default: true }) readOnly!: boolean;
-
-  @Prop({ type: String, required: true }) coords!: string;
-
-  @Prop({ type: Object, required: false }) marker!: {
-    text: string | string[];
-    icon: string;
-  };
-
-  @Prop({ type: Object, required: false }) options!: Record<string, unknown>;
-
-  @Prop({ type: Function, required: false })
-  updateDraggableMarkerCallback!: (latlng: LatLng, zoom: number) => void;
-
-  defaultOptions: {
-    zoom: number;
-    height: string;
-    width: string;
-  } = {
-    zoom: 15,
-    height: "100%",
-    width: "100%",
-  };
-
-  zoom = this.defaultOptions.zoom;
-
-  config!: IConfig;
-
-  /* eslint-disable */
-  mounted() {
-    // this part resolve an issue where the markers would not appear
-    // @ts-ignore
-    delete Icon.Default.prototype._getIconUrl;
-
-    Icon.Default.mergeOptions({
-      iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
-      iconUrl: require("leaflet/dist/images/marker-icon.png"),
-      shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
-    });
-  }
-  /* eslint-enable */
-
-  openPopup(event: LeafletEvent): void {
-    this.$nextTick(() => {
-      event.target.openPopup();
-    });
-  }
-
-  get mergedOptions(): Record<string, unknown> {
-    return { ...this.defaultOptions, ...this.options };
-  }
-
-  get lat(): number {
-    return this.$props.coords.split(";")[1];
-  }
-
-  get lon(): number {
-    return this.$props.coords.split(";")[0];
-  }
-
-  get popupMultiLine(): Array<string> {
-    if (Array.isArray(this.marker.text)) {
-      return this.marker.text;
-    }
-    return [this.marker.text];
-  }
-
-  clickMap(event: LeafletMouseEvent): void {
-    this.updateDraggableMarkerPosition(event.latlng);
-  }
-
-  updateDraggableMarkerPosition(e: LatLng): void {
-    if (this.updateDraggableMarkerCallback) {
-      this.updateDraggableMarkerCallback(e, this.zoom);
-    }
-  }
-
-  updateZoom(zoom: number): void {
-    this.zoom = zoom;
-  }
-
-  get attribution(): string {
-    return (
-      this.config.maps.tiles.attribution ||
-      (this.$t("© The OpenStreetMap Contributors") as string)
-    );
-  }
-
-  get canDoGeoLocation(): boolean {
-    return window.isSecureContext;
-  }
-}
-</script>
-<style lang="scss" scoped>
-div.map-container {
-  height: 100%;
-  width: 100%;
-
-  .leaflet-map {
-    z-index: 20;
-  }
-}
-</style>
diff --git a/js/src/components/Map/Vue2LeafletLocateControl.vue b/js/src/components/Map/Vue2LeafletLocateControl.vue
deleted file mode 100644
index 5a8369cf9..000000000
--- a/js/src/components/Map/Vue2LeafletLocateControl.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div style="display: none">
-    <slot v-if="ready"></slot>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * Fork of https://github.com/domoritz/leaflet-locatecontrol
- * to try to trigger location manually (not done ATM)
- */
-
-import { DomEvent } from "leaflet";
-import { findRealParent, propsBinder } from "vue2-leaflet";
-import Locatecontrol from "leaflet.locatecontrol";
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component({
-  beforeDestroy() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.parentContainer.removeLayer(this);
-  },
-})
-export default class Vue2LeafletLocateControl extends Vue {
-  @Prop({ type: Object, default: () => ({}) }) options!: Record<
-    string,
-    unknown
-  >;
-
-  @Prop({ type: Boolean, default: true }) visible!: boolean;
-
-  ready = false;
-
-  mapObject!: any;
-
-  parentContainer: any;
-
-  mounted(): void {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.mapObject = new Locatecontrol({
-      ...this.options,
-      strings: { title: this.$t("Show me where I am") as string },
-    });
-    DomEvent.on(this.mapObject, this.$listeners as any);
-    propsBinder(this, this.mapObject, this.$props);
-    this.ready = true;
-    this.parentContainer = findRealParent(this.$parent);
-    this.mapObject.addTo(this.parentContainer.mapObject, !this.visible);
-    this.$nextTick(() => {
-      this.$emit("ready", this.mapObject);
-    });
-  }
-
-  public locate(): void {
-    this.mapObject.start();
-  }
-}
-</script>
-
-<style>
-@import "~leaflet.locatecontrol/dist/L.Control.Locate.css";
-</style>
diff --git a/js/src/components/Map/VueBottomSheet.vue b/js/src/components/Map/VueBottomSheet.vue
new file mode 100644
index 000000000..6a36caab9
--- /dev/null
+++ b/js/src/components/Map/VueBottomSheet.vue
@@ -0,0 +1,370 @@
+<template>
+  <div
+    :class="[
+      'bottom-sheet',
+      {
+        opened: opened,
+        closed: opened === false,
+        moving: moving,
+      },
+    ]"
+    v-on="handlers"
+    ref="bottomSheet"
+    :style="{
+      'pointer-events':
+        backgroundClickable && clickToClose === false ? 'none' : 'all',
+    }"
+  >
+    <div
+      v-if="overlay"
+      class="bottom-sheet__backdrop"
+      :style="{ background: overlayColor }"
+    />
+    <div
+      :style="[
+        { bottom: cardP + 'px', maxWidth: maxWidth, maxHeight: maxHeight },
+        { height: isFullScreen ? '100%' : 'auto' },
+        { 'pointer-events': 'all' },
+      ]"
+      :class="[
+        'bottom-sheet__card bg-white dark:bg-gray-800',
+        { stripe: stripe, square: !rounded },
+        effect,
+      ]"
+      ref="bottomSheetCard"
+    >
+      <div class="bottom-sheet__pan" ref="pan">
+        <div class="bottom-sheet__bar bg-gray-700 dark:bg-gray-400" />
+      </div>
+      <div
+        :style="{ height: contentH }"
+        ref="bottomSheetCardContent"
+        class="bottom-sheet__content"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Hammer from "hammerjs";
+import { onBeforeUnmount, reactive, ref } from "vue";
+
+const inited = ref(false);
+const opened = ref(false);
+const contentH = ref("auto");
+const hammer = reactive<{
+  pan: any;
+  content: any;
+}>({
+  pan: null,
+  content: null,
+});
+const contentScroll = ref(0);
+const cardP = ref<number>(0);
+const cardH = ref<number>(0);
+const moving = ref(false);
+const stripe = ref(0);
+
+const props = withDefaults(
+  defineProps<{
+    overlay?: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+    clickToClose?: boolean;
+    effect?: string;
+    rounded?: boolean;
+    swipeAble?: boolean;
+    isFullScreen?: boolean;
+    overlayColor?: string;
+    backgroundScrollable?: boolean;
+    backgroundClickable?: boolean;
+  }>(),
+  {
+    overlay: true,
+    maxWidth: "640px",
+    maxHeight: "95%",
+    clickToClose: true,
+    effect: "fx-default",
+    rounded: true,
+    swipeAble: true,
+    isFullScreen: false,
+    overlayColor: "#0000004D",
+    backgroundScrollable: false,
+    backgroundClickable: false,
+  }
+);
+
+const emit = defineEmits(["closed", "opened"]);
+
+const bottomSheetCardContent = ref();
+const bottomSheetCard = ref();
+const pan = ref();
+
+const isIphone = () => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const iPhone = /iPhone/.test(navigator.userAgent) && !window.MSStream;
+  const aspect = window.screen.width / window.screen.height;
+  return iPhone && aspect.toFixed(3) === "0.462";
+};
+const move = (event: any, type: any) => {
+  if (props.swipeAble) {
+    const delta = -event.deltaY;
+    if (
+      (type === "content" && event.type === "panup") ||
+      (type === "content" &&
+        event.type === "pandown" &&
+        contentScroll.value > 0)
+    ) {
+      bottomSheetCardContent.value.scrollTop = contentScroll.value + delta;
+    } else if (event.type === "panup" || event.type === "pandown") {
+      moving.value = true;
+      if (event.deltaY > 0) {
+        cardP.value = delta;
+      }
+    }
+    if (event.isFinal) {
+      contentScroll.value = bottomSheetCardContent.value.scrollTop;
+      moving.value = false;
+      if (cardP.value < -30) {
+        opened.value = false;
+        cardP.value = (-cardH.value ?? 0) - stripe.value;
+        document.body.style.overflow = "";
+        emit("closed");
+      } else {
+        cardP.value = 0;
+      }
+    }
+  }
+};
+const init = () => {
+  return new Promise((resolve) => {
+    contentH.value = "auto";
+    stripe.value = isIphone() ? 20 : 0;
+    cardH.value = bottomSheetCard.value.clientHeight;
+    contentH.value = `${cardH.value - pan.value.clientHeight}px`;
+    bottomSheetCard.value.style.maxHeight = props.maxHeight;
+    cardP.value =
+      props.effect === "fx-slide-from-right" ||
+      props.effect === "fx-slide-from-left"
+        ? 0
+        : -cardH.value - stripe.value;
+    if (!inited.value) {
+      inited.value = true;
+      const options = {
+        recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL }]],
+      };
+      hammer.pan = new Hammer(pan.value, options as any);
+      hammer.pan?.on("panstart panup pandown panend", (e: any) => {
+        move(e, "pan");
+      });
+      hammer.content = new Hammer(bottomSheetCardContent.value, options as any);
+      hammer.content?.on("panstart panup pandown panend", (e: any) => {
+        move(e, "content");
+      });
+    }
+    setTimeout(() => {
+      resolve(undefined);
+    }, 100);
+  });
+};
+const open = async () => {
+  console.debug("open vue bottom sheet");
+  await init();
+  opened.value = true;
+  cardP.value = 0;
+
+  if (!props.backgroundScrollable) {
+    document.body.style.overflow = "hidden";
+  }
+
+  emit("opened");
+};
+const close = () => {
+  opened.value = false;
+  cardP.value =
+    props.effect === "fx-slide-from-right" ||
+    props.effect === "fx-slide-from-left"
+      ? 0
+      : -cardH.value - stripe.value;
+  document.body.style.overflow = "";
+  emit("closed");
+};
+const clickOnBottomSheet = (event: any) => {
+  if (props.clickToClose) {
+    if (
+      event.target.classList.contains("bottom-sheet__backdrop") ||
+      event.target.classList.contains("bottom-sheet")
+    ) {
+      close();
+    }
+  }
+};
+
+onBeforeUnmount(() => {
+  hammer?.pan?.destroy();
+  hammer?.content?.destroy();
+});
+
+const handlers = {
+  mousedown: clickOnBottomSheet,
+  touchstart: clickOnBottomSheet,
+};
+
+defineExpose({ open, close });
+</script>
+
+<style lang="scss" scoped>
+.bottom-sheet {
+  z-index: 99999;
+  transition: all 0.4s ease;
+  position: relative;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &__content {
+    overflow-y: scroll;
+  }
+
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  &__card {
+    width: 100%;
+
+    position: fixed;
+    border-radius: 14px 14px 0 0;
+    left: 50%;
+    z-index: 9999;
+    margin: 0 auto;
+
+    &.square {
+      border-radius: 0;
+    }
+
+    &.stripe {
+      padding-bottom: 20px;
+    }
+
+    &.fx-default {
+      transform: translate(-50%, 0);
+      transition: bottom 0.3s ease;
+    }
+
+    &.fx-fadein-scale {
+      transform: translate(-50%, 0) scale(0.7);
+      opacity: 0;
+      transition: all 0.3s;
+    }
+
+    &.fx-slide-from-right {
+      transform: translate(100%, 0);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    }
+
+    &.fx-slide-from-left {
+      transform: translate(-100%, 0);
+      opacity: 0;
+      transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+    }
+  }
+
+  &__pan {
+    padding-bottom: 20px;
+    padding-top: 15px;
+    height: 38px;
+  }
+
+  &__bar {
+    display: block;
+    width: 50px;
+    height: 3px;
+    border-radius: 14px;
+    margin: 0 auto;
+    cursor: pointer;
+  }
+
+  &.closed {
+    opacity: 0;
+    visibility: hidden;
+
+    .bottom-sheet__backdrop {
+      animation: hide 0.3s ease;
+    }
+  }
+
+  &.moving {
+    .bottom-sheet__card {
+      transition: none;
+    }
+  }
+
+  &.opened {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .bottom-sheet__backdrop {
+      animation: show 0.3s ease;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .bottom-sheet__card {
+      &.fx-fadein-scale {
+        transform: translate(-50%, 0) scale(1);
+        opacity: 1;
+      }
+
+      &.fx-slide-from-right {
+        transform: translate(-50%, 0);
+        opacity: 1;
+      }
+
+      &.fx-slide-from-left {
+        transform: translate(-50%, 0);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes hide {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+</style>
diff --git a/js/src/components/Logo.vue b/js/src/components/MobilizonLogo.vue
similarity index 90%
rename from js/src/components/Logo.vue
rename to js/src/components/MobilizonLogo.vue
index 92c1d47ea..c179e0e89 100644
--- a/js/src/components/Logo.vue
+++ b/js/src/components/MobilizonLogo.vue
@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
+  <svg
+    class="bg-white dark:bg-zinc-900 dark:fill-white"
+    :class="{ 'bg-gray-900': invert }"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 248.16 46.78"
+  >
     <title>Mobilizon Logo</title>
     <g data-name="header">
       <path
@@ -27,20 +32,11 @@
   </svg>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class Logo extends Vue {
-  @Prop({ type: Boolean, required: false, default: false }) invert!: boolean;
-}
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    invert?: boolean;
+  }>(),
+  { invert: false }
+);
 </script>
-<style lang="scss" scoped>
-svg {
-  fill: $background-color;
-
-  &.invert {
-    fill: $secondary;
-  }
-}
-</style>
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 0d8d6ed2c..8a85f7bd3 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,65 +1,255 @@
 <template>
-  <b-navbar
+  <nav
+    class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900"
+    id="navbar"
+  >
+    <div class="container mx-auto flex flex-wrap items-center mx-auto gap-4">
+      <router-link :to="{ name: RouteName.HOME }" class="flex items-center">
+        <MobilizonLogo class="w-40" />
+      </router-link>
+      <div class="flex items-center md:order-2 ml-auto" v-if="currentActor?.id">
+        <o-dropdown position="bottom-left">
+          <template #trigger>
+            <button
+              type="button"
+              class="flex mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+              id="user-menu-button"
+              aria-expanded="false"
+            >
+              <span class="sr-only">{{ t("Open user menu") }}</span>
+              <figure class="h-8 w-8" v-if="currentActor?.avatar">
+                <img
+                  class="rounded-full w-full h-full object-cover"
+                  alt=""
+                  :src="currentActor?.avatar.url"
+                  width="32"
+                  height="32"
+                />
+              </figure>
+              <AccountCircle v-else :size="32" />
+            </button>
+          </template>
+
+          <!-- Dropdown menu -->
+          <div
+            class="z-50 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-zinc-700 dark:divide-gray-600 max-w-xs"
+            position="bottom-left"
+          >
+            <o-dropdown-item aria-role="listitem">
+              <div class="px-4">
+                <span class="block text-sm text-zinc-900 dark:text-white">{{
+                  displayName(currentActor)
+                }}</span>
+                <span
+                  class="block text-sm font-medium text-zinc-500 truncate dark:text-zinc-400"
+                  v-if="currentUser?.role === ICurrentUserRole.ADMINISTRATOR"
+                  >{{ t("Administrator") }}</span
+                >
+                <span
+                  class="block text-sm font-medium text-zinc-500 truncate dark:text-zinc-400"
+                  v-if="currentUser?.role === ICurrentUserRole.MODERATOR"
+                  >{{ t("Moderator") }}</span
+                >
+              </div>
+            </o-dropdown-item>
+            <o-dropdown-item
+              v-for="identity in identities"
+              :active="identity.id === currentActor.id"
+              :key="identity.id"
+              tabindex="0"
+              @click="
+                setIdentity({
+                  preferredUsername: identity.preferredUsername,
+                })
+              "
+              @keyup.enter="
+                setIdentity({
+                  preferredUsername: identity.preferredUsername,
+                })
+              "
+            >
+              <div class="flex gap-1 items-center">
+                <div class="flex-none">
+                  <figure class="" v-if="identity.avatar">
+                    <img
+                      class="rounded-full h-8 w-8"
+                      loading="lazy"
+                      :src="identity.avatar.url"
+                      alt=""
+                      height="32"
+                      width="32"
+                    />
+                  </figure>
+                  <AccountCircle v-else :size="32" />
+                </div>
+
+                <div
+                  class="text-base text-zinc-700 dark:text-zinc-100 flex flex-col flex-auto overflow-hidden items-start"
+                >
+                  <p class="truncate">{{ displayName(identity) }}</p>
+                  <p class="truncate text-sm" v-if="identity.name">
+                    @{{ identity.preferredUsername }}
+                  </p>
+                </div>
+              </div>
+            </o-dropdown-item>
+            <o-dropdown-item
+              aria-role="listitem"
+              tag="router-link"
+              :to="{ name: RouteName.SETTINGS }"
+            >
+              <span
+                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 dark:hover:text-white"
+                >{{ t("My account") }}</span
+              >
+            </o-dropdown-item>
+            <o-dropdown-item
+              aria-role="listitem"
+              v-if="currentUser?.role === ICurrentUserRole.ADMINISTRATOR"
+              tag="router-link"
+              :to="{ name: RouteName.ADMIN_DASHBOARD }"
+            >
+              <span
+                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 dark:hover:text-white"
+                >{{ t("Administration") }}</span
+              >
+            </o-dropdown-item>
+            <o-dropdown-item
+              aria-role="listitem"
+              @click="logout"
+              @keyup.enter="logout"
+            >
+              <span
+                class="block py-2 px-4 text-sm text-zinc-700 dark:text-zinc-200 dark:hover:text-white"
+                >{{ t("Log out") }}</span
+              >
+            </o-dropdown-item>
+          </div>
+        </o-dropdown>
+      </div>
+      <button
+        @click="showMobileMenu = !showMobileMenu"
+        type="button"
+        class="inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600"
+        aria-controls="mobile-menu-2"
+        aria-expanded="false"
+      >
+        <span class="sr-only">{{ t("Open main menu") }}</span>
+        <svg
+          class="w-6 h-6"
+          aria-hidden="true"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </button>
+      <div
+        class="justify-between items-center w-full md:flex md:w-auto md:order-1"
+        id="mobile-menu-2"
+        :class="{ hidden: !showMobileMenu }"
+      >
+        <ul
+          class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
+        >
+          <li v-if="currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.MY_EVENTS }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("My events") }}</router-link
+            >
+          </li>
+          <li v-if="currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.MY_GROUPS }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("My groups") }}</router-link
+            >
+          </li>
+          <li v-if="!currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.LOGIN }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Login") }}</router-link
+            >
+          </li>
+          <li v-if="!currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.REGISTER }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Register") }}</router-link
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <!-- <o-navbar
     id="navbar"
     type="is-secondary"
-    wrapper-class="container"
-    :active.sync="mobileNavbarActive"
+    wrapper-class="container mx-auto"
+    v-model:active="mobileNavbarActive"
   >
-    <template slot="brand">
-      <b-navbar-item
+    <template #brand>
+      <o-navbar-item
         tag="router-link"
         :to="{ name: RouteName.HOME }"
         :aria-label="$t('Home')"
       >
         <logo />
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-    <template slot="start">
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
+    <template #start>
+      <o-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
         $t("Explore")
-      }}</b-navbar-item>
-      <b-navbar-item
-        v-if="currentActor.id && currentUser.isLoggedIn"
+      }}</o-navbar-item>
+      <o-navbar-item
+        v-if="currentActor.id && currentUser?.isLoggedIn"
         tag="router-link"
         :to="{ name: RouteName.MY_EVENTS }"
-        >{{ $t("My events") }}</b-navbar-item
+        >{{ $t("My events") }}</o-navbar-item
       >
-      <b-navbar-item
+      <o-navbar-item
         tag="router-link"
         :to="{ name: RouteName.MY_GROUPS }"
         v-if="
           config &&
           config.features.groups &&
           currentActor.id &&
-          currentUser.isLoggedIn
+          currentUser?.isLoggedIn
         "
-        >{{ $t("My groups") }}</b-navbar-item
+        >{{ $t("My groups") }}</o-navbar-item
       >
-      <b-navbar-item
+      <o-navbar-item
         tag="span"
         v-if="
           config &&
           config.features.eventCreation &&
           currentActor.id &&
-          currentUser.isLoggedIn
+          currentUser?.isLoggedIn
         "
       >
-        <b-button
+        <o-button
           v-if="!hideCreateEventsButton"
           tag="router-link"
           :to="{ name: RouteName.CREATE_EVENT }"
-          type="is-primary"
-          >{{ $t("Create") }}</b-button
+          variant="primary"
+          >{{ $t("Create") }}</o-button
         >
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-    <template slot="end">
-      <b-navbar-item tag="div">
+    <template #end>
+      <o-navbar-item tag="div">
         <search-field @navbar-search="mobileNavbarActive = false" />
-      </b-navbar-item>
+      </o-navbar-item>
 
-      <b-navbar-dropdown
-        v-if="currentActor.id && currentUser.isLoggedIn"
+      <o-navbar-dropdown
+        v-if="currentActor.id && currentUser?.isLoggedIn"
         right
         collapsible
         ref="user-dropdown"
@@ -67,7 +257,7 @@
         tag="span"
         @keyup.enter="toggleMenu"
       >
-        <template slot="label" v-if="currentActor">
+        <template #label v-if="currentActor">
           <div class="identity-wrapper">
             <div>
               <figure class="image is-32x32" v-if="currentActor.avatar">
@@ -77,7 +267,7 @@
                   :src="currentActor.avatar.url"
                 />
               </figure>
-              <b-icon v-else icon="account-circle" />
+              <o-icon v-else icon="account-circle" />
             </div>
             <div class="media-content is-hidden-desktop">
               <span>{{ displayName(currentActor) }}</span>
@@ -88,17 +278,21 @@
           </div>
         </template>
 
-        <!-- No identities dropdown if no identities -->
-        <span v-if="identities.length <= 1" />
-        <b-navbar-item
+        No identities dropdown if no identities
+        <span v-if="identities.length <= 1"></span>
+        <o-navbar-item
           tag="span"
           v-for="identity in identities"
           v-else
           :active="identity.id === currentActor.id"
           :key="identity.id"
           tabindex="0"
-          @click="setIdentity(identity)"
-          @keyup.enter="setIdentity(identity)"
+          @click="setIdentity({
+      preferredUsername: identity.preferredUsername,
+    })"
+          @keyup.enter="setIdentity({
+      preferredUsername: identity.preferredUsername,
+    })"
         >
           <span>
             <div class="media-left">
@@ -110,7 +304,7 @@
                   alt
                 />
               </figure>
-              <b-icon v-else size="is-medium" icon="account-circle" />
+              <o-icon v-else size="is-medium" icon="account-circle" />
             </div>
 
             <div class="media-content">
@@ -122,31 +316,31 @@
           </span>
 
           <hr class="navbar-divider" role="presentation" />
-        </b-navbar-item>
+        </o-navbar-item>
 
-        <b-navbar-item
+        <o-navbar-item
           tag="router-link"
           :to="{ name: RouteName.UPDATE_IDENTITY }"
-          >{{ $t("My account") }}</b-navbar-item
+          >{{ $t("My account") }}</o-navbar-item
         >
-        <b-navbar-item
+        <o-navbar-item
           v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
           tag="router-link"
           :to="{ name: RouteName.ADMIN_DASHBOARD }"
-          >{{ $t("Administration") }}</b-navbar-item
+          >{{ $t("Administration") }}</o-navbar-item
         >
 
-        <b-navbar-item
+        <o-navbar-item
           tag="span"
           tabindex="0"
           @click="logout"
           @keyup.enter="logout"
         >
           <span>{{ $t("Log out") }}</span>
-        </b-navbar-item>
-      </b-navbar-dropdown>
+        </o-navbar-item>
+      </o-navbar-dropdown>
 
-      <b-navbar-item v-else tag="div">
+      <o-navbar-item v-else tag="div">
         <div class="buttons">
           <router-link
             class="button is-primary"
@@ -162,217 +356,172 @@
             >{{ $t("Log in") }}</router-link
           >
         </div>
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-  </b-navbar>
+  </o-navbar> -->
 </template>
 
-<script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
-import Logo from "@/components/Logo.vue";
-import { GraphQLError } from "graphql";
-import { loadLanguageAsync } from "@/utils/i18n";
+<script lang="ts" setup>
+import MobilizonLogo from "@/components/MobilizonLogo.vue";
 import { ICurrentUserRole } from "@/types/enums";
-import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
-import { changeIdentity, logout } from "../utils/auth";
-import {
-  CURRENT_ACTOR_CLIENT,
-  IDENTITIES,
-  UPDATE_DEFAULT_ACTOR,
-} from "../graphql/actor";
-import { displayName, IPerson, Person } from "../types/actor";
-import { CONFIG } from "../graphql/config";
-import { IConfig } from "../types/config.model";
-import { ICurrentUser, IUser } from "../types/current-user.model";
-import SearchField from "./SearchField.vue";
+import { logout } from "../utils/auth";
+import { displayName } from "../types/actor";
 import RouteName from "../router/name";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+// import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useCurrentUserClient } from "@/composition/apollo/user";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+} from "@/composition/apollo/actor";
+import { useMutation } from "@vue/apollo-composable";
+import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
+import { changeIdentity } from "@/utils/identity";
+// import { useRestrictions } from "@/composition/apollo/config";
 
-@Component({
-  apollo: {
-    currentUser: CURRENT_USER_CLIENT,
-    currentActor: CURRENT_ACTOR_CLIENT,
-    identities: {
-      query: IDENTITIES,
-      update: ({ identities }) =>
-        identities
-          ? identities.map((identity: IPerson) => new Person(identity))
-          : [],
-      skip() {
-        return this.currentUser.isLoggedIn === false;
-      },
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
-      },
-    },
-    config: CONFIG,
-    loggedUser: {
-      query: USER_SETTINGS,
-      skip() {
-        return !this.currentUser || this.currentUser.isLoggedIn === false;
-      },
-    },
-  },
-  components: {
-    Logo,
-    SearchField,
-  },
-})
-export default class NavBar extends Vue {
-  currentActor!: IPerson;
+const { currentUser } = useCurrentUserClient();
+const { currentActor } = useCurrentActorClient();
+// const { restrictions } = useRestrictions();
 
-  config!: IConfig;
+// const userDropdown = ref();
 
-  currentUser!: ICurrentUser;
+const router = useRouter();
+// const route = useRoute();
 
-  loggedUser!: IUser;
+const { identities } = useCurrentUserIdentities();
 
-  ICurrentUserRole = ICurrentUserRole;
+// const mobileNavbarActive = ref(false);
 
-  identities: IPerson[] = [];
+// const toggleMenu = (): void => {
+//   console.debug("called toggleMenu");
+//   userDropdown.value.showMenu();
+// };
 
-  RouteName = RouteName;
+const { t } = useI18n({ useScope: "global" });
 
-  mobileNavbarActive = false;
-
-  displayName = displayName;
-
-  @Ref("user-dropdown") userDropDown!: any;
-
-  toggleMenu(): void {
-    console.debug("called toggleMenu");
-    this.userDropDown.showMenu();
-  }
-
-  @Watch("currentActor")
-  async initializeListOfIdentities(): Promise<void> {
-    if (!this.currentUser.isLoggedIn) return;
-    const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
-      query: IDENTITIES,
-    });
-    if (data) {
-      this.identities = data.identities.map(
-        (identity: IPerson) => new Person(identity)
-      );
-
-      // If we don't have any identities, the user has validated their account,
-      // is logging for the first time but didn't create an identity somehow
-      if (this.identities.length === 0) {
-        console.debug(
-          "We have no identities listed for current user",
-          this.identities
-        );
-        console.debug("Pushing route to REGISTER_PROFILE");
-        try {
-          await this.$router.push({
-            name: RouteName.REGISTER_PROFILE,
-            params: {
-              email: this.currentUser.email,
-              userAlreadyActivated: "true",
-            },
-          });
-        } catch (err) {
-          return undefined;
-        }
-      }
-    }
-  }
-
-  @Watch("loggedUser")
-  setSavedLanguage(): void {
-    if (this.loggedUser?.locale) {
-      console.debug("Setting locale from navbar");
-      loadLanguageAsync(this.loggedUser.locale);
-    }
-  }
-
-  async handleErrors(errors: GraphQLError[]): Promise<void> {
-    if (
-      errors.length > 0 &&
-      errors[0].message ===
-        "You need to be logged-in to view your list of identities"
-    ) {
-      await this.logout();
-    }
-  }
-
-  async logout(): Promise<void> {
-    await logout(this.$apollo.provider.defaultClient);
-    this.$buefy.notification.open({
-      message: this.$t("You have been disconnected") as string,
-      type: "is-success",
-      position: "is-bottom-right",
-      duration: 5000,
-    });
-
-    if (this.$route.name === RouteName.HOME) return;
-    await this.$router.push({ name: RouteName.HOME });
-  }
-
-  async setIdentity(identity: IPerson): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: UPDATE_DEFAULT_ACTOR,
-      variables: {
-        preferredUsername: identity.preferredUsername,
+watch(identities, () => {
+  // If we don't have any identities, the user has validated their account,
+  // is logging for the first time but didn't create an identity somehow
+  if (identities.value && identities.value.length === 0) {
+    console.debug(
+      "We have no identities listed for current user",
+      identities.value
+    );
+    console.debug("Pushing route to REGISTER_PROFILE");
+    router.push({
+      name: RouteName.REGISTER_PROFILE,
+      params: {
+        email: currentUser.value?.email,
+        userAlreadyActivated: "true",
       },
     });
-    return changeIdentity(this.$apollo.provider.defaultClient, identity);
   }
+});
 
-  get hideCreateEventsButton(): boolean {
-    return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
-  }
-}
+// watch(loggedUser, () => {
+//   if (loggedUser.value?.locale) {
+//     console.debug("Setting locale from navbar");
+//     loadLanguageAsync(loggedUser.value?.locale);
+//   }
+// });
+
+// const handleErrors = async (errors: GraphQLError[]): Promise<void> => {
+//   if (
+//     errors.length > 0 &&
+//     errors[0].message ===
+//       "You need to be logged-in to view your list of identities"
+//   ) {
+//     await doLogout();
+//   }
+// };
+
+// const { oruga } = useProgrammatic();
+
+// const doLogout = async (): Promise<void> => {
+//   await logout();
+//   oruga.notification.open({
+//     message: t("You have been disconnected"),
+//     variant: "success",
+//     position: "is-bottom-right",
+//     duration: 5000,
+//   });
+
+//   if (route.name === RouteName.HOME) return;
+//   await router.push({ name: RouteName.HOME });
+// };
+
+const { onDone, mutate: setIdentity } = useMutation<{
+  changeDefaultActor: { id: string; defaultActor: { id: string } };
+}>(UPDATE_DEFAULT_ACTOR);
+
+onDone(({ data }) => {
+  const identity = identities.value?.find(
+    ({ id }) => id === data?.changeDefaultActor?.defaultActor?.id
+  );
+  if (!identity) return;
+  changeIdentity(identity);
+});
+
+// const hideCreateEventsButton = computed((): boolean => {
+//   return !!restrictions.value?.onlyGroupsCanCreateEvents;
+// });
+
+// @Component({
+//   apollo: {
+//     currentUser: CURRENT_USER_CLIENT,
+//     currentActor: CURRENT_ACTOR_CLIENT,
+//     // identities: {
+//     //   query: IDENTITIES,
+//     //   update: ({ identities }) =>
+//     //     identities
+//     //       ? identities.map((identity: IPerson) => new Person(identity))
+//     //       : [],
+//     //   skip() {
+//     //     return this.currentUser.isLoggedIn === false;
+//     //   },
+//     //   error({ graphQLErrors }) {
+//     //     this.handleErrors(graphQLErrors);
+//     //   },
+//     // },
+//     config: CONFIG,
+//     loggedUser: {
+//       query: USER_SETTINGS,
+//       skip() {
+//         return !this.currentUser || this.currentUser.isLoggedIn === false;
+//       },
+//     },
+//   },
+// })
+// export default class NavBar extends Vue {
+//   currentActor!: IPerson;
+
+//   config!: IConfig;
+
+//   currentUser!: ICurrentUser;
+
+//   loggedUser!: IUser;
+
+//   ICurrentUserRole = ICurrentUserRole;
+
+//   identities: IPerson[] = [];
+
+//   RouteName = RouteName;
+
+//   mobileNavbarActive = false;
+
+//   displayName = displayName;
+
+//   // @Ref("user-dropdown") userDropDown!: any;
+
+//   // toggleMenu(): void {
+//   //   console.debug("called toggleMenu");
+//   //   this.userDropDown.showMenu();
+//   // }
+
+// }
+
+const showMobileMenu = ref(false);
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-nav {
-  .navbar-item {
-    a.button {
-      font-weight: bold;
-    }
-
-    svg {
-      height: 1.75rem;
-    }
-  }
-
-  .navbar-dropdown .navbar-item {
-    cursor: pointer;
-
-    span {
-      display: flex;
-    }
-
-    &.is-active {
-      background: $secondary;
-    }
-
-    span.icon.is-medium {
-      display: flex;
-    }
-
-    img {
-      max-height: 2.5em;
-    }
-  }
-
-  .navbar-item.has-dropdown a.navbar-link figure {
-    @include margin-right(0.75rem);
-    display: flex;
-    align-items: center;
-  }
-
-  a.navbar-item:focus-within {
-    background-color: inherit;
-  }
-
-  .identity-wrapper {
-    display: flex;
-
-    .media-content span {
-      display: flex;
-      color: $violet-2;
-    }
-  }
-}
-</style>
diff --git a/js/src/components/PageFooter.vue b/js/src/components/PageFooter.vue
new file mode 100644
index 000000000..2ae331cc6
--- /dev/null
+++ b/js/src/components/PageFooter.vue
@@ -0,0 +1,115 @@
+<template>
+  <footer
+    class="bg-violet-2 color-secondary flex flex-col items-center py-2 px-3"
+    ref="footer"
+  >
+    <picture class="flex max-w-xl">
+      <source
+        :srcset="`/img/pics/footer_${random}-1024w.webp 1x, /img/pics/footer_${random}-1920w.webp 2x`"
+        type="image/webp"
+      />
+      <img
+        :src="`/img/pics/footer_${random}-1024w.webp`"
+        alt=""
+        width="1024"
+        height="428"
+        loading="lazy"
+      />
+    </picture>
+    <ul
+      class="inline-flex flex-wrap justify-around gap-3 text-lg text-white underline decoration-yellow-1"
+    >
+      <li>
+        <o-select
+          class="text-black dark:text-white"
+          :aria-label="t('Language')"
+          v-model="locale"
+          :placeholder="t('Select a language')"
+        >
+          <option
+            v-for="(language, lang) in langs"
+            :value="lang"
+            :key="lang"
+            :selected="isLangSelected(lang)"
+          >
+            {{ language }}
+          </option>
+        </o-select>
+      </li>
+      <li>
+        <router-link :to="{ name: RouteName.ABOUT }">{{
+          t("About")
+        }}</router-link>
+      </li>
+      <li>
+        <router-link :to="{ name: RouteName.TERMS }">{{
+          t("Terms")
+        }}</router-link>
+      </li>
+      <li>
+        <a
+          rel="external"
+          hreflang="en"
+          href="https://framagit.org/framasoft/mobilizon/blob/main/LICENSE"
+        >
+          {{ t("License") }}
+        </a>
+      </li>
+      <li>
+        <a href="#navbar">{{ t("Back to top") }}</a>
+      </li>
+    </ul>
+    <div class="text-center flex-1 pt-2 text-yellow-1">
+      <i18n-t
+        tag="span"
+        keypath="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
+      >
+        <template #mobilizon>
+          <a
+            rel="external"
+            class="text-white underline decoration-yellow-1"
+            href="https://joinmobilizon.org"
+            >{{ t("Mobilizon") }}</a
+          >
+        </template>
+        <template #date
+          ><span>{{ new Date().getFullYear() }}</span></template
+        >
+        <template #contributors>
+          <a
+            rel="external"
+            class="text-white underline decoration-yellow-1"
+            href="https://joinmobilizon.org/hall-of-fame"
+            >{{ t("more than 1360 contributors") }}</a
+          >
+        </template>
+      </i18n-t>
+    </div>
+  </footer>
+</template>
+<script setup lang="ts">
+import { saveLocaleData } from "@/utils/auth";
+import { loadLanguageAsync } from "@/utils/i18n";
+import RouteName from "../router/name";
+import langs from "../i18n/langs.json";
+import { computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { locale, t } = useI18n({ useScope: "global" });
+
+const random = computed((): number => {
+  return Math.floor(Math.random() * 4) + 1;
+});
+
+watch(locale, async () => {
+  if (locale) {
+    console.debug("Setting locale from footer");
+    await loadLanguageAsync(locale.value as string);
+    saveLocaleData(locale.value as string);
+  }
+});
+
+const isLangSelected = (lang: string): boolean => {
+  return lang === locale.value;
+};
+</script>
diff --git a/js/src/components/Participation/ConfirmParticipation.vue b/js/src/components/Participation/ConfirmParticipation.vue
index b27b49701..935daad0a 100644
--- a/js/src/components/Participation/ConfirmParticipation.vue
+++ b/js/src/components/Participation/ConfirmParticipation.vue
@@ -1,60 +1,58 @@
 <template>
-  <section class="section container">
+  <section class="container mx-auto">
     <h1 class="title" v-if="loading">
-      {{ $t("Your participation request is being validated") }}
+      {{ t("Your participation request is being validated") }}
     </h1>
     <div v-else>
       <div v-if="failed && participation === undefined">
-        <b-message
-          :title="$t('Error while validating participation request')"
-          type="is-danger"
+        <o-notification
+          :title="t('Error while validating participation request')"
+          variant="danger"
         >
           {{
-            $t(
+            t(
               "Either the participation request has already been validated, either the validation token is incorrect."
             )
           }}
-        </b-message>
+        </o-notification>
       </div>
       <div v-else>
         <h1 class="title">
-          {{ $t("Your participation request has been validated") }}
+          {{ t("Your participation request has been validated") }}
         </h1>
         <p
-          class="content"
-          v-if="participation.event.joinOptions == EventJoinOptions.RESTRICTED"
+          class="prose dark:prose-invert"
+          v-if="participation?.event.joinOptions == EventJoinOptions.RESTRICTED"
         >
           {{
-            $t("Your participation still has to be approved by the organisers.")
+            t("Your participation still has to be approved by the organisers.")
           }}
         </p>
         <div v-if="failed">
-          <b-message
+          <o-notification
             :title="
-              $t(
-                'Error while updating participation status inside this browser'
-              )
+              t('Error while updating participation status inside this browser')
             "
-            type="is-warning"
+            variant="warning"
           >
             {{
-              $t(
+              t(
                 "We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue."
               )
             }}
-          </b-message>
+          </o-notification>
         </div>
         <div class="columns has-text-centered">
           <div class="column">
-            <router-link
-              native-type="button"
-              tag="a"
-              class="button is-primary is-large"
+            <o-button
+              tag="router-link"
+              variant="primary"
+              size="large"
               :to="{
                 name: RouteName.EVENT,
-                params: { uuid: this.participation.event.uuid },
+                params: { uuid: participation?.event.uuid },
               }"
-              >{{ $t("Go to the event page") }}</router-link
+              >{{ t("Go to the event page") }}</o-button
             >
           </div>
         </div>
@@ -63,60 +61,50 @@
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { confirmLocalAnonymousParticipation } from "@/services/AnonymousParticipationStorage";
 import { EventJoinOptions } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
 import RouteName from "../../router/name";
 import { CONFIRM_PARTICIPATION } from "../../graphql/event";
+import { computed, ref } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
 
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Confirm participation") as string,
-    };
-  },
-})
-export default class ConfirmParticipation extends Vue {
-  @Prop({ type: String, required: true }) token!: string;
+const { t } = useI18n({ useScope: "global" });
 
-  loading = true;
+useHead({
+  title: computed(() => t("Confirm participation")),
+});
 
-  failed = false;
+const props = defineProps<{
+  token: string;
+}>();
 
-  participation!: IParticipant;
+const loading = ref(true);
+const failed = ref(false);
+const participation = ref<IParticipant | null | undefined>(null);
 
-  EventJoinOptions = EventJoinOptions;
+const { onDone, onError, mutate } = useMutation<{
+  confirmParticipation: IParticipant;
+}>(CONFIRM_PARTICIPATION);
 
-  RouteName = RouteName;
+mutate({
+  token: props.token,
+});
 
-  async created(): Promise<void> {
-    await this.validateAction();
+onDone(async ({ data }) => {
+  participation.value = data?.confirmParticipation;
+  if (participation.value) {
+    await confirmLocalAnonymousParticipation(participation.value?.event.uuid);
   }
+  loading.value = false;
+});
 
-  async validateAction(): Promise<void> {
-    try {
-      const { data } = await this.$apollo.mutate<{
-        confirmParticipation: IParticipant;
-      }>({
-        mutation: CONFIRM_PARTICIPATION,
-        variables: {
-          token: this.token,
-        },
-      });
-
-      if (data) {
-        const { confirmParticipation: participation } = data;
-        this.participation = participation;
-        await confirmLocalAnonymousParticipation(this.participation.event.uuid);
-      }
-    } catch (err) {
-      console.error(err);
-      this.failed = true;
-    } finally {
-      this.loading = false;
-    }
-  }
-}
+onError((err) => {
+  console.error(err);
+  failed.value = true;
+  loading.value = false;
+});
 </script>
diff --git a/js/src/components/Participation/ParticipationSection.vue b/js/src/components/Participation/ParticipationSection.vue
index 96badea38..a0ef1d248 100644
--- a/js/src/components/Participation/ParticipationSection.vue
+++ b/js/src/components/Participation/ParticipationSection.vue
@@ -1,14 +1,12 @@
 <template>
   <div>
-    <div
-      class="event-participation has-text-right"
-      v-if="isEventNotAlreadyPassed"
-    >
+    <div class="event-participation" v-if="isEventNotAlreadyPassed">
       <participation-button
         v-if="shouldShowParticipationButton"
         :participation="participation"
         :event="event"
         :current-actor="currentActor"
+        :identities="identities"
         @join-event="(actor) => $emit('join-event', actor)"
         @join-modal="$emit('join-modal')"
         @join-event-with-confirmation="
@@ -16,223 +14,205 @@
         "
         @confirm-leave="$emit('confirm-leave')"
       />
-      <b-button
-        type="is-text"
+      <o-button
+        variant="text"
         v-if="!actorIsParticipant && anonymousParticipation !== null"
         @click="$emit('cancel-anonymous-participation')"
-        >{{ $t("Cancel anonymous participation") }}</b-button
+        >{{ t("Cancel anonymous participation") }}</o-button
       >
       <small v-if="!actorIsParticipant && anonymousParticipation">
-        {{ $t("You are participating in this event anonymously") }}
-        <b-tooltip :label="$t('Click for more information')">
-          <span
-            class="is-clickable"
-            @click="isAnonymousParticipationModalOpen = true"
-          >
-            <b-icon size="is-small" icon="information-outline" />
+        {{ t("You are participating in this event anonymously") }}
+        <VTooltip>
+          <template #popper>
+            {{ t("Click for more information") }}
+          </template>
+          <span @click="isAnonymousParticipationModalOpen = true">
+            <InformationOutline :size="16" />
           </span>
-        </b-tooltip>
+        </VTooltip>
       </small>
       <small
         v-else-if="!actorIsParticipant && anonymousParticipation === false"
       >
         {{
-          $t(
+          t(
             "You are participating in this event anonymously but didn't confirm participation"
           )
         }}
-        <b-tooltip
-          :label="
-            $t(
-              'This information is saved only on your computer. Click for details'
-            )
-          "
-        >
+        <VTooltip>
+          <template #popper>
+            {{
+              t(
+                "This information is saved only on your computer. Click for details"
+              )
+            }}
+          </template>
           <router-link :to="{ name: RouteName.TERMS }">
-            <b-icon size="is-small" icon="help-circle-outline" />
+            <HelpCircleOutline :size="16" />
           </router-link>
-        </b-tooltip>
+        </VTooltip>
       </small>
     </div>
     <div v-else>
-      <button class="button is-primary" type="button" slot="trigger" disabled>
-        <template>
-          <span>{{ $t("Event already passed") }}</span>
-        </template>
-        <b-icon icon="menu-down" />
-      </button>
+      <o-button variant="primary" disabled icon-left="menu-down">
+        {{ t("Event already passed") }}
+      </o-button>
     </div>
-    <b-modal
-      :active.sync="isAnonymousParticipationModalOpen"
+    <o-modal
+      v-model:active="isAnonymousParticipationModalOpen"
       has-modal-card
-      :close-button-aria-label="$t('Close')"
+      :close-button-aria-label="t('Close')"
       ref="anonymous-participation-modal"
     >
       <div class="modal-card">
         <header class="modal-card-head">
           <p class="modal-card-title">
-            {{ $t("About anonymous participation") }}
+            {{ t("About anonymous participation") }}
           </p>
         </header>
 
         <section class="modal-card-body">
-          <b-notification
-            type="is-primary"
+          <o-notification
+            variant="primary"
             :closable="false"
             v-if="event.joinOptions === EventJoinOptions.RESTRICTED"
           >
             {{
-              $t(
+              t(
                 "As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
               )
             }}
-          </b-notification>
+          </o-notification>
           <p>
             {{
-              $t(
+              t(
                 "Your participation status is saved only on this device and will be deleted one month after the event's passed."
               )
             }}
           </p>
-          <p v-if="isSecureContext">
+          <p v-if="isSecureContext()">
             {{
-              $t(
+              t(
                 "You may clear all participation information for this device with the buttons below."
               )
             }}
           </p>
-          <div class="buttons" v-if="isSecureContext">
-            <b-button
-              type="is-danger is-outlined"
+          <div class="buttons" v-if="isSecureContext()">
+            <o-button
+              variant="danger"
+              outlined
               @click="clearEventParticipationData"
             >
-              {{ $t("Clear participation data for this event") }}
-            </b-button>
-            <b-button type="is-danger" @click="clearAllParticipationData">
-              {{ $t("Clear participation data for all events") }}
-            </b-button>
+              {{ t("Clear participation data for this event") }}
+            </o-button>
+            <o-button variant="danger" @click="clearAllParticipationData">
+              {{ t("Clear participation data for all events") }}
+            </o-button>
           </div>
         </section>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { EventJoinOptions, EventStatus, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "@/types/participant.model";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import RouteName from "@/router/name";
 import { IEvent } from "@/types/event.model";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { IPerson } from "@/types/actor";
-import { IConfig } from "@/types/config.model";
-import { CONFIG } from "@/graphql/config";
 import {
   removeAllAnonymousParticipations,
   removeAnonymousParticipation,
 } from "@/services/AnonymousParticipationStorage";
 import ParticipationButton from "../Event/ParticipationButton.vue";
+import { computed, ref } from "vue";
+import InformationOutline from "vue-material-design-icons/InformationOutline.vue";
+import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
+import { useI18n } from "vue-i18n";
+import { IPerson } from "@/types/actor";
+import { IAnonymousParticipationConfig } from "@/types/config.model";
 
-@Component({
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-    config: CONFIG,
-  },
-  components: {
-    ParticipationButton,
-  },
-})
-export default class ParticipationSection extends Vue {
-  @Prop({ required: true }) participation!: IParticipant;
+const { t } = useI18n({ useScope: "global" });
 
-  @Prop({ required: true }) event!: IEvent;
-
-  @Prop({ required: true, default: null }) anonymousParticipation!:
-    | boolean
-    | null;
-
-  currentActor!: IPerson;
-
-  config!: IConfig;
-
-  RouteName = RouteName;
-
-  EventJoinOptions = EventJoinOptions;
-
-  isAnonymousParticipationModalOpen = false;
-
-  get actorIsParticipant(): boolean {
-    if (this.actorIsOrganizer) return true;
-
-    return (
-      this.participation &&
-      this.participation.role === ParticipantRole.PARTICIPANT
-    );
+const props = withDefaults(
+  defineProps<{
+    participation: IParticipant | undefined;
+    event: IEvent;
+    anonymousParticipation?: boolean | null;
+    currentActor: IPerson;
+    identities: IPerson[];
+    anonymousParticipationConfig: IAnonymousParticipationConfig;
+  }>(),
+  {
+    anonymousParticipation: null,
   }
+);
 
-  get actorIsOrganizer(): boolean {
-    return (
-      this.participation && this.participation.role === ParticipantRole.CREATOR
-    );
-  }
+const isAnonymousParticipationModalOpen = ref(false);
 
-  get shouldShowParticipationButton(): boolean {
-    // If we have an anonymous participation, don't show the participation button
-    if (
-      this.config &&
-      this.config.anonymous.participation.allowed &&
-      this.anonymousParticipation
-    ) {
-      return false;
-    }
+const actorIsParticipant = computed((): boolean => {
+  if (actorIsOrganizer.value) return true;
 
-    // So that people can cancel their participation
-    if (this.actorIsParticipant) return true;
+  return props.participation?.role === ParticipantRole.PARTICIPANT;
+});
 
-    // You can participate to draft or cancelled events
-    if (this.event.draft || this.event.status === EventStatus.CANCELLED)
-      return false;
+const actorIsOrganizer = computed((): boolean => {
+  return props.participation?.role === ParticipantRole.CREATOR;
+});
 
-    // If capacity is OK
-    if (this.eventCapacityOK) return true;
-
-    // Else
+const shouldShowParticipationButton = computed((): boolean => {
+  // If we have an anonymous participation, don't show the participation button
+  if (
+    props.anonymousParticipationConfig?.allowed &&
+    props.anonymousParticipation
+  ) {
     return false;
   }
 
-  get eventCapacityOK(): boolean {
-    if (this.event.draft) return true;
-    if (!this.event.options.maximumAttendeeCapacity) return true;
-    return (
-      this.event.options.maximumAttendeeCapacity >
-      this.event.participantStats.participant
-    );
-  }
+  // So that people can cancel their participation
+  if (actorIsParticipant.value) return true;
 
-  get isEventNotAlreadyPassed(): boolean {
-    return new Date(this.endDate) > new Date();
-  }
+  // You can participate to draft or cancelled events
+  if (props.event.draft || props.event.status === EventStatus.CANCELLED)
+    return false;
 
-  get endDate(): Date {
-    return this.event.endsOn !== null && this.event.endsOn > this.event.beginsOn
-      ? this.event.endsOn
-      : this.event.beginsOn;
-  }
+  // If capacity is OK
+  if (eventCapacityOK.value) return true;
 
-  // eslint-disable-next-line class-methods-use-this
-  get isSecureContext(): boolean {
-    return window.isSecureContext;
-  }
+  // Else
+  return false;
+});
 
-  async clearEventParticipationData(): Promise<void> {
-    await removeAnonymousParticipation(this.event.uuid);
-    window.location.reload();
-  }
+const eventCapacityOK = computed((): boolean => {
+  if (props.event.draft) return true;
+  if (!props.event.options.maximumAttendeeCapacity) return true;
+  return (
+    props.event.options.maximumAttendeeCapacity >
+    props.event.participantStats.participant
+  );
+});
 
-  // eslint-disable-next-line class-methods-use-this
-  clearAllParticipationData(): void {
-    removeAllAnonymousParticipations();
-    window.location.reload();
-  }
-}
+const isEventNotAlreadyPassed = computed((): boolean => {
+  return new Date(endDate.value) > new Date();
+});
+
+const endDate = computed((): string => {
+  return props.event.endsOn !== null &&
+    props.event.endsOn > props.event.beginsOn
+    ? props.event.endsOn
+    : props.event.beginsOn;
+});
+
+const isSecureContext = (): boolean => {
+  return window.isSecureContext;
+};
+
+const clearEventParticipationData = async (): Promise<void> => {
+  await removeAnonymousParticipation(props.event.uuid);
+  window.location.reload();
+};
+
+const clearAllParticipationData = (): void => {
+  removeAllAnonymousParticipations();
+  window.location.reload();
+};
 </script>
diff --git a/js/src/components/Participation/ParticipationWithAccount.vue b/js/src/components/Participation/ParticipationWithAccount.vue
index 9d9e5a4f6..df8b97fb4 100644
--- a/js/src/components/Participation/ParticipationWithAccount.vue
+++ b/js/src/components/Participation/ParticipationWithAccount.vue
@@ -6,46 +6,31 @@
     :sentence="sentence"
   />
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
-import { FETCH_EVENT } from "@/graphql/event";
-import { IEvent } from "@/types/event.model";
+import { useFetchEvent } from "@/composition/apollo/event";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  components: { RedirectWithAccount },
-  apollo: {
-    event: {
-      query: FETCH_EVENT,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          uuid: this.uuid,
-        };
-      },
-      skip() {
-        return !this.uuid;
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Participation with account") as string,
-      meta: [{ name: "robots", content: "noindex" }],
-    };
-  },
-})
-export default class ParticipationWithAccount extends Vue {
-  @Prop({ type: String, required: true }) uuid!: string;
+const props = defineProps<{
+  uuid: string;
+}>();
 
-  event!: IEvent;
+const { event } = useFetchEvent(props.uuid);
 
-  get uri(): string | undefined {
-    return this.event?.url;
-  }
+const { t } = useI18n({ useScope: "global" });
 
-  sentence = this.$t(
-    "We will redirect you to your instance in order to interact with this event"
-  );
-}
+useHead({
+  title: computed(() => t("Participation with account")),
+  meta: [{ name: "robots", content: "noindex" }],
+});
+
+const uri = computed((): string | undefined => {
+  return event.value?.url;
+});
+
+const sentence = t(
+  "We will redirect you to your instance in order to interact with this event"
+);
 </script>
diff --git a/js/src/components/Participation/ParticipationWithoutAccount.vue b/js/src/components/Participation/ParticipationWithoutAccount.vue
index bf18cc5d0..8b9a24661 100644
--- a/js/src/components/Participation/ParticipationWithoutAccount.vue
+++ b/js/src/components/Participation/ParticipationWithoutAccount.vue
@@ -1,118 +1,128 @@
 <template>
-  <section class="container section hero is-fullheight">
-    <div class="hero-body" v-if="event">
-      <div class="container">
-        <form @submit.prevent="joinEvent" v-if="!formSent">
-          <p>
-            {{
-              $t(
-                "This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation."
-              )
-            }}
-          </p>
-          <b-message type="is-info">
-            {{
-              $t(
-                "Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
-              )
-            }}
-          </b-message>
-          <b-message type="is-danger" v-if="error">{{ error }}</b-message>
-          <b-field :label="$t('Email address')">
-            <b-input
-              type="email"
-              v-model="anonymousParticipation.email"
-              :placeholder="$t('Your email')"
-              required
-            ></b-input>
-          </b-field>
-          <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
-            {{
-              $t(
-                "The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
-              )
-            }}
-          </p>
-          <p v-else>
-            {{
-              $t(
-                "If you want, you may send a message to the event organizer here."
-              )
-            }}
-          </p>
-          <b-field :label="$t('Message')">
-            <b-input
-              type="textarea"
-              v-model="anonymousParticipation.message"
-              minlength="10"
-              :required="event.joinOptions === EventJoinOptions.RESTRICTED"
-            ></b-input>
-          </b-field>
-          <b-field>
-            <b-checkbox v-model="anonymousParticipation.saveParticipation">
-              <b>{{ $t("Remember my participation in this browser") }}</b>
-              <p>
-                {{
-                  $t(
-                    "Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device."
-                  )
-                }}
-              </p>
-            </b-checkbox>
-          </b-field>
-          <b-button
-            :disabled="sendingForm"
-            type="is-primary"
-            native-type="submit"
-            >{{ $t("Send email") }}</b-button
-          >
-          <div class="has-text-centered">
-            <b-button
-              native-type="button"
-              tag="a"
-              type="is-text"
-              @click="$router.go(-1)"
-              >{{ $t("Back to previous page") }}</b-button
-            >
-          </div>
-        </form>
-        <div v-else>
-          <h1 class="title">
-            {{ $t("Request for participation confirmation sent") }}
-          </h1>
-          <p class="content">
-            <span>{{
-              $t("Check your inbox (and your junk mail folder).")
-            }}</span>
-            <span
-              class="details"
-              v-if="event.joinOptions === EventJoinOptions.RESTRICTED"
-            >
+  <section class="container mx-auto">
+    <div class="" v-if="event">
+      <form @submit.prevent="joinEvent" v-if="!formSent">
+        <p>
+          {{
+            $t(
+              "This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation."
+            )
+          }}
+        </p>
+        <o-notification variant="info">
+          {{
+            $t(
+              "Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
+            )
+          }}
+        </o-notification>
+        <o-notification variant="danger" v-if="error">{{
+          error
+        }}</o-notification>
+        <o-field
+          :label="$t('Email address')"
+          labelFor="anonymousParticipationEmail"
+        >
+          <o-input
+            type="email"
+            id="anonymousParticipationEmail"
+            v-model="anonymousParticipation.email"
+            :placeholder="$t('Your email')"
+            required
+          />
+        </o-field>
+        <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
+          {{
+            $t(
+              "The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
+            )
+          }}
+        </p>
+        <p v-else>
+          {{
+            $t(
+              "If you want, you may send a message to the event organizer here."
+            )
+          }}
+        </p>
+        <o-field
+          :label="$t('Message')"
+          labelFor="anonymousParticipationMessage"
+        >
+          <o-input
+            id="anonymousParticipationMessage"
+            type="textarea"
+            v-model="anonymousParticipation.message"
+            minlength="10"
+            :required="event.joinOptions === EventJoinOptions.RESTRICTED"
+          />
+        </o-field>
+        <o-field>
+          <o-checkbox v-model="anonymousParticipation.saveParticipation">
+            <b>{{ $t("Remember my participation in this browser") }}</b>
+            <p>
               {{
                 $t(
-                  "Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation."
+                  "Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device."
                 )
-              }} </span
-            ><span class="details" v-else>{{
+              }}
+            </p>
+          </o-checkbox>
+        </o-field>
+        <div class="flex gap-2 my-2">
+          <o-button
+            :disabled="sendingForm"
+            variant="primary"
+            native-type="submit"
+            >{{ $t("Send email") }}</o-button
+          >
+          <o-button
+            native-type="button"
+            variant="text"
+            @click="$router.go(-1)"
+            >{{ $t("Back to previous page") }}</o-button
+          >
+        </div>
+      </form>
+      <div v-else>
+        <h1 class="title">
+          {{ $t("Request for participation confirmation sent") }}
+        </h1>
+        <p class="prose dark:prose-invert">
+          <span>{{ $t("Check your inbox (and your junk mail folder).") }}</span>
+          <span
+            class="details"
+            v-if="event.joinOptions === EventJoinOptions.RESTRICTED"
+          >
+            {{
               $t(
-                "Your participation will be validated once you click the confirmation link into the email."
+                "Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation."
               )
-            }}</span>
-          </p>
-          <b-message type="is-warning" v-if="error">{{ error }}</b-message>
-          <p class="content">
-            <i18n path="You may now close this window, or {return_to_event}.">
+            }} </span
+          ><span class="details" v-else>{{
+            $t(
+              "Your participation will be validated once you click the confirmation link into the email."
+            )
+          }}</span>
+        </p>
+        <o-notification variant="warning" v-if="error">{{
+          error
+        }}</o-notification>
+        <p class="prose dark:prose-invert">
+          <i18n-t
+            keypath="You may now close this window, or {return_to_event}."
+          >
+            <template #return_to_event>
               <router-link
-                slot="return_to_event"
                 :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
                 >{{ $t("return to the event's page") }}</router-link
               >
-            </i18n>
-          </p>
-        </div>
+            </template>
+          </i18n-t>
+        </p>
       </div>
     </div>
-    <b-message type="is-danger" v-else-if="!$apollo.loading"
+    <o-notification variant="danger" v-else-if="!loading"
       >{{
         $t(
           "Unable to load event for participation. The error details are provided below:"
@@ -121,162 +131,147 @@
       <details>
         <pre>{{ error }}</pre>
       </details>
-    </b-message>
+    </o-notification>
   </section>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { EventModel, IEvent } from "@/types/event.model";
+<script lang="ts" setup>
+import { IEvent } from "@/types/event.model";
 import { FETCH_EVENT_BASIC, JOIN_EVENT } from "@/graphql/event";
-import { IConfig } from "@/types/config.model";
-import { CONFIG } from "@/graphql/config";
 import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousParticipationStorage";
 import { EventJoinOptions, ParticipantRole } from "@/types/enums";
 import RouteName from "@/router/name";
 import { IParticipant } from "../../types/participant.model";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
+import { useFetchEventBasic } from "@/composition/apollo/event";
+import { useAnonymousActorId } from "@/composition/apollo/config";
+import { computed, reactive, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import { useMutation } from "@vue/apollo-composable";
 
-@Component({
-  apollo: {
-    event: {
+const error = ref<boolean | string>(false);
+
+const { anonymousActorId } = useAnonymousActorId();
+
+const props = defineProps<{
+  uuid: string;
+}>();
+const { event, loading } = useFetchEventBasic(props.uuid);
+
+const { t, locale } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Participation without account")),
+  meta: [{ name: "robots", content: "noindex" }],
+});
+
+const anonymousParticipation = reactive<{
+  email: string;
+  message: string;
+  saveParticipation: boolean;
+}>({
+  email: "",
+  message: "",
+  saveParticipation: true,
+});
+
+const formSent = ref(false);
+
+const sendingForm = ref(false);
+
+const {
+  mutate: joinEventMutation,
+  onDone: joinEventDone,
+  onError: joinEventError,
+} = useMutation<{
+  joinEvent: IParticipant;
+}>(JOIN_EVENT, () => ({
+  update: (
+    store: ApolloCache<{ joinEvent: IParticipant }>,
+    { data: updateData }: FetchResult
+  ) => {
+    if (updateData == null) {
+      console.error(
+        "Cannot update event participant cache, because of data null value."
+      );
+      return;
+    }
+
+    const cachedData = store.readQuery<{ event: IEvent }>({
       query: FETCH_EVENT_BASIC,
-      variables() {
-        return {
-          uuid: this.uuid,
-        };
+      variables: { uuid: event.value?.uuid },
+    });
+    if (cachedData == null) {
+      console.error(
+        "Cannot update event participant cache, because of cached null value."
+      );
+      return;
+    }
+    const participantStats = { ...cachedData.event.participantStats };
+
+    if (updateData.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
+      participantStats.notConfirmed += 1;
+    } else {
+      participantStats.going += 1;
+      participantStats.participant += 1;
+    }
+
+    store.writeQuery({
+      query: FETCH_EVENT_BASIC,
+      variables: { uuid: event.value?.uuid },
+      data: {
+        event: {
+          ...cachedData.event,
+          participantStats,
+        },
       },
-      error(e) {
-        this.error = e;
-      },
-      skip() {
-        return !this.uuid;
-      },
-      update: (data) => new EventModel(data.event),
-    },
-    config: CONFIG,
+    });
   },
-  metaInfo() {
-    return {
-      title: this.$t("Participation without account") as string,
-      meta: [{ name: "robots", content: "noindex" }],
-    };
-  },
-})
-export default class ParticipationWithoutAccount extends Vue {
-  @Prop({ type: String, required: true }) uuid!: string;
+}));
 
-  anonymousParticipation: {
-    email: string;
-    message: string;
-    saveParticipation: boolean;
-  } = {
-    email: "",
-    message: "",
-    saveParticipation: true,
-  };
-
-  event!: IEvent;
-
-  config!: IConfig;
-
-  error: string | boolean = false;
-
-  formSent = false;
-
-  sendingForm = false;
-
-  EventJoinOptions = EventJoinOptions;
-
-  RouteName = RouteName;
-
-  async joinEvent(): Promise<void> {
-    this.error = false;
-    this.sendingForm = true;
+joinEventDone(async ({ data }) => {
+  sendingForm.value = false;
+  formSent.value = true;
+  if (
+    data?.joinEvent.metadata.cancellationToken &&
+    anonymousParticipation.saveParticipation &&
+    event.value
+  ) {
     try {
-      const { data } = await this.$apollo.mutate<{ joinEvent: IParticipant }>({
-        mutation: JOIN_EVENT,
-        variables: {
-          eventId: this.event.id,
-          actorId: this.config.anonymous.actorId,
-          email: this.anonymousParticipation.email,
-          message: this.anonymousParticipation.message,
-          locale: this.$i18n.locale,
-          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        },
-        update: (
-          store: ApolloCache<{ joinEvent: IParticipant }>,
-          { data: updateData }: FetchResult
-        ) => {
-          if (updateData == null) {
-            console.error(
-              "Cannot update event participant cache, because of data null value."
-            );
-            return;
-          }
-
-          const cachedData = store.readQuery<{ event: IEvent }>({
-            query: FETCH_EVENT_BASIC,
-            variables: { uuid: this.event.uuid },
-          });
-          if (cachedData == null) {
-            console.error(
-              "Cannot update event participant cache, because of cached null value."
-            );
-            return;
-          }
-          const participantStats = { ...cachedData.event.participantStats };
-
-          if (updateData.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
-            participantStats.notConfirmed += 1;
-          } else {
-            participantStats.going += 1;
-            participantStats.participant += 1;
-          }
-
-          store.writeQuery({
-            query: FETCH_EVENT_BASIC,
-            variables: { uuid: this.event.uuid },
-            data: {
-              event: {
-                ...cachedData.event,
-                participantStats,
-              },
-            },
-          });
-        },
-      });
-      this.formSent = true;
-      if (
-        data &&
-        data.joinEvent.metadata.cancellationToken &&
-        this.anonymousParticipation.saveParticipation
-      ) {
-        await addLocalUnconfirmedAnonymousParticipation(
-          this.event,
-          data.joinEvent.metadata.cancellationToken
-        );
-      }
+      await addLocalUnconfirmedAnonymousParticipation(
+        event.value,
+        data.joinEvent.metadata.cancellationToken
+      );
     } catch (e: any) {
       if (
         ["TextEncoder is not defined", "crypto.subtle is undefined"].includes(
           e.message
         )
       ) {
-        this.error = this.$t(
-          "Unable to save your participation in this browser."
-        ) as string;
-      } else if (e.graphQLErrors && e.graphQLErrors.length > 0) {
-        this.error = e.graphQLErrors[0].message;
-      } else if (e.networkError) {
-        this.error = e.networkError.message;
+        error.value = t("Unable to save your participation in this browser.");
       }
     }
-    this.sendingForm = false;
   }
-}
+});
+
+joinEventError((e) => {
+  if (e.graphQLErrors && e.graphQLErrors.length > 0) {
+    error.value = e.graphQLErrors[0].message;
+  } else if (e.networkError) {
+    error.value = e.networkError.message;
+  }
+});
+
+const joinEvent = async (): Promise<void> => {
+  error.value = false;
+  sendingForm.value = true;
+  joinEventMutation({
+    eventId: event.value?.id,
+    actorId: anonymousActorId.value,
+    email: anonymousParticipation.email,
+    message: anonymousParticipation.message,
+    locale: locale.value,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  });
+};
 </script>
-<style lang="scss" scoped>
-section.container.section {
-  background: $white;
-}
-</style>
diff --git a/js/src/components/Participation/UnloggedParticipation.vue b/js/src/components/Participation/UnloggedParticipation.vue
index 1457f459a..be78ce52b 100644
--- a/js/src/components/Participation/UnloggedParticipation.vue
+++ b/js/src/components/Participation/UnloggedParticipation.vue
@@ -1,10 +1,10 @@
 <template>
-  <section class="section container hero">
+  <section class="container mx-auto hero">
     <div class="hero-body" v-if="event">
-      <div class="container">
-        <subtitle>{{
-          $t("You wish to participate to the following event")
-        }}</subtitle>
+      <div class="container mx-auto">
+        <h2 class="text-2xl">
+          {{ $t("You wish to participate to the following event") }}
+        </h2>
         <EventListViewCard v-if="event" :event="event" />
         <div class="columns has-text-centered">
           <div class="column">
@@ -17,9 +17,9 @@
                   alt="Profile illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button variant="primary">{{
                 $t("I have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </router-link>
             <p>
               <small>
@@ -32,16 +32,16 @@
                   )
                 }}
               </small>
-              <b-tooltip
-                type="is-dark"
+              <o-tooltip
+                variant="dark"
                 :label="
                   $t(
                     'Mobilizon is a federated network. You can interact with this event from a different server.'
                   )
                 "
               >
-                <b-icon size="is-small" icon="help-circle-outline" />
-              </b-tooltip>
+                <o-icon size="small" icon="help-circle-outline" />
+              </o-tooltip>
             </p>
           </div>
           <vertical-divider
@@ -65,9 +65,9 @@
                   alt="Privacy illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button variant="primary">{{
                 $t("I don't have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </router-link>
             <a :href="`${event.url}/participate/without-account`" v-else>
               <figure class="image is-128x128">
@@ -76,9 +76,9 @@
                   alt="Privacy illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button variant="primary">{{
                 $t("I don't have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </a>
             <p>
               <small>{{ $t("Participate using your email address") }}</small>
@@ -90,78 +90,56 @@
           </div>
         </div>
         <div class="has-text-centered">
-          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
+          <o-button tag="a" variant="text" @click="router.go(-1)">{{
             $t("Back to previous page")
-          }}</b-button>
+          }}</o-button>
         </div>
       </div>
     </div>
   </section>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { FETCH_EVENT } from "@/graphql/event";
+<script lang="ts" setup>
 import EventListViewCard from "@/components/Event/EventListViewCard.vue";
-import { EventModel, IEvent } from "@/types/event.model";
 import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import Subtitle from "@/components/Utils/Subtitle.vue";
 import RouteName from "../../router/name";
+import { useFetchEvent } from "@/composition/apollo/event";
+import { useAnonymousParticipationConfig } from "@/composition/apollo/config";
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  components: {
-    VerticalDivider,
-    EventListViewCard,
-    Subtitle,
-  },
-  apollo: {
-    event: {
-      query: FETCH_EVENT,
-      variables() {
-        return {
-          uuid: this.uuid,
-        };
-      },
-      skip() {
-        return !this.uuid;
-      },
-      update: (data) => new EventModel(data.event),
-    },
-    config: CONFIG,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Unlogged participation") as string,
-      meta: [{ name: "robots", content: "noindex" }],
-    };
-  },
-})
-export default class UnloggedParticipation extends Vue {
-  @Prop({ type: String, required: true }) uuid!: string;
+const props = defineProps<{ uuid: string }>();
 
-  RouteName = RouteName;
+const { event } = useFetchEvent(props.uuid);
 
-  event!: IEvent;
+const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
 
-  config!: IConfig;
+const router = useRouter();
 
-  // eslint-disable-next-line class-methods-use-this
-  get host(): string {
-    return window.location.hostname;
-  }
+const { t } = useI18n({ useScope: "global" });
 
-  get anonymousParticipationAllowed(): boolean {
-    return this.event.options.anonymousParticipation;
-  }
+useHead({
+  title: computed(() => t("Unlogged participation")),
+  meta: [{ name: "robots", content: "noindex" }],
+});
 
-  get hasAnonymousEmailParticipationMethod(): boolean {
+const host = computed((): string => {
+  return window.location.hostname;
+});
+
+const anonymousParticipationAllowed = computed((): boolean | undefined => {
+  return event.value?.options.anonymousParticipation;
+});
+
+const hasAnonymousEmailParticipationMethod = computed(
+  (): boolean | undefined => {
     return (
-      this.config.anonymous.participation.allowed &&
-      this.config.anonymous.participation.validation.email.enabled
+      anonymousParticipationConfig.value?.allowed &&
+      anonymousParticipationConfig.value?.validation.email.enabled
     );
   }
-}
+);
 </script>
 <style lang="scss" scoped>
 .column > a {
diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue
index 5929a5e02..c0a4c94e3 100644
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="root">
+  <div class="flex items-center">
     <figure class="image" v-if="imageSrc && !imagePreviewLoadingError">
       <img :src="imageSrc" @error="showImageLoadingError" />
     </figure>
@@ -11,18 +11,20 @@
         <span class="has-text-centered" v-if="imagePreviewLoadingError">{{
           $t("Error while loading the preview")
         }}</span>
-        <span class="has-text-centered" v-else>{{ textFallback }}</span>
+        <span class="has-text-centered" v-else>{{
+          textFallbackWithDefault
+        }}</span>
       </div>
     </figure>
 
-    <div class="action-buttons">
-      <p v-if="pictureFile" class="metadata">
-        <span class="name" :title="pictureFile.name">{{
-          pictureFile.name
+    <div class="flex flex-col">
+      <p v-if="modelValue" class="inline-flex">
+        <span class="block truncate max-w-[200px]" :title="modelValue.name">{{
+          modelValue.name
         }}</span>
-        <span class="size">({{ formatBytes(pictureFile.size) }})</span>
+        <span>({{ formatBytes(modelValue.size) }})</span>
       </p>
-      <p v-if="pictureTooBig" class="picture-too-big">
+      <p v-if="pictureTooBig" class="text-mbz-danger">
         {{
           $t(
             "The selected picture is too heavy. You need to select a file smaller than {size}.",
@@ -30,35 +32,30 @@
           )
         }}
       </p>
-      <b-field class="file is-primary">
-        <b-upload @input="onFileChanged" :accept="accept" class="file-label">
-          <span class="file-cta">
-            <b-icon class="file-icon" icon="upload" />
+      <o-field class="justify-center" variant="primary">
+        <o-upload @update:modelValue="onFileChanged" :accept="accept" drag-drop>
+          <span>
+            <Upload />
             <span>{{ $t("Click to upload") }}</span>
           </span>
-        </b-upload>
-      </b-field>
-      <b-button
-        type="is-text"
+        </o-upload>
+      </o-field>
+      <o-button
+        variant="text"
         v-if="imageSrc"
         @click="removeOrClearPicture"
         @keyup.enter="removeOrClearPicture"
       >
         {{ $t("Clear") }}
-      </b-button>
+      </o-button>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 @use "@/styles/_mixins" as *;
-.root {
-  display: flex;
-  align-items: center;
-}
-
 figure.image {
-  @include margin-right(30px);
+  // @include margin-right(30px);
   max-height: 200px;
   max-width: 200px;
   overflow: hidden;
@@ -82,112 +79,66 @@ figure.image {
     color: #eee;
   }
 }
-
-.action-buttons {
-  display: flex;
-  flex-direction: column;
-
-  .file {
-    justify-content: center;
-  }
-
-  .metadata {
-    display: inline-flex;
-
-    .name {
-      max-width: 200px;
-      display: block;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      @include margin-right(5px);
-    }
-  }
-}
-
-.picture-too-big {
-  color: $danger;
-}
 </style>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { IMedia } from "@/types/media.model";
-import { Component, Model, Prop, Vue, Watch } from "vue-property-decorator";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import Upload from "vue-material-design-icons/Upload.vue";
+import { formatBytes } from "@/utils/datetime";
 
-@Component
-export default class PictureUpload extends Vue {
-  @Model("change", { type: File }) readonly pictureFile!: File;
+const { t } = useI18n({ useScope: "global" });
 
-  @Prop({ type: Object, required: false }) defaultImage!: IMedia;
-
-  @Prop({
-    type: String,
-    required: false,
-    default: "image/gif,image/png,image/jpeg,image/webp",
-  })
-  accept!: string;
-
-  @Prop({
-    type: String,
-    required: false,
-    default() {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      return this.$t("Avatar");
-    },
-  })
-  textFallback!: string;
-
-  @Prop({ type: Number, required: false, default: 10_485_760 })
-  maxSize!: number;
-
-  file!: File | null;
-
-  imagePreviewLoadingError = false;
-
-  get pictureTooBig(): boolean {
-    return this.pictureFile?.size > this.maxSize;
+const props = withDefaults(
+  defineProps<{
+    modelValue: File | null;
+    defaultImage?: IMedia | null;
+    accept?: string;
+    textFallback?: string;
+    maxSize?: number;
+  }>(),
+  {
+    accept: "image/gif,image/png,image/jpeg,image/webp",
+    maxSize: 10_485_760,
   }
+);
 
-  get imageSrc(): string | null {
-    if (this.pictureFile !== undefined) {
-      if (this.pictureFile === null) return null;
-      try {
-        return URL.createObjectURL(this.pictureFile);
-      } catch (e) {
-        console.error(e);
-      }
+const textFallbackWithDefault = props.textFallback ?? t("Avatar");
+
+const emit = defineEmits(["update:modelValue"]);
+
+const imagePreviewLoadingError = ref(false);
+
+const pictureTooBig = computed((): boolean => {
+  return props.modelValue != null && props.modelValue?.size > props.maxSize;
+});
+
+const imageSrc = computed((): string | null | undefined => {
+  if (props.modelValue !== undefined) {
+    if (props.modelValue === null) return null;
+    try {
+      return URL.createObjectURL(props.modelValue);
+    } catch (e) {
+      console.error(e, props.modelValue);
     }
-    return this.defaultImage?.url;
   }
+  return props.defaultImage?.url;
+});
 
-  onFileChanged(file: File | null): void {
-    this.$emit("change", file);
+const onFileChanged = (file: File | null): void => {
+  emit("update:modelValue", file);
+};
 
-    this.file = file;
-  }
+const removeOrClearPicture = async (): Promise<void> => {
+  onFileChanged(null);
+};
 
-  async removeOrClearPicture(): Promise<void> {
-    this.onFileChanged(null);
-  }
+watch(imageSrc, () => {
+  imagePreviewLoadingError.value = false;
+});
 
-  @Watch("imageSrc")
-  resetImageLoadingError(): void {
-    this.imagePreviewLoadingError = false;
-  }
-
-  showImageLoadingError(): void {
-    this.imagePreviewLoadingError = true;
-  }
-
-  // https://gist.github.com/zentala/1e6f72438796d74531803cc3833c039c
-  formatBytes(bytes: number, decimals: number): string {
-    if (bytes == 0) return "0 Bytes";
-    const k = 1024,
-      dm = decimals || 2,
-      sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
-      i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-  }
-}
+const showImageLoadingError = (): void => {
+  imagePreviewLoadingError.value = true;
+};
 </script>
diff --git a/js/src/components/Post/MultiPostListItem.vue b/js/src/components/Post/MultiPostListItem.vue
index 53baa91e1..3812e0f88 100644
--- a/js/src/components/Post/MultiPostListItem.vue
+++ b/js/src/components/Post/MultiPostListItem.vue
@@ -8,22 +8,17 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IPost } from "@/types/post.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import PostListItem from "./PostListItem.vue";
 
-@Component({
-  components: {
-    PostListItem,
-  },
-})
-export default class MultiPostListItem extends Vue {
-  @Prop({ type: Array as PropType<IPost[]>, required: true }) posts!: IPost[];
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
-}
+withDefaults(
+  defineProps<{
+    posts: IPost[];
+    isCurrentActorMember?: boolean;
+  }>(),
+  { isCurrentActorMember: false }
+);
 </script>
 <style lang="scss" scoped>
 .posts-wrapper {
diff --git a/js/src/components/Post/PostListItem.story.vue b/js/src/components/Post/PostListItem.story.vue
new file mode 100644
index 000000000..61d583900
--- /dev/null
+++ b/js/src/components/Post/PostListItem.story.vue
@@ -0,0 +1,48 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <PostListItem :post="post" />
+    </Variant>
+
+    <Variant title="Long">
+      <PostListItem :post="longPost" />
+    </Variant>
+
+    <Variant title="Is member">
+      <PostListItem :post="longPost" :is-current-actor-member="true" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IPost } from "@/types/post.model";
+import PostListItem from "./PostListItem.vue";
+
+const post: IPost = {
+  title: "Musique sur Nantes : un groupe à développer ensemble !",
+  url: "https://mobilizon.fr/p/an-uuid",
+  insertedAt: new Date(),
+  author: {
+    name: "I'm the author",
+    preferredUsername: "the_author",
+  },
+  tags: [
+    { slug: "musique", title: "Musique" },
+    { slug: "concert", title: "Concert" },
+  ],
+  picture: {
+    url: "https://mobilizon.fr/media/70e930f488788afdf5d024be5ac2f9c9f0e1b166e16f645beb2c344cdcc65d62.jpg?name=musiquesurnantesbanner.jpg",
+  },
+};
+
+const longPost = {
+  ...post,
+  title:
+    "Musique sur Nantes : un groupe à développer ensemble ! Musique sur Nantes : un groupe à développer ensemble !",
+  tags: [
+    ...(post.tags ?? []),
+    { slug: "verylongtagwhathappensthen", title: "VeryLongTagWhatHappensThen" },
+    { slug: "justanother", title: "Just another" },
+  ],
+};
+</script>
diff --git a/js/src/components/Post/PostListItem.vue b/js/src/components/Post/PostListItem.vue
index b565b7914..2a2ef85f7 100644
--- a/js/src/components/Post/PostListItem.vue
+++ b/js/src/components/Post/PostListItem.vue
@@ -1,123 +1,132 @@
 <template>
   <router-link
-    class="post-minimalist-card-wrapper"
+    class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md"
     dir="auto"
     :to="{ name: RouteName.POST, params: { slug: post.slug } }"
   >
     <lazy-image-wrapper
       :picture="post.picture"
       :rounded="true"
-      style="height: 120px"
+      class="object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
     />
-    <div class="title-info-wrapper has-text-grey-dark px-1">
-      <h3 class="post-minimalist-title" :lang="post.language">
+    <div class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
+      <h3
+        class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold"
+        :lang="post.language"
+      >
         {{ post.title }}
       </h3>
-      <p class="post-publication-date">
-        <b-icon icon="clock" />
-        <span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
-          publishedAt | formatDateTimeString(undefined, false, "short")
+      <p class="flex gap-2">
+        <Clock />
+        <span dir="auto" class="" v-if="isBeforeLastWeek">{{
+          formatDateTimeString(
+            publishedAt.toString(),
+            undefined,
+            false,
+            "short"
+          )
         }}</span>
         <span v-else>{{
           formatDistanceToNow(publishedAt, {
-            locale: $dateFnsLocale,
+            locale: dateFnsLocale,
             addSuffix: true,
           })
         }}</span>
       </p>
-      <b-taglist v-if="post.tags.length > 0" style="display: inline">
-        <b-icon icon="tag" />
-        <b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
-      </b-taglist>
-      <p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
-        <b-icon icon="account-edit" />
-        <i18n path="Published by {name}">
-          <b class="has-text-weight-medium" slot="name">{{
-            displayName(post.author)
-          }}</b>
-        </i18n>
+      <div v-if="postTags.length > 0" class="flex flex-wrap gap-y-0 gap-x-2">
+        <Tag />
+        <mbz-tag v-for="tag in postTags" :key="tag.slug">{{
+          tag.title
+        }}</mbz-tag>
+      </div>
+      <p class="flex gap-1" v-if="isCurrentActorMember">
+        <AccountEdit />
+        <i18n-t keypath="Published by {name}">
+          <template #name>
+            <b class="">{{ displayName(post.author) }}</b>
+          </template>
+        </i18n-t>
       </p>
     </div>
   </router-link>
 </template>
-<script lang="ts">
-import { formatDistanceToNow, subWeeks, isBefore } from "date-fns";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import RouteName from "../../router/name";
-import { IPost } from "../../types/post.model";
+<script lang="ts" setup>
+import { formatDistanceToNow, subWeeks, isBefore, Locale } from "date-fns";
+import RouteName from "@/router/name";
+import { IPost } from "@/types/post.model";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import { displayName } from "@/types/actor";
+import { computed, inject } from "vue";
+import { formatDateTimeString } from "@/filters/datetime";
+import Tag from "vue-material-design-icons/Tag.vue";
+import AccountEdit from "vue-material-design-icons/AccountEdit.vue";
+import Clock from "vue-material-design-icons/Clock.vue";
+import MbzTag from "@/components/TagElement.vue";
 
-@Component({
-  components: {
-    LazyImageWrapper,
-  },
-})
-export default class PostListItem extends Vue {
-  @Prop({ required: true, type: Object }) post!: IPost;
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
+const props = withDefaults(
+  defineProps<{
+    post: IPost;
+    isCurrentActorMember?: boolean;
+  }>(),
+  { isCurrentActorMember: false }
+);
 
-  RouteName = RouteName;
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
-  formatDistanceToNow = formatDistanceToNow;
+const postTags = computed(() => (props.post.tags ?? []).slice(0, 3));
 
-  displayName = displayName;
+const publishedAt = computed((): Date => {
+  return new Date((props.post.publishAt ?? props.post.insertedAt) as Date);
+});
 
-  get publishedAt(): Date {
-    return new Date((this.post.publishAt || this.post.insertedAt) as Date);
-  }
-
-  get isBeforeLastWeek(): boolean {
-    return isBefore(this.publishedAt, subWeeks(new Date(), 1));
-  }
-}
+const isBeforeLastWeek = computed((): boolean => {
+  return isBefore(publishedAt.value, subWeeks(new Date(), 1));
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-@import "~bulma/sass/utilities/mixins.sass";
+// @import "node_modules/bulma/sass/utilities/mixins.sass";
 
-.post-minimalist-card-wrapper {
-  display: grid;
-  grid-gap: 5px 10px;
-  grid-template-areas: "preview" "body";
-  text-decoration: none;
-  width: 100%;
-  color: initial;
+// .post-minimalist-card-wrapper {
+//   display: grid;
+//   grid-gap: 5px 10px;
+//   grid-template-areas: "preview" "body";
+//   text-decoration: none;
+//   // width: 100%;
+//   // color: initial;
 
-  @include desktop {
-    grid-template-columns: 200px 3fr;
-    grid-template-areas: "preview body";
+//   // @include desktop {
+//   grid-template-columns: 200px 3fr;
+//   grid-template-areas: "preview body";
+//   // }
+
+.title-info-wrapper {
+  .post-minimalist-title {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 700;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
   }
+}
+:deep(.icon) {
+  vertical-align: middle;
+  // @include margin-right(5px);
+}
 
-  .title-info-wrapper {
-    .post-minimalist-title {
-      color: #3c376e;
-      font-size: 18px;
-      line-height: 24px;
-      font-weight: 700;
+:deep(.tags) {
+  display: inline;
+
+  span.tag {
+    max-width: 200px;
+
+    & > span {
       overflow: hidden;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 3;
-    }
-  }
-  ::v-deep .icon {
-    vertical-align: middle;
-    @include margin-right(5px);
-  }
-
-  ::v-deep .tags {
-    display: inline;
-
-    span.tag {
-      max-width: 200px;
-
-      & > span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+      text-overflow: ellipsis;
     }
   }
 }
+// }
 </style>
diff --git a/js/src/components/Post/SharePostModal.story.vue b/js/src/components/Post/SharePostModal.story.vue
new file mode 100644
index 000000000..9531800ea
--- /dev/null
+++ b/js/src/components/Post/SharePostModal.story.vue
@@ -0,0 +1,20 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <SharePostModal :post="{ ...post, visibility: PostVisibility.PUBLIC }" />
+    </Variant>
+    <Variant title="Private">
+      <SharePostModal :post="post" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { PostVisibility } from "@/types/enums";
+import SharePostModal from "./SharePostModal.vue";
+
+const post = {
+  title: "hello",
+  url: "https://mobilizon.fr/p/an-uuid",
+};
+</script>
diff --git a/js/src/components/Post/SharePostModal.vue b/js/src/components/Post/SharePostModal.vue
index d75919e46..d784646d6 100644
--- a/js/src/components/Post/SharePostModal.vue
+++ b/js/src/components/Post/SharePostModal.vue
@@ -1,218 +1,56 @@
 <template>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">{{ $t("Share this post") }}</p>
-    </header>
-
-    <section class="modal-card-body is-flex" v-if="post">
-      <div class="container has-text-centered">
-        <b-notification
-          type="is-warning"
-          v-if="post.visibility !== PostVisibility.PUBLIC"
-          :closable="false"
-        >
-          {{
-            $t(
-              "This post is accessible only through it's link. Be careful where you post this link."
-            )
-          }}
-        </b-notification>
-        <b-field :label="$t('Post URL')" label-for="post-url-text">
-          <b-input
-            id="post-url-text"
-            ref="postURLInput"
-            :value="postURL"
-            expanded
-          />
-          <p class="control">
-            <b-tooltip
-              :label="$t('URL copied to clipboard')"
-              :active="showCopiedTooltip"
-              always
-              type="is-success"
-              position="is-left"
-            >
-              <b-button
-                type="is-primary"
-                icon-right="content-paste"
-                native-type="button"
-                @click="copyURL"
-                @keyup.enter="copyURL"
-                :title="$t('Copy URL to clipboard')"
-              />
-            </b-tooltip>
-          </p>
-        </b-field>
-        <div>
-          <a
-            :href="twitterShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="mastodonShareUrl"
-            class="mastodon"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Mastodon"
-          >
-            <mastodon-logo />
-          </a>
-          <a
-            :href="facebookShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="whatsAppShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="telegramShareUrl"
-            class="telegram"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Telegram"
-          >
-            <telegram-logo />
-          </a>
-          <a
-            :href="linkedInShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="diasporaShareUrl"
-            class="diaspora"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Diaspora"
-          >
-            <diaspora-logo />
-          </a>
-          <a
-            :href="emailShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
-          /></a>
-        </div>
-      </div>
-    </section>
-  </div>
+  <share-modal
+    :title="t('Share this post')"
+    :text="post.title"
+    :url="postURL"
+    :input-label="t('Post URL')"
+  >
+    <o-notification
+      variant="warning"
+      v-if="post.visibility !== PostVisibility.PUBLIC"
+      :closable="false"
+    >
+      {{
+        $t(
+          "This post is accessible only through it's link. Be careful where you post this link."
+        )
+      }}
+    </o-notification>
+  </share-modal>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+<script lang="ts" setup>
 import { PostVisibility } from "@/types/enums";
 import { IPost } from "../../types/post.model";
-import DiasporaLogo from "../Share/DiasporaLogo.vue";
-import MastodonLogo from "../Share/MastodonLogo.vue";
-import TelegramLogo from "../Share/TelegramLogo.vue";
-import { PropType } from "vue";
 import RouteName from "@/router/name";
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import ShareModal from "@/components/Share/ShareModal.vue";
 
-@Component({
-  components: {
-    DiasporaLogo,
-    MastodonLogo,
-    TelegramLogo,
-  },
-})
-export default class SharePostModal extends Vue {
-  @Prop({ type: Object as PropType<IPost>, required: true }) post!: IPost;
+const props = defineProps<{
+  post: IPost;
+}>();
 
-  @Ref("postURLInput") readonly postURLInput!: any;
+const { t } = useI18n({ useScope: "global" });
 
-  PostVisibility = PostVisibility;
+const router = useRouter();
 
-  RouteName = RouteName;
-
-  showCopiedTooltip = false;
-
-  get twitterShareUrl(): string {
-    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-      this.postURL
-    )}&text=${this.post.title}`;
+const postURL = computed((): string => {
+  if (props.post.id) {
+    return router.resolve({
+      name: RouteName.POST,
+      params: { id: props.post.id },
+    }).href;
   }
-
-  get facebookShareUrl(): string {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-      this.postURL
-    )}`;
-  }
-
-  get linkedInShareUrl(): string {
-    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
-      this.postURL
-    )}&title=${this.post.title}`;
-  }
-
-  get whatsAppShareUrl(): string {
-    return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
-  }
-
-  get telegramShareUrl(): string {
-    return `https://t.me/share/url?url=${encodeURIComponent(
-      this.postURL
-    )}&text=${encodeURIComponent(this.post.title)}`;
-  }
-
-  get emailShareUrl(): string {
-    return `mailto:?to=&body=${this.postURL}&subject=${this.post.title}`;
-  }
-
-  get diasporaShareUrl(): string {
-    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
-      this.post.title
-    )}&url=${encodeURIComponent(this.postURL)}`;
-  }
-
-  get mastodonShareUrl(): string {
-    return `https://toot.kytta.dev/?text=${encodeURIComponent(
-      this.basicTextToEncode
-    )}`;
-  }
-
-  get basicTextToEncode(): string {
-    return `${this.post.title}\r\n${this.postURL}`;
-  }
-
-  get postURL(): string {
-    if (this.post.id) {
-      return this.$router.resolve({
-        name: RouteName.POST,
-        params: { id: this.post.id },
-      }).href;
-    }
-    return "";
-  }
-
-  copyURL(): void {
-    this.postURLInput.$refs.input.select();
-    document.execCommand("copy");
-    this.showCopiedTooltip = true;
-    setTimeout(() => {
-      this.showCopiedTooltip = false;
-    }, 2000);
-  }
-}
+  return props.post.url ?? "";
+});
 </script>
 <style lang="scss" scoped>
 .diaspora,
 .mastodon,
 .telegram {
-  ::v-deep span svg {
+  :deep(span svg) {
     width: 2.25rem;
   }
 }
diff --git a/js/src/components/Report/ReportCard.vue b/js/src/components/Report/ReportCard.vue
index 025250a68..136493bd0 100644
--- a/js/src/components/Report/ReportCard.vue
+++ b/js/src/components/Report/ReportCard.vue
@@ -1,57 +1,55 @@
-<docs>
-```vue
-<report-card :report="{ reported: { name: 'Some bad guy', preferredUsername: 'kevin' }, reporter: { preferredUsername: 'somePerson34' }, reportContent: 'This is not good'}" />
-```
-</docs>
 <template>
-  <div class="card" v-if="report">
-    <div class="card-content">
-      <div class="media">
-        <div class="media-left">
-          <figure class="image is-48x48" v-if="report.reported.avatar">
-            <img alt="" :src="report.reported.avatar.url" />
-          </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
-        </div>
-        <div class="media-content">
-          <p class="title is-4">{{ report.reported.name }}</p>
-          <p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
-        </div>
+  <div class="dark:bg-zinc-700 p-2 rounded" v-if="report">
+    <div class="flex gap-1">
+      <figure class="" v-if="report.reported.avatar">
+        <img
+          alt=""
+          :src="report.reported.avatar.url"
+          class="rounded-full"
+          width="48"
+          height="48"
+        />
+      </figure>
+      <AccountCircle v-else :size="48" />
+      <div class="">
+        <p class="" v-if="report.reported.name">{{ report.reported.name }}</p>
+        <p class="">@{{ usernameWithDomain(report.reported) }}</p>
       </div>
+    </div>
 
-      <div class="content columns">
-        <div class="column is-one-quarter-desktop">
-          <span v-if="report.reporter.type === ActorType.APPLICATION">
-            {{
-              $t("Reported by someone on {domain}", {
-                domain: report.reporter.domain,
-              })
-            }}
-          </span>
-          <span v-else>
-            {{
-              $t("Reported by {reporter}", {
-                reporter: report.reporter.preferredUsername,
-              })
-            }}
-          </span>
-        </div>
-        <div class="column" v-if="report.content" v-html="report.content" />
+    <div class="reported_by">
+      <div class="">
+        <span v-if="report.reporter.type === ActorType.APPLICATION">
+          {{
+            t("Reported by someone on {domain}", {
+              domain: report.reporter.domain,
+            })
+          }}
+        </span>
+        <span v-else>
+          {{
+            t("Reported by {reporter}", {
+              reporter: usernameWithDomain(report.reporter),
+            })
+          }}
+        </span>
       </div>
+      <div class="" v-if="report.content" v-html="report.content" />
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { IReport } from "@/types/report.model";
 import { ActorType } from "@/types/enums";
+import { useI18n } from "vue-i18n";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { usernameWithDomain } from "@/types/actor";
 
-@Component
-export default class ReportCard extends Vue {
-  @Prop({ required: true }) report!: IReport;
+defineProps<{
+  report: IReport;
+}>();
 
-  ActorType = ActorType;
-}
+const { t } = useI18n({ useScope: "global" });
 </script>
 <style lang="scss">
 .content img.image {
diff --git a/js/src/components/Report/ReportModal.vue b/js/src/components/Report/ReportModal.vue
index 34af68d0f..aa148d800 100644
--- a/js/src/components/Report/ReportModal.vue
+++ b/js/src/components/Report/ReportModal.vue
@@ -1,146 +1,146 @@
 <template>
-  <div class="modal-card">
-    <header class="modal-card-head" v-if="title">
-      <h2 class="modal-card-title">{{ title }}</h2>
+  <div class="p-2">
+    <header v-if="title" class="mb-3">
+      <h2 class="text-2xl">{{ title }}</h2>
     </header>
 
-    <section
-      class="modal-card-body is-flex"
-      :class="{ 'is-titleless': !title }"
-    >
-      <div class="media">
-        <div class="media-left hidden md:block">
-          <b-icon icon="alert" type="is-warning" size="is-large" />
-        </div>
-        <div class="media-content">
-          <div class="box" v-if="comment">
-            <article class="media">
-              <div class="media-left">
-                <figure class="image is-48x48" v-if="comment.actor.avatar">
-                  <img :src="comment.actor.avatar.url" alt="" />
-                </figure>
-                <b-icon
-                  class="media-left"
-                  v-else
-                  size="is-large"
-                  icon="account-circle"
+    <section>
+      <div class="flex gap-1 flex-row mb-3">
+        <o-icon
+          icon="alert"
+          variant="warning"
+          custom-size="48"
+          class="hidden md:block flex-1"
+        />
+        <p>
+          {{
+            t(
+              "The report will be sent to the moderators of your instance. You can explain why you report this content below."
+            )
+          }}
+        </p>
+      </div>
+      <div class="">
+        <div class="" v-if="comment">
+          <article class="">
+            <div class="">
+              <figure class="h-8 w-8" v-if="comment?.actor?.avatar">
+                <img
+                  :src="comment.actor.avatar.url"
+                  alt=""
+                  width="48"
+                  height="48"
                 />
+              </figure>
+              <AccountCircle v-else :size="48" />
+            </div>
+            <div class="">
+              <div class="prose dark:prose-invert">
+                <strong>{{ comment?.actor?.name }}</strong>
+                <small v-if="comment.actor"
+                  >@{{ usernameWithDomain(comment?.actor) }}</small
+                >
+                <br />
+                <p v-html="comment.text"></p>
               </div>
-              <div class="media-content">
-                <div class="content">
-                  <strong>{{ comment.actor.name }}</strong>
-                  <small>@{{ comment.actor.preferredUsername }}</small>
-                  <br />
-                  <p v-html="comment.text"></p>
-                </div>
-              </div>
-            </article>
-          </div>
+            </div>
+          </article>
+        </div>
+
+        <o-field
+          :label="t('Additional comments')"
+          label-for="additional-comments"
+        >
+          <o-input v-model="content" type="textarea" id="additional-comments" />
+        </o-field>
+
+        <div class="control" v-if="outsideDomain">
           <p>
             {{
-              $t(
-                "The report will be sent to the moderators of your instance. You can explain why you report this content below."
+              t(
+                "The content came from another server. Transfer an anonymous copy of the report?"
               )
             }}
           </p>
-
-          <div class="control">
-            <b-field
-              :label="$t('Additional comments')"
-              label-for="additonal-comments"
-            >
-              <b-input
-                v-model="content"
-                type="textarea"
-                id="additonal-comments"
-              />
-            </b-field>
-          </div>
-
-          <div class="control" v-if="outsideDomain">
-            <p>
-              {{
-                $t(
-                  "The content came from another server. Transfer an anonymous copy of the report?"
-                )
-              }}
-            </p>
-            <b-switch v-model="forward">{{
-              $t("Transfer to {outsideDomain}", { outsideDomain })
-            }}</b-switch>
-          </div>
+          <o-switch v-model="forward">{{
+            t("Transfer to {outsideDomain}", { outsideDomain })
+          }}</o-switch>
         </div>
       </div>
     </section>
 
-    <footer class="modal-card-foot">
-      <button class="button" ref="cancelButton" @click="close">
+    <footer class="flex gap-2 py-3">
+      <o-button ref="cancelButton" outlined @click="close">
         {{ translatedCancelText }}
-      </button>
-      <button
-        class="button is-primary"
+      </o-button>
+      <o-button
+        variant="primary"
         ref="confirmButton"
         @click="confirm"
         @keyup.enter="confirm"
       >
         {{ translatedConfirmText }}
-      </button>
+      </o-button>
     </footer>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import { IComment } from "../../types/comment.model";
+import { usernameWithDomain } from "@/types/actor";
 
-@Component({
-  mounted() {
-    this.$data.isActive = true;
-  },
-})
-export default class ReportModal extends Vue {
-  @Prop({ type: Function }) onConfirm!: (
-    content: string,
-    forward: boolean
-  ) => void;
-
-  @Prop({ type: String }) title!: string;
-
-  @Prop({ type: Object }) comment!: IComment;
-
-  @Prop({ type: String, default: "" }) outsideDomain!: string;
-
-  @Prop({ type: String }) cancelText!: string;
-
-  @Prop({ type: String }) confirmText!: string;
-
-  isActive = false;
-
-  content = "";
-
-  forward = false;
-
-  get translatedCancelText(): string {
-    return this.cancelText || (this.$t("Cancel") as string);
+const props = withDefaults(
+  defineProps<{
+    onConfirm: (content: string, forward: boolean) => void;
+    title?: string;
+    comment?: IComment;
+    outsideDomain?: string | null;
+    cancelText?: string;
+    confirmText?: string;
+  }>(),
+  {
+    outsideDomain: null,
   }
+);
 
-  get translatedConfirmText(): string {
-    return this.confirmText || (this.$t("Send the report") as string);
-  }
+const emit = defineEmits(["close"]);
 
-  confirm(): void {
-    this.onConfirm(this.content, this.forward);
-    this.close();
-  }
+// @Component({
+//   mounted() {
+//     this.$data.isActive = true;
+//   },
+// })
 
-  /**
-   * Close the Dialog.
-   */
-  close(): void {
-    this.isActive = false;
-    this.$emit("close");
-  }
-}
+// isActive = false;
+
+const content = ref("");
+
+const forward = ref(false);
+
+const { t } = useI18n({ useScope: "global" });
+
+const translatedCancelText = computed((): string => {
+  return props.cancelText ?? (t("Cancel") as string);
+});
+
+const translatedConfirmText = computed((): string => {
+  return props.confirmText ?? (t("Send the report") as string);
+});
+
+const confirm = (): void => {
+  props.onConfirm(content.value, forward.value);
+  close();
+};
+
+/**
+ * Close the Dialog.
+ */
+const close = (): void => {
+  // isActive = false;
+  emit("close");
+};
 </script>
 <style lang="scss" scoped>
 .modal-card .modal-card-foot {
diff --git a/js/src/components/Resource/DraggableList.vue b/js/src/components/Resource/DraggableList.vue
new file mode 100644
index 000000000..2b66b2804
--- /dev/null
+++ b/js/src/components/Resource/DraggableList.vue
@@ -0,0 +1,157 @@
+<template>
+  <section>
+    <p v-if="isRoot">
+      {{ $t("A place to store links to documents or resources of any type.") }}
+    </p>
+    <div class="list-header">
+      <div class="list-header-right">
+        <o-checkbox v-model="checkedAll" v-if="resources.length > 0" />
+        <div class="actions" v-if="validCheckedResources.length > 0">
+          <small>
+            {{
+              $t(
+                "No resources selected",
+                {
+                  count: validCheckedResources.length,
+                },
+                validCheckedResources.length
+              )
+            }}
+          </small>
+          <o-button
+            variant="danger"
+            icon-right="delete"
+            size="small"
+            @click="deleteMultipleResources"
+            >{{ $t("Delete") }}</o-button
+          >
+        </div>
+      </div>
+    </div>
+    <draggable
+      :list="resources"
+      :sort="false"
+      :group="groupObject"
+      v-if="resources.length > 0"
+      tag="transition-group"
+      item-key="id"
+    >
+      <template #item="{ element }">
+        <div class="resource-item">
+          <div
+            class="resource-checkbox px-2"
+            :class="{ checked: checkedResources[element.id as string] }"
+          >
+            <o-checkbox v-model="checkedResources[element.id as string]" />
+          </div>
+          <resource-item
+            :resource="element"
+            v-if="element.type !== 'folder'"
+            @delete="emit('delete', $event)"
+            @rename="emit('rename', $event)"
+            @move="emit('move', $event)"
+          />
+          <folder-item
+            :resource="element"
+            :group="group"
+            @delete="emit('delete', $event)"
+            @rename="emit('rename', $event)"
+            @move="emit('move', $event)"
+            v-else
+          />
+        </div>
+      </template>
+    </draggable>
+    <div
+      class="content has-text-centered has-text-grey"
+      v-if="resources.length === 0"
+    >
+      <p>{{ $t("No resources in this folder") }}</p>
+    </div>
+  </section>
+</template>
+<script lang="ts" setup>
+import ResourceItem from "@/components/Resource/ResourceItem.vue";
+import FolderItem from "@/components/Resource/FolderItem.vue";
+import { ref, watch } from "vue";
+import { IResource } from "@/types/resource";
+import Draggable from "vuedraggable";
+import { IGroup } from "@/types/actor";
+
+const props = withDefaults(
+  defineProps<{ resources: IResource[]; isRoot: boolean; group: IGroup }>(),
+  { isRoot: false }
+);
+
+const emit = defineEmits<{
+  (e: "move", resource: IResource): void;
+  (e: "rename", resource: IResource): void;
+  (e: "delete", resourceID: string): void;
+}>();
+
+const groupObject: Record<string, unknown> = {
+  name: "resources",
+  pull: "clone",
+  put: true,
+};
+
+const checkedResources = ref<{ [key: string]: boolean }>({});
+
+const validCheckedResources = ref<string[]>([]);
+
+const checkedAll = ref(false);
+
+watch(checkedResources, () => {
+  const newValidCheckedResources: string[] = [];
+  Object.entries(checkedResources).forEach(([key, value]) => {
+    if (value) {
+      newValidCheckedResources.push(key);
+    }
+  });
+  validCheckedResources.value = newValidCheckedResources;
+});
+
+const deleteMultipleResources = async (): Promise<void> => {
+  validCheckedResources.value.forEach((resourceID) => {
+    emit("delete", resourceID);
+  });
+};
+
+watch(checkedAll, () => {
+  props.resources.forEach(({ id }) => {
+    if (!id) return;
+    checkedResources.value[id] = checkedAll.value;
+  });
+});
+
+// const deleteResource = (resourceID: string) => {
+//   validCheckedResources.value = validCheckedResources.value.filter(
+//     (id) => id !== resourceID
+//   );
+//   delete checkedResources.value[resourceID];
+//   emit("delete", resourceID);
+// };
+</script>
+<style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
+.resource-item,
+.new-resource-preview {
+  display: flex;
+  font-size: 14px;
+  border: 1px solid #c0cdd9;
+  border-radius: 4px;
+  // color: #444b5d;
+  margin-top: 14px;
+  margin-bottom: 14px;
+
+  .resource-checkbox {
+    align-self: center;
+    opacity: 0.3;
+  }
+
+  &:hover .resource-checkbox,
+  .resource-checkbox.checked {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/js/src/components/Resource/FolderItem.vue b/js/src/components/Resource/FolderItem.vue
index b06aeabca..d8a567821 100644
--- a/js/src/components/Resource/FolderItem.vue
+++ b/js/src/components/Resource/FolderItem.vue
@@ -4,24 +4,25 @@
       :to="{
         name: RouteName.RESOURCE_FOLDER,
         params: {
-          path: ResourceMixin.resourcePathArray(resource),
+          path: resourcePathArray(resource),
           preferredUsername: usernameWithDomain(group),
         },
       }"
     >
-      <div class="preview">
-        <b-icon icon="folder" size="is-large" />
+      <div class="preview text-mbz-purple dark:text-mbz-purple-300">
+        <Folder :size="48" />
       </div>
       <div class="body">
         <h3>{{ resource.title }}</h3>
-        <span class="host" v-if="inline">{{
-          resource.updatedAt | formatDateTimeString
+        <span class="host" v-if="inline && resource.updatedAt">{{
+          formatDateTimeString(resource.updatedAt?.toString())
         }}</span>
       </div>
       <draggable
         v-if="!inline"
         class="dropzone"
         v-model="list"
+        itemKey="id"
         :sort="false"
         :group="groupObject"
         @change="onChange"
@@ -30,96 +31,91 @@
     <resource-dropdown
       class="actions"
       v-if="!inline"
-      @delete="$emit('delete', resource.id)"
-      @move="$emit('move', resource)"
-      @rename="$emit('rename', resource)"
+      @delete="emit('delete', resource.id as string)"
+      @move="emit('move', resource)"
+      @rename="emit('rename', resource)"
     />
   </div>
 </template>
-<script lang="ts">
-import { Component, Mixins, Prop } from "vue-property-decorator";
-import { Route } from "vue-router";
+<script lang="ts" setup>
+import { useRouter } from "vue-router";
 import Draggable, { ChangeEvent } from "vuedraggable";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { IResource } from "../../types/resource";
-import RouteName from "../../router/name";
-import ResourceMixin from "../../mixins/resource";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { IResource } from "@/types/resource";
+import RouteName from "@/router/name";
+import { IGroup, usernameWithDomain } from "@/types/actor";
 import ResourceDropdown from "./ResourceDropdown.vue";
-import { UPDATE_RESOURCE } from "../../graphql/resources";
+import { UPDATE_RESOURCE } from "@/graphql/resources";
+import { inject, ref } from "vue";
+import { formatDateTimeString } from "@/filters/datetime";
+import { useMutation } from "@vue/apollo-composable";
+import { resourcePathArray } from "@/components/Resource/utils";
+import Folder from "vue-material-design-icons/Folder.vue";
+import { Snackbar } from "@/plugins/snackbar";
 
-@Component({
-  components: { Draggable, ResourceDropdown },
-})
-export default class FolderItem extends Mixins(ResourceMixin) {
-  @Prop({ required: true, type: Object }) resource!: IResource;
+const props = withDefaults(
+  defineProps<{
+    resource: IResource;
+    group: IGroup;
+    inline?: boolean;
+  }>(),
+  { inline: false }
+);
 
-  @Prop({ required: true, type: Object }) group!: IGroup;
+const emit = defineEmits<{
+  (e: "move", resource: IResource): void;
+  (e: "rename", resource: IResource): void;
+  (e: "delete", resourceID: string): void;
+}>();
 
-  @Prop({ required: false, default: false }) inline!: boolean;
+const list = ref([]);
 
-  list = [];
+const groupObject: Record<string, unknown> = {
+  name: `folder-${props.resource?.title}`,
+  pull: false,
+  put: ["resources"],
+};
 
-  groupObject: Record<string, unknown> = {
-    name: `folder-${this.resource?.title}`,
-    pull: false,
-    put: ["resources"],
-  };
-
-  RouteName = RouteName;
-
-  ResourceMixin = ResourceMixin;
-
-  usernameWithDomain = usernameWithDomain;
-
-  async onChange(evt: ChangeEvent<IResource>): Promise<Route | undefined> {
-    if (evt.added && evt.added.element) {
-      const movedResource = evt.added.element as IResource;
-      const updatedResource = await this.moveResource(movedResource);
-      if (updatedResource && this.resource.path) {
-        // eslint-disable-next-line
-        // @ts-ignore
-        return this.$router.push({
-          name: RouteName.RESOURCE_FOLDER,
-          params: {
-            // eslint-disable-next-line
-            // @ts-ignore
-            path: ResourceMixin.resourcePathArray(this.resource),
-            preferredUsername: this.group.preferredUsername,
-          },
-        });
-      }
-    }
-    return undefined;
+const onChange = async (evt: ChangeEvent<IResource>) => {
+  if (evt.added && evt.added.element) {
+    // const movedResource = evt.added.element as IResource;
+    moveResource({
+      id: props.resource.id,
+      path: `${props.resource.path}/${props.resource.title}`,
+      parentId: props.resource.id,
+    });
   }
+  return undefined;
+};
 
-  async moveResource(resource: IResource): Promise<IResource | undefined> {
-    try {
-      const { data } = await this.$apollo.mutate<{ updateResource: IResource }>(
-        {
-          mutation: UPDATE_RESOURCE,
-          variables: {
-            id: resource.id,
-            path: `${this.resource.path}/${resource.title}`,
-            parentId: this.resource.id,
-          },
-        }
-      );
-      if (!data) {
-        console.error("Error while updating resource");
-        return undefined;
-      }
-      return data.updateResource;
-    } catch (e: any) {
-      Snackbar.open({
-        message: e.message,
-        type: "is-danger",
-        position: "is-bottom",
-      });
-      return undefined;
-    }
+const {
+  mutate: moveResource,
+  onDone: onMovedResource,
+  onError: onMovedResourceError,
+} = useMutation<{ updateResource: IResource }>(UPDATE_RESOURCE);
+
+const router = useRouter();
+
+onMovedResource(({ data }) => {
+  if (data?.updateResource && props.resource.path) {
+    return router.push({
+      name: RouteName.RESOURCE_FOLDER,
+      params: {
+        path: resourcePathArray(props.resource),
+        preferredUsername: props.group.preferredUsername,
+      },
+    });
   }
-}
+});
+const snackbar = inject<Snackbar>("snackbar");
+
+onMovedResourceError((e) => {
+  snackbar?.open({
+    message: e.message,
+    variant: "danger",
+    position: "bottom",
+  });
+  return undefined;
+});
 </script>
 <style lang="scss" scoped>
 .resource-wrapper {
@@ -147,7 +143,7 @@ export default class FolderItem extends Mixins(ResourceMixin) {
 a {
   display: flex;
   font-size: 14px;
-  color: #444b5d;
+  // color: #444b5d;
   text-decoration: none;
   overflow: hidden;
   flex: 1;
@@ -171,7 +167,6 @@ a {
       display: block;
       font-weight: 500;
       margin-bottom: 5px;
-      color: $primary;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;
diff --git a/js/src/components/Resource/ResourceDropdown.vue b/js/src/components/Resource/ResourceDropdown.vue
index 3546381be..6b20b099d 100644
--- a/js/src/components/Resource/ResourceDropdown.vue
+++ b/js/src/components/Resource/ResourceDropdown.vue
@@ -1,24 +1,30 @@
 <template>
-  <b-dropdown aria-role="list" position="is-bottom-left">
-    <b-icon icon="dots-horizontal" slot="trigger" />
+  <o-dropdown aria-role="list" position="bottom-left">
+    <template #trigger>
+      <DotsHorizontal />
+    </template>
 
-    <b-dropdown-item aria-role="listitem" @click="$emit('rename')">
-      <b-icon icon="pencil" />
+    <o-dropdown-item
+      aria-role="listitem"
+      @click="$emit('rename')"
+      class="inline-flex"
+    >
+      <Pencil />
       {{ $t("Rename") }}
-    </b-dropdown-item>
-    <b-dropdown-item aria-role="listitem" @click="$emit('move')">
-      <b-icon icon="folder-move" />
+    </o-dropdown-item>
+    <o-dropdown-item aria-role="listitem" @click="$emit('move')">
+      <FolderMove />
       {{ $t("Move") }}
-    </b-dropdown-item>
-    <b-dropdown-item aria-role="listitem" @click="$emit('delete')">
-      <b-icon icon="delete" />
+    </o-dropdown-item>
+    <o-dropdown-item aria-role="listitem" @click="$emit('delete')">
+      <Delete />
       {{ $t("Delete") }}
-    </b-dropdown-item>
-  </b-dropdown>
+    </o-dropdown-item>
+  </o-dropdown>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class ResourceDropdown extends Vue {}
+<script lang="ts" setup>
+import Pencil from "vue-material-design-icons/Pencil.vue";
+import FolderMove from "vue-material-design-icons/FolderMove.vue";
+import Delete from "vue-material-design-icons/Delete.vue";
+import DotsHorizontal from "vue-material-design-icons/DotsHorizontal.vue";
 </script>
diff --git a/js/src/components/Resource/ResourceItem.vue b/js/src/components/Resource/ResourceItem.vue
index 9c5e8c7ab..c8627442a 100644
--- a/js/src/components/Resource/ResourceItem.vue
+++ b/js/src/components/Resource/ResourceItem.vue
@@ -1,14 +1,18 @@
 <template>
-  <div class="resource-wrapper" dir="auto">
+  <div class="flex flex-1 items-center w-full" dir="auto">
     <a :href="resource.resourceUrl" target="_blank">
-      <div class="preview">
+      <div class="preview text-mbz-purple dark:text-mbz-purple-300">
         <div
           v-if="
             resource.type &&
             Object.keys(mapServiceTypeToIcon).includes(resource.type)
           "
         >
-          <b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
+          <o-icon
+            :icon="mapServiceTypeToIcon[resource.type]"
+            size="large"
+            customSize="48"
+          />
         </div>
         <div
           class="preview-image"
@@ -16,91 +20,81 @@
           :style="`background-image: url(${resource.metadata.imageRemoteUrl})`"
         />
         <div class="preview-type" v-else>
-          <b-icon icon="link" size="is-large" />
+          <Link :size="48" />
         </div>
       </div>
-      <div class="body">
-        <div class="title-wrapper">
+      <div class="body flex-1 px-1 pb-1">
+        <div class="flex items-center gap-1 max-w-[65vw]">
           <img
             class="favicon"
             alt=""
             v-if="resource.metadata && resource.metadata.faviconUrl"
             :src="resource.metadata.faviconUrl"
           />
-          <h3>{{ resource.title }}</h3>
+          <h3 class="dark:text-white">{{ resource.title }}</h3>
         </div>
         <div class="metadata-wrapper">
           <span class="host" v-if="!inline || preview">{{ urlHostname }}</span>
           <span
-            class="published-at"
-            :class="{ 'is-hidden-mobile': !inline }"
+            class="hidden md:inline"
+            :class="{ inline }"
             v-if="resource.updatedAt || resource.publishedAt"
             >{{
-              (resource.updatedAt || resource.publishedAt) |
-                formatDateTimeString
+              formatDateTimeString(
+                resource.updatedAt ?? resource.publishedAt ?? ""
+              )
             }}</span
           >
         </div>
       </div>
     </a>
     <resource-dropdown
-      class="actions"
+      class="flex-0 block mx-auto my-2 cursor-pointer mr-2"
       v-if="!inline && !preview"
-      @delete="$emit('delete', resource.id)"
-      @move="$emit('move', resource)"
-      @rename="$emit('rename', resource)"
+      @delete="emit('delete', resource.id as string)"
+      @move="emit('move', resource)"
+      @rename="emit('rename', resource)"
     />
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { IResource, mapServiceTypeToIcon } from "@/types/resource";
 import ResourceDropdown from "@/components/Resource/ResourceDropdown.vue";
+import { computed } from "vue";
+import { formatDateTimeString } from "@/filters/datetime";
+import Link from "vue-material-design-icons/Link.vue";
 
-@Component({
-  components: { ResourceDropdown },
-})
-export default class ResourceItem extends Vue {
-  @Prop({ required: true, type: Object }) resource!: IResource;
+const props = withDefaults(
+  defineProps<{
+    resource: IResource;
+    inline?: boolean;
+    preview?: boolean;
+  }>(),
+  { inline: false, preview: false }
+);
 
-  @Prop({ required: false, default: false }) inline!: boolean;
-  @Prop({ required: false, default: false }) preview!: boolean;
+const emit = defineEmits<{
+  (e: "move", resource: IResource): void;
+  (e: "rename", resource: IResource): void;
+  (e: "delete", resourceID: string): void;
+}>();
 
-  list = [];
+// const list = ref([]);
 
-  mapServiceTypeToIcon = mapServiceTypeToIcon;
-
-  get urlHostname(): string | undefined {
-    if (this.resource?.resourceUrl) {
-      return new URL(this.resource.resourceUrl).hostname.replace(
-        /^(www\.)/,
-        ""
-      );
-    }
-    return undefined;
+const urlHostname = computed((): string | undefined => {
+  if (props.resource?.resourceUrl) {
+    return new URL(props.resource.resourceUrl).hostname.replace(/^(www\.)/, "");
   }
-}
+  return undefined;
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-.resource-wrapper {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  width: 100%;
-
-  .actions {
-    flex: 0;
-    display: block;
-    margin: auto 1rem;
-    cursor: pointer;
-  }
-}
 
 a {
   display: flex;
   font-size: 14px;
-  color: #444b5d;
+  // color: #444b5d;
   text-decoration: none;
   overflow: hidden;
   flex: 1;
@@ -125,20 +119,11 @@ a {
   }
 
   .body {
-    padding: 8px;
-    flex: 1 1 auto;
-    overflow: hidden;
-
-    .title-wrapper {
-      display: flex;
-      max-width: calc(100vw - 122px);
-    }
-
     img.favicon {
       display: inline-block;
       width: 16px;
       height: 16px;
-      @include margin-right(6px);
+      // @include margin-right(6px);
       vertical-align: middle;
     }
 
@@ -146,7 +131,6 @@ a {
       white-space: nowrap;
       display: inline-block;
       font-weight: 500;
-      color: $primary;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;
diff --git a/js/src/components/Resource/ResourceSelector.vue b/js/src/components/Resource/ResourceSelector.vue
index 5ecdcf4f5..9c6c4ecc2 100644
--- a/js/src/components/Resource/ResourceSelector.vue
+++ b/js/src/components/Resource/ResourceSelector.vue
@@ -1,34 +1,34 @@
 <template>
   <div v-if="resource">
     <article class="panel is-primary">
-      <p class="panel-heading truncate">
+      <h2 class="panel-heading truncate">
         {{
           $t('Move "{resourceName}"', { resourceName: initialResource.title })
         }}
-      </p>
+      </h2>
       <a
-        class="panel-block clickable"
-        @click="resource = resource.parent"
+        class="panel-block clickable flex gap-1 items-center"
+        @click="resourcePath.path = resource?.parent?.path"
         v-if="resource.parent"
       >
         <span class="panel-icon">
-          <b-icon icon="chevron-up" size="is-small" />
+          <ChevronUp :size="16" />
         </span>
         {{ $t("Parent folder") }}
       </a>
       <a
-        class="panel-block clickable"
-        @click="resource = { path: '/', username }"
-        v-else-if="resource.path.length > 1"
+        class="panel-block clickable flex gap-1 items-center"
+        @click="resourcePath.path = '/'"
+        v-else-if="resourcePath?.path && resourcePath?.path.length > 1"
       >
         <span class="panel-icon">
-          <b-icon icon="chevron-up" size="is-small" />
+          <ChevronUp :size="16" />
         </span>
         {{ $t("Parent folder") }}
       </a>
       <template v-if="resource.children">
         <a
-          class="panel-block flex-wrap"
+          class="panel-block flex flex-wrap gap-1 px-2"
           v-for="element in resource.children.elements"
           :class="{
             clickable:
@@ -37,14 +37,10 @@
           :key="element.id"
           @click="goDown(element)"
         >
-          <p class="truncate">
+          <p class="truncate flex gap-1 items-center">
             <span class="panel-icon">
-              <b-icon
-                icon="folder"
-                size="is-small"
-                v-if="element.type === 'folder'"
-              />
-              <b-icon icon="link" size="is-small" v-else />
+              <Folder :size="16" v-if="element.type === 'folder'" />
+              <Link :size="16" v-else />
             </span>
             <span>{{ element.title }}</span>
           </p>
@@ -60,11 +56,11 @@
       >
         {{ $t("No resources in this folder") }}
       </p>
-      <b-pagination
+      <o-pagination
         v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
         :total="resource.children.total"
         v-model="page"
-        size="is-small"
+        size="small"
         :per-page="RESOURCES_PER_PAGE"
         :aria-next-label="$t('Next page')"
         :aria-previous-label="$t('Previous page')"
@@ -72,12 +68,12 @@
         :aria-current-label="$t('Current page')"
       />
     </article>
-    <div class="buttons">
-      <b-button type="is-text" @click="$emit('close-move-modal')">{{
+    <div class="flex gap-2 mt-2">
+      <o-button variant="text" @click="emit('close-move-modal')">{{
         $t("Cancel")
-      }}</b-button>
-      <b-button
-        type="is-primary"
+      }}</o-button>
+      <o-button
+        variant="primary"
         @click="updateResource"
         :disabled="moveDisabled"
         ><template v-if="resource.path === '/'">
@@ -85,93 +81,84 @@
         </template>
         <template v-else
           >{{ $t("Move resource to {folder}", { folder: resource.title }) }}
-        </template></b-button
+        </template></o-button
       >
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+<script lang="ts" setup>
+import { useQuery } from "@vue/apollo-composable";
+import { computed, ref, watch } from "vue";
 import { GET_RESOURCE } from "../../graphql/resources";
 import { IResource } from "../../types/resource";
+import Folder from "vue-material-design-icons/Folder.vue";
+import Link from "vue-material-design-icons/Link.vue";
+import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
 
-@Component({
-  apollo: {
-    resource: {
-      query: GET_RESOURCE,
-      variables() {
-        if (this.resource && this.resource.path) {
-          return {
-            path: this.resource.path,
-            username: this.username,
-            page: this.page,
-            limit: this.RESOURCES_PER_PAGE,
-          };
-        }
-        return { path: "/", username: this.username };
-      },
-      skip() {
-        return !this.username;
-      },
+const props = defineProps<{ initialResource: IResource; username: string }>();
+const emit = defineEmits(["update-resource", "close-move-modal"]);
+
+const resourcePath = ref<{ path: string | undefined; username: string }>({
+  path: props.initialResource.path,
+  username: props.username,
+});
+
+const RESOURCES_PER_PAGE = 10;
+const page = ref(1);
+
+const { result: resourceResult, refetch } = useQuery<{ resource: IResource }>(
+  GET_RESOURCE,
+  () => {
+    if (resourcePath.value?.path) {
+      return {
+        path: resourcePath.value?.path,
+        username: props.username,
+        page: page.value,
+        limit: RESOURCES_PER_PAGE,
+      };
+    }
+    return { path: "/", username: props.username };
+  }
+);
+
+const resource = computed(() => resourceResult.value?.resource);
+
+const goDown = (element: IResource): void => {
+  if (element.type === "folder" && element.id !== props.initialResource.id) {
+    resourcePath.value.path = element.path;
+  }
+};
+
+watch(props.initialResource, () => {
+  if (props.initialResource) {
+    resourcePath.value.path = props.initialResource?.parent?.path;
+    refetch();
+  }
+});
+
+const updateResource = (): void => {
+  emit(
+    "update-resource",
+    {
+      id: props.initialResource.id,
+      title: props.initialResource.title,
+      parent: resourcePath.value?.path === "/" ? null : resourcePath.value,
+      path: props.initialResource.path,
     },
-  },
-})
-export default class ResourceSelector extends Vue {
-  @Prop({ required: true }) initialResource!: IResource;
+    props.initialResource.parent
+  );
+};
 
-  @Prop({ required: true }) username!: string;
-
-  resource: IResource | undefined = undefined;
-
-  RESOURCES_PER_PAGE = 10;
-
-  page = 1;
-
-  goDown(element: IResource): void {
-    if (element.type === "folder" && element.id !== this.initialResource.id) {
-      this.resource = element;
-    }
-  }
-
-  data() {
-    return {
-      resource: this.initialResource?.parent,
-    };
-  }
-
-  @Watch("initialResource")
-  updateResourceFromProp() {
-    if (this.initialResource) {
-      this.resource = this.initialResource?.parent;
-      this.$apollo.queries.resource.refetch();
-    }
-  }
-
-  updateResource(): void {
-    this.$emit(
-      "update-resource",
-      {
-        id: this.initialResource.id,
-        title: this.initialResource.title,
-        parent:
-          this.resource && this.resource.path === "/" ? null : this.resource,
-        path: this.initialResource.path,
-      },
-      this.initialResource.parent
-    );
-  }
-
-  get moveDisabled(): boolean | undefined {
-    return (
-      (this.initialResource.parent &&
-        this.resource &&
-        this.initialResource.parent.path === this.resource.path) ||
-      (this.initialResource.parent === undefined &&
-        this.resource &&
-        this.resource.path === "/")
-    );
-  }
-}
+const moveDisabled = computed((): boolean | undefined => {
+  return (
+    (props.initialResource.parent &&
+      resourcePath.value &&
+      props.initialResource.parent.path === resourcePath.value.path) ||
+    (props.initialResource.parent === undefined &&
+      resourcePath.value &&
+      resourcePath.value.path === "/")
+  );
+});
 </script>
 <style lang="scss" scoped>
 .panel {
@@ -184,7 +171,6 @@ export default class ResourceSelector extends Vue {
   }
 
   &.is-primary .panel-heading {
-    background: $primary;
     color: #fff;
   }
 }
diff --git a/js/src/components/Resource/utils.ts b/js/src/components/Resource/utils.ts
new file mode 100644
index 000000000..e5ad515a4
--- /dev/null
+++ b/js/src/components/Resource/utils.ts
@@ -0,0 +1,15 @@
+import { IResource } from "@/types/resource";
+
+export const resourcePath = (resource: IResource | undefined): string => {
+  const path = resource?.path ?? undefined;
+  if (path && path[0] === "/") {
+    return path.slice(1);
+  }
+  return path ?? "";
+};
+
+export const resourcePathArray = (
+  resource: IResource | undefined
+): string[] => {
+  return resourcePath(resource).split("/");
+};
diff --git a/js/src/components/Search/EventMarkerMap.vue b/js/src/components/Search/EventMarkerMap.vue
new file mode 100644
index 000000000..d67efc233
--- /dev/null
+++ b/js/src/components/Search/EventMarkerMap.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="relative my-2">
+    <div style="height: 70vh" id="mapMountPoint" />
+    <vue-bottom-sheet
+      v-if="activeElement"
+      ref="myBottomSheet"
+      class="md:hidden"
+      max-height="70%"
+      :background-scrollable="false"
+    >
+      <event-card
+        v-if="instanceOfIEvent(activeElement)"
+        :event="(activeElement as IEvent)"
+        :has-border="false"
+        view-mode="column"
+        :options="{
+          isRemoteEvent: activeElement.__typename === 'EventResult',
+          isLoggedIn,
+        }"
+      />
+      <group-card
+        v-else
+        :group="(activeElement as IGroup)"
+        :has-border="false"
+        view-mode="column"
+        :isRemoteGroup="activeElement.__typename === 'GroupResult'"
+        :isLoggedIn="isLoggedIn"
+      />
+    </vue-bottom-sheet>
+    <div
+      class="absolute hidden md:block bottom-0 md:top-8 right-0 h-48 w-full md:w-80 overflow-y-visible text-white [box-shadow:0 6px 9px 2px rgba(119,119,119,.75)] -my-4 px-2 z-[1100]"
+      v-if="activeElement"
+    >
+      <event-card
+        v-if="instanceOfIEvent(activeElement)"
+        :event="(activeElement as IEvent)"
+        view-mode="column"
+        :has-border="false"
+        :options="{
+          isRemoteEvent: activeElement.__typename === 'EventResult',
+          isLoggedIn,
+        }"
+      />
+      <group-card
+        v-else
+        :group="(activeElement as IGroup)"
+        :has-border="false"
+        view-mode="column"
+        :isRemoteGroup="activeElement.__typename === 'GroupResult'"
+        :isLoggedIn="isLoggedIn"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import "leaflet/dist/leaflet.css";
+import {
+  computed,
+  createApp,
+  DefineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import VueBottomSheet from "@/components/Map/VueBottomSheet.vue";
+import {
+  map,
+  LatLngBounds,
+  tileLayer,
+  marker,
+  divIcon,
+  Map,
+  Marker,
+} from "leaflet";
+import { MarkerClusterGroup } from "leaflet.markercluster/src";
+import { IGroup } from "@/types/actor";
+import { IEvent, instanceOfIEvent } from "@/types/event.model";
+import { ContentType } from "@/types/enums";
+import Calendar from "vue-material-design-icons/Calendar.vue";
+import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
+import GroupCard from "@/components/Group/GroupCard.vue";
+import EventCard from "@/components/Event/EventCard.vue";
+import debounce from "lodash/debounce";
+import { Paginate } from "@/types/paginate";
+import { TypeNamed } from "@/types/apollo";
+
+const mapElement = ref<Map>();
+const markers = ref<MarkerClusterGroup>();
+const myBottomSheet = ref<typeof VueBottomSheet>();
+
+const props = defineProps<{
+  contentType: ContentType;
+  events: Paginate<TypeNamed<IEvent>>;
+  groups: Paginate<TypeNamed<IGroup>>;
+  latitude?: number;
+  longitude?: number;
+  isLoggedIn: boolean | undefined;
+}>();
+
+const emit = defineEmits<{
+  (
+    e: "map-updated",
+    { bounds, zoom }: { bounds: LatLngBounds; zoom: number }
+  ): void;
+}>();
+
+const activeElement = ref<TypeNamed<IEvent> | TypeNamed<IGroup> | null>(null);
+
+const events = computed(() => props.events?.elements ?? []);
+const groups = computed(() => props.groups?.elements ?? []);
+
+watch([events, groups], update);
+
+function update() {
+  if (!mapElement.value || !mapElement.value.getBounds) return;
+  const rawBounds: LatLngBounds = mapElement.value.getBounds();
+  const bounds: LatLngBounds = mapElement.value.wrapLatLngBounds(rawBounds);
+  if (
+    bounds.getNorthWest().lat === 0 ||
+    bounds.getNorthWest().lat === bounds.getSouthEast().lat
+  )
+    return;
+  const zoom = mapElement.value.getZoom();
+  emit("map-updated", { bounds, zoom });
+}
+
+onBeforeUnmount(() => {
+  if (mapElement.value) {
+    mapElement.value.remove();
+  }
+});
+
+const initialView = computed<[[number, number], number]>(() => {
+  if (props.latitude && props.longitude) {
+    return [[props.latitude, props.longitude], 12];
+  }
+  return [[0, 0], 3];
+});
+
+watch(initialView, ([latlng, zoom]) => {
+  setLatLng(latlng, zoom);
+});
+
+const setLatLng = (latlng: [number, number], zoom: number) => {
+  console.debug("setting view to ", latlng, zoom);
+  mapElement.value?.setView(latlng, zoom);
+};
+
+onMounted(async () => {
+  mapElement.value = map("mapMountPoint");
+  setLatLng(...initialView.value);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  // eslint-disable-next-line no-underscore-dangle
+  mapElement.value._onResize();
+  mapElement.value.on("click", () => {
+    activeElement.value = null;
+    if (myBottomSheet.value) {
+      myBottomSheet.value.close();
+    }
+  });
+  // mapElement.value.on('load', function () {
+  //   console.log('load event')
+  //   setTimeout(() => {
+  //     console.log('invalidate size')
+  //     mapElement.value.invalidateSize()
+  //   }, 1000)
+  // })
+  markers.value = new MarkerClusterGroup({ chunkedLoading: true });
+
+  mapElement.value.on("zoom", debounce(update, 1000));
+  mapElement.value.on("moveend", debounce(update, 1000));
+
+  tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    attribution:
+      '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
+    className: "map-tiles",
+  }).addTo(mapElement.value);
+});
+
+const categoryToColorClass = (element: IEvent | IGroup): string => {
+  if (instanceOfIEvent(element)) {
+    return "marker-event";
+  }
+  return "marker-group";
+};
+
+const pointToLayer = (
+  element: TypeNamed<IEvent> | TypeNamed<IGroup>,
+  latlng: { lat: number; lng: number }
+): Marker => {
+  const icon = divIcon({
+    html: `<div class="marker-container ${categoryToColorClass(element)}">
+            <div class="pin-icon-container">
+              <svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M20 10C20 14.4183 12 22 12 22C12 22 4 14.4183 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10Z" stroke="currentColor" stroke-width="1.5"></path>
+              </svg>
+            </div>
+            <div class="element-icon-container text-black">
+              ${instanceOfIEvent(element) ? calendarHTML : AccountMultipleHTML}
+            </div>
+          </div>`,
+    iconSize: [50, 50],
+    iconAnchor: [25, 50],
+    // iconSize: [
+    //   MARKER_TOUCH_TARGET_SIZE * 0.5,
+    //   MARKER_TOUCH_TARGET_SIZE * 0.5,
+    // ],
+  });
+
+  return marker(latlng, { icon }).on("click", () => {
+    activeElement.value = element;
+    if (myBottomSheet.value) {
+      myBottomSheet.value.open();
+    }
+  });
+};
+
+// https://stackoverflow.com/a/68319134/10204399
+const vueComponentToHTML = (
+  component: DefineComponent,
+  localProps: Record<string, any> = {}
+) => {
+  const tempApp = createApp({
+    render() {
+      return h(component, localProps);
+    },
+  });
+
+  // in Vue 3 we need real element to mount to unlike in Vue 2 where mount() could be called without argument...
+  const el = document.createElement("div");
+  const mountedApp = tempApp.mount(el);
+
+  const html = mountedApp.$el.outerHTML as string;
+  // tempApp.unmount();
+  return html;
+};
+
+const calendarHTML = vueComponentToHTML(Calendar);
+const AccountMultipleHTML = vueComponentToHTML(AccountMultiple);
+
+update();
+
+const eventMarkers = computed(() => {
+  return events.value?.reduce((acc, event) => {
+    if (event.physicalAddress?.geom) {
+      const [lng, lat] = event.physicalAddress.geom.split(";");
+      return [
+        ...acc,
+        pointToLayer(event, {
+          lng: Number.parseFloat(lng),
+          lat: Number.parseFloat(lat),
+        }),
+      ];
+    }
+    return acc;
+  }, [] as Marker[]);
+});
+
+const groupMarkers = computed(() => {
+  return groups.value?.reduce((acc: Marker[], group: TypeNamed<IGroup>) => {
+    if (group.physicalAddress?.geom) {
+      const [lng, lat] = group.physicalAddress.geom.split(";");
+      return [
+        ...acc,
+        pointToLayer(group, {
+          lng: Number.parseFloat(lng),
+          lat: Number.parseFloat(lat),
+        }),
+      ];
+    }
+    return acc;
+  }, [] as Marker[]);
+});
+
+watch([markers, eventMarkers, groupMarkers], () => {
+  if (!markers.value) return;
+  console.debug(
+    "something changed in the search map",
+    markers.value,
+    eventMarkers.value,
+    groupMarkers.value
+  );
+  markers.value?.clearLayers();
+  if (props.contentType !== ContentType.GROUPS) {
+    eventMarkers.value?.forEach((markerToAdd) => {
+      console.debug("adding event marker layer to markers");
+      markers.value.addLayer(markerToAdd);
+    });
+  }
+  if (props.contentType !== ContentType.EVENTS) {
+    groupMarkers.value?.forEach((markerToAdd) => {
+      console.debug("adding group marker layer to markers");
+      markers.value.addLayer(markerToAdd);
+    });
+  }
+  mapElement.value?.addLayer(markers.value);
+});
+</script>
+<style>
+/*
+* https://github.com/mapbox/supercluster/blob/f073fade1caae0b2b1beffd013b74ff024ff413b/demo/cluster.css
+*/
+.marker-cluster-small {
+  background-color: rgba(181, 226, 140, 0.6);
+}
+
+.marker-cluster-small div {
+  background-color: rgba(110, 204, 57, 0.6);
+}
+
+.marker-cluster-medium {
+  background-color: rgba(241, 211, 87, 0.6);
+}
+
+.marker-cluster-medium div {
+  background-color: rgba(240, 194, 12, 0.6);
+}
+
+.marker-cluster-large {
+  background-color: rgba(253, 156, 115, 0.6);
+}
+
+.marker-cluster-large div {
+  background-color: rgba(241, 128, 23, 0.6);
+}
+
+.marker-cluster {
+  background-clip: padding-box;
+  border-radius: 20px;
+}
+
+.marker-cluster div {
+  width: 30px;
+  height: 30px;
+  margin-left: 5px;
+  margin-top: 5px;
+
+  text-align: center;
+  border-radius: 15px;
+  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+
+.marker-cluster span {
+  line-height: 30px;
+}
+
+:root {
+  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg)
+    saturate(0.3) brightness(0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+  .map-tiles {
+    filter: var(--map-tiles-filter, none);
+  }
+}
+
+.leaflet-div-icon {
+  background: none !important;
+  border: none !important;
+}
+
+.marker-container {
+  position: relative;
+}
+
+.marker-container.marker-event .pin-icon-container svg {
+  fill: yellow;
+  color: black;
+}
+
+.marker-container.marker-group .pin-icon-container svg {
+  fill: lightblue;
+  color: white;
+}
+
+.pin-icon-container {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+}
+
+.pin-icon-container svg path {
+  stroke-width: 1;
+}
+
+.pin-icon-container svg {
+  width: 100%;
+  height: 100%;
+}
+
+.element-icon-container {
+  position: absolute;
+  transform: translate(12px, 8px);
+}
+</style>
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/SearchField.vue b/js/src/components/SearchField.vue
index b6376f748..ab9ca7824 100644
--- a/js/src/components/SearchField.vue
+++ b/js/src/components/SearchField.vue
@@ -1,46 +1,50 @@
 <template>
-  <b-field label-for="navSearchField" class="-mt-2">
-    <b-input
+  <p label-for="navSearchField" class="-mt-2">
+    <input
       :placeholder="defaultPlaceHolder"
       type="search"
       id="navSearchField"
-      icon="magnify"
+      icon="Magnify"
       icon-clickable
       rounded
       custom-class="searchField"
       dir="auto"
       v-model="search"
-      @keyup.native.enter="enter"
-    >
-    </b-input>
-    <template #label>
+      @keyup.enter="enter"
+    />
+    <label>
       <span class="sr-only">{{ defaultPlaceHolder }}</span>
-    </template>
-  </b-field>
+    </label>
+  </p>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import RouteName from "../router/name";
 
-@Component
-export default class SearchField extends Vue {
-  @Prop({ type: String, required: false }) placeholder!: string;
+const router = useRouter();
+const { t } = useI18n({ useScope: "global" });
+const emit = defineEmits(["navbar-search"]);
 
-  search = "";
+const props = defineProps<{
+  placeholder?: string;
+}>();
 
-  async enter(): Promise<void> {
-    this.$emit("navbar-search");
-    await this.$router.push({
-      name: RouteName.SEARCH,
-      query: { term: this.search },
-    });
-  }
+const search = ref("");
 
-  get defaultPlaceHolder(): string {
-    // We can't use "this" inside @Prop's default value.
-    return this.placeholder || (this.$t("Search") as string);
-  }
-}
+const enter = async (): Promise<void> => {
+  emit("navbar-search");
+  await router.push({
+    name: RouteName.SEARCH,
+    query: { term: search.value },
+  });
+};
+
+const defaultPlaceHolder = computed((): string => {
+  // We can't use "this" inside @Prop's default value.
+  return props.placeholder ?? t("Search");
+});
 </script>
 
 <style lang="scss">
diff --git a/js/src/components/Settings/NotificationsOnboarding.vue b/js/src/components/Settings/NotificationsOnboarding.vue
index 9df49add3..cf4acc01c 100644
--- a/js/src/components/Settings/NotificationsOnboarding.vue
+++ b/js/src/components/Settings/NotificationsOnboarding.vue
@@ -15,7 +15,7 @@
         </p>
       </div>
       <div class="field">
-        <b-checkbox
+        <o-checkbox
           v-model="notificationOnDay"
           @input="updateSetting({ notificationOnDay })"
         >
@@ -27,7 +27,7 @@
               )
             }}
           </p>
-        </b-checkbox>
+        </o-checkbox>
       </div>
       <p>
         {{
@@ -39,34 +39,34 @@
     </section>
   </div>
 </template>
-<script lang="ts">
-import { Component } from "vue-property-decorator";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { mixins } from "vue-class-component";
-import Onboarding from "../../mixins/onboarding";
+<script lang="ts" setup>
+// import { SnackbarProgrammatic as Snackbar } from "buefy";
+import { doUpdateSetting, useUserSettings } from "@/composition/apollo/user";
+import { onMounted, ref } from "vue";
 
-@Component
-export default class NotificationsOnboarding extends mixins(Onboarding) {
-  notificationOnDay = true;
+const notificationOnDay = ref(true);
 
-  mounted(): void {
-    this.doUpdateSetting({
-      notificationOnDay: true,
-      notificationEachWeek: false,
-      notificationBeforeEvent: false,
-    });
+const { loggedUser } = useUserSettings();
+
+const updateSetting = async (
+  variables: Record<string, unknown>
+): Promise<void> => {
+  try {
+    doUpdateSetting(variables);
+  } catch (e: any) {
+    // Snackbar.open({
+    //   message: e.message,
+    //   variant: "danger",
+    //   position: "bottom",
+    // });
   }
+};
 
-  async updateSetting(variables: Record<string, unknown>): Promise<void> {
-    try {
-      this.doUpdateSetting(variables);
-    } catch (e: any) {
-      Snackbar.open({
-        message: e.message,
-        type: "is-danger",
-        position: "is-bottom",
-      });
-    }
-  }
-}
+onMounted(() => {
+  doUpdateSetting({
+    notificationOnDay: true,
+    notificationEachWeek: false,
+    notificationBeforeEvent: false,
+  });
+});
 </script>
diff --git a/js/src/components/Settings/SettingMenuItem.vue b/js/src/components/Settings/SettingMenuItem.vue
index 5c9103491..0d63caa32 100644
--- a/js/src/components/Settings/SettingMenuItem.vue
+++ b/js/src/components/Settings/SettingMenuItem.vue
@@ -1,39 +1,44 @@
 <template>
-  <li class="setting-menu-item" :class="{ active: isActive }">
+  <li
+    class="setting-menu-item"
+    :class="{
+      'cursor-pointer bg-mbz-yellow-alt-500 dark:bg-mbz-purple-500': isActive,
+      'bg-mbz-yellow-alt-100 hover:bg-mbz-yellow-alt-200 dark:bg-mbz-purple-300 dark:hover:bg-mbz-purple-400 dark:text-white':
+        !isActive,
+    }"
+  >
     <router-link v-if="to" :to="to">
       <span>{{ title }}</span>
     </router-link>
     <span v-else>{{ title }}</span>
   </li>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { Route } from "vue-router";
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRoute } from "vue-router";
 
-@Component
-export default class SettingMenuItem extends Vue {
-  @Prop({ required: false, type: String }) title!: string;
+const props = defineProps<{
+  title?: string;
+  to: { name: string; params?: Record<string, any> };
+}>();
 
-  @Prop({ required: true, type: Object }) to!: Route;
+const route = useRoute();
 
-  get isActive(): boolean {
-    if (!this.to) return false;
-    if (this.to.name === this.$route.name) {
-      if (this.to.params) {
-        return this.to.params.identityName === this.$route.params.identityName;
-      }
-      return true;
+const isActive = computed((): boolean => {
+  if (props.to.name === route.name) {
+    if (props.to.params) {
+      return props.to.params.identityName === route.params.identityName;
     }
-    return false;
+    return true;
   }
-}
+  return false;
+});
 </script>
 
 <style lang="scss" scoped>
 li.setting-menu-item {
   font-size: 1.05rem;
-  background-color: #fff1de;
-  color: $background-color;
+  // background-color: #fff1de;
   margin: auto;
 
   span {
@@ -49,7 +54,7 @@ li.setting-menu-item {
   &:hover,
   &.active {
     cursor: pointer;
-    background-color: lighten(#fea72b, 10%);
+    // background-color: lighten(#fea72b, 10%);
   }
 }
 </style>
diff --git a/js/src/components/Settings/SettingMenuSection.vue b/js/src/components/Settings/SettingMenuSection.vue
index 264eb19b1..173839567 100644
--- a/js/src/components/Settings/SettingMenuSection.vue
+++ b/js/src/components/Settings/SettingMenuSection.vue
@@ -1,61 +1,38 @@
 <template>
-  <li :class="{ active: sectionActive }">
-    <router-link v-if="to" :to="to">{{ title }}</router-link>
+  <li
+    class="bg-mbz-yellow-alt-300 text-violet-2 dark:bg-mbz-purple-500 dark:text-zinc-100 text-xl"
+  >
+    <router-link
+      class="cursor-pointer my-2 mx-0 py-2 px-3 font-medium block no-underline"
+      v-if="to"
+      :to="to"
+      >{{ title }}</router-link
+    >
     <b v-else>{{ title }}</b>
     <ul>
       <slot></slot>
     </ul>
   </li>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import SettingMenuItem from "@/components/Settings/SettingMenuItem.vue";
-import { Route } from "vue-router";
+<script lang="ts" setup>
+defineProps<{
+  title?: string;
+  to: { name: string; params?: Record<string, any> };
+}>();
 
-@Component({
-  components: { SettingMenuItem },
-})
-export default class SettingMenuSection extends Vue {
-  @Prop({ required: false, type: String }) title!: string;
+// const route = useRoute();
+// const slots = useSlots();
 
-  @Prop({ required: true, type: Object }) to!: Route;
-
-  get sectionActive(): boolean {
-    if (this.$slots.default) {
-      return this.$slots.default.some(
-        ({
-          componentOptions: {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            propsData: { to },
-          },
-        }) => to && to.name === this.$route.name
-      );
-    }
-    return false;
-  }
-}
+// const sectionActive = computed((): boolean => {
+//   if (slots.default) {
+//     return slots.default.some(
+//       ({
+//         componentOptions: {
+//           propsData: { to },
+//         },
+//       }) => to && to.name === route.name
+//     );
+//   }
+//   return false;
+// });
 </script>
-
-<style lang="scss" scoped>
-li {
-  font-size: 1.3rem;
-  background-color: $secondary;
-  color: $background-color;
-  margin: 2px auto;
-
-  &.active {
-    background-color: #fea72b;
-  }
-
-  a,
-  b {
-    cursor: pointer;
-    margin: 5px 0;
-    display: block;
-    padding: 5px 10px;
-    color: inherit;
-    font-weight: 500;
-  }
-}
-</style>
diff --git a/js/src/components/Settings/SettingsMenu.vue b/js/src/components/Settings/SettingsMenu.vue
index 3be7a96ad..90e3ecbb9 100644
--- a/js/src/components/Settings/SettingsMenu.vue
+++ b/js/src/components/Settings/SettingsMenu.vue
@@ -1,25 +1,25 @@
 <template>
-  <aside>
+  <aside class="mb-6">
     <ul>
       <SettingMenuSection
-        :title="$t('Account')"
+        :title="t('Account')"
         :to="{ name: RouteName.ACCOUNT_SETTINGS }"
       >
         <SettingMenuItem
-          :title="this.$t('General')"
+          :title="t('General')"
           :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }"
         />
         <SettingMenuItem
-          :title="$t('Preferences')"
+          :title="t('Preferences')"
           :to="{ name: RouteName.PREFERENCES }"
         />
         <SettingMenuItem
-          :title="this.$t('Notifications')"
+          :title="t('Notifications')"
           :to="{ name: RouteName.NOTIFICATIONS }"
         />
       </SettingMenuSection>
       <SettingMenuSection
-        :title="$t('Profiles')"
+        :title="t('Profiles')"
         :to="{ name: RouteName.IDENTITIES }"
       >
         <SettingMenuItem
@@ -32,95 +32,76 @@
           }"
         />
         <SettingMenuItem
-          :title="$t('New profile')"
+          :title="t('New profile')"
           :to="{ name: RouteName.CREATE_IDENTITY }"
         />
       </SettingMenuSection>
       <SettingMenuSection
         v-if="
+          currentUser?.role &&
           [ICurrentUserRole.MODERATOR, ICurrentUserRole.ADMINISTRATOR].includes(
-            this.currentUser.role
+            currentUser?.role
           )
         "
-        :title="$t('Moderation')"
+        :title="t('Moderation')"
         :to="{ name: RouteName.MODERATION }"
       >
         <SettingMenuItem
-          :title="$t('Reports')"
+          :title="t('Reports')"
           :to="{ name: RouteName.REPORTS }"
         />
         <SettingMenuItem
-          :title="$t('Moderation log')"
+          :title="t('Moderation log')"
           :to="{ name: RouteName.REPORT_LOGS }"
         />
-        <SettingMenuItem :title="$t('Users')" :to="{ name: RouteName.USERS }" />
+        <SettingMenuItem :title="t('Users')" :to="{ name: RouteName.USERS }" />
         <SettingMenuItem
-          :title="$t('Profiles')"
+          :title="t('Profiles')"
           :to="{ name: RouteName.PROFILES }"
         />
         <SettingMenuItem
-          :title="$t('Groups')"
+          :title="t('Groups')"
           :to="{ name: RouteName.ADMIN_GROUPS }"
         />
       </SettingMenuSection>
       <SettingMenuSection
-        v-if="this.currentUser.role == ICurrentUserRole.ADMINISTRATOR"
-        :title="$t('Admin')"
+        v-if="currentUser?.role == ICurrentUserRole.ADMINISTRATOR"
+        :title="t('Admin')"
         :to="{ name: RouteName.ADMIN }"
       >
         <SettingMenuItem
-          :title="$t('Dashboard')"
+          :title="t('Dashboard')"
           :to="{ name: RouteName.ADMIN_DASHBOARD }"
         />
         <SettingMenuItem
-          :title="$t('Instance settings')"
+          :title="t('Instance settings')"
           :to="{ name: RouteName.ADMIN_SETTINGS }"
         />
         <SettingMenuItem
-          :title="$t('Federation')"
+          :title="t('Federation')"
           :to="{ name: RouteName.INSTANCES }"
         />
       </SettingMenuSection>
     </ul>
   </aside>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { ICurrentUserRole } from "@/types/enums";
 import SettingMenuSection from "./SettingMenuSection.vue";
 import SettingMenuItem from "./SettingMenuItem.vue";
-import { IDENTITIES } from "../../graphql/actor";
-import { IPerson, Person } from "../../types/actor";
-import { CURRENT_USER_CLIENT } from "../../graphql/user";
-import { ICurrentUser } from "../../types/current-user.model";
 
 import RouteName from "../../router/name";
+import { useCurrentUserClient } from "@/composition/apollo/user";
+import { useCurrentUserIdentities } from "@/composition/apollo/actor";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  components: { SettingMenuSection, SettingMenuItem },
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-      update: (data) =>
-        data.identities.map((identity: IPerson) => new Person(identity)),
-    },
-    currentUser: CURRENT_USER_CLIENT,
-  },
-})
-export default class SettingsMenu extends Vue {
-  profiles = [];
+const { currentUser } = useCurrentUserClient();
+const { identities } = useCurrentUserIdentities();
 
-  currentUser!: ICurrentUser;
-
-  identities!: IPerson[];
-
-  ICurrentUserRole = ICurrentUserRole;
-
-  RouteName = RouteName;
-}
+const { t } = useI18n({ useScope: "global" });
 </script>
 <style lang="scss" scoped>
-::v-deep a {
+:deep(a) {
   text-decoration: none;
 }
 </style>
diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue
index 4eaa5614f..fa936c5ad 100644
--- a/js/src/components/Settings/SettingsOnboarding.vue
+++ b/js/src/components/Settings/SettingsOnboarding.vue
@@ -2,106 +2,89 @@
   <div v-if="loggedUser">
     <section>
       <div class="setting-title">
-        <h2>{{ $t("Settings") }}</h2>
+        <h2>{{ t("Settings") }}</h2>
       </div>
       <div>
-        <h3>{{ $t("Language") }}</h3>
+        <h3>{{ t("Language") }}</h3>
         <p>
           {{
-            $t(
+            t(
               "This setting will be used to display the website and send you emails in the correct language."
             )
           }}
         </p>
         <div class="has-text-centered">
-          <b-select
-            :loading="!config || !loggedUser"
+          <o-select
+            :loading="loading"
             v-model="locale"
-            :placeholder="$t('Select a language')"
+            :placeholder="t('Select a language')"
           >
             <option v-for="(language, lang) in langs" :value="lang" :key="lang">
               {{ language }}
             </option>
-          </b-select>
+          </o-select>
         </div>
       </div>
 
       <div>
-        <h3>{{ $t("Timezone") }}</h3>
+        <h3>{{ t("Timezone") }}</h3>
         <p>
           {{
-            $t(
+            t(
               "We use your timezone to make sure you get notifications for an event at the correct time."
             )
           }}
           {{
-            $t("Your timezone was detected as {timezone}.", {
+            t("Your timezone was detected as {timezone}.", {
               timezone,
             })
           }}
-          <b-message
-            type="is-danger"
-            v-if="!$apollo.loading && !supportedTimezone"
+          <o-notification
+            variant="danger"
+            v-if="!loading && !supportedTimezone"
           >
-            {{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
-          </b-message>
+            {{ t("Your timezone {timezone} isn't supported.", { timezone }) }}
+          </o-notification>
         </p>
       </div>
     </section>
   </div>
 </template>
-<script lang="ts">
-import { Component, Watch } from "vue-property-decorator";
-import { TIMEZONES } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
+<script lang="ts" setup>
+import { useTimezones } from "@/composition/apollo/config";
+import {
+  doUpdateSetting,
+  updateLocale,
+  useUserSettings,
+} from "@/composition/apollo/user";
 import { saveLocaleData } from "@/utils/auth";
-import { mixins } from "vue-class-component";
-import Onboarding from "@/mixins/onboarding";
-import { UPDATE_USER_LOCALE } from "../../graphql/user";
+import { computed, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import langs from "../../i18n/langs.json";
 
-@Component({
-  apollo: {
-    config: TIMEZONES,
-  },
-})
-export default class SettingsOnboarding extends mixins(Onboarding) {
-  config!: IConfig;
+const { timezones, loading } = useTimezones();
 
-  notificationOnDay = true;
+const { t, locale } = useI18n({ useScope: "global" });
 
-  locale: string | null = this.$i18n.locale;
+const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-  langs: Record<string, string> = langs;
+const { loggedUser } = useUserSettings();
 
-  timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+onMounted(() => {
+  updateLocale(locale.value as string);
+  doUpdateSetting({ timezone });
+});
 
-  mounted(): void {
-    this.doUpdateLocale(this.$i18n.locale);
-    this.doUpdateSetting({ timezone: this.timezone });
+watch(locale, () => {
+  if (locale.value) {
+    updateLocale(locale.value as string);
+    saveLocaleData(locale.value as string);
   }
+});
 
-  @Watch("locale")
-  async updateLocale(): Promise<void> {
-    if (this.locale) {
-      this.doUpdateLocale(this.locale);
-      saveLocaleData(this.locale);
-    }
-  }
-
-  private async doUpdateLocale(locale: string): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: UPDATE_USER_LOCALE,
-      variables: {
-        locale,
-      },
-    });
-  }
-
-  get supportedTimezone(): boolean {
-    return this.config && this.config.timezones.includes(this.timezone);
-  }
-}
+const supportedTimezone = computed((): boolean => {
+  return (timezones.value ?? []).includes(timezone);
+});
 </script>
 <style lang="scss" scoped>
 h3 {
diff --git a/js/src/components/Share/DiasporaLogo.vue b/js/src/components/Share/DiasporaLogo.vue
index a2ce06903..a04c0959a 100644
--- a/js/src/components/Share/DiasporaLogo.vue
+++ b/js/src/components/Share/DiasporaLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="icon has-text-primary is-large">
+  <span class="text-black dark:text-white dark:fill-white">
     <svg
       version="1.1"
       viewBox="0 0 65.131 65.131"
@@ -12,15 +12,9 @@
       />
       <path
         d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z"
-        fill="#fff"
+        fill="transparent"
         stroke-width=".093311"
       />
     </svg>
   </span>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class DiasporaLogo extends Vue {}
-</script>
diff --git a/js/src/components/Share/MastodonLogo.vue b/js/src/components/Share/MastodonLogo.vue
index c35ace269..400985264 100644
--- a/js/src/components/Share/MastodonLogo.vue
+++ b/js/src/components/Share/MastodonLogo.vue
@@ -1,11 +1,6 @@
 <template>
-  <span class="icon has-text-primary is-large">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="61.076954mm"
-      height="65.47831mm"
-      viewBox="0 0 216.4144 232.00976"
-    >
+  <span class="text-primary dark:text-white">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976">
       <title>Mastodon logo</title>
       <path
         d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"
@@ -17,9 +12,3 @@
     </svg>
   </span>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class DiasporaLogo extends Vue {}
-</script>
diff --git a/js/src/components/Share/ShareModal.vue b/js/src/components/Share/ShareModal.vue
new file mode 100644
index 000000000..8c7efa1b9
--- /dev/null
+++ b/js/src/components/Share/ShareModal.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="dark:text-white p-4">
+    <header class="">
+      <h2 class="text-2xl">{{ title }}</h2>
+    </header>
+
+    <section class="flex">
+      <div class="w-full">
+        <slot></slot>
+        <o-field :label="inputLabel" label-for="url-text">
+          <o-input id="url-text" ref="URLInput" :modelValue="url" expanded />
+          <p class="control">
+            <o-tooltip
+              :label="t('URL copied to clipboard')"
+              :active="showCopiedTooltip"
+              always
+              variant="success"
+              position="left"
+            >
+              <o-button
+                variant="primary"
+                icon-right="content-paste"
+                native-type="button"
+                @click="copyURL"
+                @keyup.enter="copyURL"
+                :title="t('Copy URL to clipboard')"
+              />
+            </o-tooltip>
+          </p>
+        </o-field>
+        <div class="flex flex-wrap gap-1">
+          <a
+            :href="twitterShare"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Twitter"
+            ><Twitter :size="48" class="dark:text-white"
+          /></a>
+          <a
+            :href="mastodonShare"
+            class="mastodon"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Mastodon"
+          >
+            <mastodon-logo />
+          </a>
+          <a
+            :href="facebookShare"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Facebook"
+            ><Facebook :size="48" class="dark:text-white"
+          /></a>
+          <a
+            :href="whatsAppShare"
+            target="_blank"
+            rel="nofollow noopener"
+            title="WhatsApp"
+            ><Whatsapp :size="48" class="dark:text-white"
+          /></a>
+          <a
+            :href="telegramShare"
+            class="telegram"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Telegram"
+          >
+            <telegram-logo />
+          </a>
+          <a
+            :href="linkedInShare"
+            target="_blank"
+            rel="nofollow noopener"
+            title="LinkedIn"
+            ><LinkedIn :size="48" class="dark:text-white"
+          /></a>
+          <a
+            :href="diasporaShare"
+            class="diaspora"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Diaspora"
+          >
+            <diaspora-logo />
+          </a>
+          <a
+            :href="emailShare"
+            target="_blank"
+            rel="nofollow noopener"
+            title="Email"
+          >
+            <Email :size="48" class="dark:text-white" />
+          </a>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import DiasporaLogo from "./DiasporaLogo.vue";
+import MastodonLogo from "./MastodonLogo.vue";
+import TelegramLogo from "./TelegramLogo.vue";
+import Email from "vue-material-design-icons/Email.vue";
+import LinkedIn from "vue-material-design-icons/Linkedin.vue";
+import Whatsapp from "vue-material-design-icons/Whatsapp.vue";
+import Facebook from "vue-material-design-icons/Facebook.vue";
+import Twitter from "vue-material-design-icons/Twitter.vue";
+import {
+  diasporaShareUrl,
+  emailShareUrl,
+  facebookShareUrl,
+  linkedInShareUrl,
+  mastodonShareUrl,
+  telegramShareUrl,
+  twitterShareUrl,
+  whatsAppShareUrl,
+} from "@/utils/share";
+import { useI18n } from "vue-i18n";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    url: string;
+    text: string;
+    inputLabel: string;
+  }>(),
+  {}
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+const URLInput = ref<{ $refs: { input: HTMLInputElement } } | null>(null);
+
+const showCopiedTooltip = ref(false);
+
+const twitterShare = computed((): string | undefined =>
+  twitterShareUrl(props.url, props.text)
+);
+const facebookShare = computed((): string | undefined =>
+  facebookShareUrl(props.url)
+);
+const linkedInShare = computed((): string | undefined =>
+  linkedInShareUrl(props.url, props.text)
+);
+const whatsAppShare = computed((): string | undefined =>
+  whatsAppShareUrl(props.url, props.text)
+);
+const telegramShare = computed((): string | undefined =>
+  telegramShareUrl(props.url, props.text)
+);
+const emailShare = computed((): string | undefined =>
+  emailShareUrl(props.url, props.text)
+);
+const diasporaShare = computed((): string | undefined =>
+  diasporaShareUrl(props.url, props.text)
+);
+const mastodonShare = computed((): string | undefined =>
+  mastodonShareUrl(props.url, props.text)
+);
+
+const copyURL = (): void => {
+  URLInput.value?.$refs.input.select();
+  document.execCommand("copy");
+  showCopiedTooltip.value = true;
+  setTimeout(() => {
+    showCopiedTooltip.value = false;
+  }, 2000);
+};
+</script>
+<style lang="scss" scoped>
+.diaspora,
+.mastodon,
+.telegram {
+  :deep(span svg) {
+    width: 2.5rem;
+    margin-top: 5px;
+  }
+}
+</style>
diff --git a/js/src/components/Share/TelegramLogo.vue b/js/src/components/Share/TelegramLogo.vue
index feb255786..aed851fe3 100644
--- a/js/src/components/Share/TelegramLogo.vue
+++ b/js/src/components/Share/TelegramLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="icon has-text-primary is-large">
+  <span class="text-primary dark:text-white dark:fill-white">
     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <title>Telegram</title>
       <path
@@ -8,9 +8,3 @@
     </svg>
   </span>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class TelegramLogo extends Vue {}
-</script>
diff --git a/js/src/components/Tag.vue b/js/src/components/Tag.vue
deleted file mode 100644
index 2fcf28699..000000000
--- a/js/src/components/Tag.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <span class="tag">
-    <span>
-      <slot />
-    </span>
-  </span>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class Tag extends Vue {}
-</script>
-
-<style lang="scss" scoped>
-span.tag {
-  background: $purple-3;
-  color: $violet-2;
-  text-transform: uppercase;
-
-  &:not(.category)::before {
-    content: "#";
-  }
-}
-</style>
diff --git a/js/src/components/TagElement.vue b/js/src/components/TagElement.vue
new file mode 100644
index 000000000..cde862ae6
--- /dev/null
+++ b/js/src/components/TagElement.vue
@@ -0,0 +1,44 @@
+<template>
+  <span
+    class="rounded-md my-1 truncate text-sm text-violet-title px-2 py-1"
+    :class="[
+      typeClasses,
+      capitalize,
+      withHashTag ? `before:content-['#']` : '',
+    ]"
+  >
+    <slot />
+  </span>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: "info" | "danger" | "warning" | "light" | "primary";
+    capitalize?: boolean;
+    withHashTag?: boolean;
+  }>(),
+  { variant: "light", capitalize: false, withHashTag: false }
+);
+
+const typeClasses = computed(() => {
+  switch (props.variant) {
+    default:
+    case "light":
+      return "bg-purple-3 dark:text-violet-3";
+    case "info":
+      return "bg-mbz-info dark:text-black";
+    case "warning":
+      return "bg-yellow-1";
+    case "danger":
+      return "bg-mbz-danger dark:text-white";
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+span.withHashTag::before {
+  content: "#";
+}
+</style>
diff --git a/js/src/components/TextEditor.vue b/js/src/components/TextEditor.vue
new file mode 100644
index 000000000..86a21dfc7
--- /dev/null
+++ b/js/src/components/TextEditor.vue
@@ -0,0 +1,596 @@
+<template>
+  <div v-if="editor !== null">
+    <div
+      class="editor"
+      :class="{ short_mode: isShortMode, comment_mode: isCommentMode }"
+      id="tiptab-editor"
+      :data-actor-id="currentActor && currentActor.id"
+    >
+      <div
+        class="mb-2 menubar bar-is-hidden"
+        v-if="isDescriptionMode"
+        :editor="editor"
+      >
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('bold') }"
+          @click="editor?.chain().focus().toggleBold().run()"
+          type="button"
+          :title="t('Bold')"
+        >
+          <FormatBold :size="24" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('italic') }"
+          @click="editor?.chain().focus().toggleItalic().run()"
+          type="button"
+          :title="t('Italic')"
+        >
+          <FormatItalic :size="24" />
+        </button>
+
+        <button
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('underline') }"
+          @click="editor?.chain().focus().toggleUnderline().run()"
+          type="button"
+          :title="t('Underline')"
+        >
+          <FormatUnderline :size="24" />
+        </button>
+
+        <button
+          v-if="!isBasicMode"
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+          @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()"
+          type="button"
+          :title="t('Heading Level 1')"
+        >
+          <FormatHeader1 :size="24" />
+        </button>
+
+        <button
+          v-if="!isBasicMode"
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+          @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()"
+          type="button"
+          :title="t('Heading Level 2')"
+        >
+          <FormatHeader2 :size="24" />
+        </button>
+
+        <button
+          v-if="!isBasicMode"
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+          @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()"
+          type="button"
+          :title="t('Heading Level 3')"
+        >
+          <FormatHeader3 :size="24" />
+        </button>
+
+        <button
+          class="menubar__button"
+          @click="showLinkMenu()"
+          :class="{ 'is-active': editor.isActive('link') }"
+          type="button"
+          :title="t('Add link')"
+        >
+          <LinkIcon :size="24" />
+        </button>
+
+        <button
+          v-if="editor.isActive('link')"
+          class="menubar__button"
+          @click="editor?.chain().focus().unsetLink().run()"
+          type="button"
+          :title="t('Remove link')"
+        >
+          <LinkOff :size="24" />
+        </button>
+
+        <button
+          class="menubar__button"
+          v-if="!isBasicMode"
+          @click="showImagePrompt()"
+          type="button"
+          :title="t('Add picture')"
+        >
+          <Image :size="24" />
+        </button>
+
+        <button
+          class="menubar__button"
+          v-if="!isBasicMode"
+          :class="{ 'is-active': editor.isActive('bulletList') }"
+          @click="editor?.chain().focus().toggleBulletList().run()"
+          type="button"
+          :title="t('Bullet list')"
+        >
+          <FormatListBulleted :size="24" />
+        </button>
+
+        <button
+          v-if="!isBasicMode"
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('orderedList') }"
+          @click="editor?.chain().focus().toggleOrderedList().run()"
+          type="button"
+          :title="t('Ordered list')"
+        >
+          <FormatListNumbered :size="24" />
+        </button>
+
+        <button
+          v-if="!isBasicMode"
+          class="menubar__button"
+          :class="{ 'is-active': editor.isActive('blockquote') }"
+          @click="editor?.chain().focus().toggleBlockquote().run()"
+          type="button"
+          :title="t('Quote')"
+        >
+          <FormatQuoteClose :size="24" />
+        </button>
+
+        <button
+          v-if="!isBasicMode"
+          class="menubar__button"
+          @click="editor?.chain().focus().undo().run()"
+          type="button"
+          :title="t('Undo')"
+        >
+          <Undo :size="24" />
+        </button>
+
+        <button
+          v-if="!isBasicMode"
+          class="menubar__button"
+          @click="editor?.chain().focus().redo().run()"
+          type="button"
+          :title="t('Redo')"
+        >
+          <Redo :size="24" />
+        </button>
+      </div>
+
+      <bubble-menu
+        v-if="editor && isCommentMode"
+        class="bubble-menu"
+        :editor="editor"
+        :tippy-options="{ duration: 100 }"
+      >
+        <button
+          class="menububble__button"
+          :class="{ 'is-active': editor.isActive('bold') }"
+          @click="editor?.chain().focus().toggleBold().run()"
+          type="button"
+          :title="t('Bold')"
+        >
+          <FormatBold :size="24" />
+          <span class="visually-hidden">{{ t("Bold") }}</span>
+        </button>
+
+        <button
+          class="menububble__button"
+          :class="{ 'is-active': editor.isActive('italic') }"
+          @click="editor?.chain().focus().toggleItalic().run()"
+          type="button"
+          :title="t('Italic')"
+        >
+          <FormatItalic :size="24" />
+          <span class="visually-hidden">{{ t("Italic") }}</span>
+        </button>
+      </bubble-menu>
+
+      <editor-content class="editor__content" :editor="editor" v-if="editor" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
+import Blockquote from "@tiptap/extension-blockquote";
+import BulletList from "@tiptap/extension-bullet-list";
+import Heading from "@tiptap/extension-heading";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import Dropcursor from "@tiptap/extension-dropcursor";
+import Gapcursor from "@tiptap/extension-gapcursor";
+import History from "@tiptap/extension-history";
+import { IActor, IPerson, usernameWithDomain } from "../types/actor";
+import CustomImage from "./Editor/Image";
+import { UPLOAD_MEDIA } from "../graphql/upload";
+import { listenFileUpload } from "../utils/upload";
+import Mention from "@tiptap/extension-mention";
+import MentionOptions from "./Editor/Mention";
+import OrderedList from "@tiptap/extension-ordered-list";
+import ListItem from "@tiptap/extension-list-item";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import { AutoDir } from "./Editor/Autodir";
+// import sanitizeHtml from "sanitize-html";
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { Dialog } from "@/plugins/dialog";
+import { useI18n } from "vue-i18n";
+import { useMutation } from "@vue/apollo-composable";
+import { Notifier } from "@/plugins/notifier";
+import FormatBold from "vue-material-design-icons/FormatBold.vue";
+import FormatItalic from "vue-material-design-icons/FormatItalic.vue";
+import FormatUnderline from "vue-material-design-icons/FormatUnderline.vue";
+import FormatHeader1 from "vue-material-design-icons/FormatHeader1.vue";
+import FormatHeader2 from "vue-material-design-icons/FormatHeader2.vue";
+import FormatHeader3 from "vue-material-design-icons/FormatHeader3.vue";
+import LinkIcon from "vue-material-design-icons/Link.vue";
+import LinkOff from "vue-material-design-icons/LinkOff.vue";
+import Image from "vue-material-design-icons/Image.vue";
+import FormatListBulleted from "vue-material-design-icons/FormatListBulleted.vue";
+import FormatListNumbered from "vue-material-design-icons/FormatListNumbered.vue";
+import FormatQuoteClose from "vue-material-design-icons/FormatQuoteClose.vue";
+import Undo from "vue-material-design-icons/Undo.vue";
+import Redo from "vue-material-design-icons/Redo.vue";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    mode?: string;
+    maxSize?: number;
+    ariaLabel?: string;
+    currentActor: IPerson;
+  }>(),
+  {
+    mode: "description",
+    maxSize: 100_000_000,
+  }
+);
+
+const emit = defineEmits(["update:modelValue"]);
+
+const editor = ref<Editor | null>(null);
+
+const isDescriptionMode = computed((): boolean => {
+  return props.mode === "description" || isBasicMode.value;
+});
+
+const isCommentMode = computed((): boolean => {
+  return props.mode === "comment";
+});
+
+const isShortMode = computed((): boolean => {
+  return isBasicMode.value;
+});
+
+const isBasicMode = computed((): boolean => {
+  return props.mode === "basic";
+});
+
+// const insertMention = (obj: { range: any; attrs: any }) => {
+//   console.debug("initialize Mention");
+// };
+
+// const observer = ref<MutationObserver | null>(null);
+
+onMounted(() => {
+  editor.value = new Editor({
+    editorProps: {
+      attributes: {
+        "aria-multiline": isShortMode.value.toString(),
+        "aria-label": props.ariaLabel ?? "",
+        role: "textbox",
+      },
+      transformPastedHTML: transformPastedHTML,
+    },
+    extensions: [
+      Blockquote,
+      BulletList,
+      Heading,
+      Document,
+      Paragraph,
+      Text,
+      OrderedList,
+      ListItem,
+      Mention.configure(MentionOptions),
+      CustomImage,
+      AutoDir,
+      Underline,
+      Bold,
+      Italic,
+      Strike,
+      Dropcursor,
+      Gapcursor,
+      History,
+      Link.configure({
+        HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
+      }),
+    ],
+    injectCSS: false,
+    content: props.modelValue,
+    onUpdate: () => {
+      emit("update:modelValue", editor.value?.getHTML());
+    },
+  });
+});
+
+const transformPastedHTML = (html: string): string => {
+  // When using comment mode, limit to acceptable tags
+  if (isCommentMode.value) {
+    // return sanitizeHtml(html, {
+    //   allowedTags: ["b", "i", "em", "strong", "a"],
+    //   allowedAttributes: {
+    //     a: ["href", "rel", "target"],
+    //   },
+    // });
+    return html;
+  }
+  return html;
+};
+
+const value = computed(() => props.modelValue);
+
+watch(value, (val: string) => {
+  if (!editor.value) return;
+  if (val !== editor.value.getHTML()) {
+    editor.value.commands.setContent(val, false);
+  }
+});
+
+const dialog = inject<Dialog>("dialog");
+const { t } = useI18n({ useScope: "global" });
+
+/**
+ * Show a popup to get the link from the URL
+ */
+const showLinkMenu = (): void => {
+  dialog?.prompt({
+    message: t("Enter the link URL"),
+    inputAttrs: {
+      type: "url",
+    },
+    onConfirm: (prompt: string) => {
+      if (!editor.value) return;
+      editor.value.chain().focus().setLink({ href: prompt }).run();
+    },
+  });
+};
+
+const {
+  mutate: uploadMediaMutation,
+  onDone: uploadMediaDone,
+  onError: uploadMediaError,
+} = useMutation(UPLOAD_MEDIA);
+
+/**
+ * Show a file prompt, upload picture and insert it into editor
+ */
+const showImagePrompt = async (): Promise<void> => {
+  const image = await listenFileUpload();
+  uploadMediaMutation({
+    file: image,
+    name: image.name,
+  });
+};
+
+uploadMediaDone(({ data }) => {
+  if (data.uploadMedia && data.uploadMedia.url && editor.value) {
+    editor.value
+      .chain()
+      .focus()
+      .setImage({
+        src: data.uploadMedia.url,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        "data-media-id": data.uploadMedia.id,
+      })
+      .run();
+  }
+});
+
+const notifier = inject<Notifier>("notifier");
+
+uploadMediaError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
+
+/**
+ * We use this to programatically insert an actor mention when creating a reply to comment
+ */
+const replyToComment = (actor: IActor): void => {
+  if (!editor.value) return;
+  editor.value
+    .chain()
+    .focus()
+    .insertContent({
+      type: "mention",
+      attrs: {
+        id: usernameWithDomain(actor),
+      },
+    })
+    .insertContent(" ")
+    .run();
+};
+
+const focus = (): void => {
+  editor.value?.chain().focus("end");
+};
+
+defineExpose({ replyToComment, focus });
+
+onBeforeUnmount(() => {
+  editor.value?.destroy();
+});
+</script>
+<style lang="scss">
+@use "@/styles/_mixins" as *;
+@import "./Editor/style.scss";
+
+.menubar {
+  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
+
+  &__button {
+    font-weight: bold;
+    display: inline-flex;
+    background: transparent;
+    border: 0;
+    padding: 0.2rem 0.5rem;
+    // @include margin-right(0.2rem);
+    border-radius: 3px;
+    cursor: pointer;
+  }
+}
+
+.editor {
+  position: relative;
+
+  p.is-empty:first-child::before {
+    content: attr(data-empty-text);
+    float: left;
+    color: #aaa;
+    pointer-events: none;
+    height: 0;
+    font-style: italic;
+  }
+
+  .editor__content div.ProseMirror {
+    min-height: 10rem;
+  }
+
+  &.short_mode {
+    div.ProseMirror {
+      min-height: 5rem;
+    }
+  }
+
+  &.comment_mode {
+    div.ProseMirror {
+      min-height: 2rem;
+    }
+  }
+
+  &__content {
+    div.ProseMirror {
+      min-height: 2.5rem;
+      box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
+      background-color: white;
+      border-radius: 4px;
+      color: #363636;
+      border: 1px solid #dbdbdb;
+      padding: 12px 6px;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    h1 {
+      font-size: 2em;
+    }
+
+    h2 {
+      font-size: 1.5em;
+    }
+
+    h3 {
+      font-size: 1.25em;
+    }
+
+    // ul,
+    // ol {
+    //   @include padding-left(1rem);
+    // }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    li > p,
+    li > ol,
+    li > ul {
+      margin: 0;
+    }
+
+    blockquote {
+      // @include padding-left(0.8rem);
+      font-style: italic;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    img {
+      max-width: 100%;
+      border-radius: 3px;
+    }
+  }
+}
+
+.bubble-menu {
+  display: flex;
+  background-color: #0d0d0d;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+
+  button {
+    border: none;
+    background: none;
+    color: #fff;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+    cursor: pointer;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
+
+.suggestion-list {
+  padding: 0.2rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+  &__no-results {
+    padding: 0.2rem 0.5rem;
+  }
+  &__item {
+    border-radius: 5px;
+    padding: 0.2rem 0.5rem;
+    margin-bottom: 0.2rem;
+    cursor: pointer;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    &.is-empty {
+      opacity: 0.5;
+    }
+  }
+
+  .media + .media {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
+.tippy-box[data-theme~="dark"] {
+  padding: 0;
+  font-size: 1rem;
+  text-align: inherit;
+  border-radius: 5px;
+}
+
+.visually-hidden {
+  display: none;
+}
+</style>
diff --git a/js/src/components/Todo/CompactTodo.vue b/js/src/components/Todo/CompactTodo.vue
index 4d745c938..0eccab10f 100644
--- a/js/src/components/Todo/CompactTodo.vue
+++ b/js/src/components/Todo/CompactTodo.vue
@@ -1,18 +1,19 @@
 <template>
   <div class="card" v-if="todo">
     <div class="card-content">
-      <b-checkbox v-model="status" />
+      <o-checkbox v-model="status" />
       <router-link
         :to="{ name: RouteName.TODO, params: { todoId: todo.id } }"
         >{{ todo.title }}</router-link
       >
-      <span class="details has-text-grey">
-        <span v-if="todo.dueDate" class="due_date">
-          <b-icon icon="calendar" />
-          {{ todo.dueDate | formatDateString }}
+      <span class="">
+        <span v-if="todo.dueDate" class="">
+          <o-icon icon="calendar" />
+          {{ formatDateString(todo.dueDate) }}
         </span>
-        <span v-if="todo.assignedTo" class="assigned_to">
-          <b-icon icon="account" />
+        <span v-if="todo.assignedTo" class="">
+          <Account />
+          <o-icon icon="account" />
           {{ `@${todo.assignedTo.preferredUsername}` }}
           <span v-if="todo.assignedTo.domain">{{
             `@${todo.assignedTo.domain}`
@@ -22,52 +23,42 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
+<script lang="ts" setup>
 import { ITodo } from "../../types/todos";
 import RouteName from "../../router/name";
 import { UPDATE_TODO } from "../../graphql/todos";
+import { computed, inject, ref } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import Account from "vue-material-design-icons/Account.vue";
+import { formatDateString } from "@/filters/datetime";
+import { Snackbar } from "@/plugins/snackbar";
 
-@Component
-export default class Todo extends Vue {
-  @Prop({ required: true, type: Object }) todo!: ITodo;
+const props = defineProps<{ todo: ITodo }>();
 
-  RouteName = RouteName;
+const editMode = ref(false);
 
-  editMode = false;
+const status = computed({
+  get() {
+    return props.todo.status;
+  },
+  set(newStatus: boolean) {
+    updateTodo({ status: newStatus, id: props.todo.id });
+  },
+});
 
-  get status(): boolean {
-    return this.todo.status;
-  }
+const { mutate: updateTodo, onDone, onError } = useMutation(UPDATE_TODO);
 
-  set status(status: boolean) {
-    this.updateTodo({ status });
-  }
+onDone(() => {
+  editMode.value = false;
+});
 
-  async updateTodo(params: Record<string, unknown>): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: UPDATE_TODO,
-        variables: {
-          id: this.todo.id,
-          ...params,
-        },
-      });
-      this.editMode = false;
-    } catch (e: any) {
-      Snackbar.open({
-        message: e.message,
-        type: "is-danger",
-        position: "is-bottom",
-      });
-    }
-  }
-}
+const snackbar = inject<Snackbar>("snackbar");
+
+onError((e) => {
+  snackbar?.open({
+    message: e.message,
+    variant: "danger",
+    position: "bottom",
+  });
+});
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-span.details {
-  @include margin-left(1rem);
-}
-</style>
diff --git a/js/src/components/Todo/FullTodo.vue b/js/src/components/Todo/FullTodo.vue
index 7719b3cde..ca8295c76 100644
--- a/js/src/components/Todo/FullTodo.vue
+++ b/js/src/components/Todo/FullTodo.vue
@@ -1,101 +1,99 @@
 <template>
   <div class="card" v-if="todo">
     <div class="card-content">
-      <b-field :label="$t('Status')">
-        <b-checkbox size="is-large" v-model="status" />
-      </b-field>
-      <b-field :label="$t('Title')">
-        <b-input v-model="title" />
-      </b-field>
-      <b-field :label="$t('Assigned to')"> </b-field>
-      <b-field :label="$t('Due on')">
-        <b-datepicker v-model="dueDate" :first-day-of-week="firstDayOfWeek" />
-      </b-field>
+      <o-field :label="$t('Status')">
+        <o-checkbox size="large" v-model="status" />
+      </o-field>
+      <o-field :label="$t('Title')">
+        <o-input v-model="title" />
+      </o-field>
+      <o-field :label="$t('Assigned to')"> </o-field>
+      <o-field :label="$t('Due on')">
+        <o-datepicker v-model="dueDate" :first-day-of-week="firstDayOfWeek" />
+      </o-field>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import debounce from "lodash/debounce";
-import { DebouncedFunc } from "lodash";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { ITodo } from "../../types/todos";
-import RouteName from "../../router/name";
 import { UPDATE_TODO } from "../../graphql/todos";
-import { IPerson } from "../../types/actor";
+import { Snackbar } from "@/plugins/snackbar";
+import { computed, inject, ref } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import { Locale } from "date-fns";
 
-export default class Todo extends Vue {
-  @Prop({ required: true, type: Object }) todo!: ITodo;
+const props = defineProps<{
+  todo: ITodo;
+}>();
 
-  RouteName = RouteName;
+const editMode = ref(false);
 
-  editMode = false;
+const title = computed({
+  get(): string {
+    return props.todo.title;
+  },
+  set(newTitle: string) {
+    debounceUpdateTodo({ id: props.todo.id, title: newTitle });
+  },
+});
 
-  debounceUpdateTodo!: DebouncedFunc<
-    (obj: Record<string, unknown>) => Promise<void>
-  >;
+const status = computed({
+  get(): boolean {
+    return props.todo.status;
+  },
+  set(newStatus: boolean) {
+    debounceUpdateTodo({ id: props.todo.id, status: newStatus });
+  },
+});
 
-  // We put this in data because of issues like
-  // https://github.com/vuejs/vue-class-component/issues/263
-  data(): Record<string, unknown> {
-    return {
-      debounceUpdateTodo: debounce(this.updateTodo, 1000),
-    };
-  }
+// const assignedTo = computed({
+//   get(): IPerson | undefined {
+//     return props.todo.assignedTo;
+//   },
+//   set(person: IPerson | undefined) {
+//     debounceUpdateTodo({
+//       id: props.todo.id,
+//       assignedToId: person ? person.id : null,
+//     });
+//   },
+// });
 
-  get title(): string {
-    return this.todo.title;
-  }
+const dueDate = computed({
+  get(): string | undefined {
+    return props.todo.dueDate;
+  },
 
-  set title(title: string) {
-    this.debounceUpdateTodo({ title });
-  }
+  set(newDueDate: string | undefined) {
+    debounceUpdateTodo({ id: props.todo.id, dueDate: newDueDate });
+  },
+});
 
-  get status(): boolean {
-    return this.todo.status;
-  }
+const snackbar = inject<Snackbar>("snackbar");
 
-  set status(status: boolean) {
-    this.debounceUpdateTodo({ status });
-  }
+const {
+  mutate: updateTodo,
+  onDone: updateTodoDone,
+  onError: updateTodoError,
+} = useMutation(UPDATE_TODO);
 
-  get assignedTo(): IPerson | undefined {
-    return this.todo.assignedTo;
-  }
+updateTodoDone(() => {
+  editMode.value = false;
+});
 
-  set assignedTo(person: IPerson | undefined) {
-    this.debounceUpdateTodo({ assignedToId: person ? person.id : null });
-  }
+updateTodoError((e) => {
+  snackbar?.open({
+    message: e.message,
+    variant: "danger",
+    position: "bottom",
+  });
+});
 
-  get dueDate(): Date | undefined {
-    return this.todo.dueDate;
-  }
+const debounceUpdateTodo = debounce(updateTodo, 1000);
 
-  set dueDate(dueDate: Date | undefined) {
-    this.debounceUpdateTodo({ dueDate });
-  }
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
 
-  async updateTodo(params: Record<string, unknown>): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: UPDATE_TODO,
-        variables: {
-          id: this.todo.id,
-          ...params,
-        },
-      });
-      this.editMode = false;
-    } catch (e: any) {
-      Snackbar.open({
-        message: e.message,
-        type: "is-danger",
-        position: "is-bottom",
-      });
-    }
-  }
-
-  get firstDayOfWeek(): number {
-    return this.$dateFnsLocale?.options?.weekStartsOn || 0;
-  }
-}
+const firstDayOfWeek = computed((): number => {
+  return dateFnsLocale?.options?.weekStartsOn ?? 0;
+});
 </script>
diff --git a/js/src/components/User/AuthProvider.vue b/js/src/components/User/AuthProvider.vue
index f3817ef5e..bd586e315 100644
--- a/js/src/components/User/AuthProvider.vue
+++ b/js/src/components/User/AuthProvider.vue
@@ -1,34 +1,33 @@
 <template>
-  <a
-    class="button is-light"
-    v-if="isProviderSelected && oauthProvider.label === null"
+  <o-button
+    outlined
+    variant="primary"
+    :icon-left="oauthProvider.id"
+    v-if="isProviderSelected && !oauthProvider.label"
     :href="`/auth/${oauthProvider.id}`"
   >
-    <b-icon :icon="oauthProvider.id" />
-    <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
+    <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></o-button
   >
-  <a
-    class="button is-light"
+  <o-button
+    outlined
+    variant="primary"
     :href="`/auth/${oauthProvider.id}`"
     v-else-if="isProviderSelected"
+    icon-left="lock"
   >
-    <b-icon icon="lock" />
     <span>{{ oauthProvider.label }}</span>
-  </a>
+  </o-button>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { IOAuthProvider } from "../../types/config.model";
-import { SELECTED_PROVIDERS } from "../../utils/auth";
+<script lang="ts" setup>
+import { computed } from "vue";
+import { IOAuthProvider } from "@/types/config.model";
+import { SELECTED_PROVIDERS } from "@/utils/auth";
 
-@Component
-export default class AuthProvider extends Vue {
-  @Prop({ required: true, type: Object }) oauthProvider!: IOAuthProvider;
+const props = defineProps<{
+  oauthProvider: IOAuthProvider;
+}>();
 
-  SELECTED_PROVIDERS = SELECTED_PROVIDERS;
-
-  get isProviderSelected(): boolean {
-    return Object.keys(SELECTED_PROVIDERS).includes(this.oauthProvider.id);
-  }
-}
+const isProviderSelected = computed((): boolean => {
+  return Object.keys(SELECTED_PROVIDERS).includes(props.oauthProvider.id);
+});
 </script>
diff --git a/js/src/components/User/AuthProviders.story.vue b/js/src/components/User/AuthProviders.story.vue
new file mode 100644
index 000000000..ee88b54a1
--- /dev/null
+++ b/js/src/components/User/AuthProviders.story.vue
@@ -0,0 +1,13 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <AuthProviders :oauthProviders="providers" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import AuthProviders from "./AuthProviders.vue";
+
+const providers = [{ id: "keycloak", label: "Entreprise" }, { id: "google" }];
+</script>
diff --git a/js/src/components/User/AuthProviders.vue b/js/src/components/User/AuthProviders.vue
index cd04d09d8..2e894205f 100644
--- a/js/src/components/User/AuthProviders.vue
+++ b/js/src/components/User/AuthProviders.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <b>{{ $t("Sign in with") }}</b>
-    <div class="buttons">
+    <b>{{ t("Sign in with") }}</b>
+    <div class="flex gap-1 flex-wrap">
       <auth-provider
         v-for="provider in oauthProviders"
         :oauthProvider="provider"
@@ -10,17 +10,14 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { IOAuthProvider } from "../../types/config.model";
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { IOAuthProvider } from "@/types/config.model";
 import AuthProvider from "./AuthProvider.vue";
 
-@Component({
-  components: {
-    AuthProvider,
-  },
-})
-export default class AuthProviders extends Vue {
-  @Prop({ required: true, type: Array }) oauthProviders!: IOAuthProvider[];
-}
+defineProps<{
+  oauthProviders: IOAuthProvider[];
+}>();
+
+const { t } = useI18n({ useScope: "global" });
 </script>
diff --git a/js/src/components/Utils/EmptyContent.vue b/js/src/components/Utils/EmptyContent.vue
index e1b685fd9..9b937cb63 100644
--- a/js/src/components/Utils/EmptyContent.vue
+++ b/js/src/components/Utils/EmptyContent.vue
@@ -1,45 +1,32 @@
 <template>
   <div
-    class="empty-content"
-    :class="{ inline, 'text-center': center }"
+    class="flex flex-col items-center"
+    :class="{ 'mt-20 mb-10': inline, 'mt-80': !inline, 'text-center': center }"
     role="note"
   >
-    <b-icon :icon="icon" size="is-large" />
-    <h2 class="empty-content__title">
+    <o-icon :icon="icon" customSize="48" />
+    <h2 class="mb-3">
       <!-- @slot Mandatory title -->
       <slot />
     </h2>
-    <p v-show="$slots.desc" :class="descriptionClasses">
+    <p v-show="slots.desc" :class="descriptionClasses">
       <!-- @slot Optional description -->
       <slot name="desc" />
     </p>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { useSlots } from "vue";
 
-@Component
-export default class EmptyContent extends Vue {
-  @Prop({ type: String, required: true }) icon!: string;
-  @Prop({ type: String, required: false, default: "" })
-  descriptionClasses!: string;
-  @Prop({ type: Boolean, required: false, default: false }) inline!: boolean;
-  @Prop({ type: Boolean, required: false, default: false }) center!: boolean;
-}
+withDefaults(
+  defineProps<{
+    icon: string;
+    descriptionClasses?: string;
+    inline?: boolean;
+    center?: boolean;
+  }>(),
+  { descriptionClasses: "", inline: false, center: false }
+);
+
+const slots = useSlots();
 </script>
-
-<style lang="scss">
-.empty-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 20vh;
-  &__title {
-    margin-bottom: 10px;
-  }
-  &.inline {
-    margin-top: 5vh;
-    margin-bottom: 2vh;
-  }
-}
-</style>
diff --git a/js/src/components/Utils/HomepageRedirectComponent.vue b/js/src/components/Utils/HomepageRedirectComponent.vue
index 909b9f6f0..86db7b0ee 100644
--- a/js/src/components/Utils/HomepageRedirectComponent.vue
+++ b/js/src/components/Utils/HomepageRedirectComponent.vue
@@ -2,14 +2,11 @@
   <div>a</div>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import RouteName from "@/router/name";
+import { useRouter } from "vue-router";
 
-@Component
-export default class HomepageRedirectComponent extends Vue {
-  created(): void {
-    this.$router.replace({ name: RouteName.HOME });
-  }
-}
+const router = useRouter();
+
+router.replace({ name: RouteName.HOME });
 </script>
diff --git a/js/src/components/Utils/Breadcrumbs.vue b/js/src/components/Utils/NavBreadcrumbs.vue
similarity index 71%
rename from js/src/components/Utils/Breadcrumbs.vue
rename to js/src/components/Utils/NavBreadcrumbs.vue
index 8122314a3..616edc040 100644
--- a/js/src/components/Utils/Breadcrumbs.vue
+++ b/js/src/components/Utils/NavBreadcrumbs.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="flex mb-3" :aria-label="$t('Breadcrumbs')">
+  <nav class="flex mb-3" :aria-label="t('Breadcrumbs')">
     <ol class="inline-flex items-center space-x-1 md:space-x-3 flex-wrap">
       <li
         class="inline-flex items-center"
@@ -10,13 +10,13 @@
         <router-link
           v-if="index === 0"
           :to="element"
-          class="inline-flex items-center text-gray-800 hover:text-gray-900"
+          class="inline-flex items-center text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
         >
           {{ element.text }}
         </router-link>
         <div class="flex items-center" v-else-if="index === links.length - 1">
           <svg
-            class="w-6 h-6 text-gray-400 rtl:rotate-180"
+            class="w-6 h-6 text-gray-400 dark:text-gray-100 rtl:rotate-180"
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -28,13 +28,13 @@
             ></path>
           </svg>
           <span
-            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 md:ltr:ml-2 md:rtl:mr-2"
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 dark:text-gray-300 md:ltr:ml-2 md:rtl:mr-2"
             >{{ element.text }}</span
           >
         </div>
         <div class="flex items-center" v-else>
           <svg
-            class="w-6 h-6 text-gray-400 rtl:rotate-180"
+            class="w-6 h-6 text-gray-400 dark:text-gray-100 rtl:rotate-180"
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -47,7 +47,7 @@
           </svg>
           <router-link
             :to="element"
-            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 md:ltr:ml-2 md:rtl:mr-2"
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 md:ltr:ml-2 md:rtl:mr-2"
             >{{ element.text }}</router-link
           >
         </div>
@@ -56,14 +56,15 @@
     </ol>
   </nav>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { Location } from "vue-router";
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+import { RouteLocationRaw } from "vue-router";
 
-type LinkElement = Location & { text: string };
+type LinkElement = RouteLocationRaw & { text: string };
 
-@Component
-export default class Breadcrumbs extends Vue {
-  @Prop({ type: Array, required: true }) links!: LinkElement[];
-}
+defineProps<{
+  links: LinkElement[];
+}>();
+
+const { t } = useI18n({ useScope: "global" });
 </script>
diff --git a/js/src/components/Utils/Observer.vue b/js/src/components/Utils/Observer.vue
deleted file mode 100644
index 49f24678d..000000000
--- a/js/src/components/Utils/Observer.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="observer" />
-</template>
-
-<script lang="ts">
-import "intersection-observer";
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class Observer extends Vue {
-  @Prop({ required: false, default: () => ({}) }) options!: Record<string, any>;
-
-  observer!: IntersectionObserver;
-  mounted(): void {
-    this.observer = new IntersectionObserver(([entry]) => {
-      if (entry && entry.isIntersecting) {
-        this.$emit("intersect");
-      }
-    }, this.options);
-
-    this.observer.observe(this.$el);
-  }
-
-  destroyed(): void {
-    this.observer.disconnect();
-  }
-}
-</script>
diff --git a/js/src/components/Utils/ObserverElement.vue b/js/src/components/Utils/ObserverElement.vue
new file mode 100644
index 000000000..7bf41e147
--- /dev/null
+++ b/js/src/components/Utils/ObserverElement.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="observer" ref="observed" />
+</template>
+
+<script lang="ts" setup>
+import "intersection-observer";
+import { onMounted, onUnmounted, ref } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    options?: Record<string, any>;
+  }>(),
+  { options: () => ({}) }
+);
+
+const observer = ref<IntersectionObserver>();
+const observed = ref<HTMLElement>();
+const emit = defineEmits(["intersect"]);
+
+onMounted(() => {
+  observer.value = new IntersectionObserver(([entry]) => {
+    if (entry && entry.isIntersecting) {
+      emit("intersect");
+    }
+  }, props.options);
+
+  if (observed.value) {
+    observer.value.observe(observed.value);
+  }
+});
+
+onUnmounted(() => {
+  observer.value?.disconnect();
+});
+</script>
diff --git a/js/src/components/Utils/RedirectWithAccount.vue b/js/src/components/Utils/RedirectWithAccount.vue
index 4cb6fedca..755744db7 100644
--- a/js/src/components/Utils/RedirectWithAccount.vue
+++ b/js/src/components/Utils/RedirectWithAccount.vue
@@ -1,12 +1,12 @@
 <template>
-  <section class="section container hero is-fullheight">
+  <section class="container mx-auto hero is-fullheight">
     <div class="hero-body">
-      <div class="container">
+      <div class="container mx-auto">
         <div class="columns is-vcentered">
           <div class="column has-text-centered">
-            <b-button
-              type="is-primary"
-              size="is-medium"
+            <o-button
+              variant="primary"
+              size="medium"
               tag="router-link"
               :to="{
                 name: RouteName.LOGIN,
@@ -15,105 +15,95 @@
                   redirect: pathAfterLogin,
                 },
               }"
-              >{{ $t("Login on {instance}", { instance: host }) }}</b-button
+              >{{ $t("Login on {instance}", { instance: host }) }}</o-button
             >
           </div>
           <vertical-divider :content="$t('Or')" />
           <div class="column">
-            <subtitle>{{
-              $t("I have an account on another Mobilizon instance.")
-            }}</subtitle>
+            <h2 class="text-2xl">
+              {{ $t("I have an account on another Mobilizon instance.") }}
+            </h2>
             <p>{{ $t("Other software may also support this.") }}</p>
             <p>{{ sentence }}</p>
             <form @submit.prevent="redirectToInstance">
-              <b-field :label="$t('Your federated identity')">
-                <b-field>
-                  <b-input
+              <o-field :label="$t('Your federated identity')">
+                <o-field>
+                  <o-input
                     expanded
                     autocapitalize="none"
                     autocorrect="off"
                     v-model="remoteActorAddress"
                     :placeholder="$t('profile@instance')"
-                  ></b-input>
+                  ></o-input>
                   <p class="control">
                     <button class="button is-primary" type="submit">
                       {{ $t("Go") }}
                     </button>
                   </p>
-                </b-field>
-              </b-field>
+                </o-field>
+              </o-field>
             </form>
           </div>
         </div>
         <div class="has-text-centered">
-          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
+          <o-button tag="a" variant="text" @click="$router.go(-1)">{{
             $t("Back to previous page")
-          }}</b-button>
+          }}</o-button>
         </div>
       </div>
     </div>
   </section>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
-import Subtitle from "@/components/Utils/Subtitle.vue";
 import { LoginErrorCode } from "@/types/enums";
 import RouteName from "../../router/name";
+import { computed, ref } from "vue";
 
-@Component({
-  components: { Subtitle, VerticalDivider },
-})
-export default class RedirectWithAccount extends Vue {
-  @Prop({ type: String, required: true }) uri!: string;
+defineProps<{
+  uri: string;
+  pathAfterLogin?: string;
+  sentence?: string;
+}>();
 
-  @Prop({ type: String, required: false }) pathAfterLogin!: string;
+const remoteActorAddress = ref("");
 
-  @Prop({ type: String, required: false }) sentence!: string;
+// eslint-disable-next-line class-methods-use-this
+const host = computed((): string => {
+  return window.location.hostname;
+});
 
-  remoteActorAddress = "";
+const redirectToInstance = async (): Promise<void> => {
+  const [, hostname] = remoteActorAddress.value.split("@", 2);
+  const remoteInteractionURI = await webFingerFetch(
+    hostname,
+    remoteActorAddress.value
+  );
+  window.open(remoteInteractionURI);
+};
 
-  RouteName = RouteName;
-
-  LoginErrorCode = LoginErrorCode;
-
-  // eslint-disable-next-line class-methods-use-this
-  get host(): string {
-    return window.location.hostname;
-  }
-
-  async redirectToInstance(): Promise<void> {
-    const [, host] = this.remoteActorAddress.split("@", 2);
-    const remoteInteractionURI = await this.webFingerFetch(
-      host,
-      this.remoteActorAddress
+const webFingerFetch = async (
+  hostname: string,
+  identity: string
+): Promise<string> => {
+  const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
+  const data = await (
+    await fetch(
+      `${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`
+    )
+  ).json();
+  if (data && Array.isArray(data.links)) {
+    const link: { template: string } = data.links.find(
+      (someLink: any) =>
+        someLink &&
+        typeof someLink.template === "string" &&
+        someLink.rel === "http://ostatus.org/schema/1.0/subscribe"
     );
-    window.open(remoteInteractionURI);
-  }
 
-  private async webFingerFetch(
-    hostname: string,
-    identity: string
-  ): Promise<string> {
-    const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
-    const data = await (
-      await fetch(
-        `${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`
-      )
-    ).json();
-    if (data && Array.isArray(data.links)) {
-      const link: { template: string } = data.links.find(
-        (someLink: any) =>
-          someLink &&
-          typeof someLink.template === "string" &&
-          someLink.rel === "http://ostatus.org/schema/1.0/subscribe"
-      );
-
-      if (link && link.template.includes("{uri}")) {
-        return link.template.replace("{uri}", encodeURIComponent(this.uri));
-      }
+    if (link && link.template.includes("{uri}")) {
+      return link.template.replace("{uri}", encodeURIComponent(this.uri));
     }
-    throw new Error("No interaction path found in webfinger data");
   }
-}
+  throw new Error("No interaction path found in webfinger data");
+};
 </script>
diff --git a/js/src/components/Utils/Subtitle.vue b/js/src/components/Utils/Subtitle.vue
deleted file mode 100644
index acf311ad1..000000000
--- a/js/src/components/Utils/Subtitle.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <h2>
-    <span>
-      <slot />
-    </span>
-  </h2>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class Subtitle extends Vue {}
-</script>
-<style lang="scss" scoped>
-h2 {
-  display: block;
-  margin: 15px 0 30px;
-
-  span {
-    background: $secondary;
-    display: inline;
-    padding: 3px 8px;
-    color: #3a384c;
-    font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-      serif;
-    font-weight: 400;
-    font-size: 32px;
-  }
-}
-</style>
diff --git a/js/src/components/Utils/VerticalDivider.vue b/js/src/components/Utils/VerticalDivider.vue
index 5e1dbe2e9..c73b9f729 100644
--- a/js/src/components/Utils/VerticalDivider.vue
+++ b/js/src/components/Utils/VerticalDivider.vue
@@ -1,20 +1,14 @@
 <template>
   <div class="is-divider-vertical" :data-content="dataContent"></div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { computed } from "vue";
 
-@Component
-export default class VerticalDivider extends Vue {
-  @Prop({ default: "Or" }) content!: string;
+const props = withDefaults(defineProps<{ content?: string }>(), {
+  content: "Or",
+});
 
-  get dataContent(): string {
-    return this.content.toLocaleUpperCase();
-  }
-}
+const dataContent = computed((): string => {
+  return props.content.toLocaleUpperCase();
+});
 </script>
-<style lang="scss" scoped>
-.is-divider-vertical[data-content]::after {
-  background-color: $body-background-color;
-}
-</style>
diff --git a/js/src/components/core/CustomDialog.vue b/js/src/components/core/CustomDialog.vue
new file mode 100644
index 000000000..7c5e87e9f
--- /dev/null
+++ b/js/src/components/core/CustomDialog.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="">
+    <header class="" v-if="title">
+      <h2 class="">{{ title }}</h2>
+    </header>
+
+    <section :class="{ 'flex gap-1': hasIcon }">
+      <div class="" v-if="hasIcon && (icon || iconByType)">
+        <o-icon
+          :icon="icon ? icon : iconByType"
+          :variant="variant"
+          :both="!icon"
+          custom-size="48"
+        />
+      </div>
+      <div class="">
+        <p>
+          <template v-if="$slots.default">
+            <slot />
+          </template>
+          <template v-else>
+            <div v-html="message" />
+          </template>
+        </p>
+
+        <o-field v-if="hasInput">
+          <o-input
+            v-model="prompt"
+            expanded
+            class="input"
+            ref="input"
+            v-bind="inputAttrs"
+            @keydown.enter="confirm"
+          />
+        </o-field>
+      </div>
+    </section>
+
+    <footer v-if="canCancel" class="flex gap-2 my-2">
+      <o-button ref="cancelButton" outlined @click="cancel('button')">{{
+        cancelText ?? t("Cancel")
+      }}</o-button>
+      <o-button :variant="variant" ref="confirmButton" @click="confirm">{{
+        confirmText ?? t("Confirm")
+      }}</o-button>
+    </footer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    message: string | string[];
+    icon?: string;
+    hasIcon?: boolean;
+    variant?: string;
+    size?: string;
+    canCancel?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm: (prompt?: string) => any;
+    onCancel?: (source: string) => any;
+    ariaLabel?: string;
+    ariaModal?: boolean;
+    ariaRole?: string;
+    hasInput?: boolean;
+    inputAttrs?: Record<string, any>;
+  }>(),
+  {
+    variant: "primary",
+    canCancel: true,
+    hasInput: false,
+    inputAttrs: () => ({}),
+  }
+);
+
+const emit = defineEmits(["confirm", "cancel", "close"]);
+
+const { t } = useI18n({ useScope: "global" });
+
+// const modalOpened = ref(false);
+
+const prompt = ref<string>(props.hasInput ? props.inputAttrs?.value ?? "" : "");
+const input = ref();
+
+// const dialogClass = computed(() => {
+//   return [props.size];
+// });
+/**
+ * Icon name (MDI) based on the type.
+ */
+const iconByType = computed(() => {
+  switch (props.variant) {
+    case "info":
+      return "information";
+    case "success":
+      return "check-circle";
+    case "warning":
+      return "alert";
+    case "danger":
+      return "alert-circle";
+    default:
+      return null;
+  }
+});
+/**
+ * If it's a prompt Dialog, validate the input.
+ * Call the onConfirm prop (function) and close the Dialog.
+ */
+const confirm = () => {
+  console.log("dialog confirmed", input.value.$el);
+  if (input.value !== undefined) {
+    const inputElement = input.value.$el.querySelector("input");
+    if (!inputElement.checkValidity()) {
+      nextTick(() => inputElement.select());
+      return;
+    }
+  }
+  emit("confirm", prompt.value);
+  props.onConfirm(prompt.value);
+  close();
+};
+
+/**
+ * Close the Dialog.
+ */
+const close = () => {
+  emit("close");
+};
+
+/**
+ * Close the Modal if canCancel and call the onCancel prop (function).
+ */
+const cancel = (source: string) => {
+  emit("cancel", source);
+  props.onCancel?.apply(null, [source]);
+  close();
+};
+</script>
diff --git a/js/src/components/core/CustomSnackbar.vue b/js/src/components/core/CustomSnackbar.vue
new file mode 100644
index 000000000..f0193db25
--- /dev/null
+++ b/js/src/components/core/CustomSnackbar.vue
@@ -0,0 +1,104 @@
+<template>
+  <transition enter-active-class="fadeInUp" leave-active-class="fadeOut">
+    <div
+      v-show="isActive"
+      class="snackbar"
+      :class="[variant, position]"
+      @mouseenter="pause"
+      @mouseleave="removePause"
+      :role="actionTextWithDefault ? 'alertdialog' : 'alert'"
+    >
+      <template v-if="$slots.default">
+        <slot />
+      </template>
+      <template v-else>
+        <div class="text" v-html="message" />
+      </template>
+      <div class="flex gap-2">
+        <div v-if="cancelText" class="action light cancel" @click="close">
+          <o-button>{{ cancelText }}</o-button>
+        </div>
+        <div
+          v-if="actionTextWithDefault"
+          class="action"
+          @click="action"
+          :class="variant"
+        >
+          <o-button>{{ actionTextWithDefault }}</o-button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+type position =
+  | "top-right"
+  | "top"
+  | "top-left"
+  | "bottom-right"
+  | "bottom"
+  | "bottom-left";
+
+const props = withDefaults(
+  defineProps<{
+    message: string;
+    actionText?: string;
+    onAction?: () => any;
+    cancelText?: string | null;
+    variant?: string;
+    position?: position;
+    pauseOnHover?: boolean;
+    indefinite?: boolean;
+  }>(),
+  {
+    onAction: () => {
+      // do nothing
+    },
+    cancelText: null,
+    variant: "dark",
+    position: "bottom-right",
+    pauseOnHover: false,
+    indefinite: false,
+  }
+);
+
+const emit = defineEmits(["close"]);
+
+const { t } = useI18n({ useScope: "global" });
+
+const actionTextWithDefault = computed(() => props.actionText ?? t("OK"));
+
+const isActive = ref(false);
+const isPaused = ref(false);
+const timer = ref(0);
+
+onMounted(() => {
+  isActive.value = true;
+});
+
+const pause = () => {
+  isPaused.value = true;
+};
+
+const removePause = () => {
+  if (props.pauseOnHover && !props.indefinite) {
+    isPaused.value = false;
+    close();
+  }
+};
+
+const action = () => {
+  props.onAction();
+};
+
+const close = () => {
+  if (!isPaused.value) {
+    clearTimeout(timer.value);
+    isActive.value = false;
+    emit("close");
+  }
+};
+</script>
diff --git a/js/src/components/core/LinkOrRouterLink.vue b/js/src/components/core/LinkOrRouterLink.vue
new file mode 100644
index 000000000..b624fa68e
--- /dev/null
+++ b/js/src/components/core/LinkOrRouterLink.vue
@@ -0,0 +1,39 @@
+<template>
+  <a
+    v-if="isInternal"
+    :target="newTab ? '_blank' : undefined"
+    :href="href"
+    rel="noopener noreferrer"
+    v-bind="$attrs"
+  >
+    <slot />
+  </a>
+  <router-link :to="to" v-bind="$attrs" v-else>
+    <slot />
+  </router-link>
+</template>
+<script lang="ts">
+// use normal <script> to declare options
+export default {
+  inheritAttrs: false,
+};
+</script>
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    to: { name: string; params?: any; query?: any } | string;
+    isInternal?: boolean;
+    newTab?: boolean;
+  }>(),
+  { isInternal: true, newTab: true }
+);
+
+const href = computed(() => {
+  if (typeof props.to === "string" || props.to instanceof String) {
+    return props.to as string;
+  }
+  return undefined;
+});
+</script>
diff --git a/js/src/components/core/MaterialIcon.story.vue b/js/src/components/core/MaterialIcon.story.vue
new file mode 100644
index 000000000..1b6a20a58
--- /dev/null
+++ b/js/src/components/core/MaterialIcon.story.vue
@@ -0,0 +1,16 @@
+<template>
+  <Story :layout="{ type: 'grid', width: 60 }">
+    <Variant title="Google">
+      <MaterialIcon :icon="['', 'google']" />
+    </Variant>
+    <Variant title="Calendar">
+      <MaterialIcon :icon="['', 'calendar']" />
+    </Variant>
+    <Variant title="Account Multiple Plus">
+      <MaterialIcon :icon="['', 'account-multiple-plus']" />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import MaterialIcon from "./MaterialIcon.vue";
+</script>
diff --git a/js/src/components/core/MaterialIcon.vue b/js/src/components/core/MaterialIcon.vue
new file mode 100644
index 000000000..491e45fde
--- /dev/null
+++ b/js/src/components/core/MaterialIcon.vue
@@ -0,0 +1,263 @@
+<template>
+  <component :is="componentInstance" :size="realSize" />
+</template>
+<script lang="ts" setup>
+import { computed, defineAsyncComponent } from "vue";
+
+const icons: Record<string, () => Promise<any>> = {
+  FormatBold: () =>
+    import(`../../../node_modules/vue-material-design-icons/FormatBold.vue`),
+  FormatItalic: () =>
+    import(`../../../node_modules/vue-material-design-icons/FormatItalic.vue`),
+  FormatUnderline: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/FormatUnderline.vue`
+    ),
+  FormatHeader1: () =>
+    import(`../../../node_modules/vue-material-design-icons/FormatHeader1.vue`),
+  FormatHeader2: () =>
+    import(`../../../node_modules/vue-material-design-icons/FormatHeader2.vue`),
+  FormatHeader3: () =>
+    import(`../../../node_modules/vue-material-design-icons/FormatHeader3.vue`),
+  Link: () =>
+    import(`../../../node_modules/vue-material-design-icons/Link.vue`),
+  LinkOff: () =>
+    import(`../../../node_modules/vue-material-design-icons/LinkOff.vue`),
+  Image: () =>
+    import(`../../../node_modules/vue-material-design-icons/Image.vue`),
+  FormatListBulleted: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/FormatListBulleted.vue`
+    ),
+  FormatListNumbered: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/FormatListNumbered.vue`
+    ),
+  FormatQuoteClose: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/FormatQuoteClose.vue`
+    ),
+  Undo: () =>
+    import(`../../../node_modules/vue-material-design-icons/Undo.vue`),
+  Redo: () =>
+    import(`../../../node_modules/vue-material-design-icons/Redo.vue`),
+  AccountCircle: () =>
+    import(`../../../node_modules/vue-material-design-icons/AccountCircle.vue`),
+  Upload: () =>
+    import(`../../../node_modules/vue-material-design-icons/Upload.vue`),
+  Chat: () =>
+    import(`../../../node_modules/vue-material-design-icons/Chat.vue`),
+  Calendar: () =>
+    import(`../../../node_modules/vue-material-design-icons/Calendar.vue`),
+  Cog: () => import(`../../../node_modules/vue-material-design-icons/Cog.vue`),
+  AccountMultiplePlus: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/AccountMultiplePlus.vue`
+    ),
+  AccountMultipleMinus: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/AccountMultipleMinus.vue`
+    ),
+  AccountMultiple: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/AccountMultiple.vue`
+    ),
+  Bullhorn: () =>
+    import(`../../../node_modules/vue-material-design-icons/Bullhorn.vue`),
+  Delete: () =>
+    import(`../../../node_modules/vue-material-design-icons/Delete.vue`),
+  Alert: () =>
+    import(`../../../node_modules/vue-material-design-icons/Alert.vue`),
+  ChevronDown: () =>
+    import(`../../../node_modules/vue-material-design-icons/ChevronDown.vue`),
+  ChevronUp: () =>
+    import(`../../../node_modules/vue-material-design-icons/ChevronUp.vue`),
+  ChevronLeft: () =>
+    import(`../../../node_modules/vue-material-design-icons/ChevronLeft.vue`),
+  ChevronRight: () =>
+    import(`../../../node_modules/vue-material-design-icons/ChevronRight.vue`),
+  Reply: () =>
+    import(`../../../node_modules/vue-material-design-icons/Reply.vue`),
+  DotsHorizontal: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/DotsHorizontal.vue`
+    ),
+  Pencil: () =>
+    import(`../../../node_modules/vue-material-design-icons/Pencil.vue`),
+  Flag: () =>
+    import(`../../../node_modules/vue-material-design-icons/Flag.vue`),
+  ContentPaste: () =>
+    import(`../../../node_modules/vue-material-design-icons/ContentPaste.vue`),
+  Lock: () =>
+    import(`../../../node_modules/vue-material-design-icons/Lock.vue`),
+  Google: () =>
+    import(`../../../node_modules/vue-material-design-icons/Google.vue`),
+  MenuDown: () =>
+    import(`../../../node_modules/vue-material-design-icons/MenuDown.vue`),
+  MenuUp: () =>
+    import(`../../../node_modules/vue-material-design-icons/MenuUp.vue`),
+  Check: () =>
+    import(`../../../node_modules/vue-material-design-icons/Check.vue`),
+  TimerSandEmpty: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/TimerSandEmpty.vue`
+    ),
+  Earth: () =>
+    import(`../../../node_modules/vue-material-design-icons/Earth.vue`),
+  Map: () => import(`../../../node_modules/vue-material-design-icons/Map.vue`),
+  MapMarker: () =>
+    import(`../../../node_modules/vue-material-design-icons/MapMarker.vue`),
+  Close: () =>
+    import(`../../../node_modules/vue-material-design-icons/Close.vue`),
+  Magnify: () =>
+    import(`../../../node_modules/vue-material-design-icons/Magnify.vue`),
+  Loading: () =>
+    import(`../../../node_modules/vue-material-design-icons/Loading.vue`),
+  Eye: () => import(`../../../node_modules/vue-material-design-icons/Eye.vue`),
+  AlertCircle: () =>
+    import(`../../../node_modules/vue-material-design-icons/AlertCircle.vue`),
+  Rss: () => import(`../../../node_modules/vue-material-design-icons/Rss.vue`),
+  CalendarSync: () =>
+    import(`../../../node_modules/vue-material-design-icons/CalendarSync.vue`),
+  OpenInNew: () =>
+    import(`../../../node_modules/vue-material-design-icons/OpenInNew.vue`),
+  Home: () =>
+    import(`../../../node_modules/vue-material-design-icons/Home.vue`),
+  Send: () =>
+    import(`../../../node_modules/vue-material-design-icons/Send.vue`),
+  Comment: () =>
+    import(`../../../node_modules/vue-material-design-icons/Comment.vue`),
+  Label: () =>
+    import(`../../../node_modules/vue-material-design-icons/Label.vue`),
+  CalendarToday: () =>
+    import(`../../../node_modules/vue-material-design-icons/CalendarToday.vue`),
+  WheelchairAccessibility: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/WheelchairAccessibility.vue`
+    ),
+  Youtube: () =>
+    import(`../../../node_modules/vue-material-design-icons/Youtube.vue`),
+  Twitch: () =>
+    import(`../../../node_modules/vue-material-design-icons/Twitch.vue`),
+  Twitter: () =>
+    import(`../../../node_modules/vue-material-design-icons/Twitter.vue`),
+  MicrosoftTeams: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/MicrosoftTeams.vue`
+    ),
+  GoogleHangouts: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/GoogleHangouts.vue`
+    ),
+  Webcam: () =>
+    import(`../../../node_modules/vue-material-design-icons/Webcam.vue`),
+  TicketConfirmation: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/TicketConfirmation.vue`
+    ),
+  CalendarCheck: () =>
+    import(`../../../node_modules/vue-material-design-icons/CalendarCheck.vue`),
+  CalendarText: () =>
+    import(`../../../node_modules/vue-material-design-icons/CalendarText.vue`),
+  CalendarQuestion: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/CalendarQuestion.vue`
+    ),
+  CalendarRemove: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/CalendarRemove.vue`
+    ),
+  FileDocumentEdit: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/FileDocumentEdit.vue`
+    ),
+  Subtitles: () =>
+    import(`../../../node_modules/vue-material-design-icons/Subtitles.vue`),
+  HelpCircleOutline: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/HelpCircleOutline.vue`
+    ),
+  Cash: () =>
+    import(`../../../node_modules/vue-material-design-icons/Cash.vue`),
+  ArrowUp: () =>
+    import(`../../../node_modules/vue-material-design-icons/ArrowUp.vue`),
+  Share: () =>
+    import(`../../../node_modules/vue-material-design-icons/Share.vue`),
+  TimelineText: () =>
+    import(`../../../node_modules/vue-material-design-icons/TimelineText.vue`),
+  Account: () =>
+    import(`../../../node_modules/vue-material-design-icons/Account.vue`),
+  City: () =>
+    import(`../../../node_modules/vue-material-design-icons/City.vue`),
+  ChevronDoubleUp: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/ChevronDoubleUp.vue`
+    ),
+  ChevronDoubleDown: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/ChevronDoubleDown.vue`
+    ),
+  GoogleSpreadsheet: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/GoogleSpreadsheet.vue`
+    ),
+  FilePdfBox: () =>
+    import(`../../../node_modules/vue-material-design-icons/FilePdfBox.vue`),
+  FileDelimited: () =>
+    import(`../../../node_modules/vue-material-design-icons/FileDelimited.vue`),
+  FileDocumentOutline: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/FileDocumentOutline.vue`
+    ),
+  Refresh: () =>
+    import(`../../../node_modules/vue-material-design-icons/Refresh.vue`),
+  RoadVariant: () =>
+    import(`../../../node_modules/vue-material-design-icons/RoadVariant.vue`),
+  AccountGroup: () =>
+    import(`../../../node_modules/vue-material-design-icons/AccountGroup.vue`),
+  Web: () => import(`../../../node_modules/vue-material-design-icons/Web.vue`),
+  Email: () =>
+    import(`../../../node_modules/vue-material-design-icons/Email.vue`),
+  ChatAlert: () =>
+    import(`../../../node_modules/vue-material-design-icons/ChatAlert.vue`),
+  InboxArrowDown: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/InboxArrowDown.vue`
+    ),
+  LanDisconnect: () =>
+    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`),
+  CheckCircle: () =>
+    import(`../../../node_modules/vue-material-design-icons/CheckCircle.vue`),
+  ViewList: () =>
+    import(`../../../node_modules/vue-material-design-icons/ViewList.vue`),
+};
+
+const props = withDefaults(
+  defineProps<{
+    icon: string[] | string;
+    size?: string;
+    type?: string;
+  }>(),
+  { size: "18" }
+);
+
+const name = computed(() => toPascalCase(props.icon[1]));
+
+const componentInstance = computed(() =>
+  defineAsyncComponent(icons[name.value])
+);
+
+const realSize = computed(() => Number.parseInt(props.size ?? "18"));
+
+function toPascalCase(text: string) {
+  return text.replace(/(^\w|-\w)/g, clearAndUpper);
+}
+
+function clearAndUpper(text: string) {
+  return text.replace(/-/, "").toUpperCase();
+}
+</script>
diff --git a/js/src/composition/activity.ts b/js/src/composition/activity.ts
new file mode 100644
index 000000000..a52951049
--- /dev/null
+++ b/js/src/composition/activity.ts
@@ -0,0 +1,32 @@
+import { IActivity } from "@/types/activity.model";
+import { IMember } from "@/types/actor/member.model";
+import { useCurrentActorClient } from "./apollo/actor";
+
+export function useIsActivityAuthorCurrentActor() {
+  const { currentActor } = useCurrentActorClient();
+
+  return (activity: IActivity): boolean => {
+    return (
+      activity.author.id === currentActor.value?.id &&
+      currentActor.value?.id !== undefined
+    );
+  };
+}
+
+export function useIsActivityObjectCurrentActor() {
+  const { currentActor } = useCurrentActorClient();
+  return (activity: IActivity): boolean =>
+    (activity?.object as IMember)?.actor?.id === currentActor.value?.id &&
+    currentActor.value?.id !== undefined;
+}
+
+export function useActivitySubjectParams() {
+  return (activity: IActivity) =>
+    activity.subjectParams.reduce(
+      (acc: Record<string, string>, { key, value }) => {
+        acc[key] = value;
+        return acc;
+      },
+      {}
+    );
+}
diff --git a/js/src/composition/apollo/actor.ts b/js/src/composition/apollo/actor.ts
new file mode 100644
index 000000000..ca2463452
--- /dev/null
+++ b/js/src/composition/apollo/actor.ts
@@ -0,0 +1,70 @@
+import {
+  CURRENT_ACTOR_CLIENT,
+  GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
+  IDENTITIES,
+  PERSON_STATUS_GROUP,
+} from "@/graphql/actor";
+import { IPerson } from "@/types/actor";
+import { useQuery } from "@vue/apollo-composable";
+import { computed, Ref, unref } from "vue";
+import { useCurrentUserClient } from "./user";
+
+export function useCurrentActorClient() {
+  const {
+    result: currentActorResult,
+    error,
+    loading,
+  } = useQuery<{ currentActor: IPerson }>(CURRENT_ACTOR_CLIENT);
+  const currentActor = computed<IPerson | undefined>(
+    () => currentActorResult.value?.currentActor
+  );
+  return { currentActor, error, loading };
+}
+
+export function useCurrentUserIdentities() {
+  const { currentUser } = useCurrentUserClient();
+
+  const { result, error, loading } = useQuery<{ identities: IPerson[] }>(
+    IDENTITIES,
+    {},
+    () => ({
+      enabled:
+        currentUser.value?.id !== undefined &&
+        currentUser.value?.id !== null &&
+        currentUser.value?.isLoggedIn === true,
+    })
+  );
+
+  const identities = computed(() => result.value?.identities);
+  return { identities, error, loading };
+}
+
+export function usePersonStatusGroup(
+  groupFederatedUsername: string | undefined | Ref<string | undefined>
+) {
+  const { currentActor } = useCurrentActorClient();
+  const { result, error, loading, subscribeToMore } = useQuery<{
+    person: IPerson;
+  }>(
+    PERSON_STATUS_GROUP,
+    () => ({
+      id: currentActor.value?.id,
+      group: unref(groupFederatedUsername),
+    }),
+    () => ({
+      enabled:
+        currentActor.value?.id !== undefined &&
+        unref(groupFederatedUsername) !== undefined &&
+        unref(groupFederatedUsername) !== "",
+    })
+  );
+  subscribeToMore(() => ({
+    document: GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
+    variables: {
+      actorId: currentActor.value?.id,
+      group: unref(groupFederatedUsername),
+    },
+  }));
+  const person = computed(() => result.value?.person);
+  return { person, error, loading };
+}
diff --git a/js/src/composition/apollo/address.ts b/js/src/composition/apollo/address.ts
new file mode 100644
index 000000000..407031a89
--- /dev/null
+++ b/js/src/composition/apollo/address.ts
@@ -0,0 +1,16 @@
+import { REVERSE_GEOCODE } from "@/graphql/address";
+import { useLazyQuery } from "@vue/apollo-composable";
+import { IAddress } from "@/types/address.model";
+
+type reverseGeoCodeType = {
+  latitude: number;
+  longitude: number;
+  zoom: number;
+  locale: string;
+};
+
+export function useReverseGeocode() {
+  return useLazyQuery<{ reverseGeocode: IAddress[] }, reverseGeoCodeType>(
+    REVERSE_GEOCODE
+  );
+}
diff --git a/js/src/composition/apollo/config.ts b/js/src/composition/apollo/config.ts
new file mode 100644
index 000000000..0f933bd5f
--- /dev/null
+++ b/js/src/composition/apollo/config.ts
@@ -0,0 +1,206 @@
+import {
+  ABOUT,
+  ANALYTICS,
+  ANONYMOUS_ACTOR_ID,
+  ANONYMOUS_PARTICIPATION_CONFIG,
+  ANONYMOUS_REPORTS_CONFIG,
+  DEMO_MODE,
+  EVENT_CATEGORIES,
+  EVENT_PARTICIPANTS,
+  FEATURES,
+  GEOCODING_AUTOCOMPLETE,
+  LOCATION,
+  MAPS_TILES,
+  RESOURCE_PROVIDERS,
+  RESTRICTIONS,
+  ROUTING_TYPE,
+  SEARCH_CONFIG,
+  TIMEZONES,
+  UPLOAD_LIMITS,
+} from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+
+export function useTimezones() {
+  const {
+    result: timezoneResult,
+    error,
+    loading,
+  } = useQuery<{
+    config: Pick<IConfig, "timezones">;
+  }>(TIMEZONES);
+
+  const timezones = computed(() => timezoneResult.value?.config?.timezones);
+  return { timezones, error, loading };
+}
+
+export function useAnonymousParticipationConfig() {
+  const {
+    result: configResult,
+    error,
+    loading,
+  } = useQuery<{
+    config: Pick<IConfig, "anonymous">;
+  }>(ANONYMOUS_PARTICIPATION_CONFIG);
+
+  const anonymousParticipationConfig = computed(
+    () => configResult.value?.config?.anonymous?.participation
+  );
+
+  return { anonymousParticipationConfig, error, loading };
+}
+
+export function useAnonymousReportsConfig() {
+  const {
+    result: configResult,
+    error,
+    loading,
+  } = useQuery<{
+    config: Pick<IConfig, "anonymous">;
+  }>(ANONYMOUS_REPORTS_CONFIG);
+
+  const anonymousReportsConfig = computed(
+    () => configResult.value?.config?.anonymous?.participation
+  );
+  return { anonymousReportsConfig, error, loading };
+}
+
+export function useInstanceName() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "name">;
+  }>(ABOUT);
+
+  const instanceName = computed(() => result.value?.config?.name);
+  return { instanceName, error, loading };
+}
+
+export function useAnonymousActorId() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "anonymous">;
+  }>(ANONYMOUS_ACTOR_ID);
+
+  const anonymousActorId = computed(
+    () => result.value?.config?.anonymous?.actorId
+  );
+  return { anonymousActorId, error, loading };
+}
+
+export function useUploadLimits() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "uploadLimits">;
+  }>(UPLOAD_LIMITS);
+
+  const uploadLimits = computed(() => result.value?.config?.uploadLimits);
+  return { uploadLimits, error, loading };
+}
+
+export function useEventCategories() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "eventCategories">;
+  }>(EVENT_CATEGORIES);
+
+  const eventCategories = computed(() => result.value?.config.eventCategories);
+  return { eventCategories, error, loading };
+}
+
+export function useRestrictions() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "restrictions">;
+  }>(RESTRICTIONS);
+
+  const restrictions = computed(() => result.value?.config.restrictions);
+  return { restrictions, error, loading };
+}
+
+export function useExportFormats() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "exportFormats">;
+  }>(EVENT_PARTICIPANTS);
+  const exportFormats = computed(() => result.value?.config?.exportFormats);
+  return { exportFormats, error, loading };
+}
+
+export function useGeocodingAutocomplete() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "geocoding">;
+  }>(GEOCODING_AUTOCOMPLETE);
+  const geocodingAutocomplete = computed(
+    () => result.value?.config?.geocoding?.autocomplete
+  );
+  return { geocodingAutocomplete, error, loading };
+}
+
+export function useMapTiles() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "maps">;
+  }>(MAPS_TILES);
+
+  const tiles = computed(() => result.value?.config.maps.tiles);
+  return { tiles, error, loading };
+}
+
+export function useRoutingType() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "maps">;
+  }>(ROUTING_TYPE);
+
+  const routingType = computed(() => result.value?.config.maps.routing.type);
+  return { routingType, error, loading };
+}
+
+export function useFeatures() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "features">;
+  }>(FEATURES);
+
+  const features = computed(() => result.value?.config.features);
+  return { features, error, loading };
+}
+
+export function useResourceProviders() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "resourceProviders">;
+  }>(RESOURCE_PROVIDERS);
+
+  const resourceProviders = computed(
+    () => result.value?.config.resourceProviders
+  );
+  return { resourceProviders, error, loading };
+}
+
+export function useServerProvidedLocation() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "location">;
+  }>(LOCATION);
+
+  const location = computed(() => result.value?.config.location);
+  return { location, error, loading };
+}
+
+export function useIsDemoMode() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "demoMode">;
+  }>(DEMO_MODE);
+
+  const isDemoMode = computed(() => result.value?.config.demoMode);
+  return { isDemoMode, error, loading };
+}
+
+export function useAnalytics() {
+  const { result, error, loading } = useQuery<{
+    config: Pick<IConfig, "analytics">;
+  }>(ANALYTICS);
+
+  const analytics = computed(() => result.value?.config.analytics);
+  return { analytics, error, loading };
+}
+
+export function useSearchConfig() {
+  const { result, error, loading, onResult } = useQuery<{
+    config: Pick<IConfig, "search">;
+  }>(SEARCH_CONFIG);
+
+  const searchConfig = computed(() => result.value?.config.search);
+  return { searchConfig, error, loading, onResult };
+}
diff --git a/js/src/composition/apollo/event.ts b/js/src/composition/apollo/event.ts
new file mode 100644
index 000000000..cbd156271
--- /dev/null
+++ b/js/src/composition/apollo/event.ts
@@ -0,0 +1,51 @@
+import { DELETE_EVENT, FETCH_EVENT, FETCH_EVENT_BASIC } from "@/graphql/event";
+import { IEvent } from "@/types/event.model";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+
+export function useFetchEvent(uuid?: string) {
+  const {
+    result: fetchEventResult,
+    loading,
+    error,
+    onError,
+    onResult,
+  } = useQuery<{ event: IEvent }>(
+    FETCH_EVENT,
+    {
+      uuid,
+    },
+    () => ({
+      enabled: uuid !== undefined,
+    })
+  );
+
+  const event = computed(() => fetchEventResult.value?.event);
+
+  return { event, loading, error, onError, onResult };
+}
+
+export function useFetchEventBasic(uuid: string) {
+  const {
+    result: fetchEventResult,
+    loading,
+    error,
+    onResult,
+    onError,
+  } = useQuery<{ event: IEvent }>(FETCH_EVENT_BASIC, {
+    uuid,
+  });
+
+  const event = computed(() => fetchEventResult.value?.event);
+
+  return { event, loading, error, onResult, onError };
+}
+
+export function useDeleteEvent() {
+  return useMutation<{ id: string }, { eventId: string }>(DELETE_EVENT, () => ({
+    update(cache, { data }) {
+      cache.evict({ id: `Event:${data?.id}` });
+      cache.gc();
+    },
+  }));
+}
diff --git a/js/src/composition/apollo/group.ts b/js/src/composition/apollo/group.ts
new file mode 100644
index 000000000..63c238ebe
--- /dev/null
+++ b/js/src/composition/apollo/group.ts
@@ -0,0 +1,123 @@
+import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
+import {
+  CREATE_GROUP,
+  DELETE_GROUP,
+  FETCH_GROUP,
+  LEAVE_GROUP,
+  UPDATE_GROUP,
+} from "@/graphql/group";
+import { IGroup, IPerson } from "@/types/actor";
+import { IAddress } from "@/types/address.model";
+import { GroupVisibility, MemberRole, Openness } from "@/types/enums";
+import { IMediaUploadWrapper } from "@/types/media.model";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, Ref, unref } from "vue";
+import { useCurrentActorClient } from "./actor";
+
+type useGroupOptions = {
+  beforeDateTime?: string | Date;
+  afterDateTime?: string | Date;
+  organisedEventsPage?: number;
+  organisedEventsLimit?: number;
+  postsPage?: number;
+  postsLimit?: number;
+  membersPage?: number;
+  membersLimit?: number;
+  discussionsPage?: number;
+  discussionsLimit?: number;
+};
+
+export function useGroup(
+  name: string | undefined | Ref<string | undefined>,
+  options: useGroupOptions = {}
+) {
+  const { result, error, loading, onResult, onError, refetch } = useQuery<
+    {
+      group: IGroup;
+    },
+    {
+      name: string;
+      beforeDateTime?: string | Date;
+      afterDateTime?: string | Date;
+      organisedEventsPage?: number;
+      organisedEventsLimit?: number;
+      postsPage?: number;
+      postsLimit?: number;
+      membersPage?: number;
+      membersLimit?: number;
+      discussionsPage?: number;
+      discussionsLimit?: number;
+    }
+  >(
+    FETCH_GROUP,
+    () => ({
+      name: unref(name),
+      ...options,
+    }),
+    () => ({ enabled: unref(name) !== undefined && unref(name) !== "" })
+  );
+  const group = computed(() => result.value?.group);
+  return { group, error, loading, onResult, onError, refetch };
+}
+
+export function useCreateGroup() {
+  const { currentActor } = useCurrentActorClient();
+
+  return useMutation<
+    { createGroup: IGroup },
+    {
+      preferredUsername: string;
+      name: string;
+      summary?: string;
+      avatar?: IMediaUploadWrapper;
+      banner?: IMediaUploadWrapper;
+    }
+  >(CREATE_GROUP, () => ({
+    update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+      const query = {
+        query: PERSON_MEMBERSHIPS,
+        variables: {
+          id: currentActor.value?.id,
+        },
+      };
+      const membershipData = store.readQuery<{ person: IPerson }>(query);
+      if (!membershipData) return;
+      if (!currentActor.value) return;
+      const { person } = membershipData;
+      person.memberships?.elements.push({
+        parent: data?.createGroup,
+        role: MemberRole.ADMINISTRATOR,
+        actor: currentActor.value,
+        insertedAt: new Date().toString(),
+        updatedAt: new Date().toString(),
+      });
+      store.writeQuery({ ...query, data: { person } });
+    },
+  }));
+}
+
+export function useUpdateGroup() {
+  return useMutation<
+    { updateGroup: IGroup },
+    {
+      id: string;
+      name?: string;
+      summary?: string;
+      openness?: Openness;
+      visibility?: GroupVisibility;
+      physicalAddress?: IAddress;
+      manuallyApprovesFollowers?: boolean;
+    }
+  >(UPDATE_GROUP);
+}
+
+export function useDeleteGroup(variables: { groupId: string }) {
+  return useMutation<{ deleteGroup: IGroup }>(DELETE_GROUP, () => ({
+    variables,
+  }));
+}
+
+export function useLeaveGroup() {
+  return useMutation<{ leaveGroup: { id: string } }>(LEAVE_GROUP);
+}
diff --git a/js/src/composition/apollo/report.ts b/js/src/composition/apollo/report.ts
new file mode 100644
index 000000000..37ecaece6
--- /dev/null
+++ b/js/src/composition/apollo/report.ts
@@ -0,0 +1,15 @@
+import { CREATE_REPORT } from "@/graphql/report";
+import { useMutation } from "@vue/apollo-composable";
+
+export function useCreateReport() {
+  return useMutation<
+    { createReport: { id: string } },
+    {
+      eventId?: string;
+      reportedId: string;
+      content?: string;
+      commentsIds?: string[];
+      forward?: boolean;
+    }
+  >(CREATE_REPORT);
+}
diff --git a/js/src/composition/apollo/tags.ts b/js/src/composition/apollo/tags.ts
new file mode 100644
index 000000000..252cd1013
--- /dev/null
+++ b/js/src/composition/apollo/tags.ts
@@ -0,0 +1,18 @@
+import { FILTER_TAGS } from "@/graphql/tags";
+import { ITag } from "@/types/tag.model";
+import { apolloClient } from "@/vue-apollo";
+import { provideApolloClient, useQuery } from "@vue/apollo-composable";
+
+export function fetchTags(text: string): Promise<ITag[]> {
+  return new Promise((resolve, reject) => {
+    const { onResult, onError } = provideApolloClient(apolloClient)(() =>
+      useQuery<{ tags: ITag[] }, { filter: string }>(FILTER_TAGS, {
+        filter: text,
+      })
+    );
+
+    onResult(({ data }) => resolve(data.tags));
+
+    onError((error) => reject(error));
+  });
+}
diff --git a/js/src/composition/apollo/user.ts b/js/src/composition/apollo/user.ts
new file mode 100644
index 000000000..daa130a23
--- /dev/null
+++ b/js/src/composition/apollo/user.ts
@@ -0,0 +1,114 @@
+import { IDENTITIES, REGISTER_PERSON } from "@/graphql/actor";
+import {
+  CURRENT_USER_CLIENT,
+  LOGGED_USER,
+  SET_USER_SETTINGS,
+  UPDATE_USER_LOCALE,
+  USER_SETTINGS,
+} from "@/graphql/user";
+import { IPerson } from "@/types/actor";
+import { ICurrentUser, IUser } from "@/types/current-user.model";
+import { ActorType } from "@/types/enums";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+
+export function useCurrentUserClient() {
+  const {
+    result: currentUserResult,
+    error,
+    loading,
+  } = useQuery<{
+    currentUser: ICurrentUser;
+  }>(CURRENT_USER_CLIENT);
+
+  const currentUser = computed(() => currentUserResult.value?.currentUser);
+  return { currentUser, error, loading };
+}
+
+export function useLoggedUser() {
+  const { currentUser } = useCurrentUserClient();
+
+  const { result, error, onError } = useQuery<{ loggedUser: IUser }>(
+    LOGGED_USER,
+    {},
+    () => ({ enabled: currentUser.value?.id != null })
+  );
+
+  const loggedUser = computed(() => result.value?.loggedUser);
+  return { loggedUser, error, onError };
+}
+
+export function useUserSettings() {
+  const {
+    result: userSettingsResult,
+    error,
+    loading,
+  } = useQuery<{ loggedUser: IUser }>(USER_SETTINGS);
+
+  const loggedUser = computed(() => userSettingsResult.value?.loggedUser);
+  return { loggedUser, error, loading };
+}
+
+export async function doUpdateSetting(
+  variables: Record<string, unknown>
+): Promise<void> {
+  useMutation<{ setUserSettings: string }>(SET_USER_SETTINGS, () => ({
+    variables,
+  }));
+}
+
+export async function updateLocale(locale: string) {
+  useMutation<{ id: string; locale: string }>(UPDATE_USER_LOCALE, () => ({
+    variables: {
+      locale,
+    },
+  }));
+}
+
+export function registerAccount(
+  variables: {
+    preferredUsername: string;
+    name: string;
+    summary: string;
+    email: string;
+  },
+  userAlreadyActivated: boolean
+) {
+  return useMutation<
+    { registerPerson: IPerson },
+    {
+      preferredUsername: string;
+      name: string;
+      summary: string;
+      email: string;
+    }
+  >(REGISTER_PERSON, () => ({
+    variables,
+    update: (
+      store: ApolloCache<{ registerPerson: IPerson }>,
+      { data: localData }: FetchResult
+    ) => {
+      if (userAlreadyActivated) {
+        const identitiesData = store.readQuery<{ identities: IPerson[] }>({
+          query: IDENTITIES,
+        });
+
+        if (identitiesData && localData) {
+          const newPersonData = {
+            ...localData.registerPerson,
+            type: ActorType.PERSON,
+          };
+
+          store.writeQuery({
+            query: IDENTITIES,
+            data: {
+              ...identitiesData,
+              identities: [...identitiesData.identities, newPersonData],
+            },
+          });
+        }
+      }
+    },
+  }));
+}
diff --git a/js/src/composition/config.ts b/js/src/composition/config.ts
new file mode 100644
index 000000000..2c5899a18
--- /dev/null
+++ b/js/src/composition/config.ts
@@ -0,0 +1,22 @@
+import { useExportFormats, useUploadLimits } from "./apollo/config";
+
+export const useHost = (): string => {
+  return window.location.hostname;
+};
+
+export const useAvatarMaxSize = (): number | undefined => {
+  const { uploadLimits } = useUploadLimits();
+
+  return uploadLimits.value?.avatar;
+};
+
+export const useBannerMaxSize = (): number | undefined => {
+  const { uploadLimits } = useUploadLimits();
+
+  return uploadLimits.value?.banner;
+};
+
+export const useParticipantsExportFormats = () => {
+  const { exportFormats } = useExportFormats();
+  return exportFormats.value?.eventParticipants;
+};
diff --git a/js/src/composition/group.ts b/js/src/composition/group.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/js/src/filters/datetime.ts b/js/src/filters/datetime.ts
index bdc14e7d3..c58799b69 100644
--- a/js/src/filters/datetime.ts
+++ b/js/src/filters/datetime.ts
@@ -1,4 +1,3 @@
-import { DateTimeFormatOptions } from "vue-i18n";
 import { i18n } from "../utils/i18n";
 
 function parseDateTime(value: string): Date {
@@ -14,7 +13,7 @@ function formatDateString(value: string): string {
   });
 }
 
-function formatTimeString(value: string, timeZone: string): string {
+function formatTimeString(value: string, timeZone?: string): string {
   return parseDateTime(value).toLocaleTimeString(locale(), {
     hour: "numeric",
     minute: "numeric",
@@ -24,7 +23,7 @@ function formatTimeString(value: string, timeZone: string): string {
 
 // TODO: These can be removed in favor of dateStyle/timeStyle when those two have sufficient support
 // https://caniuse.com/mdn-javascript_builtins_intl_datetimeformat_datetimeformat_datestyle
-const LONG_DATE_FORMAT_OPTIONS: DateTimeFormatOptions = {
+const LONG_DATE_FORMAT_OPTIONS: any = {
   weekday: undefined,
   year: "numeric",
   month: "long",
@@ -33,13 +32,13 @@ const LONG_DATE_FORMAT_OPTIONS: DateTimeFormatOptions = {
   minute: undefined,
 };
 
-const LONG_TIME_FORMAT_OPTIONS: DateTimeFormatOptions = {
+const LONG_TIME_FORMAT_OPTIONS: any = {
   weekday: "long",
   hour: "numeric",
   minute: "numeric",
 };
 
-const SHORT_DATE_FORMAT_OPTIONS: DateTimeFormatOptions = {
+const SHORT_DATE_FORMAT_OPTIONS: any = {
   weekday: undefined,
   year: "numeric",
   month: "short",
@@ -48,7 +47,7 @@ const SHORT_DATE_FORMAT_OPTIONS: DateTimeFormatOptions = {
   minute: undefined,
 };
 
-const SHORT_TIME_FORMAT_OPTIONS: DateTimeFormatOptions = {
+const SHORT_TIME_FORMAT_OPTIONS: any = {
   weekday: "short",
   hour: "numeric",
   minute: "numeric",
@@ -75,6 +74,6 @@ function formatDateTimeString(
   return format.format(parseDateTime(value));
 }
 
-const locale = () => i18n.locale.replace("_", "-");
+const locale = () => i18n.global.locale.replace("_", "-");
 
 export { formatDateString, formatTimeString, formatDateTimeString };
diff --git a/js/src/graphql/actor.ts b/js/src/graphql/actor.ts
index 89850cd31..de899ef21 100644
--- a/js/src/graphql/actor.ts
+++ b/js/src/graphql/actor.ts
@@ -125,6 +125,15 @@ export const PERSON_FRAGMENT = gql`
   }
 `;
 
+export const PERSON_FRAGMENT_FEED_TOKENS = gql`
+  fragment PersonFeedTokensFragment on Person {
+    id
+    feedTokens {
+      token
+    }
+  }
+`;
+
 export const LIST_PROFILES = gql`
   query ListProfiles(
     $preferredUsername: String
@@ -177,10 +186,10 @@ export const CURRENT_ACTOR_CLIENT = gql`
 
 export const UPDATE_CURRENT_ACTOR_CLIENT = gql`
   mutation UpdateCurrentActor(
-    $id: String!
+    $id: String
     $avatar: String
-    $preferredUsername: String!
-    $name: String!
+    $preferredUsername: String
+    $name: String
   ) {
     updateCurrentActor(
       id: $id
@@ -342,7 +351,7 @@ export const PERSON_STATUS_GROUP = gql`
 `;
 
 export const PERSON_GROUP_MEMBERSHIPS = gql`
-  query PersonGroupMemberships($id: ID!, $groupId: ID!) {
+  query PersonGroupMemberships($id: ID!, $groupId: ID) {
     person(id: $id) {
       id
       memberships(groupId: $groupId) {
diff --git a/js/src/graphql/address.ts b/js/src/graphql/address.ts
index 163621e1d..7b301afdb 100644
--- a/js/src/graphql/address.ts
+++ b/js/src/graphql/address.ts
@@ -14,11 +14,26 @@ export const ADDRESS_FRAGMENT = gql`
     url
     originId
     timezone
+    pictureInfo {
+      url
+      author {
+        name
+        url
+      }
+      source {
+        name
+        url
+      }
+    }
   }
 `;
 
 export const ADDRESS = gql`
-  query ($query: String!, $locale: String, $type: AddressSearchType) {
+  query SearchAddress(
+    $query: String!
+    $locale: String
+    $type: AddressSearchType
+  ) {
     searchAddress(query: $query, locale: $locale, type: $type) {
       ...AdressFragment
     }
@@ -27,7 +42,12 @@ export const ADDRESS = gql`
 `;
 
 export const REVERSE_GEOCODE = gql`
-  query ($latitude: Float!, $longitude: Float!, $zoom: Int, $locale: String) {
+  query ReverseGeocode(
+    $latitude: Float!
+    $longitude: Float!
+    $zoom: Int
+    $locale: String
+  ) {
     reverseGeocode(
       latitude: $latitude
       longitude: $longitude
diff --git a/js/src/graphql/config.ts b/js/src/graphql/config.ts
index 490346061..c2dcd10cf 100644
--- a/js/src/graphql/config.ts
+++ b/js/src/graphql/config.ts
@@ -6,6 +6,7 @@ export const CONFIG = gql`
       name
       description
       slogan
+      version
       registrationsOpen
       registrationsAllowlist
       demoMode
@@ -104,6 +105,12 @@ export const CONFIG = gql`
           type
         }
       }
+      search {
+        global {
+          isEnabled
+          isDefault
+        }
+      }
     }
   }
 `;
@@ -155,6 +162,7 @@ export const ABOUT = gql`
       name
       description
       longDescription
+      slogan
       contact
       languages
       registrationsOpen
@@ -230,3 +238,209 @@ export const EVENT_PARTICIPANTS = gql`
     }
   }
 `;
+
+export const ANONYMOUS_PARTICIPATION_CONFIG = gql`
+  query AnonymousParticipationConfig {
+    config {
+      anonymous {
+        participation {
+          allowed
+          validation {
+            email {
+              enabled
+              confirmationRequired
+            }
+            captcha {
+              enabled
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const ANONYMOUS_REPORTS_CONFIG = gql`
+  query AnonymousParticipationConfig {
+    config {
+      anonymous {
+        reports {
+          allowed
+        }
+      }
+    }
+  }
+`;
+
+export const INSTANCE_NAME = gql`
+  query InstanceName {
+    config {
+      name
+    }
+  }
+`;
+
+export const ANONYMOUS_ACTOR_ID = gql`
+  query AnonymousActorId {
+    config {
+      anonymous {
+        actorId
+      }
+    }
+  }
+`;
+
+export const UPLOAD_LIMITS = gql`
+  query UploadLimits {
+    config {
+      uploadLimits {
+        default
+        avatar
+        banner
+      }
+    }
+  }
+`;
+
+export const EVENT_CATEGORIES = gql`
+  query EventCategories {
+    config {
+      eventCategories {
+        id
+        label
+      }
+    }
+  }
+`;
+
+export const RESTRICTIONS = gql`
+  query OnlyGroupsCanCreateEvents {
+    config {
+      restrictions {
+        onlyGroupsCanCreateEvents
+        onlyAdminCanCreateGroups
+      }
+    }
+  }
+`;
+
+export const GEOCODING_AUTOCOMPLETE = gql`
+  query GeoCodingAutocomplete {
+    config {
+      geocoding {
+        autocomplete
+      }
+    }
+  }
+`;
+
+export const MAPS_TILES = gql`
+  query MapsTiles {
+    config {
+      maps {
+        tiles {
+          endpoint
+          attribution
+        }
+      }
+    }
+  }
+`;
+
+export const ROUTING_TYPE = gql`
+  query RoutingType {
+    config {
+      maps {
+        routing {
+          type
+        }
+      }
+    }
+  }
+`;
+
+export const FEATURES = gql`
+  query Features {
+    config {
+      features {
+        groups
+        eventCreation
+      }
+    }
+  }
+`;
+
+export const RESOURCE_PROVIDERS = gql`
+  query ResourceProviders {
+    config {
+      resourceProviders {
+        type
+        endpoint
+        software
+      }
+    }
+  }
+`;
+
+export const LOGIN_CONFIG = gql`
+  query LoginConfig {
+    config {
+      auth {
+        oauthProviders {
+          id
+          label
+        }
+      }
+      registrationsOpen
+    }
+  }
+`;
+
+export const LOCATION = gql`
+  query Location {
+    config {
+      location {
+        latitude
+        longitude
+        # accuracyRadius
+      }
+    }
+  }
+`;
+
+export const DEMO_MODE = gql`
+  query DemoMode {
+    config {
+      demoMode
+    }
+  }
+`;
+
+export const ANALYTICS = gql`
+  query Analytics {
+    config {
+      analytics {
+        id
+        enabled
+        configuration {
+          key
+          value
+          type
+        }
+      }
+    }
+  }
+`;
+
+export const SEARCH_CONFIG = gql`
+  query SearchConfig {
+    config {
+      search {
+        global {
+          isEnabled
+          isDefault
+        }
+      }
+    }
+  }
+`;
diff --git a/js/src/graphql/event.ts b/js/src/graphql/event.ts
index 605d9ddc3..6cffea1f3 100644
--- a/js/src/graphql/event.ts
+++ b/js/src/graphql/event.ts
@@ -116,7 +116,7 @@ export const FETCH_EVENT = gql`
 `;
 
 export const FETCH_EVENT_BASIC = gql`
-  query ($uuid: UUID!) {
+  query FetchEventBasic($uuid: UUID!) {
     event(uuid: $uuid) {
       id
       uuid
diff --git a/js/src/graphql/feed_tokens.ts b/js/src/graphql/feed_tokens.ts
index 706dd7f09..d284ecc1f 100644
--- a/js/src/graphql/feed_tokens.ts
+++ b/js/src/graphql/feed_tokens.ts
@@ -15,7 +15,7 @@ export const CREATE_FEED_TOKEN_ACTOR = gql`
 `;
 
 export const CREATE_FEED_TOKEN = gql`
-  mutation {
+  mutation CreateFeedToken {
     createFeedToken {
       token
       actor {
@@ -29,7 +29,7 @@ export const CREATE_FEED_TOKEN = gql`
 `;
 
 export const DELETE_FEED_TOKEN = gql`
-  mutation deleteFeedToken($token: String!) {
+  mutation DeleteFeedToken($token: String!) {
     deleteFeedToken(token: $token) {
       actor {
         id
diff --git a/js/src/graphql/followers.ts b/js/src/graphql/followers.ts
index c72f67e06..565fc3806 100644
--- a/js/src/graphql/followers.ts
+++ b/js/src/graphql/followers.ts
@@ -36,6 +36,10 @@ export const UPDATE_FOLLOWER = gql`
     updateFollower(id: $id, approved: $approved) {
       id
       approved
+      actor {
+        id
+        preferredUsername
+      }
     }
   }
 `;
diff --git a/js/src/graphql/location.ts b/js/src/graphql/location.ts
new file mode 100644
index 000000000..13106de4c
--- /dev/null
+++ b/js/src/graphql/location.ts
@@ -0,0 +1,34 @@
+import gql from "graphql-tag";
+
+export const CURRENT_USER_LOCATION_CLIENT = gql`
+  query currentUserLocation {
+    currentUserLocation @client {
+      lat
+      lon
+      accuracy
+      isIPLocation
+      name
+      picture
+    }
+  }
+`;
+
+export const UPDATE_CURRENT_USER_LOCATION_CLIENT = gql`
+  mutation UpdateCurrentUserLocation(
+    $lat: Float
+    $lon: Float
+    $accuracy: Int
+    $isIPLocation: Boolean
+    $name: String
+    $picture: pictureInfoElement
+  ) {
+    updateCurrentUserLocation(
+      lat: $lat
+      lon: $lon
+      accuracy: $accuracy
+      isIPLocation: $isIPLocation
+      name: $name
+      picture: $picture
+    ) @client
+  }
+`;
diff --git a/js/src/graphql/report.ts b/js/src/graphql/report.ts
index d25436182..acf0c5de1 100644
--- a/js/src/graphql/report.ts
+++ b/js/src/graphql/report.ts
@@ -49,10 +49,17 @@ const REPORT_FRAGMENT = gql`
       uuid
       title
       description
+      beginsOn
       picture {
         id
         url
       }
+      organizerActor {
+        ...ActorFragment
+      }
+      attributedTo {
+        ...ActorFragment
+      }
     }
     comments {
       id
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index 22e2d9a33..29a61271b 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -4,8 +4,134 @@ import { ADDRESS_FRAGMENT } from "./address";
 import { EVENT_OPTIONS_FRAGMENT } from "./event_options";
 import { TAG_FRAGMENT } from "./tags";
 
+export const GROUP_RESULT_FRAGMENT = gql`
+  fragment GroupResultFragment on GroupSearchResult {
+    id
+    avatar {
+      id
+      url
+    }
+    type
+    preferredUsername
+    name
+    domain
+    summary
+    url
+  }
+`;
+
 export const SEARCH_EVENTS_AND_GROUPS = gql`
   query SearchEventsAndGroups(
+    $location: String
+    $radius: Float
+    $tags: String
+    $term: String
+    $type: EventType
+    $categoryOneOf: [String]
+    $statusOneOf: [EventStatus]
+    $languageOneOf: [String]
+    $searchTarget: SearchTarget
+    $beginsOn: DateTime
+    $endsOn: DateTime
+    $bbox: String
+    $zoom: Int
+    $eventPage: Int
+    $groupPage: Int
+    $limit: Int
+  ) {
+    searchEvents(
+      location: $location
+      radius: $radius
+      tags: $tags
+      term: $term
+      type: $type
+      categoryOneOf: $categoryOneOf
+      statusOneOf: $statusOneOf
+      languageOneOf: $languageOneOf
+      searchTarget: $searchTarget
+      beginsOn: $beginsOn
+      endsOn: $endsOn
+      bbox: $bbox
+      zoom: $zoom
+      page: $eventPage
+      limit: $limit
+    ) {
+      total
+      elements {
+        id
+        title
+        uuid
+        beginsOn
+        picture {
+          id
+          url
+        }
+        url
+        status
+        tags {
+          ...TagFragment
+        }
+        physicalAddress {
+          ...AdressFragment
+        }
+        organizerActor {
+          ...ActorFragment
+        }
+        attributedTo {
+          ...ActorFragment
+        }
+        options {
+          isOnline
+        }
+        __typename
+      }
+    }
+    searchGroups(
+      term: $term
+      location: $location
+      radius: $radius
+      languageOneOf: $languageOneOf
+      searchTarget: $searchTarget
+      bbox: $bbox
+      zoom: $zoom
+      page: $groupPage
+      limit: $limit
+    ) {
+      total
+      elements {
+        __typename
+        id
+        avatar {
+          id
+          url
+        }
+        type
+        preferredUsername
+        name
+        domain
+        summary
+        url
+        ...GroupResultFragment
+        banner {
+          id
+          url
+        }
+        followersCount
+        membersCount
+        physicalAddress {
+          ...AdressFragment
+        }
+      }
+    }
+  }
+  ${TAG_FRAGMENT}
+  ${ADDRESS_FRAGMENT}
+  ${GROUP_RESULT_FRAGMENT}
+  ${ACTOR_FRAGMENT}
+`;
+
+export const SEARCH_EVENTS = gql`
+  query SearchEvents(
     $location: String
     $radius: Float
     $tags: String
@@ -15,7 +141,6 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
     $beginsOn: DateTime
     $endsOn: DateTime
     $eventPage: Int
-    $groupPage: Int
     $limit: Int
   ) {
     searchEvents(
@@ -59,6 +184,21 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
         __typename
       }
     }
+  }
+  ${EVENT_OPTIONS_FRAGMENT}
+  ${TAG_FRAGMENT}
+  ${ADDRESS_FRAGMENT}
+  ${ACTOR_FRAGMENT}
+`;
+
+export const SEARCH_GROUPS = gql`
+  query SearchGroups(
+    $location: String
+    $radius: Float
+    $term: String
+    $groupPage: Int
+    $limit: Int
+  ) {
     searchGroups(
       term: $term
       location: $location
@@ -73,20 +213,14 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
           id
           url
         }
-        members(roles: "member,moderator,administrator,creator") {
-          total
-        }
-        followers(approved: true) {
-          total
-        }
+        membersCount
+        followersCount
         physicalAddress {
           ...AdressFragment
         }
       }
     }
   }
-  ${EVENT_OPTIONS_FRAGMENT}
-  ${TAG_FRAGMENT}
   ${ADDRESS_FRAGMENT}
   ${ACTOR_FRAGMENT}
 `;
diff --git a/js/src/graphql/statistics.ts b/js/src/graphql/statistics.ts
index e229eafce..feda64c38 100644
--- a/js/src/graphql/statistics.ts
+++ b/js/src/graphql/statistics.ts
@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
 export const STATISTICS = gql`
-  query {
+  query Statistics {
     statistics {
       numberOfUsers
       numberOfEvents
@@ -15,3 +15,12 @@ export const STATISTICS = gql`
     }
   }
 `;
+
+export const CATEGORY_STATISTICS = gql`
+  query CategoryStatistics {
+    categoryStatistics {
+      key
+      number
+    }
+  }
+`;
diff --git a/js/src/graphql/tags.ts b/js/src/graphql/tags.ts
index eadd78ab8..ff84a0a78 100644
--- a/js/src/graphql/tags.ts
+++ b/js/src/graphql/tags.ts
@@ -21,7 +21,7 @@ export const TAGS = gql`
 `;
 
 export const FILTER_TAGS = gql`
-  query FilterTags($filter: String) {
+  query FilterTags($filter: String!) {
     tags(filter: $filter) {
       ...TagFragment
     }
diff --git a/js/src/graphql/user.ts b/js/src/graphql/user.ts
index 6c9c1bb9b..7c3aefd7a 100644
--- a/js/src/graphql/user.ts
+++ b/js/src/graphql/user.ts
@@ -94,10 +94,10 @@ export const CURRENT_USER_CLIENT = gql`
 
 export const UPDATE_CURRENT_USER_CLIENT = gql`
   mutation UpdateCurrentUser(
-    $id: String!
-    $email: String!
-    $isLoggedIn: Boolean!
-    $role: UserRole!
+    $id: String
+    $email: String
+    $isLoggedIn: Boolean
+    $role: UserRole
   ) {
     updateCurrentUser(
       id: $id
@@ -184,6 +184,12 @@ export const USER_NOTIFICATIONS = gql`
       settings {
         ...UserSettingFragment
       }
+      feedTokens {
+        token
+        actor {
+          id
+        }
+      }
       activitySettings {
         key
         method
@@ -194,6 +200,15 @@ export const USER_NOTIFICATIONS = gql`
   ${USER_SETTINGS_FRAGMENT}
 `;
 
+export const USER_FRAGMENT_FEED_TOKENS = gql`
+  fragment UserFeedTokensFragment on User {
+    id
+    feedTokens {
+      token
+    }
+  }
+`;
+
 export const UPDATE_ACTIVITY_SETTING = gql`
   mutation UpdateActivitySetting(
     $key: String!
diff --git a/js/src/histoire.setup.ts b/js/src/histoire.setup.ts
new file mode 100644
index 000000000..b9757b419
--- /dev/null
+++ b/js/src/histoire.setup.ts
@@ -0,0 +1,17 @@
+import { defineSetupVue3 } from "@histoire/plugin-vue";
+import { orugaConfig } from "./oruga-config";
+import { i18n } from "./utils/i18n";
+import Oruga from "@oruga-ui/oruga-next";
+import "@oruga-ui/oruga-next/dist/oruga-full-vars.css";
+import "./assets/tailwind.css";
+import "./assets/oruga-tailwindcss.css";
+import locale from "date-fns/locale/en-US";
+import MaterialIcon from "./components/core/MaterialIcon.vue";
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+  // Vue plugin
+  app.use(i18n);
+  app.use(Oruga, orugaConfig);
+  app.component("material-icon", MaterialIcon);
+  app.provide("dateFnsLocale", locale);
+});
diff --git a/js/src/i18n/ar.json b/js/src/i18n/ar.json
index 0abe22d32..8f6921325 100644
--- a/js/src/i18n/ar.json
+++ b/js/src/i18n/ar.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/be.json b/js/src/i18n/be.json
index 9a3b13bfe..85b360c9c 100644
--- a/js/src/i18n/be.json
+++ b/js/src/i18n/be.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/bn.json b/js/src/i18n/bn.json
index 18e8a1f05..a5e325574 100644
--- a/js/src/i18n/bn.json
+++ b/js/src/i18n/bn.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/ca.json b/js/src/i18n/ca.json
index d59273ebf..35b8c5b49 100644
--- a/js/src/i18n/ca.json
+++ b/js/src/i18n/ca.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Comença una discussió",
   "<b>{contact}</b> will be displayed as contact.": "Es mostrarà <b>{contact}</b> com a contacte.|Es mostraran <b>{contact}</b> com a contactes.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "S'ha acceptat la soŀlicitud de seguiment de @{username}",
   "@{username}'s follow request was rejected": "S'ha rebutjat la soŀlicitud de seguir-te de @{username}",
diff --git a/js/src/i18n/cs.json b/js/src/i18n/cs.json
index 8d43a6a53..431719b8b 100644
--- a/js/src/i18n/cs.json
+++ b/js/src/i18n/cs.json
@@ -10,7 +10,7 @@
   "0 Bytes": "0 bajtů",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> bude zobrazen jako kontakt.|<b>{contact}</b> bude zobrazen jako kontakty.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Žádost o sledování uživatele @{username} byla přijata",
   "@{username}'s follow request was rejected": "Žádost o sledování uživatele @{username} byla zamítnuta",
@@ -1246,7 +1246,7 @@
   "instance rules": "pravidla instance",
   "mobilizon-instance.tld": "mobilizon-instance.tld",
   "more than 1360 contributors": "více než 1360 přispěvatelů",
-  "new@email.com": "new@email.com",
+  "new{'@'}email.com": "new{'@'}email.com",
   "profile@instance": "profile@instance",
   "report #{report_number}": "hlášení #{report_number}",
   "return to the event's page": "návrat na stránku události",
diff --git a/js/src/i18n/cy.json b/js/src/i18n/cy.json
index a55304c58..a1cc30bff 100644
--- a/js/src/i18n/cy.json
+++ b/js/src/i18n/cy.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/de.json b/js/src/i18n/de.json
index 787c9b5af..7f95e3369 100644
--- a/js/src/i18n/de.json
+++ b/js/src/i18n/de.json
@@ -10,7 +10,7 @@
   "0 Bytes": "0 Bytes",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> wird als Kontakt angezeigt.|<b>{contact}</b> werden als Kontakte angezeigt.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Die Folgeanfrage von @{username} wurde angenommen",
   "@{username}'s follow request was rejected": "@{username}'s Folgeanfrage wurde zurückgewiesen",
@@ -1246,7 +1246,7 @@
   "instance rules": "Instanz-Regeln",
   "mobilizon-instance.tld": "mobilizon-instance.tld",
   "more than 1360 contributors": "mehr als 1360 Spender:innen",
-  "new@email.com": "new@email.com",
+  "new{'@'}email.com": "new{'@'}email.com",
   "profile@instance": "profil@instanz",
   "report #{report_number}": "Meldung #{report_number}",
   "return to the event's page": "zurück zur Seite der Veranstaltung",
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 4a0150659..3df97a0cb 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -312,7 +312,7 @@
   "Terms": "Terms",
   "The account's email address was changed. Check your emails to verify it.": "The account's email address was changed. Check your emails to verify it.",
   "The actual number of participants may differ, as this event is hosted on another instance.": "The actual number of participants may differ, as this event is hosted on another instance.",
-  "The content came from another server. Transfer an anonymous copy of the report?": "The content came from another server. Transfer an anonymous copy of the report ?",
+  "The content came from another server. Transfer an anonymous copy of the report?": "The content came from another server. Transfer an anonymous copy of the report?",
   "The draft event has been updated": "The draft event has been updated",
   "The event has been created as a draft": "The event has been created as a draft",
   "The event has been published": "The event has been published",
@@ -352,7 +352,7 @@
   "Use my location": "Use my location",
   "Username": "Username",
   "Users": "Users",
-  "View a reply": "|View one reply|View {totalReplies} replies",
+  "View a reply": "View no replies|View one reply|View {totalReplies} replies",
   "View event page": "View event page",
   "View everything": "View everything",
   "View page on {hostname} (in a new window)": "View page on {hostname} (in a new window)",
@@ -843,7 +843,7 @@
   "Last published events": "Last published events",
   "Events nearby": "Events nearby",
   "Within {number} kilometers of {place}": "|Within one kilometer of {place}|Within {number} kilometers of {place}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "Yesterday": "Yesterday",
   "You created the event {event}.": "You created the event {event}.",
   "The event {event} was created by {profile}.": "The event {event} was created by {profile}.",
@@ -1158,6 +1158,7 @@
   "When the post is private, you'll need to share the link around.": "When the post is private, you'll need to share the link around.",
   "Reset": "Reset",
   "Local time ({timezone})": "Local time ({timezone})",
+  "Local times ({timezone})": "Local times ({timezone})",
   "Time in your timezone ({timezone})": "Time in your timezone ({timezone})",
   "Export": "Export",
   "Times in your timezone ({timezone})": "Times in your timezone ({timezone})",
@@ -1300,7 +1301,7 @@
   "Do you really want to suspend this account? All of the user's profiles will be deleted.": "Do you really want to suspend this account? All of the user's profiles will be deleted.",
   "Suspend the account": "Suspend the account",
   "No user matches the filter": "No user matches the filter",
-  "new@email.com": "new@email.com",
+  "new{'@'}email.com": "new{'@'}email.com",
   "Other users with the same email domain": "Other users with the same email domain",
   "Other users with the same IP address": "Other users with the same IP address",
   "IP Address": "IP Address",
@@ -1330,5 +1331,79 @@
   "Your membership is pending approval": "Your membership is pending approval",
   "Activate notifications": "Activate notifications",
   "Deactivate notifications": "Deactivate notifications",
-  "Membership requests will be approved by a group moderator": "Membership requests will be approved by a group moderator"
+  "Membership requests will be approved by a group moderator": "Membership requests will be approved by a group moderator",
+  "Geolocate me": "Geolocate me",
+  "Events nearby {position}": "Events nearby {position}",
+  "View more events around {position}": "View more events around {position}",
+  "Popular groups nearby {position}": "Popular groups nearby {position}",
+  "View more groups around {position}": "View more groups around {position}",
+  "Photo by {author} on {source}": "Photo by {author} on {source}",
+  "Online upcoming events": "Online upcoming events",
+  "View more online events": "View more online events",
+  "Owncast": "Owncast",
+  "{count} events": "{count} events",
+  "Categories": "Categories",
+  "Category illustrations credits": "Category illustrations credits",
+  "Illustration picture for “{category}” by {author} on {source} ({license})": "Illustration picture for “{category}” by {author} on {source} ({license})",
+  "View all categories": "View all categories",
+  "{instanceName} ({domain})": "{instanceName} ({domain})",
+  "This instance, {instanceName}, hosts your profile, so remember its name.": "This instance, {instanceName}, hosts your profile, so remember its name.",
+  "Keyword, event title, group name, etc.": "Keyword, event title, group name, etc.",
+  "Go!": "Go!",
+  "Explore!": "Explore!",
+  "Join {instance}, a Mobilizon instance": "Join {instance}, a Mobilizon instance",
+  "Open user menu": "Open user menu",
+  "Open main menu": "Open main menu",
+  "{'@'}{username} ({role})": "{'@'}{username} ({role})",
+  "This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.": "This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.",
+  "Confirm": "Confirm",
+  "Published events with {comments} comments and {participations} confirmed participations": "Published events with {comments} comments and {participations} confirmed participations",
+  "Ex: someone{'@'}mobilizon.org": "Ex: someone{'@'}mobilizon.org",
+  "Group members": "Group members",
+  "e.g. Nantes, Berlin, Cork, …": "e.g. Nantes, Berlin, Cork, …",
+  "find, create and organise events": "find, create and organise events",
+  "tool designed to serve you": "tool designed to serve you",
+  "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}.",
+  "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",
+  "The pad will be created on {service}": "The pad will be created on {service}",
+  "The calc will be created on {service}": "The calc will be created on {service}",
+  "The videoconference will be created on {service}": "The videoconference will be created on {service}",
+  "Search target": "Search target",
+  "In this instance's network": "In this instance's network",
+  "On the Fediverse": "On the Fediverse",
+  "Report reason": "Report reason",
+  "Reported content": "Reported content",
+  "No results found": "No results found",
+  "{eventsCount} events found": "No events found|One event found|{eventsCount} events found",
+  "{groupsCount} groups found": "No groups found|One group found|{groupsCount} groups found",
+  "{resultsCount} results found": "No results found|On result found|{resultsCount} results found",
+  "Loading map": "Loading map",
+  "Sort by": "Sort by",
+  "Map": "Map",
+  "List": "List",
+  "Best match": "Best match",
+  "Most recently published": "Most recently published",
+  "Least recently published": "Least recently published",
+  "With the most participants": "With the most participants",
+  "Number of members": "Number of members"
 }
\ No newline at end of file
diff --git a/js/src/i18n/eo.json b/js/src/i18n/eo.json
index b2dde7e30..c85f96c8d 100644
--- a/js/src/i18n/eo.json
+++ b/js/src/i18n/eo.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/es.json b/js/src/i18n/es.json
index f1c7a1021..e695929f6 100644
--- a/js/src/i18n/es.json
+++ b/js/src/i18n/es.json
@@ -10,7 +10,7 @@
   "0 Bytes": "0 Bytes",
   "<b>{contact}</b> will be displayed as contact.": "<b> {contact} </b>se mostrará como contacto. |<b>{contact}</b>se mostrará como contactos.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Se aceptó la solicitud de seguimiento de @{username}",
   "@{username}'s follow request was rejected": "Se rechazó la solicitud de seguimiento de @{username}",
@@ -1246,7 +1246,7 @@
   "instance rules": "reglas de instancia",
   "mobilizon-instance.tld": "mobilizon-instance.tld",
   "more than 1360 contributors": "más de 1360 contribuyentes",
-  "new@email.com": "nuevo@email.com",
+  "new{'@'}email.com": "nuevo{'@'}email.com",
   "profile@instance": "perfil@instancia",
   "report #{report_number}": "informe #{report_number}",
   "return to the event's page": "volver a la página del evento",
diff --git a/js/src/i18n/eu.json b/js/src/i18n/eu.json
index af3debc6e..05f57f0d9 100644
--- a/js/src/i18n/eu.json
+++ b/js/src/i18n/eu.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/fa.json b/js/src/i18n/fa.json
index 874697a2b..28a2a6ebb 100644
--- a/js/src/i18n/fa.json
+++ b/js/src/i18n/fa.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/fi.json b/js/src/i18n/fi.json
index 3a3614de3..9550ada1a 100644
--- a/js/src/i18n/fi.json
+++ b/js/src/i18n/fi.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Aloita keskustelu",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> näytetään kontaktina.|<b>{contact}</b> näytetään kontakteina.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role)}",
   "@{username}'s follow request was accepted": "Käyttäjän @{username} seurauspyyntö hyväksyttiin",
   "@{username}'s follow request was rejected": "Käyttäjän @{username} seuraamispyyntö hylättiin",
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index eb757f344..81affe511 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -10,8 +10,8 @@
   "0 Bytes": "0 octets",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> sera affiché·e comme contact.|<b>{contact}</b> seront affiché·e·s comme contacts.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
-  "@{username} ({role})": "@{username} ({role})",
+  "{'@'}{username}": "{'@'}{username}",
+  "{'@'}{username} ({role})": "{'@'}{username} ({role})",
   "@{username}'s follow request was accepted": "La demande de suivi de @{username} a été acceptée",
   "@{username}'s follow request was rejected": "La demande de suivi de @{username} a été rejettée",
   "A cookie is a small file containing information that is sent to your computer when you visit a website. When you visit the site again, the cookie allows that site to recognize your browser. Cookies may store user preferences and other information. You can configure your browser to refuse all cookies. However, this may result in some website features or services partially working. Local storage works the same way but allows you to store more data.": "Un cookie est un petit fichier contenant des informations qui est envoyé à votre ordinateur lorsque vous visitez un site web. Lorsque vous visitez le site à nouveau, le cookie permet à ce site de reconnaître votre navigateur. Les cookies peuvent stocker les préférences des utilisateur·rice·s et d'autres informations. Vous pouvez configurer votre navigateur pour qu'il refuse tous les cookies. Toutefois, cela peut entraîner le non-fonctionnement de certaines fonctions ou de certains services du site web. Le stockage local fonctionne de la même manière mais permet de stocker davantage de données.",
@@ -516,6 +516,7 @@
   "Loading comments…": "Chargement des commentaires…",
   "Local": "Local·e",
   "Local time ({timezone})": "Heure locale ({timezone})",
+  "Local times ({timezone})": "Heures locales ({timezone})",
   "Locality": "Commune",
   "Location": "Lieu",
   "Log in": "Se connecter",
@@ -1222,7 +1223,7 @@
   "instance rules": "règles de l'instance",
   "mobilizon-instance.tld": "instance-mobilizon.tld",
   "more than 1360 contributors": "plus de 1360 contributeur·rice·s",
-  "new@email.com": "nouvel@email.com",
+  "new{'@'}email.com": "nouvel{'@'}email.com",
   "profile@instance": "profil@instance",
   "report #{report_number}": "le signalement #{report_number}",
   "return to the event's page": "retourner sur la page de l'événement",
@@ -1321,5 +1322,72 @@
   "Your membership is pending approval": "Votre adhésion est en attente d'approbation",
   "Activate notifications": "Activer les notifications",
   "Deactivate notifications": "Désactiver les notifications",
-  "Membership requests will be approved by a group moderator": "Les demandes d'adhésion seront approuvées par un⋅e modérateur⋅ice du groupe"
+  "Membership requests will be approved by a group moderator": "Les demandes d'adhésion seront approuvées par un⋅e modérateur⋅ice du groupe",
+  "Geolocate me": "Me géolocaliser",
+  "Events nearby {position}": "Événements près de {position}",
+  "View more events around {position}": "Voir plus d'événements près de {position}",
+  "Popular groups nearby {position}": "Groupes populaires près de {position}",
+  "View more groups around {position}": "Voir plus de groupes près de {position}",
+  "Photo by {author} on {source}": "Photo par {author} sur {source}",
+  "Online upcoming events": "Événements en ligne à venir",
+  "View more online events": "Voir plus d'événements en ligne",
+  "Owncast": "Owncast",
+  "{count} events": "{count} événements",
+  "Categories": "Catégories",
+  "Category illustrations credits": "Crédits des illustrations des catégories",
+  "Illustration picture for “{category}” by {author} on {source} ({license})": "Image d'illustration pour “{category}” par {author} sur {source} ({license})",
+  "View all categories": "Voir toutes les catégories",
+  "{instanceName} ({domain})": "{instanceName} ({domain})",
+  "This instance, {instanceName}, hosts your profile, so remember its name.": "Cette instance, {instanceName}, héberge votre profil, donc souvenez-vous de son nom.",
+  "Keyword, event title, group name, etc.": "Mot clé, titre d'un événement, nom d'un groupe, etc.",
+  "Go!": "Go!",
+  "Explore!": "Explorer !",
+  "Join {instance}, a Mobilizon instance": "Rejoignez {instance}, une instance Mobilizon",
+  "Open user menu": "Ouvrir le menu utilisateur",
+  "Open main menu": "Ouvrir le menu principal",
+  "This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.": "C'est comme votre adresse fédérée ({username}) pour les groupes. Cela permettra au groupe d'être trouvable sur la fédération, et est garanti d'être unique.",
+  "Published events with {comments} comments and {participations} confirmed participations": "Événements publiés avec {comments} commentaires et {participations} participations confirmées",
+  "find, create and organise events": "trouver, créer et organiser des événements",
+  "tool designed to serve you": "outil conçu pour vous servir",
+  "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}.",
+  "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",
+  "The pad will be created on {service}": "Le pad sera créé sur {service}",
+  "The calc will be created on {service}": "Le calc sera créé sur {service}",
+  "The videoconference will be created on {service}": "La visio-conférence sera créée sur {service}",
+  "Search target": "Cible de la recherche",
+  "In this instance's network": "Dans le réseau de cette instance",
+  "On the Fediverse": "Dans le fediverse",
+  "Report reason": "Raison du signalement",
+  "Reported content": "Contenu signalé",
+  "No results found": "Aucun résultat trouvé",
+  "{eventsCount} events found": "Aucun événement trouvé|Un événement trouvé|{eventsCount} événements trouvés",
+  "{groupsCount} groups found": "Aucun groupe trouvé|Un groupe trouvé|{groupsCount} groupes trouvés",
+  "{resultsCount} results found": "Aucun résultat trouvé|Un résultat trouvé|{resultsCount} résultats trouvés",
+  "Loading map": "Chargement de la carte",
+  "Sort by": "Trier par",
+  "Map": "Carte",
+  "List": "Liste",
+  "Best match": "Pertinence",
+  "Most recently published": "Publié récemment",
+  "Least recently published": "Le moins récemment publié",
+  "With the most participants": "Avec le plus de participants",
+  "Number of members": "Nombre de membres"
 }
diff --git a/js/src/i18n/gd.json b/js/src/i18n/gd.json
index 9e643acbe..97f133d17 100644
--- a/js/src/i18n/gd.json
+++ b/js/src/i18n/gd.json
@@ -10,7 +10,7 @@
   "0 Bytes": "0 baidht",
   "<b>{contact}</b> will be displayed as contact.": "Thèid <b>{contact}</b> a shealltain mar neach-conaltraidh.|Thèid <b>{contact}</b> a shealltain mar luchd-conaltraidh.|Thèid <b>{contact}</b> a shealltain mar luchd-conaltraidh.|Thèid <b>{contact}</b> a shealltain mar luchd-conaltraidh.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Chaidh gabhail ris an t-iarrtas leantainn aig @{username}",
   "@{username}'s follow request was rejected": "Chaidh an t-iarrtas leantainn aig @{username} a dhiùltadh",
@@ -1245,7 +1245,7 @@
   "instance rules": "riaghailtean an ionstans",
   "mobilizon-instance.tld": "ionstans-mobilizon.tld",
   "more than 1360 contributors": "còrr is 1360 luchd-cuideachaidh",
-  "new@email.com": "ùr@post-d.com",
+  "new{'@'}email.com": "ùr{'@'}post-d.com",
   "profile@instance": "ainm@ionstans",
   "report #{report_number}": "gearan #{report_number}",
   "return to the event's page": "till gu duilleag an tachartais",
diff --git a/js/src/i18n/gl.json b/js/src/i18n/gl.json
index b95d19559..f6181305d 100644
--- a/js/src/i18n/gl.json
+++ b/js/src/i18n/gl.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Comezar un debate",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> será mostrado como contacto.|<b>{contact}</b> serán mostrados como contactos.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Foi aceptada a solicitude de seguimento de @{username}",
   "@{username}'s follow request was rejected": "A solicitude de seguimento de @{username} foi rexeitada",
diff --git a/js/src/i18n/hr.json b/js/src/i18n/hr.json
index 98ffd57df..88cfa87bd 100644
--- a/js/src/i18n/hr.json
+++ b/js/src/i18n/hr.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Pokreni razgovor",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> će se prikazati kao kontakt.|<b>{contact}</b> će se prikazivati kao kontakti.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Prihvaćen je zahtjev za praćenje od @{username}",
   "@{username}'s follow request was rejected": "Odbijen zahtjev za praćenje od @{username}",
diff --git a/js/src/i18n/hu.json b/js/src/i18n/hu.json
index 832adb8e6..ea6180895 100644
--- a/js/src/i18n/hu.json
+++ b/js/src/i18n/hu.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Megbeszélés indítása",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> meg lesz jelenítve kapcsolatként.|<b>{contact}</b> meg lesznek jelenítve kapcsolatokként.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "@{username} követési kérése el lett fogadva",
   "@{username}'s follow request was rejected": "@{username} követési kérése vissza lett utasítva",
diff --git a/js/src/i18n/id.json b/js/src/i18n/id.json
index 0b2451560..1137039bb 100644
--- a/js/src/i18n/id.json
+++ b/js/src/i18n/id.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/it.json b/js/src/i18n/it.json
index b748a74ac..83ddd8b79 100644
--- a/js/src/i18n/it.json
+++ b/js/src/i18n/it.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Inizia una discussione",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> verrà visualizzato come contatto.|<b>{contact}</b> verranno visualizzati come contatti.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "La richiesta di poter seguire da parte dell'utente @{username} è stata accettata",
   "@{username}'s follow request was rejected": "La richiesta di follow a @{username} è stata respinta",
diff --git a/js/src/i18n/ja.json b/js/src/i18n/ja.json
index 79b28cc2c..7f9acdda6 100644
--- a/js/src/i18n/ja.json
+++ b/js/src/i18n/ja.json
@@ -10,7 +10,7 @@
   "0 Bytes": "0バイト",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "@{username}のフォローリクエストが受け入れられました",
   "@{username}'s follow request was rejected": "@{username}のフォローリクエストは拒否されました",
diff --git a/js/src/i18n/kab.json b/js/src/i18n/kab.json
index 335edcbe6..411c6910a 100644
--- a/js/src/i18n/kab.json
+++ b/js/src/i18n/kab.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/kn.json b/js/src/i18n/kn.json
index 8c001ec70..b84a0ef72 100644
--- a/js/src/i18n/kn.json
+++ b/js/src/i18n/kn.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/nl.json b/js/src/i18n/nl.json
index d7d9769e9..57b7aad92 100644
--- a/js/src/i18n/nl.json
+++ b/js/src/i18n/nl.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Start een discussie",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> wordt weergegeven als contactpersoon.|<b>{contact}</b> worden weergegeven als contactpersonen.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "@{username}'s volg verzoek is geaccepteerd",
   "@{username}'s follow request was rejected": "@{username}'s volg verzoek is afgewezen",
diff --git a/js/src/i18n/nn.json b/js/src/i18n/nn.json
index 002f6907a..b1d78ec31 100644
--- a/js/src/i18n/nn.json
+++ b/js/src/i18n/nn.json
@@ -10,7 +10,7 @@
   "0 Bytes": "0 byte",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> vil bli vist som kontakt.|<b>{contact}</b> vil bli viste som kontaktar.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Fylgjeførespurnaden frå @{username} er godkjend",
   "@{username}'s follow request was rejected": "Fyljgeførespurnaden frå @{username} vart avslegen",
@@ -1223,7 +1223,7 @@
   "instance rules": "reglar for nettstaden",
   "mobilizon-instance.tld": "mobilizon-nettstad.domene",
   "more than 1360 contributors": "meir enn 1360 bidragsytarar",
-  "new@email.com": "ny@epost.no",
+  "new{'@'}email.com": "ny{'@'}epost.no",
   "profile@instance": "profil@nettstad",
   "report #{report_number}": "rapport nr. {report_number}",
   "return to the event's page": "gå tilbake til hendingssida",
diff --git a/js/src/i18n/oc.json b/js/src/i18n/oc.json
index 353f45d2b..76dfbb6cf 100644
--- a/js/src/i18n/oc.json
+++ b/js/src/i18n/oc.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Començar una discussion",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> serà mostrat coma contacte.|<b>{contact}</b> seràn mostrats coma contactes.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "La demanda de seguiment de @{username} es estada regetada",
diff --git a/js/src/i18n/pl.json b/js/src/i18n/pl.json
index 66364b6f6..94cdd209c 100644
--- a/js/src/i18n/pl.json
+++ b/js/src/i18n/pl.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Rozpocznij dyskusję",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> będzie wyświetlany jako kontakt.|<b>{contact}</b> będą wyświetlane jako kontakty.",
   "@{group}": "@{group}",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/pt.json b/js/src/i18n/pt.json
index 76f1ae20d..799dd817b 100644
--- a/js/src/i18n/pt.json
+++ b/js/src/i18n/pt.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/pt_BR.json b/js/src/i18n/pt_BR.json
index 3943e4cfe..c8fa6a1de 100644
--- a/js/src/i18n/pt_BR.json
+++ b/js/src/i18n/pt_BR.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Iniciar uma conversa",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> será mostrado como contato.|<b>{contact}</b> será mostrado como contatos.",
   "@{group}": "@{group}",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/ru.json b/js/src/i18n/ru.json
index ad49389d8..5d6f77812 100644
--- a/js/src/i18n/ru.json
+++ b/js/src/i18n/ru.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Начать обсуждение",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> будет отображаться как контакт.|<b>{contact}</b> будут отображаться как контакты.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Запрос на подписку от @{username} принят",
   "@{username}'s follow request was rejected": "Запрос на подписку от @{username} отклонён",
diff --git a/js/src/i18n/sl.json b/js/src/i18n/sl.json
index 7e9ac92c6..b7e3b3103 100644
--- a/js/src/i18n/sl.json
+++ b/js/src/i18n/sl.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "+ Začni razpravo",
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> bo prikazan kot stik.|<b>{contact}</b> bodo prikazani kot stiki.",
   "@{group}": "@{group}",
-  "@{username}": "@{username}",
+  "{'@'}{username}": "{'@'}{username}",
   "@{username} ({role})": "@{username} ({role})",
   "@{username}'s follow request was accepted": "Prošnja za sledenje je bila sprejeta. @{username} vam sedaj sledi",
   "@{username}'s follow request was rejected": "Prošnja za sledenje od uporabnika @{username} je bila zavrnjena",
diff --git a/js/src/i18n/sv.json b/js/src/i18n/sv.json
index e578aa6f1..3ce80bde9 100644
--- a/js/src/i18n/sv.json
+++ b/js/src/i18n/sv.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "@{grupp}",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "@{användarnamn} ({roll})",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/i18n/zh_Hant.json b/js/src/i18n/zh_Hant.json
index a98ac992e..cb49101af 100644
--- a/js/src/i18n/zh_Hant.json
+++ b/js/src/i18n/zh_Hant.json
@@ -9,7 +9,7 @@
   "+ Start a discussion": "",
   "<b>{contact}</b> will be displayed as contact.": "",
   "@{group}": "",
-  "@{username}": "",
+  "{'@'}{username}": "",
   "@{username} ({role})": "",
   "@{username}'s follow request was accepted": "",
   "@{username}'s follow request was rejected": "",
diff --git a/js/src/main.ts b/js/src/main.ts
index 0e6695195..a3bfaf088 100644
--- a/js/src/main.ts
+++ b/js/src/main.ts
@@ -1,47 +1,71 @@
-import Vue from "vue";
-import Buefy from "buefy";
-import Component from "vue-class-component";
+import { provide, createApp, h, computed, ref } from "vue";
 import VueScrollTo from "vue-scrollto";
-import VueMeta from "vue-meta";
-import VTooltip from "v-tooltip";
-import VueAnnouncer from "@vue-a11y/announcer";
-import VueSkipTo from "@vue-a11y/skip-to";
+// import VueAnnouncer from "@vue-a11y/announcer";
+// import VueSkipTo from "@vue-a11y/skip-to";
 import App from "./App.vue";
-import router from "./router";
-import { NotifierPlugin } from "./plugins/notifier";
-import filters from "./filters";
-import { i18n } from "./utils/i18n";
-import apolloProvider from "./vue-apollo";
-import Breadcrumbs from "@/components/Utils/Breadcrumbs.vue";
+import { router } from "./router";
+import { i18n, locale } from "./utils/i18n";
+import { apolloClient } from "./vue-apollo";
+import Breadcrumbs from "@/components/Utils/NavBreadcrumbs.vue";
+import { DefaultApolloClient } from "@vue/apollo-composable";
 import "./registerServiceWorker";
 import "./assets/tailwind.css";
+import { setAppForAnalytics } from "./services/statistics";
+import { dateFnsPlugin } from "./plugins/dateFns";
+import { dialogPlugin } from "./plugins/dialog";
+import { snackbarPlugin } from "./plugins/snackbar";
+import { notifierPlugin } from "./plugins/notifier";
+import FloatingVue from "floating-vue";
+import "floating-vue/dist/style.css";
+import Oruga from "@oruga-ui/oruga-next";
+import "@oruga-ui/oruga-next/dist/oruga.css";
+import "./assets/oruga-tailwindcss.css";
+import { orugaConfig } from "./oruga-config";
+import MaterialIcon from "./components/core/MaterialIcon.vue";
+import { createHead } from "@vueuse/head";
+import { CONFIG } from "./graphql/config";
+import { IConfig } from "./types/config.model";
 
-Vue.config.productionTip = false;
+// Vue.use(VueAnnouncer);
+// Vue.use(VueSkipTo);
 
-Vue.use(Buefy);
-Vue.use(NotifierPlugin);
-Vue.use(filters);
-Vue.use(VueMeta);
-Vue.use(VueScrollTo);
-Vue.use(VTooltip);
-Vue.use(VueAnnouncer);
-Vue.use(VueSkipTo);
-Vue.component("breadcrumbs-nav", Breadcrumbs);
-
-// Register the router hooks with their names
-Component.registerHooks([
-  "beforeRouteEnter",
-  "beforeRouteLeave",
-  "beforeRouteUpdate", // for vue-router 2.2+
-]);
-
-/* eslint-disable no-new */
-new Vue({
-  router,
-  apolloProvider,
-  el: "#app",
-  template: "<App/>",
-  components: { App },
-  render: (h) => h(App),
-  i18n,
+const app = createApp({
+  setup() {
+    provide(DefaultApolloClient, apolloClient);
+  },
+  render: () => h(App),
 });
+
+app.use(router);
+app.use(i18n);
+app.use(dateFnsPlugin, { locale });
+app.use(dialogPlugin);
+app.use(snackbarPlugin);
+app.use(notifierPlugin);
+app.use(VueScrollTo);
+app.use(FloatingVue);
+
+app.component("breadcrumbs-nav", Breadcrumbs);
+app.component("material-icon", MaterialIcon);
+app.use(Oruga, orugaConfig);
+
+const instanceName = ref();
+
+apolloClient
+  .query<{ config: IConfig }>({
+    query: CONFIG,
+  })
+  .then(({ data: configData }) => {
+    instanceName.value = configData.config?.name;
+  });
+
+const head = createHead({
+  titleTemplate: computed(() =>
+    instanceName.value ? `%s | ${instanceName.value}` : "%s"
+  ).value,
+});
+app.use(head);
+
+app.mount("#app");
+
+setAppForAnalytics(app);
diff --git a/js/src/mixins/AddressAutoCompleteMixin.ts b/js/src/mixins/AddressAutoCompleteMixin.ts
deleted file mode 100644
index b5074b1af..000000000
--- a/js/src/mixins/AddressAutoCompleteMixin.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { LatLng } from "leaflet";
-import { Address, IAddress } from "../types/address.model";
-import { ADDRESS, REVERSE_GEOCODE } from "../graphql/address";
-import { CONFIG } from "../graphql/config";
-import { IConfig } from "../types/config.model";
-import debounce from "lodash/debounce";
-import { DebouncedFunc } from "lodash";
-
-@Component({
-  components: {
-    "map-leaflet": () =>
-      import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
-  },
-  apollo: {
-    config: CONFIG,
-  },
-})
-export default class AddressAutoCompleteMixin extends Vue {
-  @Prop({ required: true })
-  value!: IAddress;
-  gettingLocationError: string | null = null;
-
-  gettingLocation = false;
-
-  mapDefaultZoom = 15;
-
-  addressData: IAddress[] = [];
-
-  selected: IAddress = new Address();
-
-  config!: IConfig;
-
-  isFetching = false;
-
-  fetchAsyncData!: DebouncedFunc<(query: string) => Promise<void>>;
-
-  // eslint-disable-next-line no-undef
-  protected location!: GeolocationPosition;
-
-  // We put this in data because of issues like
-  // https://github.com/vuejs/vue-class-component/issues/263
-  data(): Record<string, unknown> {
-    return {
-      fetchAsyncData: debounce(this.asyncData, 200),
-    };
-  }
-
-  @Watch("config")
-  watchConfig(config: IConfig): void {
-    if (!config.geocoding.autocomplete) {
-      // If autocomplete is disabled, we put a larger debounce value
-      // so that we don't request with incomplete address
-      this.fetchAsyncData = debounce(this.asyncData, 2000);
-    }
-  }
-
-  async asyncData(query: string): Promise<void> {
-    if (!query.length) {
-      this.addressData = [];
-      this.selected = new Address();
-      return;
-    }
-
-    if (query.length < 3) {
-      this.addressData = [];
-      return;
-    }
-
-    this.isFetching = true;
-    const result = await this.$apollo.query({
-      query: ADDRESS,
-      fetchPolicy: "network-only",
-      variables: {
-        query,
-        locale: this.$i18n.locale,
-      },
-    });
-
-    this.addressData = result.data.searchAddress.map(
-      (address: IAddress) => new Address(address)
-    );
-    this.isFetching = false;
-  }
-
-  get queryText(): string {
-    return (this.value && new Address(this.value).fullName) || "";
-  }
-
-  set queryText(text: string) {
-    if (text === "" && this.selected?.id) {
-      console.log("doing reset");
-      this.resetAddress();
-    }
-  }
-
-  resetAddress(): void {
-    this.$emit("input", null);
-    this.selected = new Address();
-  }
-
-  async locateMe(): Promise<void> {
-    this.gettingLocation = true;
-    this.gettingLocationError = null;
-    try {
-      this.location = await this.getLocation();
-      this.mapDefaultZoom = 12;
-      this.reverseGeoCode(
-        new LatLng(
-          this.location.coords.latitude,
-          this.location.coords.longitude
-        ),
-        12
-      );
-    } catch (e: any) {
-      this.gettingLocationError = e.message;
-    }
-    this.gettingLocation = false;
-  }
-
-  async reverseGeoCode(e: LatLng, zoom: number): Promise<void> {
-    // If the position has been updated through autocomplete selection, no need to geocode it!
-    if (this.checkCurrentPosition(e)) return;
-    const result = await this.$apollo.query({
-      query: REVERSE_GEOCODE,
-      variables: {
-        latitude: e.lat,
-        longitude: e.lng,
-        zoom,
-        locale: this.$i18n.locale,
-      },
-    });
-
-    this.addressData = result.data.reverseGeocode.map(
-      (address: IAddress) => new Address(address)
-    );
-    if (this.addressData.length > 0) {
-      const defaultAddress = new Address(this.addressData[0]);
-      this.selected = defaultAddress;
-      this.$emit("input", this.selected);
-    }
-  }
-
-  checkCurrentPosition(e: LatLng): boolean {
-    if (!this.selected || !this.selected.geom) return false;
-    const lat = parseFloat(this.selected.geom.split(";")[1]);
-    const lon = parseFloat(this.selected.geom.split(";")[0]);
-
-    return e.lat === lat && e.lng === lon;
-  }
-
-  // eslint-disable-next-line no-undef
-  async getLocation(): Promise<GeolocationPosition> {
-    let errorMessage = this.$t("Failed to get location.");
-    return new Promise((resolve, reject) => {
-      if (!("geolocation" in navigator)) {
-        reject(new Error(errorMessage as string));
-      }
-
-      navigator.geolocation.getCurrentPosition(
-        (pos) => {
-          resolve(pos);
-        },
-        (err) => {
-          switch (err.code) {
-            // eslint-disable-next-line no-undef
-            case GeolocationPositionError.PERMISSION_DENIED:
-              errorMessage = this.$t("The geolocation prompt was denied.");
-              break;
-            // eslint-disable-next-line no-undef
-            case GeolocationPositionError.POSITION_UNAVAILABLE:
-              errorMessage = this.$t("Your position was not available.");
-              break;
-            // eslint-disable-next-line no-undef
-            case GeolocationPositionError.TIMEOUT:
-              errorMessage = this.$t("Geolocation was not determined in time.");
-              break;
-            default:
-              errorMessage = err.message;
-          }
-          reject(new Error(errorMessage as string));
-        }
-      );
-    });
-  }
-
-  get fieldErrors(): Array<Record<string, boolean>> {
-    const errors = [];
-    if (this.gettingLocationError) {
-      errors.push({
-        [this.gettingLocationError]: true,
-      });
-    }
-    return errors;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  get isSecureContext(): boolean {
-    return window.isSecureContext;
-  }
-}
diff --git a/js/src/mixins/activity.ts b/js/src/mixins/activity.ts
deleted file mode 100644
index fa8fa4f37..000000000
--- a/js/src/mixins/activity.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { IActivity } from "@/types/activity.model";
-import { IActor } from "@/types/actor";
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component({
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-})
-export default class ActivityMixin extends Vue {
-  @Prop({ required: true, type: Object }) activity!: IActivity;
-  currentActor!: IActor;
-
-  get subjectParams(): Record<string, string> {
-    return this.activity.subjectParams.reduce(
-      (acc: Record<string, string>, { key, value }) => {
-        acc[key] = value;
-        return acc;
-      },
-      {}
-    );
-  }
-
-  get isAuthorCurrentActor(): boolean {
-    return (
-      this.activity.author.id === this.currentActor.id &&
-      this.currentActor.id !== undefined
-    );
-  }
-}
diff --git a/js/src/mixins/actor.ts b/js/src/mixins/actor.ts
deleted file mode 100644
index 66e31af49..000000000
--- a/js/src/mixins/actor.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { IActor } from "@/types/actor";
-import { IEvent } from "@/types/event.model";
-import { Component, Vue } from "vue-property-decorator";
-
-@Component
-export default class ActorMixin extends Vue {
-  static actorIsOrganizer(actor: IActor, event: IEvent): boolean {
-    console.log("actorIsOrganizer actor", actor.id);
-    console.log("actorIsOrganizer event", event);
-    return (
-      event.organizerActor !== undefined && actor.id === event.organizerActor.id
-    );
-  }
-}
diff --git a/js/src/mixins/event.ts b/js/src/mixins/event.ts
deleted file mode 100644
index f0f426525..000000000
--- a/js/src/mixins/event.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import { mixins } from "vue-class-component";
-import { Component, Vue } from "vue-property-decorator";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { ParticipantRole } from "@/types/enums";
-import { IParticipant } from "../types/participant.model";
-import { IEvent } from "../types/event.model";
-import {
-  DELETE_EVENT,
-  EVENT_PERSON_PARTICIPATION,
-  FETCH_EVENT,
-  LEAVE_EVENT,
-} from "../graphql/event";
-import { IPerson } from "../types/actor";
-import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
-
-@Component
-export default class EventMixin extends mixins(Vue) {
-  protected async leaveEvent(
-    event: IEvent,
-    actorId: string,
-    token: string | null = null,
-    anonymousParticipationConfirmed: boolean | null = null
-  ): Promise<void> {
-    try {
-      const { data: resultData } = await this.$apollo.mutate<{
-        leaveEvent: IParticipant;
-      }>({
-        mutation: LEAVE_EVENT,
-        variables: {
-          eventId: event.id,
-          actorId,
-          token,
-        },
-        update: (
-          store: ApolloCache<{
-            leaveEvent: IParticipant;
-          }>,
-          { data }: FetchResult
-        ) => {
-          if (data == null) return;
-          let participation;
-
-          if (!token) {
-            const participationCachedData = store.readQuery<{
-              person: IPerson;
-            }>({
-              query: EVENT_PERSON_PARTICIPATION,
-              variables: { eventId: event.id, actorId },
-            });
-            if (participationCachedData == null) return;
-            const { person } = participationCachedData;
-            [participation] = person.participations.elements;
-
-            store.modify({
-              id: `Person:${actorId}`,
-              fields: {
-                participations() {
-                  return {
-                    elements: [],
-                    total: 0,
-                  };
-                },
-              },
-            });
-          }
-
-          const eventCachedData = store.readQuery<{ event: IEvent }>({
-            query: FETCH_EVENT,
-            variables: { uuid: event.uuid },
-          });
-          if (eventCachedData == null) return;
-          const { event: eventCached } = eventCachedData;
-          if (eventCached === null) {
-            console.error("Cannot update event cache, because of null value.");
-            return;
-          }
-          const participantStats = { ...eventCached.participantStats };
-          if (
-            participation &&
-            participation?.role === ParticipantRole.NOT_APPROVED
-          ) {
-            participantStats.notApproved -= 1;
-          } else if (anonymousParticipationConfirmed === false) {
-            participantStats.notConfirmed -= 1;
-          } else {
-            participantStats.going -= 1;
-            participantStats.participant -= 1;
-          }
-          store.writeQuery({
-            query: FETCH_EVENT,
-            variables: { uuid: event.uuid },
-            data: {
-              event: {
-                ...eventCached,
-                participantStats,
-              },
-            },
-          });
-        },
-      });
-      if (resultData) {
-        this.participationCancelledMessage();
-      }
-    } catch (error: any) {
-      Snackbar.open({
-        message: error.message,
-        type: "is-danger",
-        position: "is-bottom",
-      });
-      console.error(error);
-    }
-  }
-
-  private participationCancelledMessage() {
-    this.$notifier.success(
-      this.$t("You have cancelled your participation") as string
-    );
-  }
-
-  protected async openDeleteEventModal(event: IEvent): Promise<void> {
-    function escapeRegExp(string: string) {
-      return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
-    }
-    const participantsLength = event.participantStats.participant;
-    const prefix = participantsLength
-      ? this.$tc(
-          "There are {participants} participants.",
-          event.participantStats.participant,
-          {
-            participants: event.participantStats.participant,
-          }
-        )
-      : "";
-
-    this.$buefy.dialog.prompt({
-      type: "is-danger",
-      title: this.$t("Delete event") as string,
-      message: `${prefix}
-        ${this.$t(
-          "Are you sure you want to delete this event? This action cannot be reverted."
-        )}
-        <br><br>
-        ${this.$t('To confirm, type your event title "{eventTitle}"', {
-          eventTitle: event.title,
-        })}`,
-      confirmText: this.$t("Delete {eventTitle}", {
-        eventTitle: event.title,
-      }) as string,
-      inputAttrs: {
-        placeholder: event.title,
-        pattern: escapeRegExp(event.title),
-      },
-      onConfirm: () => this.deleteEvent(event),
-    });
-  }
-
-  private async deleteEvent(event: IEvent) {
-    const { title: eventTitle, id: eventId } = event;
-
-    try {
-      await this.$apollo.mutate<IParticipant>({
-        mutation: DELETE_EVENT,
-        variables: {
-          eventId: event.id,
-        },
-      });
-      const cache = this.$apollo.getClient().cache as InMemoryCache;
-      cache.evict({ id: `Event:${eventId}` });
-      cache.gc();
-      /**
-       * When the event corresponding has been deleted (by the organizer).
-       * A notification is already triggered.
-       *
-       * @type {string}
-       */
-      this.$emit("event-deleted", event.id);
-
-      this.$buefy.notification.open({
-        message: this.$t("Event {eventTitle} deleted", {
-          eventTitle,
-        }) as string,
-        type: "is-success",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-    } catch (error: any) {
-      Snackbar.open({
-        message: error.message,
-        type: "is-danger",
-        position: "is-bottom",
-      });
-
-      console.error(error);
-    }
-  }
-}
diff --git a/js/src/mixins/group.ts b/js/src/mixins/group.ts
deleted file mode 100644
index e7d8d7204..000000000
--- a/js/src/mixins/group.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import {
-  CURRENT_ACTOR_CLIENT,
-  GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
-  PERSON_STATUS_GROUP,
-} from "@/graphql/actor";
-import { DELETE_GROUP, FETCH_GROUP } from "@/graphql/group";
-import RouteName from "@/router/name";
-import {
-  IActor,
-  IFollower,
-  IGroup,
-  IPerson,
-  usernameWithDomain,
-} from "@/types/actor";
-import { MemberRole } from "@/types/enums";
-import { Component, Vue } from "vue-property-decorator";
-import { Route } from "vue-router";
-
-const now = new Date();
-
-@Component({
-  apollo: {
-    group: {
-      query: FETCH_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          name: this.$route.params.preferredUsername,
-          beforeDateTime: null,
-          afterDateTime: now,
-        };
-      },
-      skip() {
-        return !this.$route.params.preferredUsername;
-      },
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
-      },
-    },
-    person: {
-      query: PERSON_STATUS_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-          group: usernameWithDomain(this.group),
-        };
-      },
-      subscribeToMore: {
-        document: GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
-        variables() {
-          return {
-            actorId: this.currentActor.id,
-            group: this.group?.preferredUsername,
-          };
-        },
-        skip() {
-          return (
-            !this.currentActor ||
-            !this.currentActor.id ||
-            !this.group?.preferredUsername
-          );
-        },
-      },
-      skip() {
-        return (
-          !this.currentActor ||
-          !this.currentActor.id ||
-          !this.group?.preferredUsername
-        );
-      },
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-})
-export default class GroupMixin extends Vue {
-  group!: IGroup;
-
-  currentActor!: IActor;
-
-  person!: IPerson;
-
-  get isCurrentActorAGroupAdmin(): boolean {
-    return this.hasCurrentActorThisRole(MemberRole.ADMINISTRATOR);
-  }
-
-  get isCurrentActorAGroupModerator(): boolean {
-    return this.hasCurrentActorThisRole([
-      MemberRole.MODERATOR,
-      MemberRole.ADMINISTRATOR,
-    ]);
-  }
-
-  get isCurrentActorAGroupMember(): boolean {
-    return this.hasCurrentActorThisRole([
-      MemberRole.MODERATOR,
-      MemberRole.ADMINISTRATOR,
-      MemberRole.MEMBER,
-    ]);
-  }
-
-  get isCurrentActorAPendingGroupMember(): boolean {
-    return this.hasCurrentActorThisRole([MemberRole.NOT_APPROVED]);
-  }
-
-  hasCurrentActorThisRole(givenRole: string | string[]): boolean {
-    const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
-    return (
-      this.person?.memberships?.total > 0 &&
-      roles.includes(this.person?.memberships?.elements[0].role)
-    );
-  }
-
-  get isCurrentActorFollowing(): boolean {
-    return this.currentActorFollow?.approved === true;
-  }
-
-  get isCurrentActorPendingFollow(): boolean {
-    return this.currentActorFollow?.approved === false;
-  }
-
-  get isCurrentActorFollowingNotify(): boolean {
-    return (
-      this.isCurrentActorFollowing && this.currentActorFollow?.notify === true
-    );
-  }
-
-  get currentActorFollow(): IFollower | null {
-    if (this.person?.follows?.total > 0) {
-      return this.person?.follows?.elements[0];
-    }
-    return null;
-  }
-
-  handleErrors(errors: any[]): void {
-    if (
-      errors.some((error) => error.status_code === 404) ||
-      errors.some(({ message }) => message.includes("has invalid value $uuid"))
-    ) {
-      this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
-    }
-  }
-
-  confirmDeleteGroup(): void {
-    this.$buefy.dialog.confirm({
-      title: this.$t("Delete group") as string,
-      message: this.$t(
-        "Are you sure you want to <b>completely delete</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
-      ) as string,
-      confirmText: this.$t("Delete group") as string,
-      cancelText: this.$t("Cancel") as string,
-      type: "is-danger",
-      hasIcon: true,
-      onConfirm: () => this.deleteGroup(),
-    });
-  }
-
-  async deleteGroup(): Promise<Route> {
-    await this.$apollo.mutate<{ deleteGroup: IGroup }>({
-      mutation: DELETE_GROUP,
-      variables: {
-        groupId: this.group.id,
-      },
-    });
-    return this.$router.push({ name: RouteName.MY_GROUPS });
-  }
-}
diff --git a/js/src/mixins/identityEdition.ts b/js/src/mixins/identityEdition.ts
deleted file mode 100644
index f3e0a2282..000000000
--- a/js/src/mixins/identityEdition.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Component, Mixins, Vue } from "vue-property-decorator";
-import { Person } from "@/types/actor";
-
-// TODO: Refactor into js/src/utils/username.ts
-@Component
-export default class IdentityEditionMixin extends Mixins(Vue) {
-  identity: Person = new Person();
-
-  oldDisplayName: string | null = null;
-
-  autoUpdateUsername(newDisplayName: string | null): void {
-    const oldUsername = IdentityEditionMixin.convertToUsername(
-      this.oldDisplayName
-    );
-
-    if (this.identity.preferredUsername === oldUsername) {
-      this.identity.preferredUsername =
-        IdentityEditionMixin.convertToUsername(newDisplayName);
-    }
-
-    this.oldDisplayName = newDisplayName;
-  }
-
-  private static convertToUsername(value: string | null) {
-    if (!value) return "";
-
-    // https://stackoverflow.com/a/37511463
-    return value
-      .toLocaleLowerCase()
-      .normalize("NFD")
-      .replace(/[\u0300-\u036f]/g, "")
-      .replace(/\s{2,}/, " ")
-      .replace(/ /g, "_")
-      .replace(/[^a-z0-9_]/g, "")
-      .replace(/_{2,}/, "");
-  }
-
-  validateUsername(): boolean {
-    return (
-      this.identity.preferredUsername ===
-      IdentityEditionMixin.convertToUsername(this.identity.preferredUsername)
-    );
-  }
-}
diff --git a/js/src/mixins/onboarding.ts b/js/src/mixins/onboarding.ts
deleted file mode 100644
index a4cbd608d..000000000
--- a/js/src/mixins/onboarding.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SET_USER_SETTINGS, USER_SETTINGS } from "@/graphql/user";
-import RouteName from "@/router/name";
-import { ICurrentUser } from "@/types/current-user.model";
-import { Component, Vue } from "vue-property-decorator";
-
-@Component({
-  apollo: {
-    loggedUser: USER_SETTINGS,
-  },
-})
-export default class Onboarding extends Vue {
-  loggedUser!: ICurrentUser;
-
-  RouteName = RouteName;
-
-  protected async doUpdateSetting(
-    variables: Record<string, unknown>
-  ): Promise<void> {
-    await this.$apollo.mutate<{ setUserSettings: string }>({
-      mutation: SET_USER_SETTINGS,
-      variables,
-    });
-  }
-}
diff --git a/js/src/mixins/post.ts b/js/src/mixins/post.ts
deleted file mode 100644
index cfd7968e1..000000000
--- a/js/src/mixins/post.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { DELETE_POST, FETCH_POST } from "@/graphql/post";
-import { usernameWithDomain } from "@/types/actor";
-import { IPost } from "@/types/post.model";
-import { Component, Vue } from "vue-property-decorator";
-import RouteName from "../router/name";
-
-@Component({
-  apollo: {
-    post: {
-      query: FETCH_POST,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          slug: this.slug,
-        };
-      },
-      skip() {
-        return !this.slug;
-      },
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
-      },
-    },
-  },
-})
-export default class PostMixin extends Vue {
-  post!: IPost;
-
-  RouteName = RouteName;
-
-  protected async openDeletePostModal(): Promise<void> {
-    this.$buefy.dialog.confirm({
-      type: "is-danger",
-      title: this.$t("Delete post") as string,
-      message: this.$t(
-        "Are you sure you want to delete this post? This action cannot be reverted."
-      ) as string,
-      onConfirm: () => this.deletePost(),
-    });
-  }
-
-  async deletePost(): Promise<void> {
-    const { data } = await this.$apollo.mutate({
-      mutation: DELETE_POST,
-      variables: {
-        id: this.post.id,
-      },
-    });
-    if (data && this.post.attributedTo) {
-      this.$router.push({
-        name: RouteName.POSTS,
-        params: {
-          preferredUsername: usernameWithDomain(this.post.attributedTo),
-        },
-      });
-    }
-  }
-
-  handleErrors(errors: any[]): void {
-    if (errors.some((error) => error.status_code === 404)) {
-      this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
-    }
-  }
-}
diff --git a/js/src/mixins/resource.ts b/js/src/mixins/resource.ts
deleted file mode 100644
index f4c6bbb34..000000000
--- a/js/src/mixins/resource.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, Vue } from "vue-property-decorator";
-import { IResource } from "@/types/resource";
-
-@Component
-export default class ResourceMixin extends Vue {
-  static resourcePath(resource: IResource): string {
-    const { path } = resource;
-    if (path && path[0] === "/") {
-      return path.slice(1);
-    }
-    return path || "";
-  }
-
-  static resourcePathArray(resource: IResource): string[] {
-    return ResourceMixin.resourcePath(resource).split("/");
-  }
-}
diff --git a/js/src/oruga-config.ts b/js/src/oruga-config.ts
new file mode 100644
index 000000000..f3101b623
--- /dev/null
+++ b/js/src/oruga-config.ts
@@ -0,0 +1,110 @@
+export const orugaConfig = {
+  iconPack: "",
+  iconComponent: "material-icon",
+  statusIcon: true,
+  button: {
+    rootClass: "btn",
+    variantClass: "btn-",
+    roundedClass: "btn-rounded",
+    outlinedClass: "btn-outlined-",
+    disabledClass: "btn-disabled",
+    sizeClass: "btn-size-",
+  },
+  field: {
+    rootClass: "field",
+    labelClass: "field-label",
+    messageClass: "text-sm italic",
+    variantClass: "field-",
+    variantMessageClass: "field-message-",
+  },
+  input: {
+    inputClass: "input",
+    roundedClass: "rounded",
+    variantClass: "input-",
+    iconRightClass: "input-icon-right",
+  },
+  inputitems: {
+    itemClass: "inputitems-item",
+  },
+  autocomplete: {
+    menuClass: "autocomplete-menu",
+    itemClass: "autocomplete-item",
+  },
+  icon: {
+    variantClass: "icon-",
+  },
+  checkbox: {
+    checkClass: "checkbox",
+    checkCheckedClass: "checkbox-checked",
+    labelClass: "checkbox-label",
+  },
+  dropdown: {
+    rootClass: "dropdown",
+    menuClass: "dropdown-menu",
+    itemClass: "dropdown-item",
+    itemActiveClass: "dropdown-item-active",
+  },
+  steps: {
+    itemHeaderActiveClass: "steps-nav-item-active",
+    itemHeaderPreviousClass: "steps-nav-item-previous",
+    stepMarkerClass: "step-marker",
+    stepDividerClass: "step-divider",
+  },
+  datepicker: {
+    iconNext: "ChevronRight",
+    iconPrev: "ChevronLeft",
+  },
+  modal: {
+    rootClass: "modal",
+    contentClass: "modal-content",
+  },
+  switch: {
+    labelClass: "switch-label",
+    checkCheckedClass: "switch-check-checked",
+  },
+  select: {
+    selectClass: "select",
+  },
+  radio: {
+    checkCheckedClass: "radio-checked",
+    checkClass: "form-radio",
+    labelClass: "radio-label",
+  },
+  notification: {
+    rootClass: "notification",
+    variantClass: "notification-",
+  },
+  table: {
+    tableClass: "table",
+    tdClass: "table-td",
+    thClass: "table-th",
+    rootClass: "table-root",
+  },
+  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-",
+  },
+  tooltip: {
+    rootClass: "tooltip",
+    contentClass: "tooltip-content",
+    arrowClass: "tooltip-arrow",
+    variantClass: "tooltip-content-",
+  },
+};
diff --git a/js/src/plugins/dateFns.ts b/js/src/plugins/dateFns.ts
index 78c48dd02..545428f0b 100644
--- a/js/src/plugins/dateFns.ts
+++ b/js/src/plugins/dateFns.ts
@@ -1,17 +1,23 @@
-import Locale from "date-fns";
-import VueInstance from "vue";
+import type { Locale } from "date-fns";
+import { App } from "vue";
 
-declare module "vue/types/vue" {
-  interface Vue {
-    $dateFnsLocale: Locale;
-  }
-}
+export const dateFnsPlugin = {
+  install(app: App, options: { locale: string }) {
+    function dateFnsfileForLanguage(lang: string) {
+      const matches: Record<string, string> = {
+        en_US: "en-US",
+        en: "en-US",
+      };
+      return matches[lang] ?? lang;
+    }
 
-export function DateFnsPlugin(
-  vue: typeof VueInstance,
-  { locale }: { locale: string }
-): void {
-  import(`date-fns/locale/${locale}/index.js`).then((localeEntity) => {
-    VueInstance.prototype.$dateFnsLocale = localeEntity;
-  });
-}
+    import(
+      `../../node_modules/date-fns/esm/locale/${dateFnsfileForLanguage(
+        options.locale
+      )}/index.js`
+    ).then((localeEntity: { default: Locale }) => {
+      app.provide("dateFnsLocale", localeEntity.default);
+      app.config.globalProperties.$dateFnsLocale = localeEntity.default;
+    });
+  },
+};
diff --git a/js/src/plugins/dialog.ts b/js/src/plugins/dialog.ts
new file mode 100644
index 000000000..42eefc509
--- /dev/null
+++ b/js/src/plugins/dialog.ts
@@ -0,0 +1,99 @@
+import DialogComponent from "@/components/core/CustomDialog.vue";
+import { App } from "vue";
+
+export class Dialog {
+  private app: App;
+
+  constructor(app: App) {
+    this.app = app;
+  }
+
+  prompt({
+    title,
+    message,
+    confirmText,
+    cancelText,
+    variant,
+    hasIcon,
+    size,
+    onConfirm,
+    onCancel,
+    inputAttrs,
+    hasInput,
+  }: {
+    title?: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: string;
+    hasIcon?: boolean;
+    size?: string;
+    onConfirm?: (prompt: string) => void;
+    onCancel?: (source: string) => void;
+    inputAttrs?: Record<string, any>;
+    hasInput?: boolean;
+  }) {
+    this.app.config.globalProperties.$oruga.modal.open({
+      component: DialogComponent,
+      props: {
+        title,
+        message,
+        confirmText,
+        cancelText,
+        variant,
+        hasIcon,
+        size,
+        onConfirm,
+        onCancel,
+        inputAttrs,
+        hasInput,
+      },
+    });
+  }
+
+  confirm({
+    title,
+    message,
+    confirmText,
+    cancelText,
+    variant,
+    hasIcon,
+    size,
+    onConfirm,
+    onCancel,
+  }: {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant: string;
+    hasIcon?: boolean;
+    size?: string;
+    onConfirm: () => any;
+    onCancel?: (source: string) => any;
+  }) {
+    console.debug("confirming something");
+    this.app.config.globalProperties.$oruga.modal.open({
+      component: DialogComponent,
+      props: {
+        title,
+        message,
+        confirmText,
+        cancelText,
+        variant,
+        hasIcon,
+        size,
+        onConfirm,
+        onCancel,
+      },
+    });
+  }
+}
+
+export const dialogPlugin = {
+  install(app: App) {
+    const dialog = new Dialog(app);
+    app.config.globalProperties.$dialog = dialog;
+    app.provide("dialog", dialog);
+  },
+};
diff --git a/js/src/plugins/notifier.ts b/js/src/plugins/notifier.ts
index 5000bf986..0b5e9c3fe 100644
--- a/js/src/plugins/notifier.ts
+++ b/js/src/plugins/notifier.ts
@@ -1,66 +1,39 @@
-/* eslint-disable no-shadow */
-import VueInstance from "vue";
-import { ColorModifiers } from "buefy/types/helpers.d";
-import { Route, RawLocation } from "vue-router";
-
-declare module "vue/types/vue" {
-  interface Vue {
-    $notifier: {
-      success: (message: string) => void;
-      error: (message: string) => void;
-      info: (message: string) => void;
-    };
-    beforeRouteEnter?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteLeave?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteUpdate?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-  }
-}
+import { App } from "vue";
 
 export class Notifier {
-  private readonly vue: typeof VueInstance;
+  private app: App;
 
-  constructor(vue: typeof VueInstance) {
-    this.vue = vue;
+  constructor(app: App) {
+    this.app = app;
   }
 
   success(message: string): void {
-    this.notification(message, "is-success");
+    this.notification(message, "success");
   }
 
   error(message: string): void {
-    this.notification(message, "is-danger");
+    this.notification(message, "danger");
   }
 
   info(message: string): void {
-    this.notification(message, "is-info");
+    this.notification(message, "info");
   }
 
-  private notification(message: string, type: ColorModifiers) {
-    this.vue.prototype.$buefy.notification.open({
+  private notification(message: string, type: string) {
+    this.app.config.globalProperties.$oruga.notification.open({
       message,
       duration: 5000,
-      position: "is-bottom-right",
+      position: "bottom-right",
       type,
       hasIcon: true,
     });
   }
 }
 
-/* eslint-disable */
-export function NotifierPlugin(vue: typeof VueInstance): void {
-  vue.prototype.$notifier = new Notifier(vue);
-}
+export const notifierPlugin = {
+  install(app: App) {
+    const notifier = new Notifier(app);
+    app.config.globalProperties.$notifier = notifier;
+    app.provide("notifier", notifier);
+  },
+};
diff --git a/js/src/plugins/snackbar.ts b/js/src/plugins/snackbar.ts
new file mode 100644
index 000000000..cb425b173
--- /dev/null
+++ b/js/src/plugins/snackbar.ts
@@ -0,0 +1,53 @@
+import SnackbarComponent from "@/components/core/CustomSnackbar.vue";
+import { App } from "vue";
+
+export class Snackbar {
+  private app: App;
+
+  constructor(app: App) {
+    this.app = app;
+  }
+
+  open({
+    message,
+    variant,
+    position,
+    actionText,
+    cancelText,
+    onAction,
+  }: {
+    message?: string;
+    queue?: boolean;
+    indefinite?: boolean;
+    variant?: string;
+    position?: string;
+    actionText?: string;
+    cancelText?: string;
+    onAction?: () => any;
+  }) {
+    this.app.config.globalProperties.$oruga.notification.open({
+      component: SnackbarComponent,
+      props: {
+        message,
+        // queue,
+        // indefinite,
+        actionText,
+        cancelText,
+        onAction,
+        position: position ?? "bottom-right",
+        variant: variant ?? "dark",
+      },
+      position: position ?? "bottom-right",
+      variant: variant ?? "dark",
+      duration: 5000000,
+    });
+  }
+}
+
+export const snackbarPlugin = {
+  install(app: App) {
+    const snackbar = new Snackbar(app);
+    app.config.globalProperties.$snackbar = snackbar;
+    app.provide("snackbar", snackbar);
+  },
+};
diff --git a/js/src/registerServiceWorker.ts b/js/src/registerServiceWorker.ts
index ee0de1d9b..a84837468 100644
--- a/js/src/registerServiceWorker.ts
+++ b/js/src/registerServiceWorker.ts
@@ -1,9 +1,7 @@
-/* eslint-disable no-console */
-
 import { register } from "register-service-worker";
 
-if ("serviceWorker" in navigator && isProduction()) {
-  register(`${process.env.BASE_URL}service-worker.js`, {
+if ("serviceWorker" in navigator && import.meta.env.PROD) {
+  register(`${import.meta.env.BASE_URL}service-worker.js`, {
     ready() {
       console.debug(
         "App is being served from cache by a service worker.\n" +
@@ -34,7 +32,3 @@ if ("serviceWorker" in navigator && isProduction()) {
     },
   });
 }
-
-function isProduction(): boolean {
-  return process.env.NODE_ENV === "production";
-}
diff --git a/js/src/router/actor.ts b/js/src/router/actor.ts
index 6ac74ef98..59bb89a9b 100644
--- a/js/src/router/actor.ts
+++ b/js/src/router/actor.ts
@@ -1,7 +1,8 @@
-import { RouteConfig } from "vue-router";
-import { ImportedComponent } from "vue/types/options";
+import { RouteRecordRaw } from "vue-router";
 import { i18n } from "@/utils/i18n";
 
+const { t } = i18n.global;
+
 export enum ActorRouteName {
   GROUP = "Group",
   CREATE_GROUP = "CreateGroup",
@@ -9,33 +10,30 @@ export enum ActorRouteName {
   MY_GROUPS = "MY_GROUPS",
 }
 
-export const actorRoutes: RouteConfig[] = [
+export const actorRoutes: RouteRecordRaw[] = [
   {
     path: "/groups/create",
     name: ActorRouteName.CREATE_GROUP,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"),
+    component: (): Promise<any> => import("@/views/Group/CreateView.vue"),
     meta: {
       requiredAuth: true,
-      announcer: { message: (): string => i18n.t("Create group") as string },
+      announcer: { message: (): string => t("Create group") as string },
     },
   },
   {
     path: "/@:preferredUsername",
     name: ActorRouteName.GROUP,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"),
+    component: (): Promise<any> => import("@/views/Group/GroupView.vue"),
     props: true,
     meta: { requiredAuth: false, announcer: { skip: true } },
   },
   {
     path: "/groups/me",
     name: ActorRouteName.MY_GROUPS,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"),
+    component: (): Promise<any> => import("@/views/Group/MyGroups.vue"),
     meta: {
       requiredAuth: true,
-      announcer: { message: (): string => i18n.t("My groups") as string },
+      announcer: { message: (): string => t("My groups") as string },
     },
   },
 ];
diff --git a/js/src/router/discussion.ts b/js/src/router/discussion.ts
index ec538e466..d31092888 100644
--- a/js/src/router/discussion.ts
+++ b/js/src/router/discussion.ts
@@ -1,51 +1,45 @@
-import { RouteConfig } from "vue-router";
-import { ImportedComponent } from "vue/types/options";
+import { RouteRecordRaw } from "vue-router";
 import { i18n } from "@/utils/i18n";
 
+const t = i18n.global.t;
+
 export enum DiscussionRouteName {
   DISCUSSION_LIST = "DISCUSSION_LIST",
   CREATE_DISCUSSION = "CREATE_DISCUSSION",
   DISCUSSION = "DISCUSSION",
 }
 
-export const discussionRoutes: RouteConfig[] = [
+export const discussionRoutes: RouteRecordRaw[] = [
   {
     path: "/@:preferredUsername/discussions",
     name: DiscussionRouteName.DISCUSSION_LIST,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"
-      ),
+    component: (): Promise<any> =>
+      import("@/views/Discussions/DiscussionsListView.vue"),
     props: true,
     meta: {
       requiredAuth: true,
       announcer: {
-        message: (): string => i18n.t("Discussions list") as string,
+        message: (): string => t("Discussions list") as string,
       },
     },
   },
   {
     path: "/@:preferredUsername/discussions/new",
     name: DiscussionRouteName.CREATE_DISCUSSION,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"
-      ),
+    component: (): Promise<any> => import("@/views/Discussions/CreateView.vue"),
     props: true,
     meta: {
       requiredAuth: true,
       announcer: {
-        message: (): string => i18n.t("Create discussion") as string,
+        message: (): string => t("Create discussion") as string,
       },
     },
   },
   {
     path: "/@:preferredUsername/c/:slug/:comment_id?",
     name: DiscussionRouteName.DISCUSSION,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"
-      ),
+    component: (): Promise<any> =>
+      import("@/views/Discussions/DiscussionView.vue"),
     props: true,
     meta: { requiredAuth: true, announcer: { skip: true } },
   },
diff --git a/js/src/router/error.ts b/js/src/router/error.ts
index 9f1f563ea..d33973a22 100644
--- a/js/src/router/error.ts
+++ b/js/src/router/error.ts
@@ -1,19 +1,19 @@
-import { RouteConfig } from "vue-router";
-import { ImportedComponent } from "vue/types/options";
+import { RouteRecordRaw } from "vue-router";
 import { i18n } from "@/utils/i18n";
 
+const { t } = i18n.global.t;
+
 export enum ErrorRouteName {
   ERROR = "Error",
 }
 
-export const errorRoutes: RouteConfig[] = [
+export const errorRoutes: RouteRecordRaw[] = [
   {
     path: "/error",
     name: ErrorRouteName.ERROR,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
+    component: (): Promise<any> => import("../views/ErrorView.vue"),
     meta: {
-      announcer: { message: (): string => i18n.t("Error") as string },
+      announcer: { message: (): string => t("Error") },
     },
   },
 ];
diff --git a/js/src/router/event.ts b/js/src/router/event.ts
index 1851b9e0d..c413326a2 100644
--- a/js/src/router/event.ts
+++ b/js/src/router/event.ts
@@ -1,17 +1,12 @@
-import { RouteConfig, Route } from "vue-router";
-import { ImportedComponent } from "vue/types/options";
 import { i18n } from "@/utils/i18n";
+import { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
 
-const participations = (): Promise<ImportedComponent> =>
-  import(
-    /* webpackChunkName: "participations" */ "@/views/Event/Participants.vue"
-  );
-const editEvent = (): Promise<ImportedComponent> =>
-  import(/* webpackChunkName: "edit-event" */ "@/views/Event/Edit.vue");
-const event = (): Promise<ImportedComponent> =>
-  import(/* webpackChunkName: "event" */ "@/views/Event/Event.vue");
-const myEvents = (): Promise<ImportedComponent> =>
-  import(/* webpackChunkName: "my-events" */ "@/views/Event/MyEvents.vue");
+const t = i18n.global.t;
+
+const participations = () => import("@/views/Event/ParticipantsView.vue");
+const editEvent = () => import("@/views/Event/EditView.vue");
+const event = () => import("@/views/Event/EventView.vue");
+const myEvents = () => import("@/views/Event/MyEventsView.vue");
 
 export enum EventRouteName {
   EVENT_LIST = "EventList",
@@ -28,24 +23,14 @@ export enum EventRouteName {
   TAG = "Tag",
 }
 
-export const eventRoutes: RouteConfig[] = [
-  {
-    path: "/events/list/:location?",
-    name: EventRouteName.EVENT_LIST,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"),
-    meta: {
-      requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Event list") as string },
-    },
-  },
+export const eventRoutes: RouteRecordRaw[] = [
   {
     path: "/events/create",
     name: EventRouteName.CREATE_EVENT,
     component: editEvent,
     meta: {
       requiredAuth: true,
-      announcer: { message: (): string => i18n.t("Create event") as string },
+      announcer: { message: (): string => t("Create event") as string },
     },
   },
   {
@@ -55,7 +40,7 @@ export const eventRoutes: RouteConfig[] = [
     props: true,
     meta: {
       requiredAuth: true,
-      announcer: { message: (): string => i18n.t("My events") as string },
+      announcer: { message: (): string => t("My events") as string },
     },
   },
   {
@@ -63,7 +48,7 @@ export const eventRoutes: RouteConfig[] = [
     name: EventRouteName.EDIT_EVENT,
     component: editEvent,
     meta: { requiredAuth: true, announcer: { skip: true } },
-    props: (route: Route): Record<string, unknown> => {
+    props: (route: RouteLocationNormalized): Record<string, unknown> => {
       return { ...route.params, ...{ isUpdate: true } };
     },
   },
@@ -72,7 +57,7 @@ export const eventRoutes: RouteConfig[] = [
     name: EventRouteName.DUPLICATE_EVENT,
     component: editEvent,
     meta: { requiredAuth: true, announce: { skip: true } },
-    props: (route: Route): Record<string, unknown> => ({
+    props: (route: RouteLocationNormalized): Record<string, unknown> => ({
       ...route.params,
       ...{ isDuplicate: true },
     }),
@@ -94,23 +79,23 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/events/:uuid/participate",
     name: EventRouteName.EVENT_PARTICIPATE_LOGGED_OUT,
-    component: (): Promise<ImportedComponent> =>
+    component: () =>
       import("../components/Participation/UnloggedParticipation.vue"),
     props: true,
     meta: {
       announcer: {
-        message: (): string => i18n.t("Unlogged participation") as string,
+        message: (): string => t("Unlogged participation") as string,
       },
     },
   },
   {
     path: "/events/:uuid/participate/with-account",
     name: EventRouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
-    component: (): Promise<ImportedComponent> =>
+    component: () =>
       import("../components/Participation/ParticipationWithAccount.vue"),
     meta: {
       announcer: {
-        message: (): string => i18n.t("Participation with account") as string,
+        message: (): string => t("Participation with account") as string,
       },
     },
     props: true,
@@ -118,12 +103,11 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/events/:uuid/participate/without-account",
     name: EventRouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT,
-    component: (): Promise<ImportedComponent> =>
+    component: () =>
       import("../components/Participation/ParticipationWithoutAccount.vue"),
     meta: {
       announcer: {
-        message: (): string =>
-          i18n.t("Participation without account") as string,
+        message: (): string => t("Participation without account") as string,
       },
     },
     props: true,
@@ -131,11 +115,11 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/participation/email/confirm/:token",
     name: EventRouteName.EVENT_PARTICIPATE_CONFIRM,
-    component: (): Promise<ImportedComponent> =>
+    component: () =>
       import("../components/Participation/ConfirmParticipation.vue"),
     meta: {
       announcer: {
-        message: (): string => i18n.t("Confirm participation") as string,
+        message: (): string => t("Confirm participation") as string,
       },
     },
     props: true,
@@ -143,12 +127,11 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/tag/:tag",
     name: EventRouteName.TAG,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
+    component: () => import("@/views/SearchView.vue"),
     props: true,
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Tag search") as string },
+      announcer: { message: (): string => t("Tag search") as string },
     },
   },
 ];
diff --git a/js/src/router/groups.ts b/js/src/router/groups.ts
index 067b35879..3a7824311 100644
--- a/js/src/router/groups.ts
+++ b/js/src/router/groups.ts
@@ -1,5 +1,4 @@
-import { RouteConfig, Route } from "vue-router";
-import { ImportedComponent } from "vue/types/options";
+import { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
 
 export enum GroupsRouteName {
   TODO_LISTS = "TODO_LISTS",
@@ -22,33 +21,29 @@ export enum GroupsRouteName {
   TIMELINE = "TIMELINE",
 }
 
-const resourceFolder = (): Promise<ImportedComponent> =>
+const resourceFolder = (): Promise<any> =>
   import("@/views/Resources/ResourceFolder.vue");
-const groupEvents = (): Promise<ImportedComponent> =>
-  import(/* webpackChunkName: "groupEvents" */ "@/views/Event/GroupEvents.vue");
+const groupEvents = (): Promise<any> => import("@/views/Event/GroupEvents.vue");
 
-export const groupsRoutes: RouteConfig[] = [
+export const groupsRoutes: RouteRecordRaw[] = [
   {
     path: "/@:preferredUsername/todo-lists",
     name: GroupsRouteName.TODO_LISTS,
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Todos/TodoLists.vue"),
+    component: (): Promise<any> => import("@/views/Todos/TodoLists.vue"),
     props: true,
     meta: { requiredAuth: true, announcer: { skip: true } },
   },
   {
     path: "/todo-lists/:id",
     name: GroupsRouteName.TODO_LIST,
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Todos/TodoList.vue"),
+    component: (): Promise<any> => import("@/views/Todos/TodoList.vue"),
     props: true,
     meta: { requiredAuth: true, announcer: { skip: true } },
   },
   {
     path: "/todo/:todoId",
     name: GroupsRouteName.TODO,
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Todos/Todo.vue"),
+    component: (): Promise<any> => import("@/views/Todos/TodoView.vue"),
     props: true,
     meta: { requiredAuth: true, announcer: { skip: true } },
   },
@@ -56,7 +51,10 @@ export const groupsRoutes: RouteConfig[] = [
     path: "/@:preferredUsername/resources",
     name: GroupsRouteName.RESOURCE_FOLDER_ROOT,
     component: resourceFolder,
-    props: { path: "/" },
+    props: (to) => ({
+      path: "/",
+      preferredUsername: to.params.preferredUsername,
+    }),
     meta: { requiredAuth: true, announcer: { skip: true } },
   },
   {
@@ -68,8 +66,7 @@ export const groupsRoutes: RouteConfig[] = [
   },
   {
     path: "/@:preferredUsername/settings",
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Group/Settings.vue"),
+    component: (): Promise<any> => import("@/views/Group/SettingsView.vue"),
     props: true,
     meta: { requiredAuth: true },
     redirect: { name: GroupsRouteName.GROUP_PUBLIC_SETTINGS },
@@ -78,14 +75,15 @@ export const groupsRoutes: RouteConfig[] = [
       {
         path: "public",
         name: GroupsRouteName.GROUP_PUBLIC_SETTINGS,
-        component: (): Promise<ImportedComponent> =>
+        props: true,
+        component: (): Promise<any> =>
           import("../views/Group/GroupSettings.vue"),
         meta: { announcer: { skip: true } },
       },
       {
         path: "members",
         name: GroupsRouteName.GROUP_MEMBERS_SETTINGS,
-        component: (): Promise<ImportedComponent> =>
+        component: (): Promise<any> =>
           import("../views/Group/GroupMembers.vue"),
         props: true,
         meta: { announcer: { skip: true } },
@@ -93,7 +91,7 @@ export const groupsRoutes: RouteConfig[] = [
       {
         path: "followers",
         name: GroupsRouteName.GROUP_FOLLOWERS_SETTINGS,
-        component: (): Promise<ImportedComponent> =>
+        component: (): Promise<any> =>
           import("../views/Group/GroupFollowers.vue"),
         props: true,
         meta: { announcer: { skip: true } },
@@ -102,17 +100,15 @@ export const groupsRoutes: RouteConfig[] = [
   },
   {
     path: "/@:preferredUsername/p/new",
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Posts/Edit.vue"),
+    component: (): Promise<any> => import("@/views/Posts/EditView.vue"),
     props: true,
     name: GroupsRouteName.POST_CREATE,
     meta: { requiredAuth: true, announcer: { skip: true } },
   },
   {
     path: "/p/:slug/edit",
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Posts/Edit.vue"),
-    props: (route: Route): Record<string, unknown> => ({
+    component: (): Promise<any> => import("@/views/Posts/EditView.vue"),
+    props: (route: RouteLocationNormalized): Record<string, unknown> => ({
       ...route.params,
       ...{ isUpdate: true },
     }),
@@ -121,16 +117,14 @@ export const groupsRoutes: RouteConfig[] = [
   },
   {
     path: "/p/:slug",
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Posts/Post.vue"),
+    component: (): Promise<any> => import("@/views/Posts/PostView.vue"),
     props: true,
     name: GroupsRouteName.POST,
     meta: { requiredAuth: false, announcer: { skip: true } },
   },
   {
     path: "/@:preferredUsername/p",
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Posts/List.vue"),
+    component: (): Promise<any> => import("@/views/Posts/ListView.vue"),
     props: true,
     name: GroupsRouteName.POSTS,
     meta: { requiredAuth: false, announcer: { skip: true } },
@@ -144,7 +138,7 @@ export const groupsRoutes: RouteConfig[] = [
   },
   {
     path: "/@:preferredUsername/join",
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import("@/components/Group/JoinGroupWithAccount.vue"),
     props: true,
     name: GroupsRouteName.GROUP_JOIN,
@@ -152,7 +146,7 @@ export const groupsRoutes: RouteConfig[] = [
   },
   {
     path: "/@:preferredUsername/follow",
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import("@/components/Group/JoinGroupWithAccount.vue"),
     props: true,
     name: GroupsRouteName.GROUP_FOLLOW,
@@ -161,8 +155,7 @@ export const groupsRoutes: RouteConfig[] = [
   {
     path: "/@:preferredUsername/timeline",
     name: GroupsRouteName.TIMELINE,
-    component: (): Promise<ImportedComponent> =>
-      import("@/views/Group/Timeline.vue"),
+    component: (): Promise<any> => import("@/views/Group/TimelineView.vue"),
     props: true,
     meta: { requiredAuth: true, announcer: { skip: true } },
   },
diff --git a/js/src/router/guards/register-guard.ts b/js/src/router/guards/register-guard.ts
index ac9ec65d4..9cde41b92 100644
--- a/js/src/router/guards/register-guard.ts
+++ b/js/src/router/guards/register-guard.ts
@@ -1,22 +1,32 @@
+import { IConfig } from "@/types/config.model";
 import { ErrorCode } from "@/types/enums";
+import { provideApolloClient, useQuery } from "@vue/apollo-composable";
 import { NavigationGuard } from "vue-router";
 import { CONFIG } from "../../graphql/config";
-import apolloProvider from "../../vue-apollo";
+import { apolloClient } from "../../vue-apollo";
 import { ErrorRouteName } from "../error";
 
 export const beforeRegisterGuard: NavigationGuard = async (to, from, next) => {
-  const { data } = await apolloProvider.defaultClient.query({
-    query: CONFIG,
+  const { onResult, onError } = provideApolloClient(apolloClient)(() =>
+    useQuery<{ config: IConfig }>(CONFIG)
+  );
+
+  onResult(({ data }) => {
+    const { config } = data;
+
+    if (!config.registrationsOpen && !config.registrationsAllowlist) {
+      return next({
+        name: ErrorRouteName.ERROR,
+        query: { code: ErrorCode.REGISTRATION_CLOSED },
+      });
+    }
+
+    return next();
   });
 
-  const { config } = data;
-
-  if (!config.registrationsOpen && !config.registrationsAllowlist) {
-    return next({
-      name: ErrorRouteName.ERROR,
-      query: { code: ErrorCode.REGISTRATION_CLOSED },
-    });
-  }
-
+  onError((err) => {
+    console.error(err);
+    return next();
+  });
   return next();
 };
diff --git a/js/src/router/index.ts b/js/src/router/index.ts
index 14f880edc..579999522 100644
--- a/js/src/router/index.ts
+++ b/js/src/router/index.ts
@@ -1,9 +1,6 @@
-import Vue from "vue";
-import Router, { Route } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import VueScrollTo from "vue-scrollto";
-import { PositionResult } from "vue-router/types/router.d";
-import { ImportedComponent } from "vue/types/options";
-import Home from "../views/Home.vue";
+import HomeView from "../views/HomeView.vue";
 import { eventRoutes } from "./event";
 import { actorRoutes } from "./actor";
 import { errorRoutes } from "./error";
@@ -15,25 +12,21 @@ import { userRoutes } from "./user";
 import RouteName from "./name";
 import { AVAILABLE_LANGUAGES, i18n } from "@/utils/i18n";
 
-Vue.use(Router);
+const { t } = i18n.global;
 
-function scrollBehavior(
-  to: Route,
-  from: Route,
-  savedPosition: any
-): PositionResult | undefined | null {
+function scrollBehavior(to: any, from: any, savedPosition: any) {
   if (to.hash) {
     VueScrollTo.scrollTo(to.hash, 700);
     return {
       selector: to.hash,
-      offset: { x: 0, y: 10 },
+      offset: { left: 0, top: 10 },
     };
   }
   if (savedPosition) {
     return savedPosition;
   }
 
-  return { x: 0, y: 0 };
+  return { left: 0, top: 0 };
 }
 
 export const routes = [
@@ -47,84 +40,83 @@ export const routes = [
   {
     path: "/search",
     name: RouteName.SEARCH,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
+    component: (): Promise<any> => import("@/views/SearchView.vue"),
     props: true,
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Search") as string },
+      announcer: { message: (): string => t("Search") as string },
     },
   },
   {
     path: "/",
     name: RouteName.HOME,
-    component: Home,
+    component: HomeView,
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Homepage") as string },
+      announcer: { message: (): string => t("Homepage") as string },
+    },
+  },
+  {
+    path: "/categories",
+    name: RouteName.CATEGORIES,
+    component: (): Promise<any> => import("@/views/CategoriesView.vue"),
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => t("Categories") as string },
     },
   },
   {
     path: "/about",
     name: RouteName.ABOUT,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "about" */ "@/views/About.vue"),
+    component: (): Promise<any> => import("@/views/AboutView.vue"),
     meta: { requiredAuth: false },
     redirect: { name: RouteName.ABOUT_INSTANCE },
     children: [
       {
         path: "instance",
         name: RouteName.ABOUT_INSTANCE,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/About/AboutInstanceView.vue"),
         meta: {
           announcer: {
-            message: (): string => i18n.t("About instance") as string,
+            message: (): string => t("About instance") as string,
           },
         },
       },
       {
         path: "/terms",
         name: RouteName.TERMS,
-        component: (): Promise<ImportedComponent> =>
-          import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
+        component: (): Promise<any> => import("@/views/About/TermsView.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Terms") as string },
+          announcer: { message: (): string => t("Terms") as string },
         },
       },
       {
         path: "/privacy",
         name: RouteName.PRIVACY,
-        component: (): Promise<ImportedComponent> =>
-          import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"),
+        component: (): Promise<any> => import("@/views/About/PrivacyView.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Privacy") as string },
+          announcer: { message: (): string => t("Privacy") as string },
         },
       },
       {
         path: "/rules",
         name: RouteName.RULES,
-        component: (): Promise<ImportedComponent> =>
-          import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
+        component: (): Promise<any> => import("@/views/About/RulesView.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Rules") as string },
+          announcer: { message: (): string => t("Rules") as string },
         },
       },
       {
         path: "/glossary",
         name: RouteName.GLOSSARY,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
-          ),
+        component: (): Promise<any> => import("@/views/About/GlossaryView.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Glossary") as string },
+          announcer: { message: (): string => t("Glossary") as string },
         },
       },
     ],
@@ -132,38 +124,37 @@ export const routes = [
   {
     path: "/interact",
     name: RouteName.INTERACT,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "interact" */ "@/views/Interact.vue"),
+    component: (): Promise<any> => import("@/views/InteractView.vue"),
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Interact") as string },
+      announcer: { message: (): string => t("Interact") as string },
     },
   },
   {
     path: "/auth/:provider/callback",
     name: "auth-callback",
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import(
         /* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
       ),
     meta: {
       announcer: {
-        message: (): string => i18n.t("Redirecting to Mobilizon") as string,
+        message: (): string => t("Redirecting to Mobilizon") as string,
       },
     },
   },
   {
     path: "/welcome/:step?",
     name: RouteName.WELCOME_SCREEN,
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import(
         /* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
       ),
     meta: {
       requiredAuth: true,
-      announcer: { message: (): string => i18n.t("First steps") as string },
+      announcer: { message: (): string => t("First steps") as string },
     },
-    props: (route: Route): Record<string, unknown> => {
+    props: (route: any): Record<string, unknown> => {
       const step = Number.parseInt(route.params.step, 10);
       if (Number.isNaN(step)) {
         return { step: 1 };
@@ -174,13 +165,13 @@ export const routes = [
   {
     path: "/404",
     name: RouteName.PAGE_NOT_FOUND,
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import(
         /* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue"
       ),
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Page not found") as string },
+      announcer: { message: (): string => t("Page not found") as string },
     },
   },
 ];
@@ -188,36 +179,31 @@ export const routes = [
 for (const locale of AVAILABLE_LANGUAGES) {
   routes.push({
     path: `/${locale}`,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "HomepageRedirectComponent" */ "../components/Utils/HomepageRedirectComponent.vue"
-      ),
+    component: () =>
+      import("../components/Utils/HomepageRedirectComponent.vue"),
   });
 }
 
 routes.push({
-  path: "*",
+  path: "/:pathMatch(.*)*",
   redirect: { name: RouteName.PAGE_NOT_FOUND },
 });
 
-const router = new Router({
+export const router = createRouter({
   scrollBehavior,
-  mode: "history",
-  base: "/",
+  history: createWebHistory("/"),
   routes,
 });
 
 router.beforeEach(authGuardIfNeeded);
-router.afterEach(() => {
-  try {
-    if (router.app.$children[0]) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      router.app.$children[0].error = null;
-    }
-  } catch (e) {
-    console.error(e);
-  }
-});
-
-export default router;
+// router.afterEach(() => {
+//   try {
+//     if (router.app.$children[0]) {
+//       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//       // @ts-ignore
+//       router.app.$children[0].error = null;
+//     }
+//   } catch (e) {
+//     console.error(e);
+//   }
+// });
diff --git a/js/src/router/name.ts b/js/src/router/name.ts
index 37c3f8c6e..5c3de3422 100644
--- a/js/src/router/name.ts
+++ b/js/src/router/name.ts
@@ -7,11 +7,12 @@ import { DiscussionRouteName } from "./discussion";
 import { UserRouteName } from "./user";
 
 enum GlobalRouteName {
-  HOME = "Home",
-  ABOUT = "About",
+  HOME = "HOME",
+  ABOUT = "ABOUT",
+  CATEGORIES = "CATEGORIES",
   ABOUT_INSTANCE = "ABOUT_INSTANCE",
   PAGE_NOT_FOUND = "PageNotFound",
-  SEARCH = "Search",
+  SEARCH = "SEARCH",
   TERMS = "TERMS",
   PRIVACY = "PRIVACY",
   GLOSSARY = "GLOSSARY",
diff --git a/js/src/router/settings.ts b/js/src/router/settings.ts
index c71730ba0..8e49755e2 100644
--- a/js/src/router/settings.ts
+++ b/js/src/router/settings.ts
@@ -1,6 +1,7 @@
-import { Route, RouteConfig } from "vue-router";
-import { ImportedComponent } from "vue/types/options";
 import { i18n } from "@/utils/i18n";
+import { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
+
+const { t } = i18n.global;
 
 export enum SettingsRouteName {
   SETTINGS = "SETTINGS",
@@ -28,11 +29,10 @@ export enum SettingsRouteName {
   IDENTITIES = "IDENTITIES",
 }
 
-export const settingsRoutes: RouteConfig[] = [
+export const settingsRoutes: RouteRecordRaw[] = [
   {
     path: "/settings",
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"),
+    component: () => import("@/views/SettingsView.vue"),
     props: true,
     meta: { requiredAuth: true, announcer: { skip: true } },
     redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS },
@@ -50,43 +50,37 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "account/general",
         name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Settings/AccountSettings.vue"),
         props: true,
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Account settings") as string,
+            message: (): string => t("Account settings") as string,
           },
         },
       },
       {
         path: "preferences",
         name: SettingsRouteName.PREFERENCES,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Settings/PreferencesView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
-          announcer: { message: (): string => i18n.t("Preferences") as string },
+          announcer: { message: (): string => t("Preferences") as string },
         },
       },
       {
         path: "notifications",
         name: SettingsRouteName.NOTIFICATIONS,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Settings/NotificationsView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Notifications") as string,
+            message: (): string => t("Notifications") as string,
           },
         },
       },
@@ -99,50 +93,42 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "admin/dashboard",
         name: SettingsRouteName.ADMIN_DASHBOARD,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Admin/DashboardView.vue"),
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Admin dashboard") as string,
+            message: (): string => t("Admin dashboard") as string,
           },
         },
       },
       {
         path: "admin/settings",
         name: SettingsRouteName.ADMIN_SETTINGS,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"
-          ),
+        component: (): Promise<any> => import("@/views/Admin/SettingsView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Admin settings") as string,
+            message: (): string => t("Admin settings") as string,
           },
         },
       },
       {
         path: "admin/users",
         name: SettingsRouteName.USERS,
-        component: (): Promise<ImportedComponent> =>
-          import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"),
+        component: (): Promise<any> => import("@/views/Admin/UsersView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
-          announcer: { message: (): string => i18n.t("Users") as string },
+          announcer: { message: (): string => t("Users") as string },
         },
       },
       {
         path: "admin/users/:id",
         name: SettingsRouteName.ADMIN_USER_PROFILE,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Admin/AdminUserProfile.vue"),
         props: true,
         meta: {
           requiredAuth: true,
@@ -152,62 +138,50 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "admin/profiles",
         name: SettingsRouteName.PROFILES,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"
-          ),
+        component: (): Promise<any> => import("@/views/Admin/ProfilesView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
-          announcer: { message: (): string => i18n.t("Profiles") as string },
+          announcer: { message: (): string => t("Profiles") as string },
         },
       },
       {
         path: "admin/profiles/:id",
         name: SettingsRouteName.ADMIN_PROFILE,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"
-          ),
+        component: (): Promise<any> => import("@/views/Admin/AdminProfile.vue"),
         props: true,
         meta: { requiredAuth: true, announcer: { skip: true } },
       },
       {
         path: "admin/groups",
         name: SettingsRouteName.ADMIN_GROUPS,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Admin/GroupProfiles.vue"),
         props: true,
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Group profiles") as string,
+            message: (): string => t("Group profiles") as string,
           },
         },
       },
       {
         path: "admin/groups/:id",
         name: SettingsRouteName.ADMIN_GROUP_PROFILE,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Admin/AdminGroupProfile.vue"),
         props: true,
         meta: { requiredAuth: true, announcer: { skip: true } },
       },
       {
         path: "admin/instances",
         name: SettingsRouteName.INSTANCES,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "Instances" */ "@/views/Admin/Instances.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Admin/InstancesView.vue"),
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Instances") as string,
+            message: (): string => t("Instances") as string,
           },
         },
         props: true,
@@ -215,15 +189,12 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "admin/instances/:domain",
         name: SettingsRouteName.INSTANCE,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "Instance" */ "@/views/Admin/Instance.vue"
-          ),
+        component: (): Promise<any> => import("@/views/Admin/InstanceView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Instance") as string,
+            message: (): string => t("Instance") as string,
           },
         },
       },
@@ -236,43 +207,37 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "/moderation/reports",
         name: SettingsRouteName.REPORTS,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Moderation/ReportListView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Reports list") as string,
+            message: (): string => t("Reports list") as string,
           },
         },
       },
       {
         path: "/moderation/report/:reportId",
         name: SettingsRouteName.REPORT,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Moderation/ReportView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
-          announcer: { message: (): string => i18n.t("Report") as string },
+          announcer: { message: (): string => t("Report") as string },
         },
       },
       {
         path: "/moderation/logs",
         name: SettingsRouteName.REPORT_LOGS,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/Moderation/LogsView.vue"),
         props: true,
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Moderation logs") as string,
+            message: (): string => t("Moderation logs") as string,
           },
         },
       },
@@ -285,29 +250,25 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "/identity/create",
         name: SettingsRouteName.CREATE_IDENTITY,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
-          ),
-        props: (route: Route): Record<string, unknown> => ({
+        component: (): Promise<any> =>
+          import("@/views/Account/children/EditIdentity.vue"),
+        props: (route: RouteLocationNormalized): Record<string, unknown> => ({
           identityName: route.params.identityName,
           isUpdate: false,
         }),
         meta: {
           requiredAuth: true,
           announcer: {
-            message: (): string => i18n.t("Create identity") as string,
+            message: (): string => t("Create identity") as string,
           },
         },
       },
       {
         path: "/identity/update/:identityName?",
         name: SettingsRouteName.UPDATE_IDENTITY,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
-          ),
-        props: (route: Route): Record<string, unknown> => ({
+        component: (): Promise<any> =>
+          import("@/views/Account/children/EditIdentity.vue"),
+        props: (route: RouteLocationNormalized): Record<string, unknown> => ({
           identityName: route.params.identityName,
           isUpdate: true,
         }),
diff --git a/js/src/router/user.ts b/js/src/router/user.ts
index 2089df9a7..978cb9c83 100644
--- a/js/src/router/user.ts
+++ b/js/src/router/user.ts
@@ -1,8 +1,9 @@
 import { beforeRegisterGuard } from "@/router/guards/register-guard";
-import { Route, RouteConfig } from "vue-router";
-import { ImportedComponent } from "vue/types/options";
+import { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
 import { i18n } from "@/utils/i18n";
 
+const t = i18n.global.t;
+
 export enum UserRouteName {
   REGISTER = "Register",
   REGISTER_PROFILE = "RegisterProfile",
@@ -14,116 +15,97 @@ export enum UserRouteName {
   LOGIN = "Login",
 }
 
-export const userRoutes: RouteConfig[] = [
+export const userRoutes: RouteRecordRaw[] = [
   {
     path: "/register/user",
     name: UserRouteName.REGISTER,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"
-      ),
+    component: (): Promise<any> => import("@/views/User/RegisterView.vue"),
     props: true,
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Register") as string },
+      announcer: { message: (): string => t("Register") as string },
     },
     beforeEnter: beforeRegisterGuard,
   },
   {
     path: "/register/profile",
     name: UserRouteName.REGISTER_PROFILE,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "RegisterProfile" */ "@/views/Account/Register.vue"
-      ),
+    component: (): Promise<any> => import("@/views/Account/RegisterView.vue"),
     // We can only pass string values through params, therefore
-    props: (route: Route): Record<string, unknown> => ({
+    props: (route: RouteLocationNormalized): Record<string, unknown> => ({
       email: route.params.email,
       userAlreadyActivated: route.params.userAlreadyActivated === "true",
     }),
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Register") as string },
+      announcer: { message: (): string => t("Register") as string },
     },
   },
   {
     path: "/resend-instructions",
     name: UserRouteName.RESEND_CONFIRMATION,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"
-      ),
+    component: (): Promise<any> =>
+      import("@/views/User/ResendConfirmation.vue"),
     props: true,
     meta: {
       requiresAuth: false,
       announcer: {
-        message: (): string => i18n.t("Resent confirmation email") as string,
+        message: (): string => t("Resent confirmation email") as string,
       },
     },
   },
   {
     path: "/password-reset/send",
     name: UserRouteName.SEND_PASSWORD_RESET,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"
-      ),
+    component: (): Promise<any> => import("@/views/User/SendPasswordReset.vue"),
     props: true,
     meta: {
       requiresAuth: false,
       announcer: {
-        message: (): string => i18n.t("Send password reset") as string,
+        message: (): string => t("Send password reset") as string,
       },
     },
   },
   {
     path: "/password-reset/:token",
     name: UserRouteName.PASSWORD_RESET,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"
-      ),
+    component: (): Promise<any> => import("@/views/User/PasswordReset.vue"),
     meta: {
       requiresAuth: false,
-      announcer: { message: (): string => i18n.t("Password reset") as string },
+      announcer: { message: (): string => t("Password reset") as string },
     },
     props: true,
   },
   {
     path: "/validate/email/:token",
     name: UserRouteName.EMAIL_VALIDATE,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"
-      ),
+    component: (): Promise<any> => import("@/views/User/EmailValidate.vue"),
     props: true,
     meta: {
       requiresAuth: false,
-      announcer: { message: (): string => i18n.t("Email validate") as string },
+      announcer: { message: (): string => t("Email validate") as string },
     },
   },
   {
     path: "/validate/:token",
     name: UserRouteName.VALIDATE,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"),
+    component: (): Promise<any> => import("@/views/User/ValidateUser.vue"),
     props: true,
     meta: {
       requiresAuth: false,
       announcer: {
-        message: (): string => i18n.t("Validating account") as string,
+        message: (): string => t("Validating account") as string,
       },
     },
   },
   {
     path: "/login",
     name: UserRouteName.LOGIN,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"),
+    component: (): Promise<any> => import("@/views/User/LoginView.vue"),
     props: true,
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Login") as string },
+      announcer: { message: (): string => t("Login") as string },
     },
   },
 ];
diff --git a/js/src/service-worker.ts b/js/src/service-worker.ts
index af230659d..c7aee7a22 100644
--- a/js/src/service-worker.ts
+++ b/js/src/service-worker.ts
@@ -104,7 +104,7 @@ async function isClientFocused(): Promise<boolean> {
 self.addEventListener("push", async (event: PushEvent) => {
   if (!event.data) return;
   const payload = event.data.json();
-  console.log("received push", payload);
+  console.debug("received push", payload);
   const options = {
     body: payload.body,
     icon: "/img/icons/android-chrome-512x512.png",
@@ -157,7 +157,7 @@ self.addEventListener("message", (event: ExtendableMessageEvent) => {
   const replyPort = event.ports[0];
   const message = event.data;
   if (replyPort && message && message.type === "skip-waiting") {
-    console.log("doing skip waiting");
+    console.debug("doing skip waiting");
     event.waitUntil(
       self.skipWaiting().then(
         () => replyPort.postMessage({ error: null }),
diff --git a/js/src/services/AnonymousParticipationStorage.ts b/js/src/services/AnonymousParticipationStorage.ts
index ab03f3a68..53a49d482 100644
--- a/js/src/services/AnonymousParticipationStorage.ts
+++ b/js/src/services/AnonymousParticipationStorage.ts
@@ -73,7 +73,7 @@ function insertLocalAnonymousParticipation(
 }
 
 function buildExpiration(event: IEvent): Date {
-  const expiration = event.endsOn || event.beginsOn;
+  const expiration = new Date(event.endsOn ?? event.beginsOn);
   expiration.setMonth(expiration.getMonth() + 1);
   return expiration;
 }
diff --git a/js/src/services/EventMetadata.ts b/js/src/services/EventMetadata.ts
index efe6f0ae5..53ab340d6 100644
--- a/js/src/services/EventMetadata.ts
+++ b/js/src/services/EventMetadata.ts
@@ -6,63 +6,61 @@ import {
 import { IEventMetadataDescription } from "@/types/event-metadata";
 import { i18n } from "@/utils/i18n";
 
+const t = i18n.global.t;
+
 export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "wheelchair-accessibility",
     key: "mz:accessibility:wheelchairAccessible",
-    label: i18n.t("Wheelchair accessibility") as string,
-    description: i18n.t(
+    label: t("Wheelchair accessibility") as string,
+    description: t(
       "Whether the event is accessible with a wheelchair"
     ) as string,
     value: "no",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.CHOICE,
     choices: {
-      no: i18n.t("Not accessible with a wheelchair") as string,
-      partially: i18n.t("Partially accessible with a wheelchair") as string,
-      fully: i18n.t("Fully accessible with a wheelchair") as string,
+      no: t("Not accessible with a wheelchair") as string,
+      partially: t("Partially accessible with a wheelchair") as string,
+      fully: t("Fully accessible with a wheelchair") as string,
     },
     category: EventMetadataCategories.ACCESSIBILITY,
   },
   {
     icon: "subtitles",
     key: "mz:accessibility:live:subtitle",
-    label: i18n.t("Subtitles") as string,
-    description: i18n.t("Whether the event live video is subtitled") as string,
+    label: t("Subtitles") as string,
+    description: t("Whether the event live video is subtitled") as string,
     value: "false",
     type: EventMetadataType.BOOLEAN,
     keyType: EventMetadataKeyType.PLAIN,
     choices: {
-      true: i18n.t("The event live video contains subtitles") as string,
-      false: i18n.t(
-        "The event live video does not contain subtitles"
-      ) as string,
+      true: t("The event live video contains subtitles") as string,
+      false: t("The event live video does not contain subtitles") as string,
     },
     category: EventMetadataCategories.ACCESSIBILITY,
   },
   {
     icon: "mz:icon:sign_language",
     key: "mz:accessibility:live:sign_language",
-    label: i18n.t("Sign Language") as string,
-    description: i18n.t(
+    label: t("Sign Language") as string,
+    description: t(
       "Whether the event is interpreted in sign language"
     ) as string,
     value: "false",
     type: EventMetadataType.BOOLEAN,
     keyType: EventMetadataKeyType.PLAIN,
     choices: {
-      true: i18n.t("The event has a sign language interpreter") as string,
-      false: i18n.t(
-        "The event hasn't got a sign language interpreter"
-      ) as string,
+      true: t("The event has a sign language interpreter") as string,
+      false: t("The event hasn't got a sign language interpreter") as string,
     },
     category: EventMetadataCategories.ACCESSIBILITY,
   },
   {
     icon: "youtube",
     key: "mz:replay:youtube:url",
-    label: i18n.t("YouTube replay") as string,
-    description: i18n.t(
+    label: t("YouTube replay") as string,
+    description: t(
       "The URL where the event live can be watched again after it has ended"
     ) as string,
     value: "",
@@ -75,8 +73,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   // {
   //   icon: "twitch",
   //   key: "mz:replay:twitch:url",
-  //   label: i18n.t("Twitch replay") as string,
-  //   description: i18n.t(
+  //   label: t("Twitch replay") as string,
+  //   description: t(
   //     "The URL where the event live can be watched again after it has ended"
   //   ) as string,
   //   value: "",
@@ -85,8 +83,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "mz:icon:peertube",
     key: "mz:replay:peertube:url",
-    label: i18n.t("PeerTube replay") as string,
-    description: i18n.t(
+    label: t("PeerTube replay") as string,
+    description: t(
       "The URL where the event live can be watched again after it has ended"
     ) as string,
     value: "",
@@ -98,10 +96,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "mz:icon:peertube",
     key: "mz:live:peertube:url",
-    label: i18n.t("PeerTube live") as string,
-    description: i18n.t(
-      "The URL where the event can be watched live"
-    ) as string,
+    label: t("PeerTube live") as string,
+    description: t("The URL where the event can be watched live") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -111,10 +107,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "twitch",
     key: "mz:live:twitch:url",
-    label: i18n.t("Twitch live") as string,
-    description: i18n.t(
-      "The URL where the event can be watched live"
-    ) as string,
+    label: t("Twitch live") as string,
+    description: t("The URL where the event can be watched live") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -125,10 +119,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "youtube",
     key: "mz:live:youtube:url",
-    label: i18n.t("YouTube live") as string,
-    description: i18n.t(
-      "The URL where the event can be watched live"
-    ) as string,
+    label: t("YouTube live") as string,
+    description: t("The URL where the event can be watched live") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -139,10 +131,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "mz:icon:owncast",
     key: "mz:live:owncast:url",
-    label: i18n.t("Owncast") as string,
-    description: i18n.t(
-      "The URL where the event can be watched live"
-    ) as string,
+    label: t("Owncast") as string,
+    description: t("The URL where the event can be watched live") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -152,8 +142,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "calendar-check",
     key: "mz:poll:framadate:url",
-    label: i18n.t("Framadate poll") as string,
-    description: i18n.t(
+    label: t("Framadate poll") as string,
+    description: t(
       "The URL of a poll where the choice for the event date is happening"
     ) as string,
     value: "",
@@ -165,12 +155,12 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "file-document-edit",
     key: "mz:notes:etherpad:url",
-    label: i18n.t("Etherpad notes") as string,
-    description: i18n.t(
+    label: t("Etherpad notes") as string,
+    description: t(
       "The URL of a pad where notes are being taken collaboratively"
     ) as string,
     value: "",
-    placeholder: i18n.t(
+    placeholder: t(
       "https://mensuel.framapad.org/p/some-secret-token"
     ) as string,
     type: EventMetadataType.STRING,
@@ -180,8 +170,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "twitter",
     key: "mz:social:twitter:account",
-    label: i18n.t("Twitter account") as string,
-    description: i18n.t(
+    label: t("Twitter account") as string,
+    description: t(
       "A twitter account handle to follow for event updates"
     ) as string,
     value: "",
@@ -193,8 +183,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "mz:icon:fediverse",
     key: "mz:social:fediverse:account_url",
-    label: i18n.t("Fediverse account") as string,
-    description: i18n.t(
+    label: t("Fediverse account") as string,
+    description: t(
       "A fediverse account URL to follow for event updates"
     ) as string,
     value: "",
@@ -206,8 +196,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "ticket-confirmation",
     key: "mz:ticket:external_url",
-    label: i18n.t("Online ticketing") as string,
-    description: i18n.t("An URL to an external ticketing platform") as string,
+    label: t("Online ticketing") as string,
+    description: t("An URL to an external ticketing platform") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -216,10 +206,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "cash",
     key: "mz:ticket:price_url",
-    label: i18n.t("Price sheet") as string,
-    description: i18n.t(
-      "A link to a page presenting the price options"
-    ) as string,
+    label: t("Price sheet") as string,
+    description: t("A link to a page presenting the price options") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -228,10 +216,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "calendar-text",
     key: "mz:schedule_url",
-    label: i18n.t("Schedule") as string,
-    description: i18n.t(
-      "A link to a page presenting the event schedule"
-    ) as string,
+    label: t("Schedule") as string,
+    description: t("A link to a page presenting the event schedule") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -240,8 +226,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "webcam",
     key: "mz:visio:jitsi_meet",
-    label: i18n.t("Jitsi Meet") as string,
-    description: i18n.t("The Jitsi Meet video teleconference URL") as string,
+    label: t("Jitsi Meet") as string,
+    description: t("The Jitsi Meet video teleconference URL") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -251,8 +237,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "webcam",
     key: "mz:visio:zoom",
-    label: i18n.t("Zoom") as string,
-    description: i18n.t("The Zoom video teleconference URL") as string,
+    label: t("Zoom") as string,
+    description: t("The Zoom video teleconference URL") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -262,10 +248,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "microsoft-teams",
     key: "mz:visio:microsoft_teams",
-    label: i18n.t("Microsoft Teams") as string,
-    description: i18n.t(
-      "The Microsoft Teams video teleconference URL"
-    ) as string,
+    label: t("Microsoft Teams") as string,
+    description: t("The Microsoft Teams video teleconference URL") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -275,8 +259,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "google-hangouts",
     key: "mz:visio:google_meet",
-    label: i18n.t("Google Meet") as string,
-    description: i18n.t("The Google Meet video teleconference URL") as string,
+    label: t("Google Meet") as string,
+    description: t("The Google Meet video teleconference URL") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
@@ -286,10 +270,8 @@ export const eventMetaDataList: IEventMetadataDescription[] = [
   {
     icon: "webcam",
     key: "mz:visio:big_blue_button",
-    label: i18n.t("Big Blue Button") as string,
-    description: i18n.t(
-      "The Big Blue Button video teleconference URL"
-    ) as string,
+    label: t("Big Blue Button") as string,
+    description: t("The Big Blue Button video teleconference URL") as string,
     value: "",
     type: EventMetadataType.STRING,
     keyType: EventMetadataKeyType.URL,
diff --git a/js/src/services/push-subscription.ts b/js/src/services/push-subscription.ts
index ef4734b6a..0abb0d3c4 100644
--- a/js/src/services/push-subscription.ts
+++ b/js/src/services/push-subscription.ts
@@ -1,6 +1,5 @@
-import apolloProvider from "@/vue-apollo";
-import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
-import { ApolloClient } from "@apollo/client/core/ApolloClient";
+import { apolloClient } from "@/vue-apollo";
+import { provideApolloClient, useQuery } from "@vue/apollo-composable";
 import { WEB_PUSH } from "../graphql/config";
 import { IConfig } from "../types/config.model";
 
@@ -18,44 +17,45 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
 }
 
 export async function subscribeUserToPush(): Promise<PushSubscription | null> {
-  const client =
-    apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
+  const { onResult } = provideApolloClient(apolloClient)(() =>
+    useQuery<{ config: IConfig }>(WEB_PUSH)
+  );
 
-  const registration = await navigator.serviceWorker.ready;
-  const { data } = await client.query<{ config: IConfig }>({
-    query: WEB_PUSH,
+  return new Promise((resolve, reject) => {
+    onResult(async ({ data }) => {
+      if (data?.config?.webPush?.enabled && data?.config?.webPush?.publicKey) {
+        const subscribeOptions = {
+          userVisibleOnly: true,
+          applicationServerKey: urlBase64ToUint8Array(
+            data?.config?.webPush?.publicKey
+          ),
+        };
+        const registration = await navigator.serviceWorker.ready;
+        try {
+          const pushSubscription = await registration.pushManager.subscribe(
+            subscribeOptions
+          );
+          console.debug("Received PushSubscription: ", pushSubscription);
+          resolve(pushSubscription);
+        } catch (e) {
+          console.error("Error while subscribing to push notifications", e);
+        }
+      }
+      reject(null);
+    });
   });
-
-  if (data?.config?.webPush?.enabled && data?.config?.webPush?.publicKey) {
-    const subscribeOptions = {
-      userVisibleOnly: true,
-      applicationServerKey: urlBase64ToUint8Array(
-        data?.config?.webPush?.publicKey
-      ),
-    };
-    try {
-      const pushSubscription = await registration.pushManager.subscribe(
-        subscribeOptions
-      );
-      console.debug("Received PushSubscription: ", pushSubscription);
-      return pushSubscription;
-    } catch (e) {
-      console.error("Error while subscribing to push notifications", e);
-    }
-  }
-  return null;
 }
 
 export async function unsubscribeUserToPush(): Promise<string | undefined> {
-  console.log("performing unsubscribeUserToPush");
+  console.debug("performing unsubscribeUserToPush");
   const registration = await navigator.serviceWorker.ready;
-  console.log("found registration", registration);
+  console.debug("found registration", registration);
   const subscription = await registration.pushManager?.getSubscription();
-  console.log("found subscription", subscription);
+  console.debug("found subscription", subscription);
   if (subscription && (await subscription?.unsubscribe()) === true) {
-    console.log("done unsubscription");
+    console.debug("done unsubscription");
     return subscription?.endpoint;
   }
-  console.log("went wrong");
+  console.debug("went wrong");
   return undefined;
 }
diff --git a/js/src/services/statistics/index.ts b/js/src/services/statistics/index.ts
index c7e3a1db0..b4c051ccd 100644
--- a/js/src/services/statistics/index.ts
+++ b/js/src/services/statistics/index.ts
@@ -1,29 +1,34 @@
-import {
-  IAnalyticsConfig,
-  IConfig,
-  IKeyValueConfig,
-} from "@/types/config.model";
+import { IAnalyticsConfig, IKeyValueConfig } from "@/types/config.model";
 
-export const statistics = async (config: IConfig, environement: any) => {
-  console.debug("Loading statistics", config.analytics);
-  const matomoConfig = checkProviderConfig(config, "matomo");
+let app: any = null;
+
+export const setAppForAnalytics = (newApp: any) => {
+  app = newApp;
+};
+
+export const statistics = async (
+  configAnalytics: IAnalyticsConfig[],
+  environement: any
+) => {
+  console.debug("Loading statistics", configAnalytics);
+  const matomoConfig = checkProviderConfig(configAnalytics, "matomo");
   if (matomoConfig?.enabled === true) {
     const { matomo } = (await import("./matomo")) as any;
-    matomo(environement, convertConfig(matomoConfig.configuration));
+    matomo({ ...environement, app }, convertConfig(matomoConfig.configuration));
   }
 
-  const sentryConfig = checkProviderConfig(config, "sentry");
+  const sentryConfig = checkProviderConfig(configAnalytics, "sentry");
   if (sentryConfig?.enabled === true) {
     const { sentry } = (await import("./sentry")) as any;
-    sentry(environement, convertConfig(sentryConfig.configuration));
+    sentry({ ...environement, app }, convertConfig(sentryConfig.configuration));
   }
 };
 
 export const checkProviderConfig = (
-  config: IConfig,
+  configAnalytics: IAnalyticsConfig[],
   providerName: string
 ): IAnalyticsConfig | undefined => {
-  return config?.analytics?.find((provider) => provider.id === providerName);
+  return configAnalytics?.find((provider) => provider.id === providerName);
 };
 
 export const convertConfig = (
diff --git a/js/src/services/statistics/matomo.ts b/js/src/services/statistics/matomo.ts
index 7b636f96d..92385376c 100644
--- a/js/src/services/statistics/matomo.ts
+++ b/js/src/services/statistics/matomo.ts
@@ -1,4 +1,3 @@
-import Vue from "vue";
 import VueMatomo from "vue-matomo";
 
 export const matomo = (environment: any, matomoConfiguration: any) => {
@@ -7,8 +6,9 @@ export const matomo = (environment: any, matomoConfiguration: any) => {
     "Calling VueMatomo with the following configuration",
     matomoConfiguration
   );
-  Vue.use(VueMatomo, {
+  environment.app.use(VueMatomo, {
     ...matomoConfiguration,
     router: environment.router,
+    debug: import.meta.env.DEV,
   });
 };
diff --git a/js/src/services/statistics/plausible.ts b/js/src/services/statistics/plausible.ts
index 51712fdc9..fed349851 100644
--- a/js/src/services/statistics/plausible.ts
+++ b/js/src/services/statistics/plausible.ts
@@ -1,10 +1,8 @@
-import VueRouter from "vue-router";
-import Vue from "vue";
 import { VuePlausible } from "vue-plausible";
-export default (router: VueRouter, plausibleConfiguration: any) => {
+export default (environment: any, plausibleConfiguration: any) => {
   console.debug("Loading Plausible statistics");
 
-  Vue.use(VuePlausible, {
+  environment.app.use(VuePlausible, {
     // see configuration section
     ...plausibleConfiguration,
   });
diff --git a/js/src/services/statistics/sentry.ts b/js/src/services/statistics/sentry.ts
index ff165a304..2dbc4602d 100644
--- a/js/src/services/statistics/sentry.ts
+++ b/js/src/services/statistics/sentry.ts
@@ -1,5 +1,3 @@
-import Vue from "vue";
-
 import * as Sentry from "@sentry/vue";
 import { Integrations } from "@sentry/tracing";
 
@@ -12,14 +10,15 @@ export const sentry = (environment: any, sentryConfiguration: any) => {
   // Don't attach errors to previous events
   window.sessionStorage.removeItem("lastEventId");
   Sentry.init({
-    Vue,
+    app: environment.app,
     dsn: sentryConfiguration.dsn,
+    debug: import.meta.env.DEV,
     integrations: [
       new Integrations.BrowserTracing({
         routingInstrumentation: Sentry.vueRouterInstrumentation(
           environment.router
         ),
-        tracingOrigins: ["localhost", "mobilizon1.com", /^\//],
+        tracingOrigins: [window.origin, /^\//],
       }),
     ],
     beforeSend(event) {
@@ -33,8 +32,9 @@ export const sentry = (environment: any, sentryConfiguration: any) => {
     // Set tracesSampleRate to 1.0 to capture 100%
     // of transactions for performance monitoring.
     // We recommend adjusting this value in production
-    tracesSampleRate: sentryConfiguration.tracesSampleRate,
+    tracesSampleRate: Number.parseFloat(sentryConfiguration.tracesSampleRate),
     release: environment.version,
+    logErrors: true,
   });
 };
 
diff --git a/js/src/shims-vue.d.ts b/js/src/shims-vue.d.ts
index 19bacf77f..f94bf3282 100644
--- a/js/src/shims-vue.d.ts
+++ b/js/src/shims-vue.d.ts
@@ -2,7 +2,7 @@ declare module "*.vue" {
   import type { DefineComponent } from "vue";
 
   // eslint-disable-next-line @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>;
+  const component: DefineComponent<{}, {}, {}>;
   export default component;
 }
 
@@ -12,3 +12,5 @@ declare module "*.svg" {
   const content: VueConstructor<Vue>;
   export default content;
 }
+
+declare module "@vue-leaflet/vue-leaflet";
diff --git a/js/src/styles/_event-card.scss b/js/src/styles/_event-card.scss
deleted file mode 100644
index 4854de21b..000000000
--- a/js/src/styles/_event-card.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use "@/styles/_mixins" as *;
-
-.event-organizer {
-  display: flex;
-  align-items: center;
-
-  .organizer-name {
-    @include padding-left(5px);
-    font-weight: 600;
-  }
-}
-
-.event-subtitle {
-  display: flex;
-  align-items: center;
-
-  & > span:not(.icon) {
-    @include padding-left(5px);
-  }
-}
diff --git a/js/src/styles/vue-skip-to.scss b/js/src/styles/vue-skip-to.scss
index fdb62d8f2..222be9eda 100644
--- a/js/src/styles/vue-skip-to.scss
+++ b/js/src/styles/vue-skip-to.scss
@@ -28,8 +28,6 @@
     clip: auto;
     height: auto;
     width: auto;
-    background-color: $white;
-    border: 2px solid $violet-3;
   }
 
   &,
@@ -41,12 +39,10 @@
   &__link {
     display: block;
     padding: 8px 16px;
-    color: $violet-3;
     font-size: 18px;
   }
 
   &__nav > span {
-    border-bottom: 2px solid $violet-3;
     font-weight: bold;
   }
 
@@ -57,7 +53,6 @@
 
   &__link:focus {
     outline: none;
-    background-color: $violet-3;
     color: #f2f2f2;
   }
 }
diff --git a/js/src/types/actor/actor.model.ts b/js/src/types/actor/actor.model.ts
index 984c7f33c..088fd0da6 100644
--- a/js/src/types/actor/actor.model.ts
+++ b/js/src/types/actor/actor.model.ts
@@ -6,7 +6,7 @@ export interface IActor {
   url: string;
   name: string;
   domain: string | null;
-  mediaSize: number;
+  mediaSize?: number;
   summary: string;
   preferredUsername: string;
   suspended: boolean;
@@ -56,7 +56,10 @@ export class Actor implements IActor {
   }
 }
 
-export function usernameWithDomain(actor: IActor, force = false): string {
+export function usernameWithDomain(
+  actor: IActor | undefined,
+  force = false
+): string {
   if (!actor) return "";
   if (actor?.domain) {
     return `${actor.preferredUsername}@${actor.domain}`;
@@ -67,7 +70,7 @@ export function usernameWithDomain(actor: IActor, force = false): string {
   return actor.preferredUsername;
 }
 
-export function displayName(actor: IActor): string {
+export function displayName(actor: IActor | undefined): string {
   return actor && actor.name != null && actor.name !== ""
     ? actor.name
     : usernameWithDomain(actor);
diff --git a/js/src/types/actor/group.model.ts b/js/src/types/actor/group.model.ts
index 6f6a2b073..26e20449a 100644
--- a/js/src/types/actor/group.model.ts
+++ b/js/src/types/actor/group.model.ts
@@ -11,6 +11,7 @@ import { ActorType, GroupVisibility, Openness } from "../enums";
 import type { IMember } from "./member.model";
 import type { ITodoList } from "../todolist";
 import { IActivity } from "../activity.model";
+import { IFollower } from "./follower.model";
 
 export interface IGroup extends IActor {
   members: Paginate<IMember>;
@@ -24,10 +25,14 @@ export interface IGroup extends IActor {
   visibility: GroupVisibility;
   manuallyApprovesFollowers: boolean;
   activity: Paginate<IActivity>;
+  followers: Paginate<IFollower>;
+  membersCount?: number;
+  followersCount?: number;
 }
 
 export class Group extends Actor implements IGroup {
   members: Paginate<IMember> = { elements: [], total: 0 };
+  followers: Paginate<IFollower> = { elements: [], total: 0 };
 
   resources: Paginate<IResource> = { elements: [], total: 0 };
 
diff --git a/js/src/types/actor/person.model.ts b/js/src/types/actor/person.model.ts
index dc8451a42..c0a0ee215 100644
--- a/js/src/types/actor/person.model.ts
+++ b/js/src/types/actor/person.model.ts
@@ -10,11 +10,12 @@ import { IFollower } from "./follower.model";
 
 export interface IPerson extends IActor {
   feedTokens: IFeedToken[];
-  goingToEvents: IEvent[];
-  participations: Paginate<IParticipant>;
-  memberships: Paginate<IMember>;
-  follows: Paginate<IFollower>;
+  goingToEvents?: IEvent[];
+  participations?: Paginate<IParticipant>;
+  memberships?: Paginate<IMember>;
+  follows?: Paginate<IFollower>;
   user?: ICurrentUser;
+  organizedEvents?: Paginate<IEvent>;
 }
 
 export class Person extends Actor implements IPerson {
@@ -26,6 +27,8 @@ export class Person extends Actor implements IPerson {
 
   memberships!: Paginate<IMember>;
 
+  organizedEvents!: Paginate<IEvent>;
+
   user!: ICurrentUser;
 
   constructor(hash: IPerson | Record<string, unknown> = {}) {
diff --git a/js/src/types/address.model.ts b/js/src/types/address.model.ts
index e75d18f2f..4de385f12 100644
--- a/js/src/types/address.model.ts
+++ b/js/src/types/address.model.ts
@@ -1,5 +1,6 @@
 import { poiIcons } from "@/utils/poiIcons";
 import type { IPOIIcon } from "@/utils/poiIcons";
+import { PictureInformation } from "./picture";
 
 export interface IAddress {
   id?: string;
@@ -14,6 +15,8 @@ export interface IAddress {
   url?: string;
   originId?: string;
   timezone?: string;
+  pictureInfo?: PictureInformation;
+  poiInfos?: IPoiInfo;
 }
 
 export interface IPoiInfo {
diff --git a/js/src/types/admin.model.ts b/js/src/types/admin.model.ts
index 00d165428..5c8d62a6f 100644
--- a/js/src/types/admin.model.ts
+++ b/js/src/types/admin.model.ts
@@ -1,6 +1,6 @@
 import type { IEvent } from "@/types/event.model";
 import type { IGroup } from "./actor";
-import { InstanceTermsType } from "./enums";
+import { InstancePrivacyType, InstanceTermsType } from "./enums";
 
 export interface IDashboard {
   lastPublicEventPublished: IEvent;
@@ -29,7 +29,7 @@ export interface IAdminSettings {
   instanceTermsType: InstanceTermsType;
   instanceTermsUrl: string | null;
   instancePrivacyPolicy: string;
-  instancePrivacyPolicyType: InstanceTermsType;
+  instancePrivacyPolicyType: InstancePrivacyType;
   instancePrivacyPolicyUrl: string | null;
   instanceRules: string;
   registrationsOpen: boolean;
diff --git a/js/src/types/apollo.ts b/js/src/types/apollo.ts
index 244b56005..d0dd85e0f 100644
--- a/js/src/types/apollo.ts
+++ b/js/src/types/apollo.ts
@@ -3,3 +3,7 @@ import { GraphQLError } from "graphql/error/GraphQLError";
 export class AbsintheGraphQLError extends GraphQLError {
   readonly field: string | undefined;
 }
+
+export type TypeNamed<T extends Record<string, any>> = T & {
+  __typename: string;
+};
diff --git a/js/src/types/comment.model.ts b/js/src/types/comment.model.ts
index 5776bb9bc..80cc3366d 100644
--- a/js/src/types/comment.model.ts
+++ b/js/src/types/comment.model.ts
@@ -1,5 +1,4 @@
-import { Actor } from "@/types/actor";
-import type { IActor } from "@/types/actor";
+import { IPerson, Person } from "@/types/actor";
 import type { IEvent } from "@/types/event.model";
 import { EventModel } from "@/types/event.model";
 
@@ -9,21 +8,22 @@ export interface IComment {
   url?: string;
   text: string;
   local: boolean;
-  actor: IActor | null;
+  actor: IPerson | null;
   inReplyToComment?: IComment;
   originComment?: IComment;
   replies: IComment[];
   event?: IEvent;
-  updatedAt?: Date | string;
-  deletedAt?: Date | string;
+  updatedAt?: string;
+  deletedAt?: string;
   totalReplies: number;
-  insertedAt?: Date | string;
-  publishedAt?: Date | string;
+  insertedAt?: string;
+  publishedAt?: string;
   isAnnouncement: boolean;
+  language?: string;
 }
 
 export class CommentModel implements IComment {
-  actor: IActor = new Actor();
+  actor: IPerson = new Person();
 
   id?: string;
 
@@ -43,11 +43,11 @@ export class CommentModel implements IComment {
 
   event?: IEvent = undefined;
 
-  updatedAt?: Date | string = undefined;
+  updatedAt?: string = undefined;
 
-  deletedAt?: Date | string = undefined;
+  deletedAt?: string = undefined;
 
-  insertedAt?: Date | string = undefined;
+  insertedAt?: string = undefined;
 
   totalReplies = 0;
 
@@ -62,12 +62,12 @@ export class CommentModel implements IComment {
     this.text = hash.text;
     this.inReplyToComment = hash.inReplyToComment;
     this.originComment = hash.originComment;
-    this.actor = hash.actor ? new Actor(hash.actor) : new Actor();
+    this.actor = hash.actor ? new Person(hash.actor) : new Person();
     this.event = new EventModel(hash.event);
     this.replies = hash.replies;
-    this.updatedAt = new Date(hash.updatedAt as string);
+    this.updatedAt = new Date(hash.updatedAt as string).toISOString();
     this.deletedAt = hash.deletedAt;
-    this.insertedAt = new Date(hash.insertedAt as string);
+    this.insertedAt = new Date(hash.insertedAt as string).toISOString();
     this.totalReplies = hash.totalReplies;
     this.isAnnouncement = hash.isAnnouncement;
   }
diff --git a/js/src/types/config.model.ts b/js/src/types/config.model.ts
index 97544c2e5..e2ed75994 100644
--- a/js/src/types/config.model.ts
+++ b/js/src/types/config.model.ts
@@ -3,7 +3,7 @@ import type { IProvider } from "./resource";
 
 export interface IOAuthProvider {
   id: string;
-  label: string;
+  label?: string;
 }
 
 export interface IKeyValueConfig {
@@ -18,6 +18,19 @@ export interface IAnalyticsConfig {
   configuration: IKeyValueConfig[];
 }
 
+export interface IAnonymousParticipationConfig {
+  allowed: boolean;
+  validation: {
+    email: {
+      enabled: boolean;
+      confirmationRequired: boolean;
+    };
+    captcha: {
+      enabled: boolean;
+    };
+  };
+}
+
 export interface IConfig {
   name: string;
   description: string;
@@ -37,18 +50,7 @@ export interface IConfig {
     // accuracyRadius: number;
   };
   anonymous: {
-    participation: {
-      allowed: boolean;
-      validation: {
-        email: {
-          enabled: boolean;
-          confirmationRequired: boolean;
-        };
-        captcha: {
-          enabled: boolean;
-        };
-      };
-    };
+    participation: IAnonymousParticipationConfig;
     eventCreation: {
       allowed: boolean;
       validation: {
@@ -122,4 +124,10 @@ export interface IConfig {
     eventParticipants: string[];
   };
   analytics: IAnalyticsConfig[];
+  search: {
+    global: {
+      isEnabled: boolean;
+      isDefault: boolean;
+    };
+  };
 }
diff --git a/js/src/types/current-user.model.ts b/js/src/types/current-user.model.ts
index 428e36195..f2dda9ad2 100644
--- a/js/src/types/current-user.model.ts
+++ b/js/src/types/current-user.model.ts
@@ -4,6 +4,9 @@ import type { Paginate } from "./paginate";
 import type { IParticipant } from "./participant.model";
 import { ICurrentUserRole, INotificationPendingEnum } from "./enums";
 import { IFollowedGroupEvent } from "./followedGroupEvent.model";
+import { PictureInformation } from "./picture";
+import { IMember } from "./actor/member.model";
+import { IFeedToken } from "./feedtoken.model";
 
 export interface ICurrentUser {
   id: string;
@@ -19,6 +22,12 @@ export interface IUserPreferredLocation {
   geohash?: string | null;
 }
 
+export interface ExtendedIUserPreferredLocation extends IUserPreferredLocation {
+  lat: number | undefined;
+  lon: number | undefined;
+  picture?: PictureInformation;
+}
+
 export interface IUserSettings {
   timezone?: string;
   notificationOnDay?: boolean;
@@ -39,8 +48,8 @@ export interface IActivitySetting {
 }
 
 export interface IUser extends ICurrentUser {
-  confirmedAt: Date;
-  confirmationSendAt: Date;
+  confirmedAt: string;
+  confirmationSendAt: string;
   actors: IPerson[];
   disabled: boolean;
   participations: Paginate<IParticipant>;
@@ -55,4 +64,6 @@ export interface IUser extends ICurrentUser {
   lastSignInIp: string;
   currentSignInIp: string;
   currentSignInAt: string;
+  memberships: Paginate<IMember>;
+  feedTokens: IFeedToken[];
 }
diff --git a/js/src/types/enums.ts b/js/src/types/enums.ts
index 1061d196b..871ee46db 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",
@@ -280,3 +286,8 @@ export enum InstanceFollowStatus {
   PENDING = "PENDING",
   NONE = "NONE",
 }
+
+export enum SearchTargets {
+  INTERNAL = "INTERNAL",
+  GLOBAL = "GLOBAL",
+}
diff --git a/js/src/types/errors.model.ts b/js/src/types/errors.model.ts
index 1f8dcf7ea..95e8f2a11 100644
--- a/js/src/types/errors.model.ts
+++ b/js/src/types/errors.model.ts
@@ -4,6 +4,8 @@ import { ExecutionResult, GraphQLError } from "graphql";
 
 export declare class AbsintheGraphQLError extends GraphQLError {
   field?: string;
+  code?: string;
+  status_code?: number;
 }
 export declare type AbsintheGraphQLErrors = ReadonlyArray<AbsintheGraphQLError>;
 
diff --git a/js/src/types/event-metadata.ts b/js/src/types/event-metadata.ts
index 776ed7fd7..586652ff3 100644
--- a/js/src/types/event-metadata.ts
+++ b/js/src/types/event-metadata.ts
@@ -14,9 +14,9 @@ export interface IEventMetadata {
 export interface IEventMetadataDescription extends IEventMetadata {
   icon?: string;
   placeholder?: string;
-  description: string;
+  description?: string;
   choices?: Record<string, string>;
-  keyType: EventMetadataKeyType;
+  keyType?: EventMetadataKeyType;
   pattern?: RegExp;
   label: string;
   category: EventMetadataCategories;
diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts
index e06703665..11216edc6 100644
--- a/js/src/types/event.model.ts
+++ b/js/src/types/event.model.ts
@@ -10,14 +10,15 @@ import type { IParticipant } from "./participant.model";
 import { EventOptions } from "./event-options.model";
 import type { IEventOptions } from "./event-options.model";
 import { EventJoinOptions, EventStatus, EventVisibility } from "./enums";
-import { IEventMetadata } from "./event-metadata";
+import { IEventMetadata, IEventMetadataDescription } from "./event-metadata";
 
 export interface IEventCardOptions {
-  hideDate: boolean;
-  loggedPerson: IPerson | boolean;
-  hideDetails: boolean;
-  organizerActor: IActor | null;
-  memberofGroup: boolean;
+  hideDate?: boolean;
+  loggedPerson?: IPerson | boolean;
+  hideDetails?: boolean;
+  organizerActor?: IActor | null;
+  isRemoteEvent?: boolean;
+  isLoggedIn?: boolean;
 }
 
 export interface IEventParticipantStats {
@@ -65,9 +66,9 @@ export interface IEvent {
   title: string;
   slug: string;
   description: string;
-  beginsOn: Date;
-  endsOn: Date | null;
-  publishAt: Date;
+  beginsOn: string;
+  endsOn: string | null;
+  publishAt: string;
   status: EventStatus;
   visibility: EventVisibility;
   joinOptions: EventJoinOptions;
@@ -89,23 +90,23 @@ export interface IEvent {
 
   tags: ITag[];
   options: IEventOptions;
-  metadata: IEventMetadata[];
+  metadata: IEventMetadataDescription[];
   contacts: IActor[];
   language: string;
   category: string;
 
-  toEditJSON(): IEventEditJSON;
+  toEditJSON?(): IEventEditJSON;
 }
 
 export interface IEditableEvent extends Omit<IEvent, "beginsOn"> {
-  beginsOn: Date | null;
+  beginsOn: string | null;
 }
 export class EventModel implements IEvent {
   id?: string;
 
-  beginsOn = new Date();
+  beginsOn = new Date().toISOString();
 
-  endsOn: Date | null = new Date();
+  endsOn: string | null = new Date().toISOString();
 
   title = "";
 
@@ -135,7 +136,7 @@ export class EventModel implements IEvent {
 
   draft = true;
 
-  publishAt = new Date();
+  publishAt = new Date().toISOString();
 
   language = "und";
 
@@ -166,7 +167,7 @@ export class EventModel implements IEvent {
 
   options: IEventOptions = new EventOptions();
 
-  metadata: IEventMetadata[] = [];
+  metadata: IEventMetadataDescription[] = [];
 
   category = "MEETING";
 
@@ -183,15 +184,15 @@ export class EventModel implements IEvent {
     this.description = hash.description || "";
 
     if (hash.beginsOn) {
-      this.beginsOn = new Date(hash.beginsOn);
+      this.beginsOn = new Date(hash.beginsOn).toISOString();
     }
     if (hash.endsOn) {
-      this.endsOn = new Date(hash.endsOn);
+      this.endsOn = new Date(hash.endsOn).toISOString();
     } else {
       this.endsOn = null;
     }
 
-    this.publishAt = new Date(hash.publishAt);
+    this.publishAt = new Date(hash.publishAt).toISOString();
 
     this.status = hash.status;
     this.visibility = hash.visibility;
@@ -227,7 +228,6 @@ export class EventModel implements IEvent {
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function removeTypeName(entity: any): any {
   if (entity?.__typename) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -242,8 +242,8 @@ export function toEditJSON(event: IEditableEvent): IEventEditJSON {
     id: event.id,
     title: event.title,
     description: event.description,
-    beginsOn: event.beginsOn ? event.beginsOn.toISOString() : null,
-    endsOn: event.endsOn ? event.endsOn.toISOString() : null,
+    beginsOn: event.beginsOn ? event.beginsOn.toString() : null,
+    endsOn: event.endsOn ? event.endsOn.toString() : null,
     status: event.status,
     category: event.category,
     visibility: event.visibility,
@@ -280,6 +280,10 @@ export function organizer(event: IEvent): IActor | null {
   return null;
 }
 
+export function organizerAvatarUrl(event: IEvent): string | null {
+  return organizer(event)?.avatar?.url ?? null;
+}
+
 export function organizerDisplayName(event: IEvent): string | null {
   const organizerActor = organizer(event);
   if (organizerActor) {
@@ -287,3 +291,7 @@ export function organizerDisplayName(event: IEvent): string | null {
   }
   return null;
 }
+
+export function instanceOfIEvent(object: any): object is IEvent {
+  return "organizerActor" in object;
+}
diff --git a/js/src/types/instance.model.ts b/js/src/types/instance.model.ts
index 165c4bb56..a26a0be02 100644
--- a/js/src/types/instance.model.ts
+++ b/js/src/types/instance.model.ts
@@ -12,4 +12,5 @@ export interface IInstance {
   followingsCount: number;
   reportsCount: number;
   mediaSize: number;
+  eventCount: number;
 }
diff --git a/js/src/types/media.model.ts b/js/src/types/media.model.ts
index cc8e42fd4..3a85445b4 100644
--- a/js/src/types/media.model.ts
+++ b/js/src/types/media.model.ts
@@ -12,6 +12,10 @@ export interface IMediaUpload {
   alt: string | null;
 }
 
+export interface IMediaUploadWrapper {
+  media: IMediaUpload;
+}
+
 export interface IMediaMetadata {
   width?: number;
   height?: number;
diff --git a/js/src/types/picture.ts b/js/src/types/picture.ts
new file mode 100644
index 000000000..47ead96a8
--- /dev/null
+++ b/js/src/types/picture.ts
@@ -0,0 +1,11 @@
+export interface PictureInformation {
+  url: string;
+  author: {
+    name: string;
+    url: string;
+  };
+  source: {
+    name: string;
+    url: string;
+  };
+}
diff --git a/js/src/types/post.model.ts b/js/src/types/post.model.ts
index 6b4a34c57..094b3075e 100644
--- a/js/src/types/post.model.ts
+++ b/js/src/types/post.model.ts
@@ -10,12 +10,14 @@ export interface IPost {
   local: boolean;
   title: string;
   body: string;
-  tags?: ITag[];
+  tags: ITag[];
   picture?: IMedia | null;
   draft: boolean;
   visibility: PostVisibility;
   author?: IActor;
   attributedTo?: IActor;
-  publishAt?: Date;
-  insertedAt?: Date;
+  publishAt?: string;
+  insertedAt?: string;
+  language?: string;
+  updatedAt?: string;
 }
diff --git a/js/src/types/report.model.ts b/js/src/types/report.model.ts
index b7a79bdd9..dd54158a3 100644
--- a/js/src/types/report.model.ts
+++ b/js/src/types/report.model.ts
@@ -10,6 +10,7 @@ export interface IReportNote extends IActionLogObject {
   id: string;
   content: string;
   moderator: IActor;
+  insertedAt: string;
 }
 export interface IReport extends IActionLogObject {
   id: string;
@@ -19,8 +20,8 @@ export interface IReport extends IActionLogObject {
   comments: IComment[];
   content: string;
   notes: IReportNote[];
-  insertedAt: Date;
-  updatedAt: Date;
+  insertedAt: string;
+  updatedAt: string;
   status: ReportStatusEnum;
 }
 
diff --git a/js/src/types/resource.ts b/js/src/types/resource.ts
index 2fa2dff7a..041ef67c7 100644
--- a/js/src/types/resource.ts
+++ b/js/src/types/resource.ts
@@ -19,15 +19,16 @@ export interface IResource {
   id?: string;
   title: string;
   summary?: string;
-  actor?: IActor;
+  actor?: IGroup;
   url?: string;
   resourceUrl: string;
   path?: string;
   children: Paginate<IResource>;
   parent?: IResource;
   metadata: IResourceMetadata;
-  insertedAt?: Date;
-  updatedAt?: Date;
+  insertedAt?: string;
+  updatedAt?: string;
+  publishedAt?: string;
   creator?: IActor;
   type?: string;
 }
diff --git a/js/src/types/stats.model.ts b/js/src/types/stats.model.ts
new file mode 100644
index 000000000..21f6d89c3
--- /dev/null
+++ b/js/src/types/stats.model.ts
@@ -0,0 +1,5 @@
+export interface CategoryStatsModel {
+  key: string;
+  number: number;
+  label?: string;
+}
diff --git a/js/src/types/todos.ts b/js/src/types/todos.ts
index ad3dd8a5c..084bc2b80 100644
--- a/js/src/types/todos.ts
+++ b/js/src/types/todos.ts
@@ -5,7 +5,7 @@ export interface ITodo {
   id?: string;
   title: string;
   status: boolean;
-  dueDate?: Date;
+  dueDate?: string;
   creator?: IActor;
   assignedTo?: IPerson;
   todoList?: ITodoList;
diff --git a/js/src/types/user-location.model.ts b/js/src/types/user-location.model.ts
new file mode 100644
index 000000000..7b6f4cb71
--- /dev/null
+++ b/js/src/types/user-location.model.ts
@@ -0,0 +1,10 @@
+import { PictureInformation } from "./picture";
+
+export type LocationType = {
+  lat: number | undefined;
+  lon: number | undefined;
+  name: string | undefined;
+  picture?: PictureInformation;
+  isIPLocation?: boolean;
+  accuracy?: number;
+};
diff --git a/js/src/utils/asyncForEach.ts b/js/src/utils/asyncForEach.ts
index f0f4ee976..ca3b9d27a 100644
--- a/js/src/utils/asyncForEach.ts
+++ b/js/src/utils/asyncForEach.ts
@@ -1,11 +1,9 @@
 async function asyncForEach(
   array: Array<any>,
-  // eslint-disable-next-line no-unused-vars
   callback: (arg0: any, arg1: number, arg2: Array<any>) => void
 ): Promise<void> {
   for (let index = 0; index < array.length; index += 1) {
-    // eslint-disable-next-line no-await-in-loop
-    await callback(array[index], index, array);
+    callback(array[index], index, array);
   }
 }
 
diff --git a/js/src/utils/auth.ts b/js/src/utils/auth.ts
index c0657c2e7..e4c43dfa7 100644
--- a/js/src/utils/auth.ts
+++ b/js/src/utils/auth.ts
@@ -9,12 +9,11 @@ import {
 } from "@/constants";
 import { ILogin, IToken } from "@/types/login.model";
 import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
-import { ApolloClient } from "@apollo/client/core/ApolloClient";
-import { IPerson } from "@/types/actor";
-import { IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { UPDATE_CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
 import { ICurrentUserRole } from "@/types/enums";
-import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
 import { LOGOUT } from "@/graphql/auth";
+import { provideApolloClient, useMutation } from "@vue/apollo-composable";
+import { apolloClient } from "@/vue-apollo";
 
 export function saveTokenData(obj: IToken): void {
   localStorage.setItem(AUTH_ACCESS_TOKEN, obj.accessToken);
@@ -37,10 +36,6 @@ export function getLocaleData(): string | null {
   return localStorage ? localStorage.getItem(USER_LOCALE) : null;
 }
 
-export function saveActorData(obj: IPerson): void {
-  localStorage.setItem(AUTH_USER_ACTOR_ID, `${obj.id}`);
-}
-
 export function deleteUserData(): void {
   [
     AUTH_USER_ID,
@@ -54,78 +49,35 @@ export function deleteUserData(): void {
   });
 }
 
-export class NoIdentitiesException extends Error {}
+export async function logout(performServerLogout = true): Promise<void> {
+  const { mutate: logoutMutation } = provideApolloClient(apolloClient)(() =>
+    useMutation(LOGOUT)
+  );
+  const { mutate: cleanUserClient } = provideApolloClient(apolloClient)(() =>
+    useMutation(UPDATE_CURRENT_USER_CLIENT)
+  );
+  const { mutate: cleanActorClient } = provideApolloClient(apolloClient)(() =>
+    useMutation(UPDATE_CURRENT_ACTOR_CLIENT)
+  );
 
-export async function changeIdentity(
-  apollo: ApolloClient<NormalizedCacheObject>,
-  identity: IPerson
-): Promise<void> {
-  await apollo.mutate({
-    mutation: UPDATE_CURRENT_ACTOR_CLIENT,
-    variables: identity,
-  });
-  saveActorData(identity);
-}
-
-/**
- * We fetch from localStorage the latest actor ID used,
- * then fetch the current identities to set in cache
- * the current identity used
- */
-export async function initializeCurrentActor(
-  apollo: ApolloClient<any>
-): Promise<void> {
-  const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
-
-  const result = await apollo.query({
-    query: IDENTITIES,
-    fetchPolicy: "network-only",
-  });
-  const { identities } = result.data;
-  if (identities.length < 1) {
-    console.warn("Logged user has no identities!");
-    throw new NoIdentitiesException();
-  }
-  const activeIdentity =
-    identities.find((identity: IPerson) => identity.id === actorId) ||
-    (identities[0] as IPerson);
-
-  if (activeIdentity) {
-    await changeIdentity(apollo, activeIdentity);
-  }
-}
-
-export async function logout(
-  apollo: ApolloClient<NormalizedCacheObject>,
-  performServerLogout = true
-): Promise<void> {
   if (performServerLogout) {
-    await apollo.mutate({
-      mutation: LOGOUT,
-      variables: {
-        refreshToken: localStorage.getItem(AUTH_REFRESH_TOKEN),
-      },
+    logoutMutation({
+      refreshToken: localStorage.getItem(AUTH_REFRESH_TOKEN),
     });
   }
 
-  await apollo.mutate({
-    mutation: UPDATE_CURRENT_USER_CLIENT,
-    variables: {
-      id: null,
-      email: null,
-      isLoggedIn: false,
-      role: ICurrentUserRole.USER,
-    },
+  cleanUserClient({
+    id: null,
+    email: null,
+    isLoggedIn: false,
+    role: ICurrentUserRole.USER,
   });
 
-  await apollo.mutate({
-    mutation: UPDATE_CURRENT_ACTOR_CLIENT,
-    variables: {
-      id: null,
-      avatar: null,
-      preferredUsername: null,
-      name: null,
-    },
+  cleanActorClient({
+    id: null,
+    avatar: null,
+    preferredUsername: null,
+    name: null,
   });
 
   deleteUserData();
diff --git a/js/src/utils/datetime.ts b/js/src/utils/datetime.ts
index 4eef7cc7f..ae490fb62 100644
--- a/js/src/utils/datetime.ts
+++ b/js/src/utils/datetime.ts
@@ -1,3 +1,6 @@
+import type { Locale } from "date-fns";
+import { format } from "date-fns";
+
 function localeMonthNames(): string[] {
   const monthNames: string[] = [];
   for (let i = 0; i < 12; i += 1) {
@@ -19,16 +22,57 @@ function localeShortWeekDayNames(): string[] {
 }
 
 // https://stackoverflow.com/a/18650828/10204399
-function formatBytes(bytes: number, decimals = 2, zero = "0 Bytes"): string {
-  if (bytes === 0) return zero;
+function formatBytes(
+  bytes: number,
+  decimals = 2,
+  locale: string | undefined = undefined
+): string {
+  const formatNumber = (value = 0, unit = "byte") =>
+    new Intl.NumberFormat(locale, {
+      style: "unit",
+      unit,
+      unitDisplay: "long",
+    }).format(value);
+
+  if (bytes === 0) return formatNumber(0);
+  if (bytes < 0 || bytes > Number.MAX_SAFE_INTEGER) {
+    throw new RangeError(
+      "Number mustn't be negative and be inferior to Number.MAX_SAFE_INTEGER"
+    );
+  }
 
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const sizes = [
+    "byte",
+    "kilobyte",
+    "megabyte",
+    "gigabyte",
+    "terabyte",
+    "petabyte",
+  ];
 
   const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+  return formatNumber(parseFloat((bytes / k ** i).toFixed(dm)), sizes[i]);
 }
 
-export { localeMonthNames, localeShortWeekDayNames, formatBytes };
+function roundToNearestMinute(date = new Date()) {
+  const minutes = 1;
+  const ms = 1000 * 60 * minutes;
+
+  // 👇️ replace Math.round with Math.ceil to always round UP
+  return new Date(Math.round(date.getTime() / ms) * ms);
+}
+
+function formatDateTimeForEvent(dateTime: Date, locale: Locale): string {
+  return format(dateTime, "PPp", { locale });
+}
+
+export {
+  localeMonthNames,
+  localeShortWeekDayNames,
+  formatBytes,
+  roundToNearestMinute,
+  formatDateTimeForEvent,
+};
diff --git a/js/src/utils/graphics.ts b/js/src/utils/graphics.ts
new file mode 100644
index 000000000..34c903ff1
--- /dev/null
+++ b/js/src/utils/graphics.ts
@@ -0,0 +1,28 @@
+import random from "lodash/random";
+
+export const randomGradient = (): string => {
+  const direction = [
+    "bg-gradient-to-t",
+    "bg-gradient-to-tr",
+    "bg-gradient-to-r",
+    "bg-gradient-to-br",
+    "bg-gradient-to-b",
+    "bg-gradient-to-bl",
+    "bg-gradient-to-l",
+    "bg-gradient-to-tl",
+  ];
+  const gradients = [
+    "from-pink-500 via-red-500 to-yellow-500",
+    "from-green-400 via-blue-500 to-purple-600",
+    "from-pink-400 via-purple-300 to-indigo-400",
+    "from-yellow-300 via-yellow-500 to-yellow-700",
+    "from-yellow-300 via-green-400 to-green-500",
+    "from-red-400 via-red-600 to-yellow-400",
+    "from-green-400 via-green-500 to-blue-700",
+    "from-yellow-400 via-yellow-500 to-yellow-700",
+    "from-green-300 via-green-400 to-purple-700",
+  ];
+  return `${direction[random(0, direction.length - 1)]} ${
+    gradients[random(0, gradients.length - 1)]
+  }`;
+};
diff --git a/js/src/utils/html.ts b/js/src/utils/html.ts
index ee6cea891..ffa2dad41 100644
--- a/js/src/utils/html.ts
+++ b/js/src/utils/html.ts
@@ -1,3 +1,12 @@
 export function nl2br(text: string): string {
   return text.replace(/(?:\r\n|\r|\n)/g, "<br>");
 }
+
+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 06c213b4e..c2a7030f5 100644
--- a/js/src/utils/i18n.ts
+++ b/js/src/utils/i18n.ts
@@ -1,10 +1,9 @@
-import Vue from "vue";
-import VueI18n from "vue-i18n";
-import { DateFnsPlugin } from "@/plugins/dateFns";
+import { createI18n } from "vue-i18n";
 import en from "../i18n/en_US.json";
 import langs from "../i18n/langs.json";
 import { getLocaleData } from "./auth";
 import pluralizationRules from "../i18n/pluralRules";
+// import messages from "@intlify/vite-plugin-vue-i18n/messages";
 
 const DEFAULT_LOCALE = "en_US";
 
@@ -12,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(
@@ -30,35 +22,29 @@ 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);
-
-Vue.use(VueI18n);
-
-export const i18n = new VueI18n({
-  locale: DEFAULT_LOCALE, // set locale
+export const i18n = createI18n({
+  legacy: false,
+  locale: locale, // set locale
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
+  // messages, // set locale messages
   messages: en, // set locale messages
   fallbackLocale: DEFAULT_LOCALE,
   formatFallbackMessages: true,
   pluralizationRules,
   fallbackRootWithEmptyString: true,
+  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.locale = 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);
 }
 
@@ -93,43 +78,26 @@ function vueI18NfileForLanguage(lang: string) {
   return fileForLanguage(matches, lang);
 }
 
-function dateFnsfileForLanguage(lang: string) {
-  const matches: Record<string, string> = {
-    en_US: "en-US",
-    en: "en-US",
-  };
-  return fileForLanguage(matches, lang);
-}
-
-Vue.use(DateFnsPlugin, { locale: dateFnsfileForLanguage(locale) });
-
 export async function loadLanguageAsync(lang: string): Promise<string> {
   // If the same language
-  if (i18n.locale === lang) {
-    console.debug("already using language", lang);
+  if (i18n.global.locale === 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(
-    /* webpackChunkName: "lang-[request]" */ `@/i18n/${vueI18NfileForLanguage(
-      lang
-    )}.json`
+    `../i18n/${vueI18NfileForLanguage(lang)}.json`
   );
-  i18n.setLocaleMessage(lang, newMessages.default);
+  i18n.global.setLocaleMessage(lang, newMessages.default);
   loadedLanguages.push(lang);
   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/identity.ts b/js/src/utils/identity.ts
new file mode 100644
index 000000000..fd3e61313
--- /dev/null
+++ b/js/src/utils/identity.ts
@@ -0,0 +1,58 @@
+import { AUTH_USER_ACTOR_ID } from "@/constants";
+import { UPDATE_CURRENT_ACTOR_CLIENT, IDENTITIES } from "@/graphql/actor";
+import { IPerson } from "@/types/actor";
+import { apolloClient } from "@/vue-apollo";
+import {
+  provideApolloClient,
+  useMutation,
+  useQuery,
+} from "@vue/apollo-composable";
+import { computed, watch } from "vue";
+
+export class NoIdentitiesException extends Error {}
+
+export function saveActorData(obj: IPerson): void {
+  localStorage.setItem(AUTH_USER_ACTOR_ID, `${obj.id}`);
+}
+
+export async function changeIdentity(identity: IPerson): Promise<void> {
+  if (!identity.id) return;
+  const { mutate: updateCurrentActorClient } = provideApolloClient(
+    apolloClient
+  )(() => useMutation(UPDATE_CURRENT_ACTOR_CLIENT));
+
+  updateCurrentActorClient(identity);
+  if (identity.id) {
+    saveActorData(identity);
+  }
+}
+
+/**
+ * We fetch from localStorage the latest actor ID used,
+ * then fetch the current identities to set in cache
+ * the current identity used
+ */
+export async function initializeCurrentActor(): Promise<void> {
+  const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
+
+  const { result: identitiesResult } = provideApolloClient(apolloClient)(() =>
+    useQuery<{ identities: IPerson[] }>(IDENTITIES)
+  );
+
+  const identities = computed(() => identitiesResult.value?.identities);
+
+  watch(identities, async () => {
+    if (identities.value && identities.value.length < 1) {
+      console.warn("Logged user has no identities!");
+      throw new NoIdentitiesException();
+    }
+    const activeIdentity =
+      (identities.value || []).find(
+        (identity: IPerson | undefined) => identity?.id === actorId
+      ) || ((identities.value || [])[0] as IPerson);
+
+    if (activeIdentity) {
+      await changeIdentity(activeIdentity);
+    }
+  });
+}
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/utils/location.ts b/js/src/utils/location.ts
new file mode 100644
index 000000000..8e0ece55d
--- /dev/null
+++ b/js/src/utils/location.ts
@@ -0,0 +1,22 @@
+import ngeohash from "ngeohash";
+
+const GEOHASH_DEPTH = 9; // put enough accuracy, radius will be used anyway
+
+export const coordsToGeoHash = (
+  lat: number | undefined,
+  lon: number | undefined,
+  depth = GEOHASH_DEPTH
+): string | undefined => {
+  if (lat && lon && depth) {
+    return ngeohash.encode(lat, lon, GEOHASH_DEPTH);
+  }
+  return undefined;
+};
+
+export const geoHashToCoords = (
+  geohash: string | undefined
+): { latitude: number; longitude: number } | undefined => {
+  if (!geohash) return undefined;
+  const { latitude, longitude } = ngeohash.decode(geohash);
+  return latitude && longitude ? { latitude, longitude } : undefined;
+};
diff --git a/js/src/utils/share.ts b/js/src/utils/share.ts
new file mode 100644
index 000000000..a549b9245
--- /dev/null
+++ b/js/src/utils/share.ts
@@ -0,0 +1,80 @@
+export const twitterShareUrl = (
+  url: string | undefined,
+  text: string | undefined
+): string | undefined => {
+  if (!url || !text) return undefined;
+  return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
+    url
+  )}&text=${text}`;
+};
+
+export const facebookShareUrl = (
+  url: string | undefined
+): string | undefined => {
+  if (!url) return undefined;
+  return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+    url
+  )}`;
+};
+
+export const linkedInShareUrl = (
+  url: string | undefined,
+  text: string | undefined
+): string | undefined => {
+  if (!url || !text) return undefined;
+  return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
+    url
+  )}&title=${text}`;
+};
+
+export const whatsAppShareUrl = (
+  url: string | undefined,
+  text: string | undefined
+): string | undefined => {
+  if (!url || !text) return undefined;
+  return `https://wa.me/?text=${encodeURIComponent(
+    basicTextToEncode(url, text)
+  )}`;
+};
+
+export const telegramShareUrl = (
+  url: string | undefined,
+  text: string | undefined
+): string | undefined => {
+  if (!url || !text) return undefined;
+  return `https://t.me/share/url?url=${encodeURIComponent(
+    url
+  )}&text=${encodeURIComponent(text)}`;
+};
+
+export const emailShareUrl = (
+  url: string | undefined,
+  text: string | undefined
+): string | undefined => {
+  if (!url || !text) return undefined;
+  return `mailto:?to=&body=${url}&subject=${text}`;
+};
+
+export const diasporaShareUrl = (
+  url: string | undefined,
+  text: string | undefined
+): string | undefined => {
+  if (!url || !text) return undefined;
+  return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
+    text
+  )}&url=${encodeURIComponent(url)}`;
+};
+
+export const mastodonShareUrl = (
+  url: string | undefined,
+  text: string | undefined
+): string | undefined => {
+  if (!url || !text) return undefined;
+  return `https://toot.kytta.dev/?text=${encodeURIComponent(
+    basicTextToEncode(url, text)
+  )}`;
+};
+
+const basicTextToEncode = (url: string, text: string): string => {
+  return `${text}\r\n${url}`;
+};
diff --git a/js/src/variables.scss b/js/src/variables.scss
deleted file mode 100644
index 07fb0e60e..000000000
--- a/js/src/variables.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-@import "~bulma/sass/utilities/functions.sass";
-@import "~bulma/sass/utilities/initial-variables.sass";
-@import "~bulma/sass/utilities/derived-variables.sass";
-
-$bleuvert: #1e7d97;
-$jaune: #ffd599;
-$violet: #424056;
-
-/**
- * Text body, paragraphs
- */
-$violet-1: #3a384c;
-$violet-2: #474467;
-
-/**
- * Titles, dark borders, buttons
- */
-$violet-3: #3c376e;
-
-/**
- * Borders
- */
-$borders: #d7d6de;
-$backgrounds: #ecebf2;
-
-/**
- * Text
- */
-$purple-1: #757199;
-
-/**
- * Background
- */
-$purple-2: #cdcaea;
-$purple-3: #e6e4f4;
-
-$orange-2: #ed8d07;
-$orange-3: #d35204;
-
-$yellow-1: #ffd599;
-$yellow-2: #fff1de;
-$yellow-3: #fbd5cb;
-$yellow-4: #f7ba30;
-
-$primary: $bleuvert;
-$primary-invert: findColorInvert($primary);
-$secondary: $jaune;
-$secondary-invert: findColorInvert($secondary);
-
-$background-color: $violet-2;
-
-$success: #0d8758;
-$success-invert: findColorInvert($success);
-$info: #36bcd4;
-$info-invert: findColorInvert($info);
-$danger: #cd2026;
-$danger-invert: findColorInvert($danger);
-$link: $primary;
-$link-invert: $primary-invert;
-$text: $violet-1;
-$grey: #757575;
-
-$colors: map-merge(
-  $colors,
-  (
-    "primary": (
-      $primary,
-      $primary-invert,
-    ),
-    "secondary": (
-      $secondary,
-      $secondary-invert,
-    ),
-    "success": (
-      $success,
-      $success-invert,
-    ),
-    "info": (
-      $info,
-      $info-invert,
-    ),
-    "danger": (
-      $danger,
-      $danger-invert,
-    ),
-    "link": (
-      $link,
-      $link-invert,
-    ),
-    "grey": (
-      $grey,
-      findColorInvert($grey),
-    ),
-  )
-);
-
-// Navbar
-$navbar-background-color: $secondary;
-$navbar-item-color: $background-color;
-$navbar-height: 4rem;
-
-// Footer
-$footer-padding: 3rem 1.5rem 1rem;
-$footer-background-color: $background-color;
-
-$body-background-color: #efeef4;
-$fullhd-enabled: false;
-$hero-body-padding-medium: 6rem 1.5rem;
-
-main > .container {
-  background: $body-background-color;
-  min-height: 70vh;
-}
-
-$title-color: #3c376e;
-$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
-$title-weight: 700;
-$title-size: 40px;
-$title-sub-size: 45px;
-$title-sup-size: 30px;
-
-$subtitle-color: #3a384c;
-$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
-$subtitle-weight: 400;
-$subtitle-size: 32px;
-$subtitle-sub-size: 30px;
-$subtitle-sup-size: 15px;
-
-.subtitle {
-  background: $secondary;
-  display: inline;
-  padding: 3px 8px;
-  margin: 15px auto 30px;
-}
-
-//$input-border-color: #dbdbdb;
-$breadcrumb-item-color: $primary;
-$checkbox-background-color: #fff;
-$title-color: $violet-3;
-
-:root {
-  --color-primary: 30 125 151;
-  --color-secondary: 255 213 153;
-  --color-violet-title: 66 64 86;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-primary: 30 125 151;
-    --color-secondary: 255 213 153;
-    --color-violet-title: 66 64 86;
-  }
-}
diff --git a/js/src/views/About.vue b/js/src/views/About.vue
deleted file mode 100644
index 964811c43..000000000
--- a/js/src/views/About.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <section class="container">
-      <div class="columns">
-        <div class="column is-one-quarter-desktop">
-          <aside class="menu">
-            <p class="menu-list">
-              <router-link :to="{ name: RouteName.ABOUT_INSTANCE }">{{
-                $t("About this instance")
-              }}</router-link>
-            </p>
-            <p class="menu-label has-text-grey-dark">
-              {{ $t("Legal") }}
-            </p>
-            <ul class="menu-list">
-              <li>
-                <router-link :to="{ name: RouteName.TERMS }">{{
-                  $t("Terms of service")
-                }}</router-link>
-              </li>
-              <li>
-                <router-link :to="{ name: RouteName.PRIVACY }">{{
-                  $t("Privacy policy")
-                }}</router-link>
-              </li>
-              <li>
-                <router-link :to="{ name: RouteName.RULES }">{{
-                  $t("Instance rules")
-                }}</router-link>
-              </li>
-              <li>
-                <router-link :to="{ name: RouteName.GLOSSARY }">{{
-                  $t("Glossary")
-                }}</router-link>
-              </li>
-            </ul>
-          </aside>
-        </div>
-        <div class="column router">
-          <router-view />
-        </div>
-      </div>
-    </section>
-    <div class="hero intro is-small is-secondary">
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title">{{ $t("Powered by Mobilizon") }}</h1>
-          <p>
-            {{
-              $t(
-                "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
-              )
-            }}
-          </p>
-          <b-button
-            icon-left="open-in-new"
-            size="is-large"
-            type="is-primary"
-            tag="a"
-            href="https://joinmobilizon.org"
-            >{{ $t("Learn more") }}</b-button
-          >
-        </div>
-      </div>
-    </div>
-    <div
-      class="hero register is-primary is-medium"
-      v-if="!currentUser || !currentUser.id"
-    >
-      <div class="hero-body">
-        <div class="container has-text-centered">
-          <div class="columns">
-            <div class="column" v-if="config && config.registrationsOpen">
-              <h2 class="title">{{ $t("Register on this instance") }}</h2>
-              <b-button
-                type="is-secondary"
-                size="is-large"
-                tag="router-link"
-                :to="{ name: RouteName.REGISTER }"
-                >{{ $t("Create an account") }}</b-button
-              >
-            </div>
-            <div class="column">
-              <h2 class="title">{{ $t("Find another instance") }}</h2>
-              <b-button
-                type="is-secondary"
-                size="is-large"
-                tag="a"
-                href="https://mobilizon.org"
-                >{{ $t("Pick an instance") }}</b-button
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import RouteName from "../router/name";
-import { CURRENT_USER_CLIENT } from "@/graphql/user";
-import { ICurrentUser } from "@/types/current-user.model";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-    currentUser: CURRENT_USER_CLIENT,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("About {instance}", {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        instance: this?.config?.name,
-      }) as string,
-    };
-  },
-})
-export default class About extends Vue {
-  config!: IConfig;
-  currentUser!: ICurrentUser;
-
-  RouteName = RouteName;
-}
-</script>
-
-<style lang="scss" scoped>
-.hero.is-primary {
-  background: $background-color;
-
-  .title {
-    margin: 30px auto 1rem auto;
-  }
-
-  p {
-    margin-bottom: 1rem;
-  }
-}
-
-.hero.register {
-  .title {
-    color: $violet-1;
-  }
-  background: $purple-2;
-}
-
-aside.menu {
-  position: sticky;
-  top: 2rem;
-  margin-top: 2rem;
-}
-
-.router.column {
-  background: $white;
-}
-
-ul.menu-list > li > a {
-  text-decoration: none;
-}
-</style>
diff --git a/js/src/views/About/AboutInstance.vue b/js/src/views/About/AboutInstance.vue
deleted file mode 100644
index a301fde04..000000000
--- a/js/src/views/About/AboutInstance.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-  <div v-if="config">
-    <section class="hero is-primary">
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title" dir="auto">{{ config.name }}</h1>
-          <p dir="auto">{{ config.description }}</p>
-        </div>
-      </div>
-    </section>
-    <section class="columns contact-statistics" v-if="statistics">
-      <div class="column is-three-quarters-desktop statistics">
-        <i18n tag="p" path="Home to {number} users">
-          <strong slot="number">{{ statistics.numberOfUsers }}</strong>
-        </i18n>
-        <i18n tag="p" path="and {number} groups">
-          <strong slot="number">{{ statistics.numberOfLocalGroups }}</strong>
-        </i18n>
-        <i18n tag="p" path="Who published {number} events">
-          <strong slot="number">{{ statistics.numberOfLocalEvents }}</strong>
-        </i18n>
-        <i18n tag="p" path="And {number} comments">
-          <strong slot="number">{{ statistics.numberOfLocalComments }}</strong>
-        </i18n>
-      </div>
-      <div class="column contact">
-        <p class="has-text-weight-bold">{{ $t("Contact") }}</p>
-        <instance-contact-link
-          v-if="config && config.contact"
-          :contact="config.contact"
-        />
-        <p v-else>{{ $t("No information") }}</p>
-      </div>
-    </section>
-    <hr role="presentation" />
-    <section class="long-description content">
-      <div v-html="config.longDescription" />
-    </section>
-    <hr role="presentation" />
-    <section class="config">
-      <h2 class="subtitle">{{ $t("Instance configuration") }}</h2>
-      <table class="table is-fullwidth">
-        <tr>
-          <td>{{ $t("Instance languages") }}</td>
-          <td
-            v-if="config.languages.length > 0"
-            :title="this.config ? this.config.languages.join(', ') : ''"
-          >
-            {{ formattedLanguageList }}
-          </td>
-          <td v-else>{{ $t("No information") }}</td>
-        </tr>
-        <tr>
-          <td>{{ $t("Mobilizon version") }}</td>
-          <td>{{ config.version }}</td>
-        </tr>
-        <tr>
-          <td>{{ $t("Registrations") }}</td>
-          <td v-if="config.registrationsOpen && config.registrationsAllowlist">
-            {{ $t("Restricted") }}
-          </td>
-          <td v-if="config.registrationsOpen && !config.registrationsAllowlist">
-            {{ $t("Open") }}
-          </td>
-          <td v-else>{{ $t("Closed") }}</td>
-        </tr>
-        <tr>
-          <td>{{ $t("Federation") }}</td>
-          <td v-if="config.federating">{{ $t("Enabled") }}</td>
-          <td v-else>{{ $t("Disabled") }}</td>
-        </tr>
-        <tr>
-          <td>{{ $t("Anonymous participations") }}</td>
-          <td v-if="config.anonymous.participation.allowed">
-            {{ $t("If allowed by organizer") }}
-          </td>
-          <td v-else>{{ $t("Disabled") }}</td>
-        </tr>
-        <tr class="instance-feeds">
-          <td>{{ $t("Instance feeds") }}</td>
-          <td v-if="config.instanceFeeds.enabled" class="buttons">
-            <b-button
-              tag="a"
-              size="is-small"
-              icon-left="rss"
-              href="/feed/instance/atom"
-              target="_blank"
-              >{{ $t("RSS/Atom Feed") }}</b-button
-            >
-
-            <b-button
-              tag="a"
-              size="is-small"
-              icon-left="calendar-sync"
-              href="/feed/instance/ics"
-              target="_blank"
-              >{{ $t("ICS/WebCal Feed") }}</b-button
-            >
-          </td>
-          <td v-else>{{ $t("Disabled") }}</td>
-        </tr>
-      </table>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { formatList } from "@/utils/i18n";
-import InstanceContactLink from "@/components/About/InstanceContactLink.vue";
-import { LANGUAGES_CODES } from "@/graphql/admin";
-import { ILanguage } from "@/types/admin.model";
-import { ABOUT } from "../../graphql/config";
-import { STATISTICS } from "../../graphql/statistics";
-import { IConfig } from "../../types/config.model";
-import { IStatistics } from "../../types/statistics.model";
-
-@Component({
-  apollo: {
-    config: ABOUT,
-    statistics: STATISTICS,
-    languages: {
-      query: LANGUAGES_CODES,
-      variables() {
-        return {
-          codes: this?.config.languages,
-        };
-      },
-      skip() {
-        return !this.config || !this.config?.languages;
-      },
-    },
-  },
-  components: {
-    InstanceContactLink,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("About {instance}", {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        instance: this?.config?.name,
-      }) as string,
-    };
-  },
-})
-export default class AboutInstance extends Vue {
-  config!: IConfig;
-
-  statistics!: IStatistics;
-
-  languages!: ILanguage[];
-
-  get formattedLanguageList(): string {
-    if (this.languages) {
-      const list = this.languages.map(({ name }) => name);
-      return formatList(list);
-    }
-    return "";
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-section {
-  &:not(:first-child) {
-    margin: 2rem auto;
-  }
-
-  &.hero {
-    h1.title {
-      margin: auto;
-    }
-  }
-
-  &.contact-statistics {
-    margin: 2px auto;
-    .statistics {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, 150px);
-      gap: 2rem 0;
-      p {
-        text-align: right;
-        padding: 0 15px;
-
-        & > * {
-          display: block;
-        }
-
-        strong {
-          font-weight: 500;
-          font-size: 32px;
-          line-height: 48px;
-        }
-      }
-    }
-    .contact {
-      h3 {
-        font-weight: bold;
-      }
-      p {
-        width: 200px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-  tr.instance-feeds {
-    height: 3rem;
-    td:first-child {
-      vertical-align: middle;
-    }
-    td:last-child {
-      height: 3rem;
-    }
-  }
-}
-</style>
diff --git a/js/src/views/About/AboutInstanceView.vue b/js/src/views/About/AboutInstanceView.vue
new file mode 100644
index 000000000..13a33f1e0
--- /dev/null
+++ b/js/src/views/About/AboutInstanceView.vue
@@ -0,0 +1,214 @@
+<template>
+  <div v-if="config">
+    <section class="p-6 bg-primary text-white">
+      <h1 dir="auto">{{ config.name }}</h1>
+      <p dir="auto">{{ config.description }}</p>
+    </section>
+    <section
+      class="px-2 flex flex-wrap gap-2 contact-statistics"
+      v-if="statistics"
+    >
+      <div class="statistics flex-1 min-w-[20rem]">
+        <i18n-t tag="p" keypath="Home to {number} users">
+          <template #number>
+            <strong>{{ statistics.numberOfUsers }}</strong>
+          </template>
+        </i18n-t>
+        <i18n-t tag="p" keypath="and {number} groups">
+          <template #number>
+            <strong>{{ statistics.numberOfLocalGroups }}</strong>
+          </template>
+        </i18n-t>
+        <i18n-t tag="p" keypath="Who published {number} events">
+          <template #number>
+            <strong>{{ statistics.numberOfLocalEvents }}</strong>
+          </template>
+        </i18n-t>
+        <i18n-t tag="p" keypath="And {number} comments">
+          <template #number>
+            <strong>{{ statistics.numberOfLocalComments }}</strong>
+          </template>
+        </i18n-t>
+      </div>
+      <div class="">
+        <p class="font-bold">{{ t("Contact") }}</p>
+        <instance-contact-link
+          v-if="config && config.contact"
+          :contact="config.contact"
+        />
+        <p v-else>{{ t("No information") }}</p>
+      </div>
+    </section>
+    <hr role="presentation" v-if="config.longDescription" />
+    <section class="long-description content">
+      <div v-html="config.longDescription" />
+    </section>
+    <hr role="presentation" />
+    <section class="px-3">
+      <h2 class="text-xl">{{ t("Instance configuration") }}</h2>
+      <table class="border-collapse table-auto w-full">
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td>{{ t("Instance languages") }}</td>
+          <td
+            v-if="config.languages.length > 0"
+            :title="config.languages.join(', ') ?? ''"
+          >
+            {{ formattedLanguageList }}
+          </td>
+          <td v-else>{{ t("No information") }}</td>
+        </tr>
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td>{{ t("Mobilizon version") }}</td>
+          <td>{{ config.version }}</td>
+        </tr>
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td>{{ t("Registrations") }}</td>
+          <td v-if="config.registrationsOpen && config.registrationsAllowlist">
+            {{ t("Restricted") }}
+          </td>
+          <td v-if="config.registrationsOpen && !config.registrationsAllowlist">
+            {{ t("Open") }}
+          </td>
+          <td v-else>{{ t("Closed") }}</td>
+        </tr>
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td>{{ t("Federation") }}</td>
+          <td v-if="config.federating">{{ t("Enabled") }}</td>
+          <td v-else>{{ t("Disabled") }}</td>
+        </tr>
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td>{{ t("Anonymous participations") }}</td>
+          <td v-if="config.anonymous.participation.allowed">
+            {{ t("If allowed by organizer") }}
+          </td>
+          <td v-else>{{ t("Disabled") }}</td>
+        </tr>
+        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+          <td>{{ t("Instance feeds") }}</td>
+          <td v-if="config.instanceFeeds.enabled" class="flex gap-2">
+            <o-button
+              tag="a"
+              size="small"
+              icon-left="rss"
+              href="/feed/instance/atom"
+              target="_blank"
+              >{{ t("RSS/Atom Feed") }}</o-button
+            >
+
+            <o-button
+              tag="a"
+              size="small"
+              icon-left="calendar-sync"
+              href="/feed/instance/ics"
+              target="_blank"
+              >{{ t("ICS/WebCal Feed") }}</o-button
+            >
+          </td>
+          <td v-else>{{ t("Disabled") }}</td>
+        </tr>
+      </table>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { formatList } from "@/utils/i18n";
+import InstanceContactLink from "@/components/About/InstanceContactLink.vue";
+import { LANGUAGES_CODES } from "@/graphql/admin";
+import { ILanguage } from "@/types/admin.model";
+import { ABOUT } from "../../graphql/config";
+import { STATISTICS } from "../../graphql/statistics";
+import { IConfig } from "../../types/config.model";
+import { IStatistics } from "../../types/statistics.model";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { result: configResult } = useQuery<{ config: IConfig }>(ABOUT);
+
+const config = computed(() => configResult.value?.config);
+
+const { result: statisticsResult } = useQuery<{ statistics: IStatistics }>(
+  STATISTICS
+);
+
+const statistics = computed(() => statisticsResult.value?.statistics);
+
+const { result: languagesResult } = useQuery<{ languages: ILanguage[] }>(
+  LANGUAGES_CODES,
+  () => ({
+    codes: config.value?.languages,
+  }),
+  () => ({
+    enabled: config.value?.languages !== undefined,
+  })
+);
+
+const languages = computed(() => languagesResult.value?.languages);
+
+const formattedLanguageList = computed((): string => {
+  if (languages.value) {
+    const list = languages.value?.map(({ name }) => name) ?? [];
+    return formatList(list);
+  }
+  return "";
+});
+
+const { t } = useI18n({ useScope: "global" });
+
+// metaInfo() {
+//   return {
+//     title: this.t("About {instance}", {
+//       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//       // @ts-ignore
+//       instance: this?.config?.name,
+//     }) as string,
+//   };
+// }
+</script>
+
+<style lang="scss" scoped>
+section {
+  &:not(:first-child) {
+    margin: 2rem auto;
+  }
+
+  &.hero {
+    h1.title {
+      margin: auto;
+    }
+  }
+
+  &.contact-statistics {
+    margin: 2px auto;
+    .statistics {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, 150px);
+      gap: 2rem 0;
+      p {
+        text-align: right;
+        padding: 0 15px;
+
+        & > * {
+          display: block;
+        }
+
+        strong {
+          font-weight: 500;
+          font-size: 32px;
+          line-height: 48px;
+        }
+      }
+    }
+  }
+  tr.instance-feeds {
+    height: 3rem;
+    td:first-child {
+      vertical-align: middle;
+    }
+    td:last-child {
+      height: 3rem;
+    }
+  }
+}
+</style>
diff --git a/js/src/views/About/Glossary.vue b/js/src/views/About/Glossary.vue
deleted file mode 100644
index 6ef9e7a1c..000000000
--- a/js/src/views/About/Glossary.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div class="container section">
-    <h2 class="title">{{ $t("Glossary") }}</h2>
-    <div class="content" v-if="config">
-      <p>
-        {{
-          $t(
-            "Some terms, technical or otherwise, used in the text below may cover concepts that are difficult to grasp. We have provided a glossary here to help you understand them better:"
-          )
-        }}
-      </p>
-      <dl>
-        <dt>{{ $t("Instance") }}</dt>
-        <i18n
-          tag="dd"
-          path="An instance is an installed version of the Mobilizon software running on a server. An instance can be run by anyone using the {mobilizon_software} or other federated apps, aka the “fediverse”. This instance's name is {instance_name}. Mobilizon is a federated network of multiple instances (just like email servers), users registered on different instances may communicate even though they didn't register on the same instance."
-        >
-          <a slot="mobilizon_software" href="https://joinmobilizon.org">{{
-            $t("Mobilizon software")
-          }}</a>
-          <b slot="instance_name">{{ config.name }}</b>
-        </i18n>
-        <dt>{{ $t("Instance administrator") }}</dt>
-        <dd>
-          {{
-            $t(
-              "The instance administrator is the person or entity that runs this Mobilizon instance."
-            )
-          }}
-        </dd>
-        <dt>{{ $t("Application") }}</dt>
-        <dd>
-          {{
-            $t(
-              "In the following context, an application is a software, either provided by the Mobilizon team or by a 3rd-party, used to interact with your instance."
-            )
-          }}
-        </dd>
-        <dt>{{ $t("API") }}</dt>
-        <dd>
-          {{
-            $t(
-              "An “application programming interface” or “API” is a communication protocol that allows software components to communicate with each other. The Mobilizon API, for example, can allow third-party software tools to communicate with Mobilizon instances to carry out certain actions, such as posting events on your behalf, automatically and remotely."
-            )
-          }}
-        </dd>
-        <dt>{{ $t("SSL/TLS") }}</dt>
-        <i18n
-          tag="dd"
-          path="SSL and it's successor TLS are encryption technologies to secure data communications when using the service. You can recognize an encrypted connection in your browser's address line when the URL begins with {https} and the lock icon is displayed in your browser's address bar."
-        >
-          <code slot="https">https://</code>
-        </i18n>
-        <dt>{{ $t("Cookies and Local storage") }}</dt>
-        <dd>
-          {{
-            $t(
-              "A cookie is a small file containing information that is sent to your computer when you visit a website. When you visit the site again, the cookie allows that site to recognize your browser. Cookies may store user preferences and other information. You can configure your browser to refuse all cookies. However, this may result in some website features or services partially working. Local storage works the same way but allows you to store more data."
-            )
-          }}
-        </dd>
-      </dl>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { ABOUT } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
-
-@Component({
-  apollo: {
-    config: ABOUT,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Glossary") as string,
-    };
-  },
-})
-export default class Glossary extends Vue {
-  config!: IConfig;
-}
-</script>
-
-<style lang="scss" scoped>
-::v-deep dt {
-  font-weight: bold;
-}
-</style>
diff --git a/js/src/views/About/GlossaryView.vue b/js/src/views/About/GlossaryView.vue
new file mode 100644
index 000000000..7faed36f1
--- /dev/null
+++ b/js/src/views/About/GlossaryView.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="container mx-auto px-2">
+    <h1>{{ t("Glossary") }}</h1>
+    <div class="prose dark:prose-invert" v-if="config">
+      <p>
+        {{
+          t(
+            "Some terms, technical or otherwise, used in the text below may cover concepts that are difficult to grasp. We have provided a glossary here to help you understand them better:"
+          )
+        }}
+      </p>
+      <dl>
+        <dt>{{ t("Instance") }}</dt>
+        <i18n-t
+          tag="dd"
+          keypath="An instance is an installed version of the Mobilizon software running on a server. An instance can be run by anyone using the {mobilizon_software} or other federated apps, aka the “fediverse”. This instance's name is {instance_name}. Mobilizon is a federated network of multiple instances (just like email servers), users registered on different instances may communicate even though they didn't register on the same instance."
+        >
+          <template #mobilizon_software
+            ><a href="https://joinmobilizon.org">{{
+              t("Mobilizon software")
+            }}</a></template
+          >
+
+          <template #instance_name>
+            <b>{{ config.name }}</b>
+          </template>
+        </i18n-t>
+        <dt>{{ t("Instance administrator") }}</dt>
+        <dd>
+          {{
+            t(
+              "The instance administrator is the person or entity that runs this Mobilizon instance."
+            )
+          }}
+        </dd>
+        <dt>{{ t("Application") }}</dt>
+        <dd>
+          {{
+            t(
+              "In the following context, an application is a software, either provided by the Mobilizon team or by a 3rd-party, used to interact with your instance."
+            )
+          }}
+        </dd>
+        <dt>{{ t("API") }}</dt>
+        <dd>
+          {{
+            t(
+              "An “application programming interface” or “API” is a communication protocol that allows software components to communicate with each other. The Mobilizon API, for example, can allow third-party software tools to communicate with Mobilizon instances to carry out certain actions, such as posting events on your behalf, automatically and remotely."
+            )
+          }}
+        </dd>
+        <dt>{{ t("SSL/TLS") }}</dt>
+        <i18n-t
+          tag="dd"
+          keypath="SSL and it's successor TLS are encryption technologies to secure data communications when using the service. You can recognize an encrypted connection in your browser's address line when the URL begins with {https} and the lock icon is displayed in your browser's address bar."
+        >
+          <template #https><code>https://</code></template>
+        </i18n-t>
+        <dt>{{ t("Cookies and Local storage") }}</dt>
+        <dd>
+          {{
+            t(
+              "A cookie is a small file containing information that is sent to your computer when you visit a website. When you visit the site again, the cookie allows that site to recognize your browser. Cookies may store user preferences and other information. You can configure your browser to refuse all cookies. However, this may result in some website features or services partially working. Local storage works the same way but allows you to store more data."
+            )
+          }}
+        </dd>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { ABOUT } from "../../graphql/config";
+import { IConfig } from "../../types/config.model";
+
+const { result: configResult } = useQuery<{ config: IConfig }>(ABOUT);
+
+const config = computed(() => configResult.value?.config);
+
+const { t } = useI18n({ useScope: "global" });
+
+// metaInfo() {
+//   return {
+//     title: this.t("Glossary") as string,
+//   };
+// },
+</script>
+
+<style lang="scss" scoped>
+:deep(dt) {
+  font-weight: bold;
+}
+</style>
diff --git a/js/src/views/About/Privacy.vue b/js/src/views/About/Privacy.vue
deleted file mode 100644
index 66e9d5d3d..000000000
--- a/js/src/views/About/Privacy.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div class="container section">
-    <h2 class="title">{{ $t("Privacy Policy") }}</h2>
-    <div
-      class="content"
-      v-if="config && config.privacy"
-      v-html="config.privacy.bodyHtml"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { PRIVACY } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import { InstancePrivacyType } from "@/types/enums";
-
-@Component({
-  apollo: {
-    config: {
-      query: PRIVACY,
-      variables() {
-        return {
-          locale: this.locale,
-        };
-      },
-      skip() {
-        return !this.locale;
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Privacy Policy") as string,
-    };
-  },
-})
-export default class Privacy extends Vue {
-  config!: IConfig;
-
-  locale: string | null = null;
-
-  created(): void {
-    this.locale = this.$i18n.locale;
-  }
-
-  @Watch("config", { deep: true })
-  watchConfig(config: IConfig): void {
-    if (config?.privacy?.type) {
-      this.redirectToUrl();
-    }
-  }
-
-  redirectToUrl(): void {
-    if (this.config?.privacy?.type === InstancePrivacyType.URL) {
-      window.location.replace(this.config?.privacy?.url);
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-main > .container {
-  background: $white;
-
-  ::v-deep dt {
-    font-weight: bold;
-  }
-}
-.content ::v-deep li {
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/js/src/views/About/PrivacyView.vue b/js/src/views/About/PrivacyView.vue
new file mode 100644
index 000000000..2d8e0d42f
--- /dev/null
+++ b/js/src/views/About/PrivacyView.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="container mx-auto px-2">
+    <h1>{{ t("Privacy Policy") }}</h1>
+    <div
+      class="prose dark:prose-invert"
+      v-if="config?.privacy"
+      v-html="config.privacy.bodyHtml"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PRIVACY } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { InstancePrivacyType } from "@/types/enums";
+import { useQuery } from "@vue/apollo-composable";
+import { computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { locale } = useI18n({ useScope: "global" });
+
+const { result: configResult } = useQuery<{ config: IConfig }>(
+  PRIVACY,
+  () => ({
+    locale: locale.value,
+  }),
+  () => ({
+    enabled: locale.value !== undefined,
+  })
+);
+
+const config = computed(() => configResult.value?.config);
+
+const { t } = useI18n({ useScope: "global" });
+
+// metaInfo() {
+//   return {
+//     title: this.t("Privacy Policy") as string,
+//   };
+// },
+
+watch(config, () => {
+  if (config.value?.privacy?.type === InstancePrivacyType.URL) {
+    window.location.replace(config.value?.privacy?.url);
+  }
+});
+</script>
diff --git a/js/src/views/About/Rules.vue b/js/src/views/About/Rules.vue
deleted file mode 100644
index bf58f5f62..000000000
--- a/js/src/views/About/Rules.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="container section" v-if="config">
-    <h2 class="title">{{ $t("Rules") }}</h2>
-    <div class="content" v-html="config.rules" v-if="config.rules" />
-    <p v-else>{{ $t("No rules defined yet.") }}</p>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { RULES } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import RouteName from "../../router/name";
-
-@Component({
-  apollo: {
-    config: {
-      query: RULES,
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Rules") as string,
-    };
-  },
-})
-export default class Rules extends Vue {
-  config!: IConfig;
-
-  RouteName = RouteName;
-}
-</script>
-<style lang="scss" scoped>
-main > .container {
-  background: $white;
-}
-.content ::v-deep li {
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/js/src/views/About/RulesView.vue b/js/src/views/About/RulesView.vue
new file mode 100644
index 000000000..37c15345c
--- /dev/null
+++ b/js/src/views/About/RulesView.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="container mx-auto px-2" v-if="config">
+    <h1>{{ t("Rules") }}</h1>
+    <div
+      class="prose dark:prose-invert"
+      v-html="config.rules"
+      v-if="config.rules"
+    />
+    <p v-else>{{ t("No rules defined yet.") }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { RULES } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { result: configResult } = useQuery<{ config: IConfig }>(RULES);
+
+const config = computed(() => configResult.value?.config);
+
+const { t } = useI18n({ useScope: "global" });
+
+// metaInfo() {
+//     return {
+//       title: this.t("Rules") as string,
+//     };
+//   },
+</script>
diff --git a/js/src/views/About/Terms.vue b/js/src/views/About/Terms.vue
deleted file mode 100644
index dc20db2ad..000000000
--- a/js/src/views/About/Terms.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="container section">
-    <h2 class="title">{{ $t("Terms") }}</h2>
-    <div class="content" v-if="config" v-html="config.terms.bodyHtml" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { TERMS } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import { InstanceTermsType } from "@/types/enums";
-
-@Component({
-  apollo: {
-    config: {
-      query: TERMS,
-      variables() {
-        return {
-          locale: this.locale,
-        };
-      },
-      skip() {
-        return !this.locale;
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Terms") as string,
-    };
-  },
-})
-export default class Terms extends Vue {
-  config!: IConfig;
-
-  locale: string | null = null;
-
-  created(): void {
-    this.locale = this.$i18n.locale;
-  }
-
-  @Watch("config", { deep: true })
-  watchConfig(config: IConfig): void {
-    if (config?.terms?.type) {
-      this.redirectToUrl();
-    }
-  }
-
-  redirectToUrl(): void {
-    if (this.config?.terms?.type === InstanceTermsType.URL) {
-      window.location.replace(this.config?.terms?.url);
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.content ::v-deep li {
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/js/src/views/About/TermsView.vue b/js/src/views/About/TermsView.vue
new file mode 100644
index 000000000..13df6adfe
--- /dev/null
+++ b/js/src/views/About/TermsView.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="container mx-auto px-2">
+    <h1>{{ t("Terms") }}</h1>
+    <o-loading v-model="termsLoading" />
+    <div
+      class="prose dark:prose-invert"
+      v-if="config"
+      v-html="config.terms.bodyHtml"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TERMS } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { InstanceTermsType } from "@/types/enums";
+import { useQuery } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
+import { computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t, locale } = useI18n({ useScope: "global" });
+
+const { result: termsResult, loading: termsLoading } = useQuery<{
+  config: IConfig;
+}>(
+  TERMS,
+  () => ({
+    locale: locale.value,
+  }),
+  () => ({
+    enabled: locale.value !== undefined,
+  })
+);
+
+const config = computed(() => termsResult.value?.config);
+
+watch(config, () => {
+  if (config.value?.terms?.type) {
+    redirectToUrl();
+  }
+});
+
+const redirectToUrl = (): void => {
+  if (config.value?.terms?.type === InstanceTermsType.URL) {
+    window.location.replace(config.value?.terms?.url);
+  }
+};
+
+useHead({
+  title: computed(() => t("Terms")),
+});
+</script>
diff --git a/js/src/views/AboutView.vue b/js/src/views/AboutView.vue
new file mode 100644
index 000000000..8476b2396
--- /dev/null
+++ b/js/src/views/AboutView.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <section class="container mx-auto">
+      <div class="flex flex-wrap gap-4">
+        <aside class="w-64 mt-6">
+          <div
+            class="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800"
+          >
+            <p>
+              <router-link
+                class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+                :to="{ name: RouteName.ABOUT_INSTANCE }"
+                >{{ t("About this instance") }}</router-link
+              >
+            </p>
+            <p class="menu-label has-text-grey-dark">
+              {{ t("Legal") }}
+            </p>
+            <ul>
+              <li>
+                <router-link
+                  class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+                  :to="{ name: RouteName.TERMS }"
+                  >{{ t("Terms of service") }}</router-link
+                >
+              </li>
+              <li>
+                <router-link
+                  class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+                  :to="{ name: RouteName.PRIVACY }"
+                  >{{ t("Privacy policy") }}</router-link
+                >
+              </li>
+              <li>
+                <router-link
+                  class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+                  :to="{ name: RouteName.RULES }"
+                  >{{ t("Instance rules") }}</router-link
+                >
+              </li>
+              <li>
+                <router-link
+                  class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+                  :to="{ name: RouteName.GLOSSARY }"
+                  >{{ t("Glossary") }}</router-link
+                >
+              </li>
+            </ul>
+          </div>
+        </aside>
+        <div class="container mx-auto flex-1 bg-white dark:bg-gray-700">
+          <router-view />
+        </div>
+      </div>
+    </section>
+    <div class="bg-secondary dark:bg-gray-700 p-6">
+      <div class="container mx-auto">
+        <h1 class="text-4xl font-bold text-black/70">
+          {{ t("Powered by Mobilizon") }}
+        </h1>
+        <p>
+          {{
+            t(
+              "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising."
+            )
+          }}
+        </p>
+        <o-button
+          tag="a"
+          icon-left="open-in-new"
+          class="text-2xl bg-primary text-white leading-6"
+          href="https://joinmobilizon.org"
+          >{{ t("Learn more") }}</o-button
+        >
+      </div>
+    </div>
+    <div v-if="!currentUser || !currentUser.id" class="bg-purple-2 pb-3">
+      <div class="container mx-auto text-center py-10 px-6">
+        <div class="flex flex-wrap">
+          <div class="flex-1" v-if="config && config.registrationsOpen">
+            <h2 class="text-4xl text-violet-1 font-bold">
+              {{ t("Register on this instance") }}
+            </h2>
+            <o-button
+              tag="router-link"
+              class="bg-secondary text-lg text-black"
+              :to="{ name: RouteName.REGISTER }"
+              >{{ t("Create an account") }}</o-button
+            >
+          </div>
+          <div class="flex-1">
+            <h2 class="text-4xl text-violet-1 font-bold">
+              {{ t("Find another instance") }}
+            </h2>
+            <o-button
+              tag="a"
+              class="bg-secondary text-lg text-black"
+              href="https://mobilizon.org"
+              >{{ t("Pick an instance") }}</o-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ABOUT } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import RouteName from "../router/name";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import { useCurrentUserClient } from "@/composition/apollo/user";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+
+const { currentUser } = useCurrentUserClient();
+
+const { result: configResult } = useQuery<{ config: IConfig }>(ABOUT);
+
+const config = computed(() => configResult.value?.config);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() =>
+    t("About {instance}", { instance: config.value?.name })
+  ),
+});
+
+// metaInfo() {
+//   return {
+//     title: this.t("About {instance}", {
+//       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//       // @ts-ignore
+//       instance: this?.config?.name,
+//     }) as string,
+//   };
+// },
+</script>
diff --git a/js/src/views/Account/IdentityPicker.vue b/js/src/views/Account/IdentityPicker.vue
index 50c4c9666..254e51f37 100644
--- a/js/src/views/Account/IdentityPicker.vue
+++ b/js/src/views/Account/IdentityPicker.vue
@@ -1,71 +1,85 @@
 <template>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">{{ $t("Pick an identity") }}</p>
+  <div>
+    <header class="">
+      <h2 class="">{{ t("Pick an identity") }}</h2>
     </header>
-    <section class="modal-card-body">
-      <div class="list is-hoverable list-none">
-        <a
-          class="list-item"
+    <section class="">
+      <transition-group
+        tag="ul"
+        class="grid grid-cols-1 gap-y-3 m-5 max-w-md"
+        enter-active-class="duration-300 ease-out"
+        enter-from-class="transform opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="transform opacity-0"
+      >
+        <li
+          class="relative focus-within:shadow-lg"
           v-for="identity in identities"
-          :key="identity.id"
-          :class="{
-            'is-active': currentIdentity && identity.id === currentIdentity.id,
-          }"
-          @click="currentIdentity = identity"
+          :key="identity?.id"
         >
-          <div class="media">
-            <img
-              class="media-left image is-48x48"
-              v-if="identity.avatar"
-              :src="identity.avatar.url"
-              alt=""
-            />
-            <b-icon
-              class="media-left"
-              v-else
-              size="is-large"
-              icon="account-circle"
-            />
-            <div class="media-content">
-              <h3>@{{ identity.preferredUsername }}</h3>
-              <small>{{ identity.name }}</small>
+          <input
+            class="sr-only peer"
+            type="radio"
+            :value="identity"
+            name="availableActors"
+            v-model="currentIdentity"
+            :id="`availableActor-${identity?.id}`"
+          />
+          <label
+            class="flex flex-wrap p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
+            :for="`availableActor-${identity?.id}`"
+          >
+            <figure class="h-12 w-12" v-if="identity?.avatar">
+              <img
+                class="rounded-full h-full w-full object-cover"
+                :src="identity.avatar.url"
+                alt=""
+                width="48"
+                height="48"
+              />
+            </figure>
+            <AccountCircle v-else :size="48" />
+            <div class="flex-1">
+              <h3>{{ identity?.name }}</h3>
+              <small>{{ `@${identity?.preferredUsername}` }}</small>
             </div>
-          </div>
-        </a>
-      </div>
+          </label>
+        </li>
+      </transition-group>
     </section>
     <slot name="footer" />
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { IActor } from "@/types/actor";
-import { IDENTITIES } from "@/graphql/actor";
+<script lang="ts" setup>
+import { IPerson } from "@/types/actor";
+import { useCurrentUserIdentities } from "@/composition/apollo/actor";
+import { computed } from "vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
 
-@Component({
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-    },
+const { identities } = useCurrentUserIdentities();
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Identities")),
+});
+
+const props = defineProps<{
+  modelValue: IPerson;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const currentIdentity = computed<IPerson>({
+  get(): IPerson {
+    return props.modelValue;
   },
-  metaInfo() {
-    return {
-      title: this.$t("Identities") as string,
-    };
+  set(identity: IPerson) {
+    emit("update:modelValue", identity);
   },
-})
-export default class IdentityPicker extends Vue {
-  @Prop() value!: IActor;
-
-  identities: IActor[] = [];
-
-  get currentIdentity(): IActor {
-    return this.value;
-  }
-
-  set currentIdentity(identity: IActor) {
-    this.$emit("input", identity);
-  }
-}
+});
 </script>
diff --git a/js/src/views/Account/IdentityPickerWrapper.vue b/js/src/views/Account/IdentityPickerWrapper.vue
index 5f2293951..80bdba644 100644
--- a/js/src/views/Account/IdentityPickerWrapper.vue
+++ b/js/src/views/Account/IdentityPickerWrapper.vue
@@ -1,122 +1,111 @@
 <template>
-  <div class="identity-picker">
+  <div>
     <div
       v-if="inline && currentIdentity"
-      class="inline box"
-      :class="{
-        'has-background-grey-lighter': masked,
-        'no-other-identity': !hasOtherIdentities,
-      }"
+      class="inline box cursor-pointer"
       @click="activateModal"
     >
-      <div class="media">
-        <div class="media-left">
-          <figure class="image is-48x48" v-if="currentIdentity.avatar">
+      <div class="flex gap-1">
+        <div class="">
+          <figure class="" v-if="currentIdentity.avatar">
             <img
-              class="image is-rounded"
+              class="rounded-full"
               :src="currentIdentity.avatar.url"
               alt=""
+              width="48"
+              height="48"
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <AccountCircle v-else :size="48" />
         </div>
-        <div class="media-content" v-if="currentIdentity.name">
-          <p class="is-4">{{ currentIdentity.name }}</p>
-          <p class="is-6 has-text-grey">
+        <div class="" v-if="currentIdentity.name">
+          <p class="">{{ currentIdentity.name }}</p>
+          <p class="">
             {{ `@${currentIdentity.preferredUsername}` }}
-            <span v-if="masked">{{ $t("(Masked)") }}</span>
+            <span v-if="masked">{{ t("(Masked)") }}</span>
           </p>
         </div>
-        <div class="media-content" v-else>
+        <div class="" v-else>
           {{ `@${currentIdentity.preferredUsername}` }}
         </div>
-        <b-button
-          type="is-text"
-          v-if="identities.length > 1"
+        <o-button
+          variant="text"
+          v-if="identities && identities.length > 1"
           @click="activateModal"
         >
-          {{ $t("Change") }}
-        </b-button>
+          {{ t("Change") }}
+        </o-button>
       </div>
     </div>
-    <span v-else-if="currentIdentity" class="block" @click="activateModal">
-      <figure class="image is-48x48" v-if="currentIdentity.avatar">
-        <img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
-      </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
-    </span>
-    <b-modal
-      v-model="isComponentModalActive"
-      has-modal-card
-      :close-button-aria-label="$t('Close')"
+    <span
+      v-else-if="currentIdentity"
+      class="cursor-pointer"
+      @click="activateModal"
     >
-      <identity-picker v-model="currentIdentity" />
-    </b-modal>
+      <figure class="" v-if="currentIdentity.avatar">
+        <img
+          class="rounded"
+          :src="currentIdentity.avatar.url"
+          alt=""
+          width="48"
+          height="48"
+        />
+      </figure>
+      <AccountCircle v-else :size="48" />
+    </span>
+    <o-modal
+      v-model:active="isComponentModalActive"
+      :close-button-aria-label="t('Close')"
+    >
+      <identity-picker v-if="currentIdentity" v-model="currentIdentity" />
+    </o-modal>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { IDENTITIES } from "@/graphql/actor";
-import { IActor } from "../../types/actor";
+<script lang="ts" setup>
+import { useCurrentUserIdentities } from "@/composition/apollo/actor";
+import { computed, ref } from "vue";
+import { IPerson } from "../../types/actor";
 import IdentityPicker from "./IdentityPicker.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  components: { IdentityPicker },
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-    },
+const { identities } = useCurrentUserIdentities();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: IPerson;
+    inline?: boolean;
+    masked?: boolean;
+  }>(),
+  {
+    inline: true,
+    masked: false,
+  }
+);
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { t } = useI18n({ useScope: "global" });
+
+const isComponentModalActive = ref(false);
+
+const currentIdentity = computed({
+  get(): IPerson | undefined {
+    return props.modelValue;
   },
-})
-export default class IdentityPickerWrapper extends Vue {
-  @Prop() value!: IActor;
+  set(identity: IPerson | undefined) {
+    emit("update:modelValue", identity);
+    isComponentModalActive.value = false;
+  },
+});
 
-  @Prop({ default: true, type: Boolean }) inline!: boolean;
+const hasOtherIdentities = computed((): boolean => {
+  return identities.value !== undefined && identities.value.length > 1;
+});
 
-  @Prop({ type: Boolean, required: false, default: false }) masked!: boolean;
-
-  isComponentModalActive = false;
-
-  identities: IActor[] = [];
-
-  @Watch("value")
-  updateCurrentActor(value: IActor): void {
-    this.currentIdentity = value;
+const activateModal = (): void => {
+  if (hasOtherIdentities.value) {
+    isComponentModalActive.value = true;
   }
-
-  get currentIdentity(): IActor | undefined {
-    return this.value;
-  }
-
-  set currentIdentity(identity: IActor | undefined) {
-    this.$emit("input", identity);
-    this.isComponentModalActive = false;
-  }
-
-  get hasOtherIdentities(): boolean {
-    return this.identities.length > 1;
-  }
-
-  activateModal(): void {
-    if (this.hasOtherIdentities) {
-      this.isComponentModalActive = true;
-    }
-  }
-}
+};
 </script>
-<style lang="scss">
-.identity-picker {
-  .block {
-    cursor: pointer;
-  }
-
-  .inline:not(.no-other-identity) {
-    cursor: pointer;
-  }
-
-  .media {
-    border-top: none;
-    padding-top: 0;
-  }
-}
-</style>
diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
deleted file mode 100644
index 07db71e0d..000000000
--- a/js/src/views/Account/Register.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<template>
-  <section class="section container">
-    <div class="columns is-mobile is-centered">
-      <div class="column is-half-desktop">
-        <h1 class="title" v-if="userAlreadyActivated">
-          {{ $t("Congratulations, your account is now created!") }}
-        </h1>
-        <h1 class="title" v-else>
-          {{
-            $t("Register an account on {instanceName}!", {
-              instanceName: config.name,
-            })
-          }}
-        </h1>
-        <p class="content" v-if="userAlreadyActivated">
-          {{ $t("Now, create your first profile:") }}
-        </p>
-        <form v-if="!validationSent" @submit.prevent="submit">
-          <b-field :label="$t('Displayed nickname')">
-            <b-input
-              aria-required="true"
-              required
-              v-model="identity.name"
-              @input="autoUpdateUsername($event)"
-            />
-          </b-field>
-
-          <b-field
-            :label="$t('Username')"
-            :type="errors.preferred_username ? 'is-danger' : null"
-            :message="errors.preferred_username"
-          >
-            <b-field
-              :message="
-                $t(
-                  'Only alphanumeric lowercased characters and underscores are supported.'
-                )
-              "
-            >
-              <b-input
-                aria-required="true"
-                required
-                expanded
-                v-model="identity.preferredUsername"
-                :validation-message="
-                  identity.preferredUsername
-                    ? $t(
-                        'Only alphanumeric lowercased characters and underscores are supported.'
-                      )
-                    : null
-                "
-              />
-              <p class="control">
-                <span class="button is-static">@{{ host }}</span>
-              </p>
-            </b-field>
-          </b-field>
-          <p class="description">
-            {{
-              $t(
-                "This identifier is unique to your profile. It allows others to find you."
-              )
-            }}
-          </p>
-
-          <b-field :label="$t('Short bio')">
-            <b-input
-              type="textarea"
-              maxlength="100"
-              rows="2"
-              v-model="identity.summary"
-            />
-          </b-field>
-
-          <p class="content">
-            {{
-              $t(
-                "You will be able to add an avatar and set other options in your account settings."
-              )
-            }}
-          </p>
-
-          <p class="control has-text-centered">
-            <b-button
-              type="is-primary"
-              size="is-large"
-              native-type="submit"
-              :disabled="sendingValidation"
-              >{{ $t("Create my profile") }}</b-button
-            >
-          </p>
-        </form>
-
-        <div v-if="validationSent && !userAlreadyActivated">
-          <b-message type="is-success" :closable="false">
-            <h2 class="title">
-              {{
-                $t("Your account is nearly ready, {username}", {
-                  username: identity.name || identity.preferredUsername,
-                })
-              }}
-            </h2>
-            <i18n path="A validation email was sent to {email}" tag="p">
-              <code slot="email">{{ email }}</code>
-            </i18n>
-            <p>
-              {{
-                $t(
-                  "Before you can login, you need to click on the link inside it to validate your account."
-                )
-              }}
-            </p>
-          </b-message>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
-import { mixins } from "vue-class-component";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import { IPerson } from "../../types/actor";
-import { IDENTITIES, REGISTER_PERSON } from "../../graphql/actor";
-import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
-import RouteName from "../../router/name";
-import { changeIdentity } from "../../utils/auth";
-import identityEditionMixin from "../../mixins/identityEdition";
-import { ApolloCache, FetchResult } from "@apollo/client/core";
-import { ActorType } from "@/types/enums";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Register") as string,
-    };
-  },
-})
-export default class Register extends mixins(identityEditionMixin) {
-  @Prop({ type: String, required: true }) email!: string;
-
-  @Prop({ type: Boolean, required: false, default: false })
-  userAlreadyActivated!: boolean;
-
-  config!: IConfig;
-
-  host?: string = MOBILIZON_INSTANCE_HOST;
-
-  errors: Record<string, unknown> = {};
-
-  validationSent = false;
-
-  sendingValidation = false;
-
-  async created(): Promise<void> {
-    // Make sure no one goes to this page if we don't want to
-    if (!this.email) {
-      await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
-    }
-  }
-
-  async submit(): Promise<void> {
-    try {
-      this.sendingValidation = true;
-      this.errors = {};
-      const { data } = await this.$apollo.mutate<{ registerPerson: IPerson }>({
-        mutation: REGISTER_PERSON,
-        variables: { email: this.email, ...this.identity },
-        update: (
-          store: ApolloCache<{ registerPerson: IPerson }>,
-          { data: localData }: FetchResult
-        ) => {
-          if (this.userAlreadyActivated) {
-            const identitiesData = store.readQuery<{ identities: IPerson[] }>({
-              query: IDENTITIES,
-            });
-
-            if (identitiesData && localData) {
-              const newPersonData = {
-                ...localData.registerPerson,
-                type: ActorType.PERSON,
-              };
-
-              store.writeQuery({
-                query: IDENTITIES,
-                data: {
-                  ...identitiesData,
-                  identities: [...identitiesData.identities, newPersonData],
-                },
-              });
-            }
-          }
-        },
-      });
-      if (data) {
-        this.validationSent = true;
-        window.localStorage.setItem("new-registered-user", "yes");
-
-        if (this.userAlreadyActivated) {
-          await changeIdentity(
-            this.$apollo.provider.defaultClient,
-            data.registerPerson
-          );
-
-          await this.$router.push({ name: RouteName.HOME });
-        }
-      }
-    } catch (errorCatched: any) {
-      this.errors = errorCatched.graphQLErrors.reduce(
-        (acc: { [key: string]: string }, error: any) => {
-          acc[error.details || error.field] = error.message;
-          return acc;
-        },
-        {}
-      );
-      console.error("Error while registering person", errorCatched);
-      console.error("Errors while registering person", this.errors);
-      this.sendingValidation = false;
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.avatar-enter-active {
-  transition: opacity 1s ease;
-}
-
-.avatar-enter,
-.avatar-leave-to {
-  opacity: 0;
-}
-
-.avatar-leave {
-  display: none;
-}
-
-.container .columns {
-  margin: 1rem auto 3rem;
-}
-
-p.description {
-  font-size: 0.9rem;
-  margin-bottom: 15px;
-  margin-top: -10px;
-}
-
-section.section {
-  background: $white;
-}
-</style>
diff --git a/js/src/views/Account/RegisterView.vue b/js/src/views/Account/RegisterView.vue
new file mode 100644
index 000000000..8b52b6cab
--- /dev/null
+++ b/js/src/views/Account/RegisterView.vue
@@ -0,0 +1,233 @@
+<template>
+  <section class="container mx-auto">
+    <div class="">
+      <div class="">
+        <h1 class="text-2xl" v-if="userAlreadyActivated">
+          {{ $t("Congratulations, your account is now created!") }}
+        </h1>
+        <h1 class="text-2xl" v-else>
+          {{
+            $t("Register an account on {instanceName}!", {
+              instanceName,
+            })
+          }}
+        </h1>
+        <p class="prose dark:prose-invert" v-if="userAlreadyActivated">
+          {{ $t("Now, create your first profile:") }}
+        </p>
+        <form v-if="!validationSent" @submit.prevent="submit">
+          <o-field :label="$t('Displayed nickname')">
+            <o-input
+              aria-required="true"
+              required
+              v-model="identity.name"
+              @input="autoUpdateUsername"
+            />
+          </o-field>
+
+          <o-field
+            :label="$t('Username')"
+            :type="errors.preferred_username ? 'is-danger' : null"
+            :message="errors.preferred_username"
+          >
+            <o-field
+              :message="
+                $t(
+                  'Only alphanumeric lowercased characters and underscores are supported.'
+                )
+              "
+            >
+              <o-input
+                aria-required="true"
+                required
+                expanded
+                v-model="identity.preferredUsername"
+                :validation-message="
+                  identity.preferredUsername
+                    ? $t(
+                        'Only alphanumeric lowercased characters and underscores are supported.'
+                      )
+                    : null
+                "
+              />
+              <p class="control">
+                <span class="button is-static">@{{ host }}</span>
+              </p>
+            </o-field>
+          </o-field>
+          <p class="description">
+            {{
+              $t(
+                "This identifier is unique to your profile. It allows others to find you."
+              )
+            }}
+          </p>
+
+          <o-field :label="$t('Short bio')">
+            <o-input
+              type="textarea"
+              maxlength="100"
+              rows="2"
+              v-model="identity.summary"
+            />
+          </o-field>
+
+          <p class="prose dark:prose-invert">
+            {{
+              $t(
+                "You will be able to add an avatar and set other options in your account settings."
+              )
+            }}
+          </p>
+
+          <p class="control has-text-centered">
+            <o-button
+              variant="primary"
+              size="large"
+              native-type="submit"
+              :disabled="sendingValidation"
+              >{{ $t("Create my profile") }}</o-button
+            >
+          </p>
+        </form>
+
+        <div v-if="validationSent && !userAlreadyActivated">
+          <o-notification variant="success" :closable="false">
+            <h2 class="title">
+              {{
+                $t("Your account is nearly ready, {username}", {
+                  username: identity.name ?? identity.preferredUsername,
+                })
+              }}
+            </h2>
+            <i18n-t keypath="A validation email was sent to {email}" tag="p">
+              <template #email>
+                <code>{{ email }}</code>
+              </template>
+            </i18n-t>
+            <p>
+              {{
+                $t(
+                  "Before you can login, you need to click on the link inside it to validate your account."
+                )
+              }}
+            </p>
+          </o-notification>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { Person } from "../../types/actor";
+import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
+import RouteName from "../../router/name";
+import { changeIdentity } from "../../utils/identity";
+import { useInstanceName } from "@/composition/apollo/config";
+import { ref, computed, onBeforeMount } from "vue";
+import { useRouter } from "vue-router";
+import { registerAccount } from "@/composition/apollo/user";
+import { convertToUsername } from "@/utils/username";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+
+const props = withDefaults(
+  defineProps<{
+    email: string;
+    userAlreadyActivated?: boolean;
+  }>(),
+  {
+    userAlreadyActivated: false,
+  }
+);
+
+const { instanceName } = useInstanceName();
+
+const router = useRouter();
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Register")),
+});
+
+const host: string = MOBILIZON_INSTANCE_HOST;
+
+const errors = ref<Record<string, unknown>>({});
+
+const validationSent = ref(false);
+
+const sendingValidation = ref(false);
+
+const identity = ref(new Person());
+
+onBeforeMount(() => {
+  // Make sure no one goes to this page if we don't want to
+  if (!props.email) {
+    router.replace({ name: RouteName.PAGE_NOT_FOUND });
+  }
+});
+
+const autoUpdateUsername = () => {
+  identity.value.preferredUsername = convertToUsername(identity.value.name);
+};
+
+const submit = async (): Promise<void> => {
+  sendingValidation.value = true;
+  errors.value = {};
+  const { onDone, onError } = registerAccount(
+    { email: props.email, ...identity.value },
+    props.userAlreadyActivated
+  );
+
+  onDone(async ({ data }) => {
+    validationSent.value = true;
+    window.localStorage.setItem("new-registered-user", "yes");
+
+    if (data && props.userAlreadyActivated) {
+      await changeIdentity(data.registerPerson);
+
+      await router.push({ name: RouteName.HOME });
+    }
+  });
+
+  onError((err) => {
+    errors.value = err.graphQLErrors.reduce(
+      (acc: { [key: string]: string }, error: any) => {
+        acc[error.details || error.field] = error.message;
+        return acc;
+      },
+      {}
+    );
+    console.error("Error while registering person", err);
+    console.error("Errors while registering person", errors);
+    sendingValidation.value = false;
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.avatar-enter-active {
+  transition: opacity 1s ease;
+}
+
+.avatar-enter,
+.avatar-leave-to {
+  opacity: 0;
+}
+
+.avatar-leave {
+  display: none;
+}
+
+.container .columns {
+  margin: 1rem auto 3rem;
+}
+
+p.description {
+  font-size: 0.9rem;
+  margin-bottom: 15px;
+  margin-top: -10px;
+}
+</style>
diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index d0e56dd43..f2d71ea4d 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -3,7 +3,7 @@
     <breadcrumbs-nav :links="breadcrumbsLinks" />
     <div class="root" v-if="identity">
       <h1 class="title">
-        <span v-if="isUpdate">{{ identity.displayName() }}</span>
+        <span v-if="isUpdate">{{ displayName(identity) }}</span>
         <span v-else>{{ $t("I create an identity") }}</span>
       </h1>
 
@@ -14,22 +14,22 @@
         class="picture-upload"
       />
 
-      <b-field
+      <o-field
         horizontal
         :label="$t('Display name')"
         label-for="identity-display-name"
       >
-        <b-input
+        <o-input
           aria-required="true"
           required
           v-model="identity.name"
-          @input="autoUpdateUsername($event)"
+          @input="autoUpdateUsername()"
           id="identity-display-name"
           dir="auto"
         />
-      </b-field>
+      </o-field>
 
-      <b-field
+      <o-field
         horizontal
         custom-class="username-field"
         expanded
@@ -37,8 +37,8 @@
         label-for="identity-username"
         :message="message"
       >
-        <b-field expanded>
-          <b-input
+        <o-field expanded>
+          <o-input
             aria-required="true"
             required
             v-model="identity.preferredUsername"
@@ -52,55 +52,53 @@
           <p class="control">
             <span class="button is-static">@{{ getInstanceHost }}</span>
           </p>
-        </b-field>
-      </b-field>
+        </o-field>
+      </o-field>
 
-      <b-field
+      <o-field
         horizontal
         :label="$t('Description')"
         label-for="identity-summary"
       >
-        <b-input
+        <o-input
           type="textarea"
           dir="auto"
           aria-required="false"
           v-model="identity.summary"
           id="identity-summary"
         />
-      </b-field>
+      </o-field>
 
-      <b-notification
-        type="is-danger"
+      <o-notification
+        variant="danger"
         has-icon
         aria-close-label="Close notification"
         role="alert"
         :key="error"
         v-for="error in errors"
-        >{{ error }}</b-notification
+        >{{ error }}</o-notification
       >
 
-      <b-field class="submit">
+      <o-field class="submit">
         <div class="control">
-          <button type="button" class="button is-primary" @click="submit()">
+          <o-button type="button" variant="primary" @click="submit()">
             {{ $t("Save") }}
-          </button>
+          </o-button>
         </div>
-      </b-field>
+      </o-field>
 
-      <b-field class="delete-identity">
-        <b-button
+      <o-field class="delete-identity">
+        <o-button
           v-if="isUpdate"
           @click="openDeleteIdentityConfirmation()"
-          type="is-text"
+          variant="text"
         >
           {{ $t("Delete this identity") }}
-        </b-button>
-      </b-field>
+        </o-button>
+      </o-field>
 
       <section v-if="isUpdate">
-        <div class="setting-title">
-          <h2>{{ $t("Profile feeds") }}</h2>
-        </div>
+        <h2>{{ $t("Profile feeds") }}</h2>
         <p>
           {{
             $t(
@@ -110,60 +108,60 @@
         </p>
         <div v-if="identity.feedTokens && identity.feedTokens.length > 0">
           <div
-            class="buttons"
+            class="flex flex-wrap gap-2"
             v-for="feedToken in identity.feedTokens"
             :key="feedToken.token"
           >
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip.atom"
               always
-              type="is-success"
-              position="is-left"
+              variant="success"
+              position="left"
             >
-              <b-button
+              <o-button
                 tag="a"
                 icon-left="rss"
                 @click="
-                  (e) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+                  (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
                 "
                 :href="tokenToURL(feedToken.token, 'atom')"
                 target="_blank"
-                >{{ $t("RSS/Atom Feed") }}</b-button
+                >{{ $t("RSS/Atom Feed") }}</o-button
               >
-            </b-tooltip>
-            <b-tooltip
+            </o-tooltip>
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip.ics"
               always
-              type="is-success"
-              position="is-left"
+              variant="success"
+              position="left"
             >
-              <b-button
+              <o-button
                 tag="a"
                 @click="
-                  (e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+                  (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
                 "
                 icon-left="calendar-sync"
                 :href="tokenToURL(feedToken.token, 'ics')"
                 target="_blank"
-                >{{ $t("ICS/WebCal Feed") }}</b-button
+                >{{ $t("ICS/WebCal Feed") }}</o-button
               >
-            </b-tooltip>
-            <b-button
+            </o-tooltip>
+            <o-button
               icon-left="refresh"
-              type="is-text"
+              variant="text"
               @click="openRegenerateFeedTokensConfirmation"
-              >{{ $t("Regenerate new links") }}</b-button
+              >{{ $t("Regenerate new links") }}</o-button
             >
           </div>
         </div>
         <div v-else>
-          <b-button
+          <o-button
             icon-left="refresh"
-            type="is-text"
+            variant="text"
             @click="generateFeedTokens"
-            >{{ $t("Create new links") }}</b-button
+            >{{ $t("Create new links") }}</o-button
           >
         </div>
       </section>
@@ -196,482 +194,563 @@ h1 {
   margin-bottom: 0;
 }
 
-::v-deep .buttons > *:not(:last-child) .button {
+:deep(.buttons > *:not(:last-child) .button) {
   @include margin-right(0.5rem);
 }
 </style>
 
-<script lang="ts">
-import { Component, Prop, Watch } from "vue-property-decorator";
-import { mixins } from "vue-class-component";
+<script lang="ts" setup>
 import {
   CREATE_PERSON,
-  CURRENT_ACTOR_CLIENT,
   DELETE_PERSON,
   FETCH_PERSON,
   IDENTITIES,
   PERSON_FRAGMENT,
+  PERSON_FRAGMENT_FEED_TOKENS,
   UPDATE_PERSON,
-} from "../../../graphql/actor";
-import { IPerson, Person } from "../../../types/actor";
-import PictureUpload from "../../../components/PictureUpload.vue";
-import { MOBILIZON_INSTANCE_HOST } from "../../../api/_entrypoint";
-import RouteName from "../../../router/name";
-import { buildFileVariable } from "../../../utils/image";
-import { changeIdentity } from "../../../utils/auth";
-import identityEditionMixin from "../../../mixins/identityEdition";
+} from "@/graphql/actor";
+import { IPerson, displayName } from "@/types/actor";
+import PictureUpload from "@/components/PictureUpload.vue";
+import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
+import RouteName from "@/router/name";
+import { buildFileVariable } from "@/utils/image";
+import { changeIdentity } from "@/utils/identity";
 import {
   CREATE_FEED_TOKEN_ACTOR,
   DELETE_FEED_TOKEN,
 } from "@/graphql/feed_tokens";
 import { IFeedToken } from "@/types/feedtoken.model";
-import { IConfig } from "@/types/config.model";
-import { CONFIG } from "@/graphql/config";
 import { ServerParseError } from "@apollo/client/link/http";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
 import pick from "lodash/pick";
 import { ActorType } from "@/types/enums";
-import { Location } from "vue-router";
+import { useRouter } from "vue-router";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useMutation, useQuery, useApolloClient } from "@vue/apollo-composable";
+import { useAvatarMaxSize } from "@/composition/config";
+import { computed, inject, reactive, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { convertToUsername } from "@/utils/username";
+import { Dialog } from "@/plugins/dialog";
+import { Notifier } from "@/plugins/notifier";
+import { AbsintheGraphQLErrors } from "@/types/errors.model";
 
-@Component({
-  components: {
-    PictureUpload,
-  },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-    identity: {
-      query: FETCH_PERSON,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          username: this.identityName,
-        };
-      },
-      skip() {
-        return !this.identityName;
-      },
-      update: (data) => new Person(data.fetchPerson),
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
-      },
-    },
-    config: CONFIG,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { isUpdate, identityName } = this;
-    let title = this.$t("Create a new profile") as string;
-    if (isUpdate) {
-      title = this.$t("Edit profile {profile}", {
-        profile: identityName,
-      }) as string;
+const { t } = useI18n({ useScope: "global" });
+const router = useRouter();
+
+const props = defineProps<{ isUpdate: boolean; identityName?: string }>();
+
+const { currentActor } = useCurrentActorClient();
+
+const { result: personResult, onError: onPersonError } = useQuery<{
+  fetchPerson: IPerson;
+}>(
+  FETCH_PERSON,
+  () => ({
+    username: props.identityName,
+  }),
+  () => ({
+    enabled: props.identityName !== undefined,
+  })
+);
+
+onPersonError((err) => handleErrors(err as unknown as AbsintheGraphQLErrors));
+
+const person = computed(() => personResult.value?.fetchPerson);
+
+const baseIdentity: IPerson = {
+  id: undefined,
+  avatar: null,
+  name: "",
+  preferredUsername: "",
+  summary: "",
+  feedTokens: [],
+  url: "",
+  domain: null,
+  type: ActorType.PERSON,
+  suspended: false,
+};
+
+const identity = ref(baseIdentity);
+
+watch(person, () => {
+  console.debug("person changed", person.value);
+  if (person.value) {
+    identity.value = person.value;
+  }
+});
+
+const avatarMaxSize = useAvatarMaxSize();
+
+// error({ graphQLErrors }) {
+//   this.handleErrors(graphQLErrors);
+// },
+// metaInfo() {
+//   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//   // @ts-ignore
+//   const { isUpdate, identityName } = this;
+//   let title = t("Create a new profile") as string;
+//   if (isUpdate) {
+//     title = t("Edit profile {profile}", {
+//       profile: identityName,
+//     }) as string;
+//   }
+//   return {
+//     title,
+//   };
+// },
+
+const errors = ref<string[]>([]);
+const avatarFile = ref<File | null>(null);
+const showCopiedTooltip = reactive({ ics: false, atom: false });
+
+const isUpdate = computed(() => props.isUpdate);
+const identityName = computed(() => props.identityName);
+
+const message = computed((): string | null => {
+  if (props.isUpdate) return null;
+  return t(
+    "Only alphanumeric lowercased characters and underscores are supported."
+  );
+});
+
+watch(isUpdate, () => {
+  resetFields();
+});
+
+watch(identityName, async () => {
+  // Only used when we update the identity
+  if (!isUpdate.value) {
+    identity.value = baseIdentity;
+    return;
+  }
+
+  await redirectIfNoIdentitySelected(identityName.value);
+
+  if (!identityName.value) {
+    router.push({ name: "CreateIdentity" });
+  }
+
+  if (identityName.value && identity.value) {
+    avatarFile.value = null;
+  }
+});
+
+const submit = (): Promise<void> => {
+  if (props.isUpdate) return updateIdentity();
+
+  return createIdentity();
+};
+
+const {
+  mutate: deletePersonMutation,
+  onDone: deletePersonDone,
+  onError: deletePersonError,
+} = useMutation(DELETE_PERSON, () => ({
+  update: (store: ApolloCache<InMemoryCache>) => {
+    const data = store.readQuery<{ identities: IPerson[] }>({
+      query: IDENTITIES,
+    });
+
+    if (data) {
+      store.writeQuery({
+        query: IDENTITIES,
+        data: {
+          identities: data.identities.filter((i) => i.id !== identity.value.id),
+        },
+      });
     }
-    return {
-      title,
-    };
   },
-})
-export default class EditIdentity extends mixins(identityEditionMixin) {
-  @Prop({ type: Boolean }) isUpdate!: boolean;
+}));
 
-  @Prop({ type: String }) identityName!: string;
+const notifier = inject<Notifier>("notifier");
 
-  config!: IConfig;
-
-  errors: string[] = [];
-
-  avatarFile: File | null = null;
-
-  private currentActor: IPerson | null = null;
-
-  RouteName = RouteName;
-
-  showCopiedTooltip = { ics: false, atom: false };
-
-  get message(): string | null {
-    if (this.isUpdate) return null;
-    return this.$t(
-      "Only alphanumeric lowercased characters and underscores are supported."
-    ) as string;
-  }
-
-  @Watch("isUpdate")
-  async isUpdateChanged(): Promise<void> {
-    this.resetFields();
-  }
-
-  @Watch("identityName", { immediate: true })
-  async onIdentityParamChanged(val: string): Promise<void> {
-    // Only used when we update the identity
-    if (!this.isUpdate) return;
-
-    await this.redirectIfNoIdentitySelected(val);
-
-    if (!this.identityName) {
-      this.$router.push({ name: "CreateIdentity" });
-    }
-
-    if (this.identityName && this.identity) {
-      this.avatarFile = null;
-    }
-  }
-
-  submit(): Promise<void> {
-    if (this.isUpdate) return this.updateIdentity();
-
-    return this.createIdentity();
-  }
+const { resolveClient } = useApolloClient();
 
+deletePersonDone(async () => {
+  notifier?.success(
+    t("Identity {displayName} deleted", {
+      displayName: displayName(identity.value),
+    })
+  );
   /**
-   * Delete an identity
+   * If we just deleted the current identity,
+   * we need to change it to the next one
    */
-  async deleteIdentity(): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: DELETE_PERSON,
-        variables: {
-          id: this.identity.id,
-        },
-        update: (store: ApolloCache<InMemoryCache>) => {
-          const data = store.readQuery<{ identities: IPerson[] }>({
-            query: IDENTITIES,
-          });
-
-          if (data) {
-            store.writeQuery({
-              query: IDENTITIES,
-              data: {
-                identities: data.identities.filter(
-                  (i) => i.id !== this.identity.id
-                ),
-              },
-            });
-          }
-        },
-      });
-
-      this.$notifier.success(
-        this.$t("Identity {displayName} deleted", {
-          displayName: this.identity.displayName(),
-        }) as string
-      );
-      /**
-       * If we just deleted the current identity,
-       * we need to change it to the next one
-       */
-      const data = this.$apollo.provider.defaultClient.readQuery<{
-        identities: IPerson[];
-      }>({ query: IDENTITIES });
-      if (data) {
-        await this.maybeUpdateCurrentActorCache(data.identities[0]);
-      }
-
-      await this.redirectIfNoIdentitySelected();
-    } catch (err) {
-      this.handleError(err);
-    }
+  const client = resolveClient();
+  const data = client.readQuery<{
+    identities: IPerson[];
+  }>({ query: IDENTITIES });
+  if (data) {
+    await maybeUpdateCurrentActorCache(data.identities[0]);
   }
 
-  async updateIdentity(): Promise<void> {
-    try {
-      const variables = await this.buildVariables();
+  await redirectIfNoIdentitySelected();
+});
 
-      await this.$apollo.mutate({
-        mutation: UPDATE_PERSON,
-        variables,
-        update: (
-          store: ApolloCache<InMemoryCache>,
-          { data: updateData }: FetchResult
-        ) => {
-          const data = store.readQuery<{ identities: IPerson[] }>({
-            query: IDENTITIES,
-          });
+deletePersonError((err) => handleError(err));
 
-          if (data && updateData?.updatePerson) {
-            this.maybeUpdateCurrentActorCache(updateData?.updatePerson);
+/**
+ * Delete an identity
+ */
+const deleteIdentity = async (): Promise<void> => {
+  deletePersonMutation({
+    id: identity.value?.id,
+  });
+};
 
-            store.writeFragment({
-              fragment: PERSON_FRAGMENT,
-              id: `Person:${updateData?.updatePerson.id}`,
-              data: {
-                ...updateData?.updatePerson,
-                type: ActorType.PERSON,
-              },
-            });
-          }
-        },
-      });
-
-      this.$notifier.success(
-        this.$t("Identity {displayName} updated", {
-          displayName: this.identity.displayName(),
-        }) as string
-      );
-    } catch (err) {
-      this.handleError(err);
-    }
-  }
-
-  async createIdentity(): Promise<void> {
-    try {
-      const variables = await this.buildVariables();
-
-      await this.$apollo.mutate({
-        mutation: CREATE_PERSON,
-        variables,
-        update: (
-          store: ApolloCache<InMemoryCache>,
-          { data: updateData }: FetchResult
-        ) => {
-          const data = store.readQuery<{ identities: IPerson[] }>({
-            query: IDENTITIES,
-          });
-
-          if (data && updateData?.createPerson) {
-            store.writeQuery({
-              query: IDENTITIES,
-              data: {
-                identities: [
-                  ...data.identities,
-                  { ...updateData?.createPerson, type: ActorType.PERSON },
-                ],
-              },
-            });
-          }
-        },
-      });
-
-      this.$notifier.success(
-        this.$t("Identity {displayName} created", {
-          displayName: this.identity.displayName(),
-        }) as string
-      );
-
-      await this.$router.push({
-        name: RouteName.UPDATE_IDENTITY,
-        params: { identityName: this.identity.preferredUsername },
-      });
-    } catch (err) {
-      this.handleError(err);
-    }
-  }
-
-  handleErrors(errors: any[]): void {
-    if (errors.some((error) => error.status_code === 401)) {
-      this.$router.push({ name: RouteName.LOGIN });
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  get getInstanceHost(): string {
-    return MOBILIZON_INSTANCE_HOST;
-  }
-
-  tokenToURL(token: string, format: string): string {
-    return `${window.location.origin}/events/going/${token}/${format}`;
-  }
-
-  copyURL(e: Event, url: string, format: "ics" | "atom"): void {
-    if (navigator.clipboard) {
-      e.preventDefault();
-      navigator.clipboard.writeText(url);
-      this.showCopiedTooltip[format] = true;
-      setTimeout(() => {
-        this.showCopiedTooltip[format] = false;
-      }, 2000);
-    }
-  }
-
-  get avatarMaxSize(): number | undefined {
-    return this?.config?.uploadLimits?.avatar;
-  }
-
-  async generateFeedTokens(): Promise<void> {
-    const newToken = await this.createNewFeedToken();
-    this.identity.feedTokens = [...this.identity.feedTokens, newToken];
-  }
-
-  async regenerateFeedTokens(): Promise<void> {
-    if (this.identity?.feedTokens.length < 1) return;
-    await this.deleteFeedToken(this.identity.feedTokens[0].token);
-    const newToken = await this.createNewFeedToken();
-    const feedTokens = this.identity.feedTokens.slice(0, -1);
-    this.identity.feedTokens = [...feedTokens, newToken];
-  }
-
-  private async deleteFeedToken(token: string): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: DELETE_FEED_TOKEN,
-      variables: { token },
-    });
-  }
-
-  private async createNewFeedToken(): Promise<IFeedToken> {
-    const { data } = await this.$apollo.mutate({
-      mutation: CREATE_FEED_TOKEN_ACTOR,
-      variables: { actor_id: this.identity?.id },
+const {
+  mutate: updateIdentityMutation,
+  onDone: updateIdentityDone,
+  onError: updateIdentityError,
+} = useMutation(UPDATE_PERSON, () => ({
+  update: (
+    store: ApolloCache<InMemoryCache>,
+    { data: updateData }: FetchResult
+  ) => {
+    const data = store.readQuery<{ identities: IPerson[] }>({
+      query: IDENTITIES,
     });
 
-    return data.createFeedToken;
-  }
+    if (data && updateData?.updatePerson) {
+      maybeUpdateCurrentActorCache(updateData?.updatePerson);
 
-  openRegenerateFeedTokensConfirmation(): void {
-    this.$buefy.dialog.confirm({
-      type: "is-warning",
-      title: this.$t("Regenerate new links") as string,
-      message: this.$t(
-        "You'll need to change the URLs where there were previously entered."
-      ) as string,
-      confirmText: this.$t("Regenerate new links") as string,
-      cancelText: this.$t("Cancel") as string,
-      onConfirm: () => this.regenerateFeedTokens(),
+      store.writeFragment({
+        fragment: PERSON_FRAGMENT,
+        id: `Person:${updateData?.updatePerson.id}`,
+        data: {
+          ...updateData?.updatePerson,
+          type: ActorType.PERSON,
+        },
+      });
+    }
+  },
+}));
+
+updateIdentityDone(() => {
+  notifier?.success(
+    t("Identity {displayName} updated", {
+      displayName: displayName(identity.value),
+    }) as string
+  );
+});
+
+updateIdentityError((err) => handleError(err));
+
+const updateIdentity = async (): Promise<void> => {
+  const variables = await buildVariables();
+
+  updateIdentityMutation(variables);
+};
+
+const {
+  mutate: createIdentityMutation,
+  onDone: createIdentityDone,
+  onError: createIdentityError,
+} = useMutation(CREATE_PERSON, () => ({
+  update: (
+    store: ApolloCache<InMemoryCache>,
+    { data: updateData }: FetchResult
+  ) => {
+    const data = store.readQuery<{ identities: IPerson[] }>({
+      query: IDENTITIES,
     });
-  }
 
-  openDeleteIdentityConfirmation(): void {
-    this.$buefy.dialog.prompt({
-      type: "is-danger",
-      title: this.$t("Delete your identity") as string,
-      message: `${this.$t(
-        "This will delete / anonymize all content (events, comments, messages, participations…) created from this identity."
-      )}
+    if (data && updateData?.createPerson) {
+      store.writeQuery({
+        query: IDENTITIES,
+        data: {
+          identities: [
+            ...data.identities,
+            { ...updateData?.createPerson, type: ActorType.PERSON },
+          ],
+        },
+      });
+    }
+  },
+}));
+
+createIdentityDone(() => {
+  notifier?.success(
+    t("Identity {displayName} created", {
+      displayName: displayName(identity.value),
+    })
+  );
+
+  router.push({
+    name: RouteName.UPDATE_IDENTITY,
+    params: { identityName: identity.value.preferredUsername },
+  });
+});
+
+createIdentityError((err) => handleError(err));
+
+const createIdentity = async (): Promise<void> => {
+  const variables = await buildVariables();
+
+  createIdentityMutation(variables);
+};
+
+const handleErrors = (absintheErrors: AbsintheGraphQLErrors): void => {
+  if (absintheErrors.some((error) => error.status_code === 401)) {
+    router.push({ name: RouteName.LOGIN });
+  }
+};
+
+// eslint-disable-next-line class-methods-use-this
+const getInstanceHost = computed((): string => {
+  return MOBILIZON_INSTANCE_HOST;
+});
+
+const tokenToURL = (token: string, format: string): string => {
+  return `${window.location.origin}/events/going/${token}/${format}`;
+};
+
+const copyURL = (e: Event, url: string, format: "ics" | "atom"): void => {
+  if (navigator.clipboard) {
+    e.preventDefault();
+    navigator.clipboard.writeText(url);
+    showCopiedTooltip[format] = true;
+    setTimeout(() => {
+      showCopiedTooltip[format] = false;
+    }, 2000);
+  }
+};
+
+const generateFeedTokens = async (): Promise<void> => {
+  await createNewFeedToken({ actorId: identity.value?.id });
+};
+
+const regenerateFeedTokens = async (): Promise<void> => {
+  if (identity.value?.feedTokens.length < 1) return;
+  await deleteFeedToken({ token: identity.value.feedTokens[0].token });
+  await createNewFeedToken(
+    { actorId: identity.value?.id },
+    {
+      update(cache, { data }) {
+        const actorId = data?.createFeedToken.actor?.id;
+        const newFeedToken = data?.createFeedToken.token;
+
+        if (!newFeedToken) return;
+
+        let cachedData = cache.readFragment<{
+          id: string | undefined;
+          feedTokens: { token: string }[];
+        }>({
+          id: `Person:${actorId}`,
+          fragment: PERSON_FRAGMENT_FEED_TOKENS,
+        });
+        // Remove the old token
+        cachedData = {
+          id: cachedData?.id,
+          feedTokens: [
+            ...(cachedData?.feedTokens ?? []).slice(0, -1),
+            { token: newFeedToken },
+          ],
+        };
+        cache.writeFragment({
+          id: `Person:${actorId}`,
+          fragment: PERSON_FRAGMENT_FEED_TOKENS,
+          data: cachedData,
+        });
+      },
+    }
+  );
+};
+
+const { mutate: deleteFeedToken } = useMutation(DELETE_FEED_TOKEN);
+
+const { mutate: createNewFeedToken } = useMutation<{
+  createFeedToken: IFeedToken;
+}>(CREATE_FEED_TOKEN_ACTOR, () => ({
+  update(cache, { data }) {
+    const actorId = data?.createFeedToken.actor?.id;
+    const newFeedToken = data?.createFeedToken.token;
+
+    if (!newFeedToken) return;
+
+    let cachedData = cache.readFragment<{
+      id: string | undefined;
+      feedTokens: { token: string }[];
+    }>({
+      id: `Person:${actorId}`,
+      fragment: PERSON_FRAGMENT_FEED_TOKENS,
+    });
+    // Add the new token to the list
+    cachedData = {
+      id: cachedData?.id,
+      feedTokens: [...(cachedData?.feedTokens ?? []), { token: newFeedToken }],
+    };
+    cache.writeFragment({
+      id: `Person:${actorId}`,
+      fragment: PERSON_FRAGMENT_FEED_TOKENS,
+      data: cachedData,
+    });
+  },
+}));
+
+const dialog = inject<Dialog>("dialog");
+
+const openRegenerateFeedTokensConfirmation = (): void => {
+  dialog?.confirm({
+    variant: "warning",
+    title: t("Regenerate new links") as string,
+    message: t(
+      "You'll need to change the URLs where there were previously entered."
+    ) as string,
+    confirmText: t("Regenerate new links") as string,
+    cancelText: t("Cancel") as string,
+    onConfirm: () => regenerateFeedTokens(),
+  });
+};
+
+const openDeleteIdentityConfirmation = (): void => {
+  dialog?.prompt({
+    variant: "danger",
+    title: t("Delete your identity") as string,
+    message: `${t(
+      "This will delete / anonymize all content (events, comments, messages, participations…) created from this identity."
+    )}
             <br /><br />
-            ${this.$t(
+            ${t(
               "If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity."
             )}
-            ${this.$t(
+            ${t(
               "Otherwise this identity will just be removed from the group administrators."
             )}
             <br /><br />
-            ${this.$t(
+            ${t(
               'To confirm, type your identity username "{preferredUsername}"',
               {
-                preferredUsername: this.identity.preferredUsername,
+                preferredUsername: identity.value.preferredUsername,
               }
             )}`,
-      confirmText: this.$t("Delete {preferredUsername}", {
-        preferredUsername: this.identity.preferredUsername,
-      }) as string,
-      inputAttrs: {
-        placeholder: this.identity.preferredUsername,
-        pattern: this.identity.preferredUsername,
-      },
+    confirmText: t("Delete {preferredUsername}", {
+      preferredUsername: identity.value.preferredUsername,
+    }),
+    inputAttrs: {
+      placeholder: identity.value.preferredUsername,
+      pattern: identity.value.preferredUsername,
+    },
+    onConfirm: () => deleteIdentity(),
+  });
+};
 
-      onConfirm: () => this.deleteIdentity(),
-    });
+const handleError = (err: any) => {
+  console.error(err);
+
+  if (err?.networkError?.name === "ServerParseError") {
+    const error = err?.networkError as ServerParseError;
+
+    if (error?.response?.status === 413) {
+      const errorMessage = props.isUpdate
+        ? t(
+            "Unable to update the profile. The avatar picture may be too heavy."
+          )
+        : t(
+            "Unable to create the profile. The avatar picture may be too heavy."
+          );
+      errors.value.push(errorMessage as string);
+    }
   }
 
-  private handleError(err: any) {
-    console.error(err);
-
-    if (err?.networkError?.name === "ServerParseError") {
-      const error = err?.networkError as ServerParseError;
-
-      if (error?.response?.status === 413) {
-        const errorMessage = this.isUpdate
-          ? this.$t(
-              "Unable to update the profile. The avatar picture may be too heavy."
-            )
-          : this.$t(
-              "Unable to create the profile. The avatar picture may be too heavy."
-            );
-        this.errors.push(errorMessage as string);
+  if (err.graphQLErrors !== undefined) {
+    err.graphQLErrors.forEach(
+      ({ message: errorMessage }: { message: string }) => {
+        notifier?.error(errorMessage);
       }
-    }
-
-    if (err.graphQLErrors !== undefined) {
-      err.graphQLErrors.forEach(({ message }: { message: string }) => {
-        this.$notifier.error(message);
-      });
-    }
+    );
   }
+};
 
-  private async buildVariables(): Promise<Record<string, unknown>> {
-    /**
-     * We set the avatar only if user has selected one
-     */
-    let avatarObj: Record<string, unknown> = { avatar: null };
-    if (this.avatarFile) {
-      avatarObj = buildFileVariable(
-        this.avatarFile,
-        "avatar",
-        `${this.identity.preferredUsername}'s avatar`
-      );
-    }
-    return pick({ ...this.identity, ...avatarObj }, [
-      "id",
-      "preferredUsername",
-      "name",
-      "summary",
+const buildVariables = async (): Promise<Record<string, unknown>> => {
+  /**
+   * We set the avatar only if user has selected one
+   */
+  let avatarObj: Record<string, unknown> = { avatar: null };
+  if (avatarFile.value) {
+    avatarObj = buildFileVariable(
+      avatarFile.value,
       "avatar",
-    ]);
+      `${identity.value.preferredUsername}'s avatar`
+    );
   }
+  return pick({ ...identity.value, ...avatarObj }, [
+    "id",
+    "preferredUsername",
+    "name",
+    "summary",
+    "avatar",
+  ]);
+};
 
-  private async redirectIfNoIdentitySelected(identityParam?: string) {
-    if (identityParam) return;
+const redirectIfNoIdentitySelected = async (identityParam?: string) => {
+  if (identityParam) return;
 
-    await this.loadLoggedPersonIfNeeded();
+  // await loadLoggedPersonIfNeeded();
 
-    if (this.currentActor) {
-      await this.$router.push({
-        params: { identityName: this.currentActor.preferredUsername },
-      });
-    }
-  }
-
-  private async maybeUpdateCurrentActorCache(identity: IPerson) {
-    if (this.currentActor) {
-      if (
-        this.currentActor.preferredUsername === this.identity.preferredUsername
-      ) {
-        await changeIdentity(this.$apollo.provider.defaultClient, identity);
-      }
-      this.currentActor = identity;
-    }
-  }
-
-  private async loadLoggedPersonIfNeeded(bypassCache = false) {
-    if (this.currentActor) return;
-
-    const result = await this.$apollo.query({
-      query: CURRENT_ACTOR_CLIENT,
-      fetchPolicy: bypassCache ? "network-only" : undefined,
+  if (currentActor.value) {
+    await router.push({
+      params: { identityName: currentActor.value?.preferredUsername },
     });
-
-    this.currentActor = result.data.currentActor;
   }
+};
 
-  private resetFields() {
-    this.identity = new Person();
-    this.oldDisplayName = null;
-    this.avatarFile = null;
+const maybeUpdateCurrentActorCache = async (newIdentity: IPerson) => {
+  if (currentActor.value) {
+    if (
+      currentActor.value.preferredUsername === identity.value.preferredUsername
+    ) {
+      await changeIdentity(newIdentity);
+    }
+    // currentActor.value = newIdentity;
   }
+};
 
-  get breadcrumbsLinks(): (Location & { text: string })[] {
+// const loadLoggedPersonIfNeeded = async (bypassCache = false) => {
+//   if (currentActor.value) return;
+
+//   const result = await this.$apollo.query({
+//     query: CURRENT_ACTOR_CLIENT,
+//     fetchPolicy: bypassCache ? "network-only" : undefined,
+//   });
+
+//   currentActor.value = result.data.currentActor;
+// };
+
+const resetFields = () => {
+  // identity.value = new Person();
+  // oldDisplayName.value = null;
+  avatarFile.value = null;
+};
+
+const breadcrumbsLinks = computed(
+  (): { name: string; params: Record<string, any>; text: string }[] => {
     const links = [
       {
         name: RouteName.IDENTITIES,
         params: {},
-        text: this.$t("Profiles") as string,
+        text: t("Profiles") as string,
       },
     ];
-    if (this.isUpdate && this.identity) {
+    if (props.isUpdate && identity.value) {
       links.push({
         name: RouteName.UPDATE_IDENTITY,
-        params: { identityName: this.identity.preferredUsername },
-        text: this.identity.name,
+        params: { identityName: identity.value.preferredUsername },
+        text: identity.value.name,
       });
     } else {
       links.push({
         name: RouteName.CREATE_IDENTITY,
         params: {},
-        text: this.$t("New profile") as string,
+        text: t("New profile") as string,
       });
     }
     return links;
   }
-}
+);
+
+const autoUpdateUsername = () => {
+  identity.value.preferredUsername = convertToUsername(identity.value.name);
+};
 </script>
diff --git a/js/src/views/Admin/AdminGroupProfile.vue b/js/src/views/Admin/AdminGroupProfile.vue
index 67c6d1b4a..422672e2a 100644
--- a/js/src/views/Admin/AdminGroupProfile.vue
+++ b/js/src/views/Admin/AdminGroupProfile.vue
@@ -2,10 +2,10 @@
   <div v-if="group" class="section">
     <breadcrumbs-nav
       :links="[
-        { name: RouteName.ADMIN, text: $t('Admin') },
+        { name: RouteName.ADMIN, text: t('Admin') },
         {
           name: RouteName.ADMIN_GROUPS,
-          text: $t('Groups'),
+          text: t('Groups'),
         },
         {
           name: RouteName.PROFILES,
@@ -39,7 +39,7 @@
         />
       </router-link>
     </div>
-    <table v-if="metadata.length > 0" class="table is-fullwidth">
+    <table v-if="metadata.length > 0" class="table w-full">
       <tbody>
         <tr v-for="{ key, value, link } in metadata" :key="key">
           <td>{{ key }}</td>
@@ -52,243 +52,248 @@
         </tr>
       </tbody>
     </table>
-    <div class="buttons">
-      <b-button
+    <div class="flex gap-1">
+      <o-button
         @click="confirmSuspendProfile"
         v-if="!group.suspended"
-        type="is-primary"
-        >{{ $t("Suspend") }}</b-button
+        variant="primary"
+        >{{ t("Suspend") }}</o-button
       >
-      <b-button
-        @click="unsuspendProfile"
+      <o-button
+        @click="
+          unsuspendProfile({
+            id,
+          })
+        "
         v-if="group.suspended"
-        type="is-primary"
-        >{{ $t("Unsuspend") }}</b-button
+        variant="primary"
+        >{{ t("Unsuspend") }}</o-button
       >
-      <b-button
-        @click="refreshProfile"
+      <o-button
+        @click="
+          refreshProfile({
+            actorId: id,
+          })
+        "
         v-if="group.domain"
-        type="is-primary"
+        variant="primary"
         outlined
-        >{{ $t("Refresh profile") }}</b-button
+        >{{ t("Refresh profile") }}</o-button
       >
     </div>
     <section>
-      <h2 class="subtitle">
+      <h2>
         {{
-          $tc("{number} members", group.members.total, {
-            number: group.members.total,
-          })
+          t(
+            "{number} members",
+            {
+              number: group.members.total,
+            },
+            group.members.total
+          )
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.members.elements"
-        :loading="$apollo.queries.group.loading"
+        :loading="loading"
         paginated
         backend-pagination
-        :current-page.sync="membersPage"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
+        v-model:current-page="membersPage"
+        :aria-next-label="t('Next page')"
+        :aria-previous-label="t('Previous page')"
+        :aria-page-label="t('Page')"
+        :aria-current-label="t('Current page')"
         :total="group.members.total"
         :per-page="MEMBERS_PER_PAGE"
         @page-change="onMembersPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
-          :label="$t('Member')"
+          :label="t('Member')"
           v-slot="props"
         >
-          <article class="media">
-            <figure
-              class="media-left image is-48x48"
-              v-if="props.row.actor.avatar"
-            >
-              <img
-                class="is-rounded"
-                :src="props.row.actor.avatar.url"
-                alt=""
-              />
-            </figure>
-            <b-icon
-              class="media-left"
-              v-else
-              size="is-large"
-              icon="account-circle"
-            />
-            <div class="media-content">
-              <div class="content">
+          <article class="flex gap-1">
+            <div class="flex-none">
+              <figure v-if="props.row.actor.avatar">
+                <img
+                  class="rounded"
+                  :src="props.row.actor.avatar.url"
+                  alt=""
+                  width="48"
+                  height="48"
+                />
+              </figure>
+              <AccountCircle :size="48" v-else />
+            </div>
+            <div>
+              <div class="prose dark:prose-invert">
                 <span v-if="props.row.actor.name">{{
                   props.row.actor.name
                 }}</span
                 ><span v-else>@{{ usernameWithDomain(props.row.actor) }}</span
                 ><br />
-                <span
-                  v-if="props.row.actor.name"
-                  class="is-size-7 has-text-grey"
+                <span v-if="props.row.actor.name"
                   >@{{ usernameWithDomain(props.row.actor) }}</span
                 >
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
-            type="is-primary"
+        </o-table-column>
+        <o-table-column field="role" :label="t('Role')" v-slot="props">
+          <tag
+            variant="primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
-            {{ $t("Administrator") }}
-          </b-tag>
-          <b-tag
-            type="is-primary"
+            {{ t("Administrator") }}
+          </tag>
+          <tag
+            variant="primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
-            {{ $t("Moderator") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
-            {{ $t("Member") }}
-          </b-tag>
-          <b-tag
-            type="is-warning"
+            {{ t("Moderator") }}
+          </tag>
+          <tag v-else-if="props.row.role === MemberRole.MEMBER">
+            {{ t("Member") }}
+          </tag>
+          <tag
+            variant="warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
-            {{ $t("Not approved") }}
-          </b-tag>
-          <b-tag
-            type="is-danger"
+            {{ t("Not approved") }}
+          </tag>
+          <tag
+            variant="danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
-            {{ $t("Rejected") }}
-          </b-tag>
-          <b-tag
-            type="is-danger"
+            {{ t("Rejected") }}
+          </tag>
+          <tag
+            variant="danger"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
-            {{ $t("Invited") }}
-          </b-tag>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+            {{ t("Invited") }}
+          </tag>
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="t('Date')" v-slot="props">
           <span class="has-text-centered">
-            {{ props.row.insertedAt | formatDateString }}<br />{{
-              props.row.insertedAt | formatTimeString
+            {{ formatDateString(props.row.insertedAt) }}<br />{{
+              formatTimeString(props.row.insertedAt)
             }}
           </span>
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account-group" :inline="true">
-            {{ $t("No members found") }}
+            {{ t("No members found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
-      <h2 class="subtitle">
+      <h2>
         {{
-          $tc("{number} organized events", group.organizedEvents.total, {
-            number: group.organizedEvents.total,
-          })
+          t(
+            "{number} organized events",
+            {
+              number: group.organizedEvents.total,
+            },
+            group.organizedEvents.total
+          )
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.organizedEvents.elements"
-        :loading="$apollo.queries.group.loading"
+        :loading="loading"
         paginated
         backend-pagination
-        :current-page.sync="organizedEventsPage"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
+        v-model:current-page="organizedEventsPage"
+        :aria-next-label="t('Next page')"
+        :aria-previous-label="t('Previous page')"
+        :aria-page-label="t('Page')"
+        :aria-current-label="t('Current page')"
         :total="group.organizedEvents.total"
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
-            <b-tag type="is-info" v-if="props.row.draft">{{
-              $t("Draft")
-            }}</b-tag>
+            <tag variant="info" v-if="props.row.draft">{{ t("Draft") }}</tag>
           </router-link>
-        </b-table-column>
-        <b-table-column
-          field="beginsOn"
-          :label="$t('Begins on')"
-          v-slot="props"
-        >
-          {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <o-table-column field="beginsOn" :label="t('Begins on')" v-slot="props">
+          {{ formatDateTimeString(props.row.beginsOn) }}
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account-group" :inline="true">
-            {{ $t("No organized events found") }}
+            {{ t("No organized events found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
-      <h2 class="subtitle">
+      <h2>
         {{
-          $tc("{number} posts", group.posts.total, {
-            number: group.posts.total,
-          })
+          t(
+            "{number} posts",
+            {
+              number: group.posts.total,
+            },
+            group.posts.total
+          )
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.posts.elements"
-        :loading="$apollo.queries.group.loading"
+        :loading="loading"
         paginated
         backend-pagination
-        :current-page.sync="postsPage"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
+        v-model:current-page="postsPage"
+        :aria-next-label="t('Next page')"
+        :aria-previous-label="t('Previous page')"
+        :aria-page-label="t('Page')"
+        :aria-current-label="t('Current page')"
         :total="group.posts.total"
         :per-page="POSTS_PER_PAGE"
         @page-change="onPostsPageChange"
       >
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.POST, params: { slug: props.row.slug } }"
           >
             {{ props.row.title }}
-            <b-tag type="is-info" v-if="props.row.draft">{{
-              $t("Draft")
-            }}</b-tag>
+            <tag variant="info" v-if="props.row.draft">{{ t("Draft") }}</tag>
           </router-link>
-        </b-table-column>
-        <b-table-column
+        </o-table-column>
+        <o-table-column
           field="publishAt"
-          :label="$t('Publication date')"
+          :label="t('Publication date')"
           v-slot="props"
         >
-          {{ props.row.publishAt | formatDateTimeString }}
-        </b-table-column>
-        <template slot="empty">
+          {{ formatDateTimeString(props.row.publishAt) }}
+        </o-table-column>
+        <template #empty>
           <empty-content icon="bullhorn" :inline="true">
-            {{ $t("No posts found") }}
+            {{ t("No posts found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
   </div>
-  <empty-content v-else-if="!$apollo.loading" icon="account-multiple">
-    {{ $t("This group was not found") }}
+  <empty-content v-else-if="!loading" icon="account-multiple">
+    {{ t("This group was not found") }}
     <template #desc>
-      <b-button
-        type="is-text"
+      <o-button
+        variant="text"
         tag="router-link"
         :to="{ name: RouteName.ADMIN_GROUPS }"
-        >{{ $t("Back to group list") }}</b-button
+        >{{ t("Back to group list") }}</o-button
       >
     </template>
   </empty-content>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+<script lang="ts" setup>
 import { GET_GROUP, REFRESH_PROFILE } from "@/graphql/group";
 import { formatBytes } from "@/utils/datetime";
 import { MemberRole } from "@/types/enums";
@@ -303,273 +308,216 @@ import RouteName from "../../router/name";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import EmptyContent from "../../components/Utils/EmptyContent.vue";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
-import VueRouter from "vue-router";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, inject } from "vue";
+import { useHead } from "@vueuse/head";
+import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import { useI18n } from "vue-i18n";
+import {
+  formatTimeString,
+  formatDateString,
+  formatDateTimeString,
+} from "@/filters/datetime";
+import { Dialog } from "@/plugins/dialog";
+import { Notifier } from "@/plugins/notifier";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import Tag from "@/components/TagElement.vue";
 
 const EVENTS_PER_PAGE = 10;
 const POSTS_PER_PAGE = 10;
 const MEMBERS_PER_PAGE = 10;
 
-@Component({
-  apollo: {
-    group: {
-      query: GET_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.id,
-          organizedEventsPage: this.organizedEventsPage,
-          organizedEventsLimit: EVENTS_PER_PAGE,
-          postsPage: this.postsPage,
-          postsLimit: POSTS_PER_PAGE,
-          membersLimit: MEMBERS_PER_PAGE,
-          membersPage: this.membersPage,
-        };
-      },
-      skip() {
-        return !this.id;
-      },
-      update: (data) => data.getGroup,
+const props = defineProps<{ id: string }>();
+
+const organizedEventsPage = useRouteQuery(
+  "organizedEventsPage",
+  1,
+  integerTransformer
+);
+const membersPage = useRouteQuery("membersPage", 1, integerTransformer);
+const postsPage = useRouteQuery("postsPage", 1, integerTransformer);
+
+const {
+  result: groupResult,
+  loading,
+  fetchMore,
+} = useQuery(
+  GET_GROUP,
+  () => ({
+    id: props.id,
+    organizedEventsPage: organizedEventsPage.value,
+    organizedEventsLimit: EVENTS_PER_PAGE,
+    postsPage: postsPage.value,
+    postsLimit: POSTS_PER_PAGE,
+    membersLimit: MEMBERS_PER_PAGE,
+    membersPage: membersPage.value,
+  }),
+  () => ({
+    enabled: props.id !== undefined,
+  })
+);
+
+const group = computed(() => groupResult.value?.getGroup);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => displayName(group.value)),
+});
+
+const metadata = computed((): Array<Record<string, string>> => {
+  if (!group.value) return [];
+  const res: Record<string, string>[] = [
+    {
+      key: t("Status") as string,
+      value: (group.value.suspended ? t("Suspended") : t("Active")) as string,
     },
-  },
-  components: {
-    ActorCard,
-    EmptyContent,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { group } = this;
-    return {
-      title: group ? group.name || usernameWithDomain(group) : "",
-    };
-  },
-})
-export default class AdminGroupProfile extends Vue {
-  @Prop({ required: true }) id!: string;
+    {
+      key: t("Domain") as string,
+      value: (group.value.domain ? group.value.domain : t("Local")) as string,
+    },
+    {
+      key: t("Uploaded media size") as string,
+      value: formatBytes(group.value.mediaSize),
+    },
+  ];
+  return res;
+});
 
-  group!: IGroup;
+const dialog = inject<Dialog>("dialog");
+const notifier = inject<Notifier>("notifier");
 
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  RouteName = RouteName;
-
-  EVENTS_PER_PAGE = EVENTS_PER_PAGE;
-
-  POSTS_PER_PAGE = POSTS_PER_PAGE;
-
-  MEMBERS_PER_PAGE = MEMBERS_PER_PAGE;
-
-  MemberRole = MemberRole;
-
-  get organizedEventsPage(): number {
-    return parseInt(
-      (this.$route.query.organizedEventsPage as string) || "1",
-      10
-    );
-  }
-
-  set organizedEventsPage(page: number) {
-    this.pushRouter({ organizedEventsPage: page.toString() });
-  }
-
-  get membersPage(): number {
-    return parseInt((this.$route.query.membersPage as string) || "1", 10);
-  }
-
-  set membersPage(page: number) {
-    this.pushRouter({ membersPage: page.toString() });
-  }
-
-  get postsPage(): number {
-    return parseInt((this.$route.query.postsPage as string) || "1", 10);
-  }
-
-  set postsPage(page: number) {
-    this.pushRouter({ postsPage: page.toString() });
-  }
-
-  get metadata(): Array<Record<string, string>> {
-    if (!this.group) return [];
-    const res: Record<string, string>[] = [
-      {
-        key: this.$t("Status") as string,
-        value: (this.group.suspended
-          ? this.$t("Suspended")
-          : this.$t("Active")) as string,
-      },
-      {
-        key: this.$t("Domain") as string,
-        value: (this.group.domain
-          ? this.group.domain
-          : this.$t("Local")) as string,
-      },
-      {
-        key: this.$i18n.t("Uploaded media size") as string,
-        value: formatBytes(this.group.mediaSize),
-      },
-    ];
-    return res;
-  }
-
-  confirmSuspendProfile(): void {
-    const message = (
-      this.group.domain
-        ? this.$t(
-            "Are you sure you want to <b>suspend</b> this group? As this group originates from instance {instance}, this will only remove local members and delete the local data, as well as rejecting all the future data.",
-            { instance: this.group.domain }
-          )
-        : this.$t(
-            "Are you sure you want to <b>suspend</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
-          )
-    ) as string;
-
-    this.$buefy.dialog.confirm({
-      title: this.$t("Suspend group") as string,
-      message,
-      confirmText: this.$t("Suspend group") as string,
-      cancelText: this.$t("Cancel") as string,
-      type: "is-danger",
-      hasIcon: true,
-      onConfirm: () => this.suspendProfile(),
-    });
-  }
-
-  async suspendProfile(): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ suspendProfile: { id: string } }>({
-        mutation: SUSPEND_PROFILE,
-        variables: {
-          id: this.id,
-        },
-        update: (
-          store: ApolloCache<{ suspendProfile: { id: string } }>,
-          { data }: FetchResult
-        ) => {
-          if (data == null) return;
-          const profileId = this.id;
-
-          const profileData = store.readQuery<{ getGroup: IGroup }>({
-            query: GET_GROUP,
-            variables: {
-              id: profileId,
-              organizedEventsPage: this.organizedEventsPage,
-              organizedEventsLimit: EVENTS_PER_PAGE,
-              postsPage: this.postsPage,
-              postsLimit: POSTS_PER_PAGE,
-            },
-          });
-
-          if (!profileData) return;
-          store.writeQuery({
-            query: GET_GROUP,
-            variables: {
-              id: profileId,
-            },
-            data: {
-              getGroup: {
-                ...profileData.getGroup,
-                suspended: true,
-                avatar: null,
-                name: "",
-                summary: "",
-              },
-            },
-          });
-        },
-      });
-    } catch (e) {
-      console.error(e);
-      this.$notifier.error(this.$t("Error while suspending group") as string);
-    }
-  }
-
-  async unsuspendProfile(): Promise<void> {
-    try {
-      const profileID = this.id;
-      await this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
-        mutation: UNSUSPEND_PROFILE,
-        variables: {
-          id: this.id,
-        },
-        refetchQueries: [
-          {
-            query: GET_GROUP,
-            variables: {
-              id: profileID,
-            },
-          },
-        ],
-      });
-    } catch (e) {
-      console.error(e);
-      this.$notifier.error(this.$t("Error while suspending group") as string);
-    }
-  }
-
-  async refreshProfile(): Promise<void> {
-    try {
-      this.$apollo.mutate<{ refreshProfile: IActor }>({
-        mutation: REFRESH_PROFILE,
-        variables: {
-          actorId: this.id,
-        },
-      });
-      this.$notifier.success(
-        this.$t("Triggered profile refreshment") as string
+const confirmSuspendProfile = (): void => {
+  const message = group.value.domain
+    ? t(
+        "Are you sure you want to <b>suspend</b> this group? As this group originates from instance {instance}, this will only remove local members and delete the local data, as well as rejecting all the future data.",
+        { instance: group.value.domain }
+      )
+    : t(
+        "Are you sure you want to <b>suspend</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
       );
-    } catch (e) {
-      console.error(e);
-      this.$notifier.error(this.$t("Error while suspending group") as string);
-    }
-  }
 
-  async onOrganizedEventsPageChange(page: number): Promise<void> {
-    this.organizedEventsPage = page;
-    await this.$apollo.queries.group.fetchMore({
+  dialog?.confirm({
+    title: t("Suspend group"),
+    message,
+    confirmText: t("Suspend group"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    hasIcon: true,
+    onConfirm: () =>
+      suspendProfile({
+        id: props.id,
+      }),
+  });
+};
+
+const { mutate: suspendProfile, onError: onSuspendProfileError } = useMutation<{
+  suspendProfile: { id: string };
+}>(SUSPEND_PROFILE, () => ({
+  update: (
+    store: ApolloCache<{ suspendProfile: { id: string } }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+    const profileId = props.id;
+
+    const profileData = store.readQuery<{ getGroup: IGroup }>({
+      query: GET_GROUP,
       variables: {
-        actorId: this.id,
-        organizedEventsPage: this.organizedEventsPage,
+        id: profileId,
+        organizedEventsPage: organizedEventsPage.value,
         organizedEventsLimit: EVENTS_PER_PAGE,
+        postsPage: postsPage.value,
+        postsLimit: POSTS_PER_PAGE,
       },
     });
-  }
 
-  async onMembersPageChange(page: number): Promise<void> {
-    this.membersPage = page;
-    await this.$apollo.queries.group.fetchMore({
+    if (!profileData) return;
+    store.writeQuery({
+      query: GET_GROUP,
       variables: {
-        actorId: this.id,
-        memberPage: this.membersPage,
-        memberLimit: EVENTS_PER_PAGE,
+        id: profileId,
+      },
+      data: {
+        getGroup: {
+          ...profileData.getGroup,
+          suspended: true,
+          avatar: null,
+          name: "",
+          summary: "",
+        },
       },
     });
-  }
+  },
+}));
 
-  async onPostsPageChange(page: number): Promise<void> {
-    this.postsPage = page;
-    await this.$apollo.queries.group.fetchMore({
-      variables: {
-        actorId: this.id,
-        postsPage: this.postsPage,
-        postLimit: POSTS_PER_PAGE,
+onSuspendProfileError((e) => {
+  console.error(e);
+  notifier?.error(t("Error while suspending group"));
+});
+
+const { mutate: unsuspendProfile, onError: onUnsuspendProfileError } =
+  useMutation(UNSUSPEND_PROFILE, () => ({
+    refetchQueries: [
+      {
+        query: GET_GROUP,
+        variables: {
+          id: props.id,
+        },
       },
-    });
-  }
+    ],
+  }));
 
-  private async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      await this.$router.push({
-        name: RouteName.ADMIN_GROUP_PROFILE,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-}
+onUnsuspendProfileError((e) => {
+  console.error(e);
+  notifier?.error(t("Error while suspending group"));
+});
+
+const {
+  mutate: refreshProfile,
+  onDone: onRefreshProfileDone,
+  onError: onRefreshProfileError,
+} = useMutation<{ refreshProfile: IActor }>(REFRESH_PROFILE);
+
+onRefreshProfileDone(() => {
+  notifier?.success(t("Triggered profile refreshment"));
+});
+
+onRefreshProfileError((e) => {
+  console.error(e);
+  notifier?.error(t("Error while suspending group"));
+});
+
+const onOrganizedEventsPageChange = async (page: number): Promise<void> => {
+  organizedEventsPage.value = page;
+  await fetchMore({
+    variables: {
+      id: props.id,
+      organizedEventsPage: organizedEventsPage.value,
+      organizedEventsLimit: EVENTS_PER_PAGE,
+    },
+  });
+};
+
+const onMembersPageChange = async (page: number): Promise<void> => {
+  membersPage.value = page;
+  await fetchMore({
+    variables: {
+      id: props.id,
+      membersPage: membersPage.value,
+      membersLimit: EVENTS_PER_PAGE,
+    },
+  });
+};
+
+const onPostsPageChange = async (page: number): Promise<void> => {
+  postsPage.value = page;
+  await fetchMore({
+    variables: {
+      id: props.id,
+      postsPage: postsPage.value,
+      postsLimit: POSTS_PER_PAGE,
+    },
+  });
+};
 </script>
diff --git a/js/src/views/Admin/AdminProfile.vue b/js/src/views/Admin/AdminProfile.vue
index 227cc0a88..32ecf05d4 100644
--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -24,7 +24,7 @@
       />
     </div>
     <section class="mt-4 mb-3">
-      <h2 class="text-lg font-bold">{{ $t("Details") }}</h2>
+      <h2 class="">{{ $t("Details") }}</h2>
       <div class="flex flex-col">
         <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div class="inline-block py-2 min-w-full sm:px-2 lg:px-8">
@@ -34,14 +34,14 @@
                   <tr
                     v-for="{ key, value, link } in metadata"
                     :key="key"
-                    class="odd:bg-white even:bg-gray-50 border-b"
+                    class="odd:bg-white dark:odd:bg-zinc-800 even:bg-gray-50 dark:even:bg-zinc-700 border-b"
                   >
                     <td class="py-4 px-2 whitespace-nowrap">
                       {{ key }}
                     </td>
                     <td
                       v-if="link"
-                      class="py-4 px-2 text-sm text-gray-500 whitespace-nowrap"
+                      class="py-4 px-2 text-sm text-gray-500 dark:text-gray-200 whitespace-nowrap"
                     >
                       <router-link :to="link">
                         {{ value }}
@@ -49,7 +49,7 @@
                     </td>
                     <td
                       v-else
-                      class="py-4 px-2 text-sm text-gray-500 whitespace-nowrap"
+                      class="py-4 px-2 text-sm text-gray-500 dark:text-gray-200 whitespace-nowrap"
                     >
                       {{ value }}
                     </td>
@@ -62,19 +62,19 @@
       </div>
     </section>
     <section class="mt-4 mb-3">
-      <h2 class="text-lg font-bold">{{ $t("Actions") }}</h2>
+      <h2 class="">{{ $t("Actions") }}</h2>
       <div class="buttons" v-if="person.domain">
-        <b-button
-          @click="suspendProfile"
+        <o-button
+          @click="suspendProfile({ id })"
           v-if="person.domain && !person.suspended"
-          type="is-primary"
-          >{{ $t("Suspend") }}</b-button
+          variant="primary"
+          >{{ $t("Suspend") }}</o-button
         >
-        <b-button
-          @click="unsuspendProfile"
+        <o-button
+          @click="unsuspendProfile({ id })"
           v-if="person.domain && person.suspended"
-          type="is-primary"
-          >{{ $t("Unsuspend") }}</b-button
+          variant="primary"
+          >{{ $t("Unsuspend") }}</o-button
         >
       </div>
       <p v-else></p>
@@ -83,8 +83,8 @@
         class="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg"
         role="alert"
       >
-        <i18n
-          path="This profile is located on this instance, so you need to {access_the_corresponding_account} to suspend it."
+        <i18n-t
+          keypath="This profile is located on this instance, so you need to {access_the_corresponding_account} to suspend it."
         >
           <template #access_the_corresponding_account>
             <router-link
@@ -96,450 +96,395 @@
               >{{ $t("access the corresponding account") }}</router-link
             >
           </template>
-        </i18n>
+        </i18n-t>
       </div>
     </section>
     <section class="mt-4 mb-3">
-      <h2 class="text-lg font-bold">{{ $t("Organized events") }}</h2>
-      <b-table
-        :data="person.organizedEvents.elements"
-        :loading="$apollo.queries.person.loading"
+      <h2 class="">{{ $t("Organized events") }}</h2>
+      <o-table
+        :data="person.organizedEvents?.elements"
+        :loading="loading"
         paginated
         backend-pagination
-        :current-page.sync="organizedEventsPage"
+        v-model:current-page="organizedEventsPage"
         :aria-next-label="$t('Next page')"
         :aria-previous-label="$t('Previous page')"
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
-        :total="person.organizedEvents.total"
+        :total="person.organizedEvents?.total"
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
-          {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+          {{ formatDateTimeString(props.row.beginsOn) }}
+        </o-table-column>
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
           </router-link>
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account-group" :inline="true">
             {{ $t("No organized events listed") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section class="mt-4 mb-3">
-      <h2 class="text-lg font-bold">{{ $t("Participations") }}</h2>
-      <b-table
+      <h2 class="">{{ $t("Participations") }}</h2>
+      <o-table
         :data="
-          person.participations.elements.map(
+          person.participations?.elements.map(
             (participation) => participation.event
           )
         "
-        :loading="$apollo.loading"
+        :loading="loading"
         paginated
         backend-pagination
-        :current-page.sync="participationsPage"
+        v-model:current-page="participationsPage"
         :aria-next-label="$t('Next page')"
         :aria-previous-label="$t('Previous page')"
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
-        :total="person.participations.total"
+        :total="person.participations?.total"
         :per-page="EVENTS_PER_PAGE"
         @page-change="onParticipationsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
-          {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+          {{ formatDateTimeString(props.row.beginsOn) }}
+        </o-table-column>
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
           </router-link>
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account-group" :inline="true">
             {{ $t("No participations listed") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section class="mt-4 mb-3">
-      <h2 class="text-lg font-bold">{{ $t("Memberships") }}</h2>
-      <b-table
-        :data="person.memberships.elements"
-        :loading="$apollo.loading"
+      <h2 class="">{{ $t("Memberships") }}</h2>
+      <o-table
+        :data="person.memberships?.elements"
+        :loading="loading"
         paginated
         backend-pagination
-        :current-page.sync="membershipsPage"
+        v-model:current-page="membershipsPage"
         :aria-next-label="$t('Next page')"
         :aria-previous-label="$t('Previous page')"
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
-        :total="person.memberships.total"
+        :total="person.memberships?.total"
         :per-page="EVENTS_PER_PAGE"
         @page-change="onMembershipsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="parent.preferredUsername"
           :label="$t('Group')"
           v-slot="props"
         >
-          <article class="media">
-            <figure
-              class="media-left image is-48x48"
-              v-if="props.row.parent.avatar"
-            >
+          <article class="flex gap-2">
+            <figure class="" v-if="props.row.parent.avatar">
               <img
-                class="is-rounded"
+                class="rounded-full"
                 :src="props.row.parent.avatar.url"
                 alt=""
+                width="48"
+                height="48"
               />
             </figure>
-            <b-icon
-              class="media-left"
-              v-else
-              size="is-large"
-              icon="account-circle"
-            />
-            <div class="media-content">
-              <div class="content">
+            <AccountCircle v-else :size="48" />
+            <div class="">
+              <div class="prose dark:prose-invert">
                 <span v-if="props.row.parent.name">{{
                   props.row.parent.name
                 }}</span
                 ><br />
-                <span class="is-size-7 has-text-grey"
-                  >@{{ usernameWithDomain(props.row.parent) }}</span
-                >
+                <span>@{{ usernameWithDomain(props.row.parent) }}</span>
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
-            type="is-primary"
+        </o-table-column>
+        <o-table-column field="role" :label="$t('Role')" v-slot="props">
+          <tag
+            variant="primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
             {{ $t("Administrator") }}
-          </b-tag>
-          <b-tag
-            type="is-primary"
+          </tag>
+          <tag
+            variant="primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
             {{ $t("Moderator") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+          </tag>
+          <tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
-          </b-tag>
-          <b-tag
-            type="is-warning"
+          </tag>
+          <tag
+            variant="warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
             {{ $t("Not approved") }}
-          </b-tag>
-          <b-tag
-            type="is-danger"
+          </tag>
+          <tag
+            variant="danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
             {{ $t("Rejected") }}
-          </b-tag>
-          <b-tag
-            type="is-danger"
+          </tag>
+          <tag
+            variant="danger"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
             {{ $t("Invited") }}
-          </b-tag>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+          </tag>
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
-            {{ props.row.insertedAt | formatDateString }}<br />{{
-              props.row.insertedAt | formatTimeString
+            {{ formatDateString(props.row.insertedAt) }}<br />{{
+              formatTimeString(props.row.insertedAt)
             }}
           </span>
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account-group" :inline="true">
             {{ $t("No memberships found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
   </div>
-  <empty-content v-else-if="!$apollo.loading" icon="account">
+  <empty-content v-else-if="!loading" icon="account">
     {{ $t("This profile was not found") }}
     <template #desc>
-      <b-button
-        type="is-text"
+      <o-button
+        variant="text"
         tag="router-link"
         :to="{ name: RouteName.PROFILES }"
-        >{{ $t("Back to profile list") }}</b-button
+        >{{ $t("Back to profile list") }}</o-button
       >
     </template>
   </empty-content>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+<script lang="ts" setup>
 import { formatBytes } from "@/utils/datetime";
 import {
   GET_PERSON,
   SUSPEND_PROFILE,
   UNSUSPEND_PROFILE,
-} from "../../graphql/actor";
-import { IPerson } from "../../types/actor";
-import { displayName, usernameWithDomain } from "../../types/actor/actor.model";
-import RouteName from "../../router/name";
-import ActorCard from "../../components/Account/ActorCard.vue";
-import EmptyContent from "../../components/Utils/EmptyContent.vue";
+} from "@/graphql/actor";
+import { IPerson } from "@/types/actor";
+import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
+import RouteName from "@/router/name";
+import ActorCard from "@/components/Account/ActorCard.vue";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
-import VueRouter from "vue-router";
 import { MemberRole } from "@/types/enums";
 import cloneDeep from "lodash/cloneDeep";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  formatDateString,
+  formatTimeString,
+  formatDateTimeString,
+} from "@/filters/datetime";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import Tag from "@/components/TagElement.vue";
 
 const EVENTS_PER_PAGE = 10;
 const PARTICIPATIONS_PER_PAGE = 10;
 const MEMBERSHIPS_PER_PAGE = 10;
 
-@Component({
-  apollo: {
-    person: {
-      query: GET_PERSON,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          actorId: this.id,
-          organizedEventsPage: this.organizedEventsPage,
-          organizedEventsLimit: EVENTS_PER_PAGE,
-          participationsPage: this.participationsPage,
-          participationLimit: PARTICIPATIONS_PER_PAGE,
-          membershipsPage: this.membershipsPage,
-          membershipsLimit: MEMBERSHIPS_PER_PAGE,
-        };
-      },
-      skip() {
-        return !this.id;
-      },
-    },
-  },
-  components: {
-    ActorCard,
-    EmptyContent,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { person } = this;
-    return {
-      title: person ? person.name || usernameWithDomain(person) : "",
-    };
-  },
-})
-export default class AdminProfile extends Vue {
-  @Prop({ required: true }) id!: string;
+const props = defineProps<{ id: string }>();
 
-  person!: IPerson;
+const organizedEventsPage = useRouteQuery(
+  "organizedEventsPage",
+  1,
+  integerTransformer
+);
+const participationsPage = useRouteQuery(
+  "participationsPage",
+  1,
+  integerTransformer
+);
+const membershipsPage = useRouteQuery("membershipsPage", 1, integerTransformer);
 
-  usernameWithDomain = usernameWithDomain;
+const {
+  result: personResult,
+  fetchMore,
+  loading,
+} = useQuery<{ person: IPerson }>(GET_PERSON, () => ({
+  actorId: props.id,
+  organizedEventsPage: organizedEventsPage.value,
+  organizedEventsLimit: EVENTS_PER_PAGE,
+  participationsPage: participationsPage.value,
+  participationLimit: PARTICIPATIONS_PER_PAGE,
+  membershipsPage: membershipsPage.value,
+  membershipsLimit: MEMBERSHIPS_PER_PAGE,
+}));
 
-  displayName = displayName;
+const person = computed(() => personResult.value?.person);
 
-  RouteName = RouteName;
+const { t } = useI18n({ useScope: "global" });
 
-  EVENTS_PER_PAGE = EVENTS_PER_PAGE;
+useHead({
+  title: computed(() => displayName(person.value)),
+});
 
-  PARTICIPATIONS_PER_PAGE = PARTICIPATIONS_PER_PAGE;
-
-  MEMBERSHIPS_PER_PAGE = MEMBERSHIPS_PER_PAGE;
-
-  MemberRole = MemberRole;
-
-  get organizedEventsPage(): number {
-    return parseInt(
-      (this.$route.query.organizedEventsPage as string) || "1",
-      10
-    );
-  }
-
-  set organizedEventsPage(page: number) {
-    this.pushRouter({ organizedEventsPage: page.toString() });
-  }
-
-  get participationsPage(): number {
-    return parseInt(
-      (this.$route.query.participationsPage as string) || "1",
-      10
-    );
-  }
-
-  set participationsPage(page: number) {
-    this.pushRouter({ participationsPage: page.toString() });
-  }
-
-  get membershipsPage(): number {
-    return parseInt((this.$route.query.membershipsPage as string) || "1", 10);
-  }
-
-  set membershipsPage(page: number) {
-    this.pushRouter({ membershipsPage: page.toString() });
-  }
-
-  get metadata(): Array<Record<string, unknown>> {
-    if (!this.person) return [];
-    const res: Record<string, unknown>[] = [
+const metadata = computed(
+  (): Array<{
+    key: string;
+    value: string;
+    link?: { name: string; params: Record<string, any> };
+  }> => {
+    if (!person.value) return [];
+    const res: {
+      key: string;
+      value: string;
+      link?: { name: string; params: Record<string, any> };
+    }[] = [
       {
-        key: this.$t("Status") as string,
-        value: this.person.suspended ? this.$t("Suspended") : this.$t("Active"),
+        key: t("Status"),
+        value: person.value.suspended ? t("Suspended") : t("Active"),
       },
       {
-        key: this.$t("Domain") as string,
-        value: this.person.domain ? this.person.domain : this.$t("Local"),
-        link: this.person.domain
+        key: t("Domain"),
+        value: person.value.domain ? person.value.domain : t("Local"),
+        link: person.value.domain
           ? {
               name: RouteName.INSTANCE,
-              params: { domain: this.person.domain },
+              params: { domain: person.value.domain },
             }
           : undefined,
       },
       {
-        key: this.$i18n.t("Uploaded media size"),
-        value: formatBytes(this.person.mediaSize),
+        key: t("Uploaded media size"),
+        value: formatBytes(person.value.mediaSize ?? 0),
       },
     ];
-    if (!this.person.domain && this.person.user) {
+    if (!person.value.domain && person.value.user) {
       res.push({
-        key: this.$t("User") as string,
+        key: t("User"),
         link: {
           name: RouteName.ADMIN_USER_PROFILE,
-          params: { id: this.person.user.id },
+          params: { id: person.value.user.id },
         },
-        value: this.person.user.email,
+        value: person.value.user.email,
       });
     }
     return res;
   }
+);
 
-  async suspendProfile(): Promise<void> {
-    this.$apollo.mutate<{ suspendProfile: { id: string } }>({
-      mutation: SUSPEND_PROFILE,
+const { mutate: suspendProfile } = useMutation<
+  {
+    suspendProfile: { id: string };
+  },
+  { id: string }
+>(SUSPEND_PROFILE, () => ({
+  update: (
+    store: ApolloCache<{ suspendProfile: { id: string } }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+    const profileId = props.id;
+
+    const profileData = store.readQuery<{ person: IPerson }>({
+      query: GET_PERSON,
       variables: {
-        id: this.id,
-      },
-      update: (
-        store: ApolloCache<{ suspendProfile: { id: string } }>,
-        { data }: FetchResult
-      ) => {
-        if (data == null) return;
-        const profileId = this.id;
-
-        const profileData = store.readQuery<{ person: IPerson }>({
-          query: GET_PERSON,
-          variables: {
-            actorId: profileId,
-            organizedEventsPage: 1,
-            organizedEventsLimit: EVENTS_PER_PAGE,
-            participationsPage: 1,
-            participationLimit: PARTICIPATIONS_PER_PAGE,
-            membershipsPage: 1,
-            membershipsLimit: MEMBERSHIPS_PER_PAGE,
-          },
-        });
-
-        if (!profileData) return;
-        const { person } = profileData;
-        store.writeQuery({
-          query: GET_PERSON,
-          variables: {
-            actorId: profileId,
-          },
-          data: {
-            person: {
-              ...cloneDeep(person),
-              participations: { total: 0, elements: [] },
-              suspended: true,
-              avatar: null,
-              name: "",
-              summary: "",
-            },
-          },
-        });
-      },
-    });
-  }
-
-  async unsuspendProfile(): Promise<void> {
-    const profileID = this.id;
-    this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
-      mutation: UNSUSPEND_PROFILE,
-      variables: {
-        id: this.id,
-      },
-      refetchQueries: [
-        {
-          query: GET_PERSON,
-          variables: {
-            actorId: profileID,
-            organizedEventsPage: 1,
-            organizedEventsLimit: EVENTS_PER_PAGE,
-          },
-        },
-      ],
-    });
-  }
-
-  async onOrganizedEventsPageChange(): Promise<void> {
-    await this.$apollo.queries.person.fetchMore({
-      variables: {
-        actorId: this.id,
-        organizedEventsPage: this.organizedEventsPage,
+        actorId: profileId,
+        organizedEventsPage: 1,
         organizedEventsLimit: EVENTS_PER_PAGE,
-      },
-    });
-  }
-
-  async onParticipationsPageChange(): Promise<void> {
-    await this.$apollo.queries.person.fetchMore({
-      variables: {
-        actorId: this.id,
-        participationPage: this.participationsPage,
+        participationsPage: 1,
         participationLimit: PARTICIPATIONS_PER_PAGE,
-      },
-    });
-  }
-
-  async onMembershipsPageChange(): Promise<void> {
-    await this.$apollo.queries.person.fetchMore({
-      variables: {
-        actorId: this.id,
-        membershipsPage: this.participationsPage,
+        membershipsPage: 1,
         membershipsLimit: MEMBERSHIPS_PER_PAGE,
       },
     });
-  }
 
-  private async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      await this.$router.push({
-        name: RouteName.ADMIN_PROFILE,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-}
+    if (!profileData) return;
+    const { person: cachedPerson } = profileData;
+    store.writeQuery({
+      query: GET_PERSON,
+      variables: {
+        actorId: profileId,
+      },
+      data: {
+        person: {
+          ...cloneDeep(cachedPerson),
+          participations: { total: 0, elements: [] },
+          suspended: true,
+          avatar: null,
+          name: "",
+          summary: "",
+        },
+      },
+    });
+  },
+}));
+
+const { mutate: unsuspendProfile } = useMutation<
+  { unsuspendProfile: { id: string } },
+  { id: string }
+>(UNSUSPEND_PROFILE, () => ({
+  refetchQueries: [
+    {
+      query: GET_PERSON,
+      variables: {
+        actorId: props.id,
+        organizedEventsPage: 1,
+        organizedEventsLimit: EVENTS_PER_PAGE,
+      },
+    },
+  ],
+}));
+
+const onOrganizedEventsPageChange = async (): Promise<void> => {
+  await fetchMore({
+    variables: {
+      actorId: props.id,
+      organizedEventsPage: organizedEventsPage.value,
+      organizedEventsLimit: EVENTS_PER_PAGE,
+    },
+  });
+};
+
+const onParticipationsPageChange = async (): Promise<void> => {
+  await fetchMore({
+    variables: {
+      actorId: props.id,
+      participationPage: participationsPage.value,
+      participationLimit: PARTICIPATIONS_PER_PAGE,
+    },
+  });
+};
+
+const onMembershipsPageChange = async (): Promise<void> => {
+  await fetchMore({
+    variables: {
+      actorId: props.id,
+      membershipsPage: participationsPage.value,
+      membershipsLimit: MEMBERSHIPS_PER_PAGE,
+    },
+  });
+};
 </script>
diff --git a/js/src/views/Admin/AdminUserProfile.vue b/js/src/views/Admin/AdminUserProfile.vue
index d6a6da772..984bed069 100644
--- a/js/src/views/Admin/AdminUserProfile.vue
+++ b/js/src/views/Admin/AdminUserProfile.vue
@@ -1,11 +1,11 @@
 <template>
-  <div v-if="user" class="section">
+  <div v-if="user">
     <breadcrumbs-nav
       :links="[
-        { name: RouteName.ADMIN, text: $t('Admin') },
+        { name: RouteName.ADMIN, text: t('Admin') },
         {
           name: RouteName.USERS,
-          text: $t('Users'),
+          text: t('Users'),
         },
         {
           name: RouteName.ADMIN_USER_PROFILE,
@@ -16,28 +16,24 @@
     />
 
     <section>
-      <h2 class="text-lg font-bold mb-3">{{ $t("Details") }}</h2>
+      <h2 class="text-lg font-bold mb-3">{{ t("Details") }}</h2>
       <div class="flex flex-col">
-        <div class="overflow-x-auto sm:-mx-6">
+        <div class="overflow-x-auto">
           <div class="inline-block py-2 min-w-full sm:px-2">
             <div class="overflow-hidden shadow-md sm:rounded-lg">
-              <table v-if="metadata.length > 0" class="min-w-full">
+              <table v-if="metadata.length > 0" class="table w-full">
                 <tbody>
                   <tr
-                    class="odd:bg-white even:bg-gray-50 border-b"
-                    v-for="{ key, value, link, type } in metadata"
+                    class="border-b"
+                    v-for="{ key, value, type } in metadata"
                     :key="key"
                   >
                     <td class="py-4 px-2 whitespace-nowrap align-middle">
                       {{ key }}
                     </td>
-                    <td v-if="link" class="py-4 px-2 whitespace-nowrap">
-                      <router-link :to="link">
-                        {{ value }}
-                      </router-link>
-                    </td>
+
                     <td
-                      v-else-if="type === 'ip'"
+                      v-if="type === 'ip'"
                       class="py-4 px-2 whitespace-nowrap"
                     >
                       <code>{{ value }}</code>
@@ -65,72 +61,72 @@
                     </td>
                     <td
                       v-if="type === 'email'"
-                      class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start"
+                      class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start gap-2"
                     >
-                      <b-button
-                        size="is-small"
+                      <o-button
+                        size="small"
                         v-if="!user.disabled"
                         @click="isEmailChangeModalActive = true"
-                        type="is-text"
+                        variant="text"
                         icon-left="pencil"
-                        >{{ $t("Change email") }}</b-button
+                        >{{ t("Change email") }}</o-button
                       >
-                      <b-button
+                      <o-button
                         tag="router-link"
                         :to="{
                           name: RouteName.USERS,
                           query: { emailFilter: `@${userEmailDomain}` },
                         }"
-                        size="is-small"
-                        type="is-text"
+                        size="small"
+                        variant="text"
                         icon-left="magnify"
                         >{{
-                          $t("Other users with the same email domain")
-                        }}</b-button
+                          t("Other users with the same email domain")
+                        }}</o-button
                       >
                     </td>
                     <td
                       v-else-if="type === 'confirmed'"
                       class="py-4 px-2 whitespace-nowrap flex items-center"
                     >
-                      <b-button
-                        size="is-small"
+                      <o-button
+                        size="small"
                         v-if="!user.confirmedAt || user.disabled"
                         @click="isConfirmationModalActive = true"
-                        type="is-text"
+                        variant="text"
                         icon-left="check"
-                        >{{ $t("Confirm user") }}</b-button
+                        >{{ t("Confirm user") }}</o-button
                       >
                     </td>
                     <td
                       v-else-if="type === 'role'"
                       class="py-4 px-2 whitespace-nowrap flex items-center"
                     >
-                      <b-button
-                        size="is-small"
+                      <o-button
+                        size="small"
                         v-if="!user.disabled"
                         @click="isRoleChangeModalActive = true"
-                        type="is-text"
+                        variant="text"
                         icon-left="chevron-double-up"
-                        >{{ $t("Change role") }}</b-button
+                        >{{ t("Change role") }}</o-button
                       >
                     </td>
                     <td
                       v-else-if="type === 'ip' && user.currentSignInIp"
                       class="py-4 px-2 whitespace-nowrap flex items-center"
                     >
-                      <b-button
+                      <o-button
                         tag="router-link"
                         :to="{
                           name: RouteName.USERS,
                           query: { ipFilter: user.currentSignInIp },
                         }"
-                        size="is-small"
-                        type="is-text"
+                        size="small"
+                        variant="text"
                         icon-left="web"
                         >{{
-                          $t("Other users with the same IP address")
-                        }}</b-button
+                          t("Other users with the same IP address")
+                        }}</o-button
                       >
                     </td>
                     <td v-else></td>
@@ -143,10 +139,10 @@
       </div>
     </section>
     <section class="my-4">
-      <h2 class="text-lg font-bold mb-3">{{ $t("Profiles") }}</h2>
+      <h2 class="text-lg font-bold mb-3">{{ t("Profiles") }}</h2>
       <div
         class="flex flex-wrap justify-center sm:justify-start gap-4"
-        v-if="profiles.length > 0"
+        v-if="profiles && profiles.length > 0"
       >
         <router-link
           v-for="profile in profiles"
@@ -161,422 +157,366 @@
           />
         </router-link>
       </div>
-      <empty-content v-else-if="!$apollo.loading" :inline="true" icon="account">
-        {{ $t("This user doesn't have any profiles") }}
+      <empty-content v-else-if="!loadingUser" :inline="true" icon="account">
+        {{ t("This user doesn't have any profiles") }}
       </empty-content>
     </section>
     <section class="my-4">
-      <h2 class="text-lg font-bold mb-3">{{ $t("Actions") }}</h2>
+      <h2 class="text-lg font-bold mb-3">{{ t("Actions") }}</h2>
       <div class="buttons" v-if="!user.disabled">
-        <b-button @click="suspendAccount" type="is-danger">{{
-          $t("Suspend")
-        }}</b-button>
+        <o-button @click="suspendAccount" variant="danger">{{
+          t("Suspend")
+        }}</o-button>
       </div>
       <div
         v-else
         class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg"
         role="alert"
       >
-        {{ $t("The user has been disabled") }}
+        {{ t("The user has been disabled") }}
       </div>
     </section>
-    <b-modal
-      :active="isEmailChangeModalActive"
+    <o-modal
+      v-model:active="isEmailChangeModalActive"
+      trap-focus
+      :destroy-on-hide="false"
+      aria-role="dialog"
+      :aria-label="t('Edit user email')"
+      :close-button-aria-label="t('Close')"
+      aria-modal
+    >
+      <form @submit.prevent="updateUserEmail">
+        <div class="" style="width: auto">
+          <header class="">
+            <h2>{{ t("Change user email") }}</h2>
+          </header>
+          <section class="">
+            <o-field :label="t('Previous email')">
+              <o-input type="email" v-model="user.email" disabled />
+            </o-field>
+            <o-field :label="t('New email')">
+              <o-input
+                type="email"
+                v-model="newUser.email"
+                :placeholder="t(`new{'@'}email.com`)"
+                required
+              >
+              </o-input>
+            </o-field>
+            <o-checkbox v-model="newUser.notify">{{
+              t("Notify the user of the change")
+            }}</o-checkbox>
+          </section>
+          <footer class="mt-2 flex gap-2">
+            <o-button outlined @click="isEmailChangeModalActive = false">{{
+              t("Close")
+            }}</o-button>
+            <o-button native-type="submit" variant="primary">{{
+              t("Change email")
+            }}</o-button>
+          </footer>
+        </div>
+      </form>
+    </o-modal>
+    <o-modal
+      v-model:active="isRoleChangeModalActive"
       has-modal-card
       trap-focus
       :destroy-on-hide="false"
       aria-role="dialog"
-      :aria-label="$t('Edit user email')"
-      :close-button-aria-label="$t('Close')"
+      :aria-label="t('Edit user email')"
+      :close-button-aria-label="t('Close')"
       aria-modal
     >
-      <template>
-        <form @submit.prevent="updateUserEmail">
-          <div class="modal-card" style="width: auto">
-            <header class="modal-card-head">
-              <p class="modal-card-title">{{ $t("Change user email") }}</p>
-              <button
-                type="button"
-                class="delete"
-                @click="isEmailChangeModalActive = false"
-              />
-            </header>
-            <section class="modal-card-body">
-              <b-field :label="$t('Previous email')">
-                <b-input type="email" :value="user.email" disabled> </b-input>
-              </b-field>
-              <b-field :label="$t('New email')">
-                <b-input
-                  type="email"
-                  v-model="newUser.email"
-                  :placeholder="$t('new@email.com')"
-                  required
-                >
-                </b-input>
-              </b-field>
-              <b-checkbox v-model="newUser.notify">{{
-                $t("Notify the user of the change")
-              }}</b-checkbox>
-            </section>
-            <footer class="modal-card-foot">
-              <b-button @click="isEmailChangeModalActive = false">{{
-                $t("Close")
-              }}</b-button>
-              <b-button native-type="submit" type="is-primary">{{
-                $t("Change email")
-              }}</b-button>
-            </footer>
-          </div>
-        </form>
-      </template>
-    </b-modal>
-    <b-modal
-      :active="isRoleChangeModalActive"
+      <form @submit.prevent="updateUserRole">
+        <header>
+          <h2>{{ t("Change user role") }}</h2>
+        </header>
+        <section>
+          <o-field>
+            <o-radio
+              v-model="newUser.role"
+              :native-value="ICurrentUserRole.ADMINISTRATOR"
+            >
+              {{ t("Administrator") }}
+            </o-radio>
+          </o-field>
+          <o-field>
+            <o-radio
+              v-model="newUser.role"
+              :native-value="ICurrentUserRole.MODERATOR"
+            >
+              {{ t("Moderator") }}
+            </o-radio>
+          </o-field>
+          <o-field>
+            <o-radio
+              v-model="newUser.role"
+              :native-value="ICurrentUserRole.USER"
+            >
+              {{ t("User") }}
+            </o-radio>
+          </o-field>
+          <o-checkbox v-model="newUser.notify">{{
+            t("Notify the user of the change")
+          }}</o-checkbox>
+        </section>
+        <footer class="mt-2 flex gap-2">
+          <o-button @click="isRoleChangeModalActive = false" outlined>{{
+            t("Close")
+          }}</o-button>
+          <o-button native-type="submit" variant="primary">{{
+            t("Change role")
+          }}</o-button>
+        </footer>
+      </form>
+    </o-modal>
+    <o-modal
+      v-model:active="isConfirmationModalActive"
       has-modal-card
       trap-focus
       :destroy-on-hide="false"
       aria-role="dialog"
-      :aria-label="$t('Edit user email')"
-      :close-button-aria-label="$t('Close')"
+      :aria-label="t('Edit user email')"
+      :close-button-aria-label="t('Close')"
       aria-modal
     >
-      <template>
-        <form @submit.prevent="updateUserRole">
-          <div class="modal-card" style="width: auto">
-            <header class="modal-card-head">
-              <p class="modal-card-title">{{ $t("Change user role") }}</p>
-              <button
-                type="button"
-                class="delete"
-                @click="isRoleChangeModalActive = false"
-              />
-            </header>
-            <section class="modal-card-body">
-              <b-field>
-                <b-radio
-                  v-model="newUser.role"
-                  :native-value="ICurrentUserRole.ADMINISTRATOR"
-                >
-                  {{ $t("Administrator") }}
-                </b-radio>
-              </b-field>
-              <b-field>
-                <b-radio
-                  v-model="newUser.role"
-                  :native-value="ICurrentUserRole.MODERATOR"
-                >
-                  {{ $t("Moderator") }}
-                </b-radio>
-              </b-field>
-              <b-field>
-                <b-radio
-                  v-model="newUser.role"
-                  :native-value="ICurrentUserRole.USER"
-                >
-                  {{ $t("User") }}
-                </b-radio>
-              </b-field>
-              <b-checkbox v-model="newUser.notify">{{
-                $t("Notify the user of the change")
-              }}</b-checkbox>
-            </section>
-            <footer class="modal-card-foot">
-              <b-button @click="isRoleChangeModalActive = false">{{
-                $t("Close")
-              }}</b-button>
-              <b-button native-type="submit" type="is-primary">{{
-                $t("Change role")
-              }}</b-button>
-            </footer>
-          </div>
-        </form>
-      </template>
-    </b-modal>
-    <b-modal
-      :active="isConfirmationModalActive"
-      has-modal-card
-      trap-focus
-      :destroy-on-hide="false"
-      aria-role="dialog"
-      :aria-label="$t('Edit user email')"
-      :close-button-aria-label="$t('Close')"
-      aria-modal
-    >
-      <template>
-        <form @submit.prevent="confirmUser">
-          <div class="modal-card" style="width: auto">
-            <header class="modal-card-head">
-              <p class="modal-card-title">{{ $t("Confirm user") }}</p>
-              <button
-                type="button"
-                class="delete"
-                @click="isConfirmationModalActive = false"
-              />
-            </header>
-            <section class="modal-card-body">
-              <b-checkbox v-model="newUser.notify">{{
-                $t("Notify the user of the change")
-              }}</b-checkbox>
-            </section>
-            <footer class="modal-card-foot">
-              <b-button @click="isConfirmationModalActive = false">{{
-                $t("Close")
-              }}</b-button>
-              <b-button native-type="submit" type="is-primary">{{
-                $t("Confirm user")
-              }}</b-button>
-            </footer>
-          </div>
-        </form>
-      </template>
-    </b-modal>
+      <form @submit.prevent="confirmUser">
+        <header>
+          <h2>{{ t("Confirm user") }}</h2>
+        </header>
+        <section>
+          <o-checkbox v-model="newUser.notify">{{
+            t("Notify the user of the change")
+          }}</o-checkbox>
+        </section>
+        <footer>
+          <o-button @click="isConfirmationModalActive = false">{{
+            t("Close")
+          }}</o-button>
+          <o-button native-type="submit" variant="primary">{{
+            t("Confirm user")
+          }}</o-button>
+        </footer>
+      </form>
+    </o-modal>
   </div>
-  <empty-content v-else-if="!$apollo.loading" icon="account">
-    {{ $t("This user was not found") }}
+  <empty-content v-else-if="!loadingUser" icon="account">
+    {{ t("This user was not found") }}
     <template #desc>
-      <b-button
-        type="is-text"
+      <o-button
+        variant="text"
         tag="router-link"
         :to="{ name: RouteName.USERS }"
-        >{{ $t("Back to user list") }}</b-button
+        >{{ t("Back to user list") }}</o-button
       >
     </template>
   </empty-content>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+<script lang="ts" setup>
 import { formatBytes } from "@/utils/datetime";
 import { ICurrentUserRole } from "@/types/enums";
 import { GET_USER, SUSPEND_USER } from "../../graphql/user";
-import { IActor, usernameWithDomain } from "../../types/actor/actor.model";
 import RouteName from "../../router/name";
 import { IUser } from "../../types/current-user.model";
 import EmptyContent from "../../components/Utils/EmptyContent.vue";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import { ADMIN_UPDATE_USER, LANGUAGES_CODES } from "@/graphql/admin";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { ILanguage } from "@/types/admin.model";
+import { computed, inject, reactive, ref, watch } from "vue";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { formatDateTimeString } from "@/filters/datetime";
+import { useRouter } from "vue-router";
+import { IPerson } from "@/types/actor";
+import { Dialog } from "@/plugins/dialog";
 
-@Component({
-  apollo: {
-    user: {
-      query: GET_USER,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.id,
-        };
-      },
-      skip() {
-        return !this.id;
-      },
-    },
-    languages: {
-      query: LANGUAGES_CODES,
-      variables() {
-        return {
-          codes: [this.languageCode],
-        };
-      },
-      skip() {
-        return !this.languageCode;
-      },
-    },
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { user } = this;
-    return {
-      title: user?.email,
-    };
-  },
-  components: {
-    EmptyContent,
-    ActorCard,
-  },
-})
-export default class AdminUserProfile extends Vue {
-  @Prop({ required: true }) id!: string;
+const props = defineProps<{ id: string }>();
 
-  user!: IUser;
+const { result: userResult, loading: loadingUser } = useQuery<{ user: IUser }>(
+  GET_USER,
+  () => ({
+    id: props.id,
+  })
+);
 
-  languages!: Array<{ code: string; name: string }>;
+const user = computed(() => userResult.value?.user);
 
-  usernameWithDomain = usernameWithDomain;
+const languageCode = computed(() => user.value?.locale);
 
-  RouteName = RouteName;
+const { result: languagesResult } = useQuery<{ languages: ILanguage[] }>(
+  LANGUAGES_CODES,
+  () => ({
+    codes: languageCode.value,
+  }),
+  () => ({
+    enabled: languageCode.value !== undefined,
+  })
+);
 
-  ICurrentUserRole = ICurrentUserRole;
+const languages = computed(() => languagesResult.value?.languages);
 
-  isEmailChangeModalActive = false;
+const { t } = useI18n({ useScope: "global" });
 
-  isRoleChangeModalActive = false;
+useHead({
+  title: computed(() => user.value?.email ?? ""),
+});
 
-  isConfirmationModalActive = false;
+const isEmailChangeModalActive = ref(false);
+const isRoleChangeModalActive = ref(false);
+const isConfirmationModalActive = ref(false);
 
-  newUser = {
-    email: "",
-    role: this?.user?.role,
-    confirm: false,
-    notify: true,
-  };
+const newUser = reactive({
+  email: "",
+  role: user.value?.role,
+  confirm: false,
+  notify: true,
+});
 
-  get metadata(): Array<Record<string, unknown>> {
-    if (!this.user) return [];
+const metadata = computed(
+  (): Array<{ key: string; value: string; type?: string }> => {
+    if (!user.value) return [];
     return [
       {
-        key: this.$i18n.t("Email"),
-        value: this.user.email,
+        key: t("Email"),
+        value: user.value.email,
         type: "email",
       },
       {
-        key: this.$i18n.t("Language"),
-        value: this.languages
-          ? this.languages[0].name
-          : this.$i18n.t("Unknown"),
+        key: t("Language"),
+        value: languages.value ? languages.value[0].name : t("Unknown"),
       },
       {
-        key: this.$i18n.t("Role"),
-        value: this.roleName(this.user.role),
+        key: t("Role"),
+        value: roleName(user.value.role),
         type: "role",
       },
       {
-        key: this.$i18n.t("Login status"),
-        value: this.user.disabled
-          ? this.$i18n.t("Disabled")
-          : this.$t("Activated"),
+        key: t("Login status"),
+        value: user.value.disabled ? t("Disabled") : t("Activated"),
       },
       {
-        key: this.$i18n.t("Confirmed"),
-        value:
-          this.$options.filters && this.user.confirmedAt
-            ? this.$options.filters.formatDateTimeString(this.user.confirmedAt)
-            : this.$i18n.t("Not confirmed"),
+        key: t("Confirmed"),
+        value: user.value.confirmedAt
+          ? formatDateTimeString(user.value.confirmedAt)
+          : t("Not confirmed"),
         type: "confirmed",
       },
       {
-        key: this.$i18n.t("Last sign-in"),
-        value:
-          this.$options.filters && this.user.currentSignInAt
-            ? this.$options.filters.formatDateTimeString(
-                this.user.currentSignInAt
-              )
-            : this.$t("Unknown"),
+        key: t("Last sign-in"),
+        value: user.value.currentSignInAt
+          ? formatDateTimeString(user.value.currentSignInAt)
+          : t("Unknown"),
       },
       {
-        key: this.$i18n.t("Last IP adress"),
-        value: this.user.currentSignInIp || this.$t("Unknown"),
-        type: this.user.currentSignInIp ? "ip" : undefined,
+        key: t("Last IP adress"),
+        value: user.value.currentSignInIp || t("Unknown"),
+        type: user.value.currentSignInIp ? "ip" : undefined,
       },
       {
-        key: this.$i18n.t("Total number of participations"),
-        value: this.user.participations.total,
+        key: t("Total number of participations"),
+        value: user.value.participations.total.toString(),
       },
       {
-        key: this.$i18n.t("Uploaded media total size"),
-        value: formatBytes(
-          this.user.mediaSize,
-          2,
-          this.$i18n.t("0 Bytes") as string
-        ),
+        key: t("Uploaded media total size"),
+        value: formatBytes(user.value.mediaSize),
       },
     ];
   }
+);
 
-  roleName(role: ICurrentUserRole): string {
-    switch (role) {
-      case ICurrentUserRole.ADMINISTRATOR:
-        return this.$t("Administrator") as string;
-      case ICurrentUserRole.MODERATOR:
-        return this.$t("Moderator") as string;
-      case ICurrentUserRole.USER:
-      default:
-        return this.$t("User") as string;
-    }
+const roleName = (role: ICurrentUserRole): string => {
+  switch (role) {
+    case ICurrentUserRole.ADMINISTRATOR:
+      return t("Administrator");
+    case ICurrentUserRole.MODERATOR:
+      return t("Moderator");
+    case ICurrentUserRole.USER:
+    default:
+      return t("User");
   }
+};
 
-  async suspendAccount(): Promise<void> {
-    this.$buefy.dialog.confirm({
-      title: this.$t("Suspend the account?") as string,
-      message: this.$t(
-        "Do you really want to suspend this account? All of the user's profiles will be deleted."
-      ) as string,
-      confirmText: this.$t("Suspend the account") as string,
-      cancelText: this.$t("Cancel") as string,
-      type: "is-danger",
-      onConfirm: async () => {
-        await this.$apollo.mutate<{ suspendProfile: { id: string } }>({
-          mutation: SUSPEND_USER,
-          variables: {
-            userId: this.id,
-          },
-        });
-        return this.$router.push({ name: RouteName.USERS });
-      },
-    });
-  }
+const router = useRouter();
 
-  get profiles(): IActor[] {
-    return this.user.actors;
-  }
+const { mutate: suspendUser } = useMutation<
+  { suspendProfile: { id: string } },
+  { userId: string }
+>(SUSPEND_USER);
 
-  get languageCode(): string | undefined {
-    return this.user?.locale;
-  }
+const dialog = inject<Dialog>("dialog");
 
-  async confirmUser() {
-    this.isConfirmationModalActive = false;
-    await this.updateUser({
-      confirmed: true,
-      notify: this.newUser.notify,
-    });
-  }
+const suspendAccount = async (): Promise<void> => {
+  dialog?.confirm({
+    title: t("Suspend the account?"),
+    message: t(
+      "Do you really want to suspend this account? All of the user's profiles will be deleted."
+    ),
+    confirmText: t("Suspend the account"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    onConfirm: async () => {
+      suspendUser({
+        userId: props.id,
+      });
+      return router.push({ name: RouteName.USERS });
+    },
+  });
+};
 
-  async updateUserRole() {
-    this.isRoleChangeModalActive = false;
-    await this.updateUser({
-      role: this.newUser.role,
-      notify: this.newUser.notify,
-    });
-  }
+const profiles = computed((): IPerson[] | undefined => {
+  return user.value?.actors;
+});
 
-  async updateUserEmail() {
-    this.isEmailChangeModalActive = false;
-    await this.updateUser({
-      email: this.newUser.email,
-      notify: this.newUser.notify,
-    });
-  }
+const confirmUser = async () => {
+  isConfirmationModalActive.value = false;
+  await updateUser({
+    id: props.id,
+    confirmed: true,
+    notify: newUser.notify,
+  });
+};
 
-  async updateUser(properties: {
+const updateUserRole = async () => {
+  isRoleChangeModalActive.value = false;
+  await updateUser({
+    id: props.id,
+    role: newUser.role,
+    notify: newUser.notify,
+  });
+};
+
+const updateUserEmail = async () => {
+  isEmailChangeModalActive.value = false;
+  await updateUser({
+    id: props.id,
+    email: newUser.email,
+    notify: newUser.notify,
+  });
+};
+
+const { mutate: updateUser } = useMutation<
+  { adminUpdateUser: IUser },
+  {
+    id: string;
     email?: string;
     notify: boolean;
     confirmed?: boolean;
     role?: ICurrentUserRole;
-  }) {
-    await this.$apollo.mutate<{ adminUpdateUser: IUser }>({
-      mutation: ADMIN_UPDATE_USER,
-      variables: {
-        id: this.id,
-        ...properties,
-      },
-    });
   }
+>(ADMIN_UPDATE_USER);
 
-  @Watch("user")
-  resetCurrentUserRole(
-    updatedUser: IUser | undefined,
-    oldUser: IUser | undefined
-  ) {
-    if (updatedUser?.role !== oldUser?.role) {
-      this.newUser.role = updatedUser?.role;
-    }
+watch(user, (updatedUser: IUser | undefined, oldUser: IUser | undefined) => {
+  if (updatedUser?.role !== oldUser?.role) {
+    newUser.role = updatedUser?.role;
   }
+});
 
-  get userEmailDomain(): string | undefined {
-    if (this?.user?.email) {
-      return this?.user?.email.split("@")[1];
-    }
-    return undefined;
+const userEmailDomain = computed((): string | undefined => {
+  if (user.value?.email) {
+    return user.value?.email.split("@")[1];
   }
-}
+  return undefined;
+});
 </script>
diff --git a/js/src/views/Admin/Dashboard.vue b/js/src/views/Admin/Dashboard.vue
deleted file mode 100644
index 75adc8e9f..000000000
--- a/js/src/views/Admin/Dashboard.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        { name: RouteName.ADMIN, text: $t('Admin') },
-        { text: $t('Dashboard') },
-      ]"
-    />
-    <section>
-      <h1 class="title">{{ $t("Administration") }}</h1>
-      <div class="tile is-ancestor" v-if="dashboard">
-        <div class="tile is-vertical">
-          <div class="tile">
-            <div class="tile is-parent is-vertical is-6">
-              <article class="tile is-child box">
-                <p class="dashboard-number">{{ dashboard.numberOfEvents }}</p>
-                <p
-                  v-html="
-                    $t(
-                      'Published events with <b>{comments}</b> comments and <b>{participations}</b> confirmed participations',
-                      {
-                        comments: dashboard.numberOfComments,
-                        participations:
-                          dashboard.numberOfConfirmedParticipationsToLocalEvents,
-                      }
-                    )
-                  "
-                />
-              </article>
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.ADMIN_GROUPS }">
-                  <p class="dashboard-number">{{ dashboard.numberOfGroups }}</p>
-                  <p>{{ $t("Groups") }}</p>
-                </router-link>
-              </article>
-            </div>
-            <div class="tile is-parent is-vertical">
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.USERS }">
-                  <p class="dashboard-number">{{ dashboard.numberOfUsers }}</p>
-                  <p>{{ $t("Users") }}</p>
-                </router-link>
-              </article>
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.RELAY_FOLLOWERS }">
-                  <p class="dashboard-number">
-                    {{ dashboard.numberOfFollowers }}
-                  </p>
-                  <p>{{ $t("Instances following you") }}</p>
-                </router-link>
-              </article>
-            </div>
-            <div class="tile is-parent is-vertical">
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.REPORTS }">
-                  <p class="dashboard-number">
-                    {{ dashboard.numberOfReports }}
-                  </p>
-                  <p>{{ $t("Opened reports") }}</p>
-                </router-link>
-              </article>
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.RELAY_FOLLOWINGS }">
-                  <p class="dashboard-number">
-                    {{ dashboard.numberOfFollowings }}
-                  </p>
-                  <p>{{ $t("Instances you follow") }}</p>
-                </router-link>
-              </article>
-            </div>
-          </div>
-          <div class="tile">
-            <div
-              class="tile is-parent is-vertical is-6"
-              v-if="dashboard.lastPublicEventPublished"
-            >
-              <article class="tile is-child box">
-                <router-link
-                  :to="{
-                    name: RouteName.EVENT,
-                    params: { uuid: dashboard.lastPublicEventPublished.uuid },
-                  }"
-                >
-                  <p>{{ $t("Last published event") }}</p>
-                  <p class="subtitle">
-                    {{ dashboard.lastPublicEventPublished.title }}
-                  </p>
-                  <figure
-                    class="image is-4by3"
-                    v-if="dashboard.lastPublicEventPublished.picture"
-                  >
-                    <img
-                      :src="dashboard.lastPublicEventPublished.picture.url"
-                    />
-                  </figure>
-                </router-link>
-              </article>
-            </div>
-            <div
-              class="tile is-parent is-vertical"
-              v-if="dashboard.lastGroupCreated"
-            >
-              <article class="tile is-child box">
-                <router-link
-                  :to="{
-                    name: RouteName.GROUP,
-                    params: {
-                      preferredUsername: usernameWithDomain(
-                        dashboard.lastGroupCreated
-                      ),
-                    },
-                  }"
-                >
-                  <p>{{ $t("Last group created") }}</p>
-                  <p class="subtitle">
-                    {{
-                      dashboard.lastGroupCreated.name ||
-                      dashboard.lastGroupCreated.preferredUsername
-                    }}
-                  </p>
-                  <figure
-                    class="image is-4by3"
-                    v-if="dashboard.lastGroupCreated.avatar"
-                  >
-                    <img :src="dashboard.lastGroupCreated.avatar.url" />
-                  </figure>
-                </router-link>
-              </article>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { DASHBOARD } from "@/graphql/admin";
-import { IDashboard } from "@/types/admin.model";
-import { usernameWithDomain } from "@/types/actor";
-import RouteName from "../../router/name";
-
-@Component({
-  apollo: {
-    dashboard: {
-      query: DASHBOARD,
-      fetchPolicy: "cache-and-network",
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Administration") as string,
-    };
-  },
-})
-export default class Dashboard extends Vue {
-  dashboard!: IDashboard;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-}
-</script>
-
-<style lang="scss" scoped>
-.dashboard-number {
-  color: #3c376e;
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 1.125;
-}
-
-.tile a,
-article.tile a {
-  color: #4a4a4a;
-  text-decoration: none;
-}
-
-.image.is-4by3 img {
-  object-fit: cover;
-}
-</style>
diff --git a/js/src/views/Admin/DashboardView.vue b/js/src/views/Admin/DashboardView.vue
new file mode 100644
index 000000000..932d6c36d
--- /dev/null
+++ b/js/src/views/Admin/DashboardView.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.ADMIN, text: t('Admin') },
+        { text: t('Dashboard') },
+      ]"
+    />
+    <section>
+      <h1>{{ t("Administration") }}</h1>
+      <div
+        class="grid grid-cols-1 lg:grid-rows-2 lg:grid-flow-col gap-x-4 items-stretch"
+      >
+        <NumberDashboardTile :number="dashboard?.numberOfEvents">
+          <template #subtitle>
+            <i18n-t
+              keypath="Published events with {comments} comments and {participations} confirmed participations"
+              tag="p"
+            >
+              <template #comments>
+                <b>{{ dashboard?.numberOfComments }}</b>
+              </template>
+              <template #participations>
+                <b>{{
+                  dashboard?.numberOfConfirmedParticipationsToLocalEvents
+                }}</b>
+              </template>
+            </i18n-t>
+          </template>
+        </NumberDashboardTile>
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfGroups"
+          :subtitle="t('Groups', dashboard?.numberOfGroups ?? 0)"
+          :to="{ name: RouteName.ADMIN_GROUPS }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfUsers"
+          :subtitle="t('Users', dashboard?.numberOfUsers ?? 0)"
+          :to="{ name: RouteName.ADMIN_GROUPS }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfReports"
+          :subtitle="t('Opened reports', dashboard?.numberOfReports ?? 0)"
+          :to="{ name: RouteName.REPORTS }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfFollowers"
+          :subtitle="
+            t('Instances following you', dashboard?.numberOfFollowers ?? 0)
+          "
+          :to="{
+            name: RouteName.INSTANCES,
+            query: { followStatus: InstanceFilterFollowStatus.FOLLOWING },
+          }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfFollowings"
+          :subtitle="
+            t('Instances you follow', dashboard?.numberOfFollowings ?? 0)
+          "
+          :to="{
+            name: RouteName.INSTANCES,
+            query: { followStatus: InstanceFilterFollowStatus.FOLLOWED },
+          }"
+        />
+      </div>
+      <div class="tile">
+        <div
+          class="tile is-parent is-vertical is-6"
+          v-if="dashboard?.lastPublicEventPublished"
+        >
+          <article class="tile is-child box">
+            <router-link
+              :to="{
+                name: RouteName.EVENT,
+                params: { uuid: dashboard?.lastPublicEventPublished.uuid },
+              }"
+            >
+              <p>{{ t("Last published event") }}</p>
+              <p>
+                {{ dashboard?.lastPublicEventPublished.title }}
+              </p>
+              <figure
+                class="image is-4by3"
+                v-if="dashboard?.lastPublicEventPublished.picture"
+              >
+                <img :src="dashboard?.lastPublicEventPublished.picture.url" />
+              </figure>
+            </router-link>
+          </article>
+        </div>
+        <div
+          class="tile is-parent is-vertical"
+          v-if="dashboard?.lastGroupCreated"
+        >
+          <article class="tile is-child box">
+            <router-link
+              :to="{
+                name: RouteName.GROUP,
+                params: {
+                  preferredUsername: usernameWithDomain(
+                    dashboard?.lastGroupCreated
+                  ),
+                },
+              }"
+            >
+              <p>{{ t("Last group created") }}</p>
+              <p>
+                {{
+                  dashboard?.lastGroupCreated.name ||
+                  dashboard?.lastGroupCreated.preferredUsername
+                }}
+              </p>
+              <figure
+                class="image is-4by3"
+                v-if="dashboard?.lastGroupCreated.avatar"
+              >
+                <img :src="dashboard?.lastGroupCreated.avatar.url" />
+              </figure>
+            </router-link>
+          </article>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import { DASHBOARD } from "@/graphql/admin";
+import { IDashboard } from "@/types/admin.model";
+import { usernameWithDomain } from "@/types/actor";
+import RouteName from "@/router/name";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import NumberDashboardTile from "@/components/Dashboard/NumberDashboardTile.vue";
+import LinkedNumberDashboardTile from "@/components/Dashboard/LinkedNumberDashboardTile.vue";
+import { InstanceFilterFollowStatus } from "@/types/enums";
+
+const { result: dashboardResult } = useQuery<{ dashboard: IDashboard }>(
+  DASHBOARD
+);
+
+const dashboard = computed(() => dashboardResult.value?.dashboard);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Administration")),
+});
+</script>
diff --git a/js/src/views/Admin/GroupProfiles.vue b/js/src/views/Admin/GroupProfiles.vue
index 6b4c95173..40cbdbec5 100644
--- a/js/src/views/Admin/GroupProfiles.vue
+++ b/js/src/views/Admin/GroupProfiles.vue
@@ -2,10 +2,10 @@
   <div>
     <breadcrumbs-nav
       :links="[
-        { name: RouteName.MODERATION, text: $t('Moderation') },
+        { name: RouteName.MODERATION, text: t('Moderation') },
         {
           name: RouteName.ADMIN_GROUPS,
-          text: $t('Groups'),
+          text: t('Groups'),
         },
       ]"
     />
@@ -13,43 +13,45 @@
       <router-link
         class="button is-primary"
         :to="{ name: RouteName.CREATE_GROUP }"
-        >{{ $t("Create group") }}</router-link
+        >{{ t("Create group") }}</router-link
       >
     </div>
     <div v-if="groups">
-      <b-switch v-model="local">{{ $t("Local") }}</b-switch>
-      <b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
-      <b-table
+      <div class="flex gap-2">
+        <o-switch v-model="local">{{ t("Local") }}</o-switch>
+        <o-switch v-model="suspended">{{ t("Suspended") }}</o-switch>
+      </div>
+      <o-table
         :data="groups.elements"
-        :loading="$apollo.queries.groups.loading"
+        :loading="loading"
         paginated
         backend-pagination
         backend-filtering
         :debounce-search="200"
-        :current-page.sync="page"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
+        v-model:current-page="page"
+        :aria-next-label="t('Next page')"
+        :aria-previous-label="t('Previous page')"
+        :aria-page-label="t('Page')"
+        :aria-current-label="t('Current page')"
         :total="groups.total"
         :per-page="PROFILES_PER_PAGE"
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column
+        <o-table-column
           field="preferredUsername"
-          :label="$t('Username')"
+          :label="t('Username')"
           searchable
         >
           <template #searchable="props">
-            <b-input
-              :aria-label="$t('Filter')"
+            <o-input
+              :aria-label="t('Filter')"
               v-model="props.filters.preferredUsername"
-              :placeholder="$t('Filter')"
+              :placeholder="t('Filter')"
               icon="magnify"
             />
           </template>
-          <template v-slot:default="props">
+          <template #default="props">
             <router-link
               class="profile"
               :to="{
@@ -57,17 +59,19 @@
                 params: { id: props.row.id },
               }"
             >
-              <article class="media">
-                <figure class="media-left" v-if="props.row.avatar">
-                  <p class="image is-48x48">
-                    <img
-                      :src="props.row.avatar.url"
-                      :alt="props.row.avatar.alt || ''"
-                    />
-                  </p>
+              <article class="flex gap-1">
+                <figure class="" v-if="props.row.avatar">
+                  <img
+                    :src="props.row.avatar.url"
+                    :alt="props.row.avatar.alt || ''"
+                    width="48"
+                    height="48"
+                    class="rounded-full"
+                  />
                 </figure>
-                <div class="media-content">
-                  <div class="content">
+                <AccountGroup v-else :size="48" />
+                <div class="">
+                  <div class="prose dark:prose-invert">
                     <strong v-if="props.row.name">{{ props.row.name }}</strong
                     ><br v-if="props.row.name" />
                     <small>@{{ props.row.preferredUsername }}</small>
@@ -76,164 +80,114 @@
               </article>
             </router-link>
           </template>
-        </b-table-column>
+        </o-table-column>
 
-        <b-table-column field="domain" :label="$t('Domain')" searchable>
+        <o-table-column field="domain" :label="t('Domain')" searchable>
           <template #searchable="props">
-            <b-input
-              :aria-label="$t('Filter')"
+            <o-input
+              :aria-label="t('Filter')"
               v-model="props.filters.domain"
-              :placeholder="$t('Filter')"
+              :placeholder="t('Filter')"
               icon="magnify"
             />
           </template>
-          <template v-slot:default="props">
+          <template #default="props">
             {{ props.row.domain }}
           </template>
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account-group" :inline="true">
-            {{ $t("No group matches the filters") }}
+            {{ t("No group matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
+<script lang="ts" setup>
 import { LIST_GROUPS } from "@/graphql/group";
 import RouteName from "../../router/name";
 import EmptyContent from "../../components/Utils/EmptyContent.vue";
-import VueRouter from "vue-router";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
+import { useRestrictions } from "@/composition/apollo/config";
+import { useQuery } from "@vue/apollo-composable";
+import {
+  booleanTransformer,
+  integerTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
+import { Paginate } from "@/types/paginate";
+import { IGroup } from "@/types/actor";
+import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 
 const PROFILES_PER_PAGE = 10;
 
-@Component({
-  apollo: {
-    config: CONFIG,
-    groups: {
-      query: LIST_GROUPS,
-      variables() {
-        return {
-          preferredUsername: this.preferredUsername,
-          name: this.name,
-          domain: this.domain,
-          local: this.local,
-          suspended: this.suspended,
-          page: this.page,
-          limit: PROFILES_PER_PAGE,
-        };
-      },
+const { restrictions } = useRestrictions();
+
+const preferredUsername = useRouteQuery("preferredUsername", "");
+const name = useRouteQuery("name", "");
+const domain = useRouteQuery("domain", "");
+const local = useRouteQuery("local", false, booleanTransformer);
+const suspended = useRouteQuery("suspended", false, booleanTransformer);
+const page = useRouteQuery("page", 1, integerTransformer);
+
+const {
+  result: groupsResult,
+  fetchMore,
+  loading,
+} = useQuery<{
+  groups: Paginate<IGroup>;
+}>(LIST_GROUPS, () => ({
+  preferredUsername: preferredUsername.value,
+  name: name.value,
+  domain: domain.value,
+  local: local.value,
+  suspended: suspended.value,
+  page: page.value,
+  limit: PROFILES_PER_PAGE,
+}));
+
+const groups = computed(() => groupsResult.value?.groups);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({ title: computed(() => t("Groups")) });
+
+const onPageChange = async (): Promise<void> => {
+  await doFetchMore();
+};
+
+const showCreateGroupsButton = computed((): boolean => {
+  return !!restrictions.value?.onlyAdminCanCreateGroups;
+});
+
+const onFiltersChange = ({
+  preferredUsername: newPreferredUsername,
+  domain: newDomain,
+}: {
+  preferredUsername: string;
+  domain: string;
+}): void => {
+  preferredUsername.value = newPreferredUsername;
+  domain.value = newDomain;
+  doFetchMore();
+};
+
+const doFetchMore = async (): Promise<void> => {
+  await fetchMore({
+    variables: {
+      preferredUsername: preferredUsername.value,
+      name: name.value,
+      domain: domain.value,
+      local: local.value,
+      suspended: suspended.value,
+      page: page.value,
+      limit: PROFILES_PER_PAGE,
     },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Groups") as string,
-    };
-  },
-  components: {
-    EmptyContent,
-  },
-})
-export default class GroupProfiles extends Vue {
-  name = "";
-
-  PROFILES_PER_PAGE = PROFILES_PER_PAGE;
-
-  config!: IConfig;
-  RouteName = RouteName;
-
-  async onPageChange(): Promise<void> {
-    await this.doFetchMore();
-  }
-
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  set page(page: number) {
-    this.pushRouter({ page: page.toString() });
-  }
-
-  get domain(): string {
-    return (this.$route.query.domain as string) || "";
-  }
-
-  set domain(domain: string) {
-    this.pushRouter({ domain });
-  }
-
-  get preferredUsername(): string {
-    return (this.$route.query.preferredUsername as string) || "";
-  }
-
-  set preferredUsername(preferredUsername: string) {
-    this.pushRouter({ preferredUsername });
-  }
-
-  get local(): boolean {
-    return this.$route.query.local === "1";
-  }
-
-  set local(local: boolean) {
-    this.pushRouter({ local: local ? "1" : "0" });
-  }
-
-  get suspended(): boolean {
-    return this.$route.query.suspended === "1";
-  }
-
-  set suspended(suspended: boolean) {
-    this.pushRouter({ suspended: suspended ? "1" : "0" });
-  }
-
-  get showCreateGroupsButton(): boolean {
-    return !!this.config?.restrictions?.onlyAdminCanCreateGroups;
-  }
-
-  onFiltersChange({
-    preferredUsername,
-    domain,
-  }: {
-    preferredUsername: string;
-    domain: string;
-  }): void {
-    this.preferredUsername = preferredUsername;
-    this.domain = domain;
-    this.doFetchMore();
-  }
-
-  private async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      await this.$router.push({
-        name: RouteName.ADMIN_GROUPS,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-
-  private async doFetchMore(): Promise<void> {
-    await this.$apollo.queries.groups.fetchMore({
-      variables: {
-        preferredUsername: this.preferredUsername,
-        name: this.name,
-        domain: this.domain,
-        local: this.local,
-        suspended: this.suspended,
-        page: this.page,
-        limit: PROFILES_PER_PAGE,
-      },
-    });
-  }
-}
+  });
+};
 </script>
 <style lang="scss" scoped>
 a.profile {
diff --git a/js/src/views/Admin/Instance.vue b/js/src/views/Admin/InstanceView.vue
similarity index 55%
rename from js/src/views/Admin/Instance.vue
rename to js/src/views/Admin/InstanceView.vue
index f20ef224b..aea9eea37 100644
--- a/js/src/views/Admin/Instance.vue
+++ b/js/src/views/Admin/InstanceView.vue
@@ -11,7 +11,7 @@
     <div
       class="grid md:grid-cols-2 xl:grid-cols-4 gap-2 content-center text-center mt-2"
     >
-      <div class="bg-gray-50 rounded-xl p-8">
+      <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
         <router-link
           :to="{
             name: RouteName.PROFILES,
@@ -24,7 +24,7 @@
           <span class="text-sm block">{{ $t("Profiles") }}</span>
         </router-link>
       </div>
-      <div class="bg-gray-50 rounded-xl p-8">
+      <div class="bg-gray-50 dark:bg-mbz-purple-500 rounded-xl p-8">
         <router-link
           :to="{
             name: RouteName.ADMIN_GROUPS,
@@ -37,19 +37,19 @@
           <span class="text-sm block">{{ $t("Groups") }}</span>
         </router-link>
       </div>
-      <div class="bg-gray-50 rounded-xl p-8">
+      <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
         <span class="mb-4 text-xl font-semibold block">{{
           instance.followingsCount
         }}</span>
         <span class="text-sm block">{{ $t("Followings") }}</span>
       </div>
-      <div class="bg-gray-50 rounded-xl p-8">
+      <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
         <span class="mb-4 text-xl font-semibold block">{{
           instance.followersCount
         }}</span>
         <span class="text-sm block">{{ $t("Followers") }}</span>
       </div>
-      <div class="bg-gray-50 rounded-xl p-8">
+      <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
         <router-link
           :to="{ name: RouteName.REPORTS, query: { domain: instance.domain } }"
         >
@@ -59,7 +59,7 @@
           <span class="text-sm block">{{ $t("Reports") }}</span>
         </router-link>
       </div>
-      <div class="bg-gray-50 rounded-xl p-8">
+      <div class="bg-zinc-50 dark:bg-mbz-purple-500 rounded-xl p-8">
         <span class="mb-4 font-semibold block">{{
           formatBytes(instance.mediaSize)
         }}</span>
@@ -68,18 +68,26 @@
     </div>
     <div class="mt-3 grid xl:grid-cols-2 gap-4">
       <div
-        class="border bg-white p-6 shadow-md rounded-md"
+        class="border bg-white dark:bg-mbz-purple-500 dark:border-mbz-purple-700 p-6 shadow-md rounded-md"
         v-if="instance.hasRelay"
       >
         <button
-          @click="removeInstanceFollow"
+          @click="
+            removeInstanceFollow({
+              address: instance?.relayAddress,
+            })
+          "
           v-if="instance.followedStatus == InstanceFollowStatus.APPROVED"
           class="bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 text-white hover:text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto"
         >
           {{ $t("Stop following instance") }}
         </button>
         <button
-          @click="removeInstanceFollow"
+          @click="
+            removeInstanceFollow({
+              address: instance?.relayAddress,
+            })
+          "
           v-else-if="instance.followedStatus == InstanceFollowStatus.PENDING"
           class="bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 text-white hover:text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto"
         >
@@ -96,16 +104,26 @@
       <div v-else class="md:h-48 py-16 text-center opacity-50">
         {{ $t("Only Mobilizon instances can be followed") }}
       </div>
-      <div class="border bg-white p-6 shadow-md rounded-md flex flex-col gap-2">
+      <div
+        class="border bg-white dark:bg-mbz-purple-500 dark:border-mbz-purple-700 p-6 shadow-md rounded-md flex flex-col gap-2"
+      >
         <button
-          @click="acceptInstance"
+          @click="
+            acceptInstance({
+              address: instance?.relayAddress,
+            })
+          "
           v-if="instance.followerStatus == InstanceFollowStatus.PENDING"
           class="bg-green-700 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 text-white hover:text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto"
         >
           {{ $t("Accept follow") }}
         </button>
         <button
-          @click="rejectInstance"
+          @click="
+            rejectInstance({
+              address: instance?.relayAddress,
+            })
+          "
           v-if="instance.followerStatus != InstanceFollowStatus.NONE"
           class="bg-red-700 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50 text-white hover:text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto"
         >
@@ -118,7 +136,7 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import {
   ACCEPT_RELAY,
   ADD_INSTANCE,
@@ -126,143 +144,116 @@ import {
   REJECT_RELAY,
   REMOVE_RELAY,
 } from "@/graphql/admin";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import { formatBytes } from "@/utils/datetime";
 import RouteName from "@/router/name";
 import { IInstance } from "@/types/instance.model";
 import { ApolloCache, gql, Reference } from "@apollo/client/core";
 import { InstanceFollowStatus } from "@/types/enums";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, inject } from "vue";
+import { Notifier } from "@/plugins/notifier";
 
-@Component({
-  apollo: {
-    instance: {
-      query: INSTANCE,
-      variables() {
-        return {
-          domain: this.domain,
-        };
-      },
+const props = defineProps<{ domain: string }>();
+
+const { result: instanceResult } = useQuery<{ instance: IInstance }>(
+  INSTANCE,
+  () => ({ domain: props.domain })
+);
+
+const instance = computed(() => instanceResult.value?.instance);
+
+const notifier = inject<Notifier>("notifier");
+
+const { mutate: acceptInstance, onError: onAcceptInstanceError } = useMutation(
+  ACCEPT_RELAY,
+  () => ({
+    update(cache: ApolloCache<any>) {
+      cache.writeFragment({
+        id: cache.identify(instance as unknown as Reference),
+        fragment: gql`
+          fragment InstanceFollowerStatus on Instance {
+            followerStatus
+          }
+        `,
+        data: {
+          followerStatus: InstanceFollowStatus.APPROVED,
+        },
+      });
     },
-  },
-})
-export default class Instance extends Vue {
-  @Prop({ type: String, required: true }) domain!: string;
+  })
+);
 
-  instance!: IInstance;
+onAcceptInstanceError((error) => {
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
 
-  InstanceFollowStatus = InstanceFollowStatus;
-
-  formatBytes = formatBytes;
-
-  RouteName = RouteName;
-
-  async acceptInstance(): Promise<void> {
-    try {
-      const { instance } = this;
-      await this.$apollo.mutate({
-        mutation: ACCEPT_RELAY,
-        variables: {
-          address: this.instance.relayAddress,
-        },
-        update(cache: ApolloCache<any>) {
-          cache.writeFragment({
-            id: cache.identify(instance as unknown as Reference),
-            fragment: gql`
-              fragment InstanceFollowerStatus on Instance {
-                followerStatus
-              }
-            `,
-            data: {
-              followerStatus: InstanceFollowStatus.APPROVED,
-            },
-          });
+/**
+ * Reject instance follow
+ */
+const { mutate: rejectInstance, onError: onRejectInstanceError } = useMutation(
+  REJECT_RELAY,
+  () => ({
+    update(cache: ApolloCache<any>) {
+      cache.writeFragment({
+        id: cache.identify(instance as unknown as Reference),
+        fragment: gql`
+          fragment InstanceFollowerStatus on Instance {
+            followerStatus
+          }
+        `,
+        data: {
+          followerStatus: InstanceFollowStatus.NONE,
         },
       });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
+    },
+  })
+);
 
-  /**
-   * Reject instance follow
-   */
-  async rejectInstance(): Promise<void> {
-    try {
-      const { instance } = this;
-      await this.$apollo.mutate({
-        mutation: REJECT_RELAY,
-        variables: {
-          address: this.instance.relayAddress,
-        },
-        update(cache: ApolloCache<any>) {
-          cache.writeFragment({
-            id: cache.identify(instance as unknown as Reference),
-            fragment: gql`
-              fragment InstanceFollowerStatus on Instance {
-                followerStatus
-              }
-            `,
-            data: {
-              followerStatus: InstanceFollowStatus.NONE,
-            },
-          });
+onRejectInstanceError((error) => {
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
+
+const { mutate: followInstanceMutation, onError: onFollowInstanceError } =
+  useMutation<{ addInstance: IInstance }>(ADD_INSTANCE);
+
+onFollowInstanceError((error) => {
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
+
+const followInstance = async (e: Event): Promise<void> => {
+  e.preventDefault();
+  followInstanceMutation({ domain: props.domain });
+};
+
+/**
+ * Stop following instance
+ */
+const { mutate: removeInstanceFollow, onError: onRemoveInstanceFollowError } =
+  useMutation(REMOVE_RELAY, () => ({
+    update(cache: ApolloCache<any>) {
+      cache.writeFragment({
+        id: cache.identify(instance.value as unknown as Reference),
+        fragment: gql`
+          fragment InstanceFollowedStatus on Instance {
+            followedStatus
+          }
+        `,
+        data: {
+          followedStatus: InstanceFollowStatus.NONE,
         },
       });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
+    },
+  }));
 
-  async followInstance(e: Event): Promise<void> {
-    e.preventDefault();
-    try {
-      await this.$apollo.mutate<{ addInstance: Instance }>({
-        mutation: ADD_INSTANCE,
-        variables: {
-          domain: this.domain,
-        },
-      });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
+onRemoveInstanceFollowError((error) => {
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
   }
-
-  /**
-   * Stop following instance
-   */
-  async removeInstanceFollow(): Promise<void> {
-    const { instance } = this;
-    try {
-      await this.$apollo.mutate({
-        mutation: REMOVE_RELAY,
-        variables: {
-          address: this.instance.relayAddress,
-        },
-        update(cache: ApolloCache<any>) {
-          cache.writeFragment({
-            id: cache.identify(instance as unknown as Reference),
-            fragment: gql`
-              fragment InstanceFollowedStatus on Instance {
-                followedStatus
-              }
-            `,
-            data: {
-              followedStatus: InstanceFollowStatus.NONE,
-            },
-          });
-        },
-      });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-}
+});
 </script>
diff --git a/js/src/views/Admin/Instances.vue b/js/src/views/Admin/Instances.vue
deleted file mode 100644
index 12e14c412..000000000
--- a/js/src/views/Admin/Instances.vue
+++ /dev/null
@@ -1,315 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        { name: RouteName.ADMIN, text: $t('Admin') },
-        { text: $t('Instances') },
-      ]"
-    />
-    <section>
-      <h1 class="title">{{ $t("Instances") }}</h1>
-      <form @submit="followInstance" class="my-4">
-        <b-field :label="$t('Follow a new instance')" horizontal>
-          <b-field grouped group-multiline expanded size="is-large">
-            <p class="control">
-              <b-input
-                v-model="newRelayAddress"
-                :placeholder="$t('Ex: mobilizon.fr')"
-              />
-            </p>
-            <p class="control">
-              <b-button type="is-primary" native-type="submit">{{
-                $t("Add an instance")
-              }}</b-button>
-              <b-loading
-                :is-full-page="true"
-                v-model="followInstanceLoading"
-                :can-cancel="false"
-              />
-            </p>
-          </b-field>
-        </b-field>
-      </form>
-      <div class="flex flex-wrap gap-2">
-        <b-field :label="$t('Follow status')">
-          <b-radio-button
-            v-model="followStatus"
-            :native-value="InstanceFilterFollowStatus.ALL"
-            >{{ $t("All") }}</b-radio-button
-          >
-          <b-radio-button
-            v-model="followStatus"
-            :native-value="InstanceFilterFollowStatus.FOLLOWING"
-            >{{ $t("Following") }}</b-radio-button
-          >
-          <b-radio-button
-            v-model="followStatus"
-            :native-value="InstanceFilterFollowStatus.FOLLOWED"
-            >{{ $t("Followed") }}</b-radio-button
-          >
-        </b-field>
-        <b-field
-          :label="$t('Domain')"
-          label-for="domain-filter"
-          class="flex-auto"
-        >
-          <b-input
-            id="domain-filter"
-            :placeholder="$t('mobilizon-instance.tld')"
-            :value="filterDomain"
-            @input="debouncedUpdateDomainFilter"
-          />
-        </b-field>
-      </div>
-      <div v-if="instances && instances.elements.length > 0" class="mt-3">
-        <router-link
-          :to="{
-            name: RouteName.INSTANCE,
-            params: { domain: instance.domain },
-          }"
-          class="flex items-center mb-2 rounded bg-secondary p-4 flex-wrap justify-center gap-x-2 gap-y-3"
-          v-for="instance in instances.elements"
-          :key="instance.domain"
-        >
-          <div class="grow overflow-hidden flex items-center gap-1">
-            <img
-              class="w-12"
-              v-if="instance.hasRelay"
-              src="../../assets/logo.svg"
-              alt=""
-            />
-            <b-icon
-              class="is-large"
-              v-else
-              custom-size="mdi-36px"
-              icon="cloud-question"
-            />
-            <div class="">
-              <h4 class="text-lg truncate">{{ instance.domain }}</h4>
-              <span
-                class="text-sm"
-                v-if="instance.followedStatus === InstanceFollowStatus.APPROVED"
-              >
-                <b-icon icon="inbox-arrow-down" />
-                {{ $t("Followed") }}</span
-              >
-              <span
-                class="text-sm"
-                v-else-if="
-                  instance.followedStatus === InstanceFollowStatus.PENDING
-                "
-              >
-                <b-icon icon="inbox-arrow-down" />
-                {{ $t("Followed, pending response") }}</span
-              >
-              <span
-                class="text-sm"
-                v-if="instance.followerStatus == InstanceFollowStatus.APPROVED"
-              >
-                <b-icon icon="inbox-arrow-up" />
-                {{ $t("Follows us") }}</span
-              >
-              <span
-                class="text-sm"
-                v-if="instance.followerStatus == InstanceFollowStatus.PENDING"
-              >
-                <b-icon icon="inbox-arrow-up" />
-                {{ $t("Follows us, pending approval") }}</span
-              >
-            </div>
-          </div>
-          <div class="flex-none flex gap-3 ltr:ml-3 rtl:mr-3">
-            <p class="flex flex-col text-center">
-              <span class="text-xl">{{ instance.eventCount }}</span
-              ><span class="text-sm">{{ $t("Events") }}</span>
-            </p>
-            <p class="flex flex-col text-center">
-              <span class="text-xl">{{ instance.personCount }}</span
-              ><span class="text-sm">{{ $t("Profiles") }}</span>
-            </p>
-          </div>
-        </router-link>
-        <b-pagination
-          v-show="instances.total > INSTANCES_PAGE_LIMIT"
-          :total="instances.total"
-          v-model="instancePage"
-          :per-page="INSTANCES_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')"
-        >
-        </b-pagination>
-      </div>
-      <div v-else-if="instances && instances.elements.length == 0">
-        <empty-content icon="lan-disconnect" :inline="true">
-          {{ $t("No instance found.") }}
-          <template #desc>
-            <span v-if="hasFilter">
-              {{
-                $t(
-                  "No instances match this filter. Try resetting filter fields?"
-                )
-              }}
-            </span>
-            <span v-else>
-              {{ $t("You haven't interacted with other instances yet.") }}
-            </span>
-          </template>
-        </empty-content>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { ADD_INSTANCE, INSTANCES } from "@/graphql/admin";
-import { Paginate } from "@/types/paginate";
-import { IFollower } from "@/types/actor/follower.model";
-import RouteName from "../../router/name";
-import { IInstance } from "@/types/instance.model";
-import EmptyContent from "@/components/Utils/EmptyContent.vue";
-import VueRouter from "vue-router";
-import { debounce } from "lodash";
-import {
-  InstanceFilterFollowStatus,
-  InstanceFollowStatus,
-} from "@/types/enums";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-const INSTANCES_PAGE_LIMIT = 10;
-
-@Component({
-  apollo: {
-    instances: {
-      query: INSTANCES,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: this.instancePage,
-          limit: INSTANCES_PAGE_LIMIT,
-          filterDomain: this.filterDomain,
-          filterFollowStatus: this.followStatus,
-        };
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Federation") as string,
-    };
-  },
-  components: {
-    EmptyContent,
-  },
-})
-export default class Follows extends Vue {
-  RouteName = RouteName;
-
-  followInstanceLoading = false;
-
-  newRelayAddress = "";
-
-  instances!: Paginate<IInstance>;
-
-  instancePage = 1;
-
-  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
-
-  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
-
-  InstanceFilterFollowStatus = InstanceFilterFollowStatus;
-
-  InstanceFollowStatus = InstanceFollowStatus;
-
-  INSTANCES_PAGE_LIMIT = INSTANCES_PAGE_LIMIT;
-
-  data(): Record<string, unknown> {
-    return {
-      debouncedUpdateDomainFilter: debounce(this.updateDomainFilter, 500),
-    };
-  }
-
-  updateDomainFilter(domain: string) {
-    this.filterDomain = domain;
-  }
-
-  get filterDomain(): string {
-    return (this.$route.query.domain as string) || "";
-  }
-
-  set filterDomain(domain: string) {
-    this.pushRouter({ domain });
-  }
-
-  get followStatus(): InstanceFilterFollowStatus {
-    return (
-      (this.$route.query.followStatus as InstanceFilterFollowStatus) ||
-      InstanceFilterFollowStatus.ALL
-    );
-  }
-
-  set followStatus(followStatus: InstanceFilterFollowStatus) {
-    this.pushRouter({ followStatus });
-  }
-
-  get hasFilter(): boolean {
-    return (
-      this.followStatus !== InstanceFilterFollowStatus.ALL ||
-      this.filterDomain !== ""
-    );
-  }
-
-  async followInstance(e: Event): Promise<void> {
-    e.preventDefault();
-    this.followInstanceLoading = true;
-    const domain = this.newRelayAddress.trim(); // trim to fix copy and paste domain name spaces and tabs
-    try {
-      await this.$apollo.mutate<{ relayFollowings: Paginate<IFollower> }>({
-        mutation: ADD_INSTANCE,
-        variables: {
-          domain,
-        },
-      });
-      this.newRelayAddress = "";
-      this.followInstanceLoading = false;
-      this.$router.push({
-        name: RouteName.INSTANCE,
-        params: { domain },
-      });
-    } catch (error: any) {
-      if (error.message) {
-        if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-          this.$notifier.error(error.graphQLErrors[0].message);
-        }
-      }
-      this.followInstanceLoading = false;
-    }
-  }
-
-  private async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      await this.$router.push({
-        name: RouteName.INSTANCES,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.tab-item {
-  form {
-    margin-bottom: 1.5rem;
-  }
-}
-
-a {
-  text-decoration: none !important;
-}
-</style>
diff --git a/js/src/views/Admin/InstancesView.vue b/js/src/views/Admin/InstancesView.vue
new file mode 100644
index 000000000..529fc0f7d
--- /dev/null
+++ b/js/src/views/Admin/InstancesView.vue
@@ -0,0 +1,282 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.ADMIN, text: t('Admin') },
+        { text: t('Instances') },
+      ]"
+    />
+    <section>
+      <h1 class="title">{{ t("Instances") }}</h1>
+      <form @submit="followInstance" class="my-4">
+        <o-field
+          :label="t('Follow a new instance')"
+          horizontal
+          label-for="newRelayAddress"
+        >
+          <o-field grouped group-multiline expanded size="large">
+            <p class="control">
+              <o-input
+                id="newRelayAddress"
+                v-model="newRelayAddress"
+                :placeholder="t('Ex: mobilizon.fr')"
+              />
+            </p>
+            <p class="control">
+              <o-button variant="primary" native-type="submit">{{
+                t("Add an instance")
+              }}</o-button>
+              <o-loading
+                :is-full-page="true"
+                v-model="followInstanceLoading"
+                :can-cancel="false"
+              />
+            </p>
+          </o-field>
+        </o-field>
+      </form>
+      <div class="flex flex-wrap gap-2">
+        <o-field :label="t('Follow status')">
+          <o-radio
+            v-model="followStatus"
+            :native-value="InstanceFilterFollowStatus.ALL"
+            >{{ t("All") }}</o-radio
+          >
+          <o-radio
+            v-model="followStatus"
+            :native-value="InstanceFilterFollowStatus.FOLLOWING"
+            >{{ t("Following") }}</o-radio
+          >
+          <o-radio
+            v-model="followStatus"
+            :native-value="InstanceFilterFollowStatus.FOLLOWED"
+            >{{ t("Followed") }}</o-radio
+          >
+        </o-field>
+        <o-field
+          :label="t('Domain')"
+          label-for="domain-filter"
+          class="flex-auto"
+        >
+          <o-input
+            id="domain-filter"
+            :placeholder="t('mobilizon-instance.tld')"
+            :value="filterDomain"
+            @input="debouncedUpdateDomainFilter"
+          />
+        </o-field>
+      </div>
+      <div v-if="instances && instances.elements.length > 0" class="mt-3">
+        <router-link
+          :to="{
+            name: RouteName.INSTANCE,
+            params: { domain: instance.domain },
+          }"
+          class="flex items-center mb-2 rounded bg-mbz-yellow-alt-300 dark:bg-mbz-purple-400 p-4 flex-wrap justify-center gap-x-2 gap-y-3"
+          v-for="instance in instances.elements"
+          :key="instance.domain"
+        >
+          <div class="grow overflow-hidden flex items-center gap-1">
+            <img
+              class="w-12"
+              v-if="instance.hasRelay"
+              src="/img/logo.svg"
+              alt=""
+            />
+            <CloudQuestion v-else :size="36" />
+
+            <div class="">
+              <h3 class="text-lg truncate">{{ instance.domain }}</h3>
+              <span
+                class="text-sm"
+                v-if="instance.followedStatus === InstanceFollowStatus.APPROVED"
+              >
+                <o-icon icon="inbox-arrow-down" />
+                {{ t("Followed") }}</span
+              >
+              <span
+                class="text-sm"
+                v-else-if="
+                  instance.followedStatus === InstanceFollowStatus.PENDING
+                "
+              >
+                <o-icon icon="inbox-arrow-down" />
+                {{ t("Followed, pending response") }}</span
+              >
+              <span
+                class="text-sm"
+                v-if="instance.followerStatus == InstanceFollowStatus.APPROVED"
+              >
+                <o-icon icon="inbox-arrow-up" />
+                {{ t("Follows us") }}</span
+              >
+              <span
+                class="text-sm"
+                v-if="instance.followerStatus == InstanceFollowStatus.PENDING"
+              >
+                <o-icon icon="inbox-arrow-up" />
+                {{ t("Follows us, pending approval") }}</span
+              >
+            </div>
+          </div>
+          <div class="flex-none flex gap-3 ltr:ml-3 rtl:mr-3">
+            <p class="flex flex-col text-center">
+              <span class="text-xl">{{ instance.eventCount }}</span
+              ><span class="text-sm">{{ t("Events") }}</span>
+            </p>
+            <p class="flex flex-col text-center">
+              <span class="text-xl">{{ instance.personCount }}</span
+              ><span class="text-sm">{{ t("Profiles") }}</span>
+            </p>
+          </div>
+        </router-link>
+        <o-pagination
+          v-show="instances.total > INSTANCES_PAGE_LIMIT"
+          :total="instances.total"
+          v-model="instancePage"
+          :per-page="INSTANCES_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 v-else-if="instances && instances.elements.length == 0">
+        <empty-content icon="lan-disconnect" :inline="true">
+          {{ t("No instance found.") }}
+          <template #desc>
+            <span v-if="hasFilter">
+              {{
+                t(
+                  "No instances match this filter. Try resetting filter fields?"
+                )
+              }}
+            </span>
+            <span v-else>
+              {{ t("You haven't interacted with other instances yet.") }}
+            </span>
+          </template>
+        </empty-content>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ADD_INSTANCE, INSTANCES } from "@/graphql/admin";
+import { Paginate } from "@/types/paginate";
+import RouteName from "../../router/name";
+import { IInstance } from "@/types/instance.model";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import debounce from "lodash/debounce";
+import {
+  InstanceFilterFollowStatus,
+  InstanceFollowStatus,
+} from "@/types/enums";
+import { useI18n } from "vue-i18n";
+import {
+  enumTransformer,
+  integerTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, inject, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import CloudQuestion from "../../../node_modules/vue-material-design-icons/CloudQuestion.vue";
+import { Notifier } from "@/plugins/notifier";
+
+const INSTANCES_PAGE_LIMIT = 10;
+
+const instancePage = useRouteQuery("page", 1, integerTransformer);
+const filterDomain = useRouteQuery("filterDomain", "");
+const followStatus = useRouteQuery(
+  "followStatus",
+  InstanceFilterFollowStatus.ALL,
+  enumTransformer(InstanceFilterFollowStatus)
+);
+
+const { result: instancesResult } = useQuery<{
+  instances: Paginate<IInstance>;
+}>(INSTANCES, () => ({
+  page: instancePage.value,
+  limit: INSTANCES_PAGE_LIMIT,
+  filterDomain: filterDomain.value,
+  filterFollowStatus: followStatus.value,
+}));
+
+const instances = computed(() => instancesResult.value?.instances);
+
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Federation")),
+});
+
+const followInstanceLoading = ref(false);
+
+const newRelayAddress = ref("");
+
+// relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
+
+// relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
+
+const updateDomainFilter = (domain: string) => {
+  filterDomain.value = domain;
+};
+
+const debouncedUpdateDomainFilter = debounce(updateDomainFilter, 500);
+
+const hasFilter = computed((): boolean => {
+  return (
+    followStatus.value !== InstanceFilterFollowStatus.ALL ||
+    filterDomain.value !== ""
+  );
+});
+
+const router = useRouter();
+
+const { mutate, onDone, onError } = useMutation<{
+  addInstance: IInstance;
+}>(ADD_INSTANCE);
+
+onDone(({ data }) => {
+  newRelayAddress.value = "";
+  followInstanceLoading.value = false;
+  router.push({
+    name: RouteName.INSTANCE,
+    params: { domain: data?.addInstance.domain },
+  });
+});
+
+const notifier = inject<Notifier>("notifier");
+
+onError((error) => {
+  if (error.message) {
+    if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+      notifier?.error(error.graphQLErrors[0].message);
+    }
+  }
+  followInstanceLoading.value = false;
+});
+
+const followInstance = async (e: Event): Promise<void> => {
+  e.preventDefault();
+  followInstanceLoading.value = true;
+  const domain = newRelayAddress.value.trim(); // trim to fix copy and paste domain name spaces and tabs
+  mutate({
+    domain,
+  });
+};
+</script>
+<style lang="scss" scoped>
+.tab-item {
+  form {
+    margin-bottom: 1.5rem;
+  }
+}
+
+a {
+  text-decoration: none !important;
+}
+</style>
diff --git a/js/src/views/Admin/Profiles.vue b/js/src/views/Admin/Profiles.vue
deleted file mode 100644
index cfd4f8d49..000000000
--- a/js/src/views/Admin/Profiles.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        { name: RouteName.MODERATION, text: $t('Moderation') },
-        {
-          name: RouteName.PROFILES,
-          text: $t('Profiles'),
-        },
-      ]"
-    />
-    <div v-if="persons">
-      <b-switch v-model="local">{{ $t("Local") }}</b-switch>
-      <b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
-      <b-table
-        :data="persons.elements"
-        :loading="$apollo.queries.persons.loading"
-        paginated
-        backend-pagination
-        backend-filtering
-        :debounce-search="200"
-        :current-page.sync="page"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
-        :total="persons.total"
-        :per-page="PROFILES_PER_PAGE"
-        @page-change="onPageChange"
-        @filters-change="onFiltersChange"
-      >
-        <b-table-column
-          field="preferredUsername"
-          :label="$t('Username')"
-          searchable
-        >
-          <template #searchable="props">
-            <b-input
-              v-model="props.filters.preferredUsername"
-              :aria-label="$t('Filter')"
-              :placeholder="$t('Filter')"
-              icon="magnify"
-            />
-          </template>
-          <template v-slot:default="props">
-            <router-link
-              class="profile"
-              :to="{
-                name: RouteName.ADMIN_PROFILE,
-                params: { id: props.row.id },
-              }"
-            >
-              <article class="media">
-                <figure class="media-left" v-if="props.row.avatar">
-                  <p class="image is-48x48">
-                    <img
-                      :src="props.row.avatar.url"
-                      :alt="props.row.avatar.alt || ''"
-                    />
-                  </p>
-                </figure>
-                <div class="media-content">
-                  <div class="content">
-                    <strong v-if="props.row.name">{{ props.row.name }}</strong
-                    ><br v-if="props.row.name" />
-                    <small>@{{ props.row.preferredUsername }}</small>
-                  </div>
-                </div>
-              </article>
-            </router-link>
-          </template>
-        </b-table-column>
-
-        <b-table-column field="domain" :label="$t('Domain')" searchable>
-          <template #searchable="props">
-            <b-input
-              v-model="props.filters.domain"
-              :aria-label="$t('Filter')"
-              :placeholder="$t('Filter')"
-              icon="magnify"
-            />
-          </template>
-          <template v-slot:default="props">
-            {{ props.row.domain }}
-          </template>
-        </b-table-column>
-        <template slot="empty">
-          <empty-content icon="account" :inline="true">
-            {{ $t("No profile matches the filters") }}
-          </empty-content>
-        </template>
-      </b-table>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { LIST_PROFILES } from "../../graphql/actor";
-import RouteName from "../../router/name";
-import EmptyContent from "../../components/Utils/EmptyContent.vue";
-import VueRouter from "vue-router";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-const PROFILES_PER_PAGE = 10;
-
-@Component({
-  apollo: {
-    persons: {
-      query: LIST_PROFILES,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          preferredUsername: this.preferredUsername,
-          name: this.name,
-          domain: this.domain,
-          local: this.local,
-          suspended: this.suspended,
-          page: this.page,
-          limit: PROFILES_PER_PAGE,
-        };
-      },
-    },
-  },
-  components: {
-    EmptyContent,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Profiles") as string,
-    };
-  },
-})
-export default class Profiles extends Vue {
-  PROFILES_PER_PAGE = PROFILES_PER_PAGE;
-
-  RouteName = RouteName;
-
-  async onPageChange(): Promise<void> {
-    await this.doFetchMore();
-  }
-
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  set page(page: number) {
-    this.pushRouter({ page: page.toString() });
-  }
-
-  get domain(): string {
-    return (this.$route.query.domain as string) || "";
-  }
-
-  set domain(domain: string) {
-    this.pushRouter({ domain });
-  }
-
-  get preferredUsername(): string {
-    return (this.$route.query.preferredUsername as string) || "";
-  }
-
-  set preferredUsername(preferredUsername: string) {
-    this.pushRouter({ preferredUsername });
-  }
-
-  get local(): boolean {
-    return this.$route.query.local === "1";
-  }
-
-  set local(local: boolean) {
-    this.pushRouter({ local: local ? "1" : "0" });
-  }
-
-  get suspended(): boolean {
-    return this.$route.query.suspended === "1";
-  }
-
-  set suspended(suspended: boolean) {
-    this.pushRouter({ suspended: suspended ? "1" : "0" });
-  }
-
-  private async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      await this.$router.push({
-        name: RouteName.PROFILES,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-
-  private async doFetchMore(): Promise<void> {
-    await this.$apollo.queries.persons.fetchMore({
-      variables: {
-        preferredUsername: this.preferredUsername,
-        domain: this.domain,
-        local: this.local,
-        suspended: this.suspended,
-        page: this.page,
-        limit: PROFILES_PER_PAGE,
-      },
-    });
-  }
-
-  onFiltersChange({
-    preferredUsername,
-    domain,
-  }: {
-    preferredUsername: string;
-    domain: string;
-  }): void {
-    this.preferredUsername = preferredUsername;
-    this.domain = domain;
-    this.doFetchMore();
-  }
-}
-</script>
-<style lang="scss" scoped>
-a.profile {
-  text-decoration: none;
-}
-</style>
diff --git a/js/src/views/Admin/ProfilesView.vue b/js/src/views/Admin/ProfilesView.vue
new file mode 100644
index 000000000..4bd47cb5d
--- /dev/null
+++ b/js/src/views/Admin/ProfilesView.vue
@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.MODERATION, text: t('Moderation') },
+        {
+          name: RouteName.PROFILES,
+          text: t('Profiles'),
+        },
+      ]"
+    />
+    <div v-if="persons">
+      <div class="flex gap-2">
+        <o-switch v-model="local">{{ t("Local") }}</o-switch>
+        <o-switch v-model="suspended">{{ t("Suspended") }}</o-switch>
+      </div>
+      <o-table
+        :data="persons.elements"
+        :loading="loading"
+        paginated
+        backend-pagination
+        backend-filtering
+        :debounce-search="200"
+        v-model:current-page="page"
+        :aria-next-label="t('Next page')"
+        :aria-previous-label="t('Previous page')"
+        :aria-page-label="t('Page')"
+        :aria-current-label="t('Current page')"
+        :total="persons.total"
+        :per-page="PROFILES_PER_PAGE"
+        @filters-change="onFiltersChange"
+      >
+        <o-table-column
+          field="preferredUsername"
+          :label="t('Username')"
+          searchable
+        >
+          <template #searchable="props">
+            <o-input
+              v-model="props.filters.preferredUsername"
+              :aria-label="t('Filter')"
+              :placeholder="t('Filter')"
+              icon="magnify"
+            />
+          </template>
+          <template #default="props">
+            <router-link
+              class="profile"
+              :to="{
+                name: RouteName.ADMIN_PROFILE,
+                params: { id: props.row.id },
+              }"
+            >
+              <article class="flex gap-2">
+                <figure class="" v-if="props.row.avatar">
+                  <img
+                    :src="props.row.avatar.url"
+                    :alt="props.row.avatar.alt || ''"
+                    width="48"
+                    height="48"
+                    class="rounded-full"
+                  />
+                </figure>
+                <Account v-else :size="48" />
+                <div class="">
+                  <div class="prose dark:prose-invert">
+                    <strong v-if="props.row.name">{{ props.row.name }}</strong
+                    ><br v-if="props.row.name" />
+                    <small>@{{ props.row.preferredUsername }}</small>
+                  </div>
+                </div>
+              </article>
+            </router-link>
+          </template>
+        </o-table-column>
+
+        <o-table-column field="domain" :label="t('Domain')" searchable>
+          <template #searchable="props">
+            <o-input
+              v-model="props.filters.domain"
+              :aria-label="t('Filter')"
+              :placeholder="t('Filter')"
+              icon="magnify"
+            />
+          </template>
+          <template #default="props">
+            {{ props.row.domain }}
+          </template>
+        </o-table-column>
+        <template #empty>
+          <empty-content icon="account" :inline="true">
+            {{ t("No profile matches the filters") }}
+          </empty-content>
+        </template>
+      </o-table>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { LIST_PROFILES } from "@/graphql/actor";
+import RouteName from "@/router/name";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import { useQuery } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { computed } from "vue";
+import { useHead } from "@vueuse/head";
+import {
+  useRouteQuery,
+  booleanTransformer,
+  integerTransformer,
+} from "vue-use-route-query";
+import { Paginate } from "@/types/paginate";
+import { IPerson } from "@/types/actor/person.model";
+import Account from "vue-material-design-icons/Account.vue";
+
+const PROFILES_PER_PAGE = 10;
+
+const preferredUsername = useRouteQuery("preferredUsername", "");
+const name = useRouteQuery("name", "");
+const domain = useRouteQuery("domain", "");
+const local = useRouteQuery("local", false, booleanTransformer);
+const suspended = useRouteQuery("suspended", false, booleanTransformer);
+const page = useRouteQuery("page", 1, integerTransformer);
+
+const {
+  result: personResult,
+  loading,
+  fetchMore,
+} = useQuery<{ persons: Paginate<IPerson> }>(LIST_PROFILES, () => ({
+  preferredUsername: preferredUsername.value,
+  name: name.value,
+  domain: domain.value,
+  local: local.value,
+  suspended: suspended.value,
+  page: page.value,
+  limit: PROFILES_PER_PAGE,
+}));
+
+const persons = computed(() => personResult.value?.persons);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Profiles")),
+});
+
+const onFiltersChange = ({
+  preferredUsername: newPreferredUsername,
+  domain: newDomain,
+}: {
+  preferredUsername: string;
+  domain: string;
+}): void => {
+  preferredUsername.value = newPreferredUsername;
+  domain.value = newDomain;
+  fetchMore({});
+};
+</script>
+<style lang="scss" scoped>
+a.profile {
+  text-decoration: none;
+}
+</style>
diff --git a/js/src/views/Admin/Settings.vue b/js/src/views/Admin/Settings.vue
deleted file mode 100644
index 137e7907a..000000000
--- a/js/src/views/Admin/Settings.vue
+++ /dev/null
@@ -1,499 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        { name: RouteName.ADMIN, text: $t('Admin') },
-        { text: $t('Instance settings') },
-      ]"
-    />
-
-    <section v-if="settingsToWrite">
-      <form @submit.prevent="updateSettings">
-        <b-field :label="$t('Instance Name')" label-for="instance-name">
-          <b-input v-model="settingsToWrite.instanceName" id="instance-name" />
-        </b-field>
-        <div class="field">
-          <label class="label has-help" for="instance-description">{{
-            $t("Instance Short Description")
-          }}</label>
-          <small>
-            {{
-              $t(
-                "Displayed on homepage and meta tags. Describe what Mobilizon is and what makes this instance special in a single paragraph."
-              )
-            }}
-          </small>
-          <b-input
-            type="textarea"
-            v-model="settingsToWrite.instanceDescription"
-            rows="2"
-            id="instance-description"
-          />
-        </div>
-        <div class="field">
-          <label class="label has-help" for="instance-slogan">{{
-            $t("Instance Slogan")
-          }}</label>
-          <small>
-            {{
-              $t(
-                'A short tagline for your instance homepage. Defaults to "Gather ⋅ Organize ⋅ Mobilize"'
-              )
-            }}
-          </small>
-          <b-input
-            v-model="settingsToWrite.instanceSlogan"
-            :placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
-            id="instance-slogan"
-          />
-        </div>
-        <div class="field">
-          <label class="label has-help" for="instance-contact">{{
-            $t("Contact")
-          }}</label>
-          <small>
-            {{ $t("Can be an email or a link, or just plain text.") }}
-          </small>
-          <b-input v-model="settingsToWrite.contact" id="instance-contact" />
-        </div>
-        <b-field :label="$t('Allow registrations')">
-          <b-switch v-model="settingsToWrite.registrationsOpen">
-            <p class="content" v-if="settingsToWrite.registrationsOpen">
-              {{ $t("Registration is allowed, anyone can register.") }}
-            </p>
-            <p class="content" v-else>{{ $t("Registration is closed.") }}</p>
-          </b-switch>
-        </b-field>
-        <div class="field">
-          <label class="label has-help" for="instance-languages">{{
-            $t("Instance languages")
-          }}</label>
-          <small>
-            {{ $t("Main languages you/your moderators speak") }}
-          </small>
-          <b-taginput
-            v-model="instanceLanguages"
-            :data="filteredLanguages"
-            autocomplete
-            :open-on-focus="true"
-            field="name"
-            icon="label"
-            :placeholder="$t('Select languages')"
-            @typing="getFilteredLanguages"
-            id="instance-languages"
-          >
-            <template slot="empty">{{ $t("No languages found") }}</template>
-          </b-taginput>
-        </div>
-        <div class="field">
-          <label class="label has-help" for="instance-long-description">{{
-            $t("Instance Long Description")
-          }}</label>
-          <small>
-            {{
-              $t(
-                "A place to explain who you are and the things that set your instance apart. You can use HTML tags."
-              )
-            }}
-          </small>
-          <b-input
-            type="textarea"
-            v-model="settingsToWrite.instanceLongDescription"
-            rows="4"
-            id="instance-long-description"
-          />
-        </div>
-        <div class="field">
-          <label class="label has-help" for="instance-rules">{{
-            $t("Instance Rules")
-          }}</label>
-          <small>
-            {{
-              $t(
-                "A place for your code of conduct, rules or guidelines. You can use HTML tags."
-              )
-            }}
-          </small>
-          <b-input
-            type="textarea"
-            v-model="settingsToWrite.instanceRules"
-            id="instance-rules"
-          />
-        </div>
-        <b-field :label="$t('Instance Terms Source')">
-          <div class="columns">
-            <div class="column is-one-third-desktop">
-              <fieldset>
-                <legend>
-                  {{ $t("Choose the source of the instance's Terms") }}
-                </legend>
-                <b-field>
-                  <b-radio
-                    v-model="settingsToWrite.instanceTermsType"
-                    name="instanceTermsType"
-                    :native-value="InstanceTermsType.DEFAULT"
-                    >{{ $t("Default Mobilizon terms") }}</b-radio
-                  >
-                </b-field>
-                <b-field>
-                  <b-radio
-                    v-model="settingsToWrite.instanceTermsType"
-                    name="instanceTermsType"
-                    :native-value="InstanceTermsType.URL"
-                    >{{ $t("Custom URL") }}</b-radio
-                  >
-                </b-field>
-                <b-field>
-                  <b-radio
-                    v-model="settingsToWrite.instanceTermsType"
-                    name="instanceTermsType"
-                    :native-value="InstanceTermsType.CUSTOM"
-                    >{{ $t("Custom text") }}</b-radio
-                  >
-                </b-field>
-              </fieldset>
-            </div>
-            <div class="column">
-              <div
-                class="notification"
-                v-if="
-                  settingsToWrite.instanceTermsType ===
-                  InstanceTermsType.DEFAULT
-                "
-              >
-                <b>{{ $t("Default") }}</b>
-                <i18n
-                  tag="p"
-                  class="content"
-                  path="The {default_terms} will be used. They will be translated in the user's language."
-                >
-                  <a
-                    slot="default_terms"
-                    href="https://demo.mobilizon.org/terms"
-                    target="_blank"
-                    rel="noopener"
-                    >{{ $t("default Mobilizon terms") }}</a
-                  >
-                </i18n>
-                <b>{{
-                  $t(
-                    "NOTE! The default terms have not been checked over by a lawyer and thus are unlikely to provide full legal protection for all situations for an instance admin using them. They are also not specific to all countries and jurisdictions. If you are unsure, please check with a lawyer."
-                  )
-                }}</b>
-              </div>
-              <div
-                class="notification"
-                v-if="
-                  settingsToWrite.instanceTermsType === InstanceTermsType.URL
-                "
-              >
-                <b>{{ $t("URL") }}</b>
-                <p class="content">
-                  {{ $t("Set an URL to a page with your own terms.") }}
-                </p>
-              </div>
-              <div
-                class="notification"
-                v-if="
-                  settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
-                "
-              >
-                <b>{{ $t("Custom") }}</b>
-                <i18n
-                  tag="p"
-                  class="content"
-                  path="Enter your own terms. HTML tags allowed. The {mobilizon_terms} are provided as template."
-                >
-                  <a
-                    slot="mobilizon_terms"
-                    href="https://demo.mobilizon.org/terms"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    {{ $t("default Mobilizon terms") }}</a
-                  >
-                </i18n>
-              </div>
-            </div>
-          </div>
-        </b-field>
-        <b-field
-          :label="$t('Instance Terms URL')"
-          label-for="instanceTermsUrl"
-          v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
-        >
-          <b-input
-            type="URL"
-            v-model="settingsToWrite.instanceTermsUrl"
-            id="instanceTermsUrl"
-          />
-        </b-field>
-        <b-field
-          :label="$t('Instance Terms')"
-          label-for="instanceTerms"
-          v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
-        >
-          <b-input
-            type="textarea"
-            v-model="settingsToWrite.instanceTerms"
-            id="instanceTerms"
-          />
-        </b-field>
-        <b-field :label="$t('Instance Privacy Policy Source')">
-          <div class="columns">
-            <div class="column is-one-third-desktop">
-              <fieldset>
-                <legend>
-                  {{ $t("Choose the source of the instance's Privacy Policy") }}
-                </legend>
-                <b-field>
-                  <b-radio
-                    v-model="settingsToWrite.instancePrivacyPolicyType"
-                    name="instancePrivacyType"
-                    :native-value="InstancePrivacyType.DEFAULT"
-                    >{{ $t("Default Mobilizon privacy policy") }}</b-radio
-                  >
-                </b-field>
-                <b-field>
-                  <b-radio
-                    v-model="settingsToWrite.instancePrivacyPolicyType"
-                    name="instancePrivacyType"
-                    :native-value="InstancePrivacyType.URL"
-                    >{{ $t("Custom URL") }}</b-radio
-                  >
-                </b-field>
-                <b-field>
-                  <b-radio
-                    v-model="settingsToWrite.instancePrivacyPolicyType"
-                    name="instancePrivacyType"
-                    :native-value="InstancePrivacyType.CUSTOM"
-                    >{{ $t("Custom text") }}</b-radio
-                  >
-                </b-field>
-              </fieldset>
-            </div>
-            <div class="column">
-              <div
-                class="notification"
-                v-if="
-                  settingsToWrite.instancePrivacyPolicyType ===
-                  InstancePrivacyType.DEFAULT
-                "
-              >
-                <b>{{ $t("Default") }}</b>
-                <i18n
-                  tag="p"
-                  class="content"
-                  path="The {default_privacy_policy} will be used. They will be translated in the user's language."
-                >
-                  <a
-                    slot="default_privacy_policy"
-                    href="https://demo.mobilizon.org/privacy"
-                    target="_blank"
-                    rel="noopener"
-                    >{{ $t("default Mobilizon privacy policy") }}</a
-                  >
-                </i18n>
-              </div>
-              <div
-                class="notification"
-                v-if="
-                  settingsToWrite.instancePrivacyPolicyType ===
-                  InstancePrivacyType.URL
-                "
-              >
-                <b>{{ $t("URL") }}</b>
-                <p class="content">
-                  {{ $t("Set an URL to a page with your own privacy policy.") }}
-                </p>
-              </div>
-              <div
-                class="notification"
-                v-if="
-                  settingsToWrite.instancePrivacyPolicyType ===
-                  InstancePrivacyType.CUSTOM
-                "
-              >
-                <b>{{ $t("Custom") }}</b>
-                <i18n
-                  tag="p"
-                  class="content"
-                  path="Enter your own privacy policy. HTML tags allowed. The {mobilizon_privacy_policy} is provided as template."
-                >
-                  <a
-                    slot="mobilizon_privacy_policy"
-                    href="https://demo.mobilizon.org/privacy"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    {{ $t("default Mobilizon privacy policy") }}</a
-                  >
-                </i18n>
-              </div>
-            </div>
-          </div>
-        </b-field>
-        <b-field
-          :label="$t('Instance Privacy Policy URL')"
-          label-for="instancePrivacyPolicyUrl"
-          v-if="
-            settingsToWrite.instancePrivacyPolicyType ===
-            InstancePrivacyType.URL
-          "
-        >
-          <b-input
-            type="URL"
-            v-model="settingsToWrite.instancePrivacyPolicyUrl"
-            id="instancePrivacyPolicyUrl"
-          />
-        </b-field>
-        <b-field
-          :label="$t('Instance Privacy Policy')"
-          label-for="instancePrivacyPolicy"
-          v-if="
-            settingsToWrite.instancePrivacyPolicyType ===
-            InstancePrivacyType.CUSTOM
-          "
-        >
-          <b-input
-            type="textarea"
-            v-model="settingsToWrite.instancePrivacyPolicy"
-            id="instancePrivacyPolicy"
-          />
-        </b-field>
-        <b-button native-type="submit" type="is-primary">{{
-          $t("Save")
-        }}</b-button>
-      </form>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import {
-  ADMIN_SETTINGS,
-  SAVE_ADMIN_SETTINGS,
-  LANGUAGES,
-} from "@/graphql/admin";
-import { InstancePrivacyType, InstanceTermsType } from "@/types/enums";
-import { IAdminSettings, ILanguage } from "../../types/admin.model";
-import RouteName from "../../router/name";
-
-@Component({
-  apollo: {
-    adminSettings: ADMIN_SETTINGS,
-    languages: LANGUAGES,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Settings") as string,
-    };
-  },
-})
-export default class Settings extends Vue {
-  adminSettings: IAdminSettings = {
-    instanceName: "",
-    instanceDescription: "",
-    instanceSlogan: "",
-    instanceLongDescription: "",
-    contact: "",
-    instanceTerms: "",
-    instanceTermsType: InstanceTermsType.DEFAULT,
-    instanceTermsUrl: null,
-    instancePrivacyPolicy: "",
-    instancePrivacyPolicyType: InstanceTermsType.DEFAULT,
-    instancePrivacyPolicyUrl: null,
-    instanceRules: "",
-    registrationsOpen: false,
-    instanceLanguages: [],
-  };
-
-  settingsToWrite: IAdminSettings = { ...this.adminSettings };
-
-  @Watch("adminSettings")
-  updateSettingsToWrite(): void {
-    this.settingsToWrite = { ...this.adminSettings };
-  }
-
-  languages!: ILanguage[];
-
-  filteredLanguages: string[] = [];
-
-  InstanceTermsType = InstanceTermsType;
-
-  InstancePrivacyType = InstancePrivacyType;
-
-  RouteName = RouteName;
-
-  get instanceLanguages(): string[] {
-    const languageCodes = [...this.adminSettings.instanceLanguages] || [];
-    return languageCodes
-      .map((code) => this.languageForCode(code))
-      .filter((language) => language) as string[];
-  }
-
-  set instanceLanguages(instanceLanguages: string[]) {
-    const newInstanceLanguages = instanceLanguages
-      .map((language) => {
-        return this.codeForLanguage(language);
-      })
-      .filter((code) => code !== undefined) as string[];
-    this.adminSettings = {
-      ...this.adminSettings,
-      instanceLanguages: newInstanceLanguages,
-    };
-  }
-
-  async updateSettings(): Promise<void> {
-    const variables = { ...this.settingsToWrite };
-    try {
-      await this.$apollo.mutate({
-        mutation: SAVE_ADMIN_SETTINGS,
-        variables,
-      });
-      this.$notifier.success(
-        this.$t("Admin settings successfully saved.") as string
-      );
-    } catch (e) {
-      console.error(e);
-      this.$notifier.error(this.$t("Failed to save admin settings") as string);
-    }
-  }
-
-  getFilteredLanguages(text: string): void {
-    this.filteredLanguages = this.languages
-      ? this.languages
-          .filter((language: ILanguage) => {
-            return (
-              language.name
-                .toString()
-                .toLowerCase()
-                .indexOf(text.toLowerCase()) >= 0
-            );
-          })
-          .map(({ name }) => name)
-      : [];
-  }
-
-  private codeForLanguage(language: string): string | undefined {
-    if (this.languages) {
-      const lang = this.languages.find(({ name }) => name === language);
-      if (lang) return lang.code;
-    }
-    return undefined;
-  }
-
-  private languageForCode(codeGiven: string): string | undefined {
-    if (this.languages) {
-      const lang = this.languages.find(({ code }) => code === codeGiven);
-      if (lang) return lang.name;
-    }
-    return undefined;
-  }
-}
-</script>
-<style lang="scss" scoped>
-label.label.has-help {
-  margin-bottom: 0;
-}
-</style>
diff --git a/js/src/views/Admin/SettingsView.vue b/js/src/views/Admin/SettingsView.vue
new file mode 100644
index 000000000..0cabe59aa
--- /dev/null
+++ b/js/src/views/Admin/SettingsView.vue
@@ -0,0 +1,510 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.ADMIN, text: t('Admin') },
+        { text: t('Instance settings') },
+      ]"
+    />
+
+    <section v-if="settingsToWrite">
+      <form @submit.prevent="updateSettings">
+        <o-field :label="t('Instance Name')" label-for="instance-name">
+          <o-input v-model="settingsToWrite.instanceName" id="instance-name" />
+        </o-field>
+        <div class="field flex flex-col">
+          <label class="" for="instance-description">{{
+            t("Instance Short Description")
+          }}</label>
+          <small>
+            {{
+              t(
+                "Displayed on homepage and meta tags. Describe what Mobilizon is and what makes this instance special in a single paragraph."
+              )
+            }}
+          </small>
+          <o-input
+            type="textarea"
+            v-model="settingsToWrite.instanceDescription"
+            rows="2"
+            id="instance-description"
+          />
+        </div>
+        <div class="field flex flex-col">
+          <label class="" for="instance-slogan">{{
+            t("Instance Slogan")
+          }}</label>
+          <small>
+            {{
+              t(
+                'A short tagline for your instance homepage. Defaults to "Gather ⋅ Organize ⋅ Mobilize"'
+              )
+            }}
+          </small>
+          <o-input
+            v-model="settingsToWrite.instanceSlogan"
+            :placeholder="t('Gather ⋅ Organize ⋅ Mobilize')"
+            id="instance-slogan"
+          />
+        </div>
+        <div class="field flex flex-col">
+          <label class="" for="instance-contact">{{ t("Contact") }}</label>
+          <small>
+            {{ t("Can be an email or a link, or just plain text.") }}
+          </small>
+          <o-input v-model="settingsToWrite.contact" id="instance-contact" />
+        </div>
+        <o-field :label="t('Allow registrations')">
+          <o-switch v-model="settingsToWrite.registrationsOpen">
+            <p
+              class="prose dark:prose-invert"
+              v-if="settingsToWrite.registrationsOpen"
+            >
+              {{ t("Registration is allowed, anyone can register.") }}
+            </p>
+            <p class="prose dark:prose-invert" v-else>
+              {{ t("Registration is closed.") }}
+            </p>
+          </o-switch>
+        </o-field>
+        <div class="field flex flex-col">
+          <label class="" for="instance-languages">{{
+            t("Instance languages")
+          }}</label>
+          <small>
+            {{ t("Main languages you/your moderators speak") }}
+          </small>
+          <o-inputitems
+            v-model="instanceLanguages"
+            :data="filteredLanguages"
+            autocomplete
+            :open-on-focus="true"
+            field="name"
+            icon="label"
+            :placeholder="t('Select languages')"
+            @typing="getFilteredLanguages"
+            id="instance-languages"
+          >
+            <template #empty>{{ t("No languages found") }}</template>
+          </o-inputitems>
+        </div>
+        <div class="field flex flex-col">
+          <label class="" for="instance-long-description">{{
+            t("Instance Long Description")
+          }}</label>
+          <small>
+            {{
+              t(
+                "A place to explain who you are and the things that set your instance apart. You can use HTML tags."
+              )
+            }}
+          </small>
+          <o-input
+            type="textarea"
+            v-model="settingsToWrite.instanceLongDescription"
+            rows="4"
+            id="instance-long-description"
+          />
+        </div>
+        <div class="field flex flex-col">
+          <label class="" for="instance-rules">{{ t("Instance Rules") }}</label>
+          <small>
+            {{
+              t(
+                "A place for your code of conduct, rules or guidelines. You can use HTML tags."
+              )
+            }}
+          </small>
+          <o-input
+            type="textarea"
+            v-model="settingsToWrite.instanceRules"
+            id="instance-rules"
+          />
+        </div>
+        <o-field :label="t('Instance Terms Source')">
+          <div class="">
+            <div class="">
+              <fieldset>
+                <legend>
+                  {{ t("Choose the source of the instance's Terms") }}
+                </legend>
+                <o-field>
+                  <o-radio
+                    v-model="settingsToWrite.instanceTermsType"
+                    name="instanceTermsType"
+                    :native-value="InstanceTermsType.DEFAULT"
+                    >{{ t("Default Mobilizon terms") }}</o-radio
+                  >
+                </o-field>
+                <o-field>
+                  <o-radio
+                    v-model="settingsToWrite.instanceTermsType"
+                    name="instanceTermsType"
+                    :native-value="InstanceTermsType.URL"
+                    >{{ t("Custom URL") }}</o-radio
+                  >
+                </o-field>
+                <o-field>
+                  <o-radio
+                    v-model="settingsToWrite.instanceTermsType"
+                    name="instanceTermsType"
+                    :native-value="InstanceTermsType.CUSTOM"
+                    >{{ t("Custom text") }}</o-radio
+                  >
+                </o-field>
+              </fieldset>
+            </div>
+            <div class="">
+              <o-notification
+                class="bg-slate-700"
+                v-if="
+                  settingsToWrite.instanceTermsType ===
+                  InstanceTermsType.DEFAULT
+                "
+              >
+                <b>{{ t("Default") }}</b>
+                <i18n-t
+                  tag="p"
+                  class="prose dark:prose-invert"
+                  keypath="The {default_terms} will be used. They will be translated in the user's language."
+                >
+                  <template #default_terms>
+                    <a
+                      href="https://demo.mobilizon.org/terms"
+                      target="_blank"
+                      rel="noopener"
+                      >{{ t("default Mobilizon terms") }}</a
+                    >
+                  </template>
+                </i18n-t>
+                <b>{{
+                  t(
+                    "NOTE! The default terms have not been checked over by a lawyer and thus are unlikely to provide full legal protection for all situations for an instance admin using them. They are also not specific to all countries and jurisdictions. If you are unsure, please check with a lawyer."
+                  )
+                }}</b>
+              </o-notification>
+              <div
+                class="notification"
+                v-if="
+                  settingsToWrite.instanceTermsType === InstanceTermsType.URL
+                "
+              >
+                <b>{{ t("URL") }}</b>
+                <p class="prose dark:prose-invert">
+                  {{ t("Set an URL to a page with your own terms.") }}
+                </p>
+              </div>
+              <div
+                class="notification"
+                v-if="
+                  settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
+                "
+              >
+                <b>{{ t("Custom") }}</b>
+                <i18n-t
+                  tag="p"
+                  class="prose dark:prose-invert"
+                  keypath="Enter your own terms. HTML tags allowed. The {mobilizon_terms} are provided as template."
+                >
+                  <template #mobilizon_terms>
+                    <a
+                      href="https://demo.mobilizon.org/terms"
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      {{ t("default Mobilizon terms") }}</a
+                    >
+                  </template>
+                </i18n-t>
+              </div>
+            </div>
+          </div>
+        </o-field>
+        <o-field
+          :label="t('Instance Terms URL')"
+          label-for="instanceTermsUrl"
+          v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
+        >
+          <o-input
+            type="URL"
+            v-model="settingsToWrite.instanceTermsUrl"
+            id="instanceTermsUrl"
+          />
+        </o-field>
+        <o-field
+          :label="t('Instance Terms')"
+          label-for="instanceTerms"
+          v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
+        >
+          <o-input
+            type="textarea"
+            v-model="settingsToWrite.instanceTerms"
+            id="instanceTerms"
+          />
+        </o-field>
+        <o-field :label="t('Instance Privacy Policy Source')">
+          <div class="">
+            <div class="">
+              <fieldset>
+                <legend>
+                  {{ t("Choose the source of the instance's Privacy Policy") }}
+                </legend>
+                <o-field>
+                  <o-radio
+                    v-model="settingsToWrite.instancePrivacyPolicyType"
+                    name="instancePrivacyType"
+                    :native-value="InstancePrivacyType.DEFAULT"
+                    >{{ t("Default Mobilizon privacy policy") }}</o-radio
+                  >
+                </o-field>
+                <o-field>
+                  <o-radio
+                    v-model="settingsToWrite.instancePrivacyPolicyType"
+                    name="instancePrivacyType"
+                    :native-value="InstancePrivacyType.URL"
+                    >{{ t("Custom URL") }}</o-radio
+                  >
+                </o-field>
+                <o-field>
+                  <o-radio
+                    v-model="settingsToWrite.instancePrivacyPolicyType"
+                    name="instancePrivacyType"
+                    :native-value="InstancePrivacyType.CUSTOM"
+                    >{{ t("Custom text") }}</o-radio
+                  >
+                </o-field>
+              </fieldset>
+            </div>
+            <div class="">
+              <div
+                class="notification"
+                v-if="
+                  settingsToWrite.instancePrivacyPolicyType ===
+                  InstancePrivacyType.DEFAULT
+                "
+              >
+                <b>{{ t("Default") }}</b>
+                <i18n-t
+                  tag="p"
+                  class="prose dark:prose-invert"
+                  keypath="The {default_privacy_policy} will be used. They will be translated in the user's language."
+                >
+                  <template #default_privacy_policy>
+                    <a
+                      href="https://demo.mobilizon.org/privacy"
+                      target="_blank"
+                      rel="noopener"
+                      >{{ t("default Mobilizon privacy policy") }}</a
+                    >
+                  </template>
+                </i18n-t>
+              </div>
+              <div
+                class="notification"
+                v-if="
+                  settingsToWrite.instancePrivacyPolicyType ===
+                  InstancePrivacyType.URL
+                "
+              >
+                <b>{{ t("URL") }}</b>
+                <p class="prose dark:prose-invert">
+                  {{ t("Set an URL to a page with your own privacy policy.") }}
+                </p>
+              </div>
+              <div
+                class="notification"
+                v-if="
+                  settingsToWrite.instancePrivacyPolicyType ===
+                  InstancePrivacyType.CUSTOM
+                "
+              >
+                <b>{{ t("Custom") }}</b>
+                <i18n-t
+                  tag="p"
+                  class="prose dark:prose-invert"
+                  keypath="Enter your own privacy policy. HTML tags allowed. The {mobilizon_privacy_policy} is provided as template."
+                >
+                  <template #mobilizon_privacy_policy>
+                    <a
+                      href="https://demo.mobilizon.org/privacy"
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      {{ t("default Mobilizon privacy policy") }}</a
+                    >
+                  </template>
+                </i18n-t>
+              </div>
+            </div>
+          </div>
+        </o-field>
+        <o-field
+          :label="t('Instance Privacy Policy URL')"
+          label-for="instancePrivacyPolicyUrl"
+          v-if="
+            settingsToWrite.instancePrivacyPolicyType ===
+            InstancePrivacyType.URL
+          "
+        >
+          <o-input
+            type="URL"
+            v-model="settingsToWrite.instancePrivacyPolicyUrl"
+            id="instancePrivacyPolicyUrl"
+          />
+        </o-field>
+        <o-field
+          :label="t('Instance Privacy Policy')"
+          label-for="instancePrivacyPolicy"
+          v-if="
+            settingsToWrite.instancePrivacyPolicyType ===
+            InstancePrivacyType.CUSTOM
+          "
+        >
+          <o-input
+            type="textarea"
+            v-model="settingsToWrite.instancePrivacyPolicy"
+            id="instancePrivacyPolicy"
+          />
+        </o-field>
+        <o-button native-type="submit" variant="primary">{{
+          t("Save")
+        }}</o-button>
+      </form>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  ADMIN_SETTINGS,
+  SAVE_ADMIN_SETTINGS,
+  LANGUAGES,
+} from "@/graphql/admin";
+import { InstancePrivacyType, InstanceTermsType } from "@/types/enums";
+import { IAdminSettings, ILanguage } from "@/types/admin.model";
+import RouteName from "@/router/name";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { ref, computed, watch, inject } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import type { Notifier } from "@/plugins/notifier";
+
+const defaultAdminSettings: IAdminSettings = {
+  instanceName: "",
+  instanceDescription: "",
+  instanceSlogan: "",
+  instanceLongDescription: "",
+  contact: "",
+  instanceTerms: "",
+  instanceTermsType: InstanceTermsType.DEFAULT,
+  instanceTermsUrl: null,
+  instancePrivacyPolicy: "",
+  instancePrivacyPolicyType: InstancePrivacyType.DEFAULT,
+  instancePrivacyPolicyUrl: null,
+  instanceRules: "",
+  registrationsOpen: false,
+  instanceLanguages: [],
+};
+
+const { result: adminSettingsResult } = useQuery<{
+  adminSettings: IAdminSettings;
+}>(ADMIN_SETTINGS);
+const adminSettings = computed(
+  () => adminSettingsResult.value?.adminSettings ?? defaultAdminSettings
+);
+
+const { result: languageResult } = useQuery<{ languages: ILanguage[] }>(
+  LANGUAGES
+);
+const languages = computed(() => languageResult.value?.languages);
+
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Settings")),
+});
+
+const settingsToWrite = ref<IAdminSettings>(defaultAdminSettings);
+
+watch(adminSettings, () => {
+  settingsToWrite.value = { ...adminSettings.value };
+});
+
+const filteredLanguages = ref<string[]>([]);
+
+const instanceLanguages = computed({
+  get() {
+    const languageCodes = [...adminSettings.value.instanceLanguages] || [];
+    return languageCodes
+      .map((code) => languageForCode(code))
+      .filter((language) => language) as string[];
+  },
+  set(newInstanceLanguages: string[]) {
+    const newFilteredInstanceLanguages = newInstanceLanguages
+      .map((language) => {
+        return codeForLanguage(language);
+      })
+      .filter((code) => code !== undefined) as string[];
+    settingsToWrite.value = {
+      ...settingsToWrite.value,
+      instanceLanguages: newFilteredInstanceLanguages,
+    };
+  },
+});
+
+const notifier = inject<Notifier>("notifier");
+
+const {
+  mutate: saveAdminSettings,
+  onDone: saveAdminSettingsDone,
+  onError: saveAdminSettingsError,
+} = useMutation(SAVE_ADMIN_SETTINGS);
+
+saveAdminSettingsDone(() => {
+  notifier?.success(t("Admin settings successfully saved.") as string);
+});
+
+saveAdminSettingsError((e) => {
+  console.error(e);
+  notifier?.error(t("Failed to save admin settings") as string);
+});
+
+const updateSettings = async (): Promise<void> => {
+  const variables = { ...settingsToWrite };
+  saveAdminSettings(variables);
+};
+
+const getFilteredLanguages = (text: string): void => {
+  filteredLanguages.value = languages.value
+    ? languages.value
+        .filter((language: ILanguage) => {
+          return (
+            language.name
+              .toString()
+              .toLowerCase()
+              .indexOf(text.toLowerCase()) >= 0
+          );
+        })
+        .map(({ name }) => name)
+    : [];
+};
+
+const codeForLanguage = (language: string): string | undefined => {
+  if (languages.value) {
+    const lang = languages.value.find(({ name }) => name === language);
+    if (lang) return lang.code;
+  }
+  return undefined;
+};
+
+const languageForCode = (codeGiven: string): string | undefined => {
+  if (languages.value) {
+    const lang = languages.value.find(({ code }) => code === codeGiven);
+    if (lang) return lang.name;
+  }
+  return undefined;
+};
+</script>
+<style lang="scss" scoped>
+label.label.has-help {
+  margin-bottom: 0;
+}
+</style>
diff --git a/js/src/views/Admin/Users.vue b/js/src/views/Admin/Users.vue
deleted file mode 100644
index 70bb912ac..000000000
--- a/js/src/views/Admin/Users.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        { name: RouteName.MODERATION, text: $t('Moderation') },
-        {
-          name: RouteName.USERS,
-          text: $t('Users'),
-        },
-      ]"
-    />
-    <div v-if="users">
-      <form @submit.prevent="activateFilters">
-        <b-field class="mb-5" grouped group-multiline>
-          <b-field :label="$t('Email')" expanded>
-            <b-input trap-focus icon="email" v-model="emailFilterFieldValue" />
-          </b-field>
-          <b-field :label="$t('IP Address')" expanded>
-            <b-input icon="web" v-model="ipFilterFieldValue" />
-          </b-field>
-          <p class="control self-end mb-0">
-            <b-button type="is-primary" native-type="submit">{{
-              $t("Filter")
-            }}</b-button>
-          </p>
-        </b-field>
-      </form>
-      <b-table
-        :data="users.elements"
-        :loading="$apollo.queries.users.loading"
-        paginated
-        backend-pagination
-        :debounce-search="500"
-        :current-page.sync="page"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
-        :show-detail-icon="true"
-        :total="users.total"
-        :per-page="USERS_PER_PAGE"
-        @page-change="onPageChange"
-      >
-        <b-table-column field="id" width="40" numeric v-slot="props">
-          {{ props.row.id }}
-        </b-table-column>
-        <b-table-column field="email" :label="$t('Email')">
-          <template v-slot:default="props">
-            <router-link
-              :to="{
-                name: RouteName.ADMIN_USER_PROFILE,
-                params: { id: props.row.id },
-              }"
-              :class="{ disabled: props.row.disabled }"
-            >
-              {{ props.row.email }}
-            </router-link>
-          </template>
-        </b-table-column>
-        <b-table-column
-          field="confirmedAt"
-          :label="$t('Last seen on')"
-          :centered="true"
-          v-slot="props"
-        >
-          <template v-if="props.row.currentSignInAt">
-            <time :datetime="props.row.currentSignInAt">
-              {{ props.row.currentSignInAt | formatDateTimeString }}
-            </time>
-          </template>
-          <template v-else-if="props.row.confirmedAt"> - </template>
-          <template v-else>
-            {{ $t("Not confirmed") }}
-          </template>
-        </b-table-column>
-        <b-table-column
-          field="locale"
-          :label="$t('Language')"
-          :centered="true"
-          v-slot="props"
-        >
-          {{ getLanguageNameForCode(props.row.locale) }}
-        </b-table-column>
-        <template #empty>
-          <empty-content
-            v-if="!$apollo.loading && emailFilter"
-            :inline="true"
-            icon="account"
-          >
-            {{ $t("No user matches the filters") }}
-            <template #desc>
-              <b-button type="is-primary" @click="resetFilters">
-                {{ $t("Reset filters") }}
-              </b-button>
-            </template>
-          </empty-content>
-        </template>
-      </b-table>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { LIST_USERS } from "../../graphql/user";
-import RouteName from "../../router/name";
-import VueRouter from "vue-router";
-import { LANGUAGES_CODES } from "@/graphql/admin";
-import { IUser } from "@/types/current-user.model";
-import { Paginate } from "@/types/paginate";
-import EmptyContent from "../../components/Utils/EmptyContent.vue";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-const USERS_PER_PAGE = 10;
-
-@Component({
-  apollo: {
-    users: {
-      query: LIST_USERS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          email: this.emailFilter,
-          currentSignInIp: this.ipFilter,
-          page: this.page,
-          limit: USERS_PER_PAGE,
-        };
-      },
-    },
-    languages: {
-      query: LANGUAGES_CODES,
-      variables() {
-        return {
-          codes: this.languagesCodes,
-        };
-      },
-      skip() {
-        return this.languagesCodes.length < 1;
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Users") as string,
-    };
-  },
-  components: {
-    EmptyContent,
-  },
-})
-export default class Users extends Vue {
-  USERS_PER_PAGE = USERS_PER_PAGE;
-
-  RouteName = RouteName;
-
-  users!: Paginate<IUser>;
-  languages!: Array<{ code: string; name: string }>;
-
-  emailFilterFieldValue = this.emailFilter;
-  ipFilterFieldValue = this.ipFilter;
-
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  set page(page: number) {
-    this.pushRouter({ page: page.toString() });
-  }
-
-  get emailFilter(): string {
-    return (this.$route.query.emailFilter as string) || "";
-  }
-
-  set emailFilter(emailFilter: string) {
-    this.pushRouter({ emailFilter });
-  }
-
-  get ipFilter(): string {
-    return (this.$route.query.ipFilter as string) || "";
-  }
-
-  set ipFilter(ipFilter: string) {
-    this.pushRouter({ ipFilter });
-  }
-
-  get languagesCodes(): string[] {
-    return (this.users?.elements || []).map((user: IUser) => user.locale);
-  }
-
-  getLanguageNameForCode(code: string): string {
-    return (
-      (this.languages || []).find(({ code: languageCode }) => {
-        return languageCode === code;
-      })?.name || code
-    );
-  }
-
-  async onPageChange(page: number): Promise<void> {
-    this.page = page;
-    await this.$apollo.queries.users.fetchMore({
-      variables: {
-        email: this.emailFilter,
-        currentSignInIp: this.ipFilter,
-        page: this.page,
-        limit: USERS_PER_PAGE,
-      },
-    });
-  }
-
-  activateFilters(): void {
-    this.emailFilter = this.emailFilterFieldValue;
-    this.ipFilter = this.ipFilterFieldValue;
-  }
-
-  resetFilters(): void {
-    this.emailFilterFieldValue = "";
-    this.ipFilterFieldValue = "";
-    this.activateFilters();
-  }
-
-  private async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      await this.$router.push({
-        name: RouteName.USERS,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-a.profile,
-a.user-profile {
-  text-decoration: none;
-}
-a.disabled {
-  color: $danger;
-  text-decoration: line-through;
-}
-</style>
diff --git a/js/src/views/Admin/UsersView.vue b/js/src/views/Admin/UsersView.vue
new file mode 100644
index 000000000..bcff12e65
--- /dev/null
+++ b/js/src/views/Admin/UsersView.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.MODERATION, text: $t('Moderation') },
+        {
+          name: RouteName.USERS,
+          text: $t('Users'),
+        },
+      ]"
+    />
+    <div v-if="users">
+      <form @submit.prevent="activateFilters">
+        <o-field class="mb-5" grouped group-multiline>
+          <o-field :label="$t('Email')" expanded>
+            <o-input trap-focus icon="email" v-model="emailFilterFieldValue" />
+          </o-field>
+          <o-field :label="$t('IP Address')" expanded>
+            <o-input icon="web" v-model="ipFilterFieldValue" />
+          </o-field>
+          <p class="control self-end mb-0">
+            <o-button variant="primary" native-type="submit">{{
+              $t("Filter")
+            }}</o-button>
+          </p>
+        </o-field>
+      </form>
+      <o-table
+        :data="users.elements"
+        :loading="usersLoading"
+        paginated
+        backend-pagination
+        :debounce-search="500"
+        v-model:current-page="page"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
+        :show-detail-icon="true"
+        :total="users.total"
+        :per-page="USERS_PER_PAGE"
+        @page-change="onPageChange"
+      >
+        <o-table-column field="id" width="40" numeric v-slot="props">
+          {{ props.row.id }}
+        </o-table-column>
+        <o-table-column field="email" :label="$t('Email')">
+          <template #default="props">
+            <router-link
+              :to="{
+                name: RouteName.ADMIN_USER_PROFILE,
+                params: { id: props.row.id },
+              }"
+              :class="{ disabled: props.row.disabled }"
+            >
+              {{ props.row.email }}
+            </router-link>
+          </template>
+        </o-table-column>
+        <o-table-column
+          field="confirmedAt"
+          :label="$t('Last seen on')"
+          :centered="true"
+          v-slot="props"
+        >
+          <template v-if="props.row.currentSignInAt">
+            <time :datetime="props.row.currentSignInAt">
+              {{ formatDateTimeString(props.row.currentSignInAt) }}
+            </time>
+          </template>
+          <template v-else-if="props.row.confirmedAt"> - </template>
+          <template v-else>
+            {{ $t("Not confirmed") }}
+          </template>
+        </o-table-column>
+        <o-table-column
+          field="locale"
+          :label="$t('Language')"
+          :centered="true"
+          v-slot="props"
+        >
+          {{ getLanguageNameForCode(props.row.locale) }}
+        </o-table-column>
+        <template #empty>
+          <empty-content
+            v-if="!usersLoading && emailFilter"
+            :inline="true"
+            icon="account"
+          >
+            {{ $t("No user matches the filters") }}
+            <template #desc>
+              <o-button variant="primary" @click="resetFilters">
+                {{ $t("Reset filters") }}
+              </o-button>
+            </template>
+          </empty-content>
+        </template>
+      </o-table>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { LIST_USERS } from "../../graphql/user";
+import RouteName from "../../router/name";
+import { LANGUAGES_CODES } from "@/graphql/admin";
+import { IUser } from "@/types/current-user.model";
+import { Paginate } from "@/types/paginate";
+import EmptyContent from "../../components/Utils/EmptyContent.vue";
+import { useQuery } from "@vue/apollo-composable";
+import { ILanguage } from "@/types/admin.model";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import { formatDateTimeString } from "@/filters/datetime";
+
+const USERS_PER_PAGE = 10;
+
+const emailFilter = useRouteQuery("emailFilter", "");
+const ipFilter = useRouteQuery("ipFilter", "");
+const page = useRouteQuery("page", 1, integerTransformer);
+
+const languagesCodes = computed((): string[] => {
+  return (users.value?.elements ?? []).map((user: IUser) => user.locale);
+});
+
+const {
+  result: usersResult,
+  fetchMore,
+  loading: usersLoading,
+} = useQuery<{ users: Paginate<IUser> }>(LIST_USERS, () => ({
+  email: emailFilter.value,
+  currentSignInIp: ipFilter.value,
+  page: page.value,
+  limit: USERS_PER_PAGE,
+}));
+
+const users = computed(() => usersResult.value?.users);
+
+const { result: languagesResult } = useQuery<{ languages: ILanguage[] }>(
+  LANGUAGES_CODES,
+  () => ({
+    codes: languagesCodes.value,
+  }),
+  () => ({
+    enabled: languagesCodes.value !== undefined,
+  })
+);
+
+const languages = computed(() => languagesResult.value?.languages);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Users")),
+});
+
+const emailFilterFieldValue = ref(emailFilter.value);
+const ipFilterFieldValue = ref(ipFilter.value);
+
+const getLanguageNameForCode = (code: string): string => {
+  return (
+    (languages.value ?? []).find(({ code: languageCode }) => {
+      return languageCode === code;
+    })?.name || code
+  );
+};
+
+const onPageChange = async (newPage: number): Promise<void> => {
+  page.value = newPage;
+  await fetchMore({
+    variables: {
+      email: emailFilter.value,
+      currentSignInIp: ipFilter.value,
+      page: page.value,
+      limit: USERS_PER_PAGE,
+    },
+  });
+};
+
+const activateFilters = (): void => {
+  emailFilter.value = emailFilterFieldValue.value;
+  ipFilter.value = ipFilterFieldValue.value;
+};
+
+const resetFilters = (): void => {
+  emailFilterFieldValue.value = "";
+  ipFilterFieldValue.value = "";
+  activateFilters();
+};
+</script>
+
+<style lang="scss" scoped>
+a.profile,
+a.user-profile {
+  text-decoration: none;
+}
+a.disabled {
+  text-decoration: line-through;
+}
+</style>
diff --git a/js/src/views/CategoriesView.vue b/js/src/views/CategoriesView.vue
new file mode 100644
index 000000000..97de3f25d
--- /dev/null
+++ b/js/src/views/CategoriesView.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="container mx-auto py-4 md:py-12 px-2 md:px-60">
+    <main>
+      <div class="flex flex-wrap items-center justify-center gap-3 md:gap-4">
+        <CategoryCard
+          v-for="category in promotedCategories"
+          :key="category.key"
+          :category="category"
+          :with-details="true"
+        />
+      </div>
+
+      <div
+        class="mx-auto w-full max-w-lg rounded-2xl dark:bg-gray-800 p-2 mt-10"
+      >
+        <div
+          class="card"
+          animation="slide"
+          :open="isLicencePanelOpen"
+          @open="isLicencePanelOpen = !isLicencePanelOpen"
+          :aria-id="'contentIdForA11y5'"
+        >
+          <div>
+            <button
+              class="flex w-full justify-between rounded-lg px-4 py-2 text-left text-sm font-medium dark:text-zinc-300"
+            >
+              {{ t("Category illustrations credits") }}
+              <svg
+                width="24"
+                height="24"
+                :class="isLicencePanelOpen ? 'transform rotate-90' : ''"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth="{2}"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="flex flex-col dark:text-zinc-300 gap-2 py-4 px-1">
+            <p
+              v-for="(categoryLicence, key) in categoriesPicturesLicences"
+              :key="key"
+              class="flex flex-row gap-1 items-center"
+            >
+              <a
+                :href="categoryLicence.source.url"
+                target="_blank"
+                class="shrink-0"
+              >
+                <picture class="brightness-50">
+                  <source
+                    :srcset="`/img/categories/${key.toLowerCase()}.webp 2x, /img/categories/${key.toLowerCase()}.webp`"
+                    media="(min-width: 1000px)"
+                  />
+                  <source
+                    :srcset="`/img/categories/${key.toLowerCase()}.webp 2x, /img/categories/${key.toLowerCase()}-small.webp`"
+                    media="(min-width: 300px)"
+                  />
+                  <img
+                    class="w-full h-12 w-12 object-cover"
+                    :src="`/img/categories/${key.toLowerCase()}.webp`"
+                    :srcset="`/img/categories/${key.toLowerCase()}-small.webp `"
+                    alt=""
+                  />
+                </picture>
+              </a>
+              <span
+                class="flex-0"
+                v-html="
+                  t(
+                    'Illustration picture for “{category}” by {author} on {source} ({license})',
+                    {
+                      category: eventCategoryLabel(key),
+                      author: imageAuthor(categoryLicence.author),
+                      source: imageSource(categoryLicence.source),
+                      license: imageLicense(categoryLicence),
+                    }
+                  )
+                "
+              />
+            </p>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+<script lang="ts" setup>
+import CategoryCard from "@/components/Categories/CategoryCard.vue";
+
+import { computed, ref } from "vue";
+import { CATEGORY_STATISTICS } from "@/graphql/statistics";
+import { useQuery } from "@vue/apollo-composable";
+import { CategoryStatsModel } from "@/types/stats.model";
+import {
+  categoriesPicturesLicences,
+  CategoryPictureLicencing,
+  CategoryPictureLicencingElement,
+} from "@/components/Categories/constants";
+import { useI18n } from "vue-i18n";
+import { useEventCategories } from "@/composition/apollo/config";
+
+const { t } = useI18n({ useScope: "global" });
+
+const { eventCategories } = useEventCategories();
+
+const eventCategoryLabel = (categoryId: string): string | undefined => {
+  return eventCategories.value?.find(({ id }) => categoryId == id)?.label;
+};
+
+const { result: categoryStatsResult } = useQuery<{
+  categoryStatistics: CategoryStatsModel[];
+}>(CATEGORY_STATISTICS);
+const categoryStats = computed(
+  () => categoryStatsResult.value?.categoryStatistics ?? []
+);
+
+const promotedCategories = computed((): CategoryStatsModel[] => {
+  return categoryStats.value
+    .map(({ key, number }) => ({
+      key,
+      number,
+      label: eventCategoryLabel(key) as string,
+    }))
+    .filter(
+      ({ key, number, label }) =>
+        key !== "MEETING" && number >= 1 && label !== undefined
+    )
+    .sort((a, b) => a.label.localeCompare(b.label));
+});
+
+const imageAuthor = (author: CategoryPictureLicencingElement) =>
+  `<a target="_blank" class="underline font-medium" href="${author?.url}">${author?.name}</a>`;
+const imageSource = (source: CategoryPictureLicencingElement) =>
+  `<a target="_blank" class="underline font-medium" href="${source?.url}">${source?.name}</a>`;
+
+const imageLicense = (categoryLicence: CategoryPictureLicencing): string => {
+  let license = categoryLicence?.license;
+  if (categoryLicence?.source?.name === "Unsplash") {
+    license = {
+      name: "Unsplash License",
+      url: "https://unsplash.com/license",
+    };
+  }
+  return `<a target="_blank" class="underline font-medium" href="${license?.url}">${license?.name}</a>`;
+};
+
+const isLicencePanelOpen = ref(false);
+</script>
diff --git a/js/src/views/Discussions/Create.vue b/js/src/views/Discussions/Create.vue
deleted file mode 100644
index 2659ba27d..000000000
--- a/js/src/views/Discussions/Create.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <section class="section container">
-    <breadcrumbs-nav
-      v-if="group"
-      :links="[
-        {
-          name: RouteName.MY_GROUPS,
-          text: $t('My groups'),
-        },
-        {
-          name: RouteName.GROUP,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: displayName(group),
-        },
-        {
-          name: RouteName.DISCUSSION_LIST,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Discussions'),
-        },
-        {
-          name: RouteName.CREATE_DISCUSSION,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Create'),
-        },
-      ]"
-    />
-    <h1 class="title">{{ $t("Create a discussion") }}</h1>
-
-    <form @submit.prevent="createDiscussion">
-      <b-field
-        :label="$t('Title')"
-        label-for="discussion-title"
-        :message="errors.title"
-        :type="errors.title ? 'is-danger' : undefined"
-      >
-        <b-input
-          aria-required="true"
-          required
-          v-model="discussion.title"
-          id="discussion-title"
-        />
-      </b-field>
-
-      <b-field :label="$t('Text')">
-        <editor v-model="discussion.text" :aria-label="$t('Comment body')" />
-      </b-field>
-
-      <button class="button is-primary" type="submit">
-        {{ $t("Create the discussion") }}
-      </button>
-    </form>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import {
-  displayName,
-  IGroup,
-  IPerson,
-  usernameWithDomain,
-} from "@/types/actor";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { FETCH_GROUP } from "@/graphql/group";
-import { CREATE_DISCUSSION } from "@/graphql/discussion";
-import RouteName from "../../router/name";
-
-@Component({
-  components: {
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-  },
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-    group: {
-      query: FETCH_GROUP,
-      variables() {
-        return {
-          name: this.preferredUsername,
-        };
-      },
-      skip() {
-        return !this.preferredUsername;
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Create a discussion") as string,
-    };
-  },
-})
-export default class CreateDiscussion extends Vue {
-  @Prop({ type: String, required: true }) preferredUsername!: string;
-
-  group!: IGroup;
-
-  currentActor!: IPerson;
-
-  discussion = { title: "", text: "" };
-
-  errors = { title: "" };
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  async createDiscussion(): Promise<void> {
-    this.errors = { title: "" };
-    try {
-      if (!this.group.id || !this.currentActor.id) return;
-      const { data } = await this.$apollo.mutate({
-        mutation: CREATE_DISCUSSION,
-        variables: {
-          title: this.discussion.title,
-          text: this.discussion.text,
-          actorId: parseInt(this.group.id, 10),
-        },
-      });
-
-      await this.$router.push({
-        name: RouteName.DISCUSSION,
-        params: {
-          id: data.createDiscussion.id,
-          slug: data.createDiscussion.slug,
-        },
-      });
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        if (error.graphQLErrors[0].field == "title") {
-          this.errors.title = error.graphQLErrors[0].message;
-        } else {
-          this.$notifier.error(error.graphQLErrors[0].message);
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.container.section {
-  background: $white;
-}
-
-.markdown-render h1 {
-  font-size: 2em;
-}
-</style>
diff --git a/js/src/views/Discussions/CreateView.vue b/js/src/views/Discussions/CreateView.vue
new file mode 100644
index 000000000..48ac1a70d
--- /dev/null
+++ b/js/src/views/Discussions/CreateView.vue
@@ -0,0 +1,139 @@
+<template>
+  <section class="container mx-auto">
+    <breadcrumbs-nav
+      v-if="group"
+      :links="[
+        {
+          name: RouteName.MY_GROUPS,
+          text: t('My groups'),
+        },
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.DISCUSSION_LIST,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: t('Discussions'),
+        },
+        {
+          name: RouteName.CREATE_DISCUSSION,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: t('Create'),
+        },
+      ]"
+    />
+    <h1 class="title">{{ t("Create a discussion") }}</h1>
+
+    <form @submit.prevent="createDiscussion">
+      <o-field
+        :label="t('Title')"
+        label-for="discussion-title"
+        :message="errors.title"
+        :type="errors.title ? 'is-danger' : undefined"
+      >
+        <o-input
+          aria-required="true"
+          required
+          v-model="discussion.title"
+          id="discussion-title"
+        />
+      </o-field>
+
+      <o-field :label="t('Text')">
+        <Editor
+          v-model="discussion.text"
+          :aria-label="t('Comment body')"
+          v-if="currentActor"
+          :current-actor="currentActor"
+        />
+      </o-field>
+
+      <o-button class="mt-2" native-type="submit">
+        {{ t("Create the discussion") }}
+      </o-button>
+    </form>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { displayName, usernameWithDomain } from "@/types/actor";
+import { CREATE_DISCUSSION } from "@/graphql/discussion";
+import RouteName from "../../router/name";
+import { computed, defineAsyncComponent, reactive, inject } from "vue";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useGroup } from "@/composition/apollo/group";
+import { useI18n } from "vue-i18n";
+import { useMutation } from "@vue/apollo-composable";
+import { IDiscussion } from "@/types/discussions";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import { Notifier } from "@/plugins/notifier";
+import { AbsintheGraphQLError } from "@/types/errors.model";
+
+const Editor = defineAsyncComponent(
+  () => import("@/components/TextEditor.vue")
+);
+
+const props = defineProps<{ preferredUsername: string }>();
+
+const { currentActor } = useCurrentActorClient();
+
+const { group } = useGroup(props.preferredUsername);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Create a discussion")),
+});
+
+const discussion = reactive({ title: "", text: "" });
+
+const errors = reactive({ title: "" });
+
+const router = useRouter();
+const notifier = inject<Notifier>("notifier");
+
+const { mutate, onDone, onError } = useMutation<{
+  createDiscussion: IDiscussion;
+}>(CREATE_DISCUSSION);
+
+onDone(({ data }) => {
+  router.push({
+    name: RouteName.DISCUSSION,
+    params: {
+      id: data?.createDiscussion.id,
+      slug: data?.createDiscussion.slug,
+    },
+  });
+});
+
+onError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    const graphQLError = error.graphQLErrors[0] as AbsintheGraphQLError;
+    if (graphQLError.field == "title") {
+      errors.title = graphQLError.message;
+    } else {
+      notifier?.error(graphQLError.message);
+    }
+  }
+});
+
+const createDiscussion = async (): Promise<void> => {
+  errors.title = "";
+  if (!group.value?.id || !currentActor.value?.id) return;
+  mutate({
+    title: discussion.title,
+    text: discussion.text,
+    actorId: group.value.id,
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.markdown-render h1 {
+  font-size: 2em;
+}
+</style>
diff --git a/js/src/views/Discussions/Discussion.vue b/js/src/views/Discussions/Discussion.vue
deleted file mode 100644
index b693b903c..000000000
--- a/js/src/views/Discussions/Discussion.vue
+++ /dev/null
@@ -1,440 +0,0 @@
-<template>
-  <div class="container section" v-if="discussion">
-    <breadcrumbs-nav
-      v-if="group"
-      :links="[
-        {
-          name: RouteName.MY_GROUPS,
-          text: $t('My groups'),
-        },
-        {
-          name: RouteName.GROUP,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: displayName(group),
-        },
-        {
-          name: RouteName.DISCUSSION_LIST,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Discussions'),
-        },
-        {
-          name: RouteName.DISCUSSION,
-          params: { id: discussion.id },
-          text: discussion.title,
-        },
-      ]"
-    />
-    <b-message v-if="error" type="is-danger">
-      {{ error }}
-    </b-message>
-    <section>
-      <div class="discussion-title" dir="auto">
-        <h1 class="title" v-if="discussion.title && !editTitleMode">
-          {{ discussion.title }}
-        </h1>
-        <b-button
-          icon-right="pencil"
-          size="is-small"
-          :title="$t('Update discussion title')"
-          v-if="
-            discussion.creator &&
-            !editTitleMode &&
-            (currentActor.id === discussion.creator.id ||
-              isCurrentActorAGroupModerator)
-          "
-          @click="
-            () => {
-              newTitle = discussion.title;
-              editTitleMode = true;
-            }
-          "
-        >
-        </b-button>
-        <b-skeleton
-          v-else-if="!editTitleMode && $apollo.loading"
-          height="50px"
-          animated
-        />
-        <form
-          v-else-if="!$apollo.loading && !error"
-          @submit.prevent="updateDiscussion"
-          class="title-edit"
-        >
-          <b-field :label="$t('Title')" label-for="discussion-title">
-            <b-input
-              :value="discussion.title"
-              v-model="newTitle"
-              id="discussion-title"
-            />
-          </b-field>
-          <div class="buttons">
-            <b-button
-              type="is-primary"
-              native-type="submit"
-              icon-right="check"
-              :title="$t('Update discussion title')"
-            />
-            <b-button
-              @click="
-                () => {
-                  editTitleMode = false;
-                  newTitle = '';
-                }
-              "
-              icon-right="close"
-              :title="$t('Cancel discussion title edition')"
-            />
-            <b-button
-              @click="openDeleteDiscussionConfirmation"
-              type="is-danger"
-              native-type="button"
-              icon-left="delete"
-              >{{ $t("Delete conversation") }}</b-button
-            >
-          </div>
-        </form>
-      </div>
-      <discussion-comment
-        v-for="comment in discussion.comments.elements"
-        :key="comment.id"
-        :comment="comment"
-        @update-comment="updateComment"
-        @delete-comment="deleteComment"
-      />
-      <b-button
-        v-if="discussion.comments.elements.length < discussion.comments.total"
-        @click="loadMoreComments"
-        >{{ $t("Fetch more") }}</b-button
-      >
-      <form @submit.prevent="reply" v-if="!error">
-        <b-field :label="$t('Text')">
-          <editor v-model="newComment" :aria-label="$t('Comment body')" />
-        </b-field>
-        <b-button
-          native-type="submit"
-          :disabled="['<p></p>', ''].includes(newComment)"
-          type="is-primary"
-          >{{ $t("Reply") }}</b-button
-        >
-      </form>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
-import {
-  GET_DISCUSSION,
-  REPLY_TO_DISCUSSION,
-  UPDATE_DISCUSSION,
-  DELETE_DISCUSSION,
-  DISCUSSION_COMMENT_CHANGED,
-} from "@/graphql/discussion";
-import { IDiscussion } from "@/types/discussions";
-import { Discussion as DiscussionModel } from "@/types/discussions";
-import { displayName, usernameWithDomain } from "@/types/actor";
-import DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
-import { GraphQLError } from "graphql";
-import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
-import RouteName from "../../router/name";
-import { IComment } from "../../types/comment.model";
-import { ApolloCache, FetchResult, gql, Reference } from "@apollo/client/core";
-import { mixins } from "vue-class-component";
-import GroupMixin from "@/mixins/group";
-
-@Component({
-  apollo: {
-    discussion: {
-      query: GET_DISCUSSION,
-      variables() {
-        return {
-          slug: this.slug,
-          page: 1,
-          limit: this.COMMENTS_PER_PAGE,
-        };
-      },
-      skip() {
-        return !this.slug;
-      },
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
-      },
-      subscribeToMore: {
-        document: DISCUSSION_COMMENT_CHANGED,
-        variables() {
-          return {
-            slug: this.$route.params.slug,
-            page: this.page,
-            limit: this.COMMENTS_PER_PAGE,
-          };
-        },
-        updateQuery: function (
-          previousResult: any,
-          { subscriptionData }: { subscriptionData: any }
-        ) {
-          const previousDiscussion = previousResult.discussion;
-          const lastComment =
-            subscriptionData.data.discussionCommentChanged.lastComment;
-          this.hasMoreComments = !previousDiscussion.comments.elements.some(
-            (comment: IComment) => comment.id === lastComment.id
-          );
-          if (this.hasMoreComments) {
-            return {
-              discussion: {
-                ...previousDiscussion,
-                lastComment: lastComment,
-                comments: {
-                  elements: [
-                    ...previousDiscussion.comments.elements.filter(
-                      ({ id }: { id: string }) => id !== lastComment.id
-                    ),
-                    lastComment,
-                  ],
-                  total: previousDiscussion.comments.total + 1,
-                },
-              },
-            };
-          }
-
-          return previousDiscussion;
-        },
-      },
-    },
-  },
-  components: {
-    DiscussionComment,
-    editor: () =>
-      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.discussion.title,
-    };
-  },
-})
-export default class Discussion extends mixins(GroupMixin) {
-  @Prop({ type: String, required: true }) slug!: string;
-
-  discussion: IDiscussion = new DiscussionModel();
-
-  newComment = "";
-
-  newTitle = "";
-
-  editTitleMode = false;
-
-  page = 1;
-
-  hasMoreComments = true;
-
-  COMMENTS_PER_PAGE = 10;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-  displayName = displayName;
-  error: string | null = null;
-
-  async reply(): Promise<void> {
-    if (this.newComment === "") return;
-
-    await this.$apollo.mutate({
-      mutation: REPLY_TO_DISCUSSION,
-      variables: {
-        discussionId: this.discussion.id,
-        text: this.newComment,
-      },
-    });
-    this.newComment = "";
-  }
-
-  async updateComment(comment: IComment): Promise<void> {
-    await this.$apollo.mutate<{ deleteComment: IComment }>({
-      mutation: UPDATE_COMMENT,
-      variables: {
-        commentId: comment.id,
-        text: comment.text,
-      },
-      update: (
-        store: ApolloCache<{ deleteComment: IComment }>,
-        { data }: FetchResult
-      ) => {
-        if (!data || !data.deleteComment) return;
-        const discussionData = store.readQuery<{
-          discussion: IDiscussion;
-        }>({
-          query: GET_DISCUSSION,
-          variables: {
-            slug: this.slug,
-            page: this.page,
-          },
-        });
-        if (!discussionData) return;
-        const { discussion: discussionCached } = discussionData;
-        const index = discussionCached.comments.elements.findIndex(
-          ({ id }) => id === data.deleteComment.id
-        );
-        if (index > -1) {
-          discussionCached.comments.elements.splice(index, 1);
-          discussionCached.comments.total -= 1;
-        }
-        store.writeQuery({
-          query: GET_DISCUSSION,
-          variables: { slug: this.slug, page: this.page },
-          data: { discussion: discussionCached },
-        });
-      },
-    });
-  }
-
-  async deleteComment(comment: IComment): Promise<void> {
-    await this.$apollo.mutate<{ deleteComment: IComment }>({
-      mutation: DELETE_COMMENT,
-      variables: {
-        commentId: comment.id,
-      },
-      update: (store: ApolloCache<{ deleteComment: IComment }>) => {
-        store.writeFragment({
-          id: store.identify(comment as unknown as Reference),
-          fragment: gql`
-            fragment CommentDeleted on Comment {
-              deletedAt
-              actor {
-                id
-              }
-              text
-            }
-          `,
-          data: {
-            deletedAt: new Date(),
-            text: "",
-            actor: null,
-          },
-        });
-      },
-    });
-  }
-
-  async loadMoreComments(): Promise<void> {
-    if (!this.hasMoreComments) return;
-    this.page++;
-    try {
-      await this.$apollo.queries.discussion.fetchMore({
-        // New variables
-        variables: {
-          slug: this.slug,
-          page: this.page,
-          limit: this.COMMENTS_PER_PAGE,
-        },
-      });
-      this.hasMoreComments = !this.discussion.comments.elements
-        .map(({ id }) => id)
-        .includes(this.discussion?.lastComment?.id);
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async updateDiscussion(): Promise<void> {
-    await this.$apollo.mutate<{ updateDiscussion: IDiscussion }>({
-      mutation: UPDATE_DISCUSSION,
-      variables: {
-        discussionId: this.discussion.id,
-        title: this.newTitle,
-      },
-    });
-    this.editTitleMode = false;
-  }
-
-  openDeleteDiscussionConfirmation(): void {
-    this.$buefy.dialog.confirm({
-      type: "is-danger",
-      title: this.$t("Delete this discussion") as string,
-      message: this.$t(
-        "Are you sure you want to delete this entire discussion?"
-      ) as string,
-      confirmText: this.$t("Delete discussion") as string,
-      cancelText: this.$t("Cancel") as string,
-      onConfirm: () => this.deleteConversation(),
-    });
-  }
-
-  async deleteConversation(): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: DELETE_DISCUSSION,
-      variables: {
-        discussionId: this.discussion.id,
-      },
-    });
-    if (this.discussion.actor) {
-      this.$router.push({
-        name: RouteName.DISCUSSION_LIST,
-        params: {
-          preferredUsername: usernameWithDomain(this.discussion.actor),
-        },
-      });
-    }
-  }
-
-  async handleErrors(errors: GraphQLError[]): Promise<void> {
-    if (errors[0].message.includes("No such discussion")) {
-      await this.$router.push({ name: RouteName.PAGE_NOT_FOUND });
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (errors[0].code === "unauthorized") {
-      this.error = errors[0].message;
-    }
-  }
-
-  mounted(): void {
-    window.addEventListener("scroll", this.handleScroll);
-  }
-
-  destroyed(): void {
-    window.removeEventListener("scroll", this.handleScroll);
-  }
-
-  handleScroll(): void {
-    const scrollTop =
-      (document.documentElement && document.documentElement.scrollTop) ||
-      document.body.scrollTop;
-    const scrollHeight =
-      (document.documentElement && document.documentElement.scrollHeight) ||
-      document.body.scrollHeight;
-    const clientHeight =
-      document.documentElement.clientHeight || window.innerHeight;
-    const scrolledToBottom =
-      Math.ceil(scrollTop + clientHeight + 800) >= scrollHeight;
-    if (scrolledToBottom) {
-      this.loadMoreComments();
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-div.container.section {
-  background: white;
-  padding: 1rem 5% 4rem;
-
-  div.discussion-title {
-    margin-bottom: 1.75rem;
-    display: flex;
-    align-items: center;
-
-    h1.title {
-      margin-bottom: 0;
-      @include margin-right(10px);
-    }
-
-    form.title-edit {
-      flex: 1;
-      div.control {
-        margin-bottom: 0.75rem;
-      }
-    }
-  }
-}
-</style>
diff --git a/js/src/views/Discussions/DiscussionView.vue b/js/src/views/Discussions/DiscussionView.vue
new file mode 100644
index 000000000..df866d18b
--- /dev/null
+++ b/js/src/views/Discussions/DiscussionView.vue
@@ -0,0 +1,458 @@
+<template>
+  <div class="container mx-auto" v-if="discussion">
+    <breadcrumbs-nav
+      v-if="group"
+      :links="[
+        {
+          name: RouteName.MY_GROUPS,
+          text: $t('My groups'),
+        },
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.DISCUSSION_LIST,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Discussions'),
+        },
+        {
+          name: RouteName.DISCUSSION,
+          params: { id: discussion.id },
+          text: discussion.title,
+        },
+      ]"
+    />
+    <o-notification v-if="error" variant="danger">
+      {{ error }}
+    </o-notification>
+    <section v-if="currentActor">
+      <div class="flex items-center gap-2" dir="auto">
+        <h1 class="" v-if="discussion.title && !editTitleMode">
+          {{ discussion.title }}
+        </h1>
+        <o-button
+          icon-right="pencil"
+          size="small"
+          :title="$t('Update discussion title')"
+          v-if="
+            discussion.creator &&
+            !editTitleMode &&
+            (currentActor?.id === discussion.creator.id ||
+              isCurrentActorAGroupModerator)
+          "
+          @click="
+            () => {
+              newTitle = discussion?.title ?? '';
+              editTitleMode = true;
+            }
+          "
+        >
+        </o-button>
+        <o-skeleton
+          v-else-if="!editTitleMode && discussionLoading"
+          height="50px"
+          animated
+        />
+        <form
+          v-else-if="!discussionLoading && !error"
+          @submit.prevent="updateDiscussion"
+          class="w-full"
+        >
+          <o-field :label="$t('Title')" label-for="discussion-title">
+            <o-input
+              :value="discussion.title"
+              v-model="newTitle"
+              id="discussion-title"
+            />
+          </o-field>
+          <div class="flex gap-2 mt-2">
+            <o-button
+              variant="primary"
+              native-type="submit"
+              icon-right="check"
+              :title="$t('Update discussion title')"
+            />
+            <o-button
+              @click="
+                () => {
+                  editTitleMode = false;
+                  newTitle = '';
+                }
+              "
+              icon-right="close"
+              :title="$t('Cancel discussion title edition')"
+            />
+            <o-button
+              @click="openDeleteDiscussionConfirmation"
+              variant="danger"
+              native-type="button"
+              icon-left="delete"
+              >{{ $t("Delete conversation") }}</o-button
+            >
+          </div>
+        </form>
+      </div>
+      <discussion-comment
+        class="border rounded-md p-2 mt-4"
+        v-for="comment in discussion.comments.elements"
+        :key="comment.id"
+        :model-value="comment"
+        :current-actor="currentActor"
+        @update:modelValue="
+          (comment: IComment) =>
+            updateComment({
+              commentId: comment.id as string,
+              text: comment.text,
+            })
+        "
+        @delete-comment="(comment: IComment) => deleteComment({
+      commentId: comment.id as string,
+    })"
+      />
+      <o-button
+        v-if="discussion.comments.elements.length < discussion.comments.total"
+        @click="loadMoreComments"
+        >{{ $t("Fetch more") }}</o-button
+      >
+      <form @submit.prevent="reply" v-if="!error">
+        <o-field :label="$t('Text')">
+          <Editor
+            v-model="newComment"
+            :aria-label="$t('Comment body')"
+            v-if="currentActor"
+            :currentActor="currentActor"
+          />
+        </o-field>
+        <o-button
+          class="my-2"
+          native-type="submit"
+          :disabled="['<p></p>', ''].includes(newComment)"
+          variant="primary"
+          >{{ $t("Reply") }}</o-button
+        >
+      </form>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  GET_DISCUSSION,
+  REPLY_TO_DISCUSSION,
+  UPDATE_DISCUSSION,
+  DELETE_DISCUSSION,
+  DISCUSSION_COMMENT_CHANGED,
+} from "@/graphql/discussion";
+import { IDiscussion } from "@/types/discussions";
+import { displayName, IPerson, usernameWithDomain } from "@/types/actor";
+import DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
+import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
+import RouteName from "../../router/name";
+import { IComment } from "../../types/comment.model";
+import { ApolloCache, FetchResult, gql } from "@apollo/client/core";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import {
+  defineAsyncComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  computed,
+  inject,
+} from "vue";
+import { useHead } from "@vueuse/head";
+import { useRouter } from "vue-router";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { AbsintheGraphQLError } from "@/types/errors.model";
+import { useGroup } from "@/composition/apollo/group";
+import { MemberRole } from "@/types/enums";
+import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
+import { Dialog } from "@/plugins/dialog";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{ slug: string }>();
+
+const page = ref(1);
+const COMMENTS_PER_PAGE = 10;
+
+const { currentActor } = useCurrentActorClient();
+
+const {
+  result: discussionResult,
+  onError: onDiscussionError,
+  subscribeToMore,
+  fetchMore,
+  loading: discussionLoading,
+} = useQuery<{ discussion: IDiscussion }>(
+  GET_DISCUSSION,
+  () => ({
+    slug: props.slug,
+    page: page.value,
+    limit: COMMENTS_PER_PAGE,
+  }),
+  () => ({
+    enabled: props.slug !== undefined,
+  })
+);
+
+subscribeToMore({
+  document: DISCUSSION_COMMENT_CHANGED,
+  variables: {
+    slug: props.slug,
+    page: page.value,
+    limit: COMMENTS_PER_PAGE,
+  },
+  updateQuery(
+    previousResult: any,
+    { subscriptionData }: { subscriptionData: any }
+  ) {
+    const previousDiscussion = previousResult.discussion;
+    const lastComment =
+      subscriptionData.data.discussionCommentChanged.lastComment;
+    hasMoreComments.value = !previousDiscussion.comments.elements.some(
+      (comment: IComment) => comment.id === lastComment.id
+    );
+    if (hasMoreComments.value) {
+      return {
+        discussion: {
+          ...previousDiscussion,
+          lastComment: lastComment,
+          comments: {
+            elements: [
+              ...previousDiscussion.comments.elements.filter(
+                ({ id }: { id: string }) => id !== lastComment.id
+              ),
+              lastComment,
+            ],
+            total: previousDiscussion.comments.total + 1,
+          },
+        },
+      };
+    }
+
+    return previousDiscussion;
+  },
+});
+
+const discussion = computed(() => discussionResult.value?.discussion);
+
+const { group } = useGroup(usernameWithDomain(discussion.value?.actor));
+
+const Editor = defineAsyncComponent(
+  () => import("@/components/TextEditor.vue")
+);
+
+useHead({
+  title: computed(() => discussion.value?.title ?? ""),
+});
+
+const newComment = ref("");
+const newTitle = ref("");
+const editTitleMode = ref(false);
+const hasMoreComments = ref(true);
+const error = ref<string | null>(null);
+
+const { mutate: replyToDiscussionMutation } = useMutation(REPLY_TO_DISCUSSION);
+
+const reply = () => {
+  if (newComment.value === "") return;
+
+  replyToDiscussionMutation({
+    discussionId: discussion.value?.id,
+    text: newComment.value,
+  });
+
+  newComment.value = "";
+};
+
+const { mutate: updateComment } = useMutation<
+  { updateComment: IComment },
+  { commentId: string; text: string }
+>(UPDATE_COMMENT, () => ({
+  update: (
+    store: ApolloCache<{ deleteComment: IComment }>,
+    { data }: FetchResult
+  ) => {
+    if (!data || !data.deleteComment) return;
+    const discussionData = store.readQuery<{
+      discussion: IDiscussion;
+    }>({
+      query: GET_DISCUSSION,
+      variables: {
+        slug: props.slug,
+        page: page.value,
+      },
+    });
+    if (!discussionData) return;
+    const { discussion: discussionCached } = discussionData;
+    const index = discussionCached.comments.elements.findIndex(
+      ({ id }) => id === data.deleteComment.id
+    );
+    if (index > -1) {
+      discussionCached.comments.elements.splice(index, 1);
+      discussionCached.comments.total -= 1;
+    }
+    store.writeQuery({
+      query: GET_DISCUSSION,
+      variables: { slug: props.slug, page: page.value },
+      data: { discussion: discussionCached },
+    });
+  },
+}));
+
+const { mutate: deleteComment } = useMutation<
+  { deleteComment: { id: string } },
+  { commentId: string }
+>(DELETE_COMMENT, () => ({
+  update: (store: ApolloCache<{ deleteComment: IComment }>, { data }) => {
+    const id = data?.deleteComment?.id;
+    if (!id) return;
+    store.writeFragment({
+      id: `Comment:${id}`,
+      fragment: gql`
+        fragment CommentDeleted on Comment {
+          deletedAt
+          actor {
+            id
+          }
+          text
+        }
+      `,
+      data: {
+        deletedAt: new Date(),
+        text: "",
+        actor: null,
+      },
+    });
+  },
+}));
+
+const loadMoreComments = async (): Promise<void> => {
+  if (!hasMoreComments.value) return;
+  page.value++;
+  try {
+    await fetchMore({
+      // New variables
+      variables: {
+        slug: props.slug,
+        page: page.value,
+        limit: COMMENTS_PER_PAGE,
+      },
+    });
+    hasMoreComments.value = !discussion.value?.comments.elements
+      .map(({ id }) => id)
+      .includes(discussion.value?.lastComment?.id);
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const { mutate: updateDiscussionMutation } = useMutation<{
+  updateDiscussion: IDiscussion;
+}>(UPDATE_DISCUSSION);
+
+const updateDiscussion = async (): Promise<void> => {
+  updateDiscussionMutation({
+    discussionId: discussion.value?.id,
+    title: newTitle.value,
+  });
+
+  editTitleMode.value = false;
+};
+
+const { t } = useI18n({ useScope: "global" });
+const dialog = inject<Dialog>("dialog");
+
+const openDeleteDiscussionConfirmation = (): void => {
+  dialog?.confirm({
+    variant: "danger",
+    title: t("Delete this discussion"),
+    message: t("Are you sure you want to delete this entire discussion?"),
+    confirmText: t("Delete discussion"),
+    cancelText: t("Cancel"),
+    onConfirm: () =>
+      deleteConversation({
+        discussionId: discussion.value?.id,
+      }),
+  });
+};
+
+const router = useRouter();
+
+const { mutate: deleteConversation, onDone: deleteConversationDone } =
+  useMutation(DELETE_DISCUSSION);
+
+deleteConversationDone(() => {
+  if (discussion.value?.actor) {
+    router.push({
+      name: RouteName.DISCUSSION_LIST,
+      params: {
+        preferredUsername: usernameWithDomain(discussion.value.actor),
+      },
+    });
+  }
+});
+
+onDiscussionError((discussionError) =>
+  handleErrors(discussionError.graphQLErrors as AbsintheGraphQLError[])
+);
+
+const handleErrors = async (errors: AbsintheGraphQLError[]): Promise<void> => {
+  if (errors[0].message.includes("No such discussion")) {
+    await router.push({ name: RouteName.PAGE_NOT_FOUND });
+  }
+  if (errors[0].code === "unauthorized") {
+    error.value = errors[0].message;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+
+const handleScroll = (): void => {
+  const scrollTop =
+    (document.documentElement && document.documentElement.scrollTop) ||
+    document.body.scrollTop;
+  const scrollHeight =
+    (document.documentElement && document.documentElement.scrollHeight) ||
+    document.body.scrollHeight;
+  const clientHeight =
+    document.documentElement.clientHeight || window.innerHeight;
+  const scrolledToBottom =
+    Math.ceil(scrollTop + clientHeight + 800) >= scrollHeight;
+  if (scrolledToBottom) {
+    loadMoreComments();
+  }
+};
+
+const isCurrentActorAGroupModerator = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+  ]);
+});
+
+const { result: membershipsResult } = useQuery<{
+  person: Pick<IPerson, "memberships">;
+}>(
+  PERSON_MEMBERSHIPS,
+  () => ({ id: currentActor.value?.id }),
+  () => ({ enabled: currentActor.value?.id !== undefined })
+);
+const memberships = computed(() => membershipsResult.value?.person.memberships);
+
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole)
+    ? givenRole
+    : ([givenRole] as MemberRole[]);
+  return (
+    (memberships.value?.total ?? 0) > 0 &&
+    roles.includes(memberships.value?.elements[0].role as MemberRole)
+  );
+};
+</script>
diff --git a/js/src/views/Discussions/DiscussionsList.vue b/js/src/views/Discussions/DiscussionsList.vue
deleted file mode 100644
index c9e63677d..000000000
--- a/js/src/views/Discussions/DiscussionsList.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<template>
-  <div class="container section" v-if="group">
-    <breadcrumbs-nav
-      :links="[
-        {
-          name: RouteName.MY_GROUPS,
-          text: $t('My groups'),
-        },
-        {
-          name: RouteName.GROUP,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: displayName(group),
-        },
-        {
-          name: RouteName.DISCUSSION_LIST,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Discussions'),
-        },
-      ]"
-    />
-    <section v-if="isCurrentActorAGroupMember">
-      <p>
-        {{
-          $t(
-            "Keep the entire conversation about a specific topic together on a single page."
-          )
-        }}
-      </p>
-      <b-button
-        tag="router-link"
-        :to="{
-          name: RouteName.CREATE_DISCUSSION,
-          params: { preferredUsername },
-        }"
-        >{{ $t("New discussion") }}</b-button
-      >
-      <div v-if="group.discussions.elements.length > 0">
-        <discussion-list-item
-          :discussion="discussion"
-          v-for="discussion in group.discussions.elements"
-          :key="discussion.id"
-        />
-        <b-pagination
-          class="discussion-pagination"
-          :total="group.discussions.total"
-          v-model="page"
-          :per-page="DISCUSSIONS_PER_PAGE"
-          :aria-next-label="$t('Next page')"
-          :aria-previous-label="$t('Previous page')"
-          :aria-page-label="$t('Page')"
-          :aria-current-label="$t('Current page')"
-        >
-        </b-pagination>
-      </div>
-      <empty-content v-else icon="chat">
-        {{ $t("There's no discussions yet") }}
-      </empty-content>
-    </section>
-    <section class="section" v-else-if="!$apollo.loading">
-      <empty-content icon="chat">
-        {{ $t("Only group members can access discussions") }}
-        <template #desc>
-          <router-link
-            :to="{ name: RouteName.GROUP, params: { preferredUsername } }"
-          >
-            {{ $t("Return to the group page") }}
-          </router-link>
-        </template>
-      </empty-content>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { FETCH_GROUP } from "@/graphql/group";
-import {
-  displayName,
-  IActor,
-  IGroup,
-  IPerson,
-  usernameWithDomain,
-} from "@/types/actor";
-import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
-import RouteName from "../../router/name";
-import { MemberRole } from "@/types/enums";
-import {
-  CURRENT_ACTOR_CLIENT,
-  GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
-  PERSON_STATUS_GROUP,
-} from "@/graphql/actor";
-import { IMember } from "@/types/actor/member.model";
-import EmptyContent from "@/components/Utils/EmptyContent.vue";
-import VueRouter from "vue-router";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-const DISCUSSIONS_PER_PAGE = 10;
-
-@Component({
-  components: { DiscussionListItem, EmptyContent },
-  apollo: {
-    group: {
-      query: FETCH_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          name: this.preferredUsername,
-          discussionsPage: this.page,
-          discussionsLimit: DISCUSSIONS_PER_PAGE,
-        };
-      },
-      skip() {
-        return !this.preferredUsername;
-      },
-    },
-    person: {
-      query: PERSON_STATUS_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-          group: this.preferredUsername,
-        };
-      },
-      subscribeToMore: {
-        document: GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
-        variables() {
-          return {
-            actorId: this.currentActor.id,
-            group: this.preferredUsername,
-          };
-        },
-        skip() {
-          return (
-            !this.currentActor ||
-            !this.currentActor.id ||
-            !this.preferredUsername
-          );
-        },
-      },
-      skip() {
-        return (
-          !this.currentActor || !this.currentActor.id || !this.preferredUsername
-        );
-      },
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Discussions") as string,
-    };
-  },
-})
-export default class DiscussionsList extends Vue {
-  @Prop({ type: String, required: true }) preferredUsername!: string;
-
-  person!: IPerson;
-
-  group!: IGroup;
-
-  currentActor!: IActor;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-  displayName = displayName;
-
-  DISCUSSIONS_PER_PAGE = DISCUSSIONS_PER_PAGE;
-
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  set page(page: number) {
-    this.pushRouter(RouteName.DISCUSSION_LIST, {
-      page: page.toString(),
-    });
-  }
-
-  get groupMemberships(): (string | undefined)[] {
-    if (!this.person || !this.person.id) return [];
-    return this.person.memberships.elements
-      .filter(
-        (membership: IMember) =>
-          ![
-            MemberRole.REJECTED,
-            MemberRole.NOT_APPROVED,
-            MemberRole.INVITED,
-          ].includes(membership.role)
-      )
-      .map(({ parent: { id } }) => id);
-  }
-
-  get isCurrentActorAGroupMember(): boolean {
-    return (
-      this.groupMemberships !== undefined &&
-      this.groupMemberships.includes(this.group.id)
-    );
-  }
-
-  protected async pushRouter(
-    routeName: string,
-    args: Record<string, string>
-  ): Promise<void> {
-    try {
-      await this.$router.push({
-        name: routeName,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-div.container.section {
-  background: white;
-
-  .discussion-pagination {
-    margin-top: 1rem;
-  }
-}
-</style>
diff --git a/js/src/views/Discussions/DiscussionsListView.vue b/js/src/views/Discussions/DiscussionsListView.vue
new file mode 100644
index 000000000..ff85999da
--- /dev/null
+++ b/js/src/views/Discussions/DiscussionsListView.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="container mx-auto section" v-if="group">
+    <breadcrumbs-nav
+      :links="[
+        {
+          name: RouteName.MY_GROUPS,
+          text: $t('My groups'),
+        },
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.DISCUSSION_LIST,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Discussions'),
+        },
+      ]"
+    />
+    <section v-if="isCurrentActorAGroupMember">
+      <p>
+        {{
+          $t(
+            "Keep the entire conversation about a specific topic together on a single page."
+          )
+        }}
+      </p>
+      <o-button
+        tag="router-link"
+        :to="{
+          name: RouteName.CREATE_DISCUSSION,
+          params: { preferredUsername },
+        }"
+        >{{ $t("New discussion") }}</o-button
+      >
+      <div v-if="group.discussions.elements.length > 0">
+        <discussion-list-item
+          :discussion="discussion"
+          v-for="discussion in group.discussions.elements"
+          :key="discussion.id"
+        />
+        <o-pagination
+          v-show="group.discussions.total > DISCUSSIONS_PER_PAGE"
+          class="discussion-pagination"
+          :total="group.discussions.total"
+          v-model="page"
+          :per-page="DISCUSSIONS_PER_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>
+      <empty-content v-else icon="chat">
+        {{ $t("There's no discussions yet") }}
+      </empty-content>
+    </section>
+    <section class="section" v-else-if="!groupLoading && !personLoading">
+      <empty-content icon="chat">
+        {{ $t("Only group members can access discussions") }}
+        <template #desc>
+          <router-link
+            :to="{ name: RouteName.GROUP, params: { preferredUsername } }"
+          >
+            {{ $t("Return to the group page") }}
+          </router-link>
+        </template>
+      </empty-content>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import { displayName, usernameWithDomain } from "@/types/actor";
+import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
+import RouteName from "../../router/name";
+import { MemberRole } from "@/types/enums";
+
+import { IMember } from "@/types/actor/member.model";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import { useGroup } from "@/composition/apollo/group";
+import { usePersonStatusGroup } from "@/composition/apollo/actor";
+import { useI18n } from "vue-i18n";
+import { useRouteQuery, integerTransformer } from "vue-use-route-query";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
+
+const page = useRouteQuery("page", 1, integerTransformer);
+const DISCUSSIONS_PER_PAGE = 10;
+
+const props = defineProps<{ preferredUsername: string }>();
+
+const { group, loading: groupLoading } = useGroup(props.preferredUsername, {
+  discussionsPage: page.value,
+  discussionsLimit: DISCUSSIONS_PER_PAGE,
+});
+
+const { person, loading: personLoading } = usePersonStatusGroup(
+  props.preferredUsername
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Discussions")),
+});
+
+const groupMemberships = computed((): (string | undefined)[] => {
+  if (!person.value || !person.value.id) return [];
+  return person.value.memberships.elements
+    .filter(
+      (membership: IMember) =>
+        ![
+          MemberRole.REJECTED,
+          MemberRole.NOT_APPROVED,
+          MemberRole.INVITED,
+        ].includes(membership.role)
+    )
+    .map(({ parent: { id } }) => id);
+});
+
+const isCurrentActorAGroupMember = computed((): boolean => {
+  return (
+    groupMemberships.value !== undefined &&
+    groupMemberships.value.includes(group.value?.id)
+  );
+});
+</script>
diff --git a/js/src/views/Error.vue b/js/src/views/Error.vue
deleted file mode 100644
index fb69a23ab..000000000
--- a/js/src/views/Error.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <section class="container">
-    <span v-if="code === ErrorCode.REGISTRATION_CLOSED">
-      {{ $t("Registration is currently closed.") }}
-    </span>
-
-    <span v-else>
-      {{ $t("Unknown error.") }}
-    </span>
-  </section>
-</template>
-
-<script lang="ts">
-import { ErrorCode } from "@/types/enums";
-import { Component, Vue } from "vue-property-decorator";
-
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Error") as string,
-    };
-  },
-})
-export default class ErrorPage extends Vue {
-  code: ErrorCode | null = null;
-
-  ErrorCode = ErrorCode;
-
-  mounted(): void {
-    this.code = this.$route.query.code as ErrorCode;
-  }
-}
-</script>
diff --git a/js/src/views/ErrorView.vue b/js/src/views/ErrorView.vue
new file mode 100644
index 000000000..c741dd248
--- /dev/null
+++ b/js/src/views/ErrorView.vue
@@ -0,0 +1,27 @@
+<template>
+  <section class="container mx-auto">
+    <span v-if="code === ErrorCode.REGISTRATION_CLOSED">
+      {{ t("Registration is currently closed.") }}
+    </span>
+
+    <span v-else>
+      {{ t("Unknown error.") }}
+    </span>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { ErrorCode } from "@/types/enums";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { useRouteQuery } from "vue-use-route-query";
+import { computed } from "vue";
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Error")),
+});
+
+const code = useRouteQuery("code", null);
+</script>
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
deleted file mode 100644
index 2240edf27..000000000
--- a/js/src/views/Event/Edit.vue
+++ /dev/null
@@ -1,1370 +0,0 @@
-<template>
-  <section>
-    <div class="container" v-if="hasCurrentActorPermissionsToEdit">
-      <h1 class="title" v-if="isUpdate === true">
-        {{ $t("Update event {name}", { name: event.title }) }}
-      </h1>
-      <h1 class="title" v-else>
-        {{ $t("Create a new event") }}
-      </h1>
-
-      <form ref="form">
-        <subtitle>{{ $t("General information") }}</subtitle>
-        <picture-upload
-          v-model="pictureFile"
-          :textFallback="$t('Headline picture')"
-          :defaultImage="event.picture"
-        />
-
-        <b-field
-          :label="$t('Title')"
-          label-for="title"
-          :type="checkTitleLength[0]"
-          :message="checkTitleLength[1]"
-        >
-          <b-input
-            size="is-large"
-            aria-required="true"
-            required
-            v-model="event.title"
-            id="title"
-            dir="auto"
-          />
-        </b-field>
-
-        <div class="flex flex-wrap gap-4">
-          <b-field
-            v-if="config"
-            :label="$t('Category')"
-            label-for="category"
-            class="w-full md:max-w-fit"
-          >
-            <b-select
-              :placeholder="$t('Select a category')"
-              v-model="event.category"
-              expanded
-            >
-              <option
-                v-for="category in config.eventCategories"
-                :value="category.id"
-                :key="category.id"
-              >
-                {{ category.label }}
-              </option>
-            </b-select>
-          </b-field>
-          <tag-input v-model="event.tags" class="flex-1" />
-        </div>
-
-        <b-field
-          horizontal
-          :label="$t('Starts on…')"
-          class="begins-on-field"
-          label-for="begins-on-field"
-        >
-          <b-datetimepicker
-            class="datepicker starts-on"
-            :placeholder="$t('Type or select a date…')"
-            icon="calendar-today"
-            :locale="$i18n.locale"
-            v-model="beginsOn"
-            horizontal-time-picker
-            editable
-            :tz-offset="tzOffset(beginsOn)"
-            :first-day-of-week="firstDayOfWeek"
-            :datepicker="{
-              id: 'begins-on-field',
-              'aria-next-label': $t('Next month'),
-              'aria-previous-label': $t('Previous month'),
-            }"
-          >
-          </b-datetimepicker>
-        </b-field>
-
-        <b-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
-          <b-datetimepicker
-            class="datepicker ends-on"
-            :placeholder="$t('Type or select a date…')"
-            icon="calendar-today"
-            :locale="$i18n.locale"
-            v-model="endsOn"
-            horizontal-time-picker
-            :min-datetime="beginsOn"
-            :tz-offset="tzOffset(endsOn)"
-            editable
-            :first-day-of-week="firstDayOfWeek"
-            :datepicker="{
-              id: 'ends-on-field',
-              'aria-next-label': $t('Next month'),
-              'aria-previous-label': $t('Previous month'),
-            }"
-          >
-          </b-datetimepicker>
-        </b-field>
-
-        <b-button type="is-text" @click="dateSettingsIsOpen = true">
-          {{ $t("Date parameters") }}
-        </b-button>
-
-        <div class="address">
-          <full-address-auto-complete
-            v-model="eventPhysicalAddress"
-            :user-timezone="userActualTimezone"
-            :disabled="isOnline"
-          />
-          <b-switch class="is-online" v-model="isOnline">{{
-            $t("The event is fully online")
-          }}</b-switch>
-        </div>
-
-        <div class="field">
-          <label class="label">{{ $t("Description") }}</label>
-          <editor
-            v-model="event.description"
-            :aria-label="$t('Event description body')"
-          />
-        </div>
-
-        <b-field :label="$t('Website / URL')" label-for="website-url">
-          <b-input
-            icon="link"
-            type="url"
-            v-model="event.onlineAddress"
-            placeholder="URL"
-            id="website-url"
-          />
-        </b-field>
-
-        <subtitle>{{ $t("Organizers") }}</subtitle>
-
-        <div v-if="config && config.features.groups && organizerActor.id">
-          <b-field>
-            <organizer-picker-wrapper
-              v-model="organizerActor"
-              :contacts.sync="event.contacts"
-            />
-          </b-field>
-          <p v-if="!attributedToAGroup && organizerActorEqualToCurrentActor">
-            {{
-              $t("The event will show as attributed to your personal profile.")
-            }}
-          </p>
-          <p v-else-if="!attributedToAGroup">
-            {{ $t("The event will show as attributed to this profile.") }}
-          </p>
-          <p v-else>
-            <span>{{
-              $t("The event will show as attributed to this group.")
-            }}</span>
-            <span
-              v-if="event.contacts && event.contacts.length"
-              v-html="
-                ' ' +
-                $tc(
-                  '<b>{contact}</b> will be displayed as contact.',
-                  event.contacts.length,
-                  {
-                    contact: formatList(
-                      event.contacts.map((contact) =>
-                        displayNameAndUsername(contact)
-                      )
-                    ),
-                  }
-                )
-              "
-            />
-            <span v-else>
-              {{ $t("You may show some members as contacts.") }}
-            </span>
-          </p>
-        </div>
-        <subtitle>{{ $t("Event metadata") }}</subtitle>
-        <p>
-          {{
-            $t(
-              "Integrate this event with 3rd-party tools and show metadata for the event."
-            )
-          }}
-        </p>
-        <event-metadata-list v-model="event.metadata" />
-        <subtitle>{{ $t("Who can view this event and participate") }}</subtitle>
-        <fieldset>
-          <legend>
-            {{
-              $t(
-                "When the event is private, you'll need to share the link around."
-              )
-            }}
-          </legend>
-          <div class="field">
-            <b-radio
-              v-model="event.visibility"
-              name="eventVisibility"
-              :native-value="EventVisibility.PUBLIC"
-              >{{ $t("Visible everywhere on the web (public)") }}</b-radio
-            >
-          </div>
-          <div class="field">
-            <b-radio
-              v-model="event.visibility"
-              name="eventVisibility"
-              :native-value="EventVisibility.UNLISTED"
-              >{{ $t("Only accessible through link (private)") }}</b-radio
-            >
-          </div>
-        </fieldset>
-        <!-- <div class="field">
-          <b-radio v-model="event.visibility"
-                   name="eventVisibility"
-                   :native-value="EventVisibility.PRIVATE">
-             {{ $t('Page limited to my group (asks for auth)') }}
-          </b-radio>
-        </div>-->
-
-        <div
-          class="field"
-          v-if="config && config.anonymous.participation.allowed"
-        >
-          <label class="label">{{ $t("Anonymous participations") }}</label>
-          <b-switch v-model="eventOptions.anonymousParticipation">
-            {{
-              $t("I want to allow people to participate without an account.")
-            }}
-            <small
-              v-if="
-                config.anonymous.participation.validation.email
-                  .confirmationRequired
-              "
-            >
-              <br />
-              {{
-                $t(
-                  "Anonymous participants will be asked to confirm their participation through e-mail."
-                )
-              }}
-            </small>
-          </b-switch>
-        </div>
-
-        <div class="field">
-          <label class="label">{{ $t("Participation approval") }}</label>
-          <b-switch v-model="needsApproval">{{
-            $t("I want to approve every participation request")
-          }}</b-switch>
-        </div>
-
-        <div class="field">
-          <label class="label">{{ $t("Number of places") }}</label>
-          <b-switch v-model="limitedPlaces">{{
-            $t("Limited number of places")
-          }}</b-switch>
-        </div>
-
-        <div class="box" v-if="limitedPlaces">
-          <b-field :label="$t('Number of places')" label-for="number-of-places">
-            <b-numberinput
-              controls-position="compact"
-              :aria-minus-label="$t('Decrease')"
-              :aria-plus-label="$t('Increase')"
-              min="1"
-              v-model="eventOptions.maximumAttendeeCapacity"
-              id="number-of-places"
-            />
-          </b-field>
-          <!--
-          <b-field>
-            <b-switch v-model="eventOptions.showRemainingAttendeeCapacity">
-              {{ $t('Show remaining number of places') }}
-            </b-switch>
-          </b-field>
-
-          <b-field>
-            <b-switch v-model="eventOptions.showParticipationPrice">
-              {{ $t('Display participation price') }}
-            </b-switch>
-          </b-field>-->
-        </div>
-
-        <subtitle>{{ $t("Public comment moderation") }}</subtitle>
-
-        <fieldset>
-          <legend>{{ $t("Who can post a comment?") }}</legend>
-          <div class="field">
-            <b-radio
-              v-model="eventOptions.commentModeration"
-              name="commentModeration"
-              :native-value="CommentModeration.ALLOW_ALL"
-              >{{ $t("Allow all comments from users with accounts") }}</b-radio
-            >
-          </div>
-
-          <!--          <div class="field">-->
-          <!--            <b-radio v-model="eventOptions.commentModeration"-->
-          <!--                     name="commentModeration"-->
-          <!--                     :native-value="CommentModeration.MODERATED">-->
-          <!--              {{ $t('Moderated comments (shown after approval)') }}-->
-          <!--            </b-radio>-->
-          <!--          </div>-->
-
-          <div class="field">
-            <b-radio
-              v-model="eventOptions.commentModeration"
-              name="commentModeration"
-              :native-value="CommentModeration.CLOSED"
-              >{{ $t("Close comments for all (except for admins)") }}</b-radio
-            >
-          </div>
-        </fieldset>
-
-        <subtitle>{{ $t("Status") }}</subtitle>
-
-        <fieldset>
-          <legend>
-            {{
-              $t(
-                "Does the event needs to be confirmed later or is it cancelled?"
-              )
-            }}
-          </legend>
-          <b-field class="event__status__field">
-            <b-radio-button
-              v-model="event.status"
-              name="status"
-              type="is-warning"
-              :native-value="EventStatus.TENTATIVE"
-            >
-              <b-icon icon="calendar-question" />
-              {{ $t("Tentative: Will be confirmed later") }}
-            </b-radio-button>
-            <b-radio-button
-              v-model="event.status"
-              name="status"
-              type="is-success"
-              :native-value="EventStatus.CONFIRMED"
-            >
-              <b-icon icon="calendar-check" />
-              {{ $t("Confirmed: Will happen") }}
-            </b-radio-button>
-            <b-radio-button
-              v-model="event.status"
-              name="status"
-              type="is-danger"
-              :native-value="EventStatus.CANCELLED"
-            >
-              <b-icon icon="calendar-remove" />
-              {{ $t("Cancelled: Won't happen") }}
-            </b-radio-button>
-          </b-field>
-        </fieldset>
-      </form>
-    </div>
-    <div class="container section" v-else>
-      <b-message type="is-danger">
-        {{ $t("Only group moderators can create, edit and delete events.") }}
-      </b-message>
-    </div>
-    <b-modal
-      v-model="dateSettingsIsOpen"
-      has-modal-card
-      trap-focus
-      :close-button-aria-label="$t('Close')"
-    >
-      <form action>
-        <div class="modal-card" style="width: auto">
-          <header class="modal-card-head">
-            <h3 class="modal-card-title">{{ $t("Date and time settings") }}</h3>
-          </header>
-          <section class="modal-card-body">
-            <p>
-              {{
-                $t(
-                  "Event timezone will default to the timezone of the event's address if there is one, or to your own timezone setting."
-                )
-              }}
-            </p>
-            <b-field :label="$t('Timezone')" label-for="timezone" expanded>
-              <b-select
-                :placeholder="$t('Select a timezone')"
-                :loading="!config"
-                v-model="timezone"
-                id="timezone"
-              >
-                <optgroup
-                  :label="group"
-                  v-for="(groupTimezones, group) in timezones"
-                  :key="group"
-                >
-                  <option
-                    v-for="timezone in groupTimezones"
-                    :value="`${group}/${timezone}`"
-                    :key="timezone"
-                  >
-                    {{ sanitizeTimezone(timezone) }}
-                  </option>
-                </optgroup>
-              </b-select>
-              <b-button
-                :disabled="!timezone"
-                @click="timezone = null"
-                class="reset-area"
-                icon-left="close"
-                :title="$t('Clear timezone field')"
-              />
-            </b-field>
-            <b-field :label="$t('Event page settings')">
-              <b-switch v-model="eventOptions.showStartTime">{{
-                $t("Show the time when the event begins")
-              }}</b-switch>
-            </b-field>
-            <b-field>
-              <b-switch v-model="eventOptions.showEndTime">{{
-                $t("Show the time when the event ends")
-              }}</b-switch>
-            </b-field>
-          </section>
-          <footer class="modal-card-foot">
-            <button
-              class="button"
-              type="button"
-              @click="dateSettingsIsOpen = false"
-            >
-              {{ $t("OK") }}
-            </button>
-          </footer>
-        </div>
-      </form>
-    </b-modal>
-    <span ref="bottomObserver" />
-    <nav
-      role="navigation"
-      aria-label="main navigation"
-      class="navbar save__navbar"
-      :class="{ 'is-fixed-bottom': showFixedNavbar }"
-      v-if="hasCurrentActorPermissionsToEdit"
-    >
-      <div class="container">
-        <div class="navbar-menu">
-          <div class="navbar-start">
-            <span class="navbar-item" v-if="isEventModified">{{
-              $t("Unsaved changes")
-            }}</span>
-          </div>
-          <div class="navbar-end">
-            <span class="navbar-item">
-              <b-button type="is-text" @click="confirmGoBack">{{
-                $t("Cancel")
-              }}</b-button>
-            </span>
-            <!-- If an event has been published we can't make it draft anymore -->
-            <span class="navbar-item" v-if="event.draft === true">
-              <b-button
-                type="is-primary"
-                outlined
-                @click="createOrUpdateDraft"
-                :disabled="saving"
-                >{{ $t("Save draft") }}</b-button
-              >
-            </span>
-            <span class="navbar-item">
-              <b-button
-                type="is-primary"
-                :disabled="saving"
-                @click="createOrUpdatePublish"
-                @keyup.enter="createOrUpdatePublish"
-              >
-                <span v-if="isUpdate === false">{{
-                  $t("Create my event")
-                }}</span>
-                <span v-else-if="event.draft === true">{{
-                  $t("Publish")
-                }}</span>
-                <span v-else>{{ $t("Update my event") }}</span>
-              </b-button>
-            </span>
-          </div>
-        </div>
-      </div>
-    </nav>
-  </section>
-</template>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-main section > .container {
-  background: $white;
-
-  form {
-    h2 {
-      margin: 15px 0 7.5px;
-    }
-
-    legend {
-      margin-bottom: 0.75rem;
-    }
-  }
-}
-
-.save__navbar {
-  ::v-deep .navbar-menu,
-  .navbar-end {
-    flex-wrap: wrap;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .navbar.is-fixed-bottom {
-    position: initial;
-  }
-}
-
-h2.subtitle {
-  margin: 10px 0;
-
-  span {
-    padding: 5px 7px;
-    display: inline;
-    background: $secondary;
-  }
-}
-
-.event__status__field {
-  ::v-deep .field.has-addons {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-}
-
-.datepicker {
-  ::v-deep .dropdown-menu {
-    z-index: 200;
-  }
-}
-
-section {
-  & > .container {
-    padding: 2rem 1.5rem;
-    @media screen and (max-width: 768px) {
-      padding: 2rem 0.5rem;
-    }
-  }
-
-  .begins-on-field {
-    margin-top: 22px;
-  }
-
-  nav.navbar {
-    min-height: 2rem !important;
-    background: lighten($secondary, 10%);
-
-    .container {
-      min-height: 2rem;
-
-      .navbar-menu,
-      .navbar-end {
-        display: flex !important;
-        background: lighten($secondary, 10%);
-      }
-
-      .navbar-end {
-        justify-content: flex-end;
-        @include margin-left(auto);
-      }
-    }
-  }
-}
-
-.address {
-  ::v-deep .address-autocomplete {
-    margin-bottom: 0 !important;
-  }
-  .is-online {
-    margin-bottom: 10px;
-  }
-}
-</style>
-<style lang="scss">
-.dialog .modal-card {
-  max-width: 500px;
-
-  .modal-card-foot {
-    justify-content: center;
-    flex-wrap: wrap;
-
-    & > button {
-      margin-bottom: 5px;
-    }
-  }
-}
-</style>
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { getTimezoneOffset } from "date-fns-tz";
-import PictureUpload from "@/components/PictureUpload.vue";
-import EditorComponent from "@/components/Editor.vue";
-import TagInput from "@/components/Event/TagInput.vue";
-import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
-import EventMetadataList from "@/components/Event/EventMetadataList.vue";
-import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
-import Subtitle from "@/components/Utils/Subtitle.vue";
-import { RawLocation, Route } from "vue-router";
-import { formatList } from "@/utils/i18n";
-import {
-  ActorType,
-  CommentModeration,
-  EventJoinOptions,
-  EventStatus,
-  EventVisibility,
-  GroupVisibility,
-  MemberRole,
-  ParticipantRole,
-} from "@/types/enums";
-import OrganizerPickerWrapper from "../../components/Event/OrganizerPickerWrapper.vue";
-import {
-  CREATE_EVENT,
-  EDIT_EVENT,
-  EVENT_PERSON_PARTICIPATION,
-  FETCH_EVENT,
-} from "../../graphql/event";
-import {
-  EventModel,
-  IEditableEvent,
-  IEvent,
-  removeTypeName,
-  toEditJSON,
-} from "../../types/event.model";
-import {
-  CURRENT_ACTOR_CLIENT,
-  IDENTITIES,
-  LOGGED_USER_DRAFTS,
-  PERSON_STATUS_GROUP,
-} from "../../graphql/actor";
-import { FETCH_GROUP } from "../../graphql/group";
-import {
-  displayNameAndUsername,
-  IActor,
-  IGroup,
-  IPerson,
-  usernameWithDomain,
-} from "../../types/actor";
-import {
-  buildFileFromIMedia,
-  buildFileVariable,
-  readFileAsync,
-} from "../../utils/image";
-import RouteName from "../../router/name";
-import "intersection-observer";
-import { CONFIG_EDIT_EVENT } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
-import {
-  ApolloCache,
-  FetchResult,
-  InternalRefetchQueriesInclude,
-} from "@apollo/client/core";
-import cloneDeep from "lodash/cloneDeep";
-import { IEventOptions } from "@/types/event-options.model";
-import { USER_SETTINGS } from "@/graphql/user";
-import { IUser } from "@/types/current-user.model";
-import { IAddress } from "@/types/address.model";
-import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
-
-const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
-
-@Component({
-  components: {
-    OrganizerPickerWrapper,
-    Subtitle,
-    IdentityPickerWrapper,
-    FullAddressAutoComplete,
-    TagInput,
-    PictureUpload,
-    Editor: EditorComponent,
-    EventMetadataList,
-  },
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-    loggedUser: USER_SETTINGS,
-    config: CONFIG_EDIT_EVENT,
-    identities: IDENTITIES,
-    event: {
-      query: FETCH_EVENT,
-      variables() {
-        return {
-          uuid: this.eventId,
-        };
-      },
-      update(data) {
-        let event = data.event;
-        if (this.isDuplicate) {
-          event = { ...event, organizerActor: this.currentActor };
-        }
-        return new EventModel(event);
-      },
-      skip() {
-        return !this.eventId;
-      },
-    },
-    person: {
-      query: PERSON_STATUS_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-          group: usernameWithDomain(this.event?.attributedTo),
-        };
-      },
-      skip() {
-        return (
-          !this.event?.attributedTo ||
-          !this.event?.attributedTo?.preferredUsername
-        );
-      },
-    },
-    group: {
-      query: FETCH_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          name: this.event?.attributedTo?.preferredUsername,
-        };
-      },
-      skip() {
-        return (
-          !this.event?.attributedTo ||
-          !this.event?.attributedTo?.preferredUsername
-        );
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: (this.isUpdate
-        ? this.$t("Event edition")
-        : this.$t("Event creation")) as string,
-    };
-  },
-})
-export default class EditEvent extends Vue {
-  @Prop({ required: false, type: String }) eventId: undefined | string;
-
-  @Prop({ type: Boolean, default: false }) isUpdate!: boolean;
-
-  @Prop({ type: Boolean, default: false }) isDuplicate!: boolean;
-
-  group!: IGroup;
-
-  currentActor!: IActor;
-
-  loggedUser!: IUser;
-
-  event: IEditableEvent = new EventModel();
-
-  unmodifiedEvent: IEditableEvent = new EventModel();
-
-  identities: IActor[] = [];
-
-  person!: IPerson;
-
-  config!: IConfig;
-
-  pictureFile: File | null = null;
-
-  EventStatus = EventStatus;
-
-  EventVisibility = EventVisibility;
-
-  canPromote = true;
-
-  limitedPlaces = false;
-
-  CommentModeration = CommentModeration;
-
-  showFixedNavbar = true;
-
-  observer!: IntersectionObserver;
-
-  dateSettingsIsOpen = false;
-
-  saving = false;
-
-  displayNameAndUsername = displayNameAndUsername;
-
-  formatList = formatList;
-
-  @Watch("eventId", { immediate: true })
-  resetFormForCreation(eventId: string): void {
-    if (eventId === undefined) {
-      this.event = new EventModel();
-    }
-  }
-
-  @Watch("group")
-  updateEventVisibility(group: IGroup): void {
-    if (!this.isUpdate && group.visibility == GroupVisibility.UNLISTED) {
-      this.event.visibility = EventVisibility.UNLISTED;
-    }
-    if (!this.isUpdate && group.visibility == GroupVisibility.PUBLIC) {
-      this.event.visibility = EventVisibility.PUBLIC;
-    }
-  }
-
-  private initializeEvent() {
-    const roundUpTo15Minutes = (time: Date) => {
-      time.setMilliseconds(Math.round(time.getMilliseconds() / 1000) * 1000);
-      time.setSeconds(Math.round(time.getSeconds() / 60) * 60);
-      time.setMinutes(Math.round(time.getMinutes() / 15) * 15);
-      return time;
-    };
-
-    const now = roundUpTo15Minutes(new Date());
-    const end = new Date(now.valueOf());
-
-    end.setUTCHours(now.getUTCHours() + 3);
-
-    this.event.beginsOn = now;
-    this.event.endsOn = end;
-  }
-
-  get organizerActor(): IActor {
-    if (this.event?.attributedTo?.id) {
-      return this.event.attributedTo;
-    }
-    if (this.event?.organizerActor?.id) {
-      return this.event.organizerActor;
-    }
-    return this.currentActor;
-  }
-
-  set organizerActor(actor: IActor) {
-    if (actor?.type === ActorType.GROUP) {
-      this.event.attributedTo = actor as IGroup;
-      this.event.organizerActor = this.currentActor;
-    } else {
-      this.event.attributedTo = undefined;
-      this.event.organizerActor = actor;
-    }
-  }
-
-  get attributedToAGroup(): boolean {
-    return this.event.attributedTo?.id !== undefined;
-  }
-
-  get eventOptions(): IEventOptions {
-    return removeTypeName(cloneDeep(this.event.options));
-  }
-
-  set eventOptions(options: IEventOptions) {
-    this.event.options = options;
-  }
-
-  async mounted(): Promise<void> {
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        // eslint-disable-next-line no-restricted-syntax
-        for (const entry of entries) {
-          if (entry) {
-            this.showFixedNavbar = !entry.isIntersecting;
-          }
-        }
-      },
-      {
-        rootMargin: "-50px 0px -50px",
-      }
-    );
-    this.observer.observe(this.$refs.bottomObserver as Element);
-
-    this.pictureFile = await buildFileFromIMedia(this.event.picture);
-    this.limitedPlaces = this.eventOptions.maximumAttendeeCapacity > 0;
-    if (!(this.isUpdate || this.isDuplicate)) {
-      this.initializeEvent();
-    } else {
-      this.event = new EventModel({
-        ...this.event,
-        options: cloneDeep(this.event.options),
-        description: this.event.description || "",
-      });
-    }
-    this.unmodifiedEvent = cloneDeep(this.event);
-  }
-
-  createOrUpdateDraft(e: Event): void {
-    e.preventDefault();
-    if (this.validateForm()) {
-      if (this.eventId && !this.isDuplicate) {
-        this.updateEvent();
-      } else {
-        this.createEvent();
-      }
-    }
-  }
-
-  createOrUpdatePublish(e: Event): void {
-    e.preventDefault();
-    if (this.validateForm()) {
-      this.event.draft = false;
-      this.createOrUpdateDraft(e);
-    }
-  }
-
-  private validateForm() {
-    const form = this.$refs.form as HTMLFormElement;
-    if (form.checkValidity()) {
-      return true;
-    }
-    form.reportValidity();
-    return false;
-  }
-
-  async createEvent(): Promise<void> {
-    this.saving = true;
-    const variables = await this.buildVariables();
-
-    try {
-      const { data } = await this.$apollo.mutate<{ createEvent: IEvent }>({
-        mutation: CREATE_EVENT,
-        variables,
-        update: (
-          store: ApolloCache<{ createEvent: IEvent }>,
-          { data: updatedData }: FetchResult
-        ) => this.postCreateOrUpdate(store, updatedData?.createEvent),
-        refetchQueries: ({ data: updatedData }: FetchResult) =>
-          this.postRefetchQueries(updatedData?.createEvent),
-      });
-
-      this.$buefy.notification.open({
-        message: (this.event.draft
-          ? this.$i18n.t("The event has been created as a draft")
-          : this.$i18n.t("The event has been published")) as string,
-        type: "is-success",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-      if (data?.createEvent) {
-        await this.$router.push({
-          name: "Event",
-          params: { uuid: data.createEvent.uuid },
-        });
-      }
-    } catch (err) {
-      this.saving = false;
-      console.error(err);
-      this.handleError(err);
-    }
-  }
-
-  async updateEvent(): Promise<void> {
-    this.saving = true;
-    const variables = await this.buildVariables();
-
-    try {
-      await this.$apollo.mutate<{ updateEvent: IEvent }>({
-        mutation: EDIT_EVENT,
-        variables,
-        update: (
-          store: ApolloCache<{ updateEvent: IEvent }>,
-          { data: updatedData }: FetchResult
-        ) => this.postCreateOrUpdate(store, updatedData?.updateEvent),
-        refetchQueries: ({ data }: FetchResult) =>
-          this.postRefetchQueries(data?.updateEvent),
-      });
-
-      this.$buefy.notification.open({
-        message: this.updateEventMessage,
-        type: "is-success",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-      await this.$router.push({
-        name: "Event",
-        params: { uuid: this.eventId as string },
-      });
-    } catch (err) {
-      this.saving = false;
-      this.handleError(err);
-    }
-  }
-
-  get hasCurrentActorPermissionsToEdit(): boolean {
-    return !(
-      this.eventId &&
-      this.event.organizerActor?.id !== undefined &&
-      !this.identities
-        .map(({ id }) => id)
-        .includes(this.event.organizerActor?.id) &&
-      !this.hasGroupPrivileges
-    );
-  }
-
-  get hasGroupPrivileges(): boolean {
-    return (
-      this.person?.memberships?.total > 0 &&
-      [MemberRole.MODERATOR, MemberRole.ADMINISTRATOR].includes(
-        this.person?.memberships?.elements[0].role
-      )
-    );
-  }
-
-  get updateEventMessage(): string {
-    if (this.unmodifiedEvent.draft && !this.event.draft)
-      return this.$i18n.t("The event has been updated and published") as string;
-    return (
-      this.event.draft
-        ? this.$i18n.t("The draft event has been updated")
-        : this.$i18n.t("The event has been updated")
-    ) as string;
-  }
-
-  private handleError(err: any) {
-    console.error(err);
-
-    if (err.graphQLErrors !== undefined) {
-      err.graphQLErrors.forEach(({ message }: { message: string }) => {
-        this.$notifier.error(message);
-      });
-    }
-  }
-
-  /**
-   * Put in cache the updated or created event.
-   * If the event is not a draft anymore, also put in cache the participation
-   */
-  private postCreateOrUpdate(store: any, updateEvent: IEvent) {
-    const resultEvent: IEvent = { ...updateEvent };
-    console.debug("resultEvent", resultEvent);
-    if (!updateEvent.draft) {
-      store.writeQuery({
-        query: EVENT_PERSON_PARTICIPATION,
-        variables: {
-          eventId: resultEvent.id,
-          name: resultEvent.organizerActor?.preferredUsername,
-        },
-        data: {
-          person: {
-            __typename: "Person",
-            id: resultEvent?.organizerActor?.id,
-            participations: {
-              __typename: "PaginatedParticipantList",
-              total: 1,
-              elements: [
-                {
-                  __typename: "Participant",
-                  id: "unknown",
-                  role: ParticipantRole.CREATOR,
-                  actor: {
-                    __typename: "Actor",
-                    id: resultEvent?.organizerActor?.id,
-                  },
-                  event: {
-                    __typename: "Event",
-                    id: resultEvent.id,
-                  },
-                },
-              ],
-            },
-          },
-        },
-      });
-    }
-  }
-
-  /**
-   * Refresh drafts or participation cache depending if the event is still draft or not
-   */
-  // eslint-disable-next-line class-methods-use-this
-  private postRefetchQueries(
-    updateEvent: IEvent
-  ): InternalRefetchQueriesInclude {
-    if (updateEvent.draft) {
-      return [
-        {
-          query: LOGGED_USER_DRAFTS,
-        },
-      ];
-    }
-    return [
-      {
-        query: LOGGED_USER_PARTICIPATIONS,
-        variables: {
-          afterDateTime: new Date(),
-        },
-      },
-    ];
-  }
-
-  get organizerActorEqualToCurrentActor(): boolean {
-    return (
-      this.currentActor?.id !== undefined &&
-      this.organizerActor?.id === this.currentActor?.id
-    );
-  }
-
-  /**
-   * Build variables for Event GraphQL creation query
-   */
-  private async buildVariables() {
-    let res = {
-      ...toEditJSON(new EventModel(this.event)),
-      options: this.eventOptions,
-    };
-
-    const organizerActor = this.event.organizerActor?.id
-      ? this.event.organizerActor
-      : this.organizerActor;
-    if (organizerActor) {
-      res = { ...res, organizerActorId: organizerActor?.id };
-    }
-    const attributedToId = this.event.attributedTo?.id
-      ? this.event.attributedTo.id
-      : null;
-    res = { ...res, attributedToId };
-
-    if (this.pictureFile) {
-      const pictureObj = buildFileVariable(this.pictureFile, "picture");
-      res = { ...res, ...pictureObj };
-    }
-
-    try {
-      if (this.event.picture && this.pictureFile) {
-        const oldPictureFile = (await buildFileFromIMedia(
-          this.event.picture
-        )) as File;
-        const oldPictureFileContent = await readFileAsync(oldPictureFile);
-        const newPictureFileContent = await readFileAsync(
-          this.pictureFile as File
-        );
-        if (oldPictureFileContent === newPictureFileContent) {
-          res.picture = { mediaId: this.event.picture.id };
-        }
-      }
-    } catch (e) {
-      console.error(e);
-    }
-    return res;
-  }
-
-  @Watch("limitedPlaces")
-  updatedEventCapacityOptions(limitedPlaces: boolean): void {
-    if (!limitedPlaces) {
-      this.eventOptions.maximumAttendeeCapacity = 0;
-      this.eventOptions.remainingAttendeeCapacity = 0;
-      this.eventOptions.showRemainingAttendeeCapacity = false;
-    } else {
-      this.eventOptions.maximumAttendeeCapacity =
-        this.eventOptions.maximumAttendeeCapacity ||
-        DEFAULT_LIMIT_NUMBER_OF_PLACES;
-    }
-  }
-
-  get needsApproval(): boolean {
-    return this.event?.joinOptions == EventJoinOptions.RESTRICTED;
-  }
-
-  set needsApproval(value: boolean) {
-    if (value === true) {
-      this.event.joinOptions = EventJoinOptions.RESTRICTED;
-    } else {
-      this.event.joinOptions = EventJoinOptions.FREE;
-    }
-  }
-
-  get checkTitleLength(): Array<string | undefined> {
-    return this.event.title.length > 80
-      ? ["is-info", this.$t("The event title will be ellipsed.") as string]
-      : [undefined, undefined];
-  }
-
-  /**
-   * Confirm cancel
-   */
-  confirmGoElsewhere(): Promise<boolean> {
-    // TODO: Make calculation of changes work again and bring this back
-    // If the event wasn't modified, no need to warn
-    // if (!this.isEventModified) {
-    //   return Promise.resolve(true);
-    // }
-    const title: string = this.isUpdate
-      ? (this.$t("Cancel edition") as string)
-      : (this.$t("Cancel creation") as string);
-    const message: string = this.isUpdate
-      ? (this.$t(
-          "Are you sure you want to cancel the event edition? You'll lose all modifications.",
-          { title: this.event.title }
-        ) as string)
-      : (this.$t(
-          "Are you sure you want to cancel the event creation? You'll lose all modifications.",
-          { title: this.event.title }
-        ) as string);
-
-    return new Promise((resolve) => {
-      this.$buefy.dialog.confirm({
-        title,
-        message,
-        confirmText: this.$t("Abandon editing") as string,
-        cancelText: this.$t("Continue editing") as string,
-        type: "is-warning",
-        hasIcon: true,
-        onConfirm: () => resolve(true),
-        onCancel: () => resolve(false),
-      });
-    });
-  }
-
-  /**
-   * Confirm cancel
-   */
-  confirmGoBack(): void {
-    this.$router.go(-1);
-  }
-
-  // eslint-disable-next-line consistent-return
-  async beforeRouteLeave(
-    to: Route,
-    from: Route,
-    next: (to?: RawLocation | false | ((vm: any) => void)) => void
-  ): Promise<void> {
-    if (to.name === RouteName.EVENT) return next();
-    if (await this.confirmGoElsewhere()) {
-      return next();
-    }
-    return next(false);
-  }
-
-  get isEventModified(): boolean {
-    return (
-      this.event &&
-      this.unmodifiedEvent &&
-      JSON.stringify(toEditJSON(this.event)) !==
-        JSON.stringify(this.unmodifiedEvent)
-    );
-  }
-
-  get beginsOn(): Date | null {
-    // if (this.timezone && this.event.beginsOn) {
-    //   return utcToZonedTime(this.event.beginsOn, this.timezone);
-    // }
-    return this.event.beginsOn;
-  }
-
-  set beginsOn(beginsOn: Date | null) {
-    this.event.beginsOn = beginsOn;
-    if (!this.event.endsOn || !beginsOn) return;
-    const dateBeginsOn = new Date(beginsOn);
-    const dateEndsOn = new Date(this.event.endsOn);
-    if (dateEndsOn < dateBeginsOn) {
-      this.event.endsOn = dateBeginsOn;
-      this.event.endsOn.setHours(dateBeginsOn.getHours() + 1);
-    }
-    if (dateEndsOn === dateBeginsOn) {
-      this.event.endsOn.setHours(dateEndsOn.getHours() + 1);
-    }
-  }
-
-  get endsOn(): Date | null {
-    // if (this.event.endsOn && this.timezone) {
-    //   return utcToZonedTime(this.event.endsOn, this.timezone);
-    // }
-    return this.event.endsOn;
-  }
-
-  set endsOn(endsOn: Date | null) {
-    this.event.endsOn = endsOn;
-  }
-
-  get timezones(): Record<string, string[]> {
-    if (!this.config || !this.config.timezones) return {};
-    return this.config.timezones.reduce(
-      (acc: { [key: string]: Array<string> }, val: string) => {
-        const components = val.split("/");
-        const [prefix, suffix] = [
-          components.shift() as string,
-          components.join("/"),
-        ];
-        const pushOrCreate = (
-          acc2: { [key: string]: Array<string> },
-          prefix2: string,
-          suffix2: string
-        ) => {
-          // eslint-disable-next-line no-param-reassign
-          (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
-          return acc2;
-        };
-        if (suffix) {
-          return pushOrCreate(acc, prefix, suffix);
-        }
-        return pushOrCreate(acc, this.$t("Other") as string, prefix);
-      },
-      {}
-    );
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  sanitizeTimezone(timezone: string): string {
-    return timezone
-      .split("_")
-      .join(" ")
-      .replace("St ", "St. ")
-      .split("/")
-      .join(" - ");
-  }
-
-  get timezone(): string | null {
-    return this.event.options.timezone;
-  }
-
-  set timezone(timezone: string | null) {
-    this.event.options = {
-      ...this.event.options,
-      timezone,
-    };
-  }
-
-  get userTimezone(): string | undefined {
-    return this.loggedUser?.settings?.timezone;
-  }
-
-  get userActualTimezone(): string {
-    if (this.userTimezone) {
-      return this.userTimezone;
-    }
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  }
-
-  tzOffset(date: Date): number {
-    if (this.timezone && date) {
-      const eventUTCOffset = getTimezoneOffset(this.timezone, date);
-      const localUTCOffset = getTimezoneOffset(this.userActualTimezone, date);
-      return (eventUTCOffset - localUTCOffset) / (60 * 1000);
-    }
-    return 0;
-  }
-
-  get eventPhysicalAddress(): IAddress | null {
-    return this.event.physicalAddress;
-  }
-
-  set eventPhysicalAddress(address: IAddress | null) {
-    if (address && address.timezone) {
-      this.timezone = address.timezone;
-    }
-    this.event.physicalAddress = address;
-  }
-
-  get isOnline(): boolean {
-    return this.event.options.isOnline;
-  }
-
-  set isOnline(isOnline: boolean) {
-    this.event.options = {
-      ...this.event.options,
-      isOnline,
-    };
-  }
-
-  get firstDayOfWeek(): number {
-    return this.$dateFnsLocale?.options?.weekStartsOn || 0;
-  }
-}
-</script>
diff --git a/js/src/views/Event/EditView.vue b/js/src/views/Event/EditView.vue
new file mode 100644
index 000000000..dccac9f30
--- /dev/null
+++ b/js/src/views/Event/EditView.vue
@@ -0,0 +1,1408 @@
+<template>
+  <div class="container mx-auto" v-if="hasCurrentActorPermissionsToEdit">
+    <h1 class="" v-if="isUpdate === true">
+      {{ t("Update event {name}", { name: event.title }) }}
+    </h1>
+    <h1 class="" v-else>
+      {{ t("Create a new event") }}
+    </h1>
+
+    <form ref="form">
+      <h2>{{ t("General information") }}</h2>
+      <picture-upload
+        v-if="pictureFile"
+        v-model:modelValue="pictureFile"
+        :textFallback="t('Headline picture')"
+        :defaultImage="event.picture"
+      />
+
+      <o-field
+        :label="t('Title')"
+        label-for="title"
+        :type="checkTitleLength[0]"
+        :message="checkTitleLength[1]"
+      >
+        <o-input
+          size="large"
+          aria-required="true"
+          required
+          v-model="event.title"
+          id="title"
+          dir="auto"
+        />
+      </o-field>
+
+      <div class="flex flex-wrap gap-4">
+        <o-field
+          v-if="eventCategories"
+          :label="t('Category')"
+          label-for="category"
+          class="w-full md:max-w-fit"
+        >
+          <o-select
+            :placeholder="t('Select a category')"
+            v-model="event.category"
+            expanded
+          >
+            <option
+              v-for="category in eventCategories"
+              :value="category.id"
+              :key="category.id"
+            >
+              {{ category.label }}
+            </option>
+          </o-select>
+        </o-field>
+        <tag-input
+          v-model="event.tags"
+          class="flex-1"
+          :fetch-tags="fetchTags"
+        />
+      </div>
+
+      <o-field
+        horizontal
+        :label="t('Starts on…')"
+        class="begins-on-field"
+        label-for="begins-on-field"
+      >
+        <o-datetimepicker
+          class="datepicker starts-on"
+          :placeholder="t('Type or select a date…')"
+          icon="calendar-today"
+          :locale="$i18n.locale"
+          v-model="beginsOn"
+          horizontal-time-picker
+          editable
+          :tz-offset="tzOffset(beginsOn)"
+          :first-day-of-week="firstDayOfWeek"
+          :datepicker="{
+            id: 'begins-on-field',
+            'aria-next-label': t('Next month'),
+            'aria-previous-label': t('Previous month'),
+          }"
+        >
+        </o-datetimepicker>
+      </o-field>
+
+      <o-field horizontal :label="t('Ends on…')" label-for="ends-on-field">
+        <o-datetimepicker
+          class="datepicker ends-on"
+          :placeholder="t('Type or select a date…')"
+          icon="calendar-today"
+          :locale="$i18n.locale"
+          v-model="endsOn"
+          horizontal-time-picker
+          :min-datetime="beginsOn"
+          :tz-offset="tzOffset(endsOn)"
+          editable
+          :first-day-of-week="firstDayOfWeek"
+          :datepicker="{
+            id: 'ends-on-field',
+            'aria-next-label': t('Next month'),
+            'aria-previous-label': t('Previous month'),
+          }"
+        >
+        </o-datetimepicker>
+      </o-field>
+
+      <o-button class="block" variant="text" @click="dateSettingsIsOpen = true">
+        {{ t("Date parameters") }}
+      </o-button>
+
+      <div class="my-6">
+        <full-address-auto-complete
+          v-model="eventPhysicalAddress"
+          :user-timezone="userActualTimezone"
+          :disabled="event.options.isOnline"
+          :hideSelected="true"
+        />
+        <o-switch class="my-4" v-model="isOnline">{{
+          t("The event is fully online")
+        }}</o-switch>
+      </div>
+
+      <div class="o-field field">
+        <label class="o-field__label field-label">{{ t("Description") }}</label>
+        <editor-component
+          v-if="currentActor"
+          :current-actor="(currentActor as IPerson)"
+          v-model="event.description"
+          :aria-label="t('Event description body')"
+        />
+      </div>
+
+      <o-field :label="t('Website / URL')" label-for="website-url">
+        <o-input
+          icon="link"
+          type="url"
+          v-model="event.onlineAddress"
+          placeholder="URL"
+          id="website-url"
+        />
+      </o-field>
+
+      <section class="my-4">
+        <h2>{{ t("Organizers") }}</h2>
+
+        <div v-if="features?.groups && organizerActor?.id">
+          <o-field>
+            <organizer-picker-wrapper
+              v-model="organizerActor"
+              v-model:contacts="event.contacts"
+            />
+          </o-field>
+          <p v-if="!attributedToAGroup && organizerActorEqualToCurrentActor">
+            {{
+              t("The event will show as attributed to your personal profile.")
+            }}
+          </p>
+          <p v-else-if="!attributedToAGroup">
+            {{ t("The event will show as attributed to this profile.") }}
+          </p>
+          <p v-else>
+            <span>{{
+              t("The event will show as attributed to this group.")
+            }}</span>
+            <span
+              v-if="event.contacts && event.contacts.length"
+              v-html="
+                ' ' +
+                t(
+                  '<b>{contact}</b> will be displayed as contact.',
+
+                  {
+                    contact: formatList(
+                      event.contacts.map((contact) =>
+                        displayNameAndUsername(contact)
+                      )
+                    ),
+                  },
+                  event.contacts.length
+                )
+              "
+            />
+            <span v-else>
+              {{ t("You may show some members as contacts.") }}
+            </span>
+          </p>
+        </div>
+      </section>
+      <section class="my-4">
+        <h2>{{ t("Event metadata") }}</h2>
+        <p>
+          {{
+            t(
+              "Integrate this event with 3rd-party tools and show metadata for the event."
+            )
+          }}
+        </p>
+        <event-metadata-list v-model="event.metadata" />
+      </section>
+      <section class="my-4">
+        <h2>
+          {{ t("Who can view this event and participate") }}
+        </h2>
+        <fieldset>
+          <legend>
+            {{
+              t(
+                "When the event is private, you'll need to share the link around."
+              )
+            }}
+          </legend>
+          <div class="field">
+            <o-radio
+              v-model="event.visibility"
+              name="eventVisibility"
+              :native-value="EventVisibility.PUBLIC"
+              >{{ t("Visible everywhere on the web (public)") }}</o-radio
+            >
+          </div>
+          <div class="field">
+            <o-radio
+              v-model="event.visibility"
+              name="eventVisibility"
+              :native-value="EventVisibility.UNLISTED"
+              >{{ t("Only accessible through link (private)") }}</o-radio
+            >
+          </div>
+        </fieldset>
+        <!-- <div class="field">
+          <o-radio v-model="event.visibility"
+                   name="eventVisibility"
+                   :native-value="EventVisibility.PRIVATE">
+             {{ t('Page limited to my group (asks for auth)') }}
+          </o-radio>
+        </div>-->
+
+        <o-field
+          v-if="anonymousParticipationConfig?.allowed"
+          :label="t('Anonymous participations')"
+        >
+          <o-switch v-model="eventOptions.anonymousParticipation">
+            {{ t("I want to allow people to participate without an account.") }}
+            <small
+              v-if="
+                anonymousParticipationConfig?.validation.email
+                  .confirmationRequired
+              "
+            >
+              <br />
+              {{
+                t(
+                  "Anonymous participants will be asked to confirm their participation through e-mail."
+                )
+              }}
+            </small>
+          </o-switch>
+        </o-field>
+
+        <o-field :label="t('Participation approval')">
+          <o-switch v-model="needsApproval">{{
+            t("I want to approve every participation request")
+          }}</o-switch>
+        </o-field>
+
+        <o-field :label="t('Number of places')">
+          <o-switch v-model="limitedPlaces">{{
+            t("Limited number of places")
+          }}</o-switch>
+        </o-field>
+
+        <div class="" v-if="limitedPlaces">
+          <o-field :label="t('Number of places')" label-for="number-of-places">
+            <o-input
+              type="number"
+              controls-position="compact"
+              :aria-minus-label="t('Decrease')"
+              :aria-plus-label="t('Increase')"
+              min="1"
+              v-model="eventOptions.maximumAttendeeCapacity"
+              id="number-of-places"
+            />
+          </o-field>
+          <!--
+          <o-field>
+            <o-switch v-model="eventOptions.showRemainingAttendeeCapacity">
+              {{ t('Show remaining number of places') }}
+            </o-switch>
+          </o-field>
+
+          <o-field>
+            <o-switch v-model="eventOptions.showParticipationPrice">
+              {{ t('Display participation price') }}
+            </o-switch>
+          </o-field>-->
+        </div>
+      </section>
+      <section class="my-4">
+        <h2>{{ t("Public comment moderation") }}</h2>
+
+        <fieldset>
+          <legend>{{ t("Who can post a comment?") }}</legend>
+          <o-field>
+            <o-radio
+              v-model="eventOptions.commentModeration"
+              name="commentModeration"
+              :native-value="CommentModeration.ALLOW_ALL"
+              >{{ t("Allow all comments from users with accounts") }}</o-radio
+            >
+          </o-field>
+
+          <!--          <div class="field">-->
+          <!--            <o-radio v-model="eventOptions.commentModeration"-->
+          <!--                     name="commentModeration"-->
+          <!--                     :native-value="CommentModeration.MODERATED">-->
+          <!--              {{ t('Moderated comments (shown after approval)') }}-->
+          <!--            </o-radio>-->
+          <!--          </div>-->
+
+          <o-field>
+            <o-radio
+              v-model="eventOptions.commentModeration"
+              name="commentModeration"
+              :native-value="CommentModeration.CLOSED"
+              >{{ t("Close comments for all (except for admins)") }}</o-radio
+            >
+          </o-field>
+        </fieldset>
+      </section>
+      <section class="my-4">
+        <h2>{{ t("Status") }}</h2>
+
+        <fieldset>
+          <legend>
+            {{
+              t(
+                "Does the event needs to be confirmed later or is it cancelled?"
+              )
+            }}
+          </legend>
+          <o-field class="event__status__field">
+            <o-radio
+              v-model="event.status"
+              name="status"
+              variant="warning"
+              :native-value="EventStatus.TENTATIVE"
+            >
+              <o-icon icon="calendar-question" />
+              {{ t("Tentative: Will be confirmed later") }}
+            </o-radio>
+            <o-radio
+              v-model="event.status"
+              name="status"
+              variant="success"
+              :native-value="EventStatus.CONFIRMED"
+            >
+              <o-icon icon="calendar-check" />
+              {{ t("Confirmed: Will happen") }}
+            </o-radio>
+            <o-radio
+              v-model="event.status"
+              name="status"
+              variant="danger"
+              :native-value="EventStatus.CANCELLED"
+            >
+              <o-icon icon="calendar-remove" />
+              {{ t("Cancelled: Won't happen") }}
+            </o-radio>
+          </o-field>
+        </fieldset>
+      </section>
+    </form>
+  </div>
+  <div class="container mx-auto" v-else>
+    <o-notification variant="danger">
+      {{ t("Only group moderators can create, edit and delete events.") }}
+    </o-notification>
+  </div>
+  <o-modal
+    v-model:active="dateSettingsIsOpen"
+    has-modal-card
+    trap-focus
+    :close-button-aria-label="t('Close')"
+  >
+    <form class="p-3">
+      <header class="">
+        <h2 class="">{{ t("Date and time settings") }}</h2>
+      </header>
+      <section class="">
+        <p>
+          {{
+            t(
+              "Event timezone will default to the timezone of the event's address if there is one, or to your own timezone setting."
+            )
+          }}
+        </p>
+        <o-field :label="t('Timezone')" label-for="timezone" expanded>
+          <o-select
+            :placeholder="t('Select a timezone')"
+            :loading="timezoneLoading"
+            v-model="timezone"
+            id="timezone"
+          >
+            <optgroup
+              :label="group"
+              v-for="(groupTimezones, group) in timezones"
+              :key="group"
+            >
+              <option
+                v-for="timezone in groupTimezones"
+                :value="`${group}/${timezone}`"
+                :key="timezone"
+              >
+                {{ sanitizeTimezone(timezone) }}
+              </option>
+            </optgroup>
+          </o-select>
+          <o-button
+            :disabled="!timezone"
+            @click="timezone = null"
+            class="reset-area"
+            icon-left="close"
+            :title="t('Clear timezone field')"
+          />
+        </o-field>
+        <o-field :label="t('Event page settings')">
+          <o-switch v-model="eventOptions.showStartTime">{{
+            t("Show the time when the event begins")
+          }}</o-switch>
+        </o-field>
+        <o-field>
+          <o-switch v-model="eventOptions.showEndTime">{{
+            t("Show the time when the event ends")
+          }}</o-switch>
+        </o-field>
+      </section>
+      <footer class="mt-2">
+        <o-button @click="dateSettingsIsOpen = false">
+          {{ t("OK") }}
+        </o-button>
+      </footer>
+    </form>
+  </o-modal>
+  <span ref="bottomObserver" />
+  <nav
+    role="navigation"
+    aria-label="main navigation"
+    class="bg-mbz-yellow-alt-200 py-3"
+    :class="{ 'is-fixed-bottom': showFixedNavbar }"
+    v-if="hasCurrentActorPermissionsToEdit"
+  >
+    <div class="container mx-auto">
+      <div class="flex justify-between items-center">
+        <span class="dark:text-gray-900" v-if="isEventModified">
+          {{ t("Unsaved changes") }}
+        </span>
+        <div class="flex flex-wrap gap-3 items-center">
+          <o-button
+            variant="text"
+            @click="confirmGoBack"
+            class="dark:!text-black"
+            >{{ t("Cancel") }}</o-button
+          >
+          <!-- If an event has been published we can't make it draft anymore -->
+          <span class="" v-if="event.draft === true">
+            <o-button
+              variant="primary"
+              outlined
+              @click="createOrUpdateDraft"
+              :disabled="saving"
+              >{{ t("Save draft") }}</o-button
+            >
+          </span>
+          <span class="">
+            <o-button
+              variant="primary"
+              :disabled="saving"
+              @click="createOrUpdatePublish"
+              @keyup.enter="createOrUpdatePublish"
+            >
+              <span v-if="isUpdate === false">{{ t("Create my event") }}</span>
+              <span v-else-if="event.draft === true">{{ t("Publish") }}</span>
+              <span v-else>{{ t("Update my event") }}</span>
+            </o-button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+// @use "@/styles/_mixins" as *;
+// main section > .container {
+
+//   form {
+//     h2 {
+//       margin: 15px 0 7.5px;
+//     }
+
+//     legend {
+//       margin-bottom: 0.75rem;
+//     }
+//   }
+// }
+
+// .save__navbar {
+//   :deep(.navbar-menu),
+//   .navbar-end {
+//     flex-wrap: wrap;
+//   }
+// }
+
+// @media screen and (max-width: 768px) {
+//   .navbar.is-fixed-bottom {
+//     position: initial;
+//   }
+// }
+
+// h2.subtitle {
+//   margin: 10px 0;
+
+//   span {
+//     padding: 5px 7px;
+//     display: inline;
+//   }
+// }
+
+// .event__status__field {
+//   :deep(.field.has-addons) {
+//     display: flex;
+//     flex-wrap: wrap;
+//     justify-content: flex-start;
+//   }
+// }
+
+// .datepicker {
+//   :deep(.dropdown-menu) {
+//     z-index: 200;
+//   }
+// }
+
+// section {
+//   .begins-on-field {
+//     margin-top: 22px;
+//   }
+
+//   nav.navbar {
+//     min-height: 2rem !important;
+
+//     .container {
+//       min-height: 2rem;
+
+//       .navbar-menu,
+//       .navbar-end {
+//         display: flex !important;
+//       }
+
+//       .navbar-end {
+//         justify-content: flex-end;
+//         @include margin-left(auto);
+//       }
+//     }
+//   }
+// }
+
+// .address {
+//   :deep(.address-autocomplete) {
+//     margin-bottom: 0 !important;
+//   }
+//   .is-online {
+//     margin-bottom: 10px;
+//   }
+// }
+</style>
+<style lang="scss">
+// .dialog .modal-card {
+//   max-width: 500px;
+
+//   .modal-card-foot {
+//     justify-content: center;
+//     flex-wrap: wrap;
+
+//     & > button {
+//       margin-bottom: 5px;
+//     }
+//   }
+// }
+</style>
+
+<script lang="ts" setup>
+import { getTimezoneOffset } from "date-fns-tz";
+import PictureUpload from "@/components/PictureUpload.vue";
+import EditorComponent from "@/components/TextEditor.vue";
+import TagInput from "@/components/Event/TagInput.vue";
+import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
+import EventMetadataList from "@/components/Event/EventMetadataList.vue";
+import {
+  NavigationGuardNext,
+  onBeforeRouteLeave,
+  RouteLocationNormalized,
+  useRouter,
+} from "vue-router";
+import { formatList } from "@/utils/i18n";
+import {
+  ActorType,
+  CommentModeration,
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+  GroupVisibility,
+  MemberRole,
+  ParticipantRole,
+} from "@/types/enums";
+import OrganizerPickerWrapper from "@/components/Event/OrganizerPickerWrapper.vue";
+import {
+  CREATE_EVENT,
+  EDIT_EVENT,
+  EVENT_PERSON_PARTICIPATION,
+} from "@/graphql/event";
+import {
+  EventModel,
+  IEditableEvent,
+  IEvent,
+  removeTypeName,
+  toEditJSON,
+} from "@/types/event.model";
+import { LOGGED_USER_DRAFTS } from "@/graphql/actor";
+import {
+  IActor,
+  IGroup,
+  IPerson,
+  usernameWithDomain,
+  displayNameAndUsername,
+} from "@/types/actor";
+import {
+  buildFileFromIMedia,
+  buildFileVariable,
+  readFileAsync,
+} from "@/utils/image";
+import RouteName from "@/router/name";
+import "intersection-observer";
+import {
+  ApolloCache,
+  FetchResult,
+  InternalRefetchQueriesInclude,
+} from "@apollo/client/core";
+import cloneDeep from "lodash/cloneDeep";
+import { IEventOptions } from "@/types/event-options.model";
+import { IAddress } from "@/types/address.model";
+import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+  usePersonStatusGroup,
+} from "@/composition/apollo/actor";
+import { useUserSettings } from "@/composition/apollo/user";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { useFetchEvent } from "@/composition/apollo/event";
+import { useI18n } from "vue-i18n";
+import { useGroup } from "@/composition/apollo/group";
+import {
+  useAnonymousParticipationConfig,
+  useEventCategories,
+  useFeatures,
+  useTimezones,
+} from "@/composition/apollo/config";
+import { useMutation } from "@vue/apollo-composable";
+import { fetchTags } from "@/composition/apollo/tags";
+import { Dialog } from "@/plugins/dialog";
+import { Notifier } from "@/plugins/notifier";
+import { useHead } from "@vueuse/head";
+import { useProgrammatic } from "@oruga-ui/oruga-next";
+import type { Locale } from "date-fns";
+
+const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
+
+const { eventCategories } = useEventCategories();
+const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
+const { currentActor } = useCurrentActorClient();
+const { loggedUser } = useUserSettings();
+const { identities } = useCurrentUserIdentities();
+
+const { features } = useFeatures();
+
+// apollo: {
+//   config: CONFIG_EDIT_EVENT,
+//   event: {
+//     query: FETCH_EVENT,
+//     variables() {
+//       return {
+//         uuid: this.eventId,
+//       };
+//     },
+//     update(data) {
+//       let event = data.event;
+//       if (this.isDuplicate) {
+//         event = { ...event, organizerActor: this.currentActor };
+//       }
+//       return new EventModel(event);
+//     },
+//     skip() {
+//       return !this.eventId;
+//     },
+//   },
+//   person: {
+//     query: PERSON_STATUS_GROUP,
+//     fetchPolicy: "cache-and-network",
+//     variables() {
+//       return {
+//         id: this.currentActor.id,
+//         group: usernameWithDomain(this.event?.attributedTo),
+//       };
+//     },
+//     skip() {
+//       return (
+//         !this.event?.attributedTo ||
+//         !this.event?.attributedTo?.preferredUsername
+//       );
+//     },
+//   },
+//   group: {
+//     query: FETCH_GROUP,
+//     fetchPolicy: "cache-and-network",
+//     variables() {
+//       return {
+//         name: this.event?.attributedTo?.preferredUsername,
+//       };
+//     },
+//     skip() {
+//       return (
+//         !this.event?.attributedTo ||
+//         !this.event?.attributedTo?.preferredUsername
+//       );
+//     },
+//   },
+// },
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() =>
+    props.isUpdate ? t("Event edition") : t("Event creation")
+  ),
+});
+
+const props = withDefaults(
+  defineProps<{
+    eventId?: undefined | string;
+    isUpdate?: boolean;
+    isDuplicate?: boolean;
+  }>(),
+  { isUpdate: false, isDuplicate: false }
+);
+
+const eventId = computed(() => props.eventId);
+
+const event = ref<IEditableEvent>(new EventModel());
+const unmodifiedEvent = ref<IEditableEvent>(new EventModel());
+
+const pictureFile = ref<File | null>(null);
+
+// const canPromote = ref(true);
+const limitedPlaces = ref(false);
+const showFixedNavbar = ref(true);
+
+const observer = ref<IntersectionObserver | null>(null);
+const bottomObserver = ref<HTMLElement | null>(null);
+
+const dateSettingsIsOpen = ref(false);
+
+const saving = ref(false);
+
+const initializeEvent = () => {
+  const roundUpTo15Minutes = (time: Date) => {
+    time.setMilliseconds(Math.round(time.getMilliseconds() / 1000) * 1000);
+    time.setSeconds(Math.round(time.getSeconds() / 60) * 60);
+    time.setMinutes(Math.round(time.getMinutes() / 15) * 15);
+    return time;
+  };
+
+  const now = roundUpTo15Minutes(new Date());
+  const end = new Date(now.valueOf());
+
+  end.setUTCHours(now.getUTCHours() + 3);
+
+  event.value.beginsOn = now.toISOString();
+  event.value.endsOn = end.toISOString();
+};
+
+const organizerActor = computed({
+  get(): IActor | undefined {
+    if (event.value?.attributedTo?.id) {
+      return event.value.attributedTo;
+    }
+    if (event.value?.organizerActor?.id) {
+      return event.value.organizerActor;
+    }
+    return currentActor.value;
+  },
+  set(actor: IActor | undefined) {
+    if (actor?.type === ActorType.GROUP) {
+      event.value.attributedTo = actor as IGroup;
+      event.value.organizerActor = currentActor.value;
+    } else {
+      event.value.attributedTo = undefined;
+      event.value.organizerActor = actor;
+    }
+  },
+});
+
+const attributedToAGroup = computed((): boolean => {
+  return event.value.attributedTo?.id !== undefined;
+});
+
+const eventOptions = computed({
+  get(): IEventOptions {
+    return removeTypeName(cloneDeep(event.value.options));
+  },
+  set(options: IEventOptions) {
+    event.value.options = options;
+  },
+});
+
+onMounted(async () => {
+  observer.value = new IntersectionObserver(
+    (entries) => {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const entry of entries) {
+        if (entry) {
+          showFixedNavbar.value = !entry.isIntersecting;
+        }
+      }
+    },
+    {
+      rootMargin: "-50px 0px -50px",
+    }
+  );
+  if (bottomObserver.value) {
+    observer.value.observe(bottomObserver.value);
+  }
+
+  pictureFile.value = await buildFileFromIMedia(event.value.picture);
+  limitedPlaces.value = eventOptions.value.maximumAttendeeCapacity > 0;
+  if (!(props.isUpdate || props.isDuplicate)) {
+    initializeEvent();
+  } else {
+    event.value = new EventModel({
+      ...event.value,
+      options: cloneDeep(event.value.options),
+      description: event.value.description || "",
+    });
+  }
+  unmodifiedEvent.value = cloneDeep(event.value);
+});
+
+const createOrUpdateDraft = (e: Event): void => {
+  e.preventDefault();
+  if (validateForm()) {
+    if (eventId.value && !props.isDuplicate) {
+      updateEvent();
+    } else {
+      createEvent();
+    }
+  }
+};
+
+const createOrUpdatePublish = (e: Event): void => {
+  e.preventDefault();
+  if (validateForm()) {
+    event.value.draft = false;
+    createOrUpdateDraft(e);
+  }
+};
+
+const form = ref<HTMLFormElement | null>(null);
+
+const router = useRouter();
+
+const validateForm = () => {
+  if (!form.value) return;
+  if (form.value.checkValidity()) {
+    return true;
+  }
+  form.value.reportValidity();
+  return false;
+};
+
+const {
+  mutate: createEventMutation,
+  onDone: onCreateEventMutationDone,
+  onError: onCreateEventMutationError,
+} = useMutation<{ createEvent: IEvent }>(CREATE_EVENT, () => ({
+  update: (
+    store: ApolloCache<{ createEvent: IEvent }>,
+    { data: updatedData }: FetchResult
+  ) => postCreateOrUpdate(store, updatedData?.createEvent),
+  refetchQueries: ({ data: updatedData }: FetchResult) =>
+    postRefetchQueries(updatedData?.createEvent),
+}));
+
+const { oruga } = useProgrammatic();
+
+onCreateEventMutationDone(async ({ data }) => {
+  oruga.notification.open({
+    message: (event.value.draft
+      ? t("The event has been created as a draft")
+      : t("The event has been published")) as string,
+    variant: "success",
+    position: "bottom-right",
+    duration: 5000,
+  });
+  if (data?.createEvent) {
+    await router.push({
+      name: "Event",
+      params: { uuid: data.createEvent.uuid },
+    });
+  }
+});
+
+onCreateEventMutationError((err) => {
+  saving.value = false;
+  console.error(err);
+  handleError(err);
+});
+
+const createEvent = async (): Promise<void> => {
+  saving.value = true;
+  const variables = await buildVariables();
+
+  createEventMutation(variables);
+};
+
+const {
+  mutate: editEventMutation,
+  onDone: onEditEventMutationDone,
+  onError: onEditEventMutationError,
+} = useMutation(EDIT_EVENT, () => ({
+  update: (
+    store: ApolloCache<{ updateEvent: IEvent }>,
+    { data: updatedData }: FetchResult
+  ) => postCreateOrUpdate(store, updatedData?.updateEvent),
+  refetchQueries: ({ data }: FetchResult) =>
+    postRefetchQueries(data?.updateEvent),
+}));
+
+onEditEventMutationDone(() => {
+  oruga.notification.open({
+    message: updateEventMessage.value,
+    variant: "success",
+    position: "bottom-right",
+    duration: 5000,
+  });
+  return router.push({
+    name: "Event",
+    params: { uuid: props.eventId as string },
+  });
+});
+
+onEditEventMutationError((err) => {
+  saving.value = false;
+  handleError(err);
+});
+
+const updateEvent = async (): Promise<void> => {
+  saving.value = true;
+  const variables = await buildVariables();
+  console.debug("update event", variables);
+  editEventMutation(variables);
+};
+
+const hasCurrentActorPermissionsToEdit = computed((): boolean => {
+  return !(
+    props.eventId &&
+    event.value?.organizerActor?.id !== undefined &&
+    !identities.value
+      ?.map(({ id }) => id)
+      .includes(event.value?.organizerActor?.id) &&
+    !hasGroupPrivileges.value
+  );
+});
+
+const hasGroupPrivileges = computed((): boolean => {
+  return (
+    person.value?.memberships?.total !== undefined &&
+    person.value?.memberships?.total > 0 &&
+    [MemberRole.MODERATOR, MemberRole.ADMINISTRATOR].includes(
+      person.value?.memberships?.elements[0].role
+    )
+  );
+});
+
+const updateEventMessage = computed((): string => {
+  if (unmodifiedEvent.value.draft && !event.value.draft)
+    return t("The event has been updated and published") as string;
+  return (
+    event.value.draft
+      ? t("The draft event has been updated")
+      : t("The event has been updated")
+  ) as string;
+});
+
+const notifier = inject<Notifier>("notifier");
+
+const handleError = (err: any) => {
+  console.error(err);
+
+  if (err.graphQLErrors !== undefined) {
+    err.graphQLErrors.forEach(({ message }: { message: string }) => {
+      notifier?.error(message);
+    });
+  }
+};
+
+/**
+ * Put in cache the updated or created event.
+ * If the event is not a draft anymore, also put in cache the participation
+ */
+const postCreateOrUpdate = (store: any, updatedEvent: IEvent) => {
+  const resultEvent: IEvent = { ...updatedEvent };
+  if (!updatedEvent.draft) {
+    store.writeQuery({
+      query: EVENT_PERSON_PARTICIPATION,
+      variables: {
+        eventId: resultEvent.id,
+        name: resultEvent.organizerActor?.preferredUsername,
+      },
+      data: {
+        person: {
+          __typename: "Person",
+          id: resultEvent?.organizerActor?.id,
+          participations: {
+            __typename: "PaginatedParticipantList",
+            total: 1,
+            elements: [
+              {
+                __typename: "Participant",
+                id: "unknown",
+                role: ParticipantRole.CREATOR,
+                actor: {
+                  __typename: "Actor",
+                  id: resultEvent?.organizerActor?.id,
+                },
+                event: {
+                  __typename: "Event",
+                  id: resultEvent.id,
+                },
+              },
+            ],
+          },
+        },
+      },
+    });
+  }
+};
+
+/**
+ * Refresh drafts or participation cache depending if the event is still draft or not
+ */
+const postRefetchQueries = (
+  updatedEvent: IEvent
+): InternalRefetchQueriesInclude => {
+  if (updatedEvent.draft) {
+    return [
+      {
+        query: LOGGED_USER_DRAFTS,
+      },
+    ];
+  }
+  return [
+    {
+      query: LOGGED_USER_PARTICIPATIONS,
+      variables: {
+        afterDateTime: new Date(),
+      },
+    },
+  ];
+};
+
+const organizerActorEqualToCurrentActor = computed((): boolean => {
+  return (
+    currentActor.value?.id !== undefined &&
+    organizerActor.value?.id === currentActor.value?.id
+  );
+});
+
+/**
+ * Build variables for Event GraphQL creation query
+ */
+const buildVariables = async () => {
+  let res = {
+    ...toEditJSON(new EventModel(event.value)),
+    options: eventOptions.value,
+  };
+
+  const localOrganizerActor = event.value?.organizerActor?.id
+    ? event.value.organizerActor
+    : organizerActor.value;
+  if (organizerActor.value) {
+    res = { ...res, organizerActorId: localOrganizerActor?.id };
+  }
+  const attributedToId = event.value?.attributedTo?.id
+    ? event.value?.attributedTo.id
+    : null;
+  res = { ...res, attributedToId };
+
+  if (pictureFile.value) {
+    const pictureObj = buildFileVariable(pictureFile.value, "picture");
+    res = { ...res, ...pictureObj };
+  }
+
+  try {
+    if (event.value?.picture && pictureFile.value) {
+      const oldPictureFile = (await buildFileFromIMedia(
+        event.value?.picture
+      )) as File;
+      const oldPictureFileContent = await readFileAsync(oldPictureFile);
+      const newPictureFileContent = await readFileAsync(
+        pictureFile.value as File
+      );
+      if (oldPictureFileContent === newPictureFileContent) {
+        res.picture = { mediaId: event.value?.picture.id };
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  return res;
+};
+
+watch(limitedPlaces, () => {
+  if (!limitedPlaces.value) {
+    eventOptions.value.maximumAttendeeCapacity = 0;
+    eventOptions.value.remainingAttendeeCapacity = 0;
+    eventOptions.value.showRemainingAttendeeCapacity = false;
+  } else {
+    eventOptions.value.maximumAttendeeCapacity =
+      eventOptions.value.maximumAttendeeCapacity ||
+      DEFAULT_LIMIT_NUMBER_OF_PLACES;
+  }
+});
+
+const needsApproval = computed({
+  get(): boolean {
+    return event.value?.joinOptions == EventJoinOptions.RESTRICTED;
+  },
+  set(value: boolean) {
+    if (value === true) {
+      event.value.joinOptions = EventJoinOptions.RESTRICTED;
+    } else {
+      event.value.joinOptions = EventJoinOptions.FREE;
+    }
+  },
+});
+
+const checkTitleLength = computed((): Array<string | undefined> => {
+  return event.value.title.length > 80
+    ? ["info", t("The event title will be ellipsed.")]
+    : [undefined, undefined];
+});
+
+const dialog = inject<Dialog>("dialog");
+
+/**
+ * Confirm cancel
+ */
+const confirmGoElsewhere = (): Promise<boolean> => {
+  // TODO: Make calculation of changes work again and bring this back
+  // If the event wasn't modified, no need to warn
+  // if (!this.isEventModified) {
+  //   return Promise.resolve(true);
+  // }
+  const title: string = props.isUpdate
+    ? t("Cancel edition")
+    : t("Cancel creation");
+  const message: string = props.isUpdate
+    ? t(
+        "Are you sure you want to cancel the event edition? You'll lose all modifications.",
+        { title: event.value?.title }
+      )
+    : t(
+        "Are you sure you want to cancel the event creation? You'll lose all modifications.",
+        { title: event.value?.title }
+      );
+
+  return new Promise((resolve) => {
+    dialog?.confirm({
+      title,
+      message,
+      confirmText: t("Abandon editing") as string,
+      cancelText: t("Continue editing") as string,
+      variant: "warning",
+      hasIcon: true,
+      onConfirm: () => resolve(true),
+      onCancel: () => resolve(false),
+    });
+  });
+};
+
+/**
+ * Confirm cancel
+ */
+const confirmGoBack = (): void => {
+  router.go(-1);
+};
+
+onBeforeRouteLeave(
+  async (
+    to: RouteLocationNormalized,
+    from: RouteLocationNormalized,
+    next: NavigationGuardNext
+  ) => {
+    if (to.name === RouteName.EVENT) return next();
+    if (await confirmGoElsewhere()) {
+      return next();
+    }
+    return next(false);
+  }
+);
+
+const isEventModified = computed((): boolean => {
+  return (
+    event.value &&
+    unmodifiedEvent.value &&
+    JSON.stringify(toEditJSON(event.value)) !==
+      JSON.stringify(unmodifiedEvent.value)
+  );
+});
+
+const beginsOn = computed({
+  get(): Date | null {
+    // if (this.timezone && this.event.beginsOn) {
+    //   return utcToZonedTime(this.event.beginsOn, this.timezone);
+    // }
+    return event.value.beginsOn ? new Date(event.value.beginsOn) : null;
+  },
+  set(newBeginsOn: Date | null) {
+    event.value.beginsOn = newBeginsOn?.toISOString() ?? null;
+    if (!event.value.endsOn || !newBeginsOn) return;
+    const dateBeginsOn = new Date(newBeginsOn);
+    const dateEndsOn = new Date(event.value.endsOn);
+    let endsOn = new Date(event.value.endsOn);
+    if (dateEndsOn < dateBeginsOn) {
+      endsOn = dateBeginsOn;
+      endsOn.setHours(dateBeginsOn.getHours() + 1);
+    }
+    if (dateEndsOn === dateBeginsOn) {
+      endsOn.setHours(dateEndsOn.getHours() + 1);
+    }
+    event.value.endsOn = endsOn.toISOString();
+  },
+});
+
+const endsOn = computed({
+  get(): Date | null {
+    // if (this.event.endsOn && this.timezone) {
+    //   return utcToZonedTime(this.event.endsOn, this.timezone);
+    // }
+    return event.value.endsOn ? new Date(event.value.endsOn) : null;
+  },
+  set(newEndsOn: Date | null) {
+    event.value.endsOn = newEndsOn?.toISOString() ?? null;
+  },
+});
+
+const { timezones: rawTimezones, loading: timezoneLoading } = useTimezones();
+
+const timezones = computed((): Record<string, string[]> => {
+  return (rawTimezones.value || []).reduce(
+    (acc: { [key: string]: Array<string> }, val: string) => {
+      const components = val.split("/");
+      const [prefix, suffix] = [
+        components.shift() as string,
+        components.join("/"),
+      ];
+      const pushOrCreate = (
+        acc2: { [key: string]: Array<string> },
+        prefix2: string,
+        suffix2: string
+      ) => {
+        // eslint-disable-next-line no-param-reassign
+        (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
+        return acc2;
+      };
+      if (suffix) {
+        return pushOrCreate(acc, prefix, suffix);
+      }
+      return pushOrCreate(acc, t("Other") as string, prefix);
+    },
+    {}
+  );
+});
+
+// eslint-disable-next-line class-methods-use-this
+const sanitizeTimezone = (timezone: string): string => {
+  return timezone
+    .split("_")
+    .join(" ")
+    .replace("St ", "St. ")
+    .split("/")
+    .join(" - ");
+};
+
+const timezone = computed({
+  get(): string | null {
+    return event.value.options.timezone;
+  },
+  set(newTimezone: string | null) {
+    event.value.options = {
+      ...event.value.options,
+      timezone: newTimezone,
+    };
+  },
+});
+
+const userTimezone = computed((): string | undefined => {
+  return loggedUser.value?.settings?.timezone;
+});
+
+const userActualTimezone = computed((): string => {
+  if (userTimezone.value) {
+    return userTimezone.value;
+  }
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+});
+
+const tzOffset = (date: Date | null): number => {
+  if (timezone.value && date) {
+    const eventUTCOffset = getTimezoneOffset(timezone.value, date);
+    const localUTCOffset = getTimezoneOffset(userActualTimezone.value, date);
+    return (eventUTCOffset - localUTCOffset) / (60 * 1000);
+  }
+  return 0;
+};
+
+const eventPhysicalAddress = computed({
+  get(): IAddress | null {
+    return event.value.physicalAddress;
+  },
+  set(address: IAddress | null) {
+    if (address && address.timezone) {
+      timezone.value = address.timezone;
+    }
+    event.value.physicalAddress = address;
+  },
+});
+
+const isOnline = computed({
+  get(): boolean {
+    return event.value.options.isOnline;
+  },
+  set(newIsOnline: boolean) {
+    event.value.options = {
+      ...event.value.options,
+      isOnline: newIsOnline,
+    };
+  },
+});
+
+watch(isOnline, (newIsOnline) => {
+  if (newIsOnline === true) {
+    eventPhysicalAddress.value = null;
+  }
+});
+
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+
+const firstDayOfWeek = computed((): number => {
+  return dateFnsLocale?.options?.weekStartsOn || 0;
+});
+
+const { event: fetchedEvent, onResult: onFetchEventResult } = useFetchEvent(
+  eventId.value
+);
+
+watch(
+  fetchedEvent,
+  () => {
+    if (!fetchedEvent.value) return;
+    event.value = { ...fetchedEvent.value };
+  },
+  { immediate: true }
+);
+
+onFetchEventResult((result) => {
+  if (!result.loading && result.data?.event) {
+    event.value = { ...result.data?.event };
+  }
+});
+
+const groupFederatedUsername = computed(() =>
+  usernameWithDomain(fetchedEvent.value?.attributedTo)
+);
+
+const { person } = usePersonStatusGroup(groupFederatedUsername);
+
+const { group } = useGroup(groupFederatedUsername);
+
+watch(group, () => {
+  if (!props.isUpdate && group.value?.visibility == GroupVisibility.UNLISTED) {
+    event.value.visibility = EventVisibility.UNLISTED;
+  }
+  if (!props.isUpdate && group.value?.visibility == GroupVisibility.PUBLIC) {
+    event.value.visibility = EventVisibility.PUBLIC;
+  }
+});
+</script>
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
deleted file mode 100755
index ad5cfc7da..000000000
--- a/js/src/views/Event/Event.vue
+++ /dev/null
@@ -1,1392 +0,0 @@
-<template>
-  <div class="container">
-    <b-loading :active.sync="$apollo.queries.event.loading" />
-    <div class="wrapper">
-      <event-banner :picture="event.picture" />
-      <div class="intro-wrapper">
-        <div class="date-calendar-icon-wrapper">
-          <date-calendar-icon :date="event.beginsOn" />
-        </div>
-        <section class="intro" dir="auto">
-          <div class="columns">
-            <div class="column">
-              <h1
-                class="title"
-                style="margin: 0"
-                dir="auto"
-                :lang="event.language"
-              >
-                {{ event.title }}
-              </h1>
-              <div class="organizer">
-                <div v-if="event.organizerActor && !event.attributedTo">
-                  <popover-actor-card
-                    :actor="event.organizerActor"
-                    :inline="true"
-                  >
-                    <i18n
-                      path="By {username}"
-                      dir="auto"
-                      class="block truncate max-w-xs md:max-w-sm"
-                    >
-                      <span dir="ltr" slot="username">{{
-                        displayName(event.organizerActor)
-                      }}</span>
-                    </i18n>
-                  </popover-actor-card>
-                </div>
-                <span v-else-if="event.attributedTo">
-                  <popover-actor-card
-                    :actor="event.attributedTo"
-                    :inline="true"
-                  >
-                    <i18n
-                      path="By {group}"
-                      dir="auto"
-                      class="block truncate max-w-xs md:max-w-sm"
-                    >
-                      <router-link
-                        :to="{
-                          name: RouteName.GROUP,
-                          params: {
-                            preferredUsername: usernameWithDomain(
-                              event.attributedTo
-                            ),
-                          },
-                        }"
-                        dir="ltr"
-                        slot="group"
-                        >{{ displayName(event.attributedTo) }}</router-link
-                      >
-                    </i18n>
-                  </popover-actor-card>
-                </span>
-              </div>
-              <p class="tags" dir="auto">
-                <tag v-if="eventCategory" class="category">{{
-                  eventCategory
-                }}</tag>
-                <router-link
-                  v-for="tag in event.tags"
-                  :key="tag.title"
-                  :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
-                >
-                  <tag>{{ tag.title }}</tag>
-                </router-link>
-              </p>
-              <b-tag type="is-warning" size="is-medium" v-if="event.draft"
-                >{{ $t("Draft") }}
-              </b-tag>
-              <span
-                class="event-status"
-                v-if="event.status !== EventStatus.CONFIRMED"
-              >
-                <b-tag
-                  type="is-warning"
-                  v-if="event.status === EventStatus.TENTATIVE"
-                  >{{ $t("Event to be confirmed") }}</b-tag
-                >
-                <b-tag
-                  type="is-danger"
-                  v-if="event.status === EventStatus.CANCELLED"
-                  >{{ $t("Event cancelled") }}</b-tag
-                >
-              </span>
-            </div>
-            <div class="column is-3-tablet">
-              <participation-section
-                :participation="participations[0]"
-                :event="event"
-                :anonymousParticipation="anonymousParticipation"
-                @join-event="joinEvent"
-                @join-modal="isJoinModalActive = true"
-                @join-event-with-confirmation="joinEventWithConfirmation"
-                @confirm-leave="confirmLeave"
-                @cancel-anonymous-participation="cancelAnonymousParticipation"
-              />
-              <div class="has-text-right">
-                <template v-if="!event.draft">
-                  <p v-if="event.visibility === EventVisibility.PUBLIC">
-                    {{ $t("Public event") }}
-                    <b-icon icon="earth" />
-                  </p>
-                  <p v-if="event.visibility === EventVisibility.UNLISTED">
-                    {{ $t("Private event") }}
-                    <b-icon icon="link" />
-                  </p>
-                </template>
-                <template v-if="!event.local && organizer.domain">
-                  <a :href="event.url">
-                    <tag>{{ organizer.domain }}</tag>
-                  </a>
-                </template>
-                <p>
-                  <router-link
-                    class="participations-link"
-                    v-if="canManageEvent && event.draft === false"
-                    :to="{
-                      name: RouteName.PARTICIPATIONS,
-                      params: { eventId: event.uuid },
-                    }"
-                  >
-                    <!-- We retire one because of the event creator who is a participant -->
-                    <span v-if="maximumAttendeeCapacity">
-                      {{
-                        $tc(
-                          "{available}/{capacity} available places",
-                          maximumAttendeeCapacity -
-                            event.participantStats.participant,
-                          {
-                            available:
-                              maximumAttendeeCapacity -
-                              event.participantStats.participant,
-                            capacity: maximumAttendeeCapacity,
-                          }
-                        )
-                      }}
-                    </span>
-                    <span v-else>
-                      {{
-                        $tc(
-                          "No one is participating|One person participating|{going} people participating",
-                          event.participantStats.participant,
-                          {
-                            going: event.participantStats.participant,
-                          }
-                        )
-                      }}
-                    </span>
-                  </router-link>
-                  <span v-else>
-                    <span v-if="maximumAttendeeCapacity">
-                      {{
-                        $tc(
-                          "{available}/{capacity} available places",
-                          maximumAttendeeCapacity -
-                            event.participantStats.participant,
-                          {
-                            available:
-                              maximumAttendeeCapacity -
-                              event.participantStats.participant,
-                            capacity: maximumAttendeeCapacity,
-                          }
-                        )
-                      }}
-                    </span>
-                    <span v-else>
-                      {{
-                        $tc(
-                          "No one is participating|One person participating|{going} people participating",
-                          event.participantStats.participant,
-                          {
-                            going: event.participantStats.participant,
-                          }
-                        )
-                      }}
-                    </span>
-                  </span>
-                  <b-tooltip
-                    type="is-dark"
-                    v-if="!event.local"
-                    :label="
-                      $t(
-                        'The actual number of participants may differ, as this event is hosted on another instance.'
-                      )
-                    "
-                  >
-                    <b-icon size="is-small" icon="help-circle-outline" />
-                  </b-tooltip>
-                  <b-icon icon="ticket-confirmation-outline" />
-                </p>
-                <b-dropdown position="is-bottom-left" aria-role="list">
-                  <b-button
-                    slot="trigger"
-                    role="button"
-                    icon-right="dots-horizontal"
-                  >
-                    {{ $t("Actions") }}
-                  </b-button>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    has-link
-                    v-if="canManageEvent || event.draft"
-                  >
-                    <router-link
-                      :to="{
-                        name: RouteName.EDIT_EVENT,
-                        params: { eventId: event.uuid },
-                      }"
-                    >
-                      {{ $t("Edit") }}
-                      <b-icon icon="pencil" />
-                    </router-link>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    has-link
-                    v-if="canManageEvent || event.draft"
-                  >
-                    <router-link
-                      :to="{
-                        name: RouteName.DUPLICATE_EVENT,
-                        params: { eventId: event.uuid },
-                      }"
-                    >
-                      {{ $t("Duplicate") }}
-                      <b-icon icon="content-duplicate" />
-                    </router-link>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    v-if="canManageEvent || event.draft"
-                    @click="openDeleteEventModalWrapper"
-                    @keyup.enter="openDeleteEventModalWrapper"
-                  >
-                    {{ $t("Delete") }}
-                    <b-icon icon="delete" />
-                  </b-dropdown-item>
-
-                  <hr
-                    role="presentation"
-                    class="dropdown-divider"
-                    aria-role="menuitem"
-                    v-if="canManageEvent || event.draft"
-                  />
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    v-if="!event.draft"
-                    @click="triggerShare()"
-                    @keyup.enter="triggerShare()"
-                  >
-                    <span>
-                      {{ $t("Share this event") }}
-                      <b-icon icon="share" />
-                    </span>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    @click="downloadIcsEvent()"
-                    @keyup.enter="downloadIcsEvent()"
-                    v-if="!event.draft"
-                  >
-                    <span>
-                      {{ $t("Add to my calendar") }}
-                      <b-icon icon="calendar-plus" />
-                    </span>
-                  </b-dropdown-item>
-                  <b-dropdown-item
-                    aria-role="listitem"
-                    v-if="ableToReport"
-                    @click="isReportModalActive = true"
-                    @keyup.enter="isReportModalActive = true"
-                  >
-                    <span>
-                      {{ $t("Report") }}
-                      <b-icon icon="flag" />
-                    </span>
-                  </b-dropdown-item>
-                </b-dropdown>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-      <div class="event-description-wrapper">
-        <aside class="event-metadata">
-          <div class="sticky">
-            <event-metadata-sidebar
-              v-if="event && config"
-              :event="event"
-              :config="config"
-              :user="loggedUser"
-              @showMapModal="showMap = true"
-            />
-          </div>
-        </aside>
-        <div class="event-description-comments">
-          <section class="event-description">
-            <subtitle>{{ $t("About this event") }}</subtitle>
-            <p v-if="!event.description">
-              {{ $t("The event organizer didn't add any description.") }}
-            </p>
-            <div v-else>
-              <div
-                :lang="event.language"
-                dir="auto"
-                class="description-content"
-                ref="eventDescriptionElement"
-                v-html="event.description"
-              />
-            </div>
-          </section>
-          <section class="integration-wrappers">
-            <component
-              v-for="(metadata, integration) in integrations"
-              :is="integration"
-              :key="integration"
-              :metadata="metadata"
-            />
-          </section>
-          <section class="comments" ref="commentsObserver">
-            <a href="#comments">
-              <subtitle id="comments">{{ $t("Comments") }}</subtitle>
-            </a>
-            <comment-tree v-if="loadComments" :event="event" />
-          </section>
-        </div>
-      </div>
-      <section
-        class="more-events section"
-        v-if="event.relatedEvents.length > 0"
-      >
-        <h3 class="title has-text-centered">
-          {{ $t("These events may interest you") }}
-        </h3>
-        <multi-card :events="event.relatedEvents" />
-      </section>
-      <b-modal
-        :active.sync="isReportModalActive"
-        has-modal-card
-        ref="reportModal"
-        :close-button-aria-label="$t('Close')"
-      >
-        <report-modal
-          :on-confirm="reportEvent"
-          :title="$t('Report this event')"
-          :outside-domain="organizerDomain"
-          @close="$refs.reportModal.close()"
-        />
-      </b-modal>
-      <b-modal
-        :close-button-aria-label="$t('Close')"
-        :active.sync="isShareModalActive"
-        has-modal-card
-        ref="shareModal"
-      >
-        <share-event-modal :event="event" :eventCapacityOK="eventCapacityOK" />
-      </b-modal>
-      <b-modal
-        :active.sync="isJoinModalActive"
-        has-modal-card
-        ref="participationModal"
-        :close-button-aria-label="$t('Close')"
-      >
-        <identity-picker v-model="identity">
-          <template v-slot:footer>
-            <footer class="modal-card-foot">
-              <button
-                class="button"
-                ref="cancelButton"
-                @click="isJoinModalActive = false"
-                @keyup.enter="isJoinModalActive = false"
-              >
-                {{ $t("Cancel") }}
-              </button>
-              <button
-                class="button is-primary"
-                ref="confirmButton"
-                @click="
-                  event.joinOptions === EventJoinOptions.RESTRICTED
-                    ? joinEventWithConfirmation(identity)
-                    : joinEvent(identity)
-                "
-                @keyup.enter="
-                  event.joinOptions === EventJoinOptions.RESTRICTED
-                    ? joinEventWithConfirmation(identity)
-                    : joinEvent(identity)
-                "
-              >
-                {{ $t("Confirm my particpation") }}
-              </button>
-            </footer>
-          </template>
-        </identity-picker>
-      </b-modal>
-      <b-modal
-        :active.sync="isJoinConfirmationModalActive"
-        has-modal-card
-        ref="joinConfirmationModal"
-        :close-button-aria-label="$t('Close')"
-      >
-        <div class="modal-card">
-          <header class="modal-card-head">
-            <p class="modal-card-title">
-              {{ $t("Participation confirmation") }}
-            </p>
-          </header>
-
-          <section class="modal-card-body">
-            <p>
-              {{
-                $t(
-                  "The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?"
-                )
-              }}
-            </p>
-            <form
-              @submit.prevent="
-                joinEvent(actorForConfirmation, messageForConfirmation)
-              "
-            >
-              <b-field :label="$t('Message')">
-                <b-input
-                  type="textarea"
-                  size="is-medium"
-                  v-model="messageForConfirmation"
-                  minlength="10"
-                ></b-input>
-              </b-field>
-              <div class="buttons">
-                <b-button
-                  native-type="button"
-                  class="button"
-                  ref="cancelButton"
-                  @click="isJoinConfirmationModalActive = false"
-                  @keyup.enter="isJoinConfirmationModalActive = false"
-                  >{{ $t("Cancel") }}
-                </b-button>
-                <b-button type="is-primary" native-type="submit">
-                  {{ $t("Confirm my participation") }}
-                </b-button>
-              </div>
-            </form>
-          </section>
-        </div>
-      </b-modal>
-      <b-modal
-        :close-button-aria-label="$t('Close')"
-        class="map-modal"
-        v-if="event.physicalAddress && event.physicalAddress.geom"
-        :active.sync="showMap"
-        has-modal-card
-        full-screen
-        :can-cancel="['escape', 'outside']"
-      >
-        <template #default="props">
-          <event-map
-            :routingType="routingType"
-            :address="event.physicalAddress"
-            @close="props.close"
-          />
-        </template>
-      </b-modal>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Watch } from "vue-property-decorator";
-import BIcon from "buefy/src/components/icon/Icon.vue";
-import {
-  EventJoinOptions,
-  EventStatus,
-  EventVisibility,
-  MemberRole,
-  ParticipantRole,
-} from "@/types/enums";
-import {
-  EVENT_PERSON_PARTICIPATION,
-  EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
-  FETCH_EVENT,
-  JOIN_EVENT,
-} from "../../graphql/event";
-import { CURRENT_ACTOR_CLIENT, PERSON_STATUS_GROUP } from "../../graphql/actor";
-import { EventModel, IEvent } from "../../types/event.model";
-import {
-  displayName,
-  IActor,
-  IPerson,
-  Person,
-  usernameWithDomain,
-} from "../../types/actor";
-import { GRAPHQL_API_ENDPOINT } from "../../api/_entrypoint";
-import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue";
-import MultiCard from "../../components/Event/MultiCard.vue";
-import ReportModal from "../../components/Report/ReportModal.vue";
-import { IReport } from "../../types/report.model";
-import { CREATE_REPORT } from "../../graphql/report";
-import EventMixin from "../../mixins/event";
-import IdentityPicker from "../Account/IdentityPicker.vue";
-import ParticipationSection from "../../components/Participation/ParticipationSection.vue";
-import RouteName from "../../router/name";
-import CommentTree from "../../components/Comment/CommentTree.vue";
-import "intersection-observer";
-import { CONFIG } from "../../graphql/config";
-import {
-  AnonymousParticipationNotFoundError,
-  getLeaveTokenForParticipation,
-  isParticipatingInThisEvent,
-  removeAnonymousParticipation,
-} from "../../services/AnonymousParticipationStorage";
-import { IConfig } from "../../types/config.model";
-import Subtitle from "../../components/Utils/Subtitle.vue";
-import Tag from "../../components/Tag.vue";
-import EventMetadataSidebar from "../../components/Event/EventMetadataSidebar.vue";
-import EventBanner from "../../components/Event/EventBanner.vue";
-import EventMap from "../../components/Event/EventMap.vue";
-import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
-import { IParticipant } from "../../types/participant.model";
-import { ApolloCache, FetchResult } from "@apollo/client/core";
-import { IEventMetadataDescription } from "@/types/event-metadata";
-import { eventMetaDataList } from "../../services/EventMetadata";
-import { USER_SETTINGS } from "@/graphql/user";
-import { IUser } from "@/types/current-user.model";
-
-// noinspection TypeScriptValidateTypes
-@Component({
-  components: {
-    Subtitle,
-    MultiCard,
-    BIcon,
-    DateCalendarIcon,
-    ReportModal,
-    IdentityPicker,
-    ParticipationSection,
-    CommentTree,
-    Tag,
-    PopoverActorCard,
-    EventBanner,
-    EventMetadataSidebar,
-    EventMap,
-    ShareEventModal: () =>
-      import(
-        /* webpackChunkName: "shareEventModal" */ "../../components/Event/ShareEventModal.vue"
-      ),
-    "integration-twitch": () =>
-      import(
-        /* webpackChunkName: "twitchIntegration" */ "../../components/Event/Integrations/Twitch.vue"
-      ),
-    "integration-peertube": () =>
-      import(
-        /* webpackChunkName: "PeerTubeIntegration" */ "../../components/Event/Integrations/PeerTube.vue"
-      ),
-    "integration-youtube": () =>
-      import(
-        /* webpackChunkName: "YouTubeIntegration" */ "../../components/Event/Integrations/YouTube.vue"
-      ),
-    "integration-jitsi-meet": () =>
-      import(
-        /* webpackChunkName: "JitsiMeetIntegration" */ "../../components/Event/Integrations/JitsiMeet.vue"
-      ),
-    "integration-etherpad": () =>
-      import(
-        /* webpackChunkName: "EtherpadIntegration" */ "../../components/Event/Integrations/Etherpad.vue"
-      ),
-  },
-  apollo: {
-    event: {
-      query: FETCH_EVENT,
-      variables() {
-        return {
-          uuid: this.uuid,
-        };
-      },
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
-      },
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-    loggedUser: USER_SETTINGS,
-    participations: {
-      query: EVENT_PERSON_PARTICIPATION,
-      variables() {
-        return {
-          eventId: this.event.id,
-          actorId: this.currentActor.id,
-        };
-      },
-      subscribeToMore: {
-        document: EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
-        variables() {
-          return {
-            eventId: this.event.id,
-            actorId: this.currentActor.id,
-          };
-        },
-      },
-      update: (data) => {
-        if (data && data.person) return data.person.participations.elements;
-        return [];
-      },
-      skip() {
-        return (
-          !this.currentActor ||
-          !this.event ||
-          !this.event.id ||
-          !this.currentActor.id
-        );
-      },
-    },
-    person: {
-      query: PERSON_STATUS_GROUP,
-      variables() {
-        return {
-          id: this.currentActor.id,
-          group: usernameWithDomain(this.event?.attributedTo),
-        };
-      },
-      skip() {
-        return (
-          !this.currentActor.id ||
-          !this.event?.attributedTo ||
-          !this.event?.attributedTo?.preferredUsername
-        );
-      },
-    },
-    config: CONFIG,
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.eventTitle,
-      meta: [
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        { name: "description", content: this.eventDescription },
-      ],
-    };
-  },
-})
-export default class Event extends EventMixin {
-  @Prop({ type: String, required: true }) uuid!: string;
-
-  event: IEvent = new EventModel();
-
-  currentActor!: IPerson;
-
-  identity: IPerson = new Person();
-
-  config!: IConfig;
-
-  person!: IPerson;
-
-  loggedUser!: IUser;
-
-  participations: IParticipant[] = [];
-
-  oldParticipationRole!: string;
-
-  isReportModalActive = false;
-
-  isShareModalActive = false;
-
-  isJoinModalActive = false;
-
-  isJoinConfirmationModalActive = false;
-
-  EventVisibility = EventVisibility;
-
-  EventStatus = EventStatus;
-
-  EventJoinOptions = EventJoinOptions;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  RouteName = RouteName;
-
-  observer!: IntersectionObserver;
-
-  loadComments = false;
-
-  anonymousParticipation: boolean | null = null;
-
-  actorForConfirmation!: IPerson;
-
-  messageForConfirmation = "";
-
-  get eventTitle(): undefined | string {
-    if (!this.event) return undefined;
-    return this.event.title;
-  }
-
-  get eventDescription(): undefined | string {
-    if (!this.event) return undefined;
-    return this.event.description;
-  }
-
-  async mounted(): Promise<void> {
-    this.identity = this.currentActor;
-    if (this.$route.hash.includes("#comment-")) {
-      this.loadComments = true;
-    }
-
-    try {
-      if (window.isSecureContext) {
-        this.anonymousParticipation =
-          await this.anonymousParticipationConfirmed();
-      }
-    } catch (e) {
-      if (e instanceof AnonymousParticipationNotFoundError) {
-        this.anonymousParticipation = null;
-      } else {
-        console.error(e);
-      }
-    }
-
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        // eslint-disable-next-line no-restricted-syntax
-        for (const entry of entries) {
-          if (entry) {
-            this.loadComments = entry.isIntersecting || this.loadComments;
-          }
-        }
-      },
-      {
-        rootMargin: "-50px 0px -50px",
-      }
-    );
-    this.observer.observe(this.$refs.commentsObserver as Element);
-
-    this.$watch("eventDescription", (eventDescription) => {
-      if (!eventDescription) return;
-      const eventDescriptionElement = this.$refs
-        .eventDescriptionElement as HTMLElement;
-
-      eventDescriptionElement.addEventListener("click", ($event) => {
-        // TODO: Find the right type for target
-        let { target }: { target: any } = $event;
-        while (target && target.tagName !== "A") target = target.parentNode;
-        // handle only links that occur inside the component and do not reference external resources
-        if (target && target.matches(".hashtag") && target.href) {
-          // some sanity checks taken from vue-router:
-          // https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106
-          const {
-            altKey,
-            ctrlKey,
-            metaKey,
-            shiftKey,
-            button,
-            defaultPrevented,
-          } = $event;
-          // don't handle with control keys
-          if (metaKey || altKey || ctrlKey || shiftKey) return;
-          // don't handle when preventDefault called
-          if (defaultPrevented) return;
-          // don't handle right clicks
-          if (button !== undefined && button !== 0) return;
-          // don't handle if `target="_blank"`
-          if (target && target.getAttribute) {
-            const linkTarget = target.getAttribute("target");
-            if (/\b_blank\b/i.test(linkTarget)) return;
-          }
-          // don't handle same page links/anchors
-          const url = new URL(target.href);
-          const to = url.pathname;
-          if (window.location.pathname !== to && $event.preventDefault) {
-            $event.preventDefault();
-            this.$router.push(to);
-          }
-        }
-      });
-    });
-
-    this.$on("event-deleted", () => {
-      return this.$router.push({ name: RouteName.HOME });
-    });
-  }
-
-  /**
-   * Delete the event, then redirect to home.
-   */
-  async openDeleteEventModalWrapper(): Promise<void> {
-    await this.openDeleteEventModal(this.event);
-  }
-
-  async reportEvent(content: string, forward: boolean): Promise<void> {
-    this.isReportModalActive = false;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.$refs.reportModal.close();
-    if (!this.organizer) return;
-    const eventTitle = this.event.title;
-
-    try {
-      await this.$apollo.mutate<IReport>({
-        mutation: CREATE_REPORT,
-        variables: {
-          eventId: this.event.id,
-          reportedId: this.organizer ? this.organizer.id : null,
-          content,
-          forward,
-        },
-      });
-      this.$notifier.success(
-        this.$t("Event {eventTitle} reported", { eventTitle }) as string
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  joinEventWithConfirmation(actor: IPerson): void {
-    this.isJoinConfirmationModalActive = true;
-    this.actorForConfirmation = actor;
-  }
-
-  async joinEvent(
-    identity: IPerson,
-    message: string | null = null
-  ): Promise<void> {
-    this.isJoinConfirmationModalActive = false;
-    this.isJoinModalActive = false;
-    try {
-      const { data: mutationData } = await this.$apollo.mutate<{
-        joinEvent: IParticipant;
-      }>({
-        mutation: JOIN_EVENT,
-        variables: {
-          eventId: this.event.id,
-          actorId: identity.id,
-          message,
-        },
-        update: (
-          store: ApolloCache<{
-            joinEvent: IParticipant;
-          }>,
-          { data }: FetchResult
-        ) => {
-          if (data == null) return;
-
-          const participationCachedData = store.readQuery<{ person: IPerson }>({
-            query: EVENT_PERSON_PARTICIPATION,
-            variables: { eventId: this.event.id, actorId: identity.id },
-          });
-
-          if (participationCachedData?.person == undefined) {
-            console.error(
-              "Cannot update participation cache, because of null value."
-            );
-            return;
-          }
-          store.writeQuery({
-            query: EVENT_PERSON_PARTICIPATION,
-            variables: { eventId: this.event.id, actorId: identity.id },
-            data: {
-              person: {
-                ...participationCachedData?.person,
-                participations: {
-                  elements: [data.joinEvent],
-                  total: 1,
-                },
-              },
-            },
-          });
-
-          const cachedData = store.readQuery<{ event: IEvent }>({
-            query: FETCH_EVENT,
-            variables: { uuid: this.event.uuid },
-          });
-          if (cachedData == null) return;
-          const { event } = cachedData;
-          if (event === null) {
-            console.error(
-              "Cannot update event participant cache, because of null value."
-            );
-            return;
-          }
-          const participantStats = { ...event.participantStats };
-
-          if (data.joinEvent.role === ParticipantRole.NOT_APPROVED) {
-            participantStats.notApproved += 1;
-          } else {
-            participantStats.going += 1;
-            participantStats.participant += 1;
-          }
-
-          store.writeQuery({
-            query: FETCH_EVENT,
-            variables: { uuid: this.uuid },
-            data: {
-              event: {
-                ...event,
-                participantStats,
-              },
-            },
-          });
-        },
-      });
-      if (mutationData) {
-        if (mutationData.joinEvent.role === ParticipantRole.NOT_APPROVED) {
-          this.participationRequestedMessage();
-        } else {
-          this.participationConfirmedMessage();
-        }
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  confirmLeave(): void {
-    this.$buefy.dialog.confirm({
-      title: this.$t('Leaving event "{title}"', {
-        title: this.event.title,
-      }) as string,
-      message: this.$t(
-        'Are you sure you want to cancel your participation at event "{title}"?',
-        {
-          title: this.event.title,
-        }
-      ) as string,
-      confirmText: this.$t("Leave event") as string,
-      cancelText: this.$t("Cancel") as string,
-      type: "is-danger",
-      hasIcon: true,
-      onConfirm: () => {
-        if (this.currentActor.id) {
-          this.leaveEvent(this.event, this.currentActor.id);
-        }
-      },
-    });
-  }
-
-  @Watch("participations")
-  watchParticipations(): void {
-    if (this.participations.length > 0) {
-      if (
-        this.oldParticipationRole &&
-        this.participations[0].role !== ParticipantRole.NOT_APPROVED &&
-        this.oldParticipationRole !== this.participations[0].role
-      ) {
-        switch (this.participations[0].role) {
-          case ParticipantRole.PARTICIPANT:
-            this.participationConfirmedMessage();
-            break;
-          case ParticipantRole.REJECTED:
-            this.participationRejectedMessage();
-            break;
-          default:
-            this.participationChangedMessage();
-            break;
-        }
-      }
-      this.oldParticipationRole = this.participations[0].role;
-    }
-  }
-
-  private participationConfirmedMessage() {
-    this.$notifier.success(
-      this.$t("Your participation has been confirmed") as string
-    );
-  }
-
-  private participationRequestedMessage() {
-    this.$notifier.success(
-      this.$t("Your participation has been requested") as string
-    );
-  }
-
-  private participationRejectedMessage() {
-    this.$notifier.error(
-      this.$t("Your participation has been rejected") as string
-    );
-  }
-
-  private participationChangedMessage() {
-    this.$notifier.info(
-      this.$t("Your participation status has been changed") as string
-    );
-  }
-
-  async downloadIcsEvent(): Promise<void> {
-    const data = await (
-      await fetch(`${GRAPHQL_API_ENDPOINT}/events/${this.uuid}/export/ics`)
-    ).text();
-    const blob = new Blob([data], { type: "text/calendar" });
-    const link = document.createElement("a");
-    link.href = window.URL.createObjectURL(blob);
-    link.download = `${this.event.title}.ics`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-
-  triggerShare(): void {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-start
-    if (navigator.share) {
-      navigator
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        .share({
-          title: this.event.title,
-          url: this.event.url,
-        })
-        .then(() => console.log("Successful share"))
-        .catch((error: any) => console.log("Error sharing", error));
-    } else {
-      this.isShareModalActive = true;
-      // send popup
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-end
-  }
-
-  handleErrors(errors: any[]): void {
-    if (
-      errors.some((error) => error.status_code === 404) ||
-      errors.some(({ message }) => message.includes("has invalid value $uuid"))
-    ) {
-      this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
-    }
-  }
-
-  get actorIsParticipant(): boolean {
-    if (this.actorIsOrganizer) return true;
-
-    return (
-      this.participations.length > 0 &&
-      this.participations[0].role === ParticipantRole.PARTICIPANT
-    );
-  }
-
-  get actorIsOrganizer(): boolean {
-    return (
-      this.participations.length > 0 &&
-      this.participations[0].role === ParticipantRole.CREATOR
-    );
-  }
-
-  get hasGroupPrivileges(): boolean {
-    return (
-      this.person?.memberships?.total > 0 &&
-      [MemberRole.MODERATOR, MemberRole.ADMINISTRATOR].includes(
-        this.person?.memberships?.elements[0].role
-      )
-    );
-  }
-
-  get canManageEvent(): boolean {
-    return this.actorIsOrganizer || this.hasGroupPrivileges;
-  }
-
-  get endDate(): Date {
-    return this.event.endsOn !== null && this.event.endsOn > this.event.beginsOn
-      ? this.event.endsOn
-      : this.event.beginsOn;
-  }
-
-  get maximumAttendeeCapacity(): number {
-    return this.event?.options?.maximumAttendeeCapacity;
-  }
-
-  get eventCapacityOK(): boolean {
-    if (this.event.draft) return true;
-    if (!this.maximumAttendeeCapacity) return true;
-    return (
-      this.event?.options?.maximumAttendeeCapacity >
-      this.event.participantStats.participant
-    );
-  }
-
-  get numberOfPlacesStillAvailable(): number {
-    if (this.event.draft) return this.maximumAttendeeCapacity;
-    return (
-      this.maximumAttendeeCapacity - this.event.participantStats.participant
-    );
-  }
-
-  async anonymousParticipationConfirmed(): Promise<boolean> {
-    return isParticipatingInThisEvent(this.uuid);
-  }
-
-  async cancelAnonymousParticipation(): Promise<void> {
-    const token = (await getLeaveTokenForParticipation(this.uuid)) as string;
-    await this.leaveEvent(this.event, this.config.anonymous.actorId, token);
-    await removeAnonymousParticipation(this.uuid);
-    this.anonymousParticipation = null;
-  }
-
-  get ableToReport(): boolean {
-    return (
-      this.config &&
-      (this.currentActor.id != null || this.config.anonymous.reports.allowed)
-    );
-  }
-
-  get organizer(): IActor | null {
-    if (this.event.attributedTo && this.event.attributedTo.id) {
-      return this.event.attributedTo;
-    }
-    if (this.event.organizerActor) {
-      return this.event.organizerActor;
-    }
-    return null;
-  }
-
-  get organizerDomain(): string | null {
-    if (this.organizer) {
-      return this.organizer.domain;
-    }
-    return null;
-  }
-
-  metadataToComponent: Record<string, string> = {
-    "mz:live:twitch:url": "integration-twitch",
-    "mz:live:peertube:url": "integration-peertube",
-    "mz:live:youtube:url": "integration-youtube",
-    "mz:visio:jitsi_meet": "integration-jitsi-meet",
-    "mz:notes:etherpad:url": "integration-etherpad",
-  };
-
-  get integrations(): Record<string, IEventMetadataDescription> {
-    return this.event.metadata
-      .map((val) => {
-        const def = eventMetaDataList.find((dat) => dat.key === val.key);
-        return {
-          ...def,
-          ...val,
-        };
-      })
-      .reduce((acc: Record<string, IEventMetadataDescription>, metadata) => {
-        const component = this.metadataToComponent[metadata.key];
-        if (component !== undefined) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          acc[component] = metadata;
-        }
-        return acc;
-      }, {});
-  }
-
-  showMap = false;
-
-  get routingType(): string | undefined {
-    return this.config?.maps?.routing?.type;
-  }
-
-  get eventCategory(): string | undefined {
-    if (this.event?.category === "MEETING") {
-      return undefined;
-    }
-    return this.config.eventCategories.find((eventCategory) => {
-      return eventCategory.id === this.event?.category;
-    })?.label as string;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.section {
-  padding: 1rem 2rem 4rem;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-div.sidebar {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-
-  position: relative;
-
-  &::before {
-    content: "";
-    background: #b3b3b2;
-    position: absolute;
-    bottom: 30px;
-    top: 30px;
-    left: 0;
-    height: calc(100% - 60px);
-    width: 1px;
-  }
-
-  div.organizer {
-    display: inline-flex;
-    padding-top: 10px;
-
-    a {
-      color: #4a4a4a;
-
-      span {
-        line-height: 2.7rem;
-        @include padding-right(6px);
-      }
-    }
-  }
-}
-
-.intro {
-  background: white;
-
-  .is-3-tablet {
-    width: initial;
-  }
-
-  p.tags {
-    a {
-      text-decoration: none;
-    }
-
-    span {
-      &.tag {
-        margin: 0 2px;
-      }
-    }
-  }
-}
-
-.event-description-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  padding: 0;
-
-  @media all and (min-width: 672px) {
-    flex-direction: row-reverse;
-  }
-
-  & > aside,
-  & > div {
-    @media all and (min-width: 672px) {
-      margin: 2rem auto;
-    }
-  }
-
-  aside.event-metadata {
-    min-width: 20rem;
-    flex: 1;
-    @media all and (min-width: 672px) {
-      @include padding-left(1rem);
-    }
-
-    .sticky {
-      position: sticky;
-      background: white;
-      top: 50px;
-      padding: 1rem;
-    }
-  }
-
-  div.event-description-comments {
-    min-width: 20rem;
-    padding: 1rem;
-    flex: 2;
-    background: white;
-  }
-
-  .description-content {
-    ::v-deep h1 {
-      font-size: 2rem;
-    }
-
-    ::v-deep h2 {
-      font-size: 1.5rem;
-    }
-
-    ::v-deep h3 {
-      font-size: 1.25rem;
-    }
-
-    ::v-deep ul {
-      list-style-type: disc;
-    }
-
-    ::v-deep li {
-      margin: 10px auto 10px 2rem;
-    }
-
-    ::v-deep blockquote {
-      border-left: 0.2em solid #333;
-      display: block;
-      @include padding-left(1rem);
-    }
-
-    ::v-deep p {
-      margin: 10px auto;
-
-      a {
-        display: inline-block;
-        padding: 0.3rem;
-        background: $secondary;
-        color: #111;
-
-        &:empty {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.comments {
-  padding-top: 3rem;
-
-  a h3#comments {
-    margin-bottom: 10px;
-  }
-}
-
-.more-events {
-  background: white;
-  padding: 1rem 1rem 4rem;
-
-  & > .title {
-    font-size: 1.5rem;
-  }
-}
-
-.dropdown .dropdown-trigger span {
-  cursor: pointer;
-}
-
-a.dropdown-item,
-.dropdown .dropdown-menu .has-link a,
-button.dropdown-item {
-  white-space: nowrap;
-  width: 100%;
-  @include padding-right(1rem);
-  text-align: right;
-}
-
-a.participations-link {
-  text-decoration: none;
-}
-
-.event-status .tag {
-  font-size: 1rem;
-}
-
-.no-border {
-  border: 0;
-  cursor: auto;
-}
-
-.wrapper,
-.intro-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.intro-wrapper {
-  position: relative;
-  padding: 0 16px 16px;
-  background: #fff;
-
-  .date-calendar-icon-wrapper {
-    margin-top: 16px;
-    height: 0;
-    display: flex;
-    align-items: flex-end;
-    align-self: flex-start;
-    margin-bottom: 7px;
-    @include margin-left(0);
-  }
-}
-.title {
-  margin: 0;
-  font-size: 2rem;
-}
-</style>
diff --git a/js/src/views/Event/EventList.vue b/js/src/views/Event/EventList.vue
deleted file mode 100644
index 89da54b7f..000000000
--- a/js/src/views/Event/EventList.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <section class="container">
-    <h1>{{ $t("Event list") }}</h1>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
-    <div v-if="events.length > 0" class="columns is-multiline">
-      <EventCard
-        v-for="event in events"
-        :key="event.uuid"
-        :event="event"
-        class="column is-one-quarter-desktop is-half-mobile"
-      />
-    </div>
-    <b-message
-      v-if-else="events.length === 0 && $apollo.loading === false"
-      type="is-danger"
-      >{{ $t("No events found") }}</b-message
-    >
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import EventCard from "../../components/Event/EventCard.vue";
-import RouteName from "../../router/name";
-import { IEvent } from "../../types/event.model";
-
-@Component({
-  components: {
-    EventCard,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Event list") as string,
-    };
-  },
-})
-export default class EventList extends Vue {
-  @Prop(String) location!: string;
-
-  events = [];
-
-  loading = true;
-
-  locationChip = false;
-
-  locationText = "";
-
-  viewEvent(event: IEvent): void {
-    this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>
diff --git a/js/src/views/Event/EventView.vue b/js/src/views/Event/EventView.vue
new file mode 100755
index 000000000..3eea67d32
--- /dev/null
+++ b/js/src/views/Event/EventView.vue
@@ -0,0 +1,1555 @@
+<template>
+  <div class="container mx-auto">
+    <o-loading v-model:active="eventLoading" />
+    <div class="wrapper mb-3">
+      <event-banner :picture="event?.picture" />
+      <div class="intro-wrapper">
+        <div class="date-calendar-icon-wrapper" v-if="event?.beginsOn">
+          <date-calendar-icon :date="event.beginsOn.toString()" />
+        </div>
+
+        <section class="intro" dir="auto">
+          <div class="flex flex-wrap">
+            <div class="flex-1 min-w-fit">
+              <h1
+                class="text-4xl font-bold m-0"
+                dir="auto"
+                :lang="event?.language"
+              >
+                {{ event?.title }}
+              </h1>
+              <div class="organizer">
+                <div v-if="event?.organizerActor && !event?.attributedTo">
+                  <popover-actor-card
+                    :actor="event.organizerActor"
+                    :inline="true"
+                  >
+                    <i18n-t
+                      keypath="By {username}"
+                      dir="auto"
+                      class="block truncate max-w-xs md:max-w-sm"
+                    >
+                      <template #username>
+                        <span dir="ltr">{{
+                          displayName(event.organizerActor)
+                        }}</span>
+                      </template>
+                    </i18n-t>
+                  </popover-actor-card>
+                </div>
+                <span v-else-if="event?.attributedTo">
+                  <popover-actor-card
+                    :actor="event.attributedTo"
+                    :inline="true"
+                  >
+                    <i18n-t
+                      keypath="By {group}"
+                      dir="auto"
+                      class="block truncate max-w-xs md:max-w-sm"
+                    >
+                      <template #group>
+                        <router-link
+                          :to="{
+                            name: RouteName.GROUP,
+                            params: {
+                              preferredUsername: usernameWithDomain(
+                                event.attributedTo
+                              ),
+                            },
+                          }"
+                          dir="ltr"
+                          >{{ displayName(event.attributedTo) }}</router-link
+                        >
+                      </template>
+                    </i18n-t>
+                  </popover-actor-card>
+                </span>
+              </div>
+              <div class="inline-flex items-center gap-1">
+                <p v-if="event?.status !== EventStatus.CONFIRMED">
+                  <tag
+                    variant="warning"
+                    v-if="event?.status === EventStatus.TENTATIVE"
+                    >{{ t("Event to be confirmed") }}</tag
+                  >
+                  <tag
+                    variant="danger"
+                    v-if="event?.status === EventStatus.CANCELLED"
+                    >{{ t("Event cancelled") }}</tag
+                  >
+                </p>
+                <p class="flex gap-1 items-center" dir="auto">
+                  <tag v-if="eventCategory" class="category" capitalize>{{
+                    eventCategory
+                  }}</tag>
+                  <router-link
+                    v-for="tag in event?.tags ?? []"
+                    :key="tag.title"
+                    :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
+                  >
+                    <tag>{{ tag.title }}</tag>
+                  </router-link>
+                </p>
+                <tag variant="warning" size="medium" v-if="event?.draft"
+                  >{{ t("Draft") }}
+                </tag>
+              </div>
+            </div>
+
+            <div class="">
+              <participation-section
+                v-if="
+                  event &&
+                  currentActor &&
+                  identities &&
+                  anonymousParticipationConfig
+                "
+                :participation="participations[0]"
+                :event="event"
+                :anonymousParticipation="anonymousParticipation"
+                :currentActor="currentActor"
+                :identities="identities"
+                :anonymousParticipationConfig="anonymousParticipationConfig"
+                @join-event="joinEvent"
+                @join-modal="isJoinModalActive = true"
+                @join-event-with-confirmation="joinEventWithConfirmation"
+                @confirm-leave="confirmLeave"
+                @cancel-anonymous-participation="cancelAnonymousParticipation"
+              />
+              <div class="flex flex-col">
+                <template v-if="!event?.draft">
+                  <p
+                    v-if="event?.visibility === EventVisibility.PUBLIC"
+                    class="inline-flex gap-1"
+                  >
+                    <Earth />
+                    {{ t("Public event") }}
+                  </p>
+                  <p
+                    v-if="event?.visibility === EventVisibility.UNLISTED"
+                    class="inline-flex gap-1"
+                  >
+                    <Link />
+                    {{ t("Private event") }}
+                  </p>
+                </template>
+                <template v-if="!event?.local && organizer?.domain">
+                  <a :href="event?.url">
+                    <tag>{{ organizer?.domain }}</tag>
+                  </a>
+                </template>
+                <p class="inline-flex gap-1">
+                  <TicketConfirmationOutline />
+                  <router-link
+                    class="participations-link"
+                    v-if="canManageEvent && event?.draft === false"
+                    :to="{
+                      name: RouteName.PARTICIPATIONS,
+                      params: { eventId: event.uuid },
+                    }"
+                  >
+                    <!-- We retire one because of the event creator who is a
+                    participant -->
+                    <span v-if="maximumAttendeeCapacity">
+                      {{
+                        t(
+                          "{available}/{capacity} available places",
+                          {
+                            available:
+                              maximumAttendeeCapacity -
+                              event.participantStats.participant,
+                            capacity: maximumAttendeeCapacity,
+                          },
+                          maximumAttendeeCapacity -
+                            event.participantStats.participant
+                        )
+                      }}
+                    </span>
+                    <span v-else>
+                      {{
+                        t(
+                          "No one is participating|One person participating|{going} people participating",
+                          {
+                            going: event.participantStats.participant,
+                          },
+                          event.participantStats.participant
+                        )
+                      }}
+                    </span>
+                  </router-link>
+                  <span v-else>
+                    <span v-if="maximumAttendeeCapacity">
+                      {{
+                        t(
+                          "{available}/{capacity} available places",
+                          {
+                            available:
+                              maximumAttendeeCapacity -
+                              (event?.participantStats.participant ?? 0),
+                            capacity: maximumAttendeeCapacity,
+                          },
+                          maximumAttendeeCapacity -
+                            (event?.participantStats.participant ?? 0)
+                        )
+                      }}
+                    </span>
+                    <span v-else>
+                      {{
+                        t(
+                          "No one is participating|One person participating|{going} people participating",
+                          {
+                            going: event?.participantStats.participant,
+                          },
+                          event?.participantStats.participant ?? 0
+                        )
+                      }}
+                    </span>
+                  </span>
+                  <VTooltip v-if="event?.local === false">
+                    <HelpCircleOutline :size="16" />
+                    <template #popper>
+                      {{
+                        t(
+                          "The actual number of participants may differ, as this event is hosted on another instance."
+                        )
+                      }}
+                    </template>
+                  </VTooltip>
+                </p>
+                <o-dropdown>
+                  <template #trigger>
+                    <o-button icon-right="dots-horizontal">
+                      {{ t("Actions") }}
+                    </o-button>
+                  </template>
+                  <o-dropdown-item
+                    aria-role="listitem"
+                    has-link
+                    v-if="canManageEvent || event?.draft"
+                  >
+                    <router-link
+                      class="flex gap-1"
+                      :to="{
+                        name: RouteName.EDIT_EVENT,
+                        params: { eventId: event?.uuid },
+                      }"
+                    >
+                      <Pencil />
+                      {{ t("Edit") }}
+                    </router-link>
+                  </o-dropdown-item>
+                  <o-dropdown-item
+                    aria-role="listitem"
+                    has-link
+                    v-if="canManageEvent || event?.draft"
+                  >
+                    <router-link
+                      class="flex gap-1"
+                      :to="{
+                        name: RouteName.DUPLICATE_EVENT,
+                        params: { eventId: event?.uuid },
+                      }"
+                    >
+                      <ContentDuplicate />
+                      {{ t("Duplicate") }}
+                    </router-link>
+                  </o-dropdown-item>
+                  <o-dropdown-item
+                    aria-role="listitem"
+                    v-if="canManageEvent || event?.draft"
+                    @click="openDeleteEventModal"
+                    @keyup.enter="openDeleteEventModal"
+                    ><span class="flex gap-1">
+                      <Delete />
+                      {{ t("Delete") }}
+                    </span>
+                  </o-dropdown-item>
+
+                  <hr
+                    role="presentation"
+                    class="dropdown-divider"
+                    aria-role="o-dropdown-item"
+                    v-if="canManageEvent || event?.draft"
+                  />
+                  <o-dropdown-item
+                    aria-role="listitem"
+                    v-if="event?.draft === false"
+                    @click="triggerShare()"
+                    @keyup.enter="triggerShare()"
+                    class="p-1"
+                  >
+                    <span class="flex gap-1">
+                      <Share />
+                      {{ t("Share this event") }}
+                    </span>
+                  </o-dropdown-item>
+                  <o-dropdown-item
+                    aria-role="listitem"
+                    @click="downloadIcsEvent()"
+                    @keyup.enter="downloadIcsEvent()"
+                    v-if="event?.draft === false"
+                  >
+                    <span class="flex gap-1">
+                      <CalendarPlus />
+                      {{ t("Add to my calendar") }}
+                    </span>
+                  </o-dropdown-item>
+                  <o-dropdown-item
+                    aria-role="listitem"
+                    v-if="ableToReport"
+                    @click="isReportModalActive = true"
+                    @keyup.enter="isReportModalActive = true"
+                    class="p-1"
+                  >
+                    <span class="flex gap-1">
+                      <Flag />
+                      {{ t("Report") }}
+                    </span>
+                  </o-dropdown-item>
+                </o-dropdown>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div
+        class="event-description-wrapper rounded-lg dark:border-violet-title flex flex-wrap flex-col md:flex-row-reverse"
+      >
+        <aside class="event-metadata rounded dark:bg-gray-600 shadow-md">
+          <div class="sticky">
+            <event-metadata-sidebar
+              v-if="event"
+              :event="event"
+              :user="loggedUser"
+              @showMapModal="showMap = true"
+            />
+          </div>
+        </aside>
+        <div class="event-description-comments">
+          <section class="event-description">
+            <h2 class="text-xl">{{ t("About this event") }}</h2>
+            <p v-if="!event?.description">
+              {{ t("The event organizer didn't add any description.") }}
+            </p>
+            <div v-else>
+              <div
+                :lang="event?.language"
+                dir="auto"
+                class="description-content"
+                ref="eventDescriptionElement"
+                v-html="event.description"
+              />
+            </div>
+          </section>
+          <section class="integration-wrappers">
+            <component
+              v-for="(metadata, integration) in integrations"
+              :is="integration"
+              :key="integration"
+              :metadata="metadata"
+            />
+          </section>
+          <section class="comments" ref="commentsObserver">
+            <a href="#comments">
+              <h2 class="text-xl" id="comments">{{ t("Comments") }}</h2>
+            </a>
+            <comment-tree v-if="event && loadComments" :event="event" />
+          </section>
+        </div>
+      </div>
+
+      <section class="" v-if="(event?.relatedEvents ?? []).length > 0">
+        <h2 class="">
+          {{ t("These events may interest you") }}
+        </h2>
+        <multi-card :events="event?.relatedEvents ?? []" />
+      </section>
+      <o-modal
+        v-model:active="isReportModalActive"
+        has-modal-card
+        ref="reportModal"
+        :close-button-aria-label="t('Close')"
+      >
+        <ReportModal
+          :on-confirm="reportEvent"
+          :title="t('Report this event')"
+          :outside-domain="organizerDomain"
+        />
+      </o-modal>
+      <o-modal
+        :close-button-aria-label="t('Close')"
+        v-model:active="isShareModalActive"
+        has-modal-card
+        ref="shareModal"
+      >
+        <share-event-modal
+          v-if="event"
+          :event="event"
+          :eventCapacityOK="eventCapacityOK"
+        />
+      </o-modal>
+      <o-modal
+        v-model:active="isJoinModalActive"
+        has-modal-card
+        ref="participationModal"
+        :close-button-aria-label="t('Close')"
+      >
+        <identity-picker v-if="identity" v-model="identity">
+          <template #footer>
+            <footer class="flex gap-2">
+              <o-button
+                outlined
+                ref="cancelButton"
+                @click="isJoinModalActive = false"
+                @keyup.enter="isJoinModalActive = false"
+              >
+                {{ t("Cancel") }}
+              </o-button>
+              <o-button
+                v-if="identity"
+                variant="primary"
+                ref="confirmButton"
+                @click="
+                  event?.joinOptions === EventJoinOptions.RESTRICTED
+                    ? joinEventWithConfirmation(identity as IPerson)
+                    : joinEvent(identity as IPerson)
+                "
+                @keyup.enter="
+                  event?.joinOptions === EventJoinOptions.RESTRICTED
+                    ? joinEventWithConfirmation(identity as IPerson)
+                    : joinEvent(identity as IPerson)
+                "
+              >
+                {{ t("Confirm my particpation") }}
+              </o-button>
+            </footer>
+          </template>
+        </identity-picker>
+      </o-modal>
+      <o-modal
+        v-model:active="isJoinConfirmationModalActive"
+        has-modal-card
+        ref="joinConfirmationModal"
+        :close-button-aria-label="t('Close')"
+      >
+        <div class="modal-card">
+          <header class="modal-card-head">
+            <p class="modal-card-title">
+              {{ t("Participation confirmation") }}
+            </p>
+          </header>
+
+          <section class="modal-card-body">
+            <p>
+              {{
+                t(
+                  "The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?"
+                )
+              }}
+            </p>
+            <form
+              @submit.prevent="
+                joinEvent(
+                  actorForConfirmation as IPerson,
+                  messageForConfirmation
+                )
+              "
+            >
+              <o-field :label="t('Message')">
+                <o-input
+                  type="textarea"
+                  size="medium"
+                  v-model="messageForConfirmation"
+                  minlength="10"
+                ></o-input>
+              </o-field>
+              <div class="buttons">
+                <o-button
+                  native-type="button"
+                  class="button"
+                  ref="cancelButton"
+                  @click="isJoinConfirmationModalActive = false"
+                  @keyup.enter="isJoinConfirmationModalActive = false"
+                  >{{ t("Cancel") }}
+                </o-button>
+                <o-button variant="primary" native-type="submit">
+                  {{ t("Confirm my participation") }}
+                </o-button>
+              </div>
+            </form>
+          </section>
+        </div>
+      </o-modal>
+      <o-modal
+        v-model:active="showMap"
+        :close-button-aria-label="t('Close')"
+        class="map-modal"
+        v-if="event?.physicalAddress?.geom"
+        has-modal-card
+        full-screen
+        :can-cancel="['escape', 'outside']"
+      >
+        <template #default="props">
+          <event-map
+            :routingType="routingType ?? RoutingType.OPENSTREETMAP"
+            :address="event.physicalAddress"
+            @close="props.close"
+          />
+        </template>
+      </o-modal>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+  MemberRole,
+  ParticipantRole,
+  RoutingType,
+} from "@/types/enums";
+import {
+  EVENT_PERSON_PARTICIPATION,
+  // EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
+  FETCH_EVENT,
+  JOIN_EVENT,
+  LEAVE_EVENT,
+} from "@/graphql/event";
+import { IEvent } from "@/types/event.model";
+import {
+  displayName,
+  IActor,
+  IPerson,
+  usernameWithDomain,
+} from "@/types/actor";
+import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
+import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import MultiCard from "@/components/Event/MultiCard.vue";
+import ReportModal from "@/components/Report/ReportModal.vue";
+import IdentityPicker from "@/views/Account/IdentityPicker.vue";
+import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
+import RouteName from "@/router/name";
+import CommentTree from "@/components/Comment/CommentTree.vue";
+import "intersection-observer";
+import {
+  AnonymousParticipationNotFoundError,
+  getLeaveTokenForParticipation,
+  isParticipatingInThisEvent,
+  removeAnonymousParticipation,
+} from "@/services/AnonymousParticipationStorage";
+import Tag from "@/components/TagElement.vue";
+import EventMetadataSidebar from "@/components/Event/EventMetadataSidebar.vue";
+import EventBanner from "@/components/Event/EventBanner.vue";
+import EventMap from "@/components/Event/EventMap.vue";
+import PopoverActorCard from "@/components/Account/PopoverActorCard.vue";
+import { IParticipant } from "@/types/participant.model";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
+import { IEventMetadataDescription } from "@/types/event-metadata";
+import { eventMetaDataList } from "@/services/EventMetadata";
+import { useDeleteEvent, useFetchEvent } from "@/composition/apollo/event";
+import {
+  computed,
+  onMounted,
+  ref,
+  watch,
+  defineAsyncComponent,
+  inject,
+} from "vue";
+import { useRoute, useRouter } from "vue-router";
+import Earth from "vue-material-design-icons/Earth.vue";
+import Link from "vue-material-design-icons/Link.vue";
+import Flag from "vue-material-design-icons/Flag.vue";
+import CalendarPlus from "vue-material-design-icons/CalendarPlus.vue";
+import ContentDuplicate from "vue-material-design-icons/ContentDuplicate.vue";
+import Delete from "vue-material-design-icons/Delete.vue";
+import Pencil from "vue-material-design-icons/Pencil.vue";
+import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
+import TicketConfirmationOutline from "vue-material-design-icons/TicketConfirmationOutline.vue";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+  usePersonStatusGroup,
+} from "@/composition/apollo/actor";
+import { useLoggedUser } from "@/composition/apollo/user";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import {
+  useAnonymousActorId,
+  useAnonymousParticipationConfig,
+  useAnonymousReportsConfig,
+  useEventCategories,
+  useRoutingType,
+} from "@/composition/apollo/config";
+import { useCreateReport } from "@/composition/apollo/report";
+import Share from "vue-material-design-icons/Share.vue";
+import { useI18n } from "vue-i18n";
+import { Dialog } from "@/plugins/dialog";
+import { Notifier } from "@/plugins/notifier";
+import { AbsintheGraphQLErrors } from "@/types/errors.model";
+import { useHead } from "@vueuse/head";
+import { Snackbar } from "@/plugins/snackbar";
+
+const ShareEventModal = defineAsyncComponent(
+  () => import("@/components/Event/ShareEventModal.vue")
+);
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const IntegrationTwitch = defineAsyncComponent(
+  () => import("@/components/Event/Integrations/TwitchIntegration.vue")
+);
+const IntegrationPeertube = defineAsyncComponent(
+  () => import("@/components/Event/Integrations/PeerTubeIntegration.vue")
+);
+const IntegrationYoutube = defineAsyncComponent(
+  () => import("@/components/Event/Integrations/YouTubeIntegration.vue")
+);
+const IntegrationJitsiMeet = defineAsyncComponent(
+  () => import("@/components/Event/Integrations/JitsiMeetIntegration.vue")
+);
+const IntegrationEtherpad = defineAsyncComponent(
+  () => import("@/components/Event/Integrations/EtherpadIntegration.vue")
+);
+/* eslint-enable @typescript-eslint/no-unused-vars */
+
+const props = defineProps<{
+  uuid: string;
+}>();
+
+const { t } = useI18n({ useScope: "global" });
+
+const {
+  event,
+  onError: onFetchEventError,
+  loading: eventLoading,
+} = useFetchEvent(props.uuid);
+const eventId = computed(() => event.value?.id);
+const { currentActor } = useCurrentActorClient();
+const currentActorId = computed(() => currentActor.value?.id);
+const { loggedUser } = useLoggedUser();
+const {
+  result: participationsResult,
+  // subscribeToMore: subscribeToMoreParticipation,
+} = useQuery<{ person: IPerson }>(
+  EVENT_PERSON_PARTICIPATION,
+  () => ({
+    eventId: event.value?.id,
+    actorId: currentActorId.value,
+  }),
+  () => ({
+    enabled:
+      currentActorId.value !== undefined &&
+      currentActorId.value !== null &&
+      eventId.value !== undefined,
+  })
+);
+
+// subscribeToMoreParticipation(() => ({
+//   document: EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
+//   variables: {
+//     eventId: eventId,
+//     actorId: currentActorId,
+//   },
+// }));
+
+const participations = computed(
+  () => participationsResult.value?.person.participations?.elements ?? []
+);
+
+const { person } = usePersonStatusGroup(
+  usernameWithDomain(event.value?.attributedTo)
+);
+
+const { anonymousReportsConfig } = useAnonymousReportsConfig();
+const { anonymousActorId } = useAnonymousActorId();
+const { eventCategories } = useEventCategories();
+
+const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
+const { identities } = useCurrentUserIdentities();
+
+// metaInfo() {
+//   return {
+//     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//     // @ts-ignore
+//     title: this.eventTitle,
+//     meta: [
+//       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//       // @ts-ignore
+//       { name: "description", content: this.eventDescription },
+//     ],
+//   };
+// },
+
+const identity = ref<IPerson | undefined | null>(null);
+
+const reportModal = ref();
+const oldParticipationRole = ref<string | undefined>(undefined);
+const isReportModalActive = ref(false);
+const isShareModalActive = ref(false);
+const isJoinModalActive = ref(false);
+const isJoinConfirmationModalActive = ref(false);
+
+const observer = ref<IntersectionObserver | null>(null);
+const commentsObserver = ref<Element | null>(null);
+
+const loadComments = ref(false);
+
+const anonymousParticipation = ref<boolean | null>(null);
+const actorForConfirmation = ref<IPerson | null>(null);
+const messageForConfirmation = ref("");
+
+const eventTitle = computed((): undefined | string => {
+  return event.value?.title;
+});
+
+const eventDescription = computed((): undefined | string => {
+  return event.value?.description;
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const eventDescriptionElement = ref<HTMLElement | null>(null);
+
+onMounted(async () => {
+  identity.value = currentActor.value;
+  if (route.hash.includes("#comment-")) {
+    loadComments.value = true;
+  }
+
+  try {
+    if (window.isSecureContext) {
+      anonymousParticipation.value = await anonymousParticipationConfirmed();
+    }
+  } catch (e) {
+    if (e instanceof AnonymousParticipationNotFoundError) {
+      anonymousParticipation.value = null;
+    } else {
+      console.error(e);
+    }
+  }
+
+  observer.value = new IntersectionObserver(
+    (entries) => {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const entry of entries) {
+        if (entry) {
+          loadComments.value = entry.isIntersecting || loadComments.value;
+        }
+      }
+    },
+    {
+      rootMargin: "-50px 0px -50px",
+    }
+  );
+  if (commentsObserver.value) {
+    observer.value.observe(commentsObserver.value);
+  }
+
+  watch(eventDescription, () => {
+    if (!eventDescription.value) return;
+    if (!eventDescriptionElement.value) return;
+
+    eventDescriptionElement.value.addEventListener("click", ($event) => {
+      // TODO: Find the right type for target
+      let { target }: { target: any } = $event;
+      while (target && target.tagName !== "A") target = target.parentNode;
+      // handle only links that occur inside the component and do not reference external resources
+      if (target && target.matches(".hashtag") && target.href) {
+        // some sanity checks taken from vue-router:
+        // https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106
+        const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } =
+          $event;
+        // don't handle with control keys
+        if (metaKey || altKey || ctrlKey || shiftKey) return;
+        // don't handle when preventDefault called
+        if (defaultPrevented) return;
+        // don't handle right clicks
+        if (button !== undefined && button !== 0) return;
+        // don't handle if `target="_blank"`
+        if (target && target.getAttribute) {
+          const linkTarget = target.getAttribute("target");
+          if (/\b_blank\b/i.test(linkTarget)) return;
+        }
+        // don't handle same page links/anchors
+        const url = new URL(target.href);
+        const to = url.pathname;
+        if (window.location.pathname !== to && $event.preventDefault) {
+          $event.preventDefault();
+          router.push(to);
+        }
+      }
+    });
+  });
+
+  // this.$on("event-deleted", () => {
+  //   return router.push({ name: RouteName.HOME });
+  // });
+});
+
+const deleteEventMessage = computed(() => {
+  const participantsLength = event.value?.participantStats.participant;
+  const prefix = participantsLength
+    ? t(
+        "There are {participants} participants.",
+        {
+          participants: event.value.participantStats.participant,
+        },
+        event.value.participantStats.participant
+      )
+    : "";
+  return `${prefix}
+        ${t(
+          "Are you sure you want to delete this event? This action cannot be reverted."
+        )}
+        <br><br>
+        ${t('To confirm, type your event title "{eventTitle}"', {
+          eventTitle: event.value?.title,
+        })}`;
+});
+
+const notifier = inject<Notifier>("notifier");
+const dialog = inject<Dialog>("dialog");
+
+const {
+  mutate: deleteEvent,
+  onDone: onDeleteEventDone,
+  onError: onDeleteEventError,
+} = useDeleteEvent();
+
+const escapeRegExp = (string: string) => {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+};
+
+const openDeleteEventModal = () => {
+  dialog?.prompt({
+    title: t("Delete event"),
+    message: deleteEventMessage.value,
+    confirmText: t("Delete event"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    hasIcon: true,
+    hasInput: true,
+    inputAttrs: {
+      placeholder: event.value?.title,
+      pattern: escapeRegExp(event.value?.title ?? ""),
+    },
+    onConfirm: (result: string) => {
+      console.log("calling delete event", result);
+      if (result.trim() === event.value?.title) {
+        event.value?.id ? deleteEvent({ eventId: event.value?.id }) : null;
+      }
+    },
+  });
+};
+
+onDeleteEventDone(() => {
+  router.push({ name: RouteName.MY_EVENTS });
+});
+
+onDeleteEventError((error) => {
+  console.error(error);
+});
+
+const {
+  mutate: createReportMutation,
+  onDone: onCreateReportDone,
+  onError: onCreateReportError,
+} = useCreateReport();
+
+onCreateReportDone(() => {
+  notifier?.success(t("Event {eventTitle} reported", { eventTitle }));
+});
+
+onCreateReportError((error) => {
+  console.error(error);
+});
+
+const reportEvent = async (
+  content: string,
+  forward: boolean
+): Promise<void> => {
+  isReportModalActive.value = false;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  reportModal.value.close();
+  if (!organizer.value) return;
+
+  createReportMutation({
+    eventId: event.value?.id ?? "",
+    reportedId: organizer.value?.id ?? "",
+    content,
+    forward,
+  });
+};
+
+const joinEventWithConfirmation = (actor: IPerson): void => {
+  isJoinConfirmationModalActive.value = true;
+  actorForConfirmation.value = actor;
+};
+
+const {
+  mutate: joinEventMutation,
+  onDone: onJoinEventMutationDone,
+  onError: onJoinEventMutationError,
+} = useMutation<{
+  joinEvent: IParticipant;
+}>(JOIN_EVENT, () => ({
+  update: (
+    store: ApolloCache<{
+      joinEvent: IParticipant;
+    }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+
+    const participationCachedData = store.readQuery<{ person: IPerson }>({
+      query: EVENT_PERSON_PARTICIPATION,
+      variables: { eventId: event.value?.id, actorId: identity.value?.id },
+    });
+
+    if (participationCachedData?.person == undefined) {
+      console.error(
+        "Cannot update participation cache, because of null value."
+      );
+      return;
+    }
+    store.writeQuery({
+      query: EVENT_PERSON_PARTICIPATION,
+      variables: { eventId: event.value?.id, actorId: identity.value?.id },
+      data: {
+        person: {
+          ...participationCachedData?.person,
+          participations: {
+            elements: [data.joinEvent],
+            total: 1,
+          },
+        },
+      },
+    });
+
+    const cachedData = store.readQuery<{ event: IEvent }>({
+      query: FETCH_EVENT,
+      variables: { uuid: event.value?.uuid },
+    });
+    if (cachedData == null) return;
+    const { event: cachedEvent } = cachedData;
+    if (cachedEvent === null) {
+      console.error(
+        "Cannot update event participant cache, because of null value."
+      );
+      return;
+    }
+    const participantStats = { ...cachedEvent.participantStats };
+
+    if (data.joinEvent.role === ParticipantRole.NOT_APPROVED) {
+      participantStats.notApproved += 1;
+    } else {
+      participantStats.going += 1;
+      participantStats.participant += 1;
+    }
+
+    store.writeQuery({
+      query: FETCH_EVENT,
+      variables: { uuid: props.uuid },
+      data: {
+        event: {
+          ...cachedEvent,
+          participantStats,
+        },
+      },
+    });
+  },
+}));
+
+const joinEvent = async (
+  identityForJoin: IPerson,
+  message: string | null = null
+): Promise<void> => {
+  isJoinConfirmationModalActive.value = false;
+  isJoinModalActive.value = false;
+  joinEventMutation({
+    eventId: event.value?.id,
+    actorId: identityForJoin?.id,
+    message,
+  });
+};
+
+onJoinEventMutationDone(({ data }) => {
+  if (data) {
+    if (data.joinEvent.role === ParticipantRole.NOT_APPROVED) {
+      participationRequestedMessage();
+    } else {
+      participationConfirmedMessage();
+    }
+  }
+});
+
+onJoinEventMutationError((error) => {
+  console.error(error);
+});
+
+const confirmLeave = (): void => {
+  dialog?.confirm({
+    title: t('Leaving event "{title}"', {
+      title: event.value?.title,
+    }),
+    message: t(
+      'Are you sure you want to cancel your participation at event "{title}"?',
+      {
+        title: event.value?.title,
+      }
+    ),
+    confirmText: t("Leave event"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    hasIcon: true,
+    onConfirm: () => {
+      if (event.value && currentActor.value?.id) {
+        console.log("calling leave event");
+        leaveEvent(event.value, currentActor.value.id);
+      }
+    },
+  });
+};
+
+watch(participations, () => {
+  if (participations.value.length > 0) {
+    if (
+      oldParticipationRole.value &&
+      participations.value[0].role !== ParticipantRole.NOT_APPROVED &&
+      oldParticipationRole.value !== participations.value[0].role
+    ) {
+      switch (participations.value[0].role) {
+        case ParticipantRole.PARTICIPANT:
+          participationConfirmedMessage();
+          break;
+        case ParticipantRole.REJECTED:
+          participationRejectedMessage();
+          break;
+        default:
+          participationChangedMessage();
+          break;
+      }
+    }
+    oldParticipationRole.value = participations.value[0].role;
+  }
+});
+
+const participationConfirmedMessage = () => {
+  notifier?.success(t("Your participation has been confirmed"));
+};
+
+const participationRequestedMessage = () => {
+  notifier?.success(t("Your participation has been requested"));
+};
+
+const participationRejectedMessage = () => {
+  notifier?.error(t("Your participation has been rejected"));
+};
+
+const participationChangedMessage = () => {
+  notifier?.info(t("Your participation status has been changed"));
+};
+
+const downloadIcsEvent = async (): Promise<void> => {
+  const data = await (
+    await fetch(`${GRAPHQL_API_ENDPOINT}/events/${props.uuid}/export/ics`)
+  ).text();
+  const blob = new Blob([data], { type: "text/calendar" });
+  const link = document.createElement("a");
+  link.href = window.URL.createObjectURL(blob);
+  link.download = `${event.value?.title}.ics`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const triggerShare = (): void => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-start
+  if (navigator.share) {
+    navigator
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      .share({
+        title: event.value?.title,
+        url: event.value?.url,
+      })
+      .then(() => console.debug("Successful share"))
+      .catch((error: any) => console.debug("Error sharing", error));
+  } else {
+    isShareModalActive.value = true;
+    // send popup
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore-end
+};
+
+const handleErrors = (errors: AbsintheGraphQLErrors): void => {
+  if (
+    errors.some((error) => error.status_code === 404) ||
+    errors.some(({ message }) => message.includes("has invalid value $uuid"))
+  ) {
+    router.replace({ name: RouteName.PAGE_NOT_FOUND });
+  }
+};
+
+onFetchEventError(({ graphQLErrors }) =>
+  handleErrors(graphQLErrors as AbsintheGraphQLErrors)
+);
+
+// const actorIsParticipant = computed((): boolean => {
+//   if (actorIsOrganizer.value) return true;
+
+//   return (
+//     participations.value.length > 0 &&
+//     participations.value[0].role === ParticipantRole.PARTICIPANT
+//   );
+// });
+
+const actorIsOrganizer = computed((): boolean => {
+  return (
+    participations.value.length > 0 &&
+    participations.value[0].role === ParticipantRole.CREATOR
+  );
+});
+
+const hasGroupPrivileges = computed((): boolean => {
+  return (
+    person.value?.memberships !== undefined &&
+    person.value?.memberships?.total > 0 &&
+    [MemberRole.MODERATOR, MemberRole.ADMINISTRATOR].includes(
+      person.value?.memberships?.elements[0].role
+    )
+  );
+});
+
+const canManageEvent = computed((): boolean => {
+  return actorIsOrganizer.value || hasGroupPrivileges.value;
+});
+
+// const endDate = computed((): string | undefined => {
+//   return event.value?.endsOn && event.value.endsOn > event.value.beginsOn
+//     ? event.value.endsOn
+//     : event.value?.beginsOn;
+// });
+
+const maximumAttendeeCapacity = computed((): number | undefined => {
+  return event.value?.options?.maximumAttendeeCapacity;
+});
+
+const eventCapacityOK = computed((): boolean => {
+  if (event.value?.draft) return true;
+  if (!maximumAttendeeCapacity.value) return true;
+  return (
+    event.value?.options?.maximumAttendeeCapacity !== undefined &&
+    event.value.participantStats.participant !== undefined &&
+    event.value?.options?.maximumAttendeeCapacity >
+      event.value.participantStats.participant
+  );
+});
+
+// const numberOfPlacesStillAvailable = computed((): number | undefined => {
+//   if (event.value?.draft) return maximumAttendeeCapacity.value;
+//   return (
+//     (maximumAttendeeCapacity.value ?? 0) -
+//     (event.value?.participantStats.participant ?? 0)
+//   );
+// });
+
+const anonymousParticipationConfirmed = async (): Promise<boolean> => {
+  return isParticipatingInThisEvent(props.uuid);
+};
+
+const cancelAnonymousParticipation = async (): Promise<void> => {
+  if (!event.value || !anonymousActorId.value) return;
+  const token = (await getLeaveTokenForParticipation(props.uuid)) as string;
+  leaveEvent(event.value, anonymousActorId.value, token);
+  await removeAnonymousParticipation(props.uuid);
+  anonymousParticipation.value = null;
+};
+
+const ableToReport = computed((): boolean => {
+  return (
+    currentActor.value?.id != null ||
+    anonymousReportsConfig.value?.allowed === true
+  );
+});
+
+const organizer = computed((): IActor | null => {
+  if (event.value?.attributedTo?.id) {
+    return event.value.attributedTo;
+  }
+  if (event.value?.organizerActor) {
+    return event.value.organizerActor;
+  }
+  return null;
+});
+
+const organizerDomain = computed((): string | undefined => {
+  return organizer.value?.domain ?? undefined;
+});
+
+const metadataToComponent: Record<string, string> = {
+  "mz:live:twitch:url": "IntegrationTwitch",
+  "mz:live:peertube:url": "IntegrationPeertube",
+  "mz:live:youtube:url": "IntegrationYoutube",
+  "mz:visio:jitsi_meet": "IntegrationJitsiMeet",
+  "mz:notes:etherpad:url": "IntegrationEtherpad",
+};
+
+const integrations = computed((): Record<string, IEventMetadataDescription> => {
+  return (event.value?.metadata ?? [])
+    .map((val) => {
+      const def = eventMetaDataList.find((dat) => dat.key === val.key);
+      return {
+        ...def,
+        ...val,
+      };
+    })
+    .reduce((acc: Record<string, IEventMetadataDescription>, metadata) => {
+      const component = metadataToComponent[metadata.key];
+      if (component !== undefined) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        acc[component] = metadata;
+      }
+      return acc;
+    }, {});
+});
+
+const showMap = ref(false);
+
+const { routingType } = useRoutingType();
+
+const eventCategory = computed((): string | undefined => {
+  if (event.value?.category === "MEETING") {
+    return undefined;
+  }
+  return (eventCategories.value ?? []).find((eventCategoryToFind) => {
+    return eventCategoryToFind.id === event.value?.category;
+  })?.label as string;
+});
+
+const {
+  mutate: leaveEventMutation,
+  onDone: onLeaveEventMutationDone,
+  onError: onLeaveEventMutationError,
+} = useMutation<{ leaveEvent: { actor: { id: string } } }>(LEAVE_EVENT, () => ({
+  update: (
+    store: ApolloCache<{
+      leaveEvent: IParticipant;
+    }>,
+    { data }: FetchResult,
+    { context, variables }
+  ) => {
+    if (data == null) return;
+    let participation;
+
+    const token = context?.token;
+    const actorId = variables?.actorId;
+    const localEventId = variables?.eventId;
+    const eventUUID = context?.eventUUID;
+    const isAnonymousParticipationConfirmed =
+      context?.isAnonymousParticipationConfirmed;
+
+    if (!token) {
+      const participationCachedData = store.readQuery<{
+        person: IPerson;
+      }>({
+        query: EVENT_PERSON_PARTICIPATION,
+        variables: { eventId: localEventId, actorId },
+      });
+      if (participationCachedData == null) return;
+      const { person: cachedPerson } = participationCachedData;
+      [participation] = cachedPerson?.participations?.elements ?? [undefined];
+
+      store.modify({
+        id: `Person:${actorId}`,
+        fields: {
+          participations() {
+            return {
+              elements: [],
+              total: 0,
+            };
+          },
+        },
+      });
+    }
+
+    const eventCachedData = store.readQuery<{ event: IEvent }>({
+      query: FETCH_EVENT,
+      variables: { uuid: eventUUID },
+    });
+    if (eventCachedData == null) return;
+    const { event: eventCached } = eventCachedData;
+    if (eventCached === null) {
+      console.error("Cannot update event cache, because of null value.");
+      return;
+    }
+    const participantStats = { ...eventCached.participantStats };
+    if (participation && participation?.role === ParticipantRole.NOT_APPROVED) {
+      participantStats.notApproved -= 1;
+    } else if (isAnonymousParticipationConfirmed === false) {
+      participantStats.notConfirmed -= 1;
+    } else {
+      participantStats.going -= 1;
+      participantStats.participant -= 1;
+    }
+    store.writeQuery({
+      query: FETCH_EVENT,
+      variables: { uuid: eventUUID },
+      data: {
+        event: {
+          ...eventCached,
+          participantStats,
+        },
+      },
+    });
+  },
+}));
+
+const leaveEvent = (
+  eventToLeave: IEvent,
+  actorId: string,
+  token: string | null = null,
+  isAnonymousParticipationConfirmed: boolean | null = null
+): void => {
+  leaveEventMutation(
+    {
+      eventId: eventToLeave.id,
+      actorId,
+      token,
+    },
+    {
+      context: {
+        token,
+        isAnonymousParticipationConfirmed,
+        eventUUID: eventToLeave.uuid,
+      },
+    }
+  );
+};
+
+onLeaveEventMutationDone(({ data }) => {
+  if (data) {
+    notifier?.success(t("You have cancelled your participation"));
+  }
+});
+
+const snackbar = inject<Snackbar>("snackbar");
+
+onLeaveEventMutationError((error) => {
+  snackbar?.open({
+    message: error.message,
+    variant: "danger",
+    position: "bottom",
+  });
+  console.error(error);
+});
+
+useHead({
+  title: computed(() => eventTitle.value ?? ""),
+  meta: [{ name: "description", content: eventDescription.value }],
+});
+</script>
+<style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
+.section {
+  padding: 1rem 2rem 4rem;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+div.sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  position: relative;
+
+  &::before {
+    content: "";
+    background: #b3b3b2;
+    position: absolute;
+    bottom: 30px;
+    top: 30px;
+    left: 0;
+    height: calc(100% - 60px);
+    width: 1px;
+  }
+
+  div.organizer {
+    display: inline-flex;
+    padding-top: 10px;
+
+    a {
+      color: #4a4a4a;
+
+      span {
+        line-height: 2.7rem;
+        @include padding-right(6px);
+      }
+    }
+  }
+}
+
+.intro {
+  // background: white;
+
+  .is-3-tablet {
+    width: initial;
+  }
+
+  p.tags {
+    a {
+      text-decoration: none;
+    }
+
+    span {
+      &.tag {
+        margin: 0 2px;
+      }
+    }
+  }
+}
+
+.event-description-wrapper {
+  padding: 0;
+
+  aside.event-metadata {
+    min-width: 20rem;
+    flex: 1;
+
+    .sticky {
+      // position: sticky;
+      // background: white;
+      top: 50px;
+      padding: 1rem;
+    }
+  }
+
+  div.event-description-comments {
+    min-width: 20rem;
+    padding: 1rem;
+    flex: 2;
+    // background: white;
+  }
+
+  .description-content {
+    :deep(h1) {
+      font-size: 2rem;
+    }
+
+    :deep(h2) {
+      font-size: 1.5rem;
+    }
+
+    :deep(h3) {
+      font-size: 1.25rem;
+    }
+
+    :deep(ul) {
+      list-style-type: disc;
+    }
+
+    :deep(li) {
+      margin: 10px auto 10px 2rem;
+    }
+
+    :deep(blockquote) {
+      border-left: 0.2em solid #333;
+      display: block;
+      @include padding-left(1rem);
+    }
+
+    :deep(p) {
+      margin: 10px auto;
+
+      a {
+        display: inline-block;
+        padding: 0.3rem;
+        color: #111;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.comments {
+  padding-top: 3rem;
+
+  a h3#comments {
+    margin-bottom: 10px;
+  }
+}
+
+.more-events {
+  // background: white;
+  padding: 1rem 1rem 4rem;
+
+  & > .title {
+    font-size: 1.5rem;
+  }
+}
+
+// .dropdown .dropdown-trigger span {
+//   cursor: pointer;
+// }
+
+// a.dropdown-item,
+// .dropdown .dropdown-menu .has-link a,
+// button.dropdown-item {
+//   white-space: nowrap;
+//   width: 100%;
+//   @include padding-right(1rem);
+//   text-align: right;
+// }
+
+a.participations-link {
+  text-decoration: none;
+}
+
+.no-border {
+  border: 0;
+  cursor: auto;
+}
+
+.wrapper,
+.intro-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.intro-wrapper {
+  position: relative;
+  padding: 0 16px 16px;
+  // background: #fff;
+
+  .date-calendar-icon-wrapper {
+    margin-top: 16px;
+    height: 0;
+    display: flex;
+    align-items: flex-end;
+    align-self: flex-start;
+    margin-bottom: 7px;
+    @include margin-left(0);
+  }
+}
+.title {
+  margin: 0;
+  font-size: 2rem;
+}
+</style>
diff --git a/js/src/views/Event/GroupEvents.vue b/js/src/views/Event/GroupEvents.vue
index 83fb6bd79..fb3cc1c1b 100644
--- a/js/src/views/Event/GroupEvents.vue
+++ b/js/src/views/Event/GroupEvents.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container section" v-if="group">
+  <div class="container mx-auto" v-if="group">
     <breadcrumbs-nav
       :links="[
         {
@@ -8,14 +8,14 @@
           text: displayName(group),
         },
         {
-          name: RouteName.EVENTS,
+          name: RouteName.GROUP_EVENTS,
           params: { preferredUsername: usernameWithDomain(group) },
           text: $t('Events'),
         },
       ]"
     />
     <section>
-      <h1 class="title" v-if="group">
+      <h1 class="" v-if="group">
         {{
           $t("{group}'s events", {
             group: displayName(group),
@@ -29,23 +29,24 @@
           )
         }}
       </p>
-      <router-link
+      <o-button
+        tag="router-link"
+        variant="primary"
         v-if="isCurrentActorAGroupModerator"
         :to="{
           name: RouteName.CREATE_EVENT,
           query: { actorId: group.id },
         }"
-        class="button is-primary"
-        >{{ $t("+ Create an event") }}</router-link
+        >{{ $t("+ Create an event") }}</o-button
       >
-      <b-loading :active.sync="$apollo.loading"></b-loading>
+      <o-loading v-model:active="groupLoading"></o-loading>
       <section v-if="group">
-        <subtitle>
+        <h2 class="text-2xl">
           {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
-        </subtitle>
-        <b-switch class="mb-4" v-model="showPassedEvents">{{
+        </h2>
+        <o-switch class="mb-4" v-model="showPassedEvents">{{
           $t("Past events")
-        }}</b-switch>
+        }}</o-switch>
         <grouped-multi-event-minimalist-card
           :events="group.organizedEvents.elements"
           :isCurrentActorMember="isCurrentActorMember"
@@ -53,7 +54,7 @@
         <empty-content
           v-if="
             group.organizedEvents.elements.length === 0 &&
-            $apollo.loading === false
+            groupLoading === false
           "
           icon="calendar"
           :inline="true"
@@ -69,13 +70,13 @@
                   )
                 }}
               </p>
-              <b-button type="is-text" tag="a" :href="group.url">
+              <o-button variant="text" tag="a" :href="group.url">
                 {{ $t("View the group profile on the original instance") }}
-              </b-button>
+              </o-button>
             </div>
           </template>
         </empty-content>
-        <b-pagination
+        <o-pagination
           class="mt-4"
           :total="group.organizedEvents.total"
           v-model="page"
@@ -85,116 +86,93 @@
           :aria-page-label="$t('Page')"
           :aria-current-label="$t('Current page')"
         >
-        </b-pagination>
+        </o-pagination>
       </section>
     </section>
   </div>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import RouteName from "@/router/name";
-import Subtitle from "@/components/Utils/Subtitle.vue";
 import GroupedMultiEventMinimalistCard from "@/components/Event/GroupedMultiEventMinimalistCard.vue";
 import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
-import { IMember } from "@/types/actor/member.model";
 import { FETCH_GROUP_EVENTS } from "@/graphql/event";
 import EmptyContent from "../../components/Utils/EmptyContent.vue";
-import { displayName, IGroup, usernameWithDomain } from "../../types/actor";
+import { displayName, IPerson, usernameWithDomain } from "../../types/actor";
+import { useQuery } from "@vue/apollo-composable";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import {
+  booleanTransformer,
+  integerTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
+import { MemberRole } from "@/types/enums";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
 
 const EVENTS_PAGE_LIMIT = 10;
 
-@Component({
-  apollo: {
-    memberships: {
-      query: PERSON_MEMBERSHIPS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-        };
-      },
-      update: (data) => data.person.memberships.elements,
-      skip() {
-        return !this.currentActor || !this.currentActor.id;
-      },
-    },
-    group: {
-      query: FETCH_GROUP_EVENTS,
-      variables() {
-        return {
-          name: this.$route.params.preferredUsername,
-          beforeDateTime: this.showPassedEvents ? new Date() : null,
-          afterDateTime: this.showPassedEvents ? null : new Date(),
-          organisedEventsPage: this.page,
-          organisedEventsLimit: EVENTS_PAGE_LIMIT,
-        };
-      },
-      update: (data) => data.group,
-    },
-  },
-  components: {
-    EmptyContent,
-    Subtitle,
-    GroupedMultiEventMinimalistCard,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { group } = this;
-    return {
-      title: this.$t("{group} events", {
-        group: displayName(group),
-      }) as string,
-    };
-  },
-})
-export default class GroupEvents extends Vue {
-  group!: IGroup;
+const { currentActor } = useCurrentActorClient();
 
-  memberships!: IMember[];
+const { result: membershipsResult } = useQuery<{
+  person: Pick<IPerson, "memberships">;
+}>(
+  PERSON_MEMBERSHIPS,
+  () => ({ id: currentActor.value?.id }),
+  () => ({ enabled: currentActor.value?.id !== undefined })
+);
+const memberships = computed(
+  () => membershipsResult.value?.person.memberships.elements
+);
 
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
+const route = useRoute();
+const page = useRouteQuery("page", 1, integerTransformer);
+const showPassedEvents = useRouteQuery(
+  "showPassedEvents",
+  false,
+  booleanTransformer
+);
 
-  set page(page: number) {
-    this.$router.push({
-      name: RouteName.GROUP_EVENTS,
-      query: { ...this.$route.query, page: page.toString() },
-    });
-    this.$apollo.queries.group.refetch();
-  }
+const { result: groupResult, loading: groupLoading } = useQuery(
+  FETCH_GROUP_EVENTS,
+  () => ({
+    name: route.params.preferredUsername,
+    beforeDateTime: showPassedEvents.value ? new Date() : null,
+    afterDateTime: showPassedEvents.value ? null : new Date(),
+    organisedEventsPage: page.value,
+    organisedEventsLimit: EVENTS_PAGE_LIMIT,
+  })
+);
+const group = computed(() => groupResult.value?.group);
 
-  usernameWithDomain = usernameWithDomain;
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: t("{group} events", {
+    group: displayName(group.value),
+  }),
+});
 
-  displayName = displayName;
+const isCurrentActorMember = computed((): boolean => {
+  if (!group.value || !memberships.value) return false;
+  return (memberships.value ?? [])
+    .map(({ parent: { id } }) => id)
+    .includes(group.value.id);
+});
 
-  RouteName = RouteName;
+const isCurrentActorAGroupModerator = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+  ]);
+});
 
-  EVENTS_PAGE_LIMIT = EVENTS_PAGE_LIMIT;
-
-  get isCurrentActorMember(): boolean {
-    if (!this.group || !this.memberships) return false;
-    return this.memberships
-      .map(({ parent: { id } }) => id)
-      .includes(this.group.id);
-  }
-
-  get showPassedEvents(): boolean {
-    return this.$route.query.future === "false";
-  }
-
-  set showPassedEvents(value: boolean) {
-    this.$router.replace({ query: { future: (!value).toString() } });
-  }
-}
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
+  return (
+    memberships.value !== undefined &&
+    memberships.value?.length > 0 &&
+    roles.includes(memberships.value[0].role)
+  );
+};
 </script>
-<style lang="scss" scoped>
-.container.section {
-  background: $white;
-}
-
-div.event-list {
-  margin-bottom: 1rem;
-}
-</style>
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
deleted file mode 100644
index f087648cd..000000000
--- a/js/src/views/Event/MyEvents.vue
+++ /dev/null
@@ -1,587 +0,0 @@
-<template>
-  <div class="section container">
-    <h1 class="title">
-      {{ $t("My events") }}
-    </h1>
-    <p>
-      {{
-        $t(
-          "You will find here all the events you have created or of which you are a participant, as well as events organized by groups you follow or are a member of."
-        )
-      }}
-    </p>
-    <div class="buttons" v-if="!hideCreateEventButton">
-      <router-link
-        class="button is-primary"
-        :to="{ name: RouteName.CREATE_EVENT }"
-        >{{ $t("Create event") }}</router-link
-      >
-    </div>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
-    <div class="wrapper">
-      <div class="event-filter">
-        <b-field grouped group-multiline>
-          <b-field>
-            <b-switch v-model="showUpcoming">{{
-              showUpcoming ? $t("Upcoming events") : $t("Past events")
-            }}</b-switch>
-          </b-field>
-          <b-field v-if="showUpcoming">
-            <b-checkbox v-model="showDrafts">{{ $t("Drafts") }}</b-checkbox>
-          </b-field>
-          <b-field v-if="showUpcoming">
-            <b-checkbox v-model="showAttending">{{
-              $t("Attending")
-            }}</b-checkbox>
-          </b-field>
-          <b-field v-if="showUpcoming">
-            <b-checkbox v-model="showMyGroups">{{
-              $t("From my groups")
-            }}</b-checkbox>
-          </b-field>
-          <p v-if="!showUpcoming">
-            {{
-              $tc(
-                "You have attended {count} events in the past.",
-                pastParticipations.total,
-                {
-                  count: pastParticipations.total,
-                }
-              )
-            }}
-          </p>
-          <b-field
-            class="date-filter"
-            expanded
-            :label="
-              showUpcoming
-                ? $t('Showing events starting on')
-                : $t('Showing events before')
-            "
-          >
-            <b-datepicker
-              v-model="dateFilter"
-              :first-day-of-week="firstDayOfWeek"
-            />
-            <b-button
-              @click="dateFilter = new Date()"
-              class="reset-area"
-              icon-left="close"
-              :title="$t('Clear date filter field')"
-            />
-          </b-field>
-        </b-field>
-      </div>
-      <div class="my-events">
-        <section
-          class="py-4"
-          v-if="showUpcoming && showDrafts && drafts.length > 0"
-        >
-          <multi-event-minimalist-card :events="drafts" :showOrganizer="true" />
-        </section>
-        <section
-          class="py-4"
-          v-if="
-            showUpcoming && monthlyFutureEvents && monthlyFutureEvents.size > 0
-          "
-        >
-          <transition-group name="list" tag="p">
-            <div
-              class="mb-5"
-              v-for="month in monthlyFutureEvents"
-              :key="month[0]"
-            >
-              <span class="upcoming-month">{{ month[0] }}</span>
-              <div v-for="element in month[1]" :key="element.id">
-                <event-participation-card
-                  v-if="'role' in element"
-                  :participation="element"
-                  :options="{ hideDate: false }"
-                  @event-deleted="eventDeleted"
-                  class="participation"
-                />
-                <event-minimalist-card
-                  v-else-if="
-                    !monthParticipationsIds(month[1]).includes(element.id)
-                  "
-                  :event="element"
-                  class="participation"
-                />
-              </div>
-            </div>
-          </transition-group>
-          <div class="columns is-centered">
-            <b-button
-              class="column is-narrow"
-              v-if="
-                hasMoreFutureParticipations &&
-                futureParticipations &&
-                futureParticipations.length === limit
-              "
-              @click="loadMoreFutureParticipations"
-              size="is-large"
-              type="is-primary"
-              >{{ $t("Load more") }}</b-button
-            >
-          </div>
-        </section>
-        <section
-          class="has-text-centered not-found"
-          v-if="
-            showUpcoming &&
-            monthlyFutureEvents &&
-            monthlyFutureEvents.size === 0 &&
-            !$apollo.loading
-          "
-        >
-          <div class="img-container" :class="{ webp: supportsWebPFormat }" />
-          <div class="content has-text-centered">
-            <p>
-              {{
-                $t(
-                  "You don't have any upcoming events. Maybe try another filter?"
-                )
-              }}
-            </p>
-            <i18n
-              path="Do you wish to {create_event} or {explore_events}?"
-              tag="p"
-            >
-              <router-link
-                :to="{ name: RouteName.CREATE_EVENT }"
-                slot="create_event"
-                >{{ $t("create an event") }}</router-link
-              >
-              <router-link
-                :to="{ name: RouteName.SEARCH }"
-                slot="explore_events"
-                >{{ $t("explore the events") }}</router-link
-              >
-            </i18n>
-          </div>
-        </section>
-        <section v-if="!showUpcoming && pastParticipations.elements.length > 0">
-          <transition-group name="list" tag="p">
-            <div v-for="month in monthlyPastParticipations" :key="month[0]">
-              <span class="past-month">{{ month[0] }}</span>
-              <event-participation-card
-                v-for="participation in month[1]"
-                :key="participation.id"
-                :participation="participation"
-                :options="{ hideDate: false }"
-                @event-deleted="eventDeleted"
-                class="participation"
-              />
-            </div>
-          </transition-group>
-          <div class="columns is-centered">
-            <b-button
-              class="column is-narrow"
-              v-if="
-                hasMorePastParticipations &&
-                pastParticipations.elements.length === limit
-              "
-              @click="loadMorePastParticipations"
-              size="is-large"
-              type="is-primary"
-              >{{ $t("Load more") }}</b-button
-            >
-          </div>
-        </section>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { CONFIG } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
-import { Component, Vue } from "vue-property-decorator";
-import { ParticipantRole } from "@/types/enums";
-import RouteName from "@/router/name";
-import { supportsWebPFormat } from "@/utils/support";
-import { IParticipant, Participant } from "../../types/participant.model";
-import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
-import { EventModel, IEvent } from "../../types/event.model";
-import EventParticipationCard from "../../components/Event/EventParticipationCard.vue";
-import MultiEventMinimalistCard from "../../components/Event/MultiEventMinimalistCard.vue";
-import EventMinimalistCard from "../../components/Event/EventMinimalistCard.vue";
-import Subtitle from "../../components/Utils/Subtitle.vue";
-import {
-  LOGGED_USER_PARTICIPATIONS,
-  LOGGED_USER_UPCOMING_EVENTS,
-} from "@/graphql/participant";
-import { Paginate } from "@/types/paginate";
-
-type Eventable = IParticipant | IEvent;
-
-@Component({
-  components: {
-    Subtitle,
-    MultiEventMinimalistCard,
-    EventParticipationCard,
-    EventMinimalistCard,
-  },
-  apollo: {
-    config: CONFIG,
-    userUpcomingEvents: {
-      query: LOGGED_USER_UPCOMING_EVENTS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: 1,
-          limit: 10,
-          afterDateTime: this.dateFilter,
-        };
-      },
-      update(data) {
-        this.futureParticipations = data.loggedUser.participations.elements.map(
-          (participation: IParticipant) => new Participant(participation)
-        );
-        this.groupEvents = data.loggedUser.followedGroupEvents.elements.map(
-          ({ event }: { event: IEvent }) => event
-        );
-      },
-    },
-    drafts: {
-      query: LOGGED_USER_DRAFTS,
-      fetchPolicy: "cache-and-network",
-      variables: {
-        page: 1,
-        limit: 10,
-      },
-      update: (data) =>
-        data.loggedUser.drafts.map((event: IEvent) => new EventModel(event)),
-    },
-    pastParticipations: {
-      query: LOGGED_USER_PARTICIPATIONS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: 1,
-          limit: 10,
-          beforeDateTime: this.dateFilter,
-        };
-      },
-      update: (data) => data.loggedUser.participations,
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("My events") as string,
-    };
-  },
-})
-export default class MyEvents extends Vue {
-  futurePage = 1;
-
-  pastPage = 1;
-
-  limit = 10;
-
-  get showUpcoming(): boolean {
-    return ((this.$route.query.showUpcoming as string) || "true") === "true";
-  }
-
-  set showUpcoming(showUpcoming: boolean) {
-    this.$router.push({
-      name: RouteName.MY_EVENTS,
-      query: { ...this.$route.query, showUpcoming: showUpcoming.toString() },
-    });
-  }
-
-  get showDrafts(): boolean {
-    return ((this.$route.query.showDrafts as string) || "true") === "true";
-  }
-
-  set showDrafts(showDrafts: boolean) {
-    this.$router.push({
-      name: RouteName.MY_EVENTS,
-      query: { ...this.$route.query, showDrafts: showDrafts.toString() },
-    });
-  }
-
-  get showAttending(): boolean {
-    return ((this.$route.query.showAttending as string) || "true") === "true";
-  }
-
-  set showAttending(showAttending: boolean) {
-    this.$router.push({
-      name: RouteName.MY_EVENTS,
-      query: { ...this.$route.query, showAttending: showAttending.toString() },
-    });
-  }
-
-  get showMyGroups(): boolean {
-    return ((this.$route.query.showMyGroups as string) || "false") === "true";
-  }
-
-  set showMyGroups(showMyGroups: boolean) {
-    this.$router.push({
-      name: RouteName.MY_EVENTS,
-      query: { ...this.$route.query, showMyGroups: showMyGroups.toString() },
-    });
-  }
-
-  get dateFilter(): Date {
-    const query = this.$route.query.dateFilter as string;
-    if (query && /(\d{4}-\d{2}-\d{2})/.test(query)) {
-      return new Date(`${query}T00:00:00Z`);
-    }
-    return new Date();
-  }
-
-  set dateFilter(date: Date) {
-    const pad = (number: number) => {
-      if (number < 10) {
-        return "0" + number;
-      }
-      return number;
-    };
-    const stringifiedDate = `${date.getFullYear()}-${pad(
-      date.getMonth() + 1
-    )}-${pad(date.getDate())}`;
-
-    if (this.$route.query.dateFilter !== stringifiedDate) {
-      this.$router.push({
-        name: RouteName.MY_EVENTS,
-        query: {
-          ...this.$route.query,
-          dateFilter: stringifiedDate,
-        },
-      });
-    }
-  }
-
-  config!: IConfig;
-
-  futureParticipations: IParticipant[] = [];
-
-  groupEvents: IEvent[] = [];
-
-  hasMoreFutureParticipations = true;
-
-  pastParticipations: Paginate<IParticipant> = { elements: [], total: 0 };
-
-  hasMorePastParticipations = true;
-
-  drafts: IEvent[] = [];
-
-  RouteName = RouteName;
-
-  supportsWebPFormat = supportsWebPFormat;
-
-  static monthlyEvents(
-    elements: Eventable[],
-    revertSort = false
-  ): Map<string, Eventable[]> {
-    const res = elements.filter((element: Eventable) => {
-      if ("role" in element) {
-        return (
-          element.event.beginsOn != null &&
-          element.role !== ParticipantRole.REJECTED
-        );
-      }
-      return element.beginsOn != null;
-    });
-    if (revertSort) {
-      res.sort((a: Eventable, b: Eventable) => {
-        const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
-        const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
-        return new Date(bTime).getTime() - new Date(aTime).getTime();
-      });
-    } else {
-      res.sort((a: Eventable, b: Eventable) => {
-        const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
-        const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
-        return new Date(aTime).getTime() - new Date(bTime).getTime();
-      });
-    }
-    return res.reduce((acc: Map<string, Eventable[]>, element: Eventable) => {
-      const month = new Date(
-        "role" in element ? element.event.beginsOn : element.beginsOn
-      ).toLocaleDateString(undefined, {
-        year: "numeric",
-        month: "long",
-      });
-      const filteredElements: Eventable[] = acc.get(month) || [];
-      filteredElements.push(element);
-      acc.set(month, filteredElements);
-      return acc;
-    }, new Map());
-  }
-
-  get monthlyFutureEvents(): Map<string, Eventable[]> {
-    let eventable = [] as Eventable[];
-    if (this.showAttending) {
-      eventable = [...eventable, ...this.futureParticipations];
-    }
-    if (this.showMyGroups) {
-      eventable = [...eventable, ...this.groupEvents];
-    }
-    return MyEvents.monthlyEvents(eventable);
-  }
-
-  get monthlyPastParticipations(): Map<string, Eventable[]> {
-    return MyEvents.monthlyEvents(this.pastParticipations.elements, true);
-  }
-
-  monthParticipationsIds(elements: Eventable[]): string[] {
-    const res = elements.filter((element: Eventable) => {
-      return "role" in element;
-    }) as IParticipant[];
-    return res.map(({ event }: { event: IEvent }) => {
-      return event.id as string;
-    });
-  }
-
-  loadMoreFutureParticipations(): void {
-    this.futurePage += 1;
-    if (this.$apollo.queries.futureParticipations) {
-      this.$apollo.queries.futureParticipations.fetchMore({
-        // New variables
-        variables: {
-          page: this.futurePage,
-          limit: this.limit,
-        },
-      });
-    }
-  }
-
-  loadMorePastParticipations(): void {
-    this.pastPage += 1;
-    if (this.$apollo.queries.pastParticipations) {
-      this.$apollo.queries.pastParticipations.fetchMore({
-        // New variables
-        variables: {
-          page: this.pastPage,
-          limit: this.limit,
-        },
-      });
-    }
-  }
-
-  eventDeleted(eventid: string): void {
-    this.futureParticipations = this.futureParticipations.filter(
-      (participation) => participation.event.id !== eventid
-    );
-    this.pastParticipations = {
-      elements: this.pastParticipations.elements.filter(
-        (participation) => participation.event.id !== eventid
-      ),
-      total: this.pastParticipations.total - 1,
-    };
-  }
-
-  get hideCreateEventButton(): boolean {
-    return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
-  }
-
-  get firstDayOfWeek(): number {
-    return this.$dateFnsLocale?.options?.weekStartsOn || 0;
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-@import "~bulma/sass/utilities/mixins.sass";
-
-main > .container {
-  background: $white;
-
-  & > h1 {
-    margin: 10px auto 5px;
-  }
-}
-
-.participation {
-  margin: 1rem auto;
-}
-
-section {
-  .upcoming-month,
-  .past-month {
-    text-transform: capitalize;
-    display: inline-block;
-    position: relative;
-    font-size: 1.3rem;
-
-    &::after {
-      background: $orange-3;
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 100%;
-      content: "";
-      width: calc(100% + 30px);
-      height: 3px;
-      max-width: 150px;
-    }
-  }
-}
-
-.not-found {
-  margin-top: 2rem;
-  .img-container {
-    background-image: url("../../../public/img/pics/event_creation-480w.jpg");
-    @media (min-resolution: 2dppx) {
-      & {
-        background-image: url("../../../public/img/pics/event_creation-1024w.jpg");
-      }
-    }
-
-    &.webp {
-      background-image: url("../../../public/img/pics/event_creation-480w.webp");
-      @media (min-resolution: 2dppx) {
-        & {
-          background-image: url("../../../public/img/pics/event_creation-1024w.webp");
-        }
-      }
-    }
-    max-width: 450px;
-    height: 300px;
-    box-shadow: 0 0 8px 8px white inset;
-    background-size: cover;
-    border-radius: 10px;
-    margin: auto auto 1rem;
-  }
-}
-
-.wrapper {
-  display: grid;
-  grid-template-areas: "filter" "events";
-  align-items: start;
-
-  @include desktop {
-    gap: 2rem;
-    grid-template-columns: 1fr 3fr;
-    grid-template-areas: "filter events";
-  }
-
-  .event-filter {
-    grid-area: filter;
-    background: lightgray;
-    border-radius: 5px;
-    padding: 0.75rem 1.25rem 0.25rem;
-
-    @include desktop {
-      padding: 2rem 1.25rem;
-      ::v-deep .field.is-grouped {
-        display: block;
-      }
-    }
-
-    ::v-deep .field > .field {
-      margin: 0 auto 1.25rem !important;
-    }
-
-    .date-filter ::v-deep .field-body {
-      display: block;
-    }
-  }
-  .my-events {
-    grid-area: events;
-  }
-}
-</style>
diff --git a/js/src/views/Event/MyEventsView.vue b/js/src/views/Event/MyEventsView.vue
new file mode 100644
index 000000000..537aaa189
--- /dev/null
+++ b/js/src/views/Event/MyEventsView.vue
@@ -0,0 +1,495 @@
+<template>
+  <div class="container mx-auto px-1">
+    <h1>
+      {{ t("My events") }}
+    </h1>
+    <p>
+      {{
+        t(
+          "You will find here all the events you have created or of which you are a participant, as well as events organized by groups you follow or are a member of."
+        )
+      }}
+    </p>
+    <div class="my-2" v-if="!hideCreateEventButton">
+      <o-button
+        tag="router-link"
+        variant="primary"
+        :to="{ name: RouteName.CREATE_EVENT }"
+        >{{ t("Create event") }}</o-button
+      >
+    </div>
+    <!-- <o-loading v-model:active="$apollo.loading"></o-loading> -->
+    <div class="wrapper flex flex-wrap gap-4 items-start">
+      <div
+        class="event-filter rounded p-3 flex-auto md:flex-none bg-zinc-300 dark:bg-zinc-700"
+      >
+        <o-field>
+          <o-switch v-model="showUpcoming">{{
+            showUpcoming ? t("Upcoming events") : t("Past events")
+          }}</o-switch>
+        </o-field>
+        <o-field v-if="showUpcoming">
+          <o-checkbox v-model="showDrafts">{{ t("Drafts") }}</o-checkbox>
+        </o-field>
+        <o-field v-if="showUpcoming">
+          <o-checkbox v-model="showAttending">{{ t("Attending") }}</o-checkbox>
+        </o-field>
+        <o-field v-if="showUpcoming">
+          <o-checkbox v-model="showMyGroups">{{
+            t("From my groups")
+          }}</o-checkbox>
+        </o-field>
+        <p v-if="!showUpcoming">
+          {{
+            t(
+              "You have attended {count} events in the past.",
+              {
+                count: pastParticipations.total,
+              },
+              pastParticipations.total
+            )
+          }}
+        </p>
+        <o-field
+          class="date-filter"
+          expanded
+          :label="
+            showUpcoming
+              ? t('Showing events starting on')
+              : t('Showing events before')
+          "
+          labelFor="events-start-datepicker"
+        >
+          <o-datepicker
+            v-model="dateFilter"
+            :first-day-of-week="firstDayOfWeek"
+            id="events-start-datepicker"
+          />
+          <o-button
+            @click="dateFilter = new Date()"
+            class="reset-area"
+            icon-left="close"
+            :title="t('Clear date filter field')"
+          />
+        </o-field>
+      </div>
+      <div class="my-events flex-1">
+        <section
+          class="py-4"
+          v-if="showUpcoming && showDrafts && drafts.length > 0"
+        >
+          <multi-event-minimalist-card :events="drafts" :showOrganizer="true" />
+        </section>
+        <section
+          class="py-4"
+          v-if="
+            showUpcoming && monthlyFutureEvents && monthlyFutureEvents.size > 0
+          "
+        >
+          <transition-group name="list" tag="p">
+            <div
+              class="mb-5"
+              v-for="month of monthlyFutureEvents"
+              :key="month[0]"
+            >
+              <span class="upcoming-month">{{ month[0] }}</span>
+              <div v-for="element in month[1]" :key="element.id">
+                <event-participation-card
+                  v-if="'role' in element"
+                  :participation="element"
+                  @event-deleted="eventDeleted"
+                  class="participation"
+                />
+                <event-minimalist-card
+                  v-else-if="
+                    element.id &&
+                    !monthParticipationsIds(month[1]).includes(element?.id)
+                  "
+                  :event="element"
+                  class="participation"
+                />
+              </div>
+            </div>
+          </transition-group>
+          <div class="columns is-centered">
+            <o-button
+              class="column is-narrow"
+              v-if="
+                hasMoreFutureParticipations &&
+                futureParticipations &&
+                futureParticipations.length === limit
+              "
+              @click="loadMoreFutureParticipations"
+              size="large"
+              variant="primary"
+              >{{ t("Load more") }}</o-button
+            >
+          </div>
+        </section>
+        <section
+          class="text-center not-found"
+          v-if="
+            showUpcoming &&
+            monthlyFutureEvents &&
+            monthlyFutureEvents.length === 0 &&
+            true // !$apollo.loading
+          "
+        >
+          <div class="img-container h-64" />
+          <div class="text-center prose dark:prose-invert">
+            <p>
+              {{
+                t(
+                  "You don't have any upcoming events. Maybe try another filter?"
+                )
+              }}
+            </p>
+            <i18n-t
+              keypath="Do you wish to {create_event} or {explore_events}?"
+              tag="p"
+            >
+              <template #create_event>
+                <router-link :to="{ name: RouteName.CREATE_EVENT }">{{
+                  t("create an event")
+                }}</router-link>
+              </template>
+              <template #explore_events>
+                <router-link :to="{ name: RouteName.SEARCH }">{{
+                  t("explore the events")
+                }}</router-link>
+              </template>
+            </i18n-t>
+          </div>
+        </section>
+        <section v-if="!showUpcoming && pastParticipations.elements.length > 0">
+          <transition-group name="list" tag="p">
+            <div v-for="month in monthlyPastParticipations" :key="month[0]">
+              <span class="past-month">{{ month[0] }}</span>
+              <event-participation-card
+                v-for="participation in month[1]"
+                :key="participation.id"
+                :participation="(participation as IParticipant)"
+                :options="{ hideDate: false }"
+                @event-deleted="eventDeleted"
+                class="participation"
+              />
+            </div>
+          </transition-group>
+          <div class="columns is-centered">
+            <o-button
+              class="column is-narrow"
+              v-if="
+                hasMorePastParticipations &&
+                pastParticipations.elements.length === limit
+              "
+              @click="loadMorePastParticipations"
+              size="large"
+              variant="primary"
+              >{{ t("Load more") }}</o-button
+            >
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ParticipantRole } from "@/types/enums";
+import RouteName from "@/router/name";
+import { IParticipant } from "../../types/participant.model";
+import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
+import { IEvent } from "../../types/event.model";
+import EventParticipationCard from "../../components/Event/EventParticipationCard.vue";
+import MultiEventMinimalistCard from "../../components/Event/MultiEventMinimalistCard.vue";
+import EventMinimalistCard from "../../components/Event/EventMinimalistCard.vue";
+import {
+  LOGGED_USER_PARTICIPATIONS,
+  LOGGED_USER_UPCOMING_EVENTS,
+} from "@/graphql/participant";
+import { useQuery } from "@vue/apollo-composable";
+import { computed, inject, ref } from "vue";
+import { IUser } from "@/types/current-user.model";
+import { booleanTransformer, useRouteQuery } from "vue-use-route-query";
+import { Locale } from "date-fns";
+import { useI18n } from "vue-i18n";
+import { useRestrictions } from "@/composition/apollo/config";
+
+type Eventable = IParticipant | IEvent;
+
+const { t } = useI18n({ useScope: "global" });
+
+const futurePage = ref(1);
+const pastPage = ref(1);
+const limit = ref(10);
+
+const showUpcoming = useRouteQuery("showUpcoming", true, booleanTransformer);
+const showDrafts = useRouteQuery("showDrafts", true, booleanTransformer);
+const showAttending = useRouteQuery("showAttending", true, booleanTransformer);
+const showMyGroups = useRouteQuery("showMyGroups", false, booleanTransformer);
+const dateFilter = useRouteQuery("dateFilter", new Date(), {
+  fromQuery(query) {
+    if (query && /(\d{4}-\d{2}-\d{2})/.test(query)) {
+      return new Date(`${query}T00:00:00Z`);
+    }
+    return new Date();
+  },
+  toQuery(value: Date) {
+    const pad = (number: number) => {
+      if (number < 10) {
+        return "0" + number;
+      }
+      return number;
+    };
+    return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(
+      value.getDate()
+    )}`;
+  },
+});
+
+const hasMoreFutureParticipations = ref(true);
+const hasMorePastParticipations = ref(true);
+
+// config: CONFIG
+
+const {
+  result: loggedUserUpcomingEventsResult,
+  fetchMore: fetchMoreUpcomingEvents,
+} = useQuery<{
+  loggedUser: IUser;
+}>(LOGGED_USER_UPCOMING_EVENTS, () => ({
+  page: 1,
+  limit: 10,
+  afterDateTime: dateFilter.value,
+}));
+
+const futureParticipations = computed(
+  () =>
+    loggedUserUpcomingEventsResult.value?.loggedUser.participations.elements ??
+    []
+);
+const groupEvents = computed(
+  () =>
+    loggedUserUpcomingEventsResult.value?.loggedUser.followedGroupEvents
+      .elements ?? []
+);
+
+const { result: draftsResult } = useQuery<{
+  loggedUser: Pick<IUser, "drafts">;
+}>(LOGGED_USER_DRAFTS, () => ({ page: 1, limit: 10 }));
+const drafts = computed(() => draftsResult.value?.loggedUser.drafts ?? []);
+
+const { result: participationsResult, fetchMore: fetchMoreParticipations } =
+  useQuery<{
+    loggedUser: Pick<IUser, "participations">;
+  }>(LOGGED_USER_PARTICIPATIONS, () => ({ page: 1, limit: 10 }));
+const pastParticipations = computed(
+  () =>
+    participationsResult.value?.loggedUser.participations ?? {
+      elements: [],
+      total: 0,
+    }
+);
+
+// metaInfo() {
+//   return {
+//     title: this.t("My events") as string,
+//   };
+// },
+
+const monthlyEvents = (
+  elements: Eventable[],
+  revertSort = false
+): Map<string, Eventable[]> => {
+  const res = elements.filter((element: Eventable) => {
+    if ("role" in element) {
+      return (
+        element.event.beginsOn != null &&
+        element.role !== ParticipantRole.REJECTED
+      );
+    }
+    return element.beginsOn != null;
+  });
+  if (revertSort) {
+    res.sort((a: Eventable, b: Eventable) => {
+      const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
+      const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
+      return new Date(bTime).getTime() - new Date(aTime).getTime();
+    });
+  } else {
+    res.sort((a: Eventable, b: Eventable) => {
+      const aTime = "role" in a ? a.event.beginsOn : a.beginsOn;
+      const bTime = "role" in b ? b.event.beginsOn : b.beginsOn;
+      return new Date(aTime).getTime() - new Date(bTime).getTime();
+    });
+  }
+  return res.reduce((acc: Map<string, Eventable[]>, element: Eventable) => {
+    const month = new Date(
+      "role" in element ? element.event.beginsOn : element.beginsOn
+    ).toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "long",
+    });
+    const filteredElements: Eventable[] = acc.get(month) || [];
+    filteredElements.push(element);
+    acc.set(month, filteredElements);
+    return acc;
+  }, new Map());
+};
+
+const monthlyFutureEvents = computed((): Map<string, Eventable[]> => {
+  let eventable = [] as Eventable[];
+  if (showAttending.value) {
+    eventable = [...eventable, ...futureParticipations.value];
+  }
+  if (showMyGroups.value) {
+    eventable = [...eventable, ...groupEvents.value];
+  }
+  return monthlyEvents(eventable);
+});
+
+const monthlyPastParticipations = computed((): Map<string, Eventable[]> => {
+  return monthlyEvents(pastParticipations.value.elements, true);
+});
+
+const monthParticipationsIds = (elements: Eventable[]): string[] => {
+  const res = elements.filter((element: Eventable) => {
+    return "role" in element;
+  }) as IParticipant[];
+  return res.map(({ event }: { event: IEvent }) => {
+    return event.id as string;
+  });
+};
+
+const loadMoreFutureParticipations = (): void => {
+  futurePage.value += 1;
+  if (fetchMoreUpcomingEvents) {
+    fetchMoreUpcomingEvents({
+      // New variables
+      variables: {
+        page: futurePage.value,
+        limit: limit.value,
+      },
+    });
+  }
+};
+
+const loadMorePastParticipations = (): void => {
+  pastPage.value += 1;
+  if (fetchMoreParticipations) {
+    fetchMoreParticipations({
+      // New variables
+      variables: {
+        page: pastPage.value,
+        limit: limit.value,
+      },
+    });
+  }
+};
+
+const eventDeleted = (eventid: string): void => {
+  futureParticipations.value = futureParticipations.value.filter(
+    (participation) => participation.event.id !== eventid
+  );
+  pastParticipations.value = {
+    elements: pastParticipations.value.elements.filter(
+      (participation) => participation.event.id !== eventid
+    ),
+    total: pastParticipations.value.total - 1,
+  };
+};
+
+const { restrictions } = useRestrictions();
+
+const hideCreateEventButton = computed((): boolean => {
+  return restrictions.value?.onlyGroupsCanCreateEvents === true;
+});
+
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+
+const firstDayOfWeek = computed((): number => {
+  return dateFnsLocale?.options?.weekStartsOn ?? 0;
+});
+</script>
+
+<style lang="scss" scoped>
+.participation {
+  margin: 1rem auto;
+}
+
+section {
+  .upcoming-month,
+  .past-month {
+    text-transform: capitalize;
+    display: inline-block;
+    position: relative;
+    font-size: 1.3rem;
+
+    &::after {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 100%;
+      content: "";
+      width: calc(100% + 30px);
+      height: 3px;
+      max-width: 150px;
+    }
+  }
+}
+
+.not-found {
+  margin-top: 2rem;
+  .img-container {
+    background-image: url("/img/pics/event_creation-480w.webp");
+    @media (min-resolution: 2dppx) {
+      & {
+        background-image: url("/img/pics/event_creation-1024w.webp");
+      }
+    }
+    max-width: 450px;
+    height: 300px;
+    box-shadow: 0 0 8px 8px white inset;
+    @media (prefers-color-scheme: dark) {
+      box-shadow: 0 0 8px 8px #374151 inset;
+    }
+    background-size: cover;
+    border-radius: 10px;
+    margin: auto auto 1rem;
+  }
+}
+
+.wrapper {
+  // display: grid;
+  // grid-template-areas: "filter" "events";
+  // align-items: start;
+
+  // // @include desktop {
+  // gap: 2rem;
+  // grid-template-columns: 1fr 3fr;
+  // grid-template-areas: "filter events";
+  // // }
+
+  .event-filter {
+    grid-area: filter;
+
+    // @include desktop {
+    //   padding: 2rem 1.25rem;
+    //   :deep(.field.is-grouped) {
+    //     display: block;
+    //   }
+    // }
+
+    :deep(.field > .field) {
+      margin: 0 auto 1.25rem !important;
+    }
+
+    .date-filter :deep(.field-body) {
+      display: block;
+    }
+  }
+  .my-events {
+    grid-area: events;
+  }
+}
+</style>
diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
deleted file mode 100644
index b4ab755f6..000000000
--- a/js/src/views/Event/Participants.vue
+++ /dev/null
@@ -1,569 +0,0 @@
-<template>
-  <section class="section container" v-if="event">
-    <breadcrumbs-nav
-      :links="[
-        { name: RouteName.MY_EVENTS, text: $t('My events') },
-        {
-          name: RouteName.EVENT,
-          params: { uuid: event.uuid },
-          text: event.title,
-        },
-        {
-          name: RouteName.PARTICIPANTS,
-          params: { uuid: event.uuid },
-          text: $t('Participants'),
-        },
-      ]"
-    />
-    <h1 class="title">{{ $t("Participants") }}</h1>
-    <div class="level">
-      <div class="level-left">
-        <div class="level-item">
-          <b-field :label="$t('Status')" horizontal label-for="role-select">
-            <b-select v-model="role" id="role-select">
-              <option :value="null">
-                {{ $t("Everything") }}
-              </option>
-              <option :value="ParticipantRole.CREATOR">
-                {{ $t("Organizer") }}
-              </option>
-              <option :value="ParticipantRole.PARTICIPANT">
-                {{ $t("Participant") }}
-              </option>
-              <option :value="ParticipantRole.NOT_APPROVED">
-                {{ $t("Not approved") }}
-              </option>
-              <option :value="ParticipantRole.REJECTED">
-                {{ $t("Rejected") }}
-              </option>
-            </b-select>
-          </b-field>
-        </div>
-        <div class="level-item" v-if="exportFormats.length > 0">
-          <b-dropdown aria-role="list">
-            <template #trigger="{ active }">
-              <b-button
-                :label="$t('Export')"
-                type="is-primary"
-                :icon-right="active ? 'menu-up' : 'menu-down'"
-              />
-            </template>
-
-            <b-dropdown-item
-              has-link
-              v-for="format in exportFormats"
-              :key="format"
-              aria-role="listitem"
-              @click="exportParticipants(format)"
-              @keyup.enter="exportParticipants(format)"
-            >
-              <button class="dropdown-button">
-                <b-icon :icon="formatToIcon(format)"></b-icon>
-                {{ format }}
-              </button>
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
-      </div>
-    </div>
-    <b-table
-      :data="event.participants.elements"
-      ref="queueTable"
-      detailed
-      detail-key="id"
-      :checked-rows.sync="checkedRows"
-      checkable
-      :is-row-checkable="(row) => row.role !== ParticipantRole.CREATOR"
-      checkbox-position="left"
-      :show-detail-icon="false"
-      :loading="this.$apollo.loading"
-      paginated
-      :current-page="page"
-      backend-pagination
-      :pagination-simple="true"
-      :aria-next-label="$t('Next page')"
-      :aria-previous-label="$t('Previous page')"
-      :aria-page-label="$t('Page')"
-      :aria-current-label="$t('Current page')"
-      :total="event.participants.total"
-      :per-page="PARTICIPANTS_PER_PAGE"
-      backend-sorting
-      :default-sort-direction="'desc'"
-      :default-sort="['insertedAt', 'desc']"
-      @page-change="(newPage) => (page = newPage)"
-      @sort="(field, order) => $emit('sort', field, order)"
-    >
-      <b-table-column
-        field="actor.preferredUsername"
-        :label="$t('Participant')"
-        v-slot="props"
-      >
-        <article class="media">
-          <figure
-            class="media-left image is-48x48"
-            v-if="props.row.actor.avatar"
-          >
-            <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
-          </figure>
-          <b-icon
-            class="media-left"
-            v-else-if="props.row.actor.preferredUsername === 'anonymous'"
-            size="is-large"
-            icon="incognito"
-          />
-          <b-icon
-            class="media-left"
-            v-else
-            size="is-large"
-            icon="account-circle"
-          />
-          <div class="media-content">
-            <div class="content">
-              <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
-                <span v-if="props.row.actor.name">{{
-                  props.row.actor.name
-                }}</span
-                ><br />
-                <span class="is-size-7 has-text-grey-dark"
-                  >@{{ usernameWithDomain(props.row.actor) }}</span
-                >
-              </span>
-              <span v-else>
-                {{ $t("Anonymous participant") }}
-              </span>
-            </div>
-          </div>
-        </article>
-      </b-table-column>
-      <b-table-column field="role" :label="$t('Role')" v-slot="props">
-        <b-tag
-          type="is-primary"
-          v-if="props.row.role === ParticipantRole.CREATOR"
-        >
-          {{ $t("Organizer") }}
-        </b-tag>
-        <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
-          {{ $t("Participant") }}
-        </b-tag>
-        <b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
-          {{ $t("Not confirmed") }}
-        </b-tag>
-        <b-tag
-          type="is-warning"
-          v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
-        >
-          {{ $t("Not approved") }}
-        </b-tag>
-        <b-tag
-          type="is-danger"
-          v-else-if="props.row.role === ParticipantRole.REJECTED"
-        >
-          {{ $t("Rejected") }}
-        </b-tag>
-      </b-table-column>
-      <b-table-column
-        field="metadata.message"
-        class="column-message"
-        :label="$t('Message')"
-        v-slot="props"
-      >
-        <div
-          @click="toggleQueueDetails(props.row)"
-          :class="{
-            'ellipsed-message':
-              props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
-          }"
-          v-if="props.row.metadata && props.row.metadata.message"
-        >
-          <p v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH">
-            {{ props.row.metadata.message | ellipsize }}
-          </p>
-          <p v-else>
-            {{ props.row.metadata.message }}
-          </p>
-          <button
-            type="button"
-            class="button is-text"
-            v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
-            @click.stop="toggleQueueDetails(props.row)"
-          >
-            {{
-              openDetailedRows[props.row.id] ? $t("View less") : $t("View more")
-            }}
-          </button>
-        </div>
-        <p v-else class="has-text-grey-dark">
-          {{ $t("No message") }}
-        </p>
-      </b-table-column>
-      <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
-        <span class="has-text-centered">
-          {{ props.row.insertedAt | formatDateString }}<br />{{
-            props.row.insertedAt | formatTimeString
-          }}
-        </span>
-      </b-table-column>
-      <template #detail="props">
-        <article v-html="nl2br(props.row.metadata.message)" />
-      </template>
-      <template slot="empty">
-        <section class="section">
-          <div class="content has-text-grey-dark has-text-centered">
-            <p>{{ $t("No participant matches the filters") }}</p>
-          </div>
-        </section>
-      </template>
-      <template slot="bottom-left">
-        <div class="buttons">
-          <b-button
-            @click="acceptParticipants(checkedRows)"
-            type="is-success"
-            :disabled="!canAcceptParticipants"
-          >
-            {{
-              $tc(
-                "No participant to approve|Approve participant|Approve {number} participants",
-                checkedRows.length,
-                { number: checkedRows.length }
-              )
-            }}
-          </b-button>
-          <b-button
-            @click="refuseParticipants(checkedRows)"
-            type="is-danger"
-            :disabled="!canRefuseParticipants"
-          >
-            {{
-              $tc(
-                "No participant to reject|Reject participant|Reject {number} participants",
-                checkedRows.length,
-                { number: checkedRows.length }
-              )
-            }}
-          </b-button>
-        </div>
-      </template>
-    </b-table>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
-import { ParticipantRole } from "@/types/enums";
-import { IParticipant } from "../../types/participant.model";
-import { IEvent, IEventParticipantStats } from "../../types/event.model";
-import {
-  EXPORT_EVENT_PARTICIPATIONS,
-  PARTICIPANTS,
-  UPDATE_PARTICIPANT,
-} from "../../graphql/event";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import { IPerson, usernameWithDomain } from "../../types/actor";
-import { EVENT_PARTICIPANTS } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
-import { nl2br } from "../../utils/html";
-import { asyncForEach } from "../../utils/asyncForEach";
-import RouteName from "../../router/name";
-import VueRouter from "vue-router";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-const PARTICIPANTS_PER_PAGE = 10;
-const MESSAGE_ELLIPSIS_LENGTH = 130;
-
-type exportFormat = "CSV" | "PDF" | "ODS";
-
-@Component({
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-    config: EVENT_PARTICIPANTS,
-    event: {
-      query: PARTICIPANTS,
-      variables() {
-        return {
-          uuid: this.eventId,
-          page: this.page,
-          limit: PARTICIPANTS_PER_PAGE,
-          roles: this.role,
-        };
-      },
-      skip() {
-        return !this.currentActor.id;
-      },
-    },
-  },
-  filters: {
-    ellipsize: (text?: string) =>
-      text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat("…"),
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Participants") as string,
-    };
-  },
-})
-export default class Participants extends Vue {
-  @Prop({ required: true }) eventId!: string;
-
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  set page(page: number) {
-    this.pushRouter(RouteName.PARTICIPATIONS, {
-      page: page.toString(),
-    });
-  }
-
-  get role(): ParticipantRole | null {
-    if (
-      Object.values(ParticipantRole).includes(
-        this.$route.query.role as ParticipantRole
-      )
-    ) {
-      return this.$route.query.role as ParticipantRole;
-    }
-    return null;
-  }
-
-  set role(role: ParticipantRole | null) {
-    this.pushRouter(RouteName.PARTICIPATIONS, {
-      role: role || "",
-    });
-  }
-
-  limit = PARTICIPANTS_PER_PAGE;
-
-  event!: IEvent;
-
-  config!: IConfig;
-
-  ParticipantRole = ParticipantRole;
-
-  currentActor!: IPerson;
-
-  PARTICIPANTS_PER_PAGE = PARTICIPANTS_PER_PAGE;
-
-  checkedRows: IParticipant[] = [];
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  @Ref("queueTable") readonly queueTable!: any;
-
-  get participantStats(): IEventParticipantStats | null {
-    if (!this.event) return null;
-    return this.event.participantStats;
-  }
-
-  async acceptParticipant(participant: IParticipant): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: UPDATE_PARTICIPANT,
-        variables: {
-          id: participant.id,
-          role: ParticipantRole.PARTICIPANT,
-        },
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async refuseParticipant(participant: IParticipant): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: UPDATE_PARTICIPANT,
-        variables: {
-          id: participant.id,
-          role: ParticipantRole.REJECTED,
-        },
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async acceptParticipants(participants: IParticipant[]): Promise<void> {
-    await asyncForEach(participants, async (participant: IParticipant) => {
-      await this.acceptParticipant(participant);
-    });
-    this.checkedRows = [];
-  }
-
-  async refuseParticipants(participants: IParticipant[]): Promise<void> {
-    await asyncForEach(participants, async (participant: IParticipant) => {
-      await this.refuseParticipant(participant);
-    });
-    this.checkedRows = [];
-  }
-
-  async exportParticipants(type: exportFormat): Promise<void> {
-    try {
-      const {
-        data: { exportEventParticipants },
-      } = await this.$apollo.mutate({
-        mutation: EXPORT_EVENT_PARTICIPATIONS,
-        variables: {
-          eventId: this.event.id,
-          format: type,
-        },
-      });
-      const link =
-        window.origin +
-        "/exports/" +
-        type.toLowerCase() +
-        "/" +
-        exportEventParticipants;
-      console.log(link);
-      const a = document.createElement("a");
-      a.style.display = "none";
-      document.body.appendChild(a);
-      a.href = link;
-      a.setAttribute("download", "true");
-      a.click();
-      window.URL.revokeObjectURL(a.href);
-      document.body.removeChild(a);
-    } catch (e: any) {
-      console.error(e);
-      if (e.graphQLErrors && e.graphQLErrors.length > 0) {
-        this.$notifier.error(e.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  get exportFormats(): string[] {
-    return (this.config?.exportFormats?.eventParticipants || []).map((key) =>
-      key.toUpperCase()
-    );
-  }
-
-  formatToIcon(format: exportFormat): string {
-    switch (format) {
-      case "CSV":
-        return "file-delimited";
-      case "PDF":
-        return "file-pdf-box";
-      case "ODS":
-        return "google-spreadsheet";
-    }
-  }
-
-  /**
-   * We can accept participants if at least one of them is not approved
-   */
-  get canAcceptParticipants(): boolean {
-    return this.checkedRows.some((participant: IParticipant) =>
-      [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(
-        participant.role
-      )
-    );
-  }
-
-  /**
-   * We can refuse participants if at least one of them is something different than not approved
-   */
-  get canRefuseParticipants(): boolean {
-    return this.checkedRows.some(
-      (participant: IParticipant) =>
-        participant.role !== ParticipantRole.REJECTED
-    );
-  }
-
-  MESSAGE_ELLIPSIS_LENGTH = MESSAGE_ELLIPSIS_LENGTH;
-
-  nl2br = nl2br;
-
-  toggleQueueDetails(row: IParticipant): void {
-    if (
-      row.metadata.message &&
-      row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH
-    )
-      return;
-    this.queueTable.toggleDetails(row);
-    if (row.id) {
-      this.openDetailedRows[row.id] = !this.openDetailedRows[row.id];
-    }
-  }
-
-  openDetailedRows: Record<string, boolean> = {};
-
-  async pushRouter(
-    routeName: string,
-    args: Record<string, string>
-  ): Promise<void> {
-    try {
-      await this.$router.push({
-        name: routeName,
-        query: { ...this.$route.query, ...args },
-      });
-      this.$apollo.queries.event.refetch();
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-section.container.container {
-  padding: 1rem;
-  background: $white;
-}
-
-.table {
-  .column-message {
-    vertical-align: middle;
-  }
-  .ellipsed-message {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    p {
-      flex: 1;
-      min-width: 200px;
-    }
-
-    button {
-      display: inline;
-    }
-  }
-
-  span.tag {
-    &.is-primary {
-      background-color: $primary;
-    }
-  }
-}
-
-nav.breadcrumb {
-  a {
-    text-decoration: none;
-  }
-}
-
-button.dropdown-button {
-  &:hover {
-    background-color: #f5f5f5;
-    color: #0a0a0a;
-  }
-  width: 100%;
-  display: flex;
-  flex: 1;
-  background: white;
-  border: none;
-  cursor: pointer;
-  color: #4a4a4a;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  padding: 0.375rem 1rem;
-}
-</style>
diff --git a/js/src/views/Event/ParticipantsView.vue b/js/src/views/Event/ParticipantsView.vue
new file mode 100644
index 000000000..821fcdb6d
--- /dev/null
+++ b/js/src/views/Event/ParticipantsView.vue
@@ -0,0 +1,496 @@
+<template>
+  <section class="container mx-auto" v-if="event">
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.MY_EVENTS, text: t('My events') },
+        {
+          name: RouteName.EVENT,
+          params: { uuid: event.uuid },
+          text: event.title,
+        },
+        {
+          name: RouteName.PARTICIPATIONS,
+          params: { uuid: event.uuid },
+          text: t('Participants'),
+        },
+      ]"
+    />
+    <h1>{{ t("Participants") }}</h1>
+    <div class="">
+      <div class="">
+        <div class="">
+          <o-field :label="t('Status')" horizontal label-for="role-select">
+            <o-select v-model="role" id="role-select">
+              <option :value="null">
+                {{ t("Everything") }}
+              </option>
+              <option :value="ParticipantRole.CREATOR">
+                {{ t("Organizer") }}
+              </option>
+              <option :value="ParticipantRole.PARTICIPANT">
+                {{ t("Participant") }}
+              </option>
+              <option :value="ParticipantRole.NOT_APPROVED">
+                {{ t("Not approved") }}
+              </option>
+              <option :value="ParticipantRole.REJECTED">
+                {{ t("Rejected") }}
+              </option>
+            </o-select>
+          </o-field>
+        </div>
+        <div class="" v-if="exportFormats.length > 0">
+          <o-dropdown aria-role="list">
+            <template #trigger="{ active }">
+              <o-button
+                :label="t('Export')"
+                variant="primary"
+                :icon-right="active ? 'menu-up' : 'menu-down'"
+              />
+            </template>
+
+            <o-dropdown-item
+              has-link
+              v-for="format in exportFormats"
+              :key="format"
+              aria-role="listitem"
+              @click="
+                exportParticipants(
+                  {
+                    eventId: event?.id,
+                    format,
+                  },
+                  { context: { type: format } }
+                )
+              "
+              @keyup.enter="
+                exportParticipants(
+                  {
+                    eventId: event?.id,
+                    format,
+                  },
+                  { context: { type: format } }
+                )
+              "
+            >
+              <button class="dropdown-button">
+                <o-icon :icon="formatToIcon(format)"></o-icon>
+                {{ format }}
+              </button>
+            </o-dropdown-item>
+          </o-dropdown>
+        </div>
+      </div>
+    </div>
+    <o-table
+      :data="event.participants.elements"
+      ref="queueTable"
+      detailed
+      detail-key="id"
+      v-model:checked-rows="checkedRows"
+      checkable
+      :is-row-checkable="(row: IParticipant) => row.role !== ParticipantRole.CREATOR"
+      checkbox-position="left"
+      :show-detail-icon="false"
+      :loading="participantsLoading"
+      paginated
+      :current-page="page"
+      backend-pagination
+      :pagination-simple="true"
+      :aria-next-label="t('Next page')"
+      :aria-previous-label="t('Previous page')"
+      :aria-page-label="t('Page')"
+      :aria-current-label="t('Current page')"
+      :total="event.participants.total"
+      :per-page="PARTICIPANTS_PER_PAGE"
+      backend-sorting
+      :default-sort-direction="'desc'"
+      :default-sort="['insertedAt', 'desc']"
+      @page-change="(newPage: number) => (page = newPage)"
+      @sort="(field: string, order: string) => emit('sort', field, order)"
+    >
+      <o-table-column
+        field="actor.preferredUsername"
+        :label="t('Participant')"
+        v-slot="props"
+      >
+        <article>
+          <figure v-if="props.row.actor.avatar">
+            <img
+              class="rounded"
+              :src="props.row.actor.avatar.url"
+              alt=""
+              height="48"
+              width="48"
+            />
+          </figure>
+          <Incognito
+            v-else-if="props.row.actor.preferredUsername === 'anonymous'"
+            :size="48"
+          />
+          <AccountCircle v-else :size="48" />
+          <div>
+            <div class="prose dark:prose-invert">
+              <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
+                <span v-if="props.row.actor.name">{{
+                  props.row.actor.name
+                }}</span
+                ><br />
+                >@{{ usernameWithDomain(props.row.actor) }}</span
+              >
+              <span v-else>
+                {{ t("Anonymous participant") }}
+              </span>
+            </div>
+          </div>
+        </article>
+      </o-table-column>
+      <o-table-column field="role" :label="t('Role')" v-slot="props">
+        <tag
+          variant="primary"
+          v-if="props.row.role === ParticipantRole.CREATOR"
+        >
+          {{ t("Organizer") }}
+        </tag>
+        <tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
+          {{ t("Participant") }}
+        </tag>
+        <tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
+          {{ t("Not confirmed") }}
+        </tag>
+        <tag
+          variant="warning"
+          v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
+        >
+          {{ t("Not approved") }}
+        </tag>
+        <tag
+          variant="danger"
+          v-else-if="props.row.role === ParticipantRole.REJECTED"
+        >
+          {{ t("Rejected") }}
+        </tag>
+      </o-table-column>
+      <o-table-column
+        field="metadata.message"
+        class="column-message"
+        :label="t('Message')"
+        v-slot="props"
+      >
+        <div
+          @click="toggleQueueDetails(props.row)"
+          :class="{
+            'ellipsed-message':
+              props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
+          }"
+          v-if="props.row.metadata && props.row.metadata.message"
+        >
+          <p v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH">
+            {{ ellipsize(props.row.metadata.message) }}
+          </p>
+          <p v-else>
+            {{ props.row.metadata.message }}
+          </p>
+          <button
+            type="button"
+            class="button is-text"
+            v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
+            @click.stop="toggleQueueDetails(props.row)"
+          >
+            {{
+              openDetailedRows[props.row.id] ? t("View less") : t("View more")
+            }}
+          </button>
+        </div>
+        <p v-else class="has-text-grey-dark">
+          {{ t("No message") }}
+        </p>
+      </o-table-column>
+      <o-table-column field="insertedAt" :label="t('Date')" v-slot="props">
+        <span class="text-center">
+          {{ formatDateString(props.row.insertedAt) }}<br />{{
+            formatTimeString(props.row.insertedAt)
+          }}
+        </span>
+      </o-table-column>
+      <template #detail="props">
+        <article v-html="nl2br(props.row.metadata.message)" />
+      </template>
+      <template #empty>
+        <EmptyContent icon="account-circle" :inline="true">
+          {{ t("No participant matches the filters") }}
+        </EmptyContent>
+      </template>
+      <template #bottom-left>
+        <div class="flex gap-2">
+          <o-button
+            @click="acceptParticipants(checkedRows)"
+            variant="success"
+            :disabled="!canAcceptParticipants"
+          >
+            {{
+              t(
+                "No participant to approve|Approve participant|Approve {number} participants",
+                { number: checkedRows.length },
+                checkedRows.length
+              )
+            }}
+          </o-button>
+          <o-button
+            @click="refuseParticipants(checkedRows)"
+            variant="danger"
+            :disabled="!canRefuseParticipants"
+          >
+            {{
+              t(
+                "No participant to reject|Reject participant|Reject {number} participants",
+                { number: checkedRows.length },
+                checkedRows.length
+              )
+            }}
+          </o-button>
+        </div>
+      </template>
+    </o-table>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { ParticipantRole } from "@/types/enums";
+import { IParticipant } from "@/types/participant.model";
+import { IEvent } from "@/types/event.model";
+import {
+  EXPORT_EVENT_PARTICIPATIONS,
+  PARTICIPANTS,
+  UPDATE_PARTICIPANT,
+} from "@/graphql/event";
+import { usernameWithDomain } from "@/types/actor";
+import { nl2br } from "@/utils/html";
+import { asyncForEach } from "@/utils/asyncForEach";
+import RouteName from "@/router/name";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useParticipantsExportFormats } from "@/composition/config";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import {
+  integerTransformer,
+  enumTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
+import { computed, inject, ref } from "vue";
+import { formatDateString, formatTimeString } from "@/filters/datetime";
+import { useI18n } from "vue-i18n";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import Incognito from "vue-material-design-icons/Incognito.vue";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import { Notifier } from "@/plugins/notifier";
+import Tag from "@/components/TagElement.vue";
+
+const PARTICIPANTS_PER_PAGE = 10;
+const MESSAGE_ELLIPSIS_LENGTH = 130;
+
+type exportFormat = "CSV" | "PDF" | "ODS";
+
+const props = defineProps<{
+  eventId: string;
+}>();
+
+const emit = defineEmits(["sort"]);
+
+const { t } = useI18n({ useScope: "global" });
+
+const { currentActor } = useCurrentActorClient();
+const participantsExportFormats = useParticipantsExportFormats();
+
+const ellipsize = (text?: string) =>
+  text && text.substring(0, MESSAGE_ELLIPSIS_LENGTH).concat("…");
+
+// metaInfo() {
+//   return {
+//     title: this.t("Participants") as string,
+//   };
+// },
+
+const page = useRouteQuery("page", 1, integerTransformer);
+const role = useRouteQuery(
+  "role",
+  ParticipantRole.PARTICIPANT,
+  enumTransformer(ParticipantRole)
+);
+
+const checkedRows = ref<IParticipant[]>([]);
+
+const queueTable = ref();
+
+const { result: participantsResult, loading: participantsLoading } = useQuery<{
+  event: IEvent;
+}>(
+  PARTICIPANTS,
+  () => ({
+    uuid: props.eventId,
+    page: page.value,
+    limit: PARTICIPANTS_PER_PAGE,
+    roles: role.value,
+  }),
+  () => ({
+    enabled:
+      currentActor.value?.id !== undefined &&
+      page.value !== undefined &&
+      role.value !== undefined,
+  })
+);
+
+const event = computed(() => participantsResult.value?.event);
+
+// const participantStats = computed((): IEventParticipantStats | null => {
+//   if (!event.value) return null;
+//   return event.value.participantStats;
+// });
+
+const { mutate: updateParticipant, onError: onUpdateParticipantError } =
+  useMutation(UPDATE_PARTICIPANT);
+
+onUpdateParticipantError((e) => console.error(e));
+
+const acceptParticipants = async (
+  participants: IParticipant[]
+): Promise<void> => {
+  await asyncForEach(participants, async (participant: IParticipant) => {
+    await updateParticipant({
+      id: participant.id,
+      role: ParticipantRole.PARTICIPANT,
+    });
+  });
+  checkedRows.value = [];
+};
+
+const refuseParticipants = async (
+  participants: IParticipant[]
+): Promise<void> => {
+  await asyncForEach(participants, async (participant: IParticipant) => {
+    await updateParticipant({
+      id: participant.id,
+      role: ParticipantRole.REJECTED,
+    });
+  });
+  checkedRows.value = [];
+};
+
+const {
+  mutate: exportParticipants,
+  onDone: onExportParticipantsMutationDone,
+  onError: onExportParticipantsMutationError,
+} = useMutation(EXPORT_EVENT_PARTICIPATIONS);
+
+onExportParticipantsMutationDone(({ data, context }) => {
+  const link =
+    window.origin +
+    "/exports/" +
+    context?.type.toLowerCase() +
+    "/" +
+    data?.exportEventParticipants;
+  console.debug(link);
+  const a = document.createElement("a");
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.href = link;
+  a.setAttribute("download", "true");
+  a.click();
+  window.URL.revokeObjectURL(a.href);
+  document.body.removeChild(a);
+});
+
+const notifier = inject<Notifier>("notifier");
+
+onExportParticipantsMutationError((e) => {
+  console.error(e);
+  if (e.graphQLErrors && e.graphQLErrors.length > 0) {
+    notifier?.error(e.graphQLErrors[0].message);
+  }
+});
+
+const exportFormats = computed((): exportFormat[] => {
+  return (participantsExportFormats ?? []).map(
+    (key) => key.toUpperCase() as exportFormat
+  );
+});
+
+const formatToIcon = (format: exportFormat): string => {
+  switch (format) {
+    case "CSV":
+      return "file-delimited";
+    case "PDF":
+      return "file-pdf-box";
+    case "ODS":
+      return "google-spreadsheet";
+  }
+};
+
+/**
+ * We can accept participants if at least one of them is not approved
+ */
+const canAcceptParticipants = (): boolean => {
+  return checkedRows.value.some((participant: IParticipant) =>
+    [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(
+      participant.role
+    )
+  );
+};
+
+/**
+ * We can refuse participants if at least one of them is something different than not approved
+ */
+const canRefuseParticipants = (): boolean => {
+  return checkedRows.value.some(
+    (participant: IParticipant) => participant.role !== ParticipantRole.REJECTED
+  );
+};
+
+const toggleQueueDetails = (row: IParticipant): void => {
+  if (
+    row.metadata.message &&
+    row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH
+  )
+    return;
+  queueTable.value.toggleDetails(row);
+  if (row.id) {
+    openDetailedRows.value[row.id] = !openDetailedRows.value[row.id];
+  }
+};
+
+const openDetailedRows = ref<Record<string, boolean>>({});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+section.container.container {
+  padding: 1rem;
+}
+
+.table {
+  .column-message {
+    vertical-align: middle;
+  }
+  .ellipsed-message {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    p {
+      flex: 1;
+      min-width: 200px;
+    }
+
+    button {
+      display: inline;
+    }
+  }
+}
+
+nav.breadcrumb {
+  a {
+    text-decoration: none;
+  }
+}
+</style>
diff --git a/js/src/views/Group/Create.vue b/js/src/views/Group/Create.vue
deleted file mode 100644
index 64c8afe00..000000000
--- a/js/src/views/Group/Create.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<template>
-  <section class="section container">
-    <h1 class="title">{{ $t("Create a new group") }}</h1>
-
-    <b-message type="is-danger" v-for="(value, index) in errors" :key="index">
-      {{ value }}
-    </b-message>
-
-    <form @submit.prevent="createGroup">
-      <b-field :label="$t('Group display name')" label-for="group-display-name">
-        <b-input
-          aria-required="true"
-          required
-          v-model="group.name"
-          id="group-display-name"
-        />
-      </b-field>
-
-      <div class="field">
-        <label class="label" for="group-preferred-username">{{
-          $t("Federated Group Name")
-        }}</label>
-        <div class="field-body">
-          <b-field
-            :message="preferredUsernameErrors[0]"
-            :type="preferredUsernameErrors[1]"
-          >
-            <b-input
-              ref="preferredUsernameInput"
-              aria-required="true"
-              required
-              expanded
-              v-model="group.preferredUsername"
-              pattern="[a-z0-9_]+"
-              id="group-preferred-username"
-              :useHtml5Validation="true"
-              :validation-message="
-                group.preferredUsername
-                  ? $t(
-                      'Only alphanumeric lowercased characters and underscores are supported.'
-                    )
-                  : null
-              "
-            />
-            <p class="control">
-              <span class="button is-static">@{{ host }}</span>
-            </p>
-          </b-field>
-        </div>
-        <p
-          v-html="
-            $t(
-              'This is like your federated username (<code>{username}</code>) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.',
-              { username: usernameWithDomain(currentActor, true) }
-            )
-          "
-        />
-      </div>
-
-      <b-field
-        :label="$t('Description')"
-        label-for="group-summary"
-        :message="summaryErrors[0]"
-        :type="summaryErrors[1]"
-      >
-        <b-input v-model="group.summary" type="textarea" id="group-summary" />
-      </b-field>
-
-      <div>
-        <b>{{ $t("Avatar") }}</b>
-        <picture-upload
-          :textFallback="$t('Avatar')"
-          v-model="avatarFile"
-          :maxSize="avatarMaxSize"
-        />
-      </div>
-
-      <div>
-        <b>{{ $t("Banner") }}</b>
-        <picture-upload
-          :textFallback="$t('Banner')"
-          v-model="bannerFile"
-          :maxSize="bannerMaxSize"
-        />
-      </div>
-
-      <button class="button is-primary" native-type="submit">
-        {{ $t("Create my group") }}
-      </button>
-    </form>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Watch } from "vue-property-decorator";
-import { Group, IPerson, usernameWithDomain } from "@/types/actor";
-import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
-import { CREATE_GROUP } from "@/graphql/group";
-import { mixins } from "vue-class-component";
-import IdentityEditionMixin from "@/mixins/identityEdition";
-import { MemberRole } from "@/types/enums";
-import RouteName from "../../router/name";
-import { convertToUsername } from "../../utils/username";
-import PictureUpload from "../../components/PictureUpload.vue";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import { ErrorResponse } from "@/types/errors.model";
-import { ServerParseError } from "@apollo/client/link/http";
-import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
-
-@Component({
-  components: {
-    PictureUpload,
-  },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-    config: CONFIG,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Create a new group") as string,
-    };
-  },
-})
-export default class CreateGroup extends mixins(IdentityEditionMixin) {
-  currentActor!: IPerson;
-
-  group = new Group();
-
-  config!: IConfig;
-
-  avatarFile: File | null = null;
-
-  bannerFile: File | null = null;
-
-  errors: string[] = [];
-
-  fieldErrors: Record<string, string | undefined> = {
-    preferred_username: undefined,
-    summary: undefined,
-  };
-
-  usernameWithDomain = usernameWithDomain;
-
-  async createGroup(): Promise<void> {
-    try {
-      this.errors = [];
-      this.fieldErrors = { preferred_username: undefined, summary: undefined };
-      await this.$apollo.mutate({
-        mutation: CREATE_GROUP,
-        variables: this.buildVariables(),
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
-          const query = {
-            query: PERSON_MEMBERSHIPS,
-            variables: {
-              id: this.currentActor.id,
-            },
-          };
-          const membershipData = store.readQuery<{ person: IPerson }>(query);
-          if (!membershipData) return;
-          const { person } = membershipData;
-          person.memberships.elements.push({
-            parent: data?.createGroup,
-            role: MemberRole.ADMINISTRATOR,
-            actor: this.currentActor,
-            insertedAt: new Date().toString(),
-            updatedAt: new Date().toString(),
-          });
-          store.writeQuery({ ...query, data: { person } });
-        },
-      });
-
-      await this.$router.push({
-        name: RouteName.GROUP,
-        params: { preferredUsername: usernameWithDomain(this.group) },
-      });
-
-      this.$notifier.success(
-        this.$t("Group {displayName} created", {
-          displayName: this.group.displayName(),
-        }) as string
-      );
-    } catch (err: any) {
-      this.handleError(err);
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  get host(): string {
-    return window.location.hostname;
-  }
-
-  get avatarMaxSize(): number | undefined {
-    return this?.config?.uploadLimits?.avatar;
-  }
-
-  get bannerMaxSize(): number | undefined {
-    return this?.config?.uploadLimits?.banner;
-  }
-
-  @Watch("group.name")
-  updateUsername(groupName: string): void {
-    this.group.preferredUsername = convertToUsername(groupName);
-  }
-
-  private buildVariables() {
-    let avatarObj = {};
-    let bannerObj = {};
-
-    if (this.avatarFile) {
-      avatarObj = {
-        avatar: {
-          media: {
-            name: this.avatarFile.name,
-            alt: `${this.group.preferredUsername}'s avatar`,
-            file: this.avatarFile,
-          },
-        },
-      };
-    }
-
-    if (this.bannerFile) {
-      bannerObj = {
-        banner: {
-          media: {
-            name: this.bannerFile.name,
-            alt: `${this.group.preferredUsername}'s banner`,
-            file: this.bannerFile,
-          },
-        },
-      };
-    }
-
-    return {
-      ...this.group,
-      ...avatarObj,
-      ...bannerObj,
-    };
-  }
-
-  private handleError(err: ErrorResponse) {
-    if (err?.networkError?.name === "ServerParseError") {
-      const error = err?.networkError as ServerParseError;
-
-      if (error?.response?.status === 413) {
-        this.errors.push(
-          this.$t(
-            "Unable to create the group. One of the pictures may be too heavy."
-          ) as string
-        );
-      }
-    }
-    err.graphQLErrors?.forEach((error) => {
-      if (error.field) {
-        if (Array.isArray(error.message)) {
-          this.fieldErrors[error.field] = error.message[0];
-        } else {
-          this.fieldErrors[error.field] = error.message;
-        }
-      } else {
-        this.errors.push(error.message);
-      }
-    });
-  }
-
-  get summaryErrors() {
-    const message = this.fieldErrors.summary
-      ? this.fieldErrors.summary
-      : undefined;
-    const type = this.fieldErrors.summary ? "is-danger" : undefined;
-    return [message, type];
-  }
-
-  get preferredUsernameErrors() {
-    const message = this.fieldErrors.preferred_username
-      ? this.fieldErrors.preferred_username
-      : this.$t(
-          "Only alphanumeric lowercased characters and underscores are supported."
-        );
-    const type = this.fieldErrors.preferred_username ? "is-danger" : undefined;
-    return [message, type];
-  }
-}
-</script>
-
-<style>
-.markdown-render h1 {
-  font-size: 2em;
-}
-</style>
diff --git a/js/src/views/Group/CreateView.vue b/js/src/views/Group/CreateView.vue
new file mode 100644
index 000000000..6d231376b
--- /dev/null
+++ b/js/src/views/Group/CreateView.vue
@@ -0,0 +1,266 @@
+<template>
+  <section class="container mx-auto">
+    <h1>{{ t("Create a new group") }}</h1>
+
+    <o-notification
+      variant="danger"
+      v-for="(value, index) in errors"
+      :key="index"
+    >
+      {{ value }}
+    </o-notification>
+
+    <form @submit.prevent="createGroup">
+      <o-field :label="t('Group display name')" label-for="group-display-name">
+        <o-input
+          aria-required="true"
+          required
+          v-model="group.name"
+          id="group-display-name"
+        />
+      </o-field>
+
+      <div class="field">
+        <label class="label" for="group-preferred-username">{{
+          t("Federated Group Name")
+        }}</label>
+        <div class="field-body">
+          <o-field
+            :message="preferredUsernameErrors[0]"
+            :type="preferredUsernameErrors[1]"
+          >
+            <o-input
+              ref="preferredUsernameInput"
+              aria-required="true"
+              required
+              expanded
+              v-model="group.preferredUsername"
+              pattern="[a-z0-9_]+"
+              id="group-preferred-username"
+              :useHtml5Validation="true"
+              :validation-message="
+                group.preferredUsername
+                  ? t(
+                      'Only alphanumeric lowercased characters and underscores are supported.'
+                    )
+                  : null
+              "
+            />
+            <p class="control">
+              <span class="button is-static">@{{ host }}</span>
+            </p>
+          </o-field>
+        </div>
+        <i18n-t
+          v-if="currentActor"
+          keypath="This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique."
+        >
+          <template #username>
+            <code>
+              {{ usernameWithDomain(currentActor, true) }}
+            </code>
+          </template>
+        </i18n-t>
+      </div>
+
+      <o-field
+        :label="t('Description')"
+        label-for="group-summary"
+        :message="summaryErrors[0]"
+        :type="summaryErrors[1]"
+      >
+        <o-input v-model="group.summary" type="textarea" id="group-summary" />
+      </o-field>
+
+      <div>
+        <b>{{ t("Avatar") }}</b>
+        <picture-upload
+          :textFallback="t('Avatar')"
+          v-model="avatarFile"
+          :maxSize="avatarMaxSize"
+        />
+      </div>
+
+      <div>
+        <b>{{ t("Banner") }}</b>
+        <picture-upload
+          :textFallback="t('Banner')"
+          v-model="bannerFile"
+          :maxSize="bannerMaxSize"
+        />
+      </div>
+
+      <o-button variant="primary" native-type="submit">
+        {{ t("Create my group") }}
+      </o-button>
+    </form>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { Group, usernameWithDomain, displayName } from "@/types/actor";
+import RouteName from "../../router/name";
+import { convertToUsername } from "../../utils/username";
+import PictureUpload from "../../components/PictureUpload.vue";
+import { ErrorResponse } from "@/types/errors.model";
+import { ServerParseError } from "@apollo/client/link/http";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { computed, inject, reactive, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useCreateGroup } from "@/composition/apollo/group";
+import {
+  useAvatarMaxSize,
+  useBannerMaxSize,
+  useHost,
+} from "@/composition/config";
+import { Notifier } from "@/plugins/notifier";
+import { useHead } from "@vueuse/head";
+
+const { currentActor } = useCurrentActorClient();
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Create a new group")),
+});
+
+const group = ref(new Group());
+
+const avatarFile = ref<File | null>(null);
+const bannerFile = ref<File | null>(null);
+
+const errors = ref<string[]>([]);
+
+const fieldErrors = reactive<Record<string, string | undefined>>({
+  preferred_username: undefined,
+  summary: undefined,
+});
+
+const router = useRouter();
+
+const host = useHost();
+const avatarMaxSize = useAvatarMaxSize();
+const bannerMaxSize = useBannerMaxSize();
+
+const notifier = inject<Notifier>("notifier");
+
+watch(
+  () => group.value.name,
+  (newGroupName) => {
+    group.value.preferredUsername = convertToUsername(newGroupName);
+  }
+);
+
+const buildVariables = computed(() => {
+  let avatarObj = {};
+  let bannerObj = {};
+
+  const groupBasic = {
+    preferredUsername: group.value.preferredUsername,
+    name: group.value.name,
+    summary: group.value.summary,
+  };
+
+  if (avatarFile.value) {
+    avatarObj = {
+      avatar: {
+        media: {
+          name: avatarFile.value?.name,
+          alt: `${group.value.preferredUsername}'s avatar`,
+          file: avatarFile.value,
+        },
+      },
+    };
+  }
+
+  if (bannerFile.value) {
+    bannerObj = {
+      banner: {
+        media: {
+          name: bannerFile.value?.name,
+          alt: `${group.value.preferredUsername}'s banner`,
+          file: bannerFile.value,
+        },
+      },
+    };
+  }
+
+  return {
+    ...groupBasic,
+    ...avatarObj,
+    ...bannerObj,
+  };
+});
+
+const handleError = (err: ErrorResponse) => {
+  if (err?.networkError?.name === "ServerParseError") {
+    const error = err?.networkError as ServerParseError;
+
+    if (error?.response?.status === 413) {
+      errors.value.push(
+        t(
+          "Unable to create the group. One of the pictures may be too heavy."
+        ) as string
+      );
+    }
+  }
+  err.graphQLErrors?.forEach((error) => {
+    if (error.field) {
+      if (Array.isArray(error.message)) {
+        fieldErrors[error.field] = error.message[0];
+      } else {
+        fieldErrors[error.field] = error.message;
+      }
+    } else {
+      errors.value.push(error.message);
+    }
+  });
+};
+
+const summaryErrors = computed(() => {
+  const message = fieldErrors.summary ? fieldErrors.summary : undefined;
+  const type = fieldErrors.summary ? "danger" : undefined;
+  return [message, type];
+});
+
+const preferredUsernameErrors = computed(() => {
+  const message = fieldErrors.preferred_username
+    ? fieldErrors.preferred_username
+    : t(
+        "Only alphanumeric lowercased characters and underscores are supported."
+      );
+  const type = fieldErrors.preferred_username ? "danger" : undefined;
+  return [message, type];
+});
+
+const { onDone, onError, mutate } = useCreateGroup();
+
+onDone(() => {
+  notifier?.success(
+    t("Group {displayName} created", {
+      displayName: displayName(group.value),
+    })
+  );
+
+  router.push({
+    name: RouteName.GROUP,
+    params: { preferredUsername: usernameWithDomain(group.value) },
+  });
+});
+
+onError((err) => handleError(err as unknown as ErrorResponse));
+
+const createGroup = async (): Promise<void> => {
+  errors.value = [];
+  fieldErrors.preferred_username = undefined;
+  fieldErrors.summary = undefined;
+  mutate(buildVariables.value);
+};
+</script>
+
+<style>
+.markdown-render h1 {
+  font-size: 2em;
+}
+</style>
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
deleted file mode 100644
index a2c0522c3..000000000
--- a/js/src/views/Group/Group.vue
+++ /dev/null
@@ -1,1478 +0,0 @@
-<template>
-  <div class="container is-widescreen">
-    <div class="header">
-      <breadcrumbs-nav
-        v-if="group"
-        :links="[
-          { name: RouteName.MY_GROUPS, text: $t('My groups') },
-          {
-            name: RouteName.GROUP,
-            params: { preferredUsername: usernameWithDomain(group) },
-            text: displayName(group),
-          },
-        ]"
-      />
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <header class="block-container presentation" v-if="group">
-        <div class="banner-container">
-          <lazy-image-wrapper :picture="group.banner" />
-        </div>
-        <div class="header">
-          <div class="avatar-container">
-            <figure class="image is-128x128" v-if="group.avatar">
-              <img class="is-rounded" :src="group.avatar.url" alt="" />
-            </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
-          </div>
-          <div class="title-container">
-            <h1 v-if="group.name">{{ group.name }}</h1>
-            <b-skeleton v-else :animated="true" />
-            <span
-              dir="ltr"
-              class="has-text-grey-dark"
-              v-if="group.preferredUsername"
-              >@{{ usernameWithDomain(group) }}</span
-            >
-            <b-skeleton v-else :animated="true" />
-            <br />
-          </div>
-          <div class="group-metadata">
-            <div
-              class="block-column members"
-              v-if="isCurrentActorAGroupMember && !previewPublic"
-            >
-              <div>
-                <figure
-                  class="image is-32x32"
-                  :title="
-                    $t(`@{username} ({role})`, {
-                      username: usernameWithDomain(member.actor),
-                      role: member.role,
-                    })
-                  "
-                  v-for="member in members"
-                  :key="member.actor.id"
-                >
-                  <img
-                    class="is-rounded"
-                    :src="member.actor.avatar.url"
-                    v-if="member.actor.avatar"
-                    alt
-                  />
-                  <b-icon v-else size="is-medium" icon="account-circle" />
-                </figure>
-              </div>
-              <p>
-                {{
-                  $tc("{count} members", group.members.total, {
-                    count: group.members.total,
-                  })
-                }}
-                <router-link
-                  v-if="isCurrentActorAGroupAdmin"
-                  :to="{
-                    name: RouteName.GROUP_MEMBERS_SETTINGS,
-                    params: { preferredUsername: usernameWithDomain(group) },
-                  }"
-                  >{{ $t("Add / Remove…") }}</router-link
-                >
-              </p>
-            </div>
-            <div class="flex gap-2">
-              <b-button
-                outlined
-                icon-left="timeline-text"
-                v-if="isCurrentActorAGroupMember && !previewPublic"
-                tag="router-link"
-                :to="{
-                  name: RouteName.TIMELINE,
-                  params: { preferredUsername: usernameWithDomain(group) },
-                }"
-                >{{ $t("Activity") }}</b-button
-              >
-              <b-button
-                outlined
-                icon-left="cog"
-                v-if="isCurrentActorAGroupAdmin && !previewPublic"
-                tag="router-link"
-                :to="{
-                  name: RouteName.GROUP_PUBLIC_SETTINGS,
-                  params: { preferredUsername: usernameWithDomain(group) },
-                }"
-                >{{ $t("Group settings") }}</b-button
-              >
-              <b-dropdown
-                aria-role="list"
-                trap-focus
-                v-show="showJoinButton && showFollowButton"
-              >
-                <template #trigger>
-                  <b-button
-                    :label="$t('Follow')"
-                    type="is-primary"
-                    icon-left="rss"
-                    icon-right="menu-down"
-                  />
-                </template>
-
-                <b-dropdown-item
-                  aria-role="listitem"
-                  class="p-0"
-                  custom
-                  :focusable="false"
-                  :disabled="
-                    isCurrentActorPendingFollow && currentActor.id !== undefined
-                  "
-                >
-                  <button class="media py-4 px-2 w-full" @click="followGroup">
-                    <b-icon class="media-left" icon="rss" />
-                    <div class="media-content">
-                      <h3 class="font-medium text-lg">{{ $t("Follow") }}</h3>
-                      <p class="whitespace-normal md:whitespace-nowrap text-sm">
-                        {{ $t("Get informed of the upcoming public events") }}
-                      </p>
-                      <p
-                        v-if="
-                          doesGroupManuallyApprovesFollowers &&
-                          !isCurrentActorPendingFollow
-                        "
-                        class="whitespace-normal md:whitespace-nowrap text-sm italic"
-                      >
-                        {{
-                          $t(
-                            "Follow requests will be approved by a group moderator"
-                          )
-                        }}
-                      </p>
-                      <p
-                        v-if="isCurrentActorPendingFollow && currentActor.id"
-                        class="whitespace-normal md:whitespace-nowrap text-sm italic"
-                      >
-                        {{ $t("Follow request pending approval") }}
-                      </p>
-                    </div>
-                  </button>
-                </b-dropdown-item>
-
-                <b-dropdown-item
-                  aria-role="listitem"
-                  class="p-0 border-t border-solid"
-                  custom
-                  :focusable="false"
-                  :disabled="
-                    isGroupInviteOnly || isCurrentActorAPendingGroupMember
-                  "
-                >
-                  <button class="media py-4 px-2 w-full" @click="joinGroup">
-                    <b-icon
-                      class="media-left"
-                      icon="account-multiple-plus"
-                    ></b-icon>
-                    <div class="media-content">
-                      <h3 class="font-medium text-lg">{{ $t("Join") }}</h3>
-                      <div v-if="showJoinButton">
-                        <p
-                          class="whitespace-normal md:whitespace-nowrap text-sm"
-                        >
-                          {{
-                            $t(
-                              "Become part of the community and start organizing events"
-                            )
-                          }}
-                        </p>
-                        <p
-                          v-if="isGroupInviteOnly"
-                          class="whitespace-normal md:whitespace-nowrap text-sm italic"
-                        >
-                          {{ $t("This group is invite-only") }}
-                        </p>
-                        <p
-                          v-if="
-                            areGroupMembershipsModerated &&
-                            !isCurrentActorAPendingGroupMember
-                          "
-                          class="whitespace-normal md:whitespace-nowrap text-sm italic"
-                        >
-                          {{
-                            $t(
-                              "Membership requests will be approved by a group moderator"
-                            )
-                          }}
-                        </p>
-                        <p
-                          v-if="isCurrentActorAPendingGroupMember"
-                          class="whitespace-normal md:whitespace-nowrap text-sm italic"
-                        >
-                          {{ $t("Your membership is pending approval") }}
-                        </p>
-                      </div>
-                    </div>
-                  </button>
-                </b-dropdown-item>
-              </b-dropdown>
-              <b-button
-                outlined
-                v-if="isCurrentActorAPendingGroupMember"
-                @click="leaveGroup"
-                @keyup.enter="leaveGroup"
-                type="is-primary"
-                >{{ $t("Cancel membership request") }}</b-button
-              >
-              <b-button
-                outlined
-                v-if="isCurrentActorPendingFollow && currentActor.id"
-                @click="unFollowGroup"
-                @keyup.enter="unFollowGroup"
-                type="is-primary"
-                >{{ $t("Cancel follow request") }}</b-button
-              ><b-button
-                v-if="
-                  isCurrentActorFollowing && !previewPublic && currentActor.id
-                "
-                type="is-primary"
-                @click="unFollowGroup"
-                >{{ $t("Unfollow") }}</b-button
-              >
-              <b-button
-                v-if="isCurrentActorFollowing"
-                @click="toggleFollowNotify"
-                @keyup.enter="toggleFollowNotify"
-                class="notification-button p-1.5"
-                outlined
-                :icon-left="
-                  isCurrentActorFollowingNotify
-                    ? 'bell-outline'
-                    : 'bell-off-outline'
-                "
-              >
-                <span class="sr-only">{{
-                  isCurrentActorFollowingNotify
-                    ? $t("Activate notifications")
-                    : $t("Deactivate notifications")
-                }}</span>
-              </b-button>
-              <b-button
-                outlined
-                icon-left="share"
-                @click="triggerShare()"
-                @keyup.enter="triggerShare()"
-                v-if="!isCurrentActorAGroupMember || previewPublic"
-              >
-                {{ $t("Share") }}
-              </b-button>
-              <b-dropdown
-                class="menu-dropdown"
-                position="is-bottom-left"
-                aria-role="menu"
-              >
-                <b-button
-                  slot="trigger"
-                  outlined
-                  role="button"
-                  icon-left="dots-horizontal"
-                  :aria-label="$t('Other actions')"
-                />
-                <b-dropdown-item
-                  aria-role="menuitem"
-                  v-if="isCurrentActorAGroupMember || previewPublic"
-                >
-                  <b-switch v-model="previewPublic">{{
-                    $t("Public preview")
-                  }}</b-switch>
-                </b-dropdown-item>
-                <b-dropdown-item
-                  v-if="!previewPublic && isCurrentActorAGroupMember"
-                  aria-role="menuitem"
-                  @click="triggerShare()"
-                  @keyup.enter="triggerShare()"
-                >
-                  <span>
-                    <b-icon icon="share" />
-                    {{ $t("Share") }}
-                  </span>
-                </b-dropdown-item>
-                <hr
-                  role="presentation"
-                  class="dropdown-divider"
-                  v-if="isCurrentActorAGroupMember"
-                />
-                <b-dropdown-item has-link aria-role="menuitem">
-                  <a
-                    :href="`@${preferredUsername}/feed/atom`"
-                    :title="$t('Atom feed for events and posts')"
-                  >
-                    <b-icon icon="rss" />
-                    {{ $t("RSS/Atom Feed") }}
-                  </a>
-                </b-dropdown-item>
-                <b-dropdown-item has-link aria-role="menuitem">
-                  <a
-                    :href="`@${preferredUsername}/feed/ics`"
-                    :title="$t('ICS feed for events')"
-                  >
-                    <b-icon icon="calendar-sync" />
-                    {{ $t("ICS/WebCal Feed") }}
-                  </a>
-                </b-dropdown-item>
-                <hr role="presentation" class="dropdown-divider" />
-                <b-dropdown-item
-                  v-if="ableToReport"
-                  aria-role="menuitem"
-                  @click="isReportModalActive = true"
-                  @keyup.enter="isReportModalActive = true"
-                >
-                  <span>
-                    <b-icon icon="flag" />
-                    {{ $t("Report") }}
-                  </span>
-                </b-dropdown-item>
-                <b-dropdown-item
-                  aria-role="menuitem"
-                  v-if="isCurrentActorAGroupMember && !previewPublic"
-                  @click="openLeaveGroupModal"
-                  @keyup.enter="openLeaveGroupModal"
-                >
-                  <span>
-                    <b-icon icon="exit-to-app" />
-                    {{ $t("Leave") }}
-                  </span>
-                </b-dropdown-item>
-              </b-dropdown>
-            </div>
-          </div>
-          <invitations
-            v-if="isCurrentActorAnInvitedGroupMember"
-            :invitations="[groupMember]"
-          />
-          <b-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
-            {{ $t("You have been removed from this group's members.") }}
-          </b-message>
-          <b-message
-            v-if="
-              isCurrentActorAGroupMember &&
-              isCurrentActorARecentMember &&
-              isCurrentActorOnADifferentDomainThanGroup
-            "
-            type="is-info"
-          >
-            {{
-              $t(
-                "Since you are a new member, private content can take a few minutes to appear."
-              )
-            }}
-          </b-message>
-        </div>
-      </header>
-    </div>
-    <div
-      v-if="isCurrentActorAGroupMember && !previewPublic"
-      class="block-container"
-    >
-      <!-- Private things -->
-      <div class="block-column">
-        <!-- Group discussions -->
-        <group-section
-          :title="$t('Discussions')"
-          icon="chat"
-          :route="{
-            name: RouteName.DISCUSSION_LIST,
-            params: { preferredUsername: usernameWithDomain(group) },
-          }"
-        >
-          <template v-slot:default>
-            <div v-if="group.discussions.total > 0">
-              <discussion-list-item
-                v-for="discussion in group.discussions.elements"
-                :key="discussion.id"
-                :discussion="discussion"
-              />
-            </div>
-            <empty-content v-else icon="chat" :inline="true">
-              {{ $t("No discussions yet") }}
-            </empty-content>
-          </template>
-          <template v-slot:create>
-            <router-link
-              :to="{
-                name: RouteName.CREATE_DISCUSSION,
-                params: { preferredUsername: usernameWithDomain(group) },
-              }"
-              class="button is-primary"
-              >{{ $t("+ Start a discussion") }}</router-link
-            >
-          </template>
-        </group-section>
-        <!-- Resources -->
-        <group-section
-          :title="$t('Resources')"
-          icon="link"
-          :route="{
-            name: RouteName.RESOURCE_FOLDER_ROOT,
-            params: { preferredUsername: usernameWithDomain(group) },
-          }"
-        >
-          <template v-slot:default>
-            <div v-if="group.resources.elements.length > 0">
-              <div
-                v-for="resource in group.resources.elements"
-                :key="resource.id"
-              >
-                <resource-item
-                  :resource="resource"
-                  v-if="resource.type !== 'folder'"
-                  :inline="true"
-                />
-                <folder-item
-                  :resource="resource"
-                  :group="group"
-                  v-else
-                  :inline="true"
-                />
-              </div>
-            </div>
-            <empty-content v-else icon="link" :inline="true">
-              {{ $t("No resources yet") }}
-            </empty-content>
-          </template>
-          <template v-slot:create>
-            <router-link
-              :to="{
-                name: RouteName.RESOURCE_FOLDER_ROOT,
-                params: { preferredUsername: usernameWithDomain(group) },
-              }"
-              class="button is-primary"
-              >{{ $t("+ Add a resource") }}</router-link
-            >
-          </template>
-        </group-section>
-      </div>
-      <!-- Public things -->
-      <div class="block-column">
-        <!-- Events -->
-        <group-section
-          :title="$t('Events')"
-          icon="calendar"
-          :privateSection="false"
-          :route="{
-            name: RouteName.GROUP_EVENTS,
-            params: { preferredUsername: usernameWithDomain(group) },
-          }"
-        >
-          <template v-slot:default>
-            <div
-              class="organized-events-wrapper"
-              v-if="group && group.organizedEvents.total > 0"
-            >
-              <event-minimalist-card
-                v-for="event in group.organizedEvents.elements.slice(0, 3)"
-                :event="event"
-                :key="event.uuid"
-                class="organized-event"
-              />
-            </div>
-            <empty-content v-else-if="group" icon="calendar" :inline="true">
-              {{ $t("No public upcoming events") }}
-            </empty-content>
-            <b-skeleton animated v-else></b-skeleton>
-          </template>
-          <template v-slot:create>
-            <router-link
-              v-if="isCurrentActorAGroupModerator"
-              :to="{
-                name: RouteName.CREATE_EVENT,
-                query: { actorId: group.id },
-              }"
-              class="button is-primary"
-              >{{ $t("+ Create an event") }}</router-link
-            >
-          </template>
-        </group-section>
-        <!-- Posts -->
-        <group-section
-          :title="$t('Public page')"
-          icon="bullhorn"
-          :privateSection="false"
-          :route="{
-            name: RouteName.POSTS,
-            params: { preferredUsername: usernameWithDomain(group) },
-          }"
-        >
-          <template v-slot:default>
-            <multi-post-list-item
-              v-if="group.posts.total > 0"
-              :posts="group.posts.elements.slice(0, 3)"
-              :isCurrentActorMember="isCurrentActorAGroupMember"
-            />
-            <empty-content v-else-if="group" icon="bullhorn" :inline="true">
-              {{ $t("No posts yet") }}
-            </empty-content>
-          </template>
-          <template v-slot:create>
-            <router-link
-              v-if="isCurrentActorAGroupModerator"
-              :to="{
-                name: RouteName.POST_CREATE,
-                params: { preferredUsername: usernameWithDomain(group) },
-              }"
-              class="button is-primary"
-              >{{ $t("+ Create a post") }}</router-link
-            >
-          </template>
-        </group-section>
-      </div>
-    </div>
-    <b-message v-else-if="!group && $apollo.loading === false" type="is-danger">
-      {{ $t("No group found") }}
-    </b-message>
-    <div v-else-if="group" class="public-container">
-      <aside class="group-metadata">
-        <div class="sticky">
-          <b-message v-if="group.domain && !isCurrentActorAGroupMember">
-            {{
-              $t(
-                "This profile is from another instance, the informations shown here may be incomplete."
-              )
-            }}
-            <a :href="group.url" rel="noopener noreferrer external">{{
-              $t("View full profile")
-            }}</a>
-          </b-message>
-          <event-metadata-block
-            :title="$t('About')"
-            v-if="group.summary && group.summary !== '<p></p>'"
-          >
-            <div dir="auto" v-html="group.summary" />
-          </event-metadata-block>
-          <event-metadata-block :title="$t('Members')" icon="account-group">
-            {{
-              $tc("{count} members", group.members.total, {
-                count: group.members.total,
-              })
-            }}
-          </event-metadata-block>
-          <event-metadata-block
-            v-if="physicalAddress && physicalAddress.url"
-            :title="$t('Location')"
-            :icon="
-              physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'
-            "
-          >
-            <div class="address-wrapper">
-              <span
-                v-if="!physicalAddress || !addressFullName(physicalAddress)"
-                >{{ $t("No address defined") }}</span
-              >
-              <div class="address" v-if="physicalAddress">
-                <div>
-                  <address dir="auto">
-                    <p
-                      class="addressDescription"
-                      :title="physicalAddress.poiInfos.name"
-                    >
-                      {{ physicalAddress.poiInfos.name }}
-                    </p>
-                    <p class="has-text-grey-dark">
-                      {{ physicalAddress.poiInfos.alternativeName }}
-                    </p>
-                  </address>
-                </div>
-                <b-button
-                  class="map-show-button"
-                  type="is-text"
-                  @click="showMap = !showMap"
-                  @keyup.enter="showMap = !showMap"
-                  v-if="physicalAddress.geom"
-                >
-                  {{ $t("Show map") }}
-                </b-button>
-              </div>
-            </div>
-          </event-metadata-block>
-        </div>
-      </aside>
-      <div class="main-content">
-        <section>
-          <subtitle>{{ $t("Upcoming events") }}</subtitle>
-          <div
-            class="organized-events-wrapper"
-            v-if="group && organizedEvents.elements.length > 0"
-          >
-            <event-minimalist-card
-              v-for="event in organizedEvents.elements.slice(0, 3)"
-              :event="event"
-              :key="event.uuid"
-              class="organized-event"
-            />
-          </div>
-          <empty-content
-            v-else-if="group"
-            icon="calendar"
-            :inline="true"
-            description-classes="flex flex-col items-stretch"
-          >
-            {{ $t("No public upcoming events") }}
-            <template #desc>
-              <template v-if="isCurrentActorFollowing">
-                <i18n
-                  class="has-text-grey-dark"
-                  path="You will receive notifications about this group's public activity depending on %{notification_settings}."
-                >
-                  <router-link
-                    :to="{ name: RouteName.NOTIFICATIONS }"
-                    slot="notification_settings"
-                    >{{ $t("your notification settings") }}</router-link
-                  >
-                </i18n>
-              </template>
-              <b-button
-                tag="router-link"
-                class="my-2 self-center"
-                type="is-text"
-                :to="{
-                  name: RouteName.GROUP_EVENTS,
-                  params: { preferredUsername: usernameWithDomain(group) },
-                  query: { future: false },
-                }"
-                >{{ $t("View past events") }}</b-button
-              >
-            </template>
-          </empty-content>
-          <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
-          <div class="flex justify-center">
-            <b-button
-              tag="router-link"
-              class="my-4"
-              type="is-text"
-              v-if="organizedEvents.total > 0"
-              :to="{
-                name: RouteName.GROUP_EVENTS,
-                params: { preferredUsername: usernameWithDomain(group) },
-                query: { future: organizedEvents.elements.length > 0 },
-              }"
-              >{{ $t("View all events") }}</b-button
-            >
-          </div>
-        </section>
-        <section class="flex flex-col items-stretch">
-          <subtitle class="ml-0">{{ $t("Latest posts") }}</subtitle>
-
-          <multi-post-list-item
-            v-if="
-              posts.elements.filter(
-                (post) =>
-                  !post.draft && post.visibility === PostVisibility.PUBLIC
-              ).length > 0
-            "
-            :posts="
-              posts.elements.filter(
-                (post) =>
-                  !post.draft && post.visibility === PostVisibility.PUBLIC
-              )
-            "
-          />
-          <empty-content v-else-if="group" icon="bullhorn" :inline="true">
-            {{ $t("No posts yet") }}
-          </empty-content>
-          <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
-          <b-button
-            class="self-center my-2"
-            v-if="posts.total > 0"
-            tag="router-link"
-            type="is-text"
-            :to="{
-              name: RouteName.POSTS,
-              params: { preferredUsername: usernameWithDomain(group) },
-            }"
-            >{{ $t("View all posts") }}</b-button
-          >
-        </section>
-      </div>
-      <b-modal
-        v-if="physicalAddress && physicalAddress.geom"
-        :active.sync="showMap"
-        :close-button-aria-label="$t('Close')"
-      >
-        <div class="map">
-          <map-leaflet
-            :coords="physicalAddress.geom"
-            :marker="{
-              text: physicalAddress.fullName,
-              icon: physicalAddress.poiInfos.poiIcon.icon,
-            }"
-          />
-        </div>
-      </b-modal>
-    </div>
-    <b-modal
-      :close-button-aria-label="$t('Close')"
-      :active.sync="isReportModalActive"
-      has-modal-card
-      ref="reportModal"
-      v-if="group"
-    >
-      <report-modal
-        :on-confirm="reportGroup"
-        :title="$t('Report this group')"
-        :outside-domain="group.domain"
-        @close="$refs.reportModal.close()"
-      />
-    </b-modal>
-    <b-modal
-      :close-button-aria-label="$t('Close')"
-      v-if="group"
-      :active.sync="isShareModalActive"
-      has-modal-card
-      ref="shareModal"
-    >
-      <share-group-modal :group="group" />
-    </b-modal>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Watch } from "vue-property-decorator";
-import EventCard from "@/components/Event/EventCard.vue";
-import { displayName, IActor, usernameWithDomain } from "@/types/actor";
-import Subtitle from "@/components/Utils/Subtitle.vue";
-import CompactTodo from "@/components/Todo/CompactTodo.vue";
-import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
-import DiscussionListItem from "@/components/Discussion/DiscussionListItem.vue";
-import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
-import ResourceItem from "@/components/Resource/ResourceItem.vue";
-import FolderItem from "@/components/Resource/FolderItem.vue";
-import { Address, addressFullName } from "@/types/address.model";
-import Invitations from "@/components/Group/Invitations.vue";
-import addMinutes from "date-fns/addMinutes";
-import { CONFIG } from "@/graphql/config";
-import { CREATE_REPORT } from "@/graphql/report";
-import { IReport } from "@/types/report.model";
-import { IConfig } from "@/types/config.model";
-import GroupMixin from "@/mixins/group";
-import { mixins } from "vue-class-component";
-import { JOIN_GROUP } from "@/graphql/member";
-import { MemberRole, Openness, PostVisibility } from "@/types/enums";
-import { IMember } from "@/types/actor/member.model";
-import RouteName from "../../router/name";
-import GroupSection from "../../components/Group/GroupSection.vue";
-import ReportModal from "../../components/Report/ReportModal.vue";
-import { PERSON_STATUS_GROUP } from "@/graphql/actor";
-import { LEAVE_GROUP } from "@/graphql/group";
-import LazyImageWrapper from "../../components/Image/LazyImageWrapper.vue";
-import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
-import EmptyContent from "../../components/Utils/EmptyContent.vue";
-import { Paginate } from "@/types/paginate";
-import { IEvent } from "@/types/event.model";
-import { IPost } from "@/types/post.model";
-import {
-  FOLLOW_GROUP,
-  UNFOLLOW_GROUP,
-  UPDATE_GROUP_FOLLOW,
-} from "@/graphql/followers";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-  },
-  components: {
-    DiscussionListItem,
-    MultiPostListItem,
-    EventMinimalistCard,
-    CompactTodo,
-    Subtitle,
-    EventCard,
-    FolderItem,
-    ResourceItem,
-    GroupSection,
-    Invitations,
-    ReportModal,
-    LazyImageWrapper,
-    EventMetadataBlock,
-    EmptyContent,
-    "map-leaflet": () =>
-      import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
-    ShareGroupModal: () =>
-      import(
-        /* webpackChunkName: "shareGroupModal" */ "../../components/Group/ShareGroupModal.vue"
-      ),
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.groupTitle,
-      meta: [
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        { name: "description", content: this.groupSummary },
-      ],
-    };
-  },
-})
-export default class Group extends mixins(GroupMixin) {
-  @Prop({ type: String, required: true }) preferredUsername!: string;
-
-  config!: IConfig;
-
-  loading = true;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  addressFullName = addressFullName;
-
-  PostVisibility = PostVisibility;
-
-  Openness = Openness;
-
-  showMap = false;
-
-  isReportModalActive = false;
-
-  isShareModalActive = false;
-
-  previewPublic = false;
-
-  @Watch("currentActor")
-  watchCurrentActor(currentActor: IActor, oldActor: IActor): void {
-    if (currentActor.id && oldActor && currentActor.id !== oldActor.id) {
-      this.$apollo.queries.group.refetch();
-    }
-  }
-
-  async joinGroup(): Promise<void> {
-    if (!this.currentActor?.id) {
-      this.$router.push({
-        name: RouteName.GROUP_JOIN,
-        params: { preferredUsername: usernameWithDomain(this.group) },
-      });
-      return;
-    }
-    try {
-      const [group, currentActorId] = [
-        usernameWithDomain(this.group),
-        this.currentActor.id,
-      ];
-      await this.$apollo.mutate({
-        mutation: JOIN_GROUP,
-        variables: {
-          groupId: this.group.id,
-        },
-        refetchQueries: [
-          {
-            query: PERSON_STATUS_GROUP,
-            variables: {
-              id: currentActorId,
-              group,
-            },
-          },
-        ],
-      });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  protected async openLeaveGroupModal(): Promise<void> {
-    this.$buefy.dialog.confirm({
-      type: "is-danger",
-      title: this.$t("Leave group") as string,
-      message: this.$t(
-        "Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone.",
-        { groupName: `<b>${displayName(this.group)}</b>` }
-      ) as string,
-      onConfirm: () => this.leaveGroup(),
-      confirmText: this.$t("Leave group") as string,
-      cancelText: this.$t("Cancel") as string,
-    });
-  }
-
-  async leaveGroup(): Promise<void> {
-    try {
-      const [group, currentActorId] = [
-        usernameWithDomain(this.group),
-        this.currentActor.id,
-      ];
-      await this.$apollo.mutate({
-        mutation: LEAVE_GROUP,
-        variables: {
-          groupId: this.group.id,
-        },
-        refetchQueries: [
-          {
-            query: PERSON_STATUS_GROUP,
-            variables: {
-              id: currentActorId,
-              group,
-            },
-          },
-        ],
-      });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  async followGroup(): Promise<void> {
-    if (!this.currentActor?.id) {
-      this.$router.push({
-        name: RouteName.GROUP_FOLLOW,
-        params: { preferredUsername: usernameWithDomain(this.group) },
-      });
-      return;
-    }
-    try {
-      const [group, currentActorId] = [
-        usernameWithDomain(this.group),
-        this.currentActor.id,
-      ];
-      await this.$apollo.mutate({
-        mutation: FOLLOW_GROUP,
-        variables: {
-          groupId: this.group.id,
-        },
-        refetchQueries: [
-          {
-            query: PERSON_STATUS_GROUP,
-            variables: {
-              id: currentActorId,
-              group,
-            },
-          },
-        ],
-      });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  async unFollowGroup(): Promise<void> {
-    console.debug("unfollow group");
-    try {
-      const [group, currentActorId] = [
-        usernameWithDomain(this.group),
-        this.currentActor.id,
-      ];
-      await this.$apollo.mutate({
-        mutation: UNFOLLOW_GROUP,
-        variables: {
-          groupId: this.group.id,
-        },
-        refetchQueries: [
-          {
-            query: PERSON_STATUS_GROUP,
-            variables: {
-              id: currentActorId,
-              group,
-            },
-          },
-        ],
-      });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  async toggleFollowNotify(): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: UPDATE_GROUP_FOLLOW,
-      variables: {
-        followId: this.currentActorFollow?.id,
-        notify: !this.isCurrentActorFollowingNotify,
-      },
-    });
-  }
-
-  async reportGroup(content: string, forward: boolean): Promise<void> {
-    this.isReportModalActive = false;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.$refs.reportModal.close();
-    const groupTitle = this.group.name || usernameWithDomain(this.group);
-    try {
-      await this.$apollo.mutate<IReport>({
-        mutation: CREATE_REPORT,
-        variables: {
-          reportedId: this.group.id,
-          content,
-          forward,
-        },
-      });
-      this.$notifier.success(
-        this.$t("Group {groupTitle} reported", { groupTitle }) as string
-      );
-    } catch (error: any) {
-      console.error(error);
-      this.$notifier.error(
-        this.$t("Error while reporting group {groupTitle}", {
-          groupTitle,
-        }) as string
-      );
-    }
-  }
-
-  triggerShare(): void {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-start
-    if (navigator.share) {
-      navigator
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        .share({
-          title: displayName(this.group),
-          url: this.group.url,
-        })
-        .then(() => console.log("Successful share"))
-        .catch((error: any) => console.log("Error sharing", error));
-    } else {
-      this.isShareModalActive = true;
-      // send popup
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-end
-  }
-
-  get groupTitle(): undefined | string {
-    return this.group?.name || this.group?.preferredUsername;
-  }
-
-  get groupSummary(): undefined | string {
-    return this.group?.summary;
-  }
-
-  get groupMember(): IMember | undefined {
-    if (this.person?.memberships?.total > 0) {
-      return this.person?.memberships?.elements[0];
-    }
-    return undefined;
-  }
-
-  @Watch("isCurrentActorAGroupMember")
-  refetchGroupData(): void {
-    this.$apollo.queries.group.refetch();
-  }
-
-  get isCurrentActorARejectedGroupMember(): boolean {
-    return (
-      this.person &&
-      this.person.memberships.elements
-        .filter((membership) => membership.role === MemberRole.REJECTED)
-        .map(({ parent: { id } }) => id)
-        .includes(this.group.id)
-    );
-  }
-
-  get isCurrentActorAnInvitedGroupMember(): boolean {
-    return (
-      this.person &&
-      this.person.memberships.elements
-        .filter((membership) => membership.role === MemberRole.INVITED)
-        .map(({ parent: { id } }) => id)
-        .includes(this.group.id)
-    );
-  }
-
-  /**
-   * New members, if on a different server,
-   * can take a while to refresh the group and fetch all private data
-   */
-  get isCurrentActorARecentMember(): boolean {
-    return (
-      this.groupMember !== undefined &&
-      this.groupMember.role === MemberRole.MEMBER &&
-      addMinutes(new Date(`${this.groupMember.updatedAt}Z`), 10) > new Date()
-    );
-  }
-
-  get isCurrentActorOnADifferentDomainThanGroup(): boolean {
-    return this.group.domain !== null;
-  }
-
-  get members(): IMember[] {
-    return this.group.members.elements.filter(
-      (member) =>
-        ![
-          MemberRole.INVITED,
-          MemberRole.REJECTED,
-          MemberRole.NOT_APPROVED,
-        ].includes(member.role)
-    );
-  }
-
-  get physicalAddress(): Address | null {
-    if (!this.group.physicalAddress) return null;
-    return new Address(this.group.physicalAddress);
-  }
-
-  get ableToReport(): boolean {
-    return (
-      this.config &&
-      (this.currentActor.id !== undefined ||
-        this.config.anonymous.reports.allowed)
-    );
-  }
-
-  get organizedEvents(): Paginate<IEvent> {
-    return {
-      total: this.group.organizedEvents.total,
-      elements: this.group.organizedEvents.elements.filter((event: IEvent) => {
-        if (this.previewPublic) {
-          return !event.draft; // TODO when events get visibility access add visibility constraint like below for posts
-        }
-        return true;
-      }),
-    };
-  }
-
-  get posts(): Paginate<IPost> {
-    return {
-      total: this.group.posts.total,
-      elements: this.group.posts.elements.filter((post: IPost) => {
-        if (this.previewPublic || !this.isCurrentActorAGroupMember) {
-          return !post.draft && post.visibility == PostVisibility.PUBLIC;
-        }
-        return true;
-      }),
-    };
-  }
-
-  get showFollowButton(): boolean {
-    return (
-      (!this.isCurrentActorFollowing || this.previewPublic) &&
-      this.currentActor?.id !== undefined
-    );
-  }
-
-  get showJoinButton(): boolean {
-    return (
-      (!this.isCurrentActorAGroupMember || this.previewPublic) &&
-      this.currentActor?.id !== undefined
-    );
-  }
-
-  get isGroupInviteOnly(): boolean {
-    return (
-      (!this.isCurrentActorAGroupMember || this.previewPublic) &&
-      this.group?.openness === Openness.INVITE_ONLY
-    );
-  }
-
-  get areGroupMembershipsModerated(): boolean {
-    return (
-      (!this.isCurrentActorAGroupMember || this.previewPublic) &&
-      this.group?.openness === Openness.MODERATED
-    );
-  }
-
-  get doesGroupManuallyApprovesFollowers(): boolean {
-    return (
-      (!this.isCurrentActorAGroupMember || this.previewPublic) &&
-      this.group?.manuallyApprovesFollowers
-    );
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@import "~bulma/sass/utilities/mixins.sass";
-div.container {
-  margin-bottom: 3rem;
-
-  .header,
-  .public-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .header {
-    background: $white;
-    padding-top: 1rem;
-  }
-
-  .header .breadcrumb {
-    margin-bottom: 0.5rem;
-    @include margin-left(0.5rem);
-  }
-
-  .block-container {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 15px;
-
-    &.presentation {
-      border: 2px solid $purple-2;
-      padding: 0 0 10px;
-      position: relative;
-      flex-direction: column;
-
-      h1 {
-        color: $purple-1;
-        font-size: 2rem;
-        font-weight: 500;
-      }
-
-      .button.is-outlined {
-        border-color: $purple-2;
-      }
-
-      & > *:not(img) {
-        position: relative;
-        z-index: 2;
-      }
-
-      & > .banner-container {
-        display: flex;
-        justify-content: center;
-        height: 30vh;
-        ::v-deep img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          object-position: 50% 50%;
-        }
-      }
-    }
-
-    div.address {
-      flex: 1;
-      text-align: right;
-      justify-content: flex-end;
-      display: flex;
-
-      .map-show-button {
-        cursor: pointer;
-      }
-
-      p.buttons {
-        margin-top: 1rem;
-        justify-content: end;
-        align-content: space-between;
-
-        & > span {
-          @include margin-right(0.5rem);
-        }
-      }
-
-      address {
-        font-style: normal;
-
-        span.addressDescription {
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          flex: 1 0 auto;
-          min-width: 100%;
-          max-width: 4rem;
-          overflow: hidden;
-        }
-
-        :not(.addressDescription) {
-          color: rgba(46, 62, 72, 0.6);
-          flex: 1;
-          min-width: 100%;
-        }
-      }
-    }
-
-    .block-column {
-      flex: 1;
-      margin: 0;
-      max-width: 576px;
-
-      @include desktop {
-        margin: 0 0.5rem;
-
-        &:first-child {
-          @include margin-left(0);
-        }
-        &:last-child {
-          @include margin-right(0);
-        }
-      }
-
-      section {
-        background: $white;
-
-        &.presentation {
-          .media-left {
-            span.icon.is-large {
-              height: 5rem;
-              width: 5rem;
-
-              ::v-deep i.mdi.mdi-account-group.mdi-48px:before {
-                font-size: 100px;
-              }
-            }
-          }
-
-          .media-content {
-            h2 {
-              color: #3c376e;
-              font-family: "Liberation Sans", "Helvetica Neue", Roboto,
-                Helvetica, Arial, serif;
-              font-size: 1.5rem;
-              font-weight: 700;
-            }
-          }
-        }
-      }
-    }
-
-    .header {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      flex-direction: column;
-      flex: 1;
-      margin: 0;
-      align-items: center;
-
-      .avatar-container {
-        display: flex;
-        align-self: center;
-        height: 0;
-        margin-top: 16px;
-        align-items: flex-end;
-
-        ::v-deep .icon {
-          border-radius: 290486px;
-          border: 1px solid #cdcaea;
-          background: white;
-          height: 5rem;
-          width: 5rem;
-          i::before {
-            font-size: 60px;
-          }
-        }
-
-        figure {
-          position: relative;
-
-          img {
-            position: absolute;
-            background: #fff;
-          }
-        }
-      }
-
-      .title-container {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-
-        h1 {
-          font-size: 32px;
-          line-height: 38px;
-        }
-      }
-
-      .group-metadata {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-
-        & > .buttons {
-          justify-content: center;
-
-          ::v-deep .b-tooltip {
-            @include padding-right(0.5em);
-          }
-        }
-
-        .members {
-          display: flex;
-          flex-direction: column;
-          min-width: 300px;
-          align-items: center;
-
-          div {
-            display: flex;
-          }
-
-          figure:not(:first-child) {
-            @include margin-left(-10px);
-          }
-        }
-      }
-    }
-  }
-
-  .public-container {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row-reverse;
-    padding: 0;
-    margin-top: 1rem;
-
-    .group-metadata {
-      min-width: 20rem;
-      flex: 1;
-      @include padding-left(1rem);
-      @include mobile {
-        @include padding-left(0);
-      }
-
-      .sticky {
-        position: sticky;
-        background: white;
-        top: 50px;
-        padding: 1rem;
-      }
-    }
-    .main-content {
-      min-width: 20rem;
-      flex: 2;
-      background: white;
-      padding: 0 5px;
-
-      @include desktop {
-        padding: 10px;
-      }
-
-      @include mobile {
-        margin-top: 1rem;
-      }
-
-      h2 {
-        margin: 0 auto 10px;
-      }
-    }
-
-    section {
-      margin-top: 0;
-    }
-  }
-
-  .menu-dropdown {
-    ::v-deep .dropdown-item,
-    ::v-deep .has-link a {
-      @include padding-right(1rem);
-    }
-  }
-
-  .organized-events-wrapper,
-  .posts-wrapper {
-    display: grid;
-    grid-gap: 20px;
-    grid-template: 1fr;
-  }
-}
-.map {
-  height: 60vh;
-  width: 100%;
-}
-button.button.notification-button ::v-deep span.icon.is-small {
-  margin: 0 !important;
-}
-</style>
diff --git a/js/src/views/Group/GroupFollowers.vue b/js/src/views/Group/GroupFollowers.vue
index 18c004cd3..f54c68ed3 100644
--- a/js/src/views/Group/GroupFollowers.vue
+++ b/js/src/views/Group/GroupFollowers.vue
@@ -20,22 +20,22 @@
         },
       ]"
     />
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="loading" />
     <section
-      class="container section"
+      class="container mx-auto section"
       v-if="group && isCurrentActorAGroupAdmin && followers"
     >
       <h1>{{ $t("Group Followers") }} ({{ followers.total }})</h1>
-      <b-field :label="$t('Status')" horizontal>
-        <b-switch v-model="pending">{{ $t("Pending") }}</b-switch>
-      </b-field>
-      <b-table
+      <o-field :label="$t('Status')" horizontal>
+        <o-switch v-model="pending">{{ $t("Pending") }}</o-switch>
+      </o-field>
+      <o-table
         :data="followers.elements"
         ref="queueTable"
-        :loading="this.$apollo.loading"
+        :loading="loading"
         paginated
         backend-pagination
-        :current-page.sync="page"
+        v-model:current-page="page"
         :pagination-simple="true"
         :aria-next-label="$t('Next page')"
         :aria-previous-label="$t('Previous page')"
@@ -46,204 +46,193 @@
         backend-sorting
         :default-sort-direction="'desc'"
         :default-sort="['insertedAt', 'desc']"
-        @page-change="triggerLoadMoreFollowersPageChange"
+        @page-change="loadMoreFollowers"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
           :label="$t('Follower')"
           v-slot="props"
         >
-          <article class="media">
-            <figure
-              class="media-left image is-48x48"
-              v-if="props.row.actor.avatar"
-            >
+          <article class="flex gap-1">
+            <figure v-if="props.row.actor.avatar">
               <img
-                class="is-rounded"
+                class="rounded"
                 :src="props.row.actor.avatar.url"
                 alt=""
+                width="48"
+                height="48"
               />
             </figure>
-            <b-icon
-              class="media-left"
-              v-else
-              size="is-large"
-              icon="account-circle"
-            />
-            <div class="media-content">
-              <div class="content">
+            <AccountCircle v-else :size="48" />
+            <div class="">
+              <div class="">
                 <span v-if="props.row.actor.name">{{
                   props.row.actor.name
                 }}</span
                 ><br />
-                <span class="is-size-7 has-text-grey-dark"
-                  >@{{ usernameWithDomain(props.row.actor) }}</span
-                >
+                <span class="">@{{ usernameWithDomain(props.row.actor) }}</span>
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
-            {{ props.row.insertedAt | formatDateString }}<br />{{
-              props.row.insertedAt | formatTimeString
+            {{ formatDateString(props.row.insertedAt) }}<br />{{
+              formatTimeString(props.row.insertedAt)
             }}
           </span>
-        </b-table-column>
-        <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
+        </o-table-column>
+        <o-table-column field="actions" :label="$t('Actions')" v-slot="props">
           <div class="buttons">
-            <b-button
+            <o-button
               v-if="!props.row.approved"
               @click="updateFollower(props.row, true)"
               icon-left="check"
-              type="is-success"
-              >{{ $t("Accept") }}</b-button
+              variant="success"
+              >{{ $t("Accept") }}</o-button
             >
-            <b-button
+            <o-button
               @click="updateFollower(props.row, false)"
               icon-left="close"
-              type="is-danger"
-              >{{ $t("Reject") }}</b-button
+              variant="danger"
+              >{{ $t("Reject") }}</o-button
             >
           </div>
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account" inline>
             {{ $t("No follower matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
-    <b-message v-else-if="!$apollo.loading && group">
+    <o-notification v-else-if="!loading && group">
       {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    </o-notification>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Watch } from "vue-property-decorator";
-import GroupMixin from "@/mixins/group";
-import { mixins } from "vue-class-component";
+<script lang="ts" setup>
 import { GROUP_FOLLOWERS, UPDATE_FOLLOWER } from "@/graphql/followers";
 import RouteName from "../../router/name";
 import { displayName, usernameWithDomain } from "../../types/actor";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { IFollower } from "@/types/actor/follower.model";
-import { Paginate } from "@/types/paginate";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import {
+  booleanTransformer,
+  integerTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
+import { computed, inject } from "vue";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { usePersonStatusGroup } from "@/composition/apollo/actor";
+import { MemberRole } from "@/types/enums";
+import { formatTimeString, formatDateString } from "@/filters/datetime";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { Notifier } from "@/plugins/notifier";
 
-@Component({
-  apollo: {
-    followers: {
-      query: GROUP_FOLLOWERS,
-      variables() {
-        return {
-          name: this.$route.params.preferredUsername,
-          followersPage: this.page,
-          followersLimit: this.FOLLOWERS_PER_PAGE,
-          approved: this.pending === null ? null : !this.pending,
-        };
-      },
-      update: (data) => data.group.followers,
+const props = defineProps<{ preferredUsername: string }>();
+
+const page = useRouteQuery("page", 1, integerTransformer);
+
+const pending = useRouteQuery("pending", false, booleanTransformer);
+
+const FOLLOWERS_PER_PAGE = 10;
+
+const {
+  result: followersResult,
+  fetchMore,
+  loading,
+} = useQuery(GROUP_FOLLOWERS, () => ({
+  name: props.preferredUsername,
+  followersPage: page.value,
+  followersLimit: FOLLOWERS_PER_PAGE,
+  approved: !pending.value,
+}));
+
+const group = computed(() => followersResult.value?.group);
+
+const followers = computed(
+  () => group.value?.followers ?? { total: 0, elements: [] }
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({ title: computed(() => t("Group Followers")) });
+
+const loadMoreFollowers = async (): Promise<void> => {
+  await fetchMore({
+    // New variables
+    variables: {
+      name: usernameWithDomain(group.value),
+      followersPage: page.value,
+      followersLimit: FOLLOWERS_PER_PAGE,
+      approved: !pending.value,
     },
-  },
-  components: {
-    EmptyContent,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Group Followers") as string,
-    };
-  },
-})
-export default class GroupFollowers extends mixins(GroupMixin) {
-  loading = true;
+  });
+};
 
-  RouteName = RouteName;
+const notifier = inject<Notifier>("notifier");
 
-  page = parseInt((this.$route.query.page as string) || "1", 10);
-
-  pending: boolean | null =
-    (this.$route.query.pending as string) == "1" || null;
-
-  FOLLOWERS_PER_PAGE = 10;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  followers!: Paginate<IFollower>;
-
-  mounted(): void {
-    this.page = parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  @Watch("page")
-  triggerLoadMoreFollowersPageChange(page: string): void {
-    this.$router.replace({
-      name: RouteName.GROUP_FOLLOWERS_SETTINGS,
-      query: { ...this.$route.query, page },
-    });
-  }
-
-  @Watch("pending")
-  triggerPendingStatusPageChange(pending: boolean): void {
-    this.$router.replace({
-      name: RouteName.GROUP_FOLLOWERS_SETTINGS,
-      query: { ...this.$route.query, ...{ pending: pending ? "1" : "0" } },
-    });
-  }
-
-  async loadMoreFollowers(): Promise<void> {
-    const { FOLLOWERS_PER_PAGE, group, page, pending } = this;
-    await this.$apollo.queries.followers.fetchMore({
-      // New variables
-      variables() {
-        return {
-          name: usernameWithDomain(group),
-          followersPage: page,
-          followersLimit: FOLLOWERS_PER_PAGE,
-          approved: !pending,
-        };
+const { onDone, onError, mutate } = useMutation<{ updateFollower: IFollower }>(
+  UPDATE_FOLLOWER,
+  () => ({
+    refetchQueries: [
+      {
+        query: GROUP_FOLLOWERS,
       },
-    });
-  }
+    ],
+  })
+);
 
-  async updateFollower(follower: IFollower, approved: boolean): Promise<void> {
-    const { FOLLOWERS_PER_PAGE, group, page, pending } = this;
-    try {
-      await this.$apollo.mutate<{ rejectFollower: IFollower }>({
-        mutation: UPDATE_FOLLOWER,
-        variables: {
-          id: follower.id,
-          approved,
-        },
-        refetchQueries: [
-          {
-            query: GROUP_FOLLOWERS,
-            variables: {
-              name: usernameWithDomain(group),
-              followersPage: page,
-              followersLimit: FOLLOWERS_PER_PAGE,
-              approved: !pending,
-            },
-          },
-        ],
-      });
-      const message = approved
-        ? this.$t("@{username}'s follow request was accepted", {
-            username: follower.actor.preferredUsername,
-          })
-        : this.$t("@{username}'s follow request was rejected", {
-            username: follower.actor.preferredUsername,
-          });
-      this.$notifier.success(message as string);
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
+onDone(({ data }) => {
+  const follower = data?.updateFollower;
+  const message =
+    data?.updateFollower.approved === true
+      ? t("@{username}'s follow request was accepted", {
+          username: follower?.actor.preferredUsername,
+        })
+      : t("@{username}'s follow request was rejected", {
+          username: follower?.actor.preferredUsername,
+        });
+  notifier?.success(message);
+});
+
+onError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
   }
-}
+});
+
+const updateFollower = async (
+  follower: IFollower,
+  approved: boolean
+): Promise<void> => {
+  mutate({
+    id: follower.id,
+    approved,
+  });
+};
+
+const isCurrentActorAGroupAdmin = computed((): boolean => {
+  return hasCurrentActorThisRole(MemberRole.ADMINISTRATOR);
+});
+
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
+  return (
+    personMemberships.value?.total > 0 &&
+    roles.includes(personMemberships.value?.elements[0].role)
+  );
+};
+
+const personMemberships = computed(
+  () => person.value?.memberships ?? { total: 0, elements: [] }
+);
+
+const { person } = usePersonStatusGroup(props.preferredUsername);
 </script>
diff --git a/js/src/views/Group/GroupMembers.vue b/js/src/views/Group/GroupMembers.vue
index a72185f26..ba1eec973 100644
--- a/js/src/views/Group/GroupMembers.vue
+++ b/js/src/views/Group/GroupMembers.vue
@@ -11,194 +11,191 @@
         {
           name: RouteName.GROUP_SETTINGS,
           params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Settings'),
+          text: t('Settings'),
         },
         {
           name: RouteName.GROUP_MEMBERS_SETTINGS,
           params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Members'),
+          text: t('Members'),
         },
       ]"
     />
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="groupMembersLoading" />
     <section
-      class="container section"
+      class="container mx-auto section"
       v-if="group && isCurrentActorAGroupAdmin"
     >
+      <h1>{{ t("Group Members") }} ({{ group.members.total }})</h1>
       <form @submit.prevent="inviteMember">
-        <b-field
-          :label="$t('Invite a new member')"
+        <o-field
+          :label="t('Invite a new member')"
           custom-class="add-relay"
           label-for="new-member-field"
           horizontal
         >
-          <b-field
+          <o-field
             grouped
             expanded
-            size="is-large"
+            size="large"
             :type="inviteError ? 'is-danger' : null"
             :message="inviteError"
           >
             <p class="control">
-              <b-input
+              <o-input
                 id="new-member-field"
                 v-model="newMemberUsername"
-                :placeholder="$t('Ex: someone@mobilizon.org')"
+                :placeholder="t(`Ex: someone{'@'}mobilizon.org`)"
               />
             </p>
             <p class="control">
-              <b-button type="is-primary" native-type="submit">{{
-                $t("Invite member")
-              }}</b-button>
+              <o-button variant="primary" native-type="submit">{{
+                t("Invite member")
+              }}</o-button>
             </p>
-          </b-field>
-        </b-field>
+          </o-field>
+        </o-field>
       </form>
-      <h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
-      <b-field
-        :label="$t('Status')"
+      <o-field
+        class="my-2"
+        :label="t('Status')"
         horizontal
         label-for="group-members-status-filter"
       >
-        <b-select v-model="roles" id="group-members-status-filter">
-          <option value="">
-            {{ $t("Everything") }}
+        <o-select v-model="roles" id="group-members-status-filter">
+          <option :value="undefined">
+            {{ t("Everything") }}
           </option>
           <option :value="MemberRole.ADMINISTRATOR">
-            {{ $t("Administrator") }}
+            {{ t("Administrator") }}
           </option>
           <option :value="MemberRole.MODERATOR">
-            {{ $t("Moderator") }}
+            {{ t("Moderator") }}
           </option>
           <option :value="MemberRole.MEMBER">
-            {{ $t("Member") }}
+            {{ t("Member") }}
           </option>
           <option :value="MemberRole.INVITED">
-            {{ $t("Invited") }}
+            {{ t("Invited") }}
           </option>
           <option :value="MemberRole.NOT_APPROVED">
-            {{ $t("Not approved") }}
+            {{ t("Not approved") }}
           </option>
           <option :value="MemberRole.REJECTED">
-            {{ $t("Rejected") }}
+            {{ t("Rejected") }}
           </option>
-        </b-select>
-      </b-field>
-      <b-table
+        </o-select>
+      </o-field>
+      <o-table
         v-if="members"
         :data="members.elements"
         ref="queueTable"
-        :loading="this.$apollo.loading"
+        :loading="groupMembersLoading"
         paginated
         backend-pagination
-        :current-page.sync="page"
+        v-model:current-page="page"
         :pagination-simple="true"
-        :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')"
         :total="members.total"
         :per-page="MEMBERS_PER_PAGE"
         backend-sorting
         :default-sort-direction="'desc'"
         :default-sort="['insertedAt', 'desc']"
-        @page-change="triggerLoadMoreMemberPageChange"
-        @sort="(field, order) => $emit('sort', field, order)"
+        @page-change="loadMoreMembers"
+        @sort="(field: string, order: string) => emit('sort', field, order)"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
-          :label="$t('Member')"
+          :label="t('Member')"
           v-slot="props"
         >
-          <article class="media">
-            <figure
-              class="media-left image is-48x48"
-              v-if="props.row.actor.avatar"
-            >
+          <article class="flex">
+            <figure v-if="props.row.actor.avatar">
               <img
-                class="is-rounded"
+                class="rounded"
                 :src="props.row.actor.avatar.url"
                 :alt="props.row.actor.avatar.alt || ''"
+                height="48"
+                width="48"
               />
             </figure>
-            <b-icon
-              class="media-left"
-              v-else
-              size="is-large"
-              icon="account-circle"
-            />
-            <div class="media-content">
-              <div class="content">
+            <AccountCircle v-else :size="48" />
+
+            <div class="">
+              <div class="text-start">
                 <span v-if="props.row.actor.name">{{
                   props.row.actor.name
                 }}</span
                 ><br />
-                <span class="is-size-7 has-text-grey-dark"
-                  >@{{ usernameWithDomain(props.row.actor) }}</span
-                >
+                <span class="">@{{ usernameWithDomain(props.row.actor) }}</span>
               </div>
             </div>
           </article>
-        </b-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
-            type="is-primary"
+        </o-table-column>
+        <o-table-column field="role" :label="t('Role')" v-slot="props">
+          <tag
+            variant="info"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
-            {{ $t("Administrator") }}
-          </b-tag>
-          <b-tag
-            type="is-primary"
+            {{ t("Administrator") }}
+          </tag>
+          <tag
+            variant="info"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
-            {{ $t("Moderator") }}
-          </b-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
-            {{ $t("Member") }}
-          </b-tag>
-          <b-tag
-            type="is-warning"
+            {{ t("Moderator") }}
+          </tag>
+          <tag v-else-if="props.row.role === MemberRole.MEMBER">
+            {{ t("Member") }}
+          </tag>
+          <tag
+            variant="warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
-            {{ $t("Not approved") }}
-          </b-tag>
-          <b-tag
-            type="is-danger"
+            {{ t("Not approved") }}
+          </tag>
+          <tag
+            variant="danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
-            {{ $t("Rejected") }}
-          </b-tag>
-          <b-tag
-            type="is-warning"
+            {{ t("Rejected") }}
+          </tag>
+          <tag
+            variant="warning"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
-            {{ $t("Invited") }}
-          </b-tag>
-        </b-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+            {{ t("Invited") }}
+          </tag>
+        </o-table-column>
+        <o-table-column field="insertedAt" :label="t('Date')" v-slot="props">
           <span class="has-text-centered">
-            {{ props.row.insertedAt | formatDateString }}<br />{{
-              props.row.insertedAt | formatTimeString
+            {{ formatDateString(props.row.insertedAt) }}<br />{{
+              formatTimeString(props.row.insertedAt)
             }}
           </span>
-        </b-table-column>
-        <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
-          <div class="buttons" v-if="props.row.actor.id !== currentActor.id">
-            <b-button
-              type="is-success"
+        </o-table-column>
+        <o-table-column field="actions" :label="t('Actions')" v-slot="props">
+          <div
+            class="flex flex-wrap gap-2"
+            v-if="props.row.actor.id !== currentActor?.id"
+          >
+            <o-button
+              variant="success"
               v-if="props.row.role === MemberRole.NOT_APPROVED"
-              @click="approveMember(props.row)"
+              @click="approveMember(props.row.id)"
               icon-left="check"
-              >{{ $t("Approve member") }}</b-button
+              >{{ t("Approve member") }}</o-button
             >
-            <b-button
-              type="is-danger"
+            <o-button
+              variant="danger"
               v-if="props.row.role === MemberRole.NOT_APPROVED"
               @click="rejectMember(props.row)"
               icon-left="exit-to-app"
-              >{{ $t("Reject member") }}</b-button
+              >{{ t("Reject member") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="
                 [MemberRole.MEMBER, MemberRole.MODERATOR].includes(
                   props.row.role
@@ -206,9 +203,9 @@
               "
               @click="promoteMember(props.row)"
               icon-left="chevron-double-up"
-              >{{ $t("Promote") }}</b-button
+              >{{ t("Promote") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="
                 [MemberRole.ADMINISTRATOR, MemberRole.MODERATOR].includes(
                   props.row.role
@@ -216,293 +213,310 @@
               "
               @click="demoteMember(props.row)"
               icon-left="chevron-double-down"
-              >{{ $t("Demote") }}</b-button
+              >{{ t("Demote") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="props.row.role === MemberRole.MEMBER"
               @click="removeMember(props.row)"
-              type="is-danger"
+              variant="danger"
               icon-left="exit-to-app"
-              >{{ $t("Remove") }}</b-button
+              >{{ t("Remove") }}</o-button
             >
           </div>
-        </b-table-column>
-        <template slot="empty">
+        </o-table-column>
+        <template #empty>
           <empty-content icon="account" inline>
-            {{ $t("No member matches the filters") }}
+            {{ t("No member matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
-    <b-message v-else-if="!$apollo.loading && group">
-      {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    <o-notification v-else-if="!groupMembersLoading && group">
+      {{ t("You are not an administrator for this group.") }}
+    </o-notification>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Watch } from "vue-property-decorator";
-import GroupMixin from "@/mixins/group";
-import { mixins } from "vue-class-component";
+<script lang="ts" setup>
 import { FETCH_GROUP } from "@/graphql/group";
 import { MemberRole } from "@/types/enums";
 import { IMember } from "@/types/actor/member.model";
-import RouteName from "../../router/name";
+import RouteName from "@/router/name";
 import {
   INVITE_MEMBER,
   GROUP_MEMBERS,
   REMOVE_MEMBER,
   UPDATE_MEMBER,
   APPROVE_MEMBER,
-} from "../../graphql/member";
-import { usernameWithDomain, displayName } from "../../types/actor";
+} from "@/graphql/member";
+import { usernameWithDomain, displayName, IGroup } from "@/types/actor";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, inject, ref } from "vue";
+import {
+  enumTransformer,
+  integerTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
+import {
+  useCurrentActorClient,
+  usePersonStatusGroup,
+} from "@/composition/apollo/actor";
+import { formatTimeString, formatDateString } from "@/filters/datetime";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { Notifier } from "@/plugins/notifier";
+import Tag from "@/components/TagElement.vue";
 
-@Component({
-  apollo: {
-    members: {
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Group members")),
+});
+
+const props = defineProps<{ preferredUsername: string }>();
+
+const emit = defineEmits(["sort"]);
+
+const { currentActor } = useCurrentActorClient();
+
+const newMemberUsername = ref("");
+const inviteError = ref("");
+const page = useRouteQuery("page", 1, integerTransformer);
+const roles = useRouteQuery("roles", undefined, enumTransformer(MemberRole));
+const MEMBERS_PER_PAGE = 10;
+const notifier = inject<Notifier>("notifier");
+
+const {
+  result: groupMembersResult,
+  fetchMore: fetchMoreGroupMembers,
+  loading: groupMembersLoading,
+} = useQuery<{ group: IGroup }>(GROUP_MEMBERS, () => ({
+  groupName: props.preferredUsername,
+  page: page.value,
+  limit: MEMBERS_PER_PAGE,
+  roles: roles.value,
+}));
+const group = computed(() => groupMembersResult.value?.group);
+
+const members = computed(
+  () => group.value?.members ?? { total: 0, elements: [] }
+);
+
+const {
+  mutate: inviteMemberMutation,
+  onDone: onInviteMemberDone,
+  onError: onInviteMemberError,
+} = useMutation<{ inviteMember: IMember }>(INVITE_MEMBER, () => ({
+  refetchQueries: [
+    {
       query: GROUP_MEMBERS,
-      variables() {
-        return {
-          groupName: this.$route.params.preferredUsername,
-          page: this.page,
-          limit: this.MEMBERS_PER_PAGE,
-          roles: this.roles,
-        };
-      },
-      update: (data) => data.group.members,
     },
-  },
-  components: {
-    EmptyContent,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Group Members") as string,
-    };
-  },
-})
-export default class GroupMembers extends mixins(GroupMixin) {
-  loading = true;
+  ],
+}));
 
-  newMemberUsername = "";
-
-  inviteError = "";
-
-  MemberRole = MemberRole;
-
-  roles: MemberRole | "" = "";
-
-  RouteName = RouteName;
-
-  page = parseInt((this.$route.query.page as string) || "1", 10);
-
-  MEMBERS_PER_PAGE = 10;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  mounted(): void {
-    const roleQuery = this.$route.query.role as string;
-    if (Object.values(MemberRole).includes(roleQuery as MemberRole)) {
-      this.roles = roleQuery as MemberRole;
-    }
-    this.page = parseInt((this.$route.query.page as string) || "1", 10);
+onInviteMemberError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    inviteError.value = error.graphQLErrors[0].message;
   }
+});
 
-  async inviteMember(): Promise<void> {
-    try {
-      this.inviteError = "";
-      const { roles, MEMBERS_PER_PAGE, group, page } = this;
-      const variables = {
-        groupName: usernameWithDomain(group),
+onInviteMemberDone(() => {
+  notifier?.success(
+    t("{username} was invited to {group}", {
+      username: newMemberUsername.value,
+      group: displayName(group.value),
+    })
+  );
+  newMemberUsername.value = "";
+});
+
+const inviteMember = async (): Promise<void> => {
+  inviteError.value = "";
+  inviteMemberMutation({
+    groupId: group.value?.id,
+    targetActorUsername: newMemberUsername.value,
+  });
+};
+
+const loadMoreMembers = async (): Promise<void> => {
+  await fetchMoreGroupMembers({
+    // New variables
+    variables() {
+      return {
+        name: usernameWithDomain(group.value),
         page,
         limit: MEMBERS_PER_PAGE,
         roles,
       };
-      console.log("variables", variables);
-      await this.$apollo.mutate<{ inviteMember: IMember }>({
-        mutation: INVITE_MEMBER,
-        variables: {
-          groupId: this.group.id,
-          targetActorUsername: this.newMemberUsername,
-        },
-        refetchQueries: [
-          {
-            query: GROUP_MEMBERS,
-            variables,
-          },
-        ],
-      });
-      this.$notifier.success(
-        this.$t("{username} was invited to {group}", {
-          username: this.newMemberUsername,
-          group: displayName(this.group),
-        }) as string
-      );
-      this.newMemberUsername = "";
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.inviteError = error.graphQLErrors[0].message;
+    },
+  });
+};
+
+const {
+  mutate: mutateRemoveMember,
+  onDone: onRemoveMemberDone,
+  onError: onRemoveMemberError,
+} = useMutation(REMOVE_MEMBER, () => ({
+  refetchQueries: [
+    {
+      query: GROUP_MEMBERS,
+    },
+  ],
+}));
+
+onRemoveMemberDone(({ context }) => {
+  let message = t("The member was removed from the group {group}", {
+    group: displayName(group.value),
+  }) as string;
+  if (context?.oldMember.role === MemberRole.NOT_APPROVED) {
+    message = t("The membership request from {profile} was rejected", {
+      group: displayName(context?.oldMember.actor),
+    }) as string;
+  }
+  notifier?.success(message);
+});
+
+onRemoveMemberError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
+
+const removeMember = (oldMember: IMember) => {
+  mutateRemoveMember(
+    {
+      groupId: group.value?.id,
+      memberId: oldMember.id,
+    },
+    {
+      context: { oldMember },
+    }
+  );
+};
+
+const promoteMember = (member: IMember): void => {
+  if (!member.id) return;
+  if (member.role === MemberRole.MODERATOR) {
+    updateMember(member, MemberRole.ADMINISTRATOR);
+  }
+  if (member.role === MemberRole.MEMBER) {
+    updateMember(member, MemberRole.MODERATOR);
+  }
+};
+
+const demoteMember = (member: IMember): void => {
+  if (!member.id) return;
+  if (member.role === MemberRole.MODERATOR) {
+    updateMember(member, MemberRole.MEMBER);
+  }
+  if (member.role === MemberRole.ADMINISTRATOR) {
+    updateMember(member, MemberRole.MODERATOR);
+  }
+};
+
+const {
+  mutate: approveMember,
+  onDone: onApproveMemberDone,
+  onError: onApproveMemberError,
+} = useMutation<{ approveMember: IMember }, { memberId: string }>(
+  APPROVE_MEMBER
+);
+
+onApproveMemberDone(() => {
+  notifier?.success(t("The member was approved"));
+});
+
+onApproveMemberError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
+
+const rejectMember = (member: IMember): void => {
+  if (!member.id) return;
+  removeMember(member);
+};
+
+const {
+  mutate: updateMemberMutation,
+  onDone: onUpdateMutationDone,
+  onError: onUpdateMutationError,
+} = useMutation<
+  { id: string; role: MemberRole },
+  { memberId: string; role: MemberRole; oldRole: MemberRole }
+>(UPDATE_MEMBER, () => ({
+  refetchQueries: [
+    {
+      query: FETCH_GROUP,
+      variables: { name: props.preferredUsername },
+    },
+  ],
+}));
+
+onUpdateMutationDone(({ data, context }) => {
+  let successMessage;
+  console.debug("onUpdateMutationDone", context);
+  switch (data?.role) {
+    case MemberRole.MODERATOR:
+      successMessage = "The member role was updated to moderator";
+      break;
+    case MemberRole.ADMINISTRATOR:
+      successMessage = "The member role was updated to administrator";
+      break;
+    case MemberRole.MEMBER:
+      if (context?.oldMember.role === MemberRole.NOT_APPROVED) {
+        successMessage = "The member was approved";
+      } else {
+        successMessage = "The member role was updated to simple member";
       }
-    }
+      break;
+    default:
+      successMessage = "The member role was updated";
   }
+  notifier?.success(t(successMessage));
+});
 
-  @Watch("page")
-  triggerLoadMoreMemberPageChange(page: string): void {
-    this.$router.replace({
-      name: RouteName.GROUP_MEMBERS_SETTINGS,
-      query: { ...this.$route.query, page },
-    });
+onUpdateMutationError((error) => {
+  console.error(error);
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
   }
+});
 
-  @Watch("roles")
-  triggerLoadMoreMemberRoleChange(roles: string): void {
-    this.$router.replace({
-      name: RouteName.GROUP_MEMBERS_SETTINGS,
-      query: { ...this.$route.query, roles },
-    });
-  }
+const updateMember = async (
+  oldMember: IMember,
+  role: MemberRole
+): Promise<void> => {
+  updateMemberMutation(
+    {
+      memberId: oldMember.id as string,
+      role,
+      oldRole: oldMember.role,
+    },
+    { context: { oldMember } }
+  );
+};
 
-  async loadMoreMembers(): Promise<void> {
-    const { roles, MEMBERS_PER_PAGE, group, page } = this;
-    await this.$apollo.queries.members.fetchMore({
-      // New variables
-      variables() {
-        return {
-          name: usernameWithDomain(group),
-          page,
-          limit: MEMBERS_PER_PAGE,
-          roles,
-        };
-      },
-    });
-  }
+const isCurrentActorAGroupAdmin = computed((): boolean => {
+  return hasCurrentActorThisRole(MemberRole.ADMINISTRATOR);
+});
 
-  async removeMember(oldMember: IMember): Promise<void> {
-    const { roles, MEMBERS_PER_PAGE, group, page } = this;
-    const variables = {
-      groupName: usernameWithDomain(group),
-      page,
-      limit: MEMBERS_PER_PAGE,
-      roles,
-    };
-    try {
-      await this.$apollo.mutate<{ removeMember: IMember }>({
-        mutation: REMOVE_MEMBER,
-        variables: {
-          groupId: this.group.id,
-          memberId: oldMember.id,
-        },
-        refetchQueries: [
-          {
-            query: GROUP_MEMBERS,
-            variables,
-          },
-        ],
-      });
-      let message = this.$t("The member was removed from the group {group}", {
-        group: displayName(this.group),
-      }) as string;
-      if (oldMember.role === MemberRole.NOT_APPROVED) {
-        message = this.$t(
-          "The membership request from {profile} was rejected",
-          {
-            group: displayName(oldMember.actor),
-          }
-        ) as string;
-      }
-      this.$notifier.success(message);
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const rolesToConsider = Array.isArray(givenRole) ? givenRole : [givenRole];
+  return (
+    personMemberships.value?.total > 0 &&
+    rolesToConsider.includes(personMemberships.value?.elements[0].role)
+  );
+};
 
-  promoteMember(member: IMember): void {
-    if (!member.id) return;
-    if (member.role === MemberRole.MODERATOR) {
-      this.updateMember(member, MemberRole.ADMINISTRATOR);
-    }
-    if (member.role === MemberRole.MEMBER) {
-      this.updateMember(member, MemberRole.MODERATOR);
-    }
-  }
+const personMemberships = computed(
+  () => person.value?.memberships ?? { total: 0, elements: [] }
+);
 
-  demoteMember(member: IMember): void {
-    if (!member.id) return;
-    if (member.role === MemberRole.MODERATOR) {
-      this.updateMember(member, MemberRole.MEMBER);
-    }
-    if (member.role === MemberRole.ADMINISTRATOR) {
-      this.updateMember(member, MemberRole.MODERATOR);
-    }
-  }
-
-  async approveMember(member: IMember): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ approveMember: IMember }>({
-        mutation: APPROVE_MEMBER,
-        variables: { memberId: member.id },
-      });
-      this.$notifier.success(this.$t("The member was approved") as string);
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-
-  rejectMember(member: IMember): void {
-    if (!member.id) return;
-    this.removeMember(member);
-  }
-
-  async updateMember(oldMember: IMember, role: MemberRole): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ updateMember: IMember }>({
-        mutation: UPDATE_MEMBER,
-        variables: {
-          memberId: oldMember.id,
-          role,
-        },
-        refetchQueries: [
-          {
-            query: FETCH_GROUP,
-            variables: { name: this.$route.params.preferredUsername },
-          },
-        ],
-      });
-      let successMessage;
-      switch (role) {
-        case MemberRole.MODERATOR:
-          successMessage = "The member role was updated to moderator";
-          break;
-        case MemberRole.ADMINISTRATOR:
-          successMessage = "The member role was updated to administrator";
-          break;
-        case MemberRole.MEMBER:
-          if (oldMember.role === MemberRole.NOT_APPROVED) {
-            successMessage = "The member was approved";
-          } else {
-            successMessage = "The member role was updated to simple member";
-          }
-          break;
-        default:
-          successMessage = "The member role was updated";
-      }
-      this.$notifier.success(this.$t(successMessage) as string);
-    } catch (error: any) {
-      console.error(error);
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
-}
+const { person } = usePersonStatusGroup(props.preferredUsername);
 </script>
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index da5479e33..d1590f87b 100644
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -11,376 +11,431 @@
         {
           name: RouteName.GROUP_SETTINGS,
           params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Settings'),
+          text: t('Settings'),
         },
         {
           name: RouteName.GROUP_PUBLIC_SETTINGS,
           params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Group settings'),
+          text: t('Group settings'),
         },
       ]"
     />
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="loading" />
     <section
-      class="container section"
+      class="container mx-auto mb-6"
       v-if="group && isCurrentActorAGroupAdmin"
     >
-      <form @submit.prevent="updateGroup">
-        <b-field :label="$t('Group name')" label-for="group-settings-name">
-          <b-input v-model="editableGroup.name" id="group-settings-name" />
-        </b-field>
-        <b-field :label="$t('Group short description')">
-          <editor
+      <form @submit.prevent="updateGroup(buildVariables)" v-if="editableGroup">
+        <o-field :label="t('Group name')" label-for="group-settings-name">
+          <o-input v-model="editableGroup.name" id="group-settings-name" />
+        </o-field>
+        <o-field :label="t('Group short description')">
+          <Editor
             mode="basic"
             v-model="editableGroup.summary"
             :maxSize="500"
-            :aria-label="$t('Group description body')"
-        /></b-field>
-        <b-field :label="$t('Avatar')">
+            :aria-label="t('Group description body')"
+            v-if="currentActor"
+            :currentActor="currentActor"
+        /></o-field>
+        <o-field :label="t('Avatar')">
           <picture-upload
-            :textFallback="$t('Avatar')"
+            :textFallback="t('Avatar')"
             v-model="avatarFile"
             :defaultImage="group.avatar"
             :maxSize="avatarMaxSize"
           />
-        </b-field>
+        </o-field>
 
-        <b-field :label="$t('Banner')">
+        <o-field :label="t('Banner')">
           <picture-upload
-            :textFallback="$t('Banner')"
+            :textFallback="t('Banner')"
             v-model="bannerFile"
             :defaultImage="group.banner"
             :maxSize="bannerMaxSize"
           />
-        </b-field>
-        <p class="label">{{ $t("Group visibility") }}</p>
+        </o-field>
+        <p class="label">{{ t("Group visibility") }}</p>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.visibility"
             name="groupVisibility"
             :native-value="GroupVisibility.PUBLIC"
           >
-            {{ $t("Visible everywhere on the web") }}<br />
+            {{ t("Visible everywhere on the web") }}<br />
             <small>{{
-              $t(
+              t(
                 "The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.visibility"
             name="groupVisibility"
             :native-value="GroupVisibility.UNLISTED"
-            >{{ $t("Only accessible through link") }}<br />
+            >{{ t("Only accessible through link") }}<br />
             <small>{{
-              $t(
+              t(
                 "You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines."
               )
             }}</small>
-          </b-radio>
-          <p class="control">
+          </o-radio>
+          <p class="pl-6">
             <code>{{ group.url }}</code>
-            <b-tooltip
+            <o-tooltip
               v-if="canShowCopyButton"
-              :label="$t('URL copied to clipboard')"
+              :label="t('URL copied to clipboard')"
               :active="showCopiedTooltip"
               always
-              type="is-success"
-              position="is-left"
+              variant="success"
+              position="left"
             >
-              <b-button
-                type="is-primary"
+              <o-button
+                variant="primary"
                 icon-right="content-paste"
                 native-type="button"
                 @click="copyURL"
                 @keyup.enter="copyURL"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
         </div>
 
-        <p class="label">{{ $t("New members") }}</p>
+        <p class="label">{{ t("New members") }}</p>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.OPEN"
           >
-            {{ $t("Anyone can join freely") }}<br />
+            {{ t("Anyone can join freely") }}<br />
             <small>{{
-              $t(
+              t(
                 "Anyone wanting to be a member from your group will be able to from your group page."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.MODERATED"
-            >{{ $t("Moderate new members") }}<br />
+            >{{ t("Moderate new members") }}<br />
             <small>{{
-              $t(
+              t(
                 "Anyone can request being a member, but an administrator needs to approve the membership."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
         <div class="field">
-          <b-radio
+          <o-radio
             v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.INVITE_ONLY"
-            >{{ $t("Manually invite new members") }}<br />
+            >{{ t("Manually invite new members") }}<br />
             <small>{{
-              $t(
+              t(
                 "The only way for your group to get new members is if an admininistrator invites them."
               )
             }}</small>
-          </b-radio>
+          </o-radio>
         </div>
 
-        <b-field
-          :label="$t('Followers')"
-          :message="$t('Followers will receive new public events and posts.')"
+        <o-field
+          :label="t('Followers')"
+          :message="t('Followers will receive new public events and posts.')"
         >
-          <b-checkbox v-model="editableGroup.manuallyApprovesFollowers">
-            {{ $t("Manually approve new followers") }}
-          </b-checkbox>
-        </b-field>
+          <o-checkbox v-model="editableGroup.manuallyApprovesFollowers">
+            {{ t("Manually approve new followers") }}
+          </o-checkbox>
+        </o-field>
 
         <full-address-auto-complete
-          :label="$t('Group address')"
+          :label="t('Group address')"
           v-model="currentAddress"
           :hideMap="true"
         />
 
-        <div class="buttons">
-          <b-button native-type="submit" type="is-primary">{{
-            $t("Update group")
-          }}</b-button>
-          <b-button @click="confirmDeleteGroup" type="is-danger">{{
-            $t("Delete group")
-          }}</b-button>
+        <div class="flex flex-wrap gap-2 my-2">
+          <o-button native-type="submit" variant="primary">{{
+            t("Update group")
+          }}</o-button>
+          <o-button @click="confirmDeleteGroup" variant="danger">{{
+            t("Delete group")
+          }}</o-button>
         </div>
       </form>
-      <b-message type="is-danger" v-for="(value, index) in errors" :key="index">
+      <o-notification
+        variant="danger"
+        v-for="(value, index) in errors"
+        :key="index"
+      >
         {{ value }}
-      </b-message>
+      </o-notification>
     </section>
-    <b-message v-else-if="!$apollo.loading">
-      {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    <o-notification v-else-if="!loading">
+      {{ t("You are not an administrator for this group.") }}
+    </o-notification>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Watch } from "vue-property-decorator";
+<script lang="ts" setup>
 import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
 import PictureUpload from "@/components/PictureUpload.vue";
-import { mixins } from "vue-class-component";
-import GroupMixin from "@/mixins/group";
-import { GroupVisibility, Openness } from "@/types/enums";
-import { UPDATE_GROUP } from "../../graphql/group";
-import {
-  Group,
-  IGroup,
-  usernameWithDomain,
-  displayName,
-} from "../../types/actor";
-import { Address, IAddress } from "../../types/address.model";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
+import { GroupVisibility, MemberRole, Openness } from "@/types/enums";
+import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
+import { Address, IAddress } from "@/types/address.model";
 import { ServerParseError } from "@apollo/client/link/http";
 import { ErrorResponse } from "@apollo/client/link/error";
 import RouteName from "@/router/name";
 import { buildFileFromIMedia } from "@/utils/image";
+import { useAvatarMaxSize, useBannerMaxSize } from "@/composition/config";
+import { useI18n } from "vue-i18n";
+import { computed, ref, watch, defineAsyncComponent, inject } from "vue";
+import { useGroup, useUpdateGroup } from "@/composition/apollo/group";
+import {
+  useCurrentActorClient,
+  usePersonStatusGroup,
+} from "@/composition/apollo/actor";
+import { DELETE_GROUP } from "@/graphql/group";
+import { useMutation } from "@vue/apollo-composable";
+import { useRouter } from "vue-router";
+import { Dialog } from "@/plugins/dialog";
+import { useHead } from "@vueuse/head";
+import { Notifier } from "@/plugins/notifier";
 
-@Component({
-  components: {
-    FullAddressAutoComplete,
-    PictureUpload,
-    editor: () => import("../../components/Editor.vue"),
-  },
-  apollo: {
-    config: CONFIG,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Group settings") as string,
-    };
-  },
-})
-export default class GroupSettings extends mixins(GroupMixin) {
-  RouteName = RouteName;
+const Editor = defineAsyncComponent(
+  () => import("@/components/TextEditor.vue")
+);
 
-  config!: IConfig;
+const props = defineProps<{ preferredUsername: string }>();
 
-  errors: string[] = [];
+const { currentActor } = useCurrentActorClient();
 
-  avatarFile: File | null = null;
+const {
+  group,
+  loading,
+  onResult: onGroupResult,
+} = useGroup(props.preferredUsername);
 
-  bannerFile: File | null = null;
+const { t } = useI18n({ useScope: "global" });
 
-  usernameWithDomain = usernameWithDomain;
+useHead({
+  title: computed(() => t("Group settings")),
+});
 
-  displayName = displayName;
+const notifier = inject<Notifier>("notifier");
 
-  GroupVisibility = GroupVisibility;
+const avatarFile = ref<File | null>(null);
+const bannerFile = ref<File | null>(null);
 
-  Openness = Openness;
+const errors = ref<string[]>([]);
 
-  showCopiedTooltip = false;
+const showCopiedTooltip = ref(false);
 
-  editableGroup: IGroup = new Group();
+const editableGroup = ref<IGroup>();
 
-  async updateGroup(): Promise<void> {
-    try {
-      const variables = this.buildVariables();
-      await this.$apollo.mutate<{ updateGroup: IGroup }>({
-        mutation: UPDATE_GROUP,
-        variables,
-      });
-      this.$notifier.success(this.$t("Group settings saved") as string);
-    } catch (err: any) {
-      this.handleError(err);
-    }
-  }
-  async copyURL(): Promise<void> {
-    await window.navigator.clipboard.writeText(this.group.url);
-    this.showCopiedTooltip = true;
-    setTimeout(() => {
-      this.showCopiedTooltip = false;
-    }, 2000);
-  }
+const { onDone, onError, mutate: updateGroup } = useUpdateGroup();
 
-  @Watch("group")
-  async watchUpdateGroup(oldGroup: IGroup, newGroup: IGroup): Promise<void> {
+onDone(() => {
+  notifier?.success(t("Group settings saved"));
+});
+
+onError((err) => {
+  handleError(err as unknown as ErrorResponse);
+});
+
+const copyURL = async (): Promise<void> => {
+  await window.navigator.clipboard.writeText(group.value?.url ?? "");
+  showCopiedTooltip.value = true;
+  setTimeout(() => {
+    showCopiedTooltip.value = false;
+  }, 2000);
+};
+
+onGroupResult(({ data }) => {
+  editableGroup.value = data.group;
+});
+
+watch(
+  group,
+  async (newGroup: IGroup, oldGroup: IGroup) => {
+    console.debug("watching group");
+    if (!newGroup) return;
     try {
       if (
         oldGroup?.avatar !== undefined &&
         oldGroup?.avatar !== newGroup?.avatar
       ) {
-        this.avatarFile = await buildFileFromIMedia(this.group.avatar);
+        avatarFile.value = await buildFileFromIMedia(newGroup?.avatar);
       }
       if (
         oldGroup?.banner !== undefined &&
         oldGroup?.banner !== newGroup?.banner
       ) {
-        this.bannerFile = await buildFileFromIMedia(this.group.banner);
+        bannerFile.value = await buildFileFromIMedia(newGroup?.banner);
       }
     } catch (e) {
       // Catch errors while building media
       console.error(e);
     }
-    this.editableGroup = { ...this.group };
+    editableGroup.value = { ...newGroup };
+  },
+  {
+    immediate: true,
+  }
+);
+
+const buildVariables = computed(() => {
+  let avatarObj = {};
+  let bannerObj = {};
+  const variables = { ...editableGroup.value };
+  let physicalAddress;
+  if (variables.physicalAddress) {
+    physicalAddress = { ...variables.physicalAddress };
+  } else {
+    physicalAddress = variables.physicalAddress;
   }
 
-  private buildVariables() {
-    let avatarObj = {};
-    let bannerObj = {};
-    const variables = { ...this.editableGroup };
-    let physicalAddress;
-    if (variables.physicalAddress) {
-      physicalAddress = { ...variables.physicalAddress };
-    } else {
-      physicalAddress = variables.physicalAddress;
-    }
-
+  // eslint-disable-next-line
+  // @ts-ignore
+  if (variables.__typename) {
     // eslint-disable-next-line
     // @ts-ignore
-    if (variables.__typename) {
-      // eslint-disable-next-line
-      // @ts-ignore
-      delete variables.__typename;
-    }
+    delete variables.__typename;
+  }
+  // eslint-disable-next-line
+  // @ts-ignore
+  if (physicalAddress && physicalAddress.__typename) {
     // eslint-disable-next-line
     // @ts-ignore
-    if (physicalAddress && physicalAddress.__typename) {
-      // eslint-disable-next-line
-      // @ts-ignore
-      delete physicalAddress.__typename;
-    }
-    delete variables.avatar;
-    delete variables.banner;
+    delete physicalAddress.__typename;
+  }
+  delete variables.avatar;
+  delete variables.banner;
 
-    if (this.avatarFile) {
-      avatarObj = {
-        avatar: {
-          media: {
-            name: this.avatarFile.name,
-            alt: `${this.editableGroup.preferredUsername}'s avatar`,
-            file: this.avatarFile,
-          },
+  if (avatarFile.value) {
+    avatarObj = {
+      avatar: {
+        media: {
+          name: avatarFile.value?.name,
+          alt: `${editableGroup.value?.preferredUsername}'s avatar`,
+          file: avatarFile.value,
         },
-      };
-    }
-
-    if (this.bannerFile) {
-      bannerObj = {
-        banner: {
-          media: {
-            name: this.bannerFile.name,
-            alt: `${this.editableGroup.preferredUsername}'s banner`,
-            file: this.bannerFile,
-          },
-        },
-      };
-    }
-    return {
-      id: this.group.id,
-      name: this.editableGroup.name,
-      summary: this.editableGroup.summary,
-      visibility: this.editableGroup.visibility,
-      openness: this.editableGroup.openness,
-      manuallyApprovesFollowers: this.editableGroup.manuallyApprovesFollowers,
-      physicalAddress,
-      ...avatarObj,
-      ...bannerObj,
+      },
     };
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  get canShowCopyButton(): boolean {
-    return window.isSecureContext;
+  if (bannerFile.value) {
+    bannerObj = {
+      banner: {
+        media: {
+          name: bannerFile.value?.name,
+          alt: `${editableGroup.value?.preferredUsername}'s banner`,
+          file: bannerFile.value,
+        },
+      },
+    };
   }
+  return {
+    id: group.value?.id ?? "",
+    name: editableGroup.value?.name,
+    summary: editableGroup.value?.summary,
+    visibility: editableGroup.value?.visibility,
+    openness: editableGroup.value?.openness,
+    manuallyApprovesFollowers: editableGroup.value?.manuallyApprovesFollowers,
+    physicalAddress,
+    ...avatarObj,
+    ...bannerObj,
+  };
+});
 
-  get currentAddress(): IAddress {
-    return new Address(this.editableGroup.physicalAddress);
-  }
+const canShowCopyButton = computed((): boolean => {
+  return window.isSecureContext;
+});
 
-  set currentAddress(address: IAddress) {
-    this.editableGroup.physicalAddress = address;
-  }
-
-  get avatarMaxSize(): number | undefined {
-    return this?.config?.uploadLimits?.avatar;
-  }
-
-  get bannerMaxSize(): number | undefined {
-    return this?.config?.uploadLimits?.banner;
-  }
-
-  private handleError(err: ErrorResponse) {
-    if (err?.networkError?.name === "ServerParseError") {
-      const error = err?.networkError as ServerParseError;
-
-      if (error?.response?.status === 413) {
-        this.errors.push(
-          this.$t(
-            "Unable to create the group. One of the pictures may be too heavy."
-          ) as string
-        );
-      }
+const currentAddress = computed({
+  get(): IAddress {
+    return new Address(editableGroup.value?.physicalAddress);
+  },
+  set(address: IAddress) {
+    if (editableGroup.value) {
+      editableGroup.value.physicalAddress = address;
+    }
+  },
+});
+
+const avatarMaxSize = useAvatarMaxSize();
+const bannerMaxSize = useBannerMaxSize();
+
+const handleError = (err: ErrorResponse) => {
+  if (err?.networkError?.name === "ServerParseError") {
+    const error = err?.networkError as ServerParseError;
+
+    if (error?.response?.status === 413) {
+      errors.value.push(
+        t(
+          "Unable to create the group. One of the pictures may be too heavy."
+        ) as string
+      );
     }
-    this.errors.push(
-      ...(err.graphQLErrors || []).map(
-        ({ message }: { message: string }) => message
-      )
-    );
   }
-}
+  errors.value.push(
+    ...(err.graphQLErrors || []).map(
+      ({ message }: { message: string }) => message
+    )
+  );
+};
+
+const isCurrentActorAGroupAdmin = computed((): boolean => {
+  return hasCurrentActorThisRole(MemberRole.ADMINISTRATOR);
+});
+
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
+  return (
+    personMemberships.value?.total > 0 &&
+    roles.includes(personMemberships.value?.elements[0].role)
+  );
+};
+
+const personMemberships = computed(
+  () => person.value?.memberships ?? { total: 0, elements: [] }
+);
+
+const { person } = usePersonStatusGroup(props.preferredUsername);
+
+const dialog = inject<Dialog>("dialog");
+
+const confirmDeleteGroup = (): void => {
+  console.debug("confirm delete group", dialog);
+  dialog?.confirm({
+    title: t("Delete group"),
+    message: t(
+      "Are you sure you want to <b>completely delete</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
+    ),
+    confirmText: t("Delete group"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    hasIcon: true,
+    onConfirm: () =>
+      deleteGroupMutation({
+        groupId: group.value?.id,
+      }),
+  });
+};
+
+const { mutate: deleteGroupMutation, onDone: deleteGroupDone } = useMutation<{
+  deleteGroup: IGroup;
+}>(DELETE_GROUP);
+
+const router = useRouter();
+
+deleteGroupDone(() => {
+  router.push({ name: RouteName.MY_GROUPS });
+});
 </script>
diff --git a/js/src/views/Group/GroupView.vue b/js/src/views/Group/GroupView.vue
new file mode 100644
index 000000000..da4d9ef73
--- /dev/null
+++ b/js/src/views/Group/GroupView.vue
@@ -0,0 +1,1269 @@
+<template>
+  <div class="container mx-auto is-widescreen">
+    <div class="header flex flex-col">
+      <breadcrumbs-nav
+        v-if="group"
+        :links="[
+          { name: RouteName.MY_GROUPS, text: t('My groups') },
+          {
+            name: RouteName.GROUP,
+            params: { preferredUsername: usernameWithDomain(group) },
+            text: displayName(group),
+          },
+        ]"
+      />
+      <!-- <o-loading v-model:active="$apollo.loading"></o-loading> -->
+      <header class="block-container presentation" v-if="group">
+        <div class="banner-container">
+          <lazy-image-wrapper :picture="group.banner" />
+        </div>
+        <div class="header flex flex-col">
+          <div class="flex self-center h-0 mt-4 items-end">
+            <figure class="" v-if="group.avatar">
+              <img
+                class="rounded-full border h-32 w-32"
+                :src="group.avatar.url"
+                alt=""
+                width="128"
+                height="128"
+              />
+            </figure>
+            <AccountGroup v-else :size="128" />
+          </div>
+          <div class="title-container flex flex-1 flex-col text-center">
+            <h1 class="m-0" v-if="group.name">
+              {{ group.name }}
+            </h1>
+            <!-- <o-skeleton v-else :animated="true" /> -->
+            <span dir="ltr" class="" v-if="group.preferredUsername"
+              >@{{ usernameWithDomain(group) }}</span
+            >
+            <!-- <o-skeleton v-else :animated="true" /> -->
+            <br />
+          </div>
+          <div class="flex flex-wrap justify-center flex-col md:flex-row">
+            <div
+              class="flex flex-col items-center flex-1 m-0"
+              v-if="isCurrentActorAGroupMember && !previewPublic"
+            >
+              <div class="flex gap-1">
+                <figure
+                  :title="
+                    t(`{'@'}{username} ({role})`, {
+                      username: usernameWithDomain(member.actor),
+                      role: member.role,
+                    })
+                  "
+                  v-for="member in members"
+                  :key="member.actor.id"
+                >
+                  <img
+                    class="rounded-full"
+                    :src="member.actor.avatar.url"
+                    v-if="member.actor.avatar"
+                    alt=""
+                    width="32"
+                    height="32"
+                  />
+                  <AccountCircle v-else :size="32" />
+                </figure>
+              </div>
+              <p>
+                {{
+                  t(
+                    "{count} members",
+                    {
+                      count: group.members.total,
+                    },
+                    group.members.total
+                  )
+                }}
+                <router-link
+                  v-if="isCurrentActorAGroupAdmin"
+                  :to="{
+                    name: RouteName.GROUP_MEMBERS_SETTINGS,
+                    params: { preferredUsername: usernameWithDomain(group) },
+                  }"
+                  >{{ t("Add / Remove…") }}</router-link
+                >
+              </p>
+            </div>
+            <div class="flex flex-wrap gap-3 justify-center">
+              <o-button
+                outlined
+                icon-left="timeline-text"
+                v-if="isCurrentActorAGroupMember && !previewPublic"
+                tag="router-link"
+                :to="{
+                  name: RouteName.TIMELINE,
+                  params: { preferredUsername: usernameWithDomain(group) },
+                }"
+                >{{ t("Activity") }}</o-button
+              >
+              <o-button
+                outlined
+                icon-left="cog"
+                v-if="isCurrentActorAGroupAdmin && !previewPublic"
+                tag="router-link"
+                :to="{
+                  name: RouteName.GROUP_PUBLIC_SETTINGS,
+                  params: { preferredUsername: usernameWithDomain(group) },
+                }"
+                >{{ t("Group settings") }}</o-button
+              >
+              <o-dropdown
+                aria-role="list"
+                v-if="showJoinButton && showFollowButton"
+              >
+                <template #trigger>
+                  <o-button
+                    variant="primary"
+                    icon-left="rss"
+                    icon-right="menu-down"
+                  >
+                    {{ t("Follow") }}
+                  </o-button>
+                </template>
+
+                <o-dropdown-item
+                  aria-role="listitem"
+                  class="p-0"
+                  custom
+                  :focusable="false"
+                  :disabled="
+                    isCurrentActorPendingFollow &&
+                    currentActor?.id !== undefined
+                  "
+                >
+                  <button
+                    class="flex gap-1 text-start py-4 px-2 w-full"
+                    @click="followGroup"
+                  >
+                    <RSS />
+                    <div class="pl-2">
+                      <h3 class="font-medium text-lg">{{ t("Follow") }}</h3>
+                      <p class="whitespace-normal md:whitespace-nowrap text-sm">
+                        {{ t("Get informed of the upcoming public events") }}
+                      </p>
+                      <p
+                        v-if="
+                          doesGroupManuallyApprovesFollowers &&
+                          !isCurrentActorPendingFollow
+                        "
+                        class="whitespace-normal md:whitespace-nowrap text-sm italic"
+                      >
+                        {{
+                          t(
+                            "Follow requests will be approved by a group moderator"
+                          )
+                        }}
+                      </p>
+                      <p
+                        v-if="isCurrentActorPendingFollow && currentActor?.id"
+                        class="whitespace-normal md:whitespace-nowrap text-sm italic"
+                      >
+                        {{ t("Follow request pending approval") }}
+                      </p>
+                    </div>
+                  </button>
+                </o-dropdown-item>
+
+                <o-dropdown-item
+                  aria-role="listitem"
+                  class="p-0 border-t border-solid"
+                  custom
+                  :focusable="false"
+                  :disabled="
+                    isGroupInviteOnly || isCurrentActorAPendingGroupMember
+                  "
+                >
+                  <button
+                    class="flex gap-1 text-start py-4 px-2 w-full"
+                    @click="joinGroup"
+                  >
+                    <AccountMultiplePlus />
+                    <div class="pl-2">
+                      <h3 class="font-medium text-lg">{{ t("Join") }}</h3>
+                      <div v-if="showJoinButton">
+                        <p
+                          class="whitespace-normal md:whitespace-nowrap text-sm"
+                        >
+                          {{
+                            t(
+                              "Become part of the community and start organizing events"
+                            )
+                          }}
+                        </p>
+                        <p
+                          v-if="isGroupInviteOnly"
+                          class="whitespace-normal md:whitespace-nowrap text-sm italic"
+                        >
+                          {{ t("This group is invite-only") }}
+                        </p>
+                        <p
+                          v-if="
+                            areGroupMembershipsModerated &&
+                            !isCurrentActorAPendingGroupMember
+                          "
+                          class="whitespace-normal md:whitespace-nowrap text-sm italic"
+                        >
+                          {{
+                            t(
+                              "Membership requests will be approved by a group moderator"
+                            )
+                          }}
+                        </p>
+                        <p
+                          v-if="isCurrentActorAPendingGroupMember"
+                          class="whitespace-normal md:whitespace-nowrap text-sm italic"
+                        >
+                          {{ t("Your membership is pending approval") }}
+                        </p>
+                      </div>
+                    </div>
+                  </button>
+                </o-dropdown-item>
+              </o-dropdown>
+              <o-button
+                outlined
+                v-if="isCurrentActorAPendingGroupMember"
+                @click="leaveGroup"
+                @keyup.enter="leaveGroup"
+                variant="primary"
+                >{{ t("Cancel membership request") }}</o-button
+              >
+              <o-button
+                outlined
+                v-if="isCurrentActorPendingFollow && currentActor?.id"
+                @click="unFollowGroup"
+                @keyup.enter="unFollowGroup"
+                variant="primary"
+                >{{ t("Cancel follow request") }}</o-button
+              ><o-button
+                v-if="
+                  isCurrentActorFollowing && !previewPublic && currentActor?.id
+                "
+                variant="primary"
+                @click="unFollowGroup"
+                >{{ t("Unfollow") }}</o-button
+              >
+              <o-button
+                v-if="isCurrentActorFollowing"
+                @click="toggleFollowNotify"
+                @keyup.enter="toggleFollowNotify"
+                class="notification-button p-1.5"
+                outlined
+                :icon-left="
+                  isCurrentActorFollowingNotify
+                    ? 'bell-outline'
+                    : 'bell-off-outline'
+                "
+              >
+                <span class="sr-only">{{
+                  isCurrentActorFollowingNotify
+                    ? t("Activate notifications")
+                    : t("Deactivate notifications")
+                }}</span>
+              </o-button>
+              <o-button
+                outlined
+                icon-left="share"
+                @click="triggerShare()"
+                @keyup.enter="triggerShare()"
+                v-if="!isCurrentActorAGroupMember || previewPublic"
+              >
+                {{ t("Share") }}
+              </o-button>
+              <o-dropdown aria-role="list">
+                <template #trigger>
+                  <o-button
+                    outlined
+                    icon-left="dots-horizontal"
+                    :aria-label="t('Other actions')"
+                  ></o-button>
+                </template>
+                <o-dropdown-item
+                  aria-role="menuitem"
+                  v-if="isCurrentActorAGroupMember || previewPublic"
+                >
+                  <o-switch v-model="previewPublic">{{
+                    t("Public preview")
+                  }}</o-switch>
+                </o-dropdown-item>
+                <o-dropdown-item
+                  v-if="!previewPublic && isCurrentActorAGroupMember"
+                  aria-role="menuitem"
+                  @click="triggerShare()"
+                  @keyup.enter="triggerShare()"
+                >
+                  <span class="inline-flex gap-1">
+                    <Share />
+                    {{ t("Share") }}
+                  </span>
+                </o-dropdown-item>
+                <hr
+                  role="presentation"
+                  class="dropdown-divider"
+                  v-if="isCurrentActorAGroupMember"
+                />
+                <o-dropdown-item has-link aria-role="menuitem">
+                  <a
+                    :href="`@${preferredUsername}/feed/atom`"
+                    :title="t('Atom feed for events and posts')"
+                    class="inline-flex gap-1"
+                  >
+                    <RSS />
+                    {{ t("RSS/Atom Feed") }}
+                  </a>
+                </o-dropdown-item>
+                <o-dropdown-item has-link aria-role="menuitem">
+                  <a
+                    :href="`@${preferredUsername}/feed/ics`"
+                    :title="t('ICS feed for events')"
+                    class="inline-flex gap-1"
+                  >
+                    <CalendarSync />
+                    {{ t("ICS/WebCal Feed") }}
+                  </a>
+                </o-dropdown-item>
+                <hr role="presentation" class="dropdown-divider" />
+                <o-dropdown-item
+                  v-if="ableToReport"
+                  aria-role="menuitem"
+                  @click="isReportModalActive = true"
+                  @keyup.enter="isReportModalActive = true"
+                >
+                  <span class="inline-flex gap-1">
+                    <Flag />
+                    {{ t("Report") }}
+                  </span>
+                </o-dropdown-item>
+                <o-dropdown-item
+                  aria-role="menuitem"
+                  v-if="isCurrentActorAGroupMember && !previewPublic"
+                  @click="openLeaveGroupModal"
+                  @keyup.enter="openLeaveGroupModal"
+                >
+                  <span class="inline-flex gap-1">
+                    <ExitToApp />
+                    {{ t("Leave") }}
+                  </span>
+                </o-dropdown-item>
+              </o-dropdown>
+            </div>
+          </div>
+          <InvitationsList
+            v-if="
+              isCurrentActorAnInvitedGroupMember && groupMember !== undefined
+            "
+            :invitations="[groupMember]"
+          />
+          <o-notification
+            v-if="isCurrentActorARejectedGroupMember"
+            variant="danger"
+          >
+            {{ t("You have been removed from this group's members.") }}
+          </o-notification>
+          <o-notification
+            v-if="
+              isCurrentActorAGroupMember &&
+              isCurrentActorARecentMember &&
+              isCurrentActorOnADifferentDomainThanGroup
+            "
+            variant="info"
+          >
+            {{
+              t(
+                "Since you are a new member, private content can take a few minutes to appear."
+              )
+            }}
+          </o-notification>
+        </div>
+      </header>
+    </div>
+    <div
+      v-if="isCurrentActorAGroupMember && !previewPublic && group"
+      class="block-container flex gap-2 flex-wrap mt-3"
+    >
+      <!-- Private things -->
+      <div class="flex-1 m-0 flex flex-col flex-wrap gap-2">
+        <!-- Group discussions -->
+        <Discussions :group="group" class="flex-1" />
+        <!-- Resources -->
+        <Resources :group="group" class="flex-1" />
+      </div>
+      <!-- Public things -->
+      <div class="flex-1 m-0 flex flex-col flex-wrap gap-2">
+        <!-- Events -->
+        <Events
+          :group="group"
+          :isModerator="isCurrentActorAGroupModerator"
+          class="flex-1"
+        />
+        <!-- Posts -->
+        <Posts
+          :group="group"
+          :isModerator="isCurrentActorAGroupModerator"
+          :isMember="isCurrentActorAGroupMember"
+          class="flex-1"
+        />
+      </div>
+    </div>
+    <o-notification
+      v-else-if="!group && groupLoading === false"
+      variant="danger"
+    >
+      {{ t("No group found") }}
+    </o-notification>
+    <div v-else-if="group" class="public-container flex flex-col">
+      <aside class="group-metadata">
+        <div class="sticky">
+          <o-notification v-if="group.domain && !isCurrentActorAGroupMember">
+            <p>
+              {{
+                t(
+                  "This profile is from another instance, the informations shown here may be incomplete."
+                )
+              }}
+            </p>
+            <o-button
+              variant="text"
+              tag="a"
+              :href="group.url"
+              rel="noopener noreferrer external"
+              >{{ t("View full profile") }}</o-button
+            >
+          </o-notification>
+          <event-metadata-block
+            :title="t('About')"
+            v-if="group.summary && group.summary !== '<p></p>'"
+          >
+            <div
+              dir="auto"
+              class="prose lg:prose-xl dark:prose-invert"
+              v-html="group.summary"
+            />
+          </event-metadata-block>
+          <event-metadata-block :title="t('Members')">
+            <template #icon>
+              <AccountGroup :size="48" />
+            </template>
+            {{
+              t(
+                "{count} members",
+                {
+                  count: group.members.total,
+                },
+                group.members.total
+              )
+            }}
+          </event-metadata-block>
+          <event-metadata-block
+            v-if="physicalAddress && physicalAddress.url"
+            :title="t('Location')"
+          >
+            <template #icon>
+              <o-icon
+                v-if="physicalAddress.poiInfos.poiIcon.icon"
+                :icon="physicalAddress.poiInfos.poiIcon.icon"
+                customSize="48"
+              />
+              <Earth v-else :size="48" />
+            </template>
+            <div class="address-wrapper">
+              <span
+                v-if="!physicalAddress || !addressFullName(physicalAddress)"
+                >{{ t("No address defined") }}</span
+              >
+              <div class="address" v-if="physicalAddress">
+                <div>
+                  <address dir="auto">
+                    <p
+                      class="addressDescription"
+                      :title="physicalAddress.poiInfos.name"
+                    >
+                      {{ physicalAddress.poiInfos.name }}
+                    </p>
+                    <p class="has-text-grey-dark">
+                      {{ physicalAddress.poiInfos.alternativeName }}
+                    </p>
+                  </address>
+                </div>
+                <o-button
+                  class="map-show-button"
+                  variant="text"
+                  @click="showMap = !showMap"
+                  @keyup.enter="showMap = !showMap"
+                  v-if="physicalAddress.geom"
+                >
+                  {{ t("Show map") }}
+                </o-button>
+              </div>
+            </div>
+          </event-metadata-block>
+        </div>
+      </aside>
+      <div class="main-content min-w-min flex-auto py-0 px-2">
+        <section>
+          <h2 class="text-2xl font-bold">{{ t("Upcoming events") }}</h2>
+          <div
+            class="flex flex-col gap-3"
+            v-if="group && organizedEvents.elements.length > 0"
+          >
+            <event-minimalist-card
+              v-for="event in organizedEvents.elements.slice(0, 3)"
+              :event="event"
+              :key="event.uuid"
+              class="organized-event"
+            />
+          </div>
+          <empty-content
+            v-else-if="group"
+            icon="calendar"
+            :inline="true"
+            description-classes="flex flex-col items-stretch"
+          >
+            {{ t("No public upcoming events") }}
+            <template #desc>
+              <template v-if="isCurrentActorFollowing">
+                <i18n-t
+                  keypath="You will receive notifications about this group's public activity depending on %{notification_settings}."
+                >
+                  <template #notification_settings>
+                    <router-link :to="{ name: RouteName.NOTIFICATIONS }">{{
+                      t("your notification settings")
+                    }}</router-link>
+                  </template>
+                </i18n-t>
+              </template>
+              <o-button
+                tag="router-link"
+                class="my-2 self-center"
+                variant="text"
+                :to="{
+                  name: RouteName.GROUP_EVENTS,
+                  params: { preferredUsername: usernameWithDomain(group) },
+                  query: { future: false },
+                }"
+                >{{ t("View past events") }}</o-button
+              >
+            </template>
+          </empty-content>
+          <!-- <o-skeleton animated v-else-if="$apollo.loading"></o-skeleton> -->
+          <div class="flex justify-center">
+            <o-button
+              tag="router-link"
+              class="my-4"
+              variant="text"
+              v-if="organizedEvents.total > 0"
+              :to="{
+                name: RouteName.GROUP_EVENTS,
+                params: { preferredUsername: usernameWithDomain(group) },
+                query: { future: organizedEvents.elements.length > 0 },
+              }"
+              >{{ t("View all events") }}</o-button
+            >
+          </div>
+        </section>
+        <section class="flex flex-col items-stretch">
+          <h2 class="ml-0 text-2xl font-bold">{{ t("Latest posts") }}</h2>
+
+          <multi-post-list-item
+            v-if="
+              posts.elements.filter(
+                (post) =>
+                  !post.draft && post.visibility === PostVisibility.PUBLIC
+              ).length > 0
+            "
+            :posts="
+              posts.elements.filter(
+                (post) =>
+                  !post.draft && post.visibility === PostVisibility.PUBLIC
+              )
+            "
+          />
+          <empty-content v-else-if="group" icon="bullhorn" :inline="true">
+            {{ t("No posts yet") }}
+          </empty-content>
+          <!-- <o-skeleton animated v-else-if="$apollo.loading"></o-skeleton> -->
+          <o-button
+            class="self-center my-2"
+            v-if="posts.total > 0"
+            tag="router-link"
+            variant="text"
+            :to="{
+              name: RouteName.POSTS,
+              params: { preferredUsername: usernameWithDomain(group) },
+            }"
+            >{{ t("View all posts") }}</o-button
+          >
+        </section>
+      </div>
+      <o-modal
+        v-if="physicalAddress && physicalAddress.geom"
+        v-model:active="showMap"
+        :close-button-aria-label="t('Close')"
+      >
+        <div class="map">
+          <map-leaflet
+            :coords="physicalAddress.geom"
+            :marker="{
+              text: physicalAddress.fullName,
+              icon: physicalAddress.poiInfos.poiIcon.icon,
+            }"
+          />
+        </div>
+      </o-modal>
+    </div>
+    <o-modal v-if="group" v-model:active="isReportModalActive">
+      <report-modal
+        ref="reportModalRef"
+        :on-confirm="reportGroup"
+        :title="t('Report this group')"
+        :outside-domain="group.domain"
+        @close="isReportModalActive = false"
+      />
+    </o-modal>
+    <o-modal v-model:active="isShareModalActive" v-if="group">
+      <ShareGroupModal :group="group" />
+    </o-modal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// import EventCard from "@/components/Event/EventCard.vue";
+import {
+  displayName,
+  IActor,
+  IFollower,
+  IPerson,
+  usernameWithDomain,
+} from "@/types/actor";
+// import CompactTodo from "@/components/Todo/CompactTodo.vue";
+import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
+import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
+import { Address, addressFullName } from "@/types/address.model";
+import InvitationsList from "@/components/Group/InvitationsList.vue";
+import addMinutes from "date-fns/addMinutes";
+import { JOIN_GROUP } from "@/graphql/member";
+import { MemberRole, Openness, PostVisibility } from "@/types/enums";
+import { IMember } from "@/types/actor/member.model";
+import RouteName from "../../router/name";
+import ReportModal from "@/components/Report/ReportModal.vue";
+import {
+  GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
+  PERSON_STATUS_GROUP,
+} from "@/graphql/actor";
+import LazyImageWrapper from "../../components/Image/LazyImageWrapper.vue";
+import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
+import EmptyContent from "../../components/Utils/EmptyContent.vue";
+import { Paginate } from "@/types/paginate";
+import { IEvent } from "@/types/event.model";
+import { IPost } from "@/types/post.model";
+import { FOLLOW_GROUP, UPDATE_GROUP_FOLLOW } from "@/graphql/followers";
+import { useAnonymousReportsConfig } from "../../composition/apollo/config";
+import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useGroup, useLeaveGroup } from "@/composition/apollo/group";
+import { useRouter } from "vue-router";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import RSS from "vue-material-design-icons/Rss.vue";
+import Share from "vue-material-design-icons/Share.vue";
+import CalendarSync from "vue-material-design-icons/CalendarSync.vue";
+import Flag from "vue-material-design-icons/Flag.vue";
+import ExitToApp from "vue-material-design-icons/ExitToApp.vue";
+import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.vue";
+import Earth from "vue-material-design-icons/Earth.vue";
+import { useI18n } from "vue-i18n";
+import { useCreateReport } from "@/composition/apollo/report";
+import { useHead } from "@vueuse/head";
+import Discussions from "@/components/Group/Sections/DiscussionsSection.vue";
+import Resources from "@/components/Group/Sections/ResourcesSection.vue";
+import Posts from "@/components/Group/Sections/PostsSection.vue";
+import Events from "@/components/Group/Sections/EventsSection.vue";
+import { Dialog } from "@/plugins/dialog";
+import { Notifier } from "@/plugins/notifier";
+
+const props = defineProps<{
+  preferredUsername: string;
+}>();
+
+const { anonymousReportsConfig } = useAnonymousReportsConfig();
+const { currentActor } = useCurrentActorClient();
+const {
+  group,
+  loading: groupLoading,
+  refetch: refetchGroup,
+} = useGroup(props.preferredUsername);
+const router = useRouter();
+
+const { t } = useI18n({ useScope: "global" });
+
+// const { person } = usePersonStatusGroup(group);
+
+const { result, subscribeToMore } = useQuery<{
+  person: IPerson;
+}>(
+  PERSON_STATUS_GROUP,
+  () => ({
+    id: currentActor.value?.id,
+    group: usernameWithDomain(group.value),
+  }),
+  () => ({
+    enabled:
+      currentActor.value?.id !== undefined &&
+      group.value?.preferredUsername !== undefined,
+  })
+);
+subscribeToMore<{ actorId: string; group: string }>({
+  document: GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
+  variables: {
+    actorId: currentActor.value?.id as string,
+    group: usernameWithDomain(group.value),
+  },
+});
+const person = computed(() => result.value?.person);
+
+const MapLeaflet = defineAsyncComponent(
+  () => import("@/components/LeafletMap.vue")
+);
+const ShareGroupModal = defineAsyncComponent(
+  () => import("@/components/Group/ShareGroupModal.vue")
+);
+
+const showMap = ref(false);
+const isReportModalActive = ref(false);
+const reportModalRef = ref();
+const isShareModalActive = ref(false);
+const previewPublic = ref(false);
+
+const notifier = inject<Notifier>("notifier");
+
+watch(
+  currentActor,
+  (watchedCurrentActor: IActor | undefined, oldActor: IActor | undefined) => {
+    if (
+      watchedCurrentActor?.id &&
+      oldActor &&
+      watchedCurrentActor?.id !== oldActor.id
+    ) {
+      refetchGroup();
+    }
+  }
+);
+
+const { mutate: joinGroupMutation, onError: onJoinGroupError } =
+  useMutation(JOIN_GROUP);
+
+const joinGroup = async (): Promise<void> => {
+  if (!currentActor.value?.id) {
+    router.push({
+      name: RouteName.GROUP_JOIN,
+      params: { preferredUsername: usernameWithDomain(group.value) },
+    });
+    return;
+  }
+  const [groupUsername, currentActorId] = [
+    usernameWithDomain(group.value),
+    currentActor.value?.id,
+  ];
+
+  joinGroupMutation(
+    {
+      groupId: group.value?.id,
+    },
+    {
+      refetchQueries: [
+        {
+          query: PERSON_STATUS_GROUP,
+          variables: {
+            id: currentActorId,
+            group: groupUsername,
+          },
+        },
+      ],
+    }
+  );
+
+  onJoinGroupError((error) => {
+    if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+      notifier?.error(error.graphQLErrors[0].message);
+    }
+  });
+};
+
+const dialog = inject<Dialog>("dialog");
+
+const openLeaveGroupModal = async (): Promise<void> => {
+  dialog?.confirm({
+    variant: "danger",
+    title: t("Leave group"),
+    message: t(
+      "Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone.",
+      { groupName: `<b>${displayName(group.value)}</b>` }
+    ),
+    onConfirm: () => leaveGroup(),
+    confirmText: t("Leave group"),
+    cancelText: t("Cancel"),
+  });
+};
+
+const leaveGroup = () => {
+  const { mutate: leaveGroupMutation, onError: onLeaveGroupError } =
+    useLeaveGroup();
+
+  const [groupFederatedUsername, currentActorId] = [
+    usernameWithDomain(group.value),
+    currentActor.value?.id,
+  ];
+
+  leaveGroupMutation(
+    {
+      groupId: group.value?.id,
+    },
+    {
+      refetchQueries: [
+        {
+          query: PERSON_STATUS_GROUP,
+          variables: {
+            id: currentActorId,
+            group: groupFederatedUsername,
+          },
+        },
+      ],
+    }
+  );
+
+  onLeaveGroupError((error: any) => {
+    if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+      notifier?.error(error.graphQLErrors[0].message);
+    }
+  });
+};
+
+const { mutate: followGroupMutation, onError: onFollowGroupError } =
+  useMutation(FOLLOW_GROUP, () => ({
+    refetchQueries: [
+      {
+        query: PERSON_STATUS_GROUP,
+        variables: {
+          id: currentActor.value?.id,
+          group: usernameWithDomain(group.value),
+        },
+      },
+    ],
+  }));
+
+onFollowGroupError((error) => {
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
+
+const followGroup = async (): Promise<void> => {
+  if (!currentActor.value?.id) {
+    router.push({
+      name: RouteName.GROUP_FOLLOW,
+      params: {
+        preferredUsername: usernameWithDomain(group.value),
+      },
+    });
+    return;
+  }
+  followGroupMutation({
+    groupId: group.value?.id,
+  });
+};
+
+const { mutate: unfollowGroupMutation, onError: onUnfollowGroupError } =
+  useMutation(FOLLOW_GROUP, () => ({
+    refetchQueries: [
+      {
+        query: PERSON_STATUS_GROUP,
+        variables: {
+          id: currentActor.value?.id,
+          group: usernameWithDomain(group.value),
+        },
+      },
+    ],
+  }));
+
+onUnfollowGroupError((error) => {
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
+  }
+});
+
+const unFollowGroup = async (): Promise<void> => {
+  console.debug("unfollow group");
+
+  unfollowGroupMutation({
+    groupId: group.value?.id,
+  });
+};
+
+const { mutate: updateGroupFollowMutation } = useMutation(UPDATE_GROUP_FOLLOW);
+
+const toggleFollowNotify = () => {
+  updateGroupFollowMutation({
+    followId: currentActorFollow.value?.id,
+    notify: !isCurrentActorFollowingNotify.value,
+  });
+};
+
+const reportGroup = async (content: string, forward: boolean) => {
+  isReportModalActive.value = false;
+  reportModalRef.value.close();
+
+  const {
+    mutate: createReportMutation,
+    onError: onCreateReportError,
+    onDone: oneCreateReportDone,
+  } = useCreateReport();
+
+  createReportMutation({
+    reportedId: group.value?.id ?? "",
+    content,
+    forward,
+  });
+
+  oneCreateReportDone(() => {
+    notifier?.success(t("Group {groupTitle} reported", { groupTitle }));
+  });
+
+  onCreateReportError((error: any) => {
+    console.error(error);
+    notifier?.error(
+      t("Error while reporting group {groupTitle}", {
+        groupTitle,
+      })
+    );
+  });
+};
+
+const triggerShare = (): void => {
+  if (navigator.share) {
+    navigator
+      .share({
+        title: displayName(group.value),
+        url: group.value?.url,
+      })
+      .then(() => console.debug("Successful share"))
+      .catch((error: any) => console.debug("Error sharing", error));
+  } else {
+    isShareModalActive.value = true;
+    // send popup
+  }
+};
+
+const groupTitle = computed((): undefined | string => {
+  return displayName(group.value);
+});
+
+const groupSummary = computed((): undefined | string => {
+  return group.value?.summary;
+});
+
+useHead({
+  title: computed(() => groupTitle.value ?? ""),
+  meta: [{ name: "description", content: computed(() => groupSummary.value) }],
+});
+
+const personMemberships = computed(
+  () => person.value?.memberships ?? { total: 0, elements: [] }
+);
+
+const groupMember = computed((): IMember | undefined => {
+  if (personMemberships.value?.total > 0) {
+    return personMemberships.value?.elements[0];
+  }
+  return undefined;
+});
+
+const isCurrentActorARejectedGroupMember = computed((): boolean => {
+  return personMemberships.value.elements
+    .filter((membership) => membership.role === MemberRole.REJECTED)
+    .map(({ parent: { id } }) => id)
+    .includes(group.value?.id);
+});
+
+const isCurrentActorAnInvitedGroupMember = computed((): boolean => {
+  return personMemberships.value.elements
+    .filter((membership) => membership.role === MemberRole.INVITED)
+    .map(({ parent: { id } }) => id)
+    .includes(group.value?.id);
+});
+
+/**
+ * New members, if on a different server,
+ * can take a while to refresh the group and fetch all private data
+ */
+const isCurrentActorARecentMember = computed((): boolean => {
+  return (
+    groupMember.value !== undefined &&
+    groupMember.value?.role === MemberRole.MEMBER &&
+    addMinutes(new Date(`${groupMember.value?.updatedAt}Z`), 10) > new Date()
+  );
+});
+
+const isCurrentActorOnADifferentDomainThanGroup = computed((): boolean => {
+  return group.value?.domain !== null;
+});
+
+const members = computed((): IMember[] => {
+  return (
+    group.value?.members.elements.filter(
+      (member: IMember) =>
+        ![
+          MemberRole.INVITED,
+          MemberRole.REJECTED,
+          MemberRole.NOT_APPROVED,
+        ].includes(member.role)
+    ) ?? []
+  );
+});
+
+const physicalAddress = computed((): Address | null => {
+  if (!group.value?.physicalAddress) return null;
+  return new Address(group.value?.physicalAddress);
+});
+
+const ableToReport = computed((): boolean | undefined => {
+  return anonymousReportsConfig.value?.allowed;
+});
+
+const organizedEvents = computed((): Paginate<IEvent> => {
+  return {
+    total: group.value?.organizedEvents.total ?? 0,
+    elements:
+      group.value?.organizedEvents.elements.filter((event: IEvent) => {
+        if (previewPublic.value) {
+          return !event.draft; // TODO when events get visibility access add visibility constraint like below for posts
+        }
+        return true;
+      }) ?? [],
+  };
+});
+
+const posts = computed((): Paginate<IPost> => {
+  return {
+    total: group.value?.posts.total ?? 0,
+    elements:
+      group.value?.posts.elements.filter((post: IPost) => {
+        if (previewPublic.value || !isCurrentActorAGroupMember.value) {
+          return !post.draft && post.visibility == PostVisibility.PUBLIC;
+        }
+        return true;
+      }) ?? [],
+  };
+});
+
+const showFollowButton = computed((): boolean => {
+  return !isCurrentActorFollowing.value || previewPublic.value;
+});
+
+const showJoinButton = computed((): boolean => {
+  return !isCurrentActorAGroupMember.value || previewPublic.value;
+});
+
+const isGroupInviteOnly = computed((): boolean => {
+  return (
+    (!isCurrentActorAGroupMember.value || previewPublic) &&
+    group.value?.openness === Openness.INVITE_ONLY
+  );
+});
+
+const areGroupMembershipsModerated = computed((): boolean => {
+  return (
+    (!isCurrentActorAGroupMember.value || previewPublic) &&
+    group.value?.openness === Openness.MODERATED
+  );
+});
+
+const doesGroupManuallyApprovesFollowers = computed((): boolean | undefined => {
+  return (
+    (!isCurrentActorAGroupMember.value || previewPublic) &&
+    group.value?.manuallyApprovesFollowers
+  );
+});
+
+const isCurrentActorAGroupAdmin = computed((): boolean => {
+  return hasCurrentActorThisRole(MemberRole.ADMINISTRATOR);
+});
+
+const isCurrentActorAGroupModerator = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+  ]);
+});
+
+const isCurrentActorAGroupMember = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+    MemberRole.MEMBER,
+  ]);
+});
+
+const isCurrentActorAPendingGroupMember = computed((): boolean => {
+  return hasCurrentActorThisRole([MemberRole.NOT_APPROVED]);
+});
+
+const currentActorFollow = computed((): IFollower | undefined => {
+  if (person?.value?.follows?.total && person?.value?.follows?.total > 0) {
+    return person?.value?.follows?.elements[0];
+  }
+  return undefined;
+});
+
+const isCurrentActorFollowing = computed((): boolean => {
+  return currentActorFollow.value?.approved === true;
+});
+
+const isCurrentActorPendingFollow = computed((): boolean => {
+  return currentActorFollow.value?.approved === false;
+});
+
+const isCurrentActorFollowingNotify = computed((): boolean => {
+  return (
+    isCurrentActorFollowing.value && currentActorFollow.value?.notify === true
+  );
+});
+
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
+  return (
+    personMemberships.value?.total > 0 &&
+    roles.includes(personMemberships.value?.elements[0].role)
+  );
+};
+
+watch(isCurrentActorAGroupMember, () => {
+  refetchGroup();
+});
+</script>
+<style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
+div.container {
+  .block-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 15px;
+
+    &.presentation {
+      padding: 0 0 10px;
+      position: relative;
+      flex-direction: column;
+
+      & > *:not(img) {
+        position: relative;
+        z-index: 2;
+      }
+
+      & > .banner-container {
+        display: flex;
+        justify-content: center;
+        height: 30vh;
+        :deep(img) {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: 50% 50%;
+        }
+      }
+    }
+
+    div.address {
+      flex: 1;
+      text-align: right;
+      justify-content: flex-end;
+      display: flex;
+
+      .map-show-button {
+        cursor: pointer;
+      }
+
+      address {
+        font-style: normal;
+
+        span.addressDescription {
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 1 0 auto;
+          min-width: 100%;
+          max-width: 4rem;
+          overflow: hidden;
+        }
+
+        :not(.addressDescription) {
+          color: rgba(46, 62, 72, 0.6);
+          flex: 1;
+          min-width: 100%;
+        }
+      }
+    }
+
+    .header {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      flex-direction: column;
+      flex: 1;
+      margin: 0;
+      align-items: center;
+
+      .group-metadata {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        .members {
+          div {
+            display: flex;
+          }
+
+          figure:not(:first-child) {
+            @include margin-left(-10px);
+          }
+        }
+      }
+    }
+  }
+
+  .public-container {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row-reverse;
+    padding: 0;
+    margin-top: 1rem;
+
+    .group-metadata {
+      min-width: 20rem;
+      flex: 1;
+      // @include padding-left(1rem);
+      // @include mobile {
+      //   @include padding-left(0);
+      // }
+
+      .sticky {
+        position: sticky;
+        // background: white;
+        top: 50px;
+        padding: 1rem;
+      }
+    }
+
+    section {
+      margin-top: 0;
+    }
+  }
+}
+.map {
+  height: 60vh;
+  width: 100%;
+}
+</style>
diff --git a/js/src/views/Group/MyGroups.vue b/js/src/views/Group/MyGroups.vue
index b9275f67c..74857c74b 100644
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="section container">
+  <section class="container mx-auto">
     <h1 class="title">{{ $t("My groups") }}</h1>
     <p>
       {{
@@ -8,15 +8,16 @@
         )
       }}
     </p>
-    <div class="buttons" v-if="!hideCreateGroupButton">
-      <router-link
-        class="button is-primary"
+    <div class="flex my-3" v-if="!hideCreateGroupButton">
+      <o-button
+        tag="router-link"
+        variant="primary"
         :to="{ name: RouteName.CREATE_GROUP }"
-        >{{ $t("Create group") }}</router-link
+        >{{ $t("Create group") }}</o-button
       >
     </div>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
-    <invitations
+    <o-loading v-model:active="loading"></o-loading>
+    <InvitationsList
       :invitations="invitations"
       @accept-invitation="acceptInvitation"
       @reject-invitation="rejectInvitation"
@@ -27,10 +28,11 @@
         v-for="member in memberships"
         :key="member.id"
         :member="member"
-        @leave="leaveGroup(member.parent)"
+        @leave="leaveGroup({ groupId: member.parent.id })"
       />
-      <b-pagination
+      <o-pagination
         :total="membershipsPages.total"
+        v-show="membershipsPages.total > limit"
         v-model="page"
         :per-page="limit"
         :aria-next-label="$t('Next page')"
@@ -38,30 +40,36 @@
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
       >
-      </b-pagination>
+      </o-pagination>
     </section>
     <section
-      class="has-text-centered not-found"
-      v-if="memberships.length === 0 && !$apollo.loading"
+      class="text-center not-found"
+      v-if="memberships.length === 0 && !loading"
     >
-      <div class="columns is-vertical is-centered">
-        <div class="column is-three-quarters">
+      <div class="">
+        <div class="">
           <div class="img-container" :class="{ webp: supportsWebPFormat }" />
-          <div class="content has-text-centered">
+          <div class="text-center">
             <p>
               {{ $t("You are not part of any group.") }}
-              <i18n path="Do you wish to {create_group} or {explore_groups}?">
-                <router-link
-                  :to="{ name: RouteName.CREATE_GROUP }"
-                  slot="create_group"
-                  >{{ $t("create a group") }}</router-link
-                >
-                <router-link
-                  :to="{ name: RouteName.SEARCH }"
-                  slot="explore_groups"
-                  >{{ $t("explore the groups") }}</router-link
-                >
-              </i18n>
+              <i18n-t
+                keypath="Do you wish to {create_group} or {explore_groups}?"
+              >
+                <template #create_group>
+                  <o-button
+                    tag="router-link"
+                    :to="{ name: RouteName.CREATE_GROUP }"
+                    >{{ $t("create a group") }}</o-button
+                  >
+                </template>
+                <template #explore_groups>
+                  <o-button
+                    tag="router-link"
+                    :to="{ name: RouteName.SEARCH }"
+                    >{{ $t("explore the groups") }}</o-button
+                  >
+                </template>
+              </i18n-t>
             </p>
           </div>
         </div>
@@ -70,137 +78,117 @@
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
+<script lang="ts" setup>
 import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
 import { LEAVE_GROUP } from "@/graphql/group";
 import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
-import Invitations from "@/components/Group/Invitations.vue";
-import { Paginate } from "@/types/paginate";
-import { IGroup, usernameWithDomain } from "@/types/actor";
-import { Route } from "vue-router";
+import InvitationsList from "@/components/Group/InvitationsList.vue";
+import { usernameWithDomain } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
 import { MemberRole } from "@/types/enums";
 import { supportsWebPFormat } from "@/utils/support";
 import RouteName from "../../router/name";
+import { useRestrictions } from "@/composition/apollo/config";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { IUser } from "@/types/current-user.model";
+import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import { computed, inject } from "vue";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { Notifier } from "@/plugins/notifier";
 
-@Component({
-  components: {
-    GroupMemberCard,
-    Invitations,
-  },
-  apollo: {
-    config: {
-      query: CONFIG,
-    },
-    membershipsPages: {
-      query: LOGGED_USER_MEMBERSHIPS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: this.page,
-          limit: this.limit,
-        };
-      },
-      update: (data) => data.loggedUser.memberships,
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("My groups") as string,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class MyGroups extends Vue {
-  membershipsPages!: Paginate<IMember>;
+const page = useRouteQuery("page", 1, integerTransformer);
+const limit = 10;
 
-  RouteName = RouteName;
+const { result: membershipsResult, loading } = useQuery<{
+  loggedUser: Pick<IUser, "memberships">;
+}>(LOGGED_USER_MEMBERSHIPS, () => ({
+  page: page.value,
+  limit,
+}));
 
-  config!: IConfig;
-
-  page = 1;
-
-  limit = 10;
-
-  supportsWebPFormat = supportsWebPFormat;
-
-  acceptInvitation(member: IMember): Promise<Route> {
-    return this.$router.push({
-      name: RouteName.GROUP,
-      params: { preferredUsername: usernameWithDomain(member.parent) },
-    });
-  }
-
-  rejectInvitation({ id: memberId }: { id: string }): void {
-    const index = this.membershipsPages.elements.findIndex(
-      (membership) =>
-        membership.role === MemberRole.INVITED && membership.id === memberId
-    );
-    if (index > -1) {
-      this.membershipsPages.elements.splice(index, 1);
-      this.membershipsPages.total -= 1;
+const membershipsPages = computed(
+  () =>
+    membershipsResult.value?.loggedUser?.memberships ?? {
+      total: 0,
+      elements: [],
     }
-  }
+);
 
-  async leaveGroup(group: IGroup): Promise<void> {
-    try {
-      const { page, limit } = this;
-      await this.$apollo.mutate({
-        mutation: LEAVE_GROUP,
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: t("My groups"),
+});
+
+const notifier = inject<Notifier>("notifier");
+
+const router = useRouter();
+
+const acceptInvitation = (member: IMember) => {
+  return router.push({
+    name: RouteName.GROUP,
+    params: { preferredUsername: usernameWithDomain(member.parent) },
+  });
+};
+
+const rejectInvitation = ({ id: memberId }: { id: string }) => {
+  const index = membershipsPages.value.elements.findIndex(
+    (membership) =>
+      membership.role === MemberRole.INVITED && membership.id === memberId
+  );
+  if (index > -1) {
+    membershipsPages.value.elements.splice(index, 1);
+    membershipsPages.value.total -= 1;
+  }
+};
+
+const { mutate: leaveGroup, onError: onLeaveGroupError } = useMutation(
+  LEAVE_GROUP,
+  () => ({
+    refetchQueries: [
+      {
+        query: LOGGED_USER_MEMBERSHIPS,
         variables: {
-          groupId: group.id,
+          page,
+          limit,
         },
-        refetchQueries: [
-          {
-            query: LOGGED_USER_MEMBERSHIPS,
-            variables: {
-              page,
-              limit,
-            },
-          },
-        ],
-      });
-    } catch (error: any) {
-      if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-        this.$notifier.error(error.graphQLErrors[0].message);
-      }
-    }
-  }
+      },
+    ],
+  })
+);
 
-  get invitations(): IMember[] {
-    if (!this.membershipsPages) return [];
-    return this.membershipsPages.elements.filter(
-      (member: IMember) => member.role === MemberRole.INVITED
-    );
+onLeaveGroupError((error) => {
+  if (error.graphQLErrors && error.graphQLErrors.length > 0) {
+    notifier?.error(error.graphQLErrors[0].message);
   }
+});
 
-  get memberships(): IMember[] {
-    if (!this.membershipsPages) return [];
-    return this.membershipsPages.elements.filter(
-      (member: IMember) =>
-        ![MemberRole.INVITED, MemberRole.REJECTED].includes(member.role)
-    );
-  }
+const invitations = computed((): IMember[] => {
+  if (!membershipsPages.value) return [];
+  return membershipsPages.value.elements.filter(
+    (member: IMember) => member.role === MemberRole.INVITED
+  );
+});
 
-  get hideCreateGroupButton(): boolean {
-    return !!this.config?.restrictions?.onlyAdminCanCreateGroups;
-  }
-}
+const memberships = computed((): IMember[] => {
+  if (!membershipsPages.value) return [];
+  return membershipsPages.value.elements.filter(
+    (member: IMember) =>
+      ![MemberRole.INVITED, MemberRole.REJECTED].includes(member.role)
+  );
+});
+
+const { restrictions } = useRestrictions();
+
+const hideCreateGroupButton = computed((): boolean => {
+  return restrictions.value?.onlyAdminCanCreateGroups === true;
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-main > .container {
-  background: $white;
-
-  & > h1 {
-    margin: 10px auto 5px;
-  }
-}
-
 .participation {
   margin: 1rem auto;
 }
@@ -217,11 +205,11 @@ section {
 
 .not-found {
   .img-container {
-    background-image: url("../../../public/img/pics/group-480w.jpg");
+    background-image: url("../../../public/img/pics/group-480w.webp");
 
     @media (min-resolution: 2dppx) {
       & {
-        background-image: url("../../../public/img/pics/group-1024w.jpg");
+        background-image: url("../../../public/img/pics/group-1024w.webp");
       }
     }
     &.webp {
diff --git a/js/src/views/Group/Settings.vue b/js/src/views/Group/Settings.vue
deleted file mode 100644
index d846d8b37..000000000
--- a/js/src/views/Group/Settings.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <aside class="section container">
-    <h1 class="title">{{ $t("Settings") }}</h1>
-    <div class="columns">
-      <aside class="column is-one-quarter-desktop">
-        <ul>
-          <SettingMenuSection
-            :title="$t('Settings')"
-            :to="{ name: RouteName.GROUP_SETTINGS }"
-          >
-            <SettingMenuItem
-              :title="this.$t('Public')"
-              :to="{ name: RouteName.GROUP_PUBLIC_SETTINGS }"
-            />
-            <SettingMenuItem
-              :title="this.$t('Members')"
-              :to="{ name: RouteName.GROUP_MEMBERS_SETTINGS }"
-            />
-            <SettingMenuItem
-              :title="this.$t('Followers')"
-              :to="{ name: RouteName.GROUP_FOLLOWERS_SETTINGS }"
-            />
-          </SettingMenuSection>
-        </ul>
-      </aside>
-      <div class="column">
-        <router-view />
-      </div>
-    </div>
-  </aside>
-</template>
-<script lang="ts">
-import { Component } from "vue-property-decorator";
-import { mixins } from "vue-class-component";
-import GroupMixin from "@/mixins/group";
-import RouteName from "../../router/name";
-import SettingMenuSection from "../../components/Settings/SettingMenuSection.vue";
-import SettingMenuItem from "../../components/Settings/SettingMenuItem.vue";
-
-@Component({
-  components: { SettingMenuSection, SettingMenuItem },
-  metaInfo() {
-    return {
-      title: this.$t("Group settings") as string,
-    };
-  },
-})
-export default class Settings extends mixins(GroupMixin) {
-  RouteName = RouteName;
-}
-</script>
-
-<style lang="scss" scoped>
-aside.section {
-  padding-top: 1rem;
-}
-.container.section {
-  background: $white;
-}
-</style>
diff --git a/js/src/views/Group/SettingsView.vue b/js/src/views/Group/SettingsView.vue
new file mode 100644
index 000000000..b12325d34
--- /dev/null
+++ b/js/src/views/Group/SettingsView.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="container mx-auto">
+    <h1 class="">{{ t("Settings") }}</h1>
+    <div class="flex flex-wrap gap-2">
+      <aside class="sm:max-w-xs flex-1 min-w-[320px]">
+        <ul>
+          <SettingMenuSection
+            :title="t('Settings')"
+            :to="{ name: RouteName.GROUP_SETTINGS }"
+          >
+            <SettingMenuItem
+              :title="t('Public')"
+              :to="{ name: RouteName.GROUP_PUBLIC_SETTINGS }"
+            />
+            <SettingMenuItem
+              :title="t('Members')"
+              :to="{ name: RouteName.GROUP_MEMBERS_SETTINGS }"
+            />
+            <SettingMenuItem
+              :title="t('Followers')"
+              :to="{ name: RouteName.GROUP_FOLLOWERS_SETTINGS }"
+            />
+          </SettingMenuSection>
+        </ul>
+      </aside>
+      <div class="flex-1">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import RouteName from "@/router/name";
+import SettingMenuSection from "@/components/Settings/SettingMenuSection.vue";
+import SettingMenuItem from "@/components/Settings/SettingMenuItem.vue";
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Group settings")),
+});
+</script>
diff --git a/js/src/views/Group/Timeline.vue b/js/src/views/Group/Timeline.vue
deleted file mode 100644
index e4b9944fb..000000000
--- a/js/src/views/Group/Timeline.vue
+++ /dev/null
@@ -1,414 +0,0 @@
-<template>
-  <div class="container section">
-    <breadcrumbs-nav
-      v-if="group"
-      :links="[
-        {
-          name: RouteName.GROUP,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: displayName(group),
-        },
-        {
-          name: RouteName.TIMELINE,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Activity'),
-        },
-      ]"
-    />
-
-    <section class="timeline">
-      <b-field>
-        <b-radio-button v-model="activityType" :native-value="undefined">
-          <b-icon icon="timeline-text"></b-icon>
-          {{ $t("All activities") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityType"
-          :native-value="ActivityType.MEMBER"
-        >
-          <b-icon icon="account-multiple-plus"></b-icon>
-          {{ $t("Members") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityType"
-          :native-value="ActivityType.GROUP"
-        >
-          <b-icon icon="cog"></b-icon>
-          {{ $t("Settings") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityType"
-          :native-value="ActivityType.EVENT"
-        >
-          <b-icon icon="calendar"></b-icon>
-          {{ $t("Events") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityType"
-          :native-value="ActivityType.POST"
-        >
-          <b-icon icon="bullhorn"></b-icon>
-          {{ $t("Posts") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityType"
-          :native-value="ActivityType.DISCUSSION"
-        >
-          <b-icon icon="chat"></b-icon>
-          {{ $t("Discussions") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityType"
-          :native-value="ActivityType.RESOURCE"
-        >
-          <b-icon icon="link"></b-icon>
-          {{ $t("Resources") }}</b-radio-button
-        >
-      </b-field>
-      <b-field>
-        <b-radio-button v-model="activityAuthor" :native-value="undefined">
-          <b-icon icon="timeline-text"></b-icon>
-          {{ $t("All activities") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityAuthor"
-          :native-value="ActivityAuthorFilter.SELF"
-        >
-          <b-icon icon="account"></b-icon>
-          {{ $t("From yourself") }}</b-radio-button
-        >
-        <b-radio-button
-          v-model="activityAuthor"
-          :native-value="ActivityAuthorFilter.BY"
-        >
-          <b-icon icon="account-multiple"></b-icon>
-          {{ $t("By others") }}</b-radio-button
-        >
-      </b-field>
-      <transition-group name="timeline-list" tag="div">
-        <div
-          class="day"
-          v-for="[date, activityItems] in Object.entries(activities)"
-          :key="date"
-        >
-          <b-skeleton
-            v-if="date.search(/skeleton/) !== -1"
-            width="300px"
-            height="48px"
-          />
-          <h2 class="is-size-3 has-text-weight-bold" v-else-if="isToday(date)">
-            <span v-tooltip="$options.filters.formatDateString(date)">
-              {{ $t("Today") }}
-            </span>
-          </h2>
-          <h2
-            class="is-size-3 has-text-weight-bold"
-            v-else-if="isYesterday(date)"
-          >
-            <span v-tooltip="$options.filters.formatDateString(date)">{{
-              $t("Yesterday")
-            }}</span>
-          </h2>
-          <h2 v-else class="is-size-3 has-text-weight-bold">
-            {{ date | formatDateString }}
-          </h2>
-          <ul>
-            <li v-for="activityItem in activityItems" :key="activityItem.id">
-              <skeleton-activity-item v-if="activityItem.skeleton" />
-              <component
-                v-else
-                :is="component(activityItem.type)"
-                :activity="activityItem"
-              />
-            </li>
-          </ul></div
-      ></transition-group>
-      <empty-content
-        icon="timeline-text"
-        v-if="
-          !$apollo.loading &&
-          activity.elements.length > 0 &&
-          activity.elements.length >= activity.total
-        "
-      >
-        {{ $t("No more activity to display.") }}
-      </empty-content>
-      <empty-content
-        v-if="!$apollo.loading && activity.total === 0"
-        icon="timeline-text"
-      >
-        {{
-          $t(
-            "There is no activity yet. Start doing some things to see activity appear here."
-          )
-        }}
-      </empty-content>
-      <observer @intersect="loadMore" />
-      <b-button
-        v-if="activity.elements.length < activity.total"
-        @click="loadMore"
-        >{{ $t("Load more activities") }}</b-button
-      >
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { GROUP_TIMELINE } from "@/graphql/group";
-import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
-import { ActivityType } from "@/types/enums";
-import { Paginate } from "@/types/paginate";
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { IActivity } from "../../types/activity.model";
-import Observer from "../../components/Utils/Observer.vue";
-import SkeletonActivityItem from "../../components/Activity/SkeletonActivityItem.vue";
-import RouteName from "../../router/name";
-
-const PAGINATION_LIMIT = 25;
-const SKELETON_DAY_ITEMS = 2;
-const SKELETON_ITEMS_PER_DAY = 5;
-type IActivitySkeleton = IActivity | { skeleton: string };
-
-enum ActivityAuthorFilter {
-  SELF = "SELF",
-  BY = "BY",
-}
-
-export type ActivityFilter = ActivityType | ActivityAuthorFilter | null;
-
-@Component({
-  apollo: {
-    group: {
-      query: GROUP_TIMELINE,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          preferredUsername: this.preferredUsername,
-          page: 1,
-          limit: PAGINATION_LIMIT,
-          type: this.activityType,
-          author: this.activityAuthor,
-        };
-      },
-    },
-  },
-  components: {
-    Observer,
-    SkeletonActivityItem,
-    "event-activity-item": () =>
-      import("../../components/Activity/EventActivityItem.vue"),
-    "post-activity-item": () =>
-      import("../../components/Activity/PostActivityItem.vue"),
-    "member-activity-item": () =>
-      import("../../components/Activity/MemberActivityItem.vue"),
-    "resource-activity-item": () =>
-      import("../../components/Activity/ResourceActivityItem.vue"),
-    "discussion-activity-item": () =>
-      import("../../components/Activity/DiscussionActivityItem.vue"),
-    "group-activity-item": () =>
-      import("../../components/Activity/GroupActivityItem.vue"),
-    "empty-content": () => import("../../components/Utils/EmptyContent.vue"),
-  },
-  metaInfo() {
-    return {
-      title: this.$t("{group} activity timeline", {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        group: this.group?.name,
-      }) as string,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class Timeline extends Vue {
-  @Prop({ required: true, type: String }) preferredUsername!: string;
-
-  group!: IGroup;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  ActivityType = ActivityType;
-
-  ActivityAuthorFilter = ActivityAuthorFilter;
-
-  get activityType(): ActivityType | undefined {
-    if (this.$route?.query?.type) {
-      return this.$route?.query?.type as ActivityType;
-    }
-    return undefined;
-  }
-
-  set activityType(type: ActivityType | undefined) {
-    this.$router.push({
-      name: RouteName.TIMELINE,
-      params: {
-        preferredUsername: this.preferredUsername,
-      },
-      query: { ...this.$route.query, type },
-    });
-  }
-
-  get activityAuthor(): ActivityAuthorFilter | undefined {
-    if (this.$route?.query?.author) {
-      return this.$route?.query?.author as ActivityAuthorFilter;
-    }
-    return undefined;
-  }
-
-  set activityAuthor(author: ActivityAuthorFilter | undefined) {
-    this.$router.push({
-      name: RouteName.TIMELINE,
-      params: {
-        preferredUsername: this.preferredUsername,
-      },
-      query: { ...this.$route.query, author },
-    });
-  }
-
-  get activity(): Paginate<IActivitySkeleton> {
-    if (this.group) {
-      return this.group.activity;
-    }
-    return {
-      total: 0,
-      elements: this.skeletons.map((skeleton) => ({
-        skeleton,
-      })),
-    };
-  }
-
-  page = 1;
-  limit = PAGINATION_LIMIT;
-
-  component(type: ActivityType): string | undefined {
-    switch (type) {
-      case ActivityType.EVENT:
-        return "event-activity-item";
-      case ActivityType.POST:
-        return "post-activity-item";
-      case ActivityType.MEMBER:
-        return "member-activity-item";
-      case ActivityType.RESOURCE:
-        return "resource-activity-item";
-      case ActivityType.DISCUSSION:
-        return "discussion-activity-item";
-      case ActivityType.GROUP:
-        return "group-activity-item";
-    }
-  }
-
-  get skeletons(): string[] {
-    return [...Array(SKELETON_DAY_ITEMS)]
-      .map((_, i) => {
-        return [...Array(SKELETON_ITEMS_PER_DAY)].map((_a, j) => {
-          return `${i}-${j}`;
-        });
-      })
-      .flat();
-  }
-
-  async loadMore(): Promise<void> {
-    if (this.page * PAGINATION_LIMIT >= this.activity.total) {
-      return;
-    }
-    this.page++;
-    try {
-      await this.$apollo.queries.group.fetchMore({
-        variables: {
-          page: this.page,
-          limit: PAGINATION_LIMIT,
-        },
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  get activities(): Record<string, IActivitySkeleton[]> {
-    return this.activity.elements.reduce(
-      (acc: Record<string, IActivitySkeleton[]>, elem) => {
-        let key;
-        if (this.isIActivity(elem)) {
-          const insertedAt = new Date(elem.insertedAt);
-          insertedAt.setHours(0);
-          insertedAt.setMinutes(0);
-          insertedAt.setSeconds(0);
-          insertedAt.setMilliseconds(0);
-          key = insertedAt.toISOString();
-        } else {
-          key = `skeleton-${elem.skeleton.split("-")[0]}`;
-        }
-        const existing = acc[key];
-        if (existing) {
-          acc[key] = [...existing, ...[elem]];
-        } else {
-          acc[key] = [elem];
-        }
-        return acc;
-      },
-      {}
-    );
-  }
-
-  isIActivity(object: IActivitySkeleton): object is IActivity {
-    return !("skeleton" in object);
-  }
-
-  getRandomInt(min: number, max: number): number {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min) + min);
-  }
-
-  isToday(dateString: string): boolean {
-    const now = new Date();
-    const date = new Date(dateString);
-    return (
-      now.getFullYear() === date.getFullYear() &&
-      now.getMonth() === date.getMonth() &&
-      now.getDate() === date.getDate()
-    );
-  }
-
-  isYesterday(dateString: string): boolean {
-    const date = new Date(dateString);
-    const yesterday = new Date();
-    yesterday.setDate(yesterday.getDate() - 1);
-    return (
-      yesterday.getFullYear() === date.getFullYear() &&
-      yesterday.getMonth() === date.getMonth() &&
-      yesterday.getDate() === date.getDate()
-    );
-  }
-}
-</script>
-<style lang="scss" scoped>
-.container.section {
-  background: $white;
-}
-
-.timeline {
-  ul {
-    // padding: 0.5rem 0;
-    margin: 0;
-    list-style: none;
-    position: relative;
-    &::before {
-      content: "";
-      height: 100%;
-      width: 1px;
-      background-color: #d9d9d9;
-      position: absolute;
-      top: 0;
-      left: 1rem;
-    }
-    li {
-      display: flex;
-      margin: 0.5rem 0;
-    }
-  }
-}
-</style>
diff --git a/js/src/views/Group/TimelineView.vue b/js/src/views/Group/TimelineView.vue
new file mode 100644
index 000000000..5b75f1aec
--- /dev/null
+++ b/js/src/views/Group/TimelineView.vue
@@ -0,0 +1,358 @@
+<template>
+  <div class="container mx-auto section">
+    <breadcrumbs-nav
+      v-if="group"
+      :links="[
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.TIMELINE,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: t('Activity'),
+        },
+      ]"
+    />
+
+    <section class="timeline">
+      <o-field>
+        <o-radio v-model="activityType" :native-value="undefined">
+          <TimelineText />
+          {{ t("All activities") }}</o-radio
+        >
+        <o-radio v-model="activityType" :native-value="ActivityType.MEMBER">
+          <o-icon icon="account-multiple-plus"></o-icon>
+          {{ t("Members") }}</o-radio
+        >
+        <o-radio v-model="activityType" :native-value="ActivityType.GROUP">
+          <o-icon icon="cog"></o-icon>
+          {{ t("Settings") }}</o-radio
+        >
+        <o-radio v-model="activityType" :native-value="ActivityType.EVENT">
+          <o-icon icon="calendar"></o-icon>
+          {{ t("Events") }}</o-radio
+        >
+        <o-radio v-model="activityType" :native-value="ActivityType.POST">
+          <o-icon icon="bullhorn"></o-icon>
+          {{ t("Posts") }}</o-radio
+        >
+        <o-radio v-model="activityType" :native-value="ActivityType.DISCUSSION">
+          <o-icon icon="chat"></o-icon>
+          {{ t("Discussions") }}</o-radio
+        >
+        <o-radio v-model="activityType" :native-value="ActivityType.RESOURCE">
+          <o-icon icon="link"></o-icon>
+          {{ t("Resources") }}</o-radio
+        >
+      </o-field>
+      <o-field>
+        <o-radio v-model="activityAuthor" :native-value="undefined">
+          <TimelineText />
+          {{ t("All activities") }}</o-radio
+        >
+        <o-radio
+          v-model="activityAuthor"
+          :native-value="ActivityAuthorFilter.SELF"
+        >
+          <o-icon icon="account"></o-icon>
+          {{ t("From yourself") }}</o-radio
+        >
+        <o-radio
+          v-model="activityAuthor"
+          :native-value="ActivityAuthorFilter.BY"
+        >
+          <o-icon icon="account-multiple"></o-icon>
+          {{ t("By others") }}</o-radio
+        >
+      </o-field>
+      <transition-group name="timeline-list" tag="div">
+        <div
+          class="day"
+          v-for="[date, activityItems] in Object.entries(activities)"
+          :key="date"
+        >
+          <o-skeleton
+            v-if="date.search(/skeleton/) !== -1"
+            width="300px"
+            height="48px"
+          />
+          <h2 v-else-if="isToday(date)">
+            <span v-tooltip="formatDateString(date)">
+              {{ t("Today") }}
+            </span>
+          </h2>
+          <h2 v-else-if="isYesterday(date)">
+            <span v-tooltip="formatDateString(date)">{{ t("Yesterday") }}</span>
+          </h2>
+          <h2 v-else>
+            {{ formatDateString(date) }}
+          </h2>
+          <ul>
+            <li v-for="activityItem in activityItems" :key="activityItem.id">
+              <skeleton-activity-item v-if="activityItem.type === 'skeleton'" />
+              <component
+                v-else
+                :is="component(activityItem.type)"
+                :activity="activityItem"
+              />
+            </li>
+          </ul></div
+      ></transition-group>
+      <empty-content
+        icon="timeline-text"
+        v-if="
+          !loading &&
+          activity.elements.length > 0 &&
+          activity.elements.length >= activity.total
+        "
+      >
+        {{ t("No more activity to display.") }}
+      </empty-content>
+      <empty-content
+        v-if="!loading && activity.total === 0"
+        icon="timeline-text"
+      >
+        {{
+          t(
+            "There is no activity yet. Start doing some things to see activity appear here."
+          )
+        }}
+      </empty-content>
+      <observer @intersect="loadMore" />
+      <o-button
+        v-if="activity.elements.length < activity.total"
+        @click="loadMore"
+        >{{ t("Load more activities") }}</o-button
+      >
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import { GROUP_TIMELINE } from "@/graphql/group";
+import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
+import { ActivityType } from "@/types/enums";
+import { Paginate } from "@/types/paginate";
+import { IActivity } from "../../types/activity.model";
+import Observer from "../../components/Utils/ObserverElement.vue";
+import SkeletonActivityItem from "../../components/Activity/SkeletonActivityItem.vue";
+import RouteName from "../../router/name";
+import TimelineText from "vue-material-design-icons/TimelineText.vue";
+import { useQuery } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
+import { enumTransformer, useRouteQuery } from "vue-use-route-query";
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatDateString } from "@/filters/datetime";
+
+const PAGINATION_LIMIT = 25;
+const SKELETON_DAY_ITEMS = 2;
+const SKELETON_ITEMS_PER_DAY = 5;
+type IActivitySkeleton =
+  | IActivity
+  | { skeleton: string; id: string; type: "skeleton" };
+
+enum ActivityAuthorFilter {
+  SELF = "SELF",
+  BY = "BY",
+}
+
+// type ActivityFilter = ActivityType | ActivityAuthorFilter | null;
+
+const props = defineProps<{ preferredUsername: string }>();
+
+const { t } = useI18n({ useScope: "global" });
+
+const EventActivityItem = defineAsyncComponent(
+  () => import("../../components/Activity/EventActivityItem.vue")
+);
+const PostActivityItem = defineAsyncComponent(
+  () => import("../../components/Activity/PostActivityItem.vue")
+);
+const MemberActivityItem = defineAsyncComponent(
+  () => import("../../components/Activity/MemberActivityItem.vue")
+);
+const ResourceActivityItem = defineAsyncComponent(
+  () => import("../../components/Activity/ResourceActivityItem.vue")
+);
+const DiscussionActivityItem = defineAsyncComponent(
+  () => import("../../components/Activity/DiscussionActivityItem.vue")
+);
+const GroupActivityItem = defineAsyncComponent(
+  () => import("../../components/Activity/GroupActivityItem.vue")
+);
+const EmptyContent = defineAsyncComponent(
+  () => import("../../components/Utils/EmptyContent.vue")
+);
+
+const activityType = useRouteQuery(
+  "activityType",
+  undefined,
+  enumTransformer(ActivityType)
+);
+const activityAuthor = useRouteQuery(
+  "activityAuthor",
+  undefined,
+  enumTransformer(ActivityAuthorFilter)
+);
+
+const page = ref(1);
+
+const {
+  result: groupTimelineResult,
+  fetchMore: fetchMoreActivities,
+  loading,
+} = useQuery<{ group: IGroup }>(GROUP_TIMELINE, () => ({
+  preferredUsername: props.preferredUsername,
+  page: page.value,
+  limit: PAGINATION_LIMIT,
+  type: activityType.value,
+  author: activityAuthor.value,
+}));
+
+const group = computed(() => groupTimelineResult.value?.group);
+
+useHead({
+  title: computed(() =>
+    t("{group} activity timeline", { group: group.value?.name })
+  ),
+});
+
+const activity = computed((): Paginate<IActivitySkeleton> => {
+  if (group.value) {
+    return group.value.activity;
+  }
+  return {
+    total: 0,
+    elements: skeletons.value.map((skeleton) => ({
+      skeleton,
+      id: skeleton,
+      type: "skeleton",
+    })),
+  };
+});
+
+const component = (type: ActivityType): any | undefined => {
+  switch (type) {
+    case ActivityType.EVENT:
+      return EventActivityItem;
+    case ActivityType.POST:
+      return PostActivityItem;
+    case ActivityType.MEMBER:
+      return MemberActivityItem;
+    case ActivityType.RESOURCE:
+      return ResourceActivityItem;
+    case ActivityType.DISCUSSION:
+      return DiscussionActivityItem;
+    case ActivityType.GROUP:
+      return GroupActivityItem;
+  }
+};
+
+const skeletons = computed((): string[] => {
+  return [...Array(SKELETON_DAY_ITEMS)]
+    .map((_, i) => {
+      return [...Array(SKELETON_ITEMS_PER_DAY)].map((_a, j) => {
+        return `${i}-${j}`;
+      });
+    })
+    .flat();
+});
+
+const loadMore = async (): Promise<void> => {
+  if (page.value * PAGINATION_LIMIT >= activity.value.total) {
+    return;
+  }
+  page.value++;
+  try {
+    await fetchMoreActivities({
+      variables: {
+        page: page.value,
+        limit: PAGINATION_LIMIT,
+      },
+    });
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const activities = computed((): Record<string, IActivitySkeleton[]> => {
+  return activity.value.elements.reduce(
+    (acc: Record<string, IActivitySkeleton[]>, elem) => {
+      let key;
+      if (isIActivity(elem)) {
+        const insertedAt = new Date(elem.insertedAt);
+        insertedAt.setHours(0);
+        insertedAt.setMinutes(0);
+        insertedAt.setSeconds(0);
+        insertedAt.setMilliseconds(0);
+        key = insertedAt.toISOString();
+      } else {
+        key = `skeleton-${elem.skeleton.split("-")[0]}`;
+      }
+      const existing = acc[key];
+      if (existing) {
+        acc[key] = [...existing, ...[elem]];
+      } else {
+        acc[key] = [elem];
+      }
+      return acc;
+    },
+    {}
+  );
+});
+
+const isIActivity = (object: IActivitySkeleton): object is IActivity => {
+  return !("skeleton" in object);
+};
+// const getRandomInt = (min: number, max: number): number => {
+//   min = Math.ceil(min);
+//   max = Math.floor(max);
+//   return Math.floor(Math.random() * (max - min) + min);
+// };
+
+const isToday = (dateString: string): boolean => {
+  const now = new Date();
+  const date = new Date(dateString);
+  return (
+    now.getFullYear() === date.getFullYear() &&
+    now.getMonth() === date.getMonth() &&
+    now.getDate() === date.getDate()
+  );
+};
+
+const isYesterday = (dateString: string): boolean => {
+  const date = new Date(dateString);
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  return (
+    yesterday.getFullYear() === date.getFullYear() &&
+    yesterday.getMonth() === date.getMonth() &&
+    yesterday.getDate() === date.getDate()
+  );
+};
+</script>
+<style lang="scss" scoped>
+.timeline {
+  ul {
+    // padding: 0.5rem 0;
+    margin: 0;
+    list-style: none;
+    position: relative;
+    &::before {
+      content: "";
+      height: 100%;
+      width: 1px;
+      background-color: #d9d9d9;
+      position: absolute;
+      top: 0;
+      left: 1rem;
+    }
+    li {
+      display: flex;
+      margin: 0.5rem 0;
+    }
+  }
+}
+</style>
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
deleted file mode 100644
index a0eafd227..000000000
--- a/js/src/views/Home.vue
+++ /dev/null
@@ -1,766 +0,0 @@
-<template>
-  <div id="homepage">
-    <b-loading :active.sync="$apollo.loading" />
-    <section
-      class="hero"
-      :class="{ webp: supportsWebPFormat }"
-      v-if="config && (!currentUser.id || !currentActor.id)"
-    >
-      <div class="hero-body">
-        <div class="container">
-          <h1 class="title">
-            {{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}
-          </h1>
-          <p
-            v-html="
-              $t('Join <b>{instance}</b>, a Mobilizon instance', {
-                instance: config.name,
-              })
-            "
-          />
-          <p class="instance-description">{{ config.description }}</p>
-          <!-- We don't invite to find other instances yet -->
-          <!-- <p v-if="!config.registrationsOpen">
-              {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
-          </p>-->
-          <div class="buttons">
-            <b-button
-              type="is-primary"
-              tag="router-link"
-              :to="{ name: RouteName.REGISTER }"
-              v-if="config.registrationsOpen"
-              >{{ $t("Create an account") }}</b-button
-            >
-            <!-- We don't invite to find other instances yet -->
-            <!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
-            <b-button
-              type="is-text"
-              tag="router-link"
-              :to="{ name: RouteName.ABOUT }"
-            >
-              {{ $t("Learn more about {instance}", { instance: config.name }) }}
-            </b-button>
-          </div>
-        </div>
-      </div>
-    </section>
-    <div
-      id="recent_events"
-      class="container section"
-      v-if="config && (!currentUser.id || !currentActor.id)"
-    >
-      <section class="events-recent">
-        <h2 class="title">
-          {{ $t("Last published events") }}
-        </h2>
-        <p>
-          <i18n tag="span" path="On {instance} and other federated instances">
-            <b slot="instance">{{ config.name }}</b>
-          </i18n>
-        </p>
-        <div v-if="this.events.total > 0">
-          <multi-card :events="events.elements.slice(0, 6)" />
-          <span class="view-all">
-            <router-link :to="{ name: RouteName.SEARCH }"
-              >{{ $t("View everything") }} >></router-link
-            >
-          </span>
-        </div>
-        <b-message v-else type="is-danger">{{
-          $t("No events found")
-        }}</b-message>
-      </section>
-    </div>
-    <div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
-      <div class="picture-container">
-        <picture>
-          <source
-            media="(max-width: 799px)"
-            srcset="/img/pics/homepage-480w.webp"
-            type="image/webp"
-          />
-          <source
-            media="(max-width: 799px)"
-            srcset="/img/pics/homepage-480w.jpg"
-            type="image/jpeg"
-          />
-
-          <source
-            media="(max-width: 1024px)"
-            srcset="/img/pics/homepage-1024w.webp"
-            type="image/webp"
-          />
-          <source
-            media="(max-width: 1024px)"
-            srcset="/img/pics/homepage-1024w.jpg"
-            type="image/jpeg"
-          />
-
-          <source
-            media="(max-width: 1920px)"
-            srcset="/img/pics/homepage-1920w.webp"
-            type="image/webp"
-          />
-          <source
-            media="(max-width: 1920px)"
-            srcset="/img/pics/homepage-1920w.jpg"
-            type="image/jpeg"
-          />
-
-          <source
-            media="(min-width: 1921px)"
-            srcset="/img/pics/homepage.webp"
-            type="image/webp"
-          />
-          <source
-            media="(min-width: 1921px)"
-            srcset="/img/pics/homepage.jpg"
-            type="image/jpeg"
-          />
-
-          <img
-            src="/img/pics/homepage-1024w.jpg"
-            width="3840"
-            height="2719"
-            alt=""
-            loading="lazy"
-          />
-        </picture>
-      </div>
-      <div class="container section">
-        <div class="columns">
-          <div class="column">
-            <h3 class="title">{{ $t("A practical tool") }}</h3>
-            <p
-              v-html="
-                $t(
-                  'Mobilizon is a tool that helps you <b>find, create and organise events</b>.'
-                )
-              "
-            />
-          </div>
-          <div class="column">
-            <h3 class="title">{{ $t("An ethical alternative") }}</h3>
-            <p
-              v-html="
-                $t(
-                  'Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.'
-                )
-              "
-            />
-          </div>
-          <div class="column">
-            <h3 class="title">{{ $t("A federated software") }}</h3>
-            <p
-              v-html="
-                $t(
-                  'Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.'
-                )
-              "
-            />
-          </div>
-        </div>
-        <div class="buttons">
-          <a
-            class="button is-primary is-large"
-            href="https://joinmobilizon.org"
-            >{{ $t("Learn more about Mobilizon") }}</a
-          >
-        </div>
-      </div>
-    </div>
-    <div class="container section" v-if="config && loggedUserSettings">
-      <section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
-        <b-message type="is-info" v-if="welcomeBack">{{
-          $t("Welcome back {username}!", {
-            username: currentActor.displayName(),
-          })
-        }}</b-message>
-        <b-message type="is-info" v-if="newRegisteredUser">{{
-          $t("Welcome to Mobilizon, {username}!", {
-            username: currentActor.displayName(),
-          })
-        }}</b-message>
-      </section>
-      <!-- Your upcoming events -->
-      <section v-if="canShowMyUpcomingEvents">
-        <h2 class="title">{{ $t("Your upcoming events") }}</h2>
-        <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
-          <p
-            class="date-component-container"
-            v-if="isInLessThanSevenDays(row[0])"
-          >
-            <span v-if="isToday(row[0])">{{
-              $tc("You have one event today.", row[1].length, {
-                count: row[1].length,
-              })
-            }}</span>
-            <span v-else-if="isTomorrow(row[0])">{{
-              $tc("You have one event tomorrow.", row[1].length, {
-                count: row[1].length,
-              })
-            }}</span>
-            <span v-else-if="isInLessThanSevenDays(row[0])">
-              {{
-                $tc("You have one event in {days} days.", row[1].length, {
-                  count: row[1].length,
-                  days: calculateDiffDays(row[0]),
-                })
-              }}
-            </span>
-          </p>
-          <div>
-            <event-participation-card
-              v-for="participation in thisWeek(row)"
-              @event-deleted="eventDeleted"
-              :key="participation[1].id"
-              :participation="participation[1]"
-            />
-          </div>
-        </div>
-        <span class="view-all">
-          <router-link :to="{ name: RouteName.MY_EVENTS }"
-            >{{ $t("View everything") }} >></router-link
-          >
-        </span>
-      </section>
-      <hr
-        role="presentation"
-        class="home-separator"
-        v-if="canShowMyUpcomingEvents && canShowFollowedGroupEvents"
-      />
-      <!-- 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="view-all">
-          <router-link
-            :to="{
-              name: RouteName.MY_EVENTS,
-              query: {
-                showUpcoming: 'true',
-                showDrafts: 'false',
-                showAttending: 'false',
-                showMyGroups: 'true',
-              },
-            }"
-            >{{ $t("View everything") }} >></router-link
-          >
-        </span>
-      </section>
-      <hr
-        role="presentation"
-        class="home-separator"
-        v-if="canShowFollowedGroupEvents && canShowCloseEvents"
-      />
-
-      <!-- Events close to you -->
-      <section class="events-close" v-if="canShowCloseEvents">
-        <h2 class="title">
-          {{ $t("Events nearby") }}
-        </h2>
-        <p>
-          {{
-            $tc(
-              "Within {number} kilometers of {place}",
-              loggedUserSettings.location.range,
-              {
-                number: loggedUserSettings.location.range,
-                place: loggedUserSettings.location.name,
-              }
-            )
-          }}
-          <router-link
-            :to="{ name: RouteName.PREFERENCES }"
-            :title="$t('Change')"
-          >
-            <b-icon class="clickable" icon="pencil" size="is-small" />
-          </router-link>
-        </p>
-        <multi-card :events="closeEvents.elements.slice(0, 4)" />
-      </section>
-      <hr
-        role="presentation"
-        class="home-separator"
-        v-if="canShowMyUpcomingEvents || canShowCloseEvents"
-      />
-      <section class="events-recent">
-        <h2 class="title">
-          {{ $t("Last published events") }}
-        </h2>
-        <p>
-          <i18n tag="span" path="On {instance} and other federated instances">
-            <b slot="instance">{{ config.name }}</b>
-          </i18n>
-        </p>
-
-        <div v-if="events.total > 0">
-          <multi-card :events="events.elements.slice(0, 8)" />
-          <span class="view-all">
-            <router-link :to="{ name: RouteName.SEARCH }"
-              >{{ $t("View everything") }} >></router-link
-            >
-          </span>
-        </div>
-        <b-message v-else type="is-danger"
-          >{{ $t("No events found") }}<br />
-          <div v-if="goingToEvents.size > 0">
-            <b-icon size="is-small" icon="information-outline" />
-            <small>{{
-              $t("The events you created are not shown here.")
-            }}</small>
-          </div>
-        </b-message>
-      </section>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { EventSortField, ParticipantRole, SortDirection } from "@/types/enums";
-import { Paginate } from "@/types/paginate";
-import { supportsWebPFormat } from "@/utils/support";
-import { IParticipant, Participant } from "../types/participant.model";
-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 {
-  ICurrentUser,
-  IUser,
-  IUserSettings,
-} from "../types/current-user.model";
-import { CURRENT_USER_CLIENT } from "../graphql/user";
-import { CLOSE_CONTENT, HOME_USER_QUERIES } from "../graphql/home";
-import RouteName from "../router/name";
-import { IEvent } from "../types/event.model";
-import DateComponent from "../components/Event/DateCalendarIcon.vue";
-import { CONFIG } from "../graphql/config";
-import { IConfig } from "../types/config.model";
-import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
-import Subtitle from "../components/Utils/Subtitle.vue";
-
-@Component({
-  apollo: {
-    events: {
-      query: FETCH_EVENTS,
-      variables: {
-        orderBy: EventSortField.INSERTED_AT,
-        direction: SortDirection.DESC,
-      },
-    },
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-      update: (data) => new Person(data.currentActor),
-    },
-    currentUser: CURRENT_USER_CLIENT,
-    config: CONFIG,
-    closeContent: {
-      query: CLOSE_CONTENT,
-      variables() {
-        return {
-          location: this.loggedUser?.settings?.location?.geohash,
-          radius: this.loggedUser?.settings?.location?.range,
-        };
-      },
-      update(data) {
-        this.closeEvents = data.searchEvents;
-      },
-      skip() {
-        return (
-          !this.currentUser?.isLoggedIn ||
-          !this.loggedUser?.settings?.location?.geohash ||
-          !this.loggedUser?.settings?.location?.range
-        );
-      },
-    },
-    userQueries: {
-      query: HOME_USER_QUERIES,
-      update(data) {
-        console.log("loggedUser", data.loggedUser);
-        this.loggedUser = data.loggedUser;
-        this.followedGroupEvents = data.loggedUser.followedGroupEvents;
-        this.currentUserParticipations =
-          data.loggedUser.participations.elements.map(
-            (participation: IParticipant) => new Participant(participation)
-          );
-      },
-      variables: {
-        afterDateTime: new Date().toISOString(),
-      },
-      skip() {
-        return !this.currentUser?.isLoggedIn;
-      },
-    },
-  },
-  components: {
-    Subtitle,
-    DateComponent,
-    EventParticipationCard,
-    MultiCard,
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.instanceName,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class Home extends Vue {
-  events: Paginate<IEvent> = {
-    elements: [],
-    total: 0,
-  };
-
-  locations = [];
-
-  city = { name: null };
-
-  country = { name: null };
-
-  currentUser!: ICurrentUser;
-
-  loggedUser: IUser | null = null;
-
-  currentActor!: IPerson;
-
-  config!: IConfig;
-
-  RouteName = RouteName;
-
-  currentUserParticipations: IParticipant[] = [];
-
-  supportsWebPFormat = supportsWebPFormat;
-
-  closeEvents: Paginate<IEvent> = { elements: [], total: 0 };
-
-  followedGroupEvents: Paginate<IFollowedGroupEvent> = {
-    elements: [],
-    total: 0,
-  };
-
-  // get displayed_name() {
-  //   return this.loggedPerson && this.loggedPerson.name === null
-  //     ? this.loggedPerson.preferredUsername
-  //     : this.loggedPerson.name;
-  // }
-
-  get instanceName(): string | undefined {
-    if (!this.config) return undefined;
-    return this.config.name;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  get welcomeBack(): boolean {
-    return window.localStorage.getItem("welcome-back") === "yes";
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  get newRegisteredUser(): boolean {
-    return window.localStorage.getItem("new-registered-user") === "yes";
-  }
-
-  thisWeek(
-    row: [string, Map<string, IParticipant>]
-  ): Map<string, IParticipant> {
-    if (this.isInLessThanSevenDays(row[0])) {
-      return row[1];
-    }
-    return new Map();
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  mounted(): void {
-    if (window.localStorage.getItem("welcome-back")) {
-      window.localStorage.removeItem("welcome-back");
-    }
-    if (window.localStorage.getItem("new-registered-user")) {
-      window.localStorage.removeItem("new-registered-user");
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  isToday(date: Date): boolean {
-    return new Date(date).toDateString() === new Date().toDateString();
-  }
-
-  isTomorrow(date: string): boolean {
-    return this.isInDays(date, 1);
-  }
-
-  isInDays(date: string, nbDays: number): boolean {
-    return this.calculateDiffDays(date) === nbDays;
-  }
-
-  isBefore(date: string, nbDays: number): boolean {
-    return this.calculateDiffDays(date) < nbDays;
-  }
-
-  isAfter(date: string, nbDays: number): boolean {
-    return this.calculateDiffDays(date) >= nbDays;
-  }
-
-  isInLessThanSevenDays(date: string): boolean {
-    return this.isBefore(date, 7);
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  calculateDiffDays(date: string): number {
-    return Math.ceil(
-      (new Date(date).getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24
-    );
-  }
-
-  get thisWeekGoingToEvents(): IParticipant[] {
-    const res = this.currentUserParticipations.filter(
-      ({ event, role }) =>
-        event.beginsOn != null &&
-        this.isAfter(event.beginsOn.toDateString(), 0) &&
-        this.isBefore(event.beginsOn.toDateString(), 7) &&
-        role !== ParticipantRole.REJECTED
-    );
-    res.sort(
-      (a: IParticipant, b: IParticipant) =>
-        a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
-    );
-    return res;
-  }
-
-  get goingToEvents(): Map<string, Map<string, IParticipant>> {
-    return this.thisWeekGoingToEvents.reduce(
-      (
-        acc: Map<string, Map<string, IParticipant>>,
-        participation: IParticipant
-      ) => {
-        const day = new Date(participation.event.beginsOn).toDateString();
-        const participations: Map<string, IParticipant> =
-          acc.get(day) || new Map();
-        participations.set(
-          `${participation.event.uuid}${participation.actor.id}`,
-          participation
-        );
-        acc.set(day, participations);
-        return acc;
-      },
-      new Map()
-    );
-  }
-
-  eventDeleted(eventid: string): void {
-    this.currentUserParticipations = this.currentUserParticipations.filter(
-      (participation) => participation.event.id !== eventid
-    );
-  }
-
-  viewEvent(event: IEvent): void {
-    this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
-  }
-
-  @Watch("loggedUser")
-  detectEmptyUserSettings(loggedUser: IUser): void {
-    console.debug("Try to detect empty user settings", loggedUser);
-    if (loggedUser?.id && loggedUser?.settings === null) {
-      console.debug("No user settings, pushing to onboarding assistant");
-      this.$router.push({
-        name: RouteName.WELCOME_SCREEN,
-        params: { step: "1" },
-      });
-    }
-  }
-
-  get loggedUserSettings(): IUserSettings | undefined {
-    return this.loggedUser?.settings;
-  }
-
-  get canShowMyUpcomingEvents(): boolean {
-    return this.currentActor.id != undefined && this.goingToEvents.size > 0;
-  }
-
-  get canShowCloseEvents(): boolean {
-    return (
-      this.loggedUser?.settings?.location != undefined &&
-      this.closeEvents.total > 0
-    );
-  }
-
-  get canShowFollowedGroupEvents(): boolean {
-    return this.filteredFollowedGroupsEvents.length > 0;
-  }
-
-  get filteredFollowedGroupsEvents(): IEvent[] {
-    return this.followedGroupEvents.elements
-      .map(({ event }: { event: IEvent }) => event)
-      .filter(
-        ({ id }) =>
-          !this.thisWeekGoingToEvents
-            .map(({ event: { id: event_id } }) => event_id)
-            .includes(id)
-      )
-      .slice(0, 4);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@import "~bulma/sass/utilities/mixins.sass";
-
-main > div > .container {
-  background: $white;
-  padding: 1rem 0.5rem 3rem;
-}
-
-.search-autocomplete {
-  border: 1px solid #dbdbdb;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.events-recent {
-  & > h3 {
-    @include padding-left(0.75rem);
-  }
-
-  .columns {
-    margin: 1rem auto 0;
-  }
-}
-
-.date-component-container {
-  display: flex;
-  align-items: center;
-  margin: 0.5rem auto 1rem;
-
-  h3.subtitle {
-    @include margin-left(7px);
-  }
-}
-
-span.view-all {
-  display: block;
-  margin-top: 1rem;
-  text-align: right;
-
-  a {
-    text-decoration: underline;
-  }
-}
-
-section.hero {
-  position: relative;
-  z-index: 1;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.3;
-    z-index: -1;
-    background: url("../../public/img/pics/homepage_background-1024w.png");
-    background-size: cover;
-  }
-  &.webp::before {
-    background-image: url("../../public/img/pics/homepage_background-1024w.webp");
-  }
-
-  & > .hero-body {
-    padding: 1rem 1.5rem 3rem;
-  }
-
-  .title {
-    color: $background-color;
-  }
-
-  .column figure.image img {
-    max-width: 400px;
-  }
-
-  .instance-description {
-    margin-bottom: 1rem;
-  }
-}
-
-#recent_events {
-  padding: 0;
-  min-height: 20vh;
-  z-index: 10;
-
-  .title {
-    margin: 20px auto 0;
-  }
-
-  .columns {
-    margin: 0 auto;
-  }
-}
-
-#picture {
-  .picture-container {
-    position: relative;
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-    }
-
-    & > img {
-      object-fit: cover;
-      max-height: 80vh;
-      display: block;
-      margin: auto;
-      width: 100%;
-    }
-  }
-
-  .container.section {
-    background: $white;
-
-    @include tablet {
-      margin-top: -4rem;
-    }
-    z-index: 10;
-
-    .title {
-      margin: 0 0 10px;
-      font-size: 30px;
-    }
-
-    .buttons {
-      justify-content: center;
-      margin-top: 2rem;
-    }
-  }
-}
-
-#homepage {
-  background: $white;
-}
-
-.home-separator {
-  background-color: $orange-2;
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.title {
-  font-size: 27px;
-  &:not(:last-child) {
-    margin-bottom: 0.5rem;
-  }
-}
-</style>
diff --git a/js/src/views/HomeView.vue b/js/src/views/HomeView.vue
new file mode 100644
index 000000000..544b27d3e
--- /dev/null
+++ b/js/src/views/HomeView.vue
@@ -0,0 +1,507 @@
+<template>
+  <!-- <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"
+      />
+    </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
+    class="container mx-auto"
+    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()" />
+  <OnlineEvents />
+  <LastEvents v-if="instanceName" :instanceName="instanceName" />
+  <!-- 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>
+import { ParticipantRole } from "@/types/enums";
+import { IParticipant } from "../types/participant.model";
+import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
+import MultiCard from "../components/Event/MultiCard.vue";
+import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
+import { IPerson, displayName } from "../types/actor";
+import { ICurrentUser, IUser } from "../types/current-user.model";
+import { CURRENT_USER_CLIENT } from "../graphql/user";
+import { HOME_USER_QUERIES } from "../graphql/home";
+import RouteName from "../router/name";
+import { IEvent } from "../types/event.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 OnlineEvents from "@/components/Local/OnlineEvents.vue";
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { useRouter } from "vue-router";
+import { REVERSE_GEOCODE } from "@/graphql/address";
+import { IAddress } from "@/types/address.model";
+import {
+  CURRENT_USER_LOCATION_CLIENT,
+  UPDATE_CURRENT_USER_LOCATION_CLIENT,
+} from "@/graphql/location";
+import { LocationType } from "@/types/user-location.model";
+import Presentation from "@/components/Home/MobilizonPresentation.vue";
+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 { geoHashToCoords } from "@/utils/location";
+import { useServerProvidedLocation } from "@/composition/apollo/config";
+import { ABOUT } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+
+const { result: aboutConfigResult } = useQuery<{
+  config: Pick<
+    IConfig,
+    "name" | "description" | "slogan" | "registrationsOpen"
+  >;
+}>(ABOUT);
+
+const config = computed(() => aboutConfigResult.value?.config);
+
+const { result: currentActorResult } = useQuery<{ currentActor: IPerson }>(
+  CURRENT_ACTOR_CLIENT
+);
+const currentActor = computed<IPerson | undefined>(
+  () => currentActorResult.value?.currentActor
+);
+
+const { result: currentUserResult } = useQuery<{
+  currentUser: ICurrentUser;
+}>(CURRENT_USER_CLIENT);
+
+const currentUser = computed(() => currentUserResult.value?.currentUser);
+
+const instanceName = computed(() => config.value?.name);
+
+const { result: userResult } = useQuery<{ loggedUser: IUser }>(
+  HOME_USER_QUERIES,
+  { afterDateTime: new Date().toISOString() },
+  () => ({
+    enabled: currentUser.value?.id != undefined,
+  })
+);
+
+const loggedUser = computed(() => userResult.value?.loggedUser);
+const followedGroupEvents = computed(
+  () => userResult.value?.loggedUser?.followedGroupEvents
+);
+
+const currentUserParticipations = computed(
+  () => loggedUser.value?.participations.elements
+);
+
+const location = ref(null);
+const search = ref("");
+
+const isToday = (date: string): boolean => {
+  return new Date(date).toDateString() === new Date().toDateString();
+};
+
+const isTomorrow = (date: string): boolean => {
+  return isInDays(date, 1);
+};
+
+const isInDays = (date: string, nbDays: number): boolean => {
+  return calculateDiffDays(date) === nbDays;
+};
+
+const isBefore = (date: string, nbDays: number): boolean => {
+  return calculateDiffDays(date) < nbDays;
+};
+
+const isAfter = (date: string, nbDays: number): boolean => {
+  return calculateDiffDays(date) >= nbDays;
+};
+
+const isInLessThanSevenDays = (date: string): boolean => {
+  return isBefore(date, 7);
+};
+
+const thisWeek = (
+  row: [string, Map<string, IParticipant>]
+): Map<string, IParticipant> => {
+  if (isInLessThanSevenDays(row[0])) {
+    return row[1];
+  }
+  return new Map();
+};
+
+const calculateDiffDays = (date: string): number => {
+  return Math.ceil(
+    (new Date(date).getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24
+  );
+};
+
+const thisWeekGoingToEvents = computed<IParticipant[]>(() => {
+  const res = (currentUserParticipations.value || []).filter(
+    ({ event, role }) =>
+      event.beginsOn != null &&
+      isAfter(event.beginsOn, 0) &&
+      isBefore(event.beginsOn, 7) &&
+      role !== ParticipantRole.REJECTED
+  );
+  res.sort(
+    (a: IParticipant, b: IParticipant) =>
+      new Date(a.event.beginsOn).getTime() -
+      new Date(b.event.beginsOn).getTime()
+  );
+  return res;
+});
+
+const goingToEvents = computed<Map<string, Map<string, IParticipant>>>(() => {
+  return thisWeekGoingToEvents.value?.reduce(
+    (
+      acc: Map<string, Map<string, IParticipant>>,
+      participation: IParticipant
+    ) => {
+      const day = new Date(participation.event.beginsOn).toDateString();
+      const participations: Map<string, IParticipant> =
+        acc.get(day) || new Map();
+      participations.set(
+        `${participation.event.uuid}${participation.actor.id}`,
+        participation
+      );
+      acc.set(day, participations);
+      return acc;
+    },
+    new Map()
+  );
+});
+
+const canShowMyUpcomingEvents = computed<boolean>(() => {
+  return currentActor.value?.id != undefined && goingToEvents.value.size > 0;
+});
+
+const canShowFollowedGroupEvents = computed<boolean>(() => {
+  return filteredFollowedGroupsEvents.value.length > 0;
+});
+
+const filteredFollowedGroupsEvents = computed<IEvent[]>(() => {
+  return (followedGroupEvents.value?.elements || [])
+    .map(({ event }: { event: IEvent }) => event)
+    .filter(
+      ({ id }) =>
+        !thisWeekGoingToEvents.value
+          .map(({ event: { id: event_id } }) => event_id)
+          .includes(id)
+    )
+    .slice(0, 4);
+});
+
+const welcomeBack = ref(false);
+const newRegisteredUser = ref(false);
+
+onMounted(() => {
+  if (window.localStorage.getItem("welcome-back")) {
+    welcomeBack.value = true;
+    window.localStorage.removeItem("welcome-back");
+  }
+  if (window.localStorage.getItem("new-registered-user")) {
+    newRegisteredUser.value = true;
+    window.localStorage.removeItem("new-registered-user");
+  }
+});
+
+const router = useRouter();
+
+watch(loggedUser, (loggedUserValue) => {
+  if (loggedUserValue?.id && loggedUserValue?.settings === null) {
+    router.push({
+      name: RouteName.WELCOME_SCREEN,
+      params: { step: "1" },
+    });
+  }
+});
+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 { location: serverLocation } = useServerProvidedLocation();
+
+// 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 },
+}: // eslint-disable-next-line no-undef
+GeolocationPosition) => {
+  reverseGeoCodeInformation.latitude = latitude;
+  reverseGeoCodeInformation.longitude = longitude;
+  reverseGeoCodeInformation.accuracy = accuracy;
+};
+
+const performGeoLocation = () => {
+  navigator.geolocation.getCurrentPosition(fetchAndSaveCurrentLocationName);
+};
+
+/**
+ * View Head
+ */
+useHead({
+  title: computed(() => instanceName.value ?? ""),
+});
+</script>
diff --git a/js/src/views/Interact.vue b/js/src/views/Interact.vue
deleted file mode 100644
index a320bd5bf..000000000
--- a/js/src/views/Interact.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div class="container section">
-    <b-notification v-if="$apollo.queries.interact.loading">
-      {{ $t("Redirecting to content…") }}
-    </b-notification>
-    <b-notification v-if="$apollo.queries.interact.skip" type="is-danger">
-      {{ $t("Resource provided is not an URL") }}
-    </b-notification>
-    <b-message
-      :title="$t('Error')"
-      type="is-danger"
-      has-icon
-      :closable="false"
-      v-if="!$apollo.loading && errors.length > 0"
-    >
-      <p v-for="error in errors" :key="error">
-        <b>{{ error }}</b>
-      </p>
-      <p>
-        {{
-          $t(
-            "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content."
-          )
-        }}
-      </p>
-    </b-message>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { INTERACT } from "@/graphql/search";
-import { IEvent } from "@/types/event.model";
-import { IGroup, usernameWithDomain } from "@/types/actor";
-import RouteName from "../router/name";
-import { GraphQLError } from "graphql";
-
-@Component({
-  apollo: {
-    interact: {
-      query: INTERACT,
-      variables() {
-        return {
-          uri: this.$route.query.uri,
-        };
-      },
-      skip() {
-        try {
-          const url = this.$route.query.uri as string;
-          const uri = new URL(url);
-          return !(uri instanceof URL);
-        } catch (e) {
-          return true;
-        }
-      },
-      error({ graphQLErrors, networkError }) {
-        if (networkError) {
-          this.errors = [networkError.message];
-        }
-        this.errors = graphQLErrors.map((error: GraphQLError) => error.message);
-      },
-      async result({ data: { interact } }) {
-        switch (interact.__typename) {
-          case "Group":
-            await this.$router.replace({
-              name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(interact) },
-            });
-            break;
-          case "Event":
-            await this.$router.replace({
-              name: RouteName.EVENT,
-              params: { uuid: interact.uuid },
-            });
-            break;
-          default:
-            this.error = [this.$t("This URL is not supported")];
-        }
-        // await this.$router.replace({
-        //   name: RouteName.EVENT,
-        //   params: { uuid: event.uuid },
-        // });
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Interact with a remote content") as string,
-    };
-  },
-})
-export default class Interact extends Vue {
-  interact!: IEvent | IGroup;
-
-  errors: string[] = [];
-}
-</script>
-<style lang="scss">
-main > .container {
-  background: $white;
-}
-</style>
diff --git a/js/src/views/InteractView.vue b/js/src/views/InteractView.vue
new file mode 100644
index 000000000..e8be781d7
--- /dev/null
+++ b/js/src/views/InteractView.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="container mx-auto section">
+    <o-notification v-if="loading">
+      {{ t("Redirecting to content…") }}
+    </o-notification>
+    <o-notification v-if="!isURI" variant="danger">
+      {{ t("Resource provided is not an URL") }}
+    </o-notification>
+    <o-notification
+      :title="t('Error')"
+      variant="danger"
+      has-icon
+      :closable="false"
+      v-if="!loading && errors.length > 0"
+    >
+      <p v-for="error in errors" :key="error">
+        <b>{{ error }}</b>
+      </p>
+      <p>
+        {{
+          t(
+            "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content."
+          )
+        }}
+      </p>
+    </o-notification>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { INTERACT } from "@/graphql/search";
+import { IEvent } from "@/types/event.model";
+import { IGroup, usernameWithDomain } from "@/types/actor";
+import RouteName from "../router/name";
+import { GraphQLError } from "graphql";
+import { useQuery } from "@vue/apollo-composable";
+import { computed, reactive } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useRouteQuery } from "vue-use-route-query";
+import { useHead } from "@vueuse/head";
+
+const router = useRouter();
+const { t } = useI18n({ useScope: "global" });
+
+const uri = useRouteQuery("uri", "");
+
+const isURI = computed((): boolean => {
+  try {
+    const url = new URL(uri.value);
+    return url instanceof URL;
+  } catch (e) {
+    return false;
+  }
+});
+
+const errors = reactive<string[]>([]);
+
+const { onResult, onError, loading } = useQuery<{
+  interact: (IEvent | IGroup) & { __typename: string };
+}>(
+  INTERACT,
+  () => ({
+    uri: uri.value,
+  }),
+  () => ({
+    enabled: isURI.value === true,
+  })
+);
+
+onResult(async ({ data: { interact } }) => {
+  switch (interact.__typename) {
+    case "Group":
+      await router.replace({
+        name: RouteName.GROUP,
+        params: { preferredUsername: usernameWithDomain(interact as IGroup) },
+      });
+      break;
+    case "Event":
+      await router.replace({
+        name: RouteName.EVENT,
+        params: { uuid: (interact as IEvent).uuid },
+      });
+      break;
+    default:
+      errors.push(t("This URL is not supported"));
+  }
+});
+
+onError(({ graphQLErrors, networkError }) => {
+  if (networkError) {
+    errors.push(networkError.message);
+  }
+  errors.push(...graphQLErrors.map((error: GraphQLError) => error.message));
+});
+
+useHead({
+  title: computed(() => t("Interact with a remote content")),
+});
+</script>
diff --git a/js/src/views/Moderation/Logs.vue b/js/src/views/Moderation/Logs.vue
deleted file mode 100644
index 728781ce8..000000000
--- a/js/src/views/Moderation/Logs.vue
+++ /dev/null
@@ -1,442 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        {
-          name: RouteName.MODERATION,
-          text: $t('Moderation'),
-        },
-        {
-          name: RouteName.REPORT_LOGS,
-          text: $t('Moderation log'),
-        },
-      ]"
-    />
-    <section v-if="actionLogs.total > 0 && actionLogs.elements.length > 0">
-      <ul>
-        <li v-for="log in actionLogs.elements" :key="log.id">
-          <div class="box">
-            <img
-              class="image"
-              :src="log.actor.avatar.url"
-              :alt="log.actor.avatar.alt || ''"
-              v-if="log.actor.avatar"
-            />
-            <i18n
-              v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
-              tag="span"
-              path="{moderator} closed {report}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                :to="{
-                  name: RouteName.REPORT,
-                  params: { reportId: log.object.id },
-                }"
-                slot="report"
-                >{{
-                  $t("report #{report_number}", {
-                    report_number: log.object.id,
-                  })
-                }}
-              </router-link>
-            </i18n>
-            <i18n
-              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
-              tag="span"
-              path="{moderator} reopened {report}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                :to="{
-                  name: RouteName.REPORT,
-                  params: { reportId: log.object.id },
-                }"
-                slot="report"
-                >{{
-                  $t("report #{report_number}", {
-                    report_number: log.object.id,
-                  })
-                }}
-              </router-link>
-            </i18n>
-            <i18n
-              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
-              tag="span"
-              path="{moderator} marked {report} as resolved"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                :to="{
-                  name: RouteName.REPORT,
-                  params: { reportId: log.object.id },
-                }"
-                slot="report"
-                >{{
-                  $t("report #{report_number}", {
-                    report_number: log.object.id,
-                  })
-                }}
-              </router-link>
-            </i18n>
-            <i18n
-              v-else-if="log.action === ActionLogAction.NOTE_CREATION"
-              tag="span"
-              path="{moderator} added a note on {report}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                v-if="log.object.report"
-                :to="{
-                  name: RouteName.REPORT,
-                  params: { reportId: log.object.report.id },
-                }"
-                slot="report"
-                >{{
-                  $t("report #{report_number}", {
-                    report_number: log.object.report.id,
-                  })
-                }}
-              </router-link>
-              <span v-else slot="report">{{
-                $t("a non-existent report")
-              }}</span>
-            </i18n>
-            <i18n
-              v-else-if="log.action === ActionLogAction.EVENT_DELETION"
-              tag="span"
-              path='{moderator} deleted an event named "{title}"'
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <b slot="title">{{ log.object.title }}</b>
-            </i18n>
-            <i18n
-              v-else-if="
-                log.action === ActionLogAction.ACTOR_SUSPENSION &&
-                log.object.__typename == 'Person'
-              "
-              tag="span"
-              path="{moderator} suspended profile {profile}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                slot="profile"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.object.id },
-                }"
-                >{{ displayNameAndUsername(log.object) }}
-              </router-link>
-            </i18n>
-            <i18n
-              v-else-if="
-                log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
-                log.object.__typename == 'Person'
-              "
-              tag="span"
-              path="{moderator} has unsuspended profile {profile}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                slot="profile"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.object.id },
-                }"
-                >{{ displayNameAndUsername(log.object) }}
-              </router-link>
-            </i18n>
-            <i18n
-              v-else-if="
-                log.action === ActionLogAction.ACTOR_SUSPENSION &&
-                log.object.__typename == 'Group'
-              "
-              tag="span"
-              path="{moderator} suspended group {profile}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                slot="profile"
-                :to="{
-                  name: RouteName.ADMIN_GROUP_PROFILE,
-                  params: { id: log.object.id },
-                }"
-                >{{ displayNameAndUsername(log.object) }}
-              </router-link>
-            </i18n>
-            <i18n
-              v-else-if="
-                log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
-                log.object.__typename == 'Group'
-              "
-              tag="span"
-              path="{moderator} has unsuspended group {profile}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                slot="profile"
-                :to="{
-                  name: RouteName.ADMIN_GROUP_PROFILE,
-                  params: { id: log.object.id },
-                }"
-                >{{ displayNameAndUsername(log.object) }}
-              </router-link>
-            </i18n>
-            <i18n
-              v-else-if="log.action === ActionLogAction.USER_DELETION"
-              tag="span"
-              path="{moderator} has deleted user {user}"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-              <router-link
-                v-if="log.object.confirmedAt"
-                slot="user"
-                :to="{
-                  name: RouteName.ADMIN_USER_PROFILE,
-                  params: { id: log.object.id },
-                }"
-                >{{ log.object.email }}
-              </router-link>
-              <b v-else slot="user">{{ log.object.email }}</b>
-            </i18n>
-            <span
-              v-else-if="
-                log.action === ActionLogAction.COMMENT_DELETION &&
-                log.object.event
-              "
-            >
-              <i18n
-                tag="span"
-                path="{moderator} has deleted a comment from {author} under the event {event}"
-              >
-                <router-link
-                  slot="moderator"
-                  :to="{
-                    name: RouteName.ADMIN_PROFILE,
-                    params: { id: log.actor.id },
-                  }"
-                  >@{{ log.actor.preferredUsername }}</router-link
-                >
-                <router-link
-                  v-if="log.object.event && log.object.event.uuid"
-                  slot="event"
-                  :to="{
-                    name: RouteName.EVENT,
-                    params: { uuid: log.object.event.uuid },
-                  }"
-                  >{{ log.object.event.title }}
-                </router-link>
-                <b v-else slot="event">{{ log.object.event.title }}</b>
-                <router-link
-                  slot="author"
-                  :to="{
-                    name: RouteName.ADMIN_PROFILE,
-                    params: { id: log.object.actor.id },
-                  }"
-                  >{{ displayNameAndUsername(log.object.actor) }}
-                </router-link>
-              </i18n>
-              <pre v-html="log.object.text" />
-            </span>
-            <span v-else-if="log.action === ActionLogAction.COMMENT_DELETION">
-              <i18n
-                tag="span"
-                path="{moderator} has deleted a comment from {author}"
-              >
-                <router-link
-                  slot="moderator"
-                  :to="{
-                    name: RouteName.ADMIN_PROFILE,
-                    params: { id: log.actor.id },
-                  }"
-                  >@{{ log.actor.preferredUsername }}</router-link
-                >
-                <router-link
-                  slot="author"
-                  :to="{
-                    name: RouteName.ADMIN_PROFILE,
-                    params: { id: log.object.actor.id },
-                  }"
-                  >{{ displayNameAndUsername(log.object.actor) }}
-                </router-link>
-              </i18n>
-              <pre v-html="log.object.text" />
-            </span>
-            <i18n
-              v-else
-              tag="span"
-              path="{moderator} has done an unknown action"
-            >
-              <router-link
-                slot="moderator"
-                :to="{
-                  name: RouteName.ADMIN_PROFILE,
-                  params: { id: log.actor.id },
-                }"
-                >@{{ log.actor.preferredUsername }}</router-link
-              >
-            </i18n>
-            <br />
-            <small>{{ log.insertedAt | formatDateTimeString }}</small>
-          </div>
-        </li>
-      </ul>
-      <b-pagination
-        :total="actionLogs.total"
-        v-model="page"
-        :per-page="LOGS_PER_PAGE"
-        :aria-next-label="$t('Next page')"
-        :aria-previous-label="$t('Previous page')"
-        :aria-page-label="$t('Page')"
-        :aria-current-label="$t('Current page')"
-      >
-      </b-pagination>
-    </section>
-    <div v-else>
-      <b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { IActionLog } from "@/types/report.model";
-import { LOGS } from "@/graphql/report";
-import ReportCard from "@/components/Report/ReportCard.vue";
-import { ActionLogAction } from "@/types/enums";
-import RouteName from "../../router/name";
-import { displayNameAndUsername } from "../../types/actor";
-import { Paginate } from "@/types/paginate";
-
-@Component({
-  components: {
-    ReportCard,
-  },
-  apollo: {
-    actionLogs: {
-      fetchPolicy: "cache-and-network",
-      query: LOGS,
-      variables() {
-        return {
-          page: this.page,
-          limit: this.LOGS_PER_PAGE,
-        };
-      },
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Moderation logs") as string,
-    };
-  },
-})
-export default class ReportList extends Vue {
-  actionLogs?: Paginate<IActionLog> = { total: 0, elements: [] };
-
-  page = parseInt((this.$route.query.page as string) || "1", 10);
-
-  LOGS_PER_PAGE = 10;
-
-  ActionLogAction = ActionLogAction;
-
-  RouteName = RouteName;
-
-  displayNameAndUsername = displayNameAndUsername;
-
-  mounted(): void {
-    this.page = parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  @Watch("page")
-  triggerLoadMoreMemberPageChange(page: string): void {
-    this.$router.replace({
-      name: RouteName.REPORT_LOGS,
-      query: { ...this.$route.query, page },
-    });
-  }
-}
-</script>
-<style lang="scss" scoped>
-img.image {
-  display: inline-block;
-  height: 1.5em;
-  vertical-align: text-bottom;
-}
-
-a {
-  text-decoration: none;
-}
-
-section ul li {
-  margin: 0.5rem auto;
-}
-</style>
diff --git a/js/src/views/Moderation/LogsView.vue b/js/src/views/Moderation/LogsView.vue
new file mode 100644
index 000000000..142d7ad5f
--- /dev/null
+++ b/js/src/views/Moderation/LogsView.vue
@@ -0,0 +1,446 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        {
+          name: RouteName.MODERATION,
+          text: $t('Moderation'),
+        },
+        {
+          name: RouteName.REPORT_LOGS,
+          text: $t('Moderation log'),
+        },
+      ]"
+    />
+    <section v-if="actionLogs.total > 0 && actionLogs.elements.length > 0">
+      <ul>
+        <li v-for="log in actionLogs.elements" :key="log.id">
+          <div class="box">
+            <img
+              class="image"
+              :src="log.actor.avatar.url"
+              :alt="log.actor.avatar.alt || ''"
+              v-if="log.actor.avatar"
+            />
+            <i18n-t
+              v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
+              tag="span"
+              keypath="{moderator} closed {report}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #report>
+                <router-link
+                  :to="{
+                    name: RouteName.REPORT,
+                    params: { reportId: log.object.id },
+                  }"
+                  >{{
+                    $t("report #{report_number}", {
+                      report_number: log.object.id,
+                    })
+                  }}
+                </router-link>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
+              tag="span"
+              keypath="{moderator} reopened {report}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #report>
+                <router-link
+                  :to="{
+                    name: RouteName.REPORT,
+                    params: { reportId: log.object.id },
+                  }"
+                  >{{
+                    $t("report #{report_number}", {
+                      report_number: log.object.id,
+                    })
+                  }}
+                </router-link>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
+              tag="span"
+              keypath="{moderator} marked {report} as resolved"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #report>
+                <router-link
+                  :to="{
+                    name: RouteName.REPORT,
+                    params: { reportId: log.object.id },
+                  }"
+                  >{{
+                    $t("report #{report_number}", {
+                      report_number: log.object.id,
+                    })
+                  }}
+                </router-link>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="log.action === ActionLogAction.NOTE_CREATION"
+              tag="span"
+              keypath="{moderator} added a note on {report}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #report>
+                <router-link
+                  v-if="log.object.report"
+                  :to="{
+                    name: RouteName.REPORT,
+                    params: { reportId: log.object.report.id },
+                  }"
+                  >{{
+                    $t("report #{report_number}", {
+                      report_number: log.object.report.id,
+                    })
+                  }}
+                </router-link>
+                <span v-else>{{ $t("a non-existent report") }}</span>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="log.action === ActionLogAction.EVENT_DELETION"
+              tag="span"
+              keypath='{moderator} deleted an event named "{title}"'
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #title>
+                <b>{{ log.object.title }}</b>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="
+                log.action === ActionLogAction.ACTOR_SUSPENSION &&
+                log.object.__typename == 'Person'
+              "
+              tag="span"
+              keypath="{moderator} suspended profile {profile}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #profile>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.object.id },
+                  }"
+                  >{{ displayNameAndUsername(log.object) }}
+                </router-link>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="
+                log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
+                log.object.__typename == 'Person'
+              "
+              tag="span"
+              keypath="{moderator} has unsuspended profile {profile}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #profile>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.object.id },
+                  }"
+                  >{{ displayNameAndUsername(log.object) }}
+                </router-link>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="
+                log.action === ActionLogAction.ACTOR_SUSPENSION &&
+                log.object.__typename == 'Group'
+              "
+              tag="span"
+              keypath="{moderator} suspended group {profile}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #profile>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_GROUP_PROFILE,
+                    params: { id: log.object.id },
+                  }"
+                  >{{ displayNameAndUsername(log.object) }}
+                </router-link>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="
+                log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
+                log.object.__typename == 'Group'
+              "
+              tag="span"
+              keypath="{moderator} has unsuspended group {profile}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #profile>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_GROUP_PROFILE,
+                    params: { id: log.object.id },
+                  }"
+                  >{{ displayNameAndUsername(log.object) }}
+                </router-link>
+              </template>
+            </i18n-t>
+            <i18n-t
+              v-else-if="log.action === ActionLogAction.USER_DELETION"
+              tag="span"
+              keypath="{moderator} has deleted user {user}"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+              <template #user>
+                <router-link
+                  v-if="log.object.confirmedAt"
+                  :to="{
+                    name: RouteName.ADMIN_USER_PROFILE,
+                    params: { id: log.object.id },
+                  }"
+                  >{{ log.object.email }}
+                </router-link>
+                <b v-else>{{ log.object.email }}</b>
+              </template>
+            </i18n-t>
+            <span
+              v-else-if="
+                log.action === ActionLogAction.COMMENT_DELETION &&
+                log.object.event
+              "
+            >
+              <i18n-t
+                tag="span"
+                keypath="{moderator} has deleted a comment from {author} under the event {event}"
+              >
+                <template #moderator>
+                  <router-link
+                    :to="{
+                      name: RouteName.ADMIN_PROFILE,
+                      params: { id: log.actor.id },
+                    }"
+                    >@{{ log.actor.preferredUsername }}</router-link
+                  >
+                </template>
+                <template #event>
+                  <router-link
+                    v-if="log.object.event && log.object.event.uuid"
+                    :to="{
+                      name: RouteName.EVENT,
+                      params: { uuid: log.object.event.uuid },
+                    }"
+                    >{{ log.object.event.title }}
+                  </router-link>
+                  <b v-else>{{ log.object.event.title }}</b>
+                </template>
+                <template #author>
+                  <router-link
+                    :to="{
+                      name: RouteName.ADMIN_PROFILE,
+                      params: { id: log.object.actor.id },
+                    }"
+                    >{{ displayNameAndUsername(log.object.actor) }}
+                  </router-link>
+                </template>
+              </i18n-t>
+              <pre v-html="log.object.text" />
+            </span>
+            <span v-else-if="log.action === ActionLogAction.COMMENT_DELETION">
+              <i18n-t
+                tag="span"
+                keypath="{moderator} has deleted a comment from {author}"
+              >
+                <template #moderator>
+                  <router-link
+                    :to="{
+                      name: RouteName.ADMIN_PROFILE,
+                      params: { id: log.actor.id },
+                    }"
+                    >@{{ log.actor.preferredUsername }}</router-link
+                  >
+                </template>
+                <template #author>
+                  <router-link
+                    :to="{
+                      name: RouteName.ADMIN_PROFILE,
+                      params: { id: log.object.actor.id },
+                    }"
+                    >{{ displayNameAndUsername(log.object.actor) }}
+                  </router-link>
+                </template>
+              </i18n-t>
+              <pre v-html="log.object.text" />
+            </span>
+            <i18n-t
+              v-else
+              tag="span"
+              keypath="{moderator} has done an unknown action"
+            >
+              <template #moderator>
+                <router-link
+                  :to="{
+                    name: RouteName.ADMIN_PROFILE,
+                    params: { id: log.actor.id },
+                  }"
+                  >@{{ log.actor.preferredUsername }}</router-link
+                >
+              </template>
+            </i18n-t>
+            <br />
+            <small>{{ formatDateTimeString(log.insertedAt) }}</small>
+          </div>
+        </li>
+      </ul>
+      <o-pagination
+        :total="actionLogs.total"
+        v-model="page"
+        :per-page="LOGS_PER_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>
+    </section>
+    <div v-else>
+      <o-notification variant="info">{{
+        $t("No moderation logs yet")
+      }}</o-notification>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { IActionLog } from "@/types/report.model";
+import { LOGS } from "@/graphql/report";
+import { ActionLogAction } from "@/types/enums";
+import RouteName from "../../router/name";
+import { displayNameAndUsername } from "../../types/actor";
+import { Paginate } from "@/types/paginate";
+import { useQuery } from "@vue/apollo-composable";
+import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatDateTimeString } from "@/filters/datetime";
+
+const LOGS_PER_PAGE = 10;
+
+const page = useRouteQuery("page", 1, integerTransformer);
+
+const { result: actionLogsResult } = useQuery<{
+  actionLogs: Paginate<IActionLog>;
+}>(LOGS, () => ({
+  page: page.value,
+  limit: LOGS_PER_PAGE,
+}));
+
+const actionLogs = computed(
+  () => actionLogsResult.value?.actionLogs ?? { total: 0, elements: [] }
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Moderation logs")),
+});
+</script>
+<style lang="scss" scoped>
+img.image {
+  display: inline-block;
+  height: 1.5em;
+  vertical-align: text-bottom;
+}
+
+a {
+  text-decoration: none;
+}
+
+section ul li {
+  margin: 0.5rem auto;
+}
+</style>
diff --git a/js/src/views/Moderation/Report.vue b/js/src/views/Moderation/Report.vue
deleted file mode 100644
index 71094d796..000000000
--- a/js/src/views/Moderation/Report.vue
+++ /dev/null
@@ -1,528 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      v-if="report"
-      :links="[
-        {
-          name: RouteName.MODERATION,
-          text: $t('Moderation'),
-        },
-        {
-          name: RouteName.REPORTS,
-          text: $t('Reports'),
-        },
-        {
-          name: RouteName.REPORT,
-          params: { id: report.id },
-          text: $t('Report #{reportNumber}', { reportNumber: report.id }),
-        },
-      ]"
-    />
-    <section>
-      <b-message
-        title="Error"
-        type="is-danger"
-        v-for="error in errors"
-        :key="error"
-      >
-        {{ error }}
-      </b-message>
-      <div class="container" v-if="report">
-        <div class="buttons">
-          <b-button
-            v-if="report.status !== ReportStatusEnum.RESOLVED"
-            @click="updateReport(ReportStatusEnum.RESOLVED)"
-            type="is-primary"
-            >{{ $t("Mark as resolved") }}</b-button
-          >
-          <b-button
-            v-if="report.status !== ReportStatusEnum.OPEN"
-            @click="updateReport(ReportStatusEnum.OPEN)"
-            type="is-success"
-            >{{ $t("Reopen") }}</b-button
-          >
-          <b-button
-            v-if="report.status !== ReportStatusEnum.CLOSED"
-            @click="updateReport(ReportStatusEnum.CLOSED)"
-            type="is-danger"
-            >{{ $t("Close") }}</b-button
-          >
-        </div>
-        <div class="table-container">
-          <table class="table is-striped is-fullwidth">
-            <tbody>
-              <tr v-if="report.reported.__typename === 'Group'">
-                <td>{{ $t("Reported group") }}</td>
-                <td>
-                  <router-link
-                    :to="{
-                      name: RouteName.ADMIN_GROUP_PROFILE,
-                      params: { id: report.reported.id },
-                    }"
-                  >
-                    <img
-                      v-if="report.reported.avatar"
-                      class="image"
-                      :src="report.reported.avatar.url"
-                      alt=""
-                    />
-                    {{ displayNameAndUsername(report.reported) }}
-                  </router-link>
-                </td>
-              </tr>
-              <tr v-else>
-                <td>
-                  {{ $t("Reported identity") }}
-                </td>
-                <td>
-                  <router-link
-                    :to="{
-                      name: RouteName.ADMIN_PROFILE,
-                      params: { id: report.reported.id },
-                    }"
-                  >
-                    <img
-                      v-if="report.reported.avatar"
-                      class="image"
-                      :src="report.reported.avatar.url"
-                      alt=""
-                    />
-                    {{ displayNameAndUsername(report.reported) }}
-                  </router-link>
-                </td>
-              </tr>
-              <tr>
-                <td>{{ $t("Reported by") }}</td>
-                <td v-if="report.reporter.type === ActorType.APPLICATION">
-                  {{ report.reporter.domain }}
-                </td>
-                <td v-else>
-                  <router-link
-                    :to="{
-                      name: RouteName.ADMIN_PROFILE,
-                      params: { id: report.reporter.id },
-                    }"
-                  >
-                    <img
-                      v-if="report.reporter.avatar"
-                      class="image"
-                      :src="report.reporter.avatar.url"
-                      alt=""
-                    />
-                    {{ displayNameAndUsername(report.reporter) }}
-                  </router-link>
-                </td>
-              </tr>
-              <tr>
-                <td>{{ $t("Reported") }}</td>
-                <td>{{ report.insertedAt | formatDateTimeString }}</td>
-              </tr>
-              <tr v-if="report.updatedAt !== report.insertedAt">
-                <td>{{ $t("Updated") }}</td>
-                <td>{{ report.updatedAt | formatDateTimeString }}</td>
-              </tr>
-              <tr>
-                <td>{{ $t("Status") }}</td>
-                <td>
-                  <span v-if="report.status === ReportStatusEnum.OPEN">{{
-                    $t("Open")
-                  }}</span>
-                  <span v-else-if="report.status === ReportStatusEnum.CLOSED">
-                    {{ $t("Closed") }}
-                  </span>
-                  <span v-else-if="report.status === ReportStatusEnum.RESOLVED">
-                    {{ $t("Resolved") }}
-                  </span>
-                  <span v-else>{{ $t("Unknown") }}</span>
-                </td>
-              </tr>
-              <tr v-if="report.event && report.comments.length > 0">
-                <td>{{ $t("Event") }}</td>
-                <td>
-                  <router-link
-                    :to="{
-                      name: RouteName.EVENT,
-                      params: { uuid: report.event.uuid },
-                    }"
-                  >
-                    {{ report.event.title }}
-                  </router-link>
-                  <span class="is-pulled-right">
-                    <!--                                    <b-button-->
-                    <!--                                            tag="router-link"-->
-                    <!--                                            type="is-primary"-->
-                    <!--                                            :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
-                    <!--                                            icon-left="pencil"-->
-                    <!--                                            size="is-small">{{ $t('Edit') }}</b-button>-->
-                    <b-button
-                      type="is-danger"
-                      @click="confirmEventDelete()"
-                      icon-left="delete"
-                      size="is-small"
-                      >{{ $t("Delete") }}</b-button
-                    >
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="box report-content">
-          <p v-if="report.content" v-html="nl2br(report.content)" />
-          <p v-else>{{ $t("No comment") }}</p>
-        </div>
-
-        <div class="box" v-if="report.event && report.comments.length === 0">
-          <router-link
-            :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }"
-          >
-            <h3 class="title">{{ report.event.title }}</h3>
-            <p v-html="report.event.description" />
-          </router-link>
-          <!--                <b-button-->
-          <!--                        tag="router-link"-->
-          <!--                        type="is-primary"-->
-          <!--                        :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
-          <!--                        icon-left="pencil"-->
-          <!--                        size="is-small">{{ $t('Edit') }}</b-button>-->
-          <b-button
-            type="is-danger"
-            @click="confirmEventDelete()"
-            icon-left="delete"
-            size="is-small"
-            >{{ $t("Delete") }}</b-button
-          >
-        </div>
-
-        <div v-if="report.comments.length > 0">
-          <ul v-for="comment in report.comments" :key="comment.id">
-            <li>
-              <div class="box" v-if="comment">
-                <article class="media">
-                  <div class="media-left">
-                    <figure
-                      class="image is-48x48"
-                      v-if="comment.actor && comment.actor.avatar"
-                    >
-                      <img :src="comment.actor.avatar.url" alt="Image" />
-                    </figure>
-                    <b-icon
-                      class="media-left"
-                      v-else
-                      size="is-large"
-                      icon="account-circle"
-                    />
-                  </div>
-                  <div class="media-content">
-                    <div class="content">
-                      <span v-if="comment.actor">
-                        <strong>{{ comment.actor.name }}</strong>
-                        <small>@{{ comment.actor.preferredUsername }}</small>
-                      </span>
-                      <span v-else>{{ $t("Unknown actor") }}</span>
-                      <br />
-                      <p v-html="comment.text" />
-                    </div>
-                    <b-button
-                      type="is-danger"
-                      @click="confirmCommentDelete(comment)"
-                      icon-left="delete"
-                      size="is-small"
-                      >{{ $t("Delete") }}</b-button
-                    >
-                  </div>
-                </article>
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <h2 class="title" v-if="report.notes.length > 0">{{ $t("Notes") }}</h2>
-        <div
-          class="box note"
-          v-for="note in report.notes"
-          :id="`note-${note.id}`"
-          :key="note.id"
-        >
-          <p>{{ note.content }}</p>
-          <router-link
-            :to="{
-              name: RouteName.ADMIN_PROFILE,
-              params: { id: note.moderator.id },
-            }"
-          >
-            <img
-              alt
-              class="image"
-              :src="note.moderator.avatar.url"
-              v-if="note.moderator.avatar"
-            />
-            @{{ note.moderator.preferredUsername }}
-          </router-link>
-          <br />
-          <small>
-            <a :href="`#note-${note.id}`" v-if="note.insertedAt">
-              {{ note.insertedAt | formatDateTimeString }}
-            </a>
-          </small>
-        </div>
-
-        <form @submit="addNote()">
-          <b-field :label="$t('New note')" label-for="newNoteInput">
-            <b-input
-              type="textarea"
-              v-model="noteContent"
-              id="newNoteInput"
-            ></b-input>
-          </b-field>
-          <b-button type="submit" @click="addNote">{{
-            $t("Add a note")
-          }}</b-button>
-        </form>
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { CREATE_REPORT_NOTE, REPORT, UPDATE_REPORT } from "@/graphql/report";
-import { IReport, IReportNote } from "@/types/report.model";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { IPerson, displayNameAndUsername } from "@/types/actor";
-import { DELETE_EVENT } from "@/graphql/event";
-import uniq from "lodash/uniq";
-import { nl2br } from "@/utils/html";
-import { DELETE_COMMENT } from "@/graphql/comment";
-import { IComment } from "@/types/comment.model";
-import { ActorType, ReportStatusEnum } from "@/types/enums";
-import RouteName from "../../router/name";
-import { GraphQLError } from "graphql";
-import { ApolloCache, FetchResult } from "@apollo/client/core";
-
-@Component({
-  apollo: {
-    report: {
-      query: REPORT,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.reportId,
-        };
-      },
-      error({ graphQLErrors }) {
-        this.errors = uniq(
-          graphQLErrors.map(({ message }: GraphQLError) => message)
-        );
-      },
-    },
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Report") as string,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class Report extends Vue {
-  @Prop({ required: true }) reportId!: number;
-
-  report!: IReport;
-
-  currentActor!: IPerson;
-
-  errors: string[] = [];
-
-  ReportStatusEnum = ReportStatusEnum;
-
-  RouteName = RouteName;
-
-  ActorType = ActorType;
-
-  nl2br = nl2br;
-
-  noteContent = "";
-
-  displayNameAndUsername = displayNameAndUsername;
-
-  addNote(): void {
-    try {
-      this.$apollo.mutate<{ createReportNote: IReportNote }>({
-        mutation: CREATE_REPORT_NOTE,
-        variables: {
-          reportId: this.report.id,
-          content: this.noteContent,
-        },
-        update: (
-          store: ApolloCache<{ createReportNote: IReportNote }>,
-          { data }: FetchResult
-        ) => {
-          if (data == null) return;
-          const cachedData = store.readQuery<{ report: IReport }>({
-            query: REPORT,
-            variables: { id: this.report.id },
-          });
-          if (cachedData == null) return;
-          const { report } = cachedData;
-          if (report === null) {
-            console.error(
-              "Cannot update event notes cache, because of null value."
-            );
-            return;
-          }
-          const note = data.createReportNote;
-          note.moderator = this.currentActor;
-
-          report.notes = report.notes.concat([note]);
-
-          store.writeQuery({
-            query: REPORT,
-            variables: { id: this.report.id },
-            data: { report },
-          });
-        },
-      });
-
-      this.noteContent = "";
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  confirmEventDelete(): void {
-    this.$buefy.dialog.confirm({
-      title: this.$t("Deleting event") as string,
-      message: this.$t(
-        "Are you sure you want to <b>delete</b> this event? This action cannot be undone. You may want to engage the discussion with the event creator or edit its event instead."
-      ) as string,
-      confirmText: this.$t("Delete Event") as string,
-      type: "is-danger",
-      hasIcon: true,
-      onConfirm: () => this.deleteEvent(),
-    });
-  }
-
-  confirmCommentDelete(comment: IComment): void {
-    this.$buefy.dialog.confirm({
-      title: this.$t("Deleting comment") as string,
-      message: this.$t(
-        "Are you sure you want to <b>delete</b> this comment? This action cannot be undone."
-      ) as string,
-      confirmText: this.$t("Delete Comment") as string,
-      type: "is-danger",
-      hasIcon: true,
-      onConfirm: () => this.deleteComment(comment),
-    });
-  }
-
-  async deleteEvent(): Promise<void> {
-    if (!this.report.event || !this.report.event.id) return;
-    const eventTitle = this.report.event.title;
-
-    try {
-      await this.$apollo.mutate({
-        mutation: DELETE_EVENT,
-        variables: {
-          eventId: this.report.event.id.toString(),
-        },
-      });
-
-      this.$buefy.notification.open({
-        message: this.$t("Event {eventTitle} deleted", {
-          eventTitle,
-        }) as string,
-        type: "is-success",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  async deleteComment(comment: IComment): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: DELETE_COMMENT,
-        variables: {
-          commentId: comment.id,
-        },
-      });
-      this.$notifier.success(this.$t("Comment deleted") as string);
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  async updateReport(status: ReportStatusEnum): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ updateReportStatus: IReport }>({
-        mutation: UPDATE_REPORT,
-        variables: {
-          reportId: this.report.id,
-          status,
-        },
-        update: (
-          store: ApolloCache<{ updateReportStatus: IReport }>,
-          { data }: FetchResult
-        ) => {
-          if (data == null) return;
-          const reportCachedData = store.readQuery<{ report: IReport }>({
-            query: REPORT,
-            variables: { id: this.report.id },
-          });
-          if (reportCachedData == null) return;
-          const { report } = reportCachedData;
-          if (report === null) {
-            console.error(
-              "Cannot update event notes cache, because of null value."
-            );
-            return;
-          }
-          const updatedReport = {
-            ...report,
-            status: data.updateReportStatus.status,
-          };
-
-          store.writeQuery({
-            query: REPORT,
-            variables: { id: this.report.id },
-            data: { report: updatedReport },
-          });
-        },
-      });
-      await this.$router.push({ name: RouteName.REPORTS });
-    } catch (error) {
-      console.error(error);
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-tbody td img.image,
-.note img.image {
-  display: inline;
-  height: 1.5em;
-  vertical-align: text-bottom;
-}
-
-.dialog .modal-card-foot {
-  justify-content: flex-end;
-}
-
-.report-content {
-  border-left: 4px solid $primary;
-}
-
-.box a {
-  text-decoration: none;
-  color: inherit;
-}
-
-td > a {
-  text-decoration: none;
-}
-</style>
diff --git a/js/src/views/Moderation/ReportList.vue b/js/src/views/Moderation/ReportList.vue
deleted file mode 100644
index 577842fdb..000000000
--- a/js/src/views/Moderation/ReportList.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        {
-          name: RouteName.MODERATION,
-          text: $t('Moderation'),
-        },
-        {
-          name: RouteName.REPORTS,
-          text: $t('Reports'),
-        },
-      ]"
-    />
-    <section>
-      <div class="flex flex-wrap gap-2">
-        <b-field :label="$t('Report status')">
-          <b-radio-button
-            v-model="status"
-            :native-value="ReportStatusEnum.OPEN"
-            >{{ $t("Open") }}</b-radio-button
-          >
-          <b-radio-button
-            v-model="status"
-            :native-value="ReportStatusEnum.RESOLVED"
-            >{{ $t("Resolved") }}</b-radio-button
-          >
-          <b-radio-button
-            v-model="status"
-            :native-value="ReportStatusEnum.CLOSED"
-            >{{ $t("Closed") }}</b-radio-button
-          >
-        </b-field>
-        <b-field
-          :label="$t('Domain')"
-          label-for="domain-filter"
-          class="flex-auto"
-        >
-          <b-input
-            id="domain-filter"
-            :placeholder="$t('mobilizon-instance.tld')"
-            :value="filterDomain"
-            @input="debouncedUpdateDomainFilter"
-          />
-        </b-field>
-      </div>
-      <ul v-if="reports.elements.length > 0">
-        <li v-for="report in reports.elements" :key="report.id">
-          <router-link
-            :to="{ name: RouteName.REPORT, params: { reportId: report.id } }"
-          >
-            <report-card :report="report" />
-          </router-link>
-        </li>
-      </ul>
-      <div v-else class="no-reports">
-        <empty-content
-          icon="chat-alert"
-          inline
-          v-if="status === ReportStatusEnum.OPEN"
-        >
-          {{ $t("No open reports yet") }}
-        </empty-content>
-        <empty-content
-          icon="chat-alert"
-          inline
-          v-if="status === ReportStatusEnum.RESOLVED"
-        >
-          {{ $t("No resolved reports yet") }}
-        </empty-content>
-        <empty-content
-          icon="chat-alert"
-          inline
-          v-if="status === ReportStatusEnum.CLOSED"
-        >
-          {{ $t("No closed reports yet") }}
-        </empty-content>
-      </div>
-      <b-pagination
-        :total="reports.total"
-        v-model="page"
-        :simple="true"
-        :per-page="REPORT_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')"
-      >
-      </b-pagination>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { IReport } from "@/types/report.model";
-import { REPORTS } from "@/graphql/report";
-import ReportCard from "@/components/Report/ReportCard.vue";
-import EmptyContent from "@/components/Utils/EmptyContent.vue";
-import { ReportStatusEnum } from "@/types/enums";
-import RouteName from "../../router/name";
-import VueRouter from "vue-router";
-import { Paginate } from "@/types/paginate";
-import debounce from "lodash/debounce";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
-
-const REPORT_PAGE_LIMIT = 10;
-
-@Component({
-  components: {
-    ReportCard,
-    EmptyContent,
-  },
-  apollo: {
-    reports: {
-      fetchPolicy: "cache-and-network",
-      query: REPORTS,
-      variables() {
-        return {
-          page: this.page,
-          status: this.status,
-          limit: REPORT_PAGE_LIMIT,
-          domain: this.filterDomain,
-        };
-      },
-      pollInterval: 120000, // 2 minutes
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Reports") as string,
-    };
-  },
-})
-export default class ReportList extends Vue {
-  reports?: Paginate<IReport> = { elements: [], total: 0 };
-
-  RouteName = RouteName;
-
-  ReportStatusEnum = ReportStatusEnum;
-
-  filterReports: ReportStatusEnum = ReportStatusEnum.OPEN;
-
-  REPORT_PAGE_LIMIT = REPORT_PAGE_LIMIT;
-
-  data(): Record<string, unknown> {
-    return {
-      debouncedUpdateDomainFilter: debounce(this.updateDomainFilter, 500),
-    };
-  }
-
-  async updateDomainFilter(domain: string) {
-    this.filterDomain = domain;
-  }
-
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  set page(page: number) {
-    this.pushRouter({
-      page: page.toString(),
-    });
-  }
-
-  get status(): ReportStatusEnum {
-    const filter = (this.$route.query.status || "") as string;
-    if (filter in ReportStatusEnum) {
-      return filter as ReportStatusEnum;
-    }
-    return ReportStatusEnum.OPEN;
-  }
-
-  set status(status: ReportStatusEnum) {
-    this.pushRouter({ status });
-  }
-
-  get filterDomain(): string {
-    return (this.$route.query.domain as string) || "";
-  }
-
-  set filterDomain(domain: string) {
-    this.pushRouter({ domain });
-  }
-
-  protected async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      await this.$router.push({
-        name: RouteName.REPORTS,
-        params: this.$route.params,
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-section {
-  .no-reports {
-    margin-bottom: 2rem;
-  }
-  & > ul li {
-    margin: 0.5rem auto;
-
-    & > a {
-      text-decoration: none;
-    }
-  }
-}
-</style>
diff --git a/js/src/views/Moderation/ReportListView.vue b/js/src/views/Moderation/ReportListView.vue
new file mode 100644
index 000000000..71a301146
--- /dev/null
+++ b/js/src/views/Moderation/ReportListView.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        {
+          name: RouteName.MODERATION,
+          text: t('Moderation'),
+        },
+        {
+          name: RouteName.REPORTS,
+          text: t('Reports'),
+        },
+      ]"
+    />
+    <section>
+      <div class="flex flex-wrap gap-2">
+        <o-field :label="t('Report status')">
+          <o-radio v-model="status" :native-value="ReportStatusEnum.OPEN">{{
+            t("Open")
+          }}</o-radio>
+          <o-radio v-model="status" :native-value="ReportStatusEnum.RESOLVED">{{
+            t("Resolved")
+          }}</o-radio>
+          <o-radio v-model="status" :native-value="ReportStatusEnum.CLOSED">{{
+            t("Closed")
+          }}</o-radio>
+        </o-field>
+        <o-field
+          :label="t('Domain')"
+          label-for="domain-filter"
+          class="flex-auto"
+        >
+          <o-input
+            id="domain-filter"
+            :placeholder="t('mobilizon-instance.tld')"
+            :value="filterDomain"
+            @input="debouncedUpdateDomainFilter"
+          />
+        </o-field>
+      </div>
+      <ul v-if="reports.elements.length > 0">
+        <li v-for="report in reports.elements" :key="report.id">
+          <router-link
+            :to="{ name: RouteName.REPORT, params: { reportId: report.id } }"
+          >
+            <report-card :report="report" />
+          </router-link>
+        </li>
+      </ul>
+      <div v-else class="no-reports">
+        <empty-content
+          icon="chat-alert"
+          inline
+          v-if="status === ReportStatusEnum.OPEN"
+        >
+          {{ t("No open reports yet") }}
+        </empty-content>
+        <empty-content
+          icon="chat-alert"
+          inline
+          v-if="status === ReportStatusEnum.RESOLVED"
+        >
+          {{ t("No resolved reports yet") }}
+        </empty-content>
+        <empty-content
+          icon="chat-alert"
+          inline
+          v-if="status === ReportStatusEnum.CLOSED"
+        >
+          {{ t("No closed reports yet") }}
+        </empty-content>
+      </div>
+      <o-pagination
+        :total="reports.total"
+        v-model="page"
+        :simple="true"
+        :per-page="REPORT_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>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import { IReport } from "@/types/report.model";
+import { REPORTS } from "@/graphql/report";
+import ReportCard from "@/components/Report/ReportCard.vue";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import { ReportStatusEnum } from "@/types/enums";
+import RouteName from "../../router/name";
+import { Paginate } from "@/types/paginate";
+import debounce from "lodash/debounce";
+import { useQuery } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
+import {
+  enumTransformer,
+  integerTransformer,
+  useRouteQuery,
+} from "vue-use-route-query";
+
+const REPORT_PAGE_LIMIT = 10;
+const page = useRouteQuery("page", 1, integerTransformer);
+const filterDomain = useRouteQuery("filterDomain", "");
+const status = useRouteQuery(
+  "status",
+  ReportStatusEnum.OPEN,
+  enumTransformer(ReportStatusEnum)
+);
+
+const { result: reportsResult } = useQuery<{ reports: Paginate<IReport> }>(
+  REPORTS,
+  () => ({
+    page: page.value,
+    status: status.value,
+    limit: REPORT_PAGE_LIMIT,
+    domain: filterDomain.value,
+  })
+);
+
+const reports = computed(
+  () => reportsResult.value?.reports ?? { elements: [], total: 0 }
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Reports")),
+});
+
+// const filterReports = ref<ReportStatusEnum>(ReportStatusEnum.OPEN);
+
+const updateDomainFilter = (event: InputEvent) => {
+  filterDomain.value = event.target?.value;
+};
+
+const debouncedUpdateDomainFilter = debounce(updateDomainFilter, 500);
+</script>
+
+<style lang="scss" scoped>
+section {
+  .no-reports {
+    margin-bottom: 2rem;
+  }
+  & > ul li {
+    margin: 0.5rem auto;
+
+    & > a {
+      text-decoration: none;
+    }
+  }
+}
+</style>
diff --git a/js/src/views/Moderation/ReportView.vue b/js/src/views/Moderation/ReportView.vue
new file mode 100644
index 000000000..19443dd92
--- /dev/null
+++ b/js/src/views/Moderation/ReportView.vue
@@ -0,0 +1,543 @@
+<template>
+  <breadcrumbs-nav
+    v-if="report"
+    :links="[
+      {
+        name: RouteName.MODERATION,
+        text: t('Moderation'),
+      },
+      {
+        name: RouteName.REPORTS,
+        text: t('Reports'),
+      },
+      {
+        name: RouteName.REPORT,
+        params: { id: report.id },
+        text: t('Report #{reportNumber}', { reportNumber: report.id }),
+      },
+    ]"
+  />
+  <o-notification
+    title="Error"
+    variant="danger"
+    v-for="error in errors"
+    :key="error"
+  >
+    {{ error }}
+  </o-notification>
+  <div class="container mx-auto" v-if="report">
+    <div class="flex flex-wrap gap-2 my-2">
+      <o-button
+        v-if="report.status !== ReportStatusEnum.RESOLVED"
+        @click="updateReport(ReportStatusEnum.RESOLVED)"
+        variant="primary"
+        >{{ t("Mark as resolved") }}</o-button
+      >
+      <o-button
+        v-if="report.status !== ReportStatusEnum.OPEN"
+        @click="updateReport(ReportStatusEnum.OPEN)"
+        variant="success"
+        >{{ t("Reopen") }}</o-button
+      >
+      <o-button
+        v-if="report.status !== ReportStatusEnum.CLOSED"
+        @click="updateReport(ReportStatusEnum.CLOSED)"
+        variant="danger"
+        >{{ t("Close") }}</o-button
+      >
+    </div>
+    <section class="w-full">
+      <table class="table w-full">
+        <tbody>
+          <tr v-if="report.reported.type === ActorType.GROUP">
+            <td>{{ t("Reported group") }}</td>
+            <td>
+              <router-link
+                :to="{
+                  name: RouteName.ADMIN_GROUP_PROFILE,
+                  params: { id: report.reported.id },
+                }"
+              >
+                <img
+                  v-if="report.reported.avatar"
+                  class="image"
+                  :src="report.reported.avatar.url"
+                  alt=""
+                />
+                {{ displayNameAndUsername(report.reported) }}
+              </router-link>
+            </td>
+          </tr>
+          <tr v-else>
+            <td>
+              {{ t("Reported identity") }}
+            </td>
+            <td>
+              <router-link
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: report.reported.id },
+                }"
+              >
+                <img
+                  v-if="report.reported.avatar"
+                  class="image"
+                  :src="report.reported.avatar.url"
+                  alt=""
+                />
+                {{ displayNameAndUsername(report.reported) }}
+              </router-link>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ t("Reported by") }}</td>
+            <td v-if="report.reporter.type === ActorType.APPLICATION">
+              {{ report.reporter.domain }}
+            </td>
+            <td v-else>
+              <router-link
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: report.reporter.id },
+                }"
+              >
+                <img
+                  v-if="report.reporter.avatar"
+                  class="image"
+                  :src="report.reporter.avatar.url"
+                  alt=""
+                />
+                {{ displayNameAndUsername(report.reporter) }}
+              </router-link>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ t("Reported") }}</td>
+            <td>{{ formatDateTimeString(report.insertedAt) }}</td>
+          </tr>
+          <tr v-if="report.updatedAt !== report.insertedAt">
+            <td>{{ t("Updated") }}</td>
+            <td>{{ formatDateTimeString(report.updatedAt) }}</td>
+          </tr>
+          <tr>
+            <td>{{ t("Status") }}</td>
+            <td>
+              <span v-if="report.status === ReportStatusEnum.OPEN">{{
+                t("Open")
+              }}</span>
+              <span v-else-if="report.status === ReportStatusEnum.CLOSED">
+                {{ t("Closed") }}
+              </span>
+              <span v-else-if="report.status === ReportStatusEnum.RESOLVED">
+                {{ t("Resolved") }}
+              </span>
+              <span v-else>{{ t("Unknown") }}</span>
+            </td>
+          </tr>
+          <tr v-if="report.event && report.comments.length > 0">
+            <td>{{ t("Event") }}</td>
+            <td>
+              <router-link
+                :to="{
+                  name: RouteName.EVENT,
+                  params: { uuid: report.event.uuid },
+                }"
+              >
+                {{ report.event.title }}
+              </router-link>
+              <span>
+                <!--                                    <o-button-->
+                <!--                                            tag="router-link"-->
+                <!--                                            variant="primary"-->
+                <!--                                            :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
+                <!--                                            icon-left="pencil"-->
+                <!--                                            size="small">{{ t('Edit') }}</o-button>-->
+                <o-button
+                  variant="danger"
+                  @click="confirmEventDelete()"
+                  icon-left="delete"
+                  size="small"
+                  >{{ t("Delete") }}</o-button
+                >
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h2>{{ t("Report reason") }}</h2>
+      <div class="dark:bg-zinc-700 p-2 rounded my-2">
+        <div class="flex gap-1">
+          <figure class="" v-if="report.reported.avatar">
+            <img
+              alt=""
+              :src="report.reported.avatar.url"
+              class="rounded-full"
+              width="48"
+              height="48"
+            />
+          </figure>
+          <AccountCircle v-else :size="48" />
+          <div class="">
+            <p class="" v-if="report.reported.name">
+              {{ report.reported.name }}
+            </p>
+            <p class="">@{{ usernameWithDomain(report.reported) }}</p>
+          </div>
+        </div>
+        <div
+          class="prose dark:prose-invert"
+          v-if="report.content"
+          v-html="nl2br(report.content)"
+        />
+        <p v-else>{{ t("No comment") }}</p>
+      </div>
+    </section>
+
+    <section class="" v-if="report.event && report.comments.length === 0">
+      <h2>{{ t("Reported content") }}</h2>
+      <EventCard :event="report.event" mode="row" class="my-2" />
+      <!--                <o-button-->
+      <!--                        tag="router-link"-->
+      <!--                        variant="primary"-->
+      <!--                        :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
+      <!--                        icon-left="pencil"-->
+      <!--                        size="small">{{ t('Edit') }}</o-button>-->
+      <o-button
+        variant="danger"
+        @click="confirmEventDelete()"
+        icon-left="delete"
+        size="small"
+        >{{ t("Delete") }}</o-button
+      >
+    </section>
+
+    <div v-if="report.comments.length > 0">
+      <ul v-for="comment in report.comments" :key="comment.id">
+        <li>
+          <div class="" v-if="comment">
+            <article class="flex gap-1">
+              <div class="">
+                <figure class="" v-if="comment.actor && comment.actor.avatar">
+                  <img
+                    :src="comment.actor.avatar.url"
+                    alt=""
+                    width="48"
+                    height="48"
+                  />
+                </figure>
+                <AccountCircle :size="48" v-else />
+              </div>
+              <div class="">
+                <div class="prose dark:prose-invert">
+                  <span v-if="comment.actor">
+                    <strong>{{ comment.actor.name }}</strong>
+                    <small>@{{ comment.actor.preferredUsername }}</small>
+                  </span>
+                  <span v-else>{{ t("Unknown actor") }}</span>
+                  <br />
+                  <p v-html="comment.text" />
+                </div>
+                <o-button
+                  variant="danger"
+                  @click="confirmCommentDelete(comment)"
+                  icon-left="delete"
+                  size="small"
+                  >{{ t("Delete") }}</o-button
+                >
+              </div>
+            </article>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <section>
+      <h2>{{ t("Notes") }}</h2>
+      <div
+        class="box note"
+        v-for="note in report.notes"
+        :id="`note-${note.id}`"
+        :key="note.id"
+      >
+        <p>{{ note.content }}</p>
+        <router-link
+          :to="{
+            name: RouteName.ADMIN_PROFILE,
+            params: { id: note.moderator.id },
+          }"
+        >
+          <img
+            alt=""
+            class="rounded-full"
+            :src="note.moderator.avatar.url"
+            v-if="note.moderator.avatar"
+          />
+          @{{ note.moderator.preferredUsername }}
+        </router-link>
+        <br />
+        <small>
+          <a :href="`#note-${note.id}`" v-if="note.insertedAt">
+            {{ formatDateTimeString(note.insertedAt) }}
+          </a>
+        </small>
+      </div>
+
+      <form
+        @submit="
+          createReportNoteMutation({
+            reportId: report?.id,
+            content: noteContent,
+          })
+        "
+      >
+        <o-field :label="t('New note')" label-for="newNoteInput">
+          <o-input
+            type="textarea"
+            v-model="noteContent"
+            id="newNoteInput"
+          ></o-input>
+        </o-field>
+        <o-button class="mt-2" type="submit">{{ t("Add a note") }}</o-button>
+      </form>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import { CREATE_REPORT_NOTE, REPORT, UPDATE_REPORT } from "@/graphql/report";
+import { IReport, IReportNote } from "@/types/report.model";
+import { displayNameAndUsername, usernameWithDomain } from "@/types/actor";
+import { DELETE_EVENT } from "@/graphql/event";
+import uniq from "lodash/uniq";
+import { nl2br } from "@/utils/html";
+import { DELETE_COMMENT } from "@/graphql/comment";
+import { IComment } from "@/types/comment.model";
+import { ActorType, ReportStatusEnum } from "@/types/enums";
+import RouteName from "@/router/name";
+import { GraphQLError } from "graphql";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { ref, computed, inject } from "vue";
+import { formatDateTimeString } from "@/filters/datetime";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { Dialog } from "@/plugins/dialog";
+import { Notifier } from "@/plugins/notifier";
+import EventCard from "@/components/Event/EventCard.vue";
+
+const router = useRouter();
+
+const props = defineProps<{ reportId: string }>();
+
+const { currentActor } = useCurrentActorClient();
+
+const { result: reportResult, onError: onReportQueryError } = useQuery<{
+  report: IReport;
+}>(REPORT, () => ({
+  id: props.reportId,
+}));
+
+const report = computed(() => reportResult.value?.report);
+
+onReportQueryError(({ graphQLErrors }) => {
+  errors.value = uniq(
+    graphQLErrors.map(({ message }: GraphQLError) => message)
+  );
+});
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Report")),
+});
+
+const notifier = inject<Notifier>("notifier");
+
+const errors = ref<string[]>([]);
+
+const noteContent = ref("");
+
+const {
+  mutate: createReportNoteMutation,
+  onDone: createReportNoteMutationDone,
+  onError: createReportNoteMutationError,
+} = useMutation<{
+  createReportNote: IReportNote;
+}>(CREATE_REPORT_NOTE, () => ({
+  update: (
+    store: ApolloCache<{ createReportNote: IReportNote }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+    const cachedData = store.readQuery<{ report: IReport }>({
+      query: REPORT,
+      variables: { id: report.value?.id },
+    });
+    if (cachedData == null) return;
+    const { report: cachedReport } = cachedData;
+    if (cachedReport === null) {
+      console.error("Cannot update event notes cache, because of null value.");
+      return;
+    }
+    const note = data.createReportNote;
+    note.moderator = currentActor.value;
+
+    cachedReport.notes = cachedReport.notes.concat([note]);
+
+    store.writeQuery({
+      query: REPORT,
+      variables: { id: report.value?.id },
+      data: { report },
+    });
+  },
+}));
+
+createReportNoteMutationDone(() => {
+  noteContent.value = "";
+});
+
+createReportNoteMutationError((error) => {
+  console.error(error);
+});
+
+const dialog = inject<Dialog>("dialog");
+
+const confirmEventDelete = (): void => {
+  dialog?.confirm({
+    title: t("Deleting event"),
+    message: t(
+      "Are you sure you want to <b>delete</b> this event? This action cannot be undone. You may want to engage the discussion with the event creator or edit its event instead."
+    ),
+    confirmText: t("Delete Event"),
+    variant: "danger",
+    hasIcon: true,
+    onConfirm: () => deleteEvent(),
+  });
+};
+
+const confirmCommentDelete = (comment: IComment): void => {
+  dialog?.confirm({
+    title: t("Deleting comment"),
+    message: t(
+      "Are you sure you want to <b>delete</b> this comment? This action cannot be undone."
+    ),
+    confirmText: t("Delete Comment"),
+    variant: "danger",
+    hasIcon: true,
+    onConfirm: () => deleteCommentMutation({ commentId: comment.id }),
+  });
+};
+
+const {
+  mutate: deleteEventMutation,
+  onDone: deleteEventMutationDone,
+  onError: deleteEventMutationError,
+} = useMutation<{ deleteEvent: { id: string } }>(DELETE_EVENT);
+
+deleteEventMutationDone(() => {
+  const eventTitle = report.value?.event?.title;
+  notifier?.success(
+    t("Event {eventTitle} deleted", {
+      eventTitle,
+    })
+  );
+});
+
+deleteEventMutationError((error) => {
+  console.error(error);
+});
+
+const deleteEvent = async (): Promise<void> => {
+  if (!report.value?.event?.id) return;
+
+  deleteEventMutation({ eventId: report.value.event.id });
+};
+
+const {
+  mutate: deleteCommentMutation,
+  onDone: deleteCommentMutationDone,
+  onError: deleteCommentMutationError,
+} = useMutation<{ deleteComment: { id: string } }>(DELETE_COMMENT);
+
+deleteCommentMutationDone(() => {
+  notifier?.success(t("Comment deleted") as string);
+});
+
+deleteCommentMutationError((error) => {
+  console.error(error);
+});
+
+const {
+  mutate: updateReportMutation,
+  onDone: onUpdateReportMutation,
+  onError: onUpdateReportError,
+} = useMutation(UPDATE_REPORT, () => ({
+  update: (
+    store: ApolloCache<{ updateReportStatus: IReport }>,
+    { data }: FetchResult
+  ) => {
+    if (data == null) return;
+    const reportCachedData = store.readQuery<{ report: IReport }>({
+      query: REPORT,
+      variables: { id: report.value?.id },
+    });
+    if (reportCachedData == null) return;
+    const { report: cachedReport } = reportCachedData;
+    if (cachedReport === null) {
+      console.error("Cannot update event notes cache, because of null value.");
+      return;
+    }
+    const updatedReport = {
+      ...cachedReport,
+      status: data.updateReportStatus.status,
+    };
+
+    store.writeQuery({
+      query: REPORT,
+      variables: { id: report.value?.id },
+      data: { report: updatedReport },
+    });
+  },
+}));
+
+onUpdateReportMutation(() => {
+  router.push({ name: RouteName.REPORTS });
+});
+
+onUpdateReportError((error) => {
+  console.error(error);
+});
+
+const updateReport = async (status: ReportStatusEnum): Promise<void> => {
+  updateReportMutation({
+    reportId: report.value?.id,
+    status,
+  });
+};
+</script>
+<style lang="scss" scoped>
+tbody td img.image,
+.note img.image {
+  display: inline;
+  height: 1.5em;
+  vertical-align: text-bottom;
+}
+
+.dialog .modal-card-foot {
+  justify-content: flex-end;
+}
+
+.box a {
+  text-decoration: none;
+  color: inherit;
+}
+
+td > a {
+  text-decoration: none;
+}
+</style>
diff --git a/js/src/views/PageNotFound.vue b/js/src/views/PageNotFound.vue
index 27fab110b..84dcd656e 100644
--- a/js/src/views/PageNotFound.vue
+++ b/js/src/views/PageNotFound.vue
@@ -1,26 +1,22 @@
 <template>
-  <section class="section container has-text-centered not-found">
-    <div class="columns is-vertical is-centered">
-      <div class="column is-half">
+  <section class="container mx-auto pt-4 is-max-desktop max-w-2xl">
+    <div class="">
+      <div class="">
         <picture>
           <source
-            srcset="/img/pics/error-480w.webp 1x, /img/pics/error-1024w.webp 2x"
+            :srcset="`/img/pics/error-480w.webp 1x, /img/pics/error-1024w.webp 2x`"
             type="image/webp"
           />
-          <source
-            srcset="/img/pics/error-480w.jpg 1x, /img/pics/error-1024w.jpg 2x"
-            type="image/jpeg"
-          />
 
           <img
-            :src="`/img/pics/error-480w.jpg`"
+            :src="`/img/pics/error-480w.webp`"
             alt=""
             width="2616"
             height="1698"
             loading="lazy"
           />
         </picture>
-        <h1 class="title">
+        <h1 class="text-4xl mb-3">
           {{ $t("The page you're looking for doesn't exist.") }}
         </h1>
         <p>
@@ -38,9 +34,9 @@
           }}
         </p>
         <!--  The following should just be replaced with the SearchField component but it fails for some reason  -->
-        <form @submit.prevent="enter">
-          <b-field class="search">
-            <b-input
+        <form @submit.prevent="enter" class="flex flex-wrap mt-3">
+          <o-field expanded>
+            <o-input
               expanded
               icon="magnify"
               type="search"
@@ -52,53 +48,35 @@
                 {{ $t("Search") }}
               </button>
             </p>
-          </b-field>
+          </o-field>
         </form>
       </div>
     </div>
   </section>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import BField from "buefy/src/components/field/Field.vue";
+<script lang="ts" setup>
+import { useHead } from "@vueuse/head";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import RouteName from "../router/name";
 
-@Component({
-  components: {
-    BField,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Page not found") as string,
-    };
-  },
-})
-export default class PageNotFound extends Vue {
-  searchText = "";
+const searchText = ref("");
 
-  get searchPlaceHolder(): string {
-    return this.$t("Search events, groups, etc.") as string;
-  }
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Page not found")),
+});
+const router = useRouter();
 
-  async enter(): Promise<void> {
-    await this.$router.push({
-      name: RouteName.SEARCH,
-      query: { term: this.searchText },
-    });
-  }
-}
+const searchPlaceHolder = computed((): string => {
+  return t("Search events, groups, etc.") as string;
+});
+
+const enter = async (): Promise<void> => {
+  await router.push({
+    name: RouteName.SEARCH,
+    query: { term: searchText.value },
+  });
+};
 </script>
-<style lang="scss">
-.container.not-found {
-  margin: auto;
-  background: $white;
-
-  img {
-    margin-top: 3rem;
-  }
-
-  p {
-    margin-bottom: 1em;
-  }
-}
-</style>
diff --git a/js/src/views/Posts/Edit.vue b/js/src/views/Posts/Edit.vue
deleted file mode 100644
index 7719011fc..000000000
--- a/js/src/views/Posts/Edit.vue
+++ /dev/null
@@ -1,406 +0,0 @@
-<template>
-  <div>
-    <form @submit.prevent="publish(false)" v-if="isCurrentActorAGroupModerator">
-      <div class="container section">
-        <breadcrumbs-nav v-if="actualGroup" :links="breadcrumbLinks" />
-        <h1 class="title" v-if="isUpdate === true">
-          {{ $t("Edit post") }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t("Add a new post") }}
-        </h1>
-        <subtitle>{{ $t("General information") }}</subtitle>
-        <picture-upload
-          v-model="pictureFile"
-          :textFallback="$t('Headline picture')"
-          :defaultImage="editablePost.picture"
-        />
-
-        <b-field
-          :label="$t('Title')"
-          label-for="post-title"
-          :type="errors.title ? 'is-danger' : null"
-          :message="errors.title"
-        >
-          <b-input
-            size="is-large"
-            aria-required="true"
-            required
-            v-model="editablePost.title"
-            id="post-title"
-            dir="auto"
-          />
-        </b-field>
-
-        <tag-input v-model="editablePost.tags" />
-
-        <div class="field">
-          <label class="label">{{ $t("Post") }}</label>
-          <p v-if="errors.body" class="help is-danger">{{ errors.body }}</p>
-          <editor v-model="editablePost.body" :aria-label="$t('Post body')" />
-        </div>
-        <subtitle>{{ $t("Who can view this post") }}</subtitle>
-        <fieldset>
-          <legend>
-            {{
-              $t(
-                "When the post is private, you'll need to share the link around."
-              )
-            }}
-          </legend>
-          <div class="field">
-            <b-radio
-              v-model="editablePost.visibility"
-              name="postVisibility"
-              :native-value="PostVisibility.PUBLIC"
-              >{{ $t("Visible everywhere on the web") }}</b-radio
-            >
-          </div>
-          <div class="field">
-            <b-radio
-              v-model="editablePost.visibility"
-              name="postVisibility"
-              :native-value="PostVisibility.UNLISTED"
-              >{{ $t("Only accessible through link") }}</b-radio
-            >
-          </div>
-          <div class="field">
-            <b-radio
-              v-model="editablePost.visibility"
-              name="postVisibility"
-              :native-value="PostVisibility.PRIVATE"
-              >{{ $t("Only accessible to members of the group") }}</b-radio
-            >
-          </div>
-        </fieldset>
-      </div>
-      <nav class="navbar">
-        <div class="container">
-          <div class="navbar-menu">
-            <div class="navbar-end">
-              <span class="navbar-item">
-                <b-button type="is-text" @click="$router.go(-1)">{{
-                  $t("Cancel")
-                }}</b-button>
-              </span>
-              <span class="navbar-item" v-if="this.isUpdate">
-                <b-button
-                  type="is-danger is-outlined"
-                  @click="openDeletePostModal"
-                  >{{ $t("Delete post") }}</b-button
-                >
-              </span>
-              <!-- If an post has been published we can't make it draft anymore -->
-              <span class="navbar-item" v-if="post.draft === true">
-                <b-button type="is-primary" outlined @click="publish(true)">{{
-                  $t("Save draft")
-                }}</b-button>
-              </span>
-              <span class="navbar-item">
-                <b-button type="is-primary" native-type="submit">
-                  <span v-if="isUpdate === false || post.draft === true">{{
-                    $t("Publish")
-                  }}</span>
-
-                  <span v-else>{{ $t("Update post") }}</span>
-                </b-button>
-              </span>
-            </div>
-          </div>
-        </div>
-      </nav>
-    </form>
-    <b-loading
-      v-else-if="$apollo.loading"
-      :is-full-page="false"
-      :active.sync="$apollo.loading"
-      :can-cancel="false"
-    ></b-loading>
-    <div class="container section" v-else>
-      <b-message type="is-danger">
-        {{ $t("Only group moderators can create, edit and delete posts.") }}
-      </b-message>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Prop, Watch } from "vue-property-decorator";
-import { mixins } from "vue-class-component";
-import {
-  buildFileFromIMedia,
-  buildFileVariable,
-  readFileAsync,
-} from "@/utils/image";
-import GroupMixin from "@/mixins/group";
-import { PostVisibility } from "@/types/enums";
-import { CONFIG } from "../../graphql/config";
-import { CREATE_POST, UPDATE_POST } from "../../graphql/post";
-
-import { IPost } from "../../types/post.model";
-import Editor from "../../components/Editor.vue";
-import { displayName, IActor, usernameWithDomain } from "../../types/actor";
-import TagInput from "../../components/Event/TagInput.vue";
-import RouteName from "../../router/name";
-import Subtitle from "../../components/Utils/Subtitle.vue";
-import PictureUpload from "../../components/PictureUpload.vue";
-import { PERSON_STATUS_GROUP } from "@/graphql/actor";
-import { FETCH_GROUP } from "@/graphql/group";
-import PostMixin from "../../mixins/post";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-    group: {
-      query: FETCH_GROUP,
-      variables() {
-        return {
-          name: this.preferredUsername,
-        };
-      },
-      skip() {
-        return !this.preferredUsername;
-      },
-    },
-    person: {
-      query: PERSON_STATUS_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-          group: usernameWithDomain(this.actualGroup),
-        };
-      },
-      skip() {
-        return !this.currentActor?.id || !this.actualGroup?.preferredUsername;
-      },
-    },
-  },
-  components: {
-    Editor,
-    TagInput,
-    Subtitle,
-    PictureUpload,
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.isUpdate
-        ? (this.$t("Edit post") as string)
-        : (this.$t("Add a new post") as string),
-      // all titles will be injected into this template
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class EditPost extends mixins(GroupMixin, PostMixin) {
-  @Prop({ required: false, type: String }) slug: undefined | string;
-
-  @Prop({ required: false, type: String }) preferredUsername!: string;
-
-  @Prop({ type: Boolean, default: false }) isUpdate!: boolean;
-
-  post: IPost = {
-    title: "",
-    body: "",
-    local: true,
-    draft: true,
-    visibility: PostVisibility.PUBLIC,
-    tags: [],
-  };
-
-  PostVisibility = PostVisibility;
-
-  pictureFile: File | null = null;
-
-  errors: Record<string, unknown> = {};
-
-  RouteName = RouteName;
-
-  editablePost: IPost = this.post;
-
-  usernameWithDomain = usernameWithDomain;
-
-  async mounted(): Promise<void> {
-    this.pictureFile = await buildFileFromIMedia(this.post.picture);
-  }
-
-  @Watch("post")
-  async updatePostPicture(oldPost: IPost, newPost: IPost): Promise<void> {
-    if (oldPost.picture !== newPost.picture) {
-      this.pictureFile = await buildFileFromIMedia(this.post.picture);
-    }
-    this.editablePost = { ...this.post };
-  }
-
-  // eslint-disable-next-line consistent-return
-  async publish(draft: boolean): Promise<void> {
-    this.errors = {};
-
-    if (this.isUpdate) {
-      const { data } = await this.$apollo.mutate({
-        mutation: UPDATE_POST,
-        variables: {
-          id: this.editablePost.id,
-          title: this.editablePost.title,
-          body: this.editablePost.body,
-          tags: (this.editablePost.tags || []).map(({ title }) => title),
-          visibility: this.editablePost.visibility,
-          draft,
-          ...(await this.buildPicture()),
-        },
-      });
-      if (data && data.updatePost) {
-        this.$router.push({
-          name: RouteName.POST,
-          params: { slug: data.updatePost.slug },
-        });
-      }
-    } else {
-      try {
-        const { data } = await this.$apollo.mutate({
-          mutation: CREATE_POST,
-          variables: {
-            ...this.editablePost,
-            ...(await this.buildPicture()),
-            tags: (this.editablePost.tags || []).map(({ title }) => title),
-            attributedToId: this.actualGroup.id,
-            draft,
-          },
-        });
-        if (data && data.createPost) {
-          this.$router.push({
-            name: RouteName.POST,
-            params: { slug: data.createPost.slug },
-          });
-        }
-      } catch (error: any) {
-        console.error(error);
-        this.errors = error.graphQLErrors.reduce(
-          (acc: { [key: string]: any }, localError: any) => {
-            acc[localError.field] = EditPost.transformMessage(
-              localError.message
-            );
-            return acc;
-          },
-          {}
-        );
-      }
-    }
-  }
-
-  static transformMessage(message: string[] | string): string | undefined {
-    if (Array.isArray(message) && message.length > 0) {
-      return message[0];
-    }
-    if (typeof message === "string") {
-      return message;
-    }
-    return undefined;
-  }
-
-  async buildPicture(): Promise<Record<string, unknown>> {
-    let obj: { picture?: any } = {};
-    if (this.pictureFile) {
-      const pictureObj = buildFileVariable(this.pictureFile, "picture");
-      obj = { ...obj, ...pictureObj };
-    }
-    try {
-      if (this.editablePost.picture && this.pictureFile) {
-        const oldPictureFile = (await buildFileFromIMedia(
-          this.editablePost.picture
-        )) as File;
-        const oldPictureFileContent = await readFileAsync(oldPictureFile);
-        const newPictureFileContent = await readFileAsync(
-          this.pictureFile as File
-        );
-        if (oldPictureFileContent === newPictureFileContent) {
-          obj.picture = { mediaId: this.editablePost.picture.id };
-        }
-      }
-    } catch (e: any) {
-      console.error(e);
-    }
-    return obj;
-  }
-
-  get actualGroup(): IActor {
-    if (!this.group?.id) {
-      return this.post.attributedTo as IActor;
-    }
-    return this.group;
-  }
-
-  get breadcrumbLinks() {
-    const links = [
-      {
-        name: RouteName.GROUP,
-        params: {
-          preferredUsername: usernameWithDomain(this.actualGroup),
-        },
-        text: displayName(this.actualGroup),
-      },
-      {
-        name: RouteName.POSTS,
-        params: {
-          preferredUsername: usernameWithDomain(this.actualGroup),
-        },
-        text: this.$t("Posts"),
-      },
-    ];
-    if (this.preferredUsername) {
-      links.push({
-        text: this.$t("New post") as string,
-        name: RouteName.POST_EDIT,
-        params: { preferredUsername: usernameWithDomain(this.actualGroup) },
-      });
-    } else {
-      links.push({
-        text: this.$t("Edit post") as string,
-        name: RouteName.POST_EDIT,
-        params: { preferredUsername: usernameWithDomain(this.actualGroup) },
-      });
-    }
-    return links;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.container.section {
-  background: $white;
-}
-form {
-  nav.navbar {
-    min-height: 2rem !important;
-    background: lighten($secondary, 10%);
-
-    .container {
-      min-height: 2rem;
-
-      .navbar-menu,
-      .navbar-end {
-        display: flex !important;
-        background: lighten($secondary, 10%);
-        flex-wrap: wrap;
-      }
-
-      .navbar-end {
-        justify-content: flex-end;
-        @include margin-left(auto);
-      }
-    }
-  }
-  h2 {
-    margin: 15px 0 7.5px;
-  }
-
-  legend {
-    margin-bottom: 0.75rem;
-  }
-}
-
-.breadcrumb li.is-active > span {
-  padding: 0 0.75em;
-}
-</style>
diff --git a/js/src/views/Posts/EditView.vue b/js/src/views/Posts/EditView.vue
new file mode 100644
index 000000000..14b402018
--- /dev/null
+++ b/js/src/views/Posts/EditView.vue
@@ -0,0 +1,407 @@
+<template>
+  <div>
+    <form @submit.prevent="publish(false)" v-if="isCurrentActorAGroupModerator">
+      <div class="container mx-auto">
+        <breadcrumbs-nav v-if="actualGroup" :links="breadcrumbLinks" />
+        <h1 v-if="isUpdate === true">
+          {{ $t("Edit post") }}
+        </h1>
+        <h1 v-else>
+          {{ $t("Add a new post") }}
+        </h1>
+        <h2>{{ $t("General information") }}</h2>
+        <picture-upload
+          v-model="pictureFile"
+          :textFallback="$t('Headline picture')"
+          :defaultImage="editablePost.picture"
+        />
+
+        <o-field
+          :label="$t('Title')"
+          label-for="post-title"
+          :type="errors.title ? 'is-danger' : null"
+          :message="errors.title"
+        >
+          <o-input
+            size="large"
+            aria-required="true"
+            required
+            v-model="editablePost.title"
+            id="post-title"
+            dir="auto"
+          />
+        </o-field>
+
+        <tag-input v-model="editablePost.tags" :fetch-tags="fetchTags" />
+
+        <o-field :label="t('Post')">
+          <p v-if="errors.body" class="help is-danger">{{ errors.body }}</p>
+          <editor
+            class="w-full"
+            v-if="currentActor"
+            v-model="editablePost.body"
+            :aria-label="$t('Post body')"
+            :current-actor="currentActor"
+          />
+        </o-field>
+        <h2 class="mt-2">{{ $t("Who can view this post") }}</h2>
+        <fieldset>
+          <legend>
+            {{
+              $t(
+                "When the post is private, you'll need to share the link around."
+              )
+            }}
+          </legend>
+          <div class="field">
+            <o-radio
+              v-model="editablePost.visibility"
+              name="postVisibility"
+              :native-value="PostVisibility.PUBLIC"
+              >{{ $t("Visible everywhere on the web") }}</o-radio
+            >
+          </div>
+          <div class="field">
+            <o-radio
+              v-model="editablePost.visibility"
+              name="postVisibility"
+              :native-value="PostVisibility.UNLISTED"
+              >{{ $t("Only accessible through link") }}</o-radio
+            >
+          </div>
+          <div class="field">
+            <o-radio
+              v-model="editablePost.visibility"
+              name="postVisibility"
+              :native-value="PostVisibility.PRIVATE"
+              >{{ $t("Only accessible to members of the group") }}</o-radio
+            >
+          </div>
+        </fieldset>
+      </div>
+      <nav class="navbar">
+        <div class="container mx-auto">
+          <div class="navbar-menu flex flex-wrap py-2">
+            <div class="flex flex-wrap justify-end ml-auto gap-1">
+              <o-button variant="text" @click="$router.go(-1)">{{
+                $t("Cancel")
+              }}</o-button>
+              <o-button
+                v-if="isUpdate"
+                variant="danger"
+                outlined
+                @click="openDeletePostModal"
+                >{{ $t("Delete post") }}</o-button
+              >
+              <!-- If an post has been published we can't make it draft anymore -->
+              <o-button
+                variant="primary"
+                v-if="post?.draft === true"
+                outlined
+                @click="publish(true)"
+                >{{ $t("Save draft") }}</o-button
+              >
+              <o-button variant="primary" native-type="submit">
+                <span v-if="isUpdate === false || post?.draft === true">{{
+                  $t("Publish")
+                }}</span>
+
+                <span v-else>{{ $t("Update post") }}</span>
+              </o-button>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </form>
+    <o-loading
+      v-else-if="postLoading"
+      :is-full-page="false"
+      v-model:active="postLoading"
+      :can-cancel="false"
+    ></o-loading>
+    <div class="container mx-auto" v-else>
+      <o-notification variant="danger">
+        {{ $t("Only group moderators can create, edit and delete posts.") }}
+      </o-notification>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  buildFileFromIMedia,
+  buildFileVariable,
+  readFileAsync,
+} from "@/utils/image";
+import { MemberRole, PostVisibility } from "@/types/enums";
+import {
+  CREATE_POST,
+  DELETE_POST,
+  FETCH_POST,
+  UPDATE_POST,
+} from "../../graphql/post";
+
+import { IPost } from "../../types/post.model";
+import Editor from "../../components/TextEditor.vue";
+import { displayName, IActor, usernameWithDomain } from "../../types/actor";
+import TagInput from "../../components/Event/TagInput.vue";
+import RouteName from "../../router/name";
+import PictureUpload from "../../components/PictureUpload.vue";
+import { useGroup } from "@/composition/apollo/group";
+import {
+  useCurrentActorClient,
+  usePersonStatusGroup,
+} from "@/composition/apollo/actor";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { fetchTags } from "@/composition/apollo/tags";
+import { Dialog } from "@/plugins/dialog";
+
+const props = withDefaults(
+  defineProps<{
+    slug?: string;
+    preferredUsername?: string;
+    isUpdate?: boolean;
+  }>(),
+  { isUpdate: false }
+);
+
+const { currentActor } = useCurrentActorClient();
+const { group } = useGroup(props.preferredUsername);
+
+const { result: postResult, loading: postLoading } = useQuery<{
+  post: IPost;
+}>(FETCH_POST, () => ({ slug: props.slug }));
+
+const post = computed(() => postResult.value?.post);
+
+const pictureFile = ref<File | null>(null);
+const errors = ref<Record<string, unknown>>({});
+const editablePost = ref<IPost>({
+  title: "",
+  body: "",
+  local: true,
+  draft: true,
+  visibility: PostVisibility.PUBLIC,
+  tags: [],
+});
+
+onMounted(async () => {
+  pictureFile.value = await buildFileFromIMedia(post.value?.picture);
+});
+
+watch(post, async (newPost: IPost | undefined, oldPost: IPost | undefined) => {
+  if (oldPost?.picture !== newPost?.picture) {
+    pictureFile.value = await buildFileFromIMedia(post.value?.picture);
+  }
+  if (newPost) {
+    editablePost.value = { ...newPost };
+  }
+});
+
+const router = useRouter();
+
+const { mutate: updatePost, onDone: onUpdateDone } = useMutation<{
+  updatePost: IPost;
+}>(UPDATE_POST);
+const {
+  mutate: createPost,
+  onDone: onCreateDone,
+  onError: onCreateError,
+} = useMutation<{
+  createPost: IPost;
+}>(CREATE_POST);
+
+onUpdateDone(({ data }) => {
+  if (data && data.updatePost) {
+    router.push({
+      name: RouteName.POST,
+      params: { slug: data.updatePost.slug },
+    });
+  }
+});
+
+onCreateDone(({ data }) => {
+  if (data && data.createPost) {
+    router.push({
+      name: RouteName.POST,
+      params: { slug: data.createPost.slug },
+    });
+  }
+});
+
+onCreateError((error) => {
+  console.error(error);
+  errors.value = error.graphQLErrors.reduce(
+    (acc: { [key: string]: any }, localError: any) => {
+      acc[localError.field] = transformMessage(localError.message);
+      return acc;
+    },
+    {}
+  );
+});
+
+const publish = async (draft: boolean): Promise<void> => {
+  errors.value = {};
+
+  if (props.isUpdate) {
+    updatePost({
+      id: editablePost.value?.id,
+      title: editablePost.value?.title,
+      body: editablePost.value?.body,
+      tags: (editablePost.value?.tags || []).map(({ title }) => title),
+      visibility: editablePost.value?.visibility,
+      draft,
+      ...(await buildPicture()),
+    });
+  } else {
+    createPost({
+      ...editablePost.value,
+      ...(await buildPicture()),
+      tags: (editablePost.value?.tags ?? []).map(({ title }) => title),
+      attributedToId: actualGroup.value.id,
+      draft,
+    });
+  }
+};
+
+const transformMessage = (message: string[] | string): string | undefined => {
+  if (Array.isArray(message) && message.length > 0) {
+    return message[0];
+  }
+  if (typeof message === "string") {
+    return message;
+  }
+  return undefined;
+};
+
+const buildPicture = async (): Promise<Record<string, unknown>> => {
+  let obj: { picture?: any } = {};
+  if (pictureFile.value) {
+    const pictureObj = buildFileVariable(pictureFile.value, "picture");
+    obj = { ...obj, ...pictureObj };
+  }
+  try {
+    if (editablePost.value?.picture && pictureFile.value) {
+      const oldPictureFile = (await buildFileFromIMedia(
+        editablePost.value.picture
+      )) as File;
+      const oldPictureFileContent = await readFileAsync(oldPictureFile);
+      const newPictureFileContent = await readFileAsync(
+        pictureFile.value as File
+      );
+      if (oldPictureFileContent === newPictureFileContent) {
+        obj.picture = { mediaId: editablePost.value.picture.id };
+      }
+    }
+  } catch (e: any) {
+    console.error(e);
+  }
+  return obj;
+};
+
+const actualGroup = computed((): IActor => {
+  if (!group.value?.id) {
+    return post.value?.attributedTo as IActor;
+  }
+  return group.value;
+});
+
+const actualPreferredUsername = computed(() =>
+  usernameWithDomain(actualGroup.value)
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+const breadcrumbLinks = computed(() => {
+  const links = [
+    {
+      name: RouteName.GROUP,
+      params: {
+        preferredUsername: usernameWithDomain(actualGroup.value),
+      },
+      text: displayName(actualGroup.value),
+    },
+    {
+      name: RouteName.POSTS,
+      params: {
+        preferredUsername: usernameWithDomain(actualGroup.value),
+      },
+      text: t("Posts"),
+    },
+  ];
+  if (props.preferredUsername) {
+    links.push({
+      text: t("New post") as string,
+      name: RouteName.POST_EDIT,
+      params: { preferredUsername: usernameWithDomain(actualGroup.value) },
+    });
+  } else {
+    links.push({
+      text: t("Edit post") as string,
+      name: RouteName.POST_EDIT,
+      params: { preferredUsername: usernameWithDomain(actualGroup.value) },
+    });
+  }
+  return links;
+});
+
+const isCurrentActorAGroupModerator = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+  ]);
+});
+
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
+  return (
+    personMemberships.value?.total > 0 &&
+    roles.includes(personMemberships.value?.elements[0].role)
+  );
+};
+
+const { person } = usePersonStatusGroup(actualPreferredUsername);
+
+const personMemberships = computed(
+  () => person.value?.memberships ?? { total: 0, elements: [] }
+);
+
+const dialog = inject<Dialog>("dialog");
+
+const openDeletePostModal = async (): Promise<void> => {
+  dialog?.confirm({
+    variant: "danger",
+    title: t("Delete post"),
+    message: t(
+      "Are you sure you want to delete this post? This action cannot be reverted."
+    ),
+    onConfirm: () =>
+      deletePost({
+        id: post.value?.id,
+      }),
+  });
+};
+
+const { mutate: deletePost, onDone: onDeletePostDone } =
+  useMutation(DELETE_POST);
+
+onDeletePostDone(({ data }) => {
+  if (data && post.value?.attributedTo) {
+    router.push({
+      name: RouteName.POSTS,
+      params: {
+        preferredUsername: usernameWithDomain(post.value?.attributedTo),
+      },
+    });
+  }
+});
+
+useHead({
+  title: computed(() =>
+    props.isUpdate ? t("Edit post") : t("Add a new post")
+  ),
+});
+</script>
diff --git a/js/src/views/Posts/List.vue b/js/src/views/Posts/List.vue
deleted file mode 100644
index 50bd858f7..000000000
--- a/js/src/views/Posts/List.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <div class="container section" v-if="group">
-    <breadcrumbs-nav
-      :links="[
-        {
-          name: RouteName.GROUP,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: displayName(group),
-        },
-        {
-          name: RouteName.POSTS,
-          params: { preferredUsername: usernameWithDomain(group) },
-          text: $t('Posts'),
-        },
-      ]"
-    />
-    <section>
-      <div class="intro">
-        <p v-if="isCurrentActorMember">
-          {{
-            $t(
-              "A place to publish something to the whole world, your community or just your group members."
-            )
-          }}
-        </p>
-        <p v-if="isCurrentActorMember">
-          {{ $t("Only group moderators can create, edit and delete posts.") }}
-        </p>
-        <router-link
-          v-if="isCurrentActorAGroupModerator"
-          :to="{
-            name: RouteName.POST_CREATE,
-            params: { preferredUsername: usernameWithDomain(group) },
-          }"
-          class="button is-primary"
-          >{{ $t("+ Create a post") }}</router-link
-        >
-      </div>
-      <div class="post-list">
-        <multi-post-list-item
-          :posts="group.posts.elements"
-          :isCurrentActorMember="isCurrentActorMember"
-        />
-      </div>
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <b-message
-        v-if="group.posts.elements.length === 0 && $apollo.loading === false"
-        type="is-danger"
-      >
-        {{ $t("No posts found") }}
-      </b-message>
-      <b-pagination
-        :total="group.posts.total"
-        v-model="postsPage"
-        :per-page="POSTS_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')"
-      >
-      </b-pagination>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
-import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
-import { mixins } from "vue-class-component";
-import GroupMixin from "@/mixins/group";
-import { IMember } from "@/types/actor/member.model";
-import { FETCH_GROUP_POSTS } from "../../graphql/post";
-import { Paginate } from "../../types/paginate";
-import { IPost } from "../../types/post.model";
-import { usernameWithDomain, displayName } from "../../types/actor";
-import RouteName from "../../router/name";
-import MultiPostListItem from "../../components/Post/MultiPostListItem.vue";
-
-const POSTS_PAGE_LIMIT = 10;
-
-@Component({
-  apollo: {
-    currentActor: CURRENT_ACTOR_CLIENT,
-    memberships: {
-      query: PERSON_MEMBERSHIPS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-        };
-      },
-      update: (data) => data.person.memberships.elements,
-      skip() {
-        return !this.currentActor || !this.currentActor.id;
-      },
-    },
-    group: {
-      query: FETCH_GROUP_POSTS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          preferredUsername: this.preferredUsername,
-          page: this.postsPage,
-          limit: POSTS_PAGE_LIMIT,
-        };
-      },
-      skip() {
-        return !this.preferredUsername;
-      },
-    },
-  },
-  components: {
-    MultiPostListItem,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { group } = this;
-    return {
-      title: this.$t("{group} posts", {
-        group: group?.name || usernameWithDomain(group),
-      }) as string,
-    };
-  },
-})
-export default class PostList extends mixins(GroupMixin) {
-  @Prop({ required: true, type: String }) preferredUsername!: string;
-
-  posts!: Paginate<IPost>;
-
-  memberships!: IMember[];
-
-  postsPage = 1;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-
-  POSTS_PAGE_LIMIT = POSTS_PAGE_LIMIT;
-
-  get isCurrentActorMember(): boolean {
-    if (!this.group || !this.memberships) return false;
-    return this.memberships
-      .map(({ parent: { id } }) => id)
-      .includes(this.group.id);
-  }
-}
-</script>
-<style lang="scss" scoped>
-.container.section {
-  background: $white;
-}
-
-section {
-  div.intro,
-  .post-list {
-    margin-bottom: 1rem;
-  }
-}
-</style>
diff --git a/js/src/views/Posts/ListView.vue b/js/src/views/Posts/ListView.vue
new file mode 100644
index 000000000..85ec2f203
--- /dev/null
+++ b/js/src/views/Posts/ListView.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="container mx-auto section" v-if="group">
+    <breadcrumbs-nav
+      :links="[
+        {
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: displayName(group),
+        },
+        {
+          name: RouteName.POSTS,
+          params: { preferredUsername: usernameWithDomain(group) },
+          text: $t('Posts'),
+        },
+      ]"
+    />
+    <section>
+      <div class="intro">
+        <p v-if="isCurrentActorMember">
+          {{
+            $t(
+              "A place to publish something to the whole world, your community or just your group members."
+            )
+          }}
+        </p>
+        <p v-if="isCurrentActorMember">
+          {{ $t("Only group moderators can create, edit and delete posts.") }}
+        </p>
+        <o-button
+          tag="router-link"
+          v-if="isCurrentActorAGroupModerator"
+          :to="{
+            name: RouteName.POST_CREATE,
+            params: { preferredUsername: usernameWithDomain(group) },
+          }"
+          variant="primary"
+          class="my-2"
+          >{{ $t("+ Create a post") }}</o-button
+        >
+      </div>
+      <div class="post-list">
+        <multi-post-list-item
+          :posts="group.posts.elements"
+          :isCurrentActorMember="isCurrentActorMember"
+        />
+      </div>
+      <o-loading v-model:active="loading"></o-loading>
+      <o-notification
+        v-if="
+          group.posts.elements.length === 0 &&
+          membershipsLoading === false &&
+          groupLoading === false
+        "
+        variant="danger"
+      >
+        {{ $t("No posts found") }}
+      </o-notification>
+      <o-pagination
+        :total="group.posts.total"
+        v-model="postsPage"
+        :per-page="POSTS_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>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
+import { FETCH_GROUP_POSTS } from "../../graphql/post";
+import {
+  usernameWithDomain,
+  displayName,
+  IPerson,
+  IGroup,
+} from "../../types/actor";
+import RouteName from "../../router/name";
+import MultiPostListItem from "../../components/Post/MultiPostListItem.vue";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import { useHead } from "@vueuse/head";
+import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import { useI18n } from "vue-i18n";
+import { MemberRole } from "@/types/enums";
+
+const props = defineProps<{ preferredUsername: string }>();
+
+const postsPage = useRouteQuery("page", 1, integerTransformer);
+const POSTS_PAGE_LIMIT = 10;
+
+const { currentActor } = useCurrentActorClient();
+
+const { result: membershipsResult, loading: membershipsLoading } = useQuery<{
+  person: Pick<IPerson, "memberships">;
+}>(
+  PERSON_MEMBERSHIPS,
+  () => ({ id: currentActor.value?.id }),
+  () => ({ enabled: currentActor.value?.id !== undefined })
+);
+const memberships = computed(() => membershipsResult.value?.person.memberships);
+
+const { result: groupPostsResult, loading: groupLoading } = useQuery<{
+  group: IGroup;
+}>(
+  FETCH_GROUP_POSTS,
+  () => ({
+    preferredUsername: props.preferredUsername,
+    page: postsPage.value,
+    limit: POSTS_PAGE_LIMIT,
+  }),
+  () => ({ enabled: props.preferredUsername !== undefined })
+);
+
+const group = computed(() => groupPostsResult.value?.group);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() =>
+    t("{group} posts", {
+      group: displayName(group.value),
+    })
+  ),
+});
+
+const loading = computed(() => membershipsLoading.value || groupLoading.value);
+
+const isCurrentActorMember = computed((): boolean => {
+  if (!group.value || !memberships.value) return false;
+  return memberships.value.elements
+    .map(({ parent: { id } }) => id)
+    .includes(group.value.id);
+});
+
+const isCurrentActorAGroupModerator = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+  ]);
+});
+
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
+  return (
+    memberships.value !== undefined &&
+    memberships.value?.total > 0 &&
+    roles.includes(memberships.value?.elements[0].role)
+  );
+};
+</script>
diff --git a/js/src/views/Posts/Post.vue b/js/src/views/Posts/Post.vue
deleted file mode 100644
index 4700d7c37..000000000
--- a/js/src/views/Posts/Post.vue
+++ /dev/null
@@ -1,498 +0,0 @@
-<template>
-  <article class="container post" v-if="post">
-    <header>
-      <div class="banner-container">
-        <lazy-image-wrapper :picture="post.picture" />
-      </div>
-      <div class="heading-section">
-        <div class="heading-wrapper" dir="auto">
-          <div class="title-metadata">
-            <div class="title-wrapper">
-              <b-tag
-                class="mr-2"
-                type="is-warning"
-                size="is-medium"
-                v-if="post.draft"
-                >{{ $t("Draft") }}</b-tag
-              >
-              <h1 class="title text-3xl" :lang="post.language">
-                {{ post.title }}
-              </h1>
-            </div>
-            <p class="metadata">
-              <router-link
-                slot="author"
-                :to="{
-                  name: RouteName.GROUP,
-                  params: {
-                    preferredUsername: usernameWithDomain(post.attributedTo),
-                  },
-                }"
-              >
-                <actor-inline :actor="post.attributedTo" />
-              </router-link>
-              <span class="published has-text-grey-dark" v-if="!post.draft">
-                <b-icon icon="clock" size="is-small" />
-                {{ post.publishAt | formatDateTimeString }}
-              </span>
-              <span
-                class="published has-text-grey-dark"
-                :title="
-                  $options.filters.formatDateTimeString(
-                    post.updatedAt,
-                    undefined,
-                    true,
-                    'short'
-                  )
-                "
-                v-else
-              >
-                <b-icon icon="clock" size="is-small" />
-                {{
-                  $t("Edited {relative_time} ago", {
-                    relative_time: formatDistanceToNowStrict(
-                      new Date(post.updatedAt),
-                      {
-                        locale: $dateFnsLocale,
-                      }
-                    ),
-                  })
-                }}
-              </span>
-              <span
-                v-if="post.visibility === PostVisibility.UNLISTED"
-                class="has-text-grey-dark"
-              >
-                <b-icon icon="link" size="is-small" />
-                {{ $t("Accessible only by link") }}
-              </span>
-              <span
-                v-else-if="post.visibility === PostVisibility.PRIVATE"
-                class="has-text-grey-dark"
-              >
-                <b-icon icon="lock" size="is-small" />
-                {{
-                  $t("Accessible only to members", {
-                    group: post.attributedTo.name,
-                  })
-                }}
-              </span>
-            </p>
-          </div>
-          <b-dropdown position="is-bottom-left" aria-role="list">
-            <b-button slot="trigger" role="button" icon-right="dots-horizontal">
-              {{ $t("Actions") }}
-            </b-button>
-            <b-dropdown-item
-              aria-role="listitem"
-              has-link
-              v-if="
-                currentActor.id === post.author.id ||
-                isCurrentActorAGroupModerator
-              "
-            >
-              <router-link
-                :to="{
-                  name: RouteName.POST_EDIT,
-                  params: { slug: post.slug },
-                }"
-                >{{ $t("Edit") }} <b-icon icon="pencil"
-              /></router-link>
-            </b-dropdown-item>
-            <b-dropdown-item
-              aria-role="listitem"
-              v-if="
-                currentActor.id === post.author.id ||
-                isCurrentActorAGroupModerator
-              "
-              @click="openDeletePostModal"
-              @keyup.enter="openDeletePostModal"
-            >
-              {{ $t("Delete") }}
-              <b-icon icon="delete" />
-            </b-dropdown-item>
-
-            <hr
-              role="presentation"
-              class="dropdown-divider"
-              aria-role="menuitem"
-              v-if="
-                currentActor.id === post.author.id ||
-                isCurrentActorAGroupModerator
-              "
-            />
-            <b-dropdown-item
-              aria-role="listitem"
-              v-if="!post.draft"
-              @click="triggerShare()"
-              @keyup.enter="triggerShare()"
-            >
-              <span>
-                {{ $t("Share this event") }}
-                <b-icon icon="share" />
-              </span>
-            </b-dropdown-item>
-
-            <b-dropdown-item
-              aria-role="listitem"
-              v-if="ableToReport"
-              @click="isReportModalActive = true"
-              @keyup.enter="isReportModalActive = true"
-            >
-              <span>
-                {{ $t("Report") }}
-                <b-icon icon="flag" />
-              </span>
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
-      </div>
-    </header>
-    <b-message
-      :title="$t('Members-only post')"
-      class="mx-4"
-      type="is-warning"
-      :closable="false"
-      v-if="
-        !$apollo.loading &&
-        isInstanceModerator &&
-        !isCurrentActorAGroupMember &&
-        post.visibility === PostVisibility.PRIVATE
-      "
-    >
-      {{
-        $t(
-          "This post is accessible only for members. You have access to it for moderation purposes only because you are an instance moderator."
-        )
-      }}
-    </b-message>
-
-    <section
-      v-html="post.body"
-      dir="auto"
-      class="content"
-      :lang="post.language"
-    />
-    <section class="tags" dir="auto">
-      <router-link
-        v-for="tag in post.tags"
-        :key="tag.title"
-        :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
-      >
-        <tag>{{ tag.title }}</tag>
-      </router-link>
-    </section>
-    <b-modal
-      :close-button-aria-label="$t('Close')"
-      :active.sync="isReportModalActive"
-      has-modal-card
-      ref="reportModal"
-    >
-      <report-modal
-        :on-confirm="reportPost"
-        :title="$t('Report this post')"
-        :outside-domain="groupDomain"
-        @close="$refs.reportModal.close()"
-      />
-    </b-modal>
-    <b-modal
-      :active.sync="isShareModalActive"
-      has-modal-card
-      ref="shareModal"
-      :close-button-aria-label="$t('Close')"
-    >
-      <share-post-modal :post="post" />
-    </b-modal>
-  </article>
-</template>
-
-<script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
-import { mixins } from "vue-class-component";
-import GroupMixin from "@/mixins/group";
-import { ICurrentUserRole, PostVisibility } from "@/types/enums";
-import { IMember } from "@/types/actor/member.model";
-import {
-  CURRENT_ACTOR_CLIENT,
-  PERSON_MEMBERSHIPS,
-  PERSON_STATUS_GROUP,
-} from "../../graphql/actor";
-import { usernameWithDomain } from "../../types/actor";
-import RouteName from "../../router/name";
-import Tag from "../../components/Tag.vue";
-import LazyImageWrapper from "../../components/Image/LazyImageWrapper.vue";
-import ActorInline from "../../components/Account/ActorInline.vue";
-import { formatDistanceToNowStrict } from "date-fns";
-import { CURRENT_USER_CLIENT } from "@/graphql/user";
-import { ICurrentUser } from "@/types/current-user.model";
-import { CONFIG } from "@/graphql/config";
-import { IConfig } from "@/types/config.model";
-import SharePostModal from "../../components/Post/SharePostModal.vue";
-import { IReport } from "@/types/report.model";
-import { CREATE_REPORT } from "@/graphql/report";
-import ReportModal from "../../components/Report/ReportModal.vue";
-import PostMixin from "../../mixins/post";
-
-@Component({
-  apollo: {
-    config: CONFIG,
-    currentUser: CURRENT_USER_CLIENT,
-    currentActor: CURRENT_ACTOR_CLIENT,
-    memberships: {
-      query: PERSON_MEMBERSHIPS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-        };
-      },
-      update: (data) => data.person.memberships.elements,
-      skip() {
-        return !this.currentActor || !this.currentActor.id;
-      },
-    },
-    person: {
-      query: PERSON_STATUS_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.currentActor.id,
-          group: usernameWithDomain(this.post.attributedTo),
-        };
-      },
-      skip() {
-        return (
-          !this.currentActor ||
-          !this.currentActor.id ||
-          !this.post?.attributedTo
-        );
-      },
-    },
-  },
-  components: {
-    Tag,
-    LazyImageWrapper,
-    ActorInline,
-    SharePostModal,
-    ReportModal,
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.post ? this.post.title : "",
-      // all titles will be injected into this template
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      titleTemplate: this.post ? "%s | Mobilizon" : "Mobilizon",
-    };
-  },
-})
-export default class Post extends mixins(GroupMixin, PostMixin) {
-  @Prop({ required: true, type: String }) slug!: string;
-
-  memberships!: IMember[];
-
-  config!: IConfig;
-
-  RouteName = RouteName;
-
-  currentUser!: ICurrentUser;
-
-  usernameWithDomain = usernameWithDomain;
-
-  formatDistanceToNowStrict = formatDistanceToNowStrict;
-
-  PostVisibility = PostVisibility;
-
-  isShareModalActive = false;
-
-  isReportModalActive = false;
-
-  get isCurrentActorMember(): boolean {
-    if (!this.post.attributedTo || !this.memberships) return false;
-    return this.memberships
-      .map(({ parent: { id } }) => id)
-      .includes(this.post.attributedTo.id);
-  }
-
-  get isInstanceModerator(): boolean {
-    return [
-      ICurrentUserRole.ADMINISTRATOR,
-      ICurrentUserRole.MODERATOR,
-    ].includes(this.currentUser.role);
-  }
-
-  get ableToReport(): boolean {
-    return (
-      this.config &&
-      (this.currentActor.id != null || this.config.anonymous.reports.allowed)
-    );
-  }
-
-  triggerShare(): void {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-start
-    if (navigator.share) {
-      navigator
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        .share({
-          title: this.post.title,
-          url: this.post.url,
-        })
-        .then(() => console.log("Successful share"))
-        .catch((error: any) => console.log("Error sharing", error));
-    } else {
-      this.isShareModalActive = true;
-      // send popup
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-end
-  }
-
-  async reportPost(content: string, forward: boolean): Promise<void> {
-    this.isReportModalActive = false;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.$refs.reportModal.close();
-    const postTitle = this.post.title;
-
-    try {
-      await this.$apollo.mutate<IReport>({
-        mutation: CREATE_REPORT,
-        variables: {
-          postId: this.post.id,
-          reportedId: this.post.attributedTo?.id,
-          content,
-          forward,
-        },
-      });
-      this.$notifier.success(
-        this.$t("Post {eventTitle} reported", { postTitle }) as string
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  }
-  get groupDomain(): string | undefined | null {
-    return this.post.attributedTo?.domain;
-  }
-}
-</script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-article.post {
-  background: $white !important;
-  header {
-    display: flex;
-    flex-direction: column;
-    .banner-container {
-      display: flex;
-      justify-content: center;
-      height: 30vh;
-    }
-
-    .heading-section {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      margin-bottom: 2rem;
-
-      .heading-wrapper {
-        padding: 15px 10px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-
-        .title-metadata {
-          min-width: 300px;
-          flex: 20;
-
-          .title-wrapper {
-            display: inline;
-
-            .tag {
-              height: 38px;
-              vertical-align: text-bottom;
-            }
-
-            & > h1 {
-              display: inline;
-            }
-          }
-
-          p.metadata {
-            margin-top: 10px;
-            display: flex;
-            justify-content: flex-start;
-            flex-wrap: wrap;
-            flex-direction: column;
-
-            *:not(:first-child) {
-              @include padding-left(5px);
-            }
-          }
-        }
-        p.buttons {
-          flex: 1;
-        }
-      }
-
-      h1.title {
-        margin: 0;
-        font-weight: 500;
-        font-family: "Roboto", "Helvetica", "Arial", serif;
-      }
-
-      .authors {
-        display: inline-block;
-      }
-
-      &::after {
-        height: 0.2rem;
-        content: " ";
-        display: block;
-        background-color: $purple-1;
-      }
-
-      .buttons {
-        justify-content: center;
-      }
-    }
-  }
-
-  & > section {
-    margin: 0 2rem;
-
-    &.content {
-      font-size: 1.1rem;
-    }
-
-    &.tags {
-      padding-bottom: 5rem;
-
-      a {
-        text-decoration: none;
-      }
-      span {
-        &.tag {
-          margin: 0 2px;
-        }
-      }
-    }
-  }
-
-  margin: 0 auto;
-
-  a.dropdown-item,
-  .dropdown .dropdown-menu .has-link a,
-  button.dropdown-item {
-    white-space: nowrap;
-    width: 100%;
-    @include padding-right(1rem);
-    text-align: right;
-  }
-}
-</style>
diff --git a/js/src/views/Posts/PostView.vue b/js/src/views/Posts/PostView.vue
new file mode 100644
index 000000000..8ec1b0fb6
--- /dev/null
+++ b/js/src/views/Posts/PostView.vue
@@ -0,0 +1,488 @@
+<template>
+  <article class="container mx-auto post" v-if="post">
+    <header>
+      <div class="flex justify-center">
+        <lazy-image-wrapper :picture="post.picture" />
+      </div>
+      <div class="relative flex flex-col">
+        <div
+          class="px-2 py-3 flex flex-wrap justify-center items-center"
+          dir="auto"
+        >
+          <div class="flex-1">
+            <div class="inline">
+              <tag
+                class="mr-2"
+                variant="warning"
+                size="medium"
+                v-if="post.draft"
+                >{{ $t("Draft") }}</tag
+              >
+              <h1 class="inline" :lang="post.language">
+                {{ post.title }}
+              </h1>
+            </div>
+            <p class="mt-2 flex flex-col flex-wrap justify-start">
+              <router-link
+                :to="{
+                  name: RouteName.GROUP,
+                  params: {
+                    preferredUsername: usernameWithDomain(post.attributedTo),
+                  },
+                }"
+              >
+                <actor-inline
+                  v-if="post.attributedTo"
+                  :actor="post.attributedTo"
+                />
+              </router-link>
+              <span
+                class="inline-flex gap-2 items-center mt-2"
+                v-if="!post.draft && post.publishAt"
+              >
+                <Clock :size="16" />
+                {{ formatDateTimeString(post.publishAt) }}
+              </span>
+              <span
+                class="inline-flex gap-2 items-center mt-2"
+                :title="
+                  formatDateTimeString(post.updatedAt, undefined, true, 'short')
+                "
+                v-else-if="post.updatedAt"
+              >
+                <Clock :size="16" />
+                {{
+                  $t("Edited {relative_time} ago", {
+                    relative_time: formatDistanceToNowStrict(
+                      new Date(post.updatedAt),
+                      {
+                        locale: dateFnsLocale,
+                      }
+                    ),
+                  })
+                }}
+              </span>
+              <span v-if="post.visibility === PostVisibility.UNLISTED" class="">
+                <o-icon icon="link" size="small" />
+                {{ $t("Accessible only by link") }}
+              </span>
+              <span
+                v-else-if="post.visibility === PostVisibility.PRIVATE"
+                class=""
+              >
+                <Lock :size="16" />
+                {{
+                  $t("Accessible only to members", {
+                    group: post.attributedTo?.name,
+                  })
+                }}
+              </span>
+            </p>
+          </div>
+          <o-dropdown position="bottom-left" aria-role="list">
+            <template #trigger>
+              <o-button role="button" icon-right="dots-horizontal">
+                {{ $t("Actions") }}
+              </o-button>
+            </template>
+            <o-dropdown-item
+              aria-role="listitem"
+              has-link
+              v-if="
+                currentActor?.id === post?.author?.id ||
+                isCurrentActorAGroupModerator
+              "
+            >
+              <router-link
+                :to="{
+                  name: RouteName.POST_EDIT,
+                  params: { slug: post.slug },
+                }"
+                >{{ $t("Edit") }} <o-icon icon="pencil"
+              /></router-link>
+            </o-dropdown-item>
+            <o-dropdown-item
+              aria-role="listitem"
+              v-if="
+                currentActor?.id === post?.author?.id ||
+                isCurrentActorAGroupModerator
+              "
+              @click="openDeletePostModal"
+              @keyup.enter="openDeletePostModal"
+            >
+              {{ $t("Delete") }}
+              <o-icon icon="delete" />
+            </o-dropdown-item>
+
+            <hr
+              role="presentation"
+              class="dropdown-divider"
+              aria-role="menuitem"
+              v-if="
+                currentActor?.id === post?.author?.id ||
+                isCurrentActorAGroupModerator
+              "
+            />
+            <o-dropdown-item
+              aria-role="listitem"
+              v-if="!post.draft"
+              @click="triggerShare()"
+              @keyup.enter="triggerShare()"
+            >
+              <span>
+                {{ $t("Share this event") }}
+                <o-icon icon="share" />
+              </span>
+            </o-dropdown-item>
+
+            <o-dropdown-item
+              aria-role="listitem"
+              v-if="ableToReport"
+              @click="isReportModalActive = true"
+              @keyup.enter="isReportModalActive = true"
+            >
+              <span>
+                {{ $t("Report") }}
+                <o-icon icon="flag" />
+              </span>
+            </o-dropdown-item>
+          </o-dropdown>
+        </div>
+      </div>
+    </header>
+    <o-notification
+      :title="$t('Members-only post')"
+      class="mx-4"
+      variant="warning"
+      :closable="false"
+      v-if="
+        !membershipsLoading &&
+        !postLoading &&
+        isInstanceModerator &&
+        !isCurrentActorAGroupMember &&
+        post.visibility === PostVisibility.PRIVATE
+      "
+    >
+      {{
+        $t(
+          "This post is accessible only for members. You have access to it for moderation purposes only because you are an instance moderator."
+        )
+      }}
+    </o-notification>
+
+    <section
+      v-html="post.body"
+      dir="auto"
+      class="px-1 prose lg:prose-xl prose-p:mt-6 dark:prose-invert"
+      :lang="post.language"
+    />
+    <section class="flex gap-2 my-6" dir="auto">
+      <router-link
+        v-for="tag in post.tags"
+        :key="tag.title"
+        :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
+      >
+        <tag>{{ tag.title }}</tag>
+      </router-link>
+    </section>
+    <o-modal
+      :close-button-aria-label="$t('Close')"
+      v-model:active="isReportModalActive"
+      has-modal-card
+      ref="reportModal"
+    >
+      <ReportModal
+        :on-confirm="reportPost"
+        :title="$t('Report this post')"
+        :outside-domain="groupDomain"
+        @close="isReportModalActive = false"
+      />
+    </o-modal>
+    <o-modal
+      v-model:active="isShareModalActive"
+      has-modal-card
+      ref="shareModal"
+      :close-button-aria-label="$t('Close')"
+    >
+      <share-post-modal :post="post" />
+    </o-modal>
+  </article>
+</template>
+
+<script lang="ts" setup>
+import { ICurrentUserRole, MemberRole, PostVisibility } from "@/types/enums";
+import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
+import {
+  IGroup,
+  IPerson,
+  usernameWithDomain,
+  displayName,
+} from "@/types/actor";
+import RouteName from "@/router/name";
+import Tag from "@/components/TagElement.vue";
+import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
+import ActorInline from "@/components/Account/ActorInline.vue";
+import { formatDistanceToNowStrict, Locale } from "date-fns";
+import SharePostModal from "@/components/Post/SharePostModal.vue";
+import ReportModal from "@/components/Report/ReportModal.vue";
+import { useAnonymousReportsConfig } from "@/composition/apollo/config";
+import {
+  useCurrentActorClient,
+  usePersonStatusGroup,
+} from "@/composition/apollo/actor";
+import { useCurrentUserClient } from "@/composition/apollo/user";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, inject, ref } from "vue";
+import { IPost } from "@/types/post.model";
+import { DELETE_POST, FETCH_POST } from "@/graphql/post";
+import { useHead } from "@vueuse/head";
+import { formatDateTimeString } from "@/filters/datetime";
+import { useRouter } from "vue-router";
+import { useCreateReport } from "@/composition/apollo/report";
+import Clock from "vue-material-design-icons/Clock.vue";
+import Lock from "vue-material-design-icons/Lock.vue";
+import { Dialog } from "@/plugins/dialog";
+import { useI18n } from "vue-i18n";
+import { Notifier } from "@/plugins/notifier";
+
+const props = defineProps<{
+  slug: string;
+}>();
+
+const { anonymousReportsConfig } = useAnonymousReportsConfig();
+const { currentUser } = useCurrentUserClient();
+const { currentActor } = useCurrentActorClient();
+
+const { result: membershipsResult, loading: membershipsLoading } = useQuery<{
+  person: Pick<IPerson, "memberships">;
+}>(
+  PERSON_MEMBERSHIPS,
+  () => ({ id: currentActor.value?.id }),
+  () => ({ enabled: currentActor.value?.id !== undefined })
+);
+const memberships = computed(() => membershipsResult.value?.person.memberships);
+
+const { result: postResult, loading: postLoading } = useQuery<{
+  post: IPost;
+}>(FETCH_POST, () => ({ slug: props.slug }));
+
+const post = computed(() => postResult.value?.post);
+
+usePersonStatusGroup(usernameWithDomain(post.value?.attributedTo as IGroup));
+
+useHead({
+  title: computed(
+    () => `${post.value?.title} - ${displayName(post.value?.attributedTo)}`
+  ),
+});
+
+const notifier = inject<Notifier>("notifier");
+
+const isShareModalActive = ref(false);
+const isReportModalActive = ref(false);
+const reportModal = ref();
+
+const isInstanceModerator = computed((): boolean => {
+  return (
+    currentUser.value?.role !== undefined &&
+    [ICurrentUserRole.ADMINISTRATOR, ICurrentUserRole.MODERATOR].includes(
+      currentUser.value?.role
+    )
+  );
+});
+
+const ableToReport = computed((): boolean => {
+  return (
+    currentActor.value?.id != undefined ||
+    anonymousReportsConfig.value?.allowed === true
+  );
+});
+
+const triggerShare = (): void => {
+  if (navigator.share) {
+    navigator
+      .share({
+        title: post.value?.title,
+        url: post.value?.url,
+      })
+      .then(() => console.debug("Successful share"))
+      .catch((error: any) => console.debug("Error sharing", error));
+  } else {
+    isShareModalActive.value = true;
+    // send popup
+  }
+};
+
+const {
+  mutate: createReportMutation,
+  onDone: onCreateReportDone,
+  onError: onCreateReportError,
+} = useCreateReport();
+
+onCreateReportDone(() => {
+  isReportModalActive.value = false;
+  reportModal.value.close();
+  const postTitle = post.value?.title;
+  notifier?.success(t("Post {eventTitle} reported", { postTitle }));
+});
+
+onCreateReportError((error) => {
+  console.error(error);
+});
+
+const reportPost = async (content: string, forward: boolean): Promise<void> => {
+  createReportMutation({
+    // postId: post.value?.id,
+    reportedId: post.value?.attributedTo?.id as string,
+    content,
+    forward,
+  });
+};
+const groupDomain = computed((): string | undefined | null => {
+  return post.value?.attributedTo?.domain;
+});
+
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+
+const isCurrentActorAGroupModerator = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+  ]);
+});
+
+const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
+  const roles = Array.isArray(givenRole)
+    ? givenRole
+    : ([givenRole] as MemberRole[]);
+  return (
+    (memberships.value?.total ?? 0) > 0 &&
+    roles.includes(memberships.value?.elements[0].role as MemberRole)
+  );
+};
+
+const isCurrentActorAGroupMember = computed((): boolean => {
+  return hasCurrentActorThisRole([
+    MemberRole.MODERATOR,
+    MemberRole.ADMINISTRATOR,
+    MemberRole.MEMBER,
+  ]);
+});
+
+const { t } = useI18n({ useScope: "global" });
+const dialog = inject<Dialog>("dialog");
+
+const openDeletePostModal = async (): Promise<void> => {
+  dialog?.confirm({
+    variant: "danger",
+    title: t("Delete post"),
+    message: t(
+      "Are you sure you want to delete this post? This action cannot be reverted."
+    ),
+    onConfirm: () =>
+      deletePost({
+        id: post.value?.id,
+      }),
+  });
+};
+
+const router = useRouter();
+
+const { mutate: deletePost, onDone: onDeletePostDone } =
+  useMutation(DELETE_POST);
+
+onDeletePostDone(({ data }) => {
+  if (data && post.value?.attributedTo) {
+    router.push({
+      name: RouteName.POSTS,
+      params: {
+        preferredUsername: usernameWithDomain(post.value?.attributedTo),
+      },
+    });
+  }
+});
+</script>
+<style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
+article.post {
+  header {
+    display: flex;
+    flex-direction: column;
+    .banner-container {
+      display: flex;
+      justify-content: center;
+      height: 30vh;
+    }
+
+    .heading-section {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 2rem;
+
+      .heading-wrapper {
+        padding: 15px 10px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+
+        .title-metadata {
+          min-width: 300px;
+          flex: 20;
+
+          .title-wrapper {
+            display: inline;
+
+            .tag {
+              height: 38px;
+              vertical-align: text-bottom;
+            }
+
+            & > h1 {
+              display: inline;
+            }
+          }
+
+          p.metadata {
+            margin-top: 10px;
+            display: flex;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+            flex-direction: column;
+
+            *:not(:first-child) {
+              @include padding-left(5px);
+            }
+          }
+        }
+        p.buttons {
+          flex: 1;
+        }
+      }
+
+      h1.title {
+        margin: 0;
+        font-weight: 500;
+        font-family: "Roboto", "Helvetica", "Arial", serif;
+      }
+
+      .authors {
+        display: inline-block;
+      }
+
+      &::after {
+        height: 0.2rem;
+        content: " ";
+        display: block;
+      }
+
+      .buttons {
+        justify-content: center;
+      }
+    }
+  }
+
+  margin: 0 auto;
+}
+</style>
diff --git a/js/src/views/Resources/ResourceFolder.vue b/js/src/views/Resources/ResourceFolder.vue
index c14e2318a..94b18d08a 100644
--- a/js/src/views/Resources/ResourceFolder.vue
+++ b/js/src/views/Resources/ResourceFolder.vue
@@ -1,147 +1,87 @@
 <template>
-  <div class="container section" v-if="resource">
+  <div class="container mx-auto" v-if="resource">
     <breadcrumbs-nav :links="breadcrumbLinks">
       <li>
-        <b-dropdown aria-role="list">
-          <b-button class="button is-primary" slot="trigger">+</b-button>
+        <o-dropdown aria-role="list">
+          <template #trigger>
+            <o-button variant="primary">+</o-button>
+          </template>
 
-          <b-dropdown-item aria-role="listitem" @click="createFolderModal">
-            <b-icon icon="folder" />
-            {{ $t("New folder") }}
-          </b-dropdown-item>
-          <b-dropdown-item aria-role="listitem" @click="createLinkModal">
-            <b-icon icon="link" />
-            {{ $t("New link") }}
-          </b-dropdown-item>
+          <o-dropdown-item aria-role="listitem" @click="createFolderModal">
+            <Folder />
+            {{ t("New folder") }}
+          </o-dropdown-item>
+          <o-dropdown-item aria-role="listitem" @click="createLinkModal">
+            <Link />
+            {{ t("New link") }}
+          </o-dropdown-item>
           <hr
             role="presentation"
             class="dropdown-divider"
-            v-if="resourceProviders.length"
+            v-if="resourceProviders?.length"
           />
-          <b-dropdown-item
+          <o-dropdown-item
             aria-role="listitem"
             v-for="resourceProvider in resourceProviders"
             :key="resourceProvider.software"
             @click="createResourceFromProvider(resourceProvider)"
           >
-            <b-icon :icon="mapServiceTypeToIcon[resourceProvider.software]" />
+            <o-icon :icon="mapServiceTypeToIcon[resourceProvider.software]" />
             {{ createSentenceForType(resourceProvider.software) }}
-          </b-dropdown-item>
-        </b-dropdown>
+          </o-dropdown-item>
+        </o-dropdown>
       </li>
     </breadcrumbs-nav>
-    <section>
-      <p v-if="resource.path === '/'" class="module-description">
-        {{
-          $t("A place to store links to documents or resources of any type.")
-        }}
-      </p>
-      <div class="list-header">
-        <div class="list-header-right">
-          <b-checkbox v-model="checkedAll" v-if="resource.children.total > 0" />
-          <div class="actions" v-if="validCheckedResources.length > 0">
-            <small>
-              {{
-                $tc("No resources selected", validCheckedResources.length, {
-                  count: validCheckedResources.length,
-                })
-              }}
-            </small>
-            <b-button
-              type="is-danger"
-              icon-right="delete"
-              size="is-small"
-              @click="deleteMultipleResources"
-              >{{ $t("Delete") }}</b-button
-            >
-          </div>
-        </div>
-      </div>
-      <draggable
-        v-model="resource.children.elements"
-        :sort="false"
-        :group="groupObject"
-        v-if="resource.children.total > 0"
-      >
-        <transition-group>
-          <div
-            v-for="localResource in resource.children.elements"
-            :key="localResource.id"
-          >
-            <div class="resource-item">
-              <div
-                class="resource-checkbox"
-                :class="{ checked: checkedResources[localResource.id] }"
-              >
-                <b-checkbox v-model="checkedResources[localResource.id]" />
-              </div>
-              <resource-item
-                :resource="localResource"
-                v-if="localResource.type !== 'folder'"
-                @delete="deleteResource"
-                @rename="handleRename"
-                @move="handleMove"
-              />
-              <folder-item
-                :resource="localResource"
-                :group="resource.actor"
-                @delete="deleteResource"
-                @rename="handleRename"
-                @move="handleMove"
-                v-else
-              />
-            </div>
-          </div>
-        </transition-group>
-      </draggable>
-      <div
-        class="content has-text-centered has-text-grey"
-        v-if="resource.children.total === 0"
-      >
-        <p>{{ $t("No resources in this folder") }}</p>
-      </div>
-    </section>
-    <b-pagination
+    <DraggableList
+      :resources="resource.children.elements"
+      :isRoot="resource.path === '/'"
+      :group="resource.actor"
+      @delete="(resourceID: string) => deleteResource({
+        id: resourceID,
+      })"
+      @update="updateResource"
+      @rename="handleRename"
+      @move="handleMove"
+    />
+    <o-pagination
       v-if="resource.children.total > RESOURCES_PER_PAGE"
       :total="resource.children.total"
       v-model="page"
       :per-page="RESOURCES_PER_PAGE"
-      :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')"
     >
-    </b-pagination>
-    <b-modal
-      :active.sync="renameModal"
+    </o-pagination>
+    <o-modal
+      v-model:active="renameModal"
       has-modal-card
-      :close-button-aria-label="$t('Close')"
+      :close-button-aria-label="t('Close')"
     >
-      <div class="modal-card">
-        <section class="modal-card-body">
+      <div class="w-full md:w-[640px]">
+        <section>
           <form @submit.prevent="renameResource">
-            <b-field :label="$t('Title')">
-              <b-input
+            <o-field :label="t('Title')">
+              <o-input
                 ref="resourceRenameInput"
                 aria-required="true"
                 v-model="updatedResource.title"
               />
-            </b-field>
+            </o-field>
 
-            <b-button native-type="submit">{{
-              $t("Rename resource")
-            }}</b-button>
+            <o-button native-type="submit">{{ t("Rename resource") }}</o-button>
           </form>
         </section>
       </div>
-    </b-modal>
-    <b-modal
-      :active.sync="moveModal"
+    </o-modal>
+    <o-modal
+      v-model:active="moveModal"
       has-modal-card
-      :close-button-aria-label="$t('Close')"
+      :close-button-aria-label="t('Close')"
     >
-      <div class="modal-card">
-        <section class="modal-card-body">
+      <div class="w-full md:w-[640px]">
+        <section>
           <resource-selector
             :initialResource="updatedResource"
             :username="usernameWithDomain(resource.actor)"
@@ -150,51 +90,56 @@
           />
         </section>
       </div>
-    </b-modal>
-    <b-modal
-      :active.sync="createResourceModal"
+    </o-modal>
+    <o-modal
+      v-model:active="createResourceModal"
       has-modal-card
-      :close-button-aria-label="$t('Close')"
+      :close-button-aria-label="t('Close')"
       trap-focus
     >
-      <div class="modal-card">
-        <section class="modal-card-body">
-          <b-message type="is-danger" v-if="modalError">
-            {{ modalError }}
-          </b-message>
-          <form @submit.prevent="createResource">
-            <b-field :label="$t('Title')" label-for="new-resource-title">
-              <b-input
-                ref="modalNewResourceInput"
-                aria-required="true"
-                v-model="newResource.title"
-                id="new-resource-title"
-              />
-            </b-field>
+      <section class="w-full md:w-[640px]">
+        <o-notification variant="danger" v-if="modalError">
+          {{ modalError }}
+        </o-notification>
+        <form @submit.prevent="createResource">
+          <p v-if="newResource.type !== 'folder'">
+            {{
+              t("The pad will be created on {service}", {
+                service: newResourceHost,
+              })
+            }}
+          </p>
+          <o-field :label="t('Title')" label-for="new-resource-title">
+            <o-input
+              ref="modalNewResourceInput"
+              aria-required="true"
+              v-model="newResource.title"
+              id="new-resource-title"
+            />
+          </o-field>
 
-            <b-button native-type="submit">{{
-              createResourceButtonLabel
-            }}</b-button>
-          </form>
-        </section>
-      </div>
-    </b-modal>
-    <b-modal
-      :active.sync="createLinkResourceModal"
+          <o-button class="mt-2" native-type="submit">{{
+            createResourceButtonLabel
+          }}</o-button>
+        </form>
+      </section>
+    </o-modal>
+    <o-modal
+      v-model:active="createLinkResourceModal"
       has-modal-card
-      class="link-resource-modal"
       aria-modal
-      :close-button-aria-label="$t('Close')"
+      :close-button-aria-label="t('Close')"
       trap-focus
+      :width="640"
     >
-      <div class="modal-card">
-        <section class="modal-card-body">
-          <b-message type="is-danger" v-if="modalError">
+      <div class="w-full md:w-[640px]">
+        <section class="p-10">
+          <o-notification variant="danger" v-if="modalError">
             {{ modalError }}
-          </b-message>
+          </o-notification>
           <form @submit.prevent="createResource">
-            <b-field :label="$t('URL')" label-for="new-resource-url">
-              <b-input
+            <o-field expanded :label="t('URL')" label-for="new-resource-url">
+              <o-input
                 id="new-resource-url"
                 type="url"
                 required
@@ -202,599 +147,507 @@
                 @blur="previewResource"
                 ref="modalNewResourceLinkInput"
               />
-            </b-field>
+            </o-field>
 
             <div class="new-resource-preview" v-if="newResource.title">
               <resource-item :resource="newResource" :preview="true" />
             </div>
 
-            <b-field :label="$t('Title')" label-for="new-resource-link-title">
-              <b-input
+            <o-field :label="t('Title')" label-for="new-resource-link-title">
+              <o-input
                 aria-required="true"
                 v-model="newResource.title"
                 id="new-resource-link-title"
               />
-            </b-field>
+            </o-field>
 
-            <b-field
-              :label="$t('Description')"
-              label-for="new-resource-summary"
-            >
-              <b-input
+            <o-field :label="t('Description')" label-for="new-resource-summary">
+              <o-input
                 type="textarea"
                 v-model="newResource.summary"
                 id="new-resource-summary"
               />
-            </b-field>
+            </o-field>
 
-            <b-button native-type="submit">{{
-              $t("Create resource")
-            }}</b-button>
+            <o-button native-type="submit" class="mt-2">{{
+              t("Create resource")
+            }}</o-button>
           </form>
         </section>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
-<script lang="ts">
-import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
+<script lang="ts" setup>
 import ResourceItem from "@/components/Resource/ResourceItem.vue";
-import FolderItem from "@/components/Resource/FolderItem.vue";
-import Draggable from "vuedraggable";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import { displayName, IActor, usernameWithDomain } from "../../types/actor";
-import RouteName from "../../router/name";
+import { displayName, usernameWithDomain } from "@/types/actor";
+import RouteName from "@/router/name";
 import {
   IResource,
   mapServiceTypeToIcon,
   IProvider,
-} from "../../types/resource";
+  IResourceMetadata,
+} from "@/types/resource";
 import {
   CREATE_RESOURCE,
   DELETE_RESOURCE,
   PREVIEW_RESOURCE_LINK,
   GET_RESOURCE,
   UPDATE_RESOURCE,
-} from "../../graphql/resources";
-import { CONFIG } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
-import ResourceMixin from "../../mixins/resource";
-import ResourceSelector from "../../components/Resource/ResourceSelector.vue";
+} from "@/graphql/resources";
+import ResourceSelector from "@/components/Resource/ResourceSelector.vue";
 import {
   ApolloCache,
   FetchResult,
   InternalRefetchQueriesInclude,
 } from "@apollo/client/core";
-import VueRouter from "vue-router";
-const { isNavigationFailure, NavigationFailureType } = VueRouter;
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, nextTick, reactive, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { integerTransformer, useRouteQuery } from "vue-use-route-query";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import { useResourceProviders } from "@/composition/apollo/config";
+import Folder from "vue-material-design-icons/Folder.vue";
+import Link from "vue-material-design-icons/Link.vue";
+import DraggableList from "@/components/Resource/DraggableList.vue";
+import { resourcePathArray } from "@/components/Resource/utils";
+import { AbsintheGraphQLErrors } from "@/types/errors.model";
 
-@Component({
-  components: { FolderItem, ResourceItem, Draggable, ResourceSelector },
-  apollo: {
-    resource: {
+const RESOURCES_PER_PAGE = 10;
+const page = useRouteQuery("page", 1, integerTransformer);
+
+const props = defineProps<{
+  path: string | string[];
+  preferredUsername: string;
+}>();
+
+const {
+  result: resourceResult,
+  onError: onGetResourceError,
+  fetchMore,
+} = useQuery<{
+  resource: IResource;
+}>(GET_RESOURCE, () => {
+  let path = Array.isArray(props.path) ? props.path.join("/") : props.path;
+  path = path[0] !== "/" ? `/${path}` : path;
+  return {
+    path,
+    username: props.preferredUsername,
+    page: page.value,
+    limit: RESOURCES_PER_PAGE,
+  };
+});
+
+const resource = computed(() => resourceResult.value?.resource);
+
+onGetResourceError(({ graphQLErrors }) => {
+  handleErrors(graphQLErrors);
+});
+
+const { resourceProviders } = useResourceProviders();
+
+const { t } = useI18n({ useScope: "global" });
+
+// config: CONFIG,
+
+const newResource = reactive<IResource>({
+  title: "",
+  summary: "",
+  resourceUrl: "",
+  children: { elements: [], total: 0 },
+  metadata: {},
+  type: "link",
+});
+
+const updatedResource = ref<IResource>({
+  title: "",
+  resourceUrl: "",
+  metadata: {},
+  children: { elements: [], total: 0 },
+  path: undefined,
+});
+
+const createResourceModal = ref(false);
+const createLinkResourceModal = ref(false);
+const moveModal = ref(false);
+const renameModal = ref(false);
+const modalError = ref("");
+
+const resourceRenameInput = ref<any>();
+const modalNewResourceInput = ref<HTMLElement>();
+const modalNewResourceLinkInput = ref<HTMLElement>();
+
+const actualPath = computed((): string => {
+  const path = Array.isArray(props.path) ? props.path.join("/") : props.path;
+  return path[0] !== "/" ? `/${path}` : path;
+});
+
+const filteredPath = computed((): string[] => {
+  if (resource.value?.path !== "/") {
+    return resourcePathArray(resource.value);
+  }
+  return [];
+});
+
+const isRoot = computed((): boolean => {
+  return actualPath.value === "/";
+});
+
+const lastFragment = computed((): string | undefined => {
+  return filteredPath.value.slice(-1)[0];
+});
+
+const {
+  mutate: createResourceMutation,
+  onDone: createResourceDone,
+  onError: createResourceError,
+} = useMutation(CREATE_RESOURCE, () => ({
+  refetchQueries: () => postRefreshQueries(),
+}));
+
+createResourceDone(() => {
+  createLinkResourceModal.value = false;
+  createResourceModal.value = false;
+  newResource.title = "";
+  newResource.summary = "";
+  newResource.resourceUrl = "";
+});
+
+createResourceError((err) => {
+  console.error(err);
+  modalError.value = err.graphQLErrors[0].message;
+});
+
+const createResource = () => {
+  if (!resource.value?.actor) return;
+  modalError.value = "";
+  createResourceMutation({
+    title: newResource.title,
+    summary: newResource.summary,
+    actorId: resource.value.actor?.id,
+    resourceUrl: newResource.resourceUrl,
+    parentId: resource.value?.id?.startsWith("root_")
+      ? null
+      : resource.value?.id,
+    type: newResource.type,
+  });
+};
+
+const {
+  mutate: previewResourceLinkMutation,
+  onDone: previewDone,
+  onError: previewError,
+} = useMutation<{ previewResourceLink: IResourceMetadata }>(
+  PREVIEW_RESOURCE_LINK
+);
+
+previewDone(({ data }) => {
+  if (!data?.previewResourceLink) return;
+  newResource.title = data?.previewResourceLink.title ?? "";
+  newResource.summary = data?.previewResourceLink?.description;
+  newResource.metadata = data?.previewResourceLink;
+  newResource.type = "link";
+});
+
+previewError((err) => {
+  console.error(err);
+  modalError.value = err.graphQLErrors[0].message;
+});
+
+const previewResource = async (): Promise<void> => {
+  modalError.value = "";
+  if (newResource.resourceUrl === "") return;
+  previewResourceLinkMutation({
+    resourceUrl: newResource.resourceUrl,
+  });
+};
+
+const createSentenceForType = (type: string): string => {
+  switch (type) {
+    case "folder":
+      return t("Create a folder") as string;
+    case "pad":
+      return t("Create a pad") as string;
+    case "calc":
+      return t("Create a calc") as string;
+    case "visio":
+      return t("Create a videoconference") as string;
+    default:
+      return "";
+  }
+};
+
+const createLinkModal = async (): Promise<void> => {
+  createLinkResourceModal.value = true;
+  await nextTick();
+  modalNewResourceLinkInput.value?.focus();
+};
+
+const createFolderModal = async (): Promise<void> => {
+  newResource.type = "folder";
+  createResourceModal.value = true;
+  await nextTick();
+  modalNewResourceInput.value?.focus();
+};
+
+const createResourceFromProvider = async (
+  provider: IProvider
+): Promise<void> => {
+  newResource.resourceUrl = generateFullResourceUrl(provider);
+  newResource.type = provider.software;
+  createResourceModal.value = true;
+  await nextTick();
+  modalNewResourceInput.value?.focus();
+};
+
+const generateFullResourceUrl = (provider: IProvider): string => {
+  const randomString = [...Array(10)]
+    .map(() => Math.random().toString(36)[3])
+    .join("")
+    .replace(/(.|$)/g, (c) =>
+      c[!Math.round(Math.random()) ? "toString" : "toLowerCase"]()
+    );
+  switch (provider.type) {
+    case "ethercalc":
+    case "etherpad":
+    case "jitsi":
+    default:
+      return `${provider.endpoint}${randomString}`;
+  }
+};
+
+const createResourceButtonLabel = computed((): string => {
+  if (!newResource.type) return "";
+  return createSentenceForType(newResource.type);
+});
+
+// eslint-disable-next-line class-methods-use-this
+const postRefreshQueries = (): InternalRefetchQueriesInclude => {
+  return [
+    {
       query: GET_RESOURCE,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        let path = Array.isArray(this.$route.params.path)
-          ? this.$route.params.path.join("/")
-          : this.$route.params.path || this.path;
-        path = path[0] !== "/" ? `/${path}` : path;
-        return {
-          path,
-          username: this.$route.params.preferredUsername,
-          page: this.page,
-          limit: this.RESOURCES_PER_PAGE,
-        };
-      },
-      error({ graphQLErrors }) {
-        this.handleErrors(graphQLErrors);
+      variables: {
+        path: actualPath.value,
+        username: props.preferredUsername,
+        page: page.value,
+        limit: RESOURCES_PER_PAGE,
       },
     },
-    config: CONFIG,
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.isRoot
-        ? (this.$t("Resources") as string)
-        : (this.$t("{folder} - Resources", {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            folder: this.lastFragment,
-          }) as string),
-    };
-  },
-})
-export default class Resources extends Mixins(ResourceMixin) {
-  @Prop({ required: true }) path!: string;
+  ];
+};
 
-  resource!: IResource;
+const { mutate: deleteResource, onError: onDeleteResourceError } = useMutation(
+  DELETE_RESOURCE,
+  () => ({
+    refetchQueries: () => postRefreshQueries(),
+  })
+);
 
-  config!: IConfig;
+onDeleteResourceError((e) => console.error(e));
 
-  currentActor!: IActor;
+const handleRename = async (resourceToRename: IResource): Promise<void> => {
+  renameModal.value = true;
+  updatedResource.value = { ...resourceToRename };
+  await nextTick();
+  resourceRenameInput.value?.$el.focus();
+  resourceRenameInput.value?.$el.querySelector("input")?.select();
+};
 
-  RouteName = RouteName;
+const handleMove = (resourceToMove: IResource): void => {
+  moveModal.value = true;
+  updatedResource.value = { ...resourceToMove };
+};
 
-  ResourceMixin = ResourceMixin;
+const moveResource = async (
+  resourceToMove: IResource,
+  oldParent: IResource | undefined
+): Promise<void> => {
+  const parentPath = oldParent && oldParent.path ? oldParent.path || "/" : "/";
+  await updateResource(resourceToMove, parentPath);
+  moveModal.value = false;
+};
 
-  usernameWithDomain = usernameWithDomain;
+const renameResource = async (): Promise<void> => {
+  await updateResource(updatedResource.value);
+  renameModal.value = false;
+};
 
-  RESOURCES_PER_PAGE = 10;
+const { mutate: updateResourceMutation } = useMutation<{
+  updateResource: IResource;
+}>(UPDATE_RESOURCE, () => ({
+  refetchQueries: () => postRefreshQueries(),
+  update: (
+    store: ApolloCache<{ updateResource: IResource }>,
+    { data }: FetchResult,
+    { context }
+  ) => {
+    const parentPath = context?.parentPath;
+    if (!data || data.updateResource == null || parentPath == null) return;
+    if (!resource.value?.actor) return;
 
-  newResource: IResource = {
-    title: "",
-    summary: "",
-    resourceUrl: "",
-    children: { elements: [], total: 0 },
-    metadata: {},
-    type: "link",
-  };
-
-  updatedResource: IResource = {
-    title: "",
-    resourceUrl: "",
-    metadata: {},
-    children: { elements: [], total: 0 },
-    path: undefined,
-  };
-
-  checkedResources: { [key: string]: boolean } = {};
-
-  validCheckedResources: string[] = [];
-
-  checkedAll = false;
-
-  createResourceModal = false;
-
-  createLinkResourceModal = false;
-
-  moveModal = false;
-
-  renameModal = false;
-
-  modalError = "";
-
-  groupObject: Record<string, unknown> = {
-    name: "resources",
-    pull: "clone",
-    put: true,
-  };
-
-  $refs!: {
-    resourceRenameInput: any;
-    modalNewResourceInput: HTMLElement;
-    modalNewResourceLinkInput: HTMLElement;
-  };
-
-  mapServiceTypeToIcon = mapServiceTypeToIcon;
-
-  get page(): number {
-    return parseInt((this.$route.query.page as string) || "1", 10);
-  }
-
-  set page(page: number) {
-    this.pushRouter({
-      page: page.toString(),
-    });
-  }
-
-  get actualPath(): string {
-    const path = Array.isArray(this.$route.params.path)
-      ? this.$route.params.path.join("/")
-      : this.$route.params.path || this.path;
-    return path[0] !== "/" ? `/${path}` : path;
-  }
-
-  get filteredPath(): string[] {
-    if (this.resource && this.resource.path !== "/") {
-      return ResourceMixin.resourcePathArray(this.resource);
-    }
-    return [];
-  }
-
-  get isRoot(): boolean {
-    return this.actualPath === "/";
-  }
-
-  get lastFragment(): string | undefined {
-    return this.filteredPath.slice(-1)[0];
-  }
-
-  get resourceProviders(): IProvider[] {
-    return this.config?.resourceProviders || [];
-  }
-
-  async createResource(): Promise<void> {
-    if (!this.resource.actor) return;
-    this.modalError = "";
-    try {
-      await this.$apollo.mutate({
-        mutation: CREATE_RESOURCE,
-        variables: {
-          title: this.newResource.title,
-          summary: this.newResource.summary,
-          actorId: this.resource.actor.id,
-          resourceUrl: this.newResource.resourceUrl,
-          parentId:
-            this.resource.id && this.resource.id.startsWith("root_")
-              ? null
-              : this.resource.id,
-          type: this.newResource.type,
-        },
-        refetchQueries: () => this.postRefreshQueries(),
-      });
-      this.createLinkResourceModal = false;
-      this.createResourceModal = false;
-      this.newResource.title = "";
-      this.newResource.summary = "";
-      this.newResource.resourceUrl = "";
-    } catch (err: any) {
-      console.error(err);
-      this.modalError = err.graphQLErrors[0].message;
-    }
-  }
-
-  async previewResource(): Promise<void> {
-    this.modalError = "";
-    try {
-      if (this.newResource.resourceUrl === "") return;
-      const { data } = await this.$apollo.mutate({
-        mutation: PREVIEW_RESOURCE_LINK,
-        variables: {
-          resourceUrl: this.newResource.resourceUrl,
-        },
-      });
-      this.newResource.title = data.previewResourceLink.title;
-      this.newResource.summary = data.previewResourceLink.description;
-      this.newResource.metadata = data.previewResourceLink;
-      this.newResource.type = "link";
-    } catch (err: any) {
-      console.error(err);
-      this.modalError = err.graphQLErrors[0].message;
-    }
-  }
-
-  createSentenceForType(type: string): string {
-    switch (type) {
-      case "folder":
-        return this.$t("Create a folder") as string;
-      case "pad":
-        return this.$t("Create a pad") as string;
-      case "calc":
-        return this.$t("Create a calc") as string;
-      case "visio":
-        return this.$t("Create a videoconference") as string;
-      default:
-        return "";
-    }
-  }
-
-  async createLinkModal(): Promise<void> {
-    this.createLinkResourceModal = true;
-    await this.$nextTick();
-    this.$refs.modalNewResourceLinkInput.focus();
-  }
-
-  async createFolderModal(): Promise<void> {
-    this.newResource.type = "folder";
-    this.createResourceModal = true;
-    await this.$nextTick();
-    this.$refs.modalNewResourceInput.focus();
-  }
-
-  async createResourceFromProvider(provider: IProvider): Promise<void> {
-    this.newResource.resourceUrl = Resources.generateFullResourceUrl(provider);
-    this.newResource.type = provider.software;
-    this.createResourceModal = true;
-    await this.$nextTick();
-    this.$refs.modalNewResourceInput.focus();
-  }
-
-  static generateFullResourceUrl(provider: IProvider): string {
-    const randomString = [...Array(10)]
-      .map(() => Math.random().toString(36)[3])
-      .join("")
-      .replace(/(.|$)/g, (c) =>
-        c[!Math.round(Math.random()) ? "toString" : "toLowerCase"]()
-      );
-    switch (provider.type) {
-      case "ethercalc":
-      case "etherpad":
-      case "jitsi":
-      default:
-        return `${provider.endpoint}${randomString}`;
-    }
-  }
-
-  get createResourceButtonLabel(): string {
-    if (!this.newResource.type) return "";
-    return this.createSentenceForType(this.newResource.type);
-  }
-
-  @Watch("checkedAll")
-  watchCheckedAll(): void {
-    this.resource.children.elements.forEach(({ id }) => {
-      if (!id) return;
-      this.checkedResources[id] = this.checkedAll;
-    });
-  }
-
-  @Watch("checkedResources", { deep: true })
-  watchValidCheckedResources(): string[] {
-    const validCheckedResources: string[] = [];
-    Object.entries(this.checkedResources).forEach(([key, value]) => {
-      if (value) {
-        validCheckedResources.push(key);
-      }
-    });
-    this.validCheckedResources = validCheckedResources;
-    return this.validCheckedResources;
-  }
-
-  async deleteMultipleResources(): Promise<void> {
-    this.validCheckedResources.forEach(async (resourceID) => {
-      await this.deleteResource(resourceID);
-    });
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  private postRefreshQueries(): InternalRefetchQueriesInclude {
-    return [
-      {
-        query: GET_RESOURCE,
-        variables: {
-          path: this.actualPath,
-          username: this.$route.params.preferredUsername,
-          page: this.page,
-          limit: this.RESOURCES_PER_PAGE,
-        },
-      },
-    ];
-  }
-
-  async deleteResource(resourceID: string): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: DELETE_RESOURCE,
-        variables: {
-          id: resourceID,
-        },
-        refetchQueries: () => this.postRefreshQueries(),
-      });
-      this.validCheckedResources = this.validCheckedResources.filter(
-        (id) => id !== resourceID
-      );
-      delete this.checkedResources[resourceID];
-    } catch (e: any) {
-      console.error(e);
-    }
-  }
-
-  async handleRename(resource: IResource): Promise<void> {
-    this.renameModal = true;
-    this.updatedResource = { ...resource };
-    await this.$nextTick();
-    this.$refs.resourceRenameInput.focus();
-    this.$refs.resourceRenameInput.$el.querySelector("input").select();
-  }
-
-  handleMove(resource: IResource): void {
-    this.moveModal = true;
-    this.updatedResource = { ...resource };
-  }
-
-  async moveResource(
-    resource: IResource,
-    oldParent: IResource | undefined
-  ): Promise<void> {
-    const parentPath =
-      oldParent && oldParent.path ? oldParent.path || "/" : "/";
-    await this.updateResource(resource, parentPath);
-    this.moveModal = false;
-  }
-
-  async renameResource(): Promise<void> {
-    await this.updateResource(this.updatedResource);
-    this.renameModal = false;
-  }
-
-  async updateResource(
-    resource: IResource,
-    parentPath: string | null = null
-  ): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ updateResource: IResource }>({
-        mutation: UPDATE_RESOURCE,
-        variables: {
-          id: resource.id,
-          title: resource.title,
-          parentId: resource.parent ? resource.parent.id : null,
-          path: resource.path,
-        },
-        refetchQueries: () => this.postRefreshQueries(),
-        update: (
-          store: ApolloCache<{ updateResource: IResource }>,
-          { data }: FetchResult
-        ) => {
-          if (!data || data.updateResource == null || parentPath == null)
-            return;
-          if (!this.resource.actor) return;
-
-          console.log("Removing ressource from old parent");
-          const oldParentCachedData = store.readQuery<{ resource: IResource }>({
-            query: GET_RESOURCE,
-            variables: {
-              path: parentPath,
-              username: this.resource.actor.preferredUsername,
-            },
-          });
-          if (oldParentCachedData == null) return;
-          const { resource: oldParentCachedResource } = oldParentCachedData;
-          if (oldParentCachedResource == null) {
-            console.error(
-              "Cannot update resource cache, because of null value."
-            );
-            return;
-          }
-          const updatedResource: IResource = data.updateResource;
-
-          const updatedElementList =
-            oldParentCachedResource.children.elements.filter(
-              (cachedResource) => cachedResource.id !== updatedResource.id
-            );
-
-          store.writeQuery({
-            query: GET_RESOURCE,
-            variables: {
-              path: parentPath,
-              username: this.resource.actor.preferredUsername,
-            },
-            data: {
-              resource: {
-                ...oldParentCachedResource,
-                children: {
-                  ...oldParentCachedResource.children,
-                  elements: [...updatedElementList],
-                },
-              },
-            },
-          });
-          console.log("Finished removing ressource from old parent");
-
-          console.log("Adding resource to new parent");
-          if (!updatedResource.parent || !updatedResource.parent.path) {
-            console.log("No cache found for new parent");
-            return;
-          }
-          const newParentCachedData = store.readQuery<{ resource: IResource }>({
-            query: GET_RESOURCE,
-            variables: {
-              path: updatedResource.parent.path,
-              username: this.resource.actor.preferredUsername,
-            },
-          });
-          if (newParentCachedData == null) return;
-          const { resource: newParentCachedResource } = newParentCachedData;
-          if (newParentCachedResource == null) {
-            console.error(
-              "Cannot update resource cache, because of null value."
-            );
-            return;
-          }
-
-          store.writeQuery({
-            query: GET_RESOURCE,
-            variables: {
-              path: updatedResource.parent.path,
-              username: this.resource.actor.preferredUsername,
-            },
-            data: {
-              resource: {
-                ...newParentCachedResource,
-                children: {
-                  ...newParentCachedResource.children,
-                  elements: [
-                    ...newParentCachedResource.children.elements,
-                    resource,
-                  ],
-                },
-              },
-            },
-          });
-          console.log("Finished adding resource to new parent");
-        },
-      });
-    } catch (e: any) {
-      console.error(e);
-    }
-  }
-
-  @Watch("page")
-  loadMoreResources(): void {
-    this.$apollo.queries.resource.fetchMore({
-      // New variables
+    console.debug("Removing ressource from old parent");
+    const oldParentCachedData = store.readQuery<{ resource: IResource }>({
+      query: GET_RESOURCE,
       variables: {
-        page: this.page,
-        limit: this.RESOURCES_PER_PAGE,
+        path: parentPath,
+        username: resource.value.actor.preferredUsername,
       },
     });
-  }
-
-  handleErrors(errors: any[]): void {
-    if (errors.some((error) => error.status_code === 404)) {
-      this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
+    if (oldParentCachedData == null) return;
+    const { resource: oldParentCachedResource } = oldParentCachedData;
+    if (oldParentCachedResource == null) {
+      console.error("Cannot update resource cache, because of null value.");
+      return;
     }
-  }
+    const postUpdatedResource: IResource = data.updateResource;
 
-  async pushRouter(args: Record<string, string>): Promise<void> {
-    try {
-      const path = this.filteredPath.toString();
-      const routeName =
-        path === ""
-          ? RouteName.RESOURCE_FOLDER_ROOT
-          : RouteName.RESOURCE_FOLDER;
-
-      await this.$router.push({
-        name: routeName,
-        params: { path },
-        query: { ...this.$route.query, ...args },
-      });
-    } catch (e: any) {
-      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
-        throw Error(e.toString());
-      }
-    }
-  }
-
-  get breadcrumbLinks() {
-    if (!this.resource?.actor) return [];
-    const resourceActor = this.resource.actor;
-    const links = [
-      {
-        name: RouteName.GROUP,
-        params: { preferredUsername: usernameWithDomain(this.resource.actor) },
-        text: displayName(this.resource.actor),
-      },
-      {
-        name: RouteName.RESOURCE_FOLDER_ROOT,
-        params: { preferredUsername: usernameWithDomain(this.resource.actor) },
-        text: this.$t("Resources") as string,
-      },
-    ];
-
-    links.push(
-      ...this.filteredPath.map((pathFragment, index) => {
-        return {
-          name: RouteName.RESOURCE_FOLDER,
-          params: {
-            path: ResourceMixin.resourcePathArray(this.resource).slice(
-              0,
-              index + 1
-            ) as unknown as string,
-            preferredUsername: usernameWithDomain(resourceActor),
-          },
-          text: pathFragment,
-        };
-      })
+    const updatedElementList = oldParentCachedResource.children.elements.filter(
+      (cachedResource) => cachedResource.id !== postUpdatedResource.id
     );
-    return links;
+
+    store.writeQuery({
+      query: GET_RESOURCE,
+      variables: {
+        path: parentPath,
+        username: resource.value.actor.preferredUsername,
+      },
+      data: {
+        resource: {
+          ...oldParentCachedResource,
+          children: {
+            ...oldParentCachedResource.children,
+            elements: [...updatedElementList],
+          },
+        },
+      },
+    });
+    console.debug("Finished removing ressource from old parent");
+
+    console.debug("Adding resource to new parent");
+    if (!postUpdatedResource.parent || !postUpdatedResource.parent.path) {
+      console.debug("No cache found for new parent");
+      return;
+    }
+    const newParentCachedData = store.readQuery<{ resource: IResource }>({
+      query: GET_RESOURCE,
+      variables: {
+        path: postUpdatedResource.parent.path,
+        username: resource.value.actor.preferredUsername,
+      },
+    });
+    if (newParentCachedData == null) return;
+    const { resource: newParentCachedResource } = newParentCachedData;
+    if (newParentCachedResource == null) {
+      console.error("Cannot update resource cache, because of null value.");
+      return;
+    }
+
+    store.writeQuery({
+      query: GET_RESOURCE,
+      variables: {
+        path: postUpdatedResource.parent.path,
+        username: resource.value.actor.preferredUsername,
+      },
+      data: {
+        resource: {
+          ...newParentCachedResource,
+          children: {
+            ...newParentCachedResource.children,
+            elements: [...newParentCachedResource.children.elements, resource],
+          },
+        },
+      },
+    });
+    console.debug("Finished adding resource to new parent");
+  },
+}));
+
+const updateResource = async (
+  resourceToUpdate: IResource,
+  parentPath: string | null = null
+): Promise<void> => {
+  updateResourceMutation(
+    {
+      id: resourceToUpdate.id,
+      title: resourceToUpdate.title,
+      parentId: resourceToUpdate.parent ? resourceToUpdate.parent.id : null,
+      path: resourceToUpdate.path,
+    },
+    { context: { parentPath } }
+  );
+};
+
+watch(page, () => {
+  fetchMore({
+    // New variables
+    variables: {
+      page: page.value,
+      limit: RESOURCES_PER_PAGE,
+    },
+  });
+});
+
+const router = useRouter();
+
+const handleErrors = (errors: AbsintheGraphQLErrors): void => {
+  if (errors.some((error) => error.status_code === 404)) {
+    router.replace({ name: RouteName.PAGE_NOT_FOUND });
   }
-}
+};
+
+const breadcrumbLinks = computed(() => {
+  if (!resource.value?.actor) return [];
+  const resourceActor = resource.value.actor;
+  const links = [
+    {
+      name: RouteName.GROUP,
+      params: { preferredUsername: usernameWithDomain(resource.value.actor) },
+      text: displayName(resource.value.actor),
+    },
+    {
+      name: RouteName.RESOURCE_FOLDER_ROOT,
+      params: { preferredUsername: usernameWithDomain(resource.value.actor) },
+      text: t("Resources") as string,
+    },
+  ];
+
+  links.push(
+    ...filteredPath.value.map((pathFragment, index) => {
+      return {
+        name: RouteName.RESOURCE_FOLDER,
+        params: {
+          path: resourcePathArray(resource.value).slice(
+            0,
+            index + 1
+          ) as unknown as string,
+          preferredUsername: usernameWithDomain(resourceActor),
+        },
+        text: pathFragment,
+      };
+    })
+  );
+  return links;
+});
+
+const newResourceHost = computed(() => {
+  if (!newResource.resourceUrl) return;
+  return new URL(newResource.resourceUrl).host;
+});
+
+useHead({
+  title: computed(() =>
+    isRoot.value
+      ? t("Resources")
+      : t("{folder} - Resources", {
+          folder: lastFragment.value,
+        })
+  ),
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 
-.container.section {
-  background: $white;
-
-  & > nav.pagination {
-    margin-top: 1rem;
-  }
-}
-
 nav.breadcrumb ul {
   align-items: center;
 
@@ -817,7 +670,7 @@ nav.breadcrumb ul {
     display: flex;
     align-items: center;
 
-    ::v-deep .b-checkbox.checkbox {
+    :deep(.b-checkbox.checkbox) {
       @include margin-left(10px);
     }
 
@@ -837,7 +690,7 @@ nav.breadcrumb ul {
   font-size: 14px;
   border: 1px solid #c0cdd9;
   border-radius: 4px;
-  color: #444b5d;
+  // color: #444b5d;
   margin-top: 14px;
   margin-bottom: 14px;
 
@@ -846,7 +699,7 @@ nav.breadcrumb ul {
     @include padding-left(10px);
     opacity: 0.3;
 
-    ::v-deep .b-checkbox.checkbox {
+    :deep(.b-checkbox.checkbox) {
       @include margin-right(0.25rem);
     }
   }
diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
deleted file mode 100644
index 71f378a82..000000000
--- a/js/src/views/Search.vue
+++ /dev/null
@@ -1,757 +0,0 @@
-<template>
-  <div class="section container">
-    <h1 class="title">{{ $t("Explore") }}</h1>
-    <section v-if="tag">
-      <i18n path="Events tagged with {tag}">
-        <b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>
-      </i18n>
-    </section>
-    <section class="hero is-light" v-else>
-      <div class="hero-body">
-        <form @submit.prevent="submit()">
-          <b-field
-            class="searchQuery"
-            :label="$t('Key words')"
-            label-for="search"
-          >
-            <b-input
-              icon="magnify"
-              type="search"
-              id="search"
-              ref="autocompleteSearchInput"
-              :value="search"
-              @input="debouncedUpdateSearchQuery"
-              dir="auto"
-              :placeholder="
-                $t('For instance: London, Taekwondo, Architecture…')
-              "
-            />
-          </b-field>
-          <full-address-auto-complete
-            class="searchLocation"
-            :label="$t('Location')"
-            v-model="location"
-            id="location"
-            ref="aac"
-            :placeholder="$t('For instance: London')"
-            @input="locchange"
-            :hideMap="true"
-            :hideSelected="true"
-          />
-          <b-field
-            :label="$t('Radius')"
-            label-for="radius"
-            class="searchRadius"
-          >
-            <b-select expanded v-model="radius" id="radius">
-              <option
-                v-for="(radiusOption, index) in radiusOptions"
-                :key="index"
-                :value="radiusOption"
-              >
-                {{ radiusString(radiusOption) }}
-              </option>
-            </b-select>
-          </b-field>
-          <b-field :label="$t('Date')" label-for="date" class="searchDate">
-            <b-select
-              expanded
-              v-model="when"
-              id="date"
-              :disabled="activeTab !== 0"
-            >
-              <option
-                v-for="(option, index) in dateOptions"
-                :key="index"
-                :value="index"
-              >
-                {{ option.label }}
-              </option>
-            </b-select>
-          </b-field>
-          <b-field
-            expanded
-            :label="$t('Type')"
-            label-for="type"
-            class="searchType"
-          >
-            <b-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>
-            </b-select>
-          </b-field>
-          <b-field
-            v-if="config"
-            expanded
-            :label="$t('Category')"
-            label-for="category"
-            class="searchCategory"
-          >
-            <b-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>
-            </b-select>
-          </b-field>
-        </form>
-      </div>
-    </section>
-    <section
-      class="events-featured"
-      v-if="!canSearchEvents && !canSearchGroups"
-    >
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <h2 class="title">{{ $t("Featured events") }}</h2>
-      <div v-if="events.elements.length > 0">
-        <multi-card class="my-4" :events="events.elements" />
-        <div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
-          <b-pagination
-            :total="events.total"
-            v-model="featuredEventPage"
-            :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')"
-          >
-          </b-pagination>
-        </div>
-      </div>
-      <b-message
-        v-else-if="events.elements.length === 0 && $apollo.loading === false"
-        type="is-danger"
-        >{{ $t("No events found") }}</b-message
-      >
-    </section>
-    <b-tabs v-else v-model="activeTab" type="is-boxed" class="mt-3 searchTabs">
-      <b-loading :active.sync="$apollo.loading"></b-loading>
-      <b-tab-item>
-        <template slot="header">
-          <b-icon icon="calendar"></b-icon>
-          <span>
-            {{ $t("Events") }}
-            <b-tag rounded>{{ searchEvents.total }}</b-tag>
-          </span>
-        </template>
-        <div v-if="searchEvents.total > 0">
-          <multi-card class="my-4" :events="searchEvents.elements" />
-          <div class="pagination" v-if="searchEvents.total > EVENT_PAGE_LIMIT">
-            <b-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')"
-            >
-            </b-pagination>
-          </div>
-        </div>
-        <b-message v-else-if="$apollo.loading === false" type="is-danger">
-          <p>{{ $t("No events found") }}</p>
-          <p v-if="searchIsUrl && !currentUser.id">
-            {{
-              $t(
-                "Only registered users may fetch remote events from their URL."
-              )
-            }}
-          </p>
-        </b-message>
-      </b-tab-item>
-      <b-tab-item v-if="!tag">
-        <template slot="header">
-          <b-icon icon="account-multiple"></b-icon>
-          <span>
-            {{ $t("Groups") }} <b-tag rounded>{{ searchGroups.total }}</b-tag>
-          </span>
-        </template>
-        <b-message v-if="config && !config.features.groups" type="is-danger">
-          {{ $t("Groups are not enabled on this instance.") }}
-        </b-message>
-        <div v-else-if="searchGroups.total > 0">
-          <multi-group-card class="my-4" :groups="searchGroups.elements" />
-          <div class="pagination">
-            <b-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')"
-            >
-            </b-pagination>
-          </div>
-        </div>
-        <b-message v-else-if="$apollo.loading === false" type="is-danger">
-          {{ $t("No groups found") }}
-        </b-message>
-      </b-tab-item>
-    </b-tabs>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import ngeohash, { GeographicPoint } from "ngeohash";
-import {
-  endOfToday,
-  addDays,
-  startOfDay,
-  endOfDay,
-  endOfWeek,
-  addWeeks,
-  startOfWeek,
-  endOfMonth,
-  addMonths,
-  startOfMonth,
-  eachWeekendOfInterval,
-} from "date-fns";
-import { SearchTabs } from "@/types/enums";
-import MultiCard from "../components/Event/MultiCard.vue";
-import { FETCH_EVENTS } from "../graphql/event";
-import { EventType, IEvent } from "../types/event.model";
-import RouteName from "../router/name";
-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";
-
-interface ISearchTimeOption {
-  label: string;
-  start?: Date | null;
-  end?: Date | null;
-}
-
-const EVENT_PAGE_LIMIT = 12;
-
-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
-
-@Component({
-  components: {
-    MultiCard,
-    FullAddressAutoComplete,
-    MultiGroupCard,
-  },
-  apollo: {
-    config: CONFIG,
-    events: {
-      query: FETCH_EVENTS,
-      variables() {
-        return {
-          page: this.featuredEventPage,
-          limit: EVENT_PAGE_LIMIT,
-        };
-      },
-    },
-    searchElements: {
-      query: SEARCH_EVENTS_AND_GROUPS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          term: this.search,
-          tags: this.tag,
-          location: this.geohash,
-          beginsOn: this.start,
-          endsOn: this.end,
-          radius: this.radius,
-          eventPage: this.eventPage,
-          groupPage: this.groupPage,
-          limit: EVENT_PAGE_LIMIT,
-          type: this.type,
-          eventCategory: this.eventCategory,
-        };
-      },
-      update(data) {
-        this.searchEvents = data.searchEvents;
-        this.searchGroups = data.searchGroups;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        this.$refs.autocompleteSearchInput?.focus();
-      },
-    },
-    currentUser: CURRENT_USER_CLIENT,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Explore events") as string,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class Search extends Vue {
-  @Prop({ type: String, required: false }) tag!: string;
-
-  events: Paginate<IEvent> = {
-    total: 0,
-    elements: [],
-  };
-
-  searchEvents: Paginate<IEvent> = {
-    total: 0,
-    elements: [],
-  };
-
-  searchGroups: Paginate<IGroup> = { total: 0, elements: [] };
-
-  location: IAddress = new Address();
-
-  currentUser!: ICurrentUser;
-
-  dateOptions: Record<string, ISearchTimeOption> = {
-    past: {
-      label: this.$t("In the past") as string,
-      start: null,
-      end: new Date(),
-    },
-    today: {
-      label: this.$t("Today") as string,
-      start: new Date(),
-      end: endOfToday(),
-    },
-    tomorrow: {
-      label: this.$t("Tomorrow") as string,
-      start: startOfDay(addDays(new Date(), 1)),
-      end: endOfDay(addDays(new Date(), 1)),
-    },
-    weekend: {
-      label: this.$t("This weekend") as string,
-      start: this.weekend.start,
-      end: this.weekend.end,
-    },
-    week: {
-      label: this.$t("This week") as string,
-      start: new Date(),
-      end: endOfWeek(new Date(), { locale: this.$dateFnsLocale }),
-    },
-    next_week: {
-      label: this.$t("Next week") as string,
-      start: startOfWeek(addWeeks(new Date(), 1), {
-        locale: this.$dateFnsLocale,
-      }),
-      end: endOfWeek(addWeeks(new Date(), 1), { locale: this.$dateFnsLocale }),
-    },
-    month: {
-      label: this.$t("This month") as string,
-      start: new Date(),
-      end: endOfMonth(new Date()),
-    },
-    next_month: {
-      label: this.$t("Next month") as string,
-      start: startOfMonth(addMonths(new Date(), 1)),
-      end: endOfMonth(addMonths(new Date(), 1)),
-    },
-    any: {
-      label: this.$t("Any day") as string,
-      start: undefined,
-      end: undefined,
-    },
-  };
-
-  EVENT_PAGE_LIMIT = EVENT_PAGE_LIMIT;
-
-  GROUP_PAGE_LIMIT = GROUP_PAGE_LIMIT;
-
-  $refs!: {
-    aac: FullAddressAutoComplete;
-    autocompleteSearchInput: any;
-  };
-
-  data(): Record<string, unknown> {
-    return {
-      debouncedUpdateSearchQuery: debounce(this.updateSearchQuery, 500),
-    };
-  }
-
-  mounted(): void {
-    this.prepareLocation(this.$route.query.geohash as string);
-  }
-
-  radiusString = (radius: number | null): string => {
-    if (radius) {
-      return this.$tc("{nb} km", radius, { nb: radius }) as string;
-    }
-    return this.$t("any distance") as string;
-  };
-
-  radiusOptions: (number | null)[] = [1, 5, 10, 25, 50, 100, 150, null];
-
-  submit(): void {
-    this.$apollo.queries.searchEvents.refetch();
-  }
-
-  updateSearchQuery(searchQuery: string): void {
-    this.search = searchQuery;
-  }
-
-  get featuredEventPage(): number {
-    return parseInt(this.$route.query.featuredEventPage as string, 10) || 1;
-  }
-
-  set featuredEventPage(page: number) {
-    this.$router.push({
-      name: this.$route.name || RouteName.SEARCH,
-      query: { ...this.$route.query, featuredEventPage: page.toString() },
-    });
-  }
-
-  get eventPage(): number {
-    return parseInt(this.$route.query.eventPage as string, 10) || 1;
-  }
-
-  set eventPage(page: number) {
-    this.$router.push({
-      name: this.$route.name || RouteName.SEARCH,
-      query: { ...this.$route.query, eventPage: page.toString() },
-    });
-  }
-
-  get groupPage(): number {
-    return parseInt(this.$route.query.groupPage as string, 10) || 1;
-  }
-
-  set groupPage(page: number) {
-    this.$router.push({
-      name: this.$route.name || RouteName.SEARCH,
-      query: { ...this.$route.query, groupPage: page.toString() },
-    });
-  }
-
-  get search(): string | undefined {
-    return this.$route.query.term as string;
-  }
-
-  set search(term: string | undefined) {
-    this.$router.replace({
-      name: RouteName.SEARCH,
-      query: { ...this.$route.query, term },
-    });
-  }
-
-  get activeTab(): SearchTabs {
-    return (
-      parseInt(this.$route.query.searchType as string, 10) || SearchTabs.EVENTS
-    );
-  }
-
-  set activeTab(value: SearchTabs) {
-    this.$router.replace({
-      name: RouteName.SEARCH,
-      query: { ...this.$route.query, searchType: value.toString() },
-    });
-  }
-
-  get geohash(): string | undefined {
-    if (this.location?.geom) {
-      const [lon, lat] = this.location.geom.split(";");
-      return ngeohash.encode(lat, lon, GEOHASH_DEPTH);
-    }
-    return undefined;
-  }
-
-  set geohash(value: string | undefined) {
-    this.$router.replace({
-      name: RouteName.SEARCH,
-      query: { ...this.$route.query, geohash: value },
-    });
-  }
-
-  get radius(): number | null {
-    if (this.$route.query.radius === "any") {
-      return null;
-    }
-    return parseInt(this.$route.query.radius as string, 10) || null;
-  }
-
-  set radius(value: number | null) {
-    const radius = value === null ? "any" : value.toString();
-    this.$router.replace({
-      name: RouteName.SEARCH,
-      query: { ...this.$route.query, radius },
-    });
-  }
-
-  get when(): string {
-    return (this.$route.query.when as string) || "any";
-  }
-
-  set when(value: string) {
-    this.$router.replace({
-      name: RouteName.SEARCH,
-      query: { ...this.$route.query, when: value },
-    });
-  }
-
-  get type(): EventType {
-    return this.$route.query.type as EventType;
-  }
-
-  set type(type: EventType) {
-    const query = { ...this.$route.query, type };
-    if (type == null) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      delete query.type;
-    }
-    this.$router.replace({
-      name: RouteName.SEARCH,
-      query,
-    });
-  }
-
-  get eventCategory(): string | null {
-    return (this.$route.query.eventCategory as string) || null;
-  }
-
-  set eventCategory(eventCategory: string | null) {
-    const query = { ...this.$route.query, eventCategory };
-    if (query.eventCategory === null) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      delete query.eventCategory;
-    }
-    this.$router.replace({
-      name: RouteName.SEARCH,
-      query,
-    });
-  }
-
-  get weekend(): { start: Date; end: Date } {
-    const now = new Date();
-    const endOfWeekDate = endOfWeek(now, { locale: this.$dateFnsLocale });
-    const startOfWeekDate = startOfWeek(now, { locale: this.$dateFnsLocale });
-    const [start, end] = eachWeekendOfInterval({
-      start: startOfWeekDate,
-      end: endOfWeekDate,
-    });
-    return { start: startOfDay(start), end: endOfDay(end) };
-  }
-
-  private prepareLocation(value: string | undefined): void {
-    if (value !== undefined) {
-      // decode
-      const latlon = ngeohash.decode(value);
-      // set location
-      this.reverseGeoCode(latlon, DEFAULT_ZOOM);
-    }
-  }
-
-  async reverseGeoCode(e: GeographicPoint, zoom: number): Promise<void> {
-    const result = await this.$apollo.query({
-      query: REVERSE_GEOCODE,
-      variables: {
-        latitude: e.latitude,
-        longitude: e.longitude,
-        zoom,
-        locale: this.$i18n.locale,
-      },
-    });
-    const addressData = result.data.reverseGeocode.map(
-      (address: IAddress) => new Address(address)
-    );
-    if (addressData.length > 0) {
-      this.location = addressData[0];
-    }
-  }
-
-  locchange = (e: IAddress): void => {
-    if (this.radius === undefined || this.radius === null) {
-      this.radius = DEFAULT_RADIUS;
-    }
-    if (e?.geom) {
-      const [lon, lat] = e.geom.split(";");
-      this.geohash = ngeohash.encode(lat, lon, GEOHASH_DEPTH);
-    } else {
-      this.geohash = undefined;
-    }
-  };
-
-  get start(): Date | undefined | null {
-    if (this.dateOptions[this.when]) {
-      return this.dateOptions[this.when].start;
-    }
-    return undefined;
-  }
-
-  get end(): Date | undefined | null {
-    if (this.dateOptions[this.when]) {
-      return this.dateOptions[this.when].end;
-    }
-    return undefined;
-  }
-
-  get canSearchGroups(): boolean {
-    return (
-      this.stringExists(this.search) ||
-      (this.stringExists(this.geohash) && this.valueExists(this.radius))
-    );
-  }
-
-  get canSearchEvents(): boolean {
-    return (
-      this.stringExists(this.search) ||
-      this.stringExists(this.tag) ||
-      this.stringExists(this.type) ||
-      (this.stringExists(this.geohash) && this.valueExists(this.radius)) ||
-      this.valueExists(this.end)
-    );
-  }
-
-  // helper functions for skip
-  private valueExists(value: any): boolean {
-    return value !== undefined && value !== null;
-  }
-
-  private stringExists(value: string | null | undefined): boolean {
-    return this.valueExists(value) && (value as string).length > 0;
-  }
-
-  get searchIsUrl(): boolean {
-    let url;
-    if (!this.search) return false;
-    try {
-      url = new URL(this.search);
-    } catch (_) {
-      return false;
-    }
-
-    return url.protocol === "http:" || url.protocol === "https:";
-  }
-}
-</script>
-
-<style scoped lang="scss">
-@import "~bulma/sass/utilities/mixins.sass";
-main > .container {
-  background: $white;
-
-  .hero-body {
-    padding: 1rem 1.5rem;
-  }
-}
-
-h1.title {
-  margin-top: 1.5rem;
-}
-
-h3.title {
-  margin-bottom: 1.5rem;
-}
-
-.events-featured {
-  margin: 25px auto;
-
-  .columns {
-    margin: 1rem auto 3rem;
-  }
-}
-
-form {
-  display: grid;
-  grid-gap: 0 15px;
-  grid-template-areas: "query" "location" "radius" "date" "type" "category";
-
-  & > * {
-    margin-bottom: 0 !important;
-  }
-
-  @include desktop {
-    grid-template-areas: "query . ." "location radius ." "date type category";
-  }
-
-  .searchQuery {
-    grid-area: query;
-    @include tablet {
-      grid-column: span 4;
-    }
-    @include desktop {
-      grid-column-start: 1;
-      grid-column-end: 5;
-    }
-  }
-
-  .searchLocation {
-    grid-area: location;
-    :v-deep .column {
-      padding-bottom: 0;
-    }
-    @include tablet {
-      grid-column: span 4;
-    }
-    @include desktop {
-      grid-column-start: 1;
-      grid-column-end: 4;
-    }
-  }
-
-  .searchRadius {
-    grid-area: radius;
-    @include desktop {
-      grid-column-start: 4;
-      grid-column-end: 5;
-    }
-  }
-
-  .searchDate {
-    grid-area: date;
-    @include desktop {
-      grid-column-start: 1;
-      grid-column-end: 2;
-    }
-  }
-
-  .searchType {
-    grid-area: type;
-    @include desktop {
-      grid-column-start: 2;
-      grid-column-end: 3;
-    }
-  }
-
-  .searchCategory {
-    grid-area: category;
-    @include desktop {
-      grid-column-start: 3;
-      grid-column-end: 5;
-    }
-  }
-}
-</style>
diff --git a/js/src/views/SearchView.vue b/js/src/views/SearchView.vue
new file mode 100644
index 000000000..57a226ba0
--- /dev/null
+++ b/js/src/views/SearchView.vue
@@ -0,0 +1,1145 @@
+<template>
+  <div class="max-w-4xl mx-auto">
+    <SearchFields
+      class="md:ml-10 mr-2"
+      v-model:search="searchDebounced"
+      v-model:location="location"
+      :locationDefaultText="locationName"
+    />
+  </div>
+  <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 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-4 px-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="globalSearchEnabled"
+        >
+          <fieldset class="flex flex-col">
+            <legend class="sr-only">{{ t("Search target") }}</legend>
+
+            <div>
+              <input
+                id="internalTarget"
+                v-model="searchTarget"
+                type="radio"
+                name="searchTarget"
+                :value="SearchTargets.INTERNAL"
+                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="internalTarget"
+                class="ml-3 font-medium text-gray-900 dark:text-gray-300"
+                >{{ t("In this instance's network") }}</label
+              >
+            </div>
+            <div>
+              <input
+                id="globalTarget"
+                v-model="searchTarget"
+                type="radio"
+                name="searchTarget"
+                :value="SearchTargets.GLOBAL"
+                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="globalTarget"
+                class="ml-3 font-medium text-gray-900 dark:text-gray-300"
+                >{{ t("On the Fediverse") }}</label
+              >
+            </div>
+          </fieldset>
+        </div>
+
+        <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">
+      <div
+        id="results-anchor"
+        class="hidden sm:flex items-center justify-between dark:text-slate-100 mb-2"
+      >
+        <p v-if="totalCount === 0">
+          <span v-if="contentType === ContentType.EVENTS">{{
+            t("No events found")
+          }}</span>
+          <span v-else-if="contentType === ContentType.GROUPS">{{
+            t("No groups found")
+          }}</span>
+          <span v-else>{{ t("No results found") }}</span>
+        </p>
+        <p v-else>
+          <span v-if="contentType === 'EVENTS'">
+            {{
+              t(
+                "{eventsCount} events found",
+                { eventsCount: searchEvents?.total },
+                searchEvents?.total ?? 0
+              )
+            }}
+          </span>
+          <span v-else-if="contentType === 'GROUPS'">
+            {{
+              t(
+                "{groupsCount} groups found",
+                { groupsCount: searchGroups?.total },
+                searchGroups?.total ?? 0
+              )
+            }}
+          </span>
+          <span v-else>
+            {{
+              t(
+                "{resultsCount} results found",
+                { resultsCount: totalCount },
+                totalCount
+              )
+            }}
+          </span>
+        </p>
+        <div class="flex gap-2">
+          <label class="sr-only" for="sortOptionSelect">{{
+            t("Sort by")
+          }}</label>
+          <o-select
+            :placeholder="t('Sort by')"
+            v-model="sortBy"
+            id="sortOptionSelect"
+          >
+            <option
+              v-for="sortOption in sortOptions"
+              :key="sortOption.key"
+              :value="sortOption.key"
+            >
+              {{ sortOption.label }}
+            </option>
+          </o-select>
+          <o-button
+            v-show="!isOnline"
+            @click="
+              () =>
+                (mode = mode === ViewMode.MAP ? ViewMode.LIST : ViewMode.MAP)
+            "
+            :icon-left="mode === ViewMode.MAP ? 'view-list' : 'map'"
+          >
+            <span v-if="mode === ViewMode.LIST">
+              {{ t("Map") }}
+            </span>
+            <span v-else-if="mode === ViewMode.MAP">
+              {{ t("List") }}
+            </span>
+          </o-button>
+        </div>
+      </div>
+      <div v-if="mode === ViewMode.LIST">
+        <template v-if="contentType === ContentType.ALL">
+          <o-notification v-if="features && !features.groups" variant="danger">
+            {{ t("Groups are not enabled on this instance.") }}
+          </o-notification>
+          <div v-else-if="searchGroups && searchGroups?.total > 0">
+            <GroupCard
+              v-for="group in searchGroups?.elements"
+              :group="group"
+              :key="group.id"
+              :isRemoteGroup="group.__typename === 'GroupResult'"
+              :isLoggedIn="currentUser?.isLoggedIn"
+              mode="row"
+            />
+            <o-pagination
+              v-if="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") }}
+          </o-notification>
+          <div v-if="searchEvents && searchEvents.total > 0">
+            <event-card
+              mode="row"
+              v-for="event in searchEvents?.elements"
+              :event="event"
+              :key="event.uuid"
+              :options="{
+                isRemoteEvent: event.__typename === 'EventResult',
+                isLoggedIn: currentUser?.isLoggedIn,
+              }"
+              class="my-4"
+            />
+            <o-pagination
+              v-if="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')"
+            >
+            </o-pagination>
+          </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>
+        </template>
+        <template v-else-if="contentType === ContentType.EVENTS">
+          <template v-if="searchEvents && searchEvents.total > 0">
+            <event-card
+              mode="row"
+              v-for="event in searchEvents?.elements"
+              :event="event"
+              :key="event.uuid"
+              :options="{
+                isRemoteEvent: event.__typename === 'EventResult',
+                isLoggedIn: currentUser?.isLoggedIn,
+              }"
+              class="my-4"
+            />
+            <o-pagination
+              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')"
+            >
+            </o-pagination>
+          </template>
+          <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>
+        </template>
+        <template v-else-if="contentType === ContentType.GROUPS">
+          <o-notification v-if="features && !features.groups" variant="danger">
+            {{ t("Groups are not enabled on this instance.") }}
+          </o-notification>
+
+          <template v-else-if="searchGroups && searchGroups?.total > 0">
+            <GroupCard
+              v-for="group in searchGroups?.elements"
+              :group="group"
+              :key="group.id"
+              :isRemoteGroup="group.__typename === 'GroupResult'"
+              :isLoggedIn="currentUser?.isLoggedIn"
+              mode="row"
+            />
+            <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>
+          </template>
+          <o-notification v-else-if="searchLoading === false" variant="danger">
+            {{ t("No groups found") }}
+          </o-notification>
+        </template>
+      </div>
+      <event-marker-map
+        v-if="mode === ViewMode.MAP"
+        :contentType="contentType"
+        :latitude="latitude"
+        :longitude="longitude"
+        :locationName="locationName"
+        @map-updated="setBounds"
+        :events="searchEvents"
+        :groups="searchGroups"
+        :isLoggedIn="currentUser?.isLoggedIn"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  endOfToday,
+  addDays,
+  startOfDay,
+  endOfDay,
+  endOfWeek,
+  addWeeks,
+  startOfWeek,
+  endOfMonth,
+  addMonths,
+  startOfMonth,
+  eachWeekendOfInterval,
+} from "date-fns";
+import { ContentType, EventStatus, SearchTargets } from "@/types/enums";
+import EventCard from "@/components/Event/EventCard.vue";
+import { IEvent } from "@/types/event.model";
+import { SEARCH_EVENTS_AND_GROUPS } from "@/graphql/search";
+import { Paginate } from "@/types/paginate";
+import { IGroup } from "@/types/actor";
+import GroupCard from "@/components/Group/GroupCard.vue";
+import { CURRENT_USER_CLIENT } from "@/graphql/user";
+import { ICurrentUser } from "@/types/current-user.model";
+import { useQuery } from "@vue/apollo-composable";
+import { computed, inject, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  floatTransformer,
+  integerTransformer,
+  useRouteQuery,
+  enumTransformer,
+  booleanTransformer,
+  RouteQueryTransformer,
+} from "vue-use-route-query";
+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,
+  useSearchConfig,
+} from "@/composition/apollo/config";
+import { coordsToGeoHash } from "@/utils/location";
+import SearchFields from "@/components/Home/SearchFields.vue";
+import { refDebounced } from "@vueuse/core";
+import { IAddress } from "@/types/address.model";
+import { IConfig } from "@/types/config.model";
+import { TypeNamed } from "@/types/apollo";
+import EventMarkerMap from "@/components/Search/EventMarkerMap.vue";
+import { LatLngBounds } from "leaflet";
+
+const search = useRouteQuery("search", "");
+const searchDebounced = refDebounced(search, 1000);
+const locationName = useRouteQuery("locationName", null);
+const location = ref<IAddress | null>(null);
+
+watch(location, (newLocation) => {
+  console.debug("location change", newLocation);
+  if (newLocation?.geom) {
+    latitude.value = parseFloat(newLocation?.geom.split(";")[1]);
+    longitude.value = parseFloat(newLocation?.geom.split(";")[0]);
+    locationName.value = newLocation?.description;
+    console.debug("set location", [
+      latitude.value,
+      longitude.value,
+      locationName.value,
+    ]);
+  } else {
+    console.debug("location emptied");
+    latitude.value = undefined;
+    longitude.value = undefined;
+    locationName.value = null;
+  }
+});
+
+interface ISearchTimeOption {
+  label: string;
+  start?: string | null;
+  end?: string | null;
+}
+
+enum ViewMode {
+  LIST = "list",
+  MAP = "map",
+}
+
+enum SortValues {
+  MATCH_DESC = "-match",
+  START_TIME_DESC = "-startTime",
+  CREATED_AT_DESC = "-createdAt",
+  CREATED_AT_ASC = "createdAt",
+  PARTICIPANT_COUNT_DESC = "-participantCount",
+  MEMBER_COUNT_DESC = "-memberCount",
+}
+
+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 latitude = useRouteQuery("lat", undefined, floatTransformer);
+const longitude = useRouteQuery("lon", undefined, floatTransformer);
+
+const distance = useRouteQuery("distance", "10_km");
+const when = useRouteQuery("when", "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 searchTarget = useRouteQuery(
+  "target",
+  SearchTargets.INTERNAL,
+  enumTransformer(SearchTargets)
+);
+const mode = useRouteQuery("mode", ViewMode.LIST, enumTransformer(ViewMode));
+const sortBy = useRouteQuery(
+  "sortBy",
+  SortValues.MATCH_DESC,
+  enumTransformer(SortValues)
+);
+const bbox = useRouteQuery("bbox", undefined);
+const zoom = useRouteQuery("zoom", undefined, integerTransformer);
+
+const EVENT_PAGE_LIMIT = 16;
+
+const GROUP_PAGE_LIMIT = 16;
+
+const props = defineProps<{
+  tag?: string;
+}>();
+
+const { features } = useFeatures();
+const { eventCategories } = useEventCategories();
+
+const searchEvents = computed(() => searchElementsResult.value?.searchEvents);
+const searchGroups = computed(() => searchElementsResult.value?.searchGroups);
+
+const { result: currentUserResult } = useQuery<{ currentUser: ICurrentUser }>(
+  CURRENT_USER_CLIENT
+);
+
+const currentUser = computed(() => currentUserResult.value?.currentUser);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Explore events")),
+});
+
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+
+const weekend = computed((): { start: Date; end: Date } => {
+  const now = new Date();
+  const endOfWeekDate = endOfWeek(now, { locale: dateFnsLocale });
+  const startOfWeekDate = startOfWeek(now, { locale: dateFnsLocale });
+  const [start, end] = eachWeekendOfInterval({
+    start: startOfWeekDate,
+    end: endOfWeekDate,
+  });
+  return { start: startOfDay(start), end: endOfDay(end) };
+});
+
+const dateOptions: Record<string, ISearchTimeOption> = {
+  past: {
+    label: t("In the past") as string,
+    start: null,
+    end: new Date().toISOString(),
+  },
+  today: {
+    label: t("Today") as string,
+    start: new Date().toISOString(),
+    end: endOfToday().toISOString(),
+  },
+  tomorrow: {
+    label: t("Tomorrow") as string,
+    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.toISOString(),
+    end: weekend.value.end.toISOString(),
+  },
+  week: {
+    label: t("This week") as string,
+    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,
+    }).toISOString(),
+    end: endOfWeek(addWeeks(new Date(), 1), {
+      locale: dateFnsLocale,
+    }).toISOString(),
+  },
+  month: {
+    label: t("This month") as string,
+    start: new Date().toISOString(),
+    end: endOfMonth(new Date()).toISOString(),
+  },
+  next_month: {
+    label: t("Next month") as string,
+    start: startOfMonth(addMonths(new Date(), 1)).toISOString(),
+    end: endOfMonth(addMonths(new Date(), 1)).toISOString(),
+  },
+  any: {
+    label: t("Any day") as string,
+    start: new Date().toISOString(),
+    end: null,
+  },
+};
+
+const start = computed((): string | undefined | null => {
+  if (dateOptions[when.value]) {
+    return dateOptions[when.value].start;
+  }
+  return undefined;
+});
+
+const end = computed((): string | undefined | null => {
+  if (dateOptions[when.value]) {
+    return dateOptions[when.value].end;
+  }
+  return undefined;
+});
+
+const searchIsUrl = computed((): boolean => {
+  let url;
+  if (!searchDebounced.value) return false;
+  try {
+    url = new URL(searchDebounced.value);
+  } catch (_) {
+    return false;
+  }
+
+  return url.protocol === "http:" || url.protocol === "https:";
+});
+
+const contentTypeMapping = computed(() => {
+  return [
+    {
+      contentType: "ALL",
+      label: t("Everything"),
+    },
+    {
+      contentType: "EVENTS",
+      label: t("Events"),
+    },
+    {
+      contentType: "GROUPS",
+      label: t("Groups"),
+    },
+  ];
+});
+
+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 geoHashLocation = computed(() =>
+  coordsToGeoHash(latitude.value, longitude.value)
+);
+
+const radius = computed(() => Number.parseInt(distance.value.slice(0, -3)));
+
+const totalCount = computed(() => {
+  return (searchEvents.value?.total ?? 0) + (searchGroups.value?.total ?? 0);
+});
+
+const sortOptions = computed(() => {
+  const options = [
+    {
+      key: SortValues.MATCH_DESC,
+      label: t("Best match"),
+    },
+  ];
+
+  if (contentType.value == ContentType.EVENTS) {
+    options.push(
+      {
+        key: SortValues.START_TIME_DESC,
+        label: t("Event date"),
+      },
+      {
+        key: SortValues.CREATED_AT_DESC,
+        label: t("Most recently published"),
+      },
+      {
+        key: SortValues.CREATED_AT_ASC,
+        label: t("Least recently published"),
+      },
+      {
+        key: SortValues.PARTICIPANT_COUNT_DESC,
+        label: t("With the most participants"),
+      }
+    );
+  }
+
+  if (contentType.value == ContentType.GROUPS) {
+    options.push({
+      key: SortValues.MEMBER_COUNT_DESC,
+      label: t("Number of members"),
+    });
+  }
+
+  return options;
+});
+
+const { searchConfig, onResult: onSearchConfigResult } = useSearchConfig();
+
+onSearchConfigResult(({ data }) =>
+  handleSearchConfigChanged(data?.config?.search)
+);
+
+const handleSearchConfigChanged = (
+  searchConfigChanged: IConfig["search"] | undefined
+) => {
+  if (
+    searchConfigChanged?.global?.isEnabled &&
+    searchConfigChanged?.global?.isDefault
+  ) {
+    searchTarget.value = SearchTargets.GLOBAL;
+  }
+};
+
+watch(searchConfig, (newSearchConfig) =>
+  handleSearchConfigChanged(newSearchConfig)
+);
+
+const globalSearchEnabled = computed(
+  () => searchConfig.value?.global?.isEnabled
+);
+
+const setBounds = ({
+  bounds,
+  zoom: boundsZoom,
+}: {
+  bounds: LatLngBounds;
+  zoom: number;
+}) => {
+  bbox.value = `${bounds.getNorthWest().lat}, ${bounds.getNorthWest().lng}:${
+    bounds.getSouthEast().lat
+  }, ${bounds.getSouthEast().lng}`;
+  zoom.value = boundsZoom;
+};
+
+watch(mode, (newMode) => {
+  if (newMode === ViewMode.MAP) {
+    isOnline.value = false;
+  }
+});
+
+watch(isOnline, (newIsOnline) => {
+  if (newIsOnline) {
+    mode.value = ViewMode.LIST;
+  }
+});
+
+const { result: searchElementsResult, loading: searchLoading } = useQuery<{
+  searchEvents: Paginate<TypeNamed<IEvent>>;
+  searchGroups: Paginate<TypeNamed<IGroup>>;
+}>(SEARCH_EVENTS_AND_GROUPS, () => ({
+  term: searchDebounced.value,
+  tags: props.tag,
+  location: geoHashLocation.value,
+  beginsOn: start.value,
+  endsOn: end.value,
+  radius: geoHashLocation.value ? radius.value : undefined,
+  eventPage: eventPage.value,
+  groupPage: groupPage.value,
+  limit: EVENT_PAGE_LIMIT,
+  type: isOnline.value ? "ONLINE" : undefined,
+  categoryOneOf: categoryOneOf.value,
+  statusOneOf: statusOneOf.value,
+  languageOneOf: languageOneOf.value,
+  searchTarget: searchTarget.value,
+  bbox: bbox.value,
+  zoom: zoom.value,
+}));
+</script>
diff --git a/js/src/views/Settings.vue b/js/src/views/Settings.vue
deleted file mode 100644
index 28f3a748b..000000000
--- a/js/src/views/Settings.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="section container">
-    <h1 class="title">{{ $t("Settings") }}</h1>
-    <div class="columns">
-      <SettingsMenu class="column is-one-quarter-desktop" />
-      <div class="column">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import SettingsMenu from "../components/Settings/SettingsMenu.vue";
-import RouteName from "../router/name";
-import { IPerson, Person } from "../types/actor";
-import { IDENTITIES } from "../graphql/actor";
-import { CURRENT_USER_CLIENT } from "../graphql/user";
-import { ICurrentUser } from "../types/current-user.model";
-
-@Component({
-  components: { SettingsMenu },
-  apollo: {
-    identities: {
-      query: IDENTITIES,
-      update: (data) =>
-        data.identities.map((identity: IPerson) => new Person(identity)),
-    },
-    currentUser: CURRENT_USER_CLIENT,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Settings") as string,
-    };
-  },
-})
-export default class Settings extends Vue {
-  RouteName = RouteName;
-
-  identities!: IPerson[];
-
-  currentUser!: ICurrentUser;
-}
-</script>
-
-<style lang="scss" scoped>
-aside.section {
-  padding-top: 1rem;
-}
-.breadcrumb ul li a {
-  text-decoration: none;
-}
-</style>
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index dbef8d39e..eafb64894 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -4,44 +4,48 @@
       :links="[
         {
           name: RouteName.ACCOUNT_SETTINGS,
-          text: $t('Account'),
+          text: t('Account'),
         },
         {
           name: RouteName.ACCOUNT_SETTINGS_GENERAL,
-          text: $t('General'),
+          text: t('General'),
         },
       ]"
     />
     <section>
-      <div class="setting-title">
-        <h2>{{ $t("Email") }}</h2>
-      </div>
-      <i18n
+      <h2>{{ t("Email") }}</h2>
+      <i18n-t
         tag="p"
-        class="content"
+        class="prose dark:prose-invert"
         v-if="loggedUser"
-        path="Your current email is {email}. You use it to log in."
+        keypath="Your current email is {email}. You use it to log in."
+      >
+        <template #email>
+          <b>{{ loggedUser.email }}</b>
+        </template>
+      </i18n-t>
+      <o-notification
+        v-if="!canChangeEmail && loggedUser.provider"
+        variant="warning"
+        :closable="false"
       >
-        <b slot="email">{{ loggedUser.email }}</b>
-      </i18n>
-      <b-message v-if="!canChangeEmail" type="is-warning" :closable="false">
         {{
-          $t(
+          t(
             "Your email address was automatically set based on your {provider} account.",
             {
               provider: providerName(loggedUser.provider),
             }
           )
         }}
-      </b-message>
-      <b-notification
-        type="is-danger"
+      </o-notification>
+      <o-notification
+        variant="danger"
         has-icon
         aria-close-label="Close notification"
         role="alert"
         :key="error"
         v-for="error in changeEmailErrors"
-        >{{ error }}</b-notification
+        >{{ error }}</o-notification
       >
       <form
         @submit.prevent="resetEmailAction"
@@ -49,18 +53,18 @@
         class="form"
         v-if="canChangeEmail"
       >
-        <b-field :label="$t('New email')" label-for="account-email">
-          <b-input
+        <o-field :label="t('New email')" label-for="account-email">
+          <o-input
             aria-required="true"
             required
             type="email"
             id="account-email"
             v-model="newEmail"
           />
-        </b-field>
-        <p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
-        <b-field :label="$t('Password')" label-for="account-password">
-          <b-input
+        </o-field>
+        <p class="help">{{ t("You'll receive a confirmation email.") }}</p>
+        <o-field :label="t('Password')" label-for="account-password">
+          <o-input
             aria-required="true"
             required
             type="password"
@@ -69,35 +73,38 @@
             minlength="6"
             v-model="passwordForEmailChange"
           />
-        </b-field>
-        <button
-          class="button is-primary"
-          :disabled="!($refs.emailForm && $refs.emailForm.checkValidity())"
+        </o-field>
+        <o-button
+          class="mt-2"
+          variant="primary"
+          :disabled="!(emailForm && emailForm.checkValidity())"
         >
-          {{ $t("Change my email") }}
-        </button>
+          {{ t("Change my email") }}
+        </o-button>
       </form>
-      <div class="setting-title">
-        <h2>{{ $t("Password") }}</h2>
-      </div>
-      <b-message v-if="!canChangePassword" type="is-warning" :closable="false">
+      <h2 class="mt-2">{{ t("Password") }}</h2>
+      <o-notification
+        v-if="!canChangePassword"
+        variant="warning"
+        :closable="false"
+      >
         {{
-          $t(
+          t(
             "You can't change your password because you are registered through {provider}.",
             {
               provider: providerName(loggedUser.provider),
             }
           )
         }}
-      </b-message>
-      <b-notification
-        type="is-danger"
+      </o-notification>
+      <o-notification
+        variant="danger"
         has-icon
         aria-close-label="Close notification"
         role="alert"
         :key="error"
         v-for="error in changePasswordErrors"
-        >{{ error }}</b-notification
+        >{{ error }}</o-notification
       >
       <form
         @submit.prevent="resetPasswordAction"
@@ -105,8 +112,8 @@
         class="form"
         v-if="canChangePassword"
       >
-        <b-field :label="$t('Old password')" label-for="account-old-password">
-          <b-input
+        <o-field :label="t('Old password')" label-for="account-old-password">
+          <o-input
             aria-required="true"
             required
             type="password"
@@ -115,9 +122,9 @@
             id="account-old-password"
             v-model="oldPassword"
           />
-        </b-field>
-        <b-field :label="$t('New password')" label-for="account-new-password">
-          <b-input
+        </o-field>
+        <o-field :label="t('New password')" label-for="account-new-password">
+          <o-input
             aria-required="true"
             required
             type="password"
@@ -126,302 +133,287 @@
             id="account-new-password"
             v-model="newPassword"
           />
-        </b-field>
-        <button
-          class="button is-primary"
-          :disabled="
-            !($refs.passwordForm && $refs.passwordForm.checkValidity())
-          "
+        </o-field>
+        <o-button
+          class="mt-2"
+          variant="primary"
+          :disabled="!(passwordForm && passwordForm.checkValidity())"
         >
-          {{ $t("Change my password") }}
-        </button>
+          {{ t("Change my password") }}
+        </o-button>
       </form>
-      <div class="setting-title">
-        <h2>{{ $t("Delete account") }}</h2>
-      </div>
-      <p class="content">
-        {{ $t("Deleting my account will delete all of my identities.") }}
+      <h2 class="mt-2">{{ t("Delete account") }}</h2>
+      <p class="prose dark:prose-invert">
+        {{ t("Deleting my account will delete all of my identities.") }}
       </p>
-      <b-button @click="openDeleteAccountModal" type="is-danger">
-        {{ $t("Delete my account") }}
-      </b-button>
+      <o-button @click="openDeleteAccountModal" variant="danger" class="mb-4">
+        {{ t("Delete my account") }}
+      </o-button>
 
-      <b-modal
-        :close-button-aria-label="$t('Close')"
-        :active.sync="isDeleteAccountModalActive"
+      <o-modal
+        :close-button-aria-label="t('Close')"
+        v-model:active="isDeleteAccountModalActive"
         has-modal-card
         full-screen
         :can-cancel="false"
       >
-        <section class="hero is-primary is-fullheight">
-          <div class="hero-body has-text-centered">
-            <div class="container">
-              <div class="columns">
-                <div
-                  class="column is-one-third-desktop is-offset-one-third-desktop"
-                >
+        <section class="">
+          <div class="">
+            <div class="container mx-auto max-w-md">
+              <div class="">
+                <div class="">
                   <h1 class="title">
-                    {{ $t("Deleting your Mobilizon account") }}
+                    {{ t("Deleting your Mobilizon account") }}
                   </h1>
-                  <p class="content">
+                  <p class="prose dark:prose-invert">
                     {{
-                      $t(
+                      t(
                         "Are you really sure you want to delete your whole account? You'll lose everything. Identities, settings, events created, messages and participations will be gone forever."
                       )
                     }}
                     <br />
-                    <b>{{
-                      $t("There will be no way to recover your data.")
-                    }}</b>
+                    <b>{{ t("There will be no way to recover your data.") }}</b>
                   </p>
-                  <p class="content" v-if="hasUserGotAPassword">
+                  <p class="prose dark:prose-invert" v-if="hasUserGotAPassword">
                     {{
-                      $t("Please enter your password to confirm this action.")
+                      t("Please enter your password to confirm this action.")
                     }}
                   </p>
                   <form @submit.prevent="deleteAccount">
-                    <b-field
+                    <o-field
                       :type="deleteAccountPasswordFieldType"
                       v-if="hasUserGotAPassword"
                       label-for="account-deletion-password"
                     >
-                      <b-input
+                      <o-input
                         type="password"
                         v-model="passwordForAccountDeletion"
                         password-reveal
                         id="account-deletion-password"
-                        :aria-label="$t('Password')"
+                        :aria-label="t('Password')"
                         icon="lock"
-                        :placeholder="$t('Password')"
+                        :placeholder="t('Password')"
                       />
                       <template #message>
-                        <b-message
-                          type="is-danger"
+                        <o-notification
+                          variant="danger"
                           v-for="message in deletePasswordErrors"
                           :key="message"
                         >
                           {{ message }}
-                        </b-message>
+                        </o-notification>
                       </template>
-                    </b-field>
-                    <b-button
+                    </o-field>
+                    <o-button
+                      class="mt-2"
                       native-type="submit"
-                      type="is-danger"
-                      size="is-large"
+                      variant="danger"
+                      size="large"
                     >
-                      {{ $t("Delete everything") }}
-                    </b-button>
+                      {{ t("Delete everything") }}
+                    </o-button>
                   </form>
-                  <div class="cancel-button">
-                    <b-button
-                      type="is-light"
+                  <div class="mt-4">
+                    <o-button
+                      variant="light"
                       @click="isDeleteAccountModalActive = false"
                     >
-                      {{ $t("Cancel") }}
-                    </b-button>
+                      {{ t("Cancel") }}
+                    </o-button>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </section>
-      </b-modal>
+      </o-modal>
     </section>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { useLoggedUser } from "@/composition/apollo/user";
+import { Notifier } from "@/plugins/notifier";
 import { IAuthProvider } from "@/types/enums";
+import { useMutation } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
 import { GraphQLError } from "graphql/error/GraphQLError";
-import { Component, Vue, Ref } from "vue-property-decorator";
-import { Route } from "vue-router";
+import { computed, inject, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import {
   CHANGE_EMAIL,
   CHANGE_PASSWORD,
   DELETE_ACCOUNT,
-  LOGGED_USER,
 } from "../../graphql/user";
 import RouteName from "../../router/name";
-import { IUser } from "../../types/current-user.model";
 import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
+import { useProgrammatic } from "@oruga-ui/oruga-next";
 
-@Component({
-  apollo: {
-    loggedUser: LOGGED_USER,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("General settings") as string,
-    };
-  },
-})
-export default class AccountSettings extends Vue {
-  @Ref("passwordForm") readonly passwordForm!: HTMLElement;
+const { t } = useI18n({ useScope: "global" });
 
-  loggedUser!: IUser;
+const { loggedUser } = useLoggedUser();
 
-  passwordForEmailChange = "";
+useHead({
+  title: computed(() => t("General settings")),
+});
 
-  newEmail = "";
+const passwordForm = ref<HTMLElement>();
+const emailForm = ref<HTMLElement>();
 
-  changeEmailErrors: string[] = [];
+const passwordForEmailChange = ref("");
+const newEmail = ref("");
+const changeEmailErrors = ref<string[]>([]);
+const oldPassword = ref("");
+const newPassword = ref("");
+const changePasswordErrors = ref<string[]>([]);
+const deletePasswordErrors = ref<string[]>([]);
+const isDeleteAccountModalActive = ref(false);
+const passwordForAccountDeletion = ref("");
 
-  oldPassword = "";
+const notifier = inject<Notifier>("notifier");
 
-  newPassword = "";
+const {
+  mutate: changeEmailMutation,
+  onDone: changeEmailMutationDone,
+  onError: changeEmailMutationError,
+} = useMutation(CHANGE_EMAIL);
 
-  changePasswordErrors: string[] = [];
+changeEmailMutationDone(() => {
+  notifier?.info(
+    t(
+      "The account's email address was changed. Check your emails to verify it."
+    )
+  );
+  newEmail.value = "";
+  passwordForEmailChange.value = "";
+});
 
-  deletePasswordErrors: string[] = [];
+changeEmailMutationError((err) => {
+  handleErrors("email", err);
+});
 
-  isDeleteAccountModalActive = false;
+const resetEmailAction = async (): Promise<void> => {
+  changeEmailErrors.value = [];
 
-  passwordForAccountDeletion = "";
+  changeEmailMutation({
+    email: newEmail.value,
+    password: passwordForEmailChange.value,
+  });
+};
 
-  RouteName = RouteName;
+const {
+  mutate: changePasswordMutation,
+  onDone: onChangePasswordMutationDone,
+  onError: onChangePasswordMutationError,
+} = useMutation(CHANGE_PASSWORD);
 
-  async resetEmailAction(): Promise<void> {
-    this.changeEmailErrors = [];
+onChangePasswordMutationDone(() => {
+  oldPassword.value = "";
+  newPassword.value = "";
+  notifier?.success(t("The password was successfully changed"));
+});
 
-    try {
-      await this.$apollo.mutate({
-        mutation: CHANGE_EMAIL,
-        variables: {
-          email: this.newEmail,
-          password: this.passwordForEmailChange,
-        },
-      });
+onChangePasswordMutationError((err) => {
+  handleErrors("password", err);
+});
 
-      this.$notifier.info(
-        this.$t(
-          "The account's email address was changed. Check your emails to verify it."
-        ) as string
-      );
-      this.newEmail = "";
-      this.passwordForEmailChange = "";
-    } catch (err: any) {
-      this.handleErrors("email", err);
-    }
+const resetPasswordAction = async (): Promise<void> => {
+  changePasswordErrors.value = [];
+
+  changePasswordMutation({
+    oldPassword: oldPassword.value,
+    newPassword: newPassword.value,
+  });
+};
+
+const openDeleteAccountModal = (): void => {
+  passwordForAccountDeletion.value = "";
+  isDeleteAccountModalActive.value = true;
+};
+
+const router = useRouter();
+
+const {
+  mutate: deleteAccountMutation,
+  onDone: deleteAccountMutationDone,
+  onError: deleteAccountMutationError,
+} = useMutation<{ deleteAccount: { id: string } }, { password?: string }>(
+  DELETE_ACCOUNT
+);
+
+const { oruga } = useProgrammatic();
+
+deleteAccountMutationDone(async () => {
+  console.debug("Deleted account, logging out client...");
+  await logout(false);
+  oruga.notification.open({
+    message: t("Your account has been successfully deleted"),
+    variant: "success",
+    position: "bottom-right",
+    duration: 5000,
+  });
+
+  return router.push({ name: RouteName.HOME });
+});
+
+deleteAccountMutationError((err) => {
+  deletePasswordErrors.value = err.graphQLErrors.map(
+    ({ message }: GraphQLError) => message
+  );
+});
+
+const deleteAccount = () => {
+  deletePasswordErrors.value = [];
+  console.debug("Asking to delete account...");
+  deleteAccountMutation({
+    password: hasUserGotAPassword.value
+      ? passwordForAccountDeletion.value
+      : undefined,
+  });
+};
+
+const canChangePassword = computed((): boolean => {
+  return !loggedUser.value?.provider;
+});
+
+const canChangeEmail = computed((): boolean => {
+  return !loggedUser.value?.provider;
+});
+
+const providerName = (id: string): string => {
+  if (SELECTED_PROVIDERS[id]) {
+    return SELECTED_PROVIDERS[id];
   }
+  return id;
+};
 
-  async resetPasswordAction(): Promise<void> {
-    this.changePasswordErrors = [];
+const hasUserGotAPassword = computed((): boolean => {
+  return (
+    loggedUser.value?.provider == null ||
+    loggedUser.value?.provider === IAuthProvider.LDAP
+  );
+});
 
-    try {
-      await this.$apollo.mutate({
-        mutation: CHANGE_PASSWORD,
-        variables: {
-          oldPassword: this.oldPassword,
-          newPassword: this.newPassword,
-        },
-      });
+const deleteAccountPasswordFieldType = computed((): string | null => {
+  return deletePasswordErrors.value.length > 0 ? "is-danger" : null;
+});
 
-      this.oldPassword = "";
-      this.newPassword = "";
-      this.$notifier.success(
-        this.$t("The password was successfully changed") as string
-      );
-    } catch (err: any) {
-      this.handleErrors("password", err);
-    }
+const handleErrors = (type: string, err: any) => {
+  console.error(err);
+
+  if (err.graphQLErrors !== undefined) {
+    err.graphQLErrors.forEach(({ message }: { message: string }) => {
+      switch (type) {
+        case "password":
+          changePasswordErrors.value.push(message);
+          break;
+        case "email":
+        default:
+          changeEmailErrors.value.push(message);
+          break;
+      }
+    });
   }
-
-  protected openDeleteAccountModal(): void {
-    this.passwordForAccountDeletion = "";
-    this.isDeleteAccountModalActive = true;
-  }
-
-  async deleteAccount(): Promise<Route | void> {
-    try {
-      this.deletePasswordErrors = [];
-      console.debug("Asking to delete account...");
-      await this.$apollo.mutate({
-        mutation: DELETE_ACCOUNT,
-        variables: {
-          password: this.hasUserGotAPassword
-            ? this.passwordForAccountDeletion
-            : null,
-        },
-      });
-      console.debug("Deleted account, logging out client...");
-      await logout(this.$apollo.provider.defaultClient, false);
-      this.$buefy.notification.open({
-        message: this.$t(
-          "Your account has been successfully deleted"
-        ) as string,
-        type: "is-success",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-
-      return await this.$router.push({ name: RouteName.HOME });
-    } catch (err: any) {
-      this.deletePasswordErrors = err.graphQLErrors.map(
-        ({ message }: GraphQLError) => message
-      );
-    }
-  }
-
-  get canChangePassword(): boolean {
-    return !this.loggedUser.provider;
-  }
-
-  get canChangeEmail(): boolean {
-    return !this.loggedUser.provider;
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  providerName(id: string): string {
-    if (SELECTED_PROVIDERS[id]) {
-      return SELECTED_PROVIDERS[id];
-    }
-    return id;
-  }
-
-  get hasUserGotAPassword(): boolean {
-    return (
-      this.loggedUser &&
-      (this.loggedUser.provider == null ||
-        this.loggedUser.provider === IAuthProvider.LDAP)
-    );
-  }
-
-  get deleteAccountPasswordFieldType(): string | null {
-    return this.deletePasswordErrors.length > 0 ? "is-danger" : null;
-  }
-
-  private handleErrors(type: string, err: any) {
-    console.error(err);
-
-    if (err.graphQLErrors !== undefined) {
-      err.graphQLErrors.forEach(({ message }: { message: string }) => {
-        switch (type) {
-          case "password":
-            this.changePasswordErrors.push(message);
-            break;
-          case "email":
-          default:
-            this.changeEmailErrors.push(message);
-            break;
-        }
-      });
-    }
-  }
-}
+};
 </script>
-
-<style lang="scss" scoped>
-.modal.is-active.is-full-screen {
-  .help.is-danger {
-    font-size: 1rem;
-  }
-}
-
-.cancel-button {
-  margin-top: 2rem;
-}
-
-::v-deep .modal .modal-background {
-  background-color: initial;
-}
-</style>
diff --git a/js/src/views/Settings/Notifications.vue b/js/src/views/Settings/Notifications.vue
deleted file mode 100644
index 2c463c97d..000000000
--- a/js/src/views/Settings/Notifications.vue
+++ /dev/null
@@ -1,800 +0,0 @@
-<template>
-  <div v-if="loggedUser">
-    <breadcrumbs-nav
-      :links="[
-        {
-          name: RouteName.ACCOUNT_SETTINGS,
-          text: $t('Account'),
-        },
-        {
-          name: RouteName.NOTIFICATIONS,
-          text: $t('Notifications'),
-        },
-      ]"
-    />
-    <section>
-      <div class="setting-title">
-        <h2>{{ $t("Browser notifications") }}</h2>
-      </div>
-      <b-button
-        v-if="subscribed"
-        @click="unsubscribeToWebPush()"
-        @keyup.enter="unsubscribeToWebPush()"
-        >{{ $t("Unsubscribe to browser push notifications") }}</b-button
-      >
-      <b-button
-        icon-left="rss"
-        @click="subscribeToWebPush"
-        @keyup.enter="subscribeToWebPush"
-        v-else-if="canShowWebPush && webPushEnabled"
-        >{{ $t("Activate browser push notifications") }}</b-button
-      >
-      <b-message type="is-warning" v-else-if="!webPushEnabled">
-        {{ $t("This instance hasn't got push notifications enabled.") }}
-        <i18n path="Ask your instance admin to {enable_feature}.">
-          <a
-            slot="enable_feature"
-            href="https://docs.joinmobilizon.org/administration/configure/push/"
-            target="_blank"
-            rel="noopener noreferer"
-            >{{ $t("enable the feature") }}</a
-          >
-        </i18n>
-      </b-message>
-      <b-message type="is-danger" v-else>{{
-        $t("You can't use push notifications in this browser.")
-      }}</b-message>
-    </section>
-    <section>
-      <div class="setting-title">
-        <h2>{{ $t("Notification settings") }}</h2>
-      </div>
-      <p>
-        {{
-          $t(
-            "Select the activities for which you wish to receive an email or a push notification."
-          )
-        }}
-      </p>
-      <table class="table">
-        <tbody>
-          <template v-for="notificationType in notificationTypes">
-            <tr :key="`${notificationType.label}-title`">
-              <th colspan="3">
-                {{ notificationType.label }}
-              </th>
-            </tr>
-            <tr :key="`${notificationType.label}-subtitle`">
-              <th v-for="(method, key) in notificationMethods" :key="key">
-                {{ method }}
-              </th>
-              <th>{{ $t("Description") }}</th>
-            </tr>
-            <tr v-for="subType in notificationType.subtypes" :key="subType.id">
-              <td v-for="(method, key) in notificationMethods" :key="key">
-                <b-checkbox
-                  :value="notificationValues[subType.id][key].enabled"
-                  @input="(e) => updateNotificationValue(subType.id, key, e)"
-                  :disabled="notificationValues[subType.id][key].disabled"
-                />
-              </td>
-              <td>
-                {{ subType.label }}
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-
-      <b-field
-        :label="$t('Send notification e-mails')"
-        label-for="groupNotifications"
-        :message="
-          $t(
-            'Announcements and mentions notifications are always sent straight away.'
-          )
-        "
-      >
-        <b-select
-          v-model="groupNotifications"
-          @input="updateSetting({ groupNotifications })"
-          id="groupNotifications"
-        >
-          <option
-            v-for="(value, key) in groupNotificationsValues"
-            :value="key"
-            :key="key"
-          >
-            {{ value }}
-          </option>
-        </b-select>
-      </b-field>
-    </section>
-    <section>
-      <div class="setting-title">
-        <h2>{{ $t("Participation notifications") }}</h2>
-      </div>
-      <div class="field">
-        <strong>{{
-          $t(
-            "Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc."
-          )
-        }}</strong>
-      </div>
-      <p>
-        {{ $t("Other notification options:") }}
-      </p>
-      <div class="field">
-        <b-checkbox
-          v-model="notificationOnDay"
-          @input="updateSetting({ notificationOnDay })"
-        >
-          <strong>{{ $t("Notification on the day of the event") }}</strong>
-          <p>
-            {{
-              $t(
-                "We'll use your timezone settings to send a recap of the morning of the event."
-              )
-            }}
-          </p>
-          <div v-if="loggedUser.settings && loggedUser.settings.timezone">
-            <em>{{
-              $t("Your timezone is currently set to {timezone}.", {
-                timezone: loggedUser.settings.timezone,
-              })
-            }}</em>
-            <router-link
-              class="change-timezone"
-              :to="{ name: RouteName.PREFERENCES }"
-              >{{ $t("Change timezone") }}</router-link
-            >
-          </div>
-          <span v-else>{{
-            $t("You can pick your timezone into your preferences.")
-          }}</span>
-        </b-checkbox>
-      </div>
-      <div class="field">
-        <b-checkbox
-          v-model="notificationEachWeek"
-          @input="updateSetting({ notificationEachWeek })"
-        >
-          <strong>{{ $t("Recap every week") }}</strong>
-          <p>
-            {{
-              $t(
-                "You'll get a weekly recap every Monday for upcoming events, if you have any."
-              )
-            }}
-          </p>
-        </b-checkbox>
-      </div>
-      <div class="field">
-        <b-checkbox
-          v-model="notificationBeforeEvent"
-          @input="updateSetting({ notificationBeforeEvent })"
-        >
-          <strong>{{ $t("Notification before the event") }}</strong>
-          <p>
-            {{
-              $t(
-                "We'll send you an email one hour before the event begins, to be sure you won't forget about it."
-              )
-            }}
-          </p>
-        </b-checkbox>
-      </div>
-    </section>
-    <section>
-      <div class="setting-title">
-        <h2>{{ $t("Organizer notifications") }}</h2>
-      </div>
-      <div class="field is-primary">
-        <label
-          class="has-text-weight-bold"
-          for="notificationPendingParticipation"
-          >{{
-            $t("Notifications for manually approved participations to an event")
-          }}</label
-        >
-        <p>
-          {{
-            $t(
-              "If you have opted for manual validation of participants, Mobilizon will send you an email to inform you of new participations to be processed. You can choose the frequency of these notifications below."
-            )
-          }}
-        </p>
-        <b-select
-          v-model="notificationPendingParticipation"
-          id="notificationPendingParticipation"
-          @input="updateSetting({ notificationPendingParticipation })"
-        >
-          <option
-            v-for="(value, key) in notificationPendingParticipationValues"
-            :value="key"
-            :key="key"
-          >
-            {{ value }}
-          </option>
-        </b-select>
-      </div>
-    </section>
-    <section>
-      <div class="setting-title">
-        <h2>{{ $t("Personal feeds") }}</h2>
-      </div>
-      <p>
-        {{
-          $t(
-            "These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page."
-          )
-        }}
-      </p>
-      <div v-if="feedTokens && feedTokens.length > 0">
-        <div
-          class="buttons"
-          v-for="feedToken in feedTokens"
-          :key="feedToken.token"
-        >
-          <b-tooltip
-            :label="$t('URL copied to clipboard')"
-            :active="showCopiedTooltip.atom"
-            always
-            type="is-success"
-            position="is-left"
-          >
-            <b-button
-              tag="a"
-              icon-left="rss"
-              @click="
-                (e) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
-              "
-              @keyup.enter="
-                (e) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
-              "
-              :href="tokenToURL(feedToken.token, 'atom')"
-              target="_blank"
-              >{{ $t("RSS/Atom Feed") }}</b-button
-            >
-          </b-tooltip>
-          <b-tooltip
-            :label="$t('URL copied to clipboard')"
-            :active="showCopiedTooltip.ics"
-            always
-            type="is-success"
-            position="is-left"
-          >
-            <b-button
-              tag="a"
-              @click="
-                (e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
-              "
-              @keyup.enter="
-                (e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
-              "
-              icon-left="calendar-sync"
-              :href="tokenToURL(feedToken.token, 'ics')"
-              target="_blank"
-              >{{ $t("ICS/WebCal Feed") }}</b-button
-            >
-          </b-tooltip>
-          <b-button
-            icon-left="refresh"
-            type="is-text"
-            @click="openRegenerateFeedTokensConfirmation"
-            @keyup.enter="openRegenerateFeedTokensConfirmation"
-            >{{ $t("Regenerate new links") }}</b-button
-          >
-        </div>
-      </div>
-      <div v-else>
-        <b-button
-          icon-left="refresh"
-          type="is-text"
-          @click="generateFeedTokens"
-          @keyup.enter="generateFeedTokens"
-          >{{ $t("Create new links") }}</b-button
-        >
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-import { INotificationPendingEnum } from "@/types/enums";
-import {
-  SET_USER_SETTINGS,
-  FEED_TOKENS_LOGGED_USER,
-  USER_NOTIFICATIONS,
-  UPDATE_ACTIVITY_SETTING,
-} from "../../graphql/user";
-import { IActivitySettingMethod, IUser } from "../../types/current-user.model";
-import RouteName from "../../router/name";
-import { IFeedToken } from "@/types/feedtoken.model";
-import { CREATE_FEED_TOKEN, DELETE_FEED_TOKEN } from "@/graphql/feed_tokens";
-import {
-  subscribeUserToPush,
-  unsubscribeUserToPush,
-} from "../../services/push-subscription";
-import {
-  REGISTER_PUSH_MUTATION,
-  UNREGISTER_PUSH_MUTATION,
-} from "@/graphql/webPush";
-import merge from "lodash/merge";
-import { WEB_PUSH } from "@/graphql/config";
-
-type NotificationSubType = { label: string; id: string };
-type NotificationType = { label: string; subtypes: NotificationSubType[] };
-
-@Component({
-  apollo: {
-    loggedUser: USER_NOTIFICATIONS,
-    feedTokens: {
-      query: FEED_TOKENS_LOGGED_USER,
-      update: (data) =>
-        data.loggedUser.feedTokens.filter(
-          (token: IFeedToken) => token.actor === null
-        ),
-    },
-    webPushEnabled: {
-      query: WEB_PUSH,
-      update: (data) => data.config.webPush.enabled,
-    },
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Notification settings") as string,
-    };
-  },
-})
-export default class Notifications extends Vue {
-  loggedUser!: IUser;
-
-  feedTokens: IFeedToken[] = [];
-
-  notificationOnDay: boolean | undefined = true;
-
-  notificationEachWeek: boolean | undefined = false;
-
-  notificationBeforeEvent: boolean | undefined = false;
-
-  notificationPendingParticipation: INotificationPendingEnum | undefined =
-    INotificationPendingEnum.NONE;
-
-  groupNotifications: INotificationPendingEnum | undefined =
-    INotificationPendingEnum.ONE_DAY;
-
-  notificationPendingParticipationValues: Record<string, unknown> = {};
-  groupNotificationsValues: Record<string, unknown> = {};
-
-  RouteName = RouteName;
-
-  showCopiedTooltip = { ics: false, atom: false };
-
-  subscribed = false;
-
-  canShowWebPush = false;
-
-  webPushEnabled = false;
-
-  notificationMethods = {
-    email: this.$t("Email") as string,
-    push: this.$t("Push") as string,
-  };
-
-  defaultNotificationValues = {
-    participation_event_updated: {
-      email: { enabled: true, disabled: true },
-      push: { enabled: true, disabled: true },
-    },
-    participation_event_comment: {
-      email: { enabled: true, disabled: false },
-      push: { enabled: true, disabled: false },
-    },
-    event_new_pending_participation: {
-      email: { enabled: true, disabled: false },
-      push: { enabled: true, disabled: false },
-    },
-    event_new_participation: {
-      email: { enabled: false, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    event_created: {
-      email: { enabled: true, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    event_updated: {
-      email: { enabled: false, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    discussion_updated: {
-      email: { enabled: false, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    post_published: {
-      email: { enabled: false, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    post_updated: {
-      email: { enabled: false, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    resource_updated: {
-      email: { enabled: false, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    member_request: {
-      email: { enabled: true, disabled: false },
-      push: { enabled: true, disabled: false },
-    },
-    member_updated: {
-      email: { enabled: false, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    user_email_password_updated: {
-      email: { enabled: true, disabled: true },
-      push: { enabled: false, disabled: true },
-    },
-    event_comment_mention: {
-      email: { enabled: true, disabled: false },
-      push: { enabled: true, disabled: false },
-    },
-    discussion_mention: {
-      email: { enabled: true, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-    event_new_comment: {
-      email: { enabled: true, disabled: false },
-      push: { enabled: false, disabled: false },
-    },
-  };
-
-  notificationTypes: NotificationType[] = [
-    {
-      label: this.$t("Mentions") as string,
-      subtypes: [
-        {
-          id: "event_comment_mention",
-          label: this.$t(
-            "I've been mentionned in a comment under an event"
-          ) as string,
-        },
-        {
-          id: "discussion_mention",
-          label: this.$t(
-            "I've been mentionned in a group discussion"
-          ) as string,
-        },
-      ],
-    },
-    {
-      label: this.$t("Participations") as string,
-      subtypes: [
-        {
-          id: "participation_event_updated",
-          label: this.$t("An event I'm going to has been updated") as string,
-        },
-        {
-          id: "participation_event_comment",
-          label: this.$t(
-            "An event I'm going to has posted an announcement"
-          ) as string,
-        },
-      ],
-    },
-    {
-      label: this.$t("Organizers") as string,
-      subtypes: [
-        {
-          id: "event_new_pending_participation",
-          label: this.$t(
-            "An event I'm organizing has a new pending participation"
-          ) as string,
-        },
-        {
-          id: "event_new_participation",
-          label: this.$t(
-            "An event I'm organizing has a new participation"
-          ) as string,
-        },
-        {
-          id: "event_new_comment",
-          label: this.$t("An event I'm organizing has a new comment") as string,
-        },
-      ],
-    },
-    {
-      label: this.$t("Group activity") as string,
-      subtypes: [
-        {
-          id: "event_created",
-          label: this.$t(
-            "An event from one of my groups has been published"
-          ) as string,
-        },
-        {
-          id: "event_updated",
-          label: this.$t(
-            "An event from one of my groups has been updated or deleted"
-          ) as string,
-        },
-        {
-          id: "discussion_updated",
-          label: this.$t("A discussion has been created or updated") as string,
-        },
-        {
-          id: "post_published",
-          label: this.$t("A post has been published") as string,
-        },
-        {
-          id: "post_updated",
-          label: this.$t("A post has been updated") as string,
-        },
-        {
-          id: "resource_updated",
-          label: this.$t("A resource has been created or updated") as string,
-        },
-        {
-          id: "member_request",
-          label: this.$t(
-            "A member requested to join one of my groups"
-          ) as string,
-        },
-        {
-          id: "member_updated",
-          label: this.$t("A member has been updated") as string,
-        },
-      ],
-    },
-    {
-      label: this.$t("User settings") as string,
-      subtypes: [
-        {
-          id: "user_email_password_updated",
-          label: this.$t("You changed your email or password") as string,
-        },
-      ],
-    },
-  ];
-
-  get userNotificationValues(): Record<
-    string,
-    Record<IActivitySettingMethod, { enabled: boolean; disabled: boolean }>
-  > {
-    return this.loggedUser.activitySettings.reduce((acc, activitySetting) => {
-      acc[activitySetting.key] = acc[activitySetting.key] || {};
-      acc[activitySetting.key][activitySetting.method] =
-        acc[activitySetting.key][activitySetting.method] || {};
-      acc[activitySetting.key][activitySetting.method].enabled =
-        activitySetting.enabled;
-      return acc;
-    }, {} as Record<string, Record<IActivitySettingMethod, { enabled: boolean; disabled: boolean }>>);
-  }
-
-  get notificationValues(): Record<
-    string,
-    Record<IActivitySettingMethod, { enabled: boolean; disabled: boolean }>
-  > {
-    const values = merge(
-      this.defaultNotificationValues,
-      this.userNotificationValues
-    );
-    for (const value in values) {
-      if (!this.canShowWebPush) {
-        values[value].push.disabled = true;
-      }
-    }
-    return values;
-  }
-
-  async mounted(): Promise<void> {
-    this.notificationPendingParticipationValues = {
-      [INotificationPendingEnum.NONE]: this.$t("Do not receive any mail"),
-      [INotificationPendingEnum.DIRECT]: this.$t(
-        "Receive one email per request"
-      ),
-      [INotificationPendingEnum.ONE_HOUR]: this.$t("Hourly email summary"),
-      [INotificationPendingEnum.ONE_DAY]: this.$t("Daily email summary"),
-      [INotificationPendingEnum.ONE_WEEK]: this.$t("Weekly email summary"),
-    };
-    this.groupNotificationsValues = {
-      [INotificationPendingEnum.NONE]: this.$t("Do not receive any mail"),
-      [INotificationPendingEnum.DIRECT]: this.$t(
-        "Receive one email for each activity"
-      ),
-      [INotificationPendingEnum.ONE_HOUR]: this.$t("Hourly email summary"),
-      [INotificationPendingEnum.ONE_DAY]: this.$t("Daily email summary"),
-      [INotificationPendingEnum.ONE_WEEK]: this.$t("Weekly email summary"),
-    };
-    this.canShowWebPush = await this.checkCanShowWebPush();
-  }
-
-  @Watch("loggedUser")
-  setSettings(): void {
-    if (this.loggedUser && this.loggedUser.settings) {
-      this.notificationOnDay = this.loggedUser.settings.notificationOnDay;
-      this.notificationEachWeek = this.loggedUser.settings.notificationEachWeek;
-      this.notificationBeforeEvent =
-        this.loggedUser.settings.notificationBeforeEvent;
-      this.notificationPendingParticipation =
-        this.loggedUser.settings.notificationPendingParticipation;
-      this.groupNotifications = this.loggedUser.settings.groupNotifications;
-    }
-  }
-
-  async updateSetting(variables: Record<string, unknown>): Promise<void> {
-    await this.$apollo.mutate<{ setUserSettings: string }>({
-      mutation: SET_USER_SETTINGS,
-      variables,
-      refetchQueries: [{ query: USER_NOTIFICATIONS }],
-    });
-  }
-
-  tokenToURL(token: string, format: string): string {
-    return `${window.location.origin}/events/going/${token}/${format}`;
-  }
-
-  copyURL(e: Event, url: string, format: "ics" | "atom"): void {
-    if (navigator.clipboard) {
-      e.preventDefault();
-      navigator.clipboard.writeText(url);
-      this.showCopiedTooltip[format] = true;
-      setTimeout(() => {
-        this.showCopiedTooltip[format] = false;
-      }, 2000);
-    }
-  }
-
-  openRegenerateFeedTokensConfirmation(): void {
-    this.$buefy.dialog.confirm({
-      type: "is-warning",
-      title: this.$t("Regenerate new links") as string,
-      message: this.$t(
-        "You'll need to change the URLs where there were previously entered."
-      ) as string,
-      confirmText: this.$t("Regenerate new links") as string,
-      cancelText: this.$t("Cancel") as string,
-      onConfirm: () => this.regenerateFeedTokens(),
-    });
-  }
-
-  async regenerateFeedTokens(): Promise<void> {
-    if (this.feedTokens.length < 1) return;
-    await this.deleteFeedToken(this.feedTokens[0].token);
-    const newToken = await this.createNewFeedToken();
-    this.feedTokens.pop();
-    this.feedTokens.push(newToken);
-  }
-
-  async generateFeedTokens(): Promise<void> {
-    const newToken = await this.createNewFeedToken();
-    this.feedTokens.push(newToken);
-  }
-
-  async subscribeToWebPush(): Promise<void> {
-    try {
-      if (this.canShowWebPush) {
-        const subscription = await subscribeUserToPush();
-        if (subscription) {
-          const subscriptionJSON = subscription?.toJSON();
-          await this.$apollo.mutate({
-            mutation: REGISTER_PUSH_MUTATION,
-            variables: {
-              endpoint: subscriptionJSON.endpoint,
-              auth: subscriptionJSON?.keys?.auth,
-              p256dh: subscriptionJSON?.keys?.p256dh,
-            },
-          });
-          this.subscribed = true;
-        } else {
-          this.$notifier.error(
-            this.$t("Error while subscribing to push notifications") as string
-          );
-        }
-      } else {
-        console.error("can't do webpush");
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async unsubscribeToWebPush(): Promise<void> {
-    try {
-      const endpoint = await unsubscribeUserToPush();
-      if (endpoint) {
-        const { data } = await this.$apollo.mutate({
-          mutation: UNREGISTER_PUSH_MUTATION,
-          variables: {
-            endpoint,
-          },
-        });
-        console.log(data);
-        this.subscribed = false;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  async checkCanShowWebPush(): Promise<boolean> {
-    try {
-      if (!window.isSecureContext || !("serviceWorker" in navigator))
-        return Promise.resolve(false);
-      const registration = await navigator.serviceWorker.getRegistration();
-      return registration !== undefined;
-    } catch (e) {
-      console.error(e);
-      return Promise.resolve(false);
-    }
-  }
-
-  async created(): Promise<void> {
-    this.subscribed = await this.isSubscribed();
-  }
-
-  async updateNotificationValue(
-    key: string,
-    method: string,
-    enabled: boolean
-  ): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: UPDATE_ACTIVITY_SETTING,
-      variables: {
-        key,
-        method,
-        enabled,
-        userId: this.loggedUser.id,
-      },
-    });
-  }
-
-  private async isSubscribed(): Promise<boolean> {
-    try {
-      if (!("serviceWorker" in navigator)) return Promise.resolve(false);
-      const registration = await navigator.serviceWorker.getRegistration();
-      return (await registration?.pushManager?.getSubscription()) != null;
-    } catch (e) {
-      console.error(e);
-      return Promise.resolve(false);
-    }
-  }
-
-  private async deleteFeedToken(token: string): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: DELETE_FEED_TOKEN,
-      variables: { token },
-    });
-  }
-
-  private async createNewFeedToken(): Promise<IFeedToken> {
-    const { data } = await this.$apollo.mutate({
-      mutation: CREATE_FEED_TOKEN,
-    });
-
-    return data.createFeedToken;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-.field {
-  &:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-
-  a.change-timezone {
-    color: $primary;
-    text-decoration: underline;
-    text-decoration-color: #fea72b;
-    text-decoration-thickness: 2px;
-    @include margin-left(5px);
-  }
-}
-
-::v-deep .buttons > *:not(:last-child) .button {
-  margin-right: 0.5rem;
-  @include margin-right(0.5rem);
-}
-</style>
diff --git a/js/src/views/Settings/NotificationsView.vue b/js/src/views/Settings/NotificationsView.vue
new file mode 100644
index 000000000..6d4626192
--- /dev/null
+++ b/js/src/views/Settings/NotificationsView.vue
@@ -0,0 +1,845 @@
+<template>
+  <div v-if="loggedUser">
+    <breadcrumbs-nav
+      :links="[
+        {
+          name: RouteName.ACCOUNT_SETTINGS,
+          text: $t('Account'),
+        },
+        {
+          name: RouteName.NOTIFICATIONS,
+          text: $t('Notifications'),
+        },
+      ]"
+    />
+    <section class="my-4">
+      <h2>{{ $t("Browser notifications") }}</h2>
+      <o-button
+        v-if="subscribed"
+        @click="unsubscribeToWebPush()"
+        @keyup.enter="unsubscribeToWebPush()"
+        >{{ $t("Unsubscribe to browser push notifications") }}</o-button
+      >
+      <o-button
+        icon-left="rss"
+        @click="subscribeToWebPush"
+        @keyup.enter="subscribeToWebPush"
+        v-else-if="canShowWebPush && webPushEnabled"
+        >{{ $t("Activate browser push notifications") }}</o-button
+      >
+      <o-notification variant="warning" v-else-if="!webPushEnabled">
+        {{ $t("This instance hasn't got push notifications enabled.") }}
+        <i18n-t keypath="Ask your instance admin to {enable_feature}.">
+          <template #enable_feature>
+            <a
+              href="https://docs.joinmobilizon.org/administration/configure/push/"
+              target="_blank"
+              rel="noopener noreferer"
+              >{{ $t("enable the feature") }}</a
+            >
+          </template>
+        </i18n-t>
+      </o-notification>
+      <o-notification variant="danger" v-else>{{
+        $t("You can't use push notifications in this browser.")
+      }}</o-notification>
+    </section>
+    <section class="my-4">
+      <h2>{{ $t("Notification settings") }}</h2>
+      <p>
+        {{
+          $t(
+            "Select the activities for which you wish to receive an email or a push notification."
+          )
+        }}
+      </p>
+      <table class="table">
+        <tbody>
+          <template
+            v-for="notificationType in notificationTypes"
+            :key="notificationType"
+          >
+            <tr>
+              <th colspan="3">
+                {{ notificationType.label }}
+              </th>
+            </tr>
+            <tr>
+              <th v-for="(method, key) in notificationMethods" :key="key">
+                {{ method }}
+              </th>
+              <th>{{ $t("Description") }}</th>
+            </tr>
+            <tr v-for="subType in notificationType.subtypes" :key="subType.id">
+              <td v-for="(method, key) in notificationMethods" :key="key">
+                <o-checkbox
+                  :value="notificationValues[subType.id][key].enabled"
+                  @input="
+                    (e: boolean) =>
+                      updateNotificationValue({
+                        key: subType.id,
+                        method: key,
+                        enabled: e,
+                      })
+                  "
+                  :disabled="notificationValues[subType.id][key].disabled"
+                />
+              </td>
+              <td>
+                {{ subType.label }}
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      <o-field
+        :label="$t('Send notification e-mails')"
+        label-for="groupNotifications"
+        :message="
+          $t(
+            'Announcements and mentions notifications are always sent straight away.'
+          )
+        "
+      >
+        <o-select
+          v-model="groupNotifications"
+          @input="updateSetting({ groupNotifications })"
+          id="groupNotifications"
+        >
+          <option
+            v-for="(value, key) in groupNotificationsValues"
+            :value="key"
+            :key="key"
+          >
+            {{ value }}
+          </option>
+        </o-select>
+      </o-field>
+    </section>
+    <section class="my-4">
+      <h2>{{ $t("Participation notifications") }}</h2>
+      <div class="field">
+        <strong>{{
+          $t(
+            "Mobilizon will send you an email when the events you are attending have important changes: date and time, address, confirmation or cancellation, etc."
+          )
+        }}</strong>
+      </div>
+      <p>
+        {{ $t("Other notification options:") }}
+      </p>
+      <div class="field">
+        <o-checkbox
+          v-model="notificationOnDay"
+          @input="updateSetting({ notificationOnDay })"
+        >
+          <strong>{{ $t("Notification on the day of the event") }}</strong>
+          <p>
+            {{
+              $t(
+                "We'll use your timezone settings to send a recap of the morning of the event."
+              )
+            }}
+          </p>
+          <div v-if="loggedUser.settings && loggedUser.settings.timezone">
+            <em>{{
+              $t("Your timezone is currently set to {timezone}.", {
+                timezone: loggedUser.settings.timezone,
+              })
+            }}</em>
+            <router-link
+              class="change-timezone"
+              :to="{ name: RouteName.PREFERENCES }"
+              >{{ $t("Change timezone") }}</router-link
+            >
+          </div>
+          <span v-else>{{
+            $t("You can pick your timezone into your preferences.")
+          }}</span>
+        </o-checkbox>
+      </div>
+      <div class="field">
+        <o-checkbox
+          v-model="notificationEachWeek"
+          @input="updateSetting({ notificationEachWeek })"
+        >
+          <strong>{{ $t("Recap every week") }}</strong>
+          <p>
+            {{
+              $t(
+                "You'll get a weekly recap every Monday for upcoming events, if you have any."
+              )
+            }}
+          </p>
+        </o-checkbox>
+      </div>
+      <div class="field">
+        <o-checkbox
+          v-model="notificationBeforeEvent"
+          @input="updateSetting({ notificationBeforeEvent })"
+        >
+          <strong>{{ $t("Notification before the event") }}</strong>
+          <p>
+            {{
+              $t(
+                "We'll send you an email one hour before the event begins, to be sure you won't forget about it."
+              )
+            }}
+          </p>
+        </o-checkbox>
+      </div>
+    </section>
+    <section class="my-4">
+      <h2>{{ $t("Organizer notifications") }}</h2>
+      <div class="field is-primary">
+        <label
+          class="has-text-weight-bold"
+          for="notificationPendingParticipation"
+          >{{
+            $t("Notifications for manually approved participations to an event")
+          }}</label
+        >
+        <p>
+          {{
+            $t(
+              "If you have opted for manual validation of participants, Mobilizon will send you an email to inform you of new participations to be processed. You can choose the frequency of these notifications below."
+            )
+          }}
+        </p>
+        <o-select
+          v-model="notificationPendingParticipation"
+          id="notificationPendingParticipation"
+          @input="updateSetting({ notificationPendingParticipation })"
+        >
+          <option
+            v-for="(value, key) in notificationPendingParticipationValues"
+            :value="key"
+            :key="key"
+          >
+            {{ value }}
+          </option>
+        </o-select>
+      </div>
+    </section>
+    <section class="my-4">
+      <h2>{{ $t("Personal feeds") }}</h2>
+      <p>
+        {{
+          $t(
+            "These feeds contain event data for the events for which any of your profiles is a participant or creator. You should keep these private. You can find feeds for specific profiles on each profile edition page."
+          )
+        }}
+      </p>
+      <div v-if="feedTokens && feedTokens.length > 0">
+        <div
+          class="flex gap-2"
+          v-for="feedToken in feedTokens"
+          :key="feedToken.token"
+        >
+          <o-tooltip
+            :label="$t('URL copied to clipboard')"
+            :active="showCopiedTooltip.atom"
+            always
+            variant="success"
+            position="left"
+          >
+            <o-button
+              tag="a"
+              icon-left="rss"
+              @click="
+                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+              "
+              @keyup.enter="
+                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+              "
+              :href="tokenToURL(feedToken.token, 'atom')"
+              target="_blank"
+              >{{ $t("RSS/Atom Feed") }}</o-button
+            >
+          </o-tooltip>
+          <o-tooltip
+            :label="$t('URL copied to clipboard')"
+            :active="showCopiedTooltip.ics"
+            always
+            variant="success"
+            position="left"
+          >
+            <o-button
+              tag="a"
+              @click="
+                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+              "
+              @keyup.enter="
+                (e: Event) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+              "
+              icon-left="calendar-sync"
+              :href="tokenToURL(feedToken.token, 'ics')"
+              target="_blank"
+              >{{ $t("ICS/WebCal Feed") }}</o-button
+            >
+          </o-tooltip>
+          <o-button
+            icon-left="refresh"
+            variant="text"
+            @click="openRegenerateFeedTokensConfirmation"
+            @keyup.enter="openRegenerateFeedTokensConfirmation"
+            >{{ $t("Regenerate new links") }}</o-button
+          >
+        </div>
+      </div>
+      <div v-else>
+        <o-button
+          icon-left="refresh"
+          variant="text"
+          @click="generateFeedTokens"
+          @keyup.enter="generateFeedTokens"
+          >{{ $t("Create new links") }}</o-button
+        >
+      </div>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import { INotificationPendingEnum } from "@/types/enums";
+import {
+  SET_USER_SETTINGS,
+  USER_NOTIFICATIONS,
+  UPDATE_ACTIVITY_SETTING,
+  USER_FRAGMENT_FEED_TOKENS,
+} from "../../graphql/user";
+import {
+  IActivitySetting,
+  IActivitySettingMethod,
+  IUser,
+} from "../../types/current-user.model";
+import RouteName from "../../router/name";
+import { IFeedToken } from "@/types/feedtoken.model";
+import { CREATE_FEED_TOKEN, DELETE_FEED_TOKEN } from "@/graphql/feed_tokens";
+import {
+  subscribeUserToPush,
+  unsubscribeUserToPush,
+} from "../../services/push-subscription";
+import {
+  REGISTER_PUSH_MUTATION,
+  UNREGISTER_PUSH_MUTATION,
+} from "@/graphql/webPush";
+import merge from "lodash/merge";
+import { WEB_PUSH } from "@/graphql/config";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import {
+  computed,
+  inject,
+  onBeforeMount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
+import { IConfig } from "@/types/config.model";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import { Dialog } from "@/plugins/dialog";
+
+type NotificationSubType = { label: string; id: string };
+type NotificationType = { label: string; subtypes: NotificationSubType[] };
+
+const { result: loggedUserResult } = useQuery<{ loggedUser: IUser }>(
+  USER_NOTIFICATIONS
+);
+const loggedUser = computed(() => loggedUserResult.value?.loggedUser);
+const feedTokens = computed(() =>
+  loggedUser.value?.feedTokens.filter(
+    (token: IFeedToken) => token.actor === null
+  )
+);
+
+const { result: webPushEnabledResult } = useQuery<{
+  config: Pick<IConfig, "webPush">;
+}>(WEB_PUSH);
+
+const webPushEnabled = computed(
+  () => webPushEnabledResult.value?.config?.webPush.enabled
+);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Notification settings")),
+});
+
+const notificationOnDay = ref<boolean | undefined>(true);
+const notificationEachWeek = ref<boolean | undefined>(false);
+const notificationBeforeEvent = ref<boolean | undefined>(false);
+const notificationPendingParticipation = ref<
+  INotificationPendingEnum | undefined
+>(INotificationPendingEnum.NONE);
+const groupNotifications = ref<INotificationPendingEnum | undefined>(
+  INotificationPendingEnum.ONE_DAY
+);
+const notificationPendingParticipationValues = ref<Record<string, unknown>>({});
+const groupNotificationsValues = ref<Record<string, unknown>>({});
+const showCopiedTooltip = reactive({ ics: false, atom: false });
+const subscribed = ref(false);
+const canShowWebPush = ref(false);
+
+const notificationMethods = {
+  email: t("Email"),
+  push: t("Push"),
+};
+
+const defaultNotificationValues = {
+  participation_event_updated: {
+    email: { enabled: true, disabled: true },
+    push: { enabled: true, disabled: true },
+  },
+  participation_event_comment: {
+    email: { enabled: true, disabled: false },
+    push: { enabled: true, disabled: false },
+  },
+  event_new_pending_participation: {
+    email: { enabled: true, disabled: false },
+    push: { enabled: true, disabled: false },
+  },
+  event_new_participation: {
+    email: { enabled: false, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  event_created: {
+    email: { enabled: true, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  event_updated: {
+    email: { enabled: false, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  discussion_updated: {
+    email: { enabled: false, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  post_published: {
+    email: { enabled: false, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  post_updated: {
+    email: { enabled: false, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  resource_updated: {
+    email: { enabled: false, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  member_request: {
+    email: { enabled: true, disabled: false },
+    push: { enabled: true, disabled: false },
+  },
+  member_updated: {
+    email: { enabled: false, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  user_email_password_updated: {
+    email: { enabled: true, disabled: true },
+    push: { enabled: false, disabled: true },
+  },
+  event_comment_mention: {
+    email: { enabled: true, disabled: false },
+    push: { enabled: true, disabled: false },
+  },
+  discussion_mention: {
+    email: { enabled: true, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+  event_new_comment: {
+    email: { enabled: true, disabled: false },
+    push: { enabled: false, disabled: false },
+  },
+};
+
+const notificationTypes: NotificationType[] = [
+  {
+    label: t("Mentions") as string,
+    subtypes: [
+      {
+        id: "event_comment_mention",
+        label: t("I've been mentionned in a comment under an event") as string,
+      },
+      {
+        id: "discussion_mention",
+        label: t("I've been mentionned in a group discussion") as string,
+      },
+    ],
+  },
+  {
+    label: t("Participations") as string,
+    subtypes: [
+      {
+        id: "participation_event_updated",
+        label: t("An event I'm going to has been updated") as string,
+      },
+      {
+        id: "participation_event_comment",
+        label: t("An event I'm going to has posted an announcement") as string,
+      },
+    ],
+  },
+  {
+    label: t("Organizers") as string,
+    subtypes: [
+      {
+        id: "event_new_pending_participation",
+        label: t(
+          "An event I'm organizing has a new pending participation"
+        ) as string,
+      },
+      {
+        id: "event_new_participation",
+        label: t("An event I'm organizing has a new participation") as string,
+      },
+      {
+        id: "event_new_comment",
+        label: t("An event I'm organizing has a new comment") as string,
+      },
+    ],
+  },
+  {
+    label: t("Group activity") as string,
+    subtypes: [
+      {
+        id: "event_created",
+        label: t("An event from one of my groups has been published") as string,
+      },
+      {
+        id: "event_updated",
+        label: t(
+          "An event from one of my groups has been updated or deleted"
+        ) as string,
+      },
+      {
+        id: "discussion_updated",
+        label: t("A discussion has been created or updated") as string,
+      },
+      {
+        id: "post_published",
+        label: t("A post has been published") as string,
+      },
+      {
+        id: "post_updated",
+        label: t("A post has been updated") as string,
+      },
+      {
+        id: "resource_updated",
+        label: t("A resource has been created or updated") as string,
+      },
+      {
+        id: "member_request",
+        label: t("A member requested to join one of my groups") as string,
+      },
+      {
+        id: "member_updated",
+        label: t("A member has been updated") as string,
+      },
+    ],
+  },
+  {
+    label: t("User settings") as string,
+    subtypes: [
+      {
+        id: "user_email_password_updated",
+        label: t("You changed your email or password") as string,
+      },
+    ],
+  },
+];
+
+const userNotificationValues = computed(
+  (): Record<
+    string,
+    Record<IActivitySettingMethod, { enabled: boolean; disabled: boolean }>
+  > => {
+    return (loggedUser.value?.activitySettings ?? []).reduce(
+      (acc, activitySetting) => {
+        acc[activitySetting.key] = acc[activitySetting.key] || {};
+        acc[activitySetting.key][activitySetting.method] =
+          acc[activitySetting.key][activitySetting.method] || {};
+        acc[activitySetting.key][activitySetting.method].enabled =
+          activitySetting.enabled;
+        return acc;
+      },
+      {} as Record<
+        string,
+        Record<IActivitySettingMethod, { enabled: boolean; disabled: boolean }>
+      >
+    );
+  }
+);
+
+const notificationValues = computed(
+  (): Record<
+    string,
+    Record<IActivitySettingMethod, { enabled: boolean; disabled: boolean }>
+  > => {
+    const values = merge(
+      defaultNotificationValues,
+      userNotificationValues.value
+    );
+    for (const value in values) {
+      if (!canShowWebPush.value) {
+        values[value].push.disabled = true;
+      }
+    }
+    return values;
+  }
+);
+
+onMounted(async () => {
+  notificationPendingParticipationValues.value = {
+    [INotificationPendingEnum.NONE]: t("Do not receive any mail"),
+    [INotificationPendingEnum.DIRECT]: t("Receive one email per request"),
+    [INotificationPendingEnum.ONE_HOUR]: t("Hourly email summary"),
+    [INotificationPendingEnum.ONE_DAY]: t("Daily email summary"),
+    [INotificationPendingEnum.ONE_WEEK]: t("Weekly email summary"),
+  };
+  groupNotificationsValues.value = {
+    [INotificationPendingEnum.NONE]: t("Do not receive any mail"),
+    [INotificationPendingEnum.DIRECT]: t("Receive one email for each activity"),
+    [INotificationPendingEnum.ONE_HOUR]: t("Hourly email summary"),
+    [INotificationPendingEnum.ONE_DAY]: t("Daily email summary"),
+    [INotificationPendingEnum.ONE_WEEK]: t("Weekly email summary"),
+  };
+  canShowWebPush.value = await checkCanShowWebPush();
+});
+
+watch(loggedUser, () => {
+  if (loggedUser.value?.settings) {
+    notificationOnDay.value = loggedUser.value.settings.notificationOnDay;
+    notificationEachWeek.value = loggedUser.value.settings.notificationEachWeek;
+    notificationBeforeEvent.value =
+      loggedUser.value.settings.notificationBeforeEvent;
+    notificationPendingParticipation.value =
+      loggedUser.value.settings.notificationPendingParticipation;
+    groupNotifications.value = loggedUser.value.settings.groupNotifications;
+  }
+});
+
+const { mutate: updateSetting } = useMutation<{ setUserSettings: string }>(
+  SET_USER_SETTINGS,
+  () => ({ refetchQueries: [{ query: USER_NOTIFICATIONS }] })
+);
+
+const tokenToURL = (token: string, format: string): string => {
+  return `${window.location.origin}/events/going/${token}/${format}`;
+};
+
+const copyURL = (e: Event, url: string, format: "ics" | "atom"): void => {
+  if (navigator.clipboard) {
+    e.preventDefault();
+    navigator.clipboard.writeText(url);
+    showCopiedTooltip[format] = true;
+    setTimeout(() => {
+      showCopiedTooltip[format] = false;
+    }, 2000);
+  }
+};
+
+const dialog = inject<Dialog>("dialog");
+
+const openRegenerateFeedTokensConfirmation = () => {
+  dialog?.confirm({
+    type: "warning",
+    title: t("Regenerate new links") as string,
+    message: t(
+      "You'll need to change the URLs where there were previously entered."
+    ) as string,
+    confirmText: t("Regenerate new links") as string,
+    cancelText: t("Cancel") as string,
+    onConfirm: () => regenerateFeedTokens(),
+  });
+};
+
+const regenerateFeedTokens = async (): Promise<void> => {
+  if (!feedTokens.value || feedTokens.value?.length < 1) return;
+  await deleteFeedToken({ token: feedTokens.value[0].token });
+  await createNewFeedToken(
+    {},
+    {
+      update(cache, { data }) {
+        const userId = data?.createFeedToken.user?.id;
+        const newFeedToken = data?.createFeedToken.token;
+
+        if (!newFeedToken) return;
+
+        let cachedData = cache.readFragment<{
+          id: string | undefined;
+          feedTokens: { token: string }[];
+        }>({
+          id: `User:${userId}`,
+          fragment: USER_FRAGMENT_FEED_TOKENS,
+        });
+        // Remove the old token
+        cachedData = {
+          id: cachedData?.id,
+          feedTokens: [
+            ...(cachedData?.feedTokens ?? []).slice(0, -1),
+            { token: newFeedToken },
+          ],
+        };
+        cache.writeFragment({
+          id: `User:${userId}`,
+          fragment: USER_FRAGMENT_FEED_TOKENS,
+          data: cachedData,
+        });
+      },
+    }
+  );
+};
+
+const generateFeedTokens = async (): Promise<void> => {
+  await createNewFeedToken();
+};
+
+const {
+  mutate: registerPushMutation,
+  onDone: registerPushMutationDone,
+  onError: registerPushMutationError,
+} = useMutation(REGISTER_PUSH_MUTATION);
+
+registerPushMutationDone(() => {
+  subscribed.value = true;
+});
+
+registerPushMutationError((err) => {
+  console.error(err);
+});
+
+const subscribeToWebPush = async (): Promise<void> => {
+  if (canShowWebPush.value) {
+    const subscription = await subscribeUserToPush();
+    if (subscription) {
+      const subscriptionJSON = subscription?.toJSON();
+      registerPushMutation({
+        endpoint: subscriptionJSON.endpoint,
+        auth: subscriptionJSON?.keys?.auth,
+        p256dh: subscriptionJSON?.keys?.p256dh,
+      });
+      subscribed.value = true;
+    } else {
+      // tnotifier.error(
+      //   t("Error while subscribing to push notifications") as string
+      // );
+    }
+  } else {
+    console.error("can't do webpush");
+  }
+};
+
+const {
+  mutate: unregisterPushMutation,
+  onDone: onUnregisterPushMutationDone,
+  onError: onUnregisterPushMutationError,
+} = useMutation(UNREGISTER_PUSH_MUTATION);
+
+onUnregisterPushMutationDone(({ data }) => {
+  console.debug(data);
+  subscribed.value = false;
+});
+
+onUnregisterPushMutationError((e) => {
+  console.error(e);
+});
+
+const unsubscribeToWebPush = async (): Promise<void> => {
+  const endpoint = await unsubscribeUserToPush();
+  if (endpoint) {
+    unregisterPushMutation({
+      endpoint,
+    });
+  }
+};
+
+const checkCanShowWebPush = async (): Promise<boolean> => {
+  try {
+    if (!window.isSecureContext || !("serviceWorker" in navigator))
+      return Promise.resolve(false);
+    const registration = await navigator.serviceWorker.getRegistration();
+    return registration !== undefined;
+  } catch (e) {
+    console.error(e);
+    return Promise.resolve(false);
+  }
+};
+
+onBeforeMount(async () => {
+  subscribed.value = await isSubscribed();
+});
+
+const { mutate: updateNotificationValue } = useMutation<
+  {
+    updateActivitySetting: IActivitySetting;
+  },
+  {
+    key: string;
+    method: IActivitySettingMethod;
+    enabled: boolean;
+  }
+>(UPDATE_ACTIVITY_SETTING);
+
+const isSubscribed = async (): Promise<boolean> => {
+  try {
+    if (!("serviceWorker" in navigator)) return Promise.resolve(false);
+    const registration = await navigator.serviceWorker.getRegistration();
+    return (await registration?.pushManager?.getSubscription()) != null;
+  } catch (e) {
+    console.error(e);
+    return Promise.resolve(false);
+  }
+};
+
+const { mutate: deleteFeedToken } = useMutation(DELETE_FEED_TOKEN);
+
+const { mutate: createNewFeedToken } = useMutation(CREATE_FEED_TOKEN, () => ({
+  update(cache, { data }) {
+    const userId = data?.createFeedToken.user?.id;
+    const newFeedToken = data?.createFeedToken.token;
+
+    if (!newFeedToken) return;
+
+    let cachedData = cache.readFragment<{
+      id: string | undefined;
+      feedTokens: { token: string }[];
+    }>({
+      id: `User:${userId}`,
+      fragment: USER_FRAGMENT_FEED_TOKENS,
+    });
+    // Add the new token to the list
+    cachedData = {
+      id: cachedData?.id,
+      feedTokens: [...(cachedData?.feedTokens ?? []), { token: newFeedToken }],
+    };
+    cache.writeFragment({
+      id: `User:${userId}`,
+      fragment: USER_FRAGMENT_FEED_TOKENS,
+      data: cachedData,
+    });
+  },
+}));
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
+.field {
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
+  a.change-timezone {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    @include margin-left(5px);
+  }
+}
+
+:deep(.buttons > *:not(:last-child) .button) {
+  margin-right: 0.5rem;
+  @include margin-right(0.5rem);
+}
+</style>
diff --git a/js/src/views/Settings/Preferences.vue b/js/src/views/Settings/Preferences.vue
deleted file mode 100644
index d2980a9d5..000000000
--- a/js/src/views/Settings/Preferences.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        {
-          name: RouteName.ACCOUNT_SETTINGS,
-          text: $t('Account'),
-        },
-        {
-          name: RouteName.PREFERENCES,
-          text: $t('Preferences'),
-        },
-      ]"
-    />
-    <div>
-      <b-field :label="$t('Language')" label-for="setting-language">
-        <b-select
-          :loading="!config || !loggedUser"
-          v-model="locale"
-          :placeholder="$t('Select a language')"
-          id="setting-language"
-        >
-          <option v-for="(language, lang) in langs" :value="lang" :key="lang">
-            {{ language }}
-          </option>
-        </b-select>
-      </b-field>
-      <b-field
-        :label="$t('Timezone')"
-        v-if="selectedTimezone"
-        label-for="setting-timezone"
-      >
-        <b-select
-          :placeholder="$t('Select a timezone')"
-          :loading="!config || !loggedUser"
-          v-model="selectedTimezone"
-          id="setting-timezone"
-        >
-          <optgroup
-            :label="group"
-            v-for="(groupTimezones, group) in timezones"
-            :key="group"
-          >
-            <option
-              v-for="timezone in groupTimezones"
-              :value="`${group}/${timezone}`"
-              :key="timezone"
-            >
-              {{ sanitize(timezone) }}
-            </option>
-          </optgroup>
-        </b-select>
-      </b-field>
-      <em v-if="Intl.DateTimeFormat().resolvedOptions().timeZone">{{
-        $t("Timezone detected as {timezone}.", {
-          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-        })
-      }}</em>
-      <b-message v-else type="is-danger">{{
-        $t("Unable to detect timezone.")
-      }}</b-message>
-      <hr role="presentation" />
-      <b-field grouped>
-        <b-field
-          :label="$t('City or region')"
-          expanded
-          label-for="setting-city"
-        >
-          <address-auto-complete
-            v-if="loggedUser && loggedUser.settings"
-            :type="AddressSearchType.ADMINISTRATIVE"
-            :doGeoLocation="false"
-            v-model="address"
-            id="setting-city"
-          >
-          </address-auto-complete>
-        </b-field>
-        <b-field :label="$t('Radius')" label-for="setting-radius">
-          <b-select
-            :placeholder="$t('Select a radius')"
-            v-model="locationRange"
-            id="setting-radius"
-          >
-            <option
-              v-for="index in [1, 5, 10, 25, 50, 100]"
-              :key="index"
-              :value="index"
-            >
-              {{ $tc("{count} km", index, { count: index }) }}
-            </option>
-          </b-select>
-        </b-field>
-        <b-button
-          :disabled="address == undefined"
-          @click="resetArea"
-          @keyup.enter="resetArea"
-          class="reset-area"
-          icon-left="close"
-          :aria-label="$t('Reset')"
-        />
-      </b-field>
-      <p>
-        {{
-          $t(
-            "Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area."
-          )
-        }}
-      </p>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import ngeohash from "ngeohash";
-import { saveLocaleData } from "@/utils/auth";
-import { TIMEZONES } from "../../graphql/config";
-import {
-  USER_SETTINGS,
-  SET_USER_SETTINGS,
-  UPDATE_USER_LOCALE,
-} from "../../graphql/user";
-import { IConfig } from "../../types/config.model";
-import { IUser, IUserSettings } from "../../types/current-user.model";
-import langs from "../../i18n/langs.json";
-import RouteName from "../../router/name";
-import AddressAutoComplete from "../../components/Event/AddressAutoComplete.vue";
-import { AddressSearchType } from "@/types/enums";
-import { Address, IAddress } from "@/types/address.model";
-
-@Component({
-  apollo: {
-    config: TIMEZONES,
-    loggedUser: USER_SETTINGS,
-  },
-  components: {
-    AddressAutoComplete,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Preferences") as string,
-    };
-  },
-})
-export default class Preferences extends Vue {
-  config!: IConfig;
-
-  loggedUser!: IUser;
-
-  RouteName = RouteName;
-
-  langs: Record<string, string> = langs;
-
-  AddressSearchType = AddressSearchType;
-
-  get selectedTimezone(): string {
-    if (this.loggedUser?.settings?.timezone) {
-      return this.loggedUser.settings.timezone;
-    }
-    const detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-    if (this.loggedUser?.settings?.timezone === null) {
-      this.updateUserSettings({ timezone: detectedTimezone });
-    }
-    return detectedTimezone;
-  }
-
-  set selectedTimezone(selectedTimezone: string) {
-    if (selectedTimezone !== this.loggedUser?.settings?.timezone) {
-      this.updateUserSettings({ timezone: selectedTimezone });
-    }
-  }
-
-  get locale(): string {
-    if (this.loggedUser?.locale) {
-      return this.loggedUser?.locale;
-    }
-    return this.$i18n.locale;
-  }
-
-  set locale(locale: string) {
-    if (locale) {
-      this.$apollo.mutate({
-        mutation: UPDATE_USER_LOCALE,
-        variables: {
-          locale,
-        },
-      });
-      saveLocaleData(locale);
-    }
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  sanitize(timezone: string): string {
-    return timezone
-      .split("_")
-      .join(" ")
-      .replace("St ", "St. ")
-      .split("/")
-      .join(" - ");
-  }
-
-  get timezones(): Record<string, string[]> {
-    if (!this.config || !this.config.timezones) return {};
-    return this.config.timezones.reduce(
-      (acc: { [key: string]: Array<string> }, val: string) => {
-        const components = val.split("/");
-        const [prefix, suffix] = [
-          components.shift() as string,
-          components.join("/"),
-        ];
-        const pushOrCreate = (
-          acc2: { [key: string]: Array<string> },
-          prefix2: string,
-          suffix2: string
-        ) => {
-          // eslint-disable-next-line no-param-reassign
-          (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
-          return acc2;
-        };
-        if (suffix) {
-          return pushOrCreate(acc, prefix, suffix);
-        }
-        return pushOrCreate(acc, this.$t("Other") as string, prefix);
-      },
-      {}
-    );
-  }
-
-  get address(): IAddress | null {
-    if (
-      this.loggedUser?.settings?.location?.name &&
-      this.loggedUser?.settings?.location?.geohash
-    ) {
-      const { latitude, longitude } = ngeohash.decode(
-        this.loggedUser?.settings?.location?.geohash
-      );
-      const name = this.loggedUser?.settings?.location?.name;
-      return {
-        description: name,
-        locality: "",
-        type: "administrative",
-        geom: `${longitude};${latitude}`,
-        street: "",
-        postalCode: "",
-        region: "",
-        country: "",
-      };
-    }
-    return null;
-  }
-
-  set address(address: IAddress | null) {
-    if (address && address.geom) {
-      const { geom } = address;
-      const addressObject = new Address(address);
-      const queryText = addressObject.poiInfos.name;
-      const [lon, lat] = geom.split(";");
-      const geohash = ngeohash.encode(lat, lon, 6);
-      if (queryText && geom) {
-        this.updateUserSettings({
-          location: {
-            geohash,
-            name: queryText,
-          },
-        });
-      }
-    }
-  }
-
-  get locationRange(): number | undefined | null {
-    return this.loggedUser?.settings?.location?.range;
-  }
-
-  set locationRange(locationRange: number | undefined | null) {
-    if (locationRange) {
-      this.updateUserSettings({
-        location: {
-          range: locationRange,
-        },
-      });
-    }
-  }
-
-  resetArea(): void {
-    this.updateUserSettings({
-      location: {
-        geohash: null,
-        name: null,
-        range: null,
-      },
-    });
-  }
-
-  private async updateUserSettings(userSettings: IUserSettings) {
-    await this.$apollo.mutate<{ setUserSetting: string }>({
-      mutation: SET_USER_SETTINGS,
-      variables: userSettings,
-      refetchQueries: [{ query: USER_SETTINGS }],
-    });
-  }
-}
-</script>
-<style lang="scss" scoped>
-.reset-area {
-  align-self: center;
-  position: relative;
-  top: 10px;
-}
-</style>
diff --git a/js/src/views/Settings/PreferencesView.vue b/js/src/views/Settings/PreferencesView.vue
new file mode 100644
index 000000000..e4eaf9013
--- /dev/null
+++ b/js/src/views/Settings/PreferencesView.vue
@@ -0,0 +1,296 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        {
+          name: RouteName.ACCOUNT_SETTINGS,
+          text: t('Account'),
+        },
+        {
+          name: RouteName.PREFERENCES,
+          text: t('Preferences'),
+        },
+      ]"
+    />
+    <div>
+      <o-field :label="t('Language')" label-for="setting-language">
+        <o-select
+          :loading="loadingTimezones || loadingUserSettings"
+          v-model="locale"
+          :placeholder="t('Select a language')"
+          id="setting-language"
+        >
+          <option v-for="(language, lang) in langs" :value="lang" :key="lang">
+            {{ language }}
+          </option>
+        </o-select>
+      </o-field>
+      <o-field
+        :label="t('Timezone')"
+        v-if="selectedTimezone"
+        label-for="setting-timezone"
+      >
+        <o-select
+          :placeholder="t('Select a timezone')"
+          :loading="loadingTimezones || loadingUserSettings"
+          v-model="selectedTimezone"
+          id="setting-timezone"
+        >
+          <optgroup
+            :label="group"
+            v-for="(groupTimezones, group) in timezones"
+            :key="group"
+          >
+            <option
+              v-for="timezone in groupTimezones"
+              :value="`${group}/${timezone}`"
+              :key="timezone"
+            >
+              {{ sanitize(timezone) }}
+            </option>
+          </optgroup>
+        </o-select>
+      </o-field>
+      <em v-if="Intl.DateTimeFormat().resolvedOptions().timeZone">{{
+        t("Timezone detected as {timezone}.", {
+          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        })
+      }}</em>
+      <o-notification v-else variant="danger">{{
+        t("Unable to detect timezone.")
+      }}</o-notification>
+      <hr role="presentation" />
+      <o-field grouped>
+        <o-field :label="t('City or region')" expanded label-for="setting-city">
+          <full-address-auto-complete
+            v-if="loggedUser?.settings"
+            :type="AddressSearchType.ADMINISTRATIVE"
+            :doGeoLocation="false"
+            v-model="address"
+            id="setting-city"
+            class="grid"
+            :placeholder="t('e.g. Nantes, Berlin, Cork, …')"
+          />
+        </o-field>
+        <o-field :label="t('Radius')" label-for="setting-radius">
+          <o-select
+            :placeholder="t('Select a radius')"
+            v-model="locationRange"
+            id="setting-radius"
+          >
+            <option
+              v-for="index in [1, 5, 10, 25, 50, 100]"
+              :key="index"
+              :value="index"
+            >
+              {{ t("{count} km", { count: index }, index) }}
+            </option>
+          </o-select>
+        </o-field>
+        <o-button
+          :disabled="address == undefined"
+          @click="resetArea"
+          @keyup.enter="resetArea"
+          class="reset-area self-center"
+          icon-left="close"
+          :aria-label="t('Reset')"
+        />
+      </o-field>
+      <p>
+        {{
+          t(
+            "Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area."
+          )
+        }}
+      </p>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import ngeohash from "ngeohash";
+import { saveLocaleData } from "@/utils/auth";
+import {
+  USER_SETTINGS,
+  SET_USER_SETTINGS,
+  UPDATE_USER_LOCALE,
+} from "../../graphql/user";
+import langs from "../../i18n/langs.json";
+import RouteName from "../../router/name";
+import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
+import { AddressSearchType } from "@/types/enums";
+import { Address, IAddress } from "@/types/address.model";
+import { useTimezones } from "@/composition/apollo/config";
+import { useUserSettings } from "@/composition/apollo/user";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useMutation } from "@vue/apollo-composable";
+
+const { timezones: serverTimezones, loading: loadingTimezones } =
+  useTimezones();
+const { loggedUser, loading: loadingUserSettings } = useUserSettings();
+
+const { t, locale: i18nLocale } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Preferences")),
+});
+
+// langs: Record<string, string> = langs;
+
+const selectedTimezone = computed({
+  get() {
+    if (loggedUser.value?.settings?.timezone) {
+      return loggedUser.value.settings.timezone;
+    }
+    const detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (loggedUser.value?.settings?.timezone === null) {
+      updateUserSettings({ timezone: detectedTimezone });
+    }
+    return detectedTimezone;
+  },
+  set(newSelectedTimezone: string) {
+    if (newSelectedTimezone !== loggedUser.value?.settings?.timezone) {
+      updateUserSettings({ timezone: newSelectedTimezone });
+    }
+  },
+});
+
+const { mutate: updateUserLocale } = useMutation(UPDATE_USER_LOCALE);
+
+const locale = computed({
+  get(): string {
+    if (loggedUser.value?.locale) {
+      return loggedUser.value?.locale;
+    }
+    return i18nLocale.value as string;
+  },
+  set(newLocale: string) {
+    if (newLocale) {
+      updateUserLocale({
+        locale: newLocale,
+      });
+      saveLocaleData(newLocale);
+      console.debug("changing locale", i18nLocale, newLocale);
+      i18nLocale.value = newLocale;
+    }
+  },
+});
+
+const sanitize = (timezone: string): string => {
+  return timezone
+    .split("_")
+    .join(" ")
+    .replace("St ", "St. ")
+    .split("/")
+    .join(" - ");
+};
+
+const timezones = computed((): Record<string, string[]> => {
+  if (!serverTimezones.value) return {};
+  return serverTimezones.value.reduce(
+    (acc: { [key: string]: Array<string> }, val: string) => {
+      const components = val.split("/");
+      const [prefix, suffix] = [
+        components.shift() as string,
+        components.join("/"),
+      ];
+      const pushOrCreate = (
+        acc2: { [key: string]: Array<string> },
+        prefix2: string,
+        suffix2: string
+      ) => {
+        // eslint-disable-next-line no-param-reassign
+        (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
+        return acc2;
+      };
+      if (suffix) {
+        return pushOrCreate(acc, prefix, suffix);
+      }
+      return pushOrCreate(acc, t("Other") as string, prefix);
+    },
+    {}
+  );
+});
+
+const address = computed({
+  get(): IAddress | null {
+    if (
+      loggedUser.value?.settings?.location?.name &&
+      loggedUser.value?.settings?.location?.geohash
+    ) {
+      const { latitude, longitude } = ngeohash.decode(
+        loggedUser.value?.settings?.location?.geohash
+      );
+      const name = loggedUser.value?.settings?.location?.name;
+      return {
+        description: name,
+        locality: "",
+        type: "administrative",
+        geom: `${longitude};${latitude}`,
+        street: "",
+        postalCode: "",
+        region: "",
+        country: "",
+      };
+    }
+    return null;
+  },
+  set(newAddress: IAddress | null) {
+    if (newAddress?.geom) {
+      const { geom } = newAddress;
+      const addressObject = new Address(newAddress);
+      const queryText = addressObject.poiInfos.name;
+      const [lon, lat] = geom.split(";");
+      const geohash = ngeohash.encode(lat, lon, 6);
+      if (queryText && geom) {
+        updateUserSettings({
+          location: {
+            geohash,
+            name: queryText,
+          },
+        });
+      }
+    }
+  },
+});
+
+const locationRange = computed({
+  get(): number | undefined | null {
+    return loggedUser.value?.settings?.location?.range;
+  },
+  set(newLocationRange: number | undefined | null) {
+    if (newLocationRange) {
+      updateUserSettings({
+        location: {
+          range: newLocationRange,
+        },
+      });
+    }
+  },
+});
+
+const resetArea = (): void => {
+  updateUserSettings({
+    location: {
+      geohash: null,
+      name: null,
+      range: null,
+    },
+  });
+};
+
+const { mutate: updateUserSettings } = useMutation<{ setUserSetting: string }>(
+  SET_USER_SETTINGS,
+  () => ({
+    refetchQueries: [{ query: USER_SETTINGS }],
+  })
+);
+</script>
+<style lang="scss" scoped>
+.reset-area {
+  align-self: center;
+  position: relative;
+  top: 10px;
+}
+</style>
diff --git a/js/src/views/SettingsView.vue b/js/src/views/SettingsView.vue
new file mode 100644
index 000000000..c7a8c2709
--- /dev/null
+++ b/js/src/views/SettingsView.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="container mx-auto">
+    <h1 class="text-violet-3 dark:text-white">{{ t("Settings") }}</h1>
+    <div class="flex flex-wrap gap-4">
+      <SettingsMenu class="max-w-xs w-full" />
+      <div class="flex-1">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import SettingsMenu from "../components/Settings/SettingsMenu.vue";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Settings")),
+});
+</script>
diff --git a/js/src/views/Todos/TodoList.vue b/js/src/views/Todos/TodoList.vue
index a48aab3c7..2170ca2a4 100644
--- a/js/src/views/Todos/TodoList.vue
+++ b/js/src/views/Todos/TodoList.vue
@@ -1,11 +1,11 @@
 <template>
-  <section class="container section" v-if="todoList">
+  <section class="container mx-auto" v-if="todoList">
     <breadcrumbs-nav
       :links="[
         {
           name: RouteName.GROUP,
           params: { preferredUsername: usernameWithDomain(todoList.actor) },
-          text: displayName(group),
+          text: groupDisplayName,
         },
         {
           name: RouteName.TODO_LISTS,
@@ -23,101 +23,87 @@
     <div v-for="todo in todoList.todos.elements" :key="todo.id">
       <compact-todo :todo="todo" />
     </div>
-    <form class="form box" @submit.prevent="createNewTodo">
-      <b-field>
-        <b-checkbox v-model="newTodo.status" />
-        <b-input expanded v-model="newTodo.title" />
-      </b-field>
-      <b-button native-type="submit">{{ $t("Add a todo") }}</b-button>
+    <form
+      class="form box"
+      @submit.prevent="
+        createNewTodo({
+          title: newTodo.title,
+          status: newTodo.status,
+          todoListId: props.id,
+        })
+      "
+    >
+      <o-field>
+        <o-checkbox v-model="newTodo.status" />
+        <o-input expanded v-model="newTodo.title" />
+      </o-field>
+      <o-button native-type="submit">{{ $t("Add a todo") }}</o-button>
     </form>
   </section>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { ITodo } from "@/types/todos";
 import { CREATE_TODO, FETCH_TODO_LIST } from "@/graphql/todos";
 import CompactTodo from "@/components/Todo/CompactTodo.vue";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { displayName, IActor, usernameWithDomain } from "@/types/actor";
+import { displayName, usernameWithDomain } from "@/types/actor";
 import { ITodoList } from "@/types/todolist";
 import RouteName from "../../router/name";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useHead } from "@vueuse/head";
+import { computed, ref } from "vue";
 
-@Component({
-  components: {
-    CompactTodo,
-  },
-  apollo: {
-    todoList: {
+const props = defineProps<{ id: string }>();
+
+const { currentActor } = useCurrentActorClient();
+
+const { result: totoListResult } = useQuery<{ todoList: ITodoList }>(
+  FETCH_TODO_LIST,
+  () => ({
+    id: props.id,
+  })
+);
+
+const todoList = computed(() => totoListResult.value?.todoList);
+
+const groupDisplayName = computed(() => displayName(todoList.value?.actor));
+
+useHead({
+  title: computed(() => todoList.value?.title ?? ""),
+});
+
+const newTodo = ref<ITodo>({ title: "", status: false });
+
+const { mutate: createNewTodo, onDone } = useMutation(CREATE_TODO, () => ({
+  update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+    if (data == null) return;
+    const cachedData = store.readQuery<{ todoList: ITodoList }>({
       query: FETCH_TODO_LIST,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.$route.params.id,
-        };
-      },
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { todoList } = this;
-    return {
-      title: todoList.title,
-    };
-  },
-})
-export default class TodoList extends Vue {
-  @Prop({ type: String, required: true }) id!: string;
-
-  todoList!: ITodoList;
-
-  currentActor!: IActor;
-
-  newTodo: ITodo = { title: "", status: false };
-
-  RouteName = RouteName;
-
-  displayName = displayName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  async createNewTodo(): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: CREATE_TODO,
-      variables: {
-        title: this.newTodo.title,
-        status: this.newTodo.status,
-        todoListId: this.id,
-      },
-      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
-        if (data == null) return;
-        const cachedData = store.readQuery<{ todoList: ITodoList }>({
-          query: FETCH_TODO_LIST,
-          variables: { id: this.todoList.id },
-        });
-        if (cachedData == null) return;
-        const { todoList } = cachedData;
-        if (todoList === null) {
-          console.error(
-            "Cannot update event notes cache, because of null value."
-          );
-          return;
-        }
-        const newTodo: ITodo = data.createTodo;
-        newTodo.creator = this.currentActor;
-
-        todoList.todos.elements = todoList.todos.elements.concat([newTodo]);
-
-        store.writeQuery({
-          query: FETCH_TODO_LIST,
-          variables: { id: this.todoList.id },
-          data: { todoList },
-        });
-      },
+      variables: { id: todoList.value?.id },
     });
-    this.newTodo = { title: "", status: false };
-  }
-}
+    if (cachedData == null) return;
+    const { todoList: todoListCached } = cachedData;
+    if (todoListCached === null) {
+      console.error("Cannot update event notes cache, because of null value.");
+      return;
+    }
+    const newTodoCached: ITodo = data.createTodo;
+    newTodoCached.creator = currentActor.value;
+
+    todoListCached.todos.elements = todoListCached.todos.elements.concat([
+      newTodoCached,
+    ]);
+
+    store.writeQuery({
+      query: FETCH_TODO_LIST,
+      variables: { id: todoListCached.id },
+      data: { todoListCached },
+    });
+  },
+}));
+
+onDone(() => {
+  newTodo.value = { title: "", status: false };
+});
 </script>
diff --git a/js/src/views/Todos/TodoLists.vue b/js/src/views/Todos/TodoLists.vue
index 14b26b926..4d3805218 100644
--- a/js/src/views/Todos/TodoLists.vue
+++ b/js/src/views/Todos/TodoLists.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container section" v-if="group">
+  <div class="container mx-auto" v-if="group">
     <breadcrumbs-nav
       :links="[
         {
@@ -22,22 +22,34 @@
           )
         }}
       </p>
-      <form class="form" @submit.prevent="createNewTodoList">
-        <b-field :label="$t('List title')">
-          <b-input v-model="newTodoList.title" />
-        </b-field>
-        <b-button native-type="submit">{{ $t("Create a new list") }}</b-button>
+      <form
+        class="form"
+        @submit.prevent="
+          createNewTodoList({
+            title: newTodoList.title,
+            groupId: group?.id,
+          })
+        "
+      >
+        <o-field :label="$t('List title')">
+          <o-input v-model="newTodoList.title" />
+        </o-field>
+        <o-button native-type="submit">{{ $t("Create a new list") }}</o-button>
       </form>
       <div v-for="todoList in todoLists" :key="todoList.id">
         <router-link
           :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }"
         >
-          <h3 class="is-size-3">
+          <h3>
             {{
-              $tc("{title} ({count} todos)", todoList.todos.total, {
-                count: todoList.todos.total,
-                title: todoList.title,
-              })
+              $t(
+                "{title} ({count} todos)",
+                {
+                  count: todoList.todos.total,
+                  title: todoList.title,
+                },
+                todoList.todos.total
+              )
             }}
           </h3>
         </router-link>
@@ -50,74 +62,43 @@
     </section>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { FETCH_GROUP } from "@/graphql/group";
-import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
+<script lang="ts" setup>
+import { usernameWithDomain, displayName } from "@/types/actor";
 import { CREATE_TODO_LIST } from "@/graphql/todos";
 import CompactTodo from "@/components/Todo/CompactTodo.vue";
 import { ITodoList } from "@/types/todolist";
 import RouteName from "../../router/name";
+import { useGroup } from "@/composition/apollo/group";
+import { computed, reactive } from "vue";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { useMutation } from "@vue/apollo-composable";
 
-@Component({
-  apollo: {
-    group: {
-      query: FETCH_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          name: this.$route.params.preferredUsername,
-        };
-      },
-    },
-  },
-  components: {
-    CompactTodo,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { group } = this;
-    return {
-      title: this.$t("{group}'s todolists", {
-        group: group.name || usernameWithDomain(group),
-      }) as string,
-    };
-  },
-})
-export default class TodoLists extends Vue {
-  @Prop({ type: String, required: true }) preferredUsername!: string;
+const props = defineProps<{ preferredUsername: string }>();
 
-  group!: IGroup;
+const { group } = useGroup(props.preferredUsername);
 
-  newTodoList: ITodoList = {
-    title: "",
-    id: "",
-    todos: { elements: [], total: 0 },
-  };
+const { t } = useI18n({ useScope: "global" });
 
-  RouteName = RouteName;
+useHead({
+  title: computed(() =>
+    t("{group}'s todolists", { group: displayName(group.value) })
+  ),
+});
 
-  usernameWithDomain = usernameWithDomain;
+const newTodoList = reactive<ITodoList>({
+  title: "",
+  id: "",
+  todos: { elements: [], total: 0 },
+});
 
-  displayName = displayName;
+const todoLists = computed((): ITodoList[] => {
+  return group.value?.todoLists.elements ?? [];
+});
 
-  get todoLists(): ITodoList[] {
-    return this.group.todoLists.elements;
-  }
+// const todoListsCount = computed((): number => {
+//   return group.value?.todoLists.total ?? 0;
+// });
 
-  get todoListsCount(): number {
-    return this.group.todoLists.total;
-  }
-
-  async createNewTodoList(): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: CREATE_TODO_LIST,
-      variables: {
-        title: this.newTodoList.title,
-        groupId: this.group.id,
-      },
-    });
-  }
-}
+const { mutate: createNewTodoList } = useMutation(CREATE_TODO_LIST);
 </script>
diff --git a/js/src/views/Todos/Todo.vue b/js/src/views/Todos/TodoView.vue
similarity index 55%
rename from js/src/views/Todos/Todo.vue
rename to js/src/views/Todos/TodoView.vue
index cdfe834f0..65dc371bb 100644
--- a/js/src/views/Todos/Todo.vue
+++ b/js/src/views/Todos/TodoView.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="section container" v-if="todo">
+  <section class="container mx-auto" v-if="todo">
     <breadcrumbs-nav
       :links="[
         {
@@ -27,47 +27,25 @@
     <full-todo :todo="todo" />
   </section>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { GET_TODO } from "@/graphql/todos";
 import { ITodo } from "@/types/todos";
 import FullTodo from "@/components/Todo/FullTodo.vue";
 import RouteName from "../../router/name";
 import { displayName, usernameWithDomain } from "@/types/actor";
+import { useQuery } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
 
-@Component({
-  components: {
-    FullTodo,
-  },
-  apollo: {
-    todo: {
-      query: GET_TODO,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.$route.params.todoId,
-        };
-      },
-    },
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { todo } = this;
-    return {
-      title: todo.title,
-    };
-  },
-})
-export default class Todo extends Vue {
-  @Prop({ type: String, required: true }) todoId!: string;
+const props = defineProps<{ todoId: string }>();
 
-  todo!: ITodo;
+const { result: todoResult } = useQuery<{ todo: ITodo }>(GET_TODO, () => ({
+  id: props.todoId,
+}));
 
-  RouteName = RouteName;
+const todo = computed(() => todoResult.value?.todo);
 
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-}
+useHead({
+  title: computed(() => todo.value?.title),
+});
 </script>
diff --git a/js/src/views/User/EmailValidate.vue b/js/src/views/User/EmailValidate.vue
index 516fb5243..89bf510ef 100644
--- a/js/src/views/User/EmailValidate.vue
+++ b/js/src/views/User/EmailValidate.vue
@@ -1,62 +1,59 @@
 <template>
-  <section class="section container">
+  <section class="container mx-auto">
     <h1 class="title" v-if="loading">
-      {{ $t("Your email is being changed") }}
+      {{ t("Your email is being changed") }}
     </h1>
     <div v-else>
       <div v-if="failed">
-        <b-message :title="$t('Error while changing email')" type="is-danger">
+        <o-notification
+          :title="t('Error while changing email')"
+          variant="danger"
+        >
           {{
-            $t(
+            t(
               "Either the email has already been changed, either the validation token is incorrect."
             )
           }}
-        </b-message>
+        </o-notification>
       </div>
-      <h1 class="title" v-else>{{ $t("Your email has been changed") }}</h1>
+      <h1 class="title" v-else>{{ t("Your email has been changed") }}</h1>
     </div>
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { useMutation } from "@vue/apollo-composable";
+import { ref, onBeforeMount } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import { VALIDATE_EMAIL } from "../../graphql/user";
 import RouteName from "../../router/name";
-import { ICurrentUser } from "../../types/current-user.model";
 
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Validating email") as string,
-    };
-  },
-})
-export default class Validate extends Vue {
-  @Prop({ type: String, required: true }) token!: string;
+// metaInfo() {
+//   return {
+//     title: this.t("Validating email") as string,
+//   };
+// },
+const props = defineProps<{
+  token: string;
+}>();
 
-  loading = true;
+const loading = ref(true);
+const failed = ref(false);
+const router = useRouter();
+const { t } = useI18n({ useScope: "global" });
 
-  failed = false;
+onBeforeMount(() => validateEmail({ token: props.token }));
 
-  async created(): Promise<void> {
-    await this.validateAction();
-  }
+const { mutate: validateEmail, onDone, onError } = useMutation(VALIDATE_EMAIL);
 
-  async validateAction(): Promise<void> {
-    try {
-      await this.$apollo.mutate<{ validateEmail: ICurrentUser }>({
-        mutation: VALIDATE_EMAIL,
-        variables: {
-          token: this.token,
-        },
-      });
-      this.loading = false;
-      await this.$router.push({ name: RouteName.HOME });
-    } catch (err) {
-      this.loading = false;
-      console.error(err);
-      this.failed = true;
-    }
-  }
-}
+onDone(async () => {
+  loading.value = false;
+  await router.push({ name: RouteName.HOME });
+});
+onError((err) => {
+  loading.value = false;
+  console.error(err);
+  failed.value = true;
+});
 </script>
diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
deleted file mode 100644
index 08d0b6204..000000000
--- a/js/src/views/User/Login.vue
+++ /dev/null
@@ -1,323 +0,0 @@
-<template>
-  <section class="section container" v-if="!currentUser.isLoggedIn">
-    <div class="columns is-mobile is-centered">
-      <div class="column is-half-desktop">
-        <h1 class="title">{{ $t("Welcome back!") }}</h1>
-        <b-message
-          v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN"
-          title="Info"
-          type="is-info"
-          :aria-close-label="$t('Close')"
-          >{{ $t("You need to login.") }}</b-message
-        >
-        <b-message
-          v-else-if="errorCode === LoginError.LOGIN_PROVIDER_ERROR"
-          type="is-danger"
-          :aria-close-label="$t('Close')"
-          >{{
-            $t(
-              "Error while login with {provider}. Retry or login another way.",
-              {
-                provider:
-                  SELECTED_PROVIDERS[$route.query.provider] ||
-                  "unknown provider",
-              }
-            )
-          }}</b-message
-        >
-        <b-message
-          v-else-if="errorCode === LoginError.LOGIN_PROVIDER_NOT_FOUND"
-          type="is-danger"
-          :aria-close-label="$t('Close')"
-          >{{
-            $t(
-              "Error while login with {provider}. This login provider doesn't exist.",
-              {
-                provider:
-                  SELECTED_PROVIDERS[$route.query.provider] ||
-                  "unknown provider",
-              }
-            )
-          }}</b-message
-        >
-        <b-message
-          :title="$t('Error')"
-          type="is-danger"
-          v-for="error in errors"
-          :key="error"
-        >
-          {{ error }}
-        </b-message>
-        <form @submit="loginAction">
-          <b-field
-            :label="$t('Email')"
-            label-for="email"
-            :message="caseWarningText"
-            :type="caseWarningType"
-          >
-            <b-input
-              aria-required="true"
-              required
-              id="email"
-              type="email"
-              v-model="credentials.email"
-            />
-          </b-field>
-
-          <b-field :label="$t('Password')" label-for="password">
-            <b-input
-              aria-required="true"
-              id="password"
-              required
-              type="password"
-              password-reveal
-              v-model="credentials.password"
-            />
-          </b-field>
-
-          <p class="control has-text-centered" v-if="!submitted">
-            <button type="submit" class="button is-primary is-large">
-              {{ $t("Login") }}
-            </button>
-          </p>
-          <b-loading :is-full-page="false" v-model="submitted" />
-
-          <div
-            class="control"
-            v-if="config && config.auth.oauthProviders.length > 0"
-          >
-            <auth-providers :oauthProviders="config.auth.oauthProviders" />
-          </div>
-
-          <p class="control">
-            <router-link
-              class="button is-text"
-              :to="{
-                name: RouteName.SEND_PASSWORD_RESET,
-                params: { email: credentials.email },
-              }"
-              >{{ $t("Forgot your password ?") }}</router-link
-            >
-          </p>
-          <router-link
-            class="button is-text"
-            :to="{
-              name: RouteName.RESEND_CONFIRMATION,
-              params: { email: credentials.email },
-            }"
-            >{{ $t("Didn't receive the instructions?") }}</router-link
-          >
-          <p class="control" v-if="config && config.registrationsOpen">
-            <router-link
-              class="button is-text"
-              :to="{
-                name: RouteName.REGISTER,
-                params: {
-                  default_email: credentials.email,
-                  default_password: credentials.password,
-                },
-              }"
-              >{{ $t("Create an account") }}</router-link
-            >
-          </p>
-        </form>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { Route } from "vue-router";
-import { ICurrentUser } from "@/types/current-user.model";
-import { LoginError, LoginErrorCode } from "@/types/enums";
-import { LOGIN } from "../../graphql/auth";
-import {
-  validateEmailField,
-  validateRequiredField,
-} from "../../utils/validators";
-import {
-  initializeCurrentActor,
-  NoIdentitiesException,
-  saveUserData,
-  SELECTED_PROVIDERS,
-} from "../../utils/auth";
-import { ILogin } from "../../types/login.model";
-import {
-  CURRENT_USER_CLIENT,
-  UPDATE_CURRENT_USER_CLIENT,
-} from "../../graphql/user";
-import RouteName from "../../router/name";
-import { CONFIG } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
-import AuthProviders from "../../components/User/AuthProviders.vue";
-
-@Component({
-  apollo: {
-    config: {
-      query: CONFIG,
-    },
-    currentUser: {
-      query: CURRENT_USER_CLIENT,
-    },
-  },
-  components: {
-    AuthProviders,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("Login on Mobilizon!") as string,
-      titleTemplate: "%s | Mobilizon",
-      meta: [{ name: "robots", content: "noindex" }],
-    };
-  },
-})
-export default class Login extends Vue {
-  @Prop({ type: String, required: false, default: "" }) email!: string;
-
-  @Prop({ type: String, required: false, default: "" }) password!: string;
-
-  LoginErrorCode = LoginErrorCode;
-
-  LoginError = LoginError;
-
-  errorCode: LoginErrorCode | null = null;
-
-  config!: IConfig;
-
-  currentUser!: ICurrentUser;
-
-  RouteName = RouteName;
-
-  credentials = {
-    email: "",
-    password: "",
-  };
-
-  redirect: string | undefined = "";
-
-  errors: string[] = [];
-
-  rules = {
-    required: validateRequiredField,
-    email: validateEmailField,
-  };
-
-  SELECTED_PROVIDERS = SELECTED_PROVIDERS;
-
-  submitted = false;
-
-  mounted(): void {
-    this.credentials.email = this.email;
-    this.credentials.password = this.password;
-
-    const { query } = this.$route;
-    this.errorCode = query.code as LoginErrorCode;
-    this.redirect = query.redirect as string | undefined;
-
-    // Already-logged-in and accessing /login
-    if (this.currentUser.isLoggedIn) {
-      this.$router.push("/");
-    }
-  }
-
-  async loginAction(e: Event): Promise<Route | void> {
-    e.preventDefault();
-    if (this.submitted) {
-      return;
-    }
-
-    this.errors = [];
-
-    try {
-      this.submitted = true;
-      const { data } = await this.$apollo.mutate<{ login: ILogin }>({
-        mutation: LOGIN,
-        variables: {
-          email: this.credentials.email,
-          password: this.credentials.password,
-        },
-      });
-      if (data == null) {
-        throw new Error("Data is undefined");
-      }
-
-      saveUserData(data.login);
-      await this.setupClientUserAndActors(data.login);
-
-      if (this.redirect) {
-        this.$router.push(this.redirect as string);
-        return;
-      }
-      if (window.localStorage) {
-        window.localStorage.setItem("welcome-back", "yes");
-      }
-      this.$router.replace({ name: RouteName.HOME });
-      return;
-    } catch (err: any) {
-      this.submitted = false;
-      if (err.graphQLErrors) {
-        err.graphQLErrors.forEach(({ message }: { message: string }) => {
-          this.errors.push(message);
-        });
-      } else if (err.networkError) {
-        this.errors.push(err.networkError.message);
-      }
-    }
-  }
-
-  private async setupClientUserAndActors(login: ILogin): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: UPDATE_CURRENT_USER_CLIENT,
-      variables: {
-        id: login.user.id,
-        email: this.credentials.email,
-        isLoggedIn: true,
-        role: login.user.role,
-      },
-    });
-    try {
-      await initializeCurrentActor(this.$apollo.provider.defaultClient);
-    } catch (err: any) {
-      if (err instanceof NoIdentitiesException) {
-        await this.$router.push({
-          name: RouteName.REGISTER_PROFILE,
-          params: {
-            email: this.currentUser.email,
-            userAlreadyActivated: "true",
-          },
-        });
-      }
-    }
-  }
-
-  get hasCaseWarning(): boolean {
-    return this.credentials.email !== this.credentials.email.toLowerCase();
-  }
-
-  get caseWarningText(): string | undefined {
-    if (this.hasCaseWarning) {
-      return this.$t(
-        "Emails usually don't contain capitals, make sure you haven't made a typo."
-      ) as string;
-    }
-    return undefined;
-  }
-
-  get caseWarningType(): string | undefined {
-    if (this.hasCaseWarning) {
-      return "is-warning";
-    }
-    return undefined;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.container .columns {
-  margin: 1rem auto 3rem;
-}
-::v-deep .help.is-warning {
-  color: #755033;
-}
-</style>
diff --git a/js/src/views/User/LoginView.vue b/js/src/views/User/LoginView.vue
new file mode 100644
index 000000000..89fc25e9a
--- /dev/null
+++ b/js/src/views/User/LoginView.vue
@@ -0,0 +1,314 @@
+<template>
+  <section
+    class="container mx-auto max-w-screen-sm"
+    v-if="!currentUser?.isLoggedIn"
+  >
+    <h1 class="text-4xl">{{ t("Welcome back!") }}</h1>
+    <o-notification
+      v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN"
+      title="Info"
+      variant="info"
+      :aria-close-label="t('Close')"
+      >{{ t("You need to login.") }}</o-notification
+    >
+    <o-notification
+      v-else-if="errorCode === LoginError.LOGIN_PROVIDER_ERROR"
+      variant="danger"
+      :aria-close-label="t('Close')"
+      >{{
+        t("Error while login with {provider}. Retry or login another way.", {
+          provider: currentProvider,
+        })
+      }}</o-notification
+    >
+    <o-notification
+      v-else-if="errorCode === LoginError.LOGIN_PROVIDER_NOT_FOUND"
+      variant="danger"
+      :aria-close-label="t('Close')"
+      >{{
+        t(
+          "Error while login with {provider}. This login provider doesn't exist.",
+          {
+            provider: currentProvider,
+          }
+        )
+      }}</o-notification
+    >
+    <o-notification
+      :title="t('Error')"
+      variant="danger"
+      v-for="error in errors"
+      :key="error"
+    >
+      {{ error }}
+    </o-notification>
+    <form @submit="loginAction">
+      <o-field
+        :label="t('Email')"
+        label-for="email"
+        :message="caseWarningText"
+        :type="caseWarningType"
+      >
+        <o-input
+          aria-required="true"
+          required
+          id="email"
+          type="email"
+          v-model="credentials.email"
+        />
+      </o-field>
+
+      <o-field :label="t('Password')" label-for="password">
+        <o-input
+          aria-required="true"
+          id="password"
+          required
+          type="password"
+          password-reveal
+          v-model="credentials.password"
+        />
+      </o-field>
+
+      <p class="text-center my-2" v-if="!submitted">
+        <o-button
+          variant="primary"
+          size="large"
+          native-type="submit"
+          :disabled="submitted"
+        >
+          {{ t("Login") }}
+        </o-button>
+      </p>
+      <!-- <o-loading :is-full-page="false" v-model="submitted" /> -->
+
+      <div
+        class="control"
+        v-if="config && config?.auth.oauthProviders.length > 0"
+      >
+        <auth-providers :oauthProviders="config.auth.oauthProviders" />
+      </div>
+
+      <div class="flex flex-wrap gap-2 mt-3">
+        <o-button
+          tag="router-link"
+          variant="text"
+          :to="{
+            name: RouteName.SEND_PASSWORD_RESET,
+            params: { email: credentials.email },
+          }"
+          >{{ t("Forgot your password?") }}</o-button
+        >
+        <o-button
+          tag="router-link"
+          variant="text"
+          :to="{
+            name: RouteName.RESEND_CONFIRMATION,
+            params: { email: credentials.email },
+          }"
+          >{{ t("Didn't receive the instructions?") }}</o-button
+        >
+        <p class="control" v-if="config && config.registrationsOpen">
+          <o-button
+            tag="router-link"
+            variant="text"
+            :to="{
+              name: RouteName.REGISTER,
+              params: {
+                default_email: credentials.email,
+                default_password: credentials.password,
+              },
+            }"
+            >{{ t("Create an account") }}</o-button
+          >
+        </p>
+      </div>
+    </form>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { LOGIN } from "@/graphql/auth";
+import { LOGIN_CONFIG } from "@/graphql/config";
+import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
+import { IConfig } from "@/types/config.model";
+import { ILogin } from "@/types/login.model";
+import { saveUserData, SELECTED_PROVIDERS } from "@/utils/auth";
+import {
+  initializeCurrentActor,
+  NoIdentitiesException,
+} from "@/utils/identity";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { computed, reactive, ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+import AuthProviders from "@/components/User/AuthProviders.vue";
+import RouteName from "@/router/name";
+import { LoginError, LoginErrorCode } from "@/types/enums";
+import { useCurrentUserClient } from "@/composition/apollo/user";
+import { useHead } from "@vueuse/head";
+
+const props = withDefaults(
+  defineProps<{
+    email?: string;
+    password?: string;
+  }>(),
+  { email: "", password: "" }
+);
+
+const { t } = useI18n({ useScope: "global" });
+const router = useRouter();
+const route = useRoute();
+
+const { currentUser } = useCurrentUserClient();
+
+const { result: configResult } = useQuery<{
+  config: Pick<IConfig, "auth" | "registrationsOpen">;
+}>(LOGIN_CONFIG);
+
+const config = computed(() => configResult.value?.config);
+
+const errors = ref<string[]>([]);
+const submitted = ref(false);
+
+const credentials = reactive({
+  email: "",
+  password: "",
+});
+
+const redirect = ref<string | undefined>("");
+
+const errorCode = ref<LoginErrorCode | null>(null);
+
+const {
+  onDone: onLoginMutationDone,
+  onError: onLoginMutationError,
+  mutate: loginMutation,
+} = useMutation(LOGIN);
+
+onLoginMutationDone(async (result) => {
+  const data = result.data;
+  submitted.value = false;
+  if (data == null) {
+    throw new Error("Data is undefined");
+  }
+
+  saveUserData(data.login);
+  await setupClientUserAndActors(data.login);
+
+  if (redirect.value) {
+    router.push(redirect.value);
+    return;
+  }
+  console.debug("No redirect, going to homepage");
+  if (window.localStorage) {
+    console.debug("Has localstorage, setting welcome back");
+    window.localStorage.setItem("welcome-back", "yes");
+  }
+  router.replace({ name: RouteName.HOME });
+  return;
+});
+
+onLoginMutationError((err) => {
+  console.error(err);
+  submitted.value = false;
+  if (err.graphQLErrors) {
+    err.graphQLErrors.forEach(({ message }: { message: string }) => {
+      errors.value.push(message);
+    });
+  } else if (err.networkError) {
+    errors.value.push(err.networkError.message);
+  }
+});
+
+const loginAction = (e: Event) => {
+  e.preventDefault();
+  if (submitted.value) {
+    return;
+  }
+
+  submitted.value = true;
+
+  loginMutation({
+    email: credentials.email,
+    password: credentials.password,
+  });
+};
+
+const { onDone: onCurrentUserMutationDone, mutate: updateCurrentUserMutation } =
+  useMutation(UPDATE_CURRENT_USER_CLIENT);
+
+onCurrentUserMutationDone(async () => {
+  try {
+    await initializeCurrentActor();
+  } catch (err: any) {
+    if (err instanceof NoIdentitiesException && currentUser.value) {
+      await router.push({
+        name: RouteName.REGISTER_PROFILE,
+        params: {
+          email: currentUser.value.email,
+          userAlreadyActivated: "true",
+        },
+      });
+    }
+  }
+});
+
+const setupClientUserAndActors = async (login: ILogin): Promise<void> => {
+  updateCurrentUserMutation({
+    id: login.user.id,
+    email: credentials.email,
+    isLoggedIn: true,
+    role: login.user.role,
+  });
+};
+
+const hasCaseWarning = computed<boolean>(() => {
+  return credentials.email !== credentials.email.toLowerCase();
+});
+
+const caseWarningText = computed<string | undefined>(() => {
+  if (hasCaseWarning.value) {
+    return t(
+      "Emails usually don't contain capitals, make sure you haven't made a typo."
+    ) as string;
+  }
+  return undefined;
+});
+
+const caseWarningType = computed<string | undefined>(() => {
+  if (hasCaseWarning.value) {
+    return "warning";
+  }
+  return undefined;
+});
+
+const currentProvider = computed(() => {
+  const queryProvider = route?.query.provider as string | undefined;
+  if (queryProvider) {
+    return SELECTED_PROVIDERS[queryProvider];
+  }
+  return "unknown provider";
+});
+
+onMounted(() => {
+  credentials.email = props.email;
+  credentials.password = props.password;
+
+  const query = route?.query;
+  errorCode.value = query?.code as LoginErrorCode;
+  redirect.value = query?.redirect as string | undefined;
+
+  // Already-logged-in and accessing /login
+  if (currentUser.value?.isLoggedIn) {
+    console.debug(
+      "Current user is already logged-in, redirecting to Homepage",
+      currentUser
+    );
+    router.push("/");
+  }
+});
+
+useHead({
+  title: computed(() => t("Login")),
+});
+</script>
diff --git a/js/src/views/User/PasswordReset.vue b/js/src/views/User/PasswordReset.vue
index 907ef021b..bcdfa28eb 100644
--- a/js/src/views/User/PasswordReset.vue
+++ b/js/src/views/User/PasswordReset.vue
@@ -1,120 +1,115 @@
 <template>
-  <section class="section container">
-    <div class="columns is-mobile is-centered">
-      <div class="column is-half-desktop">
-        <h1 class="title">
-          {{ $t("Password reset") }}
-        </h1>
-        <b-message
-          :title="$t('Error')"
-          type="is-danger"
-          v-for="error in errors"
-          :key="error"
-          >{{ error }}</b-message
-        >
-        <form @submit="resetAction">
-          <b-field :label="$t('Password')">
-            <b-input
-              aria-required="true"
-              required
-              type="password"
-              password-reveal
-              minlength="6"
-              v-model="credentials.password"
-            />
-          </b-field>
-          <b-field :label="$t('Password (confirmation)')">
-            <b-input
-              aria-required="true"
-              required
-              type="password"
-              password-reveal
-              minlength="6"
-              v-model="credentials.password_confirmation"
-            />
-          </b-field>
-          <button class="button is-primary">
-            {{ $t("Reset my password") }}
-          </button>
-        </form>
-      </div>
-    </div>
+  <section class="container mx-auto">
+    <h1 class="">
+      {{ $t("Password reset") }}
+    </h1>
+    <o-notification
+      :title="$t('Error')"
+      variant="danger"
+      v-for="error in errors"
+      :key="error"
+      >{{ error }}</o-notification
+    >
+    <form @submit="resetAction">
+      <o-field :label="$t('Password')">
+        <o-input
+          aria-required="true"
+          required
+          type="password"
+          password-reveal
+          minlength="6"
+          v-model="credentials.password"
+        />
+      </o-field>
+      <o-field :label="$t('Password (confirmation)')">
+        <o-input
+          aria-required="true"
+          required
+          type="password"
+          password-reveal
+          minlength="6"
+          v-model="credentials.passwordConfirmation"
+        />
+      </o-field>
+      <button class="button is-primary">
+        {{ $t("Reset my password") }}
+      </button>
+    </form>
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { validateRequiredField } from "../../utils/validators";
-import { RESET_PASSWORD } from "../../graphql/auth";
-import { saveUserData } from "../../utils/auth";
-import { ILogin } from "../../types/login.model";
-import RouteName from "../../router/name";
+<script lang="ts" setup>
+import { RESET_PASSWORD } from "@/graphql/auth";
+import { saveUserData } from "@/utils/auth";
+import { ILogin } from "@/types/login.model";
+import RouteName from "@/router/name";
+import { reactive, ref, computed } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Password reset") as string,
-    };
-  },
-})
-export default class PasswordReset extends Vue {
-  @Prop({ type: String, required: true }) token!: string;
+const props = defineProps<{ token: string }>();
 
-  credentials = {
-    password: "",
-    passwordConfirmation: "",
-  } as { password: string; passwordConfirmation: string };
+const { t } = useI18n({ useScope: "global" });
+useHead({ title: computed(() => t("Password reset")) });
 
-  errors: string[] = [];
+const credentials = reactive<{
+  password: string;
+  passwordConfirmation: string;
+}>({
+  password: "",
+  passwordConfirmation: "",
+});
 
-  rules = {
-    passwordLength: (value: string): boolean | string =>
-      value.length > 6 || "Password must be at least 6 characters long",
-    required: validateRequiredField,
-    passwordEqual: (value: string): boolean | string =>
-      value === this.credentials.password || "Passwords must be the same",
-  };
+const errors = ref<string[]>([]);
 
-  get samePasswords(): boolean {
-    return (
-      this.rules.passwordLength(this.credentials.password) === true &&
-      this.credentials.password === this.credentials.passwordConfirmation
-    );
+// rules = {
+//   passwordLength: (value: string): boolean | string =>
+//     value.length > 6 || "Password must be at least 6 characters long",
+//   required: validateRequiredField,
+//   passwordEqual: (value: string): boolean | string =>
+//     value === this.credentials.password || "Passwords must be the same",
+// };
+
+// get samePasswords(): boolean {
+//   return (
+//     this.rules.passwordLength(this.credentials.password) === true &&
+//     this.credentials.password === this.credentials.passwordConfirmation
+//   );
+// }
+
+const router = useRouter();
+
+const {
+  mutate: resetPasswordMutation,
+  onDone: resetPasswordMutationDone,
+  onError: resetPasswordMutationError,
+} = useMutation<{ resetPassword: ILogin }>(RESET_PASSWORD);
+
+resetPasswordMutationDone(({ data }) => {
+  if (data == null) {
+    throw new Error("Data is undefined");
   }
 
-  async resetAction(e: Event): Promise<void> {
-    e.preventDefault();
-    this.errors.splice(0);
+  saveUserData(data.resetPassword);
+  router.push({ name: RouteName.HOME });
+  return;
+});
 
-    try {
-      const { data } = await this.$apollo.mutate<{ resetPassword: ILogin }>({
-        mutation: RESET_PASSWORD,
-        variables: {
-          password: this.credentials.password,
-          token: this.token,
-        },
-      });
-      if (data == null) {
-        throw new Error("Data is undefined");
-      }
+resetPasswordMutationError((err) => {
+  err.graphQLErrors.forEach(({ message }: { message: any }) => {
+    errors.value.push(message);
+  });
+});
 
-      saveUserData(data.resetPassword);
-      this.$router.push({ name: RouteName.HOME });
-      return;
-    } catch (err: any) {
-      err.graphQLErrors.forEach(({ message }: { message: any }) => {
-        this.errors.push(message);
-      });
-    }
-  }
-}
+const resetAction = (e: Event) => {
+  e.preventDefault();
+  errors.value.splice(0);
+
+  resetPasswordMutation({
+    password: credentials.password,
+    token: props.token,
+  });
+};
 </script>
-
-<style lang="scss" scoped>
-section.section.container {
-  background: $white;
-}
-.container .columns {
-  margin: 1rem auto 3rem;
-}
-</style>
diff --git a/js/src/views/User/ProviderValidation.vue b/js/src/views/User/ProviderValidation.vue
index 3f41e8f2d..a42016c08 100644
--- a/js/src/views/User/ProviderValidation.vue
+++ b/js/src/views/User/ProviderValidation.vue
@@ -1,78 +1,79 @@
 <template>
-  <p>{{ $t("Redirecting in progress…") }}</p>
+  <p>{{ t("Redirecting in progress…") }}</p>
 </template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { ICurrentUserRole } from "@/types/enums";
 import { UPDATE_CURRENT_USER_CLIENT, LOGGED_USER } from "../../graphql/user";
 import RouteName from "../../router/name";
-import { saveUserData, changeIdentity } from "../../utils/auth";
-import { IUser } from "../../types/current-user.model";
+import { saveUserData } from "../../utils/auth";
+import { changeIdentity } from "../../utils/identity";
+import { ICurrentUser, IUser } from "../../types/current-user.model";
+import { useRouter } from "vue-router";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
 
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Redirecting to Mobilizon") as string,
-    };
-  },
-})
-export default class ProviderValidate extends Vue {
-  async mounted(): Promise<void> {
-    const accessToken = this.getValueFromMeta("auth-access-token");
-    const refreshToken = this.getValueFromMeta("auth-refresh-token");
-    const userId = this.getValueFromMeta("auth-user-id");
-    const userEmail = this.getValueFromMeta("auth-user-email");
-    const userRole = this.getValueFromMeta(
-      "auth-user-role"
-    ) as ICurrentUserRole;
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Redirecting to Mobilizon")),
+});
 
-    if (!(userId && userEmail && userRole && accessToken && refreshToken)) {
-      await this.$router.push("/");
+const getValueFromMeta = (name: string): string | null => {
+  const element = document.querySelector(`meta[name="${name}"]`);
+  if (element && element.getAttribute("content")) {
+    return element.getAttribute("content");
+  }
+  return null;
+};
+
+const accessToken = getValueFromMeta("auth-access-token");
+const refreshToken = getValueFromMeta("auth-refresh-token");
+const userId = getValueFromMeta("auth-user-id");
+const userEmail = getValueFromMeta("auth-user-email");
+const userRole = getValueFromMeta("auth-user-role") as ICurrentUserRole;
+
+const router = useRouter();
+
+const { onDone, mutate } = useMutation<{ updateCurrentUser: ICurrentUser }>(
+  UPDATE_CURRENT_USER_CLIENT
+);
+
+onDone(() => {
+  const { onResult: onLoggedUserResult } = useQuery<{ loggedUser: IUser }>(
+    LOGGED_USER
+  );
+
+  onLoggedUserResult(async ({ data: { loggedUser } }) => {
+    if (loggedUser.defaultActor) {
+      await changeIdentity(loggedUser.defaultActor);
+      await router.push({ name: RouteName.HOME });
     } else {
-      const login = {
-        user: {
-          id: userId,
-          email: userEmail,
-          role: userRole,
-          isLoggedIn: true,
-        },
-        accessToken,
-        refreshToken,
-      };
-      saveUserData(login);
-      await this.$apollo.mutate({
-        mutation: UPDATE_CURRENT_USER_CLIENT,
-        variables: {
-          id: userId,
-          email: userEmail,
-          isLoggedIn: true,
-          role: userRole,
-        },
-      });
-      const { data } = await this.$apollo.query<{ loggedUser: IUser }>({
-        query: LOGGED_USER,
-      });
-      const { loggedUser } = data;
-
-      if (loggedUser.defaultActor) {
-        await changeIdentity(
-          this.$apollo.provider.defaultClient,
-          loggedUser.defaultActor
-        );
-        await this.$router.push({ name: RouteName.HOME });
-      } else {
-        // No need to push to REGISTER_PROFILE, the navbar will do it for us
-      }
+      // No need to push to REGISTER_PROFILE, the navbar will do it for us
     }
-  }
+  });
+});
 
-  // eslint-disable-next-line class-methods-use-this
-  getValueFromMeta(name: string): string | null {
-    const element = document.querySelector(`meta[name="${name}"]`);
-    if (element && element.getAttribute("content")) {
-      return element.getAttribute("content");
-    }
-    return null;
-  }
+if (!(userId && userEmail && userRole && accessToken && refreshToken)) {
+  await router.push("/");
+} else {
+  const login = {
+    user: {
+      id: userId,
+      email: userEmail,
+      role: userRole,
+      isLoggedIn: true,
+    },
+    accessToken,
+    refreshToken,
+  };
+  saveUserData(login);
+
+  mutate({
+    id: userId,
+    email: userEmail,
+    isLoggedIn: true,
+    role: userRole,
+  });
 }
 </script>
diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
deleted file mode 100644
index 844d6fd9d..000000000
--- a/js/src/views/User/Register.vue
+++ /dev/null
@@ -1,366 +0,0 @@
-<template>
-  <div class="section container">
-    <section class="hero">
-      <div class="hero-body">
-        <h1 class="title">
-          {{
-            $t("Register an account on {instanceName}!", {
-              instanceName: config.name,
-            })
-          }}
-        </h1>
-        <i18n
-          tag="p"
-          path="{instanceName} is an instance of the {mobilizon} software."
-        >
-          <b slot="instanceName">{{ config.name }}</b>
-          <a
-            href="https://joinmobilizon.org"
-            target="_blank"
-            class="out"
-            slot="mobilizon"
-            >{{ $t("Mobilizon") }}</a
-          >
-        </i18n>
-      </div>
-    </section>
-    <section>
-      <div class="columns">
-        <div class="column">
-          <div>
-            <subtitle>{{ $t("Why create an account?") }}</subtitle>
-            <div class="content">
-              <ul>
-                <li>{{ $t("To create and manage your events") }}</li>
-                <li>
-                  {{
-                    $t(
-                      "To create and manage multiples identities from a same account"
-                    )
-                  }}
-                </li>
-                <li>
-                  {{
-                    $t(
-                      "To register for an event by choosing one of your identities"
-                    )
-                  }}
-                </li>
-                <li v-if="config.features.groups">
-                  {{
-                    $t(
-                      "To create or join an group and start organizing with other people"
-                    )
-                  }}
-                </li>
-                <li v-if="config.features.groups">
-                  {{
-                    $t(
-                      "To follow groups and be informed of their latest events"
-                    )
-                  }}
-                </li>
-              </ul>
-            </div>
-          </div>
-          <router-link class="out" :to="{ name: RouteName.ABOUT }">{{
-            $t("Learn more")
-          }}</router-link>
-          <hr role="presentation" />
-          <div class="content">
-            <subtitle>{{
-              $t("About {instance}", { instance: config.name })
-            }}</subtitle>
-            <div class="content" v-html="config.description"></div>
-            <i18n
-              path="Please read the {fullRules} published by {instance}'s administrators."
-              tag="p"
-            >
-              <router-link slot="fullRules" :to="{ name: RouteName.RULES }">{{
-                $t("full rules")
-              }}</router-link>
-              <b slot="instance">{{ config.name }}</b>
-            </i18n>
-          </div>
-        </div>
-        <div class="column">
-          <b-message type="is-warning" v-if="config.registrationsAllowlist">
-            {{ $t("Registrations are restricted by allowlisting.") }}
-          </b-message>
-          <form v-on:submit.prevent="submit()">
-            <b-field
-              :label="$t('Email')"
-              :type="errorEmailType"
-              :message="errorEmailMessages"
-              label-for="email"
-            >
-              <b-input
-                aria-required="true"
-                required
-                id="email"
-                type="email"
-                v-model="credentials.email"
-                @blur="showGravatar = true"
-                @focus="showGravatar = false"
-              />
-            </b-field>
-
-            <b-field
-              :label="$t('Password')"
-              :type="errorPasswordType"
-              :message="errorPasswordMessages"
-              label-for="password"
-            >
-              <b-input
-                aria-required="true"
-                required
-                id="password"
-                type="password"
-                password-reveal
-                minlength="6"
-                v-model="credentials.password"
-              />
-            </b-field>
-
-            <b-checkbox required>
-              <i18n
-                tag="span"
-                path="I agree to the {instanceRules} and {termsOfService}"
-              >
-                <router-link
-                  class="out"
-                  slot="instanceRules"
-                  :to="{ name: RouteName.RULES }"
-                  >{{ $t("instance rules") }}</router-link
-                >
-                <router-link
-                  class="out"
-                  slot="termsOfService"
-                  :to="{ name: RouteName.TERMS }"
-                  >{{ $t("terms of service") }}</router-link
-                >
-              </i18n>
-            </b-checkbox>
-
-            <p class="create-account control has-text-centered">
-              <b-button
-                type="is-primary"
-                size="is-large"
-                :disabled="sendingForm"
-                native-type="submit"
-              >
-                {{ $t("Create an account") }}
-              </b-button>
-            </p>
-
-            <p class="control has-text-centered">
-              <router-link
-                class="button is-text"
-                :to="{
-                  name: RouteName.RESEND_CONFIRMATION,
-                  params: { email: credentials.email },
-                }"
-                >{{ $t("Didn't receive the instructions?") }}</router-link
-              >
-            </p>
-            <p class="control has-text-centered">
-              <router-link
-                class="button is-text"
-                :to="{
-                  name: RouteName.LOGIN,
-                  params: {
-                    email: credentials.email,
-                    password: credentials.password,
-                  },
-                }"
-                >{{ $t("Login") }}</router-link
-              >
-            </p>
-
-            <hr role="presentation" />
-            <div
-              class="control"
-              v-if="config && config.auth.oauthProviders.length > 0"
-            >
-              <auth-providers :oauthProviders="config.auth.oauthProviders" />
-            </div>
-          </form>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { CREATE_USER } from "../../graphql/user";
-import RouteName from "../../router/name";
-import { IConfig } from "../../types/config.model";
-import { CONFIG } from "../../graphql/config";
-import Subtitle from "../../components/Utils/Subtitle.vue";
-import AuthProviders from "../../components/User/AuthProviders.vue";
-import { AbsintheGraphQLError } from "../../types/apollo";
-
-type errorType = "is-danger" | "is-warning";
-type errorMessage = { type: errorType; message: string };
-type credentials = { email: string; password: string; locale: string };
-
-@Component({
-  components: { Subtitle, AuthProviders },
-  metaInfo() {
-    return {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      title: this.title,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-  apollo: {
-    config: CONFIG,
-  },
-})
-export default class Register extends Vue {
-  @Prop({ type: String, required: false, default: "" }) email!: string;
-
-  @Prop({ type: String, required: false, default: "" }) password!: string;
-
-  credentials: credentials = {
-    email: this.email,
-    password: this.password,
-    locale: "en",
-  };
-
-  emailErrors: errorMessage[] = [];
-  passwordErrors: errorMessage[] = [];
-
-  sendingForm = false;
-
-  RouteName = RouteName;
-
-  config!: IConfig;
-
-  get title(): string {
-    if (this.config) {
-      return this.$t("Register an account on {instanceName}!", {
-        instanceName: this.config.name,
-      }) as string;
-    }
-    return "";
-  }
-
-  async submit(): Promise<void> {
-    this.sendingForm = true;
-    this.credentials.locale = this.$i18n.locale;
-    try {
-      this.emailErrors = [];
-      this.passwordErrors = [];
-
-      await this.$apollo.mutate({
-        mutation: CREATE_USER,
-        variables: this.credentials,
-      });
-
-      this.$router.push({
-        name: RouteName.REGISTER_PROFILE,
-        params: { email: this.credentials.email },
-      });
-    } catch (error: any) {
-      error.graphQLErrors.forEach(
-        ({ field, message }: AbsintheGraphQLError) => {
-          switch (field) {
-            case "email":
-              this.emailErrors.push({
-                type: "is-danger" as errorType,
-                message: message[0] as string,
-              });
-              break;
-            case "password":
-              this.passwordErrors.push({
-                type: "is-danger" as errorType,
-                message: message[0] as string,
-              });
-              break;
-            default:
-          }
-        }
-      );
-
-      this.sendingForm = false;
-    }
-  }
-
-  @Watch("credentials", { deep: true })
-  watchCredentials(credentials: credentials): void {
-    if (credentials.email !== credentials.email.toLowerCase()) {
-      const error = {
-        type: "is-warning" as errorType,
-        message: this.$t(
-          "Emails usually don't contain capitals, make sure you haven't made a typo."
-        ) as string,
-      };
-      this.emailErrors = [error];
-      this.$forceUpdate();
-    }
-  }
-
-  maxErrorType(errors: errorMessage[]): errorType | undefined {
-    if (!errors || errors.length === 0) return undefined;
-    return errors.reduce<errorType>((acc, error) => {
-      if (error.type === "is-danger" || acc === "is-danger") return "is-danger";
-      return "is-warning";
-    }, "is-warning");
-  }
-
-  get errorEmailType(): errorType | undefined {
-    return this.maxErrorType(this.emailErrors);
-  }
-
-  get errorPasswordType(): errorType | undefined {
-    return this.maxErrorType(this.passwordErrors);
-  }
-
-  get errorEmailMessages(): string[] {
-    return this.emailErrors.map(({ message }) => message);
-  }
-
-  get errorPasswordMessages(): string[] {
-    return this.passwordErrors?.map(({ message }) => message);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.avatar-enter-active {
-  transition: opacity 1s ease;
-}
-
-.avatar-enter,
-.avatar-leave-to {
-  opacity: 0;
-}
-
-.avatar-leave {
-  display: none;
-}
-
-.container .columns {
-  margin: 1rem auto 3rem;
-}
-
-h2.title {
-  color: $primary;
-  font-size: 2.5rem;
-  text-decoration: underline;
-  text-decoration-color: $secondary;
-  display: inline;
-}
-
-p.create-account {
-  ::v-deep button {
-    margin: 1rem auto 2rem;
-  }
-}
-::v-deep .help.is-warning {
-  color: #755033;
-}
-</style>
diff --git a/js/src/views/User/RegisterView.vue b/js/src/views/User/RegisterView.vue
new file mode 100644
index 000000000..625480c32
--- /dev/null
+++ b/js/src/views/User/RegisterView.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="container mx-auto pt-6">
+    <section class="">
+      <h1>
+        {{
+          t("Register an account on {instanceName}!", {
+            instanceName: config?.name,
+          })
+        }}
+      </h1>
+      <i18n-t
+        tag="p"
+        keypath="{instanceName} is an instance of the {mobilizon} software."
+      >
+        <template #instanceName>
+          <b>{{ config?.name }}</b>
+        </template>
+        <template #mobilizon>
+          <a href="https://joinmobilizon.org" target="_blank" class="out">{{
+            t("Mobilizon")
+          }}</a>
+        </template>
+      </i18n-t>
+    </section>
+    <section class="flex flex-wrap gap-6">
+      <div class="">
+        <div class="my-4">
+          <h2 class="text-xl">{{ t("Why create an account?") }}</h2>
+          <div class="prose dark:prose-invert">
+            <ul>
+              <li>{{ t("To create and manage your events") }}</li>
+              <li>
+                {{
+                  t(
+                    "To create and manage multiples identities from a same account"
+                  )
+                }}
+              </li>
+              <li>
+                {{
+                  t(
+                    "To register for an event by choosing one of your identities"
+                  )
+                }}
+              </li>
+              <li v-if="config?.features.groups">
+                {{
+                  t(
+                    "To create or join an group and start organizing with other people"
+                  )
+                }}
+              </li>
+              <li v-if="config?.features.groups">
+                {{
+                  t("To follow groups and be informed of their latest events")
+                }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        <router-link class="out block my-4" :to="{ name: RouteName.ABOUT }">{{
+          t("Learn more")
+        }}</router-link>
+        <hr role="presentation" />
+        <div class="my-4">
+          <h2 class="text-xl">
+            {{ t("About {instance}", { instance: config?.name }) }}
+          </h2>
+          <div
+            class="prose dark:prose-invert"
+            v-html="config?.description"
+          ></div>
+          <i18n-t
+            keypath="Please read the {fullRules} published by {instance}'s administrators."
+            tag="p"
+            ><template #fullRules>
+              <router-link class="out" :to="{ name: RouteName.RULES }">{{
+                t("full rules")
+              }}</router-link>
+            </template>
+            <template #instance>
+              <b>{{ config?.name }}</b>
+            </template>
+          </i18n-t>
+        </div>
+      </div>
+      <div class="">
+        <o-notification variant="warning" v-if="config?.registrationsAllowlist">
+          {{ t("Registrations are restricted by allowlisting.") }}
+        </o-notification>
+        <form @submit.prevent="submit">
+          <o-field
+            :label="t('Email')"
+            :type="errorEmailType"
+            :message="errorEmailMessage"
+            label-for="email"
+          >
+            <o-input
+              aria-required="true"
+              required
+              id="email"
+              type="email"
+              v-model="credentials.email"
+              @blur="showGravatar = true"
+              @focus="showGravatar = false"
+            />
+          </o-field>
+
+          <o-field
+            :label="t('Password')"
+            :type="errorPasswordType"
+            :message="errorPasswordMessage"
+            label-for="password"
+          >
+            <o-input
+              aria-required="true"
+              required
+              id="password"
+              type="password"
+              password-reveal
+              minlength="6"
+              v-model="credentials.password"
+            />
+          </o-field>
+
+          <div class="flex items-start mb-6">
+            <div class="flex items-center h-5">
+              <input
+                type="checkbox"
+                id="accept_rules_terms"
+                class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800"
+                required
+              />
+            </div>
+
+            <label
+              for="accept_rules_terms"
+              class="ml-2 text-gray-900 dark:text-gray-300"
+            >
+              <i18n-t
+                tag="span"
+                keypath="I agree to the {instanceRules} and {termsOfService}"
+              >
+                <template #instanceRules>
+                  <router-link class="out" :to="{ name: RouteName.RULES }">{{
+                    t("instance rules")
+                  }}</router-link>
+                </template>
+                <template #termsOfService>
+                  <router-link class="out" :to="{ name: RouteName.TERMS }">{{
+                    t("terms of service")
+                  }}</router-link>
+                </template>
+              </i18n-t>
+            </label>
+          </div>
+
+          <p class="create-account control has-text-centered">
+            <o-button
+              variant="primary"
+              size="large"
+              :disabled="sendingForm"
+              native-type="submit"
+            >
+              {{ t("Create an account") }}
+            </o-button>
+          </p>
+
+          <p class="control has-text-centered">
+            <router-link
+              class="button is-text"
+              :to="{
+                name: RouteName.RESEND_CONFIRMATION,
+                params: { email: credentials.email },
+              }"
+              >{{ t("Didn't receive the instructions?") }}</router-link
+            >
+          </p>
+          <p class="control has-text-centered">
+            <router-link
+              class="button is-text"
+              :to="{
+                name: RouteName.LOGIN,
+                params: {
+                  email: credentials.email,
+                  password: credentials.password,
+                },
+              }"
+              >{{ t("Login") }}</router-link
+            >
+          </p>
+
+          <hr role="presentation" />
+          <div
+            class="control"
+            v-if="config && config.auth.oauthProviders.length > 0"
+          >
+            <auth-providers :oauthProviders="config.auth.oauthProviders" />
+          </div>
+        </form>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CREATE_USER } from "../../graphql/user";
+import RouteName from "../../router/name";
+import { IConfig } from "../../types/config.model";
+import { CONFIG } from "../../graphql/config";
+import AuthProviders from "../../components/User/AuthProviders.vue";
+import { computed, reactive, ref, watch } from "vue";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useHead } from "@vueuse/head";
+import { AbsintheGraphQLErrors } from "@/types/errors.model";
+
+type errorType = "danger" | "warning";
+type errorMessage = { type: errorType; message: string };
+type credentialsType = { email: string; password: string; locale: string };
+
+const { t, locale } = useI18n({ useScope: "global" });
+const router = useRouter();
+
+const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
+
+const config = computed(() => configResult.value?.config);
+
+const showGravatar = ref(false);
+
+const props = withDefaults(
+  defineProps<{
+    email?: string;
+    password?: string;
+  }>(),
+  { email: "", password: "" }
+);
+
+const credentials = reactive<credentialsType>({
+  email: props.email,
+  password: props.password,
+  locale: "en",
+});
+
+const emailErrors = ref<errorMessage[]>([]);
+const passwordErrors = ref<errorMessage[]>([]);
+
+const sendingForm = ref(false);
+
+const title = computed((): string => {
+  if (config.value) {
+    return t("Register an account on {instanceName}!", {
+      instanceName: config.value?.name,
+    }) as string;
+  }
+  return "";
+});
+
+useHead({
+  title: title.value,
+});
+
+const { onDone, onError, mutate } = useMutation(CREATE_USER);
+
+onDone(() => {
+  router.push({
+    name: RouteName.REGISTER_PROFILE,
+    params: { email: credentials.email },
+  });
+});
+
+onError((error) => {
+  (error.graphQLErrors as AbsintheGraphQLErrors).forEach(
+    ({ field, message }) => {
+      switch (field) {
+        case "email":
+          emailErrors.value.push({
+            type: "danger" as errorType,
+            message: message[0] as string,
+          });
+          break;
+        case "password":
+          passwordErrors.value.push({
+            type: "danger" as errorType,
+            message: message[0] as string,
+          });
+          break;
+        default:
+      }
+    }
+  );
+  sendingForm.value = false;
+});
+
+const submit = async (): Promise<void> => {
+  sendingForm.value = true;
+  credentials.locale = locale.value as string;
+  try {
+    emailErrors.value = [];
+    passwordErrors.value = [];
+
+    mutate(credentials);
+  } catch (error: any) {
+    console.error(error);
+
+    sendingForm.value = false;
+  }
+};
+
+watch(credentials, () => {
+  if (credentials.email !== credentials.email.toLowerCase()) {
+    const error = {
+      type: "warning" as errorType,
+      message: t(
+        "Emails usually don't contain capitals, make sure you haven't made a typo."
+      ),
+    };
+    emailErrors.value = [error];
+  }
+});
+
+const maxErrorType = (errors: errorMessage[]): errorType | undefined => {
+  if (!errors || errors.length === 0) return undefined;
+  return errors.reduce<errorType>((acc, error) => {
+    if (error.type === "danger" || acc === "danger") return "danger";
+    return "warning";
+  }, "warning");
+};
+
+const errorEmailType = computed((): errorType | undefined => {
+  return maxErrorType(emailErrors.value);
+});
+
+const errorPasswordType = computed((): errorType | undefined => {
+  return maxErrorType(passwordErrors.value);
+});
+
+const errorEmailMessage = computed((): string => {
+  return emailErrors.value.map(({ message }) => message).join(" ");
+});
+
+const errorPasswordMessage = computed((): string => {
+  return passwordErrors.value?.map(({ message }) => message).join(" ");
+});
+</script>
diff --git a/js/src/views/User/ResendConfirmation.vue b/js/src/views/User/ResendConfirmation.vue
index bedfeb237..3dffee670 100644
--- a/js/src/views/User/ResendConfirmation.vue
+++ b/js/src/views/User/ResendConfirmation.vue
@@ -1,121 +1,92 @@
 <template>
-  <section class="section container">
-    <div class="columns is-mobile is-centered">
-      <div class="column is-half-desktop">
-        <h1 class="title">
-          {{ $t("Resend confirmation email") }}
-        </h1>
-        <form v-if="!validationSent" @submit="resendConfirmationAction">
-          <b-field :label="$t('Email address')">
-            <b-input
-              aria-required="true"
-              required
-              type="email"
-              v-model="credentials.email"
-            />
-          </b-field>
-          <p class="control">
-            <b-button type="is-primary" native-type="submit">
-              {{ $t("Send the confirmation email again") }}
-            </b-button>
-            <router-link
-              :to="{ name: RouteName.LOGIN }"
-              class="button is-text"
-              >{{ $t("Cancel") }}</router-link
-            >
-          </p>
-        </form>
-        <div v-else>
-          <b-message type="is-success" :closable="false" title="Success">
-            {{
-              $t(
-                "If an account with this email exists, we just sent another confirmation email to {email}",
-                { email: credentials.email }
-              )
-            }}
-          </b-message>
-          <b-message type="is-info">
-            {{
-              $t(
-                "Please check your spam folder if you didn't receive the email."
-              )
-            }}
-          </b-message>
-        </div>
-      </div>
+  <section class="container mx-auto pt-4 max-w-2xl">
+    <h1>
+      {{ $t("Resend confirmation email") }}
+    </h1>
+    <form v-if="!validationSent" @submit="resendConfirmationAction">
+      <o-field :label="$t('Email address')">
+        <o-input
+          aria-required="true"
+          required
+          type="email"
+          v-model="credentials.email"
+        />
+      </o-field>
+      <p class="flex flex-wrap gap-1">
+        <o-button variant="primary" native-type="submit">
+          {{ $t("Send the confirmation email again") }}
+        </o-button>
+        <o-button
+          variant="primary"
+          outlined
+          tag="router-link"
+          :to="{ name: RouteName.LOGIN }"
+          >{{ $t("Cancel") }}</o-button
+        >
+      </p>
+    </form>
+    <div v-else>
+      <o-notification variant="success" :closable="false" title="Success">
+        {{
+          $t(
+            "If an account with this email exists, we just sent another confirmation email to {email}",
+            { email: credentials.email }
+          )
+        }}
+      </o-notification>
+      <o-notification variant="info">
+        {{
+          $t("Please check your spam folder if you didn't receive the email.")
+        }}
+      </o-notification>
     </div>
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import {
-  validateEmailField,
-  validateRequiredField,
-} from "../../utils/validators";
-import { RESEND_CONFIRMATION_EMAIL } from "../../graphql/auth";
-import RouteName from "../../router/name";
+<script lang="ts" setup>
+import { RESEND_CONFIRMATION_EMAIL } from "@/graphql/auth";
+import RouteName from "@/router/name";
+import { reactive, ref, computed } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
 
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Resend confirmation email") as string,
-      meta: [{ name: "robots", content: "noindex" }],
-    };
-  },
-})
-export default class ResendConfirmation extends Vue {
-  @Prop({ type: String, required: false, default: "" }) email!: string;
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Resend confirmation email")),
+  meta: [{ name: "robots", content: "noindex" }],
+});
 
-  credentials = {
-    email: "",
-  };
+const props = withDefaults(defineProps<{ email: string }>(), { email: "" });
 
-  validationSent = false;
+const credentials = reactive({
+  email: props.email,
+});
 
-  error = false;
+const validationSent = ref(false);
+const error = ref(false);
 
-  RouteName = RouteName;
+const {
+  mutate: resendConfirmationEmail,
+  onDone: resentConfirmationEmail,
+  onError: resentConfirmationEmailError,
+} = useMutation(RESEND_CONFIRMATION_EMAIL);
 
-  state = {
-    email: {
-      status: null,
-      msg: "",
-    },
-  };
+resentConfirmationEmail(() => {
+  validationSent.value = true;
+});
 
-  rules = {
-    required: validateRequiredField,
-    email: validateEmailField,
-  };
+resentConfirmationEmailError((err) => {
+  console.error(err);
+  error.value = true;
+});
 
-  mounted(): void {
-    this.credentials.email = this.email;
-  }
+const resendConfirmationAction = async (e: Event): Promise<void> => {
+  e.preventDefault();
+  error.value = false;
 
-  async resendConfirmationAction(e: Event): Promise<void> {
-    e.preventDefault();
-    this.error = false;
-
-    try {
-      await this.$apollo.mutate({
-        mutation: RESEND_CONFIRMATION_EMAIL,
-        variables: {
-          email: this.credentials.email,
-        },
-      });
-    } catch (err) {
-      console.error(err);
-      this.error = true;
-    } finally {
-      this.validationSent = true;
-    }
-  }
-}
+  resendConfirmationEmail({
+    email: credentials.email,
+  });
+};
 </script>
-
-<style lang="scss" scoped>
-.container .columns {
-  margin: 1rem auto 3rem;
-}
-</style>
diff --git a/js/src/views/User/SendPasswordReset.vue b/js/src/views/User/SendPasswordReset.vue
index 567817811..b0ea7dda3 100644
--- a/js/src/views/User/SendPasswordReset.vue
+++ b/js/src/views/User/SendPasswordReset.vue
@@ -1,153 +1,116 @@
 <template>
-  <section class="section container">
-    <div class="columns is-mobile is-centered">
-      <div class="column is-half-desktop">
-        <h1 class="title">
-          {{ $t("Forgot your password?") }}
-        </h1>
-        <p>
-          {{
-            $t(
-              "Enter your email address below, and we'll email you instructions on how to change your password."
-            )
-          }}
-        </p>
-        <b-message
-          title="Error"
-          type="is-danger"
-          v-for="error in errors"
-          :key="error"
-          @close="removeError(error)"
-        >
-          {{ error }}
-        </b-message>
-        <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
-          <b-field :label="$t('Email address')">
-            <b-input
-              aria-required="true"
-              required
-              type="email"
-              v-model="credentials.email"
-            />
-          </b-field>
-          <p class="control">
-            <b-button type="is-primary" native-type="submit">
-              {{ $t("Submit") }}
-            </b-button>
-            <router-link
-              :to="{ name: RouteName.LOGIN }"
-              class="button is-text"
-              >{{ $t("Cancel") }}</router-link
-            >
-          </p>
-        </form>
-        <div v-else>
-          <b-message type="is-success" :closable="false" title="Success">
-            {{
-              $t("We just sent an email to {email}", {
-                email: credentials.email,
-              })
-            }}
-          </b-message>
-          <b-message type="is-info">
-            {{
-              $t(
-                "Please check your spam folder if you didn't receive the email."
-              )
-            }}
-          </b-message>
-        </div>
-      </div>
+  <section class="container mx-auto">
+    <h1>
+      {{ t("Forgot your password?") }}
+    </h1>
+    <p>
+      {{
+        t(
+          "Enter your email address below, and we'll email you instructions on how to change your password."
+        )
+      }}
+    </p>
+    <o-notification
+      title="Error"
+      variant="danger"
+      v-for="error in errors"
+      :key="error"
+      @close="removeError(error)"
+    >
+      {{ error }}
+    </o-notification>
+    <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
+      <o-field :label="t('Email address')">
+        <o-input
+          aria-required="true"
+          required
+          type="email"
+          v-model="credentials.email"
+        />
+      </o-field>
+      <p class="control">
+        <o-button variant="primary" native-type="submit">
+          {{ t("Submit") }}
+        </o-button>
+        <router-link :to="{ name: RouteName.LOGIN }" class="button is-text">{{
+          t("Cancel")
+        }}</router-link>
+      </p>
+    </form>
+    <div v-else>
+      <o-notification variant="success" :closable="false" title="Success">
+        {{
+          t("We just sent an email to {email}", {
+            email: credentials.email,
+          })
+        }}
+      </o-notification>
+      <o-notification variant="info">
+        {{
+          t("Please check your spam folder if you didn't receive the email.")
+        }}
+      </o-notification>
     </div>
   </section>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import {
-  validateEmailField,
-  validateRequiredField,
-} from "../../utils/validators";
+<script lang="ts" setup>
 import { SEND_RESET_PASSWORD } from "../../graphql/auth";
 import RouteName from "../../router/name";
+import { computed, reactive, ref } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
 
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Reset password") as string,
-    };
-  },
-})
-export default class SendPasswordReset extends Vue {
-  @Prop({ type: String, required: false, default: "" }) email!: string;
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Reset password")),
+});
 
-  credentials = {
-    email: "",
-  } as { email: string };
+const props = withDefaults(
+  defineProps<{
+    email?: string;
+  }>(),
+  { email: "" }
+);
 
-  validationSent = false;
+const credentials = reactive<{ email: string }>({
+  email: props.email,
+});
 
-  RouteName = RouteName;
+const validationSent = ref(false);
 
-  errors: string[] = [];
+const errors = ref<string[]>([]);
 
-  state = {
-    email: {
-      status: null,
-      msg: "",
-    } as { status: boolean | null; msg: string },
-  };
+const removeError = (message: string): void => {
+  errors.value.splice(errors.value.indexOf(message));
+};
 
-  rules = {
-    required: validateRequiredField,
-    email: validateEmailField,
-  };
+const {
+  mutate: sendResetPasswordMutation,
+  onDone: sendResetPasswordDone,
+  onError: sendResetPasswordError,
+} = useMutation(SEND_RESET_PASSWORD);
 
-  mounted(): void {
-    this.credentials.email = this.email;
-  }
-
-  removeError(message: string): void {
-    this.errors.splice(this.errors.indexOf(message));
-  }
-
-  async sendResetPasswordTokenAction(e: Event): Promise<void> {
-    e.preventDefault();
-
-    try {
-      await this.$apollo.mutate({
-        mutation: SEND_RESET_PASSWORD,
-        variables: {
-          email: this.credentials.email,
-        },
-      });
-
-      this.validationSent = true;
-    } catch (err: any) {
-      console.error(err);
-      if (err.graphQLErrors) {
-        err.graphQLErrors.forEach(({ message }: { message: string }) => {
-          if (this.errors.indexOf(message) < 0) {
-            this.errors.push(message);
-          }
-        });
+sendResetPasswordDone(() => {
+  validationSent.value = true;
+});
+sendResetPasswordError((err) => {
+  console.error(err);
+  if (err.graphQLErrors) {
+    err.graphQLErrors.forEach(({ message }: { message: string }) => {
+      if (errors.value.indexOf(message) < 0) {
+        errors.value.push(message);
       }
-    }
+    });
   }
+});
 
-  resetState(): void {
-    this.state = {
-      email: {
-        status: null,
-        msg: "",
-      },
-    };
-  }
-}
+const sendResetPasswordTokenAction = async (e: Event): Promise<void> => {
+  e.preventDefault();
+
+  sendResetPasswordMutation({
+    email: credentials.email,
+  });
+};
 </script>
-
-<style lang="scss" scoped>
-.container .columns {
-  margin: 1rem auto 3rem;
-}
-</style>
diff --git a/js/src/views/User/SettingsOnboard.vue b/js/src/views/User/SettingsOnboard.vue
index f5ef580b6..97ed777f1 100644
--- a/js/src/views/User/SettingsOnboard.vue
+++ b/js/src/views/User/SettingsOnboard.vue
@@ -1,19 +1,23 @@
 <template>
-  <div class="section container">
+  <div class="container mx-auto">
     <h1 class="title">{{ $t("Let's define a few settings") }}</h1>
-    <b-steps v-model="stepIndex" :has-navigation="false">
-      <b-step-item step="1" :label="$t('Settings')">
+    <o-steps v-model="stepIndex" :has-navigation="false">
+      <o-step-item step="1" :label="$t('Settings')">
         <settings-onboarding />
-      </b-step-item>
-      <b-step-item step="2" :label="$t('Participation notifications')">
+      </o-step-item>
+      <o-step-item step="2" :label="$t('Participation notifications')">
         <notifications-onboarding />
-      </b-step-item>
-      <b-step-item step="3" :label="$t('Profiles and federation')">
-        <profile-onboarding />
-      </b-step-item>
-    </b-steps>
+      </o-step-item>
+      <o-step-item step="3" :label="$t('Profiles and federation')">
+        <ProfileOnboarding
+          v-if="currentActor && instanceName"
+          :current-actor="currentActor"
+          :instance-name="instanceName"
+        />
+      </o-step-item>
+    </o-steps>
     <section class="has-text-centered section buttons">
-      <b-button
+      <o-button
         outlined
         :disabled="stepIndex < 1"
         tag="router-link"
@@ -23,10 +27,10 @@
         }"
       >
         {{ $t("Previous") }}
-      </b-button>
-      <b-button
+      </o-button>
+      <o-button
         outlined
-        type="is-success"
+        variant="success"
         v-if="stepIndex < 2"
         tag="router-link"
         :to="{
@@ -35,61 +39,63 @@
         }"
       >
         {{ $t("Next") }}
-      </b-button>
-      <b-button
+      </o-button>
+      <o-button
         v-if="stepIndex >= 2"
-        type="is-success"
-        size="is-big"
+        variant="success"
+        size="big"
         tag="router-link"
         :to="{ name: RouteName.HOME }"
       >
         {{ $t("All good, let's continue!") }}
-      </b-button>
+      </o-button>
     </section>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { USER_SETTINGS } from "@/graphql/user";
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { TIMEZONES } from "../../graphql/config";
-import RouteName from "../../router/name";
-import { IConfig } from "../../types/config.model";
+import { IUser } from "@/types/current-user.model";
+import { useQuery } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
+import { computed, defineAsyncComponent, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import RouteName from "@/router/name";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useInstanceName } from "@/composition/apollo/config";
 
-@Component({
-  components: {
-    NotificationsOnboarding: () =>
-      import("../../components/Settings/NotificationsOnboarding.vue"),
-    SettingsOnboarding: () =>
-      import("../../components/Settings/SettingsOnboarding.vue"),
-    ProfileOnboarding: () =>
-      import("../../components/Account/ProfileOnboarding.vue"),
-  },
-  apollo: {
-    config: TIMEZONES,
-    loggedUser: USER_SETTINGS,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("First steps") as string,
-    };
-  },
-})
-export default class SettingsOnboard extends Vue {
-  @Prop({ required: false, default: 1, type: Number }) step!: number;
+const { currentActor } = useCurrentActorClient();
+const { instanceName } = useInstanceName();
+const { refetch } = useQuery<{ loggedUser: IUser }>(USER_SETTINGS);
 
-  config!: IConfig;
+const NotificationsOnboarding = defineAsyncComponent(
+  () => import("@/components/Settings/NotificationsOnboarding.vue")
+);
+const SettingsOnboarding = defineAsyncComponent(
+  () => import("@/components/Settings/SettingsOnboarding.vue")
+);
+const ProfileOnboarding = defineAsyncComponent(
+  () => import("@/components/Account/ProfileOnboarding.vue")
+);
 
-  RouteName = RouteName;
-
-  get stepIndex(): number {
-    return this.step - 1;
+const props = withDefaults(
+  defineProps<{
+    step?: number;
+  }>(),
+  {
+    step: 1,
   }
+);
 
-  @Watch("stepIndex")
-  refetchUserSettings() {
-    this.$apollo.queries.loggedUser.refetch();
-  }
-}
+const stepIndex = computed(() => props.step - 1);
+
+watch(stepIndex, () => {
+  refetch();
+});
+
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("First steps")),
+});
 </script>
 <style scoped lang="scss">
 .section.container {
diff --git a/js/src/views/User/Validate.vue b/js/src/views/User/Validate.vue
deleted file mode 100644
index 7d8f660c6..000000000
--- a/js/src/views/User/Validate.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <section class="section container">
-    <h1 class="title" v-if="loading">
-      {{ $t("Your account is being validated") }}
-    </h1>
-    <div v-else>
-      <div v-if="failed">
-        <b-message
-          :title="$t('Error while validating account')"
-          type="is-danger"
-        >
-          {{
-            $t(
-              "Either the account is already validated, either the validation token is incorrect."
-            )
-          }}
-        </b-message>
-      </div>
-      <h1 class="title" v-else>{{ $t("Your account has been validated") }}</h1>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { ICurrentUserRole } from "@/types/enums";
-import { VALIDATE_USER, UPDATE_CURRENT_USER_CLIENT } from "../../graphql/user";
-import RouteName from "../../router/name";
-import { saveUserData, saveTokenData, changeIdentity } from "../../utils/auth";
-import { ILogin } from "../../types/login.model";
-
-@Component({
-  metaInfo() {
-    return {
-      title: this.$t("Validating account") as string,
-    };
-  },
-})
-export default class Validate extends Vue {
-  @Prop({ type: String, required: true }) token!: string;
-
-  loading = true;
-
-  failed = false;
-
-  async created(): Promise<void> {
-    await this.validateAction();
-  }
-
-  async validateAction(): Promise<void> {
-    try {
-      const { data } = await this.$apollo.mutate<{ validateUser: ILogin }>({
-        mutation: VALIDATE_USER,
-        variables: {
-          token: this.token,
-        },
-      });
-
-      if (data) {
-        saveUserData(data.validateUser);
-        saveTokenData(data.validateUser);
-
-        const { user } = data.validateUser;
-
-        await this.$apollo.mutate({
-          mutation: UPDATE_CURRENT_USER_CLIENT,
-          variables: {
-            id: user.id,
-            email: user.email,
-            isLoggedIn: true,
-            role: ICurrentUserRole.USER,
-          },
-        });
-
-        if (user.defaultActor) {
-          await changeIdentity(
-            this.$apollo.provider.defaultClient,
-            user.defaultActor
-          );
-          await this.$router.push({ name: RouteName.HOME });
-        } else {
-          // If the user didn't register any profile yet, let's create one for them
-          await this.$router.push({
-            name: RouteName.REGISTER_PROFILE,
-            params: { email: user.email, userAlreadyActivated: "true" },
-          });
-        }
-      }
-    } catch (err) {
-      console.error(err);
-      this.failed = true;
-    } finally {
-      this.loading = false;
-    }
-  }
-}
-</script>
diff --git a/js/src/views/User/ValidateUser.vue b/js/src/views/User/ValidateUser.vue
new file mode 100644
index 000000000..fdea6d342
--- /dev/null
+++ b/js/src/views/User/ValidateUser.vue
@@ -0,0 +1,103 @@
+<template>
+  <section class="container mx-auto">
+    <h1 class="title" v-if="loading">
+      {{ $t("Your account is being validated") }}
+    </h1>
+    <div v-else>
+      <div v-if="failed">
+        <o-notification
+          :title="$t('Error while validating account')"
+          variant="danger"
+        >
+          {{
+            $t(
+              "Either the account is already validated, either the validation token is incorrect."
+            )
+          }}
+        </o-notification>
+      </div>
+      <h1 class="title" v-else>{{ $t("Your account has been validated") }}</h1>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { ICurrentUserRole } from "@/types/enums";
+import { VALIDATE_USER, UPDATE_CURRENT_USER_CLIENT } from "../../graphql/user";
+import RouteName from "../../router/name";
+import { saveUserData, saveTokenData } from "../../utils/auth";
+import { changeIdentity } from "../../utils/identity";
+import { ref, onBeforeMount, computed } from "vue";
+import { useRouter } from "vue-router";
+import { useMutation } from "@vue/apollo-composable";
+import { IUser } from "@/types/current-user.model";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("Validating account")),
+});
+
+const props = defineProps<{
+  token: string;
+}>();
+
+const loading = ref(true);
+const failed = ref(false);
+
+onBeforeMount(() => {
+  validateAction({ token: props.token });
+});
+
+const router = useRouter();
+
+const user = ref<IUser | null>(null);
+
+const {
+  mutate: validateAction,
+  onDone: onValidatingUserMutationDone,
+  onError: onValidatingUserMutationError,
+} = useMutation(VALIDATE_USER);
+
+const {
+  onDone: onUpdatingCurrentUserClientDone,
+  mutate: updateCurrentUserClient,
+} = useMutation(UPDATE_CURRENT_USER_CLIENT);
+
+onUpdatingCurrentUserClientDone(async () => {
+  if (user.value?.defaultActor) {
+    await changeIdentity(user.value?.defaultActor);
+    await router.push({ name: RouteName.HOME });
+  } else {
+    // If the user didn't register any profile yet, let's create one for them
+    await router.push({
+      name: RouteName.REGISTER_PROFILE,
+      params: { email: user.value?.email, userAlreadyActivated: "true" },
+    });
+  }
+});
+
+onValidatingUserMutationDone(async ({ data }) => {
+  if (data) {
+    saveUserData(data.validateUser);
+    saveTokenData(data.validateUser);
+
+    const { user: validatedUser } = data.validateUser;
+    user.value = validatedUser;
+
+    updateCurrentUserClient({
+      id: validatedUser.id,
+      email: validatedUser.email,
+      isLoggedIn: true,
+      role: ICurrentUserRole.USER,
+    });
+  }
+});
+
+onValidatingUserMutationError((error) => {
+  console.error(error);
+  failed.value = true;
+  loading.value = false;
+});
+</script>
diff --git a/js/src/vue-apollo.ts b/js/src/vue-apollo.ts
index 4801cc62f..91bba922b 100644
--- a/js/src/vue-apollo.ts
+++ b/js/src/vue-apollo.ts
@@ -1,229 +1,11 @@
-import Vue from "vue";
-import VueApollo from "@vue/apollo-option";
-import { onError } from "@apollo/client/link/error";
-import { createLink } from "apollo-absinthe-upload-link";
-import {
-  ApolloClient,
-  ApolloLink,
-  defaultDataIdFromObject,
-  fromPromise,
-  InMemoryCache,
-  NormalizedCacheObject,
-  split,
-} from "@apollo/client/core";
-import { RetryLink } from "@apollo/client/link/retry";
-import { Socket as PhoenixSocket } from "phoenix";
-import * as AbsintheSocket from "@absinthe/socket";
-import { createAbsintheSocketLink } from "@absinthe/socket-apollo-link";
-import { getMainDefinition } from "@apollo/client/utilities";
-import fetch from "unfetch";
+import { ApolloClient, NormalizedCacheObject } from "@apollo/client/core";
 import buildCurrentUserResolver from "@/apollo/user";
-import { AUTH_ACCESS_TOKEN } from "@/constants";
-import { logout } from "@/utils/auth";
-import { GRAPHQL_API_ENDPOINT, GRAPHQL_API_FULL_PATH } from "./api/_entrypoint";
-import {
-  possibleTypes,
-  typePolicies,
-  refreshAccessToken,
-} from "./apollo/utils";
-import { GraphQLError } from "graphql";
+import { cache } from "./apollo/memory";
+import { fullLink } from "./apollo/link";
 
-// Install the vue plugin
-Vue.use(VueApollo);
-
-let isRefreshing = false;
-let pendingRequests: any[] = [];
-
-// Endpoints
-const httpServer = GRAPHQL_API_ENDPOINT || "http://localhost:4000";
-const httpEndpoint = GRAPHQL_API_FULL_PATH || `${httpServer}/api`;
-const webSocketPrefix = process.env.NODE_ENV === "production" ? "wss" : "ws";
-const wsEndpoint = `${webSocketPrefix}${httpServer.substring(
-  httpServer.indexOf(":")
-)}/graphql_socket`;
-
-function generateTokenHeader() {
-  const token = localStorage.getItem(AUTH_ACCESS_TOKEN);
-
-  return token ? `Bearer ${token}` : null;
-}
-
-const authMiddleware = new ApolloLink((operation, forward) => {
-  // add the authorization to the headers
-  operation.setContext({
-    headers: {
-      authorization: generateTokenHeader(),
-    },
-  });
-
-  if (forward) return forward(operation);
-
-  return null;
-});
-
-const customFetch = async (uri: string, options: any) => {
-  const response = await fetch(uri, options);
-  if (response.status >= 400) {
-    return Promise.reject(response.status);
-  }
-  return response;
-};
-
-const uploadLink = createLink({
-  uri: httpEndpoint,
-  fetch: customFetch,
-});
-
-const phoenixSocket = new PhoenixSocket(wsEndpoint, {
-  params: () => {
-    const token = localStorage.getItem(AUTH_ACCESS_TOKEN);
-    if (token) {
-      return { token };
-    }
-    return {};
-  },
-});
-
-const absintheSocket = AbsintheSocket.create(phoenixSocket);
-const wsLink = createAbsintheSocketLink(absintheSocket);
-
-const link = split(
-  // split based on operation type
-  ({ query }) => {
-    const definition = getMainDefinition(query);
-    return (
-      definition.kind === "OperationDefinition" &&
-      definition.operation === "subscription"
-    );
-  },
-  wsLink,
-  uploadLink
-);
-
-const resolvePendingRequests = () => {
-  pendingRequests.map((callback) => callback());
-  pendingRequests = [];
-};
-
-const isAuthError = (graphQLError: GraphQLError | undefined) => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  return graphQLError && [403, 401].includes(graphQLError.status_code);
-};
-
-const errorLink = onError(
-  ({ graphQLErrors, networkError, forward, operation }) => {
-    console.debug("We have an apollo error", [graphQLErrors, networkError]);
-    if (
-      graphQLErrors?.some((graphQLError) => isAuthError(graphQLError)) ||
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      networkError === 401
-    ) {
-      console.debug("It's a authorization error (statusCode 401)");
-      let forwardOperation;
-
-      if (!isRefreshing) {
-        console.debug("Setting isRefreshing to true");
-        isRefreshing = true;
-
-        forwardOperation = fromPromise(
-          refreshAccessToken(apolloClient)
-            .then((res) => {
-              if (res !== true) {
-                // failed to refresh the token
-                throw "Failed to refresh the token";
-              }
-              resolvePendingRequests();
-
-              const context = operation.getContext();
-              const oldHeaders = context.headers;
-
-              operation.setContext({
-                headers: {
-                  ...oldHeaders,
-                  authorization: generateTokenHeader(),
-                },
-              });
-              return true;
-            })
-            .catch((e) => {
-              console.debug("Something failed, let's logout", e);
-              pendingRequests = [];
-              // don't perform a logout since we don't have any working access/refresh tokens
-              logout(apolloClient, false);
-              return;
-            })
-            .finally(() => {
-              isRefreshing = false;
-            })
-        ).filter((value) => Boolean(value));
-      } else {
-        forwardOperation = fromPromise(
-          new Promise((resolve) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            pendingRequests.push(() => resolve());
-          })
-        );
-      }
-
-      return forwardOperation.flatMap(() => forward(operation));
-    }
-
-    if (graphQLErrors) {
-      graphQLErrors.map(
-        (graphQLError: GraphQLError & { status_code?: number }) => {
-          if (graphQLError?.status_code !== 401) {
-            console.log(
-              `[GraphQL error]: Message: ${graphQLError.message}, Location: ${graphQLError.locations}, Path: ${graphQLError.path}`
-            );
-          }
-        }
-      );
-    }
-
-    if (networkError) {
-      console.error(`[Network error]: ${networkError}`);
-    }
-  }
-);
-
-const retryLink = new RetryLink();
-
-const fullLink = authMiddleware
-  .concat(retryLink)
-  .concat(errorLink)
-  .concat(link);
-
-const cache = new InMemoryCache({
-  addTypename: true,
-  typePolicies,
-  possibleTypes,
-  dataIdFromObject: (object: any) => {
-    if (object.__typename === "Address") {
-      return object.origin_id;
-    }
-    return defaultDataIdFromObject(object);
-  },
-});
-
-const apolloClient = new ApolloClient<NormalizedCacheObject>({
+export const apolloClient = new ApolloClient<NormalizedCacheObject>({
   cache,
   link: fullLink,
   connectToDevTools: true,
   resolvers: buildCurrentUserResolver(cache),
 });
-
-export default new VueApollo({
-  defaultClient: apolloClient,
-  errorHandler(error) {
-    // eslint-disable-next-line no-console
-    console.log(
-      "%cError",
-      "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
-      error.message
-    );
-    console.error(error);
-  },
-});
diff --git a/js/tailwind.config.js b/js/tailwind.config.js
index 75a55ff73..9517e79f0 100644
--- a/js/tailwind.config.js
+++ b/js/tailwind.config.js
@@ -1,25 +1,89 @@
-function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`;
-  };
-}
-
 module.exports = {
   content: ["./public/**/*.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
-        primary: withOpacityValue("--color-primary"),
-        secondary: withOpacityValue("--color-secondary"),
-        "violet-title": withOpacityValue("--color-violet-title"),
+        primary: "#1e7d97",
+        secondary: "#ffd599",
+        "violet-title": "#3c376e",
+        tag: "rgb(var(--color-tag) / <alpha-value>)",
+        "frama-violet": "#725794",
+        "frama-orange": "#cc4e13",
+        "mbz-yellow": {
+          DEFAULT: "#FFD599",
+          50: "#FFFFFF",
+          100: "#FFFFFF",
+          200: "#FFFFFF",
+          300: "#FFF7EB",
+          400: "#FFE6C2",
+          500: "#FFD599",
+          600: "#FFBE61",
+          700: "#FFA729",
+          800: "#F08D00",
+          900: "#B86C00",
+        },
+        "mbz-yellow-alt": {
+          DEFAULT: "#FAB12D",
+          50: "#FEF4E0",
+          100: "#FEECCC",
+          200: "#FDDDA5",
+          300: "#FCCF7D",
+          400: "#FBC055",
+          500: "#FAB12D",
+          600: "#E99806",
+          700: "#B37404",
+          800: "#7C5103",
+          900: "#452D02",
+        },
+        "mbz-purple": {
+          DEFAULT: "#424056",
+          50: "#9C9AB4",
+          100: "#918EAB",
+          200: "#7A779A",
+          300: "#666385",
+          400: "#54516D",
+          500: "#424056",
+          600: "#292836",
+          700: "#111016",
+          800: "#000000",
+          900: "#000000",
+        },
+        "mbz-bluegreen": {
+          DEFAULT: "#1E7D97",
+          50: "#86D2E7",
+          100: "#75CCE4",
+          200: "#53BFDD",
+          300: "#31B2D6",
+          400: "#2599B9",
+          500: "#1E7D97",
+          600: "#155668",
+          700: "#0B3039",
+          800: "#02090B",
+          900: "#000000",
+        },
+        "violet-1": "#3a384c",
+        "violet-2": "#474467",
+        "violet-3": "#3c376e",
+        "yellow-1": "#ffd599",
+        "yellow-2": "#fff1de",
+        "body-background-color": "#efeef4",
+        "purple-1": "#757199",
+        "purple-2": "#cdcaea",
+        "purple-3": "#e6e4f4",
+        "mbz-info": "#36bcd4",
+        "mbz-danger": "#cd2026",
+        "mbz-success": "#0d8758",
+        // primary: "#272633",
+        // secondary: "#ED8D07",
       },
       lineClamp: {
         10: "10",
       },
     },
   },
-  plugins: [require("@tailwindcss/line-clamp")],
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/line-clamp"),
+    require("@tailwindcss/typography"),
+  ],
 };
diff --git a/js/tests/e2e/login.spec.ts b/js/tests/e2e/login.spec.ts
new file mode 100644
index 000000000..8b32d4a94
--- /dev/null
+++ b/js/tests/e2e/login.spec.ts
@@ -0,0 +1,73 @@
+import { test, expect } from "@playwright/test";
+
+test("Login has everything we need", async ({ page }) => {
+  await page.goto("/login");
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Login/);
+
+  const forgotPasswordLink = page.locator("a", {
+    hasText: "Forgot your password?",
+  });
+
+  const reAskInstructionsLink = page.locator("a", {
+    hasText: "Didn't receive the instructions?",
+  });
+
+  const registerLink = page.locator("a", { hasText: "Create an account" });
+
+  await expect(forgotPasswordLink).toBeVisible();
+  await expect(reAskInstructionsLink).toBeVisible();
+  await expect(registerLink).toBeVisible();
+
+  await expect(page.locator("form .field label").first()).toHaveText("Email");
+  await expect(page.locator("form .field label").nth(1)).toHaveText("Password");
+
+  await forgotPasswordLink.click();
+  await page.waitForURL("/password-reset/send");
+  await expect(page.url()).toContain("/password-reset/send");
+  await page.goBack();
+
+  await reAskInstructionsLink.click();
+  await page.waitForURL("/resend-instructions");
+  await expect(page.url()).toContain("/resend-instructions");
+  await page.goBack();
+
+  await registerLink.click();
+  await page.waitForURL("/register/user");
+  await expect(page.url()).toContain("/register/user");
+  await page.goBack();
+});
+
+test("Login rejects unknown users properly", async ({ page }) => {
+  await page.goto("/login");
+
+  await page.locator("#email").fill("hello@me.com");
+  await page.locator("#password").fill("some password");
+
+  const loginButton = page.locator("form button", { hasText: "Login" });
+
+  await expect(loginButton).toHaveAttribute("type", "submit");
+
+  await loginButton.click();
+
+  await expect(page.locator(".notification-danger")).toHaveText(
+    "User not found"
+  );
+});
+
+test("Tries to login with valid credentials", async ({ page, context }) => {
+  await page.goto("/login");
+
+  await page.locator("#email").fill("user@provider.org");
+  await page.locator("#password").fill("valid_passw0rd");
+
+  const loginButton = page.locator("form button", { hasText: "Login" });
+
+  await expect(loginButton).toHaveAttribute("type", "submit");
+
+  await loginButton.click();
+  await page.waitForURL("/");
+  await expect(new URL(page.url()).pathname).toBe("/");
+  expect((await context.storageState()).origins[0].localStorage).toBe("toto");
+});
diff --git a/js/tests/unit/setup.ts b/js/tests/unit/setup.ts
new file mode 100644
index 000000000..05ec937b1
--- /dev/null
+++ b/js/tests/unit/setup.ts
@@ -0,0 +1,16 @@
+import "./specs/mocks/matchMedia";
+import { config } from "@vue/test-utils";
+import { createHead } from "@vueuse/head";
+import { createI18n } from "vue-i18n";
+import en_US from "@/i18n/en_US.json";
+
+const i18n = createI18n({
+  legacy: false,
+  messages: { en_US },
+  locale: "en_US",
+});
+
+const head = createHead();
+
+config.global.plugins.push(head);
+config.global.plugins.push(i18n);
diff --git a/js/tests/unit/specs/boot/routes.spec.ts b/js/tests/unit/specs/boot/routes.spec.ts
deleted file mode 100644
index 483938a3e..000000000
--- a/js/tests/unit/specs/boot/routes.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
-import { routes } from "@/router";
-import App from "@/App.vue";
-import VueRouter from "vue-router";
-import Buefy from "buefy";
-import flushPromises from "flush-promises";
-import VueAnnouncer from "@vue-a11y/announcer";
-import VueSkipTo from "@vue-a11y/skip-to";
-
-const localVue = createLocalVue();
-config.mocks.$t = (key: string): string => key;
-localVue.use(VueRouter);
-localVue.use(Buefy);
-localVue.use(VueAnnouncer);
-localVue.use(VueSkipTo);
-
-describe("routing", () => {
-  test("Homepage", async () => {
-    const router = new VueRouter({ routes, mode: "history" });
-    const wrapper = mount(App, {
-      localVue,
-      router,
-      stubs: {
-        NavBar: true,
-        "mobilizon-footer": true,
-      },
-    });
-
-    expect(wrapper.html()).toContain('<div id="homepage">');
-  });
-
-  test("About", async () => {
-    const router = new VueRouter({ routes, mode: "history" });
-    const wrapper = mount(App, {
-      localVue,
-      router,
-      stubs: {
-        NavBar: true,
-        "mobilizon-footer": true,
-      },
-    });
-
-    router.push("/about");
-    await flushPromises();
-    expect(wrapper.vm.$route.path).toBe("/about/instance");
-    expect(wrapper.html()).toContain(
-      '<a href="/about/instance" aria-current="page"'
-    );
-  });
-});
diff --git a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
index b607db56f..2b07cf7d5 100644
--- a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
+++ b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
@@ -1,12 +1,10 @@
-import { config, createLocalVue, shallowMount, Wrapper } from "@vue/test-utils";
+import { config, shallowMount, VueWrapper } from "@vue/test-utils";
 import CommentTree from "@/components/Comment/CommentTree.vue";
-import Buefy from "buefy";
 import {
   createMockClient,
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "@vue/apollo-option";
 import {
   COMMENTS_THREADS_WITH_REPLIES,
   CREATE_COMMENT_FROM_EVENT,
@@ -21,10 +19,20 @@ import {
 } from "../../mocks/event";
 import flushPromises from "flush-promises";
 import { defaultResolvers } from "../../common";
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueApollo);
-config.mocks.$t = (key: string): string => key;
+import { afterEach, describe, vi, it, expect, beforeEach } from "vitest";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import Oruga from "@oruga-ui/oruga-next";
+import { notifierPlugin } from "@/plugins/notifier";
+import { InMemoryCache } from "@apollo/client/cache";
+import { createRouter, createWebHistory, Router } from "vue-router";
+import { routes } from "@/router";
+import { dialogPlugin } from "@/plugins/dialog";
+
+config.global.plugins.push(Oruga);
+config.global.plugins.push(notifierPlugin);
+config.global.plugins.push(dialogPlugin);
+
+let router: Router;
 
 const eventData = {
   id: "1",
@@ -34,21 +42,23 @@ const eventData = {
   },
 };
 describe("CommentTree", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper;
   let mockClient: MockApolloClient | null;
-  let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
 
-  const generateWrapper = (handlers = {}, baseData = {}) => {
+  const generateWrapper = (handlers = {}, extraProps = {}) => {
+    const cache = new InMemoryCache({ addTypename: true });
+
     mockClient = createMockClient({
+      cache,
       resolvers: defaultResolvers,
     });
 
     requestHandlers = {
-      eventCommentThreadsQueryHandler: jest
+      eventCommentThreadsQueryHandler: vi
         .fn()
         .mockResolvedValue(eventCommentThreadsMock),
-      createCommentForEventMutationHandler: jest
+      createCommentForEventMutationHandler: vi
         .fn()
         .mockResolvedValue(newCommentForEventResponse),
       ...handlers,
@@ -62,36 +72,39 @@ describe("CommentTree", () => {
       CREATE_COMMENT_FROM_EVENT,
       requestHandlers.createCommentForEventMutationHandler
     );
-    apolloProvider = new VueApollo({
-      defaultClient: mockClient,
-    });
-
     wrapper = shallowMount(CommentTree, {
-      localVue,
-      apolloProvider,
-      propsData: {
+      props: {
         event: { ...eventData },
+        ...extraProps,
       },
-      stubs: ["editor"],
-      data() {
-        return {
-          ...baseData,
-        };
+      global: {
+        provide: {
+          [DefaultApolloClient]: mockClient,
+        },
+        plugins: [router],
       },
     });
   };
 
+  beforeEach(async () => {
+    router = createRouter({
+      history: createWebHistory(),
+      routes: routes,
+    });
+
+    // await router.isReady();
+  });
+
   afterEach(() => {
     mockClient = null;
     requestHandlers = {};
-    apolloProvider = null;
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it("renders a loading comment tree", async () => {
     generateWrapper();
 
-    expect(wrapper.find(".loading").text()).toBe("Loading comments…");
+    expect(wrapper.find("p.text-center").text()).toBe("Loading comments…");
 
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -99,15 +112,14 @@ describe("CommentTree", () => {
   it("renders a comment tree with comments", async () => {
     generateWrapper();
 
-    await flushPromises();
-
     expect(wrapper.exists()).toBe(true);
     expect(
       requestHandlers.eventCommentThreadsQueryHandler
     ).toHaveBeenCalledWith({ eventUUID: eventData.uuid });
-    expect(wrapper.vm.$apollo.queries.comments).toBeTruthy();
-    expect(wrapper.find(".loading").exists()).toBe(false);
-    expect(wrapper.findAll(".comment-list .root-comment").length).toBe(2);
+    await flushPromises();
+    expect(wrapper.find("p.text-center").exists()).toBe(false);
+
+    expect(wrapper.findAllComponents("comment-stub").length).toBe(2);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -117,18 +129,20 @@ describe("CommentTree", () => {
       {
         newComment: {
           text: newCommentForEventMock.text,
+          isAnnouncement: false,
         },
       }
     );
 
     await flushPromises();
 
-    expect(wrapper.find("form.new-comment").isVisible()).toBe(true);
-    expect(wrapper.findAll(".comment-list .root-comment").length).toBe(2);
+    expect(wrapper.find("form").isVisible()).toBe(true);
+    expect(wrapper.findAllComponents("comment-stub").length).toBe(2);
+    wrapper.getComponent({ ref: "commenteditor" });
 
-    wrapper.find("form.new-comment").trigger("submit");
+    wrapper.find("form").trigger("submit");
 
-    await wrapper.vm.$nextTick();
+    await flushPromises();
     expect(
       requestHandlers.createCommentForEventMutationHandler
     ).toHaveBeenCalledWith({
@@ -152,7 +166,7 @@ describe("CommentTree", () => {
 
   it("renders an empty comment tree", async () => {
     generateWrapper({
-      eventCommentThreadsQueryHandler: jest
+      eventCommentThreadsQueryHandler: vi
         .fn()
         .mockResolvedValue(eventNoCommentThreadsMock),
     });
@@ -162,9 +176,7 @@ describe("CommentTree", () => {
       requestHandlers.eventCommentThreadsQueryHandler
     ).toHaveBeenCalledWith({ eventUUID: eventData.uuid });
 
-    expect(wrapper.findComponent({ name: "EmptyContent" }).text()).toBe(
-      "No comments yet"
-    );
+    expect(wrapper.findComponent({ name: "EmptyContent" }).exists());
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
diff --git a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
index cd901110d..7636fdb19 100644
--- a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
+++ b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
@@ -1,73 +1,67 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`CommentTree renders a comment tree with comments 1`] = `
-<div>
-  <form class="new-comment">
-    <!---->
-    <article class="media">
-      <figure class="media-left">
-        <identity-picker-wrapper-stub value="[object Object]"></identity-picker-wrapper-stub>
+exports[`CommentTree > renders a comment tree with comments 1`] = `
+"<div data-v-5d0380ab=\\"\\">
+  <form class=\\"\\" data-v-5d0380ab=\\"\\">
+    <!--v-if-->
+    <article class=\\"flex flex-wrap items-start gap-2\\" data-v-5d0380ab=\\"\\">
+      <figure class=\\"\\" data-v-5d0380ab=\\"\\">
+        <identity-picker-wrapper-stub modelvalue=\\"[object Object]\\" inline=\\"false\\" masked=\\"false\\" data-v-5d0380ab=\\"\\"></identity-picker-wrapper-stub>
       </figure>
-      <div class="media-content">
-        <div class="field">
-          <div class="field">
-            <p class="control">
-              <editor-stub mode="comment" aria-label="Comment body" value=""></editor-stub>
-            </p>
-            <!---->
+      <div class=\\"flex-1\\" data-v-5d0380ab=\\"\\">
+        <div class=\\"flex flex-col gap-2\\" data-v-5d0380ab=\\"\\">
+          <div class=\\"editor-wrapper\\" data-v-5d0380ab=\\"\\">
+            <editor-stub currentactor=\\"[object Object]\\" mode=\\"comment\\" modelvalue=\\"\\" aria-label=\\"Comment body\\" data-v-5d0380ab=\\"\\"></editor-stub>
+            <!--v-if-->
           </div>
-          <!---->
+          <!--v-if-->
         </div>
       </div>
-      <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
+      <div class=\\"\\" data-v-5d0380ab=\\"\\">
+        <o-button-stub variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\" data-v-5d0380ab=\\"\\"></o-button-stub>
       </div>
     </article>
   </form>
-  <transition-group-stub tag="div" name="comment-empty-list">
-    <transition-group-stub tag="ul" name="comment-list" class="comment-list">
-      <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
-      <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
+  <transition-group-stub data-v-5d0380ab=\\"\\">
+    <transition-group-stub data-v-5d0380ab=\\"\\">
+      <comment-stub comment=\\"[object Object]\\" event=\\"[object Object]\\" currentactor=\\"[object Object]\\" rootcomment=\\"true\\" class=\\"root-comment\\" data-v-5d0380ab=\\"\\"></comment-stub>
+      <comment-stub comment=\\"[object Object]\\" event=\\"[object Object]\\" currentactor=\\"[object Object]\\" rootcomment=\\"true\\" class=\\"root-comment\\" data-v-5d0380ab=\\"\\"></comment-stub>
     </transition-group-stub>
   </transition-group-stub>
-</div>
+</div>"
 `;
 
-exports[`CommentTree renders a loading comment tree 1`] = `
-<div>
-  <!---->
-  <p class="loading has-text-centered">
-    Loading comments…
-  </p>
-</div>
+exports[`CommentTree > renders a loading comment tree 1`] = `
+"<div data-v-5d0380ab=\\"\\">
+  <!--v-if-->
+  <p class=\\"text-center\\" data-v-5d0380ab=\\"\\">Loading comments…</p>
+</div>"
 `;
 
-exports[`CommentTree renders an empty comment tree 1`] = `
-<div>
-  <form class="new-comment">
-    <!---->
-    <article class="media">
-      <figure class="media-left">
-        <identity-picker-wrapper-stub value="[object Object]"></identity-picker-wrapper-stub>
+exports[`CommentTree > renders an empty comment tree 1`] = `
+"<div data-v-5d0380ab=\\"\\">
+  <form class=\\"\\" data-v-5d0380ab=\\"\\">
+    <!--v-if-->
+    <article class=\\"flex flex-wrap items-start gap-2\\" data-v-5d0380ab=\\"\\">
+      <figure class=\\"\\" data-v-5d0380ab=\\"\\">
+        <identity-picker-wrapper-stub modelvalue=\\"[object Object]\\" inline=\\"false\\" masked=\\"false\\" data-v-5d0380ab=\\"\\"></identity-picker-wrapper-stub>
       </figure>
-      <div class="media-content">
-        <div class="field">
-          <div class="field">
-            <p class="control">
-              <editor-stub mode="comment" aria-label="Comment body" value=""></editor-stub>
-            </p>
-            <!---->
+      <div class=\\"flex-1\\" data-v-5d0380ab=\\"\\">
+        <div class=\\"flex flex-col gap-2\\" data-v-5d0380ab=\\"\\">
+          <div class=\\"editor-wrapper\\" data-v-5d0380ab=\\"\\">
+            <editor-stub currentactor=\\"[object Object]\\" mode=\\"comment\\" modelvalue=\\"\\" aria-label=\\"Comment body\\" data-v-5d0380ab=\\"\\"></editor-stub>
+            <!--v-if-->
           </div>
-          <!---->
+          <!--v-if-->
         </div>
       </div>
-      <div class="send-comment">
-        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" class="comment-button-submit">Send</b-button-stub>
+      <div class=\\"\\" data-v-5d0380ab=\\"\\">
+        <o-button-stub variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\" data-v-5d0380ab=\\"\\"></o-button-stub>
       </div>
     </article>
   </form>
-  <transition-group-stub tag="div" name="comment-empty-list">
-    <empty-content-stub icon="comment" descriptionclasses="" inline="true"><span>No comments yet</span></empty-content-stub>
+  <transition-group-stub data-v-5d0380ab=\\"\\">
+    <empty-content-stub icon=\\"comment\\" descriptionclasses=\\"\\" inline=\\"true\\" center=\\"false\\" data-v-5d0380ab=\\"\\"></empty-content-stub>
   </transition-group-stub>
-</div>
+</div>"
 `;
diff --git a/js/tests/unit/specs/components/Group/GroupSection.spec.ts b/js/tests/unit/specs/components/Group/GroupSection.spec.ts
index 73932edfc..73b1a06bd 100644
--- a/js/tests/unit/specs/components/Group/GroupSection.spec.ts
+++ b/js/tests/unit/specs/components/Group/GroupSection.spec.ts
@@ -1,15 +1,23 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import GroupSection from "@/components/Group/GroupSection.vue";
-import Buefy from "buefy";
-import VueRouter, { Location } from "vue-router";
 import RouteName from "@/router/name";
 import { routes } from "@/router";
+import { describe, it, expect, beforeEach } from "vitest";
+import { createRouter, createWebHistory, Router } from "vue-router";
+import Oruga from "@oruga-ui/oruga-next";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
-localVue.use(VueRouter);
-const router = new VueRouter({ routes, mode: "history" });
+config.global.plugins.push(Oruga);
+
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
 
 const groupPreferredUsername = "my_group";
 const groupDomain = "remotedomain.net";
@@ -22,7 +30,7 @@ type Props = {
   title?: string;
   icon?: string;
   privateSection?: boolean;
-  route?: Location;
+  route?: { name: string; params: { preferredUsername: string } };
 };
 
 const baseProps: Props = {
@@ -38,47 +46,42 @@ const baseProps: Props = {
 
 const generateWrapper = (customProps: Props = {}) => {
   return mount(GroupSection, {
-    localVue,
-    router,
-    propsData: { ...baseProps, ...customProps },
+    props: { ...baseProps, ...customProps },
     slots: {
       default: `<div>${defaultSlotText}</div>`,
-      create: `<router-link :to="{
-                name: 'POST_CREATE',
-                params: { preferredUsername: '${groupUsername}' },
-              }"
-              class="button is-primary"
-              >{{ $t("${createSlotButtonText}") }}</router-link
-            >`,
+      create: `<router-link :to="{ 
+        name: 'POST_CREATE',
+        params: {
+          preferredUsername: '${groupUsername}'
+        }
+      }"
+      class="btn-primary">${createSlotButtonText}</router-link>`,
+    },
+    global: {
+      plugins: [router],
     },
   });
 };
 
 describe("GroupSection", () => {
   it("renders group section with basic informations", () => {
-    const wrapper = generateWrapper({});
+    const wrapper = generateWrapper();
 
-    expect(
-      wrapper
-        .find(".group-section-title h2 span.icon i")
-        .classes(`mdi-${baseProps.icon}`)
-    ).toBe(true);
+    expect(wrapper.find("i.mdi").classes(`mdi-${baseProps.icon}`)).toBe(true);
 
-    expect(wrapper.find(".group-section-title h2 span:last-child").text()).toBe(
-      baseProps.title
+    expect(wrapper.find("h2").text()).toBe(baseProps.title);
+
+    expect(wrapper.find("a").attributes("href")).toBe(`/@${groupUsername}/p`);
+
+    // expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
+    //   true
+    // );
+
+    expect(wrapper.find("section > div.flex-1").text()).toBe(defaultSlotText);
+    expect(wrapper.find(".flex.justify-end.p-2 a").text()).toBe(
+      createSlotButtonText
     );
-
-    expect(wrapper.find(".group-section-title a").attributes("href")).toBe(
-      `/@${groupUsername}/p`
-    );
-
-    expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
-      true
-    );
-
-    expect(wrapper.find(".main-slot div").text()).toBe(defaultSlotText);
-    expect(wrapper.find(".create-slot a").text()).toBe(createSlotButtonText);
-    expect(wrapper.find(".create-slot a").attributes("href")).toBe(
+    expect(wrapper.find(".flex.justify-end.p-2 a").attributes("href")).toBe(
       `/@${groupUsername}/p/new`
     );
     expect(wrapper.html()).toMatchSnapshot();
@@ -87,9 +90,9 @@ describe("GroupSection", () => {
   it("renders public group section", () => {
     const wrapper = generateWrapper({ privateSection: false });
 
-    expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
-      false
-    );
+    // expect(wrapper.find(".group-section-title").classes("privateSection")).toBe(
+    //   false
+    // );
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
diff --git a/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap b/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
index 14071e239..de0a9aef7 100644
--- a/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
+++ b/js/tests/unit/specs/components/Group/__snapshots__/GroupSection.spec.ts.snap
@@ -1,25 +1,29 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`GroupSection renders group section with basic informations 1`] = `
-<section>
-  <div class="group-section-title privateSection">
-    <h2><span class="icon"><i class="mdi mdi-bullhorn mdi-24px"></i></span> <span>My group section</span></h2> <a href="/@my_group@remotedomain.net/p" class="">View all</a>
+exports[`GroupSection > renders group section with basic informations 1`] = `
+"<section class=\\"flex flex-col mb-3 border-2 border-mbz-purple\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+    <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
+      <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
+    </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
   </div>
-  <div class="main-slot">
+  <div class=\\"flex-1\\">
     <div>A list of elements</div>
   </div>
-  <div class="create-slot"><a href="/@my_group@remotedomain.net/p/new" class="button is-primary">+ Create a post</a></div>
-</section>
+  <div class=\\"flex justify-end p-2\\"><a href=\\"/@my_group@remotedomain.net/p/new\\" class=\\"btn-primary\\">+ Create a post</a></div>
+</section>"
 `;
 
-exports[`GroupSection renders public group section 1`] = `
-<section>
-  <div class="group-section-title">
-    <h2><span class="icon"><i class="mdi mdi-bullhorn mdi-24px"></i></span> <span>My group section</span></h2> <a href="/@my_group@remotedomain.net/p" class="">View all</a>
+exports[`GroupSection > renders public group section 1`] = `
+"<section class=\\"flex flex-col mb-3 border-2 border-yellow-1\\">
+  <div class=\\"flex items-stretch py-3 px-1 bg-yellow-1 text-violet-title\\">
+    <div class=\\"flex flex-1 gap-1\\"><span class=\\"o-icon\\"><i class=\\"mdi mdi-bullhorn 36\\"></i></span>
+      <h2 class=\\"text-2xl font-medium mt-0\\">My group section</h2>
+    </div><a href=\\"/@my_group@remotedomain.net/p\\" class=\\"self-center\\">View all</a>
   </div>
-  <div class="main-slot">
+  <div class=\\"flex-1\\">
     <div>A list of elements</div>
   </div>
-  <div class="create-slot"><a href="/@my_group@remotedomain.net/p/new" class="button is-primary">+ Create a post</a></div>
-</section>
+  <div class=\\"flex justify-end p-2\\"><a href=\\"/@my_group@remotedomain.net/p/new\\" class=\\"btn-primary\\">+ Create a post</a></div>
+</section>"
 `;
diff --git a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
index 3e443c352..94a59ff4e 100644
--- a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
+++ b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
@@ -1,26 +1,26 @@
-import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
+import { config, mount, VueWrapper } from "@vue/test-utils";
 import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
-import Buefy from "buefy";
-import VueRouter from "vue-router";
+import { createRouter, createWebHistory, Router } from "vue-router";
 import { routes } from "@/router";
 import { CommentModeration, EventJoinOptions } from "@/types/enums";
-import {
-  createMockClient,
-  MockApolloClient,
-  RequestHandler,
-} from "mock-apollo-client";
-import { CONFIG } from "@/graphql/config";
-import VueApollo from "@vue/apollo-option";
-import { configMock } from "../../mocks/config";
 import { InMemoryCache } from "@apollo/client/cache";
-import { defaultResolvers } from "../../common";
+import { beforeEach, describe, expect, vi, it } from "vitest";
+import Oruga from "@oruga-ui/oruga-next";
+import FloatingVue from "floating-vue";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueRouter);
-const router = new VueRouter({ routes, mode: "history" });
-config.mocks.$t = (key: string): string => key;
+config.global.plugins.push(Oruga);
+config.global.plugins.push(FloatingVue);
 
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
 const eventData = {
   id: "1",
   uuid: "e37910ea-fd5a-4756-7634-00971f3f4107",
@@ -32,49 +32,31 @@ const eventData = {
 };
 
 describe("ParticipationSection", () => {
-  let wrapper: Wrapper<Vue>;
-  let mockClient: MockApolloClient;
-  let apolloProvider;
-  let requestHandlers: Record<string, RequestHandler>;
+  let wrapper: VueWrapper;
 
   const generateWrapper = (
-    handlers: Record<string, unknown> = {},
     customProps: Record<string, unknown> = {},
     baseData: Record<string, unknown> = {}
   ) => {
     const cache = new InMemoryCache({ addTypename: false });
 
-    mockClient = createMockClient({
-      cache,
-      resolvers: defaultResolvers,
-    });
-    requestHandlers = {
-      configQueryHandler: jest.fn().mockResolvedValue(configMock),
-      ...handlers,
-    };
-    mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
-
-    apolloProvider = new VueApollo({
-      defaultClient: mockClient,
-    });
-
     wrapper = mount(ParticipationSection, {
-      localVue,
-      router,
-      apolloProvider,
       stubs: {
         ParticipationButton: true,
       },
-      propsData: {
+      props: {
         participation: null,
         event: eventData,
         anonymousParticipation: null,
+        currentActor: { id: "5" },
+        identities: [],
+        anonymousParticipationConfig: {
+          allowed: true,
+        },
         ...customProps,
       },
-      data() {
-        return {
-          ...baseData,
-        };
+      global: {
+        plugins: [router],
       },
     });
   };
@@ -84,8 +66,6 @@ describe("ParticipationSection", () => {
     await wrapper.vm.$nextTick();
 
     expect(wrapper.exists()).toBe(true);
-    expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
-    expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
 
     expect(wrapper.find(".event-participation").exists()).toBeTruthy();
 
@@ -101,20 +81,20 @@ describe("ParticipationSection", () => {
   });
 
   it("renders the participation section with existing confimed anonymous participation", async () => {
-    generateWrapper({}, { anonymousParticipation: true });
+    generateWrapper({ anonymousParticipation: true });
 
     expect(wrapper.find(".event-participation > small").text()).toContain(
       "You are participating in this event anonymously"
     );
 
     const cancelAnonymousParticipationButton = wrapper.find(
-      ".event-participation > button.button.is-text"
+      ".event-participation > button.o-btn--text"
     );
     expect(cancelAnonymousParticipationButton.text()).toBe(
       "Cancel anonymous participation"
     );
 
-    wrapper.find(".event-participation small .is-clickable").trigger("click");
+    wrapper.find(".event-participation small span").trigger("click");
     expect(
       wrapper
         .findComponent({ ref: "anonymous-participation-modal" })
@@ -127,33 +107,30 @@ describe("ParticipationSection", () => {
   });
 
   it("renders the participation section with existing confimed anonymous participation but event moderation", async () => {
-    generateWrapper(
-      {},
-      {
-        anonymousParticipation: true,
-        event: { ...eventData, joinOptions: EventJoinOptions.RESTRICTED },
-      }
-    );
+    generateWrapper({
+      anonymousParticipation: true,
+      event: { ...eventData, joinOptions: EventJoinOptions.RESTRICTED },
+    });
 
     expect(wrapper.find(".event-participation > small").text()).toContain(
       "You are participating in this event anonymously"
     );
 
     const cancelAnonymousParticipationButton = wrapper.find(
-      ".event-participation > button.button.is-text"
+      ".event-participation > button.o-btn--text"
     );
     expect(cancelAnonymousParticipationButton.text()).toBe(
       "Cancel anonymous participation"
     );
 
-    wrapper.find(".event-participation small .is-clickable").trigger("click");
+    wrapper.find(".event-participation small span").trigger("click");
 
     await wrapper.vm.$nextTick();
     const modal = wrapper.findComponent({
       ref: "anonymous-participation-modal",
     });
     expect(modal.isVisible()).toBeTruthy();
-    expect(modal.find("article.notification.is-primary").text()).toBe(
+    expect(modal.find(".o-notification--primary").text()).toBe(
       "As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
     );
 
@@ -163,7 +140,7 @@ describe("ParticipationSection", () => {
   });
 
   it("renders the participation section with existing unconfirmed anonymous participation", async () => {
-    generateWrapper({}, { anonymousParticipation: false });
+    generateWrapper({ anonymousParticipation: false });
 
     expect(wrapper.find(".event-participation > small").text()).toContain(
       "You are participating in this event anonymously but didn't confirm participation"
@@ -171,19 +148,16 @@ describe("ParticipationSection", () => {
   });
 
   it("renders the participation section but the event is already passed", async () => {
-    generateWrapper(
-      {},
-      {
-        event: {
-          ...eventData,
-          beginsOn: "2020-12-02T10:52:56Z",
-          endsOn: "2020-12-03T10:52:56Z",
-        },
-      }
-    );
+    generateWrapper({
+      event: {
+        ...eventData,
+        beginsOn: "2020-12-02T10:52:56Z",
+        endsOn: "2020-12-03T10:52:56Z",
+      },
+    });
 
     expect(wrapper.find(".event-participation").exists()).toBeFalsy();
-    expect(wrapper.find("button.button.is-primary").text()).toBe(
+    expect(wrapper.find("button.o-btn--primary").text()).toBe(
       "Event already passed"
     );
   });
diff --git a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
index 377965ebd..5ccdc9202 100644
--- a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
+++ b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
@@ -1,7 +1,5 @@
-import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
+import { config, mount, VueWrapper } from "@vue/test-utils";
 import ParticipationWithoutAccount from "@/components/Participation/ParticipationWithoutAccount.vue";
-import Buefy from "buefy";
-import VueRouter from "vue-router";
 import { routes } from "@/router";
 import {
   CommentModeration,
@@ -13,26 +11,34 @@ import {
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import { CONFIG } from "@/graphql/config";
-import VueApollo from "@vue/apollo-option";
+import { ANONYMOUS_ACTOR_ID } from "@/graphql/config";
 import { FETCH_EVENT_BASIC, JOIN_EVENT } from "@/graphql/event";
 import { IEvent } from "@/types/event.model";
-import { i18n } from "@/utils/i18n";
-import { configMock } from "../../mocks/config";
+import { anonymousActorIdMock } from "../../mocks/config";
 import {
   fetchEventBasicMock,
   joinEventMock,
   joinEventResponseMock,
 } from "../../mocks/event";
-import { InMemoryCache } from "@apollo/client/cache";
 import { defaultResolvers } from "../../common";
 import flushPromises from "flush-promises";
+import { vi, describe, expect, it, beforeEach, afterEach } from "vitest";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import { Router, createRouter, createWebHistory } from "vue-router";
+import Oruga from "@oruga-ui/oruga-next";
+import { cache } from "@/apollo/memory";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueRouter);
-const router = new VueRouter({ routes, mode: "history" });
-config.mocks.$t = (key: string): string => key;
+config.global.plugins.push(Oruga);
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
+});
 
 const eventData = {
   id: "1",
@@ -56,31 +62,38 @@ const eventData = {
 };
 
 describe("ParticipationWithoutAccount", () => {
-  let wrapper: Wrapper<Vue>;
-  let mockClient: MockApolloClient;
-  let apolloProvider;
+  let wrapper: VueWrapper;
+  let mockClient: MockApolloClient | null;
   let requestHandlers: Record<string, RequestHandler>;
 
+  afterEach(() => {
+    wrapper?.unmount();
+    cache.reset();
+    mockClient = null;
+  });
+
   const generateWrapper = (
     handlers: Record<string, unknown> = {},
-    customProps: Record<string, unknown> = {},
-    baseData: Record<string, unknown> = {}
+    customProps: Record<string, unknown> = {}
   ) => {
-    const cache = new InMemoryCache({ addTypename: false });
-
     mockClient = createMockClient({
       cache,
       resolvers: defaultResolvers,
     });
     requestHandlers = {
-      configQueryHandler: jest.fn().mockResolvedValue(configMock),
-      fetchEventQueryHandler: jest.fn().mockResolvedValue(fetchEventBasicMock),
-      joinEventMutationHandler: jest
+      anonymousActorIdQueryHandler: vi
+        .fn()
+        .mockResolvedValue(anonymousActorIdMock),
+      fetchEventQueryHandler: vi.fn().mockResolvedValue(fetchEventBasicMock),
+      joinEventMutationHandler: vi
         .fn()
         .mockResolvedValue(joinEventResponseMock),
       ...handlers,
     };
-    mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
+    mockClient.setRequestHandler(
+      ANONYMOUS_ACTOR_ID,
+      requestHandlers.anonymousActorIdQueryHandler
+    );
     mockClient.setRequestHandler(
       FETCH_EVENT_BASIC,
       requestHandlers.fetchEventQueryHandler
@@ -90,43 +103,33 @@ describe("ParticipationWithoutAccount", () => {
       requestHandlers.joinEventMutationHandler
     );
 
-    apolloProvider = new VueApollo({
-      defaultClient: mockClient,
-    });
-
     wrapper = mount(ParticipationWithoutAccount, {
-      localVue,
-      router,
-      i18n,
-      apolloProvider,
-      propsData: {
+      props: {
         uuid: eventData.uuid,
         ...customProps,
       },
-      data() {
-        return {
-          ...baseData,
-        };
+      global: {
+        provide: {
+          [DefaultApolloClient]: mockClient,
+        },
+        plugins: [router],
       },
     });
   };
 
   it("renders the participation without account view with minimal data", async () => {
     generateWrapper();
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
 
     expect(wrapper.exists()).toBe(true);
-    expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
-    expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
+    expect(requestHandlers.anonymousActorIdQueryHandler).toHaveBeenCalled();
 
     expect(requestHandlers.fetchEventQueryHandler).toHaveBeenCalledWith({
       uuid: eventData.uuid,
     });
-    expect(wrapper.vm.$apollo.queries.event).toBeTruthy();
+    await flushPromises();
 
-    expect(wrapper.find(".hero-body .container").isVisible()).toBeTruthy();
-    expect(wrapper.find("article.message.is-info").text()).toBe(
+    expect(wrapper.find(".container").isVisible()).toBeTruthy();
+    expect(wrapper.find(".o-notification--info").text()).toBe(
       "Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
     );
 
@@ -134,13 +137,13 @@ describe("ParticipationWithoutAccount", () => {
     wrapper.find("textarea").setValue("a message long enough");
     wrapper.find("form").trigger("submit");
 
-    await wrapper.vm.$nextTick();
+    await flushPromises();
 
     expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
       ...joinEventMock,
     });
 
-    const cachedData = mockClient.cache.readQuery<{ event: IEvent }>({
+    const cachedData = mockClient?.cache.readQuery<{ event: IEvent }>({
       query: FETCH_EVENT_BASIC,
       variables: {
         uuid: eventData.uuid,
@@ -161,10 +164,10 @@ describe("ParticipationWithoutAccount", () => {
     expect(wrapper.find("h1.title").text()).toBe(
       "Request for participation confirmation sent"
     );
-    // TextEncoder is not in js-dom
-    expect(
-      wrapper.find("article.message.is-warning .media-content").text()
-    ).toBe("Unable to save your participation in this browser.");
+    // TextEncoder ~is~ was not in js-dom?
+    // expect(wrapper.find(".o-notification--error").text()).toBe(
+    //   "Unable to save your participation in this browser."
+    // );
 
     expect(wrapper.find("span.details").text()).toBe(
       "Your participation will be validated once you click the confirmation link into the email."
@@ -174,7 +177,7 @@ describe("ParticipationWithoutAccount", () => {
 
   it("renders the warning if the event participation is restricted", async () => {
     generateWrapper({
-      fetchEventQueryHandler: jest.fn().mockResolvedValue({
+      fetchEventQueryHandler: vi.fn().mockResolvedValue({
         data: {
           event: {
             ...fetchEventBasicMock.data.event,
@@ -182,7 +185,7 @@ describe("ParticipationWithoutAccount", () => {
           },
         },
       }),
-      joinEventMutationHandler: jest.fn().mockResolvedValue({
+      joinEventMutationHandler: vi.fn().mockResolvedValue({
         data: {
           joinEvent: {
             ...joinEventResponseMock.data.joinEvent,
@@ -192,17 +195,18 @@ describe("ParticipationWithoutAccount", () => {
       }),
     });
 
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
+    await flushPromises();
 
-    expect(wrapper.vm.$data.event.joinOptions).toBe(
-      EventJoinOptions.RESTRICTED
-    );
+    // expect(wrapper.vm.$data.event.joinOptions).toBe(
+    //   EventJoinOptions.RESTRICTED
+    // );
 
-    expect(wrapper.find(".hero-body .container").text()).toContain(
+    expect(wrapper.findAll("section.container form > p")[1].text()).toContain(
       "The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
     );
-    expect(wrapper.find(".hero-body .container").text()).not.toContain(
+    expect(
+      wrapper.findAll("section.container form > p")[1].text()
+    ).not.toContain(
       "If you want, you may send a message to the event organizer here."
     );
 
@@ -210,13 +214,13 @@ describe("ParticipationWithoutAccount", () => {
     wrapper.find("textarea").setValue("a message long enough");
     wrapper.find("form").trigger("submit");
 
-    await wrapper.vm.$nextTick();
+    await flushPromises();
 
     expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
       ...joinEventMock,
     });
 
-    const cachedData = mockClient.cache.readQuery<{ event: IEvent }>({
+    const cachedData = mockClient?.cache.readQuery<{ event: IEvent }>({
       query: FETCH_EVENT_BASIC,
       variables: {
         uuid: eventData.uuid,
@@ -242,30 +246,28 @@ describe("ParticipationWithoutAccount", () => {
 
   it("handles being already a participant", async () => {
     generateWrapper({
-      joinEventMutationHandler: jest
+      joinEventMutationHandler: vi
         .fn()
         .mockRejectedValue(
           new Error("You are already a participant of this event")
         ),
     });
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
+    await flushPromises();
 
     wrapper.find('input[type="email"]').setValue("some@email.tld");
     wrapper.find("textarea").setValue("a message long enough");
     wrapper.find("form").trigger("submit");
 
-    await wrapper.vm.$nextTick();
+    await flushPromises();
 
     expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
       ...joinEventMock,
     });
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick();
+    await flushPromises();
     expect(wrapper.find("form").exists()).toBeTruthy();
-    expect(
-      wrapper.find("article.message.is-danger .media-content").text()
-    ).toContain("You are already a participant of this event");
+    expect(wrapper.find(".o-notification--danger").text()).toContain(
+      "You are already a participant of this event"
+    );
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
diff --git a/js/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap b/js/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap
index 3f251f530..19854d85f 100644
--- a/js/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap
+++ b/js/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap
@@ -1,130 +1,83 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`ParticipationWithoutAccount handles being already a participant 1`] = `
-<section class="container section hero is-fullheight">
-  <div class="hero-body">
-    <div class="container">
-      <form>
-        <p>
-          This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.
-        </p>
-        <transition-stub name="fade">
-          <article class="message is-info">
-            <!---->
-            <section class="message-body">
-              <div class="media">
-                <!---->
-                <div class="media-content">
-                  Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.
-                </div>
-              </div>
-            </section>
-            <!---->
-          </article>
-        </transition-stub>
-        <transition-stub name="fade">
-          <article class="message is-danger">
-            <!---->
-            <section class="message-body">
-              <div class="media">
-                <!---->
-                <div class="media-content">You are already a participant of this event</div>
-              </div>
-            </section>
-            <!---->
-          </article>
-        </transition-stub>
-        <div class="field"><label class="label">Email address</label>
-          <div class="control is-clearfix"><input type="email" autocomplete="on" placeholder="Your email" required="required" class="input">
-            <!---->
-            <!---->
-            <!---->
+exports[`ParticipationWithoutAccount > handles being already a participant 1`] = `
+"<section class=\\"container mx-auto\\">
+  <div class=\\"\\">
+    <form>
+      <p>This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.</p>
+      <transition-stub>
+        <article class=\\"o-notification o-notification--info\\">
+          <!--v-if-->
+          <!--v-if-->
+          <div class=\\"o-notification__wrapper\\">
+            <!--v-if-->
+            <div class=\\"o-notification__content\\">Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.</div>
           </div>
-          <!---->
-        </div>
-        <p>
-          If you want, you may send a message to the event organizer here.
-        </p>
-        <div class="field"><label class="label">Message</label>
-          <div class="control is-clearfix"><textarea minlength="10" class="textarea"></textarea>
-            <!---->
-            <!---->
-            <!---->
+        </article>
+      </transition-stub>
+      <transition-stub>
+        <article class=\\"o-notification o-notification--danger\\">
+          <!--v-if-->
+          <!--v-if-->
+          <div class=\\"o-notification__wrapper\\">
+            <!--v-if-->
+            <div class=\\"o-notification__content\\">You are already a participant of this event</div>
           </div>
-          <!---->
+        </article>
+      </transition-stub>
+      <div class=\\"o-field o-field--filled\\"><label for=\\"anonymousParticipationEmail\\" class=\\"o-field__label\\">Email address</label>
+        <div class=\\"o-ctrl-input\\"><input id=\\"anonymousParticipationEmail\\" placeholder=\\"Your email\\" required=\\"\\" class=\\"o-input\\" type=\\"email\\" autocomplete=\\"off\\">
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
         </div>
-        <div class="field">
-          <!----><label class="b-checkbox checkbox"><input type="checkbox" autocomplete="on" true-value="true" value="false"><span class="check"></span><span class="control-label"><b>Remember my participation in this browser</b> <p>
-              Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device.
-            </p></span></label>
-          <!---->
-        </div> <button type="submit" class="button is-primary">
-          <!----><span>Send email</span>
-          <!---->
-        </button>
-        <div class="has-text-centered"><a class="button is-text">
-            <!----><span>Back to previous page</span>
-            <!---->
-          </a></div>
-      </form>
-    </div>
+        <!--v-if-->
+      </div>
+      <p>If you want, you may send a message to the event organizer here.</p>
+      <div class=\\"o-field o-field--filled\\"><label for=\\"anonymousParticipationMessage\\" class=\\"o-field__label\\">Message</label>
+        <div class=\\"o-ctrl-input\\"><textarea id=\\"anonymousParticipationMessage\\" minlength=\\"10\\" class=\\"o-input o-input__textarea\\"></textarea>
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+      <div class=\\"o-field\\">
+        <!--v-if--><label class=\\"o-chk o-chk--checked\\"><input type=\\"checkbox\\" class=\\"o-chk__check o-chk__check--checked\\" true-value=\\"true\\" false-value=\\"false\\" value=\\"false\\"><span class=\\"o-chk__label\\"><b>Remember my participation in this browser</b><p>Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device.</p></span></label>
+        <!--v-if-->
+      </div>
+      <div class=\\"flex gap-2 my-2\\"><button type=\\"submit\\" class=\\"o-btn o-btn--primary o-btn--disabled\\" disabled=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Send email</span>
+          <!--v-if--></span>
+        </button><button type=\\"button\\" class=\\"o-btn o-btn--text\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Back to previous page</span>
+          <!--v-if--></span>
+        </button></div>
+    </form>
   </div>
-</section>
+</section>"
 `;
 
-exports[`ParticipationWithoutAccount renders the participation without account view with minimal data 1`] = `
-<section class="container section hero is-fullheight">
-  <div class="hero-body">
-    <div class="container">
-      <div>
-        <h1 class="title">
-          Request for participation confirmation sent
-        </h1>
-        <p class="content"><span>Check your inbox (and your junk mail folder).</span> <span class="details">Your participation will be validated once you click the confirmation link into the email.</span></p>
-        <transition-stub name="fade">
-          <article class="message is-warning">
-            <!---->
-            <section class="message-body">
-              <div class="media">
-                <!---->
-                <div class="media-content">Unable to save your participation in this browser.</div>
-              </div>
-            </section>
-            <!---->
-          </article>
-        </transition-stub>
-        <p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p>
-      </div>
+exports[`ParticipationWithoutAccount > renders the participation without account view with minimal data 1`] = `
+"<section class=\\"container mx-auto\\">
+  <div class=\\"\\">
+    <div>
+      <h1 class=\\"title\\">Request for participation confirmation sent</h1>
+      <p class=\\"prose dark:prose-invert\\"><span>Check your inbox (and your junk mail folder).</span><span class=\\"details\\">Your participation will be validated once you click the confirmation link into the email.</span></p>
+      <!--v-if-->
+      <p class=\\"prose dark:prose-invert\\">You may now close this window, or <a href=\\"/events/f37910ea-fd5a-4756-9679-00971f3f4106\\" class=\\"\\">return to the event's page</a>.</p>
     </div>
   </div>
-</section>
+</section>"
 `;
 
-exports[`ParticipationWithoutAccount renders the warning if the event participation is restricted 1`] = `
-<section class="container section hero is-fullheight">
-  <div class="hero-body">
-    <div class="container">
-      <div>
-        <h1 class="title">
-          Request for participation confirmation sent
-        </h1>
-        <p class="content"><span>Check your inbox (and your junk mail folder).</span> <span class="details">
-            Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation. </span></p>
-        <transition-stub name="fade">
-          <article class="message is-warning">
-            <!---->
-            <section class="message-body">
-              <div class="media">
-                <!---->
-                <div class="media-content">Unable to save your participation in this browser.</div>
-              </div>
-            </section>
-            <!---->
-          </article>
-        </transition-stub>
-        <p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p>
-      </div>
+exports[`ParticipationWithoutAccount > renders the warning if the event participation is restricted 1`] = `
+"<section class=\\"container mx-auto\\">
+  <div class=\\"\\">
+    <div>
+      <h1 class=\\"title\\">Request for participation confirmation sent</h1>
+      <p class=\\"prose dark:prose-invert\\"><span>Check your inbox (and your junk mail folder).</span><span class=\\"details\\">Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation.</span></p>
+      <!--v-if-->
+      <p class=\\"prose dark:prose-invert\\">You may now close this window, or <a href=\\"/events/f37910ea-fd5a-4756-9679-00971f3f4106\\" class=\\"\\">return to the event's page</a>.</p>
     </div>
   </div>
-</section>
+</section>"
 `;
diff --git a/js/tests/unit/specs/components/Post/PostListItem.spec.ts b/js/tests/unit/specs/components/Post/PostListItem.spec.ts
index 6e8e5c3ab..bd35d6fa0 100644
--- a/js/tests/unit/specs/components/Post/PostListItem.spec.ts
+++ b/js/tests/unit/specs/components/Post/PostListItem.spec.ts
@@ -1,20 +1,20 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import PostListItem from "@/components/Post/PostListItem.vue";
-import Buefy from "buefy";
-import VueRouter from "vue-router";
-import { routes } from "@/router";
+import { vi, beforeEach, describe, it, expect } from "vitest";
 import { enUS } from "date-fns/locale";
-import { formatDateTimeString } from "@/filters/datetime";
-import { i18n } from "@/utils/i18n";
+import { routes } from "@/router";
+import { createRouter, createWebHistory, Router } from "vue-router";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-localVue.use(VueRouter);
-localVue.use((vue) => {
-  vue.prototype.$dateFnsLocale = enUS;
+let router: Router;
+
+beforeEach(async () => {
+  router = createRouter({
+    history: createWebHistory(),
+    routes: routes,
+  });
+
+  // await router.isReady();
 });
-const router = new VueRouter({ routes, mode: "history" });
-config.mocks.$t = (key: string): string => key;
 
 const postData = {
   id: "1",
@@ -31,15 +31,15 @@ const generateWrapper = (
   customProps: Record<string, unknown> = {}
 ) => {
   return mount(PostListItem, {
-    localVue,
-    router,
-    i18n,
-    propsData: {
+    props: {
       post: { ...postData, ...customPostData },
       ...customProps,
     },
-    filters: {
-      formatDateTimeString,
+    global: {
+      provide: {
+        dateFnsLocale: enUS,
+      },
+      plugins: [router],
     },
   });
 };
@@ -50,15 +50,15 @@ describe("PostListItem", () => {
 
     expect(wrapper.html()).toMatchSnapshot();
 
-    expect(
-      wrapper.find("a.post-minimalist-card-wrapper").attributes("href")
-    ).toBe(`/p/${postData.slug}`);
+    expect(wrapper.find("a.block.bg-white").attributes("href")).toBe(
+      `/p/${postData.slug}`
+    );
 
-    expect(wrapper.find(".post-minimalist-title").text()).toBe(postData.title);
+    expect(wrapper.find("h3").text()).toBe(postData.title);
 
-    expect(wrapper.find(".post-publication-date").text()).toBe("Dec 2, 2020");
+    expect(wrapper.find("p.flex.gap-2").text()).toBe("Dec 2, 2020");
 
-    expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
+    expect(wrapper.find("p.flex.gap-1").exists()).toBeFalsy();
   });
 
   it("renders post list item with tags", () => {
@@ -68,9 +68,11 @@ describe("PostListItem", () => {
 
     expect(wrapper.html()).toMatchSnapshot();
 
-    expect(wrapper.find(".tags").text()).toContain("A tag");
+    expect(wrapper.find("div.flex.flex-wrap.gap-y-0.gap-x-2").text()).toContain(
+      "A tag"
+    );
 
-    expect(wrapper.find(".post-publisher").exists()).toBeFalsy();
+    expect(wrapper.find("p.flex.gap-1").exists()).toBeFalsy();
   });
 
   it("renders post list item with publisher name", () => {
@@ -81,7 +83,7 @@ describe("PostListItem", () => {
 
     expect(wrapper.html()).toMatchSnapshot();
 
-    expect(wrapper.find(".post-publisher").exists()).toBeTruthy();
-    expect(wrapper.find(".post-publisher").text()).toContain("An author");
+    expect(wrapper.find("p.flex.gap-1").exists()).toBeTruthy();
+    expect(wrapper.find("p.flex.gap-1").text()).toContain("An author");
   });
 });
diff --git a/js/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap b/js/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
index 25ed6e63b..39160cfa3 100644
--- a/js/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
+++ b/js/tests/unit/specs/components/Post/__snapshots__/PostListItem.spec.ts.snap
@@ -1,45 +1,37 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`PostListItem renders post list item with basic informations 1`] = `
-<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
-  <!---->
-  <div class="title-info-wrapper has-text-grey-dark px-1">
-    <h3 lang="en" class="post-minimalist-title">
-      My Blog Post
-    </h3>
-    <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
-    <!---->
-    <!---->
+exports[`PostListItem > renders post list item with basic informations 1`] = `
+"<a href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\" data-v-6ca7cc69=\\"\\">
+  <!--v-if-->
+  <div class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\" data-v-6ca7cc69=\\"\\">
+    <h3 class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\" data-v-6ca7cc69=\\"\\">My Blog Post</h3>
+    <p class=\\"flex gap-2\\" data-v-6ca7cc69=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\" data-v-6ca7cc69=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span dir=\\"auto\\" class=\\"\\" data-v-6ca7cc69=\\"\\">Dec 2, 2020</span></p>
+    <!--v-if-->
+    <!--v-if-->
   </div>
-</a>
+</a>"
 `;
 
-exports[`PostListItem renders post list item with publisher name 1`] = `
-<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
-  <!---->
-  <div class="title-info-wrapper has-text-grey-dark px-1">
-    <h3 lang="en" class="post-minimalist-title">
-      My Blog Post
-    </h3>
-    <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
-    <!---->
-    <p class="post-publisher has-text-grey-dark"><span class="icon"><i class="mdi mdi-account-edit mdi-24px"></i></span> <span>Published by <b class="has-text-weight-medium">An author</b></span></p>
+exports[`PostListItem > renders post list item with publisher name 1`] = `
+"<a href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\" data-v-6ca7cc69=\\"\\">
+  <!--v-if-->
+  <div class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\" data-v-6ca7cc69=\\"\\">
+    <h3 class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\" data-v-6ca7cc69=\\"\\">My Blog Post</h3>
+    <p class=\\"flex gap-2\\" data-v-6ca7cc69=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\" data-v-6ca7cc69=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span dir=\\"auto\\" class=\\"\\" data-v-6ca7cc69=\\"\\">Dec 2, 2020</span></p>
+    <!--v-if-->
+    <p class=\\"flex gap-1\\" data-v-6ca7cc69=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon account-edit-icon\\" role=\\"img\\" data-v-6ca7cc69=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z\\"><!--v-if--></path></svg></span>Published by <b class=\\"\\" data-v-6ca7cc69=\\"\\">An author</b></p>
   </div>
-</a>
+</a>"
 `;
 
-exports[`PostListItem renders post list item with tags 1`] = `
-<a href="/p/my-blog-post-some-uuid" class="post-minimalist-card-wrapper" dir="auto">
-  <!---->
-  <div class="title-info-wrapper has-text-grey-dark px-1">
-    <h3 lang="en" class="post-minimalist-title">
-      My Blog Post
-    </h3>
-    <p class="post-publication-date"><span class="icon"><i class="mdi mdi-clock mdi-24px"></i></span> <span dir="auto" class="has-text-grey-dark">Dec 2, 2020</span></p>
-    <div class="tags" style="display: inline;"><span class="icon"><i class="mdi mdi-tag mdi-24px"></i></span> <span class="tag"><!----><span class="">A tag</span>
-      <!----></span>
-    </div>
-    <!---->
+exports[`PostListItem > renders post list item with tags 1`] = `
+"<a href=\\"/p/my-blog-post-some-uuid\\" class=\\"block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md\\" dir=\\"auto\\" data-v-6ca7cc69=\\"\\">
+  <!--v-if-->
+  <div class=\\"flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1\\" data-v-6ca7cc69=\\"\\">
+    <h3 class=\\"text-xl color-violet-3 line-clamp-3 mb-2 font-bold\\" lang=\\"en\\" data-v-6ca7cc69=\\"\\">My Blog Post</h3>
+    <p class=\\"flex gap-2\\" data-v-6ca7cc69=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon clock-icon\\" role=\\"img\\" data-v-6ca7cc69=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z\\"><!--v-if--></path></svg></span><span dir=\\"auto\\" class=\\"\\" data-v-6ca7cc69=\\"\\">Dec 2, 2020</span></p>
+    <div class=\\"flex flex-wrap gap-y-0 gap-x-2\\" data-v-6ca7cc69=\\"\\"><span aria-hidden=\\"true\\" class=\\"material-design-icon tag-icon\\" role=\\"img\\" data-v-6ca7cc69=\\"\\"><svg fill=\\"currentColor\\" class=\\"material-design-icon__svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z\\"><!--v-if--></path></svg></span><span class=\\"rounded-md my-1 truncate text-sm text-violet-title px-2 py-1 bg-purple-3 dark:text-violet-3\\" data-v-6955ca87=\\"\\" data-v-6ca7cc69=\\"\\">A tag</span></div>
+    <!--v-if-->
   </div>
-</a>
+</a>"
 `;
diff --git a/js/tests/unit/specs/components/Report/ReportCard.spec.ts b/js/tests/unit/specs/components/Report/ReportCard.spec.ts
index 4fde36067..cffd1e0d6 100644
--- a/js/tests/unit/specs/components/Report/ReportCard.spec.ts
+++ b/js/tests/unit/specs/components/Report/ReportCard.spec.ts
@@ -1,18 +1,16 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import ReportCard from "@/components/Report/ReportCard.vue";
-import Buefy from "buefy";
 import { ActorType } from "@/types/enums";
-
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+import { describe, expect, it } from "vitest";
+import { createI18n } from "vue-i18n";
+import en from "@/i18n/en_US.json";
 
 const reportData = {
   id: "1",
   content: "My content",
   insertedAt: "2020-12-02T09:01:20.873Z",
   reporter: {
-    preferredUsername: "author",
+    preferredUsername: "John Snow",
     domain: null,
     name: "Reporter of Things",
     type: ActorType.PERSON,
@@ -26,7 +24,6 @@ const reportData = {
 
 const generateWrapper = (customReportData: Record<string, unknown> = {}) => {
   return mount(ReportCard, {
-    localVue,
     propsData: {
       report: { ...reportData, ...customReportData },
     },
@@ -37,16 +34,16 @@ describe("ReportCard", () => {
   it("renders report card with basic informations", () => {
     const wrapper = generateWrapper();
 
-    expect(wrapper.find(".media-content .title").text()).toBe(
+    expect(wrapper.find(".flex.gap-1 div p:first-child").text()).toBe(
       reportData.reported.name
     );
 
-    expect(wrapper.find(".media-content .subtitle").text()).toBe(
+    expect(wrapper.find(".flex.gap-1 div p:nth-child(2)").text()).toBe(
       `@${reportData.reported.preferredUsername}`
     );
 
-    expect(wrapper.find(".is-one-quarter-desktop span").text()).toBe(
-      `Reported by {reporter}`
+    expect(wrapper.find(".reported_by div:first-child").text()).toBe(
+      `Reported by John Snow`
     );
   });
 
@@ -55,8 +52,8 @@ describe("ReportCard", () => {
       reporter: { domain: "somewhere.else", type: ActorType.APPLICATION },
     });
 
-    expect(wrapper.find(".is-one-quarter-desktop span").text()).toBe(
-      "Reported by someone on {domain}"
+    expect(wrapper.find(".reported_by div:first-child").text()).toBe(
+      "Reported by someone on somewhere.else"
     );
   });
 });
diff --git a/js/tests/unit/specs/components/Report/ReportModal.spec.ts b/js/tests/unit/specs/components/Report/ReportModal.spec.ts
index 75f6846ca..cd3926446 100644
--- a/js/tests/unit/specs/components/Report/ReportModal.spec.ts
+++ b/js/tests/unit/specs/components/Report/ReportModal.spec.ts
@@ -1,19 +1,18 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import ReportModal from "@/components/Report/ReportModal.vue";
-import Buefy from "buefy";
+import { vi, beforeEach, describe, it, expect } from "vitest";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+import Oruga from "@oruga-ui/oruga-next";
+
+config.global.plugins.push(Oruga);
 
 const propsData = {
-  onConfirm: jest.fn(),
+  onConfirm: vi.fn(),
 };
 
 const generateWrapper = (customPropsData: Record<string, unknown> = {}) => {
   return mount(ReportModal, {
-    localVue,
-    propsData: {
+    props: {
       ...propsData,
       ...customPropsData,
     },
@@ -21,24 +20,22 @@ const generateWrapper = (customPropsData: Record<string, unknown> = {}) => {
 };
 
 beforeEach(() => {
-  jest.resetAllMocks();
+  vi.resetAllMocks();
 });
 
 describe("ReportModal", () => {
   it("renders report modal with basic informations and submits it", async () => {
     const wrapper = generateWrapper();
 
-    expect(wrapper.find(".modal-card-head").exists()).toBe(false);
+    expect(wrapper.find("header").exists()).toBe(false);
 
-    expect(wrapper.find(".media-content").text()).not.toContain(
+    expect(wrapper.find("section").text()).not.toContain(
       "The content came from another server. Transfer an anonymous copy of the report?"
     );
 
-    expect(
-      wrapper.find("footer.modal-card-foot button:first-child").text()
-    ).toBe("Cancel");
+    expect(wrapper.find("footer button:first-child").text()).toBe("Cancel");
 
-    const submit = wrapper.find("footer.modal-card-foot button.is-primary");
+    const submit = wrapper.find("footer button.o-btn--primary");
 
     expect(submit.text()).toBe("Send the report");
 
@@ -47,7 +44,7 @@ describe("ReportModal", () => {
 
     submit.trigger("click");
 
-    await localVue.nextTick();
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted().close).toBeTruthy();
 
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
@@ -55,6 +52,7 @@ describe("ReportModal", () => {
       "some comment with my report",
       false
     );
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders report modal and shows an inline comment if it's provided", async () => {
@@ -65,7 +63,7 @@ describe("ReportModal", () => {
       },
     });
 
-    const commentContainer = wrapper.find("article.media");
+    const commentContainer = wrapper.find("article");
     expect(commentContainer.find("strong").text()).toContain(
       "I am the comment author"
     );
@@ -78,13 +76,13 @@ describe("ReportModal", () => {
   it("renders report modal with with a remote content", async () => {
     const wrapper = generateWrapper({ outsideDomain: "somewhere.else" });
 
-    expect(wrapper.find(".media-content").text()).toContain(
+    expect(wrapper.find(".control p").text()).toContain(
       "The content came from another server. Transfer an anonymous copy of the report?"
     );
 
-    const submit = wrapper.find("footer.modal-card-foot button.is-primary");
+    const submit = wrapper.find("footer button.o-btn--primary");
     submit.trigger("click");
-    await localVue.nextTick();
+    await wrapper.vm.$nextTick();
 
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", false);
@@ -93,16 +91,16 @@ describe("ReportModal", () => {
   it("renders report modal with with a remote content and accept to forward", async () => {
     const wrapper = generateWrapper({ outsideDomain: "somewhere.else" });
 
-    expect(wrapper.find(".media-content").text()).toContain(
+    expect(wrapper.find(".control p").text()).toContain(
       "The content came from another server. Transfer an anonymous copy of the report?"
     );
 
     const switchButton = wrapper.find('input[type="checkbox"]');
-    switchButton.setChecked();
+    switchButton.setValue(true);
 
-    const submit = wrapper.find("footer.modal-card-foot button.is-primary");
+    const submit = wrapper.find("footer button.o-btn--primary");
     submit.trigger("click");
-    await localVue.nextTick();
+    await wrapper.vm.$nextTick();
 
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledTimes(1);
     expect(wrapper.vm.$props.onConfirm).toHaveBeenCalledWith("", true);
@@ -115,16 +113,10 @@ describe("ReportModal", () => {
       confirmText: "report!",
     });
 
-    expect(wrapper.find(".modal-card-head .modal-card-title").text()).toBe(
-      "want to report something?"
-    );
+    expect(wrapper.find("header h2").text()).toBe("want to report something?");
 
-    expect(
-      wrapper.find("footer.modal-card-foot button:first-child").text()
-    ).toBe("nah");
+    expect(wrapper.find("footer button:first-child").text()).toBe("nah");
 
-    expect(
-      wrapper.find("footer.modal-card-foot button.is-primary").text()
-    ).toBe("report!");
+    expect(wrapper.find("footer button.o-btn--primary").text()).toBe("report!");
   });
 });
diff --git a/js/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap b/js/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap
new file mode 100644
index 000000000..d85250eba
--- /dev/null
+++ b/js/tests/unit/specs/components/Report/__snapshots__/ReportModal.spec.ts.snap
@@ -0,0 +1,29 @@
+// Vitest Snapshot v1
+
+exports[`ReportModal > renders report modal with basic informations and submits it 1`] = `
+"<div class=\\"p-2\\" data-v-e0cceef3=\\"\\">
+  <!--v-if-->
+  <section data-v-e0cceef3=\\"\\">
+    <div class=\\"flex gap-1 flex-row mb-3\\" data-v-e0cceef3=\\"\\"><span class=\\"o-icon o-icon--warning hidden md:block flex-1\\" data-v-e0cceef3=\\"\\"><i class=\\"mdi mdi-alert 48\\"></i></span>
+      <p data-v-e0cceef3=\\"\\">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
+    </div>
+    <div class=\\"\\" data-v-e0cceef3=\\"\\">
+      <!--v-if-->
+      <div class=\\"o-field o-field--filled\\" data-v-e0cceef3=\\"\\"><label for=\\"additional-comments\\" class=\\"o-field__label\\">Additional comments</label>
+        <div class=\\"o-ctrl-input\\" data-v-e0cceef3=\\"\\"><textarea id=\\"additional-comments\\" class=\\"o-input o-input__textarea\\"></textarea>
+          <!--v-if-->
+          <!--v-if-->
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+  </section>
+  <footer class=\\"flex gap-2 py-3\\" data-v-e0cceef3=\\"\\"><button type=\\"button\\" class=\\"o-btn o-btn--outlined\\" data-v-e0cceef3=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Cancel</span>
+      <!--v-if--></span>
+    </button><button type=\\"button\\" class=\\"o-btn o-btn--primary\\" data-v-e0cceef3=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Send the report</span>
+      <!--v-if--></span>
+    </button></footer>
+</div>"
+`;
diff --git a/js/tests/unit/specs/components/User/PasswordReset.spec.ts b/js/tests/unit/specs/components/User/PasswordReset.spec.ts
index 752b62190..697b5e96a 100644
--- a/js/tests/unit/specs/components/User/PasswordReset.spec.ts
+++ b/js/tests/unit/specs/components/User/PasswordReset.spec.ts
@@ -1,17 +1,23 @@
-import { config, createLocalVue, mount } from "@vue/test-utils";
+const useRouterMock = vi.fn(() => ({
+  push: () => {},
+}));
+
+import { config, mount } from "@vue/test-utils";
 import PasswordReset from "@/views/User/PasswordReset.vue";
-import Buefy from "buefy";
 import { createMockClient, RequestHandler } from "mock-apollo-client";
 import { RESET_PASSWORD } from "@/graphql/auth";
-import VueApollo from "@vue/apollo-option";
 import { resetPasswordResponseMock } from "../../mocks/auth";
 import RouteName from "@/router/name";
 import flushPromises from "flush-promises";
+import { describe, expect, it, vi } from "vitest";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import Oruga from "@oruga-ui/oruga-next";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
-const $router = { push: jest.fn() };
+config.global.plugins.push(Oruga);
+
+vi.mock("vue-router/dist/vue-router.mjs", () => ({
+  useRouter: useRouterMock,
+}));
 
 let requestHandlers: Record<string, RequestHandler>;
 
@@ -22,7 +28,7 @@ const generateWrapper = (
   const mockClient = createMockClient();
 
   requestHandlers = {
-    resetPasswordMutationHandler: jest
+    resetPasswordMutationHandler: vi
       .fn()
       .mockResolvedValue(resetPasswordResponseMock),
     ...customRequestHandlers,
@@ -33,21 +39,19 @@ const generateWrapper = (
     requestHandlers.resetPasswordMutationHandler
   );
 
-  const apolloProvider = new VueApollo({
-    defaultClient: mockClient,
-  });
-
   return mount(PasswordReset, {
-    localVue,
-    mocks: {
-      $route: { query: {} },
-      $router,
-      ...customMocks,
-    },
-    apolloProvider,
-    propsData: {
+    props: {
       token: "some-token",
     },
+    global: {
+      stubs: ["router-link", "router-view"],
+      mocks: {
+        ...customMocks,
+      },
+      provide: {
+        [DefaultApolloClient]: mockClient,
+      },
+    },
   });
 };
 
@@ -60,12 +64,14 @@ describe("Reset page", () => {
 
   it("shows error if token is invalid", async () => {
     const wrapper = generateWrapper({
-      resetPasswordMutationHandler: jest.fn().mockResolvedValue({
+      resetPasswordMutationHandler: vi.fn().mockResolvedValue({
         errors: [{ message: "The token you provided is invalid." }],
       }),
     });
 
-    wrapper.findAll('input[type="password"').setValue("my password");
+    wrapper
+      .findAll('input[type="password"')
+      .forEach((inputField) => inputField.setValue("my password"));
     wrapper.find("form").trigger("submit");
 
     await wrapper.vm.$nextTick();
@@ -78,27 +84,30 @@ describe("Reset page", () => {
 
     await flushPromises();
 
-    expect(wrapper.find("article.message.is-danger").text()).toContain(
+    expect(wrapper.find(".o-notification--danger").text()).toContain(
       "The token you provided is invalid"
     );
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("redirects to homepage if token is valid", async () => {
+    const push = vi.fn(); // needs to write this code before render()
+    useRouterMock.mockImplementationOnce(() => ({
+      push,
+    }));
     const wrapper = generateWrapper();
 
-    wrapper.findAll('input[type="password"').setValue("my password");
-    wrapper.find("form").trigger("submit");
-
-    await wrapper.vm.$nextTick();
+    wrapper
+      .findAll('input[type="password"')
+      .forEach((inputField) => inputField.setValue("my password"));
+    await wrapper.find("form").trigger("submit");
 
     expect(requestHandlers.resetPasswordMutationHandler).toBeCalledTimes(1);
     expect(requestHandlers.resetPasswordMutationHandler).toBeCalledWith({
       password: "my password",
       token: "some-token",
     });
-    expect(jest.isMockFunction(wrapper.vm.$router.push)).toBe(true);
     await flushPromises();
-    expect($router.push).toHaveBeenCalledWith({ name: RouteName.HOME });
+    expect(push).toHaveBeenCalledWith({ name: RouteName.HOME });
   });
 });
diff --git a/js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap b/js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap
index 8b7805ec7..f5385ff1e 100644
--- a/js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap
+++ b/js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap
@@ -1,75 +1,55 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`Reset page renders correctly 1`] = `
-<section class="section container">
-  <div class="columns is-mobile is-centered">
-    <div class="column is-half-desktop">
-      <h1 class="title">
-        Password reset
-      </h1>
-      <form>
-        <div class="field"><label class="label">Password</label>
-          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
-            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
-            <!---->
-          </div>
-          <!---->
-        </div>
-        <div class="field"><label class="label">Password (confirmation)</label>
-          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
-            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
-            <!---->
-          </div>
-          <!---->
-        </div> <button class="button is-primary">
-          Reset my password
-        </button>
-      </form>
+exports[`Reset page > renders correctly 1`] = `
+"<section class=\\"container mx-auto\\">
+  <h1 class=\\"\\">Password reset</h1>
+  <form>
+    <div class=\\"o-field\\"><label class=\\"o-field__label\\">Password</label>
+      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
+        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
     </div>
-  </div>
-</section>
+    <div class=\\"o-field\\"><label class=\\"o-field__label\\">Password (confirmation)</label>
+      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
+        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div><button class=\\"button is-primary\\">Reset my password</button>
+  </form>
+</section>"
 `;
 
-exports[`Reset page shows error if token is invalid 1`] = `
-<section class="section container">
-  <div class="columns is-mobile is-centered">
-    <div class="column is-half-desktop">
-      <h1 class="title">
-        Password reset
-      </h1>
-      <transition-stub name="fade">
-        <article class="message is-danger">
-          <header class="message-header">
-            <p>Error</p><button type="button" class="delete"></button>
-          </header>
-          <section class="message-body">
-            <div class="media">
-              <!---->
-              <div class="media-content">The token you provided is invalid.</div>
-            </div>
-          </section>
-          <!---->
-        </article>
-      </transition-stub>
-      <form>
-        <div class="field"><label class="label">Password</label>
-          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
-            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
-            <!---->
-          </div>
-          <!---->
-        </div>
-        <div class="field"><label class="label">Password (confirmation)</label>
-          <div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
-            <!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
-            <!---->
-          </div>
-          <!---->
-        </div> <button class="button is-primary">
-          Reset my password
-        </button>
-      </form>
+exports[`Reset page > shows error if token is invalid 1`] = `
+"<section class=\\"container mx-auto\\">
+  <h1 class=\\"\\">Password reset</h1>
+  <transition-stub title=\\"Error\\">
+    <article class=\\"o-notification o-notification--danger\\">
+      <!--v-if-->
+      <!--v-if-->
+      <div class=\\"o-notification__wrapper\\">
+        <!--v-if-->
+        <div class=\\"o-notification__content\\">The token you provided is invalid.</div>
+      </div>
+    </article>
+  </transition-stub>
+  <form>
+    <div class=\\"o-field o-field--filled\\"><label class=\\"o-field__label\\">Password</label>
+      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
+        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
     </div>
-  </div>
-</section>
+    <div class=\\"o-field o-field--filled\\"><label class=\\"o-field__label\\">Password (confirmation)</label>
+      <div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
+        <!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div><button class=\\"button is-primary\\">Reset my password</button>
+  </form>
+</section>"
 `;
diff --git a/js/tests/unit/specs/components/User/login.spec.ts b/js/tests/unit/specs/components/User/login.spec.ts
index 969d70916..ed438bb69 100644
--- a/js/tests/unit/specs/components/User/login.spec.ts
+++ b/js/tests/unit/specs/components/User/login.spec.ts
@@ -1,86 +1,83 @@
-import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
-import Login from "@/views/User/Login.vue";
-import Buefy from "buefy";
+const useRouterMock = vi.fn(() => ({
+  push: () => {},
+  replace: () => {},
+}));
+const useRouteMock = vi.fn(() => {});
+
+import { config, mount, VueWrapper } from "@vue/test-utils";
+import Login from "@/views/User/LoginView.vue";
 import {
   createMockClient,
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "@vue/apollo-option";
 import buildCurrentUserResolver from "@/apollo/user";
-import { configMock } from "../../mocks/config";
-import { i18n } from "@/utils/i18n";
-import { CONFIG } from "@/graphql/config";
+import { loginMock as loginConfigMock } from "../../mocks/config";
+import { LOGIN_CONFIG } from "@/graphql/config";
 import { loginMock, loginResponseMock } from "../../mocks/auth";
 import { LOGIN } from "@/graphql/auth";
 import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUser } from "@/types/current-user.model";
 import flushPromises from "flush-promises";
 import RouteName from "@/router/name";
-import { InMemoryCache } from "@apollo/client/cache";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import Oruga from "@oruga-ui/oruga-next";
+import { cache } from "@/apollo/memory";
 
-const localVue = createLocalVue();
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
-const $router = { push: jest.fn(), replace: jest.fn() };
+vi.mock("vue-router/dist/vue-router.mjs", () => ({
+  useRouter: useRouterMock,
+  useRoute: useRouteMock,
+}));
+
+config.global.plugins.push(Oruga);
 
 describe("Render login form", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper;
   let mockClient: MockApolloClient | null;
-  let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
 
   const generateWrapper = (
     handlers: Record<string, unknown> = {},
     customProps: Record<string, unknown> = {},
-    baseData: Record<string, unknown> = {},
     customMocks: Record<string, unknown> = {}
   ) => {
-    const cache = new InMemoryCache({ addTypename: false });
-
     mockClient = createMockClient({
       cache,
       resolvers: buildCurrentUserResolver(cache),
     });
 
     requestHandlers = {
-      configQueryHandler: jest.fn().mockResolvedValue(configMock),
-      loginMutationHandler: jest.fn().mockResolvedValue(loginResponseMock),
+      configQueryHandler: vi.fn().mockResolvedValue(loginConfigMock),
+      loginMutationHandler: vi.fn().mockResolvedValue(loginResponseMock),
       ...handlers,
     };
-    mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
+    mockClient.setRequestHandler(
+      LOGIN_CONFIG,
+      requestHandlers.configQueryHandler
+    );
     mockClient.setRequestHandler(LOGIN, requestHandlers.loginMutationHandler);
 
-    apolloProvider = new VueApollo({
-      defaultClient: mockClient,
-    });
-
     wrapper = mount(Login, {
-      localVue,
-      i18n,
-      apolloProvider,
-      propsData: {
+      props: {
         ...customProps,
       },
       mocks: {
-        $route: { query: {} },
-        $router,
         ...customMocks,
       },
       stubs: ["router-link", "router-view"],
-      data() {
-        return {
-          ...baseData,
-        };
+      global: {
+        provide: {
+          [DefaultApolloClient]: mockClient,
+        },
       },
     });
   };
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper?.unmount();
+    cache.reset();
     mockClient = null;
-    apolloProvider = null;
-    $router.push.mockReset();
   });
 
   it("requires email and password to be filled", async () => {
@@ -90,10 +87,9 @@ describe("Render login form", () => {
 
     expect(wrapper.exists()).toBe(true);
     expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
-    expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
     wrapper.find('form input[type="email"]').setValue("");
     wrapper.find('form input[type="password"]').setValue("");
-    wrapper.find("form button.button").trigger("click");
+    wrapper.find('form button[type="submit"]').trigger("click");
     const form = wrapper.find("form");
     expect(form.exists()).toBe(true);
     const formElement = form.element as HTMLFormElement;
@@ -101,13 +97,18 @@ describe("Render login form", () => {
   });
 
   it("renders and submits the login form", async () => {
+    const replace = vi.fn(); // needs to write this code before render()
+    const push = vi.fn();
+    useRouterMock.mockImplementationOnce(() => ({
+      replace,
+      push,
+    }));
     generateWrapper();
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick();
 
     expect(wrapper.exists()).toBe(true);
     expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
-    expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
     wrapper.find('form input[type="email"]').setValue("some@email.tld");
     wrapper.find('form input[type="password"]').setValue("somepassword");
     wrapper.find("form").trigger("submit");
@@ -125,14 +126,19 @@ describe("Render login form", () => {
     await flushPromises();
     expect(currentUser?.email).toBe("some@email.tld");
     expect(currentUser?.id).toBe("1");
-    expect(jest.isMockFunction(wrapper.vm.$router.replace)).toBe(true);
     await flushPromises();
-    expect($router.replace).toHaveBeenCalledWith({ name: RouteName.HOME });
+    expect(replace).toHaveBeenCalledWith({ name: RouteName.HOME });
   });
 
   it("handles a login error", async () => {
+    const replace = vi.fn(); // needs to write this code before render()
+    const push = vi.fn();
+    useRouterMock.mockImplementationOnce(() => ({
+      push,
+      replace,
+    }));
     generateWrapper({
-      loginMutationHandler: jest.fn().mockResolvedValue({
+      loginMutationHandler: vi.fn().mockResolvedValue({
         errors: [
           {
             message:
@@ -147,7 +153,6 @@ describe("Render login form", () => {
 
     expect(wrapper.exists()).toBe(true);
     expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
-    expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
     wrapper.find('form input[type="email"]').setValue("some@email.tld");
     wrapper.find('form input[type="password"]').setValue("somepassword");
     wrapper.find("form").trigger("submit");
@@ -156,21 +161,23 @@ describe("Render login form", () => {
       ...loginMock,
     });
     await flushPromises();
-    expect(wrapper.find("article.message.is-danger").text()).toContain(
+    expect(wrapper.find(".o-notification--danger").text()).toContain(
       "Impossible to authenticate, either your email or password are invalid."
     );
-    expect($router.push).not.toHaveBeenCalled();
+    expect(push).not.toHaveBeenCalled();
   });
 
   it("handles redirection after login", async () => {
-    generateWrapper(
-      {},
-      {},
-      {},
-      {
-        $route: { query: { redirect: "/about/instance" } },
-      }
-    );
+    const replace = vi.fn(); // needs to write this code before render()
+    const push = vi.fn();
+    useRouterMock.mockImplementationOnce(() => ({
+      replace,
+      push,
+    }));
+    useRouteMock.mockImplementationOnce(() => ({
+      query: { redirect: "/about/instance" },
+    }));
+    generateWrapper();
 
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick();
@@ -179,6 +186,6 @@ describe("Render login form", () => {
     wrapper.find('form input[type="password"]').setValue("somepassword");
     wrapper.find("form").trigger("submit");
     await flushPromises();
-    expect($router.push).toHaveBeenCalledWith("/about/instance");
+    expect(push).toHaveBeenCalledWith("/about/instance");
   });
 });
diff --git a/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap b/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
index e863ec22e..13e592ebb 100644
--- a/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
+++ b/js/tests/unit/specs/components/__snapshots__/navbar.spec.ts.snap
@@ -1,3 +1,196 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
-exports[`App component renders a Vue component 1`] = `<b-navbar-stub type="is-secondary" wrapperclass="container" closeonclick="true" mobileburger="true" id="navbar"><template></template> <template></template> <template></template></b-navbar-stub>`;
+exports[`App component > renders a Vue component 1`] = `
+"<nav class=\\"bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900\\" id=\\"navbar\\">
+  <div class=\\"container mx-auto flex flex-wrap items-center mx-auto gap-4\\">
+    <router-link to=\\"[object Object]\\" class=\\"flex items-center\\">
+      <mobilizon-logo-stub invert=\\"false\\" class=\\"w-40\\"></mobilizon-logo-stub>
+    </router-link>
+    <!--v-if--><button type=\\"button\\" class=\\"inline-flex items-center p-2 ml-1 text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-gray-600\\" aria-controls=\\"mobile-menu-2\\" aria-expanded=\\"false\\"><span class=\\"sr-only\\">Open main menu</span><svg class=\\"w-6 h-6\\" aria-hidden=\\"true\\" fill=\\"currentColor\\" viewBox=\\"0 0 20 20\\" xmlns=\\"http://www.w3.org/2000/svg\\">
+        <path fill-rule=\\"evenodd\\" d=\\"M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\\" clip-rule=\\"evenodd\\"></path>
+      </svg></button>
+    <div class=\\"justify-between items-center w-full md:flex md:w-auto md:order-1 hidden\\" id=\\"mobile-menu-2\\">
+      <ul class=\\"flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold\\">
+        <!--v-if-->
+        <!--v-if-->
+        <li>
+          <router-link to=\\"[object Object]\\" class=\\"block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700\\">Login</router-link>
+        </li>
+        <li>
+          <router-link to=\\"[object Object]\\" class=\\"block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700\\">Register</router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+<!-- <o-navbar
+    id=\\"navbar\\"
+    type=\\"is-secondary\\"
+    wrapper-class=\\"container mx-auto\\"
+    v-model:active=\\"mobileNavbarActive\\"
+  >
+    <template #brand>
+      <o-navbar-item
+        tag=\\"router-link\\"
+        :to=\\"{ name: RouteName.HOME }\\"
+        :aria-label=\\"$t('Home')\\"
+      >
+        <logo />
+      </o-navbar-item>
+    </template>
+    <template #start>
+      <o-navbar-item tag=\\"router-link\\" :to=\\"{ name: RouteName.SEARCH }\\">{{
+        $t(\\"Explore\\")
+      }}</o-navbar-item>
+      <o-navbar-item
+        v-if=\\"currentActor.id && currentUser?.isLoggedIn\\"
+        tag=\\"router-link\\"
+        :to=\\"{ name: RouteName.MY_EVENTS }\\"
+        >{{ $t(\\"My events\\") }}</o-navbar-item
+      >
+      <o-navbar-item
+        tag=\\"router-link\\"
+        :to=\\"{ name: RouteName.MY_GROUPS }\\"
+        v-if=\\"
+          config &&
+          config.features.groups &&
+          currentActor.id &&
+          currentUser?.isLoggedIn
+        \\"
+        >{{ $t(\\"My groups\\") }}</o-navbar-item
+      >
+      <o-navbar-item
+        tag=\\"span\\"
+        v-if=\\"
+          config &&
+          config.features.eventCreation &&
+          currentActor.id &&
+          currentUser?.isLoggedIn
+        \\"
+      >
+        <o-button
+          v-if=\\"!hideCreateEventsButton\\"
+          tag=\\"router-link\\"
+          :to=\\"{ name: RouteName.CREATE_EVENT }\\"
+          variant=\\"primary\\"
+          >{{ $t(\\"Create\\") }}</o-button
+        >
+      </o-navbar-item>
+    </template>
+    <template #end>
+      <o-navbar-item tag=\\"div\\">
+        <search-field @navbar-search=\\"mobileNavbarActive = false\\" />
+      </o-navbar-item>
+
+      <o-navbar-dropdown
+        v-if=\\"currentActor.id && currentUser?.isLoggedIn\\"
+        right
+        collapsible
+        ref=\\"user-dropdown\\"
+        tabindex=\\"0\\"
+        tag=\\"span\\"
+        @keyup.enter=\\"toggleMenu\\"
+      >
+        <template #label v-if=\\"currentActor\\">
+          <div class=\\"identity-wrapper\\">
+            <div>
+              <figure class=\\"image is-32x32\\" v-if=\\"currentActor.avatar\\">
+                <img
+                  class=\\"is-rounded\\"
+                  alt=\\"avatarUrl\\"
+                  :src=\\"currentActor.avatar.url\\"
+                />
+              </figure>
+              <o-icon v-else icon=\\"account-circle\\" />
+            </div>
+            <div class=\\"media-content is-hidden-desktop\\">
+              <span>{{ displayName(currentActor) }}</span>
+              <span class=\\"has-text-grey-dark\\" v-if=\\"currentActor.name\\"
+                >@{{ currentActor.preferredUsername }}</span
+              >
+            </div>
+          </div>
+        </template>
+
+        No identities dropdown if no identities
+        <span v-if=\\"identities.length <= 1\\"></span>
+        <o-navbar-item
+          tag=\\"span\\"
+          v-for=\\"identity in identities\\"
+          v-else
+          :active=\\"identity.id === currentActor.id\\"
+          :key=\\"identity.id\\"
+          tabindex=\\"0\\"
+          @click=\\"setIdentity({
+      preferredUsername: identity.preferredUsername,
+    })\\"
+          @keyup.enter=\\"setIdentity({
+      preferredUsername: identity.preferredUsername,
+    })\\"
+        >
+          <span>
+            <div class=\\"media-left\\">
+              <figure class=\\"image is-32x32\\" v-if=\\"identity.avatar\\">
+                <img
+                  class=\\"is-rounded\\"
+                  loading=\\"lazy\\"
+                  :src=\\"identity.avatar.url\\"
+                  alt
+                />
+              </figure>
+              <o-icon v-else size=\\"is-medium\\" icon=\\"account-circle\\" />
+            </div>
+
+            <div class=\\"media-content\\">
+              <span>{{ displayName(identity) }}</span>
+              <span class=\\"has-text-grey-dark\\" v-if=\\"identity.name\\"
+                >@{{ identity.preferredUsername }}</span
+              >
+            </div>
+          </span>
+
+          <hr class=\\"navbar-divider\\" role=\\"presentation\\" />
+        </o-navbar-item>
+
+        <o-navbar-item
+          tag=\\"router-link\\"
+          :to=\\"{ name: RouteName.UPDATE_IDENTITY }\\"
+          >{{ $t(\\"My account\\") }}</o-navbar-item
+        >
+        <o-navbar-item
+          v-if=\\"currentUser.role === ICurrentUserRole.ADMINISTRATOR\\"
+          tag=\\"router-link\\"
+          :to=\\"{ name: RouteName.ADMIN_DASHBOARD }\\"
+          >{{ $t(\\"Administration\\") }}</o-navbar-item
+        >
+
+        <o-navbar-item
+          tag=\\"span\\"
+          tabindex=\\"0\\"
+          @click=\\"logout\\"
+          @keyup.enter=\\"logout\\"
+        >
+          <span>{{ $t(\\"Log out\\") }}</span>
+        </o-navbar-item>
+      </o-navbar-dropdown>
+
+      <o-navbar-item v-else tag=\\"div\\">
+        <div class=\\"buttons\\">
+          <router-link
+            class=\\"button is-primary\\"
+            v-if=\\"config && config.registrationsOpen\\"
+            :to=\\"{ name: RouteName.REGISTER }\\"
+          >
+            <strong>{{ $t(\\"Sign up\\") }}</strong>
+          </router-link>
+
+          <router-link
+            class=\\"button is-light\\"
+            :to=\\"{ name: RouteName.LOGIN }\\"
+            >{{ $t(\\"Log in\\") }}</router-link
+          >
+        </div>
+      </o-navbar-item>
+    </template>
+  </o-navbar> -->"
+`;
diff --git a/js/tests/unit/specs/components/navbar.spec.ts b/js/tests/unit/specs/components/navbar.spec.ts
index 98e18767e..82f65ff78 100644
--- a/js/tests/unit/specs/components/navbar.spec.ts
+++ b/js/tests/unit/specs/components/navbar.spec.ts
@@ -1,30 +1,29 @@
-import { shallowMount, createLocalVue, Wrapper, config } from "@vue/test-utils";
+const useRouterMock = vi.fn(() => ({
+  push: () => {},
+}));
+
+import { shallowMount, VueWrapper } from "@vue/test-utils";
 import NavBar from "@/components/NavBar.vue";
 import {
   createMockClient,
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "@vue/apollo-option";
-import { CONFIG } from "@/graphql/config";
-import { USER_SETTINGS } from "@/graphql/user";
 import buildCurrentUserResolver from "@/apollo/user";
-import Buefy from "buefy";
-import { configMock } from "../mocks/config";
 import { InMemoryCache } from "@apollo/client/cache";
+import { describe, it, vi, expect, afterEach } from "vitest";
+import { DefaultApolloClient } from "@vue/apollo-composable";
 
-const localVue = createLocalVue();
-localVue.use(VueApollo);
-localVue.use(Buefy);
-config.mocks.$t = (key: string): string => key;
+vi.mock("vue-router/dist/vue-router.mjs", () => ({
+  useRouter: useRouterMock,
+}));
 
 describe("App component", () => {
-  let wrapper: Wrapper<Vue>;
+  let wrapper: VueWrapper;
   let mockClient: MockApolloClient | null;
-  let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
 
-  const createComponent = (handlers = {}, baseData = {}) => {
+  const createComponent = (handlers = {}) => {
     const cache = new InMemoryCache({ addTypename: false });
 
     mockClient = createMockClient({
@@ -32,50 +31,34 @@ describe("App component", () => {
       resolvers: buildCurrentUserResolver(cache),
     });
 
-    requestHandlers = {
-      configQueryHandler: jest.fn().mockResolvedValue(configMock),
-      loggedUserQueryHandler: jest.fn().mockResolvedValue(null),
-      ...handlers,
-    };
-
-    mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
-
-    mockClient.setRequestHandler(
-      USER_SETTINGS,
-      requestHandlers.loggedUserQueryHandler
-    );
-
-    apolloProvider = new VueApollo({
-      defaultClient: mockClient,
-    });
+    requestHandlers = { ...handlers };
 
     wrapper = shallowMount(NavBar, {
-      localVue,
-      apolloProvider,
-      stubs: ["router-link", "router-view"],
-      data() {
-        return {
-          ...baseData,
-        };
+      // stubs: ["router-link", "router-view", "o-dropdown", "o-dropdown-item"],
+      global: {
+        provide: {
+          [DefaultApolloClient]: mockClient,
+        },
       },
     });
   };
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper?.unmount();
     mockClient = null;
-    apolloProvider = null;
   });
 
   it("renders a Vue component", async () => {
+    const push = vi.fn();
+    useRouterMock.mockImplementationOnce(() => ({
+      push,
+    }));
     createComponent();
 
     await wrapper.vm.$nextTick();
 
     expect(wrapper.exists()).toBe(true);
-    expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
-    expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
     expect(wrapper.html()).toMatchSnapshot();
-    expect(wrapper.findComponent({ name: "b-navbar" }).exists()).toBeTruthy();
+    // expect(wrapper.findComponent({ name: "b-navbar" }).exists()).toBeTruthy();
   });
 });
diff --git a/js/tests/unit/specs/components/tag.spec.ts b/js/tests/unit/specs/components/tag.spec.ts
index d8dac0c59..852023bdb 100644
--- a/js/tests/unit/specs/components/tag.spec.ts
+++ b/js/tests/unit/specs/components/tag.spec.ts
@@ -1,5 +1,6 @@
 import { mount } from "@vue/test-utils";
-import Tag from "@/components/Tag.vue";
+import Tag from "@/components/TagElement.vue";
+import { it, expect } from "vitest";
 
 const tagContent = "My tag";
 
@@ -15,5 +16,5 @@ it("renders a Vue component", () => {
   const wrapper = createComponent();
 
   expect(wrapper.exists()).toBe(true);
-  expect(wrapper.find("span.tag span").text()).toEqual(tagContent);
+  expect(wrapper.find("span").text()).toEqual(tagContent);
 });
diff --git a/js/tests/unit/specs/mocks/config.ts b/js/tests/unit/specs/mocks/config.ts
index 9ff4e92d8..b404b4fa7 100644
--- a/js/tests/unit/specs/mocks/config.ts
+++ b/js/tests/unit/specs/mocks/config.ts
@@ -127,3 +127,28 @@ export const configMock = {
     },
   },
 };
+
+export const loginMock = {
+  data: {
+    config: {
+      __typename: "Config",
+      auth: {
+        __typename: "Auth",
+        oauthProviders: [],
+      },
+      registrationsOpen: true,
+    },
+  },
+};
+
+export const anonymousActorIdMock = {
+  data: {
+    config: {
+      __typename: "Config",
+      anonymous: {
+        __typename: "Anonymous",
+        actorId: "1",
+      },
+    },
+  },
+};
diff --git a/js/tests/unit/specs/mocks/event.ts b/js/tests/unit/specs/mocks/event.ts
index af0187abe..6410f0980 100644
--- a/js/tests/unit/specs/mocks/event.ts
+++ b/js/tests/unit/specs/mocks/event.ts
@@ -15,11 +15,7 @@ export const fetchEventBasicMock = {
         __typename: "ParticipantStats",
         notApproved: 0,
         notConfirmed: 0,
-        rejected: 0,
         participant: 0,
-        creator: 1,
-        moderator: 0,
-        administrator: 0,
         going: 1,
       },
     },
@@ -61,7 +57,7 @@ export const joinEventMock = {
   email: "some@email.tld",
   message: "a message long enough",
   locale: "en_US",
-  timezone: "UTC",
+  timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 };
 
 export const eventNoCommentThreadsMock = {
@@ -152,8 +148,9 @@ export const eventCommentThreadsMock = {
 export const newCommentForEventMock = {
   eventId: "1",
   text: "my new comment",
-  inReplyToCommentId: null,
+  inReplyToCommentId: undefined,
   isAnnouncement: false,
+  originCommentId: undefined,
 };
 
 export const newCommentForEventResponse: DataMock = {
diff --git a/js/tests/unit/specs/mocks/matchMedia.ts b/js/tests/unit/specs/mocks/matchMedia.ts
new file mode 100644
index 000000000..023757a1f
--- /dev/null
+++ b/js/tests/unit/specs/mocks/matchMedia.ts
@@ -0,0 +1,12 @@
+import { vi } from "vitest";
+
+vi.stubGlobal("matchMedia", (query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(), // deprecated
+  removeListener: vi.fn(), // deprecated
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}));
diff --git a/js/tsconfig.json b/js/tsconfig.json
index cbc948bc9..84839b8f1 100644
--- a/js/tsconfig.json
+++ b/js/tsconfig.json
@@ -11,9 +11,15 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
+    "isolatedModules": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env", "jest"],
+    "types": [
+      "webpack-env",
+      "jest",
+      "vite/client",
+      "@intlify/vite-plugin-vue-i18n/client"
+    ],
     "typeRoots": ["./@types", "./node_modules/@types"],
     "paths": {
       "@/*": ["src/*"]
@@ -32,7 +38,8 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "tests/**/*.tsx",
+    "env.d.ts"
   ],
   "exclude": ["node_modules"]
 }
diff --git a/js/vite.config.js b/js/vite.config.js
new file mode 100644
index 000000000..96a88d348
--- /dev/null
+++ b/js/vite.config.js
@@ -0,0 +1,84 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import path from "path";
+import { VitePWA } from "vite-plugin-pwa";
+import { visualizer } from "rollup-plugin-visualizer";
+// import { resolve, dirname } from "node:path";
+// import { fileURLToPath } from "url";
+// import vueI18n from "@intlify/vite-plugin-vue-i18n";
+
+export default defineConfig(({ command }) => {
+  const isDev = command !== "build";
+  if (isDev) {
+    // Terminate the watcher when Phoenix quits
+    process.stdin.on("close", () => {
+      process.exit(0);
+    });
+
+    process.stdin.resume();
+  }
+
+  return {
+    plugins: [
+      vue(),
+      VitePWA({
+        // registerType: "autoUpdate",
+        strategies: "injectManifest",
+        srcDir: "src",
+        filename: "service-worker.ts",
+        // injectRegister: "auto",
+        // devOptions: {
+        //   enabled: true,
+        // },
+      }),
+      // vueI18n({
+      //   /* options */
+      //   // locale messages resource pre-compile option
+      //   include: resolve(
+      //     dirname(fileURLToPath(import.meta.url)),
+      //     "./src/i18n/**"
+      //   ),
+      // }),
+      visualizer(),
+    ],
+    build: {
+      manifest: true,
+      outDir: path.resolve(__dirname, "../priv/static"),
+      emptyOutDir: true,
+      sourcemap: isDev,
+      rollupOptions: {
+        // overwrite default .html entry
+        input: {
+          main: "src/main.ts",
+        },
+      },
+    },
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          sassOptions: {
+            quietDeps: true,
+          },
+        },
+      },
+    },
+    test: {
+      environment: "jsdom",
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "./src"),
+        },
+      },
+      coverage: {
+        reporter: ["text", "json", "html"],
+      },
+      setupFiles: path.resolve(__dirname, "./tests/unit/setup.ts"),
+      include: [path.resolve(__dirname, "./tests/unit/specs/**/*.spec.ts")],
+    },
+  };
+});
diff --git a/js/vue.config.js b/js/vue.config.js
deleted file mode 100644
index c4d804ae0..000000000
--- a/js/vue.config.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  outputDir: path.resolve(__dirname, "../priv/static"),
-  chainWebpack: (config) => {
-    // remove the prefetch plugin
-    config.plugins.delete("prefetch");
-  },
-  configureWebpack: (config) => {
-    const miniCssExtractPlugin = config.plugins.find(
-      (plugin) => plugin.constructor.name === "MiniCssExtractPlugin"
-    );
-    if (miniCssExtractPlugin) {
-      miniCssExtractPlugin.options.linkType = false;
-    }
-  },
-  pwa: {
-    themeColor: "#ffd599", //not required for service worker, but place theme color here if manifest.json doesn't change the color
-    workboxPluginMode: "InjectManifest",
-    workboxOptions: {
-      // swSrc is required in InjectManifest mode.
-      swSrc: "./src/service-worker.ts",
-      // ...other Workbox options...
-    },
-    manifestOptions: {
-      orientation: "portrait-primary",
-    },
-  },
-  css: {
-    loaderOptions: {
-      scss: {
-        additionalData: `
-        @use "@/variables.scss" as *;
-        `,
-        sassOptions: {
-          quietDeps: true,
-        },
-      },
-    },
-  },
-};
diff --git a/js/yarn.lock b/js/yarn.lock
index 76445ba54..624d071d9 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -27,15 +27,6 @@
     core-js "2.6.0"
     zen-observable "0.8.11"
 
-"@achrinza/node-ipc@^9.2.5":
-  version "9.2.5"
-  resolved "https://registry.yarnpkg.com/@achrinza/node-ipc/-/node-ipc-9.2.5.tgz#29788e608ff41121f0543491da723b243266ac28"
-  integrity sha512-kBX7Ay911iXZ3VZ1pYltj3Rfu7Ow9H7sK4H4RSfWIfWR2JKNB40K808wppoRIEzE2j2hXLU+r6TJgCAliCGhyQ==
-  dependencies:
-    "@node-ipc/js-queue" "2.0.3"
-    event-pubsub "4.3.0"
-    js-message "1.0.7"
-
 "@ampproject/remapping@^2.1.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -45,18 +36,18 @@
     "@jridgewell/trace-mapping" "^0.3.9"
 
 "@apideck/better-ajv-errors@^0.3.1":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.4.tgz#f89924dd4efd04a51835db7eb549a7177e0ca727"
-  integrity sha512-Ic2d8ZT6HJiSikGVQvSklaFyw1OUv4g8sDOxa0PXSlbmN/3gL5IO1WYY9DOwTDqOFmjWoqG1yaaKnPDqYCE9KA==
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
+  integrity sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==
   dependencies:
     json-schema "^0.4.0"
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
 "@apollo/client@^3.0.0", "@apollo/client@^3.3.16":
-  version "3.6.8"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.6.8.tgz#97e876fdbc4c287652a61895fd2b6f0b157a7667"
-  integrity sha512-p/J6KRHZZPGX0bZtMLvRFAIcReYsRYGg+Jz9MkgabWPy0L8rwgyolq9fvKsNqkH888Tj9Yvwrxz9V84KfcORJA==
+  version "3.6.9"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.6.9.tgz#ad0ee2e3a3c92dbed4acd6917b6158a492739d94"
+  integrity sha512-Y1yu8qa2YeaCUBVuw08x8NHenFi0sw2I3KCu7Kw9mDSu86HmmtHJkCAifKVrN2iPgDTW/BbP3EpSV8/EQCcxZA==
   dependencies:
     "@graphql-typed-document-node/core" "^3.1.1"
     "@wry/context" "^0.6.0"
@@ -71,414 +62,407 @@
     tslib "^2.3.0"
     zen-observable-ts "^1.2.5"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
-  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
   dependencies:
-    "@babel/highlight" "^7.16.7"
+    "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.17.10":
-  version "7.18.5"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.5.tgz#acac0c839e317038c73137fbb6ef71a1d6238471"
-  integrity sha512-BxhE40PVCBxVEJsSBhB6UWyAuqJRxGsAw8BdHMJ3AKGydcwuWW4kOO3HmqBQAdcq/OP+/DlTVxLvsCzRTnZuGg==
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.18.8", "@babel/compat-data@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.1.tgz#72d647b4ff6a4f82878d184613353af1dd0290f9"
+  integrity sha512-72a9ghR0gnESIa7jBN53U32FOVCEoztyIlKaNoU05zRhEecduGK9L9c3ww7Mp06JiR+0ls0GBPFJQwwtjn9ksg==
 
-"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.16", "@babel/core@^7.12.3", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
-  version "7.18.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.5.tgz#c597fa680e58d571c28dda9827669c78cdd7f000"
-  integrity sha512-MGY8vg3DxMnctw0LdvSEojOsumc70g0t18gNyUdAZqB1Rpd1Bqo/svHGvt+UJ6JcGX+DIekGFDxxIWofBxLCnQ==
+"@babel/core@^7.11.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.19.1.tgz#c8fa615c5e88e272564ace3d42fbc8b17bfeb22b"
+  integrity sha512-1H8VgqXme4UXCRv7/Wa1bq7RVymKOzC7znjyFM8KiEzwFqcKUKYNoQef4GhdklgNvoBXyW4gYhuBNCM5o1zImw==
   dependencies:
     "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.18.2"
-    "@babel/helper-compilation-targets" "^7.18.2"
-    "@babel/helper-module-transforms" "^7.18.0"
-    "@babel/helpers" "^7.18.2"
-    "@babel/parser" "^7.18.5"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.18.5"
-    "@babel/types" "^7.18.4"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.0"
+    "@babel/helper-compilation-targets" "^7.19.1"
+    "@babel/helper-module-transforms" "^7.19.0"
+    "@babel/helpers" "^7.19.0"
+    "@babel/parser" "^7.19.1"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.1"
+    "@babel/types" "^7.19.0"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.1"
     semver "^6.3.0"
 
-"@babel/generator@^7.18.2", "@babel/generator@^7.7.2":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.2.tgz#33873d6f89b21efe2da63fe554460f3df1c5880d"
-  integrity sha512-W1lG5vUwFvfMd8HVXqdfbuG7RuaSrTCCD8cl8fP8wOivdbtbIg2Db3IWUcgvfxKbbn6ZBGYRW/Zk1MIwK49mgw==
+"@babel/generator@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.0.tgz#785596c06425e59334df2ccee63ab166b738419a"
+  integrity sha512-S1ahxf1gZ2dpoiFgA+ohK9DIpz50bJ0CWs7Zlzb54Z4sG8qmdIrGrVqmy1sAtTVRb+9CU6U8VqT9L0Zj7hxHVg==
   dependencies:
-    "@babel/types" "^7.18.2"
-    "@jridgewell/gen-mapping" "^0.3.0"
+    "@babel/types" "^7.19.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/helper-annotate-as-pure@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
-  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
-  integrity sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
+  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.16.7"
-    "@babel/types" "^7.16.7"
+    "@babel/helper-explode-assignable-expression" "^7.18.6"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-compilation-targets@^7.12.16", "@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.10", "@babel/helper-compilation-targets@^7.18.2":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.2.tgz#67a85a10cbd5fc7f1457fec2e7f45441dc6c754b"
-  integrity sha512-s1jnPotJS9uQnzFtiZVBUxe67CuBa679oWFHpxYYnTpRL/1ffhyX44R9uYiXoa/pLXcY9H2moJta0iaanlk/rQ==
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9", "@babel/helper-compilation-targets@^7.19.0", "@babel/helper-compilation-targets@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.1.tgz#7f630911d83b408b76fe584831c98e5395d7a17c"
+  integrity sha512-LlLkkqhCMyz2lkQPvJNdIYU7O5YjWRgC2R4omjCTpZd8u8KMQzZvX4qce+/BluN1rcQiV7BoGUpmQ0LeHerbhg==
   dependencies:
-    "@babel/compat-data" "^7.17.10"
-    "@babel/helper-validator-option" "^7.16.7"
-    browserslist "^4.20.2"
+    "@babel/compat-data" "^7.19.1"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.17.12", "@babel/helper-create-class-features-plugin@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz#fac430912606331cb075ea8d82f9a4c145a4da19"
-  integrity sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==
+"@babel/helper-create-class-features-plugin@^7.18.6":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.19.0.tgz#bfd6904620df4e46470bae4850d66be1054c404b"
+  integrity sha512-NRz8DwF4jT3UfrmUoZjd0Uph9HQnP30t7Ash+weACcyNkiYTywpIjDBgReJMKgr+n86sn2nPVVmJ28Dm053Kqw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.17.9"
-    "@babel/helper-member-expression-to-functions" "^7.17.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
 
-"@babel/helper-create-regexp-features-plugin@^7.16.7", "@babel/helper-create-regexp-features-plugin@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.12.tgz#bb37ca467f9694bbe55b884ae7a5cc1e0084e4fd"
-  integrity sha512-b2aZrV4zvutr9AIa6/gA3wsZKRwTKYoDxYiFKcESS3Ug2GTXzwBEvMuuFLhCQpEnRXs1zng4ISAXSUxxKBIcxw==
+"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.19.0.tgz#7976aca61c0984202baca73d84e2337a5424a41b"
+  integrity sha512-htnV+mHX32DF81amCDrwIDr8nrp1PTm+3wfBN9/v8QJOLEioOCOG7qNyq0nHeFiWbT3Eb7gsPwEmV64UCQ1jzw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    regexpu-core "^5.0.1"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    regexpu-core "^5.1.0"
 
-"@babel/helper-define-polyfill-provider@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
-  integrity sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==
+"@babel/helper-define-polyfill-provider@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
+  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.13.0"
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/traverse" "^7.13.0"
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
     debug "^4.1.1"
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-environment-visitor@^7.16.7", "@babel/helper-environment-visitor@^7.18.2":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.2.tgz#8a6d2dedb53f6bf248e31b4baf38739ee4a637bd"
-  integrity sha512-14GQKWkX9oJzPiQQ7/J36FTXcD4kSp8egKjO9nINlSKiHITRA9q/R74qu8S9xlc/b/yjsJItQUeeh3xnGN0voQ==
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
-"@babel/helper-explode-assignable-expression@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
-  integrity sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==
+"@babel/helper-explode-assignable-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
+  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-function-name@^7.16.7", "@babel/helper-function-name@^7.17.9":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
-  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+"@babel/helper-function-name@^7.18.9", "@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
   dependencies:
-    "@babel/template" "^7.16.7"
-    "@babel/types" "^7.17.0"
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
 
-"@babel/helper-hoist-variables@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
-  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-member-expression-to-functions@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
-  integrity sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==
+"@babel/helper-member-expression-to-functions@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz#1531661e8375af843ad37ac692c132841e2fd815"
+  integrity sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==
   dependencies:
-    "@babel/types" "^7.17.0"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
-  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+"@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-module-transforms@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.0.tgz#baf05dec7a5875fb9235bd34ca18bad4e21221cd"
-  integrity sha512-kclUYSUBIjlvnzN2++K9f2qzYKFgjmnmjwL4zlmU5f8ZtzgWe8s0rUPSTGy2HmK4P8T52MQsS+HTQAgZd3dMEA==
+"@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz#309b230f04e22c58c6a2c0c0c7e50b216d350c30"
+  integrity sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-simple-access" "^7.17.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/helper-validator-identifier" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.18.0"
-    "@babel/types" "^7.18.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
 
-"@babel/helper-optimise-call-expression@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
-  integrity sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.17.12", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
-  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
+  integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
 
-"@babel/helper-remap-async-to-generator@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
-  integrity sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==
+"@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
+  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-wrap-function" "^7.16.8"
-    "@babel/types" "^7.16.8"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-wrap-function" "^7.18.9"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-replace-supers@^7.16.7", "@babel/helper-replace-supers@^7.18.2":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.18.2.tgz#41fdfcc9abaf900e18ba6e5931816d9062a7b2e0"
-  integrity sha512-XzAIyxx+vFnrOxiQrToSUOzUOn0e1J2Li40ntddek1Y69AXUTXoDJ40/D5RdjFu7s7qHiaeoTiempZcbuVXh2Q==
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.18.9":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.19.1.tgz#e1592a9b4b368aa6bdb8784a711e0bcbf0612b78"
+  integrity sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.18.2"
-    "@babel/helper-member-expression-to-functions" "^7.17.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/traverse" "^7.18.2"
-    "@babel/types" "^7.18.2"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/traverse" "^7.19.1"
+    "@babel/types" "^7.19.0"
 
-"@babel/helper-simple-access@^7.17.7", "@babel/helper-simple-access@^7.18.2":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.2.tgz#4dc473c2169ac3a1c9f4a51cfcd091d1c36fcff9"
-  integrity sha512-7LIrjYzndorDY88MycupkpQLKS1AFfsVRm2k/9PtKScSy5tZq0McZTj+DiMRynboZfIqOKvo03pmhTaUgiD6fQ==
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
   dependencies:
-    "@babel/types" "^7.18.2"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
-  integrity sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==
+"@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz#778d87b3a758d90b471e7b9918f34a9a02eb5818"
+  integrity sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==
   dependencies:
-    "@babel/types" "^7.16.0"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-split-export-declaration@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
-  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-validator-identifier@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
-  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+"@babel/helper-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
 
-"@babel/helper-validator-option@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
-  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
-"@babel/helper-wrap-function@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
-  integrity sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
+"@babel/helper-wrap-function@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.19.0.tgz#89f18335cff1152373222f76a4b37799636ae8b1"
+  integrity sha512-txX8aN8CZyYGTwcLhlk87KRqncAzhh5TpQamZUa0/u3an36NtDpUP6bQgBCBcLeBs09R/OwQu3OjK0k/HwfNDg==
   dependencies:
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.8"
-    "@babel/types" "^7.16.8"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
 
-"@babel/helpers@^7.18.2":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.2.tgz#970d74f0deadc3f5a938bfa250738eb4ac889384"
-  integrity sha512-j+d+u5xT5utcQSzrh9p+PaJX94h++KN+ng9b9WEJq7pkUPAd61FGqhjuUEdfknb3E/uDBb7ruwEeKkIxNJPIrg==
+"@babel/helpers@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.0.tgz#f30534657faf246ae96551d88dd31e9d1fa1fc18"
+  integrity sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==
   dependencies:
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.18.2"
-    "@babel/types" "^7.18.2"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
 
-"@babel/highlight@^7.16.7":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.12.tgz#257de56ee5afbd20451ac0a75686b6b404257351"
-  integrity sha512-7yykMVF3hfZY2jsHZEEgLc+3x4o1O+fYyULu11GynEUQNwB6lua+IIQn1FiJxNucd5UlyJryrwsOh8PL9Sn8Qg==
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.18.6"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.18.5":
-  version "7.18.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.5.tgz#337062363436a893a2d22faa60be5bb37091c83c"
-  integrity sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==
+"@babel/parser@^7.16.4", "@babel/parser@^7.18.10", "@babel/parser@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.1.tgz#6f6d6c2e621aad19a92544cc217ed13f1aac5b4c"
+  integrity sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.17.12.tgz#1dca338caaefca368639c9ffb095afbd4d420b1e"
-  integrity sha512-xCJQXl4EeQ3J9C4yOmpTrtVGmzpm2iSzyxbkZHw7UCnZBftHpF/hpII80uWVyVrc40ytIClHjgWGTG1g/yB+aw==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
+  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.17.12.tgz#0d498ec8f0374b1e2eb54b9cb2c4c78714c77753"
-  integrity sha512-/vt0hpIw0x4b6BLKUkwlvEoiGZYYLNZ96CzyHYPbtG2jZGz6LBe7/V+drYrc/d+ovrF9NBi0pmtvmNb/FsWtRQ==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
+  integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
 
-"@babel/plugin-proposal-async-generator-functions@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.17.12.tgz#094a417e31ce7e692d84bab06c8e2a607cbeef03"
-  integrity sha512-RWVvqD1ooLKP6IqWTA5GyFVX2isGEgC5iFxKzfYOIy/QEFdxYyCybBDtIGjipHpb9bDWHzcqGqFakf+mVmBTdQ==
+"@babel/plugin-proposal-async-generator-functions@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.19.1.tgz#34f6f5174b688529342288cd264f80c9ea9fb4a7"
+  integrity sha512-0yu8vNATgLy4ivqMNBIwb1HebCelqN7YX8SL3FDXORv/RqT0zEEWUCH4GH44JsSrvCu6GqnAdR5EBFAPeNBB4Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.12.13", "@babel/plugin-proposal-class-properties@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.17.12.tgz#84f65c0cc247d46f40a6da99aadd6438315d80a4"
-  integrity sha512-U0mI9q8pW5Q9EaTHFPwSVusPMV/DV9Mm8p7csqROFLtIE9rBF5piLqyrBGigftALrBcsBGu4m38JneAe7ZDLXw==
+"@babel/plugin-proposal-class-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.0.tgz#7d02253156e3c3793bdb9f2faac3a1c05f0ba710"
-  integrity sha512-t+8LsRMMDE74c6sV7KShIw13sqbqd58tlqNrsWoWBTIMw7SVQ0cZ905wLNS/FBCy/3PyooRHLFFlfrUNyyz5lA==
+"@babel/plugin-proposal-class-static-block@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020"
+  integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.0"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-proposal-decorators@^7.12.13":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.2.tgz#dbe4086d2d42db489399783c3aa9272e9700afd4"
-  integrity sha512-kbDISufFOxeczi0v4NQP3p5kIeW6izn/6klfWBrIIdGZZe4UpHR+QU03FAoWjGGd9SUXAwbw2pup1kaL4OQsJQ==
+"@babel/plugin-proposal-dynamic-import@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
+  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.18.0"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-replace-supers" "^7.18.2"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/plugin-syntax-decorators" "^7.17.12"
-    charcodes "^0.2.0"
-
-"@babel/plugin-proposal-dynamic-import@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
-  integrity sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378"
-  integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ==
+"@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.17.12.tgz#f4642951792437233216d8c1af370bb0fbff4664"
-  integrity sha512-rKJ+rKBoXwLnIn7n6o6fulViHMrOThz99ybH+hKHcOZbnN14VuMnH9fo2eHE69C8pO4uX1Q7t2HYYIDmv8VYkg==
+"@babel/plugin-proposal-json-strings@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
+  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.17.12.tgz#c64a1bcb2b0a6d0ed2ff674fd120f90ee4b88a23"
-  integrity sha512-EqFo2s1Z5yy+JeJu7SFfbIUtToJTVlC61/C7WLKDntSw4Sz6JNAIfL7zQ74VvirxpjB5kz/kIx0gCcb+5OEo2Q==
+"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
+  integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.17.12.tgz#1e93079bbc2cbc756f6db6a1925157c4a92b94be"
-  integrity sha512-ws/g3FSGVzv+VH86+QvgtuJL/kR67xaEIF2x0iPqdDfYW6ra6JF3lKVBkWynRLcNtIC1oCTfDRVxmm2mKzy+ag==
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
-  integrity sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==
+"@babel/plugin-proposal-numeric-separator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.0.tgz#79f2390c892ba2a68ec112eb0d895cfbd11155e8"
-  integrity sha512-nbTv371eTrFabDfHLElkn9oyf9VG+VKK6WMzhY2o4eHKaG19BToD9947zzGMO6I/Irstx9d8CwX6njPNIAR/yw==
+"@babel/plugin-proposal-object-rest-spread@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz#f9434f6beb2c8cae9dfcf97d2a5941bbbf9ad4e7"
+  integrity sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==
   dependencies:
-    "@babel/compat-data" "^7.17.10"
-    "@babel/helper-compilation-targets" "^7.17.10"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.17.12"
+    "@babel/plugin-transform-parameters" "^7.18.8"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
-  integrity sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==
+"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
+  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.17.12.tgz#f96949e9bacace3a9066323a5cf90cfb9de67174"
-  integrity sha512-7wigcOs/Z4YWlK7xxjkvaIw84vGhDv/P1dFGQap0nHkc8gFKY/r+hXc8Qzf5k1gY7CvGIcHqAnOagVKJJ1wVOQ==
+"@babel/plugin-proposal-optional-chaining@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz#e8e8fe0723f2563960e4bf5e9690933691915993"
+  integrity sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-proposal-private-methods@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.17.12.tgz#c2ca3a80beb7539289938da005ad525a038a819c"
-  integrity sha512-SllXoxo19HmxhDWm3luPz+cPhtoTSKLJE9PXshsfrOzBqs60QP0r8OaJItrPhAj0d7mZMnNF0Y1UUggCDgMz1A==
+"@babel/plugin-proposal-private-methods@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.17.12.tgz#b02efb7f106d544667d91ae97405a9fd8c93952d"
-  integrity sha512-/6BtVi57CJfrtDNKfK5b66ydK2J5pXUKBKSPD2G1whamMuEnZWgoOIfO8Vf9F/DoD4izBLD/Au4NMQfruzzykg==
+"@babel/plugin-proposal-private-property-in-object@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
+  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-create-class-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.17.12", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.17.12.tgz#3dbd7a67bd7f94c8238b394da112d86aaf32ad4d"
-  integrity sha512-Wb9qLjXf3ZazqXA7IvI7ozqRIXIGPtSo+L5coFmEkhTQK18ao4UDDD0zdTGAarmbLj2urpRwrc6893cu5Bfh0A==
+"@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
+  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
@@ -487,14 +471,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-bigint@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
-  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.0"
-
-"@babel/plugin-syntax-class-properties@^7.12.13", "@babel/plugin-syntax-class-properties@^7.8.3":
+"@babel/plugin-syntax-class-properties@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
   integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
@@ -508,13 +485,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-decorators@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.12.tgz#02e8f678602f0af8222235271efea945cfdb018a"
-  integrity sha512-D1Hz0qtGTza8K2xGyEdVNCYLdVHukAcbQr4K3/s6r/esadyEriZovpJimQOpu8ju4/jV8dW/1xdaE0UpDroidw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
@@ -529,19 +499,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-assertions@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.17.12.tgz#58096a92b11b2e4e54b24c6a0cc0e5e607abcedd"
-  integrity sha512-n/loy2zkq9ZEM8tEOwON9wTQSTNDTDEz6NujPtJGLU7qObzT1N4c4YZZf8E6ATB2AjNQg/Ib2AIpO03EZaCehw==
+"@babel/plugin-syntax-import-assertions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.18.6.tgz#cd6190500a4fa2fe31990a963ffab4b63e4505e4"
+  integrity sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-
-"@babel/plugin-syntax-import-meta@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
-  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
@@ -550,14 +513,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.2.0":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
-  integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
   integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
@@ -571,7 +527,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-numeric-separator@^7.10.4", "@babel/plugin-syntax-numeric-separator@^7.8.3":
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
   integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
@@ -606,316 +562,298 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-top-level-await@^7.14.5", "@babel/plugin-syntax-top-level-await@^7.8.3":
+"@babel/plugin-syntax-top-level-await@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
   integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-typescript@^7.7.2":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.12.tgz#b54fc3be6de734a56b87508f99d6428b5b605a7b"
-  integrity sha512-TYY0SXFiO31YXtNg3HtFwNJHjLsAyIIhAhNWkQ5whPPS7HWUFlg9z0Ta4qAQNjQbP1wsSt/oKkmZ/4/WWdMUpw==
+"@babel/plugin-transform-arrow-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
+  integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-arrow-functions@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.17.12.tgz#dddd783b473b1b1537ef46423e3944ff24898c45"
-  integrity sha512-PHln3CNi/49V+mza4xMwrg+WGYevSF1oaiXaC2EQfdp4HWlSjRsrDXWJiQBKpP7749u6vQ9mcry2uuFOv5CXvA==
+"@babel/plugin-transform-async-to-generator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615"
+  integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-remap-async-to-generator" "^7.18.6"
 
-"@babel/plugin-transform-async-to-generator@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.17.12.tgz#dbe5511e6b01eee1496c944e35cdfe3f58050832"
-  integrity sha512-J8dbrWIOO3orDzir57NRsjg4uxucvhby0L/KZuGsWDj0g7twWK3g7JhJhOrXtuXiw8MeiSdJ3E0OW9H8LYEzLQ==
+"@babel/plugin-transform-block-scoped-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
+  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-block-scoped-functions@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
-  integrity sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==
+"@babel/plugin-transform-block-scoping@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz#f9b7e018ac3f373c81452d6ada8bd5a18928926d"
+  integrity sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-block-scoping@^7.17.12":
-  version "7.18.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.4.tgz#7988627b3e9186a13e4d7735dc9c34a056613fb9"
-  integrity sha512-+Hq10ye+jlvLEogSOtq4mKvtk7qwcUQ1f0Mrueai866C82f844Yom2cttfJdMdqRLTxWpsbfbkIkOIfovyUQXw==
+"@babel/plugin-transform-classes@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.19.0.tgz#0e61ec257fba409c41372175e7c1e606dc79bb20"
+  integrity sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-
-"@babel/plugin-transform-classes@^7.17.12":
-  version "7.18.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.4.tgz#51310b812a090b846c784e47087fa6457baef814"
-  integrity sha512-e42NSG2mlKWgxKUAD9EJJSkZxR67+wZqzNxLSpc51T8tRU5SLFHsPmgYR5yr7sdgX4u+iHA1C5VafJ6AyImV3A==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.18.2"
-    "@babel/helper-function-name" "^7.17.9"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-replace-supers" "^7.18.2"
-    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.19.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.17.12.tgz#bca616a83679698f3258e892ed422546e531387f"
-  integrity sha512-a7XINeplB5cQUWMg1E/GI1tFz3LfK021IjV1rj1ypE+R7jHm+pIHmHl25VNkZxtx9uuYp7ThGk8fur1HHG7PgQ==
+"@babel/plugin-transform-computed-properties@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
+  integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-destructuring@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.0.tgz#dc4f92587e291b4daa78aa20cc2d7a63aa11e858"
-  integrity sha512-Mo69klS79z6KEfrLg/1WkmVnB8javh75HX4pi2btjvlIoasuxilEyjtsQW6XPrubNd7AQy0MMaNIaQE4e7+PQw==
+"@babel/plugin-transform-destructuring@^7.18.13":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.13.tgz#9e03bc4a94475d62b7f4114938e6c5c33372cbf5"
+  integrity sha512-TodpQ29XekIsex2A+YJPj5ax2plkGa8YYY6mFjCohk/IG9IY42Rtuj1FuDeemfg2ipxIFLzPeA83SIBnlhSIow==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
-  integrity sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==
+"@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
+  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-duplicate-keys@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.17.12.tgz#a09aa709a3310013f8e48e0e23bc7ace0f21477c"
-  integrity sha512-EA5eYFUG6xeerdabina/xIoB95jJ17mAkR8ivx6ZSu9frKShBjpOGZPn511MTDTkiCO+zXnzNczvUM69YSf3Zw==
+"@babel/plugin-transform-duplicate-keys@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
+  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-exponentiation-operator@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
-  integrity sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==
+"@babel/plugin-transform-exponentiation-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
+  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.18.1":
-  version "7.18.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.1.tgz#ed14b657e162b72afbbb2b4cdad277bf2bb32036"
-  integrity sha512-+TTB5XwvJ5hZbO8xvl2H4XaMDOAK57zF4miuC9qQJgysPNEAZZ9Z69rdF5LJkozGdZrjBIUAIyKUWRMmebI7vg==
+"@babel/plugin-transform-for-of@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
+  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-function-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
-  integrity sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==
+"@babel/plugin-transform-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
+  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-literals@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.17.12.tgz#97131fbc6bbb261487105b4b3edbf9ebf9c830ae"
-  integrity sha512-8iRkvaTjJciWycPIZ9k9duu663FT7VrBdNqNgxnVXEFwOIp55JWcZd23VBRySYbnS3PwQ3rGiabJBBBGj5APmQ==
+"@babel/plugin-transform-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
+  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-member-expression-literals@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
-  integrity sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==
+"@babel/plugin-transform-member-expression-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
+  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-modules-amd@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.0.tgz#7ef1002e67e36da3155edc8bf1ac9398064c02ed"
-  integrity sha512-h8FjOlYmdZwl7Xm2Ug4iX2j7Qy63NANI+NQVWQzv6r25fqgg7k2dZl03p95kvqNclglHs4FZ+isv4p1uXMA+QA==
+"@babel/plugin-transform-modules-amd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.6.tgz#8c91f8c5115d2202f277549848874027d7172d21"
+  integrity sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==
   dependencies:
-    "@babel/helper-module-transforms" "^7.18.0"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.15.0", "@babel/plugin-transform-modules-commonjs@^7.18.2", "@babel/plugin-transform-modules-commonjs@^7.2.0":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.2.tgz#1aa8efa2e2a6e818b6a7f2235fceaf09bdb31e9e"
-  integrity sha512-f5A865gFPAJAEE0K7F/+nm5CmAE3y8AWlMBG9unu5j9+tk50UQVK0QS8RNxSp7MJf0wh97uYyLWt3Zvu71zyOQ==
+"@babel/plugin-transform-modules-commonjs@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz#afd243afba166cca69892e24a8fd8c9f2ca87883"
+  integrity sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==
   dependencies:
-    "@babel/helper-module-transforms" "^7.18.0"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-simple-access" "^7.18.2"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.18.0":
-  version "7.18.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.5.tgz#87f11c44fbfd3657be000d4897e192d9cb535996"
-  integrity sha512-SEewrhPpcqMF1V7DhnEbhVJLrC+nnYfe1E0piZMZXBpxi9WvZqWGwpsk7JYP7wPWeqaBh4gyKlBhHJu3uz5g4Q==
+"@babel/plugin-transform-modules-systemjs@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.0.tgz#5f20b471284430f02d9c5059d9b9a16d4b085a1f"
+  integrity sha512-x9aiR0WXAWmOWsqcsnrzGR+ieaTMVyGyffPVA7F8cXAGt/UxefYv6uSHZLkAFChN5M5Iy1+wjE+xJuPt22H39A==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.16.7"
-    "@babel/helper-module-transforms" "^7.18.0"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-validator-identifier" "^7.18.6"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-umd@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.0.tgz#56aac64a2c2a1922341129a4597d1fd5c3ff020f"
-  integrity sha512-d/zZ8I3BWli1tmROLxXLc9A6YXvGK8egMxHp+E/rRwMh1Kip0AP77VwZae3snEJ33iiWwvNv2+UIIhfalqhzZA==
+"@babel/plugin-transform-modules-umd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
+  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.18.0"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.17.12.tgz#9c4a5a5966e0434d515f2675c227fd8cc8606931"
-  integrity sha512-vWoWFM5CKaTeHrdUJ/3SIOTRV+MBVGybOC9mhJkaprGNt5demMymDW24yC74avb915/mIRe3TgNb/d8idvnCRA==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.19.1.tgz#ec7455bab6cd8fb05c525a94876f435a48128888"
+  integrity sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-create-regexp-features-plugin" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.19.0"
 
-"@babel/plugin-transform-new-target@^7.17.12":
-  version "7.18.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.5.tgz#8c228c4a07501dd12c95c5f23d1622131cc23931"
-  integrity sha512-TuRL5uGW4KXU6OsRj+mLp9BM7pO8e7SGNTEokQRRxHFkXYMFiy2jlKSZPFtI/mKORDzciH+hneskcSOp0gU8hg==
+"@babel/plugin-transform-new-target@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
+  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-object-super@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
-  integrity sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==
+"@babel/plugin-transform-object-super@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
+  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
 
-"@babel/plugin-transform-parameters@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.17.12.tgz#eb467cd9586ff5ff115a9880d6fdbd4a846b7766"
-  integrity sha512-6qW4rWo1cyCdq1FkYri7AHpauchbGLXpdwnYsfxFb+KtddHENfsY5JZb35xUwkK5opOLcJ3BNd2l7PhRYGlwIA==
+"@babel/plugin-transform-parameters@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz#ee9f1a0ce6d78af58d0956a9378ea3427cccb48a"
+  integrity sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-property-literals@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
-  integrity sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==
+"@babel/plugin-transform-property-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
+  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-regenerator@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.0.tgz#44274d655eb3f1af3f3a574ba819d3f48caf99d5"
-  integrity sha512-C8YdRw9uzx25HSIzwA7EM7YP0FhCe5wNvJbZzjVNHHPGVcDJ3Aie+qGYYdS1oVQgn+B3eAIJbWFLrJ4Jipv7nw==
+"@babel/plugin-transform-regenerator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73"
+  integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
     regenerator-transform "^0.15.0"
 
-"@babel/plugin-transform-reserved-words@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.17.12.tgz#7dbd349f3cdffba751e817cf40ca1386732f652f"
-  integrity sha512-1KYqwbJV3Co03NIi14uEHW8P50Md6KqFgt0FfpHdK6oyAHQVTosgPuPSiWud1HX0oYJ1hGRRlk0fP87jFpqXZA==
+"@babel/plugin-transform-reserved-words@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
+  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-runtime@^7.12.15":
-  version "7.18.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.5.tgz#f4d3188ba6a8815793993c71c2c225d0ee1d7743"
-  integrity sha512-Q17hHxXr2fplrE+5BSC1j1Fo5cOA8YeP8XW3/1paI8MzF/faZGh0MaH1KC4jLAvqLPamQWHB5/B7KqSLY1kuHA==
+"@babel/plugin-transform-shorthand-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
+  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
   dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    babel-plugin-polyfill-corejs2 "^0.3.0"
-    babel-plugin-polyfill-corejs3 "^0.5.0"
-    babel-plugin-polyfill-regenerator "^0.3.0"
-    semver "^6.3.0"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-shorthand-properties@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz#e8549ae4afcf8382f711794c0c7b6b934c5fbd2a"
-  integrity sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==
+"@babel/plugin-transform-spread@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6"
+  integrity sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
 
-"@babel/plugin-transform-spread@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.17.12.tgz#c112cad3064299f03ea32afed1d659223935d1f5"
-  integrity sha512-9pgmuQAtFi3lpNUstvG9nGfk9DkrdmWNp9KeKPFmuZCpEnxRzYlS8JgwPjYj+1AWDOSvoGN0H30p1cBOmT/Svg==
+"@babel/plugin-transform-sticky-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
+  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-sticky-regex@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
-  integrity sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==
+"@babel/plugin-transform-template-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
+  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-template-literals@^7.18.2":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.2.tgz#31ed6915721864847c48b656281d0098ea1add28"
-  integrity sha512-/cmuBVw9sZBGZVOMkpAEaVLwm4JmK2GZ1dFKOGGpMzEHWFmyZZ59lUU0PdRr8YNYeQdNzTDwuxP2X2gzydTc9g==
+"@babel/plugin-transform-typeof-symbol@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
+  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-typeof-symbol@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.17.12.tgz#0f12f57ac35e98b35b4ed34829948d42bd0e6889"
-  integrity sha512-Q8y+Jp7ZdtSPXCThB6zjQ74N3lj0f6TDh1Hnf5B+sYlzQ8i5Pjp8gW0My79iekSpT4WnI06blqP6DT0OmaXXmw==
+"@babel/plugin-transform-unicode-escapes@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
+  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.17.12"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-unicode-escapes@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz#da8717de7b3287a2c6d659750c964f302b31ece3"
-  integrity sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==
+"@babel/plugin-transform-unicode-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
+  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-unicode-regex@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
-  integrity sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==
+"@babel/preset-env@^7.11.0":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.19.1.tgz#9f04c916f9c0205a48ebe5cc1be7768eb1983f67"
+  integrity sha512-c8B2c6D16Lp+Nt6HcD+nHl0VbPKVnNPTpszahuxJJnurfMtKeZ80A+qUv48Y7wqvS+dTFuLuaM9oYxyNHbCLWA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.12.16":
-  version "7.18.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.2.tgz#f47d3000a098617926e674c945d95a28cb90977a"
-  integrity sha512-PfpdxotV6afmXMU47S08F9ZKIm2bJIQ0YbAAtDfIENX7G1NUAXigLREh69CWDjtgUy7dYn7bsMzkgdtAlmS68Q==
-  dependencies:
-    "@babel/compat-data" "^7.17.10"
-    "@babel/helper-compilation-targets" "^7.18.2"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.17.12"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.17.12"
-    "@babel/plugin-proposal-async-generator-functions" "^7.17.12"
-    "@babel/plugin-proposal-class-properties" "^7.17.12"
-    "@babel/plugin-proposal-class-static-block" "^7.18.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.16.7"
-    "@babel/plugin-proposal-export-namespace-from" "^7.17.12"
-    "@babel/plugin-proposal-json-strings" "^7.17.12"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.17.12"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.17.12"
-    "@babel/plugin-proposal-numeric-separator" "^7.16.7"
-    "@babel/plugin-proposal-object-rest-spread" "^7.18.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.16.7"
-    "@babel/plugin-proposal-optional-chaining" "^7.17.12"
-    "@babel/plugin-proposal-private-methods" "^7.17.12"
-    "@babel/plugin-proposal-private-property-in-object" "^7.17.12"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.17.12"
+    "@babel/compat-data" "^7.19.1"
+    "@babel/helper-compilation-targets" "^7.19.1"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-async-generator-functions" "^7.19.1"
+    "@babel/plugin-proposal-class-properties" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-proposal-json-strings" "^7.18.6"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-object-rest-spread" "^7.18.9"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-private-methods" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-import-assertions" "^7.17.12"
+    "@babel/plugin-syntax-import-assertions" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
@@ -925,44 +863,44 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.17.12"
-    "@babel/plugin-transform-async-to-generator" "^7.17.12"
-    "@babel/plugin-transform-block-scoped-functions" "^7.16.7"
-    "@babel/plugin-transform-block-scoping" "^7.17.12"
-    "@babel/plugin-transform-classes" "^7.17.12"
-    "@babel/plugin-transform-computed-properties" "^7.17.12"
-    "@babel/plugin-transform-destructuring" "^7.18.0"
-    "@babel/plugin-transform-dotall-regex" "^7.16.7"
-    "@babel/plugin-transform-duplicate-keys" "^7.17.12"
-    "@babel/plugin-transform-exponentiation-operator" "^7.16.7"
-    "@babel/plugin-transform-for-of" "^7.18.1"
-    "@babel/plugin-transform-function-name" "^7.16.7"
-    "@babel/plugin-transform-literals" "^7.17.12"
-    "@babel/plugin-transform-member-expression-literals" "^7.16.7"
-    "@babel/plugin-transform-modules-amd" "^7.18.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.18.2"
-    "@babel/plugin-transform-modules-systemjs" "^7.18.0"
-    "@babel/plugin-transform-modules-umd" "^7.18.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.17.12"
-    "@babel/plugin-transform-new-target" "^7.17.12"
-    "@babel/plugin-transform-object-super" "^7.16.7"
-    "@babel/plugin-transform-parameters" "^7.17.12"
-    "@babel/plugin-transform-property-literals" "^7.16.7"
-    "@babel/plugin-transform-regenerator" "^7.18.0"
-    "@babel/plugin-transform-reserved-words" "^7.17.12"
-    "@babel/plugin-transform-shorthand-properties" "^7.16.7"
-    "@babel/plugin-transform-spread" "^7.17.12"
-    "@babel/plugin-transform-sticky-regex" "^7.16.7"
-    "@babel/plugin-transform-template-literals" "^7.18.2"
-    "@babel/plugin-transform-typeof-symbol" "^7.17.12"
-    "@babel/plugin-transform-unicode-escapes" "^7.16.7"
-    "@babel/plugin-transform-unicode-regex" "^7.16.7"
+    "@babel/plugin-transform-arrow-functions" "^7.18.6"
+    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
+    "@babel/plugin-transform-block-scoping" "^7.18.9"
+    "@babel/plugin-transform-classes" "^7.19.0"
+    "@babel/plugin-transform-computed-properties" "^7.18.9"
+    "@babel/plugin-transform-destructuring" "^7.18.13"
+    "@babel/plugin-transform-dotall-regex" "^7.18.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
+    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-function-name" "^7.18.9"
+    "@babel/plugin-transform-literals" "^7.18.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
+    "@babel/plugin-transform-modules-amd" "^7.18.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.18.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.19.0"
+    "@babel/plugin-transform-modules-umd" "^7.18.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.19.1"
+    "@babel/plugin-transform-new-target" "^7.18.6"
+    "@babel/plugin-transform-object-super" "^7.18.6"
+    "@babel/plugin-transform-parameters" "^7.18.8"
+    "@babel/plugin-transform-property-literals" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-reserved-words" "^7.18.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
+    "@babel/plugin-transform-spread" "^7.19.0"
+    "@babel/plugin-transform-sticky-regex" "^7.18.6"
+    "@babel/plugin-transform-template-literals" "^7.18.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-regex" "^7.18.6"
     "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.18.2"
-    babel-plugin-polyfill-corejs2 "^0.3.0"
-    babel-plugin-polyfill-corejs3 "^0.5.0"
-    babel-plugin-polyfill-regenerator "^0.3.0"
-    core-js-compat "^3.22.1"
+    "@babel/types" "^7.19.0"
+    babel-plugin-polyfill-corejs2 "^0.3.3"
+    babel-plugin-polyfill-corejs3 "^0.6.0"
+    babel-plugin-polyfill-regenerator "^0.4.1"
+    core-js-compat "^3.25.1"
     semver "^6.3.0"
 
 "@babel/preset-modules@^0.1.5":
@@ -983,44 +921,45 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.4":
-  version "7.18.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
-  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/template@^7.0.0", "@babel/template@^7.16.7", "@babel/template@^7.3.3":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
-  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+"@babel/template@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
   dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/parser" "^7.16.7"
-    "@babel/types" "^7.16.7"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.8", "@babel/traverse@^7.18.0", "@babel/traverse@^7.18.2", "@babel/traverse@^7.18.5", "@babel/traverse@^7.7.2":
-  version "7.18.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.5.tgz#94a8195ad9642801837988ab77f36e992d9a20cd"
-  integrity sha512-aKXj1KT66sBj0vVzk6rEeAO6Z9aiiQ68wfDgge3nHhA/my6xMM/7HGQUNumKZaoa2qUPQ5whJG9aAifsxUKfLA==
+"@babel/traverse@^7.19.0", "@babel/traverse@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.1.tgz#0fafe100a8c2a603b4718b1d9bf2568d1d193347"
+  integrity sha512-0j/ZfZMxKukDaag2PtOPDbwuELqIar6lLskVPPJDjXMXjfLb1Obo/1yjxIGqqAJrmfaTIY3z2wFLAQ7qSkLsuA==
   dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.18.2"
-    "@babel/helper-environment-visitor" "^7.18.2"
-    "@babel/helper-function-name" "^7.17.9"
-    "@babel/helper-hoist-variables" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/parser" "^7.18.5"
-    "@babel/types" "^7.18.4"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.1"
+    "@babel/types" "^7.19.0"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.18.0", "@babel/types@^7.18.2", "@babel/types@^7.18.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
-  version "7.18.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354"
-  integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==
+"@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.4.4":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.0.tgz#75f21d73d73dc0351f3368d28db73465f4814600"
+  integrity sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
 "@bcoe/v8-coverage@^0.2.3":
@@ -1028,19 +967,26 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@discoveryjs/json-ext@^0.5.0":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
-  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
+"@esbuild/android-arm@0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.8.tgz#52b094c98e415ec72fab39827c12f2051ac9c550"
+  integrity sha512-CyEWALmn+no/lbgbAJsbuuhT8s2J19EJGHkeyAwjbFJMrj80KJ9zuYsoAvidPTU7BgBf87r/sgae8Tw0dbOc4Q==
+  dependencies:
+    esbuild-wasm "0.15.8"
 
-"@eslint/eslintrc@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
-  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
+"@esbuild/linux-loong64@0.15.8":
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.8.tgz#d64575fc46bf4eb689352aa9f8a139271b6e1647"
+  integrity sha512-pE5RQsOTSERCtfZdfCT25wzo7dfhOSlhAXcsZmuvRYhendOv7djcdvtINdnDp2DAjP17WXlBB4nBO6sHLczmsg==
+
+"@eslint/eslintrc@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.2.tgz#58b69582f3b7271d8fa67fe5251767a5b38ea356"
+  integrity sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.3.2"
+    espree "^9.4.0"
     globals "^13.15.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -1048,415 +994,175 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.3.1.tgz#3dde0ad0724d4b730567c92f49f0950910e18871"
+  integrity sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==
+
+"@floating-ui/dom@^0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.1.10.tgz#ce304136a52c71ef157826d2ebf52d68fa2deed5"
+  integrity sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==
+  dependencies:
+    "@floating-ui/core" "^0.3.0"
+
 "@graphql-typed-document-node/core@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
   integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==
 
-"@hapi/hoek@^9.0.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
-  integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==
+"@headlessui/vue@^1.6.7":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@headlessui/vue/-/vue-1.7.2.tgz#da0bb42bcc3e21636f8621322115c3a93adf2331"
+  integrity sha512-nmmFpQxnAy6zgf5r0pwdAH3Qw2IsSbTgvkpov9RkEVE8A6aPAT4iaAaPEAzdI+sPL5Wby05mhciJXSqtkLu+vQ==
 
-"@hapi/topo@^5.0.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.1.0.tgz#dc448e332c6c6e37a4dc02fd84ba8d44b9afb012"
-  integrity sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==
+"@histoire/app@^0.10.7":
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/@histoire/app/-/app-0.10.7.tgz#772483b5a12f5efe9a98f6544f10949e54e2bfc5"
+  integrity sha512-EqVOjpDwhpO3UB3wXzEUbuOhUA5SIQ0KuxD34URDtE/o1Jp/qaG2yYuXGQ9b/ynBn84kNpz/Av6zOOG7s1GbyA==
   dependencies:
-    "@hapi/hoek" "^9.0.0"
+    "@histoire/controls" "^0.10.7"
+    "@histoire/shared" "^0.10.7"
+    "@histoire/vendors" "^0.10.7"
+    "@types/flexsearch" "^0.7.3"
+    flexsearch "^0.7.21"
+    shiki "0.10.1"
 
-"@humanwhocodes/config-array@^0.9.2":
-  version "0.9.5"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
-  integrity sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==
+"@histoire/controls@^0.10.7":
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/@histoire/controls/-/controls-0.10.7.tgz#1b27acbed15e5fd780a292a1b63cfe9c143998f0"
+  integrity sha512-sWrAzYoshKB5xlCKCkP+2ASjlOanoaxjVfRWumwfGtZD3vnDP22Our47A3BoDBbJiDTs0npqGZt5rX5vVZZlCg==
+  dependencies:
+    "@histoire/vendors" "^0.10.7"
+
+"@histoire/plugin-vue@^0.10.0":
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/@histoire/plugin-vue/-/plugin-vue-0.10.7.tgz#3c938f26f09c97d7cb2f9d6434d2915ceed92b63"
+  integrity sha512-PCh7YxD4ruF7accoEAs5fkU5Jn6Mml5zuoAp640a+OGp8yPB27WyPOMAgdnUTMuTNhDrO20/rNI67Jg1hu91JQ==
+  dependencies:
+    "@histoire/controls" "^0.10.7"
+    "@histoire/shared" "^0.10.7"
+    "@histoire/vendors" "^0.10.7"
+
+"@histoire/shared@^0.10.7":
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/@histoire/shared/-/shared-0.10.7.tgz#362225cf8dda7412522cb9f4bd7b35bf3717965e"
+  integrity sha512-0MVCaATlD3BCtlJ2f3xgIE3RZQpOBJ/1ZiQupwtpY2V3tNHd2TMPr5tCvwkAm3ka4DVyRooRUD4DZ8SHJMJClw==
+  dependencies:
+    "@types/fs-extra" "^9.0.13"
+    "@types/markdown-it" "^12.2.3"
+    chokidar "^3.5.3"
+    pathe "^0.2.0"
+    picocolors "^1.0.0"
+
+"@histoire/vendors@^0.10.7":
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/@histoire/vendors/-/vendors-0.10.7.tgz#bfb6e65261c1091b9f543b97cda6b359d3453948"
+  integrity sha512-nkZDw3XrNigIU0w5vez0eGxWJFODy6pw/WGmWUWeY3hDFCuVk2Z4ubtpZiBjjj7h3rbb5KYqobX1IAY7L8sJSA==
+
+"@humanwhocodes/config-array@^0.10.4":
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.4.tgz#01e7366e57d2ad104feea63e72248f22015c520c"
+  integrity sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
     minimatch "^3.0.4"
 
+"@humanwhocodes/gitignore-to-minimatch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz#316b0a63b91c10e53f242efb4ace5c3b34e8728d"
+  integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
 "@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@istanbuljs/load-nyc-config@^1.0.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
-  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+"@intlify/bundle-utils@next":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@intlify/bundle-utils/-/bundle-utils-3.1.2.tgz#9cd415c3e6a0643056175c375279f7ee0c42210d"
+  integrity sha512-amgSo0NN5OKWYdcgFmfJqo2tcUcZ6C66Bxm5ALQnB0m3MUQtS9aJzKoIo+EU9XQiOVmlBFxRtNoZm+psHa5FNA==
   dependencies:
-    camelcase "^5.3.1"
-    find-up "^4.1.0"
-    get-package-type "^0.1.0"
-    js-yaml "^3.13.1"
-    resolve-from "^5.0.0"
+    "@intlify/message-compiler" next
+    "@intlify/shared" next
+    jsonc-eslint-parser "^1.0.1"
+    source-map "0.6.1"
+    yaml-eslint-parser "^0.3.2"
 
-"@istanbuljs/schema@^0.1.2":
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
+  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+  dependencies:
+    "@intlify/devtools-if" "9.2.2"
+    "@intlify/message-compiler" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+
+"@intlify/devtools-if@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
+  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+
+"@intlify/message-compiler@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
+  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+    source-map "0.6.1"
+
+"@intlify/message-compiler@next":
+  version "9.3.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.3.0-beta.3.tgz#08eb89cf071dbdcadc861ecb2f2579f8e799445b"
+  integrity sha512-j8OwToBQgs01RBMX4GCDNQfcnmw3AiDG3moKIONTrfXcf+1yt/rWznLTYH/DXbKcFMAFijFpCzMYjUmH1jVFYA==
+  dependencies:
+    "@intlify/shared" "9.3.0-beta.3"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/shared@9.3.0-beta.3", "@intlify/shared@next":
+  version "9.3.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.3.0-beta.3.tgz#fce341eb6abbb6ec5efc8b6847f67050ed5ebaf5"
+  integrity sha512-Z/0TU4GhFKRxKh+0RbwJExik9zz57gXYgxSYaPn7YQdkQ/pabSioCY/SXnYxQHL6HzULF5tmqarFm6glbGqKhw==
+
+"@intlify/vite-plugin-vue-i18n@^6.0.0":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-6.0.1.tgz#6beaedc351b6a9fe37f9f23a43c200c56d2c34b6"
+  integrity sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==
+  dependencies:
+    "@intlify/bundle-utils" next
+    "@intlify/shared" next
+    "@rollup/pluginutils" "^4.2.0"
+    debug "^4.3.1"
+    fast-glob "^3.2.5"
+    source-map "0.6.1"
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
+  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+
+"@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
 
-"@jest/console@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.5.1.tgz#260fe7239602fe5130a94f1aa386eff54b014bba"
-  integrity sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    jest-message-util "^27.5.1"
-    jest-util "^27.5.1"
-    slash "^3.0.0"
-
-"@jest/console@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.1.1.tgz#305f8ca50b6e70413839f54c0e002b60a0f2fd7d"
-  integrity sha512-0RiUocPVFEm3WRMOStIHbRWllG6iW6E3/gUPnf4lkrVFyXIIDeCe+vlKeYyFOMhB2EPE6FLFCNADSOOQMaqvyA==
-  dependencies:
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
-    slash "^3.0.0"
-
-"@jest/core@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.5.1.tgz#267ac5f704e09dc52de2922cbf3af9edcd64b626"
-  integrity sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==
-  dependencies:
-    "@jest/console" "^27.5.1"
-    "@jest/reporters" "^27.5.1"
-    "@jest/test-result" "^27.5.1"
-    "@jest/transform" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    emittery "^0.8.1"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    jest-changed-files "^27.5.1"
-    jest-config "^27.5.1"
-    jest-haste-map "^27.5.1"
-    jest-message-util "^27.5.1"
-    jest-regex-util "^27.5.1"
-    jest-resolve "^27.5.1"
-    jest-resolve-dependencies "^27.5.1"
-    jest-runner "^27.5.1"
-    jest-runtime "^27.5.1"
-    jest-snapshot "^27.5.1"
-    jest-util "^27.5.1"
-    jest-validate "^27.5.1"
-    jest-watcher "^27.5.1"
-    micromatch "^4.0.4"
-    rimraf "^3.0.0"
-    slash "^3.0.0"
-    strip-ansi "^6.0.0"
-
-"@jest/core@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-28.1.1.tgz#086830bec6267accf9af5ca76f794858e9f9f092"
-  integrity sha512-3pYsBoZZ42tXMdlcFeCc/0j9kOlK7MYuXs2B1QbvDgMoW1K9NJ4G/VYvIbMb26iqlkTfPHo7SC2JgjDOk/mxXw==
-  dependencies:
-    "@jest/console" "^28.1.1"
-    "@jest/reporters" "^28.1.1"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    jest-changed-files "^28.0.2"
-    jest-config "^28.1.1"
-    jest-haste-map "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.1"
-    jest-resolve-dependencies "^28.1.1"
-    jest-runner "^28.1.1"
-    jest-runtime "^28.1.1"
-    jest-snapshot "^28.1.1"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
-    jest-watcher "^28.1.1"
-    micromatch "^4.0.4"
-    pretty-format "^28.1.1"
-    rimraf "^3.0.0"
-    slash "^3.0.0"
-    strip-ansi "^6.0.0"
-
-"@jest/environment@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.5.1.tgz#d7425820511fe7158abbecc010140c3fd3be9c74"
-  integrity sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==
-  dependencies:
-    "@jest/fake-timers" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    jest-mock "^27.5.1"
-
-"@jest/environment@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-28.1.1.tgz#c4cbf85283278d768f816ebd1a258ea6f9e39d4f"
-  integrity sha512-9auVQ2GzQ7nrU+lAr8KyY838YahElTX9HVjbQPPS2XjlxQ+na18G113OoBhyBGBtD6ZnO/SrUy5WR8EzOj1/Uw==
-  dependencies:
-    "@jest/fake-timers" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    jest-mock "^28.1.1"
-
-"@jest/expect-utils@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-28.1.1.tgz#d84c346025b9f6f3886d02c48a6177e2b0360587"
-  integrity sha512-n/ghlvdhCdMI/hTcnn4qV57kQuV9OTsZzH1TTCVARANKhl6hXJqLKUkwX69ftMGpsbpt96SsDD8n8LD2d9+FRw==
-  dependencies:
-    jest-get-type "^28.0.2"
-
-"@jest/expect@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-28.1.1.tgz#ea4fcc8504b45835029221c0dc357c622a761326"
-  integrity sha512-/+tQprrFoT6lfkMj4mW/mUIfAmmk/+iQPmg7mLDIFOf2lyf7EBHaS+x3RbeR0VZVMe55IvX7QRoT/2aK3AuUXg==
-  dependencies:
-    expect "^28.1.1"
-    jest-snapshot "^28.1.1"
-
-"@jest/fake-timers@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.5.1.tgz#76979745ce0579c8a94a4678af7a748eda8ada74"
-  integrity sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    "@sinonjs/fake-timers" "^8.0.1"
-    "@types/node" "*"
-    jest-message-util "^27.5.1"
-    jest-mock "^27.5.1"
-    jest-util "^27.5.1"
-
-"@jest/fake-timers@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-28.1.1.tgz#47ce33296ab9d680c76076d51ddbe65ceb3337f1"
-  integrity sha512-BY/3+TyLs5+q87rGWrGUY5f8e8uC3LsVHS9Diz8+FV3ARXL4sNnkLlIB8dvDvRrp+LUCGM+DLqlsYubizGUjIA==
-  dependencies:
-    "@jest/types" "^28.1.1"
-    "@sinonjs/fake-timers" "^9.1.1"
-    "@types/node" "*"
-    jest-message-util "^28.1.1"
-    jest-mock "^28.1.1"
-    jest-util "^28.1.1"
-
-"@jest/globals@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.5.1.tgz#7ac06ce57ab966566c7963431cef458434601b2b"
-  integrity sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==
-  dependencies:
-    "@jest/environment" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    expect "^27.5.1"
-
-"@jest/globals@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-28.1.1.tgz#c0a7977f85e26279cc090d9adcdf82b8a34c4061"
-  integrity sha512-dEgl/6v7ToB4vXItdvcltJBgny0xBE6xy6IYQrPJAJggdEinGxCDMivNv7sFzPcTITGquXD6UJwYxfJ/5ZwDSg==
-  dependencies:
-    "@jest/environment" "^28.1.1"
-    "@jest/expect" "^28.1.1"
-    "@jest/types" "^28.1.1"
-
-"@jest/reporters@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.5.1.tgz#ceda7be96170b03c923c37987b64015812ffec04"
-  integrity sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==
-  dependencies:
-    "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^27.5.1"
-    "@jest/test-result" "^27.5.1"
-    "@jest/transform" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.2"
-    graceful-fs "^4.2.9"
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^5.1.0"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.1.3"
-    jest-haste-map "^27.5.1"
-    jest-resolve "^27.5.1"
-    jest-util "^27.5.1"
-    jest-worker "^27.5.1"
-    slash "^3.0.0"
-    source-map "^0.6.0"
-    string-length "^4.0.1"
-    terminal-link "^2.0.0"
-    v8-to-istanbul "^8.1.0"
-
-"@jest/reporters@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-28.1.1.tgz#9389f4bb3cce4d9b586f6195f83c79cd2a1c8662"
-  integrity sha512-597Zj4D4d88sZrzM4atEGLuO7SdA/YrOv9SRXHXRNC+/FwPCWxZhBAEzhXoiJzfRwn8zes/EjS8Lo6DouGN5Gg==
-  dependencies:
-    "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^28.1.1"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@jridgewell/trace-mapping" "^0.3.7"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^5.1.0"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.1.3"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
-    jest-worker "^28.1.1"
-    slash "^3.0.0"
-    string-length "^4.0.1"
-    strip-ansi "^6.0.0"
-    terminal-link "^2.0.0"
-    v8-to-istanbul "^9.0.0"
-
-"@jest/schemas@^28.0.2":
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.0.2.tgz#08c30df6a8d07eafea0aef9fb222c5e26d72e613"
-  integrity sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==
-  dependencies:
-    "@sinclair/typebox" "^0.23.3"
-
-"@jest/source-map@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.5.1.tgz#6608391e465add4205eae073b55e7f279e04e8cf"
-  integrity sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==
-  dependencies:
-    callsites "^3.0.0"
-    graceful-fs "^4.2.9"
-    source-map "^0.6.0"
-
-"@jest/source-map@^28.0.2":
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-28.0.2.tgz#914546f4410b67b1d42c262a1da7e0406b52dc90"
-  integrity sha512-Y9dxC8ZpN3kImkk0LkK5XCEneYMAXlZ8m5bflmSL5vrwyeUpJfentacCUg6fOb8NOpOO7hz2+l37MV77T6BFPw==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.7"
-    callsites "^3.0.0"
-    graceful-fs "^4.2.9"
-
-"@jest/test-result@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.5.1.tgz#56a6585fa80f7cdab72b8c5fc2e871d03832f5bb"
-  integrity sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==
-  dependencies:
-    "@jest/console" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
-
-"@jest/test-result@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.1.1.tgz#c6f18d1bbb01aa88925dd687872a75f8414b317a"
-  integrity sha512-hPmkugBktqL6rRzwWAtp1JtYT4VHwv8OQ+9lE5Gymj6dHzubI/oJHMUpPOt8NrdVWSrz9S7bHjJUmv2ggFoUNQ==
-  dependencies:
-    "@jest/console" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
-
-"@jest/test-sequencer@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz#4057e0e9cea4439e544c6353c6affe58d095745b"
-  integrity sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==
-  dependencies:
-    "@jest/test-result" "^27.5.1"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^27.5.1"
-    jest-runtime "^27.5.1"
-
-"@jest/test-sequencer@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-28.1.1.tgz#f594ee2331df75000afe0d1ae3237630ecec732e"
-  integrity sha512-nuL+dNSVMcWB7OOtgb0EGH5AjO4UBCt68SLP08rwmC+iRhyuJWS9MtZ/MpipxFwKAlHFftbMsydXqWre8B0+XA==
-  dependencies:
-    "@jest/test-result" "^28.1.1"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
-    slash "^3.0.0"
-
-"@jest/transform@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.5.1.tgz#6c3501dcc00c4c08915f292a600ece5ecfe1f409"
-  integrity sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/types" "^27.5.1"
-    babel-plugin-istanbul "^6.1.1"
-    chalk "^4.0.0"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^27.5.1"
-    jest-regex-util "^27.5.1"
-    jest-util "^27.5.1"
-    micromatch "^4.0.4"
-    pirates "^4.0.4"
-    slash "^3.0.0"
-    source-map "^0.6.1"
-    write-file-atomic "^3.0.0"
-
-"@jest/transform@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-28.1.1.tgz#83541f2a3f612077c8501f49cc4e205d4e4a6b27"
-  integrity sha512-PkfaTUuvjUarl1EDr5ZQcCA++oXkFCP9QFUkG0yVKVmNObjhrqDy0kbMpMebfHWm3CCDHjYNem9eUSH8suVNHQ==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    "@jest/types" "^28.1.1"
-    "@jridgewell/trace-mapping" "^0.3.7"
-    babel-plugin-istanbul "^6.1.1"
-    chalk "^4.0.0"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
-    jest-regex-util "^28.0.2"
-    jest-util "^28.1.1"
-    micromatch "^4.0.4"
-    pirates "^4.0.4"
-    slash "^3.0.0"
-    write-file-atomic "^4.0.1"
-
-"@jest/types@^27.5.1":
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.5.1.tgz#3c79ec4a8ba61c170bf937bcf9e98a9df175ec80"
-  integrity sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^16.0.0"
-    chalk "^4.0.0"
-
-"@jest/types@^28.1.1":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.1.tgz#d059bbc80e6da6eda9f081f293299348bd78ee0b"
-  integrity sha512-vRXVqSg1VhDnB8bWcmvLzmg0Bt9CRKVgHPXqYwvWMX3TvAjeO+nRuK6+VdTKCtWOvYlmkF/HqNAL/z+N3B53Kw==
-  dependencies:
-    "@jest/schemas" "^28.0.2"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
-    "@types/node" "*"
-    "@types/yargs" "^17.0.8"
-    chalk "^4.0.0"
-
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
@@ -1465,24 +1171,24 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/gen-mapping@^0.3.0":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz#cf92a983c83466b8c0ce9124fadeaf09f7c66ea9"
-  integrity sha512-GcHwniMlA2z+WFPWuY8lp3fsza0I8xPFMWL5+n8LYyP6PSvPrXf4+n8stDHZY2DM0zy9sVkRDy1jDI4XGzYVqg==
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
   dependencies:
-    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/set-array" "^1.0.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
 "@jridgewell/resolve-uri@^3.0.3":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
-  integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
-"@jridgewell/set-array@^1.0.0":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea"
-  integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==
+"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
 "@jridgewell/source-map@^0.3.2":
   version "0.3.2"
@@ -1493,14 +1199,14 @@
     "@jridgewell/trace-mapping" "^0.3.9"
 
 "@jridgewell/sourcemap-codec@^1.4.10":
-  version "1.4.13"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
-  integrity sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/trace-mapping@^0.3.7", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.13"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea"
-  integrity sha512-o1xbKhp9qnIAoHJSWd6KlCZfqslL4valSF81H8ImioOAxluWYWOpWkpyktY2vnt4tbrX9XYaxovq6cgowaJp2w==
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
+  integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
   dependencies:
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -1534,23 +1240,6 @@
     core-js "2.6.0"
     graphql "14.0.2"
 
-"@leichtgewicht/ip-codec@^2.0.1":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
-  integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
-
-"@mdi/font@^6.1.95":
-  version "6.7.96"
-  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-6.7.96.tgz#1686425ba291b90ea02a87292a565c6d0c854afe"
-  integrity sha512-M68vlRhtmA/SpDjo2dV3SUZus20jrU9Zp2ggslfzh0cbFpygPukcVpBIA3pErwsukhYt4RfbgXpFi74SjixOrQ==
-
-"@node-ipc/js-queue@2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@node-ipc/js-queue/-/js-queue-2.0.3.tgz#ac7fe33d766fa53e233ef8fedaf3443a01c5a4cd"
-  integrity sha512-fL1wpr8hhD5gT2dA1qifeVaoDFlQR5es8tFuKqjHX+kdOtdNHnxkVZbtIrR2rxnMFvehkjaZRNV2H/gPXlb0hw==
-  dependencies:
-    easy-stack "1.0.1"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1572,15 +1261,28 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@oruga-ui/oruga-next@^0.5.5":
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@oruga-ui/oruga-next/-/oruga-next-0.5.6.tgz#6fe35fea6841c255aede105f659ebebafa5b2ab6"
+  integrity sha512-LpBtKBj9Aj5YogoIpem9dv0c/OFQsgJwE2mKs5GAoqoyGY0XkqkdA3J/BL3E+q1lv8ueSJlac2jno3PZLlOp6A==
+
+"@playwright/test@^1.25.1":
+  version "1.25.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.25.2.tgz#e726cf4844f096315c3954fdb3abf295cede43ba"
+  integrity sha512-6qPznIR4Fw02OMbqXUPMG6bFFg1hDVNEdihKy0t9K0dmRbus1DyP5Q5XFQhGwEHQkLG5hrSfBuu9CW/foqhQHQ==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.25.2"
+
 "@polka/url@^1.0.0-next.20":
   version "1.0.0-next.21"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
 "@popperjs/core@^2.9.0":
-  version "2.11.5"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
-  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
@@ -1619,132 +1321,82 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rushstack/eslint-patch@^1.1.0":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
-  integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
-
-"@sentry/browser@7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.1.1.tgz#2d1fe4a81e0d9679aa73c5ae69a0958e4e42b422"
-  integrity sha512-5AQvStZ+nOP/yxsBmeMZpeGLVtuOgnCNvswKd/c1CJwNw7bDmCE4TQeNKp1C3Gb7lSdBk8ViwUKn0ZpoVQ5MTw==
+"@rollup/pluginutils@^4.2.0":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
   dependencies:
-    "@sentry/core" "7.1.1"
-    "@sentry/types" "7.1.1"
-    "@sentry/utils" "7.1.1"
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
+"@rushstack/eslint-patch@^1.1.4":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
+  integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
+
+"@sentry/browser@7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.13.0.tgz#883b8598c8a0c33af246242e7172e39306dc564a"
+  integrity sha512-WbgClHPYe8TKsdVVbuzd6alxwh3maFQNuljMkSTnYvPx2P+NT0wHljTs37D39FGfSmAwaqn7D/1ZHAtC+6mWxA==
+  dependencies:
+    "@sentry/core" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
     tslib "^1.9.3"
 
-"@sentry/core@7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.1.1.tgz#85f73f8037eec61e37549998de03a6d3d3c635b5"
-  integrity sha512-SADdAoG5u1LTJhPN5KPtn5HHmH6r0mr6h2LokuZnhj6/okrAuCIIKOb6Fh8jV7j2VuABvew8+FjJHORxi7D/3Q==
+"@sentry/core@7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.13.0.tgz#65597d71f8bfa1186f34009803e03ca9edb3adee"
+  integrity sha512-hB46fklmKrSDMEvZOF8qBHhys7PONBFyxQtbNDZUlv/kabs4gF3VEg1ftCaXnjx4lLNlsUl/ScFdM6194RvISg==
   dependencies:
-    "@sentry/hub" "7.1.1"
-    "@sentry/types" "7.1.1"
-    "@sentry/utils" "7.1.1"
+    "@sentry/hub" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
     tslib "^1.9.3"
 
-"@sentry/hub@7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.1.1.tgz#d6aa54e7bd20a71cebd602701dd29d5d581d391a"
-  integrity sha512-ASsRVjYDIii6ZTf36JnIYKHWBQBk0P42Tgq324MpyPgaeVDg3saBcyXO5iAtWvY6Vmdi2H4JCVDoir2Zz3Me1w==
+"@sentry/hub@7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.13.0.tgz#752068e528cfb277ed154bc94e311cad50ef792e"
+  integrity sha512-88/GsD1BoyrBwRKJCmVHZtSH5rizOsImUHWEXc1AOa1aR8nanfn56JdAbd6tC55pA+nT4R4H4vN/PrUaomTbtg==
   dependencies:
-    "@sentry/types" "7.1.1"
-    "@sentry/utils" "7.1.1"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
     tslib "^1.9.3"
 
 "@sentry/tracing@^7.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.1.1.tgz#8996c0913803d3c4a103388c9c0dd2410cca8478"
-  integrity sha512-MJ+EPGfvPlgbJOcZRoIl6+Oi0oRE2nIi/HP2BPJSKGxXFi2Y09bcZUwfxOH8fkUa465jOGBFdCm+sXcbyExvuw==
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.13.0.tgz#521dc021dab78e37e29b0f90b01cb444337adfc4"
+  integrity sha512-/MKSd25rGv6Pc0FPBLXJifkfvSaYVPA8XUOLzVeDN0gl07h8AXli4qG9amTh/4Wb5h4dFpbcscOvW2VC+pxkIA==
   dependencies:
-    "@sentry/hub" "7.1.1"
-    "@sentry/types" "7.1.1"
-    "@sentry/utils" "7.1.1"
+    "@sentry/hub" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
     tslib "^1.9.3"
 
-"@sentry/types@7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.1.1.tgz#63aa68e7be36d63cc305d01af9119a4cdb186ae3"
-  integrity sha512-5N1UMd2SqvUXprcIUMyDEju3H9lJY2oWfWQBGo0lG6Amn/lGAPAYlchg+4vQCLutDQMyd8K9zPwcbKn4u6gHdw==
+"@sentry/types@7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.13.0.tgz#398e33e5c92ea0ce91e2c86e3ab003fe00c471a2"
+  integrity sha512-ttckM1XaeyHRLMdr79wmGA5PFbTGx2jio9DCD/mkEpSfk6OGfqfC7gpwy7BNstDH/VKyQj/lDCJPnwvWqARMoQ==
 
-"@sentry/utils@7.1.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.1.1.tgz#7174a1439f8970510207fa7587385119397e1718"
-  integrity sha512-DPRHDf3InfyVgmxToE4Z+AATAR4OVm+wsXDLFGGyncR91CE1x4wLQKOcAJJwX3F0Hz1VHENfmx1DvyYTHOrC/A==
+"@sentry/utils@7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.13.0.tgz#0d47a9278806ece78ba3a83c7dbebce817462759"
+  integrity sha512-jnR85LgRLSk7IQe2OhKOPMY4fasJCNQNW0iCXsH+S2R1qnsF+N4ksNkQ+7JyyM9E7F03YpI2qd76bKY0VIn5iA==
   dependencies:
-    "@sentry/types" "7.1.1"
+    "@sentry/types" "7.13.0"
     tslib "^1.9.3"
 
 "@sentry/vue@^7.1":
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/@sentry/vue/-/vue-7.1.1.tgz#7f16371649bb466a510b34596c6855a5c4f1e988"
-  integrity sha512-fEzM3//TnVdfVq9iZg8EXjPteehJtEPKaNh6IXzvMnAt6UjyyNMYCziObP/bBwMdmuDDkt1QuM7TqihlD33Y9w==
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@sentry/vue/-/vue-7.13.0.tgz#4cefb061af3bacbc6f3cd9c287af762dad1ab74d"
+  integrity sha512-+OP0h4hE8Gz8xwN3rcHrbQpqhNQGQJoM8f7cOPw7TU7TCXj4apMsR4o5xPVlvSZl3TG0J9SBUPrZdd0Va9gptw==
   dependencies:
-    "@sentry/browser" "7.1.1"
-    "@sentry/core" "7.1.1"
-    "@sentry/types" "7.1.1"
-    "@sentry/utils" "7.1.1"
+    "@sentry/browser" "7.13.0"
+    "@sentry/core" "7.13.0"
+    "@sentry/types" "7.13.0"
+    "@sentry/utils" "7.13.0"
     tslib "^1.9.3"
 
-"@sideway/address@^4.1.3":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
-  integrity sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-
-"@sideway/formula@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c"
-  integrity sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg==
-
-"@sideway/pinpoint@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
-  integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
-
-"@sinclair/typebox@^0.23.3":
-  version "0.23.5"
-  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
-  integrity sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg==
-
-"@sinonjs/commons@^1.7.0":
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
-  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
-  dependencies:
-    type-detect "4.0.8"
-
-"@sinonjs/fake-timers@^8.0.1":
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz#3fdc2b6cb58935b21bfb8d1625eb1300484316e7"
-  integrity sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
-"@sinonjs/fake-timers@^9.1.1":
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-9.1.2.tgz#4eaab737fab77332ab132d396a3c0d364bd0ea8c"
-  integrity sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
-"@soda/friendly-errors-webpack-plugin@^1.8.0":
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz#4d4fbb1108993aaa362116247c3d18188a2c6c85"
-  integrity sha512-h2ooWqP8XuFqTXT+NyAFbrArzfQA7R6HTezADrvD9Re8fxMLTPPniLdqVTdDaO0eIoLaAwKT+d6w+5GeTk7Vbg==
-  dependencies:
-    chalk "^3.0.0"
-    error-stack-parser "^2.0.6"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-
-"@soda/get-current-script@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@soda/get-current-script/-/get-current-script-1.0.2.tgz#a53515db25d8038374381b73af20bb4f2e508d87"
-  integrity sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==
-
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -1755,360 +1407,258 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@tailwindcss/forms@^0.5.2":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.3.tgz#e4d7989686cbcaf416c53f1523df5225332a86e7"
+  integrity sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@tailwindcss/line-clamp@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz#03353e31e77636b785f2336e8c978502cec1de81"
-  integrity sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
+  integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
+
+"@tailwindcss/typography@^0.5.4":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.7.tgz#e0b95bea787ee14c5a34a74fc824e6fe86ea8855"
+  integrity sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
 
 "@tiptap/core@^2.0.0-beta.41":
-  version "2.0.0-beta.179"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.0-beta.179.tgz#2791604b413e9f263f9868dc41a9160a5e41bd41"
-  integrity sha512-weJKZ761+PCimMCSLILsN4IodEGPmnsu+stD+MkUTJSKAp/nCDH0FcIgq80FOF7+TMqRHXWuGoeHf9GSvSMZHQ==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.0.0-beta.195.tgz#a64480e4dca1a9bc7aea3be4acccc71e535da4fe"
+  integrity sha512-swKhXpNrvAAg3FphmUb5mR4Dz96cuTlv0HArAB+xB2m0FzLxy3QBPgLQyju4me6IJOrqJtBZ57trgF6JP+ZW0g==
   dependencies:
-    "@types/prosemirror-commands" "^1.0.4"
-    "@types/prosemirror-keymap" "^1.0.4"
-    "@types/prosemirror-model" "^1.16.0"
-    "@types/prosemirror-schema-list" "^1.0.3"
-    "@types/prosemirror-state" "^1.2.8"
-    "@types/prosemirror-transform" "^1.1.5"
-    "@types/prosemirror-view" "^1.23.1"
-    prosemirror-commands "^1.2.1"
-    prosemirror-keymap "^1.1.5"
-    prosemirror-model "^1.16.1"
-    prosemirror-schema-list "^1.1.6"
-    prosemirror-state "^1.3.4"
-    prosemirror-transform "^1.3.3"
-    prosemirror-view "^1.23.6"
+    prosemirror-commands "1.3.0"
+    prosemirror-keymap "1.2.0"
+    prosemirror-model "1.18.1"
+    prosemirror-schema-list "1.2.0"
+    prosemirror-state "1.4.1"
+    prosemirror-transform "1.6.0"
+    prosemirror-view "1.26.2"
 
 "@tiptap/extension-blockquote@^2.0.0-beta.25":
-  version "2.0.0-beta.29"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.29.tgz#6f1c4b17efa6457c7776f32d0807e96d848d4389"
-  integrity sha512-zMYT5TtpKWav9VhTn4JLyMvXmhEdbD6on0MdhcTjRm0I5ugyR4ZbJwh2aelM7G9DZVYzB8jZU18OSDJmo7Af7w==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.195.tgz#ac4188eca06e9596af1c5393efa74e529464bfeb"
+  integrity sha512-vPVWahbyap46W0O892ejZ5v4+X8i8lKtuxC+50QBeQWZBtqgxkwAeMmJTN3Oh+Y1fngoJFoprRgLHol0BHBE+Q==
 
 "@tiptap/extension-bold@^2.0.0-beta.24":
-  version "2.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.28.tgz#cf67c264a80434ffb2368f3dd37cf357ae0c2064"
-  integrity sha512-DY8GOzw9xjmTFrnvTbgHUNxTnDfKrkDgrhe0SUvdkT2udntWp8umPdhPiD3vczLgHOJw6tX68qMRjbsR1ZPcHQ==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.195.tgz#aa7c88860d825b0460ce38d73ea2546717f16fc8"
+  integrity sha512-LD1xd5B0VYQ+6rmeb7weSziPcTcKlSGTftU7sEfR02LgDfkI4qEN/Km6madNVItwO++qceCIaDfVazRSGfZU3A==
 
-"@tiptap/extension-bubble-menu@^2.0.0-beta.56", "@tiptap/extension-bubble-menu@^2.0.0-beta.9":
-  version "2.0.0-beta.59"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.59.tgz#48f5b5813f59e2d6978f8f7a3f2600b87abc6e55"
-  integrity sha512-CMLBFj5uoxMH7jCGMcZXWfuShgyFVGXpW/PiLmr2LpB/yFAZparf43DpSe1knyQXtt2UUQcqWxvVDRag06kPvA==
+"@tiptap/extension-bubble-menu@^2.0.0-beta.195", "@tiptap/extension-bubble-menu@^2.0.0-beta.9":
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.195.tgz#9d2840d93ac3097bd627fa0a354c09289693b53d"
+  integrity sha512-c255QZCGylFAtZrF56Qsh0FB88OjnVIM/xohgs+PSWZN8h0aR1GIa6V6/cJDIxw4hbarI/7zi+GOraQRbvbzIA==
   dependencies:
-    prosemirror-state "^1.3.4"
-    prosemirror-view "^1.23.6"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
     tippy.js "^6.3.7"
 
 "@tiptap/extension-bullet-list@^2.0.0-beta.23":
-  version "2.0.0-beta.29"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.29.tgz#640883e4fffc1a86c7cbd78792688e7edee5ee41"
-  integrity sha512-R8VB2l1ZB6VeGWx/t/04nBS5Wg3qjIDEZCpPihj2fccJOw99Lu0Ub2UJg/SfdGmeNNpBh4ZYYFv1g/XjyzlXKg==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.195.tgz#fa67e34b84304dad94f9d259ae843b8244b8a99e"
+  integrity sha512-vIlUUaVVVBavlSSUT/kFF1G8yHRbIHlGEPYH0MICiIEaMHk0PZsg2WZjg+iOP7SsBRNI7k7iLSx73jA2+D/RpA==
 
 "@tiptap/extension-document@^2.0.0-beta.15":
-  version "2.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.0-beta.17.tgz#ded4182dd860762bcf41c588f712d83908c472a3"
-  integrity sha512-L6sg0FNchbtIpQkCSjMmItVGs3/vep8Fq56WRtDc1wBSGUSmtHaxQG7F2FZLnNIUMuvzVMRD81m2vYG73WkY6A==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.0.0-beta.195.tgz#213f91a981e258091396dbe090ccdce9ec31efb6"
+  integrity sha512-0LSOYXBQhjKZO0Ucdk7CZXR9Q0nd0V7Vt70ppb48UamqQGINjaQWOYQ2gzjdNRtmMsDw/YSBy/evDhLaqDeT1A==
 
 "@tiptap/extension-dropcursor@^2.0.0-beta.25":
-  version "2.0.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.27.tgz#5ce254de05bd75537e963384520954fcad09206e"
-  integrity sha512-FMzKIU21YS+M4LCEcCeNkkOUBNI/OlXTQtg6QYioerUYnamfGjU9fR6865gporiVmS+B9yyglFhZpBVcKQuprw==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.195.tgz#6ea9104103f8f68374c0749fb80cdb8edaa3e18b"
+  integrity sha512-Dd84daHPJ2nn15gEf7n4dDEDCTCOGfaZr7dA7lXhJz8P5OU2gQ1tboSPDxPPzwbnSJ3C4U+zngfVA1ZsbO7ARQ==
   dependencies:
-    "@types/prosemirror-dropcursor" "^1.0.3"
-    prosemirror-dropcursor "^1.4.0"
+    prosemirror-dropcursor "1.5.0"
 
-"@tiptap/extension-floating-menu@^2.0.0-beta.51":
-  version "2.0.0-beta.54"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.54.tgz#c0bd12477f3440dcb1a1d54f49e7d77e7b854923"
-  integrity sha512-uAXIho0xuSFl8ZIlwdHM2uMNonq4l6X9Kwr17qafCFvO1CjgDUfo/hnMTV8i46AzPCoxLSAh8BQSd6FYTuuRhw==
+"@tiptap/extension-floating-menu@^2.0.0-beta.195":
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.195.tgz#8ae1c1390413342591579088f4f9c4d3c038a18f"
+  integrity sha512-Edc0Cq02Y4HnI0gGJOBR8ZHNoLuTPRWTMxTaQt7fQchdx3bnNlxDw1X0R8hTD+esuGt085aHQjdRywTIsGKjdA==
   dependencies:
-    prosemirror-state "^1.3.4"
-    prosemirror-view "^1.23.6"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
     tippy.js "^6.3.7"
 
 "@tiptap/extension-gapcursor@^2.0.0-beta.33":
-  version "2.0.0-beta.37"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.37.tgz#21421410d100136fa3249517ebc33663a56ac51b"
-  integrity sha512-0oRpJh5wdPnCrB9Y4T7IqZs6ZyB4YtOKaZiATHoLCl+1uHW1BtqBkrIO2+zvSwjwFZ6kL7q95JuBlFZ2oP8EBA==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.195.tgz#8103308003fe74702f39c06670ccba96e688e1d5"
+  integrity sha512-e00fHxbA1TPYnpO6zHXyhzBefz93nZRyAi8N1/w2kXXB7rCRYMLhnSEAky29CLk+3H1xERdH7dfQYtRZke+CGA==
   dependencies:
-    "@types/prosemirror-gapcursor" "^1.0.4"
-    prosemirror-gapcursor "^1.2.1"
+    prosemirror-gapcursor "1.3.0"
 
 "@tiptap/extension-heading@^2.0.0-beta.23":
-  version "2.0.0-beta.29"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.29.tgz#d017d216c0fd1962c266f6f61a335093f9749862"
-  integrity sha512-q92jYcsT5bPhvuQaB0h44Z9r+Ii22tDYo082KMVnR4+tknHT/3xx+p4JC8KHjh+/5W8Quyafqy6mS8L8VX0zsQ==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.195.tgz#2326bcfefe6bf6287e24ce8d3a4f7b643ef2f90d"
+  integrity sha512-9nvsrmcSvWxPNLwc4Tp0/Zm/HnggIziaiWQAMfZ84nGGlaO7EAI+n6R06m1g+iUo0r5s68fP7+bUkeg0ItAh6g==
 
 "@tiptap/extension-history@^2.0.0-beta.21":
-  version "2.0.0-beta.24"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.0-beta.24.tgz#39843e04f57f0bee9dbc77393138e5df99d488fc"
-  integrity sha512-K45Lg4lKUdvFTU5i8prFkBBJxt8s512bYT3JpLN4pVbbQc4znw/GzfIbS0pm0AiMylrwLdx7ynx96tGYBPPgIA==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.0.0-beta.195.tgz#3ced1c47e1bf588949e6ec0484679a95bef262e8"
+  integrity sha512-MXxjsKFlKI0E2iAD4Ij902cIP+/+AngRXBfGH21+DxSUQtvfDf/4UWI2SLwRYk7Y7/5ySlVufuCxoMB2gMQmTA==
   dependencies:
-    "@types/prosemirror-history" "^1.0.3"
-    prosemirror-history "^1.2.0"
+    prosemirror-history "1.3.0"
 
 "@tiptap/extension-image@^2.0.0-beta.6":
-  version "2.0.0-beta.30"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.0.0-beta.30.tgz#60c6cfd09bfd017a3d8b1feaf0931462ffd71a60"
-  integrity sha512-VhEmgiKkZMiKR7hbpJgIlIUS/QNjSGI5ER7mKDAbuV1IB5yb6nGjZ6o3Exrr2/CaTaW5hQarBC1z2Xgdu05EGg==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.0.0-beta.195.tgz#4366f9cde0ede67c18e875b3ec774ca211a762c0"
+  integrity sha512-apLDpNgUhE1NA3Z200wS0e5xugF8GP1l9Yo8b635sJPx2yGBDbTUrTeK8Hfa41aDY2fMDYD8BjsUN/xytC3OQQ==
 
 "@tiptap/extension-italic@^2.0.0-beta.24":
-  version "2.0.0-beta.28"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.28.tgz#bf88ecae64c8f2f69f1f508b802c1efd7454a84e"
-  integrity sha512-/pKRiCfewh7nqiXRD3N4hQHfGrGNOiWPFYZfY35bSpvTms7PDb/MF7xT1CWW23hSpY31BBS+R/a66vlR/gqu7Q==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.195.tgz#2601ebdc68e6bfd9de9d842e749f8190c48f4f1c"
+  integrity sha512-SQUUR4kmvD0OserEXuuVxi1it1VS2Rpum0lreHbeORhS78SDzMxgLWpcoLhSylFP4i+kNPTuc2osDz23U9JY0w==
 
 "@tiptap/extension-link@^2.0.0-beta.8":
-  version "2.0.0-beta.41"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.0.0-beta.41.tgz#9061c983fa4d7c4f8a9b677f3f2d9e5e1de59c65"
-  integrity sha512-nT4x5+eFg9d6ERDNF4RNb4ZKjWqDQj6BYfJvSLWEa+EEtTsTi9eiyj1GdXmYftUqazY2LknxdgzLcoiz24Kbwg==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.0.0-beta.195.tgz#740bea478dca21c6a37ea13a9d51d2f2b1961b7d"
+  integrity sha512-PUoaV6HIEzPzHtqZawa0G1jcu2gDMEtfxqqmMVx9P7PWv5FH62TQ97pzN5YOGCqHvn/EhxXL0VidhJu4ACFR+g==
   dependencies:
     linkifyjs "^3.0.5"
-    prosemirror-model "^1.16.1"
-    prosemirror-state "^1.3.4"
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
 
 "@tiptap/extension-list-item@^2.0.0-beta.19":
-  version "2.0.0-beta.23"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.23.tgz#6d1ac7235462b0bcee196f42bb1871669480b843"
-  integrity sha512-AkzvdELz3ZnrlZM0r9+ritBDOnAjXHR/8zCZhW0ZlWx4zyKPMsNG5ygivY+xr4QT65NEGRT8P8b2zOhXrMjjMQ==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.195.tgz#4382e0a05f2184f06ad932fd3974dd213f002d08"
+  integrity sha512-6bxPpzufzr/BOd3XX9T6qfvzeXNLCetdmevstuNtce3PACisdsWSJ6mIUl8SuyOaE3rWFYb3eEuKjbpwr5f9Yw==
 
 "@tiptap/extension-mention@^2.0.0-beta.42":
-  version "2.0.0-beta.97"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.0.0-beta.97.tgz#29766057b4fed4621744af671053246bc6d9f69c"
-  integrity sha512-XjcK9bdkFDutMlclwJA6e7Rl0hLOgz5gmye9zGwnJcHpkjiUE6GAG5wZcHifRbvb3uhoxFAlVoJjHQ99QS0dwA==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.0.0-beta.195.tgz#9b4effd843cae168991257d58f2cbef85170fbec"
+  integrity sha512-hTGRMHdue01/MospM80SVgkWFbd+NoZkOXhjXWMKTFxCmgqI1TrIJoBgE0E7uuZ9IglWh7HFvDP49RBTVnAJRQ==
   dependencies:
-    "@tiptap/suggestion" "^2.0.0-beta.92"
-    prosemirror-model "^1.16.1"
-    prosemirror-state "^1.3.4"
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
 
 "@tiptap/extension-ordered-list@^2.0.0-beta.24":
-  version "2.0.0-beta.30"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.30.tgz#1f656b664302d90272c244b2e478d7056203f2a8"
-  integrity sha512-GRxGQdq1u0Rp5N8TjthCqoZ//460m343A0HCN7UwfQOnX7Ipv0UJemwNkSHWrl7Pexym9vy3yPWgrn7oRRmgEw==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.195.tgz#980fa6de3c17bb075ef8b179a92bde1dec7c4615"
+  integrity sha512-rYxEY02kTusyZsIurWrO0hqv6rlu2Zlojfd/ZU0kT/gegfAkM/ca6csvCRuiBGej2TnCHF13XliK2IinWqfx8Q==
 
 "@tiptap/extension-paragraph@^2.0.0-beta.22":
-  version "2.0.0-beta.26"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.26.tgz#5199c8cedb9c076347a2e15cc67442ef7c3c3fbb"
-  integrity sha512-WcYsuUa7LLfk0vi7I1dVjdMRu53B52FMMqd+UL1qPdDKVkU3DBsZVwPj+yyfQyqN8Mc/xyg9VacGaiKFLmWNDg==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.195.tgz#8d6357d1e3c930aa1ddbc07ed574f2651c6a7b64"
+  integrity sha512-e6vde5O1SD/NuYB0B5juUyB4yLgEdPRe5ZzgLX4oRUdW90SgOGg6PQE1/MxvCmpB+SkrSpyykyjynfmXMrAwZg==
 
 "@tiptap/extension-strike@^2.0.0-beta.26":
-  version "2.0.0-beta.29"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.29.tgz#7004d0c5d126b0517fa78efc5a333a4b8e3334bf"
-  integrity sha512-zqFuY7GfNmZ/KClt6kxQ+msGo3syqucP/Xnlihxi+/h/G+oTvEwyOIXCtDOltvxcsWH/TUsdr5vzLp0j+Mdc6Q==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.195.tgz#8fddfe154d2d3f9014a0c56ee2f4c7b023ea4682"
+  integrity sha512-9zxI4G/vEUrhY9R2C9A2q25tBnbZeHc1b6iq9k3RKZDmMyzeAUHiF6Bd4IzzieXfRnHW8i9tgC1XEldkAJL/0g==
 
 "@tiptap/extension-text@^2.0.0-beta.15":
-  version "2.0.0-beta.17"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.17.tgz#4fdd1bdf62c82c1af6feef91c689906a8f5b171e"
-  integrity sha512-OyKL+pqWJEtjyd9/mrsuY1kZh2b3LWpOQDWKtd4aWR4EA0efmQG+7FPwcIeAVEh7ZoqM+/ABCnPjN6IjzIrSfg==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.0.0-beta.195.tgz#c846f63cd73c8602950e6dcbfab84cb2fa3be9cf"
+  integrity sha512-EjWCfKFlRhmnk27K/XE9ecS9L60JXtgY+ePIi3PGerQ2KQBAoglB4WYR28wPPnN/dVCx/Q9l+PHhFrdWIxv5bQ==
 
 "@tiptap/extension-underline@^2.0.0-beta.7":
-  version "2.0.0-beta.25"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.0.0-beta.25.tgz#b1580b2337a6ba7add5737e886bd88c8655241f2"
-  integrity sha512-kRDdb/mF6QWzFGV3cQuLh6xyXULXaKPL/TghefoOZhwkdIWV/M3zFar5tsZO54+tbIrzxoVP6t7mO2Y5G/SLDQ==
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.0.0-beta.195.tgz#468830a9e6a78190046a9740caa4a09572514411"
+  integrity sha512-wXW0qNeXNaK3glubjOTbBwpq+db2F9p7A7ksGGOJL7dj5X44g8ko71wlhHF4in0U+FJ072H4A32B6btGvtJWmQ==
 
-"@tiptap/suggestion@^2.0.0-beta.92":
-  version "2.0.0-beta.95"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.0.0-beta.95.tgz#82f42a65c5ce40517e21e395c1886c492aac72db"
-  integrity sha512-pUSuLDQYIeSPgzNrCkWElyn6JyGprhiy/Ye/0YrNefLEEiXIEzgfthOAruT/Fcfq0cXKQRU7Rz6sKij+tTdVGA==
+"@tiptap/suggestion@^2.0.0-beta.195":
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.0.0-beta.195.tgz#287aaed7bc7580094c5770c878d51e1da365f5fa"
+  integrity sha512-3ATDgy8U+mqaffLV2K2tBGzyTqcb8Ca7YVyZ2sws/j/E2rUIF3t8Ec4FGTpeRGLDVd3foRRidC1PHwV7ca4f5Q==
   dependencies:
-    prosemirror-model "^1.16.1"
-    prosemirror-state "^1.3.4"
-    prosemirror-view "^1.23.6"
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
 
-"@tiptap/vue-2@^2.0.0-beta.21":
-  version "2.0.0-beta.79"
-  resolved "https://registry.yarnpkg.com/@tiptap/vue-2/-/vue-2-2.0.0-beta.79.tgz#8192fc56b083097559f8158a177f76572ecfabf1"
-  integrity sha512-dwprmBVRvPJl0gMgH6LBU79yqhTbjiDQ3ReNtZ+MFBqwujQfkAqnsm6VVgLjd4jHsV+nzblP5HPH8s9MhIdySw==
+"@tiptap/vue-3@^2.0.0-beta.96":
+  version "2.0.0-beta.195"
+  resolved "https://registry.yarnpkg.com/@tiptap/vue-3/-/vue-3-2.0.0-beta.195.tgz#5373088f196fefb0f918890eb8935f189c0d0e87"
+  integrity sha512-eVT0pFz7/FLMEI2Scym0mixIW3Yl7tExIcHrWrXv+yIJiG4PIYfTojZaQhnGtoXuZjRS3/+YuJBpfk5wr4kBMQ==
   dependencies:
-    "@tiptap/extension-bubble-menu" "^2.0.0-beta.56"
-    "@tiptap/extension-floating-menu" "^2.0.0-beta.51"
-    prosemirror-view "^1.23.6"
+    "@tiptap/extension-bubble-menu" "^2.0.0-beta.195"
+    "@tiptap/extension-floating-menu" "^2.0.0-beta.195"
+    prosemirror-state "1.4.1"
+    prosemirror-view "1.26.2"
 
-"@tootallnate/once@1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
-  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+"@tootallnate/once@2":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
+  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@trysound/sax@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
-  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
-
-"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
-  version "7.1.19"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
-  integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==
+"@types/chai-subset@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@types/chai-subset/-/chai-subset-1.3.3.tgz#97893814e92abd2c534de422cb377e0e0bdaac94"
+  integrity sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==
   dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    "@types/babel__generator" "*"
-    "@types/babel__template" "*"
-    "@types/babel__traverse" "*"
+    "@types/chai" "*"
 
-"@types/babel__generator@*":
-  version "7.6.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
-  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
-  dependencies:
-    "@babel/types" "^7.0.0"
+"@types/chai@*", "@types/chai@^4.3.3":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.3.tgz#3c90752792660c4b562ad73b3fbd68bf3bc7ae07"
+  integrity sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==
 
-"@types/babel__template@*":
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
-  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
-  dependencies:
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-
-"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
-  version "7.17.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.17.1.tgz#1a0e73e8c28c7e832656db372b779bfd2ef37314"
-  integrity sha512-kVzjari1s2YVi77D3w1yuvohV2idweYXMCDzqBiVNN63TcDWrIlTVOYpqVrvbbyOE/IyzBoTKF0fdnLPEORFxA==
-  dependencies:
-    "@babel/types" "^7.3.0"
-
-"@types/body-parser@*":
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
-  integrity sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==
-  dependencies:
-    "@types/connect" "*"
-    "@types/node" "*"
-
-"@types/bonjour@^3.5.9":
-  version "3.5.10"
-  resolved "https://registry.yarnpkg.com/@types/bonjour/-/bonjour-3.5.10.tgz#0f6aadfe00ea414edc86f5d106357cda9701e275"
-  integrity sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==
+"@types/concat-stream@^1.6.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@types/concat-stream/-/concat-stream-1.6.1.tgz#24bcfc101ecf68e886aaedce60dfd74b632a1b74"
+  integrity sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==
   dependencies:
     "@types/node" "*"
 
-"@types/connect-history-api-fallback@^1.3.5":
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
-  integrity sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==
-  dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/node" "*"
-
-"@types/connect@*":
-  version "3.4.35"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
-  integrity sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/eslint-scope@^3.7.3":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
-  dependencies:
-    "@types/eslint" "*"
-    "@types/estree" "*"
-
-"@types/eslint@*", "@types/eslint@^8.4.2":
-  version "8.4.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.3.tgz#5c92815a3838b1985c90034cd85f26f59d9d0ece"
-  integrity sha512-YP1S7YJRMPs+7KZKDb9G63n8YejIwW9BALq7a5j2+H4yl6iOv9CB29edho+cuFRrvmJbbaH2yiVChKLJVysDGw==
+"@types/eslint@^8.4.2":
+  version "8.4.6"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.6.tgz#7976f054c1bccfcf514bff0564c0c41df5c08207"
+  integrity sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/eslint@^7.28.2":
-  version "7.29.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.29.0.tgz#e56ddc8e542815272720bb0b4ccc2aff9c3e1c78"
-  integrity sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==
-  dependencies:
-    "@types/estree" "*"
-    "@types/json-schema" "*"
-
-"@types/estree@*", "@types/estree@^0.0.51":
-  version "0.0.51"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
-  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+"@types/estree@*":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
 
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
-  version "4.17.29"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.29.tgz#2a1795ea8e9e9c91b4a4bbe475034b20c1ec711c"
-  integrity sha512-uMd++6dMKS32EOuw1Uli3e3BPgdLIXmezcfHv7N4c1s3gkhikBplORPpMq3fuWkxncZN1reb16d5n8yhQ80x7Q==
+"@types/flexsearch@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@types/flexsearch/-/flexsearch-0.7.3.tgz#ee79b1618035c82284278e05652e91116765b634"
+  integrity sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==
+
+"@types/form-data@0.0.33":
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/@types/form-data/-/form-data-0.0.33.tgz#c9ac85b2a5fd18435b8c85d9ecb50e6d6c893ff8"
+  integrity sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw==
   dependencies:
     "@types/node" "*"
-    "@types/qs" "*"
-    "@types/range-parser" "*"
 
-"@types/express@*", "@types/express@^4.17.13":
-  version "4.17.13"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.13.tgz#a76e2995728999bab51a33fabce1d705a3709034"
-  integrity sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==
+"@types/fs-extra@^9.0.13":
+  version "9.0.13"
+  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.13.tgz#7594fbae04fe7f1918ce8b3d213f74ff44ac1f45"
+  integrity sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==
   dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.18"
-    "@types/qs" "*"
-    "@types/serve-static" "*"
+    "@types/node" "*"
 
 "@types/geojson@*":
-  version "7946.0.8"
-  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
-  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+  version "7946.0.10"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
+  integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
 
-"@types/graceful-fs@^4.1.2", "@types/graceful-fs@^4.1.3":
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
-  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
-  dependencies:
-    "@types/node" "*"
+"@types/hammerjs@^2.0.41":
+  version "2.0.41"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
+  integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==
 
-"@types/html-minifier-terser@^6.0.0":
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
-  integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
-
-"@types/http-proxy@^1.17.8":
-  version "1.17.9"
-  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.9.tgz#7f0e7931343761efde1e2bf48c40f02f3f75705a"
-  integrity sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==
-  dependencies:
-    "@types/node" "*"
-
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+"@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
   integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
 
-"@types/istanbul-lib-report@*":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
-  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
-  dependencies:
-    "@types/istanbul-lib-coverage" "*"
-
-"@types/istanbul-reports@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
-  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
-  dependencies:
-    "@types/istanbul-lib-report" "*"
-
-"@types/jest@^27.0.1":
-  version "27.5.2"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.5.2.tgz#ec49d29d926500ffb9fd22b84262e862049c026c"
-  integrity sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==
-  dependencies:
-    jest-matcher-utils "^27.0.0"
-    pretty-format "^27.0.0"
-
-"@types/jest@^28.0.0":
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-28.1.1.tgz#8c9ba63702a11f8c386ee211280e8b68cb093cd1"
-  integrity sha512-C2p7yqleUKtCkVjlOur9BWVA4HgUQmEj/HWCt5WzZ5mLXrWnyIfl0wGuArc+kBXsy0ZZfLp+7dywB4HtSVYGVA==
-  dependencies:
-    jest-matcher-utils "^27.0.0"
-    pretty-format "^27.0.0"
-
-"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
@@ -2125,27 +1675,42 @@
   dependencies:
     "@types/leaflet" "*"
 
+"@types/leaflet.markercluster@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.1.tgz#d039ada408a30bda733b19a24cba89b81f0ace4b"
+  integrity sha512-gzJzP10qO6Zkts5QNVmSAEDLYicQHTEBLT9HZpFrJiSww9eDAs5OWHvIskldf41MvDv1gbMukuEBQEawHn+wtA==
+  dependencies:
+    "@types/leaflet" "*"
+
 "@types/leaflet@*", "@types/leaflet@^1.5.2":
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.11.tgz#48b33b7a15b015bbb1e8950399298a112c3220c8"
-  integrity sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.8.0.tgz#dc92d3e868fb6d5067b4b59fa08cd4441f84fabe"
+  integrity sha512-+sXFmiJTFdhaXXIGFlV5re9AdqtAODoXbGAvxx02e5SHXL3ir7ClP5J7pahO8VmzKY3dth4RUS1nf2BTT+DW1A==
   dependencies:
     "@types/geojson" "*"
 
+"@types/linkify-it@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
+  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
+
 "@types/lodash@^4.14.141":
-  version "4.14.182"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
-  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+  version "4.14.185"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.185.tgz#c9843f5a40703a8f5edfd53358a58ae729816908"
+  integrity sha512-evMDG1bC4rgQg4ku9tKpuMh5iBNEwNa3tf9zRHdP1qlv+1WUg44xat4IxCE14gIpZRGUUWAx2VhItCZc25NfMA==
 
-"@types/mime@^1":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
-  integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
+"@types/markdown-it@^12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
+  integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
+  dependencies:
+    "@types/linkify-it" "*"
+    "@types/mdurl" "*"
 
-"@types/minimist@^1.2.0":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
-  integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
+"@types/mdurl@*":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
+  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
 
 "@types/ngeohash@^0.6.2":
   version "0.6.4"
@@ -2153,66 +1718,34 @@
   integrity sha512-rr20mmx41OkWx4q5du2dv2sESR/6xH2tzScUQXwO8SiaQWa6PYTuan1nqBtA76FR9qkVfZY7nwQwZNC9StX/Ww==
 
 "@types/node@*":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.0.tgz#67c7b724e1bcdd7a8821ce0d5ee184d3b4dd525a"
-  integrity sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA==
+  version "18.7.18"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.18.tgz#633184f55c322e4fb08612307c274ee6d5ed3154"
+  integrity sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==
 
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
-  integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
+"@types/node@^10.0.3":
+  version "10.17.60"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
+  integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
+
+"@types/node@^8.0.0":
+  version "8.10.66"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.66.tgz#dd035d409df322acc83dff62a602f12a5783bbb3"
+  integrity sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==
 
 "@types/orderedmap@*":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/orderedmap/-/orderedmap-1.0.0.tgz#807455a192bba52cbbb4517044bc82bdbfa8c596"
   integrity sha512-dxKo80TqYx3YtBipHwA/SdFmMMyLCnP+5mkEqN0eMjcTBzHkiiX0ES118DsjDBjvD+zeSsSU9jULTZ+frog+Gw==
 
-"@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
-
 "@types/phoenix@^1.5.2":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.5.4.tgz#c08a1da6d7b4e365f6a1fe1ff9aada55f5356d24"
   integrity sha512-L5eZmzw89eXBKkiqVBcJfU1QGx9y+wurRIEgt0cuLH0hwNtVUxtx+6cu0R2STwWj468sjXyBYPYDtGclUd1kjQ==
 
-"@types/prettier@^2.1.5", "@types/prettier@^2.6.0":
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.3.tgz#68ada76827b0010d0db071f739314fa429943d0a"
-  integrity sha512-ymZk3LEC/fsut+/Q5qejp6R9O1rMxz3XaRHDV6kX8MrGAhOSPqVARbDi+EZvInBpw+BnCX3TD240byVkOfQsHg==
-
-"@types/prosemirror-commands@*", "@types/prosemirror-commands@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-commands/-/prosemirror-commands-1.0.4.tgz#d08551415127d93ae62e7239d30db0b5e7208e22"
-  integrity sha512-utDNYB3EXLjAfYIcRWJe6pn3kcQ5kG4RijbT/0Y/TFOm6yhvYS/D9eJVnijdg9LDjykapcezchxGRqFD5LcyaQ==
-  dependencies:
-    "@types/prosemirror-model" "*"
-    "@types/prosemirror-state" "*"
-    "@types/prosemirror-view" "*"
-
-"@types/prosemirror-dropcursor@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-dropcursor/-/prosemirror-dropcursor-1.0.3.tgz#49250849b8a0b86e8c29eb1ba70a463e53e46947"
-  integrity sha512-b0/8njnJ4lwyHKcGuCMf3x7r1KjxyugB1R/c2iMCjplsJHSC7UY9+OysqgJR5uUXRekUSGniiLgBtac/lvH6wg==
-  dependencies:
-    "@types/prosemirror-state" "*"
-
-"@types/prosemirror-gapcursor@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-gapcursor/-/prosemirror-gapcursor-1.0.4.tgz#7df7d373edb33ea8da12084bfd462cf84cd69761"
-  integrity sha512-9xKjFIG5947dzerFvkLWp6F53JwrUYoYwh3SgcTFEp8SbSfNNrez/PFYVZKPnoqPoaK5WtTdQTaMwpCV9rXQIg==
-  dependencies:
-    "@types/prosemirror-model" "*"
-    "@types/prosemirror-state" "*"
-
-"@types/prosemirror-history@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-history/-/prosemirror-history-1.0.3.tgz#f1110efbe758129b5475e466ff077f0a8d9b964f"
-  integrity sha512-5TloMDRavgLjOAKXp1Li8u0xcsspzbT1Cm9F2pwHOkgvQOz1jWQb2VIXO7RVNsFjLBZdIXlyfSLivro3DuMWXg==
-  dependencies:
-    "@types/prosemirror-model" "*"
-    "@types/prosemirror-state" "*"
+"@types/prettier@^2.6.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.0.tgz#ea03e9f0376a4446f44797ca19d9c46c36e352dc"
+  integrity sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==
 
 "@types/prosemirror-inputrules@^1.0.2":
   version "1.0.4"
@@ -2222,33 +1755,14 @@
     "@types/prosemirror-model" "*"
     "@types/prosemirror-state" "*"
 
-"@types/prosemirror-keymap@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-keymap/-/prosemirror-keymap-1.0.4.tgz#f73c79810e8d0e0a20d153d84f998f02e5afbc0c"
-  integrity sha512-ycevwkqUh+jEQtPwqO7sWGcm+Sybmhu8MpBsM8DlO3+YTKnXbKA6SDz/+q14q1wK3UA8lHJyfR+v+GPxfUSemg==
-  dependencies:
-    "@types/prosemirror-commands" "*"
-    "@types/prosemirror-model" "*"
-    "@types/prosemirror-state" "*"
-    "@types/prosemirror-view" "*"
-
-"@types/prosemirror-model@*", "@types/prosemirror-model@^1.16.0", "@types/prosemirror-model@^1.7.2":
+"@types/prosemirror-model@*", "@types/prosemirror-model@^1.7.2":
   version "1.16.2"
   resolved "https://registry.yarnpkg.com/@types/prosemirror-model/-/prosemirror-model-1.16.2.tgz#8896adac3a5d5d66f06491bb13940aa734a7b6e8"
   integrity sha512-1XPJopkKP3oHSBP61uuSuW13DIDZPWvAzP6Pv2/6mixk8EBPUeRGIW548DjJTicMo23gEg1zvCZy9asblQdWag==
   dependencies:
     "@types/orderedmap" "*"
 
-"@types/prosemirror-schema-list@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@types/prosemirror-schema-list/-/prosemirror-schema-list-1.0.3.tgz#bdf1893a7915fbdc5c49b3cac9368e96213d70de"
-  integrity sha512-uWybOf+M2Ea7rlbs0yLsS4YJYNGXYtn4N+w8HCw3Vvfl6wBAROzlMt0gV/D/VW/7J/LlAjwMezuGe8xi24HzXA==
-  dependencies:
-    "@types/orderedmap" "*"
-    "@types/prosemirror-model" "*"
-    "@types/prosemirror-state" "*"
-
-"@types/prosemirror-state@*", "@types/prosemirror-state@^1.2.4", "@types/prosemirror-state@^1.2.8":
+"@types/prosemirror-state@*", "@types/prosemirror-state@^1.2.4":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@types/prosemirror-state/-/prosemirror-state-1.3.0.tgz#7fd25db7244c027eef0849d79b112a8a0dfbb483"
   integrity sha512-nMdUF6w8B++NH4V54X+4GvDty7M02UfuHQW0s1AS25Z4ZrOW4RSY2+s57doXBbeMSjzYV/QoMxCY2sT3KQ2VdQ==
@@ -2257,14 +1771,14 @@
     "@types/prosemirror-transform" "*"
     "@types/prosemirror-view" "*"
 
-"@types/prosemirror-transform@*", "@types/prosemirror-transform@^1.1.5":
+"@types/prosemirror-transform@*":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@types/prosemirror-transform/-/prosemirror-transform-1.4.2.tgz#0be91da7ee962c40c19ae1db1e4bf5b6e7ee6914"
   integrity sha512-FZNzjYm6YUkb1XXOrw2193TiFzwM92ui1nycNaRSd5JDbugf9yBLkXm4Rq3HGJJxBBkRcUE8niqUW5aWlXQQiQ==
   dependencies:
     "@types/prosemirror-model" "*"
 
-"@types/prosemirror-view@*", "@types/prosemirror-view@^1.11.4", "@types/prosemirror-view@^1.23.1":
+"@types/prosemirror-view@*", "@types/prosemirror-view@^1.11.4":
   version "1.23.3"
   resolved "https://registry.yarnpkg.com/@types/prosemirror-view/-/prosemirror-view-1.23.3.tgz#8ad847fc45b9c7eba8362fccdafc7144c491ea35"
   integrity sha512-T5dPDmZiXAazJVSvnx55D6h4mcpiH2q2wTyO9zIeOdox5zx964+zcDl9dFNaXG3qCGlERwMPckhBZL1HCxyygw==
@@ -2273,16 +1787,11 @@
     "@types/prosemirror-state" "*"
     "@types/prosemirror-transform" "*"
 
-"@types/qs@*":
+"@types/qs@^6.2.31":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
-"@types/range-parser@*":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
-  integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
-
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2290,11 +1799,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/retry@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
-  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
-
 "@types/sanitize-html@^2.5.0":
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.6.2.tgz#9c47960841b9def1e4c9dfebaaab010a3f6e97b9"
@@ -2302,149 +1806,116 @@
   dependencies:
     htmlparser2 "^6.0.0"
 
-"@types/serve-index@^1.9.1":
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
-  integrity sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==
-  dependencies:
-    "@types/express" "*"
-
-"@types/serve-static@*", "@types/serve-static@^1.13.10":
-  version "1.13.10"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.10.tgz#f5e0ce8797d2d7cc5ebeda48a52c96c4fa47a8d9"
-  integrity sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==
-  dependencies:
-    "@types/mime" "^1"
-    "@types/node" "*"
-
-"@types/sockjs@^0.3.33":
-  version "0.3.33"
-  resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
-  integrity sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==
-  dependencies:
-    "@types/node" "*"
-
-"@types/stack-utils@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
-  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
-
 "@types/trusted-types@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
   integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
 
-"@types/webpack-env@^1.15.2":
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.17.0.tgz#f99ce359f1bfd87da90cc4a57cab0a18f34a48d0"
-  integrity sha512-eHSaNYEyxRA5IAG0Ym/yCyf86niZUIF/TpWKofQI/CVfh5HsMEUyfE2kwFxha4ow0s5g0LfISQxpDKjbRDrizw==
+"@types/web-bluetooth@^0.0.15":
+  version "0.0.15"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz#d60330046a6ed8a13b4a53df3813c44942ebdf72"
+  integrity sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==
 
-"@types/ws@^8.5.1":
-  version "8.5.3"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
-  integrity sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==
+"@typescript-eslint/eslint-plugin@^5.0.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.38.0.tgz#ac919a199548861012e8c1fb2ec4899ac2bc22ae"
+  integrity sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==
   dependencies:
-    "@types/node" "*"
-
-"@types/yargs-parser@*":
-  version "21.0.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
-  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
-
-"@types/yargs@^16.0.0":
-  version "16.0.4"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-16.0.4.tgz#26aad98dd2c2a38e421086ea9ad42b9e51642977"
-  integrity sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==
-  dependencies:
-    "@types/yargs-parser" "*"
-
-"@types/yargs@^17.0.8":
-  version "17.0.10"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.10.tgz#591522fce85d8739bca7b8bb90d048e4478d186a"
-  integrity sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==
-  dependencies:
-    "@types/yargs-parser" "*"
-
-"@typescript-eslint/eslint-plugin@^5.0.0", "@typescript-eslint/eslint-plugin@^5.3.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.28.0.tgz#6204ac33bdd05ab27c7f77960f1023951115d403"
-  integrity sha512-DXVU6Cg29H2M6EybqSg2A+x8DgO9TCUBRp4QEXQHJceLS7ogVDP0g3Lkg/SZCqcvkAP/RruuQqK0gdlkgmhSUA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.28.0"
-    "@typescript-eslint/type-utils" "5.28.0"
-    "@typescript-eslint/utils" "5.28.0"
+    "@typescript-eslint/scope-manager" "5.38.0"
+    "@typescript-eslint/type-utils" "5.38.0"
+    "@typescript-eslint/utils" "5.38.0"
     debug "^4.3.4"
-    functional-red-black-tree "^1.0.1"
     ignore "^5.2.0"
     regexpp "^3.2.0"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.0.0", "@typescript-eslint/parser@^5.10.0", "@typescript-eslint/parser@^5.3.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.28.0.tgz#639b101cad2bfb7ae16e69710ac95c42bd4eae33"
-  integrity sha512-ekqoNRNK1lAcKhZESN/PdpVsWbP9jtiNqzFWkp/yAUdZvJalw2heCYuqRmM5eUJSIYEkgq5sGOjq+ZqsLMjtRA==
+"@typescript-eslint/parser@^5.0.0", "@typescript-eslint/parser@^5.10.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.38.0.tgz#5a59a1ff41a7b43aacd1bb2db54f6bf1c02b2ff8"
+  integrity sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.28.0"
-    "@typescript-eslint/types" "5.28.0"
-    "@typescript-eslint/typescript-estree" "5.28.0"
+    "@typescript-eslint/scope-manager" "5.38.0"
+    "@typescript-eslint/types" "5.38.0"
+    "@typescript-eslint/typescript-estree" "5.38.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.28.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.28.0.tgz#ef9a5c68fecde72fd2ff8a84b9c120324826c1b9"
-  integrity sha512-LeBLTqF/he1Z+boRhSqnso6YrzcKMTQ8bO/YKEe+6+O/JGof9M0g3IJlIsqfrK/6K03MlFIlycbf1uQR1IjE+w==
+"@typescript-eslint/scope-manager@5.38.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.38.0.tgz#8f0927024b6b24e28671352c93b393a810ab4553"
+  integrity sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==
   dependencies:
-    "@typescript-eslint/types" "5.28.0"
-    "@typescript-eslint/visitor-keys" "5.28.0"
+    "@typescript-eslint/types" "5.38.0"
+    "@typescript-eslint/visitor-keys" "5.38.0"
 
-"@typescript-eslint/type-utils@5.28.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.28.0.tgz#53ccc78fdcf0205ef544d843b84104c0e9c7ca8e"
-  integrity sha512-SyKjKh4CXPglueyC6ceAFytjYWMoPHMswPQae236zqe1YbhvCVQyIawesYywGiu98L9DwrxsBN69vGIVxJ4mQQ==
+"@typescript-eslint/type-utils@5.38.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.38.0.tgz#c8b7f681da825fcfc66ff2b63d70693880496876"
+  integrity sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==
   dependencies:
-    "@typescript-eslint/utils" "5.28.0"
+    "@typescript-eslint/typescript-estree" "5.38.0"
+    "@typescript-eslint/utils" "5.38.0"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.28.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.28.0.tgz#cffd9bcdce28db6daaa146e48a0be4387a6f4e9d"
-  integrity sha512-2OOm8ZTOQxqkPbf+DAo8oc16sDlVR5owgJfKheBkxBKg1vAfw2JsSofH9+16VPlN9PWtv8Wzhklkqw3k/zCVxA==
+"@typescript-eslint/types@5.38.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.38.0.tgz#8cd15825e4874354e31800dcac321d07548b8a5f"
+  integrity sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==
 
-"@typescript-eslint/typescript-estree@5.28.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.28.0.tgz#3487d158d091ca2772b285e67412ff6d9797d863"
-  integrity sha512-9GX+GfpV+F4hdTtYc6OV9ZkyYilGXPmQpm6AThInpBmKJEyRSIjORJd1G9+bknb7OTFYL+Vd4FBJAO6T78OVqA==
+"@typescript-eslint/typescript-estree@5.38.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.38.0.tgz#89f86b2279815c6fb7f57d68cf9b813f0dc25d98"
+  integrity sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==
   dependencies:
-    "@typescript-eslint/types" "5.28.0"
-    "@typescript-eslint/visitor-keys" "5.28.0"
+    "@typescript-eslint/types" "5.38.0"
+    "@typescript-eslint/visitor-keys" "5.38.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.28.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.28.0.tgz#b27a136eac300a48160b36d2aad0da44a1341b99"
-  integrity sha512-E60N5L0fjv7iPJV3UGc4EC+A3Lcj4jle9zzR0gW7vXhflO7/J29kwiTGITA2RlrmPokKiZbBy2DgaclCaEUs6g==
+"@typescript-eslint/utils@5.38.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.38.0.tgz#5b31f4896471818153790700eb02ac869a1543f4"
+  integrity sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.28.0"
-    "@typescript-eslint/types" "5.28.0"
-    "@typescript-eslint/typescript-estree" "5.28.0"
+    "@typescript-eslint/scope-manager" "5.38.0"
+    "@typescript-eslint/types" "5.38.0"
+    "@typescript-eslint/typescript-estree" "5.38.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/visitor-keys@5.28.0":
-  version "5.28.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.28.0.tgz#982bb226b763c48fc1859a60de33fbf939d40a0f"
-  integrity sha512-BtfP1vCor8cWacovzzPFOoeW4kBQxzmhxGoOpt0v1SFvG+nJ0cWaVdJk7cky1ArTcFHHKNIxyo2LLr3oNkSuXA==
+"@typescript-eslint/visitor-keys@5.38.0":
+  version "5.38.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.38.0.tgz#60591ca3bf78aa12b25002c0993d067c00887e34"
+  integrity sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==
   dependencies:
-    "@typescript-eslint/types" "5.28.0"
+    "@typescript-eslint/types" "5.38.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vitejs/plugin-vue@^3.0.3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.1.0.tgz#3a423ea6943a450e806da412a911150e928598ed"
+  integrity sha512-fmxtHPjSOEIRg6vHYDaem+97iwCUg/uSIaTzp98lhELt2ISOQuDo2hbkBdXod0g15IhfPMQmAxh4heUks2zvDA==
+
+"@vitest/coverage-c8@^0.23.4":
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/@vitest/coverage-c8/-/coverage-c8-0.23.4.tgz#bf9d916815b83f10b5b3700fae4fd9f38d1c596f"
+  integrity sha512-jmD00a5DQH9gu9K+YdvVhcMuv2CzHvU4gCnySS40Ec5hKlXtlCzRfNHl00VnhfuBeaQUmaQYe60BLT413HyDdg==
+  dependencies:
+    c8 "^7.12.0"
+    vitest "0.23.4"
+
+"@vitest/ui@^0.23.4":
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/@vitest/ui/-/ui-0.23.4.tgz#87b77ad9f92b18ebc50a7380b703753069dc17fa"
+  integrity sha512-lNZVTTrkHThGAwNQ1ah1qCNnm70r7OLB5LCUdSqboStve/1eKTrtt27QfDSSUTG8AVJQzU0eaN/j8UocH+CqfA==
+  dependencies:
+    sirv "^2.0.2"
+
 "@vue-a11y/announcer@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@vue-a11y/announcer/-/announcer-2.1.0.tgz#ed725e90b91870c76285840e0aaa637cfafbf27f"
@@ -2455,493 +1926,173 @@
   resolved "https://registry.yarnpkg.com/@vue-a11y/skip-to/-/skip-to-2.1.2.tgz#a50f5b97605f5054ca7a7e222bdc721405e38f38"
   integrity sha512-oKx0YE/nfWSBI48RKHoRsUmpY0//rDPBZTGk1LxhkkUsXPwzuMlJBFrWGIswdd+3DiIE5OyiDaM45ZldYjtDIA==
 
-"@vue/apollo-option@4.0.0-alpha.11":
-  version "4.0.0-alpha.11"
-  resolved "https://registry.yarnpkg.com/@vue/apollo-option/-/apollo-option-4.0.0-alpha.11.tgz#b4ecac2d1ac40271cb7f20683fb8e4c85974329a"
-  integrity sha512-IU458Y2cH/eo3RYXyoEoozyRxEgUz/BLC96DQAQKiEc7hFkE6I0g/VZu4tVIP0Od1/ivezdGaAPEVPA2AxE1ug==
+"@vue-leaflet/vue-leaflet@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.6.1.tgz#d731a5d2256d049e345f58330616180191d88b12"
+  integrity sha512-/sm0bdrdftXh5nSGEPsoKrJI1D/GtKiEsBo9X/TA2yu4lYTDcaem6U4t1Ea5CoLleiZRCNUrZr9PG/xHdUPXYA==
+
+"@vue/apollo-composable@^4.0.0-alpha.17":
+  version "4.0.0-alpha.19"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-composable/-/apollo-composable-4.0.0-alpha.19.tgz#5066426ac5c73717a1f7fd5bfe884587af7ac0ff"
+  integrity sha512-bxFjzV/j8j3kzWcG4iX8z4JnidTKjQytmVL2tJWRdjeKZbfZDV9nVr/XBVPP75+iR5ckZe6EKinDKkjnYFKhlg==
   dependencies:
-    throttle-debounce "^2.3.0"
+    throttle-debounce "^3.0.1"
+    ts-essentials "^9.1.2"
+    vue-demi "^0.13.1"
 
-"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
-  integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
-
-"@vue/babel-helper-vue-transform-on@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
-  integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
-
-"@vue/babel-plugin-jsx@^1.0.3":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
-  integrity sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==
+"@vue/compiler-core@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.39.tgz#0d77e635f4bdb918326669155a2dc977c053943e"
+  integrity sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
-    "@vue/babel-helper-vue-transform-on" "^1.0.2"
-    camelcase "^6.0.0"
-    html-tags "^3.1.0"
-    svg-tags "^1.0.0"
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.39"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
 
-"@vue/babel-plugin-transform-vue-jsx@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7"
-  integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA==
+"@vue/compiler-dom@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz#bd69d35c1a48fe2cea4ab9e96d2a3a735d146fdf"
+  integrity sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    html-tags "^2.0.0"
-    lodash.kebabcase "^4.1.1"
-    svg-tags "^1.0.0"
+    "@vue/compiler-core" "3.2.39"
+    "@vue/shared" "3.2.39"
 
-"@vue/babel-preset-app@^5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-5.0.6.tgz#049e1b54caa6d210ad2a134edbbbb6bef64d8d34"
-  integrity sha512-hoVr5M5RIvAL8F6MX8ZG0RvjA7MB7eDOkykK+M+qThkkrsAvlianzygnE86xN1N7JVSq7kGOyZk0Te+L20KqeQ==
+"@vue/compiler-sfc@3.2.39", "@vue/compiler-sfc@^3.2.37":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz#8fe29990f672805b7c5a2ecfa5b05e681c862ea2"
+  integrity sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==
   dependencies:
-    "@babel/core" "^7.12.16"
-    "@babel/helper-compilation-targets" "^7.12.16"
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/plugin-proposal-class-properties" "^7.12.13"
-    "@babel/plugin-proposal-decorators" "^7.12.13"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@babel/plugin-syntax-jsx" "^7.12.13"
-    "@babel/plugin-transform-runtime" "^7.12.15"
-    "@babel/preset-env" "^7.12.16"
-    "@babel/runtime" "^7.12.13"
-    "@vue/babel-plugin-jsx" "^1.0.3"
-    "@vue/babel-preset-jsx" "^1.1.2"
-    babel-plugin-dynamic-import-node "^2.3.3"
-    core-js "^3.8.3"
-    core-js-compat "^3.8.3"
-    semver "^7.3.4"
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.39"
+    "@vue/compiler-dom" "3.2.39"
+    "@vue/compiler-ssr" "3.2.39"
+    "@vue/reactivity-transform" "3.2.39"
+    "@vue/shared" "3.2.39"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
 
-"@vue/babel-preset-jsx@^1.1.2":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz#92fea79db6f13b01e80d3a0099e2924bdcbe4e87"
-  integrity sha512-oRVnmN2a77bYDJzeGSt92AuHXbkIxbf/XXSE3klINnh9AXBmVS1DGa1f0d+dDYpLfsAKElMnqKTQfKn7obcL4w==
+"@vue/compiler-ssr@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz#4f3bfb535cb98b764bee45e078700e03ccc60633"
+  integrity sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==
   dependencies:
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    "@vue/babel-sugar-composition-api-inject-h" "^1.2.1"
-    "@vue/babel-sugar-composition-api-render-instance" "^1.2.4"
-    "@vue/babel-sugar-functional-vue" "^1.2.2"
-    "@vue/babel-sugar-inject-h" "^1.2.2"
-    "@vue/babel-sugar-v-model" "^1.2.3"
-    "@vue/babel-sugar-v-on" "^1.2.3"
+    "@vue/compiler-dom" "3.2.39"
+    "@vue/shared" "3.2.39"
 
-"@vue/babel-sugar-composition-api-inject-h@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.2.1.tgz#05d6e0c432710e37582b2be9a6049b689b6f03eb"
-  integrity sha512-4B3L5Z2G+7s+9Bwbf+zPIifkFNcKth7fQwekVbnOA3cr3Pq71q71goWr97sk4/yyzH8phfe5ODVzEjX7HU7ItQ==
+"@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
+  integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
+
+"@vue/eslint-config-prettier@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/eslint-config-prettier/-/eslint-config-prettier-7.0.0.tgz#44ab55ca22401102b57795c59428e9dade72be34"
+  integrity sha512-/CTc6ML3Wta1tCe1gUeO0EYnVXfo3nJXsIhZ8WJr3sov+cGASr6yuiibJTL6lmIBm7GobopToOuB3B6AWyV0Iw==
   dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-composition-api-render-instance@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.2.4.tgz#e4cbc6997c344fac271785ad7a29325c51d68d19"
-  integrity sha512-joha4PZznQMsxQYXtR3MnTgCASC9u3zt9KfBxIeuI5g2gscpTsSKRDzWQt4aqNIpx6cv8On7/m6zmmovlNsG7Q==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-functional-vue@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.2.2.tgz#267a9ac8d787c96edbf03ce3f392c49da9bd2658"
-  integrity sha512-JvbgGn1bjCLByIAU1VOoepHQ1vFsroSA/QkzdiSs657V79q6OwEWLCQtQnEXD/rLTA8rRit4rMOhFpbjRFm82w==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-inject-h@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.2.2.tgz#d738d3c893367ec8491dcbb669b000919293e3aa"
-  integrity sha512-y8vTo00oRkzQTgufeotjCLPAvlhnpSkcHFEp60+LJUwygGcd5Chrpn5480AQp/thrxVm8m2ifAk0LyFel9oCnw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-
-"@vue/babel-sugar-v-model@^1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.2.3.tgz#fa1f29ba51ebf0aa1a6c35fa66d539bc459a18f2"
-  integrity sha512-A2jxx87mySr/ulAsSSyYE8un6SIH0NWHiLaCWpodPCVOlQVODCaSpiR4+IMsmBr73haG+oeCuSvMOM+ttWUqRQ==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    camelcase "^5.0.0"
-    html-tags "^2.0.0"
-    svg-tags "^1.0.0"
-
-"@vue/babel-sugar-v-on@^1.2.3":
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.2.3.tgz#342367178586a69f392f04bfba32021d02913ada"
-  integrity sha512-kt12VJdz/37D3N3eglBywV8GStKNUhNrsxChXIV+o0MwVXORYuhDTHJRKPgLJRb/EY3vM2aRFQdxJBp9CLikjw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.2.0"
-    "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
-    camelcase "^5.0.0"
-
-"@vue/cli-overlay@^5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-5.0.6.tgz#1c9dd0a2ff90ab7c5dc5c25eff8b57721b4795ae"
-  integrity sha512-rghCRMPVQ4FIKmQy8ipn8fKztdaQSQTktAKob2SGuEL/iBWfclSMAQCXfj908nyzOBymo+q/Sn/oiLhi07oHlA==
-
-"@vue/cli-plugin-babel@~5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-babel/-/cli-plugin-babel-5.0.6.tgz#a7701e74694044619588fd4abcc40a4bd9d81269"
-  integrity sha512-ruQhfhj2WM6Fe/VDQneQc/kqNp/p138SjQMfz7q/rxMTMG1kpV5B0jYWschXHXLQ6aDsFnqmBmIK+XjU3XTF3g==
-  dependencies:
-    "@babel/core" "^7.12.16"
-    "@vue/babel-preset-app" "^5.0.6"
-    "@vue/cli-shared-utils" "^5.0.6"
-    babel-loader "^8.2.2"
-    thread-loader "^3.0.0"
-    webpack "^5.54.0"
-
-"@vue/cli-plugin-eslint@~5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-5.0.6.tgz#63688b6366feb0e4949a23453dbd4984996c6092"
-  integrity sha512-fuc8w2IujzoenA/cdr/QYYMq2yaI1fYr0Fqom/M55B+DmW19GIuIRxYQvh0CEeCbFB2hAl3Flrazfx96/nAaQA==
-  dependencies:
-    "@vue/cli-shared-utils" "^5.0.6"
-    eslint-webpack-plugin "^3.1.0"
-    globby "^11.0.2"
-    webpack "^5.54.0"
-    yorkie "^2.0.0"
-
-"@vue/cli-plugin-pwa@~5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-pwa/-/cli-plugin-pwa-5.0.6.tgz#7c188b7362d0938f56ed4ca3f6087161892651a9"
-  integrity sha512-WVI4cS3BD1k41Fak7+7wQwqYwVUG7AEe64O6CVAyp/EcUtYdVoN+Oqe34DrzcR4ViEugqYkxWRKRFMhJfa1fpQ==
-  dependencies:
-    "@vue/cli-shared-utils" "^5.0.6"
-    html-webpack-plugin "^5.1.0"
-    webpack "^5.54.0"
-    workbox-webpack-plugin "^6.1.0"
-
-"@vue/cli-plugin-router@^5.0.6", "@vue/cli-plugin-router@~5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-router/-/cli-plugin-router-5.0.6.tgz#b65d39845a8a53dc51b9c263bf75bdd24a53d8be"
-  integrity sha512-5ikUdfsSoKqpBhB5GhGYijH6mJnU+ZGqDv3QBf0brDeeh7PhClntxNAOLkB73c+LNxjBrlNCTkItuByF+AD29w==
-  dependencies:
-    "@vue/cli-shared-utils" "^5.0.6"
-
-"@vue/cli-plugin-typescript@~5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-typescript/-/cli-plugin-typescript-5.0.6.tgz#c98b6fe67d71034109694f53a92c4a102fd5f060"
-  integrity sha512-DKw3SZEWs+9v6oUMTJAGcmJY4XCIdLhwXU1MsXDmhea/VqoGTcY9yl1mb/QfZ3AttdRtC7n4Vk01tGa0pnewsA==
-  dependencies:
-    "@babel/core" "^7.12.16"
-    "@types/webpack-env" "^1.15.2"
-    "@vue/cli-shared-utils" "^5.0.6"
-    babel-loader "^8.2.2"
-    fork-ts-checker-webpack-plugin "^6.4.0"
-    globby "^11.0.2"
-    thread-loader "^3.0.0"
-    ts-loader "^9.2.5"
-    webpack "^5.54.0"
-
-"@vue/cli-plugin-unit-jest@~5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-5.0.6.tgz#21b039199b70a990675695d9fc0ec7370f47b477"
-  integrity sha512-PZ2/q4bo7UWKI2CXNomGrutJTPD+LHZWlz4QQ5uTTLSvrvWxZaULuMItIrTIZPUfDTnl98LpyTLRzNAhZBr63A==
-  dependencies:
-    "@babel/core" "^7.12.16"
-    "@babel/plugin-transform-modules-commonjs" "^7.15.0"
-    "@types/jest" "^27.0.1"
-    "@vue/cli-shared-utils" "^5.0.6"
-    babel-jest "^27.1.0"
-    deepmerge "^4.2.2"
-    jest "^27.1.0"
-    jest-serializer-vue "^2.0.2"
-    jest-transform-stub "^2.0.0"
-    jest-watch-typeahead "^1.0.0"
-
-"@vue/cli-plugin-vuex@^5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.6.tgz#177bb2904ea57d606b8a3cad0147379fcc304174"
-  integrity sha512-9bwkaLxGqqrD5FPN7iNsIe5x60P0nScioMQvHf2ZIIoFAiM5yuTgOQkdSKGBhn0YG4IjYd1tnlVY4Q/P4ZHaTA==
-
-"@vue/cli-service@~5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-5.0.6.tgz#2de955eacd84eec07b0e288779701459c5a5db9e"
-  integrity sha512-XSiTCjUMk8adjvQIJXBxk3ltEBLyBme8rpqdhJrpgCgSj+8pcPPyYKs1M0petkhwLMv3mEXVPNQmXKFzpdWVrw==
-  dependencies:
-    "@babel/helper-compilation-targets" "^7.12.16"
-    "@soda/friendly-errors-webpack-plugin" "^1.8.0"
-    "@soda/get-current-script" "^1.0.2"
-    "@types/minimist" "^1.2.0"
-    "@vue/cli-overlay" "^5.0.6"
-    "@vue/cli-plugin-router" "^5.0.6"
-    "@vue/cli-plugin-vuex" "^5.0.6"
-    "@vue/cli-shared-utils" "^5.0.6"
-    "@vue/component-compiler-utils" "^3.3.0"
-    "@vue/vue-loader-v15" "npm:vue-loader@^15.9.7"
-    "@vue/web-component-wrapper" "^1.3.0"
-    acorn "^8.0.5"
-    acorn-walk "^8.0.2"
-    address "^1.1.2"
-    autoprefixer "^10.2.4"
-    browserslist "^4.16.3"
-    case-sensitive-paths-webpack-plugin "^2.3.0"
-    cli-highlight "^2.1.10"
-    clipboardy "^2.3.0"
-    cliui "^7.0.4"
-    copy-webpack-plugin "^9.0.1"
-    css-loader "^6.5.0"
-    css-minimizer-webpack-plugin "^3.0.2"
-    cssnano "^5.0.0"
-    debug "^4.1.1"
-    default-gateway "^6.0.3"
-    dotenv "^10.0.0"
-    dotenv-expand "^5.1.0"
-    fs-extra "^9.1.0"
-    globby "^11.0.2"
-    hash-sum "^2.0.0"
-    html-webpack-plugin "^5.1.0"
-    is-file-esm "^1.0.0"
-    launch-editor-middleware "^2.2.1"
-    lodash.defaultsdeep "^4.6.1"
-    lodash.mapvalues "^4.6.0"
-    mini-css-extract-plugin "^2.5.3"
-    minimist "^1.2.5"
-    module-alias "^2.2.2"
-    portfinder "^1.0.26"
-    postcss "^8.2.6"
-    postcss-loader "^6.1.1"
-    progress-webpack-plugin "^1.0.12"
-    ssri "^8.0.1"
-    terser-webpack-plugin "^5.1.1"
-    thread-loader "^3.0.0"
-    vue-loader "^17.0.0"
-    vue-style-loader "^4.1.3"
-    webpack "^5.54.0"
-    webpack-bundle-analyzer "^4.4.0"
-    webpack-chain "^6.5.1"
-    webpack-dev-server "^4.7.3"
-    webpack-merge "^5.7.3"
-    webpack-virtual-modules "^0.4.2"
-    whatwg-fetch "^3.6.2"
-
-"@vue/cli-shared-utils@^5.0.6":
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-5.0.6.tgz#f47202d68dfd4c2e41160c63721263b39cd97d1e"
-  integrity sha512-5HmlRtMByOCFO0P3mMUx8dVruTRhZ3pqQ0f1cCH9TmAoDjetmD/Ib7yx/5KxTHV8QY3xZJxYvgAmOU5C49K5xA==
-  dependencies:
-    "@achrinza/node-ipc" "^9.2.5"
-    chalk "^4.1.2"
-    execa "^1.0.0"
-    joi "^17.4.0"
-    launch-editor "^2.2.1"
-    lru-cache "^6.0.0"
-    node-fetch "^2.6.7"
-    open "^8.0.2"
-    ora "^5.3.0"
-    read-pkg "^5.1.1"
-    semver "^7.3.4"
-    strip-ansi "^6.0.0"
-
-"@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
-  integrity sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==
-  dependencies:
-    consolidate "^0.15.1"
-    hash-sum "^1.0.2"
-    lru-cache "^4.1.2"
-    merge-source-map "^1.1.0"
-    postcss "^7.0.36"
-    postcss-selector-parser "^6.0.2"
-    source-map "~0.6.1"
-    vue-template-es2015-compiler "^1.9.0"
-  optionalDependencies:
-    prettier "^1.18.2 || ^2.0.0"
+    eslint-config-prettier "^8.3.0"
+    eslint-plugin-prettier "^4.0.0"
 
 "@vue/eslint-config-typescript@^11.0.0":
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.0.tgz#bac0cb2d381625b5bf568d2025acffc0fd09113e"
-  integrity sha512-txuRzxnQVmtUvvy9UyWUy9sHWXNeRPGmSPqP53hRtaiUeCTAondI9Ho9GQYI/8/eWljYOST7iA4Aa8sANBkWaA==
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.1.tgz#d79b3656aecea844ec9875bc93155163f684dde7"
+  integrity sha512-0U+nL0nA7ahnGPk3rTN49x76miUwuQtQPQNWOFvAcjg6nFJkIkA8qbGNtXwsuHtwBwRtWpHhShL3zK07v+632w==
   dependencies:
     "@typescript-eslint/eslint-plugin" "^5.0.0"
     "@typescript-eslint/parser" "^5.0.0"
     vue-eslint-parser "^9.0.0"
 
-"@vue/test-utils@^1.1.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.0.tgz#d563decdcd9c68a7bca151d4179a2bfd6d5c3e15"
-  integrity sha512-Xk2Xiyj2k5dFb8eYUKkcN9PzqZSppTlx7LaQWBbdA8tqh3jHr/KHX2/YLhNFc/xwDrgeLybqd+4ZCPJSGPIqeA==
+"@vue/reactivity-transform@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz#da6ae6c8fd77791b9ae21976720d116591e1c4aa"
+  integrity sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==
   dependencies:
-    dom-event-types "^1.0.0"
-    lodash "^4.17.15"
-    pretty "^2.0.0"
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.39"
+    "@vue/shared" "3.2.39"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
 
-"@vue/vue-loader-v15@npm:vue-loader@^15.9.7":
-  version "15.9.8"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.8.tgz#4b0f602afaf66a996be1e534fb9609dc4ab10e61"
-  integrity sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==
+"@vue/reactivity@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.39.tgz#e6e3615fe2288d4232b104640ddabd0729a78c80"
+  integrity sha512-vlaYX2a3qMhIZfrw3Mtfd+BuU+TZmvDrPMa+6lpfzS9k/LnGxkSuf0fhkP0rMGfiOHPtyKoU9OJJJFGm92beVQ==
   dependencies:
-    "@vue/component-compiler-utils" "^3.1.0"
-    hash-sum "^1.0.2"
-    loader-utils "^1.1.0"
-    vue-hot-reload-api "^2.3.0"
-    vue-style-loader "^4.1.0"
+    "@vue/shared" "3.2.39"
 
-"@vue/vue2-jest@^28.0.0":
-  version "28.0.0"
-  resolved "https://registry.yarnpkg.com/@vue/vue2-jest/-/vue2-jest-28.0.0.tgz#6c83b9de275580caba81fa2b0d4b2274205989d8"
-  integrity sha512-Ke8wGaC6umisuV1qFdUGT1I8mhZHZfmRjMRinnjKstMUi39ZYmlcNciJ2/yXWOFmMZjmSM0+mKHsZCIGd07G6w==
+"@vue/runtime-core@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.39.tgz#dc1faccab11b3e81197aba33fb30c9447c1d2c84"
+  integrity sha512-xKH5XP57JW5JW+8ZG1khBbuLakINTgPuINKL01hStWLTTGFOrM49UfCFXBcFvWmSbci3gmJyLl2EAzCaZWsx8g==
   dependencies:
-    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
-    "@vue/component-compiler-utils" "^3.1.0"
-    chalk "^2.1.0"
-    css-tree "^2.0.1"
-    source-map "0.5.6"
+    "@vue/reactivity" "3.2.39"
+    "@vue/shared" "3.2.39"
 
-"@vue/web-component-wrapper@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
-  integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==
-
-"@webassemblyjs/ast@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
-  integrity sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==
+"@vue/runtime-dom@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.39.tgz#4a8cb132bcef316e8151c5ed07fc7272eb064614"
+  integrity sha512-4G9AEJP+sLhsqf5wXcyKVWQKUhI+iWfy0hWQgea+CpaTD7BR0KdQzvoQdZhwCY6B3oleSyNLkLAQwm0ya/wNoA==
   dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+    "@vue/runtime-core" "3.2.39"
+    "@vue/shared" "3.2.39"
+    csstype "^2.6.8"
 
-"@webassemblyjs/floating-point-hex-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz#f6c61a705f0fd7a6aecaa4e8198f23d9dc179e4f"
-  integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==
-
-"@webassemblyjs/helper-api-error@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz#1a63192d8788e5c012800ba6a7a46c705288fd16"
-  integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==
-
-"@webassemblyjs/helper-buffer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz#832a900eb444884cde9a7cad467f81500f5e5ab5"
-  integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==
-
-"@webassemblyjs/helper-numbers@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz#64d81da219fbbba1e3bd1bfc74f6e8c4e10a62ae"
-  integrity sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==
+"@vue/server-renderer@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.39.tgz#4358292d925233b0d8b54cf0513eaece8b2351c5"
+  integrity sha512-1yn9u2YBQWIgytFMjz4f/t0j43awKytTGVptfd3FtBk76t1pd8mxbek0G/DrnjJhd2V7mSTb5qgnxMYt8Z5iSQ==
   dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
-    "@xtuc/long" "4.2.2"
+    "@vue/compiler-ssr" "3.2.39"
+    "@vue/shared" "3.2.39"
 
-"@webassemblyjs/helper-wasm-bytecode@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz#f328241e41e7b199d0b20c18e88429c4433295e1"
-  integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==
+"@vue/shared@3.2.39":
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.39.tgz#302df167559a1a5156da162d8cc6760cef67f8e3"
+  integrity sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==
 
-"@webassemblyjs/helper-wasm-section@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz#21ee065a7b635f319e738f0dd73bfbda281c097a"
-  integrity sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==
+"@vue/test-utils@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.2.tgz#0b5edd683366153d5bc5a91edc62f292118710eb"
+  integrity sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==
+
+"@vueuse/core@^9.1.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.2.0.tgz#58e3588b9bc5a69010aa9104b00056ee9ebff738"
+  integrity sha512-/MZ6qpz6uSyaXrtoeBWQzAKRG3N7CvfVWvQxiM3ei3Xe5ydOjjtVbo7lGl9p8dECV93j7W8s63A8H0kFLpLyxg==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
+    "@types/web-bluetooth" "^0.0.15"
+    "@vueuse/metadata" "9.2.0"
+    "@vueuse/shared" "9.2.0"
+    vue-demi "*"
 
-"@webassemblyjs/ieee754@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz#963929e9bbd05709e7e12243a099180812992614"
-  integrity sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==
+"@vueuse/head@^0.7.9":
+  version "0.7.12"
+  resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-0.7.12.tgz#bdb2185654399d10b10c4e94b52f6129e9ca4f67"
+  integrity sha512-sRcrE6VohiHInQR0sB0U8H8x2hAKdo+AIhd5PWBLx1jUp2vwyeQyA/4rlCzP5CMDB8z61MLvsOCApFJrRMRtTQ==
   dependencies:
-    "@xtuc/ieee754" "^1.2.0"
+    "@zhead/schema-vue" "^0.7.3"
 
-"@webassemblyjs/leb128@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.1.tgz#ce814b45574e93d76bae1fb2644ab9cdd9527aa5"
-  integrity sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==
+"@vueuse/metadata@9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.2.0.tgz#6bf7c9c44b9f5ece405837226a0e04a997994458"
+  integrity sha512-exN4KE6iquxDCdt72BgEhb3tlOpECtD61AUdXnUqBTIUCl70x1Ar/QXo3bYcvxmdMS2/peQyfeTzBjRTpvL5xw==
+
+"@vueuse/router@^9.0.2":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/router/-/router-9.2.0.tgz#c8643d50882115b08e2fcb239aef0ff2e3d6d276"
+  integrity sha512-N80vwh6EGFJiUIyCbfGhEDHzolNvTEPzJBLTuwy7pJU91VjNotMsSvUhwEI8l/cBpdBaIL9dUxRqXDBVrQBahA==
   dependencies:
-    "@xtuc/long" "4.2.2"
+    "@vueuse/shared" "9.2.0"
+    vue-demi "*"
 
-"@webassemblyjs/utf8@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.1.tgz#d1f8b764369e7c6e6bae350e854dec9a59f0a3ff"
-  integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==
-
-"@webassemblyjs/wasm-edit@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz#ad206ebf4bf95a058ce9880a8c092c5dec8193d6"
-  integrity sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==
+"@vueuse/shared@9.2.0", "@vueuse/shared@^9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.2.0.tgz#7831051b2c1d01c3413c749468ee53a86024510e"
+  integrity sha512-NnRp/noSWuXW0dKhZK5D0YLrDi0nmZ18UeEgwXQq7Ul5TTP93lcNnKjrHtd68j2xFB/l59yPGFlCryL692bnrA==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/helper-wasm-section" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-opt" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    "@webassemblyjs/wast-printer" "1.11.1"
-
-"@webassemblyjs/wasm-gen@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz#86c5ea304849759b7d88c47a32f4f039ae3c8f76"
-  integrity sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wasm-opt@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz#657b4c2202f4cf3b345f8a4c6461c8c2418985f2"
-  integrity sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-
-"@webassemblyjs/wasm-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz#86ca734534f417e9bd3c67c7a1c75d8be41fb199"
-  integrity sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
-
-"@webassemblyjs/wast-printer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz#d0c73beda8eec5426f10ae8ef55cee5e7084c2f0"
-  integrity sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==
-  dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@xtuc/long" "4.2.2"
-
-"@webpack-cli/configtest@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.2.0.tgz#7b20ce1c12533912c3b217ea68262365fa29a6f5"
-  integrity sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==
-
-"@webpack-cli/info@^1.5.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.5.0.tgz#6c78c13c5874852d6e2dd17f08a41f3fe4c261b1"
-  integrity sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==
-  dependencies:
-    envinfo "^7.7.3"
-
-"@webpack-cli/serve@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.7.0.tgz#e1993689ac42d2b16e9194376cfb6753f6254db1"
-  integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==
+    vue-demi "*"
 
 "@wry/context@^0.6.0":
   version "0.6.1"
@@ -2958,47 +2109,37 @@
     tslib "^1.9.3"
 
 "@wry/equality@^0.5.0":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.2.tgz#72c8a7a7d884dff30b612f4f8464eba26c080e73"
-  integrity sha512-oVMxbUXL48EV/C0/M7gLVsoK6qRHPS85x8zECofEZOVvxGmIPLA9o5Z27cc2PoAyZz1S2VoM2A7FLAnpfGlneA==
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.3.tgz#fafebc69561aa2d40340da89fa7dc4b1f6fb7831"
+  integrity sha512-avR+UXdSrsF2v8vIqIgmeTY0UR91UT+IyablCyKe/uk22uOJ8fusKZnH9JH9e1/EtLeNJBtagNmL3eJdnOV53g==
   dependencies:
     tslib "^2.3.0"
 
 "@wry/trie@^0.3.0":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.1.tgz#2279b790f15032f8bcea7fc944d27988e5b3b139"
-  integrity sha512-WwB53ikYudh9pIorgxrkHKrQZcCqNM/Q/bDzZBffEaGUKGuHrRb3zZUT9Sh2qw9yogC7SsdRmQ1ER0pqvd3bfw==
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.2.tgz#a06f235dc184bd26396ba456711f69f8c35097e6"
+  integrity sha512-yRTyhWSls2OY/pYLfwff867r8ekooZ4UI+/gxot5Wj8EFwSf2rG+n+Mo/6LoLQm1TKA4GRj2+LCpbfS937dClQ==
   dependencies:
     tslib "^2.3.0"
 
-"@xtuc/ieee754@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
-  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
+"@zhead/schema-vue@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@zhead/schema-vue/-/schema-vue-0.7.3.tgz#cc87e5884b0bdeeb67d1207e05478eef85bba8af"
+  integrity sha512-X9wIugL/7fFoeVbxPDgRvBLdKt2k243ZezU4N85iCHjs4OaGTgXUPQVfb9+uP7dSj2kMSAvhvY6fKe7D9TzbHA==
+  dependencies:
+    "@vueuse/shared" "^9.2.0"
+    "@zhead/schema" "0.7.3"
 
-"@xtuc/long@4.2.2":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
-  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
+"@zhead/schema@0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@zhead/schema/-/schema-0.7.3.tgz#de1c867673c83be0de18588d03b4c07000b2a077"
+  integrity sha512-z7TDtS5YihDW1w5Xk/P5iZ5bHuEajAGsRFs8ipgVSKZSqHy/7Tc4mC6FUfwFciHOj1efMHWf+tFY+byKUdVKug==
 
-abab@^2.0.3, abab@^2.0.5:
+abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
   integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
-accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
-  integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
-  dependencies:
-    mime-types "~2.1.34"
-    negotiator "0.6.3"
-
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -3007,12 +2148,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-import-assertions@^1.7.6:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
-  integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
-
-acorn-jsx@^5.3.2:
+acorn-jsx@^5.2.0, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -3031,25 +2167,15 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.0.0, acorn-walk@^8.0.2:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
-  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
-
-acorn@^7.0.0, acorn@^7.1.1:
+acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.4, acorn@^8.0.5, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1:
-  version "8.7.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
-  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
-
-address@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.2.0.tgz#d352a62c92fee90f89a693eccd2a8b2139ab02d9"
-  integrity sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==
+acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
 agent-base@6:
   version "6.0.2"
@@ -3058,26 +2184,7 @@ agent-base@6:
   dependencies:
     debug "4"
 
-ajv-formats@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
-  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
-  dependencies:
-    ajv "^8.0.0"
-
-ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
-  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-
-ajv-keywords@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
-  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
-  dependencies:
-    fast-deep-equal "^3.1.3"
-
-ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.10.0, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -3087,7 +2194,7 @@ ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
+ajv@^8.6.0:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
   integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
@@ -3097,23 +2204,6 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-ansi-escapes@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
-  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
-
-ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
-  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
-  dependencies:
-    type-fest "^0.21.3"
-
-ansi-html-community@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
-  integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
-
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -3129,11 +2219,6 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-regex@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
-  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
-
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -3153,17 +2238,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-ansi-styles@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
-  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
-
-any-promise@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
-  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
-
-anymatch@^3.0.3, anymatch@~3.1.2:
+anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -3198,11 +2273,6 @@ apollo-utilities@^1.0.0:
     ts-invariant "^0.4.0"
     tslib "^1.10.0"
 
-arch@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
-  integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
-
 arg@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@@ -3220,16 +2290,6 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-array-flatten@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
-
-array-flatten@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
-  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
-
 array-includes@^3.1.4:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
@@ -3256,12 +2316,20 @@ array.prototype.flat@^1.2.5:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
-async@^2.6.2:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
-  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
-  dependencies:
-    lodash "^4.17.14"
+asap@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
+
+assertion-error@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
+  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
+
+async-queue-chain@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/async-queue-chain/-/async-queue-chain-1.0.2.tgz#0bb2c6072a7bb60deae106c2c38ac88b6322d8af"
+  integrity sha512-RR6UyatVwsBLi2/Lmrym793tnuT5bNQRT5u5hXoGRhQ3fDQBJWDyg2Yb/OtIx9K8ONqDabOteTGohEE0HhgbOQ==
 
 async@^3.2.3:
   version "3.2.4"
@@ -3278,55 +2346,18 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-autoprefixer@^10, autoprefixer@^10.2.4:
-  version "10.4.7"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.7.tgz#1db8d195f41a52ca5069b7593be167618edbbedf"
-  integrity sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==
+autoprefixer@^10:
+  version "10.4.11"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.11.tgz#835136aff1d9cd43640151e0d2dba00f8eac7c1c"
+  integrity sha512-5lHp6DgRodxlBLSkzHOTcufWFflH1ewfy2hvFQyjrblBFlP/0Yh4O/Wrg4ow8WRlN3AAUFFLAQwX8hTptzqVHg==
   dependencies:
-    browserslist "^4.20.3"
-    caniuse-lite "^1.0.30001335"
+    browserslist "^4.21.3"
+    caniuse-lite "^1.0.30001399"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-babel-jest@^27.1.0, babel-jest@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.5.1.tgz#a1bf8d61928edfefd21da27eb86a695bfd691444"
-  integrity sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==
-  dependencies:
-    "@jest/transform" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/babel__core" "^7.1.14"
-    babel-plugin-istanbul "^6.1.1"
-    babel-preset-jest "^27.5.1"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    slash "^3.0.0"
-
-babel-jest@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-28.1.1.tgz#2a3a4ae50964695b2d694ccffe4bec537c5a3586"
-  integrity sha512-MEt0263viUdAkTq5D7upHPNxvt4n9uLUGa6pPz3WviNBMtOmStb1lIXS3QobnoqM+qnH+vr4EKlvhe8QcmxIYw==
-  dependencies:
-    "@jest/transform" "^28.1.1"
-    "@types/babel__core" "^7.1.14"
-    babel-plugin-istanbul "^6.1.1"
-    babel-preset-jest "^28.1.1"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    slash "^3.0.0"
-
-babel-loader@^8.2.2:
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
-  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
-  dependencies:
-    find-cache-dir "^3.3.1"
-    loader-utils "^2.0.0"
-    make-dir "^3.1.0"
-    schema-utils "^2.6.5"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -3334,60 +2365,29 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-istanbul@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
-  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+babel-plugin-polyfill-corejs2@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
+  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@istanbuljs/load-nyc-config" "^1.0.0"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-instrument "^5.0.4"
-    test-exclude "^6.0.0"
-
-babel-plugin-jest-hoist@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz#9be98ecf28c331eb9f5df9c72d6f89deb8181c2e"
-  integrity sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==
-  dependencies:
-    "@babel/template" "^7.3.3"
-    "@babel/types" "^7.3.3"
-    "@types/babel__core" "^7.0.0"
-    "@types/babel__traverse" "^7.0.6"
-
-babel-plugin-jest-hoist@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-28.1.1.tgz#5e055cdcc47894f28341f87f5e35aad2df680b11"
-  integrity sha512-NovGCy5Hn25uMJSAU8FaHqzs13cFoOI4lhIujiepssjCKRsAo3TA734RDWSGxuFTsUJXerYOqQQodlxgmtqbzw==
-  dependencies:
-    "@babel/template" "^7.3.3"
-    "@babel/types" "^7.3.3"
-    "@types/babel__core" "^7.1.14"
-    "@types/babel__traverse" "^7.0.6"
-
-babel-plugin-polyfill-corejs2@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz#440f1b70ccfaabc6b676d196239b138f8a2cfba5"
-  integrity sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==
-  dependencies:
-    "@babel/compat-data" "^7.13.11"
-    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
     semver "^6.1.1"
 
-babel-plugin-polyfill-corejs3@^0.5.0:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
-  integrity sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==
+babel-plugin-polyfill-corejs3@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.6.0.tgz#56ad88237137eade485a71b52f72dbed57c6230a"
+  integrity sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.1"
-    core-js-compat "^3.21.0"
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    core-js-compat "^3.25.1"
 
-babel-plugin-polyfill-regenerator@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
-  integrity sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==
+babel-plugin-polyfill-regenerator@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
+  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
 
 babel-polyfill@6.26.0:
   version "6.26.0"
@@ -3398,40 +2398,6 @@ babel-polyfill@6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
-babel-preset-current-node-syntax@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
-  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
-  dependencies:
-    "@babel/plugin-syntax-async-generators" "^7.8.4"
-    "@babel/plugin-syntax-bigint" "^7.8.3"
-    "@babel/plugin-syntax-class-properties" "^7.8.3"
-    "@babel/plugin-syntax-import-meta" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.3"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-syntax-top-level-await" "^7.8.3"
-
-babel-preset-jest@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz#91f10f58034cb7989cb4f962b69fa6eef6a6bc81"
-  integrity sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==
-  dependencies:
-    babel-plugin-jest-hoist "^27.5.1"
-    babel-preset-current-node-syntax "^1.0.0"
-
-babel-preset-jest@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-28.1.1.tgz#5b6e5e69f963eb2d70f739c607b8f723c0ee75e4"
-  integrity sha512-FCq9Oud0ReTeWtcneYf/48981aTfXYuB9gbU4rBNNJVBSQ6ssv7E6v/qvbBxtOWwZFXjLZwpg+W3q7J6vhH25g==
-  dependencies:
-    babel-plugin-jest-hoist "^28.1.1"
-    babel-preset-current-node-syntax "^1.0.0"
-
 babel-runtime@6.26.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -3445,77 +2411,25 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-base64-js@^1.3.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
-  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
-
-batch@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
-  integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
-
 bezier-easing@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
   integrity sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==
 
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bl@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
-  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
-  dependencies:
-    buffer "^5.5.0"
-    inherits "^2.0.4"
-    readable-stream "^3.4.0"
+birpc@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/birpc/-/birpc-0.1.1.tgz#10b243ffe5a21ccaf4cbaf5a09a6f0cc035c4312"
+  integrity sha512-B64AGL4ug2IS2jvV/zjTYDD1L+2gOJTT7Rv+VaK7KVQtQOo/xZbCDsh7g727ipckmU+QJYRqo5RcifVr0Kgcmg==
 
-bluebird@^3.1.1:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
-  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
-
-blurhash@^1.1.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-1.1.5.tgz#3034104cd5dce5a3e5caa871ae2f0f1f2d0ab566"
-  integrity sha512-a+LO3A2DfxTaTztsmkbLYmUzUeApi0LZuKalwbNmqAHR6HhJGMt1qSV/R3wc+w4DL28holjqO3Bg74aUGavGjg==
-
-body-parser@1.20.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
-  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
-  dependencies:
-    bytes "3.1.2"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "2.0.0"
-    destroy "1.2.0"
-    http-errors "2.0.0"
-    iconv-lite "0.4.24"
-    on-finished "2.4.1"
-    qs "6.10.3"
-    raw-body "2.5.1"
-    type-is "~1.6.18"
-    unpipe "1.0.0"
-
-bonjour-service@^1.0.11:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.13.tgz#4ac003dc1626023252d58adf2946f57e5da450c1"
-  integrity sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==
-  dependencies:
-    array-flatten "^2.1.2"
-    dns-equal "^1.0.0"
-    fast-deep-equal "^3.1.3"
-    multicast-dns "^7.2.5"
+blurhash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-2.0.0.tgz#c2e6392043d5355241cf9ddaec9359023ea57a40"
+  integrity sha512-fdEZnyJZ5E5s9neCfZUMSMkKfMtdKz1fG53t/iYvMjUFUsDnyZ1YnRRayKBK/B8cilNwe5gaIrPF8QlLrukEZQ==
 
 boolbase@^1.0.0:
   version "1.0.0"
@@ -3549,51 +2463,21 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4.16.6, browserslist@^4.20.2, browserslist@^4.20.3, browserslist@^4.20.4:
-  version "4.20.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.4.tgz#98096c9042af689ee1e0271333dbc564b8ce4477"
-  integrity sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw==
+browserslist@^4.21.3, browserslist@^4.21.4:
+  version "4.21.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
   dependencies:
-    caniuse-lite "^1.0.30001349"
-    electron-to-chromium "^1.4.147"
-    escalade "^3.1.1"
-    node-releases "^2.0.5"
-    picocolors "^1.0.0"
-
-bs-logger@0.x:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
-  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
-  dependencies:
-    fast-json-stable-stringify "2.x"
-
-bser@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
-  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
-  dependencies:
-    node-int64 "^0.4.0"
-
-buefy@^0.9.0:
-  version "0.9.21"
-  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.21.tgz#1b01f4dafefe958ca7934447dfe821dfef18d2fe"
-  integrity sha512-geOJgzi5jFDyRJ9Zl0379yyRBatZ6Qg83kRnCJTb7/nCuXcfXd/eis3tFaDTGuntnfv2MezHzc092OIHwgRwAg==
-  dependencies:
-    bulma "0.9.3"
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.9"
 
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
-buffer@^5.5.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
-  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
-  dependencies:
-    base64-js "^1.3.1"
-    ieee754 "^1.1.13"
-
 builtin-modules@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
@@ -3604,25 +2488,33 @@ bulma-divider@^0.2.0:
   resolved "https://registry.yarnpkg.com/bulma-divider/-/bulma-divider-0.2.0.tgz#a9b4d9fe8b270c7cb7573023c575062bc62616f3"
   integrity sha512-REe3k56GECRfDaqFjC8cwLhV4RxXmV0RubuzDJqwior9wlJcdHlN0qfW0tvUX+qphikaTQegIeRuhjRIAqkjkw==
 
-bulma@0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
-  integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
+bulma@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"
+  integrity sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==
 
-bytes@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
-  integrity sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==
-
-bytes@3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
-  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+c8@^7.12.0:
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/c8/-/c8-7.12.0.tgz#402db1c1af4af5249153535d1c84ad70c5c96b14"
+  integrity sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@istanbuljs/schema" "^0.1.3"
+    find-up "^5.0.0"
+    foreground-child "^2.0.0"
+    istanbul-lib-coverage "^3.2.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-reports "^3.1.4"
+    rimraf "^3.0.2"
+    test-exclude "^6.0.0"
+    v8-to-istanbul "^9.0.0"
+    yargs "^16.2.0"
+    yargs-parser "^20.2.9"
 
 cac@^6.7.12:
-  version "6.7.12"
-  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.12.tgz#6fb5ea2ff50bd01490dbda497f4ae75a99415193"
-  integrity sha512-rM7E2ygtMkJqD9c7WnFU6fruFcN3xe4FM5yUmgxhZzIKJk4uHl9U/fhwdajGFQbQuv43FAUo1Fe8gX/oIKDeSA==
+  version "6.7.14"
+  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
 
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
@@ -3637,48 +2529,38 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camel-case@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
-  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
-  dependencies:
-    pascal-case "^3.1.2"
-    tslib "^2.0.3"
-
 camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-camelcase@^5.0.0, camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+caniuse-lite@^1.0.30001399, caniuse-lite@^1.0.30001400:
+  version "1.0.30001407"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001407.tgz#92281a6ee67cb90bfd8a6a1201fcc2dc19b60a15"
+  integrity sha512-4ydV+t4P7X3zH83fQWNDX/mQEzYomossfpViCOx9zHBSMV+rIe3LFqglHHtVyvNl1FhTNxPxs3jei82iqOW04w==
 
-camelcase@^6.0.0, camelcase@^6.2.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
-  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+case@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/case/-/case-1.6.3.tgz#0a4386e3e9825351ca2e6216c60467ff5f1ea1c9"
+  integrity sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ==
 
-caniuse-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
-  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
+caseless@^0.12.0, caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
+
+chai@^4.3.6:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.6.tgz#ffe4ba2d9fa9d6680cc0b370adae709ec9011e9c"
+  integrity sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q==
   dependencies:
-    browserslist "^4.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001349:
-  version "1.0.30001355"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001355.tgz#e240b7177443ed0198c737a7f609536976701c77"
-  integrity sha512-Sd6pjJHF27LzCB7pT7qs+kuX2ndurzCzkpJl6Qct7LPSZ9jn0bkOA8mdgMgmqnQAWLVOOGjLpc+66V57eLtb1g==
-
-case-sensitive-paths-webpack-plugin@^2.3.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
-  integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
+    assertion-error "^1.1.0"
+    check-error "^1.0.2"
+    deep-eql "^3.0.1"
+    get-func-name "^2.0.0"
+    loupe "^2.3.1"
+    pathval "^1.1.1"
+    type-detect "^4.0.5"
 
 chalk@^1.1.3:
   version "1.1.3"
@@ -3691,7 +2573,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0:
+chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3700,15 +2582,7 @@ chalk@^2.0.0, chalk@^2.1.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3716,22 +2590,12 @@ chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-char-regex@^1.0.2:
+check-error@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
-  integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
+  integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
 
-char-regex@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
-  integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
-
-charcodes@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
-  integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
-
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3746,74 +2610,7 @@ charcodes@^0.2.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-chrome-trace-event@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
-  integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
-
-ci-info@^1.5.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
-  integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
-
-ci-info@^3.2.0:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.2.tgz#6d2967ffa407466481c6c90b6e16b3098f080128"
-  integrity sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==
-
-cjs-module-lexer@^1.0.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
-  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
-
-clean-css@^5.2.2:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.0.tgz#ad3d8238d5f3549e83d5f87205189494bc7cbb59"
-  integrity sha512-YYuuxv4H/iNb1Z/5IbMRoxgrzjWGhOEFfd+groZ5dMCVkpENiMZmwspdrzBo9286JjM1gZJPAyL7ZIdzuvu2AQ==
-  dependencies:
-    source-map "~0.6.0"
-
-cli-cursor@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  integrity sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==
-  dependencies:
-    restore-cursor "^2.0.0"
-
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-highlight@^2.1.10:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/cli-highlight/-/cli-highlight-2.1.11.tgz#49736fa452f0aaf4fae580e30acb26828d2dc1bf"
-  integrity sha512-9KDcoEVwyUXrjcJNvHD0NFc/hiwe/WPVYIleQh2O1N2Zro5gWJZ/K+3DGn8w8P/F6FxOgzyC5bxDyHIgCSPhGg==
-  dependencies:
-    chalk "^4.0.0"
-    highlight.js "^10.7.1"
-    mz "^2.4.0"
-    parse5 "^5.1.1"
-    parse5-htmlparser2-tree-adapter "^6.0.0"
-    yargs "^16.0.0"
-
-cli-spinners@^2.5.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.1.tgz#adc954ebe281c37a6319bfa401e6dd2488ffb70d"
-  integrity sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==
-
-clipboardy@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290"
-  integrity sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==
-  dependencies:
-    arch "^2.1.1"
-    execa "^1.0.0"
-    is-wsl "^2.1.1"
-
-cliui@^7.0.2, cliui@^7.0.4:
+cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
   integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
@@ -3822,30 +2619,6 @@ cliui@^7.0.2, cliui@^7.0.4:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-clone-deep@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
-  integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==
-  dependencies:
-    is-plain-object "^2.0.4"
-    kind-of "^6.0.2"
-    shallow-clone "^3.0.0"
-
-clone@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
-  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
-
-co@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
-  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
-
-collect-v8-coverage@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
-  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3870,24 +2643,14 @@ color-name@^1.1.4, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colord@^2.9.1:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.2.tgz#25e2bacbbaa65991422c07ea209e2089428effb1"
-  integrity sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==
-
-colorette@^2.0.10, colorette@^2.0.14:
-  version "2.0.19"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
-  integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
-
-combined-stream@^1.0.8:
+combined-stream@^1.0.6, combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.19.0, commander@^2.20.0:
+commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3897,128 +2660,49 @@ commander@^4.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
-commander@^7.0.0, commander@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
-  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
-
-commander@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
-  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
-
 common-tags@^1.4.0, common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
   integrity sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==
 
-commondir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
-
-compressible@~2.0.16:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
-  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
-  dependencies:
-    mime-db ">= 1.43.0 < 2"
-
-compression@^1.7.4:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
-  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
-  dependencies:
-    accepts "~1.3.5"
-    bytes "3.0.0"
-    compressible "~2.0.16"
-    debug "2.6.9"
-    on-headers "~1.0.2"
-    safe-buffer "5.1.2"
-    vary "~1.1.2"
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-condense-newlines@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
-  integrity sha512-P7X+QL9Hb9B/c8HI5BFFKmjgBu2XpQuF98WZ9XkO+dBGgk5XgwiQz7o1SmpglNWId3581UcS0SFAWfoIhMHPfg==
+concat-stream@^1.6.0, concat-stream@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
   dependencies:
-    extend-shallow "^2.0.1"
-    is-whitespace "^0.3.0"
-    kind-of "^3.0.2"
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
 
-config-chain@^1.1.13:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
-  integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
+connect@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
+  integrity sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==
   dependencies:
-    ini "^1.3.4"
-    proto-list "~1.2.1"
+    debug "2.6.9"
+    finalhandler "1.1.2"
+    parseurl "~1.3.3"
+    utils-merge "1.0.1"
 
-connect-history-api-fallback@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
-  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
-
-consolidate@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
-  integrity sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==
-  dependencies:
-    bluebird "^3.1.1"
-
-content-disposition@0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
-  integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
-  dependencies:
-    safe-buffer "5.2.1"
-
-content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
-
-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
   dependencies:
     safe-buffer "~5.1.1"
 
-cookie-signature@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
-
-cookie@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
-  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
-
-copy-webpack-plugin@^9.0.1:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz#2d2c460c4c4695ec0a58afb2801a1205256c4e6b"
-  integrity sha512-rxnR7PaGigJzhqETHGmAcxKnLZSR5u1Y3/bcIv/1FnqXedcL/E2ewK7ZCNrArJKCiSv8yVXhTqetJh8inDvfsA==
+core-js-compat@^3.25.1:
+  version "3.25.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.25.2.tgz#7875573586809909c69e03ef310810c1969ee138"
+  integrity sha512-TxfyECD4smdn3/CjWxczVtJqVLEEC2up7/82t7vC0AzNogr+4nQ8vyF7abxAuTXWvjTClSbvGhU0RgqA4ToQaQ==
   dependencies:
-    fast-glob "^3.2.7"
-    glob-parent "^6.0.1"
-    globby "^11.0.3"
-    normalize-path "^3.0.0"
-    schema-utils "^3.1.1"
-    serialize-javascript "^6.0.0"
-
-core-js-compat@^3.21.0, core-js-compat@^3.22.1, core-js-compat@^3.8.3:
-  version "3.23.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.23.1.tgz#23d44d9f209086e60dabf9130cea7719af6e199b"
-  integrity sha512-KeYrEc8t6FJsKYB2qnDwRHWaC0cJNaqlHfCpMe5q3j/W1nje3moib/txNklddLPCtGb+etcBIyJ8zuMa/LN5/A==
-  dependencies:
-    browserslist "^4.20.4"
-    semver "7.0.0"
+    browserslist "^4.21.4"
 
 core-js@2.6.0:
   version "2.6.0"
@@ -4030,59 +2714,12 @@ core-js@^2.4.0, core-js@^2.5.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.6.4, core-js@^3.8.3:
-  version "3.23.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.23.1.tgz#9f9a9255115f62c512db56d567f636da32ca0b78"
-  integrity sha512-wfMYHWi1WQjpgZNC9kAlN4ut04TM9fUTdi7CqIoTVM7yaiOUQTklOzfb+oWH3r9edQcT3F887swuVmxrV+CC8w==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
-cosmiconfig@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
-  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.2.1"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.10.0"
-
-cross-spawn@^5.0.1:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
-  integrity sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==
-  dependencies:
-    lru-cache "^4.0.1"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^6.0.0:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -4096,134 +2733,20 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-declaration-sorter@^6.2.2:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz#72ebd995c8f4532ff0036631f7365cce9759df14"
-  integrity sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==
-
-css-loader@^6.5.0:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.1.tgz#e98106f154f6e1baf3fc3bc455cb9981c1d5fd2e"
-  integrity sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==
-  dependencies:
-    icss-utils "^5.1.0"
-    postcss "^8.4.7"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
-    postcss-modules-values "^4.0.0"
-    postcss-value-parser "^4.2.0"
-    semver "^7.3.5"
-
-css-minimizer-webpack-plugin@^3.0.2:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f"
-  integrity sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==
-  dependencies:
-    cssnano "^5.0.6"
-    jest-worker "^27.0.2"
-    postcss "^8.3.5"
-    schema-utils "^4.0.0"
-    serialize-javascript "^6.0.0"
-    source-map "^0.6.1"
-
-css-select@^4.1.3:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
-  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^6.0.1"
-    domhandler "^4.3.1"
-    domutils "^2.8.0"
-    nth-check "^2.0.1"
-
-css-tree@^1.1.2, css-tree@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
-  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
-css-tree@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.1.0.tgz#170e27ccf94e7c5facb183765c25898be843d1d2"
-  integrity sha512-PcysZRzToBbrpoUrZ9qfblRIRf8zbEAkU0AIpQFtgkFK0vSbzOmBCvdSAx2Zg7Xx5wiYJKUKk0NMP7kxevie/A==
-  dependencies:
-    mdn-data "2.0.27"
-    source-map-js "^1.0.1"
-
-css-what@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
-  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-default@^5.2.11:
-  version "5.2.11"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.11.tgz#28350471bc1af9df14052472b61340347f453a53"
-  integrity sha512-4PadR1NtuaIK8MvLNuY7MznK4WJteldGlzCiMaaTiOUP+apeiIvUDIXykzUOoqgOOUAHrU64ncdD90NfZR3LSQ==
-  dependencies:
-    css-declaration-sorter "^6.2.2"
-    cssnano-utils "^3.1.0"
-    postcss-calc "^8.2.3"
-    postcss-colormin "^5.3.0"
-    postcss-convert-values "^5.1.2"
-    postcss-discard-comments "^5.1.2"
-    postcss-discard-duplicates "^5.1.0"
-    postcss-discard-empty "^5.1.1"
-    postcss-discard-overridden "^5.1.0"
-    postcss-merge-longhand "^5.1.5"
-    postcss-merge-rules "^5.1.2"
-    postcss-minify-font-values "^5.1.0"
-    postcss-minify-gradients "^5.1.1"
-    postcss-minify-params "^5.1.3"
-    postcss-minify-selectors "^5.2.1"
-    postcss-normalize-charset "^5.1.0"
-    postcss-normalize-display-values "^5.1.0"
-    postcss-normalize-positions "^5.1.0"
-    postcss-normalize-repeat-style "^5.1.0"
-    postcss-normalize-string "^5.1.0"
-    postcss-normalize-timing-functions "^5.1.0"
-    postcss-normalize-unicode "^5.1.0"
-    postcss-normalize-url "^5.1.0"
-    postcss-normalize-whitespace "^5.1.1"
-    postcss-ordered-values "^5.1.2"
-    postcss-reduce-initial "^5.1.0"
-    postcss-reduce-transforms "^5.1.0"
-    postcss-svgo "^5.1.0"
-    postcss-unique-selectors "^5.1.1"
-
-cssnano-utils@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861"
-  integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
-
-cssnano@^5.0.0, cssnano@^5.0.6:
-  version "5.1.11"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.11.tgz#3bb003380718c7948ce3813493370e8946caf04b"
-  integrity sha512-2nx+O6LvewPo5EBtYrKc8762mMkZRk9cMGIOP4UlkmxHm7ObxH+zvsJJ+qLwPkUc4/yumL/qJkavYi9NlodWIQ==
-  dependencies:
-    cssnano-preset-default "^5.2.11"
-    lilconfig "^2.0.3"
-    yaml "^1.10.2"
-
-csso@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
-  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
-  dependencies:
-    css-tree "^1.1.2"
-
-cssom@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
-  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+cssom@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
 
 cssom@~0.3.6:
   version "0.3.8"
@@ -4237,29 +2760,29 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-data-urls@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
-  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+csstype@^2.6.8:
+  version "2.6.21"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+
+data-urls@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
+  integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
   dependencies:
-    abab "^2.0.3"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.0.0"
+    abab "^2.0.6"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
 
 date-fns-tz@^1.1.6:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.4.tgz#8b0e75beb771c7e9f1597aba467dc14431bb5403"
-  integrity sha512-O47vEyz85F2ax/ZdhMBJo187RivZGjH6V0cPjPzpm/yi6YffJg4upD/8ibezO11ezZwP3QYlBHh/t4JhRNx0Ow==
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.7.tgz#e8e9d2aaceba5f1cc0e677631563081fdcb0e69a"
+  integrity sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==
 
 date-fns@^2.16.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
-  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
-
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
 
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
@@ -4268,59 +2791,42 @@ debug@2.6.9, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
-debug@^3.1.1, debug@^3.2.7:
+debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
   dependencies:
     ms "^2.1.1"
 
-decimal.js@^10.2.1:
-  version "10.3.1"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
-  integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
+decimal.js@^10.3.1:
+  version "10.4.1"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.1.tgz#be75eeac4a2281aace80c1a8753587c27ef053e7"
+  integrity sha512-F29o+vci4DodHYT9UrR5IEbfBw9pE5eSapIJdTqXK5+6hq+t8VRxwQyKlW2i+KDKFkkJQRvFyI/QXD83h8LyQw==
 
-dedent@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
-  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
+deep-eql@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
+  integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
+  dependencies:
+    type-detect "^4.0.0"
 
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
-  integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
-
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-gateway@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
-  integrity sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==
-  dependencies:
-    execa "^5.0.0"
-
-defaults@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
-  integrity sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==
-  dependencies:
-    clone "^1.0.2"
-
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -4339,36 +2845,16 @@ defined@^1.0.0:
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
   integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==
 
+defu@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.0.tgz#7a5411655da73335c7d933256911f17c74443e2d"
+  integrity sha512-pOFYRTIhoKujrmbTRhcW5lYQLBXw/dlTwfI8IguF1QCDJOcJzNH1w+YFjxqy6BAuJrClTy6MUE8q+oKJ2FLsIw==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-depd@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
-  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
-
-depd@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
-
-destroy@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
-  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
-
-detect-newline@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
-  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
-
-detect-node@^2.0.4:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
-  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
-
 detective@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
@@ -4378,21 +2864,16 @@ detective@^5.2.1:
     defined "^1.0.0"
     minimist "^1.2.6"
 
+diacritics@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/diacritics/-/diacritics-1.3.0.tgz#3efa87323ebb863e6696cebb0082d48ff3d6f7a1"
+  integrity sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==
+
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
-diff-sequences@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
-  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
-
-diff-sequences@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-28.1.1.tgz#9989dc731266dc2903457a70e996f3a041913ac6"
-  integrity sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==
-
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -4405,18 +2886,6 @@ dlv@^1.1.0, dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
-dns-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
-  integrity sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==
-
-dns-packet@^5.2.2:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.4.0.tgz#1f88477cf9f27e78a213fb6d118ae38e759a879b"
-  integrity sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==
-  dependencies:
-    "@leichtgewicht/ip-codec" "^2.0.1"
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -4431,18 +2900,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-converter@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
-  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
-  dependencies:
-    utila "~0.4"
-
-dom-event-types@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/dom-event-types/-/dom-event-types-1.1.0.tgz#120c1f92ddea7758db1ccee0a100a33c39f4701b"
-  integrity sha512-jNCX+uNJ3v38BKvPbpki6j5ItVlnSqVV6vDWGS6rExzCMjsc39frLjm1n91o6YaKK6AZl0wLloItW6C6mr61BQ==
-
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -4457,21 +2914,21 @@ domelementtype@^2.0.1, domelementtype@^2.2.0:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
-domexception@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
-  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+domexception@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673"
+  integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==
   dependencies:
-    webidl-conversions "^5.0.0"
+    webidl-conversions "^7.0.0"
 
-domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
+domhandler@^4.0.0, domhandler@^4.2.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
   integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
   dependencies:
     domelementtype "^2.2.0"
 
-domutils@^2.5.2, domutils@^2.8.0:
+domutils@^2.5.2:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
   integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
@@ -4480,14 +2937,6 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
-dot-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
-  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-
 dot-object@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/dot-object/-/dot-object-2.1.4.tgz#c6c54e9fca510b4d0ea4d65acf33726963843b5f"
@@ -4496,36 +2945,6 @@ dot-object@^2.1.4:
     commander "^4.0.0"
     glob "^7.1.5"
 
-dotenv-expand@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
-  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
-
-dotenv@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
-  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
-
-duplexer@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
-  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
-
-easy-stack@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/easy-stack/-/easy-stack-1.0.1.tgz#8afe4264626988cabb11f3c704ccd0c835411066"
-  integrity sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==
-
-editorconfig@^0.15.3:
-  version "0.15.3"
-  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
-  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
-  dependencies:
-    commander "^2.19.0"
-    lru-cache "^4.1.5"
-    semver "^5.6.0"
-    sigmund "^1.0.1"
-
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -4538,85 +2957,46 @@ ejs@^3.1.6:
   dependencies:
     jake "^10.8.5"
 
-electron-to-chromium@^1.4.147:
-  version "1.4.160"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.160.tgz#da54e24fddeaca52f37965c7bec1bd964c97d487"
-  integrity sha512-O1Z12YfyeX2LXYO7MdHIPazGXzLzQnr1ADW55U2ARQsJBPgfpJz3u+g3Mo2l1wSyfOCdiGqaX9qtV4XKZ0HNRA==
-
-emittery@^0.10.2:
-  version "0.10.2"
-  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
-  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
-
-emittery@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
-  integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
+electron-to-chromium@^1.4.251:
+  version "1.4.255"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.255.tgz#dc52d1095b876ed8acf25865db10265b02b1d6e1"
+  integrity sha512-H+mFNKow6gi2P5Gi2d1Fvd3TUEJlB9CF7zYaIV9T83BE3wP1xZ0mRPbNTm0KUjyd1QiVy7iKXuIcjlDtBQMiAQ==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-end-of-stream@^1.1.0:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
-  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
-  dependencies:
-    once "^1.4.0"
-
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.9.3:
-  version "5.9.3"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
-  integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
-  dependencies:
-    graceful-fs "^4.2.4"
-    tapable "^2.2.0"
-
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-envinfo@^7.7.3:
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
-  integrity sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==
+entities@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
+  integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
 
-error-ex@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
-  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
-  dependencies:
-    is-arrayish "^0.2.1"
-
-error-stack-parser@^2.0.6:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
-  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
-  dependencies:
-    stackframe "^1.3.4"
+entities@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
 
 es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.1.tgz#027292cd6ef44bd12b1913b828116f54787d1814"
-  integrity sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.2.tgz#8495a07bc56d342a3b8ea3ab01bd986700c2ccb3"
+  integrity sha512-XxXQuVNrySBNlEkTYJoDNFe5+s2yIOpzq80sUHEdPdQr0S5nTLz4ZPPPswNIpKseDDUS5yghX1gfLIHQZ1iNuQ==
   dependencies:
     call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
     function.prototype.name "^1.1.5"
-    get-intrinsic "^1.1.1"
+    get-intrinsic "^1.1.2"
     get-symbol-description "^1.0.0"
     has "^1.0.3"
     has-property-descriptors "^1.0.0"
@@ -4628,19 +3008,14 @@ es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19
     is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
     is-weakref "^1.0.2"
-    object-inspect "^1.12.0"
+    object-inspect "^1.12.2"
     object-keys "^1.1.1"
-    object.assign "^4.1.2"
+    object.assign "^4.1.4"
     regexp.prototype.flags "^1.4.3"
     string.prototype.trimend "^1.0.5"
     string.prototype.trimstart "^1.0.5"
     unbox-primitive "^1.0.2"
 
-es-module-lexer@^0.9.0:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
-  integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
-
 es-shim-unscopables@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
@@ -4657,6 +3032,141 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+esbuild-android-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.8.tgz#625863e705d4ed32a3b4c0b997dbf9454d50a455"
+  integrity sha512-bVh8FIKOolF7/d4AMzt7xHlL0Ljr+mYKSHI39TJWDkybVWHdn6+4ODL3xZGHOxPpdRpitemXA1WwMKYBsw8dGw==
+  dependencies:
+    esbuild-wasm "0.15.8"
+
+esbuild-android-arm64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.8.tgz#cd62afe08652ac146014386d3adbe7a9d33db1b0"
+  integrity sha512-ReAMDAHuo0H1h9LxRabI6gwYPn8k6WiUeyxuMvx17yTrJO+SCnIfNc/TSPFvDwtK9MiyiKG/2dBYHouT/M0BXQ==
+
+esbuild-darwin-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.8.tgz#eb668dc973165f85aefecdca8aa60231acb2f705"
+  integrity sha512-KaKcGfJ+yto7Fo5gAj3xwxHMd1fBIKatpCHK8znTJLVv+9+NN2/tIPBqA4w5rBwjX0UqXDeIE2v1xJP+nGEXgA==
+
+esbuild-darwin-arm64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.8.tgz#91c110daa46074fdfc18f411247ca0d1228aacc3"
+  integrity sha512-8tjEaBgAKnXCkP7bhEJmEqdG9HEV6oLkF36BrMzpfW2rgaw0c48Zrxe+9RlfeGvs6gDF4w+agXyTjikzsS3izw==
+
+esbuild-freebsd-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.8.tgz#22270945a9bf9107c340eb73922e122bbe84f8ad"
+  integrity sha512-jaxcsGHYzn2L0/lffON2WfH4Nc+d/EwozVTP5K2v016zxMb5UQMhLoJzvLgBqHT1SG0B/mO+a+THnJCMVg15zw==
+
+esbuild-freebsd-arm64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.8.tgz#0efe2741fbcaa2cfd31b9f94bd3ca7385b68c469"
+  integrity sha512-2xp2UlljMvX8HExtcg7VHaeQk8OBU0CSl1j18B5CcZmSDkLF9p3utuMXIopG3a08fr9Hv+Dz6+seSXUow/G51w==
+
+esbuild-linux-32@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.8.tgz#6fc98659105da5c0d1fedfce3b7b9fa24ebee0d4"
+  integrity sha512-9u1E54BRz1FQMl86iaHK146+4ID2KYNxL3trLZT4QLLx3M7Q9n4lGG3lrzqUatGR2cKy8c33b0iaCzsItZWkFg==
+
+esbuild-linux-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.8.tgz#8e738c926d145cdd4e9bcb2febc96d89dc27dc09"
+  integrity sha512-4HxrsN9eUzJXdVGMTYA5Xler82FuZUu21bXKN42zcLHHNKCAMPUzD62I+GwDhsdgUBAUj0tRXDdsQHgaP6v0HA==
+
+esbuild-linux-arm64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.8.tgz#a12675e5a56e8ef08dea49da8eed51a87b0e60d6"
+  integrity sha512-1OCm7Aq0tEJT70PbxmHSGYDLYP8DKH8r4Nk7/XbVzWaduo9beCjGBB+tGZIHK6DdTQ3h00/4Tb/70YMH/bOtKg==
+
+esbuild-linux-arm@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.8.tgz#6424da1e8a3ece78681ebee4a70477b40c36ab35"
+  integrity sha512-7DVBU9SFjX4+vBwt8tHsUCbE6Vvl6y6FQWHAgyw1lybC5gULqn/WnjHYHN2/LJaZRsDBvxWT4msEgwLGq1Wd3Q==
+
+esbuild-linux-mips64le@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.8.tgz#5b39a16272cb4eaaad1f24938c057b19fb5a0ee5"
+  integrity sha512-yeFoNPVFPEzZvFYBfUQNG2TjGRaCyV1E27OcOg4LOtnGrxb2wA+mkW3luckyv1CEyd00mpAg7UdHx8nlx3ghgA==
+
+esbuild-linux-ppc64le@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.8.tgz#98ea8cfae8227180b45b2d952b2cbb072900944f"
+  integrity sha512-CEyMMUUNabXibw8OSNmBXhOIGhnjNVl5Lpseiuf00iKN0V47oqDrbo4dsHz1wH62m49AR8iG8wpDlTqfYgKbtg==
+
+esbuild-linux-riscv64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.8.tgz#6334607025eb449d8dd402d7810721dc15a6210f"
+  integrity sha512-OCGSOaspMUjexSCU8ZiA0UnV/NiRU+s2vIfEcAQWQ6u32R+2luyfh/4ZaY6jFbylJE07Esc/yRvb9Q5fXuClXA==
+
+esbuild-linux-s390x@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.8.tgz#874f1a3507c32cce1d2ce0d2f28ac1496c094eab"
+  integrity sha512-RHdpdfxRTSrZXZJlFSLazFU4YwXLB5Rgf6Zr5rffqSsO4y9JybgtKO38bFwxZNlDXliYISXN/YROKrG9s7mZQA==
+
+esbuild-netbsd-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.8.tgz#2e03d87ed811400d5d1fa8c7629b9fd97a574231"
+  integrity sha512-VolFFRatBH09T5QMWhiohAWCOien1R1Uz9K0BRVVTBgBaVBt7eArsXTKxVhUgRf2vwu2c2SXkuP0r7HLG0eozw==
+
+esbuild-openbsd-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.8.tgz#8fdbc6399563ac61ff546449e2226a2b1477216c"
+  integrity sha512-HTAPlg+n4kUeE/isQxlCfsOz0xJGNoT5LJ9oYZWFKABfVf4Ycu7Zlf5ITgOnrdheTkz8JeL/gISIOCFAoOXrSA==
+
+esbuild-sunos-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.8.tgz#db657b5c09c0c0161d67ddafca1b710a2e7ce96b"
+  integrity sha512-qMP/jR/FzcIOwKj+W+Lb+8Cfr8GZHbHUJxAPi7DUhNZMQ/6y7sOgRzlOSpRrbbUntrRZh0MqOyDhJ3Gpo6L1QA==
+
+esbuild-wasm@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.15.8.tgz#60fb8c5dc1a5538421857a2fa5fbb9eab908dcbb"
+  integrity sha512-Y7uCl5RNO4URjlemjdx++ukVHEMt5s5AfMWYUnMiK4Sry+pPCvQIctzXq6r6FKCyGKjX6/NGMCqR2OX6aLxj0w==
+
+esbuild-windows-32@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.8.tgz#bbb9fe20a8b6bba4428642cacf45a0fb7b2f3783"
+  integrity sha512-RKR1QHh4iWzjUhkP8Yqi75PPz/KS+b8zw3wUrzw6oAkj+iU5Qtyj61ZDaSG3Qf2vc6hTIUiPqVTqBH0NpXFNwg==
+
+esbuild-windows-64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.8.tgz#cedee65505209c8d371d7228b60785c08f43e04d"
+  integrity sha512-ag9ptYrsizgsR+PQE8QKeMqnosLvAMonQREpLw4evA4FFgOBMLEat/dY/9txbpozTw9eEOYyD3a4cE9yTu20FA==
+
+esbuild-windows-arm64@0.15.8:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.8.tgz#1d75235290bf23a111e6c0b03febd324af115cb1"
+  integrity sha512-dbpAb0VyPaUs9mgw65KRfQ9rqiWCHpNzrJusoPu+LpEoswosjt/tFxN7cd2l68AT4qWdBkzAjDLRon7uqMeWcg==
+
+esbuild@^0.15.6:
+  version "0.15.8"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.8.tgz#75daa25d03f6dd9cc9355030eba2b93555b42cd4"
+  integrity sha512-Remsk2dmr1Ia65sU+QasE6svJbsHe62lzR+CnjpUvbZ+uSYo1SitiOWPRfZQkCu82YWZBBKXiD/j0i//XWMZ+Q==
+  optionalDependencies:
+    "@esbuild/android-arm" "0.15.8"
+    "@esbuild/linux-loong64" "0.15.8"
+    esbuild-android-64 "0.15.8"
+    esbuild-android-arm64 "0.15.8"
+    esbuild-darwin-64 "0.15.8"
+    esbuild-darwin-arm64 "0.15.8"
+    esbuild-freebsd-64 "0.15.8"
+    esbuild-freebsd-arm64 "0.15.8"
+    esbuild-linux-32 "0.15.8"
+    esbuild-linux-64 "0.15.8"
+    esbuild-linux-arm "0.15.8"
+    esbuild-linux-arm64 "0.15.8"
+    esbuild-linux-mips64le "0.15.8"
+    esbuild-linux-ppc64le "0.15.8"
+    esbuild-linux-riscv64 "0.15.8"
+    esbuild-linux-s390x "0.15.8"
+    esbuild-netbsd-64 "0.15.8"
+    esbuild-openbsd-64 "0.15.8"
+    esbuild-sunos-64 "0.15.8"
+    esbuild-windows-32 "0.15.8"
+    esbuild-windows-64 "0.15.8"
+    esbuild-windows-arm64 "0.15.8"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -4672,11 +3182,6 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
-escape-string-regexp@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
-  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
-
 escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -4708,12 +3213,11 @@ eslint-import-resolver-node@^0.3.6:
     resolve "^1.20.0"
 
 eslint-module-utils@^2.7.3:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
-  integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
+  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
   dependencies:
     debug "^3.2.7"
-    find-up "^2.1.0"
 
 eslint-plugin-import@^2.20.2:
   version "2.26.0"
@@ -4735,16 +3239,16 @@ eslint-plugin-import@^2.20.2:
     tsconfig-paths "^3.14.1"
 
 eslint-plugin-prettier@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
-  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
+  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-vue@^9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.1.1.tgz#341f7533cb041958455138834341d5be01f9f327"
-  integrity sha512-W9n5PB1X2jzC7CK6riG0oAcxjmKrjTF6+keL1rni8n57DZeilx/Fulz+IRJK3lYseLNAygN0I62L7DvioW40Tw==
+eslint-plugin-vue@^9.3.0:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.5.1.tgz#87ce075882cf7d824b95f46c224f91495fafcc54"
+  integrity sha512-Y0sL2RY7Xc9S8kNih9lbwHIDmewUg9bfas6WSzsOWRgDXhIHKxRBZYNAnVcXBFfE+bMWHUA5GLChl7TcTYUI8w==
   dependencies:
     eslint-utils "^3.0.0"
     natural-compare "^1.4.0"
@@ -4754,7 +3258,7 @@ eslint-plugin-vue@^9.1.1:
     vue-eslint-parser "^9.0.1"
     xml-name-validator "^4.0.0"
 
-eslint-scope@5.1.1, eslint-scope@^5.1.1:
+eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -4770,6 +3274,13 @@ eslint-scope@^7.0.0, eslint-scope@^7.1.1:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
@@ -4777,6 +3288,11 @@ eslint-utils@^3.0.0:
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
 eslint-visitor-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
@@ -4787,24 +3303,15 @@ eslint-visitor-keys@^3.1.0, eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint-webpack-plugin@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-3.1.1.tgz#83dad2395e5f572d6f4d919eedaa9cf902890fcb"
-  integrity sha512-xSucskTN9tOkfW7so4EaiFIkulWLXwCB/15H917lR6pTv0Zot6/fetFucmENRb7J5whVSFKIvwnrnsa78SG2yg==
+eslint@^8.21.0, eslint@^8.7.0:
+  version "8.23.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.23.1.tgz#cfd7b3f7fdd07db8d16b4ac0516a29c8d8dca5dc"
+  integrity sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==
   dependencies:
-    "@types/eslint" "^7.28.2"
-    jest-worker "^27.3.1"
-    micromatch "^4.0.4"
-    normalize-path "^3.0.0"
-    schema-utils "^3.1.1"
-
-eslint@^8.2.0, eslint@^8.7.0:
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.17.0.tgz#1cfc4b6b6912f77d24b874ca1506b0fe09328c21"
-  integrity sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==
-  dependencies:
-    "@eslint/eslintrc" "^1.3.0"
-    "@humanwhocodes/config-array" "^0.9.2"
+    "@eslint/eslintrc" "^1.3.2"
+    "@humanwhocodes/config-array" "^0.10.4"
+    "@humanwhocodes/gitignore-to-minimatch" "^1.0.2"
+    "@humanwhocodes/module-importer" "^1.0.1"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -4814,18 +3321,21 @@ eslint@^8.2.0, eslint@^8.7.0:
     eslint-scope "^7.1.1"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
-    espree "^9.3.2"
+    espree "^9.4.0"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
+    find-up "^5.0.0"
     glob-parent "^6.0.1"
     globals "^13.15.0"
+    globby "^11.1.0"
+    grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
+    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
@@ -4837,14 +3347,22 @@ eslint@^8.2.0, eslint@^8.7.0:
     strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
-espree@^9.0.0, espree@^9.3.1, espree@^9.3.2:
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.2.tgz#f58f77bd334731182801ced3380a8cc859091596"
-  integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==
+espree@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
   dependencies:
-    acorn "^8.7.1"
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
+espree@^9.0.0, espree@^9.3.1, espree@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
+  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+  dependencies:
+    acorn "^8.8.0"
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
@@ -4882,135 +3400,16 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
+estree-walker@^2.0.1, estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-etag@~1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
-
-event-pubsub@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
-  integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
-
-eventemitter3@^4.0.0:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-
-events@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
-
-execa@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
-  integrity sha512-zDWS+Rb1E8BlqqhALSt9kUhss8Qq4nN3iof3gsOdyINksElaPyNBtKUMTR62qhvgVWR0CqCX7sdnKe4MnUbFEA==
-  dependencies:
-    cross-spawn "^5.0.1"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
-  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.0"
-    human-signals "^2.1.0"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.1"
-    onetime "^5.1.2"
-    signal-exit "^3.0.3"
-    strip-final-newline "^2.0.0"
-
-exit@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
-
-expect@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-27.5.1.tgz#83ce59f1e5bdf5f9d2b94b61d2050db48f3fef74"
-  integrity sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    jest-get-type "^27.5.1"
-    jest-matcher-utils "^27.5.1"
-    jest-message-util "^27.5.1"
-
-expect@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-28.1.1.tgz#ca6fff65f6517cf7220c2e805a49c19aea30b420"
-  integrity sha512-/AANEwGL0tWBwzLNOvO0yUdy2D52jVdNXppOqswC49sxMN2cPWsGCQdzuIf9tj6hHoBQzNvx75JUYuQAckPo3w==
-  dependencies:
-    "@jest/expect-utils" "^28.1.1"
-    jest-get-type "^28.0.2"
-    jest-matcher-utils "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
-
-express@^4.17.3:
-  version "4.18.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
-  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
-  dependencies:
-    accepts "~1.3.8"
-    array-flatten "1.1.1"
-    body-parser "1.20.0"
-    content-disposition "0.5.4"
-    content-type "~1.0.4"
-    cookie "0.5.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "2.0.0"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "1.2.0"
-    fresh "0.5.2"
-    http-errors "2.0.0"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "2.4.1"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.7"
-    qs "6.10.3"
-    range-parser "~1.2.1"
-    safe-buffer "5.2.1"
-    send "0.18.0"
-    serve-static "1.15.0"
-    setprototypeof "1.2.0"
-    statuses "2.0.1"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -5033,10 +3432,10 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
-  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -5044,7 +3443,7 @@ fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
+fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -5054,11 +3453,6 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
-fastest-levenshtein@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
-  integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
-
 fastq@^1.6.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
@@ -5066,27 +3460,6 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-faye-websocket@^0.11.3:
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
-  integrity sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==
-  dependencies:
-    websocket-driver ">=0.5.1"
-
-fb-watchman@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
-  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
-  dependencies:
-    bser "2.1.1"
-
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  integrity sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -5108,41 +3481,25 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
-  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+finalhandler@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
   dependencies:
     debug "2.6.9"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    on-finished "2.4.1"
+    on-finished "~2.3.0"
     parseurl "~1.3.3"
-    statuses "2.0.1"
+    statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-cache-dir@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
-  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
   dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
-
-find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==
-  dependencies:
-    locate-path "^2.0.0"
-
-find-up@^4.0.0, find-up@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
-  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
-  dependencies:
-    locate-path "^5.0.0"
+    locate-path "^6.0.0"
     path-exists "^4.0.0"
 
 flat-cache@^3.0.4:
@@ -5154,9 +3511,22 @@ flat-cache@^3.0.4:
     rimraf "^3.0.2"
 
 flatted@^3.1.0:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
-  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+flexsearch@^0.7.21:
+  version "0.7.21"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.7.21.tgz#0f5ede3f2aae67ddc351efbe3b24b69d29e9d48b"
+  integrity sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==
+
+floating-vue@^2.0.0-beta.17:
+  version "2.0.0-beta.20"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-2.0.0-beta.20.tgz#c96df528afb952cdeee54f17183333ac6558628f"
+  integrity sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==
+  dependencies:
+    "@floating-ui/dom" "^0.1.10"
+    vue-resize "^2.0.0-alpha.1"
 
 flow-static-land@0.2.7:
   version "0.2.7"
@@ -5173,55 +3543,47 @@ flush-promises@^1.0.2:
   resolved "https://registry.yarnpkg.com/flush-promises/-/flush-promises-1.0.2.tgz#4948fd58f15281fed79cbafc86293d5bb09b2ced"
   integrity sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==
 
-follow-redirects@^1.0.0:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
-  integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
-
-fork-ts-checker-webpack-plugin@^6.4.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz#4f67183f2f9eb8ba7df7177ce3cf3e75cdafb340"
-  integrity sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==
+foreground-child@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-2.0.0.tgz#71b32800c9f15aa8f2f83f4a6bd9bff35d861a53"
+  integrity sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==
   dependencies:
-    "@babel/code-frame" "^7.8.3"
-    "@types/json-schema" "^7.0.5"
-    chalk "^4.1.0"
-    chokidar "^3.4.2"
-    cosmiconfig "^6.0.0"
-    deepmerge "^4.2.2"
-    fs-extra "^9.0.0"
-    glob "^7.1.6"
-    memfs "^3.1.2"
-    minimatch "^3.0.4"
-    schema-utils "2.7.0"
-    semver "^7.3.2"
-    tapable "^1.0.0"
+    cross-spawn "^7.0.0"
+    signal-exit "^3.0.2"
 
-form-data@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
-  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
+form-data@^2.2.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4"
+  integrity sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
   dependencies:
     asynckit "^0.4.0"
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-forwarded@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
-  integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
-
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
-fresh@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
+fs-extra@^10.0.1:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
 
-fs-extra@^9.0.0, fs-extra@^9.0.1, fs-extra@^9.1.0:
+fs-extra@^9.0.1:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
@@ -5231,17 +3593,12 @@ fs-extra@^9.0.0, fs-extra@^9.0.1, fs-extra@^9.1.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fs-monkey@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
-  integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -5261,11 +3618,6 @@ function.prototype.name@^1.1.5:
     es-abstract "^1.19.0"
     functions-have-names "^1.2.2"
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
-
 functions-have-names@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
@@ -5281,10 +3633,15 @@ get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.2.tgz#336975123e05ad0b7ba41f152ee4aadbea6cf598"
-  integrity sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==
+get-func-name@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
+  integrity sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
+  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
@@ -5295,27 +3652,10 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
-get-package-type@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
-  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
-
-get-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
-  integrity sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==
-
-get-stream@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
-  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
-  dependencies:
-    pump "^3.0.0"
-
-get-stream@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
-  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+get-port@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
+  integrity sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==
 
 get-symbol-description@^1.0.0:
   version "1.0.0"
@@ -5339,12 +3679,7 @@ glob-parent@^6.0.1, glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
-glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.5, glob@^7.1.6:
+glob@^7.1.3, glob@^7.1.4, glob@^7.1.5, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -5373,13 +3708,13 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.15.0:
-  version "13.15.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.15.0.tgz#38113218c907d2f7e98658af246cef8b77e90bac"
-  integrity sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==
+  version "13.17.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.17.0.tgz#902eb1e680a41da93945adbdcb5a9f361ba69bd4"
+  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
   dependencies:
     type-fest "^0.20.2"
 
-globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
+globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -5391,11 +3726,27 @@ globby@^11.0.2, globby@^11.0.3, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+globby@^13.1.1:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.2.tgz#29047105582427ab6eca4f905200667b056da515"
+  integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.11"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
 graphql-tag@^2.10.3, graphql-tag@^2.12.6:
   version "2.12.6"
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
@@ -5410,27 +3761,38 @@ graphql@14.0.2:
   dependencies:
     iterall "^1.2.2"
 
-graphql@^15.0.0:
+graphql@^15.0.0, graphql@^15.8.0:
   version "15.8.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.8.0.tgz#33410e96b012fa3bdb1091cc99a94769db212b38"
   integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw==
 
-graphql@^16.0.0:
-  version "16.5.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.5.0.tgz#41b5c1182eaac7f3d47164fb247f61e4dfb69c85"
-  integrity sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA==
-
-gzip-size@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
-  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+gray-matter@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-4.0.3.tgz#e893c064825de73ea1f5f7d88c7a9f7274288798"
+  integrity sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==
   dependencies:
-    duplexer "^0.1.2"
+    js-yaml "^3.13.1"
+    kind-of "^6.0.2"
+    section-matter "^1.0.0"
+    strip-bom-string "^1.0.0"
 
-handle-thing@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
-  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
+hammerjs@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+  integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
+
+happy-dom@^2.55.0:
+  version "2.55.0"
+  resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-2.55.0.tgz#ad412939fea9b97f2e5985c404cf710638bba66a"
+  integrity sha512-CHDMBRau+l/yKQL+ANmexRAC8FRCuYbXRSpu/GbLVyfqkrlBzV7OSNd5C5HZ+pVFtFv1bFJYC5r+xrqgGQuq5w==
+  dependencies:
+    css.escape "^1.5.1"
+    he "^1.2.0"
+    node-fetch "^2.x.x"
+    sync-request "^6.1.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
 
 has-ansi@^2.0.0:
   version "2.0.0"
@@ -5461,7 +3823,7 @@ has-property-descriptors@^1.0.0:
   dependencies:
     get-intrinsic "^1.1.1"
 
-has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
+has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
@@ -5480,25 +3842,46 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hash-sum@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
-  integrity sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==
-
-hash-sum@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
-  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
-
-he@^1.1.0, he@^1.2.0:
+he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-highlight.js@^10.7.1:
-  version "10.7.3"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
-  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+histoire@^0.10.4:
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/histoire/-/histoire-0.10.7.tgz#8e80bea62f1733ab18dfeb2b9fad8936e1996574"
+  integrity sha512-VcdUE197bxb+pAlRbKg8fUvYo6kDeXlQW/R/pwi53Br0BvbIwPwMh0buEuY0XP9D12zLTwkW8J2WEoAnHyCSWw==
+  dependencies:
+    "@histoire/app" "^0.10.7"
+    "@histoire/controls" "^0.10.7"
+    "@histoire/shared" "^0.10.7"
+    "@histoire/vendors" "^0.10.7"
+    "@types/flexsearch" "^0.7.3"
+    "@types/markdown-it" "^12.2.3"
+    birpc "^0.1.1"
+    case "^1.6.3"
+    chokidar "^3.5.3"
+    connect "^3.7.0"
+    defu "^6.0.0"
+    diacritics "^1.3.0"
+    flexsearch "^0.7.21"
+    fs-extra "^10.0.1"
+    globby "^13.1.1"
+    gray-matter "^4.0.3"
+    happy-dom "^2.55.0"
+    markdown-it "^12.3.2"
+    markdown-it-anchor "^8.6.2"
+    markdown-it-attrs "^4.1.3"
+    markdown-it-emoji "^2.0.0"
+    micromatch "^4.0.5"
+    mrmime "^1.0.0"
+    pathe "^0.2.0"
+    picocolors "^1.0.0"
+    sade "^1.8.1"
+    shiki "0.10.1"
+    sirv "^2.0.2"
+    tinypool "^0.1.2"
+    vite-node "0.22.1"
 
 hoist-non-react-statics@^3.3.2:
   version "3.3.2"
@@ -5507,73 +3890,19 @@ hoist-non-react-statics@^3.3.2:
   dependencies:
     react-is "^16.7.0"
 
-hosted-git-info@^2.1.4:
-  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
-  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
-
-hpack.js@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
-  integrity sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==
+html-encoding-sniffer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
+  integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==
   dependencies:
-    inherits "^2.0.1"
-    obuf "^1.0.0"
-    readable-stream "^2.0.1"
-    wbuf "^1.1.0"
-
-html-encoding-sniffer@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
-  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
-  dependencies:
-    whatwg-encoding "^1.0.5"
-
-html-entities@^2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
-  integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
+    whatwg-encoding "^2.0.0"
 
 html-escaper@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-minifier-terser@^6.0.2:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
-  integrity sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==
-  dependencies:
-    camel-case "^4.1.2"
-    clean-css "^5.2.2"
-    commander "^8.3.0"
-    he "^1.2.0"
-    param-case "^3.0.4"
-    relateurl "^0.2.7"
-    terser "^5.10.0"
-
-html-tags@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
-  integrity sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==
-
-html-tags@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
-  integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
-
-html-webpack-plugin@^5.1.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
-  integrity sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==
-  dependencies:
-    "@types/html-minifier-terser" "^6.0.0"
-    html-minifier-terser "^6.0.2"
-    lodash "^4.17.21"
-    pretty-error "^4.0.0"
-    tapable "^2.0.0"
-
-htmlparser2@^6.0.0, htmlparser2@^6.1.0:
+htmlparser2@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
   integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@@ -5583,67 +3912,33 @@ htmlparser2@^6.0.0, htmlparser2@^6.1.0:
     domutils "^2.5.2"
     entities "^2.0.0"
 
-http-deceiver@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
-  integrity sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==
-
-http-errors@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
-  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
+http-basic@^8.1.1:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/http-basic/-/http-basic-8.1.3.tgz#a7cabee7526869b9b710136970805b1004261bbf"
+  integrity sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw==
   dependencies:
-    depd "2.0.0"
-    inherits "2.0.4"
-    setprototypeof "1.2.0"
-    statuses "2.0.1"
-    toidentifier "1.0.1"
+    caseless "^0.12.0"
+    concat-stream "^1.6.2"
+    http-response-object "^3.0.1"
+    parse-cache-control "^1.0.1"
 
-http-errors@~1.6.2:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
-  integrity sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==
+http-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
+  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
   dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.0"
-    statuses ">= 1.4.0 < 2"
-
-http-parser-js@>=0.5.1:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.6.tgz#2e02406ab2df8af8a7abfba62e0da01c62b95afd"
-  integrity sha512-vDlkRPDJn93swjcjqMSaGSPABbIarsr1TLAui/gLDXzV5VsJNdXNzMYDyNBLQkjWQCJ1uizu8T2oDMhmGt0PRA==
-
-http-proxy-agent@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
-  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
-  dependencies:
-    "@tootallnate/once" "1"
+    "@tootallnate/once" "2"
     agent-base "6"
     debug "4"
 
-http-proxy-middleware@^2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
-  integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
+http-response-object@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/http-response-object/-/http-response-object-3.0.2.tgz#7f435bb210454e4360d074ef1f989d5ea8aa9810"
+  integrity sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==
   dependencies:
-    "@types/http-proxy" "^1.17.8"
-    http-proxy "^1.18.1"
-    is-glob "^4.0.1"
-    is-plain-obj "^3.0.0"
-    micromatch "^4.0.2"
+    "@types/node" "^10.0.3"
 
-http-proxy@^1.18.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
-  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    follow-redirects "^1.0.0"
-    requires-port "^1.0.0"
-
-https-proxy-agent@^5.0.0:
+https-proxy-agent@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
   integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
@@ -5651,32 +3946,17 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-human-signals@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
-  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
-
-iconv-lite@0.4.24:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+iconv-lite@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
   dependencies:
-    safer-buffer ">= 2.1.2 < 3"
+    safer-buffer ">= 2.1.2 < 3.0.0"
 
-icss-utils@^5.0.0, icss-utils@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
-  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
-
-idb@^6.1.4:
-  version "6.1.5"
-  resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b"
-  integrity sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw==
-
-ieee754@^1.1.13:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
-  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+idb@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.0.2.tgz#7a067e20dd16539938e456814b7d714ba8db3892"
+  integrity sha512-jjKrT1EnyZewQ/gCBb/eyiYrhGzws2FeY92Yx8qT9S9GeQAmo4JFVIiWRIfKW/6Ob9A+UDAOW9j9jn58fy2HIg==
 
 ignore@^5.2.0:
   version "5.2.0"
@@ -5688,7 +3968,7 @@ immutable@^4.0.0:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
   integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -5696,14 +3976,6 @@ import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-local@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
-  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
-  dependencies:
-    pkg-dir "^4.2.0"
-    resolve-cwd "^3.0.0"
-
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -5722,21 +3994,11 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inherits@2, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-inherits@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
-
-ini@^1.3.4:
-  version "1.3.8"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
-  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
-
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -5746,31 +4008,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-interpret@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
-  integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
-
 intersection-observer@^0.12.0:
   version "0.12.2"
   resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
   integrity sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==
 
-ipaddr.js@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
-  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
-
-ipaddr.js@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
-  integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
-
-is-arrayish@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
-
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -5793,27 +4035,15 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
 is-callable@^1.1.4, is-callable@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
-  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.6.tgz#fd6170b0b8c7e2cc73de342ef8284a2202023c44"
+  integrity sha512-krO72EO2NptOGAX2KYyqbP9vYMlNAXdB53rq6f8LXY6RY7JdSR/3BD6wLUlPHSAesmY9vstNrjvqGaCiRK/91Q==
 
-is-ci@^1.0.10:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
-  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
-  dependencies:
-    ci-info "^1.5.0"
-
-is-core-module@^2.8.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
-  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
+is-core-module@^2.8.1, is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
   dependencies:
     has "^1.0.3"
 
@@ -5839,28 +4069,11 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
-is-file-esm@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-file-esm/-/is-file-esm-1.0.0.tgz#987086b0f5a5318179e9d30f4f2f8d37321e1b5f"
-  integrity sha512-rZlaNKb4Mr8WlRu2A9XdeoKgnO5aA53XdPHgCKVyCrQ/rWi89RET1+bq37Ru46obaQXeiX4vmFIm1vks41hoSA==
-  dependencies:
-    read-pkg-up "^7.0.1"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
-
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-generator-fn@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
-  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
-
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -5868,11 +4081,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-interactive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
-  integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -5900,18 +4108,6 @@ is-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==
 
-is-plain-obj@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7"
-  integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==
-
-is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
-  dependencies:
-    isobject "^3.0.1"
-
 is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
@@ -5942,11 +4138,6 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
-is-stream@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
-
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -5966,16 +4157,6 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
-is-typedarray@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
-
-is-unicode-supported@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
-  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
-
 is-valid-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-1.0.0.tgz#29bf3eff701be2d4d315dbacc39bc39fe8f601aa"
@@ -5988,12 +4169,7 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
-is-whitespace@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
-  integrity sha512-RydPhl4S6JwAyj0JJjshWJEFG6hNye3pZFBRZaTUfZFwGHxzppNaNOVgQuS/E/SlhrApuMXrpnK1EEIXfdo3Dg==
-
-is-wsl@^2.1.1, is-wsl@^2.2.0:
+is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
@@ -6010,27 +4186,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
-
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
   integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
 
-istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz#31d18bdd127f825dd02ea7bfdfd906f8ab840e9f"
-  integrity sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==
-  dependencies:
-    "@babel/core" "^7.12.3"
-    "@babel/parser" "^7.14.7"
-    "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-coverage "^3.2.0"
-    semver "^6.3.0"
-
 istanbul-lib-report@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
@@ -6040,19 +4200,10 @@ istanbul-lib-report@^3.0.0:
     make-dir "^3.0.0"
     supports-color "^7.1.0"
 
-istanbul-lib-source-maps@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
-  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
-  dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^3.0.0"
-    source-map "^0.6.1"
-
-istanbul-reports@^3.1.3:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.4.tgz#1b6f068ecbc6c331040aab5741991273e609e40c"
-  integrity sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==
+istanbul-reports@^3.1.4:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
   dependencies:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
@@ -6072,767 +4223,6 @@ jake@^10.8.5:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
-javascript-stringify@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
-  integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==
-
-jest-changed-files@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5"
-  integrity sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    execa "^5.0.0"
-    throat "^6.0.1"
-
-jest-changed-files@^28.0.2:
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-28.0.2.tgz#7d7810660a5bd043af9e9cfbe4d58adb05e91531"
-  integrity sha512-QX9u+5I2s54ZnGoMEjiM2WeBvJR2J7w/8ZUmH2um/WLAuGAYFQcsVXY9+1YL6k0H/AGUdH8pXUAv6erDqEsvIA==
-  dependencies:
-    execa "^5.0.0"
-    throat "^6.0.1"
-
-jest-circus@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.5.1.tgz#37a5a4459b7bf4406e53d637b49d22c65d125ecc"
-  integrity sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==
-  dependencies:
-    "@jest/environment" "^27.5.1"
-    "@jest/test-result" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    dedent "^0.7.0"
-    expect "^27.5.1"
-    is-generator-fn "^2.0.0"
-    jest-each "^27.5.1"
-    jest-matcher-utils "^27.5.1"
-    jest-message-util "^27.5.1"
-    jest-runtime "^27.5.1"
-    jest-snapshot "^27.5.1"
-    jest-util "^27.5.1"
-    pretty-format "^27.5.1"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-    throat "^6.0.1"
-
-jest-circus@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-28.1.1.tgz#3d27da6a974d85a466dc0cdc6ddeb58daaa57bb4"
-  integrity sha512-75+BBVTsL4+p2w198DQpCeyh1RdaS2lhEG87HkaFX/UG0gJExVq2skG2pT7XZEGBubNj2CytcWSPan4QEPNosw==
-  dependencies:
-    "@jest/environment" "^28.1.1"
-    "@jest/expect" "^28.1.1"
-    "@jest/test-result" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    dedent "^0.7.0"
-    is-generator-fn "^2.0.0"
-    jest-each "^28.1.1"
-    jest-matcher-utils "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-runtime "^28.1.1"
-    jest-snapshot "^28.1.1"
-    jest-util "^28.1.1"
-    pretty-format "^28.1.1"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-    throat "^6.0.1"
-
-jest-cli@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.5.1.tgz#278794a6e6458ea8029547e6c6cbf673bd30b145"
-  integrity sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==
-  dependencies:
-    "@jest/core" "^27.5.1"
-    "@jest/test-result" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    import-local "^3.0.2"
-    jest-config "^27.5.1"
-    jest-util "^27.5.1"
-    jest-validate "^27.5.1"
-    prompts "^2.0.1"
-    yargs "^16.2.0"
-
-jest-cli@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-28.1.1.tgz#23ddfde8940e1818585ae4a568877b33b0e51cfe"
-  integrity sha512-+sUfVbJqb1OjBZ0OdBbI6OWfYM1i7bSfzYy6gze1F1w3OKWq8ZTEKkZ8a7ZQPq6G/G1qMh/uKqpdWhgl11NFQQ==
-  dependencies:
-    "@jest/core" "^28.1.1"
-    "@jest/test-result" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    chalk "^4.0.0"
-    exit "^0.1.2"
-    graceful-fs "^4.2.9"
-    import-local "^3.0.2"
-    jest-config "^28.1.1"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
-    prompts "^2.0.1"
-    yargs "^17.3.1"
-
-jest-config@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.5.1.tgz#5c387de33dca3f99ad6357ddeccd91bf3a0e4a41"
-  integrity sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==
-  dependencies:
-    "@babel/core" "^7.8.0"
-    "@jest/test-sequencer" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    babel-jest "^27.5.1"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.1"
-    graceful-fs "^4.2.9"
-    jest-circus "^27.5.1"
-    jest-environment-jsdom "^27.5.1"
-    jest-environment-node "^27.5.1"
-    jest-get-type "^27.5.1"
-    jest-jasmine2 "^27.5.1"
-    jest-regex-util "^27.5.1"
-    jest-resolve "^27.5.1"
-    jest-runner "^27.5.1"
-    jest-util "^27.5.1"
-    jest-validate "^27.5.1"
-    micromatch "^4.0.4"
-    parse-json "^5.2.0"
-    pretty-format "^27.5.1"
-    slash "^3.0.0"
-    strip-json-comments "^3.1.1"
-
-jest-config@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-28.1.1.tgz#e90b97b984f14a6c24a221859e81b258990fce2f"
-  integrity sha512-tASynMhS+jVV85zKvjfbJ8nUyJS/jUSYZ5KQxLUN2ZCvcQc/OmhQl2j6VEL3ezQkNofxn5pQ3SPYWPHb0unTZA==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    "@jest/test-sequencer" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    babel-jest "^28.1.1"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    jest-circus "^28.1.1"
-    jest-environment-node "^28.1.1"
-    jest-get-type "^28.0.2"
-    jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.1"
-    jest-runner "^28.1.1"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
-    micromatch "^4.0.4"
-    parse-json "^5.2.0"
-    pretty-format "^28.1.1"
-    slash "^3.0.0"
-    strip-json-comments "^3.1.1"
-
-jest-diff@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
-  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^27.5.1"
-    jest-get-type "^27.5.1"
-    pretty-format "^27.5.1"
-
-jest-diff@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-28.1.1.tgz#1a3eedfd81ae79810931c63a1d0f201b9120106c"
-  integrity sha512-/MUUxeR2fHbqHoMMiffe/Afm+U8U4olFRJ0hiVG2lZatPJcnGxx292ustVu7bULhjV65IYMxRdploAKLbcrsyg==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^28.1.1"
-    jest-get-type "^28.0.2"
-    pretty-format "^28.1.1"
-
-jest-docblock@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.5.1.tgz#14092f364a42c6108d42c33c8cf30e058e25f6c0"
-  integrity sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==
-  dependencies:
-    detect-newline "^3.0.0"
-
-jest-docblock@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-28.1.1.tgz#6f515c3bf841516d82ecd57a62eed9204c2f42a8"
-  integrity sha512-3wayBVNiOYx0cwAbl9rwm5kKFP8yHH3d/fkEaL02NPTkDojPtheGB7HZSFY4wzX+DxyrvhXz0KSCVksmCknCuA==
-  dependencies:
-    detect-newline "^3.0.0"
-
-jest-each@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.5.1.tgz#5bc87016f45ed9507fed6e4702a5b468a5b2c44e"
-  integrity sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    chalk "^4.0.0"
-    jest-get-type "^27.5.1"
-    jest-util "^27.5.1"
-    pretty-format "^27.5.1"
-
-jest-each@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-28.1.1.tgz#ba5238dacf4f31d9fe23ddc2c44c01e7c23885c4"
-  integrity sha512-A042rqh17ZvEhRceDMi784ppoXR7MWGDEKTXEZXb4svt0eShMZvijGxzKsx+yIjeE8QYmHPrnHiTSQVhN4nqaw==
-  dependencies:
-    "@jest/types" "^28.1.1"
-    chalk "^4.0.0"
-    jest-get-type "^28.0.2"
-    jest-util "^28.1.1"
-    pretty-format "^28.1.1"
-
-jest-environment-jsdom@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz#ea9ccd1fc610209655a77898f86b2b559516a546"
-  integrity sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==
-  dependencies:
-    "@jest/environment" "^27.5.1"
-    "@jest/fake-timers" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    jest-mock "^27.5.1"
-    jest-util "^27.5.1"
-    jsdom "^16.6.0"
-
-jest-environment-node@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.5.1.tgz#dedc2cfe52fab6b8f5714b4808aefa85357a365e"
-  integrity sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==
-  dependencies:
-    "@jest/environment" "^27.5.1"
-    "@jest/fake-timers" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    jest-mock "^27.5.1"
-    jest-util "^27.5.1"
-
-jest-environment-node@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-28.1.1.tgz#1c86c59003a7d319fa06ea3b1bbda6c193715c67"
-  integrity sha512-2aV/eeY/WNgUUJrrkDJ3cFEigjC5fqT1+fCclrY6paqJ5zVPoM//sHmfgUUp7WLYxIdbPwMiVIzejpN56MxnNA==
-  dependencies:
-    "@jest/environment" "^28.1.1"
-    "@jest/fake-timers" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    jest-mock "^28.1.1"
-    jest-util "^28.1.1"
-
-jest-get-type@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
-  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
-
-jest-get-type@^28.0.2:
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203"
-  integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==
-
-jest-haste-map@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f"
-  integrity sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    "@types/graceful-fs" "^4.1.2"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.9"
-    jest-regex-util "^27.5.1"
-    jest-serializer "^27.5.1"
-    jest-util "^27.5.1"
-    jest-worker "^27.5.1"
-    micromatch "^4.0.4"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.3.2"
-
-jest-haste-map@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-28.1.1.tgz#471685f1acd365a9394745bb97c8fc16289adca3"
-  integrity sha512-ZrRSE2o3Ezh7sb1KmeLEZRZ4mgufbrMwolcFHNRSjKZhpLa8TdooXOOFlSwoUzlbVs1t0l7upVRW2K7RWGHzbQ==
-  dependencies:
-    "@jest/types" "^28.1.1"
-    "@types/graceful-fs" "^4.1.3"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.9"
-    jest-regex-util "^28.0.2"
-    jest-util "^28.1.1"
-    jest-worker "^28.1.1"
-    micromatch "^4.0.4"
-    walker "^1.0.8"
-  optionalDependencies:
-    fsevents "^2.3.2"
-
-jest-jasmine2@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz#a037b0034ef49a9f3d71c4375a796f3b230d1ac4"
-  integrity sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==
-  dependencies:
-    "@jest/environment" "^27.5.1"
-    "@jest/source-map" "^27.5.1"
-    "@jest/test-result" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    co "^4.6.0"
-    expect "^27.5.1"
-    is-generator-fn "^2.0.0"
-    jest-each "^27.5.1"
-    jest-matcher-utils "^27.5.1"
-    jest-message-util "^27.5.1"
-    jest-runtime "^27.5.1"
-    jest-snapshot "^27.5.1"
-    jest-util "^27.5.1"
-    pretty-format "^27.5.1"
-    throat "^6.0.1"
-
-jest-junit@^13.0.0:
-  version "13.2.0"
-  resolved "https://registry.yarnpkg.com/jest-junit/-/jest-junit-13.2.0.tgz#66eeb86429aafac8c1745a70f44ace185aacb943"
-  integrity sha512-B0XNlotl1rdsvFZkFfoa19mc634+rrd8E4Sskb92Bb8MmSXeWV9XJGUyctunZS1W410uAxcyYuPUGVnbcOH8cg==
-  dependencies:
-    mkdirp "^1.0.4"
-    strip-ansi "^6.0.1"
-    uuid "^8.3.2"
-    xml "^1.0.1"
-
-jest-leak-detector@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz#6ec9d54c3579dd6e3e66d70e3498adf80fde3fb8"
-  integrity sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==
-  dependencies:
-    jest-get-type "^27.5.1"
-    pretty-format "^27.5.1"
-
-jest-leak-detector@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-28.1.1.tgz#537f37afd610a4b3f4cab15e06baf60484548efb"
-  integrity sha512-4jvs8V8kLbAaotE+wFR7vfUGf603cwYtFf1/PYEsyX2BAjSzj8hQSVTP6OWzseTl0xL6dyHuKs2JAks7Pfubmw==
-  dependencies:
-    jest-get-type "^28.0.2"
-    pretty-format "^28.1.1"
-
-jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
-  integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^27.5.1"
-    jest-get-type "^27.5.1"
-    pretty-format "^27.5.1"
-
-jest-matcher-utils@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-28.1.1.tgz#a7c4653c2b782ec96796eb3088060720f1e29304"
-  integrity sha512-NPJPRWrbmR2nAJ+1nmnfcKKzSwgfaciCCrYZzVnNoxVoyusYWIjkBMNvu0RHJe7dNj4hH3uZOPZsQA+xAYWqsw==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^28.1.1"
-    jest-get-type "^28.0.2"
-    pretty-format "^28.1.1"
-
-jest-message-util@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.5.1.tgz#bdda72806da10d9ed6425e12afff38cd1458b6cf"
-  integrity sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^27.5.1"
-    "@types/stack-utils" "^2.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    micromatch "^4.0.4"
-    pretty-format "^27.5.1"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-
-jest-message-util@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.1.1.tgz#60aa0b475cfc08c8a9363ed2fb9108514dd9ab89"
-  integrity sha512-xoDOOT66fLfmTRiqkoLIU7v42mal/SqwDKvfmfiWAdJMSJiU+ozgluO7KbvoAgiwIrrGZsV7viETjc8GNrA/IQ==
-  dependencies:
-    "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^28.1.1"
-    "@types/stack-utils" "^2.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    micromatch "^4.0.4"
-    pretty-format "^28.1.1"
-    slash "^3.0.0"
-    stack-utils "^2.0.3"
-
-jest-mock@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
-  integrity sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-
-jest-mock@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-28.1.1.tgz#37903d269427fa1ef5b2447be874e1c62a39a371"
-  integrity sha512-bDCb0FjfsmKweAvE09dZT59IMkzgN0fYBH6t5S45NoJfd2DHkS3ySG2K+hucortryhO3fVuXdlxWcbtIuV/Skw==
-  dependencies:
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-
-jest-pnp-resolver@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
-  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
-
-jest-regex-util@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
-  integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
-
-jest-regex-util@^28.0.0, jest-regex-util@^28.0.2:
-  version "28.0.2"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
-  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
-
-jest-resolve-dependencies@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz#d811ecc8305e731cc86dd79741ee98fed06f1da8"
-  integrity sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    jest-regex-util "^27.5.1"
-    jest-snapshot "^27.5.1"
-
-jest-resolve-dependencies@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-28.1.1.tgz#3dffaaa56f4b41bc6b61053899d1756401763a27"
-  integrity sha512-p8Y150xYJth4EXhOuB8FzmS9r8IGLEioiaetgdNGb9VHka4fl0zqWlVe4v7mSkYOuEUg2uB61iE+zySDgrOmgQ==
-  dependencies:
-    jest-regex-util "^28.0.2"
-    jest-snapshot "^28.1.1"
-
-jest-resolve@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.5.1.tgz#a2f1c5a0796ec18fe9eb1536ac3814c23617b384"
-  integrity sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^27.5.1"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^27.5.1"
-    jest-validate "^27.5.1"
-    resolve "^1.20.0"
-    resolve.exports "^1.1.0"
-    slash "^3.0.0"
-
-jest-resolve@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-28.1.1.tgz#bc2eaf384abdcc1aaf3ba7c50d1adf01e59095e5"
-  integrity sha512-/d1UbyUkf9nvsgdBildLe6LAD4DalgkgZcKd0nZ8XUGPyA/7fsnaQIlKVnDiuUXv/IeZhPEDrRJubVSulxrShA==
-  dependencies:
-    chalk "^4.0.0"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^28.1.1"
-    jest-validate "^28.1.1"
-    resolve "^1.20.0"
-    resolve.exports "^1.1.0"
-    slash "^3.0.0"
-
-jest-runner@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.5.1.tgz#071b27c1fa30d90540805c5645a0ec167c7b62e5"
-  integrity sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==
-  dependencies:
-    "@jest/console" "^27.5.1"
-    "@jest/environment" "^27.5.1"
-    "@jest/test-result" "^27.5.1"
-    "@jest/transform" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    emittery "^0.8.1"
-    graceful-fs "^4.2.9"
-    jest-docblock "^27.5.1"
-    jest-environment-jsdom "^27.5.1"
-    jest-environment-node "^27.5.1"
-    jest-haste-map "^27.5.1"
-    jest-leak-detector "^27.5.1"
-    jest-message-util "^27.5.1"
-    jest-resolve "^27.5.1"
-    jest-runtime "^27.5.1"
-    jest-util "^27.5.1"
-    jest-worker "^27.5.1"
-    source-map-support "^0.5.6"
-    throat "^6.0.1"
-
-jest-runner@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-28.1.1.tgz#9ecdb3f27a00059986797aa6b012ba8306aa436c"
-  integrity sha512-W5oFUiDBgTsCloTAj6q95wEvYDB0pxIhY6bc5F26OucnwBN+K58xGTGbliSMI4ChQal5eANDF+xvELaYkJxTmA==
-  dependencies:
-    "@jest/console" "^28.1.1"
-    "@jest/environment" "^28.1.1"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    emittery "^0.10.2"
-    graceful-fs "^4.2.9"
-    jest-docblock "^28.1.1"
-    jest-environment-node "^28.1.1"
-    jest-haste-map "^28.1.1"
-    jest-leak-detector "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-resolve "^28.1.1"
-    jest-runtime "^28.1.1"
-    jest-util "^28.1.1"
-    jest-watcher "^28.1.1"
-    jest-worker "^28.1.1"
-    source-map-support "0.5.13"
-    throat "^6.0.1"
-
-jest-runtime@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.5.1.tgz#4896003d7a334f7e8e4a53ba93fb9bcd3db0a1af"
-  integrity sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==
-  dependencies:
-    "@jest/environment" "^27.5.1"
-    "@jest/fake-timers" "^27.5.1"
-    "@jest/globals" "^27.5.1"
-    "@jest/source-map" "^27.5.1"
-    "@jest/test-result" "^27.5.1"
-    "@jest/transform" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    chalk "^4.0.0"
-    cjs-module-lexer "^1.0.0"
-    collect-v8-coverage "^1.0.0"
-    execa "^5.0.0"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^27.5.1"
-    jest-message-util "^27.5.1"
-    jest-mock "^27.5.1"
-    jest-regex-util "^27.5.1"
-    jest-resolve "^27.5.1"
-    jest-snapshot "^27.5.1"
-    jest-util "^27.5.1"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
-
-jest-runtime@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-28.1.1.tgz#569e1dc3c36c6c4c0b29516c1c49b6ad580abdaf"
-  integrity sha512-J89qEJWW0leOsqyi0D9zHpFEYHwwafFdS9xgvhFHtIdRghbadodI0eA+DrthK/1PebBv3Px8mFSMGKrtaVnleg==
-  dependencies:
-    "@jest/environment" "^28.1.1"
-    "@jest/fake-timers" "^28.1.1"
-    "@jest/globals" "^28.1.1"
-    "@jest/source-map" "^28.0.2"
-    "@jest/test-result" "^28.1.1"
-    "@jest/transform" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    chalk "^4.0.0"
-    cjs-module-lexer "^1.0.0"
-    collect-v8-coverage "^1.0.0"
-    execa "^5.0.0"
-    glob "^7.1.3"
-    graceful-fs "^4.2.9"
-    jest-haste-map "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-mock "^28.1.1"
-    jest-regex-util "^28.0.2"
-    jest-resolve "^28.1.1"
-    jest-snapshot "^28.1.1"
-    jest-util "^28.1.1"
-    slash "^3.0.0"
-    strip-bom "^4.0.0"
-
-jest-serializer-vue@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/jest-serializer-vue/-/jest-serializer-vue-2.0.2.tgz#b238ef286357ec6b480421bd47145050987d59b3"
-  integrity sha512-nK/YIFo6qe3i9Ge+hr3h4PpRehuPPGZFt8LDBdTHYldMb7ZWlkanZS8Ls7D8h6qmQP2lBQVDLP0DKn5bJ9QApQ==
-  dependencies:
-    pretty "2.0.0"
-
-jest-serializer@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
-  integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==
-  dependencies:
-    "@types/node" "*"
-    graceful-fs "^4.2.9"
-
-jest-snapshot@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.5.1.tgz#b668d50d23d38054a51b42c4039cab59ae6eb6a1"
-  integrity sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==
-  dependencies:
-    "@babel/core" "^7.7.2"
-    "@babel/generator" "^7.7.2"
-    "@babel/plugin-syntax-typescript" "^7.7.2"
-    "@babel/traverse" "^7.7.2"
-    "@babel/types" "^7.0.0"
-    "@jest/transform" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/babel__traverse" "^7.0.4"
-    "@types/prettier" "^2.1.5"
-    babel-preset-current-node-syntax "^1.0.0"
-    chalk "^4.0.0"
-    expect "^27.5.1"
-    graceful-fs "^4.2.9"
-    jest-diff "^27.5.1"
-    jest-get-type "^27.5.1"
-    jest-haste-map "^27.5.1"
-    jest-matcher-utils "^27.5.1"
-    jest-message-util "^27.5.1"
-    jest-util "^27.5.1"
-    natural-compare "^1.4.0"
-    pretty-format "^27.5.1"
-    semver "^7.3.2"
-
-jest-snapshot@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-28.1.1.tgz#ab825c16c8d8b5e883bd57eee6ca8748c42ab848"
-  integrity sha512-1KjqHJ98adRcbIdMizjF5DipwZFbvxym/kFO4g4fVZCZRxH/dqV8TiBFCa6rqic3p0karsy8RWS1y4E07b7P0A==
-  dependencies:
-    "@babel/core" "^7.11.6"
-    "@babel/generator" "^7.7.2"
-    "@babel/plugin-syntax-typescript" "^7.7.2"
-    "@babel/traverse" "^7.7.2"
-    "@babel/types" "^7.3.3"
-    "@jest/expect-utils" "^28.1.1"
-    "@jest/transform" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/babel__traverse" "^7.0.6"
-    "@types/prettier" "^2.1.5"
-    babel-preset-current-node-syntax "^1.0.0"
-    chalk "^4.0.0"
-    expect "^28.1.1"
-    graceful-fs "^4.2.9"
-    jest-diff "^28.1.1"
-    jest-get-type "^28.0.2"
-    jest-haste-map "^28.1.1"
-    jest-matcher-utils "^28.1.1"
-    jest-message-util "^28.1.1"
-    jest-util "^28.1.1"
-    natural-compare "^1.4.0"
-    pretty-format "^28.1.1"
-    semver "^7.3.5"
-
-jest-transform-stub@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d"
-  integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==
-
-jest-util@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9"
-  integrity sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    graceful-fs "^4.2.9"
-    picomatch "^2.2.3"
-
-jest-util@^28.0.0, jest-util@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.1.tgz#ff39e436a1aca397c0ab998db5a51ae2b7080d05"
-  integrity sha512-FktOu7ca1DZSyhPAxgxB6hfh2+9zMoJ7aEQA759Z6p45NuO8mWcqujH+UdHlCm/V6JTWwDztM2ITCzU1ijJAfw==
-  dependencies:
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    ci-info "^3.2.0"
-    graceful-fs "^4.2.9"
-    picomatch "^2.2.3"
-
-jest-validate@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.5.1.tgz#9197d54dc0bdb52260b8db40b46ae668e04df067"
-  integrity sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    camelcase "^6.2.0"
-    chalk "^4.0.0"
-    jest-get-type "^27.5.1"
-    leven "^3.1.0"
-    pretty-format "^27.5.1"
-
-jest-validate@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-28.1.1.tgz#59b7b339b3c85b5144bd0c06ad3600f503a4acc8"
-  integrity sha512-Kpf6gcClqFCIZ4ti5++XemYJWUPCFUW+N2gknn+KgnDf549iLul3cBuKVe1YcWRlaF8tZV8eJCap0eECOEE3Ug==
-  dependencies:
-    "@jest/types" "^28.1.1"
-    camelcase "^6.2.0"
-    chalk "^4.0.0"
-    jest-get-type "^28.0.2"
-    leven "^3.1.0"
-    pretty-format "^28.1.1"
-
-jest-watch-typeahead@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz#b4a6826dfb9c9420da2f7bc900de59dad11266a9"
-  integrity sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==
-  dependencies:
-    ansi-escapes "^4.3.1"
-    chalk "^4.0.0"
-    jest-regex-util "^28.0.0"
-    jest-watcher "^28.0.0"
-    slash "^4.0.0"
-    string-length "^5.0.1"
-    strip-ansi "^7.0.1"
-
-jest-watcher@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.5.1.tgz#71bd85fb9bde3a2c2ec4dc353437971c43c642a2"
-  integrity sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==
-  dependencies:
-    "@jest/test-result" "^27.5.1"
-    "@jest/types" "^27.5.1"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    jest-util "^27.5.1"
-    string-length "^4.0.1"
-
-jest-watcher@^28.0.0, jest-watcher@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.1.1.tgz#533597fb3bfefd52b5cd115cd916cffd237fb60c"
-  integrity sha512-RQIpeZ8EIJMxbQrXpJQYIIlubBnB9imEHsxxE41f54ZwcqWLysL/A0ZcdMirf+XsMn3xfphVQVV4EW0/p7i7Ug==
-  dependencies:
-    "@jest/test-result" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    emittery "^0.10.2"
-    jest-util "^28.1.1"
-    string-length "^4.0.1"
-
 jest-worker@^26.2.1:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -6842,68 +4232,10 @@ jest-worker@^26.2.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest-worker@^27.0.2, jest-worker@^27.3.1, jest-worker@^27.4.5, jest-worker@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
-  integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
-jest-worker@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-28.1.1.tgz#3480c73247171dfd01eda77200f0063ab6a3bf28"
-  integrity sha512-Au7slXB08C6h+xbJPp7VIb6U0XX5Kc9uel/WFc6/rcTzGiaVCBRngBExSYuXSLFPULPSYU3cJ3ybS988lNFQhQ==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
-jest@^27.1.0:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-27.5.1.tgz#dadf33ba70a779be7a6fc33015843b51494f63fc"
-  integrity sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==
-  dependencies:
-    "@jest/core" "^27.5.1"
-    import-local "^3.0.2"
-    jest-cli "^27.5.1"
-
-jest@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-28.1.1.tgz#3c39a3a09791e16e9ef283597d24ab19a0df701e"
-  integrity sha512-qw9YHBnjt6TCbIDMPMpJZqf9E12rh6869iZaN08/vpOGgHJSAaLLUn6H8W3IAEuy34Ls3rct064mZLETkxJ2XA==
-  dependencies:
-    "@jest/core" "^28.1.1"
-    "@jest/types" "^28.1.1"
-    import-local "^3.0.2"
-    jest-cli "^28.1.1"
-
-joi@^17.4.0:
-  version "17.6.0"
-  resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
-  integrity sha512-OX5dG6DTbcr/kbMFj0KGYxuew69HPcAE3K/sZpEV2nP6e/j/C0HV+HNiBPCASxdx5T7DMoa0s8UeHWMnb6n2zw==
-  dependencies:
-    "@hapi/hoek" "^9.0.0"
-    "@hapi/topo" "^5.0.0"
-    "@sideway/address" "^4.1.3"
-    "@sideway/formula" "^3.0.0"
-    "@sideway/pinpoint" "^2.0.0"
-
-js-beautify@^1.6.12:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.14.3.tgz#3dd11c949178de7f3bdf3f6f752778d3bed95150"
-  integrity sha512-f1ra8PHtOEu/70EBnmiUlV8nJePS58y9qKjl4JHfYWlFH6bo7ogZBz//FAZp7jDuXtYnGYKymZPlrg2I/9Zo4g==
-  dependencies:
-    config-chain "^1.1.13"
-    editorconfig "^0.15.3"
-    glob "^7.1.3"
-    nopt "^5.0.0"
-
-js-message@1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.7.tgz#fbddd053c7a47021871bb8b2c95397cc17c20e47"
-  integrity sha512-efJLHhLjIyKRewNS9EGZ4UpI8NguuL6fKkhRxVuMmrGV2xN/0APGdQYwLFky5w9naebSZ0OwAGp0G6/2Cg90rA==
+js-sdsl@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.4.tgz#78793c90f80e8430b7d8dc94515b6c77d98a26a6"
+  integrity sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -6925,38 +4257,38 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jsdom@^16.6.0:
-  version "16.7.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
-  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
+jsdom@^20.0.0:
+  version "20.0.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-20.0.0.tgz#882825ac9cc5e5bbee704ba16143e1fa78361ebf"
+  integrity sha512-x4a6CKCgx00uCmP+QakBDFXwjAJ69IkkIWHmtmjd3wvXPcdOS44hfX2vqkOQrVrq8l9DhNNADZRXaCEWvgXtVA==
   dependencies:
-    abab "^2.0.5"
-    acorn "^8.2.4"
+    abab "^2.0.6"
+    acorn "^8.7.1"
     acorn-globals "^6.0.0"
-    cssom "^0.4.4"
+    cssom "^0.5.0"
     cssstyle "^2.3.0"
-    data-urls "^2.0.0"
-    decimal.js "^10.2.1"
-    domexception "^2.0.1"
+    data-urls "^3.0.2"
+    decimal.js "^10.3.1"
+    domexception "^4.0.0"
     escodegen "^2.0.0"
-    form-data "^3.0.0"
-    html-encoding-sniffer "^2.0.1"
-    http-proxy-agent "^4.0.1"
-    https-proxy-agent "^5.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
     is-potential-custom-element-name "^1.0.1"
     nwsapi "^2.2.0"
-    parse5 "6.0.1"
-    saxes "^5.0.1"
+    parse5 "^7.0.0"
+    saxes "^6.0.0"
     symbol-tree "^3.2.4"
     tough-cookie "^4.0.0"
     w3c-hr-time "^1.0.2"
-    w3c-xmlserializer "^2.0.0"
-    webidl-conversions "^6.1.0"
-    whatwg-encoding "^1.0.5"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.5.0"
-    ws "^7.4.6"
-    xml-name-validator "^3.0.0"
+    w3c-xmlserializer "^3.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+    ws "^8.8.0"
+    xml-name-validator "^4.0.0"
 
 jsesc@^2.5.1:
   version "2.5.2"
@@ -6968,16 +4300,6 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
-json-parse-better-errors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
-json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
-  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
-
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -7005,11 +4327,27 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2, json5@^2.2.0, json5@^2.2.1:
+json5@^2.2.0, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+jsonc-eslint-parser@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz#8cbe99f6f5199acbc5a823c4c0b6135411027fa6"
+  integrity sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==
+  dependencies:
+    acorn "^7.4.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^1.3.0"
+    espree "^6.0.0"
+    semver "^6.3.0"
+
+jsonc-parser@^3.0.0, jsonc-parser@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
+  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -7020,57 +4358,30 @@ jsonfile@^6.0.1:
     graceful-fs "^4.1.6"
 
 jsonpointer@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.0.tgz#f802669a524ec4805fa7389eadbc9921d5dc8072"
-  integrity sha512-PNYZIdMjVIvVgDSYKTT63Y+KZ6IZvGRNNWcxwD+GNnUz1MKPfv30J8ueCjdwcN0nDx2SlshgyB7Oy0epAzVRRg==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-5.0.1.tgz#2110e0af0900fd37467b5907ecd13a7884a1b559"
+  integrity sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==
 
 jwt-decode@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
   integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
 
-kind-of@^3.0.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-kleur@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
-  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-
-klona@^2.0.4, klona@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
-  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
-
-launch-editor-middleware@^2.2.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/launch-editor-middleware/-/launch-editor-middleware-2.4.0.tgz#0c3f24608fa69e4ae00d5d1c89f34bf0ba25a8f4"
-  integrity sha512-/M7AX/6xktZY60KE7j71XLrj9U6H5TBoP+mJzhYB3fcdAq8rcazit/K0qWiu1jvytUPXP4lJRd1VJFwvdMQ/uw==
-  dependencies:
-    launch-editor "^2.4.0"
-
-launch-editor@^2.2.1, launch-editor@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.4.0.tgz#2849de434e4684da2298db48c4e5b8ca64291173"
-  integrity sha512-mZ0BHeSn/ohL+Ib+b+JnxC59vcNz6v5IR9d0CuM8f0x8ni8oK3IIG6G0vMkpxc0gFsmvINkztGOHiWTaX4BmAg==
-  dependencies:
-    picocolors "^1.0.0"
-    shell-quote "^1.6.1"
-
 leaflet.locatecontrol@^0.76.0:
   version "0.76.1"
   resolved "https://registry.yarnpkg.com/leaflet.locatecontrol/-/leaflet.locatecontrol-0.76.1.tgz#03eb8e98e0c54fee457f930a63624479a6177de0"
   integrity sha512-qA92Mxs2N1jgVx+EdmxtDrdzFD+f2llPJbqaKvmW1epZMSIvD6KNsBjpQYUIxz4XtJkOleqRSwWQcrm5P5NnYw==
 
+leaflet.markercluster@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
+  integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
+
 leaflet@^1.4.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.8.0.tgz#4615db4a22a304e8e692cae9270b983b38a2055e"
@@ -7097,83 +4408,49 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lilconfig@^2.0.3, lilconfig@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
-  integrity sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==
+lilconfig@^2.0.5, lilconfig@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
+  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
 
-lines-and-columns@^1.1.6:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
-  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+linkify-it@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
+  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
+  dependencies:
+    uc.micro "^1.0.1"
 
 linkifyjs@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-3.0.5.tgz#99e51a3a0c0e232fcb63ebb89eea3ff923378f34"
   integrity sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==
 
-loader-runner@^4.1.0, loader-runner@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
-  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
+local-pkg@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.2.tgz#13107310b77e74a0e513147a131a2ba288176c2f"
+  integrity sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==
 
-loader-utils@^1.0.2, loader-utils@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
   dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^1.0.1"
+    p-locate "^5.0.0"
 
-loader-utils@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
-  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
-locate-path@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
-  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
-  dependencies:
-    p-locate "^4.1.0"
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
 
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
-lodash.defaultsdeep@^4.6.1:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz#512e9bd721d272d94e3d3a63653fa17516741ca6"
-  integrity sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==
-
-lodash.kebabcase@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
-  integrity sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==
-
-lodash.mapvalues@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz#1bafa5005de9dd6f4f26668c30ca37230cc9689c"
-  integrity sha512-JPFqXFeZQ7BfS00H58kClY7SPVeHertPE0lNuCyZ26/XlN8TvakYD7b9bGyNmXbT/D3BbtPAAmq90gPWqLkxlQ==
-
-lodash.memoize@4.x, lodash.memoize@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
 
 lodash.merge@^4.6.0, lodash.merge@^4.6.2:
   version "4.6.2"
@@ -7185,33 +4462,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
-
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.17.11, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
-  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
-  dependencies:
-    chalk "^4.1.0"
-    is-unicode-supported "^0.1.0"
-
-log-update@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
-  integrity sha512-vlP11XfFGyeNQlmEn9tJ66rEW1coA/79m5z6BCkudjbAGE83uhAcGYrBFwfs3AdLiLzGRusRPAbSPK9xZteCmg==
-  dependencies:
-    ansi-escapes "^3.0.0"
-    cli-cursor "^2.0.0"
-    wrap-ansi "^3.0.1"
-
 loglevel-colored-level-prefix@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz#6a40218fdc7ae15fc76c3d0f3e676c465388603e"
@@ -7232,20 +4487,12 @@ loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lower-case@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
-  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+loupe@^2.3.1:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.4.tgz#7e0b9bffc76f148f9be769cb1321d3dcf3cb25f3"
+  integrity sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==
   dependencies:
-    tslib "^2.0.3"
-
-lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
+    get-func-name "^2.0.0"
 
 lru-cache@^6.0.0:
   version "6.0.0"
@@ -7261,58 +4508,43 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
+make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
   dependencies:
     semver "^6.0.0"
 
-make-error@1.x:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
-  integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
+markdown-it-anchor@^8.6.2:
+  version "8.6.5"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.5.tgz#30c4bc5bbff327f15ce3c429010ec7ba75e7b5f8"
+  integrity sha512-PI1qEHHkTNWT+X6Ip9w+paonfIQ+QZP9sCeMYi47oqhH+EsW8CrJ8J7CzV19QVOj6il8ATGbK2nTECj22ZHGvQ==
 
-makeerror@1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
-  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+markdown-it-attrs@^4.1.3:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.1.4.tgz#25c86055affbc1cb9c4605a86aa26495efa16ec7"
+  integrity sha512-53Zfv8PTb6rlVFDlD106xcZHKBSsRZKJ2IW/rTxEJBEVbVaoxaNsmRkG0HXfbHl2SK8kaxZ2QKqdthWy/QBwmA==
+
+markdown-it-emoji@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.2.tgz#cd42421c2fda1537d9cc12b9923f5c8aeb9029c8"
+  integrity sha512-zLftSaNrKuYl0kR5zm4gxXjHaOI3FAOEaloKmRA5hijmJZvSjmxcokOLlzycb/HXlUFWzXqpIEoyEMCE4i9MvQ==
+
+markdown-it@^12.3.2:
+  version "12.3.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
+  integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
   dependencies:
-    tmpl "1.0.5"
+    argparse "^2.0.1"
+    entities "~2.1.0"
+    linkify-it "^3.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
 
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-
-mdn-data@2.0.27:
-  version "2.0.27"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.27.tgz#1710baa7b0db8176d3b3d565ccb7915fc69525ab"
-  integrity sha512-kwqO0I0jtWr25KcfLm9pia8vLZ8qoAKhWZuZMbneJq3jjBD3gl5nZs8l8Tu3ZBlBAHVQtDur9rdDGyvtfVraHQ==
-
-media-typer@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
-
-memfs@^3.1.2, memfs@^3.4.3:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.4.tgz#e8973cd8060548916adcca58a248e7805c715e89"
-  integrity sha512-W4gHNUE++1oSJVn8Y68jPXi+mkx3fXR5ITE/Ubz6EQ3xRpCN5k2CQ4AUR8094Z7211F876TyoBACGsIveqgiGA==
-  dependencies:
-    fs-monkey "1.0.3"
-
-merge-descriptors@1.0.1:
+mdurl@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
-
-merge-source-map@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
-  integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
-  dependencies:
-    source-map "^0.6.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
 merge-stream@^2.0.0:
   version "2.0.0"
@@ -7324,12 +4556,7 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-methods@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
-
-micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -7337,44 +4564,22 @@ micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
+mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
 
-mime@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
-  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
-
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
-  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
-
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
-mini-css-extract-plugin@^2.5.3:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz#9a1251d15f2035c342d99a468ab9da7a0451b71e"
-  integrity sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==
-  dependencies:
-    schema-utils "^4.0.0"
-
-minimalistic-assert@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
-  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
 
 minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
@@ -7390,39 +4595,30 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
-minipass@^3.1.1:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.6.tgz#3b8150aa688a711a1521af5e8779c1d3bb4f45ee"
-  integrity sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==
+mlly@^0.5.12, mlly@^0.5.14:
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.5.15.tgz#88dbd386dd320798a06a1aa7586f840b5b4ffdfc"
+  integrity sha512-cA1DS4Va2t0h/1c044haUDubeWwlKrvToLbOT3Oprpr2tW5dJTObEIXDdONRN/ahKm0GWEPVeptbg0dlzl8gBQ==
   dependencies:
-    yallist "^4.0.0"
-
-mkdirp@^0.5.5:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
-  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
-  dependencies:
-    minimist "^1.2.6"
-
-mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+    acorn "^8.8.0"
+    pathe "^0.3.8"
+    pkg-types "^0.3.5"
+    ufo "^0.8.5"
 
 mock-apollo-client@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mock-apollo-client/-/mock-apollo-client-1.2.0.tgz#72543df0d74577d29be1b34cecba8898c7e71451"
-  integrity sha512-zCVHv3p7zvUmen9zce9l965ZrI6rMbrm2/oqGaTerVYOaYskl/cVgTG/L7iIToTIpI7onk/f6tu8hxPXZdyy/g==
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/mock-apollo-client/-/mock-apollo-client-1.2.1.tgz#e3bfdc3ff73b1fea28fa7e91ec82e43ba8cbfa39"
+  integrity sha512-QYQ6Hxo+t7hard1bcHHbsHxlNQYTQsaMNsm2Psh/NbwLMi2R4tGzplJKt97MUWuARHMq3GHB4PTLj/gxej4Caw==
 
-module-alias@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
-  integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
 mrmime@^1.0.0:
   version "1.0.1"
@@ -7439,28 +4635,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.1.1:
+ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-multicast-dns@^7.2.5:
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
-  integrity sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==
-  dependencies:
-    dns-packet "^5.2.2"
-    thunky "^1.0.2"
-
-mz@^2.4.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
-  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
-  dependencies:
-    any-promise "^1.0.0"
-    object-assign "^4.0.1"
-    thenify-all "^1.0.0"
-
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@@ -7471,77 +4650,22 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-negotiator@0.6.3:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
-  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
-
-neo-async@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
-  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
-
 ngeohash@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/ngeohash/-/ngeohash-0.6.3.tgz#10b1e80be5488262ec95c56cf2dbb6c45fbdf245"
   integrity sha512-kltF0cOxgx1AbmVzKxYZaoB0aj7mOxZeHaerEtQV0YaqnkXNq26WWqMmJ6lTqShYxVRWZ/mwvvTrNeOwdslWiw==
 
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
-  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
-
-no-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
-  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
-  dependencies:
-    lower-case "^2.0.2"
-    tslib "^2.0.3"
-
-node-fetch@^2.6.7:
+node-fetch@^2.x.x:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
   dependencies:
     whatwg-url "^5.0.0"
 
-node-forge@^1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
-  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
-
-node-int64@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
-  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
-
-node-releases@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666"
-  integrity sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==
-
-nopt@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
-  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
-  dependencies:
-    abbrev "1"
-
-normalize-package-data@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    resolve "^1.10.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
-normalize-path@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-1.0.0.tgz#32d0e472f91ff345701c15a8311018d3b0a90379"
-  integrity sha512-7WyT0w8jhpDStXRq5836AMmihQwq2nrUVQrgjvUo/p/NZf9uy/MeJ246lBJVmWuYXMlJuG9BNZHF0hWjfTbQUA==
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -7553,25 +4677,6 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
-normalize-url@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
-  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
-
-npm-run-path@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
-  integrity sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==
-  dependencies:
-    path-key "^2.0.0"
-
-npm-run-path@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
-  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
-  dependencies:
-    path-key "^3.0.0"
-
 nth-check@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
@@ -7580,11 +4685,11 @@ nth-check@^2.0.1:
     boolbase "^1.0.0"
 
 nwsapi@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
-  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
+  integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
 
-object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -7594,7 +4699,7 @@ object-hash@^3.0.0:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-inspect@^1.12.0, object-inspect@^1.9.0:
+object-inspect@^1.12.2, object-inspect@^1.9.0:
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
@@ -7604,14 +4709,14 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.0, object.assign@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
-  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+object.assign@^4.1.0, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
   dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    has-symbols "^1.0.1"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
 object.values@^1.1.5:
@@ -7623,45 +4728,21 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-obuf@^1.0.0, obuf@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
-  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
-
-on-finished@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
-  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
+on-finished@~2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==
   dependencies:
     ee-first "1.1.1"
 
-on-headers@~1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
-  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
-
-once@^1.3.0, once@^1.3.1, once@^1.4.0:
+once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
 
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  integrity sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==
-  dependencies:
-    mimic-fn "^1.0.0"
-
-onetime@^5.1.0, onetime@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
-  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
-  dependencies:
-    mimic-fn "^2.1.0"
-
-open@^8.0.2, open@^8.0.9:
+open@^8.4.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
   integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
@@ -7670,11 +4751,6 @@ open@^8.0.2, open@^8.0.9:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-opener@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
-  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
-
 optimism@^0.16.1:
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.1.tgz#7c8efc1f3179f18307b887e18c15c5b7133f6e7d"
@@ -7707,21 +4783,6 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
-ora@^5.3.0:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/ora/-/ora-5.4.1.tgz#1b2678426af4ac4a509008e5e4ac9e9959db9e18"
-  integrity sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
-  dependencies:
-    bl "^4.1.0"
-    chalk "^4.1.0"
-    cli-cursor "^3.1.0"
-    cli-spinners "^2.5.0"
-    is-interactive "^1.0.0"
-    is-unicode-supported "^0.1.0"
-    log-symbols "^4.1.0"
-    strip-ansi "^6.0.0"
-    wcwidth "^1.0.1"
-
 orderedmap@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.0.0.tgz#12ff5ef6ea9d12d6430b80c701b35475e1c9ff34"
@@ -7732,64 +4793,19 @@ p-debounce@^4.0.0:
   resolved "https://registry.yarnpkg.com/p-debounce/-/p-debounce-4.0.0.tgz#348e3f44489baa9435cc7d807f17b3bb2fb16b24"
   integrity sha512-4Ispi9I9qYGO4lueiLDhe4q4iK5ERK8reLsuzH6BPaXn53EGaua8H66PXIFGrW897hwjXp+pVLrm/DLxN0RF0A==
 
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==
-
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
   dependencies:
-    p-try "^1.0.0"
+    yocto-queue "^0.1.0"
 
-p-limit@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
-  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
   dependencies:
-    p-try "^2.0.0"
-
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==
-  dependencies:
-    p-limit "^1.1.0"
-
-p-locate@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
-  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
-  dependencies:
-    p-limit "^2.2.0"
-
-p-retry@^4.5.0:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
-  integrity sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==
-  dependencies:
-    "@types/retry" "0.12.0"
-    retry "^0.13.1"
-
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==
-
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
-param-case@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
-  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
-  dependencies:
-    dot-case "^3.0.4"
-    tslib "^2.0.3"
+    p-limit "^3.0.2"
 
 parent-module@^1.0.0:
   version "1.0.1"
@@ -7798,56 +4814,28 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-json@^5.0.0, parse-json@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
-  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    error-ex "^1.3.1"
-    json-parse-even-better-errors "^2.3.0"
-    lines-and-columns "^1.1.6"
+parse-cache-control@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-cache-control/-/parse-cache-control-1.0.1.tgz#8eeab3e54fa56920fe16ba38f77fa21aacc2d74e"
+  integrity sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==
 
 parse-srcset@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
   integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
 
-parse5-htmlparser2-tree-adapter@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+parse5@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.1.tgz#4649f940ccfb95d8754f37f73078ea20afe0c746"
+  integrity sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==
   dependencies:
-    parse5 "^6.0.1"
+    entities "^4.4.0"
 
-parse5@6.0.1, parse5@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
-  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
-
-parse5@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
-
-parseurl@~1.3.2, parseurl@~1.3.3:
+parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-pascal-case@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
-  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
-  dependencies:
-    no-case "^3.0.4"
-    tslib "^2.0.3"
-
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -7858,12 +4846,7 @@ path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
-path-key@^2.0.0, path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
-
-path-key@^3.0.0, path-key@^3.1.0:
+path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -7873,32 +4856,37 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-to-regexp@0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-phoenix@^1.6:
-  version "1.6.10"
-  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.6.10.tgz#6a5d0a330b32070fb7f90b96efa1244ba7c4da08"
-  integrity sha512-KfYAJrrw95JGaOlvmZ+lFJZhSfQmo4SVOj6s175/V8YxqhYGO5EGacdrJxQmJ6uhaK4H3S6b0wkC1T33qU/d8Q==
+pathe@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.2.0.tgz#30fd7bbe0a0d91f0e60bae621f5d19e9e225c339"
+  integrity sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==
 
-picocolors@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
-  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+pathe@^0.3.7, pathe@^0.3.8:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.3.8.tgz#3584f03fda1981a6efe8bc24623d82cbb4219acb"
+  integrity sha512-c71n61F1skhj/jzZe+fWE9XDoTYjWbUwIKVwFftZ5IOgiX44BVkTkD+/803YDgR50tqeO4eXWxLyVHBLWQAD1g==
+
+pathval@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
+  integrity sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==
+
+phoenix@^1.6:
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.6.12.tgz#bda865682977f24f044f953043c8bd648085d42d"
+  integrity sha512-r0MkPQqC348wfEO9Tn6sbFMPt0zn0Mo0aYIz+zig76xxvFQp7xk5GwwlErh04qyCnNfXta2emTQ7aEyo1OtMIQ==
 
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -7908,82 +4896,24 @@ pify@^2.3.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
-pirates@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
-  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
-
-pkg-dir@^4.1.0, pkg-dir@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+pkg-types@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.3.5.tgz#ea01c7cf28da9e4c5b85de9b250de4b3dc2e9abc"
+  integrity sha512-VkxCBFVgQhNHYk9subx+HOhZ4jzynH11ah63LZsprTKwPCWG9pfWBlkElWFbvkP9BVR0dP1jS9xPdhaHQNK74Q==
   dependencies:
-    find-up "^4.0.0"
+    jsonc-parser "^3.2.0"
+    mlly "^0.5.14"
+    pathe "^0.3.7"
 
 plausible-tracker@^0.3.4:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/plausible-tracker/-/plausible-tracker-0.3.8.tgz#9b8b322cc41e0e1d6473869ef234deea365a5a40"
   integrity sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==
 
-popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
-portfinder@^1.0.26:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
-  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
-  dependencies:
-    async "^2.6.2"
-    debug "^3.1.1"
-    mkdirp "^0.5.5"
-
-postcss-calc@^8.2.3:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5"
-  integrity sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==
-  dependencies:
-    postcss-selector-parser "^6.0.9"
-    postcss-value-parser "^4.2.0"
-
-postcss-colormin@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.0.tgz#3cee9e5ca62b2c27e84fce63affc0cfb5901956a"
-  integrity sha512-WdDO4gOFG2Z8n4P8TWBpshnL3JpmNmJwdnfP2gbk2qBA8PWwOYcmjmI/t3CmMeL72a7Hkd+x/Mg9O2/0rD54Pg==
-  dependencies:
-    browserslist "^4.16.6"
-    caniuse-api "^3.0.0"
-    colord "^2.9.1"
-    postcss-value-parser "^4.2.0"
-
-postcss-convert-values@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.2.tgz#31586df4e184c2e8890e8b34a0b9355313f503ab"
-  integrity sha512-c6Hzc4GAv95B7suy4udszX9Zy4ETyMCgFPUDtWjdFTKH1SE9eFY/jEpHSwTH1QPuwxHpWslhckUQWbNRM4ho5g==
-  dependencies:
-    browserslist "^4.20.3"
-    postcss-value-parser "^4.2.0"
-
-postcss-discard-comments@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696"
-  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
-
-postcss-discard-duplicates@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz#9eb4fe8456706a4eebd6d3b7b777d07bad03e848"
-  integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
-
-postcss-discard-empty@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz#e57762343ff7f503fe53fca553d18d7f0c369c6c"
-  integrity sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==
-
-postcss-discard-overridden@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz#7e8c5b53325747e9d90131bb88635282fb4a276e"
-  integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
+playwright-core@1.25.2:
+  version "1.25.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.25.2.tgz#ea4baa398a4d45fcdfe48799482b599e3d0f033f"
+  integrity sha512-0yTbUE9lIddkEpLHL3u8PoCL+pWiZtj5A/j3U7YoNjcmKKDGBnCrgHJMzwd2J5vy6l28q4ki3JIuz7McLHhl1A==
 
 postcss-import@^14.1.0:
   version "14.1.0"
@@ -8009,93 +4939,6 @@ postcss-load-config@^3.1.4:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
-postcss-loader@^6.1.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
-  integrity sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.5"
-    semver "^7.3.5"
-
-postcss-merge-longhand@^5.1.5:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.5.tgz#b0e03bee3b964336f5f33c4fc8eacae608e91c05"
-  integrity sha512-NOG1grw9wIO+60arKa2YYsrbgvP6tp+jqc7+ZD5/MalIw234ooH2C6KlR6FEn4yle7GqZoBxSK1mLBE9KPur6w==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    stylehacks "^5.1.0"
-
-postcss-merge-rules@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.2.tgz#7049a14d4211045412116d79b751def4484473a5"
-  integrity sha512-zKMUlnw+zYCWoPN6yhPjtcEdlJaMUZ0WyVcxTAmw3lkkN/NDMRkOkiuctQEoWAOvH7twaxUUdvBWl0d4+hifRQ==
-  dependencies:
-    browserslist "^4.16.6"
-    caniuse-api "^3.0.0"
-    cssnano-utils "^3.1.0"
-    postcss-selector-parser "^6.0.5"
-
-postcss-minify-font-values@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b"
-  integrity sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-minify-gradients@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz#f1fe1b4f498134a5068240c2f25d46fcd236ba2c"
-  integrity sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==
-  dependencies:
-    colord "^2.9.1"
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-minify-params@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-5.1.3.tgz#ac41a6465be2db735099bbd1798d85079a6dc1f9"
-  integrity sha512-bkzpWcjykkqIujNL+EVEPOlLYi/eZ050oImVtHU7b4lFS82jPnsCb44gvC6pxaNt38Els3jWYDHTjHKf0koTgg==
-  dependencies:
-    browserslist "^4.16.6"
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-minify-selectors@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz#d4e7e6b46147b8117ea9325a915a801d5fe656c6"
-  integrity sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==
-  dependencies:
-    postcss-selector-parser "^6.0.5"
-
-postcss-modules-extract-imports@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
-  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
-
-postcss-modules-local-by-default@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
-  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
-  dependencies:
-    icss-utils "^5.0.0"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.1.0"
-
-postcss-modules-scope@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
-  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
-  dependencies:
-    postcss-selector-parser "^6.0.4"
-
-postcss-modules-values@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
-  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
-  dependencies:
-    icss-utils "^5.0.0"
-
 postcss-nested@5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
@@ -8103,93 +4946,7 @@ postcss-nested@5.0.6:
   dependencies:
     postcss-selector-parser "^6.0.6"
 
-postcss-normalize-charset@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz#9302de0b29094b52c259e9b2cf8dc0879879f0ed"
-  integrity sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==
-
-postcss-normalize-display-values@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz#72abbae58081960e9edd7200fcf21ab8325c3da8"
-  integrity sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-positions@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-5.1.0.tgz#902a7cb97cf0b9e8b1b654d4a43d451e48966458"
-  integrity sha512-8gmItgA4H5xiUxgN/3TVvXRoJxkAWLW6f/KKhdsH03atg0cB8ilXnrB5PpSshwVu/dD2ZsRFQcR1OEmSBDAgcQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-repeat-style@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.0.tgz#f6d6fd5a54f51a741cc84a37f7459e60ef7a6398"
-  integrity sha512-IR3uBjc+7mcWGL6CtniKNQ4Rr5fTxwkaDHwMBDGGs1x9IVRkYIT/M4NelZWkAOBdV6v3Z9S46zqaKGlyzHSchw==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-string@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz#411961169e07308c82c1f8c55f3e8a337757e228"
-  integrity sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-timing-functions@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz#d5614410f8f0b2388e9f240aa6011ba6f52dafbb"
-  integrity sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-unicode@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.0.tgz#3d23aede35e160089a285e27bf715de11dc9db75"
-  integrity sha512-J6M3MizAAZ2dOdSjy2caayJLQT8E8K9XjLce8AUQMwOrCvjCHv24aLC/Lps1R1ylOfol5VIDMaM/Lo9NGlk1SQ==
-  dependencies:
-    browserslist "^4.16.6"
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-url@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz#ed9d88ca82e21abef99f743457d3729a042adcdc"
-  integrity sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==
-  dependencies:
-    normalize-url "^6.0.1"
-    postcss-value-parser "^4.2.0"
-
-postcss-normalize-whitespace@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz#08a1a0d1ffa17a7cc6efe1e6c9da969cc4493cfa"
-  integrity sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-ordered-values@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-5.1.2.tgz#daffacd4abf327d52d5ac570b59dfbcf4b836614"
-  integrity sha512-wr2avRbW4HS2XE2ZCqpfp4N/tDC6GZKZ+SVP8UBTOVS8QWrc4TD8MYrebJrvVVlGPKszmiSCzue43NDiVtgDmg==
-  dependencies:
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-reduce-initial@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.0.tgz#fc31659ea6e85c492fb2a7b545370c215822c5d6"
-  integrity sha512-5OgTUviz0aeH6MtBjHfbr57tml13PuedK/Ecg8szzd4XRMbYxH4572JFG067z+FqBIf6Zp/d+0581glkvvWMFw==
-  dependencies:
-    browserslist "^4.16.6"
-    caniuse-api "^3.0.0"
-
-postcss-reduce-transforms@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz#333b70e7758b802f3dd0ddfe98bb1ccfef96b6e9"
-  integrity sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@6.0.10, postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
@@ -8197,38 +4954,15 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selecto
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-svgo@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
-  integrity sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    svgo "^2.7.0"
-
-postcss-unique-selectors@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz#a9f273d1eacd09e9aa6088f4b0507b18b1b541b6"
-  integrity sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==
-  dependencies:
-    postcss-selector-parser "^6.0.5"
-
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^7.0.36:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
-postcss@^8, postcss@^8.2.6, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.7:
-  version "8.4.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
-  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+postcss@^8, postcss@^8.1.10, postcss@^8.3.11, postcss@^8.4.14, postcss@^8.4.16:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
@@ -8271,23 +5005,20 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-"prettier@^1.18.2 || ^2.0.0", prettier@^2.2.1, prettier@^2.5.1:
+prettier@^2.2.1, prettier@^2.5.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
   integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
-pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
+pretty-bytes@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-error@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
-  integrity sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==
-  dependencies:
-    lodash "^4.17.20"
-    renderkid "^3.0.0"
+pretty-bytes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.0.0.tgz#928be2ad1f51a2e336add8ba764739f9776a8140"
+  integrity sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==
 
 pretty-format@^23.0.1:
   version "23.6.0"
@@ -8297,55 +5028,17 @@ pretty-format@^23.0.1:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-pretty-format@^27.0.0, pretty-format@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
-  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
-  dependencies:
-    ansi-regex "^5.0.1"
-    ansi-styles "^5.0.0"
-    react-is "^17.0.1"
-
-pretty-format@^28.1.1:
-  version "28.1.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.1.1.tgz#f731530394e0f7fcd95aba6b43c50e02d86b95cb"
-  integrity sha512-wwJbVTGFHeucr5Jw2bQ9P+VYHyLdAqedFLEkdQUVaBF/eiidDwH5OpilINq4mEfhbCjLnirt6HTTDhv1HaTIQw==
-  dependencies:
-    "@jest/schemas" "^28.0.2"
-    ansi-regex "^5.0.1"
-    ansi-styles "^5.0.0"
-    react-is "^18.0.0"
-
-pretty@2.0.0, pretty@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
-  integrity sha512-G9xUchgTEiNpormdYBl+Pha50gOUovT18IvAe7EYMZ1/f9W/WWMPRn+xI68yXNMUk3QXHDwo/1wV/4NejVNe1w==
-  dependencies:
-    condense-newlines "^0.2.1"
-    extend-shallow "^2.0.1"
-    js-beautify "^1.6.12"
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-progress-webpack-plugin@^1.0.12:
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/progress-webpack-plugin/-/progress-webpack-plugin-1.0.16.tgz#278f5c1afd21af783aad72c5ec95241520230fe5"
-  integrity sha512-sdiHuuKOzELcBANHfrupYo+r99iPRyOnw15qX+rNlVUqXGfjXdH4IgxriKwG1kNJwVswKQHMdj1hYZMcb9jFaA==
+promise@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.2.0.tgz#a1f6280ab67457fbfc8aad2b198c9497e9e5c806"
+  integrity sha512-+CMAlLHqwRYwBMXKCP+o8ns7DN+xHDUiI+0nArsiJ9y+kJVPLFxEaSw6Ha9s9H0tftxg2Yzl25wqj9G7m5wLZg==
   dependencies:
-    chalk "^2.1.0"
-    figures "^2.0.0"
-    log-update "^2.3.0"
-
-prompts@^2.0.1:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
-  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
-  dependencies:
-    kleur "^3.0.3"
-    sisteransi "^1.0.5"
+    asap "~2.0.6"
 
 prop-types@^15.7.2:
   version "15.8.1"
@@ -8356,7 +5049,7 @@ prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-prosemirror-commands@^1.2.1:
+prosemirror-commands@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.3.0.tgz#361b2e2b2a347ce7453386459f97c3f549a1113b"
   integrity sha512-BwBbZ5OAScPcm0x7H8SPbqjuEJnCU2RJT9LDyOiiIl/3NbL1nJZI4SFNHwU2e/tRr2Xe7JsptpzseqvZvToLBQ==
@@ -8365,7 +5058,7 @@ prosemirror-commands@^1.2.1:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-dropcursor@^1.4.0:
+prosemirror-dropcursor@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.5.0.tgz#edbc61d6f71f9f924130eec8e85b0861357957c9"
   integrity sha512-vy7i77ddKyXlu8kKBB3nlxLBnsWyKUmQIPB5x8RkYNh01QNp/qqGmdd5yZefJs0s3rtv5r7Izfu2qbtr+tYAMQ==
@@ -8374,17 +5067,17 @@ prosemirror-dropcursor@^1.4.0:
     prosemirror-transform "^1.1.0"
     prosemirror-view "^1.1.0"
 
-prosemirror-gapcursor@^1.2.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.1.tgz#8cfd874592e4504d63720e14ed680c7866e64554"
-  integrity sha512-GKTeE7ZoMsx5uVfc51/ouwMFPq0o8YrZ7Hx4jTF4EeGbXxBveUV8CGv46mSHuBBeXGmvu50guoV2kSnOeZZnUA==
+prosemirror-gapcursor@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.0.tgz#e07c22ad959b86ec0c4cfc590cc5f484dd984d56"
+  integrity sha512-9Tdx83xB2W4Oqchm12FtCkSizbqvi64cjs1I9TRPblqdA5TUWoVZ4ZI+t71Jh6HSEh4cDMPzx3UwfryJtKlb/w==
   dependencies:
     prosemirror-keymap "^1.0.0"
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-view "^1.0.0"
 
-prosemirror-history@^1.2.0:
+prosemirror-history@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.3.0.tgz#bf5a1ff7759aca759ddf0c722c2fa5b14fb0ddc1"
   integrity sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==
@@ -8393,7 +5086,7 @@ prosemirror-history@^1.2.0:
     prosemirror-transform "^1.0.0"
     rope-sequence "^1.3.0"
 
-prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.5:
+prosemirror-keymap@1.2.0, prosemirror-keymap@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.0.tgz#d5cc9da9b712020690a994b50b92a0e448a60bf5"
   integrity sha512-TdSfu+YyLDd54ufN/ZeD1VtBRYpgZnTPnnbY+4R08DDgs84KrIPEPbJL8t1Lm2dkljFx6xeBE26YWH3aIzkPKg==
@@ -8401,14 +5094,14 @@ prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.5:
     prosemirror-state "^1.0.0"
     w3c-keyname "^2.2.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.16.1:
+prosemirror-model@1.18.1, prosemirror-model@^1.0.0, prosemirror-model@^1.16.0:
   version "1.18.1"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
   integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
   dependencies:
     orderedmap "^2.0.0"
 
-prosemirror-schema-list@^1.1.6:
+prosemirror-schema-list@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.2.0.tgz#1932268593a7396c0ac168cbe31f28187406ce24"
   integrity sha512-8PT/9xOx1HHdC7fDNNfhQ50Z8Mzu7nKyA1KCDltSpcZVZIbB0k7KtsHrnXyuIhbLlScoymBiLZ00c5MH6wdFsA==
@@ -8417,73 +5110,68 @@ prosemirror-schema-list@^1.1.6:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.4:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.0.tgz#0b0c23b38d9f5bb23d19ad043cf8453d876c0414"
-  integrity sha512-mVDZdjNX/YT5FvypiwbphJe9psA5h+j9apsSszVRFc6oKFoIInvzdujh8QW9f9lwHtSYajLxNiM1hPhd0Sl1XA==
+prosemirror-state@1.4.1, prosemirror-state@^1.0.0, prosemirror-state@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.1.tgz#f6e26c7b6a7e11206176689eb6ebbf91870953e1"
+  integrity sha512-U/LBDW2gNmVa07sz/D229XigSdDQ5CLFwVB1Vb32MJbAHHhWe/6pOc721faI17tqw4pZ49i1xfY/jEZ9tbIhPg==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.3.3:
+prosemirror-transform@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.6.0.tgz#8162dbfaf124f9253a7ab28605a9460411a96a53"
   integrity sha512-MAp7AjsjEGEqQY0sSMufNIUuEyB1ZR9Fqlm8dTwwWwpEJRv/plsKjWXBbx52q3Ml8MtaMcd7ic14zAHVB3WaMw==
   dependencies:
     prosemirror-model "^1.0.0"
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.23.6:
-  version "1.26.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.26.1.tgz#fcb6f6e6ca8712714bf7b84bfcdd49fb4617f48b"
-  integrity sha512-8MEuEFQ64zoIRSz24A97WhtSqtZynTwTsECt0kOh0TotNx/YRPKWozEmUJUmJGUYsFowZNdsI0gm1bvX1x3/9Q==
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.7.0.tgz#a8a0768f3ee6418d26ebef435beda9d43c65e472"
+  integrity sha512-O4T697Cqilw06Zvc3Wm+e237R6eZtJL/xGMliCi+Uo8VL6qHk6afz1qq0zNjT3eZMuYwnP8ZS0+YxX/tfcE9TQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@1.26.2:
+  version "1.26.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.26.2.tgz#e673894ecf26aea330b727622d561c51b41d31eb"
+  integrity sha512-CGKw+GadkfSBEwRAJTHCEKJ4DlV6/3IhAdjpwGyZHUHtbP7jX4Ol4zmi7xa2c6GOabDlIJLYXJydoNYLX7lNeQ==
   dependencies:
     prosemirror-model "^1.16.0"
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.1.0"
 
-proto-list@~1.2.1:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
-  integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
-
-proxy-addr@~2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
-  integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0:
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.28.0.tgz#d7ebdda7cf44b2b2c0b795a7546aef0f71b50c76"
+  integrity sha512-cmFK9osE7WAQptye6o/I5LjURZkSF4z3H7+LZmQtpJDZ9x4X/Z9v85oOeDvfRiX/J2rsaRYbEkWWbu3l9eBsdQ==
   dependencies:
-    forwarded "0.2.0"
-    ipaddr.js "1.9.1"
-
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
+    prosemirror-model "^1.16.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
 
 psl@^1.1.33:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
-  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qs@6.10.3:
-  version "6.10.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
-  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+qs@^6.4.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
   dependencies:
     side-channel "^1.0.4"
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -8501,36 +5189,11 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-range-parser@^1.2.1, range-parser@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
-  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
-
-raw-body@2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
-  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
-  dependencies:
-    bytes "3.1.2"
-    http-errors "2.0.0"
-    iconv-lite "0.4.24"
-    unpipe "1.0.0"
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
-react-is@^18.0.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
-  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -8538,26 +5201,7 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
-read-pkg-up@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
-  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
-  dependencies:
-    find-up "^4.1.0"
-    read-pkg "^5.2.0"
-    type-fest "^0.8.1"
-
-read-pkg@^5.1.1, read-pkg@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
-  dependencies:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
-
-readable-stream@^2.0.1:
+readable-stream@^2.2.2:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -8570,15 +5214,6 @@ readable-stream@^2.0.1:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.0.6, readable-stream@^3.4.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -8586,17 +5221,10 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-rechoir@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686"
-  integrity sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==
-  dependencies:
-    resolve "^1.9.0"
-
-regenerate-unicode-properties@^10.0.1:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
-  integrity sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==
+regenerate-unicode-properties@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
+  integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==
   dependencies:
     regenerate "^1.4.2"
 
@@ -8646,15 +5274,15 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regexpu-core@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.0.1.tgz#c531122a7840de743dcf9c83e923b5560323ced3"
-  integrity sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==
+regexpu-core@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.2.1.tgz#a69c26f324c1e962e9ffd0b88b055caba8089139"
+  integrity sha512-HrnlNtpvqP1Xkb28tMhBUO2EbyUHdQlsnlAhzWcwHy8WJR53UWr7/MAvqrsQKMbV4qdpv03oTMG8iIhfsPFktQ==
   dependencies:
     regenerate "^1.4.2"
-    regenerate-unicode-properties "^10.0.1"
-    regjsgen "^0.6.0"
-    regjsparser "^0.8.2"
+    regenerate-unicode-properties "^10.1.0"
+    regjsgen "^0.7.1"
+    regjsparser "^0.9.1"
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
@@ -8663,34 +5291,18 @@ register-service-worker@^1.7.2:
   resolved "https://registry.yarnpkg.com/register-service-worker/-/register-service-worker-1.7.2.tgz#6516983e1ef790a98c4225af1216bc80941a4bd2"
   integrity sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A==
 
-regjsgen@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
-  integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
+regjsgen@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.7.1.tgz#ee5ef30e18d3f09b7c369b76e7c2373ed25546f6"
+  integrity sha512-RAt+8H2ZEzHeYWxZ3H2z6tF18zyyOnlcdaafLrm21Bguj7uZy6ULibiAFdXEtKQY4Sy7wDTwDiOazasMLc4KPA==
 
-regjsparser@^0.8.2:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.8.4.tgz#8a14285ffcc5de78c5b95d62bbf413b6bc132d5f"
-  integrity sha512-J3LABycON/VNEu3abOviqGHuB/LOtOQj8SKmfP9anY5GfAVw/SPjwzSjxGjbZXIxbGfqTHtJw58C2Li/WkStmA==
+regjsparser@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709"
+  integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==
   dependencies:
     jsesc "~0.5.0"
 
-relateurl@^0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-  integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
-
-renderkid@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
-  integrity sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==
-  dependencies:
-    css-select "^4.1.3"
-    dom-converter "^0.2.0"
-    htmlparser2 "^6.1.0"
-    lodash "^4.17.21"
-    strip-ansi "^6.0.1"
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -8711,64 +5323,26 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resolve-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
-  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
-  dependencies:
-    resolve-from "^5.0.0"
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
-resolve.exports@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
-  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
-
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.9.0:
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
-  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
   dependencies:
-    is-core-module "^2.8.1"
+    is-core-module "^2.9.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  integrity sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
-  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-  dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
-
-retry@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
-  integrity sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==
-
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -8785,10 +5359,27 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup@^2.43.1:
-  version "2.75.6"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.75.6.tgz#ac4dc8600f95942a0180f61c7c9d6200e374b439"
-  integrity sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==
+rollup-plugin-visualizer@^5.7.1:
+  version "5.8.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.8.1.tgz#deb207017fcf584f3dce088a67eac0d49e4e2a86"
+  integrity sha512-NBT/xN/LWCwDM2/j5vYmjzpEAKHyclo/8Cv8AfTCwgADAG+tLJDy1vzxMw6NO0dSDjmTeRELD9UU3FwknLv0GQ==
+  dependencies:
+    nanoid "^3.3.4"
+    open "^8.4.0"
+    source-map "^0.7.3"
+    yargs "^17.5.1"
+
+rollup@^2.43.1, rollup@^2.79.0:
+  version "2.79.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.0.tgz#9177992c9f09eb58c5e56cbfa641607a12b57ce2"
+  integrity sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+rollup@~2.78.0:
+  version "2.78.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.1.tgz#52fe3934d9c83cb4f7c4cb5fb75d88591be8648f"
+  integrity sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -8811,25 +5402,32 @@ rxjs@~6.2.2:
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+sade@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-"safer-buffer@>= 2.1.2 < 3":
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+"safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
 sanitize-html@^2.5.3:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.7.0.tgz#e106205b468aca932e2f9baf241f24660d34e279"
-  integrity sha512-jfQelabOn5voO7FAfnQF7v+jsA6z9zC/O4ec0z3E35XPEtHYJT/OdUziVWlKW4irCr2kXaQAyXTXDHWAibg1tA==
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.7.2.tgz#54c5189af75e3237d996e4b9a5e3eaad12c7f7fc"
+  integrity sha512-DggSTe7MviO+K4YTCwprG6W1vsG+IIX67yp/QY55yQqKCJYSWzCA1rZbaXzkjoKeL9+jqwm56wD6srYLtUNivg==
   dependencies:
     deepmerge "^4.2.2"
     escape-string-regexp "^4.0.0"
@@ -8838,119 +5436,41 @@ sanitize-html@^2.5.3:
     parse-srcset "^1.0.2"
     postcss "^8.3.11"
 
-sass-loader@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.0.0.tgz#0b4bff0289951ed21240bca54453eca3dbda1713"
-  integrity sha512-IHCFecI+rbPvXE2zO/mqdVFe8MU7ElGrwga9hh2H65Ru4iaBJAMRteum1c4Gsxi9Cq1FOtTEDd6+/AEYuQDM4Q==
-  dependencies:
-    klona "^2.0.4"
-    neo-async "^2.6.2"
-
 sass@^1.34.1:
-  version "1.52.3"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.52.3.tgz#b7cc7ffea2341ccc9a0c4fd372bf1b3f9be1b6cb"
-  integrity sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==
+  version "1.54.9"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.9.tgz#b05f14ed572869218d1a76961de60cd647221762"
+  integrity sha512-xb1hjASzEH+0L0WI9oFjqhRi51t/gagWnxLiwUNMltA0Ab6jIDkAacgKiGYKM9Jhy109osM7woEEai6SXeJo5Q==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-saxes@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
-  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+saxes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
+  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
   dependencies:
     xmlchars "^2.2.0"
 
-schema-utils@2.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
-  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+section-matter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167"
+  integrity sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==
   dependencies:
-    "@types/json-schema" "^7.0.4"
-    ajv "^6.12.2"
-    ajv-keywords "^3.4.1"
-
-schema-utils@^2.6.5:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
-  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
-  dependencies:
-    "@types/json-schema" "^7.0.5"
-    ajv "^6.12.4"
-    ajv-keywords "^3.5.2"
-
-schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
-  integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
-  dependencies:
-    "@types/json-schema" "^7.0.8"
-    ajv "^6.12.5"
-    ajv-keywords "^3.5.2"
-
-schema-utils@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
-  integrity sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==
-  dependencies:
-    "@types/json-schema" "^7.0.9"
-    ajv "^8.8.0"
-    ajv-formats "^2.1.1"
-    ajv-keywords "^5.0.0"
-
-select-hose@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
-  integrity sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==
-
-selfsigned@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.0.1.tgz#8b2df7fa56bf014d19b6007655fff209c0ef0a56"
-  integrity sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==
-  dependencies:
-    node-forge "^1"
-
-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-semver@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
-  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-
-semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6, semver@^7.3.7:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
-  dependencies:
-    lru-cache "^6.0.0"
+    extend-shallow "^2.0.1"
+    kind-of "^6.0.0"
 
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-send@0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
-  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
+semver@^7.3.5, semver@^7.3.6, semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
   dependencies:
-    debug "2.6.9"
-    depd "2.0.0"
-    destroy "1.2.0"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "2.0.0"
-    mime "1.6.0"
-    ms "2.1.3"
-    on-finished "2.4.1"
-    range-parser "~1.2.1"
-    statuses "2.0.1"
+    lru-cache "^6.0.0"
 
 serialize-javascript@^4.0.0:
   version "4.0.0"
@@ -8959,60 +5479,6 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
-  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
-  dependencies:
-    randombytes "^2.1.0"
-
-serve-index@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
-  integrity sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==
-  dependencies:
-    accepts "~1.3.4"
-    batch "0.6.1"
-    debug "2.6.9"
-    escape-html "~1.0.3"
-    http-errors "~1.6.2"
-    mime-types "~2.1.17"
-    parseurl "~1.3.2"
-
-serve-static@1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
-  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.18.0"
-
-setprototypeof@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
-  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
-
-setprototypeof@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
-  integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
-
-shallow-clone@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
-  integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==
-  dependencies:
-    kind-of "^6.0.2"
-
-shebang-command@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
-  dependencies:
-    shebang-regex "^1.0.0"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -9020,20 +5486,19 @@ shebang-command@^2.0.0:
   dependencies:
     shebang-regex "^3.0.0"
 
-shebang-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
-
 shebang-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.6.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
-  integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
+shiki@0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.10.1.tgz#6f9a16205a823b56c072d0f1a0bcd0f2646bef14"
+  integrity sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==
+  dependencies:
+    jsonc-parser "^3.0.0"
+    vscode-oniguruma "^1.6.1"
+    vscode-textmate "5.2.0"
 
 side-channel@^1.0.4:
   version "1.0.4"
@@ -9044,29 +5509,19 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-sigmund@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
-  integrity sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==
-
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+signal-exit@^3.0.2:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-sirv@^1.0.7:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
-  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+sirv@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.2.tgz#128b9a628d77568139cff85703ad5497c46a4760"
+  integrity sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==
   dependencies:
     "@polka/url" "^1.0.0-next.20"
     mrmime "^1.0.0"
-    totalist "^1.0.0"
-
-sisteransi@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
-  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+    totalist "^3.0.0"
 
 slash@^3.0.0:
   version "3.0.0"
@@ -9078,39 +5533,17 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-sockjs@^0.3.24:
-  version "0.3.24"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
-  integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
-  dependencies:
-    faye-websocket "^0.11.3"
-    uuid "^8.3.2"
-    websocket-driver "^0.7.4"
+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
-sortablejs@1.10.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
-  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
-
-source-list-map@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
-  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
-
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-source-map-support@0.5.13:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
-source-map-support@^0.5.6, source-map-support@~0.5.20:
+source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -9118,12 +5551,7 @@ source-map-support@^0.5.6, source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-  integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
-
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -9145,118 +5573,16 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
-spdx-correct@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
-  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
-  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
-  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
-  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
-
-spdy-transport@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
-  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
-  dependencies:
-    debug "^4.1.0"
-    detect-node "^2.0.4"
-    hpack.js "^2.1.6"
-    obuf "^1.1.2"
-    readable-stream "^3.0.6"
-    wbuf "^1.7.3"
-
-spdy@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
-  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
-  dependencies:
-    debug "^4.1.0"
-    handle-thing "^2.0.0"
-    http-deceiver "^1.2.7"
-    select-hose "^2.0.0"
-    spdy-transport "^3.0.0"
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-ssri@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af"
-  integrity sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==
-  dependencies:
-    minipass "^3.1.1"
-
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
-stack-utils@^2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
-  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
-  dependencies:
-    escape-string-regexp "^2.0.0"
-
-stackframe@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
-  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
-
-statuses@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
-  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
-
-"statuses@>= 1.4.0 < 2":
+statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-string-length@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
-  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
-  dependencies:
-    char-regex "^1.0.2"
-    strip-ansi "^6.0.0"
-
-string-length@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-5.0.1.tgz#3d647f497b6e8e8d41e422f7e0b23bc536c8381e"
-  integrity sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==
-  dependencies:
-    char-regex "^2.0.0"
-    strip-ansi "^7.0.1"
-
-string-width@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
 string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -9298,13 +5624,6 @@ string.prototype.trimstart@^1.0.5:
     define-properties "^1.1.4"
     es-abstract "^1.19.5"
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -9328,13 +5647,6 @@ strip-ansi@^3.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==
-  dependencies:
-    ansi-regex "^3.0.0"
-
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
@@ -9342,55 +5654,32 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
-  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
-  dependencies:
-    ansi-regex "^6.0.1"
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+  integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
 
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
-strip-bom@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
-  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
-
 strip-comments@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
   integrity sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==
 
-strip-eof@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
-  integrity sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==
-
-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
-
-strip-indent@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
-  integrity sha512-RsSNPLpq6YUL7QYy44RnPVTn/lcVZtb48Uof3X5JLbF4zD/Gs7ZFDv2HWol+leoQN2mT86LAzSshGfkTlSOpsA==
-
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-stylehacks@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
-  integrity sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==
+strip-literal@^0.4.1:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-0.4.2.tgz#4f9fa6c38bb157b924e9ace7155ebf8a2342cbcf"
+  integrity sha512-pv48ybn4iE1O9RLgCAN0iU4Xv7RlBTiit6DKmMiErbs9x1wH6vXBs45tWc0H5wUIF6TLTrKweqkmYF/iraQKNw==
   dependencies:
-    browserslist "^4.16.6"
-    postcss-selector-parser "^6.0.4"
+    acorn "^8.8.0"
 
 supports-color@^2.0.0:
   version "2.0.0"
@@ -9411,44 +5700,11 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
-  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-hyperlinks@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
-  integrity sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==
-  dependencies:
-    has-flag "^4.0.0"
-    supports-color "^7.0.0"
-
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-svg-tags@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
-  integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
-
-svgo@^2.7.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
-  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
-  dependencies:
-    "@trysound/sax" "0.2.0"
-    commander "^7.2.0"
-    css-select "^4.1.3"
-    css-tree "^1.1.3"
-    csso "^4.2.0"
-    picocolors "^1.0.0"
-    stable "^0.1.8"
-
 symbol-observable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
@@ -9459,10 +5715,26 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+sync-request@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/sync-request/-/sync-request-6.1.0.tgz#e96217565b5e50bbffe179868ba75532fb597e68"
+  integrity sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==
+  dependencies:
+    http-response-object "^3.0.1"
+    sync-rpc "^1.2.1"
+    then-request "^6.0.0"
+
+sync-rpc@^1.2.1:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/sync-rpc/-/sync-rpc-1.3.6.tgz#b2e8b2550a12ccbc71df8644810529deb68665a7"
+  integrity sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw==
+  dependencies:
+    get-port "^3.1.0"
+
 tailwindcss@^3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.3.tgz#b9ef2c1ae537c339679e8e89635af8e143d1c7eb"
-  integrity sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
+  integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
   dependencies:
     arg "^5.0.2"
     chokidar "^3.5.3"
@@ -9473,7 +5745,7 @@ tailwindcss@^3:
     fast-glob "^3.2.11"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    lilconfig "^2.0.5"
+    lilconfig "^2.0.6"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
@@ -9485,17 +5757,7 @@ tailwindcss@^3:
     postcss-selector-parser "^6.0.10"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
-    resolve "^1.22.0"
-
-tapable@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-
-tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
-  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+    resolve "^1.22.1"
 
 temp-dir@^2.0.0:
   version "2.0.0"
@@ -9512,29 +5774,10 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
-terminal-link@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
-  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
-  dependencies:
-    ansi-escapes "^4.2.1"
-    supports-hyperlinks "^2.0.0"
-
-terser-webpack-plugin@^5.1.1, terser-webpack-plugin@^5.1.3:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.3.tgz#8033db876dd5875487213e87c627bca323e5ed90"
-  integrity sha512-Fx60G5HNYknNTNQnzQ1VePRuu89ZVYWfjRAeT5rITuCY/1b08s49e5kSQwHDirKZWuoKOBRFS98EUUoZ9kLEwQ==
-  dependencies:
-    "@jridgewell/trace-mapping" "^0.3.7"
-    jest-worker "^27.4.5"
-    schema-utils "^3.1.1"
-    serialize-javascript "^6.0.0"
-    terser "^5.7.2"
-
-terser@^5.0.0, terser@^5.10.0, terser@^5.7.2:
-  version "5.14.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.1.tgz#7c95eec36436cb11cf1902cc79ac564741d19eca"
-  integrity sha512-+ahUAE+iheqBTDxXhTisdA8hgvbEG1hHOQ9xmNjeUJSoi6DU/gMrKNcfZjHkyY6Alnuyc+ikYJaxxfHkT3+WuQ==
+terser@^5.0.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.15.0.tgz#e16967894eeba6e1091509ec83f0c60e179f2425"
+  integrity sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==
   dependencies:
     "@jridgewell/source-map" "^0.3.2"
     acorn "^8.5.0"
@@ -9555,45 +5798,47 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
-thenify-all@^1.0.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
-  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+then-request@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/then-request/-/then-request-6.0.2.tgz#ec18dd8b5ca43aaee5cb92f7e4c1630e950d4f0c"
+  integrity sha512-3ZBiG7JvP3wbDzA9iNY5zJQcHL4jn/0BWtXIkagfz7QgOL/LqjCEOBQuJNZfu0XYnv5JhKh+cDxCPM4ILrqruA==
   dependencies:
-    thenify ">= 3.1.0 < 4"
+    "@types/concat-stream" "^1.6.0"
+    "@types/form-data" "0.0.33"
+    "@types/node" "^8.0.0"
+    "@types/qs" "^6.2.31"
+    caseless "~0.12.0"
+    concat-stream "^1.6.0"
+    form-data "^2.2.0"
+    http-basic "^8.1.1"
+    http-response-object "^3.0.1"
+    promise "^8.0.0"
+    qs "^6.4.0"
 
-"thenify@>= 3.1.0 < 4":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
-  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
-  dependencies:
-    any-promise "^1.0.0"
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
 
-thread-loader@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/thread-loader/-/thread-loader-3.0.4.tgz#c392e4c0241fbc80430eb680e4886819b504a31b"
-  integrity sha512-ByaL2TPb+m6yArpqQUZvP+5S1mZtXsEP7nWKKlAUTm7fCml8kB5s1uI3+eHRP2bk5mVYfRSBI7FFf+tWEyLZwA==
-  dependencies:
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^4.1.0"
-    loader-utils "^2.0.0"
-    neo-async "^2.6.2"
-    schema-utils "^3.0.0"
+tinybench@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.1.5.tgz#6864341415ff0f912ed160cfd90b7f833ece674c"
+  integrity sha512-ak+PZZEuH3mw6CCFOgf5S90YH0MARnZNhxjhjguAmoJimEMAJuNip/rJRd6/wyylHItomVpKTzZk9zrhTrQCoQ==
 
-throat@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
-  integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
+tinypool@^0.1.2:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.1.3.tgz#b5570b364a1775fd403de5e7660b325308fee26b"
+  integrity sha512-2IfcQh7CP46XGWGGbdyO4pjcKqsmVqFAPcXfPxcPXmOWt9cYkTP9HcDmGgsfijYoAEc4z9qcpM/BaBz46Y9/CQ==
 
-throttle-debounce@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
-  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+tinypool@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.3.0.tgz#c405d8b743509fc28ea4ca358433190be654f819"
+  integrity sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==
 
-thunky@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
-  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
+tinyspy@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-1.0.2.tgz#6da0b3918bfd56170fb3cd3a2b5ef832ee1dff0d"
+  integrity sha512-bSGlgwLBYf7PnUsQ6WOc6SJ3pGOcd+d8AA6EUnLDDM0kWEstC1JIlSZA3UNliDXhd9ABoS7hiRBDCu+XP/sf1Q==
 
 tippy.js@^6.2.3, tippy.js@^6.3.7:
   version "6.3.7"
@@ -9602,11 +5847,6 @@ tippy.js@^6.2.3, tippy.js@^6.3.7:
   dependencies:
     "@popperjs/core" "^2.9.0"
 
-tmpl@1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
-  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -9619,24 +5859,20 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-toidentifier@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
-  integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
-
-totalist@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
-  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+totalist@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.0.tgz#4ef9c58c5f095255cdc3ff2a0a55091c57a3a1bd"
+  integrity sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==
 
 tough-cookie@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
-  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
+  integrity sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==
   dependencies:
     psl "^1.1.33"
     punycode "^2.1.1"
-    universalify "^0.1.2"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
 
 tr46@^1.0.1:
   version "1.0.1"
@@ -9645,10 +5881,10 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-tr46@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
-  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
+tr46@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-3.0.0.tgz#555c4e297a950617e8eeddef633c87d4d9d6cbf9"
+  integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
   dependencies:
     punycode "^2.1.1"
 
@@ -9657,6 +5893,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+ts-essentials@^9.1.2:
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-9.3.0.tgz#7e639c1a76b1805c3c60d6e1b5178da2e70aea02"
+  integrity sha512-XeiCboEyBG8UqXZtXl59bWEi4ZgOqRsogFDI6WDGIF1LmzbYiAkIwjkXN6zZWWl4re/lsOqMlYfe8KA0XiiEPw==
+
 ts-invariant@^0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
@@ -9671,30 +5912,6 @@ ts-invariant@^0.4.0:
   dependencies:
     tslib "^1.9.3"
 
-ts-jest@28:
-  version "28.0.5"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.5.tgz#31776f768fba6dfc8c061d488840ed0c8eeac8b9"
-  integrity sha512-Sx9FyP9pCY7pUzQpy4FgRZf2bhHY3za576HMKJFs+OnQ9jS96Du5vNsDKkyedQkik+sEabbKAnCliv9BEsHZgQ==
-  dependencies:
-    bs-logger "0.x"
-    fast-json-stable-stringify "2.x"
-    jest-util "^28.0.0"
-    json5 "^2.2.1"
-    lodash.memoize "4.x"
-    make-error "1.x"
-    semver "7.x"
-    yargs-parser "^21.0.1"
-
-ts-loader@^9.2.5:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.0.tgz#980f4dbfb60e517179e15e10ed98e454b132159f"
-  integrity sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==
-  dependencies:
-    chalk "^4.1.0"
-    enhanced-resolve "^5.0.0"
-    micromatch "^4.0.0"
-    semver "^7.3.4"
-
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
@@ -9710,7 +5927,7 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0:
+tslib@^2.1.0, tslib@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
@@ -9736,7 +5953,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@4.0.8:
+type-detect@^4.0.0, type-detect@^4.0.5:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
@@ -9751,45 +5968,25 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-type-fest@^0.21.3:
-  version "0.21.3"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
-  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+typescript@^4.5.4, typescript@~4.8.3:
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.3.tgz#d59344522c4bc464a65a730ac695007fdb66dd88"
+  integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
 
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
-type-is@~1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
-  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.24"
-
-typedarray-to-buffer@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
-
-typescript@^4.5.4:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
-  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
-
-typescript@~4.5.5:
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
-  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+ufo@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-0.8.5.tgz#e367b4205ece9d9723f2fa54f887d43ed1bce5d0"
+  integrity sha512-e4+UtA5IRO+ha6hYklwj6r7BjiGMxS0O+UaSg9HbaTefg4kMkzj4tXzEBajRR+wkxf+golgAWKzLbytCUDMJAA==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -9825,9 +6022,9 @@ unicode-match-property-value-ecmascript@^2.0.0:
   integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw==
 
 unicode-property-aliases-ecmascript@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
-  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
 unique-string@^2.0.0:
   version "2.0.0"
@@ -9836,17 +6033,17 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
-universalify@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
 
 universalify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unpipe@1.0.0, unpipe@~1.0.0:
+unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
@@ -9856,6 +6053,14 @@ upath@^1.2.0:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
+update-browserslist-db@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz#2924d3927367a38d5c555413a7ce138fc95fcb18"
+  integrity sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -9863,81 +6068,98 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-utila@~0.4:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
-  integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
-
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
-uuid@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
-v-tooltip@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.1.3.tgz#281c2015d1e73787f13c8956aa295b8c3a73f261"
-  integrity sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    lodash "^4.17.21"
-    popper.js "^1.16.1"
-    vue-resize "^1.0.1"
-
-v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
-
-v8-to-istanbul@^8.1.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"
-  integrity sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.1"
-    convert-source-map "^1.6.0"
-    source-map "^0.7.3"
-
 v8-to-istanbul@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.0.tgz#be0dae58719fc53cb97e5c7ac1d7e6d4f5b19511"
-  integrity sha512-HcvgY/xaRm7isYmyx+lFKA4uQmfUbN0J4M0nNItvzTvH/iQ9kW5j/t4YSR+Ge323/lrgDAWJoF46tzGQHwBHFw==
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
+  integrity sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.7"
+    "@jridgewell/trace-mapping" "^0.3.12"
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
 
-validate-npm-package-license@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+vite-node@0.22.1:
+  version "0.22.1"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.22.1.tgz#a187e3d73094e29ab82310bb7f5a63da1038a882"
+  integrity sha512-odNMaOD4N62qESLvFSqoNf2t60ftIFHKgHNupa2cojbF2u2yB1ssluOfq5X0lZcTPx2HBzFbwa6h9m78ujEbUw==
   dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
+    debug "^4.3.4"
+    mlly "^0.5.12"
+    pathe "^0.2.0"
+    vite "^2.9.12 || ^3.0.0-0"
 
-vary@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
+vite-plugin-pwa@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.13.0.tgz#d22dc1122b53d98936a50841a5f5f700b560afdb"
+  integrity sha512-/oTQGbOvRI2Zew0Enc3dpNrt23U4G0QwkuobLN/oHgBKcK+sYylj8kW72N7natGIIoKEmmfMnrfk2SSW8OUsAw==
+  dependencies:
+    debug "^4.3.4"
+    fast-glob "^3.2.11"
+    pretty-bytes "^6.0.0"
+    rollup "^2.79.0"
+    workbox-build "^6.5.4"
+    workbox-window "^6.5.4"
 
-vue-class-component@^7.2.3:
-  version "7.2.6"
-  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
-  integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
+"vite@^2.9.12 || ^3.0.0-0", vite@^3.0.9:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.1.3.tgz#b2a0821c11aae124bb7618f8036913c689afcc59"
+  integrity sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==
+  dependencies:
+    esbuild "^0.15.6"
+    postcss "^8.4.16"
+    resolve "^1.22.1"
+    rollup "~2.78.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
 
-vue-cli-plugin-tailwind@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/vue-cli-plugin-tailwind/-/vue-cli-plugin-tailwind-3.0.0.tgz#2436e781e919acab9539934549999baf33e0a099"
-  integrity sha512-bUWjfwGtJCeBU7pL4lD86RC+HsJAmAlYqr8e65NGC3q/ZBzC9KQs1Iy/vTyfDTnB7ZJm3huB+1a/m+17fdMZ8A==
+vitest@0.23.4, vitest@^0.23.3:
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.23.4.tgz#7ebea620f203f4df09a27ca17819dc9da61f88ef"
+  integrity sha512-iukBNWqQAv8EKDBUNntspLp9SfpaVFbmzmM0sNcnTxASQZMzRw3PsM6DMlsHiI+I6GeO5/sYDg3ecpC+SNFLrQ==
+  dependencies:
+    "@types/chai" "^4.3.3"
+    "@types/chai-subset" "^1.3.3"
+    "@types/node" "*"
+    chai "^4.3.6"
+    debug "^4.3.4"
+    local-pkg "^0.4.2"
+    strip-literal "^0.4.1"
+    tinybench "^2.1.5"
+    tinypool "^0.3.0"
+    tinyspy "^1.0.2"
+    vite "^2.9.12 || ^3.0.0-0"
+
+vscode-oniguruma@^1.6.1:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/vscode-oniguruma/-/vscode-oniguruma-1.6.2.tgz#aeb9771a2f1dbfc9083c8a7fdd9cccaa3f386607"
+  integrity sha512-KH8+KKov5eS/9WhofZR8M8dMHWN2gTxjMsG4jd04YhpbPR91fUj7rYQ2/XjeHCJWbg7X++ApRIU9NUwM2vTvLA==
+
+vscode-textmate@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-5.2.0.tgz#01f01760a391e8222fe4f33fbccbd1ad71aed74e"
+  integrity sha512-Uw5ooOQxRASHgu6C7GVvUxisKXfSgW4oFlO+aa+PAkgmH89O3CXxEEzNRNtHSqtXFTl0nAC1uYj0GMSH27uwtQ==
+
+vue-demi@*, vue-demi@^0.13.1:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
 vue-eslint-parser@^8.0.1:
   version "8.3.0"
@@ -9953,9 +6175,9 @@ vue-eslint-parser@^8.0.1:
     semver "^7.3.5"
 
 vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1:
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.0.2.tgz#d2535516f3f55adb387939427fe741065eb7948a"
-  integrity sha512-uCPQwTGjOtAYrwnU+76pYxalhjsh7iFBsHwBqDHiOPTxtICDaraO4Szw54WFTNZTAEsgHHzqFOu1mmnBOBRzDA==
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz#0e121d1bb29bd10763c83e3cc583ee03434a9dd5"
+  integrity sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ==
   dependencies:
     debug "^4.3.4"
     eslint-scope "^7.1.1"
@@ -9965,11 +6187,6 @@ vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-hot-reload-api@^2.3.0:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
-  integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
-
 vue-i18n-extract@^2.0.4:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/vue-i18n-extract/-/vue-i18n-extract-2.0.7.tgz#95798037c2ae57f4ec5fd9d2267d2559bc94e5e8"
@@ -9981,24 +6198,25 @@ vue-i18n-extract@^2.0.4:
     is-valid-glob "^1.0.0"
     js-yaml "^4.1.0"
 
-vue-i18n@^8.14.0:
-  version "8.27.1"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.27.1.tgz#fe660f6c14793ae404d6a715875d772594a3324f"
-  integrity sha512-lWrGm4F25qReJ7XxSnFVb2h3PfW54ldnM4C+YLBGGJ75+Myt/kj4hHSTKqsyDLamvNYpvINMicSOdW+7yuqgIQ==
-
-vue-loader@^17.0.0:
-  version "17.0.0"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.0.0.tgz#2eaa80aab125b19f00faa794b5bd867b17f85acb"
-  integrity sha512-OWSXjrzIvbF2LtOUmxT3HYgwwubbfFelN8PAP9R9dwpIkj48TVioHhWWSx7W7fk+iF5cgg3CBJRxwTdtLU4Ecg==
+vue-i18n@9:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
   dependencies:
-    chalk "^4.1.0"
-    hash-sum "^2.0.0"
-    loader-utils "^2.0.0"
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
+vue-material-design-icons@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz#d0b9227786672fc17be239fb8c1d8e22e33feb45"
+  integrity sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA==
 
 vue-matomo@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vue-matomo/-/vue-matomo-4.1.0.tgz#17b513bc8ac60e168bfa8190ad05b3257a3c441e"
-  integrity sha512-y+tdmhY835Ip3EAGfIAgA33+aBYrvRT7fNnBnA7bSM459XpoWXgqJKdbopVpEUrxCPIq8IkuF7g4KqSLc0Fa3w==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/vue-matomo/-/vue-matomo-4.2.0.tgz#d65e369e4ead1d95ef790bef3627512cac3d25e9"
+  integrity sha512-m5hCw7LH3wPDcERaF4sp/ojR9sEx7Rl8TpOyH/4jjQxMF2DuY/q5pO+i9o5Dx+BXLSa9+IQ0qhAbWYRyESQXmA==
 
 vue-meta@^2.3.1:
   version "2.4.0"
@@ -10008,28 +6226,23 @@ vue-meta@^2.3.1:
     deepmerge "^4.2.2"
 
 vue-plausible@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/vue-plausible/-/vue-plausible-1.3.1.tgz#c8d5906566433c7f5a0a27878745f355eccf9172"
-  integrity sha512-OqZiScz/7glitE4XSJTwGUHO31VEbba2efmLki0+rIGDx3NysSOBJMyFz6yBFPWKms4jb1lDmx1wCsbAl7mrtA==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/vue-plausible/-/vue-plausible-1.3.2.tgz#c797ee03a7c8849dc847e706c5250aa10908dd0f"
+  integrity sha512-7hdLrDjw0+qjdM9hxowOirQSHPCljWwd8scW0tRFHyXAQSE/yBWrJ3EPuEiZlJUoth9ac0KLbHM+wSSkWHttiA==
   dependencies:
     plausible-tracker "^0.3.4"
 
-vue-property-decorator@^9.0.0:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz#266a2eac61ba6527e2e68a6933cfb98fddab5457"
-  integrity sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
 
-vue-resize@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-1.0.1.tgz#c120bed4e09938771d622614f57dbcf58a5147ee"
-  integrity sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==
+vue-router@4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"
+  integrity sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-
-vue-router@^3.1.6:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.4.tgz#c453c0b36bc75554de066fefc3f2a9c3212aca70"
-  integrity sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ==
+    "@vue/devtools-api" "^6.1.4"
 
 vue-scrollto@^2.17.1:
   version "2.20.0"
@@ -10038,43 +6251,31 @@ vue-scrollto@^2.17.1:
   dependencies:
     bezier-easing "2.1.0"
 
-vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
-  integrity sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==
+vue-use-route-query@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vue-use-route-query/-/vue-use-route-query-1.1.0.tgz#60f7f35d65be670def207d245ccf449cb05cf78f"
+  integrity sha512-zghtxPzeur3z+NZG5EMw763jHUOuy5kzN+O1UhsC944tq0Cj4vs1Ns62vQjBsJVMSYKG7fMoL9RZFqW3cKcGCA==
   dependencies:
-    hash-sum "^1.0.2"
-    loader-utils "^1.0.2"
+    async-queue-chain "^1.0.1"
+    vue-demi "^0.13.1"
 
-vue-template-compiler@^2.6.11:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
-  integrity sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==
+vue@^3.2.37:
+  version "3.2.39"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.39.tgz#de071c56c4c32c41cbd54e55f11404295c0dd62d"
+  integrity sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==
   dependencies:
-    de-indent "^1.0.2"
-    he "^1.1.0"
+    "@vue/compiler-dom" "3.2.39"
+    "@vue/compiler-sfc" "3.2.39"
+    "@vue/runtime-dom" "3.2.39"
+    "@vue/server-renderer" "3.2.39"
+    "@vue/shared" "3.2.39"
 
-vue-template-es2015-compiler@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
-  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
-
-vue2-leaflet@^2.0.3:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz#2f95c287621bf778f10804c88223877f5c049257"
-  integrity sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ==
-
-vue@^2.6.11:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
-  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
-
-vuedraggable@^2.24.3:
-  version "2.24.3"
-  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
-  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+vuedraggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
-    sortablejs "1.10.2"
+    sortablejs "1.14.0"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
@@ -10084,45 +6285,16 @@ w3c-hr-time@^1.0.2:
     browser-process-hrtime "^1.0.0"
 
 w3c-keyname@^2.2.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
-  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
+  integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
 
-w3c-xmlserializer@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
-  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+w3c-xmlserializer@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-3.0.0.tgz#06cdc3eefb7e4d0b20a560a5a3aeb0d2d9a65923"
+  integrity sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==
   dependencies:
-    xml-name-validator "^3.0.0"
-
-walker@^1.0.7, walker@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
-  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
-  dependencies:
-    makeerror "1.0.12"
-
-watchpack@^2.3.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"
-
-wbuf@^1.1.0, wbuf@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
-  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
-  dependencies:
-    minimalistic-assert "^1.0.0"
-
-wcwidth@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
-  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
-  dependencies:
-    defaults "^1.0.3"
+    xml-name-validator "^4.0.0"
 
 webidl-conversions@^3.0.0:
   version "3.0.1"
@@ -10134,189 +6306,30 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webidl-conversions@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
-  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
-webidl-conversions@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
-  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
-
-webpack-bundle-analyzer@^4.4.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.5.0.tgz#1b0eea2947e73528754a6f9af3e91b2b6e0f79d5"
-  integrity sha512-GUMZlM3SKwS8Z+CKeIFx7CVoHn3dXFcUAjT/dcZQQmfSZGvitPfMob2ipjai7ovFFqPvTqkEZ/leL4O0YOdAYQ==
+whatwg-encoding@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53"
+  integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==
   dependencies:
-    acorn "^8.0.4"
-    acorn-walk "^8.0.0"
-    chalk "^4.1.0"
-    commander "^7.2.0"
-    gzip-size "^6.0.0"
-    lodash "^4.17.20"
-    opener "^1.5.2"
-    sirv "^1.0.7"
-    ws "^7.3.1"
+    iconv-lite "0.6.3"
 
-webpack-chain@^6.5.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.5.1.tgz#4f27284cbbb637e3c8fbdef43eef588d4d861206"
-  integrity sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==
+whatwg-mimetype@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
+whatwg-url@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-11.0.0.tgz#0a849eebb5faf2119b901bb76fd795c2848d4018"
+  integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
   dependencies:
-    deepmerge "^1.5.2"
-    javascript-stringify "^2.0.1"
-
-webpack-cli@^4.7.0:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.10.0.tgz#37c1d69c8d85214c5a65e589378f53aec64dab31"
-  integrity sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==
-  dependencies:
-    "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^1.2.0"
-    "@webpack-cli/info" "^1.5.0"
-    "@webpack-cli/serve" "^1.7.0"
-    colorette "^2.0.14"
-    commander "^7.0.0"
-    cross-spawn "^7.0.3"
-    fastest-levenshtein "^1.0.12"
-    import-local "^3.0.2"
-    interpret "^2.2.0"
-    rechoir "^0.7.0"
-    webpack-merge "^5.7.3"
-
-webpack-dev-middleware@^5.3.1:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz#efae67c2793908e7311f1d9b06f2a08dcc97e51f"
-  integrity sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==
-  dependencies:
-    colorette "^2.0.10"
-    memfs "^3.4.3"
-    mime-types "^2.1.31"
-    range-parser "^1.2.1"
-    schema-utils "^4.0.0"
-
-webpack-dev-server@^4.7.3:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.9.2.tgz#c188db28c7bff12f87deda2a5595679ebbc3c9bc"
-  integrity sha512-H95Ns95dP24ZsEzO6G9iT+PNw4Q7ltll1GfJHV4fKphuHWgKFzGHWi4alTlTnpk1SPPk41X+l2RB7rLfIhnB9Q==
-  dependencies:
-    "@types/bonjour" "^3.5.9"
-    "@types/connect-history-api-fallback" "^1.3.5"
-    "@types/express" "^4.17.13"
-    "@types/serve-index" "^1.9.1"
-    "@types/serve-static" "^1.13.10"
-    "@types/sockjs" "^0.3.33"
-    "@types/ws" "^8.5.1"
-    ansi-html-community "^0.0.8"
-    bonjour-service "^1.0.11"
-    chokidar "^3.5.3"
-    colorette "^2.0.10"
-    compression "^1.7.4"
-    connect-history-api-fallback "^1.6.0"
-    default-gateway "^6.0.3"
-    express "^4.17.3"
-    graceful-fs "^4.2.6"
-    html-entities "^2.3.2"
-    http-proxy-middleware "^2.0.3"
-    ipaddr.js "^2.0.1"
-    open "^8.0.9"
-    p-retry "^4.5.0"
-    rimraf "^3.0.2"
-    schema-utils "^4.0.0"
-    selfsigned "^2.0.1"
-    serve-index "^1.9.1"
-    sockjs "^0.3.24"
-    spdy "^4.0.2"
-    webpack-dev-middleware "^5.3.1"
-    ws "^8.4.2"
-
-webpack-merge@^5.7.3:
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
-  integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==
-  dependencies:
-    clone-deep "^4.0.1"
-    wildcard "^2.0.0"
-
-webpack-sources@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
-  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
-  dependencies:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
-
-webpack-sources@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
-  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
-
-webpack-virtual-modules@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz#cd597c6d51d5a5ecb473eea1983a58fa8a17ded9"
-  integrity sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==
-
-webpack@^5.54.0:
-  version "5.73.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.73.0.tgz#bbd17738f8a53ee5760ea2f59dce7f3431d35d38"
-  integrity sha512-svjudQRPPa0YiOYa2lM/Gacw0r6PvxptHj4FuEKQ2kX05ZLkjbVc5MnPs6its5j7IZljnIqSVo/OsY2X0IpHGA==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^0.0.51"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    acorn "^8.4.1"
-    acorn-import-assertions "^1.7.6"
-    browserslist "^4.14.5"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.9.3"
-    es-module-lexer "^0.9.0"
-    eslint-scope "5.1.1"
-    events "^3.2.0"
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
-    json-parse-even-better-errors "^2.3.1"
-    loader-runner "^4.2.0"
-    mime-types "^2.1.27"
-    neo-async "^2.6.2"
-    schema-utils "^3.1.0"
-    tapable "^2.1.1"
-    terser-webpack-plugin "^5.1.3"
-    watchpack "^2.3.1"
-    webpack-sources "^3.2.3"
-
-websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
-  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
-  dependencies:
-    http-parser-js ">=0.5.1"
-    safe-buffer ">=5.1.0"
-    websocket-extensions ">=0.1.1"
-
-websocket-extensions@>=0.1.1:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
-  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
-
-whatwg-encoding@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
-  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
-  dependencies:
-    iconv-lite "0.4.24"
-
-whatwg-fetch@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
-  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
-
-whatwg-mimetype@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
-  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+    tr46 "^3.0.0"
+    webidl-conversions "^7.0.0"
 
 whatwg-url@^5.0.0:
   version "5.0.0"
@@ -10335,15 +6348,6 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-whatwg-url@^8.0.0, whatwg-url@^8.5.0:
-  version "8.7.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
-  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
-  dependencies:
-    lodash "^4.7.0"
-    tr46 "^2.1.0"
-    webidl-conversions "^6.1.0"
-
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -10355,13 +6359,6 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
@@ -10369,35 +6366,30 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-wildcard@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec"
-  integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==
-
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-workbox-background-sync@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.3.tgz#7c66c1836aeca6f3762dc48d17a1852a33b3168c"
-  integrity sha512-0DD/V05FAcek6tWv9XYj2w5T/plxhDSpclIcAGjA/b7t/6PdaRkQ7ZgtAX6Q/L7kV7wZ8uYRJUoH11VjNipMZw==
+workbox-background-sync@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz#3141afba3cc8aa2ae14c24d0f6811374ba8ff6a9"
+  integrity sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==
   dependencies:
-    idb "^6.1.4"
-    workbox-core "6.5.3"
+    idb "^7.0.1"
+    workbox-core "6.5.4"
 
-workbox-broadcast-update@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.3.tgz#fc2ad79cf507e22950cda9baf1e9a0ccc43f31bc"
-  integrity sha512-4AwCIA5DiDrYhlN+Miv/fp5T3/whNmSL+KqhTwRBTZIL6pvTgE4lVuRzAt1JltmqyMcQ3SEfCdfxczuI4kwFQg==
+workbox-broadcast-update@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz#8441cff5417cd41f384ba7633ca960a7ffe40f66"
+  integrity sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==
   dependencies:
-    workbox-core "6.5.3"
+    workbox-core "6.5.4"
 
-workbox-build@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.3.tgz#38e3f286d63d2745bff4d1478bb3a6ab5c8b1170"
-  integrity sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==
+workbox-build@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.4.tgz#7d06d31eb28a878817e1c991c05c5b93409f0389"
+  integrity sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==
   dependencies:
     "@apideck/better-ajv-errors" "^0.3.1"
     "@babel/core" "^7.11.1"
@@ -10421,140 +6413,121 @@ workbox-build@6.5.3:
     strip-comments "^2.0.1"
     tempy "^0.6.0"
     upath "^1.2.0"
-    workbox-background-sync "6.5.3"
-    workbox-broadcast-update "6.5.3"
-    workbox-cacheable-response "6.5.3"
-    workbox-core "6.5.3"
-    workbox-expiration "6.5.3"
-    workbox-google-analytics "6.5.3"
-    workbox-navigation-preload "6.5.3"
-    workbox-precaching "6.5.3"
-    workbox-range-requests "6.5.3"
-    workbox-recipes "6.5.3"
-    workbox-routing "6.5.3"
-    workbox-strategies "6.5.3"
-    workbox-streams "6.5.3"
-    workbox-sw "6.5.3"
-    workbox-window "6.5.3"
+    workbox-background-sync "6.5.4"
+    workbox-broadcast-update "6.5.4"
+    workbox-cacheable-response "6.5.4"
+    workbox-core "6.5.4"
+    workbox-expiration "6.5.4"
+    workbox-google-analytics "6.5.4"
+    workbox-navigation-preload "6.5.4"
+    workbox-precaching "6.5.4"
+    workbox-range-requests "6.5.4"
+    workbox-recipes "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
+    workbox-streams "6.5.4"
+    workbox-sw "6.5.4"
+    workbox-window "6.5.4"
 
-workbox-cacheable-response@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.3.tgz#b1f8c2bc599a7be8f7e3c262535629c558738e47"
-  integrity sha512-6JE/Zm05hNasHzzAGKDkqqgYtZZL2H06ic2GxuRLStA4S/rHUfm2mnLFFXuHAaGR1XuuYyVCEey1M6H3PdZ7SQ==
+workbox-cacheable-response@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz#a5c6ec0c6e2b6f037379198d4ef07d098f7cf137"
+  integrity sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==
   dependencies:
-    workbox-core "6.5.3"
+    workbox-core "6.5.4"
 
-workbox-core@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.3.tgz#bca038a9ef0d7a634a6db2a60f45313ed22ac249"
-  integrity sha512-Bb9ey5n/M9x+l3fBTlLpHt9ASTzgSGj6vxni7pY72ilB/Pb3XtN+cZ9yueboVhD5+9cNQrC9n/E1fSrqWsUz7Q==
+workbox-core@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.4.tgz#df48bf44cd58bb1d1726c49b883fb1dffa24c9ba"
+  integrity sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==
 
-workbox-expiration@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.3.tgz#efc0811f371a2ede1052b9de1c4f072b71d50503"
-  integrity sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==
+workbox-expiration@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.4.tgz#501056f81e87e1d296c76570bb483ce5e29b4539"
+  integrity sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==
   dependencies:
-    idb "^6.1.4"
-    workbox-core "6.5.3"
+    idb "^7.0.1"
+    workbox-core "6.5.4"
 
-workbox-google-analytics@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.3.tgz#cc8c3a61f449131660a4ed2f5362d9a3599b18fe"
-  integrity sha512-3GLCHotz5umoRSb4aNQeTbILETcrTVEozSfLhHSBaegHs1PnqCmN0zbIy2TjTpph2AGXiNwDrWGF0AN+UgDNTw==
+workbox-google-analytics@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz#c74327f80dfa4c1954cbba93cd7ea640fe7ece7d"
+  integrity sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==
   dependencies:
-    workbox-background-sync "6.5.3"
-    workbox-core "6.5.3"
-    workbox-routing "6.5.3"
-    workbox-strategies "6.5.3"
+    workbox-background-sync "6.5.4"
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
 
-workbox-navigation-preload@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.3.tgz#81b74f598b11aa07e2cf1c21af7a826a4f0f70b3"
-  integrity sha512-bK1gDFTc5iu6lH3UQ07QVo+0ovErhRNGvJJO/1ngknT0UQ702nmOUhoN9qE5mhuQSrnK+cqu7O7xeaJ+Rd9Tmg==
+workbox-navigation-preload@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz#ede56dd5f6fc9e860a7e45b2c1a8f87c1c793212"
+  integrity sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==
   dependencies:
-    workbox-core "6.5.3"
+    workbox-core "6.5.4"
 
-workbox-precaching@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.3.tgz#c870312b2ef901d790ab9e48da084e776c62af47"
-  integrity sha512-sjNfgNLSsRX5zcc63H/ar/hCf+T19fRtTqvWh795gdpghWb5xsfEkecXEvZ8biEi1QD7X/ljtHphdaPvXDygMQ==
+workbox-precaching@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.4.tgz#740e3561df92c6726ab5f7471e6aac89582cab72"
+  integrity sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==
   dependencies:
-    workbox-core "6.5.3"
-    workbox-routing "6.5.3"
-    workbox-strategies "6.5.3"
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
 
-workbox-range-requests@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.3.tgz#e624ac82ff266a5e4f236d055797def07949d941"
-  integrity sha512-pGCP80Bpn/0Q0MQsfETSfmtXsQcu3M2QCJwSFuJ6cDp8s2XmbUXkzbuQhCUzKR86ZH2Vex/VUjb2UaZBGamijA==
+workbox-range-requests@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz#86b3d482e090433dab38d36ae031b2bb0bd74399"
+  integrity sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==
   dependencies:
-    workbox-core "6.5.3"
+    workbox-core "6.5.4"
 
-workbox-recipes@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.3.tgz#15beac9d8ae7a3a1c100218094a824b4dd3fd59a"
-  integrity sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==
+workbox-recipes@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.4.tgz#cca809ee63b98b158b2702dcfb741b5cc3e24acb"
+  integrity sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==
   dependencies:
-    workbox-cacheable-response "6.5.3"
-    workbox-core "6.5.3"
-    workbox-expiration "6.5.3"
-    workbox-precaching "6.5.3"
-    workbox-routing "6.5.3"
-    workbox-strategies "6.5.3"
+    workbox-cacheable-response "6.5.4"
+    workbox-core "6.5.4"
+    workbox-expiration "6.5.4"
+    workbox-precaching "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
 
-workbox-routing@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.3.tgz#a0a699d8cc90b5692bd3df24679acbbda3913777"
-  integrity sha512-DFjxcuRAJjjt4T34RbMm3MCn+xnd36UT/2RfPRfa8VWJGItGJIn7tG+GwVTdHmvE54i/QmVTJepyAGWtoLPTmg==
+workbox-routing@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.4.tgz#6a7fbbd23f4ac801038d9a0298bc907ee26fe3da"
+  integrity sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==
   dependencies:
-    workbox-core "6.5.3"
+    workbox-core "6.5.4"
 
-workbox-strategies@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.3.tgz#4bea9a48fee16cf43766e0d8138296773c8a9783"
-  integrity sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==
+workbox-strategies@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.4.tgz#4edda035b3c010fc7f6152918370699334cd204d"
+  integrity sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==
   dependencies:
-    workbox-core "6.5.3"
+    workbox-core "6.5.4"
 
-workbox-streams@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.3.tgz#b6860290031caa7d0e46ad7142315c94359c780b"
-  integrity sha512-vN4Qi8o+b7zj1FDVNZ+PlmAcy1sBoV7SC956uhqYvZ9Sg1fViSbOpydULOssVJ4tOyKRifH/eoi6h99d+sJ33w==
+workbox-streams@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.4.tgz#1cb3c168a6101df7b5269d0353c19e36668d7d69"
+  integrity sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==
   dependencies:
-    workbox-core "6.5.3"
-    workbox-routing "6.5.3"
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
 
-workbox-sw@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.3.tgz#cd2f0c086f4496acd25774ed02c48504189bebdd"
-  integrity sha512-BQBzm092w+NqdIEF2yhl32dERt9j9MDGUTa2Eaa+o3YKL4Qqw55W9yQC6f44FdAHdAJrJvp0t+HVrfh8AiGj8A==
+workbox-sw@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.4.tgz#d93e9c67924dd153a61367a4656ff4d2ae2ed736"
+  integrity sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==
 
-workbox-webpack-plugin@^6.1.0:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.3.tgz#c37bb323be4952311565c07db51054fe59c87d73"
-  integrity sha512-Es8Xr02Gi6Kc3zaUwR691ZLy61hz3vhhs5GztcklQ7kl5k2qAusPh0s6LF3wEtlpfs9ZDErnmy5SErwoll7jBA==
-  dependencies:
-    fast-json-stable-stringify "^2.1.0"
-    pretty-bytes "^5.4.1"
-    upath "^1.2.0"
-    webpack-sources "^1.4.3"
-    workbox-build "6.5.3"
-
-workbox-window@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.3.tgz#4ade70056cb73477ef1cd8fea7cfd0ecbd825c7f"
-  integrity sha512-GnJbx1kcKXDtoJBVZs/P7ddP0Yt52NNy4nocjBpYPiRhMqTpJCNrSL+fGHZ/i/oP6p/vhE8II0sA6AZGKGnssw==
+workbox-window@6.5.4, workbox-window@^6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.4.tgz#d991bc0a94dff3c2dbb6b84558cff155ca878e91"
+  integrity sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==
   dependencies:
     "@types/trusted-types" "^2.0.2"
-    workbox-core "6.5.3"
-
-wrap-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
-  integrity sha512-iXR3tDXpbnTpzjKSylUJRkLuOrEC7hwEB221cgn6wtF8wpmz28puFXAEfPT5zrjM3wahygB//VuWEr1vTkDcNQ==
-  dependencies:
-    string-width "^2.1.1"
-    strip-ansi "^4.0.0"
+    workbox-core "6.5.4"
 
 wrap-ansi@^7.0.0:
   version "7.0.0"
@@ -10570,49 +6543,16 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-write-file-atomic@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
-  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
-  dependencies:
-    imurmurhash "^0.1.4"
-    is-typedarray "^1.0.0"
-    signal-exit "^3.0.2"
-    typedarray-to-buffer "^3.1.5"
-
-write-file-atomic@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.1.tgz#9faa33a964c1c85ff6f849b80b42a88c2c537c8f"
-  integrity sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==
-  dependencies:
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.7"
-
-ws@^7.3.1, ws@^7.4.6:
-  version "7.5.8"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.8.tgz#ac2729881ab9e7cbaf8787fe3469a48c5c7f636a"
-  integrity sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==
-
-ws@^8.4.2:
-  version "8.8.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.0.tgz#8e71c75e2f6348dbf8d78005107297056cb77769"
-  integrity sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==
-
-xml-name-validator@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
-  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
+ws@^8.8.0:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
+  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
 
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
-xml@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
-  integrity sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==
-
 xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
@@ -10628,32 +6568,36 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+yaml-eslint-parser@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz#c7f5f3904f1c06ad55dc7131a731b018426b4898"
+  integrity sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==
+  dependencies:
+    eslint-visitor-keys "^1.3.0"
+    lodash "^4.17.20"
+    yaml "^1.10.0"
+
+yaml@^1.10.0, yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yargs-parser@^20.2.2:
+yargs-parser@^20.2.2, yargs-parser@^20.2.9:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs-parser@^21.0.0, yargs-parser@^21.0.1:
-  version "21.0.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35"
-  integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==
+yargs-parser@^21.0.0:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
-yargs@^16.0.0, yargs@^16.2.0:
+yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
   integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
@@ -10666,7 +6610,7 @@ yargs@^16.0.0, yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.3.1:
+yargs@^17.5.1:
   version "17.5.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e"
   integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
@@ -10679,15 +6623,10 @@ yargs@^17.3.1:
     y18n "^5.0.5"
     yargs-parser "^21.0.0"
 
-yorkie@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yorkie/-/yorkie-2.0.0.tgz#92411912d435214e12c51c2ae1093e54b6bb83d9"
-  integrity sha512-jcKpkthap6x63MB4TxwCyuIGkV0oYP/YRyuQU5UO0Yz/E/ZAu+653/uov+phdmO54n6BcvFRyyt0RRrWdN2mpw==
-  dependencies:
-    execa "^0.8.0"
-    is-ci "^1.0.10"
-    normalize-path "^1.0.0"
-    strip-indent "^2.0.0"
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
 zen-observable-ts@^0.8.12:
   version "0.8.21"
diff --git a/lib/federation/activity_pub/federator.ex b/lib/federation/activity_pub/federator.ex
index ac145afff..6b2f68b4f 100644
--- a/lib/federation/activity_pub/federator.ex
+++ b/lib/federation/activity_pub/federator.ex
@@ -19,6 +19,8 @@ defmodule Mobilizon.Federation.ActivityPub.Federator do
 
   @max_jobs 20
 
+  @env Application.compile_env(:mobilizon, :env)
+
   @spec init(any()) :: {:ok, any()}
   def init(args) do
     {:ok, args}
@@ -83,7 +85,7 @@ defmodule Mobilizon.Federation.ActivityPub.Federator do
   def enqueue(type, payload, priority \\ 1) do
     Logger.debug("enqueue something with type #{inspect(type)}")
 
-    if Application.fetch_env!(:mobilizon, :env) == :test do
+    if @env == :test do
       handle(type, payload)
     else
       GenServer.cast(__MODULE__, {:enqueue, type, payload, priority})
diff --git a/lib/federation/web_finger/web_finger.ex b/lib/federation/web_finger/web_finger.ex
index fd71142bc..1f97361f4 100644
--- a/lib/federation/web_finger/web_finger.ex
+++ b/lib/federation/web_finger/web_finger.ex
@@ -19,6 +19,8 @@ defmodule Mobilizon.Federation.WebFinger do
   require Logger
   import SweetXml
 
+  @env Application.compile_env(:mobilizon, :env)
+
   @doc """
   Returns the Web Host Metadata (for `/.well-known/host-meta`) representation for the instance, following RFC6414.
   """
@@ -205,7 +207,7 @@ defmodule Mobilizon.Federation.WebFinger do
           {:ok, String.t()} | {:error, :link_not_found} | {:error, any()}
   defp find_webfinger_endpoint(domain) when is_binary(domain) do
     Logger.debug("Calling HostMetaClient for #{domain}")
-    prefix = if Application.fetch_env!(:mobilizon, :env) !== :dev, do: "https", else: "http"
+    prefix = if @env !== :dev, do: "https", else: "http"
 
     with {:ok, %Tesla.Env{status: 200, body: body}} <-
            HostMetaClient.get("#{prefix}://#{domain}/.well-known/host-meta"),
@@ -229,7 +231,9 @@ defmodule Mobilizon.Federation.WebFinger do
 
         _ ->
           Logger.debug("Using default webfinger location")
-          prefix = if Application.fetch_env!(:mobilizon, :env) !== :dev, do: "https", else: "http"
+
+          prefix = if @env !== :dev, do: "https", else: "http"
+
           "#{prefix}://#{domain}/.well-known/webfinger?resource=acct:#{actor}"
       end
     end
diff --git a/lib/graphql/api/search.ex b/lib/graphql/api/search.ex
index 28c42c95d..7c9a08e36 100644
--- a/lib/graphql/api/search.ex
+++ b/lib/graphql/api/search.ex
@@ -7,10 +7,10 @@ defmodule Mobilizon.GraphQL.API.Search do
   alias Mobilizon.Actors.Actor
   alias Mobilizon.Events
   alias Mobilizon.Events.Event
-  alias Mobilizon.Storage.Page
-
   alias Mobilizon.Federation.ActivityPub
   alias Mobilizon.Federation.ActivityPub.Actor, as: ActivityPubActor
+  alias Mobilizon.Service.GlobalSearch
+  alias Mobilizon.Storage.Page
   import Mobilizon.GraphQL.Resolvers.Event.Utils
 
   require Logger
@@ -40,23 +40,30 @@ defmodule Mobilizon.GraphQL.API.Search do
         {:ok, process_from_username(term)}
 
       true ->
-        page =
-          Actors.search_actors(
-            term,
-            [
-              actor_type: result_type,
-              radius: Map.get(args, :radius),
-              location: Map.get(args, :location),
-              minimum_visibility: Map.get(args, :minimum_visibility, :public),
-              current_actor_id: Map.get(args, :current_actor_id),
-              exclude_my_groups: Map.get(args, :exclude_my_groups, false),
-              exclude_stale_actors: true
-            ],
-            page,
-            limit
-          )
+        if is_global_search(args) do
+          service = GlobalSearch.service()
 
-        {:ok, page}
+          {:ok, service.search_groups(Keyword.new(args, fn {k, v} -> {k, v} end))}
+        else
+          page =
+            Actors.search_actors(
+              term,
+              [
+                actor_type: result_type,
+                radius: Map.get(args, :radius),
+                location: Map.get(args, :location),
+                bbox: Map.get(args, :bbox),
+                minimum_visibility: Map.get(args, :minimum_visibility, :public),
+                current_actor_id: Map.get(args, :current_actor_id),
+                exclude_my_groups: Map.get(args, :exclude_my_groups, false),
+                exclude_stale_actors: true
+              ],
+              page,
+              limit
+            )
+
+          {:ok, page}
+        end
     end
   end
 
@@ -82,7 +89,13 @@ defmodule Mobilizon.GraphQL.API.Search do
           {:ok, %{total: 0, elements: []}}
       end
     else
-      {:ok, Events.build_events_for_search(Map.put(args, :term, term), page, limit)}
+      if is_global_search(args) do
+        service = GlobalSearch.service()
+
+        {:ok, service.search_events(Keyword.new(args, fn {k, v} -> {k, v} end))}
+      else
+        {:ok, Events.build_events_for_search(Map.put(args, :term, term), page, limit)}
+      end
     end
   end
 
@@ -136,4 +149,18 @@ defmodule Mobilizon.GraphQL.API.Search do
 
   @spec is_handle(String.t()) :: boolean
   defp is_handle(search), do: String.match?(search, ~r/@/)
+
+  defp is_global_search(%{search_target: :global}) do
+    global_search_enabled?()
+  end
+
+  defp is_global_search(_), do: global_search_enabled?() && global_search_default?()
+
+  defp global_search_enabled? do
+    Application.get_env(:mobilizon, :search) |> get_in([:global]) |> get_in([:is_enabled])
+  end
+
+  defp global_search_default? do
+    Application.get_env(:mobilizon, :search) |> get_in([:global]) |> get_in([:is_default_search])
+  end
 end
diff --git a/lib/graphql/resolvers/address.ex b/lib/graphql/resolvers/address.ex
index bb17ef956..db284cede 100644
--- a/lib/graphql/resolvers/address.ex
+++ b/lib/graphql/resolvers/address.ex
@@ -4,7 +4,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Address do
   """
 
   alias Mobilizon.Addresses.Address
-  alias Mobilizon.Service.Geospatial
+  alias Mobilizon.Service.{Geospatial, Pictures}
 
   require Logger
 
@@ -44,7 +44,15 @@ defmodule Mobilizon.GraphQL.Resolvers.Address do
         %{longitude: longitude, latitude: latitude, zoom: zoom, locale: locale},
         _context
       ) do
-    addresses = Geospatial.service().geocode(longitude, latitude, lang: locale, zoom: zoom)
+    addresses =
+      longitude
+      |> Geospatial.service().geocode(latitude, lang: locale, zoom: zoom)
+      |> Enum.map(fn address ->
+        picture_info =
+          Pictures.service().search(address.locality || address.region || address.country)
+
+        Map.put(address, :picture_info, picture_info)
+      end)
 
     {:ok, addresses}
   end
diff --git a/lib/graphql/resolvers/config.ex b/lib/graphql/resolvers/config.ex
index af9bded83..f26ce8a85 100644
--- a/lib/graphql/resolvers/config.ex
+++ b/lib/graphql/resolvers/config.ex
@@ -12,6 +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"
     geolix = Geolix.lookup(ip)
 
     country_code =
@@ -171,7 +172,17 @@ defmodule Mobilizon.GraphQL.Resolvers.Config do
           get_in(Application.get_env(:web_push_encryption, :vapid_details), [:public_key])
       },
       export_formats: Config.instance_export_formats(),
-      analytics: FrontEndAnalytics.config()
+      analytics: FrontEndAnalytics.config(),
+      search: %{
+        global: %{
+          is_enabled:
+            Application.get_env(:mobilizon, :search) |> get_in([:global]) |> get_in([:is_enabled]),
+          is_default:
+            Application.get_env(:mobilizon, :search)
+            |> get_in([:global])
+            |> get_in([:is_default_search])
+        }
+      }
     }
   end
 end
diff --git a/lib/graphql/resolvers/followers.ex b/lib/graphql/resolvers/followers.ex
index 0fe127006..8999c5f5e 100644
--- a/lib/graphql/resolvers/followers.ex
+++ b/lib/graphql/resolvers/followers.ex
@@ -67,4 +67,8 @@ defmodule Mobilizon.GraphQL.Resolvers.Followers do
   end
 
   def update_follower(_, _, _), do: {:error, :unauthenticated}
+
+  def count_followers_for_group(%Actor{type: :Group} = group, _args, _resolution) do
+    {:ok, Actors.count_followers_for_actor(group)}
+  end
 end
diff --git a/lib/graphql/resolvers/member.ex b/lib/graphql/resolvers/member.ex
index 9f479ff99..b43428d93 100644
--- a/lib/graphql/resolvers/member.ex
+++ b/lib/graphql/resolvers/member.ex
@@ -254,6 +254,10 @@ defmodule Mobilizon.GraphQL.Resolvers.Member do
          "You must be logged-in to remove a member"
        )}
 
+  def count_members_for_group(%Actor{type: :Group} = group, _args, _resolution) do
+    {:ok, Actors.count_members_for_group(group)}
+  end
+
   # Rejected members can be invited again
   @spec check_member_not_existant_or_rejected(String.t() | integer, String.t() | integer()) ::
           boolean()
diff --git a/lib/graphql/resolvers/statistics.ex b/lib/graphql/resolvers/statistics.ex
index c199c76c6..8004d3928 100644
--- a/lib/graphql/resolvers/statistics.ex
+++ b/lib/graphql/resolvers/statistics.ex
@@ -6,7 +6,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Statistics do
   alias Mobilizon.Service.Statistics, as: StatisticsModule
 
   @doc """
-  Gets config.
+  Gets statistics.
   """
   @spec get_statistics(any(), any(), any()) :: {:ok, map()}
   def get_statistics(_parent, _params, _context) do
@@ -23,4 +23,12 @@ defmodule Mobilizon.GraphQL.Resolvers.Statistics do
        number_of_instance_followers: StatisticsModule.get_cached_value(:instance_followers)
      }}
   end
+
+  @doc """
+  Gets category statistics
+  """
+  @spec get_category_statistics(any(), any(), any()) :: {:ok, list()}
+  def get_category_statistics(_parent, _params, _context) do
+    {:ok, StatisticsModule.category_statistics()}
+  end
 end
diff --git a/lib/graphql/resolvers/user.ex b/lib/graphql/resolvers/user.ex
index 1e37116b0..a555037b9 100644
--- a/lib/graphql/resolvers/user.ex
+++ b/lib/graphql/resolvers/user.ex
@@ -23,11 +23,19 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
   @spec find_user(any(), map(), Absinthe.Resolution.t()) :: {:ok, User.t()} | {:error, String.t()}
   def find_user(_parent, %{id: id}, %{context: %{current_user: %User{role: role}}})
       when is_moderator(role) do
-    with {:ok, %User{} = user} <- Users.get_user_with_actors(id) do
-      {:ok, user}
+    case Users.get_user_with_actors(id) do
+      {:ok, %User{} = user} ->
+        {:ok, user}
+
+      _ ->
+        {:error, :user_not_found}
     end
   end
 
+  def find_user(_parent, _args, _resolution) do
+    {:error, :unauthorized}
+  end
+
   @doc """
   Return current logged-in user
   """
diff --git a/lib/graphql/schema/actor.ex b/lib/graphql/schema/actor.ex
index c2fd097bb..cc28cbe2a 100644
--- a/lib/graphql/schema/actor.ex
+++ b/lib/graphql/schema/actor.ex
@@ -32,8 +32,8 @@ defmodule Mobilizon.GraphQL.Schema.ActorInterface do
     field(:banner, :media, description: "The actor's banner media")
 
     # These one should have a privacy setting
-    field(:followersCount, :integer, description: "Number of followers for this actor")
-    field(:followingCount, :integer, description: "Number of actors following this actor")
+    field(:followers_count, :integer, description: "Number of followers for this actor")
+    field(:following_count, :integer, description: "Number of actors following this actor")
 
     field(:media_size, :integer, description: "The total size of the media from this actor")
 
diff --git a/lib/graphql/schema/actors/application.ex b/lib/graphql/schema/actors/application.ex
index 4a8d98bae..87774005a 100644
--- a/lib/graphql/schema/actors/application.ex
+++ b/lib/graphql/schema/actors/application.ex
@@ -31,8 +31,8 @@ defmodule Mobilizon.GraphQL.Schema.Actors.ApplicationType do
     field(:banner, :media, description: "The actor's banner media")
 
     # These one should have a privacy setting
-    field(:followersCount, :integer, description: "Number of followers for this actor")
-    field(:followingCount, :integer, description: "Number of actors following this actor")
+    field(:followers_count, :integer, description: "Number of followers for this actor")
+    field(:following_count, :integer, description: "Number of actors following this actor")
 
     field(:media_size, :integer,
       resolve: &Media.actor_size/3,
diff --git a/lib/graphql/schema/actors/group.ex b/lib/graphql/schema/actors/group.ex
index 1129de042..2f2ca7e1c 100644
--- a/lib/graphql/schema/actors/group.ex
+++ b/lib/graphql/schema/actors/group.ex
@@ -29,7 +29,7 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
   Represents a group of actors
   """
   object :group do
-    interfaces([:actor, :interactable, :activity_object, :action_log_object])
+    interfaces([:actor, :interactable, :activity_object, :action_log_object, :group_search_result])
 
     field(:id, :id, description: "Internal ID for this group")
     field(:url, :string, description: "The ActivityPub actor's URL")
@@ -59,8 +59,17 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
     )
 
     # These one should have a privacy setting
-    field(:followersCount, :integer, description: "Number of followers for this actor")
-    field(:followingCount, :integer, description: "Number of actors following this actor")
+    field(:followers_count, :integer,
+      description: "Number of followers for this actor",
+      resolve: &Followers.count_followers_for_group/3
+    )
+
+    field(:following_count, :integer, description: "Number of follows for this actor")
+
+    field(:members_count, :integer,
+      description: "Number of members for this actor",
+      resolve: &Member.count_members_for_group/3
+    )
 
     field(:media_size, :integer,
       resolve: &Media.actor_size/3,
diff --git a/lib/graphql/schema/actors/person.ex b/lib/graphql/schema/actors/person.ex
index a7d773c71..eda059000 100644
--- a/lib/graphql/schema/actors/person.ex
+++ b/lib/graphql/schema/actors/person.ex
@@ -43,9 +43,16 @@ defmodule Mobilizon.GraphQL.Schema.Actors.PersonType do
     field(:avatar, :media, description: "The actor's avatar media")
     field(:banner, :media, description: "The actor's banner media")
 
-    # These one should have a privacy setting
-    field(:followersCount, :integer, description: "Number of followers for this actor")
-    field(:followingCount, :integer, description: "Number of actors following this actor")
+    # Persons have zero followers/followings
+    field(:followers_count, :integer,
+      description: "Number of followers for this actor",
+      resolve: fn _, _, _ -> {:ok, 0} end
+    )
+
+    field(:following_count, :integer,
+      description: "Number of actors following this actor",
+      resolve: fn _, _, _ -> {:ok, 0} end
+    )
 
     field(:media_size, :integer,
       resolve: &Media.actor_size/3,
diff --git a/lib/graphql/schema/address.ex b/lib/graphql/schema/address.ex
index bee6ac9c9..9b797d9ef 100644
--- a/lib/graphql/schema/address.ex
+++ b/lib/graphql/schema/address.ex
@@ -22,6 +22,7 @@ defmodule Mobilizon.GraphQL.Schema.AddressType do
     field(:id, :id, description: "The address's ID")
     field(:origin_id, :string, description: "The address's original ID from the provider")
     field(:timezone, :string, description: "The (estimated) timezone of the location")
+    field(:picture_info, :picture_info, description: "A picture associated with the address")
   end
 
   @desc """
@@ -40,6 +41,20 @@ defmodule Mobilizon.GraphQL.Schema.AddressType do
     field(:info, :string)
   end
 
+  object :picture_info_element do
+    field(:name, :string)
+    field(:url, :string)
+  end
+
+  @desc """
+  A picture associated with an address
+  """
+  object :picture_info do
+    field(:url, :string)
+    field(:author, :picture_info_element)
+    field(:source, :picture_info_element)
+  end
+
   @desc """
   An address input
   """
diff --git a/lib/graphql/schema/config.ex b/lib/graphql/schema/config.ex
index c20ee1e01..27561783c 100644
--- a/lib/graphql/schema/config.ex
+++ b/lib/graphql/schema/config.ex
@@ -79,6 +79,8 @@ defmodule Mobilizon.GraphQL.Schema.ConfigType do
     field(:analytics, list_of(:analytics),
       description: "Configuration for diverse analytics services"
     )
+
+    field(:search, :search_settings, description: "The instance's search settings")
   end
 
   @desc """
@@ -354,6 +356,15 @@ defmodule Mobilizon.GraphQL.Schema.ConfigType do
     field(:type, :analytics_configuration_type, description: "The analytics configuration type")
   end
 
+  object :search_settings do
+    field(:global, :global_search_settings, description: "The instance's global search settings")
+  end
+
+  object :global_search_settings do
+    field(:is_enabled, :boolean, description: "Whether global search is enabled")
+    field(:is_default, :boolean, description: "Whether global search is the default")
+  end
+
   @desc """
   Export formats configuration
   """
diff --git a/lib/graphql/schema/event.ex b/lib/graphql/schema/event.ex
index 9a4dd9ea3..febfffd9c 100644
--- a/lib/graphql/schema/event.ex
+++ b/lib/graphql/schema/event.ex
@@ -17,7 +17,7 @@ defmodule Mobilizon.GraphQL.Schema.EventType do
 
   @desc "An event"
   object :event do
-    interfaces([:action_log_object, :interactable, :activity_object])
+    interfaces([:action_log_object, :interactable, :activity_object, :event_search_result])
     field(:id, :id, description: "Internal ID for this event")
     field(:uuid, :uuid, description: "The Event UUID")
     field(:url, :string, description: "The ActivityPub Event URL")
diff --git a/lib/graphql/schema/search.ex b/lib/graphql/schema/search.ex
index 2da1d8fa4..a3820e5be 100644
--- a/lib/graphql/schema/search.ex
+++ b/lib/graphql/schema/search.ex
@@ -7,6 +7,97 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
   alias Mobilizon.Actors.Actor
   alias Mobilizon.Events.Event
   alias Mobilizon.GraphQL.Resolvers.Search
+  alias Mobilizon.Service.GlobalSearch.{EventResult, GroupResult}
+
+  interface :event_search_result do
+    field(:id, :id, description: "Internal ID for this event")
+    field(:uuid, :uuid, description: "The Event UUID")
+    field(:url, :string, description: "The ActivityPub Event URL")
+    field(:title, :string, description: "The event's title")
+    field(:begins_on, :datetime, description: "Datetime for when the event begins")
+    field(:ends_on, :datetime, description: "Datetime for when the event ends")
+    field(:status, :event_status, description: "Status of the event")
+    field(:picture, :media, description: "The event's picture")
+    field(:physical_address, :address, description: "The event's physical address")
+    field(:attributed_to, :actor, description: "Who the event is attributed to (often a group)")
+    field(:organizer_actor, :actor, description: "The event's organizer (as a person)")
+    field(:tags, list_of(:tag), description: "The event's tags")
+    field(:category, :event_category, description: "The event's category")
+    field(:options, :event_options, description: "The event options")
+
+    resolve_type(fn
+      %Event{}, _ ->
+        :event
+
+      %EventResult{}, _ ->
+        :event_result
+
+      _, _ ->
+        nil
+    end)
+  end
+
+  @desc "Search event result"
+  object :event_result do
+    interfaces([:event_search_result])
+    field(:id, :id, description: "Internal ID for this event")
+    field(:uuid, :uuid, description: "The Event UUID")
+    field(:url, :string, description: "The ActivityPub Event URL")
+    field(:title, :string, description: "The event's title")
+    field(:begins_on, :datetime, description: "Datetime for when the event begins")
+    field(:ends_on, :datetime, description: "Datetime for when the event ends")
+    field(:status, :event_status, description: "Status of the event")
+    field(:picture, :media, description: "The event's picture")
+    field(:physical_address, :address, description: "The event's physical address")
+    field(:attributed_to, :actor, description: "Who the event is attributed to (often a group)")
+    field(:organizer_actor, :actor, description: "The event's organizer (as a person)")
+    field(:tags, list_of(:tag), description: "The event's tags")
+    field(:category, :event_category, description: "The event's category")
+    field(:options, :event_options, description: "The event options")
+  end
+
+  interface :group_search_result do
+    field(:id, :id, description: "Internal ID for this group")
+    field(:url, :string, description: "The ActivityPub actor's URL")
+    field(:type, :actor_type, description: "The type of Actor (Person, Group,…)")
+    field(:name, :string, description: "The actor's displayed name")
+    field(:domain, :string, description: "The actor's domain if (null if it's this instance)")
+    field(:summary, :string, description: "The actor's summary")
+    field(:preferred_username, :string, description: "The actor's preferred username")
+    field(:avatar, :media, description: "The actor's avatar media")
+    field(:banner, :media, description: "The actor's banner media")
+    field(:followers_count, :integer, description: "Number of followers for this actor")
+    field(:members_count, :integer, description: "Number of followers for this actor")
+    field(:physical_address, :address, description: "The type of the event's address")
+
+    resolve_type(fn
+      %Actor{type: :Group}, _ ->
+        :group
+
+      %GroupResult{}, _ ->
+        :group_result
+
+      _, _ ->
+        nil
+    end)
+  end
+
+  @desc "Search group result"
+  object :group_result do
+    interfaces([:group_search_result])
+    field(:id, :id, description: "Internal ID for this group")
+    field(:url, :string, description: "The ActivityPub actor's URL")
+    field(:type, :actor_type, description: "The type of Actor (Person, Group,…)")
+    field(:name, :string, description: "The actor's displayed name")
+    field(:domain, :string, description: "The actor's domain if (null if it's this instance)")
+    field(:summary, :string, description: "The actor's summary")
+    field(:preferred_username, :string, description: "The actor's preferred username")
+    field(:avatar, :media, description: "The actor's avatar media")
+    field(:banner, :media, description: "The actor's banner media")
+    field(:followers_count, :integer, description: "Number of followers for this actor")
+    field(:members_count, :integer, description: "Number of followers for this actor")
+    field(:physical_address, :address, description: "The type of the event's address")
+  end
 
   @desc "Search persons result"
   object :persons do
@@ -17,13 +108,13 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
   @desc "Search groups result"
   object :groups do
     field(:total, non_null(:integer), description: "Total elements")
-    field(:elements, non_null(list_of(:group)), description: "Group elements")
+    field(:elements, non_null(list_of(:group_search_result)), description: "Group elements")
   end
 
   @desc "Search events result"
   object :events do
     field(:total, non_null(:integer), description: "Total elements")
-    field(:elements, non_null(list_of(:event)), description: "Event elements")
+    field(:elements, non_null(list_of(:event_search_result)), description: "Event elements")
   end
 
   @desc """
@@ -53,6 +144,14 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
     value(:online, description: "The event will only happen online. It has no physical address")
   end
 
+  enum :search_target do
+    value(:internal,
+      description: "Search on content from this instance and from the followed instances"
+    )
+
+    value(:global, description: "Search using the global fediverse search")
+  end
+
   object :search_queries do
     @desc "Search persons"
     field :search_persons, :persons do
@@ -81,6 +180,18 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
         description: "Radius around the location to search in"
       )
 
+      arg(:language_one_of, list_of(:string),
+        description: "The list of languages this event can be in"
+      )
+
+      arg(:search_target, :search_target,
+        default_value: :internal,
+        description: "The target of the search (internal or global)"
+      )
+
+      arg(:bbox, :string, description: "The bbox to search groups into")
+      arg(:zoom, :integer, description: "The zoom level for searching groups")
+
       arg(:page, :integer, default_value: 1, description: "Result page")
       arg(:limit, :integer, default_value: 10, description: "Results limit per page")
 
@@ -95,11 +206,31 @@ 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(:language_one_of, list_of(:string),
+        description: "The list of languages this event can be in"
+      )
+
+      arg(:search_target, :search_target,
+        default_value: :internal,
+        description: "The target of the search (internal or global)"
+      )
+
       arg(:radius, :float,
         default_value: 50,
         description: "Radius around the location to search in"
       )
 
+      arg(:bbox, :string, description: "The bbox to search events into")
+      arg(:zoom, :integer, description: "The zoom level for searching events")
+
       arg(:page, :integer, default_value: 1, description: "Result page")
       arg(:limit, :integer, default_value: 10, description: "Results limit per page")
       arg(:begins_on, :datetime, description: "Filter events by their start date")
diff --git a/lib/graphql/schema/statistics.ex b/lib/graphql/schema/statistics.ex
index 58d3b27bf..d6ab57417 100644
--- a/lib/graphql/schema/statistics.ex
+++ b/lib/graphql/schema/statistics.ex
@@ -26,10 +26,20 @@ defmodule Mobilizon.GraphQL.Schema.StatisticsType do
     )
   end
 
+  object :category_statistics do
+    field(:key, :string, description: "The key for the category")
+    field(:number, :integer, description: "The number of events for the given category")
+  end
+
   object :statistics_queries do
     @desc "Get the instance statistics"
     field :statistics, :statistics do
       resolve(&Statistics.get_statistics/3)
     end
+
+    @desc "Get the instance's category statistics"
+    field :category_statistics, list_of(:category_statistics) do
+      resolve(&Statistics.get_category_statistics/3)
+    end
   end
 end
diff --git a/lib/mix/tasks/mobilizon/common.ex b/lib/mix/tasks/mobilizon/common.ex
index eb7181863..910dc7e3f 100644
--- a/lib/mix/tasks/mobilizon/common.ex
+++ b/lib/mix/tasks/mobilizon/common.ex
@@ -9,11 +9,13 @@ defmodule Mix.Tasks.Mobilizon.Common do
   """
   require Logger
 
+  @env Application.compile_env(:mobilizon, :env)
+
   @spec start_mobilizon :: any()
   def start_mobilizon do
     if mix_task?(), do: Mix.Task.run("app.config")
 
-    unless System.get_env("DEBUG") || Application.fetch_env!(:mobilizon, :env) == :test do
+    unless System.get_env("DEBUG") || @env == :test do
       Logger.configure(level: :error)
     end
 
@@ -73,7 +75,7 @@ defmodule Mix.Tasks.Mobilizon.Common do
       IO.puts(:stderr, message)
     end
 
-    if Application.fetch_env!(:mobilizon, :env) != :test do
+    if @env != :test do
       exit({:shutdown, Keyword.get(options, :error_code, 1)})
     end
   end
diff --git a/lib/mobilizon.ex b/lib/mobilizon.ex
index f200c5254..c26cd3d4e 100644
--- a/lib/mobilizon.ex
+++ b/lib/mobilizon.ex
@@ -21,7 +21,7 @@ defmodule Mobilizon do
 
   @name Mix.Project.config()[:name]
   @version Mix.Project.config()[:version]
-  @env Application.fetch_env!(:mobilizon, :env)
+  @env Application.compile_env(:mobilizon, :env)
 
   @spec named_version :: String.t()
   def named_version, do: "#{@name} #{@version}"
diff --git a/lib/mobilizon/actors/actors.ex b/lib/mobilizon/actors/actors.ex
index 9bd80fd33..4f3d4d9f6 100644
--- a/lib/mobilizon/actors/actors.ex
+++ b/lib/mobilizon/actors/actors.ex
@@ -512,7 +512,13 @@ defmodule Mobilizon.Actors do
     query
     |> distinct([q], q.id)
     |> actor_by_username_or_name_query(term)
+    |> maybe_join_address(
+      Keyword.get(options, :location),
+      Keyword.get(options, :radius),
+      Keyword.get(options, :bbox)
+    )
     |> actors_for_location(Keyword.get(options, :location), Keyword.get(options, :radius))
+    |> events_for_bounding_box(Keyword.get(options, :bbox))
     |> filter_by_type(Keyword.get(options, :actor_type, :Group))
     |> filter_by_minimum_visibility(Keyword.get(options, :minimum_visibility, :public))
     |> filter_suspended(false)
@@ -923,10 +929,10 @@ defmodule Mobilizon.Actors do
   Returns the number of members for a group
   """
   @spec count_members_for_group(Actor.t()) :: integer()
-  def count_members_for_group(%Actor{id: actor_id}) do
+  def count_members_for_group(%Actor{id: actor_id}, roles \\ @member_roles) do
     actor_id
     |> members_for_group_query()
-    # |> where([m], m.role in @member_roles)
+    |> where([m], m.role in ^roles)
     |> Repo.aggregate(:count)
   end
 
@@ -1385,15 +1391,27 @@ defmodule Mobilizon.Actors do
     )
   end
 
+  @spec maybe_join_address(
+          Ecto.Queryable.t(),
+          String.t() | nil,
+          integer() | nil,
+          String.t() | nil
+        ) :: Ecto.Query.t()
+  defp maybe_join_address(query, location, radius, bbox)
+       when (is_valid_string(location) and not is_nil(radius)) or is_valid_string(bbox) do
+    join(query, :inner, [q], a in Address, on: a.id == q.physical_address_id, as: :address)
+  end
+
+  defp maybe_join_address(query, _location, _radius, _bbox), do: query
+
   @spec actors_for_location(Ecto.Queryable.t(), String.t(), integer()) :: Ecto.Query.t()
   defp actors_for_location(query, location, radius)
        when is_valid_string(location) and not is_nil(radius) do
     {lon, lat} = Geohax.decode(location)
     point = Geo.WKT.decode!("SRID=4326;POINT(#{lon} #{lat})")
 
-    query
-    |> join(:inner, [q], a in Address, on: a.id == q.physical_address_id, as: :address)
-    |> where(
+    where(
+      query,
       [q],
       st_dwithin_in_meters(^point, as(:address).geom, ^(radius * 1000))
     )
@@ -1401,6 +1419,36 @@ defmodule Mobilizon.Actors do
 
   defp actors_for_location(query, _location, _radius), do: query
 
+  defp events_for_bounding_box(query, bbox) when is_valid_string(bbox) do
+    [top_left, bottom_right] = String.split(bbox, ":")
+    [ymax, xmin] = String.split(top_left, ",")
+    [ymin, xmax] = String.split(bottom_right, ",")
+
+    where(
+      query,
+      [q, ..., a],
+      fragment(
+        "? @ ST_MakeEnvelope(?,?,?,?,?)",
+        a.geom,
+        ^sanitize_bounding_box_params(xmin),
+        ^sanitize_bounding_box_params(ymin),
+        ^sanitize_bounding_box_params(xmax),
+        ^sanitize_bounding_box_params(ymax),
+        "4326"
+      )
+    )
+  end
+
+  defp events_for_bounding_box(query, _args), do: query
+
+  @spec sanitize_bounding_box_params(String.t()) :: float()
+  defp sanitize_bounding_box_params(param) do
+    param
+    |> String.trim()
+    |> String.to_float()
+    |> Float.floor(10)
+  end
+
   @spec person_query :: Ecto.Query.t()
   defp person_query do
     from(a in Actor, where: a.type == ^:Person)
diff --git a/lib/mobilizon/cldr.ex b/lib/mobilizon/cldr.ex
index e7b2fffad..d24f063e7 100644
--- a/lib/mobilizon/cldr.ex
+++ b/lib/mobilizon/cldr.ex
@@ -4,14 +4,15 @@ defmodule Mobilizon.Cldr do
   """
 
   use Cldr,
-    locales: Application.get_env(:mobilizon, :cldr)[:locales],
+    locales: Application.compile_env(:mobilizon, :cldr)[:locales],
     add_fallback_locales: true,
     gettext:
-      if(Application.fetch_env!(:mobilizon, :env) == :prod,
+      if(Application.compile_env(:mobilizon, :env) == :prod,
         do: Mobilizon.Web.Gettext,
         else: nil
       ),
-    providers: [Cldr.Number, Cldr.Calendar, Cldr.DateTime, Cldr.Language]
+    providers: [Cldr.Number, Cldr.Calendar, Cldr.DateTime, Cldr.Language],
+    precompile_transliterations: [{:latn, :arabext}]
 
   def known_locale?(locale) do
     Mobilizon.Cldr.known_locale_names()
diff --git a/lib/mobilizon/events/events.ex b/lib/mobilizon/events/events.ex
index 8287b4e9d..c039c1b0f 100644
--- a/lib/mobilizon/events/events.ex
+++ b/lib/mobilizon/events/events.ex
@@ -530,8 +530,13 @@ defmodule Mobilizon.Events do
     |> events_for_begins_on(args)
     |> events_for_ends_on(args)
     |> events_for_category(args)
+    |> events_for_categories(args)
+    |> events_for_languages(args)
+    |> events_for_statuses(args)
     |> events_for_tags(args)
+    |> maybe_join_address(args)
     |> events_for_location(args)
+    |> events_for_bounding_box(args)
     |> filter_online(args)
     |> filter_draft()
     |> filter_local_or_from_followed_instances_events()
@@ -1320,6 +1325,28 @@ 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_languages(query, %{language_one_of: language_one_of})
+       when length(language_one_of) > 0 do
+    where(query, [q], q.language in ^language_one_of)
+  end
+
+  defp events_for_languages(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
@@ -1330,6 +1357,20 @@ defmodule Mobilizon.Events do
 
   defp events_for_tags(query, _args), do: query
 
+  # We add the inner join on address only if we're going to use it in
+  # events_for_location or events_for_bounding_box
+  # So we're sure it's only being added once
+  defp maybe_join_address(query, %{location: location, radius: radius})
+       when is_valid_string(location) and not is_nil(radius) do
+    join(query, :inner, [q], a in Address, on: a.id == q.physical_address_id, as: :address)
+  end
+
+  defp maybe_join_address(query, %{bbox: bbox}) when is_valid_string(bbox) do
+    join(query, :inner, [q], a in Address, on: a.id == q.physical_address_id, as: :address)
+  end
+
+  defp maybe_join_address(query, _), do: query
+
   @spec events_for_location(Ecto.Queryable.t(), map()) :: Ecto.Query.t()
   defp events_for_location(query, %{radius: radius}) when is_nil(radius),
     do: query
@@ -1339,9 +1380,8 @@ defmodule Mobilizon.Events do
     with {lon, lat} <- Geohax.decode(location),
          point <- Geo.WKT.decode!("SRID=4326;POINT(#{lon} #{lat})"),
          {{x_min, y_min}, {x_max, y_max}} <- search_box({lon, lat}, radius) do
-      query
-      |> join(:inner, [q], a in Address, on: a.id == q.physical_address_id, as: :address)
-      |> where(
+      where(
+        query,
         [q, ..., a],
         st_x(a.geom) > ^x_min and st_x(a.geom) < ^x_max and
           st_y(a.geom) > ^y_min and st_y(a.geom) < ^y_max and
@@ -1354,6 +1394,36 @@ defmodule Mobilizon.Events do
 
   defp events_for_location(query, _args), do: query
 
+  defp events_for_bounding_box(query, %{bbox: bbox}) when is_valid_string(bbox) do
+    [top_left, bottom_right] = String.split(bbox, ":")
+    [ymax, xmin] = String.split(top_left, ",")
+    [ymin, xmax] = String.split(bottom_right, ",")
+
+    where(
+      query,
+      [q, ..., a],
+      fragment(
+        "? @ ST_MakeEnvelope(?,?,?,?,?)",
+        a.geom,
+        ^sanitize_bounding_box_params(xmin),
+        ^sanitize_bounding_box_params(ymin),
+        ^sanitize_bounding_box_params(xmax),
+        ^sanitize_bounding_box_params(ymax),
+        "4326"
+      )
+    )
+  end
+
+  defp events_for_bounding_box(query, _args), do: query
+
+  @spec sanitize_bounding_box_params(String.t()) :: float()
+  defp sanitize_bounding_box_params(param) do
+    param
+    |> String.trim()
+    |> String.to_float()
+    |> Float.floor(10)
+  end
+
   @spec search_box({float(), float()}, float()) :: {{float, float}, {float, float}}
   defp search_box({lon0, lat0}, radius) do
     km_per_lat_deg = 111.195
@@ -1605,6 +1675,18 @@ defmodule Mobilizon.Events do
     |> Repo.all()
   end
 
+  def category_statistics do
+    Event
+    |> filter_future_events(true)
+    |> filter_public_visibility()
+    |> filter_draft()
+    |> filter_cancelled_events()
+    |> filter_local_or_from_followed_instances_events()
+    |> group_by([e], e.category)
+    |> select([e], {e.category, count(e.id)})
+    |> Repo.all()
+  end
+
   @spec list_participations_for_user_query(integer()) :: Ecto.Query.t()
   defp list_participations_for_user_query(user_id) do
     from(
diff --git a/lib/service/activity/utils.ex b/lib/service/activity/utils.ex
index ecfd33b69..7594e7286 100644
--- a/lib/service/activity/utils.ex
+++ b/lib/service/activity/utils.ex
@@ -6,6 +6,8 @@ defmodule Mobilizon.Service.Activity.Utils do
   alias Mobilizon.Activities.Activity
   alias Mobilizon.Service.Activity, as: ActivityService
 
+  @env Application.compile_env(:mobilizon, :env)
+
   def transform_activity(%Activity{} = activity) do
     activity
     |> Map.update(:subject_params, %{}, &transform_params/1)
@@ -30,7 +32,7 @@ defmodule Mobilizon.Service.Activity.Utils do
 
   @spec maybe_inserted_at :: map()
   def maybe_inserted_at do
-    if Application.fetch_env!(:mobilizon, :env) == :test do
+    if @env == :test do
       %{}
     else
       %{"inserted_at" => DateTime.utc_now()}
diff --git a/lib/service/actor_suspension.ex b/lib/service/actor_suspension.ex
index 466b4bbba..04efe9c3a 100644
--- a/lib/service/actor_suspension.ex
+++ b/lib/service/actor_suspension.ex
@@ -19,7 +19,7 @@ defmodule Mobilizon.Service.ActorSuspension do
   require Logger
   import Ecto.Query
 
-  @actor_preloads [:user, :organized_events, :comments]
+  @actor_preloads [:user, :organized_events, :participations, :comments]
   @delete_actor_default_options [reserve_username: true, suspension: false]
 
   @doc """
diff --git a/lib/service/global_search/event_result.ex b/lib/service/global_search/event_result.ex
new file mode 100644
index 000000000..bd3249d12
--- /dev/null
+++ b/lib/service/global_search/event_result.ex
@@ -0,0 +1,19 @@
+defmodule Mobilizon.Service.GlobalSearch.EventResult do
+  @moduledoc """
+  The structure holding search result information about an event
+  """
+  defstruct [
+    :id,
+    :uuid,
+    :url,
+    :title,
+    :begins_on,
+    :ends_on,
+    :picture,
+    :category,
+    :tags,
+    :organizer_actor,
+    :participants,
+    :physical_address
+  ]
+end
diff --git a/lib/service/global_search/global_search.ex b/lib/service/global_search/global_search.ex
new file mode 100644
index 000000000..50f0d10c4
--- /dev/null
+++ b/lib/service/global_search/global_search.ex
@@ -0,0 +1,17 @@
+defmodule Mobilizon.Service.GlobalSearch do
+  @moduledoc """
+  Module to load the service adapter defined inside the configuration.
+
+  See `Mobilizon.Service.GlobalSearch.Provider`.
+  """
+
+  @doc """
+  Returns the appropriate service adapter.
+
+  According to the config behind
+    `config :mobilizon, Mobilizon.Service.GlobalSearch,
+       service: Mobilizon.Service.GlobalSearch.Module`
+  """
+  @spec service :: module
+  def service, do: get_in(Application.get_env(:mobilizon, __MODULE__), [:service])
+end
diff --git a/lib/service/global_search/group_result.ex b/lib/service/global_search/group_result.ex
new file mode 100644
index 000000000..91fea3689
--- /dev/null
+++ b/lib/service/global_search/group_result.ex
@@ -0,0 +1,18 @@
+defmodule Mobilizon.Service.GlobalSearch.GroupResult do
+  @moduledoc """
+  The structure holding search result information about a group
+  """
+  defstruct [
+    :id,
+    :url,
+    :name,
+    :preferred_username,
+    :domain,
+    :avatar,
+    :summary,
+    :members_count,
+    :follower_count,
+    :type,
+    :physical_address
+  ]
+end
diff --git a/lib/service/global_search/provider.ex b/lib/service/global_search/provider.ex
new file mode 100644
index 000000000..18ef92847
--- /dev/null
+++ b/lib/service/global_search/provider.ex
@@ -0,0 +1,44 @@
+defmodule Mobilizon.Service.GlobalSearch.Provider do
+  @moduledoc """
+  Provider Behaviour for Global Search.
+
+  ## Supported backends
+
+    * `Mobilizon.Service.GlobalSearch.Mobilizon` [🔗](https://framagit.org/framasoft/joinmobilizon/search-index/)
+
+  ## Shared options
+
+    * `:lang` Lang in which to prefer results. Used as a request parameter or
+      through an `Accept-Language` HTTP header. Defaults to `"en"`.
+    * `:country_code` An ISO 3166 country code. String or `nil`
+    * `:limit` Maximum limit for the number of results returned by the backend.
+      Defaults to `10`
+    * `:api_key` Allows to override the API key (if the backend requires one) set
+      inside the configuration.
+    * `:endpoint` Allows to override the endpoint set inside the configuration.
+  """
+
+  alias Mobilizon.Service.GlobalSearch.{EventResult, GroupResult}
+
+  @doc """
+  Get global search results for a search string
+
+  ## Examples
+
+      iex> search_events(search: "London")
+      [%EventResult{id: "provider-534", origin_url: "https://somewhere.else", title: "MyEvent", begins_on: "2022-08-25T08:13:47+0200", ends_on: "2022-08-25T10:13:47+0200", category: "FILM_MEDIA", tags: ["something", "what"], participants: 5}]
+  """
+  @callback search_events(search_options :: keyword) ::
+              Page.t(EventResult.t())
+  @callback search_groups(search_options :: keyword) ::
+              Page.t(GroupResult.t())
+  @doc """
+  The CSP configuration to add for the service to work
+  """
+  @callback csp() :: keyword()
+
+  @spec endpoint(atom()) :: String.t()
+  def endpoint(provider) do
+    Application.get_env(:mobilizon, provider) |> get_in([:endpoint])
+  end
+end
diff --git a/lib/service/global_search/search_mobilizon.ex b/lib/service/global_search/search_mobilizon.ex
new file mode 100644
index 000000000..b1a4fac5b
--- /dev/null
+++ b/lib/service/global_search/search_mobilizon.ex
@@ -0,0 +1,256 @@
+defmodule Mobilizon.Service.GlobalSearch.SearchMobilizon do
+  @moduledoc """
+  [Search Mobilizon](https://search.joinmobilizon.org) backend.
+  """
+
+  alias Mobilizon.Actors.Actor
+  alias Mobilizon.Addresses.Address
+  alias Mobilizon.Events.Tag
+  alias Mobilizon.Service.GlobalSearch.{EventResult, GroupResult, Provider}
+  alias Mobilizon.Service.HTTP.GenericJSONClient
+  alias Mobilizon.Storage.Page
+  require Logger
+  import Plug.Conn.Query, only: [encode: 1]
+
+  @search_events_api "/api/v1/search/events"
+  @search_groups_api "/api/v1/search/groups"
+
+  @behaviour Provider
+
+  @impl Provider
+  @doc """
+  Mobilizon Search implementation for `c:Mobilizon.Service.GlobalSearch.Provider.search_events/3`.
+  """
+  @spec search_events(keyword()) :: Page.t(EventResult.t())
+  def search_events(options \\ []) do
+    Logger.debug("Search events options, #{inspect(Keyword.keys(options))}")
+
+    options =
+      options
+      |> Keyword.merge(
+        term: options[:search],
+        startDateMin: to_date(options[:begins_on]),
+        startDateMax: to_date(options[:ends_on]),
+        categoryOneOf: options[:category_one_of],
+        languageOneOf: options[:language_one_of],
+        statusOneOf:
+          Enum.map(options[:status_one_of] || [], fn status ->
+            status |> Atom.to_string() |> String.upcase()
+          end),
+        distance: if(options[:radius], do: "#{options[:radius]}_km", else: nil),
+        count: options[:limit],
+        start: (options[:page] - 1) * options[:limit],
+        latlon: to_lat_lon(options[:location]),
+        bbox: options[:bbox]
+      )
+      |> Keyword.take([
+        :search,
+        :startDateMin,
+        :startDateMax,
+        :boostLanguages,
+        :categoryOneOf,
+        :languageOneOf,
+        :latlon,
+        :distance,
+        :sort,
+        :statusOneOf,
+        :bbox,
+        :start,
+        :count
+      ])
+      |> Keyword.reject(fn {_key, val} -> is_nil(val) end)
+
+    events_url = "#{search_endpoint()}#{@search_events_api}?#{encode(options)}"
+    Logger.debug("Calling global search engine url #{events_url}")
+
+    client = GenericJSONClient.client()
+
+    case GenericJSONClient.get(client, events_url) do
+      {:ok, %{status: 200, body: body}} ->
+        %Page{total: body["total"], elements: Enum.map(body["data"], &build_event/1)}
+
+      _ ->
+        nil
+    end
+  end
+
+  @impl Provider
+  @doc """
+  Mobilizon Search implementation for `c:Mobilizon.Service.GlobalSearch.Provider.search_groups/3`.
+  """
+  @spec search_groups(keyword()) :: Page.t(GroupResult.t())
+  def search_groups(options \\ []) do
+    options =
+      options
+      |> Keyword.merge(
+        term: options[:search],
+        languageOneOf: options[:language_one_of],
+        distance: if(options[:radius], do: "#{options[:radius]}_km", else: nil),
+        count: options[:limit],
+        start: (options[:page] - 1) * options[:limit],
+        latlon: to_lat_lon(options[:location]),
+        bbox: options[:bbox]
+      )
+      |> Keyword.take([
+        :search,
+        :boostLanguages,
+        :latlon,
+        :distance,
+        :sort,
+        :start,
+        :count,
+        :bbox
+      ])
+      |> Keyword.reject(fn {_key, val} -> is_nil(val) end)
+
+    groups_url = "#{search_endpoint()}#{@search_groups_api}?#{encode(options)}"
+    Logger.debug("Calling global search engine url #{groups_url}")
+
+    client = GenericJSONClient.client()
+
+    case GenericJSONClient.get(client, groups_url) do
+      {:ok, %{status: 200, body: body}} ->
+        %Page{total: body["total"], elements: Enum.map(body["data"], &build_group/1)}
+
+      _ ->
+        nil
+    end
+  end
+
+  @impl Provider
+  @doc """
+  Returns the CSP configuration for this search provider to work
+  """
+  def csp do
+    :mobilizon
+    |> Application.get_env(__MODULE__, [])
+    |> Keyword.get(:csp_policy, [])
+  end
+
+  defp build_event(data) do
+    picture =
+      if data["banner"] do
+        %{url: data["banner"], id: data["banner"]}
+      else
+        nil
+      end
+
+    organizer_actor_avatar =
+      if data["creator"]["avatar"] do
+        %{url: data["creator"]["avatar"], id: data["creator"]["avatar"]}
+      else
+        nil
+      end
+
+    address =
+      if data["location"] do
+        %Address{
+          id: data["location"]["id"],
+          country: data["location"]["address"]["addressCountry"],
+          locality: data["location"]["address"]["addressLocality"],
+          region: data["location"]["address"]["addressRegion"],
+          postal_code: data["location"]["address"]["postalCode"],
+          street: data["location"]["address"]["streetAddress"],
+          url: data["location"]["id"],
+          description: data["location"]["name"],
+          geom: %Geo.Point{
+            coordinates:
+              {data["location"]["location"]["lon"], data["location"]["location"]["lat"]},
+            srid: 4326
+          }
+        }
+      else
+        nil
+      end
+
+    %EventResult{
+      id: data["id"],
+      uuid: data["uuid"],
+      title: data["name"],
+      begins_on: parse_date(data["startTime"]),
+      ends_on: parse_date(data["endTime"]),
+      url: data["url"],
+      picture: picture,
+      category: String.to_existing_atom(String.downcase(data["category"])),
+      organizer_actor: %Actor{
+        id: data["creator"]["id"],
+        name: data["creator"]["displayName"],
+        preferred_username: data["creator"]["name"],
+        avatar: organizer_actor_avatar
+      },
+      physical_address: address,
+      tags:
+        Enum.map(data["tags"], fn tag ->
+          tag = String.trim_leading(tag, "#")
+          %Tag{id: tag, slug: tag, title: tag}
+        end)
+    }
+  end
+
+  defp build_group(data) do
+    avatar =
+      if data["avatar"] do
+        %{url: data["avatar"], id: data["avatar"]}
+      else
+        nil
+      end
+
+    address =
+      if data["location"] do
+        %Address{
+          id: data["location"]["id"],
+          country: data["location"]["address"]["addressCountry"],
+          locality: data["location"]["address"]["addressLocality"],
+          region: data["location"]["address"]["addressRegion"],
+          postal_code: data["location"]["address"]["postalCode"],
+          street: data["location"]["address"]["streetAddress"],
+          url: data["location"]["id"],
+          description: data["location"]["name"],
+          geom: %Geo.Point{
+            coordinates:
+              {data["location"]["location"]["lon"], data["location"]["location"]["lat"]},
+            srid: 4326
+          }
+        }
+      else
+        nil
+      end
+
+    %GroupResult{
+      id: data["id"],
+      name: data["displayName"],
+      preferred_username: data["name"],
+      domain: data["host"],
+      avatar: avatar,
+      summary: data["description"],
+      url: data["url"],
+      members_count: data["memberCount"],
+      type: :Group,
+      physical_address: address
+    }
+  end
+
+  defp search_endpoint do
+    Application.get_env(:mobilizon, __MODULE__) |> get_in([:endpoint]) ||
+      "https://search.joinmobilizon.org"
+  end
+
+  defp parse_date(nil), do: nil
+
+  defp parse_date(date_string) do
+    case DateTime.from_iso8601(date_string) do
+      {:ok, date, _} -> date
+      {:error, _} -> nil
+    end
+  end
+
+  defp to_date(nil), do: nil
+  defp to_date(date), do: DateTime.to_iso8601(date)
+
+  defp to_lat_lon(nil), do: nil
+
+  defp to_lat_lon(location) do
+    {lon, lat} = Geohax.decode(location)
+    "#{lat}:#{lon}"
+  end
+end
diff --git a/lib/service/http/generic_json_client.ex b/lib/service/http/generic_json_client.ex
new file mode 100644
index 000000000..1db2829f1
--- /dev/null
+++ b/lib/service/http/generic_json_client.ex
@@ -0,0 +1,39 @@
+defmodule Mobilizon.Service.HTTP.GenericJSONClient do
+  @moduledoc """
+  Tesla HTTP Client that is preconfigured to get JSON content
+  """
+
+  alias Mobilizon.Config
+
+  @default_opts [
+    recv_timeout: 20_000
+  ]
+
+  @spec client(Keyword.t()) :: Tesla.Client.t()
+  def client(options \\ []) do
+    headers = Keyword.get(options, :headers, [])
+    adapter = Application.get_env(:tesla, __MODULE__, [])[:adapter] || Tesla.Adapter.Hackney
+    opts = Keyword.merge(@default_opts, Keyword.get(options, :opts, []))
+
+    middleware = [
+      {Tesla.Middleware.Headers,
+       [{"User-Agent", Config.instance_user_agent()}] ++
+         headers},
+      Tesla.Middleware.FollowRedirects,
+      {Tesla.Middleware.Timeout, timeout: 10_000},
+      Tesla.Middleware.JSON
+    ]
+
+    Tesla.client(middleware, {adapter, opts})
+  end
+
+  @spec get(Tesla.Client.t(), String.t()) :: Tesla.Env.result()
+  def get(client, url) do
+    Tesla.get(client, url)
+  end
+
+  @spec post(Tesla.Client.t(), String.t(), map() | String.t()) :: Tesla.Env.result()
+  def post(client, url, data) do
+    Tesla.post(client, url, data)
+  end
+end
diff --git a/lib/service/metadata/instance.ex b/lib/service/metadata/instance.ex
index 3372b5821..953453ebe 100644
--- a/lib/service/metadata/instance.ex
+++ b/lib/service/metadata/instance.ex
@@ -44,7 +44,11 @@ defmodule Mobilizon.Service.Metadata.Instance do
       Tag.tag(:meta, property: "og:description", content: description),
       Tag.tag(:meta, property: "og:type", content: "website"),
       HTML.raw(instance_json_ld)
-    ] ++ maybe_add_instance_feeds(Config.get([:instance, :enable_instance_feeds]))
+    ] ++ maybe_add_instance_feeds(enable_instance_feeds())
+  end
+
+  defp enable_instance_feeds do
+    get_in(Application.get_env(:mobilizon, :instance), [:enable_instance_feeds])
   end
 
   @spec maybe_add_instance_feeds(boolean()) :: list()
diff --git a/lib/service/pictures/information.ex b/lib/service/pictures/information.ex
new file mode 100644
index 000000000..40047cf16
--- /dev/null
+++ b/lib/service/pictures/information.ex
@@ -0,0 +1,6 @@
+defmodule Mobilizon.Service.Pictures.Information do
+  @moduledoc """
+  The structure holding information about a picture
+  """
+  defstruct [:url, :author, :source]
+end
diff --git a/lib/service/pictures/pictures.ex b/lib/service/pictures/pictures.ex
new file mode 100644
index 000000000..2c1851f7f
--- /dev/null
+++ b/lib/service/pictures/pictures.ex
@@ -0,0 +1,17 @@
+defmodule Mobilizon.Service.Pictures do
+  @moduledoc """
+  Module to load the service adapter defined inside the configuration.
+
+  See `Mobilizon.Service.Pictures.Provider`.
+  """
+
+  @doc """
+  Returns the appropriate service adapter.
+
+  According to the config behind
+    `config :mobilizon, Mobilizon.Service.Pictures,
+       service: Mobilizon.Service.Pictures.Module`
+  """
+  @spec service :: module
+  def service, do: get_in(Application.get_env(:mobilizon, __MODULE__), [:service])
+end
diff --git a/lib/service/pictures/provider.ex b/lib/service/pictures/provider.ex
new file mode 100644
index 000000000..87f245081
--- /dev/null
+++ b/lib/service/pictures/provider.ex
@@ -0,0 +1,39 @@
+defmodule Mobilizon.Service.Pictures.Provider do
+  @moduledoc """
+  Provider Behaviour for pictures stuff.
+
+  ## Supported backends
+
+    * `Mobilizon.Service.Pictures.Unsplash` [🔗](https://unsplash.com/developers)
+    * `Mobilizon.Service.Pictures.Flickr` [🔗](https://www.flickr.com/services/api/)
+
+  ## Shared options
+
+    * `:lang` Lang in which to prefer results. Used as a request parameter or
+      through an `Accept-Language` HTTP header. Defaults to `"en"`.
+    * `:country_code` An ISO 3166 country code. String or `nil`
+    * `:limit` Maximum limit for the number of results returned by the backend.
+      Defaults to `10`
+    * `:api_key` Allows to override the API key (if the backend requires one) set
+      inside the configuration.
+    * `:endpoint` Allows to override the endpoint set inside the configuration.
+  """
+
+  alias Mobilizon.Service.Pictures.Information
+
+  @doc """
+  Get a picture for a location
+
+  ## Examples
+
+      iex> search("London")
+      %Information{url: "https://some_url_to.a/picture.jpeg", author: %{name: "An author", url: "https://url.to/profile"}, source: %{name: "The source name", url: "The source URL" }}
+  """
+  @callback search(location :: String.t(), options :: keyword) ::
+              [Information.t()]
+
+  @spec endpoint(atom()) :: String.t()
+  def endpoint(provider) do
+    Application.get_env(:mobilizon, provider) |> get_in([:endpoint])
+  end
+end
diff --git a/lib/service/pictures/unsplash.ex b/lib/service/pictures/unsplash.ex
new file mode 100644
index 000000000..2a6b2f1b4
--- /dev/null
+++ b/lib/service/pictures/unsplash.ex
@@ -0,0 +1,65 @@
+defmodule Mobilizon.Service.Pictures.Unsplash do
+  @moduledoc """
+  [Unsplash](https://unsplash.com) backend.
+  """
+
+  alias Mobilizon.Service.HTTP.GenericJSONClient
+  alias Mobilizon.Service.Pictures.{Information, Provider}
+  require Logger
+
+  @unsplash_api "/search/photos"
+  @unsplash_name "Unsplash"
+
+  @behaviour Provider
+
+  @impl Provider
+  @doc """
+  Unsplash implementation for `c:Mobilizon.Service.Geospatial.Provider.geocode/3`.
+  """
+  @spec search(String.t(), keyword()) :: list(Information.t())
+  def search(location, _options \\ []) do
+    url = "#{unsplash_endpoint()}#{@unsplash_api}?query=#{location}&orientation=landscape"
+
+    client =
+      GenericJSONClient.client(headers: [{:Authorization, "Client-ID #{unsplash_access_key()}"}])
+
+    with {:ok, %{status: 200, body: body}} <- GenericJSONClient.get(client, url),
+         selected_picture <- Enum.random(body["results"]) do
+      %Information{
+        url: selected_picture["urls"]["small"],
+        author: %{
+          name: selected_picture["user"]["name"],
+          url: "#{selected_picture["user"]["links"]["html"]}#{unsplash_utm_source()}"
+        },
+        source: %{
+          name: @unsplash_name,
+          url: unsplash_url()
+        }
+      }
+    else
+      _ ->
+        nil
+    end
+  end
+
+  defp unsplash_app_name do
+    Application.get_env(:mobilizon, __MODULE__) |> get_in([:app_name])
+  end
+
+  defp unsplash_utm_source do
+    "?utm_source=#{unsplash_app_name()}&utm_medium=referral"
+  end
+
+  defp unsplash_url do
+    "https://unsplash.com/#{unsplash_utm_source()}"
+  end
+
+  defp unsplash_endpoint do
+    Application.get_env(:mobilizon, __MODULE__) |> get_in([:endpoint]) ||
+      "https://api.unsplash.com"
+  end
+
+  defp unsplash_access_key do
+    Application.get_env(:mobilizon, __MODULE__) |> get_in([:access_key])
+  end
+end
diff --git a/lib/service/statistics/statistics.ex b/lib/service/statistics/statistics.ex
index 6d3e21363..51ee216aa 100644
--- a/lib/service/statistics/statistics.ex
+++ b/lib/service/statistics/statistics.ex
@@ -4,6 +4,7 @@ defmodule Mobilizon.Service.Statistics do
   """
 
   alias Mobilizon.{Actors, Discussions, Events, Users}
+  alias Mobilizon.Events.Categories
   alias Mobilizon.Federation.ActivityPub.Relay
 
   @spec get_cached_value(String.t()) :: any() | nil
@@ -60,4 +61,23 @@ defmodule Mobilizon.Service.Statistics do
     relay_actor = Relay.get_actor()
     Actors.count_followings_for_actor(relay_actor)
   end
+
+  @spec category_statistics :: list({String.t(), non_neg_integer()})
+  def category_statistics do
+    case Cachex.fetch(:statistics, :categories, fn ->
+           allowed_categories =
+             Categories.list()
+             |> Enum.map(fn %{id: category} -> category |> Atom.to_string() |> String.upcase() end)
+
+           statistics =
+             Events.category_statistics()
+             |> Enum.filter(fn {category, _} -> category in allowed_categories end)
+             |> Enum.map(fn {category, number} -> %{key: category, number: number} end)
+
+           {:commit, statistics}
+         end) do
+      {status, value} when status in [:ok, :commit] -> value
+      _err -> nil
+    end
+  end
 end
diff --git a/lib/service/unplug_predicates/app_config_keyword_equals.ex b/lib/service/unplug_predicates/app_config_keyword_equals.ex
new file mode 100644
index 000000000..7c9cd286a
--- /dev/null
+++ b/lib/service/unplug_predicates/app_config_keyword_equals.ex
@@ -0,0 +1,20 @@
+defmodule Mobilizon.Service.UnplugPredicates.AppConfigKeywordEquals do
+  @moduledoc """
+  Given an application and a key, execute the plug if the configured value
+  matches the expected value.
+  Usage:
+  ```elixir
+  plug Unplug,
+    if: {Unplug.Predicates.AppConfigEquals, {:my_app, :some_config, :enabled}},
+    do: MyApp.Plug
+  ```
+  """
+
+  @behaviour Unplug.Predicate
+
+  @impl true
+  def call(_conn, {app, key, keyword_key, keyword_default_value, expected_value}) do
+    app |> Application.get_env(key) |> Keyword.get(keyword_key, keyword_default_value) ==
+      expected_value
+  end
+end
diff --git a/lib/web/controllers/auth_controller.ex b/lib/web/controllers/auth_controller.ex
index 014a112b7..2f743d774 100644
--- a/lib/web/controllers/auth_controller.ex
+++ b/lib/web/controllers/auth_controller.ex
@@ -8,12 +8,10 @@ defmodule Mobilizon.Web.AuthController do
   require Logger
   plug(:put_layout, false)
 
-  config = Application.get_env(:mobilizon, Mobilizon.Web.Endpoint, [])
-
   plug(Plug.Session,
     store: :cookie,
     key: "_auth_callback",
-    signing_salt: Keyword.get(config, :secret_key_base)
+    signing_salt: {Mobilizon.Web.AuthController, :secret_key_base, []}
   )
 
   plug(Ueberauth)
@@ -142,4 +140,10 @@ defmodule Mobilizon.Web.AuthController do
   defp redirect_to_error(conn, :unknown_error, provider_name) do
     redirect(conn, to: "/login?code=Error with Login Provider&provider=#{provider_name}")
   end
+
+  def secret_key_base do
+    :mobilizon
+    |> Application.get_env(Mobilizon.Web.Endpoint, [])
+    |> Keyword.get(:secret_key_base)
+  end
 end
diff --git a/lib/web/endpoint.ex b/lib/web/endpoint.ex
index fe82f4e58..e3ca1ace4 100644
--- a/lib/web/endpoint.ex
+++ b/lib/web/endpoint.ex
@@ -3,8 +3,7 @@ defmodule Mobilizon.Web.Endpoint do
   Endpoint for Mobilizon app
   """
 
-  if Application.fetch_env!(:mobilizon, :env) !== :test &&
-       Application.get_env(:sentry, :dsn) != nil do
+  if Application.compile_env(:mobilizon, :env) !== :test do
     use Sentry.PlugCapture
   end
 
@@ -13,7 +12,7 @@ defmodule Mobilizon.Web.Endpoint do
 
   plug(Mobilizon.Web.Plugs.DetectLocalePlug)
 
-  if Application.fetch_env!(:mobilizon, :env) !== :dev do
+  if Application.compile_env(:mobilizon, :env) !== :dev do
     plug(Mobilizon.Web.Plugs.HTTPSecurityPlug)
   end
 
@@ -31,11 +30,12 @@ defmodule Mobilizon.Web.Endpoint do
     longpoll: false
   )
 
-  endpoint_config = Application.get_env(:mobilizon, Mobilizon.Web.Endpoint)
-
-  if Keyword.get(endpoint_config, :has_reverse_proxy, false) == true do
-    plug(RemoteIp)
-  end
+  plug(Unplug,
+    if:
+      {Mobilizon.Service.UnplugPredicates.AppConfigKeywordEquals,
+       {:mobilizon, Mobilizon.Web.Endpoint, :has_reverse_proxy, false, true}},
+    do: RemoteIp
+  )
 
   plug(Mobilizon.Web.Plugs.UploadedMedia)
 
@@ -65,7 +65,7 @@ defmodule Mobilizon.Web.Endpoint do
   plug(Plug.Logger)
 
   upload_limit =
-    Keyword.get(Application.get_env(:mobilizon, :instance, []), :upload_limit, 10_485_760)
+    Keyword.get(Application.compile_env(:mobilizon, :instance, []), :upload_limit, 10_485_760)
 
   plug(
     Plug.Parsers,
@@ -83,8 +83,7 @@ defmodule Mobilizon.Web.Endpoint do
     String.replace_leading(url(), "http", "ws")
   end
 
-  if Application.fetch_env!(:mobilizon, :env) !== :test &&
-       Application.get_env(:sentry, :dsn) != nil do
+  if Application.compile_env(:mobilizon, :env) !== :test do
     plug(Sentry.PlugContext)
   end
 end
diff --git a/lib/web/plugs/http_security_plug.ex b/lib/web/plugs/http_security_plug.ex
index 9345d8bc4..b18c85d14 100644
--- a/lib/web/plugs/http_security_plug.ex
+++ b/lib/web/plugs/http_security_plug.ex
@@ -10,6 +10,7 @@ defmodule Mobilizon.Web.Plugs.HTTPSecurityPlug do
 
   alias Mobilizon.Config
   alias Mobilizon.Service.FrontEndAnalytics
+  alias Mobilizon.Service.GlobalSearch
   import Plug.Conn
 
   require Logger
@@ -139,7 +140,8 @@ defmodule Mobilizon.Web.Plugs.HTTPSecurityPlug do
   defp get_csp_config(type, options) do
     config_policy = Keyword.get(options, type, Config.get([:http_security, :csp_policy, type]))
     front_end_analytics_policy = [Keyword.get(FrontEndAnalytics.csp(), type, [])]
+    global_search_policy = [Keyword.get(GlobalSearch.service().csp(), type, [])]
 
-    Enum.join(config_policy ++ front_end_analytics_policy, " ")
+    Enum.join(config_policy ++ front_end_analytics_policy ++ global_search_policy, " ")
   end
 end
diff --git a/lib/web/proxy/reverse_proxy.ex b/lib/web/proxy/reverse_proxy.ex
index 7f6bde749..940ae9e16 100644
--- a/lib/web/proxy/reverse_proxy.ex
+++ b/lib/web/proxy/reverse_proxy.ex
@@ -83,8 +83,6 @@ defmodule Mobilizon.Web.ReverseProxy do
           | {:inline_content_types, boolean | [String.t()]}
           | {:redirect_on_failure, boolean}
 
-  @hackney Application.get_env(:mobilizon, :hackney, :hackney)
-
   @default_hackney_options []
 
   @inline_content_types [
@@ -171,7 +169,7 @@ defmodule Mobilizon.Web.ReverseProxy do
     Logger.debug("#{__MODULE__} #{method} #{url} #{inspect(headers)}")
     method = method |> String.downcase() |> String.to_existing_atom()
 
-    case @hackney.request(method, url, headers, "", hackney_opts) do
+    case hackney().request(method, url, headers, "", hackney_opts) do
       {:ok, code, headers, client} when code in @valid_resp_codes ->
         {:ok, code, downcase_headers(headers), client}
 
@@ -231,7 +229,7 @@ defmodule Mobilizon.Web.ReverseProxy do
              duration,
              Keyword.get(opts, :max_read_duration, @max_read_duration)
            ),
-         {:ok, data} <- @hackney.stream_body(client),
+         {:ok, data} <- hackney().stream_body(client),
          {:ok, duration} <- increase_read_duration({duration, now}),
          sent_so_far = sent_so_far + byte_size(data),
          :ok <- body_size_constraint(sent_so_far, Keyword.get(opts, :max_body_size)),
@@ -452,4 +450,8 @@ defmodule Mobilizon.Web.ReverseProxy do
     uri = URI.parse(url)
     uri.scheme != nil && uri.host =~ "."
   end
+
+  defp hackney do
+    Application.get_env(:mobilizon, :hackney, :hackney)
+  end
 end
diff --git a/lib/web/router.ex b/lib/web/router.ex
index a7e400160..0ec8c53c2 100644
--- a/lib/web/router.ex
+++ b/lib/web/router.ex
@@ -212,7 +212,7 @@ defmodule Mobilizon.Web.Router do
     get("/:sig/:url/:filename", MediaProxyController, :remote)
   end
 
-  if Application.fetch_env!(:mobilizon, :env) in [:dev, :e2e] do
+  if Application.compile_env(:mobilizon, :env) in [:dev, :e2e] do
     # If using Phoenix
     forward("/sent_emails", Plug.Swoosh.MailboxPreview)
   end
diff --git a/lib/web/templates/email/activity/_comment_activity_item.html.heex b/lib/web/templates/email/activity/_comment_activity_item.html.heex
index 26ac07c66..5da7aa527 100644
--- a/lib/web/templates/email/activity/_comment_activity_item.html.heex
+++ b/lib/web/templates/email/activity/_comment_activity_item.html.heex
@@ -2,9 +2,10 @@
   <% :event_comment_mention -> %>
     <%= dgettext("activity", "%{profile} mentionned you in a comment under event %{event}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :event,
-      @activity.subject_params["event_uuid"]) |> URI.decode()}\">
+      event:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :event,
+        @activity.subject_params["event_uuid"]) |> URI.decode()}\">
                             #{@activity.subject_params["event_title"]}
                         </a>"
     })
@@ -12,9 +13,10 @@
   <% :participation_event_comment -> %>
     <%= dgettext("activity", "%{profile} has posted an announcement under event %{event}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :event,
-      @activity.subject_params["event_uuid"]) |> URI.decode()}\">
+      event:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :event,
+        @activity.subject_params["event_uuid"]) |> URI.decode()}\">
                             #{@activity.subject_params["event_title"]}
                         </a>"
     })
@@ -23,9 +25,10 @@
     <%= if @activity.subject_params["comment_reply_to"] do %>
       <%= dgettext("activity", "%{profile} has posted a new reply under your event %{event}.", %{
         profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-        event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-        :event,
-        @activity.subject_params["event_uuid"]) |> URI.decode()}#comment-#{@activity.subject_params["comment_reply_to_uuid"]}-#{@activity.subject_params["comment_uuid"]}\">
+        event:
+          "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+          :event,
+          @activity.subject_params["event_uuid"]) |> URI.decode()}#comment-#{@activity.subject_params["comment_reply_to_uuid"]}-#{@activity.subject_params["comment_uuid"]}\">
                                 #{@activity.subject_params["event_title"]}
                             </a>"
       })
@@ -36,9 +39,10 @@
         "%{profile} has posted a new comment under your event %{event}.",
         %{
           profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-          event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-          :event,
-          @activity.subject_params["event_uuid"]) |> URI.decode()}#comment-#{@activity.subject_params["comment_uuid"]}\">
+          event:
+            "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+            :event,
+            @activity.subject_params["event_uuid"]) |> URI.decode()}#comment-#{@activity.subject_params["comment_uuid"]}\">
                                 #{@activity.subject_params["event_title"]}
                             </a>"
         }
diff --git a/lib/web/templates/email/activity/_event_activity_item.html.heex b/lib/web/templates/email/activity/_event_activity_item.html.heex
index 9266fc6d0..ef371381f 100644
--- a/lib/web/templates/email/activity/_event_activity_item.html.heex
+++ b/lib/web/templates/email/activity/_event_activity_item.html.heex
@@ -2,9 +2,10 @@
   <% :event_created -> %>
     <%= dgettext("activity", "The event %{event} was created by %{profile}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :event,
-      @activity.subject_params["event_uuid"]) |> URI.decode()}\">
+      event:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :event,
+        @activity.subject_params["event_uuid"]) |> URI.decode()}\">
                             #{@activity.subject_params["event_title"]}
                         </a>"
     })
@@ -12,9 +13,10 @@
   <% :event_updated -> %>
     <%= dgettext("activity", "The event %{event} was updated by %{profile}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :event,
-      @activity.subject_params["event_uuid"]) |> URI.decode()}\">
+      event:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :event,
+        @activity.subject_params["event_uuid"]) |> URI.decode()}\">
                             #{@activity.subject_params["event_title"]}
                         </a>"
     })
@@ -29,9 +31,10 @@
     <%= if @activity.subject_params["comment_reply_to"] do %>
       <%= dgettext("activity", "%{profile} replied to a comment on the event %{event}.", %{
         profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-        event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-        :event,
-        @activity.subject_params["event_uuid"]) |> URI.decode()}\">
+        event:
+          "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+          :event,
+          @activity.subject_params["event_uuid"]) |> URI.decode()}\">
                             #{@activity.subject_params["event_title"]}
                         </a>"
       })
@@ -39,9 +42,10 @@
     <% else %>
       <%= dgettext("activity", "%{profile} posted a comment on the event %{event}.", %{
         profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-        event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-        :event,
-        @activity.subject_params["event_uuid"]) |> URI.decode()}\">
+        event:
+          "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+          :event,
+          @activity.subject_params["event_uuid"]) |> URI.decode()}\">
                             #{@activity.subject_params["event_title"]}
                         </a>"
       })
diff --git a/lib/web/templates/email/activity/_group_activity_item.html.heex b/lib/web/templates/email/activity/_group_activity_item.html.heex
index c428b4696..ad4318f93 100644
--- a/lib/web/templates/email/activity/_group_activity_item.html.heex
+++ b/lib/web/templates/email/activity/_group_activity_item.html.heex
@@ -2,9 +2,10 @@
   <% :group_created -> %>
     <%= dgettext("activity", "%{profile} created the group %{group}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      group: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :actor,
-      @activity.subject_params["group_federated_username"]) |> URI.decode()}\">
+      group:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :actor,
+        @activity.subject_params["group_federated_username"]) |> URI.decode()}\">
                             #{@activity.subject_params["group_name"]}
                         </a>"
     })
@@ -12,9 +13,10 @@
   <% :group_updated -> %>
     <%= dgettext("activity", "%{profile} updated the group %{group}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      group: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :actor,
-      @activity.subject_params["group_federated_username"]) |> URI.decode()}\">
+      group:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :actor,
+        @activity.subject_params["group_federated_username"]) |> URI.decode()}\">
                             #{@activity.subject_params["group_name"]}
                         </a>"
     })
diff --git a/lib/web/templates/email/activity/_member_activity_item.html.heex b/lib/web/templates/email/activity/_member_activity_item.html.heex
index ae34bfdd8..807023200 100644
--- a/lib/web/templates/email/activity/_member_activity_item.html.heex
+++ b/lib/web/templates/email/activity/_member_activity_item.html.heex
@@ -32,6 +32,12 @@
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>"
     })
     |> raw %>
+  <% :member_approved -> %>
+    <%= dgettext("activity", "%{profile} approved the member %{member}.", %{
+      member: "<b>#{@activity.subject_params["member_actor_name"]}</b>",
+      profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>"
+    })
+    |> raw %>
   <% :member_updated -> %>
     <%= dgettext("activity", "%{profile} updated the member %{member}.", %{
       member: "<b>#{@activity.subject_params["member_actor_name"]}</b>",
diff --git a/lib/web/templates/email/activity/_member_activity_item.text.eex b/lib/web/templates/email/activity/_member_activity_item.text.eex
index 985b2122c..fa1d676a3 100644
--- a/lib/web/templates/email/activity/_member_activity_item.text.eex
+++ b/lib/web/templates/email/activity/_member_activity_item.text.eex
@@ -30,6 +30,12 @@
         profile: Mobilizon.Actors.Actor.display_name_and_username(@activity.author),
     }
 ) %>
+<% :member_approved -> %><%= dgettext("activity", "%{profile} approved the member %{member}.",
+    %{
+        member: @activity.subject_params["member_actor_name"],
+        profile: Mobilizon.Actors.Actor.display_name_and_username(@activity.author),
+    }
+) %>
 <% :member_updated -> %><%= dgettext("activity", "%{profile} updated the member %{member}.", 
     %{
         member: @activity.subject_params["member_actor_name"],
diff --git a/lib/web/templates/email/activity/_post_activity_item.html.heex b/lib/web/templates/email/activity/_post_activity_item.html.heex
index 1d4e9adc0..e9e3369ea 100644
--- a/lib/web/templates/email/activity/_post_activity_item.html.heex
+++ b/lib/web/templates/email/activity/_post_activity_item.html.heex
@@ -2,9 +2,10 @@
   <% :post_created -> %>
     <%= dgettext("activity", "The post %{post} was created by %{profile}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      post: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :post,
-      @activity.subject_params["post_slug"]) |> URI.decode()}\">
+      post:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :post,
+        @activity.subject_params["post_slug"]) |> URI.decode()}\">
                             #{@activity.subject_params["post_title"]}
                         </a>"
     })
@@ -12,9 +13,10 @@
   <% :post_updated -> %>
     <%= dgettext("activity", "The post %{post} was updated by %{profile}.", %{
       profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-      post: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-      :post,
-      @activity.subject_params["post_slug"]) |> URI.decode()}\">
+      post:
+        "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+        :post,
+        @activity.subject_params["post_slug"]) |> URI.decode()}\">
                             #{@activity.subject_params["post_title"]}
                         </a>"
     })
diff --git a/lib/web/templates/email/activity/_resource_activity_item.html.heex b/lib/web/templates/email/activity/_resource_activity_item.html.heex
index 955cb275b..27915b9b0 100644
--- a/lib/web/templates/email/activity/_resource_activity_item.html.heex
+++ b/lib/web/templates/email/activity/_resource_activity_item.html.heex
@@ -3,9 +3,10 @@
     <%= if @activity.subject_params["is_folder"] do %>
       <%= dgettext("activity", "%{profile} created the folder %{resource}.", %{
         profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-        resource: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-        :resource,
-        @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
+        resource:
+          "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+          :resource,
+          @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
                                 #{@activity.subject_params["resource_title"]}
                             </a>"
       })
@@ -13,9 +14,10 @@
     <% else %>
       <%= dgettext("activity", "%{profile} created the resource %{resource}.", %{
         profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-        resource: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-        :resource,
-        @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
+        resource:
+          "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+          :resource,
+          @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
                                 #{@activity.subject_params["resource_title"]}
                             </a>"
       })
@@ -28,9 +30,10 @@
         "%{profile} renamed the folder from %{old_resource_title} to %{resource}.",
         %{
           profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-          resource: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-          :resource,
-          @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
+          resource:
+            "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+            :resource,
+            @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
                                 #{@activity.subject_params["resource_title"]}
                             </a>",
           old_resource_title: "<b>#{@activity.subject_params["old_resource_title"]}</b>"
@@ -43,9 +46,10 @@
         "%{profile} renamed the resource from %{old_resource_title} to %{resource}.",
         %{
           profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-          resource: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-          :resource,
-          @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
+          resource:
+            "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+            :resource,
+            @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
                                 #{@activity.subject_params["resource_title"]}
                             </a>",
           old_resource_title: "<b>#{@activity.subject_params["old_resource_title"]}</b>"
@@ -57,9 +61,10 @@
     <%= if @activity.subject_params["is_folder"] do %>
       <%= dgettext("activity", "%{profile} moved the folder %{resource}.", %{
         profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-        resource: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-        :resource,
-        @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
+        resource:
+          "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+          :resource,
+          @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
                                 #{@activity.subject_params["resource_title"]}
                             </a>"
       })
@@ -67,9 +72,10 @@
     <% else %>
       <%= dgettext("activity", "%{profile} moved the resource %{resource}.", %{
         profile: "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-        resource: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-        :resource,
-        @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
+        resource:
+          "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+          :resource,
+          @activity.subject_params["resource_uuid"]) |> URI.decode()}\">
                                 #{@activity.subject_params["resource_title"]}
                             </a>"
       })
diff --git a/lib/web/templates/email/date/event_tz_date_range.text.eex b/lib/web/templates/email/date/event_tz_date_range.text.eex
index a930cae70..82cdf3479 100644
--- a/lib/web/templates/email/date/event_tz_date_range.text.eex
+++ b/lib/web/templates/email/date/event_tz_date_range.text.eex
@@ -1 +1 @@
-<%= cond do %><%= @end_date == nil -> %><%= render("date/event_tz_date.text", date: @start_date, event: @event, timezone: @timezone, locale: @locale) %><% is_same_day?(@start_date, @end_date) -> %><%= gettext "On %{date} from %{start_time} to %{end_time}", date: datetime_to_date_string(@start_date, @locale), start_time: datetime_to_time_string(@start_date, @locale), end_time: datetime_to_time_string(@end_date, @locale) %><%= if @event.options.timezone != @timezone do %> <%= gettext "🌐 %{timezone} %{offset}", timezone: @event.options.timezone, offset: Cldr.DateTime.Formatter.zone_gmt(@start_date) %><% end %><% true -> %><%= gettext "From the %{start} to the %{end}", start: datetime_to_string(@start_date, @locale, :short), end: datetime_to_string(@end_date, @locale, :short) %><%= if @event.options.timezone != @timezone do %> <%= gettext "🌐 %{timezone} %{offset}", timezone: @event.options.timezone, offset: Cldr.DateTime.Formatter.zone_gmt(@start_date) %><% end %><% end %>
+<%= cond do %><% @end_date == nil -> %><%= render("date/event_tz_date.text", date: @start_date, event: @event, timezone: @timezone, locale: @locale) %><% is_same_day?(@start_date, @end_date) -> %><%= gettext "On %{date} from %{start_time} to %{end_time}", date: datetime_to_date_string(@start_date, @locale), start_time: datetime_to_time_string(@start_date, @locale), end_time: datetime_to_time_string(@end_date, @locale) %><%= if @event.options.timezone != @timezone do %> <%= gettext "🌐 %{timezone} %{offset}", timezone: @event.options.timezone, offset: Cldr.DateTime.Formatter.zone_gmt(@start_date) %><% end %><% true -> %><%= gettext "From the %{start} to the %{end}", start: datetime_to_string(@start_date, @locale, :short), end: datetime_to_string(@end_date, @locale, :short) %><%= if @event.options.timezone != @timezone do %> <%= gettext "🌐 %{timezone} %{offset}", timezone: @event.options.timezone, offset: Cldr.DateTime.Formatter.zone_gmt(@start_date) %><% end %><% end %>
diff --git a/lib/web/templates/email/email_anonymous_activity.html.heex b/lib/web/templates/email/email_anonymous_activity.html.heex
index 00fed2939..9687b0dc3 100644
--- a/lib/web/templates/email/email_anonymous_activity.html.heex
+++ b/lib/web/templates/email/email_anonymous_activity.html.heex
@@ -51,9 +51,10 @@
                   %{
                     profile:
                       "<b>#{Mobilizon.Actors.Actor.display_name_and_username(@activity.author)}</b>",
-                    event: "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
-                    :event,
-                    @activity.subject_params["event_uuid"]) |> URI.decode()}\">
+                    event:
+                      "<a href=\"#{Routes.page_url(Mobilizon.Web.Endpoint,
+                      :event,
+                      @activity.subject_params["event_uuid"]) |> URI.decode()}\">
                                 #{@activity.subject_params["event_title"]}
                             </a>"
                   }
diff --git a/lib/web/templates/page/index.html.heex b/lib/web/templates/page/index.html.heex
new file mode 100644
index 000000000..688ed8cf4
--- /dev/null
+++ b/lib/web/templates/page/index.html.heex
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang={Map.get(assigns, :locale, "en")} dir={language_direction(assigns)}>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png" sizes="152x152" />
+    <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color={theme_color()} />
+    <meta name="theme-color" content={theme_color()} />
+    <%= tags(assigns) || assigns.tags %>
+    <%= Vite.inlined_phx_manifest() %>
+    <%= Vite.vite_client() %>
+    <%= Vite.vite_snippet("src/main.ts") %>
+  </head>
+  <body>
+    <noscript>
+      <strong>
+        We're sorry but Mobilizon doesn't work properly without JavaScript enabled. Please enable it to continue.
+      </strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/lib/web/views/auth_view.ex b/lib/web/views/auth_view.ex
index eeedd2ca2..3ff847669 100644
--- a/lib/web/views/auth_view.ex
+++ b/lib/web/views/auth_view.ex
@@ -5,16 +5,24 @@ defmodule Mobilizon.Web.AuthView do
 
   use Mobilizon.Web, :view
   alias Mobilizon.Service.Metadata.Instance
+  alias Mobilizon.Web.PageView
   alias Phoenix.HTML.Tag
-  import Mobilizon.Web.Views.Utils
 
   @spec render(String.t(), map()) :: String.t() | Plug.Conn.t()
-  def render("callback.html", %{
-        conn: conn,
-        access_token: access_token,
-        refresh_token: refresh_token,
-        user: %{id: user_id, email: user_email, role: user_role, default_actor_id: user_actor_id}
-      }) do
+  def render(
+        "callback.html",
+        %{
+          conn: _conn,
+          access_token: access_token,
+          refresh_token: refresh_token,
+          user: %{
+            id: user_id,
+            email: user_email,
+            role: user_role,
+            default_actor_id: user_actor_id
+          }
+        } = assigns
+      ) do
     info_tags = [
       Tag.tag(:meta, name: "auth-access-token", content: access_token),
       Tag.tag(:meta, name: "auth-refresh-token", content: refresh_token),
@@ -25,11 +33,8 @@ defmodule Mobilizon.Web.AuthView do
     ]
 
     with tags <- Instance.build_tags() ++ info_tags,
-         {:ok, html} <- inject_tags(tags, get_locale(conn)) do
-      html
-    else
-      {:error, error} ->
-        return_error(conn, error)
+         assigns <- Map.put(assigns, :tags, tags) do
+      PageView.render("index.html", assigns)
     end
   end
 end
diff --git a/lib/web/views/error_view.ex b/lib/web/views/error_view.ex
index 28e8096e3..73d5eec8a 100644
--- a/lib/web/views/error_view.ex
+++ b/lib/web/views/error_view.ex
@@ -3,18 +3,11 @@ defmodule Mobilizon.Web.ErrorView do
   View for errors
   """
   use Mobilizon.Web, :view
-  alias Mobilizon.Service.Metadata.Instance
-  import Mobilizon.Web.Views.Utils
+  alias Mobilizon.Web.PageView
 
   @spec render(String.t(), map()) :: map() | String.t() | Plug.Conn.t()
-  def render("404.html", %{conn: conn}) do
-    with tags <- Instance.build_tags(),
-         {:ok, html} <- inject_tags(tags, get_locale(conn)) do
-      html
-    else
-      {:error, error} ->
-        return_error(conn, error)
-    end
+  def render("404.html", _assigns) do
+    PageView.render("index.html")
   end
 
   def render("404.json", _assigns) do
diff --git a/lib/web/views/json_ld/object_view.ex b/lib/web/views/json_ld/object_view.ex
index a4aa282b0..3e61880f6 100644
--- a/lib/web/views/json_ld/object_view.ex
+++ b/lib/web/views/json_ld/object_view.ex
@@ -176,6 +176,7 @@ defmodule Mobilizon.Web.JsonLD.ObjectView do
     []
     |> render_location(event)
     |> render_virtual_location(event)
+    |> maybe_render_single_element()
   end
 
   @spec render_location(list(), map()) :: list()
@@ -207,6 +208,10 @@ defmodule Mobilizon.Web.JsonLD.ObjectView do
 
   defp render_virtual_location(locations, _), do: locations
 
+  @spec maybe_render_single_element(list(map())) :: list(map()) | map()
+  defp maybe_render_single_element([location]), do: location
+  defp maybe_render_single_element(locations), do: locations
+
   defp render_address(%{physical_address: %Address{} = address}),
     do: render_one(address, ObjectView, "address.json", as: :address)
 
diff --git a/lib/web/views/page_view.ex b/lib/web/views/page_view.ex
index 7c040bd9a..c7badebfe 100644
--- a/lib/web/views/page_view.ex
+++ b/lib/web/views/page_view.ex
@@ -63,28 +63,27 @@ defmodule Mobilizon.Web.PageView do
     |> Map.merge(Utils.make_json_ld_header())
   end
 
-  def render(page, %{object: object, conn: conn} = _assigns)
+  def render(page, %{object: object, conn: conn} = assigns)
       when page in ["actor.html", "event.html", "comment.html", "post.html"] do
     with locale <- get_locale(conn),
          tags <- object |> Metadata.build_tags(locale),
-         {:ok, html} <- inject_tags(tags, locale) do
-      html
-    else
-      {:error, error} ->
-        return_error(conn, error)
+         assigns <- Map.put(assigns, :tags, tags) do
+      render("index.html", assigns)
     end
   end
 
   # Discussions are private, no need to embed metadata
   def render("discussion.html", params), do: render("index.html", params)
 
-  def render("index.html", %{conn: conn}) do
-    with tags <- Instance.build_tags(),
-         {:ok, html} <- inject_tags(tags, get_locale(conn)) do
-      html
-    else
-      {:error, error} ->
-        return_error(conn, error)
-    end
+  def tags(assigns) do
+    Map.get(assigns, :tags, Instance.build_tags())
+  end
+
+  def theme_color do
+    "#ffd599"
+  end
+
+  def language_direction(assigns) do
+    assigns |> Map.get(:locale, "en") |> get_language_direction()
   end
 end
diff --git a/lib/web/views/utils.ex b/lib/web/views/utils.ex
index 1ecb6219a..3003324ef 100644
--- a/lib/web/views/utils.ex
+++ b/lib/web/views/utils.ex
@@ -3,58 +3,6 @@ defmodule Mobilizon.Web.Views.Utils do
   Utils for views
   """
 
-  alias Mobilizon.Service.Metadata.Utils, as: MetadataUtils
-  import Mobilizon.Web.Gettext, only: [dgettext: 2]
-  import Plug.Conn, only: [put_status: 2, halt: 1]
-
-  # sobelow_skip ["Traversal.FileModule"]
-  @spec inject_tags(Enum.t(), String.t()) :: {:ok, {:safe, String.t()}} | {:error, atom()}
-  def inject_tags(tags, locale \\ "en") do
-    with path <- Path.join(Application.app_dir(:mobilizon, "priv/static"), "index.html"),
-         {:exists, true} <- {:exists, File.exists?(path)},
-         {:ok, index_content} <- File.read(path),
-         safe <- do_replacements(index_content, MetadataUtils.stringify_tags(tags), locale) do
-      {:ok, {:safe, safe}}
-    else
-      {:exists, false} -> {:error, :index_not_found}
-      {:error, error} when is_atom(error) -> {:error, error}
-    end
-  end
-
-  @spec return_error(Plug.Conn.t(), atom()) :: Plug.Conn.t()
-  def return_error(conn, error) do
-    conn
-    |> put_status(500)
-    |> Phoenix.Controller.put_view(Mobilizon.Web.ErrorView)
-    |> Phoenix.Controller.render("500.html", %{details: details(error)})
-    |> halt()
-  end
-
-  defp details(:index_not_found) do
-    [dgettext("errors", "Index file not found. You need to recompile the front-end.")]
-  end
-
-  defp details(_) do
-    []
-  end
-
-  @spec replace_meta(String.t(), String.t()) :: String.t()
-  defp replace_meta(index_content, tags) do
-    index_content
-    |> String.replace("<meta name=\"server-injected-data\"/>", tags)
-    |> String.replace("<meta name=\"server-injected-data\" />", tags)
-  end
-
-  @spec do_replacements(String.t(), String.t(), String.t()) :: String.t()
-  defp do_replacements(index_content, tags, locale) do
-    index_content
-    |> replace_meta(tags)
-    |> String.replace(
-      ~s(<html lang="en" dir="auto">),
-      ~s(<html lang="#{locale}" dir="#{get_language_direction(locale)}">)
-    )
-  end
-
   @spec get_locale(Plug.Conn.t()) :: String.t()
   def get_locale(%Plug.Conn{assigns: assigns}) do
     Map.get(assigns, :locale)
@@ -63,6 +11,6 @@ defmodule Mobilizon.Web.Views.Utils do
   @ltr_languages ["ar", "ae", "he", "fa", "ku", "ur"]
 
   @spec get_language_direction(String.t()) :: String.t()
-  defp get_language_direction(locale) when locale in @ltr_languages, do: "rtl"
-  defp get_language_direction(_locale), do: "ltr"
+  def get_language_direction(locale) when locale in @ltr_languages, do: "rtl"
+  def get_language_direction(_locale), do: "ltr"
 end
diff --git a/mix.exs b/mix.exs
index 1987807d6..b50f45c96 100644
--- a/mix.exs
+++ b/mix.exs
@@ -9,7 +9,7 @@ defmodule Mobilizon.Mixfile do
       version: @version,
       elixir: "~> 1.12",
       elixirc_paths: elixirc_paths(Mix.env()),
-      compilers: [:gettext] ++ Mix.compilers(),
+      compilers: Mix.compilers(),
       xref: [exclude: [:eldap]],
       start_permanent: Mix.env() == :prod,
       aliases: aliases(),
@@ -163,11 +163,11 @@ defmodule Mobilizon.Mixfile do
       {:plug_cowboy, "~> 2.0"},
       {:atomex, "~> 0.4"},
       {:cachex, "~> 3.1"},
-      {:geohax, "~> 0.4.0"},
+      {:geohax, "~> 1.0.0"},
       {:mogrify, "~> 0.9"},
       {:linkify, "~> 0.3"},
       {:http_signatures, "~> 0.1.0"},
-      {:ex_cldr, "~> 2.30.0"},
+      {:ex_cldr, "~> 2.33"},
       {:ex_cldr_dates_times, "~> 2.2"},
       {:ex_cldr_plugs, "~> 1.0"},
       {:ex_optimizer, "~> 0.1"},
@@ -204,6 +204,8 @@ defmodule Mobilizon.Mixfile do
       {:tz_world, "~> 1.0"},
       {:tzdata, "~> 1.1"},
       {:codepagex, "~> 0.1.6"},
+      {:vite_phx, "~> 0.2"},
+      {:unplug, "~> 1.0.0"},
       # Dev and test dependencies
       {:phoenix_live_reload, "~> 1.2", only: [:dev, :e2e]},
       {:ex_machina, "~> 2.3", only: [:dev, :test]},
@@ -218,7 +220,7 @@ defmodule Mobilizon.Mixfile do
       {:mox, "~> 1.0", only: :test},
       {:junit_formatter, "~> 3.1", only: [:test]},
       {:sobelow, "~> 0.8", only: [:dev, :test]},
-      {:doctor, "~> 0.18.0", only: :dev},
+      {:doctor, "~> 0.19.0", only: :dev},
       {:haversine, "~> 0.1.0"}
     ] ++ oauth_deps()
   end
diff --git a/mix.lock b/mix.lock
index 2f18df2c4..31bc66dce 100644
--- a/mix.lock
+++ b/mix.lock
@@ -4,10 +4,10 @@
   "absinthe_plug": {:hex, :absinthe_plug, "1.5.8", "38d230641ba9dca8f72f1fed2dfc8abd53b3907d1996363da32434ab6ee5d6ab", [:mix], [{:absinthe, "~> 1.5", [hex: :absinthe, repo: "hexpm", optional: false]}, {:plug, "~> 1.4", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "bbb04176647b735828861e7b2705465e53e2cf54ccf5a73ddd1ebd855f996e5a"},
   "argon2_elixir": {:hex, :argon2_elixir, "3.0.0", "fd4405f593e77b525a5c667282172dd32772d7c4fa58cdecdaae79d2713b6c5f", [:make, :mix], [{:comeonin, "~> 5.3", [hex: :comeonin, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.6", [hex: :elixir_make, repo: "hexpm", optional: false]}], "hexpm", "8b753b270af557d51ba13fcdebc0f0ab27a2a6792df72fd5a6cf9cfaffcedc57"},
   "atomex": {:hex, :atomex, "0.5.1", "706a8241fd6d1719b27a77b6d1192d2f85e6ecc78e6eadab29207d8cb9bb7ae5", [:mix], [{:xml_builder, "~> 2.1", [hex: :xml_builder, repo: "hexpm", optional: false]}], "hexpm", "6248891b5fcab8503982e090eedeeadb757a6311c2ef2e2998b874f7d319ab3f"},
-  "bunt": {:hex, :bunt, "0.2.0", "951c6e801e8b1d2cbe58ebbd3e616a869061ddadcc4863d0a2182541acae9a38", [:mix], [], "hexpm", "7af5c7e09fe1d40f76c8e4f9dd2be7cebd83909f31fee7cd0e9eadc567da8353"},
+  "bunt": {:hex, :bunt, "0.2.1", "e2d4792f7bc0ced7583ab54922808919518d0e57ee162901a16a1b6664ef3b14", [:mix], [], "hexpm", "a330bfb4245239787b15005e66ae6845c9cd524a288f0d141c148b02603777a5"},
   "cachex": {:hex, :cachex, "3.4.0", "868b2959ea4aeb328c6b60ff66c8d5123c083466ad3c33d3d8b5f142e13101fb", [:mix], [{:eternal, "~> 1.2", [hex: :eternal, repo: "hexpm", optional: false]}, {:jumper, "~> 1.0", [hex: :jumper, repo: "hexpm", optional: false]}, {:sleeplocks, "~> 1.1", [hex: :sleeplocks, repo: "hexpm", optional: false]}, {:unsafe, "~> 1.0", [hex: :unsafe, repo: "hexpm", optional: false]}], "hexpm", "370123b1ab4fba4d2965fb18f87fd758325709787c8c5fce35b3fe80645ccbe5"},
   "certifi": {:hex, :certifi, "2.9.0", "6f2a475689dd47f19fb74334859d460a2dc4e3252a3324bd2111b8f0429e7e21", [:rebar3], [], "hexpm", "266da46bdb06d6c6d35fde799bcb28d36d985d424ad7c08b5bb48f5b5cdd4641"},
-  "cldr_utils": {:hex, :cldr_utils, "2.17.2", "4dcb582caa2108d4461a86fb761b9b072ab84a6b191173dae6bff1c67d10115e", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.5", [hex: :certifi, repo: "hexpm", optional: true]}, {:decimal, "~> 1.9 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}], "hexpm", "9c5667e647c2ec20f9beba530f7e72557a0dc29f92947738a8ced2d0cdf04c1c"},
+  "cldr_utils": {:hex, :cldr_utils, "2.19.1", "5a7bcd2f2fd432c548e494e850bba8a9e838f1b10202f682ea1d9809d74eff31", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.5", [hex: :certifi, repo: "hexpm", optional: true]}, {:decimal, "~> 1.9 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}], "hexpm", "fbd10f79363e70f3d893ab21e195f444ca87c2c80120b5911761491da4489620"},
   "codepagex": {:hex, :codepagex, "0.1.6", "49110d09a25ee336a983281a48ef883da4c6190481e0b063afe2db481af6117e", [:mix], [], "hexpm", "1521461097dde281edf084062f525a4edc6a5e49f4fd1f5ec41c9c4955d5bd59"},
   "combine": {:hex, :combine, "0.10.0", "eff8224eeb56498a2af13011d142c5e7997a80c8f5b97c499f84c841032e429f", [:mix], [], "hexpm", "1b1dbc1790073076580d0d1d64e42eae2366583e7aecd455d1215b0d16f2451b"},
   "comeonin": {:hex, :comeonin, "5.3.3", "2c564dac95a35650e9b6acfe6d2952083d8a08e4a89b93a481acb552b325892e", [:mix], [], "hexpm", "3e38c9c2cb080828116597ca8807bb482618a315bfafd98c90bc22a821cc84df"},
@@ -16,13 +16,13 @@
   "cowboy": {:hex, :cowboy, "2.9.0", "865dd8b6607e14cf03282e10e934023a1bd8be6f6bacf921a7e2a96d800cd452", [:make, :rebar3], [{:cowlib, "2.11.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "2c729f934b4e1aa149aff882f57c6372c15399a20d54f65c8d67bef583021bde"},
   "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
   "cowlib": {:hex, :cowlib, "2.11.0", "0b9ff9c346629256c42ebe1eeb769a83c6cb771a6ee5960bd110ab0b9b872063", [:make, :rebar3], [], "hexpm", "2b3e9da0b21c4565751a6d4901c20d1b4cc25cbb7fd50d91d2ab6dd287bc86a9"},
-  "credo": {:hex, :credo, "1.6.4", "ddd474afb6e8c240313f3a7b0d025cc3213f0d171879429bf8535d7021d9ad78", [:mix], [{:bunt, "~> 0.2.0", [hex: :bunt, repo: "hexpm", optional: false]}, {:file_system, "~> 0.2.8", [hex: :file_system, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "c28f910b61e1ff829bffa056ef7293a8db50e87f2c57a9b5c3f57eee124536b7"},
+  "credo": {:hex, :credo, "1.6.7", "323f5734350fd23a456f2688b9430e7d517afb313fbd38671b8a4449798a7854", [:mix], [{:bunt, "~> 0.2.1", [hex: :bunt, repo: "hexpm", optional: false]}, {:file_system, "~> 0.2.8", [hex: :file_system, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "41e110bfb007f7eda7f897c10bf019ceab9a0b269ce79f015d54b0dcf4fc7dd3"},
   "dataloader": {:hex, :dataloader, "1.0.10", "a42f07641b1a0572e0b21a2a5ae1be11da486a6790f3d0d14512d96ff3e3bbe9", [:mix], [{:ecto, ">= 3.4.3 and < 4.0.0", [hex: :ecto, repo: "hexpm", optional: true]}, {:telemetry, "~> 1.0 or ~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "54cd70cec09addf4b2ace14cc186a283a149fd4d3ec5475b155951bf33cd963f"},
   "db_connection": {:hex, :db_connection, "2.4.2", "f92e79aff2375299a16bcb069a14ee8615c3414863a6fef93156aee8e86c2ff3", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "4fe53ca91b99f55ea249693a0229356a08f4d1a7931d8ffa79289b145fe83668"},
   "decimal": {:hex, :decimal, "2.0.0", "a78296e617b0f5dd4c6caf57c714431347912ffb1d0842e998e9792b5642d697", [:mix], [], "hexpm", "34666e9c55dea81013e77d9d87370fe6cb6291d1ef32f46a1600230b1d44f577"},
-  "dialyxir": {:hex, :dialyxir, "1.1.0", "c5aab0d6e71e5522e77beff7ba9e08f8e02bad90dfbeffae60eaf0cb47e29488", [:mix], [{:erlex, ">= 0.2.6", [hex: :erlex, repo: "hexpm", optional: false]}], "hexpm", "07ea8e49c45f15264ebe6d5b93799d4dd56a44036cf42d0ad9c960bc266c0b9a"},
+  "dialyxir": {:hex, :dialyxir, "1.2.0", "58344b3e87c2e7095304c81a9ae65cb68b613e28340690dfe1a5597fd08dec37", [:mix], [{:erlex, ">= 0.2.6", [hex: :erlex, repo: "hexpm", optional: false]}], "hexpm", "61072136427a851674cab81762be4dbeae7679f85b1272b6d25c3a839aff8463"},
   "digital_token": {:hex, :digital_token, "0.4.0", "2ad6894d4a40be8b2890aad286ecd5745fa473fa5699d80361a8c94428edcd1f", [:mix], [{:cldr_utils, "~> 2.17", [hex: :cldr_utils, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "a178edf61d1fee5bb3c34e14b0f4ee21809ee87cade8738f87337e59e5e66e26"},
-  "doctor": {:hex, :doctor, "0.18.0", "114934c1740239953208a39db617699b7e2660770e81129d7f95cdf7837ab766", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}], "hexpm", "829c88c365f72c0666e443ea670ffb6f180de7b90c23d536edabdd8c722b88f4"},
+  "doctor": {:hex, :doctor, "0.19.0", "f7974836bc85756b38b99de46cc2c6ba36741f21d8eabcbef78f6806ca6769ed", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}], "hexpm", "504f17473dc6b39618e693c5198d85e274b056b73eb4a4605431aec0f42f0023"},
   "earmark_parser": {:hex, :earmark_parser, "1.4.26", "f4291134583f373c7d8755566122908eb9662df4c4b63caa66a0eabe06569b0a", [:mix], [], "hexpm", "48d460899f8a0c52c5470676611c01f64f3337bad0b26ddab43648428d94aabc"},
   "eblurhash": {:hex, :eblurhash, "1.2.2", "7da4255aaea984b31bb71155f673257353b0e0554d0d30dcf859547e74602582", [:rebar3], [], "hexpm", "8c20ca00904de023a835a9dcb7b7762fed32264c85a80c3cafa85288e405044c"},
   "ecto": {:hex, :ecto, "3.8.4", "e06b8b87e62b27fea17fd2ff6041572ddd10339fd16cdf58446e402c6c90a74b", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "f9244288b8d42db40515463a008cf3f4e0e564bb9c249fe87bf28a6d79fe82d4"},
@@ -35,46 +35,46 @@
   "erlex": {:hex, :erlex, "0.2.6", "c7987d15e899c7a2f34f5420d2a2ea0d659682c06ac607572df55a43753aa12e", [:mix], [], "hexpm", "2ed2e25711feb44d52b17d2780eabf998452f6efda104877a3881c2f8c0c0c75"},
   "erlport": {:hex, :erlport, "0.10.1", "c96ffa51bbcab0298232fcdfe8c3e110f1598011de71ae6b9082b80c9e2e476a", [:rebar3], [], "hexpm", "34931e8cb62a131d1bc8a2bd04d4007c73c03e4f10e22ee4a218e7172227a918"},
   "eternal": {:hex, :eternal, "1.2.2", "d1641c86368de99375b98d183042dd6c2b234262b8d08dfd72b9eeaafc2a1abd", [:mix], [], "hexpm", "2c9fe32b9c3726703ba5e1d43a1d255a4f3f2d8f8f9bc19f094c7cb1a7a9e782"},
-  "ex_cldr": {:hex, :ex_cldr, "2.30.0", "0f8348252c8ddc84c7418cd20b2b029c75b918147bf7c17c651c4b1c7b084287", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.5", [hex: :certifi, repo: "hexpm", optional: true]}, {:cldr_utils, "~> 2.17", [hex: :cldr_utils, repo: "hexpm", optional: false]}, {:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:gettext, "~> 0.19", [hex: :gettext, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:nimble_parsec, "~> 0.5 or ~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: true]}], "hexpm", "3e179af0caf126395a997227fc54aaecfc1a330be2e4e780429c3c874f98c8d4"},
+  "ex_cldr": {:hex, :ex_cldr, "2.33.2", "8adc4df3985e7f5d1d55cbbf72f993569de20eff5012ff3ea9412753961d4c00", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.5", [hex: :certifi, repo: "hexpm", optional: true]}, {:cldr_utils, "~> 2.18", [hex: :cldr_utils, repo: "hexpm", optional: false]}, {:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:gettext, "~> 0.19", [hex: :gettext, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:nimble_parsec, "~> 0.5 or ~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: true]}], "hexpm", "fd81a7147b4ed86c0c44c0251444cb8d1defccc7b33b89067ca1635f23e9fbf8"},
   "ex_cldr_calendars": {:hex, :ex_cldr_calendars, "1.19.0", "38c0c9893c7122e3067ac1956b0addb600af936b986c0ba790a6e88a14e48107", [:mix], [{:calendar_interval, "~> 0.2", [hex: :calendar_interval, repo: "hexpm", optional: true]}, {:ex_cldr_lists, "~> 2.10", [hex: :ex_cldr_lists, repo: "hexpm", optional: true]}, {:ex_cldr_numbers, "~> 2.25", [hex: :ex_cldr_numbers, repo: "hexpm", optional: false]}, {:ex_cldr_units, "~> 3.12", [hex: :ex_cldr_units, repo: "hexpm", optional: true]}, {:ex_doc, "~> 0.21", [hex: :ex_doc, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "7c75b7418b7309580e46231ca3d4f7987e469ae50070ed25599bfd9291fc36ee"},
   "ex_cldr_currencies": {:hex, :ex_cldr_currencies, "2.14.1", "87102f426439264229854ded5b723a617bc194ca01dd53fa85afc28399faee1d", [:mix], [{:ex_cldr, "~> 2.27", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "da0a864ed43ade93c44d62170ea9c157c5abb20a01cc0270ac47cd51e045de00"},
   "ex_cldr_dates_times": {:hex, :ex_cldr_dates_times, "2.12.0", "a6b065657b06535914b0b18f0d86549187950256c0b1d1c0e055a27126f753b1", [:mix], [{:calendar_interval, "~> 0.2", [hex: :calendar_interval, repo: "hexpm", optional: true]}, {:ex_cldr_calendars, "~> 1.18", [hex: :ex_cldr_calendars, repo: "hexpm", optional: false]}, {:ex_cldr_numbers, "~> 2.25", [hex: :ex_cldr_numbers, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "c15b424c1f9512e1be17cc128415f8b69bd5a283e63db71c44bf60e70253eba0"},
   "ex_cldr_languages": {:hex, :ex_cldr_languages, "0.3.3", "9787002803552b15a7ade19496c9e46fc921baca992ea80d0394e11fe3acea45", [:mix], [{:ex_cldr, "~> 2.25", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "22fb1fef72b7b4b4872d243b34e7b83734247a78ad87377986bf719089cc447a"},
-  "ex_cldr_numbers": {:hex, :ex_cldr_numbers, "2.27.0", "a29e49e1e0f990c8fec0307640a6e980074598dd8d4b9af7f85905e82f30c6b2", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:digital_token, "~> 0.3 or ~> 1.0", [hex: :digital_token, repo: "hexpm", optional: false]}, {:ex_cldr, "~> 2.28", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:ex_cldr_currencies, "~> 2.13", [hex: :ex_cldr_currencies, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "1ecb5810d4e3db138e05a18e401626a14cfdd889ad98b49b96bb280c76529ba0"},
-  "ex_cldr_plugs": {:hex, :ex_cldr_plugs, "1.0.0", "d6980eb5007306b2dce8f47319d4f68e5bc6ac8690c3057b1d2477885dc5fd64", [:mix], [{:ex_cldr, "~> 2.29", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:gettext, "~> 0.19", [hex: :gettext, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "1ee31c828e864097af2d589881aa87d88d8266f4afc1917bd9e54be963c4940f"},
-  "ex_doc": {:hex, :ex_doc, "0.28.4", "001a0ea6beac2f810f1abc3dbf4b123e9593eaa5f00dd13ded024eae7c523298", [:mix], [{:earmark_parser, "~> 1.4.19", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "bf85d003dd34911d89c8ddb8bda1a958af3471a274a4c2150a9c01c78ac3f8ed"},
+  "ex_cldr_numbers": {:hex, :ex_cldr_numbers, "2.27.2", "d1400a0502fb66ab3abcce3d10d5d11efcfc786eafe1c442ea2ddf834670d743", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:digital_token, "~> 0.3 or ~> 1.0", [hex: :digital_token, repo: "hexpm", optional: false]}, {:ex_cldr, "~> 2.28", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:ex_cldr_currencies, "~> 2.13", [hex: :ex_cldr_currencies, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "f682f46193e1793a3a98cc636314e9bea483da0925eb47935a39c4feef79e364"},
+  "ex_cldr_plugs": {:hex, :ex_cldr_plugs, "1.2.0", "e02cc03a4cb19bb028c331680cf09f826b4180f1545f8c35825fb5d4b918ac8a", [:mix], [{:ex_cldr, "~> 2.29", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:gettext, "~> 0.19", [hex: :gettext, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "e111249ed7a7e2ef6322c93ff2d1c930d9e296dc8181351ff6c6a1be50b1cf8e"},
+  "ex_doc": {:hex, :ex_doc, "0.28.5", "3e52a6d2130ce74d096859e477b97080c156d0926701c13870a4e1f752363279", [:mix], [{:earmark_parser, "~> 1.4.19", [hex: :earmark_parser, repo: "hexpm", optional: false]}, {:makeup_elixir, "~> 0.14", [hex: :makeup_elixir, repo: "hexpm", optional: false]}, {:makeup_erlang, "~> 0.1", [hex: :makeup_erlang, repo: "hexpm", optional: false]}], "hexpm", "d2c4b07133113e9aa3e9ba27efb9088ba900e9e51caa383919676afdf09ab181"},
   "ex_ical": {:hex, :ex_ical, "0.2.0", "4b928b554614704016cc0c9ee226eb854da9327a1cc460457621ceacb1ac29a6", [:mix], [{:timex, "~> 3.1", [hex: :timex, repo: "hexpm", optional: false]}], "hexpm", "db76473b2ae0259e6633c6c479a5a4d8603f09497f55c88f9ef4d53d2b75befb"},
   "ex_machina": {:hex, :ex_machina, "2.7.0", "b792cc3127fd0680fecdb6299235b4727a4944a09ff0fa904cc639272cd92dc7", [:mix], [{:ecto, "~> 2.2 or ~> 3.0", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_sql, "~> 3.0", [hex: :ecto_sql, repo: "hexpm", optional: true]}], "hexpm", "419aa7a39bde11894c87a615c4ecaa52d8f107bbdd81d810465186f783245bf8"},
   "ex_optimizer": {:hex, :ex_optimizer, "0.1.1", "62da37e206fc2233ff7a4e54e40eae365c40f96c81992fcd15b782eb25169b80", [:mix], [{:file_info, "~> 0.0.4", [hex: :file_info, repo: "hexpm", optional: false]}], "hexpm", "e6f5c059bcd58b66be2f6f257fdc4f69b74b0fa5c9ddd669486af012e4b52286"},
   "ex_unit_notifier": {:hex, :ex_unit_notifier, "1.2.0", "73ced2ecee0f2da0705e372c21ce61e4e5d927ddb797f73928e52818b9cc1754", [:mix], [], "hexpm", "f38044c9d50de68ad7f0aec4d781a10d9f1c92c62b36bf0227ec0aaa96aee332"},
-  "excoveralls": {:hex, :excoveralls, "0.14.5", "5c685449596e962c779adc8f4fb0b4de3a5b291c6121097572a3aa5400c386d3", [:mix], [{:hackney, "~> 1.16", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "e9b4a9bf10e9a6e48b94159e13b4b8a1b05400f17ac16cc363ed8734f26e1f4e"},
+  "excoveralls": {:hex, :excoveralls, "0.14.6", "610e921e25b180a8538229ef547957f7e04bd3d3e9a55c7c5b7d24354abbba70", [:mix], [{:hackney, "~> 1.16", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "0eceddaa9785cfcefbf3cd37812705f9d8ad34a758e513bb975b081dce4eb11e"},
   "exgravatar": {:hex, :exgravatar, "2.0.3", "2349709832ee535f826f48db98cddd294ae62b01acb44d539a16419bd8ebc3e5", [:mix], [], "hexpm", "aca18ff9bd8991d3be3e5446d3bdefc051be084c1ffc9ab2d43b3e65339300e1"},
   "export": {:hex, :export, "0.1.1", "6dfd268b0692428f89b9285859a2dc02b6dcd2e8fdfbca34ac6e6a331351df91", [:mix], [{:erlport, "~> 0.9", [hex: :erlport, repo: "hexpm", optional: false]}], "hexpm", "3da7444ff4053f1824352f4bdb13fbd2c28c93c2011786fb686b649fdca1021f"},
   "fast_html": {:hex, :fast_html, "2.0.5", "c61760340606c1077ff1f196f17834056cb1dd3d5cb92a9f2cabf28bc6221c3c", [:make, :mix], [{:elixir_make, "~> 0.4", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:nimble_pool, "~> 0.2.0", [hex: :nimble_pool, repo: "hexpm", optional: false]}], "hexpm", "605f4f4829443c14127694ebabb681778712ceecb4470ec32aa31012330e6506"},
   "fast_sanitize": {:hex, :fast_sanitize, "0.2.3", "67b93dfb34e302bef49fec3aaab74951e0f0602fd9fa99085987af05bd91c7a5", [:mix], [{:fast_html, "~> 2.0", [hex: :fast_html, repo: "hexpm", optional: false]}, {:plug, "~> 1.8", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "e8ad286d10d0386e15d67d0ee125245ebcfbc7d7290b08712ba9013c8c5e56e2"},
   "file_info": {:hex, :file_info, "0.0.4", "2e0e77f211e833f38ead22cb29ce53761d457d80b3ffe0ffe0eb93880b0963b2", [:mix], [{:mimetype_parser, "~> 0.1.2", [hex: :mimetype_parser, repo: "hexpm", optional: false]}], "hexpm", "50e7ad01c2c8b9339010675fe4dc4a113b8d6ca7eddce24d1d74fd0e762781a5"},
   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
-  "floki": {:hex, :floki, "0.32.1", "dfe3b8db3b793939c264e6f785bca01753d17318d144bd44b407fb3493acaa87", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "d4b91c713e4a784a3f7b1e3cc016eefc619f6b1c3898464222867cafd3c681a3"},
+  "floki": {:hex, :floki, "0.33.1", "f20f1eb471e726342b45ccb68edb9486729e7df94da403936ea94a794f072781", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "461035fd125f13fdf30f243c85a0b1e50afbec876cbf1ceefe6fddd2e6d712c6"},
   "gen_smtp": {:hex, :gen_smtp, "1.2.0", "9cfc75c72a8821588b9b9fe947ae5ab2aed95a052b81237e0928633a13276fd3", [:rebar3], [{:ranch, ">= 1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "5ee0375680bca8f20c4d85f58c2894441443a743355430ff33a783fe03296779"},
   "geo": {:hex, :geo, "3.4.3", "0ddf3f681993d32c397e5ef346e7b4b6f36f39ed138502429832fa4000ebb9d5", [:mix], [{:jason, "~> 1.2", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "e23f2892e5437ec8b063cee1beccec89c58fd841ae11133304700235feb25552"},
   "geo_postgis": {:hex, :geo_postgis, "3.4.2", "5a3462b2a2271d6949ba355ceed0212dc89ecfd6d0073ff1dd8fd53de78af867", [:mix], [{:geo, "~> 3.4", [hex: :geo, repo: "hexpm", optional: false]}, {:jason, "~> 1.2", [hex: :jason, repo: "hexpm", optional: true]}, {:poison, "~> 2.2 or ~> 3.0 or ~> 4.0", [hex: :poison, repo: "hexpm", optional: true]}, {:postgrex, ">= 0.0.0", [hex: :postgrex, repo: "hexpm", optional: false]}], "hexpm", "48d8c9f97f03805546db19217c42a57e972a3eb69fabaa3d11740285d25aaad4"},
-  "geohax": {:hex, :geohax, "0.4.2", "282e1bdd179a7e868105ab6e5484302dc5c4548e12a706699fd55587374d2876", [:mix], [], "hexpm", "0d10f07290e8410c66014e2041d989a45f341ec4f018445ed1a69523cddf05fe"},
+  "geohax": {:hex, :geohax, "1.0.0", "89717442c5474a57d242b2361590bb33a7fbe6d8ec02a31d9865c3f33756d348", [:mix], [], "hexpm", "893ef2f905213acb67c615d2c955d926b1be3676bfc2bd5ed7271b641dfa2224"},
   "geolix": {:hex, :geolix, "2.0.0", "7e65764bedfc98d08a3ddb24c417657c9d438eff163280b45fbb7de289626acd", [:mix], [], "hexpm", "8742bf588ed0bb7def2c443204d09d355990846c6efdff96ded66aac24c301df"},
   "geolix_adapter_mmdb2": {:hex, :geolix_adapter_mmdb2, "0.6.0", "6ab9dbf6ea395817aa1fd2597be25d0dda1853c7f664e62716e47728d18bc4f9", [:mix], [{:geolix, "~> 2.0", [hex: :geolix, repo: "hexpm", optional: false]}, {:mmdb2_decoder, "~> 3.0", [hex: :mmdb2_decoder, repo: "hexpm", optional: false]}], "hexpm", "06ff962feae8a310cffdf86b74bfcda6e2d0dccb439bb1f62df2b657b1c0269b"},
-  "gettext": {:hex, :gettext, "0.19.1", "564953fd21f29358e68b91634799d9d26989f8d039d7512622efb3c3b1c97892", [:mix], [], "hexpm", "10c656c0912b8299adba9b061c06947511e3f109ab0d18b44a866a4498e77222"},
-  "guardian": {:hex, :guardian, "2.2.4", "3dafdc19665411c96b2796d184064d691bc08813a132da5119e39302a252b755", [:mix], [{:jose, "~> 1.8", [hex: :jose, repo: "hexpm", optional: false]}, {:plug, "~> 1.3.3 or ~> 1.4", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "6f83d4309c16ec2469da8606bb2a9815512cc2fac1595ad34b79940a224eb110"},
+  "gettext": {:hex, :gettext, "0.20.0", "75ad71de05f2ef56991dbae224d35c68b098dd0e26918def5bb45591d5c8d429", [:mix], [], "hexpm", "1c03b177435e93a47441d7f681a7040bd2a816ece9e2666d1c9001035121eb3d"},
+  "guardian": {:hex, :guardian, "2.3.0", "1e2a90e809fbd99439f5279db03fb30b7b2b2fc0d3870a0d76a84b099f1a2892", [:mix], [{:jose, "~> 1.8", [hex: :jose, repo: "hexpm", optional: false]}, {:plug, "~> 1.3.3 or ~> 1.4", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "ced3ace74fc2b22b2b25dbe99e6d205443dd0d57d1cc25155a223b5e9656205e"},
   "guardian_db": {:hex, :guardian_db, "2.1.0", "ec95a9d99cdd1e550555d09a7bb4a340d8887aad0697f594590c2fd74be02426", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:ecto_sql, "~> 3.1", [hex: :ecto_sql, repo: "hexpm", optional: false]}, {:guardian, "~> 1.0 or ~> 2.0", [hex: :guardian, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.13", [hex: :postgrex, repo: "hexpm", optional: true]}], "hexpm", "f8e7d543ac92c395f3a7fd5acbe6829faeade57d688f7562e2f0fca8f94a0d70"},
   "guardian_phoenix": {:hex, :guardian_phoenix, "2.0.1", "89a817265af09a6ddf7cb1e77f17ffca90cea2db10ff888375ef34502b2731b1", [:mix], [{:guardian, "~> 2.0", [hex: :guardian, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.3", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "21f439246715192b231f228680465d1ed5fbdf01555a4a3b17165532f5f9a08c"},
   "hackney": {:hex, :hackney, "1.18.1", "f48bf88f521f2a229fc7bae88cf4f85adc9cd9bcf23b5dc8eb6a1788c662c4f6", [:rebar3], [{:certifi, "~>2.9.0", [hex: :certifi, repo: "hexpm", optional: false]}, {:idna, "~>6.1.0", [hex: :idna, repo: "hexpm", optional: false]}, {:metrics, "~>1.0.0", [hex: :metrics, repo: "hexpm", optional: false]}, {:mimerl, "~>1.1", [hex: :mimerl, repo: "hexpm", optional: false]}, {:parse_trans, "3.3.1", [hex: :parse_trans, repo: "hexpm", optional: false]}, {:ssl_verify_fun, "~>1.1.0", [hex: :ssl_verify_fun, repo: "hexpm", optional: false]}, {:unicode_util_compat, "~>0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "a4ecdaff44297e9b5894ae499e9a070ea1888c84afdd1fd9b7b2bc384950128e"},
   "haversine": {:hex, :haversine, "0.1.0", "14240e90dae07c9459f538d12a811492f655d95fc68f999403503b4f6c4ec522", [:mix], [], "hexpm", "54dc48e895bc18a59437a37026c873634e17b648a64cb87bfafb96f64d607060"},
   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
   "http_signatures": {:hex, :http_signatures, "0.1.1", "ca7ebc1b61542b163644c8c3b1f0e0f41037d35f2395940d3c6c7deceab41fd8", [:mix], [], "hexpm", "cc3b8a007322cc7b624c0c15eec49ee58ac977254ff529a3c482f681465942a3"},
-  "httpoison": {:hex, :httpoison, "1.8.1", "df030d96de89dad2e9983f92b0c506a642d4b1f4a819c96ff77d12796189c63e", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "35156a6d678d6d516b9229e208942c405cf21232edd632327ecfaf4fd03e79e0"},
+  "httpoison": {:hex, :httpoison, "1.8.2", "9eb9c63ae289296a544842ef816a85d881d4a31f518a0fec089aaa744beae290", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "2bb350d26972e30c96e2ca74a1aaf8293d61d0742ff17f01e0279fef11599921"},
   "icalendar": {:git, "https://github.com/tcitworld/icalendar.git", "1033d922c82a7223db0ec138e2316557b70ff49f", []},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~>0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
   "inet_cidr": {:hex, :inet_cidr, "1.0.4", "a05744ab7c221ca8e395c926c3919a821eb512e8f36547c062f62c4ca0cf3d6e", [:mix], [], "hexpm", "64a2d30189704ae41ca7dbdd587f5291db5d1dda1414e0774c29ffc81088c1bc"},
   "ip_reserved": {:hex, :ip_reserved, "0.1.1", "e5112d71f1abf05207f82fd9597d369a5fde1e0b6d1bbe77c02a99bb26ecdc33", [:mix], [{:inet_cidr, "~> 1.0.0", [hex: :inet_cidr, repo: "hexpm", optional: false]}], "hexpm", "55fcd2b6e211caef09ea3f54ef37d43030bec486325d12fe865ab5ed8140a4fe"},
-  "jason": {:hex, :jason, "1.3.0", "fa6b82a934feb176263ad2df0dbd91bf633d4a46ebfdffea0c8ae82953714946", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "53fc1f51255390e0ec7e50f9cb41e751c260d065dcba2bf0d08dc51a4002c2ac"},
+  "jason": {:hex, :jason, "1.4.0", "e855647bc964a44e2f67df589ccf49105ae039d4179db7f6271dfd3843dc27e6", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "79a3791085b2a0f743ca04cec0f7be26443738779d09302e01318f97bdb82121"},
   "jose": {:hex, :jose, "1.11.2", "f4c018ccf4fdce22c71e44d471f15f723cb3efab5d909ab2ba202b5bf35557b3", [:mix, :rebar3], [], "hexpm", "98143fbc48d55f3a18daba82d34fe48959d44538e9697c08f34200fa5f0947d2"},
   "jumper": {:hex, :jumper, "1.0.1", "3c00542ef1a83532b72269fab9f0f0c82bf23a35e27d278bfd9ed0865cecabff", [:mix], [], "hexpm", "318c59078ac220e966d27af3646026db9b5a5e6703cb2aa3e26bcfaba65b7433"},
   "junit_formatter": {:hex, :junit_formatter, "3.3.1", "c729befb848f1b9571f317d2fefa648e9d4869befc4b2980daca7c1edc468e40", [:mix], [], "hexpm", "761fc5be4b4c15d8ba91a6dafde0b2c2ae6db9da7b8832a55b5a1deb524da72b"},
@@ -84,34 +84,34 @@
   "makeup_erlang": {:hex, :makeup_erlang, "0.1.1", "3fcb7f09eb9d98dc4d208f49cc955a34218fc41ff6b84df7c75b3e6e533cc65f", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "174d0809e98a4ef0b3309256cbf97101c6ec01c4ab0b23e926a9e17df2077cbb"},
   "meck": {:hex, :meck, "0.9.2", "85ccbab053f1db86c7ca240e9fc718170ee5bda03810a6292b5306bf31bae5f5", [:rebar3], [], "hexpm", "81344f561357dc40a8344afa53767c32669153355b626ea9fcbc8da6b3045826"},
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
-  "mime": {:hex, :mime, "2.0.2", "0b9e1a4c840eafb68d820b0e2158ef5c49385d17fb36855ac6e7e087d4b1dcc5", [:mix], [], "hexpm", "e6a3f76b4c277739e36c2e21a2c640778ba4c3846189d5ab19f97f126df5f9b7"},
+  "mime": {:hex, :mime, "2.0.3", "3676436d3d1f7b81b5a2d2bd8405f412c677558c81b1c92be58c00562bb59095", [:mix], [], "hexpm", "27a30bf0db44d25eecba73755acf4068cbfe26a4372f9eb3e4ea3a45956bff6b"},
   "mimerl": {:hex, :mimerl, "1.2.0", "67e2d3f571088d5cfd3e550c383094b47159f3eee8ffa08e64106cdf5e981be3", [:rebar3], [], "hexpm", "f278585650aa581986264638ebf698f8bb19df297f66ad91b18910dfc6e19323"},
   "mimetype_parser": {:hex, :mimetype_parser, "0.1.3", "628ac9fe56aa7edcedb534d68397dd66674ab82493c8ebe39acb9a19b666099d", [:mix], [], "hexpm", "7d8f80c567807ce78cd93c938e7f4b0a20b1aaaaab914bf286f68457d9f7a852"},
   "mix_test_watch": {:hex, :mix_test_watch, "1.1.0", "330bb91c8ed271fe408c42d07e0773340a7938d8a0d281d57a14243eae9dc8c3", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}], "hexpm", "52b6b1c476cbb70fd899ca5394506482f12e5f6b0d6acff9df95c7f1e0812ec3"},
-  "mmdb2_decoder": {:hex, :mmdb2_decoder, "3.0.0", "54828676a36e75e9a25bc9a0bb0598d4c7fcc767bf0b40674850b22e05b7b6cc", [:mix], [], "hexpm", "359dc9242915538d1dceb9f6d96c72201dca76ce62e49d22e2ed1e86f20bea8e"},
+  "mmdb2_decoder": {:hex, :mmdb2_decoder, "3.0.1", "78e3aedde88035c6873ada5ceaf41b7f15a6259ed034e0eaca72ccfa937798f0", [:mix], [], "hexpm", "316af0f388fac824782d944f54efe78e7c9691bbbdb0afd5cccdd0510adf559d"},
   "mock": {:hex, :mock, "0.3.7", "75b3bbf1466d7e486ea2052a73c6e062c6256fb429d6797999ab02fa32f29e03", [:mix], [{:meck, "~> 0.9.2", [hex: :meck, repo: "hexpm", optional: false]}], "hexpm", "4da49a4609e41fd99b7836945c26f373623ea968cfb6282742bcb94440cf7e5c"},
-  "mogrify": {:hex, :mogrify, "0.9.1", "a26f107c4987477769f272bd0f7e3ac4b7b75b11ba597fd001b877beffa9c068", [:mix], [], "hexpm", "134edf189337d2125c0948bf0c228fdeef975c594317452d536224069a5b7f05"},
+  "mogrify": {:hex, :mogrify, "0.9.2", "b360984adea7dd6a55f18028e6327973c58de7f548fdb86c9859848aa904d5b0", [:mix], [], "hexpm", "c18d10fd70ca20e2585301616c89f6e4f7159d92efc9cc8ee579e00c886f699d"},
   "mox": {:hex, :mox, "1.0.2", "dc2057289ac478b35760ba74165b4b3f402f68803dd5aecd3bfd19c183815d64", [:mix], [], "hexpm", "f9864921b3aaf763c8741b5b8e6f908f44566f1e427b2630e89e9a73b981fef2"},
   "nimble_csv": {:hex, :nimble_csv, "1.2.0", "4e26385d260c61eba9d4412c71cea34421f296d5353f914afe3f2e71cce97722", [:mix], [], "hexpm", "d0628117fcc2148178b034044c55359b26966c6eaa8e2ce15777be3bbc91b12a"},
   "nimble_parsec": {:hex, :nimble_parsec, "1.2.3", "244836e6e3f1200c7f30cb56733fd808744eca61fd182f731eac4af635cc6d0b", [:mix], [], "hexpm", "c8d789e39b9131acf7b99291e93dae60ab48ef14a7ee9d58c6964f59efb570b0"},
   "nimble_pool": {:hex, :nimble_pool, "0.2.6", "91f2f4c357da4c4a0a548286c84a3a28004f68f05609b4534526871a22053cde", [:mix], [], "hexpm", "1c715055095d3f2705c4e236c18b618420a35490da94149ff8b580a2144f653f"},
-  "oauth2": {:hex, :oauth2, "2.0.0", "338382079fe16c514420fa218b0903f8ad2d4bfc0ad0c9f988867dfa246731b0", [:mix], [{:hackney, "~> 1.13", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "881b8364ac7385f9fddc7949379cbe3f7081da37233a1aa7aab844670a91e7e7"},
+  "oauth2": {:hex, :oauth2, "2.0.1", "70729503e05378697b958919bb2d65b002ba6b28c8112328063648a9348aaa3f", [:mix], [{:hackney, "~> 1.13", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "c64e20d4d105bcdbcbe03170fb530d0eddc3a3e6b135a87528a22c8aecf74c52"},
   "oauther": {:hex, :oauther, "1.3.0", "82b399607f0ca9d01c640438b34d74ebd9e4acd716508f868e864537ecdb1f76", [:mix], [], "hexpm", "78eb888ea875c72ca27b0864a6f550bc6ee84f2eeca37b093d3d833fbcaec04e"},
-  "oban": {:hex, :oban, "2.12.1", "f604d7e6a8be9fda4a9b0f6cebbd633deba569f85dbff70c4d25d99a6f023177", [:mix], [{:ecto_sql, "~> 3.6", [hex: :ecto_sql, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.16", [hex: :postgrex, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9b1844c2b74e0d788b73e5144b0c9d5674cb775eae29d88a36f3c3b48d42d058"},
+  "oban": {:hex, :oban, "2.13.3", "57c80ceb75489e126218b8a82ec5e4fee01b6588a81b566650bb8167db4111f3", [:mix], [{:ecto_sql, "~> 3.6", [hex: :ecto_sql, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.16", [hex: :postgrex, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "8e997bddae17ec92bd12293f8b44f252f2f92ec03c54826390d1237a51ea47b2"},
   "paasaa": {:hex, :paasaa, "0.6.0", "07c8ed81010caa25db351d474f0c053072c809821c60f9646f7b1547bec52f6d", [:mix], [], "hexpm", "732ddfc21bac0831edb26aec468af3ec2b8997d74f6209810b1cc53199c29f2e"},
   "parse_trans": {:hex, :parse_trans, "3.3.1", "16328ab840cc09919bd10dab29e431da3af9e9e7e7e6f0089dd5a2d2820011d8", [:rebar3], [], "hexpm", "07cd9577885f56362d414e8c4c4e6bdf10d43a8767abb92d24cbe8b24c54888b"},
-  "phoenix": {:hex, :phoenix, "1.6.10", "7a9e8348c5c62e7fd2f74a1884b88d98251f87186a430048bfbdbab3e3f46736", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 1.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "08cf70d42f61dd0ea381805bac3cddef57b7b92ade5acc6f6036aa25ecaca9a2"},
+  "phoenix": {:hex, :phoenix, "1.6.12", "f8f8ac077600f84419806dd53114b2e77aedde7a502e74181a7d886355aa0643", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 1.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "2d6cf5583c9c20f7103c40e6014ef802d96553b8e5d6585ad6e627bd5ddb0d12"},
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.0", "0672ed4e4808b3fbed494dded89958e22fb882de47a97634c0b13e7b0b5f7720", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "09864e558ed31ee00bd48fcc1d4fc58ae9678c9e81649075431e69dbabb43cc1"},
   "phoenix_html": {:hex, :phoenix_html, "3.2.0", "1c1219d4b6cb22ac72f12f73dc5fad6c7563104d083f711c3fcd8551a1f4ae11", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "36ec97ba56d25c0136ef1992c37957e4246b649d620958a1f9fa86165f8bc54f"},
   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.3.3", "3a53772a6118d5679bf50fc1670505a290e32a1d195df9e069d8c53ab040c054", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "766796676e5f558dbae5d1bdb066849673e956005e3730dfd5affd7a6da4abac"},
-  "phoenix_live_view": {:hex, :phoenix_live_view, "0.17.10", "a8b61b1a825dc1f9c0808583c2a7e8d18dfbe22edb6d7271744a2013eca8adb1", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3e77cf0fc9909e9e87fa48f82fa3c4e6f471b19edf481b1b1b31e7d47810f235"},
+  "phoenix_live_view": {:hex, :phoenix_live_view, "0.17.11", "205f6aa5405648c76f2abcd57716f42fc07d8f21dd8ea7b262dd12b324b50c95", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.1", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7177791944b7f90ed18f5935a6a5f07f760b36f7b3bdfb9d28c57440a3c43f99"},
   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.1.1", "ba04e489ef03763bf28a17eb2eaddc2c20c6d217e2150a61e3298b0f4c2012b5", [:mix], [], "hexpm", "81367c6d1eea5878ad726be80808eb5a787a23dee699f96e72b1109c57cdd8d9"},
   "phoenix_swoosh": {:hex, :phoenix_swoosh, "1.0.1", "0db6eb6405a6b06cae4fdf4144659b3f4fee4553e2856fe8a53ba12e9fb21a74", [:mix], [{:finch, "~> 0.8", [hex: :finch, repo: "hexpm", optional: true]}, {:hackney, "~> 1.10", [hex: :hackney, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.6", [hex: :phoenix, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_view, "~> 1.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:swoosh, "~> 1.5", [hex: :swoosh, repo: "hexpm", optional: false]}], "hexpm", "e34890004baec08f0fa12bd8c77bf64bfb4156b84a07fb79da9322fa94bc3781"},
   "phoenix_view": {:hex, :phoenix_view, "1.1.2", "1b82764a065fb41051637872c7bd07ed2fdb6f5c3bd89684d4dca6e10115c95a", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "7ae90ad27b09091266f6adbb61e1d2516a7c3d7062c6789d46a7554ec40f3a56"},
   "plug": {:hex, :plug, "1.13.6", "187beb6b67c6cec50503e940f0434ea4692b19384d47e5fdfd701e93cadb4cc2", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "02b9c6b9955bce92c829f31d6284bf53c591ca63c4fb9ff81dfd0418667a34ff"},
   "plug_cowboy": {:hex, :plug_cowboy, "2.5.2", "62894ccd601cf9597e2c23911ff12798a8a18d237e9739f58a6b04e4988899fe", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "ea6e87f774c8608d60c8d34022a7d073bd7680a0a013f049fc62bf35efea1044"},
-  "plug_crypto": {:hex, :plug_crypto, "1.2.2", "05654514ac717ff3a1843204b424477d9e60c143406aa94daf2274fdd280794d", [:mix], [], "hexpm", "87631c7ad914a5a445f0a3809f99b079113ae4ed4b867348dd9eec288cecb6db"},
-  "postgrex": {:hex, :postgrex, "0.16.3", "fac79a81a9a234b11c44235a4494d8565303fa4b9147acf57e48978a074971db", [:mix], [{:connection, "~> 1.1", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "aeaae1d2d1322da4e5fe90d241b0a564ce03a3add09d7270fb85362166194590"},
+  "plug_crypto": {:hex, :plug_crypto, "1.2.3", "8f77d13aeb32bfd9e654cb68f0af517b371fb34c56c9f2b58fe3df1235c1251a", [:mix], [], "hexpm", "b5672099c6ad5c202c45f5a403f21a3411247f164e4a8fab056e5cd8a290f4a2"},
+  "postgrex": {:hex, :postgrex, "0.16.4", "26d998467b4a22252285e728a29d341e08403d084e44674784975bb1cd00d2cb", [:mix], [{:connection, "~> 1.1", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:table, "~> 0.1.0", [hex: :table, repo: "hexpm", optional: true]}], "hexpm", "3234d1a70cb7b1e0c95d2e242785ec2a7a94a092bbcef4472320b950cfd64c5f"},
   "progress_bar": {:hex, :progress_bar, "2.0.1", "7b40200112ae533d5adceb80ff75fbe66dc753bca5f6c55c073bfc122d71896d", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}], "hexpm", "2519eb58a2f149a3a094e729378256d8cb6d96a259ec94841bd69fdc71f18f87"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "remote_ip": {:hex, :remote_ip, "1.0.0", "3d7fb45204a5704443f480cee9515e464997f52c35e0a60b6ece1f81484067ae", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "9e9fcad4e50c43b5234bb6a9629ed6ab223f3ed07147bd35470e4ee5c8caf907"},
@@ -124,14 +124,14 @@
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.6", "cf344f5692c82d2cd7554f5ec8fd961548d4fd09e7d22f5b62482e5aeaebd4b0", [:make, :mix, :rebar3], [], "hexpm", "bdb0d2471f453c88ff3908e7686f86f9be327d065cc1ec16fa4540197ea04680"},
   "struct_access": {:hex, :struct_access, "1.1.2", "a42e6ceedd9b9ea090ee94a6da089d56e16f374dbbc010c3eebdf8be17df286f", [:mix], [], "hexpm", "e4c411dcc0226081b95709909551fc92b8feb1a3476108348ea7e3f6c12e586a"},
   "sweet_xml": {:hex, :sweet_xml, "0.7.3", "debb256781c75ff6a8c5cbf7981146312b66f044a2898f453709a53e5031b45b", [:mix], [], "hexpm", "e110c867a1b3fe74bfc7dd9893aa851f0eed5518d0d7cad76d7baafd30e4f5ba"},
-  "swoosh": {:hex, :swoosh, "1.7.1", "53bb5b8efaf5577bbad1480fb057d8bcb7b16097aa015ab9f369a01592c961ec", [:mix], [{:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "8206d7da5038f0e11292b775b7e588fcd5dc74ac4dd8b661fe72f58207234747"},
+  "swoosh": {:hex, :swoosh, "1.8.0", "51b3cfe5bb08196eba0f64b0e30f589533915b5088dd203fde110f29704289db", [:mix], [{:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "fd77341d3e775a81fccfd26baacb9a47328ac8c27df0fb1d06f0312306721472"},
   "telemetry": {:hex, :telemetry, "1.1.0", "a589817034a27eab11144ad24d5c0f9fab1f58173274b1e9bae7074af9cbee51", [:rebar3], [], "hexpm", "b727b2a1f75614774cff2d7565b64d0dfa5bd52ba517f16543e6fc7efcc0df48"},
   "tesla": {:hex, :tesla, "1.4.4", "bb89aa0c9745190930366f6a2ac612cdf2d0e4d7fff449861baa7875afd797b2", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}, {:exjsx, ">= 3.0.0", [hex: :exjsx, repo: "hexpm", optional: true]}, {:finch, "~> 0.3", [hex: :finch, repo: "hexpm", optional: true]}, {:fuse, "~> 2.4", [hex: :fuse, repo: "hexpm", optional: true]}, {:gun, "~> 1.3", [hex: :gun, repo: "hexpm", optional: true]}, {:hackney, "~> 1.6", [hex: :hackney, repo: "hexpm", optional: true]}, {:ibrowse, "4.4.0", [hex: :ibrowse, repo: "hexpm", optional: true]}, {:jason, ">= 1.0.0", [hex: :jason, repo: "hexpm", optional: true]}, {:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mint, "~> 1.0", [hex: :mint, repo: "hexpm", optional: true]}, {:poison, ">= 1.0.0", [hex: :poison, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm", "d5503a49f9dec1b287567ea8712d085947e247cb11b06bc54adb05bfde466457"},
-  "timex": {:hex, :timex, "3.7.8", "0e6e8bf7c0aba95f1e13204889b2446e7a5297b1c8e408f15ab58b2c8dc85f81", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:gettext, "~> 0.10", [hex: :gettext, repo: "hexpm", optional: false]}, {:tzdata, "~> 1.1", [hex: :tzdata, repo: "hexpm", optional: false]}], "hexpm", "8f3b8edc5faab5205d69e5255a1d64a83b190bab7f16baa78aefcb897cf81435"},
-  "tz_world": {:hex, :tz_world, "1.0.0", "53366d7ec1d3fb11e1a34ce7c74d21c354195521b3309cdb9e6cc84b266cae83", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.5", [hex: :certifi, repo: "hexpm", optional: true]}, {:geo, "~> 1.0 or ~> 2.0 or ~> 3.3", [hex: :geo, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "9d7aeaa078913b6d486d2a1bf3c1fd380cb16180b93415c7f3fde7cabff478f8"},
+  "timex": {:hex, :timex, "3.7.9", "790cdfc4acfce434e442f98c02ea6d84d0239073bfd668968f82ac63e9a6788d", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:gettext, "~> 0.10", [hex: :gettext, repo: "hexpm", optional: false]}, {:tzdata, "~> 1.1", [hex: :tzdata, repo: "hexpm", optional: false]}], "hexpm", "64691582e5bb87130f721fc709acfb70f24405833998fabf35be968984860ce1"},
+  "tz_world": {:hex, :tz_world, "1.1.0", "af078ccbc63b618912d05a18402abf450252535a086e5a5e5189b54b710e5653", [:mix], [{:castore, "~> 0.1", [hex: :castore, repo: "hexpm", optional: true]}, {:certifi, "~> 2.5", [hex: :certifi, repo: "hexpm", optional: true]}, {:geo, "~> 1.0 or ~> 2.0 or ~> 3.3", [hex: :geo, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "8e0a89a8e00968e0260f3176cab03c8960393cc10990ad10622d9eceb7ccfbe6"},
   "tzdata": {:hex, :tzdata, "1.1.1", "20c8043476dfda8504952d00adac41c6eda23912278add38edc140ae0c5bcc46", [:mix], [{:hackney, "~> 1.17", [hex: :hackney, repo: "hexpm", optional: false]}], "hexpm", "a69cec8352eafcd2e198dea28a34113b60fdc6cb57eb5ad65c10292a6ba89787"},
-  "ueberauth": {:hex, :ueberauth, "0.9.0", "9f2dc8f6158fc09d048da0c1a548a4b2f9326bf01a35acdcaa94f4bc5b936c9a", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "6d6e0c6f7191b8d25153ae3596b3d98b5c06f9bb887d1e2d7b98b74eff3d189b"},
-  "ueberauth_cas": {:hex, :ueberauth_cas, "2.2.0", "5f912ed625b5d77fd48b15047d589fbe594427856feadd378d8f8369f17a36fe", [:mix], [{:httpoison, "~> 1.8", [hex: :httpoison, repo: "hexpm", optional: false]}, {:sweet_xml, "~> 0.7", [hex: :sweet_xml, repo: "hexpm", optional: false]}, {:ueberauth, "~> 0.6", [hex: :ueberauth, repo: "hexpm", optional: false]}], "hexpm", "aaa2866b83a7bd95fdc60d809e175647e299508b2bb362c1a7d7868181e00856"},
+  "ueberauth": {:hex, :ueberauth, "0.10.3", "4a3bd7ab7b5d93d301d264f0f6858392654ee92171f4437d067d1ae227c051d9", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "1394f36a6c64e97f2038cf95228e7e52b4cb75417962e30418fbe9902b30e6d3"},
+  "ueberauth_cas": {:hex, :ueberauth_cas, "2.3.1", "df45a1f2c5df8bc80191cbca4baeeed808d697702ec5ebe5bd5d5a264481752f", [:mix], [{:httpoison, "~> 1.8", [hex: :httpoison, repo: "hexpm", optional: false]}, {:sweet_xml, "~> 0.7", [hex: :sweet_xml, repo: "hexpm", optional: false]}, {:ueberauth, "~> 0.6", [hex: :ueberauth, repo: "hexpm", optional: false]}], "hexpm", "5068ae2b9e217c2f05aa9a67483a6531e21ba0be9a6f6c8749bb7fd1599be321"},
   "ueberauth_discord": {:hex, :ueberauth_discord, "0.7.0", "463f6dfe1ed10a76739331ce8e1dd3600ab611f10524dd828eb3aa50e76e9d43", [:mix], [{:oauth2, "~> 1.0 or ~> 2.0", [hex: :oauth2, repo: "hexpm", optional: false]}, {:ueberauth, "~> 0.7", [hex: :ueberauth, repo: "hexpm", optional: false]}], "hexpm", "d6f98ef91abb4ddceada4b7acba470e0e68c4d2de9735ff2f24172a8e19896b4"},
   "ueberauth_facebook": {:hex, :ueberauth_facebook, "0.10.0", "0d607fbd1b7c6e0449981571027d869c2d156b8ad20c42e3672346678c05ccf1", [:mix], [{:oauth2, "~> 1.0 or ~> 2.0", [hex: :oauth2, repo: "hexpm", optional: false]}, {:ueberauth, "~> 0.7", [hex: :ueberauth, repo: "hexpm", optional: false]}], "hexpm", "bf8ce5d66b1c50da8abff77e8086c1b710bdde63f4acaef19a651ba43a9537a8"},
   "ueberauth_github": {:hex, :ueberauth_github, "0.8.1", "0be487b5afc29bc805fa5e31636f37c8f09d5159ef73fc08c4c7a98c9cfe2c18", [:mix], [{:oauth2, "~> 1.0 or ~> 2.0", [hex: :oauth2, repo: "hexpm", optional: false]}, {:ueberauth, "~> 0.7.0", [hex: :ueberauth, repo: "hexpm", optional: false]}], "hexpm", "143d6130b945ea9bdbd0ef94987f40788f1d7e8090decbfc0722773155e7a74a"},
@@ -140,7 +140,9 @@
   "ueberauth_keycloak_strategy": {:hex, :ueberauth_keycloak_strategy, "0.3.0", "262f25ae9a38886e13a954919a873ae6ea9adf73cf8875eec74b945f0b2c7b2b", [:mix], [{:oauth2, "~> 2.0", [hex: :oauth2, repo: "hexpm", optional: false]}, {:ueberauth, "~> 0.7", [hex: :ueberauth, repo: "hexpm", optional: false]}], "hexpm", "d1a0abad08cd5e39722a9899200583b03ac63fee0c264799018ef06eb989db31"},
   "ueberauth_twitter": {:hex, :ueberauth_twitter, "0.4.1", "92f88b1ad50322cdda719b439bb7f93b225dc0315723117bc25c782e627c8f33", [:mix], [{:httpoison, "~> 1.0", [hex: :httpoison, repo: "hexpm", optional: false]}, {:oauther, "~> 1.1", [hex: :oauther, repo: "hexpm", optional: false]}, {:ueberauth, "~> 0.7", [hex: :ueberauth, repo: "hexpm", optional: false]}], "hexpm", "83ca8ea3e1a3f976f1adbebfb323b9ebf53af453fbbf57d0486801a303b16065"},
   "unicode_util_compat": {:hex, :unicode_util_compat, "0.7.0", "bc84380c9ab48177092f43ac89e4dfa2c6d62b40b8bd132b1059ecc7232f9a78", [:rebar3], [], "hexpm", "25eee6d67df61960cf6a794239566599b09e17e668d3700247bc498638152521"},
+  "unplug": {:hex, :unplug, "1.0.0", "8ec2479de0baa9a6283c04a1cc616c5ca6c5b80b8ff1d857481bb2943368dbbc", [:mix], [{:plug, "~> 1.8", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "d171a85758aa412d4e85b809c203e1b1c4c76a4d6ab58e68dc9a8a8acd9b7c3a"},
   "unsafe": {:hex, :unsafe, "1.0.1", "a27e1874f72ee49312e0a9ec2e0b27924214a05e3ddac90e91727bc76f8613d8", [:mix], [], "hexpm", "6c7729a2d214806450d29766abc2afaa7a2cbecf415be64f36a6691afebb50e5"},
+  "vite_phx": {:hex, :vite_phx, "0.3.0", "c57fc4a66eb2252b3a78bab884e204267cd13a90920b7905001cb2fc67d2afec", [:mix], [{:jason, ">= 0.0.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, ">= 0.0.0", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "55cae911dc8c43e75f2dab032035d34414f92b87ef030e5dbfcba65b5c248947"},
   "web_push_encryption": {:git, "https://github.com/danhper/elixir-web-push-encryption.git", "70f00d06cbd88c9ac382e0ad2539e54448e9d8da", []},
   "xml_builder": {:hex, :xml_builder, "2.2.0", "cc5f1eeefcfcde6e90a9b77fb6c490a20bc1b856a7010ce6396f6da9719cbbab", [:mix], [], "hexpm", "9d66d52fb917565d358166a4314078d39ef04d552904de96f8e73f68f64a62c9"},
 }
diff --git a/test/federation/activity_pub/transmogrifier/delete_test.exs b/test/federation/activity_pub/transmogrifier/delete_test.exs
index c5b4a8457..73a5ad0ce 100644
--- a/test/federation/activity_pub/transmogrifier/delete_test.exs
+++ b/test/federation/activity_pub/transmogrifier/delete_test.exs
@@ -118,7 +118,7 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier.DeleteTest do
 
       {:ok, _activity, _actor} = Transmogrifier.handle_incoming(data)
 
-      assert %{success: 1, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :background)
 
       assert {:error, :actor_not_found} = Actors.get_actor_by_url(url)
diff --git a/test/federation/activity_pub/transmogrifier/update_test.exs b/test/federation/activity_pub/transmogrifier/update_test.exs
index b8411df20..1ae8f3ba5 100644
--- a/test/federation/activity_pub/transmogrifier/update_test.exs
+++ b/test/federation/activity_pub/transmogrifier/update_test.exs
@@ -98,7 +98,8 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier.UpdateTest do
         args: %{event_id: event_id, op: :insert_search_event}
       )
 
-      assert %{success: 1, snoozed: 0, failure: 0, discard: 0} == Oban.drain_queue(queue: :search)
+      assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
+               Oban.drain_queue(queue: :search)
 
       update_data = File.read!("test/fixtures/mastodon-update.json") |> Jason.decode!()
 
@@ -123,7 +124,8 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier.UpdateTest do
         args: %{event_id: event_id, op: :update_search_event}
       )
 
-      assert %{success: 1, snoozed: 0, failure: 0, discard: 0} == Oban.drain_queue(queue: :search)
+      assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
+               Oban.drain_queue(queue: :search)
 
       assert event.title == "My updated event"
 
diff --git a/test/graphql/api/search_test.exs b/test/graphql/api/search_test.exs
index 7ef116467..b222d8fba 100644
--- a/test/graphql/api/search_test.exs
+++ b/test/graphql/api/search_test.exs
@@ -51,6 +51,7 @@ defmodule Mobilizon.GraphQL.API.SearchTest do
             actor_type: :Person,
             radius: nil,
             location: nil,
+            bbox: nil,
             minimum_visibility: :public,
             current_actor_id: nil,
             exclude_my_groups: false,
diff --git a/test/graphql/resolvers/activity_test.exs b/test/graphql/resolvers/activity_test.exs
index 3eff21afb..edebb3b7d 100644
--- a/test/graphql/resolvers/activity_test.exs
+++ b/test/graphql/resolvers/activity_test.exs
@@ -182,7 +182,7 @@ defmodule Mobilizon.GraphQL.Resolvers.ActivityTest do
       event = insert(:event, attributed_to: group, organizer_actor: actor)
       EventActivity.insert_activity(event, subject: "event_created")
 
-      assert %{success: 1, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :activity)
 
       assert Activities.list_activities() |> length() == 1
@@ -234,7 +234,7 @@ defmodule Mobilizon.GraphQL.Resolvers.ActivityTest do
       EventActivity.insert_activity(event, subject: "event_created")
       PostActivity.insert_activity(post, subject: "post_created")
 
-      assert %{success: 2, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 2, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :activity)
 
       assert Activities.list_activities() |> length() == 2
@@ -281,7 +281,7 @@ defmodule Mobilizon.GraphQL.Resolvers.ActivityTest do
       EventActivity.insert_activity(event, subject: "event_created")
       PostActivity.insert_activity(post, subject: "post_created")
 
-      assert %{success: 2, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 2, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :activity)
 
       assert Activities.list_activities() |> length() == 2
@@ -328,7 +328,7 @@ defmodule Mobilizon.GraphQL.Resolvers.ActivityTest do
       Posts.delete_post(post)
       PostActivity.insert_activity(post, subject: "post_deleted")
 
-      assert %{success: 2, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 2, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :activity)
 
       assert Activities.list_activities() |> length() == 2
diff --git a/test/graphql/resolvers/group_test.exs b/test/graphql/resolvers/group_test.exs
index 225b8f842..528014741 100644
--- a/test/graphql/resolvers/group_test.exs
+++ b/test/graphql/resolvers/group_test.exs
@@ -411,7 +411,7 @@ defmodule Mobilizon.Web.Resolvers.GroupTest do
 
       # Can't be used right now, probably because we try to run a transaction in a Oban Job while using Ecto Sandbox
 
-      # assert %{success: 1, snoozed: 0, failure: 0, discard: 0} == Oban.drain_queue(queue: :background)
+      # assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} == Oban.drain_queue(queue: :background)
 
       # res =
       #   conn
diff --git a/test/graphql/resolvers/person_test.exs b/test/graphql/resolvers/person_test.exs
index dabdf3dfb..7169240d0 100644
--- a/test/graphql/resolvers/person_test.exs
+++ b/test/graphql/resolvers/person_test.exs
@@ -568,7 +568,7 @@ defmodule Mobilizon.GraphQL.Resolvers.PersonTest do
         }
       )
 
-      assert %{success: 1, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :background)
 
       query = """
@@ -769,7 +769,7 @@ defmodule Mobilizon.GraphQL.Resolvers.PersonTest do
       assert is_nil(res["errors"])
       assert res["data"]["suspendProfile"]["id"] == to_string(remote_profile_id)
 
-      assert %{success: 1, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :background)
 
       res =
diff --git a/test/graphql/resolvers/user_test.exs b/test/graphql/resolvers/user_test.exs
index c54fc0764..cee7e898e 100644
--- a/test/graphql/resolvers/user_test.exs
+++ b/test/graphql/resolvers/user_test.exs
@@ -172,7 +172,7 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
         )
 
       assert res["data"]["user"] == nil
-      assert hd(res["errors"])["message"] == "User with ID #{0} not found"
+      assert hd(res["errors"])["message"] == "User not found"
     end
 
     test "get_current_user/3 returns the current logged-in user", %{conn: conn} do
@@ -1478,7 +1478,7 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
 
       assert is_nil(Users.get_user(user.id))
 
-      assert %{success: 2, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 2, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :background)
 
       assert_raise Ecto.NoResultsError, fn ->
diff --git a/test/mobilizon/actors/actors_test.exs b/test/mobilizon/actors/actors_test.exs
index 4ddfc333a..5d6914eb4 100644
--- a/test/mobilizon/actors/actors_test.exs
+++ b/test/mobilizon/actors/actors_test.exs
@@ -349,7 +349,7 @@ defmodule Mobilizon.ActorsTest do
         }
       )
 
-      assert %{success: 1, snoozed: 0, failure: 0, discard: 0} ==
+      assert %{success: 1, snoozed: 0, failure: 0, discard: 0, cancelled: 0} ==
                Oban.drain_queue(queue: :background)
 
       assert %Actor{
diff --git a/test/web/plugs/http_security_plug_test.exs b/test/web/plugs/http_security_plug_test.exs
index 9889f1dd7..6abd6a6cb 100644
--- a/test/web/plugs/http_security_plug_test.exs
+++ b/test/web/plugs/http_security_plug_test.exs
@@ -73,7 +73,7 @@ defmodule Mobilizon.Web.Plugs.HTTPSecurityPlugTest do
       [csp] = Conn.get_resp_header(conn, "content-security-policy")
 
       assert csp =~
-               ~r/script-src 'self' 'unsafe-eval' 'sha256-[\w+\/=]*' example.com matomo.example.com ;/
+               ~r/script-src 'self' 'unsafe-eval' 'sha256-[\w+\/=]*' example.com matomo.example.com  ;/
     end
   end
 
diff --git a/test/web/views/error_view_test.exs b/test/web/views/error_view_test.exs
index 419c94a2f..9948cd328 100644
--- a/test/web/views/error_view_test.exs
+++ b/test/web/views/error_view_test.exs
@@ -13,7 +13,7 @@ defmodule Mobilizon.Web.ErrorViewTest do
              render_to_string(ErrorView, "404.html", %{conn: conn}),
              " "
            ) =~
-             "We're sorry but mobilizon doesn't work properly without JavaScript enabled. Please enable it to continue."
+             "We're sorry but Mobilizon doesn't work properly without JavaScript enabled. Please enable it to continue."
   end
 
   test "render 500.html" do