test

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Tom Moor <tom.moor@gmail.com>

.babelrc

@@ -1,18 +1,48 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": {
+          "version": "3",
+          "proposals": true
+        },
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
   "plugins": [
-    "lodash",
     "styled-components",
-    "transform-decorators-legacy",
-    "transform-es2015-destructuring",
-    "transform-object-rest-spread",
-    "transform-regenerator",
-    "transform-class-properties",
-    "syntax-dynamic-import"
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-regenerator",
+    "transform-class-properties"
   ],
   "env": {
+    "production": {
+      "plugins": [
+        [
+          "styled-components",
+          {
+            "displayName": false
+          }
+        ]
+      ],
+      "ignore": [
+        "**/*.test.ts"
+      ]
+    },
     "development": {
-      "presets": ["react-hmre"]
+      "ignore": [
+        "**/*.test.ts"
+      ]
     }
   }
-}
+}

.circleci/config.yml

@@ -1,37 +1,180 @@
-version: 2
+version: 2.1
+
+defaults: &defaults
+  working_directory: ~/outline
+  docker:
+    - image: cimg/node:18.12
+    - 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
+    SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+    DATABASE_URL_TEST: postgres://postgres:password@localhost:5432/circle_test
+    DATABASE_URL: postgres://postgres:password@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
+    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
+
 jobs:
   build:
-    working_directory: ~/outline
-    docker:
-      - image: circleci/node:8.11
-      - 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
+    <<: *defaults
     steps:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: install-deps
-          command: yarn install --pure-lockfile
+          command: yarn install --frozen-lockfile
       - save_cache:
           key: dependency-cache-{{ checksum "package.json" }}
           paths:
             - ./node_modules
+  lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: lint
+          command: yarn lint
+  types:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: typescript
+          command: yarn tsc
+  test-app:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:app
+  test-shared:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:shared
+  test-server:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: migrate
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
       - run:
           name: test
-          command: yarn test
+          command: yarn test:server --forceExit
+  bundle-size:
+    <<: *defaults
+    environment:
+      NODE_ENV: production
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
       - run:
-          name: lint
-          command: yarn lint
+          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/v6,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: docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+
+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:
+            - test-app
+            - test-shared
+            - test-server
+
+  build-docker:
+    jobs:
+      - build-image:
+          filters:
+            tags:
+              only: /^v.*/
+            branches:
+              ignore: /.*/

.dockerignore

@@ -0,0 +1,17 @@
+__mocks__
+.git
+.vscode
+.github
+.circleci
+.DS_Store
+.env*
+.eslint*
+.log
+Makefile
+Procfile
+app.json
+crowdin.yml
+build
+docker-compose.yml
+fakes3
+node_modules

.env.sample

@@ -1,48 +1,187 @@
-# Copy this file to .env, remove this comment and change the keys. For development
-# with docker this should mostly work out of the box other than setting the Slack
-# keys (for auth) and the SECRET_KEY.
-#
-# Please use `openssl rand -hex 32` to create SECRET_KEY
+# –––––––––––––––– REQUIRED ––––––––––––––––
 
-DATABASE_URL=postgres://user:pass@postgres:5432/outline
-DATABASE_URL_TEST=postgres://user:pass@postgres:5432/outline-test
-SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+NODE_ENV=production
+
+# 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
+# `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_URL_TEST=postgres://user:pass@localhost:5432/outline-test
+DATABASE_CONNECTION_POOL_MIN=
+DATABASE_CONNECTION_POOL_MAX=
+# 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==
+
+# URL should point to the fully qualified, publicly accessible URL. If using a
+# proxy the port in URL and PORT may be different.
+URL=https://app.outline.dev:3000
 PORT=3000
-REDIS_URL=redis://redis:6379
-URL=http://localhost:3000
-DEPLOYMENT=self
-ENABLE_UPDATES=true
-SUBDOMAINS_ENABLED=false
-DEBUG=sql,cache,presenters,events
 
-# Third party signin credentials (at least one is required)
-SLACK_KEY=71315967491.XXXXXXXXXX
-SLACK_SECRET=d2dc414f9953226bad0a356cXXXXYYYY
+# 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 redundancy
+# however if you want to keep all file storage local an alternative such as
+# minio (https://github.com/minio/minio) can be used.
+
+# 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,
+# or Microsoft is required for a working installation or you'll have no sign-in
+# options.
+
+# To configure Slack auth, you'll need to create an Application at
+# => https://api.slack.com/apps
+#
+# 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
+
+# To configure Google auth, you'll need to create an OAuth Client ID at
+# => https://console.cloud.google.com/apis/credentials
+#
+# When configuring the Client ID, add an Authorized redirect URI:
+# https://<URL>/auth/google.callback
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
-# Comma separated list of domains to be allowed (optional)
-# If not set, all Google apps domains are allowed by default
-GOOGLE_ALLOWED_DOMAINS=
 
-# Third party credentials (optional)
-SLACK_VERIFICATION_TOKEN=PLxk6OlXXXXXVj3YYYY
+# 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_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=
+
+# 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
+
+
+# –––––––––––––––– 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
+# 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
+# false if you can be sure that SSL is terminated at an external loadbalancer.
+FORCE_HTTPS=true
+
+# Have the installation check for updates by sending anonymized statistics to
+# 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 maximum 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
+
+# Configure lowest severity level for server logs. Should be one of
+# error, warn, info, http, verbose, debug and silly
+LOG_LEVEL=info
+
+# 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
+#
+SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
+SLACK_MESSAGE_ACTIONS=true
+
+# Optionally enable google analytics to track pageviews in the knowledge base
 GOOGLE_ANALYTICS_ID=
-BUGSNAG_KEY=
-GITHUB_ACCESS_TOKEN=
 
-# AWS credentials (optional in dev)
-AWS_ACCESS_KEY_ID=notcheckedindev
-AWS_SECRET_ACCESS_KEY=notcheckedindev
-AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
-AWS_S3_UPLOAD_BUCKET_NAME=outline-dev
-AWS_S3_UPLOAD_MAX_SIZE=26214400
+# 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=
 
-# Emails configuration (optional)
+# 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=
 SMTP_USERNAME=
 SMTP_PASSWORD=
-SMTP_FROM_EMAIL=
-SMTP_REPLY_EMAIL=
+SMTP_FROM_EMAIL=hello@example.com
+SMTP_REPLY_EMAIL=hello@example.com
+SMTP_TLS_CIPHERS=
+SMTP_SECURE=true
+
+# 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=

.eslintrc

