Merge remote-tracking branch 'upstream/develop' into develop

Change discover chunk to groups

See merge request soapbox-pub/soapbox!2392

.eslintignore

@@ -5,4 +5,4 @@
 /tmp/**
 /coverage/**
 /custom/**
-!.eslintrc.js
+!.eslintrc.cjs

.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:import/typescript',
     'plugin:compat/recommended',
+    'plugin:tailwindcss/recommended',
   ],
 
   env: {
@@ -18,7 +19,7 @@ module.exports = {
     ATTACHMENT_HOST: false,
   },
 
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
 
   plugins: [
     'react',
@@ -43,7 +44,7 @@ module.exports = {
     react: {
       version: 'detect',
     },
-    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+    'import/extensions': ['.js', '.jsx', '.cjs', '.mjs', '.ts', '.tsx'],
     'import/ignore': [
       'node_modules',
       '\\.(css|scss|json)$',
@@ -54,13 +55,17 @@ module.exports = {
       },
     },
     polyfills: [
-      'es:all',
-      'fetch',
-      'IntersectionObserver',
-      'Promise',
-      'URL',
-      'URLSearchParams',
+      'es:all', // core-js
+      'fetch', // not polyfilled, but ignore it
+      'IntersectionObserver', // npm:intersection-observer
+      'Promise', // core-js
+      'ResizeObserver', // npm:resize-observer-polyfill
+      'URL', // core-js
+      'URLSearchParams', // core-js
     ],
+    tailwindcss: {
+      config: 'tailwind.config.cjs',
+    },
   },
 
   rules: {
@@ -235,18 +240,7 @@ module.exports = {
       },
     ],
     'import/newline-after-import': 'error',
-    'import/no-extraneous-dependencies': [
-      'error',
-      // {
-      //   devDependencies: [
-      //     'webpack/**',
-      //     'app/soapbox/test_setup.js',
-      //     'app/soapbox/test_helpers.js',
-      //     'app/**/__tests__/**',
-      //     'app/**/__mocks__/**',
-      //   ],
-      // },
-    ],
+    'import/no-extraneous-dependencies': 'error',
     'import/no-unresolved': 'error',
     'import/no-webpack-loader-syntax': 'error',
     'import/order': [
@@ -267,10 +261,30 @@ module.exports = {
       },
     ],
     '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none',
+        },
+        singleline: {
+          delimiter: 'comma',
+        },
+      },
+    ],
 
     'promise/catch-or-return': 'error',
 
     'react-hooks/rules-of-hooks': 'error',
+
+    'tailwindcss/classnames-order': [
+      'error',
+      {
+        classRegex: '^(base|container|icon|item|list|outer|wrapper)?[c|C]lass(Name)?$',
+        config: 'tailwind.config.cjs',
+      },
+    ],
+    'tailwindcss/migration-from-tailwind-2': 'error',
   },
   overrides: [
     {

.gitattributes

@@ -0,0 +1 @@
+CHANGELOG.md merge=union

.gitlab-ci.yml

@@ -3,6 +3,9 @@ image: node:18
 variables:
   NODE_ENV: test
 
+default:
+  interruptible: true
+
 cache: &cache
   key:
     files:
@@ -15,6 +18,7 @@ stages:
   - deps
   - test
   - deploy
+  - release
 
 deps:
   stage: deps
@@ -32,6 +36,9 @@ danger:
     # https://github.com/danger/danger-js/issues/1029#issuecomment-998915436
     - export CI_MERGE_REQUEST_IID=${CI_OPEN_MERGE_REQUESTS#*!}
     - npx danger ci
+  except:
+    variables:
+      - $CI_DEFAULT_BRANCH == $CI_COMMIT_REF_NAME
   allow_failure: true
 
 lint-js:
@@ -41,10 +48,12 @@ lint-js:
     changes:
       - "**/*.js"
       - "**/*.jsx"
+      - "**/*.cjs"
+      - "**/*.mjs"
       - "**/*.ts"
       - "**/*.tsx"
       - ".eslintignore"
-      - ".eslintrc.js"
+      - ".eslintrc.cjs"
 
 lint-sass:
   stage: test
@@ -65,7 +74,7 @@ jest:
       - "app/soapbox/**/*"
       - "webpack/**/*"
       - "custom/**/*"
-      - "jest.config.js"
+      - "jest.config.cjs"
       - "package.json"
       - "yarn.lock"
       - ".gitlab-ci.yml"
@@ -80,7 +89,8 @@ jest:
 nginx-test:
   stage: test
   image: nginx:latest
-  before_script: cp installation/mastodon.conf /etc/nginx/conf.d/default.conf
+  before_script:
+    - cp installation/mastodon.conf /etc/nginx/conf.d/default.conf
   script: nginx -t
   only:
     changes:
@@ -88,7 +98,12 @@ nginx-test:
 
 build-production:
   stage: test
-  script: yarn build
+  script:
+    - yarn build
+    - yarn manage:translations en
+    # Fail if files got changed.
+    # https://stackoverflow.com/a/9066385
+    - git diff --quiet
   variables:
     NODE_ENV: production
   artifacts:
@@ -103,22 +118,11 @@ docs-deploy:
   script:
     - curl -X POST -F"token=$CI_JOB_TOKEN" -F'ref=master' https://gitlab.com/api/v4/projects/15685485/trigger/pipeline
   only:
-    refs:
-      - develop
+    variables:
+      - $CI_DEFAULT_BRANCH == $CI_COMMIT_REF_NAME
     changes:
       - "docs/**/*"
 
-# Supposed to fail when translations are outdated, instead always passes
-#
-# i18n:
-#   stage: build
-#   script: yarn manage:translations
-#   variables:
-#     NODE_ENV: development
-#   before_script:
-#     - yarn
-#     - yarn build
-
 review:
   stage: deploy
   environment:
@@ -140,21 +144,33 @@ pages:
     paths:
     - public
   only:
-    refs:
-      - develop
+    variables:
+      - $CI_DEFAULT_BRANCH == $CI_COMMIT_REF_NAME
 
 docker:
   stage: deploy
-  image: docker:20.10.17
+  image: docker:23.0.0
   services:
-    - docker:20.10.17-dind
+    - docker:23.0.0-dind
   tags:
     - dind
   # https://medium.com/devops-with-valentine/how-to-build-a-docker-image-and-push-it-to-the-gitlab-container-registry-from-a-gitlab-ci-pipeline-acac0d1f26df
   script:
     - echo $CI_REGISTRY_PASSWORD | docker login -u $CI_REGISTRY_USER $CI_REGISTRY --password-stdin
-    - docker build -t $CI_REGISTRY_IMAGE .
-    - docker push $CI_REGISTRY_IMAGE
-  only:
-    refs:
-      - develop
+    - docker build -t $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG .
+    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
+  rules:
+    - if: $CI_COMMIT_TAG
+  interruptible: false
+
+release:
+  stage: release
+  rules:
+    - if: $CI_COMMIT_TAG
+  script:
+    - npx ts-node ./scripts/do-release.ts
+  interruptible: false
+
+include:
+  - template: Jobs/Dependency-Scanning.gitlab-ci.yml
+  - template: Security/License-Scanning.gitlab-ci.yml

.gitlab/merge_request_templates/BeforeAndAfter.md

@@ -0,0 +1,8 @@
+## Summary
+<!-- Describe your changes in detail -->
+
+
+## Screenshots (if appropriate):
+| Before | After |
+| ------ | ----- |
+|        |       |

.lintstagedrc.json

@@ -1,5 +1,8 @@
 {
   "*.js": "eslint --cache",
+  "*.cjs": "eslint --cache",
+  "*.mjs": "eslint --cache",
   "*.ts": "eslint --cache",
+  "*.tsx": "eslint --cache",
   "app/styles/**/*.scss": "stylelint"
 }

.storybook/main.ts

@@ -0,0 +1,43 @@
+import sharedConfig from '../webpack/shared';
+
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-react-intl',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  webpackFinal: async (config) => {
+    config.resolve!.alias = {
+      ...sharedConfig.resolve!.alias,
+      ...config.resolve!.alias,
+    };
+
+    config.resolve!.modules = [
+      ...sharedConfig.resolve!.modules!,
+      ...config.resolve!.modules!,
+    ];
+
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,22 @@
+import '../app/styles/tailwind.css';
+import '../stories/theme.css';
+
+import { addDecorator, Story } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import React from 'react';
+
+const withProvider = (Story: Story) => (
+  <IntlProvider locale='en'><Story /></IntlProvider>
+);
+
+addDecorator(withProvider);
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.stylelintrc.json

@@ -1,16 +1,22 @@
 {
-  "extends": ["stylelint-config-standard"],
-  "ignoreFiles": ["app/styles/reset.scss"],
-  "plugins": ["stylelint-scss"],
+  "extends": ["stylelint-config-standard-scss"],
   "rules": {
+    "alpha-value-notation": null,
     "at-rule-no-unknown": null,
     "at-rule-empty-line-before": ["always", { "ignore": ["after-comment", "first-nested", "inside-block", "blockless-after-same-name-blockless", "blockless-after-blockless"] }],
+    "color-function-notation": null,
+    "custom-property-pattern": null,
+    "declaration-block-no-redundant-longhand-properties": null,
     "declaration-colon-newline-after": null,
     "declaration-empty-line-before": "never",
-    "font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["ForkAwesome", "Font Awesome 5 Free", "OpenDyslexic", "soapbox"] }],
+    "font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": ["ForkAwesome", "Font Awesome 5 Free"] }],
+    "max-line-length": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
-    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["/tailwind/", "layer"]}],
-    "no-invalid-position-at-import-rule": null
+    "no-invalid-position-at-import-rule": null,
+    "scss/at-rule-no-unknown": [true, { "ignoreAtRules": ["tailwind", "apply", "layer", "config"]}],
+    "scss/operator-no-unspaced": null,
+    "selector-class-pattern": null,
+    "string-quotes": "single"
   }
 }

.tool-versions

@@ -1 +1 @@
-nodejs 18.2.0
+nodejs 18.14.0

.vscode/extensions.json

@@ -3,6 +3,7 @@
         "dbaeumer.vscode-eslint",
         "bradlc.vscode-tailwindcss",
         "stylelint.vscode-stylelint",
-        "wix.vscode-import-cost"
+        "wix.vscode-import-cost",
+        "redhat.vscode-yaml"
     ]
 }

.vscode/settings.json

@@ -1,9 +1,21 @@
 {
+  "css.validate": false,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "files.associations": {
     "*.conf.template": "properties"
   },
   "files.eol": "\n",
-  "files.insertFinalNewline": false
+  "files.insertFinalNewline": false,
+  "json.schemas": [
+    {
+      "fileMatch": [".lintstagedrc.json"],
+      "url": "https://json.schemastore.org/lintstagedrc.schema.json"
+    },
+    {
+      "fileMatch": ["renovate.json"],
+      "url": "https://docs.renovatebot.com/renovate-schema.json"
+    }
+  ],
+  "scss.validate": false
 }

CHANGELOG.md

@@ -4,6 +4,189 @@ 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).
 
+## [Unreleased]
+
+### Added
+- Posts: Support posts filtering on recent Mastodon versions
+- Reactions: Support custom emoji reactions
+- Compatbility: Support Mastodon v2 timeline filters.
+- Posts: Support dislikes on Friendica.
+- UI: added a character counter to some textareas.
+
+### Changed
+- Posts: truncate Nostr pubkeys in reply mentions.
+- Posts: upgraded emoji picker component.
+- UI: unified design of "approve" and "reject" buttons in follow requests and waitlist.
+
+### Fixed
+- Posts: fixed emojis being cut off in reactions modal.
+- Posts: fix audio player progress bar visibility.
+- Posts: added missing gap in pending status.
+- Compatibility: fixed quote posting compatibility with custom Pleroma forks.
+- Profile: fix "load more" button height on account gallery page.
+- 18n: fixed Chinese language being detected from the browser.
+- Conversations: fixed pagination (Mastodon).
+- Compatibility: fix version parsing for Friendica.
+
+## [3.2.0] - 2023-02-15
+
+### Added
+- Admin: redirect the homepage to any URL.
+- Compatibility: added compatibility with Friendica.
+- Posts: bot badge on statuses from bot accounts.
+- Compatibility: improved browser support for older browsers.
+- Events: allow to repost events in event menu.
+- Profile: Add RSS link to user profiles.
+- Reactions: adds support for reacting to chat messages.
+- Groups: initial support for groups.
+- Profile: add RSS link to user profiles.
+- Chats: reset chat message field height after sending a message.
+- Admin: allow to manage announcements.
+
+### Changed
+- Chats: improved display of media attachments.
+- ServiceWorker: switch to a network-first strategy. The "An update is available!" prompt goes away.
+- Posts: increased font size of focused status in threads.
+- Posts: let "mute conversation" be clicked from any feed, not just noficiations.
+- Posts: display all emoji reactions.
+- Reactions: improved UI of reactions on statuses.
+- Profile: make verified badge more prominent, overlapping with avatar.
+
+### Fixed
+- Admin: fixed hover card in reports modal shows reporter not reportee
+- Chats: media attachments rendering at the wrong size and/or causing the chat to scroll on load.
+- Chats: don't display "copy" button for messages without text.
+- Posts: don't have to click the play button twice for embedded videos.
+- index.html: remove `referrer` meta tag so it doesn't conflict with backend's `Referrer-Policy` header.
+- Modals: fix media modal automatically switching to video.
+- Navigation: profile dropdown erratic behavior.
+- Posts: fix posts filtering.
+
+### Removed
+- Admin: single user mode. Now the homepage can be redirected to any URL.
+
+## [3.1.0] - 2023-01-13
+
+### Added
+- Compatibility: rudimentary support for Takahē.
+- UI: added backdrop blur behind modals.
+- Admin: let admins configure media preview for attachment thumbnails.
+- Login: accept `?server` param in external login, eg `fe.soapbox.pub/login/external?server=gleasonator.com`.
+- Backups: restored Pleroma backups functionality.
+- Export: restored "Export data" to CSV.
+
+### Changed
+- Posts: letterbox images to 19:6 again.
+- Status Info: moved context (repost, pinned) to improve UX.
+- Posts: remove file icon from empty link previews.
+- Settings: moved "Import data" under settings.
+- Composer: add more descriptive discard confirmation message.
+
+### Fixed
+- Layout: use accent color for "floating action button" (mobile compose button).
+- ServiceWorker: don't serve favicon, robots.txt, and others from ServiceWorker.
+- Datepicker: correctly default to the current year.
+- Scheduled posts: fix page crashing on deleting a scheduled post.
+- Events: don't crash when searching for a location.
+- Search: fixes an abort error when using the navbar search component.
+- Posts: fix monospace font in Markdown code blocks.
+- Modals: fix action buttons overflow
+- Editing: don't insert edited posts to the top of the feed.
+- Editing: don't display edited posts as pending posts.
+- Modals: close modal when navigating to a different page.
+- Modals: fix "View context" button in media modal.
+- Posts: let unauthenticated users to translate posts if allowed by backend.
+- Chats: fix jumpy scrollbar.
+- Composer: fix alignment of icon in submit button.
+- Login: add a border around QR codes.
+- Composer: don't display action button in reply indicator.
+
+## [3.0.0] - 2022-12-25
+
+### Added
+- Editing: ability to edit posts and view edit history (on Rebased, Pleroma, and Mastodon).
+- Events: ability to create, view, and comment on Events (on Rebased).
+- Onboarding: display an introduction wizard to newly registered accounts.
+- Posts: translate foreign language posts into your native language (on Rebased, Mastodon; if configured by the admin).
+- Posts: ability to view quotes of a post (on Rebased).
+- Posts: hover the "replying to" line to see a preview card of the parent post.
+- Chats: ability to leave a chat (on Rebased, Truth Social).
+- Chats: ability to disable chats for yourself.
+- Layout: added right-to-left support for Arabic, Hebrew, Persian, and Central Kurdish languages.
+- Composer: support custom emoji categories.
+- Search: ability to search posts from a specific account (on Pleroma, Rebased).
+- Theme: auto-detect system theme by default.
+- Profile: remove a specific user from your followers (on Rebased, Mastodon).
+- Suggestions: ability to view all suggested profiles.
+- Feeds: display suggested accounts in Home feed (optional by admin).
+- Compatibility: added compatibility with Truth Social, Fedibird, Pixelfed, Akkoma, and Glitch.
+- Developers: added Test feed, Service Worker debugger, and Network Error preview.
+- Reports: display server rules in reports. Let users select rule violations when submitting a report.
+- Admin: added Theme Editor, a GUI for customizing the color scheme.
+- Admin: custom badges. Admins can add non-federating badges to any user's profile (on Rebased, Pleroma).
+- Admin: consolidated user dropdown actions (verify/suggest/etc) into a unified "Moderate User" modal.
+- i18n: updated translations for Italian, Polish, Arabic, Hebrew, and German.
+- Toast: added the ability to dismiss toast notifications.
+
+### Changed
+- UI: the whole UI has been overhauled both inside and out. 97% of the codebase has been rewritten to TypeScript, and a new component library has been introduced with Tailwind CSS.
+- Chats: redesigned chats. Includes an improved desktop UI, unified chat widget, expanding textarea, and autosuggestions.
+- Lists: ability to edit and delete a list.
+- Settings: unified settings under one path with separate sections.
+- Posts: changed the thumbs-up icon to a heart.
+- Posts: move instance favicon beside username instead of post timestamp.
+- Posts: changed the behavior of content warnings. CWs and sensitive media are unified into one design.
+- Posts: redesigned interaction counters to use text instead of icons.
+- Posts: letterbox images taller than 1:1.
+- Profile: overhauled user profiles to be consistent with the rest of the UI.
+- Composer: move emoji button alongside other composer buttons, add numerical counter.
+- Birthdays: move today's birthdays out of notifications into right sidebar.
+- Performance: improve scrolling/navigation between feeds by using a virtual window library.
+- Admin: reorganize UI into 3-column layout.
+- Admin: include external link to frontend repo for the running commit.
+- Toast: redesigned toast notifications.
+
+### Removed
+- Theme: Halloween theme.
+- Settings: advanced notification settings.
+- Settings: dyslexic mode.
+- Settings: demetricator.
+- Profile: ability to set and view private notes on an account.
+- Feeds: per-feed filters for replies, media, etc.
+- Backup and export functionality (for now).
+- Posts: hide non-emoji images embedded in post content.
+
+### Security
+- Glitch Social: fixed XSS vulnerability on Glitch Social where custom emojis could be exploited to embed a script tag.
+
+## [2.0.0] - 2022-05-01
+### Added
+- Quote Posting: repost with comment on Fedibird and Rebased.
+- Profile: ability to feature other users on your profile (on Rebased, Mastodon).
+- Profile: ability to add location to the user's profile (on Rebased, Truth Social).
+- Birthdays: ability to add a birthday to your profile (on Rebased, Pleroma).
+- Birthdays: support for age-gated registration if configured by the admin (on Rebased, Pleroma).
+- Birthdays: display today's birthdays in notifications.
+- Notifications: added unread badge to favicon when user has notifications.
+- Notifications: display full attachments in notifications instead of links.
+- Search: added a dedicated search page with prefilled suggestions.
+- Compatibility: improved support for Mastodon, added support for Mitra.
+- Ethereum: Metamask sign-in with Mitra.
+- i18n: added Shavian alphabet (`en-Shaw`) transliteration.
+- i18n: added Icelandic translation.
+
+### Changed
+- Feeds: added gaps between posts in feeds.
+- Feeds: automatically load new posts when scrolled to the top of the feed.
+- Layout: improved design of top navigation bar.
+- Layout: add left sidebar navigation.
+- Icons: replaced Fork Awesome icons with Tabler icons.
+- Posts: moved mentions out of the post content into an area above the post for replies (on Pleroma and Rebased - Mastodon falls back to the old behavior).
+- Composer: use graphical ring counter for character count.
+
+### Fixed
+- Multi-Account: fix switching between profiles on different servers with the same local username.
+
 ## [1.3.0] - 2021-07-02
 ### Changed
 - Layout: show right sidebar on all pages.

README.md

@@ -1,202 +1,81 @@
-# Soapbox
-
 ![Soapbox Screenshot](soapbox-screenshot.png)
 
-**Soapbox** is a frontend for Mastodon and Pleroma with a focus on custom branding and ease of use.
+**Soapbox** is customizable open-source software that puts the power of social media in the hands of the people. Feature-rich and hyper-focused on providing a user experience to rival Big Tech, Soapbox is already home to some of the biggest alternative social platforms.
 
-## Try it out
+# On The Fediverse
 
-Visit https://fe.soapbox.pub/ and point it to your favorite instance.
+You may have heard of **Mastodon**. Soapbox builds upon what Mastodon made great to make something even better.
 
-## :rocket: Deploy on Pleroma
+You can run **Mastodon+Soapbox**, **Rebased+Soapbox**, and more.
 
-Installing Soapbox on an existing Pleroma server is extremely easy.
-Just ssh into the server and download a .zip of the latest build:
+Soapbox is the **frontend** (what users see) while Mastodon is the **backend** (data, APIs). You can mix-and-match in the Fediverse ecosystem.
 
