More email styling

.babelrc

@@ -1,63 +1,29 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-env",
-    "@babel/preset-typescript"
+    "@babel/preset-flow",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": {
+          "version": "3",
+          "proposals": true
+        },
+        "useBuiltIns": "usage"
+      }
+    ]
   ],
   "plugins": [
-    "babel-plugin-transform-typescript-metadata",
+    "lodash",
+    "styled-components",
     [
       "@babel/plugin-proposal-decorators",
       {
         "legacy": true
       }
     ],
-    "@babel/plugin-proposal-class-properties",
-    [
-      "transform-inline-environment-variables",
-      {
-        "include": [
-          "SOURCE_COMMIT",
-          "SOURCE_VERSION"
-        ]
-      }
-    ],
-    "tsconfig-paths-module-resolver"
-  ],
-  "env": {
-    "production": {
-      "plugins": [
-        [
-          "styled-components",
-          {
-            "displayName": false
-          }
-        ]
-      ],
-      "ignore": [
-        "**/__mocks__",
-        "**/*.test.ts"
-      ]
-    },
-    "development": {
-      "ignore": [
-        "**/__mocks__",
-        "**/*.test.ts"
-      ]
-    },
-    "test": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "corejs": {
-              "version": "3",
-              "proposals": true
-            },
-            "useBuiltIns": "usage"
-          }
-        ]
-      ]
-    }
-  }
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-regenerator",
+    "transform-class-properties"
+  ]
 }

.circleci/config.yml

@@ -1,182 +1,43 @@
-version: 2.1
-
-defaults: &defaults
-  working_directory: ~/outline
-  docker:
-    - image: cimg/node:20.10
-    - image: cimg/redis:5.0
-    - image: cimg/postgres:14.2
-      environment:
-        POSTGRES_USER: postgres
-        POSTGRES_PASSWORD: password
-        POSTGRES_DB: circle_test
-  resource_class: large
-  environment:
-    NODE_ENV: test
-    DATABASE_URL: postgres://postgres:password@localhost:5432/circle_test
-    URL: http://localhost:3000
-    NODE_OPTIONS: --max-old-space-size=8000
-
-executors:
-  docker-publisher:
-    environment:
-      IMAGE_NAME: outlinewiki/outline
-      BASE_IMAGE_NAME: outlinewiki/outline-base
-    docker:
-      - image: circleci/buildpack-deps:stretch
-
+version: 2
 jobs:
   build:
-    <<: *defaults
+    working_directory: ~/outline
+    docker:
+      - image: circleci/node:14
+      - image: circleci/redis:latest
+      - image: circleci/postgres:9.6.5-alpine-ram
+    environment:
+      NODE_ENV: test
+      SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+      DATABASE_URL_TEST: postgres://root@localhost:5432/circle_test
+      DATABASE_URL: postgres://root@localhost:5432/circle_test
+      URL: http://localhost:3000
+      SMTP_FROM_EMAIL: hello@example.com
+      AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
+      AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: install-deps
-          command: yarn install --frozen-lockfile
+          command: yarn install --pure-lockfile
       - save_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
           paths:
             - ./node_modules
-  lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+      - run:
+          name: migrate
+          command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
       - run:
           name: lint
           command: yarn lint
-  types:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
-          name: typescript
-          command: yarn tsc
-  test-app:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          name: flow
+          command: yarn flow check --max-workers 4
       - run:
           name: test
-          command: yarn test:app
-  test-shared:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          command: yarn test
       - run:
-          name: test
-          command: yarn test:shared
-  test-server:
-    <<: *defaults
-    parallelism: 3
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
-      - run:
-          name: migrate
-          command: ./node_modules/.bin/sequelize db:migrate
-      - run:
-          name: test
-          command: |
-            TESTFILES=$(circleci tests glob "server/**/*.test.ts" | circleci tests split)
-            yarn test --maxWorkers=2 $TESTFILES
-  bundle-size:
-    <<: *defaults
-    environment:
-      NODE_ENV: production
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
-      - run:
-          name: build-vite
-          command: yarn vite:build
-      - run:
-          name: Send bundle stats to RelativeCI
-          command: npx relative-ci-agent
-  build-image:
-    executor: docker-publisher
-    steps:
-      - checkout
-      - setup_remote_docker:
-          version: 20.10.6
-      - run:
-          name: Install Docker buildx
-          command: |
-            mkdir -p ~/.docker/cli-plugins
-            url="https://github.com/docker/buildx/releases/download/v0.8.0/buildx-v0.8.0.linux-amd64"
-            curl -sSL -o ~/.docker/cli-plugins/docker-buildx $url
-            chmod a+x ~/.docker/cli-plugins/docker-buildx
-      - run:
-          name: Enable Docker buildx
-          command: export DOCKER_CLI_EXPERIMENTAL=enabled
-      - run:
-          name: Initialize Docker buildx
-          command: |
-            docker buildx install
-            docker context create docker-multiarch
-            docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
-            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
-            docker buildx inspect --builder docker-multiarch --bootstrap
-            docker buildx use docker-multiarch
-      - run:
-          name: Build base image
-          command: docker build -f Dockerfile.base -t $BASE_IMAGE_NAME:latest --load .
-      - run:
-          name: Login to Docker Hub
-          command: echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
-      - run:
-          name: Publish base Docker Image to Docker Hub
-          command: docker push $BASE_IMAGE_NAME:latest
-      - run:
-          name: Build and push Docker image
-          command: |
-            if [[ "$CIRCLE_TAG" == *"-"* ]]; then
-              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
-            else
-              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
-            fi
-
-workflows:
-  version: 2
-  all:
-    jobs:
-      - build
-      - lint:
-          requires:
-            - build
-      - test-server:
-          requires:
-            - build
-      - test-shared:
-          requires:
-            - build
-      - test-app:
-          requires:
-            - build
-      - types:
-          requires:
-            - build
-      - bundle-size:
-          requires:
-            - build
-            - types
-
-  build-docker:
-    jobs:
-      - build-image:
-          filters:
-            tags:
-              only: /^v.*/
-            branches:
-              ignore: /.*/
+          name: build-webpack
+          command: yarn build:webpack

.dockerignore

@@ -6,11 +6,14 @@ __mocks__
 .DS_Store
 .env*
 .eslint*
+.flowconfig
 .log
 Makefile
 Procfile
 app.json
-crowdin.yml
 build
 docker-compose.yml
+fakes3
+flow-typed
 node_modules
+setupJest.js

.env.development

@@ -1,10 +0,0 @@
-URL=https://local.outline.dev:3000
-
-SMTP_FROM_EMAIL=hello@example.com
-
-# Enable unsafe-inline in script-src CSP directive
-# Setting it to true allows React dev tools add-on in Firefox to successfully detect the project
-DEVELOPMENT_UNSAFE_INLINE_CSP=true
-
-# Increase the log level to debug for development
-LOG_LEVEL=debug

.env.sample

@@ -1,72 +1,52 @@
-# –––––––––––––––– REQUIRED ––––––––––––––––
+# 👋 Welcome, we're glad you're setting up an installation of Outline. Copy this 
+# file to .env or set the variables in your local environment manually. For 
+# development with docker this should mostly work out  of the box other than 
+# setting the Slack keys and the SECRET_KEY.
 
-NODE_ENV=production
+
+
+
+# –––––––––––––––– REQUIRED ––––––––––––––––
 
 # Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
 
-# Generate a unique random key. The format is not important but you could still use
+# Generate a unique random key. The format is not important but you could still use 
 # `openssl rand -hex 32` in your terminal to produce this.
 UTILS_SECRET=generate_a_new_key
 
 # For production point these at your databases, in development the default
 # should work out of the box.
-DATABASE_URL=postgres://user:pass@localhost:5432/outline
-DATABASE_CONNECTION_POOL_MIN=
-DATABASE_CONNECTION_POOL_MAX=
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable
-
-# For redis you can either specify an ioredis compatible url like this
-REDIS_URL=redis://localhost:6379
-# or alternatively, if you would like to provide additional connection options,
-# use a base64 encoded JSON connection option object. Refer to the ioredis documentation
-# for a list of available options.
-# Example: Use Redis Sentinel for high availability
-# {"sentinels":[{"host":"sentinel-0","port":26379},{"host":"sentinel-1","port":26379}],"name":"mymaster"}
-# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJzZW50aW5lbC0wIiwicG9ydCI6MjYzNzl9LHsiaG9zdCI6InNlbnRpbmVsLTEiLCJwb3J0IjoyNjM3OX1dLCJuYW1lIjoibXltYXN0ZXIifQ==
+REDIS_URL=redis://localhost:6479
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
-URL=
+URL=http://localhost:3000
 PORT=3000
 
-# See [documentation](docs/SERVICES.md) on running a separate collaboration
-# server, for normal operation this does not need to be set.
-COLLABORATION_URL=
+# To support uploading of images for avatars and document attachments an
+# s3-compatible storage must be provided. AWS S3 is recommended for redundency
+# however if you want to keep all file storage local an alternative such as 
+# minio (https://github.com/minio/minio) can be used.
 
-# Specify what storage system to use. Possible value is one of "s3" or "local".
-# For "local", the avatar images and document attachments will be saved on local disk. 
-FILE_STORAGE=local
-
-# If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
-# which all attachments/images go. Make sure that the process has permissions to create
-# this path and also to write files to it.
-FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
-
-# Maximum allowed size for the uploaded attachment.
-FILE_STORAGE_UPLOAD_MAX_SIZE=262144000
-
-# Override the maximum size of document imports, generally this should be lower
-# than the document attachment maximum size.
-FILE_STORAGE_IMPORT_MAX_SIZE=
-
-# Override the maximum size of workspace imports, these can be especially large
-# and the files are temporary being automatically deleted after a period of time.
-FILE_STORAGE_WORKSPACE_IMPORT_MAX_SIZE=
-
-# To support uploading of images for avatars and document attachments in a distributed 
-# architecture an s3-compatible storage can be configured if FILE_STORAGE=s3 above.
+# A more detailed guide on setting up S3 is available here:
+# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
+#
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
-AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
+AWS_S3_UPLOAD_MAX_SIZE=26214400
 AWS_S3_FORCE_PATH_STYLE=true
 AWS_S3_ACL=private
 
+
 # –––––––––––––– AUTHENTICATION ––––––––––––––
 
 # Third party signin credentials, at least ONE OF EITHER Google, Slack,
@@ -78,8 +58,8 @@ AWS_S3_ACL=private
 #
 # When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
 # https://<URL>/auth/slack.callback
-SLACK_CLIENT_ID=get_a_key_from_slack
-SLACK_CLIENT_SECRET=get_the_secret_of_above_key
+SLACK_KEY=get_a_key_from_slack
+SLACK_SECRET=get_the_secret_of_above_key
 
 # To configure Google auth, you'll need to create an OAuth Client ID at
 # => https://console.cloud.google.com/apis/credentials
@@ -89,79 +69,24 @@ SLACK_CLIENT_SECRET=get_the_secret_of_above_key
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See
+# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See 
 # the guide for details on setting up your Azure App:
 # => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
-AZURE_CLIENT_ID=
+AZURE_CLIENT_ID= 
 AZURE_CLIENT_SECRET=
 AZURE_RESOURCE_APP_ID=
 
-# To configure generic OIDC auth, you'll need some kind of identity provider.
-# See documentation for whichever IdP you use to acquire the following info:
-# Redirect URI is https://<URL>/auth/oidc.callback
-OIDC_CLIENT_ID=
-OIDC_CLIENT_SECRET=
-OIDC_AUTH_URI=
-OIDC_TOKEN_URI=
-OIDC_USERINFO_URI=
-OIDC_LOGOUT_URI=
 
-# Specify which claims to derive user information from
-# Supports any valid JSON path with the JWT payload
-OIDC_USERNAME_CLAIM=preferred_username
-
-# Display name for OIDC authentication
-OIDC_DISPLAY_NAME=OpenID Connect
-
-# Space separated auth scopes.
-OIDC_SCOPES=openid profile email
-
-# To configure the GitHub integration, you'll need to create a GitHub App at
-# => https://github.com/settings/apps
-#
-# When configuring the Client ID, add a redirect URL under "Permissions & events":
-# https://<URL>/api/github.callback
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-GITHUB_APP_NAME=
-GITHUB_APP_ID=
-GITHUB_APP_PRIVATE_KEY=
-
-# To configure Discord auth, you'll need to create a Discord Application at
-# => https://discord.com/developers/applications/
-#
-# When configuring the Client ID, add a redirect URL under "OAuth2":
-# https://<URL>/api/discord.callback
-DISCORD_CLIENT_ID=
-DISCORD_CLIENT_SECRET=
-
-# DISCORD_SERVER_ID should be the ID of the Discord server that Outline is
-# integrated with. 
-# Used to verify that the user is a member of the server as well as server
-# metadata such as nicknames, server icon and name.
-DISCORD_SERVER_ID=
-
-# DISCORD_SERVER_ROLES should be a comma separated list of role IDs that are
-# allowed to access Outline. If this is not set, all members of the server
-# will be allowed to access Outline.
-# DISCORD_SERVER_ID and DISCORD_SERVER_ROLES must be set together.
-DISCORD_SERVER_ROLES=
 
 # –––––––––––––––– OPTIONAL ––––––––––––––––
 
-# Base64 encoded private key and certificate for HTTPS termination. This is only
-# required if you do not use an external reverse proxy. See documentation:
-# https://wiki.generaloutline.com/share/1c922644-40d8-41fe-98f9-df2b67239d45
-SSL_KEY=
-SSL_CERT=
-
 # If using a Cloudfront/Cloudflare distribution or similar it can be set below.
-# This will cause paths to javascript, stylesheets, and images to be updated to
-# the hostname defined in CDN_URL. In your CDN configuration the origin server
+# This will cause paths to javascript, stylesheets, and images to be updated to  
+# the hostname defined in CDN_URL. In your CDN configuration the origin server 
 # should be set to the same as URL.
 CDN_URL=
 
-# Auto-redirect to https in production. The default is true but you may set to
+# Auto-redirect to https in production. The default is true but you may set to 
 # false if you can be sure that SSL is terminated at an external loadbalancer.
 FORCE_HTTPS=true
 
@@ -169,19 +94,19 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true
 
-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
+# Override the maxium size of document imports, could be required if you have
+# especially large Word documents with embedded imagery
+MAXIMUM_IMPORT_SIZE=5120000
 
-# You can remove this line if your reverse proxy already logs incoming http
-# requests and this ends up being duplicative
-DEBUG=http
+# You may enable or disable debugging categories to increase the noisiness of
+# logs. The default is a good balance
+DEBUG=cache,presenters,events,emails,mailer,utils,http,server,services
 
-# Configure lowest severity level for server logs. Should be one of
-# error, warn, info, http, verbose, debug and silly
-LOG_LEVEL=info
+# Comma separated list of domains to be allowed to signin to the wiki. If not
+# set, all domains are allowed by default when using Google OAuth to signin
+ALLOWED_DOMAINS=
 
-# For a complete Slack integration with search and posting to channels the
+# For a complete Slack integration with search and posting to channels the 
 # following configs are also needed, some more details
 # => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
 #
@@ -189,13 +114,13 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
-# Optionally enable Sentry (sentry.io) to track errors and performance,
-# and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
-# https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
-SENTRY_DSN=
-SENTRY_TUNNEL=
+# Optionally enable google analytics to track pageviews in the knowledge base 
+GOOGLE_ANALYTICS_ID=
 
-# To support sending outgoing transactional emails such as "document updated" or
+# Optionally enable Sentry (sentry.io) to track errors and performance
+SENTRY_DSN=
+
+# To support sending outgoing transactional emails such as "document updated" or 
 # "you've been invited" you'll need to provide authentication for an SMTP server
 SMTP_HOST=
 SMTP_PORT=
@@ -206,17 +131,9 @@ SMTP_REPLY_EMAIL=
 SMTP_TLS_CIPHERS=
 SMTP_SECURE=true
 
-# The default interface language. See translate.getoutline.com for a list of
+# Custom logo that displays on the authentication screen, scaled to height: 60px
+# TEAM_LOGO=https://example.com/images/logo.png
+
+# The default interface language. See translate.getoutline.com for a list of 
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US
-
-# Optionally enable rate limiter at application web server
-RATE_LIMITER_ENABLED=true
-
-# Configure default throttling parameters for rate limiter
-RATE_LIMITER_REQUESTS=1000
-RATE_LIMITER_DURATION_WINDOW=60
-
-# Iframely API config
-IFRAMELY_URL=
-IFRAMELY_API_KEY=

.env.test

@@ -1,31 +0,0 @@
-NODE_ENV=test
-DATABASE_URL=postgres://user:pass@127.0.0.1:5432/outline-test
-SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-
-SMTP_HOST=smtp.example.com
-SMTP_USERNAME=test
-SMTP_FROM_EMAIL=hello@example.com
-SMTP_REPLY_EMAIL=hello@example.com
-
-GOOGLE_CLIENT_ID=123
-GOOGLE_CLIENT_SECRET=123
-
-SLACK_CLIENT_ID=123
-SLACK_CLIENT_SECRET=123
-
-GITHUB_CLIENT_ID=123;
-GITHUB_CLIENT_SECRET=123;
-GITHUB_APP_NAME=outline-test;
-
-OIDC_CLIENT_ID=client-id
-OIDC_CLIENT_SECRET=client-secret
-OIDC_AUTH_URI=http://localhost/authorize
-OIDC_TOKEN_URI=http://localhost/token
-OIDC_USERINFO_URI=http://localhost/userinfo
-
-IFRAMELY_API_KEY=123
-
-RATE_LIMITER_ENABLED=false
-
-FILE_STORAGE=local
-FILE_STORAGE_LOCAL_ROOT_DIR=/tmp

.eslintrc

