Merge branch 'mail-notifications' into 'master'

Notifications Closes #706, #705 et #710 See merge request framasoft/mobilizon!930
2021-06-07 06:22:41 +00:00 · 2021-06-07 06:22:41 +00:00 · 31414c8242
commit 31414c8242
parent adaaef6914 6d9170cdb6
331 changed files with 18696 additions and 9258 deletions
--- a/.gitignore
+++ b/.gitignore
@ -26,6 +26,7 @@ priv/data/*
 !priv/data/.gitkeep
 priv/errors/*
 !priv/errors/.gitkeep
+priv/cert/
 .vscode/
 cover/
 site/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## 1.1.4 - 19-05-2021
+## 1.1.4 - 2021-05-19

 ### Fixes

@ -20,7 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Galician
 - Italian

-## 1.1.3 - 03-05-2021
+## 1.1.3 - 2021-05-03

 ### Changed

@ -39,7 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Russian
 - Spanish

-## 1.1.2 - 28-04-2021
+## 1.1.2 - 2021-04-28

 ### Changed

@ -64,7 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Slovenian
 - Russian

-## 1.1.1 - 22-04-2021
+## 1.1.1 - 2021-04-22

 ### Changed

@ -96,7 +96,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed editing an user's email in CLI
 - Fixed suspended actors being refreshed

-
 ### Translations

 - Gaelic
@ -107,7 +106,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Slovenian
 - Spanish

-## 1.1.0 - 31-03-2021
+## 1.1.0 - 2021-03-31

 This version introduces a new way to install and host Mobilizon : Elixir releases. This is the new default way of installing Mobilizon. Please read [UPGRADE.md](./UPGRADE.md#upgrading-from-10-to-11) for details on how to migrate to Elixir binary releases or stay on source install.

@ -203,7 +202,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Slovenian
 - Spanish

-## 1.1.0-rc.3 - 30-03-2021
+## 1.1.0-rc.3 - 2021-03-30

 ### Changed

@ -214,7 +213,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed parsing the IP from the MOBILIZON_INSTANCE_LISTEN_IP env variable for Docker
 - Fixed release startup in Docker container

-## 1.1.0-rc.2 - 30-03-2021
+## 1.1.0-rc.2 - 2021-03-30

 ### Added

@ -238,7 +237,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Hungarian
 - Russian
 - Spanish
-## 1.1.0-rc.1 - 29-03-2021
+## 1.1.0-rc.1 - 2021-03-29

 ### Added

@ -282,17 +281,17 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Slovenian
 - Spanish

-## 1.1.0-beta.6 - 17-03-2021
+## 1.1.0-beta.6 - 2021-03-17

 ### Fixed
 - Fixed a typo in range/radius showing the wrong radius for close events on homepage

-## 1.1.0-beta.5 - 17-03-2021
+## 1.1.0-beta.5 - 2021-03-17

 ### Fixed
 - Fixed a typo in range/radius preventing close events from showing up

-## 1.1.0-beta.4 - 17-03-2021
+## 1.1.0-beta.4 - 2021-03-17

 ### Fixed

@ -300,13 +299,13 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed location field not showing in preferences if setting not already set
 - Fixed lasts events published order on the homepage

-## 1.1.0-beta.3 - 16-03-2021
+## 1.1.0-beta.3 - 2021-03-16

 ### Fixed
 - Handle ActivityPub Fetcher returning text that's not JSON
 - Fix accessing a group profile when not a member

-## 1.1.0-beta.2 - 16-03-2021
+## 1.1.0-beta.2 - 2021-03-16

 ### Fixed
 - Fixed geospatial configuration only being evaluated at compile-time, not at runtime
@ -314,7 +313,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 ### Translations
 - Slovenian

-## 1.1.0-beta.1 - 10-03-2021
+## 1.1.0-beta.1 - 2021-03-10

 This version introduces a new way to install and host Mobilizon : Elixir releases. This is the new default way of installing Mobilizon. Please read [UPGRADE.md](./UPGRADE.md#upgrading-from-10-to-11) for details on how to migrate to Elixir binary releases or stay on source install.

@ -370,7 +369,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Spanish
 - Russian

-## 1.0.7 - 27-02-2021
+## 1.0.7 - 2021-02-27

 ### Fixed

@ -380,7 +379,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed search form display
 - Fixed wrong year in CHANGELOG.md

-## 1.0.6 - 04-02-2021
+## 1.0.6 - 2021-02-04

 ### Added

@ -392,13 +391,13 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed sending events & posts to group followers
 - Fixed redirection after deleting an event

-## 1.0.5 - 27-01-2021
+## 1.0.5 - 2021-01-27

 ### Fixed

 - Fixed duplicate entries in search with empty search query

-## 1.0.4 - 26-01-2021
+## 1.0.4 - 2021-02-26

 ### Added

@ -445,7 +444,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Spanish
 - Swedish

-## 1.0.3 - 18-12-2020
+## 1.0.3 - 2020-12-18

 **This release adds new migrations, be sure to run them before restarting Mobilizon**

--- a/config/config.exs
+++ b/config/config.exs
@ -44,9 +44,6 @@ config :mobilizon, :events, creation: true

 # Configures the endpoint
 config :mobilizon, Mobilizon.Web.Endpoint,
-  http: [
-    transport_options: [socket_opts: [:inet6]]
-  ],
  url: [
    host: "mobilizon.local",
    scheme: "https"
@ -123,14 +120,19 @@ config :logger, Sentry.LoggerBackend,
  level: :warn,
  capture_log_messages: true

-config :mobilizon, Mobilizon.Web.Auth.Guardian, issuer: "mobilizon"
+config :mobilizon, Mobilizon.Web.Auth.Guardian,
+  issuer: "mobilizon",
+  token_ttl: %{
+    "access" => {15, :minutes},
+    "refresh" => {60, :days}
+  }

 config :guardian, Guardian.DB,
  repo: Mobilizon.Storage.Repo,
  # default
  schema_name: "guardian_tokens",
  # store all token types if not set
-  # token_types: ["refresh_token"],
+  token_types: ["refresh"],
  # default: 60 minutes
  sweep_interval: 60

@ -170,6 +172,9 @@ config :phoenix, :format_encoders, json: Jason, "activity-json": Jason
 config :phoenix, :json_library, Jason
 config :phoenix, :filter_parameters, ["password", "token"]

+config :absinthe, schema: Mobilizon.GraphQL.Schema
+config :absinthe, Absinthe.Logger, filter_variables: ["token", "password", "secret"]
+
 config :ex_cldr,
  default_locale: "en",
  default_backend: Mobilizon.Cldr
@ -265,7 +270,7 @@ config :mobilizon, :anonymous,
 config :mobilizon, Oban,
  repo: Mobilizon.Storage.Repo,
  log: false,
-  queues: [default: 10, search: 5, mailers: 10, background: 5, activity: 5],
+  queues: [default: 10, search: 5, mailers: 10, background: 5, activity: 5, notifications: 5],
  plugins: [
    {Oban.Plugins.Cron,
     crontab: [
@ -298,6 +303,16 @@ config :mobilizon, :external_resource_providers, %{
  "https://docs.google.com/spreadsheets/" => :google_spreadsheets
 }

+config :mobilizon, Mobilizon.Service.Notifier,
+  notifiers: [
+    Mobilizon.Service.Notifier.Email,
+    Mobilizon.Service.Notifier.Push
+  ]
+
+config :mobilizon, Mobilizon.Service.Notifier.Email, enabled: true
+
+config :mobilizon, Mobilizon.Service.Notifier.Push, enabled: true
+
 # 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"
--- a/config/dev.exs
+++ b/config/dev.exs
@ -24,7 +24,8 @@ config :mobilizon, Mobilizon.Web.Endpoint,
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
-      "--watch-stdin",
+      "--watch",
+      "--watch-options-stdin",
      "--config",
      "node_modules/@vue/cli-service/webpack.config.js",
      cd: Path.expand("../js", __DIR__)
--- a/config/prod.exs
+++ b/config/prod.exs
@ -43,9 +43,6 @@ cond do
      File.exists?("./config/#{System.get_env("INSTANCE_CONFIG")}") ->
    import_config System.get_env("INSTANCE_CONFIG")

-  File.exists?("./config/prod.secret.exs") ->
-    import_config "prod.secret.exs"
-
  true ->
    :ok
 end
--- a/js/.browserslistrc
+++ b/js/.browserslistrc
@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11
--- a/js/.eslintrc.js
+++ b/js/.eslintrc.js
@ -8,8 +8,8 @@ module.exports = {
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
-    "@vue/prettier",
    "@vue/typescript/recommended",
+    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],

--- a/js/package.json
+++ b/js/package.json
@ -8,12 +8,13 @@
    "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
-    "build:assets": "vue-cli-service build --modern",
+    "build:assets": "vue-cli-service build",
    "build:pictures": "bash ./scripts/build/pictures.sh"
  },
  "dependencies": {
    "@absinthe/socket": "^0.2.1",
    "@absinthe/socket-apollo-link": "^0.2.1",
+    "@apollo/client": "^3.3.16",
    "@mdi/font": "^5.0.45",
    "@tiptap/core": "^2.0.0-beta.41",
    "@tiptap/extension-blockquote": "^2.0.0-beta.6",
@ -29,14 +30,6 @@
    "@tiptap/starter-kit": "^2.0.0-beta.37",
    "@tiptap/vue-2": "^2.0.0-beta.21",
    "apollo-absinthe-upload-link": "^1.5.0",
-    "apollo-cache": "^1.3.5",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-link-ws": "^1.0.19",
-    "apollo-utilities": "^1.3.2",
    "buefy": "^0.9.0",
    "bulma-divider": "^0.2.0",
    "core-js": "^3.6.4",
@ -44,13 +37,14 @@
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "intersection-observer": "^0.12.0",
+    "jwt-decode": "^3.1.2",
    "leaflet": "^1.4.0",
    "leaflet.locatecontrol": "^0.73.0",
    "lodash": "^4.17.11",
    "ngeohash": "^0.6.3",
    "p-debounce": "^4.0.0",
    "phoenix": "^1.4.11",
-    "register-service-worker": "^1.7.1",
+    "register-service-worker": "^1.7.2",
    "tippy.js": "^6.2.3",
    "unfetch": "^4.2.0",
    "v-tooltip": "^2.1.3",
@ -78,36 +72,34 @@
    "@types/vuedraggable": "^2.23.0",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-plugin-pwa": "~4.5.13",
-    "@vue/cli-plugin-router": "~4.5.13",
-    "@vue/cli-plugin-typescript": "~4.5.13",
-    "@vue/cli-plugin-unit-jest": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
+    "@vue/cli-plugin-babel": "~5.0.0-beta.0",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.0",
+    "@vue/cli-plugin-eslint": "~5.0.0-beta.0",
+    "@vue/cli-plugin-pwa": "~5.0.0-beta.0",
+    "@vue/cli-plugin-router": "~5.0.0-beta.0",
+    "@vue/cli-plugin-typescript": "~5.0.0-beta.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0-beta.0",
+    "@vue/cli-service": "~5.0.0-beta.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^1.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.20.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.6.0",
    "flush-promises": "^1.0.2",
    "jest-junit": "^12.0.0",
-    "mock-apollo-client": "^0.6",
+    "mock-apollo-client": "^1.1.0",
    "prettier": "^2.2.1",
    "prettier-eslint": "^12.0.0",
-    "sass": "^1.29.0",
-    "sass-loader": "^8.0.2",
+    "sass": "^1.34.1",
+    "sass-loader": "^12.0.0",
+    "ts-jest": "^26.5.3",
    "typescript": "~4.1.5",
-    "vue-cli-plugin-svg": "~0.1.3",
    "vue-i18n-extract": "^1.0.2",
+    "vue-jest": "^4.0.1",
    "vue-template-compiler": "^2.6.11",
-    "webpack-cli": "^3.3"
-  },
-  "resolutions": {
-    "workbox-webpack-plugin": "5.1.3"
+    "webpack-cli": "^4.7.0"
  }
 }
--- a/js/public/favicon.ico
+++ b/js/public/favicon.ico
--- a/js/public/img/icons/android-chrome-192x192
+++ b/js/public/img/icons/android-chrome-192x192
--- a/js/public/img/icons/android-chrome-192x192.png
+++ b/js/public/img/icons/android-chrome-192x192.png
--- a/js/public/img/icons/android-chrome-512x512.png
+++ b/js/public/img/icons/android-chrome-512x512.png
--- a/js/public/img/icons/android-chrome-maskable-192x192.png
+++ b/js/public/img/icons/android-chrome-maskable-192x192.png
--- a/js/public/img/icons/android-chrome-maskable-512x512.png
+++ b/js/public/img/icons/android-chrome-maskable-512x512.png
--- a/js/public/img/icons/apple-touch-icon-120x120.png
+++ b/js/public/img/icons/apple-touch-icon-120x120.png
--- a/js/public/img/icons/apple-touch-icon-152x152.png
+++ b/js/public/img/icons/apple-touch-icon-152x152.png
--- a/js/public/img/icons/apple-touch-icon-180x180.png
+++ b/js/public/img/icons/apple-touch-icon-180x180.png
--- a/js/public/img/icons/apple-touch-icon-60x60.png
+++ b/js/public/img/icons/apple-touch-icon-60x60.png
--- a/js/public/img/icons/apple-touch-icon-76x76.png
+++ b/js/public/img/icons/apple-touch-icon-76x76.png
--- a/js/public/img/icons/apple-touch-icon.png
+++ b/js/public/img/icons/apple-touch-icon.png
--- a/js/public/img/icons/badge-128x128.png
+++ b/js/public/img/icons/badge-128x128.png
--- a/js/public/img/icons/favicon-16x16.png
+++ b/js/public/img/icons/favicon-16x16.png
--- a/js/public/img/icons/favicon-32x32.png
+++ b/js/public/img/icons/favicon-32x32.png
--- a/js/public/img/icons/favicon.svg
+++ b/js/public/img/icons/favicon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="opacity:1;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:1" d="M-5.801-6.164h72.69v72.871h-72.69z"/><g data-name="Calque 2"><g data-name="header"><path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)"/><path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)"/></g></g></svg>
--- a/js/public/img/icons/icon-128x128.png
+++ b/js/public/img/icons/icon-128x128.png
--- a/js/public/img/icons/icon-144x144.png
+++ b/js/public/img/icons/icon-144x144.png
--- a/js/public/img/icons/icon-168x168.png
+++ b/js/public/img/icons/icon-168x168.png
--- a/js/public/img/icons/icon-256x256.png
+++ b/js/public/img/icons/icon-256x256.png
--- a/js/public/img/icons/icon-384x384.png
+++ b/js/public/img/icons/icon-384x384.png
--- a/js/public/img/icons/icon-48x48.png
+++ b/js/public/img/icons/icon-48x48.png
--- a/js/public/img/icons/icon-512x512.png
+++ b/js/public/img/icons/icon-512x512.png
--- a/js/public/img/icons/icon-72x72.png
+++ b/js/public/img/icons/icon-72x72.png
--- a/js/public/img/icons/icon-96x96.png
+++ b/js/public/img/icons/icon-96x96.png
--- a/js/public/img/icons/msapplication-icon-144x144.png
+++ b/js/public/img/icons/msapplication-icon-144x144.png
--- a/js/public/img/icons/mstile-150x150.png
+++ b/js/public/img/icons/mstile-150x150.png
--- a/js/public/img/icons/safari-pinned-tab.svg
+++ b/js/public/img/icons/safari-pinned-tab.svg
@ -1,149 +1 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
-fill="#000000" stroke="none">
-<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
-173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
-13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
-20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
-11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
-11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
-36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
-10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
-221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
-30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
-96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
-30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
-342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
-22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
-17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
-72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
-35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
-0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
-11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
-12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
-145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
-248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
-29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
-109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
-38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
-34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
-136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
-67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
-150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
-116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
-113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
-175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
-89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
-11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
-6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
-430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
-220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
-24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
-478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
-394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
-55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
-175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
-88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
-155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
-11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
-14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
-51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
-37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
-55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
-55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
-295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
-16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
-157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
-200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
-241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
-61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
-28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
-62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
-56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
-350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
-90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
-121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
-60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
-167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
-171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
-97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
-111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
-11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
-13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
-101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
-19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
-54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
-0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
-90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
-108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
-20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
-396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
-110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
-583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
-408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
-561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
-9615 0 20 -32z"/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="opacity:1;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:1" d="M-5.801-6.164h72.69v72.871h-72.69z"/><g data-name="Calque 2"><g data-name="header"><path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)"/><path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)"/></g></g></svg>
--- a/js/public/img/pics/event_creation-1024w.jpg
+++ b/js/public/img/pics/event_creation-1024w.jpg
--- a/js/public/img/pics/event_creation-1024w.webp
+++ b/js/public/img/pics/event_creation-1024w.webp
--- a/js/public/img/pics/event_creation-480w.jpg
+++ b/js/public/img/pics/event_creation-480w.jpg
--- a/js/public/img/pics/event_creation-480w.webp
+++ b/js/public/img/pics/event_creation-480w.webp
--- a/js/public/img/pics/group-1024w.jpg
+++ b/js/public/img/pics/group-1024w.jpg
--- a/js/public/img/pics/group-1024w.webp
+++ b/js/public/img/pics/group-1024w.webp
--- a/js/public/img/pics/group-480w.jpg
+++ b/js/public/img/pics/group-480w.jpg
--- a/js/public/img/pics/group-480w.webp
+++ b/js/public/img/pics/group-480w.webp
--- a/js/public/img/pics/homepage_background-1024w.png
+++ b/js/public/img/pics/homepage_background-1024w.png
--- a/js/public/img/pics/homepage_background-1024w.webp
+++ b/js/public/img/pics/homepage_background-1024w.webp
--- a/js/src/App.vue
+++ b/js/src/App.vue
@ -50,6 +50,8 @@ import { initializeCurrentActor } from "./utils/auth";
 import { CONFIG } from "./graphql/config";
 import { IConfig } from "./types/config.model";
 import { ICurrentUser } from "./types/current-user.model";
+import jwt_decode, { JwtPayload } from "jwt-decode";
+import { refreshAccessToken } from "./apollo/utils";

@Component({
  apollo: {
@ -63,6 +65,11 @@ import { ICurrentUser } from "./types/current-user.model";
      import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
    "mobilizon-footer": Footer,
  },
+  metaInfo() {
+    return {
+      titleTemplate: "%s | Mobilizon",
+    };
+  },
 })
 export default class App extends Vue {
  config!: IConfig;
@ -71,6 +78,10 @@ export default class App extends Vue {

  error: Error | null = null;

+  online = true;
+
+  interval: number | undefined = undefined;
+
  async created(): Promise<void> {
    if (await this.initializeCurrentUser()) {
      await initializeCurrentActor(this.$apollo.provider.defaultClient);
@ -100,6 +111,41 @@ export default class App extends Vue {
    }
    return false;
  }
+
+  mounted(): void {
+    this.online = window.navigator.onLine;
+    window.addEventListener("offline", () => {
+      this.online = false;
+      this.showOfflineNetworkWarning();
+      console.log("offline");
+    });
+    window.addEventListener("online", () => {
+      this.online = true;
+      console.log("online");
+    });
+
+    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);
+  }
+
+  showOfflineNetworkWarning(): void {
+    this.$notifier.error(this.$t("You are offline") as string);
+  }
+
+  unmounted(): void {
+    clearInterval(this.interval);
+    this.interval = undefined;
+  }
 }
 </script>

--- a/js/src/apollo/user.ts
+++ b/js/src/apollo/user.ts
@ -1,12 +1,14 @@
+import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { CURRENT_USER_CLIENT } from "@/graphql/user";
 import { ICurrentUserRole } from "@/types/enums";
-import { ApolloCache } from "apollo-cache";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
-import { Resolvers } from "apollo-client/core/types";
+import { ApolloCache, NormalizedCacheObject } from "@apollo/client/cache";
+import { Resolvers } from "@apollo/client/core/types";

 export default function buildCurrentUserResolver(
  cache: ApolloCache<NormalizedCacheObject>
 ): Resolvers {
-  cache.writeData({
+  cache.writeQuery({
+    query: CURRENT_USER_CLIENT,
    data: {
      currentUser: {
        __typename: "CurrentUser",
@ -15,6 +17,12 @@ export default function buildCurrentUserResolver(
        isLoggedIn: false,
        role: ICurrentUserRole.USER,
      },
+    },
+  });
+
+  cache.writeQuery({
+    query: CURRENT_ACTOR_CLIENT,
+    data: {
      currentActor: {
        __typename: "CurrentActor",
        id: null,
@ -47,7 +55,7 @@ export default function buildCurrentUserResolver(
          },
        };

-        localCache.writeData({ data });
+        localCache.writeQuery({ data, query: CURRENT_USER_CLIENT });
      },
      updateCurrentActor: (
        _: any,
@ -74,7 +82,7 @@ export default function buildCurrentUserResolver(
          },
        };

-        localCache.writeData({ data });
+        localCache.writeQuery({ data, query: CURRENT_ACTOR_CLIENT });
      },
    },
  };
--- a/js/src/apollo/utils.ts
+++ b/js/src/apollo/utils.ts
@ -1,16 +1,92 @@
-import {
-  IntrospectionFragmentMatcher,
-  NormalizedCacheObject,
-} from "apollo-cache-inmemory";
 import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN } from "@/constants";
 import { REFRESH_TOKEN } from "@/graphql/auth";
+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 } from "apollo-client";
+import {
+  ApolloClient,
+  FieldPolicy,
+  NormalizedCacheObject,
+  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";

-export const fragmentMatcher = new IntrospectionFragmentMatcher({
-  introspectionQueryResultData,
-});
+type possibleTypes = { name: string };
+type schemaType = {
+  kind: string;
+  name: string;
+  possibleTypes: possibleTypes[];
+};
+
+// eslint-disable-next-line no-underscore-dangle
+const types = introspectionQueryResultData.__schema.types as schemaType[];
+export const possibleTypes = types.reduce((acc, type) => {
+  if (type.kind === "INTERFACE") {
+    acc[type.name] = type.possibleTypes.map(({ name }) => name);
+  }
+  return acc;
+}, {} as Record<string, string[]>);
+
+export const typePolicies: TypePolicies = {
+  Discussion: {
+    fields: {
+      comments: paginatedLimitPagination(),
+    },
+  },
+  Group: {
+    fields: {
+      organizedEvents: paginatedLimitPagination([
+        "afterDatetime",
+        "beforeDatetime",
+      ]),
+      activity: paginatedLimitPagination<IActivity>(["type", "author"]),
+    },
+  },
+  Person: {
+    fields: {
+      organizedEvents: pageLimitPagination(),
+      participations: paginatedLimitPagination<IParticipant>(["eventId"]),
+      memberships: paginatedLimitPagination<IMember>(["group"]),
+    },
+  },
+  Event: {
+    fields: {
+      participants: paginatedLimitPagination<IParticipant>(["roles"]),
+      commnents: pageLimitPagination<IComment>(),
+      relatedEvents: pageLimitPagination<IEvent>(),
+    },
+  },
+  RootQueryType: {
+    fields: {
+      relayFollowers: paginatedLimitPagination<IFollower>(),
+      relayFollowings: paginatedLimitPagination<IFollower>([
+        "orderBy",
+        "direction",
+      ]),
+      events: paginatedLimitPagination(),
+      groups: paginatedLimitPagination([
+        "preferredUsername",
+        "name",
+        "domain",
+        "local",
+        "suspended",
+      ]),
+      persons: paginatedLimitPagination([
+        "preferredUsername",
+        "name",
+        "domain",
+        "local",
+        "suspended",
+      ]),
+    },
+  },
+};

 export async function refreshAccessToken(
  apolloClient: ApolloClient<NormalizedCacheObject>
@ -37,3 +113,73 @@ export async function refreshAccessToken(
    return false;
  }
 }
+
+type KeyArgs = FieldPolicy<any>["keyArgs"];
+
+export function pageLimitPagination<T = Reference>(
+  keyArgs: KeyArgs = false
+): FieldPolicy<T[]> {
+  return {
+    keyArgs,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    merge(existing, incoming, { args }) {
+      console.log("pageLimitPagination");
+      console.log("existing", existing);
+      console.log("incoming", incoming);
+      // console.log("args", args);
+      if (!incoming) return existing;
+      if (!existing) return incoming; // existing will be empty the first time
+
+      return doMerge(existing as Array<T>, incoming as Array<T>, args);
+    },
+  };
+}
+
+export function paginatedLimitPagination<T = Paginate<any>>(
+  keyArgs: KeyArgs = false
+): FieldPolicy<Paginate<T>> {
+  return {
+    keyArgs,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    merge(existing, incoming, { args }) {
+      console.log("paginatedLimitPagination");
+      console.log("existing", existing);
+      console.log("incoming", incoming);
+      if (!incoming) return existing;
+      if (!existing) return incoming; // existing will be empty the first time
+
+      return {
+        total: incoming.total,
+        elements: doMerge(existing.elements, incoming.elements, args),
+      };
+    },
+  };
+}
+
+function doMerge<T = any>(
+  existing: Array<T>,
+  incoming: Array<T>,
+  args: Record<string, any> | null
+): Array<T> {
+  const merged = existing ? existing.slice(0) : [];
+  let res;
+  if (args) {
+    // Assume an page of 1 if args.page omitted.
+    const { page = 1, limit = 10 } = args;
+    console.log("args, selected", { page, limit });
+    for (let i = 0; i < incoming.length; ++i) {
+      merged[(page - 1) * limit + i] = incoming[i];
+    }
+    res = merged;
+  } else {
+    // It's unusual (probably a mistake) for a paginated field not
+    // to receive any arguments, so you might prefer to throw an
+    // exception here, instead of recovering by appending incoming
+    // onto the existing array.
+    res = [...merged, ...incoming];
+  }
+  console.log("doMerge returns", res);
+  return res;
+}
--- a/js/src/components/Account/ActorAutoComplete.vue
+++ b/js/src/components/Account/ActorAutoComplete.vue
@ -45,7 +45,7 @@
 </template>
 <script lang="ts">
 import { Component, Model, Vue, Watch } from "vue-property-decorator";
-import { debounce } from "lodash";
+import debounce from "lodash/debounce";
 import { IPerson } from "@/types/actor";
 import { SEARCH_PERSONS } from "@/graphql/search";
 import { Paginate } from "@/types/paginate";
--- a/js/src/components/Activity/GroupActivityItem.vue
+++ b/js/src/components/Activity/GroupActivityItem.vue
@ -8,7 +8,9 @@
          slot="group"
          :to="{
            name: RouteName.GROUP,
-            params: { preferredUsername: usernameWithDomain(activity.object) },
+            params: {
+              preferredUsername: subjectParams.group_federated_username,
+            },
          }"
          >{{ subjectParams.group_name }}</router-link
        >
--- a/js/src/components/Activity/MemberActivityItem.vue
+++ b/js/src/components/Activity/MemberActivityItem.vue
@ -18,7 +18,7 @@
          ></popover-actor-card
        >
        <b slot="member" v-else>{{
-          subjectParams.member_preferred_username
+          subjectParams.member_actor_federated_username
        }}</b>
        <popover-actor-card
          :actor="activity.author"
@ -83,6 +83,8 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
          return "You added the member {member}.";
        }
        return "{profile} added the member {member}.";
+      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;
--- a/js/src/components/Admin/Followers.vue
+++ b/js/src/components/Admin/Followers.vue
@ -10,8 +10,13 @@
      :show-detail-icon="false"
      paginated
      backend-pagination
+      :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="relayFollowers.total"
-      :per-page="perPage"
+      :per-page="FOLLOWERS_PER_PAGE"
      @page-change="onFollowersPageChange"
      checkable
      checkbox-position="left"
@ -123,14 +128,33 @@
  </div>
 </template>
 <script lang="ts">
-import { Component, Mixins } from "vue-property-decorator";
+import { Component, Mixins, Ref } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { formatDistanceToNow } from "date-fns";
-import { ACCEPT_RELAY, REJECT_RELAY } from "../../graphql/admin";
+import {
+  ACCEPT_RELAY,
+  REJECT_RELAY,
+  RELAY_FOLLOWERS,
+} from "../../graphql/admin";
 import { IFollower } from "../../types/actor/follower.model";
 import RelayMixin from "../../mixins/relay";
+import RouteName from "@/router/name";
+import { Paginate } from "@/types/paginate";
+
+const FOLLOWERS_PER_PAGE = 10;

@Component({
+  apollo: {
+    relayFollowers: {
+      query: RELAY_FOLLOWERS,
+      variables() {
+        return {
+          page: this.page,
+          limit: FOLLOWERS_PER_PAGE,
+        };
+      },
+    },
+  },
  metaInfo() {
    return {
      title: this.$t("Followers") as string,
@ -143,14 +167,36 @@ export default class Followers extends Mixins(RelayMixin) {

  formatDistanceToNow = formatDistanceToNow;

-  async acceptRelays(): Promise<void> {
-    await this.checkedRows.forEach((row: IFollower) => {
+  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
+
+  checkedRows: IFollower[] = [];
+
+  FOLLOWERS_PER_PAGE = FOLLOWERS_PER_PAGE;
+
+  @Ref("table") readonly table!: any;
+
+  toggle(row: Record<string, unknown>): void {
+    this.table.toggleDetails(row);
+  }
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.RELAY_FOLLOWERS, {
+      page: page.toString(),
+    });
+  }
+
+  acceptRelays(): void {
+    this.checkedRows.forEach((row: IFollower) => {
      this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
    });
  }

-  async rejectRelays(): Promise<void> {
-    await this.checkedRows.forEach((row: IFollower) => {
+  rejectRelays(): void {
+    this.checkedRows.forEach((row: IFollower) => {
      this.rejectRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
    });
  }
@ -196,5 +242,19 @@ export default class Followers extends Mixins(RelayMixin) {
  get checkedRowsHaveAtLeastOneToApprove(): boolean {
    return this.checkedRows.some((checkedRow) => !checkedRow.approved);
  }
+
+  async onFollowersPageChange(page: number): Promise<void> {
+    this.page = page;
+    try {
+      await this.$apollo.queries.relayFollowers.fetchMore({
+        variables: {
+          page: this.page,
+          limit: FOLLOWERS_PER_PAGE,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
 }
 </script>
--- a/js/src/components/Admin/Followings.vue
+++ b/js/src/components/Admin/Followings.vue
@ -32,8 +32,13 @@
      :show-detail-icon="false"
      paginated
      backend-pagination
+      :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="relayFollowings.total"
-      :per-page="perPage"
+      :per-page="FOLLOWINGS_PER_PAGE"
      @page-change="onFollowingsPageChange"
      checkable
      checkbox-position="left"
@ -127,7 +132,7 @@
        </b-button>
      </template>
    </b-table>
-    <b-message type="is-danger" v-if="relayFollowings.elements.length === 0">{{
+    <b-message type="is-danger" v-if="relayFollowings.total === 0">{{
      $t("You don't follow any instances yet.")
    }}</b-message>
  </div>
@ -139,8 +144,31 @@ import { formatDistanceToNow } from "date-fns";
 import { ADD_RELAY, REMOVE_RELAY } from "../../graphql/admin";
 import { IFollower } from "../../types/actor/follower.model";
 import RelayMixin from "../../mixins/relay";
+import { RELAY_FOLLOWINGS } from "@/graphql/admin";
+import { Paginate } from "@/types/paginate";
+import RouteName from "@/router/name";
+import {
+  ApolloCache,
+  FetchResult,
+  InMemoryCache,
+  Reference,
+} from "@apollo/client/core";
+import gql from "graphql-tag";
+
+const FOLLOWINGS_PER_PAGE = 10;

@Component({
+  apollo: {
+    relayFollowings: {
+      query: RELAY_FOLLOWINGS,
+      variables() {
+        return {
+          page: this.page,
+          limit: FOLLOWINGS_PER_PAGE,
+        };
+      },
+    },
+  },
  metaInfo() {
    return {
      title: this.$t("Followings") as string,
@ -155,16 +183,78 @@ export default class Followings extends Mixins(RelayMixin) {

  formatDistanceToNow = formatDistanceToNow;

+  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
+
+  FOLLOWINGS_PER_PAGE = FOLLOWINGS_PER_PAGE;
+
+  checkedRows: IFollower[] = [];
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.RELAY_FOLLOWINGS, {
+      page: page.toString(),
+    });
+  }
+
+  async onFollowingsPageChange(page: number): Promise<void> {
+    this.page = page;
+    try {
+      await this.$apollo.queries.relayFollowings.fetchMore({
+        variables: {
+          page: this.page,
+          limit: FOLLOWINGS_PER_PAGE,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
  async followRelay(e: Event): Promise<void> {
    e.preventDefault();
    try {
-      await this.$apollo.mutate({
+      await this.$apollo.mutate<{ relayFollowings: Paginate<IFollower> }>({
        mutation: ADD_RELAY,
        variables: {
          address: this.newRelayAddress.trim(), // trim to fix copy and paste domain name spaces and tabs
        },
+        update(cache: ApolloCache<InMemoryCache>, { data }: FetchResult) {
+          cache.modify({
+            fields: {
+              relayFollowings(
+                existingFollowings = { elements: [], total: 0 },
+                { readField }
+              ) {
+                const newFollowingRef = cache.writeFragment({
+                  id: `${data?.addRelay.__typename}:${data?.addRelay.id}`,
+                  data: data?.addRelay,
+                  fragment: gql`
+                    fragment NewFollowing on Follower {
+                      id
+                    }
+                  `,
+                });
+                if (
+                  existingFollowings.elements.some(
+                    (ref: Reference) =>
+                      readField("id", ref) === data?.addRelay.id
+                  )
+                ) {
+                  return existingFollowings;
+                }
+                return {
+                  total: existingFollowings.total + 1,
+                  elements: [newFollowingRef, ...existingFollowings.elements],
+                };
+              },
+            },
+            broadcast: false,
+          });
+        },
      });
-      await this.$apollo.queries.relayFollowings.refetch();
      this.newRelayAddress = "";
    } catch (err) {
      Snackbar.open({
@ -175,21 +265,35 @@ export default class Followings extends Mixins(RelayMixin) {
    }
  }

-  async removeRelays(): Promise<void> {
-    await this.checkedRows.forEach((row: IFollower) => {
-      this.removeRelay(
-        `${row.targetActor.preferredUsername}@${row.targetActor.domain}`
-      );
+  removeRelays(): void {
+    this.checkedRows.forEach((row: IFollower) => {
+      this.removeRelay(row);
    });
  }

-  async removeRelay(address: string): Promise<void> {
+  async removeRelay(follower: IFollower): Promise<void> {
+    const address = `${follower.targetActor.preferredUsername}@${follower.targetActor.domain}`;
    try {
      await this.$apollo.mutate({
        mutation: REMOVE_RELAY,
        variables: {
          address,
        },
+        update(cache: ApolloCache<InMemoryCache>) {
+          cache.modify({
+            fields: {
+              relayFollowings(existingFollowingRefs, { readField }) {
+                return {
+                  total: existingFollowingRefs.total - 1,
+                  elements: existingFollowingRefs.elements.filter(
+                    (followingRef: Reference) =>
+                      follower.id !== readField("id", followingRef)
+                  ),
+                };
+              },
+            },
+          });
+        },
      });
      await this.$apollo.queries.relayFollowings.refetch();
      this.checkedRows = [];
--- a/js/src/components/Comment/Comment.vue
+++ b/js/src/components/Comment/Comment.vue
@ -6,32 +6,26 @@
      :id="commentId"
    >
      <popover-actor-card
-        class="media-left"
        :actor="comment.actor"
        :inline="true"
        v-if="comment.actor"
      >
        <figure
-          class="image is-48x48"
+          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
-          size="is-large"
-          icon="account-circle"
-        />
+        <b-icon class="media-left" v-else icon="account-circle" />
      </popover-actor-card>
      <div v-else class="media-left">
        <figure
-          class="image is-48x48"
+          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 size="is-large" icon="account-circle" />
+        <b-icon v-else icon="account-circle" />
      </div>
      <div class="media-content">
        <div class="content">
@ -39,7 +33,13 @@
            <strong :class="{ organizer: commentFromOrganizer }">{{
              comment.actor.name
            }}</strong>
-            <small>@{{ usernameWithDomain(comment.actor) }}</small>
+            <small class="has-text-grey">{{
+              usernameWithDomain(comment.actor)
+            }}</small>
+          </span>
+          <a v-else class="comment-link has-text-grey" :href="commentURL">
+            <span>{{ $t("[deleted]") }}</span>
+          </a>
          <a class="comment-link has-text-grey" :href="commentURL">
            <small>{{
              formatDistanceToNow(new Date(comment.updatedAt), {
@ -48,14 +48,10 @@
              })
            }}</small>
          </a>
-          </span>
-          <a v-else class="comment-link has-text-grey" :href="commentURL">
-            <span>{{ $t("[deleted]") }}</span>
-          </a>
          <span class="icons" v-if="!comment.deletedAt">
            <button
              v-if="comment.actor.id === currentActor.id"
-              @click="$emit('delete-comment', comment)"
+              @click="deleteComment"
            >
              <b-icon icon="delete" size="is-small" aria-hidden="true" />
              <span class="visually-hidden">{{ $t("Delete") }}</span>
@ -183,7 +179,6 @@ 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 { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from "../../graphql/comment";
 import { IEvent } from "../../types/event.model";
 import ReportModal from "../Report/ReportModal.vue";
 import { IReport } from "../../types/report.model";
@ -257,39 +252,15 @@ export default class Comment extends Vue {
    this.$emit("create-comment", this.newComment);
    this.newComment = new CommentModel();
    this.replyTo = false;
+    this.showReplies = true;
  }

-  async fetchReplies(): Promise<void> {
-    const parentId = this.comment.id;
-    const { data } = await this.$apollo.query<{ thread: IComment[] }>({
-      query: FETCH_THREAD_REPLIES,
-      variables: {
-        threadId: parentId,
-      },
-    });
-    if (!data) return;
-    const { thread } = data;
-    const eventData = this.$apollo.getClient().readQuery<{ event: IEvent }>({
-      query: COMMENTS_THREADS,
-      variables: {
-        eventUUID: this.event.uuid,
-      },
-    });
-    if (!eventData) return;
-    const { event } = eventData;
-    const { comments } = event;
-    const parentCommentIndex = comments.findIndex(
-      (oldComment) => oldComment.id === parentId
-    );
-    const parentComment = comments[parentCommentIndex];
-    if (!parentComment) return;
-    parentComment.replies = thread;
-    comments[parentCommentIndex] = parentComment;
-    event.comments = comments;
-    this.$apollo.getClient().writeQuery({
-      query: COMMENTS_THREADS,
-      data: { event },
-    });
+  deleteComment(): void {
+    this.$emit("delete-comment", this.comment);
+    this.showReplies = false;
+  }
+
+  fetchReplies(): void {
    this.showReplies = true;
  }

@ -394,9 +365,18 @@ form.reply {
  }
 }

-.comment-link small:hover {
+a.comment-link {
+  text-decoration: none;
+  margin-left: 5px;
+  &:hover {
+    text-decoration: underline;
+  }
+  small {
+    &:hover {
      color: hsl(0, 0%, 21%);
    }
+  }
+}

 .root-comment .replies {
  display: flex;
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@ -16,6 +16,7 @@
          <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
        </figure>
        <div class="media-content">
+          <div class="field">
            <div class="field">
              <p class="control">
                <editor
@ -28,14 +29,21 @@
                {{ $t("Comment text can't be empty") }}
              </p>
            </div>
+            <div class="field notify-participants" v-if="isEventOrganiser">
+              <b-switch v-model="newComment.isAnnouncement">{{
+                $t("Notify participants")
+              }}</b-switch>
+            </div>
+          </div>
+        </div>
        <div class="send-comment">
          <b-button
            native-type="submit"
            type="is-primary"
            class="comment-button-submit"
-              >{{ $t("Post a comment") }}</b-button
-            >
-          </div>
+            icon-left="send"
+            :aria-label="$t('Post a comment')"
+          />
        </div>
      </article>
    </form>
@ -82,20 +90,18 @@ import { CommentModel, IComment } from "../../types/comment.model";
 import {
  CREATE_COMMENT_FROM_EVENT,
  DELETE_COMMENT,
-  COMMENTS_THREADS,
-  FETCH_THREAD_REPLIES,
+  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";

@Component({
  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
+    currentActor: CURRENT_ACTOR_CLIENT,
    comments: {
-      query: COMMENTS_THREADS,
+      query: COMMENTS_THREADS_WITH_REPLIES,
      variables() {
        return {
          eventUUID: this.event.uuid,
@ -156,24 +162,23 @@ export default class CommentTree extends Vue {
          inReplyToCommentId: comment.inReplyToComment
            ? comment.inReplyToComment.id
            : null,
+          isAnnouncement: comment.isAnnouncement,
        },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (data == null) return;
-          const newComment = data.createComment;
-
          // comments are attached to the event, so we can pass it to replies later
-          newComment.event = this.event;
+          const newComment = { ...data.createComment, event: this.event };

          // we load all existing threads
          const commentThreadsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS,
+            query: COMMENTS_THREADS_WITH_REPLIES,
            variables: {
              eventUUID: this.event.uuid,
            },
          });
          if (!commentThreadsData) return;
          const { event } = commentThreadsData;
-          const { comments: oldComments } = event;
+          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
@ -184,44 +189,25 @@ export default class CommentTree extends Vue {
            );
            const parentComment = oldComments[parentCommentIndex];

-            let oldReplyList: IComment[] = [];
-            try {
-              const threadData = store.readQuery<{ thread: IComment[] }>({
-                query: FETCH_THREAD_REPLIES,
-                variables: {
-                  threadId: parentComment.id,
-                },
-              });
-              if (!threadData) return;
-              oldReplyList = threadData.thread;
-            } catch (e) {
-              // This simply means there's no loaded replies yet
-            } finally {
-              oldReplyList.push(newComment);
-
-              // save the updated list of replies (with the one we've just added)
-              store.writeQuery({
-                query: FETCH_THREAD_REPLIES,
-                data: { thread: oldReplyList },
-                variables: {
-                  threadId: parentComment.id,
-                },
-              });
-
            // replace the root comment with has the updated list of replies in the thread list
-              parentComment.replies = oldReplyList;
-              event.comments.splice(parentCommentIndex, 1, parentComment);
-            }
+            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
-          event.comments = oldComments;
          store.writeQuery({
-            query: COMMENTS_THREADS,
-            data: { event },
+            query: COMMENTS_THREADS_WITH_REPLIES,
+            data: {
+              event: {
+                ...event,
+                comments: oldComments,
+              },
+            },
            variables: {
              eventUUID: this.event.uuid,
            },
@ -249,63 +235,66 @@ export default class CommentTree extends Vue {
        variables: {
          commentId: comment.id,
        },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (data == null) return;
          const deletedCommentId = data.deleteComment.id;

          const commentsData = store.readQuery<{ event: IEvent }>({
-            query: COMMENTS_THREADS,
+            query: COMMENTS_THREADS_WITH_REPLIES,
            variables: {
              eventUUID: this.event.uuid,
            },
          });
          if (!commentsData) return;
          const { event } = commentsData;
-          const { comments: oldComments } = event;
+          let updatedComments: IComment[] = [...event.comments];

          if (comment.originComment) {
            // we have deleted a reply to a thread
-            const localData = store.readQuery<{ thread: IComment[] }>({
-              query: FETCH_THREAD_REPLIES,
-              variables: {
-                threadId: comment.originComment.id,
-              },
-            });
-            if (!localData) return;
-            const { thread: oldReplyList } = localData;
-            const replies = oldReplyList.filter(
-              (reply) => reply.id !== deletedCommentId
-            );
-            store.writeQuery({
-              query: FETCH_THREAD_REPLIES,
-              variables: {
-                threadId: comment.originComment.id,
-              },
-              data: { thread: replies },
-            });
-
            const { originComment } = comment;

-            const parentCommentIndex = oldComments.findIndex(
+            const parentCommentIndex = updatedComments.findIndex(
              (oldComment) => oldComment.id === originComment.id
            );
-            const parentComment = oldComments[parentCommentIndex];
-            parentComment.replies = replies;
-            parentComment.totalReplies -= 1;
-            oldComments.splice(parentCommentIndex, 1, parentComment);
-            event.comments = oldComments;
+            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
-            event.comments = oldComments.filter(
-              (reply) => reply.id !== deletedCommentId
-            );
+            updatedComments = updatedComments.map((reply) => {
+              if (reply.id === deletedCommentId) {
+                return {
+                  ...reply,
+                  deletedAt: new Date().toString(),
+                };
+              }
+              return reply;
+            });
          }
          store.writeQuery({
-            query: COMMENTS_THREADS,
+            query: COMMENTS_THREADS_WITH_REPLIES,
            variables: {
              eventUUID: this.event.uuid,
            },
-            data: { event },
+            data: {
+              event: {
+                ...event,
+                comments: updatedComments,
+              },
+            },
          });
        },
      });
@ -376,6 +365,10 @@ form.new-comment {
      flex: 1;
      padding-right: 10px;
      margin-bottom: 0;
+
+      &.notify-participants {
+        margin-top: 0.5rem;
+      }
    }
  }
 }
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@ -255,6 +255,7 @@ export default class EditorComponent extends Vue {
        }),
        ...defaultExtensions(),
      ],
+      injectCSS: false,
      content: this.value,
      onUpdate: () => {
        this.$emit("input", this.editor?.getHTML());
--- a/js/src/components/Editor/Image.ts
+++ b/js/src/components/Editor/Image.ts
@ -1,10 +1,10 @@
 import { UPLOAD_MEDIA } from "@/graphql/upload";
 import apolloProvider from "@/vue-apollo";
-import ApolloClient from "apollo-client";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
 import { Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import Image from "@tiptap/extension-image";
+import { NormalizedCacheObject } from "@apollo/client/cache";

 /* eslint-disable class-methods-use-this */