@@ -1,67 +1,132 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "extraFileExtensions": [".json"],
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "extends": [
-    "react-app",
-    "plugin:import/errors",
-    "plugin:import/warnings",
-    "plugin:flowtype/recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": [
+    "es",
+    "@typescript-eslint",
+    "eslint-plugin-import",
+    "eslint-plugin-node",
+    "eslint-plugin-react",
+    "import"
   ],
-  "plugins": ["prettier", "flowtype"],
   "rules": {
     "eqeqeq": 2,
-    "no-unused-vars": 2,
-    // // Bring back after we remove CSS Modules 100%
-    // "import/order": "warn",
-    // Prettier automatically uses the least amount of parens possible, so this
-    // does more harm than good.
+    "curly": 2,
+    "no-console": "error",
+    "arrow-body-style": ["error", "as-needed"],
+    "spaced-comment": "error",
+    "object-shorthand": "error",
     "no-mixed-operators": "off",
-    // Temporary fix for a failing import lint
-    "import/no-unresolved": [
+    "no-useless-escape": "off",
+    "es/no-regexp-lookbehind-assertions": "error",
+    "react/self-closing-comp": ["error", {
+      "component": true,
+      "html": true
+    }],
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/await-thenable": "error",
+    "@typescript-eslint/no-misused-promises": [
       "error",
       {
-        "ignore": ["slate-drop-or-paste-images"]
+        "checksVoidReturn": false
       }
     ],
-    // Flow
-    "flowtype/require-valid-file-annotation": [
-      2,
-      "always",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
       {
-        "annotationStyle": "line"
+        "argsIgnorePattern": "^_",
+        "args": "after-used",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
+    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "import/newline-after-import": 2,
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        },
+        "pathGroups": [
+          {
+            "pattern": "@shared/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "@server/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/stores",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/stores/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/models/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/scenes/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/components/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ]
       }
     ],
-    "flowtype/space-after-type-colon": [2, "always"],
-    "flowtype/space-before-type-colon": [2, "never"],
-    // Enforce that code is formatted with prettier.
     "prettier/prettier": [
       "error",
       {
         "printWidth": 80,
-        "trailingComma": "es5",
-        "singleQuote": true
+        "trailingComma": "es5"
       }
     ]
   },
   "settings": {
-    "import/resolver": {
-      "node": {
-        "paths": ["app", "."]
-      }
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect"
     },
-    "flowtype": {
-      "onlyFilesWithFlowAnnotation": false
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {}
     }
-  },
-  "env": {
-    "jest": true
-  },
-  "globals": {
-    "__DEV__": true,
-    "SLACK_KEY": true,
-    "DEPLOYMENT": true,
-    "BASE_URL": true,
-    "BUGSNAG_KEY": true,
-    "afterAll": true,
-    "Bugsnag": true
   }
-}
+}

.flowconfig

@@ -1,40 +0,0 @@
-[include]
-.*/app/.*
-.*/server/.*
-.*/shared/.*
-
-[ignore]
-.*/node_modules/styled-components/.*
-.*/node_modules/polished/.*
-.*/node_modules/react-side-effect/.*
-.*/node_modules/fbjs/.*
-.*/node_modules/slate-edit-code/example/.*
-.*/node_modules/slate-edit-code/lib/.*
-.*/node_modules/slate-edit-list/.*
-.*/node_modules/slate-prism/.*
-.*/node_modules/config-chain/.*
-*.test.js
-
-[libs]
-
-[options]
-emoji=true
-
-module.system.node.resolve_dirname=node_modules
-module.system.node.resolve_dirname=app
-
-module.name_mapper='^\(.*\)\.s?css$' -> 'empty/object'
-module.name_mapper='^\(.*\)\.md$' -> 'empty/object'
-module.name_mapper='^shared\/\(.*\)$' -> '<PROJECT_ROOT>/shared/\1'
-
-module.file_ext=.js
-module.file_ext=.scss
-module.file_ext=.md
-module.file_ext=.json
-
-esproposal.decorators=ignore
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

.githooks/pre-commit/flow.sh

@@ -1 +0,0 @@
-yarn lint:flow

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: [outline]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots or videos to help explain your problem.
+
+**Outline (please complete the following information):**
+- Install: [getoutline.com or self hosted]
+- Version: [commit sha if self hosted]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Mobile (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Feature request
+    url: https://github.com/outline/outline/discussions/new?category=ideas
+    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
+    about: Ask questions and discuss running Outline with community members

.github/auto_assign.yml

@@ -0,0 +1,10 @@
+# Set to true to add reviewers to pull requests
+addReviewers: true
+
+# A list of reviewers to be added to pull requests (GitHub user name)
+reviewers: 
+  - tommoor
+
+# A list of keywords to be skipped the process that add reviewers if pull requests include it 
+skipKeywords:
+  - wip

.github/dependabot.yml

@@ -0,0 +1,15 @@
+# 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

@@ -1,21 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - security
-
-# 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

@@ -0,0 +1,61 @@
+# 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

@@ -0,0 +1,70 @@
+# 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

@@ -0,0 +1,29 @@
+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

@@ -1,8 +1,14 @@
 dist
+build
 node_modules/*
 .env
 .log
+.vscode/*
 npm-debug.log
 stats.json
 .DS_Store
 fakes3/*
+.idea
+*.pem
+*.key
+*.cert

.husky/pre-commit

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

.jestconfig.json

@@ -0,0 +1,63 @@
+{
+  "workerIdleMemoryLimit": "0.75",
+  "projects": [
+    {
+      "displayName": "server",
+      "roots": ["<rootDir>/server", "<rootDir>/plugins"],
+      "moduleNameMapper": {
+        "^@server/(.*)$": "<rootDir>/server/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js",
+        "<rootDir>/server/test/env.ts"
+      ],
+      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
+      "testEnvironment": "node",
+      "runner": "@getoutline/jest-runner-serial"
+    },
+    {
+      "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"
+      },
+      "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"
+      },
+      "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"
+      },
+      "setupFiles": ["<rootDir>/__mocks__/window.js"],
+      "testEnvironment": "jsdom",
+      "testEnvironmentOptions": {
+        "url": "http://localhost"
+      }
+    }
+  ]
+}

.vscode/settings.json

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

Dockerfile

@@ -1,13 +1,32 @@
-FROM node:8.11
-
-ENV PATH /opt/outline/node_modules/.bin:/opt/node_modules/.bin:$PATH
-ENV NODE_PATH /opt/outline/node_modules:/opt/node_modules
-ENV APP_PATH /opt/outline
-RUN mkdir -p $APP_PATH
+ARG APP_PATH=/opt/outline
+FROM outlinewiki/outline-base as base
 
+ARG APP_PATH
 WORKDIR $APP_PATH
-COPY . $APP_PATH
-RUN yarn
-RUN cp -r /opt/outline/node_modules /opt/node_modules
 
-CMD yarn build && yarn start
+# ---
+FROM node:18-alpine AS runner
+
+RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
+
+LABEL org.opencontainers.image.source="https://github.com/outline/outline"
+
+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
+
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs $APP_PATH/build
+
+USER nodejs
+
+EXPOSE 3000
+CMD ["yarn", "start"]

Dockerfile.base

@@ -0,0 +1,19 @@
+ARG APP_PATH=/opt/outline
+FROM node:18-alpine 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

@@ -1,19 +1,103 @@
-Copyright (c) 2017 Outline (https://www.getoutline.com/) and individual contributors.
-All rights reserved.
+Business Source License 1.1
 
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Parameters
 
-    1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Licensor:             General Outline, Inc.
+Licensed Work:        Outline 0.64.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
+                      Service.
 
-    2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the
-       documentation and/or other materials provided with the distribution.
+                      A “Document Service” is a commercial offering that
+                      allows third parties (other than your employees and
+                      contractors) to access the functionality of the
+                      Licensed Work by creating teams and documents
+                      controlled by such third parties.
 
-    3. Neither the name of the Outline nor the names of its contributors may be used to endorse or promote products derived from this software 
-       without specific prior written permission.
+Change Date:          2026-05-23
 
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
-CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
-PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
-WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
-ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Change License:       Apache License, Version 2.0
+
+For information about alternative licensing arrangements for the Software,
+please visit: https://www.getoutline.com
+
+Notice
+
+The Business Source License (this document, or the “License”) is not an Open
+Source license. However, the Licensed Work will eventually be made available
+under an Open Source License, as stated in this License.
+
+License text copyright (c) 2017 MariaDB Corporation Ab, All Rights Reserved.
+“Business Source License” is a trademark of MariaDB Corporation Ab.
+
+-----------------------------------------------------------------------------
+
+Business Source License 1.1
+
+Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative
+works, redistribute, and make non-production use of the Licensed Work. The
+Licensor may make an Additional Use Grant, above, permitting limited
+production use.
+
+Effective on the Change Date, or the fourth anniversary of the first publicly
+available distribution of a specific version of the Licensed Work under this
+License, whichever comes first, the Licensor hereby grants you rights under
+the terms of the Change License, and the rights granted in the paragraph
+above terminate.
+
+If your use of the Licensed Work does not comply with the requirements
+currently in effect as described in this License, you must purchase a
+commercial license from the Licensor, its affiliated entities, or authorized
+resellers, or you must refrain from using the Licensed Work.
+
+All copies of the original and modified Licensed Work, and derivative works
+of the Licensed Work, are subject to this License. This License applies
+separately for each version of the Licensed Work and the Change Date may vary
+for each version of the Licensed Work released by Licensor.
+
+You must conspicuously display this License on each original or modified copy
+of the Licensed Work. If you receive the Licensed Work in original or
+modified form from a third party, the terms and conditions set forth in this
+License apply to your use of that work.
+
+Any use of the Licensed Work in violation of this License will automatically
+terminate your rights under this License for the current and all other
+versions of the Licensed Work.
+
+This License does not grant you any right in any trademark or logo of
+Licensor or its affiliates (provided that you may use a trademark or logo of
+Licensor as expressly required by this License).
+
+TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON
+AN “AS IS” BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS,
+EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND
+TITLE.
+
+MariaDB hereby grants you permission to use this License’s text to license
+your works, and to refer to it using the trademark “Business Source License”,
+as long as you comply with the Covenants of Licensor below.
+
+Covenants of Licensor
+
+In consideration of the right to use this License’s text and the “Business
+Source License” name and trademark, Licensor covenants to MariaDB, and to all
+other recipients of the licensed work to be provided by Licensor:
+
+1. To specify as the Change License the GPL Version 2.0 or any later version,
+   or a license that is compatible with GPL Version 2.0 or a later version,
+   where “compatible” means that software provided under the Change License can
+   be included in a program with software provided under GPL Version 2.0 or a
+   later version. Licensor may specify additional Change Licenses without
+   limitation.
+
+2. To either: (a) specify an additional grant of rights to use that does not
+   impose any additional restriction on the right granted in this License, as
+   the Additional Use Grant; or (b) insert the text “None”.
+
+3. To specify a Change Date.
+
+4. Not to modify this License in any other way.

Makefile

@@ -1,16 +1,25 @@
 up:
 	docker-compose up -d redis postgres s3
-	docker-compose run --rm outline bash -c "yarn && yarn sequelize db:migrate"
-	docker-compose up outline
+	yarn install-local-ssl
+	yarn install --pure-lockfile
+	yarn dev:watch
 
 build:
 	docker-compose build --pull outline
 
 test:
-	docker-compose run --rm outline yarn test
+	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 run --rm outline yarn test:watch
+	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

Procfile

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

README.md

@@ -2,121 +2,100 @@
   <img src="https://user-images.githubusercontent.com/31465/34380645-bd67f474-eb0b-11e7-8d03-0151c1730654.png" height="29" />
 </p>
 <p align="center">
-  <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>
+  <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>
   <br/>
-  <img src="https://user-images.githubusercontent.com/31465/34456332-51e41eb0-ed9c-11e7-9fa9-20e7fa946494.jpg" alt="Outline" width="800" />
+  <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&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
-  <a href="https://spectrum.chat/outline" rel="nofollow"><img src="https://withspectrum.github.io/badge/badge.svg" alt="Join the community on Spectrum"/></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://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>
 </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).
+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).
 
 If you'd like to run your own copy of Outline or contribute to development then this is the place for you.
 
-## Installation
+# Installation
 
-Outline requires the following dependencies:
+Please see the [documentation](https://docs.getoutline.com/s/hosting/) for running your own copy of Outline in a production configuration.
 
-- Postgres >=9.5
-- Redis
-- Slack or Google developer application for OAuth
+If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).
 
-In development you can quickly get an environment running using Docker by following these steps:
+# Development
 
-1. Install [Docker for Desktop](https://www.docker.com) if you don't already have it.
-1. Register a Slack app at https://api.slack.com/apps
-1. Copy the file `.env.sample` to `.env` and fill out the Slack keys, everything
-   else should work well for development.
-1. Run `make up`. This will download dependencies, build and launch a development version of Outline.
+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.
 
-## Development
+## Contributing
 
-### Server
+Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
 
-To enable debugging statements, set the following env vars:
+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 liklihood of your 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
+
+## 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.
+
+## 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.
+
+HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable.
+
+## Tests
+
+We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested.
+
+To add new tests, write your tests with [Jest](https://facebook.github.io/jest/) and add a file with `.test.js` extension next to the tested code.
+
+```shell
+# To run all tests
+make test
+
+# To run backend tests in watch mode
+make watch
 ```
-DEBUG=sql,cache,presenters,events
+
+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
 ```
 
 ## Migrations
 
 Sequelize is used to create and run migrations, for example:
 
-```
-yarn sequelize migration:create
+```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
 ```
 
-## Structure
-
-Outline is composed of separate backend and frontend application which are both driven by the same Node process. As both are written in Javascript, they share some code but are mostly separate. We utilize latest language features, including `async`/`await`, and [Flow](https://flow.org/) typing. Prettier and ESLint are ran as pre-commit hooks.
-
-### 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.
-
-The editor itself is built ontop of [Slate](https://github.com/ianstormtaylor/slate) and hosted in a separate repository to encourage reuse: [rich-markdown-editor](https://github.com/outline/rich-markdown-editor)
-
-- `app/` - Frontend React application
-- `app/scenes` - Full page views
-- `app/components` - Reusable React components
-- `app/stores` - Global state stores
-- `app/models` - State models
-- `app/types` - Flow types for non-models
-
-### Backend
-
-Backend is driven by [Koa](http://koajs.com/) (API, web server), [Sequelize](http://docs.sequelizejs.com/) (database) and React for public pages and emails.
-
-- `server/api` - API endpoints
-- `server/emails`  - React rendered email templates
-- `server/models` - Database models (Sequelize)
-- `server/pages` - Server-side rendered public pages (React)
-- `server/presenters` - API responses for database models
-- `shared` - Code shared between frontend and backend applications
-
-## Tests
-
-We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested, and it's generally good to add tests for backend features and code.
-
-To add new tests, write your tests with [Jest](https://facebook.github.io/jest/) and add a file with `.test.js` extension next to the tested code.
-
-```shell
-# To run all tests
-yarn test
-
-# To run backend tests
-yarn test:server
-
-# To run frontend tests
-yarn test:app
-```
-
-## Contributing
-
-Outline is still built and maintained by a small team – we'd love your help to fix bugs and add features!
-
-However, before working on 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 our [Spectrum community](https://spectrum.chat/outline). This way we can ensure that an approach is agreed on before code is written and will hopefully help to get your contributions integrated faster! Take a look at our [roadmap](https://www.getoutline.com/share/3e6cb2b5-d68b-4ad8-8900-062476820311).
-
-If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
-
-* 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
-* Helping others on Spectrum
-
 ## License
 
-Outline is [BSD licensed](/blob/master/LICENSE).
+Outline is [BSL 1.1 licensed](LICENSE).

__mocks__/console.js

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

__mocks__/styleMock.js

@@ -1,2 +0,0 @@
-import idObj from 'identity-obj-proxy';
-export default idObj;

__mocks__/window.js

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

app.json

@@ -0,0 +1,202 @@
+{
+  "name": "Outline",
+  "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"],
+  "success_url": "/",
+  "formation": {
+    "web": {
+      "quantity": 1,
+      "size": "Hobby"
+    }
+  },
+  "image": "heroku/node",
+  "addons": [
+    {
+      "plan": "heroku-redis"
+    },
+    {
+      "plan": "heroku-postgresql"
+    }
+  ],
+  "scripts": {
+    "postdeploy": "yarn sequelize db:migrate"
+  },
+  "env": {
+    "NODE_ENV": {
+      "value": "production",
+      "required": true
+    },
+    "SECRET_KEY": {
+      "description": "A 32-character secret key, generate with openssl rand -hex 32",
+      "generator": "secret",
+      "required": true
+    },
+    "ENABLE_UPDATES": {
+      "value": "true",
+      "required": true
+    },
+    "URL": {
+      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
+      "required": true
+    },
+    "GOOGLE_CLIENT_ID": {
+      "description": "See https://developers.google.com/identity/protocols/OAuth2 to create a new Google OAuth client. You must configure at least one of Slack or Google to control login.",
+      "required": false
+    },
+    "GOOGLE_CLIENT_SECRET": {
+      "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",
+      "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_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": {
+      "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": {
+      "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
+      "required": false
+    },
+    "SLACK_VERIFICATION_TOKEN": {
+      "description": "Your Slack verification token - PLxk6OlXXXXXVj3YYYY",
+      "required": false
+    },
+    "SLACK_APP_ID": {
+      "description": "A0XXXXXXXXX",
+      "required": false
+    },
+    "AWS_ACCESS_KEY_ID": {
+      "description": "Needed to save file uploads. Optional for development / testing",
+      "required": false
+    },
+    "AWS_SECRET_ACCESS_KEY": {
+      "description": "",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_BUCKET_NAME": {
+      "description": "yourbucket.example.com",
+      "required": false
+    },
+    "AWS_S3_UPLOAD_BUCKET_URL": {
+      "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",
+      "required": false
+    },
+    "AWS_REGION": {
+      "value": "us-east-1",
+      "description": "Region in which the above S3 bucket exists",
+      "required": false
+    },
+    "AWS_S3_ACL": {
+      "value": "private",
+      "description": "S3 canned ACL for document attachments",
+      "required": false
+    },
+    "SMTP_HOST": {
+      "description": "smtp.example.com (optional)",
+      "required": false
+    },
+    "SMTP_PORT": {
+      "description": "1234 (optional)",
+      "required": false
+    },
+    "SMTP_USERNAME": {
+      "description": "me@example.com (optional)",
+      "required": false
+    },
+    "SMTP_PASSWORD": {
+      "description": "(optional)",
+      "required": false
+    },
+    "SMTP_FROM_EMAIL": {
+      "description": "wiki@example.com (optional)",
+      "required": false
+    },
+    "SMTP_REPLY_EMAIL": {
+      "description": "wikireply@example.com (optional)",
+      "required": false
+    },
+    "SMTP_SECURE": {
+      "value": "true",
+      "description": "Use a secure SMTP connection (optional)",
+      "required": false
+    },
+    "SMTP_TLS_CIPHERS": {
+      "description": "Override SMTP cipher configuration (optional)",
+      "required": false
+    },
+    "GOOGLE_ANALYTICS_ID": {
+      "description": "G-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.",
+      "required": false
+    }
+  }
+}

app/.eslintrc

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

app/actions/definitions/collections.tsx

@@ -0,0 +1,203 @@
+import {
+  CollectionIcon,
+  EditIcon,
+  PadlockIcon,
+  PlusIcon,
+  StarredIcon,
+  TrashIcon,
+  UnstarredIcon,
+} from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import Collection from "~/models/Collection";
+import CollectionEdit from "~/scenes/CollectionEdit";
+import CollectionNew from "~/scenes/CollectionNew";
+import CollectionPermissions from "~/scenes/CollectionPermissions";
+import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
+import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
+import { createAction } from "~/actions";
+import { CollectionSection } from "~/actions/sections";
+import history from "~/utils/history";
+
+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.url,
+      name: collection.name,
+      icon: <ColorCollectionIcon collection={collection} />,
+      section: CollectionSection,
+      perform: () => history.push(collection.url),
+    }));
+  },
+});
+
+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, activeCollectionId }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      title: t("Collection permissions"),
+      content: <CollectionPermissions 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();
+  },
+});
+
+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,
+  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({
+      isCentered: true,
+      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

@@ -0,0 +1,62 @@
+import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import { createAction } from "~/actions";
+import { DeveloperSection } from "~/actions/sections";
+import env from "~/env";
+import { client } from "~/utils/ApiClient";
+import Logger from "~/utils/Logger";
+import { deleteAllDatabases } from "~/utils/developer";
+
+export const clearIndexedDB = createAction({
+  name: ({ t }) => t("Delete IndexedDB cache"),
+  icon: <TrashIcon />,
+  keywords: "cache clear database",
+  section: DeveloperSection,
+  perform: async ({ t }) => {
+    await deleteAllDatabases();
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
+  },
+});
+
+export const createTestUsers = createAction({
+  name: "Create test users",
+  icon: <UserIcon />,
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  perform: async () => {
+    const count = 10;
+
+    try {
+      await client.post("/developer.create_test_users", { count });
+      stores.toasts.showToast(`${count} test users created`);
+    } catch (err) {
+      stores.toasts.showToast(err.message, { type: "error" });
+    }
+  },
+});
+
+export const toggleDebugLogging = createAction({
+  name: ({ t }) => t("Toggle debug logging"),
+  icon: <ToolsIcon />,
+  section: DeveloperSection,
+  perform: async ({ t }) => {
+    Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
+    stores.toasts.showToast(
+      Logger.debugLoggingEnabled
+        ? t("Debug logging enabled")
+        : t("Debug logging disabled")
+    );
+  },
+});
+
+export const developer = createAction({
+  name: ({ t }) => t("Development"),
+  keywords: "debug",
+  icon: <ToolsIcon />,
+  iconInContextMenu: false,
+  section: DeveloperSection,
+  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
+});
+
+export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -0,0 +1,816 @@
+import invariant from "invariant";
+import {
+  DownloadIcon,
+  DuplicateIcon,
+  StarredIcon,
+  PrintIcon,
+  UnstarredIcon,
+  DocumentIcon,
+  NewDocumentIcon,
+  ShapesIcon,
+  ImportIcon,
+  PinIcon,
+  SearchIcon,
+  UnsubscribeIcon,
+  SubscribeIcon,
+  MoveIcon,
+  TrashIcon,
+  CrossIcon,
+  ArchiveIcon,
+  ShuffleIcon,
+  HistoryIcon,
+  LightBulbIcon,
+  UnpublishIcon,
+  PublishIcon,
+  CommentIcon,
+} from "outline-icons";
+import * as React from "react";
+import { ExportContentType, TeamPreference } from "@shared/types";
+import { getEventFiles } from "@shared/utils/files";
+import DocumentDelete from "~/scenes/DocumentDelete";
+import DocumentMove from "~/scenes/DocumentMove";
+import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
+import DocumentPublish from "~/scenes/DocumentPublish";
+import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
+import { createAction } from "~/actions";
+import { DocumentSection } from "~/actions/sections";
+import env from "~/env";
+import history from "~/utils/history";
+import {
+  documentInsightsPath,
+  documentHistoryPath,
+  homePath,
+  newDocumentPath,
+  searchPath,
+} from "~/utils/routeHelpers";
+
+export const openDocument = createAction({
+  name: ({ t }) => t("Open document"),
+  analyticsName: "Open document",
+  section: DocumentSection,
+  shortcut: ["o", "d"],
+  keywords: "go to",
+  icon: <DocumentIcon />,
+  children: ({ stores }) => {
+    const paths = stores.collections.pathsToDocuments;
+
+    return paths
+      .filter((path) => path.type === "document")
+      .map((path) => ({
+        // Note: using url which includes the slug rather than id here to bust
+        // cache if the document is renamed
+        id: path.url,
+        name: path.title,
+        icon: function _Icon() {
+          return stores.documents.get(path.id)?.isStarred ? (
+            <StarredIcon />
+          ) : null;
+        },
+        section: DocumentSection,
+        perform: () => history.push(path.url),
+      }));
+  },
+});
+
+export const createDocument = createAction({
+  name: ({ t }) => t("New document"),
+  analyticsName: "New document",
+  section: DocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, stores }) =>
+    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
+  perform: ({ activeCollectionId, inStarredSection }) =>
+    history.push(newDocumentPath(activeCollectionId), {
+      starred: inStarredSection,
+    }),
+});
+
+export const starDocument = createAction({
+  name: ({ t }) => t("Star"),
+  analyticsName: "Star document",
+  section: DocumentSection,
+  icon: <StarredIcon />,
+  keywords: "favorite bookmark",
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !document?.isStarred && stores.policies.abilities(activeDocumentId).star
+    );
+  },
+  perform: async ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    await document?.star();
+  },
+});
+
+export const unstarDocument = createAction({
+  name: ({ t }) => t("Unstar"),
+  analyticsName: "Unstar document",
+  section: DocumentSection,
+  icon: <UnstarredIcon />,
+  keywords: "unfavorite unbookmark",
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.isStarred &&
+      stores.policies.abilities(activeDocumentId).unstar
+    );
+  },
+  perform: async ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    await document?.unstar();
+  },
+});
+
+export const publishDocument = createAction({
+  name: ({ t }) => t("Publish"),
+  analyticsName: "Publish document",
+  section: DocumentSection,
+  icon: <PublishIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.isDraft && stores.policies.abilities(activeDocumentId).update
+    );
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    if (document?.publishedAt) {
+      return;
+    }
+
+    if (document?.collectionId) {
+      await document.save(undefined, {
+        publish: true,
+      });
+      stores.toasts.showToast(t("Document published"), {
+        type: "success",
+      });
+    } else if (document) {
+      stores.dialogs.openModal({
+        title: t("Publish document"),
+        isCentered: true,
+        content: <DocumentPublish document={document} />,
+      });
+    }
+  },
+});
+
+export const unpublishDocument = createAction({
+  name: ({ t }) => t("Unpublish"),
+  analyticsName: "Unpublish document",
+  section: DocumentSection,
+  icon: <UnpublishIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return stores.policies.abilities(activeDocumentId).unpublish;
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    await document?.unpublish();
+
+    stores.toasts.showToast(t("Document unpublished"), {
+      type: "success",
+    });
+  },
+});
+
+export const subscribeDocument = createAction({
+  name: ({ t }) => t("Subscribe"),
+  analyticsName: "Subscribe to document",
+  section: DocumentSection,
+  icon: <SubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).subscribe
+    );
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    await document?.subscribe();
+
+    stores.toasts.showToast(t("Subscribed to document notifications"), {
+      type: "success",
+    });
+  },
+});
+
+export const unsubscribeDocument = createAction({
+  name: ({ t }) => t("Unsubscribe"),
+  analyticsName: "Unsubscribe from document",
+  section: DocumentSection,
+  icon: <UnsubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !!document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).unsubscribe
+    );
+  },
+  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
+    if (!activeDocumentId || !currentUserId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    await document?.unsubscribe(currentUserId);
+
+    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
+      type: "success",
+    });
+  },
+});
+
+export const downloadDocumentAsHTML = createAction({
+  name: ({ t }) => t("HTML"),
+  analyticsName: "Download document as HTML",
+  section: DocumentSection,
+  keywords: "html export",
+  icon: <DownloadIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: async ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    await document?.download(ExportContentType.Html);
+  },
+});
+
+export const downloadDocumentAsPDF = createAction({
+  name: ({ t }) => t("PDF"),
+  analyticsName: "Download document as PDF",
+  section: DocumentSection,
+  keywords: "export",
+  icon: <DownloadIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId &&
+    stores.policies.abilities(activeDocumentId).download &&
+    env.PDF_EXPORT_ENABLED,
+  perform: ({ activeDocumentId, t, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
+      type: "loading",
+      timeout: 30 * 1000,
+    });
+
+    const document = stores.documents.get(activeDocumentId);
+    document
+      ?.download(ExportContentType.Pdf)
+      .finally(() => id && stores.toasts.hideToast(id));
+  },
+});
+
+export const downloadDocumentAsMarkdown = createAction({
+  name: ({ t }) => t("Markdown"),
+  analyticsName: "Download document as Markdown",
+  section: DocumentSection,
+  keywords: "md markdown export",
+  icon: <DownloadIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: async ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    await document?.download(ExportContentType.Markdown);
+  },
+});
+
+export const downloadDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Download") : t("Download document"),
+  analyticsName: "Download document",
+  section: DocumentSection,
+  icon: <DownloadIcon />,
+  keywords: "export",
+  children: [
+    downloadDocumentAsHTML,
+    downloadDocumentAsPDF,
+    downloadDocumentAsMarkdown,
+  ],
+});
+
+export const duplicateDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Duplicate") : t("Duplicate document"),
+  analyticsName: "Duplicate document",
+  section: DocumentSection,
+  icon: <DuplicateIcon />,
+  keywords: "copy",
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
+  perform: async ({ activeDocumentId, t, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    invariant(document, "Document must exist");
+    const duped = await document.duplicate();
+    // when duplicating, go straight to the duplicated document content
+    history.push(duped.url);
+    stores.toasts.showToast(t("Document duplicated"), {
+      type: "success",
+    });
+  },
+});
+
+/**
+ * Pin a document to a collection. Pinned documents will be displayed at the top
+ * of the collection for all collection members to see.
+ */
+export const pinDocumentToCollection = createAction({
+  name: ({ activeDocumentId = "", t, stores }) => {
+    const selectedDocument = stores.documents.get(activeDocumentId);
+    const collectionName = selectedDocument
+      ? stores.documents.getCollectionForDocument(selectedDocument)?.name
+      : t("collection");
+
+    return t("Pin to {{collectionName}}", {
+      collectionName,
+    });
+  },
+  analyticsName: "Pin document to collection",
+  section: DocumentSection,
+  icon: <PinIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
+    if (!activeDocumentId || !activeCollectionId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!stores.policies.abilities(activeDocumentId).pin && !document?.pinned
+    );
+  },
+  perform: async ({ activeDocumentId, activeCollectionId, t, stores }) => {
+    if (!activeDocumentId || !activeCollectionId) {
+      return;
+    }
+
+    try {
+      const document = stores.documents.get(activeDocumentId);
+      await document?.pin(document.collectionId);
+
+      const collection = stores.collections.get(activeCollectionId);
+
+      if (!collection || !location.pathname.startsWith(collection?.url)) {
+        stores.toasts.showToast(t("Pinned to collection"));
+      }
+    } catch (err) {
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
+    }
+  },
+});
+
+/**
+ * Pin a document to team home. Pinned documents will be displayed at the top
+ * of the home screen for all team members to see.
+ */
+export const pinDocumentToHome = createAction({
+  name: ({ t }) => t("Pin to home"),
+  analyticsName: "Pin document to home",
+  section: DocumentSection,
+  icon: <PinIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, currentTeamId, stores }) => {
+    if (!currentTeamId || !activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !!stores.policies.abilities(activeDocumentId).pinToHome &&
+      !document?.pinnedToHome
+    );
+  },
+  perform: async ({ activeDocumentId, location, t, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+
+    try {
+      await document?.pin();
+
+      if (location.pathname !== homePath()) {
+        stores.toasts.showToast(t("Pinned to team home"));
+      }
+    } catch (err) {
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
+    }
+  },
+});
+
+export const pinDocument = createAction({
+  name: ({ t }) => t("Pin"),
+  analyticsName: "Pin document",
+  section: DocumentSection,
+  icon: <PinIcon />,
+  children: [pinDocumentToCollection, pinDocumentToHome],
+});
+
+export const printDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Print") : t("Print document"),
+  analyticsName: "Print document",
+  section: DocumentSection,
+  icon: <PrintIcon />,
+  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
+  perform: async () => {
+    queueMicrotask(window.print);
+  },
+});
+
+export const importDocument = createAction({
+  name: ({ t }) => t("Import document"),
+  analyticsName: "Import document",
+  section: DocumentSection,
+  icon: <ImportIcon />,
+  keywords: "upload",
+  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
+    if (activeDocumentId) {
+      return !!stores.policies.abilities(activeDocumentId).createChildDocument;
+    }
+
+    if (activeCollectionId) {
+      return !!stores.policies.abilities(activeCollectionId).update;
+    }
+
+    return false;
+  },
+  perform: ({ activeCollectionId, activeDocumentId, stores }) => {
+    const { documents, toasts } = stores;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = documents.importFileTypes.join(", ");
+
+    input.onchange = async (ev) => {
+      const files = getEventFiles(ev);
+
+      try {
+        const file = files[0];
+        const document = await documents.import(
+          file,
+          activeDocumentId,
+          activeCollectionId,
+          {
+            publish: true,
+          }
+        );
+        history.push(document.url);
+      } catch (err) {
+        toasts.showToast(err.message, {
+          type: "error",
+        });
+        throw err;
+      }
+    };
+
+    input.click();
+  },
+});
+
+export const createTemplate = createAction({
+  name: ({ t }) => t("Templatize"),
+  analyticsName: "Templatize document",
+  section: DocumentSection,
+  icon: <ShapesIcon />,
+  keywords: "new create template",
+  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return !!(
+      !!activeCollectionId &&
+      stores.policies.abilities(activeCollectionId).update &&
+      !document?.isTemplate &&
+      !document?.isDeleted
+    );
+  },
+  perform: ({ activeDocumentId, stores, t, event }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    stores.dialogs.openModal({
+      title: t("Create template"),
+      isCentered: true,
+      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
+    });
+  },
+});
+
+export const openRandomDocument = createAction({
+  id: "random",
+  name: ({ t }) => t(`Open random document`),
+  analyticsName: "Open random document",
+  section: DocumentSection,
+  icon: <ShuffleIcon />,
+  perform: ({ stores, activeDocumentId }) => {
+    const documentPaths = stores.collections.pathsToDocuments.filter(
+      (path) => path.type === "document" && path.id !== activeDocumentId
+    );
+    const documentPath =
+      documentPaths[Math.round(Math.random() * documentPaths.length)];
+
+    if (documentPath) {
+      history.push(documentPath.url);
+    }
+  },
+});
+
+export const searchDocumentsForQuery = (searchQuery: string) =>
+  createAction({
+    id: "search",
+    name: ({ t }) =>
+      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
+    analyticsName: "Search documents",
+    section: DocumentSection,
+    icon: <SearchIcon />,
+    perform: () => history.push(searchPath(searchQuery)),
+    visible: ({ location }) => location.pathname !== searchPath(),
+  });
+
+export const moveDocument = createAction({
+  name: ({ t }) => t("Move"),
+  analyticsName: "Move document",
+  section: DocumentSection,
+  icon: <MoveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).move;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Move {{ documentType }}", {
+          documentType: document.noun,
+        }),
+        isCentered: true,
+        content: <DocumentMove document={document} />,
+      });
+    }
+  },
+});
+
+export const archiveDocument = createAction({
+  name: ({ t }) => t("Archive"),
+  analyticsName: "Archive document",
+  section: DocumentSection,
+  icon: <ArchiveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).archive;
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      await document.archive();
+      stores.toasts.showToast(t("Document archived"), {
+        type: "success",
+      });
+    }
+  },
+});
+
+export const deleteDocument = createAction({
+  name: ({ t }) => t("Delete"),
+  analyticsName: "Delete document",
+  section: DocumentSection,
+  icon: <TrashIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).delete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const permanentlyDeleteDocument = createAction({
+  name: ({ t }) => t("Permanently delete"),
+  analyticsName: "Permanently delete document",
+  section: DocumentSection,
+  icon: <CrossIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).permanentDelete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Permanently delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentPermanentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const openDocumentComments = createAction({
+  name: ({ t }) => t("Comments"),
+  analyticsName: "Open comments",
+  section: DocumentSection,
+  icon: <CommentIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return (
+      !!activeDocumentId &&
+      can.read &&
+      !can.restore &&
+      !!stores.auth.team?.getPreference(TeamPreference.Commenting)
+    );
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    stores.ui.toggleComments(activeDocumentId);
+  },
+});
+
+export const openDocumentHistory = createAction({
+  name: ({ t }) => t("History"),
+  analyticsName: "Open document history",
+  section: DocumentSection,
+  icon: <HistoryIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return !!activeDocumentId && can.read && !can.restore;
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+    history.push(documentHistoryPath(document));
+  },
+});
+
+export const openDocumentInsights = createAction({
+  name: ({ t }) => t("Insights"),
+  analyticsName: "Open document insights",
+  section: DocumentSection,
+  icon: <LightBulbIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return !!activeDocumentId && can.read;
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+    history.push(documentInsightsPath(document));
+  },
+});
+
+export const rootDocumentActions = [
+  openDocument,
+  archiveDocument,
+  createDocument,
+  createTemplate,
+  deleteDocument,
+  importDocument,
+  downloadDocument,
+  starDocument,
+  unstarDocument,
+  publishDocument,
+  unpublishDocument,
+  subscribeDocument,
+  unsubscribeDocument,
+  duplicateDocument,
+  moveDocument,
+  openRandomDocument,
+  permanentlyDeleteDocument,
+  printDocument,
+  pinDocumentToCollection,
+  pinDocumentToHome,
+  openDocumentComments,
+  openDocumentHistory,
+  openDocumentInsights,
+];