@@ -1,73 +1,20 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "sourceType": "module",
-    "extraFileExtensions": [".json"],
-    "project": "./tsconfig.json",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
+  "parser": "babel-eslint",
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "plugin:prettier/recommended"
+    "react-app",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:flowtype/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "plugins": [
-    "es",
-    "@typescript-eslint",
-    "eslint-plugin-import",
-    "eslint-plugin-node",
-    "eslint-plugin-react",
-    "eslint-plugin-lodash"
+    "prettier",
+    "flowtype"
   ],
   "rules": {
     "eqeqeq": 2,
-    "curly": 2,
-    "no-console": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "spaced-comment": "error",
-    "object-shorthand": "error",
+    "no-unused-vars": 2,
     "no-mixed-operators": "off",
-    "no-useless-escape": "off",
-    "no-shadow": "off",
-    "es/no-regexp-lookbehind-assertions": "error",
-    "react/self-closing-comp": ["error", {
-      "component": true,
-      "html": true
-    }],
-    "@typescript-eslint/no-shadow": [
-      "warn",
-      {
-        "hoist": "all",
-        "ignoreTypeValueShadow": true
-      }
-    ],
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-floating-promises": "error",
-    "@typescript-eslint/await-thenable": "error",
-    "@typescript-eslint/no-misused-promises": [
-      "error",
-      {
-        "checksVoidReturn": false
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "args": "after-used",
-        "ignoreRestSiblings": true
-      }
-    ],
-    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
-    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "lodash/import-scope": ["warn", "method"],
-    "import/no-named-as-default": "off",
-    "import/no-named-as-default-member": "off",
-    "import/newline-after-import": 2,
     "import/order": [
       "error",
       {
@@ -76,48 +23,53 @@
         },
         "pathGroups": [
           {
-            "pattern": "@shared/**",
+            "pattern": "shared/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "@server/**",
+            "pattern": "stores",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/stores",
+            "pattern": "stores/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/stores/**",
+            "pattern": "models/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/models/**",
+            "pattern": "scenes/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/scenes/**",
-            "group": "external",
-            "position": "after"
-          },
-          {
-            "pattern": "~/components/**",
-            "group": "external",
-            "position": "after"
-          },
-          {
-            "pattern": "~/**",
+            "pattern": "components/**",
             "group": "external",
             "position": "after"
           }
         ]
       }
     ],
+    "flowtype/require-valid-file-annotation": [
+      2,
+      "always",
+      {
+        "annotationStyle": "line"
+      }
+    ],
+    "flowtype/space-after-type-colon": [
+      2,
+      "always"
+    ],
+    "flowtype/space-before-type-colon": [
+      2,
+      "never"
+    ],
     "prettier/prettier": [
       "error",
       {
@@ -132,11 +84,22 @@
       "pragma": "React",
       "version": "detect"
     },
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
     "import/resolver": {
-      "typescript": {}
+      "node": {
+        "paths": [
+          "app",
+          "."
+        ]
+      }
+    },
+    "flowtype": {
+      "onlyFilesWithFlowAnnotation": false
     }
+  },
+  "env": {
+    "jest": true
+  },
+  "globals": {
+    "EDITOR_VERSION": true
   }
 }

.flowconfig

@@ -0,0 +1,39 @@
+[include]
+.*/app/.*
+.*/server/.*
+.*/shared/.*
+
+[ignore]
+.*/node_modules/tiny-cookie/flow/.*
+.*/node_modules/styled-components/.*
+.*/node_modules/polished/.*
+.*/node_modules/mobx/.*.flow
+.*/node_modules/react-side-effect/.*
+.*/node_modules/fbjs/.*
+.*/node_modules/config-chain/.*
+.*/server/scripts/.*
+*.test.js
+
+[libs]
+
+[options]
+emoji=true
+sharedmemory.heap_size=3221225472
+
+module.system.node.resolve_dirname=node_modules
+module.system.node.resolve_dirname=app
+
+module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
+module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
+
+module.file_ext=.js
+module.file_ext=.md
+module.file_ext=.json
+
+esproposal.decorators=ignore
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+esproposal.optional_chaining=enable
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Feature request
-    url: https://github.com/outline/outline/discussions/new?category=ideas
+    url: https://github.com/outline/outline/discussions/new
     about: Request a feature to be added to the project
   - name: Self hosting questions
-    url: https://github.com/outline/outline/discussions/new?category=self-hosting
+    url: https://github.com/outline/outline/discussions/new
     about: Ask questions and discuss running Outline with community members

.github/dependabot.yml

@@ -1,15 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    open-pull-requests-limit: 5
-    ignore:
-      - dependency-name: "*"
-        update-types: ["version-update:semver-major"]
-    schedule:
-      interval: "weekly"

.github/stale.yml

@@ -0,0 +1,22 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 90
+
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 14
+
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - security
+  - pinned
+
+# Label to use when marking an issue as stale
+staleLabel: stale
+
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  Hey! The issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed soon if no further activity occurs. Please
+  reply here if you wish for the issue to be kept open.
+
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/calibreapp-image-actions.yml

@@ -1,61 +0,0 @@
-# Image Actions will run in the following scenarios:
-# - on Pull Requests containing images (not including forks)
-# - on pushing of images to `main` (for forks)
-# - on demand (https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/)
-# - at 11 PM every Sunday in anything gets missed with any of the above scenarios
-# For Pull Requests, the images are added to the PR.
-# For other scenarios, a new PR will be opened if any images are compressed.
-name: Compress images
-on:
-  pull_request:
-    paths:
-      - "**.jpg"
-      - "**.jpeg"
-      - "**.png"
-      - "**.webp"
-  push:
-    branches:
-      - main
-    paths:
-      - "**.jpg"
-      - "**.jpeg"
-      - "**.png"
-      - "**.webp"
-  workflow_dispatch:
-  schedule:
-    - cron: "00 20 * * 0"
-permissions: {}
-jobs:
-  build:
-    permissions:
-      contents: write
-      pull-requests: write #  to comment on pull request
-
-    name: calibreapp/image-actions
-    runs-on: ubuntu-latest
-    # Only run on main repo on and PRs that match the main repo.
-    if: |
-      github.repository == 'outline/outline' &&
-      (github.event_name != 'pull_request' ||
-       github.event.pull_request.head.repo.full_name == github.repository)
-    steps:
-      - name: Checkout Branch
-        uses: actions/checkout@v2
-      - name: Compress Images
-        id: calibre
-        uses: calibreapp/image-actions@main
-        with:
-          githubToken: ${{ secrets.GITHUB_TOKEN }}
-          # For non-Pull Requests, run in compressOnly mode and we'll PR after.
-          compressOnly: ${{ github.event_name != 'pull_request' }}
-      - name: Create Pull Request
-        # If it's not a Pull Request then commit any changes as a new PR.
-        if: |
-          github.event_name != 'pull_request' &&
-          steps.calibre.outputs.markdown != ''
-        uses: peter-evans/create-pull-request@v3
-        with:
-          title: "chore: Auto Compress Images"
-          branch-suffix: timestamp
-          commit-message: "chore: Compressed inefficient images automatically"
-          body: ${{ steps.calibre.outputs.markdown }}

.github/workflows/codeql-analysis.yml

@@ -1,70 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ main ]
-  schedule:
-    - cron: '28 15 * * 2'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://git.io/codeql-language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2

.github/workflows/stale.yml

@@ -1,29 +0,0 @@
-name: "Close Stale PRs"
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "30 1 * * *"
-
-permissions:
-  issues: write
-  pull-requests: write
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/stale@v5
-        with:
-          stale-pr-message: "This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
-          stale-issue-message: "This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
-          close-pr-message: "Automatically closed due to inactivity"
-          close-issue-message: "Automatically closed due to inactivity"
-          days-before-issue-stale: 120
-          days-before-pr-stale: 60
-          days-before-close: 5
-          operations-per-run: 60
-          stale-issue-label: stale
-          stale-pr-label: stale
-          exempt-issue-labels: "security,pinned"
-      - name: Print outputs
-        run: echo ${{ join(steps.stale.outputs.*, ',') }}

.gitignore

@@ -2,15 +2,9 @@ dist
 build
 node_modules/*
 .env
-.env.local
-.env.production
 .log
-.vscode/*
 npm-debug.log
 stats.json
 .DS_Store
-data/*
+fakes3/*
 .idea
-*.pem
-*.key
-*.cert

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged

.jestconfig.json

@@ -1,66 +0,0 @@
-{
-  "workerIdleMemoryLimit": "0.75",
-  "maxWorkers": "50%",
-  "projects": [
-    {
-      "displayName": "server",
-      "roots": ["<rootDir>/server", "<rootDir>/plugins"],
-      "moduleNameMapper": {
-        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
-      },
-      "setupFiles": ["<rootDir>/__mocks__/console.js"],
-      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "globalSetup": "<rootDir>/server/test/globalSetup.js",
-      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
-      "testEnvironment": "node"
-    },
-    {
-      "displayName": "app",
-      "roots": ["<rootDir>/app"],
-      "moduleNameMapper": {
-        "^~/(.*)$": "<rootDir>/app/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
-      },
-      "modulePaths": ["<rootDir>/app"],
-      "setupFiles": ["<rootDir>/__mocks__/window.js"],
-      "setupFilesAfterEnv": ["<rootDir>/app/test/setup.ts"],
-      "testEnvironment": "jsdom",
-      "testEnvironmentOptions": {
-        "url": "http://localhost"
-      }
-    },
-    {
-      "displayName": "shared-node",
-      "roots": ["<rootDir>/shared"],
-      "moduleNameMapper": {
-        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
-      },
-      "setupFiles": ["<rootDir>/__mocks__/console.js"],
-      "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
-      "testEnvironment": "node"
-    },
-    {
-      "displayName": "shared-jsdom",
-      "roots": ["<rootDir>/shared"],
-      "moduleNameMapper": {
-        "^~/(.*)$": "<rootDir>/app/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
-      },
-      "setupFiles": ["<rootDir>/__mocks__/window.js"],
-      "testEnvironment": "jsdom",
-      "testEnvironmentOptions": {
-        "url": "http://localhost"
-      }
-    }
-  ]
-}

.sequelizerc

@@ -1,6 +1,4 @@
-require("dotenv").config({
-  path: process.env.NODE_ENV === "test" ? ".env.test" : ".env",
-});
+require('dotenv').config({ silent: true });
 
 var path = require('path');
 
@@ -8,4 +6,5 @@ module.exports = {
   'config': path.resolve('server/config', 'database.json'),
   'migrations-path': path.resolve('server', 'migrations'),
   'models-path': path.resolve('server', 'models'),
+  'seeders-path': path.resolve('server/models', 'fixtures'),
 }

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-  "javascript.validate.enable": true,
-  "javascript.format.enable": true,
-  "typescript.validate.enable": true,
-  "typescript.format.enable": true,
+  "javascript.validate.enable": false,
+  "javascript.format.enable": false,
+  "typescript.validate.enable": false,
+  "typescript.format.enable": false,
   "editor.formatOnSave": true,
 }

ARCHITECTURE.md

@@ -0,0 +1,67 @@
+
+# Architecture
+
+Outline is composed of a backend and frontend codebase in this monorepo. As both are written in Javascript, they share some code where possible. We utilize the latest ES6 language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier formatting and ESLint are enforced by CI.
+
+## Frontend
+
+Outline's frontend is a React application compiled with [Webpack](https://webpack.js.org/). It uses [MobX](https://mobx.js.org/) for state management and [Styled Components](https://www.styled-components.com/) for component styles. Unless global, state logic and styles are always co-located with React components together with their subcomponents to make the component tree easier to manage.
+
+> Important Note: The Outline editor is built on [Prosemirror](https://github.com/prosemirror) and managed in a separate open source repository to encourage re-use: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor).
+
+```
+app
+├── components  - React components reusable across scenes
+├── embeds      - Embed definitions that represent rich interactive embeds in the editor
+├── hooks       - Reusable React hooks
+├── menus       - Context menus, often appear in multiple places in the UI
+├── models      - State models using MobX observables
+├── routes      - Route definitions, note that chunks are async loaded with suspense
+├── scenes      - A scene represents a full-page view that contains several components
+├── stores      - Collections of models and associated fetch logic
+├── types       - Flow types
+└── utils       - Utility methods specific to the frontend
+```
+
+## Backend
+
+The API server is driven by [Koa](http://koajs.com/), it uses [Sequelize](http://docs.sequelizejs.com/) as the ORM and Redis with [Bull](https://github.com/OptimalBits/bull) for queues and async event management. Authorization logic
+is contained in [cancan](https://www.npmjs.com/package/cancan) policies under the "policies" directory.
+
+Interested in more documentation on the API routes? Check out the [API documentation](https://getoutline.com/developers).
+
+```
+server
+├── api               - All API routes are contained within here
+│   └── middlewares   - Koa middlewares specific to the API
+├── auth              - Authentication logic
+│   └── providers     - Authentication providers export passport.js strategies and config
+├── commands          - We are gradually moving to the command pattern for new write logic
+├── config            - Database configuration
+├── emails            - Transactional email templates
+│   └── components    - Shared React components for email templates
+├── middlewares       - Koa middlewares
+├── migrations        - Database migrations
+├── models            - Sequelize models
+├── onboarding        - Markdown templates for onboarding documents
+├── policies          - Authorization logic based on cancan
+├── presenters        - JSON presenters for database models, the interface between backend -> frontend
+├── services          - Service definitions are triggered for events and perform async jobs
+├── static            - Static assets
+├── test              - Test helpers and fixtures, tests themselves are colocated
+└── utils             - Utility methods specific to the backend
+```
+
+## Shared
+
+Where logic is shared between the client and server it is placed in this directory. This is generally
+small utilities.
+
+```
+shared
+├── i18n              - Internationalization confiuration
+│   └── locales       - Language specific translation files
+├── styles            - Styles, colors and other global aesthetics
+├── utils             - Shared utility methods
+└── constants         - Shared constants
+```

Dockerfile

@@ -1,40 +1,23 @@
-ARG APP_PATH=/opt/outline
-FROM outlinewiki/outline-base as base
+FROM node:14-alpine
+
+ENV APP_PATH /opt/outline
+RUN mkdir -p $APP_PATH
 
-ARG APP_PATH
 WORKDIR $APP_PATH
 
-# ---
-FROM node:20-slim AS runner
+COPY package.json ./
+COPY yarn.lock ./
 
-LABEL org.opencontainers.image.source="https://github.com/outline/outline"
+RUN yarn --pure-lockfile
+
+COPY . .
+
+RUN yarn build && \
+  yarn --production --ignore-scripts --prefer-offline && \
+  rm -rf shared && \
+  rm -rf app
 
-ARG APP_PATH
-WORKDIR $APP_PATH
 ENV NODE_ENV production
-
-COPY --from=base $APP_PATH/build ./build
-COPY --from=base $APP_PATH/server ./server
-COPY --from=base $APP_PATH/public ./public
-COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
-COPY --from=base $APP_PATH/node_modules ./node_modules
-COPY --from=base $APP_PATH/package.json ./package.json
-
-# Create a non-root user compatible with Debian and BusyBox based images
-RUN addgroup --gid 1001 nodejs && \
-  adduser --uid 1001 --ingroup nodejs nodejs && \
-  chown -R nodejs:nodejs $APP_PATH/build && \
-  mkdir -p /var/lib/outline && \
-	chown -R nodejs:nodejs /var/lib/outline
-
-ENV FILE_STORAGE_LOCAL_ROOT_DIR /var/lib/outline/data
-RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
-
-VOLUME /var/lib/outline/data
-
-USER nodejs
+CMD yarn start
 
 EXPOSE 3000
-CMD ["yarn", "start"]

Dockerfile.base

@@ -1,19 +0,0 @@
-ARG APP_PATH=/opt/outline
-FROM node:20-slim AS deps
-
-ARG APP_PATH
-WORKDIR $APP_PATH
-COPY ./package.json ./yarn.lock ./
-COPY ./patches ./patches
-
-RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
-  yarn cache clean
-
-COPY . .
-ARG CDN_URL
-RUN yarn build
-
-RUN rm -rf node_modules
-
-RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 && \
-  yarn cache clean

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.71.0
+Licensed Work:        Outline 0.55.0
                       The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2027-08-18
+Change Date:          2024-04-22
 
 Change License:       Apache License, Version 2.0
 

Makefile

@@ -1,28 +1,28 @@
 up:
-	docker compose up -d redis postgres
-	yarn install-local-ssl
+	docker-compose up -d redis postgres s3
 	yarn install --pure-lockfile
-	yarn dev:watch
+	yarn sequelize db:migrate
+	yarn dev
 
 build:
-	docker compose build --pull outline
+	docker-compose build --pull outline
 
 test:
-	docker compose up -d redis postgres
-	NODE_ENV=test yarn sequelize db:drop
-	NODE_ENV=test yarn sequelize db:create
-	NODE_ENV=test yarn sequelize db:migrate
+	docker-compose up -d redis postgres s3
+	yarn sequelize db:drop --env=test
+	yarn sequelize db:create --env=test
+	yarn sequelize db:migrate --env=test
 	yarn test
 
 watch:
-	docker compose up -d redis postgres
-	NODE_ENV=test yarn sequelize db:drop
-	NODE_ENV=test yarn sequelize db:create
-	NODE_ENV=test yarn sequelize db:migrate
+	docker-compose up -d redis postgres s3
+	yarn sequelize db:drop --env=test
+	yarn sequelize db:create --env=test
+	yarn sequelize db:migrate --env=test
 	yarn test:watch
 
 destroy:
-	docker compose stop
-	docker compose rm -f
+	docker-compose stop
+	docker-compose rm -f
 
 .PHONY: up build destroy test watch # let's go to reserve rules names

Procfile

@@ -1,2 +1 @@
-web: yarn start --services=web,websockets,collaboration
-worker: yarn start --services=worker
+web: node ./build/server/index.js

README.md

@@ -1,57 +1,135 @@
+
+
 <p align="center">
   <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
 </p>
 <p align="center">
-  <i>A fast, collaborative, knowledge base for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
+  <i>An open, extensible, wiki for your team built using React and Node.js.<br/>Try out Outline using our hosted version at <a href="https://www.getoutline.com">www.getoutline.com</a>.</i>
   <br/>
   <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </p>
 <p align="center">
-  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield"></a>
-  <a href="http://www.typescriptlang.org" rel="nofollow"><img src="https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg" alt="TypeScript"></a>
-  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier"></a>
-  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg" alt="Styled Components"></a>
-  <a href="https://translate.getoutline.com/project/outline" alt="Localized"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
+  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
+  <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat"></a>
+  <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg"></a>
+  <a href="https://translate.getoutline.com/project/outline"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
 </p>
 
-This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com). You can also find documentation on using Outline in [our guide](https://docs.getoutline.com/s/guide).
+This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com).
 
 If you'd like to run your own copy of Outline or contribute to development then this is the place for you.
 
 # Installation
 
-Please see the [documentation](https://docs.getoutline.com/s/hosting/) for running your own copy of Outline in a production configuration.
+Outline requires the following dependencies:
 
-If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).
+- [Node.js](https://nodejs.org/) >= 12
+- [Yarn](https://yarnpkg.com)
+- [Postgres](https://www.postgresql.org/download/) >=9.5
+- [Redis](https://redis.io/) >= 4
+- AWS S3 bucket or compatible API for file storage
+- Slack or Google developer application for authentication
 
-# Development
 
-There is a short guide for [setting up a development environment](https://docs.getoutline.com/s/hosting/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.
+## Self-Hosted Production
 
-## Contributing
+### Docker
+
+For a manual self-hosted production installation these are the recommended steps:
+
+1. First setup Redis and Postgres servers, this is outside the scope of the guide.
+1. Download the latest official Docker image, new releases are available around the middle of every month:
+
+   `docker pull outlinewiki/outline`
+1. Using the [.env.sample](.env.sample) as a reference, set the required variables in your production environment. You can export the environment variables directly, or create a `.env` file and pass it to the docker image like so:
+
+   `docker run --env-file=.env outlinewiki/outline`
+1. Setup the database with `yarn db:migrate`. Production assumes an SSL connection to the database by default, if
+Postgres is on the same machine and is not SSL you can migrate with `yarn db:migrate --env=production-ssl-disabled`, for example:
+
+   `docker run --rm outlinewiki/outline yarn db:migrate`
+1. Start the container:
+
+   `docker run outlinewiki/outline`
+1. Visit http://you_server_ip:3000 and you should be able to see Outline page
+
+   > Port number can be changed using the `PORT` environment variable
+
+1. (Optional) You can add an `nginx` or other reverse proxy to serve your instance of Outline for a clean URL without the port number, support SSL, etc.
+
+### Terraform
+
+Alternatively a community member maintains a script to deploy Outline on Google Cloud Platform with [Terraform & Ansible](https://github.com/rjsgn/outline-terraform-ansible).
+
+### Upgrading
+
+#### Docker
+
+If you're running Outline with Docker you'll need to run migrations within the docker container after updating the image. The command will be something like:
+
+```shell
+docker run --rm outlinewiki/outline:latest yarn db:migrate
+```
+
+#### Git
+
+If you're running Outline by cloning this repository, run the following command to upgrade:
+
+```shell
+yarn run upgrade
+```
+
+
+## Local Development
+
+For contributing features and fixes you can quickly get an environment running using Docker by following these steps:
+
+1. Install these dependencies if you don't already have them
+    1. [Docker for Desktop](https://www.docker.com)
+    1. [Node.js](https://nodejs.org/) (v12 LTS preferred)
+    1. [Yarn](https://yarnpkg.com)
+1. Clone this repo
+1. Register a Slack app at https://api.slack.com/apps
+1. Copy the file `.env.sample` to `.env`
+1. Fill out the following fields:
+    1. `SECRET_KEY` (follow instructions in the comments at the top of `.env`)
+    1. `SLACK_KEY` (this is called "Client ID" in Slack admin)
+    1. `SLACK_SECRET` (this is called "Client Secret" in Slack admin)
+1. Configure your Slack app's Oauth & Permissions settings 
+    1. Slack recently prevented the use of `http` protocol for localhost. For local development, you can use a tool like [ngrok](https://ngrok.com) or a package like `mkcert`. ([How to use HTTPS for local development](https://web.dev/how-to-use-local-https/))
+    1. Add `https://my_ngrok_address/auth/slack.callback` as an Oauth redirect URL
+    1. Ensure that the bot token scope contains at least `users:read`
+1. Run `make up`. This will download dependencies, build and launch a development version of Outline
+
+
+# Contributing
 
 Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
 
-Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher likelihood of your code being accepted.
+Before submitting a pull request please let the core team know by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues), and we'd also love to hear from you in the [Discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of code being accepted.
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
-- [Translation](docs/TRANSLATION.md) into other languages
-- Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
-- Performance improvements, both on server and frontend
-- Developer happiness and documentation
-- Bugs and other issues listed on GitHub
+* [Translation](TRANSLATION.md) into other languages
+* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
+* Performance improvements, both on server and frontend
+* Developer happiness and documentation
+* Bugs and other issues listed on GitHub
+
 
 ## Architecture
 
 If you're interested in contributing or learning more about the Outline codebase
-please refer to the [architecture document](docs/ARCHITECTURE.md) first for a high level overview of how the application is put together.
+please refer to the [architecture document](ARCHITECTURE.md) first for a high level overview of how the application is put together.
+
 
 ## Debugging
 
-In development Outline outputs simple logging to the console, prefixed by categories. In production it outputs JSON logs, these can be easily parsed by your preferred log ingestion pipeline.
+Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
 
-HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable.
+```
+DEBUG=sql,cache,presenters,events,importer,exporter,emails,mailer
+```
 
 ## Tests
 
@@ -67,16 +145,13 @@ make test
 make watch
 ```
 
-Once the test database is created with `make test` you may individually run
+Once the test database is created with  `make test` you may individually run
 frontend and backend tests directly.
 
 ```shell
 # To run backend tests
 yarn test:server
 
-# To run a specific backend test
-yarn test:server myTestFile
-
 # To run frontend tests
 yarn test:app
 ```
@@ -85,21 +160,17 @@ yarn test:app
 
 Sequelize is used to create and run migrations, for example:
 
-```shell
+```
 yarn sequelize migration:generate --name my-migration
 yarn sequelize db:migrate
 ```
 
 Or to run migrations on test database:
 
-```shell
+```
 yarn sequelize db:migrate --env test
 ```
 
-# Activity
-
-![Alt](https://repobeats.axiom.co/api/embed/ff2e4e6918afff1acf9deb72d1ba6b071d586178.svg "Repobeats analytics image")
-
-# License
+## License
 
 Outline is [BSL 1.1 licensed](LICENSE).

SECURITY.md

@@ -0,0 +1,11 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+The Outline team takes security bugs seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
+
+To report a security issue, email [hello@getoutline.com](mailto:hello@getoutline.com) and include the word "SECURITY" in the subject line.
+
+The Outline team will send a response indicating the next steps in handling your report. After the initial reply to your report you will be kept informed of the progress towards a fix and full announcement.
+
+Report security bugs in third-party dependencies to the person or team maintaining the module. You can also report a vulnerability through the [Node Security Project](https://nodesecurity.io/report).

__mocks__/bull.js

@@ -0,0 +1,18 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+export default class Queue {
+  name;
+
+  constructor(name) {
+    this.name = name;
+  }
+
+  process = (fn) => {
+    console.log(`Registered function ${this.name}`);
+    this.processFn = fn;
+  };
+
+  add = (data) => {
+    console.log(`Running ${this.name}`);
+    return this.processFn({ data });
+  };
+}

__mocks__/console.js

@@ -1 +1,2 @@
+// Mock for node-uuid
 global.console.warn = () => {};

__mocks__/react-medium-image-zoom.js

@@ -1 +0,0 @@
-export default null;

__mocks__/window.js

@@ -1,2 +1 @@
-window.matchMedia = (data) => data;
-window.env = {};
+window.matchMedia = data => data;

app.json

@@ -3,7 +3,13 @@
   "description": "Open source wiki and knowledge base for growing teams",
   "website": "https://www.getoutline.com/",
   "repository": "https://github.com/outline/outline",
-  "keywords": ["wiki", "team", "node", "markdown", "slack"],
+  "keywords": [
+    "wiki",
+    "team",
+    "node",
+    "markdown",
+    "slack"
+  ],
   "success_url": "/",
   "formation": {
     "web": {
@@ -29,12 +35,7 @@
       "required": true
     },
     "SECRET_KEY": {
-      "description": "A 32-character secret key, generate with openssl rand -hex 32",
-      "generator": "secret",
-      "required": true
-    },
-    "UTILS_SECRET": {
-      "description": "A 32-character secret key, generate with openssl rand -hex 32",
+      "description": "A secret key",
       "generator": "secret",
       "required": true
     },
@@ -43,7 +44,7 @@
       "required": true
     },
     "URL": {
-      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
+      "description": "https://{your app name}.herokuapp.com",
       "required": true
     },
     "GOOGLE_CLIENT_ID": {
@@ -54,66 +55,15 @@
       "description": "",
       "required": false
     },
-    "AZURE_CLIENT_ID": {
-      "description": "To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See the guide for details on setting up your Azure App: https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4",
+    "ALLOWED_DOMAINS": {
+      "description": "Comma separated list of domains to be allowed (optional). If not set, all Google apps domains are allowed by default",
       "required": false
     },
-    "AZURE_CLIENT_SECRET": {
-      "description": "",
-      "required": false
-    },
-    "AZURE_RESOURCE_APP_ID": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_CLIENT_ID": {
-      "description": "To configure generic OIDC auth, you'll need some kind of identity provider. See documentation for whichever IdP you use to acquire the following info; Redirect URI is https://<URL>/auth/oidc.callback",
-      "required": false
-    },
-    "OIDC_CLIENT_SECRET": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_AUTH_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_TOKEN_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_USERINFO_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_DISABLE_REDIRECT": {
-      "description": "Prevent the app from automatically redirecting to the OIDC login page",
-      "required": false
-    },
-    "OIDC_LOGOUT_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_USERNAME_CLAIM": {
-      "description": "Specify which claims to derive user information from. Supports any valid JSON path with the JWT payload",
-      "value": "preferred_username",
-      "required": false
-    },
-    "OIDC_DISPLAY_NAME": {
-      "description": "Display name for OIDC authentication",
-      "value": "OpenID Connect",
-      "required": false
-    },
-    "OIDC_SCOPES": {
-      "description": "Space separated auth scopes.",
-      "value": "openid profile email",
-      "required": false
-    },
-    "SLACK_CLIENT_ID": {
+    "SLACK_KEY": {
       "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
       "required": false
     },
-    "SLACK_CLIENT_SECRET": {
+    "SLACK_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -141,6 +91,11 @@
       "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
       "required": false
     },
+    "AWS_S3_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
     "AWS_S3_FORCE_PATH_STYLE": {
       "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
       "value": "true",
@@ -156,11 +111,6 @@
       "description": "S3 canned ACL for document attachments",
       "required": false
     },
-    "FILE_STORAGE_UPLOAD_MAX_SIZE": {
-      "description": "Maximum file upload size in bytes",
-      "value": "26214400",
-      "required": false
-    },
     "SMTP_HOST": {
       "description": "smtp.example.com (optional)",
       "required": false
@@ -195,21 +145,16 @@
       "required": false
     },
     "GOOGLE_ANALYTICS_ID": {
-      "description": "G-xxxx (optional)",
+      "description": "UA-xxxx (optional)",
       "required": false
     },
     "SENTRY_DSN": {
       "description": "An API key for Sentry if you wish to collect error reporting (optional)",
       "required": false
     },
-    "SENTRY_TUNNEL": {
-      "description": "A sentry tunnel URL for bypassing ad blockers in the UI (optional)",
-      "required": false
-    },
-    "DEFAULT_LANGUAGE": {
-      "value": "en_US",
-      "description": "The default interface language. See translate.getoutline.com for a list of available language codes and their rough percentage translated.",
+    "TEAM_LOGO": {
+      "description": "A logo that will be displayed on the signed out home page",
       "required": false
     }
   }
-}
+}

app/.eslintrc

@@ -1,14 +0,0 @@
-{
-  "extends": [
-    "../.eslintrc",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
-  ],
-  "plugins": [
-    "eslint-plugin-react-hooks"
-  ],
-  "env": {
-    "jest": true,
-    "browser": true
-  }
-}

app/.jestconfig.json

@@ -0,0 +1,30 @@
+{
+  "testURL": "http://localhost",
+  "verbose": false,
+  "rootDir": "..",
+  "roots": [
+    "<rootDir>/app",
+    "<rootDir>/shared"
+  ],
+  "moduleNameMapper": {
+    "^shared/(.*)$": "<rootDir>/shared/$1",
+    "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
+  },
+  "moduleFileExtensions": [
+    "js",
+    "jsx",
+    "json"
+  ],
+  "moduleDirectories": [
+    "node_modules"
+  ],
+  "modulePaths": [
+    "<rootDir>/app"
+  ],
+  "setupFiles": [
+    "<rootDir>/__mocks__/window.js"
+  ],
+  "setupFilesAfterEnv": [
+    "./app/test/setup.js"
+  ]
+}

app/actions/definitions/apiKeys.tsx

@@ -1,25 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import APIKeyNew from "~/scenes/APIKeyNew";
-import { createAction } from "..";
-import { SettingsSection } from "../sections";
-
-export const createApiKey = createAction({
-  name: ({ t }) => t("New API key"),
-  analyticsName: "New API key",
-  section: SettingsSection,
-  icon: <PlusIcon />,
-  keywords: "create",
-  visible: () =>
-    stores.policies.abilities(stores.auth.team?.id || "").createApiKey,
-  perform: ({ t, event }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    stores.dialogs.openModal({
-      title: t("New API key"),
-      content: <APIKeyNew onSubmit={stores.dialogs.closeAllModals} />,
-    });
-  },
-});

app/actions/definitions/collections.tsx

@@ -1,229 +0,0 @@
-import {
-  CollectionIcon,
-  EditIcon,
-  PadlockIcon,
-  PlusIcon,
-  SearchIcon,
-  StarredIcon,
-  TrashIcon,
-  UnstarredIcon,
-} from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import Collection from "~/models/Collection";
-import { CollectionEdit } from "~/components/Collection/CollectionEdit";
-import { CollectionNew } from "~/components/Collection/CollectionNew";
-import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
-import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
-import SharePopover from "~/components/Sharing/Collection/SharePopover";
-import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
-import { createAction } from "~/actions";
-import { CollectionSection } from "~/actions/sections";
-import { setPersistedState } from "~/hooks/usePersistedState";
-import history from "~/utils/history";
-import { searchPath } from "~/utils/routeHelpers";
-
-const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
-  <DynamicCollectionIcon collection={collection} />
-);
-
-export const openCollection = createAction({
-  name: ({ t }) => t("Open collection"),
-  analyticsName: "Open collection",
-  section: CollectionSection,
-  shortcut: ["o", "c"],
-  icon: <CollectionIcon />,
-  children: ({ stores }) => {
-    const collections = stores.collections.orderedData;
-    return collections.map((collection) => ({
-      // Note: using url which includes the slug rather than id here to bust
-      // cache if the collection is renamed
-      id: collection.path,
-      name: collection.name,
-      icon: <ColorCollectionIcon collection={collection} />,
-      section: CollectionSection,
-      perform: () => history.push(collection.path),
-    }));
-  },
-});
-
-export const createCollection = createAction({
-  name: ({ t }) => t("New collection"),
-  analyticsName: "New collection",
-  section: CollectionSection,
-  icon: <PlusIcon />,
-  keywords: "create",
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").createCollection,
-  perform: ({ t, event }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    stores.dialogs.openModal({
-      title: t("Create a collection"),
-      content: <CollectionNew onSubmit={stores.dialogs.closeAllModals} />,
-    });
-  },
-});
-
-export const editCollection = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
-  analyticsName: "Edit collection",
-  section: CollectionSection,
-  icon: <EditIcon />,
-  visible: ({ stores, activeCollectionId }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Edit collection"),
-      content: (
-        <CollectionEdit
-          onSubmit={stores.dialogs.closeAllModals}
-          collectionId={activeCollectionId}
-        />
-      ),
-    });
-  },
-});
-
-export const editCollectionPermissions = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
-  analyticsName: "Collection permissions",
-  section: CollectionSection,
-  icon: <PadlockIcon />,
-  visible: ({ stores, activeCollectionId }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, stores, activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Share this collection"),
-      content: (
-        <SharePopover
-          collection={collection}
-          onRequestClose={stores.dialogs.closeAllModals}
-          visible
-        />
-      ),
-    });
-  },
-});
-
-export const searchInCollection = createAction({
-  name: ({ t }) => t("Search in collection"),
-  analyticsName: "Search collection",
-  section: CollectionSection,
-  icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) => !!activeCollectionId,
-  perform: ({ activeCollectionId }) => {
-    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
-  },
-});
-
-export const starCollection = createAction({
-  name: ({ t }) => t("Star"),
-  analyticsName: "Star collection",
-  section: CollectionSection,
-  icon: <StarredIcon />,
-  keywords: "favorite bookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    return (
-      !collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).star
-    );
-  },
-  perform: async ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    await collection?.star();
-    setPersistedState(getHeaderExpandedKey("starred"), true);
-  },
-});
-
-export const unstarCollection = createAction({
-  name: ({ t }) => t("Unstar"),
-  analyticsName: "Unstar collection",
-  section: CollectionSection,
-  icon: <UnstarredIcon />,
-  keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    return (
-      !!collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).unstar
-    );
-  },
-  perform: async ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    await collection?.unstar();
-  },
-});
-
-export const deleteCollection = createAction({
-  name: ({ t }) => `${t("Delete")}…`,
-  analyticsName: "Delete collection",
-  section: CollectionSection,
-  dangerous: true,
-  icon: <TrashIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return stores.policies.abilities(activeCollectionId).delete;
-  },
-  perform: ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Delete collection"),
-      content: (
-        <CollectionDeleteDialog
-          collection={collection}
-          onSubmit={stores.dialogs.closeAllModals}
-        />
-      ),
-    });
-  },
-});
-
-export const rootCollectionActions = [
-  openCollection,
-  createCollection,
-  starCollection,
-  unstarCollection,
-  deleteCollection,
-];

app/actions/definitions/developer.tsx

@@ -1,175 +0,0 @@
-import copy from "copy-to-clipboard";
-import {
-  BeakerIcon,
-  CopyIcon,
-  ToolsIcon,
-  TrashIcon,
-  UserIcon,
-} from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import { createAction } from "~/actions";
-import { DeveloperSection } from "~/actions/sections";
-import env from "~/env";
-import { client } from "~/utils/ApiClient";
-import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
-import Logger from "~/utils/Logger";
-import { deleteAllDatabases } from "~/utils/developer";
-import history from "~/utils/history";
-import { homePath } from "~/utils/routeHelpers";
-
-export const copyId = createAction({
-  name: ({ t }) => t("Copy ID"),
-  icon: <CopyIcon />,
-  keywords: "uuid",
-  section: DeveloperSection,
-  children: ({
-    currentTeamId,
-    currentUserId,
-    activeCollectionId,
-    activeDocumentId,
-  }) => {
-    function copyAndToast(text: string | null | undefined) {
-      if (text) {
-        copy(text);
-        toast.success("Copied to clipboard");
-      }
-    }
-
-    return [
-      createAction({
-        name: "Copy User ID",
-        section: DeveloperSection,
-        icon: <CopyIcon />,
-        visible: () => !!currentUserId,
-        perform: () => copyAndToast(currentUserId),
-      }),
-      createAction({
-        name: "Copy Team ID",
-        section: DeveloperSection,
-        icon: <CopyIcon />,
-        visible: () => !!currentTeamId,
-        perform: () => copyAndToast(currentTeamId),
-      }),
-      createAction({
-        name: "Copy Collection ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!activeCollectionId,
-        perform: () => copyAndToast(activeCollectionId),
-      }),
-      createAction({
-        name: "Copy Document ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!activeDocumentId,
-        perform: () => copyAndToast(activeDocumentId),
-      }),
-      createAction({
-        name: "Copy Team ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!currentTeamId,
-        perform: () => copyAndToast(currentTeamId),
-      }),
-      createAction({
-        name: "Copy Release ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!env.VERSION,
-        perform: () => copyAndToast(env.VERSION),
-      }),
-    ];
-  },
-});
-
-export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Clear IndexedDB cache"),
-  icon: <TrashIcon />,
-  keywords: "cache clear database",
-  section: DeveloperSection,
-  perform: async ({ t }) => {
-    history.push(homePath());
-    await deleteAllDatabases();
-    toast.success(t("IndexedDB cache cleared"));
-  },
-});
-
-export const createTestUsers = createAction({
-  name: "Create 10 test users",
-  icon: <UserIcon />,
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: async () => {
-    const count = 10;
-    await client.post("/developer.create_test_users", { count });
-    toast.message(`${count} test users created`);
-  },
-});
-
-export const createToast = createAction({
-  name: "Create toast",
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: () => {
-    toast.message("Hello world", {
-      duration: 30000,
-    });
-  },
-});
-
-export const toggleDebugLogging = createAction({
-  name: ({ t }) => t("Toggle debug logging"),
-  icon: <ToolsIcon />,
-  section: DeveloperSection,
-  perform: ({ t }) => {
-    Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    toast.message(
-      Logger.debugLoggingEnabled
-        ? t("Debug logging enabled")
-        : t("Debug logging disabled")
-    );
-  },
-});
-
-export const toggleFeatureFlag = createAction({
-  name: "Toggle feature flag",
-  icon: <BeakerIcon />,
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  children: Object.values(Feature).map((flag) =>
-    createAction({
-      id: `flag-${flag}`,
-      name: flag,
-      selected: () => FeatureFlags.isEnabled(flag),
-      section: DeveloperSection,
-      perform: () => {
-        if (FeatureFlags.isEnabled(flag)) {
-          FeatureFlags.disable(flag);
-          toast.success(`Disabled feature flag: ${flag}`);
-        } else {
-          FeatureFlags.enable(flag);
-          toast.success(`Enabled feature flag: ${flag}`);
-        }
-      },
-    })
-  ),
-});
-
-export const developer = createAction({
-  name: ({ t }) => t("Development"),
-  keywords: "debug",
-  icon: <ToolsIcon />,
-  iconInContextMenu: false,
-  section: DeveloperSection,
-  children: [
-    copyId,
-    toggleDebugLogging,
-    toggleFeatureFlag,
-    createToast,
-    createTestUsers,
-    clearIndexedDB,
-  ],
-});
-
-export const rootDeveloperActions = [developer];

app/actions/definitions/navigation.tsx

@@ -1,238 +0,0 @@
-import {
-  HomeIcon,
-  SearchIcon,
-  ArchiveIcon,
-  TrashIcon,
-  OpenIcon,
-  SettingsIcon,
-  KeyboardIcon,
-  EmailIcon,
-  LogoutIcon,
-  ProfileIcon,
-  BrowserIcon,
-  ShapesIcon,
-  DraftsIcon,
-} from "outline-icons";
-import * as React from "react";
-import { UrlHelper } from "@shared/utils/UrlHelper";
-import { isMac } from "@shared/utils/browser";
-import stores from "~/stores";
-import SearchQuery from "~/models/SearchQuery";
-import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
-import { createAction } from "~/actions";
-import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
-import env from "~/env";
-import Desktop from "~/utils/Desktop";
-import history from "~/utils/history";
-import isCloudHosted from "~/utils/isCloudHosted";
-import {
-  homePath,
-  searchPath,
-  draftsPath,
-  archivePath,
-  trashPath,
-  settingsPath,
-} from "~/utils/routeHelpers";
-
-export const navigateToHome = createAction({
-  name: ({ t }) => t("Home"),
-  analyticsName: "Navigate to home",
-  section: NavigationSection,
-  shortcut: ["d"],
-  icon: <HomeIcon />,
-  perform: () => history.push(homePath()),
-  visible: ({ location }) => location.pathname !== homePath(),
-});
-
-export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
-  createAction({
-    section: RecentSearchesSection,
-    name: searchQuery.query,
-    analyticsName: "Navigate to recent search query",
-    icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery.query)),
-  });
-
-export const navigateToDrafts = createAction({
-  name: ({ t }) => t("Drafts"),
-  analyticsName: "Navigate to drafts",
-  section: NavigationSection,
-  icon: <DraftsIcon />,
-  perform: () => history.push(draftsPath()),
-  visible: ({ location }) => location.pathname !== draftsPath(),
-});
-
-export const navigateToArchive = createAction({
-  name: ({ t }) => t("Archive"),
-  analyticsName: "Navigate to archive",
-  section: NavigationSection,
-  shortcut: ["g", "a"],
-  icon: <ArchiveIcon />,
-  perform: () => history.push(archivePath()),
-  visible: ({ location }) => location.pathname !== archivePath(),
-});
-
-export const navigateToTrash = createAction({
-  name: ({ t }) => t("Trash"),
-  analyticsName: "Navigate to trash",
-  section: NavigationSection,
-  icon: <TrashIcon />,
-  perform: () => history.push(trashPath()),
-  visible: ({ location }) => location.pathname !== trashPath(),
-});
-
-export const navigateToSettings = createAction({
-  name: ({ t }) => t("Settings"),
-  analyticsName: "Navigate to settings",
-  section: NavigationSection,
-  shortcut: ["g", "s"],
-  icon: <SettingsIcon />,
-  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath()),
-});
-
-export const navigateToProfileSettings = createAction({
-  name: ({ t }) => t("Profile"),
-  analyticsName: "Navigate to profile settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ProfileIcon />,
-  perform: () => history.push(settingsPath()),
-});
-
-export const navigateToTemplateSettings = createAction({
-  name: ({ t }) => t("Templates"),
-  analyticsName: "Navigate to template settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ShapesIcon />,
-  perform: () => history.push(settingsPath("templates")),
-});
-
-export const navigateToNotificationSettings = createAction({
-  name: ({ t }) => t("Notifications"),
-  analyticsName: "Navigate to notification settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <EmailIcon />,
-  perform: () => history.push(settingsPath("notifications")),
-});
-
-export const navigateToAccountPreferences = createAction({
-  name: ({ t }) => t("Preferences"),
-  analyticsName: "Navigate to account preferences",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <SettingsIcon />,
-  perform: () => history.push(settingsPath("preferences")),
-});
-
-export const openDocumentation = createAction({
-  name: ({ t }) => t("Documentation"),
-  analyticsName: "Open documentation",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.guide),
-});
-
-export const openAPIDocumentation = createAction({
-  name: ({ t }) => t("API documentation"),
-  analyticsName: "Open API documentation",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.developers),
-});
-
-export const toggleSidebar = createAction({
-  name: ({ t }) => t("Toggle sidebar"),
-  analyticsName: "Toggle sidebar",
-  keywords: "hide show navigation",
-  section: NavigationSection,
-  perform: () => stores.ui.toggleCollapsedSidebar(),
-});
-
-export const openFeedbackUrl = createAction({
-  name: ({ t }) => t("Send us feedback"),
-  analyticsName: "Open feedback",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <EmailIcon />,
-  perform: () => window.open(UrlHelper.contact),
-});
-
-export const openBugReportUrl = createAction({
-  name: ({ t }) => t("Report a bug"),
-  analyticsName: "Open bug report",
-  section: NavigationSection,
-  perform: () => window.open(UrlHelper.github),
-});
-
-export const openChangelog = createAction({
-  name: ({ t }) => t("Changelog"),
-  analyticsName: "Open changelog",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.changelog),
-});
-
-export const openKeyboardShortcuts = createAction({
-  name: ({ t }) => t("Keyboard shortcuts"),
-  analyticsName: "Open keyboard shortcuts",
-  section: NavigationSection,
-  shortcut: ["?"],
-  iconInContextMenu: false,
-  icon: <KeyboardIcon />,
-  perform: ({ t }) => {
-    stores.dialogs.openGuide({
-      title: t("Keyboard shortcuts"),
-      content: <KeyboardShortcuts />,
-    });
-  },
-});
-
-export const downloadApp = createAction({
-  name: ({ t }) =>
-    t("Download {{ platform }} app", {
-      platform: isMac() ? "macOS" : "Windows",
-    }),
-  analyticsName: "Download app",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <BrowserIcon />,
-  visible: () => !Desktop.isElectron() && isMac() && isCloudHosted,
-  perform: () => {
-    window.open("https://desktop.getoutline.com");
-  },
-});
-
-export const logout = createAction({
-  name: ({ t }) => t("Log out"),
-  analyticsName: "Log out",
-  section: NavigationSection,
-  icon: <LogoutIcon />,
-  perform: async () => {
-    await stores.auth.logout();
-    if (env.OIDC_LOGOUT_URI) {
-      window.location.replace(env.OIDC_LOGOUT_URI);
-    }
-  },
-});
-
-export const rootNavigationActions = [
-  navigateToHome,
-  navigateToDrafts,
-  navigateToArchive,
-  navigateToTrash,
-  downloadApp,
-  openDocumentation,
-  openAPIDocumentation,
-  openFeedbackUrl,
-  openBugReportUrl,
-  openChangelog,
-  openKeyboardShortcuts,
-  toggleSidebar,
-  logout,
-];

app/actions/definitions/notifications.tsx

@@ -1,29 +0,0 @@
-import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
-import * as React from "react";
-import { createAction } from "..";
-import { NotificationSection } from "../sections";
-
-export const markNotificationsAsRead = createAction({
-  name: ({ t }) => t("Mark notifications as read"),
-  analyticsName: "Mark notifications as read",
-  section: NotificationSection,
-  icon: <MarkAsReadIcon />,
-  shortcut: ["Shift+Escape"],
-  perform: ({ stores }) => stores.notifications.markAllAsRead(),
-  visible: ({ stores }) => stores.notifications.approximateUnreadCount > 0,
-});
-
-export const markNotificationsAsArchived = createAction({
-  name: ({ t }) => t("Archive all notifications"),
-  analyticsName: "Mark notifications as archived",
-  section: NotificationSection,
-  icon: <ArchiveIcon />,
-  iconInContextMenu: false,
-  perform: ({ stores }) => stores.notifications.markAllAsArchived(),
-  visible: ({ stores }) => stores.notifications.orderedData.length > 0,
-});
-
-export const rootNotificationActions = [
-  markNotificationsAsRead,
-  markNotificationsAsArchived,
-];

app/actions/definitions/revisions.tsx

@@ -1,78 +0,0 @@
-import copy from "copy-to-clipboard";
-import { LinkIcon, RestoreIcon } from "outline-icons";
-import * as React from "react";
-import { matchPath } from "react-router-dom";
-import { toast } from "sonner";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { RevisionSection } from "~/actions/sections";
-import history from "~/utils/history";
-import {
-  documentHistoryPath,
-  matchDocumentHistory,
-} from "~/utils/routeHelpers";
-
-export const restoreRevision = createAction({
-  name: ({ t }) => t("Restore revision"),
-  analyticsName: "Restore revision",
-  icon: <RestoreIcon />,
-  section: RevisionSection,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ event, location, activeDocumentId }) => {
-    event?.preventDefault();
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    history.push(document.url, {
-      restore: true,
-      revisionId,
-    });
-  },
-});
-
-export const copyLinkToRevision = createAction({
-  name: ({ t }) => t("Copy link"),
-  analyticsName: "Copy link to revision",
-  icon: <LinkIcon />,
-  section: RevisionSection,
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    const url = `${window.location.origin}${documentHistoryPath(
-      document,
-      revisionId
-    )}`;
-
-    copy(url, {
-      format: "text/plain",
-      onCopy: () => {
-        toast.message(t("Link copied"));
-      },
-    });
-  },
-});
-
-export const rootRevisionActions = [];

app/actions/definitions/settings.tsx

@@ -1,54 +0,0 @@
-import { SunIcon, MoonIcon, BrowserIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { Theme } from "~/stores/UiStore";
-import { createAction } from "~/actions";
-import { SettingsSection } from "~/actions/sections";
-
-export const changeToDarkTheme = createAction({
-  name: ({ t }) => t("Dark"),
-  analyticsName: "Change to dark theme",
-  icon: <MoonIcon />,
-  iconInContextMenu: false,
-  keywords: "theme dark night",
-  section: SettingsSection,
-  selected: () => stores.ui.theme === "dark",
-  perform: () => stores.ui.setTheme(Theme.Dark),
-});
-
-export const changeToLightTheme = createAction({
-  name: ({ t }) => t("Light"),
-  analyticsName: "Change to light theme",
-  icon: <SunIcon />,
-  iconInContextMenu: false,
-  keywords: "theme light day",
-  section: SettingsSection,
-  selected: () => stores.ui.theme === "light",
-  perform: () => stores.ui.setTheme(Theme.Light),
-});
-
-export const changeToSystemTheme = createAction({
-  name: ({ t }) => t("System"),
-  analyticsName: "Change to system theme",
-  icon: <BrowserIcon />,
-  iconInContextMenu: false,
-  keywords: "theme system default",
-  section: SettingsSection,
-  selected: () => stores.ui.theme === "system",
-  perform: () => stores.ui.setTheme(Theme.System),
-});
-
-export const changeTheme = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Appearance") : t("Change theme"),
-  analyticsName: "Change theme",
-  placeholder: ({ t }) => t("Change theme to"),
-  icon: function _Icon() {
-    return stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />;
-  },
-  keywords: "appearance display",
-  section: SettingsSection,
-  children: [changeToLightTheme, changeToDarkTheme, changeToSystemTheme],
-});
-
-export const rootSettingsActions = [changeTheme];

app/actions/definitions/teams.tsx

@@ -1,94 +0,0 @@
-import { ArrowIcon, PlusIcon } from "outline-icons";
-import * as React from "react";
-import styled from "styled-components";
-import { stringToColor } from "@shared/utils/color";
-import RootStore from "~/stores/RootStore";
-import { LoginDialog } from "~/scenes/Login/components/LoginDialog";
-import TeamNew from "~/scenes/TeamNew";
-import TeamLogo from "~/components/TeamLogo";
-import { createAction } from "~/actions";
-import { ActionContext } from "~/types";
-import Desktop from "~/utils/Desktop";
-import { TeamSection } from "../sections";
-
-export const createTeamsList = ({ stores }: { stores: RootStore }) =>
-  stores.auth.availableTeams?.map((session) => ({
-    id: `switch-${session.id}`,
-    name: session.name,
-    analyticsName: "Switch workspace",
-    section: TeamSection,
-    keywords: "change switch workspace organization team",
-    icon: function _Icon() {
-      return (
-        <StyledTeamLogo
-          alt={session.name}
-          model={{
-            initial: session.name[0],
-            avatarUrl: session.avatarUrl,
-            id: session.id,
-            color: stringToColor(session.id),
-          }}
-          size={24}
-        />
-      );
-    },
-    visible: ({ currentTeamId }: ActionContext) => currentTeamId !== session.id,
-    perform: () => (window.location.href = session.url),
-  })) ?? [];
-
-export const switchTeam = createAction({
-  name: ({ t }) => t("Switch workspace"),
-  placeholder: ({ t }) => t("Select a workspace"),
-  analyticsName: "Switch workspace",
-  keywords: "change switch workspace organization team",
-  section: TeamSection,
-  visible: ({ stores }) =>
-    !!stores.auth.availableTeams && stores.auth.availableTeams?.length > 1,
-  children: createTeamsList,
-});
-
-export const createTeam = createAction({
-  name: ({ t }) => `${t("New workspace")}…`,
-  analyticsName: "New workspace",
-  keywords: "create change switch workspace organization team",
-  section: TeamSection,
-  icon: <PlusIcon />,
-  visible: ({ stores, currentTeamId }) =>
-    stores.policies.abilities(currentTeamId ?? "").createTeam,
-  perform: ({ t, event, stores }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    const { user } = stores.auth;
-    user &&
-      stores.dialogs.openModal({
-        title: t("Create a workspace"),
-        fullscreen: true,
-        content: <TeamNew user={user} />,
-      });
-  },
-});
-
-export const desktopLoginTeam = createAction({
-  name: ({ t }) => t("Login to workspace"),
-  analyticsName: "Login to workspace",
-  keywords: "change switch workspace organization team",
-  section: TeamSection,
-  icon: <ArrowIcon />,
-  visible: () => Desktop.isElectron(),
-  perform: ({ t, event, stores }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    stores.dialogs.openModal({
-      title: t("Login to workspace"),
-      content: <LoginDialog />,
-    });
-  },
-});
-
-const StyledTeamLogo = styled(TeamLogo)`
-  border-radius: 2px;
-  border: 0;
-`;
-
-export const rootTeamActions = [switchTeam, createTeam, desktopLoginTeam];

app/actions/definitions/users.tsx

@@ -1,92 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import { UserRole } from "@shared/types";
-import { UserRoleHelper } from "@shared/utils/UserRoleHelper";
-import stores from "~/stores";
-import User from "~/models/User";
-import Invite from "~/scenes/Invite";
-import {
-  UserChangeRoleDialog,
-  UserDeleteDialog,
-} from "~/components/UserDialogs";
-import { createAction } from "~/actions";
-import { UserSection } from "~/actions/sections";
-
-export const inviteUser = createAction({
-  name: ({ t }) => `${t("Invite people")}…`,
-  analyticsName: "Invite people",
-  icon: <PlusIcon />,
-  keywords: "team member workspace user",
-  section: UserSection,
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
-  perform: ({ t }) => {
-    stores.dialogs.openModal({
-      title: t("Invite to workspace"),
-      content: <Invite onSubmit={stores.dialogs.closeAllModals} />,
-    });
-  },
-});
-
-export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
-  createAction({
-    name: ({ t }) =>
-      UserRoleHelper.isRoleHigher(role, user!.role)
-        ? `${t("Promote to {{ role }}", {
-            role: UserRoleHelper.displayName(role, t),
-          })}…`
-        : `${t("Demote to {{ role }}", {
-            role: UserRoleHelper.displayName(role, t),
-          })}…`,
-    analyticsName: "Update user role",
-    section: UserSection,
-    visible: ({ stores }) => {
-      const can = stores.policies.abilities(user.id);
-
-      return UserRoleHelper.isRoleHigher(role, user.role)
-        ? can.promote
-        : UserRoleHelper.isRoleLower(role, user.role)
-        ? can.demote
-        : false;
-    },
-    perform: ({ t }) => {
-      stores.dialogs.openModal({
-        title: t("Update role"),
-        content: (
-          <UserChangeRoleDialog
-            user={user}
-            role={role}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    },
-  });
-
-export const deleteUserActionFactory = (userId: string) =>
-  createAction({
-    name: ({ t }) => `${t("Delete user")}…`,
-    analyticsName: "Delete user",
-    keywords: "leave",
-    dangerous: true,
-    section: UserSection,
-    visible: ({ stores }) => stores.policies.abilities(userId).delete,
-    perform: ({ t }) => {
-      const user = stores.users.get(userId);
-      if (!user) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Delete user"),
-        content: (
-          <UserDeleteDialog
-            user={user}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    },
-  });
-
-export const rootUserActions = [inviteUser];

app/actions/index.ts

@@ -1,131 +0,0 @@
-import flattenDeep from "lodash/flattenDeep";
-import * as React from "react";
-import { toast } from "sonner";
-import { Optional } from "utility-types";
-import { v4 as uuidv4 } from "uuid";
-import {
-  Action,
-  ActionContext,
-  CommandBarAction,
-  MenuItemButton,
-  MenuItemWithChildren,
-} from "~/types";
-import Analytics from "~/utils/Analytics";
-
-function resolve<T>(value: any, context: ActionContext): T {
-  return typeof value === "function" ? value(context) : value;
-}
-
-export function createAction(definition: Optional<Action, "id">): Action {
-  return {
-    ...definition,
-    perform: definition.perform
-      ? (context) => {
-          // We muse use the specific analytics name here as the action name is
-          // translated and potentially contains user strings.
-          if (definition.analyticsName) {
-            Analytics.track("perform_action", definition.analyticsName, {
-              context: context.isButton
-                ? "button"
-                : context.isCommandBar
-                ? "commandbar"
-                : "contextmenu",
-            });
-          }
-
-          return definition.perform?.(context);
-        }
-      : undefined,
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function actionToMenuItem(
-  action: Action,
-  context: ActionContext
-): MenuItemButton | MenuItemWithChildren {
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon, context);
-  const resolvedChildren = resolve<Action[]>(action.children, context);
-  const visible = action.visible ? action.visible(context) : true;
-  const title = resolve<string>(action.name, context);
-  const icon =
-    resolvedIcon && action.iconInContextMenu !== false
-      ? resolvedIcon
-      : undefined;
-
-  if (resolvedChildren) {
-    const items = resolvedChildren
-      .map((a) => actionToMenuItem(a, context))
-      .filter(Boolean)
-      .filter((a) => a.visible);
-
-    return {
-      type: "submenu",
-      title,
-      icon,
-      items,
-      visible: visible && items.length > 0,
-    };
-  }
-
-  return {
-    type: "button",
-    title,
-    icon,
-    visible,
-    dangerous: action.dangerous,
-    onClick: () => performAction(action, context),
-    selected: action.selected?.(context),
-  };
-}
-
-export function actionToKBar(
-  action: Action,
-  context: ActionContext
-): CommandBarAction[] {
-  if (typeof action.visible === "function" && !action.visible(context)) {
-    return [];
-  }
-
-  const resolvedIcon = resolve<React.ReactElement>(action.icon, context);
-  const resolvedChildren = resolve<Action[]>(action.children, context);
-  const resolvedSection = resolve<string>(action.section, context);
-  const resolvedName = resolve<string>(action.name, context);
-  const resolvedPlaceholder = resolve<string>(action.placeholder, context);
-  const children = resolvedChildren
-    ? flattenDeep(resolvedChildren.map((a) => actionToKBar(a, context))).filter(
-        (a) => !!a
-      )
-    : [];
-
-  return [
-    {
-      id: action.id,
-      name: resolvedName,
-      analyticsName: action.analyticsName,
-      section: resolvedSection,
-      placeholder: resolvedPlaceholder,
-      keywords: action.keywords ?? "",
-      shortcut: action.shortcut || [],
-      icon: resolvedIcon,
-      perform: action.perform
-        ? () => performAction(action, context)
-        : undefined,
-    },
-  ].concat(
-    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-    children.map((child) => ({ ...child, parent: child.parent ?? action.id }))
-  );
-}
-
-export async function performAction(action: Action, context: ActionContext) {
-  const result = action.perform?.(context);
-
-  if (result instanceof Promise) {
-    return result.catch((err: Error) => {
-      toast.error(err.message);
-    });
-  }
-
-  return result;
-}

app/actions/root.ts

@@ -1,21 +0,0 @@
-import { rootCollectionActions } from "./definitions/collections";
-import { rootDeveloperActions } from "./definitions/developer";
-import { rootDocumentActions } from "./definitions/documents";
-import { rootNavigationActions } from "./definitions/navigation";
-import { rootNotificationActions } from "./definitions/notifications";
-import { rootRevisionActions } from "./definitions/revisions";
-import { rootSettingsActions } from "./definitions/settings";
-import { rootTeamActions } from "./definitions/teams";
-import { rootUserActions } from "./definitions/users";
-
-export default [
-  ...rootCollectionActions,
-  ...rootDocumentActions,
-  ...rootUserActions,
-  ...rootNavigationActions,
-  ...rootNotificationActions,
-  ...rootRevisionActions,
-  ...rootSettingsActions,
-  ...rootDeveloperActions,
-  ...rootTeamActions,
-];

app/actions/sections.ts

@@ -1,24 +0,0 @@
-import { ActionContext } from "~/types";
-
-export const CollectionSection = ({ t }: ActionContext) => t("Collection");
-
-export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
-
-export const DocumentSection = ({ t }: ActionContext) => t("Document");
-
-export const RevisionSection = ({ t }: ActionContext) => t("Revision");
-
-export const SettingsSection = ({ t }: ActionContext) => t("Settings");
-
-export const NavigationSection = ({ t }: ActionContext) => t("Navigation");
-
-export const NotificationSection = ({ t }: ActionContext) => t("Notification");
-
-export const UserSection = ({ t }: ActionContext) => t("People");
-
-export const TeamSection = ({ t }: ActionContext) => t("Workspace");
-
-export const RecentSearchesSection = ({ t }: ActionContext) =>
-  t("Recent searches");
-
-export const TrashSection = ({ t }: ActionContext) => t("Trash");

app/components/ActionButton.tsx

@@ -1,89 +0,0 @@
-/* eslint-disable react/prop-types */
-import * as React from "react";
-import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
-import { performAction } from "~/actions";
-import useIsMounted from "~/hooks/useIsMounted";
-import { Action, ActionContext } from "~/types";
-
-export type Props = React.HTMLAttributes<HTMLButtonElement> & {
-  /** Show the button in a disabled state */
-  disabled?: boolean;
-  /** Hide the button entirely if action is not applicable */
-  hideOnActionDisabled?: boolean;
-  /** Action to use on button */
-  action?: Action;
-  /** Context of action, must be provided with action */
-  context?: ActionContext;
-  /** If tooltip props are provided the button will be wrapped in a tooltip */
-  tooltip?: Omit<TooltipProps, "children">;
-};
-
-/**
- * Button that can be used to trigger an action definition.
- */
-const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
-  function _ActionButton(
-    { action, context, tooltip, hideOnActionDisabled, ...rest }: Props,
-    ref: React.Ref<HTMLButtonElement>
-  ) {
-    const isMounted = useIsMounted();
-    const [executing, setExecuting] = React.useState(false);
-    const disabled = rest.disabled;
-
-    if (action && !context) {
-      throw new Error("Context must be provided with action");
-    }
-    if (!context || !action) {
-      return <button {...rest} ref={ref} />;
-    }
-
-    const actionContext = { ...context, isButton: true };
-
-    if (
-      action?.visible &&
-      !action.visible(actionContext) &&
-      hideOnActionDisabled
-    ) {
-      return null;
-    }
-
-    const label =
-      typeof action.name === "function"
-        ? action.name(actionContext)
-        : action.name;
-
-    const button = (
-      <button
-        {...rest}
-        aria-label={label}
-        disabled={disabled || executing}
-        ref={ref}
-        onClick={
-          action?.perform && actionContext
-            ? (ev) => {
-                ev.preventDefault();
-                ev.stopPropagation();
-                const response = performAction(action, actionContext);
-                if (response?.finally) {
-                  setExecuting(true);
-                  void response.finally(
-                    () => isMounted() && setExecuting(false)
-                  );
-                }
-              }
-            : rest.onClick
-        }
-      >
-        {rest.children ?? label}
-      </button>
-    );
-
-    if (tooltip) {
-      return <Tooltip {...tooltip}>{button}</Tooltip>;
-    }
-
-    return button;
-  }
-);
-
-export default ActionButton;

app/components/Actions.js

@@ -0,0 +1,48 @@
+// @flow
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Flex from "components/Flex";
+
+export const Action = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+  padding: 0 0 0 12px;
+  height: 32px;
+  font-size: 15px;
+  flex-shrink: 0;
+
+  &:empty {
+    display: none;
+  }
+`;
+
+export const Separator = styled.div`
+  flex-shrink: 0;
+  margin-left: 12px;
+  width: 1px;
+  height: 28px;
+  background: ${(props) => props.theme.divider};
+`;
+
+const Actions = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  border-radius: 3px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  padding: 12px;
+  backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    left: auto;
+    padding: 24px;
+  `};
+`;
+
+export default Actions;

app/components/Actions.ts

@@ -1,48 +0,0 @@
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
-import Flex from "~/components/Flex";
-
-export const Action = styled(Flex)`
-  justify-content: center;
-  align-items: center;
-  padding: 0 0 0 12px;
-  height: 32px;
-  font-size: 15px;
-  flex-shrink: 0;
-
-  &:empty {
-    display: none;
-  }
-`;
-
-export const Separator = styled.div`
-  flex-shrink: 0;
-  margin-left: 12px;
-  width: 1px;
-  height: 28px;
-  background: ${s("divider")};
-`;
-
-const Actions = styled(Flex)`
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  border-radius: 3px;
-  background: ${s("background")};
-  transition: ${s("backgroundTransition")};
-  padding: 12px;
-  backdrop-filter: blur(20px);
-
-  @media print {
-    display: none;
-  }
-
-  ${breakpoint("tablet")`
-    left: auto;
-    padding: 24px;
-  `};
-`;
-
-export default Actions;

app/components/Analytics.js

@@ -0,0 +1,47 @@
+// @flow
+/* global ga */
+import * as React from "react";
+import env from "env";
+
+type Props = {
+  children?: React.Node,
+};
+
+export default class Analytics extends React.Component<Props> {
+  componentDidMount() {
+    if (!env.GOOGLE_ANALYTICS_ID) {
+      return null;
+    }
+
+    // standard Google Analytics script
+    window.ga =
+      window.ga ||
+      function () {
+        // $FlowIssue
+        (ga.q = ga.q || []).push(arguments);
+      };
+
+    // $FlowIssue
+    ga.l = +new Date();
+    ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
+    ga("set", { dimension1: "true" });
+    ga("send", "pageview");
+
+    const script = document.createElement("script");
+    script.src = "https://www.google-analytics.com/analytics.js";
+    script.async = true;
+
+    // Track PWA install event
+    window.addEventListener("appinstalled", () => {
+      ga("send", "event", "pwa", "install");
+    });
+
+    if (document.body) {
+      document.body.appendChild(script);
+    }
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}

app/components/Analytics.tsx

@@ -1,112 +0,0 @@
-/* eslint-disable prefer-rest-params */
-/* global ga */
-import escape from "lodash/escape";
-import * as React from "react";
-import { IntegrationService, PublicEnv } from "@shared/types";
-import env from "~/env";
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-// TODO: Refactor this component to allow injection from plugins
-const Analytics: React.FC = ({ children }: Props) => {
-  // Google Analytics 3
-  React.useEffect(() => {
-    if (!env.GOOGLE_ANALYTICS_ID?.startsWith("UA-")) {
-      return;
-    }
-
-    // standard Google Analytics script
-    window.ga =
-      window.ga ||
-      function (...args) {
-        (ga.q = ga.q || []).push(args);
-      };
-
-    ga.l = +new Date();
-    ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
-    ga("send", "pageview");
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = "https://www.google-analytics.com/analytics.js";
-    script.async = true;
-
-    // Track PWA install event
-    window.addEventListener("appinstalled", () => {
-      ga("send", "event", "pwa", "install");
-    });
-
-    document.getElementsByTagName("head")[0]?.appendChild(script);
-  }, []);
-
-  // Google Analytics 4
-  React.useEffect(() => {
-    const measurementIds = [];
-
-    if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
-      measurementIds.push(env.GOOGLE_ANALYTICS_ID);
-    }
-
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service === IntegrationService.GoogleAnalytics) {
-        measurementIds.push(escape(integration.settings?.measurementId));
-      }
-    });
-
-    if (measurementIds.length === 0) {
-      return;
-    }
-
-    const params = {
-      allow_google_signals: false,
-      restricted_data_processing: true,
-    };
-
-    window.dataLayer = window.dataLayer || [];
-    window.gtag = function () {
-      window.dataLayer.push(arguments);
-    };
-    window.gtag("js", new Date());
-
-    for (const measurementId of measurementIds) {
-      window.gtag("config", measurementId, params);
-    }
-
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementIds[0]}`;
-    script.async = true;
-    document.getElementsByTagName("head")[0]?.appendChild(script);
-  }, []);
-
-  // Matomo
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Matomo) {
-        return;
-      }
-
-      // @ts-expect-error - Matomo global variable
-      const _paq = (window._paq = window._paq || []);
-      _paq.push(["trackPageView"]);
-      _paq.push(["enableLinkTracking"]);
-      (function () {
-        const u = integration.settings?.instanceUrl;
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
-        _paq.push(["setSiteId", integration.settings?.measurementId]);
-        const d = document,
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
-        g.type = "text/javascript";
-        g.async = true;
-        g.src = u + "matomo.js";
-        s.parentNode?.insertBefore(g, s);
-      })();
-    });
-  }, []);
-
-  return <>{children}</>;
-};
-
-export default Analytics;