--- a/js/src/components/Editor/Mention.ts
+++ b/js/src/components/Editor/Mention.ts
@ -2,11 +2,11 @@ import { SEARCH_PERSONS } from "@/graphql/search";
 import { VueRenderer } from "@tiptap/vue-2";
 import tippy from "tippy.js";
 import MentionList from "./MentionList.vue";
-import ApolloClient from "apollo-client";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
 import apolloProvider from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
+import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";

 const client =
  apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
--- a/js/src/components/Event/AddressAutoComplete.vue
+++ b/js/src/components/Event/AddressAutoComplete.vue
@ -54,7 +54,8 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { LatLng } from "leaflet";
-import { debounce, DebouncedFunc } from "lodash";
+import debounce from "lodash/debounce";
+import { DebouncedFunc } from "lodash";
 import { Address, IAddress } from "../../types/address.model";
 import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
 import { CONFIG } from "../../graphql/config";
--- a/js/src/components/Event/FullAddressAutoComplete.vue
+++ b/js/src/components/Event/FullAddressAutoComplete.vue
@ -111,7 +111,8 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { LatLng } from "leaflet";
-import { debounce, DebouncedFunc } from "lodash";
+import debounce from "lodash/debounce";
+import { DebouncedFunc } from "lodash";
 import { Address, IAddress } from "../../types/address.model";
 import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
 import { CONFIG } from "../../graphql/config";
