stash

.babelrc

@@ -1,12 +1,12 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-typescript",
+    "@babel/preset-flow",
     [
       "@babel/preset-env",
       {
         "corejs": {
-          "version": "3",
+          "version": "2",
           "proposals": true
         },
         "useBuiltIns": "usage"
@@ -14,6 +14,7 @@
     ]
   ],
   "plugins": [
+    "lodash",
     "styled-components",
     [
       "@babel/plugin-proposal-decorators",
@@ -24,25 +25,5 @@
     "@babel/plugin-transform-destructuring",
     "@babel/plugin-transform-regenerator",
     "transform-class-properties"
-  ],
-  "env": {
-    "production": {
-      "plugins": [
-        [
-          "styled-components",
-          {
-            "displayName": false
-          }
-        ]
-      ],
-      "ignore": [
-        "**/*.test.ts"
-      ]
-    },
-    "development": {
-      "ignore": [
-        "**/*.test.ts"
-      ]
-    }
-  }
+  ]
 }

.circleci/config.yml

@@ -1,180 +1,43 @@
-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
-
+version: 2
 jobs:
   build:
-    <<: *defaults
+    working_directory: ~/outline
+    docker:
+      - image: circleci/node:14
+      - image: circleci/redis:latest
+      - image: circleci/postgres:9.6.5-alpine-ram
+    environment:
+      NODE_ENV: test
+      SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+      DATABASE_URL_TEST: postgres://root@localhost:5432/circle_test
+      DATABASE_URL: postgres://root@localhost:5432/circle_test
+      URL: http://localhost:3000
+      SMTP_FROM_EMAIL: hello@example.com
+      AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
+      AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
     steps:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
       - run:
           name: install-deps
-          command: yarn install --frozen-lockfile
+          command: yarn install --pure-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: lint
+          command: yarn lint
+      - run:
+          name: flow
+          command: yarn flow check --max-workers 4
       - run:
           name: test
-          command: yarn test:server --forceExit
-  bundle-size:
-    <<: *defaults
-    environment:
-      NODE_ENV: production
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          command: yarn test
       - run:
-          name: build-vite
-          command: yarn vite:build
-      - run:
-          name: Send bundle stats to RelativeCI
-          command: npx relative-ci-agent
-  build-image:
-    executor: docker-publisher
-    steps:
-      - checkout
-      - setup_remote_docker:
-          version: 20.10.6
-      - run:
-          name: Install Docker buildx
-          command: |
-            mkdir -p ~/.docker/cli-plugins
-            url="https://github.com/docker/buildx/releases/download/v0.8.0/buildx-v0.8.0.linux-amd64"
-            curl -sSL -o ~/.docker/cli-plugins/docker-buildx $url
-            chmod a+x ~/.docker/cli-plugins/docker-buildx
-      - run:
-          name: Enable Docker buildx
-          command: export DOCKER_CLI_EXPERIMENTAL=enabled
-      - run:
-          name: Initialize Docker buildx
-          command: |
-            docker buildx install
-            docker context create docker-multiarch
-            docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
-            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/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: /.*/
+          name: build-webpack
+          command: yarn build:webpack

.dockerignore

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

.env.sample

@@ -1,74 +1,42 @@
+# 👋 Welcome, we're glad you're setting up an installation of Outline. Copy this 
+# file to .env or set the variables in your local environment manually. For 
+# development with docker this should mostly work out  of the box other than 
+# setting the Slack keys and the SECRET_KEY.
+
+
+
+
 # –––––––––––––––– REQUIRED ––––––––––––––––
 
-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.
+# Generate a unique random key, you can use `openssl rand -hex 32` in terminal
+# DO NOT LEAVE UNSET
 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.
+# Generate a unique random key, you can use `openssl rand -hex 32` in terminal
+# DO NOT LEAVE UNSET
 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==
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
+REDIS_URL=redis://localhost:6479
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
-URL=https://app.outline.dev:3000
+URL=http://localhost:3000
 PORT=3000
 
-# See [documentation](docs/SERVICES.md) on running a separate collaboration
-# server, for normal operation this does not need to be set.
-COLLABORATION_URL=
-
-# To support uploading of images for avatars and document attachments an
-# s3-compatible storage must be provided. AWS S3 is recommended for 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.
+# Third party signin credentials, at least one of EITHER Google OR Slack 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
+SLACK_KEY=get_a_key_from_slack
+SLACK_SECRET=get_the_secret_of_above_key
 
 # To configure Google auth, you'll need to create an OAuth Client ID at
 # => https://console.cloud.google.com/apis/credentials