-```sh
-curl -L https://gitlab.com/soapbox-pub/soapbox/-/jobs/artifacts/develop/download?job=build-production -o soapbox.zip
-```
+> 💡 If you're starting a new server, we highly recommend **Rebased+Soapbox**. Rebased is our custom-built backend just for Soapbox, providing important new features such as **quote posting** and **chats**.
+>
+> See: [Installing Rebased+Soapbox](https://soapbox.pub/install/)
 
-Then unpack it into Pleroma's `instance` directory:
+# Try It Out
 
-```sh
-busybox unzip soapbox.zip -o -d /opt/pleroma/instance
-```
+Want to give Soapbox a shot? Here are some suggested servers:
 
-**That's it!** :tada:
-**Soapbox is installed.**
-The change will take effect immediately, just refresh your browser tab.
-It's not necessary to restart the Pleroma service.
+- [gleasonator.com](https://gleasonator.com/) - operated by the lead developer of Soapbox
+- [social.teci.world](https://social.teci.world/) - free speech server run by a Soapbox contributor
+- [spinster.xyz](https://spinster.xyz/) - one of the largest feminist communities on the internet
+- [poa.st](https://poa.st/) - the largest Soapbox server on the network
 
-***For OTP releases,*** *unpack to /var/lib/pleroma instead.*
+Want to use Soapbox against **any existing Mastodon/Pleroma server?** Try:
 
-To remove Soapbox and revert to the default pleroma-fe, simply `rm /opt/pleroma/instance/static/index.html` (you can delete other stuff in there too, but be careful not to delete your own HTML files).
+- [fe.soapbox.pub](https://fe.soapbox.pub) - enter your server's domain name to use Soapbox on any server!
 
-## :elephant: Deploy on Mastodon
+# 🚀 Starting Your Own Server
 
-See [Installing Soapbox over Mastodon](https://docs.soapbox.pub/frontend/administration/mastodon/).
+Starting your own server is one of the best ways to have freedom online! We recommend installing **Rebased+Soapbox**.
 
-## How does it work?
+See here for a detailed setup guide: [Installing Rebased+Soapbox](https://soapbox.pub/install/)
 
-Soapbox is a [single-page application (SPA)](https://en.wikipedia.org/wiki/Single-page_application) that runs entirely in the browser with JavaScript.
+# Adding Soapbox to an Existing Server
 
-It has a single HTML file, `index.html`, responsible only for loading the required JavaScript and CSS.
-It interacts with the backend through [XMLHttpRequest (XHR)](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest).
+Already have a server? No problem — it is still possible to use Soapbox.
 
-Here is a simplified example with Nginx:
+- [Deploying on Pleroma](https://docs.soapbox.pub/frontend/installing/#install-soapbox)
+- [Deploying on Mastodon](https://docs.soapbox.pub/frontend/administration/mastodon/)
 
-```nginx
-location /api {
-  proxy_pass http://backend;
-}
+> 💡 If using Pleroma, it's recommended to [upgrade it to Rebased](https://gitlab.com/-/snippets/2411739). This comes with better support and many new features, helping you get the most out of Soapbox.
 
-location / {
-  root /opt/soapbox;
-  try_files $uri index.html;
-}
-```
+# Developing Soapbox
 
-(See [`mastodon.conf`](https://gitlab.com/soapbox-pub/soapbox/-/blob/develop/installation/mastodon.conf) for a full example.)
+tl;dr — `git clone`, `yarn`, and `yarn dev`.
 
-Soapbox incorporates much of the [Mastodon API](https://docs.joinmastodon.org/methods/), [Pleroma API](https://api.pleroma.social/), and more.
-It detects features supported by the backend to provide the right experience for the backend.
+For detailed guides, see these pages:
 
-# Running locally
+1. [Soapbox local development](https://docs.soapbox.pub/frontend/development/running-locally/)
+2. [yarn commands](https://docs.soapbox.pub/frontend/development/yarn-commands/)
+3. [How it works](https://docs.soapbox.pub/frontend/development/how-it-works/)
+4. [Environment variables](https://docs.soapbox.pub/frontend/development/local-config/)
+5. [Developing a backend](https://docs.soapbox.pub/frontend/development/developing-backend/)
 
-To get it running, just clone the repo:
-
-```sh
-git clone https://gitlab.com/soapbox-pub/soapbox.git
-cd soapbox
-```
-
-Ensure that Node.js and Yarn are installed, then install dependencies:
-
-```sh
-yarn
-```
-
-Finally, run the dev server:
-
-```sh
-yarn dev
-```
-
-**That's it!** :tada:
-
-It will serve at `http://localhost:3036` by default.
-
-You should see an input box - just enter the domain name of your instance to log in.
-
-Tip: you can even enter a local instance like `http://localhost:3000`!
-
-### Troubleshooting: `ERROR: NODE_ENV must be set`
-
-Create a `.env` file if you haven't already.
-
-```sh
-cp .env.example .env
-```
-
-And ensure that it contains `NODE_ENV=development`.
-Try again.
-
-### Troubleshooting: it's not working!
-
-Run `node -V` and compare your Node.js version with the version in [`.tool-versions`](https://gitlab.com/soapbox-pub/soapbox/-/blob/develop/.tool-versions).
-If they don't match, try installing [asdf](https://asdf-vm.com/).
-
-## Local Dev Configuration
-
-The following configuration variables are supported supported in local development.
-Edit `.env` to set them.
-
-All configuration is optional, except `NODE_ENV`.
-
-#### `NODE_ENV`
-
-The Node environment.
-Soapbox checks for the following options:
-
-- `development` - What you should use while developing Soapbox.
-- `production` - Use when compiling to deploy to a live server.
-- `test` - Use when running automated tests.
-
-#### `BACKEND_URL`
-
-URL to the backend server.
-Can be http or https, and can include a port.
-For https, be sure to also set `PROXY_HTTPS_INSECURE=true`.
-
-**Default:** `http://localhost:4000`
-
-#### `PROXY_HTTPS_INSECURE`
-
-Allows using an HTTPS backend if set to `true`.
-
-This is needed if `BACKEND_URL` is set to an `https://` value.
-[More info](https://stackoverflow.com/a/48624590/8811886).
-
-**Default:** `false`
-
-# Yarn Commands
-
-The following commands are supported.
-You must set `NODE_ENV` to use these commands.
-To do so, you can add the following line to your `.env` file:
-
-```sh
-NODE_ENV=development
-```
-
-#### Local dev server
-- `yarn dev` - Run the local dev server.
-
-#### Building
-- `yarn build` - Compile without a dev server, into `/static` directory.
-
-#### Translations
-- `yarn manage:translations` - Normalizes translation files. Should always be run after editing i18n strings.
-
-#### Tests
-- `yarn test:all` - Runs all tests and linters.
-
-- `yarn test` - Runs Jest for frontend unit tests.
-
-- `yarn lint` - Runs all linters.
-
-- `yarn lint:js` - Runs only JavaScript linter.
-
-- `yarn lint:sass` - Runs only SASS linter.
-
-# Contributing
+## Contributing
 
 We welcome contributions to this project.
 To contribute, see [Contributing to Soapbox](docs/contributing.md).
 
-# Customization
+Translators can help by providing [translations through Weblate](https://hosted.weblate.org/projects/soapbox-pub/soapbox/).
+Native speakers from all around the world are welcome!
 
-Soapbox supports customization of the user interface, to allow per-instance branding and other features.
-Some examples include:
+# Project Philosophy
 
-- Instance name
-- Site logo
-- Favicon
-- About page
-- Terms of Service page
-- Privacy Policy page
-- Copyright Policy (DMCA) page
-- Promo panel list items, e.g. blog site link
-- Soapbox extensions, e.g. Patron module
-- Default settings, e.g. default theme
+Soapbox was born out of the need to build independent platforms with **a unique identity and brand**.
 
-More details can be found in [Customizing Soapbox](docs/customization.md).
+This is in contrast to Mastodon's idea, where all servers are called "Mastodon" and use the Mastodon colors and logo. Users won't see the word "Soapbox" throughout the UI, they'll see the name of **your website** and your logo. To facilitate this, Soapbox has a robust customization UI and integrated moderation tools. Large servers are a priority.
+
+One disadvantage of this approach is that it does not help the software spread. Some of the biggest servers on the network and running Soapbox and people don't even know it!
 
 # License & Credits
 
-Soapbox is based on [Gab Social](https://code.gab.com/gab/social/gab-social)'s frontend which is in turn based on [Mastodon](https://github.com/tootsuite/mastodon/)'s frontend.
-
-- `static/sounds/chat.mp3` and `static/sounds/chat.oga` are from [notificationsounds.com](https://notificationsounds.com/notification-sounds/intuition-561) licensed under CC BY 4.0.
+© Alex Gleason & other Soapbox contributors  
+© Eugen Rochko & other Mastodon contributors  
+© Trump Media & Technology Group  
+© Gab AI, Inc.
 
 Soapbox is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
@@ -205,8 +84,8 @@ the Free Software Foundation, either version 3 of the License, or
 
 Soapbox is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
-along with Soapbox.  If not, see <https://www.gnu.org/licenses/>.
+along with Soapbox. If not, see <https://www.gnu.org/licenses/>.

app/application.ts

@@ -1,17 +0,0 @@
-import loadPolyfills from './soapbox/load-polyfills';
-
-// Load iframe event listener
-require('./soapbox/iframe');
-
-// @ts-ignore
-require.context('./assets/images/', true);
-
-// Load stylesheet
-require('react-datepicker/dist/react-datepicker.css');
-require('./styles/application.scss');
-
-loadPolyfills().then(() => {
-  require('./soapbox/main').default();
-}).catch(e => {
-  console.error(e);
-});

app/assets/fonts/OpenDyslexic/LICENSE

@@ -1,94 +0,0 @@
-Copyright (c) 2019-07-29, Abbie Gonzalez (https://abbiecod.es|support@abbiecod.es),
-with Reserved Font Name OpenDyslexic.
-Copyright (c) 12/2012 - 2019
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

app/assets/icons/COPYING.md

@@ -2,4 +2,4 @@
 
 - verified.svg - Created by Alex Gleason. CC0
 
-Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg  
+Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg

app/assets/images/soapbox-logo-white.svg

@@ -1 +1,107 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95" width="100" height="100"><path d="M94.909 19.374C94.909 8.674 86.235 0 75.534 0c-10.647 0-19.28 8.591-19.365 19.217l-15.631 2.09c-1.961-6.007-7.598-10.35-14.258-10.35-8.284 0-15.002 6.716-15.002 15.002 0 6.642 4.321 12.267 10.303 14.24l-2.205 16.056c-10.66.049-19.285 8.7-19.285 19.37C.091 86.325 8.765 95 19.466 95c10.677 0 19.332-8.638 19.37-19.304l18.093-2.501c1.979 5.972 7.598 10.285 14.234 10.285 8.284 0 15.002-6.716 15.002-15.002 0-6.891-4.652-12.682-10.983-14.441l1.365-15.339c10.229-.53 18.363-8.966 18.363-19.324zM56.194 67.8l-18.116 2.505a19.39 19.39 0 0 0-13.312-13.3l2.205-16.077a14.98 14.98 0 0 0 14.27-14.222l15.655-2.094c1.894 6.757 7.351 12.009 14.225 13.612l-1.365 15.322c-7.4.688-13.224 6.753-13.562 14.254z" fill="#ffffff"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="svg2"
+   style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
+   sodipodi:docname="soapbox-logo-white.svg"
+   xml:space="preserve"
+   version="1.1"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   viewBox="0 0 100 100"
+   width="100"
+   height="100"
+   inkscape:export-filename="/home/miklobit/Downloads/citizen4/logo/citizen4-logo-250px.png"
+   inkscape:export-xdpi="63.5"
+   inkscape:export-ydpi="63.5"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><sodipodi:namedview
+   id="namedview12"
+   bordercolor="#666666"
+   inkscape:pageshadow="2"
+   guidetolerance="10"
+   pagecolor="#ffffff"
+   gridtolerance="10"
+   inkscape:zoom="5.0135101"
+   objecttolerance="10"
+   borderopacity="1"
+   inkscape:current-layer="g1133"
+   inkscape:cx="54.253406"
+   inkscape:cy="42.086282"
+   inkscape:window-width="1920"
+   showgrid="false"
+   inkscape:pageopacity="0"
+   inkscape:window-height="1016"
+   inkscape:document-rotation="0"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:window-x="0"
+   inkscape:window-y="36"
+   inkscape:window-maximized="1"
+   units="mm"
+   inkscape:showpageshadow="2"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:document-units="px" />
+ <defs
+   id="defs4">
+  <style
+   id="style6"
+   type="text/css">
+    .fil0 {fill:black}
+  </style>
+ <clipPath
+   clipPathUnits="userSpaceOnUse"
+   id="clipPath932"><g
+     id="g936"
+     style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+     transform="matrix(40.327178,0,0,40.327178,-206.26309,-5.404074)">
+  <path
+   id="path934"
+   sodipodi:nodetypes="ccccc"
+   style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+   d="M 4.25,1.3382 0.4955,2.4662 C 0.58759,5.2588 1.2884,8.6655 4.25,9.6618 7.2442,8.694 7.8774,5.2291 8.0045,2.4662 Z" />
+ </g></clipPath><clipPath
+   clipPathUnits="userSpaceOnUse"
+   id="clipPath932-3"><g
+     id="g936-6"
+     style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+     transform="matrix(40.327178,0,0,40.327178,-206.26309,-5.404074)"><path
+       id="path934-7"
+       sodipodi:nodetypes="ccccc"
+       style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 4.25,1.3382 0.4955,2.4662 C 0.58759,5.2588 1.2884,8.6655 4.25,9.6618 7.2442,8.694 7.8774,5.2291 8.0045,2.4662 Z" /></g></clipPath>
+	
+	
+
+		
+	</defs>
+ 
+<metadata
+   id="metadata7"><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><cc:license
+         rdf:resource="http://creativecommons.org/licenses/by-nc-sa/4.0/" /><dc:date>2023-02-18T14:20:55</dc:date><dc:source>https://soc.citizen4.eu</dc:source><dc:subject><rdf:Bag><rdf:li>citizen4</rdf:li><rdf:li>logo</rdf:li><rdf:li>shield</rdf:li></rdf:Bag></dc:subject><dc:creator><cc:Agent><dc:title>miklo</dc:title></cc:Agent></dc:creator><dc:description>Citizen4 logo</dc:description></cc:Work><cc:License
+       rdf:about="http://creativecommons.org/licenses/by-nc-sa/4.0/"><cc:permits
+         rdf:resource="http://creativecommons.org/ns#Reproduction" /><cc:permits
+         rdf:resource="http://creativecommons.org/ns#Distribution" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#Notice" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#Attribution" /><cc:prohibits
+         rdf:resource="http://creativecommons.org/ns#CommercialUse" /><cc:permits
+         rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#ShareAlike" /></cc:License></rdf:RDF></metadata><g
+   inkscape:groupmode="layer"
+   id="g1133"
+   inkscape:label="citizen4"
+   style="display:inline;fill:#ffffff"
+   transform="translate(9.1709534,9.343974)"><g
+     id="g1149"
+     transform="matrix(0.28130772,0,0,0.28130772,-1.9206898,-6.7154381)"
+     style="fill:#ffffff"><path
+       id="path1127"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:2.298"
+       d="m 233.61288,175.15307 h -30.0693 v -8.40148 h -35.71547 v -22.85127 h 35.71317 v -8.40148 h 30.0716 c 1.31445,0 2.42898,0.4596 3.34818,1.3765 0.9169,0.9215 1.3788,2.03832 1.3788,3.34818 v 30.20487 c 0,1.22484 -0.4596,2.32098 -1.3788,3.28154 -0.9192,0.95827 -2.03602,1.44314 -3.34818,1.44314 z m 18.90793,-30.07388 c 6.91237,0 10.37315,3.41253 10.37315,10.24447 0,6.83195 -3.45618,10.24217 -10.37315,10.24217 -6.82735,0 -10.24218,-3.41482 -10.24218,-10.24217 0,-6.82734 3.41483,-10.24447 10.24218,-10.24447 z M 70.322893,175.15307 h 30.069297 v -8.40148 h 35.71546 v -22.85127 h -35.71317 v -8.40148 H 70.322893 c -1.31446,0 -2.42898,0.4596 -3.34818,1.3765 -0.9169,0.9215 -1.3788,2.03832 -1.3788,3.34818 v 30.20487 c 0,1.22484 0.4596,2.32098 1.3788,3.28154 0.9192,0.95827 2.03602,1.44314 3.34818,1.44314 z m -18.90793,-30.07388 c -6.91237,0 -10.37315,3.41253 -10.37315,10.24447 0,6.83195 3.45618,10.24217 10.37315,10.24217 6.82735,0 10.24218,-3.41482 10.24218,-10.24217 0,-6.82734 -3.41483,-10.24447 -10.24218,-10.24447 z M 171.79501,73.680969 v 30.069301 h -8.40148 v 35.71546 h -22.85128 v -35.71317 h -8.40147 V 73.680969 c 0,-1.31445 0.45959,-2.42898 1.37649,-3.34818 0.9215,-0.9169 2.03832,-1.3788 3.34819,-1.3788 h 30.20487 c 1.22483,0 2.32097,0.4596 3.28153,1.3788 0.95827,0.9192 1.44315,2.03602 1.44315,3.34818 z m -30.07388,-18.90793 c 0,-6.91237 3.41252,-10.37315 10.24446,-10.37315 6.83195,0 10.24218,3.45618 10.24218,10.37315 0,6.82735 -3.41482,10.24218 -10.24218,10.24218 -6.82734,0 -10.24446,-3.41483 -10.24446,-10.24218 z m 30.07388,182.197911 v -30.06929 h -8.40148 v -35.71547 h -22.85128 v 35.71317 h -8.40147 v 30.07159 c 0,1.31446 0.45959,2.42898 1.37649,3.34818 0.9215,0.9169 2.03832,1.3788 3.34819,1.3788 h 30.20487 c 1.22483,0 2.32097,-0.4596 3.28153,-1.3788 0.95827,-0.9192 1.44315,-2.03602 1.44315,-3.34818 z m -30.07388,18.90793 c 0,6.91237 3.41252,10.37315 10.24446,10.37315 6.83195,0 10.24218,-3.45618 10.24218,-10.37315 0,-6.82735 -3.41482,-10.24218 -10.24218,-10.24218 -6.82734,0 -10.24446,3.41483 -10.24446,10.24218 z M 151.92079,0.52207567 0.51240486,46.01113 C 4.2261345,158.6288 32.487823,296.01139 151.92079,336.18936 272.66842,297.16072 298.20359,157.43109 303.32917,46.01113 Z" /></g></g></svg>

app/assets/images/soapbox-logo.svg

@@ -1 +1,127 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95" width="100" height="100"><path d="M94.909 19.374C94.909 8.674 86.235 0 75.534 0c-10.647 0-19.28 8.591-19.365 19.217l-15.631 2.09c-1.961-6.007-7.598-10.35-14.258-10.35-8.284 0-15.002 6.716-15.002 15.002 0 6.642 4.321 12.267 10.303 14.24l-2.205 16.056c-10.66.049-19.285 8.7-19.285 19.37C.091 86.325 8.765 95 19.466 95c10.677 0 19.332-8.638 19.37-19.304l18.093-2.501c1.979 5.972 7.598 10.285 14.234 10.285 8.284 0 15.002-6.716 15.002-15.002 0-6.891-4.652-12.682-10.983-14.441l1.365-15.339c10.229-.53 18.363-8.966 18.363-19.324zM56.194 67.8l-18.116 2.505a19.39 19.39 0 0 0-13.312-13.3l2.205-16.077a14.98 14.98 0 0 0 14.27-14.222l15.655-2.094c1.894 6.757 7.351 12.009 14.225 13.612l-1.365 15.322c-7.4.688-13.224 6.753-13.562 14.254z" fill="#0482d8"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="svg2"
+   style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
+   sodipodi:docname="soapbox-logo.svg"
+   xml:space="preserve"
+   version="1.1"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   viewBox="0 0 100 100"
+   width="100"
+   height="100"
+   inkscape:export-filename="/home/miklobit/Downloads/citizen4/logo/citizen4-logo-250px.png"
+   inkscape:export-xdpi="63.5"
+   inkscape:export-ydpi="63.5"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><sodipodi:namedview
+   id="namedview12"
+   bordercolor="#666666"
+   inkscape:pageshadow="2"
+   guidetolerance="10"
+   pagecolor="#ffffff"
+   gridtolerance="10"
+   inkscape:zoom="5.0135101"
+   objecttolerance="10"
+   borderopacity="1"
+   inkscape:current-layer="svg2"
+   inkscape:cx="54.253406"
+   inkscape:cy="42.086282"
+   inkscape:window-width="1920"
+   showgrid="false"
+   inkscape:pageopacity="0"
+   inkscape:window-height="1016"
+   inkscape:document-rotation="0"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:window-x="0"
+   inkscape:window-y="36"
+   inkscape:window-maximized="1"
+   units="mm"
+   inkscape:showpageshadow="2"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"
+   inkscape:document-units="px" />
+ <defs
+   id="defs4">
+  <style
+   id="style6"
+   type="text/css">
+    .fil0 {fill:black}
+  </style>
+ <clipPath
+   clipPathUnits="userSpaceOnUse"
+   id="clipPath932"><g
+     id="g936"
+     style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+     transform="matrix(40.327178,0,0,40.327178,-206.26309,-5.404074)">
+  <path
+   id="path934"
+   sodipodi:nodetypes="ccccc"
+   style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+   d="M 4.25,1.3382 0.4955,2.4662 C 0.58759,5.2588 1.2884,8.6655 4.25,9.6618 7.2442,8.694 7.8774,5.2291 8.0045,2.4662 Z" />
+ </g></clipPath><clipPath
+   clipPathUnits="userSpaceOnUse"
+   id="clipPath932-3"><g
+     id="g936-6"
+     style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+     transform="matrix(40.327178,0,0,40.327178,-206.26309,-5.404074)"><path
+       id="path934-7"
+       sodipodi:nodetypes="ccccc"
+       style="fill:#ffffff;stroke:#000000;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 4.25,1.3382 0.4955,2.4662 C 0.58759,5.2588 1.2884,8.6655 4.25,9.6618 7.2442,8.694 7.8774,5.2291 8.0045,2.4662 Z" /></g></clipPath>
+	
+	
+
+		
+	</defs>
+ 
+<metadata
+   id="metadata7"><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><cc:license
+         rdf:resource="http://creativecommons.org/licenses/by-nc-sa/4.0/" /><dc:date>2023-02-18T14:20:55</dc:date><dc:source>https://soc.citizen4.eu</dc:source><dc:subject><rdf:Bag><rdf:li>citizen4</rdf:li><rdf:li>logo</rdf:li><rdf:li>shield</rdf:li></rdf:Bag></dc:subject><dc:creator><cc:Agent><dc:title>miklo</dc:title></cc:Agent></dc:creator><dc:description>Citizen4 logo</dc:description></cc:Work><cc:License
+       rdf:about="http://creativecommons.org/licenses/by-nc-sa/4.0/"><cc:permits
+         rdf:resource="http://creativecommons.org/ns#Reproduction" /><cc:permits
+         rdf:resource="http://creativecommons.org/ns#Distribution" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#Notice" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#Attribution" /><cc:prohibits
+         rdf:resource="http://creativecommons.org/ns#CommercialUse" /><cc:permits
+         rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /><cc:requires
+         rdf:resource="http://creativecommons.org/ns#ShareAlike" /></cc:License></rdf:RDF></metadata><g
+   inkscape:groupmode="layer"
+   id="layer1"
+   inkscape:label="shield"
+   style="display:inline"
+   transform="translate(9.1709534,9.343974)"><g
+     id="g912"
+     style="clip-rule:evenodd;fill:#003399;fill-opacity:1;fill-rule:evenodd;stroke:#888888;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
+     transform="matrix(11.344346,0,0,11.344346,-7.3976698,-21.749578)"><path
+       id="path910"
+       sodipodi:nodetypes="ccccc"
+       style="fill:#003399;fill-opacity:1;stroke:#888888;stroke-width:0.468608;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 4.25,1.3382 0.4955,2.4662 C 0.58759,5.2588 1.2884,8.6655 4.25,9.6618 7.2442,8.694 7.8774,5.2291 8.0045,2.4662 Z" /></g></g><g
+   inkscape:groupmode="layer"
+   id="g1133"
+   inkscape:label="citizen2"
+   style="display:inline"
+   transform="translate(9.1709534,9.343974)"><g
+     id="g1149"
+     transform="matrix(0.28130772,0,0,0.28130772,-1.9206898,-6.7154381)"><path
+       id="path1119"
+       style="fill:#ffcc00;fill-opacity:1;stroke-width:2.298"
+       d="m 171.79501,236.97095 v -30.06929 h -8.40148 v -35.71547 h -22.85128 v 35.71317 h -8.40147 v 30.07159 c 0,1.31446 0.45959,2.42898 1.37649,3.34818 0.9215,0.9169 2.03832,1.3788 3.34819,1.3788 h 30.20487 c 1.22483,0 2.32097,-0.4596 3.28153,-1.3788 0.95827,-0.9192 1.44315,-2.03602 1.44315,-3.34818 z m -30.07388,18.90793 c 0,6.91237 3.41252,10.37315 10.24446,10.37315 6.83195,0 10.24218,-3.45618 10.24218,-10.37315 0,-6.82735 -3.41482,-10.24218 -10.24218,-10.24218 -6.82734,0 -10.24446,3.41483 -10.24446,10.24218 z" /><path
+       id="path1121"
+       style="fill:#ffcc00;fill-opacity:1;stroke-width:2.298"
+       d="m 171.79501,73.680969 v 30.069301 h -8.40148 v 35.71546 h -22.85128 v -35.71317 h -8.40147 V 73.680969 c 0,-1.31445 0.45959,-2.42898 1.37649,-3.34818 0.9215,-0.9169 2.03832,-1.3788 3.34819,-1.3788 h 30.20487 c 1.22483,0 2.32097,0.4596 3.28153,1.3788 0.95827,0.9192 1.44315,2.03602 1.44315,3.34818 z m -30.07388,-18.90793 c 0,-6.91237 3.41252,-10.37315 10.24446,-10.37315 6.83195,0 10.24218,3.45618 10.24218,10.37315 0,6.82735 -3.41482,10.24218 -10.24218,10.24218 -6.82734,0 -10.24446,-3.41483 -10.24446,-10.24218 z" /><path
+       id="path1125"
+       style="fill:#ffcc00;fill-opacity:1;stroke-width:2.298"
+       d="m 70.322893,175.15307 h 30.069297 v -8.40148 h 35.71546 v -22.85127 h -35.71317 v -8.40148 H 70.322893 c -1.31446,0 -2.42898,0.4596 -3.34818,1.3765 -0.9169,0.9215 -1.3788,2.03832 -1.3788,3.34818 v 30.20487 c 0,1.22484 0.4596,2.32098 1.3788,3.28154 0.9192,0.95827 2.03602,1.44314 3.34818,1.44314 z m -18.90793,-30.07388 c -6.91237,0 -10.37315,3.41253 -10.37315,10.24447 0,6.83195 3.45618,10.24217 10.37315,10.24217 6.82735,0 10.24218,-3.41482 10.24218,-10.24217 0,-6.82734 -3.41483,-10.24447 -10.24218,-10.24447 z" /><path
+       id="path1127"
+       style="fill:#ffcc00;fill-opacity:1;stroke-width:2.298"
+       d="m 233.61288,175.15307 h -30.0693 v -8.40148 h -35.71547 v -22.85127 h 35.71317 v -8.40148 h 30.0716 c 1.31445,0 2.42898,0.4596 3.34818,1.3765 0.9169,0.9215 1.3788,2.03832 1.3788,3.34818 v 30.20487 c 0,1.22484 -0.4596,2.32098 -1.3788,3.28154 -0.9192,0.95827 -2.03602,1.44314 -3.34818,1.44314 z m 18.90793,-30.07388 c 6.91237,0 10.37315,3.41253 10.37315,10.24447 0,6.83195 -3.45618,10.24217 -10.37315,10.24217 -6.82735,0 -10.24218,-3.41482 -10.24218,-10.24217 0,-6.82734 3.41483,-10.24447 10.24218,-10.24447 z" /></g></g></svg>

app/assets/sounds/LICENSE.md

@@ -0,0 +1,6 @@
+# Sound licenses
+
+- `chat.mp3`
+- `chat.oga`
+
+© [notificationsounds.com](https://notificationsounds.com/notification-sounds/intuition-561), licensed under [CC BY 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

app/index.ejs

@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="referrer" content="same-origin" />
     <link href="/manifest.json" rel="manifest">
     <!--server-generated-meta-->
     <%= snippets %>

app/soapbox/__fixtures__/group-truthsocial.json

@@ -0,0 +1,16 @@
+{
+  "note": "patriots 900000001",
+  "discoverable": true,
+  "id": "109989480368015378",
+  "domain": null,
+  "avatar": "https://media.covfefe.social/groups/avatars/109/989/480/368/015/378/original/50b0d899bc5aae13.jpg",
+  "avatar_static": "https://media.covfefe.social/groups/avatars/109/989/480/368/015/378/original/50b0d899bc5aae13.jpg",
+  "header": "https://media.covfefe.social/groups/headers/109/989/480/368/015/378/original/c5063b59f919cd4a.png",
+  "header_static": "https://media.covfefe.social/groups/headers/109/989/480/368/015/378/original/c5063b59f919cd4a.png",
+  "group_visibility": "everyone",
+  "created_at": "2023-03-08T00:00:00.000Z",
+  "display_name": "PATRIOT PATRIOTS",
+  "membership_required": true,
+  "members_count": 1,
+  "tags": []
+}

app/soapbox/__tests__/toast.test.tsx

@@ -0,0 +1,166 @@
+import { render } from '@testing-library/react';
+import { AxiosError } from 'axios';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+import { act, screen } from 'soapbox/jest/test-helpers';
+
+function renderApp() {
+  const { Toaster } = require('react-hot-toast');
+  const toast = require('../toast').default;
+
+  return {
+    toast,
+    ...render(
+      <IntlProvider locale='en'>
+        <Toaster />,
+      </IntlProvider>,
+    ),
+  };
+}
+
+beforeAll(() => {
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  (console.error as any).mockClear();
+});
+
+afterAll(() => {
+  (console.error as any).mockRestore();
+});
+
+describe('toasts', () =>{
+  it('renders successfully', async() => {
+    const { toast } = renderApp();
+
+    act(() => {
+      toast.success('hello');
+    });
+
+    expect(screen.getByTestId('toast')).toBeInTheDocument();
+    expect(screen.getByTestId('toast-message')).toHaveTextContent('hello');
+  });
+
+  describe('actionable button', () => {
+    it('renders the button', async() => {
+      const { toast } = renderApp();
+
+      act(() => {
+        toast.success('hello', { action: () => null, actionLabel: 'click me' });
+      });
+
+      expect(screen.getByTestId('toast-action')).toHaveTextContent('click me');
+    });
+
+    it('does not render the button', async() => {
+      const { toast } = renderApp();
+
+      act(() => {
+        toast.success('hello');
+      });
+
+      expect(screen.queryAllByTestId('toast-action')).toHaveLength(0);
+    });
+  });
+
+  describe('showAlertForError()', () => {
+    const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), undefined, null, {
+      data: {
+        error: message,
+      },
+      statusText: String(status),
+      status,
+      headers: {},
+      config: {},
+    });
+
+    describe('with a 502 status code', () => {
+      it('renders the correct message', async() => {
+        const message = 'The server is down';
+        const error = buildError(message, 502);
+        const { toast } = renderApp();
+
+        act(() => {
+          toast.showAlertForError(error);
+        });
+
+        expect(screen.getByTestId('toast')).toBeInTheDocument();
+        expect(screen.getByTestId('toast-message')).toHaveTextContent('The server is down');
+      });
+    });
+
+    describe('with a 404 status code', () => {
+      it('renders the correct message', async() => {
+        const error = buildError('', 404);
+        const { toast } = renderApp();
+
+        act(() => {
+          toast.showAlertForError(error);
+        });
+
+        expect(screen.queryAllByTestId('toast')).toHaveLength(0);
+      });
+    });
+
+    describe('with a 410 status code', () => {
+      it('renders the correct message', async() => {
+        const error = buildError('', 410);
+        const { toast } = renderApp();
+
+        act(() => {
+          toast.showAlertForError(error);
+        });
+
+        expect(screen.queryAllByTestId('toast')).toHaveLength(0);
+      });
+    });
+
+    describe('with an accepted status code', () => {
+      describe('with a message from the server', () => {
+        it('renders the correct message', async() => {
+          const message = 'custom message';
+          const error = buildError(message, 200);
+          const { toast } = renderApp();
+
+          act(() => {
+            toast.showAlertForError(error);
+          });
+
+          expect(screen.getByTestId('toast')).toBeInTheDocument();
+          expect(screen.getByTestId('toast-message')).toHaveTextContent(message);
+        });
+      });
+
+      describe('without a message from the server', () => {
+        it('renders the correct message', async() => {
+          const message = 'The request has been accepted for processing';
+          const error = buildError(message, 202);
+          const { toast } = renderApp();
+
+          act(() => {
+            toast.showAlertForError(error);
+          });
+
+          expect(screen.getByTestId('toast')).toBeInTheDocument();
+          expect(screen.getByTestId('toast-message')).toHaveTextContent(message);
+        });
+      });
+    });
+
+    describe('without a response', () => {
+      it('renders the default message', async() => {
+        const error = new AxiosError();
+        const { toast } = renderApp();
+
+        act(() => {
+          toast.showAlertForError(error);
+        });
+
+        expect(screen.getByTestId('toast')).toBeInTheDocument();
+        expect(screen.getByTestId('toast-message')).toHaveTextContent('An unexpected error occurred.');
+      });
+    });
+  });
+});

app/soapbox/actions/__tests__/alerts.test.ts

@@ -1,146 +0,0 @@
-import { AxiosError } from 'axios';
-
-import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-
-import { dismissAlert, showAlert, showAlertForError } from '../alerts';
-
-const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), undefined, null, {
-  data: {
-    error: message,
-  },
-  statusText: String(status),
-  status,
-  headers: {},
-  config: {},
-});
-
-let store: ReturnType<typeof mockStore>;
-
-beforeEach(() => {
-  const state = rootState;
-  store = mockStore(state);
-});
-
-describe('dismissAlert()', () => {
-  it('dispatches the proper actions', async() => {
-    const alert = 'hello world';
-    const expectedActions = [
-      { type: 'ALERT_DISMISS', alert },
-    ];
-    await store.dispatch(dismissAlert(alert as any));
-    const actions = store.getActions();
-
-    expect(actions).toEqual(expectedActions);
-  });
-});
-
-describe('showAlert()', () => {
-  it('dispatches the proper actions', async() => {
-    const title = 'title';
-    const message = 'msg';
-    const severity = 'info';
-    const expectedActions = [
-      { type: 'ALERT_SHOW', title, message, severity },
-    ];
-    await store.dispatch(showAlert(title, message, severity));
-    const actions = store.getActions();
-
-    expect(actions).toEqual(expectedActions);
-  });
-});
-
-describe('showAlert()', () => {
-  describe('with a 502 status code', () => {
-    it('dispatches the proper actions', async() => {
-      const message = 'The server is down';
-      const error = buildError(message, 502);
-
-      const expectedActions = [
-        { type: 'ALERT_SHOW', title: '', message, severity: 'error' },
-      ];
-      await store.dispatch(showAlertForError(error));
-      const actions = store.getActions();
-
-      expect(actions).toEqual(expectedActions);
-    });
-  });
-
-  describe('with a 404 status code', () => {
-    it('dispatches the proper actions', async() => {
-      const error = buildError('', 404);
-
-      await store.dispatch(showAlertForError(error));
-      const actions = store.getActions();
-
-      expect(actions).toEqual([]);
-    });
-  });
-
-  describe('with a 410 status code', () => {
-    it('dispatches the proper actions', async() => {
-      const error = buildError('', 410);
-
-      await store.dispatch(showAlertForError(error));
-      const actions = store.getActions();
-
-      expect(actions).toEqual([]);
-    });
-  });
-
-  describe('with an accepted status code', () => {
-    describe('with a message from the server', () => {
-      it('dispatches the proper actions', async() => {
-        const message = 'custom message';
-        const error = buildError(message, 200);
-
-        const expectedActions = [
-          { type: 'ALERT_SHOW', title: '', message, severity: 'error' },
-        ];
-        await store.dispatch(showAlertForError(error));
-        const actions = store.getActions();
-
-        expect(actions).toEqual(expectedActions);
-      });
-    });
-
-    describe('without a message from the server', () => {
-      it('dispatches the proper actions', async() => {
-        const message = 'The request has been accepted for processing';
-        const error = buildError(message, 202);
-
-        const expectedActions = [
-          { type: 'ALERT_SHOW', title: '', message, severity: 'error' },
-        ];
-        await store.dispatch(showAlertForError(error));
-        const actions = store.getActions();
-
-        expect(actions).toEqual(expectedActions);
-      });
-    });
-  });
-
-  describe('without a response', () => {
-    it('dispatches the proper actions', async() => {
-      const error = new AxiosError();
-
-      const expectedActions = [
-        {
-          type: 'ALERT_SHOW',
-          title: {
-            defaultMessage: 'Oops!',
-            id: 'alert.unexpected.title',
-          },
-          message: {
-            defaultMessage: 'An unexpected error occurred.',
-            id: 'alert.unexpected.message',
-          },
-          severity: 'error',
-        },
-      ];
-      await store.dispatch(showAlertForError(error));
-      const actions = store.getActions();
-
-      expect(actions).toEqual(expectedActions);
-    });
-  });
-});

app/soapbox/actions/__tests__/compose.test.ts

@@ -46,13 +46,6 @@ describe('uploadCompose()', () => {
 
       const expectedActions = [
         { type: 'COMPOSE_UPLOAD_REQUEST', id: 'home', skipLoading: true },
-        {
-          type: 'ALERT_SHOW',
-          message: 'Image exceeds the current file size limit (10 Bytes)',
-          actionLabel: undefined,
-          actionLink: undefined,
-          severity: 'error',
-        },
         { type: 'COMPOSE_UPLOAD_FAIL', id: 'home', error: true, skipLoading: true },
       ];
 
@@ -99,13 +92,6 @@ describe('uploadCompose()', () => {
 
       const expectedActions = [
         { type: 'COMPOSE_UPLOAD_REQUEST', id: 'home', skipLoading: true },
-        {
-          type: 'ALERT_SHOW',
-          message: 'Video exceeds the current file size limit (10 Bytes)',
-          actionLabel: undefined,
-          actionLink: undefined,
-          severity: 'error',
-        },
         { type: 'COMPOSE_UPLOAD_FAIL', id: 'home', error: true, skipLoading: true },
       ];
 

app/soapbox/actions/__tests__/me.test.ts

@@ -2,7 +2,9 @@ import { Map as ImmutableMap } from 'immutable';
 
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
+import { AccountRecord } from 'soapbox/normalizers';
 
+import { AuthUserRecord, ReducerRecord } from '../../reducers/auth';
 import {
   fetchMe, patchMe,
 } from '../me';
@@ -38,18 +40,18 @@ describe('fetchMe()', () => {
 
     beforeEach(() => {
       const state = rootState
-        .set('auth', ImmutableMap({
+        .set('auth', ReducerRecord({
           me: accountUrl,
           users: ImmutableMap({
-            [accountUrl]: ImmutableMap({
+            [accountUrl]: AuthUserRecord({
               'access_token': token,
             }),
           }),
         }))
         .set('accounts', ImmutableMap({
-          [accountUrl]: {
+          [accountUrl]: AccountRecord({
             url: accountUrl,
-          },
+          }),
         }) as any);
       store = mockStore(state);
     });
@@ -112,4 +114,4 @@ describe('patchMe()', () => {
       expect(actions).toEqual(expectedActions);
     });
   });
-});
+});

app/soapbox/actions/accounts.ts

@@ -10,10 +10,10 @@ import {
 } from './importer';
 
 import type { AxiosError, CancelToken } from 'axios';
-import type { History } from 'history';
 import type { Map as ImmutableMap } from 'immutable';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity, Status } from 'soapbox/types/entities';
+import type { History } from 'soapbox/types/history';
 
 const ACCOUNT_CREATE_REQUEST = 'ACCOUNT_CREATE_REQUEST';
 const ACCOUNT_CREATE_SUCCESS = 'ACCOUNT_CREATE_SUCCESS';
@@ -228,7 +228,7 @@ const fetchAccountFail = (id: string | null, error: AxiosError) => ({
 });
 
 type FollowAccountOpts = {
-  reblogs?: boolean,
+  reblogs?: boolean
   notify?: boolean
 };
 

app/soapbox/actions/admin.ts

@@ -1,13 +1,18 @@
+import { defineMessages } from 'react-intl';
+
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer';
+import toast from 'soapbox/toast';
 import { filterBadges, getTagDiff } from 'soapbox/utils/badges';
 import { getFeatures } from 'soapbox/utils/features';
 
 import api, { getLinks } from '../api';
 
+import { openModal } from './modals';
+
 import type { AxiosResponse } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity, Announcement } from 'soapbox/types/entities';
 
 const ADMIN_CONFIG_FETCH_REQUEST = 'ADMIN_CONFIG_FETCH_REQUEST';
 const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS';
@@ -77,6 +82,45 @@ const ADMIN_USERS_UNSUGGEST_REQUEST = 'ADMIN_USERS_UNSUGGEST_REQUEST';
 const ADMIN_USERS_UNSUGGEST_SUCCESS = 'ADMIN_USERS_UNSUGGEST_SUCCESS';
 const ADMIN_USERS_UNSUGGEST_FAIL    = 'ADMIN_USERS_UNSUGGEST_FAIL';
 
+const ADMIN_USER_INDEX_EXPAND_FAIL    = 'ADMIN_USER_INDEX_EXPAND_FAIL';
+const ADMIN_USER_INDEX_EXPAND_REQUEST = 'ADMIN_USER_INDEX_EXPAND_REQUEST';
+const ADMIN_USER_INDEX_EXPAND_SUCCESS = 'ADMIN_USER_INDEX_EXPAND_SUCCESS';
+
+const ADMIN_USER_INDEX_FETCH_FAIL    = 'ADMIN_USER_INDEX_FETCH_FAIL';
+const ADMIN_USER_INDEX_FETCH_REQUEST = 'ADMIN_USER_INDEX_FETCH_REQUEST';
+const ADMIN_USER_INDEX_FETCH_SUCCESS = 'ADMIN_USER_INDEX_FETCH_SUCCESS';
+
+const ADMIN_USER_INDEX_QUERY_SET = 'ADMIN_USER_INDEX_QUERY_SET';
+
+const ADMIN_ANNOUNCEMENTS_FETCH_FAIL    = 'ADMIN_ANNOUNCEMENTS_FETCH_FAILS';
+const ADMIN_ANNOUNCEMENTS_FETCH_REQUEST = 'ADMIN_ANNOUNCEMENTS_FETCH_REQUEST';
+const ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS = 'ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS';
+
+const ADMIN_ANNOUNCEMENTS_EXPAND_FAIL    = 'ADMIN_ANNOUNCEMENTS_EXPAND_FAILS';
+const ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST = 'ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST';
+const ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS = 'ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS';
+
+const ADMIN_ANNOUNCEMENT_CHANGE_CONTENT    = 'ADMIN_ANNOUNCEMENT_CHANGE_CONTENT';
+const ADMIN_ANNOUNCEMENT_CHANGE_START_TIME = 'ADMIN_ANNOUNCEMENT_CHANGE_START_TIME';
+const ADMIN_ANNOUNCEMENT_CHANGE_END_TIME   = 'ADMIN_ANNOUNCEMENT_CHANGE_END_TIME';
+const ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY    = 'ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY';
+
+const ADMIN_ANNOUNCEMENT_CREATE_REQUEST = 'ADMIN_ANNOUNCEMENT_CREATE_REQUEST';
+const ADMIN_ANNOUNCEMENT_CREATE_SUCCESS = 'ADMIN_ANNOUNCEMENT_CREATE_REQUEST';
+const ADMIN_ANNOUNCEMENT_CREATE_FAIL    = 'ADMIN_ANNOUNCEMENT_CREATE_FAIL';
+
+const ADMIN_ANNOUNCEMENT_DELETE_REQUEST = 'ADMIN_ANNOUNCEMENT_DELETE_REQUEST';
+const ADMIN_ANNOUNCEMENT_DELETE_SUCCESS = 'ADMIN_ANNOUNCEMENT_DELETE_REQUEST';
+const ADMIN_ANNOUNCEMENT_DELETE_FAIL    = 'ADMIN_ANNOUNCEMENT_DELETE_FAIL';
+
+const ADMIN_ANNOUNCEMENT_MODAL_INIT = 'ADMIN_ANNOUNCEMENT_MODAL_INIT';
+
+const messages = defineMessages({
+  announcementCreateSuccess: { id: 'admin.edit_announcement.created', defaultMessage: 'Announcement created' },
+  announcementDeleteSuccess: { id: 'admin.edit_announcement.deleted', defaultMessage: 'Announcement deleted' },
+  announcementUpdateSuccess: { id: 'admin.edit_announcement.updated', defaultMessage: 'Announcement edited' },
+});
+
 const nicknamesFromIds = (getState: () => RootState, ids: string[]) => ids.map(id => getState().accounts.get(id)!.acct);
 
 const fetchConfig = () =>
@@ -103,6 +147,19 @@ const updateConfig = (configs: Record<string, any>[]) =>
       });
   };
 
+const updateSoapboxConfig = (data: Record<string, any>) =>
+  (dispatch: AppDispatch, _getState: () => RootState) => {
+    const params = [{
+      group: ':pleroma',
+      key: ':frontend_configurations',
+      value: [{
+        tuple: [':soapbox_fe', data],
+      }],
+    }];
+
+    return dispatch(updateConfig(params));
+  };
+
 const fetchMastodonReports = (params: Record<string, any>) =>
   (dispatch: AppDispatch, getState: () => RootState) =>
     api(getState)
@@ -531,6 +588,137 @@ const unsuggestUsers = (accountIds: string[]) =>
       });
   };
 
+const setUserIndexQuery = (query: string) => ({ type: ADMIN_USER_INDEX_QUERY_SET, query });
+
+const fetchUserIndex = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const { filters, page, query, pageSize, isLoading } = getState().admin_user_index;
+
+    if (isLoading) return;
+
+    dispatch({ type: ADMIN_USER_INDEX_FETCH_REQUEST });
+
+    dispatch(fetchUsers(filters.toJS() as string[], page + 1, query, pageSize))
+      .then((data: any) => {
+        if (data.error) {
+          dispatch({ type: ADMIN_USER_INDEX_FETCH_FAIL });
+        } else {
+          const { users, count, next } = (data);
+          dispatch({ type: ADMIN_USER_INDEX_FETCH_SUCCESS, users, count, next });
+        }
+      }).catch(() => {
+        dispatch({ type: ADMIN_USER_INDEX_FETCH_FAIL });
+      });
+  };
+
+const expandUserIndex = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const { filters, page, query, pageSize, isLoading, next, loaded } = getState().admin_user_index;
+
+    if (!loaded || isLoading) return;
+
+    dispatch({ type: ADMIN_USER_INDEX_EXPAND_REQUEST });
+
+    dispatch(fetchUsers(filters.toJS() as string[], page + 1, query, pageSize, next))
+      .then((data: any) => {
+        if (data.error) {
+          dispatch({ type: ADMIN_USER_INDEX_EXPAND_FAIL });
+        } else {
+          const { users, count, next } = (data);
+          dispatch({ type: ADMIN_USER_INDEX_EXPAND_SUCCESS, users, count, next });
+        }
+      }).catch(() => {
+        dispatch({ type: ADMIN_USER_INDEX_EXPAND_FAIL });
+      });
+  };
+
+const fetchAdminAnnouncements = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: ADMIN_ANNOUNCEMENTS_FETCH_REQUEST });
+    return api(getState)
+      .get('/api/pleroma/admin/announcements', { params: { limit: 50 } })
+      .then(({ data }) => {
+        dispatch({ type: ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS, announcements: data });
+        return data;
+      }).catch(error => {
+        dispatch({ type: ADMIN_ANNOUNCEMENTS_FETCH_FAIL, error });
+      });
+  };
+
+const expandAdminAnnouncements = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const page = getState().admin_announcements.page;
+
+    dispatch({ type: ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST });
+    return api(getState)
+      .get('/api/pleroma/admin/announcements', { params: { limit: 50, offset: page * 50 } })
+      .then(({ data }) => {
+        dispatch({ type: ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS, announcements: data });
+        return data;
+      }).catch(error => {
+        dispatch({ type: ADMIN_ANNOUNCEMENTS_EXPAND_FAIL, error });
+      });
+  };
+
+const changeAnnouncementContent = (content: string) => ({
+  type: ADMIN_ANNOUNCEMENT_CHANGE_CONTENT,
+  value: content,
+});
+
+const changeAnnouncementStartTime = (time: Date | null) => ({
+  type: ADMIN_ANNOUNCEMENT_CHANGE_START_TIME,
+  value: time,
+});
+
+const changeAnnouncementEndTime = (time: Date | null) => ({
+  type: ADMIN_ANNOUNCEMENT_CHANGE_END_TIME,
+  value: time,
+});
+
+const changeAnnouncementAllDay = (allDay: boolean) => ({
+  type: ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY,
+  value: allDay,
+});
+
+const handleCreateAnnouncement = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: ADMIN_ANNOUNCEMENT_CREATE_REQUEST });
+
+    const { id, content, starts_at, ends_at, all_day } = getState().admin_announcements.form;
+
+    return api(getState)[id ? 'patch' : 'post'](
+      id ? `/api/pleroma/admin/announcements/${id}` : '/api/pleroma/admin/announcements',
+      { content, starts_at, ends_at, all_day },
+    ).then(({ data }) => {
+      dispatch({ type: ADMIN_ANNOUNCEMENT_CREATE_SUCCESS, announcement: data });
+      toast.success(id ? messages.announcementUpdateSuccess : messages.announcementCreateSuccess);
+      dispatch(fetchAdminAnnouncements());
+      return data;
+    }).catch(error => {
+      dispatch({ type: ADMIN_ANNOUNCEMENT_CREATE_FAIL, error });
+    });
+  };
+
+const deleteAnnouncement = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: ADMIN_ANNOUNCEMENT_DELETE_REQUEST, id });
+
+    return api(getState).delete(`/api/pleroma/admin/announcements/${id}`).then(({ data }) => {
+      dispatch({ type: ADMIN_ANNOUNCEMENT_DELETE_SUCCESS, id });
+      toast.success(messages.announcementDeleteSuccess);
+      dispatch(fetchAdminAnnouncements());
+      return data;
+    }).catch(error => {
+      dispatch({ type: ADMIN_ANNOUNCEMENT_DELETE_FAIL, id, error });
+    });
+  };
+
+const initAnnouncementModal = (announcement?: Announcement) =>
+  (dispatch: AppDispatch) => {
+    dispatch({ type: ADMIN_ANNOUNCEMENT_MODAL_INIT, announcement });
+    dispatch(openModal('EDIT_ANNOUNCEMENT'));
+  };
+
 export {
   ADMIN_CONFIG_FETCH_REQUEST,
   ADMIN_CONFIG_FETCH_SUCCESS,
@@ -583,8 +771,33 @@ export {
   ADMIN_USERS_UNSUGGEST_REQUEST,
   ADMIN_USERS_UNSUGGEST_SUCCESS,
   ADMIN_USERS_UNSUGGEST_FAIL,
+  ADMIN_USER_INDEX_EXPAND_FAIL,
+  ADMIN_USER_INDEX_EXPAND_REQUEST,
+  ADMIN_USER_INDEX_EXPAND_SUCCESS,
+  ADMIN_USER_INDEX_FETCH_FAIL,
+  ADMIN_USER_INDEX_FETCH_REQUEST,
+  ADMIN_USER_INDEX_FETCH_SUCCESS,
+  ADMIN_USER_INDEX_QUERY_SET,
+  ADMIN_ANNOUNCEMENTS_FETCH_FAIL,
+  ADMIN_ANNOUNCEMENTS_FETCH_REQUEST,
+  ADMIN_ANNOUNCEMENTS_FETCH_SUCCESS,
+  ADMIN_ANNOUNCEMENTS_EXPAND_FAIL,
+  ADMIN_ANNOUNCEMENTS_EXPAND_REQUEST,
+  ADMIN_ANNOUNCEMENTS_EXPAND_SUCCESS,
+  ADMIN_ANNOUNCEMENT_CHANGE_CONTENT,
+  ADMIN_ANNOUNCEMENT_CHANGE_START_TIME,
+  ADMIN_ANNOUNCEMENT_CHANGE_END_TIME,
+  ADMIN_ANNOUNCEMENT_CHANGE_ALL_DAY,
+  ADMIN_ANNOUNCEMENT_CREATE_FAIL,
+  ADMIN_ANNOUNCEMENT_CREATE_REQUEST,
+  ADMIN_ANNOUNCEMENT_CREATE_SUCCESS,
+  ADMIN_ANNOUNCEMENT_DELETE_FAIL,
+  ADMIN_ANNOUNCEMENT_DELETE_REQUEST,
+  ADMIN_ANNOUNCEMENT_DELETE_SUCCESS,
+  ADMIN_ANNOUNCEMENT_MODAL_INIT,
   fetchConfig,
   updateConfig,
+  updateSoapboxConfig,
   fetchReports,
   closeReports,
   fetchUsers,
@@ -608,4 +821,16 @@ export {
   setRole,
   suggestUsers,
   unsuggestUsers,
+  setUserIndexQuery,
+  fetchUserIndex,
+  expandUserIndex,
+  fetchAdminAnnouncements,
+  expandAdminAnnouncements,
+  changeAnnouncementContent,
+  changeAnnouncementStartTime,
+  changeAnnouncementEndTime,
+  changeAnnouncementAllDay,
+  handleCreateAnnouncement,
+  deleteAnnouncement,
+  initAnnouncementModal,
 };

app/soapbox/actions/alerts.ts

@@ -1,75 +0,0 @@
-import { defineMessages, MessageDescriptor } from 'react-intl';
-
-import { httpErrorMessages } from 'soapbox/utils/errors';
-
-import type { SnackbarActionSeverity } from './snackbar';
-import type { AnyAction } from '@reduxjs/toolkit';
-import type { AxiosError } from 'axios';
-import type { NotificationObject } from 'react-notification';
-
-const messages = defineMessages({
-  unexpectedTitle: { id: 'alert.unexpected.title', defaultMessage: 'Oops!' },
-  unexpectedMessage: { id: 'alert.unexpected.message', defaultMessage: 'An unexpected error occurred.' },
-});
-
-export const ALERT_SHOW = 'ALERT_SHOW';
-export const ALERT_DISMISS = 'ALERT_DISMISS';
-export const ALERT_CLEAR = 'ALERT_CLEAR';
-
-const noOp = () => { };
-
-function dismissAlert(alert: NotificationObject) {
-  return {
-    type: ALERT_DISMISS,
-    alert,
-  };
-}
-
-function showAlert(
-  title: MessageDescriptor | string = messages.unexpectedTitle,
-  message: MessageDescriptor | string = messages.unexpectedMessage,
-  severity: SnackbarActionSeverity = 'info',
-) {
-  return {
-    type: ALERT_SHOW,
-    title,
-    message,
-    severity,
-  };
-}
-
-const showAlertForError = (error: AxiosError<any>) => (dispatch: React.Dispatch<AnyAction>, _getState: any) => {
-  if (error?.response) {
-    const { data, status, statusText } = error.response;
-
-    if (status === 502) {
-      return dispatch(showAlert('', 'The server is down', 'error'));
-    }
-
-    if (status === 404 || status === 410) {
-      // Skip these errors as they are reflected in the UI
-      return dispatch(noOp as any);
-    }
-
-    let message: string | undefined = statusText;
-
-    if (data?.error) {
-      message = data.error;
-    }
-
-    if (!message) {
-      message = httpErrorMessages.find((httpError) => httpError.code === status)?.description;
-    }
-
-    return dispatch(showAlert('', message, 'error'));
-  } else {
-    console.error(error);
-    return dispatch(showAlert(undefined, undefined, 'error'));
-  }
-};
-
-export {
-  dismissAlert,
-  showAlert,
-  showAlertForError,
-};

app/soapbox/actions/aliases.ts

@@ -1,14 +1,13 @@
 import { defineMessages } from 'react-intl';
 
+import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 import { getFeatures } from 'soapbox/utils/features';
 
 import api from '../api';
 
-import { showAlertForError } from './alerts';
 import { importFetchedAccounts } from './importer';
 import { patchMeSuccess } from './me';
-import snackbar from './snackbar';
 
 import type { AxiosError } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
@@ -80,7 +79,7 @@ const fetchAliasesSuggestions = (q: string) =>
     api(getState).get('/api/v1/accounts/search', { params }).then(({ data }) => {
       dispatch(importFetchedAccounts(data));
       dispatch(fetchAliasesSuggestionsReady(q, data));
-    }).catch(error => dispatch(showAlertForError(error)));
+    }).catch(error => toast.showAlertForError(error));
   };
 
 const fetchAliasesSuggestionsReady = (query: string, accounts: APIEntity[]) => ({
@@ -114,7 +113,7 @@ const addToAliases = (account: Account) =>
 
       api(getState).patch('/api/v1/accounts/update_credentials', { also_known_as: [...alsoKnownAs, account.pleroma.get('ap_id')] })
         .then((response => {
-          dispatch(snackbar.success(messages.createSuccess));
+          toast.success(messages.createSuccess);
           dispatch(addToAliasesSuccess);
           dispatch(patchMeSuccess(response.data));
         }))
@@ -129,7 +128,7 @@ const addToAliases = (account: Account) =>
       alias: account.acct,
     })
       .then(() => {
-        dispatch(snackbar.success(messages.createSuccess));
+        toast.success(messages.createSuccess);
         dispatch(addToAliasesSuccess);
         dispatch(fetchAliases);
       })
@@ -165,7 +164,7 @@ const removeFromAliases = (account: string) =>
 
       api(getState).patch('/api/v1/accounts/update_credentials', { also_known_as: alsoKnownAs.filter((id: string) => id !== account) })
         .then(response => {
-          dispatch(snackbar.success(messages.removeSuccess));
+          toast.success(messages.removeSuccess);
           dispatch(removeFromAliasesSuccess);
           dispatch(patchMeSuccess(response.data));
         })
@@ -182,7 +181,7 @@ const removeFromAliases = (account: string) =>
       },
     })
       .then(response => {
-        dispatch(snackbar.success(messages.removeSuccess));
+        toast.success(messages.removeSuccess);
         dispatch(removeFromAliasesSuccess);
         dispatch(fetchAliases);
       })

app/soapbox/actions/auth.ts

@@ -14,14 +14,14 @@ import { createApp } from 'soapbox/actions/apps';
 import { fetchMeSuccess, fetchMeFail } from 'soapbox/actions/me';
 import { obtainOAuthToken, revokeOAuthToken } from 'soapbox/actions/oauth';
 import { startOnboarding } from 'soapbox/actions/onboarding';
-import snackbar from 'soapbox/actions/snackbar';
 import { custom } from 'soapbox/custom';
 import { queryClient } from 'soapbox/queries/client';
 import KVStore from 'soapbox/storage/kv-store';
+import toast from 'soapbox/toast';
 import { getLoggedInAccount, parseBaseURL } from 'soapbox/utils/auth';
 import sourceCode from 'soapbox/utils/code';
-import { getFeatures } from 'soapbox/utils/features';
 import { normalizeUsername } from 'soapbox/utils/input';
+import { getScopes } from 'soapbox/utils/scopes';
 import { isStandalone } from 'soapbox/utils/state';
 
 import api, { baseClient } from '../api';
@@ -29,7 +29,6 @@ import api, { baseClient } from '../api';
 import { importFetchedAccount } from './importer';
 
 import type { AxiosError } from 'axios';
-import type { Map as ImmutableMap } from 'immutable';
 import type { AppDispatch, RootState } from 'soapbox/store';
 
 export const SWITCH_ACCOUNT = 'SWITCH_ACCOUNT';
@@ -51,17 +50,12 @@ const customApp = custom('app');
 
 export const messages = defineMessages({
   loggedOut: { id: 'auth.logged_out', defaultMessage: 'Logged out.' },
+  awaitingApproval: { id: 'auth.awaiting_approval', defaultMessage: 'Your account is awaiting approval' },
   invalidCredentials: { id: 'auth.invalid_credentials', defaultMessage: 'Wrong username or password' },
 });
 
 const noOp = () => new Promise(f => f(undefined));
 
-const getScopes = (state: RootState) => {
-  const instance = state.instance;
-  const { scopes } = getFeatures(instance);
-  return scopes;
-};
-
 const createAppAndToken = () =>
   (dispatch: AppDispatch) =>
     dispatch(getAuthApp()).then(() =>
@@ -94,11 +88,11 @@ const createAuthApp = () =>
 
 const createAppToken = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    const app = getState().auth.get('app');
+    const app = getState().auth.app;
 
     const params = {
-      client_id:     app.get('client_id'),
-      client_secret: app.get('client_secret'),
+      client_id:     app.client_id!,
+      client_secret: app.client_secret!,
       redirect_uri:  'urn:ietf:wg:oauth:2.0:oob',
       grant_type:    'client_credentials',
       scope:         getScopes(getState()),
@@ -111,11 +105,11 @@ const createAppToken = () =>
 
 const createUserToken = (username: string, password: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    const app = getState().auth.get('app');
+    const app = getState().auth.app;
 
     const params = {
-      client_id:     app.get('client_id'),
-      client_secret: app.get('client_secret'),
+      client_id:     app.client_id!,
+      client_secret: app.client_secret!,
       redirect_uri:  'urn:ietf:wg:oauth:2.0:oob',
       grant_type:    'password',
       username:      username,
@@ -127,32 +121,12 @@ const createUserToken = (username: string, password: string) =>
       .then((token: Record<string, string | number>) => dispatch(authLoggedIn(token)));
   };
 
-export const refreshUserToken = () =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    const refreshToken = getState().auth.getIn(['user', 'refresh_token']);
-    const app = getState().auth.get('app');
-
-    if (!refreshToken) return dispatch(noOp);
-
-    const params = {
-      client_id:     app.get('client_id'),
-      client_secret: app.get('client_secret'),
-      refresh_token: refreshToken,
-      redirect_uri:  'urn:ietf:wg:oauth:2.0:oob',
-      grant_type:    'refresh_token',
-      scope:         getScopes(getState()),
-    };
-
-    return dispatch(obtainOAuthToken(params))
-      .then((token: Record<string, string | number>) => dispatch(authLoggedIn(token)));
-  };
-
 export const otpVerify = (code: string, mfa_token: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    const app = getState().auth.get('app');
+    const app = getState().auth.app;
     return api(getState, 'app').post('/oauth/mfa/challenge', {
-      client_id: app.get('client_id'),
-      client_secret: app.get('client_secret'),
+      client_id: app.client_id,
+      client_secret: app.client_secret,
       mfa_token: mfa_token,
       code: code,
       challenge_type: 'totp',
@@ -204,21 +178,21 @@ export const rememberAuthAccount = (accountUrl: string) =>
 
 export const loadCredentials = (token: string, accountUrl: string) =>
   (dispatch: AppDispatch) => dispatch(rememberAuthAccount(accountUrl))
-    .then(() => {
-      dispatch(verifyCredentials(token, accountUrl));
-    })
+    .then(() => dispatch(verifyCredentials(token, accountUrl)))
     .catch(() => dispatch(verifyCredentials(token, accountUrl)));
 
 export const logIn = (username: string, password: string) =>
   (dispatch: AppDispatch) => dispatch(getAuthApp()).then(() => {
     return dispatch(createUserToken(normalizeUsername(username), password));
   }).catch((error: AxiosError) => {
-    if ((error.response?.data as any).error === 'mfa_required') {
+    if ((error.response?.data as any)?.error === 'mfa_required') {
       // If MFA is required, throw the error and handle it in the component.
       throw error;
+    } else if ((error.response?.data as any)?.identifier === 'awaiting_approval') {
+      toast.error(messages.awaitingApproval);
     } else {
       // Return "wrong password" message.
-      dispatch(snackbar.error(messages.invalidCredentials));
+      toast.error(messages.invalidCredentials);
     }
     throw error;
   });
@@ -235,9 +209,9 @@ export const logOut = () =>
     if (!account) return dispatch(noOp);
 
     const params = {
-      client_id: state.auth.getIn(['app', 'client_id']),
-      client_secret: state.auth.getIn(['app', 'client_secret']),
-      token: state.auth.getIn(['users', account.url, 'access_token']),
+      client_id: state.auth.app.client_id!,
+      client_secret: state.auth.app.client_secret!,
+      token: state.auth.users.get(account.url)!.access_token,
     };
 
     return dispatch(revokeOAuthToken(params))
@@ -248,7 +222,7 @@ export const logOut = () =>
 
         dispatch({ type: AUTH_LOGGED_OUT, account, standalone });
 
-        return dispatch(snackbar.success(messages.loggedOut));
+        toast.success(messages.loggedOut);
       });
   };
 
@@ -265,10 +239,10 @@ export const switchAccount = (accountId: string, background = false) =>
 export const fetchOwnAccounts = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
-    return state.auth.get('users').forEach((user: ImmutableMap<string, string>) => {
-      const account = state.accounts.get(user.get('id'));
+    return state.auth.users.forEach((user) => {
+      const account = state.accounts.get(user.id);
       if (!account) {
-        dispatch(verifyCredentials(user.get('access_token')!, user.get('url')));
+        dispatch(verifyCredentials(user.access_token, user.url));
       }
     });
   };

app/soapbox/actions/chats.ts

@@ -6,8 +6,8 @@ import { getFeatures } from 'soapbox/utils/features';
 
 import api, { getLinks } from '../api';
 
-import type { History } from 'history';
 import type { AppDispatch, RootState } from 'soapbox/store';
+import type { History } from 'soapbox/types/history';
 
 const CHATS_FETCH_REQUEST = 'CHATS_FETCH_REQUEST';
 const CHATS_FETCH_SUCCESS = 'CHATS_FETCH_SUCCESS';

app/soapbox/actions/compose.ts

@@ -3,16 +3,16 @@ import { List as ImmutableList } from 'immutable';
 import throttle from 'lodash/throttle';
 import { defineMessages, IntlShape } from 'react-intl';
 
-import snackbar from 'soapbox/actions/snackbar';
 import api from 'soapbox/api';
-import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light';
+import { isNativeEmoji } from 'soapbox/features/emoji';
+import emojiSearch from 'soapbox/features/emoji/search';
 import { tagHistory } from 'soapbox/settings';
+import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 import { getFeatures, parseVersion } from 'soapbox/utils/features';
 import { formatBytes, getVideoDuration } from 'soapbox/utils/media';
 import resizeImage from 'soapbox/utils/resize-image';
 
-import { showAlert, showAlertForError } from './alerts';
 import { useEmoji } from './emojis';
 import { importFetchedAccounts } from './importer';
 import { uploadMedia, fetchMedia, updateMedia } from './media';
@@ -20,11 +20,11 @@ import { openModal, closeModal } from './modals';
 import { getSettings } from './settings';
 import { createStatus } from './statuses';
 
-import type { History } from 'history';
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
+import type { Emoji } from 'soapbox/features/emoji';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { Account, APIEntity, Status, Tag } from 'soapbox/types/entities';
+import type { History } from 'soapbox/types/history';
 
 const { CancelToken, isCancel } = axios;
 
@@ -47,6 +47,7 @@ const COMPOSE_UPLOAD_SUCCESS  = 'COMPOSE_UPLOAD_SUCCESS';
 const COMPOSE_UPLOAD_FAIL     = 'COMPOSE_UPLOAD_FAIL';
 const COMPOSE_UPLOAD_PROGRESS = 'COMPOSE_UPLOAD_PROGRESS';
 const COMPOSE_UPLOAD_UNDO     = 'COMPOSE_UPLOAD_UNDO';
+const COMPOSE_GROUP_POST      = 'COMPOSE_GROUP_POST';
 
 const COMPOSE_SUGGESTIONS_CLEAR = 'COMPOSE_SUGGESTIONS_CLEAR';
 const COMPOSE_SUGGESTIONS_READY = 'COMPOSE_SUGGESTIONS_READY';
@@ -87,13 +88,13 @@ const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
   exceededVideoSizeLimit: { id: 'upload_error.video_size_limit', defaultMessage: 'Video exceeds the current file size limit ({limit})' },
-  exceededVideoDurationLimit: { id: 'upload_error.video_duration_limit', defaultMessage: 'Video exceeds the current duration limit ({limit} seconds)' },
+  exceededVideoDurationLimit: { id: 'upload_error.video_duration_limit', defaultMessage: 'Video exceeds the current duration limit ({limit, plural, one {# second} other {# seconds}})' },
   scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.' },
   success: { id: 'compose.submit_success', defaultMessage: 'Your post was sent' },
   editSuccess: { id: 'compose.edit_success', defaultMessage: 'Your post was edited' },
   uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
   uploadErrorPoll: { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
-  view: { id: 'snackbar.view', defaultMessage: 'View' },
+  view: { id: 'toast.view', defaultMessage: 'View' },
   replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
   replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });
@@ -211,7 +212,10 @@ const handleComposeSubmit = (dispatch: AppDispatch, getState: () => RootState, c
 
   dispatch(insertIntoTagHistory(composeId, data.tags || [], status));
   dispatch(submitComposeSuccess(composeId, { ...data }));
-  dispatch(snackbar.success(edit ? messages.editSuccess : messages.success, messages.view, `/@${data.account.acct}/posts/${data.id}`));
+  toast.success(edit ? messages.editSuccess : messages.success, {
+    actionLabel: messages.view,
+    actionLink: `/@${data.account.acct}/posts/${data.id}`,
+  });
 };
 
 const needsDescriptions = (state: RootState, composeId: string) => {
@@ -245,7 +249,7 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false
     let to         = compose.to;
 
     if (!validateSchedule(state, composeId)) {
-      dispatch(snackbar.error(messages.scheduleError));
+      toast.error(messages.scheduleError);
       return;
     }
 
@@ -274,7 +278,7 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false
 
     const idempotencyKey = compose.idempotencyKey;
 
-    const params = {
+    const params: Record<string, any> = {
       status,
       in_reply_to_id: compose.in_reply_to,
       quote_id: compose.quote,
@@ -288,6 +292,8 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false
       to,
     };
 
+    if (compose.privacy === 'group') params.group_id = compose.group_id;
+
     dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) {
       if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && routerHistory) {
         routerHistory.push('/messages');
@@ -330,7 +336,7 @@ const uploadCompose = (composeId: string, files: FileList, intl: IntlShape) =>
     const mediaCount = media ? media.size : 0;
 
     if (files.length + mediaCount > attachmentLimit) {
-      dispatch(showAlert(undefined, messages.uploadErrorLimit, 'error'));
+      toast.error(messages.uploadErrorLimit);
       return;
     }
 
@@ -346,18 +352,18 @@ const uploadCompose = (composeId: string, files: FileList, intl: IntlShape) =>
       if (isImage && maxImageSize && (f.size > maxImageSize)) {
         const limit = formatBytes(maxImageSize);
         const message = intl.formatMessage(messages.exceededImageSizeLimit, { limit });
-        dispatch(snackbar.error(message));
+        toast.error(message);
         dispatch(uploadComposeFail(composeId, true));
         return;
       } else if (isVideo && maxVideoSize && (f.size > maxVideoSize)) {
         const limit = formatBytes(maxVideoSize);
         const message = intl.formatMessage(messages.exceededVideoSizeLimit, { limit });
-        dispatch(snackbar.error(message));
+        toast.error(message);
         dispatch(uploadComposeFail(composeId, true));
         return;
       } else if (isVideo && maxVideoDuration && (videoDurationInSeconds > maxVideoDuration)) {
         const message = intl.formatMessage(messages.exceededVideoDurationLimit, { limit: maxVideoDuration });
-        dispatch(snackbar.error(message));
+        toast.error(message);
         dispatch(uploadComposeFail(composeId, true));
         return;
       }
@@ -468,6 +474,15 @@ const undoUploadCompose = (composeId: string, media_id: string) => ({
   media_id: media_id,
 });
 
+const groupCompose = (composeId: string, groupId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: COMPOSE_GROUP_POST,
+      id: composeId,
+      group_id: groupId,
+    });
+  };
+
 const clearComposeSuggestions = (composeId: string) => {
   if (cancelFetchComposeSuggestionsAccounts) {
     cancelFetchComposeSuggestionsAccounts();
@@ -496,13 +511,15 @@ const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, composeId,
     dispatch(readyComposeSuggestionsAccounts(composeId, token, response.data));
   }).catch(error => {
     if (!isCancel(error)) {
-      dispatch(showAlertForError(error));
+      toast.showAlertForError(error);
     }
   });
 }, 200, { leading: true, trailing: true });
 
 const fetchComposeSuggestionsEmojis = (dispatch: AppDispatch, getState: () => RootState, composeId: string, token: string) => {
-  const results = emojiSearch(token.replace(':', ''), { maxResults: 5 } as any);
+  const state = getState();
+  const results = emojiSearch(token.replace(':', ''), { maxResults: 5 }, state.custom_emojis);
+
   dispatch(readyComposeSuggestionsEmojis(composeId, token, results));
 };
 
@@ -547,7 +564,7 @@ const selectComposeSuggestion = (composeId: string, position: number, token: str
     let completion, startPosition;
 
     if (typeof suggestion === 'object' && suggestion.id) {
-      completion    = suggestion.native || suggestion.colons;
+      completion    = isNativeEmoji(suggestion) ? suggestion.native : suggestion.colons;
       startPosition = position - 1;
 
       dispatch(useEmoji(suggestion));
@@ -720,7 +737,7 @@ const eventDiscussionCompose = (composeId: string, status: Status) =>
     const instance = state.instance;
     const { explicitAddressing } = getFeatures(instance);
 
-    dispatch({
+    return dispatch({
       type: COMPOSE_EVENT_REPLY,
       id: composeId,
       status: status,
@@ -747,6 +764,7 @@ export {
   COMPOSE_UPLOAD_FAIL,
   COMPOSE_UPLOAD_PROGRESS,
   COMPOSE_UPLOAD_UNDO,
+  COMPOSE_GROUP_POST,
   COMPOSE_SUGGESTIONS_CLEAR,
   COMPOSE_SUGGESTIONS_READY,
   COMPOSE_SUGGESTION_SELECT,
@@ -799,6 +817,7 @@ export {
   uploadComposeSuccess,
   uploadComposeFail,
   undoUploadCompose,
+  groupCompose,
   clearComposeSuggestions,
   fetchComposeSuggestions,
   readyComposeSuggestionsEmojis,

app/soapbox/actions/consumer-auth.ts

@@ -3,7 +3,7 @@ import axios from 'axios';
 import * as BuildConfig from 'soapbox/build-config';
 import { isURL } from 'soapbox/utils/auth';
 import sourceCode from 'soapbox/utils/code';
-import { getFeatures } from 'soapbox/utils/features';
+import { getScopes } from 'soapbox/utils/scopes';
 
 import { createApp } from './apps';
 
@@ -11,8 +11,7 @@ import type { AppDispatch, RootState } from 'soapbox/store';
 
 const createProviderApp = () => {
   return async(dispatch: AppDispatch, getState: () => RootState) => {
-    const state = getState();
-    const { scopes } = getFeatures(state.instance);
+    const scopes = getScopes(getState());
 
     const params = {
       client_name:   sourceCode.displayName,
@@ -29,8 +28,7 @@ export const prepareRequest = (provider: string) => {
   return async(dispatch: AppDispatch, getState: () => RootState) => {
     const baseURL = isURL(BuildConfig.BACKEND_URL) ? BuildConfig.BACKEND_URL : '';
 
-    const state = getState();
-    const { scopes } = getFeatures(state.instance);
+    const scopes = getScopes(getState());
     const app = await dispatch(createProviderApp());
     const { client_id, redirect_uri } = app;
 

app/soapbox/actions/dropdown-menu.ts

@@ -1,13 +1,8 @@
-import type { DropdownPlacement } from 'soapbox/components/dropdown-menu';
-
 const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN';
 const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE';
 
-const openDropdownMenu = (id: number, placement: DropdownPlacement, keyboard: boolean) =>
-  ({ type: DROPDOWN_MENU_OPEN, id, placement, keyboard });
-
-const closeDropdownMenu = (id: number) =>
-  ({ type: DROPDOWN_MENU_CLOSE, id });
+const openDropdownMenu = () => ({ type: DROPDOWN_MENU_OPEN });
+const closeDropdownMenu = () => ({ type: DROPDOWN_MENU_CLOSE });
 
 export {
   DROPDOWN_MENU_OPEN,

app/soapbox/actions/emoji-reacts.ts

@@ -25,7 +25,7 @@ const EMOJI_REACTS_FETCH_FAIL    = 'EMOJI_REACTS_FETCH_FAIL';
 
 const noOp = () => () => new Promise(f => f(undefined));
 
-const simpleEmojiReact = (status: Status, emoji: string) =>
+const simpleEmojiReact = (status: Status, emoji: string, custom?: string) =>
   (dispatch: AppDispatch) => {
     const emojiReacts: ImmutableList<ImmutableMap<string, any>> = status.pleroma.get('emoji_reactions') || ImmutableList();
 
@@ -43,7 +43,7 @@ const simpleEmojiReact = (status: Status, emoji: string) =>
       if (emoji === '👍') {
         dispatch(favourite(status));
       } else {
-        dispatch(emojiReact(status, emoji));
+        dispatch(emojiReact(status, emoji, custom));
       }
     }).catch(err => {
       console.error(err);
@@ -70,11 +70,11 @@ const fetchEmojiReacts = (id: string, emoji: string) =>
     });
   };
 
-const emojiReact = (status: Status, emoji: string) =>
+const emojiReact = (status: Status, emoji: string, custom?: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     if (!isLoggedIn(getState)) return dispatch(noOp());
 
-    dispatch(emojiReactRequest(status, emoji));
+    dispatch(emojiReactRequest(status, emoji, custom));
 
     return api(getState)
       .put(`/api/v1/pleroma/statuses/${status.get('id')}/reactions/${emoji}`)
@@ -120,10 +120,11 @@ const fetchEmojiReactsFail = (id: string, error: AxiosError) => ({
   error,
 });
 
-const emojiReactRequest = (status: Status, emoji: string) => ({
+const emojiReactRequest = (status: Status, emoji: string, custom?: string) => ({
   type: EMOJI_REACT_REQUEST,
   status,
   emoji,
+  custom,
   skipLoading: true,
 });
 

app/soapbox/actions/emojis.ts

@@ -1,6 +1,6 @@
 import { saveSettings } from './settings';
 
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji } from 'soapbox/features/emoji';
 import type { AppDispatch } from 'soapbox/store';
 
 const EMOJI_USE = 'EMOJI_USE';

app/soapbox/actions/events.ts

@@ -1,13 +1,13 @@
 import { defineMessages, IntlShape } from 'react-intl';
 
 import api, { getLinks } from 'soapbox/api';
+import toast from 'soapbox/toast';
 import { formatBytes } from 'soapbox/utils/media';
 import resizeImage from 'soapbox/utils/resize-image';
 
 import { importFetchedAccounts, importFetchedStatus, importFetchedStatuses } from './importer';
 import { fetchMedia, uploadMedia } from './media';
 import { closeModal, openModal } from './modals';
-import snackbar from './snackbar';
 import {
   STATUS_FETCH_SOURCE_FAIL,
   STATUS_FETCH_SOURCE_REQUEST,
@@ -91,7 +91,7 @@ const messages = defineMessages({
   editSuccess: { id: 'compose_event.edit_success', defaultMessage: 'Your event was edited' },
   joinSuccess: { id: 'join_event.success', defaultMessage: 'Joined the event' },
   joinRequestSuccess: { id: 'join_event.request_success', defaultMessage: 'Requested to join the event' },
-  view: { id: 'snackbar.view', defaultMessage: 'View' },
+  view: { id: 'toast.view', defaultMessage: 'View' },
   authorized: { id: 'compose_event.participation_requests.authorize_success', defaultMessage: 'User accepted' },
   rejected: { id: 'compose_event.participation_requests.reject_success', defaultMessage: 'User rejected' },
 });
@@ -163,7 +163,7 @@ const uploadEventBanner = (file: File, intl: IntlShape) =>
     if (maxImageSize && (file.size > maxImageSize)) {
       const limit = formatBytes(maxImageSize);
       const message = intl.formatMessage(messages.exceededImageSizeLimit, { limit });
-      dispatch(snackbar.error(message));
+      toast.error(message);
       dispatch(uploadEventBannerFail(true));
       return;
     }
@@ -249,6 +249,7 @@ const submitEvent = () =>
       status,
       start_time: startTime,
       join_mode: joinMode,
+      content_type: 'text/markdown',
     };
 
     if (endTime)  params.end_time    = endTime;
@@ -263,7 +264,13 @@ const submitEvent = () =>
       dispatch(closeModal('COMPOSE_EVENT'));
       dispatch(importFetchedStatus(data));
       dispatch(submitEventSuccess(data));
-      dispatch(snackbar.success(id ? messages.editSuccess : messages.success, messages.view, `/@${data.account.acct}/events/${data.id}`));
+      toast.success(
+        id ? messages.editSuccess : messages.success,
+        {
+          actionLabel: messages.view,
+          actionLink: `/@${data.account.acct}/events/${data.id}`,
+        },
+      );
     }).catch(function(error) {
       dispatch(submitEventFail(error));
     });
@@ -298,11 +305,13 @@ const joinEvent = (id: string, participationMessage?: string) =>
     }).then(({ data }) => {
       dispatch(importFetchedStatus(data));
       dispatch(joinEventSuccess(data));
-      dispatch(snackbar.success(
+      toast.success(
         data.pleroma.event?.join_state === 'pending' ? messages.joinRequestSuccess : messages.joinSuccess,
-        messages.view,
-        `/@${data.account.acct}/events/${data.id}`,
-      ));
+        {
+          actionLabel: messages.view,
+          actionLink: `/@${data.account.acct}/events/${data.id}`,
+        },
+      );
     }).catch(function(error) {
       dispatch(joinEventFail(error, status, status?.event?.join_state || null));
     });
@@ -503,7 +512,7 @@ const authorizeEventParticipationRequest = (id: string, accountId: string) =>
       .post(`/api/v1/pleroma/events/${id}/participation_requests/${accountId}/authorize`)
       .then(() => {
         dispatch(authorizeEventParticipationRequestSuccess(id, accountId));
-        dispatch(snackbar.success(messages.authorized));
+        toast.success(messages.authorized);
       })
       .catch(error => dispatch(authorizeEventParticipationRequestFail(id, accountId, error)));
   };
@@ -535,7 +544,7 @@ const rejectEventParticipationRequest = (id: string, accountId: string) =>
       .post(`/api/v1/pleroma/events/${id}/participation_requests/${accountId}/reject`)
       .then(() => {
         dispatch(rejectEventParticipationRequestSuccess(id, accountId));
-        dispatch(snackbar.success(messages.rejected));
+        toast.success(messages.rejected);
       })
       .catch(error => dispatch(rejectEventParticipationRequestFail(id, accountId, error)));
   };
@@ -560,7 +569,7 @@ const rejectEventParticipationRequestFail = (id: string, accountId: string, erro
 });
 
 const fetchEventIcs = (id: string) =>
-  (dispatch: any, getState: () => RootState) =>
+  (dispatch: AppDispatch, getState: () => RootState) =>
     api(getState).get(`/api/v1/pleroma/events/${id}/ics`);
 
 const cancelEventCompose = () => ({

app/soapbox/actions/export-data.ts

@@ -1,10 +1,9 @@
 import { defineMessages } from 'react-intl';
 
-import snackbar from 'soapbox/actions/snackbar';
 import api, { getLinks } from 'soapbox/api';
 import { normalizeAccount } from 'soapbox/normalizers';
+import toast from 'soapbox/toast';
 
-import type { SnackbarAction } from './snackbar';
 import type { AxiosResponse } from 'axios';
 import type { RootState } from 'soapbox/store';
 
@@ -35,9 +34,9 @@ type ExportDataActions = {
   | typeof EXPORT_BLOCKS_FAIL
   | typeof EXPORT_MUTES_REQUEST
   | typeof EXPORT_MUTES_SUCCESS
-  | typeof EXPORT_MUTES_FAIL,
-  error?: any,
-} | SnackbarAction
+  | typeof EXPORT_MUTES_FAIL
+  error?: any
+}
 
 function fileExport(content: string, fileName: string) {
   const fileToDownload = document.createElement('a');
@@ -75,7 +74,7 @@ export const exportFollows = () => (dispatch: React.Dispatch<ExportDataActions>,
       followings.unshift('Account address,Show boosts');
       fileExport(followings.join('\n'), 'export_followings.csv');
 
-      dispatch(snackbar.success(messages.followersSuccess));
+      toast.success(messages.followersSuccess);
       dispatch({ type: EXPORT_FOLLOWS_SUCCESS });
     }).catch(error => {
       dispatch({ type: EXPORT_FOLLOWS_FAIL, error });
@@ -90,7 +89,7 @@ export const exportBlocks = () => (dispatch: React.Dispatch<ExportDataActions>,
     .then((blocks) => {
       fileExport(blocks.join('\n'), 'export_block.csv');
 
-      dispatch(snackbar.success(messages.blocksSuccess));
+      toast.success(messages.blocksSuccess);
       dispatch({ type: EXPORT_BLOCKS_SUCCESS });
     }).catch(error => {
       dispatch({ type: EXPORT_BLOCKS_FAIL, error });
@@ -105,7 +104,7 @@ export const exportMutes = () => (dispatch: React.Dispatch<ExportDataActions>, g
     .then((mutes) => {
       fileExport(mutes.join('\n'), 'export_mutes.csv');
 
-      dispatch(snackbar.success(messages.mutesSuccess));
+      toast.success(messages.mutesSuccess);
       dispatch({ type: EXPORT_MUTES_SUCCESS });
     }).catch(error => {
       dispatch({ type: EXPORT_MUTES_FAIL, error });

app/soapbox/actions/external-auth.ts

@@ -15,10 +15,11 @@ import sourceCode from 'soapbox/utils/code';
 import { getWalletAndSign } from 'soapbox/utils/ethereum';
 import { getFeatures } from 'soapbox/utils/features';
 import { getQuirks } from 'soapbox/utils/quirks';
+import { getInstanceScopes } from 'soapbox/utils/scopes';
 
 import { baseClient } from '../api';
 
-import type { AppDispatch } from 'soapbox/store';
+import type { AppDispatch, RootState } from 'soapbox/store';
 import type { Instance } from 'soapbox/types/entities';
 
 const fetchExternalInstance = (baseURL?: string) => {
@@ -37,25 +38,23 @@ const fetchExternalInstance = (baseURL?: string) => {
 };
 
 const createExternalApp = (instance: Instance, baseURL?: string) =>
-  (dispatch: AppDispatch) => {
+  (dispatch: AppDispatch, _getState: () => RootState) => {
     // Mitra: skip creating the auth app
     if (getQuirks(instance).noApps) return new Promise(f => f({}));
 
-    const { scopes } = getFeatures(instance);
-
     const params = {
-      client_name:   sourceCode.displayName,
+      client_name: sourceCode.displayName,
       redirect_uris: `${window.location.origin}/login/external`,
-      website:       sourceCode.homepage,
-      scopes,
+      website: sourceCode.homepage,
+      scopes: getInstanceScopes(instance),
     };
 
     return dispatch(createApp(params, baseURL));
   };
 
 const externalAuthorize = (instance: Instance, baseURL: string) =>
-  (dispatch: AppDispatch) => {
-    const { scopes } = getFeatures(instance);
+  (dispatch: AppDispatch, _getState: () => RootState) => {
+    const scopes = getInstanceScopes(instance);
 
     return dispatch(createExternalApp(instance, baseURL)).then((app) => {
       const { client_id, redirect_uri } = app as Record<string, string>;
@@ -76,7 +75,7 @@ const externalAuthorize = (instance: Instance, baseURL: string) =>
   };
 
 const externalEthereumLogin = (instance: Instance, baseURL?: string) =>
-  (dispatch: AppDispatch) => {
+  (dispatch: AppDispatch, getState: () => RootState) => {
     const loginMessage = instance.login_message;
 
     return getWalletAndSign(loginMessage).then(({ wallet, signature }) => {
@@ -89,7 +88,7 @@ const externalEthereumLogin = (instance: Instance, baseURL?: string) =>
           client_secret: client_secret,
           password: signature as string,
           redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
-          scope: getFeatures(instance).scopes,
+          scope: getInstanceScopes(instance),
         };
 
         return dispatch(obtainOAuthToken(params, baseURL))

app/soapbox/actions/familiar-followers.ts

@@ -11,25 +11,25 @@ export const FAMILIAR_FOLLOWERS_FETCH_SUCCESS = 'FAMILIAR_FOLLOWERS_FETCH_SUCCES
 export const FAMILIAR_FOLLOWERS_FETCH_FAIL    = 'FAMILIAR_FOLLOWERS_FETCH_FAIL';
 
 type FamiliarFollowersFetchRequestAction = {
-  type: typeof FAMILIAR_FOLLOWERS_FETCH_REQUEST,
-  id: string,
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_REQUEST
+  id: string
 }
 
 type FamiliarFollowersFetchRequestSuccessAction = {
-  type: typeof FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
-  id: string,
-  accounts: Array<APIEntity>,
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_SUCCESS
+  id: string
+  accounts: Array<APIEntity>
 }
 
 type FamiliarFollowersFetchRequestFailAction = {
-  type: typeof FAMILIAR_FOLLOWERS_FETCH_FAIL,
-  id: string,
-  error: any,
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_FAIL
+  id: string
+  error: any
 }
 
 type AccountsImportAction = {
-  type: typeof ACCOUNTS_IMPORT,
-  accounts: Array<APIEntity>,
+  type: typeof ACCOUNTS_IMPORT
+  accounts: Array<APIEntity>
 }
 
 export type FamiliarFollowersActions = FamiliarFollowersFetchRequestAction | FamiliarFollowersFetchRequestSuccessAction | FamiliarFollowersFetchRequestFailAction | AccountsImportAction

app/soapbox/actions/filters.ts

@@ -1,6 +1,6 @@
 import { defineMessages } from 'react-intl';
 
-import snackbar from 'soapbox/actions/snackbar';
+import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 import { getFeatures } from 'soapbox/utils/features';
 
@@ -12,10 +12,18 @@ const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
 const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS';
 const FILTERS_FETCH_FAIL    = 'FILTERS_FETCH_FAIL';
 
+const FILTER_FETCH_REQUEST = 'FILTER_FETCH_REQUEST';
+const FILTER_FETCH_SUCCESS = 'FILTER_FETCH_SUCCESS';
+const FILTER_FETCH_FAIL    = 'FILTER_FETCH_FAIL';
+
 const FILTERS_CREATE_REQUEST = 'FILTERS_CREATE_REQUEST';
 const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS';
 const FILTERS_CREATE_FAIL    = 'FILTERS_CREATE_FAIL';
 
+const FILTERS_UPDATE_REQUEST = 'FILTERS_UPDATE_REQUEST';
+const FILTERS_UPDATE_SUCCESS = 'FILTERS_UPDATE_SUCCESS';
+const FILTERS_UPDATE_FAIL    = 'FILTERS_UPDATE_FAIL';
+
 const FILTERS_DELETE_REQUEST = 'FILTERS_DELETE_REQUEST';
 const FILTERS_DELETE_SUCCESS = 'FILTERS_DELETE_SUCCESS';
 const FILTERS_DELETE_FAIL    = 'FILTERS_DELETE_FAIL';
@@ -25,22 +33,16 @@ const messages = defineMessages({
   removed: { id: 'filters.removed', defaultMessage: 'Filter deleted.' },
 });
 
-const fetchFilters = () =>
+type FilterKeywords = { keyword: string, whole_word: boolean }[];
+
+const fetchFiltersV1 = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    if (!isLoggedIn(getState)) return;
-
-    const state = getState();
-    const instance = state.instance;
-    const features = getFeatures(instance);
-
-    if (!features.filters) return;
-
     dispatch({
       type: FILTERS_FETCH_REQUEST,
       skipLoading: true,
     });
 
-    api(getState)
+    return api(getState)
       .get('/api/v1/filters')
       .then(({ data }) => dispatch({
         type: FILTERS_FETCH_SUCCESS,
@@ -55,45 +57,238 @@ const fetchFilters = () =>
       }));
   };
 
-const createFilter = (phrase: string, expires_at: string, context: Array<string>, whole_word: boolean, irreversible: boolean) =>
+const fetchFiltersV2 = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTERS_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get('/api/v2/filters')
+      .then(({ data }) => dispatch({
+        type: FILTERS_FETCH_SUCCESS,
+        filters: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTERS_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilters = (fromFiltersPage = false) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2 && fromFiltersPage) return dispatch(fetchFiltersV2());
+
+    if (features.filters) return dispatch(fetchFiltersV1());
+  };
+
+const fetchFilterV1 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTER_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get(`/api/v1/filters/${id}`)
+      .then(({ data }) => dispatch({
+        type: FILTER_FETCH_SUCCESS,
+        filter: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTER_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilterV2 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTER_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get(`/api/v2/filters/${id}`)
+      .then(({ data }) => dispatch({
+        type: FILTER_FETCH_SUCCESS,
+        filter: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTER_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilter = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(fetchFilterV2(id));
+
+    if (features.filters) return dispatch(fetchFilterV1(id));
+  };
+
+const createFilterV1 = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: FILTERS_CREATE_REQUEST });
     return api(getState).post('/api/v1/filters', {
-      phrase,
+      phrase: keywords[0].keyword,
       context,
-      irreversible,
-      whole_word,
-      expires_at,
+      irreversible: hide,
+      whole_word: keywords[0].whole_word,
+      expires_in,
     }).then(response => {
       dispatch({ type: FILTERS_CREATE_SUCCESS, filter: response.data });
-      dispatch(snackbar.success(messages.added));
+      toast.success(messages.added);
     }).catch(error => {
       dispatch({ type: FILTERS_CREATE_FAIL, error });
     });
   };
 
-const deleteFilter = (id: string) =>
+const createFilterV2 = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords_attributes: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_CREATE_REQUEST });
+    return api(getState).post('/api/v2/filters', {
+      title,
+      context,
+      filter_action: hide ? 'hide' : 'warn',
+      expires_in,
+      keywords_attributes,
+    }).then(response => {
+      dispatch({ type: FILTERS_CREATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_CREATE_FAIL, error });
+    });
+  };
+
+const createFilter = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(createFilterV2(title, expires_in, context, hide, keywords));
+
+    return dispatch(createFilterV1(title, expires_in, context, hide, keywords));
+  };
+
+const updateFilterV1 = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_UPDATE_REQUEST });
+    return api(getState).patch(`/api/v1/filters/${id}`, {
+      phrase: keywords[0].keyword,
+      context,
+      irreversible: hide,
+      whole_word: keywords[0].whole_word,
+      expires_in,
+    }).then(response => {
+      dispatch({ type: FILTERS_UPDATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_UPDATE_FAIL, error });
+    });
+  };
+
+const updateFilterV2 = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords_attributes: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_UPDATE_REQUEST });
+    return api(getState).patch(`/api/v2/filters/${id}`, {
+      title,
+      context,
+      filter_action: hide ? 'hide' : 'warn',
+      expires_in,
+      keywords_attributes,
+    }).then(response => {
+      dispatch({ type: FILTERS_UPDATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_UPDATE_FAIL, error });
+    });
+  };
+
+const updateFilter = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(updateFilterV2(id, title, expires_in, context, hide, keywords));
+
+    return dispatch(updateFilterV1(id, title, expires_in, context, hide, keywords));
+  };
+
+const deleteFilterV1 = (id: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: FILTERS_DELETE_REQUEST });
     return api(getState).delete(`/api/v1/filters/${id}`).then(response => {
       dispatch({ type: FILTERS_DELETE_SUCCESS, filter: response.data });
-      dispatch(snackbar.success(messages.removed));
+      toast.success(messages.removed);
     }).catch(error => {
       dispatch({ type: FILTERS_DELETE_FAIL, error });
     });
   };
 
+const deleteFilterV2 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_DELETE_REQUEST });
+    return api(getState).delete(`/api/v2/filters/${id}`).then(response => {
+      dispatch({ type: FILTERS_DELETE_SUCCESS, filter: response.data });
+      toast.success(messages.removed);
+    }).catch(error => {
+      dispatch({ type: FILTERS_DELETE_FAIL, error });
+    });
+  };
+
+const deleteFilter = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(deleteFilterV2(id));
+
+    return dispatch(deleteFilterV1(id));
+  };
+
 export {
   FILTERS_FETCH_REQUEST,
   FILTERS_FETCH_SUCCESS,
   FILTERS_FETCH_FAIL,
+  FILTER_FETCH_REQUEST,
+  FILTER_FETCH_SUCCESS,
+  FILTER_FETCH_FAIL,
   FILTERS_CREATE_REQUEST,
   FILTERS_CREATE_SUCCESS,
   FILTERS_CREATE_FAIL,
+  FILTERS_UPDATE_REQUEST,
+  FILTERS_UPDATE_SUCCESS,
+  FILTERS_UPDATE_FAIL,
   FILTERS_DELETE_REQUEST,
   FILTERS_DELETE_SUCCESS,
   FILTERS_DELETE_FAIL,
   fetchFilters,
+  fetchFilter,
   createFilter,
+  updateFilter,
   deleteFilter,
-};
+};

app/soapbox/actions/groups.ts

@@ -0,0 +1,964 @@
+import { defineMessages } from 'react-intl';
+
+import { deleteEntities } from 'soapbox/entity-store/actions';
+import toast from 'soapbox/toast';
+
+import api, { getLinks } from '../api';
+
+import { fetchRelationships } from './accounts';
+import { importFetchedGroups, importFetchedAccounts } from './importer';
+import { closeModal, openModal } from './modals';
+import { deleteFromTimelines } from './timelines';
+
+import type { AxiosError } from 'axios';
+import type { GroupRole } from 'soapbox/reducers/group-memberships';
+import type { AppDispatch, RootState } from 'soapbox/store';
+import type { APIEntity, Group } from 'soapbox/types/entities';
+
+const GROUP_EDITOR_SET = 'GROUP_EDITOR_SET';
+
+const GROUP_CREATE_REQUEST = 'GROUP_CREATE_REQUEST';
+const GROUP_CREATE_SUCCESS = 'GROUP_CREATE_SUCCESS';
+const GROUP_CREATE_FAIL    = 'GROUP_CREATE_FAIL';
+
+const GROUP_UPDATE_REQUEST = 'GROUP_UPDATE_REQUEST';
+const GROUP_UPDATE_SUCCESS = 'GROUP_UPDATE_SUCCESS';
+const GROUP_UPDATE_FAIL    = 'GROUP_UPDATE_FAIL';
+
+const GROUP_DELETE_REQUEST = 'GROUP_DELETE_REQUEST';
+const GROUP_DELETE_SUCCESS = 'GROUP_DELETE_SUCCESS';
+const GROUP_DELETE_FAIL    = 'GROUP_DELETE_FAIL';
+
+const GROUP_FETCH_REQUEST = 'GROUP_FETCH_REQUEST';
+const GROUP_FETCH_SUCCESS = 'GROUP_FETCH_SUCCESS';
+const GROUP_FETCH_FAIL    = 'GROUP_FETCH_FAIL';
+
+const GROUPS_FETCH_REQUEST = 'GROUPS_FETCH_REQUEST';
+const GROUPS_FETCH_SUCCESS = 'GROUPS_FETCH_SUCCESS';
+const GROUPS_FETCH_FAIL    = 'GROUPS_FETCH_FAIL';
+
+const GROUP_RELATIONSHIPS_FETCH_REQUEST = 'GROUP_RELATIONSHIPS_FETCH_REQUEST';
+const GROUP_RELATIONSHIPS_FETCH_SUCCESS = 'GROUP_RELATIONSHIPS_FETCH_SUCCESS';
+const GROUP_RELATIONSHIPS_FETCH_FAIL    = 'GROUP_RELATIONSHIPS_FETCH_FAIL';
+
+const GROUP_DELETE_STATUS_REQUEST = 'GROUP_DELETE_STATUS_REQUEST';
+const GROUP_DELETE_STATUS_SUCCESS = 'GROUP_DELETE_STATUS_SUCCESS';
+const GROUP_DELETE_STATUS_FAIL    = 'GROUP_DELETE_STATUS_FAIL';
+
+const GROUP_KICK_REQUEST = 'GROUP_KICK_REQUEST';
+const GROUP_KICK_SUCCESS = 'GROUP_KICK_SUCCESS';
+const GROUP_KICK_FAIL    = 'GROUP_KICK_FAIL';
+
+const GROUP_BLOCKS_FETCH_REQUEST = 'GROUP_BLOCKS_FETCH_REQUEST';
+const GROUP_BLOCKS_FETCH_SUCCESS = 'GROUP_BLOCKS_FETCH_SUCCESS';
+const GROUP_BLOCKS_FETCH_FAIL    = 'GROUP_BLOCKS_FETCH_FAIL';
+
+const GROUP_BLOCKS_EXPAND_REQUEST = 'GROUP_BLOCKS_EXPAND_REQUEST';
+const GROUP_BLOCKS_EXPAND_SUCCESS = 'GROUP_BLOCKS_EXPAND_SUCCESS';
+const GROUP_BLOCKS_EXPAND_FAIL    = 'GROUP_BLOCKS_EXPAND_FAIL';
+
+const GROUP_BLOCK_REQUEST = 'GROUP_BLOCK_REQUEST';
+const GROUP_BLOCK_SUCCESS = 'GROUP_BLOCK_SUCCESS';
+const GROUP_BLOCK_FAIL    = 'GROUP_BLOCK_FAIL';
+
+const GROUP_UNBLOCK_REQUEST = 'GROUP_UNBLOCK_REQUEST';
+const GROUP_UNBLOCK_SUCCESS = 'GROUP_UNBLOCK_SUCCESS';
+const GROUP_UNBLOCK_FAIL    = 'GROUP_UNBLOCK_FAIL';
+
+const GROUP_PROMOTE_REQUEST = 'GROUP_PROMOTE_REQUEST';
+const GROUP_PROMOTE_SUCCESS = 'GROUP_PROMOTE_SUCCESS';
+const GROUP_PROMOTE_FAIL    = 'GROUP_PROMOTE_FAIL';
+
+const GROUP_DEMOTE_REQUEST = 'GROUP_DEMOTE_REQUEST';
+const GROUP_DEMOTE_SUCCESS = 'GROUP_DEMOTE_SUCCESS';
+const GROUP_DEMOTE_FAIL    = 'GROUP_DEMOTE_FAIL';
+
+const GROUP_MEMBERSHIPS_FETCH_REQUEST = 'GROUP_MEMBERSHIPS_FETCH_REQUEST';
+const GROUP_MEMBERSHIPS_FETCH_SUCCESS = 'GROUP_MEMBERSHIPS_FETCH_SUCCESS';
+const GROUP_MEMBERSHIPS_FETCH_FAIL    = 'GROUP_MEMBERSHIPS_FETCH_FAIL';
+
+const GROUP_MEMBERSHIPS_EXPAND_REQUEST = 'GROUP_MEMBERSHIPS_EXPAND_REQUEST';
+const GROUP_MEMBERSHIPS_EXPAND_SUCCESS = 'GROUP_MEMBERSHIPS_EXPAND_SUCCESS';
+const GROUP_MEMBERSHIPS_EXPAND_FAIL    = 'GROUP_MEMBERSHIPS_EXPAND_FAIL';
+
+const GROUP_MEMBERSHIP_REQUESTS_FETCH_REQUEST = 'GROUP_MEMBERSHIP_REQUESTS_FETCH_REQUEST';
+const GROUP_MEMBERSHIP_REQUESTS_FETCH_SUCCESS = 'GROUP_MEMBERSHIP_REQUESTS_FETCH_SUCCESS';
+const GROUP_MEMBERSHIP_REQUESTS_FETCH_FAIL    = 'GROUP_MEMBERSHIP_REQUESTS_FETCH_FAIL';
+
+const GROUP_MEMBERSHIP_REQUESTS_EXPAND_REQUEST = 'GROUP_MEMBERSHIP_REQUESTS_EXPAND_REQUEST';
+const GROUP_MEMBERSHIP_REQUESTS_EXPAND_SUCCESS = 'GROUP_MEMBERSHIP_REQUESTS_EXPAND_SUCCESS';
+const GROUP_MEMBERSHIP_REQUESTS_EXPAND_FAIL    = 'GROUP_MEMBERSHIP_REQUESTS_EXPAND_FAIL';
+
+const GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_REQUEST = 'GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_REQUEST';
+const GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_SUCCESS = 'GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_SUCCESS';
+const GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_FAIL    = 'GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_FAIL';
+
+const GROUP_MEMBERSHIP_REQUEST_REJECT_REQUEST = 'GROUP_MEMBERSHIP_REQUEST_REJECT_REQUEST';
+const GROUP_MEMBERSHIP_REQUEST_REJECT_SUCCESS = 'GROUP_MEMBERSHIP_REQUEST_REJECT_SUCCESS';
+const GROUP_MEMBERSHIP_REQUEST_REJECT_FAIL    = 'GROUP_MEMBERSHIP_REQUEST_REJECT_FAIL';
+
+const GROUP_EDITOR_TITLE_CHANGE       = 'GROUP_EDITOR_TITLE_CHANGE';
+const GROUP_EDITOR_DESCRIPTION_CHANGE = 'GROUP_EDITOR_DESCRIPTION_CHANGE';
+const GROUP_EDITOR_PRIVACY_CHANGE     = 'GROUP_EDITOR_PRIVACY_CHANGE';
+const GROUP_EDITOR_MEDIA_CHANGE       = 'GROUP_EDITOR_MEDIA_CHANGE';
+
+const GROUP_EDITOR_RESET = 'GROUP_EDITOR_RESET';
+
+const messages = defineMessages({
+  success: { id: 'manage_group.submit_success', defaultMessage: 'The group was created' },
+  editSuccess: { id: 'manage_group.edit_success', defaultMessage: 'The group was edited' },
+  joinSuccess: { id: 'group.join.success', defaultMessage: 'Joined the group' },
+  joinRequestSuccess: { id: 'group.join.request_success', defaultMessage: 'Requested to join the group' },
+  leaveSuccess: { id: 'group.leave.success', defaultMessage: 'Left the group' },
+  view: { id: 'toast.view', defaultMessage: 'View' },
+});
+
+const editGroup = (group: Group) => (dispatch: AppDispatch) => {
+  dispatch({
+    type: GROUP_EDITOR_SET,
+    group,
+  });
+  dispatch(openModal('MANAGE_GROUP'));
+};
+
+const createGroup = (params: Record<string, any>, shouldReset?: boolean) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(createGroupRequest());
+
+    return api(getState).post('/api/v1/groups', params, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+      .then(({ data }) => {
+        dispatch(importFetchedGroups([data]));
+        dispatch(createGroupSuccess(data));
+        toast.success(messages.success, {
+          actionLabel: messages.view,
+          actionLink: `/groups/${data.id}`,
+        });
+
+        if (shouldReset) {
+          dispatch(resetGroupEditor());
+        }
+
+        return data;
+      }).catch(err => dispatch(createGroupFail(err)));
+  };
+
+const createGroupRequest = () => ({
+  type: GROUP_CREATE_REQUEST,
+});
+
+const createGroupSuccess = (group: APIEntity) => ({
+  type: GROUP_CREATE_SUCCESS,
+  group,
+});
+
+const createGroupFail = (error: AxiosError) => ({
+  type: GROUP_CREATE_FAIL,
+  error,
+});
+
+const updateGroup = (id: string, params: Record<string, any>, shouldReset?: boolean) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(updateGroupRequest());
+
+    return api(getState).put(`/api/v1/groups/${id}`, params)
+      .then(({ data }) => {
+        dispatch(importFetchedGroups([data]));
+        dispatch(updateGroupSuccess(data));
+        toast.success(messages.editSuccess);
+
+        if (shouldReset) {
+          dispatch(resetGroupEditor());
+        }
+        dispatch(closeModal('MANAGE_GROUP'));
+      }).catch(err => dispatch(updateGroupFail(err)));
+  };
+
+const updateGroupRequest = () => ({
+  type: GROUP_UPDATE_REQUEST,
+});
+
+const updateGroupSuccess = (group: APIEntity) => ({
+  type: GROUP_UPDATE_SUCCESS,
+  group,
+});
+
+const updateGroupFail = (error: AxiosError) => ({
+  type: GROUP_UPDATE_FAIL,
+  error,
+});
+
+const deleteGroup = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => {
+  dispatch(deleteEntities([id], 'Group'));
+
+  return api(getState).delete(`/api/v1/groups/${id}`)
+    .then(() => dispatch(deleteGroupSuccess(id)))
+    .catch(err => dispatch(deleteGroupFail(id, err)));
+};
+
+const deleteGroupRequest = (id: string) => ({
+  type: GROUP_DELETE_REQUEST,
+  id,
+});
+
+const deleteGroupSuccess = (id: string) => ({
+  type: GROUP_DELETE_SUCCESS,
+  id,
+});
+
+const deleteGroupFail = (id: string, error: AxiosError) => ({
+  type: GROUP_DELETE_FAIL,
+  id,
+  error,
+});
+
+const fetchGroup = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => {
+  dispatch(fetchGroupRelationships([id]));
+  dispatch(fetchGroupRequest(id));
+
+  return api(getState).get(`/api/v1/groups/${id}`)
+    .then(({ data }) => {
+      dispatch(importFetchedGroups([data]));
+      dispatch(fetchGroupSuccess(data));
+    })
+    .catch(err => dispatch(fetchGroupFail(id, err)));
+};
+
+const fetchGroupRequest = (id: string) => ({
+  type: GROUP_FETCH_REQUEST,
+  id,
+});
+
+const fetchGroupSuccess = (group: APIEntity) => ({
+  type: GROUP_FETCH_SUCCESS,
+  group,
+});
+
+const fetchGroupFail = (id: string, error: AxiosError) => ({
+  type: GROUP_FETCH_FAIL,
+  id,
+  error,
+});
+
+const fetchGroups = () => (dispatch: AppDispatch, getState: () => RootState) => {
+  dispatch(fetchGroupsRequest());
+
+  return api(getState).get('/api/v1/groups')
+    .then(({ data }) => {
+      dispatch(importFetchedGroups(data));
+      dispatch(fetchGroupsSuccess(data));
+      dispatch(fetchGroupRelationships(data.map((item: APIEntity) => item.id)));
+    }).catch(err => dispatch(fetchGroupsFail(err)));
+};
+
+const fetchGroupsRequest = () => ({
+  type: GROUPS_FETCH_REQUEST,
+});
+
+const fetchGroupsSuccess = (groups: APIEntity[]) => ({
+  type: GROUPS_FETCH_SUCCESS,
+  groups,
+});
+
+const fetchGroupsFail = (error: AxiosError) => ({
+  type: GROUPS_FETCH_FAIL,
+  error,
+});
+
+const fetchGroupRelationships = (groupIds: string[]) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const loadedRelationships = state.group_relationships;
+    const newGroupIds = groupIds.filter(id => loadedRelationships.get(id, null) === null);
+
+    if (!state.me || newGroupIds.length === 0) {
+      return;
+    }
+
+    dispatch(fetchGroupRelationshipsRequest(newGroupIds));
+
+    return api(getState).get(`/api/v1/groups/relationships?${newGroupIds.map(id => `id[]=${id}`).join('&')}`).then(response => {
+      dispatch(fetchGroupRelationshipsSuccess(response.data));
+    }).catch(error => {
+      dispatch(fetchGroupRelationshipsFail(error));
+    });
+  };
+
+const fetchGroupRelationshipsRequest = (ids: string[]) => ({
+  type: GROUP_RELATIONSHIPS_FETCH_REQUEST,
+  ids,
+  skipLoading: true,
+});
+
+const fetchGroupRelationshipsSuccess = (relationships: APIEntity[]) => ({
+  type: GROUP_RELATIONSHIPS_FETCH_SUCCESS,
+  relationships,
+  skipLoading: true,
+});
+
+const fetchGroupRelationshipsFail = (error: AxiosError) => ({
+  type: GROUP_RELATIONSHIPS_FETCH_FAIL,
+  error,
+  skipLoading: true,
+  skipNotFound: true,
+});
+
+const groupDeleteStatus = (groupId: string, statusId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(groupDeleteStatusRequest(groupId, statusId));
+
+    return api(getState).delete(`/api/v1/groups/${groupId}/statuses/${statusId}`)
+      .then(() => {
+        dispatch(deleteFromTimelines(statusId));
+        dispatch(groupDeleteStatusSuccess(groupId, statusId));
+      }).catch(err => dispatch(groupDeleteStatusFail(groupId, statusId, err)));
+  };
+
+const groupDeleteStatusRequest = (groupId: string, statusId: string) => ({
+  type: GROUP_DELETE_STATUS_REQUEST,
+  groupId,
+  statusId,
+});
+
+const groupDeleteStatusSuccess = (groupId: string, statusId: string) => ({
+  type: GROUP_DELETE_STATUS_SUCCESS,
+  groupId,
+  statusId,
+});
+
+const groupDeleteStatusFail = (groupId: string, statusId: string, error: AxiosError) => ({
+  type: GROUP_DELETE_STATUS_SUCCESS,
+  groupId,
+  statusId,
+  error,
+});
+
+const groupKick = (groupId: string, accountId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(groupKickRequest(groupId, accountId));
+
+    return api(getState).post(`/api/v1/groups/${groupId}/kick`, { account_ids: [accountId] })
+      .then(() => dispatch(groupKickSuccess(groupId, accountId)))
+      .catch(err => dispatch(groupKickFail(groupId, accountId, err)));
+  };
+
+const groupKickRequest = (groupId: string, accountId: string) => ({
+  type: GROUP_KICK_REQUEST,
+  groupId,
+  accountId,
+});
+
+const groupKickSuccess = (groupId: string, accountId: string) => ({
+  type: GROUP_KICK_SUCCESS,
+  groupId,
+  accountId,
+});
+
+const groupKickFail = (groupId: string, accountId: string, error: AxiosError) => ({
+  type: GROUP_KICK_SUCCESS,
+  groupId,
+  accountId,
+  error,
+});
+
+const fetchGroupBlocks = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(fetchGroupBlocksRequest(id));
+
+    return api(getState).get(`/api/v1/groups/${id}/blocks`).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchGroupBlocksSuccess(id, response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(fetchGroupBlocksFail(id, error));
+    });
+  };
+
+const fetchGroupBlocksRequest = (id: string) => ({
+  type: GROUP_BLOCKS_FETCH_REQUEST,
+  id,
+});
+
+const fetchGroupBlocksSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({
+  type: GROUP_BLOCKS_FETCH_SUCCESS,
+  id,
+  accounts,
+  next,
+});
+
+const fetchGroupBlocksFail = (id: string, error: AxiosError) => ({
+  type: GROUP_BLOCKS_FETCH_FAIL,
+  id,
+  error,
+  skipNotFound: true,
+});
+
+const expandGroupBlocks = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const url = getState().user_lists.group_blocks.get(id)?.next || null;
+
+    if (url === null) {
+      return;
+    }
+
+    dispatch(expandGroupBlocksRequest(id));
+
+    return api(getState).get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(expandGroupBlocksSuccess(id, response.data, next ? next.uri : null));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
+    }).catch(error => {
+      dispatch(expandGroupBlocksFail(id, error));
+    });
+  };
+
+const expandGroupBlocksRequest = (id: string) => ({
+  type: GROUP_BLOCKS_EXPAND_REQUEST,
+  id,
+});
+
+const expandGroupBlocksSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({
+  type: GROUP_BLOCKS_EXPAND_SUCCESS,
+  id,
+  accounts,
+  next,
+});
+
+const expandGroupBlocksFail = (id: string, error: AxiosError) => ({
+  type: GROUP_BLOCKS_EXPAND_FAIL,
+  id,
+  error,
+});
+
+const groupBlock = (groupId: string, accountId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(groupBlockRequest(groupId, accountId));
+
+    return api(getState).post(`/api/v1/groups/${groupId}/blocks`, { account_ids: [accountId] })
+      .then(() => dispatch(groupBlockSuccess(groupId, accountId)))
+      .catch(err => dispatch(groupBlockFail(groupId, accountId, err)));
+  };
+
+const groupBlockRequest = (groupId: string, accountId: string) => ({
+  type: GROUP_BLOCK_REQUEST,
+  groupId,
+  accountId,
+});
+
+const groupBlockSuccess = (groupId: string, accountId: string) => ({
+  type: GROUP_BLOCK_SUCCESS,
+  groupId,
+  accountId,
+});
+
+const groupBlockFail = (groupId: string, accountId: string, error: AxiosError) => ({
+  type: GROUP_BLOCK_FAIL,
+  groupId,
+  accountId,
+  error,
+});
+
+const groupUnblock = (groupId: string, accountId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(groupUnblockRequest(groupId, accountId));
+
+    return api(getState).delete(`/api/v1/groups/${groupId}/blocks?account_ids[]=${accountId}`)
+      .then(() => dispatch(groupUnblockSuccess(groupId, accountId)))
+      .catch(err => dispatch(groupUnblockFail(groupId, accountId, err)));
+  };
+
+const groupUnblockRequest = (groupId: string, accountId: string) => ({
+  type: GROUP_UNBLOCK_REQUEST,
+  groupId,
+  accountId,
+});
+
+const groupUnblockSuccess = (groupId: string, accountId: string) => ({
+  type: GROUP_UNBLOCK_SUCCESS,
+  groupId,
+  accountId,
+});
+
+const groupUnblockFail = (groupId: string, accountId: string, error: AxiosError) => ({
+  type: GROUP_UNBLOCK_FAIL,
+  groupId,
+  accountId,
+  error,
+});
+
+const groupPromoteAccount = (groupId: string, accountId: string, role: GroupRole) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(groupPromoteAccountRequest(groupId, accountId));
+
+    return api(getState).post(`/api/v1/groups/${groupId}/promote`, { account_ids: [accountId], role: role })
+      .then((response) => dispatch(groupPromoteAccountSuccess(groupId, accountId, response.data)))
+      .catch(err => dispatch(groupPromoteAccountFail(groupId, accountId, err)));
+  };
+
+const groupPromoteAccountRequest = (groupId: string, accountId: string) => ({
+  type: GROUP_PROMOTE_REQUEST,
+  groupId,
+  accountId,
+});
+
+const groupPromoteAccountSuccess = (groupId: string, accountId: string, memberships: APIEntity[]) => ({
+  type: GROUP_PROMOTE_SUCCESS,
+  groupId,
+  accountId,
+  memberships,
+});
+
+const groupPromoteAccountFail = (groupId: string, accountId: string, error: AxiosError) => ({
+  type: GROUP_PROMOTE_FAIL,
+  groupId,
+  accountId,
+  error,
+});
+
+const groupDemoteAccount = (groupId: string, accountId: string, role: GroupRole) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(groupDemoteAccountRequest(groupId, accountId));
+
+    return api(getState).post(`/api/v1/groups/${groupId}/demote`, { account_ids: [accountId], role: role })
+      .then((response) => dispatch(groupDemoteAccountSuccess(groupId, accountId, response.data)))
+      .catch(err => dispatch(groupDemoteAccountFail(groupId, accountId, err)));
+  };
+
+const groupDemoteAccountRequest = (groupId: string, accountId: string) => ({
+  type: GROUP_DEMOTE_REQUEST,
+  groupId,
+  accountId,
+});
+
+const groupDemoteAccountSuccess = (groupId: string, accountId: string, memberships: APIEntity[]) => ({
+  type: GROUP_DEMOTE_SUCCESS,
+  groupId,
+  accountId,
+  memberships,
+});
+
+const groupDemoteAccountFail = (groupId: string, accountId: string, error: AxiosError) => ({
+  type: GROUP_DEMOTE_FAIL,
+  groupId,
+  accountId,
+  error,
+});
+
+const fetchGroupMemberships = (id: string, role: GroupRole) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(fetchGroupMembershipsRequest(id, role));
+
+    return api(getState).get(`/api/v1/groups/${id}/memberships`, { params: { role } }).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(importFetchedAccounts(response.data.map((membership: APIEntity) => membership.account)));
+      dispatch(fetchGroupMembershipsSuccess(id, role, response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(fetchGroupMembershipsFail(id, role, error));
+    });
+  };
+
+const fetchGroupMembershipsRequest = (id: string, role: GroupRole) => ({
+  type: GROUP_MEMBERSHIPS_FETCH_REQUEST,
+  id,
+  role,
+});
+
+const fetchGroupMembershipsSuccess = (id: string, role: GroupRole, memberships: APIEntity[], next: string | null) => ({
+  type: GROUP_MEMBERSHIPS_FETCH_SUCCESS,
+  id,
+  role,
+  memberships,
+  next,
+});
+
+const fetchGroupMembershipsFail = (id: string, role: GroupRole, error: AxiosError) => ({
+  type: GROUP_MEMBERSHIPS_FETCH_FAIL,
+  id,
+  role,
+  error,
+  skipNotFound: true,
+});
+
+const expandGroupMemberships = (id: string, role: GroupRole) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const url = getState().group_memberships.get(role).get(id)?.next || null;
+
+    if (url === null) {
+      return;
+    }
+
+    dispatch(expandGroupMembershipsRequest(id, role));
+
+    return api(getState).get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(importFetchedAccounts(response.data.map((membership: APIEntity) => membership.account)));
+      dispatch(expandGroupMembershipsSuccess(id, role, response.data, next ? next.uri : null));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
+    }).catch(error => {
+      dispatch(expandGroupMembershipsFail(id, role, error));
+    });
+  };
+
+const expandGroupMembershipsRequest = (id: string, role: GroupRole) => ({
+  type: GROUP_MEMBERSHIPS_EXPAND_REQUEST,
+  id,
+  role,
+});
+
+const expandGroupMembershipsSuccess = (id: string, role: GroupRole, memberships: APIEntity[], next: string | null) => ({
+  type: GROUP_MEMBERSHIPS_EXPAND_SUCCESS,
+  id,
+  role,
+  memberships,
+  next,
+});
+
+const expandGroupMembershipsFail = (id: string, role: GroupRole, error: AxiosError) => ({
+  type: GROUP_MEMBERSHIPS_EXPAND_FAIL,
+  id,
+  role,
+  error,
+});
+
+const fetchGroupMembershipRequests = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(fetchGroupMembershipRequestsRequest(id));
+
+    return api(getState).get(`/api/v1/groups/${id}/membership_requests`).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchGroupMembershipRequestsSuccess(id, response.data, next ? next.uri : null));
+    }).catch(error => {
+      dispatch(fetchGroupMembershipRequestsFail(id, error));
+    });
+  };
+
+const fetchGroupMembershipRequestsRequest = (id: string) => ({
+  type: GROUP_MEMBERSHIP_REQUESTS_FETCH_REQUEST,
+  id,
+});
+
+const fetchGroupMembershipRequestsSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({
+  type: GROUP_MEMBERSHIP_REQUESTS_FETCH_SUCCESS,
+  id,
+  accounts,
+  next,
+});
+
+const fetchGroupMembershipRequestsFail = (id: string, error: AxiosError) => ({
+  type: GROUP_MEMBERSHIP_REQUESTS_FETCH_FAIL,
+  id,
+  error,
+  skipNotFound: true,
+});
+
+const expandGroupMembershipRequests = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const url = getState().user_lists.membership_requests.get(id)?.next || null;
+
+    if (url === null) {
+      return;
+    }
+
+    dispatch(expandGroupMembershipRequestsRequest(id));
+
+    return api(getState).get(url).then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(expandGroupMembershipRequestsSuccess(id, response.data, next ? next.uri : null));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
+    }).catch(error => {
+      dispatch(expandGroupMembershipRequestsFail(id, error));
+    });
+  };
+
+const expandGroupMembershipRequestsRequest = (id: string) => ({
+  type: GROUP_MEMBERSHIP_REQUESTS_EXPAND_REQUEST,
+  id,
+});
+
+const expandGroupMembershipRequestsSuccess = (id: string, accounts: APIEntity[], next: string | null) => ({
+  type: GROUP_MEMBERSHIP_REQUESTS_EXPAND_SUCCESS,
+  id,
+  accounts,
+  next,
+});
+
+const expandGroupMembershipRequestsFail = (id: string, error: AxiosError) => ({
+  type: GROUP_MEMBERSHIP_REQUESTS_EXPAND_FAIL,
+  id,
+  error,
+});
+
+const authorizeGroupMembershipRequest = (groupId: string, accountId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(authorizeGroupMembershipRequestRequest(groupId, accountId));
+
+    return api(getState)
+      .post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/authorize`)
+      .then(() => dispatch(authorizeGroupMembershipRequestSuccess(groupId, accountId)))
+      .catch(error => dispatch(authorizeGroupMembershipRequestFail(groupId, accountId, error)));
+  };
+
+const authorizeGroupMembershipRequestRequest = (groupId: string, accountId: string) => ({
+  type: GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_REQUEST,
+  groupId,
+  accountId,
+});
+
+const authorizeGroupMembershipRequestSuccess = (groupId: string, accountId: string) => ({
+  type: GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_SUCCESS,
+  groupId,
+  accountId,
+});
+
+const authorizeGroupMembershipRequestFail = (groupId: string, accountId: string, error: AxiosError) => ({
+  type: GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_FAIL,
+  groupId,
+  accountId,
+  error,
+});
+
+const rejectGroupMembershipRequest = (groupId: string, accountId: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch(rejectGroupMembershipRequestRequest(groupId, accountId));
+
+    return api(getState)
+      .post(`/api/v1/groups/${groupId}/membership_requests/${accountId}/reject`)
+      .then(() => dispatch(rejectGroupMembershipRequestSuccess(groupId, accountId)))
+      .catch(error => dispatch(rejectGroupMembershipRequestFail(groupId, accountId, error)));
+  };
+
+const rejectGroupMembershipRequestRequest = (groupId: string, accountId: string) => ({
+  type: GROUP_MEMBERSHIP_REQUEST_REJECT_REQUEST,
+  groupId,
+  accountId,
+});
+
+const rejectGroupMembershipRequestSuccess = (groupId: string, accountId: string) => ({
+  type: GROUP_MEMBERSHIP_REQUEST_REJECT_SUCCESS,
+  groupId,
+  accountId,
+});
+
+const rejectGroupMembershipRequestFail = (groupId: string, accountId: string, error?: AxiosError) => ({
+  type: GROUP_MEMBERSHIP_REQUEST_REJECT_FAIL,
+  groupId,
+  accountId,
+  error,
+});
+
+const changeGroupEditorTitle = (value: string) => ({
+  type: GROUP_EDITOR_TITLE_CHANGE,
+  value,
+});
+
+const changeGroupEditorDescription = (value: string) => ({
+  type: GROUP_EDITOR_DESCRIPTION_CHANGE,
+  value,
+});
+
+const changeGroupEditorPrivacy = (value: boolean) => ({
+  type: GROUP_EDITOR_PRIVACY_CHANGE,
+  value,
+});
+
+const changeGroupEditorMedia = (mediaType: 'header' | 'avatar', file: File) => ({
+  type: GROUP_EDITOR_MEDIA_CHANGE,
+  mediaType,
+  value: file,
+});
+
+const resetGroupEditor = () => ({
+  type: GROUP_EDITOR_RESET,
+});
+
+const submitGroupEditor = (shouldReset?: boolean) => (dispatch: AppDispatch, getState: () => RootState) => {
+  const groupId     = getState().group_editor.groupId;
+  const displayName = getState().group_editor.displayName;
+  const note        = getState().group_editor.note;
+  const avatar      = getState().group_editor.avatar;
+  const header      = getState().group_editor.header;
+  const visibility  = getState().group_editor.locked ? 'members_only' : 'everyone'; // Truth Social
+
+  const params: Record<string, any> = {
+    display_name: displayName,
+    group_visibility: visibility,
+    note,
+  };
+
+  if (avatar) params.avatar = avatar;
+  if (header) params.header = header;
+
+  if (groupId === null) {
+    return dispatch(createGroup(params, shouldReset));
+  } else {
+    return dispatch(updateGroup(groupId, params, shouldReset));
+  }
+};
+
+export {
+  GROUP_EDITOR_SET,
+  GROUP_CREATE_REQUEST,
+  GROUP_CREATE_SUCCESS,
+  GROUP_CREATE_FAIL,
+  GROUP_UPDATE_REQUEST,
+  GROUP_UPDATE_SUCCESS,
+  GROUP_UPDATE_FAIL,
+  GROUP_DELETE_REQUEST,
+  GROUP_DELETE_SUCCESS,
+  GROUP_DELETE_FAIL,
+  GROUP_FETCH_REQUEST,
+  GROUP_FETCH_SUCCESS,
+  GROUP_FETCH_FAIL,
+  GROUPS_FETCH_REQUEST,
+  GROUPS_FETCH_SUCCESS,
+  GROUPS_FETCH_FAIL,
+  GROUP_RELATIONSHIPS_FETCH_REQUEST,
+  GROUP_RELATIONSHIPS_FETCH_SUCCESS,
+  GROUP_RELATIONSHIPS_FETCH_FAIL,
+  GROUP_DELETE_STATUS_REQUEST,
+  GROUP_DELETE_STATUS_SUCCESS,
+  GROUP_DELETE_STATUS_FAIL,
+  GROUP_KICK_REQUEST,
+  GROUP_KICK_SUCCESS,
+  GROUP_KICK_FAIL,
+  GROUP_BLOCKS_FETCH_REQUEST,
+  GROUP_BLOCKS_FETCH_SUCCESS,
+  GROUP_BLOCKS_FETCH_FAIL,
+  GROUP_BLOCKS_EXPAND_REQUEST,
+  GROUP_BLOCKS_EXPAND_SUCCESS,
+  GROUP_BLOCKS_EXPAND_FAIL,
+  GROUP_BLOCK_REQUEST,
+  GROUP_BLOCK_SUCCESS,
+  GROUP_BLOCK_FAIL,
+  GROUP_UNBLOCK_REQUEST,
+  GROUP_UNBLOCK_SUCCESS,
+  GROUP_UNBLOCK_FAIL,
+  GROUP_PROMOTE_REQUEST,
+  GROUP_PROMOTE_SUCCESS,
+  GROUP_PROMOTE_FAIL,
+  GROUP_DEMOTE_REQUEST,
+  GROUP_DEMOTE_SUCCESS,
+  GROUP_DEMOTE_FAIL,
+  GROUP_MEMBERSHIPS_FETCH_REQUEST,
+  GROUP_MEMBERSHIPS_FETCH_SUCCESS,
+  GROUP_MEMBERSHIPS_FETCH_FAIL,
+  GROUP_MEMBERSHIPS_EXPAND_REQUEST,
+  GROUP_MEMBERSHIPS_EXPAND_SUCCESS,
+  GROUP_MEMBERSHIPS_EXPAND_FAIL,
+  GROUP_MEMBERSHIP_REQUESTS_FETCH_REQUEST,
+  GROUP_MEMBERSHIP_REQUESTS_FETCH_SUCCESS,
+  GROUP_MEMBERSHIP_REQUESTS_FETCH_FAIL,
+  GROUP_MEMBERSHIP_REQUESTS_EXPAND_REQUEST,
+  GROUP_MEMBERSHIP_REQUESTS_EXPAND_SUCCESS,
+  GROUP_MEMBERSHIP_REQUESTS_EXPAND_FAIL,
+  GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_REQUEST,
+  GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_SUCCESS,
+  GROUP_MEMBERSHIP_REQUEST_AUTHORIZE_FAIL,
+  GROUP_MEMBERSHIP_REQUEST_REJECT_REQUEST,
+  GROUP_MEMBERSHIP_REQUEST_REJECT_SUCCESS,
+  GROUP_MEMBERSHIP_REQUEST_REJECT_FAIL,
+  GROUP_EDITOR_TITLE_CHANGE,
+  GROUP_EDITOR_DESCRIPTION_CHANGE,
+  GROUP_EDITOR_PRIVACY_CHANGE,
+  GROUP_EDITOR_MEDIA_CHANGE,
+  GROUP_EDITOR_RESET,
+  editGroup,
+  createGroup,
+  createGroupRequest,
+  createGroupSuccess,
+  createGroupFail,
+  updateGroup,
+  updateGroupRequest,
+  updateGroupSuccess,
+  updateGroupFail,
+  deleteGroup,
+  deleteGroupRequest,
+  deleteGroupSuccess,
+  deleteGroupFail,
+  fetchGroup,
+  fetchGroupRequest,
+  fetchGroupSuccess,
+  fetchGroupFail,
+  fetchGroups,
+  fetchGroupsRequest,
+  fetchGroupsSuccess,
+  fetchGroupsFail,
+  fetchGroupRelationships,
+  fetchGroupRelationshipsRequest,
+  fetchGroupRelationshipsSuccess,
+  fetchGroupRelationshipsFail,
+  groupDeleteStatus,
+  groupDeleteStatusRequest,
+  groupDeleteStatusSuccess,
+  groupDeleteStatusFail,
+  groupKick,
+  groupKickRequest,
+  groupKickSuccess,
+  groupKickFail,
+  fetchGroupBlocks,
+  fetchGroupBlocksRequest,
+  fetchGroupBlocksSuccess,
+  fetchGroupBlocksFail,
+  expandGroupBlocks,
+  expandGroupBlocksRequest,
+  expandGroupBlocksSuccess,
+  expandGroupBlocksFail,
+  groupBlock,
+  groupBlockRequest,
+  groupBlockSuccess,
+  groupBlockFail,
+  groupUnblock,
+  groupUnblockRequest,
+  groupUnblockSuccess,
+  groupUnblockFail,
+  groupPromoteAccount,
+  groupPromoteAccountRequest,
+  groupPromoteAccountSuccess,
+  groupPromoteAccountFail,
+  groupDemoteAccount,
+  groupDemoteAccountRequest,
+  groupDemoteAccountSuccess,
+  groupDemoteAccountFail,
+  fetchGroupMemberships,
+  fetchGroupMembershipsRequest,
+  fetchGroupMembershipsSuccess,
+  fetchGroupMembershipsFail,
+  expandGroupMemberships,
+  expandGroupMembershipsRequest,
+  expandGroupMembershipsSuccess,
+  expandGroupMembershipsFail,
+  fetchGroupMembershipRequests,
+  fetchGroupMembershipRequestsRequest,
+  fetchGroupMembershipRequestsSuccess,
+  fetchGroupMembershipRequestsFail,
+  expandGroupMembershipRequests,
+  expandGroupMembershipRequestsRequest,
+  expandGroupMembershipRequestsSuccess,
+  expandGroupMembershipRequestsFail,
+  authorizeGroupMembershipRequest,
+  authorizeGroupMembershipRequestRequest,
+  authorizeGroupMembershipRequestSuccess,
+  authorizeGroupMembershipRequestFail,
+  rejectGroupMembershipRequest,
+  rejectGroupMembershipRequestRequest,
+  rejectGroupMembershipRequestSuccess,
+  rejectGroupMembershipRequestFail,
+  changeGroupEditorTitle,
+  changeGroupEditorDescription,
+  changeGroupEditorPrivacy,
+  changeGroupEditorMedia,
+  resetGroupEditor,
+  submitGroupEditor,
+};

app/soapbox/actions/import-data.ts

@@ -1,10 +1,9 @@
 import { defineMessages } from 'react-intl';
 
-import snackbar from 'soapbox/actions/snackbar';
+import toast from 'soapbox/toast';
 
 import api from '../api';
 
-import type { SnackbarAction } from './snackbar';
 import type { RootState } from 'soapbox/store';
 
 export const IMPORT_FOLLOWS_REQUEST = 'IMPORT_FOLLOWS_REQUEST';
@@ -28,10 +27,10 @@ type ImportDataActions = {
   | typeof IMPORT_BLOCKS_FAIL
   | typeof IMPORT_MUTES_REQUEST
   | typeof IMPORT_MUTES_SUCCESS
-  | typeof IMPORT_MUTES_FAIL,
-  error?: any,
+  | typeof IMPORT_MUTES_FAIL
+  error?: any
   config?: string
-} | SnackbarAction
+}
 
 const messages = defineMessages({
   blocksSuccess: { id: 'import_data.success.blocks', defaultMessage: 'Blocks imported successfully' },
@@ -45,7 +44,7 @@ export const importFollows = (params: FormData) =>
     return api(getState)
       .post('/api/pleroma/follow_import', params)
       .then(response => {
-        dispatch(snackbar.success(messages.followersSuccess));
+        toast.success(messages.followersSuccess);
         dispatch({ type: IMPORT_FOLLOWS_SUCCESS, config: response.data });
       }).catch(error => {
         dispatch({ type: IMPORT_FOLLOWS_FAIL, error });
@@ -58,7 +57,7 @@ export const importBlocks = (params: FormData) =>
     return api(getState)
       .post('/api/pleroma/blocks_import', params)
       .then(response => {
-        dispatch(snackbar.success(messages.blocksSuccess));
+        toast.success(messages.blocksSuccess);
         dispatch({ type: IMPORT_BLOCKS_SUCCESS, config: response.data });
       }).catch(error => {
         dispatch({ type: IMPORT_BLOCKS_FAIL, error });
@@ -71,7 +70,7 @@ export const importMutes = (params: FormData) =>
     return api(getState)
       .post('/api/pleroma/mutes_import', params)
       .then(response => {
-        dispatch(snackbar.success(messages.mutesSuccess));
+        toast.success(messages.mutesSuccess);
         dispatch({ type: IMPORT_MUTES_SUCCESS, config: response.data });
       }).catch(error => {
         dispatch({ type: IMPORT_MUTES_FAIL, error });

app/soapbox/actions/importer/index.ts

@@ -1,3 +1,8 @@
+import { importEntities } from 'soapbox/entity-store/actions';
+import { Entities } from 'soapbox/entity-store/entities';
+import { Group, groupSchema } from 'soapbox/schemas';
+import { filteredArray } from 'soapbox/schemas/utils';
+
 import { getSettings } from '../settings';
 
 import type { AppDispatch, RootState } from 'soapbox/store';
@@ -5,42 +10,44 @@ import type { APIEntity } from 'soapbox/types/entities';
 
 const ACCOUNT_IMPORT  = 'ACCOUNT_IMPORT';
 const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
+const GROUP_IMPORT    = 'GROUP_IMPORT';
+const GROUPS_IMPORT   = 'GROUPS_IMPORT';
 const STATUS_IMPORT   = 'STATUS_IMPORT';
 const STATUSES_IMPORT = 'STATUSES_IMPORT';
 const POLLS_IMPORT    = 'POLLS_IMPORT';
 const ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP = 'ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP';
 
-export function importAccount(account: APIEntity) {
-  return { type: ACCOUNT_IMPORT, account };
-}
+const importAccount = (account: APIEntity) =>
+  ({ type: ACCOUNT_IMPORT, account });
 
-export function importAccounts(accounts: APIEntity[]) {
-  return { type: ACCOUNTS_IMPORT, accounts };
-}
+const importAccounts = (accounts: APIEntity[]) =>
+  ({ type: ACCOUNTS_IMPORT, accounts });
 
-export function importStatus(status: APIEntity, idempotencyKey?: string) {
-  return (dispatch: AppDispatch, getState: () => RootState) => {
+const importGroup = (group: Group) =>
+  importEntities([group], Entities.GROUPS);
+
+const importGroups = (groups: Group[]) =>
+  importEntities(groups, Entities.GROUPS);
+
+const importStatus = (status: APIEntity, idempotencyKey?: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
     const expandSpoilers = getSettings(getState()).get('expandSpoilers');
     return dispatch({ type: STATUS_IMPORT, status, idempotencyKey, expandSpoilers });
   };
-}
 
-export function importStatuses(statuses: APIEntity[]) {
-  return (dispatch: AppDispatch, getState: () => RootState) => {
+const importStatuses = (statuses: APIEntity[]) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
     const expandSpoilers = getSettings(getState()).get('expandSpoilers');
     return dispatch({ type: STATUSES_IMPORT, statuses, expandSpoilers });
   };
-}
 
-export function importPolls(polls: APIEntity[]) {
-  return { type: POLLS_IMPORT, polls };
-}
+const importPolls = (polls: APIEntity[]) =>
+  ({ type: POLLS_IMPORT, polls });
 
-export function importFetchedAccount(account: APIEntity) {
-  return importFetchedAccounts([account]);
-}
+const importFetchedAccount = (account: APIEntity) =>
+  importFetchedAccounts([account]);
 
-export function importFetchedAccounts(accounts: APIEntity[], args = { should_refetch: false }) {
+const importFetchedAccounts = (accounts: APIEntity[], args = { should_refetch: false }) => {
   const { should_refetch } = args;
   const normalAccounts: APIEntity[] = [];
 
@@ -61,10 +68,18 @@ export function importFetchedAccounts(accounts: APIEntity[], args = { should_ref
   accounts.forEach(processAccount);
 
   return importAccounts(normalAccounts);
-}
+};
 
-export function importFetchedStatus(status: APIEntity, idempotencyKey?: string) {
-  return (dispatch: AppDispatch) => {
+const importFetchedGroup = (group: APIEntity) =>
+  importFetchedGroups([group]);
+
+const importFetchedGroups = (groups: APIEntity[]) => {
+  const entities = filteredArray(groupSchema).catch([]).parse(groups);
+  return importGroups(entities);
+};
+
+const importFetchedStatus = (status: APIEntity, idempotencyKey?: string) =>
+  (dispatch: AppDispatch) => {
     // Skip broken statuses
     if (isBroken(status)) return;
 
@@ -96,10 +111,13 @@ export function importFetchedStatus(status: APIEntity, idempotencyKey?: string)
       dispatch(importFetchedPoll(status.poll));
     }
 
+    if (status.group?.id) {
+      dispatch(importFetchedGroup(status.group));
+    }
+
     dispatch(importFetchedAccount(status.account));
     dispatch(importStatus(status, idempotencyKey));
   };
-}
 
 // Sometimes Pleroma can return an empty account,
 // or a repost can appear of a deleted account. Skip these statuses.
@@ -117,8 +135,8 @@ const isBroken = (status: APIEntity) => {
   }
 };
 
-export function importFetchedStatuses(statuses: APIEntity[]) {
-  return (dispatch: AppDispatch, getState: () => RootState) => {
+const importFetchedStatuses = (statuses: APIEntity[]) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
     const accounts: APIEntity[] = [];
     const normalStatuses: APIEntity[] = [];
     const polls: APIEntity[] = [];
@@ -146,6 +164,10 @@ export function importFetchedStatuses(statuses: APIEntity[]) {
       if (status.poll?.id) {
         polls.push(status.poll);
       }
+
+      if (status.group?.id) {
+        dispatch(importFetchedGroup(status.group));
+      }
     }
 
     statuses.forEach(processStatus);
@@ -154,23 +176,37 @@ export function importFetchedStatuses(statuses: APIEntity[]) {
     dispatch(importFetchedAccounts(accounts));
     dispatch(importStatuses(normalStatuses));
   };
-}
 
-export function importFetchedPoll(poll: APIEntity) {
-  return (dispatch: AppDispatch) => {
+const importFetchedPoll = (poll: APIEntity) =>
+  (dispatch: AppDispatch) => {
     dispatch(importPolls([poll]));
   };
-}
 
-export function importErrorWhileFetchingAccountByUsername(username: string) {
-  return { type: ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP, username };
-}
+const importErrorWhileFetchingAccountByUsername = (username: string) =>
+  ({ type: ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP, username });
 
 export {
   ACCOUNT_IMPORT,
   ACCOUNTS_IMPORT,
+  GROUP_IMPORT,
+  GROUPS_IMPORT,
   STATUS_IMPORT,
   STATUSES_IMPORT,
   POLLS_IMPORT,
   ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP,
+  importAccount,
+  importAccounts,
+  importGroup,
+  importGroups,
+  importStatus,
+  importStatuses,
+  importPolls,
+  importFetchedAccount,
+  importFetchedAccounts,
+  importFetchedGroup,
+  importFetchedGroups,
+  importFetchedStatus,
+  importFetchedStatuses,
+  importFetchedPoll,
+  importErrorWhileFetchingAccountByUsername,
 };

app/soapbox/actions/instance.ts

@@ -10,12 +10,12 @@ import api from '../api';
 
 const getMeUrl = (state: RootState) => {
   const me = state.me;
-  return state.accounts.getIn([me, 'url']);
+  return state.accounts.get(me)?.url;
 };
 
 /** Figure out the appropriate instance to fetch depending on the state */
 export const getHost = (state: RootState) => {
-  const accountUrl = getMeUrl(state) || getAuthUserUrl(state);
+  const accountUrl = getMeUrl(state) || getAuthUserUrl(state) as string;
 
   try {
     return new URL(accountUrl).host;

app/soapbox/actions/interactions.ts

@@ -1,6 +1,6 @@
 import { defineMessages } from 'react-intl';
 
-import snackbar from 'soapbox/actions/snackbar';
+import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 
 import api from '../api';
@@ -20,6 +20,10 @@ const FAVOURITE_REQUEST = 'FAVOURITE_REQUEST';
 const FAVOURITE_SUCCESS = 'FAVOURITE_SUCCESS';
 const FAVOURITE_FAIL    = 'FAVOURITE_FAIL';
 
+const DISLIKE_REQUEST = 'DISLIKE_REQUEST';
+const DISLIKE_SUCCESS = 'DISLIKE_SUCCESS';
+const DISLIKE_FAIL    = 'DISLIKE_FAIL';
+
 const UNREBLOG_REQUEST = 'UNREBLOG_REQUEST';
 const UNREBLOG_SUCCESS = 'UNREBLOG_SUCCESS';
 const UNREBLOG_FAIL    = 'UNREBLOG_FAIL';
@@ -28,6 +32,10 @@ const UNFAVOURITE_REQUEST = 'UNFAVOURITE_REQUEST';
 const UNFAVOURITE_SUCCESS = 'UNFAVOURITE_SUCCESS';
 const UNFAVOURITE_FAIL    = 'UNFAVOURITE_FAIL';
 
+const UNDISLIKE_REQUEST = 'UNDISLIKE_REQUEST';
+const UNDISLIKE_SUCCESS = 'UNDISLIKE_SUCCESS';
+const UNDISLIKE_FAIL    = 'UNDISLIKE_FAIL';
+
 const REBLOGS_FETCH_REQUEST = 'REBLOGS_FETCH_REQUEST';
 const REBLOGS_FETCH_SUCCESS = 'REBLOGS_FETCH_SUCCESS';
 const REBLOGS_FETCH_FAIL    = 'REBLOGS_FETCH_FAIL';
@@ -36,6 +44,10 @@ const FAVOURITES_FETCH_REQUEST = 'FAVOURITES_FETCH_REQUEST';
 const FAVOURITES_FETCH_SUCCESS = 'FAVOURITES_FETCH_SUCCESS';
 const FAVOURITES_FETCH_FAIL    = 'FAVOURITES_FETCH_FAIL';
 
+const DISLIKES_FETCH_REQUEST = 'DISLIKES_FETCH_REQUEST';
+const DISLIKES_FETCH_SUCCESS = 'DISLIKES_FETCH_SUCCESS';
+const DISLIKES_FETCH_FAIL    = 'DISLIKES_FETCH_FAIL';
+
 const REACTIONS_FETCH_REQUEST = 'REACTIONS_FETCH_REQUEST';
 const REACTIONS_FETCH_SUCCESS = 'REACTIONS_FETCH_SUCCESS';
 const REACTIONS_FETCH_FAIL    = 'REACTIONS_FETCH_FAIL';
@@ -63,7 +75,7 @@ const REMOTE_INTERACTION_FAIL    = 'REMOTE_INTERACTION_FAIL';
 const messages = defineMessages({
   bookmarkAdded: { id: 'status.bookmarked', defaultMessage: 'Bookmark added.' },
   bookmarkRemoved: { id: 'status.unbookmarked', defaultMessage: 'Bookmark removed.' },
-  view: { id: 'snackbar.view', defaultMessage: 'View' },
+  view: { id: 'toast.view', defaultMessage: 'View' },
 });
 
 const reblog = (status: StatusEntity) =>
@@ -96,7 +108,7 @@ const unreblog = (status: StatusEntity) =>
   };
 
 const toggleReblog = (status: StatusEntity) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
+  (dispatch: AppDispatch) => {
     if (status.reblogged) {
       dispatch(unreblog(status));
     } else {
@@ -169,7 +181,7 @@ const unfavourite = (status: StatusEntity) =>
   };
 
 const toggleFavourite = (status: StatusEntity) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
+  (dispatch: AppDispatch) => {
     if (status.favourited) {
       dispatch(unfavourite(status));
     } else {
@@ -215,6 +227,79 @@ const unfavouriteFail = (status: StatusEntity, error: AxiosError) => ({
   skipLoading: true,
 });
 
+const dislike = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(dislikeRequest(status));
+
+    api(getState).post(`/api/friendica/statuses/${status.get('id')}/dislike`).then(function() {
+      dispatch(dislikeSuccess(status));
+    }).catch(function(error) {
+      dispatch(dislikeFail(status, error));
+    });
+  };
+
+const undislike = (status: StatusEntity) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(undislikeRequest(status));
+
+    api(getState).post(`/api/friendica/statuses/${status.get('id')}/undislike`).then(() => {
+      dispatch(undislikeSuccess(status));
+    }).catch(error => {
+      dispatch(undislikeFail(status, error));
+    });
+  };
+
+const toggleDislike = (status: StatusEntity) =>
+  (dispatch: AppDispatch) => {
+    if (status.disliked) {
+      dispatch(undislike(status));
+    } else {
+      dispatch(dislike(status));
+    }
+  };
+
+const dislikeRequest = (status: StatusEntity) => ({
+  type: DISLIKE_REQUEST,
+  status: status,
+  skipLoading: true,
+});
+
+const dislikeSuccess = (status: StatusEntity) => ({
+  type: DISLIKE_SUCCESS,
+  status: status,
+  skipLoading: true,
+});
+
+const dislikeFail = (status: StatusEntity, error: AxiosError) => ({
+  type: DISLIKE_FAIL,
+  status: status,
+  error: error,
+  skipLoading: true,
+});
+
+const undislikeRequest = (status: StatusEntity) => ({
+  type: UNDISLIKE_REQUEST,
+  status: status,
+  skipLoading: true,
+});
+
+const undislikeSuccess = (status: StatusEntity) => ({
+  type: UNDISLIKE_SUCCESS,
+  status: status,
+  skipLoading: true,
+});
+
+const undislikeFail = (status: StatusEntity, error: AxiosError) => ({
+  type: UNDISLIKE_FAIL,
+  status: status,
+  error: error,
+  skipLoading: true,
+});
+
 const bookmark = (status: StatusEntity) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch(bookmarkRequest(status));
@@ -222,7 +307,10 @@ const bookmark = (status: StatusEntity) =>
     api(getState).post(`/api/v1/statuses/${status.get('id')}/bookmark`).then(function(response) {
       dispatch(importFetchedStatus(response.data));
       dispatch(bookmarkSuccess(status, response.data));
-      dispatch(snackbar.success(messages.bookmarkAdded, messages.view, '/bookmarks'));
+      toast.success(messages.bookmarkAdded, {
+        actionLabel: messages.view,
+        actionLink: '/bookmarks',
+      });
     }).catch(function(error) {
       dispatch(bookmarkFail(status, error));
     });
@@ -235,7 +323,7 @@ const unbookmark = (status: StatusEntity) =>
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unbookmark`).then(response => {
       dispatch(importFetchedStatus(response.data));
       dispatch(unbookmarkSuccess(status, response.data));
-      dispatch(snackbar.success(messages.bookmarkRemoved));
+      toast.success(messages.bookmarkRemoved);
     }).catch(error => {
       dispatch(unbookmarkFail(status, error));
     });