app/components/Arrow.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+
+export default function Arrow() {
+  return (
+    <svg
+      width="13"
+      height="30"
+      viewBox="0 0 13 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
+      />
+      <path
+        fill="currentColor"
+        d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
+      />
+    </svg>
+  );
+}

app/components/Arrow.tsx

@@ -1,16 +0,0 @@
-import * as React from "react";
-
-export default function Arrow() {
-  return (
-    <svg
-      width="13"
-      height="30"
-      viewBox="0 0 13 30"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
-      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
-    </svg>
-  );
-}

app/components/ArrowKeyNavigation.tsx

@@ -1,47 +0,0 @@
-import { RovingTabIndexProvider } from "@getoutline/react-roving-tabindex";
-import { observer } from "mobx-react";
-import * as React from "react";
-
-type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: () => React.ReactNode;
-  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-};
-
-function ArrowKeyNavigation(
-  { children, onEscape, ...rest }: Props,
-  ref: React.RefObject<HTMLDivElement>
-) {
-  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent<HTMLDivElement>) => {
-      if (onEscape) {
-        if (ev.nativeEvent.isComposing) {
-          return;
-        }
-
-        if (ev.key === "Escape") {
-          ev.preventDefault();
-          onEscape(ev);
-        }
-
-        if (
-          ev.key === "ArrowUp" &&
-          // If the first item is focused and the user presses ArrowUp
-          ev.currentTarget.firstElementChild === document.activeElement
-        ) {
-          onEscape(ev);
-        }
-      }
-    },
-    [onEscape]
-  );
-
-  return (
-    <RovingTabIndexProvider options={{ focusOnClick: true, direction: "both" }}>
-      <div {...rest} onKeyDown={handleKeyDown} ref={ref}>
-        {children()}
-      </div>
-    </RovingTabIndexProvider>
-  );
-}
-
-export default observer(React.forwardRef(ArrowKeyNavigation));