app/actions/definitions/navigation.tsx

@@ -0,0 +1,230 @@
+import {
+  HomeIcon,
+  SearchIcon,
+  ArchiveIcon,
+  TrashIcon,
+  EditIcon,
+  OpenIcon,
+  SettingsIcon,
+  ShapesIcon,
+  KeyboardIcon,
+  EmailIcon,
+  LogoutIcon,
+  ProfileIcon,
+  BrowserIcon,
+} from "outline-icons";
+import * as React from "react";
+import {
+  developersUrl,
+  changelogUrl,
+  feedbackUrl,
+  githubIssuesUrl,
+} from "@shared/utils/urlHelpers";
+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 Desktop from "~/utils/Desktop";
+import { isMac } from "~/utils/browser";
+import history from "~/utils/history";
+import isCloudHosted from "~/utils/isCloudHosted";
+import {
+  homePath,
+  searchPath,
+  draftsPath,
+  templatesPath,
+  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: <EditIcon />,
+  perform: () => history.push(draftsPath()),
+  visible: ({ location }) => location.pathname !== draftsPath(),
+});
+
+export const navigateToTemplates = createAction({
+  name: ({ t }) => t("Templates"),
+  analyticsName: "Navigate to templates",
+  section: NavigationSection,
+  icon: <ShapesIcon />,
+  perform: () => history.push(templatesPath()),
+  visible: ({ location }) => location.pathname !== templatesPath(),
+});
+
+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 }) =>
+    stores.policies.abilities(stores.auth.team?.id || "").update,
+  perform: () => history.push(settingsPath("details")),
+});
+
+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 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 openAPIDocumentation = createAction({
+  name: ({ t }) => t("API documentation"),
+  analyticsName: "Open API documentation",
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <OpenIcon />,
+  perform: () => window.open(developersUrl()),
+});
+
+export const toggleSidebar = createAction({
+  name: ({ t }) => t("Toggle sidebar"),
+  analyticsName: "Toggle sidebar",
+  keywords: "hide show navigation",
+  section: NavigationSection,
+  perform: ({ stores }) => 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(feedbackUrl()),
+});
+
+export const openBugReportUrl = createAction({
+  name: ({ t }) => t("Report a bug"),
+  analyticsName: "Open bug report",
+  section: NavigationSection,
+  perform: () => window.open(githubIssuesUrl()),
+});
+
+export const openChangelog = createAction({
+  name: ({ t }) => t("Changelog"),
+  analyticsName: "Open changelog",
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <OpenIcon />,
+  perform: () => window.open(changelogUrl()),
+});
+
+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: () => stores.auth.logout(),
+});
+
+export const rootNavigationActions = [
+  navigateToHome,
+  navigateToDrafts,
+  navigateToTemplates,
+  navigateToArchive,
+  navigateToTrash,
+  downloadApp,
+  openAPIDocumentation,
+  openFeedbackUrl,
+  openBugReportUrl,
+  openChangelog,
+  openKeyboardShortcuts,
+  toggleSidebar,
+  logout,
+];

