fix: indent the note

.babelrc

@@ -1,30 +1,30 @@
 {
   "presets": [
+    "@babel/preset-react",
+    "@babel/preset-typescript",
     [
-      "@babel/preset-react",
+      "@babel/preset-env",
       {
-        "runtime": "automatic"
+        "corejs": {
+          "version": "3",
+          "proposals": true
+        },
+        "useBuiltIns": "usage"
       }
-    ],
-    "@babel/preset-env",
-    "@babel/preset-typescript"
+    ]
   ],
   "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"
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-regenerator",
+    "transform-class-properties"
   ],
   "env": {
     "production": {
@@ -35,25 +35,7 @@
             "displayName": false
           }
         ]
-      ],
-      "ignore": ["**/__mocks__", "**/*.test.ts"]
-    },
-    "development": {
-      "ignore": ["**/__mocks__", "**/*.test.ts"]
-    },
-    "test": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "corejs": {
-              "version": "3",
-              "proposals": true
-            },
-            "useBuiltIns": "usage"
-          }
-        ]
       ]
     }
   }
-}
+}

.circleci/config.yml

@@ -0,0 +1,135 @@
+version: 2.1
+
+executors:
+  docker-publisher:
+    environment:
+      IMAGE_NAME: outlinewiki/outline
+    docker:
+      - image: circleci/buildpack-deps:stretch
+
+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: typescript
+          command: yarn tsc
+      - run:
+          name: test
+          command: yarn test
+      - run:
+          name: build-webpack
+          command: yarn build:webpack
+  build-image:
+    executor: docker-publisher
+    steps:
+      - checkout
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Build Docker image
+          command: docker build -t $IMAGE_NAME:latest .
+      - run:
+          name: Archive Docker image
+          command: docker save -o image.tar $IMAGE_NAME
+      - persist_to_workspace:
+          root: .
+          paths:
+            - ./image.tar
+  publish-latest:
+    executor: docker-publisher
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
+      - run:
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:latest
+            docker push $IMAGE_NAME:$IMAGE_TAG
+  publish-tag:
+    executor: docker-publisher
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - setup_remote_docker:
+          version: 20.10.6
+      - run:
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
+      - run:
+          name: Publish Docker Image to Docker Hub
+          command: |
+            echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
+            IMAGE_TAG=${CIRCLE_TAG/v/''}
+            docker tag $IMAGE_NAME:latest $IMAGE_NAME:$IMAGE_TAG
+            docker push $IMAGE_NAME:$IMAGE_TAG
+
+workflows:
+  version: 2
+  build-and-test:
+    jobs:
+      - build:
+          filters:
+            tags:
+              ignore: /^v.*/
+  build-docker:
+    jobs:
+      - build-image:
+          filters:
+            tags:
+              only: /^v.*/
+            branches:
+              ignore: /.*/
+      - publish-latest:
+          requires:
+            - build-image
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+$/
+            branches:
+              ignore: /.*/
+      - publish-tag:
+          requires:
+            - build-image
+          filters:
+            tags:
+              only: /^v\d+\.\d+\.\d+-.*$/
+            branches:
+              ignore: /.*/

.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,7 +6,6 @@ __mocks__
 .DS_Store
 .env*
 .eslint*
-.oxlintrc*
 .log
 Makefile
 Procfile
@@ -14,4 +13,5 @@ app.json
 crowdin.yml
 build
 docker-compose.yml
+fakes3
 node_modules

.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,256 +1,163 @@
-NODE_ENV=production
+# –––––––––––––––– REQUIRED ––––––––––––––––
 
-# This URL should point to the fully qualified, publicly accessible, URL. If using a
-# proxy this will be the proxy's URL.
-URL=
+# Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
+# in your terminal to generate a random value.
+SECRET_KEY=generate_a_new_key
 
-# The port to expose the Outline server on, this should match what is configured
-# in your docker-compose.yml
+# Generate a unique random key. The format is not important but you could still use
+# `openssl rand -hex 32` in your terminal to produce this.
+UTILS_SECRET=generate_a_new_key
+
+# For production point these at your databases, in development the default
+# should work out of the box.
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
+# Uncomment this to disable SSL for connecting to Postgres
+# PGSSLMODE=disable
+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=http://localhost:3000
 PORT=3000
 
 # See [documentation](docs/SERVICES.md) on running a separate collaboration
 # server, for normal operation this does not need to be set.
 COLLABORATION_URL=
 
+# To support uploading of images for avatars and document attachments an
+# s3-compatible storage must be provided. AWS S3 is recommended for redundency
+# however if you want to keep all file storage local an alternative such as
+# minio (https://github.com/minio/minio) can be used.
+
+# 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
+
+
+# –––––––––––––– AUTHENTICATION ––––––––––––––
+
+# Third party signin credentials, at least ONE OF EITHER Google, Slack,
+# or Microsoft is required for a working installation or you'll have no sign-in
+# options.
+
+# To configure Slack auth, you'll need to create an Application at
+# => https://api.slack.com/apps
+#
+# When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
+# https://<URL>/auth/slack.callback
+SLACK_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
+#
+# When configuring the Client ID, add an Authorized redirect URI:
+# https://<URL>/auth/google.callback
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See
+# the guide for details on setting up your Azure App:
+# => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
+AZURE_CLIENT_ID=
+AZURE_CLIENT_SECRET=
+AZURE_RESOURCE_APP_ID=
+
+# To configure generic OIDC auth, you'll need some kind of identity provider.
+# See documentation for whichever IdP you use to acquire the following info:
+# Redirect URI is https://<URL>/auth/oidc.callback
+OIDC_CLIENT_ID=
+OIDC_CLIENT_SECRET=
+OIDC_AUTH_URI=
+OIDC_TOKEN_URI=
+OIDC_USERINFO_URI=
+
+# Specify which claims to derive user information from
+# Supports any valid JSON path with the JWT payload
+OIDC_USERNAME_CLAIM=preferred_username
+
+# Display name for OIDC authentication
+OIDC_DISPLAY_NAME=OpenID
+
+# Space separated auth scopes.
+OIDC_SCOPES="openid profile email"
+
+
+# –––––––––––––––– OPTIONAL ––––––––––––––––
+
+# Base64 encoded private key and certificate for HTTPS termination. This is only
+# required if you do not use an external reverse proxy. See documentation:
+# https://wiki.generaloutline.com/share/1c922644-40d8-41fe-98f9-df2b67239d45
+SSL_KEY=
+SSL_CERT=
+
 # If using a Cloudfront/Cloudflare distribution or similar it can be set below.
 # This will cause paths to javascript, stylesheets, and images to be updated to
 # the hostname defined in CDN_URL. In your CDN configuration the origin server
 # should be set to the same as URL.
 CDN_URL=
 
-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
-
-# Generate a hex-encoded 32-byte random key. Use `openssl rand -hex 32` in your
-# terminal to generate a random value.
-SECRET_KEY=generate_a_new_key
-
-# Generate a unique random key. The format is not important but you could still use
-# `openssl rand -hex 32` in your terminal to generate a random value.
-UTILS_SECRET=generate_a_new_key
-
-# The default interface language. See translate.getoutline.com for a list of
-# available language codes and their rough percentage translated.
-DEFAULT_LANGUAGE=en_US
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# –––––––––––––  DATABASE  –––––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# The database URL for your production database, including username, password, and database name.
-DATABASE_URL=postgres://user:pass@postgres:5432/outline
-
-# The in-memory database pool per-process settings. Ensure that the pool size that will not exceed
-# the maximum number of connections allowed by your database. Defaults to 0 and 5.
-DATABASE_CONNECTION_POOL_MIN=
-DATABASE_CONNECTION_POOL_MAX=
-
-# Uncomment this line if you will not use SSL for connecting to Postgres. This is acceptable
-# if the database and the application are on the same machine.
-# PGSSLMODE=disable
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# ––––––––––––––  REDIS  –––––––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# The Redis URL for your environment you can either specify an ioredis compatible url or a Base64
-# encoded configuration object.
-# DOCS: https://docs.getoutline.com/s/hosting/doc/redis-LGM4BFXYp4
-REDIS_URL=redis://redis:6379
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# –––––––––––  FILE STORAGE  –––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# Specify what storage system to use. Possible value is one of "s3" or "local".
-# For "local" images and document attachments will be saved on local disk, for "s3" they
-# will be stored in an S3-compatible network store.
-# DOCS: https://docs.getoutline.com/s/hosting/doc/file-storage-N4M0T6Ypu7
-FILE_STORAGE=local
-
-# If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
-# which all attachments/images are stored. 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
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# ––––––––––––––––  SSL  –––––––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# Base64 encoded private key and certificate for HTTPS termination. This is one
-# of three ways to configure SSL and can be left empty.
-# DOCS: https://docs.getoutline.com/s/hosting/doc/ssl-pzk7WO8d1n
-SSL_KEY=
-SSL_CERT=
-
 # 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
 
-
-# ––––––––––––––––––––––––––––––––––––––
-# ––––––––––  AUTHENTICATION  ––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# Third party signin credentials, at least ONE OF EITHER Google, Slack,
-# Discord, or Microsoft is required for a working installation or you'll
-# have no sign-in options.
-
-# Slack sign-in provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/slack-sgMujR8J9J
-SLACK_CLIENT_ID=get_a_key_from_slack
-SLACK_CLIENT_SECRET=get_the_secret_of_above_key
-
-# Google sign-in provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/google-hOuvtCmTqQ
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-
-# Microsoft Entra / Azure AD sign-in provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/microsoft-entra-UVz6jsIOcv
-AZURE_CLIENT_ID=
-AZURE_CLIENT_SECRET=
-AZURE_RESOURCE_APP_ID=
-
-# Discord sign-in provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/discord-g4JdWFFub6
-DISCORD_CLIENT_ID=
-DISCORD_CLIENT_SECRET=
-DISCORD_SERVER_ID=
-DISCORD_SERVER_ROLES=
-
-# Generic OIDC provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/oidc-8CPBm6uC0I
-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
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# ––––––––––––––  EMAIL  –––––––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# To support sending outgoing transactional emails such as "document updated" or
-# email sign-in you'll need to connect an SMTP server. Service can be configured
-# with any service from this list: https://community.nodemailer.com/2-0-0-beta/setup-smtp/well-known-services/
-# DOCS: https://docs.getoutline.com/s/hosting/doc/smtp-cqCJyZGMIB
-SMTP_SERVICE=
-SMTP_USERNAME=
-SMTP_PASSWORD=
-SMTP_FROM_EMAIL=
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# ––––––––––  RATE LIMITER  ––––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# Whether the rate limiter is enabled or not
-RATE_LIMITER_ENABLED=true
-
-# Individual endpoints have hardcoded rate limits that are enabled
-# with the above setting, however this is a global rate limiter
-# across all requests
-RATE_LIMITER_REQUESTS=1000
-RATE_LIMITER_DURATION_WINDOW=60
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# –––––––––––  INTEGRATIONS  –––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
-# The GitHub integration allows previewing issue and pull request links
-# DOCS: https://docs.getoutline.com/s/hosting/doc/github-GchT3NNxI9
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-GITHUB_WEBHOOK_SECRET=
-GITHUB_APP_NAME=
-GITHUB_APP_ID=
-GITHUB_APP_PRIVATE_KEY=
-
-# The Linear integration allows previewing issue links as rich mentions
-LINEAR_CLIENT_ID=
-LINEAR_CLIENT_SECRET=
-
-# For a complete Slack integration with search and posting to channels the
-# following configs are also needed in addition to Slack authentication:
-# DOCS: https://docs.getoutline.com/s/hosting/doc/slack-G2mc8DOJHk
-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 Sentry (sentry.io) to track errors and performance,
-# DOCS: https://docs.getoutline.com/s/hosting/doc/sentry-jxcFttcDl5
-SENTRY_DSN=
-SENTRY_TUNNEL=
-
-# Enable importing pages from a Notion workspace
-# DOCS: https://docs.getoutline.com/s/hosting/doc/notion-2v6g7WY3l3
-NOTION_CLIENT_ID=
-NOTION_CLIENT_SECRET=
-
-# The Iframely integration allows previews of third-party content within Outline.
-# For example, hovering over an external link will show a preview.
-# DOCS: https://docs.getoutline.com/s/hosting/doc/iframely-HwLF1EZ9mo
-IFRAMELY_URL=
-IFRAMELY_API_KEY=
-
-
-# ––––––––––––––––––––––––––––––––––––––
-# –––––––––––––  DEBUGGING  ––––––––––––
-# ––––––––––––––––––––––––––––––––––––––
-
 # Have the installation check for updates by sending anonymized statistics to
 # the maintainers
 ENABLE_UPDATES=true
 
-# Debugging categories to enable – you can remove the default "http" value if
-# your proxy already logs incoming http requests and this ends up being duplicative
+# How many processes should be spawned. As a reasonable rule divide your servers
+# available memory by 512 for a rough estimate
+WEB_CONCURRENCY=1
+
+# Override the maxium size of document imports, could be required if you have
+# especially large Word documents with embedded imagery
+MAXIMUM_IMPORT_SIZE=5120000
+
+# You can remove this line if your reverse proxy already logs incoming http
+# requests and this ends up being duplicative
 DEBUG=http
 
-# Configure lowest severity level for server logs. Should be one of
-# error, warn, info, http, verbose, debug, or silly
-LOG_LEVEL=info
+# Comma separated list of domains to be allowed to signin to the wiki. If not
+# set, all domains are allowed by default when using Google OAuth to signin
+ALLOWED_DOMAINS=
+
+# For a complete Slack integration with search and posting to channels the
+# following configs are also needed, some more details
+# => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
+#
+SLACK_VERIFICATION_TOKEN=your_token
+SLACK_APP_ID=A0XXXXXXX
+SLACK_MESSAGE_ACTIONS=true
+
+# Optionally enable google analytics to track pageviews in the knowledge base
+GOOGLE_ANALYTICS_ID=
+
+# Optionally enable Sentry (sentry.io) to track errors and performance
+SENTRY_DSN=
+
+# To support sending outgoing transactional emails such as "document updated" or
+# "you've been invited" you'll need to provide authentication for an SMTP server
+SMTP_HOST=
+SMTP_PORT=
+SMTP_USERNAME=
+SMTP_PASSWORD=
+SMTP_FROM_EMAIL=
+SMTP_REPLY_EMAIL=
+SMTP_TLS_CIPHERS=
+SMTP_SECURE=true
+
+# 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