app/components/AuthLogo/GoogleLogo.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function GoogleLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g>
+        <path d="M32.6162791,13.9090909 L16.8837209,13.9090909 L16.8837209,20.4772727 L25.9395349,20.4772727 C25.0953488,24.65 21.5651163,27.0454545 16.8837209,27.0454545 C11.3581395,27.0454545 6.90697674,22.5636364 6.90697674,17 C6.90697674,11.4363636 11.3581395,6.95454545 16.8837209,6.95454545 C19.2627907,6.95454545 21.4116279,7.80454545 23.1,9.19545455 L28.0116279,4.25 C25.0186047,1.62272727 21.1813953,0 16.8837209,0 C7.52093023,0 0,7.57272727 0,17 C0,26.4272727 7.52093023,34 16.8837209,34 C25.3255814,34 33,27.8181818 33,17 C33,15.9954545 32.8465116,14.9136364 32.6162791,13.9090909 Z" />
+      </g>
+    </svg>
+  );
+}
+
+export default GoogleLogo;

app/components/AuthLogo/MicrosoftLogo.js

@@ -0,0 +1,44 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function MicrosoftLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0002 1H33.9998C33.9998 5.8172 34.0007 10.6344 33.9988 15.4516C28.6666 15.4508 23.3334 15.4516 18.0012 15.4516C17.9993 10.6344 18.0002 5.8172 18.0002 1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0009 17.5173C23.3333 17.5155 28.6667 17.5164 34 17.5164V33H18C18.0009 27.8388 17.9991 22.6776 18.0009 17.5173V17.5173Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 1H16L15.9988 15.4516H0V1Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 17.5161C5.3332 17.5179 10.6664 17.5155 15.9996 17.5179C16.0005 22.6789 15.9996 27.839 15.9996 33H0V17.5161Z"
+      />
+    </svg>
+  );
+}
+
+export default MicrosoftLogo;