--- a/js/src/components/Event/TagInput.vue
+++ b/js/src/components/Event/TagInput.vue
@ -28,7 +28,8 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { get, differenceBy } from "lodash";
+import get from "lodash/get";
+import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";

@Component({
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@ -234,7 +234,9 @@ export default class NavBar extends Vue {
      query: IDENTITIES,
    });
    if (data) {
-      this.identities = data.identities.map((identity) => new Person(identity));
+      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
--- a/js/src/components/Participation/ParticipationWithoutAccount.vue
+++ b/js/src/components/Participation/ParticipationWithoutAccount.vue
@ -134,6 +134,7 @@ import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousP
 import { EventJoinOptions, ParticipantRole } from "@/types/enums";
 import RouteName from "@/router/name";
 import { IParticipant } from "../../types/participant.model";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  apollo: {
@ -195,7 +196,10 @@ export default class ParticipationWithoutAccount extends Vue {
          message: this.anonymousParticipation.message,
          locale: this.$i18n.locale,
        },
-        update: (store, { data: updateData }) => {
+        update: (
+          store: ApolloCache<InMemoryCache>,
+          { data: updateData }: FetchResult
+        ) => {
          if (updateData == null) {
            console.error(
              "Cannot update event participant cache, because of data null value."
@ -213,25 +217,24 @@ export default class ParticipationWithoutAccount extends Vue {
            );
            return;
          }
-          const { event } = cachedData;
-          if (event === null) {
-            console.error(
-              "Cannot update event participant cache, because of null value."
-            );
-            return;
-          }
+          const participantStats = { ...cachedData.event.participantStats };

          if (updateData.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
-            event.participantStats.notConfirmed += 1;
+            participantStats.notConfirmed += 1;
          } else {
-            event.participantStats.going += 1;
-            event.participantStats.participant += 1;
+            participantStats.going += 1;
+            participantStats.participant += 1;
          }

          store.writeQuery({
            query: FETCH_EVENT_BASIC,
            variables: { uuid: this.event.uuid },
-            data: { event },
+            data: {
+              event: {
+                ...cachedData.event,
+                participantStats,
+              },
+            },
          });
        },
      });
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@ -152,7 +152,7 @@ export default class PictureUpload extends Vue {
        console.error(e);
      }
    }
-    return this.defaultImage ? this.defaultImage.url : null;
+    return this.defaultImage?.url;
  }

  onFileChanged(file: File | null): void {
--- a/js/src/components/Todo/FullTodo.vue
+++ b/js/src/components/Todo/FullTodo.vue
@ -18,7 +18,8 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { debounce, DebouncedFunc } from "lodash";
+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";
--- a/js/src/graphql/actor.ts
+++ b/js/src/graphql/actor.ts
@ -37,12 +37,14 @@ export const FETCH_PERSON = gql`
 `;

 export const GET_PERSON = gql`
-  query (
+  query Person(
    $actorId: ID!
    $organizedEventsPage: Int
    $organizedEventsLimit: Int
    $participationPage: Int
    $participationLimit: Int
+    $membershipsPage: Int
+    $membershipsLimit: Int
  ) {
    person(id: $actorId) {
      id
@ -89,6 +91,24 @@ export const GET_PERSON = gql`
          }
        }
      }
