lint

add makefile start-dev task

.devcontainer/Dockerfile

@@ -0,0 +1,66 @@
+# Update the VARIANT arg in docker-compose.yml to pick an Elixir version: 1.9, 1.10, 1.10.4
+ARG VARIANT="1.12.3"
+FROM elixir:${VARIANT}
+
+# This Dockerfile adds a non-root user with sudo access. Update the “remoteUser” property in
+# devcontainer.json to use it. More info: https://aka.ms/vscode-remote/containers/non-root-user.
+ARG USERNAME=vscode
+ARG USER_UID=1000
+ARG USER_GID=$USER_UID
+
+# Options for common package install script
+ARG INSTALL_ZSH="true"
+ARG UPGRADE_PACKAGES="true"
+ARG COMMON_SCRIPT_SOURCE="https://raw.githubusercontent.com/microsoft/vscode-dev-containers/v0.209.6/script-library/common-debian.sh"
+ARG COMMON_SCRIPT_SHA="d35dd1711454156c9a59cc41ebe04fbff681ca0bd304f10fd5b13285d0de13b2"
+
+# Optional Settings for Phoenix
+ARG PHOENIX_VERSION="1.6.2"
+
+# [Optional] Setup nodejs
+ARG NODE_SCRIPT_SOURCE="https://raw.githubusercontent.com/microsoft/vscode-dev-containers/main/script-library/node-debian.sh"
+ARG NODE_SCRIPT_SHA="dev-mode"
+ARG NODE_VERSION="none"
+ENV NVM_DIR=/usr/local/share/nvm
+ENV NVM_SYMLINK_CURRENT=true
+ENV PATH=${NVM_DIR}/current/bin:${PATH}
+
+# [Optional, Choice] Node.js version: none, lts/*, 16, 14, 12, 10
+ARG NODE_VERSION="none"
+
+# Install needed packages and setup non-root user. Use a separate RUN statement to add your own dependencies.
+RUN apt-get update \
+  && export DEBIAN_FRONTEND=noninteractive \
+  && apt-get -y install --no-install-recommends curl ca-certificates 2>&1 \
+  && curl -sSL ${COMMON_SCRIPT_SOURCE} -o /tmp/common-setup.sh \
+  && ([ "${COMMON_SCRIPT_SHA}" = "dev-mode" ] || (echo "${COMMON_SCRIPT_SHA} */tmp/common-setup.sh" | sha256sum -c -)) \
+  && /bin/bash /tmp/common-setup.sh "${INSTALL_ZSH}" "${USERNAME}" "${USER_UID}" "${USER_GID}" "${UPGRADE_PACKAGES}" \
+  #
+  # [Optional] Install Node.js for use with web applications
+  && if [ "$NODE_VERSION" != "none" ]; then \
+  curl -sSL ${NODE_SCRIPT_SOURCE} -o /tmp/node-setup.sh \
+  && ([ "${NODE_SCRIPT_SHA}" = "dev-mode" ] || (echo "${NODE_SCRIPT_SHA} */tmp/node-setup.sh" | sha256sum -c -)) \
+  && /bin/bash /tmp/node-setup.sh "${NVM_DIR}" "${NODE_VERSION}" "${USERNAME}"; \
+  fi \
+  #
+  # Install dependencies
+  && apt-get install -y build-essential \
+  #
+  # Clean up
+  && apt-get autoremove -y \
+  && apt-get clean -y \
+  && rm -rf /var/lib/apt/lists/* /tmp/common-setup.sh /tmp/node-setup.sh
+
+RUN su ${USERNAME} -c "mix local.hex --force \
+  && mix local.rebar --force \
+  && mix archive.install --force hex phx_new ${PHOENIX_VERSION}"
+
+RUN apt-get update \
+  && export DEBIAN_FRONTEND=noninteractive \
+  && apt-get -y install --no-install-recommends cmake webp bash libncurses6 git python3 inotify-tools \
+  && apt-get autoremove -y \
+  && apt-get clean -y \
+  && rm -rf /var/lib/apt/lists/*
+
+# [Optional] Uncomment this line to install additional package.
+# RUN  mix ...

.devcontainer/devcontainer.json

@@ -0,0 +1,44 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.209.6/containers/elixir-phoenix-postgres
+{
+	"name": "Elixir, Phoenix, Node.js & PostgresSQL (Community)",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "elixir",
+	"workspaceFolder": "/workspace",
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": {
+		"sqltools.connections": [{
+			"name": "Container database",
+			"driver": "PostgreSQL",
+			"previewLimit": 50,
+			"server": "localhost",
+			"port": 5432,
+			"database": "postgres",
+			"username": "postgres",
+			"password": "postgres"
+		}]
+	},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"jakebecker.elixir-ls",
+		"mtxr.sqltools",
+		"mtxr.sqltools-driver-pg"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [4000, 4001, 5432],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "mix deps.get",
+	// "runArgs": ["--userns=keep-id", "--privileged"],
+	// "containerUser": "vscode",
+	// "containerEnv": {
+	// 	"HOME": "/home/vscode",
+	// },
+	// "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,Z",
+
+	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "vscode"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,46 @@
+version: "3.8"
+
+services:
+  elixir:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # Elixir Version: 1.9, 1.10, 1.10.4, ...
+        VARIANT: "1.13.1"
+        # Phoenix Version: 1.4.17, 1.5.4, ...
+        PHOENIX_VERSION: "1.6.6"
+        # Node Version: 10, 11, ...
+        NODE_VERSION: "16"
+
+    volumes:
+      - ..:/workspace:z
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+    environment:
+      MOBILIZON_INSTANCE_NAME: My Mobilizon Instance
+      MOBILIZON_INSTANCE_HOST: localhost
+      MOBILIZON_INSTANCE_HOST_PORT: 4000
+      MOBILIZON_INSTANCE_PORT: 4000
+      MOBILIZON_INSTANCE_EMAIL: noreply@mobilizon.me
+      MOBILIZON_INSTANCE_REGISTRATIONS_OPEN: "true"
+      MOBILIZON_DATABASE_PASSWORD: postgres
+      MOBILIZON_DATABASE_USERNAME: postgres
+      MOBILIZON_DATABASE_DBNAME: mobilizon
+      MOBILIZON_DATABASE_HOST: db
+
+  db:
+    image: postgis/postgis:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: app
+
+volumes:
+  postgres-data: null

.env.template

@@ -19,7 +19,6 @@ MOBILIZON_REPLY_EMAIL=contact@mobilizon.lan
 # Email settings
 MOBILIZON_SMTP_SERVER=localhost
 MOBILIZON_SMTP_PORT=25
-MOBILIZON_SMTP_HOSTNAME=localhost
 MOBILIZON_SMTP_USERNAME=noreply@mobilizon.lan
 MOBILIZON_SMTP_PASSWORD=password
 MOBILIZON_SMTP_SSL=false

.formatter.exs

@@ -1,3 +1,4 @@
 [
-  inputs: ["{mix,.formatter}.exs", "{config,lib,test,priv}/**/*.{ex,exs}"]
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["{mix,.formatter}.exs", "{config,lib,test,priv}/**/*.{ex,exs,heex}"]
 ]

.gitlab-ci.yml

@@ -59,8 +59,11 @@ lint-elixir:
     - mix deps.get
   script:
     - export EXITVALUE=0
+    - git fetch origin ${CI_DEFAULT_BRANCH}
+    - TARGET_SHA1=$(git show-ref -s ${CI_DEFAULT_BRANCH})
+    - echo "$TARGET_SHA1"
     - mix format --check-formatted --dry-run || export EXITVALUE=1
-    - mix credo --strict -a || export EXITVALUE=1
+    - mix credo diff --from-git-merge-base $TARGET_SHA1 --strict -a || export EXITVALUE=1
     - mix sobelow --config || export EXITVALUE=1
     - exit $EXITVALUE
 
@@ -107,7 +110,7 @@ deps:
 exunit:
   stage: test
   services:
-    - name: postgis/postgis:13-3.1
+    - name: postgis/postgis:14-3.2
       alias: postgres
   variables:
     MIX_ENV: test
@@ -172,7 +175,7 @@ pages:
   #     #- yarn run --cwd "js" styleguide:build
   #     #- mv js/styleguide public/frontend
   rules:
-    - if: '$CI_COMMIT_BRANCH == "master"'
+    - if: '$CI_COMMIT_BRANCH == "main"'
   artifacts:
     expire_in: 1 hour
     paths:
@@ -180,7 +183,7 @@ pages:
 
 .docker: &docker
   stage: docker
-  image: docker:stable
+  image: docker:20.10.12
   variables:
     DOCKER_TLS_CERTDIR: "/certs"
     DOCKER_HOST: tcp://docker:2376
@@ -188,13 +191,13 @@ pages:
     DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
     DOCKER_DRIVER: overlay2
   services:
-    - docker:stable-dind
+    - docker:20.10.12-dind
   cache: {}
   before_script:
     # Install buildx
-    - wget https://github.com/docker/buildx/releases/download/v0.6.3/buildx-v0.6.3.linux-amd64
+    - wget https://github.com/docker/buildx/releases/download/v0.8.1/buildx-v0.8.1.linux-amd64
     - mkdir -p ~/.docker/cli-plugins/
-    - mv buildx-v0.6.3.linux-amd64 ~/.docker/cli-plugins/docker-buildx
+    - mv buildx-v0.8.1.linux-amd64 ~/.docker/cli-plugins/docker-buildx
     - chmod a+x ~/.docker/cli-plugins/docker-buildx
     # Create env
     - docker context create tls-environment
@@ -205,25 +208,17 @@ pages:
     # Login to DockerHub
     - mkdir -p ~/.docker
     - echo "{\"auths\":{\"$CI_REGISTRY\":{\"auth\":\"$CI_REGISTRY_AUTH\",\"email\":\"$CI_REGISTRY_EMAIL\"}}}" > ~/.docker/config.json
-  script:
-    - >
-      docker buildx build
-      --push
-      --platform linux/amd64,linux/arm64,linux/arm
-      -t $DOCKER_IMAGE_NAME
-      -f docker/production/Dockerfile .
   tags:
     - "privileged"
-  timeout: 3 hours
 
-build-docker-master:
+build-docker-main:
   <<: *docker
   rules:
     - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
       when: never
     - if: '$CI_PIPELINE_SOURCE == "schedule"'
-  variables:
-    DOCKER_IMAGE_NAME: framasoft/mobilizon:master
+  script:
+    - docker buildx build --push --platform linux/amd64 -t framasoft/mobilizon:main -f docker/production/Dockerfile .
 
 build-docker-tag:
   <<: *docker
@@ -231,19 +226,31 @@ build-docker-tag:
     - if: '$CI_PROJECT_NAMESPACE != "framasoft"'
       when: never
     - if: $CI_COMMIT_TAG
-  variables:
-    DOCKER_IMAGE_NAME: framasoft/mobilizon:$CI_COMMIT_TAG
+  timeout: 3 hours
+  script:
+    - >
+      docker buildx build
+      --push
+      --platform linux/amd64,linux/arm64,linux/arm
+      -t framasoft/mobilizon:$CI_COMMIT_TAG
+      -t framasoft/mobilizon:latest
+      -f docker/production/Dockerfile .
 
 # Packaging app for amd64
 package-app:
+  image: mobilizon/buildpack:1.13.4-erlang-24.3.3-debian-buster
   stage: package
   variables: &release-variables
     MIX_ENV: "prod"
+    DEBIAN_FRONTEND: noninteractive
+    TZ: Etc/UTC
+    APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
   script: &release-script
     - mix local.hex --force
     - mix local.rebar --force
-    - mix deps.get
-    - mix phx.digest
+    - mix deps.get --only-prod
+    - mix compile
+    - mix phx.digest.clean --all && \
     - mix release --path release/mobilizon
     - cd release/mobilizon && ln -s lib/mobilizon-*/priv priv && cd ../../
     - du -sh release/
@@ -253,7 +260,7 @@ package-app:
   only:
     - tags@framasoft/mobilizon
   artifacts:
-    expire_in: 30 days
+    expire_in: 2 days
     paths:
       - ${APP_ASSET}
 
@@ -271,7 +278,7 @@ package-app-dev:
 # Packaging app for multi-arch
 multi-arch-release:
   stage: package
-  image: docker:stable
+  image: docker:20.10.12
   variables:
     DOCKER_TLS_CERTDIR: "/certs"
     DOCKER_HOST: tcp://docker:2376
@@ -279,14 +286,15 @@ multi-arch-release:
     DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
     DOCKER_DRIVER: overlay2
     APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
+    OS: debian-buster
   services:
-    - docker:stable-dind
+    - docker:20.10.12-dind
   cache: {}
   before_script:
     # Install buildx
-    - wget https://github.com/docker/buildx/releases/download/v0.6.3/buildx-v0.6.3.linux-amd64
+    - wget https://github.com/docker/buildx/releases/download/v0.8.1/buildx-v0.8.1.linux-amd64
     - mkdir -p ~/.docker/cli-plugins/
-    - mv buildx-v0.6.3.linux-amd64 ~/.docker/cli-plugins/docker-buildx
+    - mv buildx-v0.8.1.linux-amd64 ~/.docker/cli-plugins/docker-buildx
     - chmod a+x ~/.docker/cli-plugins/docker-buildx
     # Create env
     - docker context create tls-environment
@@ -298,12 +306,13 @@ multi-arch-release:
     - docker buildx build --platform linux/${ARCH} --output type=local,dest=releases --build-arg APP_ASSET=${APP_ASSET} -f docker/multiarch/Dockerfile .
     - ls -alh releases/mobilizon/
     - du -sh releases/mobilizon/${APP_ASSET}
+    - mv releases/mobilizon/${APP_ASSET} .
   tags:
     - "privileged"
   artifacts:
-    expire_in: 30 days
+    expire_in: 2 days
     paths:
-      - releases/mobilizon/${APP_ASSET}
+      - ${APP_ASSET}
   parallel:
     matrix:
       - ARCH: ["arm", "arm64"]
@@ -312,26 +321,36 @@ multi-arch-release:
       when: never
     - if: '$CI_PIPELINE_SOURCE == "schedule"'
     - if: $CI_COMMIT_TAG
+  timeout: 3h
 
 # Release
 release-upload:
   stage: upload
-  image: framasoft/yakforms-assets-deploy:latest
+  image: framasoft/upload-packages:latest
+  variables:
+    APP_ASSET: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${ARCH}.tar.gz"
   rules: *tag-rules
   script:
     - eval `ssh-agent -s`
     - ssh-add <(echo "${DEPLOYEMENT_KEY}" | base64 --decode -i)
-    - echo "put -r mobilizon_*.tar.gz" | sftp -o "VerifyHostKeyDNS yes" ${DEPLOYEMENT_USER}@${DEPLOYEMENT_HOST}:public/
+    - echo "put -r ${APP_ASSET}" | sftp -o "VerifyHostKeyDNS yes" ${DEPLOYEMENT_USER}@${DEPLOYEMENT_HOST}:public/
   artifacts:
     expire_in: 1 day
     when: on_success
     paths:
       - mobilizon_*.tar.gz
+  parallel:
+    matrix:
+      - ARCH: ["amd64", "arm", "arm64"]
 
 release-create:
   stage: deploy
   image: registry.gitlab.com/gitlab-org/release-cli:latest
   rules: *tag-rules
+  variables:
+    APP_ASSET_AMD64: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_amd64.tar.gz"
+    APP_ASSET_ARM: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_arm.tar.gz"
+    APP_ASSET_ARM64: "${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_arm64.tar.gz"
   before_script:
     - apk --no-cache add gawk sed grep
   script: |
@@ -341,4 +360,6 @@ release-create:
     release-cli create  --name "$CI_COMMIT_TAG" \
                         --description "$CHANGELOG" \
                         --tag-name "$CI_COMMIT_TAG" \
-                        --assets-link "{\"name\":\"${APP_ASSET}\",\"url\":\"${ENDPOINT}/${APP_ASSET}\"}"
+                        --assets-link "{\"name\":\"${APP_ASSET_AMD64}\",\"url\":\"${ENDPOINT}/${APP_ASSET_AMD64}\"}" \
+                        --assets-link "{\"name\":\"${APP_ASSET_ARM}\",\"url\":\"${ENDPOINT}/${APP_ASSET_ARM}\"}" \
+                        --assets-link "{\"name\":\"${APP_ASSET_ARM64}\",\"url\":\"${ENDPOINT}/${APP_ASSET_ARM64}\"}"

.sobelow-conf

@@ -8,5 +8,5 @@
   out: "",
   threshold: "medium",
   ignore: ["Config.HTTPS", "Config.CSP"],
-  ignore_files: ["config/dev.1.secret.exs", "config/dev.2.secret.exs", "config/dev.3.secret.exs", "config/dev.secret.exs", "config/e2e.secret.exs", "config/prod.secret.exs", "config/test.secret.exs", "config/runtime.1.secret.exs", "config/runtime.2.secret.exs", "config/runtime.3.secret.exs", "config/runtime.exs"]
+  ignore_files: ["config/runtime.exs"]
 ]

.sobelow-skips

@@ -1,12 +1,16 @@
 
-5048AE33D6269B15E21CF28C6F545AB6
-
-752C0E897CA81ACD81F4BB215FA5F8E4
-23412CF16549E4E88366DC9DECF39071
-81C1F600C5809C7029EE32DE4818CD7D
+02CE4963DFD1B0D6D5C567357CAFFE97
 155A1FB53DE39EC8EFCFD7FB94EA823D
-73B351E4CB3AF715AD450A085F5E6304
-BBACD7F0BACD4A6D3010C26604671692
-6D4D4A4821B93BCFAC9CDBB367B34C4B
-5674F0D127852889ED0132DC2F442AAB
-1600B7206E47F630D94AB54C360906F0
+2262742E5C8944D5BF6698EC61F5DE50
+25BEE162A99754480967216281E9EF33
+2A6F71CD6F1246F0B152C2376E2E398A
+30552A09D485A6AA73401C1D54F63C21
+52900CE4EE3598F6F178A651FB256770
+6151F44368FC19F2394274F513C29151
+765526195D4C6D770EAF4DC944A8CBF4
+B2FF1A12F13B873507C85091688C1D6D
+B9AF8A342CD7FF39E10CC10A408C28E1
+C042E87389F7BDCFF4E076E95731AE69
+C42BFAEF7100F57BED75998B217C857A
+D11958E86F1B6D37EF656B63405CA8A4
+F16F054F2628609A726B9FF2F089D484

.tool-versions

@@ -0,0 +1,2 @@
+elixir 1.13.4-otp-24
+erlang 24.3.3

CHANGELOG.md

@@ -1,9 +1,686 @@
 # Changelog
+
 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).
 