app/components/AuthLogo/SlackLogo.js

@@ -0,0 +1,42 @@
+// @flow
+import * as React from "react";
+
+type Props = {
+  size?: number,
+  fill?: string,
+  className?: string,
+};
+
+function SlackLogo({ size = 34, fill = "#FFF", className }: Props) {
+  return (
+    <svg
+      fill={fill}
+      width={size}
+      height={size}
+      viewBox="0 0 34 34"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g stroke="none" strokeWidth="1" fillRule="evenodd">
+        <g transform="translate(0.000000, 17.822581)">
+          <path d="M7.23870968,3.61935484 C7.23870968,5.56612903 5.6483871,7.15645161 3.7016129,7.15645161 C1.75483871,7.15645161 0.164516129,5.56612903 0.164516129,3.61935484 C0.164516129,1.67258065 1.75483871,0.0822580645 3.7016129,0.0822580645 L7.23870968,0.0822580645 L7.23870968,3.61935484 Z" />
+          <path d="M9.02096774,3.61935484 C9.02096774,1.67258065 10.6112903,0.0822580645 12.5580645,0.0822580645 C14.5048387,0.0822580645 16.0951613,1.67258065 16.0951613,3.61935484 L16.0951613,12.4758065 C16.0951613,14.4225806 14.5048387,16.0129032 12.5580645,16.0129032 C10.6112903,16.0129032 9.02096774,14.4225806 9.02096774,12.4758065 C9.02096774,12.4758065 9.02096774,3.61935484 9.02096774,3.61935484 Z" />
+        </g>
+        <g>
+          <path d="M12.5580645,7.23870968 C10.6112903,7.23870968 9.02096774,5.6483871 9.02096774,3.7016129 C9.02096774,1.75483871 10.6112903,0.164516129 12.5580645,0.164516129 C14.5048387,0.164516129 16.0951613,1.75483871 16.0951613,3.7016129 L16.0951613,7.23870968 L12.5580645,7.23870968 Z" />
+          <path d="M12.5580645,9.02096774 C14.5048387,9.02096774 16.0951613,10.6112903 16.0951613,12.5580645 C16.0951613,14.5048387 14.5048387,16.0951613 12.5580645,16.0951613 L3.7016129,16.0951613 C1.75483871,16.0951613 0.164516129,14.5048387 0.164516129,12.5580645 C0.164516129,10.6112903 1.75483871,9.02096774 3.7016129,9.02096774 C3.7016129,9.02096774 12.5580645,9.02096774 12.5580645,9.02096774 Z" />
+        </g>
+        <g transform="translate(17.822581, 0.000000)">
+          <path d="M8.93870968,12.5580645 C8.93870968,10.6112903 10.5290323,9.02096774 12.4758065,9.02096774 C14.4225806,9.02096774 16.0129032,10.6112903 16.0129032,12.5580645 C16.0129032,14.5048387 14.4225806,16.0951613 12.4758065,16.0951613 L8.93870968,16.0951613 L8.93870968,12.5580645 Z" />
+          <path d="M7.15645161,12.5580645 C7.15645161,14.5048387 5.56612903,16.0951613 3.61935484,16.0951613 C1.67258065,16.0951613 0.0822580645,14.5048387 0.0822580645,12.5580645 L0.0822580645,3.7016129 C0.0822580645,1.75483871 1.67258065,0.164516129 3.61935484,0.164516129 C5.56612903,0.164516129 7.15645161,1.75483871 7.15645161,3.7016129 L7.15645161,12.5580645 Z" />
+        </g>
+        <g transform="translate(17.822581, 17.822581)">
+          <path d="M3.61935484,8.93870968 C5.56612903,8.93870968 7.15645161,10.5290323 7.15645161,12.4758065 C7.15645161,14.4225806 5.56612903,16.0129032 3.61935484,16.0129032 C1.67258065,16.0129032 0.0822580645,14.4225806 0.0822580645,12.4758065 L0.0822580645,8.93870968 L3.61935484,8.93870968 Z" />
+          <path d="M3.61935484,7.15645161 C1.67258065,7.15645161 0.0822580645,5.56612903 0.0822580645,3.61935484 C0.0822580645,1.67258065 1.67258065,0.0822580645 3.61935484,0.0822580645 L12.4758065,0.0822580645 C14.4225806,0.0822580645 16.0129032,1.67258065 16.0129032,3.61935484 C16.0129032,5.56612903 14.4225806,7.15645161 12.4758065,7.15645161 L3.61935484,7.15645161 Z" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SlackLogo;

app/components/AuthLogo/index.js

@@ -0,0 +1,46 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import GoogleLogo from "./GoogleLogo";
+import MicrosoftLogo from "./MicrosoftLogo";
+import SlackLogo from "./SlackLogo";
+
+type Props = {|
+  providerName: string,
+  size?: number,
+|};
+
+function AuthLogo({ providerName, size = 16 }: Props) {
+  switch (providerName) {
+    case "slack":
+      return (
+        <Logo>
+          <SlackLogo size={size} />
+        </Logo>
+      );
+    case "google":
+      return (
+        <Logo>
+          <GoogleLogo size={size} />
+        </Logo>
+      );
+    case "azure":
+      return (
+        <Logo>
+          <MicrosoftLogo size={size} />
+        </Logo>
+      );
+    default:
+      return null;
+  }
+}
+
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+`;
+
+export default AuthLogo;

app/components/Authenticated.js

@@ -0,0 +1,62 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Redirect } from "react-router-dom";
+import { isCustomSubdomain } from "shared/utils/domains";
+import LoadingIndicator from "components/LoadingIndicator";
+import useStores from "../hooks/useStores";
+import env from "env";
+
+type Props = {
+  children: React.Node,
+};
+
+const Authenticated = ({ children }: Props) => {
+  const { auth } = useStores();
+  const { i18n } = useTranslation();
+  const language = auth.user && auth.user.language;
+
+  // Watching for language changes here as this is the earliest point we have
+  // the user available and means we can start loading translations faster
+  React.useEffect(() => {
+    if (language && i18n.language !== language) {
+      // Languages are stored in en_US format in the database, however the
+      // frontend translation framework (i18next) expects en-US
+      i18n.changeLanguage(language.replace("_", "-"));
+    }
+  }, [i18n, language]);
+
+  if (auth.authenticated) {
+    const { user, team } = auth;
+    const { hostname } = window.location;
+
+    if (!team || !user) {
+      return <LoadingIndicator />;
+    }
+
+    // If we're authenticated but viewing a domain that doesn't match the
+    // current team then kick the user to the teams correct domain.
+    if (team.domain) {
+      if (team.domain !== hostname) {
+        window.location.href = `${team.url}${window.location.pathname}`;
+        return <LoadingIndicator />;
+      }
+    } else if (
+      env.SUBDOMAINS_ENABLED &&
+      team.subdomain &&
+      isCustomSubdomain(hostname) &&
+      !hostname.startsWith(`${team.subdomain}.`)
+    ) {
+      window.location.href = `${team.url}${window.location.pathname}`;
+      return <LoadingIndicator />;
+    }
+
+    return children;
+  }
+
+  auth.logout(true);
+  return <Redirect to="/" />;
+};
+
+export default observer(Authenticated);

app/components/Authenticated.tsx

@@ -1,38 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { Redirect } from "react-router-dom";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-import { changeLanguage } from "~/utils/language";
-import LoadingIndicator from "./LoadingIndicator";
-
-type Props = {
-  children: JSX.Element;
-};
-
-const Authenticated = ({ children }: Props) => {
-  const { auth } = useStores();
-  const { i18n } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const language = user?.language;
-
-  // Watching for language changes here as this is the earliest point we might have the user
-  // available and means we can start loading translations faster
-  React.useEffect(() => {
-    void changeLanguage(language, i18n);
-  }, [i18n, language]);
-
-  if (auth.authenticated) {
-    return children;
-  }
-
-  if (auth.isFetching) {
-    return <LoadingIndicator />;
-  }
-
-  void auth.logout(true);
-  return <Redirect to="/" />;
-};
-
-export default observer(Authenticated);

app/components/AuthenticatedLayout.tsx

@@ -1,149 +0,0 @@
-import { AnimatePresence } from "framer-motion";
-import { observer, useLocalStore } from "mobx-react";
-import * as React from "react";
-import { Switch, Route, useLocation, matchPath } from "react-router-dom";
-import { TeamPreference } from "@shared/types";
-import ErrorSuspended from "~/scenes/ErrorSuspended";
-import DocumentContext from "~/components/DocumentContext";
-import type { DocumentContextValue } from "~/components/DocumentContext";
-import Layout from "~/components/Layout";
-import RegisterKeyDown from "~/components/RegisterKeyDown";
-import Sidebar from "~/components/Sidebar";
-import SidebarRight from "~/components/Sidebar/Right";
-import SettingsSidebar from "~/components/Sidebar/Settings";
-import type { Editor as TEditor } from "~/editor";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import lazyWithRetry from "~/utils/lazyWithRetry";
-import {
-  searchPath,
-  newDocumentPath,
-  settingsPath,
-  matchDocumentHistory,
-  matchDocumentSlug as slug,
-  matchDocumentInsights,
-} from "~/utils/routeHelpers";
-import Fade from "./Fade";
-import { PortalContext } from "./Portal";
-
-const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments")
-);
-const DocumentHistory = lazyWithRetry(
-  () => import("~/scenes/Document/components/History")
-);
-const DocumentInsights = lazyWithRetry(
-  () => import("~/scenes/Document/components/Insights")
-);
-const CommandBar = lazyWithRetry(() => import("~/components/CommandBar"));
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-const AuthenticatedLayout: React.FC = ({ children }: Props) => {
-  const { ui, auth } = useStores();
-  const location = useLocation();
-  const layoutRef = React.useRef<HTMLDivElement>(null);
-  const can = usePolicy(ui.activeDocumentId);
-  const canCollection = usePolicy(ui.activeCollectionId);
-  const team = useCurrentTeam();
-  const documentContext = useLocalStore<DocumentContextValue>(() => ({
-    editor: null,
-    setEditor: (editor: TEditor) => {
-      documentContext.editor = editor;
-    },
-  }));
-
-  const goToSearch = (ev: KeyboardEvent) => {
-    if (!ev.metaKey && !ev.ctrlKey) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      history.push(searchPath());
-    }
-  };
-
-  const goToNewDocument = (event: KeyboardEvent) => {
-    if (event.metaKey || event.altKey) {
-      return;
-    }
-    const { activeCollectionId } = ui;
-    if (!activeCollectionId || !canCollection.createDocument) {
-      return;
-    }
-    history.push(newDocumentPath(activeCollectionId));
-  };
-
-  if (auth.isSuspended) {
-    return <ErrorSuspended />;
-  }
-
-  const sidebar = (
-    <Fade>
-      <Switch>
-        <Route path={settingsPath()} component={SettingsSidebar} />
-        <Route component={Sidebar} />
-      </Switch>
-    </Fade>
-  );
-
-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showInsights =
-    !!matchPath(location.pathname, {
-      path: matchDocumentInsights,
-    }) && can.listViews;
-  const showComments =
-    !showInsights &&
-    !showHistory &&
-    can.comment &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team.getPreference(TeamPreference.Commenting);
-
-  const sidebarRight = (
-    <AnimatePresence
-      initial={false}
-      key={ui.activeDocumentId ? "active" : "inactive"}
-    >
-      {(showHistory || showInsights || showComments) && (
-        <Route path={`/doc/${slug}`}>
-          <SidebarRight>
-            <React.Suspense fallback={null}>
-              {showHistory && <DocumentHistory />}
-              {showInsights && <DocumentInsights />}
-              {showComments && <DocumentComments />}
-            </React.Suspense>
-          </SidebarRight>
-        </Route>
-      )}
-    </AnimatePresence>
-  );
-
-  return (
-    <DocumentContext.Provider value={documentContext}>
-      <PortalContext.Provider value={layoutRef.current}>
-        <Layout
-          title={team.name}
-          sidebar={sidebar}
-          sidebarRight={sidebarRight}
-          ref={layoutRef}
-        >
-          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-          <RegisterKeyDown trigger="t" handler={goToSearch} />
-          <RegisterKeyDown trigger="/" handler={goToSearch} />
-          {children}
-          <React.Suspense fallback={null}>
-            <CommandBar />
-          </React.Suspense>
-        </Layout>
-      </PortalContext.Provider>
-    </DocumentContext.Provider>
-  );
-};
-
-export default observer(AuthenticatedLayout);

app/components/Avatar/Avatar.js

@@ -0,0 +1,71 @@
+// @flow
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import styled from "styled-components";
+import User from "models/User";
+import placeholder from "./placeholder.png";
+
+type Props = {|
+  src: string,
+  size: number,
+  icon?: React.Node,
+  user?: User,
+  onClick?: () => void,
+  className?: string,
+|};
+
+@observer
+class Avatar extends React.Component<Props> {
+  @observable error: boolean;
+
+  static defaultProps = {
+    size: 24,
+  };
+
+  handleError = () => {
+    this.error = true;
+  };
+
+  render() {
+    const { src, icon, ...rest } = this.props;
+
+    return (
+      <AvatarWrapper>
+        <CircleImg
+          onError={this.handleError}
+          src={this.error ? placeholder : src}
+          {...rest}
+        />
+        {icon && <IconWrapper>{icon}</IconWrapper>}
+      </AvatarWrapper>
+    );
+  }
+}
+
+const AvatarWrapper = styled.div`
+  position: relative;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  background: ${(props) => props.theme.primary};
+  border: 2px solid ${(props) => props.theme.background};
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+`;
+
+const CircleImg = styled.img`
+  display: block;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 50%;
+  border: 2px solid ${(props) => props.theme.background};
+  flex-shrink: 0;
+`;
+
+export default Avatar;

app/components/Avatar/Avatar.tsx

@@ -1,81 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import useBoolean from "~/hooks/useBoolean";
-import Initials from "./Initials";
-
-export enum AvatarSize {
-  Small = 16,
-  Toast = 18,
-  Medium = 24,
-  Large = 32,
-  XLarge = 48,
-  XXLarge = 64,
-}
-
-export interface IAvatar {
-  avatarUrl: string | null;
-  color?: string;
-  initial?: string;
-  id?: string;
-}
-
-type Props = {
-  size: AvatarSize;
-  src?: string;
-  model?: IAvatar;
-  alt?: string;
-  showBorder?: boolean;
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-function Avatar(props: Props) {
-  const { showBorder, model, style, ...rest } = props;
-  const src = props.src || model?.avatarUrl;
-  const [error, handleError] = useBoolean(false);
-
-  return (
-    <Relative style={style}>
-      {src && !error ? (
-        <CircleImg
-          onError={handleError}
-          src={src}
-          $showBorder={showBorder}
-          {...rest}
-        />
-      ) : model ? (
-        <Initials color={model.color} $showBorder={showBorder} {...rest}>
-          {model.initial}
-        </Initials>
-      ) : (
-        <Initials $showBorder={showBorder} {...rest} />
-      )}
-    </Relative>
-  );
-}
-
-Avatar.defaultProps = {
-  size: AvatarSize.Medium,
-};
-
-const Relative = styled.div`
-  position: relative;
-  user-select: none;
-  flex-shrink: 0;
-`;
-
-const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
-  display: block;
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  border-radius: 50%;
-  border: ${(props) =>
-    props.$showBorder === false
-      ? "none"
-      : `2px solid ${props.theme.background}`};
-  flex-shrink: 0;
-  overflow: hidden;
-`;
-
-export default Avatar;

app/components/Avatar/AvatarWithPresence.js

@@ -0,0 +1,91 @@
+// @flow
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { EditIcon } from "outline-icons";
+import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
+import styled from "styled-components";
+import User from "models/User";
+import UserProfile from "scenes/UserProfile";
+import Avatar from "components/Avatar";
+import Tooltip from "components/Tooltip";
+
+type Props = {
+  user: User,
+  isPresent: boolean,
+  isEditing: boolean,
+  isCurrentUser: boolean,
+  profileOnClick: boolean,
+  t: TFunction,
+};
+
+@observer
+class AvatarWithPresence extends React.Component<Props> {
+  @observable isOpen: boolean = false;
+
+  handleOpenProfile = () => {
+    this.isOpen = true;
+  };
+
+  handleCloseProfile = () => {
+    this.isOpen = false;
+  };
+
+  render() {
+    const { user, isPresent, isEditing, isCurrentUser, t } = this.props;
+
+    const action = isPresent
+      ? isEditing
+        ? t("currently editing")
+        : t("currently viewing")
+      : t("previously edited");
+
+    return (
+      <>
+        <Tooltip
+          tooltip={
+            <Centered>
+              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
+              {action && (
+                <>
+                  <br />
+                  {action}
+                </>
+              )}
+            </Centered>
+          }
+          placement="bottom"
+        >
+          <AvatarWrapper isPresent={isPresent}>
+            <Avatar
+              src={user.avatarUrl}
+              onClick={
+                this.props.profileOnClick === false
+                  ? undefined
+                  : this.handleOpenProfile
+              }
+              size={32}
+              icon={isEditing ? <EditIcon size={16} color="#FFF" /> : undefined}
+            />
+          </AvatarWrapper>
+        </Tooltip>
+        <UserProfile
+          user={user}
+          isOpen={this.isOpen}
+          onRequestClose={this.handleCloseProfile}
+        />
+      </>
+    );
+  }
+}
+
+const Centered = styled.div`
+  text-align: center;
+`;
+
+const AvatarWrapper = styled.div`
+  opacity: ${(props) => (props.isPresent ? 1 : 0.5)};
+  transition: opacity 250ms ease-in-out;
+`;
+
+export default withTranslation()<AvatarWithPresence>(AvatarWithPresence);

app/components/Avatar/AvatarWithPresence.tsx

@@ -1,115 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
-import User from "~/models/User";
-import Avatar from "~/components/Avatar";
-import Tooltip from "~/components/Tooltip";
-
-type Props = {
-  user: User;
-  isPresent: boolean;
-  isEditing: boolean;
-  isObserving: boolean;
-  isCurrentUser: boolean;
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-};
-
-function AvatarWithPresence({
-  onClick,
-  user,
-  isPresent,
-  isEditing,
-  isObserving,
-  isCurrentUser,
-}: Props) {
-  const { t } = useTranslation();
-  const status = isPresent
-    ? isEditing
-      ? t("currently editing")
-      : t("currently viewing")
-    : t("previously edited");
-
-  return (
-    <>
-      <Tooltip
-        content={
-          <Centered>
-            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-            {status && (
-              <>
-                <br />
-                {status}
-              </>
-            )}
-          </Centered>
-        }
-        placement="bottom"
-      >
-        <AvatarWrapper
-          $isPresent={isPresent}
-          $isObserving={isObserving}
-          $color={user.color}
-        >
-          <Avatar model={user} onClick={onClick} size={32} />
-        </AvatarWrapper>
-      </Tooltip>
-    </>
-  );
-}
-
-const Centered = styled.div`
-  text-align: center;
-`;
-
-type AvatarWrapperProps = {
-  $isPresent: boolean;
-  $isObserving: boolean;
-  $color: string;
-};
-
-const AvatarWrapper = styled.div<AvatarWrapperProps>`
-  opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
-  transition: opacity 250ms ease-in-out;
-  border-radius: 50%;
-  position: relative;
-
-  ${(props) =>
-    props.$isPresent &&
-    css<AvatarWrapperProps>`
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: 50%;
-        transition: border-color 100ms ease-in-out;
-        border: 2px solid transparent;
-        pointer-events: none;
-
-        ${(props) =>
-          props.$isObserving &&
-          css`
-            border: 2px solid ${props.$color};
-            box-shadow: inset 0 0 0 2px ${props.theme.background};
-
-            &:hover {
-              top: -1px;
-              left: -1px;
-              right: -1px;
-              bottom: -1px;
-            }
-          `}
-      }
-
-      &:hover:after {
-        border: 2px solid ${(props) => props.$color};
-        box-shadow: inset 0 0 0 2px ${s("background")};
-      }
-    `}
-`;
-
-export default observer(AvatarWithPresence);

app/components/Avatar/Initials.tsx

@@ -1,27 +0,0 @@
-import styled from "styled-components";
-import Flex from "~/components/Flex";
-
-const Initials = styled(Flex)<{
-  color?: string;
-  size: number;
-  $showBorder?: boolean;
-}>`
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  width: 100%;
-  height: 100%;
-  color: #fff;
-  background-color: ${(props) => props.color};
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  border-radius: 50%;
-  border: 2px solid
-    ${(props) =>
-      props.$showBorder === false ? "transparent" : props.theme.background};
-  flex-shrink: 0;
-  font-size: ${(props) => props.size / 2}px;
-  font-weight: 500;
-`;
-
-export default Initials;

app/components/Avatar/index.js

@@ -0,0 +1,6 @@
+// @flow
+import Avatar from "./Avatar";
+import AvatarWithPresence from "./AvatarWithPresence";
+
+export { AvatarWithPresence };
+export default Avatar;

app/components/Avatar/index.ts

@@ -1,6 +0,0 @@
-import Avatar from "./Avatar";
-import AvatarWithPresence from "./AvatarWithPresence";
-
-export { AvatarWithPresence };
-
-export default Avatar;

app/components/Badge.js

@@ -0,0 +1,20 @@
+// @flow
+import styled from "styled-components";
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 1px 5px 2px;
+  background-color: ${({ yellow, primary, theme }) =>
+    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
+  color: ${({ primary, yellow, theme }) =>
+    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
+  border: 1px solid
+    ${({ primary, yellow, theme }) =>
+      primary || yellow ? "transparent" : theme.textTertiary};
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  user-select: none;
+`;
+
+export default Badge;

app/components/Badge.ts

@@ -1,26 +0,0 @@
-import { transparentize } from "polished";
-import styled from "styled-components";
-
-const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
-  margin-left: 10px;
-  padding: 1px 5px 2px;
-  background-color: ${({ yellow, primary, theme }) =>
-    yellow ? theme.yellow : primary ? theme.accent : "transparent"};
-  color: ${({ primary, yellow, theme }) =>
-    primary
-      ? theme.accentText
-      : yellow
-      ? theme.almostBlack
-      : theme.textTertiary};
-  border: 1px solid
-    ${({ primary, yellow, theme }) =>
-      primary || yellow
-        ? "transparent"
-        : transparentize(0.4, theme.textTertiary)};
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 500;
-  user-select: none;
-`;
-
-export default Badge;

app/components/Branding.js

@@ -0,0 +1,43 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import OutlineLogo from "./OutlineLogo";
+import env from "env";
+
+type Props = {
+  href?: string,
+};
+
+function Branding({ href = env.URL }: Props) {
+  return (
+    <Link href={href}>
+      <OutlineLogo size={16} />
+      &nbsp;Outline
+    </Link>
+  );
+}
+
+const Link = styled.a`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  font-weight: 600;
+  font-size: 14px;
+  text-decoration: none;
+  border-top-right-radius: 2px;
+  color: ${(props) => props.theme.text};
+  display: flex;
+  align-items: center;
+  padding: 16px;
+
+  svg {
+    fill: ${(props) => props.theme.text};
+  }
+
+  &:hover {
+    background: ${(props) => props.theme.sidebarBackground};
+  }
+`;
+
+export default Branding;

app/components/Branding.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { depths, s } from "@shared/styles";
-import env from "~/env";
-import OutlineIcon from "./Icons/OutlineIcon";
-
-type Props = {
-  href?: string;
-};
-
-function Branding({ href = env.URL }: Props) {
-  return (
-    <Link href={href}>
-      <OutlineIcon size={20} />
-      &nbsp;{env.APP_NAME}
-    </Link>
-  );
-}
-
-const Link = styled.a`
-  justify-content: center;
-  padding-bottom: 16px;
-
-  font-weight: 600;
-  font-size: 14px;
-  text-decoration: none;
-  border-top-right-radius: 2px;
-  color: ${s("text")};
-  display: flex;
-  align-items: center;
-
-  svg {
-    fill: ${s("text")};
-  }
-
-  ${breakpoint("tablet")`
-    z-index: ${depths.sidebar + 1};
-    background: ${s("sidebarBackground")};
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    padding: 16px;
-
-    &:hover {
-      background: ${s("sidebarControlHoverBackground")};
-    }
-  `};
-`;
-
-export default Branding;

app/components/Breadcrumb.js

@@ -0,0 +1,87 @@
+// @flow
+import { GoToIcon } from "outline-icons";
+import * as React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import Flex from "components/Flex";
+import BreadcrumbMenu from "menus/BreadcrumbMenu";
+
+type MenuItem = {|
+  icon?: React.Node,
+  title: React.Node,
+  to?: string,
+|};
+
+type Props = {|
+  items: MenuItem[],
+  max?: number,
+  children?: React.Node,
+  highlightFirstItem?: boolean,
+|};
+
+function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
+  const totalItems = items.length;
+  let topLevelItems: MenuItem[] = [...items];
+  let overflowItems;
+
+  // chop middle breadcrumbs and present a "..." menu instead
+  if (totalItems > max) {
+    const halfMax = Math.floor(max / 2);
+    overflowItems = topLevelItems.splice(halfMax, totalItems - max);
+    topLevelItems.splice(halfMax, 0, {
+      title: <BreadcrumbMenu items={overflowItems} />,
+    });
+  }
+
+  return (
+    <Flex justify="flex-start" align="center">
+      {topLevelItems.map((item, index) => (
+        <React.Fragment key={item.to || index}>
+          {item.icon}
+          {item.to ? (
+            <Item
+              to={item.to}
+              $withIcon={!!item.icon}
+              $highlight={highlightFirstItem && index === 0}
+            >
+              {item.title}
+            </Item>
+          ) : (
+            item.title
+          )}
+          {index !== topLevelItems.length - 1 || !!children ? <Slash /> : null}
+        </React.Fragment>
+      ))}
+      {children}
+    </Flex>
+  );
+}
+
+const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  fill: ${(props) => props.theme.divider};
+`;
+
+const Item = styled(Link)`
+  display: flex;
+  flex-shrink: 1;
+  min-width: 0;
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
+  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default Breadcrumb;

app/components/Breadcrumb.tsx

@@ -1,90 +0,0 @@
-import { GoToIcon } from "outline-icons";
-import * as React from "react";
-import { Link } from "react-router-dom";
-import styled from "styled-components";
-import { s, ellipsis } from "@shared/styles";
-import Flex from "~/components/Flex";
-import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
-import { undraggableOnDesktop } from "~/styles";
-import { MenuInternalLink } from "~/types";
-
-type Props = {
-  items: MenuInternalLink[];
-  max?: number;
-  highlightFirstItem?: boolean;
-};
-
-function Breadcrumb({
-  items,
-  highlightFirstItem,
-  children,
-  max = 2,
-}: React.PropsWithChildren<Props>) {
-  const totalItems = items.length;
-  const topLevelItems: MenuInternalLink[] = [...items];
-  let overflowItems;
-
-  // chop middle breadcrumbs and present a "..." menu instead
-  if (totalItems > max) {
-    const halfMax = Math.floor(max / 2);
-    overflowItems = topLevelItems.splice(halfMax, totalItems - max);
-
-    topLevelItems.splice(halfMax, 0, {
-      to: "",
-      type: "route",
-      title: <BreadcrumbMenu items={overflowItems as MenuInternalLink[]} />,
-    });
-  }
-
-  return (
-    <Flex justify="flex-start" align="center">
-      {topLevelItems.map((item, index) => (
-        <React.Fragment key={String(item.to) || index}>
-          {item.icon}
-          {item.to ? (
-            <Item
-              to={item.to}
-              $withIcon={!!item.icon}
-              $highlight={!!highlightFirstItem && index === 0}
-            >
-              {item.title}
-            </Item>
-          ) : (
-            item.title
-          )}
-          {index !== topLevelItems.length - 1 || !!children ? <Slash /> : null}
-        </React.Fragment>
-      ))}
-      {children}
-    </Flex>
-  );
-}
-
-const Slash = styled(GoToIcon)`
-  flex-shrink: 0;
-  fill: ${s("divider")};
-`;
-
-const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
-  ${ellipsis()}
-  display: flex;
-  flex-shrink: 1;
-  min-width: 0;
-  cursor: var(--pointer);
-  color: ${s("text")};
-  font-size: 15px;
-  height: 24px;
-  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
-  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
-  ${undraggableOnDesktop()}
-
-  svg {
-    flex-shrink: 0;
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-export default Breadcrumb;

app/components/Bubble.js

@@ -0,0 +1,39 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import { bounceIn } from "shared/styles/animations";
+
+type Props = {|
+  count: number,
+|};
+
+const Bubble = ({ count }: Props) => {
+  if (!count) {
+    return null;
+  }
+
+  return <Count>{count}</Count>;
+};
+
+const Count = styled.div`
+  animation: ${bounceIn} 600ms;
+  transform-origin: center center;
+  color: ${(props) => props.theme.white};
+  background: ${(props) => props.theme.slateDark};
+  display: inline-block;
+  font-feature-settings: "tnum";
+  font-weight: 600;
+  font-size: 9px;
+  white-space: nowrap;
+  vertical-align: baseline;
+  min-width: 16px;
+  min-height: 16px;
+  line-height: 16px;
+  border-radius: 8px;
+  text-align: center;
+  padding: 0 4px;
+  margin-left: 8px;
+  user-select: none;
+`;
+
+export default Bubble;

app/components/Button.js

@@ -0,0 +1,165 @@
+// @flow
+import { ExpandedIcon } from "outline-icons";
+import { darken } from "polished";
+import * as React from "react";
+import styled from "styled-components";
+
+const RealButton = styled.button`
+  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: ${(props) => props.theme.buttonBackground};
+  color: ${(props) => props.theme.buttonText};
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  text-decoration: none;
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+
+  ${(props) =>
+    !props.borderOnHover &&
+    `
+      svg {
+        fill: ${props.iconColor || props.theme.buttonText};
+      }
+    `}
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &:hover {
+    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
+  }
+
+  &:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: ${(props) => props.theme.white50};
+  }
+
+  ${(props) =>
+    props.$neutral &&
+    `
+    background: ${props.theme.buttonNeutralBackground};
+    color: ${props.theme.buttonNeutralText};
+    box-shadow: ${
+      props.borderOnHover
+        ? "none"
+        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
+    };
+
+    ${
+      props.borderOnHover
+        ? ""
+        : `svg {
+      fill: ${props.iconColor || props.theme.buttonNeutralText};
+    }`
+    }
+    
+
+    &:hover {
+      background: ${darken(0.05, props.theme.buttonNeutralBackground)};
+      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
+        props.theme.buttonNeutralBorder
+      } 0 0 0 1px inset;
+    }
+
+    &:disabled {
+      color: ${props.theme.textTertiary};
+    }
+  `} ${(props) =>
+    props.danger &&
+    `
+      background: ${props.theme.danger};
+      color: ${props.theme.white};
+
+      &:hover {
+        background: ${darken(0.05, props.theme.danger)};
+      }
+  `};
+`;
+
+const Label = styled.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  ${(props) => props.hasIcon && "padding-left: 4px;"};
+`;
+
+export const Inner = styled.span`
+  display: flex;
+  padding: 0 8px;
+  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
+  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
+  justify-content: center;
+  align-items: center;
+  min-height: 32px;
+
+  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
+  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
+`;
+
+export type Props = {|
+  type?: "button" | "submit",
+  value?: string,
+  icon?: React.Node,
+  iconColor?: string,
+  className?: string,
+  children?: React.Node,
+  innerRef?: React.ElementRef<any>,
+  disclosure?: boolean,
+  neutral?: boolean,
+  danger?: boolean,
+  primary?: boolean,
+  disabled?: boolean,
+  fullwidth?: boolean,
+  autoFocus?: boolean,
+  style?: Object,
+  as?: React.ComponentType<any>,
+  to?: string,
+  onClick?: (event: SyntheticEvent<>) => mixed,
+  borderOnHover?: boolean,
+
+  "data-on"?: string,
+  "data-event-category"?: string,
+  "data-event-action"?: string,
+|};
+
+const Button = React.forwardRef<Props, HTMLButtonElement>(
+  (
+    {
+      type = "text",
+      icon,
+      children,
+      value,
+      disclosure,
+      neutral,
+      ...rest
+    }: Props,
+    innerRef
+  ) => {
+    const hasText = children !== undefined || value !== undefined;
+    const hasIcon = icon !== undefined;
+
+    return (
+      <RealButton type={type} ref={innerRef} $neutral={neutral} {...rest}>
+        <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
+          {hasIcon && icon}
+          {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
+          {disclosure && <ExpandedIcon />}
+        </Inner>
+      </RealButton>
+    );
+  }
+);
+
+export default Button;

app/components/Button.tsx

@@ -1,198 +0,0 @@
-import { LocationDescriptor } from "history";
-import { ExpandedIcon } from "outline-icons";
-import { darken, lighten, transparentize } from "polished";
-import * as React from "react";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import ActionButton, {
-  Props as ActionButtonProps,
-} from "~/components/ActionButton";
-import { undraggableOnDesktop } from "~/styles";
-
-type RealProps = {
-  $fullwidth?: boolean;
-  $borderOnHover?: boolean;
-  $neutral?: boolean;
-  $danger?: boolean;
-};
-
-const RealButton = styled(ActionButton)<RealProps>`
-  display: ${(props) => (props.$fullwidth ? "block" : "inline-block")};
-  width: ${(props) => (props.$fullwidth ? "100%" : "auto")};
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: ${s("accent")};
-  color: ${s("accentText")};
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  height: 32px;
-  text-decoration: none;
-  flex-shrink: 0;
-  cursor: var(--pointer);
-  user-select: none;
-  appearance: none !important;
-  ${undraggableOnDesktop()}
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  &:hover:not(:disabled),
-  &[aria-expanded="true"] {
-    background: ${(props) => darken(0.05, props.theme.accent)};
-  }
-
-  &:disabled {
-    cursor: default;
-    pointer-events: none;
-    color: ${(props) => transparentize(0.5, props.theme.accentText)};
-    background: ${(props) => lighten(0.2, props.theme.accent)};
-
-    svg {
-      fill: ${(props) => props.theme.white50};
-    }
-  }
-
-  ${(props) =>
-    props.$neutral &&
-    `
-    background: inherit;
-    color: ${props.theme.buttonNeutralText};
-    box-shadow: ${
-      props.$borderOnHover
-        ? "none"
-        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
-    };
-
-    &:hover:not(:disabled),
-    &[aria-expanded="true"] {
-      background: ${
-        props.$borderOnHover
-          ? props.theme.buttonNeutralBackground
-          : darken(0.05, props.theme.buttonNeutralBackground)
-      };
-      box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, ${
-        props.theme.buttonNeutralBorder
-      } 0 0 0 1px inset;
-    }
-
-    &:disabled {
-      color: ${props.theme.textTertiary};
-      background: none;
-
-      svg {
-        fill: currentColor;
-      }
-    }
-  `}
-
-  ${(props) =>
-    props.$danger &&
-    `
-      background: ${props.theme.danger};
-      color: ${props.theme.white};
-
-      &:hover:not(:disabled),
-      &[aria-expanded="true"] {
-        background: ${darken(0.05, props.theme.danger)};
-      }
-
-      &:disabled {
-        background: ${lighten(0.05, props.theme.danger)};
-      }
-
-      &.focus-visible {
-        outline-color: ${darken(0.2, props.theme.danger)} !important;
-      }
-  `};
-`;
-
-const Label = styled.span<{ hasIcon?: boolean }>`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  ${(props) => props.hasIcon && "padding-left: 4px;"};
-`;
-
-export const Inner = styled.span<{
-  disclosure?: boolean;
-  hasIcon?: boolean;
-  hasText?: boolean;
-}>`
-  display: flex;
-  padding: 0 8px;
-  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
-  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
-  justify-content: center;
-  align-items: center;
-  min-height: 32px;
-
-  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
-  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
-`;
-
-export type Props<T> = ActionButtonProps & {
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
-  disclosure?: boolean;
-  neutral?: boolean;
-  danger?: boolean;
-  fullwidth?: boolean;
-  as?: T;
-  to?: LocationDescriptor;
-  borderOnHover?: boolean;
-  hideIcon?: boolean;
-  href?: string;
-  "data-on"?: string;
-  "data-event-category"?: string;
-  "data-event-action"?: string;
-};
-
-const Button = <T extends React.ElementType = "button">(
-  props: Props<T> & React.ComponentPropsWithoutRef<T>,
-  ref: React.Ref<HTMLButtonElement>
-) => {
-  const {
-    type,
-    children,
-    value,
-    disclosure,
-    neutral,
-    action,
-    icon,
-    borderOnHover,
-    hideIcon,
-    fullwidth,
-    danger,
-    ...rest
-  } = props;
-  const hasText = !!children || value !== undefined;
-  const ic = hideIcon ? undefined : action?.icon ?? icon;
-  const hasIcon = ic !== undefined;
-
-  return (
-    <RealButton
-      type={type || "button"}
-      ref={ref}
-      $neutral={neutral}
-      action={action}
-      $danger={danger}
-      $fullwidth={fullwidth}
-      $borderOnHover={borderOnHover}
-      {...rest}
-    >
-      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && ic}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon />}
-      </Inner>
-    </RealButton>
-  );
-};
-
-export default React.forwardRef(Button);

app/components/ButtonLarge.js

@@ -0,0 +1,13 @@
+// @flow
+import styled from "styled-components";
+import Button, { Inner } from "./Button";
+
+const ButtonLarge = styled(Button)`
+  height: 40px;
+
+  ${Inner} {
+    padding: 4px 16px;
+  }
+`;
+
+export default ButtonLarge;

app/components/ButtonLarge.ts

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-import Button, { Inner } from "./Button";
-
-const ButtonLarge = styled(Button)`
-  height: 40px;
-
-  ${Inner} {
-    padding: 4px 16px;
-  }
-`;
-
-export default ButtonLarge;

app/components/ButtonLink.js

@@ -0,0 +1,23 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  onClick: (ev: SyntheticEvent<>) => void,
+  children: React.Node,
+};
+
+export default function ButtonLink(props: Props) {
+  return <Button {...props} />;
+}
+
+const Button = styled.button`
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: ${(props) => props.theme.link};
+  line-height: inherit;
+  background: none;
+  text-decoration: none;
+  cursor: pointer;
+`;

app/components/ButtonLink.tsx

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-
-const ButtonLink = styled.button`
-  margin: 0;
-  padding: 0;
-  border: 0;
-  color: ${(props) => props.theme.link};
-  line-height: inherit;
-  background: none;
-  text-decoration: none;
-  cursor: pointer;
-`;
-
-export default ButtonLink;

app/components/ButtonSmall.ts

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-import Button, { Inner } from "./Button";
-
-const ButtonSmall = styled(Button)`
-  font-size: 13px;
-  height: 26px;
-
-  ${Inner} {
-    padding: 0 6px;
-    line-height: 26px;
-    min-height: 26px;
-  }
-`;
-
-export default ButtonSmall;

app/components/CenteredContent.js

@@ -0,0 +1,38 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+
+type Props = {|
+  children?: React.Node,
+  withStickyHeader?: boolean,
+|};
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 100vw;
+  padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
+
+  ${breakpoint("tablet")`
+    padding: ${(props) => (props.withStickyHeader ? "4px 60px" : "60px")};
+  `};
+`;
+
+const Content = styled.div`
+  max-width: 46em;
+  margin: 0 auto;
+
+  ${breakpoint("desktopLarge")`
+    max-width: 52em;
+  `};
+`;
+
+const CenteredContent = ({ children, ...rest }: Props) => {
+  return (
+    <Container {...rest}>
+      <Content>{children}</Content>
+    </Container>
+  );
+};
+
+export default CenteredContent;

app/components/CenteredContent.tsx

@@ -1,43 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-
-type Props = {
-  children?: React.ReactNode;
-  maxWidth?: string;
-  withStickyHeader?: boolean;
-};
-
-const Container = styled.div<Props>`
-  width: 100%;
-  max-width: 100vw;
-  padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
-
-  ${breakpoint("tablet")`
-    padding: ${(props: Props) =>
-      props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
-  `};
-`;
-
-type ContentProps = { $maxWidth?: string };
-
-const Content = styled.div<ContentProps>`
-  max-width: ${(props) => props.$maxWidth ?? "46em"};
-  margin: 0 auto;
-
-  ${breakpoint("desktopLarge")`
-    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
-  `};
-`;
-
-const CenteredContent: React.FC<Props> = ({
-  children,
-  maxWidth,
-  ...rest
-}: Props) => (
-  <Container {...rest}>
-    <Content $maxWidth={maxWidth}>{children}</Content>
-  </Container>
-);
-
-export default CenteredContent;

app/components/ChangeLanguage.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { changeLanguage } from "~/utils/language";
-
-type Props = {
-  locale: string;
-};
-
-export default function ChangeLanguage({ locale }: Props) {
-  const { i18n } = useTranslation();
-
-  React.useEffect(() => {
-    void changeLanguage(locale, i18n);
-  }, [locale, i18n]);
-
-  return null;
-}

app/components/Checkbox.js

@@ -0,0 +1,65 @@
+// @flow
+import * as React from "react";
+import { VisuallyHidden } from "reakit/VisuallyHidden";
+import styled from "styled-components";
+import HelpText from "components/HelpText";
+
+export type Props = {|
+  checked?: boolean,
+  label?: React.Node,
+  labelHidden?: boolean,
+  className?: string,
+  name?: string,
+  disabled?: boolean,
+  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  note?: string,
+  short?: boolean,
+  small?: boolean,
+|};
+
+const LabelText = styled.span`
+  font-weight: 500;
+  margin-left: ${(props) => (props.small ? "6px" : "10px")};
+  ${(props) => (props.small ? `color: ${props.theme.textSecondary}` : "")};
+`;
+
+const Wrapper = styled.div`
+  padding-bottom: 8px;
+  ${(props) => (props.small ? "font-size: 14px" : "")};
+  width: 100%;
+`;
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+
+export default function Checkbox({
+  label,
+  labelHidden,
+  note,
+  className,
+  small,
+  short,
+  ...rest
+}: Props) {
+  const wrappedLabel = <LabelText small={small}>{label}</LabelText>;
+
+  return (
+    <>
+      <Wrapper small={small}>
+        <Label>
+          <input type="checkbox" {...rest} />
+          {label &&
+            (labelHidden ? (
+              <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            ) : (
+              wrappedLabel
+            ))}
+        </Label>
+        {note && <HelpText small>{note}</HelpText>}
+      </Wrapper>
+    </>
+  );
+}

app/components/CircularProgressBar.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import styled, { useTheme } from "styled-components";
-
-const cleanPercentage = (percentage: number) => {
-  const tooLow = !Number.isFinite(+percentage) || percentage < 0;
-  const tooHigh = percentage > 100;
-  return tooLow ? 0 : tooHigh ? 100 : +percentage;
-};
-
-const Circle = ({
-  color,
-  percentage,
-  offset,
-}: {
-  color: string;
-  percentage?: number;
-  offset: number;
-}) => {
-  const radius = offset * 0.7;
-  const circumference = 2 * Math.PI * radius;
-  let strokePercentage;
-
-  if (percentage) {
-    // because the circle is so small, anything greater than 85% appears like 100%
-    percentage = percentage > 85 && percentage < 100 ? 85 : percentage;
-    strokePercentage = percentage
-      ? ((100 - percentage) * circumference) / 100
-      : 0;
-  }
-
-  return (
-    <circle
-      r={radius}
-      cx={offset}
-      cy={offset}
-      fill="none"
-      stroke={strokePercentage !== circumference ? color : ""}
-      strokeWidth={2.5}
-      strokeDasharray={circumference}
-      strokeDashoffset={percentage ? strokePercentage : 0}
-      strokeLinecap="round"
-      style={{
-        transition: "stroke-dashoffset 0.6s ease 0s",
-      }}
-    />
-  );
-};
-
-const CircularProgressBar = ({
-  percentage,
-  size = 16,
-}: {
-  percentage: number;
-  size?: number;
-}) => {
-  const theme = useTheme();
-  percentage = cleanPercentage(percentage);
-  const offset = Math.floor(size / 2);
-
-  return (
-    <SVG width={size} height={size}>
-      <g transform={`rotate(-90 ${offset} ${offset})`}>
-        <Circle color={theme.progressBarBackground} offset={offset} />
-        {percentage > 0 && (
-          <Circle
-            color={theme.accent}
-            percentage={percentage}
-            offset={offset}
-          />
-        )}
-      </g>
-    </SVG>
-  );
-};
-
-const SVG = styled.svg`
-  flex-shrink: 0;
-`;
-
-export default CircularProgressBar;

app/components/ClickablePadding.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from "styled-components";
+
+const ClickablePadding = styled.div`
+  min-height: 10em;
+  cursor: ${({ onClick }) => (onClick ? "text" : "default")};
+  ${({ grow }) => grow && `flex-grow: 100;`};
+`;
+
+export default ClickablePadding;

app/components/ClickablePadding.ts

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-
-const ClickablePadding = styled.div<{
-  grow?: boolean;
-  minHeight?: React.CSSProperties["paddingBottom"];
-}>`
-  min-height: ${(props) => props.minHeight || "50vh"};
-  flex-grow: 100;
-  cursor: text;
-`;
-
-export default ClickablePadding;

app/components/Collaborators.js

@@ -0,0 +1,109 @@
+// @flow
+import { sortBy, filter, uniq } from "lodash";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Document from "models/Document";
+import { AvatarWithPresence } from "components/Avatar";
+import DocumentViews from "components/DocumentViews";
+import Facepile from "components/Facepile";
+import NudeButton from "components/NudeButton";
+import Popover from "components/Popover";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  document: Document,
+  currentUserId: string,
+|};
+
+function Collaborators(props: Props) {
+  const { t } = useTranslation();
+  const { users, presence } = useStores();
+  const { document, currentUserId } = props;
+
+  let documentPresence = presence.get(document.id);
+  documentPresence = documentPresence
+    ? Array.from(documentPresence.values())
+    : [];
+
+  const presentIds = documentPresence.map((p) => p.userId);
+  const editingIds = documentPresence
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
+
+  // ensure currently present via websocket are always ordered first
+  const collaborators = React.useMemo(
+    () =>
+      sortBy(
+        filter(
+          users.orderedData,
+          (user) =>
+            presentIds.includes(user.id) ||
+            document.collaboratorIds.includes(user.id)
+        ),
+        (user) => presentIds.includes(user.id)
+      ),
+    [document.collaboratorIds, users.orderedData, presentIds]
+  );
+
+  // load any users we don't know about
+  React.useEffect(() => {
+    if (users.isFetching) {
+      return;
+    }
+
+    uniq([...document.collaboratorIds, ...presentIds]).forEach((userId) => {
+      if (!users.get(userId)) {
+        return users.fetch(userId);
+      }
+    });
+  }, [document, users, presentIds, document.collaboratorIds]);
+
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom-end",
+  });
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
+            <FacepileHiddenOnMobile
+              users={collaborators}
+              renderAvatar={(user) => {
+                const isPresent = presentIds.includes(user.id);
+                const isEditing = editingIds.includes(user.id);
+
+                return (
+                  <AvatarWithPresence
+                    key={user.id}
+                    user={user}
+                    isPresent={isPresent}
+                    isEditing={isEditing}
+                    isCurrentUser={currentUserId === user.id}
+                    profileOnClick={false}
+                  />
+                );
+              }}
+            />
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </>
+  );
+}
+
+const FacepileHiddenOnMobile = styled(Facepile)`
+  ${breakpoint("mobile", "tablet")`
+    display: none;
+  `};
+`;
+
+export default observer(Collaborators);