+      memberships(page: $membershipsPage, limit: $membershipsLimit) {
+        total
+        elements {
+          id
+          role
+          insertedAt
+          parent {
+            id
+            preferredUsername
+            name
+            domain
+            avatar {
+              id
+              url
+            }
+          }
+        }
+      }
      user {
        id
        email
@ -353,7 +373,7 @@ export const LOGGED_USER_MEMBERSHIPS = gql`
 `;

 export const IDENTITIES = gql`
-  query {
+  query Identities {
    identities {
      id
      avatar {
@ -433,7 +453,10 @@ export const PERSON_MEMBERSHIP_GROUP = gql`
 `;

 export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
-  subscription ($actorId: ID!, $group: String!) {
+  subscription GroupMembershipSubscriptionChanged(
+    $actorId: ID!
+    $group: String!
+  ) {
    groupMembershipChanged(personId: $actorId, group: $group) {
      id
      memberships {
--- a/js/src/graphql/admin.ts
+++ b/js/src/graphql/admin.ts
@ -37,6 +37,7 @@ export const DASHBOARD = gql`

 export const RELAY_FRAGMENT = gql`
  fragment relayFragment on Follower {
+    id
    actor {
      id
      preferredUsername
--- a/js/src/graphql/auth.ts
+++ b/js/src/graphql/auth.ts
@ -46,3 +46,9 @@ export const REFRESH_TOKEN = gql`
    }
  }
 `;
+
+export const LOGOUT = gql`
+  mutation Logout($refreshToken: String!) {
+    logout(refreshToken: $refreshToken)
+  }
+`;
--- a/js/src/graphql/comment.ts
+++ b/js/src/graphql/comment.ts
@ -21,8 +21,10 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
      summary
    }
    totalReplies
+    insertedAt
    updatedAt
    deletedAt
+    isAnnouncement
  }
 `;