.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

.eslintignore

@@ -0,0 +1 @@
+server/migrations/*.js

.eslintrc

@@ -0,0 +1,115 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "extraFileExtensions": [".json"],
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "eslint-plugin-import",
+    "eslint-plugin-node",
+    "eslint-plugin-react",
+    "eslint-plugin-react-hooks",
+    "import"
+  ],
+  "rules": {
+    "eqeqeq": 2,
+    "curly": 2,
+    "no-mixed-operators": "off",
+    "no-useless-escape": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "args": "after-used",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
+    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
+    "import/no-named-as-default": "off",
+    "import/no-named-as-default-member": "off",
+    "import/newline-after-import": 2,
+    "import/order": [
+      "error",
+      {
+        "alphabetize": {
+          "order": "asc"
+        },
+        "pathGroups": [
+          {
+            "pattern": "@shared/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "@server/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/stores",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/stores/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/models/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/scenes/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/components/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ]
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "printWidth": 80,
+        "trailingComma": "es5"
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {}
+    }
+  }
+}

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

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

.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,31 +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/*"
-      radix-ui:
-        patterns:
-          - "@radix-ui/*"

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

.github/workflows/auto_close_prs.yml

@@ -1,59 +0,0 @@
-name: Auto Close Unsigned PRs
-
-on:
-  schedule:
-    - cron: "0 0 * * *" # Run daily at midnight UTC
-
-jobs:
-  close-unsigned-prs:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-      issues: write
-
-    steps:
-      - name: Close unsigned PRs
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const now = new Date();
-            const TWO_WEEKS = 14 * 24 * 60 * 60 * 1000; // 14 days in milliseconds
-
-            const prs = await github.rest.pulls.list({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open'
-            });
-
-            for (const pr of prs.data) {
-              const prCreatedAt = new Date(pr.created_at);
-              const prAge = now - prCreatedAt;
-
-              if (prAge < TWO_WEEKS) continue;
-
-              const comments = await github.rest.issues.listComments({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: pr.number
-              });
-
-              const hasNotSignedComment = comments.data.some(comment =>
-                comment.body.toLowerCase().includes('https://cla-assistant.io/pull/badge/not_signed')
-              );
-
-              if (hasNotSignedComment) {
-                await github.rest.pulls.update({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  pull_number: pr.number,
-                  state: 'closed'
-                });
-
-                await github.rest.issues.createComment({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  issue_number: pr.number,
-                  body: 'This PR has been automatically closed because it has been open for more than 14 days and has not accepted the CLA.'
-                });
-              }
-            }

.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,158 +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, 22.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 --prefer-offline
-
-  lint:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
-      - run: yarn lint --quiet
-
-  types:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
-      - run: yarn tsc
-
-  changes:
-    runs-on: ubuntu-latest
-    outputs:
-      config: ${{ steps.filter.outputs.config }}
-      server: ${{ steps.filter.outputs.server }}
-      app: ${{ steps.filter.outputs.app }}
-    steps:
-      - uses: actions/checkout@v4
-      - uses: dorny/paths-filter@v2
-        id: filter
-        with:
-          filters: |
-            config:
-              - '.github/**'
-              - 'vite.config.ts'
-            server:
-              - 'server/**'
-              - 'shared/**'
-              - 'package.json'
-              - 'yarn.lock'
-            app:
-              - 'app/**'
-              - 'shared/**'
-              - 'package.json'
-              - 'yarn.lock'
-
-  test:
-    needs: [build, changes]
-    if: ${{ needs.changes.outputs.app == 'true' || needs.changes.outputs.config == 'true' }}
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        test-group: [app, shared]
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
-      - run: yarn test:${{ matrix.test-group }}
-
-  test-server:
-    needs: [build, changes]
-    if: ${{ needs.changes.outputs.server == 'true' || needs.changes.outputs.config == '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
-
-    strategy:
-      matrix:
-        shard: [1, 2, 3, 4]
-
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
-      - 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: 22.x
-          cache: "yarn"
-      - run: yarn install --frozen-lockfile --prefer-offline
-      - 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

@@ -13,12 +13,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [main]
+    branches: [ main ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [main]
+    branches: [ main ]
   schedule:
-    - cron: "28 15 * * 2"
+    - cron: '28 15 * * 2'
 
 jobs:
   analyze:
@@ -32,39 +32,39 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ["javascript"]
+        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
+    - 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
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      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
+    # 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@v1
 
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 https://git.io/JvXDl
+    # ℹ️ 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
+    # ✏️ 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
+    #- run: |
+    #   make bootstrap
+    #   make release
 
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.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 --prefer-offline
-      - 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

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

.husky/pre-commit

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

.jestconfig.json

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

.nvmrc

@@ -1 +0,0 @@
-22

.oxlintrc.json

@@ -1,102 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "ignorePatterns": [
-    "build/**",
-    "node_modules/**",
-    "public/**",
-    "server/migrations/**",
-    "server/scripts/**",
-    "patches/**",
-    "*.d.ts"
-  ],
-  "rules": {
-    "for-direction": "error",
-    "no-async-promise-executor": "error",
-    "no-case-declarations": "error",
-    "no-class-assign": "error",
-    "no-compare-neg-zero": "error",
-    "no-cond-assign": "error",
-    "no-const-assign": "error",
-    "no-constant-binary-expression": "error",
-    "no-constant-condition": "error",
-    "no-control-regex": "error",
-    "no-debugger": "error",
-    "no-delete-var": "error",
-    "no-dupe-class-members": "error",
-    "no-dupe-else-if": "error",
-    "no-dupe-keys": "error",
-    "no-duplicate-case": "error",
-    "no-empty": "error",
-    "no-empty-character-class": "error",
-    "no-empty-pattern": "error",
-    "no-empty-static-block": "error",
-    "no-ex-assign": "error",
-    "no-explicit-any": "warn",
-    "no-extra-boolean-cast": "error",
-    "no-fallthrough": "error",
-    "no-func-assign": "error",
-    "no-global-assign": "error",
-    "no-import-assign": "error",
-    "no-invalid-regexp": "error",
-    "no-irregular-whitespace": "error",
-    "no-loss-of-precision": "error",
-    "no-new-native-nonconstructor": "error",
-    "no-nonoctal-decimal-escape": "error",
-    "no-obj-calls": "error",
-    "no-prototype-builtins": "error",
-    "no-redeclare": "error",
-    "no-regex-spaces": "error",
-    "no-self-assign": "error",
-    "no-setter-return": "error",
-    "no-shadow-restricted-names": "error",
-    "no-sparse-arrays": "error",
-    "no-this-before-super": "error",
-    "no-unexpected-multiline": "error",
-    "no-unsafe-finally": "error",
-    "no-unsafe-negation": "error",
-    "no-unsafe-optional-chaining": "error",
-    "no-unused-labels": "error",
-    "no-unused-private-class-members": "error",
-    "no-unused-vars": "error",
-    "no-useless-backreference": "error",
-    "no-useless-catch": "error",
-    "no-useless-escape": "error",
-    "no-with": "error",
-    "require-yield": "error",
-    "use-isnan": "error",
-    "valid-typeof": "error"
-  },
-  "overrides": [
-    {
-      "files": ["**/*.{js,jsx,ts,tsx}"],
-      "rules": {
-        "eqeqeq": "error",
-        "curly": "error",
-        "no-console": "error",
-        "arrow-body-style": ["error", "as-needed"],
-        "no-useless-escape": "off",
-        "react/react-in-jsx-scope": "off",
-        "react/self-closing-comp": [
-          "error",
-          {
-            "component": true,
-            "html": true
-          }
-        ],
-        "@typescript-eslint/no-require-imports": "off",
-        "import/no-named-as-default": "off",
-        "import/no-named-as-default-member": "off",
-        "no-unused-vars": [
-          "error",
-          {
-            "argsIgnorePattern": "^_",
-            "caughtErrorsIgnorePattern": "^_",
-            "args": "after-used",
-            "ignoreRestSiblings": true
-          }
-        ]
-      },
-      "plugins": ["eslint", "oxc", "react", "typescript", "import"]
-    }
-  ]
-}

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "printWidth": 80,
-  "trailingComma": "es5"
-}

.sequelizerc

@@ -1,6 +1,4 @@
-require("@dotenvx/dotenvx").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'),
 }

Dockerfile

@@ -1,48 +1,51 @@
+# syntax=docker/dockerfile:1.2
 ARG APP_PATH=/opt/outline
-ARG BASE_IMAGE=outlinewiki/outline-base
-FROM ${BASE_IMAGE} AS base
+FROM node:16-alpine AS deps-common
 
 ARG APP_PATH
 WORKDIR $APP_PATH
+COPY ./package.json ./yarn.lock ./
 
 # ---
-FROM node:22-slim AS runner
+FROM deps-common AS deps-dev
+RUN yarn install --no-optional --frozen-lockfile && \
+  yarn cache clean
 
-LABEL org.opencontainers.image.source="https://github.com/outline/outline"
+# ---
+FROM deps-common AS deps-prod
+RUN yarn install --production=true --frozen-lockfile && \
+  yarn cache clean
+
+# ---
+FROM node:16-alpine AS builder
 
 ARG APP_PATH
 WORKDIR $APP_PATH
-ENV NODE_ENV=production
 
-COPY --from=base $APP_PATH/build ./build
-COPY --from=base $APP_PATH/server ./server
-COPY --from=base $APP_PATH/public ./public
-COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
-COPY --from=base $APP_PATH/node_modules ./node_modules
-COPY --from=base $APP_PATH/package.json ./package.json
+COPY . .
+COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
+ARG CDN_URL
+RUN yarn build
 