app/components/Collaborators.tsx

@@ -1,120 +0,0 @@
-import filter from "lodash/filter";
-import isEqual from "lodash/isEqual";
-import sortBy from "lodash/sortBy";
-import uniq from "lodash/uniq";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
-import Document from "~/models/Document";
-import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
-import DocumentViews from "~/components/DocumentViews";
-import Facepile from "~/components/Facepile";
-import NudeButton from "~/components/NudeButton";
-import Popover from "~/components/Popover";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-
-type Props = {
-  document: Document;
-};
-
-function Collaborators(props: Props) {
-  const { t } = useTranslation();
-  const user = useCurrentUser();
-  const currentUserId = user?.id;
-  const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
-  const { users, presence, ui } = useStores();
-  const { document } = props;
-  const documentPresence = presence.get(document.id);
-  const documentPresenceArray = documentPresence
-    ? Array.from(documentPresence.values())
-    : [];
-
-  const presentIds = documentPresenceArray.map((p) => p.userId);
-  const editingIds = documentPresenceArray
-    .filter((p) => p.isEditing)
-    .map((p) => p.userId);
-
-  // ensure currently present via websocket are always ordered first
-  const collaborators = React.useMemo(
-    () =>
-      sortBy(
-        filter(
-          users.orderedData,
-          (user) =>
-            (presentIds.includes(user.id) ||
-              document.collaboratorIds.includes(user.id)) &&
-            !user.isSuspended
-        ),
-        (user) => presentIds.includes(user.id)
-      ),
-    [document.collaboratorIds, users.orderedData, presentIds]
-  );
-
-  // load any users we don't yet have in memory
-  React.useEffect(() => {
-    const ids = uniq([...document.collaboratorIds, ...presentIds])
-      .filter((userId) => !users.get(userId))
-      .sort();
-
-    if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
-      setRequestedUserIds(ids);
-      void users.fetchPage({ ids, limit: 100 });
-    }
-  }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);
-
-  const popover = usePopoverState({
-    gutter: 0,
-    placement: "bottom-end",
-  });
-
-  return (
-    <>
-      <PopoverDisclosure {...popover}>
-        {(props) => (
-          <NudeButton width={collaborators.length * 32} height={32} {...props}>
-            <Facepile
-              users={collaborators}
-              renderAvatar={(collaborator) => {
-                const isPresent = presentIds.includes(collaborator.id);
-                const isEditing = editingIds.includes(collaborator.id);
-                const isObserving = ui.observingUserId === collaborator.id;
-                const isObservable = collaborator.id !== user.id;
-
-                return (
-                  <AvatarWithPresence
-                    key={collaborator.id}
-                    user={collaborator}
-                    isPresent={isPresent}
-                    isEditing={isEditing}
-                    isObserving={isObserving}
-                    isCurrentUser={currentUserId === collaborator.id}
-                    onClick={
-                      isObservable
-                        ? (ev) => {
-                            if (isPresent) {
-                              ev.preventDefault();
-                              ev.stopPropagation();
-                              ui.setObservingUser(
-                                isObserving ? undefined : collaborator.id
-                              );
-                            }
-                          }
-                        : undefined
-                    }
-                  />
-                );
-              }}
-            />
-          </NudeButton>
-        )}
-      </PopoverDisclosure>
-      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
-        <DocumentViews document={document} isOpen={popover.visible} />
-      </Popover>
-    </>
-  );
-}
-
-export default observer(Collaborators);