app/actions/definitions/notifications.tsx

@@ -0,0 +1,16 @@
+import { 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 rootNotificationActions = [markNotificationsAsRead];

app/actions/definitions/revisions.tsx

@@ -0,0 +1,79 @@
+import copy from "copy-to-clipboard";
+import { LinkIcon, RestoreIcon } from "outline-icons";
+import * as React from "react";
+import { matchPath } from "react-router-dom";
+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: () => {
+        stores.toasts.showToast(t("Link copied"), {
+          type: "info",
+        });
+      },
+    });
+  },
+});
+
+export const rootRevisionActions = [];

app/actions/definitions/settings.tsx

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,73 @@
+import { 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 TeamNew from "~/scenes/TeamNew";
+import TeamLogo from "~/components/TeamLogo";
+import { createAction } from "~/actions";
+import { ActionContext } from "~/types";
+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"),
+        content: <TeamNew user={user} />,
+      });
+  },
+});
+
+const StyledTeamLogo = styled(TeamLogo)`
+  border-radius: 2px;
+  border: 0;
+`;
+
+export const rootTeamActions = [switchTeam, createTeam];

app/actions/definitions/users.tsx

@@ -0,0 +1,52 @@
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import Invite from "~/scenes/Invite";
+import { 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 people"),
+      content: <Invite 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"),
+        isCentered: true,
+        content: (
+          <UserDeleteDialog
+            user={user}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    },
+  });
+
+export const rootUserActions = [inviteUser];

app/actions/index.ts

@@ -0,0 +1,122 @@
+import { flattenDeep } from "lodash";
+import * as React from "react";
+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: () => {
+      try {
+        action.perform?.(context);
+      } catch (err) {
+        context.stores.toasts.showToast(err.message, {
+          type: "error",
+        });
+      }
+    },
+    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 ? () => action.perform?.(context) : undefined,
+    },
+    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+  ].concat(children.map((child) => ({ ...child, parent: action.id })));
+}

app/actions/root.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,22 @@
+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");

app/components/ActionButton.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable react/prop-types */
+import * as React from "react";
+import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
+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 [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 = action.perform?.(actionContext);
+                if (response?.finally) {
+                  setExecuting(true);
+                  response.finally(() => setExecuting(false));
+                }
+              }
+            : rest.onClick
+        }
+      >
+        {rest.children ?? label}
+      </button>
+    );
+
+    if (tooltip) {
+      return <Tooltip {...tooltip}>{button}</Tooltip>;
+    }
+
+    return button;
+  }
+);
+
+export default ActionButton;

app/components/Actions.ts

@@ -1,26 +1,27 @@
-// @flow
-import styled from 'styled-components';
-import breakpoint from 'styled-components-breakpoint';
-import Flex from 'shared/components/Flex';
+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;
 
-  a {
-    color: ${props => props.theme.text};
-    height: 24px;
+  &:empty {
+    display: none;
   }
 `;
 
 export const Separator = styled.div`
+  flex-shrink: 0;
   margin-left: 12px;
   width: 1px;
-  height: 20px;
-  background: ${props => props.theme.slateLight};
+  height: 28px;
+  background: ${s("divider")};
 `;
 
 const Actions = styled(Flex)`
@@ -29,15 +30,16 @@ const Actions = styled(Flex)`
   right: 0;
   left: 0;
   border-radius: 3px;
-  background: rgba(255, 255, 255, 0.9);
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   padding: 12px;
-  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
 
   @media print {
     display: none;
   }
 
-  ${breakpoint('tablet')`
+  ${breakpoint("tablet")`
     left: auto;
     padding: 24px;
   `};

app/components/Alert.js

@@ -1,36 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observer } from 'mobx-react';
-import Flex from 'shared/components/Flex';
-import styled from 'styled-components';
-
-type Props = {
-  children: React.Node,
-  type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
-};
-
-@observer
-class Alert extends React.Component<Props> {
-  defaultProps = {
-    type: 'info',
-  };
-
-  render() {
-    return (
-      <Container align="center" justify="center" type={this.props.type}>
-        {this.props.children}
-      </Container>
-    );
-  }
-}
-
-const Container = styled(Flex)`
-  height: $headerHeight;
-  color: #ffffff;
-  font-size: 14px;
-  line-height: 1;
-
-  background-color: ${({ theme, type }) => theme.color[type]};
-`;
-
-export default Alert;

app/components/Analytics.js

@@ -1,35 +0,0 @@
-// @flow
-/* global ga */
-import * as React from 'react';
-
-export default class Analytics extends React.Component<*> {
-  componentDidMount() {
-    if (!process.env.GOOGLE_ANALYTICS_ID) return;
-
-    // standard Google Analytics script
-    window.ga =
-      window.ga ||
-      function() {
-        // $FlowIssue
-        (ga.q = ga.q || []).push(arguments);
-      };
-
-    // $FlowIssue
-    ga.l = +new Date();
-    ga('create', process.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;
-
-    if (document.body) {
-      document.body.appendChild(script);
-    }
-  }
-
-  render() {
-    return this.props.children || null;
-  }
-}

app/components/Analytics.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable prefer-rest-params */
+/* global ga */
+import { escape } from "lodash";
+import * as React from "react";
+import { IntegrationService } from "@shared/types";
+import env from "~/env";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+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.analytics.service === IntegrationService.GoogleAnalytics) {
+      measurementIds.push(escape(env.analytics.settings?.measurementId));
+    }
+    if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
+      measurementIds.push(env.GOOGLE_ANALYTICS_ID);
+    }
+    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);
+  }, []);
+
+  return <>{children}</>;
+};
+
+export default Analytics;

app/components/Arrow.tsx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,55 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import {
+  useCompositeState,
+  Composite,
+  CompositeStateReturn,
+} from "reakit/Composite";
+
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+  children: (composite: CompositeStateReturn) => React.ReactNode;
+  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
+};
+
+function ArrowKeyNavigation(
+  { children, onEscape, ...rest }: Props,
+  ref: React.RefObject<HTMLDivElement>
+) {
+  const composite = useCompositeState();
+
+  const handleKeyDown = React.useCallback(
+    (ev) => {
+      if (onEscape) {
+        if (ev.nativeEvent.isComposing) {
+          return;
+        }
+
+        if (ev.key === "Escape") {
+          onEscape(ev);
+        }
+
+        if (
+          ev.key === "ArrowUp" &&
+          composite.currentId === composite.items[0].id
+        ) {
+          onEscape(ev);
+        }
+      }
+    },
+    [composite.currentId, composite.items, onEscape]
+  );
+
+  return (
+    <Composite
+      {...rest}
+      {...composite}
+      onKeyDown={handleKeyDown}
+      role="menu"
+      ref={ref}
+    >
+      {children(composite)}
+    </Composite>
+  );
+}
+
+export default observer(React.forwardRef(ArrowKeyNavigation));

app/components/AuthLogo/SlackLogo.tsx

@@ -0,0 +1,41 @@
+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/Authenticated.js

@@ -1,41 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observer, inject } from 'mobx-react';
-import AuthStore from 'stores/AuthStore';
-import LoadingIndicator from 'components/LoadingIndicator';
-import { isCustomSubdomain } from 'shared/utils/domains';
-
-type Props = {
-  auth: AuthStore,
-  children?: React.Node,
-};
-
-const Authenticated = observer(({ auth, children }: Props) => {
-  if (auth.authenticated) {
-    const { user, team } = auth;
-    const { hostname } = window.location;
-
-    if (!team || !user) {
-      return <LoadingIndicator />;
-    }
-
-    // If we're authenticated but viewing a subdomain that doesn't match the
-    // currently authenticated team then kick the user to the teams subdomain.
-    if (
-      process.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();
-  return null;
-});
-
-export default inject('auth')(Authenticated);

app/components/Authenticated.tsx

@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Redirect } from "react-router-dom";
+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 language = 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(() => {
+    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

@@ -0,0 +1,137 @@
+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 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";
+
+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 can = usePolicy(ui.activeCollectionId);
+  const { user, team } = auth;
+  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 || !can.createDocument) {
+      return;
+    }
+    history.push(newDocumentPath(activeCollectionId));
+  };
+
+  if (auth.isSuspended) {
+    return <ErrorSuspended />;
+  }
+
+  const showSidebar = auth.authenticated && user && team;
+
+  const sidebar = showSidebar ? (
+    <Fade>
+      <Switch>
+        <Route path={settingsPath()} component={SettingsSidebar} />
+        <Route component={Sidebar} />
+      </Switch>
+    </Fade>
+  ) : undefined;
+
+  const showHistory = !!matchPath(location.pathname, {
+    path: matchDocumentHistory,
+  });
+  const showInsights = !!matchPath(location.pathname, {
+    path: matchDocumentInsights,
+  });
+  const showComments =
+    !showInsights &&
+    !showHistory &&
+    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}>
+      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
+        <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+        <RegisterKeyDown trigger="t" handler={goToSearch} />
+        <RegisterKeyDown trigger="/" handler={goToSearch} />
+        {children}
+        <React.Suspense fallback={null}>
+          <CommandBar />
+        </React.Suspense>
+      </Layout>
+    </DocumentContext.Provider>
+  );
+};
+
+export default observer(AuthenticatedLayout);

app/components/Avatar/Avatar.js

@@ -1,46 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import placeholder from './placeholder.png';
-
-type Props = {
-  src: string,
-  size: number,
-};
-
-@observer
-class Avatar extends React.Component<Props> {
-  @observable error: boolean;
-
-  static defaultProps = {
-    size: 24,
-  };
-
-  handleError = () => {
-    this.error = true;
-  };
-
-  render() {
-    const { src, ...rest } = this.props;
-
-    return (
-      <CircleImg
-        onError={this.handleError}
-        src={this.error ? placeholder : src}
-        {...rest}
-      />
-    );
-  }
-}
-
-const CircleImg = styled.img`
-  width: ${props => props.size}px;
-  height: ${props => props.size}px;
-  border-radius: 50%;
-  border: 2px solid ${props => props.theme.white};
-  flex-shrink: 0;
-`;
-
-export default Avatar;

