fix: indent the note

2026-06-13 19:35:02 +03:00 · 2022-02-22 00:17:04 +05:30
1029 changed files with 24128 additions and 50115 deletions
@@ -35,14 +35,6 @@
            "displayName": false
          }
        ]
-      ],
-      "ignore": [
-        "**/*.test.ts"
-      ]
-    },
-    "development": {
-      "ignore": [
-        "**/*.test.ts"
      ]
    }
  }
@@ -1,102 +1,51 @@
 version: 2.1

-defaults: &defaults
-  working_directory: ~/outline
-  docker:
-    - image: cimg/node:14.19
-    - image: cimg/redis:5.0
-    - image: cimg/postgres:14.2
-      environment:
-        POSTGRES_USER: postgres
-        POSTGRES_PASSWORD: password
-        POSTGRES_DB: circle_test
-  resource_class: large
-  environment:
-    NODE_ENV: test
-    SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-    DATABASE_URL_TEST: postgres://postgres:password@localhost:5432/circle_test
-    DATABASE_URL: postgres://postgres:password@localhost:5432/circle_test
-    URL: http://localhost:3000
-    SMTP_FROM_EMAIL: hello@example.com
-    AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
-    AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
-
 executors:
  docker-publisher:
    environment:
      IMAGE_NAME: outlinewiki/outline
-      BASE_IMAGE_NAME: outlinewiki/outline-base
    docker:
      - image: circleci/buildpack-deps:stretch

 jobs:
  build:
-    <<: *defaults
+    working_directory: ~/outline
+    docker:
+      - image: circleci/node:14
+      - image: circleci/redis:latest
+      - image: circleci/postgres:9.6.5-alpine-ram
+    environment:
+      NODE_ENV: test
+      SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+      DATABASE_URL_TEST: postgres://root@localhost:5432/circle_test
+      DATABASE_URL: postgres://root@localhost:5432/circle_test
+      URL: http://localhost:3000
+      SMTP_FROM_EMAIL: hello@example.com
+      AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
+      AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
    steps:
      - checkout
      - restore_cache:
          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: install-deps
-          command: yarn install --frozen-lockfile
+          command: yarn install --pure-lockfile
      - save_cache:
          key: dependency-cache-{{ checksum "package.json" }}
          paths:
            - ./node_modules
-  lint:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
-      - run:
-          name: lint
-          command: yarn lint
-  types:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
-      - run:
-          name: typescript
-          command: yarn tsc
-  test-app:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
-      - run:
-          name: test
-          command: yarn test:app
-  test-shared:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
-      - run:
-          name: test
-          command: yarn test:shared
-  test-server:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: migrate
          command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
+      - run:
+          name: lint
+          command: yarn lint
+      - run:
+          name: typescript
+          command: yarn tsc
      - run:
          name: test
-          command: yarn test:server --forceExit
-  bundle-size:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          command: yarn test
      - run:
          name: build-webpack
          command: yarn build:webpack
@@ -107,63 +56,59 @@ jobs:
      - setup_remote_docker:
          version: 20.10.6
      - run:
-          name: Install Docker buildx
+          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: |
-            mkdir -p ~/.docker/cli-plugins
-            url="https://github.com/docker/buildx/releases/download/v0.8.0/buildx-v0.8.0.linux-amd64"
-            curl -sSL -o ~/.docker/cli-plugins/docker-buildx $url
-            chmod a+x ~/.docker/cli-plugins/docker-buildx
+            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: Enable Docker buildx
-          command: export DOCKER_CLI_EXPERIMENTAL=enabled
+          name: Load archived Docker image
+          command: docker load -i /tmp/workspace/image.tar
      - run:
-          name: Initialize Docker buildx
+          name: Publish Docker Image to Docker Hub
          command: |
-            docker buildx install
-            docker context create docker-multiarch
-            docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
-            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
-            docker buildx inspect --builder docker-multiarch --bootstrap
-            docker buildx use docker-multiarch
-      - run:
-          name: Build base image
-          command: docker build -f Dockerfile.base -t $BASE_IMAGE_NAME:latest --load .
-      - run:
-          name: Login to Docker Hub
-          command: echo "$DOCKERHUB_PASS" | docker login -u "$DOCKERHUB_USERNAME" --password-stdin
-      - run:
-          name: Publish base Docker Image to Docker Hub
-          command: docker push $BASE_IMAGE_NAME:latest
-      - run:
-          name: Build and push Docker image
-          command: docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            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
-  all:
+  build-and-test:
    jobs:
-      - build
-      - lint:
-          requires:
-            - build
-      - test-server:
-          requires:
-            - build
-      - test-shared:
-          requires:
-            - build
-      - test-app:
-          requires:
-            - build
-      - types:
-          requires:
-            - build
-      - bundle-size:
-          requires:
-            - test-app
-            - test-shared
-            - test-server
-
+      - build:
+          filters:
+            tags:
+              ignore: /^v.*/
  build-docker:
    jobs:
      - build-image:
@@ -172,3 +117,19 @@ workflows:
              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: /.*/
@@ -1,7 +1,5 @@
 # –––––––––––––––– REQUIRED ––––––––––––––––

-NODE_ENV=production
-
 # Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
@@ -12,21 +10,11 @@ UTILS_SECRET=generate_a_new_key

 # For production point these at your databases, in development the default
 # should work out of the box.
-DATABASE_URL=postgres://user:pass@localhost:5432/outline
-DATABASE_URL_TEST=postgres://user:pass@localhost:5432/outline-test
-DATABASE_CONNECTION_POOL_MIN=
-DATABASE_CONNECTION_POOL_MAX=
+DATABASE_URL=postgres://user:pass@localhost:5532/outline
+DATABASE_URL_TEST=postgres://user:pass@localhost:5532/outline-test
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable
-
-# For redis you can either specify an ioredis compatible url like this
-REDIS_URL=redis://localhost:6379
-# or alternatively, if you would like to provide additional connection options,
-# use a base64 encoded JSON connection option object. Refer to the ioredis documentation
-# for a list of available options.
-# Example: Use Redis Sentinel for high availability
-# {"sentinels":[{"host":"sentinel-0","port":26379},{"host":"sentinel-1","port":26379}],"name":"mymaster"}
-# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJzZW50aW5lbC0wIiwicG9ydCI6MjYzNzl9LHsiaG9zdCI6InNlbnRpbmVsLTEiLCJwb3J0IjoyNjM3OX1dLCJuYW1lIjoibXltYXN0ZXIifQ==
+REDIS_URL=redis://localhost:6479

 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
@@ -38,7 +26,7 @@ PORT=3000
 COLLABORATION_URL=

 # To support uploading of images for avatars and document attachments an
-# s3-compatible storage must be provided. AWS S3 is recommended for redundancy
+# 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.

@@ -48,7 +36,6 @@ COLLABORATION_URL=
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
-AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
 AWS_S3_UPLOAD_MAX_SIZE=26214400
@@ -67,8 +54,8 @@ AWS_S3_ACL=private
 #
 # When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
 # https://<URL>/auth/slack.callback
-SLACK_CLIENT_ID=get_a_key_from_slack
-SLACK_CLIENT_SECRET=get_the_secret_of_above_key
+SLACK_KEY=get_a_key_from_slack
+SLACK_SECRET=get_the_secret_of_above_key

 # To configure Google auth, you'll need to create an OAuth Client ID at
 # => https://console.cloud.google.com/apis/credentials
@@ -102,7 +89,7 @@ OIDC_USERNAME_CLAIM=preferred_username
 OIDC_DISPLAY_NAME=OpenID

 # Space separated auth scopes.
-OIDC_SCOPES=openid profile email
+OIDC_SCOPES="openid profile email"


 # –––––––––––––––– OPTIONAL ––––––––––––––––
@@ -131,7 +118,7 @@ ENABLE_UPDATES=true
 # available memory by 512 for a rough estimate
 WEB_CONCURRENCY=1

-# Override the maximum size of document imports, could be required if you have
+# Override the maxium size of document imports, could be required if you have
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000

@@ -139,6 +126,10 @@ MAXIMUM_IMPORT_SIZE=5120000
 # requests and this ends up being duplicative
 DEBUG=http

+# Comma separated list of domains to be allowed to signin to the wiki. If not
+# set, all domains are allowed by default when using Google OAuth to signin
+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
@@ -150,11 +141,8 @@ 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,
-# and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
-# https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
+# Optionally enable Sentry (sentry.io) to track errors and performance
 SENTRY_DSN=
-SENTRY_TUNNEL=

 # To support sending outgoing transactional emails such as "document updated" or
 # "you've been invited" you'll need to provide authentication for an SMTP server
@@ -173,10 +161,3 @@ SMTP_SECURE=true
 # The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US
-
-# Optionally enable rate limiter at application web server
-RATE_LIMITER_ENABLED=true
-
-# Configure default throttling parameters for rate limiter
-RATE_LIMITER_REQUESTS=1000
-RATE_LIMITER_DURATION_WINDOW=60
@@ -12,23 +12,22 @@
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
+    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": [
-    "es",
    "@typescript-eslint",
    "eslint-plugin-import",
    "eslint-plugin-node",
    "eslint-plugin-react",
+    "eslint-plugin-react-hooks",
    "import"
  ],
  "rules": {
    "eqeqeq": 2,
    "curly": 2,
-    "object-shorthand": "error",
    "no-mixed-operators": "off",
    "no-useless-escape": "off",
-    "es/no-regexp-lookbehind-assertions": "error",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
@@ -1,11 +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
-    schedule:
-      interval: "weekly"
@@ -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
@@ -1,56 +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"
-jobs:
-  build:
-    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 }}
@@ -42,7 +42,7 @@ jobs:

    # Initializes the CodeQL tools for scanning.
    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      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.
@@ -53,7 +53,7 @@ jobs:
    # 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
+      uses: github/codeql-action/autobuild@v1

    # ℹ️ Command-line programs to run using the OS shell.
    # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
    #   make release

    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v1
@@ -1,29 +0,0 @@
-name: "Close Stale PRs"
-on:
-  workflow_dispatch:
-  schedule:
-    - cron: "30 1 * * *"
-
-permissions:
-  issues: write
-  pull-requests: write
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/stale@v5
-        with:
-          stale-pr-message: "This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
-          stale-issue-message: "This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
-          close-pr-message: "Automatically closed due to inactivity"
-          close-issue-message: "Automatically closed due to inactivity"
-          days-before-issue-stale: 120
-          days-before-pr-stale: 60
-          days-before-close: 5
-          operations-per-run: 60
-          stale-issue-label: stale
-          stale-pr-label: stale
-          exempt-issue-labels: "security,pinned"
-      - name: Print outputs
-        run: echo ${{ join(steps.stale.outputs.*, ',') }}
@@ -3,7 +3,6 @@ build
 node_modules/*
 .env
 .log
-.vscode/*
 npm-debug.log
 stats.json
 .DS_Store
@@ -11,4 +10,4 @@ fakes3/*
 .idea
 *.pem
 *.key
-*.cert
+*.cert
@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged
@@ -1,88 +0,0 @@
-{
-  "projects": [
-    {
-      "displayName": "server",
-      "verbose": false,
-      "roots": [
-        "<rootDir>/server"
-      ],
-      "moduleNameMapper": {
-        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
-      },
-      "setupFiles": [
-        "<rootDir>/__mocks__/console.js",
-        "<rootDir>/server/test/env.ts"
-      ],
-      "setupFilesAfterEnv": [
-        "<rootDir>/server/test/setup.ts"
-      ],
-      "testEnvironment": "node",
-      "runner": "@getoutline/jest-runner-serial"
-    },
-    {
-      "displayName": "app",
-      "verbose": false,
-      "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",
-      "verbose": false,
-      "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",
-      "verbose": false,
-      "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"
-      }
-    }
-  ]
-}
@@ -1,22 +1,45 @@
+# syntax=docker/dockerfile:1.2
 ARG APP_PATH=/opt/outline
-FROM outlinewiki/outline-base as base
+FROM node:16-alpine AS deps-common
+
+ARG APP_PATH
+WORKDIR $APP_PATH
+COPY ./package.json ./yarn.lock ./
+
+# ---
+FROM deps-common AS deps-dev
+RUN yarn install --no-optional --frozen-lockfile && \
+  yarn cache clean
+
+# ---
+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

+COPY . .
+COPY --from=deps-dev $APP_PATH/node_modules ./node_modules
+ARG CDN_URL
+RUN yarn build
+
 # ---
-FROM node:16.14.2-alpine3.15 AS runner
+FROM node:16-alpine AS runner

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

 RUN addgroup -g 1001 -S nodejs && \
  adduser -S nodejs -u 1001 && \
@@ -1,18 +0,0 @@
-ARG APP_PATH=/opt/outline
-FROM node:16.14.2-alpine3.15 AS deps
-
-ARG APP_PATH
-WORKDIR $APP_PATH
-COPY ./package.json ./yarn.lock ./
-
-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
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.64.0
+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
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                      Licensed Work by creating teams and documents
                      controlled by such third parties.

-Change Date:          2026-05-23
+Change Date:          2025-11-11

 Change License:       Apache License, Version 2.0

@@ -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 });
+  };
+}
@@ -1 +1,2 @@
+// Mock for node-uuid
 global.console.warn = () => {};
@@ -1,2 +1 @@
-window.matchMedia = (data) => data;
-window.env = {};
+window.matchMedia = data => data;
@@ -43,6 +43,10 @@
      "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
@@ -102,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
    },
@@ -195,10 +199,6 @@
      "description": "An API key for Sentry if you wish to collect error reporting (optional)",
      "required": false
    },
-    "SENTRY_TUNNEL": {
-      "description": "A sentry tunnel URL for bypassing ad blockers in the UI (optional)",
-      "required": false
-    },
    "TEAM_LOGO": {
      "description": "A logo that will be displayed on the signed out home page",
      "required": false
@@ -209,4 +209,4 @@
      "required": false
    }
  }
-}
+}
@@ -1,10 +1,6 @@
 {
  "extends": [
-    "../.eslintrc",
-    "plugin:react-hooks/recommended",
-  ],
-  "plugins": [
-    "eslint-plugin-react-hooks",
+    "../.eslintrc"
  ],
  "env": {
    "jest": true,
@@ -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"
+}
@@ -1,26 +1,13 @@
-import {
-  CollectionIcon,
-  EditIcon,
-  PadlockIcon,
-  PlusIcon,
-  StarredIcon,
-  UnstarredIcon,
-} from "outline-icons";
+import { CollectionIcon, EditIcon, PlusIcon } from "outline-icons";
 import * as React from "react";
 import stores from "~/stores";
-import Collection from "~/models/Collection";
 import CollectionEdit from "~/scenes/CollectionEdit";
 import CollectionNew from "~/scenes/CollectionNew";
-import CollectionPermissions from "~/scenes/CollectionPermissions";
 import DynamicCollectionIcon from "~/components/CollectionIcon";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
 import history from "~/utils/history";

-const ColorCollectionIcon = ({ collection }: { collection: Collection }) => {
-  return <DynamicCollectionIcon collection={collection} />;
-};
-
 export const openCollection = createAction({
  name: ({ t }) => t("Open collection"),
  section: CollectionSection,
@@ -33,7 +20,7 @@ export const openCollection = createAction({
      // cache if the collection is renamed
      id: collection.url,
      name: collection.name,
-      icon: <ColorCollectionIcon collection={collection} />,
+      icon: <DynamicCollectionIcon collection={collection} />,
      section: CollectionSection,
      perform: () => history.push(collection.url),
    }));
@@ -58,8 +45,7 @@ export const createCollection = createAction({
 });

 export const editCollection = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
+  name: ({ t }) => t("Edit collection"),
  section: CollectionSection,
  icon: <EditIcon />,
  visible: ({ stores, activeCollectionId }) =>
@@ -82,79 +68,4 @@ export const editCollection = createAction({
  },
 });

-export const editCollectionPermissions = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
-  section: CollectionSection,
-  icon: <PadlockIcon />,
-  visible: ({ stores, activeCollectionId }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    stores.dialogs.openModal({
-      title: t("Collection permissions"),
-      content: <CollectionPermissions collectionId={activeCollectionId} />,
-    });
-  },
-});
-
-export const starCollection = createAction({
-  name: ({ t }) => t("Star"),
-  section: CollectionSection,
-  icon: <StarredIcon />,
-  keywords: "favorite bookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    return (
-      !collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).star
-    );
-  },
-  perform: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    collection?.star();
-  },
-});
-
-export const unstarCollection = createAction({
-  name: ({ t }) => t("Unstar"),
-  section: CollectionSection,
-  icon: <UnstarredIcon />,
-  keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return false;
-    }
-    const collection = stores.collections.get(activeCollectionId);
-    return (
-      !!collection?.isStarred &&
-      stores.policies.abilities(activeCollectionId).unstar
-    );
-  },
-  perform: ({ activeCollectionId, stores }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-
-    const collection = stores.collections.get(activeCollectionId);
-    collection?.unstar();
-  },
-});
-
-export const rootCollectionActions = [
-  openCollection,
-  createCollection,
-  starCollection,
-  unstarCollection,
-];
+export const rootCollectionActions = [openCollection, createCollection];
@@ -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];
@@ -1,50 +0,0 @@
-import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { DeveloperSection } from "~/actions/sections";
-import env from "~/env";
-import { client } from "~/utils/ApiClient";
-import { deleteAllDatabases } from "~/utils/developer";
-
-export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Delete IndexedDB cache"),
-  icon: <TrashIcon />,
-  keywords: "cache clear database",
-  section: DeveloperSection,
-  perform: async ({ t }) => {
-    await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
-  },
-});
-
-export const createTestUsers = createAction({
-  name: "Create test users",
-  icon: <UserIcon />,
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: async () => {
-    const count = 10;
-
-    try {
-      await client.post("/developer.create_test_users", { count });
-      stores.toasts.showToast(`${count} test users created`);
-    } catch (err) {
-      stores.toasts.showToast(err.message, { type: "error" });
-    }
-  },
-});
-
-export const developer = createAction({
-  name: ({ t }) => t("Developer"),
-  keywords: "debug",
-  icon: <ToolsIcon />,
-  iconInContextMenu: false,
-  section: DeveloperSection,
-  visible: ({ event }) =>
-    env.ENVIRONMENT === "development" ||
-    (event instanceof KeyboardEvent && event.altKey),
-  children: [clearIndexedDB, createTestUsers],
-});
-
-export const rootDeveloperActions = [developer];
@@ -10,25 +10,14 @@ import {
  ShapesIcon,
  ImportIcon,
  PinIcon,
-  SearchIcon,
-  UnsubscribeIcon,
-  SubscribeIcon,
-  MoveIcon,
-  TrashIcon,
-  CrossIcon,
-  ArchiveIcon,
-  ShuffleIcon,
 } from "outline-icons";
 import * as React from "react";
-import { getEventFiles } from "@shared/utils/files";
-import DocumentDelete from "~/scenes/DocumentDelete";
-import DocumentMove from "~/scenes/DocumentMove";
-import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
-import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
+import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import DocumentTemplatize from "~/scenes/DocumentTemplatize";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
 import history from "~/utils/history";
-import { homePath, newDocumentPath, searchPath } from "~/utils/routeHelpers";
+import { homePath, newDocumentPath } from "~/utils/routeHelpers";

 export const openDocument = createAction({
  name: ({ t }) => t("Open document"),
@@ -62,11 +51,8 @@ export const createDocument = createAction({
  visible: ({ activeCollectionId, stores }) =>
    !!activeCollectionId &&
    stores.policies.abilities(activeCollectionId).update,
-  perform: ({ activeCollectionId, inStarredSection }) =>
-    activeCollectionId &&
-    history.push(newDocumentPath(activeCollectionId), {
-      starred: inStarredSection,
-    }),
+  perform: ({ activeCollectionId }) =>
+    activeCollectionId && history.push(newDocumentPath(activeCollectionId)),
 });

 export const starDocument = createAction({
@@ -118,111 +104,22 @@ export const unstarDocument = createAction({
  },
 });

-export const subscribeDocument = createAction({
-  name: ({ t }) => t("Subscribe"),
-  section: DocumentSection,
-  icon: <SubscribeIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    return (
-      !document?.isSubscribed &&
-      stores.policies.abilities(activeDocumentId).subscribe
-    );
-  },
-  perform: ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    document?.subscribe();
-
-    stores.toasts.showToast(t("Subscribed to document notifications"), {
-      type: "success",
-    });
-  },
-});
-
-export const unsubscribeDocument = createAction({
-  name: ({ t }) => t("Unsubscribe"),
-  section: DocumentSection,
-  icon: <UnsubscribeIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    return (
-      !!document?.isSubscribed &&
-      stores.policies.abilities(activeDocumentId).unsubscribe
-    );
-  },
-  perform: ({ activeDocumentId, stores, currentUserId, t }) => {
-    if (!activeDocumentId || !currentUserId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-
-    document?.unsubscribe(currentUserId);
-
-    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
-      type: "success",
-    });
-  },
-});
-
-export const downloadDocumentAsHTML = createAction({
-  name: ({ t }) => t("HTML"),
-  section: DocumentSection,
-  keywords: "html export",
-  icon: <DownloadIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    document?.download("text/html");
-  },
-});
-
-export const downloadDocumentAsMarkdown = createAction({
-  name: ({ t }) => t("Markdown"),
-  section: DocumentSection,
-  keywords: "md markdown export",
-  icon: <DownloadIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    document?.download("text/markdown");
-  },
-});
-
 export const downloadDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Download") : t("Download document"),
  section: DocumentSection,
  icon: <DownloadIcon />,
  keywords: "export",
-  children: [downloadDocumentAsHTML, downloadDocumentAsMarkdown],
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    document?.download();
+  },
 });

 export const duplicateDocument = createAction({
@@ -253,11 +150,10 @@ export const duplicateDocument = createAction({
 * Pin a document to a collection. Pinned documents will be displayed at the top
 * of the collection for all collection members to see.
 */