app/components/Collection/CollectionEdit.tsx

@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { toast } from "sonner";
-import useStores from "~/hooks/useStores";
-import { CollectionForm, FormData } from "./CollectionForm";
-
-type Props = {
-  collectionId: string;
-  onSubmit: () => void;
-};
-
-export const CollectionEdit = observer(function CollectionEdit_({
-  collectionId,
-  onSubmit,
-}: Props) {
-  const { collections } = useStores();
-  const collection = collections.get(collectionId);
-
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        await collection?.save(data);
-        onSubmit?.();
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [collection, onSubmit]
-  );
-
-  return <CollectionForm collection={collection} handleSubmit={handleSubmit} />;
-});

app/components/Collection/CollectionForm.tsx

@@ -1,176 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Trans, useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { randomElement } from "@shared/random";
-import { CollectionPermission } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import { colorPalette } from "@shared/utils/collections";
-import { CollectionValidation } from "@shared/validations";
-import Collection from "~/models/Collection";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
-import IconPicker from "~/components/IconPicker";
-import Input from "~/components/Input";
-import InputSelectPermission from "~/components/InputSelectPermission";
-import Switch from "~/components/Switch";
-import Text from "~/components/Text";
-import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
-
-export interface FormData {
-  name: string;
-  icon: string;
-  color: string;
-  sharing: boolean;
-  permission: CollectionPermission | undefined;
-}
-
-export const CollectionForm = observer(function CollectionForm_({
-  handleSubmit,
-  collection,
-}: {
-  handleSubmit: (data: FormData) => void;
-  collection?: Collection;
-}) {
-  const team = useCurrentTeam();
-  const { t } = useTranslation();
-  const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
-  const {
-    register,
-    handleSubmit: formHandleSubmit,
-    formState,
-    watch,
-    control,
-    setValue,
-    setFocus,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      name: collection?.name ?? "",
-      icon: collection?.icon,
-      sharing: collection?.sharing ?? true,
-      permission: collection?.permission,
-      color: collection?.color ?? randomElement(colorPalette),
-    },
-  });
-
-  const values = watch();
-
-  React.useEffect(() => {
-    // If the user hasn't picked an icon yet, go ahead and suggest one based on
-    // the name of the collection. It's the little things sometimes.
-    if (!hasOpenedIconPicker && !collection) {
-      setValue(
-        "icon",
-        IconLibrary.findIconByKeyword(values.name) ??
-          values.icon ??
-          "collection"
-      );
-    }
-  }, [values.name, collection]);
-
-  React.useEffect(() => {
-    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
-  }, [setFocus]);
-
-  const handleIconPickerChange = React.useCallback(
-    (color: string, icon: string) => {
-      if (icon !== values.icon) {
-        setFocus("name");
-      }
-
-      setValue("color", color);
-      setValue("icon", icon);
-    },
-    [setFocus, setValue, values.icon]
-  );
-
-  return (
-    <form onSubmit={formHandleSubmit(handleSubmit)}>
-      <Text as="p">
-        <Trans>
-          Collections are used to group documents and choose permissions
-        </Trans>
-        .
-      </Text>
-      <Flex gap={8}>
-        <Input
-          type="text"
-          placeholder={t("Name")}
-          {...register("name", {
-            required: true,
-            maxLength: CollectionValidation.maxNameLength,
-          })}
-          prefix={
-            <StyledIconPicker
-              onOpen={setHasOpenedIconPicker}
-              onChange={handleIconPickerChange}
-              initial={values.name[0]}
-              color={values.color}
-              icon={values.icon}
-            />
-          }
-          autoComplete="off"
-          autoFocus
-          flex
-        />
-      </Flex>
-
-      {/* Following controls are available in create flow, but moved elsewhere for edit */}
-      {!collection && (
-        <Controller
-          control={control}
-          name="permission"
-          render={({ field }) => (
-            <InputSelectPermission
-              ref={field.ref}
-              value={field.value}
-              onChange={(value: CollectionPermission) => {
-                field.onChange(value);
-              }}
-              note={t(
-                "The default access for workspace members, you can share with more users or groups later."
-              )}
-            />
-          )}
-        />
-      )}
-
-      {team.sharing &&
-        (!collection ||
-          FeatureFlags.isEnabled(Feature.newCollectionSharing)) && (
-          <Switch
-            id="sharing"
-            label={t("Public document sharing")}
-            note={t(
-              "Allow documents within this collection to be shared publicly on the internet."
-            )}
-            {...register("sharing")}
-          />
-        )}
-
-      <Flex justify="flex-end">
-        <Button
-          type="submit"
-          disabled={formState.isSubmitting || !formState.isValid}
-        >
-          {collection
-            ? formState.isSubmitting
-              ? `${t("Saving")}…`
-              : t("Save")
-            : formState.isSubmitting
-            ? `${t("Creating")}…`
-            : t("Create")}
-        </Button>
-      </Flex>
-    </form>
-  );
-});
-
-const StyledIconPicker = styled(IconPicker)`
-  margin-left: 4px;
-  margin-right: 4px;
-`;