@@ -348,6 +436,38 @@ const fetchFavouritesFail = (id: string, error: AxiosError) => ({
   error,
 });
 
+const fetchDislikes = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(fetchDislikesRequest(id));
+
+    api(getState).get(`/api/friendica/statuses/${id}/disliked_by`).then(response => {
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchRelationships(response.data.map((item: APIEntity) => item.id)));
+      dispatch(fetchDislikesSuccess(id, response.data));
+    }).catch(error => {
+      dispatch(fetchDislikesFail(id, error));
+    });
+  };
+
+const fetchDislikesRequest = (id: string) => ({
+  type: DISLIKES_FETCH_REQUEST,
+  id,
+});
+
+const fetchDislikesSuccess = (id: string, accounts: APIEntity[]) => ({
+  type: DISLIKES_FETCH_SUCCESS,
+  id,
+  accounts,
+});
+
+const fetchDislikesFail = (id: string, error: AxiosError) => ({
+  type: DISLIKES_FETCH_FAIL,
+  id,
+  error,
+});
+
 const fetchReactions = (id: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch(fetchReactionsRequest(id));
@@ -495,18 +615,27 @@ export {
   FAVOURITE_REQUEST,
   FAVOURITE_SUCCESS,
   FAVOURITE_FAIL,
+  DISLIKE_REQUEST,
+  DISLIKE_SUCCESS,
+  DISLIKE_FAIL,
   UNREBLOG_REQUEST,
   UNREBLOG_SUCCESS,
   UNREBLOG_FAIL,
   UNFAVOURITE_REQUEST,
   UNFAVOURITE_SUCCESS,
   UNFAVOURITE_FAIL,
+  UNDISLIKE_REQUEST,
+  UNDISLIKE_SUCCESS,
+  UNDISLIKE_FAIL,
   REBLOGS_FETCH_REQUEST,
   REBLOGS_FETCH_SUCCESS,
   REBLOGS_FETCH_FAIL,
   FAVOURITES_FETCH_REQUEST,
   FAVOURITES_FETCH_SUCCESS,
   FAVOURITES_FETCH_FAIL,
+  DISLIKES_FETCH_REQUEST,
+  DISLIKES_FETCH_SUCCESS,
+  DISLIKES_FETCH_FAIL,
   REACTIONS_FETCH_REQUEST,
   REACTIONS_FETCH_SUCCESS,
   REACTIONS_FETCH_FAIL,
@@ -543,6 +672,15 @@ export {
   unfavouriteRequest,
   unfavouriteSuccess,
   unfavouriteFail,
+  dislike,
+  undislike,
+  toggleDislike,
+  dislikeRequest,
+  dislikeSuccess,
+  dislikeFail,
+  undislikeRequest,
+  undislikeSuccess,
+  undislikeFail,
   bookmark,
   unbookmark,
   toggleBookmark,
@@ -560,6 +698,10 @@ export {
   fetchFavouritesRequest,
   fetchFavouritesSuccess,
   fetchFavouritesFail,
+  fetchDislikes,
+  fetchDislikesRequest,
+  fetchDislikesSuccess,
+  fetchDislikesFail,
   fetchReactions,
   fetchReactionsRequest,
   fetchReactionsSuccess,

app/soapbox/actions/lists.ts

@@ -1,8 +1,8 @@
+import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 
 import api from '../api';
 
-import { showAlertForError } from './alerts';
 import { importFetchedAccounts } from './importer';
 
 import type { AxiosError } from 'axios';
@@ -265,7 +265,7 @@ const fetchListSuggestions = (q: string) => (dispatch: AppDispatch, getState: ()
   api(getState).get('/api/v1/accounts/search', { params }).then(({ data }) => {
     dispatch(importFetchedAccounts(data));
     dispatch(fetchListSuggestionsReady(q, data));
-  }).catch(error => dispatch(showAlertForError(error)));
+  }).catch(error => toast.showAlertForError(error));
 };
 
 const fetchListSuggestionsReady = (query: string, accounts: APIEntity[]) => ({

app/soapbox/actions/me.ts

@@ -6,7 +6,7 @@ import api from '../api';
 import { loadCredentials } from './auth';
 import { importFetchedAccount } from './importer';
 
-import type { AxiosError, AxiosRequestHeaders } from 'axios';
+import type { AxiosError, RawAxiosRequestHeaders } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity } from 'soapbox/types/entities';
 
@@ -30,8 +30,8 @@ const getMeUrl = (state: RootState) => {
 
 const getMeToken = (state: RootState) => {
   // Fallback for upgrading IDs to URLs
-  const accountUrl = getMeUrl(state) || state.auth.get('me');
-  return state.auth.getIn(['users', accountUrl, 'access_token']);
+  const accountUrl = getMeUrl(state) || state.auth.me;
+  return state.auth.users.get(accountUrl!)?.access_token;
 };
 
 const fetchMe = () =>
@@ -46,7 +46,7 @@ const fetchMe = () =>
     }
 
     dispatch(fetchMeRequest());
-    return dispatch(loadCredentials(token, accountUrl))
+    return dispatch(loadCredentials(token, accountUrl!))
       .catch(error => dispatch(fetchMeFail(error)));
   };
 
@@ -66,7 +66,7 @@ const patchMe = (params: Record<string, any>, isFormData = false) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch(patchMeRequest());
 
-    const headers: AxiosRequestHeaders = isFormData ? {
+    const headers: RawAxiosRequestHeaders = isFormData ? {
       'Content-Type': 'multipart/form-data',
     } : {};
 

app/soapbox/actions/moderation.tsx

@@ -4,10 +4,10 @@ import { defineMessages, IntlShape } from 'react-intl';
 import { fetchAccountByUsername } from 'soapbox/actions/accounts';
 import { deactivateUsers, deleteUsers, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin';
 import { openModal } from 'soapbox/actions/modals';
-import snackbar from 'soapbox/actions/snackbar';
 import OutlineBox from 'soapbox/components/outline-box';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
+import toast from 'soapbox/toast';
 import { isLocal } from 'soapbox/utils/accounts';
 
 import type { AppDispatch, RootState } from 'soapbox/store';
@@ -65,7 +65,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
       onConfirm: () => {
         dispatch(deactivateUsers([accountId])).then(() => {
           const message = intl.formatMessage(messages.userDeactivated, { acct });
-          dispatch(snackbar.success(message));
+          toast.success(message);
           afterConfirm();
         }).catch(() => {});
       },
@@ -105,34 +105,13 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
         dispatch(deleteUsers([accountId])).then(() => {
           const message = intl.formatMessage(messages.userDeleted, { acct });
           dispatch(fetchAccountByUsername(acct));
-          dispatch(snackbar.success(message));
+          toast.success(message);
           afterConfirm();
         }).catch(() => {});
       },
     }));
   };
 