@ -37,6 +39,12 @@ export const COMMENT_RECURSIVE_FRAGMENT = gql`
    }
    replies {
      ...CommentFields
+      inReplyToComment {
+        ...CommentFields
+      }
+      originComment {
+        ...CommentFields
+      }
      replies {
        ...CommentFields
      }
@ -46,7 +54,7 @@ export const COMMENT_RECURSIVE_FRAGMENT = gql`
 `;

 export const FETCH_THREAD_REPLIES = gql`
-  query ($threadId: ID!) {
+  query FetchThreadReplies($threadId: ID!) {
    thread(id: $threadId) {
      ...CommentRecursive
    }
@ -55,7 +63,7 @@ export const FETCH_THREAD_REPLIES = gql`
 `;

 export const COMMENTS_THREADS = gql`
-  query ($eventUUID: UUID!) {
+  query CommentThreads($eventUUID: UUID!) {
    event(uuid: $eventUUID) {
      id
      uuid
@ -67,16 +75,31 @@ export const COMMENTS_THREADS = gql`
  ${COMMENT_FIELDS_FRAGMENT}
 `;

+export const COMMENTS_THREADS_WITH_REPLIES = gql`
+  query CommentThreadsWithReplies($eventUUID: UUID!) {
+    event(uuid: $eventUUID) {
+      id
+      uuid
+      comments {
+        ...CommentRecursive
+      }
+    }
+  }
+  ${COMMENT_RECURSIVE_FRAGMENT}
+`;
+
 export const CREATE_COMMENT_FROM_EVENT = gql`
  mutation CreateCommentFromEvent(
    $eventId: ID!
    $text: String!
    $inReplyToCommentId: ID
+    $isAnnouncement: Boolean
  ) {
    createComment(
      eventId: $eventId
      text: $text
      inReplyToCommentId: $inReplyToCommentId
+      isAnnouncement: $isAnnouncement
    ) {
      ...CommentRecursive
    }
--- a/js/src/graphql/config.ts
+++ b/js/src/graphql/config.ts
@ -1,7 +1,7 @@
 import gql from "graphql-tag";

 export const CONFIG = gql`
-  query {
+  query FullConfig {
    config {
      name
      description
@ -84,6 +84,10 @@ export const CONFIG = gql`
      instanceFeeds {
        enabled
      }
+      webPush {
+        enabled
+        publicKey
+      }
    }
  }
 `;
@ -160,3 +164,14 @@ export const TIMEZONES = gql`
    }
  }
 `;
+
+export const WEB_PUSH = gql`
+  query {
+    config {
+      webPush {
+        enabled
+        publicKey
+      }
+    }
+  }
+`;
--- a/js/src/graphql/discussion.ts
+++ b/js/src/graphql/discussion.ts
@ -67,6 +67,17 @@ export const DISCUSSION_FIELDS_FRAGMENT = gql`
      text
      insertedAt
      updatedAt
