stash

.babelrc

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

.circleci/config.yml

@@ -0,0 +1,43 @@
+version: 2
+jobs:
+  build:
+    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 --pure-lockfile
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+      - 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
+      - run:
+          name: build-webpack
+          command: yarn build:webpack

.circleci/run-build-locally.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+curl --user ${CIRCLE_TOKEN}: \
+    --request POST \
+    --form revision=<ENTER COMMIT SHA HERE>\
+    --form config=@config.yml \
+    --form notify=false \
+        https://circleci.com/api/v1.1/project/github/outline/outline/tree/master

.dockerignore

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

.env.development

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

.env.sample

@@ -1,85 +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@postgres:5432/outline
-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://redis: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=
+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=
-
-# Specify what storage system to use. Possible value is one of "s3" or "local".
-# For "local", the avatar images and document attachments will be saved on local disk. 
-FILE_STORAGE=local
-
-# If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
-# which all attachments/images go. Make sure that the process has permissions to create
-# this path and also to write files to it.
-FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
-
-# Maximum allowed size for the uploaded attachment.
-FILE_STORAGE_UPLOAD_MAX_SIZE=262144000
-
-# Override the maximum size of document imports, generally this should be lower
-# than the document attachment maximum size.
-FILE_STORAGE_IMPORT_MAX_SIZE=
-
-# Override the maximum size of workspace imports, these can be especially large
-# and the files are temporary being automatically deleted after a period of time.
-FILE_STORAGE_WORKSPACE_IMPORT_MAX_SIZE=
-
-# To support uploading of images for avatars and document attachments in a distributed 
-# architecture an s3-compatible storage can be configured if FILE_STORAGE=s3 above.
-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_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
@@ -89,87 +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=
-OIDC_LOGOUT_URI=
 
-# Specify which claims to derive user information from
-# Supports any valid JSON path with the JWT payload
-OIDC_USERNAME_CLAIM=preferred_username
-
-# Display name for OIDC authentication
-OIDC_DISPLAY_NAME=OpenID Connect
-
-# Space separated auth scopes.
-OIDC_SCOPES=openid profile email
-
-# To configure the GitHub integration, you'll need to create a GitHub App at
-# => https://github.com/settings/apps
-#
-# When configuring the Client ID, add a redirect URL under "Permissions & events":
-# https://<URL>/api/github.callback
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-GITHUB_APP_NAME=
-GITHUB_APP_ID=
-GITHUB_APP_PRIVATE_KEY=
-
-# Linear
-LINEAR_CLIENT_ID=
-LINEAR_CLIENT_SECRET=
-
-# To configure Discord auth, you'll need to create a Discord Application at
-# => https://discord.com/developers/applications/
-#
-# When configuring the Client ID, add a redirect URL under "OAuth2":
-# https://<URL>/auth/discord.callback
-DISCORD_CLIENT_ID=
-DISCORD_CLIENT_SECRET=
-
-# DISCORD_SERVER_ID should be the ID of the Discord server that Outline is
-# integrated with. 
-# Used to verify that the user is a member of the server as well as server
-# metadata such as nicknames, server icon and name.
-DISCORD_SERVER_ID=
-
-# DISCORD_SERVER_ROLES should be a comma separated list of role IDs that are
-# allowed to access Outline. If this is not set, all members of the server
-# will be allowed to access Outline.
-# DISCORD_SERVER_ID and DISCORD_SERVER_ROLES must be set together.
-DISCORD_SERVER_ROLES=
-
-# –––––––––––––– IMPORTS ––––––––––––––
-NOTION_CLIENT_ID=
-NOTION_CLIENT_SECRET=
 
 # –––––––––––––––– 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
 
@@ -177,19 +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
 
-# You can remove this line if your reverse proxy already logs incoming http
-# requests and this ends up being duplicative
-DEBUG=http
+# 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=
 
-# 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
 #
@@ -197,34 +81,41 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
-# For Dropbox integration, follow these instructions to get the key https://www.dropbox.com/developers/embedder#setup
-# and do not forget to whitelist your domain name in the app settings
-DROPBOX_APP_KEY=
+# 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_SERVICE=
+SMTP_HOST=
+SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
 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

.env.test

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

.eslintrc