-const rejectUserModal = (intl: IntlShape, accountId: string, afterConfirm = () => {}) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    const state = getState();
-    const acct = state.accounts.get(accountId)!.acct;
-    const name = state.accounts.get(accountId)!.username;
-
-    dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/user-off.svg'),
-      heading: intl.formatMessage(messages.rejectUserHeading, { acct }),
-      message: intl.formatMessage(messages.rejectUserPrompt, { acct }),
-      confirm: intl.formatMessage(messages.rejectUserConfirm, { name }),
-      onConfirm: () => {
-        dispatch(deleteUsers([accountId]))
-          .then(() => {
-            afterConfirm();
-          })
-          .catch(() => {});
-      },
-    }));
-  };
-
 const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensitive: boolean, afterConfirm = () => {}) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
@@ -147,7 +126,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
       onConfirm: () => {
         dispatch(toggleStatusSensitivity(statusId, sensitive)).then(() => {
           const message = intl.formatMessage(sensitive === false ? messages.statusMarkedSensitive : messages.statusMarkedNotSensitive, { acct });
-          dispatch(snackbar.success(message));
+          toast.success(message);
         }).catch(() => {});
         afterConfirm();
       },
@@ -168,7 +147,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
       onConfirm: () => {
         dispatch(deleteStatus(statusId)).then(() => {
           const message = intl.formatMessage(messages.statusDeleted, { acct });
-          dispatch(snackbar.success(message));
+          toast.success(message);
         }).catch(() => {});
         afterConfirm();
       },