-# Install wget to healthcheck the server
-RUN  apt-get update \
-  && apt-get install -y wget \
-  && rm -rf /var/lib/apt/lists/*
+# ---
+FROM node:16-alpine AS runner
 
-# 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
+ARG APP_PATH
+WORKDIR $APP_PATH
+ENV NODE_ENV production
 
-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"
+COPY --from=builder $APP_PATH/build ./build
+COPY --from=builder $APP_PATH/server ./server
+COPY --from=builder $APP_PATH/public ./public
+COPY --from=builder $APP_PATH/.sequelizerc ./.sequelizerc
+COPY --from=deps-prod $APP_PATH/node_modules ./node_modules
+COPY --from=builder $APP_PATH/package.json ./package.json
 
-VOLUME /var/lib/outline/data
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs $APP_PATH/build
 
 USER nodejs
 
-HEALTHCHECK --interval=1m CMD wget -qO- "http://localhost:${PORT:-3000}/_health" | grep -q "OK" || exit 1
-
 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.87.4
-                      The Licensed Work is (c) 2025 General Outline, Inc.
+Licensed Work:        Outline 0.60.1
+                      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-09-18
+Change Date:          2025-11-11
 
 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 sequelize db:migrate
 	yarn dev:watch
 
 build:
-	docker compose build --pull outline
+	docker-compose build --pull outline
 
 test:
-	docker compose up -d 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

README.md

@@ -7,31 +7,32 @@
   <img width="1640" alt="screenshot" src="https://user-images.githubusercontent.com/380914/110356468-26374600-7fef-11eb-9f6a-f2cc2c8c6590.png">
 </p>
 <p align="center">
+  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield&amp;circle-token=c0c4c2f39990e277385d5c1ae96169c409eb887a"></a>
   <a href="http://www.typescriptlang.org" rel="nofollow"><img src="https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg" alt="TypeScript"></a>
   <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier"></a>
   <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg" alt="Styled Components"></a>
   <a href="https://translate.getoutline.com/project/outline" alt="Localized"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
 </p>
 
-This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, A hosted version of the app is offered 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.
+Please see the [documentation](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/) for running your own copy of Outline in a production configuration.
 
 If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).
 
 # 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.
+There is a short guide for [setting up a development environment](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to 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_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of your code being accepted.
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
@@ -50,14 +51,13 @@ please refer to the [architecture document](docs/ARCHITECTURE.md) first for a hi
 
 In development Outline outputs simple logging to the console, prefixed by categories. In production it outputs JSON logs, these can be easily parsed by your preferred log ingestion pipeline.
 
-HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable. logging
-can be enabled for all categories by setting `DEBUG=*` or for specific categories such as `DEBUG=database` and `LOG_LEVEL=debug`, or `LOG_LEVEL=silly` for very verbose logging.
+HTTP logging is disabled by default, but can be enabled by setting the `DEBUG=http` environment variable.
 
 ## Tests
 
 We aim to have sufficient test coverage for critical parts of the application and aren't aiming for 100% unit test coverage. All API endpoints and anything authentication related should be thoroughly tested.
 
-To add new tests, write your tests with [Jest](https://facebook.github.io/jest/) and add a file with `.test.ts` extension next to the tested code.
+To add new tests, write your tests with [Jest](https://facebook.github.io/jest/) and add a file with `.test.js` extension next to the tested code.
 
 ```shell
 # To run all tests
@@ -68,14 +68,14 @@ make watch
 ```
 
 Once the test database is created with `make test` you may individually run
-frontend and backend tests directly with jest:
+frontend and backend tests directly.
 
 ```shell
 # To run backend tests
 yarn test:server
 
-# To run a specific backend test in watch mode
-yarn test path/to/file.test.ts --watch
+# To run a specific backend test
+yarn test:server myTestFile
 
 # To run frontend tests
 yarn test:app
@@ -86,21 +86,16 @@ yarn test:app
 Sequelize is used to create and run migrations, for example:
 
 ```shell
-yarn db:create-migration --name my-migration
-yarn db:migrate
-yarn db:rollback
+yarn sequelize migration:generate --name my-migration
+yarn sequelize db:migrate
 ```
 
-Or, to run migrations on test database:
+Or to run migrations on test database:
 
 ```shell
-yarn db:migrate --env test
+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).

__mocks__/bull.js

@@ -0,0 +1,17 @@
+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__/fileMock.js

@@ -1 +1 @@
-export default "";
+export default '';

__mocks__/localStorage.js

@@ -1,19 +1,19 @@
 const storage = {};
 
 export default {
-  setItem: function (key, value) {
-    storage[key] = value || "";
+  setItem: function(key, value) {
+    storage[key] = value || '';
   },
-  getItem: function (key) {
+  getItem: function(key) {
     return key in storage ? storage[key] : null;
   },
-  removeItem: function (key) {
+  removeItem: function(key) {
     delete storage[key];
   },
   get length() {
     return Object.keys(storage).length;
   },
-  key: function (i) {
+  key: function(i) {
     var keys = Object.keys(storage);
     return keys[i] || null;
   },

__mocks__/react-medium-image-zoom.js

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

__mocks__/window.js

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

app.json

@@ -3,7 +3,13 @@
   "description": "Open source wiki and knowledge base for growing teams",
   "website": "https://www.getoutline.com/",
   "repository": "https://github.com/outline/outline",
-  "keywords": ["wiki", "team", "node", "markdown", "slack"],
+  "keywords": [
+    "wiki",
+    "team",
+    "node",
+    "markdown",
+    "slack"
+  ],
   "success_url": "/",
   "formation": {
     "web": {
@@ -33,15 +39,14 @@
       "generator": "secret",
       "required": true
     },
-    "UTILS_SECRET": {
-      "description": "A 32-character secret key, generate with openssl rand -hex 32",
-      "generator": "secret",
-      "required": true
-    },
     "ENABLE_UPDATES": {
       "value": "true",
       "required": true
     },
+    "ALLOWED_DOMAINS": {
+      "description": "Comma separated list of domains to be allowed (optional). If not set, all domains are allowed by default when using Google OAuth to signin. Consider putting {your app name}.herokuapp.com and any domain you are binding on in this list.",
+      "required": false
+    },
     "URL": {
       "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
       "required": true
@@ -86,14 +91,6 @@
       "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",
@@ -101,7 +98,7 @@
     },
     "OIDC_DISPLAY_NAME": {
       "description": "Display name for OIDC authentication",
-      "value": "OpenID Connect",
+      "value": "OpenID",
       "required": false
     },
     "OIDC_SCOPES": {
@@ -109,11 +106,11 @@
       "value": "openid profile email",
       "required": false
     },
-    "SLACK_CLIENT_ID": {
+    "SLACK_KEY": {
       "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
       "required": false
     },
-    "SLACK_CLIENT_SECRET": {
+    "SLACK_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -141,6 +138,11 @@
       "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
       "required": false
     },
+    "AWS_S3_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
     "AWS_S3_FORCE_PATH_STYLE": {
       "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
       "value": "true",
@@ -156,19 +158,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
@@ -199,15 +192,15 @@
       "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)",
+    "TEAM_LOGO": {
+      "description": "A logo that will be displayed on the signed out home page",
       "required": false
     },
     "DEFAULT_LANGUAGE": {
@@ -216,4 +209,4 @@
       "required": false
     }
   }
-}
+}

app/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "../.eslintrc"
+  ],
+  "env": {
+    "jest": true,
+    "browser": true
+  }
+}

app/.jestconfig.json

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

app/.oxlintrc.json

@@ -1,34 +0,0 @@
-{
-  "extends": ["../.oxlintrc.json"],
-  "plugins": ["oxc", "eslint", "typescript", "react"],
-  "overrides": [
-    {
-      "files": ["**/*.{jsx,tsx}"],
-      "rules": {
-        "no-restricted-imports": [
-          "error",
-          {
-            "patterns": [
-              {
-                "group": ["mime-types"],
-                "message": "Do not use the mime-types package in the browser."
-              }
-            ],
-            "paths": [
-              {
-                "name": "reakit/Menu",
-                "importNames": ["useMenuState"],
-                "message": "Do not use useMenuState from reakit/Menu. Use useMenuState instead."
-              }
-            ]
-          }
-        ]
-      },
-      "plugins": ["import"]
-    }
-  ],
-  "env": {
-    "jest": true,
-    "browser": true
-  }
-}

app/actions/definitions/apiKeys.tsx

@@ -1,60 +0,0 @@
-import { PlusIcon, TrashIcon } from "outline-icons";
-import stores from "~/stores";
-import ApiKey from "~/models/ApiKey";
-import ApiKeyNew from "~/scenes/ApiKeyNew";
-import ApiKeyRevokeDialog from "~/scenes/Settings/components/ApiKeyRevokeDialog";
-import { createAction, createActionV2 } 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} />,
-    });
-  },
-});
-
-export const revokeApiKeyFactory = ({ apiKey }: { apiKey: ApiKey }) =>
-  createActionV2({
-    name: ({ t, isMenu }) =>
-      isMenu
-        ? apiKey.isExpired
-          ? t("Delete")
-          : `${t("Revoke")}…`
-        : t("Revoke API key"),
-    analyticsName: "Revoke API key",
-    section: SettingsSection,
-    icon: <TrashIcon />,
-    keywords: "revoke delete remove",
-    dangerous: true,
-    perform: async ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      if (apiKey.isExpired) {
-        await apiKey.delete();
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Revoke token"),
-        content: (
-          <ApiKeyRevokeDialog
-            onSubmit={stores.dialogs.closeAllModals}
-            apiKey={apiKey}
-          />
-        ),
-      });
-    },
-  });

app/actions/definitions/collections.tsx