@@ -78,48 +46,18 @@ SLACK_CLIENT_SECRET=get_the_secret_of_above_key
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See
-# 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
+# This will cause paths to javascript, stylesheets, and images to be updated to  
+# the hostname defined in CDN_URL. In your CDN configuration the origin server 
 # should be set to the same as URL.
 CDN_URL=
 
-# Auto-redirect to https in production. The default is true but you may set to
+# Auto-redirect to https in production. The default is true but you may set to 
 # false if you can be sure that SSL is terminated at an external loadbalancer.
 FORCE_HTTPS=true
 
@@ -127,23 +65,15 @@ FORCE_HTTPS=true
 # the maintainers
 ENABLE_UPDATES=true
 
-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
+# You may enable or disable debugging categories to increase the noisiness of
+# logs. The default is a good balance
+DEBUG=cache,presenters,events,emails,mailer,utils,multiplayer,server,services
 
-# Override the maximum size of document imports, could be required if you have
-# especially large Word documents with embedded imagery
-MAXIMUM_IMPORT_SIZE=5120000
+# Comma separated list of domains to be allowed to signin to the wiki. If not
+# set, all domains are allowed by default when using Google OAuth to signin
+GOOGLE_ALLOWED_DOMAINS=
 
-# 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
+# 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
 #
@@ -151,37 +81,41 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
-# Optionally enable google analytics to track pageviews in the knowledge base
+# Optionally enable google analytics to track pageviews in the knowledge base 
 GOOGLE_ANALYTICS_ID=
 
-# 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)
+# Optionally enable Sentry (sentry.io) to track errors and performance
 SENTRY_DSN=
-SENTRY_TUNNEL=
 
-# To support sending outgoing transactional emails such as "document updated" or
+# To support uploading of images for avatars and document attachments an
+# s3-compatible storage must be provided. AWS S3 is recommended for redundency
+# however if you want to keep all file storage local an alternative such as 
+# minio (https://github.com/minio/minio) can be used.
+
+# 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_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
+
+# 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=hello@example.com
-SMTP_REPLY_EMAIL=hello@example.com
-SMTP_TLS_CIPHERS=
-SMTP_SECURE=true
+SMTP_FROM_EMAIL=
+SMTP_REPLY_EMAIL=
 
-# The default interface language. See translate.getoutline.com for a list of
+# Custom logo that displays on the authentication screen, scaled to height: 60px
+# TEAM_LOGO=https://example.com/images/logo.png
+
+# The default interface language. See translate.getoutline.com for a list of 
 # available language codes and their rough percentage translated.
-DEFAULT_LANGUAGE=en_US
-
-# Optionally enable rate limiter at application web server
-RATE_LIMITER_ENABLED=true
-
-# Configure default throttling parameters for rate limiter
-RATE_LIMITER_REQUESTS=1000
-RATE_LIMITER_DURATION_WINDOW=60
-
-# Iframely API config
-IFRAMELY_URL=
-IFRAMELY_API_KEY=
+DEFAULT_LANGUAGE=en_US

.eslintrc