+## 2.1.0 - 2022-05-16
+
+### Added
+
+- Added an event category field. Administrators can extend the pre-configured list of categories through configuration.
+- Added possibility for administrators to have analytics (Matomo, Plausible supported) and error handling (Sentry supported) on front-end.
+- Redesigned federation admin section with dedicated instance pages
+- Allow to filter moderation reports by domain
+- Added a button to go to past events of a group if it has no upcoming events
+- Add Überauth CAS Strategy
+- Add a CLI command to delete actors
+
+### Changed
+
+- Changed mailer library from Bamboo to Swoosh, should fix emails being considered spam. **Some configuration changes are required, see [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md).**
+- Expose some fields to ActivityStreams event representation: `isOnline`, `remainingAttendeeCapacity` and `participantCount`
+- Expose a new field to ActivityStreams group representation: `memberCount`
+- Improve group creation errors feedback
+- Only display locality in event card
+- Stale groups are now excluded from group search
+- Event default visibility is now set according to group privacy setting
+- Remove Koena Connect button
+- Hide the whole metadata block if group has no description
+- Increase task timeout in Refresher to 60 seconds
+- Allow webfinger to be fetched over http (not https) in dev mode
+- Improve reactions when approving/rejecting an instance follow
+- Improve instance admin view for mobile
+- Allow to reject instance following
+- Allow instance to have non-standard ports
+- Add pagination to the instances list
+- Eventually fetch actors in mentions
+- Improve IdentityPicker, JoinGroupWithAccount and ActorInline components
+- Various group and posts improvements
+- Update schema.graphql file
+- Add "Accept-Language" header to sentry request metadata
+- Hide address blocks when address has no real data
+- Remove obsolete attribute `type="text/css"` from `<style>` tags
+- Improve actor cards integration
+- Use upstream dependencies for Ueberauth providers
+- Include ongoing events in search
+- Send push notification into own task
+- Add appropriate timeouts for Repo.transactions
+- Add a proper error message when adding an instance follow that doesn't respond
+- Allow the instance to be followed from Mastodon (through relays)
+- Remove unused fragment from FETCH_PERSON GraphQL query
+
+### Fixed
+
+- Fixed actor refreshment being impossible
+- Fixed ical export for undefined datetimes
+- Fixed parsing links with hashtag characters
+- Fixed fetching link details from Twitter
+- Fixed Thunderbird accessing ICS feed endpoint with special `Accept` HTTP header
+- Make sure every ICS/Feed caches are emptied when modifying entities
+- Fixed time issues with DST changes
+- Fixed group preview card not truncating description
+- Fixed redirection after login
+- Fixed user admin section showing button to confirm user when the user is already confirmed
+- Fixed creating event from group view not always setting the group as organizer
+- Fixed invalid addresses blocking event metadata preview rendering
+- Fixed group deletion with comments that caused foreign key issues
+- Fixed incoming Accept activities from participations we don't already have
+- Fixed resources that didn't have metadata size limits
+- Properly fallback to UTC when sending notifications and the user doesn't have a timezone setting set
+- Fix posts creation
+- Fix rejecting instance follow
+- Fix pagination of group events
+- Add proper fallback for when a TZ isn't registered
+- Hide side of report modal on low width screens
+- Fix Telegram Logo being replaced with Mastodon logo in ShareGroupModal
+- Change URL for Mastodon Share Manager
+- Fix receiving Flag activities on federated events
+- Fix activity notifications by preloading user.activity_settings
+- Fix text overflow on group card description
+- Exclude tags with more than 40 characters from being extracted
+- Avoid duplicate tags with different casing
+- Fix invalid HTML (`<div>` inside `<label>`)
+- Fix latest group not refreshing in admin section
+- Add missing "relay@" part of federated address to follow
+- Fix Ueberauth use of CSRF with session
+- Fix being an administrator when using 3rd-party auth provider
+- Make sure activity recipient can't be nil
+- Make sure users can't create profiles or groups with non-valid patterns
+- Add description field to address representation
+- Make sure prompt show the correct message and not just "Continue?" in mix mode
+- Make sure activity notification recaps can't be sent multiple times
+- Fix group notification of new event being sent multiple times
+- Fix links to group page in group membership emails and participation
+- Fix clicking on map crashing the app
+
+### Translations
+
+- Arabic
+- Basque
+- Belarusian
+- Bengali
+- Catalan
+- Chinese (Traditional)
+- Croatian
+- Czech
+- Danish
+- Dutch
+- Esperanto
+- Finnish
+- French
+- Gaelic
+- Galician
+- German
+- Hebrew
+- Hungarian
+- Indonesian
+- Italian
+- Japanese
+- Kabyle
+- Kannada
+- Norwegian Nynorsk
+- Occitan
+- Persian
+- Polish
+- Portuguese
+- Portuguese (Brazil)
+- Russian
+- Slovenian
+- Spanish
+- Swedish
+- Welsh
+
+## 2.1.0-rc.6 - 2022-05-11
+
+Changes since rc.5:
+
+- Allow the instance to be followed from Mastodon (through relays)
+- Make sure activity recipient can't be nil
+- Make sure users can't create profiles or groups with non-valid patterns
+- Add description field to address representation
+- Make sure prompt show the correct message and not just "Continue?" in mix mode
+- Add a CLI command to delete actors
+- Make sure activity notification recaps can't be sent multiple times
+- Fix group notification of new event being sent multiple times
+- Fix links to group page in group membership emails and participation
+- Fix clicking on map crashing the app
+- Remove unused fragment from FETCH_PERSON GraphQL query
+
+## 2.1.0-rc.5 - 2022-05-06
+
+Changes since rc.4:
+
+- Add appropriate timeouts for Repo.transactions
+- Remove OS-specific packages
+- Remove refresh instance triggers
+- Add a proper error message when adding an instance follow that doesn't respond
+
+## 2.1.0-rc.4 - 2022-05-03
+
+Changes since rc.3:
+
+- Use upstream dependencies for Ueberauth providers
+- Fix Ueberauth use of CSRF with session
+- Fix being an administrator when using 3rd-party auth provider
+- Include ongoing events in search
+- Send push notification into own task
+- Add Überauth CAS Strategy
+
+## 2.1.0-rc.3 - 2022-04-24
+
+Changes since rc.2:
+
+- Fix activity notifications by preloading user.activity_settings
+- Add "Accept-Language" header to sentry request metadata
+- Hide address blocks when address has no real data
+- Fix text overflow on group card description
+- Exclude tags with more than 40 characters from being extracted
+- Avoid duplicate tags with different casing
+- Fix invalid HTML (<div> inside <label>)
+- Remove attribute type="text/css" from <style> tags
+- Improve actor cards integration
+- Fix latest group not refreshing in admin section
+- Add missing "relay@" part of federated address to follow
+
+## 2.1.0-rc.2 - 2022-04-20
+
+Changes since rc.1:
+
+- Hide the whole metadata block if group has no description
+- Increase task timeout in Refresher to 60 seconds
+- Allow webfinger to be fetched over http (not https) in dev mode
+- Fix rejecting instance follow
+- Allow instance to have non-standard ports
+- Improve reactions when approving/rejecting an instance follow
+- Improve instance admin view for mobile
+- Allow to reject instance following
+- Fix pagination of group events
+- Add pagination to the instances list
+- Upgrade deps
+- Eventually fetch actors in mentions
+- Add proper fallback for when a TZ isn't registered
+- Improve IdentityPicker
+- Hide side of report modal on low width screens
+- Improve JoinGroupWithAccount component
+- Various group and posts improvements
+- Fix Telegram Logo being replaced with Mastodon logo in ShareGroupModal
+- Change URL to Mastodon Share Manager
+- Improve ActorInline component
+- Avoid assuming we're on Debian-based in release build
+- Fix receiving Flag activities on federated events
+- Update schema.graphql file
+
+## 2.1.0-rc.1 - 2022-04-18
+
+Changes since beta.3:
+
+- Fix posts creation
+- Fix some typespecs
+- Remove Koena Connect button
+- Update dependencies
+
+## 2.1.0-beta.3 - 2022-04-09
+
+Changes since beta.2:
+
+- Add Fedora and Alpine builds
+
+## 2.1.0-beta.2 - 2022-04-08
+
+Changes since beta.1 :
+
+- Build release packages for several distributions (Debian Bullseye, Debian Buster, Ubuntu Focal, Ubuntu Bionic) because of libc version changes
+
+## 2.1.0-beta.1 - 2022-04-07
+
+### Added
+
+- Added an event category field. Administrators can extend the pre-configured list of categories through configuration.
+- Added possibility for administrators to have analytics (Matomo, Plausible supported) and error handling (Sentry supported) on front-end.
+- Redesigned federation admin section with dedicated instance pages
+- Allow to filter moderation reports by domain
+- Added a button to go to past events of a group if it has no upcoming events
+
+### Changed
+
+- Changed mailer library from Bamboo to Swoosh, should fix emails being considered spam. **Some configuration changes are required, see below.**
+- Expose some fields to ActivityStreams event representation: `isOnline`, `remainingAttendeeCapacity` and `participantCount`
+- Expose a new field to ActivityStreams group representation: `memberCount`
+- Improve group creation errors feedback
+- Only display locality in event card
+- Stale groups are now excluded from group search
+- Event default visibility is now set according to group privacy setting
+
+### Fixed
+
+- Fixed actor refreshment being impossible
+- Fixed ical export for undefined datetimes
+- Fixed parsing links with hashtag characters
+- Fixed fetching link details from Twitter
+- Fixed Thunderbird accessing ICS feed endpoint with special `Accept` HTTP header
+- Make sure every ICS/Feed caches are emptied when modifying entities
+- Fixed time issues with DST changes
+- Fixed group preview card not truncating description
+- Fixed redirection after login
+- Fixed user admin section showing button to confirm user when the user is already confirmed
+- Fixed creating event from group view not always setting the group as organizer
+- Fixed invalid addresses blocking event metadata preview rendering
+- Fixed group deletion with comments that caused foreign key issues
+- Fixed incoming Accept activities from participations we don't already have
+- Fixed resources that didn't have metadata size limits
+- Properly fallback to UTC when sending notifications and the user doesn't have a timezone setting set
+
+### Translations
+
+- Arabic
+- Basque
+- Belarusian
+- Bengali
+- Catalan
+- Chinese (Traditional)
+- Croatian
+- Czech
+- Danish
+- Dutch
+- Esperanto
+- Finnish
+- French
+- Gaelic
+- Galician
+- German
+- Hebrew
+- Hungarian
+- Indonesian
+- Italian
+- Japanese
+- Kabyle
+- Kannada
+- Norwegian Nynorsk
+- Occitan
+- Persian
+- Polish
+- Portuguese
+- Portuguese (Brazil)
+- Russian
+- Slovenian
+- Spanish
+- Swedish
+- Welsh
+
+## 2.0.2 - 2021-12-22
+
+### Changed
+
+- Improved handling of media file deletion
+- Releases and Docker image are now using Elixir 1.13
+
+### Fixed
+
+- Fixed position of tentative tag on event cards
+- Fixed text overflow when a link is too long in event mobile view
+- Fixed filtering user own memberships and group members in event organizer & contacts picker
+- Fixed first day of week not depending on locale in the datetime picker
+- Fixed the admin page when a group/profile/user was not found
+- Fixed group members pagination on admin group profile view
+- Fixed admin edition of the instance's language
+
+### Translations
+
+- Croatian
+- Czech
+- Esperanto
+- German
+- Hebrew
+- Occitan
+- Persian
+- Russian
+- Spanish
+
+## 2.0.1 - 2021-11-26
+
+### Changed
+
+- Remove litepub context
+
+### Fixed
+
+- Make sure my group upcoming events are ordered by their start date
+- Fix event participants pagination
+- Always focus the search field after results have been fetched
+- Don't sign fetches to instance actor when refreshing their keys
+- Fix reject of already following instances
+- Added missing timezone data to the Docker image
+- Replace @tiptap/starter-kit with indidual extensions, removing unneeded extensions that caused issues on old Firefox versions
+- Better handling of Friendica Update activities without actor information
+- Always show pending/cancelled status on event cards
+- Fixed nightly docker build
+- Refresh loggeduser information before the final step of onboarding, avoiding loop when finishing onboarding
+- Handle tz_world data being absent
+
+### Translations
+
+- Croatian (New !)
+- Czech
+- Gaelic
+- Hungarian
+- Indonesian
+- Welsh (New !)
+
+## 2.0.0 - 2021-11-23
+
+Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
+
+### Added
+
+- Added possibility to follow groups and be notified from new upcoming events
+- Export list of participants to CSV, `PDF` and `ODS`
+- Allow to set timezone for an event. The timezone is automatically defined from the address if one is defined. If the event timezone is different than the user's current one, a toggle is shown to switch between the two.
+- Added initial support for Right To Left languages (such as arabic) and [BiDi](https://en.wikipedia.org/wiki/Bidirectional_text)
+- Group followers and members get an notification email by default when a group publishes a new event (subject to activity notification settings)
+- Group admins can now approve or deny new memberships
+- Build releases in `arm` and `arm64` format in addition to `amd64`
+- Build Docker images in `arm` and `arm64` format in addition to `amd64`
+- Added possibility to indicate the event is fully online
+- Added possibility to search only for online events
+- Added possibility to search only in past events
+- Detect event, comments and posts languages automatically. Allows setting language
+- Allow to change an user's password through the users.modify mix task
+- Add instance setting so that only the admin can create groups
+- Add instance setting so that only groups can create events
+- Added JSON-LD metadata about the event in emails
+- Added a quick link to email notification settings at the bottom of emails
+- Allow to access Mobilizon with a specific language directly by using `https://instance.tld/lang` where `lang` is a language supported by Mobilizon
+- Added organizer actor name (profile or group) in the icalendar export
+- Add initial support for federation with Gancio
+
+### Changed
+
+- Multiple UI improvements, including post, event and participation cards, discussions and emails. The « My Events » page was also redesigned to allow showing events from your groups.
+- Various accessibility improvements
+- Event update notification is send to participants ~30 minutes after the event update, so that successive edits are throttled.
+- Event, post and comments titles and content now have expose their detected language in HTML, for improved screen reader experience
+- Delete current actor ID as well from local storage when unlogging
+- Show a default text for instance contact in default terms text when no instance contact is set
+- Only show locatecontrol button in leaflet map when we can do geolocation
+- Disable push column in notification settings when push is not available
+- Show actual language instead of language code in Users admin view
+- Empty old & new passwords fields when successful password change
+- Don't link to the group page from admin when actor is suspended
+- Warn participants when the event organizer is suspended (and therefore the event cancelled)
+- Improve metadata on public page
+- Make sure some event action pages (participate remotely or without an account) don't get indexed by search engines
+- Only send `Tombstone` element in `Delete` activities, not the whole previous deleted element.
+- Make sure `Delete` activity are send correctly to everyone
+- Only add address and tags to event icalendar export if they exist
+- `master` branch has been renamed to `main`
+- Mention following groups on the registration page
+- Add missing group name to activity notifications
+- Warn while registering and logging when the email contains uppercase characters
+- Improve json-ld metadata on event live streams
+- Add "eventAttendanceMode" to JSON-ld schema.org event representation
+- Improve sending pending participation notifications
+- Add "formerType" and "delete" attributes on Tombstones ActivityPub objects representation
+- Improve MyEvents page description text
+
+### Removed
+
+- Support for Elixir < 1.12 and OTP < 22
+
+### Fixed
+
+- Fix tags autocomplete
+- Fix config onboarding after LDAP initial connexion
+- Fix events pagination on tags page
+- Fixed deduplicated files from orphan media being deleted as well
+- Fix deleting own account
+- Fix search returning user profiles instead of only groups
+- Fix federating geo coordinates
+- Fix an issue with group activity items when moving resources
+- Fix an issue with Identity Picker
+- Fix an issue with TagInput
+- Fix an issue when leaving a group
+- Fix admin settings edition
+- Fix an issue when showing public page of suspended group
+- Removed non existing page (`/about/mobilizon`) from sitemap
+- Fix action logs containing group suspension events
+- Fixed group physical address not exposed to ActivityPub
+- Release front-end files are no longer in duplicate
+- Only show datetime timezone toggle on event if the timezone offset is different from our own
+- Fix error when determining audience for Discussion when deleting a comment
+- Fix a couple of accessibility issues
+- Limit to acceptable tags when pasting raw HTML into comment fields on front-end
+- Fixed group map display
+- Fixed updating group physical address
+- Allow group members to access group drafts
+- Improve group refreshment workflow
+- Fixed date signature generation for federation
+- Fixed an issue when duplicating a group event from another profile
+- Fixed event metadata not saved on eventcreation
+- Use a different pagination parameter for searched events and featured events on search page
+- Fixed creating group activities when creating events with some fields
+- Move release package at correct path for CI upload
+- Fixed event contacts that were not exposed and fetched over federation
+- Don't sign fetch when fetching actor for a given signature
+- Some various HTTP signatures issues
+- Fixed actor AP representation of avatar
+- Handle errors when fetching actor pictures
+- Fixed sending group events to followers on Mastodon
+- Fixed actors avatars and banners being deleted if the same file was also an orphan media
+- Fix spacing in organizer picker
+- Increase number of close events and follow group events
+- Fix accessing user profile in admin section
+- Set initial values for some EventMetadata elements, fixing submitting them right away with no value
+- Avoid giving an error page if the apollo futureParticipations query is undefined
+- Fixed path to exports in production
+- Fixed padding below truncated title of event cards
+- Fixed exports that weren't enabled in Docker
+- Fixed error page when event end date is null
+- Fixed event language not being allowed to be null
+
+### Security
+
+- Fixed private messages sent as event replies from Mastodon that were shown publically as public comments. They are now discarded.
+
+### Translations
+
+- Czech
+- Gaelic
+- German
+- Hungarian
+- Indonesian
+- Norwegian Nynorsk
+- Occitan
+- Persian
+- Portuguese (Brazil)
+- Russian
+- Slovenian
+- Spanish
+
+## 2.0.0-rc.3 - 2021-11-22
+
+This lists changes since 2.0.0-rc.3. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
+
+### Fixed
+
+- Fixed path to exports in production
+- Fixed padding below truncated title of event cards
+- Fixed exports that weren't enabled in Docker
+- Fixed error page when event end date is null
+
+## 2.0.0-rc.2 - 2021-11-22
+
+This lists changes since 2.0.0-rc.1. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
+
+### Changed
+
+- Improve MyEvents page description text
+
+### Fixed
+
+- Fix spacing in organizer picker
+- Increase number of close events and follow group events
+- Fix accessing user profile in admin section
+- Set initial values for some EventMetadata elements, fixing submitting them right away with no value
+- Avoid giving an error page if the apollo futureParticipations query is undefined
+
+### Translations
+
+- German
+- Hungarian
+
+## 2.0.0-rc.1 - 2021-11-20
+
+This lists changes since 2.0.0-beta.2. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
+
+### Changed
+
+- Mention following groups on the registration page
+- Add missing group name to activity notifications
+- Warn while registering and logging when the email contains uppercase characters
+- Improve json-ld metadata on event live streams
+- Add "eventAttendanceMode" to JSON-ld schema.org event representation
+- Improve sending pending participation notifications
+- Add "formerType" and "delete" attributes on Tombstones ActivityPub objects representation
+
+### Fixed
+
+- Fixed creating group activities when creating events with some fields
+- Move release package at correct path for CI upload
+- Fixed event contacts that were not exposed and fetched over federation
+- Don't sign fetch when fetching actor for a given signature
+- Some various HTTP signatures issues
+- Fixed actor AP representation of avatar
+- Handle errors when fetching actor pictures
+- Fixed sending group events to followers on Mastodon
+- Fixed actors avatars and banners being deleted if the same file was also an orphan media
+
+### Translations
+
+- Gaelic
+- Spanish
+
+## 2.0.0-beta.2 - 2021-11-15
+
+This lists changes since 2.0.0-beta.1. Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
+
+### Added
+
+- Group followers and members get an notification email by default when a group publishes a new event (subject to activity notification settings)
+- Group admins can now approve or deny new memberships
+- Added organizer actor name (profile or group) in the icalendar export
+- Add initial support for federation with Gancio
+
+### Changed
+
+- Event update notification is send to participants ~30 minutes after the event update, so that successive edits are throttled.
+- Event, post and comments titles and content now have expose their detected language in HTML, for improved screen reader experience
+
+### Fixed
+
+- Release front-end files are no longer in duplicate
+- Only show datetime timezone toggle on event if the timezone offset is different from our own
+- Fix error when determining audience for Discussion when deleting a comment
+- Fix a couple of accessibility issues
+- Limit to acceptable tags when pasting raw HTML into comment fields on front-end
+- Fixed group map display
+- Fixed updating group physical address
+- Allow group members to access group drafts
+- Improve group refreshment workflow
+- Fixed date signature generation for federation
+- Fixed an issue when duplicating a group event from another profile
+- Fixed event metadata not saved on eventcreation
+- Use a different pagination parameter for searched events and featured events on search page
+
+### Translations
+
+- Gaelic
+- Spanish
+
+## 2.0.0-beta.1 - 2021-11-09
+
+Please read the [UPGRADE.md](https://framagit.org/framasoft/mobilizon/-/blob/main/UPGRADE.md#upgrading-from-13-to-20) file as well.
+
+### Added
+
+- Added possibility to follow groups and be notified from new upcoming events
+- Export list of participants to CSV, `PDF` and `ODS`
+- Allow to set timezone for an event. The timezone is automatically defined from the address if one is defined. If the event timezone is different than the user's current one, a toggle is shown to switch between the two.
+- Added initial support for Right To Left languages (such as arabic) and [BiDi](https://en.wikipedia.org/wiki/Bidirectional_text)
+- Build releases in `arm` and `arm64` format in addition to `amd64`
+- Build Docker images in `arm` and `arm64` format in addition to `amd64`
+- Added possibility to indicate the event is fully online
+- Added possibility to search only for online events
+- Added possibility to search only in past events
+- Detect event, comments and posts languages automatically. Allows setting language
+- Allow to change an user's password through the users.modify mix task
+- Add instance setting so that only the admin can create groups
+- Add instance setting so that only groups can create events
+- Added JSON-LD metadata about the event in emails
+- Added a quick link to email notification settings at the bottom of emails
+- Allow to access Mobilizon with a specific language directly by using `https://instance.tld/lang` where `lang` is a language supported by Mobilizon
+
+### Changed
+
+- Multiple UI improvements, including post, event and participation cards, discussions and emails. The « My Events » page was also redesigned to allow showing events from your groups.
+- Various accessibility improvements
+- Delete current actor ID as well from local storage when unlogging
+- Show a default text for instance contact in default terms text when no instance contact is set
+- Only show locatecontrol button in leaflet map when we can do geolocation
+- Disable push column in notification settings when push is not available
+- Show actual language instead of language code in Users admin view
+- Empty old & new passwords fields when successful password change
+- Don't link to the group page from admin when actor is suspended
+- Warn participants when the event organizer is suspended (and therefore the event cancelled)
+- Improve metadata on public page
+- Make sure some event action pages (participate remotely or without an account) don't get indexed by search engines
+- Only send `Tombstone` element in `Delete` activities, not the whole previous deleted element.
+- Make sure `Delete` activity are send correctly to everyone
+- Only add address and tags to event icalendar export if they exist
+- `master` branch has been renamed to `main`
+
+### Removed
+
+- Support for Elixir < 1.12 and OTP < 22
+
+### Fixed
+
+- Fix tags autocomplete
+- Fix config onboarding after LDAP initial connexion
+- Fix events pagination on tags page
+- Fixed deduplicated files from orphan media being deleted as well
+- Fix deleting own account
+- Fix search returning user profiles instead of only groups
+- Fix federating geo coordinates
+- Fix an issue with group activity items when moving resources
+- Fix an issue with Identity Picker
+- Fix an issue with TagInput
+- Fix an issue when leaving a group
+- Fix admin settings edition
+- Fix an issue when showing public page of suspended group
+- Removed non existing page (`/about/mobilizon`) from sitemap
+- Fix action logs containing group suspension events
+- Fixed group physical address not exposed to ActivityPub
+
+### Security
+
+- Fixed private messages sent as event replies from Mastodon that were shown publically as public comments. They are now discarded.
+
+### Translations
+
+- Czech
+- Gaelic
+- German
+- Indonesian
+- Norwegian Nynorsk
+- Occitan
+- Persian
+- Portuguese (Brazil)
+- Russian
+- Slovenian
+- Spanish
+
 ## 1.3.2 - 2021-08-23
 
 ### Fixed
@@ -57,7 +734,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed links contained in event & post description that didn't open in new tabs
-- Add back missing RSS/ical links on public group pages 
+- Add back missing RSS/ical links on public group pages
 - Fixed links to Framacolibri forum
 - Fixed drafts and restricted visibility events & posts listed on group page
 - Fixed notification page on Safari
@@ -79,7 +756,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed token refreshment issues
 - Fixed search from 404 page
 
-
 ### Translations
 
 - Catalan
@@ -105,9 +781,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed group discussions with deleted comments
 
 ## 1.2.2 - 2021-07-01
+
 ### Changed
 
-- Improved UI for participations when message is too long 
+- Improved UI for participations when message is too long
 
 ### Fixed
 
@@ -115,7 +792,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed crash when trying to notify activities not from groups
 - Fixed imagemagick missing from Dockerfile
 - Fixed push notifications for group, members & post activities
-- Fixed ellipsis in DiscussionListView 
+- Fixed ellipsis in DiscussionListView
 - Fixed submission button for posts not visible on mobile
 - Fixed remote profile suspension
 
@@ -131,6 +808,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed compatibility check in Notification section for service workers
 
 ## 1.2.0 - 2021-06-29
+
 ### Added
 
 - **Notifications for various group and event activity, both by email and browser push notifications. Daily and weekly digests are also available.**
@@ -145,7 +823,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Various improvements to mobile views**
 - Make JWT access tokens short-lived
 - Disabled Cldr warning that the `Cldr.Plug.AcceptLanguage` plug didn't many any known locale
-- Replaced GraphiQL web interface with graphql-playground 
+- Replaced GraphiQL web interface with graphql-playground
 
 ### Removed
 
@@ -305,7 +983,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Added an unique index on the addresses url
-- Added org.opencontainers.image.source annotation to the Docker image 
+- Added org.opencontainers.image.source annotation to the Docker image
 - Improved the moderation action logs interface
 
 ### Fixes
@@ -426,7 +1104,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed getting metadata from tweets when creating a resource
 - Fixed bad handling of duplicate usernames
 - Fixed handling of bad URIs to proxify
-- Fixed creating discussion with title containing only spaces 
+- Fixed creating discussion with title containing only spaces
 - Fixed registering new user account with same email as unconfirmed
 - Fixed handling changing default actor unlogged
 - Fixed handling getting organized events from an actor when not authorized
@@ -498,6 +1176,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Hungarian
 - Russian
 - Spanish
+
 ## 1.1.0-rc.1 - 2021-03-29
 
 ### Added
@@ -523,7 +1202,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed getting metadata from tweets when creating a resource
 - Fixed bad handling of duplicate usernames
 - Fixed handling of bad URIs to proxify
-- Fixed creating discussion with title containing only spaces 
+- Fixed creating discussion with title containing only spaces
 - Fixed registering new user account with same email as unconfirmed
 - Fixed handling changing default actor unlogged
 - Fixed handling getting organized events from an actor when not authorized
@@ -545,11 +1224,13 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 ## 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 - 2021-03-17
 
 ### Fixed
+
 - Fixed a typo in range/radius preventing close events from showing up
 
 ## 1.1.0-beta.4 - 2021-03-17
@@ -563,15 +1244,18 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 ## 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 - 2021-03-16
 
 ### Fixed
+
 - Fixed geospatial configuration only being evaluated at compile-time, not at runtime
 
 ### Translations
+
 - Slovenian
 
 ## 1.1.0-beta.1 - 2021-03-10
@@ -713,23 +1397,23 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 
 ### Special operations
 
-* **Reattach media files to their entity.**
+- **Reattach media files to their entity.**
   When media files were uploaded and added in events and posts bodies, they were only attached to the profile that uploaded them, not to the event or post. This task attaches them back to their entity so that the command to clean orphan media files doesn't remove them.
 
-  * Source install
+  - Source install
     `MIX_ENV=prod mix mobilizon.maintenance.fix_unattached_media_in_body`
-  * Docker
+  - Docker
     `docker-compose exec mobilizon mobilizon_ctl maintenance.fix_unattached_media_in_body`
 
-* **Refresh remote profiles to save avatars locally**
+- **Refresh remote profiles to save avatars locally**
   Profile avatars and banners were previously only proxified and cached. Now we save them locally. Refreshing all remote actors will save profile media locally instead.
 
-  * Source install
+  - Source install
     `MIX_ENV=prod mix mobilizon.actors.refresh --all`
-  * Docker
+  - Docker
     `docker-compose exec mobilizon mobilizon_ctl actors.refresh --all`
 
-* **imagemagick and webp are now a required dependency** to build Mobilizon.
+- **imagemagick and webp are now a required dependency** to build Mobilizon.
   Optimized versions of Mobilizon's pictures are now produced during front-end build.
   See [the documentation](https://docs.joinmobilizon.org/administration/dependencies/#misc) to make sure these dependencies are installed.
 
@@ -772,7 +1456,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 - Fixed error message not showing up when you are already an anonymous participant for an event
 - Fixed error message not showing up when you pick an username already in user for a new profile or a group
 - Fixed translations not fallbacking properly to english when not found
-- 
+-
 
 ### Security
 
@@ -781,6 +1465,7 @@ This version introduces a new way to install and host Mobilizon : Elixir releas
 ### Translations
 
 Updated translations:
+
 - Catalan
 - Dutch
 - English
@@ -953,20 +1638,21 @@ Updated translations:
 
 ### Special operations
 
-* We added `application/ld+json` as acceptable MIME type for ActivityPub requests, so you'll need to recompile the `mime` library we use before recompiling Mobilizon:
-    ```
-    MIX_ENV=prod mix deps.clean mime --build
-    ```
+- We added `application/ld+json` as acceptable MIME type for ActivityPub requests, so you'll need to recompile the `mime` library we use before recompiling Mobilizon:
 
-* The [nginx configuration](https://framagit.org/framasoft/mobilizon/-/blob/master/support/nginx/mobilizon.conf) has been changed with improvements and support for custom error pages.
+  ```
+  MIX_ENV=prod mix deps.clean mime --build
+  ```
 
-* The cmake dependency has been added (see [our documentation](https://docs.joinmobilizon.org/administration/dependencies/#basic-tools))
+- The [nginx configuration](https://framagit.org/framasoft/mobilizon/-/blob/main/support/nginx/mobilizon.conf) has been changed with improvements and support for custom error pages.
+
+- The cmake dependency has been added (see [our documentation](https://docs.joinmobilizon.org/administration/dependencies/#basic-tools))
 
 ### Added
 
 - Possibility to login using LDAP
 - Possibility to login using OAuth providers
-- Enabled group features in production mode 
+- Enabled group features in production mode
   - including posts (that can be public, unlisted, or restricted to your group members)
   - resources (collections of links, with folders, accessible to your group members)
   - discussions (group private and organized chats)
@@ -990,20 +1676,22 @@ Updated translations:
 ### Security
 
 - Fix group settings being accessible and editable by non-group-admins (thx @pigpig for reporting this responsibly)
-- Fix events being editable by profiles without permissions (thx @pigpig for reporting this responsibly) 
+- Fix events being editable by profiles without permissions (thx @pigpig for reporting this responsibly)
 
 ## [1.0.0-beta.3] - 2020-06-24
 
 ### Special operations
+
 Config has moved from `.env` files to a more traditional way to handle things in the Elixir world, with `.exs` files.
 
 To migrate existing configuration, you can simply run `mix mobilizon.instance gen` and fill in the adequate values previously in `.env` files (you don't need to perform the operations to create the database).
 
-A minimal file template [is available](https://framagit.org/framasoft/mobilizon/blob/master/priv/templates/config.template.eex) to check for missing configuration.
+A minimal file template [is available](https://framagit.org/framasoft/mobilizon/blob/main/priv/templates/config.template.eex) to check for missing configuration.
 
-Also make sure to remove the `EnvironmentFile=` line from the systemd service and set `Environment=MIX_ENV=prod` instead. See [the updated file](https://framagit.org/framasoft/mobilizon/blob/master/support/systemd/mobilizon.service).
+Also make sure to remove the `EnvironmentFile=` line from the systemd service and set `Environment=MIX_ENV=prod` instead. See [the updated file](https://framagit.org/framasoft/mobilizon/blob/main/support/systemd/mobilizon.service).
 
 ### Added
+
 - Possibility to participate to an event without an account (confirmation through email required)
 - Possibility to participate to a remote event (being redirected by providing federated identity)
 - Possibility to add a note as a participant when event participation is manually validated (required when participating without an account)
@@ -1020,6 +1708,7 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
 - Allow user to change language
 
 ### Changed
+
 - Configuration handling (see above)
 - Improved a bit color theme
 - Signature validation also now checks if `Date` header has acceptable values
@@ -1030,6 +1719,7 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
 - Improved public event page
 
 ### Fixed
+
 - Fixed URL search
 - Fixed content accessed through URL search being public
 - Fix event links in some emails
@@ -1037,17 +1727,21 @@ Also make sure to remove the `EnvironmentFile=` line from the systemd service an
 ## [1.0.0-beta.2] - 2019-12-18
 
 ### Special operations
+
 These two operations couldn't be handled during migrations.
 They are optional, but you won't be able to search or get participant stats on existing events if they are not executed.
 These commands will be removed in Mobilizon 1.0.0-beta.3.
 
 In order to populate search index for existing events, you need to run the following command (with prod environment):
-* `mix mobilizon.setup_search`
+
+- `mix mobilizon.setup_search`
 
 In order to move participant stats to the event table for existing events, you need to run the following command (with prod environment):
-* `mix mobilizon.move_participant_stats`
+
+- `mix mobilizon.move_participant_stats`
 
 ### Added
+
 - Federation is active
 - Added an interface for admins to view and manage instance followers and followings
 - Ability to comment below events
@@ -1072,6 +1766,7 @@ In order to move participant stats to the event table for existing events, you n
 - Upgraded frontend and backend dependencies
 
 ### Changed
+
 - Move participant stats to event table **(read special instructions above)**
 - Limit length (20 characters) and number (10) of tags allowed
 - Added some backend changes and validation for field length
@@ -1085,6 +1780,7 @@ In order to move participant stats to the event table for existing events, you n
 - Also consider the PeerTube `CommentsEnabled` property to know if you can reply to an event
 
 ### Fixed
+
 - Fix event URL validation and check if hostname is correct before showing it
 - Fix participations stats on the MyEvents page
 - Fix event description lists margin
@@ -1114,8 +1810,11 @@ In order to move participant stats to the event table for existing events, you n
 - Fixed event HTML representation when `GET` request has no `Accept` header
 
 ### Security
+
 - Sanitize event title to avoid XSS
 
 ## [1.0.0-beta.1] - 2019-10-15
+
 ### Added
+
 - Initial release

Makefile

@@ -21,7 +21,21 @@ test: stop
 	@bash docker/message.sh "Running tests"
 	docker-compose -f docker-compose.yml -f docker-compose.test.yml run api mix test $(only)
 	@bash docker/message.sh "Done running tests"
-format: 
+format:
 	docker-compose run --rm api bash -c "mix format && mix credo --strict"
 	@bash docker/message.sh "Code is now ready to commit :)"
+
+dev: dev-setup dev-start
+dev-start: dev-stop
+	@bash docker/message.sh "Start development server"
+	docker-compose -f ./docker-compose.dev.yml up -d api
+	docker-compose -f ./docker-compose.dev.yml exec api bash -c 'yarn --cwd "js"; yarn --cwd "js" serve'
+dev-setup: dev-stop
+	@bash docker/message.sh "Setup dependencies"
+	docker-compose -f ./docker-compose.dev.yml run --rm api bash -c 'mix deps.get; mix ecto.create; mix ecto.migrate'
+dev-stop:
+	@bash docker/message.sh "Stopping Mobilizon"
+	docker-compose -f ./docker-compose.dev.yml down
+	@bash docker/message.sh "Mobilizon is stopped"
+
 target: init

UPGRADE.md

@@ -1,37 +1,182 @@
+# Upgrading from 2.0 to 2.1
+
+## Mailer library change
+
+### Docker
+
+The change is already applied. You may remove the `MOBILIZON_SMTP_HOSTNAME` environment key which is not used anymore.
+
+### Release and source mode
+
+In your configuration file under `config :mobilizon, Mobilizon.Web.Email.Mailer`,
+
+- Change `Bamboo.SMTPAdapter` to `Swoosh.Adapters.SMTP`,
+- rename the `server` key to `relay`
+- remove the `hostname` key,
+- the default value of the username and password fields is an empty string and no longer `nil`.
+
+```diff
+ config :mobilizon, Mobilizon.Web.Email.Mailer,
+-   adapter: Bamboo.SMTPAdapter,
++   adapter: Swoosh.Adapters.SMTP,
+-   server: "localhost",
++   relay: "localhost",
+-   hostname: "localhost",
+   # usually 25, 465 or 587
+   port: 25,
+-   username: nil,
++   username: "",
+-   password: nil,
++   password: "",
+   # can be `:always` or `:never`
+   tls: :if_available,
+   allowed_tls_versions: [:tlsv1, :"tlsv1.1", :"tlsv1.2"],
+   retries: 1,
+   # can be `true`
+   no_mx_lookups: false,
+   # can be `:always`. If your smtp relay requires authentication set it to `:always`.
+   auth: :if_available
+```
+
+# Upgrading from 1.3 to 2.0
+
+Requirements dependencies depend on the way Mobilizon is installed.
+
+## New Elixir version requirement
+
+### Docker and Release install
+
+You are already using latest Elixir version in the release tarball and Docker images.
+
+### Source install
+
+**Elixir 1.12 and Erlang OTP 22 are now required**. If your distribution or the repositories from Erlang Solutions don't provide these versions, you need to uninstall the current versions and install [Elixir](https://github.com/asdf-vm/asdf-elixir) through the [ASDF tool](https://asdf-vm.com/).
+
+## Geographic timezone data
+
+Mobilizon 2.0 uses data based on [timezone-boundary-builder](https://github.com/evansiroky/timezone-boundary-builder) (which is based itself on OpenStreetMap data) to determine the timezone of an event automatically, based on it's geocoordinates. However, this needs ~700Mio of disk, so we don't redistribute data directly, depending on the case. It's possible to skip this part, but users will need to manually pick the timezone for every event they created when it has a different timezone from their own.
+
+### Docker install
+
+The geographic timezone data is already bundled into the image, you have nothing to do.
+
+### Release install
+
+In order to keep the release tarballs light, the geographic timezone data is not bundled directly. You need to download the data :
+
+- either raw from Github, but **requires an extra ~1Gio of memory** to process the data
+
+  ```sh
+  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
+  sudo -u mobilizon ./bin/mobilizon_ctl tz_world.update
+  ```
+
+- either already processed from our own distribution server
+
+  ```sh
+  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
+  sudo -u mobilizon curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
+  ```
+
+In both cases, ~700Mio of disk will be used. You may use the following configuration to specify where the data is expected if you decide to change it from the default location (`/var/lib/mobilizon/timezones`) :
+
+```elixir
+config :tz_world, data_dir: "/some/place"
+```
+
+### Source install
+
+You need to download the data :
+
+- either raw from Github, but **requires an extra ~1Gio of memory** to process the data
+
+  ```sh
+  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
+  sudo -u mobilizon mix mobilizon.tz_world.update
+  ```
+
+- either already processed from our own distribution server
+
+  ```sh
+  sudo -u mobilizon mkdir /var/lib/mobilizon/timezones
+  sudo -u mobilizon curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
+  ```
+
+In both cases, ~700Mio of disk will be used. You may use the following configuration to specify where the data is expected:
+
+```elixir
+config :tz_world, data_dir: "/some/place"
+```
+
+## Exports folder
+
+Create the folder for default CSV export:
+
+```sh
+sudo -u mobilizon mkdir -p /var/lib/mobilizon/uploads/exports/csv
+```
+
+This path can be configured, see [the dedicated docs page about this](https://docs.joinmobilizon.org/administration/configure/exports/).
+Files in this folder are temporary and are cleaned once an hour.
+
+## New optional dependencies
+
+These are optional, installing them will allow Mobilizon to export to PDF and ODS as well. Mobilizon 2.0 allows to export the participant list, but more is planned.
+
+### Docker
+
+Everything is included in our Docker image.
+
+### Release and source install
+
+New optional Python dependencies:
+
+- `Python` >= 3.6
+- `weasyprint` for PDF export (with [a few extra dependencies](https://doc.courtbouillon.org/weasyprint/stable/first_steps.html))
+- `pyexcel-ods3` for ODS export (no extra dependencies)
+
+Both can be installed through pip. You need to enable and configure exports for PDF and ODS in the configuration afterwards. Read [the dedicated docs page about this](https://docs.joinmobilizon.org/administration/configure/exports/).
+
 # Upgrading from 1.0 to 1.1
 
 The 1.1 version of Mobilizon brings Elixir releases support. An Elixir release is a self-contained directory that contains all of Mobilizon's code (front-end and backend), it's dependencies, as well as the Erlang Virtual Machine and runtime (only the parts you need). As long as the release has been assembled on the same OS and architecture, it can be deploy and run straight away. [Read more about releases](https://elixir-lang.org/getting-started/mix-otp/config-and-releases.html#releases).
 
 ## Comparison
+
 Migrating to releases means:
-* You only get a precompiled binary, so you avoid compilation times when updating
-* No need to have Elixir/NodeJS installed on the system
-* Code/data/config location is more common (/opt, /var/lib, /etc)
-* More efficient, as only what you need from the Elixir/Erlang standard libraries is included and all of the code is directly preloaded
-* You can't hardcode modifications in Mobilizon's code
+
+- You only get a precompiled binary, so you avoid compilation times when updating
+- No need to have Elixir/NodeJS installed on the system
+- Code/data/config location is more common (/opt, /var/lib, /etc)
+- More efficient, as only what you need from the Elixir/Erlang standard libraries is included and all of the code is directly preloaded
+- You can't hardcode modifications in Mobilizon's code
 
 Staying on source releases means:
-* You need to recompile everything with each update
-* Compiling frontend and backend has higher system requirements than just running Mobilizon
-* You can change things in Mobilizon's code and recompile right away to test changes
+
+- You need to recompile everything with each update
+- Compiling frontend and backend has higher system requirements than just running Mobilizon
+- You can change things in Mobilizon's code and recompile right away to test changes
 
 ## Releases
+
 If you want to migrate to releases, [we provide a full guide](https://docs.joinmobilizon.org/administration/upgrading/source_to_release/). You may do this at any time.
 
 ## Source install
+
 To stay on a source release, you just need to check the following things:
-* Rename your configuration file `config/prod.secret.exs` to `config/runtime.exs`.
-* If your config file includes `server: true` under `Mobilizon.Web.Endpoint`, remove it.
-    ```diff
-    config :mobilizon, Mobilizon.Web.Endpoint,
-    - server: true,
-    ```
-* The uploads default directory is now `/var/lib/mobilizon/uploads`. To keep it in the previous `uploads/` directory, just add the following line to `config/runtime.exs`:
+
+- Rename your configuration file `config/prod.secret.exs` to `config/runtime.exs`.
+- If your config file includes `server: true` under `Mobilizon.Web.Endpoint`, remove it.
+  ```diff
+  config :mobilizon, Mobilizon.Web.Endpoint,
+  - server: true,
+  ```
+- The uploads default directory is now `/var/lib/mobilizon/uploads`. To keep it in the previous `uploads/` directory, just add the following line to `config/runtime.exs`:
   ```elixir
   config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "uploads"
   ```
   Or you may use any other directory where the `mobilizon` user has write permissions.
-* The GeoIP database default directory is now `/var/lib/mobilizon/geo/GeoLite2-City.mmdb`. To keep it in the previous `priv/data/GeoLite2-City.mmdb` directory, just add the following line to `config/runtime.exs`:
+- The GeoIP database default directory is now `/var/lib/mobilizon/geo/GeoLite2-City.mmdb`. To keep it in the previous `priv/data/GeoLite2-City.mmdb` directory, just add the following line to `config/runtime.exs`:
   ```elixir
   config :geolix, databases: [
     %{
@@ -41,4 +186,4 @@ To stay on a source release, you just need to check the following things:
     }
   ]
   ```
-  Or you may use any other directory where the `mobilizon` user has read permissions.
+  Or you may use any other directory where the `mobilizon` user has read permissions.

config/config.exs

@@ -88,6 +88,10 @@ config :mobilizon, Mobilizon.Web.Upload,
 
 config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "/var/lib/mobilizon/uploads"
 
+config :tz_world, data_dir: "/var/lib/mobilizon/timezones"
+
+config :mobilizon, Timex.Gettext, default_locale: "en"
+
 config :mobilizon, :media_proxy,
   enabled: true,
   proxy_opts: [
@@ -102,13 +106,16 @@ config :mobilizon, :media_proxy,
   ]
 
 config :mobilizon, Mobilizon.Web.Email.Mailer,
-  adapter: Bamboo.SMTPAdapter,
-  server: "localhost",
-  hostname: "localhost",
+  adapter: Swoosh.Adapters.SMTP,
+  relay: "localhost",
   # usually 25, 465 or 587
   port: 25,
-  username: nil,
-  password: nil,
+  username: "",
+  password: "",
+  # can be `:always` or `:never`
+  auth: :if_available,
+  # can be `true`
+  ssl: false,
   # can be `:always` or `:never`
   tls: :if_available,
   allowed_tls_versions: [:tlsv1, :"tlsv1.1", :"tlsv1.2"],
@@ -181,7 +188,13 @@ config :phoenix, :filter_parameters, ["password", "token"]
 config :absinthe, schema: Mobilizon.GraphQL.Schema
 config :absinthe, Absinthe.Logger, filter_variables: ["token", "password", "secret"]
 
-config :mobilizon, Mobilizon.Web.Gettext, one_module_per_locale: true
+config :codepagex, :encodings, [
+  :ascii,
+  ~r[iso8859]i,
+  :"VENDORS/MICSFT/WINDOWS/CP1252"
+]
+
+config :mobilizon, Mobilizon.Web.Gettext, split_module_by: [:locale, :domain]
 
 config :ex_cldr,
   default_locale: "en",
@@ -194,14 +207,16 @@ config :mobilizon, :cldr,
   locales: [
     "fr",
     "en",
-    "ru"
+    "ru",
+    "ar"
   ]
 
 config :mobilizon, :activitypub,
   # One day
   actor_stale_period: 3_600 * 48,
   actor_key_rotation_delay: 3_600 * 48,
-  sign_object_fetches: true
+  sign_object_fetches: true,
+  stale_actor_search_exclusion_after: 3_600 * 24 * 7
 
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Nominatim
 
@@ -285,6 +300,7 @@ config :mobilizon, Oban,
      crontab: [
        {"@hourly", Mobilizon.Service.Workers.BuildSiteMap, queue: :background},
        {"17 4 * * *", Mobilizon.Service.Workers.RefreshGroups, queue: :background},
+       {"36 * * * *", Mobilizon.Service.Workers.RefreshInstances, queue: :background},
        {"@hourly", Mobilizon.Service.Workers.CleanOrphanMediaWorker, queue: :background},
        {"@hourly", Mobilizon.Service.Workers.CleanUnconfirmedUsersWorker, queue: :background},
        {"@hourly", Mobilizon.Service.Workers.ExportCleanerWorker, queue: :background},
@@ -324,10 +340,13 @@ config :mobilizon, Mobilizon.Service.Notifier.Email, enabled: true
 config :mobilizon, Mobilizon.Service.Notifier.Push, enabled: true
 
 config :mobilizon, :exports,
+  path: "/var/lib/mobilizon/uploads/exports",
   formats: [
     Mobilizon.Service.Export.Participants.CSV
   ]
 
+config :mobilizon, :analytics, providers: []
+
 # 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"

config/dev.exs

@@ -58,7 +58,7 @@ config :logger, :console, format: "[$level] $message\n", level: :debug
 
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Nominatim
 
-config :mobilizon, Mobilizon.Web.Gettext, allowed_locales: ["fr", "en", "ar"]
+config :mobilizon, Mobilizon.Web.Gettext, allowed_locales: ["fr", "en", "ru", "ar"]
 
 # Set a higher stacktrace during development. Avoid configuring such
 # in production as building large stacktraces may be expensive.
@@ -67,7 +67,7 @@ config :phoenix, :stacktrace_depth, 20
 # Initialize plugs at runtime for faster development compilation
 config :phoenix, :plug_init_mode, :runtime
 
-config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Bamboo.LocalAdapter
+config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Swoosh.Adapters.Local
 
 # Configure your database
 config :mobilizon, Mobilizon.Storage.Repo,
@@ -94,6 +94,10 @@ config :mobilizon, Mobilizon.Web.Auth.Guardian,
 
 config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "uploads"
 
+config :mobilizon, :exports, path: "uploads/exports"
+
+config :tz_world, data_dir: "_build/dev/lib/tz_world/priv"
+
 config :mobilizon, :anonymous,
   reports: [
     allowed: true

config/docker.exs

@@ -33,9 +33,6 @@ config :mobilizon, :instance,
   email_from: System.get_env("MOBILIZON_INSTANCE_EMAIL", "noreply@mobilizon.lan"),
   email_reply_to: System.get_env("MOBILIZON_REPLY_EMAIL", "noreply@mobilizon.lan")
 
-config :mobilizon, Mobilizon.Web.Upload.Uploader.Local,
-  uploads: System.get_env("MOBILIZON_UPLOADS", "/app/uploads")
-
 config :mobilizon, Mobilizon.Storage.Repo,
   adapter: Ecto.Adapters.Postgres,
   username: System.get_env("MOBILIZON_DATABASE_USERNAME", "username"),
@@ -46,9 +43,8 @@ config :mobilizon, Mobilizon.Storage.Repo,
   pool_size: 10
 
 config :mobilizon, Mobilizon.Web.Email.Mailer,
-  adapter: Bamboo.SMTPAdapter,
-  server: System.get_env("MOBILIZON_SMTP_SERVER", "localhost"),
-  hostname: System.get_env("MOBILIZON_SMTP_HOSTNAME", "localhost"),
+  adapter: Swoosh.Adapters.SMTP,
+  relay: System.get_env("MOBILIZON_SMTP_SERVER", "localhost"),
   port: System.get_env("MOBILIZON_SMTP_PORT", "25"),
   username: System.get_env("MOBILIZON_SMTP_USERNAME", nil),
   password: System.get_env("MOBILIZON_SMTP_PASSWORD", nil),
@@ -68,4 +64,16 @@ config :geolix,
     }
   ]
 
-config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "/var/lib/mobilizon/uploads"
+config :mobilizon, Mobilizon.Web.Upload.Uploader.Local,
+  uploads: System.get_env("MOBILIZON_UPLOADS", "/var/lib/mobilizon/uploads")
+
+config :mobilizon, :exports,
+  path: System.get_env("MOBILIZON_UPLOADS_EXPORTS", "/var/lib/mobilizon/uploads/exports"),
+  formats: [
+    Mobilizon.Service.Export.Participants.CSV,
+    Mobilizon.Service.Export.Participants.PDF,
+    Mobilizon.Service.Export.Participants.ODS
+  ]
+
+config :tz_world,
+  data_dir: System.get_env("MOBILIZON_TIMEZONES_DIR", "/var/lib/mobilizon/timezones")

config/prod.exs

@@ -18,31 +18,27 @@ config :mobilizon, :cldr,
   locales: [
     "ar",
     "be",
+    "bn",
     "ca",
     "cs",
+    "cy",
     "de",
     "en",
     "es",
+    "fa",
     "fi",
     "fr",
+    "gd",
     "gl",
     "hu",
+    "id",
     "it",
     "ja",
     "nl",
     "nn",
-    "oc",
     "pl",
     "pt",
     "ru",
-    "sv"
+    "sv",
+    "zh_Hant"
   ]
-
-cond do
-  System.get_env("INSTANCE_CONFIG") &&
-      File.exists?("./config/#{System.get_env("INSTANCE_CONFIG")}") ->
-    import_config System.get_env("INSTANCE_CONFIG")
-
-  true ->
-    :ok
-end

config/test.exs

@@ -54,21 +54,28 @@ config :mobilizon, :ldap,
   bind_uid: System.get_env("LDAP_BIND_UID"),
   bind_password: System.get_env("LDAP_BIND_PASSWORD")
 
-config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Bamboo.TestAdapter
+config :mobilizon, Mobilizon.Web.Email.Mailer, adapter: Swoosh.Adapters.Test
 
 config :mobilizon, Mobilizon.Web.Upload, filters: [], link_name: false
 
 config :mobilizon, Mobilizon.Web.Upload.Uploader.Local, uploads: "test/uploads"
 
-config :exvcr,
-  vcr_cassette_library_dir: "test/fixtures/vcr_cassettes"
+config :mobilizon, :exports, path: "test/uploads/exports"
+
+config :tz_world, data_dir: "_build/test/lib/tz_world/priv"
 
 config :tesla, Mobilizon.Service.HTTP.ActivityPub,
   adapter: Mobilizon.Service.HTTP.ActivityPub.Mock
 
+config :tesla, Mobilizon.Service.HTTP.WebfingerClient,
+  adapter: Mobilizon.Service.HTTP.WebfingerClient.Mock
+
 config :tesla, Mobilizon.Service.HTTP.GeospatialClient,
   adapter: Mobilizon.Service.HTTP.GeospatialClient.Mock
 
+config :tesla, Mobilizon.Service.HTTP.HostMetaClient,
+  adapter: Mobilizon.Service.HTTP.HostMetaClient.Mock
+
 config :mobilizon, Mobilizon.Service.Geospatial, service: Mobilizon.Service.Geospatial.Mock
 
 config :mobilizon, Oban, queues: false, plugins: false

docker-compose.dev.yml

@@ -0,0 +1,41 @@
+version: "3.2"
+services:
+  postgres:
+    container_name: mobilizon_db
+    restart: unless-stopped
+    image: postgis/postgis
+    environment:
+      - POSTGRES_USER
+      - POSTGRES_PASSWORD
+      - POSTGRES_DB
+      - POSTGRES_PORT
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+  api:
+    container_name: mobilizon_api
+    restart: unless-stopped
+    build: .
+    volumes:
+      - ".:/app"
+    ports:
+      - 4000:4000
+    depends_on:
+      - postgres
+    environment:
+      MIX_ENV: "dev"
+      DOCKER: "true"
+      MOBILIZON_INSTANCE_NAME: My Mobilizon Instance
+      MOBILIZON_INSTANCE_HOST: localhost
+      MOBILIZON_INSTANCE_HOST_PORT: 4000
+      MOBILIZON_INSTANCE_PORT: 4000
+      MOBILIZON_INSTANCE_EMAIL: noreply@mobilizon.me
+      MOBILIZON_INSTANCE_REGISTRATIONS_OPEN: "true"
+      MOBILIZON_DATABASE_PASSWORD: ${POSTGRES_PASSWORD}
+      MOBILIZON_DATABASE_USERNAME: ${POSTGRES_USER}
+      MOBILIZON_DATABASE_DBNAME: ${POSTGRES_DB}
+      MOBILIZON_DATABASE_HOST: postgres
+      MOBILIZON_DATABASE_PORT: ${POSTGRES_PORT}
+    command: sh -c "mix phx.server"
+volumes:
+  pgdata:
+  .:

docker-compose.test.yml

@@ -1,4 +1,4 @@
-version: '3'
+version: "3.2"
 
 services:
   postgres:

docker/production/Dockerfile

@@ -7,11 +7,12 @@ COPY js .
 
 ENV CYPRESS_INSTALL_BINARY 0
 
-RUN yarn install \
+# Network timeout because it's slow when cross-compiling
+RUN yarn install --network-timeout 100000 \
     && yarn run build
 
 # Then, build the application binary
-FROM elixir:1.12-alpine AS builder
+FROM elixir:1.13-alpine AS builder
 
 RUN apk add --no-cache build-base git cmake
 
@@ -29,7 +30,7 @@ COPY rel ./rel
 COPY support ./support
 COPY --from=assets ./priv/static ./priv/static
 
-RUN mix phx.digest \
+RUN mix phx.digest.clean --all \
     && mix release
 
 # Finally setup the app
@@ -48,9 +49,14 @@ LABEL org.opencontainers.image.title="mobilizon" \
     org.opencontainers.image.revision=$VCS_REF \
     org.opencontainers.image.created=$BUILD_DATE
 
-RUN apk add --no-cache openssl ca-certificates ncurses-libs file postgresql-client libgcc libstdc++ imagemagick
+RUN apk add --no-cache curl openssl ca-certificates ncurses-libs file postgresql-client libgcc libstdc++ imagemagick python3 py3-pip py3-pillow py3-cffi py3-brotli gcc g++ musl-dev python3-dev pango libxslt-dev ttf-cantarell
+RUN pip install weasyprint pyexcel-ods3
 
-RUN mkdir -p /app/uploads && chown nobody:nobody /app/uploads
+RUN mkdir -p /var/lib/mobilizon/uploads && chown nobody:nobody /var/lib/mobilizon/uploads
+RUN mkdir -p /var/lib/mobilizon/uploads/exports/{csv,pdf,ods} && chown -R nobody:nobody /var/lib/mobilizon/uploads/exports
+RUN mkdir -p /var/lib/mobilizon/timezones
+RUN curl -L 'https://packages.joinmobilizon.org/tz_world/timezones-geodata.dets' -o /var/lib/mobilizon/timezones/timezones-geodata.dets
+RUN chown nobody:nobody /var/lib/mobilizon/timezones
 RUN mkdir -p /etc/mobilizon && chown nobody:nobody /etc/mobilizon
 
 USER nobody

docker/tests/Dockerfile

@@ -1,15 +1,11 @@
 FROM elixir:latest
 LABEL maintainer="Thomas Citharel <tcit@tcit.fr>"
 
-ENV REFRESHED_AT=2021-10-04
+ENV REFRESHED_AT=2022-04-06
 RUN apt-get update -yq && apt-get install -yq build-essential inotify-tools postgresql-client git curl gnupg xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 cmake exiftool python3-pip python3-setuptools
 RUN curl -sL https://deb.nodesource.com/setup_16.x | bash && apt-get install nodejs -yq
 RUN npm install -g yarn wait-on
 RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 RUN mix local.hex --force && mix local.rebar --force
-# Weasyprint 53 requires pango >= 1.44.0, which is not available in Stretch.
-# TODO: Remove the version requirement when elixir:latest is based on Bullseye
-# https://github.com/erlang/docker-erlang-otp/issues/362
-# https://github.com/Kozea/WeasyPrint/issues/1384
-RUN pip3 install -Iv weasyprint==52 pyexcel_ods3
+RUN pip3 install -Iv weasyprint pyexcel_ods3
 RUN curl https://dbip.mirror.framasoft.org/files/dbip-city-lite-latest.mmdb --output GeoLite2-City.mmdb -s && mkdir -p /usr/share/GeoIP && mv GeoLite2-City.mmdb /usr/share/GeoIP/

js/.eslintrc.js

@@ -9,8 +9,7 @@ module.exports = {
     "plugin:vue/essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
+    "plugin:prettier/recommended",
   ],
 
   plugins: ["prettier"],
@@ -30,7 +29,6 @@ module.exports = {
       },
     ],
     "@typescript-eslint/no-explicit-any": "off",
-    "cypress/no-unnecessary-waiting": "off",
     "vue/max-len": [
       "off",
       {

js/.prettierrc.json

@@ -1 +1,6 @@
-{}
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true
+}

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobilizon",
-  "version": "1.3.2",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,7 +8,7 @@
     "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 TZ=UTC vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
-    "build:assets": "vue-cli-service build",
+    "build:assets": "vue-cli-service build --report",
     "build:pictures": "bash ./scripts/build/pictures.sh"
   },
   "dependencies": {
@@ -16,47 +16,64 @@
     "@absinthe/socket-apollo-link": "^0.2.1",
     "@apollo/client": "^3.3.16",
     "@mdi/font": "^6.1.95",
+    "@sentry/tracing": "^6.16.1",
+    "@sentry/vue": "^6.16.1",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@tiptap/core": "^2.0.0-beta.41",
-    "@tiptap/extension-blockquote": "^2.0.0-beta.6",
+    "@tiptap/extension-blockquote": "^2.0.0-beta.25",
+    "@tiptap/extension-bold": "^2.0.0-beta.24",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.9",
-    "@tiptap/extension-character-count": "^2.0.0-beta.5",
-    "@tiptap/extension-history": "^2.0.0-beta.5",
+    "@tiptap/extension-bullet-list": "^2.0.0-beta.23",
+    "@tiptap/extension-document": "^2.0.0-beta.15",
+    "@tiptap/extension-dropcursor": "^2.0.0-beta.25",
+    "@tiptap/extension-gapcursor": "^2.0.0-beta.33",
+    "@tiptap/extension-heading": "^2.0.0-beta.23",
+    "@tiptap/extension-history": "^2.0.0-beta.21",
     "@tiptap/extension-image": "^2.0.0-beta.6",
+    "@tiptap/extension-italic": "^2.0.0-beta.24",
     "@tiptap/extension-link": "^2.0.0-beta.8",
-    "@tiptap/extension-list-item": "^2.0.0-beta.6",
+    "@tiptap/extension-list-item": "^2.0.0-beta.19",
     "@tiptap/extension-mention": "^2.0.0-beta.42",
-    "@tiptap/extension-ordered-list": "^2.0.0-beta.6",
+    "@tiptap/extension-ordered-list": "^2.0.0-beta.24",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.22",
+    "@tiptap/extension-strike": "^2.0.0-beta.26",
+    "@tiptap/extension-text": "^2.0.0-beta.15",
     "@tiptap/extension-underline": "^2.0.0-beta.7",
-    "@tiptap/starter-kit": "^2.0.0-beta.37",
     "@tiptap/vue-2": "^2.0.0-beta.21",
     "@vue-a11y/announcer": "^2.1.0",
     "@vue-a11y/skip-to": "^2.1.2",
     "@vue/apollo-option": "4.0.0-alpha.11",
     "apollo-absinthe-upload-link": "^1.5.0",
+    "autoprefixer": "^10",
     "blurhash": "^1.1.3",
     "buefy": "^0.9.0",
     "bulma-divider": "^0.2.0",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.0",
     "date-fns-tz": "^1.1.6",
-    "graphql": "^15.0.0",
+    "graphql": "^16.0.0",
     "graphql-tag": "^2.10.3",
     "intersection-observer": "^0.12.0",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.4.0",
-    "leaflet.locatecontrol": "^0.74.0",
+    "leaflet.locatecontrol": "^0.76.0",
     "lodash": "^4.17.11",
     "ngeohash": "^0.6.3",
     "p-debounce": "^4.0.0",
     "phoenix": "^1.6",
+    "postcss": "^8",
     "register-service-worker": "^1.7.2",
+    "sanitize-html": "^2.5.3",
+    "tailwindcss": "^3",
     "tippy.js": "^6.2.3",
     "unfetch": "^4.2.0",
     "v-tooltip": "^2.1.3",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-i18n": "^8.14.0",
+    "vue-matomo": "^4.1.0",
     "vue-meta": "^2.3.1",
+    "vue-plausible": "^1.3.1",
     "vue-property-decorator": "^9.0.0",
     "vue-router": "^3.1.6",
     "vue-scrollto": "^2.17.1",
@@ -64,9 +81,10 @@
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.0",
     "@types/jest": "^27.0.2",
     "@types/leaflet": "^1.5.2",
-    "@types/leaflet.locatecontrol": "^0.60.7",
+    "@types/leaflet.locatecontrol": "^0.74",
     "@types/lodash": "^4.14.141",
     "@types/ngeohash": "^0.6.2",
     "@types/phoenix": "^1.5.2",
@@ -74,37 +92,36 @@
     "@types/prosemirror-model": "^1.7.2",
     "@types/prosemirror-state": "^1.2.4",
     "@types/prosemirror-view": "^1.11.4",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~5.0.0-beta.7",
-    "@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.7",
-    "@vue/cli-plugin-eslint": "~5.0.0-beta.7",
-    "@vue/cli-plugin-pwa": "~5.0.0-beta.7",
-    "@vue/cli-plugin-router": "~5.0.0-beta.7",
-    "@vue/cli-plugin-typescript": "~5.0.0-beta.7",
-    "@vue/cli-plugin-unit-jest": "~5.0.0-beta.7",
-    "@vue/cli-service": "~5.0.0-beta.7",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
+    "@types/sanitize-html": "^2.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.0",
+    "@typescript-eslint/parser": "^5.3.0",
+    "@vue/cli-plugin-babel": "~5.0.4",
+    "@vue/cli-plugin-eslint": "~5.0.4",
+    "@vue/cli-plugin-pwa": "~5.0.4",
+    "@vue/cli-plugin-router": "~5.0.4",
+    "@vue/cli-plugin-typescript": "~5.0.4",
+    "@vue/cli-plugin-unit-jest": "~5.0.4",
+    "@vue/cli-service": "~5.0.4",
+    "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "^1.1.0",
-    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "@vue/vue2-jest": "^27.0.0-alpha.3",
     "@vue/vue3-jest": "^27.0.0-alpha.1",
-    "cypress": "^8.3.0",
-    "eslint": "^7.20.0",
-    "eslint-plugin-cypress": "^2.10.3",
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.6.0",
+    "eslint-plugin-vue": "^8.0.3",
     "flush-promises": "^1.0.2",
     "jest": "^27.1.0",
     "jest-junit": "^13.0.0",
     "mock-apollo-client": "^1.1.0",
     "prettier": "^2.2.1",
-    "prettier-eslint": "^13.0.0",
+    "prettier-eslint": "^14.0.0",
     "sass": "^1.34.1",
     "sass-loader": "^12.0.0",
     "ts-jest": "27",
-    "typescript": "~4.4.3",
+    "typescript": "~4.5.5",
+    "vue-cli-plugin-tailwind": "~3.0.0",
     "vue-i18n-extract": "^2.0.4",
     "vue-template-compiler": "^2.6.11",
     "webpack-cli": "^4.7.0"

js/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

js/public/img/owncast_monochrome.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100%"
+   height="100%"
+   viewBox="0 0 96 105"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+   class="svg-logo-solid"
+   id="svg32"
+   sodipodi:docname="owncast.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
+   id="metadata38"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs36" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1016"
+   id="namedview34"
+   showgrid="false"
+   inkscape:zoom="7.5619048"
+   inkscape:cx="48"
+   inkscape:cy="52.367758"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg32" />
+    <g
+   transform="matrix(1.04457,0,0,1.04457,-0.742448,-0.0626735)"
+   id="g30"
+   style="fill:#000000">
+        <g
+   id="g12"
+   style="fill:#000000">
+            <path
+   d="M91.5,75.35C92.533,72.55 92.583,70 91.65,67.7C90.783,65.567 89.117,63.767 86.65,62.3C84.35,60.967 81.567,60 78.3,59.4C75.333,58.867 72.1,58.633 68.6,58.7C65.233,58.8 61.967,59.167 58.8,59.8C55.767,60.433 53.1,61.233 50.8,62.2C48.533,63.167 46.767,64.217 45.5,65.35C44.233,66.55 43.567,67.783 43.5,69.05C43.4,70.55 44.167,72.167 45.8,73.9C47.3,75.5 49.4,77.067 52.1,78.6C54.8,80.133 57.783,81.45 61.05,82.55C64.55,83.717 68,84.467 71.4,84.8C73.6,85 75.65,85.033 77.55,84.9C79.617,84.7 81.533,84.267 83.3,83.6C85.2,82.867 86.817,81.85 88.15,80.55C89.65,79.117 90.767,77.383 91.5,75.35M70.6,67.5C71.733,68.1 72.567,68.833 73.1,69.7C73.633,70.667 73.75,71.767 73.45,73C73.217,73.867 72.833,74.617 72.3,75.25C71.8,75.817 71.133,76.267 70.3,76.6C69.6,76.9 68.75,77.117 67.75,77.25C66.783,77.35 65.817,77.367 64.85,77.3C63.15,77.2 61.283,76.867 59.25,76.3C57.483,75.767 55.783,75.1 54.15,74.3C52.65,73.567 51.417,72.8 50.45,72C49.517,71.167 49.067,70.433 49.1,69.8C49.167,69.267 49.55,68.75 50.25,68.25C50.95,67.783 51.917,67.367 53.15,67C54.383,66.6 55.75,66.3 57.25,66.1C58.95,65.9 60.567,65.8 62.1,65.8C63.8,65.833 65.333,65.967 66.7,66.2C68.167,66.5 69.467,66.933 70.6,67.5Z"
+   style="fill:#000000;fill-rule:nonzero"
+   id="path10" />
+        </g>
+        <g
+   id="g16"
+   style="fill:#000000">
+            <path
+   d="M66.6,15.05C66.467,11.45 65.567,8.45 63.9,6.05C62.133,3.417 59.533,1.617 56.1,0.65C55.333,0.417 54.517,0.25 53.65,0.15C52.883,0.05 52.1,0.033 51.3,0.1C50.567,0.1 49.833,0.183 49.1,0.35C48.467,0.483 47.767,0.7 47,1C44.533,1.967 42.3,3.667 40.3,6.1C38.433,8.3 36.833,11.033 35.5,14.3C34.333,17.067 33.4,20.1 32.7,23.4C32.033,26.5 31.583,29.65 31.35,32.85C31.15,35.75 31.133,38.533 31.3,41.2C31.5,43.833 31.867,46.217 32.4,48.35C33.467,52.717 35.1,55.4 37.3,56.4C37.5,56.5 37.7,56.583 37.9,56.65L39.2,56.85C39.367,56.85 39.617,56.833 39.95,56.8C41.35,56.667 42.933,56.083 44.7,55.05C46.4,54.017 48.183,52.6 50.05,50.8C52.05,48.867 53.983,46.617 55.85,44.05C57.817,41.383 59.567,38.567 61.1,35.6C62.9,32.1 64.283,28.667 65.25,25.3C66.25,21.6 66.7,18.183 66.6,15.05M47.55,23.15C47.883,23.217 48.167,23.3 48.4,23.4C51.1,24.333 52.483,26.483 52.55,29.85C52.583,32.617 51.733,35.8 50,39.4C48.567,42.4 46.85,45.033 44.85,47.3C42.983,49.433 41.417,50.567 40.15,50.7L39.9,50.75L39.45,50.7L39.2,50.6C38.267,50.167 37.617,48.75 37.25,46.35C36.883,43.917 36.9,41.133 37.3,38C37.733,34.5 38.55,31.433 39.75,28.8C41.183,25.667 42.95,23.817 45.05,23.25C45.417,23.15 45.683,23.1 45.85,23.1C46.117,23.067 46.383,23.05 46.65,23.05C46.917,23.05 47.217,23.083 47.55,23.15Z"
+   style="fill:#000000;fill-rule:nonzero"
+   id="path14" />
+        </g>
+        <g
+   id="g20"
+   style="fill:#000000">
+            <path
+   d="M2.7,33.6C2.3,34.133 1.967,34.717 1.7,35.35C1.4,36.117 1.183,36.9 1.05,37.7C0.35,40.967 0.733,44.133 2.2,47.2C3.4,49.733 5.333,52.117 8,54.35C10.367,56.317 13.033,57.917 16,59.15C19,60.383 21.617,60.95 23.85,60.85C24.283,60.85 24.75,60.8 25.25,60.7C25.75,60.6 26.167,60.467 26.5,60.3C26.833,60.133 27.15,59.917 27.45,59.65C27.75,59.383 27.983,59.083 28.15,58.75C28.95,57.217 28.733,54.85 27.5,51.65C26.233,48.55 24.317,45.367 21.75,42.1C19.083,38.7 16.3,36.017 13.4,34.05C10.267,31.95 7.617,31.167 5.45,31.7C4.917,31.833 4.417,32.067 3.95,32.4C3.483,32.7 3.067,33.1 2.7,33.6M10.1,43.55C10.267,43.25 10.433,43.017 10.6,42.85C10.767,42.683 10.967,42.533 11.2,42.4C11.467,42.3 11.7,42.233 11.9,42.2C12.967,42 14.317,42.467 15.95,43.6C17.417,44.567 18.883,45.933 20.35,47.7C21.683,49.3 22.75,50.867 23.55,52.4C24.317,53.967 24.55,55.067 24.25,55.7C24.183,55.833 24.1,55.933 24,56C23.9,56.133 23.783,56.217 23.65,56.25C23.583,56.317 23.45,56.367 23.25,56.4L22.7,56.5C21.633,56.567 20.25,56.267 18.55,55.6C16.883,54.933 15.317,54.05 13.85,52.95C12.283,51.783 11.117,50.517 10.35,49.15C9.483,47.583 9.283,46.017 9.75,44.45C9.85,44.117 9.967,43.817 10.1,43.55Z"
+   style="fill:#000000;fill-rule:nonzero"
+   id="path18" />
+        </g>
+        <g
+   id="g24"
+   style="fill:#000000">
+            <path
+   d="M34.95,74.2L34.75,74.2C33.717,74.167 32.767,74.517 31.9,75.25C31.1,75.95 30.417,76.95 29.85,78.25C29.35,79.417 29,80.733 28.8,82.2C28.6,83.667 28.567,85.15 28.7,86.65C28.967,89.817 29.9,92.5 31.5,94.7C33.367,97.233 35.967,98.9 39.3,99.7L39.4,99.7L39.7,99.8L39.85,99.8C43.483,100.5 45.917,99.817 47.15,97.75C47.717,96.783 48,95.55 48,94.05C47.967,92.617 47.7,91.05 47.2,89.35C46.7,87.617 46,85.883 45.1,84.15C44.2,82.383 43.183,80.783 42.05,79.35C40.85,77.85 39.65,76.65 38.45,75.75C37.183,74.817 36.017,74.3 34.95,74.2M33.55,80.4C34.083,78.933 34.767,78.233 35.6,78.3L35.65,78.3C36.483,78.4 37.467,79.267 38.6,80.9C39.733,82.533 40.583,84.25 41.15,86.05C41.783,88.017 41.917,89.583 41.55,90.75C41.117,91.983 40.05,92.483 38.35,92.25L38.3,92.25L38.25,92.2L38.1,92.2C36.433,91.867 35.15,91 34.25,89.6C33.483,88.333 33.05,86.8 32.95,85C32.85,83.233 33.05,81.7 33.55,80.4Z"
+   style="fill:#000000;fill-rule:nonzero"
+   id="path22" />
+        </g>
+        <g
+   id="g28"
+   style="fill:#000000">
+            <path
+   d="M22.7,69.65C22.4,69.417 22.033,69.217 21.6,69.05C21.167,68.883 20.717,68.767 20.25,68.7C19.817,68.6 19.35,68.533 18.85,68.5C17.417,68.467 16.017,68.683 14.65,69.15C13.317,69.583 12.233,70.233 11.4,71.1C10.567,72.033 10.167,73.067 10.2,74.2C10.233,75.433 10.817,76.767 11.95,78.2C12.25,78.567 12.617,78.967 13.05,79.4C13.383,79.733 13.767,80.033 14.2,80.3C14.533,80.5 14.9,80.683 15.3,80.85C15.767,81.017 16.133,81.1 16.4,81.1C17.6,81.267 18.767,81.017 19.9,80.35C21,79.717 21.95,78.817 22.75,77.65C23.583,76.45 24.1,75.217 24.3,73.95C24.5,72.55 24.25,71.4 23.55,70.5C23.283,70.167 23,69.883 22.7,69.65M21.7,71.7C22,72.1 22.067,72.633 21.9,73.3C21.767,73.933 21.467,74.583 21,75.25C20.533,75.883 20,76.383 19.4,76.75C18.767,77.15 18.15,77.317 17.55,77.25L17,77.15C16.8,77.083 16.617,76.983 16.45,76.85C16.317,76.783 16.133,76.65 15.9,76.45C15.767,76.317 15.6,76.133 15.4,75.9C14.8,75.133 14.567,74.433 14.7,73.8C14.767,73.233 15.117,72.733 15.75,72.3C16.317,71.9 17,71.6 17.8,71.4C18.6,71.2 19.367,71.117 20.1,71.15L20.65,71.2L21.1,71.3C21.233,71.367 21.35,71.433 21.45,71.5L21.7,71.7Z"
+   style="fill:#000000;fill-rule:nonzero"
+   id="path26" />
+        </g>
+    </g>
+</svg>

js/src/App.vue

@@ -9,7 +9,7 @@
         type="is-danger"
         :title="$t('Warning').toLocaleUpperCase()"
         closable
-        aria-close-label="Close"
+        :aria-close-label="$t('Close')"
       >
         <p>
           {{ $t("This is a demonstration site to test Mobilizon.") }}
@@ -203,6 +203,16 @@ export default class App extends Vue {
     this.interval = undefined;
   }
 
+  @Watch("config")
+  async initializeStatistics(config: IConfig) {
+    if (config) {
+      const { statistics } = (await import("./services/statistics")) as {
+        statistics: (config: IConfig, environment: Record<string, any>) => void;
+      };
+      statistics(config, { router: this.$router, version: config.version });
+    }
+  }
+
   @Watch("$route", { immediate: true })
   updateAnnouncement(route: Route): void {
     const pageTitle = this.extractPageTitleFromRoute(route);
@@ -216,8 +226,12 @@ export default class App extends Vue {
     // Set the focus to the router view
     // https://marcus.io/blog/accessible-routing-vuejs
     setTimeout(() => {
-      const focusTarget = this.routerView?.$el as HTMLElement;
-      if (focusTarget) {
+      const focusTarget = (
+        this.routerView?.$refs?.componentFocusTarget !== undefined
+          ? this.routerView?.$refs?.componentFocusTarget
+          : this.routerView?.$el
+      ) as HTMLElement;
+      if (focusTarget && focusTarget instanceof Element) {
         // Make focustarget programmatically focussable
         focusTarget.setAttribute("tabindex", "-1");
 

js/src/apollo/utils.ts

@@ -70,6 +70,9 @@ export const typePolicies: TypePolicies = {
       participantStats: { merge: replaceMergePolicy },
     },
   },
+  Instance: {
+    keyFields: ["domain"],
+  },
   RootQueryType: {
     fields: {
       relayFollowers: paginatedLimitPagination<IFollower>(),

js/src/assets/logo.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60">
+    <path style="opacity:0;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:0" 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>

js/src/assets/tailwind.css

@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;

js/src/common.scss

@@ -7,10 +7,6 @@
 @import "styles/vue-announcer.scss";
 @import "styles/vue-skip-to.scss";
 
-// a {
-//   color: $violet-2;
-// }
-
 a.out,
 .content a,
 .ProseMirror a {
@@ -19,18 +15,10 @@ a.out,
   text-decoration-thickness: 2px;
 }
 
-// input.input {
-//   border-color: $input-border-color !important;
-// }
-
 .section {
   padding: 1rem 1% 4rem;
 }
 
-figure img.is-rounded {
-  border: 1px solid #cdcaea;
-}
-
 $color-black: #000;
 
 .mention {

js/src/components/Account/ActorAutoComplete.vue

@@ -1,118 +0,0 @@
-<template>
-  <b-autocomplete
-    :data="baseData"
-    :placeholder="$t('Actor')"
-    v-model="name"
-    field="preferredUsername"
-    :loading="$apollo.loading"
-    check-infinite-scroll
-    @typing="getAsyncData"
-    @select="handleSelect"
-    @infinite-scroll="getAsyncData"
-  >
-    <template #default="props">
-      <div class="media">
-        <div class="media-left">
-          <img
-            width="32"
-            :src="props.option.avatar.url"
-            v-if="props.option.avatar"
-            alt=""
-          />
-          <b-icon v-else icon="account-circle" />
-        </div>
-        <div class="media-content">
-          <span v-if="props.option.name">
-            {{ props.option.name }}
-            <br />
-            <small>{{ `@${props.option.preferredUsername}` }}</small>
-            <small v-if="props.option.domain">{{
-              `@${props.option.domain}`
-            }}</small>
-          </span>
-          <span v-else>
-            {{ `@${props.option.preferredUsername}` }}
-          </span>
-        </div>
-      </div>
-    </template>
-    <template slot="footer">
-      <span class="has-text-grey" v-show="page > totalPages">
-        Thats it! No more movies found.
-      </span>
-    </template>
-  </b-autocomplete>
-</template>
-<script lang="ts">
-import { Component, Model, Vue, Watch } from "vue-property-decorator";
-import debounce from "lodash/debounce";
-import { IPerson } from "@/types/actor";
-import { SEARCH_PERSONS } from "@/graphql/search";
-import { Paginate } from "@/types/paginate";
-
-const SEARCH_PERSON_LIMIT = 10;
-
-@Component
-export default class ActorAutoComplete extends Vue {
-  @Model("change", { type: Object }) readonly defaultSelected!: IPerson | null;
-
-  baseData: IPerson[] = [];
-
-  selected: IPerson | null = this.defaultSelected;
-
-  name: string = this.defaultSelected
-    ? this.defaultSelected.preferredUsername
-    : "";
-
-  page = 1;
-
-  totalPages = 1;
-
-  mounted(): void {
-    this.selected = this.defaultSelected;
-  }
-
-  data(): Record<string, unknown> {
-    return {
-      getAsyncData: debounce(this.doGetAsyncData, 500),
-    };
-  }
-
-  @Watch("defaultSelected")
-  updateDefaultSelected(defaultSelected: IPerson): void {
-    console.log("update defaultSelected", defaultSelected);
-    this.selected = defaultSelected;
-    this.name = defaultSelected.preferredUsername;
-  }
-
-  handleSelect(selected: IPerson): void {
-    this.selected = selected;
-    this.$emit("change", selected);
-  }
-
-  async doGetAsyncData(name: string): Promise<void> {
-    this.baseData = [];
-    if (this.name !== name) {
-      this.name = name;
-      this.page = 1;
-    }
-    if (!name.length) {
-      this.page = 1;
-      this.totalPages = 1;
-      return;
-    }
-    const {
-      data: { searchPersons },
-    } = await this.$apollo.query<{ searchPersons: Paginate<IPerson> }>({
-      query: SEARCH_PERSONS,
-      variables: {
-        searchText: this.name,
-        page: this.page,
-        limit: SEARCH_PERSON_LIMIT,
-      },
-    });
-    this.totalPages = Math.ceil(searchPersons.total / SEARCH_PERSON_LIMIT);
-    this.baseData.push(...searchPersons.elements);
-  }
-}
-</script>

js/src/components/Account/ActorCard.vue

@@ -1,31 +1,86 @@
 <template>
-  <div class="media" style="align-items: top" dir="auto">
-    <div class="media-left">
-      <figure class="image is-32x32" v-if="actor.avatar">
-        <img class="is-rounded" :src="actor.avatar.url" alt="" />
+  <div
+    class="bg-white rounded-lg flex space-x-4 items-center"
+    :class="{ 'flex-col p-4 shadow-md sm:p-8 pb-10 w-80': !inline }"
+  >
+    <div>
+      <figure class="w-12 h-12" v-if="actor.avatar">
+        <img
+          class="rounded-lg"
+          :src="actor.avatar.url"
+          alt=""
+          width="48"
+          height="48"
+        />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <b-icon
+        v-else
+        :size="inline ? 'is-medium' : 'is-large'"
+        icon="account-circle"
+        class="ltr:-mr-0.5 rtl:-ml-0.5"
+      />
     </div>
-
-    <div class="media-content">
-      <p>
-        {{ actor.name || `@${usernameWithDomain(actor)}` }}
-      </p>
-      <p class="has-text-grey-dark" v-if="actor.name">
+    <div :class="{ 'text-center': !inline }" class="overflow-hidden w-full">
+      <h5
+        class="text-xl font-medium violet-title tracking-tight text-gray-900 whitespace-pre-line line-clamp-2"
+      >
+        {{ displayName(actor) }}
+      </h5>
+      <p class="text-gray-500 truncate" v-if="actor.name">
         <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
       </p>
       <div
         v-if="full"
-        class="summary"
-        :class="{ limit: limit }"
+        class="only-first-child"
+        :class="{
+          'line-clamp-3': limit,
+          'line-clamp-10': !limit,
+        }"
         v-html="actor.summary"
       />
     </div>
   </div>
+  <!-- <div
+    class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
+    dir="auto"
+  >
+    <div class="flex-shrink-0">
+      <figure class="w-12 h-12" v-if="actor.avatar">
+        <img
+          class="rounded-lg"
+          :src="actor.avatar.url"
+          alt=""
+          width="48"
+          height="48"
+        />
+      </figure>
+      <b-icon
+        v-else
+        size="is-large"
+        icon="account-circle"
+        class="ltr:-mr-0.5 rtl:-ml-0.5"
+      />
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
+        {{ displayName(actor) }}
+      </h5>
+      <p class="text-gray-500 truncate" v-if="actor.name">
+        <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
+      </p>
+      <div
+        v-if="full"
+        class="line-clamp-3"
+        :class="{ limit: limit }"
+        v-html="actor.summary"
+      />
+    </div>
+  </div> -->
 </template>
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { IActor, usernameWithDomain } from "../../types/actor";
+import { displayName, IActor, usernameWithDomain } from "../../types/actor";
 
 @Component
 export default class ActorCard extends Vue {
@@ -33,140 +88,19 @@ export default class ActorCard extends Vue {
 
   @Prop({ required: false, type: Boolean, default: false }) full!: boolean;
 
+  @Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
+
   @Prop({ required: false, type: Boolean, default: false }) popover!: boolean;
 
   @Prop({ required: false, type: Boolean, default: true }) limit!: boolean;
 
   usernameWithDomain = usernameWithDomain;
+
+  displayName = displayName;
 }
 </script>
-<style lang="scss" scoped>
-.summary.limit {
-  max-width: 25rem;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-}
-</style>
-
-<style lang="scss">
-@use "@/styles/_mixins" as *;
-
-.media {
-  .media-left {
-    margin-right: initial;
-    @include margin-right(1rem);
-  }
-}
-
-.tooltip {
-  display: block !important;
-  z-index: 10000;
-
-  .tooltip-inner {
-    background: black;
-    color: white;
-    border-radius: 16px;
-    padding: 5px 10px 4px;
-  }
-
-  .tooltip-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: black;
-    z-index: 1;
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    @include margin-left(5px);
-
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-      @include margin-left(0);
-      @include margin-right(0);
-    }
-  }
-
-  &[x-placement^="left"] {
-    @include margin-right(5px);
-
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-      @include margin-left(0);
-      @include margin-right(0);
-    }
-  }
-
-  &.popover {
-    $color: #f9f9f9;
-
-    .popover-inner {
-      background: lighten($background-color, 65%);
-      color: black;
-      padding: 24px;
-      border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(black, 0.1);
-    }
-
-    .popover-arrow {
-      border-color: $color;
-    }
-  }
-
-  &[aria-hidden="true"] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.15s, visibility 0.15s;
-  }
-
-  &[aria-hidden="false"] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.15s;
-  }
+<style scoped>
+.only-first-child ::v-deep :not(:first-child) {
+  display: none;
 }
 </style>

js/src/components/Account/ActorInline.vue

@@ -1,28 +1,33 @@
 <template>
-  <div class="actor-inline">
-    <div class="actor-avatar">
-      <figure class="image is-24x24" v-if="actor.avatar">
+  <div class="inline-flex items-start">
+    <div class="flex-none mr-2">
+      <figure class="image is-48x48" v-if="actor.avatar">
         <img class="is-rounded" :src="actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <b-icon v-else size="is-large" icon="account-circle" />
     </div>
 
-    <div class="actor-name">
-      <p>
-        {{ actor.name || `@${usernameWithDomain(actor)}` }}
+    <div class="flex-auto">
+      <p class="text-base line-clamp-3 md:line-clamp-2 max-w-xl">
+        {{ displayName(actor) }}
+      </p>
+      <p class="text-sm text-gray-500 truncate">
+        @{{ usernameWithDomain(actor) }}
       </p>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { IActor, usernameWithDomain } from "../../types/actor";
+import { displayName, IActor, usernameWithDomain } from "../../types/actor";
 
 @Component
 export default class ActorInline extends Vue {
   @Prop({ required: true, type: Object }) actor!: IActor;
 
   usernameWithDomain = usernameWithDomain;
+
+  displayName = displayName;
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Account/PopoverActorCard.vue

@@ -6,7 +6,7 @@
     :class="{ inline, clickable: actor && actor.type === ActorType.GROUP }"
   >
     <slot></slot>
-    <template slot="popover" class="popover">
+    <template slot="popover">
       <actor-card :full="true" :actor="actor" :popover="true" />
     </template>
   </v-popover>

js/src/components/Activity/GroupActivityItem.vue

@@ -148,6 +148,11 @@ export default class GroupActivityItem extends mixins(ActivityMixin) {
         case Openness.INVITE_ONLY:
           details.push("The group can now only be joined with an invite.");
           break;
+        case Openness.MODERATED:
+          details.push(
+            "The group can now be joined by anyone, but new members need to be approved by an administrator."
+          );
+          break;
         case Openness.OPEN:
           details.push("The group can now be joined by anyone.");
           break;

js/src/components/Activity/MemberActivityItem.vue

@@ -9,13 +9,7 @@
           :inline="true"
           slot="member"
         >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.object.actor),
-              })
-            }}</b
-          ></popover-actor-card
+          <b> {{ displayName(activity.object.actor) }}</b></popover-actor-card
         >
         <b slot="member" v-else>{{
           subjectParams.member_actor_federated_username
@@ -25,13 +19,7 @@
           :inline="true"
           slot="profile"
         >
-          <b>
-            {{
-              $t("@{username}", {
-                username: usernameWithDomain(activity.author),
-              })
-            }}</b
-          ></popover-actor-card
+          <b> {{ displayName(activity.author) }}</b></popover-actor-card
         ></i18n
       >
       <small class="has-text-grey-dark activity-date">{{
@@ -41,7 +29,7 @@
   </div>
 </template>
 <script lang="ts">
-import { usernameWithDomain } from "@/types/actor";
+import { displayName } from "@/types/actor";
 import { ActivityMemberSubject, MemberRole } from "@/types/enums";
 import { Component } from "vue-property-decorator";
 import RouteName from "../../router/name";
@@ -62,7 +50,7 @@ export const MEMBER_ROLE_VALUE: Record<string, number> = {
   },
 })
 export default class MemberActivityItem extends mixins(ActivityMixin) {
-  usernameWithDomain = usernameWithDomain;
+  displayName = displayName;
   RouteName = RouteName;
   ActivityMemberSubject = ActivityMemberSubject;
 
@@ -83,6 +71,14 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
           return "You added the member {member}.";
         }
         return "{profile} added the member {member}.";
+      case ActivityMemberSubject.MEMBER_APPROVED:
+        if (this.isAuthorCurrentActor) {
+          return "You approved {member}'s membership.";
+        }
+        if (this.isObjectMemberCurrentActor) {
+          return "Your membership was approved by {profile}.";
+        }
+        return "{profile} approved {member}'s membership.";
       case ActivityMemberSubject.MEMBER_JOINED:
         return "{member} joined the group.";
       case ActivityMemberSubject.MEMBER_UPDATED:
@@ -94,6 +90,12 @@ export default class MemberActivityItem extends mixins(ActivityMixin) {
         }
         return "{profile} updated the member {member}.";
       case ActivityMemberSubject.MEMBER_REMOVED:
+        if (this.subjectParams.member_role === MemberRole.NOT_APPROVED) {
+          if (this.isAuthorCurrentActor) {
+            return "You rejected {member}'s membership request.";
+          }
+          return "{profile} rejected {member}'s membership request.";
+        }
         if (this.isAuthorCurrentActor) {
           return "You excluded member {member}.";
         }

js/src/components/Address/InlineAddress.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ellipsis"
+    class="truncate"
     :title="
       isDescriptionDifferentFromLocality
         ? `${physicalAddress.description}, ${physicalAddress.locality}`
@@ -8,8 +8,7 @@
     "
   >
     <b-icon icon="map-marker" />
-    <span v-if="isDescriptionDifferentFromLocality">
-      {{ physicalAddress.description }},
+    <span v-if="physicalAddress.locality">
       {{ physicalAddress.locality }}
     </span>
     <span v-else>
@@ -35,11 +34,3 @@ export default class InlineAddress extends Vue {
   }
 }
 </script>
-<style lang="scss" scoped>
-.ellipsis {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-</style>

js/src/components/Admin/Followers.vue

@@ -1,262 +0,0 @@
-<template>
-  <div>
-    <b-table
-      v-show="relayFollowers.elements.length > 0"
-      :data="relayFollowers.elements"
-      :loading="$apollo.queries.relayFollowers.loading"
-      ref="table"
-      :checked-rows.sync="checkedRows"
-      detailed
-      :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="FOLLOWERS_PER_PAGE"
-      @page-change="onFollowersPageChange"
-      checkable
-      checkbox-position="left"
-    >
-      <b-table-column
-        field="actor.id"
-        label="ID"
-        width="40"
-        numeric
-        v-slot="props"
-        >{{ props.row.actor.id }}</b-table-column
-      >
-
-      <b-table-column
-        field="actor.type"
-        :label="$t('Type')"
-        width="80"
-        v-slot="props"
-      >
-        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
-        <b-icon icon="account-circle" v-else />
-      </b-table-column>
-
-      <b-table-column
-        field="approved"
-        :label="$t('Status')"
-        width="100"
-        sortable
-        centered
-        v-slot="props"
-      >
-        <span
-          :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
-          >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
-        >
-      </b-table-column>
-
-      <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
-        <template v-slot:default="props">
-          <a
-            @click="toggle(props.row)"
-            v-if="RelayMixin.isInstance(props.row.actor)"
-            >{{ props.row.actor.domain }}</a
-          >
-          <a @click="toggle(props.row)" v-else>{{
-            `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
-          }}</a>
-        </template>
-      </b-table-column>
-
-      <b-table-column
-        field="targetActor.updatedAt"
-        :label="$t('Date')"
-        sortable
-        v-slot="props"
-      >
-        <span
-          :title="$options.filters.formatDateTimeString(props.row.updatedAt)"
-          >{{
-            formatDistanceToNow(new Date(props.row.updatedAt), {
-              locale: $dateFnsLocale,
-            })
-          }}</span
-        ></b-table-column
-      >
-
-      <template #detail="props">
-        <article>
-          <div class="content">
-            <strong>{{ props.row.actor.name }}</strong>
-            <small v-if="props.row.actor.preferredUsername !== 'relay'"
-              >@{{ props.row.actor.preferredUsername }}</small
-            >
-            <p v-html="props.row.actor.summary" />
-          </div>
-        </article>
-      </template>
-
-      <template slot="bottom-left" v-if="checkedRows.length > 0">
-        <div class="buttons">
-          <b-button
-            @click="acceptRelays"
-            type="is-success"
-            v-if="checkedRowsHaveAtLeastOneToApprove"
-          >
-            {{
-              $tc(
-                "No instance to approve|Approve instance|Approve {number} instances",
-                checkedRows.length,
-                { number: checkedRows.length }
-              )
-            }}
-          </b-button>
-          <b-button @click="rejectRelays" type="is-danger">
-            {{
-              $tc(
-                "No instance to reject|Reject instance|Reject {number} instances",
-                checkedRows.length,
-                { number: checkedRows.length }
-              )
-            }}
-          </b-button>
-        </div>
-      </template>
-    </b-table>
-    <b-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
-      $t("No instance follows your instance yet.")
-    }}</b-message>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Mixins } from "vue-property-decorator";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
-import { formatDistanceToNow } from "date-fns";
-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,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class Followers extends Mixins(RelayMixin) {
-  RelayMixin = RelayMixin;
-
-  formatDistanceToNow = formatDistanceToNow;
-
-  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
-
-  checkedRows: IFollower[] = [];
-
-  FOLLOWERS_PER_PAGE = FOLLOWERS_PER_PAGE;
-
-  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}`);
-    });
-  }
-
-  rejectRelays(): void {
-    this.checkedRows.forEach((row: IFollower) => {
-      this.rejectRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
-    });
-  }
-
-  async acceptRelay(address: string): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: ACCEPT_RELAY,
-        variables: {
-          address,
-        },
-      });
-      await this.$apollo.queries.relayFollowers.refetch();
-      this.checkedRows = [];
-    } catch (e: any) {
-      if (e.message) {
-        Snackbar.open({
-          message: e.message,
-          type: "is-danger",
-          position: "is-bottom",
-        });
-      }
-    }
-  }
-
-  async rejectRelay(address: string): Promise<void> {
-    try {
-      await this.$apollo.mutate({
-        mutation: REJECT_RELAY,
-        variables: {
-          address,
-        },
-      });
-      await this.$apollo.queries.relayFollowers.refetch();
-      this.checkedRows = [];
-    } catch (e: any) {
-      if (e.message) {
-        Snackbar.open({
-          message: e.message,
-          type: "is-danger",
-          position: "is-bottom",
-        });
-      }
-    }
-  }
-
-  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: any) {
-      console.error(err);
-    }
-  }
-}
-</script>

js/src/components/Admin/Followings.vue

@@ -1,311 +0,0 @@
-<template>
-  <div>
-    <form @submit="followRelay">
-      <b-field
-        :label="$t('Add an instance')"
-        custom-class="add-relay"
-        horizontal
-      >
-        <b-field grouped expanded size="is-large">
-          <p class="control">
-            <b-input
-              v-model="newRelayAddress"
-              :placeholder="$t('Ex: mobilizon.fr')"
-            />
-          </p>
-          <p class="control">
-            <b-button type="is-primary" native-type="submit">{{
-              $t("Add an instance")
-            }}</b-button>
-          </p>
-        </b-field>
-      </b-field>
-    </form>
-    <b-table
-      v-show="relayFollowings.elements.length > 0"
-      :data="relayFollowings.elements"
-      :loading="$apollo.queries.relayFollowings.loading"
-      ref="table"
-      :checked-rows.sync="checkedRows"
-      :is-row-checkable="(row) => row.id !== 3"
-      detailed
-      :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="FOLLOWINGS_PER_PAGE"
-      @page-change="onFollowingsPageChange"
-      checkable
-      checkbox-position="left"
-    >
-      <b-table-column
-        field="targetActor.id"
-        label="ID"
-        width="40"
-        numeric
-        v-slot="props"
-        >{{ props.row.targetActor.id }}</b-table-column
-      >
-
-      <b-table-column
-        field="targetActor.type"
-        :label="$t('Type')"
-        width="80"
-        v-slot="props"
-      >
-        <b-icon
-          icon="lan"
-          v-if="RelayMixin.isInstance(props.row.targetActor)"
-        />
-        <b-icon icon="account-circle" v-else />
-      </b-table-column>
-
-      <b-table-column
-        field="approved"
-        :label="$t('Status')"
-        width="100"
-        sortable
-        centered
-        v-slot="props"
-      >
-        <span
-          :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
-          >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
-        >
-      </b-table-column>
-
-      <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
-        <template v-slot:default="props">
-          <a
-            @click="toggle(props.row)"
-            v-if="RelayMixin.isInstance(props.row.targetActor)"
-            >{{ props.row.targetActor.domain }}</a
-          >
-          <a @click="toggle(props.row)" v-else>{{
-            `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
-          }}</a>
-        </template>
-      </b-table-column>
-
-      <b-table-column
-        field="targetActor.updatedAt"
-        :label="$t('Date')"
-        sortable
-        v-slot="props"
-      >
-        <span
-          :title="$options.filters.formatDateTimeString(props.row.updatedAt)"
-          >{{
-            formatDistanceToNow(new Date(props.row.updatedAt), {
-              locale: $dateFnsLocale,
-            })
-          }}</span
-        ></b-table-column
-      >
-
-      <template #detail="props">
-        <article>
-          <div class="content">
-            <strong>{{ props.row.targetActor.name }}</strong>
-            <small v-if="props.row.actor.preferredUsername !== 'relay'"
-              >@{{ props.row.targetActor.preferredUsername }}</small
-            >
-            <p v-html="props.row.targetActor.summary" />
-          </div>
-        </article>
-      </template>
-
-      <template slot="bottom-left" v-if="checkedRows.length > 0">
-        <b-button @click="removeRelays" type="is-danger">
-          {{
-            $tc(
-              "No instance to remove|Remove instance|Remove {number} instances",
-              checkedRows.length,
-              { number: checkedRows.length }
-            )
-          }}
-        </b-button>
-      </template>
-    </b-table>
-    <b-message type="is-danger" v-if="relayFollowings.total === 0">{{
-      $t("You don't follow any instances yet.")
-    }}</b-message>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Mixins } from "vue-property-decorator";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
-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, 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,
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class Followings extends Mixins(RelayMixin) {
-  newRelayAddress = "";
-
-  RelayMixin = 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: any) {
-      console.error(err);
-    }
-  }
-
-  async followRelay(e: Event): Promise<void> {
-    e.preventDefault();
-    try {
-      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<{ relayFollowings: Paginate<IFollower> }>,
-          { 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,
-          });
-        },
-      });
-      this.newRelayAddress = "";
-    } catch (err: any) {
-      if (err.message) {
-        Snackbar.open({
-          message: err.message,
-          type: "is-danger",
-          position: "is-bottom",
-        });
-      }
-    }
-  }
-
-  removeRelays(): void {
-    this.checkedRows.forEach((row: IFollower) => {
-      this.removeRelay(row);
-    });
-  }
-
-  async removeRelay(follower: IFollower): Promise<void> {
-    const address = `${follower.targetActor.preferredUsername}@${follower.targetActor.domain}`;
-    try {
-      await this.$apollo.mutate<{ removeRelay: IFollower }>({
-        mutation: REMOVE_RELAY,
-        variables: {
-          address,
-        },
-        update(cache: ApolloCache<{ removeRelay: IFollower }>) {
-          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 = [];
-    } catch (e: any) {
-      if (e.message) {
-        Snackbar.open({
-          message: e.message,
-          type: "is-danger",
-          position: "is-bottom",
-        });
-      }
-    }
-  }
-}
-</script>

js/src/components/Comment/Comment.vue

@@ -63,7 +63,12 @@
             </button>
           </span>
           <br />
-          <div v-if="!comment.deletedAt" v-html="comment.text" dir="auto" />
+          <div
+            v-if="!comment.deletedAt"
+            v-html="comment.text"
+            dir="auto"
+            :lang="comment.language"
+          />
           <div v-else>{{ $t("[This comment has been deleted]") }}</div>
           <div class="load-replies" v-if="comment.totalReplies">
             <p v-if="!showReplies" @click="fetchReplies">
@@ -299,6 +304,10 @@ export default class Comment extends Vue {
         onConfirm: this.reportComment,
         outsideDomain: this.comment.actor.domain,
       },
+      // https://github.com/buefy/buefy/pull/3589
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      closeButtonAriaLabel: this.$t("Close"),
     });
   }
 

js/src/components/Comment/CommentTree.vue

@@ -45,8 +45,8 @@
             type="is-primary"
             class="comment-button-submit"
             icon-left="send"
-            :aria-label="$t('Post a comment')"
-          />
+            >{{ $t("Send") }}</b-button
+          >
         </div>
       </article>
     </form>
@@ -63,7 +63,7 @@
       <transition-group
         key="list"
         name="comment-list"
-        v-if="comments.length"
+        v-if="filteredOrderedComments.length"
         class="comment-list"
         tag="ul"
       >
@@ -77,9 +77,9 @@
           @delete-comment="deleteComment"
         />
       </transition-group>
-      <div v-else class="no-comments" key="no-comments">
+      <empty-content v-else icon="comment" key="no-comments" :inline="true">
         <span>{{ $t("No comments yet") }}</span>
-      </div>
+      </empty-content>
     </transition-group>
   </div>
 </template>
@@ -99,6 +99,7 @@ import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson } from "../../types/actor";
 import { IEvent } from "../../types/event.model";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
 
 @Component({
   apollo: {
@@ -119,6 +120,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
   components: {
     Comment,
     IdentityPickerWrapper,
+    EmptyContent,
     editor: () =>
       import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
@@ -364,21 +366,34 @@ export default class CommentTree extends Vue {
 
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
+@import "~bulma/sass/utilities/mixins.sass";
 form.new-comment {
   padding-bottom: 1rem;
 
-  .media-content {
-    display: flex;
-    align-items: center;
-    align-content: center;
+  .media {
+    flex-wrap: wrap;
+    justify-content: center;
+    .media-left {
+      @include mobile {
+        @include margin-right(0.5rem);
+        @include margin-left(0.5rem);
+      }
+    }
 
-    .field {
-      flex: 1;
-      @include padding-right(10px);
-      margin-bottom: 0;
+    .media-content {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      width: min-content;
 
-      &.notify-participants {
-        margin-top: 0.5rem;
+      .field {
+        flex: 1;
+        @include padding-right(10px);
+        margin-bottom: 0;
+
+        &.notify-participants {
+          margin-top: 0.5rem;
+        }
       }
     }
   }

js/src/components/Discussion/DiscussionComment.vue

@@ -145,8 +145,10 @@ export default class DiscussionComment extends Vue {
   }
 
   updateComment(): void {
-    this.comment.text = this.updatedComment;
-    this.$emit("update-comment", this.comment);
+    this.$emit("update-comment", {
+      ...this.comment,
+      text: this.updatedComment,
+    });
     this.toggleEditMode();
   }
 }

js/src/components/Editor.vue

@@ -195,10 +195,18 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-2";
-import StarterKit from "@tiptap/starter-kit";
+import Blockquote from "@tiptap/extension-blockquote";
+import BulletList from "@tiptap/extension-bullet-list";
+import Heading from "@tiptap/extension-heading";
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
 import Text from "@tiptap/extension-text";
+import Dropcursor from "@tiptap/extension-dropcursor";
+import Gapcursor from "@tiptap/extension-gapcursor";
+import History from "@tiptap/extension-history";
 import { IActor, IPerson, usernameWithDomain } from "../types/actor";
 import CustomImage from "./Editor/Image";
 import { UPLOAD_MEDIA } from "../graphql/upload";
@@ -210,8 +218,8 @@ import OrderedList from "@tiptap/extension-ordered-list";
 import ListItem from "@tiptap/extension-list-item";
 import Underline from "@tiptap/extension-underline";
 import Link from "@tiptap/extension-link";
-import CharacterCount from "@tiptap/extension-character-count";
 import { AutoDir } from "./Editor/Autodir";
+import sanitizeHtml from "sanitize-html";
 
 @Component({
   components: { EditorContent, BubbleMenu },
@@ -265,9 +273,12 @@ export default class EditorComponent extends Vue {
           "aria-label": this.ariaLabel,
           role: "textbox",
         },
+        transformPastedHTML: this.transformPastedHTML,
       },
       extensions: [
-        StarterKit,
+        Blockquote,
+        BulletList,
+        Heading,
         Document,
         Paragraph,
         Text,
@@ -277,12 +288,15 @@ export default class EditorComponent extends Vue {
         CustomImage,
         AutoDir,
         Underline,
+        Bold,
+        Italic,
+        Strike,
+        Dropcursor,
+        Gapcursor,
+        History,
         Link.configure({
           HTMLAttributes: { target: "_blank", rel: "noopener noreferrer ugc" },
         }),
-        CharacterCount.configure({
-          limit: this.maxSize,
-        }),
       ],
       injectCSS: false,
       content: this.value,
@@ -292,6 +306,19 @@ export default class EditorComponent extends Vue {
     });
   }
 
+  transformPastedHTML(html: string): string {
+    // When using comment mode, limit to acceptable tags
+    if (this.isCommentMode) {
+      return sanitizeHtml(html, {
+        allowedTags: ["b", "i", "em", "strong", "a"],
+        allowedAttributes: {
+          a: ["href", "rel", "target"],
+        },
+      });
+    }
+    return html;
+  }
+
   @Watch("value")
   onValueChanged(val: string): void {
     if (!this.editor) return;

js/src/components/Editor/Mention.ts

@@ -7,6 +7,8 @@ import apolloProvider from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
 import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
+import { MentionOptions } from "@tiptap/extension-mention";
+import { Editor } from "@tiptap/core";
 
 const client =
   apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
@@ -24,13 +26,21 @@ const fetchItems = async (query: string): Promise<IPerson[]> => {
 
 const debouncedFetchItems = pDebounce(fetchItems, 200);
 
-const mentionOptions: Partial<any> = {
+const mentionOptions: MentionOptions = {
   HTMLAttributes: {
     class: "mention",
     dir: "ltr",
   },
+  renderLabel({ options, node }) {
+    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+  },
   suggestion: {
-    items: async (query: string): Promise<IPerson[]> => {
+    items: async ({
+      query,
+    }: {
+      query: string;
+      editor: Editor;
+    }): Promise<IPerson[]> => {
       if (query === "") {
         return [];
       }
@@ -70,8 +80,12 @@ const mentionOptions: Partial<any> = {
           return component.ref?.onKeyDown(props);
         },
         onExit() {
-          popup[0].destroy();
-          component.destroy();
+          if (popup && popup[0]) {
+            popup[0].destroy();
+          }
+          if (component) {
+            component.destroy();
+          }
         },
       };
     },

js/src/components/Editor/MentionList.vue

@@ -7,7 +7,7 @@
       :key="index"
       @click="selectItem(index)"
     >
-      <actor-card :actor="item" />
+      <actor-inline :actor="item" />
     </button>
   </div>
 </template>
@@ -16,11 +16,11 @@
 import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
 import { IPerson } from "@/types/actor";
-import ActorCard from "../../components/Account/ActorCard.vue";
+import ActorInline from "../../components/Account/ActorInline.vue";
 
 @Component({
   components: {
-    ActorCard,
+    ActorInline,
   },
 })
 export default class MentionList extends Vue {

js/src/components/Editor/style.scss

@@ -5,10 +5,14 @@
 
 .ProseMirror {
   position: relative;
+}
+.ProseMirror {
   word-wrap: break-word;
   white-space: pre-wrap;
+  white-space: break-spaces;
   -webkit-font-variant-ligatures: none;
   font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
 
   & [contenteditable="false"] {
     white-space: normal;
@@ -16,14 +20,22 @@
   & [contenteditable="false"] [contenteditable="true"] {
     white-space: pre-wrap;
   }
-  pre {
+  & pre {
     white-space: pre-wrap;
   }
 }
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+}
 .ProseMirror-gapcursor {
   display: none;
   pointer-events: none;
   position: absolute;
+  margin: 0;
 
   &:after {
     content: "";
@@ -40,16 +52,17 @@
     visibility: hidden;
   }
 }
-.ProseMirror-hideselection * {
-  &::selection {
+.ProseMirror-hideselection {
+  *::selection {
     background: transparent;
   }
-  &::-moz-selection {
+  *::-moz-selection {
     background: transparent;
   }
-  caret-color: transparent;
+  * {
+    caret-color: transparent;
+  }
 }
-
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
 }

js/src/components/Error.vue

@@ -48,13 +48,75 @@
               $t("Mobilizon")
             }}</a>
           </i18n>
-          {{
-            $t(
-              "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
-            )
-          }}
+          <span v-if="sentryEnabled && sentryReady">
+            {{
+              $t(
+                "We collect your feedback and the error information in order to improve this service."
+              )
+            }}</span
+          >
+          <span v-else>
+            {{
+              $t(
+                "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
+              )
+            }}
+          </span>
         </p>
-        <div class="content">
+        <form
+          v-if="sentryEnabled && sentryReady && !submittedFeedback"
+          @submit.prevent="sendErrorToSentry"
+        >
+          <b-field :label="$t('What happened?')" label-for="what-happened">
+            <b-input
+              v-model="feedback"
+              type="textarea"
+              id="what-happened"
+              :placeholder="$t(`I've clicked on X, then on Y`)"
+            />
+          </b-field>
+          <b-button icon-left="send" native-type="submit" type="is-primary">{{
+            $t("Send feedback")
+          }}</b-button>
+          <p class="content">
+            {{
+              $t(
+                "Please add as many details as possible to help identify the problem."
+              )
+            }}
+          </p>
+        </form>
+        <b-message type="is-danger" v-else-if="feedbackError">
+          <p>
+            {{
+              $t(
+                "Sorry, we wen't able to save your feedback. Don't worry, we'll try to fix this issue anyway."
+              )
+            }}
+          </p>
+          <i18n path="You may now close this page or {return_to_the_homepage}.">
+            <template #return_to_the_homepage>
+              <router-link :to="{ name: RouteName.HOME }">{{
+                $t("return to the homepage")
+              }}</router-link>
+            </template>
+          </i18n>
+        </b-message>
+        <b-message type="is-success" v-else-if="submittedFeedback">
+          <p>{{ $t("Thanks a lot, your feedback was submitted!") }}</p>
+          <i18n path="You may now close this page or {return_to_the_homepage}.">
+            <template #return_to_the_homepage>
+              <router-link :to="{ name: RouteName.HOME }">{{
+                $t("return to the homepage")
+              }}</router-link>
+            </template>
+          </i18n>
+        </b-message>
+        <div
+          class="content"
+          v-if="!(sentryEnabled && sentryReady) || submittedFeedback"
+        >
+          <p v-if="submittedFeedback">{{ $t("You may also:") }}</p>
           <ul>
             <li>
               <a
@@ -65,7 +127,7 @@
             </li>
             <li>
               <a
-                href="https://framagit.org/framasoft/mobilizon/-/issues/new?issuable_template=Bug"
+                href="https://framagit.org/framasoft/mobilizon/-/issues/"
                 target="_blank"
                 >{{
                   $t("Open an issue on our bug tracker (advanced users)")
@@ -74,7 +136,7 @@
             </li>
           </ul>
         </div>
-        <p class="content">
+        <p class="content" v-if="!sentryEnabled">
           {{
             $t(
               "Please add as many details as possible to help identify the problem."
@@ -89,14 +151,14 @@
           <p>{{ $t("Error stacktrace") }}</p>
           <pre>{{ error.stack }}</pre>
         </details>
-        <p>
+        <p v-if="!sentryEnabled">
           {{
             $t(
               "The technical details of the error can help developers solve the problem more easily. Please add them to your feedback."
             )
           }}
         </p>
-        <div class="buttons">
+        <div class="buttons" v-if="!sentryEnabled">
           <b-tooltip
             :label="tooltipConfig.label"
             :type="tooltipConfig.type"
@@ -115,14 +177,20 @@
   </div>
 </template>
 <script lang="ts">
-import { CONTACT } from "@/graphql/config";
+import { CONFIG } from "@/graphql/config";
+import { checkProviderConfig, convertConfig } from "@/services/statistics";
+import { IAnalyticsConfig, IConfig } from "@/types/config.model";
 import { Component, Prop, Vue } from "vue-property-decorator";
+import { LOGGED_USER } from "@/graphql/user";
+import { IUser } from "@/types/current-user.model";
+import { ISentryConfiguration } from "@/types/analytics/sentry.model";
+import { submitFeedback } from "@/services/statistics/sentry";
+import RouteName from "@/router/name";
 
 @Component({
   apollo: {
-    config: {
-      query: CONTACT,
-    },
+    config: CONFIG,
+    loggedUser: LOGGED_USER,
   },
   metaInfo() {
     return {
@@ -138,7 +206,17 @@ export default class ErrorComponent extends Vue {
 
   copied: "success" | "error" | false = false;
 
-  config!: { contact: string | null; name: string };
+  config!: IConfig;
+
+  feedback = "";
+
+  submittedFeedback = false;
+
+  feedbackError = false;
+
+  loggedUser!: IUser;
+
+  RouteName = RouteName;
 
   async copyErrorToClipboard(): Promise<void> {
     try {
@@ -193,6 +271,56 @@ export default class ErrorComponent extends Vue {
 
     document.body.removeChild(textArea);
   }
+
+  get sentryEnabled(): boolean {
+    return this.sentryProvider?.enabled === true;
+  }
+
+  get sentryProvider(): IAnalyticsConfig | undefined {
+    return this.config && checkProviderConfig(this.config, "sentry");
+  }
+
+  get sentryConfig(): ISentryConfiguration | undefined {
+    if (this.sentryProvider?.configuration) {
+      return convertConfig(
+        this.sentryProvider?.configuration
+      ) as ISentryConfiguration;
+    }
+    return undefined;
+  }
+
+  get sentryReady() {
+    const eventId = window.sessionStorage.getItem("lastEventId");
+    const dsn = this.sentryConfig?.dsn;
+    const organization = this.sentryConfig?.organization;
+    const project = this.sentryConfig?.project;
+    const host = this.sentryConfig?.host;
+    return eventId && dsn && organization && project && host;
+  }
+
+  async sendErrorToSentry() {
+    try {
+      const eventId = window.sessionStorage.getItem("lastEventId");
+      const dsn = this.sentryConfig?.dsn;
+      const organization = this.sentryConfig?.organization;
+      const project = this.sentryConfig?.project;
+      const host = this.sentryConfig?.host;
+      const endpoint = `https://${host}/api/0/projects/${organization}/${project}/user-feedback/`;
+      if (eventId && dsn && this.sentryReady) {
+        await submitFeedback(endpoint, dsn, {
+          event_id: eventId,
+          name:
+            this.loggedUser?.defaultActor?.preferredUsername || "Unknown user",
+          email: this.loggedUser?.email || "unknown@email.org",
+          comments: this.feedback,
+        });
+        this.submittedFeedback = true;
+      }
+    } catch (error) {
+      console.error(error);
+      this.feedbackError = true;
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Event/EventCard.vue

@@ -39,7 +39,12 @@
           />
         </div>
         <div class="media-content">
-          <h3 class="event-title" :title="event.title" dir="auto">
+          <h3
+            class="event-title"
+            :title="event.title"
+            dir="auto"
+            :lang="event.language"
+          >
             {{ event.title }}
           </h3>
           <div class="content-end">
@@ -62,7 +67,6 @@
             <inline-address
               dir="auto"
               v-if="event.physicalAddress"
-              class="event-subtitle"
               :physical-address="event.physicalAddress"
             />
             <div
@@ -183,16 +187,22 @@ a.card {
 
     a {
       text-decoration: none;
+    }
 
-      span.tag {
-        margin: 5px auto;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: block;
-        font-size: 0.9em;
-        line-height: 1.75em;
+    span.tag {
+      margin: 5px auto;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: block;
+      font-size: 0.9em;
+      line-height: 1.75em;
+
+      &:not(.is-info, .is-danger) {
         background-color: #e6e4f4;
-        color: #3c376e;
+        color: $violet-3;
+      }
+      &.is-info {
+        color: $violet-3;
       }
     }
   }
@@ -243,10 +253,13 @@ a.card {
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
-      padding-bottom: 8px;
       font-weight: bold;
     }
 
+    .content-end {
+      padding-top: 8px;
+    }
+
     .event-subtitle {
       font-size: 0.85rem;
     }

js/src/components/Event/EventFullDate.vue

@@ -111,6 +111,7 @@
   </p>
 </template>
 <script lang="ts">
+import { getTimezoneOffset } from "date-fns-tz";
 import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
@@ -168,15 +169,20 @@ export default class EventFullDate extends Vue {
 
   isSameDay(): boolean {
     const sameDay =
-      new Date(this.beginsOn).toDateString() ===
-      new Date(this.endsOn).toDateString();
+      this.beginsOnDate.toDateString() === new Date(this.endsOn).toDateString();
     return this.endsOn !== undefined && sameDay;
   }
 
+  get beginsOnDate(): Date {
+    return new Date(this.beginsOn);
+  }
+
   get differentFromUserTimezone(): boolean {
     return (
       !!this.timezone &&
       !!this.userActualTimezone &&
+      getTimezoneOffset(this.timezone, this.beginsOnDate) !==
+        getTimezoneOffset(this.userActualTimezone, this.beginsOnDate) &&
       this.timezone !== this.userActualTimezone
     );
   }

js/src/components/Event/EventMetadataBlock.vue

@@ -45,6 +45,7 @@ div.eventMetadataBlock {
   .content-wrapper {
     overflow: hidden;
     width: 100%;
+    max-width: calc(100vw - 32px - 20px);
 
     &.padding-left {
       padding: 0 20px;

js/src/components/Event/EventMetadataList.vue

@@ -16,6 +16,7 @@
     >
       <b-autocomplete
         expanded
+        :clear-on-select="true"
         v-model="search"
         ref="autocomplete"
         :data="filteredDataArray"
@@ -62,7 +63,11 @@
         </b-button>
       </p>
     </b-field>
-    <b-modal has-modal-card v-model="showNewElementModal">
+    <b-modal
+      has-modal-card
+      v-model="showNewElementModal"
+      :close-button-aria-label="$t('Close')"
+    >
       <div class="modal-card">
         <header class="modal-card-head">
           <button
@@ -136,7 +141,10 @@ export default class EventMetadataList extends Vue {
   }
 
   set metadata(metadata: IEventMetadata[]) {
-    this.$emit("input", metadata);
+    this.$emit(
+      "input",
+      metadata.filter((elem) => elem)
+    );
   }
 
   localizedCategories: Record<EventMetadataCategories, string> = {

js/src/components/Event/EventMetadataSidebar.vue

@@ -34,14 +34,9 @@
       class="metadata-organized-by"
       :title="$t('Organized by')"
     >
-      <popover-actor-card
-        :actor="event.organizerActor"
-        v-if="!event.attributedTo"
-      >
-        <actor-card :actor="event.organizerActor" />
-      </popover-actor-card>
       <router-link
         v-if="event.attributedTo"
+        class="hover:underline"
         :to="{
           name: RouteName.GROUP,
           params: {
@@ -49,23 +44,21 @@
           },
         }"
       >
-        <popover-actor-card
-          :actor="event.attributedTo"
+        <actor-card
           v-if="
             !event.attributedTo || !event.options.hideOrganizerWhenGroupEvent
           "
-        >
-          <actor-card :actor="event.attributedTo" />
-        </popover-actor-card>
+          :actor="event.attributedTo"
+          :inline="true"
+        />
       </router-link>
-
-      <popover-actor-card
+      <actor-card v-else :actor="event.organizerActor" :inline="true" />
+      <actor-card
+        :inline="true"
         :actor="contact"
         v-for="contact in event.contacts"
         :key="contact.id"
-      >
-        <actor-card :actor="contact" />
-      </popover-actor-card>
+      />
     </event-metadata-block>
     <event-metadata-block
       v-if="event.onlineAddress && urlToHostname(event.onlineAddress)"
@@ -74,6 +67,7 @@
     >
       <a
         target="_blank"
+        class="hover:underline"
         rel="noopener noreferrer ugc"
         :href="event.onlineAddress"
         :title="

js/src/components/Event/EventMinimalistCard.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link
-    class="event-minimalist-card-wrapper"
+    class="event-minimalist-card-wrapper bg-white rounded-lg shadow-md"
     dir="auto"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
@@ -17,7 +17,21 @@
       </div>
     </div>
     <div class="title-info-wrapper has-text-grey-dark">
-      <h3 class="event-minimalist-title">
+      <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
+        <b-tag
+          type="is-info"
+          class="mr-1"
+          v-if="event.status === EventStatus.TENTATIVE"
+        >
+          {{ $t("Tentative") }}
+        </b-tag>
+        <b-tag
+          type="is-danger"
+          class="mr-1"
+          v-if="event.status === EventStatus.CANCELLED"
+        >
+          {{ $t("Cancelled") }}
+        </b-tag>
         <b-tag
           class="mr-2"
           type="is-warning"
@@ -105,7 +119,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { ParticipantRole } from "@/types/enums";
+import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
@@ -129,6 +143,8 @@ export default class EventMinimalistCard extends Vue {
   organizerDisplayName = organizerDisplayName;
 
   organizer = organizer;
+
+  EventStatus = EventStatus;
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Event/EventParticipationCard.vue

@@ -45,13 +45,31 @@
         </div>
         <div class="list-card-content">
           <div class="title-wrapper" dir="auto">
+            <b-tag
+              type="is-info"
+              class="mr-1 mb-1"
+              size="is-medium"
+              v-if="participation.event.status === EventStatus.TENTATIVE"
+            >
+              {{ $t("Tentative") }}
+            </b-tag>
+            <b-tag
+              type="is-danger"
+              class="mr-1 mb-1"
+              size="is-medium"
+              v-if="participation.event.status === EventStatus.CANCELLED"
+            >
+              {{ $t("Cancelled") }}
+            </b-tag>
             <router-link
               :to="{
                 name: RouteName.EVENT,
                 params: { uuid: participation.event.uuid },
               }"
             >
-              <h3 class="title">{{ participation.event.title }}</h3>
+              <h3 class="title" :lang="participation.event.language">
+                {{ participation.event.title }}
+              </h3>
             </router-link>
           </div>
           <inline-address
@@ -255,7 +273,7 @@ import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { mixins } from "vue-class-component";
 import { RawLocation, Route } from "vue-router";
-import { EventVisibility, ParticipantRole } from "@/types/enums";
+import { EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
 import {
   IEventCardOptions,
@@ -324,6 +342,8 @@ export default class EventParticipationCard extends mixins(
 
   RouteName = RouteName;
 
+  EventStatus = EventStatus;
+
   get mergedOptions(): IEventCardOptions {
     return { ...defaultOptions, ...this.options };
   }

js/src/components/Event/FullAddressAutoComplete.vue

@@ -9,19 +9,19 @@
       >
         <template slot="label">
           {{ actualLabel }}
+          <span
+            class="is-size-6 has-text-weight-normal"
+            v-if="gettingLocation"
+            >{{ $t("Getting location") }}</span
+          >
+        </template>
+        <p class="control" v-if="canShowLocateMeButton && !gettingLocation">
           <b-button
-            v-if="canShowLocateMeButton && !gettingLocation"
-            size="is-small"
             icon-right="map-marker"
             @click="locateMe"
             :title="$t('Use my location')"
           />
-          <span
-            class="is-size-6 has-text-weight-normal"
-            v-else-if="gettingLocation"
-            >{{ $t("Getting location") }}</span
-          >
-        </template>
+        </p>
         <b-autocomplete
           :data="addressData"
           v-model="queryText"
@@ -29,7 +29,7 @@
           field="fullName"
           :loading="isFetching"
           @typing="fetchAsyncData"
-          icon="map-marker"
+          :icon="canShowLocateMeButton ? null : 'map-marker'"
           expanded
           @select="updateSelected"
           v-bind="$attrs"
@@ -71,7 +71,10 @@
           :title="$t('Clear address field')"
         />
       </b-field>
-      <div class="card" v-if="selected.originId || selected.url">
+      <div
+        class="card"
+        v-if="!hideSelected && (selected.originId || selected.url)"
+      >
         <div class="card-content">
           <address-info
             :address="selected"
@@ -119,6 +122,8 @@ export default class FullAddressAutoComplete extends Mixins(
   @Prop({ required: false }) userTimezone!: string;
   @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
   @Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
+  @Prop({ required: false, default: false, type: Boolean })
+  hideSelected!: boolean;
 
   addressModalActive = false;
 

js/src/components/Event/OrganizerPicker.vue

@@ -5,33 +5,48 @@
       :placeholder="$t('Filter by profile or group name')"
       v-model="actorFilter"
     />
-    <b-radio-button
-      v-model="selectedActor"
-      :native-value="availableActor"
-      class="list-item"
-      v-for="availableActor in actualFilteredAvailableActors"
-      :key="availableActor.id"
+    <transition-group
+      tag="ul"
+      class="grid grid-cols-1 gap-y-3 m-5 max-w-md mx-auto"
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="transform opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="transform opacity-0"
     >
-      <div class="media" dir="auto">
-        <figure class="image is-48x48" v-if="availableActor.avatar">
-          <img
-            class="media-left is-rounded"
-            :src="availableActor.avatar.url"
-            alt=""
-          />
-        </figure>
-        <b-icon
-          class="media-left"
-          v-else
-          size="is-large"
-          icon="account-circle"
+      <li
+        class="relative focus-within:shadow-lg"
+        v-for="availableActor in actualFilteredAvailableActors"
+        :key="availableActor.id"
+      >
+        <input
+          class="sr-only peer"
+          type="radio"
+          :value="availableActor"
+          name="availableActors"
+          v-model="selectedActor"
+          :id="`availableActor-${availableActor.id}`"
         />
-        <div class="media-content">
-          <h3>{{ availableActor.name }}</h3>
-          <small>{{ `@${availableActor.preferredUsername}` }}</small>
-        </div>
-      </div>
-    </b-radio-button>
+        <label
+          class="flex flex-wrap p-3 bg-white border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
+          :for="`availableActor-${availableActor.id}`"
+        >
+          <figure class="image is-48x48" v-if="availableActor.avatar">
+            <img
+              class="image is-rounded"
+              :src="availableActor.avatar.url"
+              alt=""
+            />
+          </figure>
+          <b-icon v-else size="is-large" icon="account-circle" />
+          <div>
+            <h3>{{ availableActor.name }}</h3>
+            <small>{{ `@${availableActor.preferredUsername}` }}</small>
+          </div>
+        </label>
+      </li>
+    </transition-group>
   </div>
 </template>
 <script lang="ts">
@@ -51,6 +66,13 @@ import { MemberRole } from "@/types/enums";
     groupMemberships: {
       query: LOGGED_USER_MEMBERSHIPS,
       update: (data) => data.loggedUser.memberships,
+      variables() {
+        return {
+          page: 1,
+          limit: 10,
+          membershipName: this.actorFilter,
+        };
+      },
     },
     identities: IDENTITIES,
     currentActor: CURRENT_ACTOR_CLIENT,

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="organizer-picker" v-if="selectedActor">
+  <div
+    class="bg-white border border-gray-300 rounded-lg cursor-pointer"
+    v-if="selectedActor"
+  >
     <!-- If we have a current actor (inline) -->
     <div
       v-if="inline && selectedActor.id"
@@ -46,7 +49,11 @@
       />
       <b-icon v-else size="is-large" icon="account-circle" />
     </span>
-    <b-modal :active.sync="isComponentModalActive" has-modal-card>
+    <b-modal
+      :active.sync="isComponentModalActive"
+      has-modal-card
+      :close-button-aria-label="$t('Close')"
+    >
       <div class="modal-card">
         <header class="modal-card-head">
           <p class="modal-card-title">{{ $t("Pick a profile or a group") }}</p>
@@ -61,42 +68,61 @@
               />
             </div>
             <div class="column contact-picker">
-              <div v-if="isSelectedActorAGroup && actorMembers.length > 0">
+              <div v-if="isSelectedActorAGroup">
                 <p>{{ $t("Add a contact") }}</p>
                 <b-input
                   :placeholder="$t('Filter by name')"
-                  v-model="contactFilter"
+                  :value="contactFilter"
+                  @input="debounceSetFilterByName"
                   dir="auto"
                 />
-                <p
-                  class="field"
-                  v-for="actor in filteredActorMembers"
-                  :key="actor.id"
-                >
-                  <b-checkbox v-model="actualContacts" :native-value="actor.id">
-                    <div class="media">
-                      <div class="media-left">
-                        <figure class="image is-48x48" v-if="actor.avatar">
-                          <img
-                            class="image is-rounded"
-                            :src="actor.avatar.url"
-                            :alt="actor.avatar.alt"
+                <div v-if="actorMembers.length > 0">
+                  <p
+                    class="field"
+                    v-for="actor in filteredActorMembers"
+                    :key="actor.id"
+                  >
+                    <b-checkbox
+                      v-model="actualContacts"
+                      :native-value="actor.id"
+                    >
+                      <div class="media">
+                        <div class="media-left">
+                          <figure class="image is-48x48" v-if="actor.avatar">
+                            <img
+                              class="image is-rounded"
+                              :src="actor.avatar.url"
+                              :alt="actor.avatar.alt"
+                            />
+                          </figure>
+                          <b-icon
+                            v-else
+                            size="is-large"
+                            icon="account-circle"
                           />
-                        </figure>
-                        <b-icon v-else size="is-large" icon="account-circle" />
-                      </div>
-                      <div class="media-content" v-if="actor.name">
-                        <p class="is-4">{{ actor.name }}</p>
-                        <p class="is-6 has-text-grey-dark">
+                        </div>
+                        <div class="media-content" v-if="actor.name">
+                          <p class="is-4">{{ actor.name }}</p>
+                          <p class="is-6 has-text-grey-dark">
+                            {{ `@${usernameWithDomain(actor)}` }}
+                          </p>
+                        </div>
+                        <div class="media-content" v-else>
                           {{ `@${usernameWithDomain(actor)}` }}
-                        </p>
+                        </div>
                       </div>
-                      <div class="media-content" v-else>
-                        {{ `@${usernameWithDomain(actor)}` }}
-                      </div>
-                    </div>
-                  </b-checkbox>
-                </p>
+                    </b-checkbox>
+                  </p>
+                </div>
+                <div
+                  v-else-if="
+                    actorMembers.length === 0 && contactFilter.length > 0
+                  "
+                >
+                  <empty-content icon="account-multiple" :inline="true">
+                    {{ $t("No group member found") }}
+                  </empty-content>
+                </div>
               </div>
               <div v-else class="content has-text-grey-dark has-text-centered">
                 <p>{{ $t("Your profile will be shown as contact.") }}</p>
@@ -118,14 +144,16 @@ import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import { IMember } from "@/types/actor/member.model";
 import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
 import OrganizerPicker from "./OrganizerPicker.vue";
+import EmptyContent from "../Utils/EmptyContent.vue";
 import {
   CURRENT_ACTOR_CLIENT,
   IDENTITIES,
-  LOGGED_USER_MEMBERSHIPS,
+  PERSON_GROUP_MEMBERSHIPS,
 } from "../../graphql/actor";
 import { Paginate } from "../../types/paginate";
 import { GROUP_MEMBERS } from "@/graphql/member";
 import { ActorType, MemberRole } from "@/types/enums";
+import debounce from "lodash/debounce";
 
 const MEMBER_ROLES = [
   MemberRole.CREATOR,
@@ -135,16 +163,17 @@ const MEMBER_ROLES = [
 ];
 
 @Component({
-  components: { OrganizerPicker },
+  components: { OrganizerPicker, EmptyContent },
   apollo: {
     members: {
       query: GROUP_MEMBERS,
       variables() {
         return {
-          name: usernameWithDomain(this.selectedActor),
+          groupName: usernameWithDomain(this.selectedActor),
           page: this.membersPage,
           limit: 10,
           roles: MEMBER_ROLES.join(","),
+          name: this.contactFilter,
         };
       },
       update: (data) => data.group.members,
@@ -155,13 +184,17 @@ const MEMBER_ROLES = [
       },
     },
     currentActor: CURRENT_ACTOR_CLIENT,
-    userMemberships: {
-      query: LOGGED_USER_MEMBERSHIPS,
-      variables: {
-        page: 1,
-        limit: 100,
+    personMemberships: {
+      query: PERSON_GROUP_MEMBERSHIPS,
+      variables() {
+        return {
+          id: this.currentActor?.id,
+          page: 1,
+          limit: 10,
+          groupId: this.$route.query?.actorId,
+        };
       },
-      update: (data) => data.loggedUser.memberships,
+      update: (data) => data.person.memberships,
     },
     identities: IDENTITIES,
   },
@@ -171,6 +204,9 @@ export default class OrganizerPickerWrapper extends Vue {
 
   @Prop({ default: true, type: Boolean }) inline!: boolean;
 
+  @Prop({ type: Array, required: false, default: () => [] })
+  contacts!: IActor[];
+
   currentActor!: IPerson;
 
   identities!: IPerson[];
@@ -181,13 +217,17 @@ export default class OrganizerPickerWrapper extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
-  @Prop({ type: Array, required: false, default: () => [] })
-  contacts!: IActor[];
   members: Paginate<IMember> = { elements: [], total: 0 };
 
   membersPage = 1;
 
-  userMemberships: Paginate<IMember> = { elements: [], total: 0 };
+  personMemberships: Paginate<IMember> = { elements: [], total: 0 };
+
+  data(): Record<string, unknown> {
+    return {
+      debounceSetFilterByName: debounce(this.setContactFilter, 1000),
+    };
+  }
 
   get actualContacts(): (string | undefined)[] {
     return this.contacts.map(({ id }) => id);
@@ -200,15 +240,17 @@ export default class OrganizerPickerWrapper extends Vue {
     );
   }
 
-  @Watch("userMemberships")
+  setContactFilter(contactFilter: string) {
+    this.contactFilter = contactFilter;
+  }
+
+  @Watch("personMemberships")
   setInitialActor(): void {
-    if (this.$route.query?.actorId) {
-      const actorId = this.$route.query?.actorId as string;
-      const actor = this.userMemberships.elements.find(
-        ({ parent: { id }, role }) =>
-          actorId === id && MEMBER_ROLES.includes(role)
-      )?.parent as IActor;
-      this.selectedActor = actor;
+    if (
+      this.personMemberships?.elements[0]?.parent?.id ===
+      this.$route.query?.actorId
+    ) {
+      this.selectedActor = this.personMemberships?.elements[0]?.parent;
     }
   }
 
@@ -250,7 +292,7 @@ export default class OrganizerPickerWrapper extends Vue {
         actor.preferredUsername.toLowerCase(),
         actor.name?.toLowerCase(),
         actor.domain?.toLowerCase(),
-      ].some((match) => match?.includes(this.contactFilter.toLowerCase()));
+      ];
     });
   }
 

js/src/components/Event/ShareEventModal.vue

@@ -190,7 +190,7 @@ export default class ShareEventModal extends Vue {
   }
 
   get mastodonShareUrl(): string {
-    return `https://toot.karamoff.dev/?text=${encodeURIComponent(
+    return `https://toot.kytta.dev/?text=${encodeURIComponent(
       this.basicTextToEncode
     )}`;
   }

js/src/components/Event/TagInput.vue

@@ -21,7 +21,7 @@
       maxlength="20"
       maxtags="10"
       :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
-      @typing="getFilteredTags"
+      @typing="debouncedGetFilteredTags"
       :id="id"
       dir="auto"
     >
@@ -33,6 +33,7 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
 import { FILTER_TAGS } from "@/graphql/tags";
+import debounce from "lodash/debounce";
 
 @Component({
   apollo: {
@@ -63,6 +64,12 @@ export default class TagInput extends Vue {
     return `tag-input-${TagInput.componentId}`;
   }
 
+  data(): Record<string, unknown> {
+    return {
+      debouncedGetFilteredTags: debounce(this.getFilteredTags, 200),
+    };
+  }
+
   async getFilteredTags(text: string): Promise<void> {
     this.text = text;
     await this.$apollo.queries.tags.refetch();

js/src/components/Footer.vue

@@ -49,7 +49,7 @@
         <a
           rel="external"
           hreflang="en"
-          href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE"
+          href="https://framagit.org/framasoft/mobilizon/blob/main/LICENSE"
         >
           {{ $t("License") }}
         </a>

js/src/components/Group/GroupCard.vue

@@ -31,11 +31,11 @@
           </span>
         </div>
       </div>
-      <div class="content mb-2" dir="auto" v-html="group.summary" />
-      <div class="card-custom-footer">
+      <div class="mb-2 line-clamp-3" dir="auto" v-html="group.summary" />
+      <div>
         <inline-address
           class="has-text-grey-dark"
-          v-if="group.physicalAddress"
+          v-if="group.physicalAddress && addressFullName(group.physicalAddress)"
           :physicalAddress="group.physicalAddress"
         />
         <p class="has-text-grey-dark">
@@ -61,6 +61,7 @@ import { displayName, IGroup, usernameWithDomain } from "@/types/actor";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import RouteName from "../../router/name";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
+import { addressFullName } from "@/types/address.model";
 
 @Component({
   components: {
@@ -76,6 +77,8 @@ export default class GroupCard extends Vue {
   usernameWithDomain = usernameWithDomain;
 
   displayName = displayName;
+
+  addressFullName = addressFullName;
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Group/InvitationCard.vue

@@ -1,57 +1,65 @@
 <template>
-  <div class="media">
-    <div class="media-content">
-      <div class="content">
-        <i18n
-          tag="p"
-          path="You have been invited by {invitedBy} to the following group:"
-        >
-          <b slot="invitedBy">{{ member.invitedBy.name }}</b>
-        </i18n>
-      </div>
-      <div class="media subfield">
-        <div class="media-left">
-          <figure class="image is-48x48" v-if="member.parent.avatar">
-            <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
-          </figure>
-          <b-icon v-else size="is-large" icon="account-group" />
+  <div class="card">
+    <div class="card-content media">
+      <div class="media-content">
+        <div class="content">
+          <i18n
+            tag="p"
+            path="You have been invited by {invitedBy} to the following group:"
+          >
+            <b slot="invitedBy">{{ member.invitedBy.name }}</b>
+          </i18n>
         </div>
-        <div class="media-content">
-          <div class="level">
-            <div class="level-left">
-              <div class="level-item">
-                <router-link
-                  :to="{
-                    name: RouteName.GROUP,
-                    params: {
-                      preferredUsername: usernameWithDomain(member.parent),
-                    },
-                  }"
-                >
-                  <h3>{{ member.parent.name }}</h3>
-                  <p class="is-6 has-text-grey">
-                    <span v-if="member.parent.domain">
-                      {{
-                        `@${member.parent.preferredUsername}@${member.parent.domain}`
-                      }}
-                    </span>
-                    <span v-else>{{
-                      `@${member.parent.preferredUsername}`
-                    }}</span>
-                  </p>
-                </router-link>
+        <div class="media subfield">
+          <div class="media-left">
+            <figure class="image is-48x48" v-if="member.parent.avatar">
+              <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
+            </figure>
+            <b-icon v-else size="is-large" icon="account-group" />
+          </div>
+          <div class="media-content">
+            <div class="level">
+              <div class="level-left">
+                <div class="level-item mr-3">
+                  <router-link
+                    :to="{
+                      name: RouteName.GROUP,
+                      params: {
+                        preferredUsername: usernameWithDomain(member.parent),
+                      },
+                    }"
+                  >
+                    <h3 class="is-size-5">{{ member.parent.name }}</h3>
+                    <p class="is-size-7 has-text-grey-dark">
+                      <span v-if="member.parent.domain">
+                        {{
+                          `@${member.parent.preferredUsername}@${member.parent.domain}`
+                        }}
+                      </span>
+                      <span v-else>{{
+                        `@${member.parent.preferredUsername}`
+                      }}</span>
+                    </p>
+                  </router-link>
+                </div>
               </div>
-            </div>
-            <div class="level-right">
-              <div class="level-item">
-                <b-button type="is-success" @click="$emit('accept', member.id)">
-                  {{ $t("Accept") }}
-                </b-button>
-              </div>
-              <div class="level-item">
-                <b-button type="is-danger" @click="$emit('reject', member.id)">
-                  {{ $t("Decline") }}
-                </b-button>
+              <div class="level-right">
+                <div class="level-item">
+                  <b-button
+                    type="is-success"
+                    @click="$emit('accept', member.id)"
+                  >
+                    {{ $t("Accept") }}
+                  </b-button>
+                </div>
+                <div class="level-item">
+                  <b-button
+                    type="is-danger"
+                    @click="$emit('reject', member.id)"
+                  >
+                    {{ $t("Decline") }}
+                  </b-button>
+                </div>
               </div>
             </div>
           </div>
@@ -82,4 +90,7 @@ export default class InvitationCard extends Vue {
   background: lighten($primary, 40%);
   padding: 10px;
 }
+h3 {
+  color: $violet-3;
+}
 </style>

js/src/components/Group/Invitations.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="invitations && invitations.length > 0">
+  <section class="card my-3" v-if="invitations && invitations.length > 0">
     <InvitationCard
       v-for="member in invitations"
       :key="member.id"
@@ -13,8 +13,9 @@
 import { ACCEPT_INVITATION, REJECT_INVITATION } from "@/graphql/member";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import InvitationCard from "@/components/Group/InvitationCard.vue";
-import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
+import { PERSON_STATUS_GROUP } from "@/graphql/actor";
 import { IMember } from "@/types/actor/member.model";
+import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
 
 @Component({
   components: {
@@ -26,18 +27,25 @@ export default class Invitations extends Vue {
 
   async acceptInvitation(id: string): Promise<void> {
     try {
-      const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>(
-        {
-          mutation: ACCEPT_INVITATION,
-          variables: {
-            id,
-          },
-          refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
-        }
-      );
-      if (data) {
-        this.$emit("accept-invitation", data.acceptInvitation);
-      }
+      await this.$apollo.mutate<{ acceptInvitation: IMember }>({
+        mutation: ACCEPT_INVITATION,
+        variables: {
+          id,
+        },
+        refetchQueries({ data }) {
+          const profile = data?.acceptInvitation?.actor as IPerson;
+          const group = data?.acceptInvitation?.parent as IGroup;
+          if (profile && group) {
+            return [
+              {
+                query: PERSON_STATUS_GROUP,
+                variables: { id: profile.id, group: usernameWithDomain(group) },
+              },
+            ];
+          }
+          return [];
+        },
+      });
     } catch (error: any) {
       console.error(error);
       if (error.graphQLErrors && error.graphQLErrors.length > 0) {
@@ -48,18 +56,25 @@ export default class Invitations extends Vue {
 
   async rejectInvitation(id: string): Promise<void> {
     try {
-      const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>(
-        {
-          mutation: REJECT_INVITATION,
-          variables: {
-            id,
-          },
-          refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
-        }
-      );
-      if (data) {
-        this.$emit("reject-invitation", data.rejectInvitation);
-      }
+      await this.$apollo.mutate<{ rejectInvitation: IMember }>({
+        mutation: REJECT_INVITATION,
+        variables: {
+          id,
+        },
+        refetchQueries({ data }) {
+          const profile = data?.rejectInvitation?.actor as IPerson;
+          const group = data?.rejectInvitation?.parent as IGroup;
+          if (profile && group) {
+            return [
+              {
+                query: PERSON_STATUS_GROUP,
+                variables: { id: profile.id, group: usernameWithDomain(group) },
+              },
+            ];
+          }
+          return [];
+        },
+      });
     } catch (error: any) {
       console.error(error);
       if (error.graphQLErrors && error.graphQLErrors.length > 0) {

js/src/components/Group/JoinGroupWithAccount.vue

@@ -10,7 +10,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
 import { FETCH_GROUP } from "@/graphql/group";
-import { IGroup } from "@/types/actor";
+import { displayName, IGroup } from "@/types/actor";
 
 @Component({
   components: { RedirectWithAccount },
@@ -52,7 +52,7 @@ export default class JoinGroupWithAccount extends Vue {
   }
 
   get groupTitle(): undefined | string {
-    return this.group?.name || this.group?.preferredUsername;
+    return this.group && displayName(this.group);
   }
 
   sentence = this.$t(

js/src/components/Group/ShareGroupModal.vue

@@ -117,7 +117,7 @@ import { Component, Prop, Vue, Ref } from "vue-property-decorator";
 import { GroupVisibility } from "@/types/enums";
 import DiasporaLogo from "../Share/DiasporaLogo.vue";
 import MastodonLogo from "../Share/MastodonLogo.vue";
-import TelegramLogo from "../Share/MastodonLogo.vue";
+import TelegramLogo from "../Share/TelegramLogo.vue";
 import { displayName, IGroup } from "@/types/actor";
 
 @Component({
@@ -177,7 +177,7 @@ export default class ShareGroupModal extends Vue {
   }
 
   get mastodonShareUrl(): string {
-    return `https://toot.karamoff.dev/?text=${encodeURIComponent(
+    return `https://toot.kytta.dev/?text=${encodeURIComponent(
       this.basicTextToEncode
     )}`;
   }

js/src/components/Map.vue

@@ -142,7 +142,9 @@ export default class Map extends Vue {
   }
 
   updateDraggableMarkerPosition(e: LatLng): void {
-    this.updateDraggableMarkerCallback(e, this.zoom);
+    if (this.updateDraggableMarkerCallback) {
+      this.updateDraggableMarkerCallback(e, this.zoom);
+    }
   }
 
   updateZoom(zoom: number): void {
@@ -163,7 +165,7 @@ export default class Map extends Vue {
 </script>
 <style lang="scss" scoped>
 div.map-container {
-  height: 80vh;
+  height: 100%;
   width: 100%;
 
   .leaflet-map {

js/src/components/Map/Vue2LeafletLocateControl.vue

@@ -28,7 +28,7 @@ export default class Vue2LeafletLocateControl extends Vue {
     unknown
   >;
 
-  @Prop({ type: Boolean, default: true }) visible = true;
+  @Prop({ type: Boolean, default: true }) visible!: boolean;
 
   ready = false;
 

js/src/components/NavBar.vue

@@ -52,21 +52,6 @@
           >{{ $t("Create") }}</b-button
         >
       </b-navbar-item>
-      <b-navbar-item
-        v-if="config && config.features.koenaConnect"
-        class="koena"
-        tag="a"
-        href="https://mediation.koena.net/framasoft/mobilizon/"
-        target="_blank"
-        rel="noopener external"
-        hreflang="fr"
-      >
-        <img
-          src="/img/koena-a11y.svg"
-          width="150"
-          alt="Contact accessibilité"
-        />
-      </b-navbar-item>
     </template>
     <template slot="end">
       <b-navbar-item tag="div">
@@ -82,11 +67,7 @@
         tag="span"
         @keyup.enter="toggleMenu"
       >
-        <template
-          slot="label"
-          v-if="currentActor"
-          class="navbar-dropdown-profile"
-        >
+        <template slot="label" v-if="currentActor">
           <div class="identity-wrapper">
             <div>
               <figure class="image is-32x32" v-if="currentActor.avatar">
@@ -276,6 +257,11 @@ export default class NavBar extends Vue {
       // If we don't have any identities, the user has validated their account,
       // is logging for the first time but didn't create an identity somehow
       if (this.identities.length === 0) {
+        console.debug(
+          "We have no identities listed for current user",
+          this.identities
+        );
+        console.debug("Pushing route to REGISTER_PROFILE");
         try {
           await this.$router.push({
             name: RouteName.REGISTER_PROFILE,
@@ -380,15 +366,6 @@ nav {
     background-color: inherit;
   }
 
-  .koena {
-    padding-top: 0;
-    padding-bottom: 0;
-    & > img {
-      max-height: 4rem;
-      padding-top: 0.2rem;
-    }
-  }
-
   .identity-wrapper {
     display: flex;
 

js/src/components/Participation/ParticipationSection.vue

@@ -65,6 +65,7 @@
     <b-modal
       :active.sync="isAnonymousParticipationModalOpen"
       has-modal-card
+      :close-button-aria-label="$t('Close')"
       ref="anonymous-participation-modal"
     >
       <div class="modal-card">

js/src/components/Post/PostListItem.vue

@@ -9,8 +9,10 @@
       :rounded="true"
       style="height: 120px"
     />
-    <div class="title-info-wrapper has-text-grey-dark">
-      <h3 class="post-minimalist-title">{{ post.title }}</h3>
+    <div class="title-info-wrapper has-text-grey-dark px-1">
+      <h3 class="post-minimalist-title" :lang="post.language">
+        {{ post.title }}
+      </h3>
       <p class="post-publication-date">
         <b-icon icon="clock" />
         <span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{

js/src/components/Post/SharePostModal.vue

@@ -179,7 +179,7 @@ export default class SharePostModal extends Vue {
   }
 
   get mastodonShareUrl(): string {
-    return `https://toot.karamoff.dev/?text=${encodeURIComponent(
+    return `https://toot.kytta.dev/?text=${encodeURIComponent(
       this.basicTextToEncode
     )}`;
   }

js/src/components/Report/ReportModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="modal-card">
     <header class="modal-card-head" v-if="title">
-      <p class="modal-card-title">{{ title }}</p>
+      <h2 class="modal-card-title">{{ title }}</h2>
     </header>
 
     <section
@@ -9,7 +9,7 @@
       :class="{ 'is-titleless': !title }"
     >
       <div class="media">
-        <div class="media-left">
+        <div class="media-left hidden md:block">
           <b-icon icon="alert" type="is-warning" size="is-large" />
         </div>
         <div class="media-content">
@@ -17,7 +17,7 @@
             <article class="media">
               <div class="media-left">
                 <figure class="image is-48x48" v-if="comment.actor.avatar">
-                  <img :src="comment.actor.avatar.url" alt="Image" />
+                  <img :src="comment.actor.avatar.url" alt="" />
                 </figure>
                 <b-icon
                   class="media-left"
@@ -45,12 +45,16 @@
           </p>
 
           <div class="control">
-            <b-input
-              v-model="content"
-              type="textarea"
-              @keyup.enter="confirm"
-              :placeholder="$t('Additional comments')"
-            />
+            <b-field
+              :label="$t('Additional comments')"
+              label-for="additonal-comments"
+            >
+              <b-input
+                v-model="content"
+                type="textarea"
+                id="additonal-comments"
+              />
+            </b-field>
           </div>
 
           <div class="control" v-if="outsideDomain">
@@ -73,7 +77,12 @@
       <button class="button" ref="cancelButton" @click="close">
         {{ translatedCancelText }}
       </button>
-      <button class="button is-primary" ref="confirmButton" @click="confirm">
+      <button
+        class="button is-primary"
+        ref="confirmButton"
+        @click="confirm"
+        @keyup.enter="confirm"
+      >
         {{ translatedConfirmText }}
       </button>
     </footer>

js/src/components/Resource/ResourceItem.vue

@@ -45,7 +45,7 @@
     </a>
     <resource-dropdown
       class="actions"
-      v-if="!inline || !preview"
+      v-if="!inline && !preview"
       @delete="$emit('delete', resource.id)"
       @move="$emit('move', resource)"
       @rename="$emit('rename', resource)"

js/src/components/Resource/ResourceSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="resource">
     <article class="panel is-primary">
-      <p class="panel-heading">
+      <p class="panel-heading truncate">
         {{
           $t('Move "{resourceName}"', { resourceName: initialResource.title })
         }}
@@ -28,7 +28,7 @@
       </a>
       <template v-if="resource.children">
         <a
-          class="panel-block"
+          class="panel-block flex-wrap"
           v-for="element in resource.children.elements"
           :class="{
             clickable:
@@ -37,15 +37,17 @@
           :key="element.id"
           @click="goDown(element)"
         >
-          <span class="panel-icon">
-            <b-icon
-              icon="folder"
-              size="is-small"
-              v-if="element.type === 'folder'"
-            />
-            <b-icon icon="link" size="is-small" v-else />
-          </span>
-          {{ element.title }}
+          <p class="truncate">
+            <span class="panel-icon">
+              <b-icon
+                icon="folder"
+                size="is-small"
+                v-if="element.type === 'folder'"
+              />
+              <b-icon icon="link" size="is-small" v-else />
+            </span>
+            <span>{{ element.title }}</span>
+          </p>
           <span v-if="element.id === initialResource.id">
             <em v-if="element.type === 'folder'"> {{ $t("(this folder)") }}</em>
             <em v-else> {{ $t("(this link)") }}</em>
@@ -89,7 +91,7 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import { GET_RESOURCE } from "../../graphql/resources";
 import { IResource } from "../../types/resource";
 
@@ -119,7 +121,7 @@ export default class ResourceSelector extends Vue {
 
   @Prop({ required: true }) username!: string;
 
-  resource: IResource | undefined = this.initialResource.parent;
+  resource: IResource | undefined = undefined;
 
   RESOURCES_PER_PAGE = 10;
 
@@ -131,6 +133,20 @@ export default class ResourceSelector extends Vue {
     }
   }
 
+  data() {
+    return {
+      resource: this.initialResource?.parent,
+    };
+  }
+
+  @Watch("initialResource")
+  updateResourceFromProp() {
+    if (this.initialResource) {
+      this.resource = this.initialResource?.parent;
+      this.$apollo.queries.resource.refetch();
+    }
+  }
+
   updateResource(): void {
     this.$emit(
       "update-resource",

js/src/components/SearchField.vue

@@ -1,18 +1,22 @@
 <template>
-  <label for="navSearchField">
-    <span class="visually-hidden">{{ defaultPlaceHolder }}</span>
+  <b-field label-for="navSearchField" class="-mt-2">
     <b-input
-      custom-class="searchField"
+      :placeholder="defaultPlaceHolder"
+      type="search"
       id="navSearchField"
       icon="magnify"
-      type="search"
+      icon-clickable
       rounded
+      custom-class="searchField"
       dir="auto"
-      :placeholder="defaultPlaceHolder"
       v-model="search"
       @keyup.native.enter="enter"
-    />
-  </label>
+    >
+    </b-input>
+    <template #label>
+      <span class="sr-only">{{ defaultPlaceHolder }}</span>
+    </template>
+  </b-field>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
@@ -47,6 +51,7 @@ label span.visually-hidden {
 input.searchField {
   box-shadow: none;
   border-color: #b5b5b5;
+  border-radius: 9999px !important;
 
   &::placeholder {
     color: gray;

js/src/components/Settings/SettingsMenu.vue

@@ -78,7 +78,7 @@
         />
         <SettingMenuItem
           :title="$t('Federation')"
-          :to="{ name: RouteName.RELAYS }"
+          :to="{ name: RouteName.INSTANCES }"
         />
       </SettingMenuSection>
     </ul>

js/src/components/Tag.vue

@@ -17,7 +17,8 @@ span.tag {
   background: $purple-3;
   color: $violet-2;
   text-transform: uppercase;
-  &::before {
+
+  &:not(.category)::before {
     content: "#";
   }
 }

js/src/components/Todo/FullTodo.vue

@@ -7,29 +7,23 @@
       <b-field :label="$t('Title')">
         <b-input v-model="title" />
       </b-field>
-      <b-field :label="$t('Assigned to')">
-        <actor-auto-complete v-model="assignedTo" />
-      </b-field>
+      <b-field :label="$t('Assigned to')"> </b-field>
       <b-field :label="$t('Due on')">
-        <b-datepicker v-model="dueDate" />
+        <b-datepicker v-model="dueDate" :first-day-of-week="firstDayOfWeek" />
       </b-field>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Prop, Vue } from "vue-property-decorator";
 import debounce from "lodash/debounce";
 import { DebouncedFunc } from "lodash";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { ITodo } from "../../types/todos";
 import RouteName from "../../router/name";
 import { UPDATE_TODO } from "../../graphql/todos";
-import ActorAutoComplete from "../Account/ActorAutoComplete.vue";
 import { IPerson } from "../../types/actor";
 
-@Component({
-  components: { ActorAutoComplete },
-})
 export default class Todo extends Vue {
   @Prop({ required: true, type: Object }) todo!: ITodo;
 
@@ -99,5 +93,9 @@ export default class Todo extends Vue {
       });
     }
   }
+
+  get firstDayOfWeek(): number {
+    return this.$dateFnsLocale?.options?.weekStartsOn || 0;
+  }
 }
 </script>

js/src/components/Utils/Breadcrumbs.vue

@@ -0,0 +1,69 @@
+<template>
+  <nav class="flex mb-3" :aria-label="$t('Breadcrumbs')">
+    <ol class="inline-flex items-center space-x-1 md:space-x-3 flex-wrap">
+      <li
+        class="inline-flex items-center"
+        v-for="(element, index) in links"
+        :key="index"
+        :aria-current="index > 0 ? 'page' : undefined"
+      >
+        <router-link
+          v-if="index === 0"
+          :to="element"
+          class="inline-flex items-center text-gray-800 hover:text-gray-900"
+        >
+          {{ element.text }}
+        </router-link>
+        <div class="flex items-center" v-else-if="index === links.length - 1">
+          <svg
+            class="w-6 h-6 text-gray-400 rtl:rotate-180"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          <span
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-600 md:ltr:ml-2 md:rtl:mr-2"
+            >{{ element.text }}</span
+          >
+        </div>
+        <div class="flex items-center" v-else>
+          <svg
+            class="w-6 h-6 text-gray-400 rtl:rotate-180"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          <router-link
+            :to="element"
+            class="ltr:ml-1 rtl:mr-1 font-medium text-gray-800 hover:text-gray-900 md:ltr:ml-2 md:rtl:mr-2"
+            >{{ element.text }}</router-link
+          >
+        </div>
+      </li>
+      <slot></slot>
+    </ol>
+  </nav>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { Location } from "vue-router";
+
+type LinkElement = Location & { text: string };
+
+@Component
+export default class Breadcrumbs extends Vue {
+  @Prop({ type: Array, required: true }) links!: LinkElement[];
+}
+</script>

js/src/components/Utils/EmptyContent.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="empty-content" :class="{ inline }" role="note">
+  <div
+    class="empty-content"
+    :class="{ inline, 'text-center': center }"
+    role="note"
+  >
     <b-icon :icon="icon" size="is-large" />
     <h2 class="empty-content__title">
       <!-- @slot Mandatory title -->
       <slot />
     </h2>
-    <p v-show="$slots.desc">
+    <p v-show="$slots.desc" :class="descriptionClasses">
       <!-- @slot Optional description -->
       <slot name="desc" />
     </p>
@@ -17,7 +21,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 @Component
 export default class EmptyContent extends Vue {
   @Prop({ type: String, required: true }) icon!: string;
+  @Prop({ type: String, required: false, default: "" })
+  descriptionClasses!: string;
   @Prop({ type: Boolean, required: false, default: false }) inline!: boolean;
+  @Prop({ type: Boolean, required: false, default: false }) center!: boolean;
 }
 </script>
 

js/src/filters/datetime.ts

@@ -56,7 +56,7 @@ const SHORT_TIME_FORMAT_OPTIONS: DateTimeFormatOptions = {
 
 function formatDateTimeString(
   value: string,
-  timeZone: string | undefined = undefined,
+  timeZone: string | null | undefined = undefined,
   showTime = true,
   dateFormat = "long"
 ): string {
@@ -68,7 +68,7 @@ function formatDateTimeString(
     options = {
       ...options,
       ...(isLongFormat ? LONG_TIME_FORMAT_OPTIONS : SHORT_TIME_FORMAT_OPTIONS),
-      timeZone,
+      timeZone: timeZone || undefined,
     };
   }
   const format = new Intl.DateTimeFormat(locale(), options);

js/src/graphql/actor.ts

@@ -34,15 +34,6 @@ export const FETCH_PERSON = gql`
       feedTokens {
         token
       }
-      organizedEvents {
-        total
-        elements {
-          id
-          uuid
-          title
-          beginsOn
-        }
-      }
     }
   }
   ${ACTOR_FRAGMENT}
@@ -84,6 +75,7 @@ export const GET_PERSON = gql`
           uuid
           title
           beginsOn
+          status
         }
       }
       participations(page: $participationPage, limit: $participationLimit) {
@@ -95,6 +87,7 @@ export const GET_PERSON = gql`
             uuid
             title
             beginsOn
+            status
           }
         }
       }
@@ -213,7 +206,11 @@ export const LOGGED_USER_DRAFTS = gql`
           alt
         }
         beginsOn
+        status
         visibility
+        attributedTo {
+          ...ActorFragment
+        }
         organizerActor {
           ...ActorFragment
         }
@@ -232,10 +229,14 @@ export const LOGGED_USER_DRAFTS = gql`
 `;
 
 export const LOGGED_USER_MEMBERSHIPS = gql`
-  query LoggedUserMemberships($page: Int, $limit: Int) {
+  query LoggedUserMemberships(
+    $membershipName: String
+    $page: Int
+    $limit: Int
+  ) {
     loggedUser {
       id
-      memberships(page: $page, limit: $limit) {
+      memberships(name: $membershipName, page: $page, limit: $limit) {
         total
         elements {
           id
@@ -340,6 +341,30 @@ export const PERSON_STATUS_GROUP = gql`
   ${ACTOR_FRAGMENT}
 `;
 
+export const PERSON_GROUP_MEMBERSHIPS = gql`
+  query PersonGroupMemberships($id: ID!, $groupId: ID!) {
+    person(id: $id) {
+      id
+      memberships(groupId: $groupId) {
+        total
+        elements {
+          id
+          role
+          parent {
+            ...ActorFragment
+          }
+          invitedBy {
+            ...ActorFragment
+          }
+          insertedAt
+          updatedAt
+        }
+      }
+    }
+  }
+  ${ACTOR_FRAGMENT}
+`;
+
 export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
   subscription GroupMembershipSubscriptionChanged(
     $actorId: ID!

js/src/graphql/admin.ts

@@ -70,13 +70,66 @@ export const RELAY_FOLLOWINGS = gql`
   ${RELAY_FRAGMENT}
 `;
 
-export const ADD_RELAY = gql`
-  mutation addRelay($address: String!) {
-    addRelay(address: $address) {
-      ...relayFragment
+export const INSTANCE_FRAGMENT = gql`
+  fragment InstanceFragment on Instance {
+    domain
+    hasRelay
+    relayAddress
+    followerStatus
+    followedStatus
+    eventCount
+    personCount
+    groupCount
+    followersCount
+    followingsCount
+    reportsCount
+    mediaSize
+  }
+`;
+
+export const INSTANCE = gql`
+  query instance($domain: ID!) {
+    instance(domain: $domain) {
+      ...InstanceFragment
     }
   }
-  ${RELAY_FRAGMENT}
+  ${INSTANCE_FRAGMENT}
+`;
+
+export const INSTANCES = gql`
+  query Instances(
+    $page: Int
+    $limit: Int
+    $orderBy: InstancesSortFields
+    $direction: String
+    $filterDomain: String
+    $filterFollowStatus: InstanceFilterFollowStatus
+    $filterSuspendStatus: InstanceFilterSuspendStatus
+  ) {
+    instances(
+      page: $page
+      limit: $limit
+      orderBy: $orderBy
+      direction: $direction
+      filterDomain: $filterDomain
+      filterFollowStatus: $filterFollowStatus
+      filterSuspendStatus: $filterSuspendStatus
+    ) {
+      total
+      elements {
+        ...InstanceFragment
+      }
+    }
+  }
+  ${INSTANCE_FRAGMENT}
+`;
+export const ADD_INSTANCE = gql`
+  mutation addInstance($domain: String!) {
+    addInstance(domain: $domain) {
+      ...InstanceFragment
+    }
+  }
+  ${INSTANCE_FRAGMENT}
 `;
 
 export const REMOVE_RELAY = gql`
@@ -190,3 +243,26 @@ export const SAVE_ADMIN_SETTINGS = gql`
   }
   ${ADMIN_SETTINGS_FRAGMENT}
 `;
+
+export const ADMIN_UPDATE_USER = gql`
+  mutation AdminUpdateUser(
+    $id: ID!
+    $email: String
+    $role: UserRole
+    $confirmed: Boolean
+    $notify: Boolean
+  ) {
+    adminUpdateUser(
+      id: $id
+      email: $email
+      role: $role
+      confirmed: $confirmed
+      notify: $notify
+    ) {
+      id
+      email
+      role
+      confirmedAt
+    }
+  }
+`;

js/src/graphql/comment.ts

@@ -18,6 +18,7 @@ export const COMMENT_FIELDS_FRAGMENT = gql`
     updatedAt
     deletedAt
     isAnnouncement
+    language
   }
   ${ACTOR_FRAGMENT}
 `;

js/src/graphql/config.ts

@@ -11,6 +11,10 @@ export const CONFIG = gql`
       demoMode
       countryCode
       languages
+      eventCategories {
+        id
+        label
+      }
       anonymous {
         participation {
           allowed
@@ -67,7 +71,6 @@ export const CONFIG = gql`
       features {
         groups
         eventCreation
-        koenaConnect
       }
       restrictions {
         onlyAdminCanCreateGroups
@@ -92,6 +95,15 @@ export const CONFIG = gql`
         enabled
         publicKey
       }
+      analytics {
+        id
+        enabled
+        configuration {
+          key
+          value
+          type
+        }
+      }
     }
   }
 `;
@@ -103,6 +115,10 @@ export const CONFIG_EDIT_EVENT = gql`
       features {
         groups
       }
+      eventCategories {
+        id
+        label
+      }
       anonymous {
         participation {
           allowed

js/src/graphql/event.ts

@@ -22,6 +22,8 @@ const FULL_EVENT_FRAGMENT = gql`
     visibility
     joinOptions
     draft
+    language
+    category
     picture {
       id
       url
@@ -60,6 +62,8 @@ const FULL_EVENT_FRAGMENT = gql`
       uuid
       title
       beginsOn
+      status
+      language
       picture {
         id
         url
@@ -153,6 +157,7 @@ export const FETCH_EVENTS = gql`
         status
         visibility
         insertedAt
+        language
         picture {
           id
           url
@@ -199,10 +204,11 @@ export const CREATE_EVENT = gql`
     $picture: MediaInput
     $onlineAddress: String
     $phoneAddress: String
-    $category: String
+    $category: EventCategory
     $physicalAddress: AddressInput
     $options: EventOptionsInput
     $contacts: [Contact]
+    $metadata: [EventMetadataInput]
   ) {
     createEvent(
       organizerActorId: $organizerActorId
@@ -223,6 +229,7 @@ export const CREATE_EVENT = gql`
       physicalAddress: $physicalAddress
       options: $options
       contacts: $contacts
+      metadata: $metadata
     ) {
       ...FullEvent
     }
@@ -247,11 +254,11 @@ export const EDIT_EVENT = gql`
     $phoneAddress: String
     $organizerActorId: ID
     $attributedToId: ID
-    $category: String
+    $category: EventCategory
     $physicalAddress: AddressInput
     $options: EventOptionsInput
     $contacts: [Contact]
-    $metadata: EventMetadataInput
+    $metadata: [EventMetadataInput]
   ) {
     updateEvent(
       eventId: $id
@@ -433,6 +440,7 @@ export const FETCH_GROUP_EVENTS = gql`
           uuid
           title
           beginsOn
+          status
           draft
           options {
             ...EventOptions

js/src/graphql/group.ts

@@ -42,6 +42,7 @@ export const LIST_GROUPS = gql`
             id
             uuid
             title
+            status
             beginsOn
           }
           total
@@ -104,7 +105,9 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
         uuid
         title
         beginsOn
+        status
         draft
+        language
         options {
           maximumAttendeeCapacity
         }
@@ -223,6 +226,15 @@ export const FETCH_GROUP = gql`
   ${RESOURCE_METADATA_BASIC_FIELDS_FRAGMENT}
 `;
 
+export const FETCH_GROUP_BY_ID = gql`
+  query FetchGroupById($id: ID!) {
+    groupById(id: $name) {
+      ...GroupFullFields
+    }
+  }
+  ${GROUP_FIELDS_FRAGMENTS}
+`;
+
 export const GET_GROUP = gql`
   query GetGroup(
     $id: ID!

js/src/graphql/home.ts

@@ -36,7 +36,9 @@ export const HOME_USER_QUERIES = gql`
               alt
             }
             beginsOn
+            status
             visibility
+            language
             organizerActor {
               ...ActorFragment
             }
@@ -76,9 +78,11 @@ export const HOME_USER_QUERIES = gql`
             uuid
             title
             beginsOn
+            status
             picture {
               url
             }
+            language
             attributedTo {
               ...ActorFragment
             }
@@ -125,10 +129,12 @@ export const CLOSE_CONTENT = gql`
         title
         uuid
         beginsOn
+        status
         picture {
           id
           url
         }
+        language
         tags {
           ...TagFragment
         }

js/src/graphql/member.ts

@@ -37,16 +37,23 @@ export const ACCEPT_INVITATION = gql`
 export const REJECT_INVITATION = gql`
   mutation RejectInvitation($id: ID!) {
     rejectInvitation(id: $id) {
-      id
+      ...MemberFragment
     }
   }
+  ${MEMBER_FRAGMENT}
 `;
 
 export const GROUP_MEMBERS = gql`
-  query ($name: String!, $roles: String, $page: Int, $limit: Int) {
-    group(preferredUsername: $name) {
+  query (
+    $groupName: String!
+    $name: String
+    $roles: String
+    $page: Int
+    $limit: Int
+  ) {
+    group(preferredUsername: $groupName) {
       ...ActorFragment
-      members(page: $page, limit: $limit, roles: $roles) {
+      members(name: $name, page: $page, limit: $limit, roles: $roles) {
         elements {
           id
           role
@@ -72,13 +79,22 @@ export const UPDATE_MEMBER = gql`
 `;
 
 export const REMOVE_MEMBER = gql`
-  mutation RemoveMember($groupId: ID!, $memberId: ID!) {
-    removeMember(groupId: $groupId, memberId: $memberId) {
+  mutation RemoveMember($memberId: ID!, $exclude: Boolean) {
+    removeMember(memberId: $memberId, exclude: $exclude) {
       id
     }
   }
 `;
 
+export const APPROVE_MEMBER = gql`
+  mutation ApproveMember($memberId: ID!) {
+    approveMember(memberId: $memberId) {
+      ...MemberFragment
+    }
+  }
+  ${MEMBER_FRAGMENT}
+`;
+
 export const JOIN_GROUP = gql`
   mutation JoinGroup($groupId: ID!) {
     joinGroup(groupId: $groupId) {

js/src/graphql/participant.ts

@@ -32,6 +32,7 @@ export const LOGGED_USER_PARTICIPATIONS = gql`
               alt
             }
             beginsOn
+            status
             visibility
             organizerActor {
               ...ActorFragment
@@ -98,6 +99,7 @@ export const LOGGED_USER_UPCOMING_EVENTS = gql`
               alt
             }
             beginsOn
+            status
             visibility
             organizerActor {
               ...ActorFragment
@@ -144,6 +146,7 @@ export const LOGGED_USER_UPCOMING_EVENTS = gql`
             uuid
             title
             beginsOn
+            status
             picture {
               url
             }

js/src/graphql/post.ts

@@ -21,6 +21,7 @@ export const POST_FRAGMENT = gql`
     publishAt
     draft
     visibility
+    language
     tags {
       ...TagFragment
     }
@@ -56,6 +57,7 @@ export const POST_BASIC_FIELDS = gql`
     publishAt
     draft
     visibility
+    language
     picture {
       id
       url
@@ -96,7 +98,7 @@ export const FETCH_POST = gql`
 export const CREATE_POST = gql`
   mutation CreatePost(
     $title: String!
-    $body: String
+    $body: String!
     $attributedToId: ID!
     $visibility: PostVisibility
     $draft: Boolean

js/src/graphql/report.ts

@@ -2,8 +2,13 @@ import gql from "graphql-tag";
 import { ACTOR_FRAGMENT } from "./actor";
 
 export const REPORTS = gql`
-  query Reports($status: ReportStatus, $page: Int, $limit: Int) {
-    reports(status: $status, page: $page, limit: $limit) {
+  query Reports(
+    $status: ReportStatus
+    $domain: String
+    $page: Int
+    $limit: Int
+  ) {
+    reports(status: $status, domain: $domain, page: $page, limit: $limit) {
       total
       elements {
         id

js/src/graphql/search.ts

@@ -11,6 +11,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
     $tags: String
     $term: String
     $type: EventType
+    $category: String
     $beginsOn: DateTime
     $endsOn: DateTime
     $eventPage: Int
@@ -23,6 +24,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
       tags: $tags
       term: $term
       type: $type
+      category: $category
       beginsOn: $beginsOn
       endsOn: $endsOn
       page: $eventPage
@@ -38,6 +40,7 @@ export const SEARCH_EVENTS_AND_GROUPS = gql`
           id
           url
         }
+        status
         tags {
           ...TagFragment
         }
@@ -108,6 +111,7 @@ export const INTERACT = gql`
         title
         uuid
         beginsOn
+        status
         picture {
           id
           url

js/src/graphql/user.ts

@@ -209,14 +209,30 @@ export const UPDATE_ACTIVITY_SETTING = gql`
 `;
 
 export const LIST_USERS = gql`
-  query ListUsers($email: String, $page: Int, $limit: Int) {
-    users(email: $email, page: $page, limit: $limit) {
+  query ListUsers(
+    $email: String
+    $currentSignInIp: String
+    $page: Int
+    $limit: Int
+    $sort: SortableUserField
+    $direction: SortDirection
+  ) {
+    users(
+      email: $email
+      currentSignInIp: $currentSignInIp
+      page: $page
+      limit: $limit
+      sort: $sort
+      direction: $direction
+    ) {
       total
       elements {
         id
         email
         locale
         confirmedAt
+        currentSignInIp
+        currentSignInAt
         disabled
         actors {
           ...ActorFragment