app/components/Avatar/Avatar.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import styled from "styled-components";
+import useBoolean from "~/hooks/useBoolean";
+import Initials from "./Initials";
+
+export enum AvatarSize {
+  Small = 16,
+  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.tsx

@@ -0,0 +1,115 @@
+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
+        tooltip={
+          <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

@@ -0,0 +1,27 @@
+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

@@ -1,3 +0,0 @@
-// @flow
-import Avatar from './Avatar';
-export default Avatar;

app/components/Avatar/index.ts

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

app/components/Badge.ts

@@ -0,0 +1,26 @@
+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.tsx

@@ -0,0 +1,50 @@
+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")};
+  }
+
+  &:hover {
+    background: ${s("sidebarBackground")};
+  }
+
+  ${breakpoint("tablet")`
+    z-index: ${depths.sidebar + 1};
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 16px;
+  `};
+`;
+
+export default Branding;

app/components/Breadcrumb.tsx

@@ -0,0 +1,88 @@
+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 { 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")};
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default Breadcrumb;

app/components/Button.js

@@ -1,111 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { darken, lighten } from 'polished';
-
-const RealButton = styled.button`
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: ${props => props.theme.blackLight};
-  color: ${props => props.theme.white};
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  height: ${props => (props.small ? 24 : 36)}px;
-  text-decoration: none;
-  text-transform: uppercase;
-  flex-shrink: 0;
-  outline: none;
-  cursor: pointer;
-  user-select: none;
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-
-  &:hover {
-    background: ${props => darken(0.05, props.theme.blackLight)};
-  }
-
-  &:disabled {
-    cursor: default;
-    pointer-events: none;
-    color: ${props => lighten(0.2, props.theme.blackLight)};
-  }
-
-  ${props =>
-    props.neutral &&
-    `
-    background: ${props.theme.white};
-    color: ${props.theme.text};
-    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px;
-    border: 1px solid ${props.theme.slateLight};
-
-    &:hover {
-      background: ${darken(0.05, props.theme.white)};
-      border: 1px solid ${darken(0.05, props.theme.slateLight)};
-    }
-  `} ${props =>
-      props.danger &&
-      `
-    background: ${props.theme.danger};
-
-    &: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;'};
-`;
-
-const Inner = styled.span`
-  padding: 0 ${props => (props.small ? 8 : 12)}px;
-  display: flex;
-  line-height: ${props => (props.small ? 24 : 28)}px;
-  justify-content: center;
-  align-items: center;
-
-  ${props =>
-    props.hasIcon &&
-    (props.small ? 'padding-left: 6px;' : 'padding-left: 8px;')};
-`;
-
-export type Props = {
-  type?: string,
-  value?: string,
-  icon?: React.Node,
-  className?: string,
-  children?: React.Node,
-  small?: boolean,
-};
-
-export default function Button({
-  type = 'text',
-  icon,
-  children,
-  value,
-  small,
-  ...rest
-}: Props) {
-  const hasText = children !== undefined || value !== undefined;
-  const hasIcon = icon !== undefined;
-
-  return (
-    <RealButton small={small} {...rest}>
-      <Inner hasIcon={hasIcon} small={small}>
-        {hasIcon && icon}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-      </Inner>
-    </RealButton>
-  );
-}

app/components/Button.tsx

@@ -0,0 +1,198 @@
+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 !== undefined || 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.ts

@@ -0,0 +1,12 @@
+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.tsx

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -1,32 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import breakpoint from 'styled-components-breakpoint';
-
-type Props = {
-  children?: React.Node,
-};
-
-const Container = styled.div`
-  width: 100%;
-  padding: 60px 20px;
-
-  ${breakpoint('tablet')`
-    padding: 60px;
-  `};
-`;
-
-const Content = styled.div`
-  max-width: 46em;
-  margin: 0 auto;
-`;
-
-const CenteredContent = ({ children, ...rest }: Props) => {
-  return (
-    <Container {...rest}>
-      <Content>{children}</Content>
-    </Container>
-  );
-};
-
-export default CenteredContent;

app/components/CenteredContent.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+
+type Props = {
+  children?: React.ReactNode;
+  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"};
+  `};
+`;
+
+const Content = styled.div`
+  max-width: 46em;
+  margin: 0 auto;
+
+  ${breakpoint("desktopLarge")`
+    max-width: 52em;
+  `};
+`;
+
+const CenteredContent: React.FC<Props> = ({ children, ...rest }: Props) => (
+  <Container {...rest}>
+    <Content>{children}</Content>
+  </Container>
+);
+
+export default CenteredContent;

app/components/Checkbox.js

@@ -1,45 +0,0 @@
-// @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import HelpText from 'components/HelpText';
-
-export type Props = {
-  checked?: boolean,
-  label?: string,
-  className?: string,
-  note?: string,
-};
-
-const LabelText = styled.span`
-  font-weight: 500;
-  margin-left: 10px;
-`;
-
-const Wrapper = styled.div`
-  padding-bottom: 8px;
-`;
-
-const Label = styled.label`
-  display: flex;
-  align-items: center;
-`;
-
-export default function Checkbox({
-  label,
-  note,
-  className,
-  short,
-  ...rest
-}: Props) {
-  return (
-    <React.Fragment>
-      <Wrapper>
-        <Label>
-          <input type="checkbox" {...rest} />
-          {label && <LabelText>{label}</LabelText>}
-        </Label>
-        {note && <HelpText small>{note}</HelpText>}
-      </Wrapper>
-    </React.Fragment>
-  );
-}

app/components/CircularProgressBar.tsx

@@ -0,0 +1,80 @@
+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

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

app/components/ClickablePadding.ts

@@ -0,0 +1,12 @@
+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

@@ -1,133 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observer, inject } from 'mobx-react';
-import { filter } from 'lodash';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-import Avatar from 'components/Avatar';
-import Tooltip from 'components/Tooltip';
-import Document from 'models/Document';
-import ViewsStore from 'stores/ViewsStore';
-
-const MAX_DISPLAY = 6;
-
-type Props = {
-  views: ViewsStore,
-  document: Document,
-};
-
-@observer
-class Collaborators extends React.Component<Props> {
-  componentDidMount() {
-    this.props.views.fetchPage({ documentId: this.props.document.id });
-  }
-
-  render() {
-    const { document, views } = this.props;
-    const documentViews = views.inDocument(document.id);
-    const {
-      createdAt,
-      updatedAt,
-      createdBy,
-      updatedBy,
-      collaborators,
-    } = document;
-    let tooltip;
-
-    if (createdAt === updatedAt) {
-      tooltip = `${createdBy.name} published ${distanceInWordsToNow(
-        new Date(createdAt)
-      )} ago`;
-    } else {
-      tooltip = `${updatedBy.name} updated ${distanceInWordsToNow(
-        new Date(updatedAt)
-      )} ago`;
-    }
-
-    // filter to only show views that haven't collaborated
-    const collaboratorIds = collaborators.map(user => user.id);
-    const viewersNotCollaborators = filter(
-      documentViews,
-      view => !collaboratorIds.includes(view.user.id)
-    );
-
-    // only show the most recent viewers, the rest can overflow
-    const mostRecentViewers = viewersNotCollaborators.slice(
-      0,
-      MAX_DISPLAY - collaborators.length
-    );
-
-    // if there are too many to display then add a (+X) to the UI
-    const overflow = viewersNotCollaborators.length - mostRecentViewers.length;
-
-    return (
-      <Avatars>
-        {overflow > 0 && <More>+{overflow}</More>}
-        {mostRecentViewers.map(({ lastViewedAt, user }) => (
-          <StyledTooltip
-            key={user.id}
-            tooltip={`${user.name} viewed ${distanceInWordsToNow(
-              new Date(lastViewedAt)
-            )} ago`}
-            placement="bottom"
-          >
-            <Viewer>
-              <Avatar src={user.avatarUrl} />
-            </Viewer>
-          </StyledTooltip>
-        ))}
-        {collaborators.map(user => (
-          <StyledTooltip
-            key={user.id}
-            tooltip={collaborators.length > 1 ? user.name : tooltip}
-            placement="bottom"
-          >
-            <Collaborator>
-              <Avatar src={user.avatarUrl} />
-            </Collaborator>
-          </StyledTooltip>
-        ))}
-      </Avatars>
-    );
-  }
-}
-
-const StyledTooltip = styled(Tooltip)`
-  margin-right: -8px;
-
-  &:first-child {
-    margin-right: 0;
-  }
-`;
-
-const Viewer = styled.div`
-  width: 24px;
-  height: 24px;
-  opacity: 0.75;
-`;
-
-const Collaborator = styled.div`
-  width: 24px;
-  height: 24px;
-`;
-
-const More = styled.div`
-  min-width: 30px;
-  height: 24px;
-  border-radius: 12px;
-  background: ${props => props.theme.slate};
-  color: ${props => props.theme.text};
-  border: 2px solid #fff;
-  text-align: center;
-  line-height: 20px;
-  font-size: 11px;
-  font-weight: 600;
-`;
-
-const Avatars = styled(Flex)`
-  align-items: center;
-  flex-direction: row-reverse;
-`;
-
-export default inject('views')(Collaborators);

app/components/Collaborators.tsx

@@ -0,0 +1,117 @@
+import { sortBy, filter, uniq, isEqual } from "lodash";
+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/CollectionDeleteDialog.tsx

@@ -0,0 +1,69 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { useHistory } from "react-router-dom";
+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;
+    await collection.delete();
+    onSubmit();
+    if (redirect) {
+      history.push(homePath());
+    }
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("I’m sure – Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      <>
+        <Text 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 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.tsx

@@ -0,0 +1,231 @@
+import debounce from "lodash/debounce";
+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 { s } from "@shared/styles";
+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 usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  collection: Collection;
+};
+
+function CollectionDescription({ collection }: Props) {
+  const { collections } = useStores();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
+  const [isExpanded, setExpanded] = React.useState(false);
+  const [isEditing, setEditing] = React.useState(false);
+  const [isDirty, setDirty] = React.useState(false);
+  const can = usePolicy(collection);
+
+  const handleStartEditing = React.useCallback(() => {
+    setEditing(true);
+  }, []);
+
+  const handleStopEditing = React.useCallback(() => {
+    setEditing(false);
+  }, []);
+
+  const handleClickDisclosure = React.useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (isExpanded && document.activeElement) {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
+        document.activeElement.blur();
+      }
+
+      setExpanded(!isExpanded);
+    },
+    [isExpanded]
+  );
+
+  const handleSave = React.useMemo(
+    () =>
+      debounce(async (getValue) => {
+        try {
+          await collection.save({
+            description: getValue(),
+          });
+          setDirty(false);
+        } catch (err) {
+          showToast(
+            t("Sorry, an error occurred saving the collection", {
+              type: "error",
+            })
+          );
+          throw err;
+        }
+      }, 1000),
+    [collection, showToast, t]
+  );
+
+  const handleChange = React.useCallback(
+    async (getValue) => {
+      setDirty(true);
+      await 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 data-editing={isEditing} data-expanded={isExpanded}>
+        <span onClick={can.update ? handleStartEditing : undefined}>
+          {collections.isSaving && <LoadingIndicator />}
+          {collection.hasDescription || isEditing || isDirty ? (
+            <React.Suspense
+              fallback={
+                <Placeholder
+                  onClick={() => {
+                    //
+                  }}
+                >
+                  Loading…
+                </Placeholder>
+              }
+            >
+              <Editor
+                key={key}
+                defaultValue={collection.description || ""}
+                onChange={handleChange}
+                placeholder={placeholder}
+                readOnly={!isEditing}
+                autoFocus={isEditing}
+                onBlur={handleStopEditing}
+                maxLength={1000}
+                embedsDisabled
+                canUpdate
+              />
+            </React.Suspense>
+          ) : (
+            can.update && (
+              <Placeholder
+                onClick={() => {
+                  //
+                }}
+              >
+                {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: ${s("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: ${s("sidebarText")};
+  }
+`;
+
+const Placeholder = styled(ButtonLink)`
+  color: ${s("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: ${s("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%,
+      ${s("background")} 100%
+    );
+  }
+
+  &[data-editing="true"],
+  &[data-expanded="true"] {
+    &:after {
+      background: transparent;
+    }
+  }
+
+  &[data-editing="true"] {
+    background: ${s("secondaryBackground")};
+  }
+
+  .block-menu-trigger,
+  .heading-anchor {
+    display: none !important;
+  }
+`;
+
+export default observer(CollectionDescription);

app/components/ColorPicker.js

@@ -1,189 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observable, computed, action } from 'mobx';
-import { observer } from 'mobx-react';
-import styled from 'styled-components';
-import Flex from 'shared/components/Flex';
-import { LabelText, Outline } from 'components/Input';
-import { validateColorHex } from 'shared/utils/color';
-
-const colors = [
-  '#4E5C6E',
-  '#19B7FF',
-  '#7F6BFF',
-  '#FC7419',
-  '#FC2D2D',
-  '#FFE100',
-  '#14CF9F',
-  '#EE84F0',
-  '#2F362F',
-];
-
-type Props = {
-  onSelect: (color: string) => void,
-  value?: string,
-};
-
-@observer
-class ColorPicker extends React.Component<Props> {
-  @observable selectedColor: string = colors[0];
-  @observable customColorValue: string = '';
-  @observable customColorSelected: boolean;
-
-  componentWillMount() {
-    const { value } = this.props;
-    if (value && colors.includes(value)) {
-      this.selectedColor = value;
-    } else if (value) {
-      this.customColorSelected = true;
-      this.customColorValue = value.replace('#', '');
-    }
-  }
-
-  componentDidMount() {
-    this.fireCallback();
-  }
-
-  fireCallback = () => {
-    this.props.onSelect(
-      this.customColorSelected ? this.customColor : this.selectedColor
-    );
-  };
-
-  @computed
-  get customColor(): string {
-    return this.customColorValue &&
-      validateColorHex(`#${this.customColorValue}`)
-      ? `#${this.customColorValue}`
-      : colors[0];
-  }
-
-  @action
-  setColor = (color: string) => {
-    this.selectedColor = color;
-    this.customColorSelected = false;
-    this.fireCallback();
-  };
-
-  @action
-  focusOnCustomColor = (event: SyntheticEvent<*>) => {
-    this.selectedColor = '';
-    this.customColorSelected = true;
-    this.fireCallback();
-  };
-
-  @action
-  setCustomColor = (event: SyntheticEvent<*>) => {
-    let target = event.target;
-    if (target instanceof HTMLInputElement) {
-      const color = target.value;
-      this.customColorValue = color.replace('#', '');
-      this.fireCallback();
-    }
-  };
-
-  render() {
-    return (
-      <Flex column>
-        <LabelText>Color</LabelText>
-        <StyledOutline justify="space-between">
-          <Flex>
-            {colors.map(color => (
-              <Swatch
-                key={color}
-                color={color}
-                active={
-                  color === this.selectedColor && !this.customColorSelected
-                }
-                onClick={() => this.setColor(color)}
-              />
-            ))}
-          </Flex>
-          <Flex justify="flex-end">
-            <strong>Custom color:</strong>
-            <HexHash>#</HexHash>
-            <CustomColorInput
-              placeholder="FFFFFF"
-              onFocus={this.focusOnCustomColor}
-              onChange={this.setCustomColor}
-              value={this.customColorValue}
-              maxLength={6}
-            />
-            <Swatch
-              color={this.customColor}
-              active={this.customColorSelected}
-            />
-          </Flex>
-        </StyledOutline>
-      </Flex>
-    );
-  }
-}
-
-type SwatchProps = {
-  onClick?: () => void,
-  color?: string,
-  active?: boolean,
-};
-
-const Swatch = ({ onClick, ...props }: SwatchProps) => (
-  <SwatchOutset onClick={onClick} {...props}>
-    <SwatchInset {...props} />
-  </SwatchOutset>
-);
-
-const SwatchOutset = styled(Flex)`
-  width: 24px;
-  height: 24px;
-  margin-right: 5px;
-  border: 2px solid ${({ active, color }) => (active ? color : 'transparent')};
-  border-radius: 2px;
-  background: ${({ color }) => color};
-  ${({ onClick }) => onClick && `cursor: pointer;`} &:last-child {
-    margin-right: 0;
-  }
-`;
-
-const SwatchInset = styled(Flex)`
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${({ active, color }) => (active ? 'white' : 'transparent')};
-  border-radius: 2px;
-  background: ${({ color }) => color};
-`;
-
-const StyledOutline = styled(Outline)`
-  padding: 5px;
-  flex-wrap: wrap;
-
-  strong {
-    font-weight: 500;
-  }
-`;
-
-const HexHash = styled.div`
-  margin-left: 12px;
-  padding-bottom: 0;
-  font-weight: 500;
-  user-select: none;
-`;
-
-const CustomColorInput = styled.input`
-  border: 0;
-  flex: 1;
-  width: 65px;
-  margin-right: 12px;
-  padding-bottom: 0;
-  outline: none;
-  background: none;
-  font-family: ${props => props.theme.monospaceFontFamily};
-  font-weight: 500;
-
-  &::placeholder {
-    color: ${props => props.theme.slate};
-    font-family: ${props => props.theme.monospaceFontFamily};
-    font-weight: 500;
-  }
-`;
-
-export default ColorPicker;

app/components/CommandBar.tsx

@@ -0,0 +1,109 @@
+import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Portal } from "react-portal";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { depths, s } from "@shared/styles";
+import CommandBarResults from "~/components/CommandBarResults";
+import SearchActions from "~/components/SearchActions";
+import rootActions from "~/actions/root";
+import useCommandBarActions from "~/hooks/useCommandBarActions";
+import useSettingsActions from "~/hooks/useSettingsActions";
+import { CommandBarAction } from "~/types";
+
+function CommandBar() {
+  const { t } = useTranslation();
+  const settingsActions = useSettingsActions();
+  const commandBarActions = React.useMemo(
+    () => [...rootActions, settingsActions],
+    [settingsActions]
+  );
+
+  useCommandBarActions(commandBarActions);
+
+  const { rootAction } = useKBar((state) => ({
+    rootAction: state.currentRootActionId
+      ? (state.actions[
+          state.currentRootActionId
+        ] as unknown as CommandBarAction)
+      : undefined,
+  }));
+
+  return (
+    <>
+      <KBarPortal>
+        <Positioner>
+          <Animator>
+            <SearchActions />
+            <SearchInput
+              placeholder={`${
+                rootAction?.placeholder ||
+                rootAction?.name ||
+                t("Type a command or search")
+              }…`}
+            />
+            <CommandBarResults />
+          </Animator>
+        </Positioner>
+      </KBarPortal>
+    </>
+  );
+}
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+const KBarPortal: React.FC = ({ children }: Props) => {
+  const { showing } = useKBar((state) => ({
+    showing: state.visualState !== "hidden",
+  }));
+
+  if (!showing) {
+    return null;
+  }
+
+  return <Portal>{children}</Portal>;
+};
+
+const Positioner = styled(KBarPositioner)`
+  z-index: ${depths.commandBar};
+`;
+
+const SearchInput = styled(KBarSearch)`
+  padding: 16px 20px;
+  width: 100%;
+  outline: none;
+  border: none;
+  background: ${s("menuBackground")};
+  color: ${s("text")};
+
+  &:disabled,
+  &::placeholder {
+    color: ${s("placeholder")};
+  }
+`;
+
+const Animator = styled(KBarAnimator)`
+  max-width: 600px;
+  max-height: 75vh;
+  width: 90vw;
+  background: ${s("menuBackground")};
+  color: ${s("text")};
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;
+  transition: max-width 0.2s ease-in-out;
+
+  ${breakpoint("desktopLarge")`
+    max-width: 740px;
+  `};
+
+  @media print {
+    display: none;
+  }
+`;
+
+export default observer(CommandBar);

app/components/CommandBarItem.tsx

@@ -0,0 +1,137 @@
+import { ActionImpl } from "kbar";
+import { ArrowIcon, BackIcon } from "outline-icons";
+import * as React from "react";
+import styled, { css, useTheme } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
+import Flex from "~/components/Flex";
+import Key from "~/components/Key";
+import Text from "./Text";
+
+type Props = {
+  action: ActionImpl;
+  active: boolean;
+  currentRootActionId: string | null | undefined;
+};
+
+function CommandBarItem(
+  { action, active, currentRootActionId }: Props,
+  ref: React.RefObject<HTMLDivElement>
+) {
+  const theme = useTheme();
+  const ancestors = React.useMemo(() => {
+    if (!currentRootActionId) {
+      return action.ancestors;
+    }
+    const index = action.ancestors.findIndex(
+      (ancestor) => ancestor.id === currentRootActionId
+    );
+
+    // +1 removes the currentRootAction; e.g. if we are on the "Set theme"
+    // parent action, the UI should not display "Set theme… > Dark" but rather
+    // just "Dark"
+    return action.ancestors.slice(index + 1);
+  }, [action.ancestors, currentRootActionId]);
+
+  return (
+    <Item active={active} ref={ref}>
+      <Content align="center" gap={8}>
+        <Icon>
+          {action.icon ? (
+            // @ts-expect-error no icon on ActionImpl
+            React.cloneElement(action.icon, {
+              size: 22,
+            })
+          ) : (
+            <ArrowIcon />
+          )}
+        </Icon>
+
+        {ancestors.map((ancestor) => (
+          <React.Fragment key={ancestor.id}>
+            <Ancestor>{ancestor.name}</Ancestor>
+            <ForwardIcon color={theme.textSecondary} size={22} />
+          </React.Fragment>
+        ))}
+        {action.name}
+        {action.children?.length ? "…" : ""}
+      </Content>
+      {action.shortcut?.length ? (
+        <Shortcut>
+          {action.shortcut.map((sc: string, index) => (
+            <React.Fragment key={sc}>
+              {index > 0 ? (
+                <>
+                  {" "}
+                  <Text size="xsmall" as="span" type="secondary">
+                    then
+                  </Text>{" "}
+                </>
+              ) : (
+                ""
+              )}
+              {sc.split("+").map((s) => (
+                <Key key={s}>{s}</Key>
+              ))}
+            </React.Fragment>
+          ))}
+        </Shortcut>
+      ) : null}
+    </Item>
+  );
+}
+
+const Shortcut = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  gap: 4px;
+`;
+
+const Icon = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: ${s("textSecondary")};
+  flex-shrink: 0;
+`;
+
+const Ancestor = styled.span`
+  color: ${s("textSecondary")};
+`;
+
+const Content = styled(Flex)`
+  ${ellipsis()}
+  flex-shrink: 1;
+`;
+
+const Item = styled.div<{ active?: boolean }>`
+  font-size: 14px;
+  padding: 9px 12px;
+  margin: 0 8px;
+  border-radius: 4px;
+  background: ${(props) =>
+    props.active ? props.theme.menuItemSelected : "none"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: var(--pointer);
+
+  ${ellipsis()}
+  user-select: none;
+  min-width: 0;
+
+  ${(props) =>
+    props.active &&
+    css`
+      ${Icon} {
+        color: ${props.theme.text};
+      }
+    `}
+`;
+
+const ForwardIcon = styled(BackIcon)`
+  transform: rotate(180deg);
+  flex-shrink: 0;
+`;
+
+export default React.forwardRef<HTMLDivElement, Props>(CommandBarItem);

app/components/CommandBarResults.tsx

@@ -0,0 +1,45 @@
+import { useMatches, KBarResults } from "kbar";
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import CommandBarItem from "~/components/CommandBarItem";
+
+export default function CommandBarResults() {
+  const { results, rootActionId } = useMatches();
+
+  return (
+    <Container>
+      <KBarResults
+        items={results}
+        maxHeight={400}
+        onRender={({ item, active }) =>
+          typeof item === "string" ? (
+            <Header>{item}</Header>
+          ) : (
+            <CommandBarItem
+              action={item}
+              active={active}
+              currentRootActionId={rootActionId}
+            />
+          )
+        }
+      />
+    </Container>
+  );
+}
+
+// Cannot style KBarResults unfortunately, so we must wrap and target the inner
+const Container = styled.div`
+  > div {
+    padding-bottom: 8px;
+  }
+`;
+
+const Header = styled.h3`
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  margin: 0;
+  padding: 16px 0 4px 20px;
+  color: ${s("textTertiary")};
+  height: 36px;
+`;

app/components/CommentDeleteDialog.tsx

@@ -0,0 +1,53 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import Comment from "~/models/Comment";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  comment: Comment;
+  onSubmit?: () => void;
+};
+
+function CommentDeleteDialog({ comment, onSubmit }: Props) {
+  const { comments } = useStores();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
+  const hasChildComments = comments.inThread(comment.id).length > 1;
+
+  const handleSubmit = async () => {
+    try {
+      await comment.delete();
+      onSubmit?.();
+    } catch (err) {
+      showToast(err.message, { type: "error" });
+    }
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("I’m sure – Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      <Text type="secondary">
+        {hasChildComments ? (
+          <Trans>
+            Are you sure you want to permanently delete this entire comment
+            thread?
+          </Trans>
+        ) : (
+          <Trans>
+            Are you sure you want to permanently delete this comment?
+          </Trans>
+        )}
+      </Text>
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(CommentDeleteDialog);

app/components/ConfirmationDialog.tsx

@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  /** Callback when the dialog is submitted */
+  onSubmit: () => Promise<void> | void;
+  /** Text to display on the submit button */
+  submitText?: string;
+  /** Text to display while the form is saving */
+  savingText?: string;
+  /** If true, the submit button will be a dangerous red */
+  danger?: boolean;
+  /** Keep the submit button disabled */
+  disabled?: boolean;
+  children?: React.ReactNode;
+};
+
+const ConfirmationDialog: React.FC<Props> = ({
+  onSubmit,
+  children,
+  submitText,
+  savingText,
+  danger,
+  disabled = false,
+}: Props) => {
+  const [isSaving, setIsSaving] = React.useState(false);
+  const { dialogs } = useStores();
+  const { showToast } = useToasts();
+
+  const handleSubmit = React.useCallback(
+    async (ev: React.SyntheticEvent) => {
+      ev.preventDefault();
+      setIsSaving(true);
+      try {
+        await onSubmit();
+        dialogs.closeAllModals();
+      } catch (err) {
+        showToast(err.message, {
+          type: "error",
+        });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [onSubmit, dialogs, showToast]
+  );
+
+  return (
+    <Flex column>
+      <form onSubmit={handleSubmit}>
+        <Text type="secondary">{children}</Text>
+        <Button
+          type="submit"
+          disabled={isSaving || disabled}
+          danger={danger}
+          autoFocus
+        >
+          {isSaving && savingText ? savingText : submitText}
+        </Button>
+      </form>
+    </Flex>
+  );
+};
+
+export default observer(ConfirmationDialog);

app/components/ConnectionStatus.tsx

@@ -0,0 +1,58 @@
+import { observer } from "mobx-react";
+import { DisconnectedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled, { useTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Fade from "~/components/Fade";
+import NudeButton from "~/components/NudeButton";
+import Tooltip from "~/components/Tooltip";
+import useStores from "~/hooks/useStores";
+
+function ConnectionStatus() {
+  const { ui } = useStores();
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return ui.multiplayerStatus === "connecting" ||
+    ui.multiplayerStatus === "disconnected" ? (
+    <Tooltip
+      tooltip={
+        <Centered>
+          <strong>{t("Server connection lost")}</strong>
+          <br />
+          {t("Edits you make will sync once you’re online")}
+        </Centered>
+      }
+      placement="bottom"
+    >
+      <Button>
+        <Fade>
+          <DisconnectedIcon color={theme.sidebarText} />
+        </Fade>
+      </Button>
+    </Tooltip>
+  ) : null;
+}
+
+const Button = styled(NudeButton)`
+  display: none;
+  position: fixed;
+  bottom: 0;
+  margin: 24px;
+  transform: translateX(-32px);
+
+  ${breakpoint("tablet")`
+    display: block;
+  `};
+
+  @media print {
+    display: none;
+  }
+`;
+
+const Centered = styled.div`
+  text-align: center;
+`;
+
+export default observer(ConnectionStatus);

app/components/ContentEditable.tsx

@@ -0,0 +1,204 @@
+import isPrintableKeyEvent from "is-printable-key-event";
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import useOnScreen from "~/hooks/useOnScreen";
+
+type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
+  disabled?: boolean;
+  readOnly?: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onChange?: (text: string) => void;
+  onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
+  onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
+  onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
+  placeholder?: string;
+  maxLength?: number;
+  autoFocus?: boolean;
+  children?: React.ReactNode;
+  value: string;
+};
+
+export type RefHandle = {
+  focus: () => void;
+  focusAtStart: () => void;
+  focusAtEnd: () => void;
+  getComputedDirection: () => string;
+};
+
+/**
+ * Defines a content editable component with the same interface as a native
+ * HTMLInputElement (or, as close as we can get).
+ */
+const ContentEditable = React.forwardRef(function _ContentEditable(
+  {
+    disabled,
+    onChange,
+    onInput,
+    onBlur,
+    onKeyDown,
+    value,
+    children,
+    className,
+    maxLength,
+    autoFocus,
+    placeholder,
+    readOnly,
+    dir,
+    onClick,
+    ...rest
+  }: Props,
+  ref: React.RefObject<RefHandle>
+) {
+  const contentRef = React.useRef<HTMLSpanElement>(null);
+  const [innerValue, setInnerValue] = React.useState<string>(value);
+  const lastValue = React.useRef(value);
+
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      if (contentRef.current) {
+        contentRef.current.focus();
+        // looks unnecessary but required because of https://github.com/outline/outline/issues/5198
+        if (!contentRef.current.innerText) {
+          placeCaret(contentRef.current, true);
+        }
+      }
+    },
+    focusAtStart: () => {
+      if (contentRef.current) {
+        contentRef.current.focus();
+        placeCaret(contentRef.current, true);
+      }
+    },
+    focusAtEnd: () => {
+      if (contentRef.current) {
+        contentRef.current.focus();
+        placeCaret(contentRef.current, false);
+      }
+    },
+    getComputedDirection: () => {
+      if (contentRef.current) {
+        return window.getComputedStyle(contentRef.current).direction;
+      }
+      return "ltr";
+    },
+  }));
+
+  const wrappedEvent =
+    (
+      callback:
+        | React.FocusEventHandler<HTMLSpanElement>
+        | React.FormEventHandler<HTMLSpanElement>
+        | React.KeyboardEventHandler<HTMLSpanElement>
+        | undefined
+    ) =>
+    (event: any) => {
+      if (readOnly) {
+        return;
+      }
+
+      const text = event.currentTarget.textContent || "";
+
+      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
+        event?.preventDefault();
+        return;
+      }
+
+      if (text !== lastValue.current) {
+        lastValue.current = text;
+        onChange?.(text);
+      }
+
+      callback?.(event);
+    };
+
+  // This is to account for being within a React.Suspense boundary, in this
+  // case the component may be rendered with display: none. React 18 may solve
+  // this in the future by delaying useEffect hooks:
+  // https://github.com/facebook/react/issues/14536#issuecomment-861980492
+  const isVisible = useOnScreen(contentRef);
+
+  React.useEffect(() => {
+    if (autoFocus && isVisible && !disabled && !readOnly) {
+      contentRef.current?.focus();
+    }
+  }, [autoFocus, disabled, isVisible, readOnly, contentRef]);
+
+  React.useEffect(() => {
+    if (contentRef.current && value !== contentRef.current.textContent) {
+      setInnerValue(value);
+    }
+  }, [value, contentRef]);
+
+  // Ensure only plain text can be pasted into input when pasting from another
+  // rich text source. Note: If `onPaste` prop is passed then it takes
+  // priority over this behavior.
+  const handlePaste = React.useCallback(
+    (event: React.ClipboardEvent<HTMLSpanElement>) => {
+      event.preventDefault();
+      const text = event.clipboardData.getData("text/plain");
+      window.document.execCommand("insertText", false, text);
+    },
+    []
+  );
+
+  return (
+    <div className={className} dir={dir} onClick={onClick}>
+      <Content
+        ref={contentRef}
+        contentEditable={!disabled && !readOnly}
+        onInput={wrappedEvent(onInput)}
+        onBlur={wrappedEvent(onBlur)}
+        onKeyDown={wrappedEvent(onKeyDown)}
+        onPaste={handlePaste}
+        data-placeholder={placeholder}
+        suppressContentEditableWarning
+        role="textbox"
+        {...rest}
+      >
+        {innerValue}
+      </Content>
+      {children}
+    </div>
+  );
+});
+
+function placeCaret(element: HTMLElement, atStart: boolean) {
+  if (
+    typeof window.getSelection !== "undefined" &&
+    typeof document.createRange !== "undefined"
+  ) {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.collapse(atStart);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }
+}
+
+const Content = styled.span`
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
+  color: ${s("text")};
+  -webkit-text-fill-color: ${s("text")};
+  outline: none;
+  resize: none;
+  cursor: text;
+  word-break: anywhere;
+
+  &:empty {
+    display: inline-block;
+  }
+
+  &:empty::before {
+    display: inline-block;
+    color: ${s("placeholder")};
+    -webkit-text-fill-color: ${s("placeholder")};
+    content: attr(data-placeholder);
+    pointer-events: none;
+    height: 0;
+  }
+`;
+
+export default ContentEditable;

app/components/ContextMenu/Header.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+const Header = styled.h3`
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${s("sidebarText")};
+  letter-spacing: 0.04em;
+  margin: 1em 12px 0.5em;
+`;
+
+export default Header;

app/components/ContextMenu/MenuItem.tsx

@@ -0,0 +1,190 @@
+import { LocationDescriptor } from "history";
+import { CheckmarkIcon } from "outline-icons";
+import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
+import { MenuItem as BaseMenuItem } from "reakit/Menu";
+import styled, { css } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import MenuIconWrapper from "../MenuIconWrapper";
+
+type Props = {
+  id?: string;
+  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
+  active?: boolean;
+  selected?: boolean;
+  disabled?: boolean;
+  dangerous?: boolean;
+  to?: LocationDescriptor;
+  href?: string;
+  target?: "_blank";
+  as?: string | React.ComponentType<any>;
+  hide?: () => void;
+  level?: number;
+  icon?: React.ReactElement;
+  children?: React.ReactNode;
+  ref?: React.LegacyRef<HTMLButtonElement> | undefined;
+};
+
+const MenuItem = (
+  {
+    onClick,
+    children,
+    active,
+    selected,
+    disabled,
+    as,
+    hide,
+    icon,
+    ...rest
+  }: Props,
+  ref: React.Ref<HTMLAnchorElement>
+) => {
+  const content = React.useCallback(
+    (props) => {
+      const handleClick = async (ev: React.MouseEvent) => {
+        hide?.();
+
+        if (onClick) {
+          ev.preventDefault();
+          await onClick(ev);
+        }
+      };
+
+      // Preventing default mousedown otherwise menu items do not work in Firefox,
+      // which triggers the hideOnClickOutside handler first via mousedown – hiding
+      // and un-rendering the menu contents.
+      const handleMouseDown = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      };
+
+      return (
+        <MenuAnchor
+          {...props}
+          $active={active}
+          as={onClick ? "button" : as}
+          onClick={handleClick}
+          onMouseDown={handleMouseDown}
+          ref={mergeRefs([
+            ref,
+            props.ref as React.RefObject<HTMLAnchorElement>,
+          ])}
+        >
+          {selected !== undefined && (
+            <>
+              {selected ? <CheckmarkIcon /> : <Spacer />}
+              &nbsp;
+            </>
+          )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+          {children}
+        </MenuAnchor>
+      );
+    },
+    [active, as, hide, icon, onClick, ref, children, selected]
+  );
+
+  return (
+    <BaseMenuItem
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      hide={hide}
+      {...rest}
+    >
+      {content}
+    </BaseMenuItem>
+  );
+};
+
+const Spacer = styled.svg`
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+`;
+
+type MenuAnchorProps = {
+  level?: number;
+  disabled?: boolean;
+  dangerous?: boolean;
+  disclosure?: boolean;
+  $active?: boolean;
+};
+
+export const MenuAnchorCSS = css<MenuAnchorProps>`
+  display: flex;
+  margin: 0;
+  border: 0;
+  padding: 12px;
+  border-radius: 4px;
+  padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
+  width: 100%;
+  min-height: 32px;
+  background: none;
+  color: ${(props) =>
+    props.disabled ? props.theme.textTertiary : props.theme.textSecondary};
+  justify-content: left;
+  align-items: center;
+  font-size: 16px;
+  cursor: default;
+  user-select: none;
+  white-space: nowrap;
+  position: relative;
+
+  svg:not(:last-child) {
+    margin-right: 4px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    opacity: ${(props) => (props.disabled ? ".5" : 1)};
+  }
+
+  ${(props) => props.disabled && "pointer-events: none;"}
+
+  ${(props) =>
+    props.$active === undefined &&
+    !props.disabled &&
+    `
+  @media (hover: hover) {
+    &:hover,
+    &:focus,
+    &.focus-visible {
+      color: ${props.theme.accentText};
+      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
+      box-shadow: none;
+      cursor: var(--pointer);
+
+      svg {
+        fill: ${props.theme.accentText};
+      }
+    }
+  }
+  `}
+
+  ${(props) =>
+    props.$active &&
+    !props.disabled &&
+    `
+      color: ${props.theme.accentText};
+      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
+      box-shadow: none;
+      cursor: var(--pointer);
+
+      svg {
+        fill: ${props.theme.accentText};
+      }
+    `}
+
+  ${breakpoint("tablet")`
+    padding: 4px 12px;
+    padding-right: ${(props: MenuAnchorProps) =>
+      props.disclosure ? 32 : 12}px;
+    font-size: 14px;
+  `}
+`;
+
+export const MenuAnchor = styled.a`
+  ${MenuAnchorCSS}
+`;
+
+export default React.forwardRef<HTMLAnchorElement, Props>(MenuItem);

app/components/ContextMenu/MouseSafeArea.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { useMousePosition } from "~/hooks/useMousePosition";
+
+type Positions = {
+  /* Sub-menu x */
+  x: number;
+  /* Sub-menu y */
+  y: number;
+  /* Sub-menu height */
+  h: number;
+  /* Sub-menu width */
+  w: number;
+  /* Mouse x */
+  mouseX: number;
+  /* Mouse y */
+  mouseY: number;
+};
+
+/**
+ * Component to cover the area between the mouse cursor and the sub-menu, to
+ * allow moving cursor to lower parts of sub-menu without the sub-menu
+ * disappearing.
+ */
+export default function MouseSafeArea(props: {
+  parentRef: React.RefObject<HTMLElement | null>;
+}) {
+  const {
+    x = 0,
+    y = 0,
+    height: h = 0,
+    width: w = 0,
+  } = props.parentRef.current?.getBoundingClientRect() || {};
+  const [mouseX, mouseY] = useMousePosition();
+  const positions = { x, y, h, w, mouseX, mouseY };
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        // backgroundColor: "rgba(255,0,0,0.1)", // Uncomment to debug
+        right: getRight(positions),
+        left: getLeft(positions),
+        height: h,
+        width: getWidth(positions),
+        clipPath: getClipPath(positions),
+      }}
+    />
+  );
+}
+
+const getLeft = ({ x, mouseX }: Positions) =>
+  mouseX > x ? undefined : -Math.max(x - mouseX, 10) + "px";
+
+const getRight = ({ x, w, mouseX }: Positions) =>
+  mouseX > x ? -Math.max(mouseX - (x + w), 10) + "px" : undefined;
+
+const getWidth = ({ x, w, mouseX }: Positions) =>
+  mouseX > x
+    ? Math.max(mouseX - (x + w), 10) + "px"
+    : Math.max(x - mouseX, 10) + "px";
+
+const getClipPath = ({ x, y, h, mouseX, mouseY }: Positions) =>
+  mouseX > x
+    ? `polygon(0% 0%, 0% 100%, 100% ${(100 * (mouseY - y)) / h - 10}%, 100% ${
+        (100 * (mouseY - y)) / h + 5
+      }%)`
+    : `polygon(100% 0%, 0% ${(100 * (mouseY - y)) / h - 10}%, 0% ${
+        (100 * (mouseY - y)) / h + 5
+      }%, 100% 100%)`;

app/components/ContextMenu/OverflowMenuButton.tsx

@@ -0,0 +1,20 @@
+import { MoreIcon } from "outline-icons";
+import * as React from "react";
+import { MenuButton } from "reakit/Menu";
+import NudeButton from "~/components/NudeButton";
+
+type Props = React.ComponentProps<typeof MenuButton> & {
+  className?: string;
+};
+
+export default function OverflowMenuButton({ className, ...rest }: Props) {
+  return (
+    <MenuButton {...rest}>
+      {(props) => (
+        <NudeButton className={className} {...props}>
+          <MoreIcon />
+        </NudeButton>
+      )}
+    </MenuButton>
+  );
+}

app/components/ContextMenu/Separator.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { MenuSeparator } from "reakit/Menu";
+import styled from "styled-components";
+
+export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
+  return (
+    <MenuSeparator {...rest}>
+      {(props) => <HorizontalRule {...props} />}
+    </MenuSeparator>
+  );
+}
+
+const HorizontalRule = styled.hr`
+  margin: 6px 0;
+`;