+      deletedAt
+      publishedAt
+      actor {
+        id
+        domain
+        name
+        preferredUsername
+        avatar {
+          url
+        }
+      }
    }
    actor {
      id
@ -104,8 +115,7 @@ export const REPLY_TO_DISCUSSION = gql`
 export const GET_DISCUSSION = gql`
  query getDiscussion($slug: String!, $page: Int, $limit: Int) {
    discussion(slug: $slug) {
-      comments(page: $page, limit: $limit)
-        @connection(key: "discussion-comments", filter: ["slug"]) {
+      comments(page: $page, limit: $limit) {
        total
        elements {
          id
@ -158,6 +168,8 @@ export const DISCUSSION_COMMENT_CHANGED = gql`
        text
        updatedAt
        insertedAt
+        deletedAt
+        publishedAt
        actor {
          id
          preferredUsername
--- a/js/src/graphql/event.ts
+++ b/js/src/graphql/event.ts
@ -76,7 +76,7 @@ const optionsQuery = `
 `;

 export const FETCH_EVENT = gql`
-  query($uuid:UUID!) {
+  query FetchEvent($uuid:UUID!) {
    event(uuid: $uuid) {
      id,
      uuid,
@ -532,7 +532,7 @@ export const DELETE_EVENT = gql`
 `;

 export const PARTICIPANTS = gql`
-  query($uuid: UUID!, $page: Int, $limit: Int, $roles: String) {
+  query Participants($uuid: UUID!, $page: Int, $limit: Int, $roles: String) {
    event(uuid: $uuid) {
      id,
      uuid,
@ -551,7 +551,7 @@ export const PARTICIPANTS = gql`
 `;

 export const EVENT_PERSON_PARTICIPATION = gql`
-  query ($actorId: ID!, $eventId: ID!) {
+  query EventPersonParticipation($actorId: ID!, $eventId: ID!) {
    person(id: $actorId) {
      id
      participations(eventId: $eventId) {
@ -572,7 +572,10 @@ export const EVENT_PERSON_PARTICIPATION = gql`
 `;

 export const EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED = gql`
-  subscription ($actorId: ID!, $eventId: ID!) {
+  subscription EventPersonParticipationSubscriptionChanged(
+    $actorId: ID!
+    $eventId: ID!
+  ) {
    eventPersonParticipationChanged(personId: $actorId) {
      id
      participations(eventId: $eventId) {
@ -593,7 +596,7 @@ export const EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED = gql`
 `;

 export const FETCH_GROUP_EVENTS = gql`
-  query (
+  query FetchGroupEvents(
    $name: String!
    $afterDateTime: DateTime
    $beforeDateTime: DateTime
--- a/js/src/graphql/group.ts
+++ b/js/src/graphql/group.ts
@ -119,19 +119,19 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
      }
      total
    }
-    discussions {
+    discussions(page: $discussionsPage, limit: $discussionsLimit) {
      total
      elements {
        ...DiscussionBasicFields
      }
    }
-    posts {
+    posts(page: $postsPage, limit: $postsLimit) {
      total
      elements {
        ...PostBasicFields
      }
    }
-    members {
+    members(page: $membersPage, limit: $membersLimit) {
      elements {
        id
        role
@ -194,6 +194,12 @@ export const FETCH_GROUP = gql`
    $beforeDateTime: DateTime
    $organisedEventsPage: Int
    $organisedEventslimit: Int
+    $postsPage: Int
+    $postsLimit: Int
+    $membersPage: Int
+    $membersLimit: Int
+    $discussionsPage: Int
+    $discussionsLimit: Int
  ) {
    group(preferredUsername: $name) {
      ...GroupFullFields
@ -212,6 +218,12 @@ export const GET_GROUP = gql`
    $beforeDateTime: DateTime
    $organisedEventsPage: Int
    $organisedEventslimit: Int
+    $postsPage: Int
+    $postsLimit: Int
+    $membersPage: Int
+    $membersLimit: Int
+    $discussionsPage: Int
+    $discussionsLimit: Int
  ) {
    getGroup(id: $id) {
      mediaSize
--- a/js/src/graphql/report.ts
+++ b/js/src/graphql/report.ts
@ -1,8 +1,10 @@
 import gql from "graphql-tag";

 export const REPORTS = gql`
-  query Reports($status: ReportStatus) {
-    reports(status: $status) {
+  query Reports($status: ReportStatus, $page: Int, $limit: Int) {
+    reports(status: $status, page: $page, limit: $limit) {
+      total
+      elements {
        id
        reported {
          id
@ -38,6 +40,7 @@ export const REPORTS = gql`
        content
      }
    }
+  }
 `;

 const REPORT_FRAGMENT = gql`
--- a/js/src/graphql/user.ts
+++ b/js/src/graphql/user.ts
@ -91,7 +91,7 @@ export const SUSPEND_USER = gql`
 `;

 export const CURRENT_USER_CLIENT = gql`
-  query {
+  query CurrentUserClient {
    currentUser @client {
      id
      email
@ -171,6 +171,38 @@ export const SET_USER_SETTINGS = gql`
  ${USER_SETTINGS_FRAGMENT}
 `;

+export const USER_NOTIFICATIONS = gql`
+  query UserNotifications {
+    loggedUser {
+      id
+      locale
+      settings {
+        ...UserSettingFragment
+      }
+      activitySettings {
+        key
+        method
+        enabled
+      }
+    }
+  }
+  ${USER_SETTINGS_FRAGMENT}
+`;
+
+export const UPDATE_ACTIVITY_SETTING = gql`
+  mutation UpdateActivitySetting(
+    $key: String!
+    $method: String!
+    $enabled: Boolean!
+  ) {
+    updateActivitySetting(key: $key, method: $method, enabled: $enabled) {
+      key
+      method
+      enabled
+    }
+  }
+`;
+
 export const LIST_USERS = gql`
  query ListUsers($email: String, $page: Int, $limit: Int) {
    users(email: $email, page: $page, limit: $limit) {
--- a/js/src/graphql/webPush.ts
+++ b/js/src/graphql/webPush.ts
@ -0,0 +1,13 @@
+import gql from "graphql-tag";
+
+export const REGISTER_PUSH_MUTATION = gql`
+  mutation RegisterPush($endpoint: String!, $auth: String!, $p256dh: String!) {
+    registerPush(endpoint: $endpoint, auth: $auth, p256dh: $p256dh)
+  }
+`;
+
+export const UNREGISTER_PUSH_MUTATION = gql`
+  mutation UnRegisterPush($endpoint: String!) {
+    unregisterPush(endpoint: $endpoint)
+  }
+`;
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@ -990,5 +990,56 @@
  "{moderator} has unsuspended group {profile}": "{moderator} has unsuspended group {profile}",
  "{moderator} has done an unknown action": "{moderator} has done an unknown action",
  "{moderator} has deleted a comment from {author} under the event {event}": "{moderator} has deleted a comment from {author} under the event {event}",
-  "{moderator} has deleted a comment from {author}": "{moderator} has deleted a comment from {author}"
+  "{moderator} has deleted a comment from {author}": "{moderator} has deleted a comment from {author}",
+  "You are offline": "You are offline",
+  "Create a new profile": "Create a new profile",
+  "Edit profile {profile}": "Edit profile {profile}",
+  "Identities": "Identities",
+  "Profile": "Profile",
+  "Register": "Register",
+  "No members found": "No members found",
+  "No organized events found": "No organized events found",
+  "Error while suspending group": "Error while suspending group",
+  "Triggered profile refreshment": "Triggered profile refreshment",
+  "No organized events listed": "No organized events listed",
+  "No participations listed": "No participations listed",
+  "{number} memberships": "{number} memberships",
+  "Group": "Group",
+  "No memberships found": "No memberships found",
+  "No group matches the filters": "No group matches the filters",
+  "{group} events": "{group} events",
+  "Interact with a remote content": "Interact with a remote content",
+  "Page not found": "Page not found",
+  "{folder} - Resources": "{folder} - Resources",
+  "General settings": "General settings",
+  "Unsubscribe to WebPush": "Unsubscribe to WebPush",
+  "WebPush": "WebPush",
+  "You can't use webpush in this browser.": "You can't use webpush in this browser.",
+  "Notify participants": "Notify participants",
+  "Browser notifications": "Browser notifications",
+  "Unsubscribe to browser notifications": "Unsubscribe to browser notifications",
+  "Activate browser notification": "Activate browser notification",
+  "You can't use notifications in this browser.": "You can't use notifications in this browser.",
+  "Notification settings": "Notification settings",
+  "Select the activities for which you wish to receive an email or a push notification.": "Select the activities for which you wish to receive an email or a push notification.",
+  "Push": "Push",
+  "Mentions": "Mentions",
+  "I've been mentionned in a comment under an event": "I've been mentionned in a comment under an event",
+  "I've been mentionned in a group discussion": "I've been mentionned in a group discussion",
+  "An event I'm going to has been updated": "An event I'm going to has been updated",
+  "An event I'm going to has posted an announcement": "An event I'm going to has posted an announcement",
+  "An event I'm organizing has a new pending participation": "An event I'm organizing has a new pending participation",
+  "An event I'm organizing has a new participation": "An event I'm organizing has a new participation",
+  "An event I'm organizing has a new comment": "An event I'm organizing has a new comment",
+  "Group activity": "Group activity",
+  "An event from one of my groups has been published": "An event from one of my groups has been published",
+  "An event from one of my groups has been updated or deleted": "An event from one of my groups has been updated or deleted",
+  "A discussion has been created or updated": "A discussion has been created or updated",
+  "A post has been published": "A post has been published",
+  "A post has been updated": "A post has been updated",
+  "A resource has been created or updated": "A resource has been created or updated",
+  "A member requested to join one of my groups": "A member requested to join one of my groups",
+  "A member has been updated": "A member has been updated",
+  "User settings": "User settings",
+  "You changed your email or password": "You changed your email or password"
 }
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@ -1047,7 +1047,7 @@
  "{moderator} suspended group {profile}": "{moderator} a suspendu le groupe {profile}",
  "{moderator} suspended profile {profile}": "{moderator} a suspendu le profil {profile}",
  "{nb} km": "{nb} km",
-  "{number} members": "{number} membres",
+  "{number} members": "Aucun⋅e membre|Un⋅e membre|{number} membres",
  "{number} organized events": "Aucun événement organisé|Un événement organisé|{number} événements organisés",
  "{number} participations": "Aucune participation|Une participation|{number} participations",
  "{number} posts": "Aucun billet|Un billet|{number} billets",
@ -1084,5 +1084,53 @@
  "{profile} updated the member {member}.": "{profile} a mis à jour le ou la membre {member}.",
  "{title} ({count} todos)": "{title} ({count} todos)",
  "{username} was invited to {group}": "{username} a été invité à {group}",
-  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
+  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
+  "You are offline": "Vous êtes hors-ligne",
+  "Create a new profile": "Créer un nouveau profil",
+  "Edit profile {profile}": "Éditer le profil {profile}",
+  "Identities": "Identités",
+  "Profile": "Profil",
+  "No members found": "Aucun⋅e membre trouvé⋅e",
+  "No organized events found": "Aucun événement organisé trouvé",
+  "Error while suspending group": "Erreur lors de la suspension du groupe",
+  "Triggered profile refreshment": "Rafraîchissement du profil demandé",
+  "No organized events listed": "Aucun événement organisé listé",
+  "No participations listed": "Aucune participation listée",
+  "{number} memberships": "{number} adhésions",
+  "No memberships found": "Aucune adhésion trouvée",
+  "No group matches the filters": "Aucun groupe ne correspond aux filtres",
+  "{group} events": "Événements de {group}",
+  "Interact with a remote content": "Interagir avec un contenu distant",
+  "{folder} - Resources": "{folder} - Ressources",
+  "General settings": "Paramètres généraux",
+  "Unsubscribe to WebPush": "Se désinscrire de WebPush",
+  "WebPush": "WebPush",
+  "You can't use webpush in this browser.": "Vous ne pouvez pas utiliser webpush dans ce navigateur.",
+  "Notify participants": "Notifier les participant⋅es",
+  "Browser notifications": "Notifications du navigateur",
+  "Unsubscribe to browser notifications": "Se désabonner des notifications du navigateur",
+  "Activate browser notification": "Activer le notifications du navigateur",
+  "You can't use notifications in this browser.": "Vous ne pouvez pas utiliser les notifications dans ce navigateur.",
+  "Notification settings": "Paramètres des notifications",
+  "Select the activities for which you wish to receive an email or a push notification.": "Sélectionnez les activités pour lesquelles vous souhaitez recevoir un email ou une notification push.",
+  "Push": "Push",
+  "Mentions": "Mentions",
+  "I've been mentionned in a comment under an event": "J'ai été mentionné⋅e dans un commentaire sous un événement",
+  "I've been mentionned in a group discussion": "J'ai été mentionné⋅e dans une discussion d'un groupe",
+  "An event I'm going to has been updated": "Un événement auquel je participe a été mis à jour",
+  "An event I'm going to has posted an announcement": "Un événement auquel je participe a posté une mise à jour",
+  "An event I'm organizing has a new pending participation": "Un événement que j'organise a une nouvelle participation en attente",
+  "An event I'm organizing has a new participation": "Un événement que j'organise a une nouvelle participation",
+  "An event I'm organizing has a new comment": "Un événement que j'organise a un nouveau commentaire",
+  "Group activity": "Activité des groupes",
+  "An event from one of my groups has been published": "Un événement d'un de mes groupes a été publié",
+  "An event from one of my groups has been updated or deleted": "Un événement d'un de mes groupes a été mis à jour ou supprimé",
+  "A discussion has been created or updated": "Une discussion a été créée ou mise à jour",
+  "A post has been published": "Un billet a été publié",
+  "A post has been updated": "Un billet a été mis à jour",
+  "A resource has been created or updated": "Une resource a été créée ou mise à jour",
+  "A member requested to join one of my groups": "Un membre a demandé a rejoindre l'un de mes groupes",
+  "A member has been updated": "Un membre a été mis à jour",
+  "User settings": "Paramètres utilisateur⋅ices",
+  "You changed your email or password": "Vous avez modifié votre email ou votre mot de passe"
 }
--- a/js/src/mixins/event.ts
+++ b/js/src/mixins/event.ts
@ -11,6 +11,7 @@ import {
  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) {
@ -30,7 +31,7 @@ export default class EventMixin extends mixins(Vue) {
          actorId,
          token,
        },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (data == null) return;
          let participation;

@ -43,19 +44,18 @@ export default class EventMixin extends mixins(Vue) {
            });
            if (participationCachedData == null) return;
            const { person } = participationCachedData;
-            if (person === null) {
-              console.error(
-                "Cannot update participation cache, because of null value."
-              );
-              return;
-            }
            [participation] = person.participations.elements;
-            person.participations.elements = [];
-            person.participations.total = 0;
-            store.writeQuery({
-              query: EVENT_PERSON_PARTICIPATION,
-              variables: { eventId: event.id, actorId },
-              data: { person },
+
+            store.modify({
+              id: `Person:${actorId}`,
+              fields: {
+                participations() {
+                  return {
+                    elements: [],
+                    total: 0,
+                  };
+                },
+              },
            });
          }

@ -69,21 +69,27 @@ export default class EventMixin extends mixins(Vue) {
            console.error("Cannot update event cache, because of null value.");
            return;
          }
+          const participantStats = { ...eventCached.participantStats };
          if (
            participation &&
-            participation.role === ParticipantRole.NOT_APPROVED
+            participation?.role === ParticipantRole.NOT_APPROVED
          ) {
-            eventCached.participantStats.notApproved -= 1;
+            participantStats.notApproved -= 1;
          } else if (anonymousParticipationConfirmed === false) {
-            eventCached.participantStats.notConfirmed -= 1;
+            participantStats.notConfirmed -= 1;
          } else {
-            eventCached.participantStats.going -= 1;
-            eventCached.participantStats.participant -= 1;
+            participantStats.going -= 1;
+            participantStats.participant -= 1;
          }
          store.writeQuery({
            query: FETCH_EVENT,
            variables: { uuid: event.uuid },
-            data: { event: eventCached },
+            data: {
+              event: {
+                ...eventCached,
+                participantStats,
+              },
+            },
          });
        },
      });
--- a/js/src/mixins/relay.ts
+++ b/js/src/mixins/relay.ts
@ -1,107 +1,31 @@
-import { Component, Vue, Ref } from "vue-property-decorator";
 import { IActor } from "@/types/actor";
-import { IFollower } from "@/types/actor/follower.model";
-import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from "@/graphql/admin";
-import { Paginate } from "@/types/paginate";
 import { ActorType } from "@/types/enums";
+import { Component, Vue, Ref } from "vue-property-decorator";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;

-@Component({
-  apollo: {
-    relayFollowings: {
-      query: RELAY_FOLLOWINGS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: this.followingsPage,
-          limit: this.perPage,
-        };
-      },
-    },
-    relayFollowers: {
-      query: RELAY_FOLLOWERS,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          page: this.followersPage,
-          limit: this.perPage,
-        };
-      },
-    },
-  },
-})
+@Component
 export default class RelayMixin extends Vue {
  @Ref("table") readonly table!: any;

-  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
-
-  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
-
-  checkedRows: IFollower[] = [];
-
-  followingsPage = 1;
-
-  followersPage = 1;
-
-  perPage = 10;
-
  toggle(row: Record<string, unknown>): void {
    this.table.toggleDetails(row);
  }

-  async onFollowingsPageChange(page: number): Promise<void> {
-    this.followingsPage = page;
+  protected async pushRouter(
+    routeName: string,
+    args: Record<string, string>
+  ): Promise<void> {
    try {
-      await this.$apollo.queries.relayFollowings.fetchMore({
-        variables: {
-          page: this.followingsPage,
-          limit: this.perPage,
-        },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          if (!fetchMoreResult) return previousResult;
-          const newFollowings = fetchMoreResult.relayFollowings.elements;
-          return {
-            relayFollowings: {
-              __typename: previousResult.relayFollowings.__typename,
-              total: previousResult.relayFollowings.total,
-              elements: [
-                ...previousResult.relayFollowings.elements,
-                ...newFollowings,
-              ],
-            },
-          };
-        },
+      await this.$router.push({
+        name: routeName,
+        query: { ...this.$route.query, ...args },
      });
-    } catch (err) {
-      console.error(err);
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
      }
    }
-
-  async onFollowersPageChange(page: number): Promise<void> {
-    this.followersPage = page;
-    try {
-      await this.$apollo.queries.relayFollowers.fetchMore({
-        variables: {
-          page: this.followersPage,
-          limit: this.perPage,
-        },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          if (!fetchMoreResult) return previousResult;
-          const newFollowers = fetchMoreResult.relayFollowers.elements;
-          return {
-            relayFollowers: {
-              __typename: previousResult.relayFollowers.__typename,
-              total: previousResult.relayFollowers.total,
-              elements: [
-                ...previousResult.relayFollowers.elements,
-                ...newFollowers,
-              ],
-            },
-          };
-        },
-      });
-    } catch (err) {
-      console.error(err);
-    }
  }

  static isInstance(actor: IActor): boolean {
--- a/js/src/registerServiceWorker.ts
+++ b/js/src/registerServiceWorker.ts
@ -2,7 +2,7 @@

 import { register } from "register-service-worker";

-if (process.env.NODE_ENV === "production") {
+if ("serviceWorker" in navigator && isProduction()) {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
@ -32,3 +32,8 @@ if (process.env.NODE_ENV === "production") {
    },
  });
 }
+
+function isProduction(): boolean {
+  return true;
+  // return process.env.NODE_ENV === "production";
+}
--- a/js/src/router/error.ts
+++ b/js/src/router/error.ts
@ -1,4 +1,3 @@
-import { beforeRegisterGuard } from "@/router/guards/register-guard";
 import { RouteConfig } from "vue-router";
 import { EsModuleComponent } from "vue/types/options";

@ -12,6 +11,5 @@ export const errorRoutes: RouteConfig[] = [
    name: ErrorRouteName.ERROR,
    component: (): Promise<EsModuleComponent> =>
      import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
-    beforeEnter: beforeRegisterGuard,
  },
 ];
--- a/js/src/router/guards/register-guard.ts
+++ b/js/src/router/guards/register-guard.ts
@ -2,6 +2,7 @@ import { ErrorCode } from "@/types/enums";
 import { NavigationGuard } from "vue-router";
 import { CONFIG } from "../../graphql/config";
 import apolloProvider from "../../vue-apollo";
+import { ErrorRouteName } from "../error";

 export const beforeRegisterGuard: NavigationGuard = async (to, from, next) => {
  const { data } = await apolloProvider.defaultClient.query({
@ -12,7 +13,7 @@ export const beforeRegisterGuard: NavigationGuard = async (to, from, next) => {

  if (!config.registrationsOpen && !config.registrationsAllowlist) {
    return next({
-      name: "Error",
+      name: ErrorRouteName.ERROR,
      query: { code: ErrorCode.REGISTRATION_CLOSED },
    });
  }
--- a/js/src/router/index.ts
+++ b/js/src/router/index.ts
@ -47,7 +47,7 @@ export const routes = [
    path: "/search",
    name: RouteName.SEARCH,
    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "search" */ "../views/Search.vue"),
+      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
    props: true,
    meta: { requiredAuth: false },
  },
@ -140,7 +140,9 @@ export const routes = [
    path: "/404",
    name: RouteName.PAGE_NOT_FOUND,
    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
+      import(
+        /* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue"
+      ),
    meta: { requiredAuth: false },
  },
  {
--- a/js/src/service-worker.ts
+++ b/js/src/service-worker.ts
@ -0,0 +1,100 @@
+import { registerRoute } from "workbox-routing";
+import {
+  NetworkFirst,
+  StaleWhileRevalidate,
+  CacheFirst,
+} from "workbox-strategies";
+
+// Used for filtering matches based on status code, header, or both
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
+// Used to limit entries in cache, remove entries after a certain period of time
+import { ExpirationPlugin } from "workbox-expiration";
+
+import { precacheAndRoute } from "workbox-precaching";
+import { IPushNotification } from "./types/push-notification";
+
+// Use with precache injection
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line no-underscore-dangle
+precacheAndRoute(self.__WB_MANIFEST);
+
+registerRoute(
+  // Check to see if the request is a navigation to a new page
+  ({ request }) => request.mode === "navigate",
+  // Use a Network First caching strategy
+  new NetworkFirst({
+    // Put all cached files in a cache named 'pages'
+    cacheName: "pages",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+    ],
+  })
+);
+
+// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
+registerRoute(
+  // Check to see if the request's destination is style for stylesheets, script for JavaScript, or worker for web worker
+  ({ request }) =>
+    request.destination === "style" ||
+    request.destination === "script" ||
+    request.destination === "worker",
+  // Use a Stale While Revalidate caching strategy
+  new StaleWhileRevalidate({
+    // Put all cached files in a cache named 'assets'
+    cacheName: "assets",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+    ],
+  })
+);
+
+// Cache images with a Cache First strategy
+registerRoute(
+  // Check to see if the request's destination is style for an image
+  ({ request }) => request.destination === "image",
+  // Use a Cache First caching strategy
+  new CacheFirst({
+    // Put all cached files in a cache named 'images'
+    cacheName: "images",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+      // Don't cache more than 50 items, and expire them after 30 days
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
+      }),
+    ],
+  })
+);
+
+self.addEventListener("push", async (event: any) => {
+  const payload = event.data.json() as IPushNotification;
+  console.log("received push", payload);
+  const options = {
+    title: payload.title,
+    body: payload.body,
+    icon: "/img/icons/android-chrome-512x512.png",
+    badge: "/img/icons/badge-128x128.png",
+    timestamp: new Date(payload.timestamp),
+    lang: payload.locale,
+    data: {
+      dateOfArrival: Date.now(),
+    },
+  };
+
+  event.waitUntil(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    self.registration.showNotification(payload.title, options)
+  );
+});
--- a/js/src/services/push-subscription.ts
+++ b/js/src/services/push-subscription.ts
@ -0,0 +1,60 @@
+import apolloProvider from "@/vue-apollo";
+import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
+import { WEB_PUSH } from "../graphql/config";
+import { IConfig } from "../types/config.model";
+
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+}
+
+export async function subscribeUserToPush(): Promise<PushSubscription | null> {
+  const client =
+    apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
+
+  const registration = await navigator.serviceWorker.ready;
+  const { data } = await client.mutate<{ config: IConfig }>({
+    mutation: WEB_PUSH,
+  });
+
+  if (data?.config?.webPush?.enabled && data?.config?.webPush?.publicKey) {
+    const subscribeOptions = {
+      userVisibleOnly: true,
+      applicationServerKey: urlBase64ToUint8Array(
+        data?.config?.webPush?.publicKey
+      ),
+    };
+    const pushSubscription = await registration.pushManager.subscribe(
+      subscribeOptions
+    );
+    console.log(
+      "Received PushSubscription: ",
+      JSON.stringify(pushSubscription)
+    );
+    return pushSubscription;
+  }
+  return null;
+}
+
+export async function unsubscribeUserToPush(): Promise<string | undefined> {
+  console.log("performing unsubscribeUserToPush");
+  const registration = await navigator.serviceWorker.ready;
+  console.log("found registration", registration);
+  const subscription = await registration.pushManager.getSubscription();
+  console.log("found subscription", subscription);
+  if (subscription && (await subscription?.unsubscribe()) === true) {
+    console.log("done unsubscription");
+    return subscription?.endpoint;
+  }
+  console.log("went wrong");
+  return undefined;
+}
--- a/js/src/types/apollo.ts
+++ b/js/src/types/apollo.ts
@ -1,4 +1,5 @@
-import { ServerError, ServerParseError } from "apollo-link-http-common";
+import { ServerParseError } from "@apollo/client/link/http";
+import { ServerError } from "@apollo/client/link/utils";

 function isServerError(
  err: Error | ServerError | ServerParseError | undefined
--- a/js/src/types/comment.model.ts
+++ b/js/src/types/comment.model.ts
@ -19,6 +19,7 @@ export interface IComment {
  totalReplies: number;
  insertedAt?: Date | string;
  publishedAt?: Date | string;
+  isAnnouncement: boolean;
 }

 export class CommentModel implements IComment {
@ -50,6 +51,8 @@ export class CommentModel implements IComment {

  totalReplies = 0;

+  isAnnouncement = false;
+
  constructor(hash?: IComment) {
    if (!hash) return;

@ -66,5 +69,6 @@ export class CommentModel implements IComment {
    this.deletedAt = hash.deletedAt;
    this.insertedAt = new Date(hash.insertedAt as string);
    this.totalReplies = hash.totalReplies;
+    this.isAnnouncement = hash.isAnnouncement;
  }
 }
--- a/js/src/types/config.model.ts
+++ b/js/src/types/config.model.ts
@ -98,4 +98,8 @@ export interface IConfig {
  instanceFeeds: {
    enabled: boolean;
  };
+  webPush: {
+    enabled: boolean;
+    publicKey: string;
+  };
 }
--- a/js/src/types/current-user.model.ts
+++ b/js/src/types/current-user.model.ts
@ -28,6 +28,12 @@ export interface IUserSettings {
  location?: IUserPreferredLocation;
 }

+export interface IActivitySetting {
+  key: string;
+  method: string;
+  enabled: boolean;
+}
+
 export interface IUser extends ICurrentUser {
  confirmedAt: Date;
  confirmationSendAt: Date;
@ -37,6 +43,7 @@ export interface IUser extends ICurrentUser {
  mediaSize: number;
  drafts: IEvent[];
  settings: IUserSettings;
+  activitySettings: IActivitySetting[];
  locale: string;
  provider?: string;
  lastSignInAt: string;
--- a/js/src/types/event.model.ts
+++ b/js/src/types/event.model.ts
@ -42,6 +42,7 @@ interface IEventEditJSON {
  draft: boolean;
  picture?: IMedia | { mediaId: string } | null;
  attributedToId: string | null;
+  organizerActorId?: string;
  onlineAddress?: string;
  phoneAddress?: string;
  physicalAddress?: IAddress;
@ -209,8 +210,8 @@ export class EventModel implements IEvent {
      tags: this.tags.map((t) => t.title),
      onlineAddress: this.onlineAddress,
      phoneAddress: this.phoneAddress,
-      physicalAddress: this.physicalAddress,
-      options: this.options,
+      physicalAddress: this.removeTypeName(this.physicalAddress),
+      options: this.removeTypeName(this.options),
      attributedToId:
        this.attributedTo && this.attributedTo.id ? this.attributedTo.id : null,
      contacts: this.contacts.map(({ id }) => ({
@ -218,4 +219,13 @@ export class EventModel implements IEvent {
      })),
    };
  }
+
+  private removeTypeName(entity: any): any {
+    if (entity?.__typename) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { __typename, ...purgedEntity } = entity;
+      return purgedEntity;
+    }
+    return entity;
+  }
 }
--- a/js/src/types/push-notification.ts
+++ b/js/src/types/push-notification.ts
@ -0,0 +1,7 @@
+export interface IPushNotification {
+  title: string;
+  body: string;
+  url: string;
+  timestamp: string;
+  locale: string;
+}
--- a/js/src/utils/auth.ts
+++ b/js/src/utils/auth.ts
@ -9,11 +9,12 @@ import {
 } from "@/constants";
 import { ILogin, IToken } from "@/types/login.model";
 import { UPDATE_CURRENT_USER_CLIENT } from "@/graphql/user";
-import ApolloClient from "apollo-client";
+import { ApolloClient } from "@apollo/client/core/ApolloClient";
 import { IPerson } from "@/types/actor";
 import { IDENTITIES, UPDATE_CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
 import { ICurrentUserRole } from "@/types/enums";
+import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
+import { LOGOUT } from "@/graphql/auth";

 export function saveTokenData(obj: IToken): void {
  localStorage.setItem(AUTH_ACCESS_TOKEN, obj.accessToken);
@ -96,6 +97,13 @@ export async function initializeCurrentActor(
 export async function logout(
  apollo: ApolloClient<NormalizedCacheObject>
 ): Promise<void> {
+  await apollo.mutate({
+    mutation: LOGOUT,
+    variables: {
+      refreshToken: localStorage.getItem(AUTH_REFRESH_TOKEN),
+    },
+  });
+
  await apollo.mutate({
    mutation: UPDATE_CURRENT_USER_CLIENT,
    variables: {
--- a/js/src/views/About.vue
+++ b/js/src/views/About.vue
@ -108,6 +108,15 @@ import RouteName from "../router/name";
      query: CONFIG,
    },
  },
+  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;
--- a/js/src/views/About/AboutInstance.vue
+++ b/js/src/views/About/AboutInstance.vue
@ -135,6 +135,15 @@ import langs from "../../i18n/langs.json";
  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;
--- a/js/src/views/About/Glossary.vue
+++ b/js/src/views/About/Glossary.vue
@ -73,6 +73,11 @@ import { IConfig } from "../../types/config.model";
  apollo: {
    config: ABOUT,
  },
+  metaInfo() {
+    return {
+      title: this.$t("Glossary") as string,
+    };
+  },
 })
 export default class Glossary extends Vue {
  config!: IConfig;
--- a/js/src/views/About/Privacy.vue
+++ b/js/src/views/About/Privacy.vue
@ -29,6 +29,11 @@ import { InstancePrivacyType } from "@/types/enums";
      },
    },
  },
+  metaInfo() {
+    return {
+      title: this.$t("Privacy Policy") as string,
+    };
+  },
 })
 export default class Privacy extends Vue {
  config!: IConfig;
--- a/js/src/views/About/Rules.vue
+++ b/js/src/views/About/Rules.vue
@ -18,6 +18,11 @@ import RouteName from "../../router/name";
      query: RULES,
    },
  },
+  metaInfo() {
+    return {
+      title: this.$t("Rules") as string,
+    };
+  },
 })
 export default class Rules extends Vue {
  config!: IConfig;
--- a/js/src/views/About/Terms.vue
+++ b/js/src/views/About/Terms.vue
@ -25,6 +25,11 @@ import { InstanceTermsType } from "@/types/enums";
      },
    },
  },
+  metaInfo() {
+    return {
+      title: this.$t("Terms") as string,
+    };
+  },
 })
 export default class Terms extends Vue {
  config!: IConfig;
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="opacity:1;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:1" d="M-5.801-6.164h72.69v72.871h-72.69z"/><g data-name="Calque 2"><g data-name="header"><path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)"/><path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)"/></g></g></svg>