-export const pinDocumentToCollection = createAction({
+export const pinDocument = createAction({
  name: ({ t }) => t("Pin to collection"),
  section: DocumentSection,
  icon: <PinIcon />,
-  iconInContextMenu: false,
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
    if (!activeDocumentId || !activeCollectionId) {
      return false;
@@ -292,7 +188,6 @@ export const pinDocumentToHome = createAction({
  name: ({ t }) => t("Pin to home"),
  section: DocumentSection,
  icon: <PinIcon />,
-  iconInContextMenu: false,
  visible: ({ activeDocumentId, currentTeamId, stores }) => {
    if (!currentTeamId || !activeDocumentId) {
      return false;
@@ -319,13 +214,6 @@ export const pinDocumentToHome = createAction({
  },
 });

-export const pinDocument = createAction({
-  name: ({ t }) => t("Pin"),
-  section: DocumentSection,
-  icon: <PinIcon />,
-  children: [pinDocumentToCollection, pinDocumentToHome],
-});
-
 export const printDocument = createAction({
  name: ({ t, isContextMenu }) =>
    isContextMenu ? t("Print") : t("Print document"),
@@ -359,8 +247,8 @@ export const importDocument = createAction({
    input.type = "file";
    input.accept = documents.importFileTypes.join(", ");

-    input.onchange = async (ev) => {
-      const files = getEventFiles(ev);
+    input.onchange = async (ev: Event) => {
+      const files = getDataTransferFiles(ev);

      try {
        const file = files[0];
@@ -395,199 +283,42 @@ export const createTemplate = createAction({
      return false;
    }
    const document = stores.documents.get(activeDocumentId);
-    return !!(
+    return (
      !!activeCollectionId &&
      stores.policies.abilities(activeCollectionId).update &&
-      !document?.isTemplate &&
-      !document?.isDeleted
+      !document?.isTemplate
    );
  },
  perform: ({ activeDocumentId, stores, t, event }) => {
    if (!activeDocumentId) {
      return;
    }
+
    event?.preventDefault();
    event?.stopPropagation();

    stores.dialogs.openModal({
      title: t("Create template"),
-      isCentered: true,
-      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
+      content: (
+        <DocumentTemplatize
+          documentId={activeDocumentId}
+          onSubmit={stores.dialogs.closeAllModals}
+        />
+      ),
    });
  },
 });

-export const openRandomDocument = createAction({
-  id: "random",
-  section: DocumentSection,
-  name: ({ t }) => t(`Open random document`),
-  icon: <ShuffleIcon />,
-  perform: ({ stores, activeDocumentId }) => {
-    const documentPaths = stores.collections.pathsToDocuments.filter(
-      (path) => path.type === "document" && path.id !== activeDocumentId
-    );
-    const documentPath =
-      documentPaths[Math.round(Math.random() * documentPaths.length)];
-
-    if (documentPath) {
-      history.push(documentPath.url);
-    }
-  },
-});
-
-export const searchDocumentsForQuery = (searchQuery: string) =>
-  createAction({
-    id: "search",
-    section: DocumentSection,
-    name: ({ t }) =>
-      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
-    icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery)),
-    visible: ({ location }) => location.pathname !== searchPath(),
-  });
-
-export const moveDocument = createAction({
-  name: ({ t }) => t("Move"),
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Move {{ documentName }}", {
-          documentName: document.noun,
-        }),
-        content: (
-          <DocumentMove
-            document={document}
-            onRequestClose={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    }
-  },
-});
-
-export const archiveDocument = createAction({
-  name: ({ t }) => t("Archive"),
-  section: DocumentSection,
-  icon: <ArchiveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).archive;
-  },
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.archive();
-      stores.toasts.showToast(t("Document archived"), {
-        type: "success",
-      });
-    }
-  },
-});
-
-export const deleteDocument = createAction({
-  name: ({ t }) => t("Delete"),
-  section: DocumentSection,
-  icon: <TrashIcon />,
-  dangerous: true,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).delete;
-  },
-  perform: ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Delete {{ documentName }}", {
-          documentName: document.noun,
-        }),
-        isCentered: true,
-        content: (
-          <DocumentDelete
-            document={document}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    }
-  },
-});
-
-export const permanentlyDeleteDocument = createAction({
-  name: ({ t }) => t("Permanently delete"),
-  section: DocumentSection,
-  icon: <CrossIcon />,
-  dangerous: true,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).permanentDelete;
-  },
-  perform: ({ activeDocumentId, stores, t }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      stores.dialogs.openModal({
-        title: t("Permanently delete {{ documentName }}", {
-          documentName: document.noun,
-        }),
-        isCentered: true,
-        content: (
-          <DocumentPermanentDelete
-            document={document}
-            onSubmit={stores.dialogs.closeAllModals}
-          />
-        ),
-      });
-    }
-  },
-});
-
 export const rootDocumentActions = [
  openDocument,
-  archiveDocument,
  createDocument,
  createTemplate,
-  deleteDocument,
  importDocument,
  downloadDocument,
  starDocument,
  unstarDocument,
-  subscribeDocument,
-  unsubscribeDocument,
  duplicateDocument,
-  moveDocument,
-  openRandomDocument,
-  permanentlyDeleteDocument,
  printDocument,
-  pinDocumentToCollection,
+  pinDocument,
  pinDocumentToHome,
 ];