app/components/ContextMenu/Template.tsx

@@ -0,0 +1,229 @@
+import { ExpandedIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import {
+  useMenuState,
+  MenuButton,
+  MenuItem as BaseMenuItem,
+  MenuStateReturn,
+} from "reakit/Menu";
+import styled, { useTheme } from "styled-components";
+import Flex from "~/components/Flex";
+import MenuIconWrapper from "~/components/MenuIconWrapper";
+import { actionToMenuItem } from "~/actions";
+import useActionContext from "~/hooks/useActionContext";
+import {
+  Action,
+  ActionContext,
+  MenuSeparator,
+  MenuHeading,
+  MenuItem as TMenuItem,
+} from "~/types";
+import Header from "./Header";
+import MenuItem, { MenuAnchor } from "./MenuItem";
+import MouseSafeArea from "./MouseSafeArea";
+import Separator from "./Separator";
+import ContextMenu from ".";
+
+type Props = Omit<MenuStateReturn, "items"> & {
+  actions?: (Action | MenuSeparator | MenuHeading)[];
+  context?: Partial<ActionContext>;
+  items?: TMenuItem[];
+};
+
+const Disclosure = styled(ExpandedIcon)`
+  transform: rotate(270deg);
+  position: absolute;
+  right: 8px;
+`;
+
+type SubMenuProps = MenuStateReturn & {
+  templateItems: TMenuItem[];
+  parentMenuState: Omit<MenuStateReturn, "items">;
+  title: React.ReactNode;
+};
+
+const SubMenu = React.forwardRef(function _Template(
+  { templateItems, title, parentMenuState, ...rest }: SubMenuProps,
+  ref: React.LegacyRef<HTMLButtonElement>
+) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const menu = useMenuState();
+
+  return (
+    <>
+      <MenuButton ref={ref} {...menu} {...rest}>
+        {(props) => (
+          <MenuAnchor disclosure {...props}>
+            {title} <Disclosure color={theme.textTertiary} />
+          </MenuAnchor>
+        )}
+      </MenuButton>
+      <ContextMenu
+        {...menu}
+        aria-label={t("Submenu")}
+        onClick={parentMenuState.hide}
+        parentMenuState={parentMenuState}
+      >
+        <MouseSafeArea parentRef={menu.unstable_popoverRef} />
+        <Template {...menu} items={templateItems} />
+      </ContextMenu>
+    </>
+  );
+});
+
+export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
+  return items
+    .filter((item) => item.visible !== false)
+    .reduce((acc, item) => {
+      // trim separator if the previous item was a separator
+      if (
+        item.type === "separator" &&
+        acc[acc.length - 1]?.type === "separator"
+      ) {
+        return acc;
+      }
+      return [...acc, item];
+    }, [] as TMenuItem[])
+    .filter((item, index, arr) => {
+      if (
+        item.type === "separator" &&
+        (index === 0 || index === arr.length - 1)
+      ) {
+        return false;
+      }
+      return true;
+    });
+}
+
+function Template({ items, actions, context, ...menu }: Props) {
+  const ctx = useActionContext({
+    isContextMenu: true,
+  });
+
+  const templateItems = actions
+    ? actions.map((item) =>
+        item.type === "separator" || item.type === "heading"
+          ? item
+          : actionToMenuItem(item, ctx)
+      )
+    : items || [];
+
+  const filteredTemplates = filterTemplateItems(templateItems);
+
+  const iconIsPresentInAnyMenuItem = filteredTemplates.find(
+    (item) =>
+      item.type !== "separator" && item.type !== "heading" && !!item.icon
+  );
+
+  return (
+    <>
+      {filteredTemplates.map((item, index) => {
+        if (
+          iconIsPresentInAnyMenuItem &&
+          item.type !== "separator" &&
+          item.type !== "heading"
+        ) {
+          item.icon = item.icon || <MenuIconWrapper />;
+        }
+
+        if (item.type === "route") {
+          return (
+            <MenuItem
+              as={Link}
+              id={`${item.title}-${index}`}
+              to={item.to}
+              key={index}
+              disabled={item.disabled}
+              selected={item.selected}
+              icon={item.icon}
+              {...menu}
+            >
+              {item.title}
+            </MenuItem>
+          );
+        }
+
+        if (item.type === "link") {
+          return (
+            <MenuItem
+              id={`${item.title}-${index}`}
+              href={item.href}
+              key={index}
+              disabled={item.disabled}
+              selected={item.selected}
+              level={item.level}
+              target={item.href.startsWith("#") ? undefined : "_blank"}
+              icon={item.icon}
+              {...menu}
+            >
+              {item.title}
+            </MenuItem>
+          );
+        }
+
+        if (item.type === "button") {
+          return (
+            <MenuItem
+              as="button"
+              id={`${item.title}-${index}`}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              selected={item.selected}
+              dangerous={item.dangerous}
+              key={index}
+              icon={item.icon}
+              {...menu}
+            >
+              {item.title}
+            </MenuItem>
+          );
+        }
+
+        if (item.type === "submenu") {
+          return (
+            <BaseMenuItem
+              key={index}
+              as={SubMenu}
+              id={`${item.title}-${index}`}
+              templateItems={item.items}
+              parentMenuState={menu}
+              title={<Title title={item.title} icon={item.icon} />}
+              {...menu}
+            />
+          );
+        }
+
+        if (item.type === "separator") {
+          return <Separator key={index} />;
+        }
+
+        if (item.type === "heading") {
+          return <Header>{item.title}</Header>;
+        }
+
+        const _exhaustiveCheck: never = item;
+        return _exhaustiveCheck;
+      })}
+    </>
+  );
+}
+
+function Title({
+  title,
+  icon,
+}: {
+  title: React.ReactNode;
+  icon?: React.ReactNode;
+}) {
+  return (
+    <Flex align="center">
+      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+      {title}
+    </Flex>
+  );
+}
+
+export default React.memo<Props>(Template);