@@ -1,74 +1,20 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "sourceType": "module",
-    "extraFileExtensions": [".json"],
-    "project": "./tsconfig.json",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
+  "parser": "babel-eslint",
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "plugin:prettier/recommended"
+    "react-app",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:flowtype/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "plugins": [
-    "es",
-    "@typescript-eslint",
-    "eslint-plugin-import",
-    "eslint-plugin-node",
-    "eslint-plugin-react",
-    "eslint-plugin-lodash"
+    "prettier",
+    "flowtype"
   ],
   "rules": {
     "eqeqeq": 2,
-    "curly": 2,
-    "no-console": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "spaced-comment": "error",
-    "object-shorthand": "error",
+    "no-unused-vars": 2,
     "no-mixed-operators": "off",
-    "no-useless-escape": "off",
-    "no-shadow": "off",
-    "es/no-regexp-lookbehind-assertions": "error",
-    "react/self-closing-comp": ["error", {
-      "component": true,
-      "html": true
-    }],
-    "@typescript-eslint/no-shadow": [
-      "warn",
-      {
-        "allow": ["transaction"],
-        "hoist": "all",
-        "ignoreTypeValueShadow": true
-      }
-    ],
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-floating-promises": "error",
-    "@typescript-eslint/await-thenable": "error",
-    "@typescript-eslint/no-misused-promises": [
-      "error",
-      {
-        "checksVoidReturn": false
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "args": "after-used",
-        "ignoreRestSiblings": true
-      }
-    ],
-    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
-    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "lodash/import-scope": ["error", "method"],
-    "import/no-named-as-default": "off",
-    "import/no-named-as-default-member": "off",
-    "import/newline-after-import": 2,
     "import/order": [
       "error",
       {
@@ -77,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",
       {
@@ -133,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/bug_report.md

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

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,63 +0,0 @@
-name: Bug report
-description: File a bug to help us improve
-labels: ["bug"]
-body:
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered.
-    options:
-    - label: I have searched the existing issues
-      required: true
-- type: checkboxes
-  attributes:
-    label: This is not related to configuring Outline
-    description: I understand that questions related to configuring self-hosted Outline should be asked in the [community forum](https://github.com/outline/outline/discussions/categories/self-hosting).
-    options:
-    - label: The issue is not related to self-hosting config
-      required: true
-- type: textarea
-  attributes:
-    label: Current Behavior
-    description: A concise description of what you're experiencing.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Expected Behavior
-    description: A concise description of what you expected to happen.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Steps To Reproduce
-    description: Steps to reproduce the behavior.
-    placeholder: |
-      1. In this environment...
-      1. With this config...
-      1. Run '...'
-      1. See error...
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Environment
-    description: |
-      examples:
-        - **Outline**: Outline 0.80.0
-        - **Browser**: Safari
-    value: |
-        - Outline:
-        - Browser:
-    render: markdown
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Anything else?
-    description: |
-      Links? References? Anything that will give us more context about the issue you are encountering!
-
-      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
-  validations:
-    required: false

.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/config.yml

@@ -15,8 +15,6 @@ requestInfoDefaultTitles:
 
 requestInfoLabelToAdd: more information needed
 
-requestInfoUserstoExclude:
-  - tommoor
 
 # Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
 

.github/dependabot.yml

@@ -1,28 +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"
-    groups:
-      babel:
-        patterns:
-          - "@babel/*"
-      sentry:
-        patterns:
-          - "@sentry/*"
-      fortawesome:
-        patterns:
-          - "@fortawesome/*"
-      aws:
-        patterns:
-          - "@aws-sdk/*"

.github/no-response.yml

@@ -1,7 +1,7 @@
 # Configuration for probot-no-response - https://github.com/probot/no-response
 
 # Number of days of inactivity before an Issue is closed for lack of response
-daysUntilClose: 7
+daysUntilClose: 14
 
 # Label requiring a response
 responseRequiredLabel: more information needed

.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/ci.yml

@@ -1,165 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-env:
-  NODE_ENV: test
-  DATABASE_URL: postgres://postgres:password@localhost:5432/outline_test
-  REDIS_URL: redis://127.0.0.1:6379
-  URL: http://localhost:3000
-  NODE_OPTIONS: --max-old-space-size=8192
-  SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-  UTILS_SECRET: 123456
-  SLACK_VERIFICATION_TOKEN: 123456
-  SMTP_USERNAME: localhost
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'yarn'
-    
-    - name: Install dependencies
-      run: yarn install --frozen-lockfile
-
-  lint:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn lint
-
-  types:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn tsc
-
-  changes:
-    runs-on: ubuntu-latest
-    outputs:
-      server: ${{ steps.filter.outputs.server }}
-      app: ${{ steps.filter.outputs.app }}
-    steps:
-      - uses: actions/checkout@v4
-      - uses: dorny/paths-filter@v2
-        id: filter
-        with:
-          filters: |
-            server:
-              - 'server/**'
-              - 'shared/**'
-              - 'package.json'
-              - 'yarn.lock'
-            app:
-              - 'app/**'
-              - 'shared/**'
-              - 'package.json'
-              - 'yarn.lock'
-
-  test:
-    needs: [build, changes]
-    if: ${{ needs.changes.outputs.app == 'true' }}
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        test-group: [app, shared]
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn test:${{ matrix.test-group }}
-
-  test-server:
-    needs: [build, changes]
-    if: ${{ needs.changes.outputs.server == 'true' }}
-    runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:14.2
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: password
-          POSTGRES_DB: outline_test
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-      
-      redis:
-        image: redis:5.0
-        ports:
-          - 6379:6379
-        options: >-
-          --health-cmd "redis-cli ping"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-
-    strategy:
-      matrix:
-        shard: [1, 2, 3]
-    
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - run: yarn sequelize db:migrate
-    - name: Run server tests
-      run: |
-        TESTFILES=$(find . -name "*.test.ts" -path "*/server/*" | sort | split -n -d -l $(($(find . -name "*.test.ts" -path "*/server/*" | wc -l)/${{ matrix.shard }})) - | sed -n "${{ matrix.shard }}p")
-        yarn test --maxWorkers=2 $TESTFILES
-
-  bundle-size:
-    needs: [build, types, changes]
-    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 20.x
-        cache: 'yarn'
-    - run: yarn install --frozen-lockfile
-    - name: Set environment to production
-      run: echo "NODE_ENV=production" >> $GITHUB_ENV
-    - run: yarn vite:build
-    - name: Send bundle stats to RelativeCI
-      uses: relative-ci/agent-action@v2
-      with:
-        key: ${{ secrets.RELATIVE_CI_KEY }}
-        token: ${{ secrets.GITHUB_TOKEN }}
-        webpackStatsFile: ./build/app/webpack-stats.json

.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/docker.yml

@@ -1,212 +0,0 @@
-name: Docker
-
-on:
-  push:
-    tags:
-      - "v*"
-
-env:
-  IMAGE_NAME: outlinewiki/outline
-  BASE_IMAGE_NAME: outlinewiki/outline-base
-
-jobs:
-  build-arm:
-    runs-on: ubicloud-standard-8-arm
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker base meta
-        id: base_meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.BASE_IMAGE_NAME }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push base image
-        id: base_build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile.base
-          labels: ${{ steps.base_meta.outputs.labels }}
-          tags: ${{ env.BASE_IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.IMAGE_NAME }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Build and push
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile
-          labels: ${{ steps.meta.outputs.labels }}
-          tags: ${{ env.IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
-          build-args: |
-            BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}@${{ steps.base_build.outputs.digest }}
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-linux-arm64
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  build-amd:
-    runs-on: ubicloud-standard-8
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker base meta
-        id: base_meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.BASE_IMAGE_NAME }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push base image
-        id: base_build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile.base
-          labels: ${{ steps.base_meta.outputs.labels }}
-          tags: ${{ env.BASE_IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/amd64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.IMAGE_NAME }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Build and push
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile
-          labels: ${{ steps.meta.outputs.labels }}
-          tags: ${{ env.IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/amd64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
-          build-args: |
-            BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}@${{ steps.base_build.outputs.digest }}
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-linux-amd64
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  merge:
-    runs-on: ubicloud-standard-8
-    needs:
-      - build-amd
-      - build-arm
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
-        with:
-          path: ${{ runner.temp }}/digests
-          pattern: digests-*
-          merge-multiple: true
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Create manifest list and push
-        working-directory: ${{ runner.temp }}/digests
-        run: |
-          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
-
-      - name: Inspect image
-        run: |
-          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.github/workflows/lint.yml

@@ -1,30 +0,0 @@
-name: Lint
-
-on:
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  run-linters:
-    if: startsWith(github.actor, 'codegen-sh')
-    name: Run linters
-    runs-on: ubuntu-latest
-
-    permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push the
-      # added or changed files to the repository.
-      contents: write
-
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn lint --fix
-
-      - name: Commit changes
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: 'Applied automatic fixes'

.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,A1"
-      - name: Print outputs
-        run: echo ${{ join(steps.stale.outputs.*, ',') }}

.gitignore

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

.husky/pre-commit

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

.jestconfig.json

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

.sequelizerc

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

.vscode/settings.json

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

ARCHITECTURE.md

@@ -0,0 +1,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,48 +1,23 @@
-ARG APP_PATH=/opt/outline
-ARG BASE_IMAGE=outlinewiki/outline-base
-FROM ${BASE_IMAGE} AS base
+FROM node:14-alpine
+
+ENV APP_PATH /opt/outline
+RUN mkdir -p $APP_PATH
 
-ARG APP_PATH
 WORKDIR $APP_PATH
 
-# ---
-FROM node:20-slim AS runner
+COPY package.json ./
+COPY yarn.lock ./
 
-LABEL org.opencontainers.image.source="https://github.com/outline/outline"
+RUN yarn --pure-lockfile
 
-ARG APP_PATH
-WORKDIR $APP_PATH
-ENV NODE_ENV=production
+COPY . .
 
-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 yarn build && \
+  yarn --production --ignore-scripts --prefer-offline && \
+  rm -rf shared && \
+  rm -rf app
 
-# Install wget to healthcheck the server
-RUN  apt-get update \
-  && apt-get install -y wget \
-  && rm -rf /var/lib/apt/lists/*
-
-# Create a non-root user compatible with Debian and BusyBox based images
-RUN addgroup --gid 1001 nodejs && \
-  adduser --uid 1001 --ingroup nodejs nodejs && \
-  chown -R nodejs:nodejs $APP_PATH/build && \
-  mkdir -p /var/lib/outline && \
-  chown -R nodejs:nodejs /var/lib/outline
-
-ENV FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
-RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
-  chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
-
-VOLUME /var/lib/outline/data
-
-USER nodejs
-
-HEALTHCHECK --interval=1m CMD wget -qO- "http://localhost:${PORT:-3000}/_health" | grep -q "OK" || exit 1
+ENV NODE_ENV production
+CMD yarn start
 
 EXPOSE 3000
-CMD ["yarn", "start"]

Dockerfile.base

@@ -1,24 +0,0 @@
-ARG APP_PATH=/opt/outline
-FROM node:20 AS deps
-
-ARG APP_PATH
-WORKDIR $APP_PATH
-COPY ./package.json ./yarn.lock ./
-COPY ./patches ./patches
-
-RUN apt-get update && apt-get install -y cmake
-ENV NODE_OPTIONS="--max-old-space-size=24000"
-
-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
-
-ENV PORT=3000

LICENSE

@@ -3,8 +3,8 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.83.0
-                      The Licensed Work is (c) 2025 General Outline, Inc.
+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
                       Service.
@@ -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:          2029-04-11
+Change Date:          2023-12-13
 
 Change License:       Apache License, Version 2.0
 

Makefile

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

Procfile

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

README.md

@@ -1,57 +1,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 likelihood of your code being accepted.
+Before submitting a pull request please let the core team know by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues), and we'd also love to hear from you in the [Discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of code being accepted.
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
-- [Translation](docs/TRANSLATION.md) into other languages
-- Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
-- Performance improvements, both on server and frontend
-- Developer happiness and documentation
-- Bugs and other issues listed on GitHub
+* [Translation](TRANSLATION.md) into other languages
+* Issues with [`good first issue`](https://github.com/outline/outline/labels/good%20first%20issue) label
+* Performance improvements, both on server and frontend
+* Developer happiness and documentation
+* Bugs and other issues listed on GitHub
+
 
 ## Architecture
 
 If you're interested in contributing or learning more about the Outline codebase
-please refer to the [architecture document](docs/ARCHITECTURE.md) first for a high level overview of how the application is put together.
+please refer to the [architecture document](ARCHITECTURE.md) first for a high level overview of how the application is put together.
+
 
 ## Debugging
 
-In development Outline outputs simple logging to the console, prefixed by categories. In production it outputs JSON logs, these can be easily parsed by your preferred log ingestion pipeline.
+Outline uses [debug](https://www.npmjs.com/package/debug). To enable debugging output, the following categories are available:
 
-HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable.
+```
+DEBUG=sql,cache,presenters,events,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,21 +159,17 @@ yarn test:app
 
 Sequelize is used to create and run migrations, for example:
 
-```shell
+```
 yarn sequelize migration:generate --name my-migration
 yarn sequelize db:migrate
 ```
 
 Or to run migrations on test database:
 
-```shell
+```
 yarn sequelize db:migrate --env test
 ```
 
-# Activity
-
-![Alt](https://repobeats.axiom.co/api/embed/ff2e4e6918afff1acf9deb72d1ba6b071d586178.svg "Repobeats analytics image")
-
-# License
+## License
 
 Outline is [BSL 1.1 licensed](LICENSE).

SECURITY.md

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

__mocks__/bull.js

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

__mocks__/console.js

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

__mocks__/react-medium-image-zoom.js

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

__mocks__/window.js

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

app.json

@@ -30,17 +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",
-      "generator": "secret",
-      "required": true
-    },
-    "UTILS_SECRET": {
-      "description": "A 32-character secret key, generate with openssl rand -hex 32",
+      "description": "A secret key",
       "generator": "secret",
       "required": true
     },
@@ -49,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": {
@@ -60,66 +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_DISABLE_REDIRECT": {
-      "description": "Prevent the app from automatically redirecting to the OIDC login page",
-      "required": false
-    },
-    "OIDC_LOGOUT_URI": {
-      "description": "",
-      "required": false
-    },
-    "OIDC_USERNAME_CLAIM": {
-      "description": "Specify which claims to derive user information from. Supports any valid JSON path with the JWT payload",
-      "value": "preferred_username",
-      "required": false
-    },
-    "OIDC_DISPLAY_NAME": {
-      "description": "Display name for OIDC authentication",
-      "value": "OpenID Connect",
-      "required": false
-    },
-    "OIDC_SCOPES": {
-      "description": "Space separated auth scopes.",
-      "value": "openid profile email",
-      "required": false
-    },
-    "SLACK_CLIENT_ID": {
+    "SLACK_KEY": {
       "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
       "required": false
     },
-    "SLACK_CLIENT_SECRET": {
+    "SLACK_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -147,6 +87,11 @@
       "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
       "required": false
     },
+    "AWS_S3_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
     "AWS_S3_FORCE_PATH_STYLE": {
       "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
       "value": "true",
@@ -162,19 +107,10 @@
       "description": "S3 canned ACL for document attachments",
       "required": false
     },
-    "FILE_STORAGE_UPLOAD_MAX_SIZE": {
-      "description": "Maximum file upload size in bytes",
-      "value": "26214400",
-      "required": false
-    },
     "SMTP_HOST": {
       "description": "smtp.example.com (optional)",
       "required": false
     },
-    "SMTP_SERVICE": {
-      "description": "Well-known SMTP service name for nodemailer (optional, e.g. 'gmail', 'SES')",
-      "required": false
-    },
     "SMTP_PORT": {
       "description": "1234 (optional)",
       "required": false
@@ -195,30 +131,16 @@
       "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/apiKeys.tsx

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

app/actions/definitions/collections.tsx

@@ -1,398 +0,0 @@
-import {
-  ArchiveIcon,
-  CollectionIcon,
-  EditIcon,
-  PadlockIcon,
-  PlusIcon,
-  RestoreIcon,
-  SearchIcon,
-  ShapesIcon,
-  StarredIcon,
-  SubscribeIcon,
-  TrashIcon,
-  UnstarredIcon,
-  UnsubscribeIcon,
-} from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import Collection from "~/models/Collection";
-import { CollectionEdit } from "~/components/Collection/CollectionEdit";
-import { CollectionNew } from "~/components/Collection/CollectionNew";
-import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
-import SharePopover from "~/components/Sharing/Collection/SharePopover";
-import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
-import { createAction } from "~/actions";
-import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
-import { setPersistedState } from "~/hooks/usePersistedState";
-import history from "~/utils/history";
-import { newTemplatePath, searchPath } from "~/utils/routeHelpers";
-
-const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
-  <DynamicCollectionIcon collection={collection} />
-);
-
-export const openCollection = createAction({
-  name: ({ t }) => t("Open collection"),
-  analyticsName: "Open collection",
-  section: CollectionSection,
-  shortcut: ["o", "c"],
-  icon: <CollectionIcon />,
-  children: ({ stores }) => {
-    const collections = stores.collections.orderedData;
-    return collections.map((collection) => ({
-      // Note: using url which includes the slug rather than id here to bust
-      // cache if the collection is renamed
-      id: collection.path,
-      name: collection.name,
-      icon: <ColorCollectionIcon collection={collection} />,
-      section: CollectionSection,
-      perform: () => history.push(collection.path),
-    }));
-  },
-});
-
-export const createCollection = createAction({
-  name: ({ t }) => t("New collection"),
-  analyticsName: "New collection",
-  section: CollectionSection,
-  icon: <PlusIcon />,
-  keywords: "create",
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").createCollection,
-  perform: ({ t, event, stores }) => {
-    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: ActiveCollectionSection,
-  icon: <EditIcon />,
-  visible: ({ activeCollectionId, stores }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId, stores }) => {
-    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: ActiveCollectionSection,
-  icon: <PadlockIcon />,
-  visible: ({ activeCollectionId, stores }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Share this collection"),
-      style: { marginBottom: -12 },
-      content: (
-        <SharePopover
-          collection={collection}
-          onRequestClose={stores.dialogs.closeAllModals}
-          visible
-        />
-      ),
-    });
-  },
-});
-
-export const searchInCollection = createAction({
-  name: ({ t }) => t("Search in collection"),
-  analyticsName: "Search collection",
-  section: ActiveCollectionSection,
-  icon: <SearchIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    if (!collection?.isActive) {
-      return false;
-    }
-
-    return stores.policies.abilities(activeCollectionId).readDocument;
-  },
-
-  perform: ({ activeCollectionId }) => {
-    history.push(searchPath({ collectionId: activeCollectionId }));
-  },
-});
-
-export const starCollection = createAction({
-  name: ({ t }) => t("Star"),
-  analyticsName: "Star collection",
-  section: ActiveCollectionSection,
-  icon: <StarredIcon />,
-  keywords: "favorite bookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    return (
-      !collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).star
-    );
-  },
-  perform: async ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    await collection?.star();
-    setPersistedState(getHeaderExpandedKey("starred"), true);
-  },
-});
-
-export const unstarCollection = createAction({
-  name: ({ t }) => t("Unstar"),
-  analyticsName: "Unstar collection",
-  section: ActiveCollectionSection,
-  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 subscribeCollection = createAction({
-  name: ({ t }) => t("Subscribe"),
-  analyticsName: "Subscribe to collection",
-  section: ActiveCollectionSection,
-  icon: <SubscribeIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    return (
-      !collection?.isSubscribed &&
-      stores.policies.abilities(activeCollectionId).subscribe
-    );
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    await collection?.subscribe();
-
-    toast.success(t("Subscribed to document notifications"));
-  },
-});
-
-export const unsubscribeCollection = createAction({
-  name: ({ t }) => t("Unsubscribe"),
-  analyticsName: "Unsubscribe from collection",
-  section: ActiveCollectionSection,
-  icon: <UnsubscribeIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    return (
-      !!collection?.isSubscribed &&
-      stores.policies.abilities(activeCollectionId).unsubscribe
-    );
-  },
-  perform: async ({ activeCollectionId, currentUserId, stores, t }) => {
-    if (!activeCollectionId || !currentUserId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-
-    await collection?.unsubscribe();
-
-    toast.success(t("Unsubscribed from document notifications"));
-  },
-});
-
-export const archiveCollection = createAction({
-  name: ({ t }) => `${t("Archive")}…`,
-  analyticsName: "Archive collection",
-  section: CollectionSection,
-  icon: <ArchiveIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).archive;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    const { dialogs, collections } = stores;
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    dialogs.openModal({
-      title: t("Archive collection"),
-      content: (
-        <ConfirmationDialog
-          onSubmit={async () => {
-            await collection.archive();
-            toast.success(t("Collection archived"));
-          }}
-          submitText={t("Archive")}
-          savingText={`${t("Archiving")}…`}
-        >
-          {t(
-            "Archiving this collection will also archive all documents within it. Documents from the collection will no longer be visible in search results."
-          )}
-        </ConfirmationDialog>
-      ),
-    });
-  },
-});
-
-export const restoreCollection = createAction({
-  name: ({ t }) => t("Restore"),
-  analyticsName: "Restore collection",
-  section: CollectionSection,
-  icon: <RestoreIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeCollectionId).restore;
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    await collection.restore();
-    toast.success(t("Collection restored"));
-  },
-});
-
-export const deleteCollection = createAction({
-  name: ({ t }) => `${t("Delete")}…`,
-  analyticsName: "Delete collection",
-  section: ActiveCollectionSection,
-  dangerous: true,
-  icon: <TrashIcon />,
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    return stores.policies.abilities(activeCollectionId).delete;
-  },
-  perform: ({ activeCollectionId, t, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Delete collection"),
-      content: (
-        <CollectionDeleteDialog
-          collection={collection}
-          onSubmit={stores.dialogs.closeAllModals}
-        />
-      ),
-    });
-  },
-});
-
-export const createTemplate = createAction({
-  name: ({ t }) => t("New template"),
-  analyticsName: "New template",
-  section: ActiveCollectionSection,
-  icon: <ShapesIcon />,
-  keywords: "new create template",
-  visible: ({ activeCollectionId, stores }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
-    ),
-  perform: ({ activeCollectionId, event }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    event?.preventDefault();
-    event?.stopPropagation();
-    history.push(newTemplatePath(activeCollectionId));
-  },
-});
-
-export const rootCollectionActions = [
-  openCollection,
-  createCollection,
-  starCollection,
-  unstarCollection,
-  subscribeCollection,
-  unsubscribeCollection,
-  deleteCollection,
-];

app/actions/definitions/comments.tsx

@@ -1,123 +0,0 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import stores from "~/stores";
-import Comment from "~/models/Comment";
-import CommentDeleteDialog from "~/components/CommentDeleteDialog";
-import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
-import history from "~/utils/history";
-import { createAction } from "..";
-import { DocumentSection } from "../sections";
-
-export const deleteCommentFactory = ({
-  comment,
-  onDelete,
-}: {
-  comment: Comment;
-  onDelete: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("Delete")}…`,
-    analyticsName: "Delete comment",
-    section: DocumentSection,
-    icon: <TrashIcon />,
-    keywords: "trash",
-    dangerous: true,
-    visible: () => stores.policies.abilities(comment.id).delete,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Delete comment"),
-        content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
-      });
-    },
-  });
-
-export const resolveCommentFactory = ({
-  comment,
-  onResolve,
-}: {
-  comment: Comment;
-  onResolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as resolved"),
-    analyticsName: "Resolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).resolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async ({ t }) => {
-      await comment.resolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onResolve();
-      toast.success(t("Thread resolved"));
-    },
-  });
-
-export const unresolveCommentFactory = ({
-  comment,
-  onUnresolve,
-}: {
-  comment: Comment;
-  onUnresolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as unresolved"),
-    analyticsName: "Unresolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).unresolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async () => {
-      await comment.unresolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
-      onUnresolve();
-    },
-  });
-
-export const viewCommentReactionsFactory = ({
-  comment,
-}: {
-  comment: Comment;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("View reactions")}`,
-    analyticsName: "View comment reactions",
-    section: DocumentSection,
-    icon: <SmileyIcon />,
-    visible: () =>
-      stores.policies.abilities(comment.id).read &&
-      comment.reactions.length > 0,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Reactions"),
-        content: <ViewReactionsDialog model={comment} />,
-      });
-    },
-  });

app/actions/definitions/developer.tsx

@@ -1,209 +0,0 @@
-import copy from "copy-to-clipboard";
-import {
-  BeakerIcon,
-  CopyIcon,
-  EditIcon,
-  ToolsIcon,
-  TrashIcon,
-  UserIcon,
-} from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import { createAction } from "~/actions";
-import { DeveloperSection } from "~/actions/sections";
-import env from "~/env";
-import { client } from "~/utils/ApiClient";
-import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
-import Logger from "~/utils/Logger";
-import { deleteAllDatabases } from "~/utils/developer";
-import history from "~/utils/history";
-import { homePath } from "~/utils/routeHelpers";
-
-export const copyId = createAction({
-  name: ({ t }) => t("Copy ID"),
-  icon: <CopyIcon />,
-  keywords: "uuid",
-  section: DeveloperSection,
-  children: ({
-    currentTeamId,
-    currentUserId,
-    activeCollectionId,
-    activeDocumentId,
-  }) => {
-    function copyAndToast(text: string | null | undefined) {
-      if (text) {
-        copy(text);
-        toast.success("Copied to clipboard");
-      }
-    }
-
-    return [
-      createAction({
-        name: "Copy User ID",
-        section: DeveloperSection,
-        icon: <CopyIcon />,
-        visible: () => !!currentUserId,
-        perform: () => copyAndToast(currentUserId),
-      }),
-      createAction({
-        name: "Copy Team ID",
-        section: DeveloperSection,
-        icon: <CopyIcon />,
-        visible: () => !!currentTeamId,
-        perform: () => copyAndToast(currentTeamId),
-      }),
-      createAction({
-        name: "Copy Collection ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!activeCollectionId,
-        perform: () => copyAndToast(activeCollectionId),
-      }),
-      createAction({
-        name: "Copy Document ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!activeDocumentId,
-        perform: () => copyAndToast(activeDocumentId),
-      }),
-      createAction({
-        name: "Copy Team ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!currentTeamId,
-        perform: () => copyAndToast(currentTeamId),
-      }),
-      createAction({
-        name: "Copy Release ID",
-        icon: <CopyIcon />,
-        section: DeveloperSection,
-        visible: () => !!env.VERSION,
-        perform: () => copyAndToast(env.VERSION),
-      }),
-    ];
-  },
-});
-
-function generateRandomText() {
-  const characters =
-    "abcdefghijklmno pqrstuvwxyzABCDEFGHIJKL MNOPQRSTUVWXYZ 0123456789\n";
-  let text = "";
-  for (let i = 0; i < Math.floor(Math.random() * 10) + 1; i++) {
-    text += characters.charAt(Math.floor(Math.random() * characters.length));
-  }
-  return text;
-}
-
-export const startTyping = createAction({
-  name: "Start automatic typing",
-  icon: <EditIcon />,
-  section: DeveloperSection,
-  visible: ({ activeDocumentId }) =>
-    !!activeDocumentId && env.ENVIRONMENT === "development",
-  perform: () => {
-    const intervalId = setInterval(() => {
-      const text = generateRandomText();
-      document.execCommand("insertText", false, text);
-    }, 250);
-
-    window.addEventListener("keydown", (event) => {
-      if (event.key === "Escape") {
-        intervalId && clearInterval(intervalId);
-      }
-    });
-
-    toast.info("Automatic typing started, press Escape to stop");
-  },
-});
-
-export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Clear IndexedDB cache"),
-  icon: <TrashIcon />,
-  keywords: "cache clear database",
-  section: DeveloperSection,
-  perform: async ({ t }) => {
-    history.push(homePath());
-    await deleteAllDatabases();
-    toast.success(t("IndexedDB cache cleared"));
-  },
-});
-
-export const createTestUsers = createAction({
-  name: "Create 10 test users",
-  icon: <UserIcon />,
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: async () => {
-    const count = 10;
-    await client.post("/developer.create_test_users", { count });
-    toast.message(`${count} test users created`);
-  },
-});
-
-export const createToast = createAction({
-  name: "Create toast",
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: () => {
-    toast.message("Hello world", {
-      duration: 30000,
-    });
-  },
-});
-
-export const toggleDebugLogging = createAction({
-  name: ({ t }) => t("Toggle debug logging"),
-  icon: <ToolsIcon />,
-  section: DeveloperSection,
-  perform: ({ t }) => {
-    Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    toast.message(
-      Logger.debugLoggingEnabled
-        ? t("Debug logging enabled")
-        : t("Debug logging disabled")
-    );
-  },
-});
-
-export const toggleFeatureFlag = createAction({
-  name: "Toggle feature flag",
-  icon: <BeakerIcon />,
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  children: Object.values(Feature).map((flag) =>
-    createAction({
-      id: `flag-${flag}`,
-      name: flag,
-      selected: () => FeatureFlags.isEnabled(flag),
-      section: DeveloperSection,
-      perform: () => {
-        if (FeatureFlags.isEnabled(flag)) {
-          FeatureFlags.disable(flag);
-          toast.success(`Disabled feature flag: ${flag}`);
-        } else {
-          FeatureFlags.enable(flag);
-          toast.success(`Enabled feature flag: ${flag}`);
-        }
-      },
-    })
-  ),
-});
-
-export const developer = createAction({
-  name: ({ t }) => t("Development"),
-  keywords: "debug",
-  icon: <ToolsIcon />,
-  iconInContextMenu: false,
-  section: DeveloperSection,
-  children: [
-    copyId,
-    toggleDebugLogging,
-    toggleFeatureFlag,
-    createToast,
-    createTestUsers,
-    clearIndexedDB,
-    startTyping,
-  ],
-});
-
-export const rootDeveloperActions = [developer];

app/actions/definitions/navigation.tsx

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

app/actions/definitions/notifications.tsx

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

app/actions/definitions/oauthClients.tsx

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

app/actions/definitions/revisions.tsx

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

app/actions/definitions/settings.tsx

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

app/actions/definitions/teams.tsx

@@ -1,94 +0,0 @@
-import { ArrowIcon, PlusIcon } from "outline-icons";
-import * as React from "react";
-import styled from "styled-components";
-import { stringToColor } from "@shared/utils/color";
-import RootStore from "~/stores/RootStore";
-import { LoginDialog } from "~/scenes/Login/components/LoginDialog";
-import TeamNew from "~/scenes/TeamNew";
-import TeamLogo from "~/components/TeamLogo";
-import { createAction } from "~/actions";
-import { ActionContext } from "~/types";
-import Desktop from "~/utils/Desktop";
-import { TeamSection } from "../sections";
-
-export const switchTeamsList = ({ 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: switchTeamsList,
-});
-
-export const createTeam = createAction({
-  name: ({ t }) => `${t("New workspace")}…`,
-  analyticsName: "New workspace",
-  keywords: "create change switch workspace organization team",
-  section: TeamSection,
-  icon: <PlusIcon />,
-  visible: ({ stores, currentTeamId }) =>
-    stores.policies.abilities(currentTeamId ?? "").createTeam,
-  perform: ({ t, event, stores }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    const { user } = stores.auth;
-    user &&
-      stores.dialogs.openModal({
-        title: t("Create a workspace"),
-        fullscreen: true,
-        content: <TeamNew user={user} />,
-      });
-  },
-});
-
-export const desktopLoginTeam = createAction({
-  name: ({ t }) => t("Login to workspace"),
-  analyticsName: "Login to workspace",
-  keywords: "change switch workspace organization team",
-  section: TeamSection,
-  icon: <ArrowIcon />,
-  visible: () => Desktop.isElectron(),
-  perform: ({ t, event, stores }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    stores.dialogs.openModal({
-      title: t("Login to workspace"),
-      content: <LoginDialog />,
-    });
-  },
-});
-
-const StyledTeamLogo = styled(TeamLogo)`
-  border-radius: 2px;
-  border: 0;
-`;
-
-export const rootTeamActions = [switchTeam, createTeam, desktopLoginTeam];

app/actions/definitions/users.tsx

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

app/actions/index.ts

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

app/actions/root.ts

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

app/actions/sections.ts

@@ -1,50 +0,0 @@
-import { ActionContext } from "~/types";
-
-export const CollectionSection = ({ t }: ActionContext) => t("Collection");
-
-export const CollectionsSection = ({ t }: ActionContext) => t("Collections");
-
-export const ActiveCollectionSection = ({ t, stores }: ActionContext) => {
-  const activeCollection = stores.collections.active;
-  return `${t("Collection")} · ${activeCollection?.name}`;
-};
-
-ActiveCollectionSection.priority = 0.8;
-
-export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
-
-export const DocumentSection = ({ t }: ActionContext) => t("Document");
-
-export const DocumentsSection = ({ t }: ActionContext) => t("Documents");
-
-export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
-  const activeDocument = stores.documents.active;
-  return `${t("Document")} · ${activeDocument?.titleWithDefault}`;
-};
-
-ActiveDocumentSection.priority = 0.9;
-
-export const RecentSection = ({ t }: ActionContext) => t("Recently viewed");
-
-RecentSection.priority = 1;
-
-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");
-
-UserSection.priority = 0.5;
-
-export const TeamSection = ({ t }: ActionContext) => t("Workspace");
-
-export const RecentSearchesSection = ({ t }: ActionContext) =>
-  t("Recent searches");
-
-RecentSearchesSection.priority = -0.1;
-
-export const TrashSection = ({ t }: ActionContext) => t("Trash");

app/components/ActionButton.tsx

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

app/components/Actions.js

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

app/components/Actions.ts

@@ -1,47 +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")};
-  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,130 +0,0 @@
-/* eslint-disable prefer-rest-params */
-/* global ga */
-import escape from "lodash/escape";
-import * as React from "react";
-import { IntegrationService, PublicEnv } from "@shared/types";
-import env from "~/env";
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-// TODO: Refactor this component to allow injection from plugins
-const Analytics: React.FC = ({ children }: Props) => {
-  // Google Analytics 3
-  React.useEffect(() => {
-    if (!env.GOOGLE_ANALYTICS_ID?.startsWith("UA-")) {
-      return;
-    }
-
-    // standard Google Analytics script
-    window.ga =
-      window.ga ||
-      function (...args) {
-        (ga.q = ga.q || []).push(args);
-      };
-
-    ga.l = +new Date();
-    ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
-    ga("send", "pageview");
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = "https://www.google-analytics.com/analytics.js";
-    script.async = true;
-
-    // Track PWA install event
-    window.addEventListener("appinstalled", () => {
-      ga("send", "event", "pwa", "install");
-    });
-
-    document.getElementsByTagName("head")[0]?.appendChild(script);
-  }, []);
-
-  // Google Analytics 4
-  React.useEffect(() => {
-    const measurementIds = [];
-
-    if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
-      measurementIds.push(env.GOOGLE_ANALYTICS_ID);
-    }
-
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service === IntegrationService.GoogleAnalytics) {
-        measurementIds.push(escape(integration.settings?.measurementId));
-      }
-    });
-
-    if (measurementIds.length === 0) {
-      return;
-    }
-
-    const params = {
-      allow_google_signals: false,
-      restricted_data_processing: true,
-    };
-
-    window.dataLayer = window.dataLayer || [];
-    window.gtag = function () {
-      window.dataLayer.push(arguments);
-    };
-    window.gtag("js", new Date());
-
-    for (const measurementId of measurementIds) {
-      window.gtag("config", measurementId, params);
-    }
-
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementIds[0]}`;
-    script.async = true;
-    document.getElementsByTagName("head")[0]?.appendChild(script);
-  }, []);
-
-  // Matomo
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Matomo) {
-        return;
-      }
-
-      // @ts-expect-error - Matomo global variable
-      const _paq = (window._paq = window._paq || []);
-      _paq.push(["trackPageView"]);
-      _paq.push(["enableLinkTracking"]);
-      (function () {
-        const u = integration.settings?.instanceUrl;
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
-        _paq.push(["setSiteId", integration.settings?.measurementId]);
-        const d = document,
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
-        g.type = "text/javascript";
-        g.async = true;
-        g.src = u + "matomo.js";
-        s.parentNode?.insertBefore(g, s);
-      })();
-    });
-  }, []);
-
-  // Umami
-  React.useEffect(() => {
-    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
-      if (integration.service !== IntegrationService.Umami) {
-        return;
-      }
-
-      const script = document.createElement("script");
-      script.defer = true;
-      script.src = `${integration.settings?.instanceUrl}${integration.settings?.scriptName}`;
-      script.setAttribute(
-        "data-website-id",
-        integration.settings?.measurementId
-      );
-      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,51 +0,0 @@
-import { RovingTabIndexProvider } from "@getoutline/react-roving-tabindex";
-import { observer } from "mobx-react";
-import * as React from "react";
-
-type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: () => React.ReactNode;
-  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-  items: unknown[];
-};
-
-function ArrowKeyNavigation(
-  { children, onEscape, items, ...rest }: Props,
-  ref: React.RefObject<HTMLDivElement>
-) {
-  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent<HTMLDivElement>) => {
-      if (onEscape) {
-        if (ev.nativeEvent.isComposing) {
-          return;
-        }
-
-        if (ev.key === "Escape" || ev.key === "Backspace") {
-          ev.preventDefault();
-          onEscape(ev);
-        }
-
-        if (
-          ev.key === "ArrowUp" &&
-          // If the first item is focused and the user presses ArrowUp
-          ev.currentTarget.firstElementChild === document.activeElement
-        ) {
-          onEscape(ev);
-        }
-      }
-    },
-    [onEscape]
-  );
-
-  return (
-    <RovingTabIndexProvider
-      options={{ focusOnClick: true, direction: "both" }}
-      items={items}
-    >
-      <div {...rest} onKeyDown={handleKeyDown} ref={ref}>
-        {children()}
-      </div>
-    </RovingTabIndexProvider>
-  );
-}
-
-export default observer(React.forwardRef(ArrowKeyNavigation));

app/components/Authenticated.js

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

app/components/Authenticated.tsx

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

app/components/AuthenticatedLayout.tsx

@@ -1,154 +0,0 @@
-import { AnimatePresence } from "framer-motion";
-import { observer } from "mobx-react";
-import * as React from "react";
-import {
-  Switch,
-  Route,
-  useLocation,
-  matchPath,
-  Redirect,
-} from "react-router-dom";
-import { TeamPreference } from "@shared/types";
-import ErrorSuspended from "~/scenes/Errors/ErrorSuspended";
-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 useCurrentTeam from "~/hooks/useCurrentTeam";
-import { usePostLoginPath } from "~/hooks/useLastVisitedPath";
-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 { DocumentContextProvider } from "./DocumentContext";
-import Fade from "./Fade";
-import { PortalContext } from "./Portal";
-
-const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments")
-);
-const DocumentHistory = lazyWithRetry(
-  () => import("~/scenes/Document/components/History")
-);
-const DocumentInsights = lazyWithRetry(
-  () => import("~/scenes/Document/components/Insights")
-);
-const CommandBar = lazyWithRetry(() => import("~/components/CommandBar"));
-
-type Props = {
-  children?: React.ReactNode;
-};
-
-const AuthenticatedLayout: React.FC = ({ children }: Props) => {
-  const { ui, auth } = useStores();
-  const location = useLocation();
-  const layoutRef = React.useRef<HTMLDivElement>(null);
-  const can = usePolicy(ui.activeDocumentId);
-  const canCollection = usePolicy(ui.activeCollectionId);
-  const team = useCurrentTeam();
-  const [spendPostLoginPath] = usePostLoginPath();
-
-  const goToSearch = (ev: KeyboardEvent) => {
-    if (!ev.metaKey && !ev.ctrlKey) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      history.push(searchPath());
-    }
-  };
-
-  const goToNewDocument = (event: KeyboardEvent) => {
-    if (event.metaKey || event.altKey) {
-      return;
-    }
-    const { activeCollectionId } = ui;
-    if (!activeCollectionId || !canCollection.createDocument) {
-      return;
-    }
-    history.push(newDocumentPath(activeCollectionId));
-  };
-
-  if (auth.isSuspended) {
-    return <ErrorSuspended />;
-  }
-
-  const postLoginPath = spendPostLoginPath();
-  if (postLoginPath) {
-    return <Redirect to={postLoginPath} />;
-  }
-
-  const sidebar = (
-    <Fade>
-      <Switch>
-        <Route path={settingsPath()} component={SettingsSidebar} />
-        <Route component={Sidebar} />
-      </Switch>
-    </Fade>
-  );
-
-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showInsights =
-    !!matchPath(location.pathname, {
-      path: matchDocumentInsights,
-    }) && can.listViews;
-  const showComments =
-    !showInsights &&
-    !showHistory &&
-    can.comment &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded &&
-    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 (
-    <DocumentContextProvider>
-      <PortalContext.Provider value={layoutRef.current}>
-        <Layout
-          title={team.name}
-          sidebar={sidebar}
-          sidebarRight={sidebarRight}
-          ref={layoutRef}
-        >
-          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-          <RegisterKeyDown trigger="t" handler={goToSearch} />
-          <RegisterKeyDown trigger="/" handler={goToSearch} />
-          {children}
-          <React.Suspense fallback={null}>
-            <CommandBar />
-          </React.Suspense>
-        </Layout>
-      </PortalContext.Provider>
-    </DocumentContextProvider>
-  );
-};
-
-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,86 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import useBoolean from "~/hooks/useBoolean";
-import Initials from "./Initials";
-
-export enum AvatarSize {
-  Small = 16,
-  Toast = 18,
-  Medium = 24,
-  Large = 28,
-  XLarge = 32,
-  XXLarge = 48,
-  Upload = 64,
-}
-
-export enum AvatarVariant {
-  Round = "round",
-  Square = "square",
-}
-
-export interface IAvatar {
-  avatarUrl: string | null;
-  color?: string;
-  initial?: string;
-  id?: string;
-}
-
-type Props = {
-  /** The size of the avatar */
-  size: AvatarSize;
-  /** The variant of the avatar */
-  variant?: AvatarVariant;
-  /** The source of the avatar image, if not passing a model. */
-  src?: string;
-  /** The avatar model, if not passing a source. */
-  model?: IAvatar;
-  /** The alt text for the image */
-  alt?: string;
-  /** Optional click handler */
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  /** Optional class name */
-  className?: string;
-  /** Optional style */
-  style?: React.CSSProperties;
-};
-
-function Avatar(props: Props) {
-  const { model, style, variant = AvatarVariant.Round, ...rest } = props;
-  const src = props.src || model?.avatarUrl;
-  const [error, handleError] = useBoolean(false);
-
-  return (
-    <Relative style={style} $variant={variant} $size={props.size}>
-      {src && !error ? (
-        <Image onError={handleError} src={src} {...rest} />
-      ) : model ? (
-        <Initials color={model.color} {...rest}>
-          {model.initial}
-        </Initials>
-      ) : (
-        <Initials {...rest} />
-      )}
-    </Relative>
-  );
-}
-
-Avatar.defaultProps = {
-  size: AvatarSize.Medium,
-};
-
-const Relative = styled.div<{ $variant: AvatarVariant; $size: AvatarSize }>`
-  position: relative;
-  user-select: none;
-  flex-shrink: 0;
-  border-radius: ${(props) =>
-    props.$variant === AvatarVariant.Round ? "50%" : `${props.$size / 8}px`};
-  overflow: hidden;
-`;
-
-const Image = styled.img<{ size: number }>`
-  display: block;
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-`;
-
-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,163 +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 Tooltip from "~/components/Tooltip";
-import Avatar, { AvatarSize } from "./Avatar";
-
-/**
- * Props for the AvatarWithPresence component
- */
-type Props = {
-  /** The user to display the avatar for */
-  user: User;
-  /** Whether the user is currently present in the document */
-  isPresent: boolean;
-  /** Whether the user is currently editing the document */
-  isEditing: boolean;
-  /** Whether the user is currently observing the document */
-  isObserving: boolean;
-  /** Whether this avatar represents the current user */
-  isCurrentUser: boolean;
-  /** Optional click handler for the avatar */
-  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  /** Size of the avatar, defaults to AvatarSize.Large */
-  size?: AvatarSize;
-  /** Optional inline styles to apply to the avatar wrapper */
-  style?: React.CSSProperties;
-};
-
-/**
- * AvatarWithPresence component displays a user's avatar with visual indicators
- * for their current status (present, editing, observing).
- *
- * The component shows different visual states:
- * - Present users have full opacity
- * - Non-present users have reduced opacity
- * - Observing users have a colored border matching their user color
- * - Hovering shows a colored border
- *
- * A tooltip displays the user's name and current status.
- *
- * @param props - Component properties
- * @returns React component
- */
-function AvatarWithPresence({
-  onClick,
-  user,
-  isPresent,
-  isEditing,
-  isObserving,
-  isCurrentUser,
-  size = AvatarSize.Large,
-  style,
-}: Props) {
-  const { t } = useTranslation();
-  const status = isPresent
-    ? isEditing
-      ? t("currently editing")
-      : t("currently viewing")
-    : t("previously edited");
-
-  return (
-    <>
-      <Tooltip
-        content={
-          <Centered>
-            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-            {status && (
-              <>
-                <br />
-                {status}
-              </>
-            )}
-          </Centered>
-        }
-        placement="bottom"
-      >
-        <AvatarPresence
-          $isPresent={isPresent}
-          $isObserving={isObserving}
-          $color={user.color}
-          style={style}
-        >
-          <Avatar model={user} onClick={onClick} size={size} />
-        </AvatarPresence>
-      </Tooltip>
-    </>
-  );
-}
-
-/**
- * Centered container for tooltip content
- */
-const Centered = styled.div`
-  text-align: center;
-`;
-
-/**
- * Props for the AvatarPresence styled component
- */
-type AvatarWrapperProps = {
-  /** Whether the user is currently present */
-  $isPresent: boolean;
-  /** Whether the user is currently observing */
-  $isObserving: boolean;
-  /** The user's color for border highlighting */
-  $color: string;
-};
-
-/**
- * Styled component that wraps the Avatar and provides visual indicators
- * for the user's presence status.
- *
- * - Adjusts opacity based on presence
- * - Adds colored borders for observing users
- * - Handles hover effects
- */
-const AvatarPresence = 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/GroupAvatar.tsx

@@ -1,35 +0,0 @@
-import { GroupIcon } from "outline-icons";
-import * as React from "react";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
-import Group from "~/models/Group";
-import { AvatarSize } from "../Avatar/Avatar";
-
-type Props = {
-  /** The group to show an avatar for */
-  group: Group;
-  /** The size of the icon, 24px is default to match standard avatars */
-  size?: number;
-  /** The color of the avatar */
-  color?: string;
-  /** The background color of the avatar */
-  backgroundColor?: string;
-  className?: string;
-};
-
-export function GroupAvatar({
-  color,
-  backgroundColor,
-  size = AvatarSize.Medium,
-  className,
-}: Props) {
-  const theme = useTheme();
-  return (
-    <Squircle color={color ?? theme.text} size={size} className={className}>
-      <GroupIcon
-        color={backgroundColor ?? theme.background}
-        size={size * 0.75}
-      />
-    </Squircle>
-  );
-}

app/components/Avatar/Initials.tsx

@@ -1,32 +0,0 @@
-import { getLuminance } from "polished";
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import Flex from "~/components/Flex";
-
-const Initials = styled(Flex)<{
-  /** The color of the background, defaults to textTertiary. */
-  color?: string;
-  /** Content is only used to calculate font size, use children to render. */
-  content?: string;
-  /** The size of the avatar */
-  size: number;
-}>`
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: ${(props) =>
-    getLuminance(props.color ?? props.theme.textTertiary) > 0.5
-      ? s("black50")
-      : s("white75")};
-  background-color: ${(props) => props.color ?? props.theme.textTertiary};
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  flex-shrink: 0;
-
-  // adjust font size down for each additional character
-  font-size: ${(props) => props.size / 2 - (props.content?.length ?? 0)}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,7 +0,0 @@
-import Avatar, { IAvatar, AvatarSize } from "./Avatar";
-import AvatarWithPresence from "./AvatarWithPresence";
-import { GroupAvatar } from "./GroupAvatar";
-
-export { Avatar, GroupAvatar, AvatarSize, AvatarWithPresence };
-
-export type { IAvatar };

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

app/components/Breadcrumb.js

@@ -0,0 +1,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,93 +0,0 @@
-import { GoToIcon } from "outline-icons";
-import * as React from "react";
-import { Link } from "react-router-dom";
-import styled from "styled-components";
-import { s, ellipsis } from "@shared/styles";
-import Flex from "~/components/Flex";
-import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
-import { undraggableOnDesktop } from "~/styles";
-import { MenuInternalLink } from "~/types";
-
-type Props = React.PropsWithChildren<{
-  items: MenuInternalLink[];
-  max?: number;
-  highlightFirstItem?: boolean;
-}>;
-
-function Breadcrumb(
-  { items, highlightFirstItem, children, max = 2 }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
-  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" ref={ref}>
-      {topLevelItems.map((item, index) => (
-        <React.Fragment
-          key={
-            (typeof item.to === "string" ? item.to : item.to.pathname) || 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()}
-  ${undraggableOnDesktop()}
-
-  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 React.forwardRef<HTMLDivElement, Props>(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,206 +0,0 @@
-import { LocationDescriptor } from "history";
-import { DisclosureIcon } 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: 6px;
-  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.3, props.theme.accentText)};
-    background: ${(props) => transparentize(0.1, 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;
-    }
-
-    &:focus-visible {
-      box-shadow: ${`rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.inputBorderFocused} 0 0 0 1px inset`};
-    }
-
-    &:disabled {
-      color: ${props.theme.textTertiary};
-      background: none;
-
-      svg {
-        fill: currentColor;
-      }
-    }
-  `}
-
-  ${(props) =>
-    props.$danger &&
-    `
-      background: ${props.theme.danger};
-      color: ${props.theme.white};
-
-      &:hover:not(:disabled),
-      &[aria-expanded="true"] {
-        background: ${darken(0.05, props.theme.danger)};
-      }
-
-      &:disabled {
-        background: ${lighten(0.05, props.theme.danger)};
-      }
-
-      &:focus-visible {
-        outline-color: ${darken(0.2, props.theme.danger)} !important;
-      }
-  `};
-`;
-
-const Label = styled.span<{ hasIcon?: boolean }>`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  ${(props) => props.hasIcon && "padding-left: 4px;"};
-`;
-
-export const Inner = styled.span<{
-  disclosure?: boolean;
-  hasIcon?: boolean;
-  hasText?: boolean;
-}>`
-  display: flex;
-  padding: 0 8px;
-  padding-right: ${(props) => (props.disclosure ? 2 : 8)}px;
-  line-height: ${(props) => (props.hasIcon ? 24 : 32)}px;
-  justify-content: center;
-  align-items: center;
-  min-height: 32px;
-
-  ${(props) => props.hasIcon && props.hasText && "padding-left: 4px;"};
-  ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
-`;
-
-export type Props<T> = ActionButtonProps & {
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
-  disclosure?: boolean;
-  neutral?: boolean;
-  danger?: boolean;
-  fullwidth?: boolean;
-  as?: T;
-  to?: LocationDescriptor;
-  borderOnHover?: boolean;
-  hideIcon?: boolean;
-  href?: string;
-  "data-on"?: string;
-  "data-event-category"?: string;
-  "data-event-action"?: string;
-};
-
-const Button = <T extends React.ElementType = "button">(
-  props: Props<T> & React.ComponentPropsWithoutRef<T>,
-  ref: React.Ref<HTMLButtonElement>
-) => {
-  const {
-    type,
-    children,
-    value,
-    disclosure,
-    neutral,
-    action,
-    icon,
-    borderOnHover,
-    hideIcon,
-    fullwidth,
-    danger,
-    ...rest
-  } = props;
-  const hasText = !!children || value !== undefined;
-  const ic = hideIcon ? undefined : action?.icon ?? icon;
-  const hasIcon = ic !== undefined;
-
-  return (
-    <RealButton
-      type={type || "button"}
-      ref={ref}
-      $neutral={neutral}
-      action={action}
-      $danger={danger}
-      $fullwidth={fullwidth}
-      $borderOnHover={borderOnHover}
-      {...rest}
-    >
-      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && ic}
-        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <StyledDisclosureIcon />}
-      </Inner>
-    </RealButton>
-  );
-};
-
-const StyledDisclosureIcon = styled(DisclosureIcon)`
-  opacity: 0.8;
-`;
-
-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,43 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-
-type Props = {
-  children?: React.ReactNode;
-  maxWidth?: string;
-  withStickyHeader?: boolean;
-};
-
-const Container = styled.div<Props>`
-  width: 100%;
-  max-width: 100vw;
-  padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
-
-  ${breakpoint("tablet")`
-    padding: ${(props: Props) =>
-      props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
-  `};
-`;
-
-type ContentProps = { $maxWidth?: string };
-
-const Content = styled.div<ContentProps>`
-  max-width: ${(props) => props.$maxWidth ?? "46em"};
-  margin: 0 auto;
-
-  ${breakpoint("desktopLarge")`
-    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
-  `};
-`;
-
-const CenteredContent: React.FC<Props> = ({
-  children,
-  maxWidth,
-  ...rest
-}: Props) => (
-  <Container {...rest}>
-    <Content $maxWidth={maxWidth}>{children}</Content>
-  </Container>
-);
-
-export default CenteredContent;

app/components/ChangeLanguage.tsx

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

app/components/Checkbox.js

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