@@ -10,27 +10,23 @@ import {
  KeyboardIcon,
  EmailIcon,
  LogoutIcon,
-  ProfileIcon,
 } from "outline-icons";
 import * as React from "react";
 import {
  developersUrl,
  changelogUrl,
-  feedbackUrl,
+  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, RecentSearchesSection } from "~/actions/sections";
+import { NavigationSection } from "~/actions/sections";
 import history from "~/utils/history";
 import {
-  organizationSettingsPath,
-  profileSettingsPath,
-  accountPreferencesPath,
+  settingsPath,
  homePath,
-  searchPath,
+  searchUrl,
  draftsPath,
  templatesPath,
  archivePath,
@@ -46,13 +42,14 @@ export const navigateToHome = createAction({
  visible: ({ location }) => location.pathname !== homePath(),
 });

-export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
-  createAction({
-    section: RecentSearchesSection,
-    name: searchQuery.query,
-    icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery.query)),
-  });
+export const navigateToSearch = createAction({
+  name: ({ t }) => t("Search"),
+  section: NavigationSection,
+  shortcut: ["/"],
+  icon: <SearchIcon />,
+  perform: () => history.push(searchUrl()),
+  visible: ({ location }) => location.pathname !== searchUrl(),
+});

 export const navigateToDrafts = createAction({
  name: ({ t }) => t("Drafts"),
@@ -73,7 +70,6 @@ export const navigateToTemplates = createAction({
 export const navigateToArchive = createAction({
  name: ({ t }) => t("Archive"),
  section: NavigationSection,
-  shortcut: ["g", "a"],
  icon: <ArchiveIcon />,
  perform: () => history.push(archivePath()),
  visible: ({ location }) => location.pathname !== archivePath(),
@@ -91,26 +87,9 @@ export const navigateToSettings = createAction({
  name: ({ t }) => t("Settings"),
  section: NavigationSection,
  shortcut: ["g", "s"],
-  icon: <SettingsIcon />,
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(organizationSettingsPath()),
-});
-
-export const navigateToProfileSettings = createAction({
-  name: ({ t }) => t("Profile"),
-  section: NavigationSection,
-  iconInContextMenu: false,
-  icon: <ProfileIcon />,
-  perform: () => history.push(profileSettingsPath()),
-});
-
-export const navigateToAccountPreferences = createAction({
-  name: ({ t }) => t("Preferences"),
-  section: NavigationSection,
  iconInContextMenu: false,
  icon: <SettingsIcon />,
-  perform: () => history.push(accountPreferencesPath()),
+  perform: () => history.push(settingsPath()),
 });

 export const openAPIDocumentation = createAction({
@@ -126,7 +105,7 @@ export const openFeedbackUrl = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <EmailIcon />,
-  perform: () => window.open(feedbackUrl()),
+  perform: () => window.open(mailToUrl()),
 });

 export const openBugReportUrl = createAction({
@@ -166,10 +145,12 @@ export const logout = createAction({

 export const rootNavigationActions = [
  navigateToHome,
+  navigateToSearch,
  navigateToDrafts,
  navigateToTemplates,
  navigateToArchive,
  navigateToTrash,
+  navigateToSettings,
  openAPIDocumentation,
  openFeedbackUrl,
  openBugReportUrl,
@@ -1,85 +0,0 @@
-import copy from "copy-to-clipboard";
-import { LinkIcon, RestoreIcon } from "outline-icons";
-import * as React from "react";
-import { matchPath } from "react-router-dom";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { RevisionSection } from "~/actions/sections";
-import history from "~/utils/history";
-import { documentHistoryUrl, matchDocumentHistory } from "~/utils/routeHelpers";
-
-export const restoreRevision = createAction({
-  name: ({ t }) => t("Restore revision"),
-  icon: <RestoreIcon />,
-  section: RevisionSection,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ t, event, location, activeDocumentId }) => {
-    event?.preventDefault();
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-
-    const { team } = stores.auth;
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    if (team?.collaborativeEditing) {
-      history.push(document.url, {
-        restore: true,
-        revisionId,
-      });
-    } else {
-      await document.restore({
-        revisionId,
-      });
-      stores.toasts.showToast(t("Document restored"), {
-        type: "success",
-      });
-      history.push(document.url);
-    }
-  },
-});
-
-export const copyLinkToRevision = createAction({
-  name: ({ t }) => t("Copy link"),
-  icon: <LinkIcon />,
-  section: RevisionSection,
-  perform: async ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    const url = `${window.location.origin}${documentHistoryUrl(
-      document,
-      revisionId
-    )}`;
-
-    copy(url, {
-      format: "text/plain",
-      onCopy: () => {
-        stores.toasts.showToast(t("Link copied"), {
-          type: "info",
-        });
-      },
-    });
-  },
-});
-
-export const rootRevisionActions = [];
@@ -1,64 +0,0 @@
-import { PlusIcon } from "outline-icons";
-import * as React from "react";
-import styled from "styled-components";
-import TeamNew from "~/scenes/TeamNew";
-import { createAction } from "~/actions";
-import { loadSessionsFromCookie } from "~/hooks/useSessions";
-import { TeamSection } from "../sections";
-
-export const switchTeamList = getSessions().map((session) => {
-  return createAction({
-    name: session.name,
-    section: TeamSection,
-    keywords: "change switch workspace organization team",
-    icon: () => <Logo alt={session.name} src={session.logoUrl} />,
-    visible: ({ currentTeamId }) => currentTeamId !== session.teamId,
-    perform: () => (window.location.href = session.url),
-  });
-});
-
-const switchTeam = createAction({
-  name: ({ t }) => t("Switch workspace"),
-  placeholder: ({ t }) => t("Select a workspace"),
-  keywords: "change switch workspace organization team",
-  section: TeamSection,
-  visible: ({ currentTeamId }) =>
-    getSessions({ exclude: currentTeamId }).length > 0,
-  children: switchTeamList,
-});
-
-export const createTeam = createAction({
-  name: ({ t }) => `${t("New workspace")}…`,
-  keywords: "create change switch workspace organization team",
-  section: TeamSection,
-  icon: <PlusIcon />,
-  visible: ({ stores, currentTeamId }) => {
-    return stores.policies.abilities(currentTeamId ?? "").createTeam;
-  },
-  perform: ({ t, event, stores }) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    const { user } = stores.auth;
-    user &&
-      stores.dialogs.openModal({
-        title: t("Create a workspace"),
-        content: <TeamNew user={user} />,
-      });
-  },
-});
-
-function getSessions(params?: { exclude?: string }) {
-  const sessions = loadSessionsFromCookie();
-  const otherSessions = sessions.filter(
-    (session) => session.teamId !== params?.exclude
-  );
-  return otherSessions;
-}
-
-const Logo = styled("img")`
-  border-radius: 2px;
-  width: 24px;
-  height: 24px;
-`;
-
-export const rootTeamActions = [switchTeam, createTeam];
@@ -8,7 +8,7 @@ import { UserSection } from "~/actions/sections";
 export const inviteUser = createAction({
  name: ({ t }) => `${t("Invite people")}…`,
  icon: <PlusIcon />,
-  keywords: "team member workspace user",
+  keywords: "team member user",
  section: UserSection,
  visible: ({ stores }) =>
    stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
@@ -1,6 +1,6 @@
 import { flattenDeep } from "lodash";
 import * as React from "react";
-import { Optional } from "utility-types";
+import { $Diff } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
  Action,
@@ -10,14 +10,17 @@ import {
  MenuItemWithChildren,
 } from "~/types";

-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 {
-    ...definition,
    id: uuidv4(),
+    ...definition,
  };
 }

@@ -25,10 +28,18 @@ export function actionToMenuItem(
  action: Action,
  context: ActionContext
 ): MenuItemButton | MenuItemWithChildren {
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon, context);
-  const resolvedChildren = resolve<Action[]>(action.children, context);
+  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
      ? React.cloneElement(resolvedIcon, {
@@ -37,17 +48,14 @@ export function actionToMenuItem(
      : 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,
    };
  }

@@ -56,7 +64,6 @@ export function actionToMenuItem(
    title,
    icon,
    visible,
-    dangerous: action.dangerous,
    onClick: () => action.perform && action.perform(context),
    selected: action.selected ? action.selected(context) : undefined,
  };
@@ -66,15 +73,23 @@ export function actionToKBar(
  action: Action,
  context: ActionContext
 ): 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<any>>(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
@@ -87,10 +102,12 @@ export function actionToKBar(
      name: resolvedName,
      section: resolvedSection,
      placeholder: resolvedPlaceholder,
-      keywords: action.keywords ?? "",
+      keywords: `${action.keywords}`,
      shortcut: action.shortcut || [],
      icon: resolvedIcon,
-      perform: action.perform ? () => action?.perform?.(context) : undefined,
+      perform: action.perform
+        ? () => action.perform && action.perform(context)
+        : undefined,
    },
    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
  ].concat(children.map((child) => ({ ...child, parent: action.id })));
@@ -1,10 +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 { rootRevisionActions } from "./definitions/revisions";
 import { rootSettingsActions } from "./definitions/settings";
-import { rootTeamActions } from "./definitions/teams";
 import { rootUserActions } from "./definitions/users";

 export default [
@@ -12,8 +10,6 @@ export default [
  ...rootDocumentActions,
  ...rootUserActions,
  ...rootNavigationActions,
-  ...rootRevisionActions,
  ...rootSettingsActions,
-  ...rootDeveloperActions,
-  ...rootTeamActions,
+  ...rootDebugActions,
 ];
@@ -2,19 +2,12 @@ import { ActionContext } from "~/types";

 export const CollectionSection = ({ t }: ActionContext) => t("Collection");

-export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
+export const DebugSection = ({ t }: ActionContext) => t("Debug");

 export const DocumentSection = ({ t }: ActionContext) => t("Document");

-export const RevisionSection = ({ t }: ActionContext) => t("Revision");
-
 export const SettingsSection = ({ t }: ActionContext) => t("Settings");

 export const NavigationSection = ({ t }: ActionContext) => t("Navigation");

 export const UserSection = ({ t }: ActionContext) => t("People");
-
-export const TeamSection = ({ t }: ActionContext) => t("Workspace");
-
-export const RecentSearchesSection = ({ t }: ActionContext) =>
-  t("Recent searches");
@@ -1,73 +0,0 @@
-import * as React from "react";
-import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
-import { Action, ActionContext } from "~/types";
-
-export type Props = React.HTMLAttributes<HTMLButtonElement> & {
-  /** Show the button in a disabled state */
-  disabled?: boolean;
-  /** Hide the button entirely if action is not applicable */
-  hideOnActionDisabled?: boolean;
-  /** Action to use on button */
-  action?: Action;
-  /** Context of action, must be provided with action */
-  context?: ActionContext;
-  /** If tooltip props are provided the button will be wrapped in a tooltip */
-  tooltip?: Omit<TooltipProps, "children">;
-};
-
-/**
- * Button that can be used to trigger an action definition.
- */
-const ActionButton = React.forwardRef(
-  (
-    {
-      action,
-      context,
-      tooltip,
-      hideOnActionDisabled,
-      ...rest
-    }: Props & React.HTMLAttributes<HTMLButtonElement>,
-    ref: React.Ref<HTMLButtonElement>
-  ) => {
-    const disabled = rest.disabled;
-
-    if (!context || !action) {
-      return <button {...rest} ref={ref} />;
-    }
-
-    if (action?.visible && !action.visible(context) && hideOnActionDisabled) {
-      return null;
-    }
-
-    const label =
-      typeof action.name === "function" ? action.name(context) : action.name;
-
-    const button = (
-      <button
-        {...rest}
-        aria-label={label}
-        disabled={disabled}
-        ref={ref}
-        onClick={
-          action?.perform && context
-            ? (ev) => {
-                ev.preventDefault();
-                ev.stopPropagation();
-                action.perform?.(context);
-              }
-            : rest.onClick
-        }
-      >
-        {rest.children ?? label}
-      </button>
-    );
-
-    if (tooltip) {
-      return <Tooltip {...tooltip}>{button}</Tooltip>;
-    }
-
-    return button;
-  }
-);
-
-export default ActionButton;
@@ -2,8 +2,12 @@
 import * as React from "react";
 import env from "~/env";

-const Analytics: React.FC = ({ children }) => {
-  React.useEffect(() => {
+type Props = {
+  children?: React.ReactNode;
+};
+
+export default class Analytics extends React.Component<Props> {
+  componentDidMount() {
    if (!env.GOOGLE_ANALYTICS_ID) {
      return;
    }
@@ -33,9 +37,9 @@ const Analytics: React.FC = ({ children }) => {
    if (document.body) {
      document.body.appendChild(script);
    }
-  }, []);
+  }

-  return <>{children}</>;
-};
-
-export default Analytics;
+  render() {
+    return this.props.children || null;
+  }
+}
@@ -1,51 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import {
-  useCompositeState,
-  Composite,
-  CompositeStateReturn,
-} from "reakit/Composite";
-
-type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: (composite: CompositeStateReturn) => React.ReactNode;
-  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-};
-
-function ArrowKeyNavigation(
-  { children, onEscape, ...rest }: Props,
-  ref: React.RefObject<HTMLDivElement>
-) {
-  const composite = useCompositeState();
-
-  const handleKeyDown = React.useCallback(
-    (ev) => {
-      if (onEscape) {
-        if (ev.key === "Escape") {
-          onEscape(ev);
-        }
-
-        if (
-          ev.key === "ArrowUp" &&
-          composite.currentId === composite.items[0].id
-        ) {
-          onEscape(ev);
-        }
-      }
-    },
-    [composite.currentId, composite.items, onEscape]
-  );
-
-  return (
-    <Composite
-      {...rest}
-      {...composite}
-      onKeyDown={handleKeyDown}
-      role="menu"
-      ref={ref}
-    >
-      {children(composite)}
-    </Composite>
-  );
-}
-
-export default observer(React.forwardRef(ArrowKeyNavigation));
@@ -2,7 +2,9 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
+import { isCustomSubdomain } from "@shared/utils/domains";
 import LoadingIndicator from "~/components/LoadingIndicator";
+import env from "~/env";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";

@@ -13,7 +15,7 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
  const { auth } = useStores();
  const { i18n } = useTranslation();
-  const language = auth.user?.language;
+  const language = auth.user && auth.user.language;

  // Watching for language changes here as this is the earliest point we have
  // the user available and means we can start loading translations faster
@@ -23,11 +25,29 @@ const Authenticated = ({ children }: Props) => {

  if (auth.authenticated) {
    const { user, team } = auth;
+    const { hostname } = window.location;

    if (!team || !user) {
      return <LoadingIndicator />;
    }

+    // If we're authenticated but viewing a 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;
  }

@@ -1,23 +1,22 @@
-import { AnimatePresence } from "framer-motion";
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Switch, Route, useLocation, matchPath } from "react-router-dom";
+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 usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import {
-  searchPath,
+  searchUrl,
  matchDocumentSlug as slug,
  newDocumentPath,
  settingsPath,
-  matchDocumentHistory,
 } from "~/utils/routeHelpers";
-import Fade from "./Fade";
+import withStores from "./withStores";

 const DocumentHistory = React.lazy(
  () =>
@@ -34,78 +33,74 @@ const CommandBar = React.lazy(
    )
 );

-const AuthenticatedLayout: React.FC = ({ children }) => {
-  const { ui, auth } = useStores();
-  const location = useLocation();
-  const can = usePolicy(ui.activeCollectionId);
-  const { user, team } = auth;
+type Props = WithTranslation &
+  RootStore & {
+    children?: React.ReactNode;
+  };

-  const goToSearch = (ev: KeyboardEvent) => {
+@observer
+class AuthenticatedLayout extends React.Component<Props> {
+  scrollable: HTMLDivElement | null | undefined;
+
+  @observable
+  keyboardShortcutsOpen = false;
+
+  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 || !can.update) {
+    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 showSidebar = auth.authenticated && user && team;
-
-  const sidebar = showSidebar ? (
-    <Fade>
+    const sidebar = showSidebar ? (
      <Switch>
        <Route path={settingsPath()} component={SettingsSidebar} />
        <Route component={Sidebar} />
      </Switch>
-    </Fade>
-  ) : undefined;
+    ) : undefined;

-  const sidebarRight = (
-    <React.Suspense fallback={null}>
-      <AnimatePresence key={ui.activeDocumentId}>
-        <Switch
-          location={location}
-          key={
-            matchPath(location.pathname, {
-              path: matchDocumentHistory,
-            })
-              ? "history"
-              : ""
-          }
-        >
+    const rightRail = (
+      <React.Suspense fallback={null}>
+        <Switch>
          <Route
-            key="document-history"
            path={`/doc/${slug}/history/:revisionId?`}
            component={DocumentHistory}
          />
        </Switch>
-      </AnimatePresence>
-    </React.Suspense>
-  );
+      </React.Suspense>
+    );

-  return (
-    <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
-      <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-      <RegisterKeyDown trigger="t" handler={goToSearch} />
-      <RegisterKeyDown trigger="/" handler={goToSearch} />
-      {children}
-      <CommandBar />
-    </Layout>
-  );
-};
+    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>
+    );
+  }
+}

-export default observer(AuthenticatedLayout);
+export default withTranslation()(withStores(AuthenticatedLayout));
@@ -11,7 +11,6 @@ type Props = {
  icon?: React.ReactNode;
  user?: User;
  alt?: string;
-  showBorder?: boolean;
  onClick?: React.MouseEventHandler<HTMLImageElement>;
  className?: string;
 };
@@ -30,13 +29,12 @@ class Avatar extends React.Component<Props> {
  };

  render() {
-    const { src, icon, showBorder, ...rest } = this.props;
+    const { src, icon, ...rest } = this.props;
    return (
      <AvatarWrapper>
        <CircleImg
          onError={this.handleError}
          src={this.error ? placeholder : src}
-          $showBorder={showBorder}
          {...rest}
        />
        {icon && <IconWrapper>{icon}</IconWrapper>}
@@ -61,14 +59,12 @@ const IconWrapper = styled.div`
  height: 20px;
 `;

-const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
+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.$showBorder === false ? "transparent" : props.theme.background};
+  border: 2px solid ${(props) => props.theme.background};
  flex-shrink: 0;
 `;

@@ -1,114 +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 User from "~/models/User";
+import UserProfile from "~/scenes/UserProfile";
 import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";

-type Props = {
+type Props = WithTranslation & {
  user: User;
  isPresent: boolean;
  isEditing: boolean;
  isObserving: boolean;
  isCurrentUser: boolean;
+  profileOnClick: boolean;
  onClick?: React.MouseEventHandler<HTMLImageElement>;
 };

-function AvatarWithPresence({
-  onClick,
-  user,
-  isPresent,
-  isEditing,
-  isObserving,
-  isCurrentUser,
-}: Props) {
-  const { t } = useTranslation();
-  const status = isPresent
-    ? isEditing
-      ? t("currently editing")
-      : t("currently viewing")
-    : t("previously edited");
+@observer
+class AvatarWithPresence extends React.Component<Props> {
+  @observable
+  isOpen = false;

-  return (
-    <>
-      <Tooltip
-        tooltip={
-          <Centered>
-            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-            {status && (
-              <>
-                <br />
-                {status}
-              </>
-            )}
-          </Centered>
-        }
-        placement="bottom"
-      >
-        <AvatarWrapper
-          $isPresent={isPresent}
-          $isObserving={isObserving}
-          $color={user.color}
+  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 src={user.avatarUrl} onClick={onClick} size={32} />
-        </AvatarWrapper>
-      </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}
+          />
+        )}
+      </>
+    );
+  }
 }

 const Centered = styled.div`
  text-align: center;
 `;

-type AvatarWrapperProps = {
+const AvatarWrapper = styled.div<{
  $isPresent: boolean;
  $isObserving: boolean;
  $color: string;
-};
-
-const AvatarWrapper = styled.div<AvatarWrapperProps>`
+}>`
  opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
  transition: opacity 250ms ease-in-out;
  border-radius: 50%;
  position: relative;

-  ${(props) =>
-    props.$isPresent &&
-    css<AvatarWrapperProps>`
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: 50%;
-        transition: border-color 100ms ease-in-out;
-        border: 2px solid transparent;
-        pointer-events: none;
+  &: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 ${(props) => props.theme.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);
@@ -1,7 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
 import env from "~/env";
 import OutlineLogo from "./OutlineLogo";

@@ -39,7 +38,7 @@ const Link = styled.a`
  }

  ${breakpoint("tablet")`
-    z-index: ${depths.sidebar + 1};
+    z-index: ${(props: any) => props.theme.depths.sidebar + 1};
    position: fixed;
    bottom: 0;
    left: 0;
@@ -9,15 +9,11 @@ import { MenuInternalLink } from "~/types";
 type Props = {
  items: MenuInternalLink[];
  max?: number;
+  children?: React.ReactNode;
  highlightFirstItem?: boolean;
 };

-function Breadcrumb({
-  items,
-  highlightFirstItem,
-  children,
-  max = 2,
-}: React.PropsWithChildren<Props>) {
+function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
  const totalItems = items.length;
  const topLevelItems: MenuInternalLink[] = [...items];
  let overflowItems;
@@ -37,7 +33,7 @@ function Breadcrumb({
  return (
    <Flex justify="flex-start" align="center">
      {topLevelItems.map((item, index) => (
-        <React.Fragment key={String(item.to) || index}>
+        <React.Fragment key={item.to || index}>
          {item.icon}
          {item.to ? (
            <Item
@@ -67,7 +63,6 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  display: flex;
  flex-shrink: 1;
  min-width: 0;
-  cursor: var(--pointer);
  color: ${(props) => props.theme.text};
  font-size: 15px;
  height: 24px;
@@ -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;
@@ -1,21 +1,15 @@
-import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
 import { darken, lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import ActionButton, {
-  Props as ActionButtonProps,
-} from "~/components/ActionButton";

-type RealProps = {
+const RealButton = styled.button<{
  fullwidth?: boolean;
  borderOnHover?: boolean;
  $neutral?: boolean;
  danger?: boolean;
  iconColor?: string;
-};
-
-const RealButton = styled(ActionButton)<RealProps>`
+}>`
  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
  margin: 0;
@@ -30,7 +24,7 @@ const RealButton = styled(ActionButton)<RealProps>`
  height: 32px;
  text-decoration: none;
  flex-shrink: 0;
-  cursor: var(--pointer);
+  cursor: pointer;
  user-select: none;
  appearance: none !important;

@@ -47,8 +41,7 @@ const RealButton = styled(ActionButton)<RealProps>`
    border: 0;
  }

-  &:hover:not(:disabled),
-  &[aria-expanded="true"] {
+  &:hover:not(:disabled) {
    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
  }

@@ -83,8 +76,7 @@ const RealButton = styled(ActionButton)<RealProps>`
    }


-    &:hover:not(:disabled),
-    &[aria-expanded="true"] {
+    &:hover:not(:disabled) {
      background: ${
        props.borderOnHover
          ? props.theme.buttonNeutralBackground
@@ -111,17 +103,12 @@ const RealButton = styled(ActionButton)<RealProps>`
      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;
      }
  `};
 `;
@@ -151,7 +138,7 @@ 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;
@@ -161,7 +148,7 @@ export type Props<T> = ActionButtonProps & {
  primary?: boolean;
  fullwidth?: boolean;
  as?: T;
-  to?: LocationDescriptor;
+  to?: string;
  borderOnHover?: boolean;
  href?: string;
  "data-on"?: string;
@@ -173,19 +160,12 @@ const Button = <T extends React.ElementType = "button">(
  props: Props<T> & React.ComponentPropsWithoutRef<T>,
  ref: React.Ref<HTMLButtonElement>
 ) => {
-  const { type, children, value, disclosure, neutral, action, ...rest } = props;
+  const { type, icon, children, value, disclosure, neutral, ...rest } = props;
  const hasText = children !== undefined || value !== undefined;
-  const icon = action?.icon ?? rest.icon;
  const hasIcon = icon !== undefined;

  return (
-    <RealButton
-      type={type || "button"}
-      ref={ref}
-      $neutral={neutral}
-      action={action}
-      {...rest}
-    >
+    <RealButton type={type || "button"} ref={ref} $neutral={neutral} {...rest}>
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && icon}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
@@ -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;
@@ -3,17 +3,17 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";

 type Props = {
+  children?: React.ReactNode;
  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")};
  `};
 `;

@@ -26,7 +26,7 @@ const Content = styled.div`
  `};
 `;

-const CenteredContent: React.FC<Props> = ({ children, ...rest }) => {
+const CenteredContent = ({ children, ...rest }: Props) => {
  return (
    <Container {...rest}>
      <Content>{children}</Content>
@@ -42,9 +42,8 @@ function Collaborators(props: Props) {
        filter(
          users.orderedData,
          (user) =>
-            (presentIds.includes(user.id) ||
-              document.collaboratorIds.includes(user.id)) &&
-            !user.isSuspended
+            presentIds.includes(user.id) ||
+            document.collaboratorIds.includes(user.id)
        ),
        (user) => presentIds.includes(user.id)
      ),
@@ -53,14 +52,18 @@ function Collaborators(props: Props) {

  // load any users we don't yet have in memory
  React.useEffect(() => {
-    const ids = uniq([...document.collaboratorIds, ...presentIds])
-      .filter((userId) => !users.get(userId))
-      .sort();
+    const userIdsToFetch = uniq([
+      ...document.collaboratorIds,
+      ...presentIds,
+    ]).filter((userId) => !users.get(userId));

-    if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
-      setRequestedUserIds(ids);
-      users.fetchPage({ ids, limit: 100 });
+    if (!isEqual(requestedUserIds, userIdsToFetch)) {
+      setRequestedUserIds(userIdsToFetch);
    }
+
+    userIdsToFetch
+      .filter((userId) => requestedUserIds.includes(userId))
+      .forEach((userId) => users.fetch(userId));
  }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);

  const popover = usePopoverState({
@@ -90,6 +93,7 @@ function Collaborators(props: Props) {
                    isEditing={isEditing}
                    isObserving={isObserving}
                    isCurrentUser={currentUserId === collaborator.id}
+                    profileOnClick={false}
                    onClick={
                      isObservable
                        ? (ev) => {
@@ -1,4 +1,3 @@
-import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
@@ -10,7 +9,7 @@ import ButtonLink from "~/components/ButtonLink";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
-import usePolicy from "~/hooks/usePolicy";
+import useDebouncedCallback from "~/hooks/useDebouncedCallback";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";

@@ -19,13 +18,13 @@ type Props = {
 };

 function CollectionDescription({ collection }: Props) {
-  const { collections } = useStores();
+  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 = usePolicy(collection);
+  const can = policies.abilities(collection.id);

  const handleStartEditing = React.useCallback(() => {
    setEditing(true);
@@ -49,25 +48,21 @@ function CollectionDescription({ collection }: Props) {
    [isExpanded]
  );

-  const handleSave = React.useMemo(
-    () =>
-      debounce(async (getValue) => {
-        try {
-          await collection.save({
-            description: getValue(),
-          });
-          setDirty(false);
-        } catch (err) {
-          showToast(
-            t("Sorry, an error occurred saving the collection", {
-              type: "error",
-            })
-          );
-          throw err;
-        }
-      }, 1000),
-    [collection, showToast, t]
-  );
+  const 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) => {
@@ -111,6 +106,7 @@ function CollectionDescription({ collection }: Props) {
                maxLength={1000}
                embedsDisabled
                readOnlyWriteCheckboxes
+                grow
              />
            </React.Suspense>
          ) : (
@@ -5,7 +5,6 @@ import * as React from "react";
 import Collection from "~/models/Collection";
 import { icons } from "~/components/IconPicker";
 import useStores from "~/hooks/useStores";
-import Logger from "~/utils/Logger";

 type Props = {
  collection: Collection;
@@ -37,9 +36,7 @@ function ResolvedCollectionIcon({
      const Component = icons[collection.icon].component;
      return <Component color={color} size={size} />;
    } catch (error) {
-      Logger.warn("Failed to render custom icon", {
-        icon: collection.icon,
-      });
+      console.warn("Failed to render custom icon " + collection.icon);
    }
  }

@@ -1,32 +1,25 @@
 import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
 import { observer } from "mobx-react";
-import { QuestionMarkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
 import CommandBarResults from "~/components/CommandBarResults";
-import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import useSettingsActions from "~/hooks/useSettingsAction";
-import useStores from "~/hooks/useStores";
 import { CommandBarAction } from "~/types";
-import { metaDisplay } from "~/utils/keyboard";
-import Text from "./Text";
+
+export const CommandBarOptions = {
+  animations: {
+    enterMs: 250,
+    exitMs: 200,
+  },
+};

 function CommandBar() {
  const { t } = useTranslation();
-  const { ui } = useStores();
-  const settingsActions = useSettingsActions();
-  const commandBarActions = React.useMemo(
-    () => [...rootActions, settingsActions],
-    [settingsActions]
-  );
-
-  useCommandBarActions(commandBarActions);
+  useCommandBarActions(rootActions);

  const { rootAction } = useKBar((state) => ({
    rootAction: state.currentRootActionId
@@ -37,38 +30,24 @@ function CommandBar() {
  }));

  return (
-    <>
-      <KBarPortal>
-        <Positioner>
-          <Animator>
-            <SearchActions />
-            <SearchInput
-              placeholder={`${
-                rootAction?.placeholder ||
-                rootAction?.name ||
-                t("Type a command or search")
-              }…`}
-            />
-            <CommandBarResults />
-            {ui.commandBarOpenedFromSidebar && (
-              <Hint size="small" type="tertiary">
-                <QuestionMarkIcon size={18} color="currentColor" />
-                {t(
-                  "Open search from anywhere with the {{ shortcut }} shortcut",
-                  {
-                    shortcut: `${metaDisplay} + k`,
-                  }
-                )}
-              </Hint>
-            )}
-          </Animator>
-        </Positioner>
-      </KBarPortal>
-    </>
+    <KBarPortal>
+      <Positioner>
+        <Animator>
+          <SearchInput
+            placeholder={`${
+              rootAction?.placeholder ||
+              rootAction?.name ||
+              t("Type a command or search")
+            }…`}
+          />
+          <CommandBarResults />
+        </Animator>
+      </Positioner>
+    </KBarPortal>
  );
 }

-const KBarPortal: React.FC = ({ children }) => {
+function KBarPortal({ children }: { children: React.ReactNode }) {
  const { showing } = useKBar((state) => ({
    showing: state.visualState !== "hidden",
  }));
@@ -78,20 +57,10 @@ const KBarPortal: React.FC = ({ children }) => {
  }

  return <Portal>{children}</Portal>;
-};
-
-const Hint = styled(Text)`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-top: 1px solid ${(props) => props.theme.background};
-  margin: 1px 0 0;
-  padding: 6px 16px;
-  width: 100%;
-`;
+}

 const Positioner = styled(KBarPositioner)`
-  z-index: ${depths.commandBar};
+  z-index: ${(props) => props.theme.depths.commandBar};
 `;

 const SearchInput = styled(KBarSearch)`
@@ -98,7 +98,7 @@ const Item = styled.div<{ active?: boolean }>`
  display: flex;
  align-items: center;
  justify-content: space-between;
-  cursor: var(--pointer);
+  cursor: pointer;

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

 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
  disabled?: boolean;
@@ -18,13 +17,6 @@ type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
  value: string;
 };

-export type RefHandle = {
-  focus: () => void;
-  focusAtStart: () => void;
-  focusAtEnd: () => void;
-  getComputedDirection: () => string;
-};
-
 /**
 * Defines a content editable component with the same interface as a native
 * HTMLInputElement (or, as close as we can get).
@@ -48,36 +40,13 @@ const ContentEditable = React.forwardRef(
      onClick,
      ...rest
    }: Props,
-    ref: React.RefObject<RefHandle>
+    forwardedRef: React.RefObject<HTMLSpanElement>
  ) => {
-    const contentRef = React.useRef<HTMLSpanElement>(null);
+    const innerRef = React.useRef<HTMLSpanElement>(null);
+    const ref = forwardedRef || innerRef;
    const [innerValue, setInnerValue] = React.useState<string>(value);
    const lastValue = React.useRef("");

-    React.useImperativeHandle(ref, () => ({
-      focus: () => {
-        contentRef.current?.focus();
-      },
-      focusAtStart: () => {
-        if (contentRef.current) {
-          contentRef.current.focus();
-          placeCaret(contentRef.current, true);
-        }
-      },
-      focusAtEnd: () => {
-        if (contentRef.current) {
-          contentRef.current.focus();
-          placeCaret(contentRef.current, false);
-        }
-      },
-      getComputedDirection: () => {
-        if (contentRef.current) {
-          return window.getComputedStyle(contentRef.current).direction;
-        }
-        return "ltr";
-      },
-    }));
-
    const wrappedEvent = (
      callback:
        | React.FocusEventHandler<HTMLSpanElement>
@@ -85,7 +54,7 @@ const ContentEditable = React.forwardRef(
        | React.KeyboardEventHandler<HTMLSpanElement>
        | undefined
    ) => (event: any) => {
-      const text = contentRef.current?.innerText || "";
+      const text = ref.current?.innerText || "";

      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
        event?.preventDefault();
@@ -100,44 +69,26 @@ const ContentEditable = React.forwardRef(
      callback?.(event);
    };

-    // This is to account for being within a React.Suspense boundary, in this
-    // case the component may be rendered with display: none. React 18 may solve
-    // this in the future by delaying useEffect hooks:
-    // https://github.com/facebook/react/issues/14536#issuecomment-861980492
-    const isVisible = useOnScreen(contentRef);
-
-    React.useEffect(() => {
-      if (autoFocus && isVisible && !disabled && !readOnly) {
-        contentRef.current?.focus();
+    React.useLayoutEffect(() => {
+      if (autoFocus) {
+        ref.current?.focus();
      }
-    }, [autoFocus, disabled, isVisible, readOnly, contentRef]);
+    }, [autoFocus, ref]);

    React.useEffect(() => {
-      if (value !== contentRef.current?.innerText) {
+      if (value !== ref.current?.innerText) {
        setInnerValue(value);
      }
-    }, [value, contentRef]);
-
-    // Ensure only plain text can be pasted into title when pasting from another
-    // rich text editor
-    const handlePaste = React.useCallback(
-      (event: React.ClipboardEvent<HTMLSpanElement>) => {
-        event.preventDefault();
-        const text = event.clipboardData.getData("text/plain");
-        window.document.execCommand("insertText", false, text);
-      },
-      []
-    );
+    }, [value, ref]);

    return (
      <div className={className} dir={dir} onClick={onClick}>
        <Content
-          ref={contentRef}
+          ref={ref}
          contentEditable={!disabled && !readOnly}
          onInput={wrappedEvent(onInput)}
          onBlur={wrappedEvent(onBlur)}
          onKeyDown={wrappedEvent(onKeyDown)}
-          onPaste={handlePaste}
          data-placeholder={placeholder}
          suppressContentEditableWarning
          role="textbox"
@@ -151,29 +102,7 @@ const ContentEditable = React.forwardRef(
  }
 );

-function placeCaret(element: HTMLElement, atStart: boolean) {
-  if (
-    typeof window.getSelection !== "undefined" &&
-    typeof document.createRange !== "undefined"
-  ) {
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.collapse(atStart);
-    const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(range);
-  }
-}
-
 const Content = styled.span`
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
-  color: ${(props) => props.theme.text};
-  -webkit-text-fill-color: ${(props) => props.theme.text};
-  outline: none;
-  resize: none;
-  cursor: text;
-
  &:empty {
    display: inline-block;
  }
@@ -1,17 +1,18 @@
-import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { hover } from "~/styles";
 import MenuIconWrapper from "../MenuIconWrapper";

 type Props = {
-  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
+  onClick?: (arg0: React.SyntheticEvent) => void | Promise<void>;
+  children?: React.ReactNode;
  selected?: boolean;
  disabled?: boolean;
  dangerous?: boolean;
-  to?: LocationDescriptor;
+  to?: string;
  href?: string;
  target?: "_blank";
  as?: string | React.ComponentType<any>;
@@ -20,7 +21,7 @@ type Props = {
  icon?: React.ReactElement;
 };

-const MenuItem: React.FC<Props> = ({
+const MenuItem = ({
  onClick,
  children,
  selected,
@@ -29,7 +30,7 @@ const MenuItem: React.FC<Props> = ({
  hide,
  icon,
  ...rest
-}) => {
+}: Props) => {
  const handleClick = React.useCallback(
    (ev) => {
      if (onClick) {
@@ -92,14 +93,11 @@ const Spacer = styled.svg`
  flex-shrink: 0;
 `;

-type MenuAnchorProps = {
+export const MenuAnchorCSS = css<{
  level?: number;
  disabled?: boolean;
  dangerous?: boolean;
-  disclosure?: boolean;
-};
-
-export const MenuAnchorCSS = css<MenuAnchorProps>`
+}>`
  display: flex;
  margin: 0;
  border: 0;
@@ -116,7 +114,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
  cursor: default;
  user-select: none;
  white-space: nowrap;
-  position: relative;

  svg:not(:last-child) {
    margin-right: 4px;
@@ -132,26 +129,22 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
      ? "pointer-events: none;"
      : `

-  @media (hover: hover) {
-    &:hover,
-    &:focus,
-    &.focus-visible {
-      color: ${props.theme.white};
-      background: ${props.dangerous ? props.theme.danger : props.theme.primary};
-      box-shadow: none;
-      cursor: var(--pointer);
+  &:${hover},
+  &:focus,
+  &.focus-visible {
+    color: ${props.theme.white};
+    background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+    box-shadow: none;
+    cursor: pointer;

-      svg {
-        fill: ${props.theme.white};
-      }
+    svg {
+      fill: ${props.theme.white};
    }
  }
  `};

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

-export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
+export default function Separator(rest: any) {
  return (
    <MenuSeparator {...rest}>
      {(props) => <HorizontalRule {...props} />}
@@ -21,7 +21,6 @@ import {
 } from "~/types";
 import Header from "./Header";
 import MenuItem, { MenuAnchor } from "./MenuItem";
-import MouseSafeArea from "./MouseSafeArea";
 import Separator from "./Separator";
 import ContextMenu from ".";

@@ -54,13 +53,12 @@ const Submenu = React.forwardRef(
      <>
        <MenuButton ref={ref} {...menu} {...rest}>
          {(props) => (
-            <MenuAnchor disclosure {...props}>
+            <MenuAnchor {...props}>
              {title} <Disclosure color={theme.textTertiary} />
            </MenuAnchor>
          )}
        </MenuButton>
        <ContextMenu {...menu} aria-label={t("Submenu")}>
-          <MouseSafeArea parentRef={menu.unstable_popoverRef} />
          <Template {...menu} items={templateItems} />
        </ContextMenu>
      </>
@@ -69,27 +67,29 @@ const Submenu = React.forwardRef(
 );

 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
-  return items
-    .filter((item) => item.visible !== false)
-    .reduce((acc, item) => {
-      // trim separator if the previous item was a separator
-      if (
-        item.type === "separator" &&
-        acc[acc.length - 1]?.type === "separator"
-      ) {
-        return acc;
-      }
-      return [...acc, item];
-    }, [] as TMenuItem[])
-    .filter((item, index, arr) => {
-      if (
-        item.type === "separator" &&
-        (index === 0 || index === arr.length - 1)
-      ) {
-        return false;
-      }
-      return true;
-    });
+  let filtered = items.filter((item) => item.visible !== false);
+
+  // this block literally just trims unnecessary separators
+  filtered = filtered.reduce((acc, item, index) => {
+    // trim separators from start / end
+    if (item.type === "separator" && index === 0) {
+      return acc;
+    }
+    if (item.type === "separator" && index === filtered.length - 1) {
+      return acc;
+    }
+
+    // trim double separators looking ahead / behind
+    const prev = filtered[index - 1];
+    if (prev && prev.type === "separator" && item.type === "separator") {
+      return acc;
+    }
+
+    // otherwise, continue
+    return [...acc, item];
+  }, []);
+
+  return filtered;
 }

 function Template({ items, actions, context, ...menu }: Props) {
@@ -1,17 +1,10 @@
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
+import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
-import styled, { DefaultTheme } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
-import Scrollable from "~/components/Scrollable";
-import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
-import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
-import useStores from "~/hooks/useStores";
-import useUnmount from "~/hooks/useUnmount";
 import {
  fadeIn,
  fadeAndSlideUp,
@@ -41,71 +34,36 @@ type Props = {
  visible?: boolean;
  placement?: Placement;
  animating?: boolean;
+  children: React.ReactNode;
  unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
  onOpen?: () => void;
  onClose?: () => void;
  hide?: () => void;
 };

-const ContextMenu: React.FC<Props> = ({
+export default function ContextMenu({
  children,
  onOpen,
  onClose,
  ...rest
-}) => {
+}: Props) {
  const previousVisible = usePrevious(rest.visible);
  const maxHeight = useMenuHeight(rest.visible, rest.unstable_disclosureRef);
  const backgroundRef = React.useRef<HTMLDivElement>(null);
-  const { ui } = useStores();
-  const { t } = useTranslation();
-  const { setIsMenuOpen } = useMenuContext();
-  const isMobile = useMobile();
-
-  useUnmount(() => {
-    setIsMenuOpen(false);
-  });

  React.useEffect(() => {
    if (rest.visible && !previousVisible) {
      if (onOpen) {
        onOpen();
      }
-      if (rest["aria-label"] !== t("Submenu")) {
-        setIsMenuOpen(true);
-      }
    }

    if (!rest.visible && previousVisible) {
      if (onClose) {
        onClose();
      }
-      if (rest["aria-label"] !== t("Submenu")) {
-        setIsMenuOpen(false);
-      }
    }
-  }, [
-    onOpen,
-    onClose,
-    previousVisible,
-    rest.visible,
-    ui.sidebarCollapsed,
-    setIsMenuOpen,
-    rest,
-    t,
-  ]);
-
-  // We must manually manage scroll lock for iOS support so that the scrollable
-  // element can be passed into body-scroll-lock. See:
-  // https://github.com/ariakit/ariakit/issues/469
-  React.useEffect(() => {
-    const scrollElement = backgroundRef.current;
-    if (rest.visible && scrollElement) {
-      disableBodyScroll(scrollElement);
-    }
-    return () => {
-      scrollElement && enableBodyScroll(scrollElement);
-    };
-  }, [rest.visible]);
+  }, [onOpen, onClose, previousVisible, rest.visible]);

  // Perf win – don't render anything until the menu has been opened
  if (!rest.visible && !previousVisible) {
@@ -116,7 +74,7 @@ const ContextMenu: React.FC<Props> = ({
  // trigger and the bottom of the window
  return (
    <>
-      <Menu hideOnClickOutside={!isMobile} preventBodyScroll={false} {...rest}>
+      <Menu hideOnClickOutside preventBodyScroll {...rest}>
        {(props) => {
          // kind of hacky, but this is an effective way of telling which way
          // the menu will _actually_ be placed when taking into account screen
@@ -126,43 +84,34 @@ const ContextMenu: React.FC<Props> = ({
          const rightAnchor = props.placement === "bottom-end";

          return (
-            <>
-              {isMobile && (
-                <Backdrop
-                  onClick={(ev) => {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    rest.hide?.();
-                  }}
-                />
-              )}
-              <Position {...props}>
-                <Background
-                  dir="auto"
-                  topAnchor={topAnchor}
-                  rightAnchor={rightAnchor}
-                  ref={backgroundRef}
-                  hiddenScrollbars
-                  style={
-                    maxHeight && topAnchor
-                      ? {
-                          maxHeight,
-                        }
-                      : undefined
-                  }
-                >
-                  {rest.visible || rest.animating ? children : null}
-                </Background>
-              </Position>
-            </>
+            <Position {...props}>
+              <Background
+                dir="auto"
+                topAnchor={topAnchor}
+                rightAnchor={rightAnchor}
+                ref={backgroundRef}
+                style={
+                  maxHeight && topAnchor
+                    ? {
+                        maxHeight,
+                      }
+                    : undefined
+                }
+              >
+                {rest.visible || rest.animating ? children : null}
+              </Background>
+            </Position>
          );
        }}
      </Menu>
+      {(rest.visible || rest.animating) && (
+        <Portal>
+          <Backdrop onClick={rest.hide} />
+        </Portal>
+      )}
    </>
  );
-};
-
-export default ContextMenu;
+}

 export const Backdrop = styled.div`
  animation: ${fadeIn} 200ms ease-in-out;
@@ -172,17 +121,19 @@ export const Backdrop = styled.div`
  right: 0;
  bottom: 0;
  background: ${(props) => props.theme.backdrop};
-  z-index: ${depths.menu - 1};
+  z-index: ${(props) => props.theme.depths.menu - 1};
+
+  ${breakpoint("tablet")`
+    display: none;
+  `};
 `;

 export const Position = styled.div`
  position: absolute;
-  z-index: ${depths.menu};
+  z-index: ${(props) => props.theme.depths.menu};

-  /*
-   * overrides make mobile-first coding style challenging
-   * so we explicitly define mobile breakpoint here
-   */
+  // overrides make mobile-first coding style challenging
+  // so we explicitly define mobile breakpoint here
  ${breakpoint("mobile", "tablet")`
    position: fixed !important;
    transform: none !important;
@@ -193,13 +144,10 @@ export const Position = styled.div`
  `};
 `;

-type BackgroundProps = {
+export const Background = styled.div<{
  topAnchor?: boolean;
  rightAnchor?: boolean;
-  theme: DefaultTheme;
-};
-
-export const Background = styled(Scrollable)<BackgroundProps>`
+}>`
  animation: ${mobileContextMenu} 200ms ease;
  transform-origin: 50% 100%;
  max-width: 100%;
@@ -208,6 +156,8 @@ export const Background = styled(Scrollable)<BackgroundProps>`
  padding: 6px 0;
  min-width: 180px;
  min-height: 44px;
+  overflow: hidden;
+  overflow-y: auto;
  max-height: 75vh;
  pointer-events: all;
  font-weight: normal;
@@ -217,12 +167,11 @@ export const Background = styled(Scrollable)<BackgroundProps>`
  }

  ${breakpoint("tablet")`
-    animation: ${(props: BackgroundProps) =>
+    animation: ${(props: any) =>
      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
-    transform-origin: ${(props: BackgroundProps) =>
-      props.rightAnchor ? "75%" : "25%"} 0;
+    transform-origin: ${(props: any) => (props.rightAnchor ? "75%" : "25%")} 0;
    max-width: 276px;
-    background: ${(props: BackgroundProps) => props.theme.menuBackground};
-    box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
+    background: ${(props: any) => props.theme.menuBackground};
+    box-shadow: ${(props: any) => props.theme.menuShadow};
  `};
 `;
@@ -1,12 +1,11 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
-import env from "~/env";

 type Props = {
  text: string;
  children?: React.ReactElement;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  onCopy?: () => void;
+  onCopy: () => void;
 };

 class CopyToClipboard extends React.PureComponent<Props> {
@@ -15,11 +14,12 @@ class CopyToClipboard extends React.PureComponent<Props> {
    const elem = React.Children.only(children);

    copy(text, {
-      debug: env.ENVIRONMENT !== "production",
+      debug: process.env.NODE_ENV !== "production",
      format: "text/plain",
    });
-
-    onCopy?.();
+    if (onCopy) {
+      onCopy();
+    }

    if (elem && elem.props && typeof elem.props.onClick === "function") {
      elem.props.onClick(ev);
@@ -1,7 +1,6 @@
 import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Optional } from "utility-types";
 import CollectionIcon from "~/components/CollectionIcon";
 import Flex from "~/components/Flex";
 import InputSelect from "~/components/InputSelect";
@@ -9,9 +8,7 @@ import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";

-type DefaultCollectionInputSelectProps = Optional<
-  React.ComponentProps<typeof InputSelect>
-> & {
+type DefaultCollectionInputSelectProps = {
  onSelectCollection: (collection: string) => void;
  defaultCollectionId: string | null;
 };
@@ -19,7 +16,6 @@ type DefaultCollectionInputSelectProps = Optional<
 const DefaultCollectionInputSelect = ({
  onSelectCollection,
  defaultCollectionId,
-  ...rest
 }: DefaultCollectionInputSelectProps) => {
  const { t } = useTranslation();
  const { collections } = useStores();
@@ -92,11 +88,14 @@ const DefaultCollectionInputSelect = ({
  return (
    <InputSelect
      value={defaultCollectionId ?? "home"}
+      label={t("Start view")}
      options={options}
      onChange={onSelectCollection}
      ariaLabel={t("Default collection")}
+      note={t(
+        "This is the screen that team members will first see when they sign in."
+      )}
      short
-      {...rest}
    />
  );
 };
@@ -22,7 +22,6 @@ function Dialogs() {
        <Modal
          key={id}
          isOpen={modal.isOpen}
-          isCentered={modal.isCentered}
          onRequestClose={() => dialogs.closeModal(id)}
          title={modal.title}
        >
@@ -12,6 +12,7 @@ import { collectionUrl } from "~/utils/routeHelpers";

 type Props = {
  document: Document;
+  children?: React.ReactNode;
  onlyText?: boolean;
 };

@@ -48,11 +49,7 @@ function useCategory(document: Document): MenuInternalLink | null {
  return null;
 }

-const DocumentBreadcrumb: React.FC<Props> = ({
-  document,
-  children,
-  onlyText,
-}) => {
+const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
  const { collections } = useStores();
  const { t } = useTranslation();
  const category = useCategory(document);
@@ -3,10 +3,11 @@ import { CSS } from "@dnd-kit/utilities";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
 import { CloseIcon, DocumentIcon, ClockIcon } from "outline-icons";
+import { getLuminance, transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import styled, { useTheme } from "styled-components";
+import styled, { css } from "styled-components";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
@@ -14,8 +15,6 @@ import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import CollectionIcon from "./CollectionIcon";
-import EmojiIcon from "./EmojiIcon";
-import Squircle from "./Squircle";
 import Text from "./Text";
 import Tooltip from "./Tooltip";

@@ -33,7 +32,6 @@ type Props = {
 function DocumentCard(props: Props) {
  const { t } = useTranslation();
  const { collections } = useStores();
-  const theme = useTheme();
  const { document, pin, canUpdatePin, isDraggable } = props;
  const collection = collections.get(document.collectionId);
  const {
@@ -43,24 +41,16 @@ function DocumentCard(props: Props) {
    transform,
    transition,
    isDragging,
-  } = useSortable({
-    id: props.document.id,
-    disabled: !isDraggable || !canUpdatePin,
-  });
+  } = useSortable({ id: props.document.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

-  const handleUnpin = React.useCallback(
-    (ev) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      pin?.delete();
-    },
-    [pin]
-  );
+  const handleUnpin = React.useCallback(() => {
+    pin?.delete();
+  }, [pin]);

  return (
    <Reorderable
@@ -68,8 +58,6 @@ function DocumentCard(props: Props) {
      style={style}
      $isDragging={isDragging}
      {...attributes}
-      {...listeners}
-      tabIndex={-1}
    >
      <AnimatePresence
        initial={{ opacity: 0, scale: 0.95 }}
@@ -85,6 +73,12 @@ function DocumentCard(props: Props) {
      >
        <DocumentLink
          dir={document.dir}
+          style={{
+            background:
+              collection?.color && getLuminance(collection.color) < 0.6
+                ? collection.color
+                : undefined,
+          }}
          $isDragging={isDragging}
          to={{
            pathname: document.url,
@@ -94,117 +88,89 @@ function DocumentCard(props: Props) {
          }}
        >
          <Content justify="space-between" column>
-            <Fold
-              width="20"
-              height="21"
-              viewBox="0 0 20 21"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M19.5 20.5H6C2.96243 20.5 0.5 18.0376 0.5 15V0.5H0.792893L19.5 19.2071V20.5Z" />
-              <path d="M19.5 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V0.5H0.792893L19.5 19.2071V19.5Z" />
-            </Fold>
-
-            {document.emoji ? (
-              <Squircle color={theme.slateLight}>
-                <EmojiIcon emoji={document.emoji} size={26} />
-              </Squircle>
+            {collection?.icon &&
+            collection?.icon !== "collection" &&
+            !pin?.collectionId ? (
+              <CollectionIcon collection={collection} color="white" />
            ) : (
-              <Squircle color={collection?.color}>
-                {collection?.icon &&
-                collection?.icon !== "collection" &&
-                !pin?.collectionId ? (
-                  <CollectionIcon collection={collection} color="white" />
-                ) : (
-                  <DocumentIcon color="white" />
-                )}
-              </Squircle>
+              <DocumentIcon color="white" />
            )}
            <div>
-              <Heading dir={document.dir}>
-                {document.emoji
-                  ? document.titleWithDefault.replace(document.emoji, "")
-                  : document.titleWithDefault}
-              </Heading>
+              <Heading dir={document.dir}>{document.titleWithDefault}</Heading>
              <DocumentMeta size="xsmall">
-                <Clock color="currentColor" size={18} />
-                <Time
-                  dateTime={document.updatedAt}
-                  tooltipDelay={500}
-                  addSuffix
-                  shorten
-                />
+                <ClockIcon color="currentColor" size={18} />{" "}
+                <Time dateTime={document.updatedAt} addSuffix shorten />
              </DocumentMeta>
            </div>
          </Content>
-          {canUpdatePin && (
-            <Actions dir={document.dir} gap={4}>
-              {!isDragging && pin && (
-                <Tooltip tooltip={t("Unpin")}>
-                  <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                    <CloseIcon color="currentColor" />
-                  </PinButton>
-                </Tooltip>
-              )}
-            </Actions>
-          )}
        </DocumentLink>
+        {canUpdatePin && (
+          <Actions dir={document.dir} gap={4}>
+            {!isDragging && pin && (
+              <Tooltip tooltip={t("Unpin")}>
+                <PinButton onClick={handleUnpin}>
+                  <CloseIcon color="currentColor" />
+                </PinButton>
+              </Tooltip>
+            )}
+            {isDraggable && (
+              <DragHandle $isDragging={isDragging} {...listeners}>
+                :::
+              </DragHandle>
+            )}
+          </Actions>
+        )}
      </AnimatePresence>
    </Reorderable>
  );
 }

-const Clock = styled(ClockIcon)`
-  flex-shrink: 0;
-`;
-
-const AnimatePresence = styled(m.div)`
-  width: 100%;
-  height: 100%;
-`;
-
-const Fold = styled.svg`
-  fill: ${(props) => props.theme.background};
-  stroke: ${(props) => props.theme.inputBorder};
-  background: ${(props) => props.theme.background};
-
-  position: absolute;
-  top: -1px;
-  right: -2px;
-`;
-
 const PinButton = styled(NudeButton)`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${(props) => props.theme.white75};

  &:hover,
  &:active {
-    color: ${(props) => props.theme.text};
+    color: ${(props) => props.theme.white};
  }
 `;

 const Actions = styled(Flex)`
  position: absolute;
-  top: 4px;
-  right: ${(props) => (props.dir === "rtl" ? "auto" : "4px")};
-  left: ${(props) => (props.dir === "rtl" ? "4px" : "auto")};
+  top: 12px;
+  right: ${(props) => (props.dir === "rtl" ? "auto" : "12px")};
+  left: ${(props) => (props.dir === "rtl" ? "12px" : "auto")};
  opacity: 0;
-  color: ${(props) => props.theme.textTertiary};
+  transition: opacity 100ms ease-in-out;

  // move actions above content
  z-index: 2;
 `;

+const DragHandle = styled.div<{ $isDragging: boolean }>`
+  cursor: ${(props) => (props.$isDragging ? "grabbing" : "grab")};
+  padding: 0 4px;
+  font-weight: bold;
+  color: ${(props) => props.theme.white75};
+  line-height: 1.35;
+
+  &:hover,
+  &:active {
+    color: ${(props) => props.theme.white};
+  }
+`;
+
+const AnimatePresence = m.div;
+
 const Reorderable = styled.div<{ $isDragging: boolean }>`
  position: relative;
  user-select: none;
-  touch-action: none;
-  width: 170px;
-  height: 180px;
-  transition: box-shadow 200ms ease;
+  border-radius: 8px;

  // move above other cards when dragging
  z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
-  pointer-events: ${(props) => (props.$isDragging ? "none" : "inherit")};
+  transform: scale(${(props) => (props.$isDragging ? "1.025" : "1")});
+  box-shadow: ${(props) =>
+    props.$isDragging ? "0 0 20px rgba(0,0,0,0.3);" : "0 0 0 rgba(0,0,0,0)"};

  &:hover ${Actions} {
    opacity: 1;
@@ -214,34 +180,45 @@ const Reorderable = styled.div<{ $isDragging: boolean }>`
 const Content = styled(Flex)`
  min-width: 0;
  height: 100%;
+
+  // move content above ::after
+  position: relative;
+  z-index: 1;
 `;

 const DocumentMeta = styled(Text)`
  display: flex;
  align-items: center;
  gap: 2px;
-  color: ${(props) => props.theme.textTertiary};
-  margin: 0 0 0 -2px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  color: ${(props) => transparentize(0.25, props.theme.white)};
+  margin: 0;
 `;

 const DocumentLink = styled(Link)<{
+  $menuOpen?: boolean;
  $isDragging?: boolean;
 }>`
  position: relative;
  display: block;
  padding: 12px;
-  width: 100%;
-  height: 100%;
  border-radius: 8px;
-  cursor: var(--pointer);
-  background: ${(props) => props.theme.background};
+  height: 160px;
+  background: ${(props) => props.theme.slate};
+  color: ${(props) => props.theme.white};
  transition: transform 50ms ease-in-out;
-  border: 1px solid ${(props) => props.theme.inputBorder};
-  border-bottom-width: 2px;
-  border-right-width: 2px;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+    border-radius: 8px;
+    pointer-events: none;
+  }

  ${Actions} {
    opacity: 0;
@@ -251,22 +228,28 @@ const DocumentLink = styled(Link)<{
  &:active,
  &:focus,
  &:focus-within {
-    transform: ${(props) => (props.$isDragging ? "scale(1.1)" : "scale(1.08)")}
-      rotate(-2deg);
-    box-shadow: ${(props) =>
-      props.$isDragging
-        ? "0 0 20px rgba(0,0,0,0.2);"
-        : "0 0 10px rgba(0,0,0,0.1)"};
-    z-index: 1;
-
-    ${Fold} {
-      display: none;
-    }
-
    ${Actions} {
      opacity: 1;
    }
+
+    ${(props) =>
+      !props.$isDragging &&
+      css`
+        &:after {
+          background: rgba(0, 0, 0, 0.1);
+        }
+      `}
  }
+
+  ${(props) =>
+    props.$menuOpen &&
+    css`
+      background: ${(props) => props.theme.listItemHoverBackground};
+
+      ${Actions} {
+        opacity: 1;
+      }
+    `}
 `;

 const Heading = styled.h3`
@@ -276,7 +259,7 @@ const Heading = styled.h3`
  max-height: 66px; // 3*line-height
  overflow: hidden;

-  color: ${(props) => props.theme.text};
+  color: ${(props) => props.theme.white};
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
@@ -1,10 +1,9 @@
-import { m } from "framer-motion";
 import { observer } from "mobx-react";
 import { CloseIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
-import styled, { useTheme } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Event from "~/models/Event";
 import Button from "~/components/Button";
@@ -12,7 +11,6 @@ import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
 import PaginatedEventList from "~/components/PaginatedEventList";
 import Scrollable from "~/components/Scrollable";
-import useKeyDown from "~/hooks/useKeyDown";
 import useStores from "~/hooks/useStores";
 import { documentUrl } from "~/utils/routeHelpers";

@@ -23,7 +21,6 @@ function DocumentHistory() {
  const { t } = useTranslation();
  const match = useRouteMatch<{ documentSlug: string }>();
  const history = useHistory();
-  const theme = useTheme();
  const document = documents.getByUrl(match.params.documentSlug);

  const eventsInDocument = document
@@ -47,8 +44,7 @@ function DocumentHistory() {
      eventsInDocument.unshift(
        new Event(
          {
-            id: "live",
-            name: "documents.live_editing",
+            name: "documents.latest_version",
            documentId: document.id,
            createdAt: document.updatedAt,
            actor: document.updatedBy,
@@ -61,25 +57,8 @@ function DocumentHistory() {
    return eventsInDocument;
  }, [eventsInDocument, events, document]);

-  useKeyDown("Escape", onCloseHistory);
-
  return (
-    <Sidebar
-      initial={{
-        width: 0,
-      }}
-      animate={{
-        transition: {
-          type: "spring",
-          bounce: 0.2,
-          duration: 0.6,
-        },
-        width: theme.sidebarWidth,
-      }}
-      exit={{
-        width: 0,
-      }}
-    >
+    <Sidebar>
      {document ? (
        <Position column>
          <Header>
@@ -93,14 +72,13 @@ function DocumentHistory() {
          </Header>
          <Scrollable topShadow>
            <PaginatedEventList
-              aria-label={t("History")}
              fetch={events.fetchPage}
              events={items}
              options={{
                documentId: document.id,
              }}
              document={document}
-              empty={<EmptyHistory>{t("No history yet")}</EmptyHistory>}
+              empty={<Empty>{t("Oh weird, there's nothing here")}</Empty>}
            />
          </Scrollable>
        </Position>
@@ -109,10 +87,6 @@ function DocumentHistory() {
  );
 }

-const EmptyHistory = styled(Empty)`
-  padding: 0 12px;
-`;
-
 const Position = styled(Flex)`
  position: fixed;
  top: 0;
@@ -120,7 +94,7 @@ const Position = styled(Flex)`
  width: ${(props) => props.theme.sidebarWidth}px;
 `;

-const Sidebar = styled(m.div)`
+const Sidebar = styled(Flex)`
  display: none;
  position: relative;
  flex-shrink: 0;
@@ -150,7 +124,7 @@ const Title = styled(Flex)`
 const Header = styled(Flex)`
  align-items: center;
  position: relative;
-  padding: 16px 12px;
+  padding: 12px;
  color: ${(props) => props.theme.text};
  flex-shrink: 0;
 `;
@@ -0,0 +1,28 @@
+import ArrowKeyNavigation from "boundless-arrow-key-navigation";
+import * as React from "react";
+import Document from "~/models/Document";
+import DocumentListItem from "~/components/DocumentListItem";
+
+type Props = {
+  documents: Document[];
+  limit?: number;
+  showCollection?: boolean;
+  showPublished?: boolean;
+  showPin?: boolean;
+  showDraft?: boolean;
+  showTemplate?: boolean;
+};
+
+export default function DocumentList({ limit, documents, ...rest }: Props) {
+  const items = limit ? documents.splice(0, limit) : documents;
+  return (
+    <ArrowKeyNavigation
+      mode={ArrowKeyNavigation.mode.VERTICAL}
+      defaultActiveChildIndex={0}
+    >
+      {items.map((document) => (
+        <DocumentListItem key={document.id} document={document} {...rest} />
+      ))}
+    </ArrowKeyNavigation>
+  );
+}
@@ -3,7 +3,6 @@ import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { CompositeStateReturn, CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Document from "~/models/Document";
@@ -13,13 +12,12 @@ import DocumentMeta from "~/components/DocumentMeta";
 import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
-import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { hover } from "~/styles";
 import { newDocumentPath } from "~/utils/routeHelpers";
@@ -34,8 +32,7 @@ type Props = {
  showPin?: boolean;
  showDraft?: boolean;
  showTemplate?: boolean;
-} & CompositeStateReturn;
-
+};
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;

 function replaceResultMarks(tag: string) {
@@ -49,8 +46,9 @@ function DocumentListItem(
  ref: React.RefObject<HTMLAnchorElement>
 ) {
  const { t } = useTranslation();
-  const user = useCurrentUser();
-  const team = useCurrentTeam();
+  const { policies } = useStores();
+  const currentUser = useCurrentUser();
+  const currentTeam = useCurrentTeam();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();

  const {
@@ -63,22 +61,19 @@ function DocumentListItem(
    showTemplate,
    highlight,
    context,
-    ...rest
  } = props;
  const queryIsInTitle =
    !!highlight &&
    !!document.title.toLowerCase().includes(highlight.toLowerCase());
  const canStar =
    !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = usePolicy(team);
-  const canCollection = usePolicy(document.collectionId);
+  const can = policies.abilities(currentTeam.id);
+  const canCollection = policies.abilities(document.collectionId);

  return (
-    <CompositeItem
-      as={DocumentLink}
+    <DocumentLink
      ref={ref}
      dir={document.dir}
-      role="menuitem"
      $isStarred={document.isStarred}
      $menuOpen={menuOpen}
      to={{
@@ -87,7 +82,6 @@ function DocumentListItem(
          title: document.titleWithDefault,
        },
      }}
-      {...rest}
    >
      <Content>
        <Heading dir={document.dir}>
@@ -96,7 +90,7 @@ function DocumentListItem(
            highlight={highlight}
            dir={document.dir}
          />
-          {document.isBadgedNew && document.createdBy.id !== user.id && (
+          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
            <Badge yellow>{t("New")}</Badge>
          )}
          {canStar && (
@@ -161,7 +155,7 @@ function DocumentListItem(
          modal={false}
        />
      </Actions>
-    </CompositeItem>
+    </DocumentLink>
  );
 }

@@ -178,13 +172,6 @@ const Actions = styled(EventBoundary)`
  flex-shrink: 0;
  flex-grow: 0;

-  ${NudeButton} {
-    &:hover,
-    &[aria-expanded="true"] {
-      background: ${(props) => props.theme.sidebarControlHoverBackground};
-    }
-  }
-
  ${breakpoint("tablet")`
    display: flex;
  `};
@@ -201,11 +188,6 @@ const DocumentLink = styled(Link)<{
  border-radius: 8px;
  max-height: 50vh;
  width: calc(100vw - 8px);
-  cursor: var(--pointer);
-
-  &:focus-visible {
-    outline: none;
-  }

  ${breakpoint("tablet")`
    width: auto;
@@ -1,4 +1,3 @@
-import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -12,27 +11,44 @@ import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

+const Container = styled(Flex)<{ rtl?: boolean }>`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  color: ${(props) => props.theme.textTertiary};
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+`;
+
+const Viewed = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+const Modified = styled.span<{ highlight?: boolean }>`
+  font-weight: ${(props) => (props.highlight ? "600" : "400")};
+`;
+
 type Props = {
  showCollection?: boolean;
  showPublished?: boolean;
  showLastViewed?: boolean;
  showParentDocuments?: boolean;
  document: Document;
-  replace?: boolean;
-  to?: LocationDescriptor;
+  children?: React.ReactNode;
+  to?: string;
 };

-const DocumentMeta: React.FC<Props> = ({
+function DocumentMeta({
  showPublished,
  showCollection,
  showLastViewed,
  showParentDocuments,
  document,
  children,
-  replace,
  to,
  ...rest
-}) => {
+}: Props) {
  const { t } = useTranslation();
  const { collections } = useStores();
  const user = useCurrentUser();
@@ -58,61 +74,42 @@ const DocumentMeta: React.FC<Props> = ({

  const collection = collections.get(document.collectionId);
  const lastUpdatedByCurrentUser = user.id === updatedBy.id;
-  const userName = updatedBy.name;
  let content;

  if (deletedAt) {
    content = (
      <span>
-        {lastUpdatedByCurrentUser
-          ? t("You deleted")
-          : t("{{ userName }} deleted", { userName })}{" "}
-        <Time dateTime={deletedAt} addSuffix />
+        {t("deleted")} <Time dateTime={deletedAt} addSuffix />
      </span>
    );
  } else if (archivedAt) {
    content = (
      <span>
-        {lastUpdatedByCurrentUser
-          ? t("You archived")
-          : t("{{ userName }} archived", { userName })}{" "}
-        <Time dateTime={archivedAt} addSuffix />
+        {t("archived")} <Time dateTime={archivedAt} addSuffix />
      </span>
    );
  } else if (createdAt === updatedAt) {
    content = (
      <span>
-        {lastUpdatedByCurrentUser
-          ? t("You created")
-          : t("{{ userName }} created", { userName })}{" "}
-        <Time dateTime={updatedAt} addSuffix />
+        {t("created")} <Time dateTime={updatedAt} addSuffix />
      </span>
    );
  } else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
    content = (
      <span>
-        {lastUpdatedByCurrentUser
-          ? t("You published")
-          : t("{{ userName }} published", { userName })}{" "}
-        <Time dateTime={publishedAt} addSuffix />
+        {t("published")} <Time dateTime={publishedAt} addSuffix />
      </span>
    );
  } else if (isDraft) {
    content = (
      <span>
-        {lastUpdatedByCurrentUser
-          ? t("You saved")
-          : t("{{ userName }} saved", { userName })}{" "}
-        <Time dateTime={updatedAt} addSuffix />
+        {t("saved")} <Time dateTime={updatedAt} addSuffix />
      </span>
    );
  } else {
    content = (
      <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
-        {lastUpdatedByCurrentUser
-          ? t("You updated")
-          : t("{{ userName }} updated", { userName })}{" "}
-        <Time dateTime={updatedAt} addSuffix />
+        {t("updated")} <Time dateTime={updatedAt} addSuffix />
      </Modified>
    );
  }
@@ -147,13 +144,8 @@ const DocumentMeta: React.FC<Props> = ({

  return (
    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
-      {to ? (
-        <Link to={to} replace={replace}>
-          {content}
-        </Link>
-      ) : (
-        content
-      )}
+      {lastUpdatedByCurrentUser ? t("You") : updatedBy.name}&nbsp;
+      {to ? <Link to={to}>{content}</Link> : content}
      {showCollection && collection && (
        <span>
          &nbsp;{t("in")}&nbsp;
@@ -180,24 +172,6 @@ const DocumentMeta: React.FC<Props> = ({
      {children}
    </Container>
  );
-};
-
-const Container = styled(Flex)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
-  color: ${(props) => props.theme.textTertiary};
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-`;
-
-const Viewed = styled.span`
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-const Modified = styled.span<{ highlight?: boolean }>`
-  font-weight: ${(props) => (props.highlight ? "600" : "400")};
-`;
+}

 export default observer(DocumentMeta);
@@ -1,5 +1,4 @@
-import { LocationDescriptor } from "history";
-import { observer, useObserver } from "mobx-react";
+import { useObserver } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
@@ -13,7 +12,7 @@ import useStores from "~/hooks/useStores";
 type Props = {
  document: Document;
  isDraft: boolean;
-  to?: LocationDescriptor;
+  to?: string;
  rtl?: boolean;
 };

@@ -24,6 +23,14 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
  const totalViewers = documentViews.length;
  const onlyYou = totalViewers === 1 && documentViews[0].user.id;

+  React.useEffect(() => {
+    if (!document.isDeleted) {
+      views.fetchPage({
+        documentId: document.id,
+      });
+    }
+  }, [views, document.id, document.isDeleted]);
+
  const popover = usePopoverState({
    gutter: 8,
    placement: "bottom",
@@ -31,7 +38,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
  });

  return (
-    <Meta document={document} to={to} replace {...rest}>
+    <Meta document={document} to={to} {...rest}>
      {totalViewers && !isDraft ? (
        <PopoverDisclosure {...popover}>
          {(props) => (
@@ -76,4 +83,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
  }
 `;

-export default observer(DocumentMetaWithViews);
+export default DocumentMetaWithViews;
@@ -1,4 +1,3 @@
-import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, TFunction } from "react-i18next";
@@ -61,4 +60,4 @@ const Done = styled(DoneIcon)<{ $animated: boolean }>`
  transform-origin: center center;
 `;

-export default observer(DocumentTasks);
+export default DocumentTasks;
@@ -1,52 +0,0 @@
-import invariant from "invariant";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { useHistory } from "react-router-dom";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
-import { documentUrl } from "~/utils/routeHelpers";
-
-type Props = {
-  documentId: string;
-};
-
-function DocumentTemplatizeDialog({ documentId }: Props) {
-  const history = useHistory();
-  const { showToast } = useToasts();
-  const { t } = useTranslation();
-  const { documents } = useStores();
-  const document = documents.get(documentId);
-  invariant(document, "Document must exist");
-
-  const handleSubmit = React.useCallback(async () => {
-    const template = await document?.templatize();
-    if (template) {
-      history.push(documentUrl(template));
-      showToast(t("Template created, go ahead and customize it"), {
-        type: "info",
-      });
-    }
-  }, [document, showToast, history, t]);
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Create template")}
-      savingText={`${t("Creating")}…`}
-    >
-      <Trans
-        defaults="Creating a template from <em>{{titleWithDefault}}</em> is a non-destructive action – we'll make a copy of the document and turn it into a template that can be used as a starting point for new documents."
-        values={{
-          titleWithDefault: document.titleWithDefault,
-        }}
-        components={{
-          em: <strong />,
-        }}
-      />
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(DocumentTemplatizeDialog);
@@ -4,7 +4,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import Document from "~/models/Document";
-import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
@@ -41,9 +40,8 @@ function DocumentViews({ document, isOpen }: Props) {
    <>
      {isOpen && (
        <PaginatedList
-          aria-label={t("Viewers")}
          items={users}
-          renderItem={(item: User) => {
+          renderItem={(item) => {
            const view = documentViews.find((v) => v.user.id === item.id);
            const isPresent = presentIds.includes(item.id);
            const isEditing = editingIds.includes(item.id);
@@ -63,6 +61,7 @@ function DocumentViews({ document, isOpen }: Props) {
                subtitle={subtitle}
                image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
                border={false}
+                compact
                small
              />
            );
@@ -1,134 +1,41 @@
-import { formatDistanceToNow } from "date-fns";
-import { deburr, sortBy } from "lodash";
-import { observer } from "mobx-react";
-import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
-import { TextSelection } from "prosemirror-state";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
-import insertFiles from "@shared/editor/commands/insertFiles";
-import { Heading } from "@shared/editor/lib/getHeadings";
-import { getDataTransferFiles } from "@shared/utils/files";
-import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
+import embeds from "@shared/editor/embeds";
 import { isInternalUrl } from "@shared/utils/urls";
-import { AttachmentValidation } from "@shared/validations";
-import Document from "~/models/Document";
-import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
-import HoverPreview from "~/components/HoverPreview";
-import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
+import { Props as EditorProps } from "~/editor";
 import useDictionary from "~/hooks/useDictionary";
-import useEmbeds from "~/hooks/useEmbeds";
-import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
-import { NotFoundError } from "~/utils/errors";
-import { uploadFile } from "~/utils/files";
 import history from "~/utils/history";
 import { isModKey } from "~/utils/keyboard";
-import { sharedDocumentPath } from "~/utils/routeHelpers";
+import { uploadFile } from "~/utils/uploadFile";
 import { isHash } from "~/utils/urls";
-import DocumentBreadcrumb from "./DocumentBreadcrumb";

-const LazyLoadedEditor = React.lazy(
+const SharedEditor = React.lazy(
  () =>
    import(
-      /* webpackChunkName: "preload-shared-editor" */
+      /* webpackChunkName: "shared-editor" */
      "~/editor"
    )
 );

 export type Props = Optional<
  EditorProps,
-  | "placeholder"
-  | "defaultValue"
-  | "onClickLink"
-  | "embeds"
-  | "dictionary"
-  | "onShowToast"
-  | "extensions"
+  "placeholder" | "defaultValue" | "onClickLink" | "embeds" | "dictionary"
 > & {
  shareId?: string | undefined;
  embedsDisabled?: boolean;
  grow?: boolean;
-  onHeadingsChange?: (headings: Heading[]) => void;
  onSynced?: () => Promise<void>;
  onPublish?: (event: React.MouseEvent) => any;
 };

-function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
-  const { id, shareId, onChange, onHeadingsChange } = props;
-  const { documents } = useStores();
+function Editor(props: Props, ref: React.Ref<any>) {
+  const { id, shareId } = props;
  const { showToast } = useToasts();
  const dictionary = useDictionary();
-  const embeds = useEmbeds(!shareId);
-  const [
-    activeLinkEvent,
-    setActiveLinkEvent,
-  ] = React.useState<MouseEvent | null>(null);
-  const previousHeadings = React.useRef<Heading[] | null>(null);

-  const handleLinkActive = React.useCallback((event: MouseEvent) => {
-    setActiveLinkEvent(event);
-    return false;
-  }, []);
-
-  const handleLinkInactive = React.useCallback(() => {
-    setActiveLinkEvent(null);
-  }, []);
-
-  const handleSearchLink = React.useCallback(
-    async (term: string) => {
-      if (isInternalUrl(term)) {
-        // search for exact internal document
-        const slug = parseDocumentSlug(term);
-        if (!slug) {
-          return [];
-        }
-
-        try {
-          const document = await documents.fetch(slug);
-          const time = formatDistanceToNow(Date.parse(document.updatedAt), {
-            addSuffix: true,
-          });
-
-          return [
-            {
-              title: document.title,
-              subtitle: `Updated ${time}`,
-              url: document.url,
-            },
-          ];
-        } catch (error) {
-          // NotFoundError could not find document for slug
-          if (!(error instanceof NotFoundError)) {
-            throw error;
-          }
-        }
-      }
-
-      // default search for anything that doesn't look like a URL
-      const results = await documents.searchTitles(term);
-
-      return sortBy(
-        results.map((document: Document) => {
-          return {
-            title: document.title,
-            subtitle: <DocumentBreadcrumb document={document} onlyText />,
-            url: document.url,
-          };
-        }),
-        (document) =>
-          deburr(document.title)
-            .toLowerCase()
-            .startsWith(deburr(term).toLowerCase())
-            ? -1
-            : 1
-      );
-    },
-    [documents]
-  );
-
-  const onUploadFile = React.useCallback(
+  const onUploadImage = React.useCallback(
    async (file: File) => {
      const result = await uploadFile(file, {
        documentId: id,
@@ -160,10 +67,8 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
          }
        }

-        // If we're navigating to an internal document link then prepend the
-        // share route to the URL so that the document is loaded in context
-        if (shareId && navigateTo.includes("/doc/")) {
-          navigateTo = sharedDocumentPath(shareId, navigateTo);
+        if (shareId) {
+          navigateTo = `/share/${shareId}${navigateTo}`;
        }

        history.push(navigateTo);
@@ -174,145 +79,28 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
    [shareId]
  );

-  const focusAtEnd = React.useCallback(() => {
-    ref?.current?.focusAtEnd();
-  }, [ref]);
-
-  const handleDrop = React.useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      const files = getDataTransferFiles(event);
-
-      const view = ref?.current?.view;
-      if (!view) {
-        return;
-      }
-
-      // Find a valid position at the end of the document to insert our content
-      const pos = TextSelection.near(
-        view.state.doc.resolve(view.state.doc.nodeSize - 2)
-      ).from;
-
-      // If there are no files in the drop event attempt to parse the html
-      // as a fragment and insert it at the end of the document
-      if (files.length === 0) {
-        const text =
-          event.dataTransfer.getData("text/html") ||
-          event.dataTransfer.getData("text/plain");
-
-        const dom = new DOMParser().parseFromString(text, "text/html");
-
-        view.dispatch(
-          view.state.tr.insert(
-            pos,
-            ProsemirrorDOMParser.fromSchema(view.state.schema).parse(dom)
-          )
-        );
-
-        return;
-      }
-
-      // Insert all files as attachments if any of the files are not images.
-      const isAttachment = files.some(
-        (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
-      );
-
-      insertFiles(view, event, pos, files, {
-        uploadFile: onUploadFile,
-        onFileUploadStart: props.onFileUploadStart,
-        onFileUploadStop: props.onFileUploadStop,
-        onShowToast: showToast,
-        dictionary,
-        isAttachment,
-      });
+  const onShowToast = React.useCallback(
+    (message: string) => {
+      showToast(message);
    },
-    [
-      ref,
-      props.onFileUploadStart,
-      props.onFileUploadStop,
-      dictionary,
-      onUploadFile,
-      showToast,
-    ]
-  );
-
-  // see: https://stackoverflow.com/a/50233827/192065
-  const handleDragOver = React.useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      event.stopPropagation();
-      event.preventDefault();
-    },
-    []
-  );
-
-  // Calculate if headings have changed and trigger callback if so
-  const updateHeadings = React.useCallback(() => {
-    if (onHeadingsChange) {
-      const headings = ref?.current?.getHeadings();
-      if (
-        headings &&
-        headings.map((h) => h.level + h.title).join("") !==
-          previousHeadings.current?.map((h) => h.level + h.title).join("")
-      ) {
-        previousHeadings.current = headings;
-        onHeadingsChange(headings);
-      }
-    }
-  }, [ref, onHeadingsChange]);
-
-  const handleChange = React.useCallback(
-    (event) => {
-      onChange?.(event);
-      updateHeadings();
-    },
-    [onChange, updateHeadings]
-  );
-
-  const handleRefChanged = React.useCallback(
-    (node: SharedEditor | null) => {
-      if (node && !previousHeadings.current) {
-        updateHeadings();
-      }
-    },
-    [updateHeadings]
+    [showToast]
  );

  return (
    <ErrorBoundary reloadOnChunkMissing>
-      <>
-        <LazyLoadedEditor
-          ref={mergeRefs([ref, handleRefChanged])}
-          uploadFile={onUploadFile}
-          onShowToast={showToast}
-          embeds={embeds}
-          dictionary={dictionary}
-          {...props}
-          onHoverLink={handleLinkActive}
-          onClickLink={onClickLink}
-          onSearchLink={handleSearchLink}
-          onChange={handleChange}
-          placeholder={props.placeholder || ""}
-          defaultValue={props.defaultValue || ""}
-        />
-        {props.grow && !props.readOnly && (
-          <ClickablePadding
-            onClick={focusAtEnd}
-            onDrop={handleDrop}
-            onDragOver={handleDragOver}
-            grow
-          />
-        )}
-        {activeLinkEvent && !shareId && (
-          <HoverPreview
-            node={activeLinkEvent.target as HTMLAnchorElement}
-            event={activeLinkEvent}
-            onClose={handleLinkInactive}
-          />
-        )}
-      </>
+      <SharedEditor
+        ref={ref}
+        uploadImage={onUploadImage}
+        onShowToast={onShowToast}
+        embeds={embeds}
+        dictionary={dictionary}
+        {...props}
+        onClickLink={onClickLink}
+        placeholder={props.placeholder || ""}
+        defaultValue={props.defaultValue || ""}
+      />
    </ErrorBoundary>
  );
 }

-export default observer(React.forwardRef(Editor));
+export default React.forwardRef(Editor);
@@ -1,32 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-
-type Props = {
-  /* The emoji to render */
-  emoji: string;
-  /* The size of the emoji, 24px is default to match standard icons */
-  size?: number;
-};
-
-/**
- * EmojiIcon is a component that renders an emoji in the size of a standard icon
- * in a way that can be used wherever an Icon would be.
- */
-export default function EmojiIcon({ size = 24, emoji, ...rest }: Props) {
-  return (
-    <Span $size={size} {...rest}>
-      {emoji}
-    </Span>
-  );
-}
-
-const Span = styled.span<{ $size: number }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
-  text-indent: -0.15em;
-  font-size: 14px;
-`;
@@ -2,7 +2,6 @@ import styled from "styled-components";

 const Empty = styled.p`
  color: ${(props) => props.theme.textTertiary};
-  user-select: none;
 `;

 export default Empty;
@@ -1,3 +1,4 @@
+import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -9,10 +10,9 @@ import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
 import Text from "~/components/Text";
 import env from "~/env";
-import Logger from "~/utils/Logger";
-import isCloudHosted from "~/utils/isCloudHosted";

 type Props = WithTranslation & {
+  children: React.ReactNode;
  reloadOnChunkMissing?: boolean;
 };

@@ -26,6 +26,7 @@ class ErrorBoundary extends React.Component<Props> {

  componentDidCatch(error: Error) {
    this.error = error;
+    console.error(error);

    if (
      this.props.reloadOnChunkMissing &&
@@ -39,7 +40,9 @@ class ErrorBoundary extends React.Component<Props> {
      return;
    }

-    Logger.error("ErrorBoundary", error);
+    if (env.SENTRY_DSN) {
+      Sentry.captureException(error);
+    }
  }

  handleReload = () => {
@@ -59,7 +62,7 @@ class ErrorBoundary extends React.Component<Props> {

    if (this.error) {
      const error = this.error;
-      const isReported = !!env.SENTRY_DSN && isCloudHosted;
+      const isReported = !!env.SENTRY_DSN && env.DEPLOYMENT === "hosted";
      const isChunkError = this.error.message.match(/chunk/);

      if (isChunkError) {
@@ -1,10 +1,11 @@
 import * as React from "react";

 type Props = {
+  children: React.ReactNode;
  className?: string;
 };

-const EventBoundary: React.FC<Props> = ({ children, className }) => {
+export default function EventBoundary({ children, className }: Props) {
  const handleClick = React.useCallback((event: React.SyntheticEvent) => {
    event.preventDefault();
    event.stopPropagation();
@@ -15,6 +16,4 @@ const EventBoundary: React.FC<Props> = ({ children, className }) => {
      {children}
    </span>
  );
-};
-
-export default EventBoundary;
+}
@@ -1,25 +1,18 @@
-import { LocationDescriptor } from "history";
-import { observer } from "mobx-react";
 import {
  TrashIcon,
  ArchiveIcon,
  EditIcon,
  PublishIcon,
  MoveIcon,
-  UnpublishIcon,
-  LightningIcon,
+  CheckboxIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import { CompositeStateReturn } from "reakit/Composite";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
 import Avatar from "~/components/Avatar";
-import CompositeItem, {
-  Props as ItemProps,
-} from "~/components/List/CompositeItem";
 import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
@@ -30,49 +23,34 @@ type Props = {
  document: Document;
  event: Event;
  latest?: boolean;
-} & CompositeStateReturn;
+};

-const EventListItem = ({ event, latest, document, ...rest }: Props) => {
+const EventListItem = ({ event, latest, document }: Props) => {
  const { t } = useTranslation();
-  const { revisions } = useStores();
+  const { policies } = useStores();
  const location = useLocation();
+  const can = policies.abilities(document.id);
  const opts = {
    userName: event.actor.name,
  };
  const isRevision = event.name === "revisions.create";
-  let meta, icon, to: LocationDescriptor | undefined;
-
-  const ref = React.useRef<HTMLAnchorElement>(null);
-  // the time component tends to steal focus when clicked
-  // ...so forward the focus back to the parent item
-  const handleTimeClick = () => {
-    ref.current?.focus();
-  };
-
-  const prefetchRevision = () => {
-    if (event.name === "revisions.create" && event.modelId) {
-      revisions.fetch(event.modelId);
-    }
-  };
+  let meta, icon, to;

  switch (event.name) {
    case "revisions.create":
-      icon = <EditIcon color="currentColor" size={16} />;
-      meta = t("{{userName}} edited", opts);
-      to = {
-        pathname: documentHistoryUrl(document, event.modelId || ""),
-        state: { retainScrollPosition: true },
-      };
-      break;
-
-    case "documents.live_editing":
-      icon = <LightningIcon color="currentColor" size={16} />;
-      meta = t("Latest");
-      to = {
-        pathname: documentHistoryUrl(document),
-        state: { retainScrollPosition: true },
-      };
-      break;
+    case "documents.latest_version": {
+      if (latest) {
+        icon = <CheckboxIcon color="currentColor" size={16} checked />;
+        meta = t("Latest version");
+        to = documentHistoryUrl(document);
+        break;
+      } else {
+        icon = <EditIcon color="currentColor" size={16} />;
+        meta = t("{{userName}} edited", opts);
+        to = documentHistoryUrl(document, event.modelId || "");
+        break;
+      }
+    }

    case "documents.archive":
      icon = <ArchiveIcon color="currentColor" size={16} />;
@@ -97,11 +75,6 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      meta = t("{{userName}} published", opts);
      break;

-    case "documents.unpublish":
-      icon = <UnpublishIcon color="currentColor" size={16} />;
-      meta = t("{{userName}} unpublished", opts);
-      break;
-
    case "documents.move":
      icon = <MoveIcon color="currentColor" size={16} />;
      meta = t("{{userName}} moved", opts);
@@ -115,31 +88,20 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
    return null;
  }

-  const isActive =
-    typeof to === "string"
-      ? location.pathname === to
-      : location.pathname === to?.pathname;
-
-  if (document.isDeleted) {
-    to = undefined;
-  }
+  const isActive = location.pathname === to;

  return (
-    <BaseItem
+    <ListItem
      small
      exact
-      to={to}
+      to={document.isDeleted ? undefined : to}
      title={
        <Time
          dateTime={event.createdAt}
          tooltipDelay={500}
-          format={{
-            en_US: "MMM do, h:mm a",
-            fr_FR: "'Le 'd MMMM 'à' H:mm",
-          }}
+          format="MMM do, h:mm a"
          relative={false}
          addSuffix
-          onClick={handleTimeClick}
        />
      }
      image={<Avatar src={event.actor?.avatarUrl} size={32} />}
@@ -150,27 +112,14 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
        </Subtitle>
      }
      actions={
-        isRevision && isActive && event.modelId ? (
+        isRevision && isActive && event.modelId && can.update ? (
          <RevisionMenu document={document} revisionId={event.modelId} />
        ) : undefined
      }
-      onMouseEnter={prefetchRevision}
-      ref={ref}
-      {...rest}
    />
  );
 };

-const BaseItem = React.forwardRef(
-  ({ to, ...rest }: ItemProps, ref?: React.Ref<HTMLAnchorElement>) => {
-    if (to) {
-      return <CompositeListItem to={to} ref={ref} {...rest} />;
-    }
-
-    return <ListItem ref={ref} {...rest} />;
-  }
-);
-
 const Subtitle = styled.span`
  svg {
    margin: -3px;
@@ -178,10 +127,10 @@ const Subtitle = styled.span`
  }
 `;

-const ItemStyle = css`
+const ListItem = styled(Item)`
  border: 0;
  position: relative;
-  margin: 8px 0;
+  margin: 8px;
  padding: 8px;
  border-radius: 8px;

@@ -224,12 +173,4 @@ const ItemStyle = css`
  }
 `;

-const ListItem = styled(Item)`
-  ${ItemStyle}
-`;
-
-const CompositeListItem = styled(CompositeItem)`
-  ${ItemStyle}
-`;
-
-export default observer(EventListItem);
+export default EventListItem;
@@ -9,7 +9,7 @@ type Props = {
  users: User[];
  size?: number;
  overflow?: number;
-  limit?: number;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
  renderAvatar?: (user: User) => React.ReactNode;
 };

@@ -17,7 +17,6 @@ function Facepile({
  users,
  overflow = 0,
  size = 32,
-  limit = 8,
  renderAvatar = DefaultAvatar,
  ...rest
 }: Props) {
@@ -25,13 +24,10 @@ function Facepile({
    <Avatars {...rest}>
      {overflow > 0 && (
        <More size={size}>
-          <span>
-            {users.length ? "+" : ""}
-            {overflow}
-          </span>
+          <span>+{overflow}</span>
        </More>
      )}
-      {users.slice(0, limit).map((user) => (
+      {users.map((user) => (
        <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
      ))}
    </Avatars>
@@ -69,7 +65,7 @@ const More = styled.div<{ size: number }>`
 const Avatars = styled(Flex)`
  align-items: center;
  flex-direction: row-reverse;
-  cursor: var(--pointer);
+  cursor: pointer;
 `;

 export default observer(Facepile);
@@ -1,9 +1,18 @@
-import { CSSProperties } from "react";
 import styled from "styled-components";

-type JustifyValues = CSSProperties["justifyContent"];
+type JustifyValues =
+  | "center"
+  | "space-around"
+  | "space-between"
+  | "flex-start"
+  | "flex-end";

-type AlignValues = CSSProperties["alignItems"];
+type AlignValues =
+  | "stretch"
+  | "center"
+  | "baseline"
+  | "flex-start"
+  | "flex-end";

 const Flex = styled.div<{
  auto?: boolean;
@@ -11,19 +20,11 @@ const Flex = styled.div<{
  align?: AlignValues;
  justify?: JustifyValues;
  shrink?: boolean;
-  reverse?: boolean;
  gap?: number;
 }>`
  display: flex;
  flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
-  flex-direction: ${({ column, reverse }) =>
-    reverse
-      ? column
-        ? "column-reverse"
-        : "row-reverse"
-      : column
-      ? "column"
-      : "row"};
+  flex-direction: ${({ column }) => (column ? "column" : "row")};
  align-items: ${({ align }) => align};
  justify-content: ${({ justify }) => justify};
  flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
@@ -13,14 +13,13 @@ import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Modal from "~/components/Modal";
 import withStores from "~/components/withStores";
-import NudeButton from "./NudeButton";

 type Props = RootStore & {
  group: Group;
  membership?: CollectionGroupMembership;
  showFacepile?: boolean;
  showAvatar?: boolean;
-  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
+  renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode;
 };

@observer
@@ -64,13 +63,11 @@ class GroupListItem extends React.Component<Props> {
          actions={
            <Flex align="center" gap={8}>
              {showFacepile && (
-                <NudeButton
-                  width="auto"
-                  height="auto"
+                <Facepile
                  onClick={this.handleMembersModalOpen}
-                >
-                  <Facepile users={users} overflow={overflow} />
-                </NudeButton>
+                  users={users}
+                  overflow={overflow}
+                />
              )}
              {renderActions({
                openMembersModal: this.handleMembersModalOpen,
@@ -102,7 +99,7 @@ const Image = styled(Flex)`
 const Title = styled.span`
  &:hover {
    text-decoration: underline;
-    cursor: var(--pointer);
+    cursor: pointer;
  }
 `;

@@ -1,23 +1,24 @@
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
 import usePrevious from "~/hooks/usePrevious";

 type Props = {
+  children?: React.ReactNode;
  isOpen: boolean;
  title?: string;
  onRequestClose: () => void;
 };

-const Guide: React.FC<Props> = ({
+const Guide = ({
  children,
  isOpen,
  title = "Untitled",
  onRequestClose,
  ...rest
-}) => {
+}: Props) => {
  const dialog = useDialogState({
    animated: 250,
  });
@@ -72,7 +73,7 @@ const Backdrop = styled.div`
  right: 0;
  bottom: 0;
  background-color: ${(props) => props.theme.backdrop} !important;
-  z-index: ${depths.modalOverlay};
+  z-index: ${(props) => props.theme.depths.modalOverlay};
  transition: opacity 200ms ease-in-out;
  opacity: 0;

@@ -87,7 +88,7 @@ const Scene = styled.div`
  right: 0;
  bottom: 0;
  margin: 12px;
-  z-index: ${depths.modal};
+  z-index: ${(props) => props.theme.depths.modal};
  display: flex;
  justify-content: center;
  align-items: flex-start;
@@ -111,4 +112,4 @@ const Content = styled(Scrollable)`
  padding: 16px;
 `;

-export default Guide;
+export default observer(Guide);
@@ -5,42 +5,42 @@ import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
-import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { supportsPassiveListener } from "~/utils/browser";

 type Props = {
-  left?: React.ReactNode;
+  breadcrumb?: React.ReactNode;
  title: React.ReactNode;
  actions?: React.ReactNode;
  hasSidebar?: boolean;
 };

-function Header({ left, title, actions, hasSidebar }: Props) {
+function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
  const { ui } = useStores();
  const isMobile = useMobile();

  const hasMobileSidebar = hasSidebar && isMobile;

-  const passThrough = !actions && !left && !title;
+  const passThrough = !actions && !breadcrumb && !title;

  const [isScrolled, setScrolled] = React.useState(false);
-  const handleScroll = React.useMemo(
-    () => throttle(() => setScrolled(window.scrollY > 75), 50),
+  const handleScroll = React.useCallback(
+    throttle(() => setScrolled(window.scrollY > 75), 50),
    []
  );

-  useEventListener(
-    "scroll",
-    handleScroll,
-    window,
-    supportsPassiveListener ? { passive: true } : { capture: false }
-  );
+  React.useEffect(() => {
+    window.addEventListener(
+      "scroll",
+      handleScroll,
+      supportsPassiveListener ? { passive: true } : false
+    );
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);

  const handleClickTitle = React.useCallback(() => {
    window.scrollTo({
@@ -51,7 +51,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {

  return (
    <Wrapper align="center" shrink={false} $passThrough={passThrough}>
-      {left || hasMobileSidebar ? (
+      {breadcrumb || hasMobileSidebar ? (
        <Breadcrumbs>
          {hasMobileSidebar && (
            <MobileMenuButton
@@ -61,7 +61,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {
              neutral
            />
          )}
-          {left}
+          {breadcrumb}
        </Breadcrumbs>
      ) : null}

@@ -100,7 +100,7 @@ const Actions = styled(Flex)`

 const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
  top: 0;
-  z-index: ${depths.header};
+  z-index: ${(props) => props.theme.depths.header};
  position: sticky;
  background: ${(props) => props.theme.background};

@@ -118,7 +118,7 @@ const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
  padding: 12px;
  transition: all 100ms ease-out;
  transform: translate3d(0, 0, 0);
-  min-height: 64px;
+  min-height: 56px;
  justify-content: flex-start;

  @supports (backdrop-filter: blur(20px)) {
@@ -143,7 +143,7 @@ const Title = styled("div")`
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
-  cursor: var(--pointer);
+  cursor: pointer;
  min-width: 0;

  ${breakpoint("tablet")`
@@ -5,6 +5,14 @@ const Heading = styled.h1<{ centered?: boolean }>`
  align-items: center;
  user-select: none;
  ${(props) => (props.centered ? "text-align: center;" : "")}
+
+  svg {
+    margin-top: 4px;
+    margin-left: -6px;
+    margin-right: 2px;
+    align-self: flex-start;
+    flex-shrink: 0;
+  }
 `;

 export default Heading;
@@ -1,4 +1,3 @@
-import { escapeRegExp } from "lodash";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
@@ -24,7 +23,7 @@ function Highlight({
    regex = highlight;
  } else {
    regex = new RegExp(
-      escapeRegExp(highlight || ""),
+      (highlight || "").replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"),
      caseSensitive ? "g" : "gi"
    );
  }
@@ -42,10 +41,10 @@ function Highlight({
  );
 }

-export const Mark = styled.mark`
+const Mark = styled.mark`
  background: ${(props) => props.theme.searchHighlight};
  border-radius: 2px;
-  padding: 0 2px;
+  padding: 0 4px;
 `;

 export default Highlight;
@@ -2,11 +2,9 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import { isExternalUrl } from "@shared/utils/urls";
+import { isInternalUrl } from "@shared/utils/urls";
 import HoverPreviewDocument from "~/components/HoverPreviewDocument";
-import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { fadeAndSlideDown } from "~/styles/animations";

@@ -125,13 +123,8 @@ function HoverPreviewInternal({ node, onClose }: Props) {
 }

 function HoverPreview({ node, ...rest }: Props) {
-  const isMobile = useMobile();
-  if (isMobile) {
-    return null;
-  }
-
  // previews only work for internal doc links for now
-  if (isExternalUrl(node.href)) {
+  if (!isInternalUrl(node.href)) {
    return null;
  }

@@ -157,7 +150,7 @@ const Margin = styled.div`

 const CardContent = styled.div`
  overflow: hidden;
-  max-height: 20em;
+  max-height: 350px;
  user-select: none;
 `;

@@ -202,7 +195,7 @@ const Card = styled.div`
 const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
  margin-top: 10px;
  position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
-  z-index: ${depths.hoverPreview};
+  z-index: ${(props) => props.theme.depths.hoverPreview};
  display: flex;
  max-height: 75%;

@@ -50,7 +50,7 @@ function HoverPreviewDocument({ url, children }: Props) {
 }

 const Content = styled(Link)`
-  cursor: var(--pointer);
+  cursor: pointer;
 `;

 const Heading = styled.h2`
@@ -40,7 +40,6 @@ import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { colorPalette } from "@shared/utils/collections";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
 import { LabelText } from "~/components/Input";
@@ -201,7 +200,18 @@ export const icons = {
    keywords: "warning alert error",
  },
 };
-
+const colors = [
+  "#4E5C6E",
+  "#0366d6",
+  "#9E5CF7",
+  "#FF825C",
+  "#FF5C80",
+  "#FFBE0B",
+  "#42DED1",
+  "#00D084",
+  "#FF4DFA",
+  "#2F362F",
+];
 type Props = {
  onOpen?: () => void;
  onClose?: () => void;
@@ -262,7 +272,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
            <ColorPicker
              color={color}
              onChange={(color) => onChange(color.hex, icon)}
-              colors={colorPalette}
+              colors={colors}
              triangle="hide"
              styles={{
                default: {
@@ -38,13 +38,6 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
    color: ${(props) => props.theme.placeholder};
  }

-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0px 1000px ${(props) => props.theme.background}
-      inset;
-  }
-
  &::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
@@ -58,13 +51,11 @@ const Wrapper = styled.div<{
  flex?: boolean;
  short?: boolean;
  minHeight?: number;
-  minWidth?: number;
  maxHeight?: number;
 }>`
  flex: ${(props) => (props.flex ? "1" : "0")};
  width: ${(props) => (props.short ? "49%" : "auto")};
  max-width: ${(props) => (props.short ? "350px" : "100%")};
-  min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : "initial")};
  min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "initial")};
 `;
@@ -106,24 +97,36 @@ export const LabelText = styled.div`
  display: inline-block;
 `;

-export type Props = React.InputHTMLAttributes<
-  HTMLInputElement | HTMLTextAreaElement
-> & {
+export type Props = {
  type?: "text" | "email" | "checkbox" | "search" | "textarea";
-  labelHidden?: boolean;
+  value?: string;
  label?: string;
+  className?: string;
+  labelHidden?: boolean;
  flex?: boolean;
  short?: boolean;
  margin?: string | number;
  icon?: React.ReactNode;
-  innerRef?: React.Ref<any>;
+  name?: string;
+  minLength?: number;
+  maxLength?: number;
+  autoFocus?: boolean;
+  autoComplete?: boolean | string;
+  readOnly?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  onChange?: (
+    ev: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => unknown;
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => unknown;
  onFocus?: (ev: React.SyntheticEvent) => unknown;
  onBlur?: (ev: React.SyntheticEvent) => unknown;
 };

@observer
 class Input extends React.Component<Props> {
-  input = this.props.innerRef;
+  input = React.createRef<HTMLInputElement | HTMLTextAreaElement>();

  @observable
  focused = false;
@@ -144,6 +147,10 @@ class Input extends React.Component<Props> {
    }
  };

+  focus() {
+    this.input.current?.focus();
+  }
+
  render() {
    const {
      type = "text",
@@ -159,6 +166,8 @@ class Input extends React.Component<Props> {
      ...rest
    } = this.props;

+    const InputComponent: React.ComponentType =
+      type === "textarea" ? RealTextarea : RealInput;
    const wrappedLabel = <LabelText>{label}</LabelText>;

    return (
@@ -172,24 +181,15 @@ class Input extends React.Component<Props> {
            ))}
          <Outline focused={this.focused} margin={margin}>
            {icon && <IconWrapper>{icon}</IconWrapper>}
-            {type === "textarea" ? (
-              <RealTextarea
-                ref={this.props.innerRef}
-                onBlur={this.handleBlur}
-                onFocus={this.handleFocus}
-                hasIcon={!!icon}
-                {...rest}
-              />
-            ) : (
-              <RealInput
-                ref={this.props.innerRef}
-                onBlur={this.handleBlur}
-                onFocus={this.handleFocus}
-                hasIcon={!!icon}
-                type={type}
-                {...rest}
-              />
-            )}
+            <InputComponent
+              // @ts-expect-error no idea why this is not working
+              ref={this.input}
+              onBlur={this.handleBlur}
+              onFocus={this.handleFocus}
+              hasIcon={!!icon}
+              type={type === "textarea" ? undefined : type}
+              {...rest}
+            />
          </Outline>
        </label>
      </Wrapper>
@@ -197,10 +197,4 @@ class Input extends React.Component<Props> {
  }
 }

-export const ReactHookWrappedInput = React.forwardRef(
-  (props: Omit<Props, "innerRef">, ref: React.Ref<any>) => {
-    return <Input {...{ ...props, innerRef: ref }} />;
-  }
-);
-
 export default Input;
@@ -2,7 +2,7 @@ import { SearchIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
-import Input, { Props as InputProps } from "~/components/Input";
+import Input, { Props as InputProps } from "./Input";

 type Props = InputProps & {
  placeholder?: string;
@@ -11,10 +11,7 @@ type Props = InputProps & {
  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
 };

-function InputSearch(
-  props: Props,
-  ref: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
-) {
+export default function InputSearch(props: Props) {
  const { t } = useTranslation();
  const theme = useTheme();
  const [isFocused, setIsFocused] = React.useState(false);
@@ -42,10 +39,7 @@ function InputSearch(
      onBlur={handleBlur}
      margin={0}
      labelHidden
-      innerRef={ref}
      {...rest}
    />
  );
 }
-
-export default React.forwardRef(InputSearch);
@@ -7,8 +7,8 @@ import styled, { useTheme } from "styled-components";
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
 import { isModKey } from "~/utils/keyboard";
-import { searchPath } from "~/utils/routeHelpers";
-import Input, { Outline } from "./Input";
+import { searchUrl } from "~/utils/routeHelpers";
+import Input from "./Input";

 type Props = {
  source: string;
@@ -30,16 +30,19 @@ function InputSearchPage({
  collectionId,
  source,
 }: Props) {
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const inputRef = React.useRef<Input>(null);
  const theme = useTheme();
  const history = useHistory();
  const { t } = useTranslation();
  const [isFocused, setFocused, setUnfocused] = useBoolean(false);
+  const focus = React.useCallback(() => {
+    inputRef.current?.focus();
+  }, []);

  useKeyDown("f", (ev: KeyboardEvent) => {
-    if (isModKey(ev) && document.activeElement !== inputRef.current) {
+    if (isModKey(ev)) {
      ev.preventDefault();
-      inputRef.current?.focus();
+      focus();
    }
  });

@@ -48,16 +51,12 @@ function InputSearchPage({
      if (ev.key === "Enter") {
        ev.preventDefault();
        history.push(
-          searchPath(ev.currentTarget.value, {
+          searchUrl(ev.currentTarget.value, {
            collectionId,
            ref: source,
          })
        );
      }
-      if (ev.key === "Escape") {
-        ev.preventDefault();
-        inputRef.current?.blur();
-      }

      if (onKeyDown) {
        onKeyDown(ev);
@@ -68,7 +67,7 @@ function InputSearchPage({

  return (
    <InputMaxWidth
-      innerRef={inputRef}
+      ref={inputRef}
      type="search"
      placeholder={placeholder || `${t("Search")}…`}
      value={value}
@@ -90,10 +89,6 @@ function InputSearchPage({

 const InputMaxWidth = styled(Input)`
  max-width: 30vw;
-
-  ${Outline} {
-    border-radius: 16px;
-  }
 `;

 export default observer(InputSearchPage);
@@ -13,13 +13,7 @@ import styled, { css } from "styled-components";
 import Button, { Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
-import { fadeAndScaleIn } from "~/styles/animations";
-import {
-  Position,
-  Background as ContextMenuBackground,
-  Backdrop,
-  Placement,
-} from "./ContextMenu";
+import { Position, Background, Backdrop, Placement } from "./ContextMenu";
 import { MenuAnchorCSS } from "./ContextMenu/MenuItem";
 import { LabelText } from "./Input";

@@ -29,8 +23,6 @@ export type Option = {
 };

 export type Props = {
-  id?: string;
-  name?: string;
  value?: string | null;
  label?: string;
  nude?: boolean;
@@ -62,7 +54,6 @@ const InputSelect = (props: Props) => {
    disabled,
    note,
    icon,
-    ...rest
  } = props;

  const select = useSelectState({
@@ -137,7 +128,7 @@ const InputSelect = (props: Props) => {
            wrappedLabel
          ))}

-        <Select {...select} disabled={disabled} {...rest} ref={buttonRef}>
+        <Select {...select} disabled={disabled} ref={buttonRef}>
          {(props) => (
            <StyledButton
              neutral
@@ -176,7 +167,6 @@ const InputSelect = (props: Props) => {
                  ref={contentRef}
                  topAnchor={topAnchor}
                  rightAnchor={rightAnchor}
-                  hiddenScrollbars
                  style={
                    maxHeight && topAnchor
                      ? {
@@ -223,10 +213,6 @@ const InputSelect = (props: Props) => {
  );
 };

-const Background = styled(ContextMenuBackground)`
-  animation: ${fadeAndScaleIn} 200ms ease;
-`;
-
 const Placeholder = styled.span`
  color: ${(props) => props.theme.placeholder};
 `;
@@ -243,7 +229,6 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
  margin-bottom: 16px;
  display: block;
  width: 100%;
-  cursor: default;

  &:hover:not(:disabled) {
    background: ${(props) => props.theme.buttonNeutralBackground};
@@ -288,7 +273,7 @@ const Positioner = styled(Position)`
        color: ${(props) => props.theme.white};
        background: ${(props) => props.theme.primary};
        box-shadow: none;
-        cursor: var(--pointer);
+        cursor: pointer;

        svg {
          fill: ${(props) => props.theme.white};
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { $Diff } from "utility-types";
-import { CollectionPermission } from "@shared/types";
 import InputSelect, { Props, Option } from "./InputSelect";

 export default function InputSelectPermission(
@@ -32,11 +31,11 @@ export default function InputSelectPermission(
      options={[
        {
          label: t("View and edit"),
-          value: CollectionPermission.ReadWrite,
+          value: "read_write",
        },
        {
          label: t("View only"),
-          value: CollectionPermission.Read,
+          value: "read",
        },
        {
          label: t("No access"),
@@ -5,9 +5,10 @@ import Flex from "~/components/Flex";

 type Props = {
  label: React.ReactNode | string;
+  children?: React.ReactNode;
 };

-const Labeled: React.FC<Props> = ({ label, children, ...props }) => (
+const Labeled = ({ label, children, ...props }: Props) => (
  <Flex column {...props}>
    <Label>{label}</Label>
    {children}
@@ -10,7 +10,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { detectLanguage } from "~/utils/language";

-function Icon({ className }: { className?: string }) {
+function Icon(props: any) {
  return (
    <svg
      width="32"
@@ -18,7 +18,7 @@ function Icon({ className }: { className?: string }) {
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      {...props}
    >
      <path
        fill-rule="evenodd"
@@ -1,29 +1,24 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
-import styled, { DefaultTheme } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
 import SkipNavLink from "~/components/SkipNavLink";
 import useKeyDown from "~/hooks/useKeyDown";
-import { MenuProvider } from "~/hooks/useMenuContext";
 import useStores from "~/hooks/useStores";
 import { isModKey } from "~/utils/keyboard";

 type Props = {
  title?: string;
+  children?: React.ReactNode;
  sidebar?: React.ReactNode;
-  sidebarRight?: React.ReactNode;
+  rightRail?: React.ReactNode;
 };

-const Layout: React.FC<Props> = ({
-  title,
-  children,
-  sidebar,
-  sidebarRight,
-}) => {
+function Layout({ title, children, sidebar, rightRail }: Props) {
  const { ui } = useStores();
  const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;

@@ -45,7 +40,7 @@ const Layout: React.FC<Props> = ({
      {ui.progressBarVisible && <LoadingIndicatorBar />}

      <Container auto>
-        <MenuProvider>{sidebar}</MenuProvider>
+        {sidebar}

        <SkipNavContent />
        <Content
@@ -65,11 +60,11 @@ const Layout: React.FC<Props> = ({
          {children}
        </Content>

-        {sidebarRight}
+        {rightRail}
      </Container>
    </Container>
  );
-};
+}

 const Container = styled(Flex)`
  background: ${(props) => props.theme.background};
@@ -79,14 +74,11 @@ const Container = styled(Flex)`
  min-height: 100%;
 `;

-type ContentProps = {
+const Content = styled(Flex)<{
  $isResizing?: boolean;
  $sidebarCollapsed?: boolean;
  $hasSidebar?: boolean;
-  theme: DefaultTheme;
-};
-
-const Content = styled(Flex)<ContentProps>`
+}>`
  margin: 0;
  transition: ${(props) =>
    props.$isResizing ? "none" : `margin-left 100ms ease-out`};
@@ -100,7 +92,7 @@ const Content = styled(Flex)<ContentProps>`
  `}

  ${breakpoint("tablet")`
-    ${(props: ContentProps) =>
+    ${(props: any) =>
      props.$hasSidebar &&
      props.$sidebarCollapsed &&
      `margin-left: ${props.theme.sidebarCollapsedWidth}px;`}
@@ -1,23 +0,0 @@
-import * as React from "react";
-import { loadPolyfills } from "~/utils/polyfills";
-
-/**
- * Asyncronously load required polyfills. Should wrap the React tree.
- */
-export const LazyPolyfill: React.FC = ({ children }) => {
-  const [isLoaded, setIsLoaded] = React.useState(false);
-
-  React.useEffect(() => {
-    loadPolyfills().then(() => {
-      setIsLoaded(true);
-    });
-  }, []);
-
-  if (!isLoaded) {
-    return null;
-  }
-
-  return <>{children}</>;
-};
-
-export default LazyPolyfill;
@@ -1,17 +0,0 @@
-import * as React from "react";
-import {
-  CompositeStateReturn,
-  CompositeItem as BaseCompositeItem,
-} from "reakit/Composite";
-import Item, { Props as ItemProps } from "./Item";
-
-export type Props = ItemProps & CompositeStateReturn;
-
-function CompositeItem(
-  { to, ...rest }: Props,
-  ref?: React.Ref<HTMLAnchorElement>
-) {
-  return <BaseCompositeItem as={Item} to={to} {...rest} ref={ref} />;
-}
-
-export default React.forwardRef(CompositeItem);
@@ -1,53 +0,0 @@
-import { DisconnectedIcon, WarningIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Empty from "~/components/Empty";
-import useEventListener from "~/hooks/useEventListener";
-import { OfflineError } from "~/utils/errors";
-import ButtonLink from "../ButtonLink";
-import Flex from "../Flex";
-
-type Props = {
-  error: Error;
-  retry: () => void;
-};
-
-export default function LoadingError({ error, retry, ...rest }: Props) {
-  const { t } = useTranslation();
-  useEventListener("online", retry);
-
-  const message =
-    error instanceof OfflineError ? (
-      <>
-        <DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
-      </>
-    ) : (
-      <>
-        <WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
-      </>
-    );
-
-  return (
-    <Content {...rest}>
-      <Flex align="center" gap={4}>
-        {message}{" "}
-        <ButtonLink onClick={() => retry()}>{t("Click to retry")}…</ButtonLink>
-      </Flex>
-    </Content>
-  );
-}
-
-const Content = styled(Empty)`
-  padding: 8px 0;
-  white-space: nowrap;
-
-  ${ButtonLink} {
-    color: ${(props) => props.theme.textTertiary};
-
-    &:hover {
-      color: ${(props) => props.theme.textSecondary};
-      text-decoration: underline;
-    }
-  }
-`;
@@ -1,16 +1,16 @@
-import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";

-export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
+type Props = {
  image?: React.ReactNode;
-  to?: LocationDescriptor;
+  to?: string;
  exact?: boolean;
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  actions?: React.ReactNode;
+  compact?: boolean;
  border?: boolean;
  small?: boolean;
 };
@@ -50,7 +50,7 @@ const ListItem = (
      <Wrapper
        ref={ref}
        $border={border}
-        $small={small}
+        $compact={compact}
        activeStyle={{
          background: theme.primary,
        }}
@@ -64,21 +64,16 @@ const ListItem = (
  }

  return (
-    <Wrapper ref={ref} $border={border} $small={small} {...rest}>
+    <Wrapper $compact={compact} $border={border} {...rest}>
      {content(false)}
    </Wrapper>
  );
 };

-const Wrapper = styled.a<{
-  $small?: boolean;
-  $border?: boolean;
-  to?: LocationDescriptor;
-}>`
+const Wrapper = styled.div<{ $compact?: boolean; $border?: boolean }>`
  display: flex;
-  padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
-  margin: ${(props) =>
-    props.$border === false ? (props.$small ? "8px 0" : "16px 0") : 0};
+  margin: ${(props) => (props.$compact === false ? 0 : "8px 0")};
+  padding: ${(props) => (props.$compact === false ? "8px 0" : 0)};
  border-bottom: 1px solid
    ${(props) =>
      props.$border === false ? "transparent" : props.theme.divider};
@@ -86,8 +81,6 @@ const Wrapper = styled.a<{
  &:last-child {
    border-bottom: 0;
  }
-
-  cursor: ${({ to }) => (to ? "var(--pointer)" : "default")};
 `;

 const Image = styled(Flex)`
@@ -97,7 +90,6 @@ const Image = styled(Flex)`
  user-select: none;
  flex-shrink: 0;
  align-self: center;
-  color: ${(props) => props.theme.text};
 `;

 const Heading = styled.p<{ $small?: boolean }>`
@@ -3,24 +3,19 @@ import * as React from "react";
 import styled from "styled-components";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
-import PlaceholderText, {
-  Props as PlaceholderTextProps,
-} from "~/components/PlaceholderText";
+import PlaceholderText from "~/components/PlaceholderText";

 type Props = {
  count?: number;
-  className?: string;
-  header?: PlaceholderTextProps;
-  body?: PlaceholderTextProps;
 };

-const Placeholder = ({ count, className, header, body }: Props) => {
+const ListPlaceHolder = ({ count }: Props) => {
  return (
    <Fade>
      {times(count || 2, (index) => (
-        <Item key={index} className={className} column auto>
-          <PlaceholderText {...header} header delay={0.2 * index} />
-          <PlaceholderText {...body} delay={0.2 * index} />
+        <Item key={index} column auto>
+          <PlaceholderText header delay={0.2 * index} />
+          <PlaceholderText delay={0.2 * index} />
        </Item>
      ))}
    </Fade>
@@ -31,4 +26,4 @@ const Item = styled(Flex)`
  padding: 10px 0;
 `;

-export default Placeholder;
+export default ListPlaceHolder;
--- a/Show More
+++ b/Show More