@@ -1,50 +1,15 @@
-import {
-  ArchiveIcon,
-  CollectionIcon,
-  EditIcon,
-  ExportIcon,
-  NewDocumentIcon,
-  PadlockIcon,
-  PlusIcon,
-  RestoreIcon,
-  SearchIcon,
-  ShapesIcon,
-  StarredIcon,
-  SubscribeIcon,
-  TrashIcon,
-  UnstarredIcon,
-  UnsubscribeIcon,
-} from "outline-icons";
-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,
-  createActionV2,
-  createInternalLinkActionV2,
-} from "~/actions";
-import { ActiveCollectionSection, CollectionSection } from "~/actions/sections";
-import { setPersistedState } from "~/hooks/usePersistedState";
-import {
-  newDocumentPath,
-  newTemplatePath,
-  searchPath,
-} from "~/utils/routeHelpers";
-import ExportDialog from "~/components/ExportDialog";
-
-const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
-  <DynamicCollectionIcon collection={collection} />
-);
+import { CollectionIcon, EditIcon, PlusIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import CollectionEdit from "~/scenes/CollectionEdit";
+import CollectionNew from "~/scenes/CollectionNew";
+import DynamicCollectionIcon from "~/components/CollectionIcon";
+import { createAction } from "~/actions";
+import { CollectionSection } from "~/actions/sections";
+import history from "~/utils/history";
 
 export const openCollection = createAction({
   name: ({ t }) => t("Open collection"),
-  analyticsName: "Open collection",
   section: CollectionSection,
   shortcut: ["o", "c"],
   icon: <CollectionIcon />,
@@ -53,24 +18,23 @@ export const openCollection = createAction({
     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,
+      id: collection.url,
       name: collection.name,
-      icon: <ColorCollectionIcon collection={collection} />,
+      icon: <DynamicCollectionIcon collection={collection} />,
       section: CollectionSection,
-      to: collection.path,
+      perform: () => history.push(collection.url),
     }));
   },
 });
 
 export const createCollection = createAction({
   name: ({ t }) => t("New collection"),
-  analyticsName: "New collection",
   section: CollectionSection,
   icon: <PlusIcon />,
   keywords: "create",
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").createCollection,
-  perform: ({ t, event, stores }) => {
+  perform: ({ t, event }) => {
     event?.preventDefault();
     event?.stopPropagation();
     stores.dialogs.openModal({
@@ -80,15 +44,14 @@ export const createCollection = createAction({
   },
 });
 
-export const editCollection = createActionV2({
-  name: ({ t, isMenu }) => (isMenu ? `${t("Edit")}…` : t("Edit collection")),
-  analyticsName: "Edit collection",
-  section: ActiveCollectionSection,
+export const editCollection = createAction({
+  name: ({ t }) => t("Edit collection"),
+  section: CollectionSection,
   icon: <EditIcon />,
-  visible: ({ activeCollectionId, stores }) =>
+  visible: ({ stores, activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId, stores }) => {
+  perform: ({ t, activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -105,370 +68,4 @@ export const editCollection = createActionV2({
   },
 });
 
-export const editCollectionPermissions = createActionV2({
-  name: ({ t, isMenu }) =>
-    isMenu ? `${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 = createInternalLinkActionV2({
-  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;
-  },
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = searchPath({
-      collectionId: activeCollectionId,
-    }).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
-export const starCollection = createActionV2({
-  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 = createActionV2({
-  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 = createActionV2({
-  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?.isActive &&
-      !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 = createActionV2({
-  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?.isActive &&
-      !!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 = createActionV2({
-  name: ({ t }) => `${t("Archive")}…`,
-  analyticsName: "Archive collection",
-  section: ActiveCollectionSection,
-  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 = createActionV2({
-  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 = createActionV2({
-  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 exportCollection = createActionV2({
-  name: ({ t }) => `${t("Export")}…`,
-  analyticsName: "Export collection",
-  section: ActiveCollectionSection,
-  icon: <ExportIcon />,
-  visible: ({ currentTeamId, activeCollectionId, stores }) => {
-    if (!currentTeamId || !activeCollectionId) {
-      return false;
-    }
-
-    return (
-      !!stores.policies.abilities(currentTeamId).createExport &&
-      !!stores.policies.abilities(activeCollectionId).export
-    );
-  },
-  perform: async ({ activeCollectionId, stores, t }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Export collection"),
-      content: (
-        <ExportDialog
-          collection={collection}
-          onSubmit={stores.dialogs.closeAllModals}
-        />
-      ),
-    });
-  },
-});
-
-export const createDocument = createInternalLinkActionV2({
-  name: ({ t }) => t("New document"),
-  analyticsName: "New document",
-  section: ActiveCollectionSection,
-  icon: <NewDocumentIcon />,
-  keywords: "new create document",
-  visible: ({ activeCollectionId, stores }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
-    ),
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = newDocumentPath(activeCollectionId).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
-export const createTemplate = createInternalLinkActionV2({
-  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
-    ),
-  to: ({ activeCollectionId, sidebarContext }) => {
-    const [pathname, search] = newTemplatePath(activeCollectionId).split("?");
-
-    return {
-      pathname,
-      search,
-      state: { sidebarContext },
-    };
-  },
-});
-
-export const rootCollectionActions = [
-  openCollection,
-  createCollection,
-  starCollection,
-  unstarCollection,
-  subscribeCollection,
-  unsubscribeCollection,
-  deleteCollection,
-];
+export const rootCollectionActions = [openCollection, createCollection];

app/actions/definitions/comments.tsx

@@ -1,100 +0,0 @@
-import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
-import { toast } from "sonner";
-import Comment from "~/models/Comment";
-import CommentDeleteDialog from "~/components/CommentDeleteDialog";
-import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
-import { createActionV2 } from "..";
-import { ActiveDocumentSection } from "../sections";
-
-export const deleteCommentFactory = ({
-  comment,
-  onDelete,
-}: {
-  comment: Comment;
-  onDelete: () => void;
-}) =>
-  createActionV2({
-    name: ({ t }) => `${t("Delete")}…`,
-    analyticsName: "Delete comment",
-    section: ActiveDocumentSection,
-    icon: <TrashIcon />,
-    keywords: "trash",
-    dangerous: true,
-    visible: ({ stores }) => stores.policies.abilities(comment.id).delete,
-    perform: ({ t, stores, 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;
-}) =>
-  createActionV2({
-    name: ({ t }) => t("Mark as resolved"),
-    analyticsName: "Resolve thread",
-    section: ActiveDocumentSection,
-    icon: <DoneIcon outline />,
-    visible: ({ stores }) =>
-      stores.policies.abilities(comment.id).resolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async ({ t }) => {
-      await comment.resolve();
-      onResolve();
-      toast.success(t("Thread resolved"));
-    },
-  });
-
-export const unresolveCommentFactory = ({
-  comment,
-  onUnresolve,
-}: {
-  comment: Comment;
-  onUnresolve: () => void;
-}) =>
-  createActionV2({
-    name: ({ t }) => t("Mark as unresolved"),
-    analyticsName: "Unresolve thread",
-    section: ActiveDocumentSection,
-    icon: <DoneIcon outline />,
-    visible: ({ stores }) =>
-      stores.policies.abilities(comment.id).unresolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async () => {
-      await comment.unresolve();
-      onUnresolve();
-    },
-  });
-
-export const viewCommentReactionsFactory = ({
-  comment,
-}: {
-  comment: Comment;
-}) =>
-  createActionV2({
-    name: ({ t }) => `${t("View reactions")}`,
-    analyticsName: "View comment reactions",
-    section: ActiveDocumentSection,
-    icon: <SmileyIcon />,
-    visible: ({ stores }) =>
-      stores.policies.abilities(comment.id).read &&
-      comment.reactions.length > 0,
-    perform: ({ t, stores, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Reactions"),
-        content: <ViewReactionsDialog model={comment} />,
-      });
-    },
-  });

app/actions/definitions/debug.tsx

@@ -0,0 +1,32 @@
+import { ToolsIcon, TrashIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import { createAction } from "~/actions";
+import { DebugSection } from "~/actions/sections";
+import env from "~/env";
+import { deleteAllDatabases } from "~/utils/developer";
+
+export const clearIndexedDB = createAction({
+  name: ({ t }) => t("Delete IndexedDB cache"),
+  icon: <TrashIcon />,
+  keywords: "cache clear database",
+  section: DebugSection,
+  perform: async ({ t }) => {
+    await deleteAllDatabases();
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
+  },
+});
+
+export const development = createAction({
+  name: ({ t }) => t("Development"),
+  keywords: "debug",
+  icon: <ToolsIcon />,
+  iconInContextMenu: false,
+  section: DebugSection,
+  visible: ({ event }) =>
+    env.ENVIRONMENT === "development" ||
+    (event instanceof KeyboardEvent && event.altKey),
+  children: [clearIndexedDB],
+});
+
+export const rootDebugActions = [development];

app/actions/definitions/developer.tsx

@@ -1,221 +0,0 @@
-import Storage from "@shared/utils/Storage";
-import copy from "copy-to-clipboard";
-import {
-  BeakerIcon,
-  CopyIcon,
-  EditIcon,
-  ToolsIcon,
-  TrashIcon,
-  UserIcon,
-} from "outline-icons";
-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 clearStorage = createAction({
-  name: ({ t }) => t("Clear local storage"),
-  icon: <TrashIcon />,
-  keywords: "cache clear localstorage",
-  section: DeveloperSection,
-  perform: ({ t }) => {
-    Storage.clear();
-    toast.success(t("Local storage 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,
-    clearStorage,
-    startTyping,
-  ],
-});
-
-export const rootDeveloperActions = [developer];

app/actions/definitions/integrations.tsx

@@ -1,28 +0,0 @@
-import { TrashIcon } from "outline-icons";
-import stores from "~/stores";
-import { createAction } from "..";
-import { SettingsSection } from "../sections";
-import Integration from "~/models/Integration";
-import { IntegrationType } from "@shared/types";
-import { DisconnectAnalyticsDialog } from "~/components/DisconnectAnalyticsDialog";
-
-export const disconnectAnalyticsIntegrationFactory = (
-  integration?: Integration<IntegrationType.Analytics>
-) =>
-  createAction({
-    name: ({ t }) => t("Disconnect analytics"),
-    analyticsName: "Disconnect analytics",
-    section: SettingsSection,
-    icon: <TrashIcon />,
-    keywords: "disconnect",
-    visible: () => !!integration,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Disconnect analytics"),
-        content: <DisconnectAnalyticsDialog integration={integration!} />,
-      });
-    },
-  });

app/actions/definitions/navigation.tsx

@@ -3,213 +3,127 @@ import {
   SearchIcon,
   ArchiveIcon,
   TrashIcon,
+  EditIcon,
   OpenIcon,
   SettingsIcon,
+  ShapesIcon,
   KeyboardIcon,
   EmailIcon,
   LogoutIcon,
-  ProfileIcon,
-  BrowserIcon,
-  ShapesIcon,
-  DraftsIcon,
-  BugIcon,
 } from "outline-icons";
-import { UrlHelper } from "@shared/utils/UrlHelper";
-import { isMac } from "@shared/utils/browser";
+import * as React from "react";
+import {
+  developersUrl,
+  changelogUrl,
+  mailToUrl,
+  githubIssuesUrl,
+} from "@shared/utils/urlHelpers";
 import stores from "~/stores";
-import SearchQuery from "~/models/SearchQuery";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
+import { createAction } from "~/actions";
+import { NavigationSection } from "~/actions/sections";
+import history from "~/utils/history";
 import {
-  createAction,
-  createActionV2,
-  createExternalLinkActionV2,
-  createInternalLinkActionV2,
-} from "~/actions";
-import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
-import Desktop from "~/utils/Desktop";
-import isCloudHosted from "~/utils/isCloudHosted";
-import {
+  settingsPath,
   homePath,
-  searchPath,
+  searchUrl,
   draftsPath,
+  templatesPath,
   archivePath,
   trashPath,
-  settingsPath,
 } from "~/utils/routeHelpers";
 
 export const navigateToHome = createAction({
   name: ({ t }) => t("Home"),
-  analyticsName: "Navigate to home",
   section: NavigationSection,
   shortcut: ["d"],
   icon: <HomeIcon />,
-  to: homePath(),
+  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 />,
-    to: searchPath({ query: searchQuery.query }),
-  });
-
-export const navigateToDrafts = createAction({
-  name: ({ t }) => t("Drafts"),
-  analyticsName: "Navigate to drafts",
-  section: NavigationSection,
-  icon: <DraftsIcon />,
-  to: draftsPath(),
-  visible: ({ location }) => location.pathname !== draftsPath(),
-});
-
 export const navigateToSearch = createAction({
   name: ({ t }) => t("Search"),
-  analyticsName: "Navigate to search",
   section: NavigationSection,
+  shortcut: ["/"],
   icon: <SearchIcon />,
-  to: searchPath(),
-  visible: ({ location }) => location.pathname !== searchPath(),
+  perform: () => history.push(searchUrl()),
+  visible: ({ location }) => location.pathname !== searchUrl(),
+});
+
+export const navigateToDrafts = createAction({
+  name: ({ t }) => t("Drafts"),
+  section: NavigationSection,
+  icon: <EditIcon />,
+  perform: () => history.push(draftsPath()),
+  visible: ({ location }) => location.pathname !== draftsPath(),
+});
+
+export const navigateToTemplates = createAction({
+  name: ({ t }) => t("Templates"),
+  section: NavigationSection,
+  icon: <ShapesIcon />,
+  perform: () => history.push(templatesPath()),
+  visible: ({ location }) => location.pathname !== templatesPath(),
 });
 
 export const navigateToArchive = createAction({
   name: ({ t }) => t("Archive"),
-  analyticsName: "Navigate to archive",
   section: NavigationSection,
-  shortcut: ["g", "a"],
   icon: <ArchiveIcon />,
-  to: archivePath(),
+  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 />,
-  to: trashPath(),
+  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,
-  to: settingsPath(),
-});
-
-export const navigateToWorkspaceSettings = createInternalLinkActionV2({
-  name: ({ t }) => t("Settings"),
-  analyticsName: "Navigate to workspace settings",
-  section: NavigationSection,
-  icon: <SettingsIcon />,
-  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  to: settingsPath("details"),
-});
-
-export const navigateToProfileSettings = createInternalLinkActionV2({
-  name: ({ t }) => t("Profile"),
-  analyticsName: "Navigate to profile settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ProfileIcon />,
-  to: settingsPath(),
-});
-
-export const navigateToTemplateSettings = createAction({
-  name: ({ t }) => t("Templates"),
-  analyticsName: "Navigate to template settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ShapesIcon />,
-  to: settingsPath("templates"),
-});
-
-export const navigateToNotificationSettings = createInternalLinkActionV2({
-  name: ({ t, isMenu }) =>
-    isMenu ? t("Notification settings") : t("Notifications"),
-  analyticsName: "Navigate to notification settings",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <EmailIcon />,
-  to: settingsPath("notifications"),
-});
-
-export const navigateToAccountPreferences = createInternalLinkActionV2({
-  name: ({ t }) => t("Preferences"),
-  analyticsName: "Navigate to account preferences",
-  section: NavigationSection,
   iconInContextMenu: false,
   icon: <SettingsIcon />,
-  to: settingsPath("preferences"),
+  perform: () => history.push(settingsPath()),
 });
 
-export const openDocumentation = createExternalLinkActionV2({
-  name: ({ t }) => t("Documentation"),
-  analyticsName: "Open documentation",
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <OpenIcon />,
-  url: UrlHelper.guide,
-  target: "_blank",
-});
-
-export const openAPIDocumentation = createExternalLinkActionV2({
+export const openAPIDocumentation = createAction({
   name: ({ t }) => t("API documentation"),
-  analyticsName: "Open API documentation",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
-  url: UrlHelper.developers,
-  target: "_blank",
+  perform: () => window.open(developersUrl()),
 });
 
-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 = createExternalLinkActionV2({
+export const openFeedbackUrl = createAction({
   name: ({ t }) => t("Send us feedback"),
-  analyticsName: "Open feedback",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <EmailIcon />,
-  url: UrlHelper.contact,
-  target: "_blank",
+  perform: () => window.open(mailToUrl()),
 });
 
-export const openBugReportUrl = createExternalLinkActionV2({
+export const openBugReportUrl = createAction({
   name: ({ t }) => t("Report a bug"),
-  analyticsName: "Open bug report",
   section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <BugIcon />,
-  url: UrlHelper.github,
-  target: "_blank",
+  perform: () => window.open(githubIssuesUrl()),
 });
 
-export const openChangelog = createExternalLinkActionV2({
+export const openChangelog = createAction({
   name: ({ t }) => t("Changelog"),
-  analyticsName: "Open changelog",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
-  url: UrlHelper.changelog,
-  target: "_blank",
+  perform: () => window.open(changelogUrl()),
 });
 
-export const openKeyboardShortcuts = createActionV2({
+export const openKeyboardShortcuts = createAction({
   name: ({ t }) => t("Keyboard shortcuts"),
-  analyticsName: "Open keyboard shortcuts",
   section: NavigationSection,
   shortcut: ["?"],
   iconInContextMenu: false,
@@ -222,44 +136,25 @@ export const openKeyboardShortcuts = createActionV2({
   },
 });
 
-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,
-  to: {
-    url: "https://desktop.getoutline.com",
-    target: "_blank",
-  },
-});
-
-export const logout = createActionV2({
+export const logout = createAction({
   name: ({ t }) => t("Log out"),
-  analyticsName: "Log out",
   section: NavigationSection,
   icon: <LogoutIcon />,
-  perform: async () => {
-    await stores.auth.logout({ userInitiated: true });
-  },
+  perform: () => stores.auth.logout(),
 });
 
 export const rootNavigationActions = [
   navigateToHome,
+  navigateToSearch,
   navigateToDrafts,
+  navigateToTemplates,
   navigateToArchive,
   navigateToTrash,
-  downloadApp,
-  openDocumentation,
+  navigateToSettings,
   openAPIDocumentation,
   openFeedbackUrl,
   openBugReportUrl,
   openChangelog,
   openKeyboardShortcuts,
-  toggleSidebar,
   logout,
 ];

app/actions/definitions/notifications.tsx

@@ -1,28 +0,0 @@
-import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
-import { createAction, createActionV2 } 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 = createActionV2({
-  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,24 +0,0 @@
-import { PlusIcon } from "outline-icons";
-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,109 +0,0 @@
-import copy from "copy-to-clipboard";
-import { LinkIcon, RestoreIcon, TrashIcon } from "outline-icons";
-import { matchPath } from "react-router-dom";
-import { toast } from "sonner";
-import stores from "~/stores";
-import { createAction, createActionV2 } from "~/actions";
-import { RevisionSection } from "~/actions/sections";
-import history from "~/utils/history";
-import {
-  documentHistoryPath,
-  matchDocumentHistory,
-} from "~/utils/routeHelpers";
-
-export const restoreRevision = createActionV2({
-  name: ({ t }) => t("Restore"),
-  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 deleteRevision = createAction({
-  name: ({ t }) => t("Delete"),
-  analyticsName: "Delete revision",
-  icon: <TrashIcon />,
-  section: RevisionSection,
-  dangerous: true,
-  visible: ({ activeDocumentId }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ t, event, location, activeDocumentId }) => {
-    event?.preventDefault();
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-    if (revisionId) {
-      const revision = stores.revisions.get(revisionId);
-      await revision?.delete();
-      toast.success(t("This version of the document was deleted"));
-      history.push(documentHistoryPath(document));
-    }
-  },
-});
-
-export const copyLinkToRevision = createActionV2({
-  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,46 +1,45 @@
 import { SunIcon, MoonIcon, BrowserIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
 import { Theme } from "~/stores/UiStore";
-import { createActionV2, createActionV2WithChildren } from "~/actions";
+import { createAction } from "~/actions";
 import { SettingsSection } from "~/actions/sections";
 
-export const changeToDarkTheme = createActionV2({
+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 }) => stores.ui.theme === "dark",
-  perform: ({ stores }) => stores.ui.setTheme(Theme.Dark),
+  selected: () => stores.ui.theme === "dark",
+  perform: () => stores.ui.setTheme(Theme.Dark),
 });
 
-export const changeToLightTheme = createActionV2({
+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 }) => stores.ui.theme === "light",
-  perform: ({ stores }) => stores.ui.setTheme(Theme.Light),
+  selected: () => stores.ui.theme === "light",
+  perform: () => stores.ui.setTheme(Theme.Light),
 });
 
-export const changeToSystemTheme = createActionV2({
+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 }) => stores.ui.theme === "system",
-  perform: ({ stores }) => stores.ui.setTheme(Theme.System),
+  selected: () => stores.ui.theme === "system",
+  perform: () => stores.ui.setTheme(Theme.System),
 });
 
-export const changeTheme = createActionV2WithChildren({
-  name: ({ t, isMenu }) => (isMenu ? t("Appearance") : t("Change theme")),
-  analyticsName: "Change theme",
+export const changeTheme = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Appearance") : t("Change theme"),
   placeholder: ({ t }) => t("Change theme to"),
-  icon: ({ stores }) =>
+  icon: () =>
     stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,
   keywords: "appearance display",
   section: SettingsSection,

app/actions/definitions/shares.tsx

@@ -1,59 +0,0 @@
-import copy from "copy-to-clipboard";
-import Share from "~/models/Share";
-import { createActionV2, createInternalLinkActionV2 } from "..";
-import { ArrowIcon, CopyIcon, TrashIcon } from "outline-icons";
-import { ShareSection } from "../sections";
-import env from "~/env";
-import { toast } from "sonner";
-
-export const copyShareUrlFactory = ({ share }: { share: Share }) =>
-  createActionV2({
-    name: ({ t }) => t("Copy link"),
-    analyticsName: "Copy share link",
-    section: ShareSection,
-    icon: <CopyIcon />,
-    perform: ({ t }) => {
-      copy(share.url, {
-        debug: env.ENVIRONMENT !== "production",
-        format: "text/plain",
-      });
-      toast.success(t("Share link copied"));
-    },
-  });
-
-export const goToShareSourceFactory = ({ share }: { share: Share }) =>
-  createInternalLinkActionV2({
-    name: ({ t }) =>
-      share.collectionId ? t("Go to collection") : t("Go to document"),
-    analyticsName: "Go to share source",
-    section: ShareSection,
-    icon: <ArrowIcon />,
-    to: {
-      pathname: share.sourcePathWithFallback,
-      state: { sidebarContext: "collections" }, // optimistic preference of "collections"
-    },
-  });
-
-export const revokeShareFactory = ({
-  share,
-  can,
-}: {
-  share: Share;
-  can: Record<string, boolean>;
-}) =>
-  createActionV2({
-    name: ({ t }) => t("Revoke link"),
-    analyticsName: "Revoke share",
-    section: ShareSection,
-    icon: <TrashIcon />,
-    dangerous: true,
-    visible: !!can.revoke,
-    perform: async ({ t, stores }) => {
-      try {
-        await stores.shares.revoke(share);
-        toast.message(t("Share link revoked"));
-      } catch (err) {
-        toast.error(err.message);
-      }
-    },
-  });

app/actions/definitions/teams.tsx

@@ -1,100 +0,0 @@
-import { ArrowIcon, PlusIcon } from "outline-icons";
-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 {
-  createActionV2,
-  createActionV2WithChildren,
-  createExternalLinkActionV2,
-} from "~/actions";
-import { ActionContext, ExternalLinkActionV2 } from "~/types";
-import Desktop from "~/utils/Desktop";
-import { TeamSection } from "../sections";
-
-export const switchTeamsList = ({ stores }: { stores: RootStore }) =>
-  stores.auth.availableTeams?.map<ExternalLinkActionV2>((session) =>
-    createExternalLinkActionV2({
-      id: `switch-${session.id}`,
-      name: session.name,
-      analyticsName: "Switch workspace",
-      section: TeamSection,
-      keywords: "change switch workspace organization team",
-      icon: (
-        <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,
-      url: session.url,
-      target: "_self",
-    })
-  ) ?? [];
-
-export const switchTeam = createActionV2WithChildren({
-  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 = createActionV2({
-  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;
-    if (user) {
-      stores.dialogs.openModal({
-        title: t("Create a workspace"),
-        content: <TeamNew user={user} />,
-      });
-    }
-  },
-});
-
-export const desktopLoginTeam = createActionV2({
-  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,91 +1,23 @@
 import { PlusIcon } from "outline-icons";
-import { UserRole } from "@shared/types";
-import { UserRoleHelper } from "@shared/utils/UserRoleHelper";
+import * as React from "react";
 import stores from "~/stores";
-import User from "~/models/User";
 import Invite from "~/scenes/Invite";
-import {
-  UserChangeRoleDialog,
-  UserDeleteDialog,
-} from "~/components/UserDialogs";
-import { createAction, createActionV2 } from "~/actions";
+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",
+  keywords: "team member user",
   section: UserSection,
-  visible: () =>
+  visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
   perform: ({ t }) => {
     stores.dialogs.openModal({
-      title: t("Invite to workspace"),
+      title: t("Invite people"),
       content: <Invite onSubmit={stores.dialogs.closeAllModals} />,
     });
   },
 });
 
-export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
-  createActionV2({
-    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) =>
-  createActionV2({
-    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,452 +1,114 @@
-import { LocationDescriptor } from "history";
-import flattenDeep from "lodash/flattenDeep";
-import { toast } from "sonner";
-import { Optional } from "utility-types";
+import { flattenDeep } from "lodash";
+import * as React from "react";
+import { $Diff } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
   Action,
   ActionContext,
-  ActionV2,
-  ActionV2Group,
-  ActionV2Separator as TActionV2Separator,
-  ActionV2Variant,
-  ActionV2WithChildren,
-  ExternalLinkActionV2,
-  InternalLinkActionV2,
-  MenuExternalLink,
-  MenuInternalLink,
-  MenuItem,
+  CommandBarAction,
   MenuItemButton,
   MenuItemWithChildren,
 } from "~/types";
-import Analytics from "~/utils/Analytics";
-import history from "~/utils/history";
-import { Action as KbarAction } from "kbar";
 
-export function resolve<T>(value: any, context: ActionContext): T {
-  return typeof value === "function" ? value(context) : value;
-}
-
-export function createAction(definition: Optional<Action, "id">): Action {
+export function createAction(
+  definition: $Diff<
+    Action,
+    {
+      id?: string;
+    }
+  >
+): Action {
   return {
+    id: uuidv4(),
     ...definition,
-    perform: definition.perform
-      ? (context) => {
-          // We must 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 | MenuExternalLink | MenuInternalLink | MenuItemWithChildren {
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon, context);
-  const resolvedChildren = resolve<Action[]>(action.children, context);
+): MenuItemButton | MenuItemWithChildren {
+  function resolve<T>(value: any): T {
+    if (typeof value === "function") {
+      return value(context);
+    }
+
+    return value;
+  }
+
+  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon);
+  const resolvedChildren = resolve<Action[]>(action.children);
   const visible = action.visible ? action.visible(context) : true;
-  const title = resolve<string>(action.name, context);
+  const title = resolve<string>(action.name);
   const icon =
     resolvedIcon && action.iconInContextMenu !== false
-      ? resolvedIcon
+      ? React.cloneElement(resolvedIcon, {
+          color: "currentColor",
+        })
       : 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,
+      items: resolvedChildren
+        .map((a) => actionToMenuItem(a, context))
+        .filter((a) => !!a),
+      visible,
     };
   }
 
-  if (action.to) {
-    return typeof action.to === "string"
-      ? {
-          type: "route",
-          title,
-          icon,
-          visible,
-          to: action.to,
-          selected: action.selected?.(context),
-        }
-      : {
-          type: "link",
-          title,
-          icon,
-          visible,
-          href: action.to,
-          selected: action.selected?.(context),
-        };
-  }
-
   return {
     type: "button",
     title,
     icon,
     visible,
-    dangerous: action.dangerous,
-    onClick: () => performAction(action, context),
-    selected: action.selected?.(context),
+    onClick: () => action.perform && action.perform(context),
+    selected: action.selected ? action.selected(context) : undefined,
   };
 }
 
 export function actionToKBar(
   action: Action,
   context: ActionContext
-): KbarAction[] {
+): CommandBarAction[] {
+  function resolve<T>(value: any): T {
+    if (typeof value === "function") {
+      return value(context);
+    }
+
+    return value;
+  }
+
   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 resolvedIcon = resolve<React.ReactElement<any>>(action.icon);
+  const resolvedChildren = resolve<Action[]>(action.children);
+  const resolvedSection = resolve<string>(action.section);
+  const resolvedName = resolve<string>(action.name);
+  const resolvedPlaceholder = resolve<string>(action.placeholder);
   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 ?? "",
+      keywords: `${action.keywords}`,
       shortcut: action.shortcut || [],
       icon: resolvedIcon,
-      priority: (1 + (action.priority ?? 0)) * (1 + (sectionPriority ?? 0)),
-      perform:
-        action.perform || action.to
-          ? () => performAction(action, context)
-          : undefined,
+      perform: action.perform
+        ? () => action.perform && action.perform(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
-    ? action.perform(context)
-    : action.to
-      ? typeof action.to === "string"
-        ? history.push(action.to)
-        : window.open(action.to.url, action.to.target)
-      : undefined;
-
-  if (result instanceof Promise) {
-    return result.catch((err: Error) => {
-      toast.error(err.message);
-    });
-  }
-
-  return result;
-}
-
-/** Actions V2 */
-
-export const ActionV2Separator: TActionV2Separator = {
-  type: "action_separator",
-};
-
-export function createActionV2(
-  definition: Optional<Omit<ActionV2, "type" | "variant">, "id">
-): ActionV2 {
-  return {
-    ...definition,
-    type: "action",
-    variant: "action",
-    perform: definition.perform
-      ? (context) => {
-          // We must 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);
-        }
-      : () => {},
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createInternalLinkActionV2(
-  definition: Optional<Omit<InternalLinkActionV2, "type" | "variant">, "id">
-): InternalLinkActionV2 {
-  return {
-    ...definition,
-    type: "action",
-    variant: "internal_link",
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createExternalLinkActionV2(
-  definition: Optional<Omit<ExternalLinkActionV2, "type" | "variant">, "id">
-): ExternalLinkActionV2 {
-  return {
-    ...definition,
-    type: "action",
-    variant: "external_link",
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createActionV2WithChildren(
-  definition: Optional<Omit<ActionV2WithChildren, "type" | "variant">, "id">
-): ActionV2WithChildren {
-  return {
-    ...definition,
-    type: "action",
-    variant: "action_with_children",
-    id: definition.id ?? uuidv4(),
-  };
-}
-
-export function createActionV2Group(
-  definition: Omit<ActionV2Group, "type">
-): ActionV2Group {
-  return {
-    ...definition,
-    type: "action_group",
-  };
-}
-
-export function createRootMenuAction(
-  actions: (ActionV2Variant | ActionV2Group | TActionV2Separator)[]
-): ActionV2WithChildren {
-  return {
-    id: uuidv4(),
-    type: "action",
-    variant: "action_with_children",
-    name: "root_action",
-    section: "Root",
-    children: actions,
-  };
-}
-
-export function actionV2ToMenuItem(
-  action: ActionV2Variant | ActionV2Group | TActionV2Separator,
-  context: ActionContext
-): MenuItem {
-  switch (action.type) {
-    case "action": {
-      const title = resolve<string>(action.name, context);
-      const visible = resolve<boolean>(action.visible, context) ?? true;
-      const disabled = resolve<boolean>(action.disabled, context);
-      const icon =
-        !!action.icon && action.iconInContextMenu !== false
-          ? resolve<React.ReactNode>(action.icon, context)
-          : undefined;
-
-      switch (action.variant) {
-        case "action":
-          return {
-            type: "button",
-            title,
-            icon,
-            visible,
-            disabled,
-            tooltip: resolve<React.ReactChild>(action.tooltip, context),
-            selected: resolve<boolean>(action.selected, context),
-            dangerous: action.dangerous,
-            onClick: () => performActionV2(action, context),
-          };
-
-        case "internal_link": {
-          const to = resolve<LocationDescriptor>(action.to, context);
-          return {
-            type: "route",
-            title,
-            icon,
-            visible,
-            disabled,
-            to,
-          };
-        }
-
-        case "external_link":
-          return {
-            type: "link",
-            title,
-            icon,
-            visible,
-            disabled,
-            href: action.target
-              ? { url: action.url, target: action.target }
-              : action.url,
-          };
-
-        case "action_with_children": {
-          const children = resolve<
-            (ActionV2Variant | ActionV2Group | TActionV2Separator)[]
-          >(action.children, context);
-          const subMenuItems = children.map((a) =>
-            actionV2ToMenuItem(a, context)
-          );
-          return {
-            type: "submenu",
-            title,
-            icon,
-            items: subMenuItems,
-            disabled,
-            visible: visible && hasVisibleItems(subMenuItems),
-          };
-        }
-
-        default:
-          throw Error("invalid action variant");
-      }
-    }
-
-    case "action_group": {
-      const groupItems = action.actions.map((a) =>
-        actionV2ToMenuItem(a, context)
-      );
-      return {
-        type: "group",
-        title: resolve<string>(action.name, context),
-        visible: hasVisibleItems(groupItems),
-        items: groupItems,
-      };
-    }
-
-    case "action_separator":
-      return { type: "separator" };
-  }
-}
-
-export function actionV2ToKBar(
-  action: ActionV2Variant,
-  context: ActionContext
-): KbarAction[] {
-  const visible = resolve<boolean>(action.visible, context);
-  if (visible === false) {
-    return [];
-  }
-
-  const name = resolve<string>(action.name, context);
-  const icon = resolve<React.ReactElement>(action.icon, context);
-  const section = resolve<string>(action.section, context);
-
-  const sectionPriority =
-    typeof action.section !== "string" && "priority" in action.section
-      ? ((action.section.priority as number) ?? 0)
-      : 0;
-
-  const priority = (1 + (action.priority ?? 0)) * (1 + (sectionPriority ?? 0));
-
-  switch (action.variant) {
-    case "action":
-    case "internal_link":
-    case "external_link": {
-      return [
-        {
-          id: action.id,
-          name,
-          section,
-          keywords: action.keywords,
-          shortcut: action.shortcut,
-          icon,
-          priority,
-          perform: () => performActionV2(action, context),
-        },
-      ];
-    }
-
-    case "action_with_children": {
-      const resolvedChildren = resolve<ActionV2Variant[]>(
-        action.children,
-        context
-      );
-      const children = resolvedChildren
-        .map((a) => actionV2ToKBar(a, context))
-        .flat()
-        .filter(Boolean);
-
-      return [
-        {
-          id: action.id,
-          name,
-          section,
-          keywords: action.keywords,
-          shortcut: action.shortcut,
-          icon,
-          priority,
-        },
-        ...children.map((child) => ({
-          ...child,
-          parent: child.parent ?? action.id,
-        })),
-      ];
-    }
-
-    default:
-      throw Error("invalid action variant");
-  }
-}
-
-export async function performActionV2(
-  action: Exclude<ActionV2Variant, ActionV2WithChildren>,
-  context: ActionContext
-) {
-  const perform =
-    action.variant === "action"
-      ? () => action.perform(context)
-      : action.variant === "internal_link"
-        ? () => history.push(resolve<LocationDescriptor>(action.to, context))
-        : () => window.open(action.url, action.target);
-
-  const result = perform();
-
-  if (result instanceof Promise) {
-    return result.catch((err: Error) => {
-      toast.error(err.message);
-    });
-  }
-
-  return result;
-}
-
-function hasVisibleItems(items: MenuItem[]) {
-  const applicableTypes = ["button", "link", "route", "group", "submenu"];
-  return items.some(
-    (item) => applicableTypes.includes(item.type) && item.visible
-  );
+  ].concat(children.map((child) => ({ ...child, parent: action.id })));
 }

app/actions/root.ts

@@ -1,11 +1,8 @@
 import { rootCollectionActions } from "./definitions/collections";
-import { rootDeveloperActions } from "./definitions/developer";
+import { rootDebugActions } from "./definitions/debug";
 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 [
@@ -13,9 +10,6 @@ export default [
   ...rootDocumentActions,
   ...rootUserActions,
   ...rootNavigationActions,
-  ...rootNotificationActions,
-  ...rootRevisionActions,
   ...rootSettingsActions,
-  ...rootDeveloperActions,
-  ...rootTeamActions,
+  ...rootDebugActions,
 ];

app/actions/sections.ts

@@ -2,53 +2,12 @@ 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 DebugSection = ({ 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 GroupSection = ({ t }: ActionContext) => t("Groups");
-
 export const UserSection = ({ t }: ActionContext) => t("People");
-
-UserSection.priority = 0.5;
-
-export const ShareSection = ({ t }: ActionContext) => t("Share");
-
-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,90 +0,0 @@
-/* oxlint-disable react/prop-types */
-import * as React from "react";
-import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
-import { performAction, performActionV2, resolve } from "~/actions";
-import useIsMounted from "~/hooks/useIsMounted";
-import { Action, ActionV2Variant, ActionV2WithChildren } from "~/types";
-import useActionContext from "~/hooks/useActionContext";
-
-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 | Exclude<ActionV2Variant, ActionV2WithChildren>;
-  /** 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, tooltip, hideOnActionDisabled, ...rest }: Props,
-    ref: React.Ref<HTMLButtonElement>
-  ) {
-    const actionContext = useActionContext({
-      isButton: true,
-    });
-    const isMounted = useIsMounted();
-    const [executing, setExecuting] = React.useState(false);
-    const disabled = rest.disabled;
-
-    if (!actionContext || !action) {
-      return <button {...rest} ref={ref} />;
-    }
-
-    if (
-      action.visible &&
-      !resolve<boolean>(action.visible, actionContext) &&
-      hideOnActionDisabled
-    ) {
-      return null;
-    }
-
-    const label =
-      rest["aria-label"] ??
-      (typeof action.name === "function"
-        ? action.name(actionContext)
-        : action.name);
-
-    const button = (
-      <button
-        {...rest}
-        aria-label={label}
-        disabled={disabled || executing}
-        ref={ref}
-        onClick={
-          actionContext
-            ? (ev) => {
-                ev.preventDefault();
-                ev.stopPropagation();
-                const response =
-                  "variant" in action
-                    ? performActionV2(action, actionContext)
-                    : 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.ts

@@ -1,11 +1,11 @@
 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;
@@ -17,9 +17,10 @@ export const Action = styled(Flex)`
 
 export const Separator = styled.div`
   flex-shrink: 0;
+  margin-left: 12px;
   width: 1px;
   height: 28px;
-  background: ${s("divider")};
+  background: ${(props) => props.theme.divider};
 `;
 
 const Actions = styled(Flex)`
@@ -28,10 +29,10 @@ const Actions = styled(Flex)`
   right: 0;
   left: 0;
   border-radius: 3px;
-  background: ${s("background")};
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
   padding: 12px;
   backdrop-filter: blur(20px);
-  gap: 12px;
 
   @media print {
     display: none;

app/components/Analytics.ts

@@ -0,0 +1,45 @@
+/* global ga */
+import * as React from "react";
+import env from "~/env";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+export default class Analytics extends React.Component<Props> {
+  componentDidMount() {
+    if (!env.GOOGLE_ANALYTICS_ID) {
+      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("set", {
+      dimension1: "true",
+    });
+    ga("send", "pageview");
+    const script = document.createElement("script");
+    script.src = "https://www.google-analytics.com/analytics.js";
+    script.async = true;
+
+    // Track PWA install event
+    window.addEventListener("appinstalled", () => {
+      ga("send", "event", "pwa", "install");
+    });
+
+    if (document.body) {
+      document.body.appendChild(script);
+    }
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}

app/components/Analytics.tsx

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

app/components/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/AuthLogo/GoogleLogo.tsx

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

app/components/AuthLogo/MicrosoftLogo.tsx

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

app/components/AuthLogo/SlackLogo.tsx

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

app/components/AuthLogo/index.tsx

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

app/components/Authenticated.tsx

@@ -1,11 +1,12 @@
 import { observer } from "mobx-react";
-import { useEffect } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import useCurrentUser from "~/hooks/useCurrentUser";
+import { isCustomSubdomain } from "@shared/utils/domains";
+import LoadingIndicator from "~/components/LoadingIndicator";
+import env from "~/env";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
-import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
   children: JSX.Element;
@@ -14,29 +15,43 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
   const { auth } = useStores();
   const { i18n } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const language = user?.language;
+  const language = auth.user && auth.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
-  useEffect(() => {
-    void changeLanguage(language, i18n);
+  // 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(() => {
+    changeLanguage(language, i18n);
   }, [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;
   }
 
-  if (auth.isFetching) {
-    return <LoadingIndicator />;
-  }
-
-  void auth.logout({ savePath: true });
-
-  if (auth.logoutRedirectUri) {
-    window.location.href = auth.logoutRedirectUri;
-    return null;
-  }
+  auth.logout(true);
   return <Redirect to="/" />;
 };
 

app/components/AuthenticatedLayout.tsx

@@ -1,142 +1,106 @@
-import { AnimatePresence } from "framer-motion";
+import { observable } from "mobx";
 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 { withTranslation, WithTranslation } from "react-i18next";
+import { Switch, Route } from "react-router-dom";
+import RootStore from "~/stores/RootStore";
+import ErrorSuspended from "~/scenes/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
 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,
+  searchUrl,
+  matchDocumentSlug as slug,
   newDocumentPath,
   settingsPath,
-  matchDocumentHistory,
-  matchDocumentSlug as slug,
 } from "~/utils/routeHelpers";
-import { DocumentContextProvider } from "./DocumentContext";
-import Fade from "./Fade";
-import { PortalContext } from "./Portal";
+import withStores from "./withStores";
 
-const DocumentComments = lazyWithRetry(
-  () => import("~/scenes/Document/components/Comments")
+const DocumentHistory = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "document-history" */
+      "~/components/DocumentHistory"
+    )
 );
-const DocumentHistory = lazyWithRetry(
-  () => import("~/scenes/Document/components/History")
+const CommandBar = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "command-bar" */
+      "~/components/CommandBar"
+    )
 );
 
-const CommandBar = lazyWithRetry(() => import("~/components/CommandBar"));
+type Props = WithTranslation &
+  RootStore & {
+    children?: React.ReactNode;
+  };
 
-type Props = {
-  children?: React.ReactNode;
-};
+@observer
+class AuthenticatedLayout extends React.Component<Props> {
+  scrollable: HTMLDivElement | null | undefined;
 
-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();
+  @observable
+  keyboardShortcutsOpen = false;
 
-  const goToSearch = (ev: KeyboardEvent) => {
+  goToSearch = (ev: KeyboardEvent) => {
     if (!ev.metaKey && !ev.ctrlKey) {
       ev.preventDefault();
       ev.stopPropagation();
-      history.push(searchPath());
+      history.push(searchUrl());
     }
   };
 
-  const goToNewDocument = (event: KeyboardEvent) => {
-    if (event.metaKey || event.altKey) {
+  goToNewDocument = () => {
+    const { activeCollectionId } = this.props.ui;
+    if (!activeCollectionId) {
       return;
     }
-    const { activeCollectionId } = ui;
-    if (!activeCollectionId || !canCollection.createDocument) {
+    const can = this.props.policies.abilities(activeCollectionId);
+    if (!can.update) {
       return;
     }
     history.push(newDocumentPath(activeCollectionId));
   };
 
-  if (auth.isSuspended) {
-    return <ErrorSuspended />;
-  }
+  render() {
+    const { auth } = this.props;
+    const { user, team } = auth;
+    const showSidebar = auth.authenticated && user && team;
+    if (auth.isSuspended) {
+      return <ErrorSuspended />;
+    }
 
-  const postLoginPath = spendPostLoginPath();
-  if (postLoginPath) {
-    return <Redirect to={postLoginPath} />;
-  }
-
-  const sidebar = (
-    <Fade>
+    const sidebar = showSidebar ? (
       <Switch>
         <Route path={settingsPath()} component={SettingsSidebar} />
         <Route component={Sidebar} />
       </Switch>
-    </Fade>
-  );
+    ) : undefined;
 
-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showComments =
-    !showHistory &&
-    can.comment &&
-    ui.activeDocumentId &&
-    ui.commentsExpanded &&
-    !!team.getPreference(TeamPreference.Commenting);
+    const rightRail = (
+      <React.Suspense fallback={null}>
+        <Switch>
+          <Route
+            path={`/doc/${slug}/history/:revisionId?`}
+            component={DocumentHistory}
+          />
+        </Switch>
+      </React.Suspense>
+    );
 
-  const sidebarRight = (
-    <AnimatePresence
-      initial={false}
-      key={ui.activeDocumentId ? "active" : "inactive"}
-    >
-      {(showHistory || showComments) && (
-        <Route path={`/doc/${slug}`}>
-          <React.Suspense fallback={null}>
-            {showHistory && <DocumentHistory />}
-            {showComments && <DocumentComments />}
-          </React.Suspense>
-        </Route>
-      )}
-    </AnimatePresence>
-  );
+    return (
+      <Layout title={team?.name} sidebar={sidebar} rightRail={rightRail}>
+        <RegisterKeyDown trigger="n" handler={this.goToNewDocument} />
+        <RegisterKeyDown trigger="t" handler={this.goToSearch} />
+        <RegisterKeyDown trigger="/" handler={this.goToSearch} />
+        {this.props.children}
+        <CommandBar />
+      </Layout>
+    );
+  }
+}
 
-  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);
+export default withTranslation()(withStores(AuthenticatedLayout));

app/components/Avatar/Avatar.tsx

@@ -1,99 +1,71 @@
+import { observable } from "mobx";
+import { observer } from "mobx-react";
 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;
-}
+import User from "~/models/User";
+import placeholder from "./placeholder.png";
 
 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 */
+  src: string;
+  size: number;
+  icon?: React.ReactNode;
+  user?: User;
   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,
-    className,
-    ...rest
-  } = props;
-  const src = props.src || model?.avatarUrl;
-  const [error, handleError] = useBoolean(false);
+@observer
+class Avatar extends React.Component<Props> {
+  @observable
+  error: boolean;
 
-  return (
-    <Relative
-      style={style}
-      $variant={variant}
-      $size={props.size}
-      className={className}
-    >
-      {src && !error ? (
-        <Image onError={handleError} src={src} {...rest} />
-      ) : model ? (
-        <Initials color={model.color} {...rest}>
-          {model.initial}
-        </Initials>
-      ) : (
-        <Initials {...rest} />
-      )}
-    </Relative>
-  );
+  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>
+    );
+  }
 }
 
-Avatar.defaultProps = {
-  size: AvatarSize.Medium,
-};
-
-const Relative = styled.div<{ $variant: AvatarVariant; $size: AvatarSize }>`
+const AvatarWrapper = styled.div`
   position: relative;
-  user-select: none;
-  flex-shrink: 0;
-  border-radius: ${(props) =>
-    props.$variant === AvatarVariant.Round ? "50%" : `${props.$size / 8}px`};
-  overflow: hidden;
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
 `;
 
-const Image = styled.img<{ size: number }>`
+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<{ size: number }>`
   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/AvatarWithPresence.tsx

@@ -1,166 +1,141 @@
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { s } from "@shared/styles";
 import User from "~/models/User";
+import UserProfile from "~/scenes/UserProfile";
+import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
-import Avatar, { AvatarSize } from "./Avatar";
 
-/**
- * Props for the AvatarWithPresence component
- */
-type Props = {
-  /** The user to display the avatar for */
+type Props = WithTranslation & {
   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 */
+  profileOnClick: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
-  /** Size of the avatar, defaults to AvatarSize.Large */
-  size?: AvatarSize;
-  /** Optional alt text for the avatar image */
-  alt?: string;
-  /** 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,
-  alt,
-}: Props) {
-  const { t } = useTranslation();
-  const status = isPresent
-    ? isEditing
-      ? t("currently editing")
-      : t("currently viewing")
-    : t("previously edited");
+@observer
+class AvatarWithPresence extends React.Component<Props> {
+  @observable
+  isOpen = false;
 
-  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}
+  handleOpenProfile = () => {
+    this.isOpen = true;
+  };
+
+  handleCloseProfile = () => {
+    this.isOpen = false;
+  };
+
+  render() {
+    const {
+      onClick,
+      user,
+      isPresent,
+      isEditing,
+      isObserving,
+      isCurrentUser,
+      t,
+    } = this.props;
+    const status = isPresent
+      ? isEditing
+        ? t("currently editing")
+        : t("currently viewing")
+      : t("previously edited");
+
+    return (
+      <>
+        <Tooltip
+          tooltip={
+            <Centered>
+              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
+              {status && (
+                <>
+                  <br />
+                  {status}
+                </>
+              )}
+            </Centered>
+          }
+          placement="bottom"
         >
-          <Avatar model={user} onClick={onClick} size={size} alt={alt} />
-        </AvatarPresence>
-      </Tooltip>
-    </>
-  );
+          <AvatarWrapper
+            $isPresent={isPresent}
+            $isObserving={isObserving}
+            $color={user.color}
+          >
+            <Avatar
+              src={user.avatarUrl}
+              onClick={
+                this.props.profileOnClick === false
+                  ? onClick
+                  : this.handleOpenProfile
+              }
+              size={32}
+            />
+          </AvatarWrapper>
+        </Tooltip>
+        {this.props.profileOnClick && (
+          <UserProfile
+            user={user}
+            isOpen={this.isOpen}
+            onRequestClose={this.handleCloseProfile}
+          />
+        )}
+      </>
+    );
+  }
 }
 
-/**
- * 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 */
+const AvatarWrapper = styled.div<{
   $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;
+  &: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};
+    ${(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 {
+          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")};
-      }
-    `}
+  &:hover:after {
+    border: 2px solid ${(props) => props.$color};
+    box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
+  }
 `;
 
-export default observer(AvatarWithPresence);
+export default withTranslation()(AvatarWithPresence);

app/components/Avatar/GroupAvatar.tsx

@@ -1,34 +0,0 @@
-import { GroupIcon } from "outline-icons";
-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.ts

@@ -1,7 +1,6 @@
-import Avatar, { IAvatar, AvatarSize, AvatarVariant } from "./Avatar";
+import Avatar from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
-import { GroupAvatar } from "./GroupAvatar";
 
-export { Avatar, GroupAvatar, AvatarSize, AvatarVariant, AvatarWithPresence };
+export { AvatarWithPresence };
 
-export type { IAvatar };
+export default Avatar;

app/components/Badge.ts

@@ -5,13 +5,9 @@ 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"};
+    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
   color: ${({ primary, yellow, theme }) =>
-    primary
-      ? theme.accentText
-      : yellow
-        ? theme.almostBlack
-        : theme.textTertiary};
+    primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
   border: 1px solid
     ${({ primary, yellow, theme }) =>
       primary || yellow

app/components/Branding.tsx

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

app/components/Breadcrumb.tsx

@@ -2,93 +2,51 @@ 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 { InternalLinkActionV2, MenuInternalLink } from "~/types";
-import { actionV2ToMenuItem } from "~/actions";
-import useActionContext from "~/hooks/useActionContext";
-import { useComputed } from "~/hooks/useComputed";
+import { MenuInternalLink } from "~/types";
 
-type TopLevelAction =
-  | InternalLinkActionV2
-  | { type: "menu"; actions: InternalLinkActionV2[] };
-
-type Props = React.PropsWithChildren<{
-  actions: InternalLinkActionV2[];
+type Props = {
+  items: MenuInternalLink[];
   max?: number;
+  children?: React.ReactNode;
   highlightFirstItem?: boolean;
-}>;
+};
 
-function Breadcrumb(
-  { actions, highlightFirstItem, children, max = 2 }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
-  const actionContext = useActionContext({ isMenu: true });
-
-  const visibleActions = useComputed(
-    () =>
-      actions.filter((action) =>
-        typeof action.visible === "function"
-          ? action.visible(actionContext)
-          : (action.visible ?? true)
-      ),
-    [actions, actionContext]
-  );
-  const totalVisibleActions = visibleActions.length;
-
-  const topLevelActions: TopLevelAction[] = [...visibleActions];
+function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
+  const totalItems = items.length;
+  const topLevelItems: MenuInternalLink[] = [...items];
+  let overflowItems;
 
   // chop middle breadcrumbs and present a "..." menu instead
-  if (totalVisibleActions > max) {
+  if (totalItems > max) {
     const halfMax = Math.floor(max / 2);
-    const menuActions = topLevelActions.splice(
-      halfMax,
-      totalVisibleActions - max
-    ) as InternalLinkActionV2[];
+    overflowItems = topLevelItems.splice(halfMax, totalItems - max);
 
-    topLevelActions.splice(halfMax, 0, {
-      type: "menu",
-      actions: menuActions,
+    topLevelItems.splice(halfMax, 0, {
+      to: "",
+      type: "route",
+      title: <BreadcrumbMenu items={overflowItems as MenuInternalLink[]} />,
     });
   }
 
-  const toBreadcrumb = React.useCallback(
-    (action: TopLevelAction, index: number) => {
-      if (action.type === "menu") {
-        return <BreadcrumbMenu key="menu" actions={action.actions} />;
-      }
-
-      const item = actionV2ToMenuItem(
-        action,
-        actionContext
-      ) as MenuInternalLink;
-
-      return (
-        <>
-          {item.icon}
-          <Item
-            to={item.to}
-            $withIcon={!!item.icon}
-            $highlight={!!highlightFirstItem && index === 0}
-          >
-            {item.title}
-          </Item>
-        </>
-      );
-    },
-    [actionContext, highlightFirstItem]
-  );
-
   return (
-    <Flex justify="flex-start" align="center" ref={ref}>
-      {topLevelActions.map((action, index) => (
-        <React.Fragment key={action.type === "menu" ? "menu" : `item-${index}`}>
-          {toBreadcrumb(action, index)}
-          {index !== topLevelActions.length - 1 || !!children ? (
-            <Slash />
-          ) : null}
+    <Flex justify="flex-start" align="center">
+      {topLevelItems.map((item, index) => (
+        <React.Fragment key={item.to || index}>
+          {item.icon}
+          {item.to ? (
+            <Item
+              to={item.to}
+              $withIcon={!!item.icon}
+              $highlight={!!highlightFirstItem && index === 0}
+            >
+              {item.title}
+            </Item>
+          ) : (
+            item.title
+          )}
+          {index !== topLevelItems.length - 1 || !!children ? <Slash /> : null}
         </React.Fragment>
       ))}
       {children}
@@ -98,20 +56,19 @@ function Breadcrumb(
 
 const Slash = styled(GoToIcon)`
   flex-shrink: 0;
-  fill: ${s("divider")};
+  fill: ${(props) => props.theme.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")};
+  color: ${(props) => props.theme.text};
   font-size: 15px;
   height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
   margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
 
@@ -124,4 +81,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   }
 `;
 
-export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
+export default Breadcrumb;

app/components/Bubble.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import styled from "styled-components";
+import { bounceIn } from "~/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.tsx

@@ -1,56 +1,55 @@
-import { LocationDescriptor } from "history";
-import { DisclosureIcon } from "outline-icons";
-import { darken, lighten, transparentize } from "polished";
+import { ExpandedIcon } from "outline-icons";
+import { darken, lighten } 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;
+const RealButton = styled.button<{
+  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")};
+  danger?: boolean;
+  iconColor?: string;
+}>`
+  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")};
+  background: ${(props) => props.theme.buttonBackground};
+  color: ${(props) => props.theme.buttonText};
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 6px;
+  border-radius: 4px;
   font-size: 14px;
   font-weight: 500;
   height: 32px;
   text-decoration: none;
   flex-shrink: 0;
-  cursor: var(--pointer);
+  cursor: pointer;
   user-select: none;
   appearance: none !important;
-  ${undraggableOnDesktop()}
+
+  ${(props) =>
+    !props.borderOnHover &&
+    `
+      svg {
+        fill: ${props.iconColor || "currentColor"};
+      }
+    `}
 
   &::-moz-focus-inner {
     padding: 0;
     border: 0;
   }
 
-  &:hover:not(:disabled),
-  &[aria-expanded="true"] {
-    background: ${(props) => darken(0.05, props.theme.accent)};
+  &:hover:not(:disabled) {
+    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
   }
 
   &:disabled {
     cursor: default;
     pointer-events: none;
-    color: ${(props) => transparentize(0.3, props.theme.accentText)};
-    background: ${(props) => transparentize(0.1, props.theme.accent)};
+    color: ${(props) => props.theme.white50};
+    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};
 
     svg {
       fill: ${(props) => props.theme.white50};
@@ -60,18 +59,26 @@ const RealButton = styled(ActionButton)<RealProps>`
   ${(props) =>
     props.$neutral &&
     `
-    background: inherit;
+    background: ${props.theme.buttonNeutralBackground};
     color: ${props.theme.buttonNeutralText};
     box-shadow: ${
-      props.$borderOnHover
+      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"] {
+    ${
+      props.borderOnHover
+        ? ""
+        : `svg {
+      fill: ${props.iconColor || "currentColor"};
+    }`
+    }
+
+
+    &:hover:not(:disabled) {
       background: ${
-        props.$borderOnHover
+        props.borderOnHover
           ? props.theme.buttonNeutralBackground
           : darken(0.05, props.theme.buttonNeutralBackground)
       };
@@ -80,10 +87,6 @@ const RealButton = styled(ActionButton)<RealProps>`
       } 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;
@@ -95,22 +98,17 @@ const RealButton = styled(ActionButton)<RealProps>`
   `}
 
   ${(props) =>
-    props.$danger &&
+    props.danger &&
     `
       background: ${props.theme.danger};
       color: ${props.theme.white};
 
-      &:hover:not(:disabled),
-      &[aria-expanded="true"] {
+      &:hover:not(:disabled) {
         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;
+        background: none;
       }
   `};
 `;
@@ -140,17 +138,18 @@ export const Inner = styled.span<{
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
-export type Props<T> = ActionButtonProps & {
+export type Props<T> = {
   icon?: React.ReactNode;
+  iconColor?: string;
   children?: React.ReactNode;
   disclosure?: boolean;
   neutral?: boolean;
   danger?: boolean;
+  primary?: boolean;
   fullwidth?: boolean;
   as?: T;
-  to?: LocationDescriptor;
+  to?: string;
   borderOnHover?: boolean;
-  hideIcon?: boolean;
   href?: string;
   "data-on"?: string;
   "data-event-category"?: string;
@@ -161,46 +160,19 @@ 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;
+  const { type, icon, children, value, disclosure, neutral, ...rest } = props;
+  const hasText = children !== undefined || value !== undefined;
+  const hasIcon = icon !== undefined;
 
   return (
-    <RealButton
-      type={type || "button"}
-      ref={ref}
-      $neutral={neutral}
-      action={action}
-      $danger={danger}
-      $fullwidth={fullwidth}
-      $borderOnHover={borderOnHover}
-      {...rest}
-    >
+    <RealButton type={type || "button"} ref={ref} $neutral={neutral} {...rest}>
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && ic}
+        {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <StyledDisclosureIcon />}
+        {disclosure && <ExpandedIcon color="currentColor" />}
       </Inner>
     </RealButton>
   );
 };
 
-const StyledDisclosureIcon = styled(DisclosureIcon)`
-  opacity: 0.8;
-`;
-
 export default React.forwardRef(Button);

app/components/ButtonLink.tsx

@@ -1,6 +1,18 @@
+import * as React from "react";
 import styled from "styled-components";
 
-const ButtonLink = styled.button`
+type Props = {
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  children: React.ReactNode;
+};
+
+const ButtonLink = React.forwardRef(
+  (props: Props, ref: React.Ref<HTMLButtonElement>) => {
+    return <Button {...props} ref={ref} />;
+  }
+);
+
+const Button = styled.button`
   margin: 0;
   padding: 0;
   border: 0;

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.tsx

@@ -4,40 +4,34 @@ import breakpoint from "styled-components-breakpoint";
 
 type Props = {
   children?: React.ReactNode;
-  maxWidth?: string;
   withStickyHeader?: boolean;
 };
 
-const Container = styled.div<Props>`
+const Container = styled.div<{ withStickyHeader?: boolean }>`
   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"};
+    padding: ${(props: any) => (props.withStickyHeader ? "4px 60px" : "60px")};
   `};
 `;
 
-type ContentProps = { $maxWidth?: string };
-
-const Content = styled.div<ContentProps>`
-  max-width: ${(props) => props.$maxWidth ?? "46em"};
+const Content = styled.div`
+  max-width: 46em;
   margin: 0 auto;
 
   ${breakpoint("desktopLarge")`
-    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
+    max-width: 52em;
   `};
 `;
 
-const CenteredContent: React.FC<Props> = ({
-  children,
-  maxWidth,
-  ...rest
-}: Props) => (
-  <Container {...rest}>
-    <Content $maxWidth={maxWidth}>{children}</Content>
-  </Container>
-);
+const CenteredContent = ({ children, ...rest }: Props) => {
+  return (
+    <Container {...rest}>
+      <Content>{children}</Content>
+    </Container>
+  );
+};
 
 export default CenteredContent;

app/components/ChangeLanguage.tsx

@@ -1,17 +0,0 @@
-import { useEffect } 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();
-
-  useEffect(() => {
-    void changeLanguage(locale, i18n);
-  }, [locale, i18n]);
-
-  return null;
-}

app/components/CircularProgressBar.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import styled, { useTheme } from "styled-components";
 
 const cleanPercentage = (percentage: number) => {
@@ -41,7 +42,7 @@ const Circle = ({
       style={{
         transition: "stroke-dashoffset 0.6s ease 0s",
       }}
-    />
+    ></circle>
   );
 };
 
@@ -62,7 +63,7 @@ const CircularProgressBar = ({
         <Circle color={theme.progressBarBackground} offset={offset} />
         {percentage > 0 && (
           <Circle
-            color={theme.accent}
+            color={theme.primary}
             percentage={percentage}
             offset={offset}
           />

app/components/ClickablePadding.ts

@@ -1,12 +1,9 @@
 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;
+const ClickablePadding = styled.div<{ grow?: boolean }>`
+  min-height: 10em;
+  cursor: ${({ onClick }) => (onClick ? "text" : "default")};
+  ${({ grow }) => grow && `flex-grow: 100;`};
 `;
 
 export default ClickablePadding;

app/components/Collaborators.tsx

@@ -1,178 +1,123 @@
-import filter from "lodash/filter";
-import isEqual from "lodash/isEqual";
-import orderBy from "lodash/orderBy";
-import uniq from "lodash/uniq";
+import { sortBy, filter, uniq, isEqual } from "lodash";
 import { observer } from "mobx-react";
-import { useState, useMemo, useEffect, useCallback } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarSize, AvatarWithPresence } from "~/components/Avatar";
+import { AvatarWithPresence } from "~/components/Avatar";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from "~/components/primitives/Popover";
+import Popover from "~/components/Popover";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
 type Props = {
-  /** The document to display live collaborators for */
   document: Document;
-  /** The maximum number of collaborators to display, defaults to 6 */
-  limit?: number;
 };
 
-/**
- * Displays a list of live collaborators for a document, including their avatars
- * and presence status.
- */
 function Collaborators(props: Props) {
-  const { limit = 6 } = props;
   const { t } = useTranslation();
   const user = useCurrentUser();
+  const team = useCurrentTeam();
   const currentUserId = user?.id;
-  const [requestedUserIds, setRequestedUserIds] = useState<string[]>([]);
+  const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
   const { users, presence, ui } = useStores();
   const { document } = props;
-  const { observingUserId } = ui;
   const documentPresence = presence.get(document.id);
-  const documentPresenceArray = useMemo(
-    () => (documentPresence ? Array.from(documentPresence.values()) : []),
-    [documentPresence]
-  );
+  const documentPresenceArray = documentPresence
+    ? Array.from(documentPresence.values())
+    : [];
 
-  // Use Set for O(1) lookups and stable references
-  const presentIds = useMemo(
-    () => new Set(documentPresenceArray.map((p) => p.userId)),
-    [documentPresenceArray]
-  );
-  const editingIds = useMemo(
-    () =>
-      new Set(
-        documentPresenceArray.filter((p) => p.isEditing).map((p) => p.userId)
-      ),
-    [documentPresenceArray]
-  );
+  const presentIds = documentPresenceArray.map((p) => p.userId);
+  const editingIds = documentPresenceArray
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
 
   // ensure currently present via websocket are always ordered first
-  // Memoize collaboratorIds as a Set for efficient lookup
-  const collaboratorIdsSet = useMemo(
-    () => new Set(document.collaboratorIds),
-    [document.collaboratorIds]
-  );
-  const collaborators = useMemo(
+  const collaborators = React.useMemo(
     () =>
-      orderBy(
+      sortBy(
         filter(
-          users.all,
-          (u) =>
-            (presentIds.has(u.id) || collaboratorIdsSet.has(u.id)) &&
-            !u.isSuspended
+          users.orderedData,
+          (user) =>
+            presentIds.includes(user.id) ||
+            document.collaboratorIds.includes(user.id)
         ),
-        [(u) => presentIds.has(u.id), "id"],
-        ["asc", "asc"]
+        (user) => presentIds.includes(user.id)
       ),
-    [collaboratorIdsSet, users.all, presentIds]
+    [document.collaboratorIds, users.orderedData, presentIds]
   );
 
   // load any users we don't yet have in memory
-  // Memoize ids to avoid unnecessary effect executions
-  const missingUserIds = useMemo(
-    () =>
-      uniq([...document.collaboratorIds, ...Array.from(presentIds)])
-        .filter((userId) => !users.get(userId))
-        .sort(),
-    [document.collaboratorIds, presentIds, users]
-  );
+  React.useEffect(() => {
+    const userIdsToFetch = uniq([
+      ...document.collaboratorIds,
+      ...presentIds,
+    ]).filter((userId) => !users.get(userId));
 
-  useEffect(() => {
-    if (
-      !isEqual(requestedUserIds, missingUserIds) &&
-      missingUserIds.length > 0
-    ) {
-      setRequestedUserIds(missingUserIds);
-      void users.fetchPage({ ids: missingUserIds, limit: 100 });
+    if (!isEqual(requestedUserIds, userIdsToFetch)) {
+      setRequestedUserIds(userIdsToFetch);
     }
-  }, [missingUserIds, requestedUserIds, users]);
 
-  // Memoize onClick handler to avoid inline function creation
-  const handleAvatarClick = useCallback(
-    (
-      collaboratorId: string,
-      isPresent: boolean,
-      isObserving: boolean,
-      isObservable: boolean
-    ) =>
-      (ev: React.MouseEvent) => {
-        if (isObservable && isPresent) {
-          ev.preventDefault();
-          ev.stopPropagation();
-          ui.setObservingUser(isObserving ? undefined : collaboratorId);
-        }
-      },
-    [ui]
-  );
+    userIdsToFetch
+      .filter((userId) => requestedUserIds.includes(userId))
+      .forEach((userId) => users.fetch(userId));
+  }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);
 
-  const renderAvatar = useCallback(
-    ({ model: collaborator, ...rest }) => {
-      const isPresent = presentIds.has(collaborator.id);
-      const isEditing = editingIds.has(collaborator.id);
-      const isObserving = observingUserId === collaborator.id;
-      const isObservable = collaborator.id !== currentUserId;
-
-      return (
-        <AvatarWithPresence
-          {...rest}
-          key={collaborator.id}
-          user={collaborator}
-          isPresent={isPresent}
-          isEditing={isEditing}
-          isObserving={isObserving}
-          isCurrentUser={currentUserId === collaborator.id}
-          alt={t("Avatar of {{ name }}", { name: collaborator.name })}
-          onClick={
-            isObservable
-              ? handleAvatarClick(
-                  collaborator.id,
-                  isPresent,
-                  isObserving,
-                  isObservable
-                )
-              : undefined
-          }
-        />
-      );
-    },
-    [presentIds, editingIds, observingUserId, currentUserId, handleAvatarClick]
-  );
-
-  if (!document.insightsEnabled) {
-    return null;
-  }
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom-end",
+  });
 
   return (
-    <Popover>
-      <PopoverTrigger>
-        <NudeButton
-          width={Math.min(collaborators.length, limit) * AvatarSize.Large}
-          height={AvatarSize.Large}
-        >
-          <Facepile
-            size={AvatarSize.Large}
-            limit={limit}
-            overflow={Math.max(0, collaborators.length - limit)}
-            users={collaborators}
-            renderAvatar={renderAvatar}
-          />
-        </NudeButton>
-      </PopoverTrigger>
-      <PopoverContent aria-label={t("Viewers")} side="bottom" align="end">
-        <DocumentViews document={document} />
-      </PopoverContent>
-    </Popover>
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
+            <Facepile
+              users={collaborators}
+              renderAvatar={(collaborator) => {
+                const isPresent = presentIds.includes(collaborator.id);
+                const isEditing = editingIds.includes(collaborator.id);
+                const isObserving = ui.observingUserId === collaborator.id;
+                const isObservable =
+                  team.collaborativeEditing && collaborator.id !== user.id;
+
+                return (
+                  <AvatarWithPresence
+                    key={collaborator.id}
+                    user={collaborator}
+                    isPresent={isPresent}
+                    isEditing={isEditing}
+                    isObserving={isObserving}
+                    isCurrentUser={currentUserId === collaborator.id}
+                    profileOnClick={false}
+                    onClick={
+                      isObservable
+                        ? (ev) => {
+                            if (isPresent) {
+                              ev.preventDefault();
+                              ev.stopPropagation();
+                              ui.setObservingUser(
+                                isObserving ? undefined : collaborator.id
+                              );
+                            }
+                          }
+                        : undefined
+                    }
+                  />
+                );
+              }}
+            />
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </>
   );
 }
 

app/components/Collection/CollectionEdit.tsx

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

app/components/Collection/CollectionForm.tsx

@@ -1,240 +0,0 @@
-import uniq from "lodash/uniq";
-import { observer } from "mobx-react";
-import { useMemo, useEffect, useCallback, Suspense } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { Trans, useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Icon from "@shared/components/Icon";
-import { randomElement } from "@shared/random";
-import { CollectionPermission, TeamPreference } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import { colorPalette } from "@shared/utils/collections";
-import { CollectionValidation } from "@shared/validations";
-import Collection from "~/models/Collection";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
-import Input from "~/components/Input";
-import { InputSelectPermission } from "~/components/InputSelectPermission";
-import { createLazyComponent } from "~/components/LazyLoad";
-import Switch from "~/components/Switch";
-import Text from "~/components/Text";
-import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useStores from "~/hooks/useStores";
-import { EmptySelectValue } from "~/types";
-
-const IconPicker = createLazyComponent(() => import("~/components/IconPicker"));
-
-export interface FormData {
-  name: string;
-  icon: string;
-  color: string | null;
-  sharing: boolean;
-  permission: CollectionPermission | undefined;
-  commenting?: boolean | null;
-}
-
-const useIconColor = (collection?: Collection) => {
-  const { collections } = useStores();
-  const hasMultipleCollections = collections.orderedData.length > 1;
-  const collectionColors = uniq(
-    collections.orderedData.map((c) => c.color).filter(Boolean)
-  ) as string[];
-
-  const iconColor = useMemo(
-    () =>
-      collection?.color ??
-      // If all the existing collections have the same color, use that color,
-      // otherwise pick a random color from the palette
-      (hasMultipleCollections && collectionColors.length === 1
-        ? collectionColors[0]
-        : randomElement(colorPalette)),
-    [collection?.color]
-  );
-  return iconColor;
-};
-
-export const CollectionForm = observer(function CollectionForm_({
-  handleSubmit,
-  collection,
-}: {
-  handleSubmit: (data: FormData) => void;
-  collection?: Collection;
-}) {
-  const team = useCurrentTeam();
-  const { t } = useTranslation();
-
-  const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
-
-  const iconColor = useIconColor(collection);
-  const fallbackIcon = <Icon value="collection" color={iconColor} />;
-
-  const {
-    register,
-    handleSubmit: formHandleSubmit,
-    formState,
-    watch,
-    control,
-    setValue,
-    setFocus,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      name: collection?.name ?? "",
-      icon: collection?.icon,
-      sharing: collection?.sharing ?? true,
-      permission: collection?.permission,
-      commenting: collection?.commenting ?? true,
-      color: iconColor,
-    },
-  });
-
-  const values = watch();
-
-  // Preload the IconPicker component on mount
-  useEffect(() => {
-    void IconPicker.preload();
-  }, []);
-
-  useEffect(() => {
-    // If the user hasn't picked an icon yet, go ahead and suggest one based on
-    // the name of the collection. It's the little things sometimes.
-    if (!hasOpenedIconPicker && !collection) {
-      setValue(
-        "icon",
-        IconLibrary.findIconByKeyword(values.name) ??
-          values.icon ??
-          "collection"
-      );
-    }
-  }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
-
-  useEffect(() => {
-    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
-  }, [setFocus]);
-
-  const handleIconChange = useCallback(
-    (icon: string, color: string) => {
-      if (icon !== values.icon) {
-        setFocus("name");
-      }
-
-      setValue("icon", icon);
-      setValue("color", color);
-    },
-    [setFocus, setValue, values.icon]
-  );
-
-  const initial = values.name.charAt(0).toUpperCase();
-
-  return (
-    <form onSubmit={formHandleSubmit(handleSubmit)}>
-      <Text as="p">
-        <Trans>
-          Collections are used to group documents and choose permissions
-        </Trans>
-      </Text>
-      <Flex gap={8}>
-        <Input
-          type="text"
-          placeholder={t("Name")}
-          {...register("name", {
-            required: true,
-            maxLength: CollectionValidation.maxNameLength,
-          })}
-          prefix={
-            <Suspense fallback={fallbackIcon}>
-              <StyledIconPicker
-                icon={values.icon}
-                color={values.color ?? iconColor}
-                initial={initial}
-                popoverPosition="right"
-                onOpen={setHasOpenedIconPicker}
-                onChange={handleIconChange}
-              />
-            </Suspense>
-          }
-          autoComplete="off"
-          autoFocus
-          flex
-        />
-      </Flex>
-
-      {/* Following controls are available in create flow, but moved elsewhere for edit */}
-      {!collection && (
-        <Controller
-          control={control}
-          name="permission"
-          render={({ field }) => (
-            <InputSelectPermission
-              ref={field.ref}
-              value={field.value}
-              onChange={(
-                value: CollectionPermission | typeof EmptySelectValue
-              ) => {
-                field.onChange(value === EmptySelectValue ? null : value);
-              }}
-              help={t(
-                "The default access for workspace members, you can share with more users or groups later."
-              )}
-            />
-          )}
-        />
-      )}
-
-      {team.sharing && (
-        <Controller
-          control={control}
-          name="sharing"
-          render={({ field }) => (
-            <Switch
-              id="sharing"
-              label={t("Public document sharing")}
-              note={t(
-                "Allow documents within this collection to be shared publicly on the internet."
-              )}
-              checked={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-      )}
-
-      {team.getPreference(TeamPreference.Commenting) && (
-        <Controller
-          control={control}
-          name="commenting"
-          render={({ field }) => (
-            <Switch
-              id="commenting"
-              label={t("Commenting")}
-              note={t("Allow commenting on documents within this collection.")}
-              checked={!!field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-      )}
-
-      <Flex justify="flex-end">
-        <Button
-          type="submit"
-          disabled={formState.isSubmitting || !formState.isValid}
-        >
-          {collection
-            ? formState.isSubmitting
-              ? `${t("Saving")}…`
-              : t("Save")
-            : formState.isSubmitting
-              ? `${t("Creating")}…`
-              : t("Create")}
-        </Button>
-      </Flex>
-    </form>
-  );
-});
-
-const StyledIconPicker = styled(IconPicker.Component)`
-  margin-left: 4px;
-  margin-right: 4px;
-`;

app/components/Collection/CollectionNew.tsx

@@ -1,35 +0,0 @@
-import { runInAction } from "mobx";
-import { observer } from "mobx-react";
-import { useCallback } from "react";
-import { toast } from "sonner";
-import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { CollectionForm, FormData } from "./CollectionForm";
-
-type Props = {
-  onSubmit: () => void;
-};
-
-export const CollectionNew = observer(function CollectionNew_({
-  onSubmit,
-}: Props) {
-  const { collections } = useStores();
-  const handleSubmit = useCallback(
-    async (data: FormData) => {
-      try {
-        const collection = await collections.save(data);
-        // Avoid flash of loading state for the new collection, we know it's empty.
-        runInAction(() => {
-          collection.documents = [];
-        });
-        onSubmit?.();
-        history.push(collection.path);
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [collections, onSubmit]
-  );
-
-  return <CollectionForm handleSubmit={handleSubmit} />;
-});

app/components/CollectionBreadcrumb.tsx

@@ -1,38 +0,0 @@
-import { ArchiveIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import Collection from "~/models/Collection";
-import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { archivePath, collectionPath } from "~/utils/routeHelpers";
-import Breadcrumb from "./Breadcrumb";
-import { createInternalLinkActionV2 } from "~/actions";
-import { ActiveCollectionSection } from "~/actions/sections";
-
-type Props = {
-  collection: Collection;
-};
-
-export const CollectionBreadcrumb: React.FC<Props> = ({ collection }) => {
-  const { t } = useTranslation();
-
-  const actions = React.useMemo(
-    () => [
-      createInternalLinkActionV2({
-        name: t("Archive"),
-        section: ActiveCollectionSection,
-        icon: <ArchiveIcon />,
-        visible: collection.isArchived,
-        to: archivePath(),
-      }),
-      createInternalLinkActionV2({
-        name: collection.name,
-        section: ActiveCollectionSection,
-        icon: <CollectionIcon collection={collection} expanded />,
-        to: collectionPath(collection.path),
-      }),
-    ],
-    [collection, t]
-  );
-
-  return <Breadcrumb actions={actions} highlightFirstItem />;
-};

app/components/CollectionDescription.tsx

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

app/components/CollectionIcon.tsx

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