app/components/ContextMenu/index.tsx

@@ -0,0 +1,235 @@
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Menu, MenuStateReturn } from "reakit/Menu";
+import styled, { DefaultTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { depths, s } from "@shared/styles";
+import Scrollable from "~/components/Scrollable";
+import useMenuContext from "~/hooks/useMenuContext";
+import useMenuHeight from "~/hooks/useMenuHeight";
+import useMobile from "~/hooks/useMobile";
+import usePrevious from "~/hooks/usePrevious";
+import useStores from "~/hooks/useStores";
+import useUnmount from "~/hooks/useUnmount";
+import {
+  fadeIn,
+  fadeAndSlideUp,
+  fadeAndSlideDown,
+  mobileContextMenu,
+} from "~/styles/animations";
+
+export type Placement =
+  | "auto-start"
+  | "auto"
+  | "auto-end"
+  | "top-start"
+  | "top"
+  | "top-end"
+  | "right-start"
+  | "right"
+  | "right-end"
+  | "bottom-end"
+  | "bottom"
+  | "bottom-start"
+  | "left-end"
+  | "left"
+  | "left-start";
+
+type Props = MenuStateReturn & {
+  "aria-label"?: string;
+  /** The parent menu state if this is a submenu. */
+  parentMenuState?: Omit<MenuStateReturn, "items">;
+  /** Called when the context menu is opened. */
+  onOpen?: () => void;
+  /** Called when the context menu is closed. */
+  onClose?: () => void;
+  /** Called when the context menu is clicked. */
+  onClick?: (ev: React.MouseEvent) => void;
+  children?: React.ReactNode;
+};
+
+const ContextMenu: React.FC<Props> = ({
+  children,
+  onOpen,
+  onClose,
+  parentMenuState,
+  ...rest
+}: Props) => {
+  const previousVisible = usePrevious(rest.visible);
+  const maxHeight = useMenuHeight({
+    visible: rest.visible,
+    elementRef: rest.unstable_disclosureRef,
+  });
+  const backgroundRef = React.useRef<HTMLDivElement>(null);
+  const { ui } = useStores();
+  const { t } = useTranslation();
+  const { setIsMenuOpen } = useMenuContext();
+  const isMobile = useMobile();
+  const isSubMenu = !!parentMenuState;
+
+  useUnmount(() => {
+    setIsMenuOpen(false);
+  });
+
+  React.useEffect(() => {
+    if (rest.visible && !previousVisible) {
+      onOpen?.();
+
+      if (!isSubMenu) {
+        setIsMenuOpen(true);
+      }
+    }
+
+    if (!rest.visible && previousVisible) {
+      onClose?.();
+
+      if (!isSubMenu) {
+        setIsMenuOpen(false);
+      }
+    }
+  }, [
+    onOpen,
+    onClose,
+    previousVisible,
+    rest.visible,
+    ui.sidebarCollapsed,
+    setIsMenuOpen,
+    isSubMenu,
+    t,
+  ]);
+
+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement && !isSubMenu) {
+      disableBodyScroll(scrollElement, {
+        reserveScrollBarGap: true,
+      });
+    }
+    return () => {
+      scrollElement && !isSubMenu && enableBodyScroll(scrollElement);
+    };
+  }, [isSubMenu, rest.visible]);
+
+  // Perf win – don't render anything until the menu has been opened
+  if (!rest.visible && !previousVisible) {
+    return null;
+  }
+
+  // sets the menu height based on the available space between the disclosure/
+  // trigger and the bottom of the window
+  return (
+    <>
+      <Menu hideOnClickOutside={!isMobile} preventBodyScroll={false} {...rest}>
+        {(props) => {
+          // kind of hacky, but this is an effective way of telling which way
+          // the menu will _actually_ be placed when taking into account screen
+          // positioning.
+          const topAnchor = props.style?.top === "0";
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
+          const rightAnchor = props.placement === "bottom-end";
+
+          return (
+            <>
+              {isMobile && (
+                <Backdrop
+                  onClick={(ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    rest.hide?.();
+                  }}
+                />
+              )}
+              <Position {...props}>
+                <Background
+                  dir="auto"
+                  topAnchor={topAnchor}
+                  rightAnchor={rightAnchor}
+                  ref={backgroundRef}
+                  hiddenScrollbars
+                  style={
+                    topAnchor
+                      ? {
+                          maxHeight,
+                        }
+                      : undefined
+                  }
+                >
+                  {rest.visible || rest.animating ? children : null}
+                </Background>
+              </Position>
+            </>
+          );
+        }}
+      </Menu>
+    </>
+  );
+};
+
+export default ContextMenu;
+
+export const Backdrop = styled.div`
+  animation: ${fadeIn} 200ms ease-in-out;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${s("backdrop")};
+  z-index: ${depths.menu - 1};
+`;
+
+export const Position = styled.div`
+  position: absolute;
+  z-index: ${depths.menu};
+
+  /*
+   * overrides make mobile-first coding style challenging
+   * so we explicitly define mobile breakpoint here
+   */
+  ${breakpoint("mobile", "tablet")`
+    position: fixed !important;
+    transform: none !important;
+    top: auto !important;
+    right: 8px !important;
+    bottom: 16px !important;
+    left: 8px !important;
+  `};
+`;
+
+type BackgroundProps = {
+  topAnchor?: boolean;
+  rightAnchor?: boolean;
+  theme: DefaultTheme;
+};
+
+export const Background = styled(Scrollable)<BackgroundProps>`
+  animation: ${mobileContextMenu} 200ms ease;
+  transform-origin: 50% 100%;
+  max-width: 100%;
+  background: ${s("menuBackground")};
+  border-radius: 6px;
+  padding: 6px;
+  min-width: 180px;
+  min-height: 44px;
+  max-height: 75vh;
+  pointer-events: all;
+  font-weight: normal;
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    animation: ${(props: BackgroundProps) =>
+      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
+    transform-origin: ${(props: BackgroundProps) =>
+      props.rightAnchor ? "75%" : "25%"} 0;
+    max-width: 276px;
+    background: ${(props: BackgroundProps) => props.theme.menuBackground};
+    box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
+  `};
+`;

app/components/CopyToClipboard.js

@@ -1,34 +0,0 @@
-// @flow
-import * as React from 'react';
-import copy from 'copy-to-clipboard';
-
-type Props = {
-  text: string,
-  children?: React.Node,
-  onClick?: () => *,
-  onCopy: () => *,
-};
-
-class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: SyntheticEvent<*>) => {
-    const { text, onCopy, children } = this.props;
-    const elem = React.Children.only(children);
-    copy(text, {
-      debug: !!__DEV__,
-    });
-
-    if (onCopy) onCopy();
-
-    if (elem && elem.props && typeof elem.props.onClick === 'function') {
-      elem.props.onClick(ev);
-    }
-  };
-
-  render() {
-    const { text: _text, onCopy: _onCopy, children, ...rest } = this.props;
-    const elem = React.Children.only(children);
-    return React.cloneElement(elem, { ...rest, onClick: this.onClick });
-  }
-}
-
-export default CopyToClipboard;

app/components/CopyToClipboard.ts

@@ -0,0 +1,40 @@
+import copy from "copy-to-clipboard";
+import * as React from "react";
+import env from "~/env";
+
+type Props = {
+  text: string;
+  children?: React.ReactElement;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onCopy?: () => void;
+};
+
+class CopyToClipboard extends React.PureComponent<Props> {
+  onClick = (ev: React.SyntheticEvent) => {
+    const { text, onCopy, children } = this.props;
+    const elem = React.Children.only(children);
+
+    copy(text, {
+      debug: env.ENVIRONMENT !== "production",
+      format: "text/plain",
+    });
+
+    onCopy?.();
+
+    if (elem && elem.props && typeof elem.props.onClick === "function") {
+      elem.props.onClick(ev);
+    }
+  };
+
+  render() {
+    const { text, onCopy, children, ...rest } = this.props;
+    const elem = React.Children.only(children);
+    if (!elem) {
+      return null;
+    }
+
+    return React.cloneElement(elem, { ...rest, onClick: this.onClick });
+  }
+}
+
+export default CopyToClipboard;

app/components/DefaultCollectionInputSelect.tsx

@@ -0,0 +1,104 @@
+import { HomeIcon } from "outline-icons";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Optional } from "utility-types";
+import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
+import InputSelect from "~/components/InputSelect";
+import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type DefaultCollectionInputSelectProps = Optional<
+  React.ComponentProps<typeof InputSelect>
+> & {
+  onSelectCollection: (collection: string) => void;
+  defaultCollectionId: string | null;
+};
+
+const DefaultCollectionInputSelect = ({
+  onSelectCollection,
+  defaultCollectionId,
+  ...rest
+}: DefaultCollectionInputSelectProps) => {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const [fetching, setFetching] = useState(false);
+  const [fetchError, setFetchError] = useState();
+  const { showToast } = useToasts();
+
+  React.useEffect(() => {
+    async function fetchData() {
+      if (!collections.isLoaded && !fetching && !fetchError) {
+        try {
+          setFetching(true);
+          await collections.fetchPage({
+            limit: 100,
+          });
+        } catch (error) {
+          showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
+          );
+          setFetchError(error);
+        } finally {
+          setFetching(false);
+        }
+      }
+    }
+    void fetchData();
+  }, [showToast, fetchError, t, fetching, collections]);
+
+  const options = React.useMemo(
+    () =>
+      collections.publicCollections.reduce(
+        (acc, collection) => [
+          ...acc,
+          {
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <CollectionIcon collection={collection} />
+                </IconWrapper>
+                {collection.name}
+              </Flex>
+            ),
+            value: collection.id,
+          },
+        ],
+        [
+          {
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <HomeIcon />
+                </IconWrapper>
+                {t("Home")}
+              </Flex>
+            ),
+            value: "home",
+          },
+        ]
+      ),
+    [collections.publicCollections, t]
+  );
+
+  if (fetching) {
+    return null;
+  }
+
+  return (
+    <InputSelect
+      value={defaultCollectionId ?? "home"}
+      options={options}
+      onChange={onSelectCollection}
+      ariaLabel={t("Default collection")}
+      short
+      {...rest}
+    />
+  );
+};
+
+export default DefaultCollectionInputSelect;

app/components/DelayedMount.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Props = {
+  delay?: number;
+  children: JSX.Element;
+};
+
+export default function DelayedMount({ delay = 250, children }: Props) {
+  const [isShowing, setShowing] = React.useState(false);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => setShowing(true), delay);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [delay]);
+
+  if (!isShowing) {
+    return null;
+  }
+
+  return children;
+}

app/components/DesktopEventHandler.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
+import { useDesktopTitlebar } from "~/hooks/useDesktopTitlebar";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import Desktop from "~/utils/Desktop";
+
+export default function DesktopEventHandler() {
+  useDesktopTitlebar();
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { dialogs } = useStores();
+  const { showToast } = useToasts();
+
+  React.useEffect(() => {
+    Desktop.bridge?.redirect((path: string, replace = false) => {
+      if (replace) {
+        history.replace(path);
+      } else {
+        history.push(path);
+      }
+    });
+
+    Desktop.bridge?.updateDownloaded(() => {
+      showToast("An update is ready to install.", {
+        type: "info",
+        timeout: Infinity,
+        action: {
+          text: "Install now",
+          onClick: () => {
+            void Desktop.bridge?.restartAndInstall();
+          },
+        },
+      });
+    });
+
+    Desktop.bridge?.focus(() => {
+      window.document.body.classList.remove("backgrounded");
+    });
+
+    Desktop.bridge?.blur(() => {
+      window.document.body.classList.add("backgrounded");
+    });
+
+    Desktop.bridge?.openKeyboardShortcuts(() => {
+      dialogs.openGuide({
+        title: t("Keyboard shortcuts"),
+        content: <KeyboardShortcuts />,
+      });
+    });
+  }, [t, history, dialogs, showToast]);
+
+  return null;
+}

app/components/Dialogs.tsx

@@ -0,0 +1,36 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import Guide from "~/components/Guide";
+import Modal from "~/components/Modal";
+import useStores from "~/hooks/useStores";
+
+function Dialogs() {
+  const { dialogs } = useStores();
+  const { guide, modalStack } = dialogs;
+  return (
+    <>
+      {guide ? (
+        <Guide
+          isOpen={guide.isOpen}
+          onRequestClose={dialogs.closeGuide}
+          title={guide.title}
+        >
+          {guide.content}
+        </Guide>
+      ) : undefined}
+      {[...modalStack].map(([id, modal]) => (
+        <Modal
+          key={id}
+          isOpen={modal.isOpen}
+          isCentered={modal.isCentered}
+          onRequestClose={() => dialogs.closeModal(id)}
+          title={modal.title}
+        >
+          {modal.content}
+        </Modal>
+      ))}
+    </>
+  );
+}
+
+export default observer(Dialogs);