app/components/Collection/CollectionNew.tsx

@@ -1,32 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { toast } from "sonner";
-import Collection from "~/models/Collection";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { CollectionForm, FormData } from "./CollectionForm";
-
-type Props = {
-  onSubmit: () => void;
-};
-
-export const CollectionNew = observer(function CollectionNew_({
-  onSubmit,
-}: Props) {
-  const { collections } = useStores();
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        const collection = new Collection(data, collections);
-        await collection.save();
-        onSubmit?.();
-        history.push(collection.path);
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [collections, onSubmit]
-  );
-
-  return <CollectionForm handleSubmit={handleSubmit} />;
-});

app/components/CollectionDeleteDialog.tsx

@@ -1,73 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { useHistory } from "react-router-dom";
-import { toast } from "sonner";
-import Collection from "~/models/Collection";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import Text from "~/components/Text";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useStores from "~/hooks/useStores";
-import { homePath } from "~/utils/routeHelpers";
-
-type Props = {
-  collection: Collection;
-  onSubmit: () => void;
-};
-
-function CollectionDeleteDialog({ collection, onSubmit }: Props) {
-  const team = useCurrentTeam();
-  const { ui } = useStores();
-  const history = useHistory();
-  const { t } = useTranslation();
-
-  const handleSubmit = async () => {
-    const redirect = collection.id === ui.activeCollectionId;
-
-    if (redirect) {
-      history.push(homePath());
-    }
-
-    await collection.delete();
-    onSubmit();
-    toast.success(t("Collection deleted"));
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("I’m sure – Delete")}
-      savingText={`${t("Deleting")}…`}
-      danger
-    >
-      <>
-        <Text as="p" type="secondary">
-          <Trans
-            defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however all published documents within will be moved to the trash."
-            values={{
-              collectionName: collection.name,
-            }}
-            components={{
-              em: <strong />,
-            }}
-          />
-        </Text>
-        {team.defaultCollectionId === collection.id ? (
-          <Text as="p" type="secondary">
-            <Trans
-              defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page."
-              values={{
-                collectionName: collection.name,
-              }}
-              components={{
-                em: <strong />,
-              }}
-            />
-          </Text>
-        ) : null}
-      </>
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(CollectionDeleteDialog);

app/components/CollectionDescription.js

@@ -0,0 +1,211 @@
+// @flow
+import { observer } from "mobx-react";
+import { transparentize } from "polished";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Collection from "models/Collection";
+import Arrow from "components/Arrow";
+import ButtonLink from "components/ButtonLink";
+import Editor from "components/Editor";
+import LoadingIndicator from "components/LoadingIndicator";
+import NudeButton from "components/NudeButton";
+import useDebouncedCallback from "hooks/useDebouncedCallback";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  collection: Collection,
+|};
+
+function CollectionDescription({ collection }: Props) {
+  const { collections, ui, policies } = useStores();
+  const { t } = useTranslation();
+  const [isExpanded, setExpanded] = React.useState(false);
+  const [isEditing, setEditing] = React.useState(false);
+  const [isDirty, setDirty] = React.useState(false);
+  const can = policies.abilities(collection.id);
+
+  const handleStartEditing = React.useCallback(() => {
+    setEditing(true);
+  }, []);
+
+  const handleStopEditing = React.useCallback(() => {
+    setEditing(false);
+  }, []);
+
+  const handleClickDisclosure = React.useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (isExpanded && document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      setExpanded(!isExpanded);
+    },
+    [isExpanded]
+  );
+
+  const handleSave = useDebouncedCallback(async (getValue) => {
+    try {
+      await collection.save({
+        description: getValue(),
+      });
+      setDirty(false);
+    } catch (err) {
+      ui.showToast(
+        t("Sorry, an error occurred saving the collection", {
+          type: "error",
+        })
+      );
+      throw err;
+    }
+  }, 1000);
+
+  const handleChange = React.useCallback(
+    (getValue) => {
+      setDirty(true);
+      handleSave(getValue);
+    },
+    [handleSave]
+  );
+
+  React.useEffect(() => {
+    setEditing(false);
+  }, [collection.id]);
+
+  const placeholder = `${t("Add a description")}…`;
+  const key = isEditing || isDirty ? "draft" : collection.updatedAt;
+
+  return (
+    <MaxHeight data-editing={isEditing} data-expanded={isExpanded}>
+      <Input
+        $isEditable={can.update}
+        data-editing={isEditing}
+        data-expanded={isExpanded}
+      >
+        <span onClick={can.update ? handleStartEditing : undefined}>
+          {collections.isSaving && <LoadingIndicator />}
+          {collection.hasDescription || isEditing || isDirty ? (
+            <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
+              <Editor
+                key={key}
+                defaultValue={collection.description || ""}
+                onChange={handleChange}
+                placeholder={placeholder}
+                readOnly={!isEditing}
+                autoFocus={isEditing}
+                onBlur={handleStopEditing}
+                maxLength={1000}
+                disableEmbeds
+                readOnlyWriteCheckboxes
+                grow
+              />
+            </React.Suspense>
+          ) : (
+            can.update && <Placeholder>{placeholder}</Placeholder>
+          )}
+        </span>
+      </Input>
+      {!isEditing && (
+        <Disclosure
+          onClick={handleClickDisclosure}
+          aria-label={isExpanded ? t("Collapse") : t("Expand")}
+          size={30}
+        >
+          <Arrow />
+        </Disclosure>
+      )}
+    </MaxHeight>
+  );
+}
+
+const Disclosure = styled(NudeButton)`
+  opacity: 0;
+  color: ${(props) => props.theme.divider};
+  position: absolute;
+  top: calc(25vh - 50px);
+  left: 50%;
+  z-index: 1;
+  transform: rotate(-90deg) translateX(-50%);
+  transition: opacity 100ms ease-in-out;
+
+  &:focus,
+  &:hover {
+    opacity: 1;
+  }
+
+  &:active {
+    color: ${(props) => props.theme.sidebarText};
+  }
+`;
+
+const Placeholder = styled(ButtonLink)`
+  color: ${(props) => props.theme.placeholder};
+  cursor: text;
+  min-height: 27px;
+`;
+
+const MaxHeight = styled.div`
+  position: relative;
+  max-height: 25vh;
+  overflow: hidden;
+  margin: -12px -8px -8px;
+  padding: 8px;
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    max-height: initial;
+    overflow: initial;
+
+    ${Disclosure} {
+      top: initial;
+      bottom: 0;
+      transform: rotate(90deg) translateX(-50%);
+    }
+  }
+
+  &:hover ${Disclosure} {
+    opacity: 1;
+  }
+`;
+
+const Input = styled.div`
+  margin: -8px;
+  padding: 8px;
+  border-radius: 8px;
+  transition: ${(props) => props.theme.backgroundTransition};
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: calc(25vh - 50px);
+    left: 0;
+    right: 0;
+    height: 50px;
+    pointer-events: none;
+    background: linear-gradient(
+      180deg,
+      ${(props) => transparentize(1, props.theme.background)} 0%,
+      ${(props) => props.theme.background} 100%
+    );
+  }
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    &:after {
+      background: transparent;
+    }
+  }
+
+  &[data-editing="true"] {
+    background: ${(props) => props.theme.secondaryBackground};
+  }
+
+  .block-menu-trigger,
+  .heading-anchor {
+    display: none !important;
+  }
+`;
+
+export default observer(CollectionDescription);