@@ -178,7 +157,6 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
 export {
   deactivateUserModal,
   deleteUserModal,
-  rejectUserModal,
   toggleStatusSensitivityModal,
   deleteStatusModal,
 };

app/soapbox/actions/notifications.ts

@@ -47,7 +47,7 @@ const MAX_QUEUED_NOTIFICATIONS = 40;
 
 defineMessages({
   mention: { id: 'notification.mention', defaultMessage: '{name} mentioned you' },
-  group: { id: 'notifications.group', defaultMessage: '{count} notifications' },
+  group: { id: 'notifications.group', defaultMessage: '{count, plural, one {# notification} other {# notifications}}' },
 });
 
 const fetchRelatedRelationships = (dispatch: AppDispatch, notifications: APIEntity[]) => {
@@ -89,6 +89,7 @@ const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<
   (dispatch: AppDispatch, getState: () => RootState) => {
     if (!notification.type) return; // drop invalid notifications
     if (notification.type === 'pleroma:chat_mention') return; // Drop chat notifications, handle them per-chat
+    if (notification.type === 'chat') return; // Drop Truth Social chat notifications.
 
     const showAlert = getSettings(getState()).getIn(['notifications', 'alerts', notification.type]);
     const filters = getFilters(getState(), { contextType: 'notifications' });
@@ -106,7 +107,10 @@ const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<
 
     // Desktop notifications
     try {
-      if (showAlert && !filtered) {
+      // eslint-disable-next-line compat/compat
+      const isNotificationsEnabled = window.Notification?.permission === 'granted';
+
+      if (showAlert && !filtered && isNotificationsEnabled) {
         const title = new IntlMessageFormat(intlMessages[`notification.${notification.type}`], intlLocale).format({ name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
         const body = (notification.status && notification.status.spoiler_text.length > 0) ? notification.status.spoiler_text : unescapeHTML(notification.status ? notification.status.content : '');
 

app/soapbox/actions/push-notifications/registerer.ts

@@ -37,8 +37,8 @@ const subscribe = (registration: ServiceWorkerRegistration, getState: () => Root
   });
 
 const unsubscribe = ({ registration, subscription }: {
-  registration: ServiceWorkerRegistration,
-  subscription: PushSubscription | null,
+  registration: ServiceWorkerRegistration
+  subscription: PushSubscription | null
 }) =>
   subscription ? subscription.unsubscribe().then(() => registration) : new Promise<ServiceWorkerRegistration>(r => r(registration));
 
@@ -82,8 +82,8 @@ const register = () =>
       .then(getPushSubscription)
       // @ts-ignore
       .then(({ registration, subscription }: {
-        registration: ServiceWorkerRegistration,
-        subscription: PushSubscription | null,
+        registration: ServiceWorkerRegistration
+        subscription: PushSubscription | null
       }) => {
         if (subscription !== null) {
           // We have a subscription, check if it is still valid

app/soapbox/actions/reports.ts

@@ -4,7 +4,7 @@ import { openModal } from './modals';
 
 import type { AxiosError } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Account, Status } from 'soapbox/types/entities';
+import type { Account, ChatMessage, Group, Status } from 'soapbox/types/entities';
 
 const REPORT_INIT   = 'REPORT_INIT';
 const REPORT_CANCEL = 'REPORT_CANCEL';
@@ -20,26 +20,33 @@ const REPORT_BLOCK_CHANGE   = 'REPORT_BLOCK_CHANGE';
 
 const REPORT_RULE_CHANGE    = 'REPORT_RULE_CHANGE';
 
-const initReport = (account: Account, status?: Status) =>
-  (dispatch: AppDispatch) => {
-    dispatch({
-      type: REPORT_INIT,
-      account,
-      status,
-    });
+enum ReportableEntities {
+  ACCOUNT = 'ACCOUNT',
+  CHAT_MESSAGE = 'CHAT_MESSAGE',
+  GROUP = 'GROUP',
+  STATUS = 'STATUS'
+}
 
-    return dispatch(openModal('REPORT'));
-  };
+type ReportedEntity = {
+  status?: Status
+  chatMessage?: ChatMessage
+  group?: Group
+}
 
-const initReportById = (accountId: string) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    dispatch({
-      type: REPORT_INIT,
-      account: getState().accounts.get(accountId),
-    });
+const initReport = (entityType: ReportableEntities, account: Account, entities?: ReportedEntity) => (dispatch: AppDispatch) => {
+  const { status, chatMessage, group } = entities || {};
 
-    dispatch(openModal('REPORT'));
-  };
+  dispatch({
+    type: REPORT_INIT,
+    entityType,
+    account,
+    status,
+    chatMessage,
+    group,
+  });
+
+  return dispatch(openModal('REPORT'));
+};
 
 const cancelReport = () => ({
   type: REPORT_CANCEL,
@@ -59,6 +66,8 @@ const submitReport = () =>
     return api(getState).post('/api/v1/reports', {
       account_id: reports.getIn(['new', 'account_id']),
       status_ids: reports.getIn(['new', 'status_ids']),
+      message_ids: [reports.getIn(['new', 'chat_message', 'id'])].filter(Boolean),
+      group_id: reports.getIn(['new', 'group', 'id']),
       rule_ids: reports.getIn(['new', 'rule_ids']),
       comment: reports.getIn(['new', 'comment']),
       forward: reports.getIn(['new', 'forward']),
@@ -99,6 +108,7 @@ const changeReportRule = (ruleId: string) => ({
 });
 
 export {
+  ReportableEntities,
   REPORT_INIT,
   REPORT_CANCEL,
   REPORT_SUBMIT_REQUEST,
@@ -110,7 +120,6 @@ export {
   REPORT_BLOCK_CHANGE,
   REPORT_RULE_CHANGE,
   initReport,
-  initReportById,
   cancelReport,
   toggleStatusReport,
   submitReport,

app/soapbox/actions/scheduled-statuses.ts

@@ -1,3 +1,5 @@
+import { getFeatures } from 'soapbox/utils/features';
+
 import api, { getLinks } from '../api';
 
 import type { AxiosError } from 'axios';
@@ -18,10 +20,17 @@ const SCHEDULED_STATUS_CANCEL_FAIL    = 'SCHEDULED_STATUS_CANCEL_FAIL';
 
 const fetchScheduledStatuses = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    if (getState().status_lists.get('scheduled_statuses')?.isLoading) {
+    const state = getState();
+
+    if (state.status_lists.get('scheduled_statuses')?.isLoading) {
       return;
     }
 
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (!features.scheduledStatuses) return;
+
     dispatch(fetchScheduledStatusesRequest());
 
     api(getState).get('/api/v1/scheduled_statuses').then(response => {

app/soapbox/actions/search.ts

@@ -1,7 +1,7 @@
 import api from '../api';
 
 import { fetchRelationships } from './accounts';
-import { importFetchedAccounts, importFetchedStatuses } from './importer';
+import { importFetchedAccounts, importFetchedGroups, importFetchedStatuses } from './importer';
 
 import type { AxiosError } from 'axios';
 import type { SearchFilter } from 'soapbox/reducers/search';
@@ -83,6 +83,10 @@ const submitSearch = (filter?: SearchFilter) =>
         dispatch(importFetchedStatuses(response.data.statuses));
       }
 
+      if (response.data.groups) {
+        dispatch(importFetchedGroups(response.data.groups));
+      }
+
       dispatch(fetchSearchSuccess(response.data, value, type));
       dispatch(fetchRelationships(response.data.accounts.map((item: APIEntity) => item.id)));
     }).catch(error => {
@@ -139,6 +143,10 @@ const expandSearch = (type: SearchFilter) => (dispatch: AppDispatch, getState: (
       dispatch(importFetchedStatuses(data.statuses));
     }
 
+    if (data.groups) {
+      dispatch(importFetchedGroups(data.groups));
+    }
+
     dispatch(expandSearchSuccess(data, value, type));
     dispatch(fetchRelationships(data.accounts.map((item: APIEntity) => item.id)));
   }).catch(error => {

app/soapbox/actions/security.ts

@@ -4,7 +4,7 @@
  * @see module:soapbox/actions/auth
  */
 
-import snackbar from 'soapbox/actions/snackbar';
+import toast from 'soapbox/toast';
 import { getLoggedInAccount } from 'soapbox/utils/auth';
 import { parseVersion, TRUTHSOCIAL } from 'soapbox/utils/features';
 import { normalizeUsername } from 'soapbox/utils/input';
@@ -50,7 +50,7 @@ const MOVE_ACCOUNT_FAIL    = 'MOVE_ACCOUNT_FAIL';
 const fetchOAuthTokens = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: FETCH_TOKENS_REQUEST });
-    return api(getState).get('/api/oauth_tokens.json').then(({ data: tokens }) => {
+    return api(getState).get('/api/oauth_tokens').then(({ data: tokens }) => {
       dispatch({ type: FETCH_TOKENS_SUCCESS, tokens });
     }).catch(() => {
       dispatch({ type: FETCH_TOKENS_FAIL });
@@ -152,7 +152,7 @@ const deleteAccount = (password: string) =>
       if (response.data.error) throw response.data.error; // This endpoint returns HTTP 200 even on failure
       dispatch({ type: DELETE_ACCOUNT_SUCCESS, response });
       dispatch({ type: AUTH_LOGGED_OUT, account });
-      dispatch(snackbar.success(messages.loggedOut));
+      toast.success(messages.loggedOut);
     }).catch(error => {
       dispatch({ type: DELETE_ACCOUNT_FAIL, error, skipAlert: true });
       throw error;

app/soapbox/actions/settings.ts

@@ -1,14 +1,13 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import { defineMessages } from 'react-intl';
+import { defineMessage } from 'react-intl';
 import { createSelector } from 'reselect';
 import { v4 as uuid } from 'uuid';
 
 import { patchMe } from 'soapbox/actions/me';
+import messages from 'soapbox/locales/messages';
+import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 
-import { showAlertForError } from './alerts';
-import snackbar from './snackbar';
-
 import type { AppDispatch, RootState } from 'soapbox/store';
 
 const SETTING_CHANGE = 'SETTING_CHANGE';
@@ -20,12 +19,10 @@ const FE_NAME = 'soapbox_fe';
 /** Options when changing/saving settings. */
 type SettingOpts = {
   /** Whether to display an alert when settings are saved. */
-  showAlert?: boolean,
+  showAlert?: boolean
 }
 
-const messages = defineMessages({
-  saveSuccess: { id: 'settings.save.success', defaultMessage: 'Your preferences have been saved!' },
-});
+const saveSuccessMessage = defineMessage({ id: 'settings.save.success', defaultMessage: 'Your preferences have been saved!' });
 
 const defaultSettings = ImmutableMap({
   onboarded: false,
@@ -42,14 +39,13 @@ const defaultSettings = ImmutableMap({
   defaultPrivacy: 'public',
   defaultContentType: 'text/plain',
   themeMode: 'system',
-  locale: navigator.language.split(/[-_]/)[0] || 'en',
+  locale: navigator.language || 'en',
   showExplanationBox: true,
   explanationBox: true,
   autoloadTimelines: true,
   autoloadMore: true,
 
   systemFont: false,
-  dyslexicFont: false,
   demetricator: false,
 
   isDeveloper: false,
@@ -159,6 +155,8 @@ const defaultSettings = ImmutableMap({
     }),
   }),
 
+  groups: ImmutableMap({}),
+
   trends: ImmutableMap({
     show: true,
   }),
@@ -222,16 +220,22 @@ const saveSettingsImmediate = (opts?: SettingOpts) =>
       dispatch({ type: SETTING_SAVE });
 
       if (opts?.showAlert) {
-        dispatch(snackbar.success(messages.saveSuccess));
+        toast.success(saveSuccessMessage);
       }
     }).catch(error => {
-      dispatch(showAlertForError(error));
+      toast.showAlertForError(error);
     });
   };
 
 const saveSettings = (opts?: SettingOpts) =>
   (dispatch: AppDispatch) => dispatch(saveSettingsImmediate(opts));
 
+const getLocale = (state: RootState, fallback = 'en') => {
+  const localeWithVariant = (getSettings(state).get('locale') as string).replace('_', '-');
+  const locale = localeWithVariant.split('-')[0];
+  return Object.keys(messages).includes(localeWithVariant) ? localeWithVariant : Object.keys(messages).includes(locale) ? locale : fallback;
+};
+
 export {
   SETTING_CHANGE,
   SETTING_SAVE,
@@ -243,4 +247,5 @@ export {
   changeSetting,
   saveSettingsImmediate,
   saveSettings,
+  getLocale,
 };

app/soapbox/actions/snackbar.ts

@@ -1,50 +0,0 @@
-import { ALERT_SHOW } from './alerts';
-
-import type { MessageDescriptor } from 'react-intl';
-
-export type SnackbarActionSeverity = 'info' | 'success' | 'error';
-
-type SnackbarMessage = string | MessageDescriptor;
-
-export type SnackbarAction = {
-  type: typeof ALERT_SHOW,
-  message: SnackbarMessage,
-  actionLabel?: SnackbarMessage,
-  actionLink?: string,
-  action?: () => void,
-  severity: SnackbarActionSeverity,
-};
-
-type SnackbarOpts = {
-  actionLabel?: SnackbarMessage,
-  actionLink?: string,
-  action?: () => void,
-  dismissAfter?: number | false,
-};
-
-export const show = (
-  severity: SnackbarActionSeverity,
-  message: SnackbarMessage,
-  opts?: SnackbarOpts,
-): SnackbarAction => ({
-  type: ALERT_SHOW,
-  message,
-  severity,
-  ...opts,
-});
-
-export const info = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>
-  show('info', message, { actionLabel, actionLink });
-
-export const success = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>
-  show('success', message, { actionLabel, actionLink });
-
-export const error = (message: SnackbarMessage, actionLabel?: SnackbarMessage, actionLink?: string) =>
-  show('error', message, { actionLabel, actionLink });
-
-export default {
-  info,
-  success,
-  error,
-  show,
-};

app/soapbox/actions/soapbox.ts

@@ -32,8 +32,8 @@ const getSoapboxConfig = createSelector([
     }
 
     // If RGI reacts aren't supported, strip VS16s
-    // // https://git.pleroma.social/pleroma/pleroma/-/issues/2355
-    if (!features.emojiReactsRGI) {
+    // https://git.pleroma.social/pleroma/pleroma/-/issues/2355
+    if (features.emojiReactsNonRGI) {
       soapboxConfig.set('allowedEmoji', soapboxConfig.allowedEmoji.map(removeVS16s));
     }
   });

app/soapbox/actions/statuses.ts

@@ -48,6 +48,8 @@ const STATUS_TRANSLATE_SUCCESS = 'STATUS_TRANSLATE_SUCCESS';
 const STATUS_TRANSLATE_FAIL    = 'STATUS_TRANSLATE_FAIL';
 const STATUS_TRANSLATE_UNDO    = 'STATUS_TRANSLATE_UNDO';
 
+const STATUS_UNFILTER = 'STATUS_UNFILTER';
+
 const statusExists = (getState: () => RootState, statusId: string) => {
   return (getState().statuses.get(statusId) || null) !== null;
 };
@@ -68,7 +70,7 @@ const createStatus = (params: Record<string, any>, idempotencyKey: string, statu
       }
 
       dispatch(importFetchedStatus(status, idempotencyKey));
-      dispatch({ type: STATUS_CREATE_SUCCESS, status, params, idempotencyKey });
+      dispatch({ type: STATUS_CREATE_SUCCESS, status, params, idempotencyKey, editing: !!statusId });
 
       // Poll the backend for the updated card
       if (status.expectsCard) {
@@ -335,6 +337,11 @@ const undoStatusTranslation = (id: string) => ({
   id,
 });
 
+const unfilterStatus = (id: string) => ({
+  type: STATUS_UNFILTER,
+  id,
+});
+
 export {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
@@ -363,6 +370,7 @@ export {
   STATUS_TRANSLATE_SUCCESS,
   STATUS_TRANSLATE_FAIL,
   STATUS_TRANSLATE_UNDO,
+  STATUS_UNFILTER,
   createStatus,
   editStatus,
   fetchStatus,
@@ -381,4 +389,5 @@ export {
   toggleStatusHidden,
   translateStatus,
   undoStatusTranslation,
+  unfilterStatus,
 };

app/soapbox/actions/streaming.ts

@@ -1,5 +1,10 @@
-import { getSettings } from 'soapbox/actions/settings';
+import { getLocale, getSettings } from 'soapbox/actions/settings';
 import messages from 'soapbox/locales/messages';
+import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
+import { queryClient } from 'soapbox/queries/client';
+import { getUnreadChatsCount, updateChatListItem, updateChatMessage } from 'soapbox/utils/chats';
+import { removePageItem } from 'soapbox/utils/queries';
+import { play, soundCache } from 'soapbox/utils/sounds';
 
 import { connectStream } from '../stream';
 
@@ -22,19 +27,13 @@ import {
   processTimelineUpdate,
 } from './timelines';
 
+import type { IStatContext } from 'soapbox/contexts/stat-context';
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { APIEntity } from 'soapbox/types/entities';
+import type { APIEntity, Chat } from 'soapbox/types/entities';
 
 const STREAMING_CHAT_UPDATE = 'STREAMING_CHAT_UPDATE';
 const STREAMING_FOLLOW_RELATIONSHIPS_UPDATE = 'STREAMING_FOLLOW_RELATIONSHIPS_UPDATE';
 
-const validLocale = (locale: string) => Object.keys(messages).includes(locale);
-
-const getLocale = (state: RootState) => {
-  const locale = getSettings(state).get('locale') as string;
-  return validLocale(locale) ? locale : 'en';
-};
-
 const updateFollowRelationships = (relationships: APIEntity) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const me = getState().me;
@@ -45,11 +44,45 @@ const updateFollowRelationships = (relationships: APIEntity) =>
     });
   };
 
+const removeChatMessage = (payload: string) => {
+  const data = JSON.parse(payload);
+  const chatId = data.chat_id;
+  const chatMessageId = data.deleted_message_id;
+
+  // If the user just deleted the "last_message", then let's invalidate
+  // the Chat Search query so the Chat List will show the new "last_message".
+  if (isLastMessage(chatMessageId)) {
+    queryClient.invalidateQueries(ChatKeys.chatSearch());
+  }
+
+  removePageItem(ChatKeys.chatMessages(chatId), chatMessageId, (o: any, n: any) => String(o.id) === String(n));
+};
+
+// Update the specific Chat query data.
+const updateChatQuery = (chat: IChat) => {
+  const cachedChat = queryClient.getQueryData<IChat>(ChatKeys.chat(chat.id));
+  if (!cachedChat) {
+    return;
+  }
+
+  const newChat = {
+    ...cachedChat,
+    latest_read_message_by_account: chat.latest_read_message_by_account,
+    latest_read_message_created_at: chat.latest_read_message_created_at,
+  };
+  queryClient.setQueryData<Chat>(ChatKeys.chat(chat.id), newChat as any);
+};
+
+interface StreamOpts {
+  statContext?: IStatContext
+}
+
 const connectTimelineStream = (
   timelineId: string,
   path: string,
   pollingRefresh: ((dispatch: AppDispatch, done?: () => void) => void) | null = null,
   accept: ((status: APIEntity) => boolean) | null = null,
+  opts?: StreamOpts,
 ) => connectStream(path, pollingRefresh, (dispatch: AppDispatch, getState: () => RootState) => {
   const locale = getLocale(getState());
 
@@ -78,7 +111,14 @@ const connectTimelineStream = (
         //   break;
         case 'notification':
           messages[locale]().then(messages => {
-            dispatch(updateNotificationsQueue(JSON.parse(data.payload), messages, locale, window.location.pathname));
+            dispatch(
+              updateNotificationsQueue(
+                JSON.parse(data.payload),
+                messages,
+                locale,
+                window.location.pathname,
+              ),
+            );
           }).catch(error => {
             console.error(error);
           });
@@ -90,20 +130,42 @@ const connectTimelineStream = (
           dispatch(fetchFilters());
           break;
         case 'pleroma:chat_update':
-          dispatch((dispatch: AppDispatch, getState: () => RootState) => {
+        case 'chat_message.created': // TruthSocial
+          dispatch((_dispatch: AppDispatch, getState: () => RootState) => {
             const chat = JSON.parse(data.payload);
             const me = getState().me;
-            const messageOwned = !(chat.last_message && chat.last_message.account_id !== me);
+            const messageOwned = chat.last_message?.account_id === me;
+            const settings = getSettings(getState());
 
-            dispatch({
-              type: STREAMING_CHAT_UPDATE,
-              chat,
-              me,
-              // Only play sounds for recipient messages
-              meta: !messageOwned && getSettings(getState()).getIn(['chats', 'sound']) && { sound: 'chat' },
-            });
+            // Don't update own messages from streaming
+            if (!messageOwned) {
+              updateChatListItem(chat);
+
+              if (settings.getIn(['chats', 'sound'])) {
+                play(soundCache.chat);
+              }
+
+              // Increment unread counter
+              opts?.statContext?.setUnreadChatsCount(getUnreadChatsCount());
+            }
           });
           break;
+        case 'chat_message.deleted': // TruthSocial
+          removeChatMessage(data.payload);
+          break;
+        case 'chat_message.read': // TruthSocial
+          dispatch((_dispatch: AppDispatch, getState: () => RootState) => {
+            const chat = JSON.parse(data.payload);
+            const me = getState().me;
+            const isFromOtherUser = chat.account.id !== me;
+            if (isFromOtherUser) {
+              updateChatQuery(JSON.parse(data.payload));
+            }
+          });
+          break;
+        case 'chat_message.reaction': // TruthSocial
+          updateChatMessage(JSON.parse(data.payload));
+          break;
         case 'pleroma:follow_relationships_update':
           dispatch(updateFollowRelationships(JSON.parse(data.payload)));
           break;
@@ -129,8 +191,8 @@ const refreshHomeTimelineAndNotification = (dispatch: AppDispatch, done?: () =>
     dispatch(expandNotifications({}, () =>
       dispatch(fetchAnnouncements(done))))));
 
-const connectUserStream      = () =>
-  connectTimelineStream('home', 'user', refreshHomeTimelineAndNotification);
+const connectUserStream      = (opts?: StreamOpts) =>
+  connectTimelineStream('home', 'user', refreshHomeTimelineAndNotification, null, opts);
 
 const connectCommunityStream = ({ onlyMedia }: Record<string, any> = {}) =>
   connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`);

app/soapbox/actions/timelines.ts

@@ -219,6 +219,9 @@ const expandListTimeline = (id: string, { maxId }: Record<string, any> = {}, don
 const expandGroupTimeline = (id: string, { maxId }: Record<string, any> = {}, done = noOp) =>
   expandTimeline(`group:${id}`, `/api/v1/timelines/group/${id}`, { max_id: maxId }, done);
 
+const expandGroupMediaTimeline = (id: string | number, { maxId }: Record<string, any> = {}) =>
+  expandTimeline(`group:${id}:media`, `/api/v1/timelines/group/${id}`, { max_id: maxId, only_media: true, limit: 40, with_muted: true });
+
 const expandHashtagTimeline = (hashtag: string, { maxId, tags }: Record<string, any> = {}, done = noOp) => {
   return expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`, {
     max_id: maxId,
@@ -309,6 +312,7 @@ export {
   expandAccountMediaTimeline,
   expandListTimeline,
   expandGroupTimeline,
+  expandGroupMediaTimeline,
   expandHashtagTimeline,
   expandTimelineRequest,
   expandTimelineSuccess,

app/soapbox/actions/trending-statuses.ts

@@ -17,6 +17,8 @@ const fetchTrendingStatuses = () =>
     const instance = state.instance;
     const features = getFeatures(instance);
 
+    if (!features.trendingStatuses && !features.trendingTruths) return;
+
     dispatch({ type: TRENDING_STATUSES_FETCH_REQUEST });
     return api(getState).get(features.trendingTruths ? '/api/v1/truth/trending/truths' : '/api/v1/trends/statuses').then(({ data: statuses }) => {
       dispatch(importFetchedStatuses(statuses));

app/soapbox/actions/verification.ts

@@ -31,14 +31,15 @@ const AGE: Challenge = 'age';
 export type Challenge = 'age' | 'sms' | 'email'
 
 type Challenges = {
-  email?: 0 | 1,
-  sms?: number,
-  age?: number,
+  email?: 0 | 1
+  sms?: 0 | 1
+  age?: 0 | 1
 }
 
 type Verification = {
-  token?: string,
-  challenges?: Challenges,
+  token?: string
+  challenges?: Challenges
+  challengeTypes?: Array<'age' | 'sms' | 'email'>
 };
 
 /**
@@ -83,6 +84,18 @@ const fetchStoredChallenges = () => {
   }
 };
 
+/**
+ * Fetch and return the state of the verification challenge types.
+ */
+const fetchStoredChallengeTypes = () => {
+  try {
+    const verification: Verification | null = fetchStoredVerification();
+    return verification!.challengeTypes;
+  } catch {
+    return null;
+  }
+};
+
 /**
  * Update the verification object in local storage.
  *
@@ -131,7 +144,10 @@ function saveChallenges(challenges: Array<'age' | 'sms' | 'email'>) {
     }
   }
 
-  updateStorage({ challenges: currentChallenges });
+  updateStorage({
+    challenges: currentChallenges,
+    challengeTypes: challenges,
+  });
 }
 
 /**
@@ -267,13 +283,29 @@ const confirmEmailVerification = (emailToken: string) =>
     return api(getState).post('/api/v1/pepe/verify_email/confirm', { token: emailToken }, {
       headers: { Authorization: `Bearer ${token}` },
     })
-      .then(() => {
-        finishChallenge(EMAIL);
-        dispatchNextChallenge(dispatch);
+      .then((response) => {
+        updateStorageFromEmailConfirmation(dispatch, response.data.token);
       })
       .finally(() => dispatch({ type: SET_LOADING, value: false }));
   };
 
+const updateStorageFromEmailConfirmation = (dispatch: AppDispatch, token: string) => {
+  const challengeTypes = fetchStoredChallengeTypes();
+  if (!challengeTypes) {
+    return;
+  }
+
+  const indexOfEmail = challengeTypes.indexOf('email');
+  const challenges: Challenges = {};
+  challengeTypes?.forEach((challengeType, idx) => {
+    const value = idx <= indexOfEmail ? 1 : 0;
+    challenges[challengeType] = value;
+  });
+
+  updateStorage({ token, challengeTypes, challenges });
+  dispatchNextChallenge(dispatch);
+};
+
 const postEmailVerification = () =>
   (dispatch: AppDispatch) => {
     finishChallenge(EMAIL);

app/soapbox/api/__mocks__/index.ts

@@ -21,6 +21,16 @@ export const getLinks = (response: AxiosResponse): LinkHeader => {
   return new LinkHeader(response.headers?.link);
 };
 
+export const getNextLink = (response: AxiosResponse) => {
+  const nextLink = new LinkHeader(response.headers?.link);
+  return nextLink.refs.find(link => link.rel === 'next')?.uri;
+};
+
+export const getPrevLink = (response: AxiosResponse) => {
+  const prevLink = new LinkHeader(response.headers?.link);
+  return prevLink.refs.find(link => link.rel === 'prev')?.uri;
+};
+
 export const baseClient = (...params: any[]) => {
   const axios = api.baseClient(...params);
   setupMock(axios);

app/soapbox/api/index.ts

@@ -29,6 +29,10 @@ export const getNextLink = (response: AxiosResponse): string | undefined => {
   return getLinks(response).refs.find(link => link.rel === 'next')?.uri;
 };
 
+export const getPrevLink = (response: AxiosResponse): string | undefined => {
+  return getLinks(response).refs.find(link => link.rel === 'prev')?.uri;
+};
+
 const getToken = (state: RootState, authType: string) => {
   return authType === 'app' ? getAppToken(state) : getAccessToken(state);
 };
@@ -43,7 +47,7 @@ const maybeParseJSON = (data: string) => {
 
 const getAuthBaseURL = createSelector([
   (state: RootState, me: string | false | null) => state.accounts.getIn([me, 'url']),
-  (state: RootState, _me: string | false | null) => state.auth.get('me'),
+  (state: RootState, _me: string | false | null) => state.auth.me,
 ], (accountUrl, authUserUrl) => {
   const baseURL = parseBaseURL(accountUrl) || parseBaseURL(authUserUrl);
   return baseURL !== window.location.origin ? baseURL : '';
@@ -62,7 +66,6 @@ export const baseClient = (accessToken?: string | null, baseURL: string = ''): A
     headers: Object.assign(accessToken ? {
       'Authorization': `Bearer ${accessToken}`,
     } : {}),
-
     transformResponse: [maybeParseJSON],
   });
 };

app/soapbox/base-polyfills.ts

@@ -1,50 +0,0 @@
-'use strict';
-
-import 'intl';
-import 'intl/locale-data/jsonp/en';
-import 'es6-symbol/implement';
-// @ts-ignore: No types
-import includes from 'array-includes';
-// @ts-ignore: No types
-import isNaN from 'is-nan';
-import assign from 'object-assign';
-// @ts-ignore: No types
-import values from 'object.values';
-
-import { decode as decodeBase64 } from './utils/base64';
-
-if (!Array.prototype.includes) {
-  includes.shim();
-}
-
-if (!Object.assign) {
-  Object.assign = assign;
-}
-
-if (!Object.values) {
-  values.shim();
-}
-
-if (!Number.isNaN) {
-  Number.isNaN = isNaN;
-}
-
-if (!HTMLCanvasElement.prototype.toBlob) {
-  const BASE64_MARKER = ';base64,';
-
-  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-    value(callback: any, type = 'image/png', quality: any) {
-      const dataURL = this.toDataURL(type, quality);
-      let data;
-
-      if (dataURL.includes(BASE64_MARKER)) {
-        const [, base64] = dataURL.split(BASE64_MARKER);
-        data = decodeBase64(base64);
-      } else {
-        [, data] = dataURL.split(',');
-      }
-
-      callback(new Blob([data], { type }));
-    },
-  });
-}

app/soapbox/components/__mocks__/react-inlinesvg.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 interface IInlineSVG {
-  loader?: JSX.Element,
+  loader?: JSX.Element
 }
 
 const InlineSVG: React.FC<IInlineSVG> = ({ loader }): JSX.Element => {

app/soapbox/components/__tests__/avatar-overlay.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { normalizeAccount } from 'soapbox/normalizers';
-
-import { render, screen } from '../../jest/test-helpers';
-import AvatarOverlay from '../avatar-overlay';
-
-import type { ReducerAccount } from 'soapbox/reducers/accounts';
-
-describe('<AvatarOverlay', () => {
-  const account = normalizeAccount({
-    username: 'alice',
-    acct: 'alice',
-    display_name: 'Alice',
-    avatar: '/animated/alice.gif',
-    avatar_static: '/static/alice.jpg',
-  }) as ReducerAccount;
-
-  const friend = normalizeAccount({
-    username: 'eve',
-    acct: 'eve@blackhat.lair',
-    display_name: 'Evelyn',
-    avatar: '/animated/eve.gif',
-    avatar_static: '/static/eve.jpg',
-  }) as ReducerAccount;
-
-  it('renders a overlay avatar', () => {
-    render(<AvatarOverlay account={account} friend={friend} />);
-    expect(screen.queryAllByRole('img')).toHaveLength(2);
-  });
-});

app/soapbox/components/__tests__/avatar.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { normalizeAccount } from 'soapbox/normalizers';
-
-import { render, screen } from '../../jest/test-helpers';
-import Avatar from '../avatar';
-
-import type { ReducerAccount } from 'soapbox/reducers/accounts';
-
-describe('<Avatar />', () => {
-  const account = normalizeAccount({
-    username: 'alice',
-    acct: 'alice',
-    display_name: 'Alice',
-    avatar: '/animated/alice.gif',
-    avatar_static: '/static/alice.jpg',
-  }) as ReducerAccount;
-
-  const size = 100;
-
-  // describe('Autoplay', () => {
-  //   it('renders an animated avatar', () => {
-  //     render(<Avatar account={account} animate size={size} />);
-
-  //     expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar'));
-  //   });
-  // });
-
-  describe('Still', () => {
-    it('renders a still avatar', () => {
-      render(<Avatar account={account} size={size} />);
-
-      expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar'));
-    });
-  });
-
-  // TODO add autoplay test if possible
-});

app/soapbox/components/__tests__/emoji-selector.test.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '../../jest/test-helpers';
-import EmojiSelector from '../emoji-selector';
-
-describe('<EmojiSelector />', () => {
-  it('renders correctly', () => {
-    const children = <EmojiSelector />;
-    // @ts-ignore
-    children.__proto__.addEventListener = () => {};
-
-    render(children);
-
-    expect(screen.queryAllByRole('button')).toHaveLength(6);
-  });
-});

app/soapbox/components/account-search.tsx

@@ -1,9 +1,10 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
-import Icon from 'soapbox/components/icon';
+
+import SvgIcon from './ui/icon/svg-icon';
 
 const messages = defineMessages({
   placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
@@ -11,11 +12,9 @@ const messages = defineMessages({
 
 interface IAccountSearch {
   /** Callback when a searched account is chosen. */
-  onSelected: (accountId: string) => void,
+  onSelected: (accountId: string) => void
   /** Override the default placeholder of the input. */
-  placeholder?: string,
-  /** Position of results relative to the input. */
-  resultsPosition?: 'above' | 'below',
+  placeholder?: string
 }
 
 /** Input to search for accounts. */
@@ -56,9 +55,10 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
   };
 
   return (
-    <div className='search search--account'>
-      <label>
-        <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
+    <div className='w-full'>
+      <label className='sr-only'>{intl.formatMessage(messages.placeholder)}</label>
+
+      <div className='relative'>
         <AutosuggestAccountInput
           className='rounded-full'
           placeholder={intl.formatMessage(messages.placeholder)}
@@ -68,10 +68,24 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
           onKeyDown={handleKeyDown}
           {...rest}
         />
-      </label>
-      <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+
+        <div
+          role='button'
+          tabIndex={0}
+          className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3'
+          onClick={handleClear}
+        >
+          <SvgIcon
+            src={require('@tabler/icons/search.svg')}
+            className={clsx('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
+          />
+
+          <SvgIcon
+            src={require('@tabler/icons/x.svg')}
+            className={clsx('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
+            aria-label={intl.formatMessage(messages.placeholder)}
+          />
+        </div>
       </div>
     </div>
   );

app/soapbox/components/account.tsx

@@ -1,28 +1,39 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import ActionButton from 'soapbox/features/ui/components/action-button';
-import { useAppSelector, useOnScreen } from 'soapbox/hooks';
+import { useAppSelector } from 'soapbox/hooks';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
+import Badge from './badge';
 import RelativeTimestamp from './relative-timestamp';
 import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
+import type { StatusApprovalStatus } from 'soapbox/normalizers/status';
+import type { Account as AccountSchema } from 'soapbox/schemas';
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 interface IInstanceFavicon {
-  account: AccountEntity,
+  account: AccountEntity | AccountSchema
+  disabled?: boolean
 }
 
-const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
+const messages = defineMessages({
+  bot: { id: 'account.badges.bot', defaultMessage: 'Bot' },
+});
+
+const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
   const history = useHistory();
 
   const handleClick: React.MouseEventHandler = (e) => {
     e.stopPropagation();
 
+    if (disabled) return;
+
     const timelineUrl = `/timeline/${account.domain}`;
     if (!(e.ctrlKey || e.metaKey)) {
       history.push(timelineUrl);
@@ -32,44 +43,56 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
   };
 
   return (
-    <button className='w-4 h-4 flex-none focus:ring-primary-500 focus:ring-2 focus:ring-offset-2' onClick={handleClick}>
-      <img src={account.favicon} alt='' title={account.domain} className='w-full max-h-full' />
+    <button
+      className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
+      onClick={handleClick}
+      disabled={disabled}
+    >
+      <img src={account.favicon} alt='' title={account.domain} className='max-h-full w-full' />
     </button>
   );
 };
 
 interface IProfilePopper {
-  condition: boolean,
-  wrapper: (children: any) => React.ReactElement<any, any>
+  condition: boolean
+  wrapper: (children: React.ReactNode) => React.ReactNode
+  children: React.ReactNode
 }
 
-const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children }): any =>
-  condition ? wrapper(children) : children;
+const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children }) => {
+  return (
+    <>
+      {condition ? wrapper(children) : children}
+    </>
+  );
+};
 
-interface IAccount {
-  account: AccountEntity,
-  action?: React.ReactElement,
-  actionAlignment?: 'center' | 'top',
-  actionIcon?: string,
-  actionTitle?: string,
+export interface IAccount {
+  account: AccountEntity | AccountSchema
+  action?: React.ReactElement
+  actionAlignment?: 'center' | 'top'
+  actionIcon?: string
+  actionTitle?: string
   /** Override other actions for specificity like mute/unmute.  */
-  actionType?: 'muting' | 'blocking' | 'follow_request',
-  avatarSize?: number,
-  hidden?: boolean,
-  hideActions?: boolean,
-  id?: string,
-  onActionClick?: (account: any) => void,
-  showProfileHoverCard?: boolean,
-  timestamp?: string,
-  timestampUrl?: string,
-  futureTimestamp?: boolean,
-  withAccountNote?: boolean,
-  withDate?: boolean,
-  withLinkToProfile?: boolean,
-  withRelationship?: boolean,
-  showEdit?: boolean,
-  emoji?: string,
-  note?: string,
+  actionType?: 'muting' | 'blocking' | 'follow_request'
+  avatarSize?: number
+  hidden?: boolean
+  hideActions?: boolean
+  id?: string
+  onActionClick?: (account: any) => void
+  showProfileHoverCard?: boolean
+  timestamp?: string
+  timestampUrl?: string
+  futureTimestamp?: boolean
+  withAccountNote?: boolean
+  withDate?: boolean
+  withLinkToProfile?: boolean
+  withRelationship?: boolean
+  showEdit?: boolean
+  approvalStatus?: StatusApprovalStatus
+  emoji?: string
+  emojiUrl?: string
+  note?: string
 }
 
 const Account = ({
@@ -92,22 +115,19 @@ const Account = ({
   withLinkToProfile = true,
   withRelationship = true,
   showEdit = false,
+  approvalStatus,
   emoji,
+  emojiUrl,
   note,
 }: IAccount) => {
-  const overflowRef = React.useRef<HTMLDivElement>(null);
-  const actionRef = React.useRef<HTMLDivElement>(null);
-  // @ts-ignore
-  const isOnScreen = useOnScreen(overflowRef);
-
-  const [style, setStyle] = React.useState<React.CSSProperties>({ visibility: 'hidden' });
+  const overflowRef = useRef<HTMLDivElement>(null);
+  const actionRef = useRef<HTMLDivElement>(null);
 
   const me = useAppSelector((state) => state.me);
   const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null);
 
   const handleAction = () => {
-    // @ts-ignore
-    onActionClick(account);
+    onActionClick!(account);
   };
 
   const renderAction = () => {
@@ -125,8 +145,8 @@ const Account = ({
           src={actionIcon}
           title={actionTitle}
           onClick={handleAction}
-          className='bg-transparent text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
-          iconClassName='w-4 h-4'
+          className='bg-transparent text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500'
+          iconClassName='h-4 w-4'
         />
       );
     }
@@ -138,18 +158,7 @@ const Account = ({
     return null;
   };
 
-  React.useEffect(() => {
-    const style: React.CSSProperties = {};
-    const actionWidth = actionRef.current?.clientWidth || 0;
-
-    if (overflowRef.current) {
-      style.maxWidth = overflowRef.current.clientWidth - 30 - avatarSize - actionWidth;
-    } else {
-      style.visibility = 'hidden';
-    }
-
-    setStyle(style);
-  }, [isOnScreen, overflowRef, actionRef]);
+  const intl = useIntl();
 
   if (!account) {
     return null;
@@ -169,9 +178,9 @@ const Account = ({
   const LinkEl: any = withLinkToProfile ? Link : 'div';
 
   return (
-    <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
+    <div data-testid='account' className='group block w-full shrink-0' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
-        <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3}>
+        <HStack alignItems={withAccountNote || note ? 'top' : 'center'} space={3} className='overflow-hidden'>
           <ProfilePopper
             condition={showProfileHoverCard}
             wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -184,14 +193,15 @@ const Account = ({
               <Avatar src={account.avatar} size={avatarSize} />
               {emoji && (
                 <Emoji
-                  className='w-5 h-5 absolute -bottom-1.5 -right-1.5'
+                  className='absolute bottom-0 -right-1.5 h-5 w-5'
                   emoji={emoji}
+                  src={emojiUrl}
                 />
               )}
             </LinkEl>
           </ProfilePopper>
 
-          <div className='flex-grow'>
+          <div className='grow overflow-hidden'>
             <ProfilePopper
               condition={showProfileHoverCard}
               wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -201,7 +211,7 @@ const Account = ({
                 title={account.acct}
                 onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
-                <HStack space={1} alignItems='center' grow style={style}>
+                <HStack space={1} alignItems='center' grow>
                   <Text
                     size='sm'
                     weight='semibold'
@@ -210,16 +220,18 @@ const Account = ({
                   />
 
                   {account.verified && <VerificationBadge />}
+
+                  {account.bot && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
                 </HStack>
               </LinkEl>
             </ProfilePopper>
 
             <Stack space={withAccountNote || note ? 1 : 0}>
-              <HStack alignItems='center' space={1} style={style}>
-                <Text theme='muted' size='sm' truncate>@{username}</Text>
+              <HStack alignItems='center' space={1}>
+                <Text theme='muted' size='sm' direction='ltr' truncate>@{username}</Text>
 
                 {account.favicon && (
-                  <InstanceFavicon account={account} />
+                  <InstanceFavicon account={account} disabled={!withLinkToProfile} />
                 )}
 
                 {(timestamp) ? (
@@ -236,6 +248,18 @@ const Account = ({
                   </>
                 ) : null}
 
+                {approvalStatus && ['pending', 'rejected'].includes(approvalStatus) && (
+                  <>
+                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+
+                    <Text tag='span' theme='muted' size='sm'>
+                      {approvalStatus === 'pending'
+                        ? <FormattedMessage id='status.approval.pending' defaultMessage='Pending approval' />
+                        : <FormattedMessage id='status.approval.rejected' defaultMessage='Rejected' />}
+                    </Text>
+                  </>
+                )}
+
                 {showEdit ? (
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text>

app/soapbox/components/animated-number.tsx

@@ -15,8 +15,8 @@ const obfuscatedCount = (count: number) => {
 };
 
 interface IAnimatedNumber {
-  value: number;
-  obfuscate?: boolean;
+  value: number
+  obfuscate?: boolean
 }
 
 const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {
@@ -50,7 +50,7 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {
   return (
     <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
       {items => (
-        <span className='inline-flex flex-col items-stretch relative overflow-hidden'>
+        <span className='relative inline-flex flex-col items-stretch overflow-hidden'>
           {items.map(({ key, data, style }) => (
             <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <FormattedNumber value={data} />}</span>
           ))}

app/soapbox/components/announcements/announcement-content.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import type { Announcement as AnnouncementEntity, Mention as MentionEntity } from 'soapbox/types/entities';
 
 interface IAnnouncementContent {
-  announcement: AnnouncementEntity;
+  announcement: AnnouncementEntity
 }
 
 const AnnouncementContent: React.FC<IAnnouncementContent> = ({ announcement }) => {

app/soapbox/components/announcements/announcement.tsx

@@ -11,10 +11,10 @@ import type { Map as ImmutableMap } from 'immutable';
 import type { Announcement as AnnouncementEntity } from 'soapbox/types/entities';
 
 interface IAnnouncement {
-  announcement: AnnouncementEntity;
-  addReaction: (id: string, name: string) => void;
-  removeReaction: (id: string, name: string) => void;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
+  announcement: AnnouncementEntity
+  addReaction: (id: string, name: string) => void
+  removeReaction: (id: string, name: string) => void
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
 }
 
 const Announcement: React.FC<IAnnouncement> = ({ announcement, addReaction, removeReaction, emojiMap }) => {

app/soapbox/components/announcements/announcements-panel.tsx

@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -52,7 +52,7 @@ const AnnouncementsPanel = () => {
                 key={i}
                 tabIndex={0}
                 onClick={() => setIndex(i)}
-                className={classNames({
+                className={clsx({
                   'w-2 h-2 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
                   'bg-gray-200 hover:bg-gray-300': i !== index,
                   'bg-primary-600': i === index,

app/soapbox/components/announcements/emoji.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { useSettings } from 'soapbox/hooks';
 import { joinPublicPath } from 'soapbox/utils/static';
 
 import type { Map as ImmutableMap } from 'immutable';
 
 interface IEmoji {
-  emoji: string;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
-  hovered: boolean;
+  emoji: string
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
+  hovered: boolean
 }
 
 const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
@@ -24,7 +24,7 @@ const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
     return (
       <img
         draggable='false'
-        className='emojione block m-0'
+        className='emojione m-0 block'
         alt={emoji}
         title={title}
         src={joinPublicPath(`packs/emoji/${filename}.svg`)}
@@ -37,7 +37,7 @@ const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
     return (
       <img
         draggable='false'
-        className='emojione block m-0'
+        className='emojione m-0 block'
         alt={shortCode}
         title={shortCode}
         src={filename as string}

app/soapbox/components/announcements/reaction.tsx

@@ -1,8 +1,8 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import AnimatedNumber from 'soapbox/components/animated-number';
-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 
 import Emoji from './emoji';
 
@@ -10,12 +10,12 @@ import type { Map as ImmutableMap } from 'immutable';
 import type { AnnouncementReaction } from 'soapbox/types/entities';
 
 interface IReaction {
-  announcementId: string;
-  reaction: AnnouncementReaction;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
-  addReaction: (id: string, name: string) => void;
-  removeReaction: (id: string, name: string) => void;
-  style: React.CSSProperties;
+  announcementId: string
+  reaction: AnnouncementReaction
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
+  addReaction: (id: string, name: string) => void
+  removeReaction: (id: string, name: string) => void
+  style: React.CSSProperties
 }
 
 const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction, removeReaction, emojiMap, style }) => {
@@ -43,7 +43,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
 
   return (
     <button
-      className={classNames('flex shrink-0 items-center gap-1.5 bg-gray-100 dark:bg-primary-900 rounded-sm px-1.5 py-1 transition-colors', {
+      className={clsx('flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors dark:bg-primary-900', {
         'bg-gray-200 dark:bg-primary-800': hovered,
         'bg-primary-200 dark:bg-primary-500': reaction.me,
       })}

app/soapbox/components/announcements/reactions-bar.tsx

@@ -1,30 +1,29 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
-import { Icon } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
 import { useSettings } from 'soapbox/hooks';
 
 import Reaction from './reaction';
 
 import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
 import type { AnnouncementReaction } from 'soapbox/types/entities';
 
 interface IReactionsBar {
-  announcementId: string;
-  reactions: ImmutableList<AnnouncementReaction>;
-  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>;
-  addReaction: (id: string, name: string) => void;
-  removeReaction: (id: string, name: string) => void;
+  announcementId: string
+  reactions: ImmutableList<AnnouncementReaction>
+  emojiMap: ImmutableMap<string, ImmutableMap<string, string>>
+  addReaction: (id: string, name: string) => void
+  removeReaction: (id: string, name: string) => void
 }
 
 const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addReaction, removeReaction, emojiMap }) => {
   const reduceMotion = useSettings().get('reduceMotion');
 
   const handleEmojiPick = (data: Emoji) => {
-    addReaction(announcementId, data.native.replace(/:/g, ''));
+    addReaction(announcementId, (data as NativeEmoji).native.replace(/:/g, ''));
   };
 
   const willEnter = () => ({ scale: reduceMotion ? 1 : 0 });
@@ -42,7 +41,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
   return (
     <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
       {items => (
-        <div className={classNames('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
+        <div className={clsx('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
           {items.map(({ key, data, style }) => (
             <Reaction
               key={key}
@@ -55,7 +54,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
             />
           ))}
 
-          {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} button={<Icon className='h-4 w-4 text-gray-400 hover:text-gray-600 dark:hover:text-white' src={require('@tabler/icons/plus.svg')} />} />}
+          {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />}
         </div>
       )}
     </TransitionMotion>

app/soapbox/components/authorize-reject-buttons.tsx

@@ -0,0 +1,139 @@
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { HStack, IconButton, Text } from 'soapbox/components/ui';
+
+interface IAuthorizeRejectButtons {
+  onAuthorize(): Promise<unknown> | unknown
+  onReject(): Promise<unknown> | unknown
+  countdown?: number
+}
+
+/** Buttons to approve or reject a pending item, usually an account. */
+const AuthorizeRejectButtons: React.FC<IAuthorizeRejectButtons> = ({ onAuthorize, onReject, countdown }) => {
+  const [state, setState] = useState<'authorizing' | 'rejecting' | 'authorized' | 'rejected' | 'pending'>('pending');
+  const timeout = useRef<NodeJS.Timeout>();
+
+  function handleAction(
+    present: 'authorizing' | 'rejecting',
+    past: 'authorized' | 'rejected',
+    action: () => Promise<unknown> | unknown,
+  ): void {
+    if (state === present) {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+      setState('pending');
+    } else {
+      const doAction = async () => {
+        try {
+          await action();
+          setState(past);
+        } catch (e) {
+          console.error(e);
+        }
+      };
+      if (typeof countdown === 'number') {
+        setState(present);
+        timeout.current = setTimeout(doAction, countdown);
+      } else {
+        doAction();
+      }
+    }
+  }
+
+  const handleAuthorize = async () => handleAction('authorizing', 'authorized', onAuthorize);
+  const handleReject = async () => handleAction('rejecting', 'rejected', onReject);
+
+  useEffect(() => {
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, []);
+
+  switch (state) {
+    case 'authorized':
+      return (
+        <ActionEmblem text={<FormattedMessage id='authorize.success' defaultMessage='Approved' />} />
+      );
+    case 'rejected':
+      return (
+        <ActionEmblem text={<FormattedMessage id='reject.success' defaultMessage='Rejected' />} />
+      );
+    default:
+      return (
+        <HStack space={3} alignItems='center'>
+          <AuthorizeRejectButton
+            theme='danger'
+            icon={require('@tabler/icons/x.svg')}
+            action={handleReject}
+            isLoading={state === 'rejecting'}
+            disabled={state === 'authorizing'}
+          />
+          <AuthorizeRejectButton
+            theme='primary'
+            icon={require('@tabler/icons/check.svg')}
+            action={handleAuthorize}
+            isLoading={state === 'authorizing'}
+            disabled={state === 'rejecting'}
+          />
+        </HStack>
+      );
+  }
+};
+
+interface IActionEmblem {
+  text: React.ReactNode
+}
+
+const ActionEmblem: React.FC<IActionEmblem> = ({ text }) => {
+  return (
+    <div className='rounded-full bg-gray-100 px-4 py-2 dark:bg-gray-800'>
+      <Text theme='muted' size='sm'>
+        {text}
+      </Text>
+    </div>
+  );
+};
+
+interface IAuthorizeRejectButton {
+  theme: 'primary' | 'danger'
+  icon: string
+  action(): void
+  isLoading?: boolean
+  disabled?: boolean
+}
+
+const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon, action, isLoading, disabled }) => {
+  return (
+    <div className='relative'>
+      <IconButton
+        src={isLoading ? require('@tabler/icons/player-stop-filled.svg') : icon}
+        onClick={action}
+        theme='seamless'
+        className={clsx('h-10 w-10 items-center justify-center border-2', {
+          'border-primary-500/10 hover:border-primary-500': theme === 'primary',
+          'border-danger-600/10 hover:border-danger-600': theme === 'danger',
+        })}
+        iconClassName={clsx('h-6 w-6', {
+          'text-primary-500': theme === 'primary',
+          'text-danger-600': theme === 'danger',
+        })}
+        disabled={disabled}
+      />
+      {(isLoading) && (
+        <div
+          className={clsx('pointer-events-none absolute inset-0 h-10 w-10 animate-spin rounded-full border-2 border-transparent', {
+            'border-t-primary-500': theme === 'primary',
+            'border-t-danger-600': theme === 'danger',
+          })}
+        />
+      )}
+    </div>
+  );
+};
+
+export { AuthorizeRejectButtons };

app/soapbox/components/autosuggest-account-input.tsx

@@ -12,15 +12,16 @@ import type { InputThemes } from 'soapbox/components/ui/input/input';
 const noOp = () => { };
 
 interface IAutosuggestAccountInput {
-  onChange: React.ChangeEventHandler<HTMLInputElement>,
-  onSelected: (accountId: string) => void,
-  value: string,
-  limit?: number,
-  className?: string,
-  autoSelect?: boolean,
-  menu?: Menu,
-  onKeyDown?: React.KeyboardEventHandler,
-  theme?: InputThemes,
+  onChange: React.ChangeEventHandler<HTMLInputElement>
+  onSelected: (accountId: string) => void
+  autoFocus?: boolean
+  value: string
+  limit?: number
+  className?: string
+  autoSelect?: boolean
+  menu?: Menu
+  onKeyDown?: React.KeyboardEventHandler
+  theme?: InputThemes
 }
 
 const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
@@ -43,7 +44,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
     setAccountIds(ImmutableOrderedSet());
   };
 
-  const handleAccountSearch = useCallback(throttle(q => {
+  const handleAccountSearch = useCallback(throttle((q) => {
     const params = { q, limit, resolve: false };
 
     dispatch(accountSearch(params, controller.current.signal))
@@ -52,7 +53,6 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
         setAccountIds(ImmutableOrderedSet(accountIds));
       })
       .catch(noOp);
-
   }, 900, { leading: true, trailing: true }), [limit]);
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
@@ -67,6 +67,12 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
     }
   };
 
+  useEffect(() => {
+    if (rest.autoFocus) {
+      handleAccountSearch('');
+    }
+  }, []);
+
   useEffect(() => {
     if (value === '') {
       clearResults();

app/soapbox/components/autosuggest-emoji.tsx

@@ -1,38 +1,30 @@
 import React from 'react';
 
-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import { isCustomEmoji } from 'soapbox/features/emoji';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { joinPublicPath } from 'soapbox/utils/static';
 
-export type Emoji = {
-  id: string,
-  custom: boolean,
-  imageUrl: string,
-  native: string,
-  colons: string,
-}
-
-type UnicodeMapping = {
-  filename: string,
-}
+import type { Emoji } from 'soapbox/features/emoji';
 
 interface IAutosuggestEmoji {
-  emoji: Emoji,
+  emoji: Emoji
 }
 
 const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
-  let url;
+  let url, alt;
 
-  if (emoji.custom) {
+  if (isCustomEmoji(emoji)) {
     url = emoji.imageUrl;
+    alt = emoji.colons;
   } else {
-    // @ts-ignore
-    const mapping: UnicodeMapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
+    const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
 
     if (!mapping) {
       return null;
     }
 
-    url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
+    url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`);
+    alt = emoji.native;
   }
 
   return (
@@ -40,7 +32,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
       <img
         className='emojione'
         src={url}
-        alt={emoji.native || emoji.colons}
+        alt={alt}
       />
 
       {emoji.colons}

app/soapbox/components/autosuggest-input.tsx

@@ -1,68 +1,39 @@
-import { Portal } from '@reach/portal';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji';
+import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
-import { Input } from 'soapbox/components/ui';
+import { Input, Portal } from 'soapbox/components/ui';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
 import { isRtl } from 'soapbox/rtl';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
 import type { InputThemes } from 'soapbox/components/ui/input/input';
-
-type CursorMatch = [
-  tokenStart: number | null,
-  token: string | null,
-];
+import type { Emoji } from 'soapbox/features/emoji';
 
 export type AutoSuggestion = string | Emoji;
 
-const textAtCursorMatchesToken = (str: string, caretPosition: number, searchTokens: string[]): CursorMatch => {
-  let word: string;
-
-  const left: number = str.slice(0, caretPosition).search(/\S+$/);
-  const right: number = str.slice(caretPosition).search(/\s/);
-
-  if (right < 0) {
-    word = str.slice(left);
-  } else {
-    word = str.slice(left, right + caretPosition);
-  }
-
-  if (!word || word.trim().length < 3 || !searchTokens.includes(word[0])) {
-    return [null, null];
-  }
-
-  word = word.trim().toLowerCase();
-
-  if (word.length > 0) {
-    return [left + 1, word];
-  } else {
-    return [null, null];
-  }
-};
-
 export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyUp' | 'onKeyDown'> {
-  value: string,
-  suggestions: ImmutableList<any>,
-  disabled?: boolean,
-  placeholder?: string,
-  onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void,
-  onSuggestionsClearRequested: () => void,
-  onSuggestionsFetchRequested: (token: string) => void,
-  autoFocus: boolean,
-  autoSelect: boolean,
-  className?: string,
-  id?: string,
-  searchTokens: string[],
-  maxLength?: number,
-  menu?: Menu,
-  resultsPosition: string,
-  renderSuggestion?: React.FC<{ id: string }>,
-  theme?: InputThemes,
+  value: string
+  suggestions: ImmutableList<any>
+  disabled?: boolean
+  placeholder?: string
+  onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: AutoSuggestion) => void
+  onSuggestionsClearRequested: () => void
+  onSuggestionsFetchRequested: (token: string) => void
+  autoFocus: boolean
+  autoSelect: boolean
+  className?: string
+  id?: string
+  searchTokens: string[]
+  maxLength?: number
+  menu?: Menu
+  renderSuggestion?: React.FC<{ id: string }>
+  hidePortal?: boolean
+  theme?: InputThemes
 }
 
 export default class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
@@ -71,12 +42,11 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
     autoFocus: false,
     autoSelect: true,
     searchTokens: ImmutableList(['@', ':', '#']),
-    resultsPosition: 'below',
   };
 
   getFirstIndex = () => {
     return this.props.autoSelect ? 0 : -1;
-  }
+  };
 
   state = {
     suggestionsHidden: true,
@@ -89,7 +59,11 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
   input: HTMLInputElement | null = null;
 
   onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const [tokenStart, token] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart || 0, this.props.searchTokens);
+    const [tokenStart, token] = textAtCursorMatchesToken(
+      e.target.value,
+      e.target.selectionStart || 0,
+      this.props.searchTokens,
+    );
 
     if (token !== null && this.state.lastToken !== token) {
       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
@@ -102,7 +76,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
     if (this.props.onChange) {
       this.props.onChange(e);
     }
-  }
+  };
 
   onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
     const { suggestions, menu, disabled } = this.props;
@@ -171,15 +145,15 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
     if (this.props.onKeyDown) {
       this.props.onKeyDown(e);
     }
-  }
+  };
 
   onBlur = () => {
     this.setState({ suggestionsHidden: true, focused: false });
-  }
+  };
 
   onFocus = () => {
     this.setState({ focused: true });
-  }
+  };
 
   onSuggestionClick: React.EventHandler<React.MouseEvent | React.TouchEvent> = (e) => {
     const index = Number(e.currentTarget?.getAttribute('data-index'));
@@ -187,7 +161,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
     this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
     this.input?.focus();
     e.preventDefault();
-  }
+  };
 
   componentDidUpdate(prevProps: IAutosuggestInput, prevState: any) {
     const { suggestions } = this.props;
@@ -198,7 +172,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
   setInput = (c: HTMLInputElement) => {
     this.input = c;
-  }
+  };
 
   renderSuggestion = (suggestion: AutoSuggestion, i: number) => {
     const { selectedSuggestion } = this.state;
@@ -225,7 +199,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
         tabIndex={0}
         key={key}
         data-index={i}
-        className={classNames({
+        className={clsx({
           'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
           'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
         })}
@@ -235,21 +209,21 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
         {inner}
       </div>
     );
-  }
+  };
 
   handleMenuItemAction = (item: MenuItem | null, e: React.MouseEvent | React.KeyboardEvent) => {
     this.onBlur();
     if (item?.action) {
       item.action(e);
     }
-  }
+  };
 
   handleMenuItemClick = (item: MenuItem | null): React.MouseEventHandler => {
     return e => {
       e.preventDefault();
       this.handleMenuItemAction(item, e);
     };
-  }
+  };
 
   renderMenu = () => {
     const { menu, suggestions } = this.props;
@@ -261,7 +235,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
     return menu.map((item, i) => (
       <a
-        className={classNames('flex items-center space-x-2 px-4 py-2.5 text-sm cursor-pointer text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
+        className={clsx('flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
         href='#'
         role='button'
         tabIndex={0}
@@ -284,11 +258,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
     const { top, height, left, width } = this.input.getBoundingClientRect();
 
-    if (this.props.resultsPosition === 'below') {
-      return { left, width, top: top + height };
-    }
-
-    return { left, width, top, transform: 'translate(0, -100%)' };
+    return { left, width, top: top + height };
   }
 
   render() {
@@ -298,7 +268,8 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
     const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
 
-    if (isRtl(value)) {
+    // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
+    if (isRtl(value) || (!value && placeholder && isRtl(placeholder))) {
       style.direction = 'rtl';
     }
 
@@ -331,7 +302,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
       <Portal key='portal'>
         <div
           style={this.setPortalPosition()}
-          className={classNames({
+          className={clsx({
             'fixed w-full z-[1001] shadow bg-white dark:bg-gray-900 rounded-lg py-1 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
             hidden: !visible,
             block: visible,

app/soapbox/components/autosuggest-location.tsx

@@ -19,7 +19,7 @@ export const ADDRESS_ICONS: Record<string, string> = {
 };
 
 interface IAutosuggestLocation {
-  id: string,
+  id: string
 }
 
 const AutosuggestLocation: React.FC<IAutosuggestLocation> = ({ id }) => {
@@ -32,7 +32,7 @@ const AutosuggestLocation: React.FC<IAutosuggestLocation> = ({ id }) => {
       <Icon src={ADDRESS_ICONS[location.type] || mapPinIcon} />
       <Stack>
         <Text>{location.description}</Text>
-        <Text size='xs' theme='muted'>{[location.street, location.locality, location.country].filter(val => val.trim()).join(' · ')}</Text>
+        <Text size='xs' theme='muted'>{[location.street, location.locality, location.country].filter(val => val?.trim()).join(' · ')}</Text>
       </Stack>
     </HStack>
   );

app/soapbox/components/autosuggest-textarea.tsx

@@ -1,58 +1,36 @@
-import { Portal } from '@reach/portal';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';
 
-import AutosuggestAccount from '../features/compose/components/autosuggest-account';
-import { isRtl } from '../rtl';
+import { Portal } from 'soapbox/components/ui';
+import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
+import { isRtl } from 'soapbox/rtl';
+import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
-import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
+import AutosuggestEmoji from './autosuggest-emoji';
 
 import type { List as ImmutableList } from 'immutable';
-
-const textAtCursorMatchesToken = (str: string, caretPosition: number) => {
-  let word;
-
-  const left = str.slice(0, caretPosition).search(/\S+$/);
-  const right = str.slice(caretPosition).search(/\s/);
-
-  if (right < 0) {
-    word = str.slice(left);
-  } else {
-    word = str.slice(left, right + caretPosition);
-  }
-
-  if (!word || word.trim().length < 3 || !['@', ':', '#'].includes(word[0])) {
-    return [null, null];
-  }
-
-  word = word.trim().toLowerCase();
-
-  if (word.length > 0) {
-    return [left + 1, word];
-  } else {
-    return [null, null];
-  }
-};
+import type { Emoji } from 'soapbox/features/emoji';
 
 interface IAutosuggesteTextarea {
-  id?: string,
-  value: string,
-  suggestions: ImmutableList<string>,
-  disabled: boolean,
-  placeholder: string,
-  onSuggestionSelected: (tokenStart: number, token: string | null, value: string | undefined) => void,
-  onSuggestionsClearRequested: () => void,
-  onSuggestionsFetchRequested: (token: string | number) => void,
-  onChange: React.ChangeEventHandler<HTMLTextAreaElement>,
-  onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>,
-  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>,
-  onPaste: (files: FileList) => void,
-  autoFocus: boolean,
-  onFocus: () => void,
-  onBlur?: () => void,
-  condensed?: boolean,
+  id?: string
+  value: string
+  suggestions: ImmutableList<string>
+  disabled: boolean
+  placeholder: string
+  onSuggestionSelected: (tokenStart: number, token: string | null, value: string | undefined) => void
+  onSuggestionsClearRequested: () => void
+  onSuggestionsFetchRequested: (token: string | number) => void
+  onChange: React.ChangeEventHandler<HTMLTextAreaElement>
+  onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>
+  onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>
+  onPaste: (files: FileList) => void
+  autoFocus: boolean
+  onFocus: () => void
+  onBlur?: () => void
+  condensed?: boolean
+  children: React.ReactNode
 }
 
 class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea> {
@@ -72,7 +50,11 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
   };
 
   onChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
-    const [tokenStart, token] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
+    const [tokenStart, token] = textAtCursorMatchesToken(
+      e.target.value,
+      e.target.selectionStart,
+      ['@', ':', '#'],
+    );
 
     if (token !== null && this.state.lastToken !== token) {
       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
@@ -83,7 +65,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
     }
 
     this.props.onChange(e);
-  }
+  };
 
   onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
     const { suggestions, disabled } = this.props;
@@ -141,7 +123,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
     }
 
     this.props.onKeyDown(e);
-  }
+  };
 
   onBlur = () => {
     this.setState({ suggestionsHidden: true, focused: false });
@@ -149,7 +131,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
     if (this.props.onBlur) {
       this.props.onBlur();
     }
-  }
+  };
 
   onFocus = () => {
     this.setState({ focused: true });
@@ -157,14 +139,14 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
     if (this.props.onFocus) {
       this.props.onFocus();
     }
-  }
+  };
 
   onSuggestionClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
     const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index') as any);
     e.preventDefault();
     this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
     this.textarea?.focus();
-  }
+  };
 
   shouldComponentUpdate(nextProps: IAutosuggesteTextarea, nextState: any) {
     // Skip updating when only the lastToken changes so the
@@ -175,7 +157,8 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
     if (lastTokenUpdated && !valueUpdated) {
       return false;
     } else {
-      return super.shouldComponentUpdate!(nextProps, nextState, undefined);
+      // https://stackoverflow.com/a/35962835
+      return super.shouldComponentUpdate!.bind(this)(nextProps, nextState, undefined);
     }
   }
 
@@ -188,14 +171,14 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
 
   setTextarea: React.Ref<HTMLTextAreaElement> = (c) => {
     this.textarea = c;
-  }
+  };
 
   onPaste: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
     if (e.clipboardData && e.clipboardData.files.length === 1) {
       this.props.onPaste(e.clipboardData.files);
       e.preventDefault();
     }
-  }
+  };
 
   renderSuggestion = (suggestion: string | Emoji, i: number) => {
     const { selectedSuggestion } = this.state;
@@ -218,7 +201,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
         tabIndex={0}
         key={key}
         data-index={i}
-        className={classNames({
+        className={clsx({
           'px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 group': true,
           'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
         })}
@@ -227,7 +210,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
         {inner}
       </div>
     );
-  }
+  };
 
   setPortalPosition() {
     if (!this.textarea) {
@@ -248,7 +231,8 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
     const { suggestionsHidden } = this.state;
     const style = { direction: 'ltr', minRows: 10 };
 
-    if (isRtl(value)) {
+    // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
+    if (isRtl(value) || (!value && placeholder && isRtl(placeholder))) {
       style.direction = 'rtl';
     }
 
@@ -260,7 +244,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
 
             <Textarea
               ref={this.setTextarea}
-              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-transparent px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+              className={clsx('w-full resize-none border-0 px-0 text-gray-800 transition-[min-height] placeholder:text-gray-600 focus:border-0 focus:shadow-none focus:ring-0 motion-reduce:transition-none dark:bg-transparent dark:text-white dark:placeholder:text-gray-600', {
                 'min-h-[40px]': condensed,
                 'min-h-[100px]': !condensed,
               })}
@@ -287,7 +271,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
       <Portal key='portal'>
         <div
           style={this.setPortalPosition()}
-          className={classNames({
+          className={clsx({
             'fixed z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
             hidden: suggestionsHidden || suggestions.isEmpty(),
             block: !suggestionsHidden && !suggestions.isEmpty(),

app/soapbox/components/avatar-overlay.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import StillImage from 'soapbox/components/still-image';
-
-import type { Account as AccountEntity } from 'soapbox/types/entities';
-
-interface IAvatarOverlay {
-  account: AccountEntity,
-  friend: AccountEntity,
-}
-
-const AvatarOverlay: React.FC<IAvatarOverlay> = ({ account, friend }) => (
-  <div className='account__avatar-overlay'>
-    <StillImage src={account.avatar} className='account__avatar-overlay-base' />
-    <StillImage src={friend.avatar} className='account__avatar-overlay-overlay' />
-  </div>
-);
-
-export default AvatarOverlay;

app/soapbox/components/avatar.tsx

@@ -1,38 +0,0 @@
-import classNames from 'clsx';
-import React from 'react';
-
-import StillImage from 'soapbox/components/still-image';
-
-import type { Account } from 'soapbox/types/entities';
-
-interface IAvatar {
-  account?: Account | null,
-  size?: number,
-  className?: string,
-}
-
-/**
- * Legacy avatar component.
- * @see soapbox/components/ui/avatar/avatar.tsx
- * @deprecated
- */
-const Avatar: React.FC<IAvatar> = ({ account, size, className }) => {
-  if (!account) return null;
-
-  // : TODO : remove inline and change all avatars to be sized using css
-  const style: React.CSSProperties = !size ? {} : {
-    width: `${size}px`,
-    height: `${size}px`,
-  };
-
-  return (
-    <StillImage
-      className={classNames('rounded-full overflow-hidden', className)}
-      style={style}
-      src={account.avatar}
-      alt=''
-    />
-  );
-};
-
-export default Avatar;

app/soapbox/components/badge.tsx

@@ -1,9 +1,9 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IBadge {
-  title: React.ReactNode,
-  slug: string,
+  title: React.ReactNode
+  slug: string
 }
 /** Badge to display on a user's profile. */
 const Badge: React.FC<IBadge> = ({ title, slug }) => {
@@ -12,13 +12,13 @@ const Badge: React.FC<IBadge> = ({ title, slug }) => {
   return (
     <span
       data-testid='badge'
-      className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
+      className={clsx('inline-flex items-center rounded px-2 py-0.5 text-xs font-medium', {
         'bg-fuchsia-700 text-white': slug === 'patron',
         'bg-emerald-800 text-white': slug === 'badge:donor',
         'bg-black text-white': slug === 'admin',
         'bg-cyan-600 text-white': slug === 'moderator',
         'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': fallback,
-        'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
+        'bg-white/75 text-gray-900': slug === 'opaque',
       })}
     >
       {title}

app/soapbox/components/birthday-input.tsx

@@ -15,9 +15,9 @@ const messages = defineMessages({
 });
 
 interface IBirthdayInput {
-  value?: string,
-  onChange: (value: string) => void,
-  required?: boolean,
+  value?: string
+  onChange: (value: string) => void
+  required?: boolean
 }
 
 const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required }) => {
@@ -56,21 +56,21 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
     nextYearButtonDisabled,
     date,
   }: {
-    decreaseMonth(): void,
-    increaseMonth(): void,
-    prevMonthButtonDisabled: boolean,
-    nextMonthButtonDisabled: boolean,
-    decreaseYear(): void,
-    increaseYear(): void,
-    prevYearButtonDisabled: boolean,
-    nextYearButtonDisabled: boolean,
-    date: Date,
+    decreaseMonth(): void
+    increaseMonth(): void
+    prevMonthButtonDisabled: boolean
+    nextMonthButtonDisabled: boolean
+    decreaseYear(): void
+    increaseYear(): void
+    prevYearButtonDisabled: boolean
+    nextYearButtonDisabled: boolean
+    date: Date
   }) => {
     return (
       <div className='flex flex-col gap-2'>
         <div className='flex items-center justify-between'>
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-left.svg')}
             onClick={decreaseMonth}
             disabled={prevMonthButtonDisabled}
@@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
           />
           {intl.formatDate(date, { month: 'long' })}
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-right.svg')}
             onClick={increaseMonth}
             disabled={nextMonthButtonDisabled}
@@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         </div>
         <div className='flex items-center justify-between'>
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-left.svg')}
             onClick={decreaseYear}
             disabled={prevYearButtonDisabled}
@@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
           />
           {intl.formatDate(date, { year: 'numeric' })}
           <IconButton
-            className='datepicker__button'
+            className='datepicker__button rtl:rotate-180'
             src={require('@tabler/icons/chevron-right.svg')}
             onClick={increaseYear}
             disabled={nextYearButtonDisabled}
@@ -113,7 +113,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
   const handleChange = (date: Date) => onChange(date ? new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10) : '');
 
   return (
-    <div className='mt-1 relative rounded-md shadow-sm'>
+    <div className='relative mt-1 rounded-md shadow-sm'>
       <BundleContainer fetchComponent={DatePicker}>
         {Component => (<Component
           selected={selected}

app/soapbox/components/blurhash.tsx

@@ -3,18 +3,18 @@ import React, { useRef, useEffect } from 'react';
 
 interface IBlurhash {
   /** Hash to render */
-  hash: string | null | undefined,
+  hash: string | null | undefined
   /**  Width of the blurred region in pixels. Defaults to 32. */
-  width?: number,
+  width?: number
   /** Height of the blurred region in pixels. Defaults to width. */
-  height?: number,
+  height?: number
   /**
    * Whether dummy mode is enabled. If enabled, nothing is rendered
    * and canvas left untouched.
    */
-  dummy?: boolean,
+  dummy?: boolean
   /** className of the canvas element. */
-  className?: string,
+  className?: string
 }
 
 /**

app/soapbox/components/copyable-input.tsx

@@ -5,7 +5,7 @@ import { Button, HStack, Input } from './ui';
 
 interface ICopyableInput {
   /** Text to be copied. */
-  value: string,
+  value: string
 }
 
 /** An input with copy abilities. */
@@ -29,7 +29,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
         type='text'
         value={value}
         className='rounded-r-none rtl:rounded-l-none rtl:rounded-r-lg'
-        outerClassName='flex-grow'
+        outerClassName='grow'
         onClick={selectInput}
         readOnly
       />

app/soapbox/components/display-name.tsx

@@ -5,8 +5,6 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 
 import { getAcct } from '../utils/accounts';
 
-import Icon from './icon';
-import RelativeTimestamp from './relative-timestamp';
 import { HStack, Text } from './ui';
 import VerificationBadge from './verification-badge';
 
@@ -15,19 +13,12 @@ import type { Account } from 'soapbox/types/entities';
 interface IDisplayName {
   account: Account
   withSuffix?: boolean
-  withDate?: boolean
+  children?: React.ReactNode
 }
 
-const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true, withDate = false }) => {
+const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = true }) => {
   const { displayFqn = false } = useSoapboxConfig();
-  const { created_at: createdAt, verified } = account;
-
-  const joinedAt = createdAt ? (
-    <div className='account__joined-at'>
-      <Icon src={require('@tabler/icons/clock.svg')} />
-      <RelativeTimestamp timestamp={createdAt} />
-    </div>
-  ) : null;
+  const { verified } = account;
 
   const displayName = (
     <HStack space={1} alignItems='center' grow>
@@ -39,7 +30,6 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
       />
 
       {verified && <VerificationBadge />}
-      {withDate && joinedAt}
     </HStack>
   );
 

app/soapbox/components/domain.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
 import { unblockDomain } from 'soapbox/actions/domain-blocks';
+import { useAppDispatch } from 'soapbox/hooks';
 
 import { HStack, IconButton, Text } from './ui';
 
@@ -12,11 +12,11 @@ const messages = defineMessages({
 });
 
 interface IDomain {
-  domain: string,
+  domain: string
 }
 
 const Domain: React.FC<IDomain> = ({ domain }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const intl = useIntl();
 
   // const onBlockDomain = () => {

app/soapbox/components/dropdown-menu.tsx

@@ -1,415 +0,0 @@
-import classNames from 'clsx';
-import { supportsPassiveEvents } from 'detect-passive-events';
-import React from 'react';
-import { spring } from 'react-motion';
-// @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
-import Overlay from 'react-overlays/lib/Overlay';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { Counter, IconButton } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import Motion from 'soapbox/features/ui/util/optional-motion';
-
-import type { Status } from 'soapbox/types/entities';
-
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-let id = 0;
-
-export interface MenuItem {
-  action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>,
-  middleClick?: React.EventHandler<React.MouseEvent>,
-  text: string,
-  href?: string,
-  to?: string,
-  newTab?: boolean,
-  isLogout?: boolean,
-  icon?: string,
-  count?: number,
-  destructive?: boolean,
-  meta?: string,
-  active?: boolean,
-}
-
-export type Menu = Array<MenuItem | null>;
-
-interface IDropdownMenu extends RouteComponentProps {
-  items: Menu,
-  onClose: () => void,
-  style?: React.CSSProperties,
-  placement?: DropdownPlacement,
-  arrowOffsetLeft?: string,
-  arrowOffsetTop?: string,
-  openedViaKeyboard: boolean,
-}
-
-interface IDropdownMenuState {
-  mounted: boolean,
-}
-
-class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState> {
-
-  static defaultProps: Partial<IDropdownMenu> = {
-    style: {},
-    placement: 'bottom',
-  };
-
-  state = {
-    mounted: false,
-  };
-
-  node: HTMLDivElement | null = null;
-  focusedItem: HTMLAnchorElement | null = null;
-
-  handleDocumentClick = (e: Event) => {
-    if (this.node && !this.node.contains(e.target as Node)) {
-      this.props.onClose();
-    }
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('keydown', this.handleKeyDown, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-    if (this.focusedItem && this.props.openedViaKeyboard) {
-      this.focusedItem.focus({ preventScroll: true });
-    }
-    this.setState({ mounted: true });
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick);
-    document.removeEventListener('keydown', this.handleKeyDown);
-    document.removeEventListener('touchend', this.handleDocumentClick);
-  }
-
-  setRef: React.RefCallback<HTMLDivElement> = c => {
-    this.node = c;
-  }
-
-  setFocusRef: React.RefCallback<HTMLAnchorElement> = c => {
-    this.focusedItem = c;
-  }
-
-  handleKeyDown = (e: KeyboardEvent) => {
-    if (!this.node) return;
-
-    const items = Array.from(this.node.getElementsByTagName('a'));
-    const index = items.indexOf(document.activeElement as any);
-    let element = null;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        element = items[index + 1] || items[0];
-        break;
-      case 'ArrowUp':
-        element = items[index - 1] || items[items.length - 1];
-        break;
-      case 'Tab':
-        if (e.shiftKey) {
-          element = items[index - 1] || items[items.length - 1];
-        } else {
-          element = items[index + 1] || items[0];
-        }
-        break;
-      case 'Home':
-        element = items[0];
-        break;
-      case 'End':
-        element = items[items.length - 1];
-        break;
-      case 'Escape':
-        this.props.onClose();
-        break;
-    }
-
-    if (element) {
-      element.focus();
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-
-  handleItemKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      this.handleClick(e);
-    }
-  }
-
-  handleClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = e => {
-    const i = Number(e.currentTarget.getAttribute('data-index'));
-    const item = this.props.items[i];
-    if (!item) return;
-    const { action, to } = item;
-
-    this.props.onClose();
-
-    e.stopPropagation();
-
-    if (to) {
-      e.preventDefault();
-      this.props.history.push(to);
-    } else if (typeof action === 'function') {
-      e.preventDefault();
-      action(e);
-    }
-  }
-
-  handleMiddleClick: React.EventHandler<React.MouseEvent> = e => {
-    const i = Number(e.currentTarget.getAttribute('data-index'));
-    const item = this.props.items[i];
-    if (!item) return;
-    const { middleClick } = item;
-
-    this.props.onClose();
-
-    if (e.button === 1 && typeof middleClick === 'function') {
-      e.preventDefault();
-      middleClick(e);
-    }
-  }
-
-  handleAuxClick: React.EventHandler<React.MouseEvent> = e => {
-    if (e.button === 1) {
-      this.handleMiddleClick(e);
-    }
-  }
-
-  renderItem(option: MenuItem | null, i: number): JSX.Element {
-    if (option === null) {
-      return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
-    }
-
-    const { text, href, to, newTab, isLogout, icon, count, destructive } = option;
-
-    return (
-      <li className={classNames('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
-        <a
-          href={href || to || '#'}
-          role='button'
-          tabIndex={0}
-          ref={i === 0 ? this.setFocusRef : null}
-          onClick={this.handleClick}
-          onAuxClick={this.handleAuxClick}
-          onKeyPress={this.handleItemKeyPress}
-          data-index={i}
-          target={newTab ? '_blank' : undefined}
-          data-method={isLogout ? 'delete' : undefined}
-          title={text}
-        >
-          {icon && <SvgIcon src={icon} className='mr-3 rtl:ml-3 rtl:mr-0 h-5 w-5 flex-none' />}
-
-          <span className='truncate'>{text}</span>
-
-          {count ? (
-            <span className='ml-auto h-5 w-5 flex-none'>
-              <Counter count={count} />
-            </span>
-          ) : null}
-        </a>
-      </li>
-    );
-  }
-
-  render() {
-    const { items, style, placement, arrowOffsetLeft, arrowOffsetTop } = this.props;
-    const { mounted } = this.state;
-    return (
-      <Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
-        {({ opacity, scaleX, scaleY }) => (
-          // It should not be transformed when mounting because the resulting
-          // size will be used to determine the coordinate of the menu by
-          // react-overlays
-          <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} ref={this.setRef}>
-            <div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} />
-            <ul>
-              {items.map((option, i) => this.renderItem(option, i))}
-            </ul>
-          </div>
-        )}
-      </Motion>
-    );
-  }
-
-}
-
-const RouterDropdownMenu = withRouter(DropdownMenu);
-
-export interface IDropdown extends RouteComponentProps {
-  icon?: string,
-  src?: string,
-  items: Menu,
-  size?: number,
-  active?: boolean,
-  pressed?: boolean,
-  title?: string,
-  disabled?: boolean,
-  status?: Status,
-  isUserTouching?: () => boolean,
-  isModalOpen?: boolean,
-  onOpen?: (
-    id: number,
-    onItemClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
-    dropdownPlacement: DropdownPlacement,
-    keyboard: boolean,
-  ) => void,
-  onClose?: (id: number) => void,
-  dropdownPlacement?: string,
-  openDropdownId?: number | null,
-  openedViaKeyboard?: boolean,
-  text?: string,
-  onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
-  children?: JSX.Element,
-  dropdownMenuStyle?: React.CSSProperties,
-}
-
-interface IDropdownState {
-  id: number,
-  open: boolean,
-}
-
-export type DropdownPlacement = 'top' | 'bottom';
-
-class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
-
-  static defaultProps: Partial<IDropdown> = {
-    title: 'Menu',
-  };
-
-  state = {
-    id: id++,
-    open: false,
-  };
-
-  target: HTMLButtonElement | null = null;
-  activeElement: Element | null = null;
-
-  handleClick: React.EventHandler<React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>> = e => {
-    const { onOpen, onShiftClick, openDropdownId } = this.props;
-    e.stopPropagation();
-
-    if (onShiftClick && e.shiftKey) {
-      e.preventDefault();
-      onShiftClick(e);
-    } else if (this.state.id === openDropdownId) {
-      this.handleClose();
-    } else if (onOpen) {
-      const { top } = e.currentTarget.getBoundingClientRect();
-      const placement: DropdownPlacement = top * 2 < innerHeight ? 'bottom' : 'top';
-
-      onOpen(this.state.id, this.handleItemClick, placement, e.type !== 'click');
-    }
-  }
-
-  handleClose = () => {
-    if (this.activeElement && this.activeElement === this.target) {
-      (this.activeElement as HTMLButtonElement).focus();
-      this.activeElement = null;
-    }
-
-    if (this.props.onClose) {
-      this.props.onClose(this.state.id);
-    }
-  }
-
-  handleMouseDown: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = () => {
-    if (!this.state.open) {
-      this.activeElement = document.activeElement;
-    }
-  }
-
-  handleButtonKeyDown: React.EventHandler<React.KeyboardEvent> = (e) => {
-    switch (e.key) {
-      case ' ':
-      case 'Enter':
-        this.handleMouseDown(e);
-        break;
-    }
-  }
-
-  handleKeyPress: React.EventHandler<React.KeyboardEvent<HTMLButtonElement>> = (e) => {
-    switch (e.key) {
-      case ' ':
-      case 'Enter':
-        this.handleClick(e);
-        e.stopPropagation();
-        e.preventDefault();
-        break;
-    }
-  }
-
-  handleItemClick: React.EventHandler<React.MouseEvent> = e => {
-    const i = Number(e.currentTarget.getAttribute('data-index'));
-    const item = this.props.items[i];
-    if (!item) return;
-
-    const { action, to } = item;
-
-    this.handleClose();
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (typeof action === 'function') {
-      action(e);
-    } else if (to) {
-      this.props.history?.push(to);
-    }
-  }
-
-  setTargetRef: React.RefCallback<HTMLButtonElement> = c => {
-    this.target = c;
-  }
-
-  findTarget = () => {
-    return this.target;
-  }
-
-  componentWillUnmount = () => {
-    if (this.state.id === this.props.openDropdownId) {
-      this.handleClose();
-    }
-  }
-
-  render() {
-    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children, dropdownMenuStyle } = this.props;
-    const open = this.state.id === openDropdownId;
-
-    return (
-      <>
-        {children ? (
-          React.cloneElement(children, {
-            disabled,
-            onClick: this.handleClick,
-            onMouseDown: this.handleMouseDown,
-            onKeyDown: this.handleButtonKeyDown,
-            onKeyPress: this.handleKeyPress,
-            ref: this.setTargetRef,
-          })
-        ) : (
-          <IconButton
-            disabled={disabled}
-            className={classNames({
-              'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
-              'text-gray-700 dark:text-gray-500': open,
-            })}
-            title={title}
-            src={src}
-            aria-pressed={pressed}
-            text={text}
-            onClick={this.handleClick}
-            onMouseDown={this.handleMouseDown}
-            onKeyDown={this.handleButtonKeyDown}
-            onKeyPress={this.handleKeyPress}
-            ref={this.setTargetRef}
-          />
-        )}
-
-        <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
-          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} style={dropdownMenuStyle} />
-        </Overlay>
-      </>
-    );
-  }
-
-}
-
-export default withRouter(Dropdown);

app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx

@@ -0,0 +1,109 @@
+import clsx from 'clsx';
+import React, { useEffect, useRef } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Counter, Icon } from '../ui';
+
+export interface MenuItem {
+  action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>
+  active?: boolean
+  count?: number
+  destructive?: boolean
+  href?: string
+  icon?: string
+  meta?: string
+  middleClick?(event: React.MouseEvent): void
+  target?: React.HTMLAttributeAnchorTarget
+  text: string
+  to?: string
+}
+
+interface IDropdownMenuItem {
+  index: number
+  item: MenuItem | null
+  onClick?(): void
+}
+
+const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
+  const history = useHistory();
+
+  const itemRef = useRef<HTMLAnchorElement>(null);
+
+  const handleClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = (event) => {
+    event.stopPropagation();
+
+    if (!item) return;
+    if (onClick) onClick();
+
+
+    if (item.to) {
+      event.preventDefault();
+      history.push(item.to);
+    } else if (typeof item.action === 'function') {
+      event.preventDefault();
+      item.action(event);
+    }
+  };
+
+  const handleAuxClick: React.EventHandler<React.MouseEvent> = (event) => {
+    if (!item) return;
+    if (onClick) onClick();
+
+    if (event.button === 1 && item.middleClick) {
+      item.middleClick(event);
+    }
+  };
+
+  const handleItemKeyPress: React.EventHandler<React.KeyboardEvent> = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      handleClick(event);
+    }
+  };
+
+  useEffect(() => {
+    const firstItem = index === 0;
+
+    if (itemRef.current && firstItem) {
+      itemRef.current.focus({ preventScroll: true });
+    }
+  }, [itemRef.current, index]);
+
+  if (item === null) {
+    return <li className='my-1 mx-2 h-[2px] bg-gray-100 dark:bg-gray-800' />;
+  }
+
+  return (
+    <li className='truncate focus-visible:ring-2 focus-visible:ring-primary-500'>
+      <a
+        href={item.href || item.to || '#'}
+        role='button'
+        tabIndex={0}
+        ref={itemRef}
+        data-index={index}
+        onClick={handleClick}
+        onAuxClick={handleAuxClick}
+        onKeyPress={handleItemKeyPress}
+        target={item.target}
+        title={item.text}
+        className={
+          clsx({
+            'flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none cursor-pointer': true,
+            'text-danger-600 dark:text-danger-400': item.destructive,
+          })
+        }
+      >
+        {item.icon && <Icon src={item.icon} className='mr-3 h-5 w-5 flex-none rtl:ml-3 rtl:mr-0' />}
+
+        <span className='truncate'>{item.text}</span>
+
+        {item.count ? (
+          <span className='ml-auto h-5 w-5 flex-none'>
+            <Counter count={item.count} />
+          </span>
+        ) : null}
+      </a>
+    </li>
+  );
+};
+
+export default DropdownMenuItem;