@@ -1,63 +1,20 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "sourceType": "module",
-    "extraFileExtensions": [".json"],
-    "project": "./tsconfig.json",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
+  "parser": "babel-eslint",
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "plugin:prettier/recommended"
+    "react-app",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:flowtype/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "plugins": [
-    "es",
-    "@typescript-eslint",
-    "eslint-plugin-import",
-    "eslint-plugin-node",
-    "eslint-plugin-react",
-    "import"
+    "prettier",
+    "flowtype"
   ],
   "rules": {
     "eqeqeq": 2,
-    "curly": 2,
-    "no-console": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "spaced-comment": "error",
-    "object-shorthand": "error",
+    "no-unused-vars": 2,
     "no-mixed-operators": "off",
-    "no-useless-escape": "off",
-    "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",
-      {
-        "checksVoidReturn": false
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "args": "after-used",
-        "ignoreRestSiblings": true
-      }
-    ],
-    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
-    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "import/no-named-as-default": "off",
-    "import/no-named-as-default-member": "off",
-    "import/newline-after-import": 2,
     "import/order": [
       "error",
       {
@@ -66,48 +23,53 @@
         },
         "pathGroups": [
           {
-            "pattern": "@shared/**",
+            "pattern": "shared/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "@server/**",
+            "pattern": "stores",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/stores",
+            "pattern": "stores/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/stores/**",
+            "pattern": "models/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/models/**",
+            "pattern": "scenes/**",
             "group": "external",
             "position": "after"
           },
           {
-            "pattern": "~/scenes/**",
-            "group": "external",
-            "position": "after"
-          },
-          {
-            "pattern": "~/components/**",
-            "group": "external",
-            "position": "after"
-          },
-          {
-            "pattern": "~/**",
+            "pattern": "components/**",
             "group": "external",
             "position": "after"
           }
         ]
       }
     ],
+    "flowtype/require-valid-file-annotation": [
+      2,
+      "always",
+      {
+        "annotationStyle": "line"
+      }
+    ],
+    "flowtype/space-after-type-colon": [
+      2,
+      "always"
+    ],
+    "flowtype/space-before-type-colon": [
+      2,
+      "never"
+    ],
     "prettier/prettier": [
       "error",
       {
@@ -122,11 +84,22 @@
       "pragma": "React",
       "version": "detect"
     },
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
     "import/resolver": {
-      "typescript": {}
+      "node": {
+        "paths": [
+          "app",
+          "."
+        ]
+      }
+    },
+    "flowtype": {
+      "onlyFilesWithFlowAnnotation": false
     }
+  },
+  "env": {
+    "jest": true
+  },
+  "globals": {
+    "EDITOR_VERSION": true
   }
 }

.flowconfig

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

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/dependabot.yml

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

.github/stale.yml

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

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

.github/workflows/codeql-analysis.yml

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

.github/workflows/stale.yml

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

.gitignore

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

.husky/pre-commit

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

.jestconfig.json

@@ -1,63 +0,0 @@
-{
-  "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

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

ARCHITECTURE.md

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

Dockerfile

@@ -1,32 +1,23 @@
-ARG APP_PATH=/opt/outline
-FROM outlinewiki/outline-base as base
+FROM node:14-alpine
+
+ENV APP_PATH /opt/outline
+RUN mkdir -p $APP_PATH
 
-ARG APP_PATH
 WORKDIR $APP_PATH
 
-# ---
-FROM node:18-alpine AS runner
+COPY package.json ./
+COPY yarn.lock ./
 
-RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
+RUN yarn --pure-lockfile
 
-LABEL org.opencontainers.image.source="https://github.com/outline/outline"
+COPY . .
+
+RUN yarn build && \
+  yarn --production --ignore-scripts --prefer-offline && \
+  rm -rf shared && \
+  rm -rf app
 
-ARG APP_PATH
-WORKDIR $APP_PATH
 ENV NODE_ENV production
-
-COPY --from=base $APP_PATH/build ./build
-COPY --from=base $APP_PATH/server ./server
-COPY --from=base $APP_PATH/public ./public
-COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
-COPY --from=base $APP_PATH/node_modules ./node_modules
-COPY --from=base $APP_PATH/package.json ./package.json
-
-RUN addgroup -g 1001 -S nodejs && \
-  adduser -S nodejs -u 1001 && \
-  chown -R nodejs:nodejs $APP_PATH/build
-
-USER nodejs
+CMD yarn start
 
 EXPOSE 3000
-CMD ["yarn", "start"]

Dockerfile.base

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

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.64.0
+Licensed Work:        Outline 0.51.0
                       The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2026-05-23
+Change Date:          2023-12-13
 
 Change License:       Apache License, Version 2.0
 

Makefile

@@ -1,8 +1,8 @@
 up:
 	docker-compose up -d redis postgres s3
-	yarn install-local-ssl
 	yarn install --pure-lockfile
-	yarn dev:watch
+	yarn sequelize db:migrate
+	yarn dev
 
 build:
 	docker-compose build --pull outline

Procfile

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

README.md

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

SECURITY.md

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

__mocks__/bull.js

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

__mocks__/console.js

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

__mocks__/window.js

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

app.json

@@ -3,7 +3,13 @@
   "description": "Open source wiki and knowledge base for growing teams",
   "website": "https://www.getoutline.com/",
   "repository": "https://github.com/outline/outline",
-  "keywords": ["wiki", "team", "node", "markdown", "slack"],
+  "keywords": [
+    "wiki",
+    "team",
+    "node",
+    "markdown",
+    "slack"
+  ],
   "success_url": "/",
   "formation": {
     "web": {
@@ -24,12 +30,8 @@
     "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",
+      "description": "A secret key",
       "generator": "secret",
       "required": true
     },
@@ -38,7 +40,7 @@
       "required": true
     },
     "URL": {
-      "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
+      "description": "https://{your app name}.herokuapp.com",
       "required": true
     },
     "GOOGLE_CLIENT_ID": {
@@ -49,58 +51,15 @@
       "description": "",
       "required": false
     },
-    "AZURE_CLIENT_ID": {
-      "description": "To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See the guide for details on setting up your Azure App: https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4",
+    "GOOGLE_ALLOWED_DOMAINS": {
+      "description": "Comma separated list of domains to be allowed (optional). If not set, all Google apps domains are allowed by default",
       "required": false
     },
-    "AZURE_CLIENT_SECRET": {
-      "description": "",
-      "required": false
-    },
-    "AZURE_RESOURCE_APP_ID": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_CLIENT_ID": {
-      "description": "To configure generic OIDC auth, you'll need some kind of identity provider. See documentation for whichever IdP you use to acquire the following info; Redirect URI is https://<URL>/auth/oidc.callback",
-      "required": false
-    },
-    "OIDC_CLIENT_SECRET": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_AUTH_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_TOKEN_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_USERINFO_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_USERNAME_CLAIM": {
-      "description": "Specify which claims to derive user information from. Supports any valid JSON path with the JWT payload",
-      "value": "preferred_username",
-      "required": false
-    },
-    "OIDC_DISPLAY_NAME": {
-      "description": "Display name for OIDC authentication",
-      "value": "OpenID Connect",
-      "required": false
-    },
-    "OIDC_SCOPES": {
-      "description": "Space separated auth scopes.",
-      "value": "openid profile email",
-      "required": false
-    },
-    "SLACK_CLIENT_ID": {
+    "SLACK_KEY": {
       "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
       "required": false
     },
-    "SLACK_CLIENT_SECRET": {
+    "SLACK_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -172,31 +131,17 @@
       "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)",
+      "description": "UA-xxxx (optional)",
       "required": false
     },
     "SENTRY_DSN": {
       "description": "An API key for Sentry if you wish to collect error reporting (optional)",
       "required": false
     },
-    "SENTRY_TUNNEL": {
-      "description": "A sentry tunnel URL for bypassing ad blockers in the UI (optional)",
-      "required": false
-    },
-    "DEFAULT_LANGUAGE": {
-      "value": "en_US",
-      "description": "The default interface language. See translate.getoutline.com for a list of available language codes and their rough percentage translated.",
+    "TEAM_LOGO": {
+      "description": "A logo that will be displayed on the signed out home page",
       "required": false
     }
   }
-}
+}

app/.eslintrc

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

app/actions/definitions/collections.tsx

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

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

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

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

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

@@ -1,79 +0,0 @@
-import copy from "copy-to-clipboard";
-import { LinkIcon, RestoreIcon } from "outline-icons";
-import * as React from "react";
-import { matchPath } from "react-router-dom";
-import 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

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

app/actions/definitions/teams.tsx

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

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

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

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

app/actions/sections.ts

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

app/components/ActionButton.tsx

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

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

app/components/Actions.ts

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

app/components/Analytics.js

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

app/components/Analytics.tsx

@@ -1,81 +0,0 @@
-/* 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

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

app/components/ArrowKeyNavigation.tsx

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

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

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

app/components/Authenticated.tsx

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

@@ -1,137 +0,0 @@
-import { AnimatePresence } from "framer-motion";
-import { observer, useLocalStore } from "mobx-react";
-import * as React from "react";
-import { Switch, Route, useLocation, matchPath } from "react-router-dom";
-import { TeamPreference } from "@shared/types";
-import ErrorSuspended from "~/scenes/ErrorSuspended";
-import DocumentContext from "~/components/DocumentContext";
-import type { DocumentContextValue } from "~/components/DocumentContext";
-import Layout from "~/components/Layout";
-import RegisterKeyDown from "~/components/RegisterKeyDown";
-import Sidebar from "~/components/Sidebar";
-import SidebarRight from "~/components/Sidebar/Right";
-import SettingsSidebar from "~/components/Sidebar/Settings";
-import type { Editor as TEditor } from "~/editor";
-import 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

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

app/components/Avatar/Avatar.tsx

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

app/components/Avatar/AvatarWithPresence.js

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

app/components/Avatar/AvatarWithPresence.tsx

@@ -1,115 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
-import User from "~/models/User";
-import Avatar from "~/components/Avatar";
-import Tooltip from "~/components/Tooltip";
-
-type Props = {
-  user: User;
-  isPresent: boolean;
-  isEditing: boolean;
-  isObserving: boolean;
-  isCurrentUser: boolean;
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-};
-
-function AvatarWithPresence({
-  onClick,
-  user,
-  isPresent,
-  isEditing,
-  isObserving,
-  isCurrentUser,
-}: Props) {
-  const { t } = useTranslation();
-  const status = isPresent
-    ? isEditing
-      ? t("currently editing")
-      : t("currently viewing")
-    : t("previously edited");
-
-  return (
-    <>
-      <Tooltip
-        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

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

app/components/Avatar/index.js

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

app/components/Avatar/index.ts

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

app/components/Badge.js

@@ -0,0 +1,18 @@
+// @flow
+import styled from "styled-components";
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 2px 6px 3px;
+  background-color: ${({ yellow, primary, theme }) =>
+    yellow ? theme.yellow : primary ? theme.primary : theme.textTertiary};
+  color: ${({ primary, yellow, theme }) =>
+    primary ? theme.white : yellow ? theme.almostBlack : theme.background};
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  user-select: none;
+`;
+
+export default Badge;

app/components/Badge.ts

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

app/components/Branding.js

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

app/components/Branding.tsx

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

@@ -0,0 +1,210 @@
+// @flow
+import { observer } from "mobx-react";
+import {
+  ArchiveIcon,
+  EditIcon,
+  GoToIcon,
+  PadlockIcon,
+  ShapesIcon,
+  TrashIcon,
+} from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Document from "models/Document";
+import CollectionIcon from "components/CollectionIcon";
+import Flex from "components/Flex";
+import useStores from "hooks/useStores";
+import BreadcrumbMenu from "menus/BreadcrumbMenu";
+import { collectionUrl } from "utils/routeHelpers";
+
+type Props = {|
+  document: Document,
+  children?: React.Node,
+  onlyText: boolean,
+|};
+
+function Icon({ document }) {
+  const { t } = useTranslation();
+
+  if (document.isDeleted) {
+    return (
+      <>
+        <CategoryName to="/trash">
+          <TrashIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Trash")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isArchived) {
+    return (
+      <>
+        <CategoryName to="/archive">
+          <ArchiveIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Archive")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isDraft) {
+    return (
+      <>
+        <CategoryName to="/drafts">
+          <EditIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Drafts")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  if (document.isTemplate) {
+    return (
+      <>
+        <CategoryName to="/templates">
+          <ShapesIcon color="currentColor" />
+          &nbsp;
+          <span>{t("Templates")}</span>
+        </CategoryName>
+        <Slash />
+      </>
+    );
+  }
+  return null;
+}
+
+const Breadcrumb = ({ document, children, onlyText }: Props) => {
+  const { collections } = useStores();
+  const { t } = useTranslation();
+
+  if (!collections.isLoaded) {
+    return <Wrapper />;
+  }
+
+  let collection = collections.get(document.collectionId);
+  if (!collection) {
+    collection = {
+      id: document.collectionId,
+      name: t("Deleted Collection"),
+      color: "currentColor",
+    };
+  }
+
+  const path = collection.pathToDocument
+    ? collection.pathToDocument(document.id).slice(0, -1)
+    : [];
+
+  if (onlyText === true) {
+    return (
+      <>
+        {collection.private && (
+          <>
+            <SmallPadlockIcon color="currentColor" size={16} />{" "}
+          </>
+        )}
+        {collection.name}
+        {path.map((n) => (
+          <React.Fragment key={n.id}>
+            <SmallSlash />
+            {n.title}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
+
+  const isNestedDocument = path.length > 1;
+  const lastPath = path.length ? path[path.length - 1] : undefined;
+  const menuPath = isNestedDocument ? path.slice(0, -1) : [];
+
+  return (
+    <Wrapper justify="flex-start" align="center">
+      <Icon document={document} />
+      <CollectionName to={collectionUrl(collection.id)}>
+        <CollectionIcon collection={collection} expanded />
+        &nbsp;
+        <span>{collection.name}</span>
+      </CollectionName>
+      {isNestedDocument && (
+        <>
+          <Slash /> <BreadcrumbMenu path={menuPath} />
+        </>
+      )}
+      {lastPath && (
+        <>
+          <Slash />{" "}
+          <Crumb to={lastPath.url} title={lastPath.title}>
+            {lastPath.title}
+          </Crumb>
+        </>
+      )}
+      {children}
+    </Wrapper>
+  );
+};
+
+export const Slash = styled(GoToIcon)`
+  flex-shrink: 0;
+  fill: ${(props) => props.theme.divider};
+`;
+
+const Wrapper = styled(Flex)`
+  display: none;
+
+  ${breakpoint("tablet")`	
+    display: flex;
+  `};
+`;
+
+const SmallPadlockIcon = styled(PadlockIcon)`
+  display: inline-block;
+  vertical-align: sub;
+`;
+
+const SmallSlash = styled(GoToIcon)`
+  width: 15px;
+  height: 10px;
+  flex-shrink: 0;
+  opacity: 0.25;
+`;
+
+const Crumb = styled(Link)`
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const CollectionName = styled(Link)`
+  display: flex;
+  flex-shrink: 1;
+  color: ${(props) => props.theme.text};
+  font-size: 15px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const CategoryName = styled(CollectionName)`
+  flex-shrink: 0;
+`;
+
+export default observer(Breadcrumb);

app/components/Breadcrumb.tsx

@@ -1,88 +0,0 @@
-import { GoToIcon } from "outline-icons";
-import * as React from "react";
-import { Link } from "react-router-dom";
-import styled from "styled-components";
-import { s, ellipsis } from "@shared/styles";
-import Flex from "~/components/Flex";
-import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
-import { 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/Bubble.js

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

app/components/Button.js

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

app/components/Button.tsx

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

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

app/components/ButtonLarge.ts

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

app/components/ButtonLink.js

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

app/components/ButtonLink.tsx

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

app/components/ButtonSmall.ts

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

app/components/CenteredContent.js

@@ -0,0 +1,33 @@
+// @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%;
+  max-width: 100vw;
+  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

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

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

app/components/CircularProgressBar.tsx

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

app/components/ClickablePadding.js

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

app/components/ClickablePadding.ts

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

app/components/Collaborators.js

@@ -0,0 +1,78 @@
+// @flow
+import { sortBy, keyBy } from "lodash";
+import { observer, inject } from "mobx-react";
+import * as React from "react";
+import { MAX_AVATAR_DISPLAY } from "shared/constants";
+
+import DocumentPresenceStore from "stores/DocumentPresenceStore";
+import ViewsStore from "stores/ViewsStore";
+import Document from "models/Document";
+import { AvatarWithPresence } from "components/Avatar";
+import Facepile from "components/Facepile";
+
+type Props = {
+  views: ViewsStore,
+  presence: DocumentPresenceStore,
+  document: Document,
+  currentUserId: string,
+};
+
+@observer
+class Collaborators extends React.Component<Props> {
+  componentDidMount() {
+    if (!this.props.document.isDeleted) {
+      this.props.views.fetchPage({ documentId: this.props.document.id });
+    }
+  }
+
+  render() {
+    const { document, presence, views, currentUserId } = this.props;
+    let documentPresence = presence.get(document.id);
+    documentPresence = documentPresence
+      ? Array.from(documentPresence.values())
+      : [];
+
+    const documentViews = views.inDocument(document.id);
+
+    const presentIds = documentPresence.map((p) => p.userId);
+    const editingIds = documentPresence
+      .filter((p) => p.isEditing)
+      .map((p) => p.userId);
+
+    // ensure currently present via websocket are always ordered first
+    const mostRecentViewers = sortBy(
+      documentViews.slice(0, MAX_AVATAR_DISPLAY),
+      (view) => {
+        return presentIds.includes(view.user.id);
+      }
+    );
+
+    const viewersKeyedByUserId = keyBy(mostRecentViewers, (v) => v.user.id);
+    const overflow = documentViews.length - mostRecentViewers.length;
+
+    return (
+      <Facepile
+        users={mostRecentViewers.map((v) => v.user)}
+        overflow={overflow}
+        renderAvatar={(user) => {
+          const isPresent = presentIds.includes(user.id);
+          const isEditing = editingIds.includes(user.id);
+          const { lastViewedAt } = viewersKeyedByUserId[user.id];
+
+          return (
+            <AvatarWithPresence
+              key={user.id}
+              user={user}
+              lastViewedAt={lastViewedAt}
+              isPresent={isPresent}
+              isEditing={isEditing}
+              isCurrentUser={currentUserId === user.id}
+            />
+          );
+        }}
+      />
+    );
+  }
+}
+
+export default inject("views", "presence")(Collaborators);

app/components/Collaborators.tsx

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

@@ -1,69 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { useHistory } from "react-router-dom";
-import 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

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

@@ -0,0 +1,45 @@
+// @flow
+import { inject, observer } from "mobx-react";
+import { PrivateCollectionIcon, CollectionIcon } from "outline-icons";
+import { getLuminance } from "polished";
+import * as React from "react";
+import UiStore from "stores/UiStore";
+import Collection from "models/Collection";
+import { icons } from "components/IconPicker";
+
+type Props = {
+  collection: Collection,
+  expanded?: boolean,
+  size?: number,
+  ui: UiStore,
+};
+
+function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
+  // If the chosen icon color is very dark then we invert it in dark mode
+  // otherwise it will be impossible to see against the dark background.
+  const color =
+    ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+      ? getLuminance(collection.color) > 0.12
+        ? collection.color
+        : "currentColor"
+      : collection.color;
+
+  if (collection.icon && collection.icon !== "collection") {
+    try {
+      const Component = icons[collection.icon].component;
+      return <Component color={color} size={size} />;
+    } catch (error) {
+      console.warn("Failed to render custom icon " + collection.icon);
+    }
+  }
+
+  if (collection.private) {
+    return (
+      <PrivateCollectionIcon color={color} expanded={expanded} size={size} />
+    );
+  }
+
+  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+}
+
+export default inject("ui")(observer(ResolvedCollectionIcon));

app/components/CommandBar.tsx

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

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

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

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

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

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

@@ -1,204 +0,0 @@
-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.js

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

app/components/ContextMenu/Header.ts

@@ -1,13 +0,0 @@
-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.js

@@ -0,0 +1,101 @@
+// @flow
+import { CheckmarkIcon } from "outline-icons";
+import * as React from "react";
+import { MenuItem as BaseMenuItem } from "reakit/Menu";
+import styled from "styled-components";
+
+type Props = {|
+  onClick?: (SyntheticEvent<>) => void | Promise<void>,
+  children?: React.Node,
+  selected?: boolean,
+  disabled?: boolean,
+  to?: string,
+  href?: string,
+  target?: "_blank",
+  as?: string | React.ComponentType<*>,
+|};
+
+const MenuItem = ({
+  onClick,
+  children,
+  selected,
+  disabled,
+  as,
+  ...rest
+}: Props) => {
+  return (
+    <BaseMenuItem
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      {(props) => (
+        <MenuAnchor as={onClick ? "button" : as} {...props}>
+          {selected !== undefined && (
+            <>
+              {selected ? <CheckmarkIcon /> : <Spacer />}
+              &nbsp;
+            </>
+          )}
+          {children}
+        </MenuAnchor>
+      )}
+    </BaseMenuItem>
+  );
+};
+
+const Spacer = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+export const MenuAnchor = styled.a`
+  display: flex;
+  margin: 0;
+  border: 0;
+  padding: 6px 12px;
+  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: 15px;
+  cursor: default;
+  user-select: none;
+
+  svg:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  svg {
+    flex-shrink: 0;
+    opacity: ${(props) => (props.disabled ? ".5" : 1)};
+  }
+
+  ${(props) =>
+    props.disabled
+      ? "pointer-events: none;"
+      : `
+
+  &:hover,
+  &.focus-visible {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    box-shadow: none;
+    cursor: pointer;
+
+    svg {
+      fill: ${props.theme.white};
+    }
+  }
+
+  &:focus {
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+  }
+  `};
+`;
+
+export default MenuItem;

app/components/ContextMenu/MenuItem.tsx

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

@@ -1,70 +0,0 @